/* Chaotic Comic Book theme for Brainrot Invasion.
   Loaded after style.css; everything is scoped to #invasion so Home and Practice are untouched.
   Look only: no layout logic lives here. Rules for readability:
   - Chinese is always black Noto Sans SC 900 on white (or pale yellow), never on halftone/rays.
   - Halftone dots and sunburst rays stay in the background.
   - Looping character animations use steps() so the SVGs repaint a few times a second, not 60. */
@import url("https://fonts.googleapis.com/css2?family=Bangers&family=Noto+Sans+SC:wght@700;900&family=Nunito:wght@700;800;900&display=swap");

#invasion {
  --ink: #161616;
  --pow: #fff27a;
  --red: #ff2d2d;
  --pinyin: #d4221b;
  --blue: #3d9bff;
  --grn: #38c25a;
  --zh: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", sans-serif;
  --comic: Bangers, Impact, "Arial Black", "Noto Sans SC", "PingFang SC", sans-serif;
  --body: Nunito, -apple-system, system-ui, "Noto Sans SC", "PingFang SC", sans-serif;
  --shadow: 4px 4px 0 var(--ink);
  --bonk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 214 214'%3E%3Cpolygon points='106,23 121,44 154,15 148,58 179,56 166,83 213,93 170,114 193,139 159,142 181,190 136,163 129,201 106,170 86,187 76,163 38,183 53,142 24,137 42,114 -1,93 46,83 29,53 64,58 54,6 91,44' fill='%23161616'/%3E%3Cpolygon points='100,17 115,38 148,9 142,52 173,50 160,77 207,87 164,108 187,133 153,136 175,184 130,157 123,195 100,164 80,181 70,157 32,177 47,136 18,131 36,108 -7,87 40,77 23,47 58,52 48,0 85,38' fill='%23fff27a' stroke='%23161616' stroke-width='5' stroke-linejoin='round'/%3E%3Cpolygon points='107,41 118,53 143,37 137,67 156,71 149,88 181,100 149,112 160,131 137,133 148,170 118,147 109,171 94,150 79,155 72,141 43,151 56,123 38,115 50,100 22,81 56,77 49,55 72,59 70,21 94,50' fill='%23ff2d2d' stroke='%23161616' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E");
  --mc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 214 214' preserveAspectRatio='none'%3E%3Cpolygon points='107,20 123,29 146,12 151,40 171,43 174,63 206,66 185,91 202,107 185,123 209,149 174,151 177,177 151,174 140,187 123,185 107,210 91,185 72,191 63,174 31,183 40,151 19,143 29,123 -4,107 29,91 16,69 40,63 45,45 63,40 68,12 91,29' fill='%23161616'/%3E%3Cpolygon points='100,13 116,22 139,5 144,33 164,36 167,56 199,59 178,84 195,100 178,116 202,142 167,144 170,170 144,167 133,180 116,178 100,203 84,178 65,184 56,167 24,176 33,144 12,136 22,116 -11,100 22,84 9,62 33,56 38,38 56,33 61,5 84,22' fill='%23ff2d2d' stroke='%23161616' stroke-width='3' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3Cpolygon points='108,22 122,29 142,22 147,43 163,49 165,65 187,74 174,93 183,108 171,122 183,144 157,147 154,167 135,165 123,175 107,174 91,188 78,171 62,171 53,157 29,158 35,135 20,124 26,107 7,91 29,78 24,59 43,53 50,39 65,35 74,15 93,26' fill='%23fff27a' stroke='%23161616' stroke-width='3' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --splat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-8 -8 232 236'%3E%3Cpolygon points='106,26 125,49 167,22 155,71 188,79 166,106 210,140 155,141 160,181 125,163 106,222 87,163 48,185 57,141 30,131 46,106 7,74 57,71 55,36 87,49' fill='%23161616'/%3E%3Cpolygon points='100,20 119,43 161,16 149,65 182,73 160,100 204,134 149,135 154,175 119,157 100,216 81,157 42,179 51,135 24,125 40,100 1,68 51,65 49,30 81,43' fill='%239be86f' stroke='%23161616' stroke-width='6' stroke-linejoin='round'/%3E%3Cpolygon points='111,45 122,62 151,53 140,82 159,93 143,109 163,136 130,132 126,157 105,144 85,174 78,138 51,145 60,118 44,106 57,91 40,66 70,68 75,46 95,56' fill='%2338c25a' stroke='%23161616' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E");
  --blocked: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-8 -8 232 236'%3E%3Cpolygon points='106,26 125,49 167,22 155,71 188,79 166,106 210,140 155,141 160,181 125,163 106,222 87,163 48,185 57,141 30,131 46,106 7,74 57,71 55,36 87,49' fill='%23161616'/%3E%3Cpolygon points='100,20 119,43 161,16 149,65 182,73 160,100 204,134 149,135 154,175 119,157 100,216 81,157 42,179 51,135 24,125 40,100 1,68 51,65 49,30 81,43' fill='%23bfe9ff' stroke='%23161616' stroke-width='6' stroke-linejoin='round'/%3E%3Cpolygon points='111,45 122,62 151,53 140,82 159,93 143,109 163,136 130,132 126,157 105,144 85,174 78,138 51,145 60,118 44,106 57,91 40,66 70,68 75,46 95,56' fill='%233d9bff' stroke='%23161616' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E");
  --cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-3 -3 102 56'%3E%3Cpath d='M12 44 Q0 44 2 33 Q4 21 18 23 Q21 8 38 9 Q52 0 63 13 Q80 8 83 25 Q96 27 93 38 Q91 45 80 45Z' fill='%23fff' stroke='%23161616' stroke-width='3.5' stroke-linejoin='round'/%3E%3Cpath d='M20 38 Q40 42 60 39' fill='none' stroke='%23bfe9ff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  --grass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cpattern id='d' width='7' height='7' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='3.5' cy='3.5' r='1.7' fill='%231f8a3a'/%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M0 12 Q25 2 50 10 T100 10 T150 10 T200 12 V80 H0Z' fill='%235ed06b'/%3E%3Crect y='44' width='200' height='36' fill='url(%23d)' opacity='.7'/%3E%3Cpath d='M0 12 Q25 2 50 10 T100 10 T150 10 T200 12' fill='none' stroke='%23161616' stroke-width='4'/%3E%3Cpath d='M18 22 l4 -9 l3 9 M70 26 l3 -8 l4 8 M128 22 l4 -9 l3 9 M172 28 l3 -8 l4 8' fill='none' stroke='%23161616' stroke-width='2.4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  --dots: radial-gradient(circle, rgba(22, 22, 22, 0.35) 30%, transparent 34%);

  font-family: var(--body);
  color: var(--ink);
  /* comic sky: halftone dots fading out towards the garden */
  background:
    linear-gradient(rgba(176, 232, 255, 0) 20%, #b9ecff 78%),
    radial-gradient(circle, #4fb6f0 28%, transparent 32%) 0 0 / 18px 18px,
    linear-gradient(#5cc6ff, #a8e6ff 70%, #c9f0ff);
}

/* ---------- sky: slowly turning sunburst rays (one composited layer) + inked clouds ---------- */
#invasion .inv-field::before {
  content: ""; position: absolute; left: 50%; top: 34%; width: 130vmax; height: 130vmax;
  margin: -65vmax 0 0 -65vmax; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(rgba(255, 242, 122, 0.42) 0 5deg, transparent 5deg 13deg);
  -webkit-mask: radial-gradient(circle, #000 6%, transparent 52%);
  mask: radial-gradient(circle, #000 6%, transparent 52%);
  will-change: transform; animation: c-spin 120s linear infinite;
}
@keyframes c-spin { to { transform: rotate(360deg); } }
#invasion .inv-cloud {
  width: 170px; height: 92px; border-radius: 0; opacity: 1;
  background: var(--cloud) center / contain no-repeat;
}
#invasion .inv-cloud::before { display: none; }

/* the bell's freeze: an icy wash instead of a hue-rotate filter over the whole field */
#invasion .inv-field.frozen { filter: none; }
#invasion .inv-field.frozen::after {
  content: "FREEZE!"; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  display: flex; justify-content: center; padding-top: 86px;
  font: 44px/1 var(--comic); letter-spacing: 0.04em; color: #fff;
  -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--ink);
  background: linear-gradient(rgba(190, 240, 255, 0.45), rgba(150, 220, 255, 0.25));
  box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 0.7), inset 0 0 0 14px var(--ink);
}

/* ---------- HUD ---------- */
#invasion .inv-hud { gap: 12px; }
#invasion .icon-btn {
  background: #fff; border: 3px solid var(--ink); border-radius: 14px; box-shadow: var(--shadow);
  width: 58px; height: 58px; rotate: -3deg;
}
#invasion #inv-pause-btn { rotate: 3deg; }
#invasion .icon-btn:active, #invasion .big-btn:active:not(:disabled), #invasion .py-key:active:not(:disabled) {
  transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink);
}
#invasion .inv-level {
  font: 28px/1 var(--comic); letter-spacing: 0.04em; color: var(--ink); text-shadow: none;
  background: #fff; border: 3px solid var(--ink); border-radius: 8px; padding: 8px 14px 6px;
  box-shadow: var(--shadow); rotate: -2deg; white-space: nowrap;
}
#invasion .inv-combo {
  font: 34px/1 var(--comic); letter-spacing: 0.04em; color: var(--red);
  -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--ink);
  rotate: 4deg; transform-origin: left center; white-space: nowrap;
}
#invasion .inv-items { font: 800 22px/1 var(--body); }
#invasion .relic-chip { background: #fff; border: 3px solid var(--ink); border-radius: 12px; box-shadow: 3px 3px 0 var(--ink); }
#invasion .relic-chip:nth-child(odd) { rotate: -3deg; }
#invasion .relic-chip:nth-child(even) { rotate: 2deg; }
#invasion .relic-chip small { background: var(--red); border: 2px solid var(--ink); font-family: var(--body); }
#invasion .relic-tip { border: 3px solid var(--ink); border-radius: 12px; box-shadow: 5px 5px 0 var(--ink); }
#invasion .relic-tip b { font: 22px/1.1 var(--comic); letter-spacing: 0.04em; }
#invasion .relic-tip span { color: #444; font-weight: 700; }
#invasion .inv-level.ending { color: #fff; background: var(--red); }
#invasion .inv-toast {
  background: var(--pow); border: 3px solid var(--ink); border-radius: 6px; box-shadow: 5px 5px 0 var(--ink);
  font-family: var(--body); font-weight: 900; color: var(--ink); rotate: -1deg;
}
#invasion .inv-aura {
  font: 30px/1 var(--comic); letter-spacing: 0.04em; color: var(--ink);
  background: var(--pow); border: 3px solid var(--ink); border-radius: 10px; padding: 8px 16px 6px;
  box-shadow: var(--shadow); rotate: -1.5deg;
}
#invasion .inv-bell { background: var(--pow); border: 3px solid var(--ink); box-shadow: var(--shadow); rotate: 3deg; }

/* ---------- the Brainrot Gang ---------- */
#invasion .enemy .critter { filter: none; overflow: visible; }
#invasion .critter, #invasion .mascot-svg, #invasion .plant-svg { overflow: visible; }

/* which face shows (the SVG hides panic/bonk by default) */
#invasion .enemy.dropping .face-calm, #invasion .enemy.caught .face-calm,
#invasion .enemy.torn .face-calm, #invasion .enemy.splat .face-calm { display: none; }
#invasion .enemy.dropping .face-panic, #invasion .enemy.caught .face-panic,
#invasion .enemy.torn .face-panic, #invasion .enemy.splat .face-panic { display: inline; }
#invasion .enemy.boom .face-calm, #invasion .enemy.boom .face-panic,
#invasion .enemy.blocked .face-calm, #invasion .enemy.blocked .face-panic { display: none; }
#invasion .enemy.boom .face-bonk, #invasion .enemy.blocked .face-bonk { display: inline; }

/* little loops inside the SVGs: steps() keeps repaints cheap with 6 brainrots on screen */
#invasion .pupil { animation: c-roll 1.9s steps(4) infinite; }
#invasion .pupil.roll2 { animation: c-roll2 1.3s steps(3) infinite; }
#invasion .wag { transform-box: fill-box; transform-origin: 50% 0; animation: c-wag 0.5s steps(2) infinite alternate; }
#invasion .flap { transform-box: fill-box; transform-origin: 0 0; animation: c-wag 0.24s steps(2) infinite alternate; }
#invasion .kick { transform-box: fill-box; transform-origin: 50% 0; animation: c-kick 0.36s steps(2) infinite alternate; }
#invasion .kick.k2 { animation-direction: alternate-reverse; }
#invasion .enemy.croc .prop, #invasion .prop { opacity: 1; transform-box: fill-box; transform-origin: center; animation: c-prop 0.16s steps(2) infinite; }
#invasion .swing { transform-box: fill-box; transform-origin: 15% 95%; animation: c-swing 1.2s steps(3) infinite alternate; }
#invasion .swing.fast { animation-duration: 0.4s; }
#invasion .sweat { animation: c-drip 1.2s steps(4) infinite; }
#invasion .stars { transform-box: fill-box; transform-origin: center; animation: c-wag 0.3s steps(2) infinite alternate; }
#invasion .enemy .legs { animation: none; }
#invasion .enemy.ballerina .critter { animation: c-twirl 2.6s ease-in-out infinite; }
@keyframes c-roll { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(2px, -1.5px); } 50% { transform: translate(-1.5px, 2px); } 75% { transform: translate(1.5px, 1.5px); } }
@keyframes c-roll2 { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(-2px, 1px); } 66% { transform: translate(2px, 2px); } }
@keyframes c-wag { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
@keyframes c-kick { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes c-prop { 50% { transform: scaleY(0.15); } }
@keyframes c-swing { from { transform: rotate(-8deg); } to { transform: rotate(14deg); } }
@keyframes c-drip { from { transform: translate(0, 0); opacity: 1; } to { transform: translate(3px, -10px); opacity: 0; } }
@keyframes c-twirl { 0%, 40%, 100% { transform: scaleX(1) rotate(-5deg); } 50%, 90% { transform: scaleX(-1) rotate(5deg); } }

/* free fall: speed lines above, jittery body, a scream on the side */
#invasion .enemy.dropping .critter { animation: c-jitter 0.16s steps(2) infinite; }
#invasion .enemy.dropping.croc .critter { rotate: 38deg; }
#invasion .enemy.dropping.ballerina .critter { animation: c-jitter 0.16s steps(2) infinite; }
#invasion .enemy.dropping::before {
  content: ""; position: absolute; left: 18%; right: 18%; top: 4%; height: 46%; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 16px, var(--ink) 16px 19px, transparent 19px 30px);
  -webkit-mask: linear-gradient(transparent, #000 85%); mask: linear-gradient(transparent, #000 85%);
}
#invasion .enemy.dropping::after {
  position: absolute; left: -18%; top: 52%; rotate: -14deg; pointer-events: none; white-space: nowrap;
  font: 22px/1 var(--comic); letter-spacing: 0.04em; color: #fff;
  -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--red);
}
#invasion .enemy.dropping.shark::after { content: "AAAH!!"; }
#invasion .enemy.dropping.croc::after { content: "NYOOOM!"; }
#invasion .enemy.dropping.ballerina::after { content: "WHEEE!"; }
#invasion .enemy.dropping.log::after { content: "THUMP?!"; }
@keyframes c-jitter { from { translate: 0 0; } to { translate: 2px 1.5px; } }

/* ---------- the question = the parachute canopy ---------- */
#invasion .enemy .sign {
  --panel: var(--red);
  color: var(--ink); border: 4px solid var(--ink); padding: 10px 24px 6px; box-shadow: 4px 5px 0 var(--ink);
  /* red side panels with halftone (three dot columns per side); the middle, where the words are, stays plain white */
  background:
    linear-gradient(90deg, transparent 13px, var(--ink) 13px 16px, transparent 16px calc(100% - 16px), var(--ink) calc(100% - 16px) calc(100% - 13px), transparent calc(100% - 13px)),
    var(--dots) 0 0 / 5px 5px repeat-y, var(--dots) 5px 0 / 5px 5px repeat-y, var(--dots) 10px 0 / 5px 5px repeat-y,
    var(--dots) right 0 top 0 / 5px 5px repeat-y, var(--dots) right 5px top 0 / 5px 5px repeat-y, var(--dots) right 10px top 0 / 5px 5px repeat-y,
    linear-gradient(var(--panel), var(--panel)) left / 15px 100% no-repeat,
    linear-gradient(var(--panel), var(--panel)) right / 15px 100% no-repeat,
    #fff;
}
#invasion .enemy.nemesis .sign { border-color: var(--ink); --panel: #a259ff; }
#invasion .enemy.sliceable .sign { box-shadow: 0 0 0 4px var(--pow), 0 0 0 7px var(--ink), 6px 8px 0 7px var(--ink); }
#invasion .sign-hanzi { font-family: var(--zh); font-weight: 900; color: var(--ink); letter-spacing: 0.02em; }
#invasion .sign-pinyin { font-family: var(--body); font-weight: 900; color: var(--pinyin); letter-spacing: 0.01em; }
#invasion .sign-meaning { font-family: var(--body); font-weight: 800; color: var(--ink); }
#invasion .sign-ear { font-family: var(--body); font-weight: 900; color: var(--ink); }
#invasion .sign-kind {
  top: -16px; right: -16px; width: 34px; height: 34px; padding: 0; display: grid; place-items: center;
  background: var(--pow); color: var(--ink); border: 3px solid var(--ink); border-radius: 50%;
  font-size: 17px; box-shadow: 2px 2px 0 var(--ink); rotate: 10deg;
}
#invasion .sign-meter { gap: 4px; margin-top: 3px; }
#invasion .sign-meter i { width: 9px; height: 9px; background: #fff; border: 2px solid var(--ink); }
#invasion .sign-meter i.on { background: var(--blue); }
#invasion .enemy .strings path { stroke: var(--ink); stroke-width: 2.4; }
#invasion .enemy .hp {
  font-size: 13px; line-height: 1; background: #fff; border: 2.5px solid var(--ink); border-radius: 999px;
  padding: 3px 6px; margin-top: -4px; box-shadow: 2px 2px 0 var(--ink);
}
/* caught: a yellow "selected" ring around the canopy */
#invasion .enemy.caught .sign { border-color: var(--ink); box-shadow: 0 0 0 5px var(--pow), 0 0 0 8px var(--ink), 6px 8px 0 8px var(--ink); }
/* torn: RIIP! sticker instead of the 💥 */
#invasion .enemy.torn .sign::after {
  content: "RIIIP!"; left: -18px; top: -14px; font: 17px/1 var(--comic); letter-spacing: 0.04em;
  color: #fff; background: var(--red); border: 2.5px solid var(--ink); padding: 3px 6px 2px; rotate: -14deg;
  box-shadow: 2px 2px 0 var(--ink);
}
#invasion .enemy.torn .critter { animation: c-jitter 0.2s steps(2) infinite; }

/* ---------- BONK!! / SPLAT! / BLOCKED! ---------- */
#invasion .enemy.boom { animation: c-boom 0.58s ease-out forwards; }
#invasion .enemy.boom .sign, #invasion .enemy.boom .strings { animation: c-chute-off 0.45s ease-in forwards; }
#invasion .enemy.boom .critter { animation: c-squash 0.3s ease-out; }
/* the starburst sits behind the brainrot, the lettering on top of it */
#invasion .enemy.boom::before, #invasion .enemy.splat::before, #invasion .enemy.blocked::before {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 140%; aspect-ratio: 1; translate: -50% 17%;
  top: auto; right: auto; height: auto; -webkit-mask: none; mask: none;   /* in case it was still dropping */
  z-index: -1; pointer-events: none; background: center / contain no-repeat;
  animation: c-burst 0.58s ease-out forwards;
}
#invasion .enemy.boom::before { background-image: var(--bonk); }
#invasion .enemy.splat::before { background-image: var(--splat); }
#invasion .enemy.blocked::before { background-image: var(--blocked); }
#invasion .enemy.boom::after, #invasion .enemy.splat::after, #invasion .enemy.blocked::after {
  position: absolute; left: 50%; top: auto; bottom: 52%; translate: -50% 0; rotate: -8deg; z-index: 3;
  pointer-events: none; white-space: nowrap;
  font: 44px/1 var(--comic); letter-spacing: 0.04em; color: var(--pow);
  -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--ink);
  animation: c-pow 0.58s ease-out forwards;
}
#invasion .enemy.boom:is(.shark, .croc, .ballerina, .log)::after { content: "BONK!!"; }
#invasion .enemy.splat:is(.shark, .croc, .ballerina, .log)::after { content: "SPLAT!"; color: #9be86f; font-size: 38px; }
#invasion .enemy.blocked:is(.shark, .croc, .ballerina, .log)::after { content: "BLOCK!"; color: #bfe9ff; font-size: 38px; }
#invasion .enemy.splat { animation: c-fade 0.58s ease-in forwards; }
#invasion .enemy.splat .critter { transform-origin: 50% 100%; animation: c-splat 0.4s ease-in forwards; }
@keyframes c-boom { 0% { scale: 1; } 14% { scale: 1.16; } 32% { scale: 1; } 72% { opacity: 1; } 100% { opacity: 0; scale: 1.04; } }
@keyframes c-chute-off { to { translate: 0 -70px; rotate: -24deg; opacity: 0; } }
@keyframes c-squash { 0% { transform: scale(1); } 30% { transform: scale(1.18, 0.78); } 65% { transform: scale(0.94, 1.06); } 100% { transform: scale(1); } }
@keyframes c-burst { 0% { scale: 0.2; rotate: -25deg; } 30% { scale: 1.12; rotate: 6deg; } 45% { scale: 1; rotate: 0deg; } 100% { scale: 1.02; } }
@keyframes c-pow { 0% { scale: 0.3; } 30% { scale: 1.2; } 45% { scale: 1; } 100% { scale: 1.05; translate: -50% -14px; } }
@keyframes c-splat { to { transform: scale(1.35, 0.35); } }
@keyframes c-fade { 70% { opacity: 1; } to { opacity: 0; } }

/* ---------- floating "+12 ✨" and pickups ---------- */
#invasion .pop {
  font: 32px/1 var(--comic); letter-spacing: 0.04em; color: var(--pow);
  -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--ink);
}
/* the brain-upgrade pop shows a Chinese word: black on white, no outline */
#invasion .pop.upgrade {
  font: 900 24px/1.1 var(--body); color: var(--ink); -webkit-text-stroke: 0; text-shadow: none;
  background: #fff; border: 3px solid var(--ink); border-radius: 12px; padding: 6px 12px; box-shadow: var(--shadow);
}
#invasion .coin {
  background: var(--dots) 0 0 / 6px 6px, radial-gradient(circle at 35% 30%, #fffbd0, var(--pow) 55%, #ffd000);
  border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
}
#invasion .zap { box-shadow: none; outline: 2px solid var(--ink); }

/* ---------- 没错！: black Chinese on a yellow starburst ---------- */
#invasion .inv-meicuo {
  font-family: var(--zh); font-weight: 900; color: var(--ink); -webkit-text-stroke: 0; text-shadow: none;
  font-size: min(15vw, 128px); line-height: 1; padding: 0.55em 0.9em 0.6em;
  background: var(--mc) center / 100% 100% no-repeat;
}

/* ---------- banners: the yellow caption box ---------- */
#invasion .inv-banner {
  background: var(--pow); border: 4px solid var(--ink); border-radius: 4px; box-shadow: 8px 8px 0 var(--ink);
  rotate: -1.5deg; padding: 14px 32px;
}
#invasion .inv-banner-title { font: 52px/1.1 var(--comic); letter-spacing: 0.04em; color: var(--ink); }
#invasion .inv-banner-sub { font: 800 22px/1.3 var(--body); color: var(--ink); }

/* ---------- Cappuccino Capybara ---------- */
#invasion .inv-mascot.panic .m-calm { display: none; }
#invasion .inv-mascot.panic .m-panic { display: inline; }
#invasion .inv-mascot .steam { animation: c-steam 2s steps(5) infinite; }
@keyframes c-steam { 0% { transform: translateY(4px); opacity: 0; } 40% { opacity: 0.9; } 100% { transform: translateY(-8px); opacity: 0; } }
#invasion .m-hat { top: 8%; }
#invasion .bubble {
  bottom: 96%; left: 52%; background: #fff; color: var(--ink); border: 3px solid var(--ink);
  border-radius: 20px 20px 20px 6px; padding: 8px 14px; box-shadow: var(--shadow);
  font: 900 20px/1.15 var(--body); z-index: 2;
}
#invasion .bubble small { display: block; font: 800 14px/1.2 var(--body); color: #555; margin-top: 2px; }
#invasion .bubble::before, #invasion .bubble::after {
  content: ""; position: absolute; left: 12px; top: 100%; width: 0; height: 0; border-style: solid;
}
#invasion .bubble::before { border-width: 16px 16px 0 0; border-color: var(--ink) transparent transparent; margin-top: 1px; left: 9px; }
#invasion .bubble::after { border-width: 10px 10px 0 0; border-color: #fff transparent transparent; margin-top: -2px; left: 13px; }

/* ---------- the garden ---------- */
#invasion .inv-garden { background: var(--grass) left bottom / 240px 50% repeat-x; }
#invasion .plant .flower { transform-origin: 50px 38px; animation: c-sway 3s steps(6) infinite; }
@keyframes c-sway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(8deg); } }
#invasion .plant.dead .fl-ok { display: none; }
#invasion .plant.dead .fl-dead { display: inline; }
#invasion .plant.dead { filter: grayscale(0.9) brightness(0.85); }

/* ---------- boss at the top ---------- */
#invasion .boss-name {
  font: 30px/1 var(--comic); letter-spacing: 0.05em; color: var(--pow);
  -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--ink);
}
#invasion .boss-hp { height: 20px; background: #fff; border: 3px solid var(--ink); border-radius: 6px; box-shadow: 3px 3px 0 var(--ink); }
#invasion .boss-hp-bar { background: var(--dots) 0 0 / 6px 6px, linear-gradient(var(--red), #d0141b); border-radius: 0; border-right: 3px solid var(--ink); }
#invasion .boss-body { opacity: 1; }
#invasion .boss-body .critter { filter: drop-shadow(6px 6px 0 rgba(22, 22, 22, 0.85)); }
/* faces: flash X-eyes on every hit, keep them when it's beaten */
#invasion .boss .face-bonk { display: inline; opacity: 0; }
#invasion .boss.hit .face-bonk { animation: c-show 0.7s steps(1); }
#invasion .boss.hit .face-calm { animation: c-hide 0.7s steps(1); }
#invasion .boss.defeated .face-bonk { opacity: 1; animation: none; }
#invasion .boss.defeated .face-calm, #invasion .boss.escaped .face-calm { display: none; }
#invasion .boss.escaped .face-panic { display: inline; }
@keyframes c-show { 0%, 99% { opacity: 1; } }
@keyframes c-hide { 0%, 99% { opacity: 0; } }

/* ---------- writing panel + quiz panel ---------- */
#invasion .inv-panel { background: rgba(22, 22, 22, 0.35); }
#invasion .ip-card {
  background: #fff; border: 5px solid var(--ink); border-radius: 18px; box-shadow: 10px 10px 0 var(--ink);
}
#invasion #inv-panel .ip-card::before {
  content: "WRITE IT!"; position: absolute; left: 18px; top: -20px; rotate: -3deg; pointer-events: none;
  font: 22px/1 var(--comic); letter-spacing: 0.05em; color: var(--ink);
  background: var(--pow); border: 3px solid var(--ink); padding: 6px 12px 4px; box-shadow: 3px 3px 0 var(--ink);
}
#invasion .ip-pinyin { font-family: var(--body); font-weight: 900; color: var(--pinyin); }
#invasion .ip-meaning { font-family: var(--body); font-weight: 800; color: var(--ink); }
#invasion .ip-listen { font: 30px/1.1 var(--comic); letter-spacing: 0.04em; color: var(--ink); }
/* 田字格 boxes: only the frame changes; the grid lines and Hanzi Writer drawing stay as they are */
#invasion .box { border: 4px solid var(--ink); border-radius: 10px; box-shadow: 4px 4px 0 var(--ink); }
#invasion .box.active { border-color: var(--ink); box-shadow: 0 0 0 5px var(--pow), 0 0 0 8px var(--ink); }
#invasion .box.done { border-color: var(--grn); box-shadow: 4px 4px 0 var(--ink); }
#invasion .ip-timer { height: 20px; background: #fff; border: 3px solid var(--ink); border-radius: 8px; }
#invasion .ip-timer-bar { background: var(--grn); border-radius: 0; border-right: 3px solid var(--ink); }
#invasion .ip-timer-bar.low { background: var(--red); }
#invasion .ip-flash {
  font: 44px/1 var(--comic); letter-spacing: 0.04em; color: var(--blue);
  -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--ink);
}

#invasion .ic-task {
  font: 30px/1.1 var(--comic); letter-spacing: 0.04em; color: var(--ink);
  background: var(--pow); border: 3px solid var(--ink); padding: 6px 14px 4px; box-shadow: 3px 3px 0 var(--ink); rotate: -1.5deg;
}
#invasion .ic-hanzi, #invasion .py-hz, #invasion .py-zh { font-family: var(--zh); font-weight: 900; color: var(--ink); }
#invasion .ic-sub { font-family: var(--body); font-weight: 900; color: var(--pinyin); }
#invasion .ic-choice { font-family: var(--body); font-weight: 900; }
#invasion .py-slot { background: #fff; border: 3px dashed var(--ink); border-radius: 12px; }
#invasion .py-slot.active { border-style: solid; border-color: var(--ink); background: #fffbd6; box-shadow: 4px 4px 0 var(--ink); }
#invasion .py-slot.done { border-style: solid; border-color: var(--ink); background: #e3f9e7; }
#invasion .py-val { font-family: var(--body); font-weight: 900; color: var(--pinyin); }
#invasion .py-slot.done .py-val { color: #1f8a3a; }
#invasion .py-step { font-family: var(--body); font-weight: 800; }
#invasion .py-step b { font: 26px/1 var(--comic); letter-spacing: 0.04em; color: var(--red); }
#invasion .py-key {
  font-family: var(--body); font-weight: 900; background: #fff; color: var(--ink);
  border: 3px solid var(--ink); border-radius: 12px; box-shadow: var(--shadow);
}
#invasion .py-key.sound { background: #e6f4ff; border-color: var(--ink); }
#invasion .py-key.tone { background: #fffbd6; border-color: var(--ink); }
#invasion .py-key.tone small { color: #555; }
#invasion .py-key.go { background: var(--grn); border-color: var(--ink); color: #fff; text-shadow: 1px 1px 0 var(--ink); }

/* ---------- buttons, chips and cards on every sheet ---------- */
#invasion .big-btn {
  background: #fff; color: var(--ink); border: 3px solid var(--ink); border-radius: 14px;
  box-shadow: var(--shadow); font-family: var(--body); font-weight: 900;
}
#invasion .big-btn.speak, #invasion #ip-hint { background: var(--pow); border-color: var(--ink); }
#invasion .big-btn.next { background: var(--grn); border-color: var(--ink); color: #fff; text-shadow: 2px 2px 0 var(--ink); }
#invasion .big-btn.ghost { background: transparent; border-color: transparent; box-shadow: none; }
#invasion .inv-go, #invasion .bi-go, #invasion #shop-next, #invasion #pause-resume, #invasion #inv-again {
  font-family: var(--comic); font-weight: 400; letter-spacing: 0.05em; font-size: 28px;
}
#invasion .inv-go { font-size: 36px; }

#invasion .sheet { background: radial-gradient(circle, rgba(22, 22, 22, 0.18) 30%, transparent 34%) 0 0 / 10px 10px, rgba(22, 22, 22, 0.5); }
#invasion .sheet-card {
  background: #fff; border: 5px solid var(--ink); border-radius: 18px; box-shadow: 10px 10px 0 var(--ink);
}
#invasion .inv-title {
  font: 42px/1.1 var(--comic); letter-spacing: 0.04em; color: var(--ink); text-shadow: 3px 3px 0 var(--pow);
}
#invasion .inv-story { font-family: var(--body); font-weight: 700; }
#invasion .inv-story b { font-weight: 900; background: var(--pow); padding: 0 4px; }
#invasion .inv-best { font-family: var(--body); font-weight: 900; color: var(--pinyin); }
#invasion .chip {
  background: #fff; color: var(--ink); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--body); font-weight: 800;
}
#invasion .chip.on { background: var(--pow); border-color: var(--ink); }
#invasion .chip.on::before { color: #1f8a3a; }
#invasion .chip.cosmetic.on::before { content: ""; }
#invasion .chip small { color: #555; }
#invasion .inv-stats b { font: 52px/1.05 var(--comic); letter-spacing: 0.03em; color: var(--ink); }
#invasion .inv-stats span { font-family: var(--body); font-weight: 800; color: #555; }
#invasion .intro-dots i { background: #fff; border: 2px solid var(--ink); }
#invasion .intro-dots i.on { background: var(--red); }
#invasion .trophy { border: 3px solid var(--ink); border-radius: 12px; }
#invasion .trophy.got { background: var(--pow); border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }

/* quests, relic picks (stage + pause) */
#invasion .quests li { background: #fffbd6; border: 2.5px solid var(--ink); border-radius: 8px; box-shadow: 2px 2px 0 var(--ink); font-weight: 800; }
#invasion .quests li em { color: var(--red); }
#invasion .shop-item.relic-pick { background: #e3f9e7; border-color: var(--ink); box-shadow: 5px 5px 0 var(--ink); }
#invasion .shop-item.relic-pick.rare { background: var(--pow); border-color: var(--ink); box-shadow: 5px 5px 0 var(--red), 5px 5px 0 3px var(--ink); }
#invasion .ip-phase { font: 30px/1.1 var(--comic); letter-spacing: 0.04em; color: var(--ink); }

/* pause */
#invasion .pause-h { font: 26px/1 var(--comic); letter-spacing: 0.04em; }
#invasion .relic { background: #fff; border: 3px solid var(--ink); border-radius: 12px; box-shadow: 3px 3px 0 var(--ink); }
#invasion .relic span small { color: var(--red); }

/* level-complete stage: a still comic splash page */
#invasion .sheet.stage {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.55), transparent 45%),
    radial-gradient(circle, rgba(22, 22, 22, 0.16) 30%, transparent 34%) 0 0 / 12px 12px,
    repeating-conic-gradient(from 0deg at 50% 0%, #ffd000 0 6deg, #ffb000 6deg 12deg);
}
#invasion .shop-card { rotate: -0.4deg; }
#invasion .shop-card .shop-head { border-top: 0; margin-top: 0; padding-top: 0; }
#invasion .shop-sub { font-family: var(--body); font-weight: 800; color: #555; }
#invasion .shop-item {
  background: #fff; border: 3px solid var(--ink); border-radius: 14px; box-shadow: 5px 5px 0 var(--ink);
  font-family: var(--body);
}
#invasion .shop-item:nth-child(3n+1) { rotate: -1.2deg; }
#invasion .shop-item:nth-child(3n+2) { rotate: 0.8deg; }
#invasion .shop-item:nth-child(3n) { rotate: -0.5deg; }
#invasion .shop-item:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--ink); }
#invasion .shop-item.bought { background: #e3f9e7; border-color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }
#invasion .si-name { font: 24px/1.1 var(--comic); letter-spacing: 0.04em; color: var(--ink); }
#invasion .si-name small { color: var(--red); }
#invasion .si-desc { color: #444; font-weight: 700; }
#invasion .si-price { font: 26px/1 var(--comic); letter-spacing: 0.04em; color: var(--ink); background: var(--pow); border: 2.5px solid var(--ink); border-radius: 8px; padding: 5px 10px 3px; }
#invasion .shop-item.bought .si-price { color: #fff; background: var(--grn); }
#invasion .shop-head .inv-aura { rotate: 2deg; }

/* ---------- 📖 the intro story: a derpy comic book (games/invasion/story.js) ----------
   cover, then three comic pages (p3a: a tall panel + two · lineup: three tall · p3b: a wide one + two),
   each followed by a full-screen splash (full). Panels pop in as they're read. */
#invasion .sheet.story { z-index: 26; padding: 16px; background: #f4ecd8; display: block; overflow-y: auto; }
#invasion .story-book { position: relative; width: min(1180px, 100%); height: 100%; margin: 0 auto; }
#invasion .story-skip {
  position: fixed; left: 50%; translate: -50% 0; bottom: 10px; z-index: 5; width: auto; min-height: 44px; padding: 8px 18px;
  font: 24px/1 var(--comic); letter-spacing: 0.05em; box-shadow: 4px 4px 0 var(--ink);
}
#invasion .story-skip.go { bottom: 12px; font-size: 34px; padding: 14px 26px 10px; background: var(--grn); color: #fff; text-shadow: 2px 2px 0 var(--ink); animation: st-pop 0.45s cubic-bezier(.2, 1.6, .4, 1) both; }
/* cover */
#invasion .s-cover {
  position: absolute; inset: 0 0 58px; overflow: hidden; border: 6px solid var(--ink); box-shadow: 8px 8px 0 var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background:
    radial-gradient(circle, rgba(22, 22, 22, 0.14) 30%, transparent 34%) 0 0 / 12px 12px,
    repeating-conic-gradient(from 0deg at 50% 50%, #ffd000 0 8deg, #ffb000 8deg 16deg);
}
#invasion .s-cover[hidden] { display: none; }
#invasion .s-issue { position: absolute; left: 0; top: 0; background: var(--ink); color: var(--pow); font: 26px/1 var(--comic); letter-spacing: 0.08em; padding: 10px 18px 7px; }
#invasion .s-logo { font: min(110px, 13vw)/0.88 var(--comic); letter-spacing: 0.03em; text-align: center; color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; text-shadow: 6px 6px 0 var(--red), 6px 6px 0 2px var(--ink); }
#invasion .s-logo span { display: block; }
#invasion .s-logo span + span { color: var(--pow); }
#invasion .s-cover .s-logo { animation: st-slam 0.5s 0.1s cubic-bezier(.2, 1.6, .4, 1) both; z-index: 1; }
#invasion .s-sub { font: 34px/1 var(--comic); letter-spacing: 0.06em; background: #fff; border: 4px solid var(--ink); padding: 8px 18px 5px; rotate: -2deg; z-index: 1; }
#invasion .s-cover .s-who { position: absolute; }
#invasion .s-cover-kaka { width: min(180px, 16vw); left: 4%; bottom: 3%; }
#invasion .s-cover-l { width: min(230px, 20vw); left: 5%; top: 18%; rotate: -14deg; animation: ts-in-l 0.7s 0.3s cubic-bezier(.3, 1.3, .5, 1) both; }
#invasion .s-cover-r { width: min(250px, 22vw); right: 4%; top: 22%; rotate: 12deg; animation: ts-in-r 0.7s 0.45s cubic-bezier(.3, 1.3, .5, 1) both; }
#invasion .s-read { width: auto; min-height: 0; margin-top: 18px; padding: 16px 32px 12px; font: 38px/1 var(--comic); letter-spacing: 0.05em; box-shadow: 5px 5px 0 var(--ink); z-index: 1; animation: st-pop 0.45s 0.7s cubic-bezier(.2, 1.6, .4, 1) backwards; }
/* pages */
#invasion .s-page { position: absolute; inset: 0 0 58px; display: grid; gap: 16px; transform-origin: 0 50%; transition: transform 0.6s ease-in, opacity 0.6s; }
#invasion .s-page[hidden] { display: none; }
#invasion .s-page.p3a { grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr 1fr; }
#invasion .s-page.p3a .sp-panel:nth-child(1) { grid-row: 1 / 3; }
#invasion .s-page.lineup { grid-template-columns: 1fr 1fr 1fr; }
#invasion .s-page.p3b { grid-template-columns: 1fr 1fr; grid-template-rows: 1.1fr 1fr; }
#invasion .s-page.p3b .sp-panel:nth-child(1) { grid-column: 1 / 3; }
#invasion .s-page.full { grid-template-columns: 1fr; }
#invasion .s-page.full .sp-panel { transform: scale(1.06); }
#invasion .s-page.full .sp-panel.on { transform: none; }
#invasion .s-page.full .s-cap { font-size: 28px; padding: 12px 20px 10px; }
#invasion .s-page.full .s-bal { right: 28px; bottom: 28px; max-width: min(460px, 70%); }
#invasion .s-page.full .s-bal .zh { font-size: 34px; }
#invasion .s-page.full .s-bal .py { font-size: 17px; }
#invasion .s-page.full .s-bal .en { font-size: 15px; }
#invasion .s-page.lineup .s-cap { font-size: 17px; }
#invasion .s-page.lineup .s-bal { left: 10px; right: 10px; max-width: none; bottom: 64px; }
#invasion .s-page.turned { transform: perspective(1600px) rotateY(-100deg); opacity: 0; }
#invasion .s-folio { position: absolute; right: 8px; bottom: -36px; font: 18px/1 var(--comic); letter-spacing: 0.1em; color: #8a7b55; }
#invasion .sp-panel { position: relative; overflow: hidden; min-height: 0; border: 6px solid var(--ink); background: #fff; box-shadow: 6px 6px 0 var(--ink); opacity: 0; transform: scale(0.92); transition: opacity 0.35s, transform 0.45s cubic-bezier(.2, 1.6, .4, 1); }
#invasion .sp-panel.on { opacity: 1; transform: none; }
#invasion .s-cap { position: absolute; left: -4px; top: -4px; z-index: 4; max-width: 92%; background: var(--pow); border: 4px solid var(--ink); padding: 8px 14px 6px; font: 900 19px/1.3 var(--body); box-shadow: 4px 4px 0 var(--ink); }
#invasion .s-bal {
  position: absolute; right: 14px; bottom: 16px; z-index: 4; max-width: min(330px, 70%); background: #fff; border: 4px solid var(--ink); border-radius: 24px;
  padding: 6px 14px 8px; box-shadow: 4px 4px 0 var(--ink); display: flex; flex-direction: column;
}
#invasion .s-bal::after { content: ""; position: absolute; bottom: -24px; left: 40px; border: 12px solid transparent; border-top: 18px solid var(--ink); }
#invasion .s-bal.angry { background: #ffe0e0; border-radius: 10px; }
#invasion .s-bal .zh { font-family: var(--zh); font-weight: 900; font-size: 24px; line-height: 1.25; }
#invasion .s-bal .py { font-weight: 900; font-size: 14px; color: #c0392b; }
#invasion .s-bal .en { font-weight: 800; font-size: 13px; color: #555; }
#invasion .sp-panel.in .s-cap { animation: st-rise 0.4s ease-out both; }
/* the balloon, and anything marked s-on-say, pops in when the line is said */
#invasion .sp-panel .s-bal, #invasion .sp-panel .s-on-say { opacity: 0; }
#invasion .sp-panel.say .s-bal, #invasion .sp-panel.say .s-on-say { opacity: 1; animation: st-pop 0.35s cubic-bezier(.2, 1.6, .4, 1) both; }
#invasion .sp-panel.say .say-d2 { animation-delay: 0.35s; }
#invasion .sp-panel.say .say-d3 { animation-delay: 0.7s; }
#invasion .sp-panel.say.shake-on-say .s-art { animation: s-shake 0.35s steps(4) 3; }
/* panel art */
#invasion .s-art { position: absolute; inset: 0; overflow: hidden; }
#invasion .s-sky-day { background: radial-gradient(circle, rgba(22, 22, 22, 0.1) 30%, transparent 34%) 0 0 / 10px 10px, linear-gradient(#bfe2ff, #8fd0ff); }
#invasion .s-sky-night { background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 30%, transparent 34%) 0 0 / 12px 12px, radial-gradient(circle at 50% 20%, #6b2fb3, #2a1446 70%); }
#invasion .s-sky-pow { background: radial-gradient(circle, rgba(22, 22, 22, 0.14) 30%, transparent 34%) 0 0 / 12px 12px, repeating-conic-gradient(from 0deg at 50% 50%, #ffd000 0 8deg, #ffb000 8deg 16deg); }
#invasion .s-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background: radial-gradient(circle, rgba(22, 22, 22, 0.12) 30%, transparent 34%) 0 0 / 10px 10px, #6cc35c; border-top: 5px solid var(--ink); }
#invasion .s-ground.s-wilt { background-color: #a3b86c; }
#invasion .s-sky-dusk { background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 30%, transparent 34%) 0 0 / 10px 10px, linear-gradient(#ff9e7a, #ffcf8a); }
#invasion .s-sky-grey { background: radial-gradient(circle, rgba(22, 22, 22, 0.08) 30%, transparent 34%) 0 0 / 10px 10px, linear-gradient(#9aa7b4, #c9d2da); }
#invasion .s-sky-doom { background: radial-gradient(circle, rgba(0, 0, 0, 0.2) 30%, transparent 34%) 0 0 / 12px 12px, radial-gradient(circle at 50% 70%, #ff5a2d, #5a0d0d 75%); }
#invasion .s-sky-stage { background: radial-gradient(circle, rgba(255, 255, 255, 0.07) 30%, transparent 34%) 0 0 / 12px 12px, #24113d; }
#invasion .s-spot { position: absolute; left: 10%; right: 10%; top: 0; bottom: 0; background: linear-gradient(rgba(255, 246, 180, 0.65), rgba(255, 246, 180, 0.1)); clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); }
#invasion .s-plate { position: absolute; left: 6%; right: 6%; bottom: 10px; text-align: center; font: 26px/1 var(--comic); letter-spacing: 0.05em; background: var(--pow); border: 4px solid var(--ink); padding: 8px 6px 5px; box-shadow: 4px 4px 0 var(--ink); }
#invasion .s-sign { position: absolute; left: 6%; top: 24%; font: 24px/1 var(--comic); letter-spacing: 0.05em; background: #c47a3c; color: #fff; border: 4px solid var(--ink); padding: 8px 12px 5px; rotate: -4deg; text-shadow: 2px 2px 0 var(--ink); }
#invasion .s-sign small { display: block; font: 800 13px/1.2 var(--body); text-shadow: none; }
#invasion .s-sprout span { position: relative; }
#invasion .s-shades { position: absolute; left: 50%; top: 18%; translate: -50% 0; font-size: 0.5em; font-style: normal; }
#invasion .s-sprout.s-big span { font-size: 130px; }
#invasion .s-who.s-sleep svg { rotate: -16deg; }
#invasion .s-zz { color: #fff; animation: s-zz 2s ease-in-out infinite; }
#invasion .s-zz.s-d3 { animation-delay: 0.4s; } #invasion .s-zz.s-d4 { animation-delay: 0.8s; }
#invasion .s-wifi { position: absolute; right: 6%; top: 28%; font-size: 90px; line-height: 1; }
#invasion .s-wifi b { position: absolute; inset: 0; display: grid; place-items: center; color: var(--red); font-size: 110px; -webkit-text-stroke: 3px var(--ink); }
#invasion .s-plan { position: absolute; left: 26%; top: 18%; width: 34%; display: flex; flex-direction: column; gap: 2px; background: #fff; border: 5px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); padding: 12px 18px; font: 26px/1.15 var(--comic); letter-spacing: 0.04em; rotate: -2deg; }
#invasion .s-plan b { font-weight: 400; color: var(--red); font-size: 32px; text-decoration: underline 3px; }
#invasion .s-paper { position: absolute; right: 6%; top: 18%; width: 40%; aspect-ratio: 1.3; background: #fffdf3; border: 4px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); rotate: 4deg; display: grid; place-items: center; }
#invasion .s-paper svg { width: 80%; height: auto; }
#invasion .s-paper b { position: absolute; right: 8px; top: 2px; font: 44px/1 var(--comic); color: var(--red); }
#invasion .s-rain { animation: s-bob 1.4s ease-in-out infinite; }
#invasion .s-zhfx { font-family: var(--zh); font-weight: 900; color: var(--pow); }
#invasion .s-who.s-spin svg { animation: s-spin 1.2s linear infinite; }
#invasion .sp-panel.in .s-launch { animation: s-launch 1.6s 0.8s ease-in both; }
#invasion .s-who { position: absolute; }
#invasion .s-who svg { width: 100%; height: auto; display: block; overflow: visible; }
#invasion .s-kaka .m-panic, #invasion .s-kaka .sweat { display: none; }
#invasion .s-kaka.s-panic .m-calm { display: none; }
#invasion .s-kaka.s-panic .m-panic, #invasion .s-kaka.s-panic .sweat { display: inline; }
#invasion .s-foe .face-panic, #invasion .s-foe .face-bonk { display: none; }
#invasion .s-foe.s-bonk .face-calm { display: none; }
#invasion .s-foe.s-bonk .face-bonk { display: inline; }
#invasion .s-sprout { position: absolute; bottom: 17%; display: flex; flex-direction: column; align-items: center; gap: 4px; }
#invasion .s-sprout span { font-size: 56px; line-height: 1; }
#invasion .s-sprout b { font-family: var(--zh); font-weight: 900; font-size: 20px; background: #fff; border: 3px solid var(--ink); border-radius: 8px; padding: 0 8px; }
#invasion .s-sprout.s-faded b { opacity: 0.4; }
#invasion .s-crack { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 26%; }
#invasion .s-fx { position: absolute; font: 84px/1 var(--comic); letter-spacing: 0.04em; color: var(--pow); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: 5px 5px 0 var(--red); }
#invasion .s-pow { position: absolute; display: grid; place-items: center; background: var(--pow); filter: drop-shadow(5px 5px 0 var(--ink));
  clip-path: polygon(50% 0, 61% 26%, 92% 10%, 77% 40%, 100% 52%, 74% 62%, 86% 94%, 56% 76%, 42% 100%, 34% 72%, 4% 86%, 22% 58%, 0 40%, 28% 32%, 18% 6%, 42% 24%); }
#invasion .s-pow span { font: 48px/1 var(--comic); color: var(--red); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
#invasion .s-zi { position: absolute; width: 15%; aspect-ratio: 1; color: var(--ink); display: grid; place-items: center; font: 900 min(130px, 9vw)/1 var(--zh); background: #fff; border: 5px solid var(--ink); border-radius: 16px; box-shadow: 6px 6px 0 var(--ink); }
#invasion .s-art .s-logo { position: absolute; font-size: min(70px, 6vw); }
/* entrances, played when the panel pops in (.in) */
#invasion .sp-panel.in .s-pop { animation: st-pop 0.45s cubic-bezier(.2, 1.6, .4, 1) both; }
#invasion .sp-panel.in .s-rise { animation: st-rise 0.45s ease-out both; }
#invasion .sp-panel.in .s-slam { animation: st-slam 0.5s cubic-bezier(.2, 1.6, .4, 1) both; }
#invasion .sp-panel.in .s-fall { animation: s-fall 1s cubic-bezier(.3, 1.2, .5, 1) both; }
#invasion .sp-panel.in .s-fly-l { animation: ts-in-l 0.7s cubic-bezier(.3, 1.3, .5, 1) both; }
#invasion .sp-panel.in .s-fly-r { animation: ts-in-r 0.7s cubic-bezier(.3, 1.3, .5, 1) both; }
#invasion .sp-panel.in .s-grow { animation: s-grow 0.8s cubic-bezier(.3, 1.6, .5, 1) both; transform-origin: 50% 100%; }
#invasion .sp-panel.in .s-shake { animation: s-shake 0.5s steps(4) 3; }
#invasion .story .s-bob { animation: s-bob 1.6s ease-in-out infinite; }
#invasion .sp-panel .s-d1 { animation-delay: 0.2s !important; } #invasion .sp-panel .s-d2 { animation-delay: 0.6s !important; }
#invasion .sp-panel .s-d3 { animation-delay: 1s !important; } #invasion .sp-panel .s-d4 { animation-delay: 1.4s !important; }
@keyframes s-fall { from { transform: translateY(-700px) rotate(-120deg); } }
@keyframes s-grow { from { transform: scaleY(0); } }
@keyframes s-shake { 25% { translate: -8px 4px; } 50% { translate: 6px -4px; } 75% { translate: -4px -2px; } }
@keyframes s-bob { 50% { transform: translateY(-8px); } }
@keyframes s-zz { 50% { translate: 6px -10px; opacity: 0.6; } }
@keyframes s-spin { to { transform: scaleX(-1); } }
@keyframes s-launch { 0% { transform: none; } 20% { transform: translate(-10px, 4px) rotate(-8deg); } 100% { transform: translate(-600px, -700px) rotate(-720deg); } }
/* phones: the panels stack, one under the other */
@media (max-width: 760px) {
  #invasion .s-page { position: relative; inset: auto; display: flex; flex-direction: column; padding-bottom: 90px; }
  #invasion .sp-panel { height: 360px; flex: none; }
  #invasion .s-page.full .sp-panel { height: 72vh; }
  #invasion .s-page.turned { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #invasion .story * { animation: none !important; transition: none !important; }
}

/* ---------- ✕ on every question (write panel, quiz, boss exam): a miss, then the pause screen ---------- */
#invasion .q-close {
  position: absolute; top: 10px; right: 10px; z-index: 3; width: 48px; height: 48px; padding: 0;
  display: grid; place-items: center; font: 900 24px/1 var(--body); color: var(--ink);
  background: #fff; border: 3px solid var(--ink); border-radius: 50%; box-shadow: 2px 2px 0 var(--ink);
}
#invasion .q-close:active { translate: 2px 2px; box-shadow: none; }
#invasion .ex-card { position: relative; }
#invasion .ex-head { padding-right: 56px; }

/* ---------- pause: a comic book page ---------- */
#invasion .sheet.pause-page {
  z-index: 27; flex-direction: column; justify-content: safe center; gap: 8px; overflow-y: auto; padding: 20px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.55), transparent 45%),
    radial-gradient(circle, rgba(22, 22, 22, 0.16) 30%, transparent 34%) 0 0 / 12px 12px,
    repeating-conic-gradient(from 0deg at 50% 0%, #ffd000 0 6deg, #ffb000 6deg 12deg);
}
#invasion .pp-page {
  width: min(1100px, 100%); display: grid; gap: 16px; grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: "splash splash stats" "quests relics relics" "row row row";
}
#invasion .pp-panel { position: relative; overflow: hidden; background: #fff; border: 5px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); animation: st-pop 0.4s cubic-bezier(.2, 1.6, .4, 1) both; }
#invasion .pp-splash {
  grid-area: splash; min-height: 270px;
  background: radial-gradient(circle, rgba(22, 22, 22, 0.12) 30%, transparent 34%) 0 0 / 10px 10px, #9fd2ff;
}
#invasion .pp-title {
  position: absolute; left: 24px; top: 14px; rotate: -4deg; font: 96px/1 var(--comic); letter-spacing: 0.04em;
  color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: 6px 6px 0 var(--red), 6px 6px 0 2px var(--ink);
}
#invasion .pp-foe { position: absolute; left: 30%; top: 36%; width: 170px; rotate: -8deg; animation: pp-sneak 3s ease-in-out infinite alternate; }
#invasion .pp-foe svg { width: 100%; height: auto; display: block; }
#invasion .pp-mascot { left: auto; right: 44px; top: 34px; bottom: auto; width: 180px; z-index: 1; }
#invasion .pp-zz { position: absolute; right: 40px; top: 6px; font: 38px/1 var(--comic); letter-spacing: 0.06em; animation: pp-zz 2.4s ease-in-out infinite; }
#invasion .pp-cap { position: absolute; left: 0; bottom: 0; background: var(--pow); border-top: 5px solid var(--ink); border-right: 5px solid var(--ink); padding: 8px 18px 6px; font: 900 19px/1.2 var(--body); }
#invasion .pp-stats { grid-area: stats; background: var(--ink); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; animation-delay: 0.1s; }
#invasion .pp-stats div { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 1px solid #3a3a3a; padding: 8px 4px; }
#invasion .pp-stats b { font: 56px/1 var(--comic); letter-spacing: 0.02em; color: var(--pow); font-variant-numeric: tabular-nums; }
#invasion .pp-stats span { font: 900 13px/1.2 var(--body); letter-spacing: 0.1em; text-transform: uppercase; color: #ddd; margin-top: 4px; }
#invasion .pp-quests { grid-area: quests; background: #fffbd6; padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 10px; animation-delay: 0.2s; }
#invasion .pp-relics { grid-area: relics; padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 10px; animation-delay: 0.3s; }
#invasion .pp-h { margin: 0; font: 30px/1 var(--comic); font-weight: 400; letter-spacing: 0.05em; text-align: left; }
#invasion .pp-quests .quests { margin: 0; gap: 12px; }
#invasion .pp-quests .quests li {
  display: grid; grid-template-columns: 1fr auto auto; gap: 4px 8px; align-items: baseline;
  background: none; border: 0; box-shadow: none; border-radius: 0; padding: 0; rotate: none; font-size: 15px; font-weight: 900;
}
#invasion .pp-quests .quests li::before { content: none; }
#invasion .pp-quests .q-bar { grid-column: 1 / -1; height: 10px; }
#invasion .pp-relics .pg-empty { text-align: left; font-weight: 800; }
#invasion .pp-relics .relics { margin: 0; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
#invasion .pp-relics .relic {
  display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; text-align: left;
  padding: 8px 10px; background: var(--paper, #fffdf3); box-shadow: none;
}
#invasion .pp-relics .relic > span { grid-row: 1 / 3; font-size: 36px; position: relative; }
#invasion .pp-relics .relic > span small { position: absolute; right: -10px; top: -4px; font: 16px/1 var(--comic); }
#invasion .pp-relics .relic b { font: 20px/1 var(--comic); font-weight: 400; letter-spacing: 0.04em; }
#invasion .pp-row { grid-area: row; display: grid; grid-template-columns: 1fr 1.6fr; gap: 16px; align-items: stretch; animation: st-rise 0.4s 0.4s ease-out both; }
#invasion .pp-quit { display: flex; flex-direction: column; gap: 6px; }
#invasion .pp-quit .big-btn { width: 100%; font: 26px/1 var(--comic); letter-spacing: 0.05em; padding: 16px 12px 12px; box-shadow: 5px 5px 0 var(--ink); }
#invasion .pp-quit .pause-save-note { margin: 0; font-weight: 800; font-size: 13px; color: var(--ink); }
#invasion .pp-row #pause-resume { font-size: 44px; box-shadow: 5px 5px 0 var(--ink); }
#invasion .pause-page .dev-btn { width: auto; margin: 0; background: none; }
@keyframes pp-sneak { from { translate: -30px 6px; } to { translate: 30px -4px; } }
@keyframes pp-zz { 50% { translate: 6px -8px; opacity: 0.6; } }
@media (max-width: 760px) {
  #invasion .pp-page { grid-template-columns: 1fr; grid-template-areas: "splash" "stats" "quests" "relics" "row"; }
  #invasion .pp-splash { min-height: 220px; }
  #invasion .pp-title { font-size: 64px; }
  #invasion .pp-foe { left: 34%; top: 46%; width: 120px; }
  #invasion .pp-mascot { width: 120px; right: 16px; }
  #invasion .pp-stats { min-height: 180px; }
  #invasion .pp-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  #invasion .pause-page * { animation: none !important; }
}

/* ---------- title screen (before a run): logo, best, Continue / New run, difficulty;
   📖 Story top right, 🎩 Dress up (hats, flowers) next to the capybara bottom left ---------- */
#invasion .sheet.title-screen {
  flex-direction: column; justify-content: safe center; overflow-y: auto; padding: 24px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.55), transparent 45%),
    radial-gradient(circle, rgba(22, 22, 22, 0.16) 30%, transparent 34%) 0 0 / 12px 12px,
    repeating-conic-gradient(from 0deg at 50% 0%, #ffd000 0 6deg, #ffb000 6deg 12deg);
}
#invasion .ts-main { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 18px; width: min(540px, 100%); }
#invasion .ts-logo {
  margin: 0; text-align: center; font: min(120px, 15vw, 15vh)/0.88 var(--comic); font-weight: 400; letter-spacing: 0.03em;
  color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill;
  text-shadow: 7px 7px 0 var(--red), 7px 7px 0 2px var(--ink); animation: st-slam 0.5s 0.1s cubic-bezier(.2, 1.6, .4, 1) both;
}
#invasion .ts-logo span { display: block; }
#invasion .ts-logo span + span { color: var(--pow); }
#invasion .ts-best { font: 900 20px/1.2 var(--body); color: var(--ink); background: #fff; border: 3px solid var(--ink); border-radius: 999px; padding: 6px 18px; margin-top: 4px; animation: st-rise 0.4s 0.4s ease-out both; }
#invasion .ts-acts { display: flex; flex-direction: column; gap: 14px; width: 100%; }
#invasion .ts-acts .inv-go { width: 100%; min-height: 0; margin: 0; padding: 16px 20px 12px; box-shadow: 5px 5px 0 var(--ink); }
#invasion .ts-acts .inv-go.next { font-size: 40px; animation: st-pop 0.45s 0.6s cubic-bezier(.2, 1.6, .4, 1) backwards; }
#invasion .ts-acts .inv-go:not(.next) { font-size: 24px; padding: 12px 20px 9px; }
#invasion .ts-acts .inv-continue small { font: 800 15px/1.2 var(--body); letter-spacing: 0; text-shadow: none; margin-top: 6px; opacity: 1; }
#invasion .ts-seg { display: flex; border: 3px solid var(--ink); border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 4px 4px 0 var(--ink); animation: st-rise 0.4s 0.8s ease-out both; }
#invasion .ts-seg button { font: 900 18px/1 var(--body); color: var(--ink); background: #fff; border: 0; border-left: 3px solid var(--ink); padding: 12px 18px 10px; min-height: 48px; display: flex; gap: 6px; align-items: baseline; }
#invasion .ts-seg button:first-child { border-left: 0; }
#invasion .ts-seg button.on { background: var(--pow); }
#invasion .ts-seg small { font-weight: 800; font-size: 14px; color: #555; }
#invasion .ts-foe { position: absolute; top: 12%; width: min(230px, 20vw); pointer-events: none; }
#invasion .ts-foe svg { width: 100%; height: auto; display: block; }
#invasion .ts-left { left: 5%; rotate: -12deg; animation: ts-in-l 0.7s 0.3s cubic-bezier(.3, 1.3, .5, 1) both; }
#invasion .ts-right { right: 4%; rotate: 10deg; animation: ts-in-r 0.7s 0.45s cubic-bezier(.3, 1.3, .5, 1) both; }
#invasion .ts-story { position: absolute; top: 16px; right: 16px; width: auto; margin: 0; min-height: 48px; padding: 8px 14px; font-size: 18px; z-index: 2; }
#invasion .ts-mascot { left: 20px; bottom: 14px; width: min(18vh, 140px); }
#invasion .ts-dress { position: absolute; left: calc(32px + min(18vh, 140px)); bottom: 30px; width: auto; margin: 0; min-height: 48px; padding: 8px 14px; font-size: 18px; z-index: 2; }
#invasion .ts-dress-pop {
  position: absolute; left: calc(32px + min(18vh, 140px)); bottom: 92px; z-index: 3; display: flex; flex-direction: column; gap: 8px;
  background: #fff; border: 4px solid var(--ink); border-radius: 18px; box-shadow: 6px 6px 0 var(--ink); padding: 14px 18px; animation: st-pop 0.25s ease-out both;
}
#invasion .ts-dress-pop[hidden] { display: none; }
#invasion .ts-dress-pop .chips { margin: 0; justify-content: flex-start; }
#invasion .ts-dress-h { font: 22px/1 var(--comic); letter-spacing: 0.05em; }
@keyframes ts-in-l { from { transform: translateX(-140%) rotate(-40deg); } }
@keyframes ts-in-r { from { transform: translateX(140%) rotate(40deg); } }
@media (max-width: 760px) {
  #invasion .ts-foe { display: none; }
  #invasion .ts-seg button { padding: 10px 10px 8px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  #invasion .title-screen * { animation: none !important; }
}

/* ---------- level-complete stage, in steps (games/invasion/shop.js):
   splash  after a boss: the result alone, big (knocked-out boss, grade stamp, tally, one button)
   pick    the free relic pick on the sunburst; after a normal level, the result as one slim strip above it
   shop    the Sigma Shop card ---------- */
#invasion .sheet.stage { flex-direction: column; justify-content: safe center; gap: 18px; overflow-y: auto; padding: 24px; }
#invasion .stage-summary, #invasion .pick-section { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; }
#invasion .stage-summary[hidden], #invasion .pick-section[hidden] { display: none; }
#invasion .stage-title { font: 44px/1.05 var(--comic); letter-spacing: 0.04em; color: var(--ink); text-shadow: 3px 3px 0 var(--pow); text-wrap: balance; }
#invasion .stage-note { font-family: var(--body); font-weight: 900; font-size: 20px; color: var(--ink); max-width: 46ch; }
#invasion .stage-mid { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 48px; margin-top: 10px; }
#invasion .stage-boss:empty, #invasion .stage-grade:empty { display: none; }
#invasion .stage-stats { display: flex; gap: 6px 26px; margin: 0; padding: 8px 22px; background: #fff; border: 3px solid var(--ink); border-radius: 14px; box-shadow: 4px 4px 0 var(--ink); }
#invasion .stage-stats div { display: flex; align-items: baseline; gap: 8px; padding: 0; background: none; border: 0; border-radius: 0; }
#invasion .stage-stats b { font: 32px/1 var(--comic); letter-spacing: 0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
#invasion .stage-stats span { font-size: 17px; font-weight: 900; color: #444; }
#invasion #stage-claim { display: none; }

/* splash */
#invasion [data-step="splash"] .stage-title {
  font-size: 104px; line-height: 1; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill;
  text-shadow: 6px 6px 0 var(--red), 6px 6px 0 var(--ink); animation: st-slam 0.5s 0.1s cubic-bezier(.2, 1.6, .4, 1) both;
}
#invasion [data-step="splash"] .stage-note { font-size: 24px; margin-top: 6px; animation: st-rise 0.4s 0.45s ease-out both; }
#invasion [data-step="splash"] .stage-mid { margin: 26px 0 30px; }
#invasion .stage-boss { position: relative; width: 220px; animation: st-tumble 0.9s 0.4s ease-out both; }
#invasion .stage-boss svg { width: 100%; height: auto; display: block; }
#invasion .stage-boss .face-calm, #invasion .stage-boss .face-panic, #invasion .stage-boss .fled .face-bonk { display: none; }
#invasion .stage-boss .ko .face-bonk, #invasion .stage-boss .fled .face-panic { display: inline; }
#invasion .stage-boss:has(.fled) { animation: st-rise 0.4s 0.4s ease-out both; }
#invasion .stage-boss .fled { animation: c-jitter 0.16s steps(2) infinite; }   /* got away: panicky, still on screen */
#invasion .stage-grade > div {
  width: 220px; height: 220px; border-radius: 50%; background: #fff; border: 5px solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; rotate: -8deg;
  animation: st-stamp 0.45s 1.15s cubic-bezier(.3, 1.8, .5, 1) both;
}
#invasion .stage-grade b { font: 88px/0.9 var(--comic); letter-spacing: 0.02em; color: var(--grn); }
#invasion .stage-grade span { font: 28px/1 var(--comic); letter-spacing: 0.1em; color: #fff; background: var(--grn); border: 3px solid var(--ink); border-radius: 8px; padding: 5px 12px 2px; margin-top: 6px; }
#invasion .stage-grade .fail b { color: var(--red); }
#invasion .stage-grade .fail span { background: var(--red); }
#invasion .stage-grade small { font-family: var(--zh), var(--body); font-weight: 900; font-size: 14px; color: #555; margin-top: 8px; }
#invasion [data-step="splash"] .stage-stats { flex-direction: column; gap: 14px; padding: 0; background: none; border: 0; box-shadow: none; }
#invasion [data-step="splash"] .stage-stats div { gap: 12px; animation: st-rise 0.4s ease-out both; }
#invasion [data-step="splash"] .stage-stats div:nth-child(1) { animation-delay: 1.5s; }
#invasion [data-step="splash"] .stage-stats div:nth-child(2) { animation-delay: 1.8s; }
#invasion [data-step="splash"] .stage-stats b { font-size: 54px; min-width: 120px; text-align: right; }
#invasion [data-step="splash"] .stage-stats span { font-size: 22px; color: var(--ink); }
#invasion [data-step="splash"] #stage-claim {
  display: block; font: 34px/1 var(--comic); letter-spacing: 0.05em; padding: 18px 36px 14px; min-height: 0;
  box-shadow: 5px 5px 0 var(--ink); animation: st-pop 0.45s 2.2s cubic-bezier(.2, 1.6, .4, 1) backwards;
}

/* pick */
#invasion .pick-title {
  font: 46px/1 var(--comic); letter-spacing: 0.04em; color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill;
  text-shadow: 4px 4px 0 var(--ink); margin: 0;
}
#invasion .after-boss .pick-title { font-size: 72px; animation: st-rise 0.4s ease-out both; }
#invasion .pick-hint { font-weight: 900; font-size: 20px; color: var(--ink); margin: 6px 0 32px; }
#invasion #pick-items { grid-template-columns: repeat(3, minmax(0, 290px)); justify-content: center; gap: 34px; margin: 0; width: 100%; }
#invasion #pick-items .shop-item {
  position: relative; rotate: none; gap: 10px; padding: 28px 18px 20px; min-height: 290px;
  animation: st-rise 0.4s ease-out backwards;
}
#invasion #pick-items .shop-item:nth-child(2) { animation-delay: 0.12s; }
#invasion #pick-items .shop-item:nth-child(3) { animation-delay: 0.24s; }
#invasion #pick-items .si-icon { font-size: 78px; line-height: 1; }
#invasion #pick-items .si-name { font-size: 32px; }
#invasion #pick-items .si-desc { font-size: 17px; font-weight: 800; color: #3d3a2e; }
#invasion #pick-items .si-price { background: #fff; }
#invasion #pick-items .bought .si-price { background: var(--grn); }
#invasion .si-rare {
  position: absolute; top: -16px; left: 50%; translate: -50% 0; white-space: nowrap;
  font: 18px/1 var(--comic); letter-spacing: 0.08em; color: #fff; background: var(--red); border: 3px solid var(--ink); border-radius: 8px; padding: 6px 10px 3px;
}
#invasion .pick-next { margin-top: 30px; font-weight: 900; font-size: 19px; background: #fff; border: 2.5px solid var(--ink); border-radius: 999px; padding: 8px 18px; }
#invasion .pick-next:empty { display: none; }
@media (orientation: portrait), (max-width: 760px) {
  #invasion [data-step="splash"] .stage-title { font-size: 64px; }
  #invasion [data-step="splash"] .stage-mid { margin: 16px 0 20px; gap: 14px 28px; }
  #invasion .stage-boss { width: 140px; }
  #invasion .stage-grade > div { width: 170px; height: 170px; }
  #invasion .stage-grade b { font-size: 64px; }
  #invasion .stage-grade small { font-size: 12px; }
  #invasion .after-boss .pick-title { font-size: 48px; }
  #invasion #pick-items { grid-template-columns: minmax(0, 520px); gap: 22px; }
  #invasion #pick-items .shop-item { min-height: 0; flex-direction: row; text-align: left; padding: 20px 18px; }
  #invasion #pick-items .si-icon { font-size: 52px; }
}
@keyframes st-slam { from { transform: scale(2.4) rotate(-6deg); opacity: 0; } }
@keyframes st-pop { from { transform: scale(0.3); opacity: 0; } }
@keyframes st-rise { from { transform: translateY(40px); opacity: 0; } }
@keyframes st-stamp { 0% { transform: scale(3) rotate(-30deg); opacity: 0; } 70% { opacity: 1; } }
@keyframes st-tumble { 0% { transform: translate(-300px, -200px) rotate(-200deg); } 70% { transform: translate(0, 10px) rotate(8deg); } }
@media (prefers-reduced-motion: reduce) {
  #invasion .stage-summary *, #invasion .pick-section * { animation: none !important; }
}

/* ---------- boss intro: a full-page comic splash ---------- */
#invasion .sheet.boss-intro {
  background:
    radial-gradient(circle at 50% 36%, transparent 30%, rgba(22, 0, 0, 0.75) 85%),
    radial-gradient(circle, rgba(0, 0, 0, 0.25) 30%, transparent 34%) 0 0 / 12px 12px,
    repeating-conic-gradient(from 0deg at 50% 36%, #ff2d2d 0 7deg, #b5121a 7deg 14deg);
}
#invasion .bi-card { color: #fff; }
#invasion .bi-warning {
  font: 28px/1 var(--comic); letter-spacing: 0.08em; color: var(--ink); border: 3px solid var(--ink);
  border-radius: 4px; padding: 8px 18px 6px; box-shadow: var(--shadow); rotate: -2deg;
  background: repeating-linear-gradient(-45deg, var(--pow) 0 14px, #ffb000 14px 28px);
}
#invasion .bi-art .critter { filter: drop-shadow(8px 8px 0 var(--ink)); }
#invasion .bi-name {
  font: clamp(40px, 7vw, 66px)/1.05 var(--comic); letter-spacing: 0.04em; color: var(--pow);
  -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 5px 5px 0 var(--ink);
}
#invasion .bi-twists li {
  background: #fff; color: var(--ink); border: 3px solid var(--ink); border-radius: 10px;
  box-shadow: 5px 5px 0 var(--ink); rotate: -1deg;
}
#invasion .bi-twists li:nth-child(2n) { rotate: 1deg; }
#invasion .bi-twists b { font: 28px/1.1 var(--comic); letter-spacing: 0.04em; }
#invasion .bi-twists span { font-family: var(--body); font-weight: 800; opacity: 1; }
#invasion .bi-note {
  background: var(--pow); color: var(--ink); border: 3px solid var(--ink); padding: 6px 12px;
  font-weight: 800; opacity: 1; box-shadow: 3px 3px 0 var(--ink); rotate: 1deg;
}
#invasion .bi-go { font-size: 34px; }

/* ---------- small screens ---------- */
@media (orientation: portrait), (max-width: 700px) {
  #invasion .inv-level { font-size: 22px; }
  #invasion .inv-combo { font-size: 28px; }
  #invasion .inv-banner-title { font-size: 40px; }
}

/* ---------- reduced motion: no loops, no spinning rays, no shake ---------- */
@media (prefers-reduced-motion: reduce) {
  #invasion .inv-field::before, #invasion .pupil, #invasion .wag, #invasion .flap, #invasion .kick,
  #invasion .prop, #invasion .swing, #invasion .sweat, #invasion .stars, #invasion .steam,
  #invasion .enemy.ballerina .critter, #invasion .enemy.dropping .critter, #invasion .enemy.torn .critter,
  #invasion .plant .flower, #invasion .inv-cloud, #invasion .coin, #invasion .boss-body { animation: none; }
  #invasion.shake { animation: none; }
}

/* ---------- 😈 Nemesis words (missed in a boss exam) ---------- */
#invasion .enemy.nemesis .sign { position: relative; }
#invasion .enemy.nemesis .sign::after {
  content: "😈"; position: absolute; top: -16px; left: -16px; font-size: 28px; rotate: -12deg;
  filter: drop-shadow(2px 2px 0 var(--ink));
}

/* ---------- 📝 boss exam: a 听写 dictation in a comic panel ---------- */
#invasion .sheet.exam {
  z-index: 26; padding: max(12px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle, rgba(0, 0, 0, 0.22) 30%, transparent 34%) 0 0 / 12px 12px,
    repeating-conic-gradient(from 0deg at 50% 0%, #ff2d2d 0 7deg, #b5121a 7deg 14deg);
}
#invasion .ex-card {
  width: min(1000px, 100%); max-height: 100%; overflow-y: auto; display: flex; flex-direction: column; gap: 12px;
  background: #fff; border: 5px solid var(--ink); border-radius: 18px; box-shadow: 10px 10px 0 var(--ink); padding: 14px 20px 18px;
}
#invasion .ex-head { display: flex; align-items: center; gap: 14px; border-bottom: 3px dashed var(--ink); padding-bottom: 10px; }
#invasion .ex-art { position: relative; width: 84px; flex: none; }
#invasion .ex-art .critter { width: 100%; display: block; filter: drop-shadow(4px 4px 0 var(--ink)); }
#invasion .ex-art .boss-crown { position: absolute; top: -22%; left: 50%; translate: -50% 0; font-size: 30px; rotate: -10deg; }
#invasion .ex-art.hit { animation: ex-hit 0.45s; }
@keyframes ex-hit { 20% { translate: 10px -4px; rotate: 8deg; filter: brightness(2); } 50% { translate: -8px 0; rotate: -6deg; } }
#invasion .ex-boss { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
#invasion .ex-name { font: 28px/1 var(--comic); letter-spacing: 0.04em; color: var(--ink); }
#invasion .ex-hp { position: relative; height: 22px; border: 3px solid var(--ink); border-radius: 6px; background: #fff; overflow: hidden; }
#invasion .ex-hp-bar { height: 100%; background: repeating-linear-gradient(-45deg, var(--red) 0 10px, #d81b1b 10px 20px); transition: width 0.4s; }
#invasion .ex-hp span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 14px; color: var(--ink); text-shadow: 0 0 3px #fff; font-variant-numeric: tabular-nums; }
#invasion .ex-tag {
  font: 24px/1 var(--comic); letter-spacing: 0.06em; background: var(--pow); border: 3px solid var(--ink);
  border-radius: 6px; padding: 7px 12px 4px; rotate: 3deg; box-shadow: 3px 3px 0 var(--ink);
}
#invasion .ex-main { display: flex; flex-direction: column; gap: 12px; }
#invasion .ex-prompt { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#invasion .ex-info { flex: 1; min-width: 200px; }
#invasion .ex-count { font: 22px/1 var(--comic); letter-spacing: 0.05em; color: var(--red); }
#invasion .ex-task { font-weight: 900; font-size: 19px; }
#invasion .ex-body { display: flex; flex-direction: column; gap: 10px; }
#invasion .ex-body .dict-chars { gap: 18px; }
#invasion .ex-body .dict-syl { border-color: var(--ink); font-family: var(--body); }
#invasion .ex-body .dict-key { border: 2.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); font-family: var(--body); }
#invasion .ex-body .box { border-color: var(--ink); }
#invasion .ex-foot { display: flex; align-items: center; gap: 12px; }
#invasion .ex-foot .big-btn { min-width: 220px; font: 26px/1 var(--comic); letter-spacing: 0.05em; }
#invasion .ex-mark { flex: 1; font-weight: 900; font-size: 22px; }
#invasion .ex-mark b { font: 34px/1 var(--comic); letter-spacing: 0.04em; }
#invasion .ex-mark.right b { color: var(--grn); text-shadow: 2px 2px 0 var(--ink); }
#invasion .ex-mark.wrong b { color: var(--red); text-shadow: 2px 2px 0 var(--ink); }
#invasion .ex-answer { font-family: var(--zh); font-size: 36px; background: var(--pow); padding: 0 6px; border: 2px solid var(--ink); border-radius: 6px; }
#invasion .ex-results { display: flex; flex-direction: column; gap: 14px; }
#invasion .ex-results-head { display: flex; align-items: center; gap: 18px; }
#invasion .ex-score {
  font: 54px/1 var(--comic); width: 130px; height: 130px; flex: none; border-radius: 50%; border: 6px solid currentColor;
  display: flex; align-items: center; justify-content: center; rotate: -10deg; font-variant-numeric: tabular-nums;
}
#invasion .ex-score.pass { color: var(--grn); }
#invasion .ex-score.fail { color: var(--red); }
#invasion .ex-verdict { font: 42px/1.05 var(--comic); letter-spacing: 0.04em; text-shadow: 3px 3px 0 var(--pow); }
#invasion .ex-note { font-weight: 800; font-size: 18px; color: #444; }
#invasion .ex-results .dict-row { border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
#invasion .ex-results .dr-hanzi { font-family: var(--zh); font-weight: 900; }
#invasion #ex-continue { font: 30px/1 var(--comic); letter-spacing: 0.05em; min-height: 70px; }
#invasion .shop-item.sold { background: #eee; box-shadow: 2px 2px 0 var(--ink); }
#invasion .shop-item.sold .si-price { background: #bbb; color: var(--ink); }
#invasion .q-bar { border: 2px solid var(--ink); height: 10px; background: #fff; }
#invasion .q-bar i { background: var(--grn); }
#invasion .quests.compact li { rotate: -0.6deg; }
#invasion .quests.compact li:nth-child(2) { rotate: 0.6deg; }
@media (max-height: 860px) {
  #invasion .pause-card .inv-stats b { font-size: 34px; }
  #invasion .pause-card .inv-title { font-size: 34px; }
}

/* ---------- 🎒 backpack items in the top bar, and the 🛡️ Force Field over the garden ---------- */
#invasion .inv-pack { display: flex; gap: 8px; }
#invasion .inv-pack:empty { display: none; }
#invasion .pack-btn {
  position: relative; min-height: 52px; min-width: 56px; padding: 4px 10px; font-size: 28px; line-height: 1;
  background: #dff0ff; border: 3px solid var(--ink); border-radius: 12px; box-shadow: var(--shadow);
}
#invasion .pack-btn:nth-child(odd) { rotate: -3deg; }
#invasion .pack-btn:nth-child(even) { rotate: 2deg; }
#invasion .pack-btn small {
  position: absolute; right: -8px; bottom: -8px; min-width: 22px; padding: 1px 5px; border-radius: 999px;
  background: var(--red); color: #fff; border: 2px solid var(--ink); font: 900 13px/1.3 var(--body);
}
#invasion .inv-field.shielded .inv-garden::before {
  content: ""; position: absolute; left: -4%; right: -4%; bottom: 0; height: 190%; z-index: 3; pointer-events: none;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0; border: 4px solid rgba(80, 190, 255, 0.95); border-bottom: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(140, 220, 255, 0.05), rgba(120, 210, 255, 0.35));
  box-shadow: 0 0 24px rgba(80, 190, 255, 0.8), inset 0 0 30px rgba(255, 255, 255, 0.6);
  animation: inv-shield 0.9s ease-in-out infinite alternate;
}
@keyframes inv-shield { from { opacity: 0.75; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #invasion .inv-field.shielded .inv-garden::before { animation: none; } }

/* ---------- 🐟 mini brainrots, 💣 croco bombs and the bomber ---------- */
#invasion .mini, #invasion .bomb, #invasion .bomber { position: absolute; left: 0; top: 0; will-change: transform; }
#invasion .mini { z-index: 2; cursor: pointer; touch-action: none; }
#invasion .mini svg, #invasion .bomb svg, #invasion .bomber svg { display: block; width: 100%; overflow: visible; }
#invasion .mini .critter { filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 2px #fff); }
#invasion .mini .face-calm { display: none; }
#invasion .mini .face-panic { display: inline; }
#invasion .mini.popped { animation: inv-pop 0.35s ease-out forwards; pointer-events: none; }
#invasion .mini.popped .face-panic { display: none; }
#invasion .mini.popped .face-bonk { display: inline; }
#invasion .mini.nom { animation: inv-nom 0.45s ease-in forwards; pointer-events: none; }
@keyframes inv-pop { 40% { scale: 1.35; filter: brightness(1.8); } to { scale: 0.2; opacity: 0; } }
@keyframes inv-nom { to { scale: 1.3 0.3; opacity: 0; translate: 0 24px; } }
#invasion .bomber { z-index: 1; pointer-events: none; }
#invasion .bomb { z-index: 3; cursor: pointer; touch-action: none; }
#invasion .bomb .spark { transform-box: fill-box; transform-origin: center; animation: inv-spark 0.25s steps(2) infinite; }
@keyframes inv-spark { 50% { scale: 0.6; } }
#invasion .bomb.flung { translate: var(--fx) var(--fy); rotate: 540deg; transition: translate 0.65s ease-out, rotate 0.65s linear; pointer-events: none; }
#invasion .bomb.exploded { pointer-events: none; }
#invasion .bomb.exploded svg { animation: inv-pop 0.4s ease-out forwards; }
#invasion .bomb.exploded::before {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 320%; aspect-ratio: 1; translate: -50% 30%;
  background: var(--bonk) center / contain no-repeat; animation: c-burst 0.58s ease-out forwards;
}
#invasion .bomb.popped { animation: inv-pop 0.35s ease-out forwards; pointer-events: none; }

/* 🫧 Bubble Wrap twist: a soap bubble round the brainrot until the first tap */
#invasion .enemy .bubble-wrap {
  position: absolute; left: -10%; right: -10%; bottom: -6%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; z-index: 3;
  border: 4px solid rgba(255, 255, 255, 0.95);
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.9) 0 7%, transparent 9%),
    radial-gradient(circle, rgba(170, 225, 255, 0.12) 55%, rgba(255, 140, 230, 0.35) 72%, rgba(120, 220, 255, 0.45));
  box-shadow: 0 0 0 3px var(--ink), 0 0 16px rgba(120, 220, 255, 0.7);
}

/* 🌙 Lights out twist: a night sky, dark brainrots, glowing signs */
#invasion.lights-out {
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.55) 6%, transparent 9%) 0 0 / 90px 70px,
    radial-gradient(circle, rgba(255, 255, 255, 0.35) 5%, transparent 8%) 40px 30px / 130px 110px,
    linear-gradient(#070b26, #18224f 70%, #24365a);
}
#invasion.lights-out .inv-field::before, #invasion.lights-out .inv-cloud { opacity: 0.12; }
#invasion.lights-out .enemy .critter { filter: brightness(0.32) saturate(0.6); }
#invasion.lights-out .mini .critter { filter: brightness(0.5) saturate(0.7) drop-shadow(0 0 5px #9fe8ff); }
#invasion.lights-out .enemy .strings { opacity: 0.35; }
#invasion.lights-out .enemy .sign { box-shadow: 0 0 0 3px var(--ink), 0 0 22px 6px rgba(255, 238, 120, 0.85); }
#invasion.lights-out .inv-garden { filter: brightness(0.55); }
#invasion.lights-out .coin { filter: drop-shadow(0 0 10px #ffe36e); }
@media (prefers-reduced-motion: reduce) { #invasion .bomb .spark { animation: none; } }

/* ---------- 🧪 creatures from the Brainrot Lab, falling with a name flag ---------- */
#invasion .enemy.lab .lab-critter { position: relative; width: 100%; }
#invasion .enemy.lab .lab-critter img { display: block; width: 100%; height: auto; pointer-events: none; }
#invasion .enemy.lab .lab-panic { display: none !important; }
#invasion .enemy.lab:is(.dropping, .caught, .torn, .splat) .lab-calm { display: none; }
#invasion .enemy.lab:is(.dropping, .caught, .torn, .splat) .lab-panic { display: block !important; }
#invasion .enemy.lab .lab-flag {
  margin-top: -10px; max-width: 150%; padding: 2px 8px 3px; white-space: nowrap; text-align: center;
  font: 900 13px/1.2 var(--body); color: var(--ink); background: #efe6ff; border: 2.5px solid var(--ink);
  border-radius: 8px; box-shadow: 2px 2px 0 var(--ink); rotate: -3deg; z-index: 2;
}
#invasion .enemy.lab .lab-flag small { display: block; font-size: 11px; color: #6a45d6; }
#invasion .enemy.lab.dropping .lab-flag { opacity: 0; }
#invasion.lights-out .enemy.lab .lab-critter { filter: brightness(0.32) saturate(0.6); }