/* 10-yayin (2): the site, in the game's own colours (the sign-in screen's panel, its title gold and outline) */
@font-face { font-family: "Jersey 10"; src: url("fonts/Jersey10.ttf") format("truetype"); font-display: swap; }

:root {
  --ground: #2b241d;
  --panel: #3a3027;
  --panel-edge: #1e1a16;
  --gold: #f2d38a;
  --text: #f1e9dc;
  --muted: #c9bba6;
  --accent: #7fb069;
  --danger: #e07a5f;
  --space-xs: 4px; --space-s: 8px; --space-m: 12px; --space-l: 16px; --space-xl: 24px;
  --radius: 6px;
}

@media (prefers-contrast: more) {
  :root { --panel: #000; --panel-edge: #fff; --text: #fff; --muted: #fff; --gold: #ffe08a; }
}

* { box-sizing: border-box; }

html, body { margin: 0; background: var(--ground); color: var(--text); font: 18px/1.5 system-ui, "Segoe UI", sans-serif; }

a { color: var(--gold); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 var(--space-l); }

header.top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); padding: var(--space-m) 0; }
.brand { display: flex; align-items: center; gap: var(--space-s); text-decoration: none; }
.brand img { width: 40px; height: 40px; image-rendering: pixelated; }
.brand span, h1, h2.title { font-family: "Jersey 10", system-ui, sans-serif; color: var(--gold); text-shadow: 2px 2px 0 var(--panel-edge); letter-spacing: 1px; }
.brand span { font-size: 36px; line-height: 1; }
nav.top { display: flex; align-items: center; gap: var(--space-m); }

button, .button {
  display: inline-block; font: inherit; color: var(--ground); background: var(--gold); border: 2px solid var(--panel-edge);
  border-radius: var(--radius); padding: var(--space-s) var(--space-l); cursor: pointer; text-decoration: none; text-align: center;
}
button.quiet, .button.quiet { background: transparent; color: var(--gold); border-color: var(--gold); }
button:disabled { opacity: 0.55; cursor: default; }

.hero { margin: var(--space-s) 0 var(--space-xl); }
.hero img { display: block; width: 100%; height: auto; image-rendering: pixelated; border: 2px solid var(--panel-edge); border-radius: var(--radius); }
h1 { font-size: 56px; line-height: 1.05; margin: var(--space-l) 0 var(--space-s); text-align: center; }
.lead { font-size: 20px; color: var(--muted); max-width: 720px; margin: 0 auto var(--space-l); text-align: center; }
.actions { display: flex; justify-content: center; gap: var(--space-m); flex-wrap: wrap; }

section { margin: var(--space-xl) 0; }
h2.title { font-size: 40px; text-align: center; margin: 0 0 var(--space-l); font-weight: normal; }

/* sibling cards in equal columns: three features, two prices */
.cols { display: grid; gap: var(--space-l); }
.cols.three { grid-template-columns: repeat(3, 1fr); }
.cols.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .cols.three, .cols.two { grid-template-columns: 1fr; } h1 { font-size: 44px; } }

.card { background: var(--panel); border: 2px solid var(--panel-edge); border-radius: var(--radius); padding: var(--space-l); display: flex; flex-direction: column; gap: var(--space-s); }
.card h3 { margin: 0; color: var(--gold); font-size: 22px; }
.card p { margin: 0; color: var(--muted); }
.price { font-size: 44px; font-family: "Jersey 10", system-ui, sans-serif; color: var(--text); line-height: 1; }
.price small { font-size: 20px; color: var(--muted); }
.card .button, .card button { margin-top: auto; }

.note { color: var(--muted); font-size: 16px; text-align: center; }
.state { padding: var(--space-l); text-align: center; color: var(--muted); }
.error { color: var(--danger); }
.error::before { content: "! "; font-weight: bold; }
.ok::before { content: "\2713  "; color: var(--accent); }

form { display: flex; flex-direction: column; gap: var(--space-m); }
label { display: flex; flex-direction: column; gap: var(--space-xs); font-size: 16px; color: var(--muted); }
input, select { font: inherit; color: var(--text); background: var(--ground); border: 2px solid var(--panel-edge); border-radius: var(--radius); padding: var(--space-s); }
.row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-m); }
.row.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 520px) { .row, .row.three { grid-template-columns: 1fr; } }

.tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-s); }
.tabs button[aria-selected="true"] { background: var(--gold); color: var(--ground); }
.tabs button[aria-selected="false"] { background: transparent; color: var(--gold); border-color: var(--gold); }

.narrow { max-width: 560px; margin: 0 auto; }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-xs) var(--space-l); margin: 0; }
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; }

footer { border-top: 2px solid var(--panel-edge); margin-top: var(--space-xl); padding: var(--space-l) 0; color: var(--muted); font-size: 15px; text-align: center; }
[hidden] { display: none !important; }