:root{color-scheme:dark;--bg:#111a20;--ink:#ede5d1;--muted:#8e9d9e;--gold:#d6b56d;--line:#465056;--paper:#e4d4ad;--red:#d27860;--green:#76a993;font-family:'Microsoft YaHei','PingFang SC',system-ui,sans-serif;font-size:14px;line-height:1.5;color:var(--ink);background:var(--bg)}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 48% 30%,#29373c 0%,#172128 46%,#0c1319 100%);min-height:100vh}button,input{font:inherit}button{cursor:pointer;color:var(--ink);background:linear-gradient(#3b484b,#273237);border:1px solid #7c806e;border-radius:4px;padding:11px 18px;font-weight:600;box-shadow:inset 0 1px #ffffff15,0 3px 0 #080f12}button:hover:not(:disabled){border-color:var(--gold);color:#ffedb4}button:focus-visible,input:focus-visible{outline:3px solid #f3d58e;outline-offset:4px}button:disabled{cursor:not-allowed;opacity:.45;box-shadow:none}.primary{background:linear-gradient(#806944,#50432c);border-color:#c5a363;color:#fff1c8}.secondary{background:#233037;border-color:#5a6969}.text-button,.hud-link{background:transparent;box-shadow:none;border-color:transparent;padding:5px 8px;font-size:12px}.text-button{color:var(--muted)}.danger-button{background:#5b2d29;border-color:#ab6252}.button-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.stack{display:grid;gap:10px;margin:20px 0}.muted{color:var(--muted)}.danger,.warning{color:#ef9b80}.warning{padding:10px;text-align:center;background:#582f2c}.icon{width:23px;height:23px;flex-shrink:0;vertical-align:middle}.eyebrow{font-size:10px;letter-spacing:2.5px;color:#b3a68b;text-transform:uppercase}.disabled-reason{display:block;font-size:10px;color:#d2a899;margin-top:5px}.build-tag{position:absolute;bottom:18px;right:22px;font-size:10px;color:#718082;letter-spacing:1px}
/* Game title screen */
.title-screen{min-height:100dvh;display:flex;align-items:center;flex-direction:column;justify-content:center;text-align:center;padding:30px}.title-mark{color:var(--gold);margin-bottom:18px}.title-mark .icon{width:68px;height:68px}.title-screen h1{font-family:Georgia,'SimSun',serif;font-size:80px;letter-spacing:18px;text-indent:18px;line-height:1.2;color:#f5e6bf;margin:6px 0 12px;text-shadow:0 5px #0a1014}.title-sub{color:#a6b3b1;font-size:14px;letter-spacing:2px;margin:0 0 30px}.title-menu{width:290px;display:grid;gap:12px}.title-menu>button{padding:13px}.seed-label{font-size:10px;color:#7e9090;display:flex;align-items:center;gap:12px;margin-top:9px}.seed-label input{min-width:0;flex:1;background:#101c22;border:1px solid #3c4d50;color:#c3ceca;padding:7px 10px;border-radius:3px;font-size:11px}.title-note{font-size:10px;color:#677c7e;margin-top:24px}
/* A restrained, game-like top HUD */
.game-hud{height:56px;padding:0 25px;display:flex;gap:25px;align-items:center;justify-content:space-between;background:#0f181ee8;border-bottom:1px solid #38423f;position:relative;z-index:50}.brand{font-family:Georgia,'SimSun',serif;font-size:21px;font-weight:bold;letter-spacing:3px;white-space:nowrap;color:#e5cf9c}.brand span{font-family:system-ui,sans-serif;font-weight:400;font-size:10px;letter-spacing:1px;color:#82908d;margin-left:15px}.hud-resources{display:flex;align-items:center;gap:25px;margin-right:auto;margin-left:15px;color:#7d908e;font-size:12px}.hud-resources b{font-size:17px;font-variant-numeric:tabular-nums}.hud-resources .icon{width:18px;height:18px;margin-right:4px}.hud-hp{color:#da9380}.hud-money{color:#dbbe76}.hud-tools{display:flex;gap:8px}.hud-link{font-weight:400;font-size:11px;color:#a7b2a9;white-space:nowrap}
/* Separate parchment route map, ascending from the bottom. */
.map-screen{height:calc(100dvh - 56px);min-height:640px;display:grid;grid-template-columns:210px minmax(400px,700px) 190px;gap:25px;max-width:1330px;margin:auto;padding:24px 35px}.map-intro{padding:24px 0}.map-intro h1{font-family:Georgia,'SimSun',serif;font-size:45px;letter-spacing:7px;line-height:1.3;margin:15px 0 20px;color:#e7d2a1}.map-intro>p,.map-current p{color:#8f9f9f;font-size:12px;line-height:1.9}.map-progress{padding:20px 0;margin:18px 0;border-top:1px solid #394444;border-bottom:1px solid #394444}.map-progress b{font-size:34px;font-family:Georgia,serif;color:var(--gold)}.map-progress span{font-size:11px;color:#879896}.map-legend{display:grid;grid-template-columns:1fr 1fr;gap:15px 6px;font-size:10px;color:#b1b5a9}.map-legend .icon{width:18px;height:18px;margin-right:7px;color:#cbbb98}.map-instruction{margin-top:24px}.map-scroll{background:#c9bb95;overflow:auto;border:1px solid #9a8c69;box-shadow:0 8px 40px #0006,inset 0 0 50px #74624555;border-radius:5px;position:relative}.map-board{height:100%;min-height:590px;position:relative;background:radial-gradient(ellipse at 50% 40%,#eee1bc80,transparent 72%),repeating-linear-gradient(70deg,#b8a57609 0 2px,transparent 2px 12px);overflow:hidden}.map-watermark{position:absolute;top:49%;left:50%;transform:translate(-50%,-50%) rotate(-20deg);color:#5146220b;font-family:Georgia,serif;font-size:49px;font-weight:800;letter-spacing:8px;pointer-events:none}.map-paths{position:absolute;width:100%;height:100%;inset:0;overflow:visible;pointer-events:none}.map-paths path{stroke:#665b44;stroke-width:2;stroke-dasharray:3 7;fill:none;opacity:.43}.map-paths path.taken{stroke:#536749;stroke-width:3.5;stroke-dasharray:none;opacity:.8}.map-stop{position:absolute;transform:translate(-50%,-50%);text-align:center;width:125px;z-index:2;color:#5a513b}.map-stop>button{position:relative;display:block;margin:auto;padding:9px;width:44px;height:44px;border:2px solid #837555;border-radius:50%;color:#504833;background:#cfbf95;box-shadow:0 0 0 4px #d7caa233}.map-stop>button .icon{width:23px;height:23px}.map-stop>button:disabled{opacity:1}.map-stop.locked{opacity:.52}.map-stop.bypassed{opacity:.25}.node-label{display:block;font-size:10px;margin-top:4px;font-weight:600;letter-spacing:.5px;white-space:nowrap}.map-stop.current>button{background:#334b42;color:#f6df9e;border-color:#263d34;box-shadow:0 0 0 4px #ae985d,0 0 0 7px #e8d59a,0 4px 12px #473a3866}.map-stop.current .node-label{color:#283b2c;font-size:11px}.here-label{font-size:8px;letter-spacing:2px;color:#405339;display:block;line-height:1.2}.kind-boss>button{width:60px;height:60px;border-radius:15px;transform:rotate(5deg)}.kind-boss>button .icon{width:34px;height:34px}.visited-check{position:absolute;right:-5px;bottom:-3px;border-radius:50%;width:17px;height:17px;background:#486645;color:#eee5c9;font-size:12px}.map-stop.visited>button{color:#4c6849;border-color:#6e8255;background:#bbc099}.map-start{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:4px;color:#7e7052}.map-current{align-self:center;border-top:1px solid #687263;border-bottom:1px solid #424d48;padding:24px 0}.map-current h3{font-size:19px;color:#ddcc9f;margin:10px 0}.map-current button{font-size:11px;margin-top:18px}.map-stamp{display:flex;align-items:center;justify-content:space-between;color:#506666;font-size:10px;letter-spacing:3px;margin-top:35px}.map-stamp strong{font-size:60px;font-family:Georgia,serif;line-height:1;color:#71816b}
/* The battle stage: player left, opponent right, hand along the bottom. */
.combat-mode{overflow-x:hidden}.combat-screen{height:calc(100dvh - 56px);min-height:610px;display:flex;flex-direction:column;position:relative;max-width:1700px;margin:0 auto}.arena-top{height:32px;flex-shrink:0;display:flex;justify-content:space-between;padding:9px 32px 0;font-size:10px;letter-spacing:1px;color:#84999b}.arena-top b{padding:0 7px;color:#4d6569}.skin-rack{display:flex;gap:12px;font-size:10px}.skin-rack .icon{width:13px;height:13px;margin-right:4px;color:#d9bc77}.arena{flex:1;min-height:230px;position:relative;isolation:isolate;margin:0 30px}.arena-backdrop{position:absolute;inset:0;z-index:-2;overflow:hidden}.arena-backdrop i{position:absolute;bottom:10px;width:15%;height:80%;background:linear-gradient(90deg,#1b292e,#2d3c3e77,#17272d);border:1px solid #4d625f33;clip-path:polygon(12% 0,90% 0,100% 100%,0 100%)}.arena-backdrop i:nth-child(1){left:7%;height:70%}.arena-backdrop i:nth-child(2){right:7%;height:70%}.arena-backdrop i:nth-child(3){left:42%;height:96%;opacity:.35}.arena-floor{position:absolute;bottom:0;left:0;right:0;height:30%;border-top:1px solid #57706b22;background:repeating-linear-gradient(0deg,transparent 0 25px,#8297850b 26px 27px),linear-gradient(#283c3e33,#0d1b2299);clip-path:polygon(16% 0,84% 0,100% 100%,0 100%);z-index:-1}.fighter{position:absolute;width:230px;bottom:6px;text-align:center}.fighter.ally{left:12%}.fighter.enemy{right:12%}.team-label{font-size:10px;color:#90aca0;letter-spacing:3px;margin-bottom:6px}.combat-target{background:none;border:2px solid transparent;box-shadow:none;padding:2px 16px 0;position:relative;display:block;margin:0 auto 5px;min-width:138px}.combat-target:hover:not(:disabled){border-color:#627e7544}.crest{display:flex;align-items:center;justify-content:center;flex-direction:column;height:97px;width:90px;margin:auto;background:linear-gradient(135deg,#77958e,#304e49 42%,#193230);clip-path:polygon(50% 0,96% 21%,85% 77%,50% 100%,15% 77%,4% 21%);border:1px solid #9cad88;filter:drop-shadow(0 4px 8px #0009);color:#d4dfbd}.crest>.icon{width:47px;height:47px}.crest b{font-family:Georgia,serif;font-size:13px;letter-spacing:4px}.enemy .crest{background:linear-gradient(135deg,#a87b64,#67473c 45%,#352924);color:#ebc7a0}.enemy .combat-target{min-width:144px}.combat-target.targetable{border-color:#dbbe6d;border-style:dashed;border-radius:10px;background:#d5bb7010;box-shadow:0 0 25px #d9b6631b}.target-caption{display:none;font-size:9px;position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);white-space:nowrap;background:#322c1b;color:#edda9e;padding:1px 6px}.targetable .target-caption{display:block}.fighter h2{font-size:15px;letter-spacing:2px;margin:5px 0 9px;text-shadow:0 2px #111}.life-row{display:flex;gap:6px;align-items:center}.shield-value{font-size:13px;color:#acd0da;white-space:nowrap;background:#2b4653;border:1px solid #567985;padding:2px 5px;border-radius:4px}.shield-value .icon{width:15px;height:15px}.life-bar{position:relative;height:20px;flex:1;background:#352725;border:1px solid #875340;border-radius:3px;overflow:hidden;box-shadow:0 2px 3px #0005}.life-bar i{display:block;height:100%;background:linear-gradient(#b0664f,#854933)}.life-bar.own{border-color:#6f8062;background:#243731}.life-bar.own i{background:linear-gradient(#789978,#476f5b)}.life-bar span{position:absolute;inset:0;text-align:center;color:#fff4df;font-size:11px;font-weight:600;text-shadow:0 1px 2px #0009}.statuses{height:22px;display:flex;justify-content:center;gap:5px;padding-top:4px}.statuses span{border:1px solid #8c725a;padding:0 6px;border-radius:3px;background:#5e4235;color:#edc6a4;font-size:9px}.active-powers{position:absolute;top:27px;right:100%;width:115px;display:flex;align-items:flex-end;flex-direction:column;gap:5px}.active-powers span{font-size:9px;white-space:nowrap;background:#4c4259;border:1px solid #756683;padding:3px 6px;border-radius:3px}.active-powers .icon{width:11px;height:11px;margin-right:3px}.intent-bubble{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);min-width:180px;max-width:310px;width:max-content;max-height:87px;padding:6px 13px;margin-bottom:0;border:1px solid #927156;border-radius:6px;background:#362e27;box-shadow:0 5px 15px #0004}.intent-bubble:after{content:'';position:absolute;bottom:-7px;left:50%;width:11px;height:11px;border-right:1px solid #927156;border-bottom:1px solid #927156;background:#362e27;transform:rotate(45deg)}.intent-bubble small{display:block;font-size:8px;color:#ba9c7b;letter-spacing:2px}.intent-bubble strong{font-size:13px;line-height:1.35;display:block;color:#f1bd91}.intent-bubble>span{font-size:9px;color:#c3a387}.arena-center{position:absolute;top:26%;left:50%;transform:translateX(-50%);width:245px;text-align:center;color:#637571;pointer-events:none}.versus{display:block;font-family:Georgia,serif;font-size:27px;letter-spacing:7px;color:#5b706b}.arena-center-label{display:block;font-size:10px;letter-spacing:3px;margin-top:16px;color:#4f6867}.target-hint{font-size:10px;color:#a6b89b;margin-top:16px;min-height:20px}.played-echo{margin:8px auto 0;display:flex;align-items:center;justify-content:center;gap:7px;color:#afc0b3}.played-echo>.icon{width:24px;height:32px;border:1px solid #667e72;background:#314c44;padding:4px;transform:rotate(-8deg)}.played-echo span{font-size:9px;color:#7c968d}.played-echo strong{font-size:11px}
.combat-controls{height:61px;flex-shrink:0;display:flex;align-items:center;gap:18px;padding:0 35px;border-top:1px solid #4d625d33;background:linear-gradient(transparent,#10212788);position:relative;z-index:25}.turn-warning{width:230px;flex-shrink:0;font-size:10px;color:#8aa19c}.turn-warning>b{color:#dfb394}.turn-warning strong{color:#dfac85;font-size:10px;font-weight:400}.selection-panel{display:flex;align-items:center;justify-content:center;gap:12px;flex:1;min-width:0}.selection-panel>div{text-align:right;min-width:100px}.selection-panel strong{font-size:13px;color:#e5d0a2}.selection-panel small{display:block;font-size:10px;color:#9db8a4}.selection-placeholder{font-size:10px;letter-spacing:2px;color:#536f70}.selection-panel .disabled-reason{display:none}.play-selected{background:linear-gradient(#867244,#51442a);border-color:#b39859;font-size:12px;padding:8px 25px}.selection-panel .text-button{font-size:10px;padding:4px}.end-turn{background:linear-gradient(#765c3c,#463924);border:1px solid #b1975f;color:#efdcab;font-size:13px;padding:10px 24px;letter-spacing:2px;min-width:130px;border-radius:5px 5px 13px 5px}.hand-dock{height:264px;flex-shrink:0;position:relative;background:radial-gradient(ellipse at 50% 120%,#41605b33,transparent 65%)}.deck-console,.discard-console{position:absolute;bottom:23px;z-index:25;width:95px;display:flex;align-items:center;flex-direction:column;gap:17px}.deck-console{left:32px}.discard-console{right:32px}.energy-orb{border-radius:50%;width:65px;height:65px;background:radial-gradient(circle at 40% 30%,#688e80,#274a41 60%,#172e2c);border:3px solid #c2b67e;box-shadow:0 0 0 4px #21342e,0 0 0 5px #6f755a,inset 0 0 12px #bdd19f33,0 6px 14px #0008;display:flex;align-items:center;flex-direction:column;justify-content:center}.energy-orb b{font-size:30px;line-height:1;color:#f8ecc5;text-shadow:0 2px #000}.energy-orb span{font-size:8px;color:#c1d0b4;margin-top:1px}.pile-button{width:68px;height:84px;font-size:10px;line-height:1.8;border:2px solid #818b79;border-radius:5px;background:repeating-linear-gradient(45deg,#20363a 0 7px,#294247 7px 8px);box-shadow:4px 4px 0 #111d20,5px 5px 0 #657568,8px 8px 0 #111d20,9px 9px 0 #4c5a50,inset 0 0 0 4px #1a2b30;padding:12px 8px;color:#cccfb6;word-break:keep-all}.discard-pile{transform:rotate(5deg);background:repeating-linear-gradient(-45deg,#3b3030 0 7px,#4a3d37 7px 8px);border-color:#8b7c62}.exhaust-link{font-size:10px;border:0;background:transparent;box-shadow:none;color:#978572;padding:0}.hand-fan{position:absolute;inset:0 125px;--step:clamp(36px,calc((100vw - 430px)/var(--slots)),135px)}.hand-card{position:absolute;left:50%;bottom:22px;width:162px;height:222px;padding:0;text-align:left;transform:translateX(calc(-50% + var(--offset)*var(--step))) translateY(min(var(--bend),18px)) rotate(var(--tilt));transform-origin:50% 110%;z-index:calc(3 + var(--order));border:0;background:transparent;box-shadow:0 5px 15px #0008;border-radius:10px;color:#25312f}.hand-card:hover,.hand-card:focus-visible{transform:translateX(calc(-50% + var(--offset)*var(--step))) translateY(-19px) rotate(0deg);z-index:22}.hand-card.selected{transform:translateX(calc(-50% + var(--offset)*var(--step))) translateY(-29px) rotate(0deg) scale(1.055);z-index:23;outline:2px solid #f1d383;outline-offset:3px;box-shadow:0 0 25px #d7b75f44,0 7px 15px #0009}.hand-card.unplayable{filter:saturate(.4) brightness(.77)}.hand-card.unplayable.selected{filter:saturate(.65) brightness(.96)}.card-key{position:absolute;bottom:-15px;left:50%;transform:translateX(-50%);font-size:9px;color:#708985}.card-unavailable{position:absolute;bottom:17px;left:6px;right:6px;background:#4e2c2bdd;color:#f3d9be;font-size:9px;text-align:center;padding:1px 3px}.empty-hand{text-align:center;margin-top:90px;font-size:12px;color:#647d79;line-height:2}.combat-bottom{height:24px;flex-shrink:0;display:flex;justify-content:space-between;align-items:center;padding:0 32px;font-size:9px;color:#7f9890;border-top:1px solid #3d534a44;background:#101c21;position:relative;z-index:26}.combat-bottom>.text-button{font-size:9px;padding:0 4px}
/* Actual card faces: cost medallion, name, art placeholder, rules and type. */
.card,.hand-card{--accent:#487069;--accent-dark:#294d45}.role-决斗{--accent:#a05e4e;--accent-dark:#683c32}.role-哨位{--accent:#597c88;--accent-dark:#344f64}.role-控场{--accent:#747e9b;--accent-dark:#424960}.role-先锋{--accent:#a78b52;--accent-dark:#6e5a32}.role-自由人{--accent:#8b7195;--accent-dark:#574562}.role-CU,.role-ST{--accent:#73695e;--accent-dark:#40352f}.card-face{display:flex;flex-direction:column;position:relative;width:100%;height:100%;padding:8px;border:3px solid var(--accent);border-radius:10px;background:linear-gradient(100deg,#f0e4c3,#d4c49c);box-shadow:inset 0 0 0 1px #352918,inset 0 0 0 3px #c4ae72,0 2px 6px #0004;color:#302b24}.card-cost{position:absolute;top:-10px;left:-10px;width:33px;height:33px;background:radial-gradient(circle at 35% 25%,var(--accent),var(--accent-dark));border:2px solid #d9c28b;outline:1px solid #463925;box-shadow:0 2px 4px #0007;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff6d8;font-size:21px;font-family:Georgia,serif;font-weight:700;z-index:1}.card-title{display:block;text-align:center;white-space:nowrap;font-size:13px;font-weight:800;line-height:22px;color:#251e19;letter-spacing:.2px;text-shadow:0 1px #fff6}.card-art{position:relative;margin-top:3px;min-height:55px;height:55px;display:flex;align-items:center;justify-content:center;border:1px solid var(--accent-dark);border-radius:3px;background:repeating-linear-gradient(125deg,transparent 0 17px,#fff1 18px 19px),radial-gradient(ellipse at 50% 0%,var(--accent),var(--accent-dark));box-shadow:inset 0 0 20px #0004;overflow:hidden;color:#eee1ba}.card-art>.icon{width:38px;height:38px;opacity:.8}.card-art>span{position:absolute;right:5px;bottom:2px;font-size:8px;color:#ffedc677;letter-spacing:2px}.card-type{display:block;text-align:center;font-size:9px;line-height:17px;background:#85755525;border-bottom:1px solid #77674455;color:#665236;letter-spacing:1px;margin-bottom:5px}.card-effect{display:block;flex:1;font-size:10px;line-height:1.6;text-align:center;font-weight:500;margin:0;overflow-wrap:anywhere;color:#2f2c25}.card-foot{display:block;text-align:center;font-size:8px;letter-spacing:2px;color:#857651;line-height:12px;margin-top:3px}.upgraded .card-title{color:#3c6b39}.upgraded .card-face{box-shadow:inset 0 0 0 1px #627633,inset 0 0 0 3px #c1c080}.card{width:202px;border:0;background:none;padding:0;border-radius:10px;display:flex;flex-direction:column;filter:drop-shadow(0 7px 12px #0005)}.card>.card-face{height:270px}.card .card-title{font-size:16px;line-height:27px}.card .card-art{height:76px;min-height:76px}.card .card-art .icon{width:48px;height:48px}.card .card-effect{font-size:12px;line-height:1.7}.card .card-type{font-size:10px;line-height:20px}.card .card-cost{width:37px;height:37px;font-size:24px}.card .card-foot{font-size:9px}.card-action{padding-top:15px}.card-action button{width:100%;font-size:12px}.cards{display:flex;gap:28px;justify-content:center;align-items:flex-start;flex-wrap:wrap}.reward-cards{margin:30px 0}.upgrade-text{border:1px solid #7f936b;background:#243b30;padding:11px;font-size:11px;margin-top:14px;color:#c8d4b4}.upgrade-text p{margin:5px 0}.modal-cards{gap:30px 20px}.modal-cards>.card{width:180px}.modal-cards>.card>.card-face{height:260px}.modal-cards .card-effect{font-size:11px}
/* Encounters and rewards are rooms, not a persistent management dashboard. */
.room-screen{max-width:1050px;margin:0 auto;min-height:calc(100dvh - 56px);padding:24px 35px 35px;text-align:center;position:relative}.room-emblem{color:#bba57b;margin:0 auto 10px}.room-emblem>.icon{width:45px;height:45px;opacity:.8}.section-heading{margin-bottom:22px}.section-heading h2{font-family:Georgia,'SimSun',serif;font-size:29px;font-weight:600;letter-spacing:2px;margin:9px 0 12px;outline:none}.section-heading p{font-size:12px;color:#9eada7;max-width:690px;margin:auto;line-height:1.9}.choices{display:flex;justify-content:center;gap:22px;margin:28px auto}.choice{flex:1;max-width:330px;border:1px solid #6a705e;padding:24px 20px;background:linear-gradient(#30403eaa,#1a292dcc);box-shadow:0 5px 18px #0003;position:relative;display:flex;flex-direction:column;text-align:left;border-radius:6px}.choice:before{content:'';position:absolute;inset:5px;border:1px solid #a4966b22;pointer-events:none}.choice h3{font-family:Georgia,'SimSun',serif;font-size:20px;color:#e0cb96;margin:4px 0 17px}.choice p{font-size:12px;line-height:1.95;color:#a5b5aa;flex:1;margin:0 0 25px}.choice button{font-size:11px;position:relative}.page-footer{margin:25px 0}.shop-service{display:flex;text-align:left;align-items:center;justify-content:space-between;border-top:1px solid #606854;border-bottom:1px solid #465440;padding:15px 0;gap:20px;margin:28px 0}.shop-service h3{font-size:15px;color:#d4c7a0;margin:0 0 6px}.shop-service p{font-size:11px;color:#8fa29a;margin:0}.shop-service button{font-size:11px;white-space:nowrap}.sold{width:202px;height:320px;display:flex;align-items:center;justify-content:center;border:1px dashed #637269;color:#758e82}.sold h3{font-size:15px}.sold p{font-size:10px}.result{padding:22px 0}.result-stats{display:flex;justify-content:center;gap:70px;margin:45px 0}.result-stats span{display:flex;flex-direction:column;color:#8faaa0;font-size:11px}.result-stats strong{font-family:Georgia,serif;font-size:34px;color:var(--gold);margin-bottom:10px}.result>.muted{font-size:10px;margin-top:25px}
/* Utilities stay out of the battle field. */
dialog{color:var(--ink);border:1px solid #a99567;border-radius:8px;background:linear-gradient(#243238,#142329);padding:28px;width:90vw;max-width:1000px;max-height:88dvh;box-shadow:0 15px 80px #000b}dialog::backdrop{background:#071015db}dialog h2{font-family:Georgia,'SimSun',serif;font-size:25px;letter-spacing:2px;color:#e4ce9a;margin:0 0 16px}dialog p{font-size:12px;color:#a3b4ab;line-height:1.85}#close-dialog{position:sticky;bottom:0;display:block;margin:25px 0 0 auto;background:#2e4142}.full-logs{padding-left:20px;font-size:11px;line-height:1.8}.full-logs li{padding:5px 0;border-bottom:1px solid #3b504b}.full-logs small{color:#789487;margin-right:8px}.rules{max-width:720px;margin:auto}.rules p{font-size:13px;line-height:1.9}.rules strong{color:#dbc696}#notice:empty{display:none}#notice{position:fixed;top:62px;left:50%;transform:translateX(-50%);z-index:100;background:#253b36f5;border:1px solid #94a177;color:#e4e5bf;padding:9px 18px;font-size:11px;border-radius:5px;max-width:85vw;box-shadow:0 3px 15px #0005;pointer-events:none}
@media(min-width:1500px){.hand-card{width:176px;height:240px}.hand-dock{height:288px}.hand-fan{--step:clamp(50px,calc((100vw - 500px)/var(--slots)),148px)}.hand-card .card-art{height:65px;min-height:65px}.hand-card .card-effect{font-size:11px}.hand-card .card-title{font-size:15px}.fighter.ally{left:16%}.fighter.enemy{right:16%}.arena{min-height:265px}.crest{height:110px;width:102px}.map-screen{grid-template-columns:230px minmax(400px,750px) 210px;max-width:1450px}.map-board{min-height:650px}}
@media(max-width:1100px){.brand span{display:none}.game-hud{padding:0 18px;gap:12px}.hud-resources{gap:14px;margin-left:5px}.hud-tools{gap:2px}.map-screen{grid-template-columns:170px minmax(350px,1fr);padding:20px;gap:20px}.map-current{display:none}.map-intro h1{font-size:38px}.fighter.ally{left:7%}.fighter.enemy{right:7%}.fighter{width:210px}.hand-card{width:146px;height:218px}.hand-fan{inset:0 98px;--step:clamp(35px,calc((100vw - 280px)/var(--slots)),115px)}.hand-card .card-effect{font-size:10px}.hand-card .card-title{font-size:12px}.deck-console{left:15px}.discard-console{right:15px}.turn-warning{width:175px}.combat-controls{padding:0 22px;gap:10px}.arena-center{width:190px}.active-powers{right:75%;top:0}.selection-placeholder{font-size:9px}.intent-bubble{max-width:235px}.choices{gap:14px}.choice{padding:20px 14px}}
@media(max-width:720px){.game-hud{height:52px;padding:0 10px;gap:6px}.brand{font-size:18px;letter-spacing:1px}.hud-resources{gap:8px;margin:0;font-size:9px}.hud-resources b{font-size:13px}.hud-resources .icon{width:13px;height:13px;margin-right:0}.hud-tools .hud-link{font-size:10px;padding:4px}.hud-tools .hud-link[data-ui='logs'],.hud-tools .hud-link[data-ui='rules']{display:none}.hud-resources .hud-link{font-size:10px;padding:4px}.map-screen{display:block;height:auto;min-height:calc(100dvh - 52px);padding:14px}.map-intro{padding:0;display:flex;gap:14px;align-items:center;flex-wrap:wrap}.map-intro h1{font-size:23px;letter-spacing:2px;margin:0}.map-intro h1 br{display:none}.map-intro>p,.map-progress,.map-legend,.map-instruction{display:none}.map-scroll{height:calc(100dvh - 125px);min-height:560px;margin-top:14px}.map-board{min-height:560px}.map-stop{width:112px}.map-stop>button{width:40px;height:40px;padding:7px}.node-label{font-size:9px}.kind-boss>button{width:50px;height:50px}.kind-boss>button .icon{width:27px;height:27px}.map-watermark{font-size:28px}.combat-screen{height:auto;min-height:calc(100dvh - 52px)}.arena-top{padding:8px 13px 0;font-size:9px;height:30px}.arena{min-height:260px;margin:0 8px}.fighter{width:145px;bottom:4px}.fighter.ally{left:3%}.fighter.enemy{right:3%}.crest{height:80px;width:73px}.crest>.icon{width:37px;height:37px}.combat-target{min-width:103px;padding:2px 8px}.enemy .combat-target{min-width:103px}.fighter h2{font-size:12px;letter-spacing:1px;margin:5px 0}.life-bar{height:18px}.life-bar span{font-size:9px}.shield-value{font-size:11px;padding:1px 3px}.shield-value .icon{width:12px;height:12px}.intent-bubble{max-width:174px;min-width:142px;padding:6px 8px}.intent-bubble strong{font-size:11px}.intent-bubble small{font-size:8px}.arena-center{width:76px;top:38%}.versus{font-size:18px;letter-spacing:3px}.arena-center-label{display:none}.target-hint{font-size:8px;line-height:1.6;margin-top:10px}.played-echo{flex-direction:column;gap:0}.played-echo>.icon{display:none}.played-echo strong{font-size:9px}.active-powers{top:10px;left:0;right:auto;max-width:90px;transform:translateY(-50%);align-items:flex-start}.active-powers span{font-size:8px}.combat-controls{height:87px;padding:5px 12px;gap:8px;flex-wrap:wrap;justify-content:space-between}.turn-warning{order:0;width:calc(100% - 110px);font-size:9px}.end-turn{order:1;min-width:100px;font-size:11px;padding:8px 10px}.selection-panel{order:2;min-height:30px;width:100%;flex-basis:100%;justify-content:center}.selection-panel strong{font-size:11px}.selection-panel small{font-size:9px}.play-selected{padding:6px 22px;font-size:11px}.selection-panel>div{min-width:0}.hand-dock{height:257px}.deck-console{left:6px;width:49px;bottom:35px;gap:20px}.discard-console{right:6px;width:49px;bottom:35px;gap:20px}.energy-orb{width:43px;height:43px;border-width:2px}.energy-orb b{font-size:23px}.energy-orb span{font-size:7px}.pile-button{width:40px;height:65px;font-size:8px;padding:8px 3px;border-width:1px;box-shadow:3px 3px 0 #142029,4px 4px 0 #708072}.exhaust-link{font-size:8px}.hand-fan{inset:0 62px;display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;padding:29px 9px 18px;align-items:flex-start;scroll-snap-type:x proximity}.hand-card{position:relative;left:auto;bottom:auto;width:142px;min-width:142px;height:207px;transform:none;transform-origin:center;scroll-snap-align:center;z-index:1}.hand-card:hover,.hand-card:focus-visible{transform:translateY(-7px)}.hand-card.selected{transform:translateY(-15px);z-index:2}.hand-card .card-face{padding:7px}.hand-card .card-art{height:46px;min-height:46px}.hand-card .card-effect{font-size:9px}.hand-card .card-title{font-size:12px}.card-key{display:none}.combat-bottom{padding:3px 10px;height:auto;min-height:27px;font-size:8px;gap:8px;line-height:1.4}.combat-bottom>span:nth-child(2){flex:1;text-align:center}.room-screen{padding:22px 16px}.section-heading h2{font-size:23px;letter-spacing:1px}.section-heading p{font-size:11px}.choices{flex-direction:column;align-items:center;gap:16px}.choice{width:100%;max-width:420px}.cards{gap:30px 18px}.reward-cards{gap:28px}.card{width:182px}.card>.card-face{height:265px}.card .card-effect{font-size:11px}.card .card-title{font-size:15px}.card .card-art{height:68px;min-height:68px}.shop-service{display:block;text-align:center}.shop-service button{margin-top:16px}.result-stats{gap:25px}.result-stats strong{font-size:26px}.title-screen h1{font-size:64px}.title-sub{font-size:12px}.title-menu{width:260px}dialog{padding:20px;width:95vw}.modal-cards{gap:24px 14px}.modal-cards>.card{width:160px}.modal-cards .card-effect{font-size:10px}.modal-cards>.card>.card-face{height:248px}.modal-cards .card-title{font-size:13px}.modal-cards .card-art{height:61px;min-height:61px}}

/* The narrow Codex pane still presents a real hand, not a scrolling list of tiles. */
@media(max-width:720px){
 .combat-screen{height:calc(100dvh - 52px);min-height:495px}
 .arena-top{height:22px;padding-top:5px;font-size:8px}.arena{min-height:177px;flex:1}
 .fighter{bottom:1px}.crest{height:62px;width:61px}.crest>.icon{height:30px;width:30px}.crest b{font-size:9px;letter-spacing:2px}
 .fighter h2{font-size:11px;margin:3px 0 5px}.team-label{font-size:8px;letter-spacing:2px;margin-bottom:3px}.combat-target{margin-bottom:2px}
 .intent-bubble{padding:4px 7px;max-width:165px}.intent-bubble strong{font-size:10px}.intent-bubble small{font-size:7px}.statuses{height:18px;padding-top:2px}
 .combat-controls{height:66px;min-height:66px;padding:3px 10px;gap:3px}.end-turn{padding:5px 10px;font-size:10px}.turn-warning{font-size:8px}.selection-panel{min-height:29px}.selection-placeholder{font-size:8px}.selection-panel strong{font-size:10px}.selection-panel small{font-size:8px}.play-selected{padding:5px 18px;font-size:10px}
 .hand-dock{height:205px}.deck-console,.discard-console{bottom:26px}.deck-console{gap:14px}.energy-orb{height:37px;width:37px}.energy-orb b{font-size:21px}.pile-button{width:35px;height:54px;font-size:7px;padding:4px 2px}
 .hand-fan{inset:0 51px;display:block;overflow:visible;padding:0;--step:clamp(18px,calc((100vw - 190px)/var(--slots)),67px)}
 .hand-card{position:absolute;left:50%;bottom:16px;width:124px;min-width:124px;height:177px;transform:translateX(calc(-50% + var(--offset)*var(--step))) translateY(min(var(--bend),10px)) rotate(var(--tilt));z-index:calc(3 + var(--order))}
 .hand-card:hover,.hand-card:focus-visible{transform:translateX(calc(-50% + var(--offset)*var(--step))) translateY(-10px) rotate(0deg);z-index:22}
 .hand-card.selected{transform:translateX(calc(-50% + var(--offset)*var(--step))) translateY(-16px) rotate(0deg);z-index:23}
 .hand-card .card-face{padding:5px;border-width:2px}.hand-card .card-title{font-size:11px;line-height:19px}.hand-card .card-art{height:34px;min-height:34px;margin-top:1px}.hand-card .card-art>.icon{width:25px;height:25px}.hand-card .card-type{font-size:7px;line-height:13px;margin-bottom:4px}.hand-card .card-effect{font-size:8px;line-height:1.5}.hand-card .card-foot{font-size:7px;line-height:10px}.hand-card .card-cost{width:26px;height:26px;font-size:17px;top:-7px;left:-7px}.card-unavailable{font-size:7px;bottom:13px}
 .combat-bottom{min-height:25px;height:25px;font-size:7px;padding:2px 8px}.combat-bottom .text-button{font-size:8px}
}

.hand-card{touch-action:none;user-select:none}.hand-card.dragging-card{position:fixed!important;left:var(--drag-x)!important;top:var(--drag-y)!important;bottom:auto!important;transform:translate(-50%,-50%) rotate(-5deg)!important;z-index:200!important;pointer-events:none;opacity:.95}

@media(max-width:720px){.map-screen{height:calc(100dvh - 52px);min-height:0;padding:12px}.map-intro{min-height:34px}.map-scroll{height:calc(100% - 48px);min-height:0;margin-top:14px}}

.map-start{display:none}.map-stop.locked{opacity:.72}

/* Tactical identity and rules remain separate so the scene never hides the numbers. */
.card-art{flex-shrink:0;flex-direction:column;gap:3px}
.card-art>.icon{position:absolute;right:4px;top:5px;opacity:.15}
.card-art>b{position:relative;font-size:15px;letter-spacing:2px;color:#fff4d5;text-shadow:0 2px 3px #0008}
.card-art>span{position:static;font-size:9px;letter-spacing:0;color:#f0e4c3;z-index:1}
.card-scene{display:block;margin-top:5px;padding-top:5px;border-top:1px solid #75664340;font-size:10px;line-height:1.5;color:#6e5a3b;text-align:center;font-style:italic}
.card>.card-face,.modal-cards>.card>.card-face{height:auto;min-height:300px}
.card-detail{display:flex;gap:28px;align-items:flex-start;max-width:660px}.card-detail>.card{flex-shrink:0}.card-detail p{line-height:1.8}.detail-scene{color:#dbc58e;font-size:17px}.card-detail a,.library-entry a{color:#e2ca8f}
.library-entry{width:202px}.library-entry>.card{width:100%}.library-entry details{margin-top:14px;color:#a5afa8;font-size:11px;line-height:1.8}.library-entry summary{cursor:pointer;color:#d2bf8f}
.log-tactic{display:block;font-size:11px;color:#c5ad7c;margin:4px 0}
.hand-card{height:246px}.hand-dock{min-height:278px}.hand-card .card-art>b{font-size:13px;letter-spacing:1px}.hand-card .card-scene{font-size:9px;line-height:1.4}
@media(max-width:1100px){.hand-card{height:246px}.hand-dock{min-height:278px}}
@media(max-width:720px){
 .hand-card{height:212px}.hand-dock{height:241px;min-height:241px}.combat-screen{min-height:537px}
 .hand-card .card-art>b{font-size:11px;letter-spacing:1px}.hand-card .card-art>span{font-size:7px}
 .hand-card .card-scene{font-size:8px;line-height:1.3;margin-top:3px;padding-top:3px}.hand-card .card-effect{font-size:8px;line-height:1.4}
 .card-detail{flex-direction:column;align-items:center;gap:10px}.card-detail>div{width:100%}.card-detail>.card{width:202px}
 .library-entry{width:160px}.library-entry .card-title{font-size:13px}.library-entry .card-effect{font-size:10px}.library-entry .card-art{height:60px;min-height:60px}
 .selection-panel .text-button{font-size:9px;padding:3px}.selection-panel strong{font-size:9px}
}

.discard-reminder{display:block;margin-top:3px;font-size:9px;line-height:1.4;color:#adb6aa}@media(max-width:720px){.discard-reminder{font-size:8px}}

.exhaust-tag{color:#793321;background:#b5572420;border-radius:3px;padding:1px 3px;font-weight:800;letter-spacing:0}

/* Iteration 04: portrait-led cards; details are available on hover or focus. */
.card-portrait{position:relative;display:flex;align-items:flex-end;justify-content:center;height:126px;min-height:126px;overflow:hidden;flex-shrink:0;border:1px solid var(--accent-dark);border-radius:4px;background:radial-gradient(ellipse at 50% 20%,#ffffff22,transparent 65%),repeating-linear-gradient(135deg,transparent 0 25px,#fff1 26px 27px),linear-gradient(150deg,var(--accent),var(--accent-dark));color:#eee5cf45}
.portrait-silhouette{height:94%;width:100%;filter:drop-shadow(0 3px 6px #0004)}
.card-portrait>.icon{width:65px;height:65px;margin:auto;color:#e4d7b17a}
.portrait-role{position:absolute;bottom:5px;font-size:9px;letter-spacing:1px;color:#f4e8cb;background:#101a2070;border-radius:2px;padding:1px 4px}.portrait-role{left:5px}
.card-tactic{display:block;text-align:center;font-size:13px;letter-spacing:1px;line-height:26px;color:#473621;flex-shrink:0}
.card-effect{display:flex;flex-direction:column;justify-content:center;gap:2px;line-height:1.45;font-size:12px;flex:1;padding:3px 0}
.card-effect>span{display:block}.card-effect strong{font-size:1.16em;font-weight:800;color:#27251f}
.card>.card-face,.modal-cards>.card>.card-face{height:286px;min-height:286px}.card .card-effect,.modal-cards .card-effect{font-size:12px;line-height:1.45}
.card-scene,.card-type{display:none}.card-foot{flex-shrink:0;letter-spacing:.5px;margin-top:3px;line-height:13px}
.hand-card{height:246px;transition:transform .16s ease-out,filter .16s ease-out;will-change:transform}
.hand-card .card-portrait{height:103px;min-height:103px}.hand-card .card-tactic{font-size:12px;line-height:23px}.hand-card .card-effect{font-size:11px;line-height:1.4}.hand-card .card-title{font-size:13px;line-height:24px}
.hand-card:hover,.hand-card:focus-visible{filter:drop-shadow(0 0 10px #edce8270)}
.hand-card.selected .card-face{outline:2px solid #f5db89;outline-offset:2px;box-shadow:0 0 24px #ebcc6d66,inset 0 0 0 2px #ccb579}
.hand-card.dragging-card{transition:none!important;filter:drop-shadow(0 12px 18px #000a)!important}
.card:focus-visible{outline:2px solid #e8d29c;outline-offset:7px}.library-entry>.card>.card-face{height:286px;min-height:286px}
.fighter{transition:filter .12s}.fighter.drop-ready{filter:drop-shadow(0 0 14px #c7ecc2)}.fighter.drop-ready .combat-target{outline:3px solid #d8efb0;outline-offset:6px;border-radius:12px}
.aim-guide{position:fixed;inset:0;width:100vw;height:100dvh;pointer-events:none;z-index:190;overflow:visible;fill:none;stroke:#edcf87;stroke-width:3;filter:drop-shadow(0 0 3px #edcf87)}.aim-guide path{stroke-dasharray:5 7}.aim-guide[hidden]{display:none}
.combat-float{position:absolute;left:50%;top:15%;font-size:24px;font-weight:900;text-shadow:0 2px 4px #000;z-index:80;pointer-events:none;white-space:nowrap}.combat-float.damage{color:#ffb095}.combat-float.defense{color:#b4ede0;font-size:18px}
.card-flight{position:fixed!important;bottom:auto!important;margin:0!important;z-index:210!important;pointer-events:none!important;transform:none;min-width:0!important;transition:none!important}.card-flight .card-key,.card-flight .card-unavailable{display:none}
#card-tooltip{position:fixed;inset:auto;margin:0;padding:15px 17px;width:292px;max-width:calc(100vw - 20px);max-height:calc(100dvh - 20px);overflow:auto;border:1px solid #bba36b;border-radius:8px;background:linear-gradient(135deg,#26363b,#101d25);color:#e6dec9;box-shadow:0 10px 32px #0009;z-index:300;pointer-events:none;font-size:12px;line-height:1.6}
#card-tooltip[hidden]{display:none}#card-tooltip header{border-bottom:1px solid #93836955;padding-bottom:8px;margin-bottom:9px;display:flex;gap:10px;align-items:baseline;justify-content:space-between}#card-tooltip header>span{color:#9baaa4;font-size:11px}#card-tooltip header>b{font-size:17px;color:#efd99c}#card-tooltip p{margin:7px 0}#card-tooltip .tip-effect{font-size:13px;color:#f6ecd3}#card-tooltip .tip-keyword{font-size:11px;color:#a9b9b4}#card-tooltip .tip-keyword strong{color:#e4cc8a;margin-right:7px}#card-tooltip .tip-scene{font-size:11px;color:#bea779;border-top:1px solid #93836944;padding-top:8px;font-style:italic}#card-tooltip .tip-scene small{display:block;font-size:9px;color:#718c8c;font-style:normal;margin-top:3px}
@media(max-width:720px){
 .hand-card{height:212px}.hand-card .card-portrait{height:84px;min-height:84px}.hand-card .card-title{font-size:11px;line-height:20px}.hand-card .card-tactic{font-size:10px;line-height:20px}.hand-card .card-effect{font-size:9px;line-height:1.4;padding:2px 0;gap:1px}.hand-card .card-foot{font-size:7px;line-height:11px}.hand-card .portrait-role{font-size:7px;padding:0 3px;bottom:3px}.hand-card .portrait-role{left:3px}
 .library-entry .card-portrait{height:115px;min-height:115px}.library-entry .card-effect{font-size:11px}.card .card-tactic{font-size:12px}
 #card-tooltip{width:260px;padding:11px 13px;font-size:11px}#card-tooltip header>b{font-size:15px}#card-tooltip .tip-effect{font-size:12px}#card-tooltip .tip-keyword{font-size:10px}
 .combat-float{font-size:20px}.combat-float.defense{font-size:15px}
}
@media(prefers-reduced-motion:reduce){.hand-card,.fighter{transition:none!important}.card-flight,.combat-float{display:none!important}}
.hand-card:hover:not(.selected),.hand-card:focus-visible:not(.selected){transform:translateX(calc(-50% + var(--offset)*var(--step))) translateY(var(--bend)) rotate(var(--tilt))}
.hand-card .card-face{transition:transform .16s ease-out}
.hand-card:hover:not(.selected) .card-face,.hand-card:focus-visible:not(.selected) .card-face{transform:translateY(-12px) rotate(calc(-1 * var(--tilt))) scale(1.05)}
.hand-card.dragging-card .card-face,.card-flight .card-face{transform:none!important;transition:none!important}
@media(max-width:720px){.hand-card:hover:not(.selected),.hand-card:focus-visible:not(.selected){transform:translateX(calc(-50% + var(--offset)*var(--step))) translateY(min(var(--bend),10px)) rotate(var(--tilt))}}
@media(prefers-reduced-motion:reduce){.hand-card .card-face{transition:none!important}.hand-card:hover:not(.selected) .card-face,.hand-card:focus-visible:not(.selected) .card-face{transform:none}}

/* Card overview modal */
.overview-tabs, .region-filter-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; justify-content:center; }
.overview-tabs button, .region-filter-tabs button { font-size:11px; padding:6px 10px; white-space:nowrap; }
.overview-info { text-align:center; font-size:12px; color:#a3b4ab; margin-bottom:18px; }
.modal-cards.overview-cards { justify-content:flex-start; gap:24px 18px; }
.skin-overview { display:flex; flex-wrap:wrap; gap:18px; justify-content:center; }
.skin-entry { width:220px; border:1px solid #6a705e; background:#1c2b2faa; padding:15px; border-radius:6px; text-align:left; }
.skin-entry h3 { color:#e0cb96; margin:0 0 8px; font-size:16px; }
.skin-text { color:#a5b5aa; font-size:12px; line-height:1.6; margin:0 0 6px; }
.skin-note { color:#8fa29a; font-size:10px; }
.empty-overview { text-align:center; color:#8fa29a; padding:30px 0; }
@media (max-width:720px) {
  .overview-tabs, .region-filter-tabs { gap:4px; }
  .overview-tabs button, .region-filter-tabs button { font-size:10px; padding:4px 6px; }
  .overview-info { font-size:11px; }
  .skin-entry { width:160px; }
  .modal-cards.overview-cards { gap:18px 10px; }
}

.overview-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 10px;
}
.overview-cards .library-entry{width:100%;justify-self:center;} .overview-cards .library-entry .card{width:100%;} .overview-cards .library-entry,
.overview-cards .library-entry .card {
  min-width: 0;
  max-width: 200px;
  margin-left: auto;
  margin-right: auto;
}

/* Season-specific map and UI. Keep legacy intact. */
.season-map .map-intro h1{font-size:38px;letter-spacing:4px;line-height:1.2}
.season-map .map-progress b{font-size:26px}
.season-map .map-progress span{font-size:10px}
.season-map .map-board{height:1000px;min-height:1000px;background:radial-gradient(ellipse at 50% 40%,#eee1bc80,transparent 72%),repeating-linear-gradient(70deg,#b8a57609 0 2px,transparent 2px 12px)}
.season-map .map-paths path.available{stroke:#334b42;opacity:.9;stroke-width:3}
.season-itinerary{list-style:none;margin:22px 0;padding:0;display:grid;gap:14px}.season-itinerary li{display:flex;align-items:center;gap:12px;opacity:.4;font-size:12px}.season-itinerary li.active{opacity:1;color:#f1d393}.season-itinerary li.complete{opacity:.8;color:#94bb99}.season-itinerary li>b{border:1px solid currentColor;border-radius:50%;padding:4px 8px}.season-itinerary small{display:block;margin-top:3px;font-size:10px}.library-tabs{position:sticky;top:0;background:#152229;padding:8px;z-index:3}
.season-map .map-stop{width:105px}
.season-map .map-stop{transform:translate(-50%,-22px)}.season-map .kind-boss{transform:translate(-50%,-30px)}
.season-map .map-stop .node-label{font-size:9px;white-space:normal;line-height:1.3}
.season-map .map-stop.current .node-label{font-size:10px;font-weight:700}
.season-map .map-scroll{background:#c9bb95;height:calc(100dvh - 140px)} /* scrollable tall board */
.season-map .map-start{bottom:5px}
.intermission-details{margin:20px auto;max-width:400px;border:1px solid #5a6b63;padding:15px;background:#1b2a2e;text-align:left}
.intermission-details p{margin:8px 0;font-size:12px;color:#b7c6b6}
.region-picker{width:100%;max-width:520px;margin:0 auto 22px}
.region-tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.region-tab{flex:1 1 110px;min-width:100px;padding:9px 8px;font-size:13px;background:transparent;border:1px solid #5c6b68;color:#c9d2c6}
.region-tab small{display:block;font-size:9px;color:#899e98;margin-top:2px;white-space:nowrap}
.region-tab.active{background:#314740;border-color:#c6b178;color:#ffe9b1}
.region-tab.active small{color:#d8c48f}
.region-note{font-size:10px;color:#819189;margin-top:8px}
.room-emblem.season-room{color:#bda87a}
@media(max-width:720px){
 .season-map .map-intro h1{font-size:24px;letter-spacing:1px}
 .season-map .map-scroll{height:calc(100dvh - 130px)}
 .season-map .map-board{min-height:1000px}
 .season-map .map-stop{width:76px}
 .season-map .map-stop{transform:translate(-50%,-20px)}.season-map .kind-boss{transform:translate(-50%,-25px)}
 .season-itinerary{display:none}
 .season-map .map-intro>button{font-size:10px;padding:5px 9px}
 .region-tab{min-width:85px;padding:7px 4px;font-size:11px}
 .region-tab small{font-size:8px}
 .season-map .map-instruction{display:none}
}

/* 基础框架样式 */
.weapon-frame {
  position: relative;
  display: inline-block;
  width: 240px;
  height: 168px;
  overflow: hidden;
  border-radius: 8px;
  background: #1a1a2e;
  box-shadow: 0 0 12px rgba(0,0,0,0.5);
  transition: transform 0.2s;
}
.weapon-frame:hover {
  transform: scale(1.02);
}
/* 渲染图片 */
.weapon-render {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scaleX(1) rotate(0deg);
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 3;
  filter: drop-shadow(0 0 6px var(--weapon-accent));
  pointer-events: none;
}
/* 地面阴影 */
.weapon-ground {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 6px;
  background: radial-gradient(ellipse at center, var(--weapon-accent) 0%, transparent 70%);
  opacity: 0.6;
  z-index: 1;
}
/* 光环效果 */
.weapon-aura {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 40%, color-mix(in srgb, var(--weapon-accent) 40%, transparent) 70%, transparent 100%);
  opacity: 0.5;
  z-index: 2;
  pointer-events: none;
}
/* 光环动画 */
@keyframes auraPulse {
  0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.05); }
}
/* 扫描环 - 默认 */
.weapon-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: 90%;
  border: 2px solid color-mix(in srgb, var(--weapon-accent) 70%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--weapon-accent) inset, 0 0 10px var(--weapon-accent);
  z-index: 4;
  pointer-events: none;
}
/* 转动动画 */
@keyframes ringSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
/* 能量线 ::before (横向) */
.weapon-frame::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 10%;
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--weapon-accent), transparent);
  z-index: 5;
  pointer-events: none;
}
/* 能量线 ::after (竖向) */
.weapon-frame::after {
  content: '';
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 1px;
  height: 30%;
  background: linear-gradient(180deg, transparent, var(--weapon-accent), transparent);
  z-index: 5;
  pointer-events: none;
}
/* 特定 ID 样式 */
.weapon-rush .weapon-ring {
  border-style: dashed;
  animation: ringSpin 4s linear infinite;
}
.weapon-rush .weapon-render {
  transform: translate(-50%, -50%) scaleX(1) rotate(-5deg);
}
.weapon-intel .weapon-ring {
  border-radius: 0;
  width: 70%;
  height: 70%;
  border: 1px solid var(--weapon-accent);
  box-shadow: 0 0 15px var(--weapon-accent), inset 0 0 15px var(--weapon-accent);
}
.weapon-intel .weapon-aura {
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--weapon-accent) 20%, transparent) 0deg 10deg, transparent 10deg 20deg);
  border-radius: 0;
  animation: auraPulse 3s ease-in-out infinite;
}
.weapon-intel .weapon-render::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--weapon-accent) 20%, transparent), transparent);
  pointer-events: none;
}
.weapon-twin .weapon-render {
  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
  transform: translate(-50%, -50%) scaleX(1) rotate(2deg);
}
.weapon-twin .weapon-ring {
  border: 1px solid var(--weapon-accent);
  border-radius: 0;
  width: 40%;
  height: 80%;
  left: 25%;
  transform: translate(-50%, -50%) rotate(45deg);
  animation: ringSpin 6s linear infinite reverse;
}
.weapon-wall .weapon-ring {
  border: 2px solid var(--weapon-accent);
  border-radius: 0;
  width: 80%;
  height: 80%;
  box-shadow: 0 0 20px var(--weapon-accent), inset 0 0 20px var(--weapon-accent);
  animation: auraPulse 2s ease-in-out infinite;
}
.weapon-wall .weapon-aura {
  background: linear-gradient(45deg, transparent 40%, color-mix(in srgb, var(--weapon-accent) 30%, transparent) 60%, transparent);
}
.weapon-control .weapon-ring {
  border: 1px solid var(--weapon-accent);
  border-radius: 50%;
  width: 60%;
  height: 60%;
  box-shadow: 0 0 25px var(--weapon-accent);
  animation: ringSpin 8s linear infinite;
}
.weapon-control .weapon-aura {
  background: radial-gradient(circle, color-mix(in srgb, var(--weapon-accent) 40%, transparent) 20%, transparent 70%);
}
.weapon-elite .weapon-ring {
  border: 2px solid var(--weapon-accent);
  border-radius: 50%;
  width: 80%;
  height: 80%;
  box-shadow: 0 0 30px var(--weapon-accent), 0 0 60px color-mix(in srgb, var(--weapon-accent) 40%, transparent);
  animation: ringSpin 3s linear infinite;
}
.weapon-elite .weapon-aura {
  background: radial-gradient(circle, color-mix(in srgb, var(--weapon-accent) 50%, transparent) 0%, transparent 70%);
  animation: auraPulse 1.5s ease-in-out infinite;
}
.weapon-master1 .weapon-ring {
  border: 2px solid var(--weapon-accent);
  border-radius: 0;
  width: 70%;
  height: 70%;
  box-shadow: 0 0 25px color-mix(in srgb, var(--weapon-accent) 80%, #FFFFFF), inset 0 0 25px color-mix(in srgb, var(--weapon-accent) 60%, #FFFFFF);
  transform: translate(-50%, -50%) rotate(45deg);
}
.weapon-master1 .weapon-aura {
  background: conic-gradient(from 0deg, transparent, color-mix(in srgb, var(--weapon-accent) 40%, transparent), transparent);
  animation: ringSpin 5s linear infinite;
}
.weapon-master2 .weapon-ring {
  border: 1px solid var(--weapon-accent);
  border-radius: 50%;
  width: 60%;
  height: 60%;
  box-shadow: 0 0 30px var(--weapon-accent), inset 0 0 30px var(--weapon-accent);
  animation: ringSpin 7s linear infinite reverse;
}
.weapon-master2 .weapon-aura {
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--weapon-accent) 60%, transparent) 0%, transparent 80%);
}
.weapon-champion .weapon-ring {
  border: 2px solid var(--weapon-accent);
  border-radius: 50%;
  width: 90%;
  height: 90%;
  box-shadow: 0 0 35px var(--weapon-accent), 0 0 70px color-mix(in srgb, var(--weapon-accent) 50%, #FF0000), inset 0 0 25px var(--weapon-accent);
  animation: ringSpin 2s linear infinite, auraPulse 1.5s ease-in-out infinite;
}
.weapon-champion .weapon-aura {
  background: radial-gradient(circle, #FF4500 0%, #FF8C00 30%, transparent 70%);
  animation: auraPulse 1s ease-in-out infinite;
}
.weapon-champion .weapon-render {
  transform: translate(-50%, -50%) scaleX(1) rotate(-8deg);
  animation: float 2s ease-in-out infinite;
}
/* 悬浮动画 */
@keyframes float {
  0%, 100% { transform: translate(-50%, -50%) scaleX(1) rotate(-8deg) translateY(0); }
  50% { transform: translate(-50%, -50%) scaleX(1) rotate(-8deg) translateY(-6px); }
}
/* 减少动态效果 */
@media (prefers-reduced-motion: reduce) {
  .weapon-aura, .weapon-ring, .weapon-champion .weapon-render {
    animation: none;
  }
  .weapon-aura, .weapon-ring {
    transition: none;
  }
}
/* 小屏幕适配 */
@media (max-width: 768px) {
  .weapon-frame {
    width: 170px;
    height: 120px;
  }
  .weapon-render {
    transform: translate(-50%, -50%) scaleX(1) rotate(0deg);
  }
}
/* 图鉴覆盖宽高 */
.wrapper .weapon-frame {
  width: 100%;
  height: 100%;
}

/* Artwork is presentation only: no pointer targets or gameplay state. */
.portrait-image{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;user-select:none;object-fit:contain;object-position:center top;filter:drop-shadow(0 4px 5px #0005)}
.portrait-image.tactic-art{object-fit:cover;filter:none}
.portrait-image.poster-photo{object-fit:cover;object-position:center 25%}
.card-portrait:after{content:"";position:absolute;inset:65% 0 0;background:linear-gradient(transparent,#06131ac4);pointer-events:none}
.portrait-role{z-index:1;background:#101a20ce}
.art-missing{margin:auto;font-size:11px;color:#c9d2d4}
.art-credit{font-size:12px;line-height:1.6;color:#a6b6b5}
.enemy .combat-target{padding:0 3px;min-width:208px}
.opponent-art{display:block;width:220px;height:168px;position:relative;pointer-events:none;user-select:none}
.opponent-art img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 8px 7px #0005)}
.fighter.enemy .intent-bubble{z-index:2}
@media(max-width:760px){.opponent-art{width:160px;height:123px}.enemy .combat-target{min-width:164px}.fighter.enemy{width:170px}}
/* Reviewed corrections to DeepSeek's effect draft: transparent battlefield,
   complete twin weapons, quiet effects, and no animations on the hit target. */
.weapon-frame{display:block;background:none;box-shadow:none;overflow:visible;pointer-events:none;user-select:none;width:220px;height:168px;transition:none}
.weapon-frame:hover{transform:none}
.weapon-frame *{pointer-events:none}
.weapon-frame .weapon-render{width:95%;height:68%;filter:drop-shadow(0 8px 5px #0009);z-index:3}
.weapon-frame .weapon-aura,.weapon-frame .weapon-ring{animation:none!important;z-index:1}
.weapon-frame .weapon-ring{opacity:.5;box-shadow:none;max-height:110px}
.weapon-frame .weapon-aura{opacity:.3}
.weapon-frame:before,.weapon-frame:after{opacity:.25}
.weapon-twin .weapon-render{clip-path:none;top:39%;width:84%;height:55%;transform:translate(-50%,-50%) scaleX(1) rotate(-8deg)}
.weapon-twin .weapon-render.weapon-second{top:64%;left:56%;transform:translate(-50%,-50%) scaleX(1) rotate(7deg);z-index:2}
.weapon-champion .weapon-render{animation:none}
.weapon-display .weapon-render{transform:translate(-50%,-50%) scaleX(1)}
.weapon-display:before,.weapon-display:after{display:none}
@media(max-width:760px){.weapon-frame{width:160px;height:120px}.weapon-frame .weapon-ring{max-height:80px}}

/* Card rarity = how often a card is offered (普通 steel / 罕见 blue / 稀有 gold).
   It is a game-design marker, never a grade of the player pictured on the card. */
.card,.hand-card{--rarity:#8d99a6;--rarity-deep:#4b5561}
.card.rarity-uncommon,.hand-card.rarity-uncommon{--rarity:#5b9be6;--rarity-deep:#23497a}
.card.rarity-rare,.hand-card.rarity-rare{--rarity:#e6bd4f;--rarity-deep:#7a5a14}
.card-rarity{position:absolute;top:-6px;right:-6px;width:15px;height:15px;transform:rotate(45deg);border:2px solid #f3e7c4;outline:1px solid #3a2f20;border-radius:3px;background:linear-gradient(135deg,#fff8 0 18%,var(--rarity) 40%,var(--rarity-deep));box-shadow:0 2px 4px #0006;z-index:2}
.hand-card .card-rarity{width:11px;height:11px;top:-4px;right:-4px;border-width:1.5px}
.rarity-common .card-face{outline:1px solid #8d99a699;outline-offset:1px}
.rarity-uncommon .card-face{outline:2px solid #5b9be6cc;outline-offset:1px}
.rarity-rare .card-face{outline:2px solid #e6bd4f;outline-offset:1px;filter:drop-shadow(0 0 7px #e6bd4f66)}
.rarity-rare .card-rarity{box-shadow:0 0 8px #ffd86a,0 2px 4px #0006}
.rarity-caption{display:flex;align-items:center;justify-content:center;gap:6px;margin:9px 0 0;font-size:11px;letter-spacing:.5px;color:#c9d2da}
.rarity-caption i{width:9px;height:9px;transform:rotate(45deg);border-radius:2px;background:var(--rarity);box-shadow:0 0 0 1px #f3e7c4aa}
.rarity-caption.rarity-uncommon{color:#9cc6f7}
.rarity-caption.rarity-rare{color:#f3d27a;font-weight:700}
.contract-slot .rarity-caption{margin-top:6px}
#card-tooltip .tip-rarity{margin:8px 0 0;padding-top:7px;border-top:1px solid #93836944;font-size:11px;color:#b8c2cc}
#card-tooltip .tip-rarity.rarity-uncommon{color:#8dbdf5}#card-tooltip .tip-rarity.rarity-rare{color:#f0cf6a}
#card-tooltip .tip-rarity small{display:block;font-size:9px;color:#8a9a9a;margin-top:2px}
.rarity-filter-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;justify-content:center;align-items:center}
.rarity-filter-tabs button{font-size:11px;padding:6px 10px;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.rarity-filter-tabs button[data-ui$="-common"]::before,.rarity-filter-tabs button[data-ui$="-uncommon"]::before,.rarity-filter-tabs button[data-ui$="-rare"]::before{content:"";width:8px;height:8px;transform:rotate(45deg);border-radius:2px;background:#8d99a6}
.rarity-filter-tabs button[data-ui$="-uncommon"]::before{background:#5b9be6}
.rarity-filter-tabs button[data-ui$="-rare"]::before{background:#e6bd4f}
.rarity-filter-tabs small{flex-basis:100%;text-align:center;font-size:10px;color:#8f9c9a}
@keyframes rare-reveal{0%,100%{filter:drop-shadow(0 0 5px #e6bd4f55)}50%{filter:drop-shadow(0 0 14px #e6bd4fbb)}}
.reward-cards .rarity-rare>.card-face{animation:rare-reveal 2.4s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.reward-cards .rarity-rare>.card-face{animation:none}}
@media(max-width:720px){.rarity-filter-tabs{gap:4px}.rarity-filter-tabs button{font-size:10px;padding:4px 6px}.rarity-caption{font-size:10px;margin-top:6px}}

/* combat-fx.css */
.cfx-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 220;
  overflow: hidden;
}
.cfx-ray {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  border-radius: 2px;
  box-shadow: 0 0 8px currentColor;
  will-change: transform, opacity;
}
.cfx-spark {
  position: fixed;
  width: 34px;
  height: 34px;
  clip-path:polygon(50% 0,58% 35%,85% 15%,65% 43%,100% 50%,65% 57%,85% 85%,57% 65%,50% 100%,43% 65%,15% 85%,35% 57%,0 50%,35% 43%,15% 15%,43% 35%);
  z-index: 10001;
  pointer-events: none;
  box-shadow: 0 0 12px currentColor;
  will-change: transform, opacity;
}
.cfx-float {
  position: fixed;
  z-index: 10002;
  pointer-events: none;
  font-size: 24px;
  font-weight: 900;
  text-shadow: 0 2px 4px black;
  white-space: nowrap;
  will-change: transform, opacity;
}
.cfx-damage {
  color: #ff9a6b;
}
.cfx-defense {
  color: #8ed0d0;
  font-size: 20px;
}
.cfx-loss {
  color: #e06c5a;
  font-size: 28px;
}
.cfx-status-label {
  color: #c38be0;
  font-size: 16px;
}
.cfx-barrier {
  position: fixed;
  width: 150px;
  height: 148px;
  border-radius: 25px 25px 46px 46px;
  background: repeating-linear-gradient(0deg,transparent 0 25px,#79f4e975 26px 27px),linear-gradient(115deg,#7deee340,#17444b66,#7deee330);
  border: 2px solid #5fc9d0;
  box-shadow: 0 0 18px rgba(80, 200, 220, 0.7), inset 0 0 18px rgba(80, 200, 220, 0.3);
  z-index: 10000;
  pointer-events: none;
  will-change: transform, opacity;
  transform: translate(-50%, -50%);
}
.cfx-barrier::before,
.cfx-barrier::after {
  content: '';
  position: absolute;
  background: #5fc9d0;
  box-shadow: 0 0 8px rgba(80, 200, 220, 0.7);
}
.cfx-barrier::before {
  inset: 10px;
  background:transparent;
  border:1px solid #9cfff0;
  border-radius:20px 20px 40px 40px;
}
.cfx-barrier::after {
  top:25%;bottom:25%;left:-10px;right:-10px;
  background:transparent;
  border-top:2px solid #b4fff0;
  border-bottom:2px solid #b4fff0;
}
.cfx-status-ring {
  position: fixed;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 3px solid #a36fd0;
  background: radial-gradient(circle, rgba(160, 90, 200, 0.3), transparent);
  box-shadow: 0 0 15px #a36fd0;
  z-index: 10000;
  pointer-events: none;
  will-change: transform, opacity;
}
.cfx-power-flash {
  position: fixed;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, #f5d56b 0%, transparent 70%);
  z-index: 10000;
  pointer-events: none;
  will-change: transform, opacity;
}
.cfx-title {
  position: fixed;
  z-index: 10003;
  pointer-events: none;
  font-size: 18px;
  font-weight: bold;
  color: #fff3d6;
  text-shadow: 0 2px 4px black;
  white-space: nowrap;
  will-change: transform, opacity;
}
.cfx-reduced-marker {
  transform:translateX(-50%);
  max-width:calc(100vw - 24px);
  text-align:center;
  position: fixed;
  background: rgba(0,0,0,0.7);
  color: #fff;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 14px;
  z-index: 10003;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .cfx-ray, .cfx-spark, .cfx-barrier, .cfx-status-ring, .cfx-power-flash {
    display: none !important;
  }
  .cfx-float, .cfx-title {
    animation: none !important;
  }
  .cfx-reduced-marker {
    display: block;
  }
}
@media (max-width: 600px) {
  .cfx-barrier {
    width: 110px;
    height: 110px;
  }
  .cfx-float {
    font-size: 18px;
  }
}
.cfx-container *{pointer-events:none!important}
.cfx-title{padding:6px 14px;background:#102127e6;border:1px solid #b8cfbf55;border-radius:4px;font-size:14px;letter-spacing:2px}
/* Let Web Animations move the card instead of the old !important reset. */
.card-flight{transform:none}
/* The enemy keeps the arena while its action resolves; the next hand appears afterward. */
.enemy-turn-banner{position:absolute;z-index:80;left:50%;top:8%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;min-width:180px;padding:12px 24px;border:1px solid #ce9e67;border-radius:8px;background:#281d19ed;box-shadow:0 10px 35px #000a,0 0 32px #bb724655;color:#f8dbc1;pointer-events:none;animation:enemy-turn-in .25s ease-out}
.enemy-turn-banner strong{font-size:20px;letter-spacing:4px}.enemy-turn-banner span{font-size:11px;color:#d5ad92}
@keyframes enemy-turn-in{from{opacity:0;transform:translate(-50%,-15px)}to{opacity:1;transform:translate(-50%,0)}}
.cfx-muzzle,.cfx-bullet{position:fixed;z-index:2002;pointer-events:none;border-radius:50%}
.cfx-muzzle{width:26px;height:26px;filter:blur(2px)}.cfx-bullet{width:8px;height:8px}

/* Cover page styles, scoped to body.home-mode */

body.home-mode {
  background: #0c1319;
  min-height: 100dvh;
  margin: 0;
}

body.home-mode .cover-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 100dvh;
  overflow-x: hidden;
}

/* First screen: hero cover */
body.home-mode .cover-hero {
  position: relative;
  width: 100%;
  min-height: clamp(360px, 58dvh, 600px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

body.home-mode .cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

body.home-mode .cover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,12,16,0.15) 0%, rgba(8,12,16,0.35) 80%, rgba(8,12,16,0.75) 100%);
  z-index: 1;
}

body.home-mode .cover-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 20px 16px;
  max-width: 90%;
  color: #f5e6bf;
  text-shadow: 0 2px 10px rgba(0,0,0,0.7);
}

body.home-mode .cover-content .eyebrow {
  font-size: 12px;
  letter-spacing: 3px;
  color: #d6b56d;
  text-transform: uppercase;
  margin-bottom: 8px;
}

body.home-mode .cover-content h1 {
  font-family: Georgia, 'SimSun', serif;
  font-size: clamp(42px, 12vw, 96px);
  letter-spacing: 8px;
  margin: 0 0 12px;
  line-height: 1.1;
  color: #fff0c4;
  text-shadow: 0 4px 18px rgba(0,0,0,0.8);
  text-indent: 8px;
}

body.home-mode .cover-sub {
  font-size: clamp(13px, 3vw, 18px);
  letter-spacing: 2px;
  color: #b9c4bc;
  margin: 0 0 22px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

body.home-mode .cover-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
}

body.home-mode .cover-actions .primary {
  width: 100%;
  padding: 14px 20px;
  font-size: 16px;
  letter-spacing: 1px;
  background: linear-gradient(#806944, #50432c);
  border: 1px solid #c5a363;
  color: #fff1c8;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  transition: transform 0.1s, box-shadow 0.1s;
}

body.home-mode .cover-select-link { text-decoration: none; text-align: center; }
body.home-mode .setup-start { width: min(100%, 300px); margin: 16px 0 8px; }
body.home-mode .setup-start .primary { width: 100%; min-height: 48px; font-size: 16px; }

body.home-mode .cover-actions .primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.6);
}

body.home-mode .cover-actions .primary:active {
  transform: translateY(1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* Second screen: setup options */
body.home-mode .cover-setup {
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 16px 40px;
  background: #0c1319;
}

body.home-mode .setup-title {
  font-size: 14px;
  letter-spacing: 4px;
  color: #d6b56d;
  text-transform: uppercase;
  margin: 0 0 18px;
}

body.home-mode .region-picker {
  width: 100%;
  max-width: 520px;
  margin: 0 auto 18px;
}

body.home-mode .region-tabs {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

body.home-mode .region-tab {
  flex: 1 1 110px;
  min-width: 100px;
  padding: 9px 8px;
  font-size: 13px;
  background: transparent;
  border: 1px solid #5c6b68;
  color: #c9d2c6;
  border-radius: 4px;
}

body.home-mode .region-tab small {
  display: block;
  font-size: 9px;
  color: #899e98;
  margin-top: 2px;
  white-space: nowrap;
}

body.home-mode .region-tab.active {
  background: #314740;
  border-color: #c6b178;
  color: #ffe9b1;
}

body.home-mode .region-tab.active small {
  color: #d8c48f;
}

body.home-mode .region-note {
  font-size: 10px;
  color: #819189;
  margin-top: 8px;
  text-align: center;
}

body.home-mode .seed-label {
  font-size: 10px;
  color: #7e9090;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 9px;
  width: 100%;
  max-width: 360px;
}

body.home-mode .seed-label input {
  min-width: 0;
  flex: 1;
  background: #101c22;
  border: 1px solid #3c4d50;
  color: #c3ceca;
  padding: 7px 10px;
  border-radius: 3px;
  font-size: 11px;
}

body.home-mode .button-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 12px;
}

body.home-mode .text-button,
body.home-mode a.text-button {
  background: transparent;
  box-shadow: none;
  border-color: transparent;
  padding: 5px 8px;
  font-size: 12px;
  color: #8e9d9e;
  text-decoration: none;
  display: inline-block;
}

body.home-mode .text-button:hover,
body.home-mode a.text-button:hover {
  color: #d6b56d;
  border-color: transparent;
}

body.home-mode .title-note {
  font-size: 10px;
  color: #677c7e;
  margin-top: 20px;
  text-align: center;
}

body.home-mode .warning {
  padding: 10px;
  text-align: center;
  background: #582f2c;
  color: #ef9b80;
  width: 100%;
  max-width: 420px;
  margin-top: 12px;
}

body.home-mode .cover-footer {
  font-size: 10px;
  color: #4a5a5c;
  letter-spacing: 1px;
  margin-top: 24px;
  text-align: center;
}

/* Mobile 390px adjustments */
@media (max-width: 390px) {
  body.home-mode .cover-content {
    padding: 16px 12px;
  }
  body.home-mode .cover-content h1 {
    font-size: 38px;
    letter-spacing: 4px;
    text-indent: 4px;
  }
  body.home-mode .cover-content .eyebrow {
    font-size: 10px;
    letter-spacing: 2px;
  }
  body.home-mode .cover-sub {
    font-size: 12px;
    letter-spacing: 1px;
    margin-bottom: 16px;
  }
  body.home-mode .cover-actions {
    max-width: 220px;
    gap: 8px;
  }
  body.home-mode .cover-actions .primary {
    padding: 12px 16px;
    font-size: 14px;
  }
  body.home-mode .cover-hero {
    min-height: clamp(320px, 55dvh, 470px);
  }
  body.home-mode .cover-setup {
    padding: 20px 12px 30px;
  }
  body.home-mode .region-tab {
    flex-basis: 100px;
    min-width: 90px;
    padding: 7px 6px;
    font-size: 11px;
  }
  body.home-mode .region-tab small {
    font-size: 8px;
  }
  body.home-mode .seed-label {
    max-width: 280px;
    gap: 8px;
  }
  body.home-mode .button-row {
    gap: 8px;
  }
}

/* Prevent horizontal overflow */
body.home-mode .cover-screen,
body.home-mode .cover-hero,
body.home-mode .cover-setup,
body.home-mode .region-picker,
body.home-mode .button-row {
  max-width: 100%;
}

body.home-mode img {
  max-width: 100%;
  height: auto;
}

/* ===== Wa Map Redesign CSS ===== */
/* This stylesheet enhances the map screen for a more tactical, decision-oriented climbing map.
   It relies on the existing DOM structure and base styles, overriding where necessary.
   Designed for both desktop and mobile (390x844). */

/* ----- Board container and scroll area ----- */
.map-scroll {
  background:
    radial-gradient(ellipse at 50% 20%, #3a3323aa, transparent 70%),
    linear-gradient(180deg, #1d1b14 0%, #2a261b 55%, #171510 100%);
  border: 1px solid #6a5f42;
  box-shadow: 0 8px 40px #000c, inset 0 0 50px #74624555;
  border-radius: 8px;
  position: relative;
  overflow: auto;
  scrollbar-color: #8a7b54 #1f1b12;
}

.map-board {
  position: relative;
  background:
    repeating-linear-gradient(70deg, rgba(184, 165, 118, .06) 0 2px, transparent 2px 12px),
    radial-gradient(ellipse at 50% 40%, #c9b98e30, transparent 72%);
  overflow: hidden;
  /* Keep existing min-height overrides from base; we'll add our own for consistency */
  min-height: 590px;
}

/* Season board full height (from season-ui.css) */
.season-map .map-board {
  min-height: 1000px;
  background:
    repeating-linear-gradient(70deg, rgba(184, 165, 118, .06) 0 2px, transparent 2px 12px),
    radial-gradient(ellipse at 50% 35%, #c9b98e30, transparent 72%);
}

/* ----- Path / SVG lines ----- */
.map-paths {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}

.map-paths path {
  stroke: #6a5e42;
  stroke-width: 2;
  stroke-dasharray: 4 7;
  fill: none;
  opacity: .5;
  transition: stroke .2s, opacity .2s, stroke-width .2s;
}

/* Taken path: visible and vivid */
.map-paths path.taken {
  stroke: #c9a35c;
  stroke-width: 3.5;
  stroke-dasharray: none;
  opacity: .9;
  filter: drop-shadow(0 0 3px #f0c97e66);
}

/* Available path (from current to reachable nodes) */
.map-paths path.available {
  stroke: #d4af6a;
  stroke-width: 3;
  stroke-dasharray: 6 4;
  opacity: .8;
  filter: drop-shadow(0 0 4px #f0c97e88);
}

/* ----- Nodes (map stops) ----- */
.map-stop {
  position: absolute;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 3;
  color: #d4c5a0;
  transition: transform .15s ease-out, opacity .3s;
}

/* Node button (crest-like) */
.map-stop > button {
  position: relative;
  display: block;
  margin: auto;
  width: 50px;
  height: 50px;
  padding: 12px;
  border: 2px solid #7a6a48;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 20%, #8f7b54, #4d422d 70%);
  color: #f5e6c8;
  box-shadow: 0 0 0 3px #191711cc, 0 8px 16px #000a, inset 0 1px 4px #fff4;
  transition: transform .12s, box-shadow .12s, border-color .12s;
  touch-action: manipulation;
}

.map-stop > button .icon {
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 1px 2px #0008);
}

/* Hover/focus feedback for non-disabled */
.map-stop > button:not(:disabled):hover,
.map-stop > button:not(:disabled):focus-visible {
  transform: scale(1.12);
  border-color: #e3c07e;
  box-shadow: 0 0 0 4px #e3c07e55, 0 0 18px #edcf8744, 0 8px 16px #000e, inset 0 1px 4px #fff4;
  z-index: 5;
}

.map-stop > button:disabled {
  cursor: not-allowed;
  opacity: 1; /* base sets disabled opacity to .45; we override for distinct styles */
}

/* ----- Node states ----- */

/* Locked: dark, faded, but still shaped like a crest */
.map-stop.locked {
  opacity: .7;
}
.map-stop.locked > button {
  background: radial-gradient(circle at 30% 20%, #4c4536, #28241b 70%);
  border-color: #56503d;
  color: #9a917c;
  box-shadow: 0 0 0 3px #191711cc, 0 4px 8px #0006, inset 0 1px 2px #fff2;
}

/* Visited: green/gold, with checkmark */
.map-stop.visited > button {
  background: radial-gradient(circle at 30% 20%, #6b8f65, #36533c 70%);
  border-color: #9db889;
  color: #ece5c8;
  box-shadow: 0 0 0 3px #17201599, 0 8px 16px #000a, inset 0 1px 4px #fff4;
}

.map-stop.visited .visited-check {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #4e8f4e;
  color: #feffd6;
  border: 2px solid #172015;
  font-size: 14px;
  line-height: 17px;
  text-align: center;
  box-shadow: 0 0 0 2px #263c29, 0 2px 5px #000;
  z-index: 2;
}

/* Bypassed: very faded, cracked? */
.map-stop.bypassed {
  opacity: .45;
  filter: grayscale(.8);
}
.map-stop.bypassed > button {
  background: radial-gradient(circle at 30% 20%, #565144, #332e23 70%);
  border-color: #5a513d;
  color: #9a917c;
  box-shadow: 0 0 0 3px #19171155, 0 4px 8px #0004, inset 0 1px 2px #fff1;
}

/* Current: THE decision point; eye-catching */
.map-stop.current {
  z-index: 6;
}
.map-stop.current > button {
  background: radial-gradient(circle at 30% 20%, #d68f45, #7a3d1d 70%);
  border-color: #ffd166;
  color: #fff9e6;
  box-shadow:
    0 0 0 4px #ffd16655,
    0 0 0 8px #b0712e88,
    0 0 30px #f5b34bcc,
    0 12px 25px #000e,
    inset 0 1px 6px #fff6;
  animation: currentPulse 2.5s infinite alternate;
}

@keyframes currentPulse {
  0% { box-shadow: 0 0 0 4px #ffd16633, 0 0 0 8px #b0712e55, 0 0 20px #f5b34b99, 0 12px 25px #000e, inset 0 1px 6px #fff6; }
  100% { box-shadow: 0 0 0 6px #ffd16666, 0 0 0 11px #b0712e88, 0 0 35px #f5b34bdd, 0 12px 25px #000e, inset 0 1px 6px #fff6; }
}

/* Boss nodes are special, diamond/hex */
.map-stop.kind-boss > button {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  transform: rotate(0deg);
  clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  background: radial-gradient(circle at 30% 20%, #b3543d, #5e2a1e 70%);
}

.map-stop.kind-boss > button .icon {
  width: 36px;
  height: 36px;
}

/* ----- Labels and here-marker ----- */
.node-label {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  color: #f0e4c5;
  text-shadow: 0 1px 3px #000c;
  white-space: nowrap;
  background: rgba(20, 17, 12, .65);
  border-radius: 4px;
  padding: 2px 5px;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* For current node, label prominent */
.map-stop.current .node-label {
  color: #ffedd0;
  background: rgba(50, 31, 14, .8);
  border: 1px solid #f0b95e;
}

/* For visited, dim but readable */
.map-stop.visited .node-label {
  color: #d4e2b8;
}

/* For locked, muted */
.map-stop.locked .node-label {
  color: #958c77;
}

/* For bypassed, strike-through */
.map-stop.bypassed .node-label {
  color: #7a7463;
  text-decoration: line-through;
}

/* "here-label" small text under current node */
.here-label {
  display: block;
  margin-top: 4px;
  font-size: 9px;
  letter-spacing: 2px;
  color: #f8c46a;
  text-shadow: 0 1px 2px #000;
  animation: fadeInOut 2s infinite;
}

@keyframes fadeInOut {
  0%, 100% { opacity: 1; }
  50% { opacity: .6; }
}

/* ----- Bypassed / locked dimming handled per state, but also add a small "lock" or "skip" indicator perhaps? Not needed. ----- */

/* ----- Map watermark ----- */
.map-watermark {
  position: absolute;
  top: 49%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-20deg);
  color: #51462222;
  font-family: Georgia, serif;
  font-size: 60px;
  font-weight: 800;
  letter-spacing: 12px;
  pointer-events: none;
  z-index: 0;
}

/* Season map watermark color to match */
.season-map .map-watermark {
  color: #51462233;
}

/* ----- Map start label (bottom) ----- */
.map-start {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 4px;
  color: #b8a77a;
  z-index: 5;
  background: rgba(20, 17, 12, .6);
  padding: 3px 10px;
  border-radius: 4px;
}

/* Hidden by default in base, but we can keep it hidden or show as a small note; we'll show it subtly */
.map-start {
  display: block;
}

/* ----- Overlay / pseudo elements for edges? We'll use existing svg. ----- */

/* ===== Mobile adjustments (390x844) ===== */
@media (max-width: 720px) {
  .map-screen {
    display: block;
    height: 100dvh;
    padding: 10px 8px;
  }

  .map-intro {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    min-height: 30px;
    padding: 0;
  }

  .map-intro h1 {
    font-size: 20px;
    letter-spacing: 1px;
    margin: 0;
  }

  .map-intro h1 br {
    display: none;
  }

  .map-intro > p,
  .map-progress,
  .map-legend,
  .map-instruction {
    display: none; /* already hidden in base, but ensure */
  }

  .map-scroll {
    height: calc(100dvh - 110px);
    min-height: 0;
    margin-top: 10px;
  }

  .map-board {
    min-height: 800px; /* ensure enough scroll for tall boards */
  }

  .season-map .map-board {
    min-height: 1000px;
  }

  /* Nodes: ensure touch size at least 40px */
  .map-stop > button {
    width: 44px;
    height: 44px;
    padding: 9px;
    border-radius: 50%;
  }

  .map-stop > button .icon {
    width: 22px;
    height: 22px;
  }

  .map-stop.kind-boss > button {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }

  .map-stop.kind-boss > button .icon {
    width: 28px;
    height: 28px;
  }

  .node-label {
    font-size: 9px;
    max-width: 100px;
  }

  .here-label {
    font-size: 8px;
  }

  .map-watermark {
    font-size: 28px;
  }

  .map-start {
    font-size: 9px;
    padding: 2px 6px;
  }
}

/* Very small screens (<=390px) */
@media (max-width: 390px) {
  .map-stop > button {
    width: 42px;
    height: 42px;
  }
  .map-stop.kind-boss > button {
    width: 46px;
    height: 46px;
  }
}

/* ===== Desktop fine-tuning ===== */
@media (min-width: 721px) {
  .map-screen {
    grid-template-columns: 220px minmax(420px, 720px) 200px;
    gap: 28px;
    padding: 24px 35px;
  }

  .map-intro h1 {
    font-size: 48px;
    letter-spacing: 8px;
  }

  .map-stop > button {
    width: 54px;
    height: 54px;
    padding: 14px;
  }

  .map-stop > button .icon {
    width: 25px;
    height: 25px;
  }

  .map-stop.kind-boss > button {
    width: 70px;
    height: 70px;
    border-radius: 20px;
  }

  .map-stop.kind-boss > button .icon {
    width: 40px;
    height: 40px;
  }

  .node-label {
    font-size: 11px;
    max-width: 150px;
  }

  .map-stop.current > button {
    box-shadow:
      0 0 0 6px #ffd16655,
      0 0 0 12px #b0712e88,
      0 0 40px #f5b34bcc,
      0 14px 30px #000e,
      inset 0 1px 6px #fff6;
  }

  .map-stop.current {
    animation: none;
  }

  .here-label {
    font-size: 10px;
  }

  .map-watermark {
    font-size: 80px;
  }

  .map-start {
    font-size: 11px;
  }
}

/* ===== Accessibility: ensure focus visible outline ===== */
.map-stop > button:focus-visible {
  outline: none;
  border-color: #ffd166;
  box-shadow: 0 0 0 3px #ffd166aa, 0 0 20px #f5b34b;
}

/* ===== Reduced motion: disable pulse and transitions ===== */
@media (prefers-reduced-motion: reduce) {
  .map-stop.current > button {
    animation: none;
  }
  .map-stop > button {
    transition: none;
  }
  .here-label {
    animation: none;
  }
}

/* ===== Optional: adjust for season map specifics ===== */
/* The season map already has some overrides in season-ui.css. We'll enhance a bit more. */
.season-map .map-stop.current > button {
  background: radial-gradient(circle at 30% 20%, #d68f45, #7a3d1d 70%);
  border-color: #ffd166;
  color: #fff9e6;
}

.season-map .map-stop.current .node-label {
  font-size: 11px;
  font-weight: 700;
}

/* Season itinerary styling (already present but we can add minor touch) */
.season-itinerary li.active b {
  background: #ffd16633;
  color: #ffd166;
}

/* A seven-lane map cannot keep every room caption open at once. The icon and
   legend stay visible; the room name appears on hover or keyboard focus. */
.season-map .map-stop .node-label,
.season-map .map-stop .here-label {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.season-map .map-stop:hover .node-label,
.season-map .map-stop:focus-within .node-label,
.season-map .map-stop:hover .here-label,
.season-map .map-stop:focus-within .here-label {
  visibility: visible;
  opacity: 1;
}
.season-map .map-stop:hover,
.season-map .map-stop:focus-within { z-index: 8; }

/* The route is a scrollable tournament bracket, not a grid of raised controls.
   Only the current choices have a strong highlight. */
.season-map .map-scroll {
  height: min(74dvh, 720px);
  min-height: 500px;
  overflow-x: hidden;
  overflow-y: auto;
  background: #d0c19d;
  border: 1px solid #8f7e58;
  box-shadow: inset 0 0 28px #7b6a4026, 0 6px 20px #0005;
  scrollbar-color: #8b7855 #d0c19d;
}
.season-map .map-board {
  height: 1400px;
  min-height: 1400px;
  background: radial-gradient(ellipse at 50% 50%, #f0e6ca75, transparent 72%);
}
.season-map .map-watermark { display: none; }
.season-map .map-paths path {
  stroke: #756b56;
  stroke-width: 1.6;
  stroke-dasharray: 3 7;
  opacity: .7;
}
.season-map .map-paths path.taken {
  stroke: #62502f;
  stroke-width: 2.5;
  stroke-dasharray: none;
  opacity: .9;
  filter: none;
}
.season-map .map-paths path.available {
  stroke: #9d671e;
  stroke-width: 2.5;
  stroke-dasharray: 4 5;
  opacity: .95;
  filter: none;
}
.season-map .map-stop > button {
  width: 42px;
  height: 42px;
  padding: 8px;
  border: 1.5px solid #76684c;
  border-radius: 50%;
  background: #e6d9b7;
  color: #544731;
  box-shadow: 0 1px 3px #3e352855;
}
.season-map .map-stop > button .icon { width: 24px; height: 24px; filter: none; }
.season-map .map-stop.locked { opacity: .88; }
.season-map .map-stop.locked > button {
  background: #dfd1ae;
  border-color: #8c7e60;
  color: #574c3a;
  box-shadow: 0 1px 2px #3e352830;
}
.season-map .map-stop.bypassed { opacity: .34; filter: none; }
.season-map .map-stop.visited > button {
  background: #c3c4a0;
  border-color: #617257;
  color: #394f39;
  box-shadow: 0 1px 2px #3e352830;
}
.season-map .map-stop.current > button,
.season-map .map-stop.current > button:not(:disabled):hover {
  background: #f5d993;
  border: 2px solid #8a561c;
  color: #4d3215;
  box-shadow: 0 0 0 4px #d5983c55, 0 2px 5px #3e352866;
  animation: none;
}
.season-map .map-stop.kind-elite > button { border-color: #8a5b48; color: #67422f; }
.season-map .map-stop.kind-shop > button { border-color: #7b6842; }
.season-map .map-stop.kind-rest > button { border-color: #7a7150; }
.season-map .map-stop.kind-boss > button {
  width: 54px;
  height: 54px;
  padding: 9px;
  background: #d2af6c;
  border-color: #714b28;
  color: #493218;
  box-shadow: 0 2px 5px #3e352866;
}
.season-map .map-stop.kind-boss > button .icon { width: 32px; height: 32px; }
.season-map .map-stop.kind-boss.current > button { background: #f5d993; }
.season-map .map-stop > button:focus-visible { outline: 2px solid #a66820; outline-offset: 5px; }
@media(max-width:720px) {
  .season-map .map-scroll { height: min(72dvh, 690px); min-height: 420px; }
  .season-map .map-stop > button { width: 40px; height: 40px; }
  .season-map .map-stop.kind-boss > button { width: 50px; height: 50px; }
  .season-map .map-legend {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    margin: 6px 0 0;
    font-size: 10px;
  }
  .season-map .map-instruction {
    display: block;
    width: 100%;
    margin: 0;
    font-size: 10px;
  }
}

/* shared/character-stage.css
   Styles for the character stage containers and fallback SVG.
   The Three.js canvas is appended by JS; these styles ensure a clean layout. */

.character-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100px;
  display: block;
  pointer-events: none;
  overflow: hidden;
}

.character-stage canvas,
.character-stage svg {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Fallback overlay (appended, not replacing original content) */
.character-stage .character-stage-fallback {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.character-stage .character-stage-fallback svg {
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Both games mount the same WebGL squad into their existing battle art slot. */
.character-stage-host { position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
.character-stage-host canvas { display:block; width:100%; height:100%; pointer-events:none; }
.ally-art-container:has(.character-stage-host canvas),
.fighter.ally .combat-target:has(.character-stage-host canvas) {
  background:radial-gradient(ellipse at 50% 84%,#5da9b02e,transparent 58%),linear-gradient(165deg,#111d26,#182932 68%,#0d1b24);
  border-color:#587b83;
}
.enemy-art-container:has(.character-stage-host canvas),
.fighter.enemy .combat-target:has(.character-stage-host canvas) {
  background:radial-gradient(ellipse at 50% 84%,#ba7c492e,transparent 58%),linear-gradient(165deg,#241a1d,#2b2425 68%,#17191f);
  border-color:#8b6754;
}
.ally-art-container:has(.character-stage-host canvas)::before,
.enemy-art-container:has(.character-stage-host canvas)::before,
.combat-target:has(.character-stage-host canvas)::before {
  content:"";position:absolute;left:11%;right:11%;bottom:10%;height:24%;pointer-events:none;
  border:1px solid #adc1b739;border-radius:50%;transform:rotateX(70deg);
  background:radial-gradient(ellipse,#a6bbac14,transparent 70%);
}
.ally-art-container:has(.character-stage-host canvas) > svg,
.enemy-art-container:has(.character-stage-host canvas) > svg { opacity:0; }
.ally-art-container, .enemy-art-container { position:relative; }
.combat-target:has(.character-stage-host canvas) { width:190px; height:136px; padding:0; }
.combat-target:has(.character-stage-host canvas) > :not(.character-stage-host):not(.target-caption) { opacity:0; }
.combat-target .character-stage-host { inset:0; }
.block-value { display:inline-flex; align-items:center; gap:.45rem; min-height:24px; }
.mini-armor { width:18px; height:20px; display:inline-block; background:linear-gradient(135deg,#bde6fc,#477da9); clip-path:polygon(50% 0,95% 19%,87% 72%,50% 100%,13% 72%,5% 19%); filter:drop-shadow(0 0 4px #5bbff0); }
.block-value[data-block="0"] .mini-armor { filter:grayscale(1); opacity:.45; }
.block-value:not([data-block="0"]) .mini-armor { animation:armor-glint 1.5s ease-in-out infinite alternate; }
@keyframes armor-glint { to { transform:scale(1.15); filter:drop-shadow(0 0 9px #b9ebff); } }
@media(max-width:720px) { .combat-target:has(.character-stage-host canvas) { width:135px; height:91px; } }
@media(prefers-reduced-motion:reduce) { .block-value .mini-armor { animation:none !important; } }

/* Status badges shown on fighters, and bold keywords inside card text. */
.status-svg { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -0.14em; }

.status-row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; min-height: 30px; margin-top: 6px; }
.status-badge {
  --status-color: #ddd;
  position: relative; display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 8px 3px 5px; border-radius: 999px;
  background: color-mix(in srgb, var(--status-color) 18%, rgba(8, 12, 18, .88));
  border: 1.5px solid color-mix(in srgb, var(--status-color) 75%, transparent);
  color: var(--status-color); font-size: 13px; line-height: 1; cursor: help;
  box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.35);
  animation: status-pop .28s ease-out;
}
.status-badge .status-svg { width: 18px; height: 18px; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--status-color) 60%, transparent)); }
.status-badge b { font-weight: 900; font-size: 14px; color: #fff; text-shadow: 0 1px 2px #000; }
.status-badge em { font-style: normal; font-weight: 700; font-size: 12px; }
.status-badge:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@keyframes status-pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* Badges pinned onto the character art (top-left corner of the figure). */
.status-overlay { position: absolute; left: 6px; right: 6px; bottom: 6px; z-index: 4; display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-start; pointer-events: auto; }
.status-overlay .status-badge { padding: 2px 6px 2px 4px; font-size: 12px; }
.status-overlay .status-badge em { display: none; }
@media (min-width: 900px) { .status-overlay .status-badge em { display: inline; } }

/* Keywords inside card faces, tooltips and rule text. */
.kw { --status-color: #fff; font-weight: 900; color: var(--status-color); white-space: nowrap; text-shadow: 0 0 1px rgba(0,0,0,.6); }
.kw .status-svg { margin-right: 1px; }
/* Light card faces need darker keyword ink. */
.card-face .kw, .hand-card .kw, .shop-card .kw, .reward-card .kw, .card .kw, .discover-card .kw {
  color: color-mix(in srgb, var(--status-color) 55%, #1b1208);
  text-shadow: none;
}

/* Deployed turrets / barriers on the player's side. */
.deploy-row { position: absolute; top: 6px; left: 6px; z-index: 5; display: flex; gap: 4px; }
.deploy-chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px; border-radius: 6px; background: rgba(8, 40, 38, .9); border: 1.5px solid #5fd3c6; color: #5fd3c6; font-size: 12px; animation: status-pop .28s ease-out; }
.deploy-chip b { color: #fff; } .deploy-chip small { color: #9fe; font-size: 10px; }
.deploy-chip .status-svg { width: 16px; height: 16px; }

/* Discover: pick one of three. */
.discover-overlay { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(4, 8, 14, .72); backdrop-filter: blur(2px); }
.discover-panel { width: min(760px, 94vw); padding: 18px; border-radius: 14px; background: #121a24; border: 1px solid #f5d76e88; box-shadow: 0 10px 40px #000a; text-align: center; color: #eef; }
.discover-panel h3 { margin: 0 0 4px; color: #f5d76e; display: flex; gap: 8px; align-items: center; justify-content: center; }
.discover-panel p { margin: 0 0 12px; font-size: 13px; color: #aab; }
.discover-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.discover-card { display: flex; flex-direction: column; gap: 6px; align-items: center; padding: 10px; border-radius: 10px; background: linear-gradient(#efe3c4, #d9c79b); color: #2a1d0c; border: 2px solid #8a6a2e; cursor: pointer; font: inherit; transition: transform .15s; }
.discover-card:hover, .discover-card:focus-visible { transform: translateY(-4px); outline: 2px solid #f5d76e; }
.discover-card .discover-art svg { width: 100%; height: 70px; display: block; border-radius: 6px; }
.discover-card span:last-child { font-size: 12px; line-height: 1.4; }
@media (max-width: 560px) { .discover-options { grid-template-columns: 1fr; } .discover-card .discover-art { display: none; } }

.card-archetype { font-size: 11px; font-weight: 800; color: #8a7a5a; margin: 2px 0; }
.card-archetype.is-archetype { color: #b3541e; }
.reward-hint { color: #9ab; font-size: 13px; margin: -4px 0 10px; }

/* Trait tags describing an enemy's special behaviour. */
.trait-row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 4px; }
.trait-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 6px; font-size: 12px; font-weight: 800; color: #ffd9a0; background: rgba(60, 30, 10, .78); border: 1px solid rgba(255, 190, 110, .55); cursor: help; }
.trait-tag .status-svg { width: 15px; height: 15px; }

.battlefield-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 700; color: #cfe8ff; background: rgba(18, 40, 64, .8); border: 1px solid rgba(120, 190, 255, .45); cursor: help; }
.battlefield-tag b { color: #fff; }

/* Wa demo: badges sit along the bottom of the clickable fighter art. */
.combat-target .status-overlay { left: 0; right: 0; bottom: -4px; justify-content: center; }
.arena-top .battlefield-tag { font-size: 11px; padding: 2px 8px; }

/* The new demo's fighter art boxes host the badge overlay. */
.enemy-art-container, .ally-art-container { position: relative; }
.battlefield-strip { display: flex; justify-content: center; margin: 2px 0 6px; }
/* The 3D stage hides the flat art under it; keep the status badges visible. */
.combat-target:has(.character-stage-host canvas) > .status-overlay,
.enemy-art-container:has(.character-stage-host canvas) > .status-overlay,
.ally-art-container:has(.character-stage-host canvas) > .status-overlay { opacity: 1 !important; z-index: 5; }
.combat-target:has(.character-stage-host canvas) > .deploy-row { opacity: 1 !important; z-index: 5; }

/* Shop scenes for both demos: an NPC at a booth, goods on a shelf with price
   tags, and a service counter. Uses only local CSS; the NPC figure is the
   shared procedural 3D stage mounted into .npc-stage. */
.shop-scene { max-width: 1120px; margin: 0 auto; padding: 12px 16px 28px; }
.shop-header { display: flex; gap: 16px; align-items: stretch; justify-content: space-between; flex-wrap: wrap; margin-bottom: 14px; }
.npc-booth { flex: 1 1 420px; display: flex; gap: 14px; align-items: center; padding: 10px 14px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(40, 32, 18, .92), rgba(18, 22, 30, .92)); border: 1px solid rgba(214, 178, 102, .45);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .35), 0 6px 20px rgba(0, 0, 0, .35); }
.npc-stage { position: relative; flex: none; width: 190px; height: 150px; border-radius: 10px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 85%, rgba(255, 210, 120, .22), transparent 60%), linear-gradient(#1c2430, #10151d); border: 1px solid rgba(255, 255, 255, .08); }
.npc-info { flex: 1; min-width: 0; }
.npc-name { font-weight: 900; font-size: 17px; color: #f3d48a; letter-spacing: 1px; margin-bottom: 8px; }
.npc-name small { display: inline-block; margin-left: 8px; font-size: 12px; font-weight: 600; color: #a99a78; letter-spacing: 0; }
.npc-bubble { position: relative; padding: 10px 14px; border-radius: 12px; background: #f5ecd6; color: #2b2112; font-size: 14px; line-height: 1.55;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .35); animation: npc-talk .35s ease-out; }
.npc-bubble::before { content: ''; position: absolute; left: -9px; top: 18px; border: 9px solid transparent; border-left: 0; border-right-color: #f5ecd6; }
@keyframes npc-talk { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
.shop-wallet { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 10px 22px; border-radius: 14px;
  background: rgba(20, 26, 34, .9); border: 1px solid rgba(240, 200, 90, .5); color: #c9b27a; }
.shop-wallet b { font-size: 34px; color: #ffd76a; text-shadow: 0 0 12px rgba(255, 200, 80, .45); line-height: 1.1; }

.shelf-title { margin: 6px 0 10px; color: #e8dcc0; letter-spacing: 2px; }
.shop-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 22px 16px; padding: 22px 16px 26px; border-radius: 12px;
  background: linear-gradient(transparent 0 calc(100% - 14px), #5b4327 calc(100% - 14px)), repeating-linear-gradient(90deg, #2a2118 0 2px, transparent 2px 120px), #1c1812;
  border: 1px solid #4d3b25; box-shadow: inset 0 -10px 0 #3d2c19, inset 0 8px 18px rgba(0, 0, 0, .45); }
.shelf-item { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 26px 10px 10px; border-radius: 10px; text-align: center;
  background: linear-gradient(#f1e6c9, #dccb9f); color: #2b1f0e; border: 2px solid #8b6c33; box-shadow: 0 8px 14px rgba(0, 0, 0, .45); transition: transform .15s; }
.shelf-item:hover { transform: translateY(-4px) rotate(-.4deg); }
.shelf-item.rarity-uncommon { border-color: #3f7fc4; }
.shelf-item.rarity-rare { border-color: #d4a017; box-shadow: 0 8px 14px rgba(0, 0, 0, .45), 0 0 16px rgba(255, 196, 40, .45); }
.shelf-item .card-art svg { width: 100%; height: 84px; display: block; border-radius: 6px; }
.shelf-item .card-title { font-weight: 900; font-size: 15px; }
.shelf-item .card-cost { font-size: 12px; color: #6d5a38; }
.shelf-item .card-desc { font-size: 12.5px; line-height: 1.45; flex: 1; }
.shelf-item .btn { margin-top: 4px; }
.price-tag { position: absolute; top: -12px; right: 10px; display: flex; align-items: baseline; gap: 3px; padding: 3px 10px 4px; border-radius: 4px 4px 10px 10px;
  background: #ffd24a; color: #3a2600; font-size: 11px; box-shadow: 0 3px 6px rgba(0, 0, 0, .45); transform: rotate(3deg); }
.price-tag::before { content: ''; position: absolute; top: -9px; left: 50%; width: 1px; height: 9px; background: #9b7a3a; }
.price-tag b { font-size: 17px; }
.price-tag s { opacity: .6; margin-right: 2px; }
.sale-ribbon { position: absolute; top: 8px; left: -6px; padding: 2px 10px; background: #d7263d; color: #fff; font-size: 11px; font-weight: 900; transform: rotate(-8deg);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .4); }
.shelf-empty { grid-column: 1 / -1; text-align: center; color: #b7a782; }

.shop-counter { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.counter-service { padding: 12px 14px; border-radius: 12px; background: rgba(18, 24, 32, .9); border: 1px solid rgba(160, 190, 220, .25); color: #d6dde6; }
.counter-service h4 { margin: 0 0 4px; color: #f0d78e; font-size: 15px; display: inline; }
.counter-service p { margin: 4px 0 10px; font-size: 12.5px; color: #9aa7b4; }
.remove-service summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 10px; list-style: none; }
.remove-service summary span { font-size: 12px; color: #9fc3e6; }
.remove-service[open] summary span { display: none; }
.remove-service .deck-list { margin-top: 10px; max-height: 320px; overflow: auto; }
.shop-leave { display: block; margin: 20px auto 0; }
/* Wa transfer market: contracts pinned to a board. */
.contract-board { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); justify-items: center; }
.contract-slot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 10px; }
.contract-label { font-size: 12px; font-weight: 900; letter-spacing: 2px; color: #e9d7a6; }
.contract-slot.tier-1 .contract-label { color: #9fc8ff; }
.contract-slot.tier-2 .contract-label { color: #ffd24a; text-shadow: 0 0 8px rgba(255, 210, 74, .5); }
.contract-slot .price-tag { top: -6px; right: 4px; z-index: 3; }
@media (max-width: 720px) {
  .shop-counter { grid-template-columns: 1fr; }
  .npc-booth { flex-direction: column; text-align: center; }
  .npc-bubble::before { display: none; }
  .npc-stage { width: 170px; height: 132px; }
}
/* Dark ink on the light shelf cards (overrides each demo's card text colours). */
.shop-scene .shelf-item .card-title { color: #2b1f0e; }
.shop-scene .shelf-item .card-desc { color: #3a2c16; }
.shop-scene .shelf-item .card-cost { color: #6d5a38; }

/* Hit feedback + sound control shared by both demos (shared/juice.js, shared/sfx.js). */
.juice-layer { position: fixed; inset: 0; pointer-events: none; z-index: 10002; overflow: hidden; contain: layout style; }
.juice-num {
  position: fixed; left: 0; top: 0; transform: translate(-50%, 0);
  font: 800 22px/1 "Bahnschrift", "DIN Alternate", "Segoe UI", system-ui, sans-serif;
  font-variant-numeric: tabular-nums; letter-spacing: .02em; white-space: nowrap;
  color: #f4f6f8; text-shadow: 0 1px 0 #0b0f14, 0 0 6px rgba(8, 12, 18, .85);
  will-change: transform, opacity;
}
.juice-num.is-damage { color: #ffe1d6; }
.juice-num.is-damage.tier-big, .juice-num.is-hurt.tier-big { color: #ff6a55; font-size: 30px; }
.juice-num.is-damage.tier-kill, .juice-num.is-hurt.tier-kill { color: #ff4d3d; font-size: 34px; }
.juice-num.is-hurt { color: #ff8a78; }
.juice-num.is-block { color: #7cc4ff; font-size: 19px; }
.juice-num.is-block::before { content: ""; display: inline-block; width: .62em; height: .72em; margin-right: .18em; vertical-align: -.04em; background: currentColor; clip-path: polygon(50% 0, 100% 18%, 92% 62%, 50% 100%, 8% 62%, 0 18%); }
.juice-num.is-heal { color: #6fdc8c; font-size: 20px; }
.juice-flash { position: fixed; border-radius: 10px; background: rgba(255, 110, 90, .26); box-shadow: inset 0 0 0 2px rgba(255, 150, 130, .55); }
.juice-flash.is-hurt { background: rgba(255, 70, 60, .24); }
.juice-flash.is-heal { background: rgba(90, 220, 130, .2); box-shadow: inset 0 0 0 2px rgba(110, 230, 150, .45); }
.juice-ghost { position: fixed; transform-origin: 50% 100%; }
.juice-ghost > * { box-sizing: border-box; }
@media (max-width: 720px) {
  .juice-num { font-size: 18px; }
  .juice-num.is-damage.tier-big, .juice-num.is-hurt.tier-big { font-size: 24px; }
  .juice-num.is-damage.tier-kill, .juice-num.is-hurt.tier-kill { font-size: 27px; }
  .juice-num.is-block, .juice-num.is-heal { font-size: 16px; }
}
/* The juice layer owns HP/block numbers; hide the older duplicate labels. */
.new-fx-layer .fx-damage, .new-fx-layer .damage-text, .new-fx-layer .block-text,
.cfx-container .cfx-damage, .cfx-container .cfx-loss { display: none !important; }

/* Speaker button + volume popover */
.sfx-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; min-width: 34px; height: 34px; padding: 0; margin: 0;
  border-radius: 8px; border: 1px solid rgba(160, 180, 200, .35);
  background: rgba(16, 22, 30, .55); color: #d9e2ec; cursor: pointer; line-height: 0;
}
.sfx-toggle:hover, .sfx-toggle:focus-visible { border-color: rgba(200, 220, 240, .7); color: #fff; }
.sfx-toggle.is-muted { color: #8b98a8; }
.sfx-pop {
  position: fixed; z-index: 10050; display: flex; flex-direction: column; gap: 8px; width: 190px;
  padding: 10px 12px; border-radius: 10px; border: 1px solid #3e4d62;
  background: #0c1118; color: #d9e2ec; font: 13px/1.3 system-ui, sans-serif;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.sfx-pop .sfx-row { display: flex; justify-content: space-between; align-items: baseline; }
.sfx-pop output { color: #9fb3c8; font-variant-numeric: tabular-nums; }
.sfx-pop input[type="range"] { width: 100%; margin: 0; accent-color: #58b4ff; }
.sfx-pop .sfx-mute { padding: 6px 8px; border-radius: 6px; border: 1px solid #3e4d62; background: #16202c; color: inherit; cursor: pointer; }

/* Wa demo: event scenes and supply crates. */
.room-screen .event-scene{max-width:640px;margin:0 auto 6px;font-size:14px;line-height:1.9;color:#d9ceb2}
.room-screen .event-choices{flex-wrap:wrap}
.room-screen .event-choices .choice{min-width:220px}
.room-screen .event-choices .choice p{color:#c7d2c3}
.room-screen .event-choices .choice .disabled-reason{display:block;margin-top:8px;color:#e0a08c;font-size:11px}
.room-screen .event-status{font-size:12px;color:#8fa29a;margin:0}
.room-crate .crate-box{position:relative;width:150px;height:110px;margin:34px auto 18px}
.crate-box .crate-body{position:absolute;inset:30px 0 0 0;border-radius:6px;background:repeating-linear-gradient(90deg,#6b5330 0 18px,#5d4829 18px 20px);border:3px solid #c49c50;box-shadow:inset 0 0 0 6px #0002}
.crate-box .crate-body:after{content:'';position:absolute;left:50%;top:18%;width:26px;height:20px;margin-left:-13px;border-radius:3px;background:#d6b56d;box-shadow:0 0 10px #d6b56d99}
.crate-box .crate-lid{position:absolute;left:-6px;right:-6px;top:10px;height:26px;border-radius:6px 6px 3px 3px;background:#7d6139;border:3px solid #c49c50;transform-origin:10% 100%;transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.crate-box.is-open .crate-lid{transform:rotate(-16deg) translate(-4px,-8px)}
.crate-box.crate-small{transform:scale(.8)}
.crate-box.crate-large{transform:scale(1.2)}
.crate-box.crate-large .crate-body,.crate-box.crate-large .crate-lid{border-color:#f6d989}
.crate-loot{display:flex;flex-direction:column;gap:10px;max-width:520px;margin:0 auto 18px}
.crate-loot-item{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid #6a705e;border-radius:6px;background:linear-gradient(#30403eaa,#1a292dcc);text-align:left}
.crate-loot-item b{color:var(--gold);font-size:17px;white-space:nowrap}
.crate-loot-item span{color:#a5b5aa;font-size:12px;line-height:1.7}
.season-map .map-stop.kind-crate>button{border-color:#8a7440;color:#6b5330}
.season-map .map-stop.kind-event>button{border-style:dashed}
.season-map .map-stop.kind-event.visited>button{border-style:solid}
@media(max-width:720px){.room-screen .event-scene{font-size:13px}.room-screen .event-choices .choice{min-width:0}}

/* ---- Rules 1: region trait, difficulty picker, opening, equipment, supplies ---- */
.region-extra{width:min(100%,560px);margin:14px auto 0;display:flex;flex-direction:column;gap:12px;text-align:left}
.region-trait{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid #c6b17855;border-radius:6px;background:#15252a}
.region-trait>.status-svg{width:26px;height:26px;flex-shrink:0;color:#ffd58a}
.region-trait b{color:#ffe0a3;font-size:13px}.region-trait p{margin:4px 0 0;font-size:12px;line-height:1.55;color:#c8d3cc}
.asc-picker{padding:10px 12px;border:1px solid #465056;border-radius:6px;background:#101c22}
.asc-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}.asc-head b{color:#ede5d1;font-size:13px}.asc-head small{color:#819189;font-size:10px}
.asc-levels{display:grid;grid-template-columns:repeat(11,1fr);gap:4px;margin:8px 0}
.asc-level{min-width:0;padding:6px 0;font-size:13px;font-weight:700;background:transparent;border:1px solid #5c6b68;color:#c9d2c6;border-radius:4px}
.asc-level.active{background:#6b3b2a;border-color:#e3a36f;color:#ffe3c4}
.asc-level:disabled{opacity:.35;cursor:not-allowed}
.asc-rules{margin:0;padding:0;list-style:none;display:grid;gap:3px;font-size:11px;color:#c8d3cc}.asc-rules li{display:flex;gap:8px}.asc-rules b{color:#e3a36f;min-width:16px}
.asc-zero{margin:0;font-size:11px;color:#819189}
.asc-result{color:#e3a36f;font-size:13px;margin:0 0 12px}
.trait-tag.region-trait{white-space:nowrap;padding:3px 9px;gap:5px;color:#ffe0a3;background:rgba(40,70,64,.85);border:1px solid #c6b17888;display:inline-flex;align-items:center;flex-direction:row;font-size:12px}
.trait-tag.region-trait .status-svg{width:16px;height:16px}
.trait-count{white-space:nowrap;margin-left:3px;padding:0 6px;border-radius:9px;background:#0d1a1e;color:#fff;font-size:12px;min-width:28px;text-align:center}
.gear-rack{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end;max-width:62%}
.gear-chip{display:inline-flex;align-items:center;gap:3px;padding:1px 6px;border-radius:10px;background:#15252acc;border:1px solid #465056;color:#d8cfb8;font-size:10px;line-height:18px}
.gear-chip .status-svg{width:13px;height:13px;color:var(--rarity,#ffd58a)}.gear-chip em{font-style:normal}.gear-chip small{color:#ffd58a;font-size:9px}
.rarity-common{--rarity:#a9b3ad}.rarity-uncommon{--rarity:#6fb7d8}.rarity-rare{--rarity:#e0b44f}.rarity-boss{--rarity:#e0795f}.rarity-shop{--rarity:#8fcf9a}
.gear-chip[class*='rarity-'],.market-item[class*='rarity-'],.gear-entry[class*='rarity-'],.loot-line[class*='rarity-'],.skin-entry[class*='rarity-']{border-color:var(--rarity)}
.supply-bar{display:flex;gap:5px;flex-shrink:0}
.supply-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;width:54px;height:46px;padding:2px;border-radius:6px;border:1px solid #6d8a80;background:#16292d;color:#ffe0a3;font-size:9px;line-height:1.1}
.supply-slot .status-svg{width:18px;height:18px}.supply-slot small{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:50px;color:#d8cfb8}
.supply-slot.empty{border-style:dashed;color:#5c6b68;font-size:14px}
button.supply-slot:hover{background:#21403f;border-color:#ffd58a}
.market-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:18px}
.market-item{position:relative;padding:14px 12px 12px;border:1px solid #465056;border-radius:8px;background:#132126;text-align:left}
.market-item h4{display:flex;align-items:center;gap:6px;margin:0 0 4px;color:#ede5d1;font-size:14px;padding-right:48px}.market-item h4 .status-svg{width:18px;height:18px;color:var(--rarity,#ffd58a)}
.market-item p{font-size:12px;line-height:1.5;color:#c8d3cc;margin:6px 0 10px}.market-item .rarity-label{color:var(--rarity,#8e9d9e);font-size:10px}
.market-item .price-tag{position:absolute;right:8px;top:8px}.market-item.sold{opacity:.45}
.reward-loot{display:grid;gap:10px;max-width:640px;margin:0 auto 18px;text-align:left}
.loot-line{display:flex;gap:10px;padding:10px 12px;border:1px solid #465056;border-radius:8px;background:#132126}
.loot-line>.status-svg{width:26px;height:26px;flex-shrink:0;color:var(--rarity,#ffd58a)}.loot-line b{color:#ffe0a3}.loot-line small{margin-left:6px;color:var(--rarity,#8e9d9e)}.loot-line p{margin:4px 0;font-size:12px;color:#c8d3cc}
.opening-choices .choice{position:relative}.choice-kind{position:absolute;top:8px;right:10px;font-size:10px;padding:1px 7px;border-radius:9px;background:#2a3b3a;color:#cfe3d6}
.opening-trade .choice-kind{background:#5a2f25;color:#ffd0bd}.opening-basic .choice-kind{background:#303a44;color:#cdd7e0}
.choice-detail{font-size:12px;color:#ffd58a}
.choice h3 .status-svg{width:18px;height:18px;vertical-align:-3px;margin-right:4px}
.gear-list{display:grid;gap:8px;text-align:left}
.gear-entry{display:flex;gap:10px;padding:8px 10px;border:1px solid #465056;border-radius:6px;background:#132126}
.gear-entry>.status-svg{width:22px;height:22px;flex-shrink:0;color:var(--rarity,#ffd58a)}.gear-entry h3{margin:0;font-size:14px}.gear-entry h3 small{color:var(--rarity,#8e9d9e);font-size:10px;font-weight:400}.gear-entry p{margin:4px 0 0;font-size:12px;color:#c8d3cc}
.skin-entry h3 .status-svg{width:16px;height:16px;vertical-align:-2px;margin-right:4px}
.gear-slots{display:inline-flex;gap:2px;padding:3px 4px;border:1px solid #465056;border-radius:5px;background:#101c22;cursor:pointer}
.gear-cell{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:3px;border:1px solid var(--rarity,#465056);background:#15252a}
.gear-cell .status-svg{width:12px;height:12px;color:var(--rarity,#ffd58a)}.gear-cell.empty{border-style:dashed;opacity:.5}
.gear-offer .choice h3 .status-svg{color:var(--rarity,#ffd58a)}
@media(max-width:720px){
 .gear-slots{display:inline-grid;grid-template-columns:repeat(3,9px);padding:2px;gap:1px}.gear-cell{width:9px;height:9px;border-radius:2px}.gear-cell .status-svg{width:7px;height:7px}
 .hud-resources{gap:4px}
 .hud-resources .hud-link[data-ui='gear'],.hud-resources .hud-link[data-ui='supplies'],.hud-resources .hud-link[data-ui='invest']{display:none}
 .asc-levels{gap:3px}.asc-level{padding:5px 0;font-size:11px}
 .supply-bar{gap:3px}.supply-slot{width:34px;height:34px}.supply-slot small{display:none}
 .gear-rack{max-width:70%}.gear-chip em{display:none}.gear-chip{padding:1px 4px}
 .trait-tag.region-trait{font-size:10px;padding:2px 6px}.trait-count{font-size:10px;min-width:22px}
 .market-row{grid-template-columns:1fr 1fr;gap:8px}.market-item{padding:10px 8px}.market-item h4{font-size:12px;padding-right:40px}.market-item p{font-size:11px}
}
@media(max-width:420px){.game-hud .hud-tools .hud-link{padding:4px 2px}}
/* Economy rules: unlock progress, skip compensation, investments, market rerolls */
.unlock-bar{margin-top:10px;padding:10px 12px;border:1px solid #465056;border-radius:6px;background:#101c22;text-align:left}
.unlock-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 10px}.unlock-head b{color:#ede5d1;font-size:13px}.unlock-head small{color:#e3c27f;font-size:12px;font-variant-numeric:tabular-nums}
.unlock-track{height:8px;margin:8px 0 6px;border-radius:4px;background:#26343a;overflow:hidden;border:1px solid #3c4b50}.unlock-track i{display:block;height:100%;background:linear-gradient(90deg,#8a6f3e,#d6b56d)}
.unlock-note{display:block;color:#819189;font-size:10px;line-height:1.5}
.unlock-test{margin-top:8px;font-size:11px;color:#6f8283;text-align:left}.unlock-test summary{cursor:pointer;list-style-position:inside}.unlock-test small{display:block;color:#6f8283;font-size:10px}
.unlock-result{max-width:640px;margin:14px auto;text-align:left}.unlock-gain{margin:0;color:#c8d3cc;font-size:13px}.unlock-gain b{color:#e3c27f;font-size:16px}
.unlock-new{margin-top:10px;padding:10px 12px;border:1px solid #8a6f3e;border-radius:6px;background:#2a2517}.unlock-new h4{margin:0 0 6px;color:#f0d79a;font-size:13px}
.unlock-new ul{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}.unlock-new li{padding:3px 8px;border:1px solid #6e5a32;border-radius:4px;background:#1c1a12;color:#ede5d1;font-size:12px}.unlock-new li small{margin-left:5px;color:#b3a68b;font-size:10px}
.skip-options{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin:8px auto 0;max-width:760px}.skip-options>small{flex-basis:100%;text-align:center;color:#819189;font-size:11px}.skip-label{color:#c8d3cc;font-size:13px}
.reroll-control{display:inline-block;margin-left:10px;vertical-align:middle}.reroll-control .reroll-button{padding:5px 12px;font-size:12px}.reroll-control .disabled-reason{display:inline;margin-left:6px}
.invest-row{grid-template-columns:minmax(0,340px)!important;justify-content:center}
.invest-item{--rarity:#9fc7b3;border-color:#5f8a76}.invest-item h4 .status-svg{color:#9fc7b3}
.invest-list{margin:6px 0;padding-left:18px;font-size:13px;line-height:1.7}.invest-list b{color:#e3c27f}
@media(max-width:720px){.skip-options{flex-direction:column;align-items:stretch}.skip-options>button{width:100%}.skip-label{text-align:center}.reroll-control{display:block;margin:6px 0 0}.reroll-control .reroll-button{width:100%}}
/* Rules 3: act boss preview on the map */
.boss-preview{display:flex;gap:10px;align-items:center;margin:0 0 14px;padding:8px 10px;border:1px solid #8b675466;border-radius:10px;background:linear-gradient(135deg,#2b1f22cc,#141c24cc)}
.boss-preview-figure{position:relative;flex:0 0 72px;width:72px;height:84px;border-radius:8px;overflow:hidden;background:radial-gradient(ellipse at 50% 84%,#ba7c4933,transparent 62%),#17191f}
.boss-preview-text{min-width:0}
.boss-preview-text small{display:block;font-size:10px;letter-spacing:2px;color:#d9a36a}
.boss-preview-text b{display:block;font-size:15px;color:#f0dcb4;margin:1px 0 3px}
.boss-preview-text p{margin:0;font-size:11px;line-height:1.55;color:#b7c2bd}
/* Rules 3: group fights (one panel per opponent) */
.fighter.enemy.foe-group{width:auto;right:3%;display:flex;gap:10px;align-items:flex-end}
.foe-group .foe{position:relative;width:150px;text-align:center;transition:filter .12s,opacity .2s}
.foe-group .foe .intent-bubble{left:2px;right:2px;transform:none;min-width:0;max-width:none;width:auto;margin-bottom:8px}
.foe-group .foe .combat-target{margin:0 auto;min-width:0;padding:0 3px;max-width:100%;overflow:hidden}
.foe-group .combat-target:has(.character-stage-host canvas){width:140px;height:112px}
.foe-group .foe h2{font-size:12px;letter-spacing:1px;margin:4px 0}
.foe-group .foe.is-target .combat-target{outline:2px solid #ffcf7a;outline-offset:4px;border-radius:12px}
.foe-group .foe.is-target h2{color:#ffd88f}
.foe-group .foe.drop-ready .combat-target{outline:3px solid #d8efb0;outline-offset:6px;border-radius:12px;filter:drop-shadow(0 0 12px #c7ecc2)}
.foe-group .foe.is-dead{opacity:.38;filter:grayscale(1)}
.foe-group .foe .life-row{display:flex;gap:4px;align-items:center}
.foe-group .foe .life-row .life-bar{flex:1}
.intent-bubble.foe-down strong{color:#9aa}
@media(max-width:1100px){.foe-group .foe{width:120px}.foe-group .combat-target:has(.character-stage-host canvas){width:112px;height:90px}}
@media(max-width:720px){
 .boss-preview{flex:1 1 100%;margin:0;padding:6px 8px}.boss-preview-figure{flex-basis:52px;width:52px;height:60px}.boss-preview-text b{font-size:13px}.boss-preview-text p{font-size:10px;line-height:1.45}
 .fighter.enemy.foe-group{right:1%;gap:3px}
 .foe-group .foe{width:74px}
 .foe-group .foe .intent-bubble{padding:3px 4px}.foe-group .foe .intent-bubble small{display:none}.foe-group .foe .intent-bubble strong{font-size:9px}
 .foe-group .combat-target:has(.character-stage-host canvas){width:72px;height:66px}
 .foe-group .foe h2{font-size:9px;letter-spacing:0;margin:2px 0}
 .foe-group .foe .trait-row{display:none}
 .foe-group .foe .life-row .shield-value{font-size:9px}.foe-group .foe .life-bar span{font-size:8px}
 .combat-screen:has(.foe-group) .fighter.ally{width:112px}
 .combat-screen:has(.foe-group) .fighter.ally .combat-target:has(.character-stage-host canvas){width:104px;height:84px}
}

/* Deck viewer, run results, history (战绩), collection (图鉴), upgrade peek — both demos. */
.rm-note{margin:4px 0 10px;font-size:12px;line-height:1.6;opacity:.82}
.rm-count{margin:10px 0 12px;font-size:12px;opacity:.7}
.rm-viewer-controls{display:flex;flex-direction:column;gap:7px;padding:10px 12px;border:1px solid #ffffff1f;border-radius:8px;background:#00000033}
.rm-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.rm-row>span{font-size:11px;letter-spacing:1px;opacity:.65;min-width:30px}
.rm-piles{margin-bottom:8px}
button.rm-chip{font:inherit;font-size:12px;line-height:1.2;padding:5px 10px;min-width:0;min-height:30px;width:auto;border-radius:999px;border:1px solid #ffffff33;background:#ffffff0d;color:inherit;cursor:pointer;box-shadow:none;letter-spacing:0;text-transform:none;transform:none}
button.rm-chip:hover{background:#ffffff1f}
button.rm-chip.active{border-color:#e2c27a;background:#e2c27a2e;color:#f6e3b0}
button.rm-chip:focus-visible{outline:2px solid #e2c27a;outline-offset:2px}
.rm-grid{margin-top:4px}
.pile-grid.rm-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}

/* Results & history */
.rm-result{max-width:980px;margin:0 auto}
.rm-page{min-height:100dvh;padding:28px 16px;box-sizing:border-box}
.rm-score-big{display:flex;flex-direction:column;align-items:center;margin:10px auto 18px}
.rm-score-big span{font-size:12px;letter-spacing:3px;opacity:.7}
.rm-score-big strong{font-size:52px;line-height:1.1;color:#f0cf7c;font-variant-numeric:tabular-nums;text-shadow:0 2px 12px #0008}
.rm-loss .rm-score-big strong{color:#e7a38a}.rm-abandon .rm-score-big strong{color:#b9c3c9}
.rm-detail{display:flex;flex-direction:column;gap:12px;text-align:left}
.rm-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px 14px;margin:0}
.rm-facts>div{display:flex;gap:8px;align-items:baseline;padding:6px 10px;border-radius:6px;background:#ffffff0a;min-width:0}
.rm-facts dt{font-size:11px;opacity:.6;white-space:nowrap}
.rm-facts dd{margin:0;font-size:13px;overflow-wrap:anywhere}
.rm-score{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.rm-score th,.rm-score td{padding:5px 10px;border-bottom:1px solid #ffffff14;text-align:right}
.rm-score th:first-child{text-align:left;font-weight:500}
.rm-score thead th{font-size:11px;opacity:.6;font-weight:400}
.rm-score tr.rm-zero{opacity:.45}
.rm-score tr.rm-sub th,.rm-score tr.rm-sub td{border-bottom-style:dashed}
.rm-score tr.rm-total th,.rm-score tr.rm-total td{font-size:16px;font-weight:700;color:#f0cf7c;border-bottom:0}
.rm-formula{margin:0;font-size:11px;line-height:1.7;opacity:.72}
.rm-formula b{margin-right:8px;opacity:1}
.rm-h{margin:6px 0 0;font-size:14px;letter-spacing:1px}
.rm-deck-list,.rm-gear-list{display:flex;flex-wrap:wrap;gap:6px}
.rm-deck-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 9px 4px 4px;border-radius:6px;border:1px solid #ffffff26;background:#ffffff0d;font-size:12px;-webkit-touch-callout:none;user-select:none}
.rm-deck-chip b{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#e2c27a33;font-size:11px}
.rm-deck-chip.up{border-color:#8fd18b88;color:#c9f0c0}
.rm-deck-chip small{opacity:.7}
.rm-gear-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:6px;border:1px solid #ffffff26;background:#ffffff0d;font-size:12px}
.rm-gear-chip svg,.rm-gear-chip .icon{width:15px;height:15px}
.rm-actions,.rm-result .button-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px}
.rm-muted{opacity:.6}
.rm-history{display:flex;flex-direction:column;gap:8px}
.rm-run{border:1px solid #ffffff22;border-radius:8px;background:#00000026}
.rm-run>summary{display:grid;grid-template-columns:52px minmax(0,1.4fr) minmax(0,1fr) 80px 90px;gap:10px;align-items:center;padding:9px 12px;cursor:pointer;list-style:none;font-size:13px}
.rm-run>summary::-webkit-details-marker{display:none}
.rm-run[open]>summary{border-bottom:1px solid #ffffff1a}
.rm-run>.rm-detail{padding:12px}
.rm-outcome{display:inline-block;text-align:center;padding:2px 0;border-radius:4px;font-size:12px;background:#ffffff1a}
.rm-win .rm-outcome{background:#caa24c44;color:#f6dc97}.rm-loss .rm-outcome{background:#a8453444;color:#f2b3a3}
.rm-pts{text-align:right;color:#f0cf7c;font-variant-numeric:tabular-nums}
.rm-run time{font-size:11px;opacity:.6;text-align:right}
.rm-team,.rm-where{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Collection silhouettes */
.rm-found{margin:0 0 10px;padding:8px 12px;border-radius:8px;background:#e2c27a17;border:1px solid #e2c27a40;font-size:13px}
.rm-found b{margin-right:6px;color:#f0cf7c}
.rm-found small{display:block;margin-top:2px;font-size:11px;opacity:.7}
.rm-unseen{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;border-radius:10px;border:1px dashed #ffffff33;background:radial-gradient(ellipse at 50% 40%,#ffffff12,#0000 70%),repeating-linear-gradient(135deg,#ffffff06 0 8px,#0000 8px 16px),#0b0f14;color:#ffffff59;min-height:120px}
.rm-unseen .rm-q{font-size:40px;font-weight:700;line-height:1}
.rm-unseen small{font-size:11px;letter-spacing:2px}
.modal-cards>.rm-unseen,.overview-cards>.rm-unseen{width:180px;height:260px}
.library-grid>.rm-unseen-card{min-height:210px}
.gear-grid>.rm-unseen{min-height:96px}
.skin-overview>.rm-unseen{width:220px;min-height:120px}
.rm-enemy-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.rm-enemy-grid>.rm-unseen{min-height:170px}
.rm-enemy .rm-enemy-art{height:110px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:6px;background:#00000033}
.rm-enemy .rm-enemy-art>*{max-height:110px;max-width:100%}
.rm-enemy .rm-enemy-art img,.rm-enemy .rm-enemy-art svg{max-height:110px;max-width:100%;object-fit:contain}
.rm-enemies>.rm-unseen{min-height:220px}
.rm-enemies>.skin-entry{box-sizing:border-box;min-height:220px}

/* Upgrade side by side: new demo peek and Wa tooltip */
.rm-peek{position:fixed;z-index:1200;pointer-events:none;padding:6px;border-radius:10px;background:#0b1015ee;border:1px solid #8fd18b99;box-shadow:0 10px 30px #000a}
.rm-peek[hidden]{display:none}
.rm-peek>small{display:block;text-align:center;font-size:11px;letter-spacing:2px;color:#b9eab0;margin-bottom:4px}
.rm-peek .tc{width:100%;max-width:none}
[data-card-id]{-webkit-touch-callout:none}
#card-tooltip.has-upgrade{width:470px;display:grid;grid-template-columns:minmax(0,1fr) 168px;gap:14px}
#card-tooltip[hidden],#card-tooltip.has-upgrade[hidden]{display:none!important}
#card-tooltip .tip-upgrade{border-left:1px solid #93836955;padding-left:12px}
#card-tooltip .tip-upgrade>small{display:block;color:#b9d99a;letter-spacing:2px;margin-bottom:6px}
#card-tooltip .tip-upgrade .card{width:156px;filter:none}
#card-tooltip .tip-upgrade .card>.card-face{height:222px}
#card-tooltip .tip-upgrade .card .card-title{font-size:13px;line-height:22px}
#card-tooltip .tip-upgrade .card .card-art{height:56px;min-height:56px}
#card-tooltip .tip-upgrade .card .card-effect{font-size:10px;line-height:1.5}
#card-tooltip .tip-upgrade>p{font-size:11px;color:#cfe3c0;margin:8px 0 0}

/* New demo: incoming damage under the block value */
.rm-incoming{font-size:11px;color:#f3b9a4;margin-top:2px;white-space:nowrap}
.rm-incoming b{color:#ffd2c2}

@media(max-width:720px){
  .app-header .app-buttons{flex-wrap:wrap;justify-content:center;gap:5px}
  .app-header .app-buttons .btn{white-space:nowrap;padding:5px 9px;font-size:12px}
  .rm-run>summary{grid-template-columns:44px minmax(0,1fr) 64px;grid-template-areas:'o t p' 'o w d';row-gap:2px;font-size:12px}
  .rm-run>summary .rm-outcome{grid-area:o}.rm-run>summary .rm-team{grid-area:t}.rm-run>summary .rm-where{grid-area:w;opacity:.7}.rm-run>summary .rm-pts{grid-area:p}.rm-run>summary time{grid-area:d}
  .rm-facts{grid-template-columns:1fr 1fr}
  .rm-facts>div{flex-direction:column;gap:0}
  .rm-score th,.rm-score td{padding:4px 6px;font-size:12px}
  .rm-score-big strong{font-size:40px}
  .modal-cards>.rm-unseen,.overview-cards>.rm-unseen{width:160px;height:248px}
  .skin-overview>.rm-unseen{width:160px}
  #card-tooltip.has-upgrade{width:calc(100vw - 20px);grid-template-columns:minmax(0,1fr) 128px;gap:8px}
  #card-tooltip .tip-upgrade{padding-left:8px}
  #card-tooltip .tip-upgrade .card{width:124px}
  #card-tooltip .tip-upgrade .card>.card-face{height:180px;padding:5px}
  #card-tooltip .tip-upgrade .card .card-art{height:40px;min-height:40px}
  #card-tooltip .tip-upgrade .card .card-effect{font-size:9px}
  #card-tooltip .tip-upgrade>p{display:none}
  button.rm-chip{font-size:11px;padding:4px 8px;min-height:28px}
}

/* Result summary popup (random upgrades, cards, curses, equipment…) — both demos. */
.rs-overlay{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;background:#05080bcc;backdrop-filter:blur(2px);animation:rs-fade .16s ease-out}
.rs-panel{width:min(460px,100%);max-height:calc(100dvh - 32px);overflow-y:auto;box-sizing:border-box;padding:18px 18px 16px;border:1px solid #e2c27a66;border-radius:10px;background:linear-gradient(180deg,#1b242d,#10161d);color:#e9eef0;box-shadow:0 18px 50px #000a;text-align:left}
.rs-eyebrow{margin:0 0 2px;font-size:12px;letter-spacing:3px;color:#e2c27a;opacity:.85}
.rs-panel h2{margin:0 0 12px;font-size:19px;line-height:1.35;color:#f6e3b0;overflow-wrap:anywhere;text-transform:none;letter-spacing:0}
.rs-list{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:7px}
.rs-entry{display:flex;align-items:flex-start;gap:9px;padding:8px 10px;border-radius:7px;background:#ffffff0b;border:1px solid #ffffff14;font-size:14px;line-height:1.5}
.rs-entry.is-random{background:#e2c27a14;border-color:#e2c27a45}
.rs-icon{flex:0 0 20px;height:20px;display:grid;place-items:center;border-radius:50%;background:#ffffff1a;font-size:12px;line-height:1;margin-top:1px}
.rs-upgrade .rs-icon{background:#4f9d6a;color:#fff}.rs-transform .rs-icon{background:#5a7fb0;color:#fff}.rs-curse .rs-icon{background:#9b3b3b;color:#fff}
.rs-card .rs-icon{background:#3f8a96;color:#fff}.rs-equip .rs-icon{background:#a07a2e;color:#fff}.rs-gamble .rs-icon{background:#7a5ea8;color:#fff}
.rs-text{flex:1;min-width:0;overflow-wrap:anywhere}
.rs-tag{flex:0 0 auto;font-style:normal;font-size:12px;letter-spacing:1px;padding:2px 6px;border-radius:999px;border:1px solid #e2c27a88;color:#f0d79c;margin-top:2px}
button.rs-ok{display:block;width:100%;min-height:44px;margin:0;font:inherit;font-size:15px;font-weight:600;border-radius:7px;border:1px solid #e2c27a;background:#e2c27a;color:#1a1408;cursor:pointer;letter-spacing:1px;text-transform:none;transform:none;box-shadow:none}
button.rs-ok:hover{filter:brightness(1.08)}
button.rs-ok:focus-visible{outline:2px solid #fff;outline-offset:2px}
@keyframes rs-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.rs-overlay{animation:none}}
@media (max-width:420px){.rs-panel{padding:14px 14px 12px}.rs-panel h2{font-size:17px}.rs-entry{font-size:13px}}

/* Achievements (成就): unlock toasts, hall page, results list, worn title — both demos. */
.ach-toasts{position:fixed;top:max(10px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:9000;display:flex;flex-direction:column;align-items:center;gap:8px;width:min(420px,calc(100vw - 24px));pointer-events:none}
.ach-toast{pointer-events:auto;cursor:pointer;display:flex;gap:12px;align-items:center;width:100%;box-sizing:border-box;padding:10px 14px;border-radius:10px;border:1px solid #e2c27a88;background:linear-gradient(135deg,#1d1a12f2,#12161ef2);color:#f3ecd9;box-shadow:0 10px 30px #000a,0 0 0 1px #0006 inset;opacity:0;transform:translateY(-14px) scale(.97);transition:opacity .28s ease,transform .32s cubic-bezier(.2,.9,.3,1.2)}
.ach-toast.is-in{opacity:1;transform:none}
.ach-toast.is-out{opacity:0;transform:translateY(-10px);transition-duration:.25s}
.ach-toast.is-secret{border-color:#b89cff99;background:linear-gradient(135deg,#1b1526f2,#12161ef2)}
.ach-toast-icon{flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe7a3,#c9973a);color:#2a1d05;box-shadow:0 0 16px #e2c27a66}
.ach-toast.is-secret .ach-toast-icon{background:radial-gradient(circle at 35% 30%,#e3d6ff,#8a6ad8)}
.ach-toast-icon svg{width:22px;height:22px}
.ach-toast-text{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.ach-toast-text small{font-size:10px;letter-spacing:2px;color:#e2c27a;opacity:.9}
.ach-toast.is-secret .ach-toast-text small{color:#cdb8ff}
.ach-toast-text b{font-size:15px;font-weight:700}
.ach-toast-text em{font-style:normal;font-size:12px;opacity:.78;overflow-wrap:anywhere}
.ach-toast-reward{font-style:normal;font-size:11px;margin-top:2px;color:#f6d98f}
@media (prefers-reduced-motion:reduce){.ach-toast,.ach-toast.is-in,.ach-toast.is-out{transition:opacity .2s linear;transform:none}}

/* Hall */
.ach-hall{display:flex;flex-direction:column;gap:14px;text-align:left}
.ach-summary{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:10px;border:1px solid #e2c27a44;background:#e2c27a12}
.ach-total{display:flex;align-items:baseline;gap:8px}
.ach-total strong{font-size:34px;line-height:1;color:#f0cf7c;font-variant-numeric:tabular-nums}
.ach-total span{font-size:13px;opacity:.75}
.ach-note{margin:0;font-size:12px;line-height:1.6;opacity:.75}
.ach-bar{height:6px;border-radius:999px;background:#ffffff1a;overflow:hidden}
.ach-bar i{display:block;height:100%;background:linear-gradient(90deg,#c9973a,#f0cf7c);border-radius:inherit}
.ach-titles{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ach-titles-label{font-size:11px;letter-spacing:1px;opacity:.65;margin-right:2px}
button.ach-title-chip{font:inherit;font-size:12px;line-height:1.2;padding:5px 11px;min-height:30px;min-width:0;width:auto;border-radius:999px;border:1px solid #e2c27a55;background:#ffffff0a;color:inherit;cursor:pointer;box-shadow:none;letter-spacing:0;text-transform:none;transform:none}
button.ach-title-chip:hover{background:#e2c27a22}
button.ach-title-chip.is-worn{border-color:#f0cf7c;background:#e2c27a3a;color:#fbe7b5;font-weight:700}
button.ach-title-chip:focus-visible{outline:2px solid #e2c27a;outline-offset:2px}
.ach-cat{display:flex;flex-direction:column;gap:8px}
.ach-cat header{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.ach-cat h3{margin:0;font-size:15px;letter-spacing:1px}
.ach-cat-count{font-size:12px;opacity:.7;font-variant-numeric:tabular-nums}
.ach-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.ach-item{display:flex;gap:10px;align-items:flex-start;padding:9px 11px;border-radius:8px;border:1px solid #ffffff14;background:#ffffff08;opacity:.62;min-width:0}
.ach-item.is-done{opacity:1;border-color:#e2c27a55;background:#e2c27a10}
.ach-item-icon{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#ffffff14;color:#cfd6dc}
.ach-item.is-done .ach-item-icon{background:radial-gradient(circle at 35% 30%,#ffe7a3,#c9973a);color:#2a1d05}
.ach-item-icon svg{width:17px;height:17px}
.ach-item-body{display:flex;flex-direction:column;gap:2px;min-width:0;line-height:1.4}
.ach-item-body b{font-size:13px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ach-tag{font-size:10px;font-weight:400;padding:1px 6px;border-radius:999px;border:1px solid #b89cff77;color:#cdb8ff}
.ach-item-desc{font-size:12px;opacity:.8;overflow-wrap:anywhere}
.ach-item-reward{font-size:11px;color:#f0cf7c}
.ach-item-when{font-size:11px;opacity:.6}

/* Results */
.ach-run{margin:4px auto 14px;text-align:left;align-self:stretch;width:100%;max-width:980px;box-sizing:border-box}
.ach-run-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.ach-run-list li{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:8px;border:1px solid #e2c27a55;background:#e2c27a10}
.ach-run-list .ach-item-icon{background:radial-gradient(circle at 35% 30%,#ffe7a3,#c9973a);color:#2a1d05}
.ach-run-list span{display:flex;flex-direction:column;min-width:0;line-height:1.4}
.ach-run-list b{font-size:13px}
.ach-run-list small{font-size:12px;opacity:.78;overflow-wrap:anywhere}
.ach-run-list em{font-style:normal;font-size:11px;color:#f0cf7c}

/* Worn title */
.ach-badge{display:inline-flex;align-items:center;gap:8px;margin:6px auto 0;padding:4px 12px 4px 4px;border-radius:999px;border:1px solid #e2c27a77;background:#0008;color:#f6e3b0;font-size:13px}
.ach-badge span{font-size:10px;letter-spacing:2px;padding:3px 8px;border-radius:999px;background:#e2c27a;color:#2a1d05}
.ach-badge b{font-weight:700;letter-spacing:1px}

@media (max-width:520px){
  .ach-list,.ach-run-list{grid-template-columns:1fr}
  .ach-total strong{font-size:28px}
  .ach-toast{padding:9px 12px}
  .ach-toast-text b{font-size:14px}
}

/* Phone feel shared by both demos: long-press card sheet, lifted drag card, drag hint. */

/* A long press shows our sheet, not the browser's copy/save callout. */
[data-card-id],.hand-card{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}

/* Dragging with a finger: the card grows to 1.3× and rides above the thumb.
   :not(#_) outranks each demo's own .dragging-card rule. */
.hand-card.dragging-card.drag-touch:not(#_){top:var(--drag-y)!important;transform-origin:50% 0!important;transform:translate(-50%,calc(-1 * var(--drag-lift,300px))) rotate(-2deg) scale(1.3)!important;filter:drop-shadow(0 18px 22px #000c) drop-shadow(0 0 14px #f1d38366)!important;opacity:1!important}
.hand-card.dragging-card.drag-touch:not(#_) .card-face{transform:none!important}

.drag-hint{position:fixed;z-index:2100;transform:translateX(-50%);pointer-events:none;padding:8px 14px;border:1px solid #f1d38399;border-radius:999px;background:#0d151bee;box-shadow:0 6px 18px #000a;color:#f4e3b6;font:700 14px/1.2 system-ui,-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;letter-spacing:.5px;white-space:nowrap;transition:background .12s,color .12s,border-color .12s}
.drag-hint.is-ready{border-color:#a8e59a;background:#1d3a24f2;color:#e3ffd8;box-shadow:0 0 0 3px #a8e59a33,0 6px 18px #000a}
.drag-hint::before{content:'↑ ';opacity:.8}.drag-hint.is-ready::before{content:'✓ '}

/* Long-press detail sheet (a modal <dialog>, above every other layer). */
dialog.card-sheet{position:fixed;inset:auto 0 0;margin:0 auto;width:min(760px,100%);max-width:100%;max-height:min(92dvh,760px);padding:0;border:0;background:transparent;color:#e9e3d2;overflow:visible}
dialog.card-sheet::backdrop{background:#050a0dcc;backdrop-filter:blur(2px)}
/* Panel = fixed close bar + scrolling body, so 关闭 never scrolls out of reach. */
.card-sheet-panel{position:relative;box-sizing:border-box;display:flex;flex-direction:column;max-height:min(92dvh,760px);overflow:hidden;border:1px solid #6c6a58;border-bottom:0;border-radius:16px 16px 0 0;background:linear-gradient(#18242b,#0f171d);box-shadow:0 -10px 40px #000b;font:15px/1.6 system-ui,-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;animation:card-sheet-in .18s ease-out}
.card-sheet-bar{flex:none;display:flex;justify-content:flex-end;padding:8px 10px 0}
.card-sheet-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:14px 18px calc(14px + env(safe-area-inset-bottom))}
@keyframes card-sheet-in{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.card-sheet-close{min-width:88px;min-height:44px;padding:8px 14px;border:1px solid #9a9c86;border-radius:8px;background:#2c3c42;color:#f7eed4;font:700 15px system-ui,-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;cursor:pointer;touch-action:manipulation}
.card-sheet-close:focus-visible{outline:2px solid #f1d383;outline-offset:2px}
.card-sheet-body{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:start}
.card-sheet-art{display:flex;justify-content:center;padding-top:14px}
.card-sheet-art>*{pointer-events:none}
.card-sheet-info{min-width:0;padding-top:4px}
.card-sheet-info h3{margin:0 0 2px;font-size:22px;line-height:1.3;color:#f4dea5}
.card-sheet-meta{margin:0 0 10px;color:#9fb0ab;font-size:13px}
.card-sheet-text{margin:0 0 12px;padding:10px 12px;border-left:3px solid #d8b86a;border-radius:4px;background:#ffffff0d;font-size:16px;line-height:1.65;color:#fff6e0}
.card-sheet-text .kw{font-weight:700}
.card-sheet-keywords{display:grid;gap:6px;margin:0 0 12px}
.card-sheet-keywords>div{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:baseline}
.card-sheet-keywords dt{padding:1px 8px;border-radius:4px;background:#2e3d3f;color:#f3d98f;font-weight:700;font-size:13px;white-space:nowrap}
.card-sheet-keywords dd{margin:0;color:#cad6d0;font-size:14px}
.card-sheet-upgrade{margin:0 0 12px;padding:9px 12px;border:1px dashed #8fcf8a88;border-radius:6px;background:#8fcf8a14;color:#dff5d6;font-size:14px}
.card-sheet-upgrade b{margin-right:8px;color:#a8e59a}
.card-sheet-scene{margin:0 0 8px;color:#93a39e;font-size:13px}
.card-sheet-foot{margin:10px 0 0;text-align:center;color:#6f7f7c;font-size:12px}
/* Wa card face at a readable size. */
.wa-sheet-art .card{width:200px;margin:0}.wa-sheet-art .card>.card-face{height:290px}.wa-sheet-art .card .card-effect{font-size:13px}.wa-sheet-art .card .card-title{font-size:16px}
/* New-demo tactical card at a readable size. */
.new-sheet-art .tc{width:210px;height:300px;font-size:14px}
@media(max-width:600px){
 .card-sheet-body{grid-template-columns:1fr;gap:10px}
 .card-sheet-art{padding-top:0}
 .card-sheet-info h3{margin-right:0;text-align:center}
 .card-sheet-meta{text-align:center}
}
@media(orientation:landscape) and (max-height:500px){
 dialog.card-sheet{max-height:100dvh}.card-sheet-panel{max-height:100dvh}
 .card-sheet-bar{padding-top:4px}
 .card-sheet-body{grid-template-columns:auto minmax(0,1fr)}
 .card-sheet-art{padding-top:0}
 .wa-sheet-art .card{width:170px}.wa-sheet-art .card>.card-face{height:246px}
 .new-sheet-art .tc{width:180px;height:258px}
}
@media(prefers-reduced-motion:reduce){.card-sheet-panel{animation:none}}

/* Tap-play (phones, html.tap-play from shared/tap-play.js): no hover tooltips,
   upgrade peeks or drag hints floating over the battlefield. */
html.tap-play #card-tooltip,html.tap-play .rm-peek,html.tap-play .drag-hint{display:none!important}
html.tap-play .hand-card{touch-action:pan-x;-webkit-tap-highlight-color:transparent}

/* Wa demo on phones: compact header, 44px touch targets, scrollable hand,
   landscape fit and notch safe areas. Loaded last in style.css. */

html,body{overflow-x:hidden}
.hud-resources>span{display:inline-flex;align-items:center;gap:2px;white-space:nowrap}
body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.game-hud{padding-top:env(safe-area-inset-top)}
/* One compact line under the header. (Setting only `bottom` here used to stretch
   the box from the header to the screen bottom, covering the whole game.) */
#notice:not(:empty){top:calc(56px + env(safe-area-inset-top));bottom:auto;width:max-content;max-width:calc(100vw - 24px);box-sizing:border-box;font-size:13px;line-height:1.4;text-align:center}

/* ---------- Header: one row, every control ≥44px, links moved to 菜单 ---------- */
@media(max-width:720px){
 .game-hud{height:calc(50px + env(safe-area-inset-top));padding-left:max(6px,env(safe-area-inset-left));padding-right:max(6px,env(safe-area-inset-right));gap:4px}
 .game-hud .header-links{display:none}
 .game-hud .brand{font-size:16px;letter-spacing:0}
 .hud-resources{flex:1 1 auto;min-width:0;gap:6px;font-size:12px}
 .hud-resources b{font-size:15px}
 .hud-resources .icon{width:15px;height:15px}
 .hud-tools{flex:none;gap:2px;align-items:center}
 .game-hud .hud-link{min-height:44px;min-width:44px;padding:0 6px;font-size:13px;display:inline-flex;align-items:center;justify-content:center}
 .game-hud .gear-slots{min-height:44px;min-width:44px;align-content:center;justify-content:center;box-sizing:border-box}
 .game-hud .sfx-toggle{min-width:44px;min-height:44px}
}
@media(max-width:560px){.game-hud .brand{display:none}}
@media(max-width:400px){
 .hud-resources{gap:4px}
 .hud-resources .icon{display:none}
 .game-hud .hud-link{padding:0 4px;font-size:12px}
}

/* ---------- Map: bigger node hit areas ---------- */
@media(max-width:720px){
 .season-map .map-stop>button,.map-stop>button{width:44px;height:44px;padding:9px}
 .season-map .map-stop.kind-boss>button,.kind-boss>button{width:54px;height:54px}
 .node-label,.eyebrow,.map-instruction{font-size:12px}
 .map-legend span,.map-legend li{font-size:12px}
}

/* ---------- Battle, portrait phone ---------- */
@media(max-width:720px){
 .combat-screen{height:calc(100dvh - 50px - env(safe-area-inset-top));min-height:560px}
 .arena-top{height:auto;min-height:22px;font-size:12px;padding:4px 10px 0}
 .arena{min-height:220px}
 .intent-bubble strong{font-size:13px}.intent-bubble small{font-size:12px}
 .fighter h2{font-size:13px}.team-label{font-size:12px;letter-spacing:1px}
 .life-bar span{font-size:12px}.shield-value{font-size:12px}
 .target-hint{font-size:12px}
 /* Controls: supplies · warning · end turn, then the selected card with a big play button. */
 .combat-controls{height:auto;min-height:0;padding:6px 8px;gap:6px;flex-wrap:wrap;align-items:center}
 .combat-controls .supply-bar{order:0}
 .supply-slot{width:44px;height:44px}
 .turn-warning{order:1;flex:1 1 0;min-width:0;width:auto;font-size:12px;line-height:1.35}
 .turn-warning .discard-reminder{display:none}
 .end-turn{order:2;min-height:44px;min-width:104px;padding:8px 12px;font-size:15px}
 .selection-panel{order:3;flex:1 1 100%;min-height:44px}
 .selection-placeholder,.selection-panel small{font-size:12px}
 .selection-panel strong{font-size:13px}
 .play-selected{min-height:44px;padding:8px 20px;font-size:14px}
 .selection-panel .text-button{min-height:44px;min-width:44px;padding:0 6px;font-size:13px}
 /* Hand: a scrolling row of cards that never cover each other; piles in a bar below. */
 .hand-dock{height:auto;min-height:0;position:relative;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;grid-template-areas:'fan fan' 'deck discard'}
 .hand-dock .deck-console,.hand-dock .discard-console{position:static;display:flex;flex-direction:row;align-items:center;width:auto;gap:8px;inset:auto}
 .hand-dock .hand-fan{grid-area:fan}
 .hand-dock .deck-console{grid-area:deck;justify-self:start;padding:0 0 max(6px,env(safe-area-inset-bottom)) 8px}
 .hand-dock .discard-console{grid-area:discard;justify-self:end;padding:0 8px max(6px,env(safe-area-inset-bottom)) 0}
 .energy-orb{width:54px;height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}.energy-orb b{font-size:21px;line-height:1}.energy-orb span{line-height:1.1}
 .fighter.ally .life-row{flex-wrap:nowrap}.fighter.ally .life-bar{min-width:96px}.fighter.ally .life-bar span{white-space:nowrap}
 .pile-button,.hand-dock .exhaust-link{box-sizing:border-box;width:auto;height:44px;min-width:76px;min-height:44px;padding:0 10px;font-size:13px;display:inline-flex;align-items:center;justify-content:center;box-shadow:2px 2px 0 #142029}
 .hand-fan{position:relative;inset:auto;display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;padding:24px 10px 8px;scroll-snap-type:x proximity;overscroll-behavior-x:contain;scrollbar-width:thin;--step:0px}
 .hand-card{position:relative;left:auto;bottom:auto;flex:0 0 112px;width:112px;min-width:112px;height:168px;transform:none;scroll-snap-align:start;z-index:1;touch-action:pan-x}
 .hand-card:hover,.hand-card:focus-visible{transform:none;z-index:2}
 .hand-card.selected{transform:translateY(-16px);z-index:3}
 .hand-card .card-face{padding:5px}
 .hand-card .card-title{font-size:13px;line-height:18px}
 .hand-card .card-portrait{height:62px;min-height:62px}
 .hand-card .card-type,.hand-card .card-tactic{font-size:12px;line-height:16px}
 .hand-card .card-effect,.hand-card .card-effect *{font-size:12px;line-height:1.3}
 .hand-card .portrait-role{font-size:12px;padding:0 3px;letter-spacing:0}
 .skin-rack .muted,.trait-tag.region-trait,.shield-value small,.crest b{font-size:12px}
 .energy-orb span{font-size:12px;letter-spacing:0}
 .hand-card .card-foot{display:none}
 .hand-card .card-cost{width:28px;height:28px;font-size:18px;top:-8px;left:-4px}
 .card-unavailable{font-size:11px}
 .combat-bottom{display:none}
}
@media(max-width:380px){
 .hand-card{flex-basis:104px;width:104px;min-width:104px;height:160px}
 .hand-card .card-portrait{height:54px;min-height:54px}
}

/* ---------- Battle, landscape phone (e.g. 844×390): fit without page scroll ---------- */
@media(orientation:landscape) and (max-height:500px){
 .game-hud{height:calc(44px + env(safe-area-inset-top));padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right));gap:10px}
 .game-hud .header-links,.game-hud .brand span{display:none}
 .game-hud .hud-link,.game-hud .sfx-toggle{min-height:44px;min-width:44px;font-size:13px}
 .combat-screen{height:calc(100dvh - 44px - env(safe-area-inset-top));min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 188px;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:'top controls' 'arena controls' 'dock dock'}
 .combat-screen>.arena-top{grid-area:top;height:auto;min-height:0;padding:3px 12px 0;font-size:12px}
 .combat-screen>.arena{grid-area:arena;min-height:0;margin:0 8px}
 .combat-screen>.combat-controls{grid-area:controls;height:auto;min-height:0;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:6px;padding:6px 10px 6px 0}
 .combat-controls .turn-warning{width:auto;font-size:12px}.turn-warning .discard-reminder{display:none}
 .end-turn{min-height:44px;font-size:15px}
 .selection-panel{min-height:44px}.play-selected{min-height:44px}
 .combat-screen>.hand-dock{grid-area:dock;height:auto;min-height:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:'deck fan discard';align-items:end}
 .hand-dock .deck-console,.hand-dock .discard-console{position:static;inset:auto;display:flex;flex-direction:column;gap:6px;width:auto;padding:0 8px max(6px,env(safe-area-inset-bottom))}
 .hand-dock .deck-console{grid-area:deck}.hand-dock .discard-console{grid-area:discard}
 .hand-dock .hand-fan{grid-area:fan;position:relative;inset:auto;display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;padding:16px 8px 6px;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
 .hand-card{position:relative;left:auto;bottom:auto;flex:0 0 104px;width:104px;min-width:104px;height:150px;transform:none;scroll-snap-align:start;touch-action:pan-x}
 .hand-card:hover,.hand-card:focus-visible{transform:none}
 .hand-card.selected{transform:translateY(-10px)}
 .hand-card .card-face{padding:4px}
 .hand-card .card-portrait{height:40px;min-height:40px}
 .hand-card .card-foot,.card-key{display:none}
 .hand-card .card-title{font-size:12px;line-height:17px}
 .hand-card .card-tactic{font-size:12px;line-height:16px}
 .hand-card .card-effect,.hand-card .card-effect *{font-size:12px;line-height:1.25}
 .hand-card .portrait-role{font-size:12px;padding:0 3px;letter-spacing:0}
 .hand-card .card-cost{width:26px;height:26px;font-size:16px;top:-7px;left:-4px}
 .energy-orb{width:48px;height:48px}.energy-orb span{font-size:12px;letter-spacing:0}
 .pile-button,.hand-dock .exhaust-link{box-sizing:border-box;width:auto;height:44px;min-width:70px;padding:0 8px;font-size:12px;display:inline-flex;align-items:center;justify-content:center}
 .combat-bottom{display:none}
 /* Smaller fighters so both fit the short arena. */
 .fighter{width:150px;bottom:2px}.fighter.ally{left:4%}.fighter.enemy{right:4%}
 .team-label{display:none}
 .fighter h2{font-size:12px;margin:2px 0}
 .combat-target:has(.character-stage-host canvas){width:120px;height:76px}
 .enemy .combat-target{min-width:120px}.opponent-art{width:120px;height:76px}
 .crest{height:56px;width:56px}
 .trait-row{margin:0}.trait-tag.region-trait,.shield-value small,.life-bar span{font-size:12px}
 .intent-bubble{padding:3px 8px}.intent-bubble strong{font-size:12px}.intent-bubble small{display:none}
 .arena-center{top:30%}.target-hint{font-size:12px}
 .map-screen{height:auto}
}

/* ---------- Phones (text under 12px is raised by enforceTextFloor in shared/tap-play.js) ---------- */
@media(max-width:720px),(orientation:landscape) and (max-height:500px){
 .energy-orb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}.energy-orb b{line-height:1}.energy-orb span{line-height:1.1}
}

/* ---------- Market on phones: price tags never sit on item names ---------- */
@media(max-width:720px){
 .shop-shelf.market-row{display:grid!important;grid-template-columns:minmax(0,1fr)!important}
 .shop-shelf.market-row>article h4{padding-right:100px}
 .contract-slot .contract-label{text-align:left;padding-left:12px;padding-right:110px}
}

/* ---------- Group fights on a portrait phone: opponents across the empty top of
   the arena, big enough for 12px names, intents, traits and life. ---------- */
@media(max-width:720px) and (orientation:portrait){
 /* VS and the target hint live in the empty top of the arena, above the intent bubbles. */
 .combat-screen .arena-center{top:8%!important}
 /* Tap-play: the selection bar above the hand already says what to tap next. */
 html.tap-play .combat-screen .target-hint{display:none}
 /* In battle the notice sits in the open middle of the arena, not over the intents. */
 body.combat-mode #notice:not(:empty){top:40dvh}
 .combat-screen:has(.foe-group) .arena-center{display:none}
 .combat-screen .fighter.enemy.foe-group{top:34px;bottom:auto;left:6px;right:6px;width:auto;justify-content:center;align-items:flex-start;gap:6px}
 .foe-group .foe{flex:0 1 118px;width:auto;min-width:0}
 .foe-group .foe .intent-bubble{padding:3px 4px}.foe-group .foe .intent-bubble strong{font-size:12px;line-height:1.3}
 .foe-group .combat-target:has(.character-stage-host canvas){width:96px;height:80px}
 .foe-group .foe .combat-target{max-width:100%}
 .foe-group .foe h2{font-size:12px;line-height:1.3;margin:6px 0 3px;white-space:nowrap;overflow:visible}
 .foe-group .foe .trait-row{display:block;margin:0 0 3px}.foe-group .foe .trait-tag{font-size:12px;padding:1px 5px;white-space:normal}
 .foe-group .foe .life-row{flex-wrap:wrap;justify-content:center;gap:3px}
 .foe-group .foe .life-row .shield-value{font-size:12px}.foe-group .foe .life-bar{flex:1 1 60px}.foe-group .foe .life-bar span{font-size:12px}
 .foe-group .foe .target-caption{font-size:12px}
 .combat-screen:has(.foe-group) .fighter.ally{bottom:4px}
}

/* ---------- Dialog: a ✕ that stays at the top right while the content scrolls ---------- */
#dialog .dialog-x{position:sticky;top:-14px;float:right;z-index:5;min-width:44px;min-height:44px;margin:-14px -14px 4px 8px;padding:0;border:1px solid #a99567;border-radius:8px;background:#2e4142;color:#f1e7cc;font-size:18px;line-height:1;cursor:pointer}
@media(max-width:720px){#dialog{padding:18px 14px}#dialog .dialog-x{top:-8px;margin:-8px -6px 4px 8px}}

/* ---------- Tap-play selection bar (html.tap-play): full card text above the hand ---------- */
html.tap-play .selection-panel.tap-selection .selection-text{margin:2px 0 3px;font-size:14px;line-height:1.45;color:#f6ecd3;white-space:normal;overflow-wrap:anywhere}
html.tap-play .selection-panel.tap-selection small{font-size:12px}
html.tap-play .selection-panel.tap-selection .text-button,html.tap-play .selection-panel.tap-selection button{min-height:44px}

/* Portrait phone combat: readable scrolling hand and one enemy-turn banner. */
@media(max-width:720px) and (orientation:portrait){
 .hand-dock .hand-fan,.hand-fan{overflow-x:auto!important;overflow-y:hidden!important;justify-content:flex-start;gap:8px!important;padding:18px 8px 10px!important;scroll-snap-type:x proximity;touch-action:pan-x}
 .hand-card{flex:0 0 104px!important;width:104px!important;min-width:104px!important;height:156px!important;touch-action:manipulation}
 .hand-card+.hand-card{margin-left:0!important}
 .hand-card.selected{z-index:20!important}
 .hand-card .card-portrait{height:46px!important;min-height:46px!important}
 .selection-panel{height:92px;min-height:92px!important;overflow:hidden;align-content:center}
 .selection-panel .play-selected{white-space:nowrap;min-width:64px;flex:none}
 .fighter.ally .team-label{display:none}
 .combat-screen:has(.enemy-turn-banner) .played-echo{visibility:hidden}
 .cfx-title{display:none!important}
 .enemy-turn-banner{top:4%}
 .combat-target .target-caption{z-index:4;font-size:12px}
}

/* ---------- Group fights on a portrait phone (2026-09-27) ----------
   Opponents take the top of the arena and our side sits under them; the arena
   grows to fit both rows so our panel never covers an opponent's name or life.
   The battlefield tag wraps onto its own line instead of squeezing to one
   character per line. */
@media(max-width:720px) and (orientation:portrait){
 .combat-screen .arena-top{flex-wrap:wrap;row-gap:4px}
 .combat-screen .arena-top .battlefield-tag{flex:1 1 100%;order:3;display:block!important;writing-mode:horizontal-tb;white-space:normal;text-align:left;line-height:1.4}
 .combat-screen .arena-top .battlefield-tag *{display:inline!important;writing-mode:horizontal-tb}
 .combat-screen:has(.foe-group) .arena{min-height:292px;flex:0 0 auto}
 .combat-screen .fighter.enemy.foe-group{top:68px!important}
 /* Our side as one row under the opponents: figure left, name, trait and life right. */
 .combat-screen:has(.foe-group) .fighter.ally{bottom:4px;top:auto;left:6px;right:6px;width:auto;display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:10px;align-items:center;justify-items:start;text-align:left}
 .combat-screen:has(.foe-group) .fighter.ally>.combat-target{grid-column:1;grid-row:1 / span 4;width:96px;height:72px;min-width:0}
 .combat-screen:has(.foe-group) .fighter.ally>:not(.combat-target){grid-column:2;margin:1px 0}
 .combat-screen:has(.foe-group) .fighter.ally .life-row{justify-content:flex-start}
 .combat-screen:has(.foe-group) .fighter.ally .active-powers{position:static}
}

html { scrollbar-gutter:stable; }
body.home-mode .cover-screen { width:100%; min-width:0; }
body.home-mode .cover-screen > * { min-width:0; }
/* Reviewed layout pass: natural page flow, separated controls, primary modes. */
body.home-mode .cover-setup { padding:24px; gap:12px; box-sizing:border-box; }
body.home-mode .region-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
body.home-mode .region-tab { min-width:0; min-height:56px; font-size:14px; }
body.home-mode .region-tab small { font-size:12px; white-space:normal; }
body.home-mode .region-picker { margin:0; }
body.home-mode .region-extra { width:min(100%,600px); margin:0; }
body.home-mode .setup-start { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; width:min(100%,600px); max-width:600px; margin:8px 0; }
body.home-mode .setup-start .primary { min-height:64px; padding:14px 10px; font-size:16px; display:flex; align-items:center; justify-content:center; text-align:center; text-decoration:none; box-sizing:border-box; }
body.home-mode .button-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; width:min(100%,600px); margin:0; }
body.home-mode .button-row .text-button { min-height:44px; display:flex; align-items:center; justify-content:center; padding:8px; border:1px solid #45534e; border-radius:4px; background:#18232a; font-size:14px; box-sizing:border-box; }
body.home-mode .cover-log { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:16px; }
body.home-mode .title-note,body.home-mode .cover-footer { margin:4px 0; }
.game-hud { height:auto; min-height:56px; flex-wrap:wrap; gap:8px 16px; padding:8px 20px; }
.game-hud .header-links { display:flex; flex-shrink:0; flex-wrap:nowrap; gap:12px; white-space:nowrap; }
.game-hud .hud-tools { gap:8px; }
.room-screen { max-width:1100px; margin:0 auto; padding:32px 24px 48px; box-sizing:border-box; }
.room-screen .choices { flex-wrap:wrap; gap:16px; }
.room-screen .opening-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; max-width:900px; margin:auto; }
.room-screen .opening-choices .choice { width:100%; max-width:none; min-height:0; height:auto; padding:20px; box-sizing:border-box; }
.room-screen .opening-choices .choice p { margin:12px 0; }
.room-screen .opening-choices .choice button { position:static; margin-top:12px; min-height:44px; }
.room-screen .page-footer { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:24px; }
@media(min-width:1000px) {
 body.home-mode .cover-screen { display:grid; grid-template-columns:40% minmax(0,1fr); align-items:stretch; max-width:1500px; margin:auto; padding:24px; gap:24px; box-sizing:border-box; }
 body.home-mode .cover-hero { min-height:600px; height:100%; border-radius:8px; }
 body.home-mode .cover-content h1 { font-size:clamp(40px,4.3vw,64px); letter-spacing:4px; }
 body.home-mode .cover-content { max-width:100%; }
 body.home-mode .cover-setup { padding:16px 8px; justify-content:flex-start; }
}
@media(max-width:720px) {
 body.home-mode .cover-hero { min-height:280px; }
 body.home-mode .cover-setup { padding:20px 16px; }
 body.home-mode .button-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .room-screen { padding:20px 16px 32px; }
 .room-screen .opening-choices { grid-template-columns:1fr; }
 .room-screen .opening-choices .choice { max-width:none; }
 .room-screen .choice button,.room-screen .page-footer button { min-height:44px; }
 .game-hud { height:auto; min-height:56px; flex-wrap:wrap; padding:8px 12px; gap:8px 12px; }
 .game-hud .hud-tools { margin-left:auto; }
}
@media(max-width:720px) and (orientation:portrait) {
 .combat-screen { height:auto; min-height:0; }
 .combat-screen>.arena { min-height:280px; flex:0 0 auto; }
 .combat-controls { height:auto; min-height:0; gap:12px; padding:12px; }
}

/* All region descriptions share the tallest intrinsic size at this viewport. */
body.home-mode .region-trait-copy { display:grid; flex:1; min-width:0; }
body.home-mode .region-trait-copy > div { grid-area:1 / 1; min-width:0; }
body.home-mode .trait-size-guide { visibility:hidden; pointer-events:none; }
body.home-mode .unlock-head { display:grid; grid-template-columns:1fr; gap:4px; }