:root{--paper:#f5f3ee;--surface:#fbfaf7;--ink:#132033;--muted:#66717b;--navy:#17232b;--gold:#a7834e;--rule:#dedbd4;--radius:8px;--space:16px;--touch:44px;color-scheme:light}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.6 Pretendard,"Noto Sans KR",system-ui,sans-serif}header{display:flex;justify-content:space-between;gap:var(--space);padding:var(--space) 24px;background:var(--navy);color:var(--paper)}header span:first-child{font-family:"Noto Serif KR",Batang,serif;letter-spacing:.12em}main{max-width:1280px;margin:auto;padding:24px}.heading{display:flex;align-items:center;justify-content:space-between;gap:var(--space);margin-bottom:var(--space)}h1{font:34px/1.2 "Noto Serif KR",Batang,serif;margin:4px 0 0}.eyebrow{font-size:13px;color:var(--muted);margin:0}.tag{border:1px solid var(--rule);border-radius:var(--radius);padding:8px 12px;white-space:nowrap;font-size:13px}#stage{position:relative;aspect-ratio:16/9;width:100%;background:black;overflow:hidden;border-radius:var(--radius)}canvas{display:block;width:100%;height:100%}#loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--paper)}.transport{background:var(--surface);padding:var(--space);margin-top:var(--space);border:1px solid var(--rule);border-radius:var(--radius)}.buttons{display:flex;align-items:center;flex-wrap:wrap;gap:8px}button,select{min-height:var(--touch);padding:8px var(--space);font:inherit;border:1px solid var(--rule);border-radius:var(--radius);color:var(--ink);background:var(--surface);cursor:pointer}button:first-child{background:var(--navy);color:var(--paper)}button:disabled{opacity:.5;cursor:wait}button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.buttons label{display:flex;align-items:center;gap:8px;margin-left:auto}.timeline{display:flex;align-items:center;gap:12px;margin-top:12px}.timeline label{font-size:13px;white-space:nowrap}.timeline input{flex:1;min-width:0;min-height:var(--touch);accent-color:var(--gold)}output{font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums}#status{color:var(--muted);font-size:13px;margin:8px 0 0}details{margin-top:var(--space);font-size:13px;color:var(--muted)}summary{min-height:var(--touch);cursor:pointer;color:var(--ink)}details p{max-width:80ch;margin:8px 0}@media(max-width:560px){main{padding:var(--space)}header{padding:var(--space)}.heading{align-items:flex-start;flex-direction:column}h1{font-size:30px}.buttons label{margin-left:0}.timeline{flex-wrap:wrap}.timeline input{flex-basis:65%}output{margin-left:auto}}
#intro{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:black}#intro[hidden]{display:none}.buttons .sound{margin-left:0;font-size:13px;min-height:var(--touch)}.sound input{width:18px;height:18px;accent-color:var(--gold)}
[hidden]{display:none!important}
#stage{--card-blue:#7594d1;--card-purple:#edb0ff;--card-gold:#ffe4a0;--game-ink:#fff4d5;container-type:inline-size}
#stage-background{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
#card-layer{position:absolute;inset:0;color:var(--game-ink)}
.stage-title{position:absolute;top:2%;left:3%;font:2cqw Batang,serif}
#cards{list-style:none;position:absolute;left:5.73%;top:25.14%;width:88.54%;height:39.17%;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);justify-items:center}
.draw-card{position:relative;width:80.59%;height:100%;transform-origin:center;will-change:transform;isolation:isolate}
.card-back,.card-face,.card-portrait,.card-frame,.card-flash{position:absolute;inset:0;width:100%;height:100%}
.card-portrait{object-fit:fill;object-position:center;width:129.6%;left:-14.8%}
.card-face{overflow:hidden;background:#201e1b}
.card-name{position:absolute;bottom:5%;left:0;width:100%;text-align:center;color:var(--game-ink);font:1.8cqw/1.2 Batang,serif;text-shadow:0 1px 3px #000}
.draw-card[data-frame="purpleFrame"]{--card-glow:var(--card-purple)}
.draw-card[data-frame="goldFrame"]{--card-glow:var(--card-gold)}
.draw-card[data-open="true"][data-frame="goldFrame"]{box-shadow:0 0 .6cqw .08cqw var(--card-glow)}
.card-flash{inset:-25%;width:150%;height:150%;background:radial-gradient(ellipse,#fff9da88 0,#ffdb5877 22%,#eeb93333 42%,transparent 70%);box-shadow:none;mix-blend-mode:screen;pointer-events:none}
#render{position:absolute;inset:0}
@font-face{font-family:RecruitHeroName;src:url('../assets/recruit-hero-name.450d4a72877dfa91.ttf') format('truetype');font-display:swap}
#legend-name{position:absolute;left:70.2%;top:15.4%;display:flex;flex-direction:column;align-items:center;font:6.146cqw/.847 RecruitHeroName,Batang,serif;color:#fff2a4;text-shadow:0 0 .2cqw #dfac3255;pointer-events:none}
.legend-letters{display:flex;flex-direction:column;align-items:center;writing-mode:horizontal-tb;background:linear-gradient(90deg,#fff,#ecdfb1,#ccbf7c);background-clip:text;-webkit-text-fill-color:transparent}
.legend-prefix{font:.45em/1.1 RecruitHeroName,Batang,serif;writing-mode:horizontal-tb;margin-bottom:.12em;letter-spacing:.04em}
#stage[data-phase="reveal"] #idle-hint,.recruit-screen:has(#stage[data-phase="reveal"]) .draw-actions,.recruit-screen:has(#stage[data-phase="reveal"]) #sim-status{visibility:hidden}
.recruit-screen:has(#stage[data-phase="reveal"]) .draw-controls{background:transparent;pointer-events:none}
.recruit-screen:has(#stage[data-phase="reveal"]) .options label{visibility:hidden}
#result-hint{position:absolute;left:0;right:0;bottom:12%;text-align:center;color:var(--game-ink);font:2cqw Batang,serif}
#skip{position:absolute;right:2%;bottom:3%;background:#17232bcc;color:var(--paper);border-color:#d5c79c;z-index:3;font-size:13px}
.buttons label{margin-left:0;min-height:var(--touch);font-size:13px}.buttons input{width:18px;height:18px;accent-color:var(--gold)}
@media(max-width:560px){#skip{min-height:44px;padding:4px 8px;font-size:12px}#result-hint{bottom:7%}}
.card-conversion{position:absolute;inset:0;color:#fff8dd;pointer-events:none}
.conversion-veil{position:absolute;inset:0;width:100%;height:100%;filter:brightness(0);opacity:.4627451}
.conversion-band{position:absolute;left:-1.5%;top:45.3%;width:103%;height:9.46%}
.card-conversion span{position:absolute;left:0;top:45%;width:100%;text-align:center;font:1.1cqw/1.8 Batang,serif;text-shadow:0 1px 2px #000}
.card-pieces{position:absolute;top:104%;left:0;width:100%;display:flex;align-items:center;justify-content:center;gap:.3cqw;color:#fff1bc;font:1cqw/1.5 Batang,serif}
.card-pieces img{width:1.6cqw;height:1.6cqw;object-fit:contain}
#stage-wash{position:absolute;inset:0;background:#fff9df;pointer-events:none}
#reveal-all{position:absolute;inset:0;z-index:2;width:100%;height:100%;min-height:0;padding:0;border:0;border-radius:0;background:transparent;opacity:1;color:transparent;cursor:pointer}
#reveal-all:disabled{cursor:default;pointer-events:none}
#reveal-all:focus-visible{outline:3px solid var(--gold);outline-offset:-4px}
#cards[data-count="1"] .draw-card{grid-column:3}
.examples{margin-bottom:12px}
.draw-card[data-kind="skill"] .card-portrait{width:98.54%;height:99.29%;left:.73%;top:.355%}
.draw-card[data-kind="skill"] .card-name{color:#fadd75;font-weight:bold}
#legend-name{z-index:1}
.draw-card[data-flying="true"] .card-flash{inset:0;width:100%;height:100%;background:linear-gradient(100deg,#ffe595,#fffdf0 45%,#fff7ca 70%,#ffd257);box-shadow:0 0 2cqw .4cqw #eeb933;mix-blend-mode:normal}