.formation-page{max-width:620px;margin:0 auto;padding:12px;overflow-wrap:anywhere}
.formation-page header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.formation-page label{display:block;margin:10px 0}
.formation-page select{width:100%;max-width:100%}
.formation-page button{touch-action:manipulation}
.formation-page button:disabled{opacity:.45;cursor:default}
.formation-page button:focus-visible{outline:2px solid #e5ce8c;outline-offset:2px}
.formation-draft{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.formation-setup details{padding:12px 0}
.formation-recent{display:block;padding:14px 0;border-bottom:1px solid #a98d5355}
body.in-formation{overflow:hidden;padding:0}
body.in-formation .site-header{display:none}
body.in-formation #app{padding:0;margin:0 auto;max-width:none;min-height:0}
.formation-battle{box-sizing:border-box;height:100dvh;display:grid;grid-template-rows:40px minmax(0,1fr) auto auto;gap:0;padding:env(safe-area-inset-top) 10px 0;overflow:hidden;background:radial-gradient(ellipse at 50% 35%,#26312c70,transparent 65%),#191f1e}
.formation-header{font-size:13px;border-bottom:1px solid #c3cbb51a}
.formation-header b{font-weight:500;letter-spacing:.1em}
.formation-header a{font-size:13px}
.formation-header button{padding:5px 12px;min-height:32px;font-size:13px}
.formation-field{overflow:auto;min-height:0;padding:8px 3px;scrollbar-width:thin}
.formation-army{padding:3px 5px;position:relative;border-left:2px solid transparent;border-radius:4px}
.formation-army.enemy{border-left-color:#aa6c5b66;background:linear-gradient(90deg,#a25a4210,transparent)}
.formation-army.ally{border-left-color:#79a79966;background:linear-gradient(90deg,#619c9010,transparent)}
.army-label{font-size:10px;letter-spacing:.18em;color:#c19180;display:flex;justify-content:space-between;line-height:16px;padding-left:5px}
.ally .army-label{color:#8ebbad}
.army-label span{letter-spacing:0;opacity:.7}
.formation-rank{display:flex;gap:5px;align-items:center;margin:4px 0;min-width:0}
.formation-rank>span{flex:0 0 23px;font-size:10px;color:#b7bdae80;white-space:nowrap}
.formation-rank>div{display:flex;justify-content:center;gap:7px;flex:1;min-width:0}
.formation-rank.rank-empty{height:17px;margin:3px 0;gap:8px}
.formation-rank.rank-empty>span{flex-basis:auto;font-size:10px}
.formation-rank.rank-empty>div{height:1px;background:#b6b99e15}
.formation-unit:not(.seat):not(.self-general){isolation:isolate;position:relative;overflow:hidden;flex:0 0 calc((100% - 14px)/3);height:clamp(52px,7.8dvh,82px);min-width:0;padding:0!important;display:flex;flex-direction:column;justify-content:flex-end;gap:0;line-height:1.1;border:1px solid #9aa79555!important;border-radius:7px!important;background:#2d342e!important;color:#fff!important;text-shadow:0 1px 3px #000}
.formation-unit:not(.seat):not(.self-general) .formation-portrait{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center 24%}
.formation-unit:not(.seat):not(.self-general):after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(transparent 25%,#101915dc)}
.formation-hero-name{font-size:12px;line-height:1.25;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.formation-unit:not(.seat):not(.self-general) progress{flex-shrink:0;width:100%;height:3px;accent-color:#99b3a0;border:0;border-radius:0}
.formation-unit:not(.seat):not(.self-general) progress::-webkit-progress-bar{background:#313b32}
.formation-unit:not(.seat):not(.self-general) progress::-webkit-progress-value{background:#99b3a0}
.unit-badges{position:absolute;top:3px;left:4px;right:4px;display:flex;justify-content:space-between;gap:3px}
.unit-badges span{font:10px/1.4 sans-serif;padding:0 4px;background:#18211cdf;border-radius:3px;color:#cfdbc9}
.unit-badges .unit-ai{margin-left:auto;color:#9cdac7}
.formation-unit:not(.seat):not(.self-general).selected{outline:1px solid #e2e7db;outline-offset:2px}
.formation-unit:not(.seat):not(.self-general).acting{border-color:#dac079!important;box-shadow:0 0 0 2px #c4a25066}
.formation-unit:not(.seat):not(.self-general).dead{opacity:1;filter:grayscale(1)}
.formation-unit:not(.seat):not(.self-general).targetable{outline:1px dashed #d8c791;outline-offset:2px;cursor:pointer}
.formation-unit:not(.seat):not(.self-general).untargetable{opacity:.3}
.formation-unit:not(.seat):not(.self-general).target-chosen{outline:2px solid #f4d47a;outline-offset:2px}
.formation-front{text-align:center;font-size:12px;line-height:26px;margin:5px 0;border-block:1px solid #cbb87825;color:#d8ccaa;background:linear-gradient(90deg,transparent,#cbb8780c,transparent)}
.formation-console{min-width:0;padding:8px 4px 6px;border-top:1px solid #baae783f;background:#1b2320}
.formation-console-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:28px}
.formation-console-heading>b{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.formation-console-heading>div{display:flex;gap:5px}
.formation-console-heading button{padding:4px 9px;font-size:11px;min-height:28px;border-color:#95a08a40}
.formation-hand{display:flex;gap:7px;overflow-x:auto;min-width:0;min-height:80px;padding:7px 2px;scrollbar-width:thin;align-items:flex-start}
.formation-hand .formation-hand-card:not(.playing-card){position:relative;flex:0 0 57px;width:57px;height:68px;min-height:68px;padding:0;display:block;border-radius:5px;color:#293d33;background:#eee2c6 url('https://bj-cdn.geemii.com/cards/default-v1.svg') center/cover}
.formation-hand-card:not(.playing-card).card-face .card-name{top:6px;left:5px;max-width:calc(100% - 10px);max-height:38px;padding:2px 3px;font-size:11px;line-height:1.2}
.formation-hand-card:not(.playing-card).card-face .card-name.card-name-long{top:6px;left:5px;max-width:calc(100% - 10px);font-size:9px}
.formation-hand-card:not(.playing-card).card-face .card-pips{right:5px;bottom:5px;padding:1px 3px;font-size:9px}
.formation-hand-card:not(.playing-card).usable{border-color:#b3be9588}
.formation-hand-card:not(.playing-card).unusable{filter:grayscale(.35) saturate(.65) brightness(.9);border-color:#989d94!important;box-shadow:inset 0 0 0 2px #aeb2aa12,0 2px 3px #0005!important;opacity:.92!important}
.formation-hand-card:not(.playing-card).unusable .card-art{filter:grayscale(.4) contrast(.96)}
.formation-hand-card:not(.playing-card)[aria-pressed=true]{outline:2px solid #e3c67d;outline-offset:-2px;background:#434b35}
.formation-hand-empty{min-height:80px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#95a08c}
.formation-action-line{display:flex;align-items:center;justify-content:space-between;min-height:20px;gap:6px}
.formation-action-line button{padding:2px 6px;font-size:11px}
.formation-hint{font-size:11px;color:#b3bea9;line-height:1.4}
.formation-actions{display:flex;gap:6px;justify-content:flex-end;overflow-x:auto;min-height:34px;padding-top:4px}
.formation-actions button{font-size:12px;padding:6px 12px;min-height:32px;flex-shrink:0;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.formation-choice p{font-size:12px;line-height:1.35;margin:2px 0;max-height:34px;overflow:auto;color:#ddcfaa}
.formation-choice .formation-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}
.formation-skill-description,.formation-card-description{grid-column:1;min-width:0;max-height:clamp(64px,14dvh,120px);overflow-y:auto;overscroll-behavior:contain;padding:0;margin:4px 0;text-align:left}
.formation-choice :is(.formation-skill-description,.formation-card-description) p{max-height:none;overflow:visible;margin:0;line-height:1.5;overflow-wrap:anywhere}
.formation-choice [data-formation="confirm"]{min-width:0;white-space:normal;overflow-wrap:anywhere;text-overflow:clip}
.formation-choice [data-formation="confirm"]:disabled{filter:grayscale(1);cursor:not-allowed}
.formation-variants{display:flex;gap:6px;overflow:auto;max-height:45px}
.formation-variants button{font-size:11px;padding:4px 8px;flex-shrink:0}
.formation-variants button[aria-pressed=true]{border-color:#ddc780}
.formation-bottom{display:grid;grid-template-columns:1fr 1.3fr 1fr;border-top:1px solid #b1bc9733;padding:4px 0 max(4px,env(safe-area-inset-bottom));gap:4px;background:#1b2320}
.formation-bottom button{font-size:12px;padding:7px 4px;min-height:38px;border:0;color:#b7c6b4;position:relative}
.formation-bottom [data-formation=chat-open]{color:#e3d2a0;background:#d0b86c12;border-radius:6px}
.formation-bottom i{font:10px/1.4 sans-serif;background:#b95741;color:white;min-width:14px;border-radius:9px;padding:0 3px}
.formation-drawer,.formation-chat{box-sizing:border-box;position:fixed;z-index:1000;inset:auto max(0px,calc((100vw - 620px)/2)) 0;background:#202827;border:1px solid #9b875a;border-radius:14px 14px 0 0;box-shadow:0 -12px 60px #0009;padding:14px;padding-bottom:max(14px,env(safe-area-inset-bottom));max-height:85dvh;display:flex;flex-direction:column;gap:8px;overflow:hidden}
.formation-drawer header,.formation-chat header{flex-shrink:0;font-size:14px}
.formation-drawer header button,.formation-chat header button{padding:5px 10px;font-size:12px;min-height:32px}
.formation-drawer-content{overflow:auto;min-height:0;font-size:13px}
.formation-drawer-content p{margin:8px 0}
.formation-drawer-content h3{font-size:14px;margin:14px 0 4px}
.formation-drawer-content button{font-size:12px;padding:6px 10px}
.formation-drawer-content small{color:#a1ae97}
.formation-chat{height:min(650px,88dvh);max-height:88dvh}
.formation-chat>p,.formation-chat>label{font-size:12px;margin:0}
.formation-chat-messages{flex:1;overflow:auto;min-height:60px;padding:6px}
.formation-chat article{margin:10px 0;padding:8px 12px;border-radius:8px;background:#303b37}
.formation-chat .chat-user{margin-left:25px;background:#40503c}
.formation-chat .chat-ai{margin-right:25px}
.formation-chat article p{white-space:pre-wrap;margin:3px 0;font-size:14px}
.formation-chat small{color:#c4c6b5;font-size:11px}
.formation-chat textarea{width:100%;resize:none;min-height:64px;max-height:110px;flex-shrink:0;font-size:16px}
.formation-chat-notice{color:#e3c782}
.formation-chat>button{flex-shrink:0}
@media(max-width:370px){.formation-battle{padding-inline:6px}.formation-rank>span{flex-basis:20px;font-size:9px}.formation-rank>div{gap:5px}.formation-unit:not(.seat):not(.self-general){flex-basis:calc((100% - 10px)/3)}.unit-caption{padding-inline:3px}.formation-hero-name{font-size:11px}.unit-caption small{display:none}.formation-console{padding-top:5px}}
@media(max-height:680px){.formation-hand{min-height:66px;padding-block:5px}.formation-hand .formation-hand-card:not(.playing-card){height:56px;min-height:56px}.formation-console{padding-block:4px}.formation-unit:not(.seat):not(.self-general){height:52px}.formation-battle{grid-template-rows:36px minmax(0,1fr) auto auto}}
.formation-battle.is-rearranging .formation-rank.rank-empty{height:40px;border:1px dashed #9bad8040;border-radius:5px;padding-inline:5px}

@supports(height:1cqh){
  .formation-field{container-type:size;--occupied-ranks:6;--empty-ranks:0}
  .formation-field[data-occupied-ranks="5"]{--occupied-ranks:5;--empty-ranks:1}
  .formation-field[data-occupied-ranks="4"]{--occupied-ranks:4;--empty-ranks:2}
  .formation-unit:not(.seat):not(.self-general){height:clamp(52px,calc((100cqh - 140px - var(--empty-ranks)*17px)/var(--occupied-ranks)),110px)}
}

/* Full viewport battlefield; inspection is explicitly opened by a hero click. */
.formation-battle{position:relative;max-width:none;width:100%;display:block;padding:0}
.formation-header{position:absolute;z-index:20;top:max(8px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));border:0;pointer-events:none}
.formation-header>*{pointer-events:auto;border:1px solid #afbb8f40;border-radius:24px;background:#202b26eb;padding:8px 12px;box-shadow:0 3px 15px #0003}
.formation-header b{margin-right:auto;font-size:11px}
.formation-header button,.formation-header a{min-height:40px;display:flex;align-items:center;font-size:12px}
.formation-field{position:absolute;inset:60px max(8px,env(safe-area-inset-right)) max(64px,calc(env(safe-area-inset-bottom) + 56px)) max(8px,env(safe-area-inset-left));padding:4px;transition:none}
.formation-army,.formation-front{max-width:960px;margin-inline:auto}
.formation-bottom{position:absolute;z-index:20;bottom:max(10px,env(safe-area-inset-bottom));right:max(12px,env(safe-area-inset-right));display:flex;gap:8px;border:0;padding:0;background:none}
.formation-bottom button{min-height:44px;padding:10px 16px;border:1px solid #9bb79050;border-radius:24px;background:#26352fee;box-shadow:0 4px 18px #0005}
.formation-bottom [data-formation=chat-open]{border-radius:24px;background:#414732f5}
.formation-console{position:absolute;z-index:25;bottom:max(64px,calc(env(safe-area-inset-bottom) + 56px));left:max(8px,calc((100% - 620px)/2));right:max(8px,calc((100% - 620px)/2));height:auto;box-sizing:border-box;overflow:auto;padding:10px 12px;border:1px solid #a8b58a66;border-radius:16px;background:#202c27f5;box-shadow:0 -6px 30px #0006}
.hero-open .formation-field{bottom:max(284px,calc(env(safe-area-inset-bottom) + 276px))}
.is-choosing .formation-console{height:auto}
.is-choosing .formation-hand,.is-choosing .formation-hand-empty{display:none}
.hero-open.is-choosing .formation-field{bottom:max(210px,calc(env(safe-area-inset-bottom) + 202px))}
.formation-console-heading button{min-height:34px}
@supports(height:1cqh){.formation-unit:not(.seat):not(.self-general){height:clamp(52px,calc((100cqh - 140px - var(--empty-ranks)*17px)/var(--occupied-ranks)),160px)}}
@media(max-width:370px){.formation-header{gap:4px}.formation-header>*{padding:7px 9px}.formation-bottom button{padding-inline:13px}}
.formation-deployment{margin:20px 0;padding:0;border:0;border-radius:0;background:transparent}
.formation-deployment h2{margin:0;font-size:18px}
.formation-deployment p{font-size:13px;color:#b6c4aa}
.deployment-row>b{font-size:12px;color:#becba9}
.deployment-row>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:6px 0 12px}
.deployment-row button[aria-pressed=true],.deployment-row button.deploy-hover{outline:2px solid #e2c57c;outline-offset:1px}
.deployment-row button{user-select:none;-webkit-user-select:none}
.deployment-row img{pointer-events:none}

/* Standard pack's Cloud Pass backdrop, dimmed behind the battlefield pieces. */
.formation-battle{background:linear-gradient(#10221f88,#10221fcc),url('https://bj-cdn.geemii.com/backgrounds/standard/cloud-pass-v1.png') center/cover no-repeat,#151e1c}
.formation-header{top:max(12px,env(safe-area-inset-top));left:max(20px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));height:38px;display:grid!important;grid-template-columns:1fr auto 1fr;gap:8px}
.formation-header>*{background:none;border:0;box-shadow:none;padding:0;border-radius:0}
.formation-header .formation-brand{font-size:10px;letter-spacing:.18em;color:#abb09a;pointer-events:none}
.formation-header b{margin:0;font-size:12px;color:#d1c6a5;letter-spacing:.16em;pointer-events:none}
.formation-header button{justify-self:end;justify-content:center;width:40px;height:40px;border:1px solid #b8b08f30;border-radius:50%;color:#d1c6a5;background:#202a25c9;font-size:17px;padding:0}
.formation-field{inset:68px max(14px,env(safe-area-inset-right)) max(80px,calc(env(safe-area-inset-bottom) + 68px)) max(14px,env(safe-area-inset-left));display:flex;flex-direction:column;padding:3px 0}
.formation-army{width:100%;max-width:640px;box-sizing:border-box;flex:1 0 auto;display:flex;flex-direction:column;justify-content:center;padding:6px 0;border:0;border-radius:0}
.formation-army.enemy,.formation-army.ally{background:none;border:0}
.army-label{font-size:9px;padding:0 6px;line-height:20px;letter-spacing:.2em;color:#bd9785;opacity:.8}
.ally .army-label{color:#93b4a4}
.formation-rank{margin:7px 0;gap:0;position:relative}
.formation-rank>span{flex:0 0 25px;font-size:9px;letter-spacing:.12em;color:#a8b09988}
.formation-rank>div{gap:clamp(10px,4vw,24px);padding-right:25px}
.formation-rank.rank-empty{height:10px;margin:0}
.formation-rank.rank-empty>div{background:none;height:0}
.formation-unit:not(.seat):not(.self-general){flex:0 0 clamp(68px,24vw,112px);height:88px;border-radius:12px 12px 6px 6px!important;border:1px solid #9caa8d55!important;box-shadow:0 9px 14px #0004;overflow:hidden}
.formation-unit:not(.seat):not(.self-general) .formation-portrait{height:100%;object-position:center 16%;transform:scale(1.42);transform-origin:50% 22%;filter:saturate(.78)}
.formation-unit:not(.seat):not(.self-general):after{background:linear-gradient(transparent 30%,#101b16e8 100%)}
.formation-hero-name{font-size:11px;letter-spacing:0}
.formation-unit:not(.seat):not(.self-general) progress{height:2px}
.formation-unit:not(.seat):not(.self-general).ready{border-color:#b8b38399!important;box-shadow:0 0 12px #bebf6220}
.formation-unit:not(.seat):not(.self-general).acting{border-color:#e8cd89!important;box-shadow:0 0 0 1px #ddbc7277,0 0 23px #d7b55b40}
.formation-unit:not(.seat):not(.self-general).selected{outline:1px solid #e2e7db;outline-offset:3px}
.formation-unit:not(.seat):not(.self-general).targetable{outline:1px dashed #d8c791;outline-offset:3px}
.formation-unit:not(.seat):not(.self-general).target-chosen{outline:2px solid #f4d47a;outline-offset:3px}
.formation-front{width:100%;box-sizing:border-box;flex-shrink:0;border:0;min-height:38px;line-height:38px;margin:9px auto;font-size:11px;letter-spacing:.08em;background:linear-gradient(90deg,transparent,#bfa46b0c,transparent);color:#d2bd8d;position:relative}
.formation-front:before,.formation-front:after{content:'';position:absolute;height:1px;width:20%;top:50%;background:linear-gradient(90deg,transparent,#bda57844)}
.formation-front:before{left:0}.formation-front:after{right:0;transform:rotate(180deg)}
.formation-bottom{bottom:max(18px,env(safe-area-inset-bottom));right:max(20px,env(safe-area-inset-right));gap:10px;align-items:center}
.formation-bottom button{min-height:44px;background:#26322bcf;border-color:#b1b68a33;box-shadow:0 4px 20px #0004;font-size:12px}
.formation-bottom [data-formation=chat-open]{padding:11px 22px;color:#eee1b7;background:linear-gradient(135deg,#5b6041ee,#35432fec);border-color:#bcba784d}
.formation-bottom [data-panel=more]{width:44px;height:44px;padding:0;border-radius:50%;font-size:14px;letter-spacing:0;white-space:nowrap;overflow-wrap:normal}
.formation-console{border-color:#b9b18044;background:linear-gradient(145deg,#30382cf7,#1b2823fa);border-radius:18px;box-shadow:0 -8px 35px #0005}
.formation-menu-actions{display:grid;gap:10px;padding:8px 0}
.formation-menu-actions button,.formation-menu-actions a{display:block;min-height:44px;padding:12px;text-align:center;border-radius:9px;background:#303c32;color:#d8dec8;font-size:14px}
@supports(height:1cqh){.formation-unit:not(.seat):not(.self-general){height:clamp(52px,calc((100cqh - 220px - var(--empty-ranks)*10px)/var(--occupied-ranks)),106px)}}
@media(max-width:370px){.formation-field{left:8px;right:8px}.formation-rank>span{flex-basis:21px}.formation-rank>div{padding-right:21px;gap:10px}.unit-caption{padding-inline:4px}.formation-hero-name{font-size:10px}}

/* Controls share a side rail; the battlefield keeps all vertical space. */
.formation-field{top:env(safe-area-inset-top);bottom:env(safe-area-inset-bottom);right:max(64px,calc(env(safe-area-inset-right) + 56px));left:max(8px,env(safe-area-inset-left))}
.formation-header{left:auto;right:max(12px,env(safe-area-inset-right));display:block!important;width:40px;height:40px;pointer-events:none}
.formation-header .formation-brand{display:none}
.formation-header button{pointer-events:auto}
.formation-bottom{right:max(10px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));flex-direction:column;width:44px}
.formation-bottom [data-formation=chat-open]{width:44px;padding:14px 11px;writing-mode:vertical-rl;letter-spacing:.16em;min-height:90px}
.formation-bottom i{writing-mode:horizontal-tb;letter-spacing:0}
.formation-rank>div{gap:8px;padding-right:0}
.formation-rank>span{flex-basis:22px}
.formation-unit:not(.seat):not(.self-general){flex:0 1 112px;min-width:0;width:calc((100% - 16px)/3);max-width:calc((100% - 16px)/3)}
.formation-front{font-size:10px;letter-spacing:0;display:flex;justify-content:center;align-items:center;gap:9px}
.formation-round{font-size:10px;color:#a8b199;white-space:nowrap}
.formation-front:before,.formation-front:after{display:none}
.formation-console{bottom:max(8px,env(safe-area-inset-bottom));left:max(8px,env(safe-area-inset-left));right:max(64px,calc(env(safe-area-inset-right) + 56px))}
.hero-open .formation-field{bottom:max(228px,calc(env(safe-area-inset-bottom) + 220px))}
.hero-open:has(.formation-console.compact) .formation-field{bottom:max(150px,calc(env(safe-area-inset-bottom) + 142px))}
.hero-open.is-choosing .formation-field{bottom:max(154px,calc(env(safe-area-inset-bottom) + 146px))}
.formation-console-heading>div{gap:3px}.formation-console-heading button{padding-inline:6px}

/* Use the recovered battlefield height for portraits, not empty margins. */
.formation-army{flex:0 0 auto}
.formation-unit:not(.seat):not(.self-general){flex:0 0 calc((100% - 16px)/3)}
@supports(height:1cqh){.formation-unit:not(.seat):not(.self-general){height:max(52px,calc((100cqh - 220px - var(--empty-ranks)*10px)/var(--occupied-ranks)))}}
.formation-portrait-notice{display:none}

.ally .army-label{justify-content:flex-end}

/* Center formations on the viewport, independent of floating controls. */
.formation-field{left:max(8px,env(safe-area-inset-left),env(safe-area-inset-right));right:max(8px,env(safe-area-inset-left),env(safe-area-inset-right))}
.formation-header{top:env(safe-area-inset-top);height:32px}
.formation-header button{height:32px;min-height:32px}
.formation-bottom{flex-direction:row;width:auto;bottom:max(8px,env(safe-area-inset-bottom))}
.formation-bottom [data-formation=chat-open]{writing-mode:horizontal-tb;min-height:44px;width:auto;padding:10px 16px;letter-spacing:0}
.hero-open .formation-bottom{flex-direction:column;width:44px}
.hero-open .formation-bottom [data-formation=chat-open]{writing-mode:vertical-rl;min-height:90px;width:44px;padding:14px 11px}

/* Wide computer windows host a centered portrait board. */
@media(orientation:landscape){
 .formation-battle{max-width:min(620px,75dvh);margin-inline:auto}
 .formation-battle .formation-drawer,.formation-battle .formation-chat{left:50%;right:auto;width:min(620px,75dvh);transform:translateX(-50%)}
}

/* Desktop command view: battle and hand on the left, conversation on the right. */
.formation-battle.desktop-layout{--sidebar-width:clamp(320px,25vw,420px);max-width:none;width:100%;margin:0}
.desktop-layout .formation-header{position:absolute;inset:0 0 auto;height:56px;width:auto;padding:0 24px;display:flex!important;gap:24px;pointer-events:auto;border-bottom:1px solid #9fae8526;background:#18241fe6}
.desktop-layout .formation-header .formation-brand{display:block;font-size:16px;letter-spacing:.12em;color:#d1d8bd}
.desktop-layout .formation-header b{margin:0 auto 0 0;font-size:13px;color:#d3be86}
.desktop-layout .formation-desktop-actions{display:flex;align-items:center;gap:10px;background:none}
.desktop-layout .formation-header button,.desktop-layout .formation-header a{height:34px;min-height:34px;width:auto;padding:7px 14px;display:flex;align-items:center;font-size:12px;border:1px solid #a6b38d33;border-radius:7px;background:#29362b;color:#d2dcc4}
.desktop-layout .formation-field{top:64px;bottom:8px;left:20px;right:calc(var(--sidebar-width) + 36px);padding:0 8px}
.desktop-layout.hero-open .formation-field{bottom:202px}
.desktop-layout.hero-open:has(.formation-console.compact) .formation-field{bottom:150px}
.desktop-layout.hero-open.is-choosing .formation-field{bottom:130px}
.desktop-layout .formation-army{max-width:none;flex:1 0 auto;justify-content:center;padding-block:4px}
.desktop-layout .army-label{font-size:11px;line-height:18px}
.desktop-layout .formation-rank{margin:4px 0}
.desktop-layout .formation-field{--piece-gap:clamp(28px,4vw,64px)}
.desktop-layout .formation-rank>div{gap:var(--piece-gap)}
.desktop-layout .formation-unit:not(.seat):not(.self-general){--piece-height:min(clamp(80px,calc((100cqh - 156px - var(--empty-ranks)*10px)/var(--occupied-ranks)),172px),calc((100cqw - var(--piece-gap)*2)/4));height:var(--piece-height);width:calc(var(--piece-height)*4/3);max-width:none;flex:0 0 calc(var(--piece-height)*4/3);border-radius:9px!important}
.desktop-layout .formation-unit:not(.seat):not(.self-general) .formation-portrait{transform:scale(1.12);transform-origin:50% 18%;object-position:center 18%}
.desktop-layout .formation-hero-name{min-width:0;font-size:12px}
.desktop-layout .formation-front{font-size:12px;max-width:600px}
.desktop-layout .formation-round{display:inline-flex}
.desktop-layout .formation-console{left:20px;right:calc(var(--sidebar-width) + 36px);bottom:12px;height:auto;padding:10px 16px;border-radius:12px}
.desktop-layout .formation-console-heading{min-height:28px}
.desktop-layout .formation-console-heading>b{font-size:14px}
.desktop-layout .formation-hand{min-height:72px;gap:10px;padding-block:5px}
.desktop-layout .formation-hand .formation-hand-card:not(.playing-card){width:64px;flex-basis:64px;height:62px;min-height:62px}
.desktop-layout .formation-action-line{float:left;max-width:40%;min-height:36px}
.desktop-layout .formation-actions{min-height:36px}
.desktop-layout.is-choosing .formation-console{height:auto}
.desktop-layout.is-choosing .formation-choice{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.desktop-layout.is-choosing .formation-choice p{margin:0}
.desktop-layout.is-choosing .formation-variants{grid-row:2;grid-column:1}
.desktop-layout.is-choosing .formation-choice .formation-actions{grid-column:2;grid-row:1 / span 2;min-width:220px}
.desktop-layout .formation-sidebar{position:absolute;top:72px;right:16px;bottom:16px;width:var(--sidebar-width);box-sizing:border-box;display:flex;flex-direction:column;border:1px solid #a7b28733;border-radius:14px;background:#202c25;overflow:hidden;box-shadow:0 8px 32px #0003}
.formation-sidebar-tabs{display:flex;padding:8px;gap:6px;border-bottom:1px solid #adb99026;flex-shrink:0}
.formation-sidebar-tabs button{flex:1;padding:10px;font-size:13px;border:0;border-radius:8px;color:#abb99e;background:transparent}
.formation-sidebar-tabs button[aria-selected=true]{background:#48513a;color:#ece0bb}
.formation-sidebar-tabs i{font:11px sans-serif;background:#b95741;border-radius:12px;padding:2px 5px;color:white;margin-left:6px}
#formation-sidebar-panel{flex:1;min-height:0;display:flex;flex-direction:column}
.desktop-layout .formation-sidebar .formation-chat{position:static;inset:auto;transform:none;width:100%;height:100%;max-height:none;flex:1;min-height:0;border:0;border-radius:0;background:transparent;box-shadow:none;padding:14px;gap:8px}
.desktop-layout .formation-chat-messages{padding:4px 0;scrollbar-width:thin}
.desktop-layout .formation-chat>header{font-size:14px}
.desktop-layout .formation-chat textarea{font-size:14px;min-height:64px}
.desktop-layout .formation-chat>p[role=status]:empty{display:none}
.formation-sidebar-log{overflow:auto;flex:1;min-height:0;padding:14px;scrollbar-width:thin}
.formation-sidebar-log p{margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid #a9b88d20;font-size:13px;line-height:1.6;color:#d2d8c4}
.formation-sidebar-log small{display:block;color:#8f9f86;font-size:10px;margin-bottom:4px}
.desktop-layout .formation-drawer{width:min(560px,calc(100vw - var(--sidebar-width) - 64px));left:calc((100% - var(--sidebar-width) - 16px)/2);right:auto;transform:translateX(-50%)}

/* Military board skin. Border-box keeps both cards and their gap inside each rank. */
.formation-battle,.formation-battle *,.formation-battle *:before,.formation-battle *:after{box-sizing:border-box}
.formation-battle{isolation:isolate;min-width:0;background:#14201d}
.formation-battle:before{content:'';position:absolute;inset:0;z-index:-2;pointer-events:none;background:url('https://bj-cdn.geemii.com/backgrounds/standard/cloud-pass-v1.png') center/cover no-repeat;filter:saturate(.55)}
.formation-battle:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 42%,#11251d30,#091611c9 95%),linear-gradient(#14282060,#0c1915b8)}
.formation-field{min-width:0;max-width:100%;padding-inline:0;overflow-x:hidden;scrollbar-gutter:auto}
/* Reserve paint space inside the scroll clip without moving or shrinking cards. */
.formation-battle:not(.desktop-layout) .formation-field{margin-inline:-6px;padding-inline:6px}
.formation-army{min-width:0;max-width:100%}
.formation-rank{width:100%;min-width:0}
.formation-rank>div{width:100%;min-width:0;flex:1 1 0;padding-inline:0;gap:8px}
.formation-rank:not(.rank-empty):before{content:'';position:absolute;left:8%;right:8%;bottom:-3px;height:1px;background:linear-gradient(90deg,transparent,#b8a87938,transparent);pointer-events:none}
.formation-unit:not(.seat):not(.self-general){--team-edge:#688d7f;--team-hp:#92b79b;flex:0 1 calc((100% - 16px)/3);max-width:calc((100% - 16px)/3);min-width:0;border:1px solid var(--team-edge)!important;border-radius:4px!important;box-shadow:0 11px 10px -5px #000b,inset 0 0 0 2px #e2d0a220;transition:filter .35s,opacity .35s;overflow:hidden}
.formation-unit:not(.seat):not(.self-general).unit-enemy{--team-edge:#a4745c;--team-hp:#ba7963}
.formation-unit:not(.seat):not(.self-general) .formation-portrait{transform:scale(1.2);transform-origin:center 18%;filter:saturate(.88);transition:filter .5s}
.formation-unit:not(.seat):not(.self-general):after{background:linear-gradient(transparent 38%,#07120d38 58%,#091510b8 78%,#07100de8 100%)}
.unit-corners{position:absolute;inset:4px;z-index:2;pointer-events:none;background:linear-gradient(#e4c88b,#e4c88b) left top/9px 1px no-repeat,linear-gradient(#e4c88b,#e4c88b) left top/1px 9px no-repeat,linear-gradient(#e4c88b,#e4c88b) right top/9px 1px no-repeat,linear-gradient(#e4c88b,#e4c88b) right top/1px 9px no-repeat;opacity:.75}
.formation-setup .formation-hero-name{--name-ink:#f3e2b6;--name-seal:#587e6c;position:absolute;z-index:6;isolation:isolate;display:block!important;top:5px;left:7px;width:max-content;max-width:calc(100% - 54px);min-width:0!important;min-height:0!important;height:auto!important;margin:0;padding:2px 23px 3px 4px!important;overflow:hidden;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:var(--name-ink)!important;font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;font-weight:900;letter-spacing:.12em;font-size:clamp(14px,1.85vw,18px);line-height:1.18;text-align:left;text-overflow:ellipsis;text-shadow:-1px -1px 0 #111b16,1px -1px 0 #111b16,-1px 1px 0 #111b16,1px 1px 0 #111b16,0 2px 4px #000,0 0 8px #d2a94d40;white-space:nowrap;transform:none!important;cursor:pointer}
.formation-setup .formation-hero-name:before{content:"";position:absolute;z-index:-1;inset:0 16px 0 -3px;background:linear-gradient(96deg,#0a1512b8 0,#101b17a3 58%,transparent 100%);clip-path:polygon(0 14%,93% 0,100% 34%,95% 76%,76% 91%,43% 82%,5% 100%);opacity:.72;pointer-events:none}
.formation-setup .formation-hero-name:after{content:"将";position:absolute;right:2px;top:50%;display:grid;width:16px;height:16px;place-items:center;border:1px solid #d9c087b5;border-radius:2px;background:color-mix(in srgb,var(--name-seal) 82%,#131913);box-shadow:0 1px 3px #0009,inset 0 0 0 1px #e8d39a26;color:#fff0c5;font:700 9px/1 "Noto Sans SC",sans-serif;letter-spacing:0;text-shadow:0 1px 1px #311;translate:0 -50%;rotate:-4deg;pointer-events:none}
.formation-hero-name:hover{filter:brightness(1.14);text-decoration:none}
.formation-hero-name:hover:before{opacity:.92}
.formation-hero-name:focus-visible{outline:1px solid #ffe4a1;outline-offset:2px}
/* Two aligned rows leave the portrait unobstructed and reserve health width. */
.formation-battle .unit-caption{position:absolute;left:6px;right:6px;bottom:6px;display:grid;grid-template-columns:minmax(0,1fr) max-content;grid-template-rows:20px 22px;column-gap:5px;row-gap:2px;margin:0;padding:0;align-items:center;color:#fff2d2;text-shadow:0 1px 2px #000}
.formation-battle .unit-caption .formation-hero-name{position:relative;z-index:6;display:block;min-width:0;min-height:0;height:auto;margin:0;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:#fff2d2;font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;text-align:left;text-shadow:0 1px 2px #000;cursor:pointer;transform:none!important;grid-column:1;grid-row:2;width:100%;max-width:100%;padding:0!important;font-size:clamp(12px,1.2vw,20px);line-height:22px;letter-spacing:0;font-weight:700;--name-ink:#fff2d2}
.unit-caption .unit-combat{grid-column:1;grid-row:1;display:none;align-items:center;gap:5px;font:10px/16px sans-serif;color:#e8e3d3;white-space:nowrap}
.unit-caption .unit-combat>span{display:inline-flex;align-items:center;gap:1px}
.unit-caption .unit-combat svg{width:11px;height:11px;fill:currentColor;flex:none}
.formation-unit:not(.seat):not(.self-general) .unit-caption .unit-health{grid-column:2;grid-row:2;display:inline-flex;align-items:center;justify-self:end;gap:2px;color:#fff2d2;font:700 clamp(12px,1.3vw,16px)/22px sans-serif;white-space:nowrap}
.unit-health-maximum{font-size:.75em;color:#e2d7bf}
.unit-health-icon{position:static!important;width:13px!important;height:15px!important;object-fit:contain!important;transform:none!important;filter:drop-shadow(0 1px 2px #000)!important}
.unit-health-fallback{font-size:7px}
.formation-unit:not(.seat):not(.self-general) .unit-caption .unit-hand{grid-column:2;grid-row:1;justify-self:end;font:700 14px/20px sans-serif;display:inline-flex;align-items:center;gap:2px;color:#f3e5bf}
.unit-caption .unit-hand svg{width:20px;height:20px;fill:currentColor;flex:none}
.formation-unit:not(.seat):not(.self-general) progress{--hp-start:#6a9b7b;--hp-end:#a9c695;position:absolute;z-index:4;left:0;right:0;bottom:0;width:100%;height:3px;appearance:none;-webkit-appearance:none;background:#301f1d;border:0;accent-color:var(--hp-end)}
.formation-unit:not(.seat):not(.self-general) progress[data-health="medium"]{--hp-start:#b88b35;--hp-end:#ecd16f}
.formation-unit:not(.seat):not(.self-general) progress[data-health="low"]{--hp-start:#b7463e;--hp-end:#f18b70}
.formation-unit:not(.seat):not(.self-general) progress::-webkit-progress-bar{background:#301f1d}
.formation-unit:not(.seat):not(.self-general) progress::-webkit-progress-value{background:linear-gradient(90deg,var(--hp-start),var(--hp-end))}
.formation-unit:not(.seat):not(.self-general) progress::-moz-progress-bar{background:linear-gradient(90deg,var(--hp-start),var(--hp-end))}
.unit-badges{top:5px;left:6px;right:auto;justify-content:flex-start;z-index:3}
.unit-badges span{border:1px solid #c6a77370;border-radius:2px;background:#15271fec;font-family:"Noto Sans SC",sans-serif;font-size:9px;line-height:1.3;padding:2px 3px;color:#dac8a0}
.unit-done{display:inline-flex;align-items:center;justify-content:center;flex:0 0 18px;width:18px;min-width:0;height:18px;padding:0;border:0;background:transparent;color:#dfc78c;transform:none;pointer-events:none}
.unit-done svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 2px #06100c)}
.unit-badges .unit-ai{color:#d5d6ad;margin-left:auto;background:#213c31eb}
.formation-unit:not(.seat):not(.self-general).ready{border-color:var(--team-edge)!important;box-shadow:0 8px 14px #0007}
.formation-unit:not(.seat):not(.self-general).acting{border-color:#edcf80!important;box-shadow:0 0 0 1px #c99a4b,0 0 22px #d6af4c55}
/* Clip the scaled artwork, not the animated frame and its soft outer glow. */
.formation-battle .formation-unit:not(.seat):not(.self-general){overflow:visible}
.formation-art{position:absolute;inset:0;z-index:-2;isolation:isolate;overflow:hidden;border-radius:inherit;pointer-events:none}
.formation-unit:not(.seat):not(.self-general):after{border-radius:inherit}
.formation-unit:not(.seat):not(.self-general) > .action-border{overflow:visible}
/* Wider formation portraits need a slightly stronger line, not a larger glow. */
.formation-unit:not(.seat):not(.self-general) > .action-border rect{stroke-width:3;stroke:#fff8df}
.formation-unit:not(.seat):not(.self-general).selected{outline:1px solid #eee9d7;outline-offset:2px}
.formation-unit:not(.seat):not(.self-general).dead{filter:grayscale(1);opacity:1}
.formation-unit:not(.seat):not(.self-general).dead .unit-fallen{color:#dfd9c9;border-color:#aaa28c;background:#181d19}
.formation-dying-effect{position:absolute;inset:1px;z-index:1;border-radius:inherit;pointer-events:none;background:radial-gradient(ellipse at center,transparent 38%,#8b182855 100%);box-shadow:inset 0 0 0 2px #ec7865,inset 0 0 25px #af293b99;opacity:.7;animation:formation-dying-pulse 2.8s ease-in-out infinite}
.formation-dying-effect.is-still{animation:none}
.formation-unit:not(.seat):not(.self-general).dying .unit-health{color:#ffb2a5}
.unit-dying-heart{width:16px;height:16px;flex:none;fill:none;stroke:#ff958a;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 2px #490810);pointer-events:none}
@keyframes formation-dying-pulse{0%,100%{opacity:.45}50%{opacity:.95}}
@media(prefers-reduced-motion:reduce){.formation-dying-effect{animation:none}}
.formation-unit:not(.seat):not(.self-general).untargetable{opacity:.35}
.formation-unit:not(.seat):not(.self-general).target-chosen{outline:2px solid #ffe5a0;outline-offset:2px}
.formation-unit:not(.seat):not(.self-general).is-hit:after{background:linear-gradient(#bb261855,#2d070777)}
.formation-impact{position:absolute;z-index:8;left:0;right:0;top:28%;pointer-events:none;text-align:center;font:bold clamp(20px,3vw,34px)/1 Georgia,serif;color:#ffe1b1;text-shadow:0 2px 0 #8b2417,0 0 10px #6e0d00}
.formation-front{gap:10px;overflow:visible;color:#ebd7a8;text-shadow:0 2px 3px #000;line-height:1.4}
.formation-front .formation-round{display:inline-flex;align-items:center;justify-content:center;min-height:26px;padding:4px 9px;border:1px solid #af90577a;border-radius:2px;background:linear-gradient(135deg,#394333e8,#17281eee);font-family:"Noto Sans SC",sans-serif;color:#e9d6a6;box-shadow:inset 0 0 0 2px #bda26412,0 3px 8px #0004;white-space:nowrap}
.formation-command{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.formation-turn-banner{position:absolute;z-index:9;left:50%;top:50%;translate:-50% -50%;padding:10px 25px;white-space:nowrap;border-block:1px solid #d6b56c;background:linear-gradient(90deg,transparent,#15251df5 20% 80%,transparent);color:#ffe3a3;font:600 18px/1.4 "Noto Sans SC",sans-serif;letter-spacing:.25em;pointer-events:none}
.central-card-effect{position:fixed!important;z-index:1100!important;left:0!important;top:0!important;width:clamp(52px,7vw,76px)!important;height:auto!important;aspect-ratio:.72;pointer-events:none;will-change:transform,opacity;box-shadow:0 12px 28px #000b,0 0 22px #d9b45d66!important}
.card-motion-layer.play-effects{z-index:1100;perspective:none}
.card-motion-layer.draw-effects,.formation-discard-effects{z-index:1101}
.army-label{color:#dfb69d;opacity:1;text-shadow:0 1px 3px #07110b}
.ally .army-label{color:#bad0b0}
.formation-icon{width:20px;height:20px;flex-shrink:0;pointer-events:none}
.formation-header{right:max(14px,env(safe-area-inset-right));width:36px}
.formation-header button{border:1px solid #9d885a99;border-radius:5px;background:linear-gradient(145deg,#394434f5,#14271ef5);box-shadow:inset 0 0 0 2px #c2aa6c18,0 3px 8px #0005;color:#e0ca95}
.formation-bottom{right:max(14px,env(safe-area-inset-right));gap:7px}
.formation-bottom button,.formation-bottom [data-panel=more],.formation-bottom [data-formation=chat-open]{display:flex;align-items:center;justify-content:center;gap:5px;width:auto;min-width:44px;height:44px;padding:7px 10px;border:1px solid #a18d5999;border-radius:5px;background:linear-gradient(145deg,#3c4831f5,#172c20f5);box-shadow:inset 0 0 0 2px #c2aa6c18,0 3px 10px #0006;color:#ead7a3;font-family:"Noto Sans SC",sans-serif;font-size:12px;writing-mode:horizontal-tb;letter-spacing:.05em}
.hero-open .formation-bottom{width:44px}
.hero-open .formation-bottom button,.hero-open .formation-bottom [data-formation=chat-open]{width:44px;min-height:58px;height:auto;flex-direction:column;padding:6px 2px;writing-mode:horizontal-tb;letter-spacing:0}
.formation-console,.formation-drawer,.formation-chat{border-color:#b29b6066;border-radius:5px;background:linear-gradient(140deg,#303e2ef7,#13251efa);box-shadow:inset 0 0 0 3px #b59a6010,0 -6px 28px #0007}
.formation-console-heading>b,.formation-drawer header>b{font-family:"Noto Sans SC",sans-serif;color:#ebd6a7;letter-spacing:.1em}
.formation-hand .formation-hand-card:not(.playing-card){border:1px solid #a78e54;border-radius:3px;background:linear-gradient(145deg,#46503a,#233125);box-shadow:inset 0 0 0 2px #c5b17416,0 3px 4px #0004}
.formation-hand .formation-hand-card:not(.playing-card).formation-draw-pending{opacity:0!important;pointer-events:none!important;transition:none!important}
.formation-hand-card:not(.playing-card){user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.formation-hand-card:not(.playing-card) b{font-family:"Noto Sans SC",sans-serif;color:#f0dfb5}
.desktop-layout .formation-header{right:0;width:auto;border-bottom-color:#9b86534f;background:linear-gradient(#26382cef,#13241def)}
.desktop-layout .formation-header button,.desktop-layout .formation-header a{border-radius:3px;border-color:#a08b5555;background:linear-gradient(#35452f,#1c3025);color:#e0d1aa}
.desktop-layout .formation-rank>div{gap:var(--piece-gap)}
.desktop-layout .formation-unit:not(.seat):not(.self-general){flex:0 1 calc(var(--piece-height)*4/3);max-width:calc((100% - var(--piece-gap)*2)/3);border-radius:4px!important}
.desktop-layout .formation-unit:not(.seat):not(.self-general) .formation-portrait{transform:scale(1.12)}
.desktop-layout .formation-sidebar{border-radius:5px;border-color:#a68e5466;background:linear-gradient(145deg,#25372a,#13241df5);box-shadow:inset 0 0 0 3px #ac925218,0 8px 28px #0006}
.desktop-layout .formation-console{border-radius:5px}
.formation-sidebar-tabs button{border-radius:3px;font-family:"Noto Sans SC",sans-serif;color:#c5bc9c}
.formation-sidebar-tabs button[aria-selected=true]{background:linear-gradient(#4b5537,#35432e);box-shadow:inset 0 0 0 1px #bda06155;color:#f1ddaa}
@media(prefers-reduced-motion:reduce){.formation-unit:not(.seat):not(.self-general),.formation-unit:not(.seat):not(.self-general) .formation-portrait{transition:none}}

/* Independent buttons keep judgment inspection separate from selecting a hero. */
.formation-unit-select{position:absolute;inset:0;z-index:5;width:100%;height:100%;min-width:0!important;min-height:0!important;padding:0!important;border:0!important;border-radius:inherit!important;background:transparent!important;box-shadow:none!important}
.formation-unit-select:focus-visible{outline:2px solid #ffe4a1;outline-offset:-3px}
.formation-unit-select:disabled{cursor:default}
.formation-judgment-marker{position:absolute;z-index:6;top:29px;right:5px;display:flex;align-items:center;gap:3px;max-width:calc(100% - 10px);min-height:26px!important;height:26px;padding:3px 5px!important;border:0!important;border-radius:3px!important;background:linear-gradient(90deg,#14241a70,#14241ac7)!important;color:#efdfb3!important;font:500 10px/1.2 "Noto Sans SC",sans-serif;white-space:nowrap;text-shadow:0 1px 2px #06100ce6;box-shadow:none;transform:none}
.formation-judgment-marker:hover,.formation-judgment-marker:active{background:linear-gradient(90deg,#14241a99,#14241ae0)!important;transform:none}
.formation-judgment-marker svg{width:11px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;color:#d4bd84}
.formation-judgment-names{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.formation-page .formation-judgment-marker:focus-visible{outline:1px solid #d4bd84;outline-offset:1px}
.formation-rank:has(.formation-treasures) .formation-unit:not(.seat):not(.self-general){min-height:114px}
.formation-treasures{position:absolute;z-index:6;left:6px;right:auto;bottom:54px;display:grid;width:max-content;max-width:calc(100% - 10px);justify-content:start;gap:0;min-width:0;min-height:30px;padding:2px 3px;border:0;border-radius:2px;background:transparent;color:#e9ddbd;text-align:left;text-shadow:0 1px 2px #05100c,0 0 5px #05100c;box-shadow:none;transform:none;overflow:hidden}
.formation-treasures:hover,.formation-treasures:active{background:transparent;color:#fff1c9;transform:none}
.formation-treasure-name{display:flex;align-items:center;gap:4px;min-width:0;font:400 10.5px/13px "Noto Sans SC",sans-serif}
.formation-treasure-icon{flex:none;width:12px;height:13px;color:#c8b37a;filter:drop-shadow(0 1px 2px #05100c)}
.formation-treasure-name>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.formation-treasures:focus-visible{outline:1px solid #dfc78c;outline-offset:1px}
.formation-rank:has(.formation-treasures + .formation-judgment-marker) .formation-unit:not(.seat):not(.self-general){min-height:140px}
.formation-unit:not(.seat):not(.self-general):has(.formation-treasures) .formation-judgment-marker{height:22px;min-height:22px!important;padding:2px 5px!important}
.formation-treasure-detail.formation-drawer{padding:18px 20px max(18px,env(safe-area-inset-bottom));border:1px solid #c5b99535;border-bottom:0;border-radius:16px 16px 0 0;background:#172620;box-shadow:0 -16px 48px #0006;gap:16px}
.formation-treasure-detail header{padding-bottom:12px;border-bottom:1px solid #c5b99520}
.formation-treasure-detail header>b{font-size:14px;font-weight:500;letter-spacing:.04em;color:#e4ddcc}
.formation-treasure-detail header button{border:0;background:transparent;color:#b0b9ac;box-shadow:none;min-height:32px}
.formation-treasure-list{list-style:none;padding:0;margin:0;display:grid;gap:18px}
.formation-treasure-list li{display:grid;grid-template-columns:66px minmax(0,1fr);gap:16px;padding:0 0 18px;border-bottom:1px solid #c5b99516}
.formation-treasure-list li:last-child{padding-bottom:0;border-bottom:0}
.formation-treasure-copy{min-width:0}
.formation-treasure-part{display:flex;align-items:center;gap:4px;font-size:10px;color:#a8b09e}
.formation-treasure-list h3{margin:2px 0;color:#f0e7d2;font-size:15px;font-weight:500;line-height:1.35;overflow-wrap:anywhere}
.formation-treasure-list .formation-treasure-effect{display:flex;align-items:baseline;gap:8px;margin:0 0 2px;font-size:12px;line-height:1.35;color:#cdd5c6}
.formation-treasure-effect strong{font-size:17px;font-weight:500;color:#dfc78c;font-variant-numeric:tabular-nums}
.formation-hero-skill-list{display:grid;gap:14px}
.formation-hero-skill-list article{padding:0 0 14px;border-bottom:1px solid #c5b99520}
.formation-hero-skill-list article:last-child{padding-bottom:0;border-bottom:0}
.formation-hero-skill-list h3{margin:0 0 7px;color:#f0e7d2;font-size:16px;font-weight:600}
.formation-hero-skill-list p{margin:0;color:#cdd5c6;line-height:1.75;overflow-wrap:anywhere}
.formation-treasure-face{height:94px;width:66px;align-self:start;border:1px solid #c5b99555;border-radius:4px;box-shadow:0 3px 10px #0003}
.formation-treasure-face .card-name{top:5px;left:5px;max-width:calc(100% - 10px);max-height:45%;padding:2px 3px;font-size:10px;line-height:1.2}
.formation-treasure-face .card-pips{bottom:5px;right:5px;padding:1px 3px;font-size:10px}
.formation-judgment-list{list-style:none;padding:0;margin:10px 0;display:grid;gap:14px}
.formation-judgment-list li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;padding:12px 0;border-top:1px solid #b29b6040}
.formation-judgment-list h3{margin-top:0;overflow-wrap:anywhere}
.formation-delayed-face{height:90px;width:64px;align-self:start}
.formation-delayed-face .card-name,.formation-judgment-card .card-name{top:5px;left:5px;max-width:calc(100% - 10px);max-height:45%;padding:2px 3px;font-size:10px;line-height:1.2}
.formation-delayed-face .card-pips,.formation-judgment-card .card-pips{bottom:5px;right:5px;padding:1px 3px;font-size:10px}
.formation-judgment-result{position:fixed;z-index:1102;pointer-events:none;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:9px;max-width:calc(100vw - 20px);padding:6px 8px;border:1px solid #c5a765;border-radius:5px;background:linear-gradient(120deg,#304331fa,#14271ffa);box-shadow:0 6px 22px #000a,inset 0 0 0 2px #ddbd7715;color:#eddaae}
.formation-judgment-copy{flex:0 1 auto;min-width:0;display:grid;gap:5px}
.formation-judgment-result small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#e1d6bd;font-size:11px}
.formation-judgment-copy b{font:600 13px/1.3 "Noto Sans SC",sans-serif;white-space:nowrap;color:#ffe29a}
.formation-judgment-result[data-result=hit] .formation-judgment-copy b{color:#baf4c9}
.formation-judgment-result[data-result=miss] .formation-judgment-copy b{color:#ffc0b5}
.formation-judgment-result[data-result=empty] .formation-judgment-copy b{color:#deccb0}
.formation-judgment-outcome{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border:1px solid currentColor;border-radius:50%;opacity:0;transform:scale(.55);animation:formation-judgment-pop .8s cubic-bezier(.2,.85,.25,1.35) .1s both}
.formation-judgment-outcome.is-hit{color:#66df8b}
.formation-judgment-outcome.is-miss{color:#f17c6d}
.formation-judgment-outcome:is(.is-hit,.is-miss){background:transparent;border:0;border-radius:0;box-shadow:none;opacity:1;transform:rotate(-8deg);animation:none}
.formation-judgment-outcome:is(.is-hit,.is-miss) svg{stroke-width:3.6;stroke-linecap:square;filter:drop-shadow(0 1px 1px #07100c)}
.formation-judgment-outcome svg{width:27px;height:27px;overflow:visible;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 2px #07100c)}
.formation-judgment-outcome path{stroke-dasharray:1;stroke-dashoffset:1;animation:formation-judgment-stroke .75s ease-out .4s forwards}
.formation-judgment-outcome.is-miss path:nth-child(2){animation-delay:.65s}
@keyframes formation-judgment-pop{0%{opacity:0;transform:scale(.55) rotate(-8deg)}70%{opacity:1;transform:scale(1.12) rotate(2deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes formation-judgment-stroke{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.formation-judgment-outcome{opacity:1;transform:none;animation:none}.formation-judgment-outcome path{stroke-dashoffset:0;animation:none}}
.formation-center.is-judging>.formation-versus{visibility:hidden}
.formation-judgment-card{width:72px;height:100px;flex:none}
.formation-judgment-card .card-name{font-size:12px;padding:2px 3px;color:#293d33;text-shadow:none}
.formation-judgment-card .card-pips{font-size:12px;bottom:5px;right:5px}

/* Fixed 2-2 ranks: use the same row span and card height for every general. */
.two-ranks .formation-field{--piece-height:max(76px,calc((100cqh - 184px)/4));--rank-gap:10px}
.two-ranks .formation-army{flex:1 0 auto;padding-block:4px;justify-content:center}
.two-ranks .formation-rank{margin:7px 0;justify-content:center}
.two-ranks .formation-rank>div{--rank-count:2;display:grid;grid-template-columns:repeat(var(--rank-count),minmax(0,1fr));gap:var(--rank-gap);flex:0 1 100%;margin-inline:auto}
.two-ranks .formation-rank[data-count="2"]>div{--rank-count:2}
.two-ranks .formation-rank[data-count="1"]>div{--rank-count:1;max-width:50%}
.two-ranks .formation-unit:not(.seat):not(.self-general){height:var(--piece-height);width:100%;min-width:0;max-width:none;flex:none}
.two-ranks .formation-rank.rank-empty{display:none}
.two-ranks .formation-unit:not(.seat):not(.self-general) .formation-portrait{transform:scale(1.1);object-position:center 18%}
.two-ranks .formation-front{margin-block:8px}
.desktop-layout.two-ranks .formation-field{--piece-height:clamp(90px,calc((100cqh - 156px)/4),220px);--rank-gap:clamp(12px,2vw,28px)}
.desktop-layout.two-ranks .formation-rank>div{flex-basis:min(100%,calc(var(--piece-height)*4.2));max-width:100%}
.desktop-layout.two-ranks .formation-unit:not(.seat):not(.self-general){height:var(--piece-height);width:100%;max-width:none;flex:none}

/* Keep advisor and orders between the armies, leaving the hand dock full width. */
.formation-center{position:relative;flex:0 0 auto;width:100%;min-height:60px;margin:8px auto;display:flex;align-items:center;justify-content:center}
.formation-center .formation-front{margin:0;min-height:60px;flex-direction:column;gap:3px}
.formation-center .formation-enemy-label{font-size:10px;line-height:14px;letter-spacing:.12em;color:#dfb69d}
.formation-battle:not(.desktop-layout) .formation-center .formation-front{flex-direction:column;gap:3px;padding-inline:76px}
.formation-center .formation-command{max-width:100%}
.formation-action-status{font:500 11px/1.35 "Noto Sans SC",sans-serif;letter-spacing:.04em;white-space:nowrap;text-shadow:0 1px 3px #000}
.formation-action-status.opponent{color:#e2b7a4}
.formation-action-status.player{color:#c9d7bd}
.formation-center .formation-bottom{position:absolute;inset:50% 0 auto;transform:translateY(-50%);display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:auto;height:44px;gap:0;pointer-events:none}
.formation-center .formation-bottom button,.formation-center .formation-bottom [data-formation=chat-open],.formation-center .formation-bottom [data-panel=more]{flex-direction:row;width:66px;min-width:44px;min-height:44px;height:44px;padding:6px 7px;writing-mode:horizontal-tb;letter-spacing:0;pointer-events:auto}
.formation-center .formation-bottom i{position:absolute;right:-3px;top:-5px}
.formation-battle:not(.desktop-layout) .formation-console{right:max(8px,env(safe-area-inset-right))}

/* Hero tools stay on the left; available skills gather beside the collapse control. */
.formation-console .formation-console-heading{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:center}
.formation-console-identity{display:flex;align-items:center;gap:4px;min-width:0}
.formation-console-identity b{max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:#ebd6a7}
.formation-console-heading .formation-console-control{min-height:30px;padding:3px 6px;flex-shrink:0;border:0;background:transparent;box-shadow:none;color:#d8d6c4;font-size:11px}
.formation-console-control[aria-pressed=true]{color:#f0d28c;background:transparent}
.formation-console-heading .formation-skill-bar{min-width:0;display:flex;justify-content:flex-end;gap:5px;overflow-x:auto;scrollbar-width:thin}
.formation-skill-bar button{flex-shrink:0;white-space:nowrap;min-height:34px;padding:5px 9px;color:#e9d4a0;border-color:#b79b5b88}
/* Skill buttons share action-button colors; retain long-press protections. */
.formation-skill-bar [data-formation=skill]{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;transform:none}
.formation-skill-bar [data-formation=skill]:active{transform:none}
@media(max-width:430px){.formation-console-identity b{max-width:42px}.formation-console .formation-console-heading{gap:5px}.formation-console-heading .formation-console-control{padding-inline:4px}}
.formation-console .formation-console-heading:is(.has-skill,.has-card){grid-template-columns:minmax(0,1fr)}
.formation-console-heading:is(.has-skill,.has-card) .formation-console-identity b{max-width:none;font-size:13px;white-space:normal;overflow-wrap:anywhere}

/* Keep long hero names and response instructions readable within the board. */
.formation-action-status{white-space:normal;max-width:100%;overflow-wrap:anywhere;text-align:center}
.formation-response-prompt{margin:3px 0;color:#e9d4a0;font-size:11px;line-height:1.4;overflow-wrap:anywhere}
.formation-action-status.notice{color:#efd69d}

/* Formation dialogs float at the viewport center; the hand console stays anchored. */
.formation-battle>.formation-drawer,.formation-battle>.formation-chat{inset:50% auto auto 50%;width:min(620px,calc(100vw - 24px));max-height:calc(100dvh - 32px);transform:translate(-50%,-50%);border-radius:14px;box-shadow:0 16px 60px #0009}
.formation-battle>.formation-treasure-detail{border-bottom:1px solid #c5b99535;border-radius:14px}

/* Keep the hand console and battlefield stable while switching heroes or actions. */
.formation-battle .formation-console:is(.compact,.has-actions){height:116px;max-height:45dvh;overflow-y:auto;overscroll-behavior:contain}

.formation-battle.desktop-layout .formation-console:is(.compact,.has-actions){height:110px}
@media(max-height:680px){.formation-battle .formation-console:is(.compact,.has-actions){height:104px}}
.formation-battle .formation-console:is(.compact,.has-actions){display:flex;flex-direction:column}
.formation-console>.formation-console-heading,.formation-console>.formation-response-prompt,.formation-console>.formation-choice{flex-shrink:0}
.formation-battle .formation-console>.formation-hand,.formation-battle .formation-console>.formation-hand-empty{min-height:0;flex:1;overflow-y:auto}

.formation-judgment-item{font-size:14px;font-weight:600;line-height:1.35;overflow-wrap:anywhere;color:#eddaae}

/* Give the central card display the space recovered below the allied ranks. */
.formation-battle .formation-console:is(.compact,.has-actions){padding:4px 4px 4px 8px}
.formation-battle .formation-console>.formation-hand{padding-block:2px}
.two-ranks .formation-field{--center-space:clamp(100px,14dvh,160px);--piece-height:max(76px,calc((100cqh - var(--center-space) - 64px)/4));padding-block:0}
.desktop-layout.two-ranks .formation-field{--piece-height:clamp(90px,calc((100cqh - var(--center-space) - 64px)/4),220px)}
.two-ranks .formation-army{flex:0 0 auto;padding-block:0}
.two-ranks .formation-center{flex:1 0 var(--center-space);min-height:var(--center-space);margin-block:4px}
.central-card-effect .card-name{font-size:14px!important;line-height:1.25!important}
.central-card-effect .card-pips{font-size:13px!important}
.formation-battle .formation-console>.formation-choice{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;gap:2px;overflow:hidden}
.formation-battle .formation-choice :is(.formation-skill-description,.formation-card-description){flex:1;min-height:0;max-height:none;overflow:auto;margin:2px 0}
.formation-battle .formation-choice .formation-actions{flex-shrink:0;padding-top:0}
.formation-battle .formation-choice .formation-variants{min-height:0;max-height:35%;overflow:auto}

.formation-judgment-heading,.formation-judgment-summary{display:flex;align-items:center;gap:6px;min-width:0}
.formation-judgment-heading small{flex-shrink:0;max-width:40%}
.formation-judgment-heading .formation-judgment-item{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.formation-judgment-result>.formation-judgment-outcome{flex-basis:26px;width:26px;height:26px}
.formation-judgment-result>.formation-judgment-outcome svg{width:20px;height:20px}

/* Public pile counts stay inside the round plaque on narrow battlefields. */
.formation-front .formation-round{flex-wrap:wrap;gap:3px 9px;max-width:100%;box-sizing:border-box}
.formation-pile-counts{display:inline-flex;gap:8px;font-size:10px;line-height:1.4;color:#c9c5a9}
.formation-pile-counts b{font-weight:600;font-variant-numeric:tabular-nums;color:#eddaae}

.formation-skill-bar .formation-response-prompt{align-self:center;flex-shrink:0;margin:0 6px 0 0;white-space:nowrap}

.formation-console-heading .formation-skill-bar.has-response{align-items:center;overflow:visible}
.formation-skill-bar.has-response .formation-response-prompt{flex:1 1 auto;min-width:0;white-space:normal;text-align:right;margin:0 4px 0 0}
.formation-skill-bar.has-response>button{flex-shrink:0}

/* Keep concise actor/action copy inside every central card, above its pips. */
.central-card-effect{overflow:hidden!important}
.central-card-effect .card-action-label{display:none}
.formation-card-caption{position:absolute;z-index:3;bottom:28px;left:5px;right:5px;padding:3px 1px;background:#10221fe6;border:0;border-radius:2px;color:#f1dfac;text-align:center;font:10px/1.3 "Noto Sans SC",sans-serif;box-sizing:border-box;text-shadow:0 1px 2px #000;pointer-events:none}
.formation-card-caption>b{display:block;white-space:normal;overflow-wrap:anywhere;font-size:10px;font-weight:600;line-height:1.3}
.formation-central-discard .formation-card-caption{bottom:8px}

/* Left battle status, centered matchup marker, right tools. */
.formation-center .formation-bottom{inset:50% 0 auto auto;flex-direction:column;justify-content:center;width:66px;height:auto;gap:6px}
.formation-center .formation-bottom button{position:relative}
.formation-battle.formation-page .formation-center .formation-front{position:absolute;left:0;right:auto;top:50%;transform:translateY(-50%);width:clamp(76px,18%,132px);max-width:24%;min-height:0;margin:0;padding:0;align-items:center;gap:5px;box-sizing:border-box}
.formation-center .formation-round{width:100%;padding:4px;gap:3px 6px}
.formation-center .formation-pile-counts{flex-wrap:wrap;justify-content:center;gap:2px 6px}
.formation-center .formation-action-status{width:100%;white-space:normal;overflow-wrap:anywhere;text-align:center;font-size:10px}
.formation-versus{font:italic 700 clamp(24px,4vw,44px)/1 Georgia,serif;letter-spacing:.08em;color:#e7d3a0;text-shadow:0 2px 4px #07120e,0 0 12px #d0ad5730;pointer-events:none}

.formation-center .formation-round{font-size:10px;line-height:1.25;flex-direction:column}
.formation-center .formation-round>span{line-height:1.25}
.formation-center .formation-pile-counts>span{white-space:nowrap}

/* Central revealed cards: centered suit/name header and bottom action caption. */
.central-card-effect .formation-card-caption{bottom:7px}
.formation-card-heading{position:absolute;z-index:3;top:5px;left:5px;right:5px;display:flex;align-items:center;justify-content:center;gap:3px;min-width:0}
.central-card-effect .formation-card-heading .card-pips{position:static;flex:0 0 auto;margin:0;padding:1px 2px;font-size:10px!important;line-height:1.2;white-space:nowrap}
.central-card-effect .formation-card-heading .card-name{position:static;flex:0 1 auto;min-width:0;max-width:none;max-height:none;margin:0;padding:1px 2px;font-size:12px!important;line-height:1.2!important;text-align:center;overflow-wrap:anywhere}
.central-card-effect .formation-card-heading .card-name-long{font-size:10px!important}

.formation-center .formation-action-status{padding:0;margin:0;border:0;background:transparent;box-sizing:border-box}

.formation-console-heading .formation-discard-actions{display:flex;justify-content:flex-end;gap:4px;min-width:0;flex-wrap:wrap}
.formation-console-heading .formation-discard-actions button{flex:0 0 auto;min-height:30px;padding:3px 6px;font-size:11px}
.formation-battle .formation-console>.formation-discard-prompt{flex:0 0 auto;overflow:visible}
.formation-discard-prompt p{margin:1px 0;font-size:11px}

.formation-battle .formation-discard-prompt .formation-card-description{flex:none;max-height:28px;overflow:auto}
.central-card-effect .formation-card-heading .card-pips{align-self:center;font-size:9px!important;padding:1px}
.central-card-effect .formation-card-heading .card-name{align-self:center;padding:1px;letter-spacing:0}
.central-card-effect .formation-card-heading .card-name.card-name-long{font-size:9px!important}
.formation-battle .formation-console>.formation-discard-prompt{display:flex;flex-direction:row;align-items:center;gap:8px;height:18px;min-height:18px;overflow:hidden}
.formation-battle .formation-discard-prompt .formation-card-description{flex:1;min-width:0;height:16px;max-height:16px;margin:0}
.formation-battle .formation-discard-prompt>p{flex:1;min-width:0;max-height:16px;margin:0;overflow:auto;line-height:16px}

/* A single ivory title plaque and a quiet, readable source footer. */
.central-card-effect .formation-card-heading{top:5px;left:5px;right:5px;gap:4px;padding:3px 2px;background:#f5ead4f5;border:1px solid #ae915c99;border-radius:3px;box-shadow:0 1px 3px #0004;box-sizing:border-box}
.central-card-effect .formation-card-heading :is(.card-pips,.card-name){background:transparent;border:0;border-radius:0;box-shadow:none;text-shadow:none;padding:0}
.central-card-effect .formation-card-heading .card-pips{font-size:11px!important}
.central-card-effect .formation-card-heading .card-name{font-size:12px!important}
.central-card-effect .formation-card-heading .card-name.card-name-long{font-size:11px!important}
.central-card-effect .formation-card-caption{bottom:5px;left:5px;right:5px;padding:8px 2px 3px;border:0;border-radius:0;background:linear-gradient(transparent,#0a1b16e8 30%,#0a1b16f5);color:#f1e8d0;text-shadow:0 1px 2px #000}
.central-card-effect .formation-card-caption>b{font-size:11px;font-weight:500;line-height:1.3}
.central-card-effect:is([data-mode="identity"],[data-mode="formation"]) .formation-card-heading{flex-direction:row;gap:4px;padding:3px}
.central-card-effect:is([data-mode="identity"],[data-mode="formation"]) .formation-card-heading .card-name{order:0;width:auto;white-space:nowrap;font-size:14px!important;line-height:1.2!important}
.central-card-effect:is([data-mode="identity"],[data-mode="formation"]) .formation-card-heading .card-name.card-name-long{font-size:12px!important}
.central-card-effect:is([data-mode="identity"],[data-mode="formation"]) .formation-card-heading .card-pips{font-size:12px!important}
.central-card-effect:is([data-mode="identity"],[data-mode="formation"]) .formation-card-caption{bottom:3px;left:3px;right:3px;padding:6px 2px 2px}
.central-card-effect:is([data-mode="identity"],[data-mode="formation"]) .formation-card-caption>b{font-size:12px}
.central-card-effect:is([data-mode="identity"],[data-mode="formation"]) .formation-card-caption>small{font-size:10px}
.formation-card-caption>small{display:block;margin-top:1px;color:#caba92;font:9px/1.2 "Noto Sans SC",sans-serif;letter-spacing:.15em}

.formation-console .formation-console-heading:is(.has-skill,.has-card){grid-template-columns:minmax(0,1fr) auto;align-items:start}
.formation-console-heading .formation-choice-actions{display:flex;justify-content:flex-end;align-items:flex-start;gap:4px;min-width:0}
.formation-console-heading .formation-choice-actions button{min-width:72px;min-height:30px;padding:3px 16px;font-size:11px;max-width:min(160px,42vw);white-space:normal;overflow-wrap:anywhere}

.formation-center .formation-front .formation-round{min-height:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;text-shadow:0 1px 3px #07120e}

.formation-center .formation-round,.formation-center .formation-pile-counts,.formation-center .formation-action-status{font-size:12px;line-height:1.4}

.formation-console-heading .formation-discard-controls{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0}
.formation-discard-count{min-width:0;margin:0;color:#e9d4a0;font-size:11px;line-height:1.35;text-align:right;overflow-wrap:anywhere}
.formation-discard-controls .formation-discard-actions{flex-shrink:0;flex-wrap:nowrap}
.discard-count-short{display:none}
@media(max-width:430px){.formation-discard-count .discard-count-full{display:none}.formation-discard-count .discard-count-short{display:inline}.formation-console-heading .formation-discard-controls{gap:4px}.formation-discard-controls .formation-discard-actions button{padding-inline:4px}}

.formation-battle.formation-page .formation-center .formation-front{gap:16px}
.formation-center .formation-action-status.player{color:#8cdda0}
.formation-center .formation-action-status.opponent{color:#f28c81}

.formation-turn-banner{position:fixed;z-index:1200;font-size:clamp(24px,4vw,36px);padding:12px 24px;box-sizing:border-box;text-align:center;letter-spacing:.15em;border-color:currentColor;text-shadow:0 2px 4px #000,0 0 12px #07120e}
.formation-turn-banner[data-team="0"]{color:#8cdda0}
.formation-turn-banner[data-team="1"]{color:#f28c81}

/* Portrait cards share the hand dock edges, including device safe areas. */
.formation-battle:not(.desktop-layout) .formation-field{left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right))}

.formation-hero-picker{width:min(680px,calc(100vw - 32px));max-height:80dvh;box-sizing:border-box;padding:16px;border:1px solid #9caf8088;border-radius:12px;background:#25312a;color:#edf0e7;overflow:auto}
.formation-hero-picker::backdrop{background:#000a}
.formation-hero-picker header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.formation-hero-picker h2{margin:0;font-size:20px}
.formation-hero-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px}
.formation-hero-grid button{padding:0;overflow:hidden;display:flex;flex-direction:column;align-items:stretch}
.formation-hero-grid img{width:100%;height:120px;object-fit:cover}
.formation-hero-grid span{padding:8px}
.formation-hero-grid button[aria-pressed=true]{outline:2px solid #e2c57c;outline-offset:1px}

/* Deployment uses the battle card artwork, frame, corners and name treatment. */
.deployment-row .formation-unit:not(.seat):not(.self-general){width:100%;max-width:none;min-width:0;height:auto;min-height:110px;aspect-ratio:4/3;touch-action:none}
.deployment-row .formation-unit:not(.seat):not(.self-general) .formation-portrait{transform:scale(1.1);object-position:center 18%}
.deployment-row .formation-hero-name{max-width:calc(100% - 14px);box-sizing:border-box}

.formation-setup-heading{display:flex;align-items:center;gap:16px;margin:16px 0}
.formation-setup-heading h1{margin:0}
.formation-setup-heading .formation-rules-link{padding:4px 0;min-width:0;border:0;background:transparent;box-shadow:none;color:#c9d6c7;font-size:14px;text-decoration:underline;text-underline-offset:3px}
.formation-rules-dialog{width:min(620px,calc(100vw - 32px));max-height:80dvh;box-sizing:border-box;overflow:auto;padding:20px;border:1px solid #9caf8088;border-radius:12px;background:#25312a;color:#edf0e7}
.formation-rules-dialog::backdrop{background:#000a}
.formation-rules-dialog header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.formation-rules-dialog h2{margin:0;font-size:20px}
.formation-rules-dialog p{line-height:1.8}

.formation-setup .formation-recents-title{margin:36px 0 8px;font-size:18px;line-height:1.4}

/* Public elemental attachment and reaction state. */
.element-status{font-size:10px;line-height:1.3;color:#fff6d8;background:#172238ed;padding:2px 4px;border-radius:4px;max-width:100%;overflow-wrap:anywhere}
.formation-unit:not(.seat):not(.self-general)>.element-status{position:absolute;top:24px;left:3px;right:3px;z-index:3;pointer-events:none}
.element-help{font-size:13px;line-height:1.6;margin:8px 0}.element-help p{white-space:normal}
.card-face .card-pips.fire{color:#b62c16}.card-face .card-pips.water{color:#125aa6}.card-face .card-pips.thunder{color:#7638a4}.card-face .card-pips.grass{color:#376d10}.card-face .card-pips.ice{color:#147581}.card-face .card-pips.wind{color:#137154}.card-face .card-pips.rock{color:#876014}

.formation-reaction-preview{margin:3px 0;color:#ffe6a6;font-size:12px;line-height:1.4}

.formation-center > .battle-emblem { position: fixed; left: 50vw; top: calc(50dvh + 12px); transform: translate(-50%, -50%); width: clamp(38px, 9vw, 68px); opacity: .32; }
.formation-center.is-judging > .battle-emblem { visibility: hidden; }

.formation-center > .battle-emblem > span { font-size: clamp(13px, 2.7vw, 22px); }

.formation-detail-heading { display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .8rem; min-width:0; }
.formation-detail-stats { font-size:.85rem; font-weight:400; }


/* Use the eight-seat table grid without a separate formation seating layout. */
.game-page.ring-formation{width:100%;max-width:none;margin:0;height:100dvh;min-height:0;display:flex;flex-direction:column;--battle-safe-left:env(safe-area-inset-left);--battle-safe-right:env(safe-area-inset-right)}
.ring-formation .game-layout{min-height:0;height:100%;width:100%}
.ring-formation .formation-unit{padding:0}
.ring-formation .formation-unit-select{z-index:2}
.ring-formation .formation-unit.selected{outline:1px solid #e5d6ac;outline-offset:2px}
.ring-formation .formation-unit.targetable{outline:2px solid #c79843;outline-offset:-2px}
.ring-formation .formation-unit.target-chosen{outline:3px solid #ffdc83;box-shadow:0 0 18px #e1b65888}
.ring-formation .formation-unit.untargetable{opacity:.45}
.ring-formation .unit-badges{top:4px;right:4px;left:auto;z-index:6;pointer-events:none}
.ring-formation .formation-console{position:static;inset:auto;display:grid;grid-column:2 / 4;grid-row:1;grid-template-columns:minmax(0,1fr) var(--player-card-width);grid-template-rows:minmax(0,1fr);gap:14px;height:100%;max-height:100%;min-height:0;overflow:visible;padding:0;margin:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.ring-formation .hand-area{grid-column:1;grid-row:1}
.ring-formation .action-zone{grid-column:2;grid-row:1;position:static;overflow:auto;justify-content:flex-end}
.ring-formation .formation-commander{position:absolute;bottom:calc(100% + 4px);left:0;display:flex;align-items:center;gap:8px;font-size:11px;color:#d4c5a2;z-index:5}
.ring-formation .formation-commander button{font-size:11px;min-height:24px;padding:2px 6px}
.ring-formation .formation-hand{display:flex!important;min-height:0}
.ring-formation .formation-hand-empty{min-height:0}
.ring-formation .formation-skill-bar{display:flex;flex-direction:column;overflow:visible;align-items:stretch;gap:4px}
.ring-formation :is(.formation-choice-actions,.formation-discard-actions){display:flex;flex-direction:column;gap:4px}
.ring-formation .formation-discard-controls{display:flex;flex-direction:column}
.ring-formation .formation-choice{flex:none}
.ring-formation .formation-variants{flex-direction:column;max-height:80px}
.ring-formation .formation-center{width:auto;min-height:0;display:block;pointer-events:none}
.ring-formation .formation-center>.battle-emblem{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:clamp(60px,10vw,140px)}
.ring-formation .formation-round{display:flex;flex-direction:row;gap:12px}
.ring-formation .formation-bottom .battle-tool-label{display:none}
.ring-formation .formation-draw-pending{opacity:0!important;pointer-events:none!important}
.ring-formation .formation-portrait-notice{display:none}
.ring-formation .formation-modal{z-index:1000}
.ring-formation .formation-modal>.formation-drawer{position:relative;inset:auto;transform:none;width:min(620px,calc(100vw - 24px));max-height:calc(100dvh - 32px);border-radius:14px}
.ring-formation .selected-card-details{position:fixed;z-index:35;width:max-content;max-width:220px;padding:3px 7px;border:0;background:#14221ddd;color:#ead49b;font-size:12px;transform:translateX(-50%)}
.ring-formation .card-tip:has(.selected-card-details){position:static;overflow:visible}
.ring-formation .skill-tip{bottom:calc(100% + 8px);max-height:none;overflow:visible}
@media(orientation:portrait){.game-page.ring-formation>.formation-portrait-notice{position:fixed;inset:0;z-index:1100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;background:#19241f;text-align:center}}

.game-page.ring-formation .battle-menu-drawer{inset:58px max(12px,env(safe-area-inset-right)) auto auto;transform:none;width:220px;max-height:calc(100dvh - 70px);padding:8px;border-radius:10px 3px 10px 3px;background:#101d1e}
.game-page.ring-formation .formation-menu-actions.battle-menu-panel{position:static;width:auto;box-shadow:none;border:0;padding:0;background:transparent;display:flex;flex-direction:column;gap:2px}
.game-page.ring-formation .formation-menu-actions :is(button,a){padding:7px 9px;min-height:32px;background:transparent;border:0;font-size:12px;text-align:left;border-radius:5px}
.game-page.ring-formation .formation-menu-actions :is(button,a):hover{background:#88704432}
.game-page.ring-formation .formation-drawer.battle-log{inset:58px 12px 12px auto;transform:none;width:min(420px,calc(100vw - 24px));max-height:none;background:#101d1eee}

.game-page.ring-formation .formation-bottom{position:fixed;inset:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) auto auto;transform:none;width:auto;display:flex;flex-direction:row;gap:8px;z-index:30}
.game-page.ring-formation .formation-bottom .battle-tool{width:38px;height:38px;min-height:38px;padding:0;border-radius:9px 3px 9px 3px}
.game-page.ring-formation .formation-front{flex:none;line-height:1.4;background:none;border:0}
.game-page.ring-formation .formation-round{font-size:10px;letter-spacing:.5px;line-height:1.3;white-space:nowrap}
.game-page.ring-formation.table-themed .formation-console{background:transparent!important}

.game-page.ring-formation .formation-front .formation-round{padding:0;border:0;background:none;box-shadow:none}

/* Keep chat at the lower right without changing the ring's available width. */
.game-page.ring-formation .formation-bottom [data-formation="chat-open"]{position:fixed;inset:auto max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) auto}
.game-page.ring-formation .action-zone{padding-bottom:52px}

.ring-formation .formation-unit > .unit-done{position:absolute;top:var(--card-inset);left:calc(var(--card-inset) + 24px);width:24px;height:24px;padding:0;border:0;background:transparent;z-index:6}

.ring-formation .unit-done svg{width:18px;height:18px;filter:drop-shadow(0 1px 2px #06100c)}
.ring-formation .unit-done svg path{fill:none;stroke:#e6cf96;stroke-width:1.6}
.ring-formation .unit-done svg .unit-done-outline{stroke:#14201b;stroke-width:3.2}
.ring-formation .formation-unit.activation-spent > :not(.unit-done):not(.formation-unit-select):not(.role){filter:grayscale(1);opacity:.5}

.game-page.ring-formation .formation-unit > .role[data-allegiance="ally"]{color:#8cdda0}
.game-page.ring-formation .formation-unit > .role[data-allegiance="enemy"]{color:#f28c81}

/* Keep prepared skill controls visible while the hand remains selectable. */
.ring-formation .formation-choice-actions{flex-shrink:0;overflow:visible}
.ring-formation .payment-summary{font-size:11px;color:#ddcfaa;margin-left:8px;white-space:normal}

/* Identity-table public cards keep the artwork clear; captions use reserved space below. */
.central-card-effect[data-mode="identity"] { overflow: visible!important; }
.central-card-effect[data-mode="identity"] .card-art { border-radius: inherit; }
.central-card-effect[data-mode="identity"] .formation-card-caption {
  top: calc(100% + 3px); bottom: auto; left: -4px; right: -4px;
  display: flex; justify-content: center; align-items: baseline; gap: 4px;
  height: 16px; padding: 0; background: none; white-space: nowrap;
}
.central-card-effect[data-mode="identity"] .formation-card-caption>b {
  display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 10px; line-height: 16px;
}
.central-card-effect[data-mode="identity"] .formation-card-caption>small {
  flex: none; margin: 0; font-size: 10px; line-height: 16px; letter-spacing: 0;
}
.central-card-effect[data-mode="identity"] .formation-card-caption>small::before { content: '· '; }
.central-card-effect[data-mode="identity"] .formation-card-heading {
  top: 3px; left: 2px; right: 2px; gap: 2px; padding: 2px;
}
.central-card-effect[data-mode="identity"] .formation-card-heading .card-name {
  overflow: hidden; text-overflow: ellipsis;
}

/* Public actions must remain above the viewport edge.
   While commanding a hero, keep chat beside the menu instead of over actions. */
.game-page.ring-formation .action-zone{top:0;padding-bottom:0}
.game-page.ring-formation.hero-open .formation-bottom [data-formation="chat-open"]{top:calc(max(10px,env(safe-area-inset-top)) + 46px);bottom:auto}
.game-page.ring-formation .action-zone{height:var(--ring-seat-height,32dvh);max-height:var(--ring-seat-height,32dvh);overflow:hidden}
.game-page.ring-formation .formation-skill-bar{max-height:100%;overflow-y:auto;overscroll-behavior:contain;flex-shrink:1}

/* Public cards scale with the hand; reserve an external caption in both modes. */
.central-card-effect:is([data-mode="identity"],[data-mode="formation"]) { overflow:visible!important; }
.central-card-effect:is([data-mode="identity"],[data-mode="formation"]) .card-art { border-radius:inherit; }
.central-card-effect:is([data-mode="identity"],[data-mode="formation"]) .formation-card-caption {
  top:calc(100% + 2px);bottom:auto;left:0;right:0;display:flex;flex-direction:row;
  justify-content:center;align-items:baseline;gap:3px;height:16px;padding:0;background:none;white-space:nowrap;
}
.central-card-effect:is([data-mode="identity"],[data-mode="formation"]) .formation-card-caption > b {
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--public-caption-font,11px);line-height:16px;
}
.central-card-effect:is([data-mode="identity"],[data-mode="formation"]) .formation-card-caption > small {
  flex:none;font-size:var(--public-caption-font,11px);line-height:16px;
}
.central-card-effect:is([data-mode="identity"],[data-mode="formation"]) .formation-card-caption > small::before { content:'· '; }
.central-card-effect:is([data-mode="identity"],[data-mode="formation"]) .formation-card-heading :is(.card-pips,.card-name,.card-name.card-name-long) {
  font-size:var(--public-card-font,14px)!important;line-height:1.2!important;
}

.central-card-effect:is([data-mode="identity"],[data-mode="formation"]) .formation-card-heading { left:2px;right:2px;gap:2px;padding:2px; }
.central-card-effect:is([data-mode="identity"],[data-mode="formation"]) .formation-card-caption { left:-4px;right:-4px; }
.central-card-effect:is([data-mode="identity"],[data-mode="formation"])[data-compact="true"] .formation-card-caption > small::before { content:''; }

.central-card-effect:is([data-mode="identity"],[data-mode="formation"])[data-compact="true"] .formation-card-heading { left:1px;right:1px;gap:1px;padding:1px 0; }

/* Keep target and public cause readable below the card in both battle modes. */
.central-card-effect:is([data-mode="identity"],[data-mode="formation"]) .formation-card-caption {
  left:50%;right:auto;width:var(--public-caption-width,100%);transform:translateX(-50%);height:auto;min-height:14px;display:flex;flex-direction:column;align-items:stretch;gap:0;
}
.central-card-effect:is([data-mode="identity"],[data-mode="formation"]) .formation-card-caption > :is(b,small) {
  display:block;min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:0;line-height:14px;
}
.central-card-effect:is([data-mode="identity"],[data-mode="formation"]) .formation-card-caption > b {font-size:11px}
.central-card-effect:is([data-mode="identity"],[data-mode="formation"]) .formation-card-caption > small {font-size:10px;color:#e1cf9c}
.central-card-effect:is([data-mode="identity"],[data-mode="formation"]) .formation-card-caption > small::before {content:''}
.central-card-effect[data-tiny="true"] .formation-card-heading {flex-direction:column;gap:0}
.central-card-effect[data-tiny="true"] .formation-card-heading .card-pips {flex:none}