/* Layout: one-screen arcade cabinet. Top bar, a 9:16 playfield centered in the leftover space, one line of fine print. Single deliberate dark look. */
:root{
  --ink:#17132f;      /* night-sky playfield */
  --panel:#251f4a;    /* cabinet panels, cards */
  --line:#3d3576;     /* frames, dividers */
  --shadow:#0b0920;
  --paper:#f5ecda;    /* text, player ship */
  --muted:#a59cc8;
  --gold:#ffc83d;     /* deals, score, primary action */
  --hit:#ff5c7c;      /* danger, expired */
  --sky:#68d6ff;      /* focus, player outline */
  --display:'Silkscreen','Courier New',monospace;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  color-scheme:dark;
}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--mono);overflow:hidden}
.app{height:100%;box-sizing:border-box;max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:10px;padding-inline:16px;padding-block:10px}
.bar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.logo{display:flex;align-items:baseline;gap:8px;margin:0}
.logo b{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:.04em;color:var(--gold);line-height:1}
.logo b i{font-style:normal;color:var(--hit)}
.logo small{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);padding:2px 6px}
.actions{display:flex;gap:6px}
.btn{font-family:var(--display);font-size:12px;line-height:1;background:var(--panel);color:var(--paper);border:2px solid var(--line);padding:8px 10px;box-shadow:0 3px 0 var(--shadow);cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--muted)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--shadow)}
.btn:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
.btn.primary{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.btn .n{color:var(--gold)}
.stage{flex:1;min-height:0;display:grid;place-items:center}
.screen{position:relative;outline:2px solid var(--line);box-shadow:0 0 0 7px var(--panel),0 20px 40px var(--shadow);font-size:14px}
canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}
.fine{margin:0;font-size:11px;color:var(--muted);text-align:center}

/* Overlays live inside the playfield and scale with it (font-size set from JS) */
.ov{position:absolute;inset:0;box-sizing:border-box;padding:1.1em;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--ink) 80%,transparent)}
.card{width:100%;box-sizing:border-box;max-height:100%;overflow:auto;background:var(--panel);border:2px solid var(--line);box-shadow:0 .35em 0 var(--shadow);padding:1.2em;display:flex;flex-direction:column;gap:.75em}
.card h2,.coupon h2{margin:0;font-family:var(--display);font-weight:700;line-height:1.05;text-wrap:balance}
.card h2{font-size:2.1em;color:var(--gold)}
.card h2 i{font-style:normal;color:var(--hit)}
.card p{margin:0;line-height:1.45}
.lede{color:var(--paper);font-size:1.02em}
.steps{margin:0;padding-left:1.3em;display:flex;flex-direction:column;gap:.4em;line-height:1.4;font-size:.92em}
.steps b{color:var(--gold);font-weight:600}
.meta{font-size:.8em;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.row{display:flex;gap:.5em;flex-wrap:wrap}
.card .btn,.coupon .btn{font-size:.9em;padding:.7em .9em}
.stats{display:grid;grid-template-columns:1fr auto;gap:.35em 1em;font-variant-numeric:tabular-nums;margin:0}
.stats dt{color:var(--muted)}
.stats dd{margin:0;text-align:right;font-family:var(--display)}

/* Deal coupon: a tear-off ticket in the sponsor's color */
.coupon{--b:var(--gold);--bf:var(--ink);width:100%;box-sizing:border-box;background:var(--paper);color:var(--ink);border:2px dashed var(--ink);outline:3px solid var(--b);display:flex;flex-direction:column;max-height:100%;overflow:auto;animation:drop .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes drop{from{transform:translateY(-30%) rotate(-4deg);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.coupon{animation:none}}
.cp-head{background:var(--b);color:var(--bf);display:flex;justify-content:space-between;gap:.5em;padding:.5em .9em;font-size:.72em;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.cp-body{padding:1em .9em 1.1em;display:flex;flex-direction:column;gap:.6em}
.cp-eyebrow{margin:0;font-family:var(--display);font-size:.85em;color:var(--hit);letter-spacing:.06em}
.coupon h2{font-size:1.5em}
.offer{margin:0;font-size:1.15em;font-weight:600;line-height:1.3}
.code-row{display:flex;gap:.5em;align-items:stretch;flex-wrap:wrap}
.code{flex:1;min-width:0;font-family:var(--display);font-size:1.15em;letter-spacing:.08em;padding:.45em .6em;border:2px dashed var(--ink);background:color-mix(in srgb,var(--b) 18%,var(--paper));user-select:all;overflow-wrap:anywhere}
.coupon .btn{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.coupon .btn.primary{background:var(--gold);color:var(--ink);border-color:var(--ink)}
.cp-fine{margin:0;font-size:.78em;line-height:1.4;color:#4a4268}

/* Wallet */
.wallet-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55em}
.wallet-list li{--b:var(--gold);display:grid;grid-template-columns:.45em 1fr auto;gap:.2em .7em;align-items:center;background:var(--ink);border:1px solid var(--line);padding:.6em .7em .6em 0}
.wallet-list .sw{grid-row:span 2;align-self:stretch;background:var(--b)}
.wallet-list .w-brand{font-size:.75em;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;min-width:0}
.wallet-list .w-offer{font-size:.92em;line-height:1.3;min-width:0}
.wallet-list .w-code{grid-row:span 2;display:flex;flex-direction:column;align-items:flex-end;gap:.3em}
.wallet-list .w-code code{font-family:var(--display);font-size:.85em;color:var(--gold)}
.wallet-list .btn{font-size:.7em;padding:.5em .6em}
.empty{color:var(--muted);font-size:.92em}

/* Sponsor preview form */
.field{display:flex;flex-direction:column;gap:.3em;min-width:0;flex:1}
.field.narrow{flex:0 0 auto}
.field-row{display:flex;gap:.7em;flex-wrap:wrap}
.field label{font-size:.78em;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.field label span{text-transform:none;letter-spacing:0}
.field input{font:inherit;font-size:max(16px,.95em);color:var(--paper);background:var(--ink);border:2px solid var(--line);padding:.45em .55em;min-width:0;box-sizing:border-box;width:100%}
.field input:focus-visible{outline:2px solid var(--sky);outline-offset:1px}
.field input[type=color]{padding:.15em;height:2.3em;width:3.4em;cursor:pointer}
.field input[type=file]{font-size:.8em;padding:.35em}
.form-err{margin:0;color:var(--hit);font-size:.85em}

.live-note{margin:0;font-size:.85em;color:var(--gold);line-height:1.4}
#tsBox:empty{display:none}
.fine a{color:var(--muted)}
.btn:disabled{opacity:.6;cursor:wait}
a.btn{text-decoration:none;display:inline-block}