:root{
  color-scheme:dark;
  --bg:#080d19;
  --panel:#101827;
  --panel-2:#151f32;
  --line:#2a3850;
  --text:#f7f1df;
  --muted:#93a2b8;
  --gold:#f3c86a;
  --sky:#7dd3fc;
  --violet:#aa8cff;
  --green:#76e3a5;
}
*{box-sizing:border-box}
html,body{margin:0;min-width:320px;min-height:100%;background:#05080e}
body{color:var(--text);font-family:Inter,"Pretendard","Noto Sans KR",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit}
.lab-shell{width:min(100%,390px);min-height:100svh;margin:auto;padding:max(14px,env(safe-area-inset-top)) 10px max(18px,env(safe-area-inset-bottom));background:radial-gradient(circle at 50% 0,#1b2940 0,#0a101d 36%,#070b13 80%)}
.lab-head{display:flex;align-items:center;justify-content:space-between;min-height:57px;padding:0 4px 10px}
.lab-head small{display:block;color:#b5c7df;font-size:8px;font-weight:950;letter-spacing:.17em}
.lab-head h1{margin:5px 0 0;font-family:Georgia,"Times New Roman",serif;font-size:25px;line-height:1;letter-spacing:-.045em}
.draft-badge{padding:6px 8px;border:1px solid #665739;border-radius:999px;color:#f6d88e;background:#1d1a13;font-size:8px;font-weight:900}
.preview-card{padding:7px;border:1px solid #2d3f59;border-radius:18px;background:#0b1322;box-shadow:0 20px 45px #0008}
.scene{position:relative;height:388px;overflow:hidden;border:1px solid #4a5870;border-radius:13px;background:#455f70;isolation:isolate;touch-action:manipulation}
.stage-back{position:absolute;inset:0;background:#6e8991 url("assets/scene/stage-01-background.png") center top/390px 306px repeat-x;image-rendering:pixelated}
.stage-floor{position:absolute;left:0;right:0;bottom:0;height:194px;background:#59663e url("assets/scene/stage-01-floor.png") center top/390px 306px repeat-x;image-rendering:pixelated;clip-path:polygon(0 15%,100% 0,100% 100%,0 100%)}
.scene-grade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,15,28,.03),rgba(8,14,19,.08) 52%,rgba(5,9,14,.32));box-shadow:inset 0 -80px 68px rgba(2,6,10,.2)}
.hero-sprite{position:absolute;z-index:4;left:-39px;bottom:49px;width:288px;height:176px;background:url("assets/scene/hero-idle.png") 0 0/auto 176px no-repeat;image-rendering:pixelated;filter:drop-shadow(0 7px 5px rgba(0,0,0,.4))}
.enemy-sprite{position:absolute;z-index:4;right:3px;bottom:63px;width:150px;height:101px;background:url("assets/scene/mushroom-idle.png") 0 0/600px 101px no-repeat;image-rendering:pixelated;filter:drop-shadow(0 7px 5px rgba(0,0,0,.38))}
#fxCanvas{position:absolute;z-index:8;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.scene-caption{position:absolute;z-index:12;left:10px;right:10px;top:9px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.scene-caption span{padding:5px 7px;border:1px solid rgba(220,234,255,.18);border-radius:7px;color:#eef6ff;background:rgba(6,12,22,.52);backdrop-filter:blur(5px);font-size:8px;font-weight:900;letter-spacing:.04em}
.scene-caption b{color:#fff2be;font-size:8px;text-shadow:0 2px 5px #000}
.phase-track{position:absolute;z-index:12;left:9px;right:9px;bottom:8px;display:grid;grid-template-columns:18fr 24fr 10fr 20fr 28fr;height:21px;overflow:hidden;border:1px solid rgba(224,236,255,.22);border-radius:6px;background:rgba(6,10,18,.72);pointer-events:none}
.phase-track span{display:grid;place-items:center;border-right:1px solid rgba(255,255,255,.08);color:#aebbd0;font-size:6px;font-weight:850}
.phase-track span:nth-of-type(3){color:#fff1bd;background:rgba(243,200,106,.12)}
.phase-track i{position:absolute;z-index:2;top:0;bottom:0;left:0;width:2px;background:#fff8da;box-shadow:0 0 8px #f3c86a;transform:translateX(-1px)}
.controls{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-top:7px}
.effect-tab{min-width:0;min-height:54px;padding:6px 2px;border:1px solid #2b3a51;border-radius:10px;color:#8392a8;background:#0b111d;font-size:7px;font-weight:850;cursor:pointer;transition:.16s ease}
.effect-tab i{display:block;margin-bottom:2px;color:#aebcd0;font-size:18px;font-style:normal;line-height:1}
.effect-tab span{display:block;white-space:nowrap}
.effect-tab.active{border-color:#7698b7;color:#f5f0e0;background:linear-gradient(155deg,#1c3043,#131928);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 0 16px rgba(125,211,252,.08)}
.effect-tab.active i{color:#fff1bd;text-shadow:0 0 10px #7dd3fc}
.action-row{display:flex;align-items:center;gap:6px;margin-top:7px}
.action-row button{min-height:32px;padding:0 10px;border:1px solid #33465f;border-radius:9px;color:#d9e3ef;background:#101a2a;font-size:8px;font-weight:900;cursor:pointer}
.action-row button:active{transform:translateY(1px)}
.action-row .anatomy-button[aria-pressed="true"]{color:#172115;border-color:#76e3a5;background:#76e3a5}
.action-row>span{margin-left:auto;color:#6f8098;font-size:7px;font-variant-numeric:tabular-nums}.action-row>span b{color:#a7b7cb}
.rule-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:9px}
.rule-strip article{min-height:68px;padding:8px 6px;border:1px solid #26354c;border-radius:11px;background:linear-gradient(155deg,rgba(26,37,57,.96),rgba(12,19,31,.96))}
.rule-strip b{display:block;margin-bottom:5px;color:var(--gold);font-size:9px}
.rule-strip span{display:block;color:#a6b4c6;font-size:7px;font-weight:750;line-height:1.45}
.note{margin:9px 3px 0;color:#68788e;font-size:7px;line-height:1.5}
@media(max-width:430px){.lab-shell{width:100%}.scene{height:min(388px,46svh)}.preview-card{padding:6px}.effect-tab{min-height:51px}.rule-strip article{min-height:64px}}
@media(max-width:340px){.lab-shell{padding-left:7px;padding-right:7px}.lab-head h1{font-size:22px}.scene{height:352px}.hero-sprite{left:-54px;bottom:38px}.enemy-sprite{right:-9px;bottom:53px}.effect-tab{min-height:48px}.effect-tab i{font-size:16px}.rule-strip span{font-size:6px}.note{display:none}}
@media(prefers-reduced-motion:reduce){.scene{scroll-behavior:auto}}