:root{--cyan:#52f7ff;--pink:#ff4bd8;--violet:#9a6cff;--bg:#050717;--panel:#0b1030ee}
.mode-select{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 12px;color:#dce6ff;font-size:12px;font-weight:800}.mode-select select{max-width:310px;padding:9px 11px;border:1px solid var(--cyan);border-radius:8px;background:#101632;color:#fff;font:inherit}
button:focus-visible{outline:2px solid #fff;outline-offset:3px;box-shadow:0 0 20px var(--cyan)}
.editor-panel{max-height:calc(100% - 4px);padding:8px 12px;overflow-y:auto}.editor-panel .eyebrow{margin:0}.editor-panel h2{margin:0 0 4px}.editor-help,#editorStatus{font-size:11px;color:#9fb2d5;margin:3px 0}.editor-size{display:flex;align-items:center;justify-content:center;gap:10px;margin:5px 0;color:#dce6ff;font-size:11px;font-weight:800}.editor-size select{padding:6px 10px;border:1px solid var(--cyan);border-radius:7px;background:#101632;color:#fff;font:inherit}.editor-panel #editorCanvas{width:min(100%,450px);height:auto;margin:auto;border:1px solid #4468aa;background:#050817;cursor:crosshair;touch-action:none}.editor-actions{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.editor-actions button,#mapEditorBtn{padding:7px 12px;margin-top:4px}.editor-actions #editorPlayBtn{border-color:#ffd65c}#editorStatus.bad{color:#ff6e8d}#editorStatus.good{color:#69ffd2}
#skillButtons{text-align:center}#teleportBtn,#dashBtn,#confuseBtn,#pauseBtn{display:inline-block;margin:8px 4px 0;padding:10px 20px;border-color:var(--violet);border-radius:8px;color:#d9d3ff}#teleportBtn:disabled,#dashBtn:disabled,#confuseBtn:disabled{opacity:.35;cursor:not-allowed}.card.selected{border-color:#fff;background:linear-gradient(#354aa0,#14205a);box-shadow:0 0 24px var(--cyan);transform:translateY(-4px)}#resumeBtn{margin-top:12px;padding:13px 30px;font-size:16px}@media(min-width:800px) and (pointer:fine){#teleportBtn,#dashBtn,#confuseBtn,#pauseBtn{font-size:11px;padding:7px 14px}}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% 20%,#151a48,#050717 55%);color:#eefcff;font-family:system-ui,-apple-system,"Noto Sans KR",sans-serif;overflow-x:hidden;touch-action:none}
body{display:flex;justify-content:center;padding:10px}#gameShell{width:min(100%,960px)}header{display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;min-height:82px;padding:7px 8px;text-align:center}header>div:first-child{text-align:left}header>div:last-child{text-align:right}.label{display:block;color:#7b8db9;font-size:11px;letter-spacing:1px}header strong{font-size:22px;text-shadow:0 0 12px var(--cyan)}.title{align-self:center;justify-self:center;width:100%;font-size:24px;font-weight:900;line-height:1.15;letter-spacing:1px;text-align:center;text-shadow:0 0 13px #52f7ff77}.title small{display:block;margin-bottom:4px;color:var(--pink);font-size:9px;letter-spacing:4px}.status{display:grid;grid-template-columns:110px 1fr 120px;gap:10px;align-items:center;padding:0 8px 8px;font-size:12px}.xp{height:18px;border:1px solid #30426c;background:#0b0e23;position:relative;overflow:hidden;clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%)}.xp span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--violet),var(--cyan));box-shadow:0 0 12px var(--cyan);transition:width .25s}.xp b{position:absolute;inset:0;text-align:center;font-size:10px;line-height:17px}.heart{color:#ff547c;text-shadow:0 0 8px #ff3468;font-size:18px;margin-right:4px}.empty{color:#26304f;text-shadow:none}#combo{text-align:right;color:#ffd65c;font-weight:800}#canvasWrap{position:relative;border:1px solid #263c74;background:#030512;box-shadow:0 0 28px #2449b755,inset 0 0 40px #000;border-radius:8px;overflow:hidden}canvas{display:block;width:100%;height:auto;image-rendering:auto}.overlay{display:none;position:absolute;inset:0;z-index:5;align-items:center;justify-content:center;padding:20px;background:#03051bd9;backdrop-filter:blur(5px)}.overlay.show{display:flex}.panel{width:min(92%,460px);padding:30px 24px;text-align:center;border:1px solid #4266a6;background:linear-gradient(145deg,#121945ee,#080c26ee);box-shadow:0 0 35px #345cff55;clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}.panel.wide{width:min(96%,780px)}h1,h2{margin:4px 0 12px;font-size:clamp(28px,6vw,48px);text-shadow:0 0 18px var(--cyan)}h2{font-size:clamp(23px,5vw,34px)}.eyebrow{color:var(--pink);font-weight:800;font-size:11px;letter-spacing:3px}.mascot{font-size:54px;color:var(--cyan);text-shadow:0 0 20px var(--cyan);animation:pulse 1.2s infinite alternate}@keyframes pulse{to{transform:scale(1.12);filter:hue-rotate(60deg)}}button{border:1px solid var(--cyan);background:#132153;color:white;font-weight:800;cursor:pointer}#startBtn,#restartBtn,#resultMainBtn{margin-top:12px;padding:14px 34px;font-size:17px;box-shadow:0 0 15px #3befff55}button:hover{background:#244179}.help{color:#7f91b9;font-size:11px;margin-top:18px}#cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}.card{min-height:145px;padding:14px 9px;border-color:#6b6cff;background:linear-gradient(#18235b,#0a102d)}.card .icon{display:block;font-size:30px;color:var(--cyan);margin-bottom:8px}.card b{display:block;color:#fff;margin-bottom:6px}.card small{color:#9fb2d5;line-height:1.45}.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:20px 0}.result-grid span{background:#080d29;padding:9px;color:#8193b9;font-size:11px}.result-grid b{display:block;color:white;font-size:20px;margin-top:3px}.result-actions{display:flex;justify-content:center;gap:10px}#resultMainBtn{border-color:#ff72d9;color:#ffd9f5}#toast{position:absolute;z-index:4;top:14%;left:50%;transform:translateX(-50%);color:#fff;font-weight:900;font-size:24px;text-shadow:0 0 12px var(--pink);opacity:0;transition:.25s;pointer-events:none;white-space:nowrap}#toast.on{opacity:1;transform:translate(-50%,-8px)}#dpad{display:grid;grid-template-columns:repeat(3,58px);grid-template-rows:repeat(2,48px);gap:5px;justify-content:center;margin:10px auto 0}#dpad button{border-radius:8px;font-size:16px;opacity:.8}#dpad button[data-dir=up]{grid-column:2}#dpad button[data-dir=left]{grid-row:2;grid-column:1}#dpad button[data-dir=down]{grid-row:2;grid-column:2}#dpad button[data-dir=right]{grid-row:2;grid-column:3}@media(min-width:800px) and (pointer:fine){#dpad{display:none}}@media(max-width:560px){body{padding:4px}.status{grid-template-columns:85px 1fr 90px;gap:5px}.heart{font-size:15px}#cards{grid-template-columns:1fr}.card{min-height:78px;text-align:left}.card .icon{float:left;margin:0 12px 20px 0}.panel.wide{padding:16px 12px}header{min-height:70px}header strong{font-size:17px}.title{font-size:18px}.title small{font-size:7px;letter-spacing:3px}}
#modeBadge{display:block;width:max-content;margin:0;padding:2px 7px;border:1px solid #4b70bd;border-radius:999px;color:#88eaff;background:#0b1533;font-size:9px;font-weight:900;letter-spacing:.5px;text-shadow:0 0 8px #36e8ff}.hud-stage-status{display:flex;align-items:center;gap:6px;margin-top:3px}
.score-block{position:relative}.score-block #playTime{color:#69f5ff;font-variant-numeric:tabular-nums;text-shadow:0 0 12px #35e9ff99}.hud-actions{display:flex;justify-content:flex-end;gap:4px;margin-top:3px}.hud-actions button{width:28px;height:23px;padding:0;border-color:#526fae;border-radius:6px;background:#0b1533;color:#91eaff;font-size:11px;line-height:21px}.hud-actions #topMainBtn{width:auto;padding:0 7px;font-size:8px}.hud-actions button:hover{border-color:var(--cyan);box-shadow:0 0 10px #35e9ff77}.settings-panel{max-width:390px}.audio-setting{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:10px 0;padding:14px 16px;border:1px solid #354b82;border-radius:10px;background:#080e2a;text-align:left}.audio-setting span b,.audio-setting span small{display:block}.audio-setting span small{margin-top:3px;color:#8295bf;font-size:10px}.toggle{min-width:68px;padding:9px 13px;border-color:#566382;border-radius:999px;background:#202943;color:#8e9ab8}.toggle.on{border-color:#55f5ff;background:#123d55;color:#7df8ff;box-shadow:0 0 13px #35e9ff77}.settings-panel #settingsCloseBtn{margin-top:14px;padding:12px 24px;border-radius:8px}
.settings-panel #soundTestBtn{margin-bottom:12px;padding:12px 20px;border-color:#ff67d9;border-radius:8px;color:#ffb4eb;background:#31113d}
.language-setting select{min-width:112px;padding:9px 30px 9px 13px;border:1px solid #55f5ff;border-radius:999px;background:#123d55;color:#e8fdff;font-size:12px;font-family:inherit;font-weight:700;outline:none;cursor:pointer}.language-setting select:focus{box-shadow:0 0 13px #35e9ff77}.language-setting select option{background:#0b1533;color:#fff}
#mobileControls{display:none}
@media (pointer:coarse),(max-width:600px),(orientation:landscape) and (max-height:600px){
  #dpad,#skillButtons{display:none!important}
  #mobileControls{display:block;position:absolute;inset:0;z-index:3;pointer-events:none}
  #joystickZone{position:absolute;z-index:1;left:0;top:18%;bottom:0;width:58%;pointer-events:auto;touch-action:none}
  .joystickHint{position:absolute;left:18px;bottom:18px;padding:5px 8px;border-radius:999px;background:#02061a66;color:#a5b7dc;font-size:9px;opacity:.58}
  #joystickBase{display:none;position:absolute;width:112px;height:112px;transform:translate(-50%,-50%);border:2px solid #7df6ff88;border-radius:50%;background:#07142b55;box-shadow:0 0 20px #38dfff44,inset 0 0 22px #0008;backdrop-filter:blur(2px);pointer-events:none}
  #joystickBase.active{display:block}
  #joystickKnob{position:absolute;left:50%;top:50%;width:48px;height:48px;transform:translate(-50%,-50%);border:2px solid #d8fdffcc;border-radius:50%;background:#52eaff77;box-shadow:0 0 17px #42ecff99}
  #mobileSkillButtons{position:absolute;z-index:2;right:12px;bottom:9%;display:flex;flex-direction:column;gap:12px;pointer-events:auto}
  #mobileSkillButtons button{display:flex;width:68px;height:68px;flex-direction:column;align-items:center;justify-content:center;padding:0;border:2px solid #b9efffaa;border-radius:50%;background:#09132c66;color:#fff;font-size:25px;line-height:1;box-shadow:0 0 15px #3deaff44;backdrop-filter:blur(3px);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
  #mobileSkillButtons button b{font-size:14px;line-height:13px}#mobileSkillButtons button span{font-size:20px;line-height:18px}
  #mobileSkillButtons button small{display:block;margin-top:4px;color:#e2faff;font-size:8px;font-weight:900}
  #mobileSkillButtons button:active{transform:scale(.9);background:#244a7088}
  #mobileSkillButtons button:disabled{opacity:.28;filter:grayscale(.55)}
  #canvasWrap:has(.overlay.show) #mobileControls{display:none}
}
@media (pointer:coarse) and (orientation:portrait),(orientation:portrait) and (max-width:600px){
  html,body{width:100%;min-height:100dvh}
  body{align-items:flex-start;padding:0 3px 12px;overflow-y:auto}
  #gameShell{width:100%}
  header{min-height:62px;padding:4px 6px}
  header strong{font-size:16px}.title{font-size:17px}.title small{font-size:6px}
  .status{grid-template-columns:82px 1fr 85px;padding:0 5px 5px;gap:4px}.heart{font-size:14px}
  #canvasWrap{margin-bottom:146px;overflow:visible}
  #canvasWrap:has(.overlay.show){margin-bottom:0}
  .overlay{position:fixed;inset:0;z-index:20;overflow-y:auto}
  #mobileControls{left:0;right:0;top:calc(100% + 8px);bottom:auto;height:132px;border:1px solid #31538b;border-radius:14px;background:linear-gradient(135deg,#07112ae8,#0c1738e8);box-shadow:0 8px 22px #0008,inset 0 1px #83edff22}
  #joystickZone{left:0;top:0;bottom:0;width:48%;border-right:1px solid #294876}
  #mobileSkillButtons{left:auto;right:8px;top:50%;bottom:auto;flex-direction:row;gap:7px;transform:translateY(-50%)}
  #mobileSkillButtons button{width:56px;height:56px;background:#09132c7a}
  #mobileSkillButtons button b{font-size:11px;line-height:10px}#mobileSkillButtons button span{font-size:16px;line-height:15px}#mobileSkillButtons button small{margin-top:2px;font-size:6px}
  #joystickBase{width:104px;height:104px}#joystickKnob{width:44px;height:44px}
  .joystickHint{left:10px;bottom:6px;font-size:7px}
  body:after{display:none}
}
@media (pointer:coarse) and (orientation:landscape),(orientation:landscape) and (max-height:600px){
  html{width:100%;height:100%;min-height:0;overflow:hidden}
  body{box-sizing:border-box;width:100%;height:100svh;min-height:0;align-items:stretch;justify-content:flex-start;padding:max(2px,env(safe-area-inset-top)) max(2px,env(safe-area-inset-right)) max(2px,env(safe-area-inset-bottom)) max(2px,env(safe-area-inset-left));overflow:hidden}
  #dpad,#skillButtons{display:none!important}
  #gameShell{--mobile-hud-h:64px;--mobile-side-min:clamp(105px,15vw,155px);--mobile-game-h:min(calc(100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--mobile-hud-h) - 6px),calc((100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - var(--mobile-side-min) - var(--mobile-side-min) - 6px)*.5625));--mobile-maze:calc(var(--mobile-game-h)*1.77778);display:grid;width:100%;height:100%;min-width:0;min-height:0;grid-template-columns:minmax(0,1fr) var(--mobile-maze) minmax(0,1fr);grid-template-rows:40px 24px minmax(0,1fr);gap:0;background:radial-gradient(circle at 50% 65%,#142454,#030617 68%)}
  #canvasWrap{grid-column:2;grid-row:3;align-self:start;justify-self:center;width:var(--mobile-maze);height:var(--mobile-game-h);border-radius:0}
  #game{width:100%;height:100%}
  header{grid-column:1/4;grid-row:1;display:grid;height:40px;min-height:40px;grid-template-columns:1fr 1.2fr 1fr;padding:3px max(8px,env(safe-area-inset-right)) 3px max(8px,env(safe-area-inset-left));border:1px solid #263c74;border-radius:0;background:#070c25;overflow:hidden}
  header .title{grid-column:2;grid-row:1;align-self:center;margin:0;font-size:14px}
  header .title small{margin-bottom:1px;font-size:6px;letter-spacing:2px}
  header>div:first-child{grid-column:1;grid-row:1;align-self:center}header>div:last-child{grid-column:3;grid-row:1;align-self:center}
  header strong{font-size:13px}.label{font-size:7px}#modeBadge{display:inline-block;font-size:6px}.hud-stage-status{gap:3px;margin-top:1px}.score-block{display:grid;grid-template-columns:1fr auto;grid-template-rows:1fr 1fr;align-items:center}.score-block .label,.score-block>strong{grid-column:1}.hud-actions{grid-column:2;grid-row:1/3;margin:0}.hud-actions button{width:23px;height:20px;line-height:18px}
  .status{grid-column:1/4;grid-row:2;display:grid;height:24px;min-width:0;min-height:24px;grid-template-columns:minmax(110px,.75fr) minmax(180px,2fr) minmax(80px,.75fr);align-items:center;gap:7px;padding:2px max(8px,env(safe-area-inset-right)) 2px max(8px,env(safe-area-inset-left));border-bottom:1px solid #263c74;background:#050a20e8;font-size:8px;overflow:hidden}
  #hearts{text-align:left}#combo{text-align:right}.heart{font-size:13px}.xp{height:17px}.xp b{line-height:16px}
  .overlay{padding:7px;overflow-y:auto}.panel{max-height:96%;padding:15px 12px;overflow-y:auto}h2{font-size:22px}.eyebrow{font-size:8px}
  .start-copy{top:4%;width:96%}.start-copy .eyebrow{margin-bottom:4px;font-size:7px}.start-copy h1{font-size:34px}.title-mission{margin:5px 0 3px;font-size:10px}.start-subtitle{font-size:7px;line-height:1.3}
  .start-controls{bottom:2%;width:94%}.mode-title{margin-bottom:3px;font-size:9px}.mode-cards{gap:5px;padding:5px}.mode-card{min-height:48px;grid-template-columns:26px 1fr;padding:4px 6px}.mode-card>span{font-size:19px}.mode-card>b{font-size:10px}.mode-card>small{font-size:7px}#startScreen .help{margin-top:3px;font-size:6px}
  .developer-youtube{right:5px;top:5px;padding:2px 5px;font-size:7px}.developer-youtube img{width:25px;height:25px}.ranking-open{left:5px;top:5px;padding:7px 8px;font-size:7px}
  #mobileControls{position:fixed;z-index:4;left:0;right:0;top:calc(env(safe-area-inset-top) + var(--mobile-hud-h));bottom:env(safe-area-inset-bottom)}
  #joystickZone{left:env(safe-area-inset-left);top:0;bottom:0;width:calc((100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - var(--mobile-maze))/2)}
  #mobileSkillButtons{right:max(8px,calc((100vw - var(--mobile-maze))/4 - 29px));top:50%;bottom:auto;gap:7px;transform:translateY(-50%)}
  #mobileSkillButtons button{width:58px;height:58px;background:#09132c70}#mobileSkillButtons button b{font-size:12px;line-height:11px}#mobileSkillButtons button span{font-size:18px;line-height:17px}#mobileSkillButtons button small{margin-top:2px;font-size:6px}
  #joystickBase{width:104px;height:104px}#joystickKnob{width:44px;height:44px}.joystickHint{left:max(10px,env(safe-area-inset-left));bottom:10px;font-size:7px}
}

/* Neon chase title screen */
#startScreen{padding:0;background:#020514;backdrop-filter:none;overflow:hidden}
.start-scene{position:relative;width:100%;height:100%;overflow:hidden;background:#020514 url("assets/start-screen-zombie-v1.png") center 48%/cover no-repeat;text-align:center}
.start-scene:before{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(0,2,12,.48) 0%,rgba(2,6,18,.08) 35%,rgba(1,4,12,.02) 62%,rgba(0,2,12,.5) 90%,rgba(1,3,13,.72) 100%),
  radial-gradient(ellipse at 50% 18%,transparent 0 34%,rgba(0,2,12,.18) 78%);
  pointer-events:none}
.start-stars{display:none}
.start-copy{position:absolute;z-index:2;top:5%;left:50%;width:92%;padding:0;transform:translateX(-50%);text-align:center}
.start-copy .eyebrow{margin:0 0 8px;color:#ff65de;letter-spacing:5px;text-shadow:0 0 12px #ff32cc}
.start-copy h1{margin:0 auto;font-size:clamp(38px,7vw,60px);line-height:1;letter-spacing:-3px;font-style:italic;text-align:center}
.start-copy h1 span{color:#eefdff;text-shadow:0 0 4px #fff,0 0 14px #25d8ff,4px 4px 0 #1858ff}
.start-copy h1 b{color:#ff79e5;text-shadow:0 0 7px #fff,0 0 18px #ff31dc}
.title-mission{margin:7px 0 0;color:#ff8ce4;font-size:15px;font-weight:900;letter-spacing:4px;text-shadow:0 0 13px #ff35ce}
.start-subtitle{margin:5px 0 0;color:#9df1ff;font-size:11px;font-weight:700;line-height:1.45;text-shadow:0 0 10px #1fc9ff}
.maze-horizon{display:none;position:absolute;z-index:1;left:-8%;right:-8%;top:34%;height:40%;transform:perspective(500px) rotateX(52deg);transform-origin:center top;background:
  linear-gradient(90deg,rgba(21,81,255,.75) 2px,transparent 2px) 0 0/58px 58px,
  linear-gradient(rgba(21,81,255,.75) 2px,transparent 2px) 0 0/58px 58px,
  radial-gradient(circle at 50% 25%,#142d85,#030923 70%);
  border-top:2px solid #4b7fff;box-shadow:0 -10px 45px #1f44ff55,inset 0 0 60px #000}
.maze-horizon:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 82px,rgba(11,12,45,.9) 83px 112px);mix-blend-mode:multiply}
.runner{position:absolute;z-index:3;display:block;width:68px;height:90px;transform:rotateX(-52deg);filter:drop-shadow(0 0 12px #2186ff)}
.mei-runner{left:40%;top:20%;width:60px;height:80px;background:url("mei-pixel-move-hit.png") 0 0/800% 400% no-repeat}
.roll-runner{left:54%;top:25%;background:url("roll-bear-stable.png") 0 0/400% 400% no-repeat;filter:drop-shadow(0 0 13px #ff5bd5)}
.boss-runner{left:66%;top:31%;background:url("boss-boy-stable.png") 0 0/400% 400% no-repeat}
.start-gem,.start-heart{position:absolute;z-index:4;transform:rotateX(-52deg);font-size:30px;text-shadow:0 0 16px currentColor}
.start-gem{left:23%;top:39%;color:#63efff}.start-heart{right:24%;top:47%;color:#ff57b8}
.start-controls{position:absolute;z-index:6;left:50%;bottom:1.5%;width:min(92%,720px);transform:translateX(-50%)}
.mode-title{margin:0 0 4px;color:#eef6ff;font-weight:900;font-size:11px;letter-spacing:1px;text-shadow:0 1px 5px #000,0 0 8px #163d70}
#modeSelect{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.mode-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:7px;border:1px solid #7081a899;border-radius:12px;background:#03071b73;box-shadow:0 5px 18px #0009}
.mode-card{display:grid;grid-template-columns:40px 1fr;grid-template-rows:1fr 1fr;align-items:center;min-height:58px;padding:6px 10px;text-align:left;border-color:#8490aa99;border-radius:8px;background:linear-gradient(145deg,#101a36cc,#070b1cbd);text-shadow:0 1px 4px #000}
.mode-card>span{grid-row:1/3;font-size:30px;color:#ff76c5;text-align:center;text-shadow:0 0 13px currentColor}
.mode-card>b{align-self:end;font-size:14px}.mode-card>small{align-self:start;color:#8493b6;font-size:9px;line-height:1.35}
.mode-card.selected{border-color:#5af4ff;background:linear-gradient(145deg,#183366d9,#07142ccc);box-shadow:0 0 14px #35e9ff88,inset 0 0 12px #218dff2b}
.mode-card.selected>span{color:#6ef5ff}
.start-actions{display:flex;align-items:stretch;justify-content:center;gap:9px}
#startScreen #startBtn{min-width:230px;margin-top:10px;padding:13px 28px;border:2px solid #56f5ff;border-radius:8px;background:linear-gradient(110deg,#3940b8,#2135a2 60%,#17245c);font-size:22px;letter-spacing:2px;box-shadow:0 0 18px #26e8ff, inset 0 0 16px #8b65ff55}
#startScreen #startBtn span{color:#45eaff;font-size:29px;line-height:0}
#startScreen #characterSelectBtn{display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-rows:1fr 1fr;align-items:center;min-width:0;min-height:58px;gap:0;margin:0;padding:6px 10px;text-align:left;border-color:#ff67d999;border-radius:8px;background:linear-gradient(145deg,#28153fd6,#0b0c22c7);color:#ffd8f5;text-shadow:0 1px 4px #000;box-shadow:0 0 10px #ff38cb38}
#startScreen #characterSelectBtn canvas{grid-row:1/3;width:34px;height:46px;object-fit:contain;justify-self:center}
#startScreen #characterSelectBtn span{grid-column:2;grid-row:1;align-self:end;min-width:0;font-size:14px;font-weight:800;white-space:nowrap}#startScreen #characterSelectBtn b{display:block;overflow:hidden;color:#fff;font-size:9px;text-overflow:ellipsis}
#startScreen #characterSelectBtn em{grid-column:2;grid-row:2;align-self:start;color:#ff9de6;font-size:9px;font-style:normal}
#startScreen #characterSelectBtn:hover,#startScreen #characterSelectBtn:focus-visible{background:#48205e;box-shadow:0 0 18px #ff4bd888}
#startScreen .help{margin:4px 0 0;color:#b3c5e9;font-size:8px;line-height:1.3;text-shadow:0 1px 5px #000}
#introScreen{z-index:14;padding:0;background:#01030c;backdrop-filter:none;cursor:pointer}
.intro-stage{position:relative;width:100%;height:100%;display:grid;place-items:center;overflow:hidden;background:#01030c}
.intro-stage:after{content:"";position:absolute;z-index:1;inset:auto 0 0;height:22%;background:linear-gradient(transparent,#01030cd9);pointer-events:none}
.intro-image{width:100%;height:100%;object-fit:contain;object-position:center;background:#01030c;filter:saturate(1.06) contrast(1.03)}
#introScreen.show .intro-image{animation:introReveal .45s ease-out both}@keyframes introReveal{from{opacity:.2;transform:scale(1.025)}to{opacity:1;transform:scale(1)}}
.intro-actions{position:absolute;z-index:3;right:2.5%;bottom:2.5%;display:flex;flex-direction:column;align-items:flex-end;gap:4px;padding:7px 9px;border:1px solid #5ceeff88;border-radius:10px;background:#020719c4;box-shadow:0 0 18px #18cfff44;text-align:right}
.intro-actions p{margin:0;color:#ff87df;font-size:8px;font-weight:900;letter-spacing:2px}
#introStartBtn{padding:9px 20px;border:1px solid #69f5ff;border-radius:8px;background:linear-gradient(110deg,#233f9b,#742084);color:#fff;font-size:15px;box-shadow:0 0 14px #35e9ff77}
.intro-actions small{color:#a9bfe5;font-size:7px}
#introBackBtn{position:absolute;z-index:4;left:2%;top:2%;padding:7px 12px;border-color:#8ca1c8;border-radius:8px;background:#030819c9;color:#dbe9ff;font-size:10px;cursor:pointer}
#introBackBtn:hover,#introBackBtn:focus-visible{border-color:#69f5ff;background:#12305a}
.developer-youtube{position:absolute;z-index:8;right:18px;top:16px;display:flex;align-items:center;gap:8px;padding:5px 11px 5px 6px;border:1px solid #169de8;border-radius:9px;background:#02091ee6;color:#7bdcff;font-size:11px;font-weight:900;text-decoration:none;letter-spacing:.3px;box-shadow:0 0 14px #008dff55;transition:transform .18s,box-shadow .18s,background .18s}
.developer-youtube img{width:44px;height:44px;object-fit:contain;border-radius:5px}
.developer-youtube:hover,.developer-youtube:focus-visible{transform:translateY(-2px);background:#07214a;box-shadow:0 0 22px #00b7ff99;outline:none}
.ranking-open{position:absolute;z-index:8;left:18px;top:16px;padding:11px 14px;border-color:#ffd55e;border-radius:9px;background:#211704e8;color:#ffe490;font-size:11px;box-shadow:0 0 14px #ffc40055}.ranking-open span{margin-right:5px;color:#ffd65c;font-size:15px}.ranking-open:hover,.ranking-open:focus-visible{background:#4a3105;box-shadow:0 0 22px #ffd65c88}
#rankingScreen{z-index:10}.ranking-panel{max-width:620px}.ranking-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.ranking-tab{padding:10px;border-color:#536899;border-radius:8px;color:#9eafd2;background:#0a102a}.ranking-tab.selected{border-color:#5af4ff;color:#fff;background:#173a69;box-shadow:0 0 14px #35e9ff66}.ranking-head,.ranking-row{display:grid;grid-template-columns:54px 1fr 120px;align-items:center;gap:8px}.ranking-head{padding:7px;color:#758bb8;font-size:10px;font-weight:900}.ranking-head span:last-child{text-align:right}.ranking-list{min-height:230px;max-height:330px;overflow-y:auto;border:1px solid #304775;border-radius:8px;background:#050a20}.ranking-row{min-height:39px;padding:6px;border-bottom:1px solid #18264b;font-size:11px}.ranking-row:last-child{border-bottom:0}.ranking-row.top{color:#ffe480;background:linear-gradient(90deg,#4a350b55,#15112d)}.ranking-row .rank-position{font-weight:900;font-size:14px}.ranking-row .rank-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font-weight:800}.ranking-row .rank-time{color:#69f5ff;font-size:13px;font-weight:900;text-align:right;font-variant-numeric:tabular-nums}.ranking-row.top .rank-time{color:#ffe480}.ranking-empty{display:grid;place-items:center;min-height:230px;color:#7285ad;font-size:12px}.ranking-note{margin:9px 0;color:#8295bd;font-size:10px}.ranking-panel #rankingCloseBtn{padding:10px 28px;border-radius:8px}.ranking-submit{margin:12px 0;padding:12px;border:1px solid #ffd65c;border-radius:9px;background:#2b1e08}.ranking-submit>b{display:block;margin-bottom:8px;color:#ffe797;font-size:12px}.ranking-submit>div{display:flex;gap:7px}.ranking-submit input{min-width:0;flex:1;padding:10px;border:1px solid #6b79a3;border-radius:7px;background:#070d25;color:#fff;font:inherit}.ranking-submit button{padding:9px 13px;border-color:#ffd65c;border-radius:7px;color:#ffe797}.ranking-submit small{display:block;min-height:15px;margin-top:6px;color:#8fffd0;font-size:10px}
.character-panel{max-width:720px}.character-help{margin:4px 0 11px;color:#9eb1d8;font-size:11px}.character-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.character-card{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:116px;padding:7px;border-color:#465d91;border-radius:10px;background:linear-gradient(#111a40,#080d25);color:#aebfe1}.character-card canvas{display:block;width:58px;height:76px;object-fit:contain}.character-card b{margin-top:3px;font-size:11px}.character-card.selected{border-color:#5af4ff;color:#fff;background:linear-gradient(#214580,#0d1d45);box-shadow:0 0 18px #35e9ff88,inset 0 0 15px #3cefff22}.character-card.selected b:after{content:" · 선택";color:#72f6ff;font-size:8px}.character-panel #characterCloseBtn{margin-top:12px;padding:10px 28px;border-radius:8px}body[data-lang="en"] .character-card.selected b:after{content:" · SELECTED"}
@media(max-width:560px){
  .start-copy{top:6%;width:96%;padding:0}.start-copy h1{font-size:38px;letter-spacing:-2px}.title-mission{font-size:13px;letter-spacing:2px}.start-subtitle{font-size:10px}
  .maze-horizon{top:36%;height:36%}.runner{transform:rotateX(-52deg) scale(.8)}
  .mode-cards{gap:5px;padding:5px}.mode-card,#startScreen #characterSelectBtn{grid-template-columns:28px minmax(0,1fr);min-height:50px;padding:4px 5px}.mode-card>span{font-size:20px}
  #startScreen #characterSelectBtn canvas{width:27px;height:36px}#startScreen #characterSelectBtn span{font-size:10px}#startScreen #characterSelectBtn b,#startScreen #characterSelectBtn em{font-size:7px}
  #startScreen #startBtn{min-width:0;font-size:18px;padding:11px 20px}.start-controls{width:94%;bottom:1%}
  .developer-youtube{right:8px;top:8px;padding:3px 7px 3px 4px;font-size:9px}.developer-youtube img{width:32px;height:32px}
  .ranking-open{left:8px;top:8px;padding:9px 10px;font-size:9px}.ranking-head,.ranking-row{grid-template-columns:40px 1fr 86px;gap:4px}.ranking-panel{padding:18px 10px}.ranking-row{font-size:9px}.ranking-row .rank-time{font-size:11px}
  .character-panel{padding:15px 9px}.character-help{font-size:9px}.character-grid{grid-template-columns:repeat(3,1fr);gap:5px}.character-card{min-height:91px;padding:4px}.character-card canvas{width:44px;height:58px}.character-card b{font-size:9px}
  .intro-actions{right:2%;bottom:2%;padding:5px 7px}.intro-actions p{font-size:6px}#introStartBtn{padding:7px 14px;font-size:11px}.intro-actions small{font-size:6px}#introBackBtn{padding:5px 9px;font-size:8px}
}
@media (pointer:coarse) and (orientation:landscape),(orientation:landscape) and (max-height:600px){
  #startScreen .start-copy{top:7%;width:88%}
  #startScreen .start-copy .eyebrow{margin-bottom:3px;font-size:6px;letter-spacing:3px}
  #startScreen .start-copy h1{font-size:34px;letter-spacing:-2px}
  #startScreen .title-mission{margin-top:4px;font-size:9px;letter-spacing:2px}
  #startScreen .start-subtitle{margin-top:3px;font-size:7px;line-height:1.25}
  #startScreen .start-controls{bottom:1%;width:min(92%,680px)}
  #startScreen .mode-title{margin-bottom:3px;font-size:8px}
  #startScreen .mode-cards{gap:5px;padding:5px}
  #startScreen .mode-card,#startScreen #characterSelectBtn{min-height:44px;grid-template-columns:25px minmax(0,1fr);padding:4px 7px}
  #startScreen .mode-card>span{font-size:18px}
  #startScreen .mode-card>b{font-size:10px}
  #startScreen .mode-card>small{font-size:7px}
  #startScreen #characterSelectBtn canvas{width:23px;height:32px}#startScreen #characterSelectBtn span{font-size:9px}#startScreen #characterSelectBtn b{font-size:7px}#startScreen #characterSelectBtn em{font-size:6px}
  #startScreen .help{margin-top:3px;font-size:6px;line-height:1.25}
  .character-panel{max-width:94%;padding:9px}.character-panel h2{margin:0 0 3px;font-size:19px}.character-panel .eyebrow,.character-help{display:none}.character-grid{grid-template-columns:repeat(7,1fr);gap:4px}.character-card{min-height:67px;padding:3px}.character-card canvas{width:35px;height:46px}.character-card b{font-size:7px}.character-card.selected b:after{display:none}.character-panel #characterCloseBtn{margin-top:6px;padding:6px 20px;font-size:9px}
}

/* Integrated compact HUD: LIFE and ENERGY stay inside the top bar. */
header{min-height:66px;padding:5px 8px}
.hud-stage,.score-block{min-width:0}
.hud-life{display:flex;align-items:center;gap:7px;margin-top:3px;color:#ff9ab8;font-size:8px;font-weight:900;letter-spacing:1px}
.hud-life #hearts{display:flex;align-items:center;min-height:16px;white-space:nowrap}
.hud-life .heart{margin-right:3px;font-size:15px}
.hud-center{display:grid;min-width:0;gap:4px}
.hud-center .title{font-size:20px}
.hud-center .title small{margin-bottom:2px;font-size:7px}
.hud-energy{display:grid;grid-template-columns:42px minmax(80px,1fr) 34px;align-items:center;gap:5px;width:min(100%,520px);margin:auto}
.energy-label{color:#a8b7d8;font-size:7px;font-weight:900;letter-spacing:1px}
.hud-energy .xp{position:relative;width:100%;height:13px;border:1px solid #30426c;border-radius:4px;background:#080d23;overflow:hidden;clip-path:none}
.hud-energy .xp span{position:absolute;inset:0;width:100%;height:100%;transform:scaleX(0);transform-origin:left center;background:linear-gradient(90deg,var(--pink),var(--violet),var(--cyan));transition:transform .2s ease}
.hud-energy .xp b{position:absolute;inset:0;z-index:2;color:#fff;font-size:8px;line-height:11px;text-align:center;text-shadow:0 1px 3px #000}
.hud-energy #level{color:#dbeaff;font-size:8px;white-space:nowrap}
.score-block #combo{margin-top:3px;color:#ffd65c;font-size:8px;white-space:nowrap}
.hud-actions #fullscreenBtn.active{border-color:var(--cyan);background:#173c5d;color:#fff;box-shadow:0 0 10px #35e9ff77}
body.fullscreen-mode{padding:0;background:#020514}
@media(min-width:801px) and (pointer:fine){
  body.fullscreen-mode{min-height:100vh;align-items:center;overflow:auto}
  body.fullscreen-mode #gameShell{width:min(100vw,calc(100vh * 1.52));max-width:none}
}

@media(max-width:560px){
  header{min-height:56px;padding:3px 5px}
  header strong{font-size:15px}
  .hud-center .title{font-size:15px}
  .hud-center .title small{font-size:5px;letter-spacing:2px}
  .hud-life{gap:3px;font-size:6px}.hud-life .heart{font-size:11px;margin-right:1px}.hud-stage-status{gap:2px}
  .hud-energy{grid-template-columns:26px minmax(45px,1fr) 26px;gap:3px}
  .energy-label,.hud-energy #level,.score-block #combo{font-size:6px}
  .hud-energy .xp{height:11px}.hud-energy .xp b{font-size:6px;line-height:9px}
  .hud-actions button{width:24px;height:20px;font-size:9px;line-height:18px}
}