:root{--bg:#06070d;--panel:rgba(11,13,24,.78);--border:rgba(255,255,255,.12);--text:#eef3ff;--muted:#9aa6c2;--gold:#ffd46f;--cyan:#67e4ff;--violet:#8b70ff;--danger:#ff5d73}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:radial-gradient(circle at 50% 35%,#1f1733 0,#090a13 56%,#03040a 100%);color:var(--text);font-family:Inter,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;touch-action:none;overscroll-behavior:none}button,a{font:inherit}.glass{position:fixed;z-index:12;background:var(--panel);border:1px solid var(--border);backdrop-filter:blur(10px);box-shadow:0 14px 40px rgba(0,0,0,.38)}#game{display:block;position:fixed;inset:0;margin:auto;image-rendering:auto;max-width:100%;max-height:100%}#hud{left:max(14px,env(safe-area-inset-left));top:max(14px,env(safe-area-inset-top));width:min(355px,calc(100vw - 28px));padding:13px 15px;border-radius:16px}.hudTop,.row{display:flex;align-items:center;justify-content:space-between;gap:12px}.eyebrow{font-size:10px;font-weight:900;letter-spacing:2.4px;color:var(--gold)}.eyebrow.big{font-size:11px;margin:0 0 7px}.hudTop #heroName{font-size:16px;font-weight:850;margin-top:3px}.homeLink{font-size:10px;color:#cbd4ea;text-decoration:none;padding:6px 8px;border-radius:8px;border:1px solid rgba(255,255,255,.11)}.small{font-size:11px;color:#bac5dc;margin-top:9px}.bar{height:8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin:8px 0 4px}.bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff4f6b,#ff9a64);transition:width .12s}.bar.xp{height:6px;margin-top:6px}.bar.xp i{width:0;background:linear-gradient(90deg,#56dcff,#9a7cff)}#abilityDock{left:max(14px,env(safe-area-inset-left));bottom:max(14px,env(safe-area-inset-bottom));display:flex;gap:7px;padding:8px;border-radius:15px}.ability{min-width:125px;height:58px;border:1px solid rgba(255,255,255,.10);border-radius:11px;background:rgba(20,24,40,.78);display:flex;align-items:center;gap:8px;padding:7px 9px}.ability .ico{font-size:24px}.ability b{display:block;font-size:11px}.ability small{display:block;font-size:9px;color:#8792ae;margin-top:2px}.overlay{position:fixed;inset:0;z-index:40;display:none;align-items:center;justify-content:center;padding:20px;background:radial-gradient(circle at 50% 35%,rgba(40,31,73,.90),rgba(5,6,13,.97) 68%);overflow:auto}.overlay.show{display:flex}.startCard,.levelCard,.overCard{width:min(890px,100%);text-align:center}.startCard h1{font-size:clamp(38px,7vw,72px);letter-spacing:3px;margin:0;font-weight:950}.startCard h1 em{font-style:normal;color:#9e8aff}.lead{color:#9fa9c1;line-height:1.6;margin:8px auto 18px}.heroChoices{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px auto;width:min(820px,100%)}.heroCard{position:relative;min-height:270px;border-radius:20px;border:1px solid rgba(255,255,255,.13);background:linear-gradient(145deg,rgba(24,28,47,.96),rgba(10,12,23,.96));color:var(--text);padding:12px;display:grid;grid-template-columns:48% 1fr;align-items:center;overflow:hidden;cursor:pointer;transition:.18s}.heroCard.selected{transform:translateY(-3px);border-color:#fff6ad;box-shadow:0 16px 50px rgba(255,211,103,.14)}.heroCard.night.selected{border-color:#8edfff;box-shadow:0 16px 50px rgba(95,202,255,.14)}.heroCard:after{content:"";position:absolute;inset:auto -40px -80px -40px;height:160px;filter:blur(20px);opacity:.16}.heroCard.dawn:after{background:#ffd86e}.heroCard.night:after{background:#4f74ff}.portrait{height:245px;display:flex;align-items:flex-end;justify-content:center;min-width:0}.portrait img{max-height:100%;max-width:100%;object-fit:contain;filter:drop-shadow(0 14px 22px rgba(0,0,0,.45))}.heroCopy{text-align:left;padding:8px}.heroCopy span{font-size:11px;font-weight:900;letter-spacing:1.8px;color:#ffd46f}.night .heroCopy span{color:#72dcff}.heroCopy b{display:block;font-size:22px;margin:5px 0}.heroCopy p{margin:0;color:#9fa9c1;font-size:12px;line-height:1.55}.controlHint{font-size:11px;color:#7f8aa7;margin:10px}.primary{border:0;border-radius:13px;background:linear-gradient(135deg,#6f58d8,#9a74ff);color:#fff;font-weight:900;padding:13px 28px;font-size:16px;cursor:pointer;box-shadow:0 14px 34px rgba(92,70,190,.32)}.levelCard h2,.overCard h2{font-size:32px;margin:0}#upgradeCards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:760px;margin:18px auto}.upgrade{border:1px solid rgba(255,255,255,.14);background:linear-gradient(145deg,#181c31,#0d0f1c);color:var(--text);border-radius:16px;min-height:150px;padding:16px;text-align:left;cursor:pointer}.upgrade:hover{border-color:#a591ff}.upgrade .uicon{font-size:27px}.upgrade b{display:block;font-size:16px;margin:8px 0 5px}.upgrade p{margin:0;color:#98a3bd;font-size:12px;line-height:1.5}.overActions{display:flex;gap:10px;justify-content:center;align-items:center}.overActions a{color:#c8d1e4;text-decoration:none;border:1px solid rgba(255,255,255,.13);border-radius:12px;padding:12px 20px}#mobileControls{display:none;position:fixed;inset:0;z-index:20;pointer-events:none}#joyBase{position:absolute;left:max(18px,env(safe-area-inset-left));bottom:max(22px,env(safe-area-inset-bottom));width:108px;height:108px;border-radius:50%;background:radial-gradient(circle,rgba(133,113,220,.19),rgba(13,16,30,.35));border:1px solid rgba(211,201,255,.22);pointer-events:auto;touch-action:none}#joyBase:before{content:"";position:absolute;inset:17px;border-radius:50%;border:1px solid rgba(255,255,255,.08)}#joyKnob{position:absolute;left:34px;top:34px;width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ddd7ff,#7663dc 60%,#382d75);box-shadow:0 5px 16px rgba(0,0,0,.55);pointer-events:none}#specialBtn{--cd-angle:360deg;--skill-ring:#ffd768;--skill-glow:rgba(255,211,104,.34);position:absolute;right:max(22px,env(safe-area-inset-right));bottom:max(26px,env(safe-area-inset-bottom));width:88px;height:88px;border-radius:50%;border:2px solid transparent;background:radial-gradient(circle at 38% 30%,#6550bd 0,#403279 48%,#241d4d 100%) padding-box,conic-gradient(from -90deg,var(--skill-ring) 0deg var(--cd-angle),rgba(255,255,255,.12) var(--cd-angle) 360deg) border-box;color:#fff;pointer-events:auto;touch-action:none;font-weight:900;box-shadow:0 10px 28px rgba(0,0,0,.45);transition:filter .15s,box-shadow .2s,transform .12s}
#specialBtn>span{display:block;font-size:27px;line-height:29px}
#specialBtn small{display:block;font-size:9px;letter-spacing:.55px;color:#d8d9e7;margin-top:3px}
#specialBtn.cooling{filter:saturate(.55) brightness(.78)}
#specialBtn.ready{filter:none;box-shadow:0 0 0 1px var(--skill-glow),0 0 12px var(--skill-glow),0 10px 28px rgba(0,0,0,.45)}
#specialBtn.ready:active{transform:scale(.96)}
.ability.skillCooling{opacity:.76}
.ability.skillReady{border-color:var(--skill-ring,#ffd768);box-shadow:0 0 10px var(--skill-glow,rgba(255,211,104,.18))}
.ability.skillReady small{color:#d8d9e7}
#toast{position:fixed;z-index:30;left:50%;top:90px;transform:translateX(-50%) translateY(-10px);opacity:0;pointer-events:none;background:rgba(8,10,20,.82);border:1px solid rgba(255,255,255,.12);border-radius:11px;padding:8px 13px;font-size:11px;color:#dbe4f8;transition:.2s}#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:700px),(pointer:coarse){#hud{width:min(330px,calc(100vw - 28px));padding:11px 13px}.homeLink{display:none}#abilityDock{left:auto;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));gap:5px;padding:6px}.ability{min-width:86px;height:52px;padding:5px 7px}.ability .ico{font-size:21px}.ability b{font-size:9px}.ability small{font-size:8px}#mobileControls{display:block}.heroChoices{grid-template-columns:1fr;max-width:520px}.heroCard{min-height:205px;grid-template-columns:42% 1fr}.portrait{height:185px}.heroCopy b{font-size:18px}.controlHint{font-size:10px}.startCard{padding-bottom:20px}#upgradeCards{grid-template-columns:1fr;max-width:440px}.upgrade{min-height:104px}.overlay{align-items:flex-start;padding-top:24px}#abilityDock{display:none}}
/* PLAYVAULT project build */
#game{will-change:width,height}
@media(max-width:700px),(pointer:coarse){#hud{top:max(10px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));width:min(360px,calc(100vw - 20px))}#joyBase{width:112px;height:112px}#specialBtn{width:90px;height:90px}}
.relicRow{display:flex;align-items:center;gap:8px;margin-top:8px;padding-top:7px;border-top:1px solid rgba(255,255,255,.07)}
.relicLabel{flex:0 0 auto;font-size:9px;font-weight:900;letter-spacing:1.2px;color:#ffd46f}
.relicList{display:flex;gap:5px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;min-width:0;flex:1}
.relicList::-webkit-scrollbar{display:none}
.relicEmpty{font-size:9px;color:#68738d;padding:3px 0}
.relicChip{height:25px;flex:0 0 auto;display:flex;align-items:center;gap:4px;padding:3px 7px;border-radius:8px;background:rgba(31,35,58,.92);border:1px solid rgba(255,215,110,.16);box-shadow:inset 0 0 14px rgba(255,202,80,.03)}
.relicChip .relicIcon{font-size:13px;color:#ffd46f}
.relicChip .relicName{font-size:9px;color:#dfe5f5;white-space:nowrap}
.relicChip b{font-size:9px;color:#ffdc7b}
.relicFlash{position:fixed;z-index:35;left:50%;top:155px;transform:translate(-50%,-8px) scale(.96);opacity:0;pointer-events:none;display:flex;align-items:center;gap:9px;padding:10px 15px;border-radius:13px;background:linear-gradient(135deg,rgba(43,35,22,.94),rgba(18,16,24,.94));border:1px solid rgba(255,211,107,.35);box-shadow:0 12px 34px rgba(0,0,0,.45),0 0 30px rgba(255,195,64,.08);transition:.2s}
.relicFlash.show{opacity:1;transform:translate(-50%,0) scale(1)}
.relicFlash span{font-size:24px;color:#ffd46f;text-shadow:0 0 14px rgba(255,211,107,.45)}
.relicFlash b{font-size:13px;color:#fff3c9;white-space:nowrap}
@media(max-width:700px),(pointer:coarse){
  .relicRow{margin-top:6px;padding-top:6px}
  .relicChip{height:23px;padding:2px 6px}
  .relicChip .relicName{display:none}
  .relicChip .relicIcon{font-size:14px}
  .relicFlash{top:172px;max-width:calc(100vw - 28px)}
  .relicFlash b{font-size:12px;overflow:hidden;text-overflow:ellipsis}
}
.hudActionsRelic{position:absolute;right:13px;bottom:12px;z-index:2}
#relicButton{height:26px;border:1px solid rgba(255,215,110,.22);border-radius:9px;background:rgba(27,30,49,.9);color:#ffd46f;font-size:9px;font-weight:900;letter-spacing:.4px;padding:0 8px;cursor:pointer}
#relicButton span{display:inline-grid;place-items:center;min-width:17px;height:17px;margin-left:4px;border-radius:999px;background:rgba(255,212,96,.13);color:#fff1bd;font-size:9px}
.relicPanel{position:fixed;z-index:34;right:max(14px,env(safe-area-inset-right));top:118px;width:min(300px,calc(100vw - 28px));max-height:250px;overflow:auto;padding:10px;border-radius:14px;background:rgba(10,12,23,.96);border:1px solid rgba(255,215,110,.18);box-shadow:0 18px 45px rgba(0,0,0,.45);backdrop-filter:blur(10px);opacity:0;transform:translateY(-8px) scale(.98);pointer-events:none;transition:.16s}
.relicPanel.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.relicPanelHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;color:#ffe09a;font-size:12px}
#relicClose{width:28px;height:28px;border:0;border-radius:8px;background:rgba(255,255,255,.06);color:#cfd6e7;font-size:18px;line-height:1;cursor:pointer}
.relicPanel .relicList{display:flex;flex-wrap:wrap;gap:6px;overflow:visible}
.relicPanel .relicChip{height:28px;padding:3px 8px}
.relicPanel .relicName{display:inline!important}
@media(max-width:700px),(pointer:coarse){
  #hud{padding-bottom:11px}
  .hudActionsRelic{right:12px;top:48px;bottom:auto}
  #relicButton{height:24px;padding:0 7px}
  .relicPanel{top:auto;bottom:145px;right:12px;width:min(285px,calc(100vw - 24px));max-height:210px}
  .relicFlash{top:auto;bottom:145px}
}
.rewardImg{display:block;width:88px;height:88px;object-fit:contain;image-rendering:auto;margin:0 0 8px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.38))}
.upgrade .rarity{display:block;font-size:9px;font-weight:900;letter-spacing:1.2px;color:#ffd46f;margin-bottom:2px}
.relicImage{width:22px;height:22px;object-fit:contain;image-rendering:auto;flex:0 0 auto}
.relicPanel .relicImage{width:28px;height:28px}
.relicFlash img{width:36px;height:36px;object-fit:contain;image-rendering:auto;filter:drop-shadow(0 0 12px rgba(255,211,107,.35))}
@media(max-width:700px),(pointer:coarse){
  .rewardImg{width:64px;height:64px;margin-bottom:5px}
  .upgrade{display:grid;grid-template-columns:64px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center}
  .upgrade .rewardImg{grid-row:1/3;grid-column:1}
  .upgrade .rarity,.upgrade b,.upgrade p{grid-column:2}
  .upgrade .rarity{align-self:end}
  .upgrade b{margin:1px 0 3px}
}
.relicChip .relicInfo{display:flex;flex-direction:column;min-width:0}
.relicChip .relicInfo small{display:none}
.relicPanel .relicChip{height:auto;min-height:44px;align-items:center;flex:1 1 130px}
.relicPanel .relicInfo{min-width:0;max-width:190px}
.relicPanel .relicInfo small{display:block;margin-top:2px;font-size:8px;line-height:1.35;color:#8792aa;white-space:normal}
.relicPanel .relicName{font-size:10px;font-weight:800}

.upgrade .rarity-epic{color:#d89cff}
.upgrade .rarity-legendary{color:#ffcc58;text-shadow:0 0 12px rgba(255,190,65,.28)}
.upgrade.relicChoice:has(.rarity-epic){border-color:rgba(190,115,255,.20)}
.upgrade.relicChoice:has(.rarity-legendary){border-color:rgba(255,204,88,.28);box-shadow:0 0 28px rgba(255,187,58,.05)}

.clearCard{width:min(760px,100%);text-align:center}
.clearCard h2{font-size:clamp(28px,5vw,42px);margin:0 0 6px}
.clearStats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:18px auto 12px;max-width:680px}
.clearStat{padding:12px 8px;border:1px solid rgba(255,255,255,.10);border-radius:13px;background:rgba(18,21,36,.78)}
.clearStat small{display:block;color:#7f8aa8;font-size:9px;letter-spacing:.8px;margin-bottom:4px}
.clearStat b{font-size:17px;color:#f2f5ff}
.clearRelics{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;max-width:680px;margin:12px auto}
.clearRelic{display:flex;align-items:center;gap:6px;padding:6px 9px;border-radius:10px;background:rgba(27,30,49,.88);border:1px solid rgba(255,215,110,.13);font-size:10px;color:#dfe5f5}
.clearRelic img{width:28px;height:28px;object-fit:contain;image-rendering:auto}
.clearRelic b{color:#ffdc7b;font-size:9px}
.clearRecord{font-size:10px;color:#99a5bd;margin:10px 0 16px;min-height:18px}
.clearActions{display:flex;justify-content:center;flex-wrap:wrap;gap:9px}
.clearActions button{border:1px solid rgba(255,255,255,.13);border-radius:12px;background:rgba(24,28,47,.92);color:#dfe5f5;padding:11px 18px;font-weight:800;cursor:pointer}
.clearActions .primary{border:0;color:#fff}
@media(max-width:700px),(pointer:coarse){
  .clearCard{padding-bottom:28px}
  .clearStats{grid-template-columns:repeat(2,1fr);gap:7px}
  .clearStat{padding:9px 6px}
  .clearRelics{max-height:170px;overflow:auto}
  .clearActions{display:grid;grid-template-columns:1fr 1fr}
  .clearActions .primary{grid-column:1/-1}
}

.topActions{display:flex;align-items:center;gap:6px}
.soundBtn{width:31px;height:31px;display:grid;place-items:center;border-radius:9px;border:1px solid rgba(255,255,255,.11);background:rgba(18,21,36,.76);color:#e9eefc;font-size:15px;padding:0;cursor:pointer;line-height:1}
.soundBtn:active{transform:scale(.94)}
@media(max-width:700px),(pointer:coarse){
  .topActions{margin-left:auto}
  .soundBtn{width:30px;height:30px;font-size:14px}
}
/* Eclipse polish: quiet metal, clear controls and space around the HUD. */
#game{image-rendering:pixelated;will-change:auto}
#heroName{max-width:215px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px!important}
.eyebrow,.ability.active .ico{color:var(--skill-ring,var(--gold))}
[data-hero="night"] .bar.xp i{background:linear-gradient(90deg,#58b6cf,#8e78c1)}
[data-hero="dawn"] .bar.xp i{background:linear-gradient(90deg,#b49051,#e5c47d)}
#specialBtn{background:radial-gradient(circle at 38% 30%,#303442,#151923 78%) padding-box,conic-gradient(from -90deg,var(--skill-ring) 0deg var(--cd-angle),rgba(255,255,255,.12) var(--cd-angle) 360deg) border-box}
#specialBtn.ready{box-shadow:0 0 7px var(--skill-glow),0 8px 20px #0008}
.ability.skillReady{box-shadow:0 0 5px var(--skill-glow)}
#toast{top:184px;max-width:calc(100vw - 32px);text-align:center;line-height:1.5}
.relicFlash{top:auto;bottom:100px}
@media(max-width:700px),(pointer:coarse){
 #hud{width:calc(100vw - 20px);padding:9px 12px;border-radius:11px}
 #heroName{font-size:13px!important;max-width:240px}
 .eyebrow{font-size:8px;letter-spacing:1.7px}
 .small{font-size:10px;margin-top:5px}
 #toast{top:146px;font-size:10px}
 .hudActionsRelic{bottom:8px}
 #joyBase{background:radial-gradient(circle,#77778920,#11141b66);border-color:#b8bcc033}
 #joyKnob{background:radial-gradient(circle at 35% 30%,#b1b5be,#555968 65%,#242833)}
 .relicFlash{top:auto;bottom:145px;max-width:calc(100vw - 28px)}
}
@media(max-height:500px) and (min-width:701px){#hud{padding:8px 12px;top:8px}#toast{top:auto;bottom:88px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
#hud .hudTop>div:first-child{min-width:0;flex:1}
.topActions{flex-shrink:0}
#hud #heroName{max-width:100%}
[data-controls="touch"] #mobileControls{display:block}
[data-controls="touch"] #abilityDock{display:none}
@media(orientation:landscape) and (max-height:500px){
 [data-controls="touch"] #hud{width:270px;padding:7px 10px}
 [data-controls="touch"] .eyebrow{font-size:8px}
 [data-controls="touch"] #heroName{font-size:11px!important}
 [data-controls="touch"] .homeLink{display:none}
 [data-controls="touch"] #joyBase{width:90px;height:90px;bottom:12px}
 [data-controls="touch"] #joyKnob{left:25px;top:25px}
 [data-controls="touch"] #specialBtn{width:72px;height:72px;bottom:12px}
}
#hud .eyebrow{font-size:8px;letter-spacing:1.1px;white-space:nowrap}
#hud #heroName{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25;font-size:12px!important}
.portrait img{image-rendering:pixelated}
.upgrade{position:relative}
.choiceKey{position:absolute;top:10px;right:12px;padding:3px 8px;border:1px solid #9b8b73;border-radius:4px;color:#ddd2ba;background:#171820;font:700 14px monospace}
@media(pointer:coarse){.choiceKey{display:none}}

/* Stage prose reads like a quiet inscription, separate from action notices. */
#toast.atmospheric{font-family:"Batang","바탕","AppleMyungjo","Noto Serif KR",serif;font-size:clamp(20px,2.1vw,28px);font-weight:400;letter-spacing:.055em;line-height:1.7;color:#e9ddc3;padding:12px 28px;border:0;border-radius:0;background:linear-gradient(90deg,transparent,rgba(12,12,15,.74) 18%,rgba(12,12,15,.74) 82%,transparent);text-shadow:0 2px 5px #000,0 0 15px rgba(221,200,159,.15);width:max-content;max-width:min(760px,calc(100vw - 36px));transition:opacity .65s,transform .65s}
@media(max-width:700px),(pointer:coarse){#toast.atmospheric{font-size:20px;padding:10px 18px;max-width:calc(100vw - 28px)}}