/* Games In Class — shared styles for every game (loaded inside the play.php iframe) */
:root{--head:var(--sky);--input-bg:var(--bg);--dots:none;--chip-bg:var(--hard);--bg:#0f172a;--panel:#1e293b;--panel2:#273449;--line:#334155;--hard:#020617;--sky:#38bdf8;--purple:#c084fc;--gold:#fbbf24;--green:#10b981;--rose:#f43f5e;--text:#f8fafc;--soft:#cbd5e1;--muted:#94a3b8;--shadow:4px 4px 0 var(--hard);--shadow-sm:2px 3px 0 var(--hard);--r:14px;color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg)}
body.embed{margin:0;background:var(--bg);background-image:var(--dots);background-size:22px 22px;color:var(--text);font:400 15px/1.5 'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Baloo 2',system-ui,sans-serif;margin:0;line-height:1.15}
h1{font-size:1.6rem;color:var(--head)}h2{font-size:1.25rem;color:var(--head)}h3{font-size:1.1rem}
.app{max-width:1280px;margin:0 auto;padding:18px 18px 28px}
.mark{width:46px;height:46px;flex:none;border-radius:12px;background:var(--green);color:var(--hard);border:3px solid var(--hard);box-shadow:var(--shadow-sm);display:grid;place-items:center;font-size:20px}
.layout{display:grid;grid-template-columns:minmax(300px,370px) minmax(0,1fr);gap:20px;align-items:start}
.col{display:flex;flex-direction:column;gap:16px;min-width:0}
.panel{background:var(--panel);border:3px solid var(--hard);border-radius:var(--r);box-shadow:var(--shadow);padding:18px;min-width:0}
.center{text-align:center}.muted{color:var(--muted)}
.stack{display:flex;flex-direction:column;gap:16px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.row.between{justify-content:space-between}

.field{display:flex;flex-direction:column;gap:6px}
.field-label{font-weight:700;font-size:.82rem;color:var(--soft);text-transform:uppercase;letter-spacing:.04em;display:flex;justify-content:space-between;align-items:center}
.hint{font-size:.8rem;color:var(--muted);margin:0}
input[type=text],input[type=number],select,textarea{width:100%;padding:10px 12px;font:500 .95rem 'Inter',sans-serif;color:var(--text);background:var(--input-bg);border:3px solid var(--hard);border-radius:10px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--sky)}
textarea{resize:vertical;min-height:96px}
input[type=range]{width:100%;accent-color:var(--sky)}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--sky);flex:none}
.check-row{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--soft);cursor:pointer}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;font:700 .9rem 'Inter',sans-serif;color:var(--text);background:var(--panel2);border:3px solid var(--hard);border-radius:10px;box-shadow:var(--shadow-sm);cursor:pointer;transition:transform .1s,box-shadow .1s,background .15s;touch-action:manipulation}
.btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:3px 4px 0 var(--hard)}
.btn:active:not(:disabled){transform:translateY(2px);box-shadow:1px 1px 0 var(--hard)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.primary{background:var(--sky);color:var(--hard)}.btn.accent{background:var(--green);color:var(--hard)}
.btn.gold{background:var(--gold);color:var(--hard)}.btn.danger{background:var(--rose);color:var(--on-rose)}
.btn.sm{padding:6px 11px;font-size:.8rem;border-width:2px}.btn.block{width:100%}
.btn-file{position:relative;overflow:hidden}.btn-file input{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0}
.link-danger{background:none;border:0;color:#fda4af;font-weight:700;cursor:pointer;font-size:.8rem;padding:0}

.segmented{display:flex;border:3px solid var(--hard);border-radius:10px;overflow:hidden;background:var(--bg)}
.segmented button{flex:1;padding:8px 6px;background:transparent;border:0;border-right:2px solid var(--hard);color:var(--soft);font:700 .85rem 'Inter',sans-serif;cursor:pointer}
.segmented button:last-child{border-right:0}
.segmented button[aria-pressed=true]{background:var(--sky);color:var(--hard)}
.segmented button:disabled{opacity:.4;cursor:not-allowed}

.chips{display:flex;flex-wrap:wrap;gap:8px;max-height:200px;overflow:auto}
.chip{display:inline-flex;align-items:center;gap:8px;padding:5px 6px 5px 12px;background:var(--bg);border:2px solid var(--line);border-radius:99px;font-weight:600;font-size:.85rem;max-width:100%}
.chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip img{width:24px;height:24px;border-radius:6px;object-fit:cover}
.chip button{background:var(--line);border:0;color:var(--text);width:22px;height:22px;border-radius:50%;cursor:pointer;font-size:14px;line-height:1;flex:none}
.chip button:hover{background:var(--rose)}
.chip.found{background:#064e3b;border-color:var(--green);text-decoration:line-through;text-decoration-color:var(--green)}
.chip.warn{border-color:var(--gold);color:var(--gold)}

.status{display:inline-block;padding:6px 12px;border-radius:8px;font-size:.82rem;font-weight:700}
.status.ok{background:#064e3b;color:#a7f3d0}.status.warn{background:#422006;color:#fde68a}

.stage-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.stage-foot{margin-top:12px;color:var(--muted);font-size:.85rem;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.theme-btn{padding:8px;border:3px solid var(--hard);border-radius:10px;background:var(--bg);color:var(--soft);font:700 .8rem 'Inter',sans-serif;cursor:pointer}
.theme-btn.active{background:var(--sky);color:var(--hard)}

/* dialogs & toasts (bridge.js) */
.gic-modal{position:fixed;inset:0;z-index:100;background:rgba(2,6,23,.8);display:flex;align-items:center;justify-content:center;padding:16px}
.gic-box{background:var(--panel);border:3px solid var(--hard);border-radius:var(--r);box-shadow:var(--shadow);width:100%;max-width:min(560px,100%);padding:24px;text-align:center;animation:gicpop .18s ease-out}
.gic-box h3{color:var(--sky);margin-bottom:10px;font-size:calc(1.7rem * var(--k-eff,1))}
.gic-body{color:var(--soft);font-size:calc(1.2rem * var(--k-eff,1));line-height:1.4;margin-bottom:18px;white-space:pre-line}
.gic-body .big{display:block;font:800 2rem 'Baloo 2',sans-serif;color:var(--gold);line-height:1.2;margin:6px 0}
.gic-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.gic-actions .btn{min-height:calc(48px * var(--k-eff,1));font-size:calc(1.1rem * var(--k-eff,1));padding:.6em 1.3em}
.gic-box:has(.gic-howto){max-width:min(640px,100%)}
.gic-howto{text-align:left;white-space:normal;max-height:60vh;overflow:auto}
.gic-howto h2{font-size:calc(1.25rem * var(--k-eff,1));color:var(--sky);margin:14px 0 6px}
.gic-howto h2:first-child{margin-top:0}
.gic-howto p{margin:0 0 10px;line-height:1.5;font-size:calc(1.1rem * var(--k-eff,1))}
.gic-howto ul{margin:0 0 10px;padding-left:22px;text-align:left}
.gic-howto li{margin-bottom:4px;line-height:1.4;font-size:calc(1.1rem * var(--k-eff,1))}
.gic-howto strong{color:var(--text)}
.gic-toasts{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:120;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:calc(100% - 24px);max-width:460px}
.gic-toast{background:var(--panel2);border:3px solid var(--hard);box-shadow:var(--shadow-sm);padding:12px 18px;border-radius:10px;font-weight:700;font-size:calc(1.05rem * var(--k-eff,1));text-align:center}
.gic-toast.error{background:var(--rose)}.gic-toast.success{background:var(--green);color:var(--hard)}
@keyframes gicpop{from{transform:scale(.94);opacity:0}}

/* on a big screen (a classroom board, or any game run full screen) this dialog — used for results,
   confirmations and "how to play" info across every game — scales up with the viewport so its text
   reads clearly from across the room instead of staying pinned to its small default size. */
@media(min-width:861px) and (min-height:521px){
  .gic-box{max-width:min(760px,90vw);padding:clamp(26px,3.6vmin,50px)}
  .gic-box:has(.gic-howto){max-width:min(880px,94vw)}
  .gic-box h3{font-size:calc(clamp(1.7rem,4vmin,2.8rem) * var(--k-eff,1));margin-bottom:.5em}
  .gic-body{font-size:calc(clamp(1.2rem,2.6vmin,1.8rem) * var(--k-eff,1))}
  .gic-body .big{font-size:calc(clamp(2.2rem,6.5vmin,4.4rem) * var(--k-eff,1))}
  .gic-actions{gap:.9em}
  .gic-actions .btn{font-size:calc(clamp(1.1rem,2.2vmin,1.5rem) * var(--k-eff,1));padding:.75em 1.5em}
  .gic-howto{max-height:62vh}
  .gic-howto h2{font-size:calc(clamp(1.25rem,2.6vmin,1.7rem) * var(--k-eff,1))}
  .gic-howto p,.gic-howto li{font-size:calc(clamp(1.1rem,2.3vmin,1.5rem) * var(--k-eff,1))}
  .gic-toast{font-size:calc(clamp(1.05rem,2vmin,1.4rem) * var(--k-eff,1));padding:.7em 1.2em}
}

:fullscreen,::backdrop{background:var(--bg)}
:fullscreen{overflow:auto;padding:16px}

.print-only{display:none}
@media(max-width:900px){.layout{grid-template-columns:1fr}.app{padding:12px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* Motion: Reduced (the Motion setting, assets/js/gic-layout.js): animations and transitions finish at once but still END, so code that waits for animationend / transitionend keeps working */
html[data-motion=reduced] *:not(.fa-spin):not(.gic-busy):not([data-gfx-keep]),html[data-motion=reduced] *:not(.fa-spin):not(.gic-busy)::before,html[data-motion=reduced] *:not(.fa-spin):not(.gic-busy)::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
@media print{
  html,body.embed{background:#fff!important;color:#000}
  .no-print,.gic-modal,.gic-toasts{display:none!important}
  .print-only{display:block!important}
  .app{padding:0;max-width:none}
}

/* ================= LIGHT THEME (matches the site) ================= */
html[data-theme=light]{
  --bg:#e2e8f0;--panel:#ffffff;--panel2:#f1f5f9;--line:#cbd5e1;--hard:#1e293b;
  --sky:#0ea5e9;--purple:#7c3aed;--gold:#f59e0b;--green:#10b981;--rose:#e11d48;
  --text:#1e293b;--soft:#475569;--muted:#64748b;--head:#0369a1;--input-bg:#ffffff;--chip-bg:#e2e8f0;
  --dots:radial-gradient(#cbd5e1 1.5px,transparent 1.5px);color-scheme:light}
html[data-theme=light] .status.ok{background:#d1fae5;color:#065f46}
html[data-theme=light] .status.warn{background:#fef3c7;color:#92400e}
html[data-theme=light] .chip.found{background:#d1fae5}
html[data-theme=light] .link-danger{color:#be123c}
html[data-theme=light] .btn.danger{color:#fff}
html[data-theme=light] .gic-modal{background:rgba(30,41,59,.55)}
html[data-theme=light] .gic-box h3{color:#0369a1}
html[data-theme=light] .gic-body .big{color:#d97706}
html[data-theme=light] .gic-howto h2{color:#0369a1}
/* per-game surfaces */
html[data-theme=light] .ws-cell{background:#e2e8f0;color:#1e293b;box-shadow:inset 0 0 0 2px #cbd5e1}
html[data-theme=light] .ws-cell:hover{background:#cbd5e1}
html[data-theme=light] .ws-cell.ans{background:#fde68a}
html[data-theme=light] .cell{background:#eaf0f8;box-shadow:inset 0 0 0 1px #cbd5e1}
html[data-theme=light] .cell.wall{background:repeating-linear-gradient(45deg,#94a3b8 0 6px,#8697ad 6px 12px);box-shadow:inset 0 0 0 2px #64748b}
html[data-theme=light] .cell.exitc{background:#bbf7d0}
html[data-theme=light] .msg.ok{color:#047857}html[data-theme=light] .msg.bad{color:#be123c}html[data-theme=light] .msg.hint{color:#b45309}
html[data-theme=light] .bchip.cur{color:#b45309}
html[data-theme=light] .target{color:var(--text)}
html[data-theme=light] .sp-help h3{color:#7c3aed}html[data-theme=light] .sp-card h2{color:#d97706}
html[data-theme=light] .btn.danger,html[data-theme=light] .sp-entry .mini.del:hover{color:#fff}
html[data-theme=light] .sp-modal{background:rgba(30,41,59,.55)}
html[data-theme=light] .wheel-ring::before{border-color:#fff}
html[data-theme=light] .pic-stage{background:#fff}

/* ================= FULL SCREEN (driven by the parent page; works on touchscreens & phones) ================= */
.fs-only{display:none!important}
html.gic-fs .fs-only{display:flex!important}
html.gic-fs .no-fs{display:none!important}
html.gic-fs,html.gic-fs body.embed{height:100%}
html.gic-fs body.embed{overflow:auto;-webkit-overflow-scrolling:touch}
html.gic-fs .app{max-width:none;padding:8px 10px}
.gic-fs-exit{position:fixed;top:8px;right:8px;z-index:200;width:46px;height:46px;border-radius:12px;border:3px solid var(--hard);background:var(--panel);color:var(--text);box-shadow:var(--shadow-sm);font-size:1.15rem;cursor:pointer;display:none;place-items:center;padding:0;opacity:.9}
html.gic-fs .gic-fs-exit{display:grid}

/* ================= DIALOG SHELL (.gic-pk, used by the PDF export dialog in pdfexport.js) ================= */
.gic-pk{position:fixed;inset:0;z-index:150;background:rgba(2,6,23,.8);display:flex;align-items:center;justify-content:center;padding:12px}
html[data-theme=light] .gic-pk{background:rgba(30,41,59,.55)}
.gic-pk-box{background:var(--panel);border:3px solid var(--hard);border-radius:var(--r);box-shadow:var(--shadow);width:min(100%,820px);max-height:calc(92 * var(--vh,1vh));display:flex;flex-direction:column;animation:gicpop .18s ease-out}
.gic-pk-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:2px solid var(--line)}
.gic-pk-head h3{flex:1;margin:0;color:var(--head)}
.gic-x{border:0;background:none;color:var(--muted);font-size:1.8rem;line-height:1;cursor:pointer;padding:0 4px}
.gic-x:hover{color:var(--text)}
.gic-crumbs{display:flex;gap:4px;flex-wrap:wrap;align-items:center;font-weight:700;font-size:.85rem;flex:1;min-width:0}
.gic-crumbs button{background:none;border:0;color:var(--sky);font:inherit;cursor:pointer;padding:2px 4px}
.gic-crumbs span{color:var(--muted)}
.gic-pk-body{padding:12px 16px;overflow:auto;flex:1;min-height:220px}
.gic-pk-foot{display:flex;gap:10px;justify-content:space-between;align-items:center;padding:12px 16px;border-top:2px solid var(--line);flex-wrap:wrap}
.gic-note{font-size:.8rem;color:var(--muted)}

/* ---------- PDF export dialog ---------- */
.gic-pdf-box{max-width:460px}
.gic-pdf-body{display:flex;flex-direction:column;gap:14px;padding:16px 18px}
.gic-pdf-body .segmented{width:100%}
.gic-pdf-body .segmented button{flex:1}
/* PDF dialog with a live preview (pdfexport.js). pdfexport.js measures the dialog and sets data-mode="split" (wide: options left, preview right) or "tabs" (narrow: a Preview | Options switch), and adds .short on short screens (a phone held sideways: compact, and the preview fits the width and scrolls). */
.gic-pk.gic-pv-ov{padding:0;z-index:400}
.gic-pdf-box.gic-pv{width:100%;max-width:none;height:100%;max-height:none;border-width:0;border-radius:0;overflow:hidden;margin:0}
html.gic-vp .gic-pdf-box.gic-pv{height:var(--vp-h,100%)}
.gic-pv .gic-pk-head{padding:8px 12px;flex:none;flex-wrap:wrap}.gic-pv .gic-pk-head h3{font-size:1.05rem}
.gic-pv-tabs{order:3;flex:0 0 100%}
.gic-pv-tabs .segmented{width:100%}.gic-pv-tabs .segmented button{flex:1;padding:10px 6px}
.gic-pv-wrap{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.gic-pv-side{flex:1;min-height:0;display:flex;flex-direction:column;gap:6px;padding:8px 12px;background:var(--bg)}
.gic-pv-bar{display:flex;align-items:center;justify-content:center;gap:10px;font:700 .82rem 'Inter',sans-serif;color:var(--soft);min-height:32px;flex:none;flex-wrap:wrap}
.gic-pv-nav{padding:2px 12px;min-height:30px;font-size:1.1rem;line-height:1}
.gic-pv-nav[hidden],.gic-pv-upd[hidden]{display:none}
.gic-pv-stage{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.gic-pv-page{background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.4);border-radius:2px;transition:opacity .15s;flex:none}
.gic-pv-page[hidden],.gic-pv-msg[hidden]{display:none}
.gic-pv-msg{color:var(--soft);font-weight:600;text-align:center;padding:16px}
.gic-pv-busy{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:none;padding:6px 14px;border-radius:99px;background:rgba(15,23,42,.85);color:#fff;font:700 .8rem 'Inter',sans-serif;white-space:nowrap;z-index:2}
.gic-pv.busy .gic-pv-busy{display:block}
.gic-pv.busy .gic-pv-page,.gic-pv.stale .gic-pv-page{opacity:.45}
.gic-pdf-box.gic-pv .gic-pdf-body{flex:1;min-height:0;overflow:auto;padding:14px 14px 20px;-webkit-overflow-scrolling:touch}
.gic-pv .gic-pk-foot{flex:none;padding:8px 12px;flex-wrap:nowrap}
.gic-pv .gic-pk-foot .gic-note{display:none}
.gic-pv .gic-pk-foot .row{width:100%;display:flex;gap:8px}.gic-pv .gic-pk-foot .row .btn{flex:1}
/* tabs mode: only one of the two panes at a time */
.gic-pv[data-mode=tabs] .gic-pv-wrap[data-tab=pv] .gic-pdf-body{display:none}
.gic-pv[data-mode=tabs] .gic-pv-wrap[data-tab=opt] .gic-pv-side{display:none}
/* split mode: tablet / desktop window */
.gic-pv[data-mode=split] .gic-pv-tabs{display:none}
.gic-pv[data-mode=split] .gic-pv-wrap{flex-direction:row}
.gic-pv[data-mode=split] .gic-pdf-body{order:2;width:340px;flex:none;display:flex;flex-direction:column;gap:14px;border-left:2px solid var(--line)}
.gic-pv[data-mode=split] .gic-pv-side{order:1;flex:1;min-width:0;padding:12px}
.gic-pv[data-mode=split] .gic-pk-foot{flex-wrap:wrap;padding:12px 16px}.gic-pv[data-mode=split] .gic-pk-foot .gic-note{display:block}.gic-pv[data-mode=split] .gic-pk-foot .row{width:auto}.gic-pv[data-mode=split] .gic-pk-foot .row .btn{flex:none}
.gic-pv[data-mode=split] .gic-pk-head{padding:14px 16px}.gic-pv[data-mode=split] .gic-pk-head h3{font-size:inherit}
.gic-pk.gic-pv-ov.is-split{padding:12px}
.gic-pv-ov,.gic-pv-wrap,.gic-pv-stage,.gic-pdf-body{overscroll-behavior:contain}
.gic-pv-ov{touch-action:pan-y}
.gic-pdf-box.gic-pv[data-mode=split]{max-width:1000px;width:min(100%,1000px);height:min(calc(92 * var(--vh,1vh)),860px);border-width:3px;border-radius:var(--r);margin:auto}
html.gic-vp .gic-pdf-box.gic-pv[data-mode=split]{height:min(var(--vp-h,92vh),860px)}
/* short screens (phone held sideways): title and switch share one row, the page fits the width and scrolls */
.gic-pv.short .gic-pk-head{padding:4px 10px;flex-wrap:nowrap;gap:8px}.gic-pv.short .gic-pk-head h3{font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 0;min-width:0}
.gic-pv.short .gic-pv-tabs{order:0;flex:0 0 auto;width:min(320px,52%)}.gic-pv.short .gic-pv-tabs .segmented button{padding:6px 6px}
.gic-pv.short .gic-pv-side{padding:4px 10px}.gic-pv.short .gic-pv-bar{min-height:28px}
.gic-pv.short .gic-pv-stage{overflow:auto;align-items:flex-start;-webkit-overflow-scrolling:touch}
.gic-pv.short .gic-pv-page{margin:0 auto}
/* short + wide (phone held sideways): the whole screen, preview left, options right, slim title and buttons */
.gic-pk.gic-pv-ov.is-split.is-short{padding:0}
.gic-pdf-box.gic-pv.short[data-mode=split]{width:100%;max-width:none;height:100%;border-width:0;border-radius:0;margin:0}
html.gic-vp .gic-pdf-box.gic-pv.short[data-mode=split]{height:var(--vp-h,100%)}
.gic-pv.short[data-mode=split] .gic-pk-foot{padding:5px 10px;flex-wrap:nowrap}
.gic-pv.short[data-mode=split] .gic-pk-foot .gic-note{display:none}
.gic-pv.short[data-mode=split] .gic-pk-foot .row{width:100%}.gic-pv.short[data-mode=split] .gic-pk-foot .row .btn{flex:1}
.gic-pv.short[data-mode=split] .gic-pk-head h3{font-size:.95rem}
.gic-pv.short[data-mode=split] .gic-pdf-body{width:min(300px,42%);padding:10px 12px;gap:10px}
.gic-pv.short[data-mode=split] .gic-pk-head{padding:4px 12px}
.gic-pv.short .gic-pk-foot{padding:5px 10px}.gic-pv.short .gic-pk-foot .btn{padding-top:6px;padding-bottom:6px}

/* ---------- shared game header (game_head() in includes/game_shell.php) ---------- */
.gic-head{display:flex;justify-content:space-between;align-items:center;gap:14px 18px;flex-wrap:wrap;margin-bottom:18px;background:var(--panel);border:3px solid var(--hard);border-radius:var(--r);box-shadow:var(--shadow);padding:14px 18px}
.gic-head-id{display:flex;align-items:center;gap:14px;min-width:0;flex:1 1 100%}      /* 1.203.36: the name and description always get their own row; the buttons always sit on the row below (before, a long description was squeezed into a narrow column beside the buttons) */
.gic-head-text{min-width:0}
.gic-head-text h1{font-size:1.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.gic-head-text p{margin:2px 0 0;color:var(--muted);font-size:.9rem;line-height:1.35;max-width:100ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}.gic-head-text p.open{-webkit-line-clamp:unset;display:block}
.gic-head-right{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap;justify-content:flex-start;flex:1 1 100%}
.gic-head-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-start}
.gic-pill{display:inline-block;padding:1px 8px;border-radius:99px;background:var(--panel2);border:2px solid var(--hard);font-size:.7rem;font-weight:800;color:var(--soft);vertical-align:middle}
.rank-badge{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:.82rem;padding:7px 14px;border-radius:99px;border:3px solid var(--hard);background:var(--panel2);color:var(--soft)}
.rank-badge.on,.rank-badge.ok{background:var(--green);color:var(--hard)}.rank-badge.guest{background:var(--gold);color:var(--hard)}
.rank-badge:empty{display:none}
.btn.liked{background:var(--rose);color:var(--on-rose)}
.hide-xs{display:inline}
@media(max-width:560px){.hide-xs{display:none}.gic-head{padding:12px}.gic-head-text h1{font-size:1.25rem}}

/* ---------- standard "content source" row used by every game: Upload pictures / From my library / Import from… / Download PDF… ---------- */
.gic-source-row{display:flex;flex-wrap:wrap;gap:8px}
.gic-source-row .btn{flex:0 1 auto}
.gic-source-row .btn i{font-size:.9em}

/* ---------- inline help tooltips: <button type="button" class="gic-tip" data-tip="…">?</button> next to a label or control ---------- */
.gic-tip{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex:none;border-radius:50%;border:none;background:var(--chip-bg);color:var(--muted);font-size:.72rem;font-weight:800;line-height:1;cursor:help;position:relative;vertical-align:middle;margin-left:5px;padding:0}
.gic-tip:hover,.gic-tip:focus-visible,.gic-tip.open{background:var(--sky);color:var(--hard);outline:none}
.gic-tip::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%);background:var(--hard);color:#fff;padding:8px 11px;border-radius:9px;font-size:.78rem;font-weight:600;line-height:1.35;white-space:normal;width:max-content;max-width:230px;box-shadow:0 4px 14px rgba(0,0,0,.3);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s;z-index:60;text-align:left}
.gic-tip::before{content:'';position:absolute;left:50%;bottom:calc(100% + 3px);transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--hard);opacity:0;visibility:hidden;transition:opacity .12s;z-index:60}
.gic-tip:hover::after,.gic-tip:focus-visible::after,.gic-tip.open::after,.gic-tip:hover::before,.gic-tip:focus-visible::before,.gic-tip.open::before{opacity:1;visibility:visible}

/* ---- full screen: the board fills the space that is left, centred (sizes set by GIC.fit in bridge.js) ---- */
html.gic-fitting *:not([data-fit-keep]),html.gic-fitting *:not([data-fit-keep])::before,html.gic-fitting *:not([data-fit-keep])::after{transition:none!important}
/* data-fit-keep: a spinning die / coin / card keeps its transition through a re-fit, otherwise a roll started a moment before the re-fit would jump to its end (1.95.0) */
html.gic-fs .gic-fit-box{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start}
html.gic-fs .gic-fit-box .stage-head{flex:none}
html.gic-fs .app{padding:8px 10px}
html.gic-fs body.embed{overscroll-behavior:none}

/* ================= LOCKED CREATIONS =================
   The server puts data-lock on <html> for visitors who may not edit:  1 = gameplay options only · 2 = play & print only.
   Games mark their markup:  .gic-editor = the whole editing column · .gic-edit = content editing (hidden at 1 and 2)
                             .gic-opts   = gameplay options        (hidden only at 2) */
html[data-lock] .gic-edit{display:none!important}
html[data-lock="2"] .gic-opts,html[data-lock="2"] .gic-editor{display:none!important}
html[data-lock="2"] .layout{grid-template-columns:minmax(0,1fr)}
.gic-pill-lock{background:#422006;border-color:#f59e0b;color:#fde68a}
html[data-theme=light] .gic-pill-lock{background:#fef3c7;color:#92400e}

/* full screen on small screens: use nearly all of the width */
html.gic-fs:fullscreen{padding:0}
@media(max-width:700px){html.gic-fs .app{padding:6px}}

/* ===== Import / picture dialogs: tab strip and the built-in "Site pictures" browser ===== */


/* ===== Import dialog: compact "My lists" and creation lists ===== */
.gic-set-toggle{display:flex;align-items:center;gap:8px;width:100%;margin:8px 0 6px;padding:8px 4px;border:0;border-bottom:2px solid var(--line);background:transparent;color:var(--text);font:600 .92rem 'Inter',sans-serif;cursor:pointer;text-align:left}
.gic-set-toggle:first-child{margin-top:0}
.gic-set-toggle i{font-size:.72rem;color:var(--muted);transition:transform .15s}
.gic-set-toggle.open i{transform:rotate(90deg)}

/* ===== Live games (student side): top bar, waiting room, countdown, results ===== */
html.gic-live .gic-fs-exit{display:none!important}
html.gic-live body.embed{padding-top:46px}
html.gic-live #restartBtn{display:none!important}
html.gic-live .gic-editor,html.gic-live .gic-set{display:none!important}
.gl-hud{position:fixed;top:0;left:0;right:0;height:46px;z-index:250;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 14px;background:var(--panel);border-bottom:3px solid var(--hard);font-weight:800;font-size:1rem}
.gl-nick{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gl-nick small{font-weight:700;color:var(--soft)}
.gl-mid{font:800 1.3rem 'Baloo 2','Inter',sans-serif;font-variant-numeric:tabular-nums}
.gl-right{color:var(--soft);font-size:.9rem;white-space:nowrap}
.gl-fsb{border:2px solid var(--hard);background:var(--panel);color:var(--text);border-radius:8px;width:34px;height:30px;cursor:pointer;margin-left:-2px;display:grid;place-items:center;font-size:.9rem;pointer-events:auto}
@media(max-width:700px){.gl-fsb{display:none}}
.gl-dot{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid var(--hard);flex:none;vertical-align:middle}
.gl-ov{position:fixed;inset:46px 0 0 0;z-index:240;display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:18px 14px;background:var(--bg,#0f172a)}
.gl-ov.gl-dark{background:rgba(2,6,23,.96);align-items:center}
.gl-card{width:min(560px,100%);text-align:center;margin:auto 0}
.gl-card h2{font-size:clamp(1.5rem,5vw,2.2rem);margin:6px 0 10px}
.gl-card h3{margin:16px 0 6px;font-size:1rem;color:var(--soft)}
.gl-card p{font-size:1.1rem;margin:8px 0}
.gl-emoji{font-size:clamp(3rem,12vw,5rem);line-height:1}
.gl-sub{color:var(--soft);font-weight:700;font-size:1rem!important}
.gl-teamline{font-weight:700}
.gl-count .gl-num{font:800 min(46vw,16rem)/1 'Baloo 2','Inter',sans-serif;color:var(--sky);animation:glbeat 1s ease infinite}
@keyframes glbeat{0%{transform:scale(.6);opacity:0}25%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
.gl-me{display:flex;justify-content:center;gap:12px;margin:12px 0}
.gl-me>div{background:var(--panel2);border:3px solid var(--hard);border-radius:12px;padding:8px 18px;min-width:84px}
.gl-me b{display:block;font:800 1.8rem/1.1 'Baloo 2','Inter',sans-serif;font-variant-numeric:tabular-nums}
.gl-me small{color:var(--soft);font-weight:700}
.gl-board{list-style:none;margin:10px 0;padding:0;display:flex;flex-direction:column;gap:6px;text-align:left}
.gl-board li{display:grid;grid-template-columns:2em 1fr auto;gap:8px;align-items:center;padding:7px 12px;border:2px solid var(--line);border-radius:10px;background:var(--panel2);font-weight:700}
.gl-board li.me{border-color:var(--gold);box-shadow:3px 3px 0 var(--gold)}
.gl-board .rk{color:var(--soft);text-align:center}.gl-board .nm{display:flex;align-items:center;gap:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gl-board .sc{font-variant-numeric:tabular-nums}
.gl-teams{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:10px 0}
.gl-team{display:flex;align-items:center;gap:8px;padding:6px 14px;border:3px solid var(--hard);border-radius:10px;background:var(--panel2);font-weight:700}
.gl-team.first{border-color:var(--gold)}
.gl-btn{display:inline-block;padding:12px 24px;border:3px solid var(--hard);border-radius:10px;background:var(--green);color:var(--hard);font-weight:800;text-decoration:none;box-shadow:var(--shadow-sm)}
.gl-host{display:grid;gap:12px}
html.gic-live .mm-board{margin-left:auto;margin-right:auto}

/* ---- Collapsible option groups (any game: <details class="gic-grp"><summary>…</summary>…</details>) ---- */
.gic-grp{border-top:2px dashed var(--line);padding-top:10px;display:flex;flex-direction:column;gap:10px}
.gic-grp>summary{cursor:pointer;font:700 1rem 'Baloo 2','Inter',sans-serif;color:var(--sky);list-style:none;display:flex;align-items:center;gap:8px;user-select:none;padding:2px 0}
.gic-grp>summary::-webkit-details-marker{display:none}
.gic-grp>summary i{width:1.1em;text-align:center;font-size:.85em;opacity:.9}
.gic-grp>summary::after{content:'\f078';font-family:'Font Awesome 6 Free';font-weight:900;font-size:.7rem;margin-left:auto;transition:transform .15s}
.gic-grp[open]>summary::after{transform:rotate(180deg)}
.gic-grp:not([open]){padding-bottom:0}

/* Options docked under the game screen (see game_end() in includes/game_shell.php) */
html[data-lock] .layout.gic-docked:not(.gic-kept){grid-template-columns:minmax(0,1fr)}
html[data-lock] .layout.gic-docked:not(.gic-kept)>.gic-editor{display:none}
html.gic-live .gic-docked-opts{display:none!important}
.gic-docked-opts{gap:12px}
.gic-docked-opts .grid2{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

/* Collapsible panels (details.gic-pan) */
.gic-pan>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;font-weight:800;font-size:1.05rem;margin:0;user-select:none}
.gic-pan>summary::-webkit-details-marker{display:none}
.gic-pan>summary i{width:1.1em;text-align:center;opacity:.9}
.gic-pan>summary::after{content:'\f078';font-family:'Font Awesome 6 Free';font-weight:900;font-size:.75rem;margin-left:auto;transition:transform .15s}
.gic-pan[open]>summary::after{transform:rotate(180deg)}
.gic-pan[open]>summary{margin-bottom:12px}
.gic-pan>.gic-pan-body{display:flex;flex-direction:column;gap:12px}

/* ======================================================================================================
   SMALL SCREENS (phones & small tablets).  Desktop layout above is untouched.
   1) the game screen comes first (right after the game header); editing panels follow it
   2) a compact, tidy game header   3) popups centre on the part of the page the player can see
   ====================================================================================================== */

/* -- popups/toasts: the iframe is as tall as the whole page, so the parent tells us which slice is visible (--vp-top / --vp-h, bridge.js) -- */
html.gic-vp .gic-modal,html.gic-vp .gic-pk,html.gic-vp .pp-ov,html.gic-vp .pres,html.gic-vp .sp-modal,html.gic-vp .wb-modal,html.gic-vp .gicr-ov{inset:auto;left:0;right:0;top:var(--vp-top,0px);height:var(--vp-h,100%);bottom:auto}
html.gic-vp .gic-toasts{bottom:auto;top:calc(var(--vp-top,0px) + var(--vp-h,100vh) - 14px);transform:translate(-50%,-100%)}
html.gic-vp .reopen-tab{top:calc(var(--vp-top,0px) + var(--vp-h,100vh) / 2)}
/* any dialog taller than the screen scrolls instead of being cut off */
.gic-modal,.pp-ov,.sp-modal,.wb-modal{overflow:auto}
.gic-box,.gic-pdf-box,.pp-box,.sp-card{max-height:100%;overflow:auto;margin:auto}
.gic-pk-box{max-height:100%}
html.gic-vp .gic-pk-box{max-height:var(--vp-h,92vh)}

@media(max-width:900px){
  /* the game screen first, then the editing / options panels */
  .layout>.gic-editor{order:2}
  .layout>*{min-width:0}
}

@media(max-width:700px){
  .app{padding:8px 8px 22px}
  .layout,.col{gap:12px}
  .panel{padding:12px;box-shadow:3px 3px 0 var(--hard)}
  html:not(.gic-fs) #stage.panel{padding:8px}
  .stage-head{gap:8px;margin-bottom:8px}
  .stage-foot{margin-top:8px;font-size:.8rem}
  h2{font-size:1.15rem}
  .gic-box{padding:18px}
  .gic-box h3{font-size:calc(1.5rem * var(--k-eff,1))}
  .gic-body{font-size:calc(1.15rem * var(--k-eff,1));margin-bottom:14px}
  .gic-modal,.gic-pk,.pp-ov{padding:8px}
  .gic-pk-head{padding:10px 12px}.gic-pk-body{padding:10px 12px;min-height:160px}.gic-pk-foot{padding:10px 12px}
  .btn{padding:9px 13px}

  /* ---- compact game header ---- */
  .gic-head{padding:10px;gap:8px;margin-bottom:10px;box-shadow:3px 3px 0 var(--hard)}
  .gic-head-id{flex:1 1 100%;gap:10px;align-items:flex-start}
  .gic-head .mark{width:40px;height:40px;border-radius:10px;font-size:17px;border-width:2px;margin-top:1px}
  .gic-head-text{flex:1;min-width:0}
  .gic-head-text h1{font-size:1.2rem;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:break-word}
  .gic-head-text p{font-size:.8rem;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
  .gic-head-text p.open{-webkit-line-clamp:unset;display:block}
  .gic-head-right{flex:1 1 100%;justify-content:flex-start;gap:8px;width:100%}
  .gic-head-actions{width:100%;justify-content:flex-start;gap:6px;flex-wrap:wrap}
  .gic-head-actions .btn.sm{min-height:38px;padding:6px 10px;font-size:.82rem}
  /* the main action (Save) stretches; icon buttons stay square */
  .gic-head-actions .btn.accent{flex:1 1 auto}
  .gic-head-actions .btn.sm:not(.accent){flex:0 0 auto;min-width:40px}
  .rank-badge{font-size:.75rem;padding:4px 10px;border-width:2px}
  .rank-badge:not(:empty){flex:1 1 100%;justify-content:center}
}
@media(max-width:380px){
  .gic-head-text h1{font-size:1.1rem}
  .gic-head-actions .btn.sm:not(.accent){min-width:36px;padding:6px 8px}
}
html.gic-vp .wb-dlg,html.gic-vp .sp-card,html.gic-vp .gic-box{max-height:calc(var(--vp-h,100vh) - 16px)}
html.gic-vp .pp-box{height:min(calc(var(--vp-h,100vh) - 16px),720px)}

/* short landscape screens (phones turned sideways): a slim one-row header so the game keeps the height */
@media(max-height:520px) and (orientation:landscape){
  .app{padding:8px 10px 16px}
  .gic-head{flex-wrap:nowrap;align-items:center;padding:6px 10px;margin-bottom:8px;gap:10px}
  .gic-head-id{flex:1 1 auto;min-width:0;align-items:center}
  .gic-head .mark{width:32px;height:32px;font-size:15px;border-width:2px}
  .gic-head-text h1{font-size:1.05rem;white-space:nowrap;display:block;overflow:hidden;text-overflow:ellipsis}
  .gic-head-text p{display:none}
  .gic-head-right{flex:0 0 auto;width:auto}
  .gic-head-actions{width:auto;flex-wrap:nowrap}
  .gic-head .hide-xs{display:none}
  .gic-head-actions .btn.sm{min-height:34px;padding:5px 10px}
  .gic-head-actions .btn.accent{flex:0 0 auto}
  .rank-badge:not(:empty){flex:0 0 auto}
}

/* the "Use" menu in the game header */
.gic-menu{position:absolute;z-index:60;min-width:270px;max-width:min(340px,92vw);background:var(--panel);border:3px solid var(--hard);border-radius:14px;box-shadow:var(--shadow);padding:6px;display:flex;flex-direction:column;gap:2px}
.gic-mi{display:flex;gap:12px;align-items:flex-start;text-align:left;border:0;background:transparent;color:var(--text);padding:9px 10px;border-radius:10px;cursor:pointer;font:inherit}
.gic-mi:hover:not(:disabled),.gic-mi:focus-visible{background:var(--panel2)}
.gic-mi:disabled{opacity:.5;cursor:default}
.gic-mi>i{width:20px;text-align:center;color:var(--sky);margin-top:3px}
.gic-mi span{display:flex;flex-direction:column;line-height:1.25}.gic-mi b{font-size:.92rem}.gic-mi small{color:var(--muted);font-size:.78rem}

/* ================= FULL-SCREEN STAGE LAYOUT (assets/js/stage.js) =================
   In full screen the game's top bar moves into a floating HUD so the board gets nearly the whole screen.
   Everything here is under html.gic-stage, which only stage.js adds (rollback: /admin/stage.php or ?stage=0 leaves it off). */
.gic-hud,.gic-menu-btn,.gic-hud-panel{display:none}
html.gic-stage.gic-fs{--hud-t:var(--k-hud-h,44px);--hud-r:0px}
@media (orientation:landscape) and (max-height:560px){html.gic-stage.gic-fs{--hud-t:0px;--hud-r:58px}}
html.gic-stage.gic-fs.gic-hud-off{--hud-t:calc(var(--k-hud-btn,36px) + 4px);--hud-r:0px}
@media (orientation:landscape) and (max-height:560px){html.gic-stage.gic-fs.gic-hud-off{--hud-t:0px;--hud-r:44px}}
html.gic-stage.gic-fs .app{max-width:none;padding:0}
@media(max-width:700px){html.gic-stage.gic-fs .app{padding:0}}
.gic-hud-gone,.stage-head.gic-hud-gone{display:none!important}

/* the board area: the game's own box, with room kept only for the strip / rail */
html.gic-stage.gic-fs #stage,html.gic-stage.gic-fs .gic-fit-box{padding:calc(var(--hud-t) + 4px) calc(var(--hud-r) + 4px) 4px 4px!important;border-radius:0}

/* the strip (portrait, tablets, desktop): chips along the top; ☰ and exit at the right */
html.gic-stage.gic-fs .gic-hud{display:flex;position:fixed;z-index:210;top:0;left:0;right:0;min-height:var(--k-hud-h,44px);height:auto;padding:5px calc(var(--k-hud-btn,36px) * 2 + 20px) 3px 8px;align-items:flex-start;pointer-events:none}
html.gic-stage.gic-fs.gic-hud-off .gic-hud{display:none}
.gic-hud-stats{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;min-width:0;max-width:100%;overflow:hidden;pointer-events:auto}
.gic-hud-stats>*{flex:none;font-size:var(--k-hud-font,.78rem);line-height:1.25;padding:5px 9px;border-radius:9px;white-space:nowrap;box-shadow:0 1px 4px rgba(0,0,0,.35);background:var(--panel2);color:var(--text);margin:0}
.gic-hud-stats>.status.ok{background:#064e3b;color:#a7f3d0}.gic-hud-stats>.status.warn{background:#422006;color:#fde68a}
.gic-hud-stats .status i{font-size:.85em}
.gic-hud-stats .hide-xs{display:none}
html.gic-stage.gic-fs .gic-fs-exit,html.gic-stage.gic-fs .gic-menu-btn{position:fixed;top:4px;width:var(--k-hud-btn,36px);height:var(--k-hud-btn,36px);border-radius:10px;border:2px solid var(--hard);background:var(--panel);color:var(--text);box-shadow:var(--shadow-sm);font-size:1rem;cursor:pointer;place-items:center;padding:0;opacity:.9;z-index:220}
html.gic-stage.gic-fs .gic-fs-exit{right:6px;display:grid}
html.gic-stage.gic-fs .gic-menu-btn{right:calc(var(--k-hud-btn,36px) + 12px);display:grid}
html.gic-stage.gic-fs.gic-hud-off .gic-fs-exit{display:none}
html.gic-stage.gic-fs.gic-hud-off .gic-menu-btn{right:6px;top:6px;width:34px;height:34px;opacity:.5;background:rgba(15,23,42,.7)}
html.gic-stage.gic-fs.gic-hud-off .gic-menu-btn:hover,html.gic-stage.gic-fs.gic-hud-off .gic-menu-btn[aria-expanded=true]{opacity:.95}
html[data-theme=light].gic-stage.gic-fs.gic-hud-off .gic-menu-btn{background:rgba(255,255,255,.75)}
html.gic-stage.gic-fs .gic-menu-btn i,html.gic-stage.gic-fs .gic-menu-btn svg{font-size:calc(var(--k-hud-btn,36px) * .555);filter:drop-shadow(0 0 2px var(--more-halo,rgba(255,255,255,.9)))}

/* the rail (a phone turned sideways: height is scarce, width is not) */
@media (orientation:landscape) and (max-height:560px){
  html.gic-stage.gic-fs .gic-hud{top:0;bottom:0;left:auto;right:0;width:var(--hud-r);height:auto;padding:80px 4px 6px;flex-direction:column;align-items:stretch}
  html.gic-stage.gic-fs .gic-fs-exit,html.gic-stage.gic-fs .gic-menu-btn{width:34px;height:34px;right:12px}
  html.gic-stage.gic-fs .gic-fs-exit{top:4px}
  html.gic-stage.gic-fs .gic-menu-btn{top:42px}
  html.gic-stage.gic-fs.gic-hud-off .gic-menu-btn{top:5px;right:5px}
  .gic-hud .gic-hud-stats{flex-direction:column;align-items:stretch;gap:5px;overflow:auto;max-height:100%;scrollbar-width:none}
  .gic-hud .gic-hud-stats>*{font-size:.68rem;padding:4px 2px;text-align:center;white-space:normal;line-height:1.2;border-radius:10px}
  .gic-hud .gic-hud-stats .status i{display:block;margin:0 auto 1px}
}

/* the menu */
html.gic-stage.gic-fs .gic-hud-panel{position:fixed;z-index:260;top:calc(max(var(--hud-t),var(--k-hud-h,44px)) + 6px);right:calc(var(--hud-r) + 6px);width:min(var(--k-panel-w,300px),calc(100vw - 16px));max-height:calc(100vh - 66px);max-height:calc(100dvh - 66px);overflow:auto;background:var(--panel);border:3px solid var(--hard);border-radius:16px;box-shadow:var(--shadow);padding:12px;flex-direction:column;gap:10px}
html.gic-stage.gic-fs .gic-hud-panel.open{display:flex}
@media (orientation:landscape) and (max-height:560px){html.gic-stage.gic-fs .gic-hud-panel{top:6px;right:calc(max(var(--hud-r),44px) + 6px);max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px)}}
.gic-hud-panel [hidden]{display:none!important}
.gic-hp-info .gic-hud-stats{flex-wrap:wrap;overflow:visible;flex-direction:row}
.gic-hud-panel .gic-hud-stats>*{font-size:.8rem;padding:5px 10px;text-align:left;white-space:nowrap;box-shadow:none}
.gic-hud-panel .gic-hud-stats .status i{display:inline;margin:0}
.gic-hp-notes{font-size:.8rem;color:var(--soft);display:flex;flex-wrap:wrap;gap:6px}
.gic-hp-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.gic-hp-actions>.btn,.gic-hp-actions>button,.gic-hp-actions>a{width:100%;justify-content:flex-start;min-height:calc(44px * var(--k-eff,1));padding:8px 12px;font-size:calc(.88rem * var(--k-eff,1))}
.gic-hp-actions>.segmented,.gic-hp-actions>label,.gic-hp-actions>select,.gic-hp-actions>.row,.gic-hp-actions>div{grid-column:1/-1}
.gic-hp-actions .segmented{width:100%;flex-wrap:wrap}.gic-hp-actions .segmented button{flex:1 1 auto}
.gic-hp-actions .hide-xs{display:inline!important}
.gic-hp-actions [data-iconly]::after{content:attr(title)}
.gic-hp-foot{display:grid;grid-template-columns:1fr;gap:8px;border-top:2px solid var(--line);padding-top:10px}
.gic-hp-foot .btn{width:100%;justify-content:flex-start;min-height:calc(44px * var(--k-eff,1));font-size:calc(.88rem * var(--k-eff,1));font-weight:700;gap:10px}
.gic-hp-foot .btn i:first-child{width:1.1em;text-align:center;flex:none}
@media (orientation:landscape) and (max-height:560px){.gic-hp-actions{grid-template-columns:1fr 1fr}}

/* Settings: the game's own settings box, shown over the board */
html.gic-stage.gic-fs.gic-sheet .gic-sheet-box{display:block!important;position:fixed;inset:0;z-index:300;overflow:auto;-webkit-overflow-scrolling:touch;margin:0;max-width:none;width:auto;border-radius:0;border:0;background:var(--bg);padding:56px 12px 28px;box-shadow:none}
.gic-sheet-bar{display:none}
html.gic-stage.gic-fs.gic-sheet .gic-sheet-bar{position:fixed;top:0;left:0;right:0;z-index:310;height:46px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 10px;background:var(--panel);border-bottom:3px solid var(--hard)}
html.gic-stage.gic-fs.gic-sheet .gic-sheet-box .gic-set-toggle{display:none}

/* intro / result cards must never be cut off on a short screen: they shrink a little and scroll as a last resort */
html.gic-stage.gic-fs [class*="-overlay"]{overflow:auto;-webkit-overflow-scrolling:touch}
html.gic-stage.gic-fs [class*="-overlay"]>[class*="card"]{margin-top:auto;margin-bottom:auto}
@media (orientation:landscape) and (max-height:560px){
  html.gic-stage.gic-fs [class*="-overlay"] :is([class*="card-icon"],[class*="ovicon"],[class*="ready-icon"]){display:none}
  html.gic-stage.gic-fs [class*="-overlay"]>[class*="card"]{padding:10px 16px;gap:6px}
  html.gic-stage.gic-fs [class*="-overlay"]>[class*="card"] h2{margin:0;font-size:1.25rem}
  html.gic-stage.gic-fs [class*="-overlay"]>[class*="card"] p{margin:4px 0;font-size:.82rem}
}

/* STAGE dock: a few primary buttons (data-stage="dock") that stay on screen */
.gic-dock{position:fixed;left:50%;transform:translateX(-50%);bottom:4px;z-index:60;display:flex;gap:6px;padding:4px;background:rgba(15,23,42,.82);border-radius:14px;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.gic-dock[hidden]{display:none}
.gic-dock .btn{min-width:42px;height:38px;padding:0 10px;white-space:nowrap}
html.gic-stage.gic-fs.gic-has-dock #stage.gic-fit-box,html.gic-stage.gic-fs.gic-has-dock .gic-fit-box{padding-bottom:calc(var(--dock-h,46px) + 4px)!important}
@media (orientation:landscape) and (max-height:560px){.gic-dock{left:4px;top:50%;bottom:auto;transform:translateY(-50%);flex-direction:column}
 html.gic-stage.gic-fs.gic-has-dock #stage.gic-fit-box,html.gic-stage.gic-fs.gic-has-dock .gic-fit-box{padding-bottom:4px!important;padding-left:calc(var(--dock-w,56px) + 4px)!important}}

/* STAGE: in full screen an intro / result card covers the whole play area (not just the board under it), so it has the
   most room; bridge.js (fitOverlays) then shrinks the card a little if it still does not fit. */
html.gic-stage.gic-fs :is(.sl-end,.qr-end,.pq-overlay):not([hidden]){position:fixed;top:var(--hud-t);right:var(--hud-r);bottom:0;left:0;z-index:150;border-radius:0;display:flex;align-items:center;justify-content:center;overflow:auto}
html.gic-stage.gic-fs :is(.sl-end,.qr-end,.pq-overlay)>*{margin:auto;flex:none}

/* STAGE: "turn your phone sideways" hint for wide games */
.gic-turn{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));top:auto;transform:translateX(-50%);z-index:400;display:flex;flex-direction:row;align-items:center;gap:12px;max-width:min(340px,92vw);padding:10px 16px;border-radius:999px;background:rgba(15,23,42,.94);color:#fff;border:2px solid var(--hard);box-shadow:var(--shadow);text-align:left;font-weight:700;font-size:.9rem;line-height:1.25;cursor:pointer;transition:opacity .35s}
.gic-turn i{font-size:1.5rem;flex:none;color:var(--sky);animation:gicTurn 1.6s ease-in-out infinite}
.gic-turn.out{opacity:0}
@keyframes gicTurn{0%,25%{transform:rotate(0)}55%,100%{transform:rotate(-90deg)}}
@media(prefers-reduced-motion:reduce){.gic-turn i{animation:none}}


/* ===== PHONES, normal (not full-screen) view: give the game most of the width =====
   Every extra frame (page margin, game panel, stage panel, intro card …) used to cost ~14px a side, so on a phone
   the board, team names and settings sat in a narrow strip. Frames are slimmer here; bigger screens are unchanged. */
@media (max-width:640px){
  html:not(.gic-fs) .app{padding:4px 4px 16px}
  html:not(.gic-fs) .layout{gap:8px}
  html:not(.gic-fs) .panel{padding:10px;border-width:2px;border-radius:14px;box-shadow:2px 2px 0 var(--hard)}
  html:not(.gic-fs) .panel .panel{padding:8px;border-width:2px;box-shadow:none}
  html:not(.gic-fs) .gic-head{padding:8px 10px;margin-bottom:6px;border-width:2px;box-shadow:2px 2px 0 var(--hard)}
  html:not(.gic-fs) .gic-pan>summary,html:not(.gic-fs) .gic-pan-body{padding-left:10px;padding-right:10px}
}

/* the floating sound button keeps its page-corner position when it moves into the full-screen menu: it sits in the menu like the other items */
html.gic-stage.gic-fs .gic-hud-panel .gic-snd-float{position:static;top:auto;right:auto;z-index:auto}
html.gic-stage.gic-fs .gic-hud-panel .gic-hp-actions .gic-snd{width:100%;justify-content:flex-start}
html.gic-stage.gic-fs .gic-hud-panel :is(button,.btn){font-family:'Inter',system-ui,sans-serif;max-width:100%;box-sizing:border-box;white-space:normal;text-align:left}

/* ===== PHONES & TABLETS, normal view: a slim game header with a clear Full screen button at the top right =====
   The header used to stack the title, a long description and a wrapping row of buttons (about 190px on a phone, most of the
   screen when it is turned sideways) and the Full screen button was just one more small button in that row. Here the title
   row stays one line (the description is one line; tap it to read more), Full screen is a big labelled button in the
   top-right corner and the other buttons sit in one row underneath that scrolls sideways when it is too long. */
@media (max-width:900px), (max-height:520px) and (orientation:landscape){
  html:not(.gic-fs) .gic-head{position:relative;flex-wrap:wrap;gap:4px 8px;padding:8px 10px;margin-bottom:6px}
  html:not(.gic-fs) .gic-head-id{flex:1 1 100%;min-width:0;padding-right:128px;min-height:46px;gap:10px}
  html:not(.gic-fs) .gic-head-id .mark{flex:none}
  html:not(.gic-fs) .gic-head-text h1{font-size:1.2rem}
  html:not(.gic-fs) .gic-head-text p{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;font-size:.82rem}
  html:not(.gic-fs) .gic-head-text p.open{-webkit-line-clamp:unset;display:block}
  html:not(.gic-fs) .gic-head-right{flex:1 1 100%;min-width:0;justify-content:flex-start;gap:6px}
  html:not(.gic-fs) .gic-head-right .rank-badge{padding:4px 10px;font-size:.76rem}
  html:not(.gic-fs) .gic-head-actions{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;max-width:100%;scrollbar-width:none;padding:1px 1px 3px}
  html:not(.gic-fs) .gic-head-actions::-webkit-scrollbar{display:none}
  html:not(.gic-fs) .gic-head-actions>*,html:not(.gic-fs) .gic-head-actions>.btn.sm,html:not(.gic-fs) .gic-head-actions>.btn.accent{flex:0 0 auto;white-space:nowrap}   /* buttons never shrink (the older .btn.accent{flex:1 1 auto} rule made Save squash and overlap its neighbours) */
  html:not(.gic-fs) .gic-head-actions .btn{min-height:40px;min-width:40px}
  html:not(.gic-fs) .gic-head [data-gic=fs]{position:absolute;top:8px;right:10px;min-height:46px;padding:0 16px;font-size:1rem;background:var(--sky);color:var(--hard);border-color:var(--hard)}
  html:not(.gic-fs) .gic-head [data-gic=fs] .hide-xs{display:inline}
}
/* a phone held upright: Full screen is a small square icon button (no label), so the title keeps its room and is never cut in the middle of a word */
@media (max-width:560px){
  html:not(.gic-fs) .gic-head-id{padding-right:54px;min-height:44px}
  html:not(.gic-fs) .gic-head [data-gic=fs]{top:8px;right:8px;width:44px;min-width:44px;min-height:44px;padding:0;justify-content:center;font-size:1.05rem}
  html:not(.gic-fs) .gic-head [data-gic=fs] .hide-xs{display:none}
  html:not(.gic-fs) .gic-head-text h1{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:break-word;word-break:normal;line-height:1.15}
}
/* a phone turned sideways (html.gic-ls is set by bridge.js from the REAL window size): one slim row, so the board is not pushed off the bottom of the screen */
html.gic-ls:not(.gic-fs) .gic-head{flex-wrap:nowrap;align-items:center;padding:4px 8px;margin-bottom:4px}
html.gic-ls:not(.gic-fs) .gic-head-id{flex:1 1 auto;padding-right:0;min-height:0}
html.gic-ls:not(.gic-fs) .gic-head-text p{display:none}
html.gic-ls:not(.gic-fs) .gic-head-text h1{font-size:1.05rem}
html.gic-ls:not(.gic-fs) .gic-head .mark{width:30px;height:30px;font-size:.9rem}
html.gic-ls:not(.gic-fs) .gic-head-right{flex:0 1 auto;max-width:62%;flex-wrap:nowrap}
html.gic-ls:not(.gic-fs) .gic-head [data-gic=fs]{position:static;order:-1;min-height:40px}
html.gic-ls:not(.gic-fs) .app{padding-top:2px}
html.gic-ls:not(.gic-fs) .gic-head .rank-badge{white-space:nowrap}

/* LIVE (student): the same full-area intro / result cards as full screen, below the thin live bar, so a card is never squeezed into a short board */
html.gic-live.gic-fs :is(.sl-end,.qr-end,.pq-overlay):not([hidden]){position:fixed;top:46px;right:0;bottom:0;left:0;z-index:150;border-radius:0;display:flex;align-items:center;justify-content:center;overflow:auto}
html.gic-live.gic-fs :is(.sl-end,.qr-end,.pq-overlay)>*{margin:auto;flex:none}

/* TOP SCORES: one look for every game (name left, score right, never touching; the number is part of the text, so no list marker) */
ol.top-list{margin:10px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px;font-weight:700;font-size:.88rem}
ol.top-list>li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;list-style:none;color:var(--soft)}
ol.top-list>li::marker{content:''}
ol.top-list>li>span{min-width:0;overflow-wrap:anywhere}
ol.top-list>li>b{flex:none;font-variant-numeric:tabular-nums;color:var(--text)}
ol.top-list>li:nth-child(1)>b{color:var(--gold)}

/* NO LONG-PRESS MENU (assets/js/nomenu.js adds html.gic-nomenu): no copy / save-image callout or text-selection handles on the playing surface */
html.gic-nomenu{-webkit-touch-callout:none}
html.gic-nomenu :is(img,canvas,svg,button,label,summary,[role=button],[class*=board],[class*=tile],[class*=bub],[class*=card],[class*=cell],[class*=slot],[class*=stage]):not(input):not(textarea){-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
html.gic-nomenu img{-webkit-user-drag:none}

/* Admin > Games > Capture from the game: the game is shown full screen at 1280x800 with every control hidden, so the picture holds only the game */
html.gic-cap .gic-fs-exit,html.gic-cap #gicFsExit,html.gic-cap .gic-menu-btn,html.gic-cap .gic-more,html.gic-cap .gic-head-right,html.gic-cap .gic-hud,html.gic-cap .gic-toast,html.gic-cap .gic-toasts,html.gic-cap .reopen-tab{display:none!important}
html.gic-cap,html.gic-cap body{overflow:hidden}
/* ======================================================================================================================
   SHARED PHONE LAYOUT (1.42.0) — html.gic-phone is set by bridge.js when play.php says the game fills a phone-sized screen.
   One look for every converted game:
     - the page fills the screen; the game header is a slim sticky bar (icon, title, "…" menu);
     - panels sit edge to edge with small gaps;
     - start / question / result windows are .ph-sheet (the layer) + .ph-card (the card): they cover everything under the header,
       full width, and never grow past the screen (the question sheet hugs the bottom: .ph-sheet.dim).
   Rollback per game or for all games: Admin > Phone and full-screen layout. Nothing here applies unless html.gic-phone is on.
   ====================================================================================================================== */
:root{--ph-top:0px;--ph-btn:36px}
.gic-more,.gic-ph-only,.gic-sm-only{display:none}
/* 1.203.75: one menu icon everywhere (three lines); the "•••" glyph is retired */
.gic-more.btn span{display:block;width:18px;height:13px;background:linear-gradient(currentColor,currentColor) 0 0/100% 2.5px no-repeat,linear-gradient(currentColor,currentColor) 0 50%/100% 2.5px no-repeat,linear-gradient(currentColor,currentColor) 0 100%/100% 2.5px no-repeat;border-radius:2px}
html.gic-phone,html.gic-phone body.embed{height:100%}
html.gic-phone body.embed{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:none;font-size:14px}
html.gic-phone body .app{max-width:none;padding:0 4px 16px}
html.gic-phone body .layout{display:flex;flex-direction:column;gap:6px}
html.gic-phone body .panel{border-width:2px;border-radius:12px;box-shadow:none;padding:8px}
html.gic-phone body .stage-head{margin-bottom:6px;gap:6px}
html.gic-phone .gic-fit-box{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start}
html.gic-phone .gic-fit-box .stage-head{flex:none}
html.gic-phone body input[type=text],html.gic-phone body input[type=number],html.gic-phone body select,html.gic-phone body textarea{font-size:16px}   /* 16px stops iPhone Safari zooming the page when a box is tapped */
/* NO header bar (1.42.1): the screen belongs to the game. The game's title and picture are dropped; the "..." button floats in the top right
   corner (over the game's own top row, which keeps a gap for it) and opens the same list of actions as before. */
html.gic-phone:not(.gic-fs):not(.gic-x) body header.gic-head{position:static;height:0;min-height:0;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:none;overflow:visible;display:block}
html.gic-phone body .gic-head-id{display:none}
html.gic-phone body .gic-head-right{position:fixed;top:8px;right:8px;z-index:90;width:auto;gap:0}
html.gic-phone body .gic-more{display:inline-flex;width:var(--ph-btn);height:var(--ph-btn);min-width:var(--ph-btn);min-height:0;padding:0;justify-content:center;align-items:center;font-size:1rem}
html.gic-phone body .gic-ph-only{display:inline-flex}
html.gic-phone body .gic-head .rank-badge,html.gic-phone body .gic-head [data-gic=fs]{display:none}
html.gic-phone body .gic-head-actions{display:none;position:fixed;left:6px;right:6px;top:calc(var(--ph-btn) + 8px);width:auto;max-width:none;max-height:calc(100% - var(--ph-btn) - 16px);flex-wrap:wrap;justify-content:flex-start;gap:6px;padding:8px;overflow-y:auto;background:var(--panel);border:3px solid var(--hard);border-radius:12px;box-shadow:var(--shadow);z-index:91}
html.gic-phone body .gic-head.more-open .gic-head-actions{display:flex}
html.gic-phone body .gic-head-actions .btn{flex:0 0 auto;min-height:40px}
html.gic-phone body .gic-head-actions .hide-xs{display:inline}
/* the game's own top row: stats on the left, a few small icon buttons, and a gap on the right for the "..." button */
html.gic-phone body .stage-head{flex-wrap:nowrap;align-items:center;min-height:var(--ph-btn);padding-right:calc(var(--ph-btn) + 6px)}
html.gic-phone body .stage-head>.row{flex-wrap:nowrap;gap:6px;min-width:0}
html.gic-phone body .stage-head>.row:first-child{flex:1 1 auto;flex-wrap:wrap;row-gap:4px}
html.gic-phone body .stage-head>.row:last-child{flex:none}
html.gic-phone body .stage-head .status{padding:3px 9px;font-size:.8rem;white-space:nowrap}
html.gic-phone body .stage-head .btn{width:var(--ph-btn);height:var(--ph-btn);min-width:0;min-height:0;padding:0;justify-content:center;gap:0}
html.gic-phone body .stage-head .btn>span,html.gic-phone body .stage-head .btn .hide-xs{display:none}
/* the shared window: .ph-sheet is the layer, .ph-card the card on it */
html.gic-phone body .ph-sheet{position:fixed;left:0;right:0;bottom:0;top:var(--ph-top);inset-inline:0;z-index:55;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;margin:0;padding:0;border:0;border-radius:0;background:var(--bg);overflow:hidden;backdrop-filter:none;-webkit-backdrop-filter:none}
html.gic-phone body .ph-sheet[hidden]{display:none}
html.gic-phone body .ph-sheet.dim{background:rgba(2,6,23,.62);justify-content:flex-end}
html.gic-phone body .ph-card{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:10px;width:100%;max-width:none;min-height:0;margin:0;padding:12px 12px 14px;flex:1 1 auto;border:0;border-radius:0;box-shadow:none;background:var(--panel);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;animation:none}
html.gic-phone body .ph-sheet.dim .ph-card{flex:0 1 auto;max-height:100%;border-top:3px solid var(--sky);border-radius:16px 16px 0 0;animation:phup .2s ease-out}
@keyframes phup{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
html.gic-phone body .ph-card h2{font-size:1.25rem;padding:0 calc(var(--ph-btn) + 4px)}
@media(prefers-reduced-motion:reduce){html.gic-phone body .ph-sheet.dim .ph-card{animation:none}}
/* start / result cards of the older games (1.43.0): on a phone they are a window over the whole screen, not a card squeezed inside the board
   (which used to make the board grow and its game shrink). bridge.js scales the card to fill the window. */
html.gic-phone body :is(.sl-end,.qr-end,.pq-overlay,.bgm-end){position:fixed;left:0;right:0;bottom:0;top:var(--ph-top);inset-inline:0;z-index:55;border-radius:0;margin:0;display:grid;place-items:center;padding:10px;overflow:auto;background:rgba(8,12,24,.8)}
html.gic-phone body :is(.sl-end,.qr-end,.pq-overlay,.bgm-end)[hidden]{display:none}
/* a phone held sideways: the screen is short, so bars and gaps get slimmer still */
@media (orientation:landscape) and (max-height:520px){
  :root{--ph-btn:32px}
  html.gic-phone body .app{padding-bottom:4px}
  html.gic-phone body .stage-head{margin-bottom:4px}
  html.gic-phone body .stage-head .status{padding:2px 8px}
  html.gic-phone body .panel{padding:4px}
}
/* a wide screen (a tablet held sideways, a phone sideways, a big monitor): windows are a centred card, not a stretched strip */
@media (min-width:700px){
  html.gic-phone body .ph-sheet:not(.dim){align-items:center;justify-content:center}
  html.gic-phone body .ph-sheet:not(.dim) .ph-card{flex:0 1 auto;width:min(620px,92%);max-height:calc(100% - 16px);border:3px solid var(--hard);border-radius:18px;box-shadow:var(--shadow)}
  html.gic-phone body .ph-sheet.dim .ph-card{width:min(760px,100%);align-self:center}
}

/* ======================================================================================================================
   EDIT ON A PHONE (1.43.28): there is no special edit layout. "..." > Edit leaves the phone layout (play.php, PHONE_OFF) and the normal scrolling page
   comes back: the game window at the top, the options below, the browser handles the keyboard. "Play full screen" (play.php) brings the phone layout back.
   ====================================================================================================================== */
html.gic-noedit [data-gic=mode-edit],html[data-lock] [data-gic=mode-edit]{display:none!important}
html:not(.gic-noedit):not([data-lock]) [data-gic=sitemenu]{display:none!important}   /* Edit already is the way to the website page */

/* ======================================================================================================================
   ONE THIN LOOK FOR EVERY PHONE GAME (1.43.17)
   Same control height everywhere (--ph-btn), hairline outlines (--ph-bw), a tiny shadow, small corners. The "•••" button is the same
   size and style as the game's own top-row buttons so it reads as part of the same bar. Safari rounds odd border widths per device pixel,
   so the outline is 1.5px and always the same colour, never a thick dark line.
   ====================================================================================================================== */
:root{--ph-btn:34px;--ph-bw:1.5px;--ph-rad:9px;--ph-line:rgba(148,163,184,.45);--ph-shadow:0 1px 0 rgba(0,0,0,.28)}
@media (orientation:landscape) and (max-height:520px){:root{--ph-btn:30px}}
html.gic-phone body :is(.btn,.status,.segmented,.panel,.gic-more,input[type=text],input[type=number],input[type=search],select,textarea,.gic-head-actions)
  {border-width:var(--ph-bw)!important;border-color:var(--hard)!important;border-color:var(--ph-line)!important;box-shadow:var(--ph-shadow)!important}
html.gic-phone body :is(.btn,.status,.segmented,.gic-more){border-radius:var(--ph-rad)!important}
html.gic-phone body .panel{border-radius:12px!important;box-shadow:none!important}
html.gic-phone body .btn:active:not(:disabled){transform:none;filter:brightness(1.12)}
html.gic-phone body .btn.accent,html.gic-phone body .btn.gold,html.gic-phone body .btn.danger{border-color:transparent!important}
html.gic-phone body .segmented{overflow:hidden}
html.gic-phone body .segmented button{border-right-width:var(--ph-bw)!important;border-right-color:var(--ph-line)!important}
html.gic-phone body .segmented button:last-child{border-right-width:0!important}
/* chips (points, level, timer…) and buttons in a game's top row: one height, one baseline */
html.gic-phone body .stage-head{align-items:center}
html.gic-phone body .stage-head .status,html.gic-phone body .stage-head .btn,html.gic-phone body .gic-more{box-sizing:border-box;height:var(--ph-btn);min-height:var(--ph-btn);display:inline-flex;align-items:center;justify-content:center;line-height:1;padding-top:0;padding-bottom:0}
html.gic-phone body .stage-head .status{padding-left:9px;padding-right:9px;font-size:.8rem;gap:4px;white-space:nowrap}
html.gic-phone body .stage-head .btn{width:var(--ph-btn);min-width:var(--ph-btn);padding:0}
html.gic-phone body .gic-more{width:var(--ph-btn);min-width:var(--ph-btn);padding:0;font-size:.9rem}
html.gic-phone body .gic-more span{font-weight:800;letter-spacing:0;line-height:1}
/* THE MENU BUTTON (1.67.0): just three lines, no box. Dark lines with a soft white glow read on light and mid backgrounds, and the glow
   keeps them visible on dark ones; a game on a dark scene sets --more-fg:#f8fafc and --more-halo:rgba(0,0,0,.75) on <html>. */
html.gic-phone:not([data-theme=light]),html.gic-stage.gic-fs:not([data-theme=light]){--more-fg:#f8fafc;--more-halo:rgba(0,0,0,.75)}
html.gic-phone body .gic-more.btn,html.gic-stage.gic-fs .gic-menu-btn{background:none!important;border:0!important;box-shadow:none!important;color:var(--more-fg,#0f172a)!important;opacity:1!important;text-shadow:none}
html.gic-phone body .gic-more.btn span{display:block;font-size:0!important;width:20px;height:14px;background:linear-gradient(currentColor,currentColor) 0 0/100% 2.5px no-repeat,linear-gradient(currentColor,currentColor) 0 50%/100% 2.5px no-repeat,linear-gradient(currentColor,currentColor) 0 100%/100% 2.5px no-repeat;border-radius:2px;filter:drop-shadow(0 0 2px var(--more-halo,rgba(255,255,255,.9))) drop-shadow(0 0 1px var(--more-halo,rgba(255,255,255,.9)))}
html.gic-stage.gic-fs .gic-menu-btn:active,html.gic-phone body .gic-more.btn:active{transform:scale(.92)}
/* the "•••" list: a small tidy grid hanging from the button, not a tall bar of fat buttons */
html.gic-phone body .gic-head-actions{display:none;position:fixed;left:auto;right:6px;top:calc(var(--ph-btn) + 12px);width:min(320px,calc(100% - 12px));max-width:none;max-height:calc(100% - var(--ph-btn) - 18px);
  grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;padding:6px;overflow-y:auto;overscroll-behavior:contain;background:var(--panel);border-radius:12px!important;box-shadow:0 6px 18px rgba(0,0,0,.5)!important}
html.gic-phone body .gic-head.more-open .gic-head-actions{display:grid}
html.gic-phone body .gic-head-actions .btn{grid-column:auto;width:100%;min-width:0;min-height:0;height:32px;padding:0 8px;gap:6px;font-size:.78rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;justify-content:flex-start;box-shadow:none!important}
html.gic-phone body .gic-head-actions .btn i{width:1.1em;text-align:center;flex:none;font-size:.85rem}
@media (orientation:landscape) and (max-height:520px){
  html.gic-phone body .gic-head-actions{top:6px;right:calc(var(--ph-btn) + 14px);width:min(300px,calc(100% - var(--ph-btn) - 24px));max-height:calc(100% - 12px)}
  html.gic-phone body .gic-head-actions .btn{height:30px}
}
/* the game's own boards, cards, tiles and list items: the same hairline outline and tiny shadow (their own styles use 2-7px borders) */
html.gic-phone body :is(#board,.cq-turn,.cq-pl,.fc-item,.fc-thumb,.link-btn,.fc-card,.fc-word,.gic-wide,.dd-board,.dd-clue,.dd-avatar,.dd-bub,.dd-pick,.dd-tab,.dd-chip,.mm-face,.ww-view,.ww-score,.ww-prompt,.ww-hintpic,.lb-board,.lb-bub,.bh-board,.bh-panel,.bh-hintpic,.bh-slot,.bh-key,.qr-turn,.qr-turn-pc,.qr-pl,.qr-pc,.sb-board,.sb-line,.sb-bank,.sb-tile)
  {border-width:var(--ph-bw)!important;box-shadow:var(--ph-shadow)!important}
html.gic-phone body :is(.cq-turn,.cq-pl,.fc-item,.fc-thumb,.fc-card,.dd-board,.dd-clue,.dd-avatar,.dd-bub,.dd-pick,.dd-tab,.dd-chip,.ww-view,.ww-score,.ww-prompt,.ww-hintpic,.lb-board,.bh-board,.bh-panel,.bh-hintpic,.qr-turn,.qr-turn-pc,.qr-pl,.qr-pc,.sb-board,.sb-line,.sb-bank,.sb-tile,.gic-wide)
  {border-color:var(--hard)!important;border-color:var(--ph-line)!important}
html.gic-phone body :is(.hint){border-left-width:3px!important}
html.gic-phone body .segmented>button{border-top-width:0!important;border-bottom-width:0!important;border-left-width:0!important;box-shadow:none!important}
/* Sound and Restart are in the "..." menu on a phone (1.43.18), not in the game's top row or side column */
html.gic-phone body .gic-ph-only[hidden]{display:none}
html.gic-phone body .stage-head :is(#restartBtn,#muteBtn,#gicSnd,.gic-snd,#camBtn){display:none!important}

/* 1.43.42: ONE menu look for every game and tool, on a phone's full-screen layout and on the normal small-screen page.
   Two equal columns of the same-height buttons (icon column aligned, text left); a lone button in a row stretches to the full width, so it never looks half empty.
   Order: Edit / How to play, Sound, Restart / Like, Copy link, Report / Save (full width) / Use or Host live / All games, Website version.
   There is no Timer in this menu on a small screen. */
html.gic-phone body .gic-head.more-open .gic-head-actions{display:flex}
html.gic-phone body .gic-head-actions{flex-wrap:wrap;align-content:flex-start;gap:6px;padding:8px}
html.gic-phone body .gic-head-actions .btn.btn.btn{flex:1 1 calc(50% - 3px);width:auto;order:6}
html.gic-phone body .gic-head-actions .btn.btn[data-gic=mode-edit]{flex:1 1 100%;order:1}
html.gic-phone body .gic-head-actions [data-gic=howto]{order:2}
html.gic-phone body .gic-head-actions [data-gic=proxy]{order:3}
html.gic-phone body .gic-head-actions [data-gic=proxy][hidden]{display:none}
html.gic-phone body .gic-head-actions [data-gic=like],html.gic-phone body .gic-head-actions [data-gic=copy],html.gic-phone body .gic-head-actions [data-gic=report]{order:5}
html.gic-phone body .gic-head-actions [data-gic=use],html.gic-phone body .gic-head-actions [data-gic=live]{order:7}
html.gic-phone body .gic-head-actions .btn.btn.accent{order:8;flex:1 1 100%}
html.gic-phone body .gic-head-actions a.gic-sm-only,html.gic-phone body .gic-head-actions [data-gic=sitemenu]{order:9}
html.gic-phone body .gic-sm-only{display:inline-flex}

/* 1.43.24: nothing sits under a phone game to scroll to (the options panel and the top-scores box are on the normal page: "..." > Edit) */
html.gic-phone body .gic-set,html.gic-phone body #topBox{display:none!important}

/* ==========================================================================
   SLIMMER ON SMALL SCREENS (1.43.28): the normal (editing) page on a phone.
   Thinner lines, small shadows, tighter spacing. The full-screen phone layout (html.gic-phone) has its own thin look above, and desktop is untouched. */
@media (max-width:600px),(max-height:520px) and (max-width:932px){
  html:not(.gic-phone):not(.gic-fs){--shadow:0 2px 0 var(--hard);--shadow-sm:0 1px 0 var(--hard);--r:10px;--radius:10px}
  html:not(.gic-phone):not(.gic-fs) :is(.panel,.gic-box,.gic-set,.gic-pk-box,.gic-head,.segmented,.gic-toast,.gic-tab,.gic-tabs,.card,.stage-head,.gic-editor){border-width:1.5px}
  html:not(.gic-phone):not(.gic-fs) :is(.btn,input[type=text],input[type=number],input[type=search],input[type=email],select,textarea,.chip,.seg,.segmented button){border-width:1.5px;border-radius:9px}
  html:not(.gic-phone):not(.gic-fs) :is(.panel,.gic-box){padding:12px;margin-bottom:12px}
  html:not(.gic-phone):not(.gic-fs) .btn{padding:8px 12px;min-height:38px}
  html:not(.gic-phone):not(.gic-fs) .btn.sm{padding:5px 10px;min-height:32px}
  html:not(.gic-phone):not(.gic-fs) :is(input[type=text],input[type=number],input[type=search],input[type=email],select,textarea){padding:8px 10px;font-size:16px}
  html:not(.gic-phone):not(.gic-fs) .gic-set{padding:10px}
  html:not(.gic-phone):not(.gic-fs) .gic-set :is(.row,.field,.grp){margin-bottom:8px}
}

/* ---- 1.43.29: the normal (editing) page on a phone / small tablet: the whole page scrolls as ONE piece ----
   The long lists inside the options box (items, cards, questions...) are not their own little scroll areas: they grow, and the page scrolls. */
@media (max-width:900px),(max-height:520px) and (max-width:932px){
  html:not(.gic-phone):not(.gic-fs) :is(.fc-list,.cq-items,.ed-items,.pk-list,.sp-list,.sp-scroll,.sp-hist,.chips,.rq-readtext,.rs-tapview){max-height:none;overflow:visible}
}
/* One slim row instead of the big game header (Word Wings so far, phone_slim_head()): icon and name, "..." on the right, then "Play full screen" */
.gic-slim-play{display:none}
@media (max-width:900px),(max-height:520px) and (max-width:932px){
  html:not(.gic-phone):not(.gic-fs) .gic-head-slim{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:0;margin:0 0 8px;background:none;border:0;box-shadow:none}
  html:not(.gic-phone):not(.gic-fs) .gic-head-slim .gic-head-id{flex:1 1 0;min-width:0;padding:0;min-height:0;gap:8px;align-items:center}
  html:not(.gic-phone):not(.gic-fs) .gic-head-slim .mark{width:30px;height:30px;font-size:14px;border-width:1.5px;border-radius:8px;margin:0}
  html:not(.gic-phone):not(.gic-fs) .gic-head-slim .gic-head-text h1{font-size:1.05rem;white-space:nowrap;display:block;overflow:hidden;text-overflow:ellipsis}
  html:not(.gic-phone):not(.gic-fs) .gic-head-slim .gic-head-text p{display:none}
  /* "Ranked run" / "Practice" becomes a small icon next to the name (its words are in the tooltip) */
  html:not(.gic-phone):not(.gic-fs) .gic-head-slim .gic-head-id{flex:0 1 auto;min-width:0}
  html:not(.gic-phone):not(.gic-fs) .gic-head-slim .gic-head-text{min-width:0}
  html:not(.gic-phone):not(.gic-fs) .gic-head-slim .gic-head-right{flex:1 0 auto;min-width:0;flex-wrap:nowrap;justify-content:flex-end}   /* 1.43.35: Fullscreen and "..." always sit side by side; a long name is cut with ... instead of wrapping the buttons */
  html:not(.gic-phone):not(.gic-fs) .gic-head-slim .rank-badge{order:-1;margin-right:auto;flex:0 0 auto;width:26px;height:26px;padding:0;gap:0;justify-content:center;border-width:1.5px;font-size:0;overflow:hidden}
  html:not(.gic-phone):not(.gic-fs) .gic-head-slim .rank-badge:not(:empty){flex:0 0 26px}
  html:not(.gic-phone):not(.gic-fs) .gic-head-slim .rank-badge i{font-size:.8rem;margin:0}
  html:not(.gic-phone):not(.gic-fs) .gic-head-slim .gic-head-right{gap:6px}
  html:not(.gic-phone):not(.gic-fs) .gic-head-slim:has(.gic-slim-play) [data-gic=fs]{display:none}
  html:not(.gic-phone):not(.gic-fs) .gic-head-slim .gic-head-right{width:auto;position:static}
  html:not(.gic-phone):not(.gic-fs) .gic-head-slim .gic-more{display:inline-flex;width:34px;height:34px;min-width:34px;min-height:0;padding:0;justify-content:center;align-items:center;font-size:.9rem}
  html:not(.gic-phone):not(.gic-fs) .gic-head-slim .gic-head-actions{display:none;position:absolute;right:0;top:38px;z-index:90;width:min(340px,100%);flex-wrap:wrap;gap:5px;padding:6px;background:var(--panel);border:1.5px solid var(--hard);border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.5)}
  html:not(.gic-phone):not(.gic-fs) .gic-head-slim.more-open .gic-head-actions{display:flex}
  html:not(.gic-phone):not(.gic-fs) .gic-head-slim .gic-head-actions .btn{flex:1 1 calc(50% - 3px);width:auto;min-width:0;min-height:0;height:34px;padding:0 8px;gap:6px;font-size:.8rem;justify-content:flex-start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:none}
  html:not(.gic-phone):not(.gic-fs) .gic-head-slim .gic-head-actions .hide-xs{display:inline}
  /* 1.43.42: same order and look as the phone layout's menu; no Timer here; "All games" is always present */
  html:not(.gic-phone):not(.gic-fs) .gic-head-slim .gic-head-actions .gic-sm-only{display:inline-flex}
  html:not(.gic-phone):not(.gic-fs) .gic-head-slim .gic-head-actions .btn.btn.btn{flex:1 1 calc(50% - 3px);order:6;font-weight:700}
  html:not(.gic-phone):not(.gic-fs) .gic-head-slim .gic-head-actions .btn i:first-child{width:1.1em;text-align:center;flex:none}
  html:not(.gic-phone):not(.gic-fs) .gic-head-slim .gic-head-actions [data-gic=howto]{order:2}
  html:not(.gic-phone):not(.gic-fs) .gic-head-slim .gic-head-actions :is([data-gic=like],[data-gic=copy],[data-gic=report]){order:5}
  html:not(.gic-phone):not(.gic-fs) .gic-head-slim .gic-head-actions .btn.btn.accent{order:8;flex:1 1 100%}
  html:not(.gic-phone):not(.gic-fs) .gic-head-slim .gic-head-actions :is([data-gic=use],[data-gic=live]){order:7}
  html:not(.gic-phone):not(.gic-fs) .gic-head-slim .gic-head-actions a.gic-sm-only{order:9}
  html:not(.gic-phone):not(.gic-fs) .gic-head-slim:not(:has(.gic-slim-play)) [data-gic=fs]{position:static;order:-1;background:var(--panel2);color:var(--text);display:inline-flex;width:34px;height:34px;min-width:34px;min-height:0;padding:0;justify-content:center;align-items:center}
  html:not(.gic-phone):not(.gic-fs) .gic-head-slim:not(:has(.gic-slim-play)) [data-gic=fs] .hide-xs{display:none}
  /* 1.43.35: "Practice" / "Presenter mode" is a line at the top of the "..." menu (bridge.js moves the badge there); a ranked run keeps its little icon by the name */
  html:not(.gic-phone):not(.gic-fs) .gic-head-slim .gic-head-actions .rank-badge.in-menu{order:-1;flex:1 1 100%;width:auto;height:auto;min-height:30px;padding:4px 10px;gap:8px;justify-content:flex-start;border-radius:9px;border-width:1.5px;font-size:.78rem;white-space:normal;overflow:visible;box-shadow:none;margin:0}
  html:not(.gic-phone):not(.gic-fs) .gic-head-slim .gic-head-actions .rank-badge.in-menu i{font-size:.85rem}
  html:not(.gic-phone):not(.gic-fs) .gic-head-slim .gic-slim-play{display:flex;flex:1 1 100%;min-height:42px;justify-content:center;align-items:center;gap:8px;font-size:.95rem}
}
/* Start / setup / result card on the normal page: the board and the card share one grid cell, so the cell is as tall as the taller of the two and the card is never cut off (Quiz Race, Snakes & Ladders, Connect Quiz) */
@media (max-width:900px),(max-height:520px) and (max-width:932px){
  html:not(.gic-phone):not(.gic-fs) :is(.qr-boardcol,.sl-boardcol,.cq-boardcol).has-ov{display:grid;min-height:0}
  html:not(.gic-phone):not(.gic-fs) :is(.qr-boardcol,.sl-boardcol,.cq-boardcol).has-ov>:is([class$=-boardwrap],#overlay){grid-area:1/1;min-width:0}
  html:not(.gic-phone):not(.gic-fs) :is(.qr-boardcol,.sl-boardcol,.cq-boardcol).has-ov>#overlay{position:relative;inset:auto;overflow:visible}
}


/* Share window (bridge.js sharePanel): a link and social buttons, nothing about classes */
.gic-share{display:flex;flex-direction:column;gap:12px;text-align:left}
.gic-share-note{margin:0;color:var(--soft)}.gic-share-sub{margin:0;color:var(--muted);font-size:.875rem}
.gic-share-link{display:flex;gap:8px}.gic-share-link input{flex:1;min-width:0;background:var(--panel2);color:var(--text);border:2px solid var(--hard);border-radius:10px;padding:8px 10px;font:inherit;font-size:.875rem}
.gic-share-soc{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}.gic-share-soc .btn,.gic-share>.btn{justify-content:center}
@media(max-width:380px){.gic-share-link{flex-direction:column}}