/* A sports clubhouse: warm canvas, strong colours, kinetic game symbols. */
:root {
  color-scheme: light;
  --bg-deep: #eeece4; --bg-card: #faf8f0; --bg-card2: #e4e5da;
  --text: #202c30; --text-muted: #566166; --text-dim: #6b777c;
  --border: #d5d9c9; --border-glow: #9bb7a4;
  --red: #a4442d; --red-bright: #b74c30; --accent: #a4442d;
  --gold: #426b51; --gold-bright: #31583e;
  --blue: #236a95; --blue-bright: #185577;
  --p1-color: #236a95; --p2-color: #ae422f;
  --radius: 12px; --radius-lg: 18px;
  --shadow: 0 8px 24px #263d350d;
}
body { background: var(--bg-deep); }
.site-header { background: var(--bg-deep); padding: 20px max(24px,calc((100vw - 1152px)/2)); border-bottom: 1px solid #263d3514; }
.logo-area { gap: 11px; }
.brand-grid { background: #141514; padding: 8px; margin: 0 2px; border-radius: 4px; grid-template-columns: repeat(3,5px); gap: 2px; }
.brand-grid i { height: 5px; background: #f1efe5; }
.brand-grid i:nth-child(1),.brand-grid i:nth-child(5),.brand-grid i:nth-child(9) { background: #ed462f; }
.logo-title { font-size: 1.8rem; }
.logo-subtitle { color: var(--text-muted); }
.btn-icon { color: var(--text); border-radius: 7px; }
.btn-icon:hover, #report-btn:hover { background: #e9e9db; color: var(--text); }
#lang-toggle { border-color: #c4ccbb; }
#main-menu.active { max-width: 1200px; padding: 0 24px; margin: 0 auto; }
.arena-hero { display: flex; flex-direction: column; gap: 0; padding: 38px 0 28px; text-align: center; }
.eyebrow { justify-content: center; font-size: .61rem; letter-spacing: 1.65px; color: var(--text-muted); }
.status-dot { background: #6e9c6d; box-shadow: 0 0 0 4px #6e9c6d14; }
#arena-title { font-family: 'Bebas Neue',Impact,sans-serif; font-size: clamp(2.7rem,4.9vw,4rem); font-weight: 400; letter-spacing: -.5px; line-height: 1; margin: 14px 0 12px; text-transform: uppercase; }
#arena-title > span { display: inline; }
#arena-title > .title-accent { color: #b54722; }
.hero-description { max-width: none; font-size: .88rem; line-height: 1.6; color: var(--text-muted); }
.mode-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 15px; }
.mode-heading h2 { font: 600 .84rem 'Inter',sans-serif; letter-spacing: -.2px; }
.mode-heading > span { color: var(--text-muted); font-size: .7rem; }
.mode-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; width: 100%; max-width: none; }
.mode-card { --card-color: #ed8954; --card-ink: #202c30; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 22px 24px 20px; min-height: 334px; background: var(--card-color); border: 1px solid #263d3540; border-radius: 3px; color: var(--card-ink); text-align: left; overflow: hidden; box-shadow: none; transition: transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,border-color .3s ease; }
#btn-mode-online { background: var(--card-color); border-color: #263d3529; }
#btn-mode-local { --card-color: #226b60; --card-ink: #f7f2e4; }
#btn-mode-ai { --card-color: #3b4b78; --card-ink: #f7f2e4; }
.mode-card:hover, #btn-mode-online:hover { background: var(--card-color); border-color: var(--card-ink); transform: translateY(-7px); box-shadow: 5px 7px 0 #202c3022; }
.mode-card:focus-visible { outline: 3px solid #31583e; outline-offset: 5px; }
.mode-card { font-family: 'Inter',sans-serif; }
.card-topline { display: flex; align-items: center; justify-content: space-between; }
.mode-tag { background: transparent; border: 1px solid currentColor; border-radius: 2px; padding: 6px 9px; font-size: .6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.card-number { font: 1.8rem/1 'Bebas Neue',Impact,sans-serif; color: var(--card-ink); opacity: .55; }
.mode-illustration { height: 136px; margin: 4px 0 8px; display: flex; justify-content: center; align-items: center; }
.mode-illustration svg { width: 248px; max-width: 100%; height: 136px; overflow: visible; transition: transform .35s ease; }
.mode-card:is(:hover,:focus-visible) .mode-illustration svg { transform: translateY(-3px) rotate(-3deg); }
.mode-card:is(:hover,:focus-visible) .cpu-scan { animation-duration: 1.5s; }
.mode-card:is(:hover,:focus-visible) .grid-victory { animation-duration: 2.5s; }
.mode-card-text { flex: 1; }
.mode-card-text h3, #btn-mode-online h3 { font: 400 clamp(1.9rem,2.8vw,2.45rem)/1 'Bebas Neue',Impact,sans-serif; color: var(--card-ink); margin: 0 0 9px; letter-spacing: .2px; text-transform: uppercase; }
.mode-card-text p, #btn-mode-online p { font-size: .78rem; line-height: 1.6; color: var(--card-ink); max-width: 260px; }
.mode-card-cta { position: relative; display: flex; justify-content: space-between; align-items: center; margin-top: 23px; padding-top: 15px; border-top: 1px solid #ffffff55; color: var(--card-ink); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .65px; }
.mode-card-cta::before { content:''; position:absolute; top:-1px; left:0; width:100%; height:2px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .4s ease; }
.mode-card:is(:hover,:focus-visible) .mode-card-cta::before { transform:scaleX(1); }
.mode-card-arrow, #btn-mode-online .mode-card-arrow { font-size: 1.35rem; color: var(--card-ink); margin-left: 10px; }
.hero-rules { display: flex; align-items: center; justify-content: center; gap: 24px; max-width: none; margin: 32px 0 0; padding: 16px; border: 1px solid #263d3520; border-radius: 2px; background: transparent; }
.hero-rules > span { display: flex; flex-direction: row; align-items: center; gap: 8px; color: #455a4c; font-size: .68rem; }
.hero-rules b { display: flex; align-items: center; justify-content: center; width: 23px; height: 23px; border: 1px solid #8299815c; border-radius: 50%; color: #3f6044; font-size: .6rem; }
.hero-rules > .rule-divider { color: #899680; }
.dev-disclaimer-box { margin: 18px auto 0; max-width: 850px; text-align: center; }
.dev-disclaimer-box p { font-size: .62rem; line-height: 1.7; color: #667465; }
.dev-disclaimer-box strong { color: #455a4c; }
.arena-footer { margin-top: 26px; padding: 17px 0; color: #5b6c60; border-color: #cfd4c4; font-size: .53rem; }
.privacy-footer { margin-top: 0; padding: 16px 24px 22px; }
.privacy-footer a { font-size: .66rem; }
.hero-copy, .mode-cards { animation: editorial-enter .55s ease; }
.connection-path { animation: connect-players 6s linear infinite; }
.duel-ring { transform-box: fill-box; transform-origin: center; animation: duel-signal 4.5s ease-in-out infinite; }
.duel-ring.second { animation-delay: .3s; }
.grid-victory { stroke-dasharray: 160; stroke-dashoffset: 0; animation: grid-victory 5.5s ease-in-out infinite; }
.cpu-scan { animation: cpu-scan 4.5s ease-in-out infinite; }
.cpu-pixel { animation: cpu-think 3s steps(1,end) infinite; }
.cpu-pixel:nth-child(2n) { animation-delay: .7s; }
.mode-card { animation: mode-arrive .65s cubic-bezier(.2,.8,.2,1) backwards; }
.mode-card:nth-child(2) { animation-delay: .08s; }.mode-card:nth-child(3) { animation-delay: .16s; }
@keyframes mode-arrive { from { transform:translateY(20px) rotate(.7deg); } to { transform:translateY(0) rotate(0); } }
@keyframes duel-signal { 0%,65%,100% { transform:scale(1); } 30% { transform:scale(1.075); } }
@keyframes grid-victory { 0%,15%,100% { stroke-dashoffset:160; } 40%,80% { stroke-dashoffset:0; } }
@keyframes cpu-scan { 0%,100% { transform:translateY(0); } 50% { transform:translateY(62px); } }
@keyframes cpu-think { 0%,70%,100% { opacity:1; } 35% { opacity:.25; } }
@keyframes connect-players { to { stroke-dashoffset: -48; } }
@keyframes friendly-spark { 0%,100% { transform: scale(.85); } 50% { transform: scale(1.12); } }
/* Carry the warm palette into settings, the lobby and the board. */
.online-panel, .modal-box, .player-panel { background: var(--bg-card); border-radius: 14px; box-shadow: var(--shadow); }
.modal-overlay { background: #172b25a6; }
.modal-box { border: 1px solid var(--border); border-top: 3px solid #73956b; }
.modal-title, .rules-box h2, #result-title { color: var(--text); }
.settings-select, .settings-select option, .modal-input, .code-input { background: var(--bg-deep); color: var(--text); border-color: #9aa98f; border-radius: 8px; }
.btn-primary, #btn-confirm, #btn-settings-start { background: #31583e; color: #fffdf6; border-radius: 8px; }
.btn-primary:hover, #btn-confirm:hover, #btn-settings-start:hover { background: #254b32; }
.btn-secondary, .back-btn, .game-controls button, .modal-actions button { border-radius: 8px; }
.grid-wrapper { background: #e9edde; border-color: #9eae90; border-radius: 14px; box-shadow: none; }
.header-cell { background: #f7f7ed; border-color: #bdcbb0; border-radius: 8px; }
.cat-label { color: #485b49; }
.grid-cell { background: #fffcf5; border-color: #adbea0; border-radius: 8px; }
.grid-cell:hover:not(.filled) { background: #dae6ce; border-color: #52763e; }
.grid-cell:hover:not(.filled)::before { color: #31583e; }
.grid-cell.player1 { background: #dcecf3; }.grid-cell.player2 { background: #f6ddd2; }
.grid-cell.player1 .cell-fighter { color: #185577; }.grid-cell.player2 .cell-fighter { color: #973e29; }
.score-badge { background: #f3f1e5; }
.toast { background: #263d35; color: #fffdf6; }
@media (max-width: 850px) and (min-width: 651px) {
  .mode-cards { gap: 12px; }.mode-card { padding: 18px 16px; }
  .mode-card-text h3, #btn-mode-online h3 { font-size: 1.8rem; }.mode-card-text p { font-size: .73rem; }
  .hero-rules { gap: 12px; }
}
@media (max-width: 650px) {
  .site-header { padding: 15px 18px; gap: 8px; }.logo-area { gap: 8px; }.logo-title { font-size: 1.35rem; white-space: nowrap; }
  .logo-subtitle { font-size: .45rem; }.btn-icon { font-size: .59rem; padding: 7px 5px; } #lang-toggle { min-width: 32px; }
  .brand-grid { grid-template-columns: repeat(3,4px); padding: 6px; gap: 2px; }.brand-grid i { height: 4px; }
  #main-menu.active { padding: 0 18px; }
  .arena-hero { padding: 28px 0 24px; }
  #arena-title { font-size: clamp(1.85rem,7vw,2.4rem); letter-spacing: -1.2px; margin: 12px 0 10px; }
  .hero-description { max-width: 310px; font-size: .77rem; }
  .eyebrow { font-size: .5rem; letter-spacing: 1.1px; }
  .mode-heading { margin-bottom: 12px; }.mode-heading h2 { font-size: .78rem; }.mode-heading > span { display: none; }
  .mode-cards { grid-template-columns: 1fr; gap: 12px; }
  .mode-card { display: grid; grid-template-columns: 1fr 100px; grid-template-rows: auto 1fr auto; padding: 17px 19px; min-height: 175px; column-gap: 8px; border-radius: 3px; }
  .card-topline { grid-column: 1 / -1; }.mode-tag { padding: 4px 9px; font-size: .59rem; }
  .mode-illustration { grid-column: 2; grid-row: 2; height: 80px; margin: 0 -7px 0 0; }.mode-illustration svg { width: 120px; height: 80px; }
  .mode-card-text { grid-column: 1; grid-row: 2; align-self: center; padding-top: 7px; }
  .mode-card-text h3, #btn-mode-online h3 { font-size: 1.65rem; line-height: 1.05; margin-bottom: 6px; letter-spacing: 0; }
  .mode-card-text p, #btn-mode-online p { font-size: .7rem; }
  .mode-card-cta { grid-column: 1 / -1; margin-top: 9px; padding-top: 10px; font-size: .67rem; }
  .hero-rules { justify-content: flex-start; flex-wrap: wrap; gap: 12px; padding: 15px; margin-top: 22px; }
  .hero-rules > span { font-size: .65rem; }.hero-rules > .rule-divider { display: none; }
  .dev-disclaimer-box { text-align: left; }.dev-disclaimer-box p { font-size: .6rem; }
  .arena-footer { margin-top: 20px; }.privacy-footer nav { gap: 12px; }
}
@media (max-width: 380px) {
  .site-header { padding: 13px 12px; }.logo-title { font-size: 1.35rem; }.logo-area { gap: 6px; }
  .btn-icon { padding: 7px 5px; font-size: .59rem; }
  .mode-card { padding: 15px; grid-template-columns: 1fr 78px; }.mode-card-text h3, #btn-mode-online h3 { font-size: 1.5rem; }
}
/* The menu and game share the same midnight canvas. */
body:has(#main-menu.active, #game-screen.active) { background: #14232b; }
body:has(#main-menu.active, #game-screen.active) .site-header { background: #14232b; border-bottom-color: #ffffff1c; }
body:has(#main-menu.active, #game-screen.active) .logo-title { color: #f3efe4; }
body:has(#main-menu.active, #game-screen.active) :is(.logo-subtitle,.btn-icon,#report-btn) { color: #b8c7ca; }
body:has(#main-menu.active, #game-screen.active) :is(.btn-icon:hover,#report-btn:hover) { background: #283b43; color: #fff9ee; }
body:has(#main-menu.active, #game-screen.active) #lang-toggle { border-color: #52626a; }
#main-menu.active { color: #f3efe4; }
#main-menu .eyebrow, #main-menu .hero-description, #main-menu .mode-heading > span { color: #b8c7ca; }
#main-menu #arena-title > .title-accent { color: #f49761; }
#main-menu .status-dot { background: #f49761; box-shadow: 0 0 0 4px #f497611a; }
#main-menu .hero-rules { background: #1a2d35; border-color: #ffffff24; }
#main-menu .hero-rules > span { color: #c2d0cf; }
#main-menu .hero-rules b { color: #f0b187; border-color: #8fada65c; }
#main-menu .hero-rules > .rule-divider { color: #91a7aa; }
#main-menu .dev-disclaimer-box p { color: #a5b6ba; }
#main-menu .arena-footer { color: #a5b6ba; border-color: #ffffff24; }
body:has(#main-menu.active, #game-screen.active) .privacy-footer { border-color: #ffffff1c; }
body:has(#main-menu.active, #game-screen.active) .privacy-footer a { color: #bdccc9; }
#game-screen .score-vs, #game-screen .timer-value { color: #f3efe4; }
#game-screen .timer-limit-label, #game-screen .round-label { color: #b8c7ca; border-color: #52626a; }
#game-screen .timer-track { stroke: #435760; }
#game-screen .timer-warning .timer-value { color: #f4bc75; }
#game-screen .timer-warning .timer-progress { stroke: #f4bc75; }
#game-screen .timer-urgent .timer-value { color: #ff806e; }
#game-screen .timer-urgent .timer-progress { stroke: #ff806e; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}