/* Kaiju Rampage */
:root{
  --kj-bg:#05070f;
  --kj-ink:#f1f5ff;
  --kj-muted:#9aa6c4;
  --kj-panel:rgba(10,14,28,.86);
  --kj-line:rgba(140,170,255,.18);
  --kj-hot:#ff5a3c;
  --kj-amber:#ffc24b;
  --kj-cyan:#5fe0ff;
  --kj-green:#57f29a;
  --kj-display:'Orbitron',system-ui,sans-serif;
  --kj-body:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--kj-bg);color:var(--kj-ink);font-family:var(--kj-body);-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* iOS Safari zooms the page into any focused field under 16px and the game never zooms back out. */
@media (pointer:coarse){input,select,textarea{font-size:16px!important}}
button,input,select{font:inherit;color:inherit}
[hidden]{display:none!important}
.kj-canvas{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;display:block;touch-action:none;outline:none}

/* ---------- shared bits ---------- */
.kj-icon{width:42px;height:42px;border-radius:12px;border:1px solid var(--kj-line);background:rgba(8,12,24,.72);color:var(--kj-ink);font-size:18px;cursor:pointer;display:grid;place-items:center;text-decoration:none}
.kj-icon:hover{border-color:rgba(160,190,255,.5)}
.kj-icon.off{opacity:.45}
.kj-eyebrow{font-family:var(--kj-display);font-size:11px;letter-spacing:3px;color:var(--kj-amber)}
.kj-label{font-family:var(--kj-display);font-size:11px;letter-spacing:2.5px;color:var(--kj-muted);margin-bottom:8px}
.kj-btn{color:var(--kj-ink);border:1px solid rgba(160,190,255,.35);background:rgba(40,56,100,.55);border-radius:10px;padding:10px 14px;cursor:pointer;font-weight:700;letter-spacing:.5px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.kj-btn:hover{background:rgba(60,80,140,.7)}
.kj-btn.ghost{background:transparent}
.kj-btn.wide{width:100%;margin-top:10px}
.kj-go{width:100%;border:0;border-radius:14px;padding:16px 18px;cursor:pointer;font-family:var(--kj-display);font-weight:900;font-size:20px;letter-spacing:3px;color:#1a0904;background:linear-gradient(180deg,#ff8a4c,#ff4b2b);box-shadow:0 6px 0 #8f2312,0 10px 30px rgba(255,80,40,.35);transition:transform .08s}
.kj-go:active{transform:translateY(3px);box-shadow:0 3px 0 #8f2312}
.kj-back{position:fixed;left:14px;top:14px;z-index:30;width:42px;height:42px;border-radius:12px;border:1px solid var(--kj-line);background:rgba(8,12,24,.72);color:var(--kj-ink);display:grid;place-items:center;text-decoration:none;font-size:20px}

/* ---------- menu ---------- */
.kj-menu{position:fixed;inset:0;z-index:10;pointer-events:none}
.kj-menu > *{pointer-events:auto}
.kj-menu-tools{position:fixed;right:14px;top:14px;display:flex;gap:8px;z-index:30}
.kj-pins{position:fixed;inset:0;pointer-events:none;z-index:5}
.kj-pin{position:absolute;left:0;top:0;pointer-events:auto;transform-origin:0 0;margin:0;padding:3px 8px 3px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(6,10,22,.72);font-family:var(--kj-display);font-size:10px;letter-spacing:1.5px;white-space:nowrap;cursor:pointer;translate:10px -50%}
.kj-pin::before{content:"";position:absolute;left:6px;top:50%;width:6px;height:6px;margin-top:-3px;background:var(--pin);box-shadow:0 0 8px var(--pin)}
.kj-pin.custom{border-style:dashed}
.kj-lab-link{display:block;margin-top:8px;text-align:center;text-decoration:none;font-size:10px;letter-spacing:.5px}
.kj-pin.locked{opacity:.55;filter:grayscale(.8)}
.kj-pin-grade{font-style:normal;margin-left:6px;padding:0 5px;border-radius:4px;font-weight:900;color:#0b0d16;background:#9aa3ad}
.kj-pin-outcome{font-style:normal;font-size:.7em;margin-left:6px;padding:1px 5px;border-radius:4px;font-weight:700;letter-spacing:.5px;color:#151d29;background:#b7c5d7}
.kj-pin{max-width:calc(100vw - 32px);white-space:normal;overflow-wrap:anywhere}
.kj-pin-outcome.survived{background:#83edb2;color:#102b20}
.kj-cityoutcome{margin-top:6px;font-size:12px;font-weight:700;line-height:1.4;color:var(--kj-muted)}
.kj-cityoutcome.survived{color:#83edb2}
.kj-cityoutcome.scored{color:#c3d2e4}
.gS{--gc:#ffd84a}.gA{--gc:#ff8a4c}.gB{--gc:#7fe0ff}.gC{--gc:#7dff8a}.gD{--gc:#9aa3ad}
.kj-pin-grade.gS,.kj-pin-grade.gA,.kj-pin-grade.gB,.kj-pin-grade.gC,.kj-pin-grade.gD{background:var(--gc)}
.kj-go:disabled{filter:grayscale(1);opacity:.6;cursor:not-allowed;transform:none}
.kj-citylock{margin-top:6px;font-size:13px;color:var(--kj-hot)}
.kj-cityboss{margin-top:6px;font-size:13px;font-weight:700;color:#ff6a4d;line-height:1.4}
.kj-pin-boss{font-style:normal;margin-left:6px;padding:0 5px;border-radius:4px;font-weight:900;color:#fff;background:#d7261e;box-shadow:0 0 8px rgba(255,60,40,.8)}
.kj-cityarmy{margin-top:4px;font-size:12px;color:var(--kj-muted);letter-spacing:1px}
@keyframes kjGradePop{0%{transform:scale(2.2)}100%{transform:scale(1)}}
.kj-grade{font-family:var(--kj-display);font-size:84px;line-height:1;font-weight:900;color:var(--gc,#fff);text-shadow:0 0 30px var(--gc,#fff);margin:4px 0 2px;animation:kjGradePop .6s ease-out}
.kj-gradenote{font-size:13px;color:var(--kj-muted);margin-bottom:10px;min-height:18px}
.kj-unlock{font-size:15px;font-weight:900;color:var(--kj-green);margin-bottom:10px}
.kj-missions{list-style:none;margin:0 0 16px;padding:10px 12px;border:1px solid var(--kj-line);border-radius:12px;background:rgba(255,255,255,.03);font-size:14px;line-height:1.6;color:var(--kj-muted);text-align:left}
.kj-missions::before{content:"MISSIONS";display:block;font-family:var(--kj-display);font-size:10px;letter-spacing:2px;color:var(--kj-ink);margin-bottom:2px}
.kj-missions li.done{color:var(--kj-green)}
.kj-missions li.fail{text-decoration:line-through;opacity:.5}
.kj-resmissions{list-style:none;margin:0 0 12px;padding:0;font-size:13px;text-align:left;display:grid;gap:3px}
.kj-resmissions li.done{color:var(--kj-green)}
.kj-resmissions li{color:var(--kj-muted)}
.kj-citymissions{margin-top:6px;font-size:12px;color:var(--kj-muted);line-height:1.5}
.kj-boss{margin:8px auto 0;width:100%;text-align:center;font-family:var(--kj-display);font-size:11px;letter-spacing:3px;color:#cfe9ff;text-shadow:0 0 10px rgba(95,216,255,.7)}
.kj-boss .kj-mbar{height:10px;margin-top:3px;border:1px solid rgba(95,216,255,.5)}
.kj-boss .kj-mbar i{background:linear-gradient(90deg,#5fd8ff,#e9fbff)}
.kj-mcard.locked{opacity:.5;filter:grayscale(.85)}
.kj-mlock{display:block;margin-top:6px;font-size:12px;color:var(--kj-hot)}
.kj-pin.sel{background:var(--pin);color:#0b0d16;border-color:transparent;font-weight:900;z-index:2}
.kj-pin.sel::before{background:#0b0d16;box-shadow:none}
/* The selected / hovered city label reads at twice the size. */
.kj-pin.sel,.kj-pin.hov{font-size:20px;padding:5px 14px 5px 28px;z-index:3}
.kj-pin.sel::before,.kj-pin.hov::before{left:10px;width:11px;height:11px;margin-top:-5.5px}
.kj-panel{position:fixed;left:14px;top:66px;bottom:14px;width:min(400px,calc(100vw - 28px));overflow-y:auto;z-index:20;display:flex;flex-direction:column;gap:8px;scrollbar-width:thin;padding-bottom:4px}
.kj-sec{background:var(--kj-panel);border:1px solid var(--kj-line);border-radius:16px;padding:14px 16px}
.kj-title-sec{padding:16px}
.kj-title{font-family:var(--kj-display);font-weight:900;font-size:34px;line-height:.95;margin:6px 0 6px;letter-spacing:2px}
.kj-title span{font-size:24px;letter-spacing:1px;color:var(--kj-hot);text-shadow:0 0 22px rgba(255,90,60,.45)}
.kj-tag{margin:0;color:var(--kj-muted);font-size:15px}
.kj-planetbar{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.kj-planetbar .kj-btn{min-width:46px;padding:8px 10px;font-size:16px}
.kj-planetbar .kj-btn:disabled{opacity:.3;cursor:default}
.kj-planet{flex:1;min-width:0;text-align:center}
.kj-planet b{display:block;font-family:var(--kj-display);font-weight:900;font-size:22px;letter-spacing:3px}
.kj-planet span{display:block;font-size:12px;color:var(--kj-muted);line-height:1.3}
.kj-search{display:flex;gap:6px}
.kj-search input{flex:1;min-width:0;border-radius:10px;border:1px solid rgba(160,190,255,.3);background:rgba(0,0,0,.35);padding:10px 12px;font-size:16px;outline:none}
.kj-search input:focus{border-color:var(--kj-cyan)}
.kj-citycard{margin-top:10px;border-radius:12px;background:rgba(255,255,255,.04);padding:12px}
.kj-cityname{font-family:var(--kj-display);font-weight:900;font-size:22px;letter-spacing:1.5px;overflow-wrap:anywhere}
.kj-citystyle{display:flex;align-items:center;gap:8px;margin-top:6px}
.kj-dot{width:10px;height:10px;flex:none;box-shadow:0 0 10px currentColor}
.kj-citystyle select{background:rgba(0,0,0,.35);border:1px solid rgba(160,190,255,.3);border-radius:8px;padding:5px 8px;font-size:14px;cursor:pointer}
.kj-citystyle select option{background:#0d1222}
.kj-stylefixed{font-size:14px;font-weight:700;letter-spacing:.5px;color:var(--kj-ink)}
/* City style picker (how the city is built): twice the size. */
#kjStyleSelect{flex:1;min-width:0;font-size:28px;padding:8px 12px;font-family:var(--kj-display);font-weight:700}
#kjCityDot{width:18px;height:18px}
.kj-trackpick{margin-top:0}
.kj-trackpick select{width:100%}
.kj-cityblurb{margin:8px 0 0;font-size:14px;color:var(--kj-muted)}
.kj-citybest{margin-top:6px;font-size:13px;color:var(--kj-amber)}
.kj-hint{margin:10px 0 0;font-size:12.5px;color:var(--kj-muted)}
.kj-monsters{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.kj-mcard{border:1px solid rgba(160,190,255,.22);background:rgba(255,255,255,.03);border-radius:12px;padding:10px 3px;cursor:pointer;text-align:center;font-family:var(--kj-display);font-size:9.5px;letter-spacing:.5px;font-weight:700;overflow-wrap:anywhere}
.kj-mcard i{display:block;width:26px;height:26px;margin:0 auto 6px;border-radius:6px;box-shadow:0 0 14px var(--glow)}
.kj-mcard[aria-checked="true"]{border-color:var(--glow);background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px var(--glow)}
.kj-preview{display:none}
.kj-mtitle{font-family:var(--kj-display);font-size:14px;font-weight:900;letter-spacing:1.5px}
.kj-mblurb{margin:6px 0 10px;font-size:14px;color:var(--kj-muted)}
.kj-stats{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;font-size:11px;font-family:var(--kj-display);letter-spacing:1px;color:var(--kj-muted)}
.kj-skins{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
.kj-skinlbl{font-family:var(--kj-display);font-size:11px;letter-spacing:2px;color:var(--kj-muted);margin-right:4px}
.kj-skin{border:1px solid rgba(160,190,255,.3);background:transparent;border-radius:9px;padding:6px 14px;font-weight:700;font-size:15px;cursor:pointer}
.kj-skin[aria-pressed="true"]{background:var(--kj-ink);color:#0b0d16;border-color:transparent}
.kj-skin.dark[aria-pressed="true"]{background:#5b3a8a;color:#fff;box-shadow:0 0 12px #ff3a5a}
.kj-skin:disabled{opacity:.5;cursor:default}
.kj-skinnote{flex-basis:100%;font-size:12px;color:var(--kj-muted)}
.kj-stats .pips{display:flex;gap:3px;align-items:center}
.kj-stats .pips i{width:16px;height:7px;border-radius:2px;background:rgba(255,255,255,.12)}
.kj-stats .pips i.on{background:var(--glow)}
.kj-opts{display:grid;gap:10px}
.kj-seg{display:flex;gap:4px;flex-wrap:wrap}
.kj-seg button{flex:1;border:1px solid rgba(160,190,255,.25);background:transparent;border-radius:9px;padding:8px 6px;cursor:pointer;font-size:26px;font-weight:700;white-space:nowrap}
.kj-opts .kj-label{font-size:16px}
#kjMenuTrack{font-size:26px;padding:8px 12px;font-family:var(--kj-display);font-weight:700;min-width:0}
.kj-seg button[aria-checked="true"]{background:var(--kj-ink);color:#0b0d16;border-color:transparent}
.kj-modenote{font-size:13px;color:var(--kj-muted);margin:10px 0 12px}

/* ---------- loading ---------- */
.kj-loading{position:fixed;inset:0;z-index:40;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,rgba(30,40,80,.65),rgba(3,4,10,.94))}
.kj-load-card{width:min(420px,86vw);text-align:center}
.kj-load-step{font-family:var(--kj-display);font-size:18px;letter-spacing:2px;margin:12px 0 16px}
.kj-bar{height:10px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.kj-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ff8a4c,#ff4b2b);transition:width .15s}

/* ---------- HUD ---------- */
.kj-hud{position:fixed;inset:0;z-index:17;pointer-events:none;font-family:var(--kj-display)}
.kj-hud button,.kj-hud a{pointer-events:auto}
.kj-top{position:absolute;left:14px;right:14px;top:14px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.kj-hud-clock{position:absolute;left:50%;top:0;transform:translateX(-50%);display:flex;flex-direction:column;justify-content:center;align-items:center;pointer-events:none;text-align:center}
.kj-threat[hidden]{display:none}
.kj-music{font-size:36px;line-height:1}
.kj-row2{position:absolute;left:14px;right:14px;top:166px;display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.kj-readout{max-width:38vw;text-align:right}
#kjLiveGradeRow{white-space:normal;font-size:12px;margin-top:4px}
#kjMissionSummary{font-family:var(--kj-body);font-size:12px;line-height:1.35;color:#fff;text-shadow:0 1px 3px #000;white-space:normal}
.kj-body.touch .kj-row2{top:118px}
.kj-vitals{width:min(520px,58vw)}
/* HP and RAGE at twice the size; desktop's SPCL / ROAR bars stay compact under them. */
.kj-vitals .kj-meter.hp span,.kj-vitals .kj-meter.rage span{font-size:clamp(18px,4.6vw,27px);width:clamp(62px,15vw,96px);-webkit-text-stroke:4px #05060c}
.kj-vitals .kj-meter.hp .kj-mbar,.kj-vitals .kj-meter.rage .kj-mbar{height:18px;border-radius:5px;border:1px solid rgba(0,0,0,.6)}
.kj-vitals .kj-meter.hp,.kj-vitals .kj-meter.rage{margin-top:6px}
.kj-vitals .kj-meter:first-child{margin-top:0}
.kj-body.touch .kj-meter.desk{display:none}
.kj-stat{font-size:16px;font-weight:700;white-space:nowrap;letter-spacing:1px;color:#e9fff0;line-height:1.25;text-shadow:0 1px 4px rgba(0,0,0,.8)}
.kj-stat b{font-weight:900;font-size:21px;color:#fff;-webkit-text-stroke:2.5px #17a34a;paint-order:stroke fill}
.kj-stat.money b{font-size:26px;color:#ffd84a}
.kj-hud-clock .kj-stat{line-height:1.15}
.kj-stat.ppl b{color:#ff9a7a}
.kj-meter{display:flex;align-items:center;gap:8px;margin-top:4px}
.kj-meter span{font-size:13.5px;font-weight:900;letter-spacing:1.5px;width:58px;color:#fff;-webkit-text-stroke:3px #05060c;paint-order:stroke fill;text-shadow:0 1px 4px rgba(0,0,0,.9)}
.kj-mbar{flex:1;height:9px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.kj-mbar i{display:block;height:100%;width:100%;transition:width .12s}
.kj-meter.hp i{background:linear-gradient(90deg,#3ee07a,#a6ff5c)}
.kj-meter.hp.heal i{box-shadow:0 0 10px #8dff7a;filter:brightness(1.35)}
.kj-meter.hp.low i{background:linear-gradient(90deg,#ff3b30,#ff8a4c)}
.kj-meter.rage i{background:linear-gradient(90deg,#ff6a2c,#ffd44b)}
.kj-meter.rage.full i{box-shadow:0 0 12px #ffd44b}
.kj-meter.sp i{background:linear-gradient(90deg,#2f9bff,#8af0ff);transition:width .08s}
.kj-meter.sp.cool i{background:repeating-linear-gradient(135deg,#5b6170 0 5px,#7b8190 5px 10px)}
.kj-meter.sp.cool span{color:var(--kj-hot);font-weight:900}
.kj-audio{display:grid;gap:10px;margin:0 0 16px;padding:12px;border:1px solid var(--kj-line);border-radius:12px;background:rgba(255,255,255,.03);text-align:left}
.kj-arow{display:grid;grid-template-columns:92px 1fr 40px;align-items:center;gap:10px;font-family:var(--kj-display);font-size:11px;letter-spacing:1.5px;color:var(--kj-muted)}
.kj-arow select{grid-column:2 / 4;background:rgba(0,0,0,.35);border:1px solid rgba(160,190,255,.3);border-radius:8px;padding:6px 8px;font-size:14px;color:var(--kj-ink);cursor:pointer}
.kj-arow select option{background:#0d1222}
.kj-arow input[type=range]{width:100%;accent-color:#ff7a3c;cursor:pointer}
.kj-arow b{font-size:12px;color:var(--kj-ink);text-align:right}
.kj-reset{margin-top:10px;color:#ff8a7a;border-color:rgba(255,90,74,.45)}
.kj-reset.armed{background:#d7261e;color:#fff;border-color:transparent;animation:kjPulse .5s infinite alternate}
.kj-reset-note{margin:8px 0 0;font-size:12px;color:var(--kj-muted)}
.kj-arow.kj-check input{justify-self:start;width:20px;height:20px;accent-color:#ff7a3c;cursor:pointer}
.kj-meter.roar i{background:linear-gradient(90deg,#b44dff,#ff7ad9);transition:width .1s}
.kj-meter.roar.cool i{background:repeating-linear-gradient(135deg,#5b6170 0 5px,#7b8190 5px 10px)}
.kj-tb.roar{background:linear-gradient(to top,rgba(200,110,255,.4) var(--sp,100%),rgba(200,110,255,.08) var(--sp,100%))}
.kj-tb.roar.cool{color:rgba(255,255,255,.55)}
.kj-ragebtn{position:absolute;left:50%;bottom:22%;transform:translateX(-50%);pointer-events:auto;border:2px solid #ffe08a;border-radius:16px;padding:10px 26px 8px;font-family:var(--kj-display);font-weight:900;font-size:26px;letter-spacing:4px;color:#fff;cursor:pointer;
  background:linear-gradient(0deg,#ff2a00,#ff8a00 45%,#ffd84a);background-size:100% 220%;
  box-shadow:0 0 18px #ff6a00,0 0 40px rgba(255,90,0,.7),inset 0 0 12px rgba(255,255,255,.5);
  text-shadow:0 0 8px #fff,0 0 16px #6ff;animation:kjFlame .35s infinite alternate,kjZap 1.1s infinite steps(1);z-index:20}
.kj-ragebtn small{display:block;font-size:10px;letter-spacing:2px;opacity:.8}
.kj-body.touch .kj-ragebtn small{display:none}
.kj-ragebtn[hidden]{display:none}
@keyframes kjFlame{0%{background-position:0 0;transform:translateX(-50%) scale(1)}100%{background-position:0 100%;transform:translateX(-50%) scale(1.06)}}
@keyframes kjZap{0%,100%{border-color:#ffe08a}12%{border-color:#7ff6ff;box-shadow:0 0 24px #7ff6ff,0 0 50px rgba(120,240,255,.8)}20%{border-color:#ffe08a}}
.kj-hud.raging{box-shadow:inset 0 0 120px rgba(255,80,0,.35)}
.kj-readout{text-align:right;white-space:nowrap}
.kj-vitals .kj-combo{margin-top:6px;text-align:center;font-size:15px}
.kj-timer{font-size:clamp(40px,11vw,92px);line-height:1;font-weight:900;letter-spacing:2px;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.kj-timer.urgent{color:var(--kj-hot);animation:kjPulse .6s infinite alternate}
.kj-threat{font-size:clamp(11px,3vw,26px);letter-spacing:clamp(1px,.4vw,3px);white-space:nowrap;color:var(--kj-hot);text-shadow:0 0 10px rgba(255,80,40,.6);min-height:18px}
.kj-threat .off{color:rgba(255,255,255,.2);text-shadow:none}

.kj-combo{margin-top:6px;font-size:16px;font-weight:900;color:var(--kj-hot);text-shadow:0 0 12px rgba(255,80,40,.7);animation:kjPop .25s}
.kj-hud-tools{display:flex;gap:8px}
/* Phones: the four tiles sit in a 2x2 block so the big timer has room. */
.kj-body.touch .kj-hud-tools{display:grid;grid-template-columns:repeat(2,42px);gap:6px}
.kj-minimap{display:block;width:140px;height:140px;border-radius:12px;border:1px solid var(--kj-line);background:rgba(0,0,0,.4);image-rendering:pixelated}
.kj-cross{position:absolute;left:50%;top:46%;width:22px;height:22px;margin:-11px 0 0 -11px;opacity:.7}
.kj-cross::before,.kj-cross::after{content:"";position:absolute;background:#fff;box-shadow:0 0 4px #000}
.kj-cross::before{left:10px;top:0;width:2px;height:22px;clip-path:polygon(0 0,100% 0,100% 35%,0 35%,0 65%,100% 65%,100% 100%,0 100%)}
.kj-cross::after{top:10px;left:0;height:2px;width:22px;clip-path:polygon(0 0,35% 0,35% 100%,0 100%,0 0,65% 0,100% 0,100% 100%,65% 100%)}
.kj-toasts{position:absolute;left:50%;top:34%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;max-width:min(460px,86vw);pointer-events:none}
.kj-pops{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.kj-pop{position:absolute;left:0;top:0;font-family:var(--kj-display);font-weight:900;font-size:clamp(22px,5.5vw,30px);white-space:nowrap;-webkit-text-stroke:3px rgba(10,8,4,.85);paint-order:stroke fill;text-shadow:0 3px 0 rgba(0,0,0,.45),0 0 14px rgba(0,0,0,.5);will-change:transform,opacity}
.kj-pop.money{color:#ffd84a}
.kj-pop.heal{color:#7dff8a;font-size:clamp(24px,6vw,32px)}
.kj-pop.bad{color:#ff5a4a;font-size:clamp(22px,5.5vw,30px);letter-spacing:2px}
.kj-pop.move{color:#ff8a4c;font-size:clamp(22px,5.5vw,30px);letter-spacing:2px}
.kj-pop.mil{color:#9fe3ff}
.kj-toast{font-size:14px;font-weight:900;letter-spacing:1px;text-align:center;white-space:nowrap;text-shadow:0 2px 0 rgba(0,0,0,.6),0 0 10px rgba(0,0,0,.5);animation:kjFloatUp 2.4s ease-out forwards}
.kj-toast b{display:inline}
.kj-toast span{color:var(--kj-amber);margin-left:8px;font-size:12px}
.kj-toast.mil span{color:var(--kj-green)}
.kj-toast.bad b{color:var(--kj-hot)}
.kj-toast.big{font-size:18px}
.kj-toast.big b{color:#ffd84a}
@keyframes kjFloatUp{0%{opacity:0;transform:translateY(14px) scale(.9)}12%{opacity:1;transform:translateY(0) scale(1)}70%{opacity:1}100%{opacity:0;transform:translateY(-70px)}}
.kj-banner{position:absolute;left:50%;top:16%;transform:translate(-50%,-50%);text-align:center;opacity:0;transition:opacity .3s;pointer-events:none;width:90vw}
.kj-banner.show{opacity:1;animation:kjBanner .5s ease-out}
.kj-banner b{display:block;font-size:clamp(22px,4vw,40px);font-weight:900;letter-spacing:4px;color:#fff;text-shadow:0 0 30px rgba(255,90,60,.8),0 4px 0 rgba(0,0,0,.4)}
.kj-banner span{display:block;font-size:clamp(13px,2vw,18px);letter-spacing:3px;color:var(--kj-amber);margin-top:6px}
.kj-hint-pop{position:absolute;left:50%;bottom:110px;transform:translateX(-50%);background:rgba(6,9,20,.8);border:1px solid var(--kj-line);border-radius:10px;padding:8px 14px;font-family:var(--kj-body);font-size:15px;max-width:86vw;text-align:center}
/* Clinch tug-of-war: fill = your side; mash PUNCH to push it to the right edge. */
.kj-clinch{position:absolute;left:50%;bottom:24%;transform:translateX(-50%);width:min(64vw,420px);text-align:center;pointer-events:none;z-index:6}
.kj-clinch b{display:block;font-family:var(--kj-display);font-size:clamp(24px,6vw,34px);font-weight:900;letter-spacing:3px;color:#ffd84a;-webkit-text-stroke:3px rgba(10,8,4,.85);paint-order:stroke fill;animation:kjClinchPulse .35s ease-in-out infinite alternate}
.kj-clinch-row{display:flex;align-items:center;gap:8px;margin-top:6px}
.kj-clinch-row span{font-family:var(--kj-display);font-weight:900;font-size:clamp(13px,3.4vw,18px);letter-spacing:1px;-webkit-text-stroke:3px rgba(10,8,4,.85);paint-order:stroke fill;white-space:nowrap}
.kj-clinch-you{color:#ffd84a}
.kj-clinch-boss{color:#ff6a5a;max-width:30%;overflow:hidden;text-overflow:ellipsis}
.kj-clinch-bar{flex:1;height:18px;border:2px solid rgba(255,255,255,.85);border-radius:10px;background:linear-gradient(90deg,#ff5a4a,#7a1c14);overflow:hidden;box-shadow:0 0 16px rgba(0,0,0,.6)}
.kj-clinch-bar i{display:block;height:100%;width:50%;background:linear-gradient(90deg,#ffb547,#ffe98a)}
@keyframes kjClinchPulse{from{transform:scale(1)}to{transform:scale(1.12)}}
/* Every PUNCH tap: the call-out kicks and a POW! bursts off the bar. */
.kj-clinch b.tap{animation:kjClinchTap .16s ease-out}
@keyframes kjClinchTap{0%{transform:scale(1.35);color:#fff}100%{transform:scale(1)}}
.kj-clinch-pows{position:relative;height:0}
.kj-clinch-pow{position:absolute;top:-34px;font-family:var(--kj-display);font-weight:900;font-size:clamp(20px,5vw,28px);color:#fff;-webkit-text-stroke:3px #c2410c;paint-order:stroke fill;animation:kjPow .5s ease-out forwards;pointer-events:none}
@keyframes kjPow{0%{opacity:1;transform:translate(-50%,0) scale(.5) rotate(var(--r))}30%{transform:translate(-50%,-14px) scale(1.25) rotate(var(--r))}100%{opacity:0;transform:translate(-50%,-38px) scale(1) rotate(var(--r))}}
/* Who's winning: the bar glows gold when you're ahead and flashes red when you're slipping. */
.kj-clinch.winning .kj-clinch-bar{border-color:#ffe98a;box-shadow:0 0 18px #ffd84a,0 0 36px rgba(255,200,60,.6)}
.kj-clinch.losing .kj-clinch-bar{animation:kjClinchLose .3s steps(1) infinite}
.kj-clinch.losing b{color:#ff6a5a}
@keyframes kjClinchLose{0%{border-color:#ff3b30;box-shadow:0 0 20px #ff3b30}50%{border-color:rgba(255,255,255,.85);box-shadow:0 0 16px rgba(0,0,0,.6)}}
.kj-hurt{position:absolute;inset:0;box-shadow:inset 0 0 160px rgba(255,30,10,.75);opacity:0;transition:opacity .25s}

/* ---------- touch ---------- */
.kj-touch{position:fixed;inset:0;z-index:16;pointer-events:none;user-select:none;-webkit-user-select:none}
.kj-stick-zone{position:absolute;left:0;bottom:0;width:45vw;height:55vh;pointer-events:auto;touch-action:none}
.kj-stick{position:absolute;left:28px;bottom:34px;width:128px;height:128px;border-radius:50%;border:2px solid rgba(255,255,255,.22);background:rgba(0,0,0,.18)}
.kj-stick i{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:rgba(255,255,255,.3);border:2px solid rgba(255,255,255,.5)}
.kj-look-zone{position:absolute;right:0;top:0;width:55vw;height:100%;pointer-events:auto;touch-action:none}
.kj-buttons{position:absolute;right:12px;bottom:14px;display:grid;grid-template-columns:repeat(3,64px);grid-template-rows:repeat(3,64px);gap:8px;pointer-events:none}
.kj-tb{pointer-events:auto;touch-action:none;border-radius:50%;border:2px solid rgba(255,255,255,.35);background:rgba(10,14,28,.55);font-family:var(--kj-display);font-size:9.5px;font-weight:900;letter-spacing:.5px;color:#fff;display:grid;place-items:center;padding:0}
.kj-tb.held,.kj-tb:active{background:linear-gradient(to top,rgba(255,210,80,.75) var(--chg,0%),rgba(255,120,60,.55) var(--chg,0%))}
.kj-tb.punch{grid-column:3;grid-row:3;width:78px;height:78px;margin:-14px 0 0 -14px;background:rgba(255,90,60,.45)}
.kj-tb.stomp{grid-column:2;grid-row:3}
.kj-tb.swipe{grid-column:3;grid-row:2}
.kj-tb.special{grid-column:1;grid-row:3;background:linear-gradient(to top,rgba(95,224,255,.42) var(--sp,100%),rgba(95,224,255,.08) var(--sp,100%))}
.kj-tb.special.cool{background:linear-gradient(to top,rgba(150,150,160,.35) var(--sp,0%),rgba(255,80,60,.12) var(--sp,0%));color:rgba(255,255,255,.55)}
.kj-tb.jump{grid-column:2;grid-row:2}
.kj-tb.charge{grid-column:1;grid-row:2}
.kj-tb.roar{grid-column:3;grid-row:1}
.kj-tb.grab{grid-column:2;grid-row:1;background:rgba(255,200,80,.45);animation:kjPulse .7s infinite alternate}
.kj-tb.grab[hidden]{display:none}
.kj-body.touch .kj-minimap{width:96px;height:96px}

.kj-body.touch .kj-cross{display:none}

/* ---------- modals ---------- */
.kj-modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:rgba(3,5,12,.72);padding:16px}
.kj-card{width:min(440px,100%);max-height:calc(100dvh - 32px);overflow-y:auto;background:#0b1020;border:1px solid var(--kj-line);border-radius:18px;padding:22px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.kj-card h2{font-family:var(--kj-display);font-weight:900;letter-spacing:3px;margin:6px 0 16px;font-size:26px}
.kj-card.help{text-align:left;width:min(560px,100%)}
.kj-card.help ol{padding-left:20px;margin:0 0 12px;font-size:16px;line-height:1.5}
.kj-card.help li{margin-bottom:8px}
.kj-keys{font-size:14px;color:var(--kj-muted);line-height:1.5}
.kj-rank{font-family:var(--kj-display);font-size:24px;font-weight:900;color:var(--kj-hot);margin:-6px 0 14px;text-shadow:0 0 20px rgba(255,80,40,.5)}
.kj-resgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.kj-resgrid div{background:rgba(255,255,255,.04);border-radius:10px;padding:10px}
.kj-resgrid span{display:block;font-family:var(--kj-display);font-size:9px;letter-spacing:2px;color:var(--kj-muted)}
.kj-resgrid b{font-family:var(--kj-display);font-size:18px}
.kj-resgrid .wide{grid-column:span 2}
.kj-resgrid .wide b{font-size:26px;color:var(--kj-amber)}
.kj-resbest{font-size:14px;color:var(--kj-amber);margin-bottom:14px;min-height:20px}
.kj-error{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:90;background:#2a0b0b;border:1px solid #ff5a3c;border-radius:12px;padding:16px 20px;max-width:90vw;font-size:15px}

@keyframes kjPulse{to{opacity:.55}}
@keyframes kjPop{from{transform:scale(1.5)}}
@keyframes kjBanner{from{transform:translate(-50%,-50%) scale(1.4)}}

/* ---------- small screens ---------- */
@media (max-width:760px), (max-aspect-ratio:1/1){
  .kj-panel{top:auto;left:8px;right:8px;width:auto;bottom:8px;max-height:56dvh}
  .kj-title-sec{display:none}

  .kj-banner{top:30%}

}
.kj-body.touch .kj-hint-pop{bottom:auto;top:44%;font-size:14px}
.kj-body.touch .kj-clinch{bottom:auto;top:47%}

/* target tag + people counter */
.kj-citypop{margin-top:6px;font-size:13px;color:var(--kj-ink);opacity:.85}
.kj-target{position:absolute;left:0;top:0;translate:-50% -100%;pointer-events:none;text-align:center;font-family:var(--kj-display);white-space:nowrap}
.kj-target b{display:block;font-size:11px;letter-spacing:2px;color:#ffb070;text-shadow:0 1px 3px #000,0 0 10px rgba(255,120,40,.6)}
.kj-tbar{display:block;width:90px;height:5px;margin:3px auto 0;border-radius:3px;background:rgba(0,0,0,.5);overflow:hidden;border:1px solid rgba(255,170,100,.5)}
.kj-tbar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff5a3c,#ffb347)}
.kj-card.results{overflow-x:hidden}

/* Only the practice run gets a lesson card; ordinary play keeps its existing HUD. */
.kj-tutorial{position:absolute;top:294px;left:14px;width:min(380px,calc(100vw - 28px));padding:14px;border:1px solid #ffd84a;border-radius:12px;background:rgba(6,10,22,.9);font-family:var(--kj-body);box-shadow:0 4px 20px rgba(0,0,0,.4)}
.kj-hud.training .kj-timer{font-size:clamp(22px,4.4vw,46px)}
.kj-tutorial h2{margin:6px 0;font-family:var(--kj-display);font-size:17px;line-height:1.4;color:#ffd84a}
.kj-tutorial p{margin:8px 0;font-size:14px;line-height:1.45}
.kj-tutorial .kj-eyebrow{font-size:10px;letter-spacing:1px}
.kj-tutorial-direction{color:#ffe58b;font-size:12px!important}
.kj-tutorial-actions{display:flex;gap:8px;margin-top:10px;pointer-events:auto}
.kj-tutorial-actions button{flex:1;font-size:10px;padding:8px 4px;min-height:36px}
.kj-tb.tutorial-cue{border-color:#ffd84a;box-shadow:0 0 0 2px rgba(255,216,74,.5)}
.kj-card.kj-evolution{width:min(600px,100%);text-align:left}
.kj-evolution h2{text-align:center}
#kjEvolutionBalance{display:block;color:#72ffe1;font-size:22px;text-align:center}
.kj-evolution p,.kj-xp-result{font-size:13px;line-height:1.5;color:#c5d2e6}
#kjEvolutionTracks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0}
.kj-evolution-track{border:1px solid var(--kj-line);border-radius:12px;padding:12px;background:#121c30}
.kj-evolution-track h3{font-size:16px;margin:0 0 6px;color:#e4fff5}
.kj-evolution-track p{margin:6px 0}
.kj-evolution-track .kj-btn{white-space:normal;min-height:44px;margin-top:8px}
#kjEvolutionFeedback{min-height:20px;color:#a7ffd4}
.kj-xp-result{border:1px solid #386c65;background:#102723;border-radius:10px;padding:12px;margin:12px 0}
#kjXpStatus,#kjCityDna{color:#83f8d4}
/* The readout is nowrap; let the XP line wrap so it never runs off a phone screen. */
.kj-readout #kjXpStatus{white-space:normal}
@media(max-width:480px){#kjEvolutionTracks{grid-template-columns:1fr}.kj-card.kj-evolution{padding:16px}}
@media (max-width:760px){.kj-hud.training .kj-hud-clock{display:none}.kj-tutorial{top:286px;padding:10px}.kj-tutorial h2{font-size:15px}.kj-tutorial p{font-size:13px}}
.kj-body.touch .kj-tutorial{top:186px}
@media (max-height:500px) and (min-aspect-ratio:4/3){.kj-hud.training .kj-hud-clock{display:none}.kj-hud.training .kj-vitals{width:min(200px,24vw)}.kj-tutorial,.kj-body.touch .kj-tutorial{--lesson-left:max(160px,26vw);top:14px;left:var(--lesson-left);transform:none;width:min(360px,calc(100vw - var(--lesson-left) - 222px));padding:8px}.kj-tutorial p{font-size:11px;margin:5px 0}.kj-tutorial h2{font-size:13px}.kj-tutorial-actions{margin-top:5px}.kj-tutorial-actions button{min-height:30px}}