:root{--ink: #0b0910;--ink-2: #14101c;--paper: #efe5cf;--paper-dim: #c3b697;--dan: #c4312f;--dan-dark: #7d1f22;--gold: #e0b451;--jade: #2e8f7d;--hex: #9a5fd6;--ghost: #8fe3d8;--font: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;background:#05040a;color:var(--paper);font-family:var(--font);overflow:hidden;overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:none}#app{position:fixed;inset:0;display:block;background:radial-gradient(ellipse at 50% 0%,#1a1426,#05040a 70%)}#world{position:absolute;image-rendering:pixelated;image-rendering:crisp-edges;transform-origin:top left;box-shadow:0 0 60px #000000e6}#overlay{position:absolute;inset:0;pointer-events:none}#ui{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;pointer-events:auto;background:#05040ad1;backdrop-filter:blur(6px);animation:fadeIn .24s ease both;padding:24px;text-align:center;overflow-y:auto}.screen.transparent{background:#05040a8c}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes riseIn{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}.title-wrap{display:flex;flex-direction:column;align-items:center;gap:4px;animation:riseIn .5s ease both}.game-title{font-size:clamp(38px,9vw,86px);font-weight:900;letter-spacing:.12em;margin:0;color:var(--paper);text-shadow:0 0 28px rgba(196,49,47,.55),0 4px 0 #3a1418}.game-sub{font-size:clamp(12px,2.4vw,17px);letter-spacing:.4em;color:var(--gold);margin:0 0 6px;text-transform:none}.seal{width:62px;height:62px;border:3px solid var(--dan);border-radius:8px;display:grid;place-items:center;color:var(--dan);font-size:26px;font-weight:900;background:#c4312f14;box-shadow:0 0 22px #c4312f59;margin-bottom:8px}.divider{width:min(420px,70vw);height:2px;background:linear-gradient(90deg,transparent,var(--dan) 20%,var(--gold) 50%,var(--dan) 80%,transparent);opacity:.8;margin:6px 0 2px}.flavor{max-width:560px;font-size:14px;line-height:1.7;color:var(--paper-dim);margin:0}.menu{display:flex;flex-direction:column;gap:10px;margin-top:10px;width:min(320px,82vw)}button.btn{font-family:var(--font);font-size:16px;font-weight:700;letter-spacing:.06em;padding:13px 20px;color:var(--paper);background:linear-gradient(180deg,#281e32f2,#14101cf2);border:1px solid rgba(224,180,81,.35);border-radius:6px;cursor:pointer;transition:transform .1s ease,border-color .15s ease,background .15s ease}button.btn:hover,button.btn:focus-visible{border-color:var(--gold);background:linear-gradient(180deg,#3c2c1cf2,#1e1610f2);transform:translateY(-1px);outline:none}button.btn:active{transform:translateY(1px)}button.btn.primary{background:linear-gradient(180deg,#a8231f,#6d1416);border-color:#f0dcb480;font-size:18px}button.btn.primary:hover{background:linear-gradient(180deg,#c4312f,#8a1f22)}button.btn.ghost{background:transparent;border-color:#c8beaa40;font-size:14px;font-weight:600}button.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.cards{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;max-width:900px}.card{width:200px;min-height:210px;padding:16px 14px;background:linear-gradient(180deg,#1e1828f5,#0e0b14f5);border:1px solid rgba(154,164,176,.35);border-radius:8px;display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease;animation:riseIn .3s ease both;position:relative}.card:hover,.card:focus-visible{transform:translateY(-5px);box-shadow:0 10px 34px #0009;outline:none}.card.rare{border-color:#5a9fd6b3}.card.rare:hover{box-shadow:0 10px 34px #5a9fd647}.card.epic{border-color:#c07adbcc}.card.epic:hover{box-shadow:0 10px 34px #c07adb52}.card canvas{image-rendering:auto}.card .icon-box{width:62px;height:62px;display:grid;place-items:center;background:#00000059;border-radius:8px;border:1px solid rgba(255,255,255,.06)}.card .rarity{font-size:11px;letter-spacing:.2em;color:var(--paper-dim)}.card .name{font-size:18px;font-weight:800;margin:0}.card .desc{font-size:13px;line-height:1.55;color:var(--paper-dim);margin:0}.card .key{position:absolute;top:8px;left:8px;width:20px;height:20px;border-radius:4px;background:#ffffff14;color:var(--paper-dim);font-size:11px;font-weight:700;display:grid;place-items:center}.card .glyph{font-size:34px;line-height:1}.heading{font-size:clamp(22px,4vw,34px);font-weight:900;margin:0;letter-spacing:.06em}.subheading{font-size:14px;color:var(--paper-dim);margin:0;letter-spacing:.1em}.stat-row{display:flex;gap:26px;flex-wrap:wrap;justify-content:center;margin-top:4px}.stat{display:flex;flex-direction:column;gap:2px}.stat .v{font-size:24px;font-weight:800;color:var(--gold)}.stat .k{font-size:12px;color:var(--paper-dim);letter-spacing:.14em}.shop-list{display:flex;flex-direction:column;gap:8px;width:min(560px,92vw)}.shop-row{display:flex;align-items:center;gap:14px;padding:12px 14px;background:#14101ce6;border:1px solid rgba(255,255,255,.08);border-radius:6px;text-align:left}.shop-row .info{flex:1}.shop-row .nm{font-size:15px;font-weight:700}.shop-row .ds{font-size:12px;color:var(--paper-dim);margin-top:2px}.shop-row .lv{font-size:12px;color:var(--ghost);letter-spacing:.1em}.pips{display:flex;gap:3px;margin-top:5px}.pip{width:16px;height:5px;border-radius:2px;background:#ffffff24}.pip.on{background:var(--gold)}.souls-badge{display:inline-flex;align-items:center;gap:8px;font-size:18px;font-weight:800;color:var(--ghost);padding:6px 14px;border-radius:999px;background:#8fe3d81a;border:1px solid rgba(143,227,216,.3)}.banner{position:absolute;top:19%;left:50%;transform:translate(-50%);text-align:center;pointer-events:none;animation:bannerIn .4s ease both}.banner .bt{font-size:clamp(24px,5vw,42px);font-weight:900;letter-spacing:.1em;text-shadow:0 2px 20px rgba(0,0,0,.9)}.banner .bs{font-size:14px;color:var(--paper-dim);letter-spacing:.22em;margin-top:4px}.banner.out{animation:bannerOut .45s ease both}@keyframes bannerIn{0%{opacity:0;transform:translate(-50%) translateY(-16px) scale(.95)}to{opacity:1;transform:translate(-50%)}}@keyframes bannerOut{to{opacity:0;transform:translate(-50%) translateY(-10px)}}.chapter-card{display:flex;flex-direction:column;align-items:center;gap:10px;animation:riseIn .6s ease both}.chapter-card .ch{font-size:15px;letter-spacing:.5em;color:var(--dan);font-weight:700}.chapter-card .nm{font-size:clamp(26px,6vw,52px);font-weight:900;letter-spacing:.08em;margin:0}.chapter-card .fl{font-size:14px;color:var(--paper-dim);max-width:520px;line-height:1.8}.keys{display:grid;grid-template-columns:auto auto;gap:7px 18px;font-size:13px;color:var(--paper-dim)}.keys b{color:var(--paper);font-weight:700}.kbd{display:inline-block;padding:2px 7px;border-radius:4px;background:#ffffff17;border:1px solid rgba(255,255,255,.14);font-size:12px;font-weight:700;color:var(--paper)}#touch{position:absolute;inset:0;pointer-events:none;display:none}#touch.on{display:block}.stick-zone{position:absolute;left:0;bottom:0;width:44%;height:62%;pointer-events:auto}.stick-base{position:absolute;width:112px;height:112px;border-radius:50%;border:2px solid rgba(240,230,210,.22);background:#0a08104d;transform:translate(-50%,-50%);opacity:0;transition:opacity .15s}.stick-knob{position:absolute;width:50px;height:50px;border-radius:50%;background:#f0e6d259;border:2px solid rgba(240,230,210,.5);transform:translate(-50%,-50%);opacity:0;transition:opacity .15s}.stick-zone.active .stick-base,.stick-zone.active .stick-knob{opacity:1}.pad{position:absolute;right:12px;bottom:14px;width:210px;height:190px;pointer-events:none}.tbtn{position:absolute;border-radius:50%;border:2px solid rgba(240,230,210,.24);background:#1812206b;backdrop-filter:blur(2px);color:var(--paper);font-family:var(--font);font-weight:800;display:grid;place-items:center;pointer-events:auto;font-size:13px;letter-spacing:.02em;transition:transform .06s,background .06s}.tbtn:active,.tbtn.down{background:#c4312fbf;transform:scale(.93)}.tbtn.big{width:66px;height:66px;font-size:15px}.tbtn.sm{width:54px;height:54px}.tbtn.tiny{width:46px;height:46px;font-size:12px}.corner-btns{position:absolute;top:8px;right:8px;display:flex;gap:6px;pointer-events:auto;z-index:5}.icon-btn{width:34px;height:34px;border-radius:6px;background:#0e0b14b3;border:1px solid rgba(255,255,255,.14);color:var(--paper);display:grid;place-items:center;cursor:pointer;font-size:15px;padding:0}.icon-btn:hover{border-color:var(--gold)}.hidden{display:none!important}@media (max-height: 470px){.game-title{font-size:clamp(30px,7vh,46px)}.seal{width:40px;height:40px;font-size:18px;margin-bottom:2px}.screen{gap:8px;padding:14px 10px 10px;justify-content:flex-start}.flavor{font-size:12px;line-height:1.5}button.btn{padding:9px 16px;font-size:14px}button.btn.primary{font-size:15px}.menu{gap:7px;margin-top:4px}.stat-row{gap:16px}.stat .v{font-size:18px}.stat .k{font-size:10px}.card{min-height:0;padding:10px}.chapter-card .nm{font-size:clamp(22px,6vh,34px)}.divider{margin:2px 0}}@media (max-width: 640px){.card{width:150px;min-height:180px;padding:12px 10px}.card .name{font-size:15px}.card .desc{font-size:11.5px}.card .icon-box{width:48px;height:48px}.cards{gap:9px}.screen{gap:12px;padding:14px}.menu{width:min(280px,86vw)}}.code-box{display:flex;gap:8px;width:min(460px,92vw)}.code-field{flex:1;min-width:0;font-family:ui-monospace,Cascadia Mono,Consolas,monospace;font-size:15px;letter-spacing:.08em;text-align:center;padding:12px 10px;color:var(--gold);background:#08060ee6;border:1px solid rgba(224,180,81,.3);border-radius:6px;-webkit-user-select:text;user-select:text;touch-action:auto}.code-field:focus{outline:none;border-color:var(--gold)}.code-field::placeholder{color:#c3b69759;letter-spacing:.06em}.code-box button.btn{flex:0 0 auto;font-size:14px;padding:12px 16px}.code-note{font-size:13px;line-height:1.7;margin:0;min-height:22px;text-align:center;max-width:min(460px,92vw)}.code-note.bad{color:var(--dan)}.code-note.warn{color:var(--gold)}.key-list{display:flex;flex-direction:column;gap:6px;width:min(420px,92vw)}.key-row{display:flex;align-items:center;gap:12px;padding:4px 10px;background:#ffffff08;border-radius:6px}.key-row .nm{flex:1;font-size:15px;font-weight:700}.key-row button.btn{min-width:130px;padding:8px 12px;font-size:14px}