:root{--mode-gold:#edcf91;--mode-cyan:#92dcd8;--mode-panel:#102a38}
body.mode-active{overflow:hidden}.mode-screen{position:fixed;inset:0;z-index:49;overflow:auto;background:radial-gradient(ellipse at 50% -20%,#274755,#0a1826 65%);color:#eae5d2}.mode-page{max-width:1200px;margin:auto;padding:34px 42px 28px}.mode-header{display:flex;align-items:center;justify-content:space-between;color:#ecd4a0;font-size:16px}.mode-header b{font-size:10px;color:#9aadb1;font-weight:400;margin-left:16px;border-left:1px solid #a0ad8c44;padding-left:16px}.mode-back{border:1px solid #8faaa62e;color:#c3cbc2;border-radius:20px;background:#28445138;font-size:11px;padding:8px 16px}.mode-heading{margin:48px 0 30px}.mode-heading>p{font-size:9px;color:#92aaa8;letter-spacing:4px}.mode-heading h1{font-size:38px;font-weight:600;letter-spacing:1px;line-height:1.3;margin:16px 0}.mode-heading h1 em{font-style:normal;color:#eacf99}.mode-heading>span{font-size:12px;color:#90a8af}.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:19px}.mode-card{position:relative;overflow:hidden;padding:0;border-radius:14px;border:1px solid #8aa3a331;background:#112b39;color:#e5e0c9;text-align:left;transition:transform .2s,border-color .2s}.mode-card:hover{transform:translateY(-4px);border-color:#e2cc8755}.mode-card[aria-pressed=true]{border-color:#edcd85;box-shadow:0 0 0 1px #edcd8544,0 18px 40px #000e1755}.mode-art{position:relative;height:180px;overflow:hidden;border-bottom:1px solid #9aa79521}.city-art{background:linear-gradient(150deg,#284653,#102b3e)}.city-art i{position:absolute;bottom:-20px;width:65px;height:90px;background:#39616d;border-top:4px solid #d8b471;transform:skewY(-12deg)}.city-art i:nth-child(1){left:25px;height:80px}.city-art i:nth-child(2){left:113px;height:108px}.city-art i:nth-child(3){left:201px;height:145px}.mode-art>b{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);font-size:66px;font-weight:400;color:#ebd49e;line-height:1}.inflation-art{background:radial-gradient(ellipse at 65% 25%,#6d5b3a,#332a28)}.inflation-art i{position:absolute;border:1px solid #edc785aa;background:radial-gradient(circle at 35% 30%,#e9c77a,#9c773e);border-radius:50%;box-shadow:0 0 45px #ebc66d15}.inflation-art i:first-child{width:98px;height:98px;left:23%;top:48px}.inflation-art i:nth-child(2){width:55px;height:55px;right:15%;top:76px;opacity:.45}.inflation-art>b{font-size:30px;left:42%;top:52%;color:#fff1c9}.gravity-art{background:radial-gradient(ellipse at 60% 60%,#1b5260,#0b2538)}.gravity-art i{position:absolute;left:30px;right:30px;height:14px;background:#375f6b;border-top:2px solid #8ddfda}.gravity-art i:first-child{top:27px}.gravity-art i:nth-child(2){bottom:27px;transform:rotate(180deg)}.gravity-art>b{color:#94e0da;font-size:66px}.mode-card-copy{padding:24px 23px 29px}.mode-card-copy small{font-size:9px;letter-spacing:2px;color:#9daca9}.mode-card-copy h2{font-size:25px;margin:13px 0;color:#efe2bd;font-weight:650}.mode-card-copy p{color:#9db1b4;font-size:12px;line-height:1.9;margin:0 0 20px}.mode-card-copy>span{display:block;color:#d3c197;font-size:10px}.mode-selected{position:absolute;right:13px;top:12px;background:#f4dcaa;color:#3b392e;font-size:9px;font-weight:600;padding:6px 8px;border-radius:5px;opacity:0}.mode-card[aria-pressed=true] .mode-selected{opacity:1}.mode-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid #8da1a028;margin-top:29px;padding:24px 0}.mode-footer>div>strong{display:block;color:#dfcfaa;font-size:13px;font-weight:600}.mode-footer>div>span{display:block;color:#78949e;font-size:10px;margin-top:10px}.mode-footer .primary-button{min-width:180px;font-size:13px;display:flex;justify-content:space-between}.choose-mode{margin-left:auto;border:1px solid #6c8c8b3d;background:#173541;color:#ddcc9f;border-radius:7px;padding:7px 11px;font-size:10px}.back-cover{margin-left:12px}.variant-panel{position:absolute;z-index:4;left:24px;top:24%;width:180px;background:#193b40e8;border:1px solid #d4c59060;border-radius:8px;padding:8px 10px;color:#efdca9}.variant-panel>strong{display:block;font-size:12px}.variant-panel>span{display:block;font-size:9px;color:#afc0b6;margin:5px 0}.variant-panel>i{display:block;height:3px;background:#789b8a44;overflow:hidden;border-radius:2px}.variant-panel b{display:block;height:3px;background:#e4c485}.variant-warning{position:absolute;z-index:3;left:50%;transform:translateX(-50%);top:37%;font-size:10px;line-height:1.7;color:#dfd3b2;background:#0b2935cc;border:1px solid #c4bd8833;border-radius:6px;padding:7px 11px;max-width:75%;text-align:center;pointer-events:none}.touch-controls #mode-touch{height:55px;width:55px;border-color:#d9c68d77;background:#51462cbf;align-self:center}.touch-controls #mode-touch b{font-size:10px;font-weight:400}.touch-controls #mode-touch>span{font-size:17px}.touch-controls #mode-touch.is-unavailable{opacity:.55}.result-variant{font-size:11px!important;color:#d4c498!important;line-height:1.7}.variant-panel[hidden]+.variant-warning[hidden]{display:none}
@media(max-width:950px){.mode-page{padding:28px 26px}.mode-grid{gap:13px}.mode-card-copy{padding:20px 16px 24px}.mode-card-copy h2{font-size:23px}.mode-card-copy p{font-size:11px}.mode-art{height:155px}.mode-heading{margin-top:35px}}
@media(max-width:600px){.mode-page{padding:23px 19px}.mode-header{font-size:14px}.mode-header b{font-size:8px;margin-left:9px;padding-left:9px}.mode-back{font-size:9px;padding:7px 11px}.mode-heading{margin:31px 0 22px}.mode-heading>p{font-size:8px;letter-spacing:2px}.mode-heading h1{font-size:27px;margin:12px 0}.mode-heading h1 em{display:block;margin-top:5px}.mode-heading>span{font-size:10px}.mode-grid{grid-template-columns:1fr;gap:13px}.mode-card{display:grid;grid-template-columns:105px 1fr;min-height:154px}.mode-art{height:100%;border:0;border-right:1px solid #c3c38320}.mode-card-copy{padding:17px 15px}.mode-card-copy small{font-size:8px;letter-spacing:1px}.mode-card-copy h2{font-size:20px;margin:8px 0}.mode-card-copy p{font-size:10px;line-height:1.7;margin-bottom:10px}.mode-card-copy>span{font-size:8px}.mode-art>b{font-size:40px}.city-art i{width:35px}.city-art i:nth-child(1){left:2px;height:48px}.city-art i:nth-child(2){left:42px;height:80px}.city-art i:nth-child(3){left:82px;height:120px}.inflation-art i:first-child{width:64px;height:64px;left:10px;top:52px}.inflation-art i:nth-child(2){height:35px;width:35px;right:-15px;top:77px}.inflation-art>b{font-size:23px;left:40%;top:49%}.gravity-art i{left:13px;right:13px}.mode-selected{right:9px;top:9px;font-size:7px;padding:4px 6px}.mode-footer{position:sticky;bottom:-23px;background:linear-gradient(#0b1d2be8,#0b1d2b);margin:20px -4px 0;padding:18px 4px 23px;gap:12px;z-index:3}.mode-footer>div>strong{font-size:10px;line-height:1.5}.mode-footer>div>span{font-size:8px;line-height:1.5;max-width:170px;margin-top:5px}.mode-footer .primary-button{min-width:110px;padding:11px;font-size:11px}.choose-mode{font-size:8px;padding:5px 7px}.back-cover{margin-left:5px;margin-right:5px}.variant-panel{left:18px;top:23%;width:144px;padding:7px 8px}.variant-panel>strong{font-size:11px}.variant-panel>span{font-size:8px}.variant-warning{top:37%;font-size:9px;padding:6px 9px;max-width:85%;width:max-content}.touch-controls #mode-touch{height:49px;width:49px}.touch-controls #skill-touch{height:49px;width:49px}.touch-controls #mode-touch>span{font-size:15px}.touch-controls{gap:8px}.touch-controls #skill-touch{margin-left:0;margin-right:0}.touch-controls #mode-touch{margin-left:auto;margin-right:auto}}
@media(prefers-reduced-motion:reduce){.mode-card{transition:none}}.reduced-motion .mode-card{transition:none}
.stage.has-variant .variant-warning,.stage.has-variant .toast{top:53%}
.variant-strip{height:28px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #9fb4a72b;color:#d5c69d}.variant-strip .variant-warning{position:static;left:auto;top:auto;transform:none;border:0;background:transparent;padding:0;max-width:100%;font-size:10px;line-height:1.5}.stage.has-variant{aspect-ratio:2.05}
.variant-strip .run-hint{position:static;left:auto;bottom:auto;transform:none;border:0;background:transparent;padding:0;margin:0;max-width:100%;font-size:9px;line-height:1.4;text-align:center;box-shadow:none}
@media(max-width:600px){.stage.has-variant{height:min(calc(100dvh - 185px),712px);aspect-ratio:auto}.variant-strip .variant-warning{font-size:9px}}

.box-rule-key{font-size:10px!important;line-height:1.7!important;margin:9px 0 0!important;color:#b5c6c2!important}.box-rule-key b{font-weight:500;color:#a1dfd0}.box-rule-key span{color:#e4c98e}@media(max-width:600px){.box-rule-key{font-size:9px!important;max-width:245px;margin:8px auto 0!important}}

@media(max-width:600px){.topbar{gap:6px}.topbar .brand{flex-shrink:0;min-width:106px}.topbar .tag{font-size:8px;margin-left:auto}.topbar .choose-mode{margin-left:auto;padding:5px 6px}.topbar .back-cover{font-size:8px;margin-left:0;margin-right:0}}
