:root{--ink:#f6efe2;--dim:#b9b2c9;--glass:rgba(24,20,44,.72);--line:rgba(255,255,255,.14);--gold:#ffd36b;--pink:#ff8fb8;--bg:#15122b}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:"Malgun Gothic","Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;user-select:none}
canvas{position:fixed;inset:0;display:block;cursor:default}
#bar{position:fixed;left:0;right:0;top:0;height:56px;display:flex;align-items:center;gap:10px;padding:0 16px;pointer-events:none}
#bar>*{pointer-events:auto}
#brand{font-weight:800;font-size:20px;letter-spacing:.5px;color:var(--gold);text-shadow:0 2px 0 rgba(0,0,0,.35);margin-right:auto;white-space:nowrap}
#brand small{color:var(--dim);font-weight:500;font-size:12px;margin-left:8px}
#status{position:fixed;left:50%;top:62px;transform:translateX(-50%);background:var(--glass);border:1px solid var(--line);border-radius:999px;padding:8px 20px;font-weight:700;font-size:16px;display:flex;align-items:center;gap:10px;backdrop-filter:blur(8px);box-shadow:0 6px 24px rgba(0,0,0,.35);white-space:nowrap;pointer-events:none}
#dot{width:14px;height:14px;border-radius:50%;border:2px solid #000;background:#fff;box-shadow:0 0 10px currentColor}
#dot.b{background:#2b2146}
#status.think #dot{animation:pulse .9s infinite}
@keyframes pulse{50%{transform:scale(1.5);opacity:.6}}
.btn{font:inherit;color:var(--ink);background:var(--glass);border:1px solid var(--line);border-radius:12px;padding:8px 14px;font-weight:700;font-size:14px;cursor:pointer;backdrop-filter:blur(8px);transition:.15s;white-space:nowrap}
.btn:hover{background:rgba(255,255,255,.16);transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn.on{border-color:var(--gold);color:var(--gold)}
.btn.primary{background:linear-gradient(180deg,#ffd36b,#f0a53a);color:#3a2300;border-color:#ffe6a8;box-shadow:0 4px 0 #a86a10}
.btn.primary:hover{filter:brightness(1.06)}
.btn[disabled]{opacity:.4;pointer-events:none}
#camhint{position:fixed;left:50%;bottom:8px;transform:translateX(-50%);font-size:12px;color:var(--dim);background:rgba(20,16,40,.55);padding:5px 14px;border-radius:99px;pointer-events:none;white-space:nowrap}
#banner{position:fixed;left:0;right:0;top:38%;text-align:center;font-weight:900;font-size:min(9vw,110px);color:#fff;letter-spacing:2px;pointer-events:none;opacity:0;text-shadow:0 0 30px var(--pink),0 6px 0 rgba(0,0,0,.4);-webkit-text-stroke:3px #3b1a55;paint-order:stroke fill}
#banner.show{animation:ban 1.5s ease-out forwards}
@keyframes ban{0%{opacity:0;transform:scale(.4) rotate(-6deg)}15%{opacity:1;transform:scale(1.15) rotate(2deg)}30%{transform:scale(1) rotate(0)}80%{opacity:1}100%{opacity:0;transform:scale(1.1) translateY(-30px)}}
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(10,8,24,.62);backdrop-filter:blur(6px);z-index:10}
.modal.show{display:flex}
.card{width:min(560px,94vw);max-height:94vh;overflow:auto;background:linear-gradient(180deg,#2a2150,#1b1638);border:1px solid var(--line);border-radius:22px;padding:26px 28px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.card h1{margin:0 0 4px;font-size:30px;color:var(--gold);text-shadow:0 3px 0 rgba(0,0,0,.35)}
.card .sub{color:var(--dim);margin:0 0 18px;font-size:14px}
.row{display:flex;align-items:center;gap:12px;margin:14px 0;flex-wrap:wrap}
.row>label{width:96px;color:var(--dim);font-weight:700;font-size:14px}
.seg{display:flex;gap:6px;flex:1;min-width:200px}
.seg button{flex:1;font:inherit;font-weight:700;font-size:14px;padding:9px 6px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--ink);cursor:pointer}
.seg button.on{background:var(--gold);color:#3a2300;border-color:#fff2c4}
input[type=range]{flex:1;min-width:160px;accent-color:#ffb43a}
.lvl{font-weight:800;color:var(--gold);min-width:150px;text-align:right;font-size:14px}
.sw{position:relative;width:48px;height:26px;background:#463d6b;border-radius:99px;cursor:pointer;border:1px solid var(--line);transition:.2s;flex:none}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.2s}
.sw.on{background:#f0a53a}.sw.on::after{left:24px}
.tl{flex:1;font-size:14px}.tl small{display:block;color:var(--dim)}
.actions{display:flex;gap:10px;justify-content:flex-end;margin-top:22px}
#promo .opts{display:flex;gap:14px;justify-content:center;margin:12px 0 4px}
#promo .opts button{background:rgba(255,255,255,.08);border:1px solid var(--line);border-radius:16px;padding:10px;cursor:pointer;transition:.15s}
#promo .opts button:hover{background:rgba(255,211,107,.25);transform:translateY(-4px)}
#promo img{height:130px;display:block}
#over h1{font-size:38px;text-align:center}
#over .sub{text-align:center;font-size:16px}
#load{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg);z-index:20;font-size:20px;color:var(--gold);font-weight:800}
@media(max-width:1250px){.btn{padding:6px 9px;font-size:12px}#brand small{display:none}#brand{font-size:16px}#bar{gap:6px;padding:0 8px}}