:root{color-scheme:dark;--bg:#101d1a;--panel:#1b2d27;--mint:#a0e8bf;--gold:#e8c77e;--muted:#9baa9f;--line:rgba(168,203,177,.18);font-family:"Malgun Gothic","Apple SD Gothic Neo",sans-serif;font-size:16px;color:#ecf5eb}*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:radial-gradient(ellipse at 60% 25%,#223c30 0,#101a17 55%,#0b1210);display:flex;align-items:center;justify-content:center;overflow:hidden}button,input,select{font:inherit}button{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:2px solid var(--mint);outline-offset:4px}button:disabled{cursor:default}button,a{color:inherit}button{border:0}a{text-decoration:none}[hidden]{display:none!important}.game-shell{position:relative;width:min(100vw,56.25dvh,540px);height:min(100dvh,177.7778vw,960px);background:#203c28;overflow:hidden;isolation:isolate;box-shadow:0 0 0 1px #66896c35,0 25px 100px #0007;touch-action:none;container-type:inline-size}#game-canvas{display:block;width:100%;height:100%;image-rendering:pixelated;outline:0;touch-action:none}.desktop-note{position:absolute;left:max(36px,calc(50vw - 560px));top:0;bottom:0;display:flex;flex-direction:column;justify-content:space-between;padding:48px 0;color:var(--muted);max-width:250px}.desktop-note a{font-size:13px}.desktop-note h1{font-size:30px;line-height:1.5;letter-spacing:-1px;color:#e5eddf;font-weight:700}.desktop-note p{font-size:14px;line-height:1.9}.desktop-note small{font-size:11px;line-height:1.8}.eyebrow{font-size:10px;letter-spacing:2.5px;color:var(--mint);font-weight:700}.key-hint{margin:24px 0 12px;width:98px;text-align:center}.key-hint>kbd{display:inline-block;margin-bottom:4px}kbd{display:inline-block;text-align:center;font:12px monospace;padding:7px 9px;background:#22342b;border:1px solid #4b65524f;border-bottom-width:3px;border-radius:5px}.key-hint div{display:flex;gap:4px}.screen-layer{position:absolute;inset:0;pointer-events:none;z-index:20}.screen-layer:has(.screen){pointer-events:auto}.screen{position:absolute;inset:0;display:flex;flex-direction:column;padding:7.4% 7.4% 6%;background:linear-gradient(160deg,#172c23fa,#101f1bfa);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#38503d transparent}.screen.dialog-screen{background:#0b1614be;justify-content:center;padding:7.4%;backdrop-filter:blur(4px)}.main-screen{text-align:center;background:radial-gradient(ellipse at 50% 42%,#39503c55,transparent 44%),linear-gradient(#152920f5,#15281ff5);justify-content:space-between}.main-screen:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 17%,#21392950 17% 19%,transparent 19% 81%,#21392950 81% 83%,transparent 83%),linear-gradient(0deg,#1f37284f 0 15%,transparent 15% 85%,#1e37234f 85% 100%);pointer-events:none;z-index:-1}.main-brand{padding-top:8%}.main-brand .eyebrow{font-size:clamp(9px,2.4cqw,13px);letter-spacing:4px}.main-brand h1{font-size:clamp(32px,9.3cqw,50px);letter-spacing:-3px;line-height:1.25;margin:12px 0 6px;font-weight:900;text-shadow:3px 4px #0b1d16}.main-brand p{font-size:clamp(11px,3cqw,16px);color:#bbcebc;letter-spacing:3px;margin:0}.hero-art{position:relative;flex:1;min-height:140px;display:flex;align-items:center;justify-content:center}.hero-art:before{content:"";position:absolute;width:68%;height:20%;bottom:23%;background:#091b116e;border-radius:50%;filter:blur(13px)}.hero-art canvas{width:85%;max-height:100%;object-fit:contain;image-rendering:pixelated;position:relative;filter:drop-shadow(0 12px 3px #06130e55)}.menu-actions{display:grid;gap:11px}.button{display:flex;align-items:center;justify-content:center;min-height:clamp(45px,12cqw,65px);padding:12px 18px;border-radius:12px;font-weight:700;font-size:clamp(13px,3.4cqw,18px);letter-spacing:-.4px;background:#22382e;border:1px solid #41634c88;box-shadow:0 3px 0 #0c1c15;text-align:center;gap:8px;transition:filter .15s,transform .1s}.button:hover:not(:disabled){filter:brightness(1.12)}.button:active:not(:disabled){transform:translateY(2px);box-shadow:none}.button.primary{background:var(--mint);color:#163b2b;border-color:#c0f2d3;box-shadow:0 4px 0 #579371;font-size:clamp(15px,4cqw,21px)}.button.secondary{background:#294236}.button.subtle{background:transparent;box-shadow:none;border-color:transparent;color:var(--muted);font-weight:500}.button.danger{color:#e5aca2;background:#3e2928;border-color:#5a3733}.button:disabled{opacity:.42;box-shadow:none}.menu-bottom{margin-top:22px;color:#819585;font-size:10px;line-height:1.9}.menu-bottom a{color:#afc1b0;text-decoration:underline;text-underline-offset:3px}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:9px}.screen-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:19px}.screen-heading h2,.dialog h2{font-size:clamp(23px,6.5cqw,34px);letter-spacing:-1.2px;margin:6px 0 0}.screen-heading p{font-size:12px;color:var(--muted);line-height:1.6;margin:9px 0 0}.icon-button{background:#14271fae;border:1px solid var(--line);border-radius:10px;width:44px;height:44px;display:grid;place-items:center;font-size:22px;flex-shrink:0}.wallet{display:flex;align-items:center;gap:9px;padding:15px 18px;background:linear-gradient(110deg,#3d41302e,#20342a);border:1px solid #8a825c47;border-radius:12px;margin-bottom:16px}.coin-icon{display:grid;place-items:center;width:30px;height:32px;clip-path:polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%);background:var(--gold);color:#17432d;font-size:18px;font-weight:900}.wallet>span{font-size:12px;color:#c2c7ad}.wallet strong{margin-left:auto;color:var(--gold);font-size:23px;font-variant-numeric:tabular-nums}.stat-list{display:grid;gap:10px;flex:1;align-content:start}.stat-card{border:1px solid var(--line);border-radius:13px;background:#233a2d66;padding:13px}.stat-main{display:flex;align-items:center;gap:11px}.stat-icon{display:grid;place-items:center;flex-shrink:0;width:36px;height:38px;color:var(--mint);font-size:26px;background:#42694b25;border-radius:8px}.stat-main h3{font-size:clamp(13px,3.5cqw,18px);margin:0 0 3px}.stat-main small{font-size:10px;color:#9fb5a4}.stat-level{margin-left:auto;color:#91ad97;font-size:11px;white-space:nowrap}.stat-level b{color:#eaf3e5;font-size:16px}.stat-bottom{display:flex;align-items:center;gap:9px;margin-top:10px}.level-pips{display:flex;gap:4px;flex:1}.level-pips i{height:5px;background:#071b1266;flex:1;border-radius:2px}.level-pips i.on{background:var(--mint)}.stat-value{color:#adc4ab;font-size:11px;min-width:70px;text-align:right}.stat-buy{min-height:34px;min-width:85px;border-radius:7px;background:#567b483b;border:1px solid #99be6b6b;color:#e4d798;font-size:12px;font-weight:bold}.stat-buy:disabled{opacity:.4}.shop-footer{padding-top:17px;display:grid;gap:10px}.fine-print{font-size:10px;color:#90a28f;line-height:1.6;text-align:center;margin:0}.dialog{background:linear-gradient(150deg,#253c2e,#172b22);border:1px solid #718b6155;border-radius:20px;padding:25px 21px;box-shadow:0 20px 70px #0008}.dialog .eyebrow{display:block;margin-bottom:5px}.dialog h2{margin-bottom:12px}.dialog p{font-size:12px;line-height:1.7;color:#b6c6b4}.dialog-actions{display:grid;gap:10px;margin-top:20px}.dialog-actions .button{min-height:48px;font-size:14px}.settings-item{padding:17px 0;border-bottom:1px solid var(--line)}.settings-item h3{font-size:14px;margin:0 0 8px}.settings-item p{font-size:11px;color:var(--muted);line-height:1.7;margin:8px 0 0}.segmented{display:flex;background:#0c201887;padding:4px;border:1px solid var(--line);border-radius:9px;gap:4px}.segmented button{flex:1;min-height:41px;border-radius:6px;background:transparent;color:#a3b6a5;font-size:12px}.segmented button.active{background:#466648;color:#ebf6e2;box-shadow:0 2px 4px #0003}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:15px}.switch{width:48px;height:27px;border:1px solid #618454;background:#2a3b29;border-radius:20px;padding:3px}.switch i{display:block;width:19px;height:19px;border-radius:50%;background:#b8c6ad;transition:transform .2s}.switch[aria-checked=true]{background:#7aba81}.switch[aria-checked=true] i{background:white;transform:translateX(19px)}.save-notice{border:1px solid #bd925666;background:#6d4b2422;color:#e3c69b;font-size:11px;line-height:1.7;padding:10px 12px;border-radius:9px;margin-top:12px}.backup-actions{display:flex;gap:8px;margin-top:12px}.backup-actions button{padding:9px 11px;border:1px solid var(--line);border-radius:6px;background:#1a3024;font-size:11px}.choice-screen{justify-content:center;background:#0b1912e8}.choice-heading{text-align:center;margin-bottom:20px}.choice-heading h2{font-size:clamp(25px,7cqw,37px);margin:8px 0;letter-spacing:-1px}.choice-heading p{font-size:12px;color:#a7bda7;margin:0}.choice-grid{display:grid;gap:13px}.choice-card{text-align:left;background:linear-gradient(110deg,#2a4935,#233629);border:1px solid #66875688;border-radius:14px;display:flex;align-items:center;gap:14px;padding:18px 15px;min-height:110px;color:#eff7e9;box-shadow:0 5px 0 #061c0e88;position:relative}.choice-card:hover{border-color:#b0de88;filter:brightness(1.08)}.choice-card.evolution{background:linear-gradient(120deg,#494323,#283e29);border-color:#d9b767}.choice-icon{width:48px;height:48px;flex-shrink:0;display:grid;place-items:center;border:1px solid #86b27655;border-radius:11px;background:#41684044;font-size:26px;color:#b8eda2;font-weight:bold}.choice-copy{flex:1}.choice-copy>span{display:block;font-size:10px;color:#a0c296;letter-spacing:1px;margin-bottom:4px}.choice-copy h3{font-size:17px;letter-spacing:-.5px;margin:0 0 7px}.choice-copy p{font-size:11px;line-height:1.6;color:#b8cbb1;margin:0}.choice-arrow{color:#9bad90;font-size:24px}.choice-footer{font-size:10px;color:#8da68b;text-align:center;margin:20px 0 0}.result-badge{text-align:center;margin:12px 0 20px}.result-badge .result-icon{font-size:46px;color:var(--mint);text-shadow:0 0 25px #92d58755}.result-badge h2{margin:10px 0}.result-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}.result-stat{padding:13px 9px;background:#0f231960;border:1px solid var(--line);border-radius:10px;text-align:center}.result-stat span{font-size:10px;color:#a3b49a;display:block;margin-bottom:5px}.result-stat strong{font-size:20px;color:#edf1df}.result-credit{color:var(--gold)!important}.game-hud{position:absolute;inset:0;pointer-events:none;padding:5.2% 5.5%;z-index:4;font-variant-numeric:tabular-nums}.hud-top{display:flex;align-items:center;justify-content:space-between}.stage-heading{display:flex;align-items:baseline;gap:9px;filter:drop-shadow(0 2px 3px #000b)}.stage-heading>span{font-size:clamp(10px,2.8cqw,15px);font-weight:bold}.stage-heading>strong{font-size:clamp(23px,6cqw,32px);letter-spacing:1px}.pause-button{pointer-events:auto;background:#0c271abf;color:#e7efde;border-color:#7b9e6888;font-size:18px;width:37px;height:37px}.hud-status{display:flex;gap:13px;align-items:center;margin-top:12px}.hp-track{position:relative;height:18px;flex:1;background:#241717dd;border:1px solid #deeeb050;border-radius:5px;overflow:hidden;box-shadow:0 2px 5px #0005}.hp-track i{position:absolute;inset:0 auto 0 0;width:100%;background:linear-gradient(#8bb766,#4d8e52);transition:width .15s}.hp-track span{position:absolute;inset:0;font-size:9px;text-align:center;line-height:16px;color:#fff;text-shadow:0 1px 3px #17341a}.credit-small{display:flex;gap:7px;align-items:center;font-size:13px;text-shadow:0 1px 3px #000;min-width:48px}.credit-small b{color:var(--gold);border:1px solid var(--gold);padding:0 3px;background:#264b2c;font-size:11px}.credit-small strong{color:#f3db99}.xp-line{display:flex;align-items:center;gap:8px;margin-top:8px}.xp-line>span{font-size:10px;color:#d1edc1;text-shadow:0 1px 3px #000}.xp-track{height:5px;flex:1;border-radius:3px;background:#0b2013a8;overflow:hidden}.xp-track i{display:block;width:0%;height:100%;background:#80e7bb;transition:width .15s}.boss-hud{margin:18px auto 0;width:86%;text-align:center}.boss-hud>div:first-child{display:flex;justify-content:center;gap:8px;align-items:center;margin-bottom:5px;text-shadow:0 2px 4px #000}.boss-hud strong{font-size:12px}.boss-hud span{font-size:9px;color:#e5b299}.boss-hp-track{height:8px;border:1px solid #c7797755;background:#301111ca;border-radius:3px;overflow:hidden}.boss-hp-track i{display:block;width:100%;height:100%;background:linear-gradient(#dd7766,#ba3a38)}.hud-message{position:absolute;top:28%;left:5%;right:5%;font-size:clamp(16px,4.6cqw,25px);text-align:center;font-weight:bold;text-shadow:0 2px 0 #193121,0 0 15px #041307;color:#e7f4d9;white-space:pre-line;line-height:1.6}.hud-skills{position:absolute;left:5%;bottom:3.5%;display:flex;gap:6px;pointer-events:none}.hud-skill{position:relative;width:39px;height:39px;background:#10241bd9;border:1px solid #7fab7355;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#c6eaba;box-shadow:0 2px 4px #0005}.hud-skill small{position:absolute;right:3px;bottom:1px;font-size:8px;color:#fff}.hud-skill.evolved{border-color:#e0c477;color:#efd385;background:#484227db}.joystick-layer{position:absolute;inset:0;pointer-events:none;z-index:8}.joystick{position:absolute;width:104px;height:104px;left:8%;bottom:14%;border-radius:50%;border:1px solid #e6f0d640;background:#d4e5bc15;box-shadow:inset 0 0 25px #29492755;display:grid;place-items:center;pointer-events:none;transform:translate(0,0)}.joystick-knob{width:44px;height:44px;border-radius:50%;background:#deecd459;border:1px solid #edf9e261;box-shadow:0 3px 9px #203c3055}.toast{position:absolute;z-index:60;left:8%;right:8%;bottom:6%;border:1px solid #b4d49c77;background:#203b2af0;border-radius:10px;padding:13px 16px;box-shadow:0 8px 22px #0007;text-align:center;font-size:12px;line-height:1.6;pointer-events:none}.loading-cover{position:absolute;inset:0;z-index:80;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#172b20;font-size:13px;color:#b7ccb1}.loading-star{font-size:34px;color:var(--mint);animation:breathe 1.5s ease-in-out infinite}@keyframes breathe{50%{transform:translateY(-8px);opacity:.45}}@media(max-width:1060px){.desktop-note{display:none}}@media(max-width:540px){.game-shell{box-shadow:none}.screen{padding-top:max(7.4%,env(safe-area-inset-top))}.stat-card{padding:11px}.stat-list{gap:8px}.screen-heading{margin-bottom:14px}.wallet{padding:12px 15px;margin-bottom:12px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}@media(max-height:650px){.main-brand{padding-top:1%}.main-brand h1{margin-top:5px}.menu-bottom{margin-top:10px}.menu-actions{gap:7px}.hero-art{min-height:80px}.screen-heading p{display:none}.dialog{padding:18px}.dialog-actions{gap:7px}.dialog-actions .button{min-height:40px;padding:9px}.settings-item{padding:10px 0}}
.shop-screen{overflow:hidden}.shop-screen .screen-heading,.shop-screen .wallet,.shop-screen .shop-footer{flex-shrink:0}.shop-screen .stat-list{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#55764a transparent;margin-right:-7px;padding-right:7px;padding-bottom:4px}.shop-screen .stat-card{padding:10px}.shop-screen .stat-main{gap:9px}.shop-screen .stat-main small{font-size:9px}.shop-screen .stat-icon{width:30px;height:31px;font-size:23px}.shop-screen .stat-bottom{margin-top:7px}.shop-screen .stat-buy{min-height:29px;min-width:80px}.shop-screen .shop-footer{padding-top:13px}.shop-screen .fine-print{font-size:9px}.shop-screen .wallet{padding:11px 15px}.shop-screen .screen-heading p{font-size:11px}
.game-shell{touch-action:auto}.screen{touch-action:pan-y}.coin-icon{position:relative;isolation:isolate;color:var(--gold)}.coin-icon:before{content:"";position:absolute;inset:2px;background:#245a39;clip-path:inherit;z-index:-1}
/* Build 10: current levels and the next square share one readable scale. */
.choice-screen{justify-content:flex-start;padding:6% 5.5% 5%;overflow-x:hidden;overflow-y:auto}
.choice-screen>*{flex-shrink:0}
.choice-heading{margin-bottom:14px}
.choice-heading h2{font-size:clamp(22px,6.4cqw,34px);margin:7px 0 8px}
.choice-heading p{font-size:11px;line-height:1.5}
.choice-heading .eyebrow{font-size:9px}
.owned-skills{border:1px solid #6f93623f;background:#21392b6b;border-radius:11px;padding:10px;margin:0}
.owned-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.owned-heading h3{font-size:11px;color:#cfe1c5;margin:0;font-weight:700}
.owned-heading>span{font-size:10px;color:#a0b494;font-variant-numeric:tabular-nums}
.owned-slots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
.owned-slot{min-width:0;border:1px solid #55764b4d;background:#12271c8a;border-radius:7px;padding:7px 3px 6px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.owned-slot.evolved{border-color:#bfa35a7d;background:#453c223b}
.owned-slot.vacant{background:#13221961;border-style:dashed;border-color:#6b80603d;color:#7f9177}
.owned-icon{height:21px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#b9dda5;font-weight:700}
.owned-slot.vacant .owned-icon{color:#6c8063;font-size:20px}
.owned-name{font-size:clamp(9px,2.7cqw,12px);font-weight:700;line-height:1.35;white-space:nowrap;letter-spacing:-.6px;max-width:100%}
.owned-slot small{font-size:9px;color:#a6b797;font-variant-numeric:tabular-nums}
.owned-slot.vacant small{color:#687b63}
.skill-squares{display:inline-flex;gap:4px;align-items:center;flex-shrink:0}
.skill-squares i{display:block;width:13px;height:13px;border:1px solid #607d575c;background:#0c1f1494;border-radius:2px;box-sizing:border-box}
.skill-squares i.filled,.choice-legend i.filled{background:#98d7ab;border-color:#b6e8c4;box-shadow:inset 0 -2px #56896780}
.skill-squares i.preview,.choice-legend i.preview{background:#715c261a;border:2px solid #e9c473;box-shadow:0 0 4px #ddbf6c3d}
.owned-slot .skill-squares{gap:3px;margin-top:1px}
.owned-slot .skill-squares i{width:6px;height:7px;border-radius:1px}
.owned-slot.vacant .skill-squares{opacity:.48}
.choice-legend{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:11px;margin:10px 0;font-size:9px;color:#adc29f}
.choice-legend>span{display:inline-flex;gap:5px;align-items:center}
.choice-legend i{display:inline-block;width:9px;height:9px;border-radius:1px;box-sizing:border-box}
.choice-screen .choice-grid{gap:9px}
.choice-screen .choice-card{padding:13px 12px;gap:11px;min-height:123px;border-radius:11px;box-shadow:0 3px 0 #061c0e88}
.choice-screen .choice-icon{width:37px;height:40px;font-size:23px;border-radius:8px}
.choice-screen .choice-copy{min-width:0}
.choice-screen .choice-copy>span:first-child{font-size:9px;letter-spacing:.7px;margin-bottom:4px}
.choice-screen .choice-copy h3{font-size:16px;margin-bottom:5px}
.choice-screen .choice-copy p{font-size:11px;line-height:1.55;word-break:keep-all;overflow-wrap:anywhere}
.choice-copy>.choice-level-row{display:flex;align-items:center;flex-wrap:wrap;gap:7px 10px;margin-top:9px;margin-bottom:0;letter-spacing:0}
.choice-level-label{font-size:10px;white-space:nowrap;color:#b8cbae;font-variant-numeric:tabular-nums}
.choice-level-label b{font-weight:400;color:#94a985;margin:0 3px}
.choice-level-label strong{color:#f1d28d;font-size:11px}
.choice-screen .choice-arrow{font-size:20px;align-self:center}
.choice-copy>.choice-bonus{font-size:10px;color:#ddc786;letter-spacing:0;margin:9px 0 0;line-height:1.5}
.choice-screen .choice-footer{font-size:10px;margin:14px 0 0;padding-bottom:2px}
.settings-screen{justify-content:flex-start!important}
.settings-screen>.dialog{margin-block:auto;flex-shrink:0}
.settings-screen .switch{flex-shrink:0}
.damage-setting p{max-width:215px;word-break:keep-all}
@media(max-width:380px){.choice-screen{padding-inline:5%}.owned-skills{padding:9px 7px}.owned-slots{gap:4px}.owned-slot{padding-inline:2px}.choice-screen .choice-card{padding:12px 10px;gap:9px}.choice-screen .choice-icon{width:32px;height:37px;font-size:21px}.skill-squares{gap:3px}.skill-squares i{width:12px;height:12px}.choice-copy>.choice-level-row{gap:7px}.choice-level-label{font-size:9px}.choice-level-label strong{font-size:10px}.choice-screen .choice-arrow{font-size:17px}}
.choice-screen{background:#0b1912f7}
/* 선택 직전의 실제 능력치와 선택 후 값을 한눈에 비교합니다. */
.choice-copy>.choice-comparison{display:grid;gap:4px;margin:11px 0 0;padding-top:9px;border-top:1px solid #719d6840;letter-spacing:0;font-variant-numeric:tabular-nums}
.comparison-heading,.comparison-row{display:grid;grid-template-columns:minmax(72px,1fr) minmax(42px,.67fr) 10px minmax(42px,.67fr);align-items:baseline;gap:3px;font-size:10px;line-height:1.5}
.comparison-heading{color:#879d84;font-size:9px;margin-bottom:1px}
.comparison-heading>span:not(:first-child),.comparison-before,.comparison-after{text-align:right}
.comparison-label{min-width:0;overflow-wrap:anywhere;color:#c0d3b7}
.comparison-before{color:#9cad93;overflow-wrap:anywhere}
.comparison-after{color:#c0d3b7;font-weight:500;overflow-wrap:anywhere}
.comparison-row.changed .comparison-after{color:#f1d28d;font-weight:700}
.comparison-arrow{color:#6f856a;text-align:center}
.choice-screen .choice-card:has(.choice-comparison){align-items:flex-start}
.choice-screen .choice-card:has(.choice-comparison)>.choice-icon{margin-top:2px}
@media(max-width:380px){.choice-screen .choice-card:has(.choice-comparison){gap:7px;padding-inline:9px}.choice-screen .choice-card:has(.choice-comparison)>.choice-arrow{display:none}.comparison-heading,.comparison-row{font-size:9px;grid-template-columns:minmax(62px,1fr) minmax(36px,.65fr) 9px minmax(36px,.65fr);gap:2px}.comparison-heading{font-size:8px}}
/* Lost HP holds briefly before receding; game time drives it so pause is exact. */
.hp-track{--hurt-alpha:0;--hurt-flash:0;box-shadow:0 2px 5px #0005,0 0 0 1px rgba(255,91,87,var(--hurt-alpha)),0 0 14px rgba(255,70,65,calc(var(--hurt-alpha)*.45))}
.hp-track #hp-loss-fill{background:linear-gradient(#ffba8d,#e65750);transition:none}
.hp-track #hp-fill{transition:none}
.hp-track::after{content:"";position:absolute;inset:0;background:rgba(255,224,204,var(--hurt-flash));pointer-events:none}
.hp-track #hud-hp{z-index:1}
.pixel-skill-icon{display:block;width:32px;height:32px;flex-shrink:0;image-rendering:pixelated;overflow:visible}
.pixel-skill-icon.utility-icon{image-rendering:auto}
.asset-skill-icon{object-fit:contain;overflow:hidden;border-radius:4px;background:#1b1b1e}
.hud-skill .pixel-skill-icon{width:27px;height:27px}
.owned-icon{height:30px}
.owned-icon .pixel-skill-icon{width:30px;height:30px}
.choice-icon .pixel-skill-icon{width:34px;height:34px}
.volume-controls{margin:18px 0;padding:12px 13px;border:1px solid #76957550;border-radius:9px;text-align:left;min-width:0}
.volume-controls legend{padding:0 6px;color:#d4e9cc;font-size:13px;font-weight:700}
.volume-row{display:grid;grid-template-columns:87px minmax(45px,1fr) 36px;gap:9px;align-items:center;margin:9px 0;font-size:11px;color:#c3d9bc}
.volume-row input{width:100%;min-width:0;accent-color:#a0d9ad;cursor:pointer;height:22px;margin:0}
.volume-row output{text-align:right;color:#e2d29a;font-variant-numeric:tabular-nums;font-size:11px}
.volume-controls p{font-size:10px!important;line-height:1.5!important;color:#98ae92!important;margin:8px 0 0!important}
.volume-details{border-left:2px solid #6b987849;margin:5px 0 12px;padding:4px 0 4px 10px}
.volume-details summary{cursor:pointer;color:#a9ceb2;font-size:11px;padding:5px 0;min-height:24px}
.volume-details[open] summary{margin-bottom:7px}
.pause-screen{justify-content:flex-start!important}
.pause-screen>.dialog{margin-block:auto;flex-shrink:0}
.pause-screen .dialog-actions{gap:8px}
.pause-screen .button{min-height:40px;padding-block:10px}
.continuation-summary{font-size:10px;color:#b0c3a7;line-height:1.5;text-align:center;margin:0 0 4px;max-width:100%;word-break:keep-all}
.main-screen .menu-actions{gap:9px}
.main-screen .button:disabled{opacity:.45;cursor:default}
@media(max-width:380px){.volume-row{grid-template-columns:80px minmax(40px,1fr) 32px;gap:6px;font-size:10px}.pause-screen .dialog{padding-block:10px}.pause-screen .volume-controls{margin-block:12px}.choice-icon .pixel-skill-icon{width:30px;height:30px}}
/* Compact spacing keeps three normal choices visible on smaller portrait phones. */
@media(max-width:380px){
 .choice-screen{padding-top:4%;padding-bottom:4%}
 .choice-heading{margin-bottom:10px}
 .choice-heading h2{margin:5px 0 6px}
 .owned-skills{padding:7px}
 .owned-heading{margin-bottom:5px}
 .owned-slot{padding-top:5px;padding-bottom:5px;gap:3px}
 .owned-icon{height:19px;font-size:19px}
 .choice-legend{margin:7px 0;gap:10px}
 .choice-screen .choice-grid{gap:8px}
 .choice-screen .choice-card{min-height:105px;padding-top:10px;padding-bottom:10px}
 .choice-copy>.choice-level-row{margin-top:7px}
 .choice-screen .choice-footer{margin-top:10px}
}

/* v18: readable boss HP without expanding the combat HUD vertically. */
.game-shell .game-hud,.game-shell .joystick-layer,.game-shell .toast,.game-shell .dev-launch{opacity:var(--cinematic-hud-opacity,1)}
.boss-hud{width:92%;margin:12px auto 0;padding:8px 10px 10px;background:#160e18d9;border:1px solid #de938b8c;border-radius:7px;box-shadow:0 3px 12px #0007}
.boss-hud>div:first-child{justify-content:space-between;gap:8px;margin-bottom:7px}
.boss-hud strong{font-size:clamp(12px,3.4cqw,17px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;color:#fff0df}
.boss-hud span{font-size:clamp(10px,2.6cqw,13px);white-space:nowrap;color:#ffbd9c;font-weight:700}
.boss-hp-track{position:relative;height:clamp(18px,4.4cqw,24px);border:2px solid #efb8a1;background:#301923;border-radius:3px;box-shadow:0 1px 0 #08070b,inset 0 0 0 1px #08070b}
.boss-hp-track i{background:linear-gradient(#ffb39c 0 12%,#f45851 13% 60%,#ba303f 61%);box-shadow:inset 0 -2px #5b1823;transition:width .08s linear}
.boss-hp-track b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff8f0;font-size:clamp(10px,2.6cqw,13px);font-variant-numeric:tabular-nums;line-height:1;text-shadow:1px 1px 0 #24101e,-1px -1px 0 #24101e,0 0 4px #000}
.boss-hud[data-phase="3"]{border-color:#d6a6ff}.boss-hud[data-phase="3"] .boss-hp-track{border-color:#d6a6ff}.boss-hud[data-phase="3"] .boss-hp-track i{background:linear-gradient(#f1cbff 0 12%,#bb64db 13% 60%,#793da7 61%)}

/* Mode selection and cooldown hands. All progression is driven by combat time. */
.mode-screen{justify-content:center;gap:28px}.mode-heading{text-align:center}.mode-heading h2{font-size:30px;margin:12px 0}.mode-heading p,.mode-unlock-hint{color:var(--muted);font-size:12px;line-height:1.6}.mode-actions{display:grid;gap:12px}.mode-record{display:grid;gap:8px;text-align:center;padding:24px;border:1px solid #a0e8bf44;border-radius:14px;background:#243d304d}.mode-record>span{font-size:12px;color:var(--muted)}.mode-record strong{font-size:36px;color:var(--gold)}.mode-record small{font-size:14px}.mode-lock{font-size:11px;color:var(--muted)}.endless-mode{border-color:#c4a4e877;background:#41325566}.mode-unlock-hint{margin:0 0 5px}.main-brand p{letter-spacing:1px}.level-pips{flex-wrap:wrap;max-width:94px}.hud-score{color:#f5d696;font-size:clamp(9px,2.5cqw,13px);text-shadow:1px 1px #17251d;margin:-2px 0 5px;letter-spacing:.2px}.hud-skill{isolation:isolate;overflow:hidden}.hud-skill>.skill-cooldown{position:absolute;inset:0;z-index:1;border-radius:inherit;background:conic-gradient(from 0deg,transparent 0deg var(--cooldown-angle),rgba(90,100,104,.76) var(--cooldown-angle) 360deg);pointer-events:none}.hud-skill.cooling>.pixel-skill-icon{filter:grayscale(.65)}.hud-skill>small{z-index:2}.mode-screen .fine-print{text-align:center}.mode-screen .button{width:100%}

/* 점수와 시간을 같은 크기로 표시하고 최고기록은 보조 정보로 둡니다. */
.score-value{display:block;min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;font-variant-numeric:tabular-nums}
.score-text{display:inline-block;white-space:nowrap;transform-origin:left center}
.score-value .score-text.score-squeezed{display:block;width:max-content;transform-origin:left center}
.mode-record strong{min-width:0}
.mode-record .score-text,.result-badge .score-text,.continuation-summary .score-text{transform-origin:center center}
.stage-heading>strong,.hud-score>strong{font-size:clamp(23px,6cqw,32px);letter-spacing:1px;line-height:1.15}
.hud-score{display:grid;grid-template-columns:auto minmax(0,2fr) minmax(0,1fr);align-items:baseline;gap:5px 9px;margin:5px 0 7px;padding:5px 8px;border-left:3px solid #e6c670;background:linear-gradient(90deg,#193127b8,#19312700);border-radius:3px;text-shadow:0 2px 3px #07140de6}
.hud-score>span{font-size:clamp(10px,2.8cqw,15px);font-weight:700;color:#ecdca5}
.hud-score>strong{color:#ffe3a0;min-width:0;overflow-wrap:anywhere}
.hud-score>small{font-size:clamp(9px,2.5cqw,13px);color:#d6d7bd;text-align:right}
.hud-score>small .score-text{transform-origin:right center}
.choice-reroll{display:grid;gap:5px;margin:0 0 12px}
.choice-reroll>button{display:flex;align-items:center;gap:7px;width:100%;padding:10px 12px;border:1px solid #97c5a763;border-radius:9px;color:#d6f0d4;background:#274738;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.choice-reroll>button>span{font-size:21px;line-height:1}.choice-reroll>button>strong{margin-left:auto;color:#f1d894;font-variant-numeric:tabular-nums;font-size:12px;white-space:nowrap}
.choice-reroll>button:disabled{opacity:.46;cursor:default}.choice-reroll>button:not(:disabled):hover{background:#345c46}.choice-reroll>button:focus-visible{outline:2px solid #e4d19a;outline-offset:3px}
.choice-reroll>small{font-size:9px;color:#a0b89d;text-align:right}

/* PC uses one world pixel per CSS pixel; resizing changes the field of view. */
.screen.main-screen {
 display:grid;
 grid-template-rows:max-content minmax(clamp(80px,13vh,120px),1fr) max-content;
 row-gap:clamp(6px,1.2vh,14px);
 justify-content:stretch;
}
.main-screen .hero-art {min-height:0;}
.main-screen .hero-art canvas {
 position:absolute;
 inset:0;
 margin:auto;
 width:85%;
 height:100%;
 max-width:360px;
 max-height:260px;
 object-fit:contain;
}
html.desktop-game body{min-height:100dvh;background:#0d1b16}
.desktop-game .desktop-note{display:none}
.desktop-game .game-shell{width:100vw;height:100dvh;max-width:none;max-height:none;box-shadow:none}
.desktop-game .screen{padding:24px max(24px,calc((100% - 520px)/2));}
.desktop-game .screen.dialog-screen{padding:24px max(24px,calc((100% - 620px)/2));}
.desktop-game .main-brand{padding-top:0}.desktop-game .main-brand h1{font-size:42px}.desktop-game .main-brand p{font-size:13px}
.desktop-game .hero-art canvas{max-width:270px;max-height:200px}
.desktop-game .button{min-height:48px;font-size:16px}.desktop-game .screen-heading{margin-bottom:14px}
.desktop-game .game-hud{padding:18px 24px}.desktop-game .hud-status,.desktop-game .xp-line{max-width:620px}
.desktop-game .boss-hud{width:min(620px,65%)}.desktop-game .toast{left:calc(50% - min(42%,310px));right:calc(50% - min(42%,310px));bottom:5%}
.desktop-game .hud-message{left:20%;right:20%}.desktop-game .hud-score{max-width:620px}
.keyboard-bindings{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.keyboard-bindings button{display:grid;gap:8px;justify-items:center;background:#294033;border:1px solid #5a786644;border-radius:8px;padding:10px 4px;font-size:12px}.keyboard-bindings kbd{padding:5px 7px}.keyboard-bindings .binding{border-color:#e7cb81;box-shadow:0 0 0 2px #e7cb8122}.settings-reset{background:#294033;color:#c4d6c7;padding:8px 12px;border-radius:7px;font-size:11px;margin-top:10px}.aspect-options button{min-width:0;flex:1}.pad-control{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;margin:13px 0}.pad-control input[type=range]{width:50%}.pad-control select,.pad-mapping input{background:#172c24;border:1px solid #63826955;border-radius:5px;color:#e1eee3;padding:6px}.pad-mapping{font-size:12px;margin-top:14px}.pad-mapping summary{cursor:pointer;color:#b4d2bc}.pad-mapping>div{display:grid;grid-template-columns:1fr 1fr;gap:8px}.pad-mapping label{display:flex;align-items:center;justify-content:space-between;gap:7px}.pad-mapping input{width:50px}.settings-screen .dialog{max-height:none}.desktop-game .settings-screen .dialog{max-height:calc(100dvh - 48px);overflow:auto}

/* v21: choices use the available client width, while narrow windows stay scrollable. */
.choice-reroll{margin:14px 0 0}
.desktop-game .choice-screen{padding:24px max(20px,calc((100% - 1080px)/2));}
.desktop-game .choice-screen .owned-skills{width:min(100%,620px);align-self:center}
.desktop-game .choice-heading h2{font-size:30px}
.desktop-game .choice-screen .choice-grid{grid-template-columns:1fr;min-width:0}
.desktop-game .choice-reroll{width:min(100%,540px);align-self:center}
@container(min-width:800px){
 .desktop-game .choice-screen .choice-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
 .desktop-game .choice-screen .choice-card{display:flex;flex-direction:column;align-items:stretch;padding:20px 17px;gap:14px;min-height:260px}
 .desktop-game .choice-screen .choice-icon{width:48px;height:48px;align-self:center}
 .desktop-game .choice-screen .choice-icon .pixel-skill-icon{width:42px;height:42px}
 .desktop-game .choice-screen .choice-copy h3{font-size:20px;line-height:1.35}
 .desktop-game .choice-screen .choice-copy p{font-size:12px;line-height:1.65}
 .desktop-game .choice-screen .choice-arrow{display:none}
 .desktop-game .choice-screen .choice-copy{display:flex;flex-direction:column}
 .desktop-game .choice-screen .choice-comparison{margin-top:14px}
 .desktop-game .choice-screen .choice-level-row{margin-top:14px}
}
.aspect-group{margin:10px 0;display:grid;gap:5px}.aspect-group>span{font-size:11px;color:#9db29f}
.aspect-options{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px}
.aspect-group:last-of-type .aspect-options{grid-template-columns:repeat(2,minmax(0,1fr))}
.aspect-options button{font-size:11px;padding:4px 1px}
.pad-presets{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:13px 0}
.pad-presets button{display:grid;gap:5px;text-align:left;padding:11px 10px;border:1px solid #66826a70;border-radius:8px;background:#1b3025;min-width:0}
.pad-presets button.active{background:#38583c;border-color:#a0ce99}
.pad-presets strong{font-size:12px;line-height:1.4}.pad-presets small{font-size:10px;line-height:1.5;color:#aec0a9;word-break:keep-all}
.pad-bindings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.pad-bindings button{display:flex;flex-direction:column;align-items:center;gap:5px;padding:11px 5px;border:1px solid #66826a70;border-radius:7px;background:#263e2d;min-width:0}
.pad-bindings span{font-size:11px;color:#b7cbb4}.pad-bindings strong{font-size:12px;color:#e6d8a3}
.pad-bindings button.binding{border-color:#f2ce7f;background:#4d4930}
.pad-capture-help{min-height:34px}.keyboard-options{font-size:12px;margin:12px 0 0}
.keyboard-options summary{cursor:pointer;color:#b4d2bc;padding:5px 0}.keyboard-options>div{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}
.keyboard-options label{display:flex;justify-content:space-between;align-items:center;gap:7px}
.keyboard-options select{background:#172c24;border:1px solid #63826955;border-radius:5px;color:#e1eee3;padding:6px;max-width:100%}
.settings-screen .dialog{min-width:0;max-width:100%}.settings-screen .settings-item{min-width:0}
.display-settings .resolution-label{display:grid;gap:8px;margin-top:16px;font-size:12px;color:#b9cdbb}
.display-settings select{display:block;min-width:0;width:100%;max-width:100%;padding:10px 8px;background:#14291f;border:1px solid #6d95664f;border-radius:7px;color:#e5f1df;font-size:14px;font-variant-numeric:tabular-nums}
.display-settings .display-current{padding:9px 10px;border-radius:6px;background:#0c20186b;color:#d8e9ca;font-variant-numeric:tabular-nums}
.display-settings .web-display-note{color:#99ac9a}
.gamepad-navigation .gamepad-focus{outline:3px solid #ffdf8a!important;outline-offset:3px;box-shadow:0 0 0 6px #dcbd5725!important;scroll-margin:24px}
.gamepad-navigation .choice-card.gamepad-focus{border-color:#ffdf8a;background:linear-gradient(125deg,#426447,#243c2b)}
@container(max-width:420px){
 .desktop-game .screen{padding:16px 12px}.desktop-game .screen.dialog-screen{padding:12px}
 .desktop-game .settings-screen .dialog{max-height:calc(100dvh - 24px)}
 .settings-screen .dialog{padding:18px 12px}.settings-screen .setting-row{gap:7px}
 .settings-screen .volume-controls{padding:10px 7px}.settings-screen .volume-row{grid-template-columns:68px minmax(25px,1fr) 29px;gap:4px;font-size:10px}
 .settings-screen .pad-control{flex-wrap:wrap;gap:7px}.settings-screen .pad-control input[type=range]{width:45%;min-width:35px;flex:1}
 .settings-screen .aspect-options{grid-template-columns:repeat(3,minmax(0,1fr))}
 .settings-screen .pad-presets{grid-template-columns:1fr}.settings-screen .pad-bindings{grid-template-columns:repeat(2,minmax(0,1fr))}
 .settings-screen .pad-mapping>div,.settings-screen .keyboard-options>div{grid-template-columns:1fr}
 .settings-screen .keyboard-bindings{grid-template-columns:repeat(2,minmax(0,1fr))}
 .desktop-game .choice-screen{padding:18px 12px}.desktop-game .choice-heading h2{font-size:23px}
 .choice-screen .choice-card{flex-wrap:wrap;gap:9px}.choice-screen .choice-copy{flex-basis:100%}.choice-screen .choice-arrow{display:none}
 .choice-screen .owned-slots{gap:3px}.choice-screen .owned-skills{padding:7px 5px}.choice-screen .owned-name{font-size:8px;letter-spacing:-.7px;white-space:normal}
 .choice-screen .owned-slot .skill-squares{gap:1px}.choice-screen .owned-slot .skill-squares i{width:4px;height:5px}
 .choice-screen .comparison-heading,.choice-screen .comparison-row{grid-template-columns:minmax(45px,1fr) minmax(27px,.7fr) 8px minmax(27px,.7fr);font-size:9px;gap:2px}
 .choice-reroll>button{flex-wrap:wrap;font-size:11px;padding:9px 8px}.choice-reroll>button>strong{font-size:11px}
}

/* Center short dialogs while keeping a single usable scroll area in long ones. */
.screen.dialog-screen:has(> .dialog) {
 justify-content:flex-start;
 overflow:hidden;
}
.screen.dialog-screen > .dialog {
 flex:0 1 auto;
 min-height:0;
 max-height:100%;
 margin-block:auto;
 overflow:auto;
 overscroll-behavior:contain;
 touch-action:pan-y;
}