:root{
  --k:#000;--r:#ff2a2a;--g:#18e038;--y:#ffe81a;--b:#2a3cff;--m:#ff35ff;--c:#1ae8ff;--w:#fff;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#0b0b0e;color:#fff;font-family:system-ui,sans-serif}
body{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:8px}

#tv{position:relative;background:#000;border-radius:14px;overflow:hidden;
    box-shadow:0 0 0 6px #1b1b22,0 0 0 8px #2c2c36,0 12px 40px rgba(0,0,0,.7)}
#screen{font-family:'Press Start 2P',ui-monospace,Menlo,Consolas,monospace;white-space:pre;color:var(--w);user-select:none}
.ln{overflow:hidden;white-space:pre;height:1.25em;line-height:1.25em}
.go{cursor:pointer}
.go:hover{filter:brightness(1.35)}

/* scanlines + vignetta */
#tv::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,rgba(0,0,0,.16) 3px);
  box-shadow:inset 0 0 60px rgba(0,0,0,.55)}
body.flat #tv::after{display:none}

.fk{color:var(--k)}.fr{color:var(--r)}.fg{color:var(--g)}.fy{color:var(--y)}
.fb{color:var(--b)}.fm{color:var(--m)}.fc{color:var(--c)}.fw{color:var(--w)}
.bk{background:var(--k)}.br{background:var(--r)}.bg{background:var(--g)}.by{background:var(--y)}
.bb{background:var(--b)}.bm{background:var(--m)}.bc{background:var(--c)}.bw{background:var(--w)}
.blink{animation:bl 1s steps(1) infinite}
@keyframes bl{50%{opacity:0}}

#pad{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:560px}
#pad button{font:600 14px system-ui;min-width:38px;height:34px;border-radius:8px;border:1px solid #33333f;background:#1a1a22;color:#ddd;cursor:pointer}
#pad button:hover{background:#262633}
#pad .col{min-width:56px;color:#000;border:none}
#hint{font-size:12px;color:#8a8a99;text-align:center;max-width:560px}

/* modalità pannello / kiosk: ?kiosk=1 */
body.kiosk{padding:0;gap:0;background:#000}
body.kiosk #pad,body.kiosk #hint{display:none}
body.kiosk #tv{border-radius:0;box-shadow:none}