/* Layout: one arcade cabinet column — bezel + 256x224 canvas on top, thumb controls underneath. Single dark look by choice. */
:root{
  --bg:#110e18; --bezel:#1d1828; --edge:#2e2640; --fg:#f4eefc; --muted:#9a8fb3;
  --pink:#ff3b6b; --gold:#ffb21e; --cyan:#25f4ee;
  --pix:"Press Start 2P", ui-monospace, "Courier New", monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}[hidden]{display:none!important}html,body{height:100%;margin:0}html{touch-action:manipulation}
body{background:var(--bg);color:var(--fg);font-family:var(--pix);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-top:max(12px,env(safe-area-inset-top,0px));padding-bottom:max(12px,env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:center;gap:14px;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overflow-x:hidden}
.cab{width:100%;max-width:768px;background:var(--bezel);border:2px solid var(--edge);border-radius:6px;padding:10px;box-sizing:border-box;display:flex;flex-direction:column;gap:8px}
.top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:9px;color:var(--muted);letter-spacing:.06em}
.top b{color:var(--pink);font-weight:400}
.screen{width:100%;aspect-ratio:256/224;max-width:100%;background:#000;border:2px solid #000;box-sizing:border-box}
canvas{width:100%;height:100%;display:block;image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none}
button{font-family:var(--pix);color:var(--fg);cursor:pointer;touch-action:manipulation}
#mute{background:transparent;border:1px solid var(--edge);border-radius:3px;font-size:8px;padding:6px 8px;color:var(--muted)}
#mute:focus-visible,.pad button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.pad{width:100%;max-width:768px;display:flex;justify-content:space-between;align-items:center;gap:12px;touch-action:none}
.dpad{display:grid;grid-template-columns:repeat(3,64px);grid-template-rows:56px;gap:8px}
.pad button{background:var(--bezel);border:2px solid var(--edge);border-radius:8px;font-size:14px;touch-action:none;box-shadow:0 4px 0 #000}
.pad button.on{transform:translateY(3px);box-shadow:0 1px 0 #000;border-color:var(--cyan)}
#bJ{width:96px;height:96px;border-radius:50%;background:var(--pink);border-color:#a3163d;font-size:11px}
.hint{font-size:8px;color:var(--muted);line-height:1.9;text-align:center;max-width:60ch}
@media (max-width:380px){.dpad{grid-template-columns:repeat(3,56px)}#bJ{width:84px;height:84px}}
@media (hover:hover) and (pointer:fine){.pad{display:none}}
@media (prefers-reduced-motion:reduce){.pad button{transition:none}}

.screen{position:relative}
.ov{position:absolute;inset:0;background:rgba(12,8,22,.96);overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px;font-size:9px;line-height:1.7;-webkit-user-select:text;user-select:text}
.ov h2{margin:0;font-size:11px;font-weight:400;color:var(--gold);text-wrap:balance}
.ov p{margin:0;color:var(--muted)}
.field{display:flex;align-items:center;gap:6px;background:#000;border:2px solid var(--edge);border-radius:4px;padding:0 8px}
.field:focus-within{border-color:var(--cyan)}
.field span{color:var(--pink);font-size:12px}
.field input{flex:1;min-width:0;background:transparent;border:0;color:var(--fg);font-family:var(--pix);font-size:16px;padding:10px 0;outline:none}
.chk{display:flex;gap:8px;align-items:flex-start;color:var(--fg)}
.chk input{width:18px;height:18px;flex:none;accent-color:var(--pink);margin:0}
details{color:var(--muted)}summary{cursor:pointer;color:var(--cyan)}
details ul{margin:6px 0 0;padding-left:16px}
.row{display:flex;gap:8px;flex-wrap:wrap}
.btn{background:var(--pink);border:0;border-radius:4px;padding:10px 12px;font-size:9px;box-shadow:0 3px 0 #a3163d}
.btn.alt{background:var(--edge);box-shadow:0 3px 0 #000}
.btn:disabled{opacity:.45;cursor:default}
.btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.err{color:#ff8a8a;min-height:1em}
.tbl{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tbl th{color:var(--muted);font-weight:400;text-align:left;padding:3px 2px;border-bottom:1px solid var(--edge)}
.tbl td{padding:5px 2px;border-bottom:1px solid #241d33;white-space:nowrap}
.tbl td.h{overflow:hidden;text-overflow:ellipsis;max-width:9ch}
.tbl .n{text-align:right}
.tbl tr.me td{color:var(--cyan)}
.tbl tr.p1 td:first-child{color:#ffd23f}.tbl tr.p2 td:first-child{color:#d7dbe6}.tbl tr.p3 td:first-child{color:#e0955a}
#topBtn,#who{background:transparent;border:1px solid var(--edge);border-radius:3px;font-size:8px;padding:6px 8px;color:var(--muted)}
.tops{display:flex;gap:6px}
.ov.full{position:fixed;z-index:30;justify-content:center;padding-top:max(16px,env(safe-area-inset-top,0px));padding-bottom:max(16px,env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.ov.full>*{width:100%;max-width:520px;margin-inline:auto}
.ov.full>.card{width:auto}
.ov.center{text-align:center}.ov.center .row{justify-content:center}
.ov.full h2{font-size:13px}.ov.full{font-size:10px}
.card{height:min(62vh,760px);width:auto;max-width:100%;border:2px solid var(--edge);border-radius:6px;-webkit-touch-callout:default;-webkit-user-select:auto;user-select:auto}
.link{color:var(--cyan)!important;word-break:break-all}
#bShare{background:var(--gold);color:#1a1020;box-shadow:0 3px 0 #8a4a00}
@media (pointer:coarse){.hint{display:none}}

.tabs{display:flex;gap:6px}
.tab{background:transparent;border:1px solid var(--edge);border-radius:3px;font-size:9px;padding:8px 10px;color:var(--muted)}
.tab[aria-pressed="true"]{background:var(--edge);color:var(--gold);border-color:var(--gold)}
.tab:focus-visible,#topBtn:focus-visible,#who:focus-visible,.iglink:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
#bRetry{background:var(--cyan);color:#06221f;box-shadow:0 3px 0 #0b6b67}
.iglink{display:block;text-align:center;font-size:9px;line-height:1.6;color:var(--cyan);text-decoration:none;border:1px solid var(--edge);border-radius:4px;padding:10px 8px;word-break:break-all}
/* Phone held sideways: fit the screen to the height and float the controls over the sides. */
@media (orientation:landscape) and (max-height:540px){
  body{padding-top:max(6px,env(safe-area-inset-top,0px));padding-bottom:max(6px,env(safe-area-inset-bottom,0px));gap:6px}
  .cab{max-width:calc((100vh - 64px) * 1.143);max-width:calc((100dvh - 64px) * 1.143);padding:6px;gap:4px}
  .pad{position:fixed;left:0;right:0;bottom:max(8px,env(safe-area-inset-bottom,0px));max-width:none;
    padding-left:max(10px,env(safe-area-inset-left,0px));padding-right:max(10px,env(safe-area-inset-right,0px));pointer-events:none}
  .pad>*{pointer-events:auto}.pad button{opacity:.82}
  .dpad{grid-template-columns:repeat(3,48px);grid-template-rows:48px;gap:6px}#bJ{width:76px;height:76px}
  .iglink{padding:4px 6px;font-size:8px}
}
@media (orientation:landscape) and (max-height:540px) and (max-width:700px){
  .cab{max-width:calc(100vw - 2 * 172px)}
  .dpad{grid-template-columns:repeat(3,44px);grid-template-rows:44px;gap:4px}#bJ{width:68px;height:68px}
}
.top>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tops button{white-space:nowrap;flex:none}
.tbl td.empty{white-space:normal;color:var(--muted)}
.tbl td.wrap{white-space:normal;line-height:1.6}
.ov a,.legal a{color:var(--cyan)}
.legal{font-size:8px;color:var(--muted);margin:0;text-align:center}
.legal a:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.code{color:var(--fg)!important}.code b{color:var(--gold);font-weight:400;letter-spacing:.08em}
/* overlays taller than the screen scroll from the top instead of being cut off above it */
.ov.full{justify-content:flex-start}.ov.full>:first-child{margin-top:auto}.ov.full>:last-child{margin-bottom:auto}
.ov{overflow-wrap:anywhere}
#who{min-width:0;max-width:34vw;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}
.tops{min-width:0}
/* bigger touch targets */
#mute,#topBtn,#who{padding:9px 9px;min-height:32px}
.tab{padding:11px 10px;min-height:36px}
.btn{padding:12px 13px;min-height:38px}
.chk input{width:22px;height:22px}
.legal{font-size:9px;padding:4px 0}.legal a{display:inline-block;padding:8px 4px}
@media (max-width:380px){#mute,#topBtn,#who{padding:9px 5px;font-size:7px}.tops{gap:4px}}
.tops{flex:0 0 auto;min-width:auto}.top>span:first-child{flex:1 1 auto}
.tabs{flex-wrap:wrap}#bDare{background:var(--cyan);color:#06221f;box-shadow:0 3px 0 #0b6b67}