/* ══════════════════════════════════════════════
   DUCK AMONG US — styles
   ══════════════════════════════════════════════ */

:root{
  --bg:#070b18;
  --bg2:#0e1630;
  --panel:rgba(18,26,54,.82);
  --panel-line:rgba(120,170,255,.18);
  --ink:#eaf0ff;
  --ink-dim:#9aa8c9;
  --duck:#ffc93c;
  --duck-deep:#ff9f1c;
  --bill:#ff8c2b;
  --danger:#ff3b5c;
  --good:#3ddc84;
  --glass:rgba(180,225,255,.28);
  --r:18px;
  --shadow:0 18px 45px rgba(0,0,0,.55);
  --font: "Trebuchet MS", "Segoe UI", Verdana, system-ui, sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden}
body{
  font-family:var(--font);
  background:#000;                 /* letterbox bars */
  color:var(--ink);
  user-select:none;
  touch-action:none;
  overscroll-behavior:none;
}

/* ══════════════════════════════════════════════
   16:9 STAGE
   Everything is authored against a fixed 1280×720 box which is then
   uniformly scaled to fit whatever window the portal gives us. The
   layout can therefore never overflow or reflow — it just gets bigger
   or smaller, exactly like a real game canvas.
   ══════════════════════════════════════════════ */
:root{ --sw:1280px; --sh:720px; --ss:1; }

#app{
  position:absolute; left:50%; top:50%;
  width:var(--sw); height:var(--sh);
  transform:translate(-50%,-50%) scale(var(--ss));
  transform-origin:50% 50%;
  overflow:hidden;
  background:var(--bg);
}

#bg-stars{position:absolute;inset:0;width:100%;height:100%;z-index:0}

/* portrait phones: ask for a turn instead of squeezing a 16:9 game */
#rotate-hint{
  position:fixed;inset:0;z-index:900;display:none;
  background:#05080f;color:var(--ink);
  flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:24px;
}
#rotate-hint .rot-ico{font-size:84px;animation:rotTip 1.8s ease-in-out infinite}
#rotate-hint p{font:900 17px var(--font);letter-spacing:2px;color:var(--duck)}
@keyframes rotTip{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(76deg)}}
body.portrait #rotate-hint{display:flex}
body.portrait #app{visibility:hidden}

/* ─── screens ─── */
.screen{
  position:absolute;inset:0;z-index:2;
  display:none;
  align-items:center;justify-content:center;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.screen.active{display:flex}
.overlay-screen{background:rgba(4,7,18,.78);backdrop-filter:blur(7px);z-index:20}

/* ══════════════ MENU ══════════════ */
#screen-menu{align-items:center;overflow:hidden}
.menu-inner{
  width:100%;max-width:1120px;margin:0 auto;
  padding:8px 20px 0;
  display:flex;flex-direction:column;gap:12px;
}

.lang-bar{
  position:absolute;top:calc(12px + env(safe-area-inset-top));right:14px;z-index:5;
  display:flex;gap:8px;
}
.flag{
  display:flex;align-items:center;gap:6px;
  background:var(--panel);border:2px solid transparent;
  border-radius:12px;padding:6px 10px;cursor:pointer;
  color:var(--ink-dim);font:700 12px/1 var(--font);letter-spacing:.5px;
  transition:.18s;
}
.flag svg{width:26px;height:17px;border-radius:3px;display:block;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.flag:hover{transform:translateY(-2px)}
.flag.on{border-color:var(--duck);color:var(--duck);background:rgba(255,201,60,.12)}

.title-block{text-align:center}
.game-title{
  font-size:58px;
  line-height:1.0;letter-spacing:1px;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:0 14px;
  font-weight:900;
  text-shadow:0 6px 0 rgba(0,0,0,.35), 0 14px 34px rgba(255,159,28,.30);
}
.game-title .t1{color:var(--duck)}
.game-title .t2{color:#fff}
.game-title .t3{
  color:var(--danger);
  font-size:.62em;letter-spacing:3px;
  text-shadow:0 3px 0 rgba(0,0,0,.35), 0 0 26px rgba(255,59,92,.55);
}
.tagline{color:var(--ink-dim);margin-top:6px;font-size:15px;font-style:italic}

.menu-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:16px;align-items:start}

.panel{
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  padding:12px 14px;
  backdrop-filter:blur(10px);
}
.panel-preview{display:flex;flex-direction:column;align-items:center;gap:8px}
#duck-preview{width:246px;height:246px;
  background:radial-gradient(circle at 50% 62%, rgba(120,170,255,.16), transparent 62%);
  border-radius:14px;cursor:pointer}

.costume-nav{display:flex;align-items:center;gap:14px;width:100%;justify-content:center}
.arrow-btn{
  width:40px;height:40px;border-radius:50%;flex:none;
  background:rgba(255,255,255,.07);border:1px solid var(--panel-line);
  color:var(--ink);font-size:26px;line-height:1;cursor:pointer;transition:.15s;
}
.arrow-btn:hover{background:var(--duck);color:#20160a;transform:scale(1.08)}
.costume-label{text-align:center;min-width:130px}
.costume-idx{display:block;font-size:11px;color:var(--ink-dim);letter-spacing:1px}
.costume-label strong{font-size:17px;color:var(--duck)}

.color-row{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.swatch{
  width:26px;height:26px;border-radius:8px;cursor:pointer;
  border:2px solid rgba(255,255,255,.15);transition:.15s;
}
.swatch:hover{transform:scale(1.18)}
.swatch.on{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.22)}

/* ─── rewarded-video unlock button ─── */
.btn-unlock{
  display:none;align-items:center;justify-content:center;gap:9px;
  width:100%;padding:12px 14px;border-radius:14px;cursor:pointer;
  border:2px solid rgba(255,255,255,.35);
  background:linear-gradient(180deg,#ff9f4a,#e2650d);
  color:#301400;font:900 14px var(--font);letter-spacing:.6px;
  box-shadow:0 5px 0 #a94706, 0 10px 22px rgba(226,101,13,.4);
  animation:unlockPulse 1.5s ease-in-out infinite;
}
.btn-unlock.show{display:flex}
.btn-unlock b{font-size:20px;line-height:1}
.btn-unlock i{font-style:normal;font-size:17px}
.btn-unlock:active{transform:translateY(4px);box-shadow:0 1px 0 #a94706}
@keyframes unlockPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.16)}}

/* ─── pet picker ─── */
.pet-row{display:flex;align-items:center;gap:10px;width:100%;justify-content:center}
.pet-label{font-size:20px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.pet-slots{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.pet-slot{
  position:relative;width:52px;height:52px;border-radius:14px;cursor:pointer;
  border:2px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.34);
  display:grid;place-items:center;font-size:25px;transition:.15s;
}
.pet-slot:hover{transform:translateY(-3px);background:rgba(255,255,255,.10)}
.pet-slot.on{border-color:var(--duck);background:rgba(255,201,60,.16);box-shadow:0 0 0 3px rgba(255,201,60,.22)}
.pet-slot.locked{filter:grayscale(1) brightness(.62)}
.pet-slot.locked::after{
  content:"🔒";position:absolute;right:-4px;bottom:-4px;font-size:14px;
  filter:none;text-shadow:0 1px 3px #000;
}
.pet-slot.locked.on{border-color:var(--danger)}

/* ─── the ad curtain ─── */
#screen-ad{background:rgba(2,4,10,.94);z-index:60}
.ad-box{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  color:var(--ink);font:900 18px var(--font);letter-spacing:2px;text-align:center;
}
.ad-box .ad-ico{font-size:64px;animation:adBlink 1.1s ease-in-out infinite}
@keyframes adBlink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.94)}}
.ad-box .ad-count{
  font-style:normal;font-size:44px;color:var(--duck);
  min-width:74px;padding:6px 0;border-radius:14px;
  background:rgba(255,201,60,.12);border:2px solid rgba(255,201,60,.4);
}

/* sound toggle sits with the flags */
.sound-btn{padding:6px 9px}
.sound-btn span{font-size:17px;line-height:1}
.sound-btn.off{opacity:.5}

.panel-settings{display:flex;flex-direction:column;gap:9px;justify-content:center}
.field{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:38px}
.field>span{font-size:13px;color:var(--ink-dim);letter-spacing:.4px;font-weight:700;text-transform:uppercase}
.field input[type=text]{
  flex:1;max-width:190px;background:rgba(0,0,0,.35);border:1px solid var(--panel-line);
  border-radius:10px;padding:10px 12px;color:var(--ink);font:700 15px var(--font);outline:none;
}
.field input[type=text]:focus{border-color:var(--duck)}

.stepper{display:flex;align-items:center;gap:4px;background:rgba(0,0,0,.3);border-radius:10px;padding:3px}
.stepper button{
  width:32px;height:32px;border-radius:8px;border:none;cursor:pointer;
  background:rgba(255,255,255,.08);color:var(--ink);font-size:19px;font-weight:700;transition:.12s;
}
.stepper button:hover{background:var(--duck);color:#20160a}
.stepper b{min-width:34px;text-align:center;font-size:17px;color:var(--duck)}

.seg{display:flex;background:rgba(0,0,0,.3);border-radius:10px;padding:3px;gap:3px}
.seg button{
  border:none;background:transparent;color:var(--ink-dim);cursor:pointer;
  padding:6px 10px;border-radius:8px;font:700 11.5px var(--font);transition:.15s;
  display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.1;
}
.seg button b{font-size:17px;line-height:1;filter:grayscale(.55);transition:.15s}
.seg button.on{background:var(--duck);color:#20160a}
.seg button.on b{filter:none;transform:scale(1.14)}

/* text buttons that carry a leading glyph */
.with-ico{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.with-ico b{font-size:1.25em;line-height:1}

.btn-play{
  margin-top:6px;padding:15px;border:none;border-radius:14px;cursor:pointer;
  background:linear-gradient(180deg,var(--duck),var(--duck-deep));
  color:#2a1a05;font:900 22px/1 var(--font);letter-spacing:3px;
  box-shadow:0 7px 0 #b96d0c, 0 14px 30px rgba(255,159,28,.35);
  transition:.12s;
}
.btn-play:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 9px 0 #b96d0c,0 18px 34px rgba(255,159,28,.42)}
.btn-play:active{transform:translateY(5px);box-shadow:0 2px 0 #b96d0c}
.btn-play.small{font-size:16px;padding:12px 22px;letter-spacing:1.5px}

/* ─── the big green wobbling PLAY button ─── */
.btn-play-hero{
  position:relative;overflow:hidden;isolation:isolate;
  margin-top:6px;
  padding:14px 26px;
  border-radius:20px;
  background:linear-gradient(180deg,#5ef08a 0%,#2fd46c 45%,#16a94f 100%);
  color:#06301a;
  font:900 34px/1 var(--font);
  letter-spacing:5px;
  text-shadow:0 2px 0 rgba(255,255,255,.45);
  box-shadow:
    0 9px 0 #0d7a39,
    0 10px 0 2px #095c2b,
    0 20px 42px rgba(45,220,110,.42),
    inset 0 3px 0 rgba(255,255,255,.55),
    inset 0 -6px 14px rgba(0,0,0,.18);
  animation:playWobble 2.1s ease-in-out infinite, playGlow 2.1s ease-in-out infinite;
  transform-origin:50% 92%;
  will-change:transform;
}
/* the play glyph replaces the word — no reading required */
.play-icon{
  position:relative;z-index:2;display:block;
  width:62px;height:62px;
  filter:drop-shadow(0 3px 0 rgba(255,255,255,.4));
}
.play-icon .pi-ring{fill:none;stroke:#06301a;stroke-width:6;opacity:.55}
.play-icon .pi-tri{fill:#06301a}
.btn-play-hero{display:grid;place-items:center}

/* sweeping shine */
.play-shine{
  position:absolute;top:-60%;left:-40%;width:34%;height:220%;z-index:1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.62),transparent);
  transform:rotate(14deg);
  animation:playShine 2.8s ease-in-out infinite;
  pointer-events:none;
}

@keyframes playWobble{
  0%,100%{ transform:rotate(-1.6deg) scale(1) }
  25%    { transform:rotate(1.6deg)  scale(1.035) }
  50%    { transform:rotate(-1.1deg) scale(1.015) }
  75%    { transform:rotate(1.9deg)  scale(1.045) }
}
@keyframes playGlow{
  0%,100%{ filter:brightness(1) }
  50%    { filter:brightness(1.13) }
}
@keyframes playShine{
  0%,62%  { left:-45% }
  100%    { left:125% }
}

.btn-play-hero:hover{
  animation-play-state:paused;
  transform:scale(1.06) rotate(0deg);
  filter:brightness(1.12);
}
.btn-play-hero:active{
  transform:translateY(7px) scale(.98);
  box-shadow:0 2px 0 #0d7a39, 0 3px 0 2px #095c2b, 0 8px 18px rgba(45,220,110,.35),
             inset 0 3px 0 rgba(255,255,255,.4);
}

/* click ripple spawned by JS */
.ripple{
  position:absolute;border-radius:50%;pointer-events:none;z-index:3;
  background:radial-gradient(circle,rgba(255,255,255,.85),rgba(255,255,255,0) 68%);
  transform:translate(-50%,-50%) scale(0);
  animation:rippleOut .55s ease-out forwards;
}
@keyframes rippleOut{ to{ transform:translate(-50%,-50%) scale(1); opacity:0 } }

/* confetti burst on press */
.spark{
  position:fixed;width:9px;height:9px;border-radius:2px;pointer-events:none;z-index:99;
  animation:sparkFly .7s ease-out forwards;
}
@keyframes sparkFly{
  0%  { transform:translate(0,0) rotate(0deg) scale(1); opacity:1 }
  100%{ transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.2); opacity:0 }
}

@media (prefers-reduced-motion: reduce){
  .btn-play-hero{animation:none}
  .play-shine{animation:none;opacity:0}
}

.btn-ghost{
  padding:11px;border-radius:12px;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid var(--panel-line);
  color:var(--ink-dim);font:700 13px var(--font);letter-spacing:1px;transition:.15s;
}
.btn-ghost:hover{background:rgba(255,255,255,.12);color:var(--ink)}

.menu-foot{text-align:center;color:var(--ink-dim);font-size:11.5px;letter-spacing:.6px;opacity:.8}

/* ══════════════ MODALS ══════════════ */
.modal{
  background:var(--panel);border:1px solid var(--panel-line);
  border-radius:var(--r);box-shadow:var(--shadow);
  padding:22px;max-width:620px;max-height:640px;overflow-y:auto;
  display:flex;flex-direction:column;gap:14px;backdrop-filter:blur(12px);
}
.modal h2{font-size:24px;color:var(--duck);letter-spacing:1px;text-align:center}
.howto-body{display:flex;flex-direction:column;gap:12px;font-size:14px;line-height:1.55;color:var(--ink-dim)}
.howto-body h4{color:var(--ink);font-size:15px;margin-bottom:2px}
.howto-body b{color:var(--duck)}
.map-modal{max-width:1000px}
#map-canvas{width:100%;height:auto;background:rgba(0,0,0,.35);border-radius:12px}

.sab-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sab-btn{
  padding:14px 10px;border-radius:12px;cursor:pointer;text-align:center;
  background:rgba(255,59,92,.13);border:1px solid rgba(255,59,92,.4);color:var(--ink);
  font:700 13px var(--font);transition:.15s;
}
.sab-btn .ico{display:block;font-size:26px;margin-bottom:5px}
.sab-btn:hover:not(:disabled){background:rgba(255,59,92,.28);transform:translateY(-2px)}
.sab-btn:disabled{opacity:.35;cursor:not-allowed}

/* ══════════════ ROLE REVEAL ══════════════ */
#screen-role{background:radial-gradient(circle at 50% 45%,#1a1030,#05070f 70%)}
.role-card{text-align:center;animation:pop .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.role-card h2{font-size:70px;font-weight:900;letter-spacing:5px;margin-top:4px}
.role-card p{color:var(--ink-dim);font-size:16px;margin-top:10px;max-width:460px;padding:0 16px}
.role-team{margin-top:18px;font-size:13px;letter-spacing:2px;color:var(--ink-dim)}
.role-team .r-list{margin-top:8px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.role-team .r-chip{background:rgba(255,59,92,.16);border:1px solid rgba(255,59,92,.4);padding:5px 12px;border-radius:20px;color:#ffd2da;font-weight:700}

/* ══════════════ GAME ══════════════ */
#screen-game{background:#05070f}
#game-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

.hud-top{
  position:absolute;top:calc(10px + env(safe-area-inset-top));left:12px;right:12px;
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;z-index:6;pointer-events:none;
}
.taskbar-wrap{display:flex;align-items:center;gap:8px;flex:1;max-width:380px}
.taskbar{flex:1;height:16px;background:rgba(0,0,0,.55);border:2px solid rgba(255,255,255,.16);border-radius:10px;overflow:hidden}
.taskbar-fill{height:100%;width:0%;background:linear-gradient(90deg,#3ddc84,#8ef7bb);transition:width .4s;box-shadow:0 0 14px rgba(61,220,132,.6)}
.taskbar-label{font:700 12px var(--font);color:var(--good);min-width:34px}

.hud-right{display:flex;align-items:center;gap:7px;pointer-events:auto}
.room-name{
  background:rgba(0,0,0,.5);border:1px solid var(--panel-line);border-radius:10px;
  padding:7px 12px;font:700 12px var(--font);color:var(--duck);letter-spacing:1px;white-space:nowrap;
}
.hud-icon{
  width:38px;height:38px;border-radius:11px;cursor:pointer;
  background:rgba(0,0,0,.5);border:1px solid var(--panel-line);font-size:17px;color:var(--ink);transition:.15s;
}
.hud-icon:hover{background:rgba(255,255,255,.14)}

.task-list{
  position:absolute;top:calc(58px + env(safe-area-inset-top));left:12px;z-index:5;
  list-style:none;font-size:12px;max-width:430px;pointer-events:none;
}
.task-list li{
  background:rgba(0,0,0,.52);border-left:4px solid var(--duck);
  padding:5px 10px;margin-bottom:5px;border-radius:0 10px 10px 0;
  color:var(--ink);text-shadow:0 1px 3px #000;
  display:flex;align-items:center;gap:7px;line-height:1.25;
}
.task-list li .ti{font-size:16px;flex:none;filter:drop-shadow(0 1px 2px #000)}
.task-list li span{opacity:.72;font-size:11px;white-space:nowrap}
.task-list li em{font-style:normal;font-weight:700}
.task-list li.done{border-left-color:var(--good);color:var(--good);opacity:.6}
.task-list li.done em{text-decoration:line-through}
.task-list li.fake{border-left-color:var(--danger)}
.room-name b{font-size:15px;filter:drop-shadow(0 1px 2px #000)}
.task-head h3 b{font-size:1.25em}

.alert-banner{
  position:absolute;top:34%;left:50%;transform:translateX(-50%);
  z-index:8;pointer-events:none;text-align:center;
  font:900 34px var(--font);letter-spacing:3px;
  color:var(--danger);text-shadow:0 3px 0 #000,0 0 30px rgba(255,59,92,.8);
  opacity:0;transition:opacity .3s;
}
.alert-banner.show{opacity:1;animation:pulse 1s infinite}
@keyframes pulse{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.06)}}

/* joystick */
.joystick{
  position:absolute;
  left:calc(30px + env(safe-area-inset-left));
  bottom:calc(26px + env(safe-area-inset-bottom));
  width:164px;height:164px;
  z-index:7;display:none;touch-action:none;
}
.joystick.on{display:block}
.joy-base{
  position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.09),rgba(255,255,255,.03));
  border:2px solid rgba(255,255,255,.2);
}
.joy-knob{
  position:absolute;left:50%;top:50%;
  width:44%;height:44%;margin:-22% 0 0 -22%;
  border-radius:50%;background:linear-gradient(180deg,var(--duck),var(--duck-deep));
  box-shadow:0 5px 16px rgba(0,0,0,.6);border:2px solid rgba(255,255,255,.35);
}

/* action buttons — scale with the viewport, never below a comfy thumb target */
:root{
  --act:  86px;    /* secondary HUD buttons */
  --actU: 124px;   /* the big Use button    */
}
.action-cluster{
  position:absolute;
  right:calc(26px + env(safe-area-inset-right));
  bottom:calc(24px + env(safe-area-inset-bottom));
  z-index:7;display:flex;flex-direction:column-reverse;align-items:flex-end;
  gap:13px;
}
.act{
  position:relative;border-radius:50%;cursor:pointer;
  border:4px solid rgba(255,255,255,.3);
  display:grid;place-items:center;transition:transform .12s, filter .12s, opacity .12s;
  overflow:hidden;flex:none;
  width:var(--act);height:var(--act);
  font-size:calc(var(--act) * .42);
  background:rgba(40,50,80,.78);color:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.5), inset 0 3px 0 rgba(255,255,255,.22);
  -webkit-user-select:none;user-select:none;
}
.act .act-ico{line-height:1;filter:drop-shadow(0 2px 3px rgba(0,0,0,.55))}
.act:disabled{opacity:.3;cursor:not-allowed;box-shadow:none}
.act:not(:disabled){animation:actReady 1.8s ease-in-out infinite}
.act:not(:disabled):active{transform:scale(.88);animation:none}

.act-use{
  width:var(--actU);height:var(--actU);
  font-size:calc(var(--actU) * .42);
  background:radial-gradient(circle at 35% 28%,#7ce4ff,#1b6fbf 70%,#12508f);
  border-color:rgba(255,255,255,.48);
}
.act-kill  {background:radial-gradient(circle at 35% 28%,#ff8095,#c31035 72%,#8d0a26);border-color:rgba(255,255,255,.42)}
.act-report{background:radial-gradient(circle at 35% 28%,#ffdc84,#e08700 72%,#a86200)}
.act-vent  {background:radial-gradient(circle at 35% 28%,#b3a5ff,#4b31c9 72%,#31208c)}
.act-sab   {background:radial-gradient(circle at 35% 28%,#ffb27a,#c74a00 72%,#8d3400)}

/* a soft heartbeat so an available action reads as tappable */
@keyframes actReady{
  0%,100%{ box-shadow:0 6px 18px rgba(0,0,0,.5), inset 0 3px 0 rgba(255,255,255,.22), 0 0 0 0 rgba(255,255,255,.30) }
  55%    { box-shadow:0 6px 18px rgba(0,0,0,.5), inset 0 3px 0 rgba(255,255,255,.22), 0 0 0 10px rgba(255,255,255,0) }
}
.act .cd{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(0,0,0,.66);font:900 calc(var(--act) * .34) var(--font);
  font-style:normal;color:#fff;
}
.act .cd:empty{display:none}
@media (prefers-reduced-motion: reduce){ .act:not(:disabled){animation:none} }

/* ══════════════ TASK MINIGAMES ══════════════
   Every task is framed as a piece of station hardware: brushed metal
   bezel, corner screws, a status LED and a CRT scanline wash.        */
.task-modal{
  position:relative;
  background:
    linear-gradient(180deg,#1b2748 0%,#101a33 46%,#0a1122 100%);
  border:3px solid #55689a;
  border-radius:22px;
  box-shadow:
    var(--shadow),
    inset 0 2px 0 rgba(255,255,255,.22),
    inset 0 -4px 14px rgba(0,0,0,.5),
    0 0 0 6px rgba(10,16,32,.65);
  width:580px;max-height:648px;overflow:hidden;
  display:flex;flex-direction:column;
  animation:panelIn .3s cubic-bezier(.2,1.3,.4,1);
}
@keyframes panelIn{from{transform:scale(.9) translateY(14px);opacity:0}to{transform:none;opacity:1}}

/* corner screws */
.task-modal::before,.task-modal::after{
  content:"";position:absolute;width:11px;height:11px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#c3cfe4,#5d6a8a 60%,#39435e);
  box-shadow:0 1px 2px rgba(0,0,0,.7);z-index:5;
}
.task-modal::before{left:11px;top:11px}
.task-modal::after{right:11px;top:11px}

.task-head{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  padding:15px 18px 15px 34px;
  background:linear-gradient(180deg,rgba(90,120,190,.34),rgba(40,58,100,.12));
  border-bottom:2px solid rgba(140,175,240,.28);
}
.task-head h3{
  font-size:18px;color:var(--duck);letter-spacing:1.2px;
  display:flex;align-items:center;gap:9px;text-shadow:0 2px 4px rgba(0,0,0,.6);
}
/* running status LED */
.task-head::before{
  content:"";position:absolute;left:14px;top:50%;margin-top:-4px;
  width:9px;height:9px;border-radius:50%;background:#3ddc84;
  box-shadow:0 0 10px #3ddc84;animation:ledBlink 1.4s ease-in-out infinite;
}
@keyframes ledBlink{0%,100%{opacity:1}50%{opacity:.28}}

.x-btn{
  width:38px;height:38px;border-radius:11px;border:2px solid rgba(255,255,255,.18);
  background:rgba(255,90,120,.18);color:var(--ink);font-size:16px;cursor:pointer;transition:.14s;
}
.x-btn:hover{background:var(--danger);transform:rotate(90deg)}

.task-body{
  position:relative;padding:20px;overflow:auto;
  /* body{touch-action:none} kills panning globally, which would make an
     overflowing minigame literally unreachable on a phone */
  touch-action:pan-y;
  display:flex;flex-direction:column;align-items:center;gap:15px;
}
/* faint scanlines over the whole working area */
.task-body::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:4;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 4px);
}
.task-hint{
  font-size:13px;color:#a9bde0;text-align:center;line-height:1.5;
  background:rgba(0,0,0,.32);border-left:3px solid var(--duck);
  padding:8px 12px;border-radius:0 9px 9px 0;
}
.task-done-msg{
  font:900 32px var(--font);color:var(--good);letter-spacing:3px;text-align:center;padding:34px 10px;
  text-shadow:0 0 26px rgba(61,220,132,.7);
  animation:donePOP .45s cubic-bezier(.2,1.5,.4,1);
}
@keyframes donePOP{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}

/* ─── wires: a real junction box with plug sockets ─── */
.wire-game{
  display:flex;justify-content:space-between;width:100%;max-width:430px;height:264px;position:relative;
  background:linear-gradient(180deg,#26304c,#171f36);
  border:3px solid #46557f;border-radius:14px;padding:14px 10px;
  box-shadow:inset 0 3px 12px rgba(0,0,0,.6);
}
.wire-col{display:flex;flex-direction:column;justify-content:space-around;height:100%;z-index:2}
.wire-node{
  width:56px;height:34px;border-radius:7px;cursor:pointer;
  border:3px solid rgba(0,0,0,.55);
  box-shadow:0 3px 8px rgba(0,0,0,.6), inset 0 2px 0 rgba(255,255,255,.4), inset 0 -3px 6px rgba(0,0,0,.35);
  position:relative;transition:transform .12s;
}
.wire-node::after{                       /* the metal contact pin */
  content:"";position:absolute;top:50%;width:11px;height:12px;margin-top:-6px;border-radius:2px;
  background:linear-gradient(180deg,#e2e9f5,#8e9cb8);box-shadow:0 1px 2px rgba(0,0,0,.6);
}
.wire-col:first-of-type .wire-node::after{right:-11px}
.wire-col:last-of-type  .wire-node::after{left:-11px}
.wire-node:hover{transform:scale(1.07)}
.wire-node.sel{outline:4px solid #fff;outline-offset:2px;transform:scale(1.1)}
.wire-node[data-done]{filter:brightness(1.35) saturate(1.3)}
.wire-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}

/* ─── gauges & hold buttons ─── */
.big-bar{
  width:100%;max-width:410px;height:42px;position:relative;
  background:linear-gradient(180deg,#0b1020,#151d33);
  border:3px solid #46557f;border-radius:12px;overflow:hidden;
  box-shadow:inset 0 3px 10px rgba(0,0,0,.7);
}
.big-bar > i{
  display:block;height:100%;width:0%;transition:width .1s;
  background:linear-gradient(90deg,#ffb03a,#ffd166 40%,#3ddc84);
  box-shadow:0 0 22px rgba(61,220,132,.55);
}
.big-bar::after{                          /* tick marks + gloss */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 46%),
    repeating-linear-gradient(90deg,transparent 0 39px,rgba(255,255,255,.16) 39px 41px);
}
.hold-btn{
  width:100%;max-width:410px;padding:22px;border-radius:16px;
  border:3px solid #6d80b3;
  background:linear-gradient(180deg,#3d4d7a,#26304c);
  color:#eaf0ff;font:900 18px var(--font);letter-spacing:1.5px;cursor:pointer;
  box-shadow:0 6px 0 #17203a, inset 0 2px 0 rgba(255,255,255,.28);
  transition:.1s;
}
.hold-btn:active{
  background:linear-gradient(180deg,var(--duck),var(--duck-deep));color:#221703;
  transform:translateY(5px);box-shadow:0 1px 0 #17203a, inset 0 2px 0 rgba(255,255,255,.4);
}

/* ─── keypad: a chunky metal security pad ─── */
.keypad{
  display:grid;grid-template-columns:repeat(3,84px);gap:10px;
  padding:14px;border-radius:16px;
  background:linear-gradient(180deg,#26304c,#161e34);
  border:3px solid #46557f;box-shadow:inset 0 3px 12px rgba(0,0,0,.6);
}
.keypad button{
  height:62px;border-radius:12px;
  border:2px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg,#48577f,#2c3654);
  color:#eaf0ff;font:900 24px var(--font);cursor:pointer;
  box-shadow:0 4px 0 #141b2f, inset 0 2px 0 rgba(255,255,255,.24);
  transition:.08s;
}
.keypad button:active{background:linear-gradient(180deg,var(--duck),var(--duck-deep));color:#221703;transform:translateY(4px);box-shadow:0 0 0 #141b2f}
.code-display{
  font:900 32px/1 "Consolas","Courier New",monospace;
  letter-spacing:12px;color:#5eff9e;
  background:linear-gradient(180deg,#04170e,#0a2416);
  border:3px solid #2c5a40;border-radius:12px;
  padding:14px 20px 14px 32px;min-height:56px;min-width:220px;text-align:center;
  text-shadow:0 0 14px rgba(94,255,158,.85);
  box-shadow:inset 0 2px 12px rgba(0,0,0,.8);
}

/* ─── simon: illuminated push pads ─── */
.simon-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:14px;
  border-radius:20px;background:linear-gradient(180deg,#222b46,#141b30);
  border:3px solid #46557f;box-shadow:inset 0 3px 12px rgba(0,0,0,.6)}
.simon-pad{
  width:104px;height:104px;
  border-radius:20px;cursor:pointer;
  border:4px solid rgba(0,0,0,.45);opacity:.34;transition:.11s;
  box-shadow:inset 0 -6px 14px rgba(0,0,0,.45), inset 0 3px 0 rgba(255,255,255,.3);
}
.simon-pad.lit{opacity:1;transform:scale(1.07);box-shadow:0 0 34px currentColor, inset 0 3px 0 rgba(255,255,255,.5)}

/* ─── canvas-based games get a screen bezel ───
   Sized by HEIGHT first so a landscape phone never pushes half the play
   area below the fold (targets down there would be untappable). */
.mini-canvas{
  aspect-ratio:4/3;
  height:330px;
  min-height:150px;
  width:auto;max-width:100%;
  background:#05080f;border-radius:14px;
  border:4px solid #46557f;touch-action:none;
  box-shadow:inset 0 0 40px rgba(0,0,0,.8), 0 0 24px rgba(79,216,255,.14);
}
/* portrait phones: width is the tighter constraint, so flip it back */
/* ─── card swipe: a wall-mounted reader ─── */
.swipe-slot{
  width:100%;max-width:430px;height:110px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,#26304c,#141b30);
  border:3px solid #46557f;border-radius:14px;
  box-shadow:inset 0 3px 12px rgba(0,0,0,.6);
}
.swipe-slot::after{                       /* the reader slot at the far end */
  content:"";position:absolute;right:14px;top:12px;bottom:12px;width:16px;border-radius:5px;
  background:linear-gradient(180deg,#05080f,#111a2c);
  box-shadow:inset 0 0 8px #000, 0 0 12px rgba(79,216,255,.35);
}
.swipe-card{
  position:absolute;left:8px;top:20px;width:132px;height:70px;border-radius:10px;cursor:grab;
  background:linear-gradient(135deg,#ffe08a,#ff9f1c 60%,#e07d10);
  color:#3a2100;display:grid;place-items:center;
  font:900 11px var(--font);letter-spacing:.5px;text-align:center;
  box-shadow:0 5px 16px rgba(0,0,0,.6), inset 0 2px 0 rgba(255,255,255,.5);
  border:2px solid rgba(255,255,255,.35);z-index:2;
}
.swipe-card::after{                       /* magnetic stripe */
  content:"";position:absolute;left:0;right:0;top:14px;height:12px;background:rgba(0,0,0,.55);
}
.swipe-card:active{cursor:grabbing}
.swipe-msg{font:900 18px var(--font);letter-spacing:1.5px;min-height:24px;text-shadow:0 2px 6px #000}

/* ─── align: a viewport onto space ─── */
.align-box{
  width:100%;max-width:410px;height:220px;position:relative;overflow:hidden;
  background:radial-gradient(circle at 50% 50%,#132043,#05080f 72%);
  border:4px solid #46557f;border-radius:14px;
  box-shadow:inset 0 0 40px rgba(0,0,0,.8);
}
.align-box::before{                       /* crosshair grid */
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,transparent 49.4%,rgba(120,190,255,.22) 49.4% 50.6%,transparent 50.6%),
    linear-gradient(0deg, transparent 49.4%,rgba(120,190,255,.22) 49.4% 50.6%,transparent 50.6%);
}
.align-target{
  position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;
  border:3px dashed var(--good);border-radius:50%;
  box-shadow:0 0 22px rgba(61,220,132,.4);animation:ringSpin 7s linear infinite;
}
@keyframes ringSpin{to{transform:rotate(360deg)}}
.align-ship{
  position:absolute;width:46px;height:46px;margin:-23px 0 0 -23px;cursor:grab;
  font-size:36px;line-height:46px;text-align:center;z-index:2;
  filter:drop-shadow(0 0 12px rgba(255,209,102,.8));
}
.align-ship:active{cursor:grabbing}

/* (No viewport media queries: the stage is a fixed 1280×720 box that is
    uniformly scaled, so every panel has exactly one size to fit.) */

/* ══════════════ MEETING ══════════════ */
#screen-meeting{background:radial-gradient(circle at 50% 0%,#1b2450,#05070f 70%);flex-direction:column;padding:16px;overflow-y:auto}
.meeting-head{text-align:center;padding:14px 0 8px;position:relative}
.meeting-head h2{font:900 38px var(--font);letter-spacing:3px;color:var(--danger);text-shadow:0 3px 0 #000}
.meeting-head p{color:var(--ink-dim);font-size:13px;margin-top:6px}
.meeting-timer{
  position:absolute;right:0;top:10px;width:52px;height:52px;border-radius:50%;
  background:rgba(0,0,0,.55);border:3px solid var(--duck);
  display:grid;place-items:center;font:900 20px var(--font);color:var(--duck);
}
.vote-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:9px;width:100%;max-width:820px;margin:0 auto;padding:6px;
}
.vote-card{
  display:flex;align-items:center;gap:9px;padding:8px;border-radius:12px;cursor:pointer;
  background:rgba(255,255,255,.06);border:2px solid transparent;transition:.15s;
}
.vote-card:hover{background:rgba(255,255,255,.13)}
.vote-card.me{border-color:var(--duck)}
.vote-card.dead{opacity:.35;filter:grayscale(1);cursor:not-allowed}
.vote-card.voted{border-color:var(--danger)}
.vote-card canvas{width:46px;height:46px;flex:none}
.vote-card .vname{font:700 13px var(--font);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vote-card .vcount{display:flex;gap:2px;flex-wrap:wrap;max-width:44px}
.vote-card .vdot{width:9px;height:9px;border-radius:50%;background:var(--danger)}
.meeting-foot{width:100%;max-width:820px;margin:8px auto 0;display:flex;flex-direction:column;gap:8px;align-items:center}
.chat-log{
  width:100%;max-height:110px;overflow-y:auto;font-size:12.5px;line-height:1.55;
  background:rgba(0,0,0,.35);border-radius:12px;padding:9px 12px;color:var(--ink-dim);
}
.chat-log b{color:var(--duck)}

/* ══════════════ EJECT / END ══════════════ */
#screen-eject{background:#03060e;flex-direction:column}
#eject-canvas{position:absolute;inset:0;width:100%;height:100%}
.eject-text{position:relative;z-index:2;font:900 27px var(--font);text-align:center;padding:0 20px;text-shadow:0 3px 12px #000}

#screen-end{background:radial-gradient(circle at 50% 40%,#12203f,#03060e 70%)}
.end-card{text-align:center;animation:pop .5s cubic-bezier(.2,1.4,.4,1);padding:20px}
.end-card h1{font:900 66px var(--font);letter-spacing:4px;text-shadow:0 5px 0 rgba(0,0,0,.4)}
.end-card p{color:var(--ink-dim);margin-top:8px;font-size:14px}
#end-canvas{width:640px;height:auto;margin:14px 0}
.end-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.end-btns button{min-width:150px}