:root{--bg: #070b16;--panel: rgba(14, 20, 36, .86);--line: rgba(111, 160, 255, .28);--text: #e3ecff;--dim: #8a9bc0;--acc: #4fa8ff;--good: #3dff8a;--warn: #ffb02e}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:Noto Sans KR,system-ui,sans-serif;-webkit-user-select:none;user-select:none}canvas#view{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}.hidden{display:none!important}button{font:inherit;color:var(--text);background:#1e2c4ce6;border:1px solid var(--line);border-radius:8px;padding:8px 14px;cursor:pointer;transition:background .12s,border-color .12s,transform .08s}button:hover{background:#30487cf2;border-color:var(--acc)}button:active{transform:translateY(1px)}button:disabled{opacity:.4;cursor:default}kbd{font-family:Rajdhani,monospace;font-size:12px;padding:0 5px;border:1px solid var(--line);border-radius:4px;color:var(--dim);margin-left:4px}#hud{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none}#hud>*{pointer-events:auto}#brand{position:absolute;left:10px;top:10px;pointer-events:none;padding:6px 10px 7px;border-radius:10px;background:linear-gradient(90deg,#080c18b8,#080c1873)}#brand b{font-family:Rajdhani,sans-serif;font-size:22px;letter-spacing:4px;color:#bcd6ff;text-shadow:0 0 12px rgba(79,168,255,.6);display:block}#stats,#found{font-size:12px;color:var(--dim);display:block}#found{color:#9fe8c0}#goal.peek{opacity:.14}#goal{pointer-events:none}#goal-how-toggle{pointer-events:auto;cursor:pointer}#goal.peek #goal-how-toggle{pointer-events:none}#goal{transition:opacity .15s;position:absolute;top:12px;left:50%;transform:translate(-50%);width:min(460px,calc(100% - 32px));background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 14px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 8px 30px #0006}.goal-row{display:flex;gap:12px;align-items:center}#goal-icon{width:56px;height:56px;border-radius:8px;background:radial-gradient(circle,rgba(79,168,255,.18),transparent 70%)}.goal-text{flex:1;min-width:0}#goal-title{font-size:12px;color:var(--dim);letter-spacing:1px}#goal-item{font-size:17px;font-weight:700}#goal-item small{font-weight:400;color:var(--dim);font-size:14px}.bar{height:7px;background:#ffffff14;border-radius:4px;overflow:hidden;margin-top:6px}#goal-bar{height:100%;width:0;background:linear-gradient(90deg,#3f8cff,#7fe0ff);box-shadow:0 0 10px #4fa8ff;transition:width .2s}#goal-hint{font-size:13px;color:#b9c8e8;margin-top:8px;line-height:1.45}#toolbar{position:absolute;bottom:14px;left:50%;transform:translate(-50%);display:flex;gap:6px;padding:8px;background:var(--panel);border:1px solid var(--line);border-radius:14px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);max-width:calc(100% - 24px);overflow-x:auto}.tool{position:relative;width:70px;height:78px;padding:4px 2px 2px;display:flex;flex-direction:column;align-items:center;gap:0;border-radius:10px;background:#162038e6;flex:none}.tool img{width:52px;height:52px}.tool span{font-size:11px;color:#c6d4f2;white-space:nowrap}.tool .key{position:absolute;left:5px;top:3px;font-family:Rajdhani;font-size:13px;color:var(--dim)}.tool.active{border-color:var(--acc);background:#285096e6;box-shadow:0 0 14px #4fa8ff80}.tool.locked{opacity:.28;pointer-events:none}.tool.new:after{content:"NEW";position:absolute;right:3px;top:2px;font-size:9px;font-weight:900;color:#071022;background:var(--good);border-radius:3px;padding:0 3px}#side{position:absolute;right:14px;bottom:14px;display:flex;flex-direction:column;gap:6px}#side button{text-align:right;font-size:13px}#side button.off{color:var(--dim);text-decoration:line-through}#info{position:absolute;right:14px;top:14px;width:280px;overflow-y:auto;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:13px}#info h3{margin:0 0 4px;font-size:16px}#info p{margin:4px 0 8px;color:#b9c8e8;line-height:1.45}.recipes{display:flex;flex-direction:column;gap:6px;margin:8px 0}.recipe{display:flex;align-items:center;gap:6px;padding:6px;text-align:left}.recipe.sel{border-color:var(--good);background:#1e5a46b3}.recipe img{width:30px;height:30px}.recipe .arrow{color:var(--dim)}.row{display:flex;gap:6px;flex-wrap:wrap}.buf{display:flex;gap:8px;align-items:center;flex-wrap:wrap;color:var(--dim)}.buf img{width:24px;height:24px;vertical-align:middle}#tip{position:fixed;pointer-events:none;background:#080c18eb;border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:12px;max-width:260px;line-height:1.4}#tip b{font-size:13px}#toasts{position:absolute;top:84px;left:16px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;pointer-events:none;max-width:calc(50% - 250px);min-width:220px}.toast{background:#143c32eb;border:1px solid rgba(61,255,138,.5);color:#d8ffe8;padding:8px 16px;border-radius:10px;font-size:14px;animation:toast 3.2s forwards}.toast.bad{background:#46141eeb;border-color:#ff506480;color:#ffd8de}@keyframes toast{0%{opacity:0;transform:translateY(-8px)}8%{opacity:1;transform:none}80%{opacity:1}to{opacity:0}}#modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#03060e99;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:30}#modal-box{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px 26px;width:min(520px,calc(100% - 32px));max-height:calc(100% - 40px);overflow:auto;box-shadow:0 20px 60px #0009}#modal-box h2{margin:0 0 10px;font-size:22px}#modal-box .big{text-align:center}#modal-box .big img{width:120px;height:120px}.lvl-up{font-family:Rajdhani;letter-spacing:6px;color:var(--good);font-size:14px;text-align:center}.unlocks{display:flex;gap:10px;justify-content:center;margin:12px 0;flex-wrap:wrap}.unlocks div{text-align:center;font-size:12px}.unlocks img{width:64px;height:64px;display:block;margin:0 auto}.upg{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}.upg .nm{flex:1}.upg .nm b{display:block}.upg .nm small{color:var(--dim)}.upg .cost{display:flex;align-items:center;gap:4px;font-size:13px}.upg .cost img{width:30px;height:30px}.upg .cost.lack{color:#ff8090}.keys{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px}.keys kbd{margin:0;font-size:13px}.modal-btns{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}#title{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#070b1633,#070b16d9 75%);z-index:20}.title-inner{text-align:center;padding:16px}.logo{font-family:Rajdhani,sans-serif;font-weight:700;font-size:clamp(40px,8.5vw,120px);letter-spacing:.18em;color:#d9e8ff;text-shadow:0 0 24px rgba(79,168,255,.8),0 0 60px rgba(79,168,255,.4);margin-right:-.18em}.sub{font-size:clamp(16px,3vw,24px);letter-spacing:.5em;color:#8fb4ff;margin:4px 0 20px}.pitch{color:#b9c8e8;max-width:520px;margin:0 auto 26px;line-height:1.6}.title-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.title-btns button{font-size:18px;padding:12px 34px;min-width:180px}button.primary{background:linear-gradient(180deg,#3f7fe8,#2b5bb8);border-color:#7fb4ff;box-shadow:0 0 20px #4f8cff66}.foot{margin-top:30px;color:var(--dim);font-size:13px}@media (max-width: 700px){#goal{top:56px}#side{bottom:104px}.tool{width:58px;height:70px}.tool img{width:42px;height:42px}}#goal-how-wrap{margin-top:8px;border-top:1px solid var(--line);padding-top:6px}#goal-how-toggle{background:none;border:none;padding:2px 0;font-size:12px;color:var(--acc)}#goal.collapsed #goal-how{display:none}#goal.collapsed .caret{display:inline-block;transform:rotate(-90deg)}#goal-how{display:flex;flex-direction:column;gap:4px;margin-top:4px}.how-row{display:flex;align-items:center;gap:4px;flex-wrap:wrap;font-size:12px}.how-row img{width:30px;height:30px}.how-row i{color:var(--dim);font-style:normal;padding:0 2px}.how-row .plus{color:#fff;font-weight:900;padding:0 2px}.how-row .lv{font-size:11px;color:var(--dim);min-width:44px}.src{display:inline-flex;align-items:center;gap:2px;background:#ffffff0a;border-radius:6px;padding:1px 4px 1px 0}.chain{display:inline-flex;align-items:center;gap:1px}.chip{font-size:11px;padding:1px 6px;border-radius:4px;background:#5078c840;color:#dbe7ff;white-space:nowrap}.chip.b-press{background:#ff4fa838}.chip.b-punch{background:#ff4d6a40}.chip.b-painter{background:#9dff3f2e}.chip.b-joiner{background:#3fffc833}.chip.b-stacker{background:#a36bff47}.rule{display:inline-block;font-size:12px;color:#9fe8c0;background:#3dff8a14;border:1px solid rgba(61,255,138,.22);border-radius:5px;padding:0 6px}.rule.big{font-size:14px;margin:4px 0}img.mini{width:20px;height:20px;vertical-align:middle}.good{color:#3dff8a}.warn{color:#ffb02e}.bad{color:#ff6b6b}.dim{color:var(--dim)}.center{text-align:center}#info .status{min-height:18px}.toast{display:flex;align-items:center;gap:8px}.toast.disc{background:#281e50f0;border-color:#be8cff99;color:#efe4ff}.toast.disc img{width:40px;height:40px}#modal-box.wide{width:min(860px,calc(100% - 32px))}.codex{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px;margin-top:10px}.codex .card{background:#ffffff0a;border:1px solid var(--line);border-radius:10px;padding:6px;text-align:center;font-size:12px}.codex .card img{width:72px;height:72px;display:block;margin:0 auto}.codex .card small{display:block;color:var(--dim);font-size:10px;line-height:1.35;margin-top:3px}.rules{display:grid;grid-template-columns:1fr 1fr;gap:6px}.rules div{background:#ffffff0a;border-radius:8px;padding:6px 8px;font-size:13px}.rules b{display:block;font-size:12px;color:var(--dim)}.unlocks .rule{display:block;margin-top:3px}.settings{display:flex;flex-direction:column;gap:10px;font-size:14px}.settings input[type=range]{width:200px;vertical-align:middle;margin-left:8px}#guide{position:fixed;transform:translate(-50%,-100%);pointer-events:none;display:flex;flex-direction:column;align-items:center;animation:bob 1s ease-in-out infinite;z-index:5}#guide span{background:#3dff8a;color:#062012;font-weight:700;font-size:14px;padding:6px 12px;border-radius:8px;white-space:nowrap;box-shadow:0 0 20px #3dff8a99}#guide i{width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:14px solid #3dff8a}@keyframes bob{0%,to{margin-top:-6px}50%{margin-top:6px}}.title-inner .pitch b{color:#cfe3ff}.master-h{margin:14px 0 4px;font-size:16px;color:#ffd84f}.master-h small{font-size:12px;font-weight:400;margin-left:6px}.codex .card.gold{border-color:#ffd84fb3;background:#ffd84f14;box-shadow:0 0 14px #ffd84f33}.codex .card.locked{opacity:.75}.codex .card .q{width:72px;height:72px;margin:0 auto;display:flex;align-items:center;justify-content:center;font-size:40px;color:#556;border:1px dashed #445;border-radius:10px}.codex.masters .card small{font-size:11px;color:#c9b98a}.toast.master{background:#46340af2;border-color:#ffd84f;color:#fff4cf;font-size:15px;box-shadow:0 0 24px #ffd84f66}table.stats{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px}table.stats th{text-align:left;color:var(--dim);font-weight:400;border-bottom:1px solid var(--line);padding:4px 6px}table.stats td{padding:3px 6px;border-bottom:1px solid rgba(255,255,255,.04)}table.stats td:nth-child(n+3),table.stats th:nth-child(n+3){text-align:right;font-variant-numeric:tabular-nums}table.stats tr.goal td{background:#3dff8a14}.stat-goal{background:#ffffff0a;border-radius:8px;padding:8px 10px;margin:6px 0}.tool.new{animation:newpulse 1.4s ease-in-out infinite}@keyframes newpulse{0%,to{box-shadow:0 0 #3dff8a00}50%{box-shadow:0 0 16px #3dff8abf;border-color:#3dff8a}}.ach-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}.ach{border:1px solid var(--line);border-radius:8px;padding:6px 8px;opacity:.45;font-size:12px}.ach b{display:block;font-size:13px}.ach small{color:var(--dim)}.ach.on{opacity:1;border-color:#7fd8ffb3;background:#4fa8ff1a}.ach.on b:before{content:"◆ ";color:#7fd8ff}.toast.ach{background:#0e2c4ef2;border-color:#7fd8ff;color:#e3f4ff}.bp-cur,.bp-item{background:#ffffff0a;border:1px solid var(--line);border-radius:10px;padding:10px;margin:8px 0}.bp-item{display:flex;align-items:center;gap:10px}.bp-item .nm{flex:1;min-width:0}.bp-item .nm small{margin-left:6px}.bp-sum{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0}.bp-chip{display:inline-flex;align-items:center;gap:2px;font-size:12px;background:#ffffff0d;border-radius:6px;padding:0 6px 0 0}.bp-chip img{width:26px;height:26px}#bp-name{flex:1;min-width:140px}input[type=text],#bp-name,textarea{font:inherit;color:var(--text);background:#0000004d;border:1px solid var(--line);border-radius:8px;padding:8px 10px}.bp-import{margin-top:10px}.bp-import summary{cursor:pointer;color:var(--acc);font-size:13px}.bp-import textarea{width:100%;margin:6px 0;font-size:12px;font-family:monospace}.keygrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:4px 14px;margin-top:8px}.keyrow{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;padding:2px 0;border-bottom:1px solid rgba(255,255,255,.04)}.keyrow button{min-width:64px;padding:4px 10px;font-family:Rajdhani,monospace;font-size:15px}.keyrow button.changed{border-color:#ffb02e}.keyrow button.wait{border-color:#3dff8a;background:#1e5a46b3}#minimap{position:absolute;left:14px;bottom:112px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:6px;display:flex;flex-direction:column;gap:4px;align-items:stretch;z-index:2}#minimap canvas{display:block;border-radius:6px;cursor:crosshair;image-rendering:pixelated;width:160px;height:160px}#minimap button{font-size:12px;padding:3px 8px}#minimap.big{left:50%;top:50%;bottom:auto!important;transform:translate(-50%,-50%);z-index:8;box-shadow:0 20px 60px #0009}#minimap.big canvas{width:min(calc(100vw - 140px),calc(100vh - 140px));height:min(calc(100vw - 140px),calc(100vh - 140px))}@media (max-width: 1100px){#minimap:not(.big) canvas{width:110px;height:110px}}#title{transition:opacity .7s ease}#title.leaving{opacity:0;pointer-events:none}#hud.entering>:not(#guide):not(#tip):not(#toasts){animation:hudin .9s ease both}@keyframes hudin{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}#hud.entering #goal,#hud.entering #toolbar{animation-name:hudin-c}@keyframes hudin-c{0%{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%)}}.slots{display:flex;flex-direction:column;gap:8px;margin-top:8px}.slot{display:flex;align-items:center;gap:12px;background:#ffffff0a;border:1px solid var(--line);border-radius:10px;padding:10px 12px}.slot-n{font-family:Rajdhani;font-size:28px;color:var(--acc);width:24px;text-align:center}.slot-info{flex:1;display:flex;flex-direction:column;gap:2px;font-size:13px}.slot-info small{font-size:12px}button.danger{border-color:#ff5d6c;background:#781423cc}.upg .lock{display:block;color:#ffb35c}.lvl-up{animation:lvlpop .6s cubic-bezier(.2,1.6,.4,1) both;text-shadow:0 0 18px rgba(61,255,138,.8);font-size:16px}@keyframes lvlpop{0%{opacity:0;transform:scale(.6);letter-spacing:20px}to{opacity:1;transform:none}}#modal-box .big img{animation:lvlpop .7s .1s cubic-bezier(.2,1.5,.4,1) both}.unlocks>div{animation:unl .5s cubic-bezier(.2,1.4,.4,1) both}.unlocks>div:nth-child(1){animation-delay:.35s}.unlocks>div:nth-child(2){animation-delay:.5s}.unlocks>div:nth-child(3){animation-delay:.65s}@keyframes unl{0%{opacity:0;transform:translateY(14px) scale(.8)}to{opacity:1;transform:none}}.unlocks img{filter:drop-shadow(0 0 10px rgba(127,224,255,.55))}#banner{position:absolute;bottom:132px;left:50%;transform:translate(-50%);text-align:center;pointer-events:none;z-index:6;padding:16px 34px 14px;border-radius:16px;background:radial-gradient(ellipse at 50% 0%,#ffd84f47,#0a0c18e0 70%);border:1px solid rgba(255,216,79,.7);box-shadow:0 0 40px #ffc83c59,0 20px 50px #00000080;animation:bannerIn .7s cubic-bezier(.2,1.4,.4,1) both}#banner.out{animation:bannerOut .8s ease forwards}#banner .b-tag{font-family:Rajdhani;letter-spacing:8px;color:#ffd84f;font-size:15px;text-shadow:0 0 14px rgba(255,216,79,.9)}#banner img{width:96px;height:96px;display:block;margin:6px auto 0;animation:bannerSpin 4.5s ease-out both;filter:drop-shadow(0 0 16px rgba(255,216,79,.6))}#banner h2{margin:4px 0 2px;font-size:26px;color:#fff3c4}#banner p{margin:0 0 6px;font-size:13px;color:#d9cfa8}#banner small{color:#ffd84f;font-size:13px}@keyframes bannerIn{0%{opacity:0;transform:translate(-50%) scale(.7)}to{opacity:1;transform:translate(-50%)}}@keyframes bannerOut{to{opacity:0;transform:translate(-50%) translateY(-20px)}}@keyframes bannerSpin{0%{transform:scale(.4) rotate(-30deg)}25%{transform:scale(1.1) rotate(4deg)}40%{transform:none}to{transform:none}}:root{--ui: 1}#hud,#modal{zoom:var(--ui)}.settings select{background:#ffffff0f;color:inherit;border:1px solid var(--line);border-radius:6px;padding:3px 6px;font:inherit}.settings select option{background:#10162a}.chip.b-turner{background:#4fd1ff38}#stats .score{color:#ffd23f;font-weight:700}.score-have{font-size:15px;margin:4px 0 10px}.score-have b{color:#ffd23f;font-size:18px}#btn-upg.can{border-color:#ffd23f;box-shadow:0 0 0 1px #ffd23f80,0 0 14px #ffd23f59}#btn-upg.can:after{content:"●";color:#ffd23f;margin-left:6px;font-size:10px;vertical-align:middle}