:root { color-scheme: dark; font-family: system-ui, sans-serif; background:#0b1711; color:#f7f4df; --gold:#e0bd66; --panel:#173426; --line:#5f816c; --focus:#7ddcff; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:linear-gradient(180deg,#08150f,#10271b); }
a { color:#ffe296; }
button,input,select { font:inherit; }
button,.game-card { min-height:3rem; border:2px solid transparent; border-radius:.65rem; padding:.75rem 1rem; background:#f4e5ae; color:#142018; cursor:pointer; }
button:focus-visible,input:focus-visible,a:focus-visible { outline:4px solid var(--focus); outline-offset:3px; }
button:disabled { opacity:.5; cursor:not-allowed; }
.skip-link { position:absolute; left:-10000px; top:.5rem; z-index:10; background:#fff; color:#000; padding:.6rem; }
.skip-link:focus { left:.5rem; }
.app-header { display:flex; justify-content:space-between; gap:1rem; align-items:center; padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) 1rem max(1rem,env(safe-area-inset-left)); border-bottom:2px solid var(--gold); background:#08150f; }
h1,h2,p { margin-top:0; }
h1 { margin-bottom:0; font-size:clamp(1.65rem,7vw,2.5rem); }
.eyebrow { margin-bottom:.2rem; color:var(--gold); font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.78rem; }
main { width:min(70rem,100%); margin:0 auto; padding:1rem; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:1rem; padding:clamp(1rem,4vw,1.6rem); box-shadow:0 8px 30px #0005; }
form { display:grid; gap:.55rem; max-width:32rem; }
input { min-height:3rem; padding:.7rem; border:2px solid #a9b9ae; border-radius:.45rem; background:#fff; color:#111; }
select { min-height:3rem; padding:.7rem; border:2px solid #a9b9ae; border-radius:.45rem; background:#fff; color:#111; }
form button { margin-top:.5rem; }
.text-actions,.toolbar { display:flex; flex-wrap:wrap; gap:1rem; margin-top:1rem; align-items:center; }
.section-heading { display:flex; justify-content:space-between; gap:1rem; align-items:start; }
.secondary { background:#294b39; color:#f7f4df; border-color:#789583; }
.game-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:1rem; }
.game-card { display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:.8rem; text-align:left; text-decoration:none; background:#213f30; color:#f7f4df; border-color:#6f927c; }
.game-card strong { align-self:center; font-size:1.15rem; }
.game-card > span:last-child { grid-column:1/-1; margin-top:.45rem; }
.game-mark { display:grid; place-items:center; width:2.8rem; height:2.8rem; border-radius:50%; background:var(--gold); color:#142018; font-weight:900; }
.small-note { margin:1rem 0 0; color:#cbd6ce; }
.table-list { list-style:none; padding:0; display:grid; gap:.8rem; }
.table-card { border:1px solid var(--line); border-radius:.75rem; padding:1rem; background:#0e2519; }
.table-card h3 { margin:.1rem 0 .35rem; }
.table-card p { margin:.25rem 0; }
.table-actions { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.8rem; }
.panel section > h3 { margin-top:1.5rem; }
dialog { width:min(40rem,calc(100% - 1rem)); max-height:calc(100vh - 1rem); overflow:auto; border:2px solid var(--gold); border-radius:.8rem; padding:1.2rem; background:var(--panel); color:#f7f4df; }
dialog::backdrop { background:#000b; }
dialog form { max-width:none; }
.player-list { list-style:none; padding:0; display:grid; gap:.5rem; }
.player-list li { display:flex; justify-content:space-between; align-items:center; gap:.7rem; padding:.65rem; border:1px solid var(--line); border-radius:.45rem; background:#0e2519; }
.status { width:min(70rem,100%); margin:0 auto; min-height:2.5rem; padding:.75rem 1rem max(.75rem,env(safe-area-inset-bottom)); }
@media (max-width:520px) { .app-header,.section-heading { align-items:stretch; flex-direction:column; } .app-header button,.section-heading button { width:100%; } main { padding:.6rem; } .panel { border-radius:.7rem; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; } }