/* THE VILLAGE - styles.css
   V29.7: the Cards screen was rebuilt. 1302 rules that existed only to style
   that screen were removed and replaced by one authoritative block at the
   end of this file. Nothing outside the Cards screen was touched. */
*{box-sizing:border-box;}
html,body{height:100%;margin:0;background:#050408;color:var(--ink);font-family:Georgia,"Times New Roman",serif;overflow:hidden;}
button{font:inherit;color:inherit;cursor:pointer;}
#app{position:relative;width:100%;height:100%;background:radial-gradient(circle at 50% 15%,#24152a 0,#0b0810 45%,#050408 100%);}
canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;}
.screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:18px;background:linear-gradient(#06040ab8,#06040ae8);backdrop-filter:blur(4px);z-index:10;}
.panel{width:min(1000px,96vw);max-height:92vh;overflow:auto;border:1px solid #76516d;background:linear-gradient(180deg,#1b121dF2,#0e0b12F2);box-shadow:0 0 50px #000, inset 0 0 40px #4f1d381f;padding:22px;border-radius:10px;}
h1,h2,h3,p{margin-top:0;}
.title{font-size:clamp(34px,7vw,78px);letter-spacing:.06em;text-align:center;text-shadow:0 3px 0 #3c0e1c,0 0 24px #a51f3577;margin-bottom:8px;}
.subtitle{text-align:center;color:var(--gold);letter-spacing:.22em;text-transform:uppercase;margin-bottom:26px;}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.center{justify-content:center;}
.spread{justify-content:space-between;}
.btn{border:1px solid #9d6f80;border-radius:7px;padding:11px 17px;background:linear-gradient(#4b2432,#2a111c);box-shadow:inset 0 1px #ffffff2a,0 4px 12px #0008;min-width:130px;}
.btn:hover{filter:brightness(1.18);}
.btn.primary{background:linear-gradient(#ad2d43,#5c1224);border-color:#e1818e;}
.btn.gold{background:linear-gradient(#80642c,#3e2d10);border-color:#d5b46c;}
.btn:disabled{opacity:.4;cursor:not-allowed;}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:11px;}
.card{position:relative;min-height:176px;border:1px solid #74516c;border-radius:8px;padding:10px;background:linear-gradient(160deg,#2c192c,#120e15);box-shadow:inset 0 0 25px #0008,0 4px 10px #0007;transition:.15s;user-select:none;}
.card:hover{transform:translateY(-2px);border-color:#d5b46c;}
.card.selected{outline:2px solid #e24a5e;border-color:#fff;}
.card.disabled{opacity:.38;}
.card .icon{font-size:34px;text-align:center;margin:3px;}
.card h3{font-size:16px;margin:5px 0;color:#f7d9cf;}
.card p{font-size:12px;color:#c7bac6;line-height:1.3;}
.tag{position:absolute;right:7px;top:7px;font-size:10px;border:1px solid #60485f;padding:2px 5px;border-radius:9px;background:#0b080d;}
.cost{position:absolute;left:8px;bottom:7px;color:#ffd36f;font-weight:bold;}
.rarity{position:absolute;right:8px;bottom:7px;font-size:11px;color:#bca2c8;}
#hud{position:absolute;inset:0;z-index:4;pointer-events:none;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));display:flex;flex-direction:column;justify-content:space-between;}
.hudbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;pointer-events:auto;}
.pill{padding:7px 10px;border:1px solid #5b4258;background:#0b0811d9;border-radius:7px;box-shadow:0 3px 12px #0008;font-size:14px;}
.pill strong{color:#f6d27c;}
#hand{display:grid;grid-template-columns:repeat(6,minmax(62px,108px));gap:7px;justify-content:center;pointer-events:auto;}
.hand-card{position:relative;height:88px;border:1px solid #75516a;border-radius:8px;background:linear-gradient(#2d1728,#100c12);padding:5px;text-align:center;overflow:hidden;}
.hand-card.active{outline:2px solid #fff3a2;transform:translateY(-5px);}
.hand-card .hicon{font-size:27px;}
.hand-card .hname{font-size:10px;line-height:1.1;}
.hand-card .hcost{position:absolute;right:4px;bottom:2px;color:#ffe083;font-size:12px;}
.hand-card .cool{position:absolute;inset:0;background:#050407bd;display:flex;align-items:center;justify-content:center;font-size:24px;}
#toast{position:absolute;z-index:30;left:50%;top:15%;transform:translateX(-50%);padding:10px 16px;border:1px solid #8f667e;background:#100b12e8;border-radius:7px;opacity:0;transition:.25s;pointer-events:none;text-align:center;}
#choices .panel{width:min(760px,96vw);}
#choicesCards{grid-template-columns:repeat(3,1fr);}
#choices:not(.hidden) .card{animation:cardRise .55s cubic-bezier(.2,.8,.2,1) both;}
#choices:not(.hidden) .card:nth-child(2){animation-delay:.12s;}
#choices:not(.hidden) .card:nth-child(3){animation-delay:.24s;}
@keyframes cardRise{0%{opacity:0;transform:translateY(45px) scale(.75) rotate(-3deg);filter:brightness(2)}70%{transform:translateY(-6px) scale(1.04)}100%{opacity:1;transform:none;filter:none}}
.elite-card{border-color:#ffd66b!important;box-shadow:0 0 18px #ffd66b66,inset 0 0 28px #6f481955!important;}
.elite-card:after{content:'ELITE';position:absolute;left:8px;top:7px;color:#ffe99c;font-size:10px;letter-spacing:.12em;}
.small{font-size:12px;color:var(--muted);}
.progress{height:8px;background:#09070a;border:1px solid #4b3446;border-radius:9px;overflow:hidden;}
.progress>i{display:block;height:100%;background:linear-gradient(90deg,#7b1732,#e14a5f);width:0;}
#tutorial{position:absolute;z-index:8;right:12px;top:85px;width:min(310px,80vw);padding:12px;border:1px solid #805e76;background:#0d0910e8;border-radius:8px;pointer-events:auto;font-size:13px;line-height:1.35;}
@media(max-width:700px){
  .cards{grid-template-columns:repeat(2,1fr);}
  #choicesCards{grid-template-columns:1fr;}
  .card{min-height:130px;}
  .card p{display:none;}
  #hand{grid-template-columns:repeat(6,1fr);width:100%;}
  .hand-card{height:70px;}
  .hand-card .hicon{font-size:21px;}
  .hudbar{font-size:11px;}
  .title{font-size:36px;}
}
#threeBg{position:absolute;inset:0;z-index:0;pointer-events:none;}
#game{z-index:1;}
#placementBar{position:absolute;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:7;display:flex;gap:8px;align-items:center;padding:8px;border:1px solid #73546d;background:#0b0811e8;border-radius:9px;box-shadow:0 6px 24px #000b;pointer-events:auto;}
#placementBar .label{font-size:13px;color:#ead9e5;max-width:260px;}
#placementBar.hidden{display:none!important;}
.preview-valid{color:#8ff0a4;}
.preview-invalid{color:#ff8a92;}
.coffin{width:220px;height:100px;margin:0 auto 18px;position:relative;border:4px solid #6f4b5f;background:linear-gradient(90deg,#180c14,#3a1727,#180c14);clip-path:polygon(12% 0,88% 0,100% 26%,92% 100%,8% 100%,0 26%);box-shadow:0 0 30px #a51f3555,inset 0 0 22px #000;}
.coffin:before{content:'';position:absolute;background:#b3915d;}
.coffin:before{left:24px;right:24px;top:45px;height:8px;}
.coffin:after{content:'';position:absolute;background:#b3915d;top:14px;bottom:14px;left:104px;width:8px;}
#choices:not(.hidden) .coffin{animation:coffinDrop .6s cubic-bezier(.2,.9,.2,1),coffinShake .35s .62s 2;}
@keyframes coffinDrop{from{opacity:0;transform:translateY(-120px) scale(.75)}to{opacity:1;transform:none}}
@keyframes coffinShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px) rotate(-1deg)}75%{transform:translateX(8px) rotate(1deg)}}
.float-text{position:absolute;z-index:6;pointer-events:none;font-weight:bold;text-shadow:0 2px 3px #000;animation:floatUp .8s ease-out forwards;}
@keyframes floatUp{to{transform:translateY(-34px);opacity:0}}
.menu-castle{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:radial-gradient(circle at 72% 20%,#67526b44,transparent 24%),linear-gradient(180deg,#160f22aa,#050409 78%);}
.menu-castle .moon{position:absolute;right:12%;top:8%;width:min(24vw,260px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff8d7,#c8bdd0 62%,#73677c);box-shadow:0 0 70px #ded0ed77;}
.castle-shape{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(900px,95vw);height:55%;background:linear-gradient(#100b17,#030306);clip-path:polygon(0 100%,0 78%,8% 78%,8% 46%,14% 46%,14% 67%,23% 67%,23% 30%,30% 30%,30% 58%,40% 58%,40% 18%,47% 18%,50% 4%,53% 18%,60% 18%,60% 58%,70% 58%,70% 30%,77% 30%,77% 67%,86% 67%,86% 46%,92% 46%,92% 78%,100% 78%,100% 100%);}
.castle-shape i{position:absolute;width:10px;height:22px;background:#ffc463;box-shadow:0 0 18px #ff7c2e;animation:windowFlicker 2s infinite alternate;}
.castle-shape i:nth-child(1){left:31%;top:42%;}
.castle-shape i:nth-child(2){left:49%;top:28%;}
.castle-shape i:nth-child(3){right:31%;top:42%;}
@keyframes windowFlicker{to{opacity:.45;filter:brightness(1.6)}}
.menu-bats{position:absolute;top:22%;left:18%;font-size:34px;color:#09060c;letter-spacing:14px;animation:batsFly 8s linear infinite;}
@keyframes batsFly{from{transform:translateX(-25vw) translateY(10px)}to{transform:translateX(85vw) translateY(-45px)}}
.hero-panel{position:relative;max-width:820px;background:linear-gradient(145deg,#1b101edc,#09070de8);border:1px solid #a47991;box-shadow:0 20px 80px #000,0 0 45px #8f294a44,inset 0 0 70px #6a274022;backdrop-filter:blur(12px);}
.menu-emblem{text-align:center;color:#e9c978;font-size:12px;letter-spacing:.28em;margin:-8px 0 18px;}
.menu-actions{display:grid;grid-template-columns:repeat(2,minmax(210px,1fr));gap:12px;max-width:620px;margin:auto;}
.menu-btn{position:relative;min-height:64px;border:1px solid #9b667d;border-radius:10px;background:linear-gradient(110deg,#331523,#170c14);font-size:17px;letter-spacing:.05em;box-shadow:inset 0 1px #fff3,0 7px 20px #000a;transition:.22s;overflow:hidden;}
.menu-btn:focus:before{transform:translateX(110%);}
.menu-btn:hover,.menu-btn:focus{transform:translateY(-2px);border-color:#ffd78b;box-shadow:0 0 24px #d1446655,0 8px 24px #000;}
.menu-btn span{margin-right:8px;}
.menu-btn.primary{background:linear-gradient(110deg,#a82e49,#4d1022);border-color:#ff93a2;}
.menu-btn.gold{background:linear-gradient(110deg,#80642e,#34240d);border-color:#e7c571;}
.menu-btn.locked{opacity:.65;}
.menu-btn small{display:block;font-size:10px;color:#c5b3c0;}
.menu-btn.subtle{background:#100c13;}
.icon-btn{width:38px;height:38px;min-width:0;border-radius:50%;border:1px solid #725267;background:#160e18;color:#ead78d;font-weight:bold;}
#towerInspector{position:absolute;z-index:9;right:16px;bottom:24px;width:230px;padding:14px;border:1px solid #9b6a80;border-radius:10px;background:#0b0810ee;box-shadow:0 10px 34px #000;font-size:13px;line-height:1.65;}
.inspect-close{position:absolute;right:7px;top:5px;background:none;border:0;font-size:23px;}
.odds{font-size:10px;color:#e9c66d;margin-top:4px;}
.card-info{font-size:10px;color:#a9dbff;margin-top:4px;}
@media(max-width:700px){
  .hero-panel{max-height:94vh;}
  .menu-castle .moon{right:4%;top:5%;}
  #towerInspector{right:8px;bottom:80px;width:200px;}
}
.menu-castle{background-image:linear-gradient(180deg,rgba(73,101,148,.18),rgba(70,30,67,.26) 48%,rgba(10,8,18,.75)),url('assets/village/house_lv02.png');background-size:cover;background-position:center;}
.menu-castle:after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 72% 18%,rgba(255,243,190,.30),transparent 27%),linear-gradient(90deg,rgba(34,45,78,.18),rgba(116,45,76,.12));animation:menuLight 7s ease-in-out infinite alternate;}
@keyframes menuLight{to{filter:brightness(1.22) saturate(1.12)}}
.menu-cloud{position:absolute;width:45%;height:12%;border-radius:50%;background:rgba(224,229,244,.12);filter:blur(24px);animation:cloudDrift 18s linear infinite;}
.cloud-a{top:12%;left:-35%;}
.cloud-b{top:31%;left:-45%;animation-duration:27s;opacity:.6;}
@keyframes cloudDrift{to{transform:translateX(180vw)}}
.ember-field:before{content:'✦  ·  ✧  ·  ✦  ·  ·  ✧';position:absolute;left:8%;bottom:8%;color:#ffbd6d;opacity:.5;letter-spacing:36px;animation:embersUp 8s linear infinite;}
.ember-field:after{content:'✦  ·  ✧  ·  ✦  ·  ·  ✧';position:absolute;left:35%;bottom:8%;color:#ffbd6d;opacity:.5;letter-spacing:36px;animation:embersUp 8s linear infinite;animation-delay:-4s;}
@keyframes embersUp{to{transform:translateY(-58vh);opacity:0}}
.hero-panel{background:linear-gradient(145deg,rgba(47,24,49,.84),rgba(12,13,28,.82));border-color:#d59ab3;}
.title{filter:drop-shadow(0 0 12px rgba(255,111,147,.45));}
.menu-btn{animation:buttonPulse 3.5s ease-in-out infinite alternate;}
@keyframes buttonPulse{to{box-shadow:inset 0 1px #fff4,0 0 18px rgba(221,81,119,.24),0 7px 20px #000a}}
.pill{backdrop-filter:blur(8px);background:linear-gradient(180deg,rgba(31,21,42,.92),rgba(9,8,18,.92));border-color:#89647e;}
.hero-panel{background:linear-gradient(145deg,rgba(22,25,46,.90),rgba(48,23,57,.86));border-color:#d7b668;box-shadow:0 0 80px rgba(99,62,160,.35),inset 0 0 50px rgba(255,205,113,.08);}
.title{color:#fff0cb;text-shadow:0 2px 0 #2f174e,0 0 18px #c482ff,0 0 42px #ffd47966;}
.subtitle{color:#f6c86f;}
.menu-btn{position:relative;overflow:hidden;}
.menu-btn:before{content:'';position:absolute;inset:-50%;background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.26),transparent 62%);transform:translateX(-70%);transition:.45s;}
.menu-btn:hover:before{transform:translateX(70%);}
.collection-panel{width:min(1180px,97vw);}
.collection-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));}
.collection-summary,.essence-chip{padding:8px 12px;border:1px solid #806b92;border-radius:8px;background:#130f20;}
.card-detail{position:sticky;bottom:0;margin-top:12px;padding:14px;border:1px solid #ad8a59;background:#110d18ee;border-radius:10px;z-index:2;}
.card-detail.hidden{display:none;}
.rarity-common{--rarity:#8c8c95;}
.rarity-good{--rarity:#58ba62;}
.rarity-rare{--rarity:#4f87e8;}
.rarity-epic{--rarity:#9b5de5;}
.rarity-epicplus{--rarity:#a75ce8;box-shadow:0 0 0 2px #e5bd58 inset,0 0 16px #b06fff55!important;}
.rarity-legendary{--rarity:#e0b54f;}
.rarity-legendaryplus{--rarity:#e0b54f;box-shadow:0 0 0 2px #b4272e inset,0 0 18px #e0b54f66!important;}
.rarity-mythic{--rarity:#d73138;box-shadow:0 0 20px #e23d42aa,inset 0 0 25px #8a1117!important;}
.card[class*='rarity-']{border-color:var(--rarity)!important;}
.rarity-orb{width:10px;height:10px;border-radius:50%;display:inline-block;background:var(--rarity);box-shadow:0 0 8px var(--rarity);}
.card-level{position:absolute;left:8px;top:7px;font-size:10px;background:#08070caa;border:1px solid #685872;border-radius:10px;padding:2px 6px;}
.copies{font-size:11px;color:#dccbde;margin-top:4px;}
.merge-btn{margin-top:8px;width:100%;border:1px solid #cfae62;background:#3b2a13;color:#ffe7a0;border-radius:6px;padding:7px;}
.merge-btn:disabled{opacity:.35;}
.hero-grid,.upgrade-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;}
.hero-choice,.upgrade-card{border:1px solid #705679;background:linear-gradient(155deg,#29192e,#100d17);padding:16px;border-radius:10px;}
.hero-choice.selected{outline:2px solid #ffd36a;}
.hero-avatar{font-size:46px;}
.drop-banner{position:absolute;z-index:45;left:50%;top:22%;transform:translateX(-50%);padding:16px 24px;border:2px solid #f4d16f;background:linear-gradient(145deg,#342045,#100c17);border-radius:12px;box-shadow:0 0 35px #c688ff88;font-size:18px;text-align:center;animation:dropPop .5s ease;}
.drop-banner.hidden{display:none;}
@keyframes dropPop{from{opacity:0;transform:translate(-50%,-25px) scale(.7)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
.support-bubble{font-size:12px;}
.chest-reveal{font-size:58px;color:#f0c665;text-shadow:0 0 20px #efb94a;animation:chestPulse 1.2s infinite alternate;}
@keyframes chestPulse{to{transform:scale(1.1);filter:brightness(1.35)}}
.warning{color:#ffbf76;}
.good-note{color:#9ae69c;}
@media(max-width:700px){
  .collection-grid{grid-template-columns:repeat(2,1fr);}
}
.wide-action{grid-column:1/-1;}
.section-kicker{text-align:center;letter-spacing:.22em;color:#f2d688;font-size:13px;margin-bottom:12px;}
.mini-rarity{font-size:10px;text-transform:uppercase;letter-spacing:.12em;}
.mini-icon{font-size:30px;}
.portrait-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));align-items:start;}
.portrait-card{aspect-ratio:2/3;min-height:270px;padding:10px 10px 12px;display:flex;flex-direction:column;overflow:hidden;border-width:2px;color:#fff;}
.portrait-card .card-art{height:42%;min-height:105px;margin:24px 3px 8px;border-radius:10px;border:1px solid #ffffff44;background:radial-gradient(circle,#ffffff25,transparent 58%),linear-gradient(145deg,#0002,#0007);position:relative;display:grid;place-items:center;overflow:hidden;}
.art-sigil{font-size:48px;filter:drop-shadow(0 5px 8px #000);}
.art-lines{position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 18px,#ffffff08 19px 20px);}
.portrait-card h3{font-size:17px;text-align:center;margin:3px 0 5px;color:inherit;}
.portrait-card p{font-size:12px;line-height:1.3;margin:0 2px 8px;color:#fff;opacity:.9;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.card-stats{display:flex;justify-content:space-between;gap:5px;font-size:10px;margin-top:auto;}
.card-footer{display:flex;justify-content:space-between;gap:5px;font-size:10px;margin-top:6px;padding-top:6px;border-top:1px solid #ffffff35;}
.card-equip{margin-top:8px;padding:7px;border-radius:7px;border:1px solid #ffffff66;background:#08080bbb;}
.merge-chip{position:absolute;left:9px;top:8px;padding:4px 7px;border:1px solid #ffe393;border-radius:9px;background:#3c2a0dcc;color:#ffe393;font-size:9px;}
.portrait-card.selected{outline:3px solid #fff3a5;}
.rarity-common{background:linear-gradient(160deg,#777b82,#34373c)!important;border-color:#bfc3ca!important;}
.rarity-good{background:linear-gradient(160deg,#3f9957,#183f27)!important;border-color:#81e699!important;}
.rarity-rare{background:linear-gradient(160deg,#3576ca,#172f61)!important;border-color:#76b5ff!important;}
.rarity-epic{background:linear-gradient(160deg,#8b45c4,#3b185c)!important;border-color:#d490ff!important;}
.rarity-epicplus{background:linear-gradient(160deg,#8d42c7,#32134d)!important;border-color:#f0cd65!important;box-shadow:inset 0 0 0 3px #d5ad45,0 6px 18px #0008!important;}
.rarity-legendary{background:linear-gradient(160deg,#d4a73a,#76520d)!important;border-color:#ffe28a!important;color:#1c1304!important;}
.rarity-legendaryplus{background:linear-gradient(160deg,#e2b443,#6e4506)!important;border-color:#b31827!important;box-shadow:inset 0 0 0 3px #a20f20,0 6px 18px #0008!important;color:#1c1304!important;}
.rarity-mythic{background:linear-gradient(145deg,#d42a37,#651018 60%,#2b080c)!important;border-color:#ff9aa0!important;animation:mythicPulse 2s infinite alternate;}
@keyframes mythicPulse{to{box-shadow:0 0 24px #ff334f99,inset 0 0 30px #ff9b7a33}}
.rarity-legendary p,.rarity-legendaryplus p{color:#211704;}
.inspect-panel{width:min(1120px,97vw);}
.inspect-back{margin-bottom:14px;}
.card-detail-large{display:grid;grid-template-columns:minmax(250px,340px) 1fr;gap:28px;align-items:start;}
.detail-card{width:100%;max-width:330px;margin:auto;}
.detail-copy h2{font-size:34px;margin:5px 0 8px;}
.detail-heading>span{color:#efcf7a;letter-spacing:.1em;}
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0;}
.metric-grid>div{padding:12px;border:1px solid #675469;border-radius:10px;background:#0a0910;}
.metric-grid small{display:block;color:#bcb0bd;}
.metric-grid b{display:block;margin-top:5px;color:#f4dfaa;}
.attack-panel{padding:16px;border:1px solid #725a73;border-radius:12px;background:#0b0911;}
.arc-demo,.line-demo,.return-demo{height:130px;border-radius:10px;background:linear-gradient(#151021,#08070c);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-around;font-size:30px;}
.arc-demo i{position:absolute;width:55%;height:78%;left:20%;top:24%;border-top:4px solid #f1d87c;border-radius:50%;transform:rotate(-8deg);box-shadow:0 -3px 8px #b286ff;}
.arc-demo b{position:absolute;right:18%;top:18%;}
.arc-demo em{position:absolute;right:12%;bottom:18%;font-style:normal;}
.line-demo i,.return-demo i{color:#f1d87c;font-style:normal;letter-spacing:.18em;}
.detail-actions{display:flex;gap:10px;margin-top:18px;}
.system-road-art{font-size:54px;}
.odds{font-size:11px;}
.card-level,.tag{z-index:2;}
@media(max-width:900px){
  .card-detail-large{grid-template-columns:1fr;}
  .detail-card{max-width:300px;}
  .metric-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:600px){
  .portrait-grid{grid-template-columns:repeat(2,minmax(135px,1fr));}
  .portrait-card{min-height:230px;}
  .portrait-card p{-webkit-line-clamp:2;}
  .metric-grid{grid-template-columns:1fr 1fr;}
}
.menu-screen{overflow:hidden;background:linear-gradient(180deg,rgba(18,28,54,.08),rgba(18,12,31,.34) 58%,rgba(10,8,18,.72)),
 url('assets/village/house_lv02.png') center 42%/cover no-repeat!important;}
.menu-screen:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 72% 15%,rgba(255,224,160,.28),transparent 23%),linear-gradient(110deg,rgba(57,92,139,.18),rgba(113,64,125,.12));pointer-events:none;animation:menuLight 9s ease-in-out infinite alternate;}
@keyframes menuLight{to{filter:brightness(1.15) saturate(1.12);transform:scale(1.018)}}
.hero-panel{width:min(760px,92vw);padding:clamp(22px,4vw,42px);border-radius:24px;background:linear-gradient(145deg,rgba(25,31,55,.78),rgba(44,24,54,.72));border:1px solid rgba(250,220,154,.72);backdrop-filter:blur(12px) saturate(1.12);box-shadow:0 28px 90px #080713aa,inset 0 1px rgba(255,255,255,.14);}
.hero-panel .title{font-size:clamp(36px,7vw,70px);line-height:.95;letter-spacing:.045em;margin-bottom:14px;color:#fff4d6;text-shadow:0 2px 0 #342154,0 0 24px #d9aaff88;}
.hero-panel .subtitle{font-size:clamp(12px,2vw,18px);margin-bottom:17px;color:#ffd98d;}
.menu-emblem{font-size:11px;letter-spacing:.22em;text-align:center;color:#f3dca7;margin-bottom:12px;}
.menu-lore{text-align:center;max-width:560px;margin:0 auto 24px;color:#f2e9ef;font-size:15px;line-height:1.55;text-shadow:0 1px 5px #000;}
.menu-actions{gap:12px;}
.menu-btn{min-height:56px;border-radius:14px;border-color:rgba(255,224,160,.55);background:linear-gradient(180deg,rgba(83,53,103,.86),rgba(33,26,54,.92));font-size:16px;letter-spacing:.025em;}
.menu-btn.primary{background:linear-gradient(180deg,rgba(181,75,100,.93),rgba(92,39,76,.96));}
.menu-btn.gold{background:linear-gradient(180deg,rgba(172,127,50,.94),rgba(78,55,25,.96));}
@media(max-width:700px){
  html,body,#app{overflow:hidden;}
  .screen{padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);align-items:stretch;}
  .panel{padding:14px 12px 84px;width:100%;max-height:none;height:100%;border-radius:0;box-shadow:none;}
  .menu-screen{align-items:center;padding:14px;}
  .menu-screen .hero-panel{height:auto;max-height:calc(100dvh - 28px);overflow:auto;border-radius:22px;padding:24px 16px 18px;}
  .hero-panel .title{font-size:clamp(34px,11vw,50px);}
  .menu-lore{font-size:13px;margin-bottom:18px;}
  .menu-actions{grid-template-columns:1fr 1fr;gap:9px;}
  .menu-btn{min-height:48px;padding:10px 8px;font-size:13px;border-radius:12px;}
  .menu-btn span{font-size:17px;}
  .wide-action{grid-column:1/-1;}
  #hud{padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);gap:4px;}
  #hud>.hudbar.spread{display:grid;grid-template-columns:1fr auto;gap:5px;align-items:start;}
  #hud>.hudbar.spread>.hudbar:first-child{display:grid;grid-template-columns:repeat(3,max-content);gap:4px;}
  .pill{padding:4px 6px;border-radius:8px;font-size:10px;white-space:nowrap;box-shadow:0 2px 7px #0008;}
  #hud>.hudbar.spread>.hudbar:last-child{display:grid;grid-template-columns:repeat(2,34px);gap:4px;}
  #hud .icon-btn,#hud .btn{min-width:34px;width:34px;height:34px;padding:0;border-radius:50%;font-size:0;display:grid;place-items:center;}
  #recenterBtn,#helpBtn{font-size:16px!important;}
  #speedBtn:after{content:'×';font-size:16px;}
  #pauseBtn:after{content:'Ⅱ';font-size:15px;}
  #bossWrap{margin-top:42px!important;}
  .progress{height:5px;}
  #tutorial{left:10px;right:10px;top:auto;bottom:calc(12px + env(safe-area-inset-bottom));width:auto;max-height:55vh;overflow:auto;}
  #towerInspector{left:10px!important;right:10px!important;top:auto!important;bottom:calc(10px + env(safe-area-inset-bottom));width:auto!important;max-height:42vh;overflow:auto;}
  #placementBar{left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));transform:none;justify-content:space-between;}
  .section-kicker{font-size:10px;letter-spacing:.15em;}
  .portrait-card{min-height:0;aspect-ratio:2/3;padding:7px;}
  .portrait-card .card-art{min-height:78px;margin-top:20px;}
  .art-sigil{font-size:35px;}
  .portrait-card h3{font-size:13px;}
  .portrait-card p{font-size:10px;-webkit-line-clamp:2;}
  .card-stats,.card-footer{font-size:8px;}
  .card-equip{font-size:10px;padding:5px;}
  #choices{padding:0;background:rgba(7,7,14,.88);}
  #choices .panel{padding:var(--safe-top) 0 var(--safe-bottom);overflow:hidden;display:flex;flex-direction:column;}
  #choices .coffin{transform:scale(.74);margin:-10px auto -18px;}
  #choices h2{font-size:22px;margin:0 12px 4px;}
  #choices #rewardText{font-size:11px;padding:0 18px;margin-bottom:8px;}
  #choicesCards{display:flex!important;grid-template-columns:none!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding:4px calc(50vw - 117px) 20px;-webkit-overflow-scrolling:touch;flex:1;align-items:center;}
  #choicesCards .portrait-card{flex:0 0 234px;max-height:min(62vh,390px);scroll-snap-align:center;scroll-snap-stop:always;box-shadow:0 14px 32px #000b;}
  .inspect-panel{padding:10px 10px calc(18px + env(safe-area-inset-bottom));overflow:auto;}
  .inspect-back{position:sticky;top:0;z-index:4;margin-bottom:8px;min-width:0;padding:8px 12px;}
  .card-detail-large{display:block;}
  .detail-card-wrap{display:flex;justify-content:center;}
  .detail-card{max-width:220px;max-height:330px;}
  .detail-copy{padding:8px 4px;}
  .detail-copy h2{font-size:24px;}
  .detail-heading>p{display:none;}
  .metric-grid{grid-template-columns:repeat(2,1fr);gap:6px;margin:10px 0;}
  .metric-grid>div{padding:8px;}
  .attack-panel{padding:10px;}
  .arc-demo,.line-demo,.return-demo{height:90px;}
  .detail-actions{position:sticky;bottom:0;background:#100d18ee;padding:8px 0;display:grid;grid-template-columns:1fr 1fr;}
  .detail-actions .btn{min-width:0;}
  .drop-banner{top:15%;width:min(88vw,330px);padding:12px 16px;font-size:14px;}
}
@media(max-width:380px){
  .portrait-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .portrait-card .card-art{min-height:64px;}
  .portrait-card h3{font-size:12px;}
  .menu-emblem{display:none;}
}
@media(orientation:landscape) and (max-height:560px){
  .menu-screen .hero-panel{max-width:920px;padding:15px 22px;}
  .hero-panel .title{font-size:36px;}
  .hero-panel .subtitle,.menu-lore{margin-bottom:10px;}
  .menu-actions{grid-template-columns:repeat(3,1fr);}
  .wide-action{grid-column:auto;}
  .menu-btn{min-height:42px;}
  .menu-screen .small{display:none;}
  #hud>.hudbar.spread>.hudbar:first-child{grid-template-columns:repeat(6,max-content);}
  #choicesCards .portrait-card{max-height:72vh;flex-basis:190px;}
  #choicesCards{padding-left:calc(50vw - 95px);padding-right:calc(50vw - 95px);}
}
.codex-grid,.profile-grid,.materials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:18px 0;}
.codex-entry,.profile-grid>div,.history-row{background:linear-gradient(180deg,#211b2b,#100d16);border:1px solid #5c4b70;border-radius:14px;padding:14px;}
.codex-entry{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;min-height:110px;justify-content:center;}
.codex-entry span{font-size:32px;}
.codex-entry.locked{filter:grayscale(1);opacity:.48;}
.profile-grid strong{display:block;font-size:26px;color:#ffe39a;margin-top:5px;}
.materials-grid>div{background:linear-gradient(180deg,#211b2b,#100d16);border:1px solid #5c4b70;border-radius:14px;padding:14px;display:flex;justify-content:space-between;gap:12px;}
.history-row{display:flex;justify-content:space-between;gap:12px;}
.history-list{display:grid;gap:8px;margin:12px 0 20px;}
.history-row{flex-direction:column;}
.history-row span{opacity:.75;}
.forge-line{font-size:12px;margin:8px 0;color:#f3d59b;}
.menu-actions{grid-template-columns:repeat(2,minmax(0,1fr));}
.menu-actions .wide-action{grid-column:1/-1;}
@media(max-width:640px){
  .codex-grid,.profile-grid,.materials-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .menu-actions{grid-template-columns:1fr;}
  .menu-actions .wide-action{grid-column:auto;}
}
.chapter-node{display:grid;grid-template-columns:58px 1fr auto;gap:16px;align-items:center;padding:18px;border:1px solid #765d4388;border-radius:14px;background:linear-gradient(135deg,#161118ee,#251923ee);}
.chapter-node.completed{border-color:#caa75caa;}
.chapter-node.locked{filter:grayscale(1);opacity:.48;}
.chapter-number{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:2px solid #b99a62;background:#09080c;font-size:1.25rem;font-weight:800;}
.chapter-node h3{margin:3px 0;}
.chapter-node p{margin:4px 0 9px;color:#c7bbc7;}
.chapter-meta{display:flex;flex-wrap:wrap;gap:8px;}
.chapter-meta span{padding:5px 8px;border-radius:999px;background:#0006;font-size:.78rem;}
.relic-vault-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:22px 0;}
.relic-vault-card{text-align:left;padding:18px;border:1px solid #68546f;border-radius:14px;color:inherit;background:linear-gradient(160deg,#17101d,#25152b);min-height:220px;}
.relic-vault-card.selected{outline:2px solid #e0b85a;box-shadow:0 0 0 4px #e0b85a22;}
.relic-vault-card.locked{opacity:.45;filter:grayscale(1);}
.relic-icon{font-size:2.6rem;margin-bottom:12px;}
.relic-vault-card strong{display:block;margin-top:16px;color:#e4c36b;}
.section-kicker{font-size:.72rem;letter-spacing:.16em;color:#c1a66a;}
@media(max-width:650px){
  .chapter-node{grid-template-columns:42px 1fr;}
  .chapter-node>.btn{grid-column:1/-1;width:100%;}
  .chapter-number{width:38px;height:38px;}
  .chapter-meta{gap:5px;}
  .chapter-meta span{font-size:.7rem;}
  .relic-vault-grid{grid-template-columns:1fr 1fr;}
  .relic-vault-card{min-height:190px;padding:13px;}
}
@media(max-width:420px){
  .relic-vault-grid{grid-template-columns:1fr;}
}
.kingdom-panel{max-width:980px;}
.kingdom-scene{position:relative;min-height:390px;border:1px solid rgba(220,183,104,.28);border-radius:20px;overflow:hidden;padding:24px;background:radial-gradient(circle at 50% 18%,rgba(170,198,226,.13),transparent 28%),linear-gradient(#121424 0 45%,#18160f 46% 100%);}
.kingdom-scene:before{content:"";position:absolute;inset:45% 0 0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 2px,transparent 2px 56px),linear-gradient(transparent,rgba(0,0,0,.28));}
.kingdom-keep{position:relative;text-align:center;font-size:78px;z-index:2;}
.kingdom-keep span{display:block;font-size:12px;letter-spacing:.24em;color:#e8d19c;}
.kingdom-buildings{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px;}
.kingdom-building{border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(8,9,14,.78);padding:14px;text-align:left;color:inherit;}
.kingdom-building.unbuilt{opacity:.72;}
.kingdom-building .building-icon{font-size:32px;}
.kingdom-building h3{margin:6px 0 3px;}
.kingdom-building p{min-height:36px;}
.kingdom-building button{width:100%;margin-top:8px;}
.kingdom-summary{margin:12px 2px;}
.achievement-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.achievement-card{border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:16px;background:rgba(8,9,14,.68);}
.achievement-card.done{border-color:rgba(225,188,95,.7);}
.achievement-card.claimed{opacity:.7;}
.achievement-card .progress{margin:10px 0;}
.achievement-card button{width:100%;}
@media(max-width:700px){
  .kingdom-buildings,.achievement-grid{grid-template-columns:1fr;}
  .kingdom-scene{min-height:540px;padding:14px;}
  .kingdom-keep{font-size:58px;}
}
.bottom-nav{position:fixed;left:50%;bottom:0;transform:translateX(-50%);z-index:60;width:min(760px,100%);min-height:var(--bottom-nav-h);padding:8px max(10px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));display:grid;grid-template-columns:repeat(5,1fr);gap:6px;background:linear-gradient(180deg,rgba(20,15,28,.96),rgba(8,7,12,.99));border:1px solid rgba(220,185,104,.38);border-bottom:0;border-radius:18px 18px 0 0;box-shadow:0 -10px 32px rgba(0,0,0,.45);backdrop-filter:blur(14px);}
.bottom-nav button{min-width:0;border:1px solid transparent;border-radius:12px;background:transparent;color:#d5cbd8;padding:7px 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:inherit;}
.bottom-nav button span{font-size:22px;line-height:1;}
.bottom-nav button small{font-size:11px;}
.bottom-nav button.active{color:#ffe29a;background:rgba(177,128,54,.18);border-color:rgba(232,195,112,.48);}
body.battle-mode .bottom-nav{display:none!important;}
body:not(.battle-mode) .screen:not(#menu){padding-bottom:calc(var(--bottom-nav-h) + 16px + env(safe-area-inset-bottom));}
body:not(.battle-mode) .screen:not(#menu)>.panel{max-height:calc(100dvh - var(--bottom-nav-h) - 30px - env(safe-area-inset-bottom));overflow:auto;}
@media(max-width:520px){
  :root{--bottom-nav-h:66px;}
  .bottom-nav{gap:2px;padding-top:6px;}
  .bottom-nav button{padding:5px 1px;}
  .bottom-nav button span{font-size:20px;}
  .bottom-nav button small{font-size:10px;}
  .menu-screen .hero-panel{padding-bottom:calc(78px + env(safe-area-inset-bottom));}
}
.royal-home{display:block!important;overflow:auto;padding:0 0 calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));background:radial-gradient(circle at 50% 18%,#495a87 0,#212443 34%,#100d1c 70%,#09070e 100%);}
.royal-home.hidden{display:none!important;}
.royal-sky{position:fixed;inset:0;overflow:hidden;pointer-events:none;}
.royal-sky:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(8,6,13,.4) 62%,#09070e 100%);}
.royal-moon{position:absolute;width:190px;height:190px;border-radius:50%;right:8%;top:8%;background:radial-gradient(circle at 38% 35%,#fff8d9,#d6d2c8 55%,#a8a5aa);box-shadow:0 0 70px rgba(220,226,255,.28);}
.royal-castle{position:absolute;left:50%;bottom:11%;width:min(700px,110vw);height:320px;transform:translateX(-50%);background:linear-gradient(90deg,transparent 5%,#090811 5% 95%,transparent 95%);clip-path:polygon(0 100%,8% 55%,15% 63%,22% 35%,30% 56%,39% 45%,46% 8%,54% 8%,61% 45%,70% 56%,78% 35%,85% 63%,92% 55%,100% 100%);opacity:.82;}
.royal-castle b{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 54px,rgba(255,183,78,.22) 55px 59px,transparent 60px 95px);}
.royal-raven{position:absolute;color:#090811;font-size:30px;animation:ravenFlight 12s linear infinite;}
.royal-raven.r1{top:17%;left:-8%;animation-delay:-2s;}
.royal-raven.r2{top:25%;left:-15%;animation-delay:-7s;transform:scale(.7);}
@keyframes ravenFlight{to{left:110%;transform:translateY(-35px)}}
.royal-fog{position:absolute;width:75%;height:90px;border-radius:50%;background:rgba(220,226,240,.08);filter:blur(20px);animation:fogDrift 18s ease-in-out infinite alternate;}
.royal-fog.f1{left:-20%;bottom:24%;}
.royal-fog.f2{right:-24%;bottom:13%;animation-delay:-8s;}
@keyframes fogDrift{to{transform:translateX(28%) scale(1.12)}}
.royal-home-content{position:relative;z-index:2;width:min(980px,100%);margin:auto;padding:calc(18px + env(safe-area-inset-top)) clamp(14px,3vw,30px) 26px;}
.royal-topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;}
.eyebrow{font-size:10px;letter-spacing:.22em;color:#d6bb7c;}
.royal-topbar h1{margin:3px 0;font-size:clamp(25px,5vw,42px);line-height:1;}
.hunter-chip{border:1px solid rgba(232,199,122,.4);background:rgba(9,7,14,.65);color:#f5e8c7;border-radius:999px;padding:8px 12px;display:flex;align-items:center;gap:7px;white-space:nowrap;}
.hero-overlook{min-height:280px;display:grid;grid-template-columns:minmax(100px,.7fr) minmax(220px,1.3fr);align-items:end;gap:18px;padding:28px 0 18px;}
.hero-silhouette{font-size:96px;filter:drop-shadow(0 18px 16px #000);text-align:center;animation:heroIdle 3.5s ease-in-out infinite;}
@keyframes heroIdle{50%{transform:translateY(-5px)}}
.hero-copy{padding:20px;border:1px solid rgba(232,199,122,.28);border-radius:22px;background:linear-gradient(135deg,rgba(15,11,22,.88),rgba(35,21,40,.72));backdrop-filter:blur(12px);}
.season-chip{display:inline-block;padding:5px 9px;border-radius:999px;background:rgba(145,66,79,.34);color:#f3d59b;font-size:10px;letter-spacing:.12em;}
.hero-copy h2{font-size:clamp(24px,5vw,40px);margin:12px 0 6px;}
.hero-copy p{margin:0 0 17px;color:#d2c6d5;}
.hero-actions{display:flex;gap:9px;flex-wrap:wrap;}
.royal-cta{border-radius:13px;padding:12px 16px;font:inherit;font-weight:700;}
.royal-cta{flex:1;border:1px solid #f0cf82;background:linear-gradient(180deg,#9b7131,#5d3515);color:#fff4d3;display:flex;justify-content:space-between;}
.royal-ghost{border-radius:13px;padding:12px 16px;font:inherit;font-weight:700;border:1px solid rgba(218,190,230,.35);background:#17101f;color:#eee1ef;}
.resource-ribbon{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:4px 0 12px;}
.resource-ribbon>div{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center;background:rgba(10,8,15,.76);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:10px;}
.resource-ribbon span{font-size:23px;grid-row:1/3;}
.resource-ribbon small{font-size:9px;color:#bdb1c0;text-transform:uppercase;letter-spacing:.08em;}
.resource-ribbon b{font-size:17px;color:#ffe5a2;}
.dashboard-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;}
.dashboard-grid button{text-align:left;color:inherit;}
.dashboard-feature{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;border:1px solid rgba(232,199,122,.42);border-radius:18px;padding:17px;background:linear-gradient(105deg,rgba(79,48,24,.88),rgba(29,19,36,.9));}
.feature-icon{font-size:42px;}
.dashboard-feature h3{margin:3px 0;}
.dashboard-feature p{margin:0;color:#cbbfc9;}
.dashboard-feature>b{color:#ffe3a0;}
.dashboard-card{display:flex;align-items:center;gap:12px;border:1px solid rgba(255,255,255,.12);border-radius:15px;padding:14px;background:rgba(13,10,20,.78);}
.dashboard-card>span{font-size:29px;}
.dashboard-card div{display:flex;flex-direction:column;min-width:0;}
.dashboard-card small{font-size:9px;letter-spacing:.1em;color:#bcaeaf;}
.dashboard-card strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:3px;}
.milestone-mark{text-align:center;font-size:9px;letter-spacing:.17em;color:#9d8e9e;padding:16px 0;}
.royal-nav{grid-template-columns:repeat(6,1fr);width:min(820px,100%);min-height:64px;border-radius:18px 18px 0 0;}
.royal-nav button{padding:5px 2px;}
.royal-nav button span{font-size:20px;}
.royal-nav button small{font-size:9px;}
.royal-nav button.active:after{content:"";width:18px;height:2px;border-radius:2px;background:var(--royal-gold);box-shadow:0 0 8px var(--royal-gold);}
.more-panel{max-width:900px;}
.more-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-top:18px;}
.more-tile{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;text-align:left;align-items:center;padding:16px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:linear-gradient(145deg,#1d1726,#100d16);color:inherit;}
.more-tile>span{font-size:32px;grid-row:1/3;}
.more-tile b{font-size:16px;}
.more-tile small{color:#b8acbb;}
.more-tile.danger{border-color:rgba(193,70,85,.35);}
.screen:not(#menu):not(#choices):not(#gameOver)>.panel{border-radius:22px;background:linear-gradient(160deg,rgba(26,20,35,.97),rgba(10,8,15,.98));box-shadow:0 22px 70px rgba(0,0,0,.42);}
.chapter-node{transition:.2s transform,.2s border-color;}
.chapter-node:not(.locked):active{transform:scale(.985);}
@media(max-width:620px){
  .royal-home-content{padding-left:12px;padding-right:12px;}
  .royal-topbar h1{font-size:23px;}
  .hunter-chip b{display:none;}
  .hero-overlook{min-height:225px;grid-template-columns:86px 1fr;gap:8px;padding-top:18px;}
  .hero-silhouette{font-size:63px;}
  .hero-copy{padding:14px;}
  .hero-copy h2{font-size:24px;}
  .hero-copy p{font-size:12px;}
  .hero-actions{display:grid;}
  .resource-ribbon{grid-template-columns:repeat(2,1fr);}
  .dashboard-grid{grid-template-columns:1fr;}
  .dashboard-feature{grid-column:auto;}
  .dashboard-card{min-height:65px;}
  .more-grid{grid-template-columns:1fr;}
  .royal-moon{width:130px;height:130px;right:-16px;top:8%;}
  .royal-castle{height:250px;}
  .royal-nav button small{font-size:8px;}
  .royal-nav button span{font-size:19px;}
}
@media(max-width:370px){
  .royal-topbar h1{font-size:20px;}
  .hero-overlook{grid-template-columns:70px 1fr;}
  .hero-silhouette{font-size:52px;}
  .hero-copy h2{font-size:20px;}
  .resource-ribbon>div{padding:8px;}
  .dashboard-feature{grid-template-columns:auto 1fr;}
  .dashboard-feature>b{display:none;}
}
.home-hidden-values,.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;}
.clean-home-stage{position:relative;min-height:430px;display:grid;grid-template-columns:92px minmax(0,1fr) 92px;align-items:center;gap:16px;padding:18px 0 12px;}
.home-centerpiece{text-align:center;max-width:520px;margin:auto;display:flex;flex-direction:column;align-items:center;gap:8px;text-shadow:0 3px 12px #000;}
.home-centerpiece .hero-silhouette{font-size:112px;margin-bottom:2px;}
.home-centerpiece h2{font-size:clamp(25px,5vw,42px);margin:3px 0;}
.home-centerpiece p{max-width:460px;margin:0 0 10px;color:#ded3df;}
.compact-continue{width:min(420px,100%);flex:none;}
.home-rail{display:flex;flex-direction:column;gap:10px;z-index:4;}
.rail-action{min-height:76px;border:1px solid rgba(232,199,122,.42);border-radius:16px;background:linear-gradient(180deg,rgba(24,18,33,.91),rgba(9,8,14,.94));color:#f3e8cb;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;box-shadow:0 8px 20px #0005;}
.rail-action span{font-size:27px;}
.rail-action small{font-size:10px;}
.rail-action:active{transform:scale(.97);}
.compact-ribbon{margin-top:0;}
.royal-home-content{min-height:calc(100dvh - var(--bottom-nav-h));display:flex;flex-direction:column;}
.milestone-mark{margin-top:auto;}
.portrait-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:8px!important;}
.card-type-corner{position:absolute;right:4px;bottom:4px;z-index:8;width:22px;height:22px;border-radius:7px;border:1px solid #f4d988;background:#0d0912e8;display:grid;place-items:center;font-size:12px;box-shadow:0 2px 8px #000;}
@media(max-width:700px){
  .clean-home-stage{min-height:390px;grid-template-columns:64px minmax(0,1fr) 64px;gap:7px;}
  .home-centerpiece .hero-silhouette{font-size:78px;}
  .home-centerpiece h2{font-size:25px;}
  .home-centerpiece p{font-size:12px;}
  .rail-action{min-height:61px;border-radius:13px;}
  .rail-action span{font-size:22px;}
  .rail-action small{font-size:8px;}
  .card-type-corner{width:16px;height:16px;font-size:9px;right:2px;bottom:2px;border-radius:5px;}
}
@media(max-width:390px){
  .clean-home-stage{grid-template-columns:56px minmax(0,1fr) 56px;}
  .rail-action{min-height:56px;}
  .home-centerpiece .hero-silhouette{font-size:66px;}
  .home-centerpiece h2{font-size:21px;}
}
html,body{width:100%;height:100%;min-height:100%;overflow:hidden!important;overscroll-behavior:none;position:fixed;inset:0;}
#app{width:100%;height:100dvh;min-height:0;overflow:hidden!important;overscroll-behavior:none;}
.screen{overflow:hidden!important;overscroll-behavior:none;}
.royal-home{overflow:hidden!important;height:100dvh;min-height:0;}
.royal-home-content{height:calc(100dvh - var(--bottom-nav-h) - env(safe-area-inset-bottom));min-height:0!important;overflow:hidden;padding-bottom:8px;}
.clean-home-stage{flex:1 1 auto;min-height:0;}
.compact-ribbon{flex:0 0 auto;}
.milestone-mark{flex:0 0 auto;padding:6px 0 2px;}
@media(max-height:700px){
  .royal-topbar{transform:scale(.92);transform-origin:top center;}
  .clean-home-stage{padding-top:4px;padding-bottom:3px;}
  .home-centerpiece .hero-silhouette{font-size:58px;}
  .home-centerpiece h2{font-size:20px;}
  .home-centerpiece p{display:none;}
  .rail-action{min-height:48px;}
  .compact-ribbon>div{padding:6px;}
  .milestone-mark{display:none;}
}
:root{--bg:#08070b;--panel:#141019;--panel2:#211623;--ink:#f4eadf;--muted:#b6a9b6;--red:#a51f35;--red2:#e14555;--gold:#d5b46c;--violet:#6b3b78;--line:#4a3549;--safe-top:max(10px,env(safe-area-inset-top));--safe-right:max(10px,env(safe-area-inset-right));--safe-bottom:max(10px,env(safe-area-inset-bottom));--safe-left:max(10px,env(safe-area-inset-left));--bottom-nav-h:64px;--royal-gold:#e8c77a;--royal-ink:#0b0911;--royal-panel:rgba(19,14,28,.88);--app-height:100dvh;}
html,body{height:var(--app-height)!important;max-height:var(--app-height)!important;width:100%!important;overflow:hidden!important;position:fixed!important;inset:0!important;touch-action:none;overscroll-behavior:none!important;}
#app{position:fixed!important;inset:0!important;width:100%!important;height:var(--app-height)!important;max-height:var(--app-height)!important;overflow:hidden!important;}
.screen{position:absolute!important;inset:0!important;width:100%!important;height:var(--app-height)!important;max-height:var(--app-height)!important;overflow:hidden!important;}
body.battle-mode{overflow:hidden;touch-action:none;}
body.battle-mode #app{height:100dvh;overflow:hidden;}
.battle-hud{padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))!important;display:flex!important;flex-direction:column;justify-content:space-between;pointer-events:none;}
.battle-hud.hidden{display:none!important;}
.battle-topbar{display:flex;justify-content:space-between;gap:8px;align-items:flex-start;pointer-events:none;}
.battle-status{display:flex;gap:5px;min-width:0;flex-wrap:wrap;}
.battle-pill{height:42px;min-width:64px;padding:5px 8px;border:1px solid #735b3c;border-radius:10px;background:linear-gradient(180deg,#17131de8,#09070ddd);box-shadow:0 4px 16px #0009;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:5px;align-items:center;pointer-events:auto;}
.battle-pill>span{grid-row:1/3;font-size:18px;}
.battle-pill small{font-size:8px;letter-spacing:.12em;color:#c9b995;}
.battle-pill strong{font-size:14px;color:#ffe3a0;line-height:1;}
.gate-pill{border-color:#8c3d4e;}
.wave-pill{border-color:#9d782c;}
.battle-controls{display:flex;gap:5px;pointer-events:auto;}
.battle-icon{width:42px;height:42px;border:1px solid #7b6040;border-radius:11px;background:linear-gradient(#211927,#0a080d);color:#f8dfaa;font:700 17px Georgia;box-shadow:0 4px 14px #0009;display:grid;place-items:center;padding:0;}
.battle-icon:active{transform:scale(.94);}
.danger-control{color:#ffb1ad;border-color:#843943;}
.speed-control span{font-size:13px;}
.wave-banner{position:absolute;top:20%;left:50%;transform:translate(-50%,-50%);min-width:190px;text-align:center;padding:12px 28px;background:linear-gradient(90deg,transparent,#120a14e8 18%,#120a14e8 82%,transparent);border-top:1px solid #bd8d3e;border-bottom:1px solid #bd8d3e;animation:waveBanner 1.7s ease both;pointer-events:none;}
.wave-banner span{display:block;font-size:10px;letter-spacing:.35em;color:#c6a86b;}
.wave-banner strong{font:700 30px Georgia;color:#fff2cb;text-shadow:0 2px 10px #000;}
@keyframes waveBanner{0%{opacity:0;transform:translate(-50%,-65%) scale(.9)}18%,72%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-35%) scale(1.05)}}
.boss-command{position:absolute;top:max(62px,calc(env(safe-area-inset-top) + 54px));left:50%;transform:translateX(-50%);width:min(72vw,650px);padding:8px 12px;border:1px solid #9c384d;border-radius:12px;background:#0c0710e8;box-shadow:0 7px 24px #000b;pointer-events:none;}
.boss-label{display:flex;justify-content:space-between;font-size:12px;color:#f2c7c7;text-transform:uppercase;letter-spacing:.08em;}
.boss-track{height:9px;margin-top:5px;border-radius:99px;overflow:hidden;background:#240c17;border:1px solid #5e2736;}
.boss-track i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#6e1737,#e04a6d,#ffb06a);transition:width .15s linear;}
.battle-bottom{display:flex;flex-direction:column;gap:6px;pointer-events:none;}
.battle-context{align-self:center;display:flex;align-items:center;gap:10px;padding:4px 10px;border:1px solid #4d4051;border-radius:9px;background:#09070dcf;font-size:10px;pointer-events:none;}
.battle-context span{white-space:nowrap;}
.hero-xp{width:92px;height:5px;border-radius:9px;background:#201724;overflow:hidden;}
.hero-xp i{display:block;height:100%;background:linear-gradient(90deg,#9d63db,#f0cf6d);}
.battle-hand{display:grid!important;grid-template-columns:repeat(6,minmax(0,76px))!important;gap:5px!important;justify-content:center!important;width:100%;pointer-events:auto;}
.battle-hand.hidden{display:none!important;}
.battle-hand .hand-card{height:70px!important;border-radius:10px!important;background:linear-gradient(#291728,#0b0910)!important;box-shadow:0 5px 16px #000a;}
.battle-hand .hand-card.active{transform:translateY(-8px);outline:2px solid #ffe18b;}
#placementBar{bottom:calc(88px + env(safe-area-inset-bottom));left:50%;right:auto;transform:translateX(-50%);width:min(94vw,620px);border-radius:12px;background:#09070dee;border:1px solid #8b6b3e;box-shadow:0 8px 24px #000b;pointer-events:auto;}
#towerInspector{top:auto!important;bottom:calc(88px + env(safe-area-inset-bottom));right:max(8px,env(safe-area-inset-right));width:min(300px,88vw);max-height:42vh;overflow:auto;border:1px solid #8b6b3e;border-radius:14px;background:linear-gradient(160deg,#17111deF,#08070bef);box-shadow:0 12px 34px #000c;padding:14px;pointer-events:auto;}
#towerInspector h3{margin:0 28px 8px 0;color:#ffe1a0;}
.inspect-close{position:absolute;right:8px;top:8px;width:28px;height:28px;border-radius:50%;border:1px solid #7f5d38;background:#23131b;color:#fff;}
.synergy-line{margin-top:8px;color:#e2c4ff;padding:7px;border-radius:8px;background:#2c1b2f;}
@media(max-width:700px){
  .battle-topbar{gap:4px;}
  .battle-status{display:grid;grid-template-columns:repeat(2,64px);gap:4px;}
  .battle-pill{height:35px;min-width:64px;padding:3px 6px;border-radius:8px;}
  .battle-pill>span{font-size:15px;}
  .battle-pill strong{font-size:12px;}
  .battle-pill small{font-size:7px;}
  .battle-controls{display:grid;grid-template-columns:repeat(2,36px);gap:4px;}
  .battle-icon{width:36px;height:36px;border-radius:9px;}
  .boss-command{top:max(86px,calc(env(safe-area-inset-top) + 78px));width:82vw;}
  .battle-context{font-size:9px;gap:7px;}
  .hero-xp{width:55px;}
  .battle-hand .hand-card{height:62px!important;padding:3px!important;}
  .battle-hand .hand-card .hicon{font-size:20px!important;}
  .battle-hand .hand-card .hcost{font-size:10px;}
  #placementBar{bottom:calc(73px + env(safe-area-inset-bottom));padding:6px 8px;}
  .placementBar .btn{min-height:34px;}
  #towerInspector{bottom:calc(75px + env(safe-area-inset-bottom));font-size:12px;}
}
.battle-cinematic{position:fixed;inset:0;z-index:95;display:grid;place-items:center;pointer-events:none;background:rgba(2,2,7,.18);overflow:hidden;}
.battle-cinematic.hidden{display:none!important;}
.cinematic-vignette{position:absolute;inset:0;background:radial-gradient(circle at center,transparent 20%,rgba(0,0,0,.82) 82%);animation:cinematicPulse 2.35s ease both;}
.cinematic-copy{position:relative;text-align:center;width:min(90vw,720px);padding:22px 28px;border-top:1px solid #b88a45;border-bottom:1px solid #b88a45;background:linear-gradient(90deg,transparent,#100a15e8 16%,#100a15e8 84%,transparent);animation:cinematicCopy 2.35s ease both;}
.cinematic-copy span{font-size:11px;letter-spacing:.38em;color:#d3b472;}
.cinematic-copy h2{margin:7px 0 4px;font:700 clamp(28px,6vw,54px) Georgia;color:#fff0c6;text-shadow:0 3px 22px #000;}
.cinematic-copy p{margin:0;color:#d8cad5;font-size:13px;}
@keyframes cinematicCopy{0%{opacity:0;transform:translateY(28px) scale(.94)}18%,70%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-18px) scale(1.04)}}
@keyframes cinematicPulse{0%{opacity:0}18%,76%{opacity:1}100%{opacity:0}}
.battle-hand .hand-card{transition:transform .22s ease,filter .22s ease,opacity .22s ease;}
.battle-hand .hand-card:nth-child(1){animation:handDeal .34s .02s both;}
.battle-hand .hand-card:nth-child(2){animation:handDeal .34s .07s both;}
.battle-hand .hand-card:nth-child(3){animation:handDeal .34s .12s both;}
.battle-hand .hand-card:nth-child(4){animation:handDeal .34s .17s both;}
.battle-hand .hand-card:nth-child(5){animation:handDeal .34s .22s both;}
.battle-hand .hand-card:nth-child(6){animation:handDeal .34s .27s both;}
@keyframes handDeal{from{opacity:0;transform:translateY(28px) scale(.85)}to{opacity:1;transform:none}}
#choicesCards .portrait-card:nth-child(2){animation-delay:.07s;}
#choicesCards .portrait-card:nth-child(3){animation-delay:.14s;}
@keyframes rewardDeal{from{opacity:0;transform:translateY(34px) rotateX(14deg) scale(.92)}to{opacity:1;transform:none}}
#gameOver{z-index:120!important;pointer-events:auto!important;touch-action:manipulation!important;}
#gameOver>.panel{pointer-events:auto!important;}
#gameOver button{pointer-events:auto!important;touch-action:manipulation!important;}
#menuBtn,#retryBtn{position:relative;z-index:2;min-height:48px;}
html,body{width:100%;height:100%;max-width:100%;overflow:hidden;overscroll-behavior:none;touch-action:none;}
body{position:fixed;inset:0;margin:0;}
#app{position:fixed;inset:0;width:100%;height:var(--app-height,100dvh);overflow:hidden;overscroll-behavior:none;}
.screen{position:absolute;inset:0;overflow:hidden;overscroll-behavior:none;}
.screen:not(.hidden){display:block;}
.screen>.panel{max-height:calc(var(--app-height,100dvh) - var(--bottom-nav-height,88px) - env(safe-area-inset-bottom) - 16px);overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
#bottomNav button,button,select,input{touch-action:manipulation;}
#game{touch-action:none;}
#gameOver{z-index:1200;background:#09070d;}
#gameOver>.panel{overflow:auto;max-height:calc(var(--app-height,100dvh) - 24px);}
.hidden{display:none!important;}
.favorite-corner{position:absolute;left:3px;top:3px;z-index:4;font-size:10px;color:#5d5863;text-shadow:0 1px 2px #000;pointer-events:none;}
.favorite-corner.is-favorite{color:#f4c85f;}
.detail-title-row{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.favorite-button{border:1px solid #806a42;background:#151019;color:#c8b98e;border-radius:9px;padding:7px 10px;font:inherit;font-size:11px;white-space:nowrap;}
.favorite-button.active{color:#ffe28b;border-color:#d2a84f;background:#362915;}
.card-flavor{display:block;margin-top:8px;color:#aa9c83;font-style:italic;line-height:1.45;}
@media(max-width:430px){
  .detail-title-row{align-items:flex-start;}
  .favorite-button{padding:6px 7px;font-size:9px;}
}
@media(max-width:700px){
  body.battle-mode .battle-hud{padding-top:max(7px,env(safe-area-inset-top))!important;}
  body.battle-mode .battle-context{padding:3px 8px!important;}
  body.battle-mode .battle-hand{gap:4px!important;}
}
.card-lock-overlay{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:8px;text-align:center;background:linear-gradient(180deg,#09070bcf,#100912ed);backdrop-filter:blur(1px);color:#ead9bd;border-radius:inherit;pointer-events:none;}
.card-lock-overlay b{font-size:12px;letter-spacing:.12em;color:#e4b95f;}
.card-lock-overlay small{font-size:8px;line-height:1.25;color:#c8b7a0;max-width:95%;}
body.battle-mode:before{content:'';position:fixed;inset:0;pointer-events:none;z-index:3;background:radial-gradient(circle at 50% 35%,transparent 28%,rgba(1,2,8,.24) 65%,rgba(0,0,0,.62) 100%);mix-blend-mode:multiply;}
body.battle-mode .battle-pill,body.battle-mode .battle-icon{background:linear-gradient(160deg,rgba(25,18,31,.94),rgba(7,7,13,.98))!important;box-shadow:inset 0 0 0 1px #e0bd6333,0 8px 22px #0008,0 0 18px #7d385322;}
body.battle-mode .battle-context{background:linear-gradient(90deg,#09070ee8,#17101ae8,#09070ee8)!important;backdrop-filter:blur(8px);margin-bottom:1px;border-color:#a48158!important;box-shadow:0 8px 30px #0009,inset 0 0 18px #9c6a4930;}
body.battle-mode .battle-hand .hand-card{min-height:58px;background:linear-gradient(155deg,#342039 0%,#17101f 48%,#08070d 100%)!important;border-color:#8d667e!important;box-shadow:inset 0 0 18px #c18ca016,0 7px 18px #000c!important;overflow:hidden;}
body.battle-mode .battle-hand .hand-card:before{content:'';position:absolute;inset:-60% -30%;background:linear-gradient(115deg,transparent 42%,rgba(255,236,184,.14) 49%,transparent 56%);transform:translateX(-45%);animation:relicSheen 4.8s ease-in-out infinite;pointer-events:none;}
body.battle-mode .battle-hand .hand-card.active{transform:translateY(-10px) scale(1.035);filter:brightness(1.16);box-shadow:0 12px 28px #000,0 0 22px #f0ca6f66!important;}
@keyframes relicSheen{0%,70%{transform:translateX(-55%)}100%{transform:translateX(55%)}}
#waveBanner{backdrop-filter:blur(10px);box-shadow:0 12px 40px #000b,inset 0 0 24px #b8886430;}
.essence-pill{position:relative;overflow:hidden;min-width:92px;}
.essence-pill>*{position:relative;z-index:2;}
.essence-pill:after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,#7d55ff,#e9dcff);box-shadow:0 0 10px #a887ff;}
.essence-fly{position:fixed;z-index:99999;pointer-events:none;color:#d9c6ff;font-size:22px;text-shadow:0 0 12px #a56eff,0 0 4px #fff;transition:transform .43s cubic-bezier(.2,.8,.2,1),opacity .4s ease;will-change:transform;transform:translate(0,0) scale(1);}
.battle-hand{grid-template-columns:repeat(8,minmax(48px,78px))!important;gap:5px!important;}
.battle-hand .hand-card{aspect-ratio:2.5/3.5!important;height:auto!important;min-height:70px!important;padding:4px!important;border-width:2px!important;}
.battle-hand .hand-card .hicon{font-size:clamp(19px,4vw,27px)!important;}
.battle-hand .hand-card .hname{display:block!important;font-size:8px!important;line-height:1.05;max-height:17px;overflow:hidden;}
.battle-hand .hand-card .hcost{right:3px;bottom:2px;font-size:9px!important;}
.battle-hand .hand-card .hlvl{position:absolute;left:3px;top:2px;font-size:8px;}
.battle-hand .hand-card.locked-cost{filter:grayscale(.65) brightness(.55);}
.battle-hand .hand-card.affordable{cursor:pointer;}
.battle-hand .hand-card.bonus-trap{border-style:dashed!important;box-shadow:inset 0 0 0 1px #d6c2a366,0 5px 14px #000a!important;}
@media(max-width:700px){
  .battle-hand{grid-template-columns:repeat(8,minmax(0,1fr))!important;}
  .battle-hand .hand-card{min-height:60px!important;}
  .battle-hand .hand-card .hname{display:none!important;}
}
.essence-pill .essence-fill{position:absolute!important;z-index:1!important;left:0;bottom:0;height:4px;width:16.67%;background:linear-gradient(90deg,#8058ff,#efe7ff);box-shadow:0 0 12px #a986ff;transition:width .25s ease;}
.essence-pill:after{display:none;}
body.battle-mode #hand{display:none!important;}
.essence-pill{min-width:118px!important;padding-left:36px!important;}
.essence-pill:before{content:'✦';position:absolute;left:8px;bottom:5px;width:22px;height:34px;border:2px solid #cdbbff;border-radius:45% 45% 38% 38%/22% 22% 68% 68%;display:flex;align-items:flex-end;justify-content:center;padding-bottom:3px;color:#fff;background:linear-gradient(to top,#8c61ff var(--vial,0%),#171021 var(--vial,0%));box-shadow:inset 0 0 10px #bca8ff55,0 0 10px #8e6cff55;font-size:10px;z-index:3;}
.essence-pill.vial-full{animation:vialPulse .7s ease-in-out infinite alternate;}
.essence-pill.vial-full:before{box-shadow:inset 0 0 14px #fff,0 0 20px #b798ff;}
@keyframes vialPulse{to{filter:brightness(1.35);transform:translateY(-1px)}}
#choices{background:rgba(4,3,7,.74);backdrop-filter:blur(4px);}
#choices .panel{max-width:760px;background:linear-gradient(180deg,#1b1221f2,#09070df5);border:1px solid #8e6a99;box-shadow:0 20px 70px #000;}
#choicesCards{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:clamp(10px,3vw,24px)!important;align-items:stretch;}
#choicesCards .portrait-card{animation:rewardDeal .38s ease both;aspect-ratio:2.5/3.5;min-height:0!important;}
@media(max-width:620px){
  #choices .panel{padding:16px 10px;}
  #choicesCards{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important;}
  #choicesCards .portrait-card{padding:6px!important;}
  #choicesCards .card-name{font-size:11px!important;}
  #choicesCards p{display:none!important;}
}
.ground-defense-zone{border:1px solid rgba(232,199,122,.25);border-radius:13px;padding:8px;background:linear-gradient(180deg,rgba(42,24,17,.42),rgba(12,8,14,.72));min-width:0;}
.ground-defense-heading{display:flex;flex-direction:column;gap:1px;margin-bottom:6px;color:#f0d999;}
.ground-defense-heading span{font-size:9px;font-weight:800;letter-spacing:.09em;}
.ground-defense-heading small{font-size:7px;color:#bcaebd;}
.portrait-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:8px!important;}
@media(max-width:700px){
  .ground-defense-zone{padding:4px;border-radius:8px;}
  .ground-defense-heading small{display:none;}
  .ground-defense-heading span{font-size:6px;}
  .portrait-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:5px!important;}
}
@media(max-width:390px){
  .portrait-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
}
@keyframes mergeReadyPulse{to{filter:brightness(1.12);box-shadow:0 0 26px #ffd45baa,inset 0 1px #fff9}}
@media (max-width:700px){
  html,body,#app{width:100%!important;max-width:100%!important;}
  .ground-defense-heading small{display:none!important;}
}
.screen.hidden{display:none!important;}
.hero-support-heading{display:none;}
.campaign-panel{max-width:1080px;background:radial-gradient(circle at 50% 0,#34233555,transparent 42%),linear-gradient(180deg,#100c14f5,#17101af5);}
.chapter-map{display:flex;gap:18px;margin:18px 0;position:relative;flex-direction:column;padding:20px 12px 34px;overflow:visible;}
.chapter-map:before{content:"";position:absolute;left:50%;top:82px;bottom:28px;width:4px;transform:translateX(-50%);background:linear-gradient(#6d5844,#c8a562,#6d5844);box-shadow:0 0 18px #b9914d55;border-radius:99px;}
.campaign-map-title{text-align:center;position:relative;z-index:1;padding:4px 0 16px;}
.campaign-map-title span{display:block;font-size:.72rem;letter-spacing:.28em;color:#bd9d64;}
.campaign-map-title strong{display:block;font-family:Georgia,serif;font-size:1.3rem;margin-top:5px;}
.chapter-node.map-node{position:relative;z-index:1;width:calc(50% - 34px);grid-template-columns:70px 1fr;gap:14px;padding:14px 14px 14px 16px;min-height:170px;box-shadow:0 15px 35px #0008;}
.chapter-node.map-left{align-self:flex-start;}
.chapter-node.map-right{align-self:flex-end;}
.chapter-node.map-right .map-path-dot{left:-43px;}
.chapter-node.map-left .map-path-dot{right:-43px;}
.map-path-dot{position:absolute;top:28px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#0a080d;border:2px solid #c4a15e;color:#f6df9f;font-weight:900;box-shadow:0 0 0 6px #130e16,0 0 22px #d2ad6155;}
.chapter-art{height:100%;min-height:140px;border-radius:10px;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--chapter-accent) 55%,transparent),transparent 52%),linear-gradient(160deg,#201525,#09070c);border:1px solid color-mix(in srgb,var(--chapter-accent) 65%,#7a6040);font-size:2.3rem;box-shadow:inset 0 0 30px #0009;}
.chapter-copy h3{font-size:1.08rem;}
.chapter-stars{color:#e7bc54;letter-spacing:.12em;font-size:1.05rem;margin:2px 0 6px;text-shadow:0 0 10px #d7a83c66;}
.star-objectives{display:grid;gap:3px;margin-top:8px;color:#bcaec0;}
.star-objectives small{font-size:.67rem;}
.chapter-node.map-node>.btn{grid-column:1/-1;width:100%;min-height:40px;}
.chapter-node.map-node.completed{background:linear-gradient(135deg,#171119f2,#2b201cf2);border-color:#c8a65b;}
.chapter-node.map-node.locked .chapter-art{filter:grayscale(1);}
@media(max-width:760px){
  .chapter-map:before{left:18px;}
  .chapter-node.map-right .map-path-dot,.chapter-node.map-left .map-path-dot{left:-39px;right:auto;}
  .chapter-art{min-height:125px;}
  .chapter-node.map-node{width:calc(100% - 40px);align-self:flex-end!important;grid-template-columns:62px 1fr;min-height:155px;}
}
@media(max-width:480px){
  .chapter-map{padding-left:36px;padding-right:0;}
  .chapter-map:before{left:17px;}
  .chapter-node.map-node{width:100%;grid-template-columns:52px 1fr;padding:11px;gap:10px;}
  .chapter-art{min-height:112px;font-size:1.8rem;}
  .chapter-copy p{font-size:.78rem;margin-bottom:7px;}
  .chapter-meta span{font-size:.62rem;}
  .star-objectives{display:none;}
  .campaign-map-title strong{font-size:1.05rem;}
}
.audio-fab{position:fixed;right:max(12px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));z-index:1400;width:42px;height:42px;border-radius:50%;border:1px solid #b99a66;background:linear-gradient(#24182c,#100b16);color:#f3dca4;font:700 20px Georgia;box-shadow:0 6px 22px #0009;touch-action:manipulation;}
.battle-mode .audio-fab{top:max(68px,calc(env(safe-area-inset-top) + 56px));}
.audio-panel{position:fixed;z-index:1500;right:max(12px,env(safe-area-inset-right));top:max(62px,calc(env(safe-area-inset-top) + 50px));width:min(300px,calc(100vw - 24px));padding:14px;border:1px solid #806a4b;border-radius:14px;background:linear-gradient(155deg,#211827f5,#0e0a13f7);box-shadow:0 18px 50px #000c;color:#eadfc8;}
.audio-panel.hidden{display:none;}
.audio-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;color:#f4dba0;}
.audio-head button{border:0;background:transparent;color:#fff;font-size:24px;}
.audio-panel label{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:7px 0;border-top:1px solid #ffffff12;font-size:13px;}
.audio-panel input[type=range]{width:130px;}
.audio-panel small{display:block;margin-top:8px;color:#bcae9d;line-height:1.35;}
.village-home-screen{position:relative;overflow:hidden!important;padding:0!important;background:#10141a;color:#f8ecd1;isolation:isolate;}
.village-sky-layer{position:absolute;inset:0 0 48%;background:linear-gradient(#182131,#3c4350 58%,#7b6250);z-index:-3;overflow:hidden;}
.village-moon{position:absolute;width:74px;height:74px;border-radius:50%;right:9%;top:8%;background:#eee7cc;box-shadow:0 0 38px #d8d0a866;}
.village-cloud{position:absolute;width:180px;height:24px;border-radius:50%;background:#d9d1c822;filter:blur(4px);animation:vCloud 24s linear infinite;}
.vc1{top:15%;left:-20%;}
.vc2{top:31%;left:38%;animation-duration:32s;}
@keyframes vCloud{to{transform:translateX(135vw)}}
.village-hud{height:70px;position:absolute;z-index:20;left:0;right:0;top:0;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;padding:8px max(12px,env(safe-area-inset-left));background:linear-gradient(#0a0d13f2,#121620d9);border-bottom:1px solid #d4a85e55;backdrop-filter:blur(8px);}
.village-brand h1{font-size:clamp(20px,4vw,34px);margin:0;letter-spacing:.08em;}
.village-brand .eyebrow{font-size:9px;color:#ddb970;}
.village-profile{position:static!important;}
.village-resources{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.village-resources span{background:#090b10cc;border:1px solid #8f744b66;border-radius:8px;padding:6px 9px;font-size:12px;white-space:nowrap;}
.pixel-village{position:absolute;inset:70px 0 82px;overflow:hidden;background:linear-gradient(155deg,#556a45,#344333 68%,#273327);image-rendering:pixelated;touch-action:manipulation;}
.village-ground{position:absolute;inset:0;background:radial-gradient(circle at 22% 34%,#75835a55 0 2px,transparent 3px),radial-gradient(circle at 78% 69%,#26382777 0 2px,transparent 3px);background-size:24px 24px,31px 31px;opacity:.9;}
.village-path{position:absolute;background:#a99372;border:4px solid #77664f;box-shadow:inset 0 0 0 3px #c5b08c55;z-index:1;}
.path-main{width:13%;height:105%;left:44%;top:-3%;transform:rotate(3deg);}
.path-cross{width:78%;height:12%;left:11%;top:54%;transform:rotate(-2deg);}
.village-stream{position:absolute;right:-2%;top:0;width:18%;height:100%;background:linear-gradient(90deg,#263f52,#477a91,#243b4d);border-left:5px solid #6e6c57;transform:skewX(-4deg);z-index:2;}
.village-stream i{position:absolute;width:50px;height:4px;background:#b8dce566;animation:water 3s linear infinite;}
.village-stream i:nth-child(1){top:20%;}
.village-stream i:nth-child(2){top:52%;left:40%;}
.village-stream i:nth-child(3){top:78%;left:10%;}
@keyframes water{50%{transform:translateX(25px)}}
.pixel-bridge{position:absolute;z-index:5;right:10%;top:52%;width:15%;height:15%;background:repeating-linear-gradient(90deg,#74513b 0 9px,#4e3428 10px 12px);border:4px solid #3d2921;transform:rotate(-3deg);}
.village-building{position:absolute;z-index:8;border:0;background:transparent;color:#fff;text-align:center;cursor:pointer;filter:drop-shadow(0 8px 8px #0008);transition:transform .18s ease,filter .18s;}
.village-building:hover,.village-building:focus-visible{transform:translateY(-5px) scale(1.03);filter:drop-shadow(0 0 12px #f5c76d);}
.village-building b,.village-building small{display:block;background:#101218e8;border:1px solid #b8955b88;padding:2px 6px;}
.village-building b{font-size:11px;border-radius:7px 7px 0 0;}
.village-building small{font-size:8px;color:#d6bd8d;border-top:0;border-radius:0 0 7px 7px;}
.building-art{display:block;position:relative;width:100%;height:72%;background:linear-gradient(90deg,#51463e,#746255);border:4px solid #352c29;box-shadow:inset 0 0 0 3px #937c62;}
.building-art i{position:absolute;display:block;}
.building-art .roof{left:-8%;right:-8%;top:-20%;height:34%;background:#312a32;clip-path:polygon(50% 0,100% 100%,0 100%);border-bottom:4px solid #1d1820;}
.building-art .door{width:18%;height:33%;bottom:0;left:41%;background:#2b1d19;border:2px solid #b2874d;}
.building-art .window{width:13%;height:15%;background:#ffc75a;box-shadow:0 0 9px #ffae3d;}
.building-art .w1{left:18%;top:47%;}
.building-art .w2{right:18%;top:47%;}
.building-art .chimney{width:10%;height:38%;right:15%;top:-38%;background:#3b3433;}
.smoke:after{content:"";position:absolute;width:18px;height:32px;left:-5px;top:-28px;background:#c4c0b255;border-radius:50%;filter:blur(4px);animation:smoke 3s ease-in-out infinite;}
@keyframes smoke{50%{transform:translate(8px,-13px) scale(1.3);opacity:.25}}
.cathedral-building .building-art{height:80%;background:#656067;}
.cathedral-building .spire{bottom:78%;width:20%;height:55%;background:#45404a;clip-path:polygon(50% 0,100% 100%,0 100%);}
.cathedral-building .s1{left:8%;}
.cathedral-building .s2{left:40%;height:75%;}
.cathedral-building .s3{right:8%;}
.rose-window{width:25%;aspect-ratio:1;left:37%;top:20%;border-radius:50%;background:#8e2748;box-shadow:0 0 10px #b64764;}
.tavern-building{left:14%;top:27%;width:17%;height:21%;}
.barracks-building{left:66%;top:23%;width:17%;height:22%;}
.smith-building{left:17%;top:64%;width:16%;height:20%;}
.library-building{left:3%;top:49%;width:15%;height:19%;}
.watch-building{right:3%;top:40%;width:12%;height:24%;}
.barracks-building .tower{bottom:0;width:21%;height:86%;background:#56505a;}
.barracks-building .t1{left:4%;}
.barracks-building .t2{right:4%;}
.hall-building .clock{width:20%;aspect-ratio:1;border-radius:50%;background:#e1c27e;left:40%;top:15%;border:2px solid #453829;}
.hall-building .banner{width:12%;height:30%;right:12%;top:20%;background:#772943;}
.smith-building .forge-glow{width:28%;height:20%;left:12%;bottom:12%;background:#ff7a25;box-shadow:0 0 14px #ff6b20;}
.market-building .building-art{background:transparent;border:0;box-shadow:none;}
.market-building .awning{left:5%;right:5%;top:5%;height:28%;background:repeating-linear-gradient(90deg,#7d263e 0 16px,#c5a46b 16px 32px);clip-path:polygon(5% 0,95% 0,100% 100%,0 100%);}
.market-building .stall{left:10%;right:10%;top:31%;bottom:5%;background:#745440;border:4px solid #3b291f;}
.market-building .crate{width:18%;height:22%;background:#9a6d3e;bottom:2%;}
.market-building .c1{left:4%;}
.market-building .c2{right:4%;}
.watch-building .building-art{height:84%;background:transparent;border:0;box-shadow:none;}
.watch-building .tower{left:25%;right:25%;bottom:0;height:80%;background:#59545b;border:4px solid #312c32;}
.watch-building .roof{top:0;left:12%;right:12%;height:29%;}
.watch-building .bell{width:18%;height:16%;left:41%;top:31%;background:#d4a94f;border-radius:50% 50% 20% 20%;}
.town-square{position:absolute;z-index:4;left:42%;top:54%;width:15%;height:18%;border-radius:50%;background:#82755f;border:4px solid #625744;}
.fountain{position:absolute;width:34%;aspect-ratio:1;border-radius:50%;left:33%;top:16%;background:#496d7d;border:5px solid #aaa18c;box-shadow:0 0 0 5px #514b42;}
.square-label{position:absolute;bottom:-18px;width:100%;font-size:8px;text-align:center;color:#f0d69e;}
.villager,.hero-villager{position:absolute;z-index:12;width:13px;height:21px;}
.villager i{display:block;width:11px;height:16px;background:#632c45;border-radius:6px 6px 2px 2px;border-top:5px solid #d6ae83;box-shadow:0 2px #111;}
.hero-villager i{display:block;width:11px;height:16px;background:#252b37;border-radius:6px 6px 2px 2px;border-top:5px solid #d6ae83;box-shadow:0 2px #111;border-top-color:#d6b18e;}
.hero-villager b{position:absolute;top:20px;left:-15px;font-size:7px;background:#111b;padding:1px 3px;}
.hero-home{left:48%;top:68%;animation:heroIdle 2s ease-in-out infinite;}
.villager-a{left:28%;top:52%;animation:walkA 13s linear infinite;}
.villager-b{left:62%;top:48%;animation:walkB 15s linear infinite;}
.villager-c{left:37%;top:76%;animation:walkC 17s linear infinite;}
.villager-d{left:70%;top:74%;animation:walkD 12s linear infinite;}
@keyframes heroIdle{50%{transform:translateY(-2px)}}
@keyframes walkA{50%{transform:translate(230px,60px)}100%{transform:translate(0)}}
@keyframes walkB{50%{transform:translate(-180px,120px)}100%{transform:translate(0)}}
@keyframes walkC{50%{transform:translate(150px,-150px)}100%{transform:translate(0)}}
@keyframes walkD{50%{transform:translate(-130px,-70px)}100%{transform:translate(0)}}
.chicken{position:absolute;z-index:12;color:#fff;font-size:22px;text-shadow:2px 2px #c58b46;}
.chicken-a{left:32%;top:73%;animation:chick 5s infinite;}
.chicken-b{left:35%;top:77%;animation:chick 6s reverse infinite;}
@keyframes chick{50%{transform:translateX(40px)}}
.tree{position:absolute;z-index:6;width:34px;height:46px;background:#303b2b;border-radius:50% 50% 40% 40%;border:4px solid #1b251b;box-shadow:inset 8px 0 #4c5939;}
.tree:after{content:"";position:absolute;width:8px;height:20px;background:#4b3626;left:9px;bottom:-16px;}
.lantern-post{position:absolute;z-index:9;width:4px;height:34px;background:#202024;}
.lantern-post:before{content:"";position:absolute;width:10px;height:12px;left:-3px;top:-3px;background:#ffd46a;border:2px solid #3a3026;box-shadow:0 0 12px #ffba42;animation:lantern 1.8s alternate infinite;}
@keyframes lantern{to{filter:brightness(1.35)}}
.village-message{position:absolute;z-index:20;left:10px;bottom:62px;display:flex;gap:10px;align-items:center;max-width:min(520px,75vw);background:#090c11df;border:1px solid #b58f5466;border-radius:10px;padding:8px 12px;backdrop-filter:blur(6px);}
.village-message h2{font-size:14px;margin:0;}
.village-message p{font-size:9px;margin:2px 0;color:#cbbd9e;}
.village-message>span{font-size:8px;color:#edc574;border:1px solid #9f7b43;padding:4px;border-radius:4px;}
.village-version{position:absolute;right:10px;bottom:64px;z-index:20;}
@media(max-width:700px){
  .village-hud{height:62px;grid-template-columns:1fr auto;}
  .village-resources{position:absolute;top:62px;left:0;right:0;background:#0b0d12cc;padding:4px 8px;justify-content:center;}
  .village-resources span{padding:3px 6px;font-size:10px;}
  .pixel-village{inset:98px 0 72px;}
  .village-profile{font-size:9px;}
  .cathedral-building{width:21%;left:39%;}
  .tavern-building{width:21%;left:8%;}
  .barracks-building{width:21%;left:69%;}
  .hall-building{width:23%;left:37%;}
  .smith-building{width:20%;left:10%;}
  .market-building{width:22%;left:61%;}
  .library-building{width:18%;left:1%;}
  .watch-building{width:15%;right:1%;}
  .village-building b{font-size:8px;padding:2px;}
  .village-message{bottom:58px;max-width:72vw;padding:5px 7px;}
  .village-message h2{font-size:11px;}
  .village-message p{font-size:7px;}
  .village-version{font-size:7px;bottom:58px;}
  .villager{transform:scale(.8);}
}
@media(max-height:600px){
  .village-message,.village-version{display:none;}
  .pixel-village{bottom:52px;}
}
.village-home-screen{overflow:hidden!important;}
.pixel-village{overflow:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;scrollbar-width:none;}
.pixel-village::-webkit-scrollbar{display:none;}
.village-world{position:relative;width:1180px;height:1540px;min-width:1180px;min-height:1540px;background:linear-gradient(155deg,#556a45,#344333 68%,#273327);image-rendering:pixelated;overflow:hidden;}
.village-ground,.village-path,.village-stream,.pixel-bridge,.town-square,.villager,.hero-villager,.chicken,.tree,.lantern-post{pointer-events:none;}
.village-building{pointer-events:auto!important;z-index:30!important;width:190px!important;height:220px!important;}
.tavern-building{left:170px!important;top:440px!important;}
.barracks-building{left:805px!important;top:425px!important;}
.smith-building{left:145px!important;top:850px!important;}
.library-building{left:100px!important;top:175px!important;}
.watch-building{left:955px!important;top:180px!important;width:150px!important;height:280px!important;}
.path-main{width:130px!important;height:1450px!important;left:525px!important;top:30px!important;}
.path-cross{width:930px!important;height:125px!important;left:125px!important;top:690px!important;}
.village-stream{left:1020px!important;right:auto!important;width:165px!important;height:1540px!important;}
.pixel-bridge{left:920px!important;right:auto!important;top:705px!important;width:180px!important;height:125px!important;}
.town-square{left:485px!important;top:785px!important;width:210px!important;height:210px!important;}
.hero-home{left:580px!important;top:1005px!important;}
.villager-a{left:350px!important;top:700px!important;}
.villager-b{left:770px!important;top:680px!important;}
.villager-c{left:425px!important;top:1040px!important;}
.villager-d{left:775px!important;top:1080px!important;}
.village-build-btn{position:sticky;z-index:80;bottom:16px;border:1px solid #d6a956;background:linear-gradient(#2b211d,#0d1016);color:#f4d58a;border-radius:12px;box-shadow:0 8px 20px #0009;font-weight:800;letter-spacing:.08em;}
.village-build-btn{left:50%;transform:translateX(-50%);padding:12px 22px;}
.village-center-btn{position:sticky;z-index:80;bottom:16px;border:1px solid #d6a956;background:linear-gradient(#2b211d,#0d1016);color:#f4d58a;border-radius:12px;box-shadow:0 8px 20px #0009;font-weight:800;letter-spacing:.08em;left:calc(100% - 60px);padding:11px 15px;margin-left:auto;}
.village-build-tray{position:fixed;z-index:120;left:12px;right:12px;bottom:84px;background:#0b0d14f2;border:1px solid #b78b4f;border-radius:14px;padding:12px;box-shadow:0 16px 44px #000c;backdrop-filter:blur(10px);}
.build-tray-head{display:flex;justify-content:space-between;align-items:center;color:#f1cf82;}
.build-tray-head button{border:0;background:transparent;color:#fff;font-size:24px;}
.village-build-tray p{font-size:11px;color:#c7b99c;}
.build-tray-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.build-tray-grid button{background:#17141c;border:1px solid #6d5264;border-radius:9px;color:#fff;padding:8px;display:grid;gap:2px;text-align:center;}
.build-tray-grid span{font-size:24px;}
.build-tray-grid small{font-size:8px;color:#cdbb91;}
.build-tray-grid button.selected{border-color:#ffd36a;box-shadow:0 0 14px #d99a2d88;}
.build-hint{margin-top:8px;font-size:10px;color:#e8c77e;text-align:center;}
.village-plots{position:absolute;inset:0;pointer-events:none;z-index:18;}
.village-plot{position:absolute;width:150px;height:150px;border:2px dashed #d4b56c66;border-radius:18px;background:#20261f55;pointer-events:auto;color:#e8d3a1;display:flex;align-items:center;justify-content:center;text-align:center;}
.village-plot.empty::after{content:'BUILD PLOT';font-size:9px;letter-spacing:.12em;opacity:.7;}
.village-plot:not(.empty){border-style:solid;background:#263126;}
.village-plot .placed-building{display:grid;place-items:center;gap:5px;}
@media(max-width:700px){
  .village-building b{font-size:11px!important;}
  .village-build-tray{bottom:76px;}
  .build-tray-grid{grid-template-columns:repeat(2,1fr);}
  .village-message,.village-version{display:none;}
}
.pixel-village{overflow:hidden!important;touch-action:none!important;cursor:grab;background:#273327;}
.pixel-village.is-panning{cursor:grabbing;}
.village-world{position:absolute!important;left:0;top:0;width:1600px!important;height:1900px!important;min-width:1600px!important;min-height:1900px!important;transform-origin:0 0;will-change:transform;overflow:hidden;background:radial-gradient(circle at 18% 16%,#64785155 0 2px,transparent 3px),
    radial-gradient(circle at 73% 64%,#667a5355 0 2px,transparent 3px),
    linear-gradient(155deg,#556a45,#344333 68%,#273327);background-size:34px 34px,42px 42px,auto;}
.village-building{width:132px!important;height:154px!important;z-index:35!important;touch-action:none;-webkit-tap-highlight-color:transparent;}
.village-building .building-art{height:73%;}
.village-building b{font-size:10px!important;padding:2px 5px!important;}
.village-building small{font-size:7px!important;padding:2px 4px!important;}
.library-building{left:245px!important;top:250px!important;}
.barracks-building{left:1195px!important;top:270px!important;}
.tavern-building{left:405px!important;top:640px!important;}
.smith-building{left:240px!important;top:980px!important;}
.watch-building{left:1370px!important;top:610px!important;width:105px!important;height:205px!important;}
.path-main{left:745px!important;top:20px!important;width:110px!important;height:1780px!important;}
.path-cross{left:125px!important;top:775px!important;width:1340px!important;height:105px!important;}
.village-stream{left:1450px!important;top:0!important;width:150px!important;height:1900px!important;}
.pixel-bridge{left:1378px!important;top:770px!important;width:190px!important;height:112px!important;}
.town-square{left:690px!important;top:875px!important;width:220px!important;height:220px!important;}
.hero-home{left:792px!important;top:1110px!important;}
.villager-a{left:520px!important;top:770px!important;}
.villager-b{left:1030px!important;top:800px!important;}
.villager-c{left:610px!important;top:1220px!important;}
.villager-d{left:1040px!important;top:1260px!important;}
.tree-a{left:100px!important;top:100px!important;}
.tree-b{left:530px!important;top:135px!important;}
.tree-c{left:1260px!important;top:120px!important;}
.tree-d{left:135px!important;top:1550px!important;}
.tree-e{left:1300px!important;top:1570px!important;}
.lp1{left:675px!important;top:730px!important;}
.lp2{left:925px!important;top:730px!important;}
.lp3{left:675px!important;top:1110px!important;}
.lp4{left:925px!important;top:1120px!important;}
.village-plot{width:112px!important;height:112px!important;border-radius:12px!important;}
.village-plot .placed-building span{font-size:38px!important;filter:drop-shadow(0 5px 3px #0008);}
.village-plot .placed-building b{font-size:9px!important;background:#0c0f13df;padding:3px 7px;border:1px solid #9b7948;border-radius:7px;}
.plot-0{left:390px!important;top:1300px!important;}
.plot-1{left:560px!important;top:1430px!important;}
.plot-2{left:760px!important;top:1390px!important;}
.plot-3{left:1010px!important;top:1340px!important;}
.plot-4{left:170px!important;top:1280px!important;}
.plot-5{left:430px!important;top:330px!important;}
.plot-6{left:1040px!important;top:350px!important;}
.plot-7{left:1210px!important;top:760px!important;}
.village-build-btn{position:absolute!important;left:50%!important;bottom:14px!important;transform:translateX(-50%)!important;z-index:90!important;}
.village-camera-controls button{width:42px;height:42px;border-radius:12px;border:1px solid #d6a956;background:linear-gradient(#2b211d,#0d1016);color:#f4d58a;font-weight:900;font-size:20px;box-shadow:0 8px 20px #0009;}
.village-camera-controls button:active{transform:scale(.94);}
@media(max-width:700px){
  .village-world{width:1600px!important;height:1900px!important;min-width:1600px!important;min-height:1900px!important;}
  .village-building b{font-size:10px!important;}
  .village-building small{font-size:7px!important;}
  .village-camera-controls{right:8px;bottom:10px;}
  .village-camera-controls button{width:39px;height:39px;}
}
.pixel-village{overflow:hidden!important;touch-action:none!important;user-select:none;-webkit-user-select:none;contain:layout paint;}
.village-world{transform-origin:0 0!important;will-change:transform;}
.village-building{width:112px!important;height:132px!important;min-width:0!important;min-height:0!important;padding:0!important;pointer-events:auto!important;touch-action:none!important;}
.village-building::after{content:"";position:absolute;inset:-12px;border-radius:14px;}
.village-building:active{filter:drop-shadow(0 0 14px #f5c76d);}
.cathedral-building{left:728px!important;top:120px!important;width:145px!important;height:198px!important;}
.library-building{left:270px!important;top:315px!important;}
.barracks-building{left:1210px!important;top:330px!important;}
.tavern-building{left:430px!important;top:650px!important;}
.hall-building{left:744px!important;top:645px!important;width:126px!important;height:148px!important;}
.smith-building{left:275px!important;top:1010px!important;}
.market-building{left:1125px!important;top:1030px!important;width:126px!important;height:142px!important;}
.watch-building{left:1360px!important;top:620px!important;width:92px!important;height:176px!important;}
.village-building b{font-size:9px!important;line-height:1.15!important;}
.village-building small{font-size:6px!important;line-height:1.15!important;}
.village-camera-controls{position:absolute!important;right:10px!important;bottom:12px!important;z-index:500!important;display:flex;flex-direction:column;gap:7px;align-items:center;}
.village-camera-controls button{touch-action:manipulation!important;pointer-events:auto!important;}
.village-zoom-readout{min-width:42px;padding:3px 4px;border-radius:8px;background:#090b10dc;border:1px solid #8f744b88;color:#f4d58a;font:700 9px/1 system-ui;text-align:center;box-shadow:0 4px 12px #0008;}
.village-build-btn{z-index:500!important;touch-action:manipulation!important;}
.village-build-tray{z-index:600!important;touch-action:manipulation!important;}
.village-plot{pointer-events:auto!important;touch-action:none!important;}
.village-plot.empty{box-shadow:inset 0 0 0 1px #f2d48a22;}
.village-plot.empty:active{border-color:#f3cf75!important;background:#66552d66!important;}
@media(max-width:700px){
  .village-building{width:104px!important;height:124px!important;}
  .cathedral-building{width:138px!important;height:190px!important;}
  .hall-building,.market-building{width:118px!important;}
  .watch-building{width:88px!important;height:168px!important;}
  .village-building::after{inset:-16px;}
}
.pixel-village[data-village-ready="standalone"]{touch-action:none!important;overflow:hidden!important;}
.pixel-village[data-village-ready="standalone"] .village-world,.pixel-village[data-village-ready="standalone"] .village-building,.pixel-village[data-village-ready="standalone"] .village-camera-controls,.pixel-village[data-village-ready="standalone"] .village-build-btn{pointer-events:auto!important;}
.village-build-status{position:absolute;z-index:510;left:50%;bottom:76px;transform:translateX(-50%);width:min(520px,calc(100% - 110px));display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:9px 12px;border:1px solid #d4aa59;border-radius:12px;background:#0b0d14ee;color:#f5dfae;box-shadow:0 10px 28px #000b;pointer-events:auto;font:700 10px/1.25 system-ui;}
.village-build-status.hidden{display:none;}
.village-build-status b{color:#ffd77d;letter-spacing:.12em;}
.village-build-status span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.village-build-status button{border:1px solid #8d6845;border-radius:8px;background:#24191b;color:#f7db9c;padding:7px 9px;font-weight:800;}
.village-build-btn.active{border-color:#f0cc70!important;box-shadow:0 0 20px #f0b84288,0 8px 20px #0009!important;}
.village-plot{opacity:.18;transition:opacity .18s,transform .18s,box-shadow .18s,border-color .18s;background:#161d19aa!important;display:grid!important;place-items:center!important;align-content:center!important;gap:3px!important;}
.build-mode-active .village-plot.empty{opacity:.72;}
.build-mode-active .village-plot.empty.available{opacity:1;border-color:#e9cc76!important;background:#394528cc!important;box-shadow:0 0 0 4px #e3c46b22,0 0 24px #d7bc5d88!important;animation:vPlotPulse 1.25s ease-in-out infinite;}
.village-plot.built{opacity:1!important;border-style:solid!important;}
.village-plot .plot-plus{font:900 28px/1 system-ui;color:#f1d27d;}
.village-plot>small{font:800 7px/1 system-ui;letter-spacing:.12em;color:#d9c28c;}
.village-plot .placed-building small{font:700 6px/1.1 system-ui;color:#b7d09c;background:#111914dd;border-radius:5px;padding:2px 4px;}
.village-plot.constructing{opacity:1!important;animation:vConstruct .65s ease both!important;}
.village-plot.denied{animation:vDenied .35s ease!important;border-color:#ef6f6f!important;}
@keyframes vPlotPulse{50%{transform:scale(1.045);box-shadow:0 0 0 7px #e3c46b14,0 0 34px #d7bc5daa}}
@keyframes vConstruct{0%{transform:scale(.75);filter:brightness(2)}55%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes vDenied{25%{transform:translateX(-7px)}50%{transform:translateX(7px)}75%{transform:translateX(-4px)}}
@media(max-width:700px){
  .village-build-status{bottom:68px;width:calc(100% - 88px);grid-template-columns:1fr auto;}
  .village-build-status b{display:none;}
  .village-build-status span{white-space:normal;font-size:9px;}
  .village-build-status button{padding:6px 7px;font-size:8px;}
}
.village-economy-strip{position:absolute;z-index:44;top:10px;left:50%;transform:translateX(-50%);display:grid;grid-template-columns:repeat(4,minmax(64px,1fr));width:min(94%,620px);padding:7px 9px;border:1px solid rgba(208,168,91,.58);border-radius:14px;background:linear-gradient(180deg,rgba(15,17,24,.96),rgba(9,10,16,.92));box-shadow:0 7px 22px rgba(0,0,0,.42);color:#f4dfae;touch-action:manipulation;}
.village-economy-strip>span{display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;column-gap:5px;border-right:1px solid rgba(205,168,91,.2);font-size:14px;}
.village-economy-strip>span:last-child{border-right:0;}
.village-economy-strip b{font-size:14px;color:#fff6da;}
.village-economy-strip small{grid-column:1/-1;font-size:9px;color:#c7ae76;letter-spacing:.04em;line-height:1.1;}
.village-economy-panel{position:absolute;z-index:90;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92%,620px);max-height:84%;overflow:auto;padding:20px;border:1px solid #c89b50;border-radius:22px;background:linear-gradient(150deg,rgba(18,19,28,.99),rgba(8,9,15,.99));box-shadow:0 24px 80px rgba(0,0,0,.72),0 0 45px rgba(187,125,46,.18);color:#eee0bd;touch-action:pan-y;}
.village-economy-panel.hidden{display:none!important;}
.village-economy-panel:before{content:"";position:fixed;inset:-100vh -100vw;background:rgba(3,5,9,.62);z-index:-1;backdrop-filter:blur(3px);}
.economy-panel-head{display:flex;gap:14px;justify-content:space-between;align-items:flex-start;border-bottom:1px solid rgba(201,157,82,.35);padding-bottom:13px;}
.economy-panel-head h2{margin:2px 0 4px;color:#f5dda1;font-family:Georgia,serif;font-size:25px;}
.economy-panel-head p{margin:0;color:#bbaa86;font-size:12px;}
.economy-panel-head button{flex:0 0 42px;height:42px;border:1px solid #be914c;border-radius:50%;background:#17131a;color:#f2db9e;font-size:27px;}
.economy-level-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0;}
.economy-level-row>div,.economy-summary>div{padding:10px;border:1px solid rgba(190,145,76,.3);border-radius:12px;background:rgba(255,255,255,.025);text-align:center;}
.economy-level-row small,.economy-summary small{display:block;color:#a99365;font-size:9px;letter-spacing:.12em;}
.economy-level-row strong{display:block;margin-top:3px;color:#fff0c7;font-size:18px;}
.economy-resource-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.economy-resource-grid article{display:flex;gap:10px;align-items:center;padding:12px;border:1px solid rgba(190,145,76,.3);border-radius:14px;background:linear-gradient(145deg,rgba(54,48,39,.2),rgba(15,15,22,.45));}
.economy-resource-grid article>span{font-size:28px;}
.economy-resource-grid small{display:block;color:#a99365;font-size:9px;letter-spacing:.12em;}
.economy-resource-grid strong{display:block;color:#fff3d2;font-size:22px;line-height:1.1;}
.economy-resource-grid em{display:block;color:#9cc681;font-size:10px;font-style:normal;margin-top:3px;}
.economy-summary{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:10px;}
.economy-summary strong{display:block;color:#efe0b7;font-size:13px;margin-top:4px;}
.economy-away-report{margin-top:12px;padding:11px 13px;border:1px solid rgba(132,178,103,.42);border-radius:12px;background:rgba(79,116,61,.14);color:#dceac8;font-size:12px;line-height:1.55;}
.economy-away-report.hidden{display:none!important;}
.economy-collect-btn{width:100%;margin-top:12px;}
@media(max-width:520px){
  .village-economy-strip{width:93%;grid-template-columns:repeat(4,1fr);padding:6px 4px;}
  .village-economy-strip>span,.village-economy-strip b{font-size:12px;}
  .village-economy-panel{padding:15px;max-height:82%;}
  .economy-resource-grid{grid-template-columns:1fr 1fr;}
  .economy-resource-grid article{padding:10px 8px;gap:7px;}
  .economy-resource-grid article>span{font-size:22px;}
  .economy-resource-grid strong{font-size:19px;}
}
.village-citizen-layer{position:absolute;inset:0;z-index:17;pointer-events:none;overflow:visible;}
.living-citizen{position:absolute;width:32px;height:38px;transform:translate(-50%,-72%);pointer-events:none;will-change:left,top;image-rendering:pixelated;filter:drop-shadow(0 2px 2px #0008);}
.living-citizen i{position:absolute;left:0;bottom:0;width:32px;height:32px;background-repeat:no-repeat;background-size:128px 256px;image-rendering:pixelated;transform:scale(1.55);transform-origin:50% 100%;}
.citizen-shadow-sprite{z-index:0;background-image:var(--citizen-shadow);opacity:.68;}
.citizen-body-sprite{z-index:1;background-image:var(--citizen-sheet);}
.living-citizen:not(.is-idle) i{animation:citizenWalk .68s steps(4) infinite;}
.living-citizen.facing-down i{background-position-y:-128px;}
.living-citizen.facing-left i{background-position-y:-160px;}
.living-citizen.facing-right i{background-position-y:-192px;}
.living-citizen.facing-up i{background-position-y:-224px;}
.living-citizen.is-idle.facing-down i{background-position:0 0;}
.living-citizen.is-idle.facing-left i{background-position:0 -32px;}
.living-citizen.is-idle.facing-right i{background-position:0 -64px;}
.living-citizen.is-idle.facing-up i{background-position:0 -96px;}
@keyframes citizenWalk{from{background-position-x:0}to{background-position-x:-128px}}
@media(max-width:700px){
  .living-citizen i{transform:scale(1.7);}
}
@media(prefers-reduced-motion:reduce){
  .living-citizen:not(.is-idle) i{animation-duration:1.25s;}
}
.kael-world-avatar{position:absolute;left:800px;top:1015px;width:72px;height:92px;transform:translate(-50%,-82%);z-index:85;pointer-events:none;will-change:left,top;isolation:isolate;}
.kael-world-avatar::after{display:none!important;content:none!important;}
.kael-world-sprite{position:absolute;inset:0;z-index:1;background-image:url("assets/characters/shadow_lv_01-03/PNG/Swordsman_lvl1/With_shadow/Swordsman_lvl1_Walk_with_shadow.png?v=276");background-repeat:no-repeat;background-size:600% 400%;background-position:0 66.666%;image-rendering:pixelated;}
.kael-world-avatar.walking .kael-world-sprite{animation:kaelWorldWalk .56s steps(1,end) infinite;}
.kael-world-avatar.facing-down .kael-world-sprite{background-position-y:0%;}
.kael-world-avatar.facing-up .kael-world-sprite{background-position-y:100%;}
.kael-world-avatar.facing-left .kael-world-sprite{background-position-y:33.333%;}
.kael-world-avatar.facing-right .kael-world-sprite{background-position-y:66.666%;}
@keyframes kaelWorldWalk{0%,16.65%{background-position-x:0%}16.66%,33.31%{background-position-x:20%}33.32%,49.97%{background-position-x:40%}49.98%,66.63%{background-position-x:60%}66.64%,83.29%{background-position-x:80%}83.3%,100%{background-position-x:100%}}
.kael-nameplate{position:absolute;left:50%;top:88px;transform:translateX(-50%);padding:2px 8px;border:1px solid #bc914e;border-radius:10px;background:#0a0910e8;color:#f3deb0;font:700 11px Georgia,serif;letter-spacing:.08em;white-space:nowrap;z-index:2;}
.kael-controls{position:fixed;left:max(18px,env(safe-area-inset-left));bottom:calc(88px + env(safe-area-inset-bottom));z-index:10050;display:flex;align-items:flex-end;gap:12px;touch-action:none;user-select:none;-webkit-user-select:none;}
.kael-stick{position:relative;width:116px;height:116px;border-radius:50%;border:2px solid #c9a35d99;background:radial-gradient(circle,#2b2536bb 0 30%,#0b0a12d9 31% 100%);box-shadow:0 8px 28px #000b,inset 0 0 28px #94743c22;}
.kael-stick-knob{position:absolute;left:50%;top:50%;width:48px;height:48px;transform:translate(-50%,-50%);border-radius:50%;border:2px solid #f0d08c;background:#343044e8;box-shadow:0 3px 12px #000b,inset 0 0 10px #fff2;}
.kael-interact{width:58px;height:58px;border-radius:18px;border:2px solid #c9a35d;background:#12101bea;color:#f4d58d;font:700 24px Georgia;box-shadow:0 6px 18px #0009;}
body:not(.battle-mode) .kael-controls{display:flex;}
.screen:not(#menu):not(.hidden)~.kael-controls{display:none;}
@media(min-width:900px){
  .kael-controls{left:28px;bottom:102px;}
  .kael-stick{width:126px;height:126px;}
}
.battle-controls{position:relative;z-index:120;isolation:isolate;}
.battle-icon{pointer-events:auto!important;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;}
.battle-icon.exit-armed{border-color:#ff6974!important;background:linear-gradient(#5b1722,#21070d)!important;box-shadow:0 0 0 2px #ff697455,0 4px 14px #0009!important;}
body.battle-mode #tutorial{position:fixed!important;z-index:30000!important;pointer-events:auto!important;touch-action:manipulation!important;}
body.battle-mode #tutorial *{pointer-events:auto!important;touch-action:manipulation!important;}
body.battle-mode #closeTut{position:relative!important;z-index:30001!important;opacity:1!important;}
body.battle-mode .battle-icon{position:relative!important;z-index:20001!important;pointer-events:auto!important;}
body.battle-mode .kael-controls{display:none!important;bottom:max(116px,calc(116px + env(safe-area-inset-bottom)));z-index:150!important;pointer-events:none!important;}
body.battle-mode #hud{z-index:40000!important;}
body.battle-mode .battle-controls{z-index:40010!important;pointer-events:auto!important;position:relative!important;}
body.battle-mode .battle-icon{z-index:40011!important;pointer-events:auto!important;touch-action:none!important;}
#gameOver{z-index:50000!important;pointer-events:auto!important;touch-action:manipulation!important;}
#gameOver .panel,#gameOver button{position:relative;z-index:50001!important;pointer-events:auto!important;touch-action:none!important;}
#retryBtn,#menuBtn{min-height:58px;}
.battle-command-marquee{display:none;position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:1000000;width:min(94vw,520px);padding:8px;grid-template-columns:repeat(4,1fr);gap:8px;border:1px solid #a98955;border-radius:20px;background:linear-gradient(180deg,rgba(32,22,38,.98),rgba(8,7,12,.99));box-shadow:0 12px 38px #000d,inset 0 0 0 1px #f3d99b22;pointer-events:auto!important;touch-action:manipulation!important;-webkit-user-select:none;user-select:none;}
body.battle-mode .battle-command-marquee{display:grid!important;}
.marquee-command{min-width:0;min-height:58px;padding:5px 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:1px solid #856b45;border-radius:13px;background:linear-gradient(180deg,#2b2032,#100c16);color:#f7dfaa;text-decoration:none;font-family:Georgia,serif;box-shadow:inset 0 0 12px #e8c57b12,0 3px 10px #0008;pointer-events:auto!important;touch-action:manipulation!important;-webkit-tap-highlight-color:rgba(255,220,140,.25);}
.marquee-command .command-icon{font-size:23px;font-weight:700;line-height:1;}
.marquee-command small{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#cdbb94;}
.marquee-command:active{transform:scale(.94);filter:brightness(1.25);}
.marquee-command.danger-command{border-color:#93434d;color:#ffbbb4;}
body.battle-mode .audio-fab{bottom:calc(91px + env(safe-area-inset-bottom))!important;top:auto!important;}
.native-result-link{display:inline-flex!important;align-items:center;justify-content:center;text-decoration:none;touch-action:manipulation!important;pointer-events:auto!important;min-height:58px;}
#gameOver .native-result-link{position:relative;z-index:1000001!important;}
@media(max-width:480px){
  .battle-command-marquee{width:calc(100vw - 20px);gap:6px;padding:7px;bottom:calc(8px + env(safe-area-inset-bottom));}
  .marquee-command{min-height:54px;}
  .marquee-command .command-icon{font-size:21px;}
}
body.battle-mode,#app{background:#19030d!important;}
body.battle-mode #game{filter:none;background:#12030a!important;box-shadow:inset 0 0 90px #000;position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;display:block!important;image-rendering:pixelated;image-rendering:crisp-edges;}
body.battle-mode #threeBg{display:none!important;}
body.battle-mode .battle-command-marquee{z-index:2147483000!important;pointer-events:auto!important;}
body.battle-mode .marquee-command{pointer-events:auto!important;touch-action:none!important;-webkit-tap-highlight-color:transparent;}
.marquee-command.pressed{transform:translateY(1px) scale(.97)!important;filter:brightness(1.3)!important;}
#gameOver{z-index:2147482000!important;}
#gameOver .panel{z-index:2147482100!important;}
#retryBtn,#menuBtn{pointer-events:auto!important;touch-action:none!important;min-height:64px!important;}
body.battle-mode .battle-bottom{padding-bottom:calc(88px + env(safe-area-inset-bottom))!important;pointer-events:none;}
@media(max-width:700px){
  body.battle-mode .battle-command-marquee{width:calc(100vw - 16px)!important;bottom:calc(6px + env(safe-area-inset-bottom))!important;}
}
.battle-command-marquee{isolation:isolate!important;}
.marquee-command,#retryBtn,#menuBtn{cursor:pointer!important;-webkit-user-select:none!important;user-select:none!important;touch-action:manipulation!important;pointer-events:auto!important;}
#gameOver button{position:relative!important;z-index:2147483640!important;}
#battleControlMarquee,#gameOver,#gameOver .panel{pointer-events:auto!important;touch-action:none!important;-webkit-user-select:none!important;user-select:none!important;}
#gameOver .row{pointer-events:auto!important;touch-action:none!important;position:relative!important;z-index:2147483600!important;-webkit-user-select:none!important;user-select:none!important;}
[data-battle-command]{pointer-events:auto!important;touch-action:none!important;-webkit-tap-highlight-color:rgba(255,220,150,.22)!important;}
[data-battle-command].pressed{transform:scale(.94)!important;filter:brightness(1.35)!important;}
#battleControlMarquee .marquee-command.is-active{border-color:rgba(255, 226, 142, .9);background:linear-gradient(180deg, rgba(113, 79, 34, .96), rgba(49, 31, 20, .98));box-shadow:inset 0 0 0 1px rgba(255, 239, 181, .25), 0 0 12px rgba(222, 174, 78, .28);}
body.battle-paused #game{filter:brightness(.72) saturate(.78);}
#choices .panel{width:min(980px,96vw)!important;max-width:980px!important;padding:clamp(14px,2.2vw,24px)!important;}
#choicesCards{gap:clamp(10px,2vw,20px)!important;}
#choicesCards .draft-choice-card{position:relative;aspect-ratio:auto!important;min-height:390px!important;padding:10px 10px 12px!important;border-radius:15px!important;text-align:left;display:flex;flex-direction:column;overflow:hidden;touch-action:manipulation;}
#choicesCards .draft-level{position:absolute;top:9px;z-index:3;padding:4px 7px;border-radius:8px;background:#09070ddd;border:1px solid #ffffff55;font-size:12px;font-weight:800;letter-spacing:.05em;color:#fff;}
#choicesCards .draft-level{left:9px;}
#choicesCards .draft-type{position:absolute;top:9px;z-index:3;padding:4px 7px;border-radius:8px;background:#09070ddd;border:1px solid #ffffff55;font-size:12px;font-weight:800;letter-spacing:.05em;color:#fff;right:9px;}
#choicesCards .draft-art{height:126px;min-height:126px;margin:28px 0 8px;border-radius:11px;border:1px solid #ffffff55;background:radial-gradient(circle,#ffffff30,transparent 60%),linear-gradient(145deg,#0001,#0008);display:grid;place-items:center;position:relative;overflow:hidden;}
#choicesCards .draft-art:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 18px,#ffffff0b 19px 20px);}
#choicesCards .draft-icon{font-size:64px;line-height:1;filter:drop-shadow(0 7px 9px #000);position:relative;z-index:1;}
#choicesCards .draft-choice-card h3{font-size:clamp(17px,2vw,22px)!important;line-height:1.08!important;margin:2px 0 6px!important;text-align:center!important;min-height:46px;display:grid;place-items:center;color:inherit;}
#choicesCards .draft-desc{display:block!important;font-size:14px!important;line-height:1.3!important;min-height:55px;margin:0 2px 9px!important;opacity:.96!important;-webkit-line-clamp:3!important;}
#choicesCards .draft-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:auto;}
#choicesCards .draft-cost{display:flex;justify-content:space-between;align-items:center;margin-top:7px;padding-top:7px;border-top:1px solid #ffffff44;font-size:12px;font-weight:700;}
#placementBar{position:fixed!important;bottom:calc(96px + env(safe-area-inset-bottom))!important;z-index:2147482900!important;max-width:min(760px,94vw)!important;min-height:44px;justify-content:center;flex-wrap:wrap;padding:8px 10px!important;}
#placementBar #placementLabel{flex:1 1 320px;max-width:none;text-align:center;font-size:12px!important;line-height:1.3!important;letter-spacing:.01em!important;}
body.battle-instruction-active .battle-context{opacity:0!important;visibility:hidden!important;}
#towerInspector{font-size:13px!important;line-height:1.45!important;border-width:2px!important;}
@media(max-width:700px){
  #choices .panel{width:98vw!important;padding:12px 8px!important;}
  #choicesCards{gap:6px!important;}
  #choicesCards .draft-level,#choicesCards .draft-type{top:6px;padding:3px 5px;font-size:9px;}
  #placementBar{left:8px!important;right:8px!important;width:auto!important;bottom:calc(80px + env(safe-area-inset-bottom))!important;transform:none!important;padding:6px 8px!important;gap:6px!important;}
  #placementBar #placementLabel{flex-basis:100%;font-size:11px!important;}
  .draft-level{left:6px;}
  .draft-type{right:6px;}
  #choicesCards .draft-desc{font-size:11px!important;min-height:42px!important;line-height:1.25!important;-webkit-line-clamp:3!important;}
}
@media(max-width:430px){
  #choicesCards{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 calc(50vw - 112px) 8px!important;gap:10px!important;}
  .draft-icon{font-size:55px!important;}
  #choicesCards .draft-desc{font-size:12px!important;min-height:48px!important;}
}
#choices .panel{background:linear-gradient(180deg,rgba(31,23,31,.985),rgba(12,10,16,.99))!important;}
#choices #rewardTitle{font-size:clamp(24px,4vw,38px)!important;letter-spacing:.035em;margin-bottom:4px!important;}
#choices #rewardText{font-size:clamp(13px,2vw,17px)!important;line-height:1.35!important;margin:0 auto 14px!important;max-width:720px;color:#eee3d2!important;}
#choicesCards .draft-choice-card{min-height:430px!important;padding:12px!important;border-width:2px!important;transition:transform .14s ease,filter .14s ease,box-shadow .14s ease;box-shadow:0 16px 34px #000a,inset 0 0 0 1px #ffffff18!important;}
#choicesCards .draft-choice-card:active{transform:scale(1.035);filter:brightness(1.12);box-shadow:0 20px 42px #000c,inset 0 0 0 1px #ffffff44!important;}
#choicesCards .draft-art{height:140px;min-height:140px;margin:30px 0 8px!important;}
#choicesCards .draft-icon{font-size:72px!important;}
#choicesCards .draft-choice-card h3{font-size:clamp(18px,2.3vw,24px)!important;min-height:48px!important;margin:2px 0 8px!important;text-wrap:balance;}
#choicesCards .draft-stat-grid{gap:7px!important;margin-top:0!important;}
#choicesCards .draft-stat-grid>div{min-width:0;padding:8px 9px!important;border-radius:8px;border:1px solid #ffffff38;background:#09070db8;min-height:54px;display:flex;flex-direction:column;justify-content:center;}
#choicesCards .draft-stat-grid small{display:block;font-size:10px!important;letter-spacing:.105em!important;color:#dfceb7!important;opacity:.85;font-weight:800;}
#choicesCards .draft-passive small{font-size:10px!important;letter-spacing:.105em!important;font-weight:800;color:#dfceb7!important;}
#choicesCards .draft-stat-grid b{display:block;margin-top:2px;font-size:14px!important;line-height:1.15!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;color:#fff;}
#choicesCards .draft-passive{margin-top:8px;padding:8px 9px;border-radius:9px;border:1px solid #d7b56d66;background:linear-gradient(180deg,#4a341d66,#130e13d9);}
#choicesCards .draft-passive p{display:block!important;margin:3px 0 0!important;min-height:0!important;font-size:12px!important;line-height:1.3!important;color:#fff7e8!important;opacity:1!important;-webkit-line-clamp:2!important;}
#choicesCards .draft-cost{margin-top:8px!important;font-size:11px!important;gap:8px;}
#choicesCards .draft-cost span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#eadfce;}
#choicesCards .draft-cost strong{font-size:18px!important;color:#fff0a7;white-space:nowrap;}
@media(max-width:700px){
  #choicesCards .draft-choice-card{min-height:386px!important;padding:8px!important;border-radius:10px!important;}
  #choicesCards .draft-art{height:106px;min-height:106px;margin-top:24px!important;margin-bottom:5px;}
  #choicesCards .draft-icon{font-size:53px!important;}
  #choicesCards .draft-choice-card h3{font-size:14px!important;min-height:36px!important;margin-bottom:5px!important;}
  #choicesCards .draft-stat-grid{gap:4px!important;}
  #choicesCards .draft-stat-grid>div{padding:5px!important;min-height:44px;}
  #choicesCards .draft-stat-grid small,#choicesCards .draft-passive small{font-size:7px!important;}
  #choicesCards .draft-stat-grid b{font-size:10px!important;}
  #choicesCards .draft-passive{margin-top:5px;padding:5px 6px;}
  #choicesCards .draft-passive p{font-size:9px!important;line-height:1.22!important;-webkit-line-clamp:2!important;}
  #choicesCards .draft-cost{font-size:8px!important;margin-top:5px!important;}
  .draft-cost strong{font-size:12px!important;}
}
@media(max-width:430px){
  #choicesCards .draft-choice-card{flex:0 0 224px;scroll-snap-align:center;min-height:410px!important;flex-basis:246px!important;}
  #choicesCards{padding-left:calc(50vw - 123px)!important;padding-right:calc(50vw - 123px)!important;}
  #choicesCards .draft-art{height:120px;min-height:120px;}
  #choicesCards .draft-icon{font-size:61px!important;}
  #choicesCards .draft-choice-card h3{font-size:17px!important;min-height:40px!important;}
  #choicesCards .draft-stat-grid small,#choicesCards .draft-passive small{font-size:8px!important;}
  #choicesCards .draft-stat-grid b{font-size:12px!important;}
  #choicesCards .draft-passive p{font-size:11px!important;}
  #choicesCards .draft-cost{font-size:9px!important;}
  .draft-cost strong{font-size:14px!important;}
}
#cardInspectScreen{overflow:auto!important;-webkit-overflow-scrolling:touch!important;padding-bottom:100px!important;}
#cardInspectScreen .inspect-panel{width:min(980px,96vw)!important;max-width:980px!important;margin:18px auto 120px!important;padding:18px!important;}
#cardInspectScreen .card-detail-large{display:grid!important;grid-template-columns:minmax(230px,320px) minmax(0,1fr)!important;gap:24px!important;align-items:start!important;}
#cardInspectScreen .detail-card{aspect-ratio:5/7!important;height:auto!important;min-height:0!important;}
#cardInspectScreen .detail-actions{position:sticky!important;bottom:82px!important;z-index:15!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;padding:10px!important;border:1px solid #d0aa6255!important;border-radius:12px!important;background:#100d13f2!important;backdrop-filter:blur(12px)!important;}
#cardInspectScreen .detail-actions .btn:only-child{grid-column:1/-1!important;}
@media(max-width:900px){
  #cardInspectScreen .card-detail-large{grid-template-columns:240px minmax(0,1fr)!important;gap:16px!important;}
}
@media(max-width:650px){
  #cardInspectScreen .card-detail-large{grid-template-columns:1fr!important;}
  #cardInspectScreen .detail-card-wrap{width:min(300px,85vw)!important;margin:0 auto!important;}
  #cardInspectScreen .detail-actions{bottom:74px!important;}
}
#cardInspectScreen .inspect-panel{padding-bottom:110px!important;}
#inspectBack{position:sticky!important;top:8px!important;z-index:120!important;min-height:46px!important;touch-action:manipulation!important;pointer-events:auto!important;}
#cardInspectScreen{padding:16px 16px 96px!important;overflow:auto!important;}
#cardInspectScreen .inspect-panel{width:min(1180px,calc(100vw - 32px))!important;max-width:none!important;margin:0 auto!important;overflow:visible!important;}
#cardInspectScreen #inspectBack{position:relative!important;z-index:9999!important;pointer-events:auto!important;touch-action:manipulation!important;min-height:48px!important;padding:12px 18px!important;margin:0 0 14px!important;}
.fresh-village-world{position:relative!important;width:1774px!important;height:887px!important;min-width:1774px!important;min-height:887px!important;background:#10130f!important;overflow:visible!important;}
.fresh-village-ground{position:absolute;inset:0;width:1774px;height:887px;display:block;pointer-events:none;user-select:none;-webkit-user-drag:none;}
.village-hotspot{position:absolute;border:0;background:transparent;z-index:35;cursor:pointer;color:transparent;}
.cathedral-hotspot{left:710px;top:20px;width:355px;height:335px;}
.cathedral-hotspot:focus-visible,.cathedral-hotspot:hover{outline:3px solid #efcc72aa;outline-offset:-10px;border-radius:45% 45% 18px 18px;}
.village-build-tray-grid button img{width:86px;height:64px;object-fit:contain;display:block;margin:0 auto 4px;filter:drop-shadow(0 4px 3px #000a);}
.fresh-village-world .village-plots{z-index:24;}
.fresh-village-world .village-plot{width:220px!important;height:170px!important;border-radius:14px!important;background:#16201844!important;border-color:#f0d07766!important;}
.fresh-village-world .village-plot .placed-building{width:100%;height:100%;display:flex!important;flex-direction:column;justify-content:flex-end;overflow:visible;}
.fresh-village-world .village-plot.built{border-color:transparent!important;background:transparent!important;}
.fresh-village-world .village-plot.built b,.fresh-village-world .village-plot.built small{position:relative;z-index:2;opacity:0;transition:opacity .15s;}
.fresh-village-world .village-plot.built:hover b,.fresh-village-world .village-plot.built:hover small{opacity:1;}
.fresh-village-world .kael-world-avatar{z-index:90;}
.fresh-village-world .village-citizen-layer{z-index:40;}
#menu .pixel-village{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;z-index:1!important;background:#111811!important;cursor:grab!important;touch-action:none!important;overflow:hidden!important;}
#menu .pixel-village.is-panning{cursor:grabbing!important;}
#menu .village-hud{z-index:80!important;pointer-events:none;}
#menu .village-hud button,#menu .village-hud .village-resources{pointer-events:auto;}
#menu .village-economy-strip{top:max(76px,calc(env(safe-area-inset-top) + 70px))!important;z-index:95!important;}
#menu .village-build-btn{bottom:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + 18px)!important;z-index:120!important;}
#menu .village-camera-controls{right:max(12px,env(safe-area-inset-right))!important;bottom:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + 18px)!important;z-index:125!important;}
#menu .village-message{bottom:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + 8px)!important;z-index:75!important;pointer-events:none!important;}
#menu .village-version{bottom:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + 7px)!important;z-index:74!important;}
#menu .fresh-village-world{transform-origin:0 0!important;will-change:transform!important;}
#menu .village-economy-panel{z-index:700!important;}
@media(max-width:700px){
  #menu .village-economy-strip{top:max(102px,calc(env(safe-area-inset-top) + 96px))!important;}
}
.fresh-village-world .village-plot{box-sizing:border-box!important;transform:none!important;overflow:visible!important;}
.fresh-village-world .plot-0{left:232px!important;top:151px!important;width:168px!important;height:253px!important;}
.fresh-village-world .plot-1{left:451px!important;top:151px!important;width:168px!important;height:253px!important;}
.fresh-village-world .plot-2{left:978px!important;top:151px!important;width:190px!important;height:253px!important;}
.fresh-village-world .plot-3{left:1210px!important;top:151px!important;width:178px!important;height:253px!important;}
.fresh-village-world .plot-4{left:230px!important;top:450px!important;width:171px!important;height:287px!important;}
.fresh-village-world .plot-5{left:450px!important;top:450px!important;width:169px!important;height:287px!important;}
.fresh-village-world .plot-6{left:665px!important;top:450px!important;width:140px!important;height:287px!important;}
.fresh-village-world .plot-7{left:866px!important;top:450px!important;width:145px!important;height:287px!important;}
.fresh-village-world .plot-8{left:1020px!important;top:450px!important;width:145px!important;height:287px!important;}
.fresh-village-world .plot-9{left:1210px!important;top:450px!important;width:178px!important;height:287px!important;}
.fresh-village-world .village-plot.empty{border-radius:12px!important;background:#24342270!important;border:2px dashed #efd27b78!important;}
.fresh-village-world .village-plot.empty.available{background:#3b4d2ca8!important;}
.fresh-village-world .village-plot .placed-building{position:absolute!important;inset:0!important;display:block!important;pointer-events:none!important;}
.fresh-village-world .village-plot .placed-building img{position:absolute!important;left:50%!important;bottom:8px!important;transform:translateX(-50%)!important;width:230px;height:190px;object-fit:contain!important;filter:drop-shadow(0 10px 7px #000b);pointer-events:none!important;object-position:center bottom!important;max-width:none!important;}
.fresh-village-world .village-plot.building-house .placed-building img{width:190px!important;height:205px!important;}
.fresh-village-world .village-plot.building-farm .placed-building img{width:178px!important;height:142px!important;bottom:34px!important;}
.fresh-village-world .plot-6.building-house .placed-building img,.fresh-village-world .plot-7.building-house .placed-building img,.fresh-village-world .plot-8.building-house .placed-building img{width:164px!important;height:190px!important;}
.fresh-village-world .plot-6.building-farm .placed-building img,.fresh-village-world .plot-7.building-farm .placed-building img,.fresh-village-world .plot-8.building-farm .placed-building img{width:148px!important;height:124px!important;bottom:42px!important;}
.fresh-village-world .village-plot.built b,.fresh-village-world .village-plot.built small{position:absolute!important;left:50%!important;transform:translateX(-50%)!important;white-space:nowrap!important;}
.fresh-village-world .village-plot.built b{bottom:18px!important;}
.fresh-village-world .village-plot.built small{bottom:4px!important;}
#menu .fresh-village-world.village-world-v1{width:5322px!important;height:2661px!important;min-width:5322px!important;min-height:2661px!important;background:#080b08!important;overflow:visible!important;}
#menu .village-district{position:absolute;width:1774px;height:887px;overflow:hidden;isolation:isolate;}
#menu .village-district-ground{position:absolute;inset:0;width:1774px;height:887px;display:block;object-fit:fill;pointer-events:none;user-select:none;-webkit-user-drag:none;}
#menu .district-west{left:0;top:887px;}
#menu .district-old-town{left:1774px;top:887px;}
#menu .district-east{left:3548px;top:887px;}
#menu .district-south{left:1774px;top:1774px;}
#menu .district-nameplate{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:14;padding:7px 14px;border:1px solid #d6b66d66;border-radius:999px;background:#090b0bd9;color:#ead7a4;font:700 13px/1.1 Georgia,serif;letter-spacing:.12em;white-space:nowrap;text-shadow:0 1px 2px #000;pointer-events:none;opacity:.88;}
#menu .district-connector{position:absolute;z-index:2;background:linear-gradient(90deg,#4c4a3d,#817864 45%,#4c4a3d);box-shadow:inset 0 0 0 3px #27271f,inset 0 0 18px #0008;pointer-events:none;}
#menu .connector-west{left:1718px;top:1260px;width:112px;height:142px;}
#menu .connector-east{left:3492px;top:1260px;width:112px;height:142px;}
#menu .connector-south{left:2578px;top:1718px;width:142px;height:112px;transform:rotate(90deg);}
#menu .district-old-town .village-plots{position:absolute!important;inset:0!important;z-index:24!important;}
#menu .district-old-town .cathedral-hotspot{z-index:35;}
#menu .village-district-nav{position:absolute;right:max(62px,calc(env(safe-area-inset-right) + 58px));bottom:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + 18px);z-index:126;display:grid;grid-template-columns:repeat(2,minmax(38px,auto));gap:6px;padding:7px;border:1px solid #d6b66d55;border-radius:14px;background:#090b0bd9;backdrop-filter:blur(8px);}
#menu .village-district-nav button{min-width:42px;height:34px;padding:0 8px;border:1px solid #d6b66d55;border-radius:9px;background:#171713;color:#ead7a4;font:700 11px/1 Georgia,serif;letter-spacing:.05em;}
#menu .village-district-nav button.active{background:#6e5426;color:#fff2c7;border-color:#f0cf7a;}
@media(max-width:700px){
  #menu .district-nameplate{font-size:10px;bottom:18px;}
}
#menu .district-connector{display:none!important;}
#menu .village-gate-fade{position:absolute;inset:0;z-index:180;pointer-events:none;background:#050706;opacity:0;transition:opacity 170ms ease;}
#menu .village-gate-fade.active{opacity:.94;}
#menu .village-build-btn{min-width:156px!important;max-width:190px!important;height:50px!important;padding:0 18px!important;font-size:15px!important;white-space:nowrap!important;}
#menu .build-tray-head{flex:0 0 auto;min-height:34px;padding:0 2px 6px;}
#menu .build-tray-intro{margin:0 2px 8px!important;font-size:10px!important;line-height:1.3;color:#bfb198!important;}
#menu .build-categories{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-right:2px;display:grid;gap:8px;}
#menu .build-category{border:1px solid #5c4935;border-radius:12px;background:#100f15;padding:7px;}
#menu .build-tray-grid button{min-height:64px!important;width:100%!important;display:grid!important;grid-template-columns:58px minmax(0,1fr)!important;align-items:center!important;gap:9px!important;padding:6px 9px!important;text-align:left!important;border-radius:10px!important;touch-action:manipulation!important;}
#menu .build-tray-grid button img{width:56px!important;height:52px!important;margin:0!important;object-fit:contain!important;filter:drop-shadow(0 3px 3px #000a)!important;}
#menu .build-hint{flex:0 0 auto;margin-top:8px!important;padding:7px 9px;border:1px solid #5c4935;border-radius:9px;background:#090b10;text-align:left!important;font-size:9px!important;line-height:1.25;}
@media(max-width:700px){
  #menu .village-build-btn{bottom:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + 8px)!important;min-width:142px!important;max-width:154px!important;height:46px!important;padding:0 12px!important;font-size:13px!important;}
  #menu .village-camera-controls{bottom:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + 8px)!important;right:8px!important;gap:5px!important;}
  #menu .village-camera-controls button{width:38px!important;height:38px!important;border-radius:11px!important;font-size:18px!important;}
  #menu .village-district-nav{right:54px!important;bottom:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + 8px)!important;padding:4px!important;gap:3px!important;border-radius:11px!important;}
  #menu .village-district-nav button{min-width:33px!important;height:28px!important;padding:0 5px!important;font-size:9px!important;width:auto!important;border-radius:7px!important;}
  #menu .village-build-tray{bottom:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + 8px)!important;width:calc(100vw - 16px)!important;max-height:52vh!important;padding:8px!important;border-radius:14px!important;}
  #menu .build-tray-intro{display:none;}
  #menu .build-categories{gap:6px;}
  #menu .build-category{padding:6px;}
  #menu .build-category h3{margin-bottom:4px;font-size:10px;}
  #menu .build-tray-grid button{min-height:56px!important;grid-template-columns:48px minmax(0,1fr)!important;gap:7px!important;padding:5px 7px!important;}
  #menu .build-tray-grid button img{width:46px!important;height:44px!important;}
  #menu .build-item-copy b{font-size:12px;}
  #menu .build-item-copy small{font-size:9px!important;}
  #menu .build-item-copy em{font-size:8px;}
  body:not(.battle-mode) .kael-controls{left:max(10px,env(safe-area-inset-left))!important;bottom:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + 6px)!important;gap:8px!important;}
  body:not(.battle-mode) .kael-stick{width:112px!important;height:112px!important;}
  body:not(.battle-mode) .kael-interact{position:absolute!important;left:118px!important;bottom:0!important;width:48px!important;height:48px!important;border-radius:14px!important;font-size:20px!important;}
}
@media(max-width:390px){
  #menu .village-build-btn{min-width:128px!important;max-width:138px!important;font-size:12px!important;}
  #menu .village-district-nav{right:50px!important;}
  body:not(.battle-mode) .kael-stick{width:102px!important;height:102px!important;}
  body:not(.battle-mode) .kael-interact{left:106px!important;width:44px!important;height:44px!important;}
}
#menu .village-build-tray{z-index:5000!important;left:50%!important;right:auto!important;bottom:calc(74px + env(safe-area-inset-bottom))!important;width:min(360px,calc(100vw - 18px))!important;max-height:min(42vh,300px)!important;transform:translateX(-50%)!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;padding:7px!important;border-radius:13px!important;box-sizing:border-box!important;position:fixed!important;top:auto!important;min-height:0!important;}
#menu .village-build-tray.hidden{display:none!important;}
#menu .build-tray-head{min-height:28px!important;padding:0 0 4px!important;}
#menu .build-tray-head strong{font-size:10px!important;letter-spacing:.12em!important;}
#menu .build-tray-head button{width:28px!important;height:28px!important;display:grid;place-items:center;border:1px solid #8c6b3d!important;border-radius:10px;background:#17141c!important;font-size:17px!important;line-height:1;min-width:28px!important;padding:0!important;}
#menu .build-tray-intro{display:none!important;}
#menu .build-categories{display:block!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch!important;padding:0!important;}
#menu .build-category{margin:0 0 5px!important;padding:4px!important;border-radius:9px!important;}
#menu .build-category h3{margin:0 0 3px!important;color:#e6c77d;font:700 11px/1.2 Georgia,serif;letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:6px;font-size:8px!important;line-height:1!important;}
#menu .build-category h3 span{font-size:11px!important;}
#menu .build-tray-grid{display:grid!important;grid-template-columns:1fr!important;gap:3px!important;width:100%!important;}
#menu .build-tray-grid button{width:100%!important;min-width:0!important;height:42px!important;min-height:42px!important;max-height:42px!important;padding:3px 6px!important;margin:0!important;display:grid!important;grid-template-columns:34px minmax(0,1fr)!important;align-items:center!important;gap:6px!important;overflow:hidden!important;text-align:left!important;}
#menu .build-tray-grid button > img{display:block!important;position:static!important;width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;max-width:32px!important;max-height:32px!important;margin:0!important;padding:0!important;object-fit:contain!important;transform:none!important;filter:drop-shadow(0 2px 2px #0008)!important;}
#menu .build-item-copy{min-width:0!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:0 5px!important;align-items:center!important;}
#menu .build-item-copy b{font-size:10px!important;line-height:1!important;color:#fff1ca;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
#menu .build-item-copy small{font-size:7px!important;line-height:1!important;color:#e3c36f!important;white-space:nowrap!important;}
#menu .build-item-copy em{grid-column:1/-1!important;font:normal 9px/1.2 system-ui,sans-serif;color:#aeb8a2;font-size:7px!important;line-height:1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
#menu .build-hint{margin-top:4px!important;padding:4px 6px!important;min-height:0!important;font-size:7px!important;line-height:1.1!important;}
@media(min-width:700px){
  #menu .village-build-tray{width:min(420px,calc(100vw - 28px))!important;max-height:min(40vh,330px)!important;bottom:calc(86px + env(safe-area-inset-bottom))!important;}
  #menu .build-tray-grid button{height:46px!important;min-height:46px!important;max-height:46px!important;grid-template-columns:38px minmax(0,1fr)!important;}
  #menu .build-tray-grid button > img{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;max-width:36px!important;max-height:36px!important;}
  #menu .build-item-copy b{font-size:11px!important;}
  #menu .build-item-copy small,#menu .build-item-copy em{font-size:8px!important;}
}
.tower-upgrade-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0;}
.tower-upgrade-grid button{min-height:55px;padding:6px 3px;border:1px solid #83663b;border-radius:8px;background:linear-gradient(#302037,#120d17);color:#ffe2a0;font:700 11px Georgia;line-height:1.15;}
.tower-upgrade-grid button small{font:9px sans-serif;color:#cfc2d4;}
.tower-upgrade-grid button:disabled{opacity:.38;}
.axe-range-note{color:#d9b7ff;}
.battle-context .hero-xp{position:relative;}
.battle-context .hero-xp:before{content:'BATTLE XP';position:absolute;left:3px;top:-13px;font-size:6px;letter-spacing:.08em;color:#baaaca;}
.upgrade-pill{border-color:#a98035;cursor:pointer;}
.upgrade-pill strong{color:#ffe28a;}
.upgrade-pill[role="button"]:focus{outline:2px solid #ffe28a;outline-offset:2px;}
.battle-upgrade-modal{position:fixed;inset:0;z-index:10050;display:flex;align-items:center;justify-content:center;padding:18px;background:#05040bd9;backdrop-filter:blur(6px);}
.battle-upgrade-modal.hidden{display:none!important;}
.battle-upgrade-card{position:relative;width:min(720px,96vw);max-height:min(82vh,760px);overflow:auto;padding:22px;border:2px solid #a77a42;border-radius:18px;background:linear-gradient(160deg,#241625,#0c0911 64%);box-shadow:0 24px 80px #000;color:#f7ead3;}
.battle-upgrade-card h2{margin:2px 0 5px;color:#ffe0a0;font-family:Georgia,serif;}
.battle-upgrade-kicker{font-size:11px;letter-spacing:.2em;color:#d7ad66;}
.battle-upgrade-summary{margin:0 38px 16px 0;color:#cdbfd0;}
.battle-upgrade-close{position:absolute;right:12px;top:10px;width:36px;height:36px;border-radius:50%;border:1px solid #8c6840;background:#2a1720;color:#fff;font-size:24px;}
.battle-upgrade-list{display:grid;gap:10px;}
.battle-upgrade-row{display:grid;grid-template-columns:minmax(150px,1fr) minmax(250px,1.6fr);gap:12px;align-items:center;padding:12px;border:1px solid #59425c;border-radius:12px;background:#110d16cc;}
.battle-upgrade-name{display:flex;gap:10px;align-items:center;}
.battle-upgrade-name>span{font-size:28px;}
.battle-upgrade-name small{display:block;color:#bdaec0;}
.battle-upgrade-actions{display:flex;gap:7px;justify-content:flex-end;flex-wrap:wrap;}
.battle-upgrade-actions button{border:1px solid #936d3f;border-radius:9px;background:linear-gradient(#3c2630,#20131b);color:#ffe8b7;padding:10px 12px;font-weight:700;}
.battle-upgrade-actions button:disabled{opacity:.35;}
.battle-upgrade-later{border:1px solid #936d3f;border-radius:9px;background:linear-gradient(#3c2630,#20131b);color:#ffe8b7;padding:10px 12px;font-weight:700;width:100%;margin-top:14px;}
.battle-upgrade-empty{padding:18px;text-align:center;color:#cbbdce;border:1px dashed #66516a;border-radius:10px;}
@media(max-width:620px){
  .battle-upgrade-modal{padding:9px;}
  .battle-upgrade-card{padding:18px 12px;max-height:88vh;}
  .battle-upgrade-row{grid-template-columns:1fr;}
  .battle-upgrade-actions{justify-content:stretch;}
  .battle-upgrade-actions button{flex:1;min-width:88px;}
}
.card-wide-upgrade-note{display:block;color:#e4c77f;margin:6px 0;font-size:10px;}
@keyframes mergePulse{50%{filter:brightness(1.25);box-shadow:0 0 34px rgba(210,80,255,.75)}}
.rarity-common{--rarityglow:rgba(150,160,180,.25);}
.rarity-rare{--rarityglow:rgba(60,145,255,.42);}
.rarity-epic{--rarityglow:rgba(194,60,255,.52);}
.rarity-legendary{--rarityglow:rgba(255,74,73,.52);}
.rarity-mythic{--rarityglow:rgba(255,198,67,.6);}
.hp-stat i{color:#ff7384!important;}
.shadow-avatar-sprite{display:block;width:100%;height:100%;min-width:92px;min-height:92px;background-image:var(--shadow-sheet);background-size:1200% 400%;background-position:0 0;background-repeat:no-repeat;image-rendering:pixelated;filter:drop-shadow(0 10px 14px #000);}
.hero-jp-identity{border:1px solid #8f5d9a;background:linear-gradient(145deg,#25102d,#09080f 68%);border-radius:18px;padding:22px;box-shadow:inset 0 0 35px #7f1b8c22,0 18px 40px #0008;}
.hero-jp-identity{display:flex;align-items:center;gap:18px;}
.hero-jp-identity h2{font-size:2.2rem;margin:.2rem 0;}
.hero-jp-currency{display:inline-flex;align-items:end;gap:8px;padding:10px 16px;border-radius:999px;background:#160c1e;border:1px solid #e0a3f2;}
.hero-jp-currency b{font-size:2rem;color:#f5c8ff;}
.hero-jp-currency span{font-weight:900;color:#d18fea;}
.chapter-ten-cinematic{position:fixed;inset:0;z-index:99999;background:#020205;overflow:hidden;color:white;font-family:Georgia,serif;}
.chapter-ten-cinematic.hidden{display:none;}
.finale-stage{position:absolute;inset:0;background:radial-gradient(ellipse at 42% 72%,#231a2d 0,#08070d 36%,#010103 75%);}
.finale-caption{position:absolute;z-index:20;top:8%;left:0;right:0;text-align:center;letter-spacing:.35em;font-weight:800;color:#e8d8e8;text-shadow:0 0 18px #b763d6;font-size:clamp(16px,2.2vw,32px);transition:opacity .6s;}
.finale-wind{position:absolute;inset:-30%;z-index:4;opacity:.4;background:repeating-linear-gradient(165deg,transparent 0 28px,#d5c8e80d 29px 30px,transparent 31px 70px);animation:finaleWind 2.4s linear infinite;}
.finale-boss{position:absolute;z-index:6;left:27%;bottom:13%;width:320px;height:320px;background-image:var(--boss-sheet);background-size:800% 400%;background-position:0 0;background-repeat:no-repeat;image-rendering:pixelated;filter:drop-shadow(0 22px 24px #000);transform:translateX(-50%) scale(1.2);animation:golemDeathFrames 2.3s steps(7) forwards paused;}
.phase-death .finale-boss{animation-play-state:running;}
.finale-hero{position:absolute;z-index:9;right:13%;bottom:18%;width:150px;height:150px;background-image:var(--hero-sheet);background-size:1200% 400%;background-position:0 0;background-repeat:no-repeat;image-rendering:pixelated;filter:drop-shadow(0 14px 14px #000);transition:all 3s cubic-bezier(.4,0,.2,1);}
.finale-hero.new{opacity:0;}
.phase-walk .finale-hero.old{right:49%;}
.finale-relic{position:absolute;z-index:12;left:31%;bottom:32%;font-size:58px;color:#b379ff;opacity:0;text-shadow:0 0 14px #b373ff,0 0 38px #6e22cf;transition:all 2s ease;}
.phase-relic .finale-relic{opacity:1;left:47%;bottom:42%;transform:rotate(540deg) scale(1.2);}
.finale-runes{position:absolute;z-index:7;left:50%;bottom:13%;width:290px;height:100px;border:3px solid #8f43d6;border-radius:50%;opacity:0;transform:translateX(-50%) rotateX(62deg);box-shadow:0 0 40px #7a22d8,inset 0 0 35px #5414a8;}
.phase-transform .finale-runes{opacity:1;animation:runePulse .7s ease-in-out infinite alternate;}
.phase-transform .finale-stage{animation:blackoutPulse 2.5s ease forwards;}
.phase-transform .finale-hero.old{right:calc(50% - 75px);filter:brightness(4) drop-shadow(0 0 32px #c277ff);transform:scale(1.28);}
.finale-flash{position:absolute;z-index:15;inset:0;background:#f3dfff;opacity:0;}
.phase-reveal .finale-flash{animation:revealFlash 1.1s ease;}
.phase-reveal .finale-hero.old{opacity:0;}
.phase-reveal .finale-hero.new{opacity:1;right:calc(50% - 75px);transform:scale(1.32);filter:drop-shadow(0 0 28px #c975ff);}
.phase-reveal .finale-boss{opacity:.25;}
@keyframes golemDeathFrames{from{background-position:0 0}to{background-position:100% 0}}
@keyframes finaleWind{to{transform:translate(18%,8%)}}
@keyframes runePulse{to{transform:translateX(-50%) rotateX(62deg) scale(1.12);filter:brightness(1.8)}}
@keyframes blackoutPulse{50%{background:#000}100%{background:radial-gradient(circle at 50% 68%,#4c176b 0,#07040b 25%,#000 65%)}}
@keyframes revealFlash{0%,100%{opacity:0}35%{opacity:1}}
@media(max-width:900px){
  .finale-boss{left:25%;width:230px;height:230px;}
  .finale-hero{width:120px;height:120px;}
  .phase-walk .finale-hero.old{right:43%;}
}
.synergy-line{line-height:1.45;padding:7px 9px;margin-top:6px;border-radius:7px;background:linear-gradient(180deg,rgba(255,229,138,.10),rgba(255,229,138,.03));border:1px solid rgba(255,229,138,.28);color:#ffe9b0;font-size:12px;}
.synergy-line small{display:inline-block;color:#e8dcc4;opacity:.88;font-size:11px;margin-top:2px;}
.synergy-line small.synergy-from{color:#b9c6ff;opacity:.78;}

/* ============================================================================
   THE VILLAGE — CARDS SCREEN  (V29.7)
   Single authoritative block, verified in a real browser at 1366x1024.

   On !important: the global stylesheet carries !important on rules the Cards
   screen shares with other screens (.portrait-grid is also used by the Forge,
   .cards-build-banner is global). Where a global !important must be beaten,
   and only there, this block matches it.
   ========================================================================= */

#deckScreen{
  --pad: clamp(12px, 1.6vw, 22px);
  --radius: 13px;
  --ink: #f3edf8;
  --dim: #b6abc4;
  --line: rgba(190,170,220,.15);
  --gold: #e5c37a;
  --card-w: 164px;   /* every card is exactly this wide, everywhere */
}

/* dev scaffolding — the global rule sets display:grid !important */
#deckScreen #cardsBuildBanner{ display:none !important; }

#deckScreen > .cards-deck-panel{
  position:absolute; inset:0;
  width:100%; max-width:none; height:100%;
  margin:0; padding:0 0 calc(150px + env(safe-area-inset-bottom,0px));
  display:block;
  background:
    radial-gradient(120% 70% at 50% -12%, #241736 0%, transparent 58%),
    linear-gradient(180deg,#0c0912 0%,#070509 100%);
  border:0; border-radius:0;
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}

/* ------------------------------------------------------------- header */
#deckScreen .cards-command-header{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; padding:18px var(--pad) 12px; border-bottom:1px solid var(--line);
}
#deckScreen .cards-command-header .section-kicker{
  display:block; font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold); opacity:.9; margin-bottom:2px;
}
#deckScreen .cards-command-header h2{
  margin:0; font-family:Georgia,serif; line-height:1;
  font-size:clamp(24px,3vw,36px); color:var(--ink);
  text-shadow:0 3px 16px rgba(160,90,255,.32);
}
#deckScreen .cards-command-header p{ margin:5px 0 0; color:var(--dim); font-size:12px; }
#deckScreen .deck-count{
  flex:none; padding:8px 15px; border-radius:11px;
  font-size:clamp(16px,2vw,22px); font-weight:700; color:#2a1c06;
  background:linear-gradient(180deg,#f0d18d,#c99a3f); border:1px solid #f6e0ae;
  box-shadow:0 5px 15px rgba(201,154,63,.32), inset 0 1px 0 rgba(255,255,255,.5);
}

/* ------------------------------------------------------------ loadout */
#deckScreen .deck-zone{ padding:14px var(--pad) 0; }
#deckScreen .deck-title-kicker{
  font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold); opacity:.85; margin-bottom:9px;
}
#deckScreen .deck-loadout{
  display:grid; grid-template-columns:minmax(190px,240px) 1fr;
  gap:14px; align-items:start;
}
#deckScreen .loadout-card-column{ min-width:0; }

#deckScreen .deck-hero-card{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:11px 10px 13px; text-align:center; border-radius:var(--radius);
  border:1px solid rgba(229,195,122,.32);
  background:linear-gradient(180deg,#221733 0%,#140e1e 62%,#0d0913 100%);
  box-shadow:0 8px 22px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  cursor:pointer; transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
#deckScreen .deck-hero-card:hover{
  transform:translateY(-3px); border-color:rgba(229,195,122,.68);
  box-shadow:0 14px 30px rgba(0,0,0,.58), 0 0 22px rgba(229,195,122,.18);
}
#deckScreen .deck-hero-portrait{
  width:100%; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  font-size:46px; border-radius:10px; overflow:hidden;
  background:radial-gradient(circle at 50% 38%,#3a2550 0%,#150f20 70%);
  border:1px solid rgba(190,150,255,.2);
}
#deckScreen .deck-hero-portrait img{ width:100%; height:100%; object-fit:contain; image-rendering:pixelated; }
#deckScreen .deck-hero-copy{ display:flex; flex-direction:column; gap:2px; width:100%; }
#deckScreen .deck-hero-copy small{
  font-size:9px; letter-spacing:.19em; text-transform:uppercase; color:var(--dim);
}
#deckScreen .deck-hero-copy strong{
  font-family:Georgia,serif; font-size:clamp(14px,1.4vw,17px); color:var(--ink); line-height:1.15;
}
#deckScreen #deckHeroLevel{
  display:inline-block; margin:3px auto 0; padding:3px 11px; border-radius:999px;
  font-size:11px; font-weight:700; color:#0d2413;
  background:linear-gradient(180deg,#8fe39b,#48a45c); border:1px solid #a9f0b3;
}
#deckScreen .deck-hero-xp{
  display:block; width:100%; height:4px; margin-top:6px; border-radius:999px;
  background:rgba(255,255,255,.09); overflow:hidden;
}
#deckScreen .deck-hero-xp i{ display:block; height:100%; background:linear-gradient(90deg,#6fe08a,#3f9b57); }
#deckScreen .deck-hero-gear{ display:flex; gap:5px; flex-wrap:wrap; justify-content:center; margin-top:8px; }
#deckScreen .hero-passive-heading{
  margin-top:10px; padding-top:9px; width:100%; border-top:1px solid var(--line);
  font-size:9px; letter-spacing:.17em; text-transform:uppercase; color:var(--gold);
}
#deckScreen .hero-passive-subtitle{ font-size:9.5px; color:var(--dim); margin-bottom:6px; }
#deckScreen .ground-defense-slots{ display:grid; grid-template-columns:1fr 1fr; gap:7px; width:100%; }

/* the six equipped cards */
#deckScreen #equippedDeck{
  display:grid;
  /* auto-fit so the six cards sit at the SAME width as collection cards:
     six across on a wide screen, three on a tablet, two on a phone */
  grid-template-columns:repeat(auto-fill,minmax(0,var(--card-w)));
  justify-content:start; gap:11px; width:100%;
}

/* deck profile strip */
#deckScreen .deck-analysis{
  margin:12px 0 0; padding:9px 13px; border-radius:10px;
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px;
  background:linear-gradient(180deg,rgba(28,20,40,.85),rgba(14,10,21,.9));
  border:1px solid var(--line); color:var(--dim); font-size:11.5px; line-height:1.5;
}
#deckScreen .deck-analysis b, #deckScreen .deck-analysis strong{ color:var(--ink); }

/* --------------------------------------------------------- collection */
#deckScreen .collection-divider{
  display:flex; align-items:center; gap:12px; margin:20px var(--pad) 12px;
  color:var(--gold); font-size:11px; letter-spacing:.3em; text-transform:uppercase;
}
#deckScreen .collection-divider::before,
#deckScreen .collection-divider::after{
  content:''; flex:1; height:1px;
  background:linear-gradient(90deg,transparent,rgba(229,195,122,.4),transparent);
}

/* category tabs — these were collapsing to 1px */
#deckScreen .card-file-tabs{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(108px,1fr)) !important;
  gap:7px !important; margin:0 !important; padding:0 var(--pad) !important;
  overflow:visible !important; border-bottom:0 !important;
}
#deckScreen .card-file-tab{
  display:flex !important; flex:1 1 auto !important;
  flex-direction:column; align-items:center; justify-content:center; gap:2px;
  min-height:56px; padding:9px 6px !important;
  border-radius:10px !important; border:1px solid var(--line) !important;
  background:linear-gradient(180deg,#1a1526,#100c19) !important;
  color:var(--dim) !important; cursor:pointer;
  transition:transform .16s ease, border-color .16s ease, background .16s ease;
}
#deckScreen .card-file-tab b{ font-size:15px; color:var(--gold); line-height:1; }
#deckScreen .card-file-tab span{ font-size:11px; font-weight:600; color:var(--ink); line-height:1.1; }
#deckScreen .card-file-tab small{ font-size:8.5px; opacity:.6; line-height:1.1; }
#deckScreen .card-file-tab:hover{ transform:translateY(-2px); border-color:rgba(229,195,122,.5) !important; }
#deckScreen .card-file-tab.active{
  background:linear-gradient(180deg,#7b3fd4,#4d2091) !important;
  border-color:#b98cff !important; color:#fff !important;
  box-shadow:0 6px 18px rgba(123,63,212,.4);
}
#deckScreen .card-file-tab.active b,
#deckScreen .card-file-tab.active span{ color:#fff; }

/* filter / sort / merge row */
#deckScreen .deck-tools{
  display:flex; flex-wrap:wrap; align-items:center; gap:9px; padding:12px var(--pad) 4px;
}
#deckScreen .deck-tools .visually-hidden{ display:none; }
#deckScreen #deckSort{
  flex:0 1 190px; padding:9px 11px; border-radius:10px; font-size:12.5px;
  background:#150f20; color:var(--ink); border:1px solid var(--line);
}
#deckScreen .merge-toggle{
  display:flex; align-items:center; gap:7px; padding:8px 12px; border-radius:10px;
  background:#150f20; border:1px solid var(--line);
  color:var(--ink); font-size:12.5px; cursor:pointer; white-space:nowrap;
}
#deckScreen .merge-all-btn{
  flex:1 1 200px; padding:10px 16px; border-radius:10px;
  font-size:13px; font-weight:700; letter-spacing:.05em; color:#2a1c06;
  background:linear-gradient(180deg,#f2d692,#c99a3f); border:1px solid #f6e0ae;
  cursor:pointer; box-shadow:0 5px 15px rgba(201,154,63,.28);
  transition:transform .16s ease, filter .16s ease;
}
#deckScreen .merge-all-btn:hover:not(:disabled){ transform:translateY(-2px); filter:brightness(1.06); }
#deckScreen .merge-all-btn:disabled{ opacity:.42; cursor:default; box-shadow:none; }

/* the grid — global .portrait-grid forces 6 columns with !important */
#deckScreen #collectionCards{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(0,var(--card-w))) !important;
  justify-content:start !important;
  gap:11px !important; padding:12px var(--pad) 26px !important;
  align-items:start;
}

/* Save Deck / Back sit at the BOTTOM, not pinned to the top */
#deckScreen .sticky-actions{
  position:static; display:flex; flex-wrap:wrap; gap:10px;
  justify-content:center; padding:6px var(--pad) 26px;
}
#deckScreen .sticky-actions .btn{
  flex:0 1 210px; padding:11px 18px; border-radius:10px;
  font-size:13px; font-weight:700; color:#2a1c06;
  background:linear-gradient(180deg,#f2d692,#c99a3f); border:1px solid #f6e0ae;
  cursor:pointer; transition:transform .16s ease, filter .16s ease;
}
#deckScreen .sticky-actions .btn:hover{ transform:translateY(-2px); filter:brightness(1.06); }

/* ====================================================================
   ONE CARD, EVERYWHERE — same size, shape and anatomy.
   Collection cards (.portrait-card) and equipped slots
   (.deck-slot.poker-mini-card) use different inner markup; both are
   normalised here so a card looks identical wherever it appears.
   ================================================================== */
#deckScreen .portrait-card,
#deckScreen .deck-slot.poker-mini-card,
#deckScreen .ground-defense-slot{
  --r: var(--rarity, #8c8c95);
  position:relative; isolation:isolate;
  display:flex !important; flex-direction:column; align-items:stretch; gap:5px;
  width:auto !important; height:auto !important;
  min-height:0 !important; max-height:none !important;
  aspect-ratio:3/4 !important;
  margin:0 !important; padding:8px 8px 7px !important;
  border-radius:var(--radius) !important; overflow:hidden;
  color:var(--ink); text-align:center; cursor:pointer;
  background:linear-gradient(168deg,#1d1728 0%,#120d1a 52%,#0a0810 100%);
  background:linear-gradient(168deg,
    color-mix(in srgb, var(--r) 32%, #17121f) 0%,
    color-mix(in srgb, var(--r) 13%, #100c18) 52%,
    #0a0810 100%);
  border:1.5px solid #3b3247 !important;
  border:1.5px solid color-mix(in srgb, var(--r) 58%, #2a2333) !important;
  box-shadow:0 3px 11px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.07);
  transition:transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease, border-color .2s ease;
  animation:cardIn .3s cubic-bezier(.2,.9,.3,1) backwards;
}
@keyframes cardIn{ from{opacity:0;transform:translateY(12px) scale(.97)} to{opacity:1;transform:none} }
#deckScreen #collectionCards > *:nth-child(1){animation-delay:0s}
#deckScreen #collectionCards > *:nth-child(2){animation-delay:.025s}
#deckScreen #collectionCards > *:nth-child(3){animation-delay:.05s}
#deckScreen #collectionCards > *:nth-child(4){animation-delay:.075s}
#deckScreen #collectionCards > *:nth-child(5){animation-delay:.1s}
#deckScreen #collectionCards > *:nth-child(6){animation-delay:.125s}
#deckScreen #collectionCards > *:nth-child(7){animation-delay:.15s}
#deckScreen #collectionCards > *:nth-child(8){animation-delay:.175s}

#deckScreen .portrait-card::before,
#deckScreen .deck-slot.poker-mini-card::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(115% 66% at 50% 0%,
    color-mix(in srgb, var(--r) 38%, transparent) 0%, transparent 66%);
  opacity:.75;
}
#deckScreen .portrait-card:hover,
#deckScreen .deck-slot.poker-mini-card:hover{
  transform:translateY(-5px) !important;
  border-color:color-mix(in srgb, var(--r) 90%, #fff) !important;
  box-shadow:0 14px 30px rgba(0,0,0,.6),
             0 0 24px color-mix(in srgb, var(--r) 48%, transparent),
             inset 0 1px 0 rgba(255,255,255,.12);
}
#deckScreen .portrait-card:active,
#deckScreen .deck-slot.poker-mini-card:active{ transform:translateY(-1px) scale(.985) !important; }
#deckScreen .portrait-card.selected,
#deckScreen .deck-slot.poker-mini-card.selected{
  border-color:var(--gold) !important;
  box-shadow:0 0 0 2px rgba(229,195,122,.45), 0 10px 26px rgba(0,0,0,.6), 0 0 22px rgba(229,195,122,.26);
}

/* level badge — both markups */
#deckScreen .card-level,
#deckScreen .deck-card-level{
  position:absolute !important; top:6px !important; left:6px !important;
  right:auto !important; bottom:auto !important; z-index:3;
  width:auto !important; height:auto !important; max-width:none !important;
  padding:2px 7px !important; border-radius:999px !important;
  font-size:9px !important; font-weight:800; letter-spacing:.07em;
  white-space:nowrap; overflow:visible !important;
  color:#fff; background:rgba(8,6,12,.88);
  border:1px solid color-mix(in srgb, var(--r) 60%, #443a52);
}
#deckScreen .tag{
  position:absolute; top:6px; right:6px; z-index:3;
  padding:2px 6px; border-radius:999px;
  font-size:8px; letter-spacing:.08em; text-transform:uppercase;
  color:#efe6f8; background:rgba(8,6,12,.72); border:1px solid rgba(255,255,255,.11);
}
#deckScreen .card-type-corner,
#deckScreen .favorite-corner{
  position:absolute !important; bottom:6px !important; top:auto !important;
  width:auto !important; height:auto !important; z-index:3;
  font-size:11px; line-height:1; opacity:.6;
  border-radius:0 !important; background:none !important;
  transition:opacity .16s ease, transform .16s ease;
}
#deckScreen .card-type-corner{ left:8px !important; right:auto !important; }
#deckScreen .favorite-corner{ right:8px !important; left:auto !important; cursor:pointer; }
#deckScreen .favorite-corner.is-favorite{ color:var(--gold); opacity:1; text-shadow:0 0 8px rgba(229,195,122,.8); }
#deckScreen .favorite-corner:hover{ opacity:1; transform:scale(1.2); }

/* art panel — both markups, identical */
#deckScreen .card-art,
#deckScreen .deck-card-art{
  position:relative !important; inset:auto !important;
  width:100% !important; height:auto !important;
  aspect-ratio:1/1; flex:none;
  min-height:0 !important; max-height:none !important;
  margin:18px 0 0 !important; padding:0 !important;
  display:flex !important; align-items:center; justify-content:center;
  border-radius:9px !important; overflow:hidden;
  background:radial-gradient(circle at 50% 40%,#1e1729 0%,#0c0912 72%);
  background:radial-gradient(circle at 50% 40%,
    color-mix(in srgb, var(--r) 28%, #191322) 0%, #0c0912 72%);
  border:1px solid color-mix(in srgb, var(--r) 28%, rgba(255,255,255,.06));
}
#deckScreen .card-art .art-sigil,
#deckScreen .deck-card-art span{
  font-size:clamp(26px,3.4vw,42px) !important; line-height:1;
  filter:drop-shadow(0 4px 11px rgba(0,0,0,.65));
  transition:transform .25s cubic-bezier(.2,.9,.3,1);
}
#deckScreen .portrait-card:hover .art-sigil,
#deckScreen .deck-slot.poker-mini-card:hover .deck-card-art span{ transform:scale(1.1) rotate(-3deg); }
#deckScreen .card-art img{ width:100%; height:100%; object-fit:contain; image-rendering:pixelated; }

/* name */
#deckScreen .card-copy{ min-height:0; }
#deckScreen .card-copy h3,
#deckScreen .deck-card-name{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  margin:0 !important; font-family:Georgia,serif;
  font-size:clamp(10px,1.05vw,12.5px); line-height:1.18; color:#fff;
  text-shadow:0 2px 7px rgba(0,0,0,.7);
}
#deckScreen .portrait-card p{ display:none; }

/* stats */
#deckScreen .card-primary-stats,
#deckScreen .deck-card-stats{
  display:grid !important; grid-template-columns:1fr 1fr; gap:4px; width:100%;
}
#deckScreen .card-primary-stats span,
#deckScreen .deck-card-stats span{
  display:flex; align-items:center; justify-content:center; gap:3px;
  padding:3px 2px; border-radius:6px;
  background:rgba(6,4,10,.62); border:1px solid rgba(255,255,255,.09);
  font-size:10px; font-weight:700; color:#fff;
}
#deckScreen .card-primary-stats i{ font-style:normal; font-size:9px; }
#deckScreen .card-primary-stats small{ display:none; }
#deckScreen .atk-stat i{ color:#ff9c7a; }
#deckScreen .hp-stat i{ color:#ff7a9c; }

/* footer + status */
#deckScreen .card-footer{
  display:flex; align-items:center; justify-content:space-between; gap:5px;
  margin-top:auto; padding-top:4px; border-top:1px solid rgba(255,255,255,.09);
  font-size:8px; letter-spacing:.03em;
}
#deckScreen .card-footer span:first-child{
  font-weight:800; text-transform:uppercase; letter-spacing:.07em;
  color:#e6dcf2;
  color:color-mix(in srgb, var(--r) 70%, #ffffff);
}
#deckScreen .card-footer span:last-child{ color:#cfc4dc; opacity:.8; }
#deckScreen .collection-card-status,
#deckScreen .deck-card-view{
  position:static !important; inset:auto !important;
  display:block !important; width:auto !important; height:auto !important;
  min-height:0 !important; margin:4px 0 0 !important;
  padding:4px 3px !important; border-radius:7px !important;
  text-align:center; font-size:8px !important; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; color:#e9dfff;
  background:linear-gradient(180deg,rgba(32,25,45,.95),rgba(14,11,20,.98)) !important;
  border:1px solid color-mix(in srgb, var(--r) 40%, rgba(255,255,255,.1)) !important;
}
#deckScreen .portrait-card.selected .collection-card-status{
  color:#2a1c06;
  background:linear-gradient(180deg,#f0d18d,#c99a3f) !important; border-color:#f6e0ae !important;
}

/* empty equipped slot */
#deckScreen .deck-slot.poker-mini-card.empty{
  justify-content:center; gap:5px;
  background:linear-gradient(180deg,rgba(25,18,35,.6),rgba(12,9,18,.6));
  border:1px dashed rgba(190,160,240,.3) !important; box-shadow:none;
}
#deckScreen .deck-slot.poker-mini-card.empty:hover{
  border-color:rgba(229,195,122,.7) !important; box-shadow:none;
}
#deckScreen .empty-plus{ font-size:26px; line-height:1; color:rgba(229,195,122,.72); }
#deckScreen .deck-slot.poker-mini-card.empty small{ font-size:8.5px; letter-spacing:.16em; color:var(--dim); }

/* ground defense slots reuse the card body, squared off */
#deckScreen .ground-defense-slot{ aspect-ratio:1/1 !important; padding:5px !important; gap:2px; }
#deckScreen .ground-defense-slot .card-art{ margin:14px 0 0 !important; }
#deckScreen .ground-defense-slot .card-copy,
#deckScreen .ground-defense-slot .card-primary-stats,
#deckScreen .ground-defense-slot .card-footer,
#deckScreen .ground-defense-slot .tag,
#deckScreen .ground-defense-slot .card-type-corner,
#deckScreen .ground-defense-slot .favorite-corner{ display:none !important; }
#deckScreen .ground-slot-label{
  position:absolute; bottom:3px; left:0; right:0; z-index:3;
  font-size:7px; letter-spacing:.12em; color:var(--dim);
}
#deckScreen .ground-defense-slot.empty{ border-style:dashed !important; }

/* locked */
#deckScreen .portrait-card.locked-card{ filter:grayscale(.72) brightness(.6); }
#deckScreen .card-lock-overlay{
  position:absolute; inset:0; z-index:4;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  padding:10px; text-align:center;
  background:linear-gradient(180deg,rgba(6,4,10,.82),rgba(6,4,10,.93));
}
#deckScreen .card-lock-overlay b{ font-size:10.5px; letter-spacing:.12em; color:#e8dcf5; }
#deckScreen .card-lock-overlay small{ font-size:8.5px; line-height:1.3; color:#a99bbd; }

/* rarity tiers: additive only, never replacing the fill */
#deckScreen .portrait-card.rarity-epicplus,
#deckScreen .portrait-card.rarity-legendary,
#deckScreen .portrait-card.rarity-legendaryplus,
#deckScreen .portrait-card.rarity-mythic,
#deckScreen .deck-slot.rarity-epicplus,
#deckScreen .deck-slot.rarity-legendary,
#deckScreen .deck-slot.rarity-legendaryplus,
#deckScreen .deck-slot.rarity-mythic{
  box-shadow:0 3px 11px rgba(0,0,0,.55),
    inset 0 0 0 1px color-mix(in srgb, var(--r) 52%, transparent),
    inset 0 1px 0 rgba(255,255,255,.1) !important;
}
#deckScreen .portrait-card.rarity-legendary::after,
#deckScreen .portrait-card.rarity-legendaryplus::after,
#deckScreen .portrait-card.rarity-mythic::after,
#deckScreen .deck-slot.rarity-legendary::after,
#deckScreen .deck-slot.rarity-legendaryplus::after,
#deckScreen .deck-slot.rarity-mythic::after{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,
    rgba(255,255,255,.14) 47%, rgba(255,255,255,.28) 50%, rgba(255,255,255,.14) 53%,
    transparent 62%);
  background-size:280% 280%; animation:foilSweep 4.6s linear infinite;
  mix-blend-mode:screen; opacity:.45;
}
@keyframes foilSweep{ from{background-position:130% 0%} to{background-position:-30% 0%} }
#deckScreen .portrait-card.rarity-mythic::after{ animation-duration:3.2s; opacity:.58; }

/* ============================ HERO FILE / JOB BOARD ==================== */
#deckScreen .hero-jp-panel{ padding:4px var(--pad) 26px; display:grid; gap:14px; }
#deckScreen .hero-jp-header{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:14px; border-radius:var(--radius);
  background:linear-gradient(180deg,#221733,#0f0b17);
  border:1px solid rgba(229,195,122,.28);
}
#deckScreen .hero-jp-avatar{
  width:96px; height:96px; flex:none; border-radius:11px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 38%,#3a2550,#150f20 70%);
  border:1px solid rgba(190,150,255,.22);
}
#deckScreen .hero-jp-summary{ flex:1 1 220px; min-width:0; }
#deckScreen .hero-jp-summary h2{ margin:2px 0 0; font-family:Georgia,serif; font-size:23px; color:var(--ink); }
#deckScreen .hero-jp-summary p{ margin:3px 0 8px; color:var(--dim); font-size:12px; }
#deckScreen .hero-jp-badges{ display:flex; flex-wrap:wrap; gap:7px; }
#deckScreen .hero-jp-badges span{
  padding:4px 10px; border-radius:999px; font-size:10.5px; color:var(--ink);
  background:rgba(255,255,255,.06); border:1px solid var(--line);
}
#deckScreen .hero-jp-badges b{ color:var(--gold); }
#deckScreen .hero-jp-help{ font-size:11px; color:var(--dim); line-height:1.5; }
#deckScreen .hero-job-board{
  padding:14px; border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(28,20,40,.85),rgba(12,9,18,.92));
  border:1px solid var(--line);
}
#deckScreen .job-board-title{
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
  margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--line);
}
#deckScreen .job-board-title h3{ margin:2px 0 0; font-family:Georgia,serif; font-size:17px; color:var(--ink); }
#deckScreen .job-board-title strong{ font-size:18px; color:var(--gold); }
#deckScreen .job-node-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(124px,1fr)); gap:9px; }
#deckScreen .job-node{
  display:flex; flex-direction:column; gap:3px; padding:10px 9px;
  border-radius:10px; text-align:left; cursor:pointer;
  background:linear-gradient(180deg,#1a1526,#100c19);
  border:1px solid var(--line); color:var(--dim);
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
#deckScreen .job-node:hover{ transform:translateY(-2px); }
#deckScreen .job-node b{ color:var(--ink); font-size:12px; }
#deckScreen .job-node small{ font-size:9.5px; line-height:1.32; }
#deckScreen .job-node.unlocked{
  border-color:rgba(111,224,138,.5);
  background:linear-gradient(180deg,rgba(35,72,45,.6),rgba(14,24,18,.8));
}
#deckScreen .job-node.unlocked b{ color:#9df0b0; }
#deckScreen .job-node.available{
  border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(229,195,122,.32), 0 0 18px rgba(229,195,122,.22);
  animation:jobPulse 2s ease-in-out infinite;
}
@keyframes jobPulse{
  0%,100%{ box-shadow:0 0 0 1px rgba(229,195,122,.28), 0 0 14px rgba(229,195,122,.16) }
  50%    { box-shadow:0 0 0 1px rgba(229,195,122,.58), 0 0 26px rgba(229,195,122,.38) }
}
#deckScreen .job-node.locked{ opacity:.48; cursor:not-allowed; }
#deckScreen .job-rank{ font-size:8.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); opacity:.85; }

/* ------------------------------------------------------ narrow screens */
@media (max-width:900px){
  #deckScreen .deck-loadout{ grid-template-columns:1fr; }
  #deckScreen .deck-hero-card{ flex-direction:row; text-align:left; align-items:center; gap:11px; }
  #deckScreen .deck-hero-portrait{ width:92px; flex:none; }
  #deckScreen #deckHeroLevel{ margin-left:0; }
  #deckScreen .ground-defense-slots{ grid-template-columns:repeat(4,1fr); }
  #deckScreen .cards-command-header{ flex-direction:column; align-items:flex-start; gap:10px; }
}
@media (max-width:620px){
  /* only the card width changes; both grids keep the same fixed track so an
     equipped card and a collection card stay identical on every device */
  #deckScreen{ --card-w:132px; }
}
@media (prefers-reduced-motion:reduce){
  #deckScreen .portrait-card,
  #deckScreen .deck-slot.poker-mini-card{ animation:none; }
  #deckScreen .portrait-card::after{ animation:none; opacity:.2; }
  #deckScreen .job-node.available{ animation:none; }
}

/* ============================================================================
   V29.8 — VILLAGE BUILD MENU + TACTICAL ESPIONAGE
   ========================================================================= */
.build-categories{display:flex;flex-direction:column;gap:8px;}
.build-category{border:1px solid rgba(212,181,108,.24);border-radius:11px;
  background:linear-gradient(180deg,rgba(28,22,16,.92),rgba(14,11,8,.95));overflow:hidden;}
.build-category-toggle{display:flex;align-items:center;gap:9px;width:100%;padding:11px 13px;
  background:none;border:0;color:#f0e2c2;cursor:pointer;font:inherit;text-align:left;}
.build-category-toggle span{font-size:17px;}
.build-category-toggle b{flex:1;font-size:13px;letter-spacing:.05em;}
.build-category-toggle small{font-size:10px;opacity:.6;padding:2px 7px;border-radius:999px;
  background:rgba(212,181,108,.16);}
.build-category-toggle i{font-style:normal;transition:transform .2s ease;opacity:.7;}
.build-category.open .build-category-toggle i{transform:rotate(180deg);}
.build-category-panel{max-height:0;overflow:hidden;transition:max-height .26s ease;}
.build-category.open .build-category-panel{max-height:1400px;}
.build-square-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
  gap:8px;padding:4px 10px 12px;}
.build-square-card{display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:8px 6px;border-radius:10px;cursor:pointer;font:inherit;text-align:center;
  background:linear-gradient(180deg,#241c12,#140f0a);border:1px solid rgba(212,181,108,.26);
  color:#f0e2c2;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;}
.build-square-card:hover{transform:translateY(-3px);border-color:rgba(240,210,140,.75);
  box-shadow:0 8px 20px rgba(0,0,0,.5),0 0 16px rgba(212,181,108,.22);}
.build-square-card:active{transform:translateY(-1px) scale(.98);}
.build-square-card.selected{border-color:#f0d18d;box-shadow:0 0 0 2px rgba(240,209,141,.4),0 0 20px rgba(240,209,141,.3);}
.build-square-image{width:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  border-radius:8px;overflow:hidden;background:radial-gradient(circle at 50% 38%,#2e2418,#100c08 72%);
  border:1px solid rgba(212,181,108,.16);}
.build-square-image img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;}
.build-placeholder{font-style:normal;font-size:30px;line-height:1;filter:drop-shadow(0 3px 8px rgba(0,0,0,.7));}
.build-square-card.is-placeholder .build-square-image{
  background:repeating-linear-gradient(135deg,#221a10 0 7px,#191309 7px 14px);}
.build-square-card.is-placeholder::after{content:'ART PENDING';font-size:6.5px;letter-spacing:.12em;
  color:#c8b489;opacity:.6;}
.build-square-card b{font-size:11px;line-height:1.15;}
.build-square-card small{font-size:8.5px;opacity:.68;line-height:1.2;}
.build-cost{font-size:9.5px;font-weight:700;color:#f0d18d;letter-spacing:.04em;}

/* Konami / Metal Gear homage */
.mgs-alert{position:absolute;top:-30px;left:50%;transform:translateX(-50%);
  font:900 30px/1 Georgia,serif;color:#fff;text-shadow:0 0 10px #ff2b2b,0 0 22px #ff2b2b,0 2px 3px #000;
  animation:mgsBang .34s cubic-bezier(.2,1.6,.4,1);pointer-events:none;z-index:400;}
@keyframes mgsBang{0%{transform:translateX(-50%) scale(.2);opacity:0}
  60%{transform:translateX(-50%) scale(1.35);opacity:1}100%{transform:translateX(-50%) scale(1);opacity:1}}
.kael-world-avatar.in-cardboard-box::after{content:'📦';position:absolute;inset:0;
  display:grid;place-items:center;font-size:44px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.7));
  animation:boxBob 2.6s ease-in-out infinite;}
@keyframes boxBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
body.tactical-espionage .village-world{filter:saturate(.72) contrast(1.06);}
body.tactical-espionage .village-economy-strip{box-shadow:0 0 0 1px rgba(90,255,120,.28),0 0 18px rgba(60,220,90,.14);}
@media (prefers-reduced-motion:reduce){
  .mgs-alert,.kael-world-avatar.in-cardboard-box::after{animation:none;}
}

/* ==========================================================================
   V30.0 — VILLAGE CONSTRUCTION CATALOG (Village scope only)
   ========================================================================= */
#menu .village-build-tray{
  left:50%!important;right:auto!important;top:76px!important;bottom:calc(74px + env(safe-area-inset-bottom))!important;
  width:min(980px,calc(100vw - 24px))!important;max-height:none!important;height:auto!important;
  transform:translateX(-50%)!important;padding:0!important;overflow:hidden!important;
  border:1px solid rgba(221,180,91,.72)!important;border-radius:18px!important;
  background:linear-gradient(180deg,rgba(20,18,27,.985),rgba(8,10,15,.985))!important;
  box-shadow:0 24px 70px rgba(0,0,0,.78),inset 0 1px rgba(255,255,255,.05)!important;
  display:grid!important;grid-template-rows:auto auto auto minmax(0,1fr) auto!important;
}
#menu .village-build-tray.hidden{display:none!important}
#menu .build-tray-head{
  display:grid!important;grid-template-columns:minmax(0,1fr) auto 42px!important;align-items:center!important;gap:12px!important;
  min-height:66px!important;padding:10px 12px!important;border-bottom:1px solid rgba(221,180,91,.28)!important;
  background:linear-gradient(180deg,rgba(63,43,34,.62),rgba(24,20,27,.25))!important;
}
#menu .build-tray-head>div:first-child{display:grid!important;gap:3px!important;min-width:0!important}
#menu .build-tray-head strong{font-size:15px!important;letter-spacing:.13em!important;color:#f3d899!important}
#menu .build-tray-head small{font-size:9px!important;letter-spacing:.04em!important;color:#b8ad99!important;white-space:normal!important}
#menu .build-tray-head>button{width:38px!important;height:38px!important;border-radius:10px!important;border:1px solid #69533f!important;background:#16141b!important;color:#f5dfaf!important;font-size:22px!important}
#menu .build-treasury{display:grid!important;gap:2px!important;text-align:right!important;padding:6px 10px!important;border:1px solid rgba(221,180,91,.34)!important;border-radius:10px!important;background:rgba(9,10,15,.72)!important}
#menu .build-treasury span{font-size:7px!important;letter-spacing:.16em!important;color:#a99b83!important}
#menu .build-treasury b{font-size:13px!important;color:#ffd66d!important;white-space:nowrap!important}
#menu .build-toolbar{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important;padding:9px 11px 7px!important}
#menu .build-search{display:grid!important;grid-template-columns:26px minmax(0,1fr)!important;align-items:center!important;border:1px solid #4e4650!important;border-radius:10px!important;background:#0b0d13!important;overflow:hidden!important}
#menu .build-search span{text-align:center!important;color:#c8ae75!important;font-size:16px!important}
#menu .build-search input{width:100%!important;min-width:0!important;height:38px!important;border:0!important;outline:none!important;background:transparent!important;color:#f5ead2!important;font-size:11px!important;padding:0 8px 0 0!important}
#menu .build-toolbar>button{height:38px!important;padding:0 13px!important;border:1px solid #65533c!important;border-radius:10px!important;background:#19151a!important;color:#d8bf88!important;font-size:9px!important;font-weight:800!important;letter-spacing:.09em!important}
#menu .build-category-tabs{display:flex!important;gap:6px!important;overflow-x:auto!important;overflow-y:hidden!important;padding:0 11px 9px!important;scrollbar-width:none!important;-webkit-overflow-scrolling:touch!important}
#menu .build-category-tabs::-webkit-scrollbar{display:none!important}
#menu .build-filter{flex:0 0 auto!important;display:flex!important;align-items:center!important;gap:5px!important;height:32px!important;padding:0 10px!important;border:1px solid #51483e!important;border-radius:999px!important;background:#11131a!important;color:#c8bda7!important;font-size:9px!important;font-weight:700!important;white-space:nowrap!important}
#menu .build-filter span{font-size:12px!important}
#menu .build-filter.active{border-color:#e1b85e!important;background:linear-gradient(180deg,#5f4328,#352516)!important;color:#fff0c6!important;box-shadow:inset 0 0 0 1px rgba(255,221,141,.18)!important}
#menu .build-categories{display:block!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;padding:0 11px 10px!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior:contain!important}
#menu .build-catalog-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
#menu .build-catalog-card{min-width:0!important;min-height:144px!important;padding:8px!important;display:grid!important;grid-template-columns:70px minmax(0,1fr)!important;grid-template-rows:auto 1fr!important;gap:7px 9px!important;align-items:start!important;text-align:left!important;border:1px solid rgba(133,110,79,.56)!important;border-radius:12px!important;background:linear-gradient(145deg,rgba(34,29,35,.96),rgba(15,16,22,.98))!important;color:#f4e8cf!important;overflow:hidden!important}
#menu .build-catalog-card:active{transform:scale(.985)!important}
#menu .build-catalog-card.selected{border-color:#ffd36a!important;box-shadow:0 0 0 2px rgba(255,211,106,.25)!important}
#menu .build-card-art{grid-row:1/3!important;width:70px!important;height:70px!important;display:grid!important;place-items:center!important;border:1px solid rgba(207,172,98,.24)!important;border-radius:10px!important;background:radial-gradient(circle at 50% 36%,#33291f,#0b0d12 75%)!important;overflow:hidden!important}
#menu .build-card-art img{width:66px!important;height:66px!important;object-fit:contain!important;image-rendering:auto!important;filter:drop-shadow(0 5px 5px rgba(0,0,0,.55))!important}
#menu .build-card-art .build-placeholder{font-size:34px!important;filter:drop-shadow(0 4px 4px rgba(0,0,0,.65))!important}
#menu .build-card-copy{display:grid!important;gap:3px!important;min-width:0!important}
#menu .build-card-copy b{font-size:11px!important;line-height:1.15!important;color:#f6dfaa!important;white-space:normal!important}
#menu .build-card-copy small{font-size:8px!important;line-height:1.25!important;color:#aaa18f!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important}
#menu .build-production,#menu .build-gold-cost{grid-column:1/-1!important;display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;align-items:center!important;gap:7px!important;padding:5px 7px!important;border-radius:7px!important}
#menu .build-production{background:rgba(86,118,72,.16)!important;border:1px solid rgba(118,150,99,.24)!important}
#menu .build-gold-cost{background:rgba(153,107,39,.15)!important;border:1px solid rgba(210,156,65,.25)!important}
#menu .build-production i,#menu .build-gold-cost i{font-style:normal!important;font-size:6.5px!important;letter-spacing:.1em!important;color:#948b79!important}
#menu .build-production strong,#menu .build-gold-cost strong{font-size:8.5px!important;text-align:right!important;line-height:1.15!important}
#menu .build-production strong{color:#bddd9e!important}
#menu .build-gold-cost strong{color:#ffd36d!important}
#menu .build-empty-state{display:grid!important;gap:5px!important;place-items:center!important;min-height:150px!important;border:1px dashed #554a3d!important;border-radius:12px!important;color:#b4aa98!important}
#menu .build-empty-state b{font-size:12px!important;color:#e3c98f!important}
#menu .build-empty-state span{font-size:9px!important}
#menu .build-hint{margin:0!important;padding:8px 12px!important;border-top:1px solid rgba(221,180,91,.22)!important;background:#0b0d12!important;color:#cfc3aa!important;font-size:8px!important;line-height:1.25!important}
.placed-building-icon{display:grid;place-items:center;width:62px;height:62px;margin:auto;font-style:normal;font-size:38px;background:rgba(10,12,17,.72);border:1px solid rgba(220,177,89,.45);border-radius:10px}
@media(max-width:760px){
  #menu .village-build-tray{top:66px!important;bottom:calc(70px + env(safe-area-inset-bottom))!important;width:calc(100vw - 12px)!important;border-radius:14px!important}
  #menu .build-tray-head{grid-template-columns:minmax(0,1fr) auto 36px!important;gap:7px!important;min-height:58px!important;padding:8px!important}
  #menu .build-tray-head strong{font-size:11px!important}
  #menu .build-tray-head small{font-size:7px!important}
  #menu .build-treasury{padding:5px 7px!important}
  #menu .build-treasury b{font-size:11px!important}
  #menu .build-tray-head>button{width:34px!important;height:34px!important}
  #menu .build-toolbar{padding:7px 8px 6px!important}
  #menu .build-category-tabs{padding:0 8px 7px!important}
  #menu .build-categories{padding:0 8px 8px!important}
  #menu .build-catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  #menu .build-catalog-card{grid-template-columns:56px minmax(0,1fr)!important;min-height:138px!important;padding:7px!important;gap:6px 7px!important}
  #menu .build-card-art{width:56px!important;height:56px!important}
  #menu .build-card-art img{width:53px!important;height:53px!important}
  #menu .build-card-art .build-placeholder{font-size:29px!important}
}
@media(max-width:390px){
  #menu .build-catalog-grid{grid-template-columns:1fr!important}
  #menu .build-catalog-card{min-height:116px!important;grid-template-columns:64px minmax(0,1fr)!important;grid-template-rows:auto auto!important}
  #menu .build-card-art{width:64px!important;height:64px!important}
  #menu .build-card-art img{width:60px!important;height:60px!important}
  #menu .build-production,#menu .build-gold-cost{grid-column:2!important;padding:4px 6px!important}
}

/* V30.5 — unified FF4-style Village map */
#menu .fresh-village-world.village-world-v1{width:5322px!important;height:2661px!important;min-width:5322px!important;min-height:2661px!important;background:#040605!important;overflow:hidden!important;}
#menu .village-unified-ground{position:absolute;inset:0;width:5322px;height:2661px;display:block;object-fit:fill;image-rendering:auto;pointer-events:none;user-select:none;-webkit-user-drag:none;z-index:1;}
#menu .unified-overlay{left:1774px!important;top:887px!important;width:1774px!important;height:887px!important;overflow:visible!important;z-index:20;}
#menu .village-camera-controls,#menu .village-district-nav,#menu .district-nameplate,#menu .district-connector{display:none!important;}
#menu .pixel-village{touch-action:none!important;cursor:default!important;}
#menu .fresh-village-world{transition:none!important;}

/* V31.0 — single the_village_main backdrop / FF4 camera */
#menu .fresh-village-world.village-world-v1{
  width:2048px!important;height:2048px!important;min-width:2048px!important;min-height:2048px!important;
  background:#050706!important;overflow:hidden!important;
}
#menu .village-unified-ground{
  position:absolute!important;inset:0!important;width:2048px!important;height:2048px!important;
  object-fit:fill!important;image-rendering:auto!important;z-index:1!important;
}
#menu .district-old-town{left:0!important;top:0!important;width:2048px!important;height:2048px!important;}
#menu .fresh-village-world .village-plot{width:265px!important;height:340px!important;}
#menu .fresh-village-world .plot-0{left:890px!important;top:405px!important;}
#menu .fresh-village-world .plot-1{left:1235px!important;top:405px!important;}
#menu .fresh-village-world .plot-2{left:1590px!important;top:405px!important;width:310px!important;}
#menu .fresh-village-world .plot-3{left:890px!important;top:780px!important;}
#menu .fresh-village-world .plot-4{left:1235px!important;top:780px!important;}
#menu .fresh-village-world .plot-5{left:1590px!important;top:780px!important;width:310px!important;}
#menu .fresh-village-world .plot-6{left:890px!important;top:1160px!important;}
#menu .fresh-village-world .plot-7{left:1235px!important;top:1160px!important;}
#menu .fresh-village-world .plot-8{left:1590px!important;top:1160px!important;width:310px!important;}
#menu .fresh-village-world .village-plot .placed-building img{width:250px!important;height:285px!important;bottom:12px!important;}
#menu .cathedral-hotspot{left:1740px!important;top:1510px!important;width:250px!important;height:350px!important;}

/* V31.1 — corrected full HEIC composite and native FF4 map scale */
#menu .fresh-village-world.village-world-v1{
  width:1536px!important;height:1024px!important;min-width:1536px!important;min-height:1024px!important;
  background:#050706!important;overflow:hidden!important;
}
#menu .village-unified-ground{
  width:1536px!important;height:1024px!important;object-fit:fill!important;
  image-rendering:auto!important;
}
#menu .district-old-town{left:0!important;top:0!important;width:1536px!important;height:1024px!important;}
#menu .fresh-village-world .village-plot{
  width:auto!important;height:auto!important;border-radius:7px!important;
}
#menu .fresh-village-world .village-plot .placed-building img{
  width:128px!important;height:108px!important;bottom:2px!important;
}
#menu .fresh-village-world .village-plot.building-house .placed-building img{width:112px!important;height:118px!important;}
#menu .fresh-village-world .village-plot.building-farm .placed-building img{width:108px!important;height:82px!important;bottom:10px!important;}
#menu .cathedral-hotspot{left:640px!important;top:35px!important;width:255px!important;height:270px!important;}

/* V31.2 — Living Village ambient polish */
#menu .village-ambience{position:absolute;inset:0;z-index:12;overflow:hidden;pointer-events:none;contain:layout paint;}
#menu .river-life{position:absolute;opacity:.16;mix-blend-mode:screen;filter:blur(.3px);background:repeating-linear-gradient(112deg,transparent 0 15px,rgba(126,216,255,.58) 16px 18px,transparent 19px 36px);background-size:180px 70px;animation:villageWaterDrift 7s linear infinite;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}
#menu .river-top{left:-30px;top:-8px;width:1596px;height:128px;transform:rotate(-1deg)}
#menu .river-left{left:-80px;top:410px;width:760px;height:170px;transform:rotate(-8deg)}
#menu .river-right{right:-90px;top:405px;width:760px;height:175px;transform:rotate(8deg)}
#menu .lantern-glow{position:absolute;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,rgba(255,192,78,.24) 0,rgba(255,159,50,.09) 34%,transparent 70%);mix-blend-mode:screen;animation:lanternBreathe 3.8s ease-in-out infinite;}
#menu .glow-cathedral{left:703px;top:214px;width:150px;height:150px}
#menu .glow-crossroad{left:700px;top:360px;animation-delay:-1.1s}
#menu .glow-south{left:704px;top:850px;animation-delay:-2.2s}
#menu .chimney-smoke{position:absolute;width:50px;height:100px;opacity:.42;}
#menu .smoke-left{left:355px;top:135px}.smoke-right{left:1165px;top:135px}
#menu .chimney-smoke i{position:absolute;left:18px;bottom:0;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle,rgba(196,204,213,.46),rgba(100,112,124,.15) 55%,transparent 72%);filter:blur(1px);animation:chimneyRise 5.8s ease-out infinite;}
#menu .chimney-smoke i:nth-child(2){animation-delay:-1.9s;left:10px}#menu .chimney-smoke i:nth-child(3){animation-delay:-3.8s;left:25px}
#menu .village-motes{position:absolute;inset:0}.village-motes i{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(255,218,145,.75);box-shadow:0 0 7px rgba(255,190,76,.65);animation:moteFloat 10s ease-in-out infinite;opacity:.18}
#menu .raven-flock{position:absolute;top:150px;left:-100px;width:90px;height:60px;animation:ravenCross 5.4s linear forwards;z-index:80;}
#menu .raven-flock.from-right{left:auto;right:-100px;animation-name:ravenCrossReverse}
#menu .raven-flock i{position:absolute;left:calc(var(--i,0) * 18px);top:calc(20px + var(--raven-rise));width:16px;height:7px;animation:ravenWing .34s ease-in-out var(--raven-delay) infinite alternate;filter:drop-shadow(0 2px 1px #0008)}
#menu .raven-flock i::before,#menu .raven-flock i::after{content:"";position:absolute;top:2px;width:9px;height:4px;background:#090b0d;border-radius:80% 10% 80% 10%}
#menu .raven-flock i::before{right:7px;transform-origin:right center;transform:rotate(18deg)}#menu .raven-flock i::after{left:7px;transform-origin:left center;transform:scaleX(-1) rotate(18deg)}
#menu .raven-flock i:nth-child(2){left:25px;top:7px}#menu .raven-flock i:nth-child(3){left:47px;top:28px}#menu .raven-flock i:nth-child(4){left:68px;top:3px}
#menu .pixel-village.village-arrival::after{content:"";position:absolute;inset:0;z-index:150;pointer-events:none;background:radial-gradient(circle at center,transparent 45%,rgba(0,0,0,.42));animation:villageArrival 1.05s ease-out forwards}
@keyframes villageWaterDrift{to{background-position:180px 0}}
@keyframes lanternBreathe{0%,100%{opacity:.55;transform:scale(.94)}50%{opacity:1;transform:scale(1.08)}}
@keyframes chimneyRise{0%{transform:translate(0,28px) scale(.55);opacity:0}18%{opacity:.55}100%{transform:translate(10px,-60px) scale(2.5);opacity:0}}
@keyframes moteFloat{0%,100%{transform:translate(0,0);opacity:.08}50%{transform:translate(14px,-24px);opacity:.5}}
@keyframes ravenCross{from{transform:translateX(0)}to{transform:translateX(1740px)}}
@keyframes ravenCrossReverse{from{transform:translateX(0) scaleX(-1)}to{transform:translateX(-1740px) scaleX(-1)}}
@keyframes ravenWing{from{transform:translateY(-1px) scaleY(.65)}to{transform:translateY(2px) scaleY(1.35)}}
@keyframes villageArrival{0%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){#menu .river-life,#menu .lantern-glow,#menu .chimney-smoke i,#menu .village-motes i,#menu .raven-flock{animation:none!important}.raven-flock{display:none!important}}

/* V31.3 — Living Village: Day, Night & Weather */
#menu .living-village-fx{position:absolute;inset:0;z-index:13;pointer-events:none;overflow:hidden;contain:layout paint;--night-alpha:0;--warm-alpha:0;--day-alpha:0}
#menu .daylight-tint,#menu .night-vignette{position:absolute;inset:-2px;transition:background 3s ease,opacity 3s ease;mix-blend-mode:multiply}
#menu .daylight-tint{background:rgba(255,211,145,var(--warm-alpha));mix-blend-mode:soft-light}
#menu .night-vignette{background:radial-gradient(circle at 50% 52%,rgba(14,25,46,calc(var(--night-alpha)*.3)) 0%,rgba(3,8,22,var(--night-alpha)) 100%)}
#menu .time-dawn{--night-alpha:.24;--warm-alpha:.28}#menu .time-morning{--night-alpha:0;--warm-alpha:.1}#menu .time-afternoon{--night-alpha:0;--warm-alpha:.04}#menu .time-evening{--night-alpha:.22;--warm-alpha:.42}#menu .time-night{--night-alpha:.56;--warm-alpha:.12}#menu .time-deep-night{--night-alpha:.68;--warm-alpha:.04}
#menu .living-village-fx > .weather-fog{position:absolute;left:-25%;width:150%;height:46%;opacity:0;background:radial-gradient(ellipse at center,rgba(224,231,229,.42),rgba(175,188,190,.18) 48%,transparent 72%);filter:blur(15px);transition:opacity 4s ease;animation:fogDrift 23s ease-in-out infinite alternate}
#menu .fog-a{top:25%}.fog-b{top:53%;animation-duration:31s!important;animation-direction:alternate-reverse!important}
#menu .living-village-fx.weather-fog .weather-fog{opacity:.78}
@keyframes fogDrift{from{transform:translateX(-8%) scale(1)}to{transform:translateX(8%) scale(1.08)}}
#menu .rain-field{position:absolute;inset:-80px 0 0;opacity:0;transition:opacity 1.8s ease;background:linear-gradient(rgba(12,22,35,.13),rgba(7,13,22,.23))}
#menu .living-village-fx.weather-rain .rain-field{opacity:1}
#menu .rain-field i{position:absolute;top:-60px;width:1px;height:31px;background:linear-gradient(transparent,rgba(210,229,241,.82));transform:rotate(13deg);animation:villageRain linear infinite}
@keyframes villageRain{to{transform:translate(160px,1160px) rotate(13deg)}}
#menu .wind-leaves{position:absolute;inset:0;opacity:.25;transition:opacity 2s ease}#menu .weather-wind .wind-leaves{opacity:1}#menu .weather-rain .wind-leaves{opacity:.55}
#menu .wind-leaves i{position:absolute;left:var(--leaf-x);top:var(--leaf-y);width:7px;height:4px;background:#6e4d2c;border-radius:80% 15% 80% 15%;filter:drop-shadow(0 1px 1px #0005);animation:leafBlow var(--leaf-duration) linear var(--leaf-delay) infinite}
#menu .wind-leaves i:nth-child(3n){background:#826232}#menu .wind-leaves i:nth-child(4n){background:#4f642f}
@keyframes leafBlow{0%{transform:translate(-520px,-25px) rotate(0);opacity:0}12%{opacity:.85}88%{opacity:.75}100%{transform:translate(650px,110px) rotate(var(--leaf-spin));opacity:0}}
#menu .firefly-field{position:absolute;inset:0;opacity:0;transition:opacity 3s ease}#menu .time-night .firefly-field,#menu .time-deep-night .firefly-field{opacity:1}
#menu .firefly-field i{position:absolute;width:3px;height:3px;border-radius:50%;background:#eaff9b;box-shadow:0 0 5px 2px #cfff72;animation:fireflyFloat ease-in-out infinite alternate}
@keyframes fireflyFloat{0%{transform:translate(-8px,7px);opacity:.1}45%{opacity:1}100%{transform:translate(12px,-13px);opacity:.3}}
#menu .time-night .lantern-glow,#menu .time-deep-night .lantern-glow{opacity:.88!important;filter:blur(8px) brightness(1.25)}
#menu .village-atmosphere-hud{position:absolute;top:max(10px,env(safe-area-inset-top));left:50%;z-index:220;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:6px 11px;border:1px solid rgba(210,180,130,.42);border-radius:999px;background:rgba(10,13,18,.78);box-shadow:0 4px 14px #0008;color:#eee0c5;font:700 10px/1.1 system-ui,sans-serif;letter-spacing:.05em;text-transform:uppercase;pointer-events:none;backdrop-filter:blur(5px)}
#menu .village-atmosphere-hud i{width:3px;height:3px;border-radius:50%;background:#bd9360}.village-atmosphere-hud.near-secret::after{content:'✦ SECRET NEARBY';position:absolute;top:calc(100% + 5px);left:50%;transform:translateX(-50%);white-space:nowrap;padding:4px 8px;border-radius:8px;background:#261c12e8;color:#ffd878;box-shadow:0 3px 10px #0008;font-size:9px;animation:secretHint 1.2s ease-in-out infinite alternate}
@keyframes secretHint{to{transform:translateX(-50%) translateY(2px);filter:brightness(1.25)}}
#menu .secret-found-burst{position:absolute;z-index:180;transform:translate(-50%,-50%);font-size:32px;color:#ffe68a;text-shadow:0 0 9px #ffd65c,0 3px 8px #000;pointer-events:none;animation:secretBurst 1.5s ease-out forwards}
@keyframes secretBurst{0%{opacity:0;transform:translate(-50%,-30%) scale(.4)}25%{opacity:1;transform:translate(-50%,-70%) scale(1.3)}100%{opacity:0;transform:translate(-50%,-160%) scale(.8)}}
#menu .living-citizen:not(.is-idle) i{animation-duration:calc(.68s / var(--village-pace,1))}
@media(max-width:700px){#menu .village-atmosphere-hud{top:max(6px,env(safe-area-inset-top));font-size:9px;padding:5px 9px}}
@media(prefers-reduced-motion:reduce){#menu .weather-fog,#menu .rain-field i,#menu .wind-leaves i,#menu .firefly-field i,#menu .secret-found-burst{animation:none!important}.village-atmosphere-hud.near-secret::after{animation:none!important}}

/* V31.5 — Living Economy, construction, services, wildlife and events */
#menu .village-life-layer{position:absolute;inset:0;z-index:57;pointer-events:none;overflow:hidden}
#menu .district-aura{position:absolute;border:1px solid transparent;border-radius:32px;opacity:.32;transition:opacity .5s;box-shadow:inset 0 0 45px rgba(255,255,255,.03)}
#menu .district-aura b{position:absolute;top:10px;left:16px;padding:4px 7px;border-radius:10px;background:#0b0d10b8;color:#e8d8b8;font:800 8px/1 system-ui;letter-spacing:.12em;opacity:.7}
#menu .aura-residential{left:155px;top:75px;width:430px;height:310px;border-color:#88a46d40}.aura-commerce{left:940px;top:75px;width:430px;height:315px;border-color:#d0a35d48}.aura-civic{left:535px;top:535px;width:455px;height:415px;border-color:#758eae42}
#menu .wildlife,#menu .river-fish{position:absolute;font-size:20px;filter:drop-shadow(0 3px 2px #0009);animation:wildlifeWander 14s ease-in-out infinite alternate}
#menu .wildlife-cat{left:480px;top:375px}.wildlife-dog{left:1035px;top:515px;animation-delay:-5s}.wildlife-deer{left:1295px;top:775px;font-size:26px;animation-duration:20s}
#menu .river-fish{font:900 16px serif;color:#b7d5cf;opacity:.65;filter:drop-shadow(0 2px 2px #123);animation:fishSwim 9s linear infinite}.fish-a{left:210px;top:470px}.fish-b{left:1200px;top:465px;animation-delay:-4s}
@keyframes wildlifeWander{0%{transform:translate(0,0) scaleX(1)}48%{transform:translate(42px,-8px) scaleX(1)}52%{transform:translate(42px,-8px) scaleX(-1)}100%{transform:translate(-20px,12px) scaleX(-1)}}
@keyframes fishSwim{to{transform:translateX(170px)}}
#menu .economy-caravan{position:absolute;left:540px;top:872px;display:flex;align-items:center;gap:5px;color:#ead4ac;font:700 9px system-ui;text-shadow:0 2px 2px #000;animation:caravanRoute 28s ease-in-out infinite}
#menu .economy-caravan i{font-style:normal;font-size:25px}.economy-caravan span{padding:3px 6px;border-radius:8px;background:#17120dc7;border:1px solid #b78a4b55}
@keyframes caravanRoute{0%,8%{transform:translateX(-130px);opacity:0}15%{opacity:1}48%{transform:translateX(430px);opacity:1}55%,100%{transform:translateX(530px);opacity:0}}
#menu .delivery-worker{position:absolute;left:690px;top:500px;font-size:18px;opacity:0;animation:workerDelivery 8s ease-in-out infinite}.worker-b{left:815px;animation-delay:-4s}
#menu .construction-busy .delivery-worker{opacity:1}.delivery-worker i{font-style:normal;filter:drop-shadow(0 2px 2px #000)}
@keyframes workerDelivery{0%{transform:translateY(230px)}50%{transform:translateY(0)}100%{transform:translateY(230px)}}
#menu .village-plot.construction-active .placed-building img,#menu .village-plot.construction-active .placed-building-icon{filter:sepia(.7) brightness(.72);opacity:.72}
#menu .village-plot.construction-stage-0 .placed-building img{clip-path:inset(72% 0 0)}#menu .village-plot.construction-stage-1 .placed-building img{clip-path:inset(47% 0 0)}#menu .village-plot.construction-stage-2 .placed-building img{clip-path:inset(22% 0 0)}#menu .village-plot.construction-stage-3 .placed-building img{clip-path:inset(5% 0 0)}
#menu .build-scaffold{position:absolute;inset:8px 8px 15px;border:3px solid #8d653d;border-left-width:5px;border-right-width:5px;background:repeating-linear-gradient(90deg,transparent 0 22px,#9b724a99 23px 26px,transparent 27px 43px);z-index:5;opacity:.9}
#menu .hammer-sparks{position:absolute;right:18%;top:20%;width:5px;height:5px;border-radius:50%;background:#ffd76a;box-shadow:8px 4px #ffae46,-5px 8px #fff0a2;animation:hammerSpark .65s steps(2) infinite;z-index:8}
@keyframes hammerSpark{50%{transform:scale(1.7);opacity:.2}}
#menu .village-event-banner{position:absolute;left:50%;top:72px;transform:translateX(-50%);width:300px;padding:8px 12px;border-radius:14px;background:linear-gradient(#271d15ee,#100d0bee);border:1px solid #d4a66199;box-shadow:0 8px 24px #000a;color:#f5dfb9;text-align:center;font:700 10px system-ui;animation:eventArrive .5s ease-out}
#menu .village-event-banner b{display:block;color:#ffd582;font-size:12px}.village-event-banner span{display:block;margin-top:3px;font-weight:500}.village-event-banner.hidden{display:none}
@keyframes eventArrive{from{opacity:0;transform:translate(-50%,-12px)}to{opacity:1;transform:translate(-50%,0)}}
#menu .event-festival .lantern-glow{filter:brightness(1.45) saturate(1.3)}#menu .event-caravan .economy-caravan{animation-duration:14s}#menu .event-ceremony .glow-cathedral{transform:scale(1.25)}
#menu .village-service-panel{position:absolute;inset:0;z-index:900;display:grid;place-items:center;background:#020406b8;backdrop-filter:blur(4px);padding:18px;pointer-events:auto}.village-service-panel.hidden{display:none}
#menu .service-card{position:relative;width:min(440px,92vw);max-height:76vh;overflow:auto;padding:22px;border-radius:20px;background:linear-gradient(145deg,#211b18,#0e1115);border:1px solid #c99d5d88;box-shadow:0 20px 60px #000;color:#eee1c9}
#menu .service-card h2{margin:0 34px 6px 0;color:#ffd78e;font:800 22px Georgia,serif}.service-copy{margin:0 0 16px;color:#bdb5a8;font:500 13px/1.5 system-ui}.service-close{position:absolute;right:10px;top:9px;width:32px;height:32px;border-radius:50%;border:1px solid #a6875c;background:#171717;color:#fff;font-size:22px}
#menu .service-actions{display:grid;gap:9px}.service-actions button{text-align:left;padding:12px 14px;border-radius:13px;border:1px solid #8e714d80;background:linear-gradient(#29231d,#171717);color:#f3e5ca}.service-actions button b,.service-actions button small{display:block}.service-actions button small{margin-top:4px;color:#b9aa91}
@media(prefers-reduced-motion:reduce){#menu .wildlife,#menu .river-fish,#menu .economy-caravan,#menu .delivery-worker,#menu .hammer-sparks{animation:none!important}}


/* V32.0 — Kingdom progression, research, and awakening */
.v32-progression{margin-top:14px;padding-top:12px;border-top:1px solid rgba(210,185,125,.25)}
.v32-section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.v32-section-head small{display:block;color:#c5a96c;font-size:10px;letter-spacing:.12em}.v32-section-head b{font-family:Georgia,serif;color:#f4e8c7}
.village-research-list{display:grid;gap:8px}.village-research-card{display:flex;gap:10px;align-items:center;width:100%;text-align:left;padding:10px;border:1px solid rgba(207,174,105,.35);background:rgba(18,14,18,.86);color:#eee;border-radius:8px}.village-research-card>span{font-size:24px}.village-research-card div{display:grid;gap:3px}.village-research-card small,.village-research-card em{font-size:10px;color:#cbbfa8}.village-research-card em{color:#9fc6a2;font-style:normal}.progression-empty{margin:0;color:#b9ae9a;font-size:12px}
.kingdom-chronicle-list{display:grid;gap:6px;margin:0;padding:0;list-style:none}.kingdom-chronicle-list li{display:flex;gap:8px;padding:7px 8px;background:rgba(255,255,255,.035);border-radius:6px;font-size:11px;color:#d8cdb8}.kingdom-chronicle-list b{color:#d4b36c}
.shadow-awakening-modal{position:absolute;inset:0;z-index:90;display:grid;place-items:center;background:rgba(4,3,7,.84);backdrop-filter:blur(5px);padding:18px}.shadow-awakening-modal.hidden{display:none}.shadow-awakening-card{max-width:520px;padding:24px;border:2px solid #b38a45;background:linear-gradient(180deg,#211827,#0d0a10);text-align:center;box-shadow:0 18px 70px #000}.shadow-awakening-card>span{color:#dbb866;letter-spacing:.15em;font-size:11px}.shadow-awakening-card h2{font-family:Georgia,serif;color:#fff0c6}.shadow-awakening-card p{color:#cec3b3;line-height:1.55}.shadow-awakening-card .btn{margin-top:8px}

.village-research-card.research-locked{opacity:.58;filter:saturate(.55);cursor:default}

/* ============================================================================
   V32.1 — PROLOGUE & ROADMAP
   ========================================================================= */
.journey-overlay{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;
  justify-content:center;padding:24px;background:rgba(4,3,7,.86);}
.journey-overlay.hidden{display:none;}
.journey-panel{width:min(560px,94vw);max-height:88vh;overflow-y:auto;padding:26px 26px 20px;
  border-radius:16px;color:#f3edf8;
  background:radial-gradient(120% 80% at 50% -10%,#2a1a3c 0%,#120d1c 55%,#0a0710 100%);
  border:1px solid rgba(229,195,122,.34);
  box-shadow:0 30px 80px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06);
  animation:journeyIn .34s cubic-bezier(.2,.9,.3,1);}
@keyframes journeyIn{from{transform:translateY(14px) scale(.985)}to{transform:none}}
.journey-kicker{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:#e5c37a;opacity:.9;}
.journey-panel h2{margin:6px 0 12px;font-family:Georgia,serif;font-size:clamp(22px,3.4vw,30px);
  line-height:1.1;text-shadow:0 3px 18px rgba(160,90,255,.35);}
.journey-panel p{margin:0;color:#cdc2da;font-size:14.5px;line-height:1.65;}
.journey-dots{display:flex;gap:7px;margin:18px 0 4px;}
.journey-dots i{width:7px;height:7px;border-radius:999px;background:rgba(255,255,255,.18);}
.journey-dots i.on{background:#e5c37a;box-shadow:0 0 10px rgba(229,195,122,.7);}
.journey-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;}
.journey-primary,.journey-ghost{padding:10px 20px;border-radius:10px;font:inherit;font-size:13px;
  font-weight:700;cursor:pointer;transition:transform .16s ease,filter .16s ease;}
.journey-primary{color:#2a1c06;background:linear-gradient(180deg,#f2d692,#c99a3f);
  border:1px solid #f6e0ae;box-shadow:0 6px 18px rgba(201,154,63,.3);}
.journey-ghost{color:#cdc2da;background:transparent;border:1px solid rgba(190,170,220,.28);}
.journey-primary:hover,.journey-ghost:hover{transform:translateY(-2px);filter:brightness(1.06);}

.roadmap-progress{height:6px;border-radius:999px;background:rgba(255,255,255,.08);
  overflow:hidden;margin:4px 0 16px;}
.roadmap-progress span{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,#6fe08a,#e5c37a);transition:width .5s cubic-bezier(.2,.9,.3,1);}
.roadmap-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.roadmap-list li{display:flex;gap:11px;align-items:flex-start;padding:11px 12px;border-radius:11px;
  background:linear-gradient(180deg,rgba(28,20,40,.8),rgba(14,10,21,.9));
  border:1px solid rgba(190,170,220,.14);transition:border-color .2s ease,opacity .2s ease;}
.roadmap-list li i{font-style:normal;font-size:14px;line-height:1.3;color:#8d81a0;flex:none;
  width:20px;height:20px;display:grid;place-items:center;border-radius:999px;
  border:1px solid rgba(190,170,220,.24);}
.roadmap-list li b{display:block;font-size:13px;color:#f3edf8;line-height:1.25;}
.roadmap-list li small{display:block;margin-top:3px;font-size:11px;color:#a99bbd;line-height:1.4;}
.roadmap-list li.is-done{border-color:rgba(111,224,138,.45);}
.roadmap-list li.is-done i{color:#0d2413;background:linear-gradient(180deg,#8fe39b,#48a45c);
  border-color:#a9f0b3;}
.roadmap-list li.is-done b{color:#9df0b0;text-decoration:line-through;text-decoration-color:rgba(157,240,176,.4);}

.roadmap-fab{position:fixed;right:16px;bottom:calc(96px + env(safe-area-inset-bottom,0px));z-index:400;
  display:flex;align-items:center;gap:6px;padding:9px 13px;border-radius:999px;cursor:pointer;
  font:inherit;font-size:15px;color:#f3edf8;
  background:linear-gradient(180deg,rgba(42,30,58,.96),rgba(18,13,28,.98));
  border:1px solid rgba(229,195,122,.42);box-shadow:0 8px 22px rgba(0,0,0,.55);
  transition:transform .16s ease,border-color .16s ease;}
.roadmap-fab span{font-size:11px;font-weight:700;color:#e5c37a;letter-spacing:.04em;}
.roadmap-fab:hover{transform:translateY(-2px);border-color:rgba(229,195,122,.85);}
.roadmap-fab.hidden{display:none;}
@media (max-width:620px){ .journey-panel{padding:20px 18px 16px;} .journey-panel p{font-size:13.5px;} }
@media (prefers-reduced-motion:reduce){ .journey-panel{animation:none;} }


/* V32.2.3 — stable card artwork rendering on Safari/iPadOS */
#deckScreen .card-art .art-sigil,
#deckScreen .deck-card-art span,
#deckScreen .hero-support-card i,
#deckScreen .ground-defense-slot .art-sigil{
  opacity:1 !important;
  visibility:visible !important;
  color:#fff4dc !important;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif !important;
  -webkit-font-smoothing:antialiased;
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  contain:paint;
}
/* Remove hover-only compositing; icons must remain painted while scrolling. */
#deckScreen .portrait-card:hover .art-sigil,
#deckScreen .deck-slot.poker-mini-card:hover .deck-card-art span{
  -webkit-transform:translateZ(0) !important;
  transform:translateZ(0) !important;
}
.battle-tactical-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 10px;padding-top:14px;border-top:1px solid rgba(229,195,122,.24)}
.battle-tactical-actions button{min-height:48px;border:1px solid #84653d;border-radius:10px;background:linear-gradient(180deg,#3a2a22,#171017);color:#ffe5ad;font-weight:700;cursor:pointer}
.battle-tactical-actions button:active{transform:translateY(1px)}
@media(max-width:620px){.battle-tactical-actions{grid-template-columns:1fr}}

/* V32.3.1 — card footer restoration.
   Preserve the original card dimensions, stat row, rarity/footer icons and artwork.
   Only lift the name into the existing dark gap above the stats. */
#deckScreen .portrait-card .card-copy,
#deckScreen .deck-slot.poker-mini-card .deck-card-name{
  flex:none !important;
  min-height:0 !important;
  margin:-3px 0 0 !important;
  padding:2px 4px !important;
  border-radius:5px !important;
  background:rgba(5,3,9,.78) !important;
  border:1px solid rgba(255,255,255,.07) !important;
  position:relative !important;
  z-index:2 !important;
}
#deckScreen .portrait-card .card-copy h3,
#deckScreen .deck-slot.poker-mini-card .deck-card-name{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1.12 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  max-height:none !important;
}

/* V32.3.2 — precise two-row card footer correction.
   Card dimensions, artwork, stats, footer badges and corner icons remain unchanged.
   The title occupies its own fixed dark row immediately above the untouched stats row. */
#deckScreen #collectionCards .portrait-card .card-copy,
#deckScreen #equippedDeck .deck-slot.poker-mini-card .deck-card-name{
  box-sizing:border-box !important;
  flex:0 0 18px !important;
  width:100% !important;
  height:18px !important;
  min-height:18px !important;
  max-height:18px !important;
  margin:-8px 0 0 !important;
  padding:1px 5px 2px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  border-radius:5px !important;
  background:rgba(5,3,9,.88) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  position:relative !important;
  inset:auto !important;
  z-index:2 !important;
  transform:none !important;
}
#deckScreen #collectionCards .portrait-card .card-copy h3,
#deckScreen #equippedDeck .deck-slot.poker-mini-card .deck-card-name{
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  display:block !important;
  text-align:center !important;
  font-size:clamp(9px,1vw,12px) !important;
  line-height:14px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  -webkit-line-clamp:unset !important;
}
#deckScreen #collectionCards .portrait-card .card-primary-stats,
#deckScreen #equippedDeck .deck-slot.poker-mini-card .deck-card-stats{
  flex:0 0 auto !important;
  position:relative !important;
  z-index:2 !important;
  margin:0 !important;
  transform:none !important;
}

/* V32.3.3 — iPad battle-results centering. Keep the panel centered on every viewport. */
#gameOver:not(.hidden){
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  padding:24px 24px calc(100px + env(safe-area-inset-bottom))!important;
}
#gameOver>.panel{
  width:min(620px,calc(100vw - 32px))!important;
  margin:0!important;
  max-height:calc(var(--app-height,100dvh) - 136px - env(safe-area-inset-bottom))!important;
}
@media(max-width:700px){
  #gameOver:not(.hidden){padding:16px 12px calc(92px + env(safe-area-inset-bottom))!important;}
  #gameOver>.panel{width:min(620px,calc(100vw - 24px))!important;}
}

/* V32.4 — Familiar selection */
.familiar-section-title{grid-column:1/-1;padding:18px 4px 8px;text-align:left}.familiar-section-title span{font-size:11px;letter-spacing:.18em;opacity:.7}.familiar-section-title h3{margin:5px 0}.familiar-section-title p{margin:0;opacity:.72}.familiar-choice{display:grid;grid-template-columns:58px 1fr auto;gap:12px;align-items:center;text-align:left;padding:14px;border:1px solid rgba(231,211,159,.22);background:linear-gradient(145deg,rgba(40,31,43,.96),rgba(20,17,25,.96));color:#f4ead7;border-radius:14px;min-height:96px}.familiar-choice.selected{border-color:#d9b85f;box-shadow:0 0 0 2px rgba(217,184,95,.18),0 10px 28px rgba(0,0,0,.35)}.familiar-icon{font-size:38px;text-align:center;filter:drop-shadow(0 0 8px rgba(202,171,255,.45))}.familiar-copy h3,.familiar-copy p{margin:0}.familiar-copy p{font-size:12px;opacity:.72;margin-top:3px}.familiar-level{display:flex;justify-content:space-between;font-size:11px;margin-top:9px}.familiar-xp{height:7px;border-radius:9px;background:#16131b;overflow:hidden;margin-top:5px}.familiar-xp i{display:block;height:100%;background:linear-gradient(90deg,#7552a8,#d9b85f)}.familiar-choice>strong{font-size:10px;letter-spacing:.1em;color:#e8cb7b}@media(max-width:700px){.familiar-choice{grid-template-columns:48px 1fr}.familiar-choice>strong{grid-column:2}.familiar-icon{font-size:32px}}

/* V32.4.2 — Codec overlay for the Metal Gear Solid homages. Self-contained:
   every selector below is unique to this feature, so it can be lifted out in
   one block without touching the rest of the sheet. */
.codec-overlay{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(4,7,5,.82);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);animation:codecIn .18s ease-out}
.codec-overlay.hidden{display:none}
@keyframes codecIn{from{opacity:0}to{opacity:1}}
.codec-frame{width:min(560px,100%);border:2px solid #4de07a;border-radius:10px;background:linear-gradient(180deg,#05170c,#020a06);box-shadow:0 0 0 1px rgba(77,224,122,.25),0 0 42px rgba(77,224,122,.22);padding:16px;font-family:"Courier New",ui-monospace,monospace;color:#8dffb4;position:relative;overflow:hidden}
.codec-frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.28) 2px 4px)}
.codec-freq{display:flex;align-items:baseline;justify-content:center;gap:8px;font-size:11px;letter-spacing:.22em;opacity:.8;margin-bottom:12px}
.codec-freq b{font-size:20px;letter-spacing:.08em;color:#c9ffdc}
.codec-screens{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center}
.codec-face{height:104px;display:flex;align-items:center;justify-content:center;font-size:46px;border:1px solid rgba(77,224,122,.5);border-radius:6px;background:radial-gradient(circle at 50% 35%,rgba(77,224,122,.16),rgba(0,0,0,.6));filter:saturate(.4)}
.codec-wave{display:flex;align-items:center;gap:3px;height:104px}
.codec-wave i{display:block;width:3px;background:#4de07a;border-radius:2px;animation:codecWave .9s ease-in-out infinite}
.codec-wave i:nth-child(1){height:14px;animation-delay:0s}.codec-wave i:nth-child(2){height:30px;animation-delay:.08s}.codec-wave i:nth-child(3){height:48px;animation-delay:.16s}.codec-wave i:nth-child(4){height:62px;animation-delay:.24s}.codec-wave i:nth-child(5){height:48px;animation-delay:.32s}.codec-wave i:nth-child(6){height:30px;animation-delay:.4s}.codec-wave i:nth-child(7){height:14px;animation-delay:.48s}
@keyframes codecWave{0%,100%{transform:scaleY(.45);opacity:.55}50%{transform:scaleY(1);opacity:1}}
.codec-text{margin-top:14px;min-height:84px;border-top:1px solid rgba(77,224,122,.35);padding-top:10px}
.codec-text b{display:block;font-size:12px;letter-spacing:.18em;color:#c9ffdc;margin-bottom:6px}
.codec-text p{margin:0;font-size:14px;line-height:1.5}
.codec-hint{margin-top:12px;text-align:center;font-size:10px;letter-spacing:.2em;opacity:.55}
@media(max-width:520px){.codec-face{height:78px;font-size:34px}.codec-wave{height:78px}.codec-frame{padding:12px}.codec-text p{font-size:13px}}
@media(prefers-reduced-motion:reduce){.codec-overlay{animation:none}.codec-wave i{animation:none}}
/* Psycho Mantis "I moved it with my mind" */
.mgs-mantis-move{animation:mantisMove 1.5s ease-in-out}
@keyframes mantisMove{0%,100%{transform:none}20%{transform:translate3d(-9px,4px,0) rotate(-1.1deg)}45%{transform:translate3d(11px,-5px,0) rotate(1.3deg)}70%{transform:translate3d(-6px,3px,0) rotate(-.7deg)}}
@media(prefers-reduced-motion:reduce){.mgs-mantis-move{animation:none}}
/* V32.5 — THREE.JS VILLAGE WORLD */
#villageThreeCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;touch-action:none;background:#091018}
body.village-three-active .pixel-village #villageWorld{background:transparent!important;pointer-events:auto!important}
body.village-three-active .pixel-village #villageWorld>.village-ground,
body.village-three-active .pixel-village #villageWorld>.village-path,
body.village-three-active .pixel-village #villageWorld>.village-stream,
body.village-three-active .pixel-village #villageWorld>.village-building,
body.village-three-active .pixel-village #villageWorld>.hero-villager,
body.village-three-active .pixel-village #villageWorld>.villager,
body.village-three-active .pixel-village #villageWorld>.kael-world-avatar,
body.village-three-active .pixel-village #villageWorld>.village-citizen-layer,
body.village-three-active .pixel-village #villageWorld>.village-life-layer,
body.village-three-active .pixel-village #villageWorld>.village-ambience-layer{opacity:0!important;visibility:hidden!important}
body.village-three-active .pixel-village #villageWorld #villagePlots{opacity:0!important;pointer-events:auto!important}
body.village-three-active .pixel-village>.village-topbar,
body.village-three-active .pixel-village>.village-economy-strip,
body.village-three-active .pixel-village>.village-build-btn,
body.village-three-active .pixel-village>.village-build-tray,
body.village-three-active .pixel-village>.village-economy-panel,
body.village-three-active .pixel-village>.village-service-panel{z-index:20}
body.village-three-active .village-camera-controls{display:none!important}

#villageThreeStatus{position:absolute;left:50%;top:82px;transform:translateX(-50%);z-index:80;padding:9px 14px;border:1px solid rgba(218,177,96,.65);border-radius:8px;background:rgba(7,9,14,.92);color:#f1d69a;font:700 11px/1.2 Georgia,serif;letter-spacing:.12em;white-space:nowrap;pointer-events:none;box-shadow:0 8px 22px rgba(0,0,0,.45)}
body.village-three-error #villageThreeStatus{color:#ffb0a8;border-color:#b74d45;white-space:normal;max-width:min(88vw,620px);text-align:center}


/* V32.5.2 — THREE.JS-ONLY VILLAGE. The legacy painted world is permanently removed. */
#menu .pixel-village{position:relative!important;background:#091018!important;overflow:hidden!important;}
#menu #villageWorld{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;background:transparent!important;transform:none!important;z-index:4!important;overflow:visible!important;pointer-events:none!important;}
#menu #villageWorld .village-unified-ground,
#menu #villageWorld .village-sky-layer,
#menu #villageWorld .village-ambience,
#menu #villageWorld .village-ambience-layer,
#menu #villageWorld .village-life-layer,
#menu #villageWorld .village-citizen-layer,
#menu #villageWorld .kael-world-avatar,
#menu #villageWorld .district-nameplate,
#menu #villageWorld .village-district-nav{display:none!important;opacity:0!important;visibility:hidden!important;}
#menu #villageWorld .district-old-town{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;left:0!important;top:0!important;pointer-events:none!important;}
#menu #villageWorld #villagePlots{position:absolute!important;inset:0!important;opacity:0!important;pointer-events:none!important;}
#villageThreeCanvas{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:block!important;z-index:2!important;touch-action:none!important;background:#091018!important;}
body:not(.village-three-active) #menu #villageWorld{background:#091018!important;}
#menu .three-hard-error{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;background:#090c12;color:#f4d99c;text-align:center;pointer-events:auto;z-index:100;}
#menu .three-hard-error b{font:700 20px Georgia,serif;letter-spacing:.08em;}
#menu .three-hard-error span{max-width:620px;color:#ffaaa2;font:14px system-ui,sans-serif;}


/* V32.6.2 — 3D Village resilience states.
   The 3D layer is an enhancement. When it cannot start, or when iOS Safari
   reclaims the WebGL context, the classic 2D Village must stay visible and
   usable rather than collapsing to a black screen. */
body.village-three-error #villageWorld,
body.village-three-context-lost #villageWorld{background:#091018}
body.village-three-error #menu #villageWorld{background:transparent!important}
body.village-three-context-lost #villageThreeCanvas{opacity:.25;filter:grayscale(1)}
body.village-three-context-lost .pixel-village::after{content:'3D paused — Safari reclaimed the graphics context';position:absolute;left:50%;top:82px;transform:translateX(-50%);z-index:90;padding:8px 14px;border:1px solid rgba(218,177,96,.5);border-radius:8px;background:rgba(7,9,14,.94);color:#f1d69a;font:700 11px/1.2 Georgia,serif;letter-spacing:.06em;pointer-events:none}
/* the status banner sat under the economy strip's stacking context */
#villageThreeStatus{z-index:95!important;top:128px!important}

/* V32.6.2 — Metal Gear Solid homages, wave two. Self-contained block. */
.mgs-cry{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;pointer-events:none;z-index:60}
.mgs-cry b{opacity:0;transform:scale(.82);font:700 clamp(26px,7vw,58px)/1 Georgia,serif;letter-spacing:.06em;color:#ffe14d;text-shadow:0 0 18px rgba(255,120,60,.55),0 3px 0 #160d12}
.mgs-cry b.show{animation:mgsCryIn .5s cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes mgsCryIn{0%{opacity:0;transform:scale(.82)}60%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
.sorrow-river{position:fixed;inset:0;z-index:100001;overflow:hidden;background:linear-gradient(180deg,#02060a,#061119 55%,#02060a);cursor:pointer}
.sorrow-river::after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(180deg,transparent 0 3px,rgba(120,180,210,.05) 3px 6px)}
.sorrow-stream{position:absolute;inset:0}
.sorrow-stream span{position:absolute;bottom:-12%;left:calc(6% + var(--lane) * 12.5%);color:rgba(168,214,232,.5);font:400 clamp(12px,2.1vw,17px)/1 Georgia,serif;letter-spacing:.14em;white-space:nowrap;text-shadow:0 0 14px rgba(120,190,220,.4);animation:sorrowDrift 15s linear infinite;animation-delay:var(--delay)}
@keyframes sorrowDrift{0%{transform:translateY(0) translateX(0);opacity:0}12%{opacity:.85}88%{opacity:.7}100%{transform:translateY(-118vh) translateX(22px);opacity:0}}
.sorrow-copy{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;color:#cfe6f0;max-width:min(90vw,540px);padding:22px;background:radial-gradient(ellipse at center,rgba(3,10,16,.9),rgba(3,10,16,.35) 70%,transparent);pointer-events:none}
.sorrow-copy b{display:block;font:700 13px/1 Georgia,serif;letter-spacing:.34em;color:#8fd3e8;margin-bottom:14px}
.sorrow-copy p{margin:0 0 8px;font:400 clamp(15px,2.6vw,20px)/1.55 Georgia,serif}
.sorrow-copy small{display:block;margin-top:18px;font-size:11px;letter-spacing:.2em;opacity:.5}
@media(prefers-reduced-motion:reduce){.sorrow-stream span{animation-duration:30s}.mgs-cry b.show{animation-duration:.01s}}

/* V33.0.2 — Save Manager */
#moreScreen .panel{max-height:calc(var(--app-height,100vh) - 150px);overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(28px + env(safe-area-inset-bottom));}

/* Centered secondary screens share the usable viewport above permanent navigation. */
#moreScreen:not(.hidden),#heroesScreen:not(.hidden){
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right))
    calc(var(--bottom-nav-h) + 16px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))!important;
}
#moreScreen>.panel,#heroesScreen>.panel{
  width:min(900px,100%)!important;
  height:auto!important;
  max-height:calc(var(--app-height,100dvh) - var(--bottom-nav-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 28px)!important;
  margin:0!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
#heroesScreen .hero-grid{width:100%;}

/* Shadow's permanent path reads left-to-right and uses the available card width. */
#deckScreen .job-node-grid{grid-template-columns:repeat(5,minmax(135px,1fr));gap:12px;}
#deckScreen .job-node{position:relative;min-height:126px;justify-content:flex-start;}
#deckScreen .job-node:not(:nth-child(5n))::after{
  content:'›';position:absolute;right:-10px;top:50%;z-index:2;transform:translateY(-50%);
  color:var(--gold);font-size:20px;opacity:.65;pointer-events:none;
}
@media(max-width:900px){
  #deckScreen .job-node-grid{grid-template-columns:repeat(2,minmax(135px,1fr));}
  #deckScreen .job-node::after{display:none;}
}
@media(max-width:520px){
  #moreScreen:not(.hidden),#heroesScreen:not(.hidden){align-items:flex-start!important;}
  #moreScreen>.panel,#heroesScreen>.panel{padding:14px 12px 22px!important;border-radius:12px!important;}
  #deckScreen .job-node-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;}
  #deckScreen .job-node{flex:0 0 min(72vw,220px);scroll-snap-align:start;}
}
.save-manager-overlay{position:fixed;inset:0;z-index:10050;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(5,4,9,.82);backdrop-filter:blur(8px);}
.save-manager-overlay.hidden{display:none!important;}
.save-manager-card{width:min(720px,100%);max-height:calc(var(--app-height,100vh) - 36px);overflow-y:auto;-webkit-overflow-scrolling:touch;border:1px solid rgba(255,255,255,.16);border-radius:20px;background:linear-gradient(160deg,#21192a,#0d0b12 72%);padding:20px;color:#f4eef7;box-shadow:0 24px 80px rgba(0,0,0,.55);}
.save-manager-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;}
.save-manager-heading h2{margin:3px 0 0;}
.save-manager-close{width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:#17121e;color:inherit;font-size:28px;line-height:1;}
.save-manager-info{margin:16px 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.save-manager-info div{padding:10px 12px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.035);}
.save-manager-info span{display:block;color:#b9adbe;font-size:12px;text-transform:uppercase;letter-spacing:.08em;}
.save-manager-info b{display:block;margin-top:3px;overflow-wrap:anywhere;}
.save-manager-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.save-manager-actions button{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:center;text-align:left;padding:13px;border:1px solid rgba(255,255,255,.13);border-radius:14px;background:#17121e;color:inherit;}
.save-manager-actions button>span{font-size:25px;grid-row:1/3;}
.save-manager-actions button small{color:#b9adbe;}
.save-manager-actions button.danger,.save-manager-confirm button.danger{border-color:rgba(205,77,92,.5);background:#281219;}
.save-manager-confirm{margin-top:14px;padding:14px;border:1px solid rgba(205,77,92,.45);border-radius:14px;background:rgba(82,20,31,.34);}
.save-manager-confirm.hidden{display:none!important;}
.save-manager-confirm div{display:flex;justify-content:flex-end;gap:9px;}
.save-manager-confirm button{padding:10px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:#17121e;color:inherit;}
@media(max-width:620px){.save-manager-info,.save-manager-actions{grid-template-columns:1fr}.save-manager-card{padding:16px}}

/* ==========================================================================
   V34.1 — CARD LEGIBILITY
   The battle hand was a fixed six-column grid (`repeat(6,minmax(0,76px))`) with
   a fixed 70px card height and a 10px name. Six columns never wrap, so on any
   narrow screen every card was crushed toward zero width while `overflow:hidden`
   silently clipped the names — "Holy Water Barrage" rendered as "Holy Wa".
   The hand now wraps into as many rows as it needs, cards size to their content,
   and names get two properly clamped lines at a readable size.
   ========================================================================== */
#hand.battle-hand{
  grid-template-columns:repeat(auto-fit,minmax(96px,116px))!important;
  gap:8px!important;
  max-width:min(760px,96vw);
  margin:0 auto;
  justify-content:center!important;
}
#hand.battle-hand .hand-card{
  height:auto!important;
  min-height:96px;
  display:flex!important;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:2px;
  padding:16px 6px 20px!important;   /* room for the Lv badge and the cost */
  overflow:visible!important;
}
#hand.battle-hand .hand-card .hicon{font-size:26px!important;line-height:1;margin:0;}
#hand.battle-hand .hand-card .hname{
  font-size:11.5px!important;
  line-height:1.18;
  color:#f0e2ea;
  text-align:center;
  overflow-wrap:anywhere;
  hyphens:auto;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
  max-width:100%;
}
#hand.battle-hand .hand-card .hcost{
  position:absolute;left:0;right:0;bottom:3px;
  text-align:center;font-size:12px;font-weight:700;letter-spacing:.02em;
}
#hand.battle-hand .hand-card .hlvl{
  left:0;right:0;top:3px;text-align:center;font-size:9px!important;
  letter-spacing:.08em;opacity:.75;
}
@media(max-width:760px){
  #hand.battle-hand{
    grid-template-columns:repeat(auto-fit,minmax(86px,1fr))!important;
    max-width:96vw;gap:7px!important;
  }
  #hand.battle-hand .hand-card{min-height:90px;padding:15px 5px 19px!important;}
  #hand.battle-hand .hand-card .hicon{font-size:23px!important;}
  #hand.battle-hand .hand-card .hname{font-size:11px!important;}
}
@media(max-width:430px){
  #hand.battle-hand{grid-template-columns:repeat(3,1fr)!important;}
  #hand.battle-hand .hand-card .hname{-webkit-line-clamp:2;}
}
/* The draft/choice cards hid their description entirely below 700px, which left
   the player picking between three cards with no idea what any of them did. */
@media(max-width:700px){
  .card{min-height:148px;}
  .card p{display:block;font-size:11.5px;line-height:1.32;}
  .card h3{font-size:15px;}
  .card .icon{font-size:30px;margin:2px;}
}

/* V34.1 — the save-import picker must be rendered to be clickable on iOS.
   `hidden` (display:none) stops Safari opening the Files picker from script. */
.visually-hidden-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden;clip:rect(0 0 0 0);}

/* ==========================================================================
   CAMPAIGN MAP — centered gothic road presentation
   Scoped to #campaignScreen so no other menu or gameplay surface is affected.
   ========================================================================== */
#campaignScreen{
  align-items:stretch;
  justify-content:center;
  padding:clamp(12px,2.2vw,30px) clamp(12px,3vw,46px) calc(92px + env(safe-area-inset-bottom));
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 50% 8%,rgba(104,78,117,.22),transparent 31%),
    radial-gradient(circle at 16% 52%,rgba(83,51,71,.13),transparent 34%),
    linear-gradient(180deg,rgba(5,4,9,.72),rgba(4,3,8,.97));
  backdrop-filter:none;
}
#campaignScreen::before,
#campaignScreen::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:0;
}
#campaignScreen::before{
  inset:-18% -12%;
  background:
    radial-gradient(ellipse at 28% 36%,rgba(183,171,194,.09),transparent 22%),
    radial-gradient(ellipse at 72% 58%,rgba(146,124,156,.07),transparent 25%),
    radial-gradient(ellipse at 50% 86%,rgba(185,143,91,.055),transparent 22%);
  filter:blur(22px);
  animation:campaignFogDrift 22s ease-in-out infinite alternate;
  will-change:transform;
}
#campaignScreen::after{
  inset:0;
  background:
    radial-gradient(circle at 12% 24%,rgba(231,205,149,.18) 0 1px,transparent 2px),
    radial-gradient(circle at 84% 34%,rgba(207,187,219,.14) 0 1px,transparent 2px),
    radial-gradient(circle at 67% 77%,rgba(231,205,149,.11) 0 1px,transparent 2px),
    radial-gradient(ellipse at center,transparent 38%,rgba(0,0,0,.48) 100%);
  background-size:310px 270px,390px 350px,460px 420px,100% 100%;
  opacity:.72;
  animation:campaignMotes 28s linear infinite;
  will-change:background-position;
}
@keyframes campaignFogDrift{
  from{transform:translate3d(-2%,1%,0) scale(1);}
  to{transform:translate3d(3%,-2%,0) scale(1.04);}
}
@keyframes campaignMotes{
  to{background-position:35px -70px,-48px -90px,62px -110px,0 0;}
}
#campaignScreen>.campaign-panel{
  position:relative;
  z-index:1;
  width:min(1280px,100%);
  max-width:1280px;
  height:100%;
  max-height:none;
  margin:0 auto;
  padding:clamp(20px,2.5vw,34px) clamp(18px,3.2vw,46px) 36px;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior-y:contain;
  scroll-behavior:smooth;
  scrollbar-gutter:stable both-edges;
  -webkit-overflow-scrolling:touch;
  border:1px solid rgba(179,143,100,.48);
  border-radius:clamp(18px,2vw,26px);
  background:
    linear-gradient(90deg,rgba(255,255,255,.025),transparent 12% 88%,rgba(255,255,255,.025)),
    radial-gradient(circle at 50% 0,rgba(100,70,105,.28),transparent 35%),
    linear-gradient(180deg,rgba(20,15,26,.94),rgba(8,7,13,.97));
  box-shadow:0 28px 90px rgba(0,0,0,.62),inset 0 1px rgba(255,239,205,.08),inset 0 0 80px rgba(76,39,64,.12);
}
#campaignScreen>.campaign-panel::-webkit-scrollbar{width:10px;}
#campaignScreen>.campaign-panel::-webkit-scrollbar-track{background:rgba(4,3,7,.62);border-radius:99px;}
#campaignScreen>.campaign-panel::-webkit-scrollbar-thumb{background:linear-gradient(#7d654b,#b08d56);border:3px solid rgba(4,3,7,.72);border-radius:99px;}
#campaignScreen .campaign-panel>.row:first-child{
  width:min(1080px,100%);
  margin:0 auto;
  padding:0 clamp(2px,1vw,12px) clamp(20px,2.5vw,30px);
  gap:20px;
  border-bottom:1px solid rgba(195,158,100,.2);
}
#campaignScreen .campaign-panel>.row:first-child h2{
  margin:0 0 7px;
  color:#f2e6d1;
  font-size:clamp(1.55rem,2.5vw,2.35rem);
  line-height:1.08;
  letter-spacing:.015em;
  text-shadow:0 3px 20px rgba(0,0,0,.85);
}
#campaignScreen .campaign-panel>.row:first-child p{
  max-width:680px;
  margin:0;
  color:#bfb2c0;
  font-size:clamp(.78rem,1.1vw,.94rem);
  line-height:1.55;
}
#campaignScreen #campaignProgress{
  flex:0 0 auto;
  min-width:106px;
  padding:10px 14px;
  text-align:center;
  color:#f3d792;
  border:1px solid rgba(205,166,91,.46);
  border-radius:999px;
  background:rgba(8,6,11,.72);
  box-shadow:inset 0 1px rgba(255,255,255,.06),0 8px 22px rgba(0,0,0,.3);
}
#campaignScreen .chapter-map{
  --road-gap:64px;
  position:relative;
  display:flex;
  flex-direction:column;
  gap:clamp(26px,3.2vw,42px);
  width:min(1080px,100%);
  margin:0 auto;
  padding:clamp(24px,3vw,38px) 0 50px;
  overflow:visible;
}
#campaignScreen .chapter-map::before{
  left:50%;
  top:112px;
  bottom:34px;
  width:4px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(104,78,55,.45),#d0ad67 8%,#826847 92%,rgba(81,60,47,.3));
  box-shadow:0 0 0 1px rgba(19,14,19,.8),0 0 22px rgba(201,163,92,.34);
}
#campaignScreen .campaign-map-title{
  width:min(620px,calc(100% - 80px));
  margin:0 auto 8px;
  padding:10px 18px 18px;
  text-align:center;
  background:radial-gradient(ellipse at center,rgba(63,43,59,.75),transparent 69%);
}
#campaignScreen .campaign-map-title span{
  color:#d3ad69;
  font-size:clamp(.68rem,1vw,.78rem);
  letter-spacing:.34em;
}
#campaignScreen .campaign-map-title strong{
  margin-top:8px;
  color:#f1e4d2;
  font-size:clamp(1.25rem,2vw,1.7rem);
  line-height:1.2;
  text-shadow:0 4px 20px #000;
}
#campaignScreen .chapter-node.map-node{
  position:relative;
  z-index:1;
  width:calc(50% - var(--road-gap));
  min-height:210px;
  grid-template-columns:86px minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) auto;
  align-items:stretch;
  gap:14px 18px;
  padding:18px;
  border:1px solid rgba(137,103,81,.7);
  border-radius:18px;
  background:
    linear-gradient(125deg,rgba(255,255,255,.035),transparent 32%),
    linear-gradient(145deg,rgba(37,27,37,.97),rgba(16,13,20,.985));
  box-shadow:0 18px 42px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.055),inset 0 0 36px rgba(106,55,76,.08);
  transition:transform .28s cubic-bezier(.2,.75,.25,1),border-color .28s ease,box-shadow .28s ease,filter .28s ease;
}
#campaignScreen .chapter-node.map-node::before{
  content:"";
  position:absolute;
  top:42px;
  width:var(--road-gap);
  height:1px;
  background:linear-gradient(90deg,rgba(196,157,91,.2),#c9a15f);
  box-shadow:0 0 8px rgba(207,166,94,.35);
}
#campaignScreen .chapter-node.map-left{align-self:flex-start;}
#campaignScreen .chapter-node.map-right{align-self:flex-end;}
#campaignScreen .chapter-node.map-left::before{left:100%;}
#campaignScreen .chapter-node.map-right::before{right:100%;transform:scaleX(-1);}
#campaignScreen .chapter-node.map-node:not(.locked):hover{
  z-index:3;
  transform:translateY(-5px) scale(1.012);
  border-color:rgba(221,179,99,.92);
  box-shadow:0 26px 55px rgba(0,0,0,.58),0 0 26px rgba(172,111,80,.13),inset 0 1px rgba(255,255,255,.09);
}
#campaignScreen .chapter-node.map-node:not(.locked):focus-within{
  border-color:#e3bd73;
  box-shadow:0 0 0 3px rgba(227,189,115,.16),0 22px 48px rgba(0,0,0,.56);
}
#campaignScreen .chapter-node.map-node.completed{
  border-color:rgba(202,166,91,.88);
  background:
    linear-gradient(125deg,rgba(224,185,104,.05),transparent 34%),
    linear-gradient(145deg,rgba(40,29,35,.98),rgba(24,18,18,.98));
}
#campaignScreen .chapter-node.map-node.locked{
  opacity:.55;
  filter:saturate(.35);
}
#campaignScreen .chapter-node.map-right .map-path-dot,
#campaignScreen .chapter-node.map-left .map-path-dot{
  top:25px;
  left:auto;
  right:calc((var(--road-gap) + 18px) * -1);
}
#campaignScreen .chapter-node.map-right .map-path-dot{
  right:auto;
  left:calc((var(--road-gap) + 18px) * -1);
}
#campaignScreen .map-path-dot{
  width:36px;
  height:36px;
  border-width:2px;
  color:#ffe3a0;
  background:radial-gradient(circle at 50% 35%,#231a1c,#08070b 72%);
  box-shadow:0 0 0 7px #120e15,0 0 0 8px rgba(189,150,87,.2),0 0 24px rgba(215,174,96,.4);
  font-size:.86rem;
}
#campaignScreen .chapter-art{
  grid-row:1;
  min-width:0;
  height:100%;
  min-height:150px;
  border-radius:13px;
  font-size:2.65rem;
  box-shadow:inset 0 0 36px rgba(0,0,0,.78),0 6px 18px rgba(0,0,0,.34);
  overflow:hidden;
}
#campaignScreen .chapter-art span{
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.85));
  transition:transform .3s ease,filter .3s ease;
}
#campaignScreen .chapter-node:not(.locked):hover .chapter-art span{
  transform:translateY(-3px) scale(1.09);
  filter:drop-shadow(0 11px 14px rgba(0,0,0,.9));
}
#campaignScreen .chapter-copy{
  min-width:0;
  align-self:start;
}
#campaignScreen .chapter-copy .section-kicker{
  display:block;
  margin:1px 0 5px;
  color:#d6b36f;
  font-size:.69rem;
  font-weight:700;
  letter-spacing:.17em;
}
#campaignScreen .chapter-copy h3{
  margin:0 0 4px;
  color:#f1e5d8;
  font-size:clamp(1rem,1.45vw,1.22rem);
  line-height:1.2;
  overflow-wrap:anywhere;
}
#campaignScreen .chapter-stars{
  margin:3px 0 9px;
  font-size:.96rem;
}
#campaignScreen .chapter-copy p{
  margin:0 0 11px;
  color:#c7bbc6;
  font-size:.81rem;
  line-height:1.42;
}
#campaignScreen .chapter-meta{
  align-items:center;
  gap:6px;
}
#campaignScreen .chapter-meta span{
  min-width:0;
  padding:5px 8px;
  color:#d9ced9;
  border:1px solid rgba(255,255,255,.075);
  background:rgba(5,4,8,.6);
  font-size:.68rem;
  line-height:1.15;
  white-space:normal;
}
#campaignScreen .star-objectives{
  gap:4px;
  margin-top:10px;
  color:#bdb0be;
}
#campaignScreen .star-objectives small{
  font-size:.68rem;
  line-height:1.25;
}
#campaignScreen .chapter-node.map-node>.btn{
  grid-column:1/-1;
  align-self:end;
  width:100%;
  min-height:44px;
  margin:0;
  border-radius:9px;
  font-weight:700;
  letter-spacing:.015em;
  transition:transform .2s ease,filter .2s ease,box-shadow .2s ease;
}
#campaignScreen .chapter-node.map-node>.btn:not(:disabled):hover{
  transform:translateY(-2px);
  box-shadow:inset 0 1px rgba(255,255,255,.22),0 8px 20px rgba(0,0,0,.5),0 0 18px rgba(194,60,84,.2);
}
#campaignScreen .campaign-panel>.row:last-child{
  position:relative;
  z-index:2;
  width:min(1080px,100%);
  margin:4px auto 0;
  padding-top:24px;
  border-top:1px solid rgba(195,158,100,.2);
}
#campaignScreen #campaignBack{min-width:180px;}

@media(max-width:900px){
  #campaignScreen{
    padding:12px 12px calc(86px + env(safe-area-inset-bottom));
  }
  #campaignScreen>.campaign-panel{
    padding:22px clamp(14px,3vw,26px) 30px;
    border-radius:20px;
  }
  #campaignScreen .chapter-map{
    --road-gap:50px;
  }
  #campaignScreen .chapter-node.map-node{
    min-height:220px;
    grid-template-columns:72px minmax(0,1fr);
    padding:15px;
    gap:12px 14px;
  }
  #campaignScreen .chapter-node.map-right .map-path-dot,
  #campaignScreen .chapter-node.map-left .map-path-dot{
    right:calc((var(--road-gap) + 18px) * -1);
  }
  #campaignScreen .chapter-node.map-right .map-path-dot{
    right:auto;
    left:calc((var(--road-gap) + 18px) * -1);
  }
}
@media(max-width:700px){
  #campaignScreen>.campaign-panel{
    scrollbar-gutter:auto;
  }
  #campaignScreen .campaign-panel>.row:first-child{
    align-items:flex-start;
  }
  #campaignScreen #campaignProgress{
    min-width:86px;
    padding:8px 11px;
  }
  #campaignScreen .chapter-map{
    --mobile-rail:22px;
    gap:22px;
    padding:25px 0 38px;
  }
  #campaignScreen .chapter-map::before{
    left:var(--mobile-rail);
    top:108px;
  }
  #campaignScreen .campaign-map-title{
    width:calc(100% - 52px);
    margin-left:52px;
    padding-inline:4px;
    text-align:left;
  }
  #campaignScreen .chapter-node.map-node{
    width:calc(100% - 58px);
    min-height:0;
    align-self:flex-end!important;
    grid-template-columns:70px minmax(0,1fr);
    padding:15px;
  }
  #campaignScreen .chapter-node.map-node::before{
    top:42px;
    left:auto;
    right:100%;
    width:36px;
    transform:none;
  }
  #campaignScreen .chapter-node.map-right .map-path-dot,
  #campaignScreen .chapter-node.map-left .map-path-dot{
    top:25px;
    left:-54px;
    right:auto;
  }
  #campaignScreen .chapter-art{min-height:136px;}
}
@media(max-width:480px){
  #campaignScreen{
    padding:7px 7px calc(80px + env(safe-area-inset-bottom));
  }
  #campaignScreen>.campaign-panel{
    padding:18px 11px 25px;
    border-radius:16px;
  }
  #campaignScreen .campaign-panel>.row:first-child{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:10px;
    padding-bottom:17px;
  }
  #campaignScreen .campaign-panel>.row:first-child h2{
    font-size:1.35rem;
  }
  #campaignScreen .campaign-panel>.row:first-child p{
    grid-column:1/-1;
  }
  #campaignScreen #campaignProgress{
    align-self:start;
    min-width:76px;
    font-size:.75rem;
  }
  #campaignScreen .chapter-map{
    --mobile-rail:17px;
    gap:18px;
  }
  #campaignScreen .campaign-map-title{
    width:calc(100% - 44px);
    margin-left:44px;
  }
  #campaignScreen .campaign-map-title span{letter-spacing:.2em;}
  #campaignScreen .chapter-node.map-node{
    width:calc(100% - 45px);
    grid-template-columns:54px minmax(0,1fr);
    gap:9px 10px;
    padding:11px;
    border-radius:14px;
  }
  #campaignScreen .chapter-node.map-node::before{width:27px;}
  #campaignScreen .chapter-node.map-right .map-path-dot,
  #campaignScreen .chapter-node.map-left .map-path-dot{
    left:-45px;
  }
  #campaignScreen .map-path-dot{
    width:32px;
    height:32px;
    box-shadow:0 0 0 5px #120e15,0 0 0 6px rgba(189,150,87,.2),0 0 18px rgba(215,174,96,.35);
  }
  #campaignScreen .chapter-art{
    min-height:112px;
    border-radius:10px;
    font-size:2rem;
  }
  #campaignScreen .chapter-copy h3{font-size:.96rem;}
  #campaignScreen .chapter-copy p{
    font-size:.74rem;
    line-height:1.35;
  }
  #campaignScreen .chapter-meta span{
    padding:4px 6px;
    font-size:.61rem;
  }
  #campaignScreen .star-objectives{display:none;}
  #campaignScreen .chapter-node.map-node>.btn{min-height:42px;}
}
@media(orientation:landscape) and (max-height:620px){
  #campaignScreen{
    padding-top:8px;
    padding-bottom:calc(72px + env(safe-area-inset-bottom));
  }
  #campaignScreen>.campaign-panel{
    padding-top:16px;
  }
}
@media(prefers-reduced-motion:reduce){
  #campaignScreen::before,
  #campaignScreen::after{animation:none;}
  #campaignScreen>.campaign-panel{scroll-behavior:auto;}
  #campaignScreen .chapter-node.map-node,
  #campaignScreen .chapter-art span,
  #campaignScreen .chapter-node.map-node>.btn{transition:none;}
}