:root{color-scheme:dark;--bg: #090812;--surface: rgba(18, 17, 27, .94);--surface-soft: rgba(255, 255, 255, .045);--surface-strong: #171622;--line: rgba(255, 255, 255, .18);--line-strong: rgba(255, 255, 255, .34);--text: #fafafa;--muted: #a1a1aa;--muted-strong: #d4d4d8;--red: #ff5c4d;--blue: #52a8ff;--green: #3ccf91;--gold: #f5c542;--radius-sm: 3px;--radius-md: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--pink: #ff6fb1;--violet: #8f7bff;--cyan: #2ee8ff;--shadow-soft: 6px 6px 0 rgba(0, 0, 0, .42);--motion-snap: .16s cubic-bezier(.2, .9, .2, 1);--motion-silk: .26s cubic-bezier(.16, 1, .3, 1)}[data-skin=vercel]{--brand: #ffffff;--brand-ink: #050505;--accent: var(--gold)}*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--text);background:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(45deg,rgba(255,111,177,.08),transparent 32rem),linear-gradient(135deg,rgba(46,232,255,.08),transparent 32rem),var(--bg);background-size:12px 12px,12px 12px,auto,auto,auto;font-family:Pretendard,-apple-system,BlinkMacSystemFont,Segoe UI,Noto Sans KR,system-ui,sans-serif;font-size:14px}button{font:inherit}button:focus-visible{outline:2px solid var(--brand);outline-offset:3px}.shell{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--space-5);width:min(1200px,calc(100% - 32px));min-height:100vh;margin:0 auto;padding:24px 0}.surface{border:2px solid var(--line);border-radius:var(--radius-md);background:linear-gradient(135deg,rgba(255,111,177,.08),transparent 30%),linear-gradient(180deg,rgba(255,255,255,.07),transparent 120px),var(--surface);box-shadow:var(--shadow-soft);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.surface-soft{border:2px solid var(--line);border-radius:var(--radius-md);background:var(--surface-soft)}.arena{display:flex;flex-direction:column;gap:var(--space-5);min-height:calc(100vh - 48px);padding:var(--space-6)}.topbar,.scoreboard,.controls{display:grid;gap:var(--space-4)}.topbar{grid-template-columns:1fr auto;align-items:center}.eyebrow{margin:0 0 4px;color:var(--gold);font-size:.62rem;font-weight:800;letter-spacing:0;text-transform:uppercase}h1,h2,p{margin:0}h1{max-width:11ch;font-size:clamp(1.3rem,2.3vw,2.25rem);line-height:1;letter-spacing:0}.ghost-button,.fight-button,.choice-card{border:2px solid rgba(244,239,228,.2);color:var(--text);background:var(--surface-strong);cursor:pointer;transition:transform var(--motion-snap),border-color var(--motion-snap),background var(--motion-snap),box-shadow var(--motion-snap)}.ghost-button{min-height:42px;padding:0 16px;border-radius:var(--radius-sm)}.ghost-button:hover,.choice-card:hover,.fight-button:hover:not(:disabled){transform:translateY(-1px);border-color:var(--line-strong)}.ghost-button:hover,.choice-card:hover{box-shadow:4px 4px #0000006b}.scoreboard{grid-template-columns:minmax(0,1fr) 86px minmax(0,1fr);align-items:stretch}.fighter{display:grid;gap:12px;min-height:210px;padding:var(--space-5);border:2px solid var(--line);border-radius:var(--radius-md);background:linear-gradient(160deg,rgba(255,255,255,.1),transparent 52%),linear-gradient(25deg,#ff6fb10f,#2ee8ff09),var(--surface-strong);animation:pop-in .42s var(--motion-silk) both}.fighter:nth-child(3){animation-delay:60ms}.fighter-header{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--muted);font-size:.72rem;font-weight:800;letter-spacing:0;text-transform:uppercase}.fighter-header strong{min-width:48px;color:var(--text);font-size:1.25rem;text-align:right}.character-status{display:flex;align-items:center;gap:12px;min-height:66px;color:var(--muted-strong);font-size:.9rem;font-weight:800}.mini-portrait{display:grid;place-items:center;width:62px;height:62px;overflow:hidden;border:2px solid var(--line);border-radius:var(--radius-sm);box-shadow:4px 4px #00000061}.mini-portrait .portrait-art,.mini-portrait .asset-art,.mini-portrait .sprite-art,.mini-portrait svg{width:100%;height:100%}.mini-portrait .portrait-art img,.mini-portrait .asset-art img{filter:saturate(1.16) contrast(1.08)}.hp-track{height:10px;overflow:hidden;border-radius:0;background:#ffffff14}.hp-track span{display:block;width:100%;height:100%;border-radius:0;background:linear-gradient(90deg,var(--green),var(--gold),var(--red));transition:width .22s ease}.pick-display{display:grid;place-items:center;min-height:126px;gap:var(--space-2);border:2px dashed rgba(255,255,255,.18);border-radius:var(--radius-sm);color:var(--muted);background:#00000029;font-size:.82rem;font-weight:900}.pick-display span{color:var(--muted-strong);font-size:.72rem}.pick-display svg{width:min(44%,126px);height:auto}.pick-display .sprite-art,.pick-display .asset-art{width:min(52%,148px);border:2px solid var(--line);box-shadow:4px 4px #0000006b}.versus{display:grid;place-items:center;color:var(--gold);font-size:.78rem;font-weight:1000;letter-spacing:0}.result-panel{display:grid;gap:var(--space-2);min-height:134px;padding:var(--space-5);border-left:4px solid var(--accent)}.result-panel p{color:var(--muted);line-height:1.5}.result-panel h2{font-size:clamp(.95rem,1.5vw,1.25rem);line-height:1.15;letter-spacing:0}.controls{margin-top:auto}.group-title{margin-bottom:10px;color:var(--muted);font-size:.68rem;font-weight:900;letter-spacing:0;text-transform:uppercase}.choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}.tactic-grid:empty{min-height:86px;border:1px dashed var(--line);border-radius:var(--radius-sm);background:#ffffff06}.choice-card{display:grid;grid-template-columns:66px minmax(0,1fr);align-items:center;gap:var(--space-3);min-height:74px;padding:10px;border-radius:var(--radius-sm);text-align:left;position:relative;overflow:hidden}.choice-card:before{position:absolute;inset:0 auto 0 0;width:4px;background:var(--choice-accent);content:"";opacity:.78}.choice-card[aria-pressed=true]{border-color:color-mix(in srgb,var(--choice-accent),white 12%);background:linear-gradient(90deg,color-mix(in srgb,var(--choice-accent),transparent 82%),transparent 70%),var(--surface-strong);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--choice-accent),transparent 58%)}.choice-card.is-locked{cursor:not-allowed;opacity:.42;filter:grayscale(.75)}.choice-card.is-locked:after{position:absolute;top:10px;right:10px;padding:4px 7px;border:2px solid var(--line);border-radius:var(--radius-sm);color:var(--muted-strong);background:#0006;content:"잠김";font-size:.62rem;font-weight:900}.choice-card svg{width:58px;height:58px}.sprite-art,.asset-art{position:relative;display:block;width:58px;aspect-ratio:1;overflow:hidden;border-radius:var(--radius-sm);background:#101010;image-rendering:auto}.sprite-art img{position:absolute;top:0;left:0;display:block;width:var(--sprite-width);height:auto;max-width:none;transform:translate(var(--sprite-shift-x),var(--sprite-shift-y));transform-origin:top left;-webkit-user-select:none;user-select:none}.asset-art img{display:block;width:100%;height:100%;object-fit:cover;-webkit-user-select:none;user-select:none}.element-art img{object-fit:contain}.choice-card strong{display:block;margin-bottom:4px;font-size:.82rem;letter-spacing:0}.choice-card span{display:block;color:var(--muted);font-size:.66rem;line-height:1.35}.fight-button{min-height:50px;border-color:transparent;border-radius:var(--radius-sm);color:var(--brand-ink);background:var(--brand);font-size:.82rem;font-weight:1000}.fight-button:hover:not(:disabled){box-shadow:4px 4px #ffffff29}.fight-button:active:not(:disabled),.choice-card:active{transform:translateY(0) scale(.985)}.fight-button:disabled{cursor:not-allowed;opacity:.45}.side-panel{display:flex;flex-direction:column;gap:var(--space-6);min-height:calc(100vh - 48px);padding:var(--space-6)}.side-panel h2{margin-bottom:12px;font-size:.78rem;letter-spacing:0}.matchup-table{display:grid;gap:var(--space-3)}.matchup-note{color:var(--muted);font-size:.66rem;line-height:1.4}.matchup-note strong{color:var(--text)}.matchup-wheel{position:relative;width:min(100%,260px);aspect-ratio:1;margin:0 auto}.matchup-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.matchup-arrow{stroke:var(--choice-accent);stroke-width:1.45;stroke-linecap:round;opacity:.62;marker-end:url(#matchupArrowHead)}.matchup-node{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);transform:translate(-50%,-50%);display:grid;place-items:center;gap:2px;width:62px;aspect-ratio:1;border:2px solid var(--line);border-radius:var(--radius-sm);background:radial-gradient(circle at 50% 32%,color-mix(in srgb,var(--choice-accent),transparent 72%),transparent 60%),#ffffff09}.matchup-node svg{width:24px;height:24px}.matchup-node .sprite-art,.matchup-node .asset-art{width:32px;border:2px solid color-mix(in srgb,var(--choice-accent),white 20%)}.matchup-node strong{color:var(--text);font-size:.62rem;line-height:1}.loadout-overlay{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:var(--space-5);background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),#000000c2;background-size:10px 10px,10px 10px,auto;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.loadout-overlay.is-hidden{display:none}.loadout-modal{display:grid;gap:var(--space-4);width:min(940px,100%);max-height:min(780px,calc(100vh - 32px));overflow:auto;padding:var(--space-6)}.loadout-header{display:grid;gap:var(--space-2)}.loadout-header h2{font-size:clamp(1.05rem,2vw,1.5rem);line-height:1}.loadout-header p:last-child{color:var(--muted);font-size:.72rem;line-height:1.45}.mode-panel{display:grid;gap:var(--space-3);padding:var(--space-4);border:2px dashed var(--line);border-radius:var(--radius-sm);background:#ffffff09}.mode-toggle{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}.mode-toggle button,.room-form input{min-height:42px;border:2px solid var(--line);border-radius:var(--radius-sm);color:var(--text);background:var(--surface-strong);font:inherit;font-weight:900}.mode-toggle button{cursor:pointer}.mode-toggle button[aria-pressed=true]{border-color:var(--gold);color:var(--brand-ink);background:var(--brand);box-shadow:4px 4px #ffffff1f}.pvp-panel{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--space-3)}.pvp-panel.is-hidden{display:none}.pvp-panel p{grid-column:1 / -1;color:var(--muted);font-size:.72rem;line-height:1.45}.room-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-2)}.room-form input{width:100%;padding:0 12px;text-transform:uppercase}.loadout-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}.character-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-3)}.character-card{position:relative;display:grid;gap:9px;min-height:210px;padding:10px;overflow:hidden;border:2px solid var(--line);border-radius:var(--radius-sm);color:var(--text);background:linear-gradient(145deg,rgba(255,255,255,.08),transparent 44%),linear-gradient(180deg,color-mix(in srgb,var(--choice-accent),transparent 86%),transparent),var(--surface-strong);text-align:left;cursor:pointer;transition:transform var(--motion-snap),border-color var(--motion-snap),box-shadow var(--motion-snap)}.character-card:hover{transform:translateY(-1px);border-color:var(--line-strong)}.character-card[aria-pressed=true]{border-color:color-mix(in srgb,var(--choice-accent),white 14%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--choice-accent),transparent 48%),4px 4px color-mix(in srgb,var(--choice-accent),transparent 72%)}.portrait{display:block}.portrait-art{display:grid;place-items:center;width:100%;aspect-ratio:3 / 4;overflow:hidden;border:2px solid color-mix(in srgb,var(--choice-accent),transparent 42%);border-radius:var(--radius-sm);background:linear-gradient(135deg,rgba(255,255,255,.12),transparent 42%),radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--choice-accent),white 15%),transparent 24%),radial-gradient(circle at 50% 100%,color-mix(in srgb,var(--choice-accent),transparent 42%),transparent 58%),#101010}.portrait-art.sprite-art,.portrait-art.asset-art{border-radius:var(--radius-sm);width:100%}.portrait-art svg{width:100%;height:100%;filter:drop-shadow(0 8px 20px rgba(0,0,0,.35))}.portrait-art img{filter:saturate(1.12) contrast(1.06)}.cosmic-portrait img{width:100%;height:100%;object-fit:cover}.character-card strong,.character-card span{display:block}.character-card strong{margin-bottom:3px;font-size:.74rem}.character-card span span{color:var(--muted);font-size:.62rem;line-height:1.35}.rules{display:grid;gap:var(--space-3);padding-left:18px;color:var(--muted);font-size:.72rem;line-height:1.45}.rules strong{color:var(--text)}.history{display:grid;gap:var(--space-3);max-height:50vh;overflow:auto;padding-left:22px;color:var(--muted);font-size:.72rem;line-height:1.45}.history li{padding:8px 0;border-bottom:2px dotted rgba(255,255,255,.12)}.history li::marker{color:var(--gold);font-weight:900}.pop-in{animation:pop-in .32s var(--motion-silk) both}@keyframes pop-in{0%{opacity:0;transform:translateY(8px) scale(.98);filter:blur(6px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:1ms!important;scroll-behavior:auto!important;transition-duration:1ms!important}}@media(max-width:920px){.shell{grid-template-columns:1fr}.arena,.side-panel{min-height:auto}.character-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:680px){.shell{width:min(100% - 20px,1180px);padding:10px 0}.arena,.side-panel{padding:14px}.topbar,.scoreboard{grid-template-columns:1fr}.versus{min-height:34px}.choice-grid,.loadout-grid,.character-grid,.pvp-panel,.room-form{grid-template-columns:1fr}}