/* Playable XP candidate only. Load after card-bands.css.
   DOM: .top > .journey-bar; #game > #mainActionDock.main-action-panel.
   Existing XP footer and card inspection contracts remain with card-bands.css. */
body[data-progression="xp"] .top{height:66px;min-height:66px;display:grid;grid-template-columns:minmax(170px,1fr) minmax(0,2fr) auto;gap:12px;padding:5px 16px}
body[data-progression="xp"] .top>.brand{grid-column:1;grid-row:1;min-width:0}
body[data-progression="xp"] .top>.top-actions{grid-column:3;grid-row:1;gap:5px}
body[data-progression="xp"] .top>.journey-bar{grid-column:2;grid-row:1;height:100%;min-height:0;min-width:0;width:100%;padding:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 8px;background:none}
body[data-progression="xp"] .top>.journey-bar .chapter{display:none}
body[data-progression="xp"] .top>.journey-bar .enemy-status{min-width:0;grid-column:1;grid-row:1;text-align:center;font-size:14px}
body[data-progression="xp"] .top>.journey-bar #enemyStatus{font-size:14px;line-height:18px}
body[data-progression="xp"] .top>.journey-bar #trail{justify-content:center;gap:5px}
body[data-progression="xp"] .top>.journey-bar .forecast-button{grid-column:2;grid-row:1;max-width:180px;min-height:36px;font-size:12px;padding:4px 7px}
body[data-progression="xp"] main{padding:2px 12px 6px;min-height:0}
body[data-progression="xp"] .play{max-width:1440px;min-height:0}
body[data-progression="xp"] #game{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto minmax(120px,.7fr) 42px;gap:8px 26px;height:100%;min-height:0}
body[data-progression="xp"] #game[hidden]{display:none}
body[data-progression="xp"] #game>.formation{grid-column:1;grid-row:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:22px minmax(0,1fr);gap:3px 16px;min-height:0}
body[data-progression="xp"] #game>.formation>.section-line{grid-column:1/-1;grid-row:1;height:22px;margin:0;min-width:0}
body[data-progression="xp"] #game .formation>.section-line>span{display:none}
body[data-progression="xp"] #game .formation-row{display:flex;flex-direction:column;gap:3px;min-width:0;min-height:0;margin:0}
body[data-progression="xp"] #game .formation-row:has(#rear){grid-column:1;grid-row:2}
body[data-progression="xp"] #game .formation-row:has(#front){grid-column:2;grid-row:2}
body[data-progression="xp"] #game .row-label{width:auto;height:16px;flex:none;text-align:center;writing-mode:horizontal-tb;transform:none;font-size:12px;line-height:16px;letter-spacing:1px}
body[data-progression="xp"] #game .hero-row{display:flex;flex-direction:column;width:100%;max-width:100%;height:auto;min-height:0;flex:1;gap:6px;align-items:center;justify-content:center;container-type:size}
body[data-progression="xp"] #game .hero-row>.hero{width:min(100%,158px);max-width:100%;height:auto;flex:1 1 0;max-height:260px;min-height:0;aspect-ratio:auto;align-self:center}
body[data-progression="xp"] #game .hero-row>.empty{width:min(100%,158px);height:22px;min-height:22px;max-height:22px;flex:0 0 22px;aspect-ratio:auto;font-size:12px;line-height:16px;display:flex;align-items:center;justify-content:center;padding:1px 4px}
body[data-progression="xp"] #game>.encounter{grid-column:2;grid-row:1;min-height:0;display:flex;flex-direction:column;gap:4px;justify-content:flex-start}
body[data-progression="xp"] #game .encounter>.section-line{height:22px;flex:none;width:100%;margin:0}
body[data-progression="xp"] #game .section-line h2{font-size:16px;line-height:20px}
body[data-progression="xp"] #game #turnLabel{font-size:14px}
body[data-progression="xp"] #game .enemy-grid{width:100%;min-height:0;flex:1;display:flex;align-items:center;justify-content:center;gap:12px;container-type:size}
body[data-progression="xp"] #game .enemy{width:min(155px,calc((100cqw - 24px)/3));height:min(100cqh,260px);max-height:100%;flex:0 1 155px;min-width:0;min-height:0}
body[data-progression="xp"] #game .enemy:only-child{width:min(190px,100cqw);flex-basis:190px}
body[data-progression="xp"] #game .enemy .hp{font-size:18px;line-height:22px}
body[data-progression="xp"] #game .hero .hp{font-size:18px;line-height:22px}
body[data-progression="xp"] #game .hero .hp small{font-size:14px}
body[data-progression="xp"] #game .hero h3,body[data-progression="xp"] #game .enemy h3{font-size:16px;line-height:18px}
body[data-progression="xp"] #game #mainActionDock.main-action-panel{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;min-height:0;margin:0;padding:5px 8px;border:1px solid #c6ad695c;border-radius:9px;background:linear-gradient(#172e21ed,#102519ed)}
body[data-progression="xp"] #game #mainActionDock[hidden]{display:none}
body[data-progression="xp"] #mainActionDock>.main-action-title,body[data-progression="xp"] #mainActionDock>span{grid-column:1/-1;font-size:14px;line-height:18px;margin:0}
body[data-progression="xp"] #mainActionDock .main-choice{position:relative;min-width:0;min-height:62px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 9px;font-size:16px;line-height:19px;border:1px solid #9e9a68;border-radius:7px;background:linear-gradient(#354a33,#162c20);color:#f9efd4;white-space:normal;text-align:center}
body[data-progression="xp"] #mainActionDock .main-choice strong{font-size:18px;line-height:21px}
body[data-progression="xp"] #mainActionDock .main-choice small,body[data-progression="xp"] #mainActionDock .main-choice .main-benefit,body[data-progression="xp"] #mainActionDock .main-choice span{font-size:14px;line-height:17px;white-space:normal}
body[data-progression="xp"] #mainActionDock .main-choice .icon{width:23px;height:23px;flex:none}
body[data-progression="xp"] #mainActionDock .main-choice.role-best{border:2px solid #ead28c;background:linear-gradient(#6a5c32,#263a26);box-shadow:0 0 9px #ecc96c25}
body[data-progression="xp"] #mainActionDock .main-choice[aria-pressed="true"]{outline:2px solid #ffe3a4;outline-offset:1px;color:#fff6d8;background:linear-gradient(#705d2b,#304b2c)}
body[data-progression="xp"] #mainActionDock .main-choice[data-role="Lead"]{--role:#b9e3ec}
body[data-progression="xp"] #mainActionDock .main-choice[data-role="DPS"]{--role:#efb191}
body[data-progression="xp"] #mainActionDock .main-choice[data-role="Tank"]{--role:#d8d49b}
body[data-progression="xp"] #mainActionDock .main-choice[data-role="Support"]{--role:#a9d8b5}
body[data-progression="xp"] #game>#handSection{grid-column:1/-1;grid-row:3;min-height:0;display:flex;flex-direction:column;margin:0}
body[data-progression="xp"] #game .hand-heading{height:25px;flex:none;min-width:0;gap:8px;padding:0 3px}
body[data-progression="xp"] #game .hand-heading h2{font-size:16px;line-height:20px}
body[data-progression="xp"] #game #deckLabel,body[data-progression="xp"] #game #handPage{font-size:12px}
body[data-progression="xp"] #game .hand{min-height:0;flex:1;gap:16px;padding:4px 6px 6px;align-items:stretch;justify-content:center;container-type:size}
body[data-progression="xp"] #game>.controls{grid-column:1/-1;grid-row:4;height:auto;min-height:0;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 5px}
body[data-progression="xp"] #game .action-information{min-width:0;flex:1}
body[data-progression="xp"] #game #message{font-size:14px;line-height:17px;margin:0;white-space:normal}
body[data-progression="xp"] #game #actionDetail{font-size:12px;line-height:15px;margin:0}
body[data-progression="xp"] #game .turn-actions{gap:6px;flex:none;display:flex;align-items:center;flex-wrap:nowrap}
body[data-progression="xp"] #game .turn-actions button{min-height:34px;padding:5px 10px;font-size:14px}
body[data-progression="xp"][data-phase="camp"] #game,body[data-progression="xp"][data-phase="ended"] #game{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 42px}
body[data-progression="xp"][data-phase="camp"] #game>.formation,body[data-progression="xp"][data-phase="ended"] #game>.formation,body[data-progression="xp"][data-phase="camp"] #game>.encounter,body[data-progression="xp"][data-phase="ended"] #game>.encounter,body[data-progression="xp"][data-phase="camp"] #game>#handSection,body[data-progression="xp"][data-phase="ended"] #game>#handSection{display:none}
body[data-progression="xp"][data-phase="camp"] #game>#camp,body[data-progression="xp"][data-phase="ended"] #game>#result{grid-column:1/-1;grid-row:1;min-height:0;height:100%}
body[data-progression="xp"][data-phase="camp"] #game>.controls,body[data-progression="xp"][data-phase="ended"] #game>.controls{grid-column:1/-1;grid-row:2}
/* Crowded columns exchange art height for a side portrait. XP keeps its full-width footer. */
body[data-progression="xp"] #game .hero-row:has(.hero~.hero)>.hero{width:100%;max-width:205px;--card-head:3px}
body[data-progression="xp"] #game .hero-row:has(.hero~.hero)>.hero>img{inset:3px auto 26px 3px;width:32%;height:calc(100% - 29px);object-fit:contain}
body[data-progression="xp"] #game .hero-row:has(.hero~.hero)>.hero>.hero-body{padding:3px 3px 26px calc(32% + 5px);grid-template-rows:minmax(0,1fr) 18px 22px}
body[data-progression="xp"] #game .hero-row:has(.hero~.hero)>.hero .hp{font-size:16px;line-height:20px}
body[data-progression="xp"] #game .hero-row:has(.hero~.hero)>.hero>.role-seal{top:3px;left:3px;bottom:auto;width:20px;height:20px}
body[data-progression="xp"] #game .hero-row:has(.hero~.hero)>.hero .activation-badge{top:25px;left:3px;right:auto;max-width:29%;font-size:12px;line-height:14px}
@media(min-width:701px) and (max-height:700px){
body[data-progression="xp"] .top{height:58px;min-height:58px;grid-template-columns:185px minmax(0,1fr) auto;padding:4px 10px;gap:8px}
body[data-progression="xp"] .top .brand small{display:none}
body[data-progression="xp"] .top>.journey-bar #trail{display:none}
body[data-progression="xp"] .top>.journey-bar .forecast-button{max-width:145px;min-height:32px}
body[data-progression="xp"] #game{grid-template-rows:minmax(0,1fr) auto 112px 38px;gap:6px 18px}
body[data-progression="xp"] #game #mainActionDock.main-action-panel{gap:7px;padding:4px 6px}
body[data-progression="xp"] #mainActionDock .main-choice{min-height:56px;padding:4px 6px;gap:1px}
body[data-progression="xp"] #mainActionDock .main-choice strong{font-size:16px;line-height:19px}
body[data-progression="xp"] #game .hero-row>.empty{height:18px;min-height:18px;max-height:18px;flex-basis:18px}
body[data-progression="xp"] #game .enemy{height:100%;max-height:220px}
body[data-progression="xp"] #game .hero-row>.hero{max-height:220px}
body[data-progression="xp"] #game .turn-actions button{min-height:32px}
}
@media(max-width:700px) and (min-height:501px){
body[data-progression="xp"] .top{height:94px;min-height:94px;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:40px 42px;gap:3px 5px;padding:4px 7px}
body[data-progression="xp"] .top>.brand{grid-column:1;grid-row:1}
body[data-progression="xp"] .top>.top-actions{grid-column:2;grid-row:1;gap:4px}
body[data-progression="xp"] .top .brand small{display:none}
body[data-progression="xp"] .top>.journey-bar{grid-column:1/-1;grid-row:2;grid-template-columns:minmax(0,1fr) auto;gap:4px}
body[data-progression="xp"] .top>.journey-bar #trail{display:none}
body[data-progression="xp"] .top>.journey-bar .forecast-button{max-width:135px;min-height:32px;font-size:12px}
body[data-progression="xp"] main{padding:1px 5px 4px}
body[data-progression="xp"] #game{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto 112px 60px;gap:5px 10px}
body[data-progression="xp"] #game>.formation{gap:2px 6px;grid-template-rows:18px minmax(0,1fr)}
body[data-progression="xp"] #game .section-line h2{font-size:14px;line-height:17px}
body[data-progression="xp"] #game .formation-row{gap:2px}
body[data-progression="xp"] #game .row-label{font-size:12px;line-height:14px;height:14px;letter-spacing:0}
body[data-progression="xp"] #game .hero-row{gap:4px}
body[data-progression="xp"] #game .hero-row>.empty{height:16px;min-height:16px;max-height:16px;flex-basis:16px;font-size:12px;padding:0}
body[data-progression="xp"] #game .enemy-grid{gap:6px;align-items:stretch}
body[data-progression="xp"] #game .enemy{height:100%;width:min(100%,110px);flex:1 1 0;max-height:230px}
body[data-progression="xp"] #game .enemy:only-child{width:110px;flex:0 1 110px}
body[data-progression="xp"] #game .enemy-grid:has(.enemy~.enemy){display:flex;flex-direction:column;gap:5px;align-items:stretch}
body[data-progression="xp"] #game .enemy-grid:has(.enemy~.enemy) .enemy{width:100%;max-width:180px;height:auto;flex:1;--enemy-head:3px;--enemy-footer:40px}
body[data-progression="xp"] #game .enemy-grid:has(.enemy~.enemy) .enemy>img{inset:3px auto 3px 3px;width:29%;height:calc(100% - 6px)}
body[data-progression="xp"] #game .enemy-grid:has(.enemy~.enemy) .enemy-copy{padding:3px 3px 3px calc(29% + 5px);grid-template-rows:minmax(0,1fr) 16px 20px auto}
body[data-progression="xp"] #game .enemy-grid:has(.enemy~.enemy) .enemy .role{display:none}
body[data-progression="xp"] #game .enemy-grid:has(.enemy~.enemy) .enemy .intent{font-size:12px;line-height:14px;min-height:14px;white-space:normal}
body[data-progression="xp"] #game .hero h3,body[data-progression="xp"] #game .enemy h3{font-size:14px;line-height:16px}
body[data-progression="xp"] #game .hero .hp,body[data-progression="xp"] #game .enemy .hp{font-size:16px;line-height:18px}
body[data-progression="xp"] #game #mainActionDock.main-action-panel{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:4px}
body[data-progression="xp"] #mainActionDock .main-choice{min-height:48px;padding:3px 5px;gap:0;flex-direction:row;flex-wrap:wrap;align-content:center}
body[data-progression="xp"] #mainActionDock .main-choice strong{font-size:16px;line-height:18px}
body[data-progression="xp"] #mainActionDock .main-choice small,body[data-progression="xp"] #mainActionDock .main-choice span{font-size:14px;line-height:16px}
body[data-progression="xp"] #mainActionDock .main-choice .icon{width:18px;height:18px}
body[data-progression="xp"] #game .hand-heading{height:24px;gap:5px;padding:0}
body[data-progression="xp"] #game .hand-heading h2{font-size:14px}
body[data-progression="xp"] #game .hand{gap:9px;padding:3px 4px 5px}
body[data-progression="xp"] #game>.controls{flex-direction:column;justify-content:center;gap:3px;padding:1px 2px}
body[data-progression="xp"] #game .action-information{flex:0 1 auto;width:100%;text-align:center}
body[data-progression="xp"] #game #message{font-size:12px;line-height:15px}
body[data-progression="xp"] #game #actionDetail{display:none}
body[data-progression="xp"] #game .turn-actions{justify-content:center;gap:4px;max-width:100%}
body[data-progression="xp"] #game .turn-actions button{min-height:30px;padding:4px 6px;font-size:14px}
body[data-progression="xp"][data-phase="camp"] #game,body[data-progression="xp"][data-phase="ended"] #game{grid-template-rows:minmax(0,1fr) 60px}
}
@media(max-height:500px){
body[data-progression="xp"] .top{height:44px;min-height:44px;grid-template-columns:145px minmax(0,1fr) auto;grid-template-rows:1fr;padding:3px 6px;gap:5px}
body[data-progression="xp"] .top>.brand{grid-row:1;grid-column:1}
body[data-progression="xp"] .top .brand small,body[data-progression="xp"] .top .brand>img{display:none}
body[data-progression="xp"] .top>.top-actions{grid-row:1;grid-column:3;gap:3px}
body[data-progression="xp"] .top>.journey-bar{grid-row:1;grid-column:2;display:block;text-align:center;align-content:center;height:auto}
body[data-progression="xp"] .top>.journey-bar #trail,body[data-progression="xp"] .top>.journey-bar .forecast-button{display:none}
body[data-progression="xp"] .top>.journey-bar #enemyStatus{font-size:14px;line-height:17px}
body[data-progression="xp"] main{padding:1px 5px 3px}
body[data-progression="xp"] #game{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto 68px 31px;gap:4px 14px}
body[data-progression="xp"] #game>.formation{grid-template-rows:16px minmax(0,1fr);gap:1px 7px}
body[data-progression="xp"] #game .formation>.section-line,body[data-progression="xp"] #game .encounter>.section-line{height:16px;line-height:16px}
body[data-progression="xp"] #game .section-line h2{font-size:14px;line-height:16px}
body[data-progression="xp"] #game .row-label{display:none}
body[data-progression="xp"] #game .hero-row{gap:3px}
body[data-progression="xp"] #game .hero-row>.empty{height:12px;min-height:12px;max-height:12px;flex-basis:12px;padding:0;font-size:12px;line-height:12px}
body[data-progression="xp"] #game .hero-row>.hero{width:100%;max-width:190px;--card-head:3px}
body[data-progression="xp"] #game .hero-row>.hero>img{inset:3px auto 26px 3px;width:31%;height:calc(100% - 29px);object-fit:contain}
body[data-progression="xp"] #game .hero-row>.hero>.hero-body{padding:3px 3px 26px calc(31% + 4px);grid-template-rows:minmax(0,1fr) 16px 18px}
body[data-progression="xp"] #game .hero-row>.hero .hp{font-size:14px;line-height:17px;padding:0;gap:1px}
body[data-progression="xp"] #game .hero-row>.hero h3{font-size:14px;line-height:16px;padding:0}
body[data-progression="xp"] #game .hero-row>.hero>.role-seal{top:3px;left:2px;bottom:auto;width:18px;height:18px}
body[data-progression="xp"] #game .hero-row>.hero .rank-badge{top:1px;left:auto;right:2px;height:15px;min-width:15px;line-height:13px;font-size:12px}
body[data-progression="xp"] #game .hero-row>.hero .activation-badge{top:24px;left:3px;right:auto;font-size:0;width:6px;height:6px;border-radius:50%;background:#b5d594}
body[data-progression="xp"] #game .enemy-grid{gap:6px;align-items:stretch}
body[data-progression="xp"] #game .enemy{height:100%;width:min(100%,110px);min-width:0;--enemy-head:3px;--enemy-footer:56px}
body[data-progression="xp"] #game .enemy .role{display:none}
body[data-progression="xp"] #game .enemy .hp{font-size:15px;line-height:18px}
body[data-progression="xp"] #game .enemy h3{font-size:14px;line-height:16px}
body[data-progression="xp"] #game .enemy .intent{font-size:12px;line-height:14px;white-space:normal}
body[data-progression="xp"] #game #mainActionDock.main-action-panel{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:3px 5px}
body[data-progression="xp"] #mainActionDock>.main-action-title,body[data-progression="xp"] #mainActionDock>span{display:none}
body[data-progression="xp"] #mainActionDock .main-choice{min-height:42px;padding:2px 4px;gap:0;flex-direction:row;flex-wrap:wrap;align-content:center}
body[data-progression="xp"] #mainActionDock .main-choice strong{font-size:16px;line-height:18px}
body[data-progression="xp"] #mainActionDock .main-choice small,body[data-progression="xp"] #mainActionDock .main-choice span{font-size:14px;line-height:16px}
body[data-progression="xp"] #mainActionDock .main-choice .icon{width:17px;height:17px}
body[data-progression="xp"] #game .hand-heading{height:18px;padding:0;gap:5px}
body[data-progression="xp"] #game .hand-heading h2{font-size:14px;line-height:16px}
body[data-progression="xp"] #game .hand{gap:10px;padding:2px 4px 4px}
body[data-progression="xp"] #game>.controls{height:auto;padding:0 2px;gap:5px}
body[data-progression="xp"] #game #message{font-size:12px;line-height:15px}
body[data-progression="xp"] #game #actionDetail{display:none}
body[data-progression="xp"] #game .turn-actions{gap:4px}
body[data-progression="xp"] #game .turn-actions button{min-height:28px;padding:3px 6px;font-size:14px}
body[data-progression="xp"][data-phase="camp"] #game,body[data-progression="xp"][data-phase="ended"] #game{grid-template-rows:minmax(0,1fr) 31px}
}
/* Actual action DOM groups the four choices beneath one selected-hero heading. */
body[data-progression="xp"] #mainActionDock>.main-action-heading{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:14px;line-height:18px}
body[data-progression="xp"] #mainActionDock>.main-action-heading>span{font-size:12px;line-height:16px}
body[data-progression="xp"] #mainActionDock>.main-choices{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;min-width:0}
body[data-progression="xp"] #mainActionDock .main-choice{display:grid;grid-template-columns:24px auto auto;grid-template-rows:auto minmax(0,1fr);gap:3px 5px;align-content:center;align-items:center;min-height:65px}
body[data-progression="xp"] #mainActionDock .main-choice>.icon{grid-column:1;grid-row:1}
body[data-progression="xp"] #mainActionDock .main-choice>strong{grid-column:2;grid-row:1;justify-self:start}
body[data-progression="xp"] #mainActionDock .main-choice>small{grid-column:3;grid-row:1;justify-self:end;display:flex;align-items:center;gap:3px;font-size:12px;line-height:15px}
body[data-progression="xp"] #mainActionDock .main-choice>small .icon{width:19px;height:19px}
body[data-progression="xp"] #mainActionDock .main-choice>span{grid-column:1/-1;grid-row:2;font-size:14px;line-height:17px}
@media(min-height:701px){
}
@media(min-width:701px) and (max-height:700px){
body[data-progression="xp"] #mainActionDock>.main-choices{gap:6px}
body[data-progression="xp"] #mainActionDock .main-choice{min-height:60px;padding:4px 6px;grid-template-columns:20px auto auto;gap:2px 4px}
}
@media(max-width:700px) and (min-height:501px){
body[data-progression="xp"] #mainActionDock>.main-choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
body[data-progression="xp"] #mainActionDock>.main-action-heading{gap:4px;font-size:14px}
body[data-progression="xp"] #mainActionDock>.main-action-heading>span{font-size:12px;max-width:120px;text-align:right}
body[data-progression="xp"] #mainActionDock .main-choice{min-height:52px;grid-template-columns:18px auto auto;gap:1px 3px;padding:3px 5px}
body[data-progression="xp"] #mainActionDock .main-choice>small .icon{width:16px;height:16px}
body[data-progression="xp"] #mainActionDock .main-choice>small{font-size:12px;line-height:14px;gap:1px}
body[data-progression="xp"] #mainActionDock .main-choice>span{font-size:14px;line-height:16px}
}
@media(max-height:500px){
body[data-progression="xp"] #mainActionDock>.main-action-heading{display:none}
body[data-progression="xp"] #mainActionDock>.main-choices{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
body[data-progression="xp"] #mainActionDock .main-choice{min-height:51px;grid-template-columns:16px auto auto;gap:1px 2px;padding:2px 3px}
body[data-progression="xp"] #mainActionDock .main-choice>small{font-size:12px;line-height:13px;gap:1px}
body[data-progression="xp"] #mainActionDock .main-choice>small .icon{width:14px;height:14px}
body[data-progression="xp"] #mainActionDock .main-choice>span{font-size:14px;line-height:16px}
}

body[data-progression="xp"][data-phase="tavern"] #game{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 42px}
body[data-progression="xp"][data-phase="tavern"] #game>.formation,body[data-progression="xp"][data-phase="tavern"] #game>.encounter,body[data-progression="xp"][data-phase="tavern"] #game>#handSection{display:none}
body[data-progression="xp"][data-phase="tavern"] #game>#camp{grid-column:1/-1;grid-row:1;min-height:0;height:100%}
body[data-progression="xp"][data-phase="tavern"] #game>.controls{grid-column:1/-1;grid-row:2}
body[data-progression="xp"][data-phase="tavern"][data-view="expedition"] .world-art{background-image:url("assets/tavern-v1.png")}
/* Empty positions share one small placement rail instead of shrinking companions. */
body[data-progression="xp"] #game .hero-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(var(--party-rows,1),minmax(0,1fr)) 18px;gap:4px;align-items:stretch;justify-items:center}
body[data-progression="xp"] #game .hero-row:has(.hero~.hero){--party-rows:2}
body[data-progression="xp"] #game .hero-row:has(.hero~.hero~.hero){--party-rows:3;grid-template-rows:repeat(3,minmax(0,1fr))}
body[data-progression="xp"] #game .hero-row>.hero{grid-column:1/-1;height:100%;width:min(100%,205px);max-height:none;align-self:stretch}
body[data-progression="xp"] #game .hero-row>.empty{grid-row:-2;height:18px;min-height:18px;max-height:18px;width:100%;max-width:100%;font-size:12px;overflow:hidden}
body[data-progression="xp"] #game .hero-row>.empty span,body[data-progression="xp"] #game .hero-row>.empty small{display:none}
body[data-progression="xp"] #playerHud{height:66px;min-height:66px;padding:2px 8px 4px}
body[data-progression="xp"] #resources{height:60px;padding:2px 10px}
@media(min-width:701px) and (max-height:700px){
 body[data-progression="xp"] .top{height:52px;min-height:52px;grid-template-columns:220px minmax(0,1fr) auto}
 body[data-progression="xp"] #game{grid-template-rows:minmax(0,1fr) auto 104px 32px;gap:5px 18px}
 body[data-progression="xp"] #game #mainActionDock.main-action-panel{padding:3px 6px;gap:3px}
 body[data-progression="xp"] #mainActionDock .main-choice{min-height:44px;padding:3px 5px}
 body[data-progression="xp"] #mainActionDock .main-action-heading{line-height:16px}
}

@media(max-height:700px){
}

body[data-progression="xp"] #game>.formation:not(:has(#rear .hero)){grid-template-columns:40px minmax(0,1fr)}
body[data-progression="xp"] #game>.formation:not(:has(#front .hero)):has(#rear .hero){grid-template-columns:minmax(0,1fr) 40px}
@media(max-width:700px) and (min-height:501px){}

/* In short occupied cards, art sits beside the identity/Health copy. */
@media(max-height:700px){
 body[data-progression="xp"] #game .hero-row>.hero:only-of-type>img{inset:23px auto 27px 3px;width:38%;height:calc(100% - 50px)}
 body[data-progression="xp"] #game .hero-row>.hero:only-of-type>.hero-body{padding-left:calc(38% + 5px);padding-bottom:26px;grid-template-rows:minmax(0,1fr) 16px 18px}
}
@media(max-width:700px) and (min-height:501px){
 body[data-progression="xp"] #game>.formation:not(:has(#rear .hero)){grid-template-columns:20px minmax(0,1fr)}
 body[data-progression="xp"] #game>.formation:not(:has(#front .hero)):has(#rear .hero){grid-template-columns:minmax(0,1fr) 20px}
 body[data-progression="xp"] #game .hero-row>.hero{max-width:100%}
 body[data-progression="xp"] #game .hero-row>.hero:only-of-type>img{width:33%;height:calc(100% - 50px)}
 body[data-progression="xp"] #game .hero-row>.hero:only-of-type>.hero-body{padding-left:calc(33% + 4px)}
 body[data-progression="xp"] #game .hero-row>.hero:only-of-type .hp{font-size:16px;padding:0;gap:0}
 body[data-progression="xp"] #game .hero-row>.hero:only-of-type .hp small{font-size:12px}
}
/* Travel consequences are required before spending game time. */
body[data-progression="xp"] #camp{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto auto;gap:6px;padding:10px;min-height:0}
body[data-progression="xp"] #camp>.camp-title{grid-column:1;grid-row:1}
body[data-progression="xp"] #camp>.camp-action-budget{grid-column:2;grid-row:1}
body[data-progression="xp"] #camp>.camp-companions{grid-column:1/-1;grid-row:2}
body[data-progression="xp"] #camp>.camp-note{display:block;grid-column:1/-1;grid-row:3;margin:0;padding:5px 8px;font-size:14px;line-height:18px;text-align:left;border:1px solid #bea66c66;border-radius:5px;background:#12271ee8}
body[data-progression="xp"] #camp>.camp-actions{grid-column:1/-1;grid-row:4;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));grid-auto-rows:minmax(32px,auto);gap:6px}
body[data-progression="xp"] #camp .camp-actions button{font-size:14px;line-height:17px;padding:5px;min-height:32px}
@media(max-width:700px) and (min-height:501px){body[data-progression="xp"] #camp>.camp-actions{grid-template-columns:repeat(2,minmax(0,1fr))}body[data-progression="xp"] #camp .camp-title h2{font-size:20px}body[data-progression="xp"] #camp>.camp-action-budget{max-width:125px}}
@media(max-height:500px){body[data-progression="xp"] #camp{padding:6px 8px;gap:4px}body[data-progression="xp"] #camp .camp-title h2{font-size:20px}body[data-progression="xp"] #camp>.camp-note{padding:3px 6px;font-size:14px;line-height:17px}body[data-progression="xp"] #camp>.camp-actions{gap:4px}body[data-progression="xp"] #camp .camp-actions button{padding:3px;min-height:28px}}
/* Larger parties keep identity, Health and XP on separate compact rails. */
@media(max-height:700px){
 body[data-progression="xp"] #game .hero-row:has(.hero~.hero)>.hero:has(.xp-ribbon)>.hero-body{padding:0 3px 18px calc(32% + 5px);grid-template-rows:minmax(0,1fr) 16px 16px}
 body[data-progression="xp"] #game .hero-row:has(.hero~.hero)>.hero>img{inset:2px auto 19px 3px;width:32%;height:calc(100% - 21px)}
 body[data-progression="xp"] #game .hero-row:has(.hero~.hero)>.hero h3{font-size:14px;line-height:16px;padding:0}
 body[data-progression="xp"] #game .hero-row:has(.hero~.hero)>.hero .hp{font-size:16px;line-height:16px;padding:0}
 body[data-progression="xp"] #game .hero-row:has(.hero~.hero)>.hero .xp-ribbon{height:18px;min-height:18px;bottom:0}
 body[data-progression="xp"] #game .hero-row:has(.hero~.hero)>.hero .experience-meter{height:18px;min-height:18px;line-height:16px}
 body[data-progression="xp"] #game .hero-row:has(.hero~.hero)>.hero .xp-value{font-size:14px;height:16px;line-height:16px}
 body[data-progression="xp"] #game .hero-row:has(.hero~.hero)>.hero .xp-ribbon>button{height:18px;min-height:18px;line-height:16px}
 body[data-progression="xp"] #game .hero-row:has(.hero~.hero)>.hero .activation-badge{font-size:0;top:3px;left:21px;right:auto;width:6px;height:6px;border-radius:50%;background:#b5d594}
 body[data-progression="xp"] #game .hero-row:has(.hero~.hero)>.hero>.role-seal{top:1px;left:2px;width:14px;height:14px}
 body[data-progression="xp"] #game .hero-row:has(.hero~.hero)>.hero .rank-badge{height:14px;line-height:13px;top:1px;font-size:12px;min-width:14px}
}

@media(max-width:700px) and (min-height:501px){
 body[data-progression="xp"] #mainActionDock>.main-choices{grid-template-columns:repeat(4,minmax(0,1fr))}
 body[data-progression="xp"] #mainActionDock>.main-action-heading{gap:3px;align-items:center;line-height:18px}
 body[data-progression="xp"] #mainActionDock>.main-action-heading>span{max-width:none;white-space:nowrap;font-size:12px;line-height:16px}
 body[data-progression="xp"] #mainActionDock .main-choice{grid-template-columns:16px minmax(0,1fr) 14px;grid-template-rows:18px minmax(32px,auto);min-height:58px;padding:3px 2px;gap:2px 1px}
 body[data-progression="xp"] #mainActionDock .main-choice>strong{font-size:14px;line-height:18px}
 body[data-progression="xp"] #mainActionDock .main-choice>small{font-size:0;line-height:14px}
 body[data-progression="xp"] #mainActionDock .main-choice>small .icon{width:14px;height:14px}
 body[data-progression="xp"] #mainActionDock .main-choice>span{font-size:14px;line-height:16px}
 body[data-progression="xp"] #game .hero-row:has(.hero~.hero)>.hero:has(.xp-ribbon)>.hero-body{padding-top:16px}
 body[data-progression="xp"] #game .hero-row:has(.hero~.hero)>.hero>img{top:16px;height:calc(100% - 35px)}
}

@media(max-width:700px) and (min-height:501px){
 body[data-progression="xp"] #game .hero-row:has(.hero~.hero~.hero)>.hero:has(.xp-ribbon)>.hero-body{padding-top:0}
 body[data-progression="xp"] #game .hero-row:has(.hero~.hero~.hero)>.hero .rank-badge{position:static;display:inline-flex;vertical-align:middle;margin-left:3px;height:14px;line-height:13px;font-size:12px}
}

body[data-progression="xp"] #moveSelected{min-height:24px;padding:2px 6px;font-size:14px;line-height:18px}
body[data-progression="xp"] .short-position{display:none}
@media(max-height:500px){
 body[data-progression="xp"] .top{height:36px;min-height:36px}
 body[data-progression="xp"] #playerHud{height:60px;min-height:60px}
 body[data-progression="xp"] #resources{height:54px}
 body[data-progression="xp"] #game{grid-template-rows:minmax(90px,1fr) auto 82px 28px;gap:4px 10px}
 body[data-progression="xp"] #game #mainActionDock.main-action-panel{padding:2px 4px}
 body[data-progression="xp"] #mainActionDock .main-choice{min-height:44px}
 body[data-progression="xp"] #game>.formation{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:20px minmax(0,1fr);gap:3px 4px}
 body[data-progression="xp"] #game>.formation>.section-line{grid-column:1/-1}
 body[data-progression="xp"] #game .formation-row,body[data-progression="xp"] #game .hero-row{display:contents}
 body[data-progression="xp"] #game .formation-row>.row-label,body[data-progression="xp"] #game .hero-row>.empty{display:none}
 body[data-progression="xp"] #game .hero-row>.hero{grid-row:2;grid-column:auto;width:100%;height:100%;min-height:0}
 body[data-progression="xp"] #game .hero-row>.hero:has(.xp-ribbon)>.hero-body{padding:16px 2px 18px;grid-template-rows:minmax(0,1fr) 16px 16px}
 body[data-progression="xp"] #game .hero-row>.hero>img{inset:17px auto 19px 2px;width:30%;height:calc(100% - 36px)}
 body[data-progression="xp"] #game .hero-row>.hero h3{font-size:14px;line-height:16px;padding:0 0 0 30%}
 body[data-progression="xp"] #game .hero-row>.hero .hp{font-size:16px;line-height:16px;padding:0;gap:0}
 body[data-progression="xp"] #game .hero-row>.hero .hp small{font-size:12px}
 body[data-progression="xp"] #game .hero-row>.hero .xp-ribbon{height:18px;min-height:18px;bottom:0}
 body[data-progression="xp"] #game .hero-row>.hero .experience-meter{height:18px;min-height:18px;line-height:16px}
 body[data-progression="xp"] #game .hero-row>.hero .xp-value{font-size:14px;height:16px;line-height:16px}
 body[data-progression="xp"] #game .hero-row>.hero .xp-ribbon>button{height:18px;min-height:18px;line-height:16px}
 body[data-progression="xp"] #game .hero-row>.hero .activation-badge{display:none}
 body[data-progression="xp"] #game .hero-row>.hero .short-position{display:block;position:absolute;top:1px;left:18px;right:17px;font-size:12px;line-height:14px;text-align:center;white-space:nowrap;z-index:3;background:#14271f}
 body[data-progression="xp"] #game .hero-row>.hero>.role-seal{width:14px;height:14px;top:1px;left:2px}
 body[data-progression="xp"] #game .hero-row>.hero .rank-badge{position:absolute;top:1px;right:2px;left:auto;height:14px;min-width:14px;font-size:12px;line-height:13px}
 body[data-progression="xp"] #game .turn-actions button{min-height:28px;padding:3px 6px}
}
@media(max-height:500px){
 body[data-progression="xp"] #game>.formation{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 body[data-progression="xp"] #game .hero-row:has(.hero~.hero)>.hero:has(.xp-ribbon)>.hero-body,body[data-progression="xp"] #game .hero-row>.hero:has(.xp-ribbon)>.hero-body{padding:16px 2px 18px calc(30% + 3px);grid-template-rows:minmax(0,1fr) 16px 16px}
 body[data-progression="xp"] #game .hero-row>.hero h3,body[data-progression="xp"] #game .hero-row:has(.hero~.hero)>.hero h3{padding:0}
 body[data-progression="xp"] #game .hand-heading{height:20px}
 body[data-progression="xp"] #game .hand{padding:2px 4px 3px;gap:8px}
}

@media(max-height:500px){
 body[data-progression="xp"][data-party-size="1"] #game .hero-row>.hero{grid-column:1/-1;width:min(100%,205px);justify-self:center}
 body[data-progression="xp"][data-party-size="2"] #game>.formation{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

body[data-progression="xp"] #game .enemy-armour{display:inline-flex;gap:2px;align-items:center;margin-left:3px;padding-left:3px;border-left:1px solid #d8bf8c88;font-size:12px}
body[data-progression="xp"] #game .enemy-armour .icon{display:block!important;width:12px;height:12px}
body[data-progression="xp"] #formationPanel .formation-choice{height:100%;width:min(100%,108px);min-width:0;padding:3px;display:grid;grid-template-rows:minmax(0,1fr) auto auto;gap:2px;background:#152a22;border:1px solid var(--role,#a28b55);border-radius:6px;color:#f6e8ca}
body[data-progression="xp"] #formationPanel .formation-choice.selected{border-color:#ffe19a;box-shadow:0 0 0 2px #ffe19a}
body[data-progression="xp"] #formationPanel .formation-choice>img{width:100%;height:100%;min-height:0;object-fit:contain}
body[data-progression="xp"] #formationPanel .formation-choice>strong{font:14px/16px Georgia,serif}
body[data-progression="xp"] #formationPanel .formation-choice>span{font-size:14px;line-height:18px}
body[data-progression="xp"] #formationPanel .empty-position{border-style:dashed;align-content:center;grid-template-rows:auto auto auto}
body[data-progression="xp"] #formationPanel .empty-position>.icon{width:24px;height:24px;margin:auto}
@media(max-height:500px){
 body[data-progression="xp"] #game .hero-row:has(.hero~.hero)>.hero .hp-max{display:inline}
 body[data-progression="xp"] #game .enemy>img{inset:3px auto 3px 3px;width:30%;height:calc(100% - 6px)}
 body[data-progression="xp"] #game .enemy>.enemy-copy{padding:3px 3px 3px calc(30% + 5px);grid-template-rows:minmax(0,1fr) 16px 20px auto}
 body[data-progression="xp"] #game .enemy h3{font-size:14px;line-height:16px}
 body[data-progression="xp"] #game .enemy .hp{font-size:16px;line-height:18px}
 body[data-progression="xp"] #game .enemy .role{display:none}
}

body[data-progression="xp"] #moveSelected{display:inline-flex;align-items:center;gap:3px;white-space:nowrap;min-height:24px;padding:2px 4px}
body[data-progression="xp"] #moveSelected[hidden]{display:none}
body[data-progression="xp"] #moveSelected .icon{width:14px;height:14px}
@media(max-width:700px){body[data-progression="xp"] #moveSelected .move-word{display:none}}

/* Keep the complete next-response forecast inside the fixed HUD. */
body[data-progression="xp"] #threatInfo{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:14px 28px;column-gap:5px;row-gap:0;align-items:center;justify-items:center;height:52px;max-height:52px;min-height:0;padding:2px 5px}
body[data-progression="xp"] #threatInfo>span{grid-column:1;grid-row:1/3;display:flex;align-items:center;gap:3px}
body[data-progression="xp"] #threatInfo>strong{grid-column:2;grid-row:1;font-size:12px;line-height:14px}
body[data-progression="xp"] #threatInfo>small{grid-column:2;grid-row:2;display:flex;flex-direction:column;align-items:center;font-size:12px;line-height:14px;white-space:nowrap}
@media(max-width:700px){
 body[data-progression="xp"] #resources{grid-template-columns:72px minmax(0,1fr) 116px}
 body[data-progression="xp"] #threatInfo{height:48px;max-height:48px;padding:1px 4px;column-gap:4px}
 body[data-progression="xp"] #threatInfo>span{flex-direction:column;gap:0}
 body[data-progression="xp"] #threatInfo>span>.icon{width:12px;height:12px}
 body[data-progression="xp"] #threatInfo b{font-size:24px;line-height:24px}
}
@media(max-height:500px){body[data-progression="xp"] #threatInfo{height:48px;max-height:48px;padding:1px 4px;column-gap:4px}}

/* Signature previews reuse the main-action space and never advance the run. */
body[data-progression="xp"] #mainActionDock>.technique-preview{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;min-width:0}
body[data-progression="xp"] .technique-preview p{font-size:13px;line-height:16px;margin:2px 0;overflow-wrap:anywhere}
body[data-progression="xp"] .technique-preview small{font-size:12px;line-height:15px}
body[data-progression="xp"] .technique-preview button{padding:8px;min-height:40px}
body[data-progression="xp"] .enemy-status{display:block;font-size:11px;line-height:13px;color:#efd994}
@media(max-height:500px){body[data-progression="xp"] .technique-preview strong,body[data-progression="xp"] .technique-preview small{font-size:11px;line-height:13px}body[data-progression="xp"] .technique-preview p{font-size:12px;line-height:14px;margin:0}}
body[data-progression="xp"] .battle-response{display:flex;align-items:center;gap:8px;font-size:12px;line-height:15px;min-width:0}
body[data-progression="xp"] .battle-response[hidden]{display:none}
body[data-progression="xp"] .battle-response button{font-size:12px;min-height:26px;padding:2px 5px;flex:none}
body[data-progression="xp"] .response-mark{position:absolute;top:24px;left:3px;right:3px;z-index:6;text-align:center;background:#281b15e8;color:#ffe0bc;font:12px/17px system-ui;border:1px solid #cdb28b88;border-radius:3px;pointer-events:none}
@media(min-width:701px) and (min-height:501px) and (max-height:700px){
 body[data-progression="xp"] #game{grid-template-rows:minmax(0,1fr) auto 140px 32px}
 body[data-progression="xp"] #game[data-party-size="1"] .hero-row>.hero{width:min(100%,245px)}
 body[data-progression="xp"] #game[data-party-size="1"] .hero-row>.hero:only-of-type>img{inset:20px 3px 55px;width:calc(100% - 6px);height:calc(100% - 75px)}
 body[data-progression="xp"] #game[data-party-size="1"] .hero-row>.hero:has(.xp-ribbon)>.hero-body{padding:20px 4px 22px;grid-template-rows:minmax(0,1fr) 18px 20px}
 body[data-progression="xp"] #game[data-party-size="1"] .hero h3{font-size:18px;line-height:20px}
}
@media(max-width:700px){body[data-progression="xp"] .battle-response>span{display:none}body[data-progression="xp"] .response-mark{font-size:11px;line-height:13px;top:17px}}

/* Move has a dedicated chooser, so open formation slots do not shrink the party. */
body[data-progression="xp"] #game>.formation .hero-row>.empty{display:none}
body[data-progression="xp"] #game>.formation .hero-row{grid-template-rows:repeat(var(--party-rows,1),minmax(0,1fr))}
body[data-progression="xp"] #game>.formation:not(:has(#rear .hero)){grid-template-columns:minmax(0,1fr)}
body[data-progression="xp"] #game>.formation:not(:has(#rear .hero)) .formation-row:has(#rear){display:none}
body[data-progression="xp"] #game>.formation:not(:has(#rear .hero)) .formation-row:has(#front){grid-column:1}
body[data-progression="xp"] #game>.formation:not(:has(#front .hero)):has(#rear .hero){grid-template-columns:minmax(0,1fr)}
body[data-progression="xp"] #game>.formation:not(:has(#front .hero)) .formation-row:has(#front){display:none}
body[data-progression="xp"] #game[data-party-size="1"] .hero-row>.hero:only-of-type>img{inset:22px auto 24px 3px;width:48%;height:calc(100% - 46px)}
body[data-progression="xp"] #game[data-party-size="1"] .hero-row>.hero:has(.xp-ribbon)>.hero-body{padding:22px 4px 22px calc(48% + 5px);grid-template-rows:minmax(0,1fr) 18px 20px}
body[data-progression="xp"] .response-mark{top:auto;bottom:24px;left:3px;right:auto;max-width:48%;padding:0 3px;font-size:11px;line-height:14px}
@media(max-height:500px){body[data-progression="xp"] #game[data-party-size="1"] .hero-row>.hero:has(.xp-ribbon)>.hero-body{padding:16px 3px 18px calc(38% + 4px)}body[data-progression="xp"] #game[data-party-size="1"] .hero-row>.hero:only-of-type>img{inset:17px auto 19px 2px;width:38%;height:calc(100% - 36px)}}
@media(max-width:700px){
}
@media(max-height:500px){}

body[data-progression="xp"] .last-attack{position:absolute;top:3px;left:3px;right:3px;z-index:5;pointer-events:none;background:#241e16ed;color:#ffe3bf;border:1px solid #bfa27588;border-radius:3px;padding:2px;font:12px/15px system-ui;text-align:center}
@media(max-height:500px){body[data-progression="xp"] .last-attack{font-size:11px;line-height:12px;padding:1px}}

body[data-progression="xp"] #game .formation>.section-line>#partyPaging{display:flex;align-items:center;gap:4px;font-size:12px;line-height:18px}body[data-progression="xp"] #game .formation>.section-line>#partyPaging[hidden]{display:none}body[data-progression="xp"] #partyPaging button{min-height:22px;height:22px;padding:0 6px;font-size:16px}