/* The game window on every game page (Ajay, 6 Oct 2026; mock site-mockups/game-window.html + crumbs-compare.html A).
   build.py writes the markup: the "Home › Category › Game" line, a rounded frame around .game, and the bar under the
   game (name, Like / Dislike, Restart, Share, Save, Report, Full screen). player.js wires the buttons.
   Load after game.css (and any game's own CSS). */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:700 800;font-display:swap;
  src:url("fonts/bricolage-grotesque.woff2") format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:500 800;font-display:swap;
  src:url("fonts/plus-jakarta-sans.woff2") format("woff2")}
:root{
  --gw-bar:#1d1830; --gw-edge:#ffffff14; --gw-text:#F4F1FA; --gw-muted:#8a8399; --gw-sep:#5a5470; --gw-link:#a59fb5;
  --gw-gold:#FFD60A;
  --gw-width:1100px;          /* same as .game's own max width */
  --gw-crumbs-h:36px;         /* the "where am I" line, with its margins */
  --gw-bar-h:62px;            /* the bar under the game */
  --gw-gap:10px;              /* room left under the window */
  --gw-max:820px;             /* tallest game area on big screens (about today's height at 1100 wide) */
  --gw-min:300px;             /* shortest game area (phones held sideways): the page scrolls instead */
}

/* ---------- "Home › Arcade games › Gang Run" ---------- */
.crumbs-top{width:calc(100% - 32px);max-width:var(--gw-width);margin:10px auto 8px;padding:0 6px;height:18px;
  font:600 13px/18px "Plus Jakarta Sans",system-ui,sans-serif;color:var(--gw-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none}
.crumbs-top a{color:var(--gw-link);text-decoration:none}
.crumbs-top a:hover{color:var(--gw-text);text-decoration:underline}
.crumbs-top a:focus-visible{outline:2px solid var(--cyan,#00F0FF);outline-offset:2px;border-radius:4px}
.crumbs-top .sep{color:var(--gw-sep);margin:0 6px}
.crumbs-top b{color:var(--gw-text);font-weight:700}

/* ---------- the window ---------- */
.gw-frame{position:relative;width:calc(100% - 32px);max-width:var(--gw-width);margin:0 auto var(--gw-gap);
  border-radius:22px;overflow:hidden;background:var(--gw-bar);border:1px solid var(--gw-edge);box-shadow:0 30px 60px -30px #000}
.gw-frame .overlay{padding-top:8px;padding-bottom:8px}   /* the window is the edge now: start and end cards get 16px more */
.gw-frame .game{max-width:none;margin:0;background:var(--night,#0b0a10);
  height:min(calc(100vh - var(--gw-crumbs-h) - var(--gw-bar-h) - var(--gw-gap) - 2px), var(--gw-max));      /* 2px: the frame's edge */
  height:min(calc(100svh - var(--gw-crumbs-h) - var(--gw-bar-h) - var(--gw-gap) - 2px), var(--gw-max));
  min-height:var(--gw-min)}

/* Very short game screens (a keyboard under the game on a phone): the start and end cards squeeze a little more, so
   they fit inside the window instead of scrolling. Only sizes and gaps change (game.css has the look). */
@container (min-height:601px) and (max-height:680px){   /* above game.css's own 600px step */
  .gw-frame .spotlight .card{padding:20px 20px 16px}
  .gw-frame .spotlight .hero{margin-bottom:10px}
  .gw-frame .spotlight .card > p{margin-bottom:14px}
  .gw-frame .spotlight .rules{margin-bottom:16px}
  .gw-frame .spotlight .level-track{margin-top:14px;padding-top:12px}
}
@container (max-height:380px){
  .gw-frame .spotlight .card,.gw-frame .journey .card{padding:12px 16px 12px}
  .gw-frame .spotlight .hero{width:34px;height:34px;margin-bottom:4px}
  .gw-frame .spotlight .title{font-size:26px;margin-bottom:4px}
  .gw-frame .spotlight .big,.gw-frame .journey .big{padding:9px 12px;font-size:14px}
  .gw-frame .spotlight .big.daily{padding:6px 12px 0}
  .gw-frame .spotlight .level-track{margin-top:8px;padding-top:8px}
  .gw-frame .journey .j-head{font-size:16px}
  .gw-frame .journey .j-track{margin-top:16px;height:50px}
  .gw-frame .journey .big-score{font-size:30px;margin:2px 0}
  .gw-frame .journey .btn-row{margin-top:8px;gap:6px}
}
@container (max-height:250px){
  .gw-frame .spotlight .hero{width:26px;height:26px;margin-bottom:2px}
  .gw-frame .spotlight .title{font-size:22px}
}

/* ---------- the bar under the game ---------- */
.gw-bar{display:flex;align-items:center;gap:12px;height:var(--gw-bar-h);padding:0 12px 0 18px;
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:var(--gw-text)}
.gw-title{flex:1 1 0;min-width:0;line-height:1.15}
.gw-title b{display:block;font:800 19px/1.15 "Bricolage Grotesque",system-ui,sans-serif;color:var(--gw-text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gw-title span{display:block;font-size:12px;font-weight:600;color:var(--gw-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gw-actions{flex:none;display:flex;gap:8px;align-items:center;flex-wrap:nowrap}
.gw-btn{display:inline-flex;align-items:center;gap:7px;background:#ffffff12;border:1px solid #ffffff1a;color:var(--gw-text);
  border-radius:99px;padding:9px 14px;font:700 14px/18px "Plus Jakarta Sans",system-ui,sans-serif;cursor:pointer;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background .15s,border-color .15s,transform .08s}
.gw-btn[hidden]{display:none}
.gw-btn:hover{background:#ffffff1f}
.gw-btn:active{transform:scale(.95)}
.gw-btn:focus-visible{outline:2px solid var(--cyan,#00F0FF);outline-offset:2px}
.gw-btn[aria-pressed=true]{background:#ffffff2a;border-color:#ffffff40}
.gw-btn svg{width:18px;height:18px;flex:none}
.gw-btn[data-act=like][aria-pressed=true] svg,.gw-btn[data-act=save][aria-pressed=true] svg{color:var(--gw-gold)}
.gw-btn[data-act=dislike][aria-pressed=true] svg{color:#ff8fab}
.gw-likes{display:inline-flex;border-radius:99px;overflow:hidden;border:1px solid #ffffff1a}
.gw-likes .gw-btn{border:0;border-radius:0}
.gw-likes .gw-btn+.gw-btn{border-left:1px solid #ffffff1a}
.gw-icon{padding:9px 11px}
.gw-fs{background:var(--gw-gold);color:#1a1200;border-color:var(--gw-gold);padding:9px 12px}
.gw-fs:hover{background:#ffe14a}
.gw-fs .gw-exit{display:none}
.gw-frame.is-max .gw-fs .gw-enter{display:none}
.gw-frame.is-max .gw-fs .gw-exit{display:block}
@media (prefers-reduced-motion:reduce){.gw-btn{transition:none}}

/* ---------- a short message over the game, and the small pop-ups (inside the window, so full screen shows them) ---------- */
.gw-toast{position:absolute;left:50%;bottom:calc(var(--gw-bar-h) + 14px);transform:translateX(-50%);z-index:20;max-width:calc(100% - 32px);
  background:var(--gw-text);color:#0b0a10;font:800 14px/1.3 "Plus Jakarta Sans",system-ui,sans-serif;border-radius:99px;
  padding:10px 18px;opacity:0;transition:opacity .2s;pointer-events:none;text-align:center}
.gw-toast.show{opacity:1}
.gw-pop{border:1px solid #ffffff22;border-radius:20px;background:var(--gw-bar);color:var(--gw-text);padding:20px 20px 18px;
  width:min(340px,calc(100vw - 32px));font:500 15px/1.45 "Plus Jakarta Sans",system-ui,sans-serif;box-shadow:0 30px 60px -20px #000}
.gw-pop::backdrop{background:#0b0a10b3}
.gw-pop h2{font:800 20px/1.2 "Bricolage Grotesque",system-ui,sans-serif;margin:0 0 12px}
.gw-pop label{display:flex;align-items:center;gap:10px;padding:8px 0;cursor:pointer}
.gw-pop input[type=checkbox]{width:20px;height:20px;accent-color:var(--gw-gold);margin:0}
.gw-pop input[type=text]{width:100%;box-sizing:border-box;background:#0b0a10;color:var(--gw-text);border:1px solid #ffffff2a;border-radius:10px;
  padding:10px 12px;font:600 14px "Plus Jakarta Sans",system-ui,sans-serif;-webkit-user-select:text;user-select:text}
.gw-pop .gw-row{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}
.gw-pop .gw-send{background:var(--gw-gold);color:#1a1200;border-color:var(--gw-gold)}
.gw-pop .gw-send:disabled{opacity:.5;cursor:default}

/* ---------- full screen (the browser's) and Big mode (iPhones: the window fills the page) ---------- */
.gw-frame.is-max{width:100%;max-width:none;margin:0;border:0;border-radius:0;display:flex;flex-direction:column;background:var(--night,#0b0a10)}
.gw-frame.is-max .game{flex:1;height:auto;min-height:0;max-height:none}
.gw-frame.is-max .gw-bar{flex:none;background:var(--gw-bar)}
html.gw-big,html.gw-big body{overflow:hidden;height:100%}
html.gw-big .gw-frame{position:fixed;inset:0;z-index:50;height:100vh;height:100dvh;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}

/* ---------- laptops with short screens: a slimmer line and bar, so the game keeps its room ---------- */
@media (min-width:641px) and (max-height:900px){
  :root{--gw-crumbs-h:28px;--gw-bar-h:52px;--gw-gap:0px}
  .crumbs-top{margin:6px auto 4px}
  .gw-btn{padding:6px 13px}
  .gw-icon{padding:6px 10px}
  .gw-fs{padding:6px 11px}
}

/* ---------- phones: full width, square corners, icons only, everything on one line ---------- */
@media (max-width:640px){
  :root{--gw-crumbs-h:24px;--gw-bar-h:50px;--gw-gap:0px}
  .crumbs-top{width:100%;margin:4px 0;padding:0 14px;height:16px;font-size:12px;line-height:16px}
  /* the play area keeps the whole screen height under the line (lead, 7 Oct): the bar sits just below, one short scroll */
  .gw-frame .game{height:calc(100vh - var(--gw-crumbs-h) - 1px);height:calc(100svh - var(--gw-crumbs-h) - 1px)}
  .crumbs-top .sep{margin:0 4px}
  .gw-frame{width:100%;border-radius:0;border-left:0;border-right:0;box-shadow:none}
  .gw-bar{gap:8px;padding:0 8px 0 14px}
  .gw-title b{font-size:16px}
  .gw-title span{display:none}
  .gw-actions{gap:5px}
  .gw-btn .txt{display:none}
  .gw-btn,.gw-icon,.gw-fs{padding:7px 9px}
}
@media (max-width:340px){
  .gw-title{display:none}
  .gw-bar{justify-content:center;padding:0 6px}
  .gw-btn,.gw-icon,.gw-fs{padding:8px 7px}
}

/* ?preview: the home page's live preview window — just the game playing itself, no page around it */
html.gw-preview,html.gw-preview body{overflow:hidden;background:#0b0a10}
html.gw-preview .crumbs-top,html.gw-preview .gw-bar,html.gw-preview .about,html.gw-preview .skip,html.gw-preview .hud,
html.gw-preview .progress,html.gw-preview .controls,html.gw-preview .dpad,html.gw-preview .tools{display:none!important}
html.gw-preview .gw-frame{width:100%;max-width:none;margin:0;border:0;border-radius:0;box-shadow:none}
html.gw-preview .gw-frame .game{height:100vh!important;max-width:none}