:root{--ink:#26474d;--muted:#6d8887;--green:#397e79;--deep:#214e59;--gold:#f0cb7b}
body{background:#173e4c;background-image:radial-gradient(ellipse at 12% 18%,#315e65,transparent 58%),radial-gradient(ellipse at 85% 90%,#245c6c,transparent 60%)}
.game-screen{border-color:#518783;background:#e8f0e5;box-shadow:0 16px 55px #031e3c66,0 0 0 6px #e9f6e815}
.masthead{background:linear-gradient(180deg,#f7faf0,#e4eedf)}
.brand h1{color:#214e59}.brand p{letter-spacing:.5px;color:#6d8887}.brand-mark{background:#214e59}
.battle-viewport{background:#287785}.wave-status{background:#153f52e8;max-width:95%;font-size:10px}
.island-hint{position:absolute;left:10px;bottom:9px;padding:5px 8px;background:#174956db;border:1px solid #9edac733;color:#e0f2d9;border-radius:7px;font-size:9px;pointer-events:none;z-index:2}
.mode-link{display:grid;place-items:center;padding:0 7px;height:29px;background:#d6e5df;border:1px solid #b2c9c0;border-radius:8px;color:#365e61;text-decoration:none;font-size:10px;font-weight:650}
.state-panel{border-color:#d8c18b;background:#fbfaedf2}.primary-button{background:#397e79;border-color:#285e62;box-shadow:0 3px 0 #204d55}
.primary-button:hover{background:#438d81}.stage-header .level-tabs button.active{background:#214e59}
.summon-button.hero-summon{background:linear-gradient(140deg,#438874,#326769);border-color:#265e61}
.hero-summon b,.hero-summon small{color:#fff3cc}.hero-summon .button-symbol{color:#ffdfa0}.hero-summon .cost-tag{color:#26474d}
.battle-hud{grid-template-columns:1.5fr 1fr 1fr;background:#c7d9d1}.hud-item{background:#f0f5e9}.pool-button{color:#467876}
@media(max-width:380px){.brand h1{font-size:16px}.brand-mark{width:29px;height:29px}.top-actions{gap:3px}.quiet-button{padding:0 5px}.mode-link{padding:0 5px;font-size:9px}.icon-button{width:25px}.island-hint{font-size:8px}}

/* Island-only stationed heroes: no quality grade or mobile-roster membership. */
.station-entry{align-items:flex-start;gap:12px;padding:11px 0;border-bottom:1px solid #dfe8d4}
.station-entry:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.station-portrait{position:relative;flex-shrink:0;width:62px;height:72px;border:1px solid #b4cec3;border-radius:12px;background:linear-gradient(145deg,#e4f1e7,#f6f2dc);overflow:hidden}
.station-portrait img{display:block;width:55px;height:64px;object-fit:contain;margin:auto}
.station-portrait i{position:absolute;right:5px;bottom:4px;color:#a5813d;font-size:12px;font-style:normal;text-shadow:0 1px #fff9df}
.station-entry-copy{flex:1;min-width:0}.station-entry-copy b{font-size:13px;color:#38665d}
.station-role{display:block;margin-top:3px;font-size:8px;color:#8c9478;letter-spacing:.3px}
.station-entry-copy p{margin-top:5px;font-size:10px;line-height:1.7;color:#728772}
.station-entry-copy small{display:block;margin-top:5px;color:#91a08a;font-size:8px;line-height:1.5}
.station-drag-ghost{border-color:#76a598;background:#edf5e8}.station-drag-ghost img{width:32px;height:32px}
.station-skill{color:#517c69;font-size:8px;line-height:1.7}
@media(max-width:360px){.station-entry{gap:8px}.station-portrait{width:52px;height:64px}.station-portrait img{width:47px;height:57px}.station-entry-copy b{font-size:12px}.station-entry-copy p{font-size:9px}.station-entry-copy small{font-size:7px}}

/* One two-row strip for both unit kinds; entity scope is always explicit. */
.army-type-counts{margin-right:auto;white-space:nowrap;color:#6a8980;font-size:8px;line-height:1.2}
.army-panel .panel-heading{gap:5px}.army-panel .pool-button{margin-left:0}
.army-unit-card .card-kind,.drag-ghost .card-kind{position:absolute;left:2px;top:2px;z-index:1;padding:1px 2px;border-radius:3px;background:#eef5e7ed;color:#587968;font-size:6px;line-height:8px;font-weight:750;pointer-events:none}
.station-unit-card{border-color:#75a597;background:#e8f4ed}.station-unit-card .card-kind,.station-drag-ghost .card-kind{background:#458b7ce8;color:#fffce8}
.army-unit-card .card-enhancement{right:2px;top:2px;font-size:6px}
.army-unit-card.station-unit-card.selected{box-shadow:0 0 0 2px #e1b75f}
.army-unit-card.reviving{opacity:.65;cursor:default}
.army-unit-card .revive-countdown{position:absolute;inset:auto 1px 13px;z-index:2;padding:2px 1px;border-radius:3px;background:#173e4ce8;color:#fff7d8;text-align:center;font-size:7px;font-weight:750;pointer-events:none}
@media(max-width:360px){.army-type-counts{font-size:7px}.army-panel .panel-heading{gap:4px}.army-panel .panel-heading h2{font-size:10px}.army-panel .pool-button{padding:3px 5px;font-size:8px}.hero-scroll-controls button{width:21px}.army-unit-card .hero-name{font-size:8px}}
@media(max-height:670px) and (orientation:portrait){
  .command-deck{gap:5px;padding:6px 8px max(7px,env(safe-area-inset-bottom))}
  .army-panel .panel-heading{margin-bottom:4px;min-height:18px}
  .hero-cards{grid-template-rows:repeat(2,52px);height:111px;gap:4px 5px;padding:1px 2px 2px}
  .army-unit-card{height:52px;padding:2px 2px 3px}.army-unit-card img{width:22px;height:22px;margin:0 auto}
  .army-unit-card .hero-name{font-size:8px;line-height:9px}.army-unit-card .card-stars{height:8px;line-height:8px;font-size:7px}
  .army-unit-card .card-health{margin:2px 4px 0;height:2px}.army-unit-card .card-kind{font-size:6px;line-height:7px;padding:0 2px}
  .empty-army{min-height:104px}.summon-button{height:43px}.island-hint{font-size:8px}
}
@media(orientation:landscape) and (max-height:600px){.army-panel .panel-heading{flex-wrap:wrap;gap:4px}.army-type-counts{margin:0 0 0 auto}.army-panel .pool-button{order:3}.hero-scroll-controls{order:4}.army-unit-card{height:62px}}

/* Independent left hero and right stationed-hero card columns. */
.army-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;min-width:0}
.army-column{min-width:0;overflow:hidden}.army-column+.army-column{border-left:1px solid #bccdbb;padding-left:8px}
.split-army .panel-heading{gap:3px;min-height:23px}.split-army .panel-heading h2{font-size:10px}
.split-army .panel-heading .pool-button{margin-left:auto;padding:3px 4px;font-size:8px}
.split-army .hero-scroll-controls{margin-left:auto;gap:2px}.split-army .hero-scroll-controls button{width:18px;height:19px;font-size:18px}
.split-army .empty-army{width:100%;max-width:none;min-width:0;font-size:9px}
.roster-kind-heading{grid-column:1/-1;margin:7px 0 1px;color:#416a69;font-size:11px;line-height:1.4}
.select-building{background:#eaf5f5;border-color:#86bcc5}
.select-building img{width:43px;height:50px}
@media(max-width:360px){.army-columns{gap:5px}.army-column+.army-column{padding-left:5px}.split-army .panel-heading{gap:2px}.split-army .panel-heading h2{font-size:9px}.split-army .hero-scroll-controls button{width:16px;height:18px}.split-army .panel-heading .pool-button{padding:3px;font-size:7px}}
@media(orientation:landscape) and (max-height:600px){.army-columns{gap:6px}.army-column+.army-column{padding-left:6px}.split-army .panel-heading{flex-wrap:wrap;min-height:43px;align-content:start}.split-army .panel-heading h2{width:100%}.split-army .panel-heading .pool-button{order:0;margin-left:0}.split-army .hero-scroll-controls{order:0}.split-army .hero-cards{grid-auto-columns:58px}.split-army .army-unit-card{width:58px}}

/* Desktop: a tall battlefield beside readable cards, inside one game frame. */
@media(min-width:900px) and (min-height:540px){
  .app-shell{padding:12px}
  .game-screen{
    --desktop-card-width:clamp(78px,6.7vw,94px);
    width:min(100%,1360px);height:100%;max-height:none;
    grid-template-columns:minmax(0,1fr) clamp(400px,36vw,480px);
    grid-template-rows:64px 44px 64px minmax(0,1fr);
    border:2px solid #518783;border-radius:22px;
  }
  .masthead{grid-column:1/-1;grid-row:1;padding:10px 18px;gap:16px}
  .brand{gap:12px}.brand-mark{width:42px;height:42px}.brand-mark svg{width:32px;height:32px}
  .brand h1{font-size:24px}.brand p{display:block;font-size:11px;letter-spacing:1px}
  .top-actions{gap:8px}.quiet-button,.icon-button,.mode-link{height:38px;border-radius:9px}
  .quiet-button,.mode-link{padding:0 12px;font-size:14px}.icon-button{width:38px}.icon-button svg{width:20px;height:20px}
  .stage-header{grid-column:1;grid-row:2;padding:0 16px 6px;gap:12px}
  .level-tabs{gap:8px}.level-tabs button{padding:8px 14px;font-size:14px}.level-tabs button small{font-size:11px}
  .battle-controls{gap:8px}.battle-controls button{width:38px;height:34px;font-size:14px}.battle-controls svg{width:18px;height:18px}
  .battle-hud{grid-column:1;grid-row:3}
  .hud-item{padding:9px 16px 12px}.hud-label{font-size:12px;margin-bottom:5px}
  .hud-item strong,.castle-hud strong{font-size:23px}.hud-item strong small,.castle-hud strong small{font-size:13px}
  .base-health-track{left:16px;right:16px;bottom:5px;height:4px}
  .battle-viewport{grid-column:1;grid-row:4}
  .wave-status{top:12px;left:14px;padding:7px 10px;font-size:14px;max-width:95%}
  .island-hint{left:14px;bottom:12px;padding:7px 10px;font-size:12px}
  .unit-inspector{left:14px;bottom:12px;max-width:360px;padding:10px 12px;font-size:14px;line-height:1.65}
  .unit-inspector b{font-size:16px}.station-skill{font-size:12px}
  .state-panel{max-width:390px;padding:24px;width:min(390px,88%)}
  .state-kicker{font-size:12px}.state-panel h2{font-size:30px}.state-panel p{font-size:15px}
  .primary-button{padding:12px 20px;font-size:16px}
  .state-layer.compact-layer{padding:14px}.state-compact strong{font-size:14px}.state-compact .primary-button{font-size:14px;padding:10px 16px}
  .command-deck{
    grid-column:2;grid-row:2/-1;grid-template-rows:minmax(0,1fr) auto;
    padding:12px;gap:12px;border-top:0;border-left:2px solid #bccfbb;
    box-shadow:-3px 0 12px #214a4010;overflow:hidden;
  }
  .army-panel.split-army{display:flex;flex-direction:column;overflow:hidden}
  .army-columns{height:100%;min-height:0;gap:12px}
  .army-column{display:flex;flex-direction:column;min-height:0}
  .army-column+.army-column{padding-left:12px}
  .split-army .panel-heading{flex-wrap:wrap;align-content:start;justify-content:flex-start;gap:6px;min-height:60px;margin-bottom:8px;flex-shrink:0}
  .split-army .panel-heading h2{width:100%;font-size:16px;line-height:22px}
  .split-army .panel-heading h2 span{font-size:12px;padding:2px 6px}
  .split-army .panel-heading .pool-button{order:0;height:28px;margin:0;padding:4px 7px;font-size:12px}
  .split-army .hero-scroll-controls{order:0;margin-left:auto;gap:4px}
  .split-army .hero-scroll-controls button{width:26px;height:28px;font-size:24px}
  .split-army .hero-cards{position:relative;flex:1;min-height:0;height:100%;grid-template-rows:repeat(2,124px);grid-auto-columns:var(--desktop-card-width);gap:10px 8px;align-content:start}
  .split-army .army-unit-card{width:var(--desktop-card-width);height:124px;padding:15px 4px 6px;border-radius:11px}
  .split-army .army-unit-card img{width:52px;height:52px;margin:0 auto 3px}
  .split-army .army-unit-card .hero-name{font-size:13px;line-height:20px}
  .split-army .army-unit-card .card-stars{height:16px;font-size:13px;line-height:16px}
  .split-army .army-unit-card .card-health{height:4px;margin:4px 6px 0}
  .army-unit-card .card-kind,.drag-ghost .card-kind{top:3px;left:3px;font-size:10px;line-height:12px;padding:1px 3px}
  .army-unit-card .card-enhancement{top:3px;right:3px;font-size:10px}
  .army-unit-card .revive-countdown{inset:auto 2px 24px;padding:4px 2px;font-size:11px}
  .split-army .empty-army{position:absolute;inset:2px;width:auto;max-width:none;min-height:0;height:auto;font-size:14px;line-height:1.8}
  .summon-bar{grid-template-columns:1fr;gap:10px}
  .summon-button{height:64px;padding:10px 14px;gap:12px;border-radius:13px}
  .summon-button b{font-size:19px}.summon-button small{font-size:12px;margin-top:4px}
  .button-symbol{width:34px;height:34px}.button-symbol svg{width:32px;height:32px}
  .cost-tag{min-width:54px;padding:9px 8px;font-size:22px}.cost-tag:before{width:10px;height:10px;margin-right:5px}
  .drag-ghost{width:94px;height:124px;padding:15px 4px 6px;border-radius:11px}
  .drag-ghost img{width:52px;height:52px}.drag-ghost .hero-name{font-size:13px;line-height:20px}.drag-ghost .card-stars{height:16px;font-size:13px;line-height:16px}
  .toast{max-width:560px;bottom:24px;margin-left:0;padding:12px 18px;font-size:15px}
  dialog{width:calc(100% - 48px);max-width:840px;max-height:calc(100dvh - 40px);padding:28px 32px;font-size:15px}
  #roster-dialog[open],#upgrade-dialog{width:calc(100% - 48px);max-width:840px;max-height:calc(100dvh - 40px);padding:28px 32px}
  dialog>h2{font-size:25px;margin-bottom:18px}.eyebrow{font-size:12px}
  #roster-dialog>h2,#upgrade-dialog>h2{font-size:25px;margin-bottom:14px}
  .dialog-close{top:14px;right:16px;width:34px;height:34px;font-size:32px}
  dialog ol{font-size:16px;line-height:1.85}.small-note,.panel-footnote,.merge-note p{font-size:13px}
  .selection-description{font-size:15px;line-height:1.65}.selection-status{font-size:13px}
  .selection-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
  .roster-kind-heading{font-size:16px;margin-top:12px}
  .select-hero{min-height:112px;padding:10px 5px}.select-hero img,.select-building img{width:48px;height:48px}
  .select-hero b{font-size:15px}.select-hero-meta,.select-hero small{font-size:12px;line-height:1.5}
  .selection-status span{font-size:13px;line-height:1.65}
  #roster-dialog .selection-footer{display:block;padding-top:14px}
  #roster-dialog .selection-footer p{margin-bottom:12px;text-align:left;font-size:13px;line-height:1.65}
  #roster-dialog .selection-footer .primary-button{width:100%}
  .station-entry-copy b{font-size:18px}.station-role{font-size:13px}.station-entry-copy p{font-size:15px}.station-entry-copy small{font-size:14px}
  .roster-entry img{width:52px;height:52px}.roster-entry span{font-size:14px}.roster-class-label{font-size:14px}
  .battle-log-panel p{font-size:15px}
  #upgrade-dialog .upgrade-offers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .upgrade-choice{min-height:248px;padding:16px;flex-direction:column;align-items:flex-start;gap:12px}
  .upgrade-art{width:56px;height:56px}.upgrade-art img{width:50px;height:50px}.upgrade-art svg{width:36px;height:36px}
  .upgrade-card-copy{gap:8px}.upgrade-card-copy b{font-size:18px}.upgrade-scope{font-size:13px}.upgrade-description{font-size:15px;line-height:1.65}
  .upgrade-pick{align-self:flex-end;margin-top:auto;font-size:14px;padding:7px 10px}.upgrade-retention-note{font-size:13px}
}
@media(min-width:900px) and (min-height:760px){
  .split-army .hero-cards{grid-template-rows:repeat(3,124px)}
}
@media(min-width:900px) and (min-height:540px) and (max-height:639px){
  .split-army .hero-cards{grid-template-rows:repeat(2,94px)}
  .split-army .army-unit-card{height:94px;padding:12px 4px 4px}
  .split-army .army-unit-card img{width:34px;height:34px;margin-bottom:2px}
  .split-army .army-unit-card .hero-name{font-size:12px;line-height:16px}
  .split-army .army-unit-card .card-stars{height:12px;font-size:12px;line-height:12px}
  .split-army .army-unit-card .card-health{height:3px;margin-top:3px}
}

/* Four stars indicate awakening, independently of hero color quality. */
.army-unit-card.four-star-card{box-shadow:0 0 0 2px #b971e9,0 0 16px #c57dff66;background-image:linear-gradient(150deg,#d9aaff22,#ffffff00)}
.four-star-card .card-stars{color:#a55dcc;text-shadow:0 0 5px #d4a0ff}
.upgrade-description{overflow-wrap:anywhere}

/* Detailed character portraits share the battle rig; frames remain readable on mobile. */
.army-unit-card{background-image:linear-gradient(145deg,#fffdf7a6,#e4ecd74d);box-shadow:inset 0 1px 0 #ffffffc9,0 2px 3px #29464b15}
.army-unit-card img{border-radius:8px;object-fit:cover;box-shadow:0 1px 3px #29464b24}
.roster-option img,.roster-choice img{object-fit:cover}
.army-unit-card.selected{box-shadow:inset 0 0 0 1px #fff4bd,0 0 0 2px #c5a46a}

.select-hero img{border-radius:9px;object-fit:cover;box-shadow:0 1px 3px #29464b22}
@media(min-width:1000px) and (min-height:640px){.select-hero{min-height:134px;gap:4px}.select-hero img{width:68px;height:68px}.select-hero b{font-size:13px}.select-hero-meta,.select-hero small{font-size:10px}}

/* Vertical army lists: keep intrinsic card count from expanding the right panel. */
.command-deck,.army-panel.split-army,.army-columns,.army-column{min-width:0;min-height:0;max-width:100%}
.split-army .hero-cards{grid-auto-flow:row;grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-columns:auto;grid-auto-rows:76px;align-content:start;overflow-x:hidden;overflow-y:auto;scrollbar-gutter:stable;overscroll-behavior:contain;scroll-behavior:auto}
.split-army .army-unit-card{width:100%;max-width:100%;height:76px}
.split-army .empty-army{grid-column:1;min-width:0;max-width:100%}
.split-army .hero-scroll-controls button{font-size:14px}
@media(min-width:900px) and (min-height:540px){
  .army-columns{flex:1;min-height:0;grid-template-rows:minmax(0,1fr)}
  .split-army .hero-cards{flex:1 1 0;height:0;min-height:0;grid-auto-rows:124px}
  .split-army .army-unit-card{height:124px}
  .split-army .hero-scroll-controls button{font-size:20px}
}
@media(min-width:900px) and (min-height:540px) and (max-height:639px){
  .split-army .hero-cards{grid-auto-rows:94px}.split-army .army-unit-card{height:94px}
}