/* The phone is a remote control: dark moulded plastic, a green LED window,
   rubber buttons in the network's test-card colours. */
@font-face{font-family:'Shrikhand';src:url('/assets/fonts/shrikhand.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Barlow Condensed';font-weight:500;src:url('/assets/fonts/barlow-500.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Barlow Condensed';font-weight:700;src:url('/assets/fonts/barlow-700.woff2') format('woff2');font-display:swap}
@font-face{font-family:'VT323';src:url('/assets/fonts/vt323.woff2') format('woff2');font-display:swap}

:root{
  --case:#1d1621;--case-lo:#120d16;--ink:#f4ecde;--dim:#a498ab;--led:#3bff8a;--ledbg:#07130c;
  --hot:#ff1f8f;--cyan:#00e5ff;--sun:#ffd400;--go:#00f26b;--blood:#ff2a3a;--violet:#a06bff;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#000;color:var(--ink);font-family:'Barlow Condensed',sans-serif;font-weight:500;overflow:hidden;overscroll-behavior:none;touch-action:manipulation;user-select:none;-webkit-user-select:none}
#app{position:fixed;inset:0;display:flex;flex-direction:column;background:linear-gradient(170deg,#2a2030 0%,var(--case) 25%,var(--case-lo) 100%);padding:calc(env(safe-area-inset-top) + 10px) 12px calc(env(safe-area-inset-bottom) + 10px)}
.hidden{display:none!important}
h1,h2,h3,p{margin:0}
button{font:inherit;color:inherit;border:0;background:none;padding:0}
input{font:inherit}
:focus-visible{outline:2px solid var(--sun);outline-offset:2px}

/* LED window */
.led{background:var(--ledbg);border-radius:6px;box-shadow:inset 0 2px 6px #000,0 1px 0 #ffffff14;color:var(--led);font-family:'VT323',monospace;padding:6px 12px;text-shadow:0 0 8px #3bff8a88}
.led .big{font-size:58px;line-height:1;letter-spacing:.14em}
.led .sm{font-size:22px;line-height:1.05;color:#8fffbc}
.brand{font-family:'Shrikhand';font-size:22px;color:var(--ink);opacity:.8;text-align:center;margin:2px 0 8px}

/* Rubber buttons */
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;flex:1;margin-top:12px;min-height:0}
.key{border-radius:14px;background:linear-gradient(#3a3040,#2a2130);box-shadow:0 4px 0 #0d0a10,inset 0 1px 0 #ffffff18;font-size:38px;font-weight:700;color:var(--ink);display:grid;place-items:center;touch-action:manipulation}
.key:active{transform:translateY(3px);box-shadow:0 1px 0 #0d0a10}
.key.go{background:linear-gradient(#26d868,#16b04f);color:#04220f}
.key.del{background:linear-gradient(#ff5a64,#d93945);color:#2a0508}

.field{margin-top:14px}
.field label{display:block;font-size:20px;color:var(--dim);margin-bottom:4px}
.field input{width:100%;background:var(--ledbg);border:0;border-radius:8px;color:var(--led);font-family:'VT323';font-size:32px;padding:6px 12px}
.masks{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:6px}
.mask{background:#2a2130;border-radius:12px;padding:6px;text-align:center;position:relative;border:2px solid transparent}
.mask img{width:100%;aspect-ratio:1;display:block}
.mask small{font-size:16px;color:var(--dim);display:block;line-height:1}
.mask.sel{border-color:var(--sun);background:#3a2c40}
.mask.off{opacity:.3}
.mask .lock{position:absolute;inset:0;display:grid;place-items:center;font-size:17px;color:var(--ink);background:#12051fcc;border-radius:12px;line-height:1.05;text-align:center;padding:6px}
.primary{display:block;width:100%;margin-top:12px;padding:12px;font-size:32px;font-weight:700;border-radius:14px;background:linear-gradient(#ffe14a,#f0b400);color:#231804;box-shadow:0 4px 0 #6d4f00}
.primary:active{transform:translateY(3px);box-shadow:0 1px 0 #6d4f00}
.primary:disabled{background:#3a3040;color:#6a6070;box-shadow:0 4px 0 #0d0a10}
.scroll{overflow-y:auto;flex:1;min-height:0;-webkit-overflow-scrolling:touch}
.opts{display:flex;gap:6px;margin-top:6px}
.opt{flex:1;background:#2a2130;border-radius:10px;padding:10px 4px;text-align:center;font-size:21px;line-height:1}
.opt.sel{background:var(--cyan);color:#04202a;font-weight:700}
.lobby-note{font-size:22px;color:var(--dim);margin-top:8px;text-align:center;line-height:1.1}
.who-row{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px;justify-content:center}
.who-row img{width:44px;height:44px}

/* In-game */
.play{flex:1;display:flex;flex-direction:column;min-height:0}
.status{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px}
.topline{display:flex;justify-content:space-between;align-items:center;font-family:'VT323';font-size:32px;color:var(--led);line-height:1;text-shadow:0 0 8px #3bff8a66}
.topline .money{color:var(--sun)}
.hearts{display:flex;gap:6px}
.hearts i{display:block;width:18px;height:18px;background:var(--blood);transform:rotate(45deg)}
.hearts i.off{background:#ffffff1c}
.heart-rate{height:14px;background:#0005;border-radius:7px;overflow:hidden;position:relative}
.heart-rate div{height:100%;background:linear-gradient(90deg,#3bff8a,#ffd400 60%,#ff2a3a);transition:width .12s linear}
.heart-label{font-size:20px;color:var(--dim);line-height:1;display:flex;justify-content:space-between}
.carry{background:#0003;border-radius:10px;padding:8px 10px;flex:1;min-height:0;overflow:hidden}
.carry h3{font-size:22px;color:var(--dim);font-weight:500;display:flex;justify-content:space-between}
.carry .it{display:flex;justify-content:space-between;font-size:25px;line-height:1.12}
.carry .it.c{color:#7dff5a}
.compass{display:flex;align-items:center;gap:12px;background:#0003;border-radius:10px;padding:6px 12px}
.compass .needle{width:44px;height:44px;border-radius:50%;background:#ffd40022;color:var(--sun);display:grid;place-items:center;font-size:24px;line-height:1;transition:transform .12s linear}
.com-t{display:flex;flex-direction:column;line-height:1}
.com-t b{font-size:24px;color:var(--sun)}
.com-t span{font-family:'VT323';font-size:26px;color:var(--led)}
.contract{background:#ffd40018;border-left:4px solid var(--sun);padding:5px 9px;font-size:21px;line-height:1.08}
.contract b{color:var(--sun)}
.pad{height:clamp(190px,36vh,290px);display:flex;gap:10px;margin-top:8px;flex-shrink:0}
.stick{flex:1;background:radial-gradient(circle at 50% 50%,#2c2333 0%,#17111b 70%);border-radius:20px;position:relative;box-shadow:inset 0 2px 8px #000;touch-action:none;overflow:hidden}
.stick::before{content:'';position:absolute;left:50%;top:50%;width:60%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:2px dashed #ffffff1a}
.nub{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#6a5c72,#3a2e42);box-shadow:0 5px 0 #0a080c,0 8px 14px #0008;pointer-events:none;will-change:transform}
.btns{width:46%;display:flex;flex-direction:column;gap:10px;touch-action:none}
.btn{flex:1;border-radius:16px;font-weight:700;font-size:28px;line-height:1;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;touch-action:none;padding:4px;position:relative;overflow:hidden;box-shadow:0 5px 0 #0a080c}
.btn small{font-size:17px;font-weight:500;display:block;margin-top:2px;opacity:.85}
.btn:active,.btn.press{transform:translateY(3px);box-shadow:0 2px 0 #0a080c}
.btn.act{background:linear-gradient(#ffe14a,#f0b400);color:#231804}
.btn.act.none{background:#2a2130;color:#6a6070}
.btn.flash{background:linear-gradient(#37c7ff,#008ec2);color:#031a24}
.btn.flash.none{background:#2a2130;color:#6a6070}
.btn.gadget{background:linear-gradient(#4dff9a,#12b95e);color:#03220f;flex:.62}
.btn.lunge{background:linear-gradient(#ff5262,#d81f30);color:#fff;flex:1.5}
.btn.ab{background:linear-gradient(#b888ff,#7a3fe0);color:#fff}
.btn.cool{filter:grayscale(.85) brightness(.6)}
.btn .cd{position:absolute;inset:auto 0 0 0;background:#0006;height:0}
.sense{position:absolute;right:8px;top:8px;width:46px;height:46px;border:2px solid #ffffff2a;border-radius:50%;display:grid;place-items:center;color:var(--blood);font-size:30px}
.mapwrap{flex:1;min-height:0;background:#000;border-radius:10px;overflow:hidden;position:relative}
.mapwrap canvas{width:100%;height:100%;display:block}
.tagline{font-size:22px;text-align:center;line-height:1.1;color:var(--ink)}
.tagline b{color:var(--hot)}
.ghost-hint{font-size:21px;color:var(--dim);text-align:center;line-height:1.05}
.betbar{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.betbar button{background:#2a2130;border-radius:10px;padding:4px 10px 4px 4px;font-size:22px;display:flex;align-items:center;gap:6px}
.betbar img{width:32px;height:32px}
.betbar .sel{background:var(--go);color:#04220f}

/* Message screens */
.big-msg{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:10px;gap:8px}
.big-msg h1{font-family:'Shrikhand';font-weight:400;font-size:46px;line-height:1;color:var(--sun)}
.big-msg h1.red{color:var(--blood)}
.big-msg h1.hot{color:var(--hot)}
.big-msg h2{font-size:30px;font-weight:700;line-height:1.05}
.big-msg p{font-size:25px;line-height:1.1;color:#f4ecdebb}
.big-msg .amt{font-family:'VT323';font-size:64px;color:var(--go);line-height:1}
.count{font-family:'VT323';font-size:100px;color:var(--led)}
.formlist{display:flex;flex-direction:column;gap:8px;width:100%}
.form{background:#2a2130;border-radius:12px;padding:10px 12px;text-align:left;border:2px solid transparent}
.form b{font-family:'Shrikhand';font-weight:400;font-size:26px;color:var(--hot);display:block;line-height:1}
.form span{font-size:20px;line-height:1.05;display:block;color:#f4ecdecc}
.form.sel{border-color:var(--sun);background:#3a2c40}
.form em{font-style:normal;color:var(--cyan)}
.shop{display:flex;flex-direction:column;gap:8px;width:100%}
.perk{background:#2a2130;border-radius:12px;padding:10px 12px;display:flex;justify-content:space-between;gap:8px;align-items:center;text-align:left}
.perk b{font-size:26px;line-height:1}
.perk span{font-size:20px;line-height:1.05;color:#f4ecdecc;display:block}
.perk .buy{background:var(--sun);color:#231804;font-weight:700;font-size:23px;border-radius:9px;padding:8px 10px;white-space:nowrap}
.perk .buy:disabled{background:#3a3040;color:#6a6070}
.perk.owned{opacity:.5}
.vote{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;width:100%}
.vote button{background:#2a2130;border-radius:12px;padding:8px;display:flex;align-items:center;gap:8px;font-size:25px;border:2px solid transparent;text-align:left;line-height:1}
.vote img{width:46px;height:46px}
.vote button.sel{border-color:var(--go)}
.lastwords{width:100%;display:flex;flex-direction:column;gap:8px}
.lastwords input{width:100%;font-family:'VT323';font-size:30px;background:var(--ledbg);color:var(--led);border:0;border-radius:8px;padding:8px 10px}
.quick{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.quick button{background:#2a2130;border-radius:9px;padding:6px 10px;font-size:22px}

#conn{position:fixed;left:0;right:0;top:0;background:var(--blood);color:#fff;text-align:center;font-size:22px;padding:calc(env(safe-area-inset-top) + 2px) 4px 2px;z-index:9}
#toast{position:fixed;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom) + 14px);background:#000d;color:var(--ink);text-align:center;font-size:23px;padding:8px;border-radius:8px;z-index:8}

@keyframes throb{0%{box-shadow:inset 0 0 0 #ff2a3a00}50%{box-shadow:inset 0 0 60px #ff2a3a}100%{box-shadow:inset 0 0 0 #ff2a3a00}}
.pulse{animation:throb var(--pulse,1s) infinite}
@keyframes scare{0%,100%{filter:none}30%{filter:invert(1)}60%{filter:contrast(3)}}
.scrambled{animation:scare .18s steps(2) infinite}
.scrambled .stick{background:repeating-linear-gradient(0deg,#fff2 0 2px,#0000 2px 5px)}
@media (min-width:640px) and (orientation:landscape){
  .play{flex-direction:row;gap:12px}
  .pad{height:auto;flex:1.1;margin-top:0}
  .status{flex:.9}
}
@media (prefers-reduced-motion:reduce){.pulse{animation:none}.scrambled{animation:none}}