/* ============ BLOCKWORKS TD — NEO-BRUTALIST SYSTEM ============ */
@font-face {
  font-family: 'Archivo Black';
  src: url('../fonts/archivo-black.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/space-grotesk.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --yellow: #FFD400;
  --red: #F42B0F;
  --blue: #1E4FFF;
  --green: #00A651;
  --ink: #141414;
  --paper: #F2EEE2;
  --concrete: #E4DFD0;
  --steel: #B8B2A2;
  --white: #FFFFFF;
  --shadow: 6px 6px 0 var(--ink);
  --shadow-sm: 4px 4px 0 var(--ink);
  --shadow-lg: 10px 10px 0 var(--ink);
  --border: 3px solid var(--ink);
  --border-thick: 4px solid var(--ink);
  --display: 'Archivo Black', 'Arial Black', 'Haettenschweiler', Impact, sans-serif;
  --body: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --snap: cubic-bezier(.2, 1.4, .4, 1);
  --slam: cubic-bezier(.16, 1.6, .3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

body {
  font-family: var(--body);
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(circle, rgba(20,20,20,.07) 1px, transparent 1.4px),
    linear-gradient(rgba(20,20,20,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,20,20,.045) 1px, transparent 1px);
  background-size: 14px 14px, 48px 48px, 48px 48px;
}

#grain {
  position: fixed; inset: -50%; z-index: 2000; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 1.2s steps(4) infinite;
}
@keyframes grain-shift {
  0% { transform: translate(0,0); } 25% { transform: translate(-2%,1%); }
  50% { transform: translate(1%,-2%); } 75% { transform: translate(-1%,2%); }
  100% { transform: translate(0,0); }
}

::selection { background: var(--yellow); color: var(--ink); }

/* ============ BUTTONS ============ */
.btn {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .02em;
  border: var(--border);
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  user-select: none;
  transition: transform .08s var(--snap), box-shadow .08s var(--snap), background .12s;
  display: inline-flex; align-items: center; gap: .5em;
  line-height: 1;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
.btn:focus-visible { outline: 3px dashed var(--blue); outline-offset: 3px; }
.btn:disabled, .btn.is-disabled {
  filter: grayscale(1); opacity: .55; cursor: not-allowed;
  transform: none; box-shadow: var(--shadow-sm);
}
.btn-mega { font-size: clamp(1.3rem, 2.6vw, 1.9rem); padding: .75em 1.3em; }
.btn-big { font-size: clamp(.95rem, 1.6vw, 1.15rem); padding: .7em 1.2em; }
.btn-wide { width: 100%; justify-content: center; font-size: 1.05rem; padding: .8em 1em; }
.btn-sq { width: 44px; height: 44px; justify-content: center; font-size: 1rem; padding: 0; }
.btn-back { font-size: .95rem; padding: .6em 1em; }
.btn-yellow { background: var(--yellow); }
.btn-red { background: var(--red); color: var(--white); }
.btn-blue { background: var(--blue); color: var(--white); }
.btn-white { background: var(--white); }
.btn-arrow { font-size: .7em; transition: transform .12s var(--snap); }
.btn:hover .btn-arrow { transform: translateX(4px); }
.btn-speed.is-fast { background: var(--yellow); }

kbd {
  font-family: var(--mono); font-size: .78em; font-weight: 700;
  border: 2px solid var(--ink); padding: .15em .45em; background: var(--white);
  box-shadow: 2px 2px 0 var(--ink); white-space: nowrap;
}

/* ============ PANELS / LABELS / STICKERS ============ */
.panel {
  background: var(--white);
  border: var(--border);
  box-shadow: var(--shadow-sm);
  position: relative;
}
.panel::before, .panel::after {
  content: ''; position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink); top: 6px;
}
.panel::before { left: 6px; } .panel::after { right: 6px; }
.panel-label {
  font-family: var(--display); font-size: .82rem; letter-spacing: .06em;
  background: var(--ink); color: var(--paper); padding: .45em .9em .4em;
  display: flex; align-items: center; justify-content: space-between; gap: 1em;
  text-transform: uppercase;
}
.panel-hint { font-family: var(--mono); font-size: .72rem; color: var(--yellow); letter-spacing: 0; }

.tape-tag {
  font-family: var(--display); font-size: .78rem; letter-spacing: .08em;
  background: var(--yellow); border: 3px solid var(--ink); padding: .35em .8em;
  box-shadow: 3px 3px 0 var(--ink); display: inline-block;
  transform: rotate(-1.5deg);
}
.tape-red { background: var(--red); color: var(--white); transform: rotate(1.2deg); }
.tape-blue { background: var(--blue); color: var(--white); transform: rotate(-.8deg); }

.hazard-divider {
  height: 18px; border: 3px solid var(--ink);
  background: repeating-linear-gradient(-45deg, var(--yellow) 0 16px, var(--ink) 16px 32px);
}

/* ============ SCREENS ============ */
.screen {
  position: fixed; inset: 0; display: none; flex-direction: column;
  opacity: 0; transition: opacity .18s ease;
}
.screen.is-active { display: flex; opacity: 1; }
.screen.is-active .screen-head, .screen.is-active .title-wrap,
.screen.is-active .brief-grid, .screen.is-active .sector-grid,
.screen.is-active .end-wrap {
  animation: screen-in .3s var(--snap) both;
}
@keyframes screen-in {
  from { transform: translateY(18px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.screen-head {
  display: flex; align-items: center; gap: 1.2rem;
  padding: .9rem 1.4rem; border-bottom: var(--border-thick);
  background: var(--paper);
}
.screen-title { font-family: var(--display); font-size: clamp(1.4rem, 3vw, 2.1rem); letter-spacing: .01em; }
.screen-head-tag { margin-left: auto; }

/* ============ TITLE ============ */
#screen-title { justify-content: center; align-items: center; overflow: hidden; }
.title-bg { position: absolute; inset: 0; pointer-events: none; }
.drift-shape { position: absolute; border: var(--border-thick); opacity: .9; }
.ds-1 { width: 130px; height: 130px; background: var(--yellow); top: 8%; left: 6%;
  animation: drift-a 11s ease-in-out infinite; box-shadow: var(--shadow); }
.ds-2 { width: 90px; height: 90px; background: var(--red); bottom: 14%; right: 8%;
  border-radius: 50%; animation: drift-b 13s ease-in-out infinite; box-shadow: var(--shadow); }
.ds-3 { width: 0; height: 0; border: none; border-left: 60px solid transparent;
  border-right: 60px solid transparent; border-bottom: 100px solid var(--blue);
  top: 16%; right: 14%; animation: drift-a 15s ease-in-out infinite reverse;
  filter: drop-shadow(5px 5px 0 var(--ink)); }
.ds-4 { width: 170px; height: 60px; background: var(--ink); bottom: 10%; left: 12%;
  animation: drift-b 9s ease-in-out infinite reverse; }
@keyframes drift-a { 0%,100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(24px,-30px) rotate(8deg); } }
@keyframes drift-b { 0%,100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(-30px,20px) rotate(-10deg); } }

.title-wrap { position: relative; z-index: 1; text-align: center; padding: 2rem; max-width: 1000px; }
.title-topline { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.6rem; }
.game-logo { line-height: .82; margin-bottom: 1.4rem; }
.logo-line { display: block; font-family: var(--display); }
.logo-block {
  font-size: clamp(4.2rem, 13vw, 9.5rem); color: var(--ink);
  text-shadow: 6px 6px 0 var(--yellow), 12px 12px 0 var(--ink);
  letter-spacing: .01em;
  animation: logo-settle .5s var(--slam) both;
}
.logo-works {
  font-size: clamp(4.2rem, 13vw, 9.5rem); color: var(--white);
  -webkit-text-stroke: 3px var(--ink);
  text-shadow: 6px 6px 0 var(--red), 12px 12px 0 var(--ink);
  animation: logo-settle .5s var(--slam) .08s both;
}
.logo-tm {
  font-size: .22em; vertical-align: super; background: var(--red); color: var(--white);
  -webkit-text-stroke: 0; padding: .15em .4em; margin-left: .25em; border: 3px solid var(--ink);
  display: inline-block; transform: rotate(6deg);
  text-shadow: none;
}
@keyframes logo-settle {
  from { transform: translateY(-40px) scale(1.15); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
.title-sub {
  font-family: var(--mono); font-weight: 700; font-size: clamp(.8rem, 1.5vw, 1rem);
  letter-spacing: .12em; margin: 1.2rem auto 1.8rem; max-width: 640px;
}
.title-actions { display: flex; gap: 1.1rem; justify-content: center; flex-wrap: wrap; }
.best-strip {
  display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem;
}
.best-chip {
  font-family: var(--mono); font-size: .78rem; font-weight: 700;
  border: 3px solid var(--ink); background: var(--white); padding: .5em .9em;
  box-shadow: 3px 3px 0 var(--ink);
}
.best-chip b { color: var(--red); }
.title-foot { margin-top: 1.8rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; opacity: .65; }

.marquee-strip {
  position: absolute; bottom: 0; left: 0; right: 0; overflow: hidden;
  background: var(--ink); color: var(--yellow); border-top: var(--border-thick);
  font-family: var(--display); font-size: 1rem; letter-spacing: .1em; padding: .5em 0;
}
.marquee-inner { display: inline-block; white-space: nowrap; animation: marquee 22s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============ SECTOR SELECT ============ */
#screen-select { overflow-y: auto; }
.sector-grid {
  display: grid; grid-template-columns: repeat(3, minmax(280px, 1fr));
  gap: 1.6rem; padding: 1.8rem; max-width: 1300px; margin: 0 auto; width: 100%;
}
.sector-card { background: var(--white); border: var(--border-thick); box-shadow: var(--shadow);
  display: flex; flex-direction: column; transition: transform .12s var(--snap), box-shadow .12s var(--snap); }
.sector-card:hover { transform: translate(-3px,-3px); box-shadow: var(--shadow-lg); }
.sector-map-wrap { border-bottom: var(--border-thick); position: relative; background: var(--concrete); }
.sector-map-wrap canvas { display: block; width: 100%; height: auto; }
.sector-diff {
  position: absolute; top: 10px; right: -8px; font-family: var(--display); font-size: .8rem;
  padding: .35em .9em; border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(3deg);
}
.diff-easy { background: var(--green); color: var(--white); }
.diff-med { background: var(--yellow); }
.diff-hard { background: var(--red); color: var(--white); }
.sector-body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .7rem; flex: 1; }
.sector-num { font-family: var(--mono); font-weight: 700; font-size: .75rem; letter-spacing: .18em; color: var(--blue); }
.sector-name { font-family: var(--display); font-size: 1.7rem; line-height: 1; }
.sector-desc { font-size: .88rem; line-height: 1.45; flex: 1; }
.sector-meta { display: flex; gap: .6rem; flex-wrap: wrap; }
.sector-meta span { font-family: var(--mono); font-size: .72rem; font-weight: 700;
  border: 2px solid var(--ink); padding: .25em .6em; background: var(--paper); }
.sector-best { font-family: var(--mono); font-size: .78rem; font-weight: 700; }
.sector-best b { color: var(--red); font-size: 1rem; }

/* ============ BRIEFING ============ */
#screen-brief { overflow-y: auto; }
.brief-grid {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
  gap: 1.5rem; padding: 1.5rem; max-width: 1300px; margin: 0 auto; width: 100%;
}
.brief-map-panel canvas { display: block; width: 100%; height: auto; }
.brief-side { display: flex; flex-direction: column; gap: 1.1rem; }
.brief-rules { list-style: none; display: flex; flex-direction: column; }
.brief-rules li { display: flex; gap: .9rem; padding: .8rem .9rem; font-size: .9rem; line-height: 1.4; }
.brief-rules li + li { border-top: 2px solid var(--ink); }
.rule-num {
  font-family: var(--display); font-size: 1.3rem; color: var(--red);
  min-width: 1.5em; line-height: 1;
}
.threat-board { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; padding: .8rem; }
.threat-item {
  display: flex; align-items: center; gap: .6rem; border: 2px solid var(--ink);
  padding: .45rem .6rem; background: var(--paper); font-size: .74rem; font-weight: 700;
}
.threat-item .eicon { flex: none; }
.threat-note { font-family: var(--mono); font-size: .68rem; font-weight: 400; opacity: .75; display: block; }
.brief-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); }
.brief-stat { padding: .8rem; text-align: center; }
.brief-stat + .brief-stat { border-left: var(--border); }
.bs-label { display: block; font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .12em; margin-bottom: .3em; }
.bs-val { font-family: var(--display); font-size: 1.9rem; }

/* enemy icons (CSS shapes) */
.eicon { width: 20px; height: 20px; border: 2.5px solid var(--ink); display: inline-block; position: relative; }
.eicon-grunt { background: var(--red); }
.eicon-runner { background: var(--blue); clip-path: polygon(50% 0, 100% 100%, 0 100%); border: none;
  filter: drop-shadow(1.5px 1.5px 0 var(--ink)); }
.eicon-mite { background: var(--yellow); border-radius: 50%; }
.eicon-brute { background: #3A3A3A; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); border: none;
  filter: drop-shadow(1.5px 1.5px 0 var(--ink)); }
.eicon-aegis { background: var(--paper); transform: rotate(45deg); }
.eicon-aegis::after { content: ''; position: absolute; inset: 3px; background: var(--blue); }
.eicon-mender { background: var(--green); clip-path: polygon(35% 0, 65% 0, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%, 0 35%, 35% 35%); border: none;
  filter: drop-shadow(1.5px 1.5px 0 var(--ink)); }
.eicon-boss { background: var(--ink); }
.eicon-boss::after { content: ''; position: absolute; inset: 4px; background: var(--red); }

/* ============ GAME LAYOUT ============ */
#screen-game { flex-direction: column; }
#topbar {
  display: flex; align-items: stretch; justify-content: space-between; gap: 1rem;
  border-bottom: var(--border-thick); background: var(--paper);
  padding: .5rem .8rem; flex-wrap: wrap; min-height: 62px;
}
.tb-group { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.tb-cell {
  border: var(--border); background: var(--white); padding: .3rem .7rem;
  box-shadow: 3px 3px 0 var(--ink); min-width: 74px;
}
.tb-label { display: block; font-family: var(--mono); font-size: .6rem; font-weight: 700; letter-spacing: .14em; }
.tb-val { font-family: var(--display); font-size: 1.25rem; line-height: 1.05; display: inline-block; }
.cash-val { color: var(--ink); }
.tb-cash { background: var(--yellow); }
.cash-val.bump { animation: cash-bump .28s var(--snap); }
@keyframes cash-bump { 0% { transform: scale(1); } 40% { transform: scale(1.35) rotate(-3deg); } 100% { transform: scale(1); } }
.lives-val.hurt { animation: lives-hurt .35s var(--snap); color: var(--red); }
@keyframes lives-hurt { 0% { transform: scale(1); } 40% { transform: scale(1.4) rotate(4deg); } 100% { transform: scale(1); } }

.tb-intel { display: flex; gap: .35rem; align-items: center; }
.intel-chip {
  display: flex; align-items: center; gap: .3em; border: 2px solid var(--ink);
  background: var(--white); padding: .2em .45em; font-family: var(--mono);
  font-size: .7rem; font-weight: 700; box-shadow: 2px 2px 0 var(--ink);
}
.intel-chip .eicon { width: 13px; height: 13px; border-width: 2px; }

.combo-box { position: relative; border: var(--border); background: var(--red); color: var(--white);
  padding: .3rem .7rem; box-shadow: 3px 3px 0 var(--ink); }
.combo-box .tb-label { color: var(--yellow); }
.combo-x { font-size: 1.3rem; }
.combo-box.pulse { animation: combo-pulse .2s var(--snap); }
@keyframes combo-pulse { 50% { transform: scale(1.12); } }
.combo-bar { position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: rgba(0,0,0,.35); }
#hud-combo-fill { height: 100%; width: 100%; background: var(--yellow); }

#game-main { flex: 1; display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 0; min-height: 0; }
#stage {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 0; overflow: hidden; background:
    repeating-linear-gradient(-45deg, transparent 0 22px, rgba(20,20,20,.03) 22px 44px), var(--concrete);
  border-right: var(--border-thick);
}
#game-canvas { display: block; max-width: 100%; max-height: 100%; touch-action: none; cursor: crosshair; }
#game-canvas.placing { cursor: copy; }

#sidebar { overflow-y: auto; padding: .8rem; display: flex; flex-direction: column; gap: .8rem; background: var(--paper); }

/* shop */
#shop { display: flex; flex-direction: column; }
.shop-card {
  display: grid; grid-template-columns: 52px 1fr auto; gap: .7rem; align-items: center;
  padding: .55rem .7rem; cursor: pointer; border: none; border-top: 2px solid var(--ink);
  background: var(--white); text-align: left; font-family: var(--body);
  transition: background .1s, transform .08s var(--snap);
  position: relative;
}
.shop-card:first-child { border-top: none; }
.shop-card:hover { background: var(--paper); }
.shop-card.is-armed { background: var(--yellow); box-shadow: inset 0 0 0 3px var(--ink); }
.shop-card.is-broke { opacity: .5; filter: grayscale(.9); cursor: not-allowed; }
.shop-card.is-broke .shop-cost { color: var(--red); }
.shop-icon { width: 52px; height: 52px; border: 3px solid var(--ink); background: var(--paper);
  display: flex; align-items: center; justify-content: center; box-shadow: 3px 3px 0 var(--ink); }
.shop-icon canvas { display: block; }
.shop-name { font-family: var(--display); font-size: .95rem; line-height: 1.1; display: block; }
.shop-role { font-family: var(--mono); font-size: .66rem; font-weight: 700; letter-spacing: .06em; opacity: .7; display: block; margin-top: .15em; }
.shop-right { text-align: right; }
.shop-cost { font-family: var(--display); font-size: 1.05rem; display: block; }
.shop-key { font-family: var(--mono); font-size: .62rem; font-weight: 700; border: 2px solid var(--ink);
  padding: .1em .4em; background: var(--paper); }
.shop-insuff { position: absolute; right: 64px; top: 50%; transform: translateY(-50%) rotate(-8deg);
  font-family: var(--display); font-size: .55rem; background: var(--red); color: var(--white);
  padding: .2em .5em; border: 2px solid var(--ink); display: none; }
.shop-card.is-broke .shop-insuff { display: block; }

/* tower panel */
.tower-panel[data-hidden="true"] { display: none; }
#tp-body { padding: .7rem; display: flex; flex-direction: column; gap: .6rem; }
.tp-tier { display: flex; gap: 4px; margin-bottom: .2rem; }
.tp-tier i { flex: 1; height: 10px; border: 2px solid var(--ink); background: var(--paper); }
.tp-tier i.on { background: var(--yellow); }
.tp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem .8rem; font-family: var(--mono); font-size: .72rem; font-weight: 700; }
.tp-stats .up { color: var(--green); }
.tp-stats .next { color: var(--blue); }
.tp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.tp-actions .btn { font-size: .8rem; padding: .65em .5em; justify-content: center; }
.tp-target { width: 100%; font-size: .75rem; padding: .6em .5em; justify-content: center; }
.tp-flavor { font-size: .74rem; line-height: 1.35; border-left: 4px solid var(--yellow); padding-left: .6rem; }

/* wave control */
.next-info { font-family: var(--mono); font-size: .72rem; font-weight: 700; padding: .55rem .7rem;
  display: flex; align-items: center; gap: .5rem; min-height: 2.4em; }
.next-count { font-family: var(--display); font-size: 1.2rem; margin-left: auto; }
.next-bonus { font-size: .75em; background: var(--ink); color: var(--yellow); padding: .15em .5em; }
#btn-next-wave:disabled { filter: grayscale(1); opacity: .6; }

/* site log */
.log-panel { flex: 1 1 auto; min-height: 120px; display: flex; flex-direction: column; }
.site-log {
  flex: 1 1 auto; min-height: 0; overflow: hidden;
  padding: .55rem .7rem; display: flex; flex-direction: column; gap: .35rem;
  font-family: var(--mono); font-size: .72rem; font-weight: 700; line-height: 1.3;
}
.log-line { display: flex; align-items: flex-start; gap: .5rem; animation: log-in .22s var(--snap) both; }
.log-line i { flex: none; width: 9px; height: 9px; margin-top: .25em; border: 2px solid var(--ink); background: var(--yellow); }
.log-line.c-red i { background: var(--red); }
.log-line.c-green i { background: var(--green); }
.log-line.c-blue i { background: var(--blue); }
.log-line.c-yellow i { background: var(--yellow); }
.log-line span { flex: 1; }
.log-line .log-t { color: var(--steel); margin-left: auto; flex: none; }
@keyframes log-in { from { transform: translateX(-10px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ============ STAGE OVERLAYS ============ */
#banner-layer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 5; }
.wave-banner {
  font-family: var(--display); text-align: center; padding: .5em 1.4em;
  border: var(--border-thick); box-shadow: var(--shadow-lg);
  animation: banner-slam .45s var(--slam) both;
  transform: rotate(-2deg);
}
.wave-banner .wb-big { display: block; font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1; }
.wave-banner .wb-small { display: block; font-family: var(--mono); font-size: .85rem; font-weight: 700; letter-spacing: .14em; margin-top: .3em; }
.wb-yellow { background: var(--yellow); }
.wb-red { background: var(--red); color: var(--white); }
.wb-green { background: var(--green); color: var(--white); }
.wave-banner.out { animation: banner-out .3s ease both; }
@keyframes banner-slam {
  0% { transform: scale(2.4) rotate(-9deg); opacity: 0; }
  60% { transform: scale(.94) rotate(-1deg); opacity: 1; }
  100% { transform: scale(1) rotate(-2deg); }
}
@keyframes banner-out { to { transform: scale(.7) rotate(-4deg); opacity: 0; } }

#boss-bar { position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: min(560px, 82%); z-index: 6; background: var(--white); border: var(--border);
  box-shadow: var(--shadow-sm); padding: .35rem .5rem .45rem; }
#boss-bar[data-hidden="true"] { display: none; }
.boss-name { font-family: var(--display); font-size: .95rem; display: flex; justify-content: space-between; margin-bottom: .3rem; }
.boss-phase { background: var(--ink); color: var(--yellow); padding: .1em .5em; font-size: .8em; }
.boss-track { height: 16px; border: 3px solid var(--ink); background: var(--paper); }
#boss-fill { height: 100%; width: 100%; background: var(--red); transition: width .15s linear; }

#pause-stamp { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(242,238,226,.72); z-index: 8; }
#pause-stamp[data-hidden="true"] { display: none; }
#pause-stamp::after {
  content: 'PAUSED'; font-family: var(--display); font-size: clamp(3rem, 8vw, 5.5rem);
  color: var(--red); border: 6px solid var(--red); padding: .1em .5em;
  transform: rotate(-6deg); background: rgba(255,255,255,.85);
  box-shadow: var(--shadow); animation: stamp-in .25s var(--slam) both;
}
@keyframes stamp-in { from { transform: rotate(-6deg) scale(2); opacity: 0; } }

#wave-toast { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-weight: 700; font-size: .78rem; background: var(--ink);
  color: var(--yellow); padding: .5em 1em; border: 3px solid var(--ink); z-index: 6;
  box-shadow: 3px 3px 0 rgba(0,0,0,.3); }
#wave-toast[data-hidden="true"] { display: none; }

#flash-layer { position: fixed; inset: 0; pointer-events: none; z-index: 1500; opacity: 0; }
#flash-layer.hit { animation: core-flash .3s ease-out; }
@keyframes core-flash { 0% { opacity: 1; background: rgba(244,43,15,.28); } 100% { opacity: 0; } }

/* ============ END SCREEN ============ */
#screen-end { justify-content: center; align-items: center; overflow-y: auto;
  background: rgba(20,20,20,.25); }
.end-wrap { text-align: center; padding: 2rem; max-width: 860px; width: 100%; }
.end-stamp {
  font-family: var(--display); font-size: clamp(2.6rem, 7vw, 5rem); display: inline-block;
  padding: .15em .45em; border: 6px solid var(--ink); transform: rotate(-3deg);
  box-shadow: var(--shadow-lg); margin-bottom: 1.6rem;
  animation: stamp-in .4s var(--slam) both;
}
.end-stamp.win { background: var(--green); color: var(--white); }
.end-stamp.lose { background: var(--red); color: var(--white); }
.end-score-row { display: flex; gap: 1.2rem; justify-content: center; margin-bottom: 1.4rem; flex-wrap: wrap; }
.end-score-cell { position: relative; border: var(--border-thick); background: var(--white);
  box-shadow: var(--shadow); padding: .9rem 2rem; min-width: 200px; }
.es-label { display: block; font-family: var(--mono); font-weight: 700; font-size: .72rem; letter-spacing: .16em; }
.es-val { font-family: var(--display); font-size: 2.8rem; line-height: 1.1; }
.es-best { color: var(--blue); }
.sticker-newbest { position: absolute; top: -16px; right: -20px; background: var(--yellow);
  border: 3px solid var(--ink); font-family: var(--display); font-size: .8rem;
  padding: .3em .7em; transform: rotate(8deg); box-shadow: 3px 3px 0 var(--ink);
  animation: sticker-pop .4s var(--slam) .3s both; }
.sticker-newbest[data-hidden="true"] { display: none; }
@keyframes sticker-pop { from { transform: rotate(8deg) scale(0); } to { transform: rotate(8deg) scale(1); } }
.end-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border: var(--border-thick); background: var(--white); box-shadow: var(--shadow);
  margin-bottom: 1.6rem;
}
.end-stat { padding: .9rem .5rem; border-right: 2px solid var(--ink); }
.end-stat:nth-child(4n) { border-right: none; }
.end-stat:nth-child(n+5) { border-top: 2px solid var(--ink); }
.end-stat .es-label { margin-bottom: .35em; }
.end-stat b { font-family: var(--display); font-size: 1.5rem; }
.end-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ============ MANUAL MODAL ============ */
.modal { position: fixed; inset: 0; z-index: 1000; background: rgba(20,20,20,.5);
  display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.modal[data-hidden="true"] { display: none; }
.modal-box { max-width: 900px; width: 100%; max-height: 88vh; overflow-y: auto;
  animation: screen-in .25s var(--snap) both; }
.modal-close { box-shadow: none; border-width: 2px; width: 32px; height: 32px; }
.manual-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; padding: 1.1rem; }
.manual-h { font-family: var(--display); font-size: 1rem; margin: .8rem 0 .5rem;
  border-bottom: 3px solid var(--ink); padding-bottom: .2em; }
.manual-list { display: flex; flex-direction: column; gap: .45rem; }
.manual-item { display: flex; gap: .7rem; align-items: flex-start; border: 2px solid var(--ink);
  padding: .5rem .6rem; background: var(--paper); font-size: .78rem; line-height: 1.35; }
.manual-item canvas { flex: none; }
.manual-item b { font-family: var(--display); font-size: .82rem; display: block; }
.manual-item .mi-cost { font-family: var(--mono); font-weight: 700; color: var(--blue); }
.manual-keys { width: 100%; border-collapse: collapse; font-size: .8rem; }
.manual-keys td { padding: .35rem .4rem; border-bottom: 2px solid var(--paper); }
.manual-doctrine { list-style: none; font-size: .8rem; line-height: 1.4; }
.manual-doctrine li { padding: .35rem 0 .35rem 1.1rem; position: relative; }
.manual-doctrine li::before { content: '\25A0'; position: absolute; left: 0; color: var(--red); }

/* ============ RESPONSIVE ============ */
@media (max-width: 1060px) {
  #game-main { grid-template-columns: minmax(0,1fr) 270px; }
}
@media (max-width: 880px) {
  body { overflow: auto; }
  #screen-game { position: relative; height: auto; min-height: 100vh; }
  #game-main { grid-template-columns: 1fr; }
  #stage { border-right: none; border-bottom: var(--border-thick); min-height: 52vw; }
  #sidebar { flex-direction: row; flex-wrap: wrap; overflow: visible; }
  #sidebar .panel { flex: 1 1 300px; }
  .sector-grid { grid-template-columns: 1fr; }
  .brief-grid { grid-template-columns: 1fr; }
  .end-stats { grid-template-columns: repeat(2, 1fr); }
  .end-stat:nth-child(2n) { border-right: none; }
  .end-stat:nth-child(4n) { border-right: 2px solid var(--ink); }
  .end-stat:nth-child(n+3) { border-top: 2px solid var(--ink); }
  .manual-cols { grid-template-columns: 1fr; }
  .tb-cell { min-width: 60px; padding: .25rem .5rem; }
  .tb-val { font-size: 1rem; }
}