/* =====================================================================================================
   GAME KIT: shared size tokens (layout system step 2, 1.203.70).  Loaded before game.css on every game and tool.

   Two things pick the sizes, both set on <html> by assets/js/gic-layout.js:
     data-layout = phone | tablet | desktop | board      (what kind of screen: GICLayout)
     data-size   = normal | medium | large | xlarge      (Display size: GICSize; teachers choose it in the game menu,
                                                          Auto = normal, a little larger for a desktop in full screen)
   Components read the --k-* tokens below instead of writing their own px numbers for each layout, so a size is
   changed ONCE here. Anything not yet moved onto the Kit keeps its own CSS and is not affected.

   Defaults equal the sizes the shared chrome had before (so desktop, tablet and phone look the same as before);
   only a board (a little larger touch targets) and the Display size setting change them.
   A board reports about 1280x720 CSS px at 3x on a 4K panel, so its CSS pixels are already physically large:
   board tokens are only modestly bigger.
   ===================================================================================================== */
:root{
  --k-scale:1;                              /* Display size multiplier (set by data-size) */
  --k-pop-title:calc(26px * var(--k-eff));   /* smallest size for the big word in an in-game popup (Correct!, Game over...) */
  --k-pop-text:calc(17px * var(--k-eff));    /* smallest size for the line under it and for popup buttons */
  --k-eff:var(--k-scale);                   /* the multiplier actually used (forced to 1 in short landscape windows, below) */
  --k-hud-btn-base:36px;                    /* floating menu and exit buttons in full screen */
  --k-hud-font-base:.78rem;                 /* score / round chips in the full-screen bar */
  --k-panel-w-base:300px;                   /* the floating game menu panel */
  --k-hud-btn:calc(var(--k-hud-btn-base) * var(--k-eff));
  --k-hud-font:calc(var(--k-hud-font-base) * var(--k-eff));
  --k-panel-w:calc(var(--k-panel-w-base) * var(--k-eff));
  --k-hud-h:calc(var(--k-hud-btn) + 8px);   /* height of the full-screen top bar (was 44px) */
}
html[data-layout=board]{--k-hud-btn-base:46px;--k-hud-font-base:.95rem}
html[data-size=medium]{--k-scale:1.12}
html[data-size=large]{--k-scale:1.25}
html[data-size=xlarge]{--k-scale:1.5}
/* short landscape windows (a phone on its side) have no room: Display size is ignored there */
@media (orientation:landscape) and (max-height:560px){:root{--k-eff:1}}

/* Display size choice in the full-screen game menu (assets/js/stage.js) */
.gic-hp-size{display:flex;flex-direction:column;gap:6px;border-top:2px solid var(--line);padding-top:10px}
.gic-hp-size .field-label{font-size:.78rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;opacity:.8}
.gic-hp-size .segmented{width:100%;flex-wrap:wrap}
.gic-hp-size .segmented button{flex:1 1 auto;min-height:40px;font-size:.85rem}

/* Sound row in the full-screen menu (GIC.sound, assets/js/sound.js) */
.gic-hp-snd{display:flex;flex-direction:column;gap:6px;border-top:2px solid var(--line);padding-top:10px}
.gic-hp-snd .field-label{font-size:.78rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;opacity:.8}
.gic-hp-snd-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.gic-hp-snd-row .btn{min-height:calc(40px * var(--k-eff,1));font-size:calc(.85rem * var(--k-eff,1))}
.gic-hp-snd-row .btn[aria-pressed="false"]{opacity:.65}
.gic-hp-snd-row .btn[aria-pressed="true"]{background:var(--sky);color:var(--hard)}
.gic-hp-snd-row input[type=range]{flex:1 1 120px;min-width:100px;height:calc(32px * var(--k-eff,1))}
/* the shared Sound row replaces a game's own mute button inside the full-screen menu */
html.gic-stage.gic-fs .gic-hud-panel .gic-hp-actions #muteBtn,html.gic-stage.gic-fs .gic-hud-panel .gic-hp-actions .gic-snd{display:none}

/* Score display (stage.js): Bar | Overlay | Hidden. Overlay = see-through chips in the top-left corner of the board, wide landscape screens only (stage.js adds html.gic-hud-ov) */
.gic-hp-act{display:flex;flex-wrap:wrap;align-items:center;gap:8px;border-top:2px solid var(--line);padding-top:10px}
.gic-hp-act[hidden]{display:none}
.gic-hp-act .field-label{flex:0 0 100%;font-size:.78rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;opacity:.8}
.gic-hp-act .btn{min-height:calc(40px * var(--k-eff,1));font-size:calc(.85rem * var(--k-eff,1))}
.gic-hp-status{display:flex;flex-direction:column;gap:6px;border-top:2px solid var(--line);padding-top:10px}
.gic-hp-status .field-label{font-size:.78rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;opacity:.8}
.gic-hp-status .segmented{width:100%}
.gic-hp-status .segmented button{flex:1 1 auto;min-height:calc(40px * var(--k-eff,1));font-size:calc(.85rem * var(--k-eff,1))}
html.gic-stage.gic-fs.gic-hud-ov{--hud-t:0px;--hud-r:0px}
html.gic-stage.gic-fs.gic-hud-ov .gic-hud{right:auto;width:auto;min-height:0;max-width:calc(100vw - var(--k-hud-btn,36px) * 2 - 40px);padding:8px 0 0 8px;background:none;box-shadow:none;border:0;z-index:120}
html.gic-stage.gic-fs.gic-hud-ov .gic-hud-stats{pointer-events:none}
html.gic-stage.gic-fs.gic-hud-ov .gic-hud-stats>*{background:rgba(15,23,42,.6);color:#fff;box-shadow:none;padding:3px 9px;opacity:.92}
html.gic-stage.gic-fs.gic-hud-ov .gic-hud-stats>.status.ok{background:rgba(6,78,59,.75);color:#a7f3d0}
html.gic-stage.gic-fs.gic-hud-ov .gic-hud-stats>.status.warn{background:rgba(66,32,6,.78);color:#fde68a}

/* shared menu popover (bridge.js GIC.menu.toggle): the small-screen menu button (.gic-more) opens this under itself */
.gic-mpop{position:fixed;z-index:300;width:min(380px,calc(100vw - 16px));overflow:auto;display:flex;flex-direction:column;gap:10px;padding:12px;background:var(--panel);color:var(--text);border:3px solid var(--hard);border-radius:var(--r,14px);box-shadow:var(--shadow);animation:gicpop .15s ease-out}
.gic-mpop-sec{display:flex;flex-wrap:wrap;align-items:center;gap:8px;position:relative}
.gic-mpop-sec+.gic-mpop-sec{border-top:2px solid var(--line);padding-top:10px}
.gic-mpop-sec .field-label{flex:0 0 100%;font-size:.78rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;opacity:.8}
.gic-mpop-sec .btn{flex:1 1 calc(50% - 8px);min-height:46px;height:auto;font-size:1rem;justify-content:flex-start}   /* fixed size on purpose: Display size must not make this menu overflow the screen */
.gic-mpop-sec .segmented{width:100%;flex-wrap:wrap}.gic-mpop-sec .segmented button{flex:1 1 auto;min-height:40px;font-size:.9rem}
@media (max-height:520px){.gic-mpop{gap:6px;padding:8px}.gic-mpop-sec{gap:6px}.gic-mpop-sec+.gic-mpop-sec{padding-top:6px}.gic-mpop-sec .btn{flex:1 1 calc(33% - 6px);min-height:38px;font-size:.9rem}.gic-mpop-sec .segmented button{min-height:34px}}
.gic-mpop-note{font-weight:700;font-size:.9rem;opacity:.85}
.gic-mpop [hidden]{display:none!important}