/* ============================================================
   FROM ZERO TO GAME — responsive.css

   Most students will meet this on a phone, so the small-screen
   layout is a different composition, not a squeezed desktop:

        title → canvas → controls → instructions → console

   The instructions (and the button that builds the next system)
   sit directly under the controls, above the fold. The console
   is developer flavour, so it goes last and starts collapsed.
   ============================================================ */

/* The stepper is the mobile replacement for the sidebar. */
.stepper { display: none; }

/* ------------------------------------------------------------
   ≤ 1240px — the right panel drops under the stage
   ------------------------------------------------------------ */
@media (max-width: 1240px) {
  .workspace { grid-template-columns: 214px minmax(0, 1fr); }
  .panel {
    grid-column: 1 / -1;
    position: static;
    max-height: none;
  }
  .panel__scroll {
    overflow: visible;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    align-items: start;
  }
}

/* ------------------------------------------------------------
   ≤ 900px — the mobile composition
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  :root { --topbar-h: 56px; }

  body { overscroll-behavior-y: contain; }

  .topbar {
    grid-template-columns: 1fr auto;
    grid-template-areas: "brand actions" "progress progress";
    height: auto;
    padding: 8px 12px 10px;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    gap: 8px;
  }
  .topbar__brand    { grid-area: brand; }
  .topbar__actions  { grid-area: actions; gap: 6px; }
  .topbar__progress { grid-area: progress; max-width: none; }
  .brand-text { font-size: 10.5px; letter-spacing: .09em; }
  .status-chip { display: none; }
  /* Reset stays reachable on a phone — as an icon, to fit the bar. */
  #btnReset {
    width: 38px; height: 38px; padding: 0; font-size: 0;
    display: inline-grid; place-items: center; border-radius: var(--r-md);
  }
  #btnReset::after { content: "↺"; font-size: 16px; }
  .icon-btn { width: 38px; height: 38px; }

  /* ---- horizontal level stepper replaces the sidebar ---- */
  .stepper {
    display: flex; gap: 7px;
    padding: 10px 12px 2px;
    padding-left: max(12px, env(safe-area-inset-left));
    overflow-x: auto; scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .stepper::-webkit-scrollbar { display: none; }
  .stepper__item {
    flex: none; scroll-snap-align: start; min-height: 38px;
    display: flex; align-items: center; gap: 7px;
    padding: 8px 14px; border-radius: 22px;
    background: var(--panel); border: 1px solid var(--border-soft);
    color: var(--muted-2); transition: all .2s var(--ease);
  }
  .stepper__num { font-family: var(--mono); font-size: 10px; }
  .stepper__name { font-size: 12px; font-weight: 600; white-space: nowrap; }
  .stepper__item[disabled] { opacity: .4; }
  .stepper__item.is-current {
    background: rgba(53,224,255,.12); border-color: rgba(53,224,255,.4); color: var(--text);
  }
  .stepper__item.is-done { color: var(--text); border-color: rgba(61,220,132,.28); }
  .stepper__item.is-done .stepper__num::after { content: " ✓"; color: var(--success); }

  .sidebar { display: none; }

  /* ---- one column, and .stage dissolves so its children can be
          reordered around the instructions panel ---- */
  .workspace {
    grid-template-columns: minmax(0, 1fr);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    gap: 10px;
  }
  .stage { display: contents; }

  .stage__head   { order: 1; }
  .canvas-wrap   { order: 2; }
  .mobile-tool   { order: 3; }
  .touch-controls{ order: 4; }
  .panel         { order: 5; }
  .console       { order: 6; }

  /* The level's action, right under the canvas and inside thumb reach. */
  .mobile-tool {
    display: block;
    padding: 12px 14px 14px;
    background: linear-gradient(180deg, rgba(53,224,255,.07), transparent 78%);
    border: 1px solid rgba(53,224,255,.24);
    border-radius: var(--r-lg);
  }
  .mobile-tool .btn { min-height: 50px; font-size: 13px; }
  /* Once the system is built, the button steps back visually. */
  .mobile-tool .btn[disabled] { opacity: .55; }

  /* ---- compact stage header: title and controls on one row ---- */
  .stage__head {
    display: grid; grid-template-columns: 1fr auto; align-items: center;
    gap: 10px; row-gap: 6px;
  }
  .stage__eyebrow { font-size: 9px; margin-bottom: 2px; }
  .stage__title h2 { font-size: 19px; }
  .stage__controls { gap: 6px; }
  .stage__controls .btn { min-height: 38px; }
  .fps { display: none; }

  /* ---- canvas: as large as the screen allows, never taller than half ---- */
  .canvas-wrap {
    aspect-ratio: 16 / 10;
    max-height: 46vh;
    border-radius: var(--r-md);
  }

  /* ---- instructions ---- */
  .panel__scroll { grid-template-columns: minmax(0, 1fr); padding: 12px; gap: 12px; }
  .pcard { padding: 14px; }
  .panel .btn--block { min-height: 46px; font-size: 12.5px; }
  .todo li { font-size: 13px; }

  /* ---- console last, and quiet ---- */
  .console__body { height: 104px; }
  .console__head { min-height: 44px; }

  /* ---- overlays behave like bottom sheets ---- */
  .overlay, .modal-root { padding: 0; align-items: end; }
  .overlay__card, .modal__card {
    width: 100%;
    max-height: 92vh; max-height: 92dvh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    border-bottom: 0;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
    animation: sheetIn .34s var(--ease);
  }
  @keyframes sheetIn { from { transform: translateY(28px); opacity: .6; } to { transform: none; opacity: 1; } }

  .lc__title { font-size: 22px; }
  .lc__actions .btn, .modal__foot .btn { min-height: 46px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .final__actions .btn { flex: 1 1 46%; min-height: 46px; }

  .toast-root {
    left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
    align-items: stretch;
  }
  .toast { max-width: none; }

  .keycaps { grid-template-columns: repeat(2, 1fr); }
  .site-footer { padding: 18px 16px calc(26px + env(safe-area-inset-bottom)); }
}

/* ------------------------------------------------------------
   ≤ 560px — phones
   ------------------------------------------------------------ */
@media (max-width: 560px) {
  .joystick { width: 104px; height: 104px; }
  .dpad { width: 116px; height: 116px; }
  .touch-controls { padding: 10px; gap: 8px; }
  .touch-controls__hint { display: none; }
  .dpad__btn { font-size: 15px; }

  .stats-grid dd { font-size: 18px; }
  .empty-state__ascii { letter-spacing: .22em; }
  .empty-state__lines { font-size: 11px; }
  .concept-grid { grid-template-columns: 1fr; }
  .instructor-grid { grid-template-columns: 1fr; }
  .cert__systems { grid-template-columns: 1fr 1fr; }
  .btn--lg { padding: 13px 18px; }
  .final__actions .btn { flex: 1 1 100%; }
  .code-line__c { font-size: 11.5px; }
  .code-line { grid-template-columns: 32px 1fr; }
}

/* ------------------------------------------------------------
   Short phones (≈640px tall): claw back vertical space so the
   canvas, the controls and the tool button all fit at once
   ------------------------------------------------------------ */
@media (max-width: 900px) and (max-height: 700px) {
  .stage__eyebrow { display: none; }
  .stage__title h2 { font-size: 17px; }
  .stepper { padding-top: 6px; }
  .mobile-tool { padding: 10px 12px; }
  .mobile-tool__hint { display: none; }
  .mobile-tool .btn { min-height: 46px; }
  .touch-controls { padding: 8px 12px; }
  .joystick { width: 92px; height: 92px; }
  .dpad { width: 104px; height: 104px; }
  .console__body { height: 88px; }
}

/* ------------------------------------------------------------
   Landscape phones: height is the scarce resource, width is not.
   So the controls move beside the canvas instead of under it, and
   the top bar collapses back to a single row.
   ------------------------------------------------------------ */
@media (max-height: 620px) and (orientation: landscape) and (max-width: 1100px) {
  .topbar {
    grid-template-columns: auto minmax(120px, 1fr) auto;
    grid-template-areas: "brand progress actions";
    padding: 6px 12px;
  }
  .stepper { padding: 6px 12px 0; }
  .stepper__item { min-height: 34px; padding: 6px 12px; }

  .workspace {
    grid-template-columns: minmax(0, 1fr) 248px;
    align-items: start;
    gap: 8px;
  }
  /* Explicit placement — `order` alone cannot make a two-column landscape. */
  .stage__head    { grid-column: 1 / -1; grid-row: 1; }
  .canvas-wrap    { grid-column: 1; grid-row: 2; max-height: calc(100dvh - 150px); }
  .touch-controls { grid-column: 2; grid-row: 2; align-self: center; padding: 10px; }
  .mobile-tool    { grid-column: 2; grid-row: 3; padding: 0; background: none; border: 0; }
  .panel          { grid-column: 1; grid-row: 3; }
  .console        { grid-column: 1 / -1; grid-row: 4; }

  .stage__eyebrow { display: none; }
  .stage__title h2 { font-size: 17px; }
  .console__body { height: 72px; }
  /* The side column is narrow — the hint would push the D-pad off it. */
  .touch-controls__hint { display: none; }
  .joystick { width: 92px; height: 92px; }
  .dpad { width: 104px; height: 104px; }
  .overlay__card, .modal__card { max-height: 96vh; max-height: 96dvh; }
}

/* ------------------------------------------------------------
   Touch devices: on-canvas controls instead of keyboard hints
   ------------------------------------------------------------ */
@media (hover: none) and (pointer: coarse) {
  .keycaps { display: none; }
  .touch-hint { display: block; }
  /* Fingers need a bigger target than a mouse pointer does. */
  .btn { min-height: 42px; }
  .btn--xs { min-height: 32px; }
  .level-item { padding: 11px 10px; }
}
@media (hover: hover) and (pointer: fine) {
  .touch-hint { display: none; }
}

/* ------------------------------------------------------------
   Very wide screens: cap the workspace so lines stay readable
   ------------------------------------------------------------ */
@media (min-width: 1700px) {
  .workspace { max-width: 1660px; margin: 0 auto; width: 100%; }
}