@import "https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;900&family=Noto+Serif+KR:wght@500;700;900&display=swap";:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#090807;--ink:#fff7df;--muted:#b8a882;--line:#ffe09a2e;--gold:#f7c66a;--gold-hot:#ff9138;--smoke:#080705bd;--glass:#100d0994;--danger:#ff715f;--font-display:"Cinzel", "Noto Serif KR", serif;--font-body:"Noto Serif KR", serif}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{background:var(--bg);color:var(--ink);font-family:var(--font-body);overflow-x:hidden}button{font:inherit}.app-shell{background:radial-gradient(circle at 74% 18%,#f9b24a29,#0000 28rem),radial-gradient(circle at 12% 82%,#5923106b,#0000 32rem),#080706;min-height:100svh}.hero-screen,.casting-screen,.grimoire-screen{min-height:100svh;position:relative;overflow:hidden}.hero-screen{isolation:isolate;align-items:center;padding:2rem clamp(1.25rem,4vw,4rem);display:grid}.hero-screen:before{z-index:-3;content:"";background-color:#0000;background-image:linear-gradient(90deg,#050403eb 0%,#080705bd 42%,#0807052e 100%),radial-gradient(circle at 78% 48%,#ffa63e3d,#0000 19rem),url("data:image/svg+xml,%3Csvg width=\"1200\" height=\"900\" viewBox=\"0 0 1200 900\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cdefs%3E%3CradialGradient id=\"g\" cx=\"50%25\" cy=\"50%25\" r=\"50%25\"%3E%3Cstop offset=\"0%25\" stop-color=\"%23ffc76d\" stop-opacity=\".35\"/%3E%3Cstop offset=\"45%25\" stop-color=\"%23a54d23\" stop-opacity=\".12\"/%3E%3Cstop offset=\"100%25\" stop-color=\"%23080706\" stop-opacity=\"0\"/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width=\"1200\" height=\"900\" fill=\"%23080706\"/%3E%3Ccircle cx=\"845\" cy=\"448\" r=\"272\" fill=\"none\" stroke=\"%23ffd780\" stroke-opacity=\".42\" stroke-width=\"2\"/%3E%3Ccircle cx=\"845\" cy=\"448\" r=\"208\" fill=\"none\" stroke=\"%23ffd780\" stroke-opacity=\".22\" stroke-width=\"1\"/%3E%3Ccircle cx=\"845\" cy=\"448\" r=\"140\" fill=\"none\" stroke=\"%23fff1bd\" stroke-opacity=\".18\" stroke-width=\"1\"/%3E%3Cg stroke=\"%23ffd780\" stroke-opacity=\".22\" stroke-width=\"1\"%3E%3Cpath d=\"M845 176v544M573 448h544M653 256l384 384M1037 256 653 640\"/%3E%3C/g%3E%3Ccircle cx=\"845\" cy=\"448\" r=\"330\" fill=\"url(%23g)\"/%3E%3C/svg%3E");background-position:50%;background-repeat:repeat,repeat,repeat;background-size:cover;background-attachment:scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;position:absolute;inset:0}.hero-screen:after,.casting-screen:after{z-index:-1;pointer-events:none;content:"";background-image:linear-gradient(#ffe6ab0b 1px,#0000 1px),linear-gradient(90deg,#ffe6ab09 1px,#0000 1px);background-size:72px 72px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(circle at 52% 52%,#000,#0000 76%);mask-image:radial-gradient(circle at 52% 52%,#000,#0000 76%)}.topline{z-index:10;justify-content:space-between;align-items:center;padding:1.3rem clamp(1.25rem,4vw,4rem);display:flex;position:absolute;top:0;left:0;right:0}.brand-mark{font-family:var(--font-display);letter-spacing:.08em;text-transform:uppercase;font-size:clamp(1.4rem,3vw,2.5rem);font-weight:900}.hero-copy{max-width:720px;padding-top:4rem;animation:.76s both rise-in}.eyebrow,.spell-meta{color:var(--gold);font-family:var(--font-display);letter-spacing:.22em;text-transform:uppercase;margin:0 0 .85rem;font-size:.76rem}h1,h2,p{margin-top:0}h1,h2{font-family:var(--font-display);line-height:.98}h1{letter-spacing:-.07em;max-width:12ch;margin-bottom:1.25rem;font-size:clamp(3.4rem,9vw,8.8rem)}h2{letter-spacing:-.045em;margin-bottom:.8rem;font-size:clamp(2rem,5vw,4rem)}.hero-lede,.grimoire-intro p,.camera-fallback p,.unlock-panel p,.spell-entry p{color:var(--muted);line-height:1.75}.hero-lede{max-width:38rem;font-size:clamp(1.05rem,2vw,1.35rem)}.hero-actions,.casting-controls{flex-wrap:wrap;gap:.85rem;margin-top:2rem;display:flex}.primary-button,.secondary-button,.ghost-button{min-height:3rem;color:var(--ink);cursor:pointer;border:1px solid #0000;border-radius:999px;padding:.8rem 1.25rem;transition:transform .18s,border-color .18s,background .18s}.primary-button{color:#150d06;background:linear-gradient(135deg,#ffe49c,#f59a3c 48%,#8b3618);font-weight:900;box-shadow:0 0 42px #ff9d3757}.secondary-button,.ghost-button{border-color:var(--line);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#fff7df0f}.ghost-button{min-height:2.5rem;padding:.55rem .95rem}.compact{min-height:2.6rem;padding:.55rem 1rem}.primary-button:hover,.secondary-button:hover,.ghost-button:hover{border-color:#ffda8980;transform:translateY(-2px)}.privacy-note{color:#fff7df94;margin-top:1rem;font-size:.9rem}.hero-orbit{z-index:-2;aspect-ratio:1;border:1px solid #ffd88247;border-radius:50%;width:min(62vw,48rem);animation:22s linear infinite slow-spin;position:absolute;top:50%;right:clamp(-11rem,-10vw,-3rem)}.hero-orbit:before,.hero-orbit:after{border-radius:inherit;content:"";border:1px solid #ffd88238;position:absolute;inset:12%}.hero-orbit:after{inset:28%;box-shadow:0 0 80px #ffa23438,inset 0 0 80px #ffa23424}.hero-status{text-align:right;gap:.1rem;display:grid;position:absolute;bottom:2rem;right:clamp(1.25rem,4vw,4rem)}.hero-status span{color:var(--gold);font-family:var(--font-display);font-size:clamp(2.5rem,6vw,5.5rem);line-height:1}.hero-status small,.spell-entry small,.hud-readout small{color:#fff7df9e}.casting-screen{background:#050403}.camera-feed,.camera-fallback,.spell-canvas,.spell-burst{width:100%;height:100%;position:absolute;inset:0}.camera-feed{object-fit:cover;opacity:.86;transform:scaleX(-1)}.camera-fallback{z-index:1;text-align:center;background:radial-gradient(circle,#ffb34d29,#0000 24rem),#090807;place-items:center;padding:2rem;display:grid}.camera-fallback[aria-hidden=true]{opacity:0;pointer-events:none}.camera-fallback>div{max-width:34rem}.spell-canvas{z-index:2}.spell-burst{z-index:3;pointer-events:none;opacity:0;background:radial-gradient(circle,#ffdb86d1,#ff8b2d47 16%,#0000 38%);transform:scale(.65)}.casting-screen.success .spell-burst{animation:.96s ease-out both spell-burst}.casting-hud{z-index:5;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:1rem;padding:1.25rem;display:grid;position:relative}.hud-readout{border:1px solid var(--line);background:var(--smoke);text-align:center;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:999px;justify-self:center;max-width:min(42rem,70vw);padding:.7rem 1.2rem}.hud-readout span{font-family:var(--font-display);letter-spacing:.08em;display:block}.casting-controls{z-index:5;justify-content:center;position:absolute;bottom:1.4rem;left:50%;transform:translate(-50%)}.unlock-panel{z-index:6;background:linear-gradient(90deg,#0a0805bd,#0000);border-left:1px solid #ffd37a7a;width:min(26rem,100vw - 2rem);padding:1.2rem 0 1.2rem 1.2rem;animation:.52s both reveal-left;position:absolute;bottom:7rem;right:clamp(1rem,4vw,4rem)}.grimoire-screen{background:linear-gradient(#09080733,#090807 28rem),radial-gradient(circle at 20% 10%,#ffbe5d21,#0000 24rem),radial-gradient(circle at 84% 20%,#53201057,#0000 26rem),#090807;padding:7rem clamp(1.25rem,4vw,4rem) 4rem}.grimoire-nav{background:linear-gradient(#090807d1,#0000);position:fixed}.grimoire-intro{max-width:58rem;margin-bottom:3rem}.grimoire-intro h1{max-width:14ch;font-size:clamp(3rem,8vw,7rem)}.spell-list{border-block:1px solid var(--line);gap:1px;display:grid}.spell-entry{border-bottom:1px solid var(--line);grid-template-columns:minmax(5rem,9rem) minmax(0,1fr);align-items:center;gap:clamp(1rem,4vw,2.5rem);padding:clamp(1.2rem,4vw,2.4rem) 0;display:grid}.spell-entry:last-child{border-bottom:0}.spell-entry h2{margin-bottom:.45rem;font-size:clamp(2rem,4.5vw,4.8rem)}.spell-entry.locked{opacity:.58}.glyph-mark{aspect-ratio:1;border:1px solid #ffd88252;border-radius:50%;place-items:center;display:grid;box-shadow:inset 0 0 32px #ffbe5b1f}.glyph-mark span{aspect-ratio:1;width:54%;color:var(--gold);border:2px solid;border-radius:50%;display:block;box-shadow:0 0 32px #ffc25b61}.spell-entry.locked .glyph-mark span{color:#fff7df2e;box-shadow:none}.common .spell-meta,.common .glyph-mark span{color:#ffc66d}.rare .spell-meta,.rare .glyph-mark span{color:#aee7ff}.epic .spell-meta,.epic .glyph-mark span{color:#d1b0ff}.legendary .spell-meta,.legendary .glyph-mark span{color:#fff0a8}@keyframes rise-in{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes slow-spin{to{transform:rotate(360deg)}}@keyframes spell-burst{0%{opacity:0;transform:scale(.62)}25%{opacity:1}to{opacity:0;transform:scale(1.5)}}@keyframes reveal-left{0%{opacity:0;transform:translate(24px)}to{opacity:1;transform:translate(0)}}@media (width<=760px){.hero-screen{align-items:end;padding-bottom:8rem}.hero-orbit{width:92vw;top:12%;right:-34vw}.hero-status{text-align:left;left:1.25rem;right:auto}.casting-hud{grid-template-columns:1fr 1fr}.hud-readout{border-radius:1.4rem;grid-area:2/1/auto/-1;max-width:none}.casting-controls{width:calc(100% - 2rem)}.casting-controls .primary-button,.casting-controls .secondary-button{flex:1}.spell-entry{grid-template-columns:4.5rem 1fr}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}}.fallback-actions{flex-wrap:wrap;justify-content:center;gap:.85rem;margin-top:1.4rem;display:flex}.casting-guide{z-index:5;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:linear-gradient(135deg,#080705c7,#3a1f0d61);border:1px solid #ffe09a29;border-radius:1.4rem;width:min(25rem,100vw - 2rem);padding:1rem 1.15rem;position:absolute;bottom:clamp(1rem,4vw,3rem);left:clamp(1rem,4vw,4rem);box-shadow:0 24px 80px #00000047}.casting-guide strong,.casting-guide span,.casting-guide small{display:block}.casting-guide strong{color:var(--ink);font-family:var(--font-display);letter-spacing:-.02em;margin-bottom:.35rem;font-size:1.35rem}.casting-guide span{color:var(--muted);line-height:1.55}.casting-guide small{color:#fff7df94;margin-top:.65rem}.camera-fallback h1{max-width:9ch;margin-inline:auto;font-size:clamp(3rem,8vw,7.5rem)}.casting-screen.drawing .hud-readout{border-color:#ffd47e6b;box-shadow:0 0 40px #ffad3e24}.casting-screen.failed .hud-readout{border-color:#ff715f73}.casting-screen.failed .hud-readout span{color:var(--danger)}.casting-screen.success .hud-readout{border-color:#ffe09ac7;box-shadow:0 0 56px #ffb04042}@media (width<=760px){.casting-guide{width:auto;bottom:1rem;left:1rem;right:1rem}.unlock-panel{bottom:9.5rem;right:1rem}}