/* Shared ISF visual system. Loaded after legacy page styles deliberately. */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');
:root {
    --font-main: 'Roboto', 'Segoe UI', sans-serif;
    --font-header: var(--font-main);
    --isf-accent: #00c6ef;
    --isf-gradient: linear-gradient(135deg, #00c6ef, #0072ff);
    --isf-background: radial-gradient(ellipse at 50% 35%, #171a1d 0%, #080909 65%, #030404 100%);
    --isf-panel: linear-gradient(145deg, #151719, #0b0c0d);
    --isf-border: #343a40;
    --isf-muted: #a4adb5;
    --isf-radius: 16px;
    --text-gray: var(--isf-muted);
    color-scheme: dark;
}
html { min-height: 100%; scrollbar-color: #44515a #080909; }
body[class] {
    font-family: var(--font-main);
    background: var(--isf-background);
    color: #f5f7fa;
    min-height: 100vh;
    min-height: 100dvh;
}
body:not(.game-body) { height: auto; overflow-y: auto; overflow-x: hidden; }
button, input, select, textarea { font-family: var(--font-main); }
button, a { -webkit-tap-highlight-color: transparent; }
button { line-height: 1.25; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--isf-accent); outline-offset: 4px;
}
body:not(.game-body) p, body:not(.game-body) p * { user-select: text; }
h1, .title, .menu-title, .player-name { font-family: var(--font-main); font-weight: 900; font-style: italic; line-height: 1.15; }
body:not(.game-body) h1, .title { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.auth-card, .setup-container, .menu-card, .t-card, .setup-card, .stat-card, .rule-box, .user-panel {
    background: var(--isf-panel); border: 1px solid var(--isf-border); border-radius: var(--isf-radius);
    box-shadow: 0 14px 40px #0005;
}
.auth-card, .setup-container, .menu-card, .setup-card { padding: clamp(24px, 4vw, 40px); max-width: 100%; }
.auth-header p, .setup-header p, .alt-link, .link-back, .btn-text, .btn-back, .sub-stat, .p-stats,
.user-welcome, .sb-label, .loading-text { color: var(--isf-muted); }
.input-label { color: var(--isf-accent); font-size: .8rem; }
.auth-input, .modern-input, .lobby-input, .custom-select-trigger {
    background: #1c2023; border: 1px solid #444c53; border-radius: 9px; min-height: 46px;
    color: #f5f7fa; font-size: 1rem; max-width: 100%;
}
.auth-input:focus, .modern-input:focus, .lobby-input:focus { border-color: var(--isf-accent); box-shadow: 0 0 0 3px #00c6ef20; }
input::placeholder, textarea::placeholder { color: #a4adb5; opacity: 1; }
:is(.btn-auth, .btn-mode-play, .btn-action-large, .btn-blue, .btn-blue-gradient, .btn-start, .btn-play-now, .btn-submit, .btn-play.active, .btn-play.ready) {
    background: var(--isf-gradient); border: 1px solid transparent; border-radius: 999px; color: white;
    font-weight: 900; text-transform: uppercase; min-height: 46px; padding: 13px 24px;
    box-shadow: 0 5px 20px #0072ff25; transition: filter .2s, transform .2s; cursor: pointer;
}
:is(.btn-auth, .btn-mode-play, .btn-action-large, .btn-blue, .btn-blue-gradient, .btn-start, .btn-play-now, .btn-submit):hover {
    background: var(--isf-gradient); color: white; filter: brightness(1.12); transform: translateY(-2px);
}
.btn-outline, .btn-join-action, .back-btn, .btn-home, .btn-exit, .btn-logout-small, .btn-back, .btn-cancel {
    border: 1px solid var(--isf-border); border-radius: 999px; background: #14181b; color: #dbe4e9;
    padding: 11px 20px; min-height: 42px; font-size: .875rem; font-weight: 700; cursor: pointer; text-decoration: none;
}
:is(.btn-outline, .btn-join-action, .back-btn, .btn-home, .btn-exit, .btn-back, .btn-cancel):hover {
    border-color: var(--isf-accent); color: white; background: #00c6ef15;
}
button:disabled, .btn-blue:disabled { cursor: not-allowed; opacity: .55; filter: none; transform: none; box-shadow: none; background: #30363c; }
/* Pages grow from their content; flex children must never shrink away their rows. */
.page-login, .page-signup, body.matchmaking-body, .page-tournament-setup, .page-friend-match, .page-tournament-match {
    padding: 32px 20px 72px; justify-content: flex-start;
}
.page-login .auth-card, .page-signup .auth-card, body.matchmaking-body > :first-child,
.page-friend-match #match-ui, .page-tournament-match #match-ui { margin: auto; flex-shrink: 0; }
.page-tournament-setup .tournament-grid { margin-top: auto; }
.page-tournament-setup .bottom-nav { margin-bottom: auto; padding-top: 24px; }
.tournament-grid { width: 100%; gap: 24px; }
.t-card { padding: 32px; gap: 8px; }
.right-column { gap: 24px; }
.auth-card { width: 440px; }
.password-wrapper { position: relative; }
.password-wrapper .auth-input { padding-right: 54px; }
.password-toggle {
    position: absolute; top: 0; right: 0; width: 48px; height: 100%; padding: 0;
    background: transparent; border: 0; border-radius: 8px; color: #b6c0c7; cursor: pointer; font-size: 1rem;
}
.password-toggle:hover { color: var(--isf-accent); }
.guest-login { width: 100%; margin-top: 16px; border-color: var(--isf-accent); }
.guest-help { color: var(--isf-muted); font-size: .875rem; line-height: 1.5; margin-top: 12px; }
.session-status {
    position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 8500;
    max-width: 100%; width: max-content; padding: 8px 16px; background: #0b171ff2;
    border: 1px solid #00c6ef70; border-radius: 12px 12px 0 0; color: #bceefa;
    font-size: .8rem; text-align: center; line-height: 1.4; pointer-events: none;
}
/* Home: keep the familiar navigation, card artwork and two-column mode grid. */
.app-container { min-height: 100dvh; height: auto; background: transparent; align-items: stretch; }
.sidebar-left { width: 240px; flex-shrink: 0; background: #080a0bc7; }
.hero-area, .rules-visual { background: var(--isf-background); min-width: 0; }
.hero-area { position: sticky; top: 0; height: 100dvh; }
.hero-card-img { max-width: 90%; height: auto; max-height: 60vh; object-fit: contain; }
.sidebar-right { background: #080a0bb3; padding: 28px !important; min-width: 360px; }
.mode-box { height: auto !important; min-height: 205px; max-height: none; gap: 10px; padding: 20px 12px; border: 1px solid var(--isf-border); background: var(--isf-panel); border-radius: var(--isf-radius); }
.mode-box h3 { font-size: 1.1rem !important; }
.mode-icon { flex-shrink: 0; background: none; height: 42px; }
.btn-mode-play { flex-shrink: 0; width: 100% !important; }
.user-panel { border-color: #00c6ef70; }
.user-name-display { overflow-wrap: anywhere; }
.sidebar-footer a { color: var(--isf-muted); }
.nav-links { padding: 0; }
.nav-links a { padding: 12px; }
/* Rankings: natural document scrolling, with no shrinking/clipped list. */
.page-leaderboard { display: block; padding: clamp(20px, 4vw, 48px); }
.header-bar { max-width: 1200px; margin: 0 auto 32px; gap: 20px; border-bottom: 1px solid var(--isf-border); }
.title { color: var(--isf-accent); }
.lb-container { width: 100%; max-width: 900px; border-radius: var(--isf-radius); background: var(--isf-panel); flex-shrink: 0; }
.lb-row { min-height: 100px; padding: 20px; gap: 12px; }
.player-info { min-width: 0; padding-left: 8px; overflow-wrap: anywhere; }
.rank, .country, .elo-score { flex-shrink: 0; }
.elo-score { width: auto; min-width: 64px; padding-right: 0; color: var(--isf-accent); }
/* How to play uses the same typography and surface treatment. */
body.rules-body { flex-direction: row !important; align-items: flex-start; }
.rules-visual { position: sticky; top: 0; height: 100dvh; }
.rules-content { width: min(55%, 780px); background: transparent; overflow: visible; padding: clamp(24px, 4vw, 48px); }
.rules-intro h1 { font-style: italic; text-transform: uppercase; line-height: 1.15; }
.rules-intro .text-gold { color: var(--isf-accent); }
.rule-box { border-left: 3px solid var(--isf-accent); }
.rule-header i { color: var(--isf-accent); background: none; border: 0; }
.rule-box p { font-size: 1rem; }
.rule-box ul { padding-left: 20px; line-height: 1.6; }
.rule-box:hover { transform: none; background: var(--isf-panel); }
/* Full-page forms, stats and brackets. */
.page-report-bug .top-bar { position: static; flex-shrink: 0; background: #0b0e10 !important; min-height: 76px; }
.page-report-bug .main-container { height: auto; min-height: calc(100dvh - 76px); flex: 1; padding: 28px 20px 72px; background: transparent; }
.page-report-bug .setup-card { width: min(100%, 520px); }
.page-report-bug textarea { text-transform: none; text-align: left; resize: vertical !important; }
.page-stats { padding: 32px 20px 72px; }
.stats-grid { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.page-friend-tournament .nav-bar { flex-shrink: 0; }
.bracket-container { justify-content: flex-start; overflow: auto; min-height: 670px; padding: 60px 24px 100px; }
.bracket-wrapper { height: 500px; margin: auto; flex-shrink: 0; }
.page-friend-tournament .action-bar { position: sticky; bottom: 0; flex-shrink: 0; }
/* Gameplay retains card geometry; shared palette and widgets match the menus. */
body.game-body { background: var(--isf-background) !important; }
.scoreboard-widget { border-color: #00c6ef70; background: #10171aee; }
.sb-header { color: var(--isf-accent); }
.sb-row:nth-child(2) { background: #00c6ef0d; }
.message-modal { background: #101518f7; border: 1px solid var(--isf-border); border-radius: var(--isf-radius); max-width: calc(100vw - 32px); max-height: 85dvh; overflow-y: auto; min-width: min(400px, calc(100vw - 32px)); }
.message-modal h1 { font-size: clamp(1.5rem, 3vw, 2.6rem); }
.the-code { color: var(--isf-accent) !important; font-family: var(--font-main) !important; }
.host-code-display { border-color: var(--isf-accent); animation: none; }
@media (max-width: 1050px) {
    .app-container { flex-wrap: wrap; }
    .sidebar-left { width: 100%; flex-direction: row; align-items: center; gap: 24px; padding: 16px 20px; overflow-x: auto; }
    .sidebar-logo { width: 130px; margin: 0; }
    .nav-links { display: flex; flex: 1; gap: 8px; white-space: nowrap; }
    .nav-links li { margin: 0; }
    .sidebar-footer { display: flex; gap: 16px; white-space: nowrap; }
    .sidebar-footer li { margin: 0; }
    .hero-area { height: auto; min-height: 500px; position: relative; }
    .sidebar-right { width: 50% !important; }
}
@media (max-width: 700px) {
    .hero-area { display: none; }
    .sidebar-right { width: 100% !important; min-width: 0; padding: 20px 20px 64px !important; border: 0; }
    .tournament-grid { grid-template-columns: 1fr; }
    .t-card { padding: 24px; }
    .t-card.large { gap: 24px; }
    .header-bar { flex-wrap: wrap; }
    .lb-row { gap: 8px; padding: 16px 10px; }
    .rank { width: 32px; font-size: 1rem; }
    .country { width: 26px; }
    .country img { width: 24px; }
    .player-info { padding-left: 0; }
    .p-name { font-size: 1rem; }
    .elo-score { font-size: 1.2rem; min-width: 48px; }
    body.rules-body { flex-direction: column !important; }
    .rules-visual { display: none; }
    .rules-content { width: 100%; border: 0; padding-bottom: 72px; }
    .input-row { flex-wrap: wrap; }
    .input-row .input-group { min-width: 120px; }
    .page-report-bug .top-bar { padding: 16px 20px; }
    .page-report-bug .logo-img { max-width: 130px; height: auto; }
    .session-status { font-size: .75rem; padding: 6px 10px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
}
.p-name { color: white; text-decoration: none; }
.p-name:hover { color: var(--isf-accent); }
.p-username { display: block; font-size: .8rem; color: var(--isf-muted); margin: 3px 0; }
@media (max-width: 700px) {
    .sidebar-left { flex-wrap: wrap; overflow: visible; gap: 16px; }
    .logo-area-sidebar { width: 100%; }
    .nav-links { display: grid; grid-template-columns: 1fr 1fr; width: 100%; white-space: normal; }
    .nav-links a { padding: 8px 10px; }
    .sidebar-footer { width: 100%; margin-top: 0; padding: 0 10px; }
}
body.page-report-bug .top-bar { position: static; }
.page-report-bug .input-group { margin-bottom: 20px; }
.page-report-bug .lobby-input { margin-bottom: 0; }
.page-report-bug .setup-header { margin-bottom: 24px; }


/* All single-match entry panels share the same dimensions and rhythm. */
:is(.page-setup, .page-multiplayer-setup, .page-matchmaking) :is(.setup-container, .menu-card) {
    width: 440px; max-width: 100%; min-height: 560px; margin: auto; padding: 32px;
    display: flex; flex-direction: column; justify-content: center; gap: 18px; text-align: center;
}
:is(.page-setup, .page-multiplayer-setup, .page-matchmaking) h1 {font-size: 2rem; font-weight: 900; font-style: italic; margin: 0;}
:is(.page-setup, .page-multiplayer-setup, .page-matchmaking) :is(.btn-action-large,.btn-blue,.btn-blue-gradient,.btn-join-action,.modern-input) {width: 100%; margin: 0; font-size: 1rem;}
:is(.page-setup, .page-multiplayer-setup, .page-matchmaking) br {display:none;}
.page-setup .slider-container {margin:0;}
.page-setup .diff-number {font-size:3rem; margin:0;}
.page-setup .diff-label {font-size:1rem; margin:0;}

.preferences-page {display:flex; align-items:center; justify-content:flex-start; height:auto; padding:40px 20px 80px; min-height:100dvh;}
.preferences-card {width:540px; max-width:100%; padding:32px; background:var(--isf-panel); border:1px solid var(--isf-border); border-radius:var(--isf-radius);}
.preferences-card h1 {margin-bottom:28px; font-size:2rem; font-style:italic;}
.preferences-card h2 {font-size:1.25rem; margin:28px 0 16px;}
.preferences-card label {display:block; margin:12px 0 8px;}
.preferences-card fieldset {border:1px solid var(--isf-border); padding:16px; border-radius:12px;}
.preferences-card .theme-choice {display:flex; align-items:center; gap:12px; min-height:44px;}
.preferences-card .auth-input {width:100%; padding:12px;}
.preferences-card button {margin-top:16px;}
.preference-help {color:var(--isf-muted); font-size:.9rem; line-height:1.6; margin:16px 0;}
.preferences-nav {display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px; margin-top:32px;}
.preferences-nav a {color:var(--isf-accent);}
.preferences-card [role=status] {margin:16px 0; line-height:1.5; overflow-wrap:anywhere;}
.preferences-card [hidden] {display:none !important;}

/* Theme variables apply only outside gameplay, including inline legacy surfaces. */
html[data-theme=light]:has(body:not(.game-body):not(.slaps-page):not(.slaps-home)) {color-scheme:light; scrollbar-color:#8aa3b0 #edf3f6;}
html[data-theme=light] body:not(.game-body):not(.slaps-page):not(.slaps-home) {
    --isf-background:radial-gradient(ellipse at 50% 35%, #fff 0%, #eef5f9 65%, #dfeaf0 100%);
    --isf-panel:linear-gradient(145deg,#fff,#edf4f8); --isf-border:#b8cbd6; --isf-muted:#4e626f; --isf-accent:#007e9e;
    color:#142c3a;
}
html[data-theme=light] body:not(.game-body):not(.slaps-page):not(.slaps-home) :is(h1,h2,h3,.menu-title,.p-name,.user-name-display,.nav-links a,.stat-val,.stat-value,.the-code,.round-title) {color:#142c3a !important;}
html[data-theme=light] body:not(.game-body):not(.slaps-page):not(.slaps-home) :is(.sidebar-left,.sidebar-right,.top-bar,.nav-bar,.action-bar,.example-box,.custom-options,.custom-select-trigger,.auth-input,.modern-input,.lobby-input,.match-card) {background:#f4f8fb !important; color:#142c3a !important; border-color:#b8cbd6;}
html[data-theme=light] body:not(.game-body):not(.slaps-page):not(.slaps-home) :is(.btn-outline,.btn-join-action,.back-btn,.btn-home,.btn-exit,.btn-logout-small,.btn-back,.btn-cancel) {background:#e3edf3; color:#142c3a;}
html[data-theme=light] body:not(.game-body):not(.slaps-page):not(.slaps-home) :is(input,textarea)::placeholder {color:#596f7b;}
html[data-theme=light] body:not(.game-body):not(.slaps-page):not(.slaps-home) :is(.rule-box p,.rule-box li,.rules-intro p,.info-text,.player-name,.input-label,.custom-option,.security-warning) {color:#344f60;}
html[data-theme=light] body:not(.game-body):not(.slaps-page):not(.slaps-home) .session-status {background:#e4f5fc; color:#185369;}
html[data-theme=light] body:not(.game-body):not(.slaps-page):not(.slaps-home) .lb-row.me {background:#d7edf5;}
html[data-theme=light] body:not(.game-body):not(.slaps-page):not(.slaps-home) :is(.diff-number,.diff-label) {color:#23536b !important; text-shadow:none;}
.page-multiplayer-setup #lobby-actions-container {display:flex; flex-direction:column; gap:18px;}
.page-multiplayer-setup #join-code {width:100% !important;}
.page-multiplayer-setup .divider {justify-content:center;}
html[data-theme=light] body:not(.game-body):not(.slaps-page):not(.slaps-home) :is(.setup-container,.menu-card,.auth-card,.preferences-card,.rule-box,.stat-card,.user-panel) {box-shadow:0 12px 30px #23435a24;}

:is(.page-setup,.page-multiplayer-setup,.page-matchmaking) :is(.setup-container > i,.icon-group) {font-size:3rem !important; color:var(--isf-accent) !important; text-shadow:none !important; margin:0 !important;}
html[data-theme=light] body:not(.game-body):not(.slaps-page):not(.slaps-home) :is(.stat-label,.col-title) {color:var(--isf-muted) !important;}
html[data-theme=light] body:not(.game-body):not(.slaps-page):not(.slaps-home) .highlight-green {color:#18743b;}
html[data-theme=light] body:not(.game-body):not(.slaps-page):not(.slaps-home) .highlight-red {color:#b92332;}
html[data-theme=light] body:not(.game-body):not(.slaps-page):not(.slaps-home) .rank.top3 {color:#8a6200; text-shadow:none;}
html[data-theme=light] body:not(.game-body):not(.slaps-page):not(.slaps-home) .match-box:not(.occupied) {background:#e7eff4; color:#526a78; border-color:var(--isf-border);}