@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Noto+Serif+KR:wght@400;500;600&display=swap');
:root{color-scheme:dark;--gold:#c6aa75;--paper:#e7dfce;--accent:#a9dcec;--card-h:clamp(280px,43vh,500px);--card-w:calc(var(--card-h)*.7466)}
*{box-sizing:border-box}
html{min-height:100%;background:#100e0b}
body{isolation:isolate;margin:0;min-height:100svh;color:var(--paper);font-family:'Noto Serif KR',Georgia,serif;overflow-x:hidden;background:#100e0b}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,.weapon-stage:focus-visible{outline:2px solid var(--gold);outline-offset:5px}
button{touch-action:manipulation}a{color:inherit;text-decoration:none}
.shop{position:fixed;inset:0;background:linear-gradient(#07090b99,#0b0d1088 45%,#100c09c9),url('./assets/armory/shop.webp') center/cover;z-index:-3}
.atmosphere{position:fixed;inset:0;pointer-events:none;z-index:-2;background:radial-gradient(ellipse at 50% 46%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 48%),linear-gradient(90deg,#09090966,transparent 25% 75%,#09090966);transition:background 1s}
.masthead{height:88px;margin:0 4.5vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #b89b5929}
.back,.sound{font:11px/1.5 system-ui,sans-serif;letter-spacing:.05em;color:#c7bda9;padding:12px 0;background:none;border:0;min-width:84px}
.back span{margin-right:10px}.sound{text-align:right}.sound span{font-size:17px;margin-left:10px;color:var(--gold)}
.wordmark{display:flex;align-items:center;gap:12px;font:500 20px/1.05 'Cormorant Garamond',Georgia,serif;letter-spacing:.18em;color:#d0b984}
.wordmark small{display:block;font:8px/1.8 system-ui;letter-spacing:.22em;margin-top:5px;color:#908675}
.crest{font-size:27px;letter-spacing:0}
.intro{text-align:center;padding:28px 16px 0}
.eyebrow{color:var(--gold);font:9px/1.5 system-ui;letter-spacing:.32em;margin:0 0 12px}
h1{font-weight:400;font-size:clamp(21px,2.1vw,32px);letter-spacing:-.04em;margin:0}
.intro-copy{font-size:11px;color:#9f998e;line-height:1.7;margin:12px 0 0}
.weapon-stage{position:relative;height:calc(var(--card-h) + 50px);width:100%;max-width:1500px;margin:8px auto 0;perspective:1300px;touch-action:pan-y;user-select:none;cursor:grab;outline-offset:-8px!important;overflow:hidden}
.weapon-stage.is-dragging{cursor:grabbing}
.cards{position:absolute;inset:0;perspective:1300px;pointer-events:none}
.weapon-card{position:absolute;top:24px;left:50%;width:var(--card-w);height:var(--card-h);margin-left:calc(var(--card-w)*-.5);padding:0;border:1px solid #bba97966;border-radius:3px;background:#0c1116;box-shadow:0 16px 50px #0009;transform-origin:50% 50%;will-change:transform,opacity;pointer-events:auto;overflow:hidden;backface-visibility:hidden}
.weapon-card img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}
.weapon-card:after{content:"";position:absolute;inset:7px;border:1px solid #cdbb902d;pointer-events:none}
.card-shade{position:absolute;inset:0;background:#080a0f;pointer-events:none}
.card-caption{position:absolute;left:0;right:0;bottom:0;padding:30px 12px 16px;background:linear-gradient(transparent,#06090de6);display:flex;align-items:center;justify-content:center;gap:10px;font-size:10px;letter-spacing:.15em;color:#e4dfd1}
.card-caption b{font-weight:400;color:var(--tone)}
.card-number{position:absolute;top:17px;left:18px;font:10px 'Cormorant Garamond',serif;letter-spacing:.12em;color:#e8ddbeaa}
.arrow{position:absolute;z-index:20;top:48%;transform:translateY(-50%);width:46px;height:58px;border:1px solid #a88c5055;background:#100e0bbf;color:#d3be93;backdrop-filter:blur(10px);border-radius:2px}
.arrow span{font:38px/1 Georgia,serif;display:block;margin-top:-5px}.arrow:hover{background:#302619;border-color:#d3be93}.previous{left:max(20px,8%)}.next{right:max(20px,8%)}
.floor-rune{position:absolute;width:65%;height:90px;left:17.5%;bottom:-20px;border:1px solid #c1a87515;border-radius:50%;box-shadow:0 0 55px #bcab7510,inset 0 0 45px #bcab7508}
.details{text-align:center;padding:5px 20px 0;position:relative;z-index:21}
.weapon-tag{display:flex;justify-content:center;gap:12px;font:10px system-ui;letter-spacing:.14em;color:#a9a192}
#element{color:var(--accent);transition:color .6s}.separator{color:#675b43}
h2{font-weight:500;font-size:clamp(25px,2.5vw,36px);margin:9px 0 10px;letter-spacing:-.03em}
.lore{font-size:12px;line-height:1.9;margin:0 auto;color:#aea79c;max-width:530px;min-height:24px}
.traits{display:flex;align-items:center;justify-content:center;gap:15px;font:10px system-ui;color:#c3b69a;margin:12px 0 20px}.traits i{width:3px;height:3px;background:#907e5d;transform:rotate(45deg)}
.equip{min-width:245px;padding:13px 22px;border:1px solid #b5985d88;background:linear-gradient(110deg,#332719d9,#221b14e6);font-size:12px;letter-spacing:.06em;box-shadow:inset 0 0 0 3px #100e0b;transition:background .25s,border-color .25s}
.equip:hover{border-color:#dac08a;background:#493724}.equip span{font-size:11px;color:#ac925f;margin:0 14px}
.selection{height:17px;font-size:10px;color:var(--accent);margin:8px 0 0}
footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:12px 4.5vw 0;border-top:1px solid #b89b5929;padding:19px 0 22px;font:9px system-ui;letter-spacing:.1em;color:#8d8475}
.pagination{display:flex;gap:5px}.pagination button{width:32px;height:28px;background:none;border:0;padding:8px}
.pagination button:after{content:"";display:block;width:6px;height:6px;background:#615747;transform:rotate(45deg);transition:background .4s,box-shadow .4s}
.pagination button[aria-current=true]:after{background:var(--gold);box-shadow:0 0 10px #ccaa6388}
.hint span{padding:0 9px}.footer-note,.hint{flex:1}.hint{text-align:right}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.no-script{position:fixed;top:50%;left:10%;right:10%;padding:30px;background:#15110b;text-align:center;z-index:50}
@media(min-height:1000px){:root{--card-h:clamp(450px,48vh,620px)}.intro{padding-top:40px}.weapon-stage{margin-top:22px}}
@media(max-width:650px){
 :root{--card-h:clamp(280px,41svh,410px)}
 .masthead{height:68px;margin:0 20px}.wordmark{font-size:15px;gap:7px;letter-spacing:.1em}.wordmark small{font-size:6px}.crest{font-size:22px}
 .back,.sound{min-width:60px;font-size:10px}.sound span{margin-left:4px}.back span{margin-right:5px}
 .intro{padding-top:24px}.eyebrow{font-size:8px;letter-spacing:.25em}h1{font-size:22px}.intro-copy{font-size:10px}
 .weapon-stage{margin-top:4px;height:calc(var(--card-h) + 42px)}.weapon-card{top:20px}
 .arrow{width:34px;height:44px;top:48%;background:#100e0bd9}.previous{left:12px}.next{right:12px}.arrow span{font-size:29px}
 .details{padding-top:8px}h2{font-size:27px}.lore{font-size:11px;max-width:330px;min-height:42px}.traits{margin:9px 0 17px}
 .equip{padding:12px 17px}.selection{margin-bottom:0}
 footer{justify-content:center;flex-wrap:wrap;padding:10px 0 17px;margin-top:8px}.footer-note{display:none}.pagination{order:0}.hint{flex:0 0 100%;text-align:center;font-size:8px;order:1}
}
@media(max-height:620px) and (min-width:651px){:root{--card-h:280px}.masthead{height:60px}.intro{padding-top:18px}.intro-copy{display:none}footer{margin-top:8px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.armory-navigation{width:min(400px,100%);min-width:0}.collection-index{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:5px}#weapon-counter{font-variant-numeric:tabular-nums;color:var(--gold);white-space:nowrap}#weapon-jump{max-width:235px;padding:7px 10px;color:var(--paper);background:#17140f;border:1px solid #b5985d55;font:11px system-ui;border-radius:2px}.pagination{position:relative;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#665538 transparent;overscroll-behavior-x:contain}.pagination button{flex:0 0 28px}.weapon-card[hidden]{display:none}@media(max-width:650px){.armory-navigation{width:min(320px,100%)}footer{gap:8px}}

.frost-screen{position:fixed;inset:0;width:100%;height:100%;z-index:100;pointer-events:none;visibility:hidden}.frost-screen.is-active{visibility:visible}

.flame-screen{position:fixed;inset:0;width:100%;height:100%;z-index:100;pointer-events:none;visibility:hidden}.flame-screen.is-active{visibility:visible}

.lightning-screen{position:fixed;inset:0;width:100%;height:100%;z-index:100;pointer-events:none;visibility:hidden}.lightning-screen.is-active{visibility:visible}

.tempest-screen{position:fixed;inset:0;width:100%;height:100%;z-index:100;pointer-events:none;visibility:hidden}.tempest-screen.is-active{visibility:visible}

.venom-screen{position:fixed;inset:0;width:100%;height:100%;z-index:100;pointer-events:none;visibility:hidden}.venom-screen.is-active{visibility:visible}
.spectral-screen{position:fixed;inset:0;width:100%;height:100%;z-index:100;pointer-events:none;visibility:hidden}.spectral-screen.is-active{visibility:visible}
.gravity-screen{position:fixed;inset:0;width:100%;height:100%;z-index:100;pointer-events:none;visibility:hidden}.gravity-screen.is-active{visibility:visible}
.magnet-screen{position:fixed;inset:0;width:100%;height:100%;z-index:100;pointer-events:none;visibility:hidden}.magnet-screen.is-active{visibility:visible}
.resonance-screen{position:fixed;inset:0;width:100%;height:100%;z-index:100;pointer-events:none;visibility:hidden}.resonance-screen.is-active{visibility:visible}
.nature-screen{position:fixed;inset:0;width:100%;height:100%;z-index:100;pointer-events:none;visibility:hidden}.nature-screen.is-active{visibility:visible}
.rune-screen,.radiance-screen{position:fixed;inset:0;width:100%;height:100%;z-index:100;pointer-events:none;visibility:hidden}.rune-screen.is-active,.radiance-screen.is-active{visibility:visible}
.beast-screen,.rose-screen,.blood-screen{position:fixed;inset:0;width:100%;height:100%;z-index:100;pointer-events:none;visibility:hidden}.beast-screen.is-active,.rose-screen.is-active,.blood-screen.is-active{visibility:visible}