/* GOC Games kit (t8624): shared look for the Games room and its games. Original art only. */
@font-face{font-family:"AH";font-weight:400;font-display:swap;src:url(../fonts/AtkinsonHyperlegible-Regular-latin.woff2) format("woff2")}
@font-face{font-family:"AH";font-weight:700;font-display:swap;src:url(../fonts/AtkinsonHyperlegible-Bold-latin.woff2) format("woff2")}
:root{--ink:#fff4dc;--ink2:#e9dcc0;--gold:#f5c542;--gold2:#ffe58a;--bronze:#b07a3c;--deep:#120a24;--plum:#2a1545;--plum2:#3b1f63;--line:rgba(255,229,138,.35);--ok:#5fe08a;--bad:#ff6b6b;
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;height:100%;background:var(--deep);color:var(--ink);font-family:"AH","Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:16px;-webkit-text-size-adjust:100%;overscroll-behavior:none}
body{min-height:100dvh;overflow:hidden;touch-action:manipulation;user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit}
.gk-bg{position:fixed;inset:0;z-index:0;background:#0c0718 center/cover no-repeat;pointer-events:none}
.gk-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 45%,rgba(18,10,36,.25),rgba(12,6,24,.82) 75%)}
.gk-app{position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;padding:calc(var(--sat) + 6px) calc(var(--sar) + 10px) 0 calc(var(--sal) + 10px)}
.gk-screen{flex:1;min-height:0;display:flex;flex-direction:column}
.gk-screen[hidden]{display:none!important}
/* top bar */
.gk-bar{flex:none;display:flex;align-items:center;gap:8px;min-height:52px}
.gk-bar h1,.gk-bar h2{flex:1;min-width:0;margin:0;text-align:center;font-size:19px;font-weight:700;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--gold2);text-shadow:0 2px 0 rgba(0,0,0,.5)}
.gk-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:46px;min-width:46px;padding:0 16px;border-radius:14px;border:1.5px solid var(--line);background:linear-gradient(180deg,#43246e,#2a1545);color:var(--ink);font-size:16px;font-weight:700;text-decoration:none;cursor:pointer;box-shadow:0 3px 0 rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.12);transition:filter .08s,box-shadow .08s}
/* tfPN9: do not translateY on :active — that moves the hit box between pointerdown and pointerup and drops the click on Mac Safari / TestMu. */
.gk-btn:active{filter:brightness(.92);box-shadow:0 1px 0 rgba(0,0,0,.45)}
.gk-btn.icon{padding:0;width:46px;font-size:21px}
.gk-btn.gold{background:linear-gradient(180deg,#ffe58a,#f5c542 55%,#d9a52a);color:#2a1a00;border-color:#fff1b5;box-shadow:0 3px 0 #8a6414}
.gk-btn.big{min-height:56px;font-size:18px;padding:0 22px;border-radius:18px}
.gk-btn[disabled]{opacity:.45;pointer-events:none}
.gk-btn:focus-visible,.gk-tile:focus-visible{outline:3px solid #8fd3ff;outline-offset:2px}
.gk-chip{display:inline-flex;align-items:center;gap:5px;min-height:34px;padding:0 11px;border-radius:999px;background:rgba(0,0,0,.42);border:1px solid var(--line);font-size:15px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.gk-chip b{color:var(--gold2)}
/* notices bar */
.gk-notices{flex:none;position:relative;z-index:56;margin:0 calc(-1*(var(--sar) + 10px)) 0 calc(-1*(var(--sal) + 10px));padding:6px 12px calc(var(--sab) + 6px);text-align:center;font-size:13px;line-height:1.3;color:#f3e6c8;background:rgba(8,4,16,.88);border-top:1px solid rgba(255,229,138,.22)}
/* sheets */
.gk-sheet{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:calc(var(--sat) + 62px) 14px calc(var(--sab) + 44px);background:transparent}
/* tfPN8: Safari/WebKit eats the first click on a newly shown layer that itself has
   -webkit-backdrop-filter (Mac Safari, 2 of 3, also seen on tfPN5). Put the blur on a
   non-interactive ::before so the card and its buttons are not inside the filtered element.
   pointer-events stays auto on the card immediately — no fade of hit-testing. */
.gk-sheet::before{content:"";position:absolute;inset:0;background:rgba(6,3,14,.72);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);pointer-events:none;z-index:0}
.gk-sheet[hidden]{display:none}
.gk-card{position:relative;z-index:1;pointer-events:auto;width:min(440px,100%);max-height:100%;overflow:auto;-webkit-overflow-scrolling:touch;padding:20px 18px 18px;border-radius:22px;background:linear-gradient(180deg,#3a1e5e,#1f0f38);border:2px solid rgba(255,229,138,.5);box-shadow:0 20px 60px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.12);animation:gkPop .18s cubic-bezier(.2,1.4,.4,1)}
.gk-card h2{margin:0 0 10px;font-size:23px;color:var(--gold2);text-align:center}
.gk-card h3{margin:16px 0 6px;font-size:17px;color:var(--gold2)}
.gk-card p,.gk-card li{font-size:16px;line-height:1.45;color:var(--ink2);margin:6px 0}
.gk-card ul{padding-left:20px;margin:6px 0}
.gk-card .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.gk-card .row .gk-btn{flex:1 1 130px}
@keyframes gkPop{from{transform:scale(.97)}to{transform:none}}
.gk-set{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:54px;border-bottom:1px solid rgba(255,229,138,.16);font-size:17px}
.gk-set:last-of-type{border-bottom:0}
.gk-set small{display:block;font-size:14px;color:#cdbfa3}
.gk-sw{position:relative;flex:none;width:58px;height:34px;border-radius:999px;border:1.5px solid var(--line);background:#24123d;cursor:pointer;padding:0}
.gk-sw::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#cdbfa3;transition:transform .18s,background .18s}
.gk-sw[aria-checked="true"]{background:#2f7a4c;border-color:#8fe3ad}
.gk-sw[aria-checked="true"]::after{transform:translateX(24px);background:#fff}
.gk-seg{display:flex;gap:6px;flex-wrap:wrap}
.gk-seg button{flex:1 1 0;min-height:46px;min-width:64px;border-radius:12px;border:1.5px solid var(--line);background:#24123d;font-weight:700;font-size:15px;cursor:pointer;padding:0 8px}
.gk-seg button[aria-pressed="true"]{background:linear-gradient(180deg,#ffe58a,#f5c542);color:#2a1a00;border-color:#fff1b5}
/* toast + dj speech */
.gk-toast{position:fixed;left:50%;top:calc(var(--sat) + 64px);z-index:60;transform:translate(-50%,-20px);opacity:0;pointer-events:none;max-width:min(92vw,420px);padding:10px 16px;border-radius:14px;background:rgba(20,10,40,.94);border:1.5px solid var(--gold);color:var(--ink);font-weight:700;font-size:16px;text-align:center;transition:opacity .2s,transform .2s}
.gk-toast.on{opacity:1;transform:translate(-50%,0)}
/* confetti */
.gk-fx{position:fixed;inset:0;z-index:70;pointer-events:none;overflow:hidden}
.gk-fx i{position:absolute;top:-20px;width:10px;height:16px;border-radius:2px;animation:gkFall linear forwards}
@keyframes gkFall{to{transform:translate3d(var(--dx),110vh,0) rotate(var(--r));opacity:.9}}
/* title card */
.gk-title{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:8px 0 14px}
.gk-logo{margin:0;font-size:clamp(34px,9.5vw,52px);line-height:1;font-weight:700;text-align:center;letter-spacing:.01em;background:linear-gradient(180deg,#fff6c9,#ffd560 45%,#c98b1f);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 3px 0 #3a1460) drop-shadow(0 8px 18px rgba(0,0,0,.6))}
.gk-host{font-size:16px;color:#e9dcc0;text-align:center;margin:0}
.gk-host b{color:var(--gold2)}
.gk-hero{width:min(58vw,250px);max-height:30vh;object-fit:contain;filter:drop-shadow(0 12px 26px rgba(0,0,0,.7));animation:gkBob 3.2s ease-in-out infinite}
@keyframes gkBob{50%{transform:translateY(-6px) rotate(-1deg)}}
.gk-panel{width:min(440px,100%);padding:14px;border-radius:20px;background:rgba(20,10,40,.78);border:1.5px solid rgba(255,229,138,.32);box-shadow:0 12px 30px rgba(0,0,0,.5)}
.gk-panel .lbl{font-size:14px;font-weight:700;color:#d9c9a6;text-transform:uppercase;letter-spacing:.08em;margin:2px 2px 8px}
.gk-panel+.gk-panel{margin-top:0}
.gk-links{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
@media (orientation:landscape) and (max-height:520px){
  .gk-title{flex-direction:row;flex-wrap:wrap;align-content:center;gap:10px 18px}
  .gk-title .gk-brand{flex:0 1 300px;display:flex;flex-direction:column;align-items:center;gap:6px}
  .gk-hero{max-height:36vh;width:auto}
  .gk-logo{font-size:38px}
  .gk-title .gk-panel{flex:0 1 400px}
  .gk-bar{min-height:48px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
body.calm *,body.calm *::before,body.calm *::after{animation-duration:.01ms!important;animation-iteration-count:1!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gk-set.vol{flex-wrap:wrap}
.gk-vol{-webkit-appearance:none;appearance:none;flex:1 1 160px;min-width:140px;height:44px;background:transparent;cursor:pointer}
.gk-vol::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:linear-gradient(90deg,#8a4ff0,#f5c542)}
.gk-vol::-moz-range-track{height:8px;border-radius:999px;background:linear-gradient(90deg,#8a4ff0,#f5c542)}
.gk-vol::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-11px;border-radius:50%;background:#fff4dc;border:3px solid #f5c542;box-shadow:0 2px 6px rgba(0,0,0,.5)}
.gk-vol::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fff4dc;border:3px solid #f5c542}
.gk-vol:focus-visible{outline:3px solid #8fd3ff;outline-offset:2px;border-radius:10px}
/* titles never clip at the top when the panel is taller than the screen: auto margins center, but scroll from the top */
.gk-title{justify-content:flex-start}
.gk-title>:first-child{margin-top:auto}
.gk-title>:last-child{margin-bottom:auto}
@media (orientation:landscape) and (max-height:520px){
  .gk-title{flex-wrap:nowrap;align-items:flex-start;align-content:normal}
  .gk-title>*{margin-top:auto!important;margin-bottom:auto!important}
}