/* ===== Fonts (bundled so the Android build works offline) ===== */
@font-face { font-family: 'Bangers'; src: url('../fonts/bangers-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: block; }
@font-face { font-family: 'Fredoka'; src: url('../fonts/fredoka-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: block; }
@font-face { font-family: 'Fredoka'; src: url('../fonts/fredoka-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: block; }
@font-face { font-family: 'Fredoka'; src: url('../fonts/fredoka-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: block; }
@font-face { font-family: 'Fredoka'; src: url('../fonts/fredoka-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: block; }

/* ===== Tokens — pulled from the hero suit, villain suit and the neon frame ===== */
:root {
  --u: 0.333px;              /* 1 unit of the 1080x1920 layout; set by JS */
  --ink: #0a1620;
  --panel: #0f2a3b;
  --cyan: #28c8e8;
  --cyan-glow: rgba(40, 200, 232, .55);
  --teal: #1b4d6b;
  --gold: #f6b830;
  --gold-dk: #c98a12;
  --crimson: #c22d3a;
  --paper: #f3ead2;
  --good: #63d471;
  --bad: #ff5b5b;
  --warn: #ffb347;
  --text: #e8f6fb;
  --display: 'Bangers', 'Impact', 'Arial Black', sans-serif;
  --body: 'Arial', 'Helvetica Neue', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #040b11; }
body {
  color: var(--text); font-family: var(--body); font-weight: 500;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; overscroll-behavior: none;
}
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
svg { display: block; }

#app {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle, rgba(40,200,232,.12) 1.2px, transparent 1.6px) 0 0 / 14px 14px,
    radial-gradient(ellipse at 50% 40%, #0d2a3c, #03080d 70%);
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
#root {
  position: relative; width: calc(var(--u) * 1080); height: calc(var(--u) * 1920);
  overflow: hidden; background: #050d14; font-size: calc(var(--u) * 36);
  box-shadow: 0 0 calc(var(--u) * 60) rgba(40,200,232,.15);
}

/* ===== Stage (character window) ===== */
.stage {
  position: absolute; left: calc(var(--u)*445); top: calc(var(--u)*90);
  width: calc(var(--u)*596); height: calc(var(--u)*1165); overflow: hidden; background: #1d3140;
}
.stage-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s; }
.stage-bg.fade { opacity: 0; }
.char-wrap {
  position: absolute; left: 50%; bottom: 0; height: calc(93% * var(--ch, 1)); aspect-ratio: 640 / 1160;
  transform: translateX(-50%); transform-origin: 50% 100%;
}
.char {
  width: 100%; height: 100%; object-fit: contain; object-position: center bottom; transform-origin: 50% 100%;
  filter: drop-shadow(0 calc(var(--u)*10) calc(var(--u)*8) rgba(0,0,0,.45));
  animation: breathe 3.2s ease-in-out infinite;
}
@keyframes breathe { 0%,100% { transform: scale(1, 1); } 50% { transform: scale(1.012, .988); } }
.char-wrap.hop { animation: hop .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes hop { 0% { transform: translateX(-50%) scale(1,1); } 25% { transform: translateX(-50%) translateY(-8%) scale(.94,1.08); } 55% { transform: translateX(-50%) scale(1.08,.9); } 100% { transform: translateX(-50%) scale(1,1); } }
.char-wrap.slump { animation: slump .8s ease; }
@keyframes slump { 0%,100% { transform: translateX(-50%) scale(1,1); } 30% { transform: translateX(-50%) scale(1.05,.9) rotate(-2deg); } 60% { transform: translateX(-50%) scale(1.03,.93) rotate(2deg); } }
.char-wrap.morph { animation: morph 1.1s ease-in-out; }
@keyframes morph {
  0% { transform: translateX(-50%) scale(1); filter: brightness(1); }
  40% { transform: translateX(-50%) scale(.2, 1.15); filter: brightness(4); }
  60% { transform: translateX(-50%) scale(.2, 1.15); filter: brightness(4); }
  100% { transform: translateX(-50%) scale(1); filter: brightness(1); }
}
.stage-burst {
  position: absolute; left: 50%; top: 45%; width: 140%; aspect-ratio: 1; transform: translate(-50%,-50%) scale(0);
  background: repeating-conic-gradient(from 0deg, var(--gold) 0deg 10deg, #ffe08a 10deg 20deg);
  clip-path: polygon(50% 0,58% 30%,85% 8%,70% 38%,100% 40%,72% 55%,95% 80%,62% 68%,55% 100%,45% 70%,15% 92%,30% 62%,0 55%,28% 42%,8% 15%,40% 30%);
  opacity: 0; pointer-events: none;
}
.stage-burst.on { animation: burst 1.6s ease-out; }
.stage-burst.villain { background: repeating-conic-gradient(from 0deg, var(--crimson) 0deg 10deg, #4a0b14 10deg 20deg); }
@keyframes burst { 0% { opacity: 0; transform: translate(-50%,-50%) scale(0) rotate(0); } 25% { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(20deg); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.15) rotate(40deg); } }
.flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.flash.on { animation: flash .9s ease-out; }
@keyframes flash { 0% { opacity: 0; } 15% { opacity: .95; } 100% { opacity: 0; } }

.rank-caption {
  position: absolute; left: calc(var(--u)*22); top: calc(var(--u)*22); max-width: 70%;
  padding: calc(var(--u)*8) calc(var(--u)*18);
  background: var(--gold); color: var(--ink); border: calc(var(--u)*5) solid var(--ink);
  font-family: var(--display); font-size: calc(var(--u)*44); letter-spacing: .03em; line-height: 1;
  box-shadow: calc(var(--u)*6) calc(var(--u)*6) 0 var(--ink); transform: rotate(-2deg);
}
.rank-caption.villain { background: var(--crimson); color: #fff; }
.rank-caption.top { background: linear-gradient(90deg, #fff6c8, var(--gold), #fff6c8); }

.emote {
  position: absolute; right: calc(var(--u)*40); top: calc(var(--u)*150);
  width: calc(var(--u)*130); height: calc(var(--u)*130); pointer-events: none;
  transition: transform .4s cubic-bezier(.3,1.6,.5,1), opacity .3s; transform: scale(0); opacity: 0;
}
.emote.on { transform: scale(1); opacity: 1; animation: floaty 2.4s ease-in-out infinite; }
@keyframes floaty { 0%,100% { translate: 0 0; } 50% { translate: 0 calc(var(--u)*-12); } }
.emote svg { width: 100%; height: 100%; overflow: visible; }

.speech {
  position: absolute; left: calc(var(--u)*30); right: calc(var(--u)*30); top: calc(var(--u)*120);
  background: #fff; color: var(--ink); border: calc(var(--u)*5) solid var(--ink); border-radius: calc(var(--u)*40);
  padding: calc(var(--u)*18) calc(var(--u)*26); font-weight: 600; font-size: calc(var(--u)*36); line-height: 1.2;
  text-align: center; opacity: 0; transform: scale(.6); transform-origin: 60% 120%;
  transition: opacity .2s, transform .25s cubic-bezier(.3,1.6,.5,1); pointer-events: none;
}
.speech::after {
  content: ''; position: absolute; left: 55%; bottom: calc(var(--u)*-34);
  border: calc(var(--u)*18) solid transparent; border-top: calc(var(--u)*28) solid var(--ink);
}
.speech.on { opacity: 1; transform: scale(1); }

.frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }

/* ===== Side column ===== */
.side {
  position: absolute; z-index: 6; left: calc(var(--u)*30); top: calc(var(--u)*112);
  width: calc(var(--u)*402); height: calc(var(--u)*1124); overflow: hidden;
  padding: calc(var(--u)*8) calc(var(--u)*14) calc(var(--u)*14);
  display: flex; flex-direction: column; gap: calc(var(--u)*12);
}
.idcard { padding-bottom: calc(var(--u)*8); border-bottom: calc(var(--u)*3) solid rgba(40,200,232,.35); }
.name {
  font-family: var(--display); font-size: calc(var(--u)*56); line-height: .95; letter-spacing: .02em; color: #fff;
  text-shadow: calc(var(--u)*3) calc(var(--u)*3) 0 var(--ink), 0 0 calc(var(--u)*14) var(--cyan-glow);
  overflow-wrap: anywhere;
}
.rank-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(var(--u)*10); margin-top: calc(var(--u)*6); }
.rank { font-weight: 700; color: var(--cyan); font-size: calc(var(--u)*34); }
.rank.hero { color: var(--gold); }
.rank.villain { color: #ff6a74; }
.job { font-size: calc(var(--u)*28); color: #9fc7d6; }

.stats { display: flex; flex-direction: column; gap: calc(var(--u)*6); }
.stat { display: grid; grid-template-columns: calc(var(--u)*40) 1fr auto; align-items: center; column-gap: calc(var(--u)*10); row-gap: calc(var(--u)*4); }
.stat svg { width: calc(var(--u)*40); height: calc(var(--u)*40); grid-row: span 2; }
.stat-name { font-size: calc(var(--u)*30); font-weight: 600; color: #d6eef6; }
.stat-val { font-size: calc(var(--u)*30); font-weight: 700; color: #fff; min-width: 2ch; text-align: right; }
.stat-val.bump-up { animation: bumpUp .7s; } .stat-val.bump-down { animation: bumpDown .7s; }
@keyframes bumpUp { 30% { color: var(--good); transform: scale(1.4); } }
@keyframes bumpDown { 30% { color: var(--bad); transform: scale(1.4); } }
.bar { grid-column: 2 / 4; height: calc(var(--u)*16); border-radius: calc(var(--u)*10); background: rgba(0,0,0,.55); border: calc(var(--u)*3) solid #0a1620; overflow: hidden; box-shadow: inset 0 0 0 calc(var(--u)*2) rgba(40,200,232,.25); }
.bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(180deg, #7ee8ff, var(--cyan) 55%, #1593ad); transition: width .6s cubic-bezier(.3,1.3,.5,1), background .3s; }
.bar i.mid { background: linear-gradient(180deg, #ffe08a, var(--warn) 55%, #c97a1a); }
.bar i.low { background: linear-gradient(180deg, #ffa3a3, var(--bad) 55%, #b02c2c); }

.align { padding-top: calc(var(--u)*2); }
.align-labels { display: flex; justify-content: space-between; font-size: calc(var(--u)*24); font-weight: 600; color: #9fc7d6; }
.align-labels span:first-child { color: #ff7f87; } .align-labels span:last-child { color: var(--gold); }
#alignWord { color: #fff; font-weight: 700; }
.align-track { position: relative; height: calc(var(--u)*20); margin-top: calc(var(--u)*6); border-radius: calc(var(--u)*12); border: calc(var(--u)*3) solid var(--ink); background: linear-gradient(90deg, #8f1823, #3b2a33 45%, #2b3d48 55%, #b98613); }
.align-knob { position: absolute; top: 50%; left: 50%; width: calc(var(--u)*30); height: calc(var(--u)*30); border-radius: 50%; background: #fff; border: calc(var(--u)*4) solid var(--ink); transform: translate(-50%,-50%); transition: left .7s cubic-bezier(.3,1.4,.5,1); }

.powers { display: flex; flex-wrap: nowrap; gap: calc(var(--u)*6); height: calc(var(--u)*42); overflow: hidden; align-items: center; }
.powers .power { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.powers .more { flex: none; }
.power { display: inline-flex; align-items: center; gap: calc(var(--u)*4); padding: calc(var(--u)*4) calc(var(--u)*10); border-radius: calc(var(--u)*20); background: #2a1d4f; border: calc(var(--u)*3) solid #a98bff; color: #e6dcff; font-size: calc(var(--u)*24); font-weight: 600; }
.power svg { width: calc(var(--u)*24); height: calc(var(--u)*24); color: #ffd84a; }
.powers .none { font-size: calc(var(--u)*24); color: #6f93a3; font-style: italic; }

.actions { margin-top: auto; padding-bottom: calc(var(--u)*8); display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u)*12); }
.act {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u)*4);
  height: calc(var(--u)*100); border-radius: calc(var(--u)*20);
  background: linear-gradient(180deg, #2a6f93, var(--teal) 60%, #133a51);
  border: calc(var(--u)*4) solid var(--ink);
  box-shadow: inset 0 calc(var(--u)*3) 0 rgba(255,255,255,.25), 0 0 0 calc(var(--u)*2) rgba(40,200,232,.6), 0 calc(var(--u)*7) 0 var(--ink);
  color: #fff; font-weight: 700; font-size: calc(var(--u)*30); transition: transform .08s, box-shadow .08s;
}
.act svg { width: calc(var(--u)*46); height: calc(var(--u)*46); color: var(--gold); }
.act:active:not(.locked) { transform: translateY(calc(var(--u)*6)); box-shadow: inset 0 calc(var(--u)*3) 0 rgba(255,255,255,.25), 0 0 0 calc(var(--u)*2) rgba(40,200,232,.6), 0 calc(var(--u)*1) 0 var(--ink); }
.act.wide { grid-column: 1 / 3; flex-direction: row; height: calc(var(--u)*80); gap: calc(var(--u)*14); }
.act.danger { background: linear-gradient(180deg, #e0505c, var(--crimson) 60%, #7d1520); box-shadow: inset 0 calc(var(--u)*3) 0 rgba(255,255,255,.25), 0 0 0 calc(var(--u)*2) rgba(255,100,110,.5), 0 calc(var(--u)*7) 0 var(--ink); }
.act.danger svg { color: #fff; }
.act.locked { filter: grayscale(1) brightness(.6); }
.act .lock { position: absolute; top: calc(var(--u)*4); right: calc(var(--u)*8); font-size: calc(var(--u)*18); color: #cfd8dc; }

/* ===== Band ===== */
.band {
  position: absolute; z-index: 6; left: calc(var(--u)*30); top: calc(var(--u)*1268); width: calc(var(--u)*1016); height: calc(var(--u)*148);
  display: flex; align-items: center; gap: calc(var(--u)*20); padding: 0 calc(var(--u)*24);
}
.loc { flex: 1; font-family: var(--display); font-size: calc(var(--u)*76); letter-spacing: .04em; color: var(--cyan); line-height: 1;
  text-shadow: calc(var(--u)*4) calc(var(--u)*4) 0 var(--ink), 0 0 calc(var(--u)*24) var(--cyan-glow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.day { font-weight: 600; font-size: calc(var(--u)*38); color: #bfe3ef; }
.day b { font-family: var(--display); font-weight: 400; font-size: calc(var(--u)*64); color: var(--gold); letter-spacing: .03em; }
.icon-btn { width: calc(var(--u)*96); height: calc(var(--u)*96); border-radius: 50%; display: grid; place-items: center;
  background: var(--teal); border: calc(var(--u)*4) solid var(--ink); box-shadow: 0 0 0 calc(var(--u)*2) rgba(40,200,232,.6), 0 calc(var(--u)*5) 0 var(--ink); color: #dff6ff; }
.icon-btn svg { width: 56%; height: 56%; }
.icon-btn:active { transform: translateY(calc(var(--u)*4)); }

/* ===== Bottom: planner + newspaper ===== */
.bottom {
  position: absolute; z-index: 6; left: calc(var(--u)*36); top: calc(var(--u)*1442); width: calc(var(--u)*1004); height: calc(var(--u)*440);
  display: flex; flex-direction: column; gap: calc(var(--u)*18);
}
.plan { display: flex; gap: calc(var(--u)*14); height: calc(var(--u)*176); }
.slots { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u)*12); }
.slot {
  position: relative; border-radius: calc(var(--u)*20); border: calc(var(--u)*4) dashed rgba(40,200,232,.45);
  background: rgba(10,30,44,.75); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u)*2);
  padding: calc(var(--u)*6); text-align: center; transition: transform .15s;
}
.slot-time { width: calc(var(--u)*40); height: calc(var(--u)*40); color: #7aa7b8; }
.slot-name { font-size: calc(var(--u)*24); font-weight: 600; color: #7aa7b8; }
.slot-act { font-family: var(--display); font-size: calc(var(--u)*42); letter-spacing: .03em; color: #4c7385; line-height: 1; }
.slot.planned { border-style: solid; border-color: var(--cyan); background: linear-gradient(180deg, #1f5a78, #123a50); box-shadow: 0 0 calc(var(--u)*16) var(--cyan-glow); }
.slot.planned .slot-act { color: #fff; } .slot.planned .slot-time { color: var(--gold); } .slot.planned .slot-name { color: #bfe3ef; }
.slot.planned.danger { border-color: #ff6a74; background: linear-gradient(180deg, #7a1f2a, #4a0f17); box-shadow: 0 0 calc(var(--u)*16) rgba(255,90,100,.5); }
.slot.done { border-style: solid; border-color: #2c4552; background: #0b1820; opacity: .65; }
.slot.done .slot-act { color: var(--good); font-size: calc(var(--u)*34); }
.slot.now { animation: nowPulse 1.6s ease-in-out infinite; }
.slot.empty.now { border-color: var(--gold); }
@keyframes nowPulse { 50% { transform: translateY(calc(var(--u)*-4)); } }
.slot .x { position: absolute; top: calc(var(--u)*4); right: calc(var(--u)*10); font-weight: 700; font-size: calc(var(--u)*26); color: #9fc7d6; }

.go {
  width: calc(var(--u)*200); border-radius: calc(var(--u)*26);
  background: linear-gradient(180deg, #ffe08a, var(--gold) 55%, var(--gold-dk)); color: var(--ink);
  border: calc(var(--u)*5) solid var(--ink); box-shadow: inset 0 calc(var(--u)*4) 0 rgba(255,255,255,.6), 0 calc(var(--u)*9) 0 var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u)*2);
  font-family: var(--display); font-size: calc(var(--u)*62); letter-spacing: .04em; line-height: 1;
}
.go svg { width: calc(var(--u)*56); height: calc(var(--u)*56); color: #fff; }
.go:active:not(:disabled) { transform: translateY(calc(var(--u)*7)); box-shadow: inset 0 calc(var(--u)*4) 0 rgba(255,255,255,.6), 0 calc(var(--u)*2) 0 var(--ink); }
.go:disabled { filter: grayscale(.9) brightness(.55); }
.go.ready { animation: goPulse 1.2s ease-in-out infinite; }
@keyframes goPulse { 50% { box-shadow: inset 0 calc(var(--u)*4) 0 rgba(255,255,255,.6), 0 calc(var(--u)*9) 0 var(--ink), 0 0 calc(var(--u)*34) rgba(246,184,48,.8); } }

.paper {
  flex: 1; position: relative; margin: 0 calc(var(--u)*8) calc(var(--u)*18); padding: calc(var(--u)*14) calc(var(--u)*30) calc(var(--u)*18);
  background:
    radial-gradient(circle, rgba(0,0,0,.07) 1px, transparent 1.5px) 0 0 / 6px 6px,
    linear-gradient(180deg, #fbf4df, var(--paper));
  color: #1d1a14; border: calc(var(--u)*4) solid var(--ink); border-radius: calc(var(--u)*6);
  box-shadow: calc(var(--u)*8) calc(var(--u)*8) 0 rgba(0,0,0,.6); transform: rotate(-.8deg);
  display: flex; flex-direction: column; gap: calc(var(--u)*6); overflow: hidden;
}
.masthead { display: flex; justify-content: space-between; align-items: baseline; border-bottom: calc(var(--u)*4) double #1d1a14; padding-bottom: calc(var(--u)*4); }
.masthead span:first-child { font-family: var(--display); font-size: calc(var(--u)*44); letter-spacing: .05em; }
.paper-day { font-size: calc(var(--u)*24); font-weight: 600; color: #5d5440; }
.headline { font-weight: 700; font-size: calc(var(--u)*40); line-height: 1.15; }
.headline.fresh { animation: press .5s ease-out; }
@keyframes press { 0% { transform: scale(1.3) rotate(-3deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.paper.tabloid { background: radial-gradient(circle, rgba(0,0,0,.08) 1px, transparent 1.5px) 0 0 / 6px 6px, linear-gradient(180deg, #ffe9ef, #ffd0dc); }

/* ===== Minigame layer ===== */
.mg { position: absolute; inset: 0; z-index: 20; background: #000; display: none; }
.mg.on { display: block; }
.mg > canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.mg-hud {
  position: absolute; left: 0; right: 0; top: 0; height: calc(var(--u)*150); z-index: 2; pointer-events: none;
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: calc(var(--u)*20);
  padding: calc(var(--u)*14) calc(var(--u)*24) calc(var(--u)*30);
  background: linear-gradient(180deg, rgba(6,18,27,.95), rgba(6,18,27,.7));
  border-bottom: calc(var(--u)*4) solid var(--cyan); box-shadow: 0 0 calc(var(--u)*20) var(--cyan-glow);
}
.mg-title { font-family: var(--display); font-size: calc(var(--u)*58); letter-spacing: .03em; color: #fff; text-shadow: calc(var(--u)*3) calc(var(--u)*3) 0 var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-score { font-family: var(--display); font-size: calc(var(--u)*70); color: var(--gold); text-shadow: calc(var(--u)*3) calc(var(--u)*3) 0 var(--ink); min-width: 3ch; text-align: right; }
.mg-score.pop { animation: scorePop .25s; }
@keyframes scorePop { 50% { transform: scale(1.25); } }
.mg-pause { pointer-events: auto; width: calc(var(--u)*84); height: calc(var(--u)*84); }
.mg-time { position: absolute; left: calc(var(--u)*24); right: calc(var(--u)*24); bottom: calc(var(--u)*10); height: calc(var(--u)*14); border-radius: 99px; background: rgba(0,0,0,.6); overflow: hidden; }
.mg-time-fill { height: 100%; width: 100%; background: linear-gradient(90deg, var(--cyan), #9ff0ff); border-radius: inherit; }
.mg-time-fill.hurry { background: linear-gradient(90deg, var(--bad), #ffb0b0); }

.mg-card { position: absolute; inset: 0; z-index: 3; display: none; align-items: center; justify-content: center; padding: calc(var(--u)*60); background: rgba(3,10,16,.72); }
.mg-card.on { display: flex; }

/* Shared comic panel */
.panel {
  width: 100%; max-height: 100%; overflow-y: auto; position: relative;
  background: linear-gradient(180deg, #13374d, #0b2131); border: calc(var(--u)*6) solid var(--ink); border-radius: calc(var(--u)*30);
  box-shadow: 0 0 0 calc(var(--u)*4) var(--cyan), calc(var(--u)*14) calc(var(--u)*14) 0 rgba(0,0,0,.7);
  padding: calc(var(--u)*44) calc(var(--u)*48); text-align: center; animation: panelIn .35s cubic-bezier(.3,1.5,.5,1);
}
@keyframes panelIn { from { transform: scale(.7) rotate(-3deg); opacity: 0; } }
.panel.villain { box-shadow: 0 0 0 calc(var(--u)*4) #ff6a74, calc(var(--u)*14) calc(var(--u)*14) 0 rgba(0,0,0,.7); }
.panel h2 { font-family: var(--display); font-weight: 400; font-size: calc(var(--u)*96); line-height: .95; letter-spacing: .03em; color: var(--gold);
  text-shadow: calc(var(--u)*5) calc(var(--u)*5) 0 var(--ink); margin-bottom: calc(var(--u)*20); transform: rotate(-2deg); }
.panel h2.bad { color: #ff6a74; } .panel h2.cool { color: var(--cyan); }
.panel p { font-size: calc(var(--u)*40); line-height: 1.35; color: #dcf1f8; margin-bottom: calc(var(--u)*18); }
.panel .kicker { font-family: var(--display); font-size: calc(var(--u)*44); color: var(--cyan); letter-spacing: .05em; margin-bottom: calc(var(--u)*6); }
.panel .how { display: flex; align-items: center; gap: calc(var(--u)*24); text-align: left; background: rgba(0,0,0,.35); border-radius: calc(var(--u)*20); padding: calc(var(--u)*24); margin: calc(var(--u)*16) 0 calc(var(--u)*28); }
.panel .how canvas { flex: none; width: calc(var(--u)*170); height: calc(var(--u)*170); border-radius: calc(var(--u)*16); background: #08202e; }
.panel .how p { margin: 0; font-weight: 600; font-size: calc(var(--u)*40); }
.btns { display: flex; flex-direction: column; gap: calc(var(--u)*22); margin-top: calc(var(--u)*24); }
.btn {
  min-height: calc(var(--u)*120); padding: calc(var(--u)*16) calc(var(--u)*30); border-radius: calc(var(--u)*26);
  background: linear-gradient(180deg, #ffe08a, var(--gold) 55%, var(--gold-dk)); color: var(--ink);
  border: calc(var(--u)*5) solid var(--ink); box-shadow: inset 0 calc(var(--u)*4) 0 rgba(255,255,255,.6), 0 calc(var(--u)*9) 0 var(--ink);
  font-family: var(--display); font-size: calc(var(--u)*60); letter-spacing: .04em; line-height: 1.05;
}
.btn:active { transform: translateY(calc(var(--u)*7)); box-shadow: inset 0 calc(var(--u)*4) 0 rgba(255,255,255,.6), 0 calc(var(--u)*2) 0 var(--ink); }
.btn.alt { background: linear-gradient(180deg, #3d8bb3, var(--teal) 60%, #133a51); color: #fff; }
.btn.danger { background: linear-gradient(180deg, #e0505c, var(--crimson) 60%, #7d1520); color: #fff; }
.btn small { display: block; font-family: var(--body); font-weight: 600; font-size: calc(var(--u)*30); letter-spacing: 0; opacity: .85; margin-top: calc(var(--u)*4); }

.grade { font-family: var(--display); font-size: calc(var(--u)*230); line-height: .9; transform: rotate(-6deg); display: inline-block;
  -webkit-text-stroke: calc(var(--u)*8) var(--ink); paint-order: stroke fill; text-shadow: calc(var(--u)*10) calc(var(--u)*10) 0 var(--ink); animation: stamp .45s cubic-bezier(.3,1.7,.5,1); }
@keyframes stamp { from { transform: scale(3) rotate(10deg); opacity: 0; } }
.grade.S { color: #ffe066; } .grade.A { color: var(--good); } .grade.B { color: var(--cyan); } .grade.C { color: var(--warn); } .grade.D { color: var(--bad); }
.deltas { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u)*14); margin: calc(var(--u)*20) 0 calc(var(--u)*8); }
.chip { display: inline-flex; align-items: center; gap: calc(var(--u)*8); padding: calc(var(--u)*8) calc(var(--u)*18); border-radius: 99px; border: calc(var(--u)*4) solid var(--ink); font-weight: 700; font-size: calc(var(--u)*34); background: #183f56; color: #fff; }
.chip svg { width: calc(var(--u)*38); height: calc(var(--u)*38); }
.chip.up { background: #1f6b3a; } .chip.down { background: #7a1f2a; }
.chip.up svg { color: #b6ffbf; } .chip.down svg { color: #ffc2c7; }
.note { font-size: calc(var(--u)*32); color: #9fc7d6; margin-top: calc(var(--u)*12); }
.count { font-family: var(--display); font-size: calc(var(--u)*320); color: #fff; -webkit-text-stroke: calc(var(--u)*10) var(--ink); paint-order: stroke fill; text-shadow: calc(var(--u)*14) calc(var(--u)*14) 0 var(--ink); animation: countIn .9s ease-out; }
@keyframes countIn { from { transform: scale(2.4); opacity: 0; } 30% { transform: scale(1); opacity: 1; } }

/* ===== Modal / toast ===== */
.modal { position: absolute; inset: 0; z-index: 40; display: none; align-items: center; justify-content: center; padding: calc(var(--u)*60); background: rgba(3,10,16,.78); }
.modal.on { display: flex; }
.modal-box { width: 100%; max-height: 100%; display: flex; }
.headline-quote { background: var(--paper); color: #1d1a14; border: calc(var(--u)*4) solid var(--ink); padding: calc(var(--u)*24); font-weight: 700; font-size: calc(var(--u)*42); transform: rotate(-1deg); margin: calc(var(--u)*10) 0 calc(var(--u)*24); }
.power-list { display: flex; flex-direction: column; gap: calc(var(--u)*14); margin: calc(var(--u)*16) 0; }
.power-list .power { justify-content: center; font-size: calc(var(--u)*40); padding: calc(var(--u)*12); }
.power-list .power svg { width: calc(var(--u)*44); height: calc(var(--u)*44); }
.settings-row { display: flex; align-items: center; justify-content: space-between; font-size: calc(var(--u)*42); font-weight: 600; padding: calc(var(--u)*18) 0; border-bottom: calc(var(--u)*3) solid rgba(40,200,232,.2); }
.toggle { width: calc(var(--u)*150); height: calc(var(--u)*76); border-radius: 99px; background: #2b3d48; border: calc(var(--u)*4) solid var(--ink); position: relative; }
.toggle::after { content: ''; position: absolute; top: calc(var(--u)*6); left: calc(var(--u)*6); width: calc(var(--u)*56); height: calc(var(--u)*56); border-radius: 50%; background: #fff; transition: left .2s; }
.toggle.on { background: var(--good); } .toggle.on::after { left: calc(var(--u)*82); }

.toast {
  position: absolute; z-index: 50; left: 50%; top: calc(var(--u)*1180); transform: translate(-50%, 0) scale(.6); opacity: 0;
  padding: calc(var(--u)*16) calc(var(--u)*34); border-radius: calc(var(--u)*20); border: calc(var(--u)*5) solid var(--ink);
  background: #fff; color: var(--ink); font-family: var(--display); font-size: calc(var(--u)*50); letter-spacing: .03em; white-space: nowrap;
  box-shadow: calc(var(--u)*7) calc(var(--u)*7) 0 var(--ink); pointer-events: none; transition: opacity .2s, transform .3s cubic-bezier(.3,1.6,.5,1);
}
.toast.on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.toast.good { background: var(--good); } .toast.bad { background: var(--bad); color: #fff; } .toast.gold { background: var(--gold); }

/* ===== Title & character select ===== */
.title-screen { position: absolute; inset: 0; z-index: 30; display: none; overflow: hidden; background: #0b2131; }
.title-screen.on { display: block; }
.ts-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.1) brightness(.75); }
.ts-rays { position: absolute; left: 50%; top: 42%; width: 260%; aspect-ratio: 1; transform: translate(-50%,-50%);
  background: repeating-conic-gradient(rgba(246,184,48,.22) 0 8deg, transparent 8deg 16deg); animation: spin 60s linear infinite; }
@keyframes spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
.ts-logo { position: absolute; left: 0; right: 0; top: calc(var(--u)*120); text-align: center; transform: rotate(-4deg); }
.ts-logo .l1, .ts-logo .l2 { display: block; font-family: var(--display); line-height: .82; letter-spacing: .02em; -webkit-text-stroke: calc(var(--u)*14) var(--ink); paint-order: stroke fill; text-shadow: calc(var(--u)*16) calc(var(--u)*16) 0 var(--ink); }
.ts-logo .l1 { font-size: calc(var(--u)*230); color: #fff; }
.ts-logo .l2 { font-size: calc(var(--u)*270); color: var(--gold); }
.ts-logo .l1 em { font-style: normal; color: var(--cyan); font-size: .6em; vertical-align: middle; margin: 0 .1em; }
.ts-chars { position: absolute; left: 0; right: 0; bottom: calc(var(--u)*560); height: calc(var(--u)*820); }
.ts-chars img { position: absolute; bottom: 0; height: 100%; filter: drop-shadow(calc(var(--u)*10) calc(var(--u)*14) 0 rgba(0,0,0,.6)); }
.ts-chars > img:nth-child(1) { left: calc(var(--u)*-60); height: 82%; filter: brightness(.9) drop-shadow(calc(var(--u)*10) calc(var(--u)*14) 0 rgba(0,0,0,.6)); }
.ts-chars > img:nth-child(2) { left: 50%; transform: translateX(-50%); }
.ts-chars > img:nth-child(3) { right: calc(var(--u)*-60); height: 82%; filter: brightness(.9) drop-shadow(calc(var(--u)*10) calc(var(--u)*14) 0 rgba(0,0,0,.6)); }
.ts-menu { position: absolute; left: calc(var(--u)*120); right: calc(var(--u)*120); bottom: calc(var(--u)*110); display: flex; flex-direction: column; gap: calc(var(--u)*28); }
.ts-menu .btn { min-height: calc(var(--u)*140); font-size: calc(var(--u)*70); }
.ts-ver { position: absolute; right: calc(var(--u)*24); bottom: calc(var(--u)*20); font-size: calc(var(--u)*24); color: rgba(255,255,255,.4); }

.picker { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u)*22); margin: calc(var(--u)*20) 0; }
.pick { position: relative; border-radius: calc(var(--u)*24); border: calc(var(--u)*5) solid var(--ink); background: linear-gradient(180deg, #2a6f93, #133a51);
  box-shadow: 0 0 0 calc(var(--u)*3) rgba(40,200,232,.5); padding: calc(var(--u)*12) calc(var(--u)*8) calc(var(--u)*16); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u)*4); transition: transform .15s; }
.pick img { height: calc(var(--u)*250); object-fit: contain; }
.pick b { font-family: var(--display); font-weight: 400; font-size: calc(var(--u)*46); letter-spacing: .03em; color: #fff; }
.pick span { font-size: calc(var(--u)*28); color: #bfe3ef; }
.pick.sel { transform: scale(1.04); background: linear-gradient(180deg, #ffe08a, var(--gold) 60%, var(--gold-dk)); box-shadow: 0 0 0 calc(var(--u)*5) #fff, 0 0 calc(var(--u)*30) rgba(246,184,48,.8); }
.pick.sel b { color: var(--ink); } .pick.sel span { color: #3d2c06; }
.name-row { display: flex; gap: calc(var(--u)*16); margin-top: calc(var(--u)*10); }
.name-row input { flex: 1; min-width: 0; font: inherit; font-weight: 600; font-size: calc(var(--u)*44); padding: calc(var(--u)*18) calc(var(--u)*24);
  border-radius: calc(var(--u)*20); border: calc(var(--u)*5) solid var(--ink); background: #fff; color: var(--ink); user-select: text; -webkit-user-select: text; }
.name-row .icon-btn { width: calc(var(--u)*110); height: calc(var(--u)*100); border-radius: calc(var(--u)*20); background: var(--gold); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .char, .emote.on, .ts-rays, .slot.now, .go.ready { animation: none !important; }
}
.goal { margin-top: calc(var(--u)*6); font-size: calc(var(--u)*24); line-height: 1.25; color: #9fc7d6; }
.goal b { color: var(--gold); font-weight: 600; }
.goal.villain b { color: #ff8a92; }

/* Character expansion */
.wardrobe-btn { position: absolute; z-index: 6; right: calc(var(--u)*20); bottom: calc(var(--u)*24); padding: calc(var(--u)*15) calc(var(--u)*24); background: #0c2c40; border: calc(var(--u)*3) solid var(--cyan); border-radius: calc(var(--u)*18); color: #fff; font-family: var(--display); font-size: calc(var(--u)*38); box-shadow: 0 calc(var(--u)*4) calc(var(--u)*12) #0008; }
.wardrobe-genders { display: flex; gap: calc(var(--u)*14); margin-bottom: calc(var(--u)*14); }
.wardrobe-genders button { flex: 1; }
.wardrobe-forms { display: grid; grid-template-columns: repeat(3,1fr); gap: calc(var(--u)*10); }
.wardrobe-tab { padding: calc(var(--u)*14) calc(var(--u)*8); border: calc(var(--u)*3) solid #40809b; border-radius: calc(var(--u)*12); background: #092334; font-size: calc(var(--u)*30); }
.wardrobe-tab.selected { background: var(--gold); color: var(--ink); border-color: #ffe7aa; }
.wardrobe-preview { display: flex; flex-direction: column; align-items: center; margin: calc(var(--u)*20) 0 calc(var(--u)*10); border-radius: calc(var(--u)*24); background: radial-gradient(ellipse at 50% 55%, #235d7a, #071723 75%); border: calc(var(--u)*3) solid #34728d; overflow: hidden; }
.wardrobe-preview.evil { background: radial-gradient(ellipse at 50% 55%, #632537, #180d24 75%); border-color: #9e4156; }
.wardrobe-preview img { height: calc(var(--u)*470); width: 90%; object-fit: contain; padding: calc(var(--u)*15); }
.wardrobe-preview figcaption { font-family: var(--display); color: var(--gold); font-size: calc(var(--u)*52); padding-bottom: calc(var(--u)*12); }
.panel .wardrobe-desc { font-size: calc(var(--u)*30); min-height: calc(var(--u)*72); margin-bottom: calc(var(--u)*10); }
.wardrobe-looks { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: calc(var(--u)*10); }
.wardrobe-look { display: flex; flex-direction: column; align-items: center; background: #071c29; border: calc(var(--u)*3) solid #316078; border-radius: calc(var(--u)*12); padding: calc(var(--u)*8) calc(var(--u)*4); }
.wardrobe-look img { width: 100%; height: calc(var(--u)*160); object-fit: contain; }
.wardrobe-look span { font-size: calc(var(--u)*24); line-height: 1.15; margin-top: calc(var(--u)*6); }
.wardrobe-look.selected { background: #28495d; border-color: var(--gold); box-shadow: 0 0 0 calc(var(--u)*2) var(--gold); }
.wardrobe-equip { width: 100%; min-height: calc(var(--u)*90); font-size: calc(var(--u)*44); margin-top: calc(var(--u)*20); }
.wardrobe-equip:disabled { background: #24465a; color: #bed3de; cursor: default; box-shadow: none; transform: none; }
.panel .wardrobe-note { color: #aacbd9; font-size: calc(var(--u)*27); margin: calc(var(--u)*14) 0 0; }
.wardrobe-tab:focus-visible, .wardrobe-look:focus-visible, .wardrobe-btn:focus-visible { outline: calc(var(--u)*5) solid white; outline-offset: calc(var(--u)*3); }
.ts-menu { bottom: calc(var(--u)*95); gap: calc(var(--u)*18); }
.ts-menu .btn { min-height: calc(var(--u)*115); font-size: calc(var(--u)*58); }
.ts-chars { bottom: calc(var(--u)*650); height: calc(var(--u)*740); }

/* Sprite transformation sweep */
.char-next { position: absolute; left: 0; top: 0; }
.morph-band {
  position: absolute; left: -12%; right: -12%; height: 3.2%; transform: translateY(50%); pointer-events: none; border-radius: 50%;
  background: radial-gradient(ellipse at center, #fff 0%, var(--glow) 38%, transparent 72%);
  box-shadow: 0 0 calc(var(--u)*50) calc(var(--u)*10) var(--glow);
}
.wardrobe-look.locked img, .wardrobe-preview.locked img { filter: brightness(0) drop-shadow(0 0 calc(var(--u)*6) #6fb3cf); opacity: .7; }
.wardrobe-look.locked span::before { content: '\1F512  '; }
.wardrobe-lock { color: var(--gold); font-weight: 600; }
.ts-hero { position: absolute; left: 50%; bottom: 0; height: 100%; aspect-ratio: 640 / 1160; transform: translateX(-50%); }
.ts-hero img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(calc(var(--u)*10) calc(var(--u)*14) 0 rgba(0,0,0,.6)); }

.name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.name.long { font-size: calc(var(--u)*46); }
.goal { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Look tag under the rank caption: build and outfit */
.build-tag {
  position: absolute; left: calc(var(--u)*30); top: calc(var(--u)*96); max-width: 75%;
  padding: calc(var(--u)*5) calc(var(--u)*16); border-radius: 99px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: rgba(6,18,27,.82); color: #fff; font-weight: 600; font-size: calc(var(--u)*26);
  border: calc(var(--u)*3) solid var(--tag, var(--cyan)); box-shadow: 0 0 calc(var(--u)*12) var(--tag, var(--cyan));
}
.build-tag:empty { display: none; }

/* Collection */
.gallery-count { margin: 0 0 calc(var(--u)*6); }
.gallery-count b { color: var(--gold); }
.gallery-groups { display: flex; flex-direction: column; gap: calc(var(--u)*16); margin-top: calc(var(--u)*10); text-align: left; }
.gallery-group h3 { font-family: var(--display); font-weight: 400; font-size: calc(var(--u)*40); letter-spacing: .03em; color: var(--cyan); margin-bottom: calc(var(--u)*6); }
.gallery-group h3 small { font-family: var(--body); font-size: calc(var(--u)*24); color: #9fc7d6; letter-spacing: 0; margin-left: calc(var(--u)*8); }
.gallery-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(var(--u)*10); }
.gallery-row .wardrobe-look img { height: calc(var(--u)*150); }
.wardrobe-genders .wardrobe-tab { min-width: 0; }
.panel .wardrobe-preview img { height: calc(var(--u)*430); }

/* Inked comic print treatment for the illustrated character art. */
:root {
  --ink: #0d1824;
  --panel: #173b4a;
  --cyan: #7bd0cf;
  --cyan-glow: rgba(79, 169, 172, .2);
  --teal: #24566b;
  --gold: #eabe54;
  --gold-dk: #ba8429;
  --crimson: #a83947;
  --paper: #f2e6cc;
  --text: #f8efdd;
}
html, body { background: #101b25; }
#app {
  background:
    radial-gradient(circle, rgba(239,201,107,.13) 1px, transparent 1.5px) 0 0 / 12px 12px,
    radial-gradient(ellipse at 50% 45%, #326277, #121e2b 72%);
}
#root { background: #132838; box-shadow: 0 calc(var(--u)*20) calc(var(--u)*90) #03090dcc; }
.stage { background: #6a8792; }
.stage-bg { filter: saturate(.9) contrast(1.06); }
.char { filter: drop-shadow(0 calc(var(--u)*15) calc(var(--u)*8) rgba(7,14,20,.65)); }
.name, .loc, .ts-logo .l1, .ts-logo .l2 { text-shadow: calc(var(--u)*5) calc(var(--u)*5) 0 #07131c; }
.name { color: #f8efdb; }
.rank, .loc { color: #87d4d0; }
.job, .stat-name, .day, .slot-name { color: #cce1dd; }
.idcard { border-color: #d6b55b; }
.bar { border-color: #091721; box-shadow: none; }
.bar i { background: linear-gradient(#a8e6d9,#57bdb8 62%,#318d93); }
.power { background: #324053; border-color: #d6bb72; color: #fbedd3; }
.act, .btn.alt {
  background: linear-gradient(175deg,#568fa0 0%,#2d6375 48%,#1b4052 49%,#153445 100%);
  border-color: #0a1721;
  box-shadow: inset 0 calc(var(--u)*4) 0 #b8e3d580, 0 calc(var(--u)*7) 0 #08121c;
}
.act svg { color: #f0c762; }
.act.danger, .btn.danger { background: linear-gradient(#d46969,#a83a4a 55%,#742636); }
.go, .btn, .pick.sel {
  background: linear-gradient(175deg,#ffe3a0,#e9b94e 60%,#bb842c);
  border-color: #111923;
}
.icon-btn, .wardrobe-btn {
  background: linear-gradient(#517f8d,#214b5d);
  border-color: #e3c46f;
  box-shadow: 0 calc(var(--u)*5) 0 #0a1721;
}
.slot { background: #183948db; border-color: #779b9f; }
.slot.planned { background: linear-gradient(#437d86,#285e69); border-color: #e1c46d; box-shadow: none; }
.slot.planned.danger { background: linear-gradient(#a94954,#6c2938); border-color: #ecc6aa; }
.slot.done { background: #152b37; }
.paper { background: linear-gradient(#fff3d6,#e9d7ac); box-shadow: calc(var(--u)*7) calc(var(--u)*7) 0 #07131cb9; }
.panel {
  background:
    radial-gradient(circle, #92bac21c 1px, transparent 1.5px) 0 0 / 12px 12px,
    linear-gradient(#315d6c,#162e3f);
  border-color: #101b23;
  box-shadow: 0 0 0 calc(var(--u)*4) #d9bd6c, calc(var(--u)*13) calc(var(--u)*13) 0 #07131cbb;
}
.mg-hud { background: linear-gradient(#172f3bf5,#1b3544dd 72%,transparent); }
.title-screen { background: #204052; }
.ts-bg { filter: saturate(1.05) brightness(.72); }
.ts-rays { background: repeating-conic-gradient(#f1cb6266 0 8deg, transparent 8deg 17deg); }
.pick, .wardrobe-look, .wardrobe-tab { border-color: #d4bb77; }
.pick { background: linear-gradient(#568798,#244f63); box-shadow: 0 calc(var(--u)*8) 0 #09141e; }
.wardrobe-preview { border-color: #d9bd6c; background: radial-gradient(ellipse at 50% 60%,#397284,#102432 78%); }