/* v14 components. Layout and touch safe areas are in mobile.css. */
#game,#world{position:absolute;inset:0;width:100%;height:100%}#world{display:block;touch-action:none}.vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 100px #112c3618}
.overlay{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:#132d45a6;backdrop-filter:blur(4px)}
.primary{background:linear-gradient(#ffc96b,#ffb74b);border-color:#e4a13a;box-shadow:0 3px 0 #cb862a,inset 0 1px 0 #fff4ce;color:#3e2d17;font-size:var(--fs-title);font-weight:800;display:flex;align-items:center;justify-content:center;gap:14px;width:100%}.secondary{background:#e8eff6;border-color:#d2dee8;width:100%}.chip-button{white-space:nowrap;background:#eef4f8}.square{display:grid;place-items:center;padding:7px}
@media(hover:hover){.primary:enabled:hover{background:#ffd184;border-color:#d69b3b}.hero-card:enabled:hover,.card:enabled:hover{border-color:var(--ui-teal);background:#f2fbf8}}
.eyebrow{font-size:var(--fs-cap);line-height:1.5;font-weight:700;letter-spacing:.8px;color:var(--ui-muted);display:flex;align-items:center;gap:8px}.eyebrow em{font-size:var(--fs-nano);font-style:normal;background:#e1eee9;border-radius:5px;padding:2px 5px;color:#256e65}.centered{justify-content:center}.footnote{font-size:var(--fs-cap);line-height:1.7;color:var(--ui-muted)}
.dialog,.event-dialog,.book-wrap{background:var(--ui-paper);border:1px solid #ffffffb3;border-radius:20px;box-shadow:0 12px 36px #102b4233;padding:20px 24px;overflow:auto;text-align:center}.dialog{width:min(620px,92vw)}.dialog h2,.event-dialog h2{font-size:26px;margin:5px 0 10px}.dialog>p,.event-dialog>p,.book-wrap>p{font-size:var(--fs-body);line-height:1.65;color:var(--ui-muted);margin:7px 0 12px}/* Dialog buttons used to carry their own 8px top margin; the explicit
   action rows below own the spacing so a grid gap is not doubled. */
.dialog .primary,.dialog .secondary{margin-top:0}.book-wrap{width:min(980px,96vw);text-align:left}.event-dialog{width:min(760px,94vw)}
.loadout-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.loadout-top h2{font-size:var(--fs-display);line-height:1.2;margin:0}.loadout-top .chip-button{font-size:var(--fs-body)}
/* Camp welcome screen. */
#intro{background:#0a1520f2;backdrop-filter:blur(2px)}
#intro::before{
 content:'';position:absolute;inset:0;pointer-events:none;
 background:url('./assets/splash-v1.png') center/cover no-repeat;
 opacity:.55;
}
#intro .intro-card{position:relative;z-index:1}.intro-card{width:min(710px,94vw);display:grid;grid-template-columns:1fr 1fr;gap:8px 28px;padding:25px 30px;background:#f4f8fcf5;border:1px solid #ffffffd9;border-radius:24px;box-shadow:0 15px 50px #18324738}.intro-card>.eyebrow{grid-column:1;grid-row:1}.title-en{grid-column:1;grid-row:2}.intro-card h1{grid-column:1;grid-row:3}.intro-card h2{grid-column:1;grid-row:4}.title-en{font-size:var(--fs-nano);letter-spacing:2px;color:#657c8d}.intro-card h1{font:88px/.98 var(--ui-logo);letter-spacing:4px;margin:0;color:#203d50;text-shadow:0 3px #fff}.intro-card h1 span{color:#168e88}.intro-card h2{font-size:var(--fs-display);margin:0}.intro-copy{grid-column:1;grid-row:5/7;font-size:var(--fs-body);line-height:1.8;margin:0;color:var(--ui-muted)}.intro-tags{grid-column:1;grid-row:8;align-self:end;display:flex;gap:6px;margin:0}.intro-tags span{font-size:var(--fs-nano);color:#396b74;background:#e5eff3;padding:4px 7px;border-radius:6px}
.intro-card #start{grid-column:2;grid-row:2/4;align-self:center;height:56px;min-height:56px;font-size:var(--fs-display)}.intro-card #resume-run{grid-column:2}.lobby-actions{grid-column:2;grid-row:4;display:flex;gap:8px}.lobby-actions button{flex:1;font-size:var(--fs-body);display:flex;align-items:center;justify-content:center;gap:5px;padding:8px 6px}.account-status,.signin-link{grid-column:2;grid-row:5;font-size:var(--fs-cap);line-height:1.6;margin:0;color:var(--ui-muted)}.signin-link{color:#137b78}.lobby-links{grid-column:2;grid-row:6;display:flex;gap:8px}.lobby-links :is(button,a){display:grid;place-items:center;min-height:44px;padding:8px 10px;text-decoration:none;font-size:var(--fs-body);background:#e5f2ef;color:#176f69;border:1px solid #c5ded8;border-radius:10px}.start-help{grid-column:2;grid-row:7;font-size:var(--fs-cap);line-height:1.7;color:var(--ui-muted)}.intro-card>.footnote{grid-column:2;grid-row:8;margin:0;font-size:var(--fs-nano)}
/* Full-screen loadout: top and footer never scroll away. */
#loadout{z-index:35;background:#173b49b3}.loadout-wrap{display:flex;flex-direction:column;width:100%;height:100%;background:var(--ui-paper);overflow:hidden}.loadout-wrap>.loadout-top{background:var(--ui-navy);color:white;padding:5px 14px;min-height:52px;flex-shrink:0}.loadout-wrap>.loadout-top .eyebrow{color:#b8cdd9;font-size:var(--fs-nano)}.loadout-wrap>.loadout-top h2{font-size:var(--fs-display)}.loadout-wrap>.loadout-top .chip-button{color:white;background:#ffffff13;border-color:#ffffff26;box-shadow:none}
#chapter-picker{display:flex;gap:8px;flex-shrink:0;padding:0}#chapter-picker button{display:flex;align-items:center;gap:7px;background:#ffffff10;color:#e5f0f8;border-color:#ffffff20;padding:6px 12px;font-size:var(--fs-body);min-height:44px}#chapter-picker small{font-size:var(--fs-nano);opacity:.9}#chapter-picker .game-icon{width:24px;height:24px}
.prebattle-layout{display:grid;grid-template-columns:42% minmax(0,1fr);gap:12px;flex:1;min-height:0;overflow:hidden;padding:10px 14px}.selected-hero,.prebattle-roster{min-width:0;min-height:0;background:#fff;border:1px solid var(--ui-soft-line);border-radius:16px;padding:12px;overflow:auto;box-shadow:0 2px 7px #153b4e06}
.chosen-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid #e8eef3;padding-bottom:7px}.chosen-heading .eyebrow{font-size:var(--fs-nano);color:#168e88}.chosen-heading h3{font-size:28px;margin:1px 0;line-height:1.2}.chosen-heading b{font-size:var(--fs-cap);color:#39737b}.chosen-heading canvas{width:70px;height:70px;image-rendering:pixelated;background:#e8f4f4;border-radius:16px;flex-shrink:0}.hero-story{font-size:var(--fs-cap);color:var(--ui-muted);margin:7px 0;line-height:1.5}.hero-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:8px 0}.hero-stats>div{text-align:center;background:#f0f5fa;border-radius:9px;padding:5px 2px}.hero-stats span{display:block;font-size:var(--fs-nano);color:var(--ui-muted)}.hero-stats strong{display:block;font-size:var(--fs-title);font-variant-numeric:tabular-nums;margin-top:2px}
.hero-skills{display:grid;gap:5px}.hero-skills article{display:flex;gap:8px;align-items:center;background:#f6f9fc;border-radius:10px;padding:7px}.hero-skills article>span{display:grid;place-items:center;min-width:32px;flex-shrink:0;font-size:var(--fs-nano);color:#397b80;font-weight:800}.hero-skills b{display:block;font-size:var(--fs-body);line-height:1.5}.hero-skills small{display:block;font-size:var(--fs-cap);line-height:1.5;color:var(--ui-muted)}.hero-skills em{font-size:var(--fs-nano);font-style:normal;font-weight:600;color:#168e88;white-space:nowrap}.hero-skills .game-icon{width:30px;height:30px}.hero-access{background:#e9f6f1;color:#256d5d;border-radius:8px;padding:7px 9px;font-size:var(--fs-cap);line-height:1.5;margin-top:8px}
.roster-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}.roster-heading h3{font-size:var(--fs-title);margin:0}.roster-heading p{display:none}#roster-count{font-size:var(--fs-nano);font-weight:700;color:#287b72;background:#e7f5f0;border-radius:7px;padding:4px 6px;white-space:nowrap}.hero-grid,.collection-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.hero-card{position:relative;background:#eff4f9;border:1px solid #d8e3eb;border-radius:12px;padding:18px 5px 7px;text-align:center;overflow:hidden;color:var(--ui-ink)}.hero-card canvas{display:block;width:58px;height:58px;max-width:100%;margin:0 auto 2px;image-rendering:pixelated}.hero-card b{display:block;font-size:var(--fs-title);font-weight:800}.hero-card small{display:block;font-size:var(--fs-nano);color:var(--ui-muted);margin-top:2px}.hero-card em{display:block;font-size:var(--fs-nano);color:#327f73;font-style:normal;margin-top:4px;line-height:1.4}.hero-card p{font-size:var(--fs-cap);line-height:1.7;margin:7px 0}.hero-card span{font-size:var(--fs-nano)}.hero-card.selected{border:2px solid var(--ui-teal);padding:17px 4px 6px;background:#e8f6f1;box-shadow:0 2px 0 #d0e5df}.hero-card.selected::after{content:'✓';position:absolute;top:5px;right:5px;border-radius:50%;width:17px;height:17px;background:var(--ui-teal);color:white;font-size:var(--fs-cap);line-height:17px}.hero-card.locked:not(.selected)::after{content:'';position:absolute;right:7px;top:6px;width:13px;height:16px;background:url('./assets/icons/lock.svg') center/contain no-repeat;opacity:.7}.roster-tier{position:absolute;top:5px;left:5px;font-size:var(--fs-nano)!important;line-height:1.4;background:#dbe9ee;color:#496b7b;border-radius:4px;padding:1px 4px}.solo-note{font-size:var(--fs-cap);line-height:1.65;color:var(--ui-muted);padding-top:10px}.solo-note p{margin:4px 0}.solo-note small{font-size:var(--fs-nano)}
#launch-row{display:flex;gap:12px;align-items:center;flex-shrink:0;background:#fff;border-top:1px solid var(--ui-line);padding:8px 14px 10px;min-height:62px}.practice-options{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.practice-options label,.practice-options span{display:none}.practice-options select{width:100%;min-width:0;background:#f1f5f9;font-size:var(--fs-title)}#loadout-confirm{flex:1.55;width:auto;min-height:44px;font-size:var(--fs-title)}#loadout-error{font-size:var(--fs-body);color:var(--ui-danger);text-align:center;margin:0;padding:6px}#loadout-error:empty{display:none}
/* Lightweight HUD surfaces. */
.hero-panel{display:flex;align-items:center;gap:8px;padding:7px}.avatar{width:50px;height:50px;border:2px solid #fff;background:#c7e8e3;border-radius:50%;overflow:hidden;flex-shrink:0}.avatar canvas{width:100%;height:100%;image-rendering:pixelated}.hero-info{min-width:0;flex:1}.hero-line{display:flex;gap:6px;align-items:center}.hero-line strong{font-size:var(--fs-nano);font-weight:800;margin-left:auto;color:#347a78;background:#e1f0ec;border-radius:5px;padding:2px 4px}#hero-title{display:none}.hp-track{height:13px;position:relative;background:#c9d8e0;border:1px solid #9cbdbb;border-radius:8px;overflow:hidden;margin:4px 0}.hp-track i{display:block;height:100%;background:linear-gradient(#5cda97,#24a86b);transition:width .15s}.hp-track span{position:absolute;inset:0;text-align:center;color:#123d30;font-size:var(--fs-cap);font-weight:800;line-height:12px}.xp-track{height:4px;background:#dce6ee;border-radius:5px;overflow:hidden}.xp-track i{display:block;height:100%;background:#3eace2}#insight{display:block;font-size:var(--fs-nano);line-height:14px;color:#5c7184}
.timer{display:flex;gap:7px;align-items:center;justify-content:center;padding:4px 9px;background:#203d50ed;color:#fff;border:1px solid #ffffff6b;border-radius:12px}#timer{font-size:var(--fs-display);font-weight:800;font-variant-numeric:tabular-nums;line-height:26px;order:-1}#phase{font-size:var(--fs-cap);max-width:84px}.timer>small{display:none}.kills{display:flex;align-items:center;gap:7px;padding:4px 9px;border-radius:9px}.kills>span,.kills>small{font-size:var(--fs-cap);color:#506a7c}.kills>b{font-size:var(--fs-title);font-weight:800;color:#a36316}.kills>small{margin-left:auto}#card-count{display:none}
#chapter-hud{background:#f7fbfff0;border:1px solid #fff;border-radius:14px;padding:6px 16px;text-align:center;box-shadow:0 3px 12px #173e5520}#chapter-name{display:block;font-size:var(--fs-title);line-height:22px}#region-pips{position:absolute;right:-10px;top:8px;display:flex;flex-direction:column;gap:4px}#region-pips i{width:7px;height:7px;border:1px solid #e8f3f3;border-radius:50%;background:#6e8895}
#map-panel{border:3px solid #f7fbff;border-radius:50%;overflow:hidden;background:#193a36;box-shadow:0 3px 12px #173e5540;cursor:pointer}#mini-map{display:block;width:100%;height:100%;border:0;border-radius:50%}#mobile-toolbar button,#pause-btn{background:#f7fbfff2;border:1px solid #fff;border-radius:13px;box-shadow:0 3px 10px #173e5528;padding:6px;display:grid;place-items:center}#pause-btn .game-icon,#mobile-toolbar .game-icon{width:29px;height:29px}
.actions{display:flex;gap:14px;align-items:flex-end}.ability{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;border:3px solid #dff8ff;border-radius:50%;background:linear-gradient(145deg,#65d6f1,#46afe4);box-shadow:0 4px 0 #194d7273,inset 0 2px 0 #ffffff80;color:#173041;padding:5px;overflow:hidden;touch-action:none}.ability b{font-size:var(--fs-cap);line-height:14px;white-space:nowrap;z-index:2;margin:0;font-weight:700;text-shadow:none}.ability small{font-size:var(--fs-nano);line-height:12px;z-index:3;font-weight:800}.ability-mark{width:38px;height:38px;font-size:0;z-index:2;flex-shrink:0}.ability-mark .game-icon{width:100%;height:100%}.ultimate .ability-mark{width:50px;height:50px}.ability>i{position:absolute;inset:0;background:#1e354774;transform-origin:bottom;pointer-events:none}.ability.ready .ability-mark{animation:ready-pulse 1.6s ease-in-out infinite}@keyframes ready-pulse{50%{transform:scale(1.07)}}
.objective{background:#203d50e8;color:#fff;border:1px solid #ffffff45;border-radius:9px;text-align:center;padding:5px 9px;pointer-events:none}.objective b{font-size:var(--fs-cap);line-height:15px;font-weight:600}.objective .diamond,.objective #objective-text{display:none}
.skill-slot{position:relative;display:grid;place-items:center;width:56px;height:56px;min-width:0;background:#f7fbfff2;border:2px solid white;border-radius:13px;box-shadow:0 3px 9px #173e552b;padding:4px;overflow:visible}.skill-slot>span{display:block;width:42px;height:42px}.skill-slot .game-icon{width:42px;height:42px}.skill-slot b{display:none}.skill-slot small{position:absolute;right:-4px;bottom:-4px;background:var(--ui-navy);color:white;border:1.5px solid white;border-radius:6px;padding:1px 4px;font-size:var(--fs-nano);line-height:13px;z-index:3}.skill-slot em{position:absolute;inset:17px 0 auto;display:none;text-align:center;color:white;font-style:normal;font-weight:900;text-shadow:0 1px 3px #102739;font-size:var(--fs-body)}.skill-slot.cooling em{display:block}.skill-slot>i{position:absolute;left:4px;right:4px;bottom:2px;height:3px;background:var(--ui-teal);transform-origin:left;border-radius:3px}
/* Upgrade choices, NPCs, codex and settlement share this component family. */
.upgrade-wrap{text-align:center;width:min(780px,96vw);padding:10px 16px;overflow:auto;color:#fff}.upgrade-wrap h2{font-size:28px;line-height:1.3;margin:5px 0}.upgrade-wrap h2 span{color:#ffc56a;margin-left:8px}.upgrade-wrap>p{font-size:var(--fs-cap);line-height:1.5;color:#d7e7f3;margin:0 0 12px}.upgrade-wrap>small{display:block;font-size:var(--fs-nano);color:#c9dce9;margin-top:10px}
#cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}#cards.four-cards{grid-template-columns:repeat(4,minmax(0,1fr))}.card{position:relative;display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:14px;background:#f7fbff;border:2px solid #e7f2fa;border-radius:17px;box-shadow:0 5px 0 #0c273a50;min-height:210px;overflow:hidden}.card-key{display:none}.card-icon{display:grid;place-items:center;width:54px;height:54px;margin:0 0 9px;border-radius:14px;background:#e4f3ef}.card-icon .game-icon{width:48px;height:48px}.card-tag{position:absolute;right:10px;top:14px;font-size:var(--fs-nano);color:#277b73;font-weight:800;background:#e3f2ed;border-radius:6px;padding:3px 5px;max-width:calc(100% - 78px)}.card h3{font-size:var(--fs-display);line-height:1.4;margin:0 0 5px}.card p{font-size:var(--fs-body);line-height:1.6;font-weight:400;color:var(--ui-muted);margin:0 0 10px;flex:1}.card-value{display:block;width:100%;border-top:1px solid #d8e5ed;padding-top:8px;color:#196e68;font-size:var(--fs-cap);font-weight:700;line-height:1.6}.card-choose{font-size:var(--fs-cap);align-self:flex-end;color:#46677d;margin-top:6px}
#event-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.event-option{padding:12px;text-align:left;min-height:70px;border:1px solid #d2e1ea;background:#fff;border-radius:12px}.event-option b{display:flex;align-items:center;gap:6px;font-size:var(--fs-title);line-height:1.5}.event-option span{display:block;font-size:var(--fs-cap);font-weight:400;line-height:1.65;color:var(--ui-muted);margin-top:4px}.event-option .game-icon{width:31px;height:31px;flex-shrink:0}.event-info{cursor:default;background:#edf4f8}#event-close{margin-top:12px}.large-map{width:min(100%,580px);height:auto;display:block;margin:8px auto;border:1px solid #98b6c4;border-radius:14px}.large-map+#event-options,.large-map+.map-key+#event-options{display:none}
/* Key for the expanded map. Same icon files the canvas paints, so a swatch
   cannot drift from the marker it explains. */
.map-key{display:flex;flex-wrap:wrap;justify-content:center;gap:3px 14px;margin:2px 0 8px;font-size:var(--fs-cap);line-height:1.6}
.map-key>span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.map-key .game-icon{--icon-size:20px}
#result-build{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 6px;margin:7px 0}
#result-build .build-chip{padding:3px 7px;border-radius:6px}
.build-note{display:block;margin:2px 0 0;font-size:var(--fs-cap);line-height:1.5;color:var(--ui-muted);text-align:center}.build-chip{display:inline-flex;align-items:center;padding:5px 8px;font-size:var(--fs-cap);line-height:1.5;background:#e5edf5;color:#3b596e;border:1px solid #d4e0e9;border-radius:8px}.collection-grid .hero-card{padding:10px 7px}
.collection-grid .hero-card>p:last-of-type{display:none}
.collection-grid .hero-card p{line-height:1.55;margin:4px 0 0}
.collection-grid .hero-card small{margin-top:1px}.collection-grid canvas{width:75px;height:75px}
.nickname-editor{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0;font-size:var(--fs-body)}.nickname-editor input{width:210px}.nickname-editor span{font-size:var(--fs-cap);color:#8d5421}#nickname-message:empty{display:none}#ranking-body{overflow:auto;border:1px solid #d8e3ec;border-radius:12px;background:#fff}#ranking-body:not(:has(table)){padding:20px;font-size:var(--fs-body);color:var(--ui-muted)}table{width:100%;border-collapse:collapse;text-align:left;font-size:var(--fs-body)}th{padding:10px;background:#e8f1f7;color:#436175}td{padding:10px;border-bottom:1px solid #e4ecf2}td small{display:block;font-size:var(--fs-nano);color:var(--ui-muted);margin-top:3px}td:nth-child(3){font-weight:800;font-variant-numeric:tabular-nums}tbody tr:nth-child(-n+3) td:first-child{color:#a26b19;font-weight:800}
.result-grid{display:grid;grid-template-columns:repeat(3,1fr);background:#e8eff6;border-radius:12px;padding:9px 0;margin:10px 0}.result-grid span{display:block;font-size:var(--fs-cap);color:var(--ui-muted)}.result-grid b{display:block;font-size:24px;font-variant-numeric:tabular-nums;margin-top:3px}.result-score{background:#fff0d3;border:1px solid #f0d3a1;border-radius:12px;padding:10px;display:flex;justify-content:center;align-items:center;gap:16px}.result-score span{font-size:var(--fs-body);color:#795a2e}.result-score strong{font-size:30px;color:#92581d;font-variant-numeric:tabular-nums}.result-dialog{display:flex;flex-direction:column;padding:16px 22px;overflow:hidden}.result-content{min-height:0;overflow:auto;touch-action:pan-y}.result-actions{display:flex;flex-wrap:wrap;gap:8px;padding-top:10px;flex-shrink:0}.result-dialog .result-actions button{flex:1;min-width:120px;width:auto;margin:0}.result-dialog #result-build{margin:8px 0}.result-dialog .result-grid{padding:7px 0;margin:8px 0}.result-dialog .result-score{padding:7px}
/* Battle messages. */
#notice-feed{position:fixed;display:flex;flex-direction:column;gap:5px;align-items:flex-start;pointer-events:none;z-index:19;line-height:1.45;max-width:236px}.notice{display:flex;align-items:center;gap:6px;max-width:100%;padding:5px 10px 5px 9px;background:linear-gradient(90deg,#0e1a2ba6,#0e1a2b70 72%,#0e1a2b00);border-left:3px solid #3fb6a8;border-radius:4px 10px 10px 4px;color:#f4efe3;font-size:var(--fs-cap);box-shadow:0 3px 10px #06101c33;animation:notice-in .18s ease-out}.notice span{overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;max-height:2.9em}.notice em{font-style:normal;font-size:var(--fs-nano);font-weight:800;color:#0e1a2b;background:#e8c26a;border-radius:7px;padding:0 5px;line-height:14px;flex-shrink:0}.notice.important{border-left-color:#e8c26a;font-size:var(--fs-body);font-weight:700;color:#ffe7a3}@keyframes notice-in{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}#boundary-warning{position:fixed;left:50%;transform:translateX(-50%);text-align:center;pointer-events:none;font-size:var(--fs-body);background:#b64249;color:#fff;border:1px solid #ffc3a5;border-radius:9px;padding:6px 12px;max-width:50vw;z-index:19}
#interact-prompt{display:flex;align-items:center;gap:7px;background:#ffc967;color:#49331d;border:2px solid #fff0c7;border-radius:14px;box-shadow:0 3px 0 #b57b3b80;text-align:left;z-index:15;padding:7px 9px}#interact-prompt .game-icon{width:30px;height:30px}#interact-title{font-size:var(--fs-lead);display:block}#interact-detail{font-size:var(--fs-nano);line-height:1.4;display:block;font-weight:500}
#elite-health i{display:block;height:100%;background:#f08778;border-radius:5px}
/* Elite entrance: a manga panel rather than a notification. The field freezes
   while it is up, so the portrait, two brush characters and one shouted line
   carry the whole beat. */
/* The delivered comic plate sits under the portrait and copy, dimmed so the
   white type keeps its contrast on every phone brightness. */
.elite-intro{
 position:fixed;inset:0;z-index:16;display:grid;place-items:center;padding:0;
 background:
  linear-gradient(180deg,#05070bd9,#05070bf2 58%,#05070bfa),
  url(./assets/ui/elite-intro-bg-v1.png) center/cover no-repeat,
  radial-gradient(ellipse at 50% 42%,#1b2230f2,#05070bfa 72%);
 color:#fff;pointer-events:auto;overflow:hidden;
}
.elite-intro::after{
 content:'';position:absolute;inset:0;pointer-events:none;
 background:repeating-linear-gradient(115deg,#ffffff08 0 2px,transparent 2px 7px);
 mix-blend-mode:screen;
}
.elite-ink{
 position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;
 padding:0 clamp(8px,4vw,64px);pointer-events:none;
}
.elite-ink>span{
 font:clamp(90px,26vh,260px)/.82 var(--ui-logo);color:#0b0d12;
 -webkit-text-stroke:clamp(2px,.6vh,6px) #f2ece0;
 opacity:.9;letter-spacing:-.02em;
 transform:scale(1.04) rotate(-4deg);
}
.elite-ink>span+span{transform:scale(1.04) rotate(4deg)}
.elite-panel{
 position:relative;z-index:1;display:grid;justify-items:center;gap:clamp(2px,.8vh,8px);
 width:min(92vw,620px);padding:clamp(8px,2vh,24px);
 text-align:center;
}
#elite-portrait{
 display:block;height:clamp(140px,44vh,420px);width:auto;max-width:100%;
 filter:drop-shadow(0 12px 28px #000000cc);
 object-fit:contain;object-position:bottom;
}
#elite-portrait.hidden{display:none}
.elite-plate{display:grid;justify-items:center;gap:clamp(0px,.3vh,3px)}
.elite-intro .elite-plate>span{
 font-size:clamp(9px,1.6vh,12px);letter-spacing:.34em;color:var(--v18-gold);
 padding:2px 10px;border:1px solid #e8c26a55;border-radius:999px;background:#0e1a2bcc;
}
.elite-intro .elite-plate>b{
 font:clamp(30px,6.6vh,58px)/1.05 var(--ui-logo);letter-spacing:.14em;
 color:#fff6e2;text-shadow:0 3px 0 #000,0 10px 26px #000000d9;
}
.elite-intro .elite-plate>small{
 font-size:clamp(9px,1.7vh,13px);color:#c7d6e2;letter-spacing:.12em;
}
.elite-shout{
 margin:clamp(2px,.8vh,10px) 0 0;font:clamp(17px,3.4vh,30px)/1.3 var(--ui-logo);
 letter-spacing:.16em;color:#ffe7a3;
 text-shadow:0 2px 0 #000,0 8px 20px #000000b3;
}
.elite-lore{
 margin:0;max-width:44ch;font-size:clamp(10px,1.9vh,14px);line-height:1.7;
 color:#a9b7c6;letter-spacing:.06em;
}
.elite-intro .primary{
 margin-top:clamp(4px,1.4vh,16px);min-height:clamp(40px,7vh,56px);
 min-width:clamp(140px,34vw,220px);width:auto;
}
/* One staggered reveal, played once per entrance. */
.elite-intro.spent #elite-portrait{animation:elite-rise .42s cubic-bezier(.2,.9,.2,1) both}
.elite-intro.spent .elite-plate,
.elite-intro.spent .elite-shout,
.elite-intro.spent .elite-lore,
.elite-intro.spent .primary{animation:elite-fade .36s ease-out both}
.elite-intro.spent .elite-plate{animation-delay:.1s}
.elite-intro.spent .elite-shout{animation-delay:.18s}
.elite-intro.spent .elite-lore{animation-delay:.26s}
.elite-intro.spent .primary{animation-delay:.34s}
.elite-intro.spent .elite-ink>span{animation:elite-ink .5s cubic-bezier(.2,.9,.2,1) both}
.elite-intro.spent .elite-ink>span+span{animation-delay:.08s}
@keyframes elite-rise{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}
@keyframes elite-fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes elite-ink{from{opacity:0;transform:scale(1.12) rotate(-4deg)}to{opacity:.9;transform:scale(1.04) rotate(-4deg)}}
@media(prefers-reduced-motion:reduce){
 .elite-intro.spent #elite-portrait,.elite-intro.spent .elite-plate,.elite-intro.spent .elite-shout,
 .elite-intro.spent .elite-lore,.elite-intro.spent .primary,.elite-intro.spent .elite-ink>span{animation:none}
}
#extraction-panel{background:#e4f8ef;border:1px solid #83baa2;border-radius:13px;padding:8px 12px;text-align:center;z-index:8;color:#23644c}#extraction-panel b{font-size:var(--fs-lead)}#extraction-panel>div{height:8px;background:#b7d7ca;border-radius:6px;overflow:hidden;margin:6px 0}#extraction-fill{display:block;height:100%;background:#2db582}#extraction-panel small{font-size:var(--fs-nano)}
#impact-flash{position:absolute;inset:0;background:radial-gradient(ellipse at center,#fff1c2,transparent 70%);pointer-events:none;opacity:0;z-index:9}.hurt{animation:hurt .25s}@keyframes hurt{50%{box-shadow:inset 0 0 90px #c44c5688}}
#load-status{position:absolute;inset:0;background:var(--ui-paper);z-index:40;display:flex;align-items:center;justify-content:center;gap:18px;flex-direction:column;font-size:var(--fs-title);font-weight:700}#load-status::before{content:'破阵';font:36px var(--ui-logo);color:var(--ui-teal)}#error{position:absolute;inset:12%;background:var(--ui-paper);z-index:50;padding:25px;border:2px solid var(--ui-danger);border-radius:16px;font-size:var(--fs-lead);line-height:1.8;overflow:auto}#abandon-dialog,#resume-choice{z-index:38}

.intro-card:has(#signin:not(.hidden)) #account-status{display:none}

/* Pause panel: one decision, then a tools row. The build chips that used to
   fill this dialog are gone; the same summary still runs on the result screen,
   where a player actually wants to read it. */
#game .pause-dialog{width:min(460px,92vw);padding:18px 22px 16px}
#game .pause-dialog h2{margin:2px 0 4px;font-size:24px}
#game .pause-dialog #pause-reason{margin:0 0 14px}
#game .pause-actions{display:grid;gap:10px;margin:0 0 14px}
#game .pause-actions .primary,
#game .pause-actions .secondary{width:100%;font-size:var(--fs-title)}
#game .pause-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
#game .pause-tools .chip-button{
 display:flex;align-items:center;justify-content:center;gap:6px;
 min-height:44px;font-size:var(--fs-lead);color:var(--v18-text);
}
#game .pause-tools .chip-button .game-icon{--icon-size:22px;filter:invert(1) brightness(1.4) sepia(.3) saturate(2)}
#game .pause-tools .chip-button small{font-size:var(--fs-body);letter-spacing:.06em}
#game .pause-volume{
 display:flex;align-items:center;gap:10px;justify-content:center;
 font-size:var(--fs-body);color:var(--v18-muted);margin:0 0 6px;
}
#game .pause-volume input{flex:1;max-width:220px;accent-color:var(--v18-gold)}
#game .pause-note{
 display:block;font-size:var(--fs-cap);line-height:1.6;color:#8496a8;letter-spacing:.04em;
}
@media(max-height:420px){
 #game .pause-dialog{padding:12px 18px 10px}
 #game .pause-dialog h2{font-size:var(--fs-display)}
 #game .pause-dialog #pause-reason{display:none}
 #game .pause-actions{gap:8px;margin-bottom:10px}
 #game .pause-tools .chip-button{min-height:44px;font-size:var(--fs-body)}
}

/* The expanded map now carries a nine-entry key, which pushed the dialog past
   the viewport: at 844x390 the close button sat 13px below the fold, at
   667x375 it was 50px under. The map screen compresses its own chrome and caps
   the canvas instead of scrolling, because the key and the close button have to
   be visible together. */
#event-panel:has(.large-map) .event-dialog{padding:12px 18px;gap:0}
#event-panel:has(.large-map) .event-dialog h2{margin:2px 0 4px;font-size:var(--fs-display)}
#event-panel:has(.large-map) .event-dialog>p{margin:0 0 6px;line-height:1.45}
#event-panel:has(.large-map) .eyebrow{font-size:var(--fs-nano)}
#event-panel:has(.large-map) .large-map{max-height:min(34vh,150px);width:auto;margin:4px auto 2px}
#event-panel:has(.large-map) .map-key{margin:0 0 6px;font-size:var(--fs-nano);line-height:1.4;gap:2px 10px}
#event-panel:has(.large-map) .map-key .game-icon{--icon-size:16px}
#event-panel:has(.large-map) .event-dialog .secondary{margin-top:6px;min-height:44px}