/* Steelie beta site: the game's wood look (scripts/ui/style.gd) - a plywood card in a walnut rim on
   a dark bench, brass plate, Zilla Slab headings and Nunito body (fonts staged from assets/fonts). */
@font-face { font-family: "Zilla Slab"; font-weight: 700; font-display: swap; src: url(fonts/ZillaSlab-Bold.ttf) format("truetype"); }
@font-face { font-family: "Nunito"; font-weight: 200 1000; font-display: swap; src: url(fonts/Nunito-Variable.ttf) format("truetype"); }

:root {
  --bench: #2b2420;
  --bench-ink: #efe4d4;
  --bench-dim: #b7a792;
  --charcoal: #2e2a27;
  --charcoal-soft: #5b534c;
  --walnut: #5a3a24;
  --walnut-deep: #3d2616;
  --brass-hi: #e6c574;
  --brass: #b38a35;
  --brass-lo: #6e5220;
  --hole: #17110c;
  --steel-hi: #ffffff;
  --steel-mid: #b9c0c8;
  --steel-lo: #4b525b;
  --display: "Zilla Slab", Georgia, serif;
  --body: "Nunito", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh; min-height: 100dvh;
  background: radial-gradient(ellipse at 50% 0%, #3a302a, var(--bench) 70%);
  color: var(--bench-ink); font: 800 1rem/1.5 var(--body);
  display: flex; align-items: center; justify-content: center;
  padding: 32px max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px));
}
.wrap { width: 100%; max-width: 460px; display: flex; flex-direction: column; gap: 22px; }
.wrap.wide { max-width: 860px; }

.panel {
  position: relative; border-radius: 26px; color: var(--charcoal);
  padding: 26px 24px 24px; display: flex; flex-direction: column; gap: 16px;
  background:
    repeating-linear-gradient(178deg, transparent 0 6px, rgba(150,100,50,.10) 6px 7px, transparent 7px 15px),
    repeating-radial-gradient(ellipse 140% 40% at 30% 120%, rgba(160,110,60,.10) 0 2px, transparent 2px 14px),
    linear-gradient(175deg, #efdcbb, #e3c89c);
  border: 10px solid var(--walnut);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.18), inset 0 8px 16px rgba(60,35,15,.25), 0 14px 30px rgba(0,0,0,.45);
}
.plate { align-self: flex-start; padding: 6px 14px; border-radius: 8px; background: linear-gradient(var(--brass-hi), var(--brass)); color: #3b2a0c;
  font-weight: 900; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 3px rgba(0,0,0,.35); }
h1 { font-family: var(--display); font-weight: 700; font-size: 2.4rem; line-height: 1.05; margin: 0; text-wrap: balance; }
h2 { font-family: var(--display); font-weight: 700; font-size: 1.3rem; margin: 0; }
p { margin: 0; }
.soft { color: var(--charcoal-soft); }
.dim { color: var(--bench-dim); text-align: center; font-size: .9rem; }
.groove { height: 4px; border-radius: 2px; background: rgba(60,35,15,.25); box-shadow: 0 1px 0 rgba(255,255,255,.4); }
.error { background: #5b3943; color: #f7ead4; border-radius: 12px; padding: 10px 14px; }
.error:empty { display: none; }

.hero { display: flex; align-items: center; gap: 18px; }
.hole { --s: 64px; width: var(--s); height: var(--s); border-radius: 50%; position: relative; flex: none;
  background: radial-gradient(circle at 50% 38%, #2a1d13 0 30%, var(--hole) 62%);
  box-shadow: 0 0 0 4px var(--brass), 0 0 0 5px var(--brass-lo), inset 0 6px 10px rgba(0,0,0,.75), 0 3px 4px rgba(0,0,0,.35); }
.hole.ball::after { content: ""; position: absolute; inset: 9%; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, var(--steel-hi) 0 9%, var(--steel-mid) 32%, #7d858f 60%, var(--steel-lo) 88%);
  box-shadow: 0 3px 5px rgba(0,0,0,.55); }

.btns { display: flex; gap: 12px; flex-wrap: wrap; }
.btn { font: 800 1rem var(--body); border: 0; border-radius: 14px; padding: 13px 20px; min-height: 48px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none;
  background: linear-gradient(#f3e3c6, #dfc69b); color: var(--charcoal); box-shadow: 0 3px 0 #a9875a, 0 5px 8px rgba(0,0,0,.25); }
.btn.go { background: linear-gradient(#6d4729, var(--walnut-deep)); color: #f7ead4; box-shadow: 0 3px 0 #22140a, 0 5px 8px rgba(0,0,0,.3); }
.btn.wide { width: 100%; }
.btn.small { min-height: 36px; padding: 7px 14px; font-size: .9rem; }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #a9875a; }
.btn:focus-visible { outline: 3px solid var(--brass-hi); outline-offset: 2px; }
.btn[disabled] { opacity: .5; cursor: default; }
.btn svg { width: 20px; height: 20px; flex: none; }
form { margin: 0; }

table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th { text-align: left; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--charcoal-soft); padding: 4px 8px; }
td { padding: 10px 8px; border-top: 2px solid rgba(60,35,15,.15); vertical-align: middle; overflow-wrap: anywhere; }
td.act { text-align: right; white-space: nowrap; }
.tag { font-weight: 900; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; padding: 2px 8px; border-radius: 99px; background: var(--brass); color: #2b1d07; }
.tag.off { background: rgba(60,35,15,.2); color: var(--charcoal-soft); }
@media (max-width: 560px) {
  h1 { font-size: 2rem; }
  .panel { padding: 20px 16px; }
  thead { display: none; }
  tr { display: grid; grid-template-columns: 1fr auto; padding: 8px 0; border-top: 2px solid rgba(60,35,15,.15); }
  td { border: 0; padding: 2px 4px; }
  td.act { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
}

/* /privacy and /terms */
.prose { gap: 12px; }
.prose h2 { margin-top: 8px; }
.prose ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.prose a, .foot a { color: inherit; }
.foot { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.foot a { color: var(--bench-dim); }