/* Home visual language for every game. Presentation only. */
:root{
  --bg:#0b1309;--surface:#172211;--surface-2:#202e18;--line:#ffffff1c;
  --lime:#c2f36b;--blue:#8ecad0;--yellow:#edcb79;--cream:#b8c5ac;
  --white:#e9efdf;--dark:#101a0c;--mode-accent:#c2f36b;
  --game-gradient:linear-gradient(135deg,#1b2615,#121c10);
  font-family:Arial,Helvetica,sans-serif;
}
:root:has(#modeTeamsBtn[aria-selected="true"]){
  --mode-accent:#8ecad0;--surface:#172723;--surface-2:#20342e;
  --game-gradient:linear-gradient(135deg,#172723,#111c18);
}
:root:has(#modeTop10Btn[aria-selected="true"]){
  --mode-accent:#edcb79;--surface:#292719;--surface-2:#35311e;
  --game-gradient:linear-gradient(135deg,#292719,#1b1c12);
}
:root:has(.xi-main){
  --mode-accent:#b7a4ef;--surface:#24232d;--surface-2:#302d3c;
  --game-gradient:linear-gradient(135deg,#24232d,#151b17);
}
body{background:var(--bg);color:var(--white)}
body::before{opacity:1;background:radial-gradient(ellipse at 50% -15%,#a6d6530e,transparent 65%)}
.site-header{width:min(100% - 48px,1032px);padding:24px 0 20px;row-gap:20px;border-color:#2c3926}
.brand{gap:0;font-size:28px;font-weight:900;letter-spacing:-1.5px}
.brand-logo{display:none}.brand b{margin-left:0;color:#c2f36b}
.site-header nav{gap:8px}
.ranking-link{border-color:var(--line);border-radius:20px;color:var(--white);padding-inline:14px;font-size:12px}
.ranking-link:hover{background:var(--surface);border-color:var(--mode-accent)}
.icon-button,.language-menu summary{border-radius:50%;color:var(--cream)}
.mode-switch{padding:5px;gap:4px;max-width:100%;background:#10190e;border-color:#ffffff1c;border-radius:30px;justify-self:center}
.mode-switch .mode-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:9px 18px;border-radius:23px;color:#b8c5ac;font-size:12px;transition:background .18s,color .18s,box-shadow .18s}
.mode-btn::before{content:"";width:5px;height:5px;border-radius:50%;background:#c2f36b;flex-shrink:0}
#modeTeamsBtn::before,.mode-switch a:nth-child(2)::before{background:#8ecad0}
#modeTop10Btn::before,.mode-switch a:nth-child(3)::before{background:#edcb79}
.eleven-mode-link::before,.mode-switch a:nth-child(4)::before{background:#b7a4ef}
.mode-switch .mode-btn.active{background:var(--mode-accent);color:#101a0c;box-shadow:0 2px 10px #0003}
.mode-switch .mode-btn.active::before{background:currentColor}
.mode-switch .mode-btn:hover:not(.active){background:#ffffff09;color:var(--white)}
main,.xi-main{width:min(100% - 40px,600px);margin:26px auto 32px}
.game-home-link{display:inline-flex;align-items:center;min-height:40px;margin:0 0 14px;color:var(--cream);font-size:12px;text-decoration:none;gap:8px}
.game-home-link:hover{color:var(--mode-accent)}
.game-home-link span{color:var(--mode-accent);font-size:18px}
.game,.xi-game{background:var(--game-gradient);border:1px solid #ffffff20;border-radius:20px;box-shadow:0 18px 50px #0003}
.round-bar{min-height:86px;padding:20px;border-color:var(--line)}
.round-kicker{color:var(--mode-accent);font-size:10px;letter-spacing:1.4px;line-height:1.6;max-width:240px;margin-bottom:6px}
.round-bar strong{font:700 27px/1 Arial,sans-serif;letter-spacing:-1px}
.round-date{color:#a3b096;font-size:11px;padding-inline:20px}
.attempt-marker{background:#ffffff03;border-color:#ffffff25;border-radius:7px}
.clues{padding:16px;gap:9px}
.clue{border-color:#ffffff19;border-radius:12px;background:var(--surface);padding:12px;min-height:66px}
.clue-index{background:#ffffff06;border-color:#ffffff1c;border-radius:7px;color:var(--mode-accent);font-family:Arial,sans-serif}
.clue-label{color:#b8c5ac;font-size:11px;line-height:1.5}
.clue-value{font-size:14px;color:var(--white)}
.clue.latest{border-color:color-mix(in srgb,var(--mode-accent) 55%,transparent);background:var(--surface-2);box-shadow:inset 3px 0 var(--mode-accent)}
.clue.locked{background:#00000008;border-color:#ffffff16;opacity:.7}
.position-value strong{border-color:#c2f36b40;background:#c2f36b0d;border-radius:7px}
.season,.continent-badge{border-radius:7px;background:#ffffff05;border-color:#ffffff20}
.play-area{padding:8px 16px 2px}
input,.slot-input,textarea{background:#0b140d;border-color:#ffffff28;border-radius:10px;color:var(--white)}
input::placeholder,.slot-input::placeholder{color:#95a38b}
input:focus,.slot-input:focus{background:#0e1910;border-color:var(--mode-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--mode-accent) 12%,transparent)}
.primary{background:var(--mode-accent);border-color:var(--mode-accent);color:#111a0d;border-radius:10px}
.primary:hover:not(:disabled){background:color-mix(in srgb,var(--mode-accent) 85%,white);border-color:var(--mode-accent);box-shadow:0 4px 18px color-mix(in srgb,var(--mode-accent) 12%,transparent)}
.feedback{padding-inline:18px}.skip-button{color:#b8c5ac;min-height:44px}
#suggestions,.slot-suggestions,#xiOptions,.language-options{background:#1b291b;color:var(--white);border:1px solid #526445;border-radius:12px;box-shadow:0 16px 40px #0008}
#suggestions li,.slot-suggestions li,#xiOptions li,.language-options button{border-radius:7px;color:var(--white)}
#suggestions li:hover,#suggestions li[aria-selected="true"],.slot-suggestions li:hover,.slot-suggestions li[aria-selected="true"],#xiOptions li:hover,#xiOptions li[aria-selected="true"],.language-options button:hover,.language-options button[aria-checked="true"]{background:#34462b;color:#f3f8ed}
.suggestion-sub,#suggestions .empty,.slot-suggestions .empty{color:#adbea0}
.top10-header{padding:16px 18px 12px;gap:14px}
.top10-title{line-height:1.6;font-size:14px}
.top10-progress{background:#edcb790c;border-color:#edcb7933;color:var(--mode-accent);white-space:nowrap;padding:6px 10px}
.clue.top10-slot{border-radius:12px;min-height:58px;padding:8px 10px}
.clue.top10-slot.active-slot{background:#35311e;border-color:var(--mode-accent);box-shadow:inset 3px 0 var(--mode-accent)}
.clue.top10-slot.correct{background:#23371b;border-color:#c2f36b55}
.clue.top10-slot.missed{background:#30271b;border-color:#edcb7944}
.slot-metric{color:var(--yellow);background:#edcb790c;border-radius:6px}
.result,.xi-result{background:linear-gradient(135deg,#23341c,#172211);border-color:#c2f36b55;border-radius:14px}
.result{padding:26px 20px;margin:10px 16px 18px}
.result.lost{background:#1c241a;border-color:#ffffff24}
.result h2{font-family:Arial,sans-serif;font-size:28px;letter-spacing:-.8px}
.history-area{padding:16px;border-color:var(--line)}
.history-area li{border-radius:8px;padding:9px 10px}
.about-game,.xi-about{background:#111b0e;border:1px solid #ffffff17;border-radius:16px;padding:20px;color:var(--cream)}
#game + .about-game,.xi-next{margin-top:28px}
.recent-card{background:linear-gradient(135deg,#172211,#111a0e);border-radius:16px;border-color:#ffffff1c;padding:20px;box-shadow:none}
.recent-badge,.recent-chip,.recent-card-tag{border-radius:6px}
.recent-chip{background:#0e180b}.recent-archive-link{background:#c2f36b08;border-color:#c2f36b33;border-radius:12px;color:#c2f36b}
.recent-archive-link:hover{background:#c2f36b12}
.site-footer{width:min(100% - 48px,1032px);margin:36px auto 20px;padding:20px 0;border-color:#2c3926;gap:8px 20px}
.site-footer a{color:#adbea0}.site-footer a:hover{color:#c2f36b}
dialog{background:linear-gradient(135deg,#1b2615,#121c10);border:1px solid #ffffff26;border-radius:20px;box-shadow:0 24px 80px #0009}
dialog::backdrop{background:#050b05c9;backdrop-filter:blur(5px)}
.xi-intro{margin-bottom:22px}.xi-kicker,.xi-intro h1 span{color:var(--mode-accent)}
.xi-edition{border-radius:20px;background:#ffffff03;padding:8px 10px}
.xi-match{background:#ffffff03;padding:22px 20px;border-bottom:1px solid var(--line)}
.xi-match p,.xi-score strong{color:var(--mode-accent)}
.xi-match #xiYear{border-radius:6px}
.xi-pitch-wrap{background:#101a13}
.xi-pitch{background:repeating-linear-gradient(0deg,#1d3424 0%,#1d3424 10%,#233c2a 10%,#233c2a 20%);border-color:#ffffff20;border-radius:12px}
.xi-player.is-hidden .xi-shirt{background:linear-gradient(135deg,#d6c7ff,#b7a4ef);color:#2a203c}
.xi-player.is-hidden .xi-shorts{background:#b7a4ef}
.xi-player.is-selected .xi-shirt{filter:drop-shadow(0 0 8px #b7a4ef66)}
.xi-player-name{background:#101b13d9;border-radius:5px}
.xi-player{top:clamp(64px,var(--y),calc(100% - 64px))}
.xi-player.is-selected{filter:drop-shadow(0 0 7px #b7a4ef66)}
.is-hidden .xi-player-name{color:#d6c7ff;border-color:#b7a4ef55}
.is-selected .xi-player-name{background:#b7a4ef;color:#2a203c}
.xi-country{background:#15241ae8}
.xi-hints button{background:#24232d;border-color:#ffffff20;border-radius:12px}
.xi-hints button:hover:not(:disabled){background:#302d3c;border-color:#b7a4ef80}
.xi-result{border-radius:0 0 20px 20px}
.xi-result textarea{background:#0b140d;border-radius:10px}
.xi-next{padding:22px;border:1px solid #ffffff17;border-radius:16px;background:#111b0e}
.xi-next strong{color:var(--mode-accent)}
button:focus-visible,input:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid var(--mode-accent);outline-offset:4px}
@media(max-width:640px){
  .site-header{width:calc(100% - 32px);padding:20px 0 16px;row-gap:16px;column-gap:8px}
  .brand{font-size:25px}.site-header nav{gap:3px}
  .ranking-link{min-height:36px;padding-inline:10px;font-size:11px}
  .icon-button,.language-menu summary{width:34px;height:36px}
  .mode-switch{width:100%;display:flex;gap:3px;padding:4px;flex-wrap:nowrap}
  .mode-switch .mode-btn{flex:1;padding:8px 6px;gap:5px;font-size:11px;min-height:40px}
  main,.xi-main{width:calc(100% - 24px);margin-top:18px}
  .game,.xi-game{border-radius:18px}
  .round-bar{padding:16px;min-height:82px;gap:10px}
  .round-kicker{font-size:9px;max-width:170px;letter-spacing:1px}
  .round-date{padding-inline:16px}.clues{padding:10px;gap:7px}
  .clue{padding:10px 8px;border-radius:10px}
  .clue-value{font-size:12px}.clue-label{font-size:10px}
  .play-area{padding-inline:10px}.result{margin-inline:10px}
  .top10-header{padding:12px}.clue.top10-slot{padding:7px 8px}
  .site-footer{width:calc(100% - 32px);gap:4px 16px}
}
@media(max-width:360px){
  .brand{font-size:23px}.site-header nav{gap:0}.ranking-link{padding-inline:8px}
  .icon-button,.language-menu summary{width:31px}
  .mode-switch .mode-btn{font-size:10px;gap:4px;padding-inline:4px}
  .xi-hints,.xi-search{padding-inline:12px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}