/* Shared page layout for every game (set up by site-layout.js):
   - a slim top bar: All games on the left; Fullscreen, Standards and Teaching notes on the right. Standards and
     Teaching notes open as pop-out panels (the way Tip the Scales does its Standards), instead of taking up room
     beside and below the game.
   - on a computer, the game fills everything under the bar, as big as the screen allows, so students who can't
     use the Fullscreen button still get a full-size game. (Phones and tablets keep their own layouts.) */

.site-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 44px; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 10px; box-sizing: border-box;
  background: rgba(8, 11, 18, 0.94); border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font: 700 13px -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.site-bar .sb-right { display: flex; align-items: center; gap: 8px; }
html .site-bar .back-link, html .site-bar .fullscreen-btn, .site-bar .sb-toggle {
  position: static !important; display: inline-flex !important; align-items: center; gap: 6px;
  margin: 0 !important; padding: 6px 12px !important; box-sizing: border-box;
  font: 700 13px -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  color: #fff !important; background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important; border-radius: 999px !important;
  text-decoration: none; cursor: pointer; box-shadow: none !important; white-space: nowrap;
}
html .site-bar .back-link:hover, html .site-bar .fullscreen-btn:hover, .site-bar .sb-toggle:hover,
.site-bar .sb-toggle[aria-expanded="true"] { background: rgba(255, 255, 255, 0.18) !important; border-color: rgba(255, 255, 255, 0.5) !important; }
.site-bar .sb-toggle:focus-visible, html .site-bar .back-link:focus-visible, html .site-bar .fullscreen-btn:focus-visible { outline: 3px solid #ffd23f; outline-offset: 2px; }

/* the pop-out panels */
.sb-panel {
  position: fixed; top: 52px; right: 10px; z-index: 60; box-sizing: border-box;
  width: min(460px, calc(100vw - 20px)); max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); overflow-y: auto;
  padding: 16px 18px; border-radius: 14px;
  background: #151b28; color: #e8ecf5; border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
  font: 400 14px/1.55 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.sb-panel[hidden] { display: none !important; }
.sb-panel .sb-close {
  float: right; margin: -6px -8px 0 8px; width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, 0.08); color: #fff; border: 1px solid rgba(255, 255, 255, 0.25); font-size: 16px; line-height: 1;
}
/* the moved sections keep their own inner styles, but not their old page placement */
html .sb-panel .standards-panel, html .sb-panel .teaching-notes, html .sb-panel .reset-progress {
  position: static !important; clip: auto !important; overflow: visible !important; white-space: normal !important;
  width: auto !important; max-width: none !important; height: auto !important; min-height: 0 !important;
  margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important;
  display: block !important; flex: none !important;
}
html .sb-panel .reset-progress { margin-top: 0 !important; }
html .sb-panel .teaching-notes h2, html .sb-panel .standards-panel h2 { margin-top: 0 !important; }

/* The game fills the page under the bar, on a computer and on a phone or tablet (where the page never scrolls) */
@media all {
  html body.site-fit { padding-top: 44px !important; box-sizing: border-box; }
  html body.site-fit .play-area {
    padding: 6px 8px !important; gap: 0 !important; flex-wrap: nowrap !important;
    height: calc(100vh - 44px); height: calc(100dvh - 44px); min-height: 0 !important; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
  }
  html body.site-fit #game-canvas-slot { display: flex; align-items: center; justify-content: center; }
  /* square p5 games: the largest square that fits */
  html body.site-fit #game-canvas-slot:not(:fullscreen):not(.pseudo-fullscreen) canvas.p5Canvas {
    width: min(calc(100vw - 16px), calc(100vh - 56px - var(--mc, 0px))) !important; height: min(calc(100vw - 16px), calc(100vh - 56px - var(--mc, 0px))) !important;
    width: min(calc(100vw - 16px), calc(100dvh - 56px - var(--mc, 0px))) !important; height: min(calc(100vw - 16px), calc(100dvh - 56px - var(--mc, 0px))) !important;
    max-width: none !important; max-height: none !important;
  }
  /* Proportional Plates and Similarity Builder: the wide 16:9 stage as big as fits, with its HUD above and controls below */
  html body.site-fit #game-canvas-slot:not(:fullscreen):not(.pseudo-fullscreen) #sb {
    width: calc(100vw - 16px) !important; max-width: none !important;
    --stage-w: min(100%, calc((100vh - 44px - 150px) * 16 / 9));
    --stage-w: min(100%, calc((100dvh - 44px - 150px) * 16 / 9));
  }
  /* Pythagorean Platforms: the whole game box fills the page */
  html body.site-fit #game-canvas-slot:not(:fullscreen):not(.pseudo-fullscreen) .app {
    width: calc(100vw - 16px) !important; max-width: none !important;
    height: calc(100vh - 56px) !important; height: calc(100dvh - 56px) !important; max-height: none !important;
  }
}

/* Tip the Scales keeps its light top bar, so its Teaching notes panel matches its light Standards panel */
.sb-panel.sb-light { background: #fff; color: #1e293b; border-color: #e2e8f0; font-family: 'Inter', -apple-system, sans-serif; }
.sb-panel.sb-light .sb-close { background: #f1f5f9; color: #1e293b; border-color: #e2e8f0; }
.sb-panel.sb-light .teaching-notes h2 { font-size: 20px !important; }

/* Reset progress: the erase button counts down 5 seconds (on the button) before it can be pressed */
.sb-panel .sb-erase {
  display: block; width: 100%; margin-top: 14px; padding: 10px 14px; border-radius: 10px; cursor: pointer;
  font: 800 15px -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #d9352f; color: #fff; border: 0;
}
.sb-panel .sb-erase:hover:not(:disabled) { background: #b92a25; }
.sb-panel .sb-erase:disabled { background: #5b6170; color: #e8ecf5; cursor: not-allowed; }

/* leave room for the fixed top bar on every screen size (the game pages add more layout on computers, above) */
body.site-fit { padding-top: 44px; box-sizing: border-box; }
.sb-panel .reset-progress h2 { font-size: 16px; margin: 0 0 6px; }
.sb-panel .reset-progress p { margin: 0; font-size: 13px; color: #b7c0d4; }

/* Phones and tablets: the game page is exactly one screen and never scrolls (no page scroll, no rubber-band
   bounce). The game sits at the top, clear of the on-screen joystick / number pad, whose height site-layout.js
   puts in --mc. */
@media (hover: none) and (pointer: coarse) {
  html.site-lock, html.site-lock body {
    height: 100% !important; min-height: 0 !important; overflow: hidden !important; overscroll-behavior: none;
  }
  html.site-lock body { position: fixed; inset: 0; width: 100%; }
  html.site-lock body.site-fit .play-area {
    align-items: flex-start; padding: 4px 0 0 !important; overflow: hidden;
    height: calc(100vh - 44px - var(--mc, 0px)); height: calc(100dvh - 44px - var(--mc, 0px));
  }
  html.site-lock body.site-fit #game-canvas-slot:not(:fullscreen):not(.pseudo-fullscreen) { min-height: 0 !important; align-items: flex-start; }
  html.site-lock body.site-fit #game-canvas-slot:not(:fullscreen):not(.pseudo-fullscreen) canvas.p5Canvas {
    width: min(100vw, calc(100vh - 48px - var(--mc, 0px))) !important; height: min(100vw, calc(100vh - 48px - var(--mc, 0px))) !important;
    width: min(100vw, calc(100dvh - 48px - var(--mc, 0px))) !important; height: min(100vw, calc(100dvh - 48px - var(--mc, 0px))) !important;
  }
  html.site-lock body.site-fit #game-canvas-slot:not(:fullscreen):not(.pseudo-fullscreen) .app {
    width: 100vw !important; height: calc(100vh - 48px) !important; height: calc(100dvh - 48px) !important;
  }
  html.site-lock body.site-fit #game-canvas-slot:not(:fullscreen):not(.pseudo-fullscreen) #sb { width: 100vw !important; }
  /* Fullscreen (real or the CSS fallback): site-layout.js moves the joystick / number pad into the fullscreen box,
     and the game sits at the top, above them, never underneath */
  html.site-lock body #game-canvas-slot:fullscreen, html.site-lock body #game-canvas-slot:-webkit-full-screen,
  html.site-lock body #game-canvas-slot.pseudo-fullscreen { align-items: flex-start !important; height: 100vh; height: 100dvh; }
  html.site-lock body #game-canvas-slot:fullscreen canvas.p5Canvas, html.site-lock body #game-canvas-slot.pseudo-fullscreen canvas.p5Canvas {
    width: min(100vw, calc(100vh - 8px - var(--mc, 0px))) !important; height: min(100vw, calc(100vh - 8px - var(--mc, 0px))) !important;
    width: min(100vw, calc(100dvh - 8px - var(--mc, 0px))) !important; height: min(100vw, calc(100dvh - 8px - var(--mc, 0px))) !important;
  }
  html.site-lock body #game-canvas-slot:-webkit-full-screen canvas.p5Canvas {
    width: min(100vw, calc(100vh - 8px - var(--mc, 0px))) !important; height: min(100vw, calc(100vh - 8px - var(--mc, 0px))) !important;
  }
  /* sideways: the controls sit in the bottom corners, beside the game, so the game gets the full height - but never so
     wide that it reaches under them (the joystick and GO button each need about 160px at the sides) */
  @media (orientation: landscape) {
    html.site-lock body.site-fit .play-area { height: calc(100vh - 44px); height: calc(100dvh - 44px); }
    html.site-lock body.site-fit #game-canvas-slot:not(:fullscreen):not(.pseudo-fullscreen) canvas.p5Canvas {
      width: min(calc(100vw - 320px), calc(100vh - 48px)) !important; height: min(calc(100vw - 320px), calc(100vh - 48px)) !important;
      width: min(calc(100vw - 320px), calc(100dvh - 48px)) !important; height: min(calc(100vw - 320px), calc(100dvh - 48px)) !important;
    }
    html.site-lock body #game-canvas-slot:fullscreen, html.site-lock body #game-canvas-slot:-webkit-full-screen,
    html.site-lock body #game-canvas-slot.pseudo-fullscreen { align-items: center !important; }
    html.site-lock body #game-canvas-slot:fullscreen canvas.p5Canvas, html.site-lock body #game-canvas-slot:-webkit-full-screen canvas.p5Canvas,
    html.site-lock body #game-canvas-slot.pseudo-fullscreen canvas.p5Canvas {
      width: min(calc(100vw - 320px), 100vh) !important; height: min(calc(100vw - 320px), 100vh) !important;
      width: min(calc(100vw - 320px), 100dvh) !important; height: min(calc(100vw - 320px), 100dvh) !important;
    }
    /* games with a number pad: the game on the left, the pad (and joystick) centered in the space to its right,
       which is kept at least 290px wide so the 256px pad always fits beside the game */
    html.site-lock.site-pad body.site-fit .play-area { justify-content: flex-start; }
    html.site-lock.site-pad body.site-fit #game-canvas-slot:not(:fullscreen):not(.pseudo-fullscreen) canvas.p5Canvas {
      width: min(calc(100vw - 290px), calc(100vh - 48px)) !important; height: min(calc(100vw - 290px), calc(100vh - 48px)) !important;
      width: min(calc(100vw - 290px), calc(100dvh - 48px)) !important; height: min(calc(100vw - 290px), calc(100dvh - 48px)) !important;
    }
    html.site-lock.site-pad #mc-numpad { left: calc(var(--pad-game) + (100vw - var(--pad-game) - 256px) / 2) !important; transform: none !important; }
    html.site-lock.site-pad #mc-joy-base { left: calc(var(--pad-game) + (100vw - var(--pad-game) - 130px) / 2) !important; }
    html.site-lock.site-pad { --pad-game: min(calc(100vw - 290px), calc(100vh - 48px)); --pad-game: min(calc(100vw - 290px), calc(100dvh - 48px)); }
    html.site-lock.site-pad.site-fs { --pad-game: min(calc(100vw - 290px), 100vh); --pad-game: min(calc(100vw - 290px), 100dvh); }
    html.site-lock.site-pad body #game-canvas-slot:fullscreen, html.site-lock.site-pad body #game-canvas-slot:-webkit-full-screen,
    html.site-lock.site-pad body #game-canvas-slot.pseudo-fullscreen { justify-content: flex-start !important; }
    html.site-lock.site-pad body #game-canvas-slot:fullscreen canvas.p5Canvas, html.site-lock.site-pad body #game-canvas-slot:-webkit-full-screen canvas.p5Canvas,
    html.site-lock.site-pad body #game-canvas-slot.pseudo-fullscreen canvas.p5Canvas {
      width: var(--pad-game) !important; height: var(--pad-game) !important;
    }
  }
}
/* narrow screens: the bar's buttons show just their icons, so the whole bar fits */
@media (max-width: 1180px) { .site-topbar .sb-lbl { display: none; } }
@media (max-width: 920px) {
  .site-bar .sb-lbl { display: none; }
  .site-bar { padding: 0 6px; }
  .site-bar .sb-right { gap: 5px; }
  html .site-bar .fullscreen-btn, .site-bar .sb-toggle { padding: 6px 9px !important; }
  html .site-bar .back-link { padding: 6px 10px !important; }
}
/* the Teacher guide link looks like the bar's other buttons */
.site-topbar a.sb-guide { text-decoration: none; color: inherit; display: inline-flex; align-items: center; gap: 4px; }
/* the language button: "Español" / "English" (just "ES" / "EN" on a very narrow screen) */
.sb-lang { font-weight: 800; }
@media (max-width: 520px) { .sb-lang .sb-lang-lbl { font-size: 0; } .sb-lang .sb-lang-lbl::after { content: attr(data-short); font-size: 12px; } }
@media (max-width: 1200px) { .site-bar.sb-es .sb-lbl { display: none; } }
.sb-narrow { display: none; }
@media (max-width: 600px) { .site-bar .sb-wide { display: none; } .site-bar .sb-narrow { display: inline; } }
/* phones: Standards and Teaching notes are for teachers (and the Teacher guide button has both), so they step aside to fit */
@media (max-width: 480px) { .site-bar [aria-controls="sb-standards"], .site-bar [aria-controls="sb-notes"] { display: none !important; } }