/* Player-facing layer on the existing NES/CRT design system. */
[hidden] { display: none !important; }
body { font-size: 12px; }
.club { position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:28px 28px 135px; }
.club-header { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:34px; }
.club-brand { font-family:var(--font-pixel); font-size:16px; color:white; text-shadow:3px 3px var(--brick-dark); text-decoration:none; line-height:1.7; }
.club-brand small { display:block; font-family:var(--font-body); font-size:10px; letter-spacing:3px; color:var(--yellow-light); text-shadow:2px 2px var(--sky-deep); }
.club .pixel-nav { margin:0; padding:0; }
.club .pixel-nav button { font-size:10px; padding:12px 15px; }
.hero { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:24px; }
.eyebrow { color:var(--yellow-light); font-size:11px; letter-spacing:2px; margin:0 0 12px; text-shadow:2px 2px var(--sky-deep); }
h1 { font-family:var(--font-pixel); font-size:25px; line-height:1.6; margin:0; color:white; text-shadow:3px 3px var(--sky-deep); }
.hero-note { color:white; max-width:280px; line-height:1.9; }
.play-grid { display:grid; grid-template-columns:minmax(400px,1.5fr) minmax(310px,1fr); gap:28px; align-items:start; }
.club .pixel-tv { width:100%; }
.club .tv-screen { aspect-ratio:256/224; position:relative; background:#111; overflow:hidden; }
.club canvas { display:block; width:100%; height:100%; object-fit:contain; }
.club .tv-brand { font-size:10px; }
.club .tv-bottom { display:flex; justify-content:center; gap:12px; }
.glass-message { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:32px; background:rgba(0,0,0,.72); color:white; font-family:var(--font-pixel); font-size:14px; line-height:2; }
.glass-message p { max-width:330px; }
.setup-card { padding:24px; }
.setup-card h2,.panel-heading { font-family:var(--font-pixel); font-size:13px; margin:0 0 18px; line-height:1.8; }
.field { display:block; margin-bottom:20px; }
.field-label { display:block; font-size:10px; letter-spacing:1px; margin:0 0 8px; color:#453b2b; }
input[type=text], select { width:100%; font-family:var(--font-body); color:var(--ink); font-size:12px; padding:12px; background:#fff7df; border:3px solid var(--tv-shell-deep); border-radius:0; box-shadow:inset 2px 2px #b0a184; }
input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible { outline:3px solid var(--yellow); outline-offset:3px; }
.nickname-row { display:flex; gap:8px; }
.nickname-row input { min-width:0; }
.nickname-row button { flex:none; padding:8px; font-size:9px; }
.help { font-family:var(--font-mono); font-size:18px; line-height:1.3; color:var(--ink-soft); margin:8px 0 0; }
.profile-line { margin:12px 0 20px; background:#fff1cb; border-left:4px solid var(--green); padding:10px; overflow-wrap:anywhere; }
.side-choice { display:flex; gap:10px; margin-bottom:22px; }
.side-choice label { flex:1; display:flex; align-items:center; gap:8px; padding:12px 6px; background:#fff1cb; border:3px solid var(--tv-shell-deep); cursor:pointer; font-size:10px; }
.side-choice label:has(input:checked) { border-color:var(--green-dark); box-shadow:inset 0 -3px #80b851; }
.side-choice input { accent-color:var(--green-dark); }
.wide { width:100%; }
.small-link { border:0; background:transparent; text-decoration:underline; color:inherit; font-family:inherit; font-size:10px; padding:7px 0; }
.match-toolbar { display:flex; gap:10px; align-items:center; margin:16px 0; flex-wrap:wrap; }
.readout { margin-left:auto; font-family:var(--font-mono); font-size:20px; color:white; text-shadow:1px 1px var(--sky-deep); }
.match-score { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; text-align:center; gap:12px; padding:20px 0; }
.match-score strong { font-family:var(--font-pixel); font-size:32px; line-height:1.5; white-space:nowrap; }
.match-score span { overflow-wrap:anywhere; font-size:11px; }
.match-note { font-family:var(--font-mono); font-size:21px; margin:12px 0; }
.save-state { padding:12px; margin:16px 0; background:#fff5d9; border:2px solid var(--tv-shell-deep); line-height:1.8; }
.save-state.error { border-color:var(--red-dark); }
.rating-change { font-family:var(--font-pixel); font-size:17px; margin:18px 0; line-height:1.9; }
.positive { color:var(--green-dark); }
.negative { color:var(--red-dark); }
.status-banner { background:#fff1cb; border:3px solid var(--tv-shell-deep); padding:12px 16px; margin-bottom:20px; }
.notice { color:#fff4d1; font-family:var(--font-mono); font-size:19px; padding:0 8px; }
.section-top { display:flex; justify-content:space-between; gap:20px; align-items:center; margin-bottom:24px; }
.filters { display:flex; gap:8px; flex-wrap:wrap; }
.filters .active { background:var(--yellow); }
.table-wrap { overflow:auto; padding:8px; }
table { width:100%; border-collapse:collapse; text-align:left; font-size:11px; }
th { font-size:9px; letter-spacing:1px; padding:14px; border-bottom:3px solid var(--tv-shell-deep); }
td { padding:16px 14px; border-bottom:2px solid #a49372; }
tbody tr:nth-child(even) { background:rgba(255,247,223,.32); }
.name-button { border:0; padding:0; background:none; text-align:left; font-family:inherit; color:var(--ink); font-size:12px; cursor:pointer; }
.name-button:hover { text-decoration:underline; }
.badge { display:inline-block; background:var(--console); color:white; font-size:8px; padding:3px 6px; margin-right:8px; vertical-align:middle; }
.badge.bot { background:var(--green-dark); }
.badge.new { background:var(--brick); }
.elo { font-family:var(--font-pixel); font-size:15px; }
.empty { font-family:var(--font-mono); font-size:24px; padding:24px; text-align:center; }
.watch-filters { display:flex; gap:16px; margin-bottom:24px; }
.watch-filters label { flex:1; }
.watch-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
.watch-card { padding:22px; }
.watch-card h3 { margin:0 0 16px; line-height:1.8; font-size:13px; }
.watch-card .versus { display:block; font-family:var(--font-pixel); color:var(--red-dark); font-size:10px; margin:8px 0; }
.watch-card p { font-family:var(--font-mono); font-size:20px; }
.replay-layout { max-width:780px; margin:0 auto; }
.replay-transport { display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding:18px; margin:18px 0; }
.replay-transport input[type=range] { flex:1; min-width:160px; accent-color:var(--green); }
.replay-transport select { width:auto; }
.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.settings-grid .pixel-card { padding:24px; }
.binding { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:10px 0; border-bottom:1px solid #9a8765; }
.binding button { min-width:125px; }
.input-lights { display:flex; gap:6px; flex-wrap:wrap; margin-top:20px; }
.input-light { background:var(--console); color:#bbb; border:2px solid #555; padding:8px; font-size:9px; }
.input-light.on { background:var(--yellow); color:#171717; border-color:var(--yellow-dark); }
.site-footer { font-family:var(--font-mono); font-size:18px; margin-top:32px; color:#fff8e0; display:flex; justify-content:space-between; gap:20px; }
dialog { max-width:480px; width:calc(100% - 32px); background:var(--tv-shell); border:6px solid var(--tv-shell-deep); padding:28px; }
dialog::backdrop { background:rgba(0,0,0,.65); }
dialog p { font-family:var(--font-mono); font-size:23px; }
button:disabled { opacity:.55; cursor:wait; }
@media(max-width:900px) { .club {padding:20px 16px 135px;} .club-header {flex-direction:column;align-items:flex-start;} .play-grid {grid-template-columns:minmax(300px,1.2fr) minmax(260px,1fr);gap:16px;} .setup-card {padding:16px;} h1{font-size:20px;} .hero-note{max-width:220px;} }
@media(max-width:680px) { .play-grid,.settings-grid {grid-template-columns:1fr;} .hero{align-items:flex-start;flex-direction:column;} .hero-note{max-width:none;} .club .pixel-nav {width:100%;flex-wrap:wrap;} .club .pixel-nav button{padding:10px;font-size:9px;} .section-top{flex-direction:column;align-items:flex-start;} .watch-filters{flex-direction:column;} h1{font-size:18px;} }

.club.playing #view-play .hero {display:none;}
.club.playing #game-tv .pixel-tv {max-width:min(100%,calc((100dvh - 390px)*1.142857 + 64px));margin:auto;}
#replay-tv .pixel-tv {max-width:min(100%,calc((100dvh - 440px)*1.142857 + 64px));margin:auto;}

@media(max-width:900px) {
  .club.playing #game-tv .pixel-tv {max-width:min(100%,calc((100dvh - 470px)*1.142857 + 64px));}
}