/* Rival64 • midnight arena / electric teal / championship gold.
   Loaded last. Gameplay dimensions and owner colours remain authoritative. */
:root {
  --bg:#070e19;
  --surface:#111e30;
  --surface-2:#17283d;
  --panel:#192c40;
  --line:#354c62;
  --text:#f3f8fc;
  --muted:#b9c8d8;
  --soft:#91a8be;
  --mint:#65edcf;
  --blue:#94c3ff;
  --gold:#f4ce7a;
  --red:#ff9bb0;
  --radius:18px;
}
body {
  background:radial-gradient(ellipse 85% 40% at 80% -8%,#123c42 0,transparent 75%),#070e19;
  color:var(--text);
}
main {max-width:1280px;}
a {color:#a9eadd;}
button,input,select,summary {touch-action:manipulation;}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,summary:focus-visible {
  outline:3px solid #65edcf;outline-offset:3px;
}
.topbar {border-bottom-color:#2c45595c;padding-block:16px;}
.brand {gap:10px;flex-shrink:0;}
.brand .mark {
  width:44px;height:44px;flex-shrink:0;transform:none;
  background:#102c34;border:1px solid #315c61;border-radius:13px;box-shadow:none;
}
.brand .mark img {width:36px;height:36px;display:block;}
.brand strong {
  font-family:'Outfit',Arial,sans-serif;font-weight:900;font-size:26px;
  line-height:1;letter-spacing:-.9px;direction:ltr;text-align:start;
}
.brand-number {color:var(--mint);}
.brand small {display:block;letter-spacing:0;font-size:11px;font-weight:600;color:#b9c8d8;margin-top:5px;}
.account-brand {display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:16px;}
.account-brand img {width:36px;height:36px;flex-shrink:0;}
.account-brand strong {font:900 26px/1 'Outfit',Arial,sans-serif;letter-spacing:-1px;direction:ltr;display:block;}
.account-brand small {display:block;color:#b9c8d8;font-size:12px;margin-top:5px;}
.top-actions button.ghost,.home-link,#utilityMenu>summary {
  background:#102033;border-color:#354c62;color:#dbe8f4;border-radius:12px;box-shadow:none;
}
.top-actions button.ghost:hover:not(:disabled),#utilityMenu>summary:hover {background:#193349;border-color:#6b9eab;}
#utilityMenu .utility-menu-panel {background:#102033;border-color:#3f6074;box-shadow:0 20px 60px #0009;}
.hero {position:relative;padding-block:30px 24px;}
.hero h1 {font-size:clamp(30px,4vw,48px);line-height:1.2;letter-spacing:-1px;margin:0 0 10px;}
.hero h1 em {color:#65edcf;}
.hero p {color:#b9c8d8;font-size:16px;max-width:620px;}
.card {
  background:linear-gradient(145deg,#132438,#101c2e);
  border-color:#354c62;border-radius:20px;box-shadow:0 12px 30px #0002;
}
.card h2,.card h3 {letter-spacing:-.3px;}
.eyebrow {color:#82c9c0;}
.ribbon,.pill {border-color:#3d746e;color:#b4fae9;background:#143b3d;letter-spacing:0;}
button.primary,button.mint,.mode-cta {
  border-color:#65edcf;background:#65edcf;color:#062b28;
  box-shadow:0 6px 20px #2cc6ae14;font-weight:850;
}
button.ghost {background:#192c42;border-color:#3c566e;color:#e3edf7;}
button:hover:not(:disabled) {filter:brightness(1.06);}
button:disabled {cursor:not-allowed;}
.input {
  background:#0b1726;border-color:#4b647b;color:#f5f9ff;border-radius:12px;
  box-shadow:inset 0 1px 2px #0002;
}
.input::placeholder {color:#99aec0;opacity:1;}
.input:hover {border-color:#7895a8;}
.input:focus {border-color:#65edcf;}
#entry>.card {border-color:#416375;}
#entry>.card>h2 {letter-spacing:-.6px;}
#entry>.card>.muted {max-width:64ch;}
.mode-card,.mode-card:first-child {
  background:#142c3e;border-color:#3f6376;box-shadow:none;color:#f0f8fc;
  transition:border-color .15s ease,background .15s ease;
}
.mode-card:hover,.mode-card:first-child:hover {transform:none;background:#19394a;border-color:#65edcf;}
#queue.mode-card {
  background:linear-gradient(115deg,#174942,#12323c);border-color:#54bbad;
  box-shadow:inset 0 1px #b9fff01a;
}
#queue.mode-card:hover {background:linear-gradient(115deg,#1c5950,#173e46);border-color:#82fbe0;}
.mode-card small {color:#c2d6df;}
.mode-card .mode-arrow {color:#65edcf;}
.mode-icon {display:grid;place-items:center;width:48px;height:48px;flex-shrink:0;border-radius:14px;background:#0a253258;font-size:28px;}
.quiet-options {background:#0e1b2c;border-color:#334c63;border-radius:13px;}
.quiet-options summary {color:#d8e7f1;gap:8px;}
.quiet-options summary::after {content:'+';margin-inline-start:auto;color:#97b6c4;font:500 23px 'Outfit',Arial,sans-serif;}
.quiet-options[open]>summary::after {content:'−';}
.join-box {background:#0d1b2a;border-color:#344e65;}
.info-step {color:#c5d4df;gap:14px;}
.info-step b {border-radius:9px;background:#193e43;border:1px solid #44776f;color:#98f5db;}
#entry aside>.card {background:#101d2e!important;border-color:#30485e;box-shadow:none;}
#entry aside>.card:first-child {border-top:2px solid #4fb9a8;}
#entry aside>.card:last-child .ribbon {background:#152b3c;color:#c3d6e8;border-color:#3c556b;}
.practice-button {background:transparent!important;border-color:#425e71!important;color:#d7e6ee!important;}
.room-code {color:#8af4dd;letter-spacing:5px;}
.member {background:#0e1d2f;border-color:#324b62;border-radius:14px;}
.member .avatar {background:#1e3c4b;color:#dcfff5;border:1px solid #3e6473;}
.member .readyMark {background:#124539;color:#b2ffe6;border-color:#408b71;}
.timerText {background:#132c3c;border-color:#3d6376;color:#d2edf5;font-variant-numeric:tabular-nums;}
.progress-rail {background:#21364b;height:6px;}
.progress-rail i {background:#65edcf;}
#lobbyReady {border-color:#65edcf;background:#65edcf;color:#062b28;}
#lobbyReady.mint {background:#133e38;color:#b6ffe9;border-color:#4a9e88;}
.score-stat {background:#101e30;border-color:#30495f;border-radius:14px;}
.score-stat strong {color:#dbf8f0;}
.score-stat small {color:#afc3d3;}
.board-shell {background:#101d2e;border-color:#3b586f;box-shadow:none;}
.board-shell::before {background:none;}
.board-frame {background:#070f1c;border-color:#2a465b;}
.section-head h2 {font-weight:850;}
.section-head p,.board-legend {color:#b8cbd9;}
/* Only the neutral board is themed; inline owner backgrounds and outlines stay intact. */
.tile:not(.owner-colored):not(.mine) {background:linear-gradient(145deg,#263e54,#13283a);}
.tile.target {border-color:#88f9df;}
.targets button {background:#142a3f;border-color:#3b5970;border-radius:14px;}
.targets button:hover {background:#1a3a48;border-color:#65edcf;}
.target-emoji {background:#213e51;border-radius:12px;}
.target-info small {color:#b8ccda;}
.target-arrow {color:#83f2d7;}
.action-title .symbol {background:#163e3c;border-color:#427f72;color:#a5ffe7;}
.battle-mini,.player-chip {border-color:#385269;}
.duel {background:#101e30;border-color:#4c9b91;box-shadow:0 16px 48px #0004;}
.duel .duel-kicker {color:#9ccfc9;}
.clock-box {background:#0a1828;border-color:#405c72;box-shadow:none;}
.clock-box strong {color:#d9f8ef;}
.clock-box.active {background:#123b38;border-color:#65edcf;box-shadow:inset 0 2px #65edcf;}
.clock-box.active strong {color:#a8ffe7;}
.clock-vs {color:#89a8bd;}
.turn-banner {background:#123e36;border-color:#4e9c83;color:#bbffe4;}
.answers button {background:#1b334a;border-color:#526c83;color:#f3f8fc;}
.answers button:not(:disabled):hover {background:#24495a;border-color:#65edcf;}
#duel[data-turn="opponent"] #phase {background:#43321e;border-color:#e7b96d;color:#ffebc9;}
#duel[data-turn="opponent"] .clock-box.active {background:#392b1d;border-color:#e7b96d;box-shadow:inset 0 2px #e7b96d;}
#duel[data-turn="opponent"] .clock-box.active strong {color:#ffdf9c;}
#duel[data-turn="opponent"] .answers button:disabled {background:#1b293b;color:#e6edf4;border-color:#796c55;}
.preview {background:#123337;border-color:#4d9f8d;}
.preview-stat {background:#0d2632;border-color:#426f73;}
.preview h2,.winner {color:#b0ffe4;}
.watcher {border-color:#608da8;}
.watch-top>strong {color:#b1d9f3;}
.watch-options>div {background:#142b40;border-color:#49657c;}
.mobile-nav {background:#0c1b2bf5;border-top-color:#385268;}
.mobile-nav button {background:#172d42;border-color:#3b576e;color:#d2e4f1;}
.mobile-nav button[aria-pressed="true"] {background:#65edcf;border-color:#65edcf;color:#062b28;}
.shop-panel,.account-panel,.growth-panel {background:#111f31;border-color:#3f5b72;}
#statsDialog,#nameDialog,#leaveAccountDialog {background:#111f31!important;border-color:#4a677d!important;color:#f3f8fc!important;}
dialog::backdrop {background:#020711cc;backdrop-filter:blur(5px);}
.stat-grid>div {background:#142c3d;border-color:#3c586d;}
.stat-grid strong {color:#8bf5da;}
.stat-grid span {color:#c1d1de;}
.stats-panel nav button[aria-pressed=true] {border-color:#65edcf;color:#a7ffe7;}
.standings-scroll th {color:#bce6df;background:#10263a;}
.standings-scroll th,.standings-scroll td,.recent-duels p {border-bottom-color:#314c62;}
.presence-user {border-bottom-color:#324b61;}
#battleIntro {background:radial-gradient(ellipse at 50% 0,#16494af5,#0b1728fa 75%);}
#battleIntro small,.versus-mark {color:#65edcf;}
#battleIntro.final-intro {background:radial-gradient(ellipse at 50% 35%,#4b3d23fa,#0b1728fa 75%);}
#finalArenaBadge {background:#302a1e;border-color:#a48748;color:#ffe4ac;}
body.final-arena #duel {border-color:#c9a15a;box-shadow:inset 0 3px #e9c679;}
.victory-pot {background:radial-gradient(ellipse at 50% 30%,#344030,#0a1526 70%);}
.victory-content h2 {color:#f8f5e8;}
.victory-content .reward {color:#f4ce7a;}
@media(min-width:981px) {
  #entry {grid-template-columns:minmax(0,1.4fr) minmax(280px,.8fr);gap:24px;}
  #entry>.card {padding:28px;}
  #entry aside>.card {padding:24px;}
  #entry .info-list {gap:22px;margin-block:22px 8px;}
}
@media(max-width:700px) {
  main {padding-inline:14px;}
  body .topbar,body.playing .topbar {gap:8px;padding-block:11px;}
  .brand {gap:8px;}
  .brand .mark {width:36px;height:36px;border-radius:11px;}
  .brand .mark img {width:30px;height:30px;}
  .brand strong {font-size:18px!important;}
  .brand small {display:none;}
  .hero {padding-block:20px 16px;}
  .hero h1 {font-size:29px;line-height:1.2;margin-bottom:7px;}
  .hero p {font-size:14px;line-height:1.6;}
  .card {border-radius:17px;}
  #entry>.card {padding:18px;}
  #entry .entry-primary .mode-card {min-height:86px;gap:12px;}
  .mode-icon {width:42px;height:42px;font-size:25px;border-radius:12px;}
  .quiet-options summary {min-height:50px;}
  #lobby {padding:18px;}
  body.in-duel #game #duel,body.duel-result #game #duel,body.watching #watcher {background:#0e1c2d;}
  /* The existing fixed battle geometry keeps the clock, answers and controls stable. */
}
@media(max-width:370px) {
  main {padding-inline:10px;}
  .brand strong {font-size:18px!important;}
  #entry>.card {padding:15px;}
  .hero h1 {font-size:27px;}
}
@media(prefers-reduced-motion:reduce) {
  .mode-card,.tile,.card,button {transition:none;}
}

/* Verified at 320px: one compact header and no duplicate entry pitch. */
@media(max-width:700px){
 body .topbar .top-actions{gap:4px;}
 body .topbar #presenceOpen{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:48px;padding:8px 6px;font-variant-numeric:tabular-nums;}
 .topbar #presenceOpen .presence-label{display:none;}
 #entry>.card>h2,#entry>.card>.muted{display:none;}
 .hero{padding-block:16px 12px;}
}
@media(max-width:370px){
 .topbar .rankings-label{display:none;}
 body .topbar #rankingsOpen{min-width:44px;padding:8px;}
 body .topbar #inviteTop{padding:8px;}
}

.install-entry{display:block;margin:10px auto 0;background:transparent;border:0;border-radius:10px;color:#b0e9dd;font-size:13px;min-height:44px;padding:8px 12px;text-decoration:underline;text-underline-offset:4px;}
.install-entry[hidden]{display:none;}
#installDialog{width:min(440px,calc(100% - 24px));max-height:90dvh;overflow:auto;margin:auto;padding:22px;border:1px solid #4a677d;border-radius:20px;background:#111f31;color:#f3f8fc;}
.install-panel ol{padding-inline-start:24px;line-height:1.7;}
.install-panel li{margin-block:10px;}
.install-panel .primary{width:100%;}