/* =====================================================================
   orders.css  (Synups: Order Matters)
   Layout adjustments:
   1) Board width: PC 60%, Tablet 60%, Mobile 100%
   2) H1 invisible (SEO)
   3) Larger text on PC
   4) Result text plain (green/red), no pill
   5) Next button fixed at bottom of board (no sticky, no scrolling panels)
   6) Order panel gap
   7) Level pills flush with content edges
   Uses colors.css tokens (theme toggle safe)
   Sections: General | PC | Tablet | Mobile
===================================================================== */

/* -------------------- General -------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0px;
  padding: 0px;
  width: 100%;

  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;

  background: var(--color-page-bg, #050505);
  color: var(--color-page-text, #f5f5f5);
  overflow-x: hidden;
}

/* H1 for SEO only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0px;
}

/* Wrapper fills viewport below header */
.orders-wrapper {
  width: 100%;
  display: grid;
  justify-items: center;
  align-items: stretch;

  min-height: calc(100vh - var(--header-height, 70px));
  min-height: calc(100dvh - var(--header-height, 70px));

  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
}

/* Board container (stretches full height) */
.orders-card {
  width: 100%;
  max-width: 100%;

  background: var(--color-grid-area-bg, var(--color-page-bg, #050505));
  color: var(--color-page-text, #f5f5f5);

  border: none;
  border-radius: 0px;

  padding-left: 16px;
  padding-right: 16px;
  padding-top: 16px;
  padding-bottom: 16px;

  margin-left: auto;
  margin-right: auto;

  /* KEY: board stretches to bottom of viewport (below header) */
  min-height: calc(100vh - var(--header-height, 70px));
  min-height: calc(100dvh - var(--header-height, 70px));

  display: grid;
  grid-template-columns: 1fr;

  /* Rows:
     1 levels
     2 rule
     3 items
     4 feedback
     5 spacer (pushes next button down)
     6 next button
  */
  grid-template-rows: auto auto auto auto 1fr auto;
  gap: 14px;
}

/* Ensure correct row placement so spacer works reliably */
#levelRow { grid-row: 1; }
#ruleText { grid-row: 2; }
#itemPanel { grid-row: 3; }
.orders-response { grid-row: 4; }
.orders-next-row { grid-row: 6; }

/* -------------------- Level row -------------------- */

.orders-levels {
  width: 100%;
  max-width: 100%;

  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 8px;

  align-items: center;
  justify-items: stretch;
}

.orders-level-btn {
  width: 100%;
  max-width: 34px; /* keeps circles reasonable on PC/tablet */
  justify-self: center;

  height: 30px;
  border-radius: 999px;

  display: grid;
  place-items: center;

  font-family: var(--font-heading, inherit);
  font-weight: 800;
  font-size: 14px;

  background: var(--color-cell-bg, #1f2937);
  color: var(--color-cell-text, #e5e7eb);

  border-style: solid;
  border-width: 1px;
  border-color: var(--color-header-border, #333333);

  cursor: pointer;
  user-select: none;
  padding: 0px;
}

.orders-level-btn:hover {
  border-color: var(--color-cell-hover-bg, #3b82f6);
}

.orders-level-btn.is-done {
  opacity: 0.70;
}

.orders-level-btn.is-current {
  background: var(--color-cell-hover-bg, #3b82f6);
  color: var(--color-cell-hover-text, #ffffff);
  border-color: var(--color-cell-hover-bg, #3b82f6);
}

/* -------------------- Rule -------------------- */

.orders-rule {
  line-height: 1.35;
  opacity: 0.92;
  font-size: 15px;
}

/* -------------------- Items -------------------- */

.orders-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px; /* visible spacing between items */
  width: 100%;
  max-width: 100%;
}

.orders-item {
  width: 100%;
  max-width: 100%;
  text-align: left;

  border: none;
  border-radius: var(--color-cell-radius, 4px);

  padding-left: 12px;
  padding-right: 12px;
  padding-top: 12px;
  padding-bottom: 12px;

  background: var(--color-cell-bg, #1f2937);
  color: var(--color-cell-text, #e5e7eb);

  border-style: solid;
  border-width: 1px;
  border-color: var(--color-header-border, #333333);

  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: center;

  user-select: none;
  cursor: pointer;
  overflow: hidden;

  font-size: 16px;
}

.orders-item:hover {
  border-color: var(--color-cell-hover-bg, #3b82f6);
}

.orders-item:disabled {
  cursor: default;
  opacity: 0.92;
}

.orders-rank {
  width: 28px;
  height: 28px;
  border-radius: 999px;

  display: grid;
  place-items: center;

  font-weight: 900;
  font-size: 14px;

  background: rgba(0, 0, 0, 0.18);
  border-style: solid;
  border-width: 1px;
  border-color: var(--color-header-border, #333333);

  color: var(--color-cell-text, #e5e7eb);
}

.orders-item.is-selected {
  background: var(--color-cell-hover-bg, #3b82f6);
  color: var(--color-cell-hover-text, #ffffff);
  border-color: var(--color-cell-hover-bg, #3b82f6);
}

.orders-item.is-selected .orders-rank {
  color: var(--color-cell-hover-text, #ffffff);
  border-color: rgba(0, 0, 0, 0.25);
}

/* -------------------- Feedback -------------------- */

.orders-result {
  font-weight: 900;
  font-size: 15px;
}

.orders-result.is-correct {
  color: #34A853;
}

.orders-result.is-wrong {
  color: #EA4335;
}

.orders-result.orders-result-big {
  font-size: 20px;
}

.orders-explain {
  font-size: 15px;
  line-height: 1.35;
}

.orders-hint {
  font-size: 15px;
  opacity: 0.92;
}

/* -------------------- Next button row (fixed at bottom via grid spacer) -------------------- */

.orders-next-row {
  display: grid;
  justify-items: center;
  align-items: center;
}

.orders-btn-next {
  border: none;

  background: var(--color-cell-hover-bg, #3b82f6);
  color: var(--color-cell-hover-text, #ffffff);

  width: auto;
  min-width: 220px;
  max-width: 320px;

  height: 52px;

  padding-left: 18px;
  padding-right: 18px;
  padding-top: 0px;
  padding-bottom: 0px;

  font-size: 18px;
  font-weight: 900;

  border-radius: 14px;

  cursor: pointer;
  user-select: none;
}

.orders-btn-next:disabled {
  opacity: 0.55;
  cursor: default;
}

.orders-btn-next:hover:enabled {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

/* -------------------- Modals (identical to your other games) -------------------- */

.stats-modal {
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(3px);
  z-index: 9999;
}

.stats-modal.open {
  display: flex;
}

.stats-modal-content {
  background: #ffffff;
  color: #111;
  padding: 24px 28px;
  border-radius: 10px;
  width: 90%;
  max-width: 360px;
  text-align: center;
  box-shadow: 0 4px 28px rgba(0, 0, 0, 0.4);
}

.stats-modal-content h2 {
  margin: 0 0 16px;
  font-size: 1.6rem;
  color: #16a34a;
}

.stats-list {
  text-align: left;
  margin: 16px 0 22px 0;
  font-size: 1rem;
  line-height: 1.6;
}

.stats-buttons {
  display: grid;
  gap: 10px;
}

.stats-btn {
  padding: 10px 16px;
  font-size: 1rem;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-weight: bold;
}

.stats-btn.finish { background: #444; color: #fff; }
.stats-btn.new-game { background: #3b82f6; color: #fff; }
.stats-btn.change-level { background: #e67e22; color: #fff; }
.stats-btn.save-results { background: #16a34a; color: #fff; }

/* -------------------- PC-specific -------------------- */

@media (min-width: 980px) {
  .orders-card {
    width: 60%;
    max-width: 60%;
    padding-left: 18px;
    padding-right: 18px;
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .orders-rule {
    font-size: 16px;
  }

  .orders-item {
    font-size: 22px;
    padding-top: 13px;
    padding-bottom: 13px;
  }

  .orders-hint {
    font-size: 15px;
  }

  .orders-explain {
    font-size: 16px;
  }

  .orders-btn-next {
    min-width: 260px;
    max-width: 340px;
    height: 56px;
    font-size: 19px;
  }

  .orders-result.orders-result-big {
    font-size: 22px;
  }

  .orders-levels {
    gap: 10px;
  }
}

/* -------------------- Tablet-specific -------------------- */

@media (min-width: 620px) and (max-width: 979px) {
  .orders-card {
    width: 60%;
    max-width: 60%;
  }

  .orders-item {
    font-size: 16px;
  }

  .orders-btn-next {
    min-width: 240px;
    max-width: 320px;
    height: 50px;
    font-size: 18px;
  }

  .orders-result.orders-result-big {
    font-size: 21px;
  }

  .orders-levels {
    gap: 6px;
  }
}

/* -------------------- Mobile-specific -------------------- */

@media (max-width: 619px) {
  .orders-card {
    width: 100%;
    max-width: 100%;

    padding-left: 10px;
    padding-right: 10px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .orders-btn-next {
    width: 100%;
    max-width: none;
    min-width: 0px;

    height: 52px;
    font-size: 18px;

    border-radius: 14px;
  }

  .orders-levels {
    width: 100%;
    max-width: 100%;

    display: grid;
    grid-template-columns: repeat(10, 1fr);

    gap: 4px;
    overflow: hidden;
  }

  .orders-level-btn {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;

    border-radius: 999px;

    font-size: 13px;
    font-weight: 800;

    padding: 0px;

    max-width: none;
    justify-self: stretch;
  }

  .orders-rule {
    font-size: 16px;
  }

  .orders-item {
    font-size: 16px;
  }

  .orders-result.orders-result-big {
    font-size: 21px;
  }
}