/* Campaign art and layout only. Combat, multiplayer and training keep style.css. */
:root{
  --tower-bg:#0b1520;
  --tower-panel:#101a26;
  --tower-muted:#b7c1ce;
  --tower-dim:#a5b2c2;
  --tower-selection:#293a4e;
  --tower-atmosphere-cool:rgba(23,91,124,.66);
  --tower-atmosphere-depth:rgba(46,43,68,.44);
  --tower-pad:64px;
  --tower-column:clamp(300px,28vw,376px);
}
#overlay.campaign-map-mode,#overlay.campaign-ready-mode,#overlay.training-ready-mode{
  position:fixed;
  inset:0;
  padding:0;
  display:flex;
  align-items:stretch;
  justify-content:flex-start;
  overflow:hidden;
  background:var(--tower-bg);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.campaign-scenery{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}
#campaign-scene-image{
  position:absolute;
  max-width:none;
  user-select:none;
  pointer-events:none;
}
/* Continue the bitmap atmosphere across the viewport after shifting the tower. */
#overlay.campaign-map-mode .campaign-scenery{
  background:radial-gradient(ellipse at 0% 24%,var(--tower-atmosphere-cool),transparent 62%),radial-gradient(ellipse at 96% 85%,var(--tower-atmosphere-depth),transparent 58%),var(--tower-bg);
}
/* Feather only the background canvas; the exact final-floor silhouette keeps its tip. */
#overlay.campaign-map-mode #campaign-scenery[data-mode="map"] #campaign-scene-image{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1672 941'%3E%3Cpolygon points='873,784 1004,792 1111,786 1111,796 1098,801 1098,838 1111,843 1111,855 1064,876 1041,895 1014,920 994,941 977,921 962,903 944,886 921,874 879,855 879,843 885,838 885,798'/%3E%3C/svg%3E"),linear-gradient(to right,transparent,var(--text) 18%,var(--text) 90%,transparent),linear-gradient(to bottom,transparent,var(--text) 2%,var(--text) 94%,transparent);
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1672 941'%3E%3Cpolygon points='873,784 1004,792 1111,786 1111,796 1098,801 1098,838 1111,843 1111,855 1064,876 1041,895 1014,920 994,941 977,921 962,903 944,886 921,874 879,855 879,843 885,838 885,798'/%3E%3C/svg%3E"),linear-gradient(to right,transparent,var(--text) 18%,var(--text) 90%,transparent),linear-gradient(to bottom,transparent,var(--text) 2%,var(--text) 94%,transparent);
  -webkit-mask-composite:source-over,source-in;
  mask-composite:add,intersect;
}
#campaign-floor-arrow{position:absolute;width:24px;height:24px;color:var(--text);transform:translate(-100%,-50%);pointer-events:none}
#campaign-floor-hits{position:absolute;inset:0;pointer-events:none}
.campaign-floor-hit{
  position:absolute;
  margin:0;
  padding:0;
  border-radius:0;
  background:none;
  pointer-events:auto;
  cursor:pointer;
}
.campaign-floor-hit[aria-disabled="true"]{cursor:default}
#overlay.campaign-map-mode .campaign-floor-hit:focus-visible{box-shadow:none}
#campaign-scene-actor{
  position:absolute;
  width:32px;
  height:48px;
  transform:translate(-50%,-100%);
  pointer-events:none;
}
#campaign-scene-actor>svg{display:block;width:100%;height:100%}
#overlay.campaign-map-mode .overlay-card,#overlay.campaign-ready-mode .overlay-card,#overlay.training-ready-mode .overlay-card{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  width:100%;
  height:100%;
  max-height:none;
  margin:0;
  padding:calc(var(--tower-pad) + 44px) var(--tower-pad) var(--tower-pad);
  gap:24px;
  border-radius:0;
  background:none;
  box-shadow:none;
  overflow:visible;
  pointer-events:none;
}
#overlay.campaign-map-mode .overlay-head,#overlay.campaign-ready-mode .overlay-head{display:none}
.campaign-page-heading{
  flex:none;
  width:var(--tower-column);
  max-width:100%;
  text-align:left;
  pointer-events:auto;
}
.campaign-page-heading h3{margin:0;font-size:22px;font-weight:600;line-height:1.5;color:var(--text)}
.campaign-page-meta{margin:0 0 8px;font-size:11px;color:var(--tower-muted)}
.campaign-page-copy{margin:8px 0 0;font-size:13px;line-height:1.6;color:var(--tower-muted)}
.campaign-page-copy:empty{display:none}
#overlay.campaign-map-mode #overlay-campaign,#overlay.campaign-ready-mode #overlay-loadout,#overlay.training-ready-mode #overlay-loadout{
  position:relative;
  flex:1 1 0;
  align-self:flex-start;
  width:var(--tower-column);
  max-width:100%;
  min-width:0;
  min-height:0;
  height:auto;
  margin:0;
  gap:24px;
  pointer-events:auto;
}
#overlay.campaign-map-mode .campaign-grid{
  display:flex;
  flex:1 1 0;
  flex-direction:column;
  gap:0;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:0 4px 0 0;
  scrollbar-width:thin;
}
#overlay.campaign-map-mode .campaign-card{
  display:flex;
  flex:none;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  min-height:36px;
  padding:8px 36px 8px 12px;
  border-radius:10px;
  gap:8px;
  background:none;
  text-align:left;
}
#overlay.campaign-map-mode .campaign-card:hover{background:var(--fill)}
#overlay.campaign-map-mode .campaign-card:disabled{pointer-events:auto}
#overlay.campaign-map-mode .campaign-card[aria-current="true"]{background:var(--tower-selection)}
#overlay.campaign-map-mode .campaign-card .choice-title{font-size:13px;color:var(--text);white-space:nowrap}
#overlay.campaign-map-mode .campaign-card.is-locked .choice-title{color:var(--tower-dim)}
#overlay.campaign-map-mode .campaign-status{color:var(--tower-muted);white-space:nowrap}
#overlay.campaign-map-mode .campaign-lock{right:12px;color:var(--tower-dim)}
#overlay.campaign-map-mode .campaign-hell-mark{top:4px;right:4px;width:4px;height:4px}
.campaign-map-actions{flex:none;display:flex;flex-direction:column;gap:16px;width:100%}
.campaign-map-actions .button{min-height:44px}
#overlay.campaign-map-mode #campaign-back,#overlay.campaign-ready-mode #loadout-back,#overlay.training-ready-mode #loadout-back{
  position:fixed;
  top:var(--tower-pad);
  left:var(--tower-pad);
  width:auto;
  min-height:32px;
  margin:0;
  padding:4px 0;
  color:var(--text);
  pointer-events:auto;
}
#overlay.campaign-ready-mode .loadout-body{
  display:flex;
  flex-direction:column;
  width:100%;
  height:calc(100% - 60px);
  min-height:0;
  gap:24px;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:0 8px 8px 0;
  scrollbar-width:thin;
}
#overlay.campaign-ready-mode .loadout-players{display:block;flex:none}
#overlay.campaign-ready-mode #loadout-p1{display:flex;gap:16px}
#overlay.campaign-ready-mode .loadout-heading{display:none}
#overlay.campaign-ready-mode #loadout-classes-p1{order:0}
#overlay.campaign-ready-mode #loadout-colors-p1{order:1}
#overlay.campaign-ready-mode .loadout-side{display:contents}
#overlay.campaign-ready-mode .class-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
#overlay.campaign-ready-mode .class-chip{min-height:36px;padding:8px}
#overlay.campaign-ready-mode .class-chip.is-locked{display:none}
#overlay.campaign-ready-mode .loadout-label{color:var(--tower-muted)}
#overlay.campaign-ready-mode .class-detail{order:0;gap:8px;flex:none}
#overlay.campaign-ready-mode .class-detail-rows{gap:8px}
#overlay.campaign-ready-mode .class-detail-row{grid-template-columns:64px minmax(0,1fr);gap:8px}
#overlay.campaign-ready-mode .class-detail-key{color:var(--tower-muted)}
#overlay.campaign-ready-mode #campaign-difficulty{order:1;flex:none}
#overlay.campaign-ready-mode .campaign-difficulty{justify-content:flex-start}
#overlay.campaign-ready-mode .campaign-difficulty .text-button{color:var(--tower-muted)}
#overlay.campaign-ready-mode .campaign-difficulty .text-button[aria-pressed="true"]{color:var(--text);background:var(--tower-selection)}
#overlay.campaign-ready-mode .loadout-actions{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  width:100%;
  gap:0;
}
#overlay.campaign-ready-mode #loadout-start{flex:none;width:100%;min-height:44px}
#overlay.campaign-ready-mode #loadout-add{display:none}
#overlay.campaign-map-mode button:focus-visible,#overlay.campaign-ready-mode button:focus-visible,#overlay.solo-select-mode button:focus-visible,#overlay.training-ready-mode button:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px var(--tower-muted);
  filter:none;
}
#overlay.campaign-map-mode button:active,#overlay.campaign-ready-mode button:active{filter:brightness(.88)}
@media(min-width:1440px){:root{--tower-pad:80px}}
@media(max-width:1199px){:root{--tower-pad:32px}}
@media(max-width:900px){
  :root{--tower-pad:24px;--tower-column:320px}
  #overlay.campaign-map-mode .overlay-card,#overlay.campaign-ready-mode .overlay-card,#overlay.training-ready-mode .overlay-card{
    width:min(368px,100%);
    background:var(--tower-panel);
  }
}
@media(max-width:620px){
  :root{--tower-pad:16px;--tower-column:100%}
  #overlay.campaign-map-mode .overlay-card,#overlay.campaign-ready-mode .overlay-card,#overlay.training-ready-mode .overlay-card{
    width:100%;
    max-width:100%;
    padding:60px 16px 16px;
    gap:16px;
    background:var(--tower-panel);
  }
  .campaign-scenery{display:none}
  #overlay.campaign-map-mode #overlay-campaign,#overlay.campaign-ready-mode #overlay-loadout,#overlay.training-ready-mode #overlay-loadout{width:100%;gap:16px}
  #overlay.campaign-map-mode .campaign-card{min-height:36px;padding:8px 32px 8px 8px}
  #overlay.campaign-ready-mode .loadout-body{gap:16px}
  .campaign-page-heading h3{font-size:22px}
  .campaign-page-copy{font-size:11px}
  #overlay.campaign-ready-mode .class-detail-row{grid-template-columns:56px minmax(0,1fr)}
}
@media(max-height:620px){
  :root{--tower-pad:16px}
  #overlay.campaign-map-mode .overlay-card,#overlay.campaign-ready-mode .overlay-card,#overlay.training-ready-mode .overlay-card{padding-top:56px;padding-bottom:16px;gap:12px}
  #overlay.campaign-map-mode #overlay-campaign{gap:12px}
  .campaign-map-actions{gap:8px}
  #overlay.campaign-map-mode .campaign-card{min-height:32px;padding-top:4px;padding-bottom:4px}
  .campaign-page-copy{display:none}
  #overlay.campaign-ready-mode .loadout-body{gap:16px}
}

/* Single-player entries are large image buttons with quiet, static architecture. */
#overlay.solo-select-mode{
  position:fixed;
  inset:0;
  display:flex;
  align-items:stretch;
  justify-content:flex-start;
  padding:0;
  overflow:hidden;
  background:var(--tower-bg);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
#overlay.solo-select-mode .overlay-card{
  width:100%;
  height:100%;
  max-height:none;
  margin:0;
  padding:calc(var(--tower-pad) + 44px) var(--tower-pad) var(--tower-pad);
  gap:24px;
  align-items:flex-start;
  justify-content:flex-start;
  border-radius:0;
  background:none;
  box-shadow:none;
}
#overlay.solo-select-mode .overlay-head{align-items:flex-start;flex:none}
#overlay.solo-select-mode #overlay-title{font-size:22px;font-weight:600;line-height:1.5}
#overlay.solo-select-mode #overlay-solo{flex:1;min-height:0;width:100%;align-items:center;justify-content:center}
#overlay.solo-select-mode .solo-choice{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:32px;
  width:min(1088px,100%);
  height:min(480px,100%);
  min-height:0;
}
#overlay.solo-select-mode .solo-entry{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  width:100%;
  height:100%;
  min-height:0;
  padding:0;
  gap:16px;
  overflow:hidden;
  background:none;
  filter:none;
  transform:none;
  transition:background 160ms;
}
#overlay.solo-select-mode .solo-entry:hover{background:var(--fill)}
#overlay.solo-select-mode .solo-entry:active{background:var(--tower-bg);filter:none;transform:none}
#overlay.solo-select-mode .solo-entry:disabled:hover{background:none}
.solo-entry-art{position:relative;display:block;flex:1;min-height:0;overflow:hidden;pointer-events:none}
.solo-entry-art svg{display:block;width:100%;height:100%;pointer-events:none;user-select:none}
.solo-entry-label{display:flex;align-items:center;justify-content:center;gap:8px;min-height:64px;padding:16px 24px;pointer-events:none}
#overlay.solo-select-mode .solo-entry .choice-title{font-size:22px;font-weight:600;color:var(--text)}
#overlay.solo-select-mode .solo-entry:disabled .choice-title{color:var(--tower-muted)}
#overlay.solo-select-mode .solo-lock{color:var(--tower-muted)}
#overlay.solo-select-mode #solo-select-back{
  position:fixed;
  top:var(--tower-pad);
  left:var(--tower-pad);
  width:auto;
  min-height:32px;
  margin:0;
  padding:4px 0;
  color:var(--text);
}

/* Training keeps the original editable name, role, color and AI controls. */
#overlay.training-ready-mode .overlay-head{align-items:flex-start;width:var(--tower-column);pointer-events:auto;flex:none}
#overlay.training-ready-mode #overlay-title{font-size:22px;font-weight:600;line-height:1.5}
#overlay.training-ready-mode .loadout-body{
  display:flex;
  flex-direction:column;
  width:100%;
  height:calc(100% - 60px);
  min-height:0;
  gap:24px;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:0 8px 8px 0;
  scrollbar-width:thin;
}
#overlay.training-ready-mode .loadout-players{display:block;flex:none}
#overlay.training-ready-mode #loadout-p1{display:flex;gap:16px}
#overlay.training-ready-mode .loadout-heading{display:none}
#overlay.training-ready-mode #loadout-classes-p1{order:0}
#overlay.training-ready-mode #loadout-colors-p1{order:1}
#overlay.training-ready-mode #loadout-name-p1{order:2}
#overlay.training-ready-mode .loadout-side{display:contents}
#overlay.training-ready-mode .class-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
#overlay.training-ready-mode .class-chip{min-height:36px;padding:8px}
#overlay.training-ready-mode .class-chip.is-locked{display:none}
/* Invisible generated tooltips must not enlarge the scrollable training column. */
#overlay.training-ready-mode .class-chip::after{display:none}
#overlay.training-ready-mode .class-chip:hover::after,#overlay.training-ready-mode .class-chip:focus-visible::after{display:block}
#overlay.training-ready-mode .class-chip:nth-child(3n+2)::after{left:50%;right:auto;transform:translateX(-50%)}
#overlay.training-ready-mode .class-chip:nth-child(3n)::after{left:auto;right:0;transform:none}
#overlay.training-ready-mode .loadout-label{color:var(--tower-muted)}
#overlay.training-ready-mode #loadout-difficulty{flex:none;order:1}
#overlay.training-ready-mode #loadout-difficulty .choice-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
#overlay.training-ready-mode #loadout-difficulty .choice-row{justify-content:center;text-align:center}
#overlay.training-ready-mode .loadout-actions{position:absolute;left:0;right:0;bottom:0;display:flex;width:100%;gap:0}
#overlay.training-ready-mode #loadout-start{flex:none;width:100%;min-height:44px}
@media(max-width:620px){
  #overlay.solo-select-mode .overlay-card{padding:60px 16px 16px;gap:16px}
  #overlay.solo-select-mode .solo-choice{gap:16px}
  #overlay.solo-select-mode .solo-entry{gap:8px}
  #overlay.solo-select-mode .solo-entry .choice-title{font-size:16px}
  .solo-entry-label{padding:8px;min-height:44px}
  #overlay.training-ready-mode #overlay-loadout{width:100%;gap:16px}
  #overlay.training-ready-mode .overlay-head{width:100%}
}
@media(max-height:620px){
  #overlay.solo-select-mode .overlay-card{padding-top:56px;padding-bottom:16px;gap:12px}
  #overlay.solo-select-mode .solo-choice{height:100%}
  #overlay.solo-select-mode .solo-entry{gap:8px}
  .solo-entry-label{padding:8px;min-height:44px}
  #overlay.training-ready-mode .loadout-body{gap:16px}
}