:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#6b7280;
  --accent:#2563eb;
  --danger:#ef4444;
  --success:#16a34a;
  --muted-border:#eef2ff;
  --input-bg:#ffffff;
  --input-border:#e6eefc;
  --btn-secondary-bg:#e6eefc;
  --ui-bg-overlay: rgba(0,0,0,0.45);
  --ui-modal-bg: #ffffff;
  --ui-modal-radius: 8px;
  --ui-modal-pad: 16px;
  --ui-toast-bg-success: #16a34a;
  --ui-toast-bg-error: #ef4444;
  --ui-toast-bg-info: var(--accent);
  /* control / utility tokens */
  --on-accent: #ffffff; /* text color when on accent background */
  --on-card: #0f172a; /* text color intended for card surfaces */
  --card-shadow: 0 6px 18px rgba(15,23,42,0.06);
  --knob-bg: #ffffff;
  --knob-shadow: 0 2px 6px rgba(2,6,23,0.15);
  --on-toast: #ffffff;
    --ui-modal-bg: var(--card);
    --ui-bg-overlay: rgba(0,0,0,0.6);
    --ui-toast-bg-info: var(--accent);
    --ui-toast-bg-success: var(--success);
    --ui-toast-bg-error: var(--danger);
  --ui-z-modal: 9000;
  --ui-z-toast: 9100;
  --glass: rgba(255,255,255,0.6);
  --radius:10px;
  --max-width:1100px;
  --disabled-bg:#dddddd;
  --disabled-color:#666666;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.4;
  padding:20px;
}
/* Global typography tokens: change these to update site-wide text colors */
:root{
  --heading-color: var(--accent);
  --body-color: var(--text);
  --link-color: var(--accent);
  --muted-color: var(--muted);
}

/* Apply global text colors so theme variables control all text */
body, p, li, td, th, label, .tbl .tbl-dot-label, .ui-modal__body, .info-section p { color: var(--body-color); }
h1,h2,h3,h4,h5,h6, .brand { color: var(--heading-color); }
a, a:visited { color: var(--link-color); }
.muted{ color: var(--muted-color); }
.page{
  max-width:var(--max-width);
  margin:0 auto;
}

/* Ensure content blocks can be reordered responsively (info card may move on small screens) */
.page{display:flex;flex-direction:column;gap:12px}
h1{font-size:1.6rem;margin:0 0 12px}
h2{font-size:1.25rem;margin:0 0 8px}
h3{font-size:1rem;margin:12px 0}

.card{
  background:var(--card);
  border-radius:var(--radius);
  padding:14px;
  box-shadow:var(--card-shadow);
}

.payoff-table{border-collapse:collapse;font-size:0.92rem;margin-top:6px;width:100%;table-layout:fixed}
.payoff-table td{padding:6px;border:1px solid var(--muted-border);text-align:center;background:transparent;overflow:hidden;color:var(--text)}
.payoff-table th{padding:6px;border:1px solid var(--muted-border);text-align:center;background:linear-gradient(180deg,rgba(0,0,0,0.02),rgba(0,0,0,0.01));font-weight:600;color:var(--text)}
.payoff-table tr th:first-child{background:transparent;border-right:1px solid var(--muted-border)}

/* Topbar narrow-screen ordering tweaks: place status above and user+rules on bottom-left */
@media (max-width:800px){
  .topbar{flex-direction:column;align-items:flex-start}
  .topbar > div:last-child{order:2;align-self:stretch;width:100%;display:flex;flex-direction:column;gap:6px}
  .topbar > div:last-child > .muted{order:1}
  .topbar > div:last-child > div{order:2;display:flex;gap:8px;align-items:center;justify-content:flex-start}
}

/* inputs used in settings and payoff display */
.game-setting-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:4px 0}
.game-setting-row label{color:var(--text);font-size:0.9rem}
.game-setting-input{padding:6px;border-radius:8px;border:1px solid var(--input-border);background:var(--input-bg);min-width:60px;color:var(--text)}
.payoff-input{padding:4px;border-radius:6px;border:1px solid var(--input-border);background:var(--input-bg);min-width:44px;text-align:center;width:100%;box-sizing:border-box;color:var(--text)}
.payoff-input:disabled,.game-setting-input:disabled{opacity:1}

/* Leaderboard styling */
.leaderboard-card{padding:10px}
.leaderboard-list{display:flex;flex-direction:column;gap:6px}
.leaderboard-item{display:flex;align-items:center;justify-content:space-between;padding:6px;border-radius:8px;background:var(--card);border:1px solid var(--muted-border)}
.leaderboard-name{display:flex;align-items:center;gap:8px}
.leaderboard-dot{width:12px;height:12px;border-radius:50%;display:inline-block}
.leaderboard-rank{font-weight:700}
.leaderboard-top3 .leaderboard-rank{font-size:1.15rem}
.leaderboard-top3 .leaderboard-item:nth-child(1) .leaderboard-rank{font-size:1.35rem}
.leaderboard-top3 .leaderboard-item:nth-child(2) .leaderboard-rank{font-size:1.15rem}
.leaderboard-top3 .leaderboard-item:nth-child(3) .leaderboard-rank{font-size:1.05rem}
.trophy{margin-right:6px}

.percent-suffix{margin-left:8px;color:var(--muted);font-size:0.95rem}

.topbar{display:flex;gap:12px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.topbar .brand{font-weight:600}
.container{display:flex;gap:20px;align-items:flex-start}
.players{flex:1 1 60%}
.leaderboard{flex:0 0 320px}
/* legacy page rule: border and padding controlled by theme variables */
.leaderboard{border-left:1px solid var(--muted-border);padding-left:16px}

button{background:var(--accent);color:var(--on-accent);border:0;padding:8px 12px;border-radius:8px;cursor:pointer}
button.secondary{background:var(--btn-secondary-bg);color:var(--accent)}
button.danger{background:var(--danger)}
button:disabled{opacity:0.55;cursor:not-allowed}

/* Ensure secondary-styled buttons keep their appearance when disabled */
button.secondary:disabled{
  background:var(--btn-secondary-bg);
  color:var(--accent);
  cursor:not-allowed;
  opacity:1;
}

input,select,textarea{padding:8px;border-radius:8px;border:1px solid var(--input-border);background:var(--input-bg);min-height:36px;color:var(--text)}
label{display:block;margin-bottom:6px;color:var(--muted);font-size:0.9rem}

.form-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:10px}

/* Make inputs inside form-row fill the column but not grow unbounded */
.form-row > div > input,
.form-row > div > select,
.form-row > div > textarea {
  width: 100%;
  box-sizing: border-box;
  max-width: 120px; /* reasonable upper limit for desktop columns */
}

/* Allow very small screens to let inputs use full available width */
@media (max-width:420px){
  .form-row > div > input,
  .form-row > div > select,
  .form-row > div > textarea { max-width: 100%; }
}

#gamesContainer{display:flex;flex-direction:column;gap:10px}
.game-card{display:flex;justify-content:space-between;align-items:center;padding:10px;border-radius:8px;background:var(--card);border:1px solid var(--muted-border)}

#playersList div{padding:8px;border-bottom:1px dashed var(--muted-border)}
/* Ensure player items are primary text color, not muted */
#playersList, #playersList div { color: var(--text); }

canvas{max-width:100%;height:auto;border-radius:6px}

/* Responsive */
@media (max-width:800px){
  body{padding:12px}
  /* Topbar: place user row under title and left-aligned */
  .topbar{flex-direction:column;align-items:flex-start}
  .topbar > div:last-child{order:2;align-self:stretch;margin-top:8px;width:100%}
  .topbar > div:first-child{order:1}

  /* On small screens show the mobile variant below the main content */
  .info-section--wide{display:none}
  .info-section--mobile{display:block}

  /* Container: stack into a single column and enforce desired order:
     auth (aside) -> players (players-card) -> score (score-card) -> settings */
  .container{display:flex;flex-direction:column;gap:12px}
  .leaderboard{order:1;flex-basis:auto;border-left:0;padding-left:0;width:100%}
  .players{order:2;width:100%}
  .players-card{order:1}
  .score-card{order:2}
  .settings-wrap{order:4;width:100%}

  /* Make the cards fill the width on mobile */
  .auth-card,.players-card,.score-card,.settings-card{width:100%}
}

/* Games list styling */
#gamesContainer{display:block}
[data-section]{margin-bottom:14px}
[data-section] > h4{margin:8px 0;color:var(--accent);font-size:1.05rem}
h5{margin:8px 0;color:var(--muted);font-size:0.95rem}
[data-subsection]{padding:6px 0}
[data-game-id]{display:flex;justify-content:space-between;align-items:center;padding:10px;border-radius:8px;background:var(--card);border:1px solid var(--muted-border);margin:6px 0}
[data-game-id] [data-link]{font-weight:600;color:var(--accent);text-decoration:none}
[data-game-id] [data-meta]{color:var(--muted);margin-left:8px;font-size:0.95rem}

@media (min-width:801px){
  .lobby-main{display:grid;grid-template-columns:1fr 340px;gap:18px;align-items:start}
  /* Game info: two-column grid placing players/score left and auth/settings right */
  .container{display:grid;grid-template-columns:1fr 340px;grid-template-rows:auto auto;gap:18px;grid-template-areas:"players auth" "score settings";align-items:start}
  .players-card{grid-area:players}
  .auth-card{grid-area:auth}
  .score-card{grid-area:score}
  .settings-card{grid-area:settings}

  /* Ensure aside stacks child cards with the same gap as the grid columns */
  .lobby-main > aside{display:flex;flex-direction:column;gap:18px}
}

/* TableRenderer styles (theme-aware) */
.tbl{width:100%;border-collapse:collapse;font-size:0.95rem;table-layout:fixed;background:var(--card);border:none;border-radius:0}
.tbl th,.tbl td{padding:8px;border:1px solid var(--muted-border);color:var(--text);background:transparent;text-align:center}
.tbl thead th{font-weight:600;background:linear-gradient(180deg,rgba(0,0,0,0.02),rgba(0,0,0,0.01));color:var(--text)}
.tbl tbody tr{background:transparent}
.tbl .tbl-cell{padding:8px}
.tbl .tbl-number{color:var(--text)}
.tbl .tbl-action-btn{padding:6px 8px;border-radius:6px;border:0;background:var(--accent);color:var(--on-accent);cursor:pointer}
.tbl input, .tbl select, .tbl textarea{background:var(--input-bg);border:1px solid var(--input-border);color:var(--text);padding:6px;border-radius:6px}
.tbl .tbl-dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:8px;vertical-align:middle}
.tbl .tbl-dot-label{vertical-align:middle;color:var(--text)}
.tbl-compact th,.tbl-compact td{padding:6px}
.tbl-scroll-container{background:transparent;border-radius:6px}

/* Info section styling */
.info-section{padding:12px;background:var(--card);border:1px solid var(--muted-border)}
.info-section h2{margin-top:0}
.info-section p{margin:6px 0;color:var(--text)}
.info-section a{color:var(--accent)}

@media (min-width:801px){
  /* On wide screens show the wide variant inside the main column and hide the mobile variant */
  .info-section--wide{display:block}
  .info-section--mobile{display:none}
}

/* small utilities */
.muted{color:var(--muted)}
.pill{display:inline-block;padding:6px 10px;border-radius:999px;background:var(--btn-secondary-bg);color:var(--text);font-size:0.85rem}

/* UI Modals and Toasts */
.ui-overlay{position:fixed;inset:0;background:var(--ui-bg-overlay);display:flex;align-items:center;justify-content:center;z-index:var(--ui-z-modal)}
.ui-modal{background:var(--ui-modal-bg);border-radius:var(--ui-modal-radius);padding:var(--ui-modal-pad);max-width:720px;width:clamp(280px,72%,720px);box-shadow:0 10px 30px rgba(0,0,0,0.2)}
.ui-modal__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.ui-modal__title{font-size:1.1rem;font-weight:700;margin:0}
.ui-modal__body{margin:8px 0;color:var(--muted)}
.ui-modal .ui-input{width:100%;margin-top:8px;padding:8px;border-radius:8px;border:1px solid var(--input-border);background:var(--input-bg);color:var(--text)}
.ui-modal__footer{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.ui-btn{padding:8px 12px;border-radius:8px;border:0;cursor:pointer}
.ui-btn--primary{background:var(--accent);color:var(--on-accent)}
.ui-btn--secondary{background:var(--btn-secondary-bg);color:var(--accent)}
.ui-btn--danger{background:var(--danger);color:var(--on-accent)}
.ui-btn:focus{outline:3px solid rgba(245,158,11,0.18);outline-offset:2px}

/* Toasts */
.ui-toast-container{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:var(--ui-z-toast)}
.ui-toast{min-width:200px;padding:10px 14px;border-radius:10px;color:var(--on-toast);box-shadow:var(--card-shadow);font-weight:600}
.ui-toast--info{background:var(--ui-toast-bg-info)}
.ui-toast--success{background:var(--ui-toast-bg-success)}
.ui-toast--error{background:var(--ui-toast-bg-error)}
.ui-toast[aria-hidden="true"]{opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s}
.ui-toast[aria-hidden="false"]{opacity:1;transform:translateY(0);transition:opacity .2s,transform .2s}

/* Small helper for visually hidden text used in ARIA */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Toggle switch small style (index-only) */
.toggle-switch{display:inline-block;position:relative;width:44px;height:24px}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:var(--btn-secondary-bg);border-radius:999px;transition:.18s}
.toggle-slider:before{content:'';position:absolute;height:18px;width:18px;left:3px;top:3px;background:var(--knob-bg);border-radius:50%;box-shadow:var(--knob-shadow);transition:.18s}
.toggle-switch input:checked + .toggle-slider{background:var(--accent)}
.toggle-switch input:checked + .toggle-slider:before{transform:translateX(20px)}

/* Dark theme variables */
@media (prefers-color-scheme: dark) {
  :root[data-theme='auto'], :root:not([data-theme]){
    --bg:#070603;
    --card:#0f0d08;
    --text:#f8f5e9;
    --muted:#cfc6a3;
    --accent:#f59e0b;
    --danger:#ff6b6b;
    --success:#22c55e;
    --muted-border:#2f2a1f;
    --input-bg:#12100c;
    --input-border:#2b2618;
    --btn-secondary-bg:rgba(245,158,11,0.10);
    --on-accent:#0b0b0b;
    --on-card:#f8f5e9;
    --card-shadow: 0 6px 18px rgba(0,0,0,0.36);
    --knob-bg:#11100d;
    --knob-shadow: 0 2px 6px rgba(0,0,0,0.4);
    --on-toast: #ffffff;
    --selected-peace-bg: #1f5f3d; --selected-peace-color:#fff;
    --selected-war-bg: #6f1616; --selected-war-color:#fff;
    /* conditional history cell colors for auto/dark */
    --cell-war-war-bg:#4f2222; --cell-war-war-color:#ffd6d6;
    --cell-peace-peace-bg:#153a24; --cell-peace-peace-color:#dfffe6;
    --cell-war-peace-bg:#4f3a17; --cell-war-peace-color:#f7e7c2;
    --cell-peace-war-bg:#25325e; --cell-peace-war-color:#d7e3ff;
  }
}

:root[data-theme='dark']{
  --bg:#070603;
  --card:#0f0d08;
  --text:#cfc6a3;
  --muted:#978c5a;
  --accent:#f59e0b;
  --danger:#ff6b6b;
  --success:#22c55e;
  --muted-border:#2f2a1f;
  --input-bg:#12100c;
  --input-border:#2b2618;
  --btn-secondary-bg:rgba(245,158,11,0.10);
  /* table cell conditional colors for dark mode */
  --cell-war-war-bg:#4f2222; --cell-war-war-color:#ffd6d6;
  --cell-peace-peace-bg:#153a24; --cell-peace-peace-color:#dfffe6;
  --cell-war-peace-bg:#4f3a17; --cell-war-peace-color:#f7e7c2;
  --cell-peace-war-bg:#25325e; --cell-peace-war-color:#d7e3ff;
  --on-accent:#0b0b0b;
  --on-card:#f8f5e9;
  --card-shadow: 0 6px 18px rgba(0,0,0,0.36);
  --knob-bg:#11100d;
  --knob-shadow: 0 2px 6px rgba(0,0,0,0.4);
  --on-toast:#ffffff;
  --ui-modal-bg: var(--card);
  --ui-bg-overlay: rgba(0,0,0,0.6);
  --ui-toast-bg-info: var(--accent);
  --ui-toast-bg-success: var(--success);
  --ui-toast-bg-error: var(--danger);
  --selected-peace-bg: #1f5f3d; --selected-peace-color:#fff;
  --selected-war-bg: #6f1616; --selected-war-color:#fff;
  --disabled-bg:#978c5a;
  --disabled-color:#666666;
}
:root[data-theme='light']{ /* explicit light fallback */
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#6b7280;
  --accent:#2563eb;
  --danger:#ef4444;
  --success:#16a34a;
  --muted-border:#eef2ff;
  --input-bg:#ffffff;
  --input-border:#e6eefc;
  --btn-secondary-bg:#e6eefc;
  --on-accent:#ffffff;
  --on-card:#0f172a;
  --card-shadow: 0 6px 18px rgba(15,23,42,0.06);
  --knob-bg:#ffffff;
  --knob-shadow: 0 2px 6px rgba(2,6,23,0.15);
  --on-toast:#ffffff;
  --selected-peace-bg:#2e8b57; --selected-peace-color:#fff;
  --selected-war-bg:#b22222; --selected-war-color:#fff;
  /* table cell defaults for light */
  --cell-war-war-bg:#f37b7b; --cell-war-war-color:#770000;
  --cell-peace-peace-bg:#76e794; --cell-peace-peace-color:#006324;
  --cell-war-peace-bg:#cea438; --cell-war-peace-color:#7a4f00;
  --cell-peace-war-bg:#5978de; --cell-peace-war-color:#00227e;
}
:root{
  /* Chart / visualization tokens */
  --chart-axis:#ccc;
  --chart-muted:#666;
  --chart-label:#999;
  --chart-label-stroke:#ffffff;
  --chart-label-fill:#000000;
  --chart-col-0:#e6194b; --chart-col-1:#3cb44b; --chart-col-2:#4363d8; --chart-col-3:#f58231;
  --chart-col-4:#911eb4; --chart-col-5:#46f0f0; --chart-col-6:#f032e6; --chart-col-7:#bcf60c;
}