:root{color-scheme:dark;--ink:#223b3e;--paper:#f2e8d1;--gold:#f4d18b;--muted:#c6d4ce;--seat-art:36px;--seat-min:164px;font:14px "Segoe UI","Microsoft YaHei",sans-serif}
*{box-sizing:border-box}
body{margin:0;min-height:100dvh;display:flex;justify-content:center;background:#0c1c24;color:#f4eddb;padding:12px}
h1,h2,h3,p{margin:0}
small{font-size:12px;color:var(--muted)}
button,select{font:inherit}
button{display:inline-flex;align-items:center;justify-content:center;gap:5px;position:relative;min-height:44px;padding:7px 10px;background:#315657;color:#fff4da;border:6px solid transparent;border-image:var(--art-buttonSecondary) 128 stretch;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none}
button.primary,button.danger{background:#a94f45;border-image-source:var(--art-buttonPrimary);font-weight:700}
button:disabled{opacity:.5;filter:saturate(.25);cursor:default}
button:not(:disabled):active{filter:brightness(1.15)}
button:focus-visible,select:focus-visible{outline:2px solid #ffe29e;outline-offset:2px}
.button-label{display:inline-flex;gap:4px;align-items:center;justify-content:center;line-height:1.2}
.ui-icon{display:inline-block;flex:0 0 auto;width:20px;height:20px;background-image:var(--art-uiIcons);background-size:500% 400%;background-position:var(--ix) var(--iy);background-repeat:no-repeat;vertical-align:middle;pointer-events:none;font-style:normal}
.button-label .ui-icon{width:17px;height:17px}
button>.ui-icon{width:19px;height:19px}
.eyebrow{font-size:11px;letter-spacing:2px;color:#f1d39c}
#app{position:relative;isolation:isolate;width:min(100%,480px);height:calc(100dvh - 24px);max-height:1080px;display:flex;flex-direction:column;overflow:hidden;background:#142e36;border:1px solid #526e6f;border-radius:12px}
#app:before{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--scene);background-size:cover;background-position:center;opacity:.13;pointer-events:none}
.portrait{aspect-ratio:1;background-size:500% 400%;background-repeat:no-repeat;background-color:var(--paper)}
.game-header{height:64px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:7px 12px;background:#102a34;border-bottom:1px solid #536d6b;z-index:10}
.resource{display:flex;align-items:center;gap:4px}
.resource>.ui-icon{width:33px;height:33px}
.resource b{font-size:23px;color:#ffe2a1;font-variant-numeric:tabular-nums}
.resource small{font-size:11px;display:block;line-height:13px}
.header-title{text-align:center}
.header-title>b{font:22px KaiTi,STKaiti,serif;letter-spacing:3px;color:#ffe3a9}
.header-title>span{display:block;font-size:11px;color:#e2e9dd;margin-top:4px}
.header-title i{font-style:normal;color:#a8c3bb}
.header-tools{display:flex;gap:6px;align-items:center}
.tickets>.ui-icon{width:27px;height:27px}
.icon-button{background:transparent;border:0;width:38px;min-height:44px;padding:4px}
.icon-button>.ui-icon{width:27px;height:27px}
.prep-nav{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px 12px;background:#15343d;flex-shrink:0}
.prep-nav button{min-height:35px;padding:3px 8px;border-width:4px;font-size:13px}
.game-screen{min-height:0;flex:1;overflow-y:auto;overscroll-behavior:contain;padding:10px 12px 12px;scrollbar-width:thin;scrollbar-color:#8daaa0 transparent}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.section-head h2{font-size:17px;color:#fff0ce}
.section-head h2>span{font-weight:400;font-size:12px;color:#cfddd3;margin-left:5px}
.section-head>small{font-size:12px}
.tier-seal{display:flex;align-items:center;gap:5px;color:#e7e7cf;font-size:12px;background:#213e46;padding:5px 8px;border-radius:4px}
.tier-seal .ui-icon{width:18px;height:18px}
.tier-seal b{font-size:19px;color:#ffda90}
.shop-panel{padding:2px 0 12px;border-bottom:1px solid #68817b;margin-bottom:12px}
.shop-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:stretch}
.offer{position:relative;min-width:0;display:flex;flex-direction:column;gap:5px;padding:5px;background:var(--paper);color:var(--ink);border:8px solid transparent;border-image:var(--art-cardFrame) 96 stretch}
.card-inspect{display:flex;flex-direction:column;align-items:stretch;gap:4px;flex:1;min-height:0;padding:0;border:0;background:none;color:var(--ink);text-align:left;width:100%}
.card-meta{display:flex;justify-content:space-between;align-items:center;gap:3px;min-height:20px;font-size:12px}
.card-tier{display:inline-flex;align-items:center;gap:3px;color:#684e2b;white-space:nowrap}
.card-tier .ui-icon{width:17px;height:17px}
.phase-tag{display:inline-block;font-size:11px;font-weight:600;line-height:1.2;padding:3px 5px;color:#284e3f;background:#d2dfc5;border-radius:3px;white-space:nowrap}
.phase-battle{background:#ecd1ab;color:#71432c}
.phase-passive{background:#dce0d4;color:#405457}
.card-name{font-size:17px;font-weight:750;line-height:24px;text-align:center;color:#203b3d;white-space:normal}
.card-inspect>.portrait{width:72px;height:72px;max-width:100%;margin:1px auto;mix-blend-mode:multiply}
.card-skill{font-size:13px;font-weight:400;line-height:1.5;color:#243c3c;text-align:left;min-height:78px;overflow:visible;white-space:normal;overflow-wrap:anywhere;flex:1;padding:5px 2px;border-top:1px solid #bdb59e;border-bottom:1px solid #bdb59e;margin-top:3px}
.card-skill b{color:#143d40;font-weight:750}
.stats{display:flex;align-items:center;justify-content:space-between;gap:4px;font-variant-numeric:tabular-nums;min-width:0}
.stats>span{display:inline-flex;align-items:center;gap:3px;min-width:0}
.stats b{font-size:21px;line-height:25px;white-space:nowrap}
.stats .ui-icon{width:21px;height:21px}
.stats .atk{color:#264b4f}
.stats .hp{color:#9a3c32}
.card-faction{font-size:11px;color:#4e6158;text-align:center;line-height:15px}
.offer .buy-button{min-height:39px;font-size:14px;padding:4px 6px;margin-top:auto}
.offer .buy-button>.ui-icon{display:none}
.focus-badge{font-size:11px;text-align:center;background:#d9e4c8;color:#315c45;padding:2px 4px;line-height:16px}
.planned-offer{outline:2px solid #a4cfaa;outline-offset:-2px}
.sold{min-height:294px;align-items:center;justify-content:center;text-align:center;color:#61695a;background:#e7dec6}
.sold>b{font-size:18px}
.sold>p{font-size:13px;line-height:1.5}
.shop-pagination{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:7px}
.shop-pagination button{min-height:32px;width:40px;padding:3px;border-width:4px}
.shop-pagination>span{font-size:12px;color:#e8e9d5;min-width:126px;text-align:center}
.shop-controls{display:grid;grid-template-columns:1fr 1fr .8fr;gap:6px;margin-top:8px}
.shop-controls>button{font-size:13px;min-height:40px;padding:5px 4px;border-width:5px;gap:3px}
.shop-controls>button>.ui-icon{width:17px;height:17px}
.shop-controls .active{outline:2px solid #b9d9b3;outline-offset:-4px}
.shop-caption{font-size:12px;line-height:17px;color:#dddfc7;text-align:center;margin-top:7px}
.army{padding-top:2px}
.loop-board{padding:6px;background:#18343c;border:6px solid transparent;border-image:var(--art-boardFrame) 72 stretch;position:relative}
.loop-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;align-items:stretch}
.loop-tile{min-width:0;min-height:var(--seat-min);padding:0;display:flex;flex-direction:column;justify-content:flex-start;color:#f8f1de;background:#203b40;border:5px solid transparent;border-image:var(--art-seatFrame) 96 stretch;position:relative;isolation:isolate}
.tile-floor{display:grid;grid-template-columns:1fr 15px 1fr;align-items:center;gap:1px;height:26px;min-height:26px;padding:0 2px;background:#102b34;border-bottom:1px solid #526b66}
.tile-floor>span{grid-column:1;font-size:11px;color:#dbe8dd;text-align:left;white-space:nowrap}
.tile-floor>b{grid-column:3;font-size:17px;font-weight:800;color:#ffe1a0;line-height:23px;white-space:nowrap;text-align:right}
.bead.ui-icon{display:none;position:absolute;top:5px;left:calc(50% - 7px);width:14px;height:14px;z-index:4}
.landed .bead,.rolling .bead{display:block}
.loop-tile.landed,.loop-tile.rolling{outline:2px solid #f4d385;outline-offset:-2px}
.loop-tile.selected{outline:3px solid #ffe3a1;outline-offset:-3px}
.loop-tile.available{outline:2px dashed #a9d8bd;outline-offset:-3px;background-color:#2d5553}
.loop-tile.golden{outline:1px solid #edce8a;outline-offset:-3px}
.loop-return{display:flex;align-items:center;justify-content:space-between;gap:4px;min-height:23px;padding:3px 0;font-size:10px;color:#f3d49a}
.loop-return>b{font-size:11px;font-weight:400;text-align:center;color:#d5e5d5}
.minion{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;min-width:0;flex:1;padding:4px 2px;touch-action:pan-y}
.minion>.portrait{width:var(--seat-art);height:var(--seat-art);max-width:100%;aspect-ratio:1;border-radius:3px;flex-shrink:0}
.minion>strong{font-size:11.5px;font-weight:700;line-height:16px;color:#fff4da;max-width:100%;text-align:center;white-space:normal;overflow-wrap:anywhere}
.minion .stats{width:100%;gap:2px}
.minion .stats b{font-size:17px;line-height:21px}
.minion .stats .ui-icon{width:14px;height:14px}
.minion .stats>span{gap:1px}
.minion .stats .atk{color:#ffe2a0}
.minion .stats .hp{color:#ffc6b2}
.mini-phase{font-size:10px;line-height:14px;color:#d1e6d0}
.mini-phase.battle{color:#f2d3a7}
.seat-skill{font-size:11px;font-weight:400;line-height:15px;color:#f3f0dc;text-align:left;width:100%;margin-top:2px;min-height:45px;overflow-wrap:anywhere;white-space:normal}
.empty-slot{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;flex:1;min-height:110px;color:#d4e5d2}
.empty-slot>.ui-icon{width:31px;height:31px;opacity:.75}
.empty-slot small{font-size:12px;color:#d2e1d4}
.relay-dots{font-size:11px;line-height:14px;display:block;text-align:center;color:#f3cc7b;min-height:14px}
.board-caption{font-size:12px;line-height:18px;padding:7px 1px;color:#e2e4ce}
.taunt-label{position:absolute;top:2px;right:0;background:#655130;color:#ffe6ae;font-size:10px;padding:1px 2px}
.dead-label{position:absolute;top:27px;left:0;right:0;font-size:11px;line-height:20px;background:#14313ce8;color:#f2ebdc;text-align:center}
.fallen{opacity:.4;filter:grayscale(.8)}
.hand-panel{flex-shrink:0;background:#18373f;border-top:1px solid #72928a;padding:8px 12px;max-height:42dvh;overflow-y:auto;z-index:8;scrollbar-width:thin}
.hand-panel .section-head{margin-bottom:5px}
.hand-panel h2{font-size:15px}
.hand-panel .section-head>small{font-size:11px}
.hand-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:stretch}
.hand-card{min-width:0;padding:3px;background:var(--paper);color:var(--ink);border:7px solid transparent;border-image:var(--art-cardFrame) 96 stretch;text-align:left;align-items:stretch;justify-content:flex-start}
.hand-card>.minion{padding:1px;gap:2px;align-items:stretch;color:var(--ink)}
.hand-card .card-meta{font-size:11px;min-height:16px}
.hand-card .card-name{font-size:15px;line-height:20px;color:var(--ink)}
.hand-card .portrait{width:32px;height:32px;align-self:center;mix-blend-mode:multiply}
.hand-card .card-skill{font-size:12px;line-height:17px;min-height:51px;margin:2px 0;padding:4px 0}
.hand-card .stats b{font-size:18px;line-height:22px}
.hand-card .stats .atk{color:#264b4f}
.hand-card .stats .hp{color:#96382e}
.hand-card .card-faction{display:none}
.hand-card.selected{outline:3px solid #ffe6a5;outline-offset:-3px}
.golden-hand{outline:1px solid #e4bd6e;outline-offset:-3px}
.hand-empty{height:43px;max-height:none;padding:6px 12px}
.hand-empty .section-head{display:none}
.hand-empty .hand-strip{display:block}
.empty-hand{display:flex;align-items:center;justify-content:center;gap:7px;font-size:12px;color:#d6e6da;min-height:28px}
.empty-hand>.ui-icon{width:22px;height:22px}
.hand-pagination{display:flex;align-items:center;gap:6px;font-size:12px}
.hand-pagination button{width:32px;min-height:27px;padding:1px;border-width:3px}
.hand-pagination .ui-icon{width:17px;height:17px}
.action-dock{display:flex;align-items:center;gap:6px;flex-shrink:0;min-height:64px;padding:7px 10px max(7px,env(safe-area-inset-bottom));background:#102b35;border-top:1px solid #72928a;z-index:10}
.action-dock>button{flex:1;min-width:0;font-size:13px;min-height:44px;padding:6px 5px;border-width:5px;gap:3px}
.action-dock>button.primary{flex:1.8}
.action-dock>button>.ui-icon{width:18px;height:18px}
.prep-clock{min-width:62px;color:#ffe2a0;font-size:14px;text-align:center}
.prep-clock>small{display:block;font-size:11px;margin-top:2px;color:#d7e1d1}
.coach{display:flex;align-items:flex-start;gap:7px;padding:9px;margin-bottom:10px;background:#25464a;color:#fff2d4;font-size:12px;line-height:1.5;border-left:3px solid #dfbc7c}
.coach>b{white-space:nowrap;color:#ffdf9e}
.coach>small{display:none}
.fixture-note{font-size:11px;color:#e6cf9e;line-height:16px;margin-bottom:6px}
.duel-name{display:flex;justify-content:space-between;gap:6px;font-size:13px;line-height:20px;color:#ffdfa0;margin:0 0 4px}
.duel-name>b{font-size:11px;font-weight:400}
.battle-panel{position:relative}
.battle-panel>h3{display:flex;justify-content:space-between;gap:5px;font-size:12px;line-height:18px;font-weight:600;margin:5px 0}
.battle-panel h3>small{font-size:11px}
.combat-loop{--seat-art:28px;--seat-min:132px;padding:3px;border-width:4px}
.combat-loop .loop-row{gap:4px}
.combat-loop .loop-tile{border-width:4px}
.combat-loop .tile-floor{height:24px;min-height:24px;padding:0 1px}
.combat-loop .tile-floor>span{font-size:10px}
.combat-loop .tile-floor>b{font-size:16px;line-height:20px}
.combat-loop .minion{padding:3px 1px;gap:1px}
.combat-loop .minion>strong{font-size:11px;line-height:15px}
.combat-loop .minion .stats b{font-size:16px;line-height:19px}
.combat-loop .minion .stats .ui-icon{width:13px;height:13px}
.combat-loop .mini-phase{display:none}
.combat-loop .seat-skill{font-size:10.5px;line-height:13px;min-height:39px;color:#eff0da;margin-top:2px}
.combat-loop .loop-return{min-height:18px;font-size:9px;padding:1px 0}
.combat-loop .loop-return>b{font-size:10px}
.battle-divider{display:flex;gap:7px;align-items:center;background:#25444a;padding:8px;margin:6px 0;min-height:48px;border-left:2px solid #d1b172}
.battle-divider>.ui-icon{width:22px;height:22px}
.battle-divider p{font-size:12px;line-height:17px;color:#fff1d1}
.turn-status{display:flex;justify-content:space-between;align-items:center;gap:5px;font-size:11px;color:#f1d699;padding:6px 0}
.turn-status>span{font-size:10px;color:#d0ddd0}
.combat-hint{font-size:11px;line-height:16px;color:#d6e2d4;text-align:center;margin:4px 0}
.round-result{padding:15px;background:#22444a;border:1px solid #759287;text-align:center;margin:9px 0}
.round-result h2{font-size:20px;color:#ffe1a0;margin-bottom:8px}
.round-result p{font-size:13px;line-height:1.7}
.round-result small{display:block;margin-top:8px}
.attacking{outline:2px solid #ffe7a2;z-index:11}
.targeted{outline:2px solid #ffb3a1}
.attack-line{position:absolute;inset:0;z-index:20;pointer-events:none}
.attack-line svg{width:100%;height:100%;overflow:visible}
.attack-line line{stroke:#ffe1a1;stroke-width:3;stroke-dasharray:5 3}
.float{position:absolute;top:25px;right:0;z-index:28;color:#fff0ce;background:#9a382be6;padding:1px 4px;border-radius:3px;font-size:21px;font-weight:800;pointer-events:none}
.attack-actor{position:absolute;z-index:25;pointer-events:none;display:flex;background:#203b40;border:4px solid #d9bd7d;color:#fff1d1}
.attack-actor .seat-skill,.attack-actor .mini-phase{display:none}
.drag-ghost{position:fixed;z-index:9999;pointer-events:none;background:#e9dfc6;color:#263d3d;border:3px solid #dcc38e;padding:5px;box-shadow:0 4px 12px #0008}
.drag-ghost .card-skill{font-size:12px}
.drag-ghost .portrait{width:42px;height:42px;align-self:center}
.just-landed{animation:land .5s ease-out}
@keyframes land{from{box-shadow:inset 0 0 0 3px #ffe8a8}
to{box-shadow:inset 0 0 0 0 transparent}
}
.welcome{flex:1;overflow-y:auto;text-align:center;padding:24px 25px 15px}
.welcome-moon{height:61px;margin-top:9px}
.welcome-moon>.ui-icon{width:58px;height:58px}
.welcome h1{font:54px/1.15 KaiTi,STKaiti,serif;letter-spacing:9px;color:#ffe1a7;margin:12px 0}
.welcome h1>span{display:block;margin-left:24px}
.welcome-story{font-size:14px;line-height:1.8;color:#e3e9d9}
.welcome-cast{height:178px;display:flex;gap:8px;justify-content:center;align-items:center;margin:13px 0}
.welcome-cast>.portrait{width:30%;max-width:115px;border:2px solid #cfba84;border-radius:40% 40% 6px 6px}
.cast-left{transform:rotate(-7deg) translateY(10px)}
.cast-right{transform:rotate(7deg) translateY(10px)}
.home-actions{display:flex;flex-direction:column;gap:9px}
.home-actions>button{min-height:46px}
.home-links{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.home-links button{font-size:12px;min-height:44px;padding:4px;border-width:4px}
.welcome-foot{font-size:12px;line-height:18px;color:#d3dfd3;margin-top:14px}
.qa-tools{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin-top:14px;padding-top:10px;border-top:1px dashed #7d9185}
.qa-tools>b{width:100%;font-size:11px;color:#e5cb99}
.qa-tools button{font-size:11px;min-height:36px;padding:5px;border-width:4px}
.overlay{position:absolute;inset:0;z-index:50;background:#081b24d9;display:flex;align-items:flex-end;padding:8px}
.dialog{width:100%;max-height:95%;overflow-y:auto;overscroll-behavior:contain;background:#17353e;border:1px solid #8da89a;padding:15px;color:#f4eedc;box-shadow:0 -4px 20px #0005}
.close-row{display:flex;justify-content:flex-end;position:sticky;top:-15px;background:#17353e;padding:0 0 5px;z-index:2}
.close-row button{font-size:12px;min-height:37px;border-width:4px;padding:4px 8px}
.dialog h2{font-size:22px;line-height:1.4;color:#ffe2a7;margin-bottom:10px}
.dialog h3{font-size:16px;color:#f4d69c;margin:18px 0 8px}
.dialog p{font-size:14px;line-height:1.7;color:#e0e8da;margin:8px 0}
.dialog>button{margin:5px 4px 5px 0}
.dialog label{display:block;font-size:14px;margin:12px 0 6px}
.dialog select{width:100%;padding:10px;background:#23484b;border:1px solid #9db4a3;border-radius:3px;color:#f7f2e2;font-size:14px;margin-bottom:10px}
.menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:16px 0}
.menu-grid button{font-size:13px;min-height:46px}
.rule-book p{padding-bottom:9px;border-bottom:1px solid #54766e}
.faction-catalog{margin:10px 0;border-bottom:1px solid #718b7e}
.faction-catalog>summary{padding:12px 4px;list-style:none;cursor:pointer;font-size:15px;display:flex;align-items:center;gap:6px;color:#ffdfa3}
.faction-catalog>summary::-webkit-details-marker{display:none}
.faction-catalog>summary:before{content:"";width:18px;height:18px;background-image:var(--art-uiIcons);background-size:500% 400%;background-position:100% 100%}
.faction-catalog[open]>summary:before{transform:rotate(90deg)}
.catalog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:4px 0 12px}
.catalog-card{display:flex;flex-direction:column;background:var(--paper);color:var(--ink);border:7px solid transparent;border-image:var(--art-cardFrame) 96 stretch;padding:5px;min-width:0;gap:5px}
.catalog-card .portrait{width:85px;max-width:100%;align-self:center;mix-blend-mode:multiply}
.catalog-card>b{font-size:15px}
.catalog-card small{font-size:12px;color:#455c52}
.tier-stars{display:inline-flex;gap:1px;vertical-align:middle}
.tier-stars .ui-icon{width:13px;height:13px}
.detail-card{text-align:center}
.detail-card>.portrait{width:165px;max-width:70%;margin:3px auto 12px}
.detail-card>h2{font:28px KaiTi,serif;color:#ffe1a0;margin:9px 0}
.detail-card>.stats{width:210px;max-width:90%;margin:12px auto}
.detail-card .stats b{font-size:28px;line-height:32px}
.detail-card .stats .ui-icon{width:26px;height:26px}
.detail-card .atk{color:#ffe3a6}
.detail-card .hp{color:#ffc7b4}
.exact-stats{display:block;font-size:13px;line-height:1.5;color:#e5ebde}
.detail-card .detail-skill{padding:14px;background:var(--paper);color:#233e3e;font-size:16px;line-height:1.65;text-align:left;margin:13px 0}
.detail-purpose{text-align:left}
.detail-card>button{display:flex;width:100%;margin-top:12px;min-height:46px}
.detail-card>small{display:block}
.build-list{display:grid;gap:12px}
.build-list>article{padding:13px;background:#22474a;border:1px solid #668a7c}
.build-list h3{margin-top:5px}
.build-list article>span{font-size:12px;color:#f0cd91}
.build-list p{font-size:13px}
.build-list small{display:block;font-size:12px}
.build-list article button{font-size:12px;margin-top:8px;min-height:39px;padding:4px 7px;border-width:4px}
.guide-cards{display:flex;flex-wrap:wrap;gap:6px}
.guide-cards>span{font-size:12px;line-height:1.5;padding:5px;background:#244d4c;border:1px solid #6c9986}
.guide-cards .owned{border-color:#b6d7a8;background:#3b6754}
.dialog ol{font-size:14px;line-height:1.8;padding-left:22px}
.design-note{font-size:12px!important;color:#d0dece!important}
.standing-row{display:flex;align-items:center;justify-content:space-between;gap:7px;padding:12px 2px;border-bottom:1px solid #6c897b;font-size:13px}
.standing-row>span{font-size:12px}
.standing-row>strong{display:flex;align-items:center;white-space:nowrap}
.standing-row .ui-icon{width:22px;height:22px}
.logs p{padding:8px 0;border-bottom:1px solid #5d7d72;font-size:13px}
.logs small{color:#f2d08f}
.reward-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;align-items:stretch}
.reward-grid article{display:flex;flex-direction:column;gap:5px;background:var(--paper);border:7px solid transparent;border-image:var(--art-cardFrame) 96 stretch;padding:5px;color:#233d3d;min-width:0}
.reward-grid .portrait{width:80px;max-width:100%;align-self:center;mix-blend-mode:multiply}
.reward-grid article>b{font-size:15px;text-align:center}
.reward-grid article p{font-size:13px;line-height:1.5;color:#243f3e;flex:1}
.reward-grid article button{font-size:13px;min-height:40px;padding:5px;margin-top:auto}
.reward-grid article:last-child:nth-child(odd){grid-column:1/-1}
.reward-dialog{padding-top:18px}
.toast{position:absolute;top:72px;left:8%;width:84%;z-index:90;pointer-events:none;background:#f4e7c9;color:#203c3b;border:1px solid #b9b18d;border-radius:3px;padding:10px 13px;font-size:13px;line-height:1.5;text-align:center;box-shadow:0 3px 10px #0005}
.end-screen{text-align:center;padding:32px 14px}
.end-screen h1{font:35px KaiTi,serif;color:#ffe2a4}
.end-screen p{font-size:15px;line-height:1.8;margin:16px 0}
.end-screen>button{display:flex;width:100%;margin:10px 0}
.end-moon>.ui-icon{width:65px;height:65px;margin:12px}
.stats b.compact{font-size:16px}
.minion .stats b.compact{font-size:12px;letter-spacing:-.5px}
.minion .stats b.huge{font-size:11px}
.minion .stats span:has(b.compact) .ui-icon{width:10px;height:10px}
.detail-card .stats b.compact,.detail-card .stats b.huge{font-size:24px}
@media(max-width:500px){body{padding:0}
#app{width:100%;height:100dvh;max-height:none;border:0;border-radius:0}
.game-header{height:calc(64px + env(safe-area-inset-top));padding-top:max(7px,env(safe-area-inset-top))}
}
@media(max-width:370px){.game-screen{padding-left:9px;padding-right:9px}
.header-title>b{font-size:20px;letter-spacing:1px}
.header-tools{gap:1px}
.resource>.ui-icon{width:28px;height:28px}
.resource b{font-size:21px}
.card-name{font-size:16px}
.card-meta{font-size:12px}
.phase-tag{font-size:10px}
.offer{padding:3px;border-width:7px}
.card-inspect>.portrait{width:64px;height:64px}
.card-skill{font-size:13px}
.loop-row{gap:4px}
.loop-tile{border-width:4px}
.tile-floor>span{font-size:10px}
.tile-floor>b{font-size:16px}
.minion>strong{font-size:11px}
.minion .stats b{font-size:16px}
.minion .stats .ui-icon{width:12px;height:12px}
.action-dock>button{font-size:12px;padding:5px 3px;gap:2px}
.action-dock>button>.ui-icon{width:16px;height:16px}
.hand-panel{padding-left:10px;padding-right:10px}
.shop-controls>button{font-size:12px}
.shop-controls>button>.ui-icon{display:none}
}
@media(max-height:780px){.game-header{height:56px;padding-top:max(4px,env(safe-area-inset-top));padding-bottom:4px}
.prep-nav{padding-top:4px;padding-bottom:4px}
.prep-nav button{min-height:32px}
.game-screen{padding-top:8px}
.action-dock{min-height:58px;padding-top:5px;padding-bottom:max(5px,env(safe-area-inset-bottom))}
.hand-panel{max-height:38dvh}
.hand-empty{height:39px;max-height:none;padding:4px 10px}
.card-inspect>.portrait{width:62px;height:62px}
.combat-loop{--seat-art:20px;--seat-min:120px}
.combat-loop .minion{padding:2px 1px}
.combat-loop .tile-floor{height:22px;min-height:22px}
.combat-loop .seat-skill{font-size:10.5px;line-height:12.5px;min-height:37.5px}
.combat-loop .minion .stats b{font-size:16px;line-height:18px}
.combat-loop .minion>strong{line-height:14px}
.combat-loop .loop-return{min-height:17px}
.battle-divider{min-height:42px;padding:6px;margin:4px 0}
.battle-divider p{font-size:11px;line-height:16px}
.duel-name{font-size:12px;line-height:18px}
.battle-panel>h3{margin:3px 0;line-height:16px}
.battle-panel h3>small{font-size:10px}
.combat-hint{display:none}
.turn-status{padding:4px 0}
.welcome{padding-top:18px}
.welcome h1{font-size:43px}
.welcome-moon{height:44px}
.welcome-moon>.ui-icon{width:44px;height:44px}
.welcome-cast{height:150px}
.welcome-story{font-size:13px}
.welcome-foot{margin-top:10px}
.home-actions{gap:6px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important}
}
.deploying{max-height:28dvh}
.deploy-preview{display:grid;grid-template-columns:40px 1fr;gap:9px;align-items:center;padding:0}
.deploy-preview>.portrait{width:40px;height:40px}
.deploy-preview .stats{justify-content:flex-start;gap:22px}
.deploy-preview .stats .atk{color:#ffe2a0}
.deploy-preview .stats .hp{color:#ffc6b2}
.deploy-preview .stats b{font-size:18px}
.deploy-preview .card-skill{color:#f5edd6;font-size:13px;line-height:18px;min-height:0;padding:4px 0 0;border:0;margin:0}
.deploy-preview .card-skill b{color:#ffe3a1}
.drag-ghost .card-skill,.drag-ghost .card-meta,.drag-ghost .card-faction{display:none}
.hand-panel.dragging-hand .card-skill,.hand-panel.dragging-hand .portrait,.hand-panel.dragging-hand .card-meta,.hand-panel.dragging-hand .card-faction{display:none}
.hand-panel.dragging-hand{max-height:87px;overflow:hidden}
.hand-panel.dragging-hand .hand-card{min-height:37px;padding:1px}
.hand-panel.dragging-hand .stats{display:none}
.combat-loop .empty-slot{min-height:0}
/* v0.9.1 — bounded portrait game, four offers together, full illustration cards. */
body{height:var(--host-h,100dvh);width:var(--host-w,100%);min-height:0;padding:8px;align-items:center;overflow:hidden}
#app{--frame-w:min(480px,calc(var(--host-w,100vw) - 16px));width:var(--frame-w);height:min(calc(var(--host-h,100dvh) - 16px),calc(var(--frame-w) * 2.1666667));max-height:1040px;min-height:0;flex:none;container-type:size}
.portrait{position:relative;background-image:none;background:var(--paper);overflow:hidden;aspect-ratio:1}
.portrait>svg{display:block;width:100%;height:100%;overflow:hidden;pointer-events:none}
.prep-nav,.shop-pagination,.shop-pages,.hand-pagination,.shop-caption,.board-caption,.focus-badge,.mini-phase,.seat-skill{display:none!important}
.game-header{height:52px;min-height:52px;padding:4px 10px}
.header-title>b{font-size:20px}
.header-title>span{margin-top:1px}
.resource b{font-size:22px}
.resource small{display:none}
.resource>.ui-icon{width:29px;height:29px}
.game-screen{overflow:hidden;display:flex;flex-direction:column;gap:8px;padding:8px 10px;min-height:0;justify-content:center}
.shop-panel{height:clamp(282px,35cqh,330px);min-height:0;flex-shrink:0;display:flex;flex-direction:column;padding:0;margin:0;border:0;gap:5px}
.section-head{height:20px;min-height:20px;margin:0}
.section-head h2{font-size:14px;line-height:20px}
.section-head h2>span{font-size:11px}
.shop-panel h2{display:flex;align-items:center;gap:4px}
.shop-panel h2>.ui-icon{width:15px;height:15px}
.shop-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:minmax(0,1fr);gap:5px;flex:1;min-height:0;align-items:stretch}
.offer{padding:3px;border-width:4px;gap:3px;min-height:0;position:relative;display:flex;flex-direction:column}
.card-inspect{display:flex;flex-direction:column;gap:3px;min-height:0;align-items:stretch;justify-content:flex-start;flex:1;width:100%;cursor:pointer}
.offer-heading{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:14px 17px 42px;gap:1px;min-height:75px;flex:none}
.card-tier{grid-row:1;grid-column:1;align-self:start;font-size:10px;line-height:13px;gap:0;min-height:0;height:14px}
.card-tier .ui-icon{width:11px;height:11px}
.offer-phase{grid-row:1;grid-column:2;font-size:10px;line-height:13px;text-align:right;color:#486259}
.card-name{grid-row:2;grid-column:1/-1;font-size:11px;line-height:16px;min-height:17px;max-height:none;display:block;text-align:center;white-space:nowrap;overflow:visible}
.offer-heading>.portrait{grid-row:3;grid-column:1/-1;align-self:center;justify-self:center;width:42px;height:42px;min-height:42px;max-width:100%;mix-blend-mode:multiply}
.card-skill{min-height:0;flex:1;margin:0;padding:2px 0;border-top:1px solid #c2bba2;border-bottom:0;font-size:12px;line-height:16px;overflow:visible;color:#243d3d;overflow-wrap:anywhere}
.card-inspect .stats{width:100%;gap:1px;min-height:20px;padding:0;flex:none}
.card-inspect .stats b{font-size:14px;line-height:19px}
.card-inspect .stats .ui-icon{width:10px;height:10px}
.card-inspect .stats>span{gap:0}
.offer .buy-button{height:25px;min-height:25px;border-width:3px;padding:1px;gap:1px;font-size:11px;flex:none}
.offer .buy-button>.ui-icon{width:12px;height:12px;display:inline-block}
.sold{min-height:0;color:#536257;font-size:11px}
.sold>b{font-size:12px}
.planned-offer{outline:2px solid #a4cfaa;outline-offset:-3px}
.shop-controls{height:30px;min-height:30px;margin:0;gap:6px}
.shop-controls>button{height:30px;min-height:30px;font-size:12px;padding:2px;border-width:4px;gap:3px}
.shop-controls>button>.ui-icon,.shop-controls .button-label .ui-icon{width:16px;height:16px}
.dense-shop{height:clamp(330px,40cqh,380px)}
.dense-shop .shop-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:6px}
.dense-shop .offer{padding:3px 4px}
.dense-shop .offer-heading{grid-template-columns:1fr 32px;grid-template-rows:14px 18px;min-height:33px}
.dense-shop .card-tier{grid-column:1;grid-row:1}
.dense-shop .offer-phase{grid-column:1;grid-row:1;text-align:right;margin-right:3px}
.dense-shop .card-name{grid-column:1;grid-row:2;font-size:11px;line-height:17px;text-align:left}
.dense-shop .offer-heading>.portrait{grid-column:2;grid-row:1/3;width:32px;height:32px;min-height:32px}
.dense-shop .card-skill{font-size:12px;line-height:16px}
.dense-shop .card-inspect .stats{padding-right:30px;min-height:24px}
.dense-shop .buy-button{position:absolute;right:4px;bottom:3px;width:29px;height:24px;min-height:24px}
.dense-shop .buy-button>.ui-icon{width:10px;height:10px}
.dense-shop .card-inspect .stats b{font-size:14px}
.army{display:flex;flex-direction:column;gap:4px;flex:1;min-height:0;max-height:82cqw;padding:0}
.army>.loop-board{flex:1;min-height:0}
.loop-board{display:flex;flex-direction:column;gap:0;padding:3px;border-width:4px;min-height:0;background:#18343c}
.loop-row{flex:1;min-height:0;grid-template-rows:minmax(0,1fr);gap:5px}
.loop-tile{min-height:0;padding:0;border-width:3px;overflow:hidden;position:relative;background:#eae1c8}
.tile-floor{position:absolute;top:0;left:0;right:0;z-index:4;height:22px;min-height:22px;grid-template-columns:1fr 12px 1fr;padding:0 3px;background:#183c40;border-bottom:1px solid #819285}
.tile-floor>span{font-size:10px;line-height:20px}
.tile-floor>b{font-size:16px;line-height:20px}
.loop-return{height:18px;min-height:18px;padding:1px 0;font-size:9px}
.loop-return>b{font-size:10px}
.loop-tile>.minion{position:absolute;inset:22px 0 0;display:block;padding:0;min-height:0;background:var(--paper);color:var(--ink);overflow:hidden;touch-action:none}
.loop-tile .minion>.portrait{position:absolute;inset:0;width:100%;height:100%;min-height:0;max-height:none;max-width:none;aspect-ratio:auto;flex:none;border-radius:0;background:var(--paper)}
.loop-tile .minion>strong{position:absolute;top:0;left:0;right:0;z-index:2;padding:2px 0;font-size:11px;line-height:15px;min-height:0;max-height:none;white-space:nowrap;overflow:hidden;text-overflow:clip;color:#223e3b;text-align:center;background:#f2e8d1ed}
.loop-tile .minion>.stats{position:absolute;bottom:0;left:0;right:0;width:100%;z-index:2;min-height:24px;padding:2px 3px;gap:1px;background:#f2e8d1f2;justify-content:space-between}
.loop-tile .minion .stats b{font-size:18px;line-height:21px}
.loop-tile .minion .stats .ui-icon{width:13px;height:13px}
.loop-tile .minion .stats>span{gap:1px}
.loop-tile .minion .stats .atk{color:#355d51}
.loop-tile .minion .stats .hp{color:#a34235}
.loop-tile .minion .stats b.compact{font-size:13px;line-height:20px}
.loop-tile .minion .stats b.huge{font-size:12px}
.loop-tile .minion .stats span:has(b.compact) .ui-icon{width:9px;height:9px}
.empty-slot{position:absolute;inset:22px 0 0;min-height:0;gap:4px;background:#203b40}
.empty-slot>.ui-icon{width:25px;height:25px}
.empty-slot small{font-size:10px}
.relay-dots{position:absolute;top:23px;left:2px;z-index:5;font-size:9px;line-height:12px;min-height:0;color:#89652b;background:#f2e8d1c9}
.bead.ui-icon{top:3px;left:calc(50% - 6px);width:12px;height:12px}
.dead-label{top:40%;line-height:20px;font-size:11px;z-index:5}
.taunt-label{font-size:9px;top:19px;z-index:5}
.hand-panel{height:88px;min-height:88px;max-height:88px;overflow:visible;padding:3px 10px 5px;flex:none}
.hand-panel .section-head{height:15px;min-height:15px;margin-bottom:3px}
.hand-panel h2{font-size:11px;line-height:15px}
.hand-strip{height:62px;display:grid;grid-template-columns:repeat(var(--fan),minmax(0,1fr));gap:4px;align-items:stretch;max-width:100%;justify-content:start}
.hand-strip:has(.hand-card:nth-child(6)){padding-right:31px;gap:0}
.hand-card{position:relative;min-height:0;height:62px;max-width:64px;width:100%;padding:0;border:0;background:transparent;overflow:visible;transform:none!important;outline:0!important}
.hand-card>.minion{display:block;position:relative;pointer-events:none;width:100%;height:100%;min-height:0;padding:0;background:var(--paper);border:3px solid transparent;border-image:var(--art-cardFrame) 96 stretch}
.hand-strip:has(.hand-card:nth-child(6)) .hand-card{width:100%;max-width:none}
.hand-strip:has(.hand-card:nth-child(6)) .hand-card>.minion{position:absolute;top:0;left:0;width:62px}
.hand-strip:has(.hand-card:nth-child(6)) .hand-card:last-child{width:62px}
.hand-card .minion>.portrait{position:absolute;inset:0;width:100%;height:100%;min-height:0;max-height:none;aspect-ratio:auto;background:var(--paper)}
.hand-card .minion>strong{position:absolute;top:0;left:0;right:0;min-height:0;max-height:12px;height:12px;font-size:10px;line-height:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#203c3b;z-index:2;background:#f2e8d1e8;text-align:center}
.hand-card .minion>.stats{position:absolute;bottom:0;left:0;right:0;min-height:17px;padding:0 1px;background:#f2e8d1ef;z-index:2}
.hand-card .stats b{font-size:13px;line-height:17px}
.hand-card .stats .ui-icon{width:10px;height:10px}
.hand-card .stats .atk{color:#315548}
.hand-card .stats .hp{color:#96382e}
.hand-card.selected{z-index:7}
.hand-card.selected>.minion{outline:2px solid #ffdc8f;outline-offset:-2px;transform:translateY(-5px)}
.hand-card.golden-hand>.minion{outline:2px solid #d9ad49;outline-offset:-3px}
.hand-card:hover{z-index:8}
.hand-card:hover>.minion{transform:translateY(-5px)}
.hand-empty{height:28px;min-height:28px;max-height:28px}
.hand-empty .section-head{display:none}
.hand-empty .hand-strip{height:20px;display:flex;justify-content:center}
.empty-hand{min-height:20px}
.empty-hand>.ui-icon{width:18px;height:18px}
.action-dock{height:54px;min-height:54px;padding:5px 8px max(5px,env(safe-area-inset-bottom));gap:5px}
.action-dock>button{min-height:40px;height:40px;font-size:12px;padding:3px;border-width:4px}
.prep-clock{font-size:13px;min-width:55px}
.prep-clock>small{display:none}
.action-dock .button-label{white-space:nowrap}
.action-dock>button>.ui-icon{width:16px;height:16px}
.battle-panel{display:grid;grid-template-rows:20px 17px minmax(0,1fr) 43px 17px minmax(0,1fr) 21px;gap:3px;flex:1;min-height:0}
.duel-name{margin:0;font-size:12px;line-height:20px}
.battle-panel>h3{margin:0;font-size:11px;line-height:17px}
.combat-loop{padding:3px;border-width:4px;min-height:0;max-height:77cqw}
.combat-loop .loop-tile{min-height:0;border-width:3px}
.combat-loop .tile-floor{height:21px;min-height:21px}
.combat-loop .minion{inset:21px 0 0}
.combat-loop .minion>.portrait{width:100%;height:100%;max-height:none;min-height:0}
.combat-loop .minion>strong{font-size:10.5px;line-height:14px}
.combat-loop .minion .stats b{font-size:16px;line-height:19px}
.combat-loop .minion>.stats{min-height:22px}
.combat-loop .loop-return{height:17px;min-height:17px}
.battle-divider{min-height:0;height:43px;margin:0;padding:4px 7px;gap:5px}
.battle-divider p{font-size:12px;line-height:17px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.battle-divider>.ui-icon{width:18px;height:18px}
.turn-status{padding:0;font-size:10px;line-height:20px}
.turn-status>span{font-size:10px}
.combat-hint,.round-result{display:none}
.attack-actor>.portrait{width:100%;height:100%;min-height:0;position:absolute;inset:0}
.attack-actor>strong{position:absolute;top:0;left:0;right:0;color:#24443e;background:var(--paper);font-size:11px}
.attack-actor>.stats{position:absolute;bottom:0;left:0;right:0;background:var(--paper);color:#24443e}
.attack-actor .stats b{font-size:16px}
.inspect-dialog{align-self:center;max-width:310px;margin:auto;max-height:90%;padding:10px 14px;overflow:hidden;background:#f1e6ce;color:#213e3d;border:7px solid transparent;border-image:var(--art-cardFrame) 96 stretch}
.inspect-dialog .close-row{top:0;background:transparent;padding:0;margin-bottom:-6px;height:24px}
.inspect-dialog .close-row button{min-height:26px;height:26px;padding:1px 4px;border:0;background:transparent;color:#32524b;font-size:12px}
.detail-card>h2{font-family:inherit;font-size:20px;line-height:26px;color:#203f3c;margin:4px 0 8px;text-align:left;padding-right:25px}
.detail-card>.stats{width:100%;max-width:none;margin:5px 0;justify-content:flex-start;gap:28px}
.detail-card .stats b{font-size:24px;line-height:29px}
.detail-card .stats .ui-icon{width:23px;height:23px}
.detail-card .atk{color:#315250}
.detail-card .hp{color:#963d33}
.detail-card .detail-skill{border-top:1px solid #b5b295;background:transparent;font-size:15px;line-height:1.6;padding:10px 0 2px;margin:5px 0 9px;color:#213e3d;text-align:left}
.detail-actions{display:flex;gap:7px}
.detail-actions>button{flex:1;min-height:40px;padding:3px;font-size:13px;border-width:4px}
.rule-word{display:inline!important;min-height:0!important;height:auto!important;width:auto!important;min-width:0!important;padding:0!important;margin:0!important;border:0!important;border-image:none!important;background:transparent!important;color:#345c57!important;font-size:inherit!important;line-height:inherit!important;font-weight:700!important;text-decoration:underline dotted #708a78;text-underline-offset:3px;vertical-align:baseline;cursor:help}
.rule-word:active{color:#a45336!important}
.keyword-note{text-align:left;background:#e1ddbf;padding:9px 10px;margin:5px 0 10px;border-left:3px solid #7b967d}
.keyword-note>b{font-size:13px;color:#294e47}
.keyword-note>p{font-size:13px;line-height:20px;color:#2c4a42;margin:4px 0 0}
.guide-layer{position:absolute;inset:0;z-index:40;pointer-events:none;overflow:hidden}
.guide-mask{position:absolute;background:#061b25a6;pointer-events:auto}
.guide-dialog{position:absolute;left:12px;right:12px;display:flex;align-items:center;gap:10px;padding:12px;background:#f2e8d0;border:6px solid transparent;border-image:var(--art-cardFrame) 96 stretch;color:#243f3c;box-shadow:0 5px 18px #0005;pointer-events:auto}
.guide-dialog>.portrait{flex:0 0 48px;max-width:48px;width:48px;height:48px;mix-blend-mode:multiply}
.guide-dialog>div:not(.portrait){flex:1;min-width:0}
.guide-dialog b{font-size:12px;color:#796038}
.guide-dialog p{font-size:14px;line-height:21px;margin-top:4px}
.guide-dialog>button{position:absolute;right:0;top:0;min-height:25px;width:25px;border:0;background:transparent;color:#37524d;padding:0;font-size:20px}
.guide-target{outline:3px solid #ffe5a5!important;outline-offset:2px;filter:brightness(1.12);animation:guide-glow 1.4s ease-in-out infinite}
.guide-finger.ui-icon{position:absolute;width:32px;height:32px;filter:drop-shadow(0 1px 2px #0008);animation:guide-point .8s ease-in-out infinite}
.toast{top:54px;padding:6px 10px;font-size:12px;line-height:17px}
.in-prep .toast{max-height:54px;overflow:hidden}
@keyframes guide-glow{50%{outline-color:#aee5d0;filter:brightness(1.25)}
}
@keyframes guide-point{50%{transform:translateY(5px)}
}
@media(max-width:500px){body{padding:0}
#app{--frame-w:min(480px,var(--host-w,100vw));width:var(--frame-w);height:min(var(--host-h,100dvh),calc(var(--frame-w) * 2.1666667));max-height:1040px;border:0;border-radius:0}
}
@container(max-height:780px){.game-header{height:48px;min-height:48px}
.game-screen{padding:6px 8px;gap:6px}
.shop-panel{height:292px}
.dense-shop{height:342px}
.offer-heading{grid-template-rows:13px 16px 32px;min-height:63px}
.offer-heading>.portrait{width:32px;height:32px;min-height:32px}
.card-skill{font-size:12px;line-height:16px}
.dense-shop .offer-heading{grid-template-rows:14px 18px;min-height:33px}
.dense-shop .offer-heading>.portrait{width:32px;height:32px}
.hand-panel{height:82px;min-height:82px;max-height:82px}
.hand-strip,.hand-card{height:57px}
.hand-empty{height:26px;min-height:26px;max-height:26px}
.action-dock{height:50px;min-height:50px;padding-top:4px;padding-bottom:4px}
.action-dock>button{min-height:40px;height:40px}
.loop-return{height:16px;min-height:16px}
.loop-tile .minion>strong{font-size:10.5px;line-height:14px}
.loop-tile .minion .stats b{font-size:16px;line-height:19px}
.loop-tile .minion>.stats{min-height:22px;padding:1px 2px}
.battle-panel{grid-template-rows:18px 15px minmax(0,1fr) 40px 15px minmax(0,1fr) 18px;gap:2px}
.battle-divider{height:40px}
.combat-loop .loop-return{height:15px;min-height:15px}
.turn-status{line-height:18px}
.welcome-moon{height:32px;margin:0}
.welcome-moon>.ui-icon{height:32px;width:32px}
.welcome h1{font-size:40px;line-height:1.05;margin:8px 0}
.welcome-cast{height:110px;margin:8px 0}
.welcome-story{font-size:13px;line-height:20px}
.home-actions{gap:6px}
.home-actions>button{min-height:40px}
.welcome-foot{font-size:11px;margin-top:6px}
}
@container(max-height:780px){.shop-panel{height:320px}.dense-shop{height:342px}.hand-panel{height:70px;min-height:70px;max-height:70px}.hand-strip,.hand-card{height:45px}.hand-empty{height:26px;min-height:26px;max-height:26px}}
/* Intrinsic shop rows reserve their full text height, never push prose over stats. */
.shop-panel,.dense-shop{height:auto;min-height:0;max-height:none;flex:0 0 auto}.shop-grid{flex:none;grid-template-rows:auto}.dense-shop .shop-grid{grid-template-rows:repeat(2,auto)}.card-skill{flex:0 0 auto;min-height:min-content}.card-inspect .stats{margin-top:auto}
.loop-tile .minion>.stats{background:transparent}.loop-tile .minion>.stats>span{background:#f2e8d1ed;padding:0 1px;border-radius:2px}
/* Dense shops keep complete conditions but avoid repeated header/padding space. */
.dense-shop{gap:3px}.dense-shop .shop-grid{gap:3px}.dense-shop .offer{border-width:3px;padding:2px;gap:1px}.dense-shop .card-inspect{gap:1px}.dense-shop .offer-heading{grid-template-columns:1fr 26px;grid-template-rows:12px 14px;min-height:27px}.dense-shop .offer-heading>.portrait{width:26px;height:26px;min-height:26px}.dense-shop .card-tier{height:12px;line-height:12px}.dense-shop .offer-phase{font-size:9px;line-height:12px}.dense-shop .card-name{font-size:11px;line-height:14px;min-height:14px}.dense-shop .buy-button{right:2px;bottom:2px}
/* v0.10: shop portraits have their own space; hand reserves its height. */
.offer-heading{grid-template-columns:1fr;grid-template-rows:13px 18px 88px;min-height:121px;position:relative}
.offer-heading>.portrait{grid-column:1;grid-row:3;width:100%;height:88px;min-height:88px;max-width:none}
.offer-heading>.card-name{grid-column:1;grid-row:2}
.dense-shop .offer-heading{grid-template-columns:1fr;grid-template-rows:12px 16px 48px;min-height:76px}
.dense-shop .offer-heading>.portrait{grid-column:1;grid-row:3;width:100%;height:48px;min-height:48px}
.dense-shop .card-name{grid-column:1;grid-row:2}
.hand-panel,.hand-panel.hand-empty,.hand-panel.dragging-hand{height:112px;min-height:112px;max-height:112px;overflow:hidden}
.hand-strip,.hand-card{height:86px}
.hand-card{max-width:66px}
.empty-hand{height:86px;display:flex;align-items:center;justify-content:center;border:1px dashed #78918855;border-radius:5px}
.empty-hand:after{content:'手牌';font-size:12px;color:#9ab0a4;margin-left:6px}
.hand-panel.dragging-hand .portrait,.hand-panel.dragging-hand .stats{display:block}
.hand-panel.dragging-hand .hand-card{height:86px;min-height:0}
.armor-label{position:absolute;left:2px;bottom:25px;z-index:5;padding:1px 3px;background:#244b66;color:#d5edf3;font-size:10px}
.flow-layer{position:absolute;inset:0;z-index:38;display:flex;align-items:center;justify-content:center;background:#061b25b5;backdrop-filter:blur(2px)}
.flow-banner{width:94%;text-align:center;padding:26px 10px;background:#173e42f5;border-block:2px solid #c3af75;box-shadow:0 0 40px #030e1880;animation:flow-enter .35s ease-out}
.flow-banner small{color:#d7ceaa;font-size:13px}.flow-banner h2{font-size:25px;letter-spacing:3px;margin:12px 0;color:#fff0c6}.flow-banner p{font-size:12px;line-height:24px;margin:12px 0}.flow-banner button{min-height:30px;margin:12px auto 0;font-size:12px}
.impact-float{z-index:35!important;top:25%!important;font-size:23px!important;white-space:nowrap;animation:damage-rise 1s ease-out forwards;text-shadow:0 2px 2px #190e08,1px 0 #190e08,-1px 0 #190e08}
.impact-hit{animation:impact-shake .3s ease-out}
.impact-burst{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px;border:4px solid #ffe4a2;border-radius:50%;box-shadow:0 0 16px #f28b3c,inset 0 0 14px #ffde79;pointer-events:none;z-index:28;animation:hit-ring .45s ease-out forwards}
.spell-orb{position:absolute;width:23px;height:23px;border-radius:50%;background:#fff5bd;box-shadow:0 0 6px 5px #efbd54,0 0 19px 9px #d66536;z-index:32;pointer-events:none}
.star-orb{width:12px;height:12px;clip-path:polygon(50% 0,62% 35%,100% 50%,63% 65%,50% 100%,37% 65%,0 50%,37% 35%);background:#ffe394;box-shadow:none}
@keyframes flow-enter{from{transform:scale(.94)}to{transform:scale(1)}}
@keyframes hit-ring{from{opacity:1;transform:scale(.2)}to{opacity:0;transform:scale(1.6)}}
@keyframes impact-shake{25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}
@keyframes damage-rise{0%,25%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-32px)}}
.skill-float{position:absolute;left:0;right:0;top:40%;z-index:30;color:#b4f8c5;background:#173b3fe6;font-size:15px;font-weight:bold;animation:damage-rise 1.1s ease-out forwards}.skill-float.armor{color:#afe2ff}.skill-float.silence{color:#ffe4a2;font-size:12px}
@container(max-height:780px){.offer-heading{grid-template-rows:12px 16px 62px;min-height:90px}.offer-heading>.portrait{height:62px;min-height:62px}.dense-shop .offer-heading{grid-template-rows:12px 14px 32px;min-height:58px}.dense-shop .offer-heading>.portrait{height:32px;min-height:32px}.hand-panel,.hand-panel.hand-empty,.hand-panel.dragging-hand{height:92px;min-height:92px;max-height:92px}.hand-strip,.hand-card,.empty-hand,.hand-panel.dragging-hand .hand-card{height:66px}}
/* v0.11: a station keeper, a curtained stage, and a permanent public scoreboard. */
.opponent-strip{height:40px;min-height:40px;display:flex;gap:4px;padding:3px 8px;background:#102a32;border-bottom:1px solid #617b72;flex:none}
.survivors{flex:0 0 39px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1px}.survivors b{font-size:12px;color:#f0d69e}.survivors small{font-size:8px;line-height:10px;white-space:nowrap}
.opponent-chip{display:grid;grid-template-columns:20px minmax(0,1fr) 19px;align-items:center;gap:3px;min-width:0;min-height:0;height:33px;flex:1;padding:2px 3px;border:1px solid #71857b;border-image:none;border-radius:4px;background:#203f46;color:#f4e7ca}
.opponent-chip>.portrait{width:20px;height:25px;min-height:0;max-width:20px;background:#ecdfbf;border-radius:50%;mix-blend-mode:normal;overflow:hidden}
.opponent-chip>span{min-width:0;text-align:left;display:flex;flex-direction:column;gap:1px}.opponent-chip b{font-size:10px;line-height:11px;white-space:nowrap}.opponent-chip small{font-size:8px;line-height:9px;color:#a9bdb0;white-space:nowrap}.opponent-chip>strong{font-size:15px;color:#e8bc78}.opponent-chip.next-opponent{border-color:#edc47f;background:#4c4636;box-shadow:inset 0 0 0 1px #dbb17350}.next-opponent small{color:#ffe1a2}.opponent-chip.eliminated{opacity:.5;filter:grayscale(1)}
.game-screen{gap:6px;padding:5px 8px;justify-content:center}
.shop-panel{gap:3px;background:#a68252;border:1px solid #957950;border-radius:7px 7px 3px 3px;padding:0 3px 3px;box-shadow:0 2px 5px #05121780}
.station-host{height:73px;min-height:73px;width:calc(100% + 6px);margin:0 -3px;display:block;flex:none;min-width:0;padding:0;border:0;border-image:none;border-radius:6px 6px 0 0;background:var(--art-station) center 48%/100% auto no-repeat;overflow:hidden;color:#fff0cb;text-shadow:0 1px 2px #071c20}
.station-sign{position:absolute;left:35%;right:9%;top:27%;bottom:12%;display:grid;grid-template-columns:1fr auto;grid-template-rows:1fr 15px;align-items:center;gap:0 6px;text-align:left}.station-sign>strong{font-family:KaiTi,STKaiti,serif;letter-spacing:2px;font-size:21px;line-height:24px}.station-sign>b{display:flex;align-items:center;font-size:16px;gap:2px}.station-sign .ui-icon{width:15px;height:15px}.station-sign>small{grid-column:1/-1;color:#d6c4a2;font-size:10px;line-height:14px}
.offer-heading{grid-template-rows:13px 17px 76px;min-height:106px}.offer-heading>.portrait{height:76px;min-height:76px}
.faction-tag{font-size:9px;line-height:13px;padding:0 3px;display:inline-block;white-space:nowrap;border-radius:2px;background:#f5e9cfeb;color:var(--faction-color);font-weight:700;letter-spacing:0;border-left:2px solid var(--faction-color)}
.offer-heading>.faction-tag{grid-column:1;grid-row:1;justify-self:end;align-self:start;font-size:9px;line-height:12px;z-index:2;padding:0 1px}.offer-heading>.card-tier{z-index:3;background:var(--paper);justify-self:start}
.card-skill{font-size:12px;line-height:16px;padding:2px 0}.offer{background:#f1e5c9}.card-inspect>.stats{padding-top:2px}
.army{max-height:84cqw;gap:3px}.army>.section-head{height:18px;min-height:18px}.army h2{font-family:KaiTi,STKaiti,serif;color:#f2d69b;letter-spacing:1px;font-size:16px;line-height:18px}
.loop-board{position:relative;isolation:isolate;padding:23px 9px 18px;border:0;border-image:none;background:#2f565b var(--art-stage) center/cover no-repeat;border-radius:6px;box-shadow:0 2px 5px #05121780,inset 0 0 0 1px #ba9b61}
.loop-board:before,.loop-board:after{content:'';position:absolute;z-index:-1;left:0;right:0;background-image:var(--art-stage);background-size:100% auto;pointer-events:none;background-repeat:no-repeat}
.loop-board:before{top:0;height:24px;background-position:center top}.loop-board:after{bottom:0;height:18px;background-position:center bottom}
.loop-row{gap:4px}.loop-tile{border-width:2px;box-shadow:0 2px 4px #061e2a90}.vacant .empty-slot{background:#203e43a8}.loop-return{color:#ecd8a1;text-shadow:0 1px #10272e;background:#14353ba6;border-radius:3px}
.loop-tile .minion>.faction-tag{position:absolute;top:17px;right:1px;z-index:3;max-width:100%;font-size:8px;line-height:10px;padding:0 1px;background:#f3e9cfe8;letter-spacing:0}
.combat-loop{padding:17px 7px 13px}.combat-loop:before{height:18px}.combat-loop:after{height:13px}.combat-loop .minion>.faction-tag{font-size:7px;line-height:9px;top:15px}
.hand-card .minion>.faction-tag{position:absolute;right:0;top:13px;z-index:3;font-size:8px;line-height:10px;padding:0 1px}.hand-panel{background:#244044;border-top:2px solid #b49a67}.hand-empty .section-head{display:flex}.hand-empty .empty-hand{height:66px}.empty-hand:after{content:'候补席 · 伙伴在这里等你安排上场';font-size:10px}
.detail-card>.faction-tag{font-size:12px;line-height:18px;height:23px;min-height:23px;border:0;border-left:3px solid var(--faction-color);padding:2px 7px;background:#e7dcc0;color:var(--faction-color);border-image:none}
.skill-clarification{font-size:12px;line-height:18px;color:#37504a;margin:5px 0 10px;border-top:1px solid #c2bca0;padding-top:5px}.skill-clarification summary{cursor:pointer;font-weight:700}.skill-clarification p{margin-top:4px}
.world-dialog{background:#f0e4cb;color:#2b423f}.world-dialog .close-row{background:#f0e4cb}.world-dialog p{color:#324d48;font-size:13px;line-height:21px;margin:8px 0}.world-dialog h2{color:#2a4a46;font-size:20px}.world-dialog h3{color:#4b6053;margin:12px 0 6px}.world-intro{display:flex;gap:12px;align-items:center}.world-intro>.portrait{width:65px;height:65px;min-width:65px;background:transparent;mix-blend-mode:multiply}.world-intro small{color:#8d6a39}.world-caption{font-size:12px!important}.faction-story{border-left:3px solid var(--faction-color);padding:1px 9px 8px;margin:12px 0;background:#e6ddc4}.faction-story>h3{color:var(--faction-color)}.faction-story>div{display:flex;gap:5px}.faction-story button{flex:1;min-width:0;display:flex;flex-direction:column;gap:0;padding:3px;border:1px solid #b6ae8e;border-image:none;background:#f4e9d1;color:#304f48;font-size:10px;line-height:14px}.faction-story .portrait{width:44px;height:44px;min-height:44px;background:transparent;mix-blend-mode:multiply}.arrival-host{display:flex;align-items:center;gap:8px;margin:0 0 12px}.arrival-host>.portrait{width:70px;height:70px;min-width:70px;background:#e4d4ae;border-radius:50%}.arrival-host>p{text-align:left;font-size:13px;line-height:21px}
@container(max-height:780px){.opponent-strip{height:35px;min-height:35px;padding-block:2px}.opponent-chip{height:30px}.station-host{height:59px;min-height:59px}.station-sign>strong{font-size:18px;line-height:20px}.station-sign>small{font-size:9px;line-height:11px}.station-sign{grid-template-rows:1fr 12px;top:23%;bottom:10%}.offer-heading{grid-template-rows:12px 16px 48px;min-height:76px}.offer-heading>.portrait{height:48px;min-height:48px}.army{max-height:86cqw}.loop-board{padding:19px 7px 15px}.combat-loop{padding:16px 6px 12px}.hand-empty .empty-hand{height:66px}.opponent-chip{grid-template-columns:17px minmax(0,1fr) 17px;gap:2px}.opponent-chip>.portrait{width:17px;max-width:17px;height:23px}.opponent-chip b{font-size:9px}.survivors{flex-basis:35px}.game-screen{padding-block:4px;gap:5px}}
/* One name line belongs on the lamp header, leaving the stage card to the art. */
.tile-floor{height:19px;min-height:19px;display:flex;align-items:center;gap:1px;padding:0 2px}.tile-floor>span:first-child{font-size:8px;line-height:18px;flex:none}.tile-floor>.seat-name{font-size:9px;line-height:18px;flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:clip;text-align:center;color:#f4e4bd}.tile-floor>b{font-size:13px;line-height:18px;flex:none}.loop-tile>.minion,.empty-slot{inset:19px 0 0}.loop-tile .minion>strong{display:none}.loop-tile .minion>.faction-tag,.combat-loop .minion>.faction-tag{top:1px;font-size:8px;line-height:10px}.loop-tile .minion>.portrait{inset:7px 0 19px;height:auto;width:100%}.loop-board{padding-top:16px;padding-bottom:13px}.combat-loop{padding-top:14px;padding-bottom:11px}
@container(max-width:375px){.station-host{height:52px;min-height:52px}.offer{border-width:3px;padding:2px;gap:2px}.card-inspect{gap:2px}.offer-heading{grid-template-rows:12px 15px 44px;min-height:71px}.offer-heading>.portrait{height:44px;min-height:44px}.card-skill{font-size:11px;line-height:14px;padding:1px 0}.offer .buy-button{height:23px;min-height:23px}.shop-controls,.shop-controls>button{height:27px;min-height:27px}.loop-board{padding:14px 6px 11px}.combat-loop{padding:12px 6px 10px}.station-sign>small{font-size:8px}}
/* Price tickets attach to the illustration; stats keep a complete bottom row. */
.offer{--offer-header-h:106px;--offer-inset:7px}.offer .buy-button,.dense-shop .offer .buy-button{position:absolute;top:calc(var(--offer-header-h) + var(--offer-inset) - 23px);bottom:auto;right:3px;width:31px;height:23px;min-height:23px;font-size:11px;padding:0 2px;gap:1px;border-width:2px;z-index:6;box-shadow:0 1px 3px #29362780}.offer .buy-button>.ui-icon{width:10px;height:10px}.card-inspect .stats{padding-right:0}
@container(max-height:780px){.offer{--offer-header-h:76px}}
@container(max-width:375px){.station-host{height:44px;min-height:44px}.station-sign{top:20%}.station-sign>strong{font-size:16px;line-height:18px}.offer{--offer-header-h:63px;--offer-inset:5px}.offer-heading{grid-template-rows:12px 15px 36px;min-height:63px}.offer-heading>.portrait{height:36px;min-height:36px}}
.attack-actor>.faction-tag{display:none}
.skill-clarification p{color:#2b4842!important;font-size:12px;line-height:18px}.skill-clarification summary{color:#3d564b}
.opponent-chip{grid-template-columns:20px minmax(0,1fr) 29px}.opponent-chip>strong{display:flex;align-items:center;justify-content:flex-end;gap:1px}.opponent-chip>strong>.ui-icon{width:10px;height:12px}
@container(max-height:780px){.opponent-chip{grid-template-columns:17px minmax(0,1fr) 27px}}
@container(min-height:781px) and (max-height:900px){.station-host{height:60px;min-height:60px}.offer{--offer-header-h:90px}.offer-heading{grid-template-rows:13px 17px 60px;min-height:90px}.offer-heading>.portrait{height:60px;min-height:60px}.hand-panel,.hand-panel.hand-empty,.hand-panel.dragging-hand{height:92px;min-height:92px;max-height:92px}.hand-strip,.hand-card,.empty-hand,.hand-panel.dragging-hand .hand-card{height:66px}}
.world-intro>.portrait,.arrival-host>.portrait{border-radius:50%;overflow:hidden;mix-blend-mode:normal;background:#1b4348;border:2px solid #b49a66}
.loop-board{background-position:center bottom}
/* v0.12: in-match guide shortcut and labels anchored to their scenery. */
.game-header{display:grid;grid-template-columns:64px 62px minmax(0,1fr) 31px;gap:8px;height:56px;min-height:56px;padding:3px 9px}
.game-header .resource{gap:2px;min-width:0}.game-header .resource>.ui-icon{width:26px;height:29px}.game-header .resource b{font-size:21px;line-height:24px}.game-header .resource small{display:block;font-size:9px;line-height:11px;white-space:nowrap;color:#c8d6c9}.game-header .icon-button{width:31px;height:44px;min-height:44px}.game-header .icon-button>.ui-icon{width:23px;height:23px}
.guide-shortcut{min-width:0;min-height:44px;height:44px;padding:3px 9px;border-width:3px;justify-content:space-between;background:#284c49;text-align:left}.guide-shortcut .button-label{width:100%;justify-content:space-between;gap:4px}.guide-shortcut span>small{display:block;color:#c5d2bb;font-size:9px;line-height:12px}.guide-shortcut span>b{display:block;font-size:14px;line-height:19px;color:#f4dfaf;white-space:nowrap}.guide-shortcut i{font-size:23px;line-height:24px;font-style:normal;color:#e6c381}.guide-shortcut.has-build{background:#385c4d;border-image-source:var(--art-buttonSecondary)}
.station-sign{left:38%;right:15%;top:24%;bottom:15%;grid-template-columns:minmax(0,1fr) 38px;grid-template-rows:minmax(0,1fr) 12px;gap:0 4px}.station-sign>strong{font-size:20px;letter-spacing:1px;line-height:22px}.station-sign>.station-tier{justify-self:center;justify-content:center;font-size:16px;line-height:21px;width:38px;white-space:nowrap}.station-sign>small{font-size:9px;line-height:12px}
.army{gap:0}.army>.loop-board{padding-top:34px}.stage-plaque{position:absolute;top:5px;left:10px;right:10px;height:23px;display:flex;align-items:center;justify-content:center;gap:9px;z-index:3;background:linear-gradient(90deg,transparent,#173c3de8 18%,#173c3de8 82%,transparent);border-bottom:1px solid #b89b5b99;text-shadow:0 1px 2px #09272b;pointer-events:none}.stage-plaque h2{font:17px KaiTi,STKaiti,serif;letter-spacing:2px;line-height:21px;color:#f4d9a0}.stage-plaque h2>span{font:10px "Microsoft YaHei",sans-serif;letter-spacing:0;margin-left:4px;color:#d6ddc4}.stage-plaque>small{font-size:10px;line-height:15px;color:#fff0bc;letter-spacing:0}
.assistant-dialog{background:#eee2c6;color:#294540;border:2px solid #a58c5d}.assistant-dialog .close-row{background:#eee2c6}.assistant-dialog p,.assistant-dialog li{color:#34534b;font-size:13px;line-height:21px}.assistant-dialog h2,.assistant-dialog h3{color:#30514a}.assistant-dialog h3{font-size:15px;margin:15px 0 7px}.assistant-dialog .eyebrow,.assistant-dialog small{color:#74613f}.guide-caption{font-size:11px!important;line-height:18px!important;margin:8px 0!important;color:#67715a!important}
.build-list{gap:10px}.build-list>article{background:#f8ecd1;border:1px solid #bbab80;border-radius:5px;padding:10px}.build-list article>span{color:#8f6936;font-size:10px}.build-list h3{font:20px KaiTi,STKaiti,serif;color:#34544a;margin:3px 0 5px}.build-list .current-build{border:2px solid #4b8a68;background:#e3e5c7}.build-preview{display:flex;float:right;margin-left:7px;gap:1px}.build-preview>.portrait{width:35px;height:47px;mix-blend-mode:multiply;background:transparent}.build-list article button{min-height:35px;height:35px}.build-list article>div:last-child{clear:both}
.guide-title{display:flex;align-items:center;justify-content:space-between;gap:8px}.guide-title h2{font:24px KaiTi,STKaiti,serif;margin:4px 0 0}.guide-title small{font-size:10px}.guide-title>button{height:33px;min-height:33px;font-size:11px;padding:2px 5px;border-width:3px;white-space:nowrap}.guide-apply{width:100%;min-height:36px;margin-top:10px}.guide-tabs{position:sticky;top:37px;display:flex;gap:4px;padding:9px 0;background:#eee2c6;z-index:6}.guide-tabs>button{flex:1;min-width:0;min-height:35px;height:35px;font-size:12px;padding:2px;border:1px solid #b3a47b;border-image:none;border-radius:3px;background:#e0d7bb;color:#37544a;white-space:nowrap}.guide-tabs>button.active{background:#365a50;color:#fff0c8;border-color:#365a50}.guide-content{padding-bottom:12px}.guide-content>h3{margin-top:16px}.guide-next{background:#dce1c4;border-left:3px solid #719674;padding:9px 10px}.guide-next h3{margin:5px 0}.guide-next small{font-size:10px}.guide-warning{color:#8b5032!important;margin-top:5px}.guide-card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.guide-card{display:flex;flex-direction:column;gap:1px;min-width:0;height:117px;padding:3px 2px;border:1px solid #b8ad86;border-image:none;border-radius:3px;background:#f7ecd3;color:#2d4d45;justify-content:flex-start}.guide-card>.portrait{width:100%;height:61px;min-height:61px;background:transparent;mix-blend-mode:multiply}.guide-card>strong{font-size:10px;line-height:15px;white-space:nowrap;letter-spacing:-.3px}.guide-card>span{font-size:9px;line-height:13px}.guide-card>small{font-size:9px;line-height:13px;white-space:nowrap;color:#72735b}.guide-card.owned{background:#e1e9cc;border:2px solid #6d9875;padding:2px 1px}.guide-card.owned>small{color:#2e6a47}.guide-card.locked{background:#e2ddc9}.guide-card.locked>.portrait{opacity:.6}
.guide-shop-matches{display:grid;grid-template-columns:1fr 1fr;gap:5px}.guide-shop-matches>button{padding:4px;min-width:0;min-height:54px;height:54px;border:1px solid #b6a47b;border-image:none;background:#f7ebce;color:#34534b;justify-content:flex-start}.guide-shop-matches .portrait{width:37px;height:44px;min-width:37px;background:transparent;mix-blend-mode:multiply}.guide-shop-matches span{text-align:left;min-width:0}.guide-shop-matches b{font-size:12px;display:block;white-space:nowrap}.guide-shop-matches small{font-size:10px;display:block}.guide-empty{padding:9px;background:#e0dac3;font-size:12px!important}.guide-route{padding-left:23px}.guide-route>li{padding:3px 0 12px}.guide-route b{color:#7f6237}.guide-route p{margin-top:4px}
@container(max-width:375px){.game-header{grid-template-columns:57px 54px minmax(0,1fr) 29px;gap:5px;padding-inline:7px}.guide-shortcut{padding-inline:6px}.guide-shortcut span>b{font-size:13px}.station-sign{right:16%;top:20%;bottom:13%}.station-sign>strong{font-size:16px;line-height:18px}.station-sign>.station-tier{font-size:14px}.station-sign .ui-icon{width:13px;height:13px}.station-sign>small{font-size:8px;line-height:10px}.army>.loop-board{padding-top:31px}.stage-plaque{top:3px;height:22px}.stage-plaque h2{font-size:16px}.stage-plaque>small{font-size:9px}.guide-card-grid{gap:4px}.guide-card>strong{font-size:9px}.guide-tabs>button{font-size:11px}}
.station-sign>.station-tier{align-self:start;height:19px;line-height:19px}
.position-recommended.available{border-style:solid;border-color:#f3d477!important}
.loop-tile.position-recommended.available{outline:2px solid #ffe57e!important;outline-offset:0;border:2px solid #ffe57e!important}
.hand-card,.minion[data-zone="hand"],.minion[data-zone="board"],.loop-tile{touch-action:none}
.guide-drag-path{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1}.guide-drag-path path{fill:none;stroke:#ffe39e;stroke-width:3;stroke-dasharray:6 6;opacity:.8}.guide-drag-finger.ui-icon{animation:guide-drag-demo 2s ease-in-out infinite;z-index:2}.guide-dialog{z-index:3}
@keyframes guide-drag-demo{0%,15%{transform:translate(0,0);opacity:.5}30%{opacity:1}80%,100%{transform:translate(var(--drag-dx),var(--drag-dy));opacity:.8}}
.home-links{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:5px}.home-links>button{min-height:48px;height:48px;font-size:12px}.home-actions>button{min-height:49px}.story-progress{display:flex;justify-content:center;gap:7px;margin:15px 0}.story-progress>i{height:5px;width:20px;background:#6d8577;border-radius:3px}.story-progress>i.active{background:#efcf84}.flow-banner .story-skip{display:block;margin-top:7px;padding:3px;border:0;min-height:26px;background:transparent;color:#c5d1bc;font-size:11px}.flow-banner .arrival-host>p{font-size:14px;line-height:23px}.flow-banner .arrival-host{margin-bottom:15px}.flow-banner .arrival-host>.portrait{min-width:65px;width:65px;height:65px}
/* v0.13: drag-only board manipulation, fixed dock, and shop-area recycling. */
.detail-card>.detail-portrait{width:180px;height:178px;min-height:178px;max-height:27cqh;aspect-ratio:auto;margin:4px auto;background:transparent;mix-blend-mode:multiply;position:relative}.detail-portrait>svg{width:100%;height:100%}.detail-card>.stats{width:180px;max-width:100%;margin:0 auto 4px}.detail-card>.detail-actions:empty{display:none}
.shop-grid{position:relative}.recycle-overlay{position:absolute;inset:0;z-index:18;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;background:#233b3be8;color:#f1e6ca;border:2px dashed #d2c39c;border-radius:4px;pointer-events:none;text-shadow:0 1px #142a2b}.recycle-overlay>svg{height:62px;width:62px;filter:drop-shadow(0 3px 2px #0b222966)}.recycle-overlay>b{font-size:19px;letter-spacing:2px}.recycle-overlay>span{font-size:13px;color:#ead39b}.recycle-overlay.drag-over{background:#3a5748ef;border-color:#ffe1a0;box-shadow:inset 0 0 20px #e6ca8055}.drag-origin{opacity:.42}.loop-tile.drop-allowed{outline:1px dashed #c9d5b3;outline-offset:-3px}.loop-tile.drag-over{outline:3px solid #9de4bb!important;outline-offset:-1px}.loop-tile.position-recommended{outline:2px solid #ffe57e!important;border-color:#ffe57e!important;outline-offset:0}.dragging-piece .position-hint{pointer-events:none}.minion.drag-ghost{position:fixed!important;inset:auto;width:86px!important;height:120px!important;display:block;z-index:9999;border:2px solid #e3c987;border-radius:4px;background:#f0e3c7;color:#284841;pointer-events:none;box-shadow:0 5px 15px #0a1b2d88;padding:0;overflow:hidden}.drag-ghost>.portrait{position:absolute;inset:15px 0 22px;width:100%;height:auto;max-width:none;aspect-ratio:auto}.drag-ghost>.portrait>svg{width:100%;height:100%}.drag-ghost>strong{position:absolute;top:0;left:0;right:0;text-align:center;font-size:11px;line-height:16px}.drag-ghost>.faction-tag{display:none}.drag-ghost>.stats{position:absolute;bottom:0;left:2px;right:2px;display:flex;justify-content:space-between}.drag-ghost .stats b{font-size:17px}.drag-ghost .ui-icon{width:14px;height:14px}
.position-recommended{outline:2px solid #e9dc88;outline-offset:-1px;box-shadow:0 0 9px #f5d66c,inset 0 0 10px #ebdc7580!important}.position-recommended.vacant .empty-slot{background:#355c45b0}.position-hint{position:absolute;z-index:7;top:21px;left:1px;padding:0 2px;background:#f0dc92;color:#375442;font-size:9px;line-height:13px;pointer-events:none}
.formation-controls{display:flex;align-items:center;justify-content:space-between;gap:5px}.formation-controls>button{font-size:11px;min-height:32px;height:32px;padding:2px 4px;border-width:3px}.formation-preview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;background:#274b49;padding:7px;border:1px solid #96855b;border-radius:4px}.formation-preview>div{height:108px;background:#ecdfbe;border:1px solid #a38b59;position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;gap:1px;color:#365349}.formation-preview>div>span{height:19px;width:100%;padding:2px 3px;display:flex;justify-content:space-between;background:#315450;color:#efdfb1;font-size:10px;line-height:15px}.formation-preview .portrait{height:63px;width:100%;min-height:63px;background:transparent;mix-blend-mode:multiply}.formation-preview strong{font-size:10px;line-height:18px;white-space:nowrap;letter-spacing:-.4px}.formation-preview small{margin:auto;font-size:11px}.formation-preview .formation-moved{outline:2px solid #e3c76a;outline-offset:-2px}.formation-changes{font-size:12px!important;line-height:20px!important;padding:8px;background:#dce2c5;margin-top:6px!important}

/* v0.14: the guide animation keeps its phase across timed renders. */
.guide-dialog .guide-reason{font-size:12px;line-height:19px;color:#536257;border-top:1px solid #b9af8d;padding-top:5px;margin-top:6px}.guide-dialog b{padding-right:8px;display:block}.dragging-piece .guide-finger,.dragging-piece .guide-drag-path{visibility:hidden}.flow-banner .arrival-host>p{white-space:pre-line}

.online-home{background:#48684f!important;color:#ffedbc}.net-screen{height:100%;overflow:auto;padding:24px 18px;display:flex;flex-direction:column;gap:12px}.net-heading{text-align:center}.net-heading h1{font:30px KaiTi,serif;margin:8px}.net-paper{padding:18px 16px;background:#f0e5cb;color:#304f49;border:2px solid #b49b6c;border-radius:7px;display:flex;flex-direction:column;gap:12px}.net-paper label{font-size:13px;display:flex;flex-direction:column;gap:6px}.net-paper input:not([type=checkbox]),.net-paper select{width:100%;padding:10px;border:1px solid #a78f67;background:#fff5dd;color:#2c4d48;font:16px 'Microsoft YaHei',sans-serif;border-radius:4px;min-height:42px}.net-paper hr{width:100%;border:0;border-top:1px solid #c3b58f}.net-paper p{font-size:12px;line-height:20px;color:#58675d}.net-paper .net-check{flex-direction:row;align-items:center;gap:8px}.net-check input{width:19px;height:19px}.room-code{text-align:center}.room-code small{display:block;color:#7b6640}.room-code strong{font-size:29px;letter-spacing:6px}.net-copy{display:grid;grid-template-columns:1fr 1fr;gap:5px}.net-copy button{font-size:12px;padding:5px;border-width:3px}.net-seats{display:grid;grid-template-columns:1fr 1fr;gap:7px}.net-seats>div{background:#dedfc3;padding:10px;border:1px solid #b4b28a;min-width:0}.net-seats b{font-size:13px;display:block;overflow-wrap:anywhere}.net-seats small{color:#667560;display:block;font-size:11px;margin-top:4px}.net-connection{font-size:12px;line-height:18px;color:#edcf9b;overflow-wrap:anywhere}.net-dock{display:grid;grid-template-columns:70px 1fr 55px;align-items:center;gap:8px}.net-dock>span b{font-size:12px}.net-dock small{font-size:9px;display:block}.net-dock p{font-size:12px}.net-dock button{font-size:12px;padding:3px;border-width:3px}.net-spectator{overflow:auto}.net-spectator h2{font-size:20px;margin:15px 0}.net-spectator h3{margin:10px 0}.net-spectator .loop-board{min-height:200px}.net-screen>.net-paper{flex-shrink:0}

/* Build matches use the same light edge as recommended seats, with no extra labels. */
.shop-grid>.offer.planned-offer{outline:2px solid #ffe57e!important;outline-offset:1px;border-color:#f8df9c!important;box-shadow:0 0 8px 2px #f5d66caa,inset 0 0 14px #f6e28c80!important;z-index:2}.shop-grid>.offer.planned-offer .offer-heading{background:linear-gradient(180deg,#fff3bc88,transparent)}

/* Three discovery cards sit on the dimmed stage, without a surrounding window. */
.reward-layer{position:absolute;inset:0;z-index:45;background:#061b25cf;display:flex;align-items:center;justify-content:center;padding:18px 11px;backdrop-filter:blur(2px)}.reward-presentation{width:100%;max-width:570px;text-align:center;background:none;border:0;box-shadow:none}.reward-presentation>header{margin:0 0 18px}.reward-presentation h2{font:27px KaiTi,serif;color:#ffe5ad;margin:6px 0}.reward-presentation header>p:last-child{font-size:12px;line-height:19px;color:#e4dfc7;margin:0 auto;max-width:320px}.reward-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:stretch}.reward-card{height:clamp(380px,48cqh,420px);min-width:0;display:flex;flex-direction:column;gap:5px;padding:9px 6px 7px;background:#f2e6ca;color:#294b43;border:2px solid #c2a46a;border-radius:5px;box-shadow:0 6px 15px #0006}.reward-card h3{font-size:13px;line-height:20px;white-space:nowrap;letter-spacing:-.4px}.reward-tier{height:13px}.reward-tier .ui-icon{width:12px;height:12px}.reward-card>.portrait{width:100%;height:clamp(85px,13cqh,115px);min-height:85px;max-height:115px;flex-shrink:0;background:transparent;mix-blend-mode:multiply}.reward-card>.faction-tag{align-self:center;font-size:9px;max-width:100%}.reward-skill{flex:1;min-height:50px;overflow:auto;font-size:12px;line-height:18px;text-align:left;overflow-wrap:anywhere}.reward-card>.stats{font-size:17px;flex-shrink:0}.reward-card .stats .ui-icon{width:16px;height:16px}.reward-card>button{min-height:35px;height:35px;padding:3px;border-width:3px;font-size:13px;flex-shrink:0}.reward-card:hover{outline:2px solid #ffe79d;outline-offset:1px;box-shadow:0 0 18px #ffe49166}.reward-card:focus-within{outline:2px solid #ffdf8b;outline-offset:2px}@container(max-width:375px){.reward-cards{gap:6px}.reward-card{padding:7px 4px}.reward-skill{font-size:11px;line-height:17px}.reward-card h3{font-size:12px}.reward-presentation>header{margin-bottom:12px}}

/* A stage frame exposes the valance, side curtains and footlights in reserved, non-overlapping strips. */
.army{position:relative;isolation:isolate;container-type:inline-size;background:#285256;border-radius:6px;overflow:hidden;box-shadow:0 2px 5px #05121780,inset 0 0 0 1px #ba9b61}.army:before,.army:after{content:'';position:absolute;left:0;right:0;z-index:0;pointer-events:none;background-image:var(--art-stage);background-size:100% auto;background-repeat:no-repeat}.army:before{top:0;height:46px;background-position:center top}.army:after{bottom:0;height:28px;background-position:center bottom}.army>.loop-board{padding:46px 24px 28px;background:none;box-shadow:none;border:0;z-index:1}.army>.loop-board:before,.army>.loop-board:after{top:46px;bottom:28px;width:24px;height:auto;z-index:-1;background-size:100cqw auto}.army>.loop-board:before{left:0;right:auto;background-position:left center}.army>.loop-board:after{left:auto;right:0;background-position:right center}.army .stage-plaque{top:24px;left:23px;right:23px;height:21px;background:#20484b99;border-bottom:0}.army .stage-plaque h2{font-size:16px;line-height:20px}.army .loop-row{gap:6px}.army .loop-return{background:#21484bb3}.combat-loop{background-color:#285256;background-image:none}
@container(max-height:780px){.army>.loop-board{padding:36px 17px 20px}.army:before{height:36px}.army:after{height:20px}.army>.loop-board:before,.army>.loop-board:after{top:36px;bottom:20px;width:17px}.army .stage-plaque{top:18px;left:17px;right:17px;height:18px}.army .stage-plaque h2{font-size:14px;line-height:18px}.army .loop-row{gap:5px}}
/* Golden units have a separate copper-and-gold frame; recommendation light stays outside it. */
.loop-tile.golden{border:3px solid #dfac4d!important;border-image:none!important;border-radius:4px;background:#d7b16b;outline:1px solid #fff0ae;outline-offset:-1px;box-shadow:0 0 6px #f8d77980,inset 0 0 0 1px #704821!important}.loop-tile.golden:before{content:'';position:absolute;inset:1px;z-index:8;border:1px solid #fff2be;border-radius:2px;pointer-events:none}.loop-tile.golden:after{content:'';position:absolute;left:2px;right:2px;top:21px;bottom:2px;z-index:8;pointer-events:none;background:linear-gradient(135deg,#ffe9a7 0 49%,transparent 51%) left top/8px 8px no-repeat,linear-gradient(225deg,#ffe9a7 0 49%,transparent 51%) right top/8px 8px no-repeat,linear-gradient(45deg,#d59a3f 0 49%,transparent 51%) left bottom/8px 8px no-repeat,linear-gradient(315deg,#d59a3f 0 49%,transparent 51%) right bottom/8px 8px no-repeat}.loop-tile.golden .tile-floor{background:linear-gradient(#77542c,#4c3724);border-color:#edca76}.loop-tile.golden .tile-floor>.seat-name{color:#fff0bc}.loop-tile.golden .tile-floor>b{color:#fff2b5}.hand-card.golden-hand{outline:0}.hand-card.golden-hand>.minion{border:2px solid #dfac4d;border-radius:4px;outline:1px solid #fff1bd;outline-offset:-4px;background:#efdfad;box-shadow:0 0 6px #f8d779aa,inset 0 0 0 2px #a8702a}.hand-card.golden-hand>.minion:after{content:'';position:absolute;inset:1px;border:1px solid #fff1bd;pointer-events:none}.minion.drag-ghost.golden-ghost{border:3px solid #edbe56;box-shadow:0 0 10px #f8d779bb,0 5px 15px #0a1b2d88}

/* The curtain carries the stage identity; directions belong in the tutorial. */
.loop-gap{height:8px;min-height:8px;flex:none}.combat-loop .loop-gap{height:6px;min-height:6px}
/* Keep the shop within a budget; only skill prose scrolls. */
.shop-panel,.shop-panel.dense-shop{height:clamp(250px,33cqh,300px);min-height:0;max-height:none;flex:0 0 auto;gap:5px;overflow:visible}
.shop-panel .station-host{height:56px;min-height:56px;flex:none}
.shop-panel .shop-grid{flex:1;min-height:0;grid-template-rows:minmax(0,1fr)}
.shop-panel .offer{min-height:0;padding:3px;border-width:3px;gap:2px;--offer-header-h:83px;--offer-inset:6px;overflow:visible}
.shop-panel .card-inspect{flex:1;min-height:0;gap:2px;overflow:hidden}
.shop-panel .offer-heading{grid-template-columns:1fr;grid-template-rows:11px 16px 54px;gap:1px;min-height:83px;height:83px;flex:none}
.shop-panel .offer-heading>.portrait{width:100%;height:54px;min-height:54px;grid-column:1;grid-row:3}
.shop-panel .offer-heading>.card-tier{grid-row:1;grid-column:1;height:11px;font-size:10px;line-height:11px}
.shop-panel .offer-heading>.faction-tag{grid-row:1;font-size:8px;line-height:11px}
.shop-panel .offer-heading>.card-name{grid-row:2;font-size:11px;line-height:16px;min-height:16px}
.shop-panel .card-skill{flex:1 1 0;min-height:0;max-height:none;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#9a956c #e8dec3;padding:2px 2px 2px 0;font-size:12px;line-height:16px;border:0}
.shop-panel .card-skill::-webkit-scrollbar{width:3px}.shop-panel .card-skill::-webkit-scrollbar-thumb{background:#9a956c;border-radius:3px}
.shop-panel .card-inspect>.stats{flex:none;height:18px;min-height:18px;margin:0}.shop-panel .card-inspect>.stats b{font-size:14px;line-height:18px}
.shop-panel .shop-controls{flex:none;height:30px;min-height:30px}
.shop-panel .offer .buy-button{top:calc(var(--offer-header-h) + var(--offer-inset) - 23px);bottom:auto;position:absolute}
/* Legacy saves with five/six goods use the same fixed budget. */
.shop-panel.dense-shop .shop-grid{grid-template-rows:repeat(2,minmax(0,1fr));gap:4px}
.shop-panel.dense-shop .offer{padding:2px;border-width:2px;--offer-header-h:49px;--offer-inset:4px}
.shop-panel.dense-shop .offer-heading{grid-template-rows:10px 13px 24px;height:49px;min-height:49px}
.shop-panel.dense-shop .offer-heading>.portrait{height:24px;min-height:24px}.shop-panel.dense-shop .offer-heading>.card-name{font-size:10px;line-height:13px;min-height:13px}
.shop-panel.dense-shop .card-skill{font-size:11px;line-height:14px;padding-block:0}.shop-panel.dense-shop .card-inspect>.stats{height:15px;min-height:15px}.shop-panel.dense-shop .card-inspect>.stats b{font-size:12px;line-height:15px}
/* The candidate bench keeps a vertical card even when empty. */
.hand-panel,.hand-panel.hand-empty,.hand-panel.dragging-hand{height:112px;min-height:112px;max-height:112px;padding:3px 8px 5px;flex:none}
.hand-strip,.hand-card,.empty-hand,.hand-panel.dragging-hand .hand-card{height:86px;min-height:86px}
.hand-card{max-width:72px}.hand-strip:has(.hand-card:nth-child(6)){padding-right:35px}.hand-strip:has(.hand-card:nth-child(6)) .hand-card>.minion,.hand-strip:has(.hand-card:nth-child(6)) .hand-card:last-child{width:66px}
/* All stages use the same four scenery strips, including both battle boards. */
.army{max-height:none;min-height:0;background:#285256;flex:1}
.army:before,.army:after,.loop-board:before,.loop-board:after{display:none}
.army>.loop-board,.combat-loop{--stage-top:32px;--stage-side:18px;--stage-bottom:20px;container-type:inline-size;padding:var(--stage-top) var(--stage-side) var(--stage-bottom);background:#285256;border:0;border-radius:6px;box-shadow:inset 0 0 0 1px #b69b65;overflow:hidden;position:relative;isolation:isolate}
.stage-scenery{position:absolute;inset:0;pointer-events:none;z-index:0}
.stage-scenery>i{position:absolute;display:block;background-image:var(--art-stage);background-repeat:no-repeat;background-size:100cqw auto;pointer-events:none}
.stage-valance{top:0;left:0;right:0;height:var(--stage-top);background-position:center top}
.stage-footlights{bottom:0;left:0;right:0;height:var(--stage-bottom);background-position:center bottom}
.stage-wing{top:var(--stage-top);bottom:var(--stage-bottom);width:var(--stage-side)}.stage-wing-left{left:0;background-position:left center}.stage-wing-right{right:0;background-position:right center}
.loop-row{position:relative;z-index:1}.loop-gap{position:relative;height:8px;min-height:8px;flex:none}
/* Names, factions and multiplier badges overlay the portrait, without a black header. */
.loop-tile>.minion,.empty-slot{inset:0}
.loop-tile .minion>strong{display:block;top:2px;left:1px;right:1px;z-index:5;padding:0;background:linear-gradient(#f4ead3d9,#f4ead35c);height:15px;min-height:15px;font-size:11px;line-height:15px;font-weight:700;color:#23443f;text-shadow:0 1px #fff1cf;white-space:nowrap;overflow:hidden}
.loop-tile .minion>.faction-tag,.combat-loop .minion>.faction-tag{top:18px;right:1px;left:auto;z-index:5;font-size:8px;line-height:10px;max-width:100%;background:#f5e9d2cc}
.loop-tile .minion>.portrait{inset:14px 0 19px;width:100%;height:auto;background:transparent}
.loop-tile .tile-floor,.loop-tile.golden .tile-floor{display:flex;align-items:center;justify-content:center;left:50%;right:auto;top:32px;transform:translateX(-50%);height:18px;min-height:18px;width:auto;min-width:27px;z-index:6;padding:0 4px;border:1px solid #a68e5b99;border-radius:9px;background:#f4e8cbdb;pointer-events:none}
.loop-tile .tile-floor>b,.loop-tile.golden .tile-floor>b{font-size:14px;line-height:16px;color:#645122;text-shadow:0 1px #fff2cc}
.loop-tile .bead{display:none!important}.empty-slot{padding-top:25px;background:#284c50a6}.empty-slot .ui-icon{width:23px;height:23px}.empty-slot small{font-size:10px}
.relay-dots{top:auto;bottom:22px;left:2px;font-size:8px;line-height:10px}.taunt-label{top:auto;bottom:21px}
.loop-tile.golden:after{top:2px}.loop-tile .minion>.stats{z-index:6}
.loop-tile.spotlit .portrait{filter:brightness(1.14) saturate(1.06)}.loop-tile.spotlit{outline:2px solid #f8dba1;outline-offset:-1px;box-shadow:0 0 10px #f6d39288}
.stage-light{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;opacity:0;overflow:hidden}.stage-light.visible{opacity:1}
.combat-loop{--stage-top:28px;--stage-side:16px;--stage-bottom:18px}
.combat-loop .loop-gap{height:6px;min-height:6px}.combat-loop .minion>strong{font-size:10px;line-height:14px;height:14px;min-height:14px;top:1px}.combat-loop .minion>.faction-tag{top:16px;font-size:7px;line-height:9px}.combat-loop .tile-floor{top:27px;height:17px;min-height:17px}.combat-loop .tile-floor>b{font-size:12px;line-height:15px}
.combat-loop .minion>.portrait{inset:12px 0 18px}.combat-loop .minion>.stats b{font-size:16px;line-height:18px}.combat-loop .minion>.stats{min-height:20px}
@container(max-height:780px){
 .shop-panel,.shop-panel.dense-shop{height:clamp(222px,32.5cqh,250px);gap:4px}.shop-panel .station-host{height:46px;min-height:46px}.shop-panel .offer{padding:2px;--offer-header-h:72px;--offer-inset:5px}.shop-panel .offer-heading{grid-template-rows:11px 15px 44px;height:72px;min-height:72px}.shop-panel .offer-heading>.portrait{height:44px;min-height:44px}.shop-panel .offer-heading>.card-name{line-height:15px;min-height:15px}.shop-panel .card-skill{font-size:11px;line-height:14px}.shop-panel .card-inspect>.stats{height:17px;min-height:17px}.shop-panel .shop-controls,.shop-panel .shop-controls>button{height:27px;min-height:27px}
 .hand-panel,.hand-panel.hand-empty,.hand-panel.dragging-hand{height:98px;min-height:98px;max-height:98px}.hand-strip,.hand-card,.empty-hand,.hand-panel.dragging-hand .hand-card{height:72px;min-height:72px}
 .army>.loop-board{--stage-top:27px;--stage-side:15px;--stage-bottom:17px}.combat-loop{--stage-top:24px;--stage-side:14px;--stage-bottom:16px}
 .loop-tile .minion>strong{font-size:10px;line-height:14px;min-height:14px;height:14px}.loop-tile .minion>.faction-tag{top:16px;font-size:7px;line-height:9px}.loop-tile .tile-floor{top:28px;height:17px;min-height:17px}.loop-tile .tile-floor>b{font-size:13px;line-height:15px}.combat-loop .tile-floor{top:25px}
}
@container(max-height:660px){
 .game-header{height:46px;min-height:46px}.shop-panel,.shop-panel.dense-shop{height:202px}.shop-panel .station-host{height:38px;min-height:38px}.shop-panel .offer-heading{grid-template-rows:10px 14px 33px;height:59px;min-height:59px}.shop-panel .offer-heading>.portrait{height:33px;min-height:33px}.shop-panel .offer{--offer-header-h:59px}.hand-panel,.hand-panel.hand-empty,.hand-panel.dragging-hand{height:88px;min-height:88px;max-height:88px}.hand-strip,.hand-card,.empty-hand,.hand-panel.dragging-hand .hand-card{height:62px;min-height:62px}.army>.loop-board{--stage-top:23px;--stage-bottom:14px;--stage-side:13px}
}
/* Reserve a readable portrait shape and draw the whole stage through a nine-slice frame. */
.stage-scenery{border:solid transparent;border-width:var(--stage-top) var(--stage-side) var(--stage-bottom);border-image-source:var(--art-stage);border-image-slice:110 150 200 fill;border-image-repeat:stretch}
.stage-scenery>i{display:none}
.hand-card{max-width:58px}
@container(max-height:780px){.shop-panel,.shop-panel.dense-shop{height:clamp(214px,30cqh,236px)}.hand-card{max-width:50px}.army>.loop-board{--stage-side:22px}}
@container(max-height:660px){.shop-panel,.shop-panel.dense-shop{height:194px}.hand-card{max-width:44px}.army>.loop-board{--stage-side:28px}}
/* Old five/six-item saves keep a scrollable line rather than collapsing skill text to zero. */
.shop-panel.dense-shop .offer-heading{grid-template-columns:minmax(0,1fr) 24px;grid-template-rows:10px 13px;min-height:25px;height:25px;gap:1px}
.shop-panel.dense-shop .offer-heading>.portrait{grid-column:2;grid-row:1/3;width:24px;height:24px;min-height:24px}
.shop-panel.dense-shop .offer-heading>.card-name{grid-column:1;grid-row:2;font-size:10px;text-align:left;overflow:hidden}
.shop-panel.dense-shop .offer-heading>.faction-tag{font-size:7px;line-height:10px}.shop-panel.dense-shop .offer{--offer-header-h:25px}.shop-panel.dense-shop .offer .buy-button{top:3px;right:2px;width:25px;height:21px;min-height:21px;font-size:10px}
.shop-panel.dense-shop .card-skill{min-height:14px}
@media(min-width:600px){#app{--frame-w:min(480px,calc(var(--host-h,100dvh) / 1.85))}}
/* Multipliers straddle the frame as headings; the body still clips its portrait. */
.loop-tile{overflow:visible}
.loop-tile .tile-floor,.loop-tile.golden .tile-floor{top:-9px;height:18px;min-height:18px;z-index:10;min-width:32px;padding:0 6px;background:#f4e6c7;border:1px solid #aa8c50;border-radius:6px;box-shadow:0 1px 3px #132b3066}
.loop-tile .minion>strong{top:10px}
.loop-tile .minion>.faction-tag{top:26px}
.loop-gap{height:18px;min-height:18px}
.combat-loop .tile-floor,.combat-loop .loop-tile.golden .tile-floor{top:-8px;height:16px;min-height:16px;min-width:29px;padding:0 5px}
.combat-loop .minion>strong{top:9px}.combat-loop .minion>.faction-tag{top:24px}
.combat-loop .loop-gap{height:16px;min-height:16px}
/* Empty seats expose the stage, with a light outline instead of an opaque slab. */
.loop-tile.vacant{background:transparent;border:1px solid #d0bd8359;border-image:none;border-radius:4px;box-shadow:inset 0 0 10px #c6d4b510}
.loop-tile.vacant .empty-slot{background:linear-gradient(180deg,#42666822,#15363b33);border-radius:3px;padding-top:15px}
.loop-tile.vacant .empty-slot small{color:#e0dec8;text-shadow:0 1px 2px #102b32}
.loop-tile.vacant.spotlit{border-color:#f4dca2;box-shadow:0 0 10px #f6d39266,inset 0 0 12px #f6df9b22}
/* Compact chrome returns the saved height to shop reading rather than shrinking the stage. */
.game-header{height:40px;min-height:40px;grid-template-columns:auto auto minmax(0,1fr) 58px 28px;gap:5px;padding:2px 8px}
.game-header .resource{gap:3px;white-space:nowrap}.game-header .resource>.ui-icon{width:22px;height:24px}.game-header .resource b{font-size:20px;line-height:25px}
.round-meta{display:flex;flex-direction:column;justify-content:center;gap:0;min-width:0;padding-left:3px}.round-meta>b{font-size:11px;line-height:15px;color:#ead8a4;font-weight:500;white-space:nowrap}.round-meta>small{font-size:9px;line-height:11px;color:#aabfb6;white-space:nowrap}
.game-header .guide-shortcut{width:58px;height:32px;min-height:32px;min-width:0;padding:1px 5px;border-width:2px;font-size:12px;justify-content:center;text-align:center;box-shadow:none}
.game-header .guide-shortcut .button-label{width:auto;justify-content:center;line-height:18px;color:#f3dfb0}.game-header .guide-shortcut.has-build{border-color:#d7c78b;box-shadow:0 0 4px #d5c57a33}
.game-header .icon-button{width:28px;height:34px;min-height:34px;padding:2px}.game-header .icon-button>.ui-icon{width:22px;height:22px}
.opponent-strip{height:34px;min-height:34px;padding-block:2px}.opponent-chip{height:29px;min-height:29px}
.shop-panel,.shop-panel.dense-shop{height:clamp(272px,calc(33cqh + 22px),322px)}.shop-panel .station-host{height:48px;min-height:48px}
/* A quiet footer carries the name; only a two-character faction tab remains near the art. */
.loop-tile .minion>.portrait,.combat-loop .minion>.portrait{inset:1px 0 32px;width:100%;height:auto}
.loop-tile .minion>strong,.combat-loop .minion>strong{top:auto;bottom:19px;left:1px;right:1px;height:12px;min-height:12px;line-height:12px;font-size:10px;font-weight:500;padding:0;background:#f4e9d2ed;border:0;text-shadow:none;color:#26473f}
.loop-tile .minion>.faction-tag,.combat-loop .minion>.faction-tag{top:2px;right:1px;left:auto;max-width:23px;padding:0 1px;font-size:8px;line-height:10px;font-weight:500;border-left-width:1px;background:#f7edd6cf}
.loop-tile .minion>.stats,.combat-loop .minion>.stats{height:18px;min-height:18px;max-height:18px;padding:0 2px;gap:1px;align-items:center}
.loop-tile .minion .stats b,.combat-loop .minion .stats b{font-size:16px;line-height:18px}.loop-tile .minion .stats b.compact,.loop-tile .minion .stats b.huge{font-size:12px;line-height:17px}.loop-tile .minion .stats .ui-icon{width:11px;height:11px}
.hand-card .minion>.faction-tag{display:none}
@container(max-height:780px){.opponent-strip{height:31px;min-height:31px}.opponent-chip{height:26px;min-height:26px}.opponent-chip>.portrait{height:22px}.opponent-chip b{font-size:9px;line-height:10px}.opponent-chip small{font-size:8px;line-height:9px}.shop-panel,.shop-panel.dense-shop{height:clamp(234px,calc(30cqh + 20px),256px)}.shop-panel .station-host{height:40px;min-height:40px}.loop-tile .minion>strong{font-size:9px}}
@container(max-height:660px){.shop-panel,.shop-panel.dense-shop{height:204px}.shop-panel .station-host{height:34px;min-height:34px}.game-header{height:40px;min-height:40px}}
.shop-panel .card-skill{scrollbar-width:auto;scrollbar-color:auto}.shop-panel .card-skill::-webkit-scrollbar{width:3px}
/* Keep the useful two-line guide identity within the compact header. */
.game-header{grid-template-columns:auto auto minmax(0,1fr) 104px 28px}
.game-header .guide-shortcut{width:104px;padding:0 5px;height:32px;min-height:32px}
.game-header .guide-shortcut .button-label{display:block;text-align:center;line-height:12px}
.game-header .guide-shortcut .button-label>span{display:block}
.game-header .guide-shortcut span>small{display:block;font-size:9px;line-height:11px;color:#c8d5c4}
.game-header .guide-shortcut span>b{display:block;font-size:12px;line-height:15px;color:#f3dfb0;font-weight:500}
.round-meta>small{overflow:hidden;text-overflow:ellipsis}
.guide-observe .guide-finger,.guide-observe .guide-drag-path{display:none}

.stage-light[data-kind="secondary"]>.stage-light-cone,.stage-light[data-kind="secondary"] .stage-light-cone{filter:hue-rotate(115deg);opacity:.85}.skill-float.revive{color:#d0eafb;text-shadow:0 1px 3px #183b47}

/* v0.17: independent simultaneous lamps, each with its own visible source. */
.light-beam{mix-blend-mode:screen}.beam-cone{transition:none}.beam-source{filter:drop-shadow(0 0 3px #fff2c3)}.lamps-caption{font-size:8px;font-weight:700;fill:#fff0c5;paint-order:stroke;stroke:#183b45;stroke-width:2px;stroke-linejoin:round}.stage-light .light-beam:nth-of-type(2) .beam-source{filter:drop-shadow(0 0 3px #91e5ef)}

.light-beam{mix-blend-mode:normal}.beam-core{stroke-width:3;stroke-opacity:.34;filter:blur(1.2px)}.lamps-caption{font-size:9px}

/* Story belongs to the same portrait canvas. Only the route map scrolls. */
.in-story{display:block!important;overflow:hidden;background:#132c35;color:#f4e7c9;isolation:isolate}.in-story>section{position:relative;width:100%;height:100%;overflow:hidden}.story-home{position:relative;background:#ece0bb!important;color:#284d4b!important;border-color:#d2ba79!important}.story-home:before{content:'✦';margin-right:8px;color:#bd6f42}.story-map-screen{display:flex;flex-direction:column}.story-map-screen>header,.story-reading-bar{position:absolute;z-index:12;inset:0 0 auto;display:flex;align-items:center;gap:10px;padding:12px 14px;background:linear-gradient(#122c35f5,#122c3570,transparent);min-height:64px}.story-map-screen>header{position:relative;background:#17363d;border-bottom:1px solid #b5a16b55;flex:none}.story-map-screen header>div{flex:1}.story-map-screen header small{font-size:10px;color:#d5b679;letter-spacing:3px}.story-map-screen h1{font-size:18px;line-height:24px;margin:3px 0 0;font-family:serif;letter-spacing:1px}.story-top-button{flex:none;width:34px;height:34px;min-height:34px;padding:7px!important;background:none!important;border:1px solid #e1c58565!important;color:#f3dbab;border-radius:50%!important;box-shadow:none!important}.story-top-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}.story-map-scroll{flex:1;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none;touch-action:pan-y}.story-map-world{position:relative;width:100%;aspect-ratio:1/3;min-height:1100px}.route-land{position:absolute;inset:0;background:var(--art-storyMap) center/100% 100% no-repeat}.route-track{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.42}.route-track path{fill:none;stroke:#fff1bb;stroke-width:5;stroke-dasharray:6 12;stroke-linecap:round;filter:drop-shadow(0 1px 1px #5a462d)}.route-stop{position:absolute;transform:translate(-50%,-50%);border:0!important;background:none!important;box-shadow:none!important;overflow:visible!important;padding:0!important;min-height:62px;min-width:100px;color:#243f3d!important;z-index:3}.route-stop:disabled{opacity:1!important;cursor:default}.route-pin{display:grid;place-items:center;width:38px;height:38px;margin:0 auto 5px;background:#f3de9b;border:2px solid #846644;border-radius:50%;box-shadow:0 3px 0 #775f40,0 0 0 5px #f8e6a465;font-size:18px;color:#614d31}.route-pin svg{width:22px;height:22px;fill:none;stroke:#395b48;stroke-width:3}.route-stop>b{display:block;white-space:nowrap;font-size:12px;background:#f4e8c9;padding:5px 10px;border-radius:2px;box-shadow:0 2px 2px #493f3570;letter-spacing:1px}.route-stop.available .route-pin{box-shadow:0 3px 0 #775f40,0 0 0 6px #fff0b980,0 0 22px #ffe5a6;animation:routePulse 2.4s ease-in-out infinite}.route-stop.locked{filter:saturate(.3)}.route-stop.locked .route-pin{background:#c6c5ad;box-shadow:0 2px 0 #657b6e}.route-stop.cleared .route-pin{background:#bfd1a9}.route-car{position:absolute;width:83px;height:72px;z-index:5;transform:translate(-50%,-105%);pointer-events:none;transition:left 1.5s cubic-bezier(.36,0,.35,1),top 1.5s cubic-bezier(.36,0,.35,1)}.route-car .story-prop{width:100%;height:100%;filter:drop-shadow(0 4px 2px #273d3659)}.route-car.travelling .story-prop{animation:carBump .17s alternate infinite}.map-end-label{position:absolute;top:5%;left:0;right:0;text-align:center;color:#324e4a;letter-spacing:4px;font-size:12px}.story-map-screen>footer{flex:none;display:flex;align-items:center;gap:14px;min-height:50px;background:#17363d;padding:8px 18px;border-top:1px solid #b5a16b55}.story-map-screen footer>span{color:#efd293;font-family:serif;font-size:20px}.story-map-screen footer p{margin:0;font-size:12px;color:#d3d7be}
.story-scene{position:absolute;inset:0;background-image:var(--art-storyScenes);background-size:200% 200%;background-repeat:no-repeat}.scene-road{background-position:0 0}.scene-station{background-position:100% 0}.scene-bridge{background-position:0 100%}.scene-mill{background-position:100% 100%}.story-prop{display:block;background-image:var(--art-storyActors);background-size:400% 200%;background-repeat:no-repeat;width:100%;height:100%;object-fit:contain}.prop-0{background-position:0 0}.prop-1{background-position:33.333% 0}.prop-2{background-position:66.666% 0}.prop-3{background-position:100% 0}.prop-4{background-position:0 100%}.prop-5{background-position:33.333% 100%}.prop-6{background-position:66.666% 100%}.prop-7{background-position:100% 100%}.story-reading-bar{justify-content:space-between;color:#f7e5bd}.story-reading-bar>span{font-size:11px;letter-spacing:1px;text-shadow:0 1px 3px #122c35;flex:1}.story-skip{background:none!important;border:0!important;font-size:11px!important;min-height:30px!important;padding:0 2px!important;box-shadow:none!important;color:#edddbd!important}.story-comic-screen{display:flex;flex-direction:column;background:#dfd2ae;background-image:radial-gradient(#79604312 .7px,transparent .7px);background-size:5px 5px}.story-comic-screen .story-reading-bar{position:relative;background:#17363d;min-height:56px}.comic-page{padding:14px 12px 0;flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:12px}.comic-panel{position:relative;flex:1;max-height:57%;min-height:0;display:flex;flex-direction:column;filter:drop-shadow(1px 3px 0 #67584255);isolation:isolate}.comic-panel:before{content:'';position:absolute;inset:-3px;z-index:-1;background:#273c3e;clip-path:polygon(.3% 1%,99% 0,100% 99%,0 100%)}.comic-art{position:relative;flex:1;min-height:0;overflow:hidden;background:#152c3b;isolation:isolate}.comic-art .story-scene{background-size:200% 200%}.comic-caption{position:relative;z-index:3;background:#f3e8ce;padding:8px 12px;color:#273f3b;flex:none}.comic-caption small{display:block;color:#8a5338;font:600 12px/16px serif;letter-spacing:2px;margin-bottom:4px}.comic-caption p{font-size:14px;line-height:1.65;margin:0;text-wrap:pretty}.panels-1{padding-bottom:30px}.panels-1 .comic-panel{height:66%;flex:none;max-height:none}.panels-2 .comic-panel{max-height:50%}.panels-3 .comic-panel{max-height:33.333%}.panels-3 .comic-caption{padding:5px 10px}.panels-3 .comic-caption p{font-size:12px;line-height:1.5}.panels-3 .comic-caption small{font-size:10px;margin:0 0 1px}.story-comic-screen>footer{height:62px;flex:none;display:flex;justify-content:flex-end;align-items:center;padding:0 18px}.story-next{width:46px;height:40px;min-height:40px;padding:8px!important;background:none!important;border:1px solid #b18d52!important;box-shadow:none!important;color:#b1843c;border-radius:3px!important}.story-next svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}.story-next:active{transform:translateY(1px)}.panel-enter{animation:panelOpen .42s cubic-bezier(.2,.7,.2,1) both}.panel-enter .story-scene{animation:inkReveal .6s .3s both}.panel-enter .comic-caption{animation:captionIn .45s .8s both}.comic-road{position:absolute;inset:0;width:100%;height:100%;z-index:1}.comic-road path{stroke:#f7db8e;stroke-width:14;opacity:.26;fill:none;stroke-linecap:round}.panel-enter .comic-road path{stroke-dasharray:600;stroke-dashoffset:600;animation:drawRoad .7s .55s forwards}.comic-car{position:absolute;z-index:2;width:38%;height:70%;bottom:4%;left:57%;filter:drop-shadow(0 6px 3px #151f3377)}.panel-enter .comic-car{animation:carDrive 1.45s .75s cubic-bezier(.22,.5,.22,1) both}.comic-sun{position:absolute;left:53%;top:20%;width:65px;aspect-ratio:1;border-radius:50%;background:#e9b878;box-shadow:0 0 50px #edbb7266}.comic-night{position:absolute;inset:0;background:#101c3d;opacity:.62}.panel-enter .comic-sun{animation:sunset 1.6s .35s both}.panel-enter .comic-night{animation:nightFall 1.5s .3s both}.comic-lamp{position:absolute;width:18px;height:30px;border-radius:40%;background:#ffe8a1;box-shadow:0 0 22px 9px #efb75265;z-index:2;top:40%;left:21%}.comic-lamp.light-two{left:76%;top:23%;width:11px;height:20px}.panel-enter .comic-lamp{animation:lampOn .7s .65s both}.panel-enter .light-two{animation-delay:1s}.comic-moth{position:absolute!important;width:32%!important;height:70%!important;inset:auto 17% 4% auto!important;mix-blend-mode:screen;opacity:.9}.panel-enter .comic-moth{animation:mothEnter 1s .5s both}.comic-enemy{position:absolute;width:43%;height:80%;right:10%;bottom:-5%;filter:drop-shadow(0 4px 4px #0a141c77)}.panel-enter .comic-enemy{animation:enemyEnter 1.1s .6s both}.comic-cocoon{position:absolute;height:90%;width:54%;left:22%;top:0;z-index:2;filter:drop-shadow(0 0 16px #f4bc5b88);transform-origin:50% 0;animation:cocoonSway 3s ease-in-out infinite alternate}.comic-boss{position:absolute;width:43%;height:80%;right:5%;bottom:4%;opacity:.72}.panel-enter .comic-boss{animation:mothEnter 1.1s .7s both}.comic-art[data-animation="release"] .comic-boss{transform:translateX(85%) rotate(-12deg);opacity:.2;transition:transform 1.6s,opacity 1.6s}.comic-art[data-animation="release"] .comic-cocoon{opacity:.3;animation:releaseLight 1.4s both}.comic-document{position:absolute;left:20%;top:10%;width:62%;height:80%;background:#efdfb8;transform:rotate(-5deg);border:1px solid #b7a06f;box-shadow:4px 8px 0 #1d252a59;z-index:2;display:flex;align-items:center;justify-content:center;padding:12px}.comic-document span{font:600 17px/1.8 serif;color:#354c46;white-space:pre-line;text-align:center}.comic-document.invitation{background:#aebfc1;transform:rotate(5deg)}.comic-document.letter:before{content:'';position:absolute;width:55%;height:13px;background:#e4d1a1;top:38%;left:20%;transform:rotate(-2deg);box-shadow:0 2px 2px #b4a07530}.comic-document.letter span{position:relative}.panel-enter .comic-document{animation:letterSlide .8s .4s both}.animation-complete *{animation-delay:0s!important;animation-duration:.001s!important}.panel-past *{animation:none!important}.panel-past .comic-road path{stroke-dashoffset:0}
.story-talk-screen>.story-scene{filter:brightness(.8);background-size:300% 200%;background-position-x:75%;transform:scale(1.025)}.story-talk-screen:after{content:'';position:absolute;inset:30% 0 0;background:linear-gradient(transparent,#102831a6 70%);pointer-events:none}.story-cast{position:absolute;inset:14% -7% 23%;display:flex;align-items:flex-end;justify-content:center;gap:0;z-index:2;pointer-events:none}.story-cast .talk-actor{position:relative!important;inset:auto!important;width:58%!important;height:85%!important;flex:none;filter:drop-shadow(0 4px 3px #101f2633);mix-blend-mode:multiply;transition:filter .3s,transform .3s;transform-origin:50% 100%}.story-cast .listening{width:43%!important;height:67%!important;filter:brightness(.68) saturate(.6);transform:translate(7%,1%)}.story-cast .speaking{transform:translate(-3%,-2%);animation:actorArrive .45s ease-out both}.story-cast .portrait svg{overflow:visible}.story-dialogue{position:absolute;inset:auto 12px 16px;z-index:5;background:#efe1bc;color:#263f3b;padding:25px 20px 17px;border:1px solid #b79a61;box-shadow:0 5px 0 #172c31b3;min-height:170px;border-radius:3px}.story-dialogue:before{content:'';position:absolute;inset:5px;border:1px solid #a98b504d;pointer-events:none}.speaker-name{position:absolute;top:-15px;left:14px;min-width:80px;text-align:center;padding:5px 17px;background:#244e50;color:#f2dfa9;border:1px solid #bea569;font:500 15px/20px serif;letter-spacing:2px;box-shadow:0 3px 0 #122e3b40}.story-dialogue>p{font-size:17px;line-height:1.8;margin:0 0 12px;text-wrap:pretty;min-height:64px;animation:captionIn .4s ease-out}.story-dialogue>.story-next{display:block;margin-left:auto;height:32px;min-height:32px;color:#836938;width:40px;padding:4px!important}.story-choices{display:flex;flex-direction:column;gap:8px;margin-top:12px}.story-choices>button{background:#2c5557!important;color:#f4e5bf;border:1px solid #927c4f!important;border-radius:2px!important;font-size:14px;line-height:22px;min-height:39px;padding:7px 10px!important;box-shadow:0 2px 0 #173c3d}.story-result-screen{display:grid;place-items:center;padding:24px}.story-result-screen>.story-scene{filter:brightness(.5)}.story-result-paper{position:relative;background:#f0e3bf;color:#2c4c45;padding:28px 23px;box-shadow:0 7px 0 #13283088;width:100%;text-align:center;border:1px solid #bc9b59}.story-result-paper>small{letter-spacing:2px;font-size:11px;color:#8c6840}.story-result-paper h1{font:500 23px/1.5 serif;margin:14px 0 8px}.story-result-paper p{font-size:13px;line-height:1.9}.story-result-paper>button{width:100%;margin-top:10px;min-height:40px;background:#2b5454!important;color:#f1dfae;border:1px solid #a98853!important}.story-result-art{height:130px;margin:12px auto;width:160px}.story-result-art .portrait{height:100%;width:100%}.story-encounter-strip{display:flex;align-items:center;justify-content:space-between;height:33px;min-height:33px;color:#ecd49c;padding:0 10px;border-bottom:1px solid #c3ab6d55;background:#24494b}.story-encounter-strip button{min-height:25px;height:25px;width:25px;padding:0;background:transparent;border:0;box-shadow:none}.story-encounter-strip strong{font-size:12px}.story-encounter-strip>span{display:flex;align-items:center;font-size:12px}.story-encounter-strip .ui-icon{width:18px;height:18px}.story-prep-hint{display:flex;align-items:center;gap:5px;padding:4px 9px;background:#f0dfb8;color:#254845;flex:none;min-height:34px}.story-prep-hint .portrait{height:27px;width:30px;flex:none}.story-prep-hint p{font-size:10px;line-height:15px;margin:0}.story-enemy-preview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.story-enemy-preview article{border:1px solid #ad9763;background:#e8ddbe;padding:9px;color:#294845}.story-enemy-preview .portrait{height:120px;width:100%}.story-enemy-preview p{font-size:12px;line-height:1.7}.story-enemy-preview b{font-size:13px}.story-enemy-preview .stats{font-size:15px}
/* State silhouettes carry targeting and damage information, without another text band. */
.loop-tile.has-taunt{border-color:#d8e2d7!important;box-shadow:0 0 0 1px #e5ead9,0 0 10px #bcd3c94d!important}.taunt-shield-frame{position:absolute;inset:-2px -2px -4px;width:calc(100% + 4px);height:calc(100% + 6px);pointer-events:none;z-index:7;overflow:visible;filter:drop-shadow(0 2px 1px #182d3c)}.taunt-shield-frame>path{fill:none;stroke:#e3e4cd;stroke-width:3.8;vector-effect:non-scaling-stroke}.taunt-shield-frame .shield-inner{stroke:#647e79;stroke-width:1;opacity:.8}.state-emblem{position:absolute;z-index:9;background-image:var(--art-storyActors);background-size:400% 200%;width:26px;height:32px;pointer-events:none;filter:drop-shadow(0 1px 2px #112f3c80)}.taunt-emblem{background-position:66.666% 100%;left:calc(50% - 11px);bottom:29px;width:22px;height:25px}.armor-emblem{background-position:100% 100%;right:1px;top:14px;display:grid;place-items:center;color:#fff8de}.armor-emblem>b{font-size:15px;font-weight:800;line-height:20px;padding-bottom:2px;text-shadow:0 1px 2px #163f51,1px 0 #163f51,-1px 0 #163f51}.detail-card{position:relative}.detail-card>.taunt-shield-frame{display:none}.detail-card>.state-emblem{top:75px;right:18px;width:36px;height:44px}.detail-card>.taunt-emblem{left:18px;right:auto}.detail-card>.armor-emblem>b{font-size:20px}.skill-float.armor{font-size:17px;color:#d8f4ff;background:#2c647a;clip-path:polygon(8% 0,92% 0,100% 15%,90% 72%,50% 100%,10% 72%,0 15%);padding:4px 8px 10px}
@keyframes panelOpen{from{opacity:0;transform:scale(.86) rotate(-1.2deg)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes inkReveal{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0)}}@keyframes captionIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}@keyframes drawRoad{to{stroke-dashoffset:0}}@keyframes carDrive{from{left:-42%;transform:translateY(-2px) rotate(-3deg)}to{left:57%;transform:translateY(0) rotate(0)}}@keyframes sunset{from{transform:translateY(-20px);opacity:1}to{transform:translateY(110px);opacity:0}}@keyframes nightFall{from{opacity:0}to{opacity:.62}}@keyframes lampOn{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes mothEnter{from{opacity:0;transform:translate(-30px,10px) rotate(-12deg)}to{opacity:.9;transform:translate(0,0) rotate(0)}}@keyframes enemyEnter{from{opacity:0;transform:translateX(130px)}to{opacity:1;transform:translateX(0)}}@keyframes letterSlide{from{opacity:0;translate:40px 45px;rotate:8deg}to{opacity:1;translate:0 0;rotate:0deg}}@keyframes actorArrive{from{opacity:0;translate:14px 0}to{opacity:1;translate:0 0}}@keyframes carBump{to{translate:0 -2px}}@keyframes cocoonSway{from{rotate:-3deg}to{rotate:3deg}}@keyframes routePulse{50%{filter:brightness(1.13);transform:translateY(-2px)}}@keyframes releaseLight{from{opacity:1;filter:drop-shadow(0 0 1px #f4bc5b)}to{opacity:.3;filter:drop-shadow(0 0 25px #f4bc5b)}}
@media(prefers-reduced-motion:reduce){.in-story *,.route-stop.available .route-pin{animation-duration:.001s!important;animation-delay:0s!important;transition-duration:.001s!important}.comic-road path{stroke-dashoffset:0!important}.comic-sun{opacity:0}}
@container(max-height:700px){.story-dialogue{padding:20px 15px 12px;min-height:155px}.story-dialogue>p{font-size:15px;line-height:1.75}.comic-caption p{font-size:13px}.comic-page{padding-top:10px;gap:10px}.story-comic-screen>footer{height:48px}.story-reading-bar{min-height:50px;padding:8px 12px}.story-prep-hint{padding:2px 7px;min-height:30px}.story-prep-hint p{font-size:9px;line-height:13px}}

.story-prop{background:none;overflow:visible}.story-prop>svg{width:100%;height:100%;display:block}.state-emblem{background:none}.state-emblem>.story-prop{position:absolute;inset:0}.armor-emblem>b{position:absolute;inset:0;display:grid;place-items:center}.story-cast .talk-actor{mix-blend-mode:normal}.talk-actor:not(.story-native) svg>svg,.comic-moth svg>svg{filter:url(#story-paper-key)}.route-car{transition:none}.story-map-screen .route-track{opacity:.17}.comic-page{cursor:pointer}.detail-card>.state-emblem{z-index:3}
.panel-past .comic-sun{opacity:0;transform:translateY(110px)}.panel-past .comic-night{opacity:.62}

.story-cast .talk-actor,.comic-moth,.story-result-art>.portrait{background:transparent!important}

.story-cast .portrait>svg{overflow:visible}.story-cast .portrait svg[overflow="hidden"]{overflow:hidden}.story-loading{height:100%;display:grid;place-items:center;background:#17363d}.story-loading>div{text-align:center;color:#f0dba6}.story-loading .ui-icon{width:52px;height:52px;animation:routePulse 1.5s infinite}.story-loading p{font-size:14px;letter-spacing:2px;margin:18px 0}.story-loading button{margin:8px;min-height:36px;background:none;border-color:#d4bd7c}.story-target{outline:2px solid #fff0ad!important;outline-offset:2px;box-shadow:0 0 15px #ffdc8599!important}.loop-board[data-slots="4"] .loop-row{width:52%;margin-inline:auto;grid-template-columns:repeat(2,minmax(0,1fr))}.loop-board[data-slots="4"] .loop-tile{min-width:0}

.talk-actor svg>svg,.comic-moth svg>svg{filter:none!important}.comic-moth{mix-blend-mode:normal}.animation-complete *{animation-iteration-count:1!important}.armor-damage{position:relative;display:inline-grid;width:32px;height:34px;place-items:center;vertical-align:middle}.armor-damage>.story-prop{position:absolute;inset:0}.armor-damage>b{position:relative;font-size:12px;color:#fff6d7;text-shadow:0 1px 2px #123c52}.story-result-paper,.story-dialogue{border-image-source:var(--art-cardFrame);border-image-slice:24 fill;border-image-width:9px}.story-dialogue>*,.story-result-paper>*{position:relative}.story-dialogue>.speaker-name{position:absolute}
@media(prefers-reduced-motion:reduce){.in-story *,.route-stop.available .route-pin{animation:none!important;transition:none!important}.comic-road path{stroke-dashoffset:0!important}.comic-sun{opacity:0}}

.route-stop{display:block!important}.route-car{transform:translate(-50%,-90%)}

.story-map-world{min-height:0}.story-reduced *{animation:none!important;transition:none!important}.story-reduced .comic-road path{stroke-dashoffset:0!important}.story-reduced .comic-sun{opacity:0}

svg.story-scene{width:100%;height:100%;background:none!important;overflow:hidden}svg.story-scene>svg{overflow:hidden}

.story-cast{left:0;right:0}.comic-document b{position:absolute;bottom:10%;right:10%;width:29px;height:29px;border-radius:50%;border:2px solid #a94f3a;opacity:.65;transform:rotate(-12deg)}.comic-document b:before{content:"";position:absolute;inset:5px;border:2px solid #a94f3a;border-bottom-color:transparent;border-radius:50%}

/* v0.19: layouts follow the beat, not a repeated three-strip template. */
.comic-page{gap:12px;padding:12px 12px 0;justify-content:center}
.comic-panel{overflow:visible;max-height:none;min-height:0;flex:1;background:#283e40;padding:3px;filter:drop-shadow(2px 3px 0 #695b4359)}
.comic-panel:before{display:none}.comic-art{background:#253b40;min-height:55px}
.comic-caption{padding:10px 12px;min-width:0}.comic-caption p{font-size:14px;line-height:1.65}
.layout-feature .comic-panel{height:auto;max-height:100%;flex:none}.layout-feature .comic-art{aspect-ratio:3/2;flex:none;max-height:46vh}
.layout-diptych{display:grid;grid-template-rows:1fr 1fr;gap:14px}
.layout-diptych .comic-panel{height:100%;max-height:100%}.layout-diptych .comic-art{min-height:60px}
.layout-origin.panels-1 .comic-panel{height:auto}.layout-origin.panels-1 .comic-art{aspect-ratio:3/2;flex:none}
.layout-origin.panels-2{display:grid;grid-template-rows:1fr 1fr}.layout-origin.panels-2 .comic-panel{max-height:100%}
.layout-origin.panels-3{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:41% 59%;gap:10px}
.layout-origin.panels-3 .comic-panel{max-height:100%;height:100%}.layout-origin.panels-3 .comic-panel:first-child{grid-column:1/-1}
.layout-origin.panels-3 .comic-caption p{font-size:12px;line-height:1.6}.layout-origin.panels-3 .comic-caption{padding:7px 8px}
.frame-slant-left .comic-art{clip-path:polygon(0 0,100% 3%,94% 100%,0 96%)}
.frame-slant-right .comic-art{clip-path:polygon(6% 3%,100% 0,100% 96%,0 100%)}
.frame-slant-left{transform:rotate(-.5deg)}.frame-slant-right{transform:rotate(.5deg)}
.shot-image{height:100%;width:100%}.panel-enter .shot-image{animation:paintScene .85s .22s both;transform-origin:50% 50%}
.story-prev{margin-right:8px}.story-reading-bar .story-top-button{width:30px;height:30px;min-height:30px}.story-reading-bar{gap:8px;padding:9px 12px;min-height:54px}
.story-reading-bar>span{font-size:10px}.story-skip{white-space:nowrap}.story-prev:disabled{opacity:.35}
.origin-night,.scene-warmth,.memory-flash,.passing-near-shadow{position:absolute;inset:0;pointer-events:none}
.origin-night{background:#07122b;opacity:.2}.panel-enter .origin-night{animation:originDark 1.3s .3s both}
.scene-warmth{background:radial-gradient(ellipse at 45% 44%,#ffd86f23,transparent 68%);mix-blend-mode:screen}.panel-enter .scene-warmth{animation:warmReveal 1s .5s both}
.story-core-glow{position:absolute;width:13%;height:30%;border-radius:50%;left:61%;top:34%;background:radial-gradient(#fff3bb66,transparent 70%);mix-blend-mode:screen}.panel-enter .story-core-glow{animation:coreCharge 1.2s .4s both}
.memory-flash{background:#ffedc0;opacity:0}.panel-enter .memory-flash{animation:memoryFlash .9s .5s both}
.passing-near-shadow{background:linear-gradient(100deg,transparent 35%,#152c3533 45%,transparent 55%);opacity:0}.panel-enter .passing-near-shadow{animation:passingShadow 1.7s .3s both}
.new-story-prop{position:absolute;display:block}.new-story-prop svg{width:100%;height:100%;overflow:hidden}
.box-setting{filter:brightness(.55)}.wagon-tailboard{position:absolute;left:-3%;right:-3%;height:29%;bottom:0;background:linear-gradient(175deg,#73533b,#352e2a);border-top:3px solid #ac8052;transform:skewY(-3deg)}
.chest-base{width:57%;height:62%;left:26%;bottom:0;z-index:3}.chest-lid{width:54%;height:62%;left:28%;bottom:35%;z-index:2;transform-origin:50% 92%}
.box-micro{position:absolute!important;background:transparent!important;width:32%!important;height:59%!important;left:7%!important;top:9%!important;z-index:4}
.panel-enter .chest-lid{animation:openLid 1.2s .4s both}.panel-enter .box-micro{animation:microInspect 1.6s .2s both}
.falling-programme{width:29%;height:45%;left:36%;bottom:0;z-index:5;transform:rotate(-12deg)}.panel-enter .falling-programme{animation:programmeFall 1.4s .5s both}
.arriving-mailbag{width:32%;height:67%;right:5%;bottom:0;z-index:3}.panel-enter .arriving-mailbag{animation:mailArrival 1s .4s both}
.key-glint{position:absolute;left:57%;top:50%;width:15%;height:15%;background:radial-gradient(#fff3b340,transparent);opacity:.8}.panel-enter .key-glint{animation:coreCharge 1s .4s both}
.shot-document-label{position:absolute;z-index:5;left:17%;right:17%;bottom:8%;padding:9px 8px;background:#f1e3c6ed;border:1px solid #9d8358;color:#2d4745;box-shadow:0 2px 4px #1725274d;text-align:center;font:600 15px/1.7 serif;transform:rotate(-2deg)}
.shot-document-label small{font:12px/1.7 serif}.document-invitation{background:#e8e3cced}.panel-enter .shot-document-label{animation:captionIn .6s .7s both}
.story-location{position:absolute;left:14px;top:73px;color:#f7e6c3;font:13px/1.4 serif;letter-spacing:2px;z-index:3;text-shadow:0 1px 4px #102c35}
.story-dialogue .speaker-role{font-size:11px;color:#6c7560;display:block;margin:-3px 0 6px;letter-spacing:1px}.story-dialogue>p{font-size:16px;line-height:1.8}
.talk-pov .story-cast{justify-content:center}.talk-pov .listening{filter:brightness(.9) saturate(.85);width:58%!important;height:82%!important;transform:none}
.talk-pov .speaker-name{background:#344455}.story-cast .talk-actor{mix-blend-mode:normal}
.hand-panel.story-hand{position:relative}.story-hand .hand-strip{padding-left:48px}.hand-guide-companion{position:absolute;left:4px;bottom:6px;width:46px;height:66%;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.hand-guide-companion>.portrait{width:45px;height:54px;max-height:85%;background:transparent!important}.hand-guide-companion>span{font-size:9px;color:#ead29e;line-height:12px}
.story-coach-bubble{position:absolute;z-index:85;padding:10px 13px 11px;background:#faf0d2;color:#2c4643;border:2px solid #7f7051;border-radius:18px 17px 15px 20px;box-shadow:0 5px 14px #071d3466;pointer-events:auto;font-size:13px;line-height:1.7}
.story-coach-bubble:after{content:'';position:absolute;left:calc(var(--tail-x) - 8px);bottom:-11px;width:17px;height:17px;background:#faf0d2;border-right:2px solid #7f7051;border-bottom:2px solid #7f7051;transform:rotate(45deg);border-bottom-right-radius:4px}
.story-coach-bubble.bubble-below:after{bottom:auto;top:-11px;transform:rotate(225deg)}
.story-coach-bubble header{display:flex;align-items:center;justify-content:space-between;color:#7c5438;line-height:18px;gap:8px}.story-coach-bubble header button{min-height:20px;width:22px;height:20px;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;color:#8d8a74;font-size:16px}
.story-coach-bubble p{margin:5px 0 7px;font-size:13px;line-height:1.7}.story-coach-bubble>small{display:block;font-size:10px;color:#827456;text-align:right}
.story-coach-bubble .coach-advance{display:block;margin-left:auto;min-height:28px;border:1px solid #8e7f55;background:#305353!important;color:#f6e5bd!important;border-radius:8px!important;padding:3px 12px!important;font-size:12px;box-shadow:none!important}
.story-speaking-source{filter:drop-shadow(0 0 4px #f8d77b99)}.story-target{outline:2px solid #f9db8c!important;outline-offset:2px}
.story-guide-ghost{z-index:96!important;pointer-events:none!important;box-shadow:0 0 14px #f6dd9a80;background:#f1e5c5;border:1px solid #c9aa6d;border-radius:4px;overflow:hidden}
.story-guide-ghost>.portrait{height:65%;width:100%}.story-guide-ghost>strong{font-size:10px}
@keyframes paintScene{from{opacity:0;transform:scale(1.025) translateY(5px)}to{opacity:1;transform:none}}
@keyframes originDark{from{opacity:0}to{opacity:.2}}
@keyframes warmReveal{from{opacity:0}to{opacity:1}}
@keyframes coreCharge{0%{opacity:0;transform:scale(.4)}70%{opacity:1;transform:scale(1.4)}100%{opacity:.7;transform:scale(1)}}
@keyframes memoryFlash{0%,100%{opacity:0}35%{opacity:.55}}
@keyframes passingShadow{0%{opacity:0;transform:translateX(-75%)}30%,70%{opacity:1}100%{opacity:0;transform:translateX(75%)}}
@keyframes openLid{from{transform:translateY(35%) rotateX(75deg);opacity:.7}to{transform:none;opacity:1}}
@keyframes microInspect{0%{transform:translate(-25%,-15%) rotate(-8deg)}60%{transform:translate(6%,5%) rotate(3deg)}100%{transform:none}}
@keyframes programmeFall{0%{transform:translate(20%,-110%) rotate(15deg);opacity:0}20%{opacity:1}75%{transform:translateY(-8%) rotate(-16deg)}100%{transform:rotate(-12deg)}}
@keyframes mailArrival{from{opacity:0;transform:translate(30%,-10%)}to{opacity:1;transform:none}}
@media(max-height:660px){.story-dialogue{padding:21px 15px 12px;min-height:150px}.story-dialogue>p{font-size:14px;line-height:1.8;min-height:50px}.comic-caption p{font-size:12px;line-height:1.6}.comic-caption small{font-size:10px}.layout-origin.panels-3 .comic-caption p{font-size:11px}.story-coach-bubble p{font-size:12px}.shot-document-label{font-size:12px;padding:5px}.shot-document-label small{font-size:10px}}
@media(prefers-reduced-motion:reduce){.panel-enter *{animation:none!important}}
.comic-page.layout-origin{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:43% 57%;align-content:center;justify-content:normal;gap:10px}
.comic-page.layout-origin .comic-panel{height:100%;max-height:100%;flex:1;min-height:0}.comic-page.layout-origin .comic-panel:first-child{grid-column:1/-1}
.comic-page.layout-origin .comic-art{aspect-ratio:auto;flex:1;min-height:0}.comic-page.layout-origin .comic-caption{padding:7px 8px}
.comic-page.layout-origin .comic-caption p{font-size:12px;line-height:1.65}.comic-page.layout-origin .comic-caption small{font-size:10px;margin-bottom:3px}
.comic-page.layout-diptych .comic-panel{height:100%;max-height:100%;flex:1}.comic-page.layout-diptych .comic-art{flex:1;aspect-ratio:auto}
.catching-hand{left:31%;bottom:-9%;width:41%;height:48%;z-index:6}.panel-enter .catching-hand{animation:catchProgramme 1.4s .5s both}
@keyframes catchProgramme{0%,35%{transform:translateY(100%);opacity:0}65%{opacity:1}100%{transform:none;opacity:1}}
.layout-origin .story-core-glow{left:43%;top:35%;width:23%;height:36%}
.falling-programme{left:43%;bottom:16%;width:33%;height:49%;z-index:7}
.talk-pov .story-cast{display:none}.story-talk-screen.talk-pov>.talk-pov-scene{top:15%;bottom:auto;height:49%;width:100%;filter:brightness(.92);transform:none}
.battle-guide-companion{display:inline-flex;width:32px;height:30px;flex:none;align-items:center;justify-content:center}.battle-guide-companion .portrait{width:32px;height:30px;background:transparent!important}
.comic-panel.frame-slant-left{clip-path:polygon(0 0,100% 3%,94% 100%,0 97%)}.comic-panel.frame-slant-right{clip-path:polygon(6% 3%,100% 0,100% 97%,0 100%)}
.comic-panel.frame-slant-left .comic-art,.comic-panel.frame-slant-right .comic-art{clip-path:none}.frame-slant-left .comic-caption{padding-right:25px}.frame-slant-right .comic-caption{padding-left:25px}
.layout-origin .frame-slant-left .comic-caption{padding-right:18px}.layout-origin .frame-slant-right .comic-caption{padding-left:18px}
.dragging-piece .story-coach-bubble{visibility:hidden;pointer-events:none}

/* Player review: page geometry is fixed before the first panel is revealed.
   These paintings were composed as rectangles; no decorative diagonal masks. */
.story-comic-screen{background:#e8d9b7;display:flex;flex-direction:column;padding-top:50px}
.story-comic-screen .story-reading-bar{position:absolute;inset:0 0 auto;height:50px;min-height:50px;background:#18383e;padding:7px 10px}
.story-comic-screen>.review-page{position:relative;flex:1;width:100%;height:auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);gap:5px;padding:5px;align-content:stretch;overflow:hidden;background:#e8d9b7}
.review-page.page-count-1{grid-template-rows:minmax(0,1fr)}
.review-page.page-count-2{grid-template-rows:repeat(2,minmax(0,1fr))}
.review-page.page-count-3{grid-template-rows:repeat(3,minmax(0,1fr))}
.review-page .comic-panel{display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:0;max-height:none;height:100%;margin:0;padding:0;border:1px solid #4a4034;background:#ebddbd;filter:none;clip-path:none;transform:none;overflow:hidden;box-shadow:none}
.review-page .comic-art{position:relative;width:100%;height:100%;max-height:none;min-height:0;aspect-ratio:auto;flex:none;background:#d2bea0;overflow:hidden}
.review-page .comic-caption{position:relative;padding:7px 10px 9px;background:#f3e6c9;color:#302d28;border-top:1px solid #79684d}
.review-page .comic-caption p{font-size:13px;line-height:1.65;color:#302d28;margin:0}
.review-page .comic-caption small{font-size:10px;color:#655336;letter-spacing:1px;display:block;margin-bottom:2px}
.review-page .panel-unrevealed{visibility:hidden;pointer-events:none}
.review-page .panel-enter{animation:reviewPanelReveal .45s ease-out both}
.review-page .panel-enter .shot-image{animation:reviewInkReveal .7s ease-out both}
.story-comic-screen>footer{position:relative;height:39px;min-height:39px;flex:none;display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:3px 12px;background:#e8d9b7}
.story-comic-screen>footer .story-next{min-height:29px;height:29px;width:34px;padding:3px!important;color:#51452f;background:none!important;border-color:#8e7954!important}
.reading-progress{font:11px/1.2 serif;color:#655336}
.document-ink{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5;overflow:hidden}
.document-ink text{font-family:'Noto Serif SC','Songti SC','SimSun',serif;font-weight:700;fill:#382819;stroke:#fff2d3;stroke-width:.7px;paint-order:stroke fill;letter-spacing:1px}
.panel-enter .document-ink{animation:captionIn .55s .4s both}
.painted-chest{filter:none}
.latch-glint{position:absolute;left:53%;top:55%;width:12%;height:12%;background:radial-gradient(#ffe8a26b,transparent 65%);pointer-events:none}
.panel-enter .latch-glint{animation:coreCharge 1.2s .2s both}
.review-page .catching-hand{width:42%;height:56%;left:34%;bottom:-7%}
.review-page .falling-programme{width:34%;height:52%;left:47%;bottom:12%}
.story-revisit{background:none!important;color:#efd8a2;border:1px solid #c5a56b7a!important;min-height:30px;font-size:12px;padding:4px 8px!important;box-shadow:none!important}
.story-route-overlay{position:absolute;inset:0;z-index:30;display:grid;place-items:center;background:#0a202db8;padding:18px}
.story-route-paper{position:relative;width:100%;max-width:340px;padding:25px 19px 17px;background:#f0e3c2;color:#2f4946;border:2px solid #9c8050;box-shadow:0 9px 24px #0c233c88}
.story-route-paper>small{font-size:11px;letter-spacing:2px;color:#79603b}.story-route-paper h2{font:600 23px/1.5 serif;margin:8px 0}.story-route-paper p{font-size:13px;line-height:1.7;margin:9px 0 14px}
.story-route-paper>button:not(.route-menu-close){display:block;width:100%;min-height:41px;padding:8px!important;margin-top:9px;background:#315557!important;color:#f6e9c8;border:1px solid #907345!important}
.story-route-paper .route-menu-close{position:absolute;right:8px;top:7px;background:none!important;border:0!important;color:#55482f;font-size:23px;padding:0!important;width:30px;height:30px;min-height:30px;box-shadow:none!important}
.story-route-paper .route-replay-note{font-size:11px;color:#6d6554;margin:15px 0 0}
.story-map-screen footer>button{min-height:31px;font-size:12px;margin-left:auto;background:none!important;color:#f0d9a4;border:1px solid #b69b65!important;white-space:nowrap}
@keyframes reviewPanelReveal{from{opacity:0}to{opacity:1}}
@keyframes reviewInkReveal{from{opacity:.3;filter:brightness(1.2)}to{opacity:1;filter:none}}
@media(max-height:670px){.review-page .comic-caption{padding:5px 8px 6px}.review-page .comic-caption p{font-size:12px;line-height:1.5}.review-page .comic-caption small{font-size:9px}.story-route-paper{padding-top:20px}.story-route-paper h2{font-size:20px}}