/* Patchwork game */
#game{position:fixed;inset:0;z-index:85;background:#e6dccb;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
#game.hidden{display:none}
#gCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
body.in-game{overflow:hidden}
#gHud.hidden,.g-panel.hidden{display:none}
.g-x{position:absolute;top:calc(12px + var(--sat));left:calc(12px + var(--sal));z-index:3;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.85);color:#3a2f24;box-shadow:0 4px 14px rgba(60,40,20,.18);display:flex;align-items:center;justify-content:center}
.g-top{position:absolute;top:calc(12px + var(--sat));left:50%;transform:translateX(-50%);z-index:2;display:flex;gap:8px;align-items:stretch;pointer-events:none}
.g-time,.g-me{background:rgba(255,255,255,.88);color:#3a2f24;border-radius:14px;padding:6px 12px;box-shadow:0 4px 14px rgba(60,40,20,.15);font-weight:800;font-variant-numeric:tabular-nums}
.g-time{font-size:18px;display:flex;align-items:center}.g-time.low{color:#e5484d;animation:gpulse 1s infinite}
.g-me{display:flex;flex-direction:column;align-items:center;line-height:1.1}.g-me b{font-size:17px}.g-me span{font-size:11px;font-weight:700;opacity:.7}
@keyframes gpulse{50%{transform:scale(1.06)}}
.g-board{position:absolute;top:calc(12px + var(--sat));right:calc(12px + var(--sar));z-index:2;background:rgba(255,255,255,.85);border-radius:14px;padding:6px 8px;min-width:132px;box-shadow:0 4px 14px rgba(60,40,20,.15);pointer-events:none}
.gb-row{display:flex;align-items:center;gap:6px;font-size:12.5px;color:#3a2f24;padding:2px 0}
.gb-row i{width:10px;height:10px;border-radius:3px;flex-shrink:0}.gb-row span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:90px}.gb-row b{font-variant-numeric:tabular-nums}
.gb-row.me{font-weight:800}
.g-powers{position:absolute;top:calc(64px + var(--sat));left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:2;pointer-events:none}
.gp{background:#fff;border-radius:999px;padding:4px 10px;font-size:13px;font-weight:700;color:#3a2f24;box-shadow:0 3px 10px rgba(60,40,20,.15);animation:pop .2s var(--ease)}
.gp.speed{box-shadow:inset 0 0 0 2px #f2b234}.gp.shield{box-shadow:inset 0 0 0 2px #22b5c9}.gp.ghost{box-shadow:inset 0 0 0 2px #b46cf0}
.g-map{position:absolute;left:calc(12px + var(--sal));bottom:calc(14px + var(--sab));width:96px;height:96px;border-radius:12px;border:3px solid rgba(255,255,255,.9);box-shadow:0 4px 14px rgba(60,40,20,.2);image-rendering:pixelated;z-index:2;background:#fbf7ef}
.g-feed{position:absolute;left:50%;bottom:calc(26px + var(--sab));transform:translateX(-50%);display:flex;flex-direction:column-reverse;align-items:center;gap:6px;z-index:2;pointer-events:none;width:min(92vw,420px)}
.gf{background:rgba(40,30,20,.78);color:#fff;border-radius:999px;padding:7px 14px;font-size:14px;font-weight:700;text-align:center;transition:opacity .5s,transform .5s;animation:pop .22s var(--ease)}
.gf.good{background:rgba(47,133,90,.9)}.gf.bad{background:rgba(229,72,77,.92)}.gf.out{opacity:0;transform:translateY(8px)}
.g-hint{position:absolute;left:50%;top:64%;transform:translate(-50%,-50%);background:rgba(255,255,255,.92);color:#3a2f24;border-radius:16px;padding:12px 18px;font-weight:700;font-size:15px;text-align:center;max-width:min(86vw,360px);box-shadow:0 8px 24px rgba(60,40,20,.2);z-index:2;pointer-events:none;animation:pop .25s var(--ease)}
.g-hint.hidden{display:none}
.g-arrow{position:absolute;right:calc(18px + var(--sar));bottom:calc(20px + var(--sab));width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.75);color:#3a2f24;font-size:26px;display:flex;align-items:center;justify-content:center;z-index:2;opacity:0;pointer-events:none;transition:transform .15s}
.g-arrow.pop{animation:garrow .6s ease-out}
.g-arrow[data-d="0"]{transform:rotate(-90deg)}.g-arrow[data-d="2"]{transform:rotate(90deg)}.g-arrow[data-d="3"]{transform:rotate(180deg)}
@keyframes garrow{0%{opacity:.95}100%{opacity:0}}
/* panels (waiting room, results) */
.g-panel{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(230,220,203,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.g-card{background:var(--surface);color:var(--text);border-radius:26px;padding:22px;width:min(420px,100%);max-height:calc(100dvh - 40px);overflow-y:auto;display:flex;flex-direction:column;gap:12px;box-shadow:0 20px 60px rgba(60,40,20,.25);animation:pop .25s var(--ease);text-align:center}
.g-card h2{margin:0;font-size:24px}.g-card p{margin:0}
.g-logo{width:48px;height:48px;border-radius:16px;background:linear-gradient(135deg,#ffb36b,#f06c9b);display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0}
.g-logo.big{width:64px;height:64px;font-size:34px;border-radius:20px;margin:0 auto}
.gl-people{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.gl-p{background:var(--surface2);border-radius:999px;padding:7px 13px;font-weight:600;font-size:14.5px}.gl-p.bot{opacity:.7}
.gl-wait{color:var(--sub);font-weight:600;padding:8px}
#glOpts{text-align:left}
.go-list{display:flex;flex-direction:column;gap:6px;text-align:left}
.go-row{display:flex;align-items:center;gap:10px;background:var(--surface2);border-radius:14px;padding:9px 12px;font-weight:600}
.go-row em{font-style:normal;width:26px;text-align:center;font-size:18px}.go-row i{width:14px;height:14px;border-radius:4px}
.go-row span{flex:1}.go-row small{color:var(--sub);font-weight:600}.go-row b{font-variant-numeric:tabular-nums}
.go-row.me{box-shadow:inset 0 0 0 2px var(--accent)}.go-row.team{background:transparent;padding:4px 12px}
.g-btns{display:flex;flex-direction:column;gap:8px}
/* the Games sheet */
.game-sheet{max-height:92dvh;overflow-y:auto}
.g-head{display:flex;gap:12px;align-items:flex-start}.g-head h3{margin:0 0 2px}.g-head .hint{margin:0}
.g-live{display:flex;align-items:center;gap:10px;background:color-mix(in srgb,var(--accent) 12%,var(--surface2));border-radius:14px;padding:10px 12px;font-weight:600;font-size:14.5px}
.g-live.hidden{display:none}.g-live span{flex:1}
.g-look{display:flex;flex-direction:column;gap:10px}
.g-look-top{display:flex;gap:12px;align-items:center}.g-look-top canvas{width:72px;height:72px;border-radius:18px;box-shadow:var(--sh1)}.g-look-top b{display:block;font-size:15.5px}
.g-row{display:flex;flex-wrap:wrap;gap:7px}
.g-sw{width:30px;height:30px;border-radius:10px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.6)}
.g-sw.on{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent);transform:scale(1.08)}
.g-pat{display:flex;flex-direction:column;align-items:center;gap:3px;background:none;font-size:11.5px;font-weight:600;color:var(--sub);padding:2px}
.g-pat canvas{width:36px;height:36px;border-radius:10px}.g-pat.on{color:var(--accent)}.g-pat.on canvas{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent)}
.g-emo{width:38px;height:38px;border-radius:12px;background:var(--surface2);display:flex;align-items:center;justify-content:center;padding:0}
.g-emo img{width:24px;height:24px}.g-emo.on{box-shadow:inset 0 0 0 2px var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--surface2))}
#gBots button,#glBots button{min-width:34px;padding:7px 10px}
/* chat banner */
#gameBanner{display:flex;align-items:center;gap:10px;margin:8px 12px 0;padding:9px 12px;border-radius:16px;background:linear-gradient(135deg,rgba(255,179,107,.18),rgba(240,108,155,.18));font-size:14px;font-weight:600}
#gameBanner.hidden{display:none}#gameBanner span:nth-child(2){flex:1}

@media (max-width:560px){
  .g-top{left:calc(62px + var(--sal));transform:none}
  .g-board{top:calc(64px + var(--sat));min-width:0;padding:5px 7px}
  .gb-row{font-size:11.5px}.gb-row span{max-width:70px}
  .g-powers{top:calc(66px + var(--sat));left:calc(62px + var(--sal));transform:none;flex-direction:row;flex-wrap:wrap;max-width:calc(100vw - 210px)}   /* beside the chat/call buttons, never under them */
  .g-map{width:78px;height:78px}
}

.g-count{position:absolute;left:50%;top:30%;transform:translate(-50%,-50%);z-index:3;font-size:84px;font-weight:900;color:#fff;text-shadow:0 6px 0 rgba(90,60,30,.35),0 10px 30px rgba(60,40,20,.35);pointer-events:none}
.g-count.hidden{display:none}.g-count.tick{animation:gcount .9s ease-out}.g-count.go{color:#ffd166;animation:gcount .7s ease-out}
@keyframes gcount{0%{transform:translate(-50%,-50%) scale(1.6);opacity:0}25%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-50%) scale(.9);opacity:.9}}

/* joystick: appears under your thumb; on phones a faint one waits at the bottom */
#gJoy{position:absolute;z-index:3;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.18),rgba(255,255,255,.08) 70%);box-shadow:inset 0 0 0 2px rgba(255,255,255,.55),0 6px 20px rgba(60,40,20,.18);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#gJoy i{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#efe6d6 60%,#d8c7a8);box-shadow:0 4px 12px rgba(60,40,20,.35),inset 0 -3px 6px rgba(0,0,0,.08)}
#gJoy.idle{top:auto;bottom:calc(46px + var(--sab));margin:0 0 0 -60px;opacity:.55}
#gJoy.idle i{animation:joyNudge 2.4s ease-in-out infinite}
@keyframes joyNudge{0%,100%{transform:none}30%{transform:translate(16px,-10px)}60%{transform:translate(-12px,8px)}}