/* Off-white, charcoal, deep blue. Texture carries detail without extra hue. */
:root { --club-ink:#25282b; --club-paper:#f5f4ef; --club-action:#244d70; }
#menu { padding:clamp(20px,4vw,60px); background:#303437 url('../img/materials/wood-table.webp') center/800px; background-blend-mode:luminosity; color:var(--club-ink); touch-action:pan-y; }
#menu .club-sheet { width:min(1040px,100%); margin:auto; display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(24px,5vw,65px); padding:clamp(26px,5vw,58px); background:var(--club-paper); border:1px solid #c8cace; box-shadow:3px 8px 22px #0005; position:relative; }
.club-identity { border-right:1px solid #c8cace; padding-right:clamp(20px,4vw,48px); }
.club-kicker { display:block; font:700 11px/1.5 Arial,sans-serif; letter-spacing:.19em; border-block:2px solid var(--club-ink); padding:8px 0; margin-bottom:28px; }
#menu h1 { color:var(--club-ink); font:900 clamp(60px,7vw,96px)/.9 Georgia,serif; letter-spacing:-.065em; text-align:left; text-shadow:none; margin:0 0 20px; }
#menu .sub { color:#5c6268; font:italic 17px/1.5 Georgia,serif; letter-spacing:0; margin-bottom:24px; max-width:230px; }
.club-court { position:relative; width:100%; aspect-ratio:1.5; background:linear-gradient(#244d70de,#244d70de),url('../img/materials/green-metal.webp') center/400px; border:9px solid #243c51; box-shadow:0 3px 0 #bcc4cc; transform:rotate(-4deg); margin:28px 0 24px; }
.club-court::before { content:''; position:absolute; inset:7px; border:2px solid #e5e8ec; background:linear-gradient(transparent calc(50% - 1px),#e5e8ec calc(50% - 1px),#e5e8ec calc(50% + 1px),transparent calc(50% + 1px)); }
.club-court::after { content:''; position:absolute; top:0; bottom:0; left:50%; border-left:3px dashed #e5e8ec; }
.club-ball { position:absolute; width:16px; height:16px; border-radius:50%; background:#ffffff; left:67%; top:34%; box-shadow:3px 5px 2px #0004; }
.club-stamp { color:var(--club-action); font:700 11px/1.6 Arial,sans-serif; letter-spacing:.12em; }
.club-play { align-self:center; }
.club-play h2 { font:700 26px Georgia,serif; margin:0 0 18px; }
#menu .mode-row { display:flex; flex-direction:column; gap:0; margin:0 0 24px; }
#menu .mode-btn { display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:8px; width:100%; min-width:0; padding:18px 0; border:0; border-bottom:1px solid #c8cace; border-radius:0; background:transparent; color:var(--club-ink); text-align:left; box-shadow:none; transition:background .15s; }
#menu .mode-btn:first-child { border-top:1px solid #c8cace; }
#menu .mode-btn:hover { background:#e9edf1; transform:none; }
#menu .mode-btn .icon { margin:0; color:#5c6268; font:italic 17px Georgia,serif; }
#menu .mode-btn .label { color:var(--club-ink); font:700 16px/1.4 Arial,sans-serif; }
#menu .mode-btn .desc { color:#5c6268; font:11px/1.4 Arial,sans-serif; margin:0; text-align:right; }
.club-field-label { font:700 10px Arial,sans-serif; letter-spacing:.12em; margin-bottom:9px; }
#menu #diff-row { display:flex; flex-wrap:nowrap; gap:0; margin:0 0 20px; border:1px solid #aeb6bf; }
#menu .diff-btn { border:0; border-radius:0; padding:12px 8px; flex:1; background:none; }
#menu .diff-btn + .diff-btn { border-left:1px solid #aeb6bf; }
#menu .diff-btn .icon { display:none; }
#menu .diff-btn .label { color:var(--club-ink); font:700 11px Arial,sans-serif; }
#menu .diff-btn.selected { background:var(--club-action); }
#menu .diff-btn.selected .label { color:var(--club-paper); }
#menu .menu-hint { color:#5c6268; font:13px/1.6 Georgia,serif; text-align:left; text-shadow:none; margin:0 0 24px; }
#menu .club-back { color:var(--club-ink); text-decoration:underline; text-underline-offset:4px; font:12px Arial,sans-serif; }
#menu button:focus-visible,#menu a:focus-visible { outline:3px solid var(--club-action); outline-offset:3px; }
#charselect,#waitscreen,#tourneyscreen { background:linear-gradient(#272d35eb,#272d35eb),url('../img/materials/plaster.webp') center/600px; color:var(--club-paper); touch-action:pan-y; }
#charselect h2,#waitscreen h2,#tourneyscreen h2 { font:700 clamp(26px,4vw,42px)/1.15 Georgia,serif; color:var(--club-paper); text-shadow:none; letter-spacing:-.02em; margin-bottom:10px; }
#charselect > a { color:#c6cbd0 !important; text-decoration:underline !important; text-underline-offset:3px; }
.cs-subtitle,.cs-hint,.desc,.score-label,#pingtext { color:#c6cbd0; }
.cs-card { border:1px solid #aeb6bf; border-radius:1px; background:#eeefef; color:var(--club-ink); box-shadow:0 3px 4px #0003; padding:12px 8px; }
.cs-card:hover,.cs-card:focus-visible { transform:translateY(-2px); border-color:#244d70; }
.cs-card.selected { background:#e5edf4; border-color:#244d70; box-shadow:inset 0 -5px #244d70; }
.cs-card[aria-pressed=true] { outline:2px solid var(--club-action); outline-offset:3px; }
.cs-name { font:700 13px/1.4 Georgia,serif; color:var(--club-ink); }
.cs-abi { color:#5c6268; font-size:11px; }
.cs-col-label { color:#c6cbd0; font-size:11px; }
.cs-detail { background:#272d35; border:1px solid #929ca6; border-radius:0; color:#e3e5e8; }
.cs-detail strong { color:#c8d9e8; }
#cs-start { border:1px solid #244d70; box-shadow:0 3px #18344d; background:#244d70; color:#ffffff; }
.ov-btn { border-radius:2px; font:700 13px/1.4 Arial,sans-serif; padding:12px 18px; }
.ov-btn:hover { transform:translateY(-1px); }
#hud { background:#272d35f5; border-bottom:1px solid #929ca6; }
.score-box { font:700 clamp(28px,4vw,42px)/1 Georgia,serif; color:#f5f4ef; text-shadow:none; }
.hud-face { border:1px solid #929ca6; border-radius:2px; filter:none; background:#303942; }
#rally-count { color:#c6cbd0; }
#soundbar { border:1px solid #929ca6; border-radius:2px; background:#272d35; }
.court-tip { border-radius:2px; background:#272d35eb; color:#f5f4ef; }
#countdown span { font:700 clamp(74px,18vw,160px)/1 Georgia,serif; color:#f5f4ef; text-shadow:0 3px 0 #25282b; }
#overlay { background:#272d35f5; backdrop-filter:none; }
#overlay h2 { font:700 clamp(30px,5vw,54px)/1.2 Georgia,serif; }
.final-score { color:#c6cbd0; }
.room-label { color:#c6cbd0; }
.room-code { border-radius:2px; border:1px solid #929ca6; background:#242a31; }
.ty-size-btn,.ty-room-btn,.ty-player-chip { border-radius:2px; }
@media(max-width:700px) {
 #menu { padding:16px; }
 #menu .club-sheet { max-width:480px; display:block; padding:26px; }
 .club-identity { border-right:0; padding:0; }
 .club-kicker { margin-bottom:20px; font-size:9px; }
 #menu h1 { font-size:62px; line-height:.95; }
 #menu .sub { max-width:none; margin-bottom:22px; font-size:15px; }
 .club-court,.club-stamp { display:none; }
 .club-play h2 { font-size:23px; }
 #menu .mode-btn { padding:16px 0; }
 #menu .mode-btn .label { font-size:14px; }
 #menu .mode-btn .desc { font-size:10px; }
 #charselect.solo { justify-content:flex-start; }
 .cs-name { font-size:12px; }
 .cs-card { min-height:120px; }
 .cs-abi { font-size:10px; }
 #charselect h2 { font-size:28px; }
}
@media(max-height:600px) and (min-width:701px) {
 #menu { padding:18px; }
 #menu .club-sheet { padding:22px 32px; }
 #menu h1 { font-size:64px; }
 .club-court { max-width:220px; margin:15px 0; }
 .club-kicker { margin-bottom:18px; }
 #menu .mode-btn { padding:12px 0; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }

/* Arcade poster: real Tom, huge type, punchy controls. Same three-color system. */
#menu { background:linear-gradient(#20252bdc,#20252bdc),url('../img/materials/plaster.webp') center/700px; background-blend-mode:normal; padding:32px; }
#menu .club-sheet { max-width:1180px; grid-template-columns:1.2fr 1fr; padding:0; gap:28px; border:0; background:none; box-shadow:none; }
.club-identity { min-height:640px; padding:30px; border:3px solid #111920; background:linear-gradient(#244d70e6,#244d70e6),url('../img/materials/green-metal.webp') center/600px; position:relative; overflow:hidden; box-shadow:8px 8px 0 #111920; }
.club-kicker { border:0; padding:0; margin:0 0 16px; color:#f5f4ef; font-weight:900; letter-spacing:.13em; }
#menu h1 { position:relative; z-index:3; font:1000 clamp(74px,8.3vw,124px)/.85 Impact,'Arial Black',Arial,sans-serif; letter-spacing:-.045em; font-style:italic; color:#f5f4ef; text-shadow:5px 6px 0 #152c40; transform:rotate(-4deg); margin:22px 0 14px; }
#menu h1 span { color:#f5f4ef; }
#menu .sub { position:relative; z-index:4; display:inline-block; max-width:none; background:#f5f4ef; color:#25282b; font:900 12px/1.4 Arial,sans-serif; padding:9px 13px; margin:0; transform:rotate(-4deg); border:2px solid #152c40; }
.club-tom { position:absolute; z-index:2; bottom:-14px; right:-24px; width:94%; height:60%; object-fit:contain; object-position:center bottom; filter:drop-shadow(-5px 0 0 #f5f4ef) drop-shadow(5px 0 0 #f5f4ef); pointer-events:none; }
.club-court { position:absolute; width:90%; left:-12%; bottom:50px; transform:rotate(-14deg); opacity:.45; box-shadow:none; }
.club-stamp { position:absolute; bottom:28px; left:22px; z-index:4; background:#f5f4ef; padding:11px 16px; color:#244d70; border:3px solid #152c40; box-shadow:4px 4px #152c40; font:900 15px/1.3 Arial,sans-serif; transform:rotate(-7deg); }
.club-play { padding:32px; background:#f5f4ef; border:3px solid #111920; box-shadow:8px 8px #111920; transform:rotate(1deg); }
.club-play h2 { font:1000 44px/.95 Impact,'Arial Black',Arial,sans-serif; font-style:italic; letter-spacing:-.035em; margin-bottom:24px; }
#menu .mode-row { gap:12px; }
#menu .mode-btn,#menu .mode-btn:first-child { min-height:84px; border:2px solid #25282b; border-radius:5px; padding:15px; box-shadow:0 5px #25282b; grid-template-columns:28px 1fr; background:#fff; }
#menu .mode-btn .label { font:900 20px/1 Arial,sans-serif; letter-spacing:-.04em; }
#menu .mode-btn .desc { grid-column:2; text-align:left; font-size:11px; }
#menu .mode-btn .icon { grid-row:1/3; font:900 18px Arial,sans-serif; }
#menu .mode-btn:first-child { background:#244d70; color:white; }
#menu .mode-btn:first-child .label,#menu .mode-btn:first-child .desc,#menu .mode-btn:first-child .icon { color:white; }
#menu .mode-btn:hover { transform:translateY(-2px); background:#e5edf4; }
#menu .mode-btn:first-child:hover { background:#183f62; }
#menu .mode-btn:active { transform:translateY(4px); box-shadow:0 1px #25282b; }
#menu #diff-row { border:2px solid #25282b; border-radius:3px; }
#menu .diff-btn + .diff-btn { border-color:#25282b; }
#menu .diff-btn { padding:13px 8px; }
#menu .menu-hint { font:12px/1.6 Arial,sans-serif; }
#charselect h2,#waitscreen h2,#tourneyscreen h2,#overlay h2 { font-family:Impact,'Arial Black',Arial,sans-serif; font-weight:1000; font-style:italic; letter-spacing:-.03em; }
.cs-card { border:3px solid #111920; border-radius:5px; box-shadow:0 5px #111920; }
.cs-card.selected { border-color:#c7e4ff; background:#d9e7f2; box-shadow:0 5px #244d70; }
.cs-name { font:900 16px/1.4 Arial,sans-serif; }
#cs-start { font:900 20px Arial,sans-serif; border:2px solid #a9c8e2; border-radius:4px; box-shadow:0 5px #111920; }
.score-box,#countdown span { font-family:Impact,'Arial Black',Arial,sans-serif; font-weight:1000; }
@media(max-width:700px) {
 #menu { padding:14px; }
 #menu .club-sheet { display:flex; flex-direction:column; max-width:480px; gap:14px; }
 .club-identity { min-height:260px; padding:20px; }
 .club-kicker { font-size:9px; }
 #menu h1 { font-size:66px; margin:20px 0 18px; }
 #menu .sub { font-size:9px; padding:6px 9px; margin:0; }
 .club-tom { width:60%; height:78%; right:-26px; bottom:-15px; }
 .club-stamp { display:none; }
 .club-court { display:block; width:90%; bottom:0; left:30%; }
 .club-play { padding:22px; transform:none; }
 .club-play h2 { font-size:32px; margin-bottom:18px; }
 #menu .mode-btn { min-height:68px; padding:12px; }
 #menu .mode-btn .label { font-size:17px; }
 #menu .mode-btn .desc { font-size:11px; }
 #menu .mode-row { margin-bottom:22px; }
 .cs-name { font-size:13px; }
}
@media(max-height:600px) and (min-width:701px) {
 #menu { padding:20px; }
 #menu .club-sheet { padding:0; gap:20px; }
 .club-identity { min-height:460px; padding:24px; }
 #menu h1 { font-size:76px; }
 .club-play { padding:22px; }
 .club-play h2 { font-size:32px; }
 #menu .mode-btn { min-height:65px; padding:10px; }
 .club-court { max-width:none; }
}
.club-board { display:block; margin:0 0 14px; padding:0; border:0; background:none; color:var(--club-action); font:700 13px/1.5 Arial,sans-serif; letter-spacing:.04em; cursor:pointer; }
.club-board:hover { text-decoration:underline; text-underline-offset:4px; }
.ov-rank { min-height:1.4em; margin:-6px 0 16px; color:#ffcc00; font:700 15px/1.4 Arial,sans-serif; letter-spacing:.06em; text-align:center; }