:root{--bg:#171523;--panel:#292335;--gold:#f4d89a;--edge:#877052;--pink:#ff79b3;--text:#fff3e6}*{box-sizing:border-box}body{margin:0;color:var(--text);font-family:'Yu Gothic','Meiryo',system-ui,sans-serif;background:radial-gradient(circle at 10% 0%,#4e334c,#191522 70%);min-height:100vh}button,select{font:inherit}button{cursor:pointer;background:linear-gradient(#ffdfab,#d9ac61);color:#322339;font-weight:bold;border:1px solid #8d6447;border-radius:8px;padding:10px 12px;box-shadow:inset 0 1px #fff7,0 3px 8px #0005}button:hover{filter:brightness(1.12)}button:disabled{opacity:.4;cursor:not-allowed}button.pink,#endTurn{background:linear-gradient(#ffb7d9,#f26f9b)}button.dark{color:#fff;background:#594663}button.small{font-size:12px;padding:5px 10px}h1,h2,h3,p{margin:0}h3{font-size:16px}small{opacity:.82}.title-screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:20px;background:radial-gradient(circle at 45% 20%,#743f65,#1d1628)}.title-copy{width:min(1180px,100%);text-align:center;color:#fff4de;text-shadow:0 2px 10px #0009}.title-copy h1{font-family:serif;font-size:clamp(30px,5vw,56px);color:#ffd98b;letter-spacing:.04em;text-shadow:0 3px 0 #5a243d,0 8px 16px #000b;line-height:1.15;margin:8px 0}.title-copy h2{font-size:clamp(20px,3vw,30px);color:#ffd6e7;margin-bottom:8px}.title-copy p{font-size:clamp(13px,2vw,18px)}.title-hero{width:min(1280px,100%);border:4px double #dab571;border-radius:16px;overflow:hidden;box-shadow:0 16px 70px #0009;background:linear-gradient(180deg,#51324f,#261e31)}.title-hero img{display:block;width:100%;height:auto}.title-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.title-actions button{font-size:18px;padding:14px 24px}.title-portraits{display:flex;max-width:1080px;gap:8px;width:100%;justify-content:center;flex-wrap:wrap}.title-portraits img{height:76px;width:76px;border:2px solid #f6d5a2;object-fit:cover;border-radius:10px;box-shadow:0 4px 18px #0007}@media (max-width: 760px){.title-screen{padding:14px;gap:14px}.title-actions button{font-size:16px;padding:12px 16px}.title-portraits img{height:60px;width:60px}}

/* v0.4.6 intro screen */
.intro-screen{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:18px;padding:20px;background:radial-gradient(circle at 30% 0%,#6a4366,#1b1626 72%)}
.intro-card{width:min(1220px,100%);display:grid;grid-template-columns:minmax(320px,.95fr) minmax(0,1.05fr);gap:18px;padding:18px;border:3px double #e6c47f;border-radius:18px;background:linear-gradient(145deg,#403049,#241c31);box-shadow:0 18px 60px #0008}
.intro-hero{border:2px solid #d9b06f;border-radius:14px;overflow:hidden;background:#2a2035;min-height:100%;display:flex}
.intro-hero img{display:block;width:100%;height:100%;object-fit:cover}
.intro-story{display:flex;flex-direction:column;justify-content:center;gap:10px;color:#fff3de;line-height:1.8}
.intro-story small{color:#ffd998;font-size:14px;letter-spacing:.08em}
.intro-story h2{font-family:serif;font-size:clamp(28px,3vw,40px);line-height:1.28;color:#ffd98e;text-shadow:0 2px 10px #0008}
.intro-story p{font-size:clamp(15px,1.3vw,18px)}
.intro-points{margin:6px 0 0;padding-left:1.2em;font-size:clamp(14px,1.15vw,17px)}
.intro-points li{margin:6px 0}
.intro-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.intro-actions button{font-size:18px;padding:14px 24px;min-width:220px}
@media(max-width:900px){.intro-card{grid-template-columns:1fr;padding:14px}.intro-hero{max-height:46vh}.intro-actions button{font-size:16px;padding:12px 18px;min-width:180px}}
@media(max-width:600px){.intro-screen{padding:12px;gap:12px}.intro-card{gap:12px;padding:12px}.intro-story h2{font-size:24px}.intro-story p,.intro-points{font-size:14px}.intro-actions{width:100%}.intro-actions button{width:100%;min-width:0}}
main{max-width:1580px;margin:auto;padding:10px}header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px;border:1px solid #d7ac6e;border-radius:10px;background:#34293a;margin-bottom:10px;flex-wrap:wrap}.brand{font-size:19px;color:var(--gold);font-family:serif;font-weight:bold}.brand small{font-size:11px}.status{display:flex;gap:14px;flex-wrap:wrap;font-size:13px}.status span{white-space:nowrap}.phase-tag{padding:5px 10px;border-radius:999px;border:1px solid #f3d692;background:#473549;color:#fff1cd;font-weight:bold;box-shadow:0 0 0 1px #fff2 inset}.phase-tag.player{background:linear-gradient(180deg,#ffbfd9,#e66e9d);color:#4b1831}.phase-tag.enemy{background:linear-gradient(180deg,#f3d28d,#d69549);color:#4b2f10}.phase-tag.wait{background:linear-gradient(180deg,#d1c2ee,#826bc8);color:#24193e}.layout{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(310px,1fr);gap:10px}.panel{border:2px solid #806746;border-radius:10px;background:linear-gradient(145deg,#373044,#211f2e);padding:10px;margin-bottom:10px;box-shadow:inset 0 0 0 1px #c2a87844}.section-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:9px;color:#ffe2a2}.section-head span{font-size:12px}.map{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(6,minmax(65px,1fr));gap:3px;padding:8px;background:radial-gradient(ellipse at center,#6b846f,#293d4d);border-radius:9px;min-height:580px}.tile{min-width:0;min-height:65px;position:relative;border:2px solid #fff6;border-radius:9px;background:linear-gradient(180deg,var(--tile) 0%,var(--tile) 76%,#1f2838 100%);padding:3px;color:white;display:flex;flex-direction:column;justify-content:space-between;align-items:center;text-align:center;box-shadow:inset 0 0 18px #0007,0 0 0 1px #ffffff18;text-shadow:1px 2px 3px #000,0 1px #000;overflow:hidden}.tile::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#ffffff20 0%,transparent 38%,#00000022 100%),repeating-linear-gradient(135deg,#ffffff12 0 7px,transparent 7px 14px);mix-blend-mode:screen;pointer-events:none}.tile.capture-flash{animation:captureFlash 1s steps(2,end) 3;outline:4px solid #fff4a8;filter:brightness(1.22)}.tile-head{position:relative;z-index:1;width:100%;display:flex;justify-content:space-between;align-items:center;gap:2px}.owner-badge{display:inline-block;max-width:100%;font-size:9px;line-height:1;padding:3px 4px;border-radius:999px;background:#0008;border:1px solid #fff4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tile-icon{position:relative;z-index:1;display:grid;place-items:center;min-height:35px;font-size:24px}.tile b{position:relative;z-index:1;font-size:11px;line-height:1.2;word-break:keep-all}.tile img{height:35px;width:35px;border-radius:50%;border:2px solid #fff7;object-fit:cover;box-shadow:0 2px 8px #0007}.tile .tile-value{position:relative;z-index:1;font-size:10px;color:#fff3b9}.tile.selected{outline:3px solid white;z-index:2;filter:brightness(1.25)}.tile.adjacent{box-shadow:0 0 0 2px #fff8,inset 0 0 12px #fff6}.tile .fort{font-size:11px}.legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.legend span{font-size:11px;display:inline-flex;gap:3px;align-items:center}.dot{width:10px;height:10px;border-radius:50%;display:inline-block}.side-col{min-width:0}.territory-info{display:flex;gap:10px;align-items:center;font-size:13px}.territory-info img{width:65px;height:80px;object-fit:cover;border-radius:7px}.territory-info strong{font-size:17px}.commands{display:grid;grid-template-columns:1fr 1fr;gap:7px}.commands button{font-size:13px;padding:10px 6px}.commands button.locked{opacity:.55;filter:grayscale(.2)}.roster-mini{max-height:170px;overflow:auto}.roster-mini>div{font-size:12px;border-bottom:1px solid #6f5f6a;padding:5px}.log{height:135px;overflow-y:auto;display:flex;flex-direction:column;gap:4px;font-size:13px}.log div{padding:4px;border-bottom:1px solid #ffffff19}.bottom{display:flex;justify-content:center;gap:15px;position:sticky;bottom:0;padding:10px;background:#1c162ef2;border:1px solid #856a52;border-radius:9px}.bottom button.pulse-turn{animation:pulseTurn 1s infinite}.bottom button{min-width:135px}.modal,.battle-wrap{position:fixed;inset:0;background:#080712d9;display:flex;justify-content:center;align-items:center;padding:12px;z-index:20}.modal[hidden],.battle-wrap[hidden],#game[hidden],#title[hidden],#intro[hidden]{display:none!important}.modal-card{background:linear-gradient(#3b2f48,#231c2d);border:3px double #eac585;border-radius:12px;padding:15px;max-height:94vh;overflow:auto;width:min(690px,100%);box-shadow:0 20px 80px #000}.modal-head,.battle-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px;color:#ffe09b}.modal-head button{padding:4px 10px}.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.choice{display:flex;align-items:center;gap:10px;text-align:left;padding:8px}.choice img{height:52px;width:52px;object-fit:cover;border-radius:6px}.choice small{font-size:11px}.modal-copy{font-size:14px;line-height:1.8;margin-bottom:14px}.row-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}.stat-row{border-bottom:1px solid #ffffff30;padding:7px;font-size:13px;display:flex;justify-content:space-between;gap:8px;align-items:center}.stat-row button{font-size:12px}.portrait-card{display:flex;align-items:center;gap:14px;margin-bottom:12px}.portrait-card img{width:100px;height:110px;object-fit:cover;border:2px solid #eec98e;border-radius:7px}.battle-panel{width:min(1000px,100%);border:3px solid #b99b6c;background:#211b2c;border-radius:15px;padding:15px;box-shadow:0 20px 80px #000}.battle-parties{display:flex;justify-content:space-around;align-items:center;text-align:center}.battle-parties>div{flex:1}.battle-parties img{width:70px;height:70px;border-radius:50%;object-fit:cover;border:3px solid #deb974}.versus{color:#ffb442;font-size:35px}.battle-field{height:285px;display:grid;grid-template-columns:1fr 70px 1fr;gap:10px;margin:12px 0;padding:12px;background:radial-gradient(ellipse at center,#b3c585,#638676 55%,#426076);border-radius:12px}.units{display:flex;align-content:center;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px}.unit{padding:7px 4px;text-align:center;width:82px;background:#281c42d9;border:1px solid #d8bc7f;border-radius:9px;font-size:11px;transition:transform .15s}.unit.hit{transform:translateX(-8px) rotate(-8deg);background:#bc4345}.unit.strike{transform:translateX(15px) scale(1.12)}.hp-track{height:7px;border:1px solid #b9a0a0;background:#462c38;border-radius:10px;overflow:hidden;margin-top:5px}.hp-track i{display:block;background:#7ae06e;height:100%}.battle-fx{display:grid;place-items:center;font-size:42px;animation:pulse 1s infinite;background:#fff7;color:#351f2f;border-radius:50%;width:64px;height:64px;justify-self:center;align-self:center;box-shadow:0 4px 20px #0004}.battle-fx.impact{animation:impact .35s ease}.battle-log{height:75px;overflow:auto;background:#090812;border:1px solid #655276;padding:8px;font-size:12px}.battle-panel>#battleSkip{display:block;margin:9px auto 0}.result-banner{margin-bottom:12px;padding:10px 14px;border-radius:10px;font-weight:bold;text-align:center}.result-banner.win{background:linear-gradient(90deg,#ffebad,#f6bf6f);color:#4b2f10}.result-banner.lose{background:linear-gradient(90deg,#ffd0d9,#ef7e97);color:#531a28}.result-grid{display:grid;grid-template-columns:1fr 70px 1fr;gap:10px;align-items:center;margin-bottom:14px}.result-side{text-align:center;background:#ffffff0b;border:1px solid #e4c58a55;border-radius:12px;padding:10px}.result-side img{width:min(100%,220px);aspect-ratio:1/1;object-fit:cover;border-radius:12px;border:2px solid #eac585;box-shadow:0 8px 24px #0006;background:#20182c}.result-side strong{display:block;margin-top:8px;font-size:16px}.result-side small{display:block;margin-top:4px;color:#ffe9b9}.result-vs{text-align:center;font-size:28px;font-weight:bold;color:#ffd58e}.result-stats{border-top:1px solid #ffffff20;padding-top:10px}@keyframes pulse{50%{transform:scale(1.25)}}@keyframes impact{0%{transform:scale(.7)}65%{transform:scale(1.2)}100%{transform:scale(1)}}@media(max-width:900px){.layout{grid-template-columns:1fr}.map{min-height:440px;grid-template-rows:repeat(6,minmax(62px,1fr))}.side-col{display:grid;grid-template-columns:1fr 1fr;gap:8px}.side-col .panel:last-child{grid-column:span 2}}@media(max-width:550px){main{padding:4px}header{padding:7px}.brand{font-size:16px}.status{gap:7px;font-size:11px}.map{padding:4px;gap:2px;min-height:365px;grid-template-rows:repeat(6,minmax(55px,1fr))}.tile{min-height:55px;padding:1px;border-width:1px}.owner-badge{font-size:8px;padding:2px 3px}.tile b{font-size:9px}.tile img{width:25px;height:25px}.tile .tile-value{font-size:9px}.side-col{display:block}.commands button{font-size:12px}.title-art{flex-direction:column;min-height:auto}.title-art img{width:100%;height:245px;mask-image:linear-gradient(#000 70%,transparent)}.title-art>div{padding:0 12px 17px}.title-art p{margin-top:8px}.title-actions button{font-size:14px;padding:10px}.title-portraits img{width:42px;height:42px}.bottom{gap:4px;padding:6px}.bottom button{min-width:0;flex:1;padding:9px 3px;font-size:12px}.battle-field{height:325px;grid-template-columns:1fr 30px 1fr;padding:5px;gap:3px}.unit{width:60px;padding:5px 2px;font-size:9px}.versus{font-size:23px}.battle-fx{font-size:24px}.battle-parties img{width:45px;height:45px}.modal-card{padding:10px}.choice-grid{grid-template-columns:1fr}.result-grid{grid-template-columns:1fr;gap:8px}.result-vs{font-size:20px}}

/* === v0.2 title / unit / event enhancements === */
body.title-on .title-copy{animation:titleRise .9s ease both}
body.title-on .title-hero{animation:titleHero 1.2s ease both;position:relative}
body.title-on .title-hero::after{content:'いざ、天下布シートへ';position:absolute;right:18px;bottom:18px;background:#0008;color:#ffe8a7;padding:8px 14px;border:1px solid #f2d68b;border-radius:999px;box-shadow:0 0 18px #0008;animation:pulseBadge 2s infinite}
body.title-on .title-actions button{animation:titleButtons .7s ease both}
body.title-on .title-actions button:nth-child(2){animation-delay:.08s}
body.title-on .title-actions button:nth-child(3){animation-delay:.16s}
body.title-on .title-portraits img{animation:portraitFloat 3s ease-in-out infinite}
body.title-on .title-portraits img:nth-child(2n){animation-delay:.3s}
body.title-on .title-portraits img:nth-child(3n){animation-delay:.6s}
@keyframes titleRise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes titleHero{0%{opacity:0;transform:scale(.94)}55%{opacity:1;transform:scale(1.02)}100%{opacity:1;transform:none}}
@keyframes titleButtons{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes portraitFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes pulseBadge{50%{transform:scale(1.05);filter:brightness(1.08)}}

.unit{padding:6px 4px;text-align:center;width:92px;background:#281c42e6;border:1px solid #d8bc7f;border-radius:12px;font-size:11px;transition:transform .15s,filter .15s;display:flex;flex-direction:column;align-items:center;gap:3px;position:relative;overflow:hidden}
.unit:hover{transform:translateY(-2px)}
.unit.down{filter:grayscale(1);opacity:.7}
.chibi{position:relative;width:64px;height:70px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.chibi-head{width:38px;height:38px;border-radius:50%;padding:2px;background:linear-gradient(180deg,#fff,#eeddb2);box-shadow:0 3px 10px #0005;z-index:2}
.chibi-head img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.chibi-body{margin-top:-4px;width:46px;height:32px;border-radius:14px 14px 10px 10px;background:linear-gradient(180deg,var(--fcol),#3a2f4b);display:flex;align-items:center;justify-content:center;gap:2px;color:#fff;text-shadow:0 1px 2px #000;font-weight:bold;border:2px solid #fff6;box-shadow:inset 0 2px 6px #ffffff30}
.chibi-role{font-size:12px}.chibi-weapon{font-size:12px}
.chibi-star{position:absolute;right:0;top:0;font-size:13px;filter:drop-shadow(0 1px 2px #000)}
.unit-name{font-size:10px;line-height:1.1;min-height:22px;display:flex;align-items:center;justify-content:center}
.role-fighter .chibi-body{background:linear-gradient(180deg,#d35f5f,#6e2740)}
.role-guarder .chibi-body{background:linear-gradient(180deg,#6e92d8,#27456d)}
.role-tactician .chibi-body{background:linear-gradient(180deg,#9777da,#493275)}
.role-spy .chibi-body{background:linear-gradient(180deg,#707070,#1f1f1f)}
.role-archer .chibi-body{background:linear-gradient(180deg,#5bb87d,#24533b)}
.role-healer .chibi-body{background:linear-gradient(180deg,#e09bcf,#834f7b)}
.m-event{border:2px solid #ffd67f;border-radius:14px;padding:10px;background:linear-gradient(180deg,#5b304f,#241626);box-shadow:0 0 30px #0007}
.m-event-head{font-size:22px;font-weight:bold;text-align:center;margin-bottom:10px;color:#ffe08d;text-shadow:0 2px 8px #000;animation:pulseBadge 1.2s infinite}

@media(max-width:550px){
  .unit{width:70px;font-size:9px;padding:4px 2px}
  .chibi{width:52px;height:58px}
  .chibi-head{width:30px;height:30px}
  .chibi-body{width:38px;height:24px}
  .chibi-role,.chibi-weapon{font-size:10px}
  .unit-name{font-size:9px;min-height:20px}
}

.event-banner{margin:0 0 10px 0;padding:12px 16px;border:2px solid #f0d18a;border-radius:10px;background:linear-gradient(180deg,#5b3c4f,#261c31);color:#fff5d7;font-weight:bold;box-shadow:0 10px 24px #0004}.event-banner.enemy{background:linear-gradient(180deg,#6b452c,#2b1c14)}.event-banner.capture{background:linear-gradient(180deg,#7d2746,#351228)}.event-banner.player{background:linear-gradient(180deg,#ba5f8b,#5c2743)}
@keyframes captureFlash{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes pulseTurn{50%{transform:scale(1.03);filter:brightness(1.08)}}

/* v0.2.2 enhanced enemy turns and assault targets */
.tile.attack-target{outline:3px dashed #ffe997;outline-offset:-3px;box-shadow:inset 0 0 18px #ffea8090,0 0 14px #ffd36f88;animation:attackReady 1.5s ease-in-out infinite}
.attack-marker{z-index:2;position:absolute;bottom:15px;right:1px;left:1px;font-size:10px;color:#fff;background:#9e172fdc;border-radius:5px;padding:2px 0;font-weight:900;border:1px solid #ffe5b7}
.tile.attack-target .tile-value{visibility:hidden}
.tile.capture-flash{animation:capturePulse .55s steps(2,end) 5!important;outline:5px solid #fff2a4;z-index:3}
.event-banner{font-size:clamp(13px,1.8vw,19px);animation:eventEnter .32s ease-out;position:relative;z-index:3;text-align:center}
.event-banner.capture{border-color:#fff2a0;box-shadow:0 0 26px #ffd27488}
.event-banner.player{box-shadow:0 0 22px #ffb9d18a}
@keyframes attackReady{50%{filter:brightness(1.3);box-shadow:inset 0 0 22px #ffea8090,0 0 21px #ffd36faa}}
@keyframes capturePulse{0%,100%{filter:brightness(1.55);opacity:1}50%{filter:brightness(.65);opacity:.5}}
@keyframes eventEnter{from{transform:translateY(-10px);opacity:.3}to{transform:none;opacity:1}}
@media(max-width:550px){.attack-marker{font-size:8px;bottom:12px}.tile.attack-target{outline-width:2px}}


/* v0.2.3: 全シーンを表示領域内へ固定し、必要な領域のみ内部スクロール */
html,body{height:100%;height:100dvh;min-height:0;overflow:hidden}
body{height:100dvh;display:flex;flex-direction:column}
[hidden]{display:none!important}
.title-screen{height:100dvh;min-height:0;max-height:100dvh;width:100%;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto auto;justify-items:center;align-content:stretch;gap:clamp(4px,1vh,12px);padding:clamp(6px,1.5vh,15px)}
.title-copy{min-height:0;max-width:100%;overflow:hidden}
.title-copy h1{font-size:clamp(22px,min(4.1vw,4vh),48px);margin:3px 0;line-height:1.15}
.title-copy h2{font-size:clamp(15px,2.3vh,25px);margin:2px 0}
.title-copy p,.title-copy small{font-size:clamp(10px,1.6vh,14px)}
.title-hero{width:min(1260px,100%);height:100%;min-height:0;display:grid;place-items:center}
.title-hero img{width:100%;height:100%;object-fit:contain;min-height:0}
.title-actions{gap:clamp(4px,.8vw,10px)}
.title-actions button{font-size:clamp(12px,1.8vh,17px);padding:clamp(6px,1vh,11px) clamp(8px,1.5vw,20px)}
.title-portraits{min-height:0;flex-wrap:nowrap;gap:clamp(2px,.6vw,8px);overflow:hidden}
.title-portraits img{height:clamp(26px,7vh,65px);width:clamp(26px,7vh,65px);flex-shrink:1;min-width:0;object-fit:cover}
.title-screen>small{font-size:10px;white-space:nowrap}
main#game{width:100%;height:100dvh;max-height:100dvh;min-height:0;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr) minmax(52px,10.8vh) auto;gap:clamp(3px,.7vh,7px);padding:clamp(3px,.7vh,6px)}
main#game header{margin:0;padding:clamp(4px,.7vh,8px);min-height:0}
main#game .layout{min-height:0;min-width:0;overflow:hidden;grid-template-columns:minmax(0,1.82fr) minmax(300px,1fr);gap:6px}
main#game .map-col{min-height:0;min-width:0;display:flex;flex-direction:column;overflow:hidden}
main#game .map{min-height:0;height:100%;flex:1;grid-template-rows:repeat(6,minmax(0,1fr));padding:4px;gap:2px;overflow:hidden}
main#game .tile{min-height:0;min-width:0;padding:1px;line-height:1.05}
main#game .tile-icon{min-height:0;font-size:clamp(10px,2vh,20px)}
main#game .tile img{height:clamp(13px,3.4vh,28px);width:clamp(13px,3.4vh,28px)}
main#game .tile b{font-size:clamp(8px,1.5vh,11px)}
main#game .tile .tile-value{font-size:clamp(7px,1.3vh,10px)}
main#game .tile .owner-badge{font-size:clamp(7px,1.2vh,9px)}
main#game .legend{margin-top:3px;gap:4px;flex-shrink:0}
main#game .legend span{font-size:10px}
main#game .side-col{display:grid;grid-template-rows:minmax(148px,auto) minmax(0,1fr) auto;gap:5px;min-height:0;overflow:hidden}
main#game .side-col .panel{min-height:0;margin:0;overflow:hidden;padding:6px;display:flex;flex-direction:column}
main#game .side-col .panel:last-child{min-height:44px}
main#game .side-col .panel .section-head{margin-bottom:3px}
main#game .side-col .commands{gap:4px;height:100%;grid-auto-rows:minmax(0,1fr);align-content:stretch}
main#game .side-col .commands button{font-size:clamp(10px,1.25vh,12px);padding:clamp(2px,.45vh,5px) 3px;display:flex;flex-direction:column;justify-content:center;line-height:1.12;min-height:0}
main#game .side-col .commands button small{font-size:clamp(7px,1vh,9px);line-height:1.08}
main#game .territory-info img{width:clamp(54px,8vh,82px);height:clamp(62px,9.5vh,96px)}
main#game .territory-info{font-size:clamp(11px,1.33vh,13px);align-items:flex-start;line-height:1.35}
main#game .territory-info strong{font-size:clamp(14px,2vh,18px)}
main#game .roster-mini{max-height:none}
main#game .log-panel{min-height:0;height:100%;margin:0;overflow:hidden;display:flex;flex-direction:column;padding:5px}
main#game .log{height:auto;min-height:0;flex:1;font-size:10.5px}
main#game .bottom{position:static;min-height:0;margin:0;padding:4px;gap:6px}
main#game .bottom button{padding:clamp(5px,.8vh,8px);font-size:clamp(11px,1.6vh,14px)}

main#game .territory-panel .territory-info{flex:1}
main#game .commands-panel{min-height:0}
main#game .commands-panel .section-head{margin-bottom:4px}
main#game .commands-panel .commands{flex:1}
main#game .roster-panel{justify-content:center}
main#game .roster-panel .roster-open{padding:8px 9px;font-size:clamp(12px,1.3vw,17px)}
main#game .roster-panel .roster-open span{display:block;margin-top:2px}
.attack-command-ready{background:linear-gradient(180deg,#ff838f,#dd2e4b)!important;color:#fff7ed!important;text-shadow:0 1px 2px #5f101f}

.event-banner{position:absolute;top:clamp(42px,8vh,75px);left:50%;transform:translateX(-50%);z-index:15;max-width:95vw;max-height:12vh;overflow:hidden;margin:0;padding:6px 12px;font-size:clamp(12px,1.7vh,16px);pointer-events:none}
.modal,.battle-wrap{max-height:100dvh;overflow:hidden;padding:clamp(4px,.8vh,10px)}
.modal-card{max-height:calc(100dvh - 12px);overflow:auto}
.result-grid{max-height:52vh;min-height:0;margin-bottom:6px}
.result-side{padding:5px;min-height:0}
.result-side img{width:auto;height:clamp(80px,24vh,220px);max-width:100%;object-fit:cover}
.result-side small{font-size:clamp(10px,1.6vh,13px)}
.battle-panel{max-height:calc(100dvh - 12px);min-height:0;overflow:hidden;display:flex;flex-direction:column;padding:clamp(6px,1vh,12px)}
.battle-top,.battle-parties{flex-shrink:0;margin-bottom:4px}
.battle-parties img{width:clamp(30px,7vh,55px);height:clamp(30px,7vh,55px)}
.battle-field{min-height:0;height:auto;flex:1;overflow:auto;margin:4px 0;padding:5px;gap:4px;grid-template-columns:minmax(0,1fr) 45px minmax(0,1fr)}
.battle-log{height:clamp(42px,10vh,75px);flex-shrink:0}
.battle-panel>#battleSkip{flex-shrink:0;margin:4px auto 0;padding:6px 12px}
.units{min-height:0;gap:3px}
.unit{width:clamp(48px,6.4vw,78px);padding:3px 1px}
.chibi{transform:scale(.8);margin:-7px 0}
@media(max-width:900px){
main#game .layout{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,57fr) minmax(0,43fr);gap:4px}
main#game .side-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:4px}
main#game .side-col .panel{height:100%;min-height:0;overflow:auto}
main#game .side-col .panel:last-child{display:none}
main#game .map{grid-template-rows:repeat(6,minmax(0,1fr))}
main#game .side-col .commands button{font-size:10px;padding:3px 2px}
main#game .side-col .commands button small{font-size:8px}
}
@media(max-width:550px){
main#game{grid-template-rows:auto minmax(0,1fr) minmax(44px,10vh) auto}
main#game .layout{grid-template-rows:minmax(0,59fr) minmax(0,41fr)}
main#game .side-col{grid-template-columns: minmax(0,1fr) minmax(0,1.25fr)}
main#game .side-col .panel{display:block;grid-column:auto}
main#game .side-col .panel:last-child{display:none}
main#game .section-head h3{font-size:11px}
main#game .section-head span{font-size:9px}
main#game .tile .tile-value{font-size:7px}
main#game .tile b{font-size:8px}
main#game .tile .owner-badge{font-size:7px;padding:1px}
main#game .tile img{width:clamp(11px,2.6vh,22px);height:clamp(11px,2.6vh,22px)}
main#game .legend span{font-size:8px}
main#game .territory-info{display:block}
main#game .territory-info img{display:none}
main#game .bottom{gap:3px}
main#game .bottom button{min-width:0;font-size:11px;padding:5px 2px}
.title-copy p{display:none}
.title-screen{gap:3px;padding:5px}
.title-portraits img{width:min(9vw,42px);height:min(9vw,42px)}
.title-actions button{font-size:12px;padding:7px 8px}
.result-grid{grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr);gap:2px}
.result-vs{font-size:15px}
.result-side img{height:clamp(70px,21vh,150px)}
.result-side strong{font-size:11px}
.result-side small{font-size:9px;line-height:1.25}
.modal-card{padding:7px}
.battle-field{grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr)}
}
@media(max-height:580px){
.title-copy p,.title-portraits{display:none}
main#game{grid-template-rows:auto minmax(0,1fr) minmax(32px,8vh) auto}
main#game .side-col .commands button small{display:none}
main#game .legend{display:none}
main#game .map-col .section-head{margin-bottom:2px}
main#game .side-col .panel .section-head{margin-bottom:0}
.battle-parties img{height:28px;width:28px}
.result-side img{height:18vh}
}

/* v0.2.4 readability and responsiveness */
:root {font-size:16px}
body{font-size:15px}
.brand{font-size:clamp(16px,1.2vw,21px)}
.status{font-size:clamp(12px,0.95vw,15px);gap:9px}
.section-head h3{font-size:clamp(15px,1.1vw,19px)}
.section-head span,.territory-info,.roster-mini>div,.log{font-size:clamp(13px,.95vw,16px)}
.territory-info img{width:clamp(95px,8.5vw,150px);height:clamp(100px,10vh,150px);object-fit:cover;flex:none}
.territory-info strong{font-size:clamp(17px,1.3vw,21px)}
.commands button{font-size:clamp(13px,1vw,17px)}
.commands button small{font-size:clamp(11px,.85vw,14px)}
.tile b{font-size:clamp(10px,.8vw,14px)}
.tile .tile-value{font-size:clamp(10px,.77vw,13px)}
.owner-badge{font-size:clamp(9px,.72vw,12px)}
.log{line-height:1.3}
@media(max-width:900px){.territory-info img{width:clamp(85px,14vw,128px);height:clamp(90px,15vh,128px)}}
@media(max-width:550px){.territory-info img{width:88px;height:98px}.tile b{font-size:10px}.tile .tile-value{font-size:9px}.commands button{font-size:13px}.brand{font-size:16px}}

/* v0.2.5 battle action effects */
.battle-fx{font-size:28px;background:linear-gradient(180deg,#fff8,#ffe9bd);color:#6a4110;border:2px solid #f0d28c;width:54px;height:54px;animation:pulse 1.2s infinite}
.unit{position:relative;overflow:visible}
.unit.strike{animation:unitStrike .45s ease}
.unit.hit{animation:unitHit .45s ease}
.unit.ko{animation:unitKo .55s ease}
.unit.heal{animation:unitHeal .45s ease}
.unit-popups{position:absolute;left:0;right:0;top:-4px;display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none;z-index:5}
.unit-popup{display:inline-block;padding:2px 6px;border-radius:999px;font-size:12px;font-weight:bold;color:#fff;text-shadow:0 1px 2px #000;box-shadow:0 4px 10px #0005;animation:floatDamage .9s ease forwards;white-space:nowrap}
.unit-popup.damage{background:linear-gradient(180deg,#ff7878,#c72f4e)}
.unit-popup.ko{background:linear-gradient(180deg,#ffd257,#ff8c22);color:#531900}
.unit-popup.heal{background:linear-gradient(180deg,#85ec9b,#1ca45f)}
.unit-popup.buff{background:linear-gradient(180deg,#8fd4ff,#4678d8)}
@keyframes floatDamage{0%{opacity:0;transform:translateY(10px) scale(.8)}15%{opacity:1}100%{opacity:0;transform:translateY(-18px) scale(1.06)}}
@keyframes unitStrike{0%{transform:translateX(0) scale(1)}40%{transform:translateX(16px) scale(1.06)}100%{transform:translateX(0) scale(1)}}
@keyframes unitHit{0%{transform:translateX(0)}25%{transform:translateX(-7px) rotate(-4deg);filter:brightness(1.2)}100%{transform:translateX(0)}}
@keyframes unitKo{0%{transform:scale(1)}35%{transform:scale(1.08) rotate(-4deg);filter:brightness(1.3)}100%{transform:scale(.92);opacity:.65}}
@keyframes unitHeal{0%{filter:brightness(1)}40%{filter:brightness(1.35) drop-shadow(0 0 6px #7dff91)}100%{filter:brightness(1)}}
@media(max-width:550px){
  .unit-popup{font-size:10px;padding:1px 4px}
}


/* === v0.2.7 title delay + custom bunshin sprites === */
.title-actions button.title-pending{animation:titlePendingFlash .24s steps(2,end) infinite!important;filter:brightness(1.15) saturate(1.25);box-shadow:0 0 0 2px #fff7,0 0 18px #ff9ad2, inset 0 1px #fff7;}
@keyframes titlePendingFlash{0%{transform:scale(1);opacity:1}50%{transform:scale(1.04);opacity:.4}100%{transform:scale(1);opacity:1}}
.unit{width:clamp(66px,8vw,92px);padding:4px 3px 6px}
.unit-sprite-wrap{position:relative;width:64px;height:64px;display:grid;place-items:center;border-radius:14px;background:radial-gradient(circle at 50% 35%,#ffffff24,transparent 62%), linear-gradient(180deg,#fff4,var(--fcol) 130%);box-shadow:inset 0 0 0 1px #fff4,0 3px 10px #0004}
.unit-sprite{width:60px;height:60px;object-fit:contain;image-rendering:auto;filter:drop-shadow(0 2px 4px #0007)}
.unit-name{font-size:10px;line-height:1.15;min-height:24px;display:flex;align-items:center;justify-content:center;text-align:center}
.roster-row{display:flex;align-items:center;gap:8px}
.roster-face{width:54px;height:54px;flex:0 0 54px;display:grid;place-items:center;border-radius:10px;background:linear-gradient(180deg,#fff3,#0001);border:1px solid #e4c58a55;overflow:hidden}
.roster-face img{width:48px;height:48px;object-fit:contain}
@media(max-width:550px){
  .unit{width:58px;padding:3px 2px 5px}
  .unit-sprite-wrap{width:48px;height:48px}
  .unit-sprite{width:46px;height:46px}
  .unit-name{font-size:8px;min-height:18px}
}

/* v0.3.0 */
.roster-closed{padding:5px!important;margin-bottom:0!important}
.roster-open{display:block;width:100%;font-size:clamp(13px,1.4vw,19px);padding:12px 9px}
.roster-open span{font-size:.75em}
.territory-info{font-size:clamp(15px,1.25vw,21px)!important;gap:14px!important;line-height:1.5}
.territory-info img{width:clamp(85px,8vw,150px)!important;height:clamp(96px,12vh,180px)!important;object-fit:cover}
.territory-info strong{font-size:clamp(19px,1.65vw,27px)!important}
.roster-full{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px;margin-bottom:14px;max-height:65vh;overflow:auto}
.roster-large{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid #aa906a;border-radius:10px;background:#43364f}
.roster-large>img{width:92px;height:100px;object-fit:contain;flex-shrink:0}
.roster-large>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;font-size:15px}
.roster-large strong{font-size:20px}
.hp-track{width:100%;height:11px!important;background:#bd2f42!important;border:1px solid #ef8391!important;border-radius:8px;overflow:hidden}
.hp-track i{display:block;height:100%;background:linear-gradient(180deg,#a6ff9c,#26bd54)!important;transition:width .25s ease}
.summon-message{display:flex;align-items:center;justify-content:center;gap:12px;min-height:55px;margin:12px 0;padding:7px;border:1px solid #ffc48e;border-radius:12px;background:#57354b;flex-wrap:wrap;font-size:16px}
.summon-message img{width:60px;height:60px;object-fit:contain}
.summon-message.summon-enter{animation:summonSpark .8s ease-out}
@keyframes summonSpark{0%{filter:brightness(3);transform:scale(.7)}55%{filter:brightness(1.7);transform:scale(1.08)}100%{filter:brightness(1);transform:scale(1)}}
.battle-action{min-height:60px;display:flex;justify-content:center;align-items:center;gap:12px;padding:5px;background:#3a2a4d;border:1px solid #bfa276;border-radius:10px;margin-bottom:6px;font-size:15px;overflow:hidden}
.battle-actor img{width:48px;height:48px;object-fit:contain;animation:battleAttack .5s ease}
.battle-actor.target img{animation:battleHurt .5s ease}
.battle-damage{font-size:20px;color:#ffcf63;animation:floatDamage .8s ease}
@keyframes battleAttack{0%{transform:translateX(-16px)}50%{transform:translateX(18px)}100%{transform:none}}
@keyframes battleHurt{25%{filter:brightness(2);transform:translateX(7px)}50%{transform:translateX(-7px)}100%{transform:none}}
@media(max-width:650px){.territory-info img{width:90px!important;height:100px!important}.battle-action{gap:4px;font-size:11px;min-height:48px}.battle-actor img{width:35px;height:35px}.battle-damage{font-size:14px}.roster-large>img{width:75px}}


/* v0.3.1: large battle action stage, viewport safe */
.battle-action{min-height:clamp(105px,18vh,205px);gap:clamp(10px,2vw,30px);padding:12px 16px;font-size:clamp(16px,1.5vw,23px);flex-wrap:nowrap;overflow:visible;position:relative;background:radial-gradient(ellipse at center,#654d76,#34263f 75%);box-shadow:inset 0 0 24px #0005}
.battle-actor{display:grid;place-items:center;flex:0 1 155px;min-width:0}
.battle-actor img{width:clamp(80px,13vh,155px);height:clamp(80px,13vh,155px);object-fit:contain;filter:drop-shadow(0 5px 7px #0009)}
.battle-action>b{flex:0 1 180px;line-height:1.35;text-align:center}
.battle-damage{font-size:clamp(23px,2.6vw,40px);white-space:nowrap;text-shadow:0 2px 5px #30141c}
@media(max-width:650px){.battle-action{min-height:110px;gap:5px;padding:7px;font-size:12px}.battle-actor{flex-basis:85px}.battle-actor img{width:clamp(60px,15vw,95px);height:clamp(60px,15vw,95px)}.battle-action>b{flex-basis:110px}.battle-damage{font-size:clamp(17px,4vw,25px)}}
@media(max-height:680px){.battle-action{min-height:78px;padding:4px}.battle-actor img{width:clamp(53px,12vh,95px);height:clamp(53px,12vh,95px)}}

.command-pending{animation:commandBlink .2s steps(2,end) infinite!important;outline:3px solid #fff4bc!important;filter:brightness(1.35)}
@keyframes commandBlink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.38;transform:scale(1.02)}}
.map-action-overlay{position:fixed;inset:0;z-index:700;display:flex;align-items:center;justify-content:center;flex-direction:column;pointer-events:none;background:#1914276c;animation:actionFade 1.7s both;color:#fff7d7;text-shadow:0 4px 10px #000;font-size:clamp(24px,4vw,50px)}
.map-action-spark{font-size:clamp(70px,12vw,140px);animation:actionPop .7s ease-out}
@keyframes actionFade{0%{opacity:0}15%,75%{opacity:1}100%{opacity:0}}
@keyframes actionPop{0%{transform:scale(.3) rotate(-15deg)}70%{transform:scale(1.17)}100%{transform:scale(1)}}
.intel-roster{max-height:45vh;overflow:auto;display:grid;gap:8px}.intel-unit{display:flex;align-items:center;gap:12px;background:#ffffff11;border:1px solid #ffffff29;border-radius:10px;padding:8px;font-size:15px}.intel-unit img{width:76px;height:76px;object-fit:contain}.intel-unit>div{flex:1}

/* v0.3.4 */
.training-list{max-height:42vh;overflow-y:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
.train-choice{min-width:0}.train-choice img{width:64px;height:64px;object-fit:contain}.train-choice strong{color:#592239}
.elimination-ceremony{text-align:center;padding:12px;animation:ceremonyIn .6s ease both;background:radial-gradient(circle,#775127,#261e36);border:3px double #ffe09a;border-radius:12px}
.elimination-seal{font-family:serif;font-size:clamp(20px,4vw,36px);color:#ffe6a5;text-shadow:0 0 20px #fff,0 3px 7px #000;animation:ceremonyPulse 1s ease-in-out infinite alternate}
.elimination-portraits{display:flex;justify-content:center;align-items:center;gap:20px;margin:12px auto}
.elimination-portraits img{width:min(29%,150px);aspect-ratio:1;object-fit:cover;border:3px solid #ffdf95;border-radius:12px;box-shadow:0 0 24px #fcd38266}
.elimination-portraits span{font-size:40px}.elimination-ceremony h2{color:#ffd27e;margin:8px}.elimination-ceremony p{margin:10px}
@keyframes ceremonyIn{0%{opacity:0;transform:scale(.7)}75%{transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
@keyframes ceremonyPulse{to{filter:brightness(1.4);transform:scale(1.04)}}
@media(max-width:550px){.training-list{grid-template-columns:1fr}.train-choice img{width:48px;height:48px}}


/* v0.3.6: enemy facing reversal and ending illustration */
.enemy-facing{transform:scaleX(-1)}
.unit-sprite-wrap.enemy-facing .chibi-star{transform:scaleX(-1)}
.ending-card{display:grid;gap:12px}
.ending-hero{width:100%;max-height:min(62vh,560px);object-fit:cover;border-radius:14px;border:2px solid #e5c587;box-shadow:0 12px 30px #0007;background:#20192c}
.ending-copy{padding:10px 12px;border-radius:12px;background:linear-gradient(180deg,#fff7,#ffffff10);border:1px solid #ffffff2a}
.ending-copy strong{display:block;margin-bottom:6px;font-size:22px;color:#ffe7ad}
.ending-copy p{margin:0;line-height:1.7;font-size:16px}
@media(max-width:650px){.ending-copy strong{font-size:18px}.ending-copy p{font-size:14px}}

/* v0.3.7 */
.unit[data-unit-id]{cursor:pointer;outline-offset:2px}
.unit[data-unit-id]:hover,.unit[data-unit-id]:focus-visible{outline:2px solid #ffe9a0;filter:brightness(1.18)}
.unit-detail-layer{position:fixed;inset:0;background:#080712bf;z-index:45;display:grid;place-items:center;padding:12px}
.unit-detail-layer[hidden]{display:none!important}
.unit-detail-dialog{background:linear-gradient(#453456,#211a32);border:3px double #ffdb98;border-radius:16px;width:min(620px,96vw);padding:16px;box-shadow:0 18px 55px #0009;max-height:95dvh;overflow:auto}
.unit-detail-content{display:grid;grid-template-columns:minmax(110px,45%) 1fr;align-items:center;gap:15px}
.unit-detail-content>img{width:100%;height:clamp(160px,35vh,310px);object-fit:contain;filter:drop-shadow(0 8px 10px #0008)}
.unit-detail-info{font-size:clamp(13px,1.7vw,18px);line-height:1.8}
.unit-detail-info h3{color:#ffe5a5;font-size:clamp(18px,2.4vw,26px)}
.unit-detail-info .hp-track{height:12px;background:#a82b34}
.ending-celebration{position:relative;text-align:center}
.ending-congrats{font-size:clamp(19px,3vw,34px);font-weight:900;color:#ffecb0;text-shadow:0 3px #853a56,0 0 17px #ff88a8;animation:endingPulse 1.5s ease-in-out infinite alternate}
.ending-sparkles{font-size:clamp(20px,3vw,35px);color:#ffe9a0;letter-spacing:.35em;animation:endingPulse 2s ease-in-out infinite alternate}
@keyframes endingPulse{from{opacity:.6;transform:scale(.96)}to{opacity:1;transform:scale(1.03)}}
@media(max-width:540px){.unit-detail-content{grid-template-columns:1fr}.unit-detail-content>img{height:185px}.unit-detail-info{line-height:1.4}.ending-sparkles{letter-spacing:.1em}}

/* v0.3.8 Magical combat */
.role-magician{border-color:#bf82ff;background:linear-gradient(145deg,#42295b,#251739)}
.role-magician .unit-sprite-wrap{box-shadow:0 0 12px #b45bffbb,inset 0 0 0 1px #e0baff}
.unit.hit:has(.role-magician){filter:brightness(1.2)}
.battle-actor.magic-caster.lightning img{animation:magicCharge .6s ease-in-out!important}
.battle-actor.magic-caster.explosion img{animation:magicBlast .8s ease-in-out!important}
.battle-actor.magic-victim.lightning img{animation:magicShock .5s steps(3)!important}
.battle-actor.magic-victim.explosion img{animation:magicBlast .65s ease!important}
@keyframes magicCharge{0%,100%{filter:drop-shadow(0 0 5px #9371f8)}50%{filter:drop-shadow(0 0 35px #00dbff) brightness(2);transform:scale(1.3)}}
@keyframes magicShock{0%,100%{filter:brightness(1)}50%{filter:brightness(3) sepia(1) hue-rotate(160deg);transform:translate(12px,-7px)}}
@keyframes magicBlast{0%{filter:brightness(1);transform:scale(.8)}50%{filter:brightness(3) drop-shadow(0 0 35px #ff6900);transform:scale(1.28)}100%{filter:brightness(1);transform:scale(1)}}

/* v0.3.9 terrain, formation, counts and roster sorting */
.battle-field{background-position:center!important;background-size:cover!important}
.units{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));align-content:stretch;justify-items:center;align-items:center;gap:3px}
.unit{width:min(100%,77px);min-width:0}
.army-count{display:inline-block;margin-left:10px;padding:2px 9px;background:#241b3c;border:1px solid #f4d190;border-radius:13px;color:#ffe5a8;font-size:15px}
.roster-sort{display:block;width:100%;font-size:16px;margin-bottom:12px;background:#f6ecff;color:#261e31;padding:9px;border-radius:9px}
.roster-sort-label{display:block;font-weight:bold;margin-bottom:4px}
@media(max-width:650px){.unit{width:min(100%,58px);padding:2px 0}.army-count{font-size:12px;padding:1px 4px}.units{gap:1px}}

.unit-slot-empty{width:100%;min-height:2px}

.unit-popup.spy{background:linear-gradient(180deg,#ffd8e6,#ff5b8a);color:#5a1029}
.unit-popup.withdraw{background:linear-gradient(180deg,#c8b7ff,#7750e8)}
.unit.left-battle{opacity:.35;filter:grayscale(.75)}
.battle-actor.spy-caster.assassinate img{animation:spyAssassinate .38s ease-in-out!important}
.battle-actor.spy-target.assassinate img{animation:spyVictim .55s ease-in-out!important}
.battle-actor.spy-caster.withdraw img{animation:spyWithdraw .65s ease-in-out!important}
.battle-actor.spy-target.withdraw img{animation:spyFade .7s ease forwards!important}
@keyframes spyAssassinate{0%{transform:translateX(0) scale(1)}50%{transform:translateX(24px) scale(1.14)}100%{transform:translateX(0) scale(1)}}
@keyframes spyVictim{0%{filter:none;transform:scale(1)}35%{filter:brightness(1.7)}100%{filter:grayscale(1) brightness(.7);transform:scale(.92)}}
@keyframes spyWithdraw{0%{transform:translateX(0) scale(1)}35%{transform:translateY(-8px) scale(1.07)}100%{transform:translateX(0) scale(1)}}
@keyframes spyFade{0%{opacity:1;transform:scale(1)}100%{opacity:.15;transform:translateY(-18px) scale(.88)}}

.attack-command-ready,.tile-attack-button,.territory-attack-button{background:linear-gradient(#ff444d,#b70818)!important;color:white!important;border:2px solid #ffd5c2!important;box-shadow:0 0 16px #f52b4d99!important;font-weight:bold}
.tile-attack-button{position:absolute;right:1px;top:21px;z-index:5;border-radius:5px;padding:3px;font-size:10px;pointer-events:auto}
.territory-info{position:relative;padding-right:65px}.territory-attack-button{position:absolute;right:0;top:0;padding:7px 9px;font-size:13px}
.command-report{display:flex;align-items:center;gap:15px;padding:12px;background:#1b1430;border-radius:10px;font-size:17px;line-height:1.75}.command-report img{width:min(40%,245px);max-height:280px;object-fit:contain;border-radius:9px}.command-report p{flex:1}
.battle-action-side{position:relative;min-width:0;flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column}.battle-action-message{flex:1;text-align:center;font-weight:bold}.battle-action-side .battle-action-damage{font-size:clamp(14px,1.6vw,24px);color:#ffce56;text-shadow:1px 2px #10050d;white-space:normal;text-align:center;font-weight:900}.battle-action-side .battle-actor{display:grid;place-items:center}.battle-action-side .battle-actor img{width:clamp(66px,10vh,125px);height:clamp(66px,10vh,125px)}
@media(max-width:650px){.command-report{flex-direction:column;font-size:14px}.command-report img{width:100%;max-height:230px}.battle-action-message{font-size:12px}.battle-action-side .battle-actor img{width:52px;height:52px}.battle-action-side .battle-action-damage{font-size:12px}}

/* v0.4.2: multi-rank summon layout */
.summon-layout{display:grid;grid-template-columns:minmax(175px,.85fr) minmax(0,1.2fr);gap:14px;margin-top:12px;align-items:start}
.summon-preview{display:flex;flex-direction:column;align-items:center;gap:9px;padding:12px;border-radius:14px;background:radial-gradient(ellipse,#5b3c7a,#241b34);border:2px solid #eac68e;text-align:center;font-size:13px}
.summon-large-portrait{width:100%;height:clamp(180px,28vh,310px);object-fit:contain;filter:drop-shadow(0 5px 14px #000a)}
.summon-preview strong{font-size:20px;color:#ffe8ab}
.summon-choices{grid-template-columns:1fr 1fr}
.summon-choices .choice{min-width:0;padding:6px}
.summon-choices .choice.selected{outline:3px solid #ffec91;background:#6d407d;box-shadow:0 0 12px #ffc5f3}
.summon-confirm{display:block;margin:12px auto 0;width:100%;background:linear-gradient(180deg,#ffca6a,#c77226);color:#2b1637;font-weight:bold}
#summonTierSelect{font-size:15px;padding:7px;border-radius:8px;background:#382c4b;color:white}
@media(max-width:550px){.summon-layout{grid-template-columns:minmax(118px,.8fr) minmax(0,1.2fr);gap:6px}.summon-preview{padding:5px}.summon-preview strong{font-size:15px}.summon-large-portrait{height:175px}.summon-choices{grid-template-columns:1fr}.summon-choices .choice{padding:3px;gap:3px}.summon-choices .choice img{height:35px;width:35px}}

/* v0.4.3 territory battle forecast and larger rest popup */
.battle-forecast{margin-top:12px;padding:10px 12px;background:linear-gradient(140deg,#171f39,#3c283c);border:1px solid #e4c585;border-radius:10px;color:#fff3e3;font-size:14px;line-height:1.5}
.forecast-heading{font-size:16px;font-weight:800;color:#ffdc88;margin-bottom:5px}
.forecast-stats{display:flex;gap:7px 15px;flex-wrap:wrap}
.forecast-stats b{font-size:17px;color:#fff}
.forecast-verdict{display:block;margin:6px 0;font-size:19px}
.forecast-verdict.advantage{color:#a1ffa2}.forecast-verdict.even{color:#fff1ab}.forecast-verdict.disadvantage{color:#ff9c9c}
.battle-forecast small{display:block;font-size:11px;color:#d6d5dc;line-height:1.45}
.modal-card:has(.rest-report){width:min(900px,96vw);max-height:96dvh}
.command-report.rest-report{display:block;text-align:center}
.command-report.rest-report img{width:min(100%,840px)!important;max-height:min(70vh,610px);object-fit:contain;margin:0 auto 12px;display:block}
.command-report.rest-report p{font-size:clamp(15px,1.3vw,20px);line-height:1.6}
@media(max-width:650px){.battle-forecast{padding:8px}.forecast-stats{display:block}.modal-card:has(.rest-report){width:98vw;padding:8px}.command-report.rest-report img{max-height:56vh}}

/* v0.4.4 Game over return button centered */
.gameover-actions{display:flex;justify-content:center;align-items:center;margin:18px auto 6px;width:100%}
.gameover-actions button{min-width:160px;max-width:75%;}

/* v0.4.5 Summon role guide and healing */
.summon-role-description{padding:10px;margin:6px 0 0;background:#173c32cc;border:1px solid #72dbb3;border-radius:9px;font-size:13px;line-height:1.5;color:#e9fff5;text-align:left}
.summon-choice-desc{display:block;margin-top:4px;font-size:10px;line-height:1.4;color:#e6d7ed}
.unit.healing-glow .unit-sprite-wrap{animation:healingRadiance .85s ease-in-out!important;box-shadow:0 0 24px 8px #78ffafa8,inset 0 0 20px #ddfff7!important}
.unit.healing-glow .unit-popups:before{content:'✦ ✚ ✦';position:absolute;top:-20px;color:#adffbd;font-size:23px;text-shadow:0 0 8px #72ffab;animation:healingRise .85s ease-out}
.battle-actor.healing-target img{animation:healingRadiance .85s ease-in-out!important}
.battle-actor.healing-caster img{animation:healingRise .7s ease-out!important}
.unit-popup.heal{background:linear-gradient(180deg,#b7ffc8,#35bb73)!important;color:#104829!important;font-size:15px!important}
@keyframes healingRadiance{0%,100%{filter:brightness(1);transform:scale(1)}45%{filter:brightness(1.7) drop-shadow(0 0 16px #74ffaa);transform:scale(1.15)}}
@keyframes healingRise{0%{opacity:0;transform:translateY(15px)}45%{opacity:1;transform:translateY(-4px)}100%{opacity:0;transform:translateY(-20px)}}
@media(max-width:600px){.summon-choice-desc{font-size:9px}.summon-role-description{font-size:12px;padding:6px}}

/* v0.4.7: intro, territory illustration, summon and attack confirmation */
#intro .intro-hero img{object-fit:cover;object-position:center 40%}
.summon-choices .summon-unaffordable,.summon-choices .summon-unaffordable:disabled{filter:grayscale(1)!important;opacity:.44!important;cursor:not-allowed!important;background:linear-gradient(#999,#50505a)!important;color:#fff!important}
.summon-choices .summon-unaffordable img{filter:grayscale(1)}
#summonConfirm:disabled{filter:grayscale(1);opacity:.5;cursor:not-allowed}
main#game .territory-info{position:relative;padding-right:clamp(90px,13vw,155px)!important;min-height:122px;align-items:center}
main#game .territory-info .territory-scene{position:absolute;right:4px;top:2px;width:clamp(85px,12vw,145px)!important;height:clamp(85px,12vh,118px)!important;object-fit:cover;border:2px solid #dabb86;border-radius:8px}
main#game .territory-info>.territory-attack-button{right:8px;top:8px;z-index:3}
main#game .territory-info>div{min-width:0;overflow:hidden}
main#game .territory-panel{min-height:0}
.attack-confirm{display:grid;gap:16px;justify-items:center;text-align:center}
.attack-confirm>img{width:min(100%,480px);height:180px;object-fit:cover;border:2px solid #f4d39a;border-radius:12px}
.attack-confirm p{font-size:clamp(16px,2vw,23px);line-height:1.7}
.attack-confirm p b{color:#ffd696}
.attack-confirm-actions{display:flex;gap:12px;justify-content:center;width:100%;flex-wrap:wrap}
.attack-confirm-actions button{min-width:185px;padding:14px}
.attack-confirm-yes{background:linear-gradient(#ff8589,#bb2737);color:#fff}
.attack-confirm-no{background:linear-gradient(#9bdcff,#317bc3);color:#fff}
@media(max-width:780px){main#game .territory-info{padding-right:100px!important;min-height:100px}main#game .territory-info .territory-scene{width:94px!important;height:92px!important}}
@media(max-width:550px){main#game .territory-info{padding-right:76px!important;min-height:82px}main#game .territory-info .territory-scene{width:70px!important;height:72px!important}.attack-confirm>img{height:130px}.attack-confirm-actions button{width:100%}}

/* v0.4.8 summon, magic and battle-top visibility */
.battle-field{overflow:auto hidden!important;padding-top:18px!important;align-items:start!important}
.battle-field>.units{align-content:start!important;align-items:start!important;padding-top:10px!important;overflow:visible!important}
.battle-field .unit{flex-shrink:0;min-height:0}
.summon-choices .choice{min-height:50px}
.summon-choices .choice div{display:flex;flex-direction:column;justify-content:center;gap:3px}
.summon-choices .choice small{font-size:12px}
.summon-choices .summon-choice-desc{display:none!important}
.summon-burst{position:fixed;inset:0;z-index:100;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:#180e27cc;animation:burstFade 1.35s ease forwards;color:#fff5bd;text-shadow:0 0 15px #fff,0 4px 10px #000}
.summon-burst-character{width:min(42vw,300px);height:min(42vw,300px);position:relative;display:grid;place-items:center;filter:drop-shadow(0 0 25px #ffb7f3)}
.summon-burst-character img{width:100%;height:100%;object-fit:contain;animation:burstPop .85s ease-out}
.summon-burst strong{font-size:clamp(26px,5vw,60px);z-index:2}
.summon-burst>span{font-size:clamp(18px,3vw,34px);z-index:2}
.summon-burst-rays{position:absolute;width:150vmax;height:150vmax;background:repeating-conic-gradient(from 0deg,#ffd5ff55 0deg 7deg,transparent 8deg 25deg);animation:burstSpin 4s linear infinite;mask-image:radial-gradient(circle,#000,transparent 38%)}
.summon-burst-circle{position:absolute;inset:0;border:4px solid #ffdcfc;border-radius:50%;display:grid;place-items:center;font-size:32px;animation:burstSpin 2s linear infinite;box-shadow:0 0 30px #ffa6f7}
.summon-burst.tier-1{background:#132e50d9}.summon-burst.tier-1 .summon-burst-character{filter:drop-shadow(0 0 34px #6bd5ff)}
.summon-burst.tier-2{background:#30104ada}.summon-burst.tier-2 .summon-burst-character{filter:drop-shadow(0 0 52px #d462ff)}
.summon-burst.tier-3{background:#402400e9}.summon-burst.tier-3 .summon-burst-character{filter:drop-shadow(0 0 76px #ffd34c)}
.summon-burst.tier-3 .summon-burst-rays{background:repeating-conic-gradient(#fff3a6aa 0deg 10deg,transparent 12deg 22deg)}
@keyframes burstFade{0%{opacity:0}15%,80%{opacity:1}100%{opacity:0}}
@keyframes burstPop{0%{transform:scale(.12) rotate(-20deg);filter:brightness(5)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes burstSpin{to{transform:rotate(360deg)}}
/* Magical attacks overlay distinct colors and individual unit effects */
.battle-field.spell-lightning{box-shadow:inset 0 0 75px #00eaffaa,0 0 15px #62d8ff!important;animation:spellFieldFlash .65s steps(3) 1}
.battle-field.spell-explosion{box-shadow:inset 0 0 100px #ff5100aa,0 0 24px #ff9d23!important;animation:spellExplosionFlash .8s 1}
.battle-action.spell-lightning{background:linear-gradient(90deg,#17264e,#176586,#1d214f)!important;border-color:#64edff!important}
.battle-action.spell-explosion{background:linear-gradient(90deg,#541b17,#a9491a,#541b17)!important;border-color:#ffcc53!important}
.unit.casting-magic{z-index:10;animation:mageLevitate .7s ease-in-out!important}
.unit.casting-lightning .unit-sprite-wrap{box-shadow:0 0 30px 13px #2deeff,inset 0 0 14px #baf8ff!important;filter:brightness(1.7)}
.unit.casting-explosion .unit-sprite-wrap{box-shadow:0 0 36px 16px #ff8d28,inset 0 0 20px #ffeda4!important;filter:brightness(1.7)}
.unit.magical-hit-lightning{animation:magicShock .55s steps(4)!important;box-shadow:0 0 18px #56edff}
.unit.magical-hit-explosion{animation:magicBlast .75s ease!important;box-shadow:0 0 26px #ff5e12}
.cast-glyph{position:absolute;inset:-18px;border:3px dashed #dafff4;border-radius:50%;display:grid;place-items:center;font-size:21px;color:#fff3a0;animation:burstSpin 1.1s linear infinite;pointer-events:none;text-shadow:0 0 15px #5af4ff}
@keyframes mageLevitate{40%{transform:translateY(-10px) scale(1.1)}100%{transform:none}}
@keyframes spellFieldFlash{50%{filter:brightness(2.1) hue-rotate(30deg)}}
@keyframes spellExplosionFlash{40%{filter:brightness(3) sepia(.8)}70%{filter:brightness(1.5)}}
@media(max-width:650px){.battle-field{padding-top:12px!important}.battle-field>.units{padding-top:7px!important}}

/* v0.4.9: larger faction portraits and battle-action character animations */
.battle-parties img{
  width:clamp(65px,10vh,105px)!important;
  height:clamp(65px,10vh,105px)!important;
  border-width:3px;
  object-fit:cover;
  box-shadow:0 0 14px #efc87755;
}
.battle-parties{gap:8px;min-height:0}
.battle-action{
  min-height:clamp(128px,23vh,260px);
  padding:clamp(6px,1.1vh,14px);
  gap:clamp(4px,1vw,18px);
}
.battle-action-side .battle-actor img{
  width:clamp(100px,20vh,205px)!important;
  height:clamp(100px,20vh,205px)!important;
  max-width:100%;
  object-fit:contain;
  filter:drop-shadow(0 7px 10px #0009);
}
.battle-action-side .battle-actor{width:100%;min-width:0}
.battle-action-message{align-self:center;line-height:1.35}
.battle-panel{min-height:0}
.battle-field{min-height:110px}
@media(max-width:650px){
  .battle-parties img{width:clamp(52px,9vh,82px)!important;height:clamp(52px,9vh,82px)!important}
  .battle-action{min-height:clamp(115px,20vh,190px);gap:3px;padding:5px}
  .battle-action-side .battle-actor img{width:clamp(67px,15vh,115px)!important;height:clamp(67px,15vh,115px)!important}
}
@media(max-height:680px){
  .battle-parties img{width:clamp(48px,9vh,76px)!important;height:clamp(48px,9vh,76px)!important}
  .battle-action{min-height:clamp(90px,20vh,145px);padding:4px}
  .battle-action-side .battle-actor img{width:clamp(70px,16vh,128px)!important;height:clamp(70px,16vh,128px)!important}
}

/* v0.5.0: highly visible battle elapsed turns */
.battle-top{display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:10px}
.battle-top>#battleTitle{justify-self:start;min-width:0}
.battle-top>#retreat{justify-self:end}
.battle-round{display:inline-block;text-align:center;white-space:nowrap;justify-self:center;font-size:clamp(19px,2.5vw,31px);font-weight:900;color:#ffe5a1;text-shadow:0 2px 2px #341630,0 0 15px #d885f0;background:linear-gradient(180deg,#67426d,#38264b);border:2px solid #f4d08a;border-radius:14px;padding:5px 16px;box-shadow:0 0 15px #f6c16b55,inset 0 1px 0 #fff4;font-variant-numeric:tabular-nums}
@media(max-width:600px){.battle-top{column-gap:4px}.battle-top>#battleTitle{font-size:12px}.battle-round{font-size:clamp(16px,4vw,21px);padding:5px 7px}.battle-top>#retreat{font-size:12px;padding:6px}}

/* v0.5.1: scrollable full army instead of a clipped 4 x 4 roster */
.battle-field{overflow:hidden!important;min-height:0!important}
.battle-field>.units{min-height:0!important;height:100%!important;overflow-y:auto!important;overflow-x:hidden!important;align-content:start!important;align-items:start!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-template-rows:none!important;grid-auto-rows:minmax(100px,auto)!important;gap:4px!important;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ffd78d #352c43;padding:12px 2px 8px!important}
.battle-field>.units .unit{align-self:start!important}
.battle-field>.units .unit-slot-empty{min-height:100px}
@media(max-width:650px){.battle-field>.units{grid-auto-rows:minmax(82px,auto)!important;padding-top:8px!important}.battle-field>.units .unit-slot-empty{min-height:82px}}


/* v0.5.2: detailed territory illustrations and roomier map-side layout */
main#game .layout{grid-template-columns:minmax(0,1.72fr) minmax(380px,1.08fr)!important;gap:8px!important}
main#game .left-col{min-width:0;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) minmax(155px,.42fr);gap:6px}
main#game .left-col .panel{margin:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}
main#game .map-col{overflow:hidden}
main#game .map{min-height:0;flex:1 1 auto}
main#game .log-panel{padding:8px!important}
main#game .log-panel .section-head{margin-bottom:6px}
main#game .log{font-size:12px;line-height:1.45;overflow:auto}
main#game .side-col{grid-template-rows:minmax(235px,.98fr) minmax(290px,1.12fr) auto!important;gap:6px!important;overflow:hidden}
main#game .side-col .panel{padding:8px!important}
main#game .territory-panel,.commands-panel{overflow:auto!important}
main#game .territory-info{display:block!important;font-size:clamp(14px,1.08vw,18px)!important;line-height:1.55!important;padding-right:0!important;min-height:0!important}
main#game .territory-top{display:flex;align-items:flex-start;gap:12px}
main#game .territory-lord{width:clamp(92px,8.2vw,150px)!important;height:clamp(110px,12.5vh,180px)!important;object-fit:cover;border-radius:10px;border:2px solid #e4c58a;box-shadow:0 6px 18px #0005;flex:none}
main#game .territory-copy{min-width:0;flex:1 1 210px}
main#game .territory-copy strong{display:block;font-size:clamp(21px,1.62vw,28px)!important;line-height:1.2;margin-bottom:4px}
main#game .territory-scene-wrap{position:relative;flex:0 0 clamp(180px,23vw,340px);max-width:42%}
main#game .territory-info .territory-scene{position:static!important;display:block;width:100%!important;height:clamp(128px,16vh,210px)!important;object-fit:cover;border:2px solid #dabb86;border-radius:10px;box-shadow:0 6px 18px #0005}
main#game .territory-info .territory-attack-button{position:absolute!important;right:8px;top:8px;padding:8px 12px;font-size:14px;z-index:2}
main#game .battle-forecast{margin-top:12px!important}
main#game .commands{gap:8px!important;grid-auto-rows:minmax(72px,auto)!important;align-content:start!important}
main#game .commands button{font-size:clamp(13px,1.02vw,17px)!important;line-height:1.22!important;padding:10px 8px!important;min-height:72px!important;justify-content:center!important}
main#game .commands button small{font-size:clamp(11px,.78vw,13px)!important;line-height:1.25!important}
main#game .roster-panel{min-height:56px!important}
@media(max-width:1100px){
  main#game .layout{grid-template-columns:minmax(0,1.45fr) minmax(340px,1fr)!important}
  main#game .side-col{grid-template-rows:minmax(210px,.95fr) minmax(270px,1.1fr) auto!important}
  main#game .territory-scene-wrap{flex-basis:220px;max-width:40%}
}
@media(max-width:900px){
  main#game .layout{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr) auto!important}
  main#game .left-col{grid-template-rows:minmax(0,.68fr) minmax(155px,.32fr)!important}
  main#game .side-col{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;grid-template-rows:auto auto!important}
  main#game .side-col .roster-panel{grid-column:1 / -1;display:block!important}
  main#game .territory-top{gap:10px}
}
@media(max-width:700px){
  main#game .territory-top{display:grid;grid-template-columns:92px minmax(0,1fr);gap:8px}
  main#game .territory-scene-wrap{grid-column:1 / -1;max-width:none;flex:none}
  main#game .territory-info .territory-scene{height:150px!important}
  main#game .commands{grid-auto-rows:minmax(64px,auto)!important}
  main#game .commands button{min-height:64px!important;font-size:13px!important}
}
@media(max-width:550px){
  main#game .left-col{grid-template-rows:minmax(0,.7fr) minmax(135px,.3fr)!important}
  main#game .side-col{display:block!important}
  main#game .side-col .panel{margin-bottom:6px!important;display:block!important;height:auto!important;max-height:none!important;overflow:auto!important}
  main#game .territory-top{grid-template-columns:84px minmax(0,1fr)}
  main#game .territory-lord{width:84px!important;height:96px!important}
  main#game .territory-copy strong{font-size:18px!important}
  main#game .territory-info .territory-scene{height:130px!important}
  main#game .territory-info .territory-attack-button{font-size:13px;padding:7px 9px}
  main#game .commands{grid-auto-rows:minmax(58px,auto)!important}
  main#game .commands button{font-size:12px!important;min-height:58px!important}
  main#game .commands button small{font-size:10px!important}
}

/* v0.5.3 – protect all army health bars, shorten only the lower action scene */
.battle-panel{min-height:0!important;max-height:calc(100dvh - 12px)!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}
.battle-field{flex:1 1 auto!important;min-height:175px!important;overflow:hidden!important;padding:4px!important;align-items:stretch!important}
.battle-field>.units{height:100%!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;padding:12px 3px 16px!important;scrollbar-gutter:stable}
.battle-field>.units .unit{overflow:visible!important;padding-bottom:6px!important;min-height:max-content!important}
.battle-field>.units .unit .hp-track{display:block!important;flex-shrink:0!important;margin-bottom:1px!important}
.battle-action{flex:0 0 clamp(88px,14vh,145px)!important;height:clamp(88px,14vh,145px)!important;min-height:0!important;max-height:145px!important;overflow:hidden!important;padding:3px 9px!important;gap:5px!important;margin-bottom:4px!important}
.battle-action-side .battle-actor img{width:clamp(74px,13vh,125px)!important;height:clamp(74px,13vh,125px)!important}
.battle-action-message{font-size:clamp(12px,1.25vw,19px)!important;line-height:1.15!important}
.battle-action-side .battle-action-damage{font-size:clamp(12px,1.25vw,18px)!important}
.battle-log{flex:0 0 clamp(34px,6vh,53px)!important;height:clamp(34px,6vh,53px)!important;min-height:0!important}
@media(max-height:680px){.battle-action{flex-basis:82px!important;height:82px!important}.battle-action-side .battle-actor img{width:74px!important;height:74px!important}.battle-field{min-height:125px!important}.battle-parties img{height:clamp(44px,9vh,76px)!important;width:clamp(44px,9vh,76px)!important}}
@media(max-width:650px){.battle-action{flex-basis:90px!important;height:90px!important}.battle-action-side .battle-actor img{width:clamp(58px,12vh,85px)!important;height:clamp(58px,12vh,85px)!important}}
/* M-chan appears with a shining entrance and ornate banner */
.m-event-spectacular{position:relative;overflow:hidden;animation:mArrival .85s cubic-bezier(.16,1.4,.35,1) both;box-shadow:0 0 30px #ff8ac8bb,0 0 65px #ffd97e88,inset 0 0 45px #ffadd24a!important;border:3px solid #ffe3a4!important}
.m-event-spectacular::before{content:'🌸   ✨   💗   ✦   🌸   ✨   💗';position:absolute;inset:-15%;pointer-events:none;display:grid;place-items:center;color:#ffeef5;font-size:clamp(24px,3vw,48px);text-shadow:0 0 20px #fff;opacity:.55;animation:mSpark 1.5s linear infinite}
.m-event-spectacular .portrait-card{position:relative;z-index:1}
.m-event-spectacular .portrait-card img{width:clamp(125px,23vw,200px);height:clamp(135px,24vw,210px);animation:mPortrait .95s ease-in-out infinite alternate;box-shadow:0 0 25px #ffacd8}
.m-event-spectacular .m-event-head{position:relative;z-index:1;font-size:clamp(20px,3vw,35px);color:#ffe8a0;text-shadow:0 0 15px #ff8fcf,0 2px 3px #390d40}
.m-event-sparks{text-align:center;letter-spacing:12px;animation:mSpark 1.4s linear infinite}
@keyframes mArrival{from{opacity:0;transform:scale(.65) rotate(-3deg);filter:brightness(2.8)}65%{transform:scale(1.05)}to{opacity:1;transform:scale(1);filter:brightness(1)}}
@keyframes mSpark{50%{opacity:.24;transform:scale(1.1) rotate(3deg)}}
@keyframes mPortrait{to{transform:translateY(-8px) rotate(2deg);filter:drop-shadow(0 0 16px #fffcdf)}}

/* v0.5.4: balanced non-scrolling map-side command panels */
@media(min-width:901px){
main#game .side-col{grid-template-rows:minmax(0,.98fr) minmax(0,.96fr) auto!important;min-height:0!important}
main#game .territory-panel,main#game .commands-panel{min-height:0!important;overflow:hidden!important}
main#game .territory-top{gap:7px!important}
main#game .territory-lord{width:clamp(58px,5.4vw,96px)!important;height:clamp(65px,8.1vh,110px)!important}
main#game .territory-copy{font-size:clamp(11px,.82vw,14px)!important;line-height:1.25!important;flex-basis:130px}
main#game .territory-copy strong{font-size:clamp(14px,1.13vw,19px)!important}
main#game .territory-scene-wrap{flex-basis:clamp(100px,14vw,180px)!important;max-width:38%!important}
main#game .territory-info .territory-scene{height:clamp(72px,10vh,115px)!important}
main#game .battle-forecast{margin-top:5px!important;padding:5px 7px!important;font-size:clamp(10px,.78vw,13px)!important;line-height:1.2!important}
main#game .forecast-heading{font-size:clamp(11px,.91vw,14px)!important;margin-bottom:2px!important}
main#game .forecast-stats b{font-size:13px!important}
main#game .forecast-verdict{font-size:clamp(12px,.96vw,15px)!important;margin:2px 0!important}
main#game .battle-forecast small{font-size:clamp(9px,.68vw,11px)!important;line-height:1.2!important}
main#game .commands-panel .commands{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr)!important;flex:1!important;min-height:0!important;gap:4px!important;align-content:stretch!important}
main#game .commands button{min-height:0!important;height:100%!important;padding:3px!important;font-size:clamp(10px,.9vw,14px)!important;line-height:1.1!important}
main#game .commands button small{font-size:clamp(8px,.66vw,11px)!important;line-height:1.05!important}
}
.debug-settings{width:min(1220px,96%);max-height:34vh;overflow:auto;border:2px solid #f2c78a;border-radius:12px;background:#18192be9;padding:12px;color:#fff2e2}
.debug-settings h3{color:#ffd28a;margin-bottom:5px}
.debug-settings p{font-size:12px;margin-bottom:5px}
.debug-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px 12px;margin-bottom:8px}
.debug-grid label,.debug-settings>label{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:13px}
.debug-grid input,.debug-settings input[type=number]{width:90px;max-width:46%;padding:3px;color:#20152a;border-radius:5px;background:#fff}
.debug-check{justify-content:flex-start!important;margin:5px 0}.debug-check input{width:auto}
.debug-error{color:#ff8181;font-weight:bold}
@media(max-width:650px){.debug-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.debug-settings{max-height:38vh}}

/* debug setup must remain usable on shorter screens */
#intro.debug-on{justify-content:flex-start!important;overflow-y:auto!important;min-height:0;height:100dvh}
#intro.debug-on .intro-card{flex:0 0 auto;max-height:none}
#intro.debug-on .intro-hero{max-height:34vh}
#intro.debug-on .intro-actions{flex-shrink:0;padding-bottom:14px}
#intro.debug-on .debug-settings{flex:0 0 auto;max-height:40vh}

/* v0.5.5 battle area: larger vertical roster / action controls top right */
.battle-top{display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(120px,1fr)!important;align-items:start!important;gap:7px!important}
.battle-top-controls{display:flex;flex-direction:column;align-items:stretch;justify-self:end;gap:5px;min-width:128px}
.battle-top-controls button{padding:6px 9px!important;font-size:clamp(11px,1.1vw,14px)!important;line-height:1.1}
.battle-panel{height:min(98dvh,1040px)!important;max-height:calc(100dvh - 8px)!important}
.battle-field{flex:1 1 auto!important;min-height:220px!important;margin:3px 0!important;padding:4px!important}
.battle-field>.units{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-template-rows:none!important;grid-auto-rows:minmax(max-content,130px)!important;align-content:start!important;align-items:start!important;gap:12px 5px!important;overflow-y:auto!important;overflow-x:hidden!important;padding:12px 4px 26px!important;scroll-padding:22px;scrollbar-gutter:stable}
.battle-field>.units .unit{height:auto!important;min-height:118px!important;max-height:none!important;overflow:visible!important;padding-bottom:10px!important;align-self:start!important;justify-self:center!important}
.battle-field>.units .unit .hp-track{display:block!important;position:relative!important;visibility:visible!important;opacity:1!important;flex-shrink:0!important;width:calc(100% - 4px)!important;margin:5px 2px 2px!important}
.battle-field>.units .unit-slot-empty{min-height:125px!important}
.battle-action{flex:0 0 clamp(72px,11vh,110px)!important;height:clamp(72px,11vh,110px)!important;max-height:110px!important}
.battle-action-side .battle-actor img{height:clamp(64px,10vh,105px)!important;width:clamp(64px,10vh,105px)!important}
.battle-log{flex:0 0 clamp(33px,5.5vh,48px)!important;height:clamp(33px,5.5vh,48px)!important}
@media(max-height:700px){.battle-parties img{width:clamp(42px,8vh,72px)!important;height:clamp(42px,8vh,72px)!important}.battle-action{flex-basis:65px!important;height:65px!important}.battle-action-side .battle-actor img{height:62px!important;width:62px!important}.battle-field>.units{grid-auto-rows:minmax(max-content,124px)!important}}
@media(max-width:650px){.battle-top{grid-template-columns:minmax(0,1fr) auto auto!important}.battle-top-controls{min-width:80px}.battle-top-controls button{font-size:10px!important;padding:5px!important}.battle-field>.units{grid-auto-rows:minmax(max-content,105px)!important;gap:9px 2px!important}.battle-field>.units .unit{min-height:98px!important}.battle-field>.units .unit-slot-empty{min-height:104px!important}}
/* v0.5.5 map cards: strong, instantly scannable UI */
main#game .territory-panel{background:linear-gradient(145deg,#fff5df,#edddc7)!important;color:#31233d!important;border:2px solid #d0a453!important;box-shadow:inset 0 0 0 2px #fff9}
main#game .territory-panel .section-head{background:linear-gradient(100deg,#1d417b,#12305f);border-radius:7px;padding:7px 9px;color:#fff1c7!important}
main#game .territory-top{align-items:flex-start!important}
main#game .territory-copy{color:#31243a!important}
main#game .territory-copy strong{background:#ffdfeb!important;color:#81214d!important;padding:4px 6px;border-radius:6px;display:block!important;margin-bottom:6px!important}
main#game .territory-owner{font-weight:600;padding:3px 0;border-bottom:1px solid #bd9e8a}
main#game .territory-line{padding:3px 0}
main#game .territory-metrics{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
main#game .territory-metrics span{background:#fffefa;border:1px solid #d8bf8f;padding:3px 7px;border-radius:6px;font-weight:800;color:#317043}
main#game .territory-panel .battle-forecast{background:linear-gradient(135deg,#ffefd6,#fff8ee)!important;color:#3e2648!important;border:1px solid #d5ab73!important}
main#game .territory-panel .forecast-heading{color:#9d2840!important}
main#game .territory-panel .forecast-stats b{color:#4a3366!important}
main#game .territory-panel .forecast-verdict{color:#982e43!important}
main#game .territory-panel .battle-forecast small{color:#73616b!important}
main#game .commands-panel{background:linear-gradient(145deg,#fff6e5,#f4dec0)!important;border:2px solid #d0a453!important}
main#game .commands-panel .section-head{background:linear-gradient(100deg,#1d417b,#12305f);border-radius:7px;padding:7px 9px;color:#fff2c7!important}
main#game .commands-panel .commands{gap:5px!important}
main#game .commands-panel .commands button{display:flex!important;flex-direction:row!important;flex-wrap:wrap;justify-content:center!important;align-items:center!important;align-content:center!important;gap:2px 5px!important;min-height:0!important;padding:3px 4px!important;background:linear-gradient(180deg,#fff,#d7eaff)!important;color:#19395e!important;border:2px solid #6997c0!important;box-shadow:0 2px 3px #6f5b4b33,inset 0 1px 0 #fff!important}
main#game .commands-panel .commands button.attack-command-ready{background:linear-gradient(180deg,#ffe3e4,#fa8f9a)!important;border-color:#ce3b51!important;color:#8b132b!important}
main#game .commands-panel .command-icon{font-size:clamp(17px,1.5vw,25px);line-height:1}
main#game .commands-panel .command-name{font-size:clamp(12px,1.03vw,17px);font-weight:900;white-space:nowrap}
main#game .commands-panel .commands small{display:block!important;flex-basis:100%;font-size:clamp(8px,.67vw,11px)!important;line-height:1!important;opacity:.78}
main#game .commands-panel .commands button:disabled{filter:grayscale(1);opacity:.43}

/* v0.5.7: map area taller, lower UI more compact */
@media(min-width:901px){
 main#game .left-col{grid-template-rows:minmax(0,1fr) clamp(77px,10vh,103px)!important;gap:4px!important}
 main#game .log-panel{padding:4px 7px!important}
 main#game .log-panel .section-head{margin:0 0 2px!important;min-height:19px}
 main#game .log-panel .section-head h3{font-size:clamp(12px,1vw,16px)!important}
 main#game .log{font-size:clamp(10px,.75vw,12px)!important;line-height:1.17!important}
 main#game{grid-template-rows:auto minmax(0,1fr) auto!important;gap:4px!important}
 main#game .bottom{height:clamp(32px,4.6vh,45px)!important;min-height:0!important;padding:2px 5px!important;gap:5px!important;align-items:stretch!important}
 main#game .bottom button{padding:2px 14px!important;font-size:clamp(11px,1.1vw,14px)!important;min-height:0!important;line-height:1.1!important}
}
/* Large preview floats above all fixed-height panels without clipping */
.territory-image-preview{position:fixed;z-index:10000;pointer-events:none;display:flex;flex-direction:column;max-width:min(470px,76vw);padding:7px;background:#231b2ef7;border:3px solid #f0d28b;border-radius:13px;box-shadow:0 14px 55px #000c,0 0 17px #f6d48a70}
.territory-image-preview[hidden]{display:none!important}
.territory-image-preview img{display:block;max-width:min(450px,74vw);max-height:min(60vh,420px);width:auto;height:auto;object-fit:contain;border-radius:7px;background:#fff2}
.territory-image-preview span{text-align:center;font-size:14px;font-weight:bold;color:#ffe8b6;padding-top:5px}
main#game .territory-lord,main#game .territory-scene{cursor:zoom-in}
@media(max-width:900px){main#game .left-col{grid-template-rows:minmax(0,1fr) clamp(65px,9vh,90px)!important}}

/* v0.5.8 forecast and two ways of resting */
main#game .territory-panel .forecast-verdict.advantage{color:#128a39!important}
main#game .territory-panel .forecast-verdict.disadvantage{color:#c02d36!important}
main#game .territory-panel .forecast-verdict.even{color:#9b7045!important}
main#game .territory-panel .forecast-verdict{font-size:clamp(19px,1.65vw,27px)!important;line-height:1.25!important;margin:7px 0 3px!important}
.modal-card:has(.rest-options){width:min(1060px,98vw)}
.rest-choice-intro{text-align:center;font-weight:bold;margin:4px 0 14px;color:#ffe4ad;font-size:17px}
.rest-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.rest-option{display:flex;flex-direction:column;gap:9px;border:2px solid #e7c48977;border-radius:14px;padding:13px;background:#ffffff0c;text-align:center}
.rest-option.luxury{border-color:#ff9dca;background:linear-gradient(140deg,#4c274d,#3b283d)}
.rest-option img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px}
.rest-option h4{margin:0;color:#ffde9e;font-size:22px}
.rest-option p{margin:0;flex:1;line-height:1.5}
.rest-option b{font-size:17px;color:#ffdea6}
.rest-option button{font-size:16px}
.rest-option small{color:#ffd0cb}
.command-report img[src$="rest_luxury_picnic.png"]{width:min(100%,870px);max-height:67vh;object-fit:contain}
.modal-card:has(.command-report img[src$="rest_luxury_picnic.png"]){width:min(930px,97vw)}
@media(max-width:600px){.rest-options{grid-template-columns:1fr}.rest-option img{max-height:24vh}.rest-option h4{font-size:18px}.rest-option{padding:8px}}

/* v0.5.9 battle action heading and exactly one result line */
.battle-action-message{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;min-width:0!important;gap:3px!important;overflow:hidden!important}
.battle-action-heading,.battle-action-result{width:100%;text-align:center;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;line-height:1.25!important}
.battle-action-heading{font-size:clamp(12px,1.2vw,19px);font-weight:900}
.battle-action-result{font-size:clamp(12px,1.15vw,19px);font-weight:900;color:#ffd46b;text-shadow:0 2px #381c28}

/* v0.6.0: larger territory thumbnails with constrained map cells */
main#game .tile-icon{min-height:clamp(25px,5vh,50px);font-size:clamp(18px,3.6vh,37px)!important}
main#game .tile img{width:clamp(27px,5.2vh,51px)!important;height:clamp(27px,5.2vh,51px)!important;max-width:min(90%,51px);object-fit:cover}
@media(max-width:600px){main#game .tile-icon{min-height:23px;font-size:20px!important}main#game .tile img{width:clamp(23px,4.5vh,36px)!important;height:clamp(23px,4.5vh,36px)!important}}

/* v0.6.2: Use the full-size ordinary-rest results window for all rest and collection results. */
.modal-card:has(.command-report.rest-report){width:min(900px,96vw);max-height:96dvh}
.command-report.rest-report{display:block;text-align:center}
.command-report.rest-report img{width:min(100%,840px)!important;max-width:100%!important;max-height:min(70vh,610px)!important;object-fit:contain;margin:0 auto 12px;display:block}
@media(max-width:650px){.modal-card:has(.command-report.rest-report){width:98vw}.command-report.rest-report img{max-height:56vh!important}}

/* v0.6.4 Divine assistance */
.battle-top-controls{min-width:156px!important}
.battle-top-controls .god-power{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-weight:900;border:2px solid #fff4ba;background:linear-gradient(#fff0a2,#d99f40);color:#462a14;text-shadow:none;font-size:clamp(11px,1vw,14px)!important;line-height:1.15;padding:5px 6px!important;white-space:nowrap}
.battle-top-controls .god-power small{font-size:10px;font-weight:700}
.battle-top-controls .god-power.god-wrath:not(:disabled){background:linear-gradient(#f9d5ff,#bb76de);color:#3d154b;border-color:#f2d6ff;box-shadow:0 0 11px #e8a1ff8c}
.battle-top-controls .god-power.god-blessing:not(:disabled){background:linear-gradient(#fffcd5,#f7d779);box-shadow:0 0 11px #ffe9a8bb}
.battle-top-controls .god-power:disabled{background:#7b7c82!important;color:#d1d1d1!important;border-color:#999!important;opacity:.53;cursor:not-allowed;filter:grayscale(1);box-shadow:none}
.god-curtain[hidden]{display:none!important}
.god-curtain{position:absolute;inset:0;z-index:80;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:all;background:#080719ad;animation:godScreenFlash .48s ease-out 3}
.god-curtain.god-anger{background:radial-gradient(ellipse,#dfffec85,#261145d9 70%)}
.god-curtain.god-healing{background:radial-gradient(ellipse,#fff9c69a,#3e2a46b8 76%)}
.god-curtain img{position:relative;z-index:3;max-height:68%;max-width:75%;object-fit:contain;filter:drop-shadow(0 0 28px #fff5a8);animation:godDescent .95s cubic-bezier(.2,1.2,.4,1) both}
.god-curtain strong{position:relative;z-index:4;font-size:clamp(25px,4vw,54px);color:#fff3ab;text-shadow:0 0 12px #f5ce65,2px 4px #23152e;white-space:nowrap;animation:godTextPulse .75s ease-in-out infinite alternate}
.god-vortex,.god-golden-column{position:absolute;inset:-20%;pointer-events:none}
.god-vortex{background:repeating-conic-gradient(from 0deg,#fff8 0deg 8deg,#ffd85811 9deg 20deg);opacity:.55;animation:godSpin 3s linear infinite}
.god-golden-column{left:26%;right:26%;background:linear-gradient(90deg,transparent,#ffffc89c,#fff,#ffefb6a0,transparent);filter:blur(18px);animation:godColumn .9s ease-out both}
.god-bolts{position:absolute;inset:12% 0;z-index:2;display:grid;place-items:center;font-size:clamp(35px,8vw,100px);letter-spacing:.5em;color:#fff8c1;text-shadow:0 0 22px #fff;animation:godTextPulse .25s steps(2) infinite alternate;opacity:.85;pointer-events:none}
.god-action-line{width:100%;font-size:clamp(16px,2vw,30px);text-align:center;color:#fff2a4;font-weight:900;text-shadow:0 0 15px #f7d46d}
@keyframes godScreenFlash{0%{filter:brightness(4)}100%{filter:brightness(1)}}
@keyframes godDescent{from{transform:translateY(-110vh) scale(.4);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
@keyframes godSpin{to{transform:rotate(360deg)}}
@keyframes godColumn{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}
@keyframes godTextPulse{to{transform:scale(1.045);filter:brightness(1.45)}}
@media(max-height:760px){.battle-top-controls .god-power{padding:3px 5px!important;font-size:11px!important}.battle-top-controls .god-power small{font-size:9px}.battle-top-controls{gap:2px!important}}
@media(max-width:650px){.battle-top-controls{min-width:105px!important}.battle-top-controls .god-power{font-size:10px!important;white-space:normal;text-align:center}}
.battle-panel{position:relative!important}

/* v0.6.5: the thunder of divine wrath shakes the entire battle viewport */
.battle-wrap.god-wrath-shaking{animation:godWrathEarthquake .095s linear infinite;transform-origin:center center;will-change:transform}
.battle-wrap.god-wrath-shaking::after{content:"";position:absolute;inset:0;z-index:81;pointer-events:none;background:rgba(255,255,245,.13);animation:godWrathSkyFlash .22s steps(2,end) infinite}
@keyframes godWrathEarthquake{0%{transform:translate(0,0)}12%{transform:translate(-12px,7px)}25%{transform:translate(13px,-9px)}38%{transform:translate(-8px,-11px)}50%{transform:translate(14px,8px)}63%{transform:translate(-13px,2px)}75%{transform:translate(7px,-8px)}88%{transform:translate(-5px,11px)}100%{transform:translate(0,0)}}
@keyframes godWrathSkyFlash{0%,44%,100%{opacity:0}45%,75%{opacity:1}}
@media(prefers-reduced-motion:reduce){.battle-wrap.god-wrath-shaking{animation:godWrathEarthquakeReduced .4s ease-in-out 2}.battle-wrap.god-wrath-shaking::after{animation:none;opacity:.3}@keyframes godWrathEarthquakeReduced{50%{transform:translateX(4px)}}}

/* v0.7.1: Bring both battle-action character animations inward, toward the centre. */
.battle-action .battle-action-side:first-child{transform:translateX(clamp(16px,3.5vw,46px));}
.battle-action .battle-action-side:last-child{transform:translateX(calc(-1 * clamp(16px,3.5vw,46px)));}
@media(max-width:650px){
  .battle-action .battle-action-side:first-child{transform:translateX(clamp(7px,2.5vw,14px));}
  .battle-action .battle-action-side:last-child{transform:translateX(calc(-1 * clamp(7px,2.5vw,14px)));}
}

/* v1.0.0 mobile final: viewport-safe portrait/landscape, permanently reachable actions */
html,body{width:100%;height:100%;height:100dvh;overscroll-behavior:none}
#intro{box-sizing:border-box;height:100dvh!important;min-height:0!important;max-height:100dvh!important;overflow:hidden!important;display:grid!important;grid-template-rows:minmax(0,1fr) auto;align-content:stretch;justify-items:center;gap:clamp(3px,1vh,10px);padding:clamp(4px,1.2vh,12px);padding-bottom:max(6px,env(safe-area-inset-bottom))}
#intro[hidden]{display:none!important}
#intro .intro-card{min-height:0!important;max-height:100%!important;height:100%;width:min(1220px,100%);overflow:hidden!important;display:grid;grid-template-columns:minmax(0,.83fr) minmax(0,1.17fr);grid-template-rows:minmax(0,1fr);gap:clamp(4px,1vw,12px);padding:clamp(5px,1vh,12px)}
#intro .intro-hero{height:100%;min-height:0!important;max-height:none!important}
#intro .intro-hero img{height:100%;width:100%;object-fit:contain}
#intro .intro-story{min-height:0;overflow:auto!important;overscroll-behavior:contain;justify-content:start;gap:clamp(3px,.8vh,9px);line-height:1.38;padding:2px 5px}
#intro .intro-story h2{font-size:clamp(16px,3.1vh,32px);line-height:1.2}
#intro .intro-story p,#intro .intro-points{font-size:clamp(10px,1.65vh,15px);line-height:1.4}
#intro .intro-points li{margin:2px 0}
#intro .intro-actions{position:relative;z-index:2;flex:0 0 auto;width:100%;max-width:800px;display:grid;grid-template-columns:1fr 1fr;gap:clamp(4px,1.5vw,12px);margin:0;min-height:0}
#intro .intro-actions button{width:100%;min-width:0!important;padding:clamp(6px,1.25vh,12px) 4px;font-size:clamp(12px,2vh,17px)}
/* Debug settings must never push the play button off screen. */
#intro.debug-on{grid-template-rows:minmax(0,1fr) minmax(0,26vh) auto!important;overflow:hidden!important}
#intro.debug-on .intro-card{height:100%;min-height:0;max-height:100%!important}
#intro.debug-on .debug-settings{min-height:0;max-height:100%!important;width:100%;overflow:auto}
#intro.debug-on .intro-actions{padding-bottom:0!important}
/* Every modal has fixed header and one internally-scrollable body; buttons are reachable. */
.modal{height:100dvh;max-height:100dvh;overflow:hidden!important;padding:clamp(3px,.8vh,10px);align-items:center}
.modal-card{display:flex!important;flex-direction:column;min-height:0!important;height:auto;max-height:calc(100dvh - 8px)!important;overflow:hidden!important;padding:clamp(5px,.9vh,12px);width:min(900px,100%)}
.modal-head{flex:0 0 auto;margin-bottom:clamp(4px,.8vh,10px);gap:4px}
.modal-head h3{font-size:clamp(13px,2.3vh,19px)}
#modalBody{flex:1 1 auto;min-height:0;max-height:calc(100dvh - 68px);overflow-y:auto!important;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
#modalBody img{max-width:100%}
#modalBody .attack-confirm{gap:clamp(4px,1vh,10px)}
#modalBody .attack-confirm>img{height:clamp(56px,19vh,180px)}
#modalBody .attack-confirm p{font-size:clamp(12px,2vh,17px);line-height:1.32}
#modalBody .attack-confirm-actions{position:sticky;bottom:0;z-index:2;background:#282033f2;border-radius:8px;padding:4px;flex-wrap:nowrap}
#modalBody .attack-confirm-actions button{min-width:0;flex:1;padding:clamp(6px,1vh,12px)}
#modalBody .row-actions{position:sticky;bottom:0;z-index:3;background:#2b2238f0;padding:5px;border-radius:8px}
#modalBody .command-report img{max-height:min(46dvh,290px);object-fit:contain}
@media (orientation:portrait) and (max-width:900px){
 #intro .intro-card{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(75px,29%) minmax(0,1fr);gap:4px}
 #intro .intro-hero{max-height:100%!important}
 #intro .intro-story{gap:3px}
 #intro .intro-story h2{font-size:clamp(15px,4vw,21px)}
 #intro .intro-story p,#intro .intro-points{font-size:clamp(11px,2.9vw,14px)}
 #intro .intro-actions{grid-template-columns:1fr 1fr}
 main#game{grid-template-rows:auto minmax(0,1fr) auto!important;gap:3px!important;padding:3px!important}
 main#game .layout{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,54fr) minmax(0,46fr)!important;overflow:hidden!important}
 main#game .left-col{grid-template-rows:minmax(0,1fr)!important;min-height:0!important}
 main#game .left-col .log-panel{display:none!important}
 main#game .side-col{display:grid!important;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)!important;grid-template-rows:minmax(0,1fr)!important;gap:3px!important;overflow:hidden!important;min-height:0!important}
 main#game .side-col .panel{margin:0!important;min-height:0!important;max-height:100%!important;height:100%!important;overflow:auto!important;padding:4px!important}
 main#game .side-col .roster-panel{display:none!important}
 main#game .territory-top{display:block!important}
 main#game .territory-lord{width:clamp(38px,8vw,64px)!important;height:clamp(44px,9vw,68px)!important;float:left;margin-right:4px}
 main#game .territory-scene-wrap{display:none!important}
 main#game .territory-copy strong{font-size:clamp(12px,3vw,16px)!important}
 main#game .territory-copy,.territory-info{font-size:clamp(10px,2.5vw,13px)!important}
 main#game .commands{grid-template-columns:1fr 1fr!important;grid-auto-rows:minmax(0,1fr)!important;gap:3px!important}
 main#game .commands button{min-height:0!important;padding:3px 2px!important;font-size:clamp(10px,2.5vw,13px)!important}
 main#game .commands button small{font-size:9px!important}
 main#game .bottom{padding:3px!important;min-height:38px!important}
 main#game .bottom button{min-height:32px;padding:3px!important}
 main#game .section-head{margin-bottom:3px!important}
 main#game .map-col .legend{display:none!important}
 main#game .map{min-height:0!important;gap:1px!important;padding:2px!important}
 main#game .tile{border-width:1px!important}
 main#game .tile .owner-badge{display:none!important}
 main#game .tile img{width:clamp(17px,5vw,28px)!important;height:clamp(17px,5vw,28px)!important}
 main#game .tile b{font-size:clamp(7px,1.8vw,10px)!important}
 main#game .tile-value{display:none!important}
}
@media (orientation:landscape) and (max-height:650px){
 #intro .intro-card{grid-template-columns:minmax(0,.68fr) minmax(0,1.32fr);grid-template-rows:minmax(0,1fr);padding:5px}
 #intro .intro-actions button{padding:4px!important;font-size:12px}
 #intro .intro-story h2{font-size:clamp(14px,3.8vh,23px)}
 #intro .intro-story p,#intro .intro-points{font-size:clamp(10px,2.7vh,13px)}
 #intro .intro-story{gap:2px}
 main#game{grid-template-rows:auto minmax(0,1fr) auto!important;gap:2px;padding:2px!important}
 main#game header{padding:2px!important;margin:0!important}
 main#game .brand{font-size:13px!important}
 main#game .status{font-size:10px!important;gap:4px!important}
 main#game .layout{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)!important;grid-template-rows:minmax(0,1fr)!important;gap:3px!important}
 main#game .left-col{grid-template-rows:minmax(0,1fr)!important;min-height:0!important}
 main#game .left-col .log-panel{display:none!important}
 main#game .side-col{display:grid!important;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)!important;grid-template-rows:minmax(0,1fr)!important;gap:3px!important;overflow:hidden!important}
 main#game .side-col .panel{display:block!important;height:100%!important;max-height:100%!important;min-height:0!important;overflow:auto!important;margin:0!important;padding:3px!important}
 main#game .side-col .roster-panel{display:none!important}
 main#game .territory-top{display:block!important}
 main#game .territory-lord{width:45px!important;height:55px!important;float:left;margin-right:4px}
 main#game .territory-scene-wrap{display:none!important}
 main#game .territory-copy strong{font-size:12px!important}
 main#game .territory-copy{font-size:10px!important}
 main#game .commands{grid-template-columns:1fr 1fr!important;grid-auto-rows:auto!important;gap:2px!important}
 main#game .commands button{min-height:0!important;padding:2px 1px!important;font-size:10px!important}
 main#game .commands button small{display:none!important}
 main#game .map{min-height:0!important;gap:1px!important;padding:1px!important}
 main#game .map-col .legend{display:none!important}
 main#game .tile{border-width:1px!important;padding:0!important}
 main#game .tile img{width:clamp(13px,5vh,23px)!important;height:clamp(13px,5vh,23px)!important}
 main#game .tile .owner-badge,main#game .tile-value{display:none!important}
 main#game .tile b{font-size:clamp(7px,1.7vh,10px)!important}
 main#game .bottom{min-height:30px!important;padding:2px!important}
 main#game .bottom button{padding:2px 5px!important;min-height:25px!important}
 .modal-card{max-height:calc(100dvh - 6px)!important}
 #modalBody .attack-confirm>img{height:clamp(45px,17vh,90px)}
 #modalBody .attack-confirm p{font-size:clamp(10px,2.8vh,13px)}
 #modalBody .attack-confirm-actions button{padding:5px}
 .battle-panel{height:calc(100dvh - 4px)!important;max-height:calc(100dvh - 4px)!important;padding:3px!important}
 .battle-top{margin-bottom:2px!important}
 .battle-parties img{height:clamp(28px,10vh,48px)!important;width:clamp(28px,10vh,48px)!important}
 .battle-action{flex-basis:clamp(55px,16vh,75px)!important;height:clamp(55px,16vh,75px)!important}
 .battle-field{min-height:0!important;flex:1!important}
}

/* v1.0.0 mobile final fit adjustments (portrait + landscape) */
@media (max-width:900px), (max-height:650px) and (orientation:landscape){
 main#game .tile-icon{min-height:0!important;font-size:clamp(11px,2.1vmin,17px)!important;line-height:1!important;max-height:38%!important}
 main#game .tile img{width:clamp(12px,2.3vmin,21px)!important;height:clamp(12px,2.3vmin,21px)!important;max-width:100%!important;max-height:100%!important;border-width:1px!important}
 main#game .tile .fort,main#game .tile .tile-head{font-size:9px!important}
 main#game .tile.attack-target .attack-marker,main#game .tile .attack-marker{left:2px!important;right:2px!important;bottom:1px!important;max-height:22%!important;padding:0!important;line-height:1.05!important;font-size:clamp(6px,1.55vmin,9px)!important;border-width:1px!important;white-space:nowrap;overflow:hidden}
 main#game .tile .tile-attack,main#game .tile .attack-button{font-size:clamp(6px,1.5vmin,9px)!important;padding:0 1px!important;line-height:1.05!important;max-height:25%!important;white-space:nowrap}
 main#game .tile b{font-size:clamp(7px,1.5vmin,9px)!important;line-height:1.05!important}
 main#game .side-col .panel{overflow:hidden!important;min-height:0!important}
 main#game .territory-panel .section-head,main#game .commands-panel .section-head{padding:3px 5px!important;min-height:24px!important;margin-bottom:3px!important}
 main#game .territory-panel .section-head h3,main#game .commands-panel .section-head h3{font-size:clamp(10px,2.4vmin,13px)!important}
 main#game .territory-panel .territory-info{min-height:0!important;flex:1!important;overflow:hidden!important;display:block!important;line-height:1.16!important}
 main#game .territory-owner,main#game .territory-line{padding:2px 0!important}
 main#game .territory-panel .battle-forecast{margin-top:5px!important;padding:4px 5px!important;font-size:clamp(9px,1.8vmin,12px)!important;line-height:1.17!important}
 main#game .territory-panel .forecast-heading{font-size:clamp(12px,2.2vmin,15px)!important;margin-bottom:2px!important}
 main#game .territory-panel .forecast-verdict{font-size:clamp(12px,2.3vmin,16px)!important;line-height:1.15!important;margin:3px 0!important}
 main#game .territory-panel .forecast-stats b{font-size:clamp(11px,2vmin,14px)!important}
 main#game .territory-panel .battle-forecast small{font-size:clamp(8px,1.6vmin,10px)!important;line-height:1.1!important}
 main#game .territory-metrics span{padding:2px 4px!important;font-size:clamp(9px,1.75vmin,11px)!important}
 main#game .commands-panel{display:flex!important;flex-direction:column!important}
 main#game .commands-panel .commands{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:repeat(4,minmax(0,1fr))!important;grid-auto-rows:minmax(0,1fr)!important;flex:1 1 auto!important;min-height:0!important;overflow:hidden!important;gap:3px!important}
 main#game .commands-panel .commands button{min-height:0!important;height:100%!important;padding:2px!important;line-height:1.04!important;gap:1px 3px!important}
 main#game .commands-panel .command-name{font-size:clamp(10px,2.1vmin,14px)!important}
 main#game .commands-panel .command-icon{font-size:clamp(13px,2.6vmin,19px)!important}
 main#game .commands-panel .commands small{font-size:clamp(7px,1.5vmin,9px)!important;line-height:1.03!important;max-height:2.1em;overflow:hidden}
}
@media (orientation:portrait) and (max-width:900px){
 main#game header{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;grid-template-rows:auto auto!important;align-items:center!important;gap:3px 5px!important;padding:5px!important}
 main#game header .brand{grid-column:1!important;grid-row:1!important;min-width:0;font-size:clamp(13px,3.3vw,19px)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 main#game header .brand small{font-size:clamp(8px,2vw,11px)!important}
 main#game header #menuBtn{grid-column:2!important;grid-row:1!important;justify-self:end;align-self:center;padding:5px 9px!important;min-height:32px!important;min-width:36px!important}
 main#game header .status{grid-column:1 / -1!important;grid-row:2!important;display:flex!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:space-between!important;gap:2px!important;width:100%;min-width:0;font-size:clamp(9px,2.35vw,13px)!important}
 main#game header .status span{white-space:nowrap!important;min-width:0}
 main#game header .phase-tag{padding:3px 5px!important;font-size:clamp(10px,2.3vw,13px)!important}
 main#game .layout{grid-template-rows:minmax(0,53fr) minmax(0,47fr)!important}
 main#game .side-col{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)!important}
 main#game .territory-lord{width:clamp(27px,7vw,43px)!important;height:clamp(32px,8vw,49px)!important}
 main#game .territory-copy strong{font-size:clamp(10px,2.5vw,13px)!important;margin-bottom:2px!important;padding:3px!important}
 main#game .territory-copy{font-size:clamp(9px,2.15vw,11px)!important}
 main#game .commands-panel .commands small{display:block!important}
 /* Compact summon selector, preserve the seven roles without scrolling on common phones. */
 .modal-card:has(.summon-layout){width:99vw!important;max-height:calc(100dvh - 8px)!important}
 .modal-card:has(.summon-layout) #modalBody{overflow:hidden!important;display:flex;flex-direction:column;gap:3px}
 #modalBody:has(.summon-layout)>.modal-copy{font-size:clamp(10px,2.6vw,12px)!important;line-height:1.15!important;margin:0!important}
 #modalBody:has(.summon-layout)>label{font-size:clamp(11px,2.8vw,14px)!important}
 #summonTierSelect{font-size:clamp(11px,2.8vw,13px)!important;padding:3px!important}
 #modalBody .summon-layout{flex:1!important;min-height:0!important;display:grid!important;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)!important;gap:4px!important;margin-top:2px!important;align-items:stretch!important}
 #modalBody .summon-preview{overflow:hidden!important;min-height:0!important;gap:3px!important;padding:4px!important;justify-content:flex-start!important}
 #modalBody .summon-preview strong{font-size:clamp(11px,2.6vw,15px)!important}
 #modalBody .summon-large-portrait{height:clamp(75px,19dvh,165px)!important;flex:0 0 auto!important}
 #modalBody .summon-preview span{font-size:clamp(9px,2.3vw,12px)!important;line-height:1.2!important}
 #modalBody .summon-role-description{font-size:clamp(9px,2.1vw,11px)!important;line-height:1.18!important;padding:4px!important;margin:0!important}
 #modalBody .summon-layout>div:last-child{display:flex;flex-direction:column;min-height:0!important;overflow:hidden!important}
 #modalBody .summon-choices{grid-template-columns:1fr!important;grid-template-rows:repeat(7,minmax(0,1fr))!important;flex:1!important;min-height:0!important;gap:3px!important}
 #modalBody .summon-choices .choice{min-height:0!important;padding:1px 4px!important;gap:4px!important;line-height:1.08!important;overflow:hidden!important}
 #modalBody .summon-choices .choice img{width:clamp(22px,6dvh,37px)!important;height:clamp(22px,6dvh,37px)!important;object-fit:contain!important;flex-shrink:0!important}
 #modalBody .summon-choices .choice div{min-width:0!important;display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;align-content:center!important;align-items:center!important;gap:1px 4px!important}
 #modalBody .summon-choices .choice strong{font-size:clamp(11px,2.8vw,14px)!important;white-space:nowrap!important}
 #modalBody .summon-choices .choice small{font-size:clamp(9px,2.3vw,11px)!important;white-space:nowrap!important}
 #modalBody .summon-confirm{margin:4px 0 0!important;padding:5px!important;font-size:clamp(11px,2.6vw,14px)!important;flex:0 0 auto!important}
 #modalBody .summon-message{font-size:10px!important;line-height:1.15!important;padding:2px!important;flex:0 0 auto!important}
 /* Combat header: a slim first row and four buttons in one horizontal row. */
 .battle-top{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;grid-template-rows:auto auto!important;gap:3px!important;margin-bottom:2px!important}
 .battle-top>#battleTitle{grid-column:1;grid-row:1;font-size:clamp(11px,2.8vw,15px)!important}
 .battle-top>#battleRound{grid-column:2;grid-row:1;font-size:clamp(11px,2.7vw,15px)!important;padding:2px 4px!important}
 .battle-top-controls{grid-column:1/-1!important;grid-row:2!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;width:100%!important;min-width:0!important;gap:2px!important}
 .battle-top-controls button{min-width:0!important;width:100%!important;min-height:0!important;padding:3px 1px!important;font-size:clamp(8px,2vw,11px)!important;line-height:1.05!important;white-space:normal!important;overflow-wrap:anywhere!important}
 .battle-top-controls .god-power small{display:block!important;font-size:clamp(7px,1.8vw,9px)!important}
 .battle-panel{padding:5px!important}
 .battle-parties{margin-bottom:2px!important}
 .battle-parties img{width:clamp(30px,7dvh,52px)!important;height:clamp(30px,7dvh,52px)!important}
 .battle-action{flex:0 0 clamp(75px,12dvh,112px)!important;height:clamp(75px,12dvh,112px)!important;min-height:0!important;overflow:visible!important;padding:2px 5px!important}
 .battle-action-side .battle-actor img{height:clamp(61px,10dvh,94px)!important;width:clamp(61px,10dvh,94px)!important;object-fit:contain!important}
 .battle-action-side .battle-actor{overflow:visible!important}
 .battle-field{min-height:0!important;overflow:auto!important}
}
@media (orientation:landscape) and (max-height:650px){
 main#game .layout{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)!important}
 main#game .territory-lord{width:clamp(23px,6dvh,38px)!important;height:clamp(28px,7dvh,45px)!important}
 main#game .territory-copy strong{font-size:clamp(10px,2.7dvh,13px)!important;margin-bottom:2px!important;padding:2px!important}
 main#game .territory-copy{font-size:clamp(9px,2.3dvh,11px)!important}
 main#game .territory-panel .battle-forecast{padding:3px!important;margin-top:3px!important}
 main#game .commands-panel .commands small{display:none!important}
 main#game .commands-panel .commands button{padding:1px!important}
 .battle-action{overflow:visible!important}
 .battle-action-side .battle-actor{overflow:visible!important}
}


/* v1.0.0 landscape / battle / intro refinement patch */
.intro-hero{align-items:stretch!important;justify-content:center!important}
.intro-hero img{flex:1 1 auto;display:block;width:100%!important;height:100%!important;object-fit:cover!important}
@media(min-width:901px){
  .intro-card{grid-template-columns:minmax(340px,.92fr) minmax(0,1.08fr)!important;align-items:stretch!important}
  .intro-hero{min-height:470px!important;max-height:72vh!important}
}

/* Tablet / mobile landscape: keep map UI within one screen and expose roster button */
@media (orientation: landscape) and (pointer: coarse){
  body{overflow:auto}
  main#game{padding:6px!important;max-width:none!important}
  main#game>header{padding:6px 8px!important;gap:6px!important;margin-bottom:6px!important;border-radius:12px!important;align-items:center!important;min-height:0!important}
  main#game .brand{font-size:clamp(15px,1.7vw,22px)!important;line-height:1.12!important}
  main#game .brand small{font-size:clamp(9px,.9vw,12px)!important}
  main#game .status{gap:8px!important;font-size:clamp(11px,1.25vw,16px)!important;align-items:center!important}
  main#game .status span{line-height:1.05!important}
  main#game .phase-tag{padding:4px 10px!important;font-size:clamp(12px,1.25vw,15px)!important}
  #menuBtn{padding:5px 11px!important;min-width:56px!important;min-height:50px!important;font-size:clamp(18px,1.9vw,28px)!important;align-self:center!important}
  main#game .layout{gap:6px!important;align-items:start!important}
  main#game .panel{padding:7px!important;margin-bottom:6px!important;border-radius:12px!important}
  main#game .section-head{margin-bottom:6px!important}
  main#game .section-head h3{font-size:clamp(15px,1.4vw,21px)!important}
  main#game .section-head span{font-size:clamp(11px,1vw,14px)!important}
  main#game .map{min-height:0!important;padding:6px!important;gap:2px!important}
  main#game .tile{min-height:0!important;padding:2px!important}
  main#game .tile-icon{min-height:clamp(16px,3.1vh,28px)!important;font-size:clamp(14px,2.8vh,25px)!important}
  main#game .tile img{width:clamp(18px,3.4vh,28px)!important;height:clamp(18px,3.4vh,28px)!important;border-width:1px!important}
  main#game .tile b{font-size:clamp(8px,.9vw,11px)!important;line-height:1.1!important}
  main#game .tile .tile-value{font-size:clamp(7px,.78vw,10px)!important}
  main#game .owner-badge{font-size:clamp(7px,.72vw,9px)!important;padding:2px 4px!important}
  main#game .fort{font-size:clamp(9px,.85vw,11px)!important}
  main#game .attack-marker{font-size:clamp(8px,.82vw,10px)!important;padding:1px 3px!important;border-radius:999px!important}
  main#game .tile-attack-button{font-size:clamp(8px,.9vw,10px)!important;line-height:1!important;padding:2px 4px!important;min-height:0!important}
  main#game .legend{display:none!important}
  main#game .left-col{grid-template-rows:minmax(0,1fr) auto!important;gap:5px!important}
  main#game .log-panel{display:none!important}
  main#game .side-col{display:grid!important;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)!important;grid-template-rows:auto!important;gap:6px!important;align-items:stretch!important;min-height:0!important}
  main#game .territory-panel, main#game .commands-panel{margin-bottom:0!important;min-height:0!important;overflow:hidden!important}
  main#game .territory-panel .section-head, main#game .commands-panel .section-head{padding:5px 7px!important}
  main#game .territory-info{font-size:clamp(11px,.98vw,14px)!important;gap:7px!important}
  main#game .territory-lord{width:clamp(46px,4.8vw,72px)!important;height:clamp(54px,7vh,88px)!important}
  main#game .territory-copy{font-size:clamp(10px,.88vw,13px)!important;line-height:1.15!important;flex-basis:110px!important}
  main#game .territory-copy strong{font-size:clamp(12px,1.02vw,17px)!important;padding:3px 5px!important;margin-bottom:4px!important}
  main#game .territory-owner, main#game .territory-line{padding:2px 0!important}
  main#game .territory-metrics{gap:4px!important;margin-top:3px!important}
  main#game .territory-metrics span{padding:2px 5px!important;font-size:clamp(10px,.88vw,12px)!important}
  main#game .territory-scene-wrap{flex-basis:clamp(86px,10.5vw,132px)!important;max-width:34%!important}
  main#game .territory-info .territory-scene{height:clamp(56px,7.5vh,88px)!important}
  main#game .territory-attack-button{font-size:clamp(11px,.95vw,13px)!important;padding:4px 6px!important;margin-top:4px!important}
  main#game .battle-forecast{margin-top:7px!important;padding:4px 6px!important;font-size:clamp(9px,.8vw,12px)!important;line-height:1.15!important}
  main#game .forecast-heading{font-size:clamp(11px,.95vw,13px)!important;margin-bottom:2px!important}
  main#game .forecast-stats b{font-size:clamp(11px,.95vw,14px)!important}
  main#game .forecast-verdict{font-size:clamp(14px,1.2vw,18px)!important;line-height:1.12!important;margin:4px 0 2px!important}
  main#game .battle-forecast small{display:none!important}
  main#game .commands-panel .commands{grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-auto-rows:minmax(0,1fr)!important;gap:4px!important;align-content:stretch!important;height:100%!important}
  main#game .commands-panel .commands button{padding:3px 4px!important;gap:1px 3px!important;border-radius:12px!important;min-height:0!important;height:100%!important}
  main#game .commands-panel .command-icon{font-size:clamp(14px,1.15vw,19px)!important}
  main#game .commands-panel .command-name{font-size:clamp(10px,.9vw,13px)!important;line-height:1.02!important;white-space:normal!important}
  main#game .commands-panel .commands small{font-size:clamp(7px,.65vw,9px)!important;line-height:1.02!important;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
  main#game .roster-panel{position:fixed!important;right:10px!important;bottom:62px!important;z-index:35!important;margin:0!important;padding:0!important;border:none!important;background:transparent!important;box-shadow:none!important;min-height:0!important}
  main#game .roster-open{padding:8px 12px!important;font-size:clamp(11px,1.05vw,14px)!important;line-height:1.1!important;border-radius:999px!important;box-shadow:0 8px 22px #0008!important}
  main#game .roster-open span{display:none!important}
  main#game .bottom{position:sticky!important;bottom:0!important;height:44px!important;padding:3px 4px!important;gap:4px!important;border-radius:12px!important;z-index:20!important}
  main#game .bottom button{min-width:0!important;flex:1 1 0!important;padding:3px 10px!important;font-size:clamp(12px,1vw,15px)!important;line-height:1.05!important}

  /* Battle layout in landscape touch mode */
  .battle-wrap{padding:6px!important}
  .battle-panel{width:min(99vw,1380px)!important;height:auto!important;max-height:calc(100dvh - 12px)!important;padding:8px!important;border-radius:16px!important;gap:4px!important}
  .battle-top{grid-template-columns:minmax(0,1fr) auto minmax(0,1.55fr)!important;align-items:center!important;gap:6px!important;margin-bottom:6px!important}
  .battle-top>#battleTitle{font-size:clamp(12px,1.2vw,18px)!important;line-height:1.05!important}
  .battle-round{font-size:clamp(15px,1.65vw,24px)!important;padding:4px 10px!important;border-radius:12px!important}
  .battle-top-controls{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;justify-content:flex-end!important;align-items:stretch!important;gap:4px!important;min-width:0!important}
  .battle-top-controls button{flex:1 1 0!important;padding:4px 6px!important;font-size:clamp(10px,.92vw,13px)!important;line-height:1.05!important;min-width:0!important;white-space:normal!important}
  .battle-top-controls .god-power small{font-size:clamp(8px,.7vw,10px)!important}
  .battle-parties{margin:0 0 4px!important}
  .battle-parties img{width:clamp(36px,4.4vw,52px)!important;height:clamp(36px,4.4vw,52px)!important;border-width:2px!important}
  .versus{font-size:clamp(25px,2.6vw,40px)!important}
  .battle-field{height:clamp(210px,42vh,360px)!important;min-height:0!important;grid-template-columns:1fr 52px 1fr!important;gap:4px!important;margin:2px 0!important;padding:4px!important}
  .battle-field>.units{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;grid-auto-rows:minmax(68px,auto)!important;gap:4px 3px!important;padding:3px 2px 8px!important;overflow:hidden!important;align-content:start!important}
  .battle-field>.units .unit{min-height:68px!important;padding:2px 2px 5px!important;font-size:9px!important;border-radius:8px!important;width:100%!important;max-width:none!important}
  .battle-field>.units .unit-slot-empty{min-height:68px!important}
  .battle-field .unit-sprite-wrap{width:34px!important;height:34px!important;border-radius:9px!important}
  .battle-field .unit-sprite{width:31px!important;height:31px!important}
  .battle-field .unit .hp-track{margin:3px 1px 0!important;height:6px!important}
  .battle-field .unit b, .battle-field .unit strong{font-size:9px!important;line-height:1!important}
  .battle-fx{width:46px!important;height:46px!important;font-size:28px!important}
  .battle-action{flex:0 0 74px!important;height:74px!important;max-height:74px!important;padding:3px 6px!important;gap:4px!important;margin-bottom:4px!important}
  .battle-action-side .battle-actor img{width:52px!important;height:52px!important}
  .battle-action-heading,.battle-action-result{font-size:clamp(10px,.95vw,15px)!important;line-height:1.02!important}
  .battle-log{flex:0 0 38px!important;height:38px!important;font-size:10px!important;line-height:1.1!important;padding:5px 7px!important}
}

@media (orientation: landscape) and (pointer: coarse) and (max-width: 1180px){
  main#game .layout{grid-template-columns:minmax(0,1.22fr) minmax(320px,.95fr)!important}
  main#game .commands-panel .commands{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .battle-top{grid-template-columns:minmax(0,1fr) auto!important}
  .battle-top-controls{grid-column:1 / -1!important;justify-content:stretch!important}
  .battle-field{height:clamp(188px,38vh,308px)!important}
  .battle-field>.units{grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-auto-rows:minmax(62px,auto)!important}
  .battle-field>.units .unit{min-height:62px!important;font-size:8.5px!important}
}

/* Desktop / wide screen battle map compression so lower-right controls fully fit */
@media (min-width:901px) and (pointer:fine){
  main#game>header{padding:8px 10px!important;gap:8px!important}
  #menuBtn{padding:6px 12px!important;min-width:58px!important;font-size:24px!important}
  main#game .status{gap:10px!important}
  main#game .phase-tag{padding:4px 9px!important}
  main#game .commands-panel .commands{gap:4px!important}
  main#game .commands-panel .commands button{padding:2px 3px!important}
  main#game .commands-panel .command-name{font-size:clamp(11px,.92vw,15px)!important}
  main#game .commands-panel .commands small{font-size:clamp(8px,.64vw,10px)!important}
  .battle-top{grid-template-columns:minmax(0,1fr) auto minmax(0,1.65fr)!important;align-items:center!important}
  .battle-top-controls{display:flex!important;flex-direction:row!important;gap:4px!important;min-width:0!important}
  .battle-top-controls button{flex:1 1 0!important;padding:4px 6px!important;white-space:normal!important}
  .battle-round{font-size:clamp(16px,1.55vw,26px)!important;padding:4px 10px!important}
  .battle-parties img{width:clamp(44px,4.2vw,60px)!important;height:clamp(44px,4.2vw,60px)!important}
  .battle-field{grid-template-columns:1fr 54px 1fr!important;min-height:260px!important;height:clamp(250px,44vh,380px)!important}
  .battle-field>.units{grid-template-columns:repeat(5,minmax(0,1fr))!important;grid-auto-rows:minmax(76px,auto)!important;gap:5px 4px!important;padding:4px 3px 10px!important;overflow:hidden!important}
  .battle-field>.units .unit{min-height:76px!important;padding:3px 2px 6px!important;font-size:9.5px!important;width:100%!important}
  .battle-field .unit-sprite-wrap{width:38px!important;height:38px!important}
  .battle-field .unit-sprite{width:34px!important;height:34px!important}
  .battle-action{height:80px!important;flex-basis:80px!important;max-height:80px!important}
  .battle-action-side .battle-actor img{width:56px!important;height:56px!important}
  .battle-log{height:42px!important;flex-basis:42px!important}
}

/* Smartphone portrait-only guard (v1.0.0). */
.portrait-guard[hidden]{display:none!important}.portrait-guard{position:fixed;inset:0;width:100vw;height:100dvh;z-index:2147483647;background:#14101cf7;color:#fff4e7;display:flex;align-items:center;justify-content:center;padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));overflow:auto;overscroll-behavior:contain}.portrait-guard-card{max-width:min(680px,100%);border:3px double #f1ca88;background:linear-gradient(140deg,#45324c,#251b32);border-radius:20px;padding:clamp(16px,3.2vh,30px);box-shadow:0 12px 45px #000a;text-align:center}.portrait-guard-icon{font-size:clamp(34px,9vh,64px);margin-bottom:7px}.portrait-guard h2{font-size:clamp(18px,4vw,27px);line-height:1.35;color:#ffdd9a;margin:0 0 10px}.portrait-guard p{font-size:clamp(12px,2.3vw,17px);line-height:1.6;margin:8px 0}.portrait-guard-note{border-radius:10px;border:1px solid #e4b8c7;background:#ffffff12;padding:8px 12px;color:#ffe1e8}html.phone-landscape-blocked,html.phone-landscape-blocked body{overflow:hidden!important;touch-action:none}

/* v1.0.0 - smartphone portrait military command fit */
@media (orientation:portrait) and (max-width:900px) and (pointer:coarse){
 main#game .commands-panel{padding:4px!important}
 main#game .commands-panel .section-head{margin-bottom:2px!important;min-height:20px!important;padding:2px 5px!important}
 main#game .commands-panel .commands{gap:1px!important;row-gap:1px!important;column-gap:2px!important;grid-template-rows:repeat(4,minmax(0,1fr))!important;min-height:0!important}
 main#game .commands-panel .commands button{padding:0 2px!important;margin:0!important;border-width:1px!important;border-radius:7px!important;gap:0 3px!important;align-content:center!important;min-height:0!important;line-height:1!important}
 main#game .commands-panel .command-icon{font-size:clamp(11px,2.45vw,15px)!important;line-height:1!important}
 main#game .commands-panel .command-name{font-size:clamp(9px,2.1vw,12px)!important;line-height:1!important}
 main#game .commands-panel .commands small{font-size:clamp(7px,1.65vw,9px)!important;line-height:1!important;max-height:1.95em!important;overflow:hidden!important;margin:0!important}
}

/* v1.0.0 mobile portrait: strictly fit ALL seven commands, no tall stretched cells */
@media (orientation:portrait) and (max-width:900px) {
  #intro .intro-hero img {object-fit:cover!important;object-position:center 5%!important}
  main#game .commands-panel {display:flex!important;flex-direction:column!important;overflow:hidden!important;min-height:0!important}
  main#game .commands-panel .commands {
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:repeat(4,clamp(31px,4.8dvh,41px))!important;
    grid-auto-rows:clamp(31px,4.8dvh,41px)!important;
    flex:0 0 auto!important;
    height:auto!important;
    align-content:start!important;
    align-items:stretch!important;
    gap:3px 4px!important;
    overflow:visible!important;
    min-height:0!important;
  }
  main#game .commands-panel .commands button {
    height:100%!important;
    min-height:0!important;
    max-height:41px!important;
    padding:1px 3px!important;
    margin:0!important;
    border-width:1px!important;
    border-radius:7px!important;
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    align-content:center!important;
    justify-content:center!important;
    gap:3px!important;
    overflow:hidden!important;
    line-height:1.05!important;
  }
  main#game .commands-panel .command-icon {font-size:clamp(12px,3vw,16px)!important;line-height:1!important;flex:0 0 auto!important}
  main#game .commands-panel .command-name {font-size:clamp(10px,2.8vw,13px)!important;line-height:1.05!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  main#game .commands-panel .commands button small {display:none!important}
}
@media (orientation:portrait) and (max-width:900px) and (max-height:650px) {
  main#game .commands-panel .commands {grid-template-rows:repeat(4,29px)!important;grid-auto-rows:29px!important;gap:2px!important}
  main#game .commands-panel .commands button {max-height:29px!important}
}