.classic-hero {display:none; }
body {background:#080f1b; isolation:isolate; }
body:before {content:''; position:fixed; inset:0; z-index:-2; background:url('assets/bleach-cast-background.png') center bottom/cover no-repeat; pointer-events:none; }
body:after {content:''; position:fixed; inset:0; z-index:-1; background:linear-gradient(180deg,#0713239c 0%,#07132383 42%,#080f1bb0 100%),linear-gradient(90deg,#08132118, #08132183 32%,#08132183 68%,#08132118); pointer-events:none; }
.mode-home {position:relative; max-width:530px; margin:0 auto; padding:25px 10px 0; text-align:center; }
.menu-logo {display:block; width:355px; max-width:90%; height:auto; margin:0 auto 8px; }
.menu-top {display:grid; grid-template-columns:40px minmax(0,1fr)65px; align-items:center; gap:12px; margin:0 -15px 10px; }
.menu-top .menu-logo {width:100%; max-width:355px; margin:0 auto; }
.menu-logo-button {display:block;width:100%;max-width:355px;margin:0 auto;padding:0;border:0;border-radius:4px;background:none;line-height:0;cursor:pointer; }
.menu-logo-button:focus-visible {outline:2px solid #9bdcff;outline-offset:6px; }
.menu-logo-button .menu-logo {transform-origin:center;transition:transform .2s ease-out; }
.menu-logo-button:hover .menu-logo,.menu-logo-button:focus-visible .menu-logo {transform:scale(1.065); }
@media(prefers-reduced-motion:reduce) {.menu-logo-button .menu-logo {transition:none;} .menu-logo-button:hover .menu-logo,.menu-logo-button:focus-visible .menu-logo {transform:none;} }
.menu-info {display:grid; place-items:center; width:36px; height:36px; padding:0; color:#b8d8ee; background:#0e233459; border:1px solid #557b96; border-radius:5px; font-size:25px; }
.menu-info:hover {background:#254a65; color:#fff; }
.menu-language {width:65px; padding:7px 3px; color:#d8ecfb; border:1px solid #557b96; border-radius:5px; background:#10253a; font-size:11px; cursor:pointer; }
.menu-language option {background:#10253a; color:#eef8ff; }
.menu-language-control {display:flex;align-items:center;gap:3px;padding:0 3px;border:1px solid #557b96;border-radius:5px;background:#10253a; }
.language-flag {display:block;width:19px;height:auto;flex-shrink:0; }
.menu-language-control .menu-language {border:0;width:41px;padding:7px 0;background:transparent; }
.menu-top {grid-template-columns:40px minmax(0,1fr)40px; }
.menu-language-control {position:relative;display:grid;place-items:center;width:36px;height:34px;padding:0;border:0;background:none; }
.menu-language-control .language-flag {width:27px;height:auto;border-radius:1px; }
.menu-language-control .menu-language {position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer; }
.menu-language-control:focus-within {outline:2px solid #83cfff;outline-offset:3px;border-radius:3px; }
.about-references summary {font:700 22px 'Barlow Condensed',sans-serif;color:#badfff;cursor:pointer;padding:4px 0; }
.about-references[open] summary {margin-bottom:12px; }
#about-dialog {position:fixed; }
#about-dialog>.close-dialog {position:absolute;top:10px;right:10px;float:none;display:grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid #547994;border-radius:4px;background:#102b40;color:#d6eeff;font-size:26px;line-height:1; }
#about-dialog>.close-dialog:hover {background:#254a65;color:#fff; }
#about-dialog #about-title {padding-right:28px; }
.about-references {border-top:1px solid #34546e; margin-top:20px; padding-top:18px; }
.about-references h3 {font:700 26px 'Barlow Condensed',sans-serif; margin:0 0 8px; }
.about-language-note {font-size:10px; color:#91b4cf; }
@media(max-width:650px) {.menu-top {grid-template-columns:32px minmax(0,1fr)32px; gap:7px; margin:0 0 12px;} .menu-info {width:30px;height:32px;font-size:22px;} .menu-language-control {width:32px;} .menu-language-control .language-flag {width:24px;} }
.menu-eyebrow {font:700 22px/1.3 'Barlow Condensed',sans-serif; letter-spacing:.8px; text-transform:uppercase; color:#e2f1ff; margin:0 0 25px; }
h1.menu-title {font:800 37px/1.1 'Barlow Condensed',sans-serif; color:#eef6ff; letter-spacing:.1px; margin:0 0 8px; text-transform:uppercase; }
.menu-intro {font-size:11px; line-height:1.6; color:#91abc4; margin:0 0 27px; }
.mode-cards {display:grid; gap:17px; text-align:left; padding-left:16px; }
.mode-card {--mode-color:#69c7ff; --mode-dark:#163c5a; position:relative; display:flex; align-items:center; gap:18px; width:100%; min-height:94px; padding:15px 21px 15px 66px; border:0; background:none; color:#f2f8ff; isolation:isolate; text-align:left; transition:transform .18s; }
.mode-card:before {content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(105deg,rgba(22,47,72,.43),rgba(8,23,42,.52));backdrop-filter:blur(15px) saturate(115%);-webkit-backdrop-filter:blur(15px) saturate(115%); border:1px solid rgba(166,209,238,.28); border-left:3px solid var(--mode-color); clip-path:polygon(0 0,100% 0,calc(100% - 18px) 100%,0 100%); box-shadow:inset 0 1px 0 rgba(229,246,255,.08),inset 0 -2px 0 rgba(0,8,20,.15); }
.mode-card:after {content:''; position:absolute; right:19px; bottom:0; height:2px; width:85%; background:linear-gradient(90deg,var(--mode-color),transparent); opacity:.5; }
.mode-card:hover {transform:translateX(4px); }
.mode-card:hover:before {background:linear-gradient(105deg,rgba(38,72,100,.52),rgba(16,36,58,.60)); border-color:var(--mode-color); }
.mode-card:focus-visible {outline:2px solid var(--mode-color); outline-offset:5px; }
.mode-power {--mode-color:#f27f72; --mode-dark:#4c272c; }
.mode-quote {--mode-color:#e6be6c; --mode-dark:#443b27; }
.mode-eye {--mode-color:#b79bff; --mode-dark:#332a52; }
.mode-medallion {position:absolute; left:-20px; top:50%; transform:translateY(-50%); width:74px; height:78px; display:grid; place-items:center; background:var(--mode-color); clip-path:polygon(28% 0,72% 0,100% 27%,100% 73%,72% 100%,28% 100%,0 73%,0 27%); }
.mode-medallion:before {content:''; position:absolute; inset:3px; background:radial-gradient(ellipse at 35% 15%,var(--mode-dark),#080d17 80%); clip-path:inherit; }
.mode-art {position:relative; width:53px; height:53px; object-fit:contain; filter:drop-shadow(0 3px 2px #0008); }
.mode-card-copy {display:grid; gap:5px; flex:1; }
.mode-relic {color:var(--mode-color); font-size:7px; letter-spacing:1.5px; }
.mode-card-name {font:700 29px/1 'Barlow Condensed',sans-serif; }
.mode-description {font-size:10px; color:#9eb5ca; line-height:1.5; }
.mode-card-status {font-size:9px; color:var(--mode-color); white-space:nowrap; padding-right:4px; }
.mode-complete .mode-card-status {color:#8be4bd; }
.mode-complete:after {background:linear-gradient(90deg,#78dbab,transparent); }
.menu-progress {font-size:9px; line-height:1.8; color:#7f9db8; margin:24px 0 0; }
.menu-results {margin:15px auto 0; padding:9px 18px; font-size:11px; }
.play-header {display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 0; border-bottom:1px solid #253a51; }
.play-logo {width:185px; max-width:45%; height:auto; }
.back-menu {border:1px solid #35516e; background:#11243b; color:#b6d7ee; border-radius:3px; padding:10px 14px; font-size:11px; }
.journey-toolbar>nav:first-child {display:none; }
.journey-toolbar {display:flex; justify-content:space-between; gap:14px; min-height:64px; }
.journey-toolbar .player-tools {position:static; transform:none; margin:0; }
.daily-progress {margin-left:auto; }
.mode-menu-open .game,.mode-menu-open #stages,.mode-menu-open .below,.mode-menu-open .roster-section,.mode-menu-open .journey-toolbar>nav:first-child,.mode-menu-open .daily-progress {display:none; }
.mode-menu-open .journey-toolbar {display:flex; justify-content:center; min-height:66px; margin:18px 0; }
.mode-menu-open .journey-toolbar .player-tools {position:static; transform:none; margin:auto; }
.mode-menu-open footer {margin-top:20px; }
.mode-menu-open .footer-logo {width:135px; margin-bottom:6px; }
.mode-menu-open footer {padding:14px 0; }
@media(max-width:650px) {.mode-home {padding-top:18px;} .menu-logo {width:300px;} h1.menu-title {font-size:32px;} .menu-intro {margin-bottom:23px;} .mode-cards {padding-left:18px;gap:14px;} .mode-card {min-height:88px; padding:12px 20px 12px 57px;gap:7px;} .mode-medallion {width:64px;height:68px;left:-18px;} .mode-art {width:46px;height:46px;} .mode-card-name {font-size:26px;} .mode-relic {font-size:6px;letter-spacing:1px;} .mode-description {font-size:9px;} .mode-card-status {font-size:8px;} .play-header {padding:12px 0;} .back-menu {font-size:10px;padding:9px;} .mode-menu-open .journey-toolbar .player-tools {width:auto;} .mode-menu-open .journey-toolbar .player-tools button {padding:8px 10px;} }
@media(prefers-reduced-motion:reduce) {.mode-card {transition:none;} }