[hidden] { display: none !important; }
:root { --fg: #ffffff; --dim: #aaaaaa; --hi: #ffe455; --bg: #000000; --edge: #3c64dc; }
body.mode-green { --fg: #66ff66; --dim: #2f9a3a; --hi: #b6ffb6; --bg: #020c03; --edge: #1f8f1f; }
body.mode-amber { --fg: #ffb733; --dim: #a36a00; --hi: #ffd890; --bg: #100800; --edge: #a35c00; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); }
body { font-family: "Courier New", Courier, ui-monospace, Menlo, Consolas, monospace; font-weight: 700; font-size: 17px; line-height: 1.35;
  -webkit-text-size-adjust: 100%; min-height: 100vh; }
#app { max-width: 960px; margin: 0 auto; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; }
#screen { position: relative; border: 4px solid var(--edge); background: #000; line-height: 0; }
#cv { width: 100%; height: auto; aspect-ratio: 16 / 9; image-rendering: pixelated; image-rendering: crisp-edges; display: block; touch-action: manipulation; }
.scan { 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,.18) 3px); }
body.mode-color .scan { opacity: .45; }
#panel { min-height: 200px; text-shadow: 0 0 4px color-mix(in srgb, var(--fg) 45%, transparent); }
#text p { margin: 0 0 .6em; }
#text .big { font-size: 1.2em; color: var(--hi); }
#text .small { font-size: .9em; }
#text .msg { color: var(--hi); border-left: 4px solid var(--hi); padding-left: 8px; }
#text h3 { margin: .2em 0 .4em; color: var(--hi); text-transform: uppercase; letter-spacing: 1px; }
.hud { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; border: 2px solid var(--dim); padding: 6px 10px; margin-bottom: 10px; font-size: .92em; }
.hud b { color: var(--dim); font-weight: 700; }
table.sup { border-collapse: collapse; margin-bottom: 8px; }
table.sup td { padding: 1px 14px 1px 0; }
ul.party { margin: 0; padding-left: 1.2em; }
#menu { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: left; }
.opt { padding: 6px 8px; min-height: 40px; width: 100%; border: 2px solid transparent; }
.opt:hover, .opt:focus-visible { border-color: var(--fg); outline: none; background: color-mix(in srgb, var(--fg) 12%, transparent); }
.opt .n { color: var(--hi); }
.opt .price { color: var(--dim); }
.opt.off { opacity: .45; cursor: not-allowed; }
.opt.cont { color: var(--hi); width: auto; animation: blink 1.2s steps(2, start) infinite; }
@keyframes blink { 50% { opacity: .55; } }
.ask { display: flex; align-items: stretch; gap: 8px; width: 100%; }
.ask input { font: inherit; font-size: max(16px, 1em); color: var(--fg); background: var(--bg); border: 2px solid var(--fg); padding: 6px 10px; min-height: 44px;
  flex: 1 1 auto; width: auto; min-width: 10ch; caret-color: var(--hi); }
.ask input::placeholder { color: var(--dim); opacity: 1; }
.ask input:focus { outline: 2px solid var(--hi); outline-offset: 1px; }
.ask .okb, .okb { flex: 0 0 auto; width: auto; min-width: 64px; min-height: 44px; border: 2px solid var(--fg); padding: 6px 16px; text-align: center; }
#touch { display: flex; gap: 8px; }
#touch[hidden] { display: none; }
#touch button { flex: 1; min-height: 56px; border: 3px solid var(--fg); text-align: center; font-size: 1.3em; user-select: none; -webkit-user-select: none; touch-action: none; }
#touch #t-fire { flex: 1.6; white-space: nowrap; }
#touch button:active { background: color-mix(in srgb, var(--fg) 25%, transparent); }
footer { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; border-top: 2px solid var(--dim); padding-top: 8px; font-size: .85em; color: var(--dim); }
footer button { border: 2px solid var(--dim); padding: 4px 10px; color: var(--fg); }
footer .fine { margin-left: auto; }
@media (min-width: 900px) { body { font-size: 18px; } }
@media (max-width: 520px) { body { font-size: 15px; } #touch button { font-size: 1.15em; } .hud { grid-template-columns: 1fr; } #panel { min-height: 260px; } }
#tipjar { color: var(--dim); }
#tipjar a { color: var(--fg); text-decoration: underline; }
#tipjar a.tip2 { color: var(--dim); font-size: .9em; }
/* ---------- homepage ---------- */
#home { max-width: 960px; margin: 0 auto; padding: 14px 12px calc(14px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; }
.home-head { border: 4px solid var(--edge); padding: 18px 14px; text-align: center; background: linear-gradient(#1a1a6e 0 60%, #2f8a2f 60% 100%); }
.logo { margin: 0; font-size: clamp(28px, 7vw, 56px); letter-spacing: 4px; color: #ffe455; text-shadow: 3px 3px 0 #a01818; }
.home-head .sub { margin: 8px 0 0; color: #fff; }
body.mode-green .home-head, body.mode-amber .home-head { background: none; }
body.mode-green .logo, body.mode-amber .logo, body.mode-green .home-head .sub, body.mode-amber .home-head .sub { color: var(--hi); text-shadow: none; }
#home h2 { margin: 4px 0 8px; font-size: 1em; color: var(--hi); text-transform: uppercase; letter-spacing: 1px; }
.home-tools { position: sticky; top: 0; z-index: 2; background: var(--bg); padding: 6px 0; display: flex; gap: 10px; align-items: center; }
.search { flex: 1; } .search input { width: 100%; font: inherit; color: var(--fg); background: var(--bg); border: 2px solid var(--fg); padding: 8px 10px; }
.search input:focus { outline: 2px solid var(--hi); }
#town-random { width: auto; border-color: var(--fg); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.towns { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.towns.scroll { max-height: 70vh; overflow-y: auto; padding-right: 4px; }
.tcard { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 2px solid var(--fg); color: var(--fg); text-decoration: none; position: relative; }
a.tcard:hover, a.tcard:focus-visible { background: color-mix(in srgb, var(--fg) 12%, transparent); outline: 2px solid var(--hi); }
.tcard.big { border: 4px solid var(--hi); padding: 14px; }
.tcard.big .tname { font-size: 1.5em; }
.tcard.teaser { border-style: dashed; color: var(--dim); cursor: default; }
.tname { font-size: 1.15em; color: var(--hi); } .teaser .tname { color: var(--dim); }
.tstate { color: var(--dim); font-size: .85em; } .ttag { } .tjoke { color: var(--dim); font-size: .9em; }
.badge { font-size: .75em; color: var(--bg); background: var(--hi); align-self: flex-start; padding: 1px 6px; }
.badge.soonb { background: var(--dim); }
.go { color: var(--hi); margin-top: 4px; }
#home .msg { color: var(--hi); border-left: 4px solid var(--hi); padding-left: 8px; margin: 0; }
.dim { color: var(--dim); }
.home-foot { display: flex; flex-wrap: wrap; gap: 6px 16px; border-top: 2px solid var(--dim); padding-top: 10px; font-size: .9em; color: var(--dim); }
.home-foot .fine { margin-left: auto; }
a.beer, .home-foot a { color: var(--fg); text-decoration: underline; position: relative; z-index: 3; }
footer .home-link { color: var(--fg); border: 2px solid var(--dim); padding: 4px 10px; text-decoration: none; }
@media (max-width: 600px) { .towns { grid-template-columns: 1fr; } .home-foot .fine { margin-left: 0; } }
.opt .tier { font-size: .75em; padding: 0 5px; margin-left: 6px; border: 1px solid currentColor; vertical-align: middle; }
.opt .t-easy { color: var(--fg); } .opt .t-med { color: var(--hi); } .opt .t-hard { color: #ff5555; }
body.mode-green .opt .t-hard, body.mode-amber .opt .t-hard { color: var(--hi); text-decoration: underline; }