:root { color-scheme: dark; font-family: system-ui, sans-serif; color: #fff8e7; background: #15171c; }
* { box-sizing: border-box; letter-spacing: 0; }
body { margin: 0; }
header { display:flex; align-items:center; gap:16px; padding:20px 4%; border-bottom:1px solid #555; }
header>a:first-child { font-size:24px; font-weight:850; text-decoration:none; }
a { color:inherit; }
.back { margin-left:auto; }
.badge { color:#78e0ce; font-size:12px; font-weight:800; }
main { max-width:1200px; margin:auto; padding:20px; }
h1 { font-size:30px; margin:12px 0 24px; } h2 { font-size:24px; }
button,input,select { font:inherit; min-height:48px; border:1px solid #73777e; border-radius:6px; padding:10px 14px; }
button { cursor:pointer; background:#353940; color:white; font-weight:750; }
button:hover { border-color:#fff; } button:disabled { opacity:.45; cursor:default; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid #78e0ce; outline-offset:3px; }
.primary,[aria-pressed="true"] { background:#aa282e; border-color:#fc9296; }
.danger { background:#66272d; }
input,select { display:block; width:100%; background:#202329; color:white; margin-top:8px; }
label { display:block; margin:18px 0; font-weight:650; }
#entry { max-width:720px; margin:auto; } nav,.fields,.actions { display:flex; gap:12px; flex-wrap:wrap; }
nav>button,.fields>label { flex:1; }
form { padding-top:16px; } .note { color:#bfc5cc; font-size:14px; line-height:1.6; }
#message { color:#ffe085; min-height:24px; margin:0 0 16px; }
.room-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.teams { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin-bottom:20px; }
.team { border:1px solid #555; border-left:5px solid var(--team); padding:14px; border-radius:6px; min-width:0; }
.team strong { display:block; overflow-wrap:anywhere; font-size:20px; }.team small { display:block; margin:8px 0; color:#ced4da; }
.team code { display:block; font-size:12px; margin-bottom:8px; overflow-wrap:anywhere; }
.team button { font-size:13px; min-height:40px; margin-right:6px; padding:6px; }
.category { text-align:center; padding:20px 0; border-block:1px solid #555; margin:20px 0; }
.category small { color:#78e0ce; }.category h2 { margin:8px 0; overflow-wrap:anywhere; }
.turnbar { display:flex; gap:20px; align-items:center; flex-wrap:wrap; }.turnbar>strong { font-size:22px; }
#clock { font-size:40px; font-variant-numeric:tabular-nums; margin-left:auto; }
.letters { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.tile { min-height:148px; border:1px solid #9c9a8f; border-radius:8px; padding:12px; background:#eee7d4; color:#191b20; position:relative; display:flex; flex-direction:column; align-items:stretch; justify-content:center; }
.tile>button { border:0; background:transparent; color:inherit; font-size:48px; width:100%; }
.tile>strong { font-size:27px; text-align:center; }.tile>span { text-align:center; overflow-wrap:anywhere; font-size:18px; font-weight:700; }
.tile input { font-size:18px; padding:8px; min-width:0; margin:8px 0; }.tile form { padding:0; }.tile form button { width:100%; font-size:14px; }
.tile.owned { background:var(--team); color:white; border-color:var(--team); }.tile.pending { outline:3px solid #e8b33e; }
.review { border-block:2px solid #e8b33e; padding:20px 0; margin:20px 0; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
details { margin:24px 0; } summary { cursor:pointer; padding:12px 0; } li { margin:10px 0; overflow-wrap:anywhere; }
#ranking p { padding:12px 0; border-bottom:1px solid #555; font-size:20px; }
footer { text-align:center; padding:24px; font-size:14px; color:#bec4cb; }
[hidden] { display:none!important; }
@media(max-width:650px) { header { flex-wrap:wrap; gap:8px; } header>a:first-of-type { font-size:20px; } .letters { grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; } .tile { min-height:98px; padding:6px; }.tile>button { font-size:32px; padding:4px; }.tile:has(form),.tile.pending { grid-column:span 2; }.tile>span { font-size:15px; } main { padding:12px; } .room-heading { align-items:flex-start; } .room-heading h1 { font-size:24px; } .teams { grid-template-columns:1fr 1fr; }.team strong { font-size:17px; } }