@font-face{
  font-family:'PacLocal';
  src:url('../../fonts/press-start-2p.woff2') format('woff2');
  font-display:swap;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:#000}
body{
  font-family:'PacLocal','Press Start 2P','Courier New',monospace;
  color:#fff;-webkit-font-smoothing:none;text-rendering:geometricPrecision;
  overscroll-behavior:none;touch-action:manipulation;
}

/* layers */
#bg{position:fixed;inset:0;z-index:0;opacity:.5}
#app{position:fixed;inset:0;z-index:2;display:flex;flex-direction:column;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
#crt{position:fixed;inset:0;z-index:90;pointer-events:none;
  background:repeating-linear-gradient(to bottom,
    rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,.28) 3px, rgba(0,0,0,.28) 4px);
  mix-blend-mode:multiply}
#vig{position:fixed;inset:0;z-index:91;pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(0,0,0,0) 45%, rgba(0,0,0,.75) 100%)}
#flash{position:fixed;inset:0;z-index:95;pointer-events:none;opacity:0;transition:opacity .12s}

/* HUD */
#hud{flex:0 0 auto;padding:10px 12px 6px;border-bottom:2px solid #1a1a5e;
  background:linear-gradient(180deg,#05050f 0%,#000 100%);display:none}
#hud.on{display:block}
.hudrow{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:1px}
#score{color:#ffde00;text-shadow:0 0 8px rgba(255,222,0,.7);cursor:pointer}
#phase{color:#38e6ff;text-shadow:0 0 8px rgba(56,230,255,.6);font-size:8px;
  max-width:55%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#teamchip{font-size:8px}
#hudcanvas{width:100%;height:44px;display:block;margin-top:6px}
#mult{color:#ff77c8;font-size:8px}
#holder{font-size:8px;color:#00e676;letter-spacing:2px;
  text-shadow:0 0 8px rgba(0,230,118,.5);
  max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

/* screens */
.screen{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:20px 18px 28px;display:none;flex-direction:column}
.screen.on{display:flex}
.wrap{margin:auto;width:100%;max-width:460px}

/* type */
.t-micro{font-size:8px;letter-spacing:2px;color:#6b6b9e;line-height:1.9}
.t-phase{font-size:8px;letter-spacing:3px;color:#38e6ff;margin-bottom:14px;
  text-shadow:0 0 10px rgba(56,230,255,.5)}
h1{font-size:17px;line-height:1.7;letter-spacing:1px;color:#fff;
  text-shadow:0 0 12px rgba(255,255,255,.25);margin-bottom:14px}
h1.y{color:#ffde00;text-shadow:0 0 14px rgba(255,222,0,.55)}
h1.r{color:#ff3b30;text-shadow:0 0 14px rgba(255,59,48,.55)}
p.body{font-size:10px;line-height:2.1;color:#c9c9e8;white-space:pre-wrap;margin-bottom:18px}
.hl{color:#ffde00}

/* panels */
.panel{border:3px solid #2121de;padding:16px;margin-bottom:16px;background:rgba(4,4,20,.72);
  box-shadow:0 0 0 3px #000, 0 0 22px rgba(33,33,222,.45), inset 0 0 22px rgba(33,33,222,.18)}
.panel.y{border-color:#ffde00;background:rgba(20,16,2,.72);
  box-shadow:0 0 0 3px #000,0 0 22px rgba(255,222,0,.35),inset 0 0 22px rgba(255,222,0,.1)}

/* inputs */
input[type=text],input[type=number]{
  width:100%;background:#000;border:3px solid #2121de;color:#ffde00;
  font-family:inherit;font-size:15px;padding:16px 14px;letter-spacing:2px;
  text-align:center;text-transform:uppercase;outline:none;
  box-shadow:inset 0 0 18px rgba(33,33,222,.3)}
input:focus{border-color:#ffde00;box-shadow:inset 0 0 18px rgba(255,222,0,.22),0 0 18px rgba(255,222,0,.3)}
input::placeholder{color:#3a3a72;letter-spacing:2px}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield}

/* buttons */
.btn{display:block;width:100%;background:#2121de;color:#fff;border:0;font-family:inherit;
  font-size:11px;letter-spacing:2px;padding:18px 12px;cursor:pointer;position:relative;
  box-shadow:0 5px 0 #0d0d73, 0 0 20px rgba(33,33,222,.4);
  transition:transform .05s, box-shadow .05s}
.btn:active{transform:translateY(5px);box-shadow:0 0 0 #0d0d73}
.btn.y{background:#ffde00;color:#000;box-shadow:0 5px 0 #8a7800,0 0 20px rgba(255,222,0,.4)}
.btn.y:active{box-shadow:0 0 0 #8a7800}
.btn.ghost{background:transparent;color:#8a8ac0;border:3px solid #2a2a6e;box-shadow:none}
.btn.ghost:active{transform:none;background:#0d0d24}
.btn[disabled]{opacity:.32;pointer-events:none}
.btn.sm{font-size:8px;padding:12px;letter-spacing:1px}
.btnrow{display:flex;gap:10px}

/* options */
.opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:#08081c;border:3px solid #26266e;color:#d8d8f5;font-family:inherit;
  font-size:10px;letter-spacing:1px;padding:16px 14px;margin-bottom:10px;cursor:pointer;line-height:1.6}
.opt:active{background:#12123a}
.opt .dot{flex:0 0 auto;width:11px;height:11px;background:#ffde00;border-radius:50%;
  box-shadow:0 0 8px rgba(255,222,0,.8)}
.opt.right{border-color:#00e676;background:#03231a;color:#00e676;box-shadow:0 0 22px rgba(0,230,118,.4)}
.opt.wrong{border-color:#ff3b30;background:#280606;color:#ff3b30;opacity:.55}

/* toast / fx */
#toast{position:fixed;left:50%;top:16%;transform:translateX(-50%);z-index:96;background:#000;
  border:3px solid #ffde00;color:#ffde00;font-size:10px;padding:14px 18px;letter-spacing:2px;
  opacity:0;pointer-events:none;transition:opacity .2s, top .2s;white-space:nowrap;max-width:92vw;
  overflow:hidden;text-overflow:ellipsis;box-shadow:0 0 26px rgba(255,222,0,.45)}
#toast.on{opacity:1;top:19%}
.blink{animation:bl 1s steps(1) infinite}
@keyframes bl{50%{opacity:0}}
.shake{animation:sh .38s}
@keyframes sh{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}
  40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}

/* READY splash */
#ready{position:fixed;inset:0;z-index:94;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.93);letter-spacing:3px;text-align:center;padding:0 14px}
#ready.on{display:flex}
.ready-name{font-size:20px;line-height:1.6;padding:0 16px;word-break:break-word}