/* Highball site — design system carried from the app (amber on warm charcoal). */
:root {
  --ground:#16110A; --surface:#211A10; --surface2:#2A2115; --line:#3A2F1D;
  --ink:#EFE7D6; --ink2:#C8BCA2; --muted:#8F8266;
  --amber:#D79A45; --amber-deep:#A5691C;
  --good:#7CC79E; --info:#8FB8D9; --warn:#D9B25C; --bad:#E07A7A;
  --radius:10px;
}
* { box-sizing:border-box }
/* Visible keyboard focus everywhere. Without this the site is unusable without a mouse. */
:where(a,button,input,summary,[tabindex]):focus-visible {
  outline:2px solid var(--amber); outline-offset:2px; border-radius:4px }
.skip { position:absolute; left:-9999px; top:0 }
.skip:focus { left:1rem; top:.5rem; z-index:50; background:var(--surface); color:var(--ink);
  border:1px solid var(--amber); border-radius:6px; padding:.6rem 1rem; text-decoration:none }
html { scroll-behavior:smooth }
body { margin:0; background:var(--ground); color:var(--ink);
       font:17px/1.6 "IBM Plex Sans",-apple-system,BlinkMacSystemFont,sans-serif;
       -webkit-font-smoothing:antialiased; }
a { color:var(--amber); text-underline-offset:.18em }
a:hover { color:#E9B368 }
img { max-width:100%; height:auto }
.wrap { max-width:1000px; margin:0 auto; padding-inline:clamp(1rem,4vw,2rem) }
.wrap-wide { max-width:1180px }
.mono { font-family:"IBM Plex Mono",ui-monospace,monospace }
h1,h2,h3 { font-family:"Bricolage Grotesque",-apple-system,sans-serif; letter-spacing:-.02em; line-height:1.15 }
h1 { font-weight:800 }
h2,h3 { font-weight:700 }

/* ---- site chrome ---- */
.topbar { border-bottom:1px solid var(--line); background:rgba(22,17,10,.86); backdrop-filter:blur(10px);
          position:sticky; top:0; z-index:20 }
.topbar .row { display:flex; align-items:center; gap:1rem; min-height:58px; flex-wrap:wrap; padding-block:.4rem }
.topbar .brand { display:flex; min-width:0; align-items:center; gap:.55rem; font-family:"Bricolage Grotesque",sans-serif;
                 font-weight:800; font-size:1.05rem; color:var(--ink); text-decoration:none }
.topbar .brand img { width:26px; height:26px }
.topbar nav { display:flex; gap:1.15rem; margin-left:auto; flex-wrap:wrap }
.topbar nav a { color:var(--ink2); text-decoration:none; font-size:.92rem }
.topbar nav a:hover, .topbar nav a[aria-current] { color:var(--amber) }
.topbar .dl { background:linear-gradient(180deg,var(--amber),var(--amber-deep)); color:#1C1204; font-weight:600;
              padding:.42rem 1rem; border-radius:7px; text-decoration:none; font-size:.9rem }

footer { border-top:1px solid var(--line); margin-top:4rem; padding-block:2.5rem 3.5rem; color:var(--muted); font-size:.85rem }
footer .foot-links { display:flex; gap:1.4rem; justify-content:center; flex-wrap:wrap; margin-bottom:1rem }
footer a { color:var(--ink2) }
footer .legal { text-align:center; max-width:60em; margin:0 auto; line-height:1.7 }

/* ---- generic bits ---- */
.pill { display:inline-block; font-size:.72rem; font-weight:600; letter-spacing:.03em; padding:.2rem .6rem;
        border-radius:999px; border:1px solid; white-space:nowrap }
.pill.good { color:var(--good); border-color:#2F5C45; background:#17281F }
.pill.info { color:var(--info); border-color:#2E4A5E; background:#16222B }
.pill.warn { color:var(--warn); border-color:#5C4B22; background:#282113 }
.pill.bad  { color:var(--bad);  border-color:#5E2E2E; background:#2B1616 }
.btn { display:inline-block; background:linear-gradient(180deg,var(--amber),var(--amber-deep)); color:#1C1204;
       font-weight:600; padding:.85rem 1.8rem; border-radius:8px; text-decoration:none; font-size:1.05rem;
       box-shadow:0 6px 24px rgba(215,154,69,.25) }
.btn:hover { filter:brightness(1.06); color:#1C1204 }
.btn.ghost { background:none; border:1px solid var(--line); color:var(--ink); box-shadow:none; font-size:.95rem;
             padding:.7rem 1.3rem }
.sub { font-size:.85rem; color:var(--muted); font-family:"IBM Plex Mono",monospace }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem 1.5rem }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem }
section { padding-block:3.25rem }
.note { border-left:3px solid var(--amber); background:var(--surface); padding:1rem 1.25rem; border-radius:0 8px 8px 0 }
.note.bad { border-left-color:var(--bad) }
.note.good { border-left-color:var(--good) }

/* ---- search + filter tiles (database) ---- */
.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.7rem; margin-bottom:1.2rem }
.tile { background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:.9rem 1rem;
        text-align:left; cursor:pointer; color:var(--ink); font:inherit; position:relative; overflow:hidden }
.tile b { display:block; font-family:"Bricolage Grotesque",sans-serif; font-size:1.7rem; font-weight:800; line-height:1 }
.tile span { display:block; font-size:.8rem; color:var(--ink2); margin-top:.25rem }
.tile .bar { position:absolute; left:0; bottom:0; height:3px; width:100%; display:block }
.tile .bar.good{background:var(--good)} .tile .bar.info{background:var(--info)}
.tile .bar.warn{background:var(--warn)} .tile .bar.bad{background:var(--bad)}
.tile[aria-pressed="true"] { border-color:var(--amber); background:var(--surface2) }
.search { display:flex; align-items:center; gap:.5rem; background:var(--surface); border:1px solid var(--line);
          border-radius:9px; padding:.6rem .9rem; margin-bottom:1rem }
.search svg { flex:none; opacity:.45 }
.search input { border:0; background:none; color:var(--ink); font:inherit; width:100% }
.search input:focus { outline:0 }
.search:focus-within { border-color:var(--amber); box-shadow:0 0 0 3px rgba(215,154,69,.18) }

/* ---- tables ---- */
table { width:100%; border-collapse:collapse; font-size:.93rem }
th { text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.09em; color:var(--muted);
     font-weight:600; padding:.5rem .7rem; border-bottom:1px solid var(--line) }
td { padding:.7rem; border-bottom:1px solid #2A2317; vertical-align:top }
tr:hover td { background:#1C160D }
td.t { font-weight:600 }
td.t a { text-decoration:none }
.num { text-align:right; font-variant-numeric:tabular-nums }
.prov { display:block; color:var(--muted); font-size:.78rem; margin-top:.2rem }
.tablewrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface) }

/* ---- game page ---- */
.gamehead { display:flex; gap:1.6rem; align-items:flex-start; flex-wrap:wrap; padding-top:2.5rem }
.gamehead .art { width:280px; border-radius:8px; border:1px solid var(--line); flex:none }
.gamehead .meta { flex:1; min-width:min(100%,300px) }
.gamehead h1 { font-size:clamp(1.9rem,4.5vw,2.7rem); margin:.1rem 0 .6rem }
.verdict { font-size:1.05rem; color:var(--ink2); margin:.6rem 0 0 }
.kv { display:flex; gap:.55rem; flex-wrap:wrap; margin-top:.9rem; font-size:.82rem; color:var(--muted) }
.kv span { background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:.25rem .6rem }
.matrix td.r { font-weight:600 }
.matrix .unknown { color:var(--muted) }
.stamp { font-family:"IBM Plex Mono",monospace; font-size:.8rem; color:var(--muted) }
.prose { max-width:44em }
.prose h2 { font-size:1.35rem; margin:2.4rem 0 .8rem }
.prose h3 { font-size:1.08rem; margin:1.8rem 0 .5rem }
.prose p { color:var(--ink2) }
.prose li { color:var(--ink2); margin-bottom:.35rem }
.prose code { font-family:"IBM Plex Mono",monospace; font-size:.88em; background:var(--surface2);
              border:1px solid var(--line); border-radius:4px; padding:.1rem .35rem }
.prose pre { background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:1rem;
             overflow-x:auto; font-size:.85rem }
.prose pre code { background:none; border:0; padding:0 }
.crumbs { font-size:.82rem; color:var(--muted); padding-top:1.4rem }
.crumbs a { color:var(--muted) }

@media (max-width:640px) {
  .topbar .dl { margin-left:auto }
  .topbar nav { order:3; width:100%; margin-left:0; gap:1.1rem; padding-bottom:.15rem;
                font-size:.9rem; justify-content:flex-start }
  .gamehead .art { width:100%; max-width:340px }
}