*{margin:0;padding:0;box-sizing:border-box}
body{overflow:hidden;background:#000;font-family:'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;user-select:none;-webkit-user-select:none;touch-action:none;--city-glow:#9BE8FF;--city-sky:#87CEEB;--city-accent:#FFFFFF}
#game-container{width:100vw;height:100vh;height:100dvh;position:relative;overflow:hidden}
/* Embedded iOS browsers (the view with its own close/share toolbar) report the
   toolbar as part of the CSS viewport even though it covers the page. Reserve
   that strip for the host UI so game controls never render underneath it. */
.danbo-ios-embedded #game-container{height:calc(100dvh - 72px)}
.danbo-ios-embedded .multiplayer-overlay,.danbo-ios-embedded #worldmap-overlay,.danbo-ios-embedded #map-overlay,.danbo-ios-embedded #shop-overlay{bottom:72px!important}
#three-root{position:absolute;inset:0;z-index:0;pointer-events:none}
/* World text stays at native browser resolution even when the 3D view is downscaled. */
#world-label-layer{position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none}
#chat-input-bar{position:absolute;bottom:calc(60px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:20;width:min(360px,calc(100% - 24px));gap:6px;align-items:center}
#chat-field{box-sizing:border-box;min-width:0;flex:1;padding:10px 12px;border:1px solid #89d7cf;border-radius:18px;background:#102735f5;color:#fff;font:16px system-ui,sans-serif;outline:none}
#chat-send{flex:none;width:44px;height:44px;padding:0;border:1px solid #9bf5df;border-radius:50%;background:#47b6b9;color:#092c39;font-size:22px;cursor:pointer}
.danbo-chat-open #door-prompt,.danbo-chat-open #portal-prompt,.danbo-chat-open #shop-prompt{display:none!important}
#world-label-layer[hidden],.world-label[hidden],.world-label-secondary[hidden]{display:none!important}
.world-label{position:absolute;transform:translate(-50%,-100%);width:max-content;max-width:min(230px,80vw);padding:4px 8px;border:1px solid #d2edf052;border-radius:9px;background:rgba(8,24,35,.86);color:#fff;text-align:center;font-family:system-ui,'PingFang SC','Microsoft YaHei',sans-serif;font-size:15px;line-height:1.35;font-weight:700;pointer-events:none;text-shadow:none}
.world-label-primary,.world-label-secondary{display:block}.world-label-primary{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.world-label-secondary{font-size:12px;font-weight:600;color:#ffe6a1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.world-label-chat{width:max-content;max-width:min(220px,75vw);padding:8px 12px;border:1px solid #304653;border-radius:12px;background:#fffdf5;color:#172b38;font-size:15px;line-height:1.4;box-shadow:0 2px 3px #0002}
.world-label-portal{padding:5px 11px;border-width:1px;border-radius:9px;background:#102735f2;font-size:15px;font-weight:750;line-height:1.4;box-shadow:none;text-shadow:none}
.world-label-sign{padding:3px 7px;border-radius:6px;background:#142b38ed;font-size:14px;font-weight:700}
.world-label-chat .world-label-primary{white-space:normal;overflow-wrap:anywhere}.world-label-chat::after{content:'';position:absolute;left:50%;bottom:-6px;width:10px;height:10px;background:#fffdf5;border-right:1px solid #304653;border-bottom:1px solid #304653;transform:translateX(-50%) rotate(45deg)}
/* Compositor-only feedback while scene construction yields to the browser. */
#city-transfer-status{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);z-index:900;display:flex;align-items:center;gap:12px;padding:15px 24px;border:1px solid #b8e8ed;border-radius:18px;background:#123743ee;color:#fff;font-size:16px;font-weight:700;pointer-events:none;box-shadow:0 8px 28px #071c2840}
#city-transfer-status[hidden]{display:none}
#city-transfer-status::before{content:"";width:20px;height:20px;border:3px solid #ffffff40;border-top-color:#90f2cf;border-radius:50%;animation:danboTransferSpin .8s linear infinite;will-change:transform}
@keyframes danboTransferSpin{to{transform:rotate(360deg)}}
#three-root canvas{display:block;width:100%;height:100%;pointer-events:auto}
#game-container::before{content:"";position:absolute;inset:-18%;z-index:1;pointer-events:none;background:radial-gradient(circle at 48% 28%,color-mix(in srgb,var(--city-accent) 24%,transparent),transparent 21%),radial-gradient(circle at 72% 22%,color-mix(in srgb,var(--city-glow) 18%,transparent),transparent 27%),linear-gradient(120deg,transparent 18%,color-mix(in srgb,var(--city-glow) 7%,transparent) 44%,transparent 66%);mix-blend-mode:screen;opacity:.36;animation:cinematicBreathe 8s ease-in-out infinite}
#game-container::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle at 50% 34%,rgba(255,255,255,.10),rgba(255,255,255,0) 34%),linear-gradient(180deg,color-mix(in srgb,var(--city-sky) 10%,transparent),rgba(255,225,180,.05) 60%,rgba(0,0,0,.08)),radial-gradient(circle at center,rgba(0,0,0,0) 62%,rgba(0,0,0,.12) 100%);mix-blend-mode:soft-light;opacity:.72}
@keyframes cinematicBreathe{0%,100%{transform:scale(1);opacity:.30}50%{transform:scale(1.04);opacity:.42}}
/* The renderer owns the world colour pipeline. Browser compositing filters and
   animated white overlays used to wash out PBR and add another full-screen copy. */
#game-container.danbo-world-view::before,#game-container.danbo-world-view::after{display:none}
body[data-city-style="4"],body[data-city-style="6"]{--city-accent:#FFEAF5}
.screen{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;z-index:10;pointer-events:auto}
.screen.active{display:flex}
#start-screen{background:#000;gap:0;padding:0}
.server-select-screen{padding:clamp(16px,4vw,48px);background:radial-gradient(circle at 22% 18%,rgba(73,205,201,.24),transparent 30%),radial-gradient(circle at 80% 82%,rgba(255,181,91,.18),transparent 34%),linear-gradient(145deg,#102936,#09141f 58%,#060d15);color:#eefcff}
.server-browser-shell{width:min(980px,100%);max-height:calc(100dvh - 32px);padding:clamp(20px,3.5vw,38px);border:1px solid rgba(177,242,236,.24);border-radius:30px;background:linear-gradient(145deg,rgba(21,57,70,.94),rgba(8,24,36,.96));box-shadow:0 34px 90px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.10);backdrop-filter:blur(18px)}
.server-browser-header{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;padding-bottom:24px;border-bottom:1px solid rgba(181,235,232,.14)}
.server-browser-header small{font-size:10px;letter-spacing:.24em;color:#70e2cf;font-weight:900}.server-browser-header h2{margin:3px 0 4px;font-size:clamp(24px,4vw,38px);letter-spacing:.04em}.server-browser-header p{color:rgba(222,247,246,.62);font-size:13px}
.server-refresh-btn{height:42px;padding:0 16px;border:1px solid rgba(130,219,211,.28);border-radius:13px;background:rgba(83,185,181,.12);color:#cafff5;font-weight:800;cursor:pointer}.server-refresh-btn:hover{background:rgba(83,185,181,.22)}.server-refresh-btn:disabled{opacity:.55;cursor:wait}
.server-list{display:grid;gap:12px;padding:24px 0}
.server-list-item{width:100%;min-height:96px;display:grid;grid-template-columns:auto minmax(180px,1fr) auto auto auto auto;align-items:center;gap:16px;padding:17px 20px;border:1px solid rgba(153,217,213,.18);border-radius:20px;background:rgba(8,26,37,.62);color:#efffff;text-align:left;cursor:pointer;transition:.18s transform,.18s border-color,.18s background}
.server-list-item:hover,.server-list-item.selected{transform:translateY(-1px);border-color:rgba(105,239,210,.68);background:linear-gradient(120deg,rgba(29,105,111,.62),rgba(14,46,60,.72));box-shadow:0 12px 28px rgba(0,0,0,.18)}
.server-state-dot{width:12px;height:12px;border-radius:50%;background:#8e9ba2;box-shadow:0 0 0 5px rgba(142,155,162,.10)}.server-list-item.online .server-state-dot{background:#5ff2b7;box-shadow:0 0 14px #5ff2b7}.server-list-item.offline .server-state-dot{background:#ff7b74;box-shadow:0 0 12px rgba(255,123,116,.72)}
.server-main-copy{display:grid;gap:5px}.server-main-copy strong{font-size:17px}.server-main-copy small,.server-region{color:rgba(215,242,241,.56);font-size:11px}.server-region{padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.06)}
.server-metric{min-width:58px;display:grid;gap:2px;text-align:center}.server-metric b{font-size:16px}.server-metric small{font-size:9px;color:rgba(215,242,241,.48)}.server-state-text{min-width:70px;text-align:right;color:#a8b9bd;font-size:12px;font-weight:800}.server-list-item.online .server-state-text{color:#72efc1}.server-list-item.offline .server-state-text{color:#ff9e98}
.server-browser-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:20px;border-top:1px solid rgba(181,235,232,.14)}.server-browser-footer>span{color:rgba(222,247,246,.62);font-size:12px}.server-browser-footer .btn{min-width:220px}.server-browser-footer .btn:disabled{opacity:.45;filter:saturate(.25);cursor:not-allowed}
@media(max-width:700px){.server-select-screen{padding:10px}.server-browser-shell{padding:18px 14px;border-radius:23px}.server-browser-header{grid-template-columns:1fr;gap:11px;padding-bottom:17px}.server-browser-header p{display:none}.server-refresh-btn{width:100%}.server-list{padding:17px 0}.server-list-item{grid-template-columns:auto 1fr auto;padding:14px 13px;gap:10px}.server-region{display:none}.server-metric{min-width:44px}.server-state-text{grid-column:2/-1;text-align:left}.server-browser-footer{display:grid}.server-browser-footer .btn{width:100%;min-width:0}.server-browser-footer>span{text-align:center}}
.engine-loader{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:radial-gradient(circle at 50% 38%,rgba(60,80,130,.35),rgba(0,0,0,.96) 58%,#000 100%);color:#fff;letter-spacing:2px;transition:opacity .25s ease,visibility .25s ease;pointer-events:none}
.engine-loader-hidden{opacity:0;visibility:hidden}
.engine-loader-egg{font-size:clamp(42px,13vw,72px);filter:drop-shadow(0 0 18px rgba(255,215,0,.45));animation:loaderEgg 1.1s ease-in-out infinite}
.engine-loader-text{font-size:clamp(13px,3.5vw,17px);font-weight:800;text-shadow:0 0 16px rgba(150,210,255,.55)}
.engine-loader-bar{width:min(280px,68vw);height:8px;border-radius:999px;background:rgba(255,255,255,.16);overflow:hidden;border:1px solid rgba(255,255,255,.18);box-shadow:0 0 18px rgba(120,190,255,.18)}
.engine-loader-bar span{display:block;width:0%;height:100%;border-radius:999px;background:linear-gradient(90deg,#66CCFF,#FFD700,#FF8844);box-shadow:0 0 16px rgba(255,215,0,.65);transition:width .22s ease}
@keyframes loaderEgg{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-10px) scale(1.05)}}
.title-area{text-align:center}
.egg-bounce{font-size:64px;animation:bounce .8s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
h1{font-size:clamp(32px,8vw,56px);color:#fff;text-shadow:3px 3px 0 #FF8800,6px 6px 0 rgba(0,0,0,.2);letter-spacing:6px;font-weight:900}
.subtitle{font-size:clamp(12px,2.5vw,16px);color:rgba(255,255,255,.9);letter-spacing:8px;margin-top:4px;font-weight:700}
.slogan-text{font-size:clamp(10px,1.8vw,13px);color:rgba(255,255,255,.65);letter-spacing:3px;margin-top:6px;font-style:italic}
.version-text{font-size:clamp(10px,2vw,13px);color:rgba(255,255,255,.75);letter-spacing:2px;margin-top:8px}
.btn{padding:12px 38px;border:none;border-radius:50px;font-size:15px;font-weight:700;cursor:pointer;transition:transform .1s;min-width:180px;letter-spacing:1px}
.btn:hover{transform:scale(1.04)}.btn:active{transform:scale(.97)}
.btn-primary{background:linear-gradient(135deg,#FFD700,#FFA500);color:#5a3e00;box-shadow:0 4px 16px rgba(255,165,0,.4)}
.hidden{display:none!important}

/* Sound toggle */
.sound-toggle{min-width:clamp(28px,8vw,36px);height:clamp(28px,8vw,36px);border-radius:18px;border:2px solid rgba(255,255,255,.3);background:rgba(0,0,0,.4);color:#fff;font-size:clamp(11px,3vw,14px);cursor:pointer;pointer-events:auto;backdrop-filter:blur(4px);transition:background .15s;padding:0 clamp(3px,1vw,6px);white-space:nowrap}

/* Portal prompt */
.portal-prompt{position:absolute;bottom:22%;left:50%;transform:translateX(-50%);z-index:8;background:rgba(0,0,0,.6);color:#fff;padding:10px 24px;border-radius:14px;font-size:15px;font-weight:700;letter-spacing:2px;text-align:center;backdrop-filter:blur(6px);border:2px solid rgba(255,215,0,.4);box-shadow:0 0 20px rgba(255,215,0,.2);pointer-events:auto;cursor:pointer;animation:promptPulse 1.5s ease-in-out infinite}
@keyframes promptPulse{0%,100%{box-shadow:0 0 20px rgba(255,215,0,.2)}50%{box-shadow:0 0 30px rgba(255,215,0,.4)}}

/* Portal confirm */
.portal-confirm{position:absolute;inset:0;z-index:12;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);pointer-events:auto}
.portal-confirm-box{background:linear-gradient(150deg,#1a1a4a,#2d1a5a);border:3px solid #FFD700;border-radius:16px;padding:24px 32px;text-align:center;box-shadow:0 0 30px rgba(255,215,0,.3);min-width:260px}
.portal-confirm-name{font-size:22px;color:#FFD700;font-weight:900;letter-spacing:3px;margin-bottom:6px;text-shadow:1px 1px 0 #000}
.portal-confirm-desc{font-size:14px;color:rgba(255,255,255,.7);margin-bottom:16px}
.portal-confirm-btns{display:flex;gap:10px;justify-content:center}
.portal-btn-no{background:rgba(255,255,255,.15);color:#fff;border:2px solid rgba(255,255,255,.3)}
.sound-toggle:hover{background:rgba(0,0,0,.6)}
.sound-toggle.muted{opacity:.5}

/* Cinematic real-time 3D character select */
#select-screen.cinematic-select{--select-accent:#ff769a;--select-accent-rgb:255,118,154;display:none;overflow:hidden;padding:0;align-items:stretch;justify-content:stretch;background:linear-gradient(158deg,#86d9ed 0%,#bce9dc 36%,#ffe0a5 68%,#f59b7f 100%);isolation:isolate;color:#24384b}
#select-screen.cinematic-select.active{display:flex}
#select-screen.cinematic-select:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.20),transparent 38%),radial-gradient(ellipse at 50% 112%,rgba(18,87,83,.52) 0 20%,rgba(18,87,83,0) 58%),linear-gradient(90deg,rgba(20,65,83,.12),transparent 25% 75%,rgba(20,65,83,.12));}
#select-screen.cinematic-select:after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;box-shadow:inset 0 0 120px rgba(23,63,73,.20)}
#select-3d-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.select-sky-glow{position:absolute;border-radius:50%;filter:blur(1px);opacity:.7;z-index:0;pointer-events:none}
.select-sky-glow-a{width:42vw;height:42vw;left:-12vw;top:-18vw;background:radial-gradient(circle,rgba(255,255,236,.92),rgba(255,226,154,.20) 48%,transparent 70%)}
.select-sky-glow-b{width:40vw;height:40vw;right:-18vw;bottom:-18vw;background:radial-gradient(circle,rgba(255,125,118,.36),rgba(255,196,142,.12) 53%,transparent 72%)}
.select-cinematic-shell{position:relative;z-index:auto;width:min(1320px,calc(100% - 56px));height:100%;margin:0 auto;box-sizing:border-box;padding:clamp(22px,3vh,42px) 0 clamp(20px,3vh,36px);display:grid;grid-template-rows:auto minmax(0,1fr);gap:clamp(16px,2.2vh,28px)}
.select-cinematic-header{position:relative;z-index:6;display:flex;align-items:center;gap:16px;min-height:64px;padding:0 4px;color:#17334a;text-shadow:0 1px 0 rgba(255,255,255,.45)}
.select-brand-mark{width:58px;height:58px;flex:0 0 58px;border-radius:20px;display:grid;place-items:center;background:linear-gradient(145deg,#fff6db,#ffc66d);border:1px solid rgba(255,255,255,.75);box-shadow:0 13px 26px rgba(40,81,90,.19),inset 0 1px 0 #fff}
.select-brand-mark span{font-size:17px;font-weight:1000;letter-spacing:-1px;color:#ef6c63;text-shadow:0 2px 0 rgba(255,255,255,.55)}
.select-header-copy{min-width:0}
.select-header-copy h1{font-size:clamp(28px,3vw,46px);line-height:.95;margin:4px 0 6px;font-weight:1000;letter-spacing:.04em;color:#17354b;text-shadow:none}
.select-header-copy p{margin:0;color:rgba(26,57,72,.66);font-size:clamp(11px,1vw,14px);font-weight:750;letter-spacing:.06em}
.select-kicker{font-size:10px;letter-spacing:.22em;font-weight:900;color:#e66d64}
.select-quality-chip{margin-left:auto;align-self:flex-start;display:flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid rgba(255,255,255,.68);border-radius:999px;background:rgba(255,255,255,.38);box-shadow:0 8px 24px rgba(38,83,90,.11);backdrop-filter:blur(10px);font-size:10px;font-weight:900;letter-spacing:.12em;color:#285263;white-space:nowrap}
.select-quality-chip i{width:7px;height:7px;border-radius:50%;background:#3bc99b;box-shadow:0 0 0 4px rgba(59,201,155,.16)}
.select-cinematic-main{min-height:0;display:grid;grid-template-columns:minmax(390px,1.05fr) minmax(500px,.95fr);gap:clamp(18px,2vw,28px)}
.select-hero-panel,.select-roster-panel{position:relative;min-height:0;border:1px solid rgba(255,255,255,.64);box-shadow:0 24px 54px rgba(28,75,83,.18),inset 0 1px 0 rgba(255,255,255,.65);overflow:hidden}
.select-hero-panel{border-radius:36px;background:linear-gradient(145deg,rgba(255,255,255,.30),rgba(255,246,221,.15) 48%,rgba(var(--select-accent-rgb),.10));}
.select-hero-panel:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.58),transparent 38%),linear-gradient(180deg,transparent 52%,rgba(27,62,68,.62) 100%);z-index:0}
.select-hero-panel:after{content:"";position:absolute;left:9%;right:9%;bottom:25%;height:26%;border-radius:50%;background:radial-gradient(ellipse,rgba(var(--select-accent-rgb),.31),transparent 68%);filter:blur(8px);opacity:.55;z-index:0}
.select-hero-viewport{position:absolute;left:4%;right:4%;top:0;bottom:25%;z-index:2}
.select-hero-rings span{position:absolute;z-index:1;left:50%;top:48%;width:min(60%,360px);aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,255,255,.48);transform:translate(-50%,-50%);box-shadow:0 0 60px rgba(255,255,255,.22)}
.select-hero-rings span+span{width:min(76%,460px);opacity:.38;border-style:dashed;animation:selectRingTurn 24s linear infinite}
@keyframes selectRingTurn{to{transform:translate(-50%,-50%) rotate(360deg)}}
.select-hero-copy{position:absolute;z-index:6;left:clamp(22px,4vw,46px);right:clamp(22px,4vw,46px);bottom:clamp(20px,3.2vh,34px);color:#fff;text-shadow:0 2px 12px rgba(14,45,50,.28)}
.select-archetype{display:inline-flex;align-items:center;gap:8px;margin-bottom:6px;color:#ffe7a5;font-size:12px;font-weight:900;letter-spacing:.18em}
.select-archetype:before{content:"";width:22px;height:2px;background:var(--select-accent);box-shadow:0 0 9px rgba(var(--select-accent-rgb),.65)}
.sf2-char-name{font-size:clamp(34px,4vw,58px);line-height:1;margin:0 0 8px;font-weight:1000;letter-spacing:.08em;color:#fff;text-shadow:0 4px 22px rgba(11,37,46,.32)}
.select-hero-copy p{max-width:510px;margin:0;color:rgba(255,255,255,.82);font-size:clamp(12px,1.15vw,15px);line-height:1.6;font-weight:650}
.select-feature-row{display:flex;gap:7px;margin-top:13px;flex-wrap:wrap}
.select-feature-row span{padding:5px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(19,51,60,.22);backdrop-filter:blur(6px);font-size:10px;font-weight:800;color:rgba(255,255,255,.82)}
.select-roster-panel{border-radius:30px;background:linear-gradient(155deg,rgba(246,255,250,.72),rgba(233,250,242,.58));padding:clamp(18px,2.2vw,28px);display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(12px,2vh,19px);backdrop-filter:none;-webkit-backdrop-filter:none}
.select-roster-top{display:grid;grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:8px;min-height:145px}
.select-roster-heading{position:relative;z-index:6;display:flex;flex-direction:row;justify-content:space-between;align-items:flex-end;padding:0 3px;min-width:0}
.select-roster-title{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}.select-roster-heading small{font-size:9px;letter-spacing:.22em;color:#e36c65;font-weight:950}.select-roster-heading strong{font-size:clamp(18px,1.8vw,24px);color:#1d4050;letter-spacing:.08em}
.select-style-toggle{display:flex;align-items:center;gap:3px;margin:0 8px;padding:3px;border-radius:12px;background:rgba(255,255,255,.38);border:1px solid rgba(255,255,255,.62);box-shadow:inset 0 1px 0 rgba(255,255,255,.62)}
.select-style-btn{min-width:34px;height:24px;padding:0 8px;border:0;border-radius:8px;background:transparent;color:rgba(31,72,82,.54);font:950 9px/1 inherit;letter-spacing:.08em;cursor:pointer;transition:background .18s,color .18s,box-shadow .18s}
.select-style-btn.active{background:linear-gradient(135deg,var(--select-accent),#f59b58);color:#fff;box-shadow:0 4px 10px rgba(var(--select-accent-rgb),.25),inset 0 1px 0 rgba(255,255,255,.48)}
.select-roster-count{display:flex;align-items:baseline;gap:3px;margin:0;padding:5px 9px 4px;border-radius:12px;background:rgba(255,255,255,.38);border:1px solid rgba(255,255,255,.62);box-shadow:inset 0 1px 0 rgba(255,255,255,.64);font-size:12px;color:rgba(31,72,82,.48);font-weight:900;letter-spacing:.13em}.select-roster-count b{font-size:22px;color:var(--select-accent);font-weight:1000}
.select-map-panel{position:relative;min-width:0;height:110px;overflow:hidden;border-radius:19px;border:1px solid rgba(255,255,255,.82);background:linear-gradient(145deg,rgba(73,145,158,.88),rgba(42,100,118,.89) 58%,rgba(var(--select-accent-rgb),.58));box-shadow:0 9px 20px rgba(25,68,80,.16),inset 0 1px 0 rgba(255,255,255,.45)}
.select-map-panel:before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(circle at 74% 35%,rgba(255,238,186,.28),transparent 32%),linear-gradient(180deg,rgba(176,232,240,.22),transparent 52%,rgba(11,38,54,.18));pointer-events:none}
.select-map-panel:after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;box-shadow:inset 0 0 30px rgba(8,37,50,.22);pointer-events:none}
.select-map-viewport{position:absolute;z-index:1;inset:25px 0 0}
.select-map-caption{position:absolute;z-index:5;left:11px;right:10px;top:8px;display:flex;align-items:center;gap:8px;color:#fff;text-shadow:0 1px 7px rgba(6,27,38,.42);pointer-events:none}
.select-map-caption span{font-size:8px;font-weight:950;letter-spacing:.16em;color:rgba(220,248,252,.72);white-space:nowrap}.select-map-caption strong{font-size:11px;letter-spacing:.05em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.select-map-live{position:absolute;z-index:5;right:8px;bottom:7px;display:flex;align-items:center;gap:5px;padding:3px 6px;border-radius:999px;background:rgba(9,37,47,.38);border:1px solid rgba(255,255,255,.18);font-size:7px;letter-spacing:.10em;color:rgba(255,255,255,.78);font-weight:900;pointer-events:none}.select-map-live i{width:5px;height:5px;border-radius:50%;background:#65f2ba;box-shadow:0 0 8px #65f2ba}
.char-grid{min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:clamp(8px,1.1vw,13px);width:100%}
.char-cell{position:relative;min-width:0;min-height:0;cursor:pointer;overflow:hidden;border:1px solid rgba(255,255,255,.75);border-radius:clamp(15px,1.5vw,22px);background:linear-gradient(160deg,rgba(255,255,255,.54),rgba(222,243,232,.31));box-shadow:0 9px 20px rgba(30,84,85,.09),inset 0 1px 0 rgba(255,255,255,.68);transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.char-cell:before{content:"";position:absolute;z-index:0;inset:24% 5% 15%;border-radius:50%;background:radial-gradient(ellipse,rgba(var(--card-rgb),.23),transparent 68%);transition:opacity .2s,transform .2s}
.char-cell:after{display:none}
.char-cell:hover{box-shadow:0 13px 25px rgba(30,84,85,.15),inset 0 1px 0 rgba(255,255,255,.85)}
.char-cell.selected{border-color:rgba(var(--card-rgb),.82);background:linear-gradient(155deg,rgba(255,255,255,.78),rgba(var(--card-rgb),.14));box-shadow:0 14px 28px rgba(var(--card-rgb),.21),0 0 0 1px rgba(var(--card-rgb),.38),inset 0 1px 0 #fff}
.char-cell.selected:before{transform:scale(1.18);opacity:.9}
.char-cell .char-number{position:absolute;z-index:4;left:10px;top:8px;font-size:9px;letter-spacing:.12em;font-weight:950;color:rgba(36,70,78,.34)}
.char-cell .char-label{position:absolute;z-index:4;left:6px;right:6px;bottom:6px;text-align:center;padding:5px 3px 4px;border-radius:9px;background:rgba(255,255,255,.60);backdrop-filter:blur(5px);font-size:clamp(9px,.72vw,12px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#244754;font-weight:900;letter-spacing:.05em;box-shadow:0 3px 10px rgba(28,72,75,.06)}
.char-cell .char-fallback{position:absolute;z-index:0;inset:20%;display:grid;place-items:center;font-size:36px;opacity:.22}
.char-cell .char-icon-canvas,.select-classic-portrait,.select-classic-map{display:none}
.select-3d-ready .char-fallback{display:none}
.select-confirm-row{position:relative;z-index:6;display:flex;align-items:center;gap:12px}
.select-control-tip{display:flex;align-items:center;gap:5px;color:rgba(33,69,77,.53);font-size:10px;font-weight:800;white-space:nowrap}
.select-control-tip kbd{min-width:22px;height:22px;display:grid;place-items:center;border-radius:7px;border:1px solid rgba(43,84,90,.15);background:rgba(255,255,255,.52);box-shadow:0 2px 3px rgba(26,67,73,.08);font-family:inherit;color:#3f6970}
#confirm-btn{margin-left:auto;min-width:min(100%,240px);height:52px;padding:0 20px;border:1px solid rgba(255,255,255,.58);border-radius:17px;display:flex;align-items:center;justify-content:space-between;gap:24px;background:linear-gradient(135deg,var(--select-accent),#f7a354);box-shadow:0 12px 25px rgba(var(--select-accent-rgb),.28),inset 0 1px 0 rgba(255,255,255,.46);color:#fff;font-size:14px;font-weight:950;letter-spacing:.08em;text-shadow:0 1px 8px rgba(101,51,50,.19);transition:transform .18s,box-shadow .18s}
#confirm-btn:hover{transform:translateY(-2px);box-shadow:0 16px 30px rgba(var(--select-accent-rgb),.34),inset 0 1px 0 rgba(255,255,255,.52)}
#confirm-btn b{font-size:21px;font-weight:500}.select-launch-flash{position:absolute;z-index:20;inset:0;pointer-events:none;opacity:0;transform:scale(.7);background:radial-gradient(circle at 35% 48%,rgba(255,255,255,.98),rgba(var(--select-accent-rgb),.62) 22%,transparent 62%)}
.cinematic-select.select-launching .select-launch-flash{animation:selectLaunch .68s ease-in forwards}
.cinematic-select.select-launching .select-cinematic-shell{animation:selectShellLaunch .68s cubic-bezier(.5,0,.85,.3) forwards}
@keyframes selectLaunch{0%{opacity:0;transform:scale(.72)}55%{opacity:.58}100%{opacity:1;transform:scale(2)}}
@keyframes selectShellLaunch{to{opacity:0;transform:scale(1.035)}}
@media(max-width:900px){
  .select-cinematic-shell{width:calc(100% - 24px);padding:14px 0 12px;gap:10px}.select-cinematic-header{min-height:52px;gap:10px}.select-brand-mark{width:46px;height:46px;flex-basis:46px;border-radius:15px}.select-header-copy h1{font-size:26px;margin:2px 0 3px}.select-header-copy p{font-size:10px}.select-kicker{font-size:8px}.select-quality-chip{padding:7px 9px;font-size:8px}
  .select-cinematic-main{grid-template-columns:minmax(260px,.9fr) minmax(420px,1.1fr);gap:10px}.select-hero-panel{border-radius:25px}.select-roster-panel{border-radius:24px;padding:15px;gap:10px}.select-roster-top{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);min-height:138px}.select-map-panel{height:100px;border-radius:17px}.select-hero-copy{left:22px;right:22px;bottom:19px}.select-feature-row{margin-top:8px}.select-feature-row span{font-size:8px;padding:4px 7px}.sf2-char-name{font-size:34px}.select-hero-copy p{font-size:11px}.select-archetype{font-size:9px}.char-grid{gap:7px}.char-cell{border-radius:15px}.select-control-tip{display:none}#confirm-btn{width:100%;min-width:0;height:46px;border-radius:14px}
}
@media(max-width:700px){
  .select-cinematic-shell{width:calc(100% - 18px);padding:max(10px,env(safe-area-inset-top)) 0 max(8px,env(safe-area-inset-bottom));gap:7px}.select-cinematic-header{min-height:46px}.select-brand-mark{width:40px;height:40px;flex-basis:40px;border-radius:13px}.select-brand-mark span{font-size:13px}.select-header-copy h1{font-size:21px;margin:1px 0 2px}.select-header-copy p{font-size:8px}.select-kicker{font-size:7px}.select-quality-chip{display:none}
  .select-kicker{display:none}.select-cinematic-main{display:grid;grid-template-columns:1fr;grid-template-rows:minmax(210px,42%) minmax(0,58%);gap:7px}.select-hero-panel{border-radius:22px}.select-hero-viewport{left:0;right:40%;top:-5%;bottom:0}.select-hero-panel:after{left:0;right:41%;bottom:4%;height:42%}.select-hero-rings span{left:30%;top:52%;width:50%}.select-hero-rings span+span{width:62%}.select-hero-copy{left:59%;right:12px;bottom:50%;transform:translateY(50%);text-shadow:0 2px 10px rgba(14,45,50,.34)}.select-archetype{font-size:8px;letter-spacing:.10em;margin-bottom:4px}.select-archetype:before{width:13px}.sf2-char-name{font-size:clamp(26px,7.5vw,35px);margin-bottom:5px}.select-hero-copy p{font-size:9px;line-height:1.45}.select-feature-row{gap:4px;margin-top:7px}.select-feature-row span{font-size:7px;padding:3px 5px}.select-roster-panel{border-radius:20px;padding:10px;gap:7px}.select-roster-top{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:5px;min-height:108px}.select-map-panel{height:78px;border-radius:13px}.select-map-viewport{inset:19px 0 0}.select-map-caption{left:7px;top:5px;gap:5px}.select-map-caption span{font-size:6px}.select-map-caption strong{font-size:8px}.select-map-live{right:5px;bottom:4px;font-size:5px;padding:2px 4px}.select-roster-heading{align-items:center}.select-roster-heading strong{font-size:14px}.select-roster-heading small{font-size:7px}.select-roster-count b{font-size:16px}.select-roster-count{font-size:9px;padding:3px 6px}.char-grid{gap:5px}.char-cell{border-radius:12px}.char-cell .char-number{left:6px;top:5px;font-size:7px}.char-cell .char-label{left:3px;right:3px;bottom:3px;padding:3px 1px 2px;border-radius:6px;font-size:clamp(7px,2.15vw,10px)}.select-confirm-row{display:block}#confirm-btn{height:40px;border-radius:12px;font-size:11px;padding:0 15px}.select-confirm-row{min-height:40px}
}
@media(max-width:390px),(max-height:690px){
  .select-cinematic-shell{padding-top:7px}.select-cinematic-header{min-height:38px}.select-brand-mark{width:34px;height:34px;flex-basis:34px;border-radius:11px}.select-header-copy h1{font-size:18px}.select-header-copy p{display:none}.select-cinematic-main{grid-template-rows:minmax(180px,39%) minmax(0,61%)}.select-roster-panel{padding:8px;gap:5px}.select-roster-top{min-height:91px}.select-map-panel{height:65px}.select-roster-heading small{display:none}.select-feature-row{display:none}#confirm-btn{height:36px}.select-confirm-row{min-height:36px}.char-cell .char-label{font-size:7px}
}
@media(max-width:480px){
  html[lang="en"] .select-header-copy h1,html[lang="ja"] .select-header-copy h1{font-size:15px;letter-spacing:.01em;max-width:165px;line-height:1.05}
}
@media(prefers-reduced-motion:reduce){.select-hero-rings span+span{animation:none}.char-cell,#confirm-btn{transition:none}}

/* Selection page visual refinement — warm cinematic key, layered glass and premium turntable */
#select-screen.cinematic-select{background:linear-gradient(145deg,#72c9dc 0%,#a8ddd3 31%,#f6d897 69%,#ed8b70 100%)}
#select-screen.cinematic-select:before{background:radial-gradient(circle at 19% 18%,rgba(255,249,211,.72),transparent 22%),radial-gradient(circle at 76% 20%,rgba(161,233,232,.34),transparent 25%),linear-gradient(116deg,rgba(255,248,214,.20),transparent 31% 64%,rgba(255,172,139,.16)),radial-gradient(ellipse at 50% 113%,rgba(14,69,70,.54) 0 20%,transparent 59%)}
#select-screen.cinematic-select:after{box-shadow:inset 0 0 145px rgba(19,57,68,.24);background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 46%,rgba(20,54,60,.08))}
.select-sky-glow{animation:selectAtmosphereBreathe 8s ease-in-out infinite}.select-sky-glow-b{animation-delay:-4s}
@keyframes selectAtmosphereBreathe{0%,100%{transform:scale(1);opacity:.62}50%{transform:scale(1.07);opacity:.82}}
.select-brand-mark{background:linear-gradient(145deg,#fff9e9,#ffc873 58%,#ef8b68);border-color:rgba(255,255,255,.88);box-shadow:0 15px 30px rgba(31,74,83,.22),inset 0 2px 0 rgba(255,255,255,.88),inset 0 -7px 13px rgba(201,104,70,.10)}
.select-quality-chip{background:linear-gradient(145deg,rgba(255,255,255,.57),rgba(225,247,239,.34));border-color:rgba(255,255,255,.82);box-shadow:0 11px 26px rgba(24,71,80,.14),inset 0 1px 0 rgba(255,255,255,.72)}
.select-hero-panel,.select-roster-panel{border-color:rgba(255,250,224,.82);box-shadow:0 30px 64px rgba(21,65,73,.23),0 8px 20px rgba(25,70,76,.10),inset 0 1px 0 rgba(255,255,255,.82)}
.select-hero-panel{background:linear-gradient(145deg,rgba(250,255,246,.42),rgba(239,249,225,.18) 45%,rgba(var(--select-accent-rgb),.15));}
.select-hero-panel:before{background:linear-gradient(116deg,rgba(255,247,210,.32) 0 18%,transparent 35%),radial-gradient(circle at 39% 32%,rgba(255,255,245,.70),transparent 33%),linear-gradient(180deg,transparent 48%,rgba(22,57,63,.72) 100%)}
.select-hero-panel:after{left:7%;right:7%;bottom:23%;height:29%;background:radial-gradient(ellipse,rgba(var(--select-accent-rgb),.36),rgba(255,232,174,.10) 35%,transparent 70%);filter:blur(10px);opacity:.74}
.select-hero-rings span{border-color:rgba(255,248,213,.62);box-shadow:0 0 34px rgba(255,244,201,.19),inset 0 0 28px rgba(var(--select-accent-rgb),.08)}
.select-hero-rings span+span{border-color:rgba(var(--select-accent-rgb),.42);border-style:solid;box-shadow:none}
.select-archetype{color:#ffe6a2;text-shadow:0 2px 9px rgba(0,0,0,.24)}.select-feature-row span{background:linear-gradient(145deg,rgba(18,46,54,.40),rgba(255,255,255,.08));border-color:rgba(255,248,218,.30);box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}
.select-roster-panel{background:linear-gradient(145deg,rgba(249,255,246,.80),rgba(225,245,234,.62) 55%,rgba(255,241,207,.43));backdrop-filter:none;-webkit-backdrop-filter:none}
.select-map-panel{border-color:rgba(255,242,199,.82);background:linear-gradient(145deg,rgba(44,116,134,.94),rgba(24,70,92,.95) 58%,rgba(var(--select-accent-rgb),.70));box-shadow:0 15px 30px rgba(17,57,70,.26),inset 0 1px 0 rgba(255,255,255,.54),0 0 0 1px rgba(var(--select-accent-rgb),.10)}
.select-map-panel:before{background:radial-gradient(circle at 72% 30%,rgba(255,236,174,.40),transparent 31%),linear-gradient(180deg,rgba(179,239,241,.25),transparent 48%,rgba(7,31,46,.24))}
.select-map-live{background:rgba(7,31,43,.56);border-color:rgba(255,245,211,.26);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.char-cell{border-color:rgba(255,252,232,.84);background:linear-gradient(155deg,rgba(255,255,255,.78),rgba(var(--card-rgb),.10) 58%,rgba(40,97,94,.10));box-shadow:0 12px 24px rgba(28,78,82,.12),inset 0 1px 0 rgba(255,255,255,.90)}
.char-cell:before{inset:17% 2% 11%;background:radial-gradient(ellipse,rgba(var(--card-rgb),.28),rgba(255,255,255,.08) 48%,transparent 70%)}
.char-cell:after{display:block;content:"";position:absolute;z-index:3;left:10%;right:10%;top:0;height:2px;border-radius:99px;background:linear-gradient(90deg,transparent,rgba(var(--card-rgb),.75),transparent);opacity:.62}
.char-cell:hover{border-color:rgba(var(--card-rgb),.52);box-shadow:0 17px 31px rgba(26,74,80,.18),inset 0 1px 0 #fff}
.char-cell.selected{border-color:rgba(var(--card-rgb),.94);background:linear-gradient(150deg,rgba(255,255,255,.94),rgba(var(--card-rgb),.18) 62%,rgba(255,241,210,.26));box-shadow:0 18px 34px rgba(var(--card-rgb),.26),0 0 0 2px rgba(255,250,222,.64),inset 0 1px 0 #fff}
.char-cell.selected:after{height:3px;opacity:1;box-shadow:0 0 11px rgba(var(--card-rgb),.58)}
.char-cell .char-number{color:rgba(27,62,70,.43)}.char-cell .char-label{background:linear-gradient(145deg,rgba(255,255,255,.84),rgba(241,250,240,.66));border:1px solid rgba(255,255,255,.72);box-shadow:0 5px 12px rgba(22,67,72,.09),inset 0 1px 0 #fff}
#confirm-btn{border-color:rgba(255,250,220,.76);background:linear-gradient(125deg,var(--select-accent),#f79a55 72%,#ffd078);box-shadow:0 15px 30px rgba(var(--select-accent-rgb),.33),inset 0 1px 0 rgba(255,255,255,.58)}
@media(min-width:1100px){
  .select-cinematic-shell{width:min(1360px,calc(100% - 48px));gap:clamp(15px,1.8vh,23px);padding-top:clamp(18px,2.5vh,32px)}
  .select-cinematic-header{min-height:58px}.select-quality-chip{margin-right:145px}
  .select-cinematic-main{grid-template-columns:minmax(520px,1.12fr) minmax(500px,.88fr);gap:clamp(16px,1.7vw,24px)}
  .select-roster-panel{padding:clamp(17px,1.7vw,23px);gap:clamp(10px,1.45vh,15px)}
  .select-roster-top{display:grid;grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:8px;min-height:163px}
  .select-roster-heading{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-end;padding:0 3px;min-height:38px}
  .select-roster-title{gap:2px}.select-roster-heading strong{font-size:clamp(19px,1.55vw,23px)}
  .select-roster-count{display:flex;align-items:baseline;gap:3px;margin:0;padding:5px 9px 4px;border-radius:12px;background:rgba(255,255,255,.38);border:1px solid rgba(255,255,255,.62);box-shadow:inset 0 1px 0 rgba(255,255,255,.64)}
  .select-roster-count b{font-size:20px}
  .select-map-panel{height:auto;min-height:115px;border-radius:19px}.select-map-viewport{inset:27px 0 0}
  .char-grid{gap:clamp(8px,.8vw,11px)}
  .select-confirm-row{padding-top:1px}.select-control-tip{padding-left:2px}#confirm-btn{min-width:268px}
}
@media(max-width:700px){.select-sky-glow{animation:none}.select-hero-panel:before{background:linear-gradient(116deg,rgba(255,247,210,.20),transparent 38%),linear-gradient(90deg,transparent 48%,rgba(22,57,63,.56) 100%)}.select-hero-panel:after{filter:blur(5px);opacity:.56}.select-roster-panel{backdrop-filter:none;-webkit-backdrop-filter:none}}

/* Optional classic arcade selector. The cabinet/map remain 2D, while character
   previews are the same live 3D fighter-costume meshes used in gameplay. */
#select-screen.select-style-classic{--arcade-gold:#ffd84a;--arcade-red:#f04b32;--arcade-blue:#182b67;background:radial-gradient(circle at 50% 12%,rgba(255,153,55,.34),transparent 30%),linear-gradient(180deg,#210b3d 0%,#57133f 28%,#b3343c 58%,#f08539 100%);color:#fff}
#select-screen.select-style-classic:before{background:repeating-linear-gradient(180deg,rgba(255,255,255,.025) 0 1px,rgba(0,0,0,.035) 1px 3px),radial-gradient(ellipse at 50% 118%,rgba(255,210,91,.50),transparent 48%),linear-gradient(90deg,rgba(6,10,35,.42),transparent 22% 78%,rgba(6,10,35,.42))}
#select-screen.select-style-classic:after{background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 45%,rgba(22,4,34,.18));box-shadow:inset 0 0 145px rgba(10,4,28,.58)}
.select-style-classic .select-sky-glow,.select-style-classic .select-hero-rings,.select-style-classic .select-map-viewport,.select-style-classic .select-map-live{display:none}
.select-style-classic .select-cinematic-shell{z-index:auto}
.select-style-classic .select-cinematic-header{color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.42)}
.select-style-classic .select-brand-mark{background:linear-gradient(145deg,#fff39a,#ffb22f 53%,#e74332);border:3px solid var(--arcade-gold);border-radius:10px;box-shadow:4px 4px 0 #32103d,0 0 20px rgba(255,216,74,.42)}
.select-style-classic .select-brand-mark span{color:#7c1739;text-shadow:1px 1px 0 #fff4a8}
.select-style-classic .select-header-copy h1{color:var(--arcade-gold);font-style:italic;letter-spacing:.08em;text-transform:uppercase;text-shadow:3px 3px 0 #8e1e38,6px 6px 0 rgba(17,7,36,.72)}
.select-style-classic .select-header-copy p{color:rgba(255,244,199,.82);text-shadow:0 2px 0 rgba(0,0,0,.28)}
.select-style-classic .select-kicker{color:#ffad5a;text-shadow:0 2px 0 #5e1238}
.select-style-classic .select-quality-chip{background:rgba(24,23,76,.72);border:2px solid var(--arcade-gold);color:#fff1aa;box-shadow:3px 3px 0 rgba(34,8,47,.66)}
.select-style-classic .select-quality-chip i{background:#ff784f;box-shadow:0 0 0 4px rgba(255,120,79,.18)}
.select-style-classic .select-hero-panel,.select-style-classic .select-roster-panel{border:3px solid var(--arcade-gold);border-radius:12px;background:linear-gradient(150deg,rgba(19,32,93,.96),rgba(58,18,75,.94) 58%,rgba(132,31,59,.92));box-shadow:6px 7px 0 rgba(25,7,43,.72),0 0 24px rgba(255,216,74,.22),inset 0 0 0 2px rgba(255,255,255,.10)}
.select-style-classic .select-hero-panel:before{background:radial-gradient(circle at 50% 34%,rgba(95,143,231,.34),transparent 38%),repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 2px,transparent 2px 7px),linear-gradient(180deg,transparent 48%,rgba(17,7,40,.92) 100%)}
.select-style-classic .select-hero-panel:after{left:7%;right:7%;bottom:24%;height:20%;background:radial-gradient(ellipse,rgba(255,201,67,.32),transparent 70%);filter:blur(7px)}
.select-style-classic .select-classic-portrait{display:none}
.select-style-classic .select-hero-copy{left:24px;right:24px;bottom:18px;padding:11px 14px 10px;border-left:5px solid var(--arcade-red);background:linear-gradient(90deg,rgba(15,10,47,.88),rgba(60,14,57,.58),transparent);text-shadow:2px 2px 0 rgba(0,0,0,.58)}
.select-style-classic .select-archetype{color:#ffb35d;letter-spacing:.16em}.select-style-classic .select-archetype:before{background:var(--arcade-gold);box-shadow:0 0 9px var(--arcade-gold)}
.select-style-classic .sf2-char-name{color:var(--arcade-gold);font-style:italic;text-transform:uppercase;letter-spacing:.08em;text-shadow:3px 3px 0 #bd2f39,5px 5px 0 rgba(8,5,29,.72)}
.select-style-classic .select-hero-copy p,.select-style-classic .select-feature-row{display:none}
.select-style-classic .select-roster-panel{background:linear-gradient(150deg,rgba(16,34,91,.97),rgba(47,18,77,.96) 55%,rgba(86,21,64,.95));backdrop-filter:none}
.select-style-classic .select-roster-heading small{color:#ffcc57;text-shadow:1px 2px 0 #671739}
.select-style-classic .select-roster-count,.select-style-classic .select-style-toggle{background:#111d55;border:2px solid var(--arcade-gold);border-radius:7px;box-shadow:3px 3px 0 rgba(15,5,35,.62)}
.select-style-classic .select-roster-count{color:#fff0aa}.select-style-classic .select-roster-count b{color:#ff654f}
.select-style-classic .select-style-btn{color:#cabde0}.select-style-classic .select-style-btn.active{background:linear-gradient(135deg,#e43d3d,#ff9b37);color:#fff8ae;box-shadow:inset 0 0 0 1px rgba(255,238,142,.46)}
.select-style-classic .select-map-panel{height:clamp(130px,19vh,180px);border:3px solid var(--arcade-gold);border-radius:7px;background:#101d55;box-shadow:4px 5px 0 rgba(15,5,35,.62),inset 0 0 0 2px rgba(255,255,255,.08)}
.select-style-classic .select-map-panel:before{background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 40%,rgba(10,6,40,.18))}.select-style-classic .select-map-panel:after{box-shadow:inset 0 0 22px rgba(4,7,31,.48)}
.select-style-classic .select-classic-map{display:block;position:absolute;z-index:1;inset:0;width:100%;height:100%;image-rendering:auto}
.select-style-classic .select-map-caption{color:#fff5b3;text-shadow:2px 2px 0 #16113e}.select-style-classic .select-map-caption span{color:#ffbe62}
.select-style-classic .char-grid{gap:7px}
.select-style-classic .char-cell{border:2px solid rgba(255,201,70,.38);border-radius:7px;background:linear-gradient(145deg,#1b2b69,#351b63 65%,#671f58);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),3px 3px 0 rgba(12,6,35,.48);transition:border-color .12s,box-shadow .12s,background .12s}
.select-style-classic .char-cell:before{inset:5%;border-radius:5px;background:radial-gradient(circle,rgba(var(--card-rgb),.28),transparent 66%)}
.select-style-classic .char-cell:after{display:block;left:8%;right:8%;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--arcade-gold),transparent)}
.select-style-classic .char-cell:hover{border-color:#ffbd47;background:linear-gradient(145deg,#263c86,#55216c);box-shadow:0 0 13px rgba(255,190,63,.34),3px 3px 0 rgba(12,6,35,.52)}
.select-style-classic .char-cell.selected{border-color:var(--arcade-gold);background:linear-gradient(145deg,#344da0,#771f60);box-shadow:0 0 0 2px #f0443e,0 0 18px rgba(255,216,74,.72),3px 3px 0 rgba(12,6,35,.52);animation:selectArcadePulse .9s ease-in-out infinite}
@keyframes selectArcadePulse{50%{box-shadow:0 0 0 2px #f0443e,0 0 27px rgba(255,216,74,.92),3px 3px 0 rgba(12,6,35,.52)}}
.select-style-classic .char-cell .char-icon-canvas{display:none}
.select-style-classic .char-cell .char-number{z-index:4;color:#ffe681;text-shadow:1px 1px 0 #15113f}
.select-style-classic .char-cell .char-label{z-index:5;left:4px;right:4px;bottom:4px;border:1px solid rgba(255,216,74,.62);border-radius:4px;background:rgba(13,16,60,.88);color:#fff5b2;text-shadow:1px 1px 0 #160c35;box-shadow:none;backdrop-filter:none}
.select-style-classic #confirm-btn{border:3px solid var(--arcade-gold);border-radius:8px;background:linear-gradient(180deg,#f3653e,#c42d3b);color:#fff7ae;box-shadow:4px 5px 0 rgba(18,6,39,.68),inset 0 2px 0 rgba(255,255,255,.28);text-shadow:2px 2px 0 #771631;text-transform:uppercase;font-style:italic}
.select-style-classic .select-control-tip{color:#ffe4a1}.select-style-classic .select-control-tip kbd{border-color:#ffd84a;background:#19265f;color:#fff0ad;box-shadow:2px 2px 0 #160a34}
@media(max-width:700px){
  .select-style-toggle{margin:0 4px;padding:2px;gap:2px}.select-style-btn{min-width:27px;height:21px;padding:0 5px;font-size:7px}.select-style-classic .select-roster-count{padding:3px 5px}
  .select-style-classic .select-hero-panel,.select-style-classic .select-roster-panel{border-width:2px;box-shadow:3px 4px 0 rgba(25,7,43,.65),0 0 15px rgba(255,216,74,.18)}
  .select-style-classic .select-classic-portrait{left:29%;top:8%;width:54%!important;max-height:82%;border-width:2px}
  .select-style-classic .select-hero-copy{left:58%;right:8px;bottom:50%;padding:8px 6px 8px 9px;transform:translateY(50%);border-left-width:3px}
  .select-style-classic .sf2-char-name{font-size:clamp(24px,7vw,33px)}
  .select-style-classic .select-map-panel{height:90px;border-width:2px}.select-style-classic .select-roster-top{min-height:120px}
  .select-style-classic .char-cell{border-radius:5px}.select-style-classic .char-cell .char-label{font-size:clamp(7px,2.15vw,10px)}
}
@media(max-width:390px),(max-height:690px){.select-style-classic .select-map-panel{height:72px}.select-style-classic .select-roster-top{min-height:98px}.select-style-classic .select-roster-title{display:none}}

/* City HUD */
#city-hud{position:absolute;top:0;left:0;right:0;padding:clamp(4px,1.5vw,10px) clamp(6px,2vw,14px);z-index:5;pointer-events:none}
.hud-top{display:flex;justify-content:flex-start;gap:clamp(3px,1vw,8px);margin-bottom:4px;padding-right:clamp(80px,25vw,140px);flex-wrap:wrap}
/* Match the global controls' 50vw reservation on phones, including longer
   Japanese population labels. Wrap the HUD rather than cover language/audio. */
@media(max-width:700px){.hud-top{padding-right:50vw}}
#chest-hud{top:var(--danbo-status-top,44px)!important}
#journey-task,#journey-feedback{top:calc(var(--danbo-status-top,44px) + 60px)!important}
.hud-pill{background:rgba(0,0,0,.5);color:#fff;padding:clamp(2px,0.8vw,5px) clamp(6px,2vw,13px);border-radius:16px;font-size:clamp(10px,2.5vw,13px);font-weight:700;backdrop-filter:blur(5px);white-space:nowrap}
.hud-desktop-only{display:none}
@media(min-width:600px){.hud-desktop-only{display:inline-block}}
.hud-btn{cursor:pointer;border:none;pointer-events:auto;transition:background .15s}
.hud-btn:hover{background:rgba(255,165,0,.6)}
.multiplayer-hud-btn.online{background:linear-gradient(135deg,rgba(22,151,119,.86),rgba(24,101,132,.86));box-shadow:0 0 0 1px rgba(169,255,224,.42),0 5px 18px rgba(6,44,56,.24)}

/* Multiplayer room — loaded with the game, while the 220 KB network SDK is
   fetched lazily only after Join. This panel is touch-safe above mobile HUD. */
.multiplayer-overlay{position:fixed;inset:0;z-index:180;display:flex;align-items:center;justify-content:center;padding:max(14px,env(safe-area-inset-top,0px)) max(14px,env(safe-area-inset-right,0px)) max(14px,env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px));box-sizing:border-box;background:radial-gradient(circle at 50% 22%,rgba(81,177,176,.24),rgba(4,12,21,.76) 64%,rgba(3,8,15,.92));backdrop-filter:blur(13px) saturate(1.08);-webkit-backdrop-filter:blur(13px) saturate(1.08);pointer-events:auto}
.multiplayer-panel{position:relative;width:min(570px,94vw);max-height:min(760px,94vh);overflow:auto;box-sizing:border-box;padding:24px;border:1px solid rgba(255,244,203,.68);border-radius:28px;color:#f5fbfa;background:linear-gradient(145deg,rgba(25,62,72,.98),rgba(16,35,51,.985) 55%,rgba(43,47,55,.98));box-shadow:0 30px 90px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.24);font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
.multiplayer-panel button,.multiplayer-panel input{font:inherit}
.multiplayer-close{position:absolute;right:14px;top:14px;width:38px;height:38px;border:1px solid rgba(255,255,255,.24);border-radius:13px;background:rgba(3,14,23,.38);color:#fff7dc;font-size:26px;line-height:32px;cursor:pointer}
.multiplayer-eyebrow{padding-right:45px;color:#8bdcca;font-size:10px;font-weight:900;letter-spacing:.19em}
.multiplayer-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-top:7px}.multiplayer-title-row h2{margin:0;color:#fff3c4;font-size:clamp(23px,5vw,31px);line-height:1.16}.multiplayer-title-row p{margin:7px 0 0;color:rgba(226,243,241,.74);font-size:12px;line-height:1.55}
.multiplayer-status{flex:0 0 auto;margin-top:4px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.19);background:rgba(7,20,30,.42);color:#cbd8da;font-size:10px;font-weight:900;white-space:nowrap}.multiplayer-status.online{border-color:rgba(110,242,191,.52);background:rgba(23,139,105,.28);color:#8ff3c8}.multiplayer-status.joining,.multiplayer-status.reconnecting{border-color:rgba(255,218,132,.52);color:#ffe19b}.multiplayer-status.error{border-color:rgba(255,123,116,.54);background:rgba(155,50,48,.22);color:#ffaaa4}
.multiplayer-summary{margin-top:16px;padding:11px 13px;border:1px solid rgba(187,230,222,.18);border-radius:14px;background:rgba(5,20,29,.32);color:rgba(228,245,241,.78);font-size:12px;line-height:1.45}.multiplayer-summary.error{border-color:rgba(255,128,119,.34);color:#ffc0bb}
.multiplayer-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.multiplayer-panel label{display:flex;flex-direction:column;gap:6px;color:rgba(218,238,236,.75);font-size:10px;font-weight:800;letter-spacing:.05em}.multiplayer-panel input{width:100%;height:42px;box-sizing:border-box;border:1px solid rgba(255,244,206,.28);border-radius:13px;outline:none;background:rgba(4,16,25,.48);color:#fff8dc;padding:0 12px;font-size:14px;font-weight:750}.multiplayer-panel input:focus{border-color:#8cddca;box-shadow:0 0 0 3px rgba(96,214,190,.13)}
.multiplayer-actions{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:8px;margin-top:12px}.multiplayer-actions button,.multiplayer-room-tools button{min-height:43px;padding:8px 10px;border:1px solid rgba(255,245,211,.25);border-radius:14px;background:rgba(225,240,232,.10);color:#eef9f6;font-size:11px;font-weight:900;cursor:pointer}.multiplayer-actions button:hover,.multiplayer-room-tools button:hover{background:rgba(225,240,232,.18)}.multiplayer-actions .multiplayer-primary{border-color:rgba(255,231,154,.55);background:linear-gradient(135deg,#e59243,#d5643e);color:#fff7d2;box-shadow:0 8px 21px rgba(119,54,26,.25)}.multiplayer-actions button:disabled,.multiplayer-room-tools button:disabled{opacity:.42;cursor:not-allowed}
.multiplayer-room-tools{display:flex;justify-content:flex-end;gap:8px;margin-top:9px}.multiplayer-room-tools button{min-height:34px;padding:6px 12px;background:rgba(5,17,27,.28)}
.multiplayer-roster{margin-top:15px;padding:13px 14px;border:1px solid rgba(255,244,205,.18);border-radius:17px;background:rgba(5,18,27,.27)}.multiplayer-roster-title{display:flex;justify-content:space-between;color:#fff0bd;font-size:12px;font-weight:900}.multiplayer-roster-title small{color:rgba(211,233,231,.55);font-size:9px}.multiplayer-roster ul{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;margin:10px 0 0;padding:0;list-style:none}.multiplayer-roster li{display:grid;grid-template-columns:8px minmax(0,1fr) auto;align-items:center;gap:7px;min-width:0;color:#edf7f5;font-size:11px}.multiplayer-roster li i{width:7px;height:7px;border-radius:50%;background:#66e0af;box-shadow:0 0 8px rgba(102,224,175,.65)}.multiplayer-roster li i.away{background:#9aa9ad;box-shadow:none}.multiplayer-roster li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800}.multiplayer-roster li small{max-width:108px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:rgba(207,228,227,.55);font-size:8px}
.multiplayer-advanced{margin-top:13px;border-top:1px solid rgba(255,255,255,.11);padding-top:11px;color:rgba(214,233,232,.68)}.multiplayer-advanced summary{cursor:pointer;font-size:10px;font-weight:850}.multiplayer-advanced label{margin-top:10px}.multiplayer-advanced p{margin:8px 2px 0;font-size:9px;line-height:1.5;color:rgba(211,228,228,.5)}
@media(max-width:700px){.multiplayer-overlay{align-items:flex-end;padding:8px max(8px,env(safe-area-inset-right,0px)) max(8px,env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px))}.multiplayer-panel{width:100%;max-height:88dvh;padding:18px 15px 16px;border-radius:24px}.multiplayer-title-row{display:block;padding-right:34px}.multiplayer-status{display:inline-block;margin-top:10px}.multiplayer-fields{grid-template-columns:1fr 1fr}.multiplayer-actions{grid-template-columns:1fr 1fr}.multiplayer-actions .multiplayer-primary{grid-column:1/-1}.multiplayer-roster ul{grid-template-columns:1fr}.multiplayer-close{right:10px;top:10px}.multiplayer-hud-btn{order:3}}
@media(max-width:390px){.multiplayer-fields{grid-template-columns:1fr}.multiplayer-panel{max-height:91dvh}.multiplayer-title-row h2{font-size:22px}}

/* Race HUD */
#race-hud{position:absolute;top:0;left:0;right:0;padding:10px 14px;z-index:5;pointer-events:none}
.hud-progress{display:flex;justify-content:center}
.pbar-bg{width:min(340px,60vw);height:8px;background:rgba(255,255,255,.12);border-radius:4px;position:relative}
.pbar-fill{height:100%;background:linear-gradient(90deg,#FFD700,#FF6B6B);border-radius:4px;width:0%;transition:width .3s}
.pbar-flag{position:absolute;right:-14px;top:-9px;font-size:14px}

/* Round screen — Mario Maker style */
#round-screen{background:transparent}
.round-card{text-align:center;animation:roundSlideIn 0.6s ease-out}
@keyframes roundSlideIn{0%{transform:translateY(-60px) scale(0.8);opacity:0}100%{transform:translateY(0) scale(1);opacity:1}}
.round-label{color:rgba(255,255,255,.7);font-size:clamp(13px,3vw,18px);letter-spacing:6px;text-transform:uppercase;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.round-card h2{font-size:clamp(28px,7vw,48px);color:#FFD700;margin:8px 0;text-shadow:3px 3px 0 rgba(0,0,0,.5),0 0 20px rgba(255,215,0,.4);letter-spacing:3px;animation:titleGlow 1.5s ease-in-out infinite}
@keyframes titleGlow{0%,100%{text-shadow:3px 3px 0 rgba(0,0,0,.5),0 0 20px rgba(255,215,0,.3)}50%{text-shadow:3px 3px 0 rgba(0,0,0,.5),0 0 40px rgba(255,215,0,.6)}}
.round-desc{color:rgba(255,255,255,.8);font-size:clamp(12px,3vw,16px);letter-spacing:2px}
.player-count{color:#FFD700;font-size:clamp(16px,4vw,22px);margin:12px 0;font-weight:700}
.countdown{font-size:clamp(48px,15vw,80px);color:#FFD700;font-weight:900;margin-top:14px;text-shadow:0 0 30px rgba(255,215,0,.5),4px 4px 0 rgba(0,0,0,.4);animation:countPop .6s ease-in-out infinite}
@keyframes countPop{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}

/* Result */
#result-screen{background:rgba(0,0,0,.5);backdrop-filter:blur(8px)}
.result-card{background:linear-gradient(150deg,#667eea,#764ba2);border-radius:22px;padding:28px 36px;text-align:center;box-shadow:0 14px 40px rgba(0,0,0,.4);max-width:340px;width:86vw}
.result-emoji{font-size:50px;margin-bottom:6px}
.result-card h2{font-size:28px;color:#fff;margin-bottom:10px}
.result-sub{color:rgba(255,255,255,.8);margin-bottom:14px;font-size:13px}

/* Touch */
#touch-controls{position:absolute;bottom:0;left:0;right:0;height:40vh;z-index:6;pointer-events:none;--nav-offset:54px}
#joystick-area{position:absolute;left:12px;bottom:var(--nav-offset);width:110px;height:110px;pointer-events:auto}
#joystick-base{width:96px;height:96px;border-radius:50%;background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.18);position:relative;display:flex;align-items:center;justify-content:center}
#joystick-knob{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.3);position:absolute}
.touch-jump{position:absolute;right:14px;bottom:var(--nav-offset);width:54px;height:54px;border-radius:50%;background:rgba(255,215,0,.3);border:2px solid rgba(255,215,0,.45);color:#fff;font-size:15px;font-weight:700;pointer-events:auto;cursor:pointer}
.touch-grab{position:absolute;right:78px;bottom:var(--nav-offset);width:54px;height:54px;border-radius:50%;background:rgba(255,100,100,.3);border:2px solid rgba(255,100,100,.45);color:#fff;font-size:15px;font-weight:700;pointer-events:auto;cursor:pointer}
.touch-sprint{position:absolute;right:78px;bottom:calc(var(--nav-offset) + 62px);width:46px;height:46px;border-radius:50%;background:rgba(100,200,255,.3);border:2px solid rgba(100,200,255,.45);color:#fff;font-size:15px;font-weight:700;pointer-events:auto;cursor:pointer}
.touch-sprint.active{background:rgba(100,255,100,.4);border-color:rgba(100,255,100,.6)}
.touch-grab.holding{background:rgba(100,200,255,.4);border-color:rgba(100,200,255,.6)}
.touch-punch{position:absolute;right:78px;bottom:calc(var(--nav-offset) + 62px);width:46px;height:46px;border-radius:50%;background:rgba(255,150,50,.3);border:2px solid rgba(255,150,50,.45);color:#fff;font-size:14px;font-weight:700;pointer-events:auto;cursor:pointer}
.touch-kick{position:absolute;right:14px;bottom:calc(var(--nav-offset) + 62px);width:46px;height:46px;border-radius:50%;background:rgba(50,200,150,.3);border:2px solid rgba(50,200,150,.45);color:#fff;font-size:14px;font-weight:700;pointer-events:auto;cursor:pointer}
.touch-chat{position:absolute;right:46px;bottom:calc(var(--nav-offset) + 116px);width:36px;height:36px;border-radius:50%;background:rgba(100,200,255,.3);border:2px solid rgba(100,200,255,.45);color:#fff;font-size:16px;pointer-events:auto;cursor:pointer}
.touch-tps{position:absolute;right:142px;bottom:calc(var(--nav-offset) + 62px);width:46px;height:46px;border-radius:50%;background:rgba(100,100,220,.35);border:2px solid rgba(130,130,255,.5);color:#fff;font-size:16px;font-weight:700;pointer-events:auto;cursor:pointer}
.touch-tps-re{position:absolute;right:142px;bottom:var(--nav-offset);width:54px;height:54px;border-radius:50%;background:rgba(80,200,100,.35);border:2px solid rgba(120,230,140,.5);color:#fff;font-size:16px;font-weight:700;pointer-events:auto;cursor:pointer}

/* SOTN area name reveal */
.area-name-overlay{position:absolute;inset:0;z-index:15;display:flex;align-items:center;justify-content:center;pointer-events:none}
.area-name-text{font-family:'Times New Roman','Georgia','SimSun','MS Mincho',serif;font-size:clamp(28px,6vw,52px);color:rgba(255,255,255,0);letter-spacing:8px;font-weight:400;text-shadow:0 0 20px rgba(200,180,255,0),2px 2px 0 rgba(0,0,0,0);white-space:nowrap;transform:translateX(40px);animation:sotnReveal 3.5s ease-out forwards}
@keyframes sotnReveal{0%{color:rgba(255,255,255,0);text-shadow:0 0 20px rgba(200,180,255,0),2px 2px 0 rgba(0,0,0,0);transform:translateX(40px)}12%{color:rgba(255,255,255,0.95);text-shadow:0 0 30px rgba(200,180,255,0.6),2px 2px 0 rgba(0,0,0,0.5);transform:translateX(0)}65%{color:rgba(255,255,255,0.95);text-shadow:0 0 30px rgba(200,180,255,0.6),2px 2px 0 rgba(0,0,0,0.5);transform:translateX(0)}100%{color:rgba(255,255,255,0);text-shadow:0 0 20px rgba(200,180,255,0),2px 2px 0 rgba(0,0,0,0);transform:translateX(-30px)}}
/* Cinematic adventure check-in map */
#worldmap-overlay{position:fixed;inset:0;z-index:140;display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box;background:radial-gradient(circle at 50% 35%,rgba(76,126,139,.28),rgba(11,19,31,.82) 58%,rgba(7,11,20,.94));backdrop-filter:blur(10px) saturate(1.08);-webkit-backdrop-filter:blur(10px) saturate(1.08)}
.worldmap-panel{--wm-accent:#f2c46d;position:relative;width:min(920px,94vw);max-height:92vh;box-sizing:border-box;padding:22px;border-radius:32px;overflow:auto;color:#f8fbf7;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;background:linear-gradient(145deg,rgba(32,66,76,.97),rgba(21,43,57,.98) 46%,rgba(43,55,64,.98));border:1px solid rgba(255,246,211,.72);box-shadow:0 34px 90px rgba(3,11,18,.56),0 8px 24px rgba(6,18,27,.34),inset 0 1px 0 rgba(255,255,255,.28);isolation:isolate}
.worldmap-panel:before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at 18% 0,rgba(166,232,225,.19),transparent 34%),radial-gradient(circle at 88% 14%,rgba(255,211,127,.14),transparent 29%),linear-gradient(120deg,transparent 58%,rgba(255,255,255,.035))}
.worldmap-header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;margin:0 2px 14px}
.worldmap-eyebrow{font-size:10px;font-weight:900;letter-spacing:.22em;color:#a7d8d6;text-transform:uppercase;margin-bottom:4px}
.worldmap-title{font-size:clamp(23px,3vw,34px);font-weight:950;line-height:1.08;letter-spacing:.02em;color:#fff7dc;text-shadow:0 3px 12px rgba(0,0,0,.26)}
.worldmap-subline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;font-size:12px;color:rgba(232,246,245,.76)}
.worldmap-location{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;background:rgba(11,27,38,.38);border:1px solid rgba(255,244,207,.24);color:#fff1c6;font-weight:850}
.worldmap-progress{min-width:146px;padding:10px 13px;border-radius:17px;background:linear-gradient(145deg,rgba(255,245,211,.16),rgba(10,28,39,.24));border:1px solid rgba(255,242,197,.34);box-shadow:inset 0 1px 0 rgba(255,255,255,.15)}
.worldmap-progress-top{display:flex;justify-content:space-between;align-items:center;font-size:9px;font-weight:900;letter-spacing:.12em;color:rgba(224,243,240,.72)}
.worldmap-progress-value{font-size:19px;color:#ffe39d;letter-spacing:.03em}
.worldmap-progress-track{height:6px;margin-top:6px;border-radius:99px;background:rgba(5,18,27,.48);overflow:hidden}.worldmap-progress-fill{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#71d6c2,#ffe091);box-shadow:0 0 13px rgba(255,218,126,.45)}
.worldmap-canvas-shell{position:relative;width:100%;aspect-ratio:1.52;border-radius:24px;overflow:hidden;background:#74b9ca;border:1px solid rgba(255,248,218,.62);box-shadow:0 18px 34px rgba(6,21,30,.36),inset 0 1px 0 rgba(255,255,255,.42)}
#worldmap-canvas{width:100%;height:100%;display:block}.worldmap-canvas-shell:after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 42px rgba(8,28,38,.22),inset 0 1px 0 rgba(255,255,255,.35)}
.worldmap-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:12px 4px 0;color:rgba(221,239,238,.70);font-size:11px}
.worldmap-station-route{display:block;width:100%;min-height:44px;margin:0 0 10px;padding:10px 14px;box-sizing:border-box;border:1px solid #f6b9d3;border-radius:14px;background:linear-gradient(110deg,#68455f,#334c60);color:#fff5fa;font:800 14px/1.35 system-ui,sans-serif;text-align:center;cursor:pointer;touch-action:manipulation}
.worldmap-station-route:disabled{opacity:.45;cursor:default}.worldmap-station-route:focus-visible{outline:3px solid #ffe296;outline-offset:2px}
.worldmap-legend{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.worldmap-legend span{display:inline-flex;align-items:center;gap:5px}.worldmap-legend i{width:8px;height:8px;border-radius:50%;background:#fff1c2;box-shadow:0 0 8px rgba(255,226,143,.7)}.worldmap-legend span+span i{background:#78d8c4}.worldmap-legend span+span+span i{background:#8b9ca4;box-shadow:none}
.worldmap-close{position:absolute;right:16px;top:16px;z-index:4;width:36px;height:36px;border:1px solid rgba(255,246,215,.36);border-radius:12px;background:rgba(6,20,29,.34);color:#fff5d6;font-size:20px;line-height:32px;text-align:center;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.12);transition:.2s transform,.2s background}.worldmap-close:hover{transform:scale(1.06);background:rgba(255,231,165,.18)}
@media(max-width:700px){#worldmap-overlay{padding:10px}.worldmap-panel{width:96vw;max-height:95vh;padding:13px;border-radius:23px}.worldmap-header{grid-template-columns:1fr;gap:8px;margin-bottom:9px;padding-right:36px}.worldmap-title{font-size:21px}.worldmap-eyebrow{font-size:7px}.worldmap-subline{font-size:9px;margin-top:5px}.worldmap-progress{min-width:0;padding:7px 10px}.worldmap-progress-top{font-size:7px}.worldmap-progress-value{font-size:14px}.worldmap-canvas-shell{aspect-ratio:.84;border-radius:18px}.worldmap-footer{font-size:8px;margin-top:8px}.worldmap-legend{gap:7px}.worldmap-close{right:10px;top:10px;width:31px;height:31px;line-height:27px;border-radius:10px}}

/* Four-shard browser: keep all rows scrollable above the entry button on phones. */
.account-overlay{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:max(14px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom));background:rgba(3,15,24,.8);backdrop-filter:blur(12px);touch-action:pan-y;overflow-y:auto}
.account-overlay.hidden{display:none}
.account-card{position:relative;width:min(460px,100%);max-height:calc(100dvh - 40px);overflow-y:auto;overscroll-behavior:contain;padding:28px;border:1px solid #498d91;border-radius:24px;background:linear-gradient(145deg,#173b48,#0b1f2b);color:#eeffff;box-shadow:0 20px 70px #0008;text-align:left}
.account-card [hidden]{display:none!important}.account-card>small{color:#7de9cf;letter-spacing:.18em;font-weight:800}.account-card h2{font-size:26px;margin:8px 0 14px}.account-card p{font-size:13px;line-height:1.65;margin:10px 0;overflow-wrap:anywhere}
.account-card label{display:grid;gap:7px;margin:13px 0;font-size:13px;color:#cae5e4}.account-card input{width:100%;min-width:0;padding:12px 13px;background:#081e29;border:1px solid #427078;border-radius:12px;color:#fff;font-size:16px;touch-action:manipulation;user-select:text;-webkit-user-select:text}
.account-card input:focus{outline:2px solid #71e7c9;outline-offset:1px}.account-card button{cursor:pointer;touch-action:manipulation}.account-card button:disabled{opacity:.5;cursor:wait}
.account-tabs{display:flex;gap:8px}.account-tabs button,.account-guest{padding:11px;border-radius:12px;border:1px solid #55818b;background:#163441;color:#ceeeee;font-size:14px}.account-tabs button[aria-selected=true]{border-color:#7cebd0;color:#7cebd0;background:#23565b}
.account-primary{width:100%;padding:14px;border:0;border-radius:13px;background:linear-gradient(110deg,#7be5c9,#49b8c2);color:#092932;font-size:16px;font-weight:800;margin-top:8px}.account-guest{width:100%;margin-top:10px}.account-close{position:absolute;right:14px;top:10px;border:0;background:transparent;font-size:28px;color:#d9eeee}.account-hint{color:#a1bec4}.account-error{color:#ffb6ad;min-height:1em}
@media(max-height:550px){.account-overlay{align-items:flex-start}.account-card{padding:18px;max-height:calc(100dvh - 28px)}}
/* Entry/account language controls live inside the modal, outside its scrolling form. */
#account-overlay,#character-name-overlay{padding:14px;padding-top:max(14px,env(safe-area-inset-top));padding-bottom:max(14px,env(safe-area-inset-bottom));overflow:hidden}
.account-shell{width:min(420px,100%);max-height:calc(var(--account-viewport-height,100dvh) - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom));display:flex;flex-direction:column;min-height:0;border:1px solid #498d91;border-radius:24px;background:linear-gradient(145deg,#173b48,#0b1f2b);box-shadow:0 20px 70px #0008;color:#eeffff}
.account-shell [hidden]{display:none!important}.account-toolbar{display:flex;align-items:center;gap:8px;flex-shrink:0;padding:12px 14px 8px;min-height:60px}
.account-language{margin-left:auto;display:flex;align-items:center;gap:5px;border:1px solid #537980;border-radius:12px;padding:0 8px;background:#143642;color:#e4ffff;font-size:16px;min-height:44px}
.account-language select{background:transparent;color:inherit;border:0;font-size:14px;min-height:44px;max-width:145px;cursor:pointer;touch-action:manipulation;user-select:auto;-webkit-user-select:auto}.account-language option{background:#143642;color:#fff}
.account-language select:focus-visible,.account-toolbar button:focus-visible{outline:2px solid #7be5c9;outline-offset:2px}
.account-back,.account-dismiss{background:transparent;color:#d6eeee;border:0;cursor:pointer;touch-action:manipulation;min-height:44px;font-size:14px;padding:8px}.account-dismiss{font-size:27px;width:38px;padding:0}
.account-content{border:0;background:transparent;box-shadow:none;border-radius:0 0 24px 24px;max-height:none;width:100%;min-height:0;padding:10px 24px 24px;flex:1 1 auto;overflow-y:auto}
.account-content h2{font-size:25px;line-height:1.35;margin:4px 0 18px}.account-content p:empty{display:none}.account-content .account-error{font-size:13px;min-height:0;margin:10px 0}
.account-content.is-welcome{text-align:center;padding:24px 28px 32px}.account-brand{color:#7be5c9;font-size:36px;font-weight:900;letter-spacing:.16em;margin:0 0 12px .16em}.account-content.is-welcome h2{font-size:22px;font-weight:600;margin:0 0 28px}.account-welcome button{min-height:52px;font-size:17px}
.account-switch{text-align:center;margin-top:16px}.account-switch button{border:0;background:transparent;color:#8de0d3;font-size:13px;min-height:44px;padding:8px;text-decoration:underline;text-underline-offset:4px}.account-details{font-size:12px;color:#a1bec4;margin-top:5px}.account-details summary{cursor:pointer;padding:8px 0}.account-details p{font-size:12px;line-height:1.65}
.journey-settings{margin-top:16px;border-top:1px solid #45737b;padding-top:12px}.journey-settings summary{cursor:pointer;color:#aadbd4;padding:8px 0}
.intro-start{position:absolute;top:55%;left:50%;transform:translate(-50%,-50%);z-index:2;max-width:85%;min-height:48px;padding:10px 20px;border:0;background:transparent;color:#fff;font:700 22px/1.5 "Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;cursor:pointer;touch-action:manipulation;animation:intro-start-pulse 1.6s ease-in-out infinite}.intro-start:focus-visible{outline:2px solid #ffd700;outline-offset:4px;animation:none}#intro-start[hidden],#intro-ui[hidden]{display:none!important}@keyframes intro-start-pulse{50%{opacity:.5}}@media(prefers-reduced-motion:reduce){.intro-start{animation:none}}
.start-actions{display:flex;flex-direction:column;width:min(280px,78vw);gap:10px;margin:auto}.start-actions .btn{width:100%;font-size:18px;min-height:48px;padding:10px 22px;letter-spacing:1px}.start-register{background:#133844dd;border:1px solid #83c4c3;color:#d8ffff}.start-actions .btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media(max-height:550px){.account-content{padding:4px 18px 18px}.account-toolbar{padding-top:5px;padding-bottom:3px;min-height:50px}.account-content.is-welcome{padding-top:8px;padding-bottom:18px}.account-content.is-welcome h2{margin-bottom:16px}.account-content label{margin:8px 0}.account-brand{font-size:28px}}
.server-browser-shell{display:flex;flex-direction:column;overflow:hidden;max-height:calc(var(--danbo-vh,1dvh) * 100 - 32px)}
.server-browser-header,.server-browser-footer{flex-shrink:0}
.server-list{min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
.server-list-item{flex-shrink:0}
.server-list-item.full .server-state-dot{background:#ffd479;box-shadow:0 0 12px rgba(255,212,121,.5)}
.server-list-item.full .server-state-text{color:#ffd479}
.journey-actions button,#journey-next,#journey-conflict button{font:inherit;font-size:13px;font-weight:600;line-height:1.5;border:1px solid #82c9c050;border-radius:12px;padding:12px 14px;background:#244a59;color:#edfffb}.journey-actions .account-primary{background:linear-gradient(120deg,#6ed7bc,#47b9c5);color:#123441}.journey-actions button:focus-visible{outline:2px solid #ffd886;outline-offset:3px}@media(max-width:480px){.journey-actions button{flex-basis:100%!important;min-height:44px!important;margin:0!important;font-size:14px!important}.journey-card{padding:22px!important}.journey-card p{font-size:13px}.journey-card h2{font-size:25px}}
.server-list-item:focus-visible{outline:2px solid #72efc1;outline-offset:-3px}
.journey-card{max-width:540px}.journey-card p{line-height:1.6}.journey-actions{display:flex;gap:8px;flex-wrap:wrap}.journey-actions button{flex:1;min-width:140px;min-height:44px}.journey-check{display:flex!important;align-items:center;gap:9px;font-size:12px;line-height:1.6;margin:14px 0}.journey-check[hidden]{display:none!important}.journey-check input{width:18px!important;min-width:18px;height:18px;margin:0;accent-color:#35b69f}.journey-card button{cursor:pointer}.journey-card [hidden],.journey-actions[hidden]{display:none!important}#journey-card{width:100%;height:auto;border-radius:18px;margin:10px 0}#journey-message{color:#ffd886}#journey-status{color:#88e5c6}#journey-task,#journey-feedback{position:absolute;z-index:6;left:10px;top:104px;max-width:min(290px,53vw);border:1px solid #ffdc9270;background:#123342dd;color:#ffe3a7;border-radius:12px;padding:9px 12px;text-align:left;line-height:1.5;font-size:12px;cursor:pointer}#journey-task[hidden]{display:none}
@media(max-width:700px){.server-list-item{grid-template-columns:auto minmax(0,1fr) auto;min-height:88px}.server-ping{display:none}.server-state-text{grid-column:2/-1}.server-main-copy strong{font-size:16px}}

.coop-card{margin:16px 0;padding:14px;border:1px solid #75cebc55;border-radius:16px;background:#16414d}.coop-card h3{color:#8ce9d2;margin:0 0 8px}.coop-card #coop-status{color:#ffe0a0;font-weight:700}.coop-card #coop-note{color:#8ce9d2}
.coop-steps{padding-left:1.4em;font-size:13px;line-height:1.6}.coop-steps li+li{margin-top:6px}#coop-title:focus-visible{outline:2px solid #ffd886;outline-offset:3px}#coop-card{scroll-margin:12px}#journey-task,#journey-feedback{white-space:pre-line}
/* Keep dismissal available after the task scrolls directly to the rules. */
#journey-close{position:sticky;top:0;right:0;float:right;z-index:2;width:36px;height:36px;border-radius:10px;background:#153746}#coop-title{padding-right:30px}
.character-resume-card h2{font-size:21px;color:#9bc7c5}.character-resume-card #character-resume-name{font-size:clamp(24px,6vw,34px);font-weight:800;overflow-wrap:anywhere;margin:20px 0 5px}.character-resume-card #character-resume-hero{margin:0 0 24px}.character-resume-card button{min-height:48px}

/* Pickup notices replace the task slot and never capture game input. */
#journey-feedback{pointer-events:none;user-select:none;font-weight:700;color:#fff1b7;border-color:#ffe18c;background:#173744f0;box-shadow:0 0 12px #ffd66b28}
#journey-feedback[hidden]{display:none}

.journey-fold{margin-top:12px;border-top:1px solid #7fa8af45;padding-top:12px}.journey-fold>summary{cursor:pointer;font-weight:600;min-height:32px}.journey-card #journey-continue{width:100%;min-height:46px;margin:6px 0}.journey-card #journey-objectives{font-size:16px;color:#fff}.journey-card #journey-reward{font-size:13px;color:#ffe1a0}.journey-card #journey-card-name{font-size:14px;font-weight:500;margin:8px 0;color:#9dc6cd}
/* A paged HUD card, never a scrollbox or a modal. Menus remain above it. */
.journey-popover{position:absolute;z-index:5;left:10px;top:calc(var(--danbo-status-top,44px) + 60px);width:min(290px,53vw);max-height:max(48px,min(230px,calc(var(--danbo-vh,1dvh) * 100 - var(--danbo-status-top,44px) - 60px - max(185px,30dvh))));pointer-events:none;background:none;backdrop-filter:none}
.journey-popover.hidden{display:none}
.journey-popover>.journey-card[hidden]{display:none!important}
.journey-frame{pointer-events:auto;box-sizing:border-box;padding:10px;display:grid;grid-template-rows:24px 28px minmax(0,1fr) 26px;gap:5px;border:1px solid #c4efdc88;border-radius:18px;background:linear-gradient(145deg,#153c48f5,#18303ef5);color:#effff7;box-shadow:0 5px 16px #071b2429;overflow:clip;font-size:12px;line-height:1.45}
.journey-frame header,.journey-frame nav,.journey-frame footer{display:flex;align-items:center;gap:6px;justify-content:space-between;min-width:0}
.journey-frame header strong{font-size:13px;white-space:nowrap}
.journey-frame button{font:inherit;cursor:pointer;touch-action:manipulation;color:inherit;border:1px solid #c4efdc33;border-radius:10px;background:#537b7c38;min-width:28px;min-height:24px;padding:3px 7px}
.journey-frame button:hover,.journey-frame button[aria-pressed=true]{background:#73d7c9;color:#173943}
.journey-frame button:focus-visible{outline:2px solid #ffe3a7;outline-offset:1px}
.journey-frame button:disabled{opacity:.3;cursor:default}
.journey-frame nav button{flex:1;font-size:16px;line-height:20px;padding:1px 4px}
.journey-frame .journey-dismiss{border:0;background:none;font-size:22px;padding:0}
.journey-page-body{min-height:0;overflow:clip;display:flex;flex-direction:column;gap:6px;align-items:stretch}
.journey-page-body>*{flex-shrink:0;margin:0;box-sizing:border-box}
.journey-page-body p{font-size:12px;line-height:1.45;color:#d5eee5;overflow-wrap:anywhere}
.journey-page-body button{padding:5px 8px;line-height:1.4;background:#366966;color:#f4fffc;text-align:left}
.journey-page-body img{object-fit:contain;width:100%;min-height:0}
.journey-page-body label{display:flex;align-items:center;gap:8px}
.journey-frame footer{font-size:10px;color:#abd5d1}
.journey-frame footer button{min-width:32px;font-size:20px;line-height:18px}
.danbo-nav-focus{outline:3px solid #ffe5a0!important;outline-offset:3px;box-shadow:0 0 0 5px #153746aa!important}
.danbo-controller-keyboard{position:fixed;z-index:120;bottom:max(8px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(440px,96vw);padding:10px;box-sizing:border-box;background:#173b48f5;color:#edfff7;border:1px solid #a1d8cd;border-radius:16px;box-shadow:0 4px 18px #0005}
.danbo-controller-keyboard output{display:block;min-height:22px;margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:14px sans-serif}
.danbo-keyboard-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px}
.danbo-controller-keyboard button{font:16px sans-serif;color:inherit;min-height:30px;padding:4px 0;border:1px solid #85b6af70;border-radius:6px;background:#365d65;cursor:pointer;touch-action:manipulation}
.danbo-controller-keyboard footer{display:flex;gap:6px;margin-top:7px}.danbo-controller-keyboard footer button{flex:1}
@media(max-height:440px){.danbo-controller-keyboard{width:min(620px,94vw);padding:6px}.danbo-keyboard-grid{grid-template-columns:repeat(14,minmax(0,1fr));gap:4px}.danbo-controller-keyboard button{min-height:24px;font-size:13px;padding:2px 0}.danbo-controller-keyboard output{min-height:17px;margin-bottom:4px}}
@media(max-height:520px){.journey-frame{padding:6px;grid-template-rows:22px minmax(0,1fr) 22px;gap:3px}.journey-frame nav{position:absolute;left:80px;right:38px;top:7px}.journey-frame nav button{min-width:24px;min-height:20px;font-size:13px;line-height:16px}.journey-frame header strong{font-size:10px;max-width:68px;overflow:hidden}.journey-frame footer button{min-height:20px}}
.journey-popover .journey-card h2{font-size:14px;margin:0 28px 8px 0;line-height:1.5}
.journey-popover #journey-card-name{display:none}
.journey-popover .journey-card #journey-objectives{font-size:12px;margin:6px 0}
.journey-popover .journey-card #journey-reward{font-size:11px;margin:6px 0}
.journey-popover .journey-card p,.journey-popover .journey-fold{font-size:12px;line-height:1.5}
.journey-popover .account-close{right:5px;top:2px;font-size:24px;min-width:30px;min-height:30px}
.journey-popover .journey-card #journey-continue{padding:6px;min-height:32px;font-size:12px;margin:2px 0}
.journey-popover .journey-fold{margin-top:6px;padding-top:6px}
.journey-popover .journey-fold>summary{min-height:28px}
.journey-popover .coop-card{padding:0;border:0;background:none;margin:8px 0}
.journey-popover .journey-actions button{min-width:0;padding:7px;font-size:12px!important}

/* Cinematic playback owns the viewport; it never leaves a hidden game running. */
.opening-overlay{position:fixed;inset:0;z-index:20000;background:#07101d;display:flex;align-items:center;justify-content:center;isolation:isolate;overscroll-behavior:none}
.opening-overlay.hidden{display:none}
.opening-overlay video{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.opening-message{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;pointer-events:none;color:#fff5df;text-shadow:0 2px 8px #000;font:600 15px/1.5 system-ui,sans-serif}
.opening-message p:empty{display:none}
.opening-overlay button{pointer-events:auto;min-height:44px;padding:11px 19px;border:1px solid #e1edd477;border-radius:24px;background:#142c3de8;color:#fff5df;font:600 15px/1.4 system-ui,sans-serif;cursor:pointer;touch-action:manipulation}
.opening-overlay button:focus-visible,.opening-overlay button.danbo-nav-focus{outline:3px solid #ffd68c;outline-offset:4px}
.opening-actions{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));display:flex;gap:10px;align-items:center}
.opening-playing #sound-controls,.opening-playing #touch-controls{visibility:hidden!important}
/* Story pages belong to pre-entry, never the live HUD. No 3D textures, blur,
   animation loop, timed reading, or downloads on the game's critical path. */
.story-overlay{position:absolute;inset:0;z-index:18;display:flex;align-items:center;justify-content:center;padding:76px max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));background:#0e222b;color:#fff2d7}
.story-overlay.hidden{display:none}
.story-book{width:min(1120px,100%);height:min(720px,100%);min-height:0;display:grid;grid-template-columns:minmax(0,1.65fr) minmax(260px,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:20px 32px}
.story-header{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:8px;color:#a9d4ce;font:600 13px/1.4 system-ui,sans-serif}
.story-picture{grid-row:2/4;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:22px;background:#19353e}
.story-picture img{display:block;width:100%;height:100%;min-height:0;object-fit:contain}
.story-picture img[hidden],#story-image-error[hidden]{display:none}
#story-image-error{padding:24px;text-align:center;font:16px/1.6 system-ui,sans-serif;color:#d6e8e2}
.story-caption{align-self:center;min-width:0;font:400 clamp(16px,1.8vw,20px)/1.8 system-ui,sans-serif}
.story-caption h2{font-size:clamp(24px,3vw,38px);line-height:1.3;margin:0 0 20px;color:#ffe0a1;font-weight:750}
.story-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}
.story-overlay button{min-height:44px;border:1px solid #648c91;border-radius:22px;padding:10px 16px;background:transparent;color:#e0ede7;font:600 14px/1.4 system-ui,sans-serif;cursor:pointer;touch-action:manipulation}
#story-next{background:#ffd88a;border-color:#ffd88a;color:#14313b;flex:1;max-width:280px}
.story-overlay button:disabled{opacity:.3;cursor:default}
.story-overlay button:focus-visible,.story-overlay button.danbo-nav-focus{outline:3px solid #7ee4da;outline-offset:3px}
.story-playing #touch-controls{visibility:hidden!important}
@media(max-width:700px) and (orientation:portrait){
 .story-book{height:100%;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;gap:14px}
 .story-picture{grid-row:auto;border-radius:16px}.story-caption{font-size:16px;line-height:1.65}.story-caption h2{font-size:25px;margin:0 0 8px}
 .story-overlay{padding-top:76px}.story-header{font-size:12px}.story-overlay button{font-size:14px;padding:10px 14px}
}
@media(max-height:480px) and (orientation:landscape){
 .story-overlay{padding-top:56px;padding-bottom:10px}.story-book{gap:8px 20px;grid-template-columns:minmax(0,1.15fr) minmax(260px,1fr)}
 .story-caption{font-size:14px;line-height:1.55}.story-caption h2{font-size:22px;margin-bottom:8px}.story-header{font-size:12px}.story-overlay button{padding:8px 12px;font-size:13px}
}
@media(max-height:570px) and (orientation:portrait){
 .story-overlay{padding-top:64px;padding-bottom:8px}.story-book{gap:8px}.story-caption{font-size:14px;line-height:1.45}.story-caption h2{font-size:21px;margin-bottom:5px}
}
@media(max-width:700px) and (min-height:571px) and (orientation:portrait){.story-picture img{object-fit:cover;object-position:50% 60%}}
@media(max-width:480px){.opening-overlay button{font-size:14px;padding:10px 16px}.opening-message{font-size:14px}.opening-actions{right:max(12px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom))}}