/* The arcade (game night, /arcade): direction C, "16-Bit Couch". A night-blue
   console menu, white-bordered panels, pixel type. Dark only, like a CRT. */
:root {
  color-scheme: dark;
  --bg: #0b0f2e;
  --panel: #1f2fa0;
  --panel-2: #16207a;
  --edge: #3a4bb8;
  --line: #ffffff;
  --text: #ffffff;
  --soft: #dfe3ff;
  --dim: #b8c0ff;
  --faint: #7c86d6;
  --lime: #9cff3c;
  --lime-d: #4f9a12;
  --gold: #ffd34d;
  --gold-d: #a8811a;
  --pink: #ff5d73;
  --cyan: #59d8ff;
  --f-pixel: 'Jersey 10', ui-monospace, monospace;
  --f-label: 'Silkscreen', ui-monospace, monospace;
  --f-body: 'Atkinson Hyperlegible', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 12px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.45 var(--f-body); }
/* faint scanlines over everything */
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 50;
  background: repeating-linear-gradient(to bottom, rgb(0 0 0 / 0.14) 0 1px, transparent 1px 3px);
}
a { color: var(--lime); }
a:hover { color: #d4ffaa; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
[hidden] { display: none !important; }
img { max-width: 100%; }

.wrap { max-width: 560px; margin: 0 auto; padding: 12px 16px 48px; display: flex; flex-direction: column; gap: 20px; }

.label { font: 400 11px/1.4 var(--f-label); letter-spacing: 0.04em; text-transform: uppercase; color: var(--dim); margin: 0; }
.hint { margin: 0; color: var(--soft); font-size: 15px; }
h2 {
  margin: 0 0 10px; font: 400 30px/1 var(--f-pixel); color: var(--gold); letter-spacing: 0.04em; text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
}
h2::before { content: ''; width: 10px; height: 10px; background: var(--lime); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--lime); flex: none; }
section > .hint { margin-bottom: 10px; }

/* ---- top bar: the mode switch and who you are ------------------------------ */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.modes { display: inline-flex; border: 2px solid var(--edge); border-radius: 6px; overflow: hidden; }
.modes a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; text-decoration: none;
  font: 400 11px var(--f-label); color: var(--dim); text-transform: uppercase;
}
.modes a[aria-current] { background: var(--lime); color: var(--bg); }
.who { display: flex; align-items: center; gap: 10px; font: 400 11px var(--f-label); color: var(--lime); text-transform: uppercase; }
.linkish { background: none; border: 0; padding: 10px 4px; margin: -10px -4px; color: var(--dim); font: 400 11px var(--f-label); text-transform: uppercase; text-decoration: underline; cursor: pointer; }

.jump { display: flex; flex-wrap: wrap; gap: 4px; }
.jump a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 7px; border: 2px solid var(--edge); border-radius: 4px;
  font: 400 11px var(--f-label); text-transform: uppercase; color: var(--dim); text-decoration: none;
}
.jump a:hover { border-color: var(--lime); color: var(--lime); }

/* ---- the cabinet header -------------------------------------------------------- */
.cabinet { text-align: center; padding: 18px 12px 16px; border: 3px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: inset 0 0 0 2px var(--bg), 0 6px 0 var(--panel-2); }
.cabinet h1 { margin: 6px 0 4px; font: 400 clamp(60px, 19vw, 88px)/0.9 var(--f-pixel); color: var(--gold); letter-spacing: 0.06em; text-shadow: 4px 4px 0 var(--bg); }
.cabinet .label { color: var(--soft); letter-spacing: 0.3em; }
.blink { margin: 6px 0 0; font: 400 12px var(--f-label); color: var(--lime); letter-spacing: 0.12em; animation: blink 1.1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .blink { animation: none; } html { scroll-behavior: auto; } }

/* ---- panels, rows, buttons --------------------------------------------------- */
.panel { padding: 14px; border: 3px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: inset 0 0 0 2px var(--bg); }
.row { display: flex; gap: 8px; align-items: stretch; }
.row > input, .row > select { flex: 1; min-width: 0; }
input, select {
  height: 48px; padding: 0 12px; border: 2px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--text);
  font: 400 16px var(--f-body);
}
input::placeholder { color: var(--faint); }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--lime) 50%), linear-gradient(135deg, var(--lime) 50%, transparent 50%); background-position: calc(100% - 18px) 21px, calc(100% - 13px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 16px;
  border: 3px solid var(--line); border-radius: 6px; background: transparent; color: var(--text);
  font: 400 21px var(--f-pixel); letter-spacing: 0.03em; text-transform: uppercase; text-decoration: none; cursor: pointer;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-go { border: 0; background: var(--lime); color: var(--bg); box-shadow: 0 4px 0 var(--lime-d); }
.btn-go:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--lime-d); }
.btn-gold { border: 0; background: var(--gold); color: var(--bg); box-shadow: 0 4px 0 var(--gold-d); }
.btn-gold:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--gold-d); }
.btn-big { width: 100%; min-height: 58px; font-size: 28px; }
.btn-small { min-height: 40px; padding: 0 10px; font: 400 11px var(--f-label); border-width: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  min-height: 40px; padding: 0 12px; border: 2px solid var(--edge); border-radius: 4px; background: transparent; color: var(--dim);
  font: 400 11px var(--f-label); text-transform: uppercase; cursor: pointer;
}
.chip[aria-pressed="true"] { border-color: var(--lime); background: var(--panel-2); color: var(--lime); }

/* player squares, coloured by how they're free */
.sq { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; background: var(--pink); color: var(--bg); font: 400 19px var(--f-pixel); }
.sq.host { background: var(--gold); }
.sq.online { background: var(--cyan); }
.sq.me { box-shadow: 0 0 0 2px var(--lime); }
.tag { display: inline-block; padding: 1px 5px; font: 400 10px var(--f-label); text-transform: uppercase; background: var(--gold); color: var(--bg); }
.tag.online { background: var(--cyan); }
.tag.rpt { background: var(--soft); }
.tag.plat { background: transparent; color: var(--dim); box-shadow: inset 0 0 0 1px var(--edge); }

/* ---- next quest --------------------------------------------------------------- */
.quest { display: flex; flex-direction: column; gap: 12px; }
.q-top { display: flex; justify-content: space-between; gap: 8px; }
.q-top .label:first-child { color: var(--gold); }
.quest h3 { margin: 0; font: 400 35px/1.05 var(--f-pixel); }
.quest .where { margin: 0; color: var(--soft); }
.party { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 10px; }
.party li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.party .nm { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.party .md { font: 400 10px var(--f-label); color: var(--dim); text-transform: uppercase; }
.board-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.board-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 40px; padding: 4px 8px; background: var(--panel-2); border-radius: 4px; }
.board-list .rk { font: 400 22px var(--f-pixel); color: var(--gold); }
.board-list .tt { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-list .hs { font: 400 11px var(--f-label); color: var(--pink); }
.locked { text-align: center; padding: 12px; border: 3px solid var(--lime); border-radius: 6px; background: var(--panel-2); }
.locked h4 { margin: 6px 0 8px; font: 400 42px/1 var(--f-pixel); color: var(--lime); }
.locked img { display: block; width: 100%; max-width: 360px; margin: 0 auto 8px; image-rendering: auto; border: 2px solid var(--line); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.actions .btn { flex: 1 1 140px; }
.also { margin: 0; font-size: 15px; color: var(--soft); }
.also button { margin-left: 4px; }
.empty { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.empty h3 { margin: 0; font: 400 40px/1 var(--f-pixel); color: var(--gold); }
.empty p { margin: 0; color: var(--soft); }

/* ---- who's free: two weeks of evenings ---------------------------------------- */
.days { display: flex; flex-direction: column; gap: 6px; }
.day { border: 2px solid var(--edge); border-radius: 6px; background: transparent; }
.day.has-night { border-color: var(--gold); }
.day.open { border-color: var(--lime); background: var(--panel-2); }
.day-btn {
  width: 100%; display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  min-height: 52px; padding: 6px 10px; border: 0; background: none; color: var(--text); text-align: left; cursor: pointer; font: inherit;
}
.day-btn .dn { font: 400 22px var(--f-pixel); }
.day-btn .dn small { display: block; font: 400 10px var(--f-label); color: var(--dim); }
.marks { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.mark { display: inline-flex; align-items: center; gap: 3px; padding: 1px 5px; font: 400 10px var(--f-label); color: var(--bg); background: var(--pink); }
.mark.host { background: var(--gold); }
.mark.online { background: var(--cyan); }
.mark.night { background: transparent; color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.mine { font: 400 10px var(--f-label); color: var(--lime); text-transform: uppercase; text-align: right; }
.day-body { padding: 4px 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.modes-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.modes-pick .chip { min-height: 44px; }
.who-list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 15px; }
.who-list li { display: inline-flex; align-items: center; gap: 6px; }
.host-form { display: grid; grid-template-columns: minmax(0, 1fr) 118px; gap: 6px; }
.host-form .btn { grid-column: 1 / -1; }

/* ---- the shelf: cartridges ------------------------------------------------------ */
.add { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.results li { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 4px; background: var(--panel-2); border-radius: 4px; }
.results img { width: 92px; height: 35px; object-fit: cover; display: block; }
.results .tt { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hand { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 2px dashed var(--lime); border-radius: 6px; }
.checks { display: flex; flex-wrap: wrap; gap: 14px; }
.checks label { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; }
.checks input { width: 22px; height: 22px; accent-color: var(--lime); }
.shelf-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.carts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 520px) { .carts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cart {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 6px 6px 8px;
  border: 3px solid var(--bg); border-radius: 4px 4px 2px 2px; background: #8890c8; color: var(--bg); box-shadow: 0 0 0 2px var(--edge);
}
.cart.hearted { box-shadow: 0 0 0 2px var(--lime); }
.cart::before { content: ''; height: 6px; margin: 0 22%; background: var(--bg); }
.cart-label { position: relative; aspect-ratio: 460 / 215; background: var(--c, #3b2d66); color: var(--text); display: flex; align-items: flex-end; padding: 6px; overflow: hidden; }
.cart-label img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cart-label .tt { position: relative; font: 400 20px/1 var(--f-pixel); text-shadow: 2px 2px 0 rgb(0 0 0 / 0.5); }
.cart-name { margin: 0; font-weight: 700; font-size: 14px; line-height: 1.2; color: var(--bg); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cart-tags { display: flex; flex-wrap: wrap; gap: 3px; }
.cart-tags .tag.plat { color: var(--bg); box-shadow: inset 0 0 0 1px var(--bg); }
.cart-foot { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-top: auto; }
.heart {
  min-height: 40px; min-width: 64px; padding: 0 8px; border: 2px solid var(--bg); border-radius: 4px; background: transparent; color: var(--bg);
  font: 400 11px var(--f-label); cursor: pointer;
}
.heart[aria-pressed="true"] { background: var(--bg); color: var(--lime); }
.cart-foot a { font: 400 10px var(--f-label); color: var(--bg); padding: 12px 2px; }
.cart .x { position: absolute; top: -12px; right: -12px; width: 32px; height: 32px; border: 2px solid var(--line); border-radius: 50%; background: var(--bg); color: var(--text); font: 400 20px/1 var(--f-pixel); cursor: pointer; }
.cart .x[data-label] { width: auto; padding: 0 8px; border-radius: 4px; font: 400 10px var(--f-label); }
.cart.missing { opacity: 0.5; }

/* ---- spin and shop -------------------------------------------------------------- */
.spin-panel { display: flex; flex-direction: column; gap: 12px; }
.linked { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.linked li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; background: var(--panel-2); border-radius: 4px; font-size: 14px; }
.linked img { width: 28px; height: 28px; display: block; }
.sale { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sale li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 6px; background: var(--panel-2); border-radius: 4px; align-items: center; }
.sale img { width: 96px; aspect-ratio: 460 / 215; object-fit: cover; display: block; }
.sale .tt { font-weight: 700; line-height: 1.2; }
.sale .pr { font: 400 11px var(--f-label); color: var(--lime); }
.sale .pr s { color: var(--faint); }
.sale .by { font-size: 13px; color: var(--soft); }
.off { display: inline-block; padding: 1px 4px; background: var(--lime); color: var(--bg); font: 400 10px var(--f-label); margin-right: 4px; }

/* the slot-machine overlay */
.spin-overlay { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: rgb(5 7 26 / 0.92); }
.spin-box { width: min(420px, 100%); display: flex; flex-direction: column; gap: 14px; padding: 18px 16px; border: 3px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: inset 0 0 0 2px var(--bg); text-align: center; }
.slot { position: relative; height: 192px; overflow: hidden; border: 3px solid var(--bg); background: var(--bg); }
.slot::after { content: ''; position: absolute; left: 0; right: 0; top: 64px; height: 64px; border-block: 3px solid var(--lime); pointer-events: none; }
.slot-track { will-change: transform; }
.slot-item { height: 64px; display: grid; place-items: center; padding: 0 12px; font: 400 28px/1 var(--f-pixel); color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spin-result { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.spin-result h3 { margin: 0; font: 400 42px/1 var(--f-pixel); color: var(--lime); }
.spin-result p { margin: 0; color: var(--soft); }
.spin-result img { width: 100%; max-width: 300px; border: 2px solid var(--line); }
.spin-actions { display: flex; flex-direction: column; gap: 8px; }

.foot { color: var(--faint); font-size: 14px; text-align: center; }
.foot p { margin: 0; }

.toast {
  position: fixed; left: 50%; bottom: 16px; z-index: 60; transform: translate(-50%, 160%); max-width: calc(100% - 32px);
  padding: 12px 16px; border: 3px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--text);
  font-size: 15px; transition: transform 0.2s;
}
.toast.show { transform: translate(-50%, 0); }
.toast.bad { border-color: var(--pink); }