@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;600;700;900&family=Song+Myung&display=swap');

:root {
  color-scheme: dark;
  --ink: #080711;
  --panel: rgba(9, 8, 20, .82);
  --moon: #dce8ff;
  --violet: #8c72ff;
  --cyan: #78e8ff;
  --crimson: #fa426a;
  --gold: #eecb83;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #05040b; }
body { font-family: "Noto Sans KR", system-ui, sans-serif; color: white; touch-action: none; user-select: none; }
button, input { font: inherit; }
button { color: inherit; }

#game-shell {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 65% 18%, #27234b 0, #0b0917 42%, #04030a 100%);
}

#game {
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  display: block;
  background: #080711;
  box-shadow: 0 0 100px #000;
}

.is-hidden { display: none !important; }
.screen-panel { position: absolute; inset: 0; width: min(100vw, calc(100vh * 16 / 9)); margin: auto; }

.loading-panel {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  background: radial-gradient(circle, rgba(33, 31, 62, .8), #05040b 68%);
  z-index: 30;
}
.loading-panel strong { font-family: "Song Myung", serif; font-size: clamp(20px, 2.2vw, 34px); letter-spacing: .12em; }
.loading-panel span { color: #8ea2c9; font-size: 13px; }
.moon-sigil { width: 68px; aspect-ratio: 1; border: 1px solid #a6bfff; border-radius: 50%; box-shadow: 0 0 36px rgba(119, 151, 255, .6), inset -12px -5px 0 #22203a; animation: breathe 2s ease-in-out infinite; }

.title-screen {
  z-index: 20;
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  align-items: center;
  gap: clamp(20px, 4vw, 70px);
  padding: clamp(30px, 6vw, 90px);
  background: linear-gradient(90deg, rgba(5,4,12,.95) 0%, rgba(5,4,12,.65) 42%, rgba(5,4,12,.2) 72%), url('/assets/art/moonlit-ruins.png') center/cover;
}
.title-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 70% 20%, transparent 0 20%, rgba(4,3,9,.56) 88%), linear-gradient(0deg, rgba(4,3,8,.86), transparent 42%); }
.title-copy, .entry-card, .control-hint { position: relative; z-index: 1; }
.eyebrow { margin: 0 0 10px; color: var(--gold); font-size: clamp(9px, .9vw, 13px); font-weight: 700; letter-spacing: .28em; }
h1 { margin: 0; font-family: "Song Myung", serif; text-shadow: 0 3px 20px #000; }
h1 span { display: block; font-size: clamp(48px, 6vw, 92px); font-weight: 400; letter-spacing: -.04em; }
h1 small { display: block; margin-top: -5px; color: #b9c8e8; font-size: clamp(18px, 2.1vw, 31px); font-weight: 400; letter-spacing: .3em; }
.title-line { max-width: 550px; margin: 24px 0; color: #c4c8d9; font-family: "Song Myung", serif; font-size: clamp(14px, 1.4vw, 20px); }
.feature-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.feature-chips span { padding: 7px 12px; border: 1px solid rgba(184,201,255,.22); background: rgba(18,17,36,.58); color: #bac8e8; font-size: 11px; letter-spacing: .08em; }

.entry-card { padding: clamp(20px, 2.5vw, 34px); border: 1px solid rgba(189,205,255,.2); background: linear-gradient(145deg, rgba(22,20,44,.88), rgba(8,7,18,.9)); box-shadow: 0 24px 80px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.06); backdrop-filter: blur(12px); }
.name-field { display: grid; gap: 7px; margin-bottom: 15px; color: #8f99b5; font-size: 11px; letter-spacing: .12em; }
.name-field input, .join-row input { width: 100%; border: 1px solid rgba(176,193,238,.2); outline: 0; background: rgba(1,1,8,.55); color: white; }
.name-field input { height: 43px; padding: 0 13px; }
.name-field input:focus, .join-row input:focus { border-color: #8275d7; box-shadow: 0 0 0 3px rgba(130,117,215,.12); }
.profile-tools { display:grid; grid-template-columns:.72fr 1.28fr; gap:7px; margin:-4px 0 11px; }
.appearance-open-button { display:grid; align-content:center; justify-items:start; min-width:0; padding:7px 10px; border:1px solid rgba(162,184,239,.2); background:rgba(18,18,36,.66); }
.appearance-open-button span { color:#8994af; font-size:8px; letter-spacing:.12em; }.appearance-open-button strong { max-width:100%; overflow:hidden; color:#d8def0; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.stage-picker { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.stage-picker button { display:flex; align-items:center; gap:7px; min-width:0; padding:7px 8px; border:1px solid rgba(161,177,220,.16); background:rgba(8,8,18,.55); color:#818ca7; }
.stage-picker button.is-active { border-color:rgba(238,203,131,.48); background:rgba(96,61,45,.36); color:#f2dfba; box-shadow:inset 0 0 15px rgba(255,100,52,.08); }
.stage-picker small { color:#eecb83; font-size:8px; }.stage-picker span { overflow:hidden; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
button { cursor: pointer; border: 0; transition: transform .15s ease, filter .15s ease, border-color .15s ease; }
button:hover { filter: brightness(1.16); }
button:active { transform: scale(.97); }
.primary-button, .secondary-button { width: 100%; min-height: 54px; }
.primary-button { display: grid; place-content: center; gap: 2px; background: linear-gradient(135deg, #6953d8, #ae416f); box-shadow: 0 8px 30px rgba(112,70,210,.3); }
.primary-button::before { content: ""; position: absolute; }
.primary-button strong { font-size: 16px; letter-spacing: .05em; }
.button-kicker { font-size: 9px; color: #dfd9ff; letter-spacing: .16em; }
.secondary-button { border: 1px solid rgba(163,189,255,.28); background: rgba(76,83,135,.22); }
.online-divider { display: flex; align-items: center; gap: 10px; margin: 15px 0 10px; color: #5f6984; font-size: 9px; letter-spacing: .18em; }
.online-divider::before, .online-divider::after { content: ""; height: 1px; flex: 1; background: rgba(140,156,198,.15); }
.join-row { display: grid; grid-template-columns: 1fr 68px; gap: 7px; margin-top: 8px; }
.join-row input { min-width: 0; height: 42px; padding: 0 11px; text-transform: uppercase; letter-spacing: .12em; }
.join-row button { background: #323653; }
.network-note { min-height: 30px; margin: 10px 0 0; color: #77819b; font-size: 10px; line-height: 1.5; }
.network-note.error { color: #ff7693; }
.control-hint { position: absolute; left: clamp(30px, 6vw, 90px); bottom: 4vh; display: flex; gap: 22px; color: #68728d; font-size: 10px; }
kbd { display: inline-grid; place-items: center; min-width: 22px; height: 20px; margin-right: 3px; padding: 0 5px; border: 1px solid #3a4055; border-bottom-width: 2px; background: #151522; color: #aeb8d1; font: 10px monospace; }

.appearance-panel { position:absolute; z-index:28; inset:0; display:grid; place-items:center; padding:28px; background:rgba(3,3,10,.8); backdrop-filter:blur(14px); }
.appearance-card { display:grid; grid-template-columns:.85fr 1.15fr; width:min(850px,94vw); max-height:92vh; border:1px solid rgba(192,206,246,.24); background:linear-gradient(145deg,rgba(28,25,54,.98),rgba(8,7,18,.98)); box-shadow:0 30px 120px #000; overflow:hidden; }
.appearance-preview { --preview-scale-x:1; --preview-scale-y:1; --aura-color:#8e78ff; position:relative; display:grid; place-items:center; min-height:500px; overflow:hidden; background:radial-gradient(circle at 50% 42%,rgba(78,73,137,.42),rgba(7,7,16,.94) 63%),url('/assets/art/moonlit-ruins.png') center/cover; }
.appearance-preview::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(5,4,12,.9),transparent 48%); pointer-events:none; }
.appearance-preview img { position:relative; z-index:2; width:82%; max-height:410px; object-fit:contain; transform:scale(var(--preview-scale-x),var(--preview-scale-y)); transform-origin:50% 82%; filter:drop-shadow(0 12px 12px #000) drop-shadow(0 0 14px var(--aura-color)); transition:transform .25s ease,filter .25s ease; }
.preview-aura { position:absolute; z-index:1; width:68%; aspect-ratio:1; border:1px solid var(--aura-color); border-radius:50%; box-shadow:0 0 45px var(--aura-color),inset 0 0 65px color-mix(in srgb,var(--aura-color) 18%,transparent); opacity:.48; animation:breathe 2.4s ease-in-out infinite; }
.appearance-preview p { position:absolute; z-index:4; left:26px; right:26px; bottom:20px; margin:0; }.appearance-preview p small,.appearance-preview p strong{display:block}.appearance-preview p small{color:var(--gold);font-size:8px;letter-spacing:.24em}.appearance-preview p strong{margin-top:4px;font-family:"Song Myung",serif;font-size:17px;font-weight:400}
.preview-ornament { position:absolute; z-index:3; left:55%; top:35%; width:22px; height:22px; pointer-events:none; }
.appearance-preview[data-ornament="moon"] .preview-ornament { border:3px solid #f2dc9e; border-right-color:transparent; border-radius:50%; filter:drop-shadow(0 0 8px #fff0ae); }
.appearance-preview[data-ornament="crimson"] .preview-ornament { width:7px;height:74px;border:0;background:linear-gradient(#ff5578,transparent);transform:rotate(-24deg);filter:drop-shadow(9px 4px 0 rgba(191,34,72,.65)); }
.appearance-preview[data-ornament="spirit"] .preview-ornament { border-radius:50%;background:#dffcff;box-shadow:0 0 8px #fff,0 0 24px #66e6ff;animation:spiritFloat 1.8s ease-in-out infinite; }
.appearance-preview[data-aura="azure"] { --aura-color:#62dcff; }.appearance-preview[data-aura="crimson"] { --aura-color:#ff4f78; }
.appearance-options { padding:34px; overflow:auto; }.appearance-options h2{margin:0 0 24px;font-family:"Song Myung",serif;font-size:28px;font-weight:400}.option-group{display:grid;gap:8px;margin:0 0 18px}.option-group>span{display:flex;justify-content:space-between;color:#929bb3;font-size:10px;letter-spacing:.1em}.option-group output{color:#e6ddff}.segmented{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.segmented button{min-height:38px;border:1px solid rgba(162,180,224,.16);background:rgba(8,8,18,.55);color:#8f99b2;font-size:11px}.segmented button.is-active{border-color:rgba(145,125,255,.72);background:rgba(79,60,164,.42);color:#fff;box-shadow:inset 0 0 18px rgba(121,94,255,.16)}.size-option input{width:100%;accent-color:#8e78ff}.aura-options button{display:flex;justify-content:center;align-items:center;gap:6px}.aura-options i{width:8px;height:8px;border-radius:50%;background:#8e78ff;box-shadow:0 0 8px #8e78ff}.aura-options button[data-value="azure"] i{background:#62dcff;box-shadow:0 0 8px #62dcff}.aura-options button[data-value="crimson"] i{background:#ff4f78;box-shadow:0 0 8px #ff4f78}.appearance-note{color:#6f7890;font-size:10px;line-height:1.6}.appearance-actions{display:grid;grid-template-columns:.7fr 1.3fr;gap:8px;margin-top:22px}.appearance-actions>button:first-child{background:#252638}.appearance-actions .primary-button{min-height:46px}

.hud { position: absolute; inset: 0; z-index: 10; width: min(100vw, calc(100vh * 16 / 9)); height: min(100vh, calc(100vw * 9 / 16)); margin: auto; pointer-events: none; }
.hero-status { position: absolute; top: clamp(15px,2.4vw,34px); left: clamp(15px,2.4vw,34px); display: flex; align-items: center; width: clamp(220px,26vw,370px); }
.portrait { position: relative; z-index: 1; display: grid; place-items: center; width: clamp(48px,5.5vw,72px); aspect-ratio: 1; border: 2px solid #9babd1; transform: rotate(45deg); background: radial-gradient(circle, #2e3761, #111222); box-shadow: 0 0 22px rgba(111,142,236,.35); }
.portrait span { transform: rotate(-45deg); font-family: "Song Myung", serif; font-size: 25px; }
.bars { flex: 1; margin-left: -7px; }
.status-line { display: flex; justify-content: space-between; align-items: end; margin: 0 5px 5px 16px; text-shadow: 0 1px 4px #000; }
.status-line strong { font-size: clamp(12px,1.1vw,16px); }.status-line span { color: #9ca8c5; font-size: 9px; }
.bar { height: 10px; margin-bottom: 5px; transform: skewX(-20deg); background: rgba(3,3,9,.72); border: 1px solid rgba(255,255,255,.14); overflow: hidden; }
.bar i { display: block; width: 100%; height: 100%; transition: width .25s ease; }
.bar.health i { background: linear-gradient(90deg,#a81f49,#fa426a); box-shadow: 0 0 12px #fa426a; }
.bar.mana { height: 6px; }.bar.mana i { background: linear-gradient(90deg,#4b62c6,#83d5ff); }
.stage-status { position: absolute; top: clamp(15px,2.2vw,30px); left: 50%; transform: translateX(-50%); display: grid; justify-items: center; text-shadow: 0 2px 8px #000; }
.stage-status span { color: var(--gold); font-size: 8px; letter-spacing: .25em; }.stage-status strong { font-family: "Song Myung",serif; font-size: clamp(14px,1.5vw,20px); letter-spacing: .1em; }.stage-status small { margin-top: 3px; color: #a4abc1; font-size: 9px; }
.top-actions { position: absolute; top: clamp(14px,2.1vw,30px); right: clamp(14px,2.1vw,30px); display: flex; gap: 7px; pointer-events: auto; }
.icon-button { display:grid; place-items:center; width:38px; height:38px; border:1px solid rgba(188,203,241,.18); background:rgba(7,7,16,.58); backdrop-filter:blur(8px); }
.room-badge { display:flex; align-items:center; gap:7px; height:38px; padding:0 12px; border:1px solid rgba(120,232,255,.28); background:rgba(6,18,28,.65); }
.room-badge span { color:#78e8ff; font-size:8px; letter-spacing:.15em; }.room-badge strong { font-size:13px; letter-spacing:.14em; }
.combo { position:absolute; top:31%; right:7%; display:grid; justify-items:end; transform:rotate(-5deg); text-shadow:0 3px 12px #000; }
.combo strong { font: italic 900 clamp(40px,6vw,78px)/.8 "Noto Sans KR"; color:white; -webkit-text-stroke:1px #8c72ff; }.combo span { color:#d1c9ff; font-size:11px; font-weight:900; letter-spacing:.28em; }
.boss-bar { position:absolute; left:50%; bottom:5.5%; width:min(540px,58vw); transform:translateX(-50%); text-align:center; }
.boss-bar span { display:block; margin-bottom:6px; color:#f2d7e2; font-family:"Song Myung",serif; font-size:14px; letter-spacing:.18em; text-shadow:0 2px 6px #000; }
.boss-bar div { height:8px; padding:1px; border:1px solid rgba(255,255,255,.22); background:#0b0710; }.boss-bar i { display:block; width:100%; height:100%; background:linear-gradient(90deg,#6a183d,#e33a72); box-shadow:0 0 15px #e33a72; transition:width .15s linear; }

.stage-banner { position:absolute; z-index:11; top:35%; left:50%; display:grid; justify-items:center; transform:translate(-50%,-50%); text-shadow:0 3px 20px #000; animation:banner 3.2s both; pointer-events:none; }
.stage-banner small { color:var(--gold); letter-spacing:.45em; }.stage-banner strong { font-family:"Song Myung",serif; font-size:clamp(30px,4vw,58px); font-weight:400; letter-spacing:.12em; }.stage-banner span { color:#b9bfd0; font-size:11px; letter-spacing:.16em; }
.result-panel { position:absolute; z-index:25; left:50%; top:50%; width:min(440px,88vw); padding:36px; transform:translate(-50%,-50%); border:1px solid rgba(201,211,255,.24); background:linear-gradient(145deg,rgba(25,22,50,.95),rgba(7,6,16,.96)); text-align:center; box-shadow:0 30px 100px #000; backdrop-filter:blur(16px); }
.result-panel h2 { margin:5px 0 9px; font-family:"Song Myung",serif; font-size:34px; }.result-panel>p:not(.eyebrow) { color:#aeb6ca; font-size:13px; }.result-stats { display:flex; justify-content:center; gap:28px; margin:25px 0; color:#8d96ad; font-size:11px; }.result-stats strong { display:block; margin-top:3px; color:#fff; font-size:25px; }
.toast { position:absolute; z-index:40; left:50%; bottom:12%; max-width:80vw; padding:10px 17px; transform:translateX(-50%); border:1px solid rgba(157,179,235,.25); background:rgba(7,7,16,.88); color:#dbe3f7; font-size:11px; box-shadow:0 10px 30px #000; }

.mobile-controls { position:absolute; z-index:15; inset:auto 0 max(16px,env(safe-area-inset-bottom)); display:flex; justify-content:space-between; padding:0 max(18px,env(safe-area-inset-left)); pointer-events:none; }
.mobile-controls>div { display:flex; align-items:flex-end; gap:10px; pointer-events:auto; }.mobile-controls button { display:grid; place-items:center; width:58px; height:58px; border:1px solid rgba(210,222,255,.26); border-radius:50%; background:rgba(10,10,22,.52); box-shadow:inset 0 0 16px rgba(135,153,229,.12); backdrop-filter:blur(8px); font-family:"Song Myung",serif; font-size:19px; }
.mobile-controls .jump { margin-bottom:44px; }.mobile-controls .dash { width:46px;height:46px }.mobile-controls .skill { width:66px;height:66px;border-color:rgba(135,121,255,.48);background:rgba(53,39,114,.58) }.mobile-controls .attack { width:80px;height:80px;border-color:rgba(255,100,136,.48);background:rgba(109,28,58,.6);font-size:25px; }

@keyframes breathe { 50% { transform:scale(1.08); filter:brightness(1.4); } }
@keyframes spiritFloat { 50% { transform:translate(18px,-14px) scale(.8); } }
@keyframes banner { 0%{opacity:0;transform:translate(-50%,-35%) scale(.9)} 15%,70%{opacity:1;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0;transform:translate(-50%,-64%) scale(1.04)} }

@media (pointer: coarse), (max-width: 900px) { .mobile-controls:not(.is-hidden) { display:flex; }.control-hint { display:none; } }
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  .title-screen { grid-template-columns:1fr; align-content:center; padding:24px; overflow:auto; }
  .title-copy { display:none; }.entry-card { width:min(430px,100%); margin:auto; }.control-hint{display:none}
  .stage-status { top:12px }.hero-status{top:12px}.top-actions{top:12px}
}
@media (max-width:700px){.appearance-card{grid-template-columns:1fr}.appearance-preview{display:none}.appearance-options{padding:24px}}
@media (max-height: 540px) { .title-screen{grid-template-columns:1fr;padding:15px}.title-copy{display:none}.entry-card{width:min(430px,100%);margin:auto;padding:13px}.name-field{margin-bottom:7px}.name-field span{display:none}.name-field input{height:36px}.profile-tools{margin-bottom:7px}.primary-button,.secondary-button{min-height:38px}.online-divider{margin:6px 0}.join-row input{height:36px}.network-note{display:none}.control-hint{display:none}.appearance-panel{padding:9px}.appearance-card{grid-template-columns:.72fr 1.28fr;max-height:96vh}.appearance-preview{min-height:360px}.appearance-preview img{max-height:275px}.appearance-preview p{display:none}.appearance-options{padding:13px 18px}.appearance-options>.eyebrow{margin-bottom:3px}.appearance-options h2{margin-bottom:7px;font-size:20px}.option-group{gap:4px;margin-bottom:6px}.segmented button{min-height:28px}.appearance-note{display:none}.appearance-actions{margin-top:6px}.appearance-actions .primary-button{min-height:36px} }

/* Exploration build HUD */
.stage-status small { margin-top: 2px; }
.stage-status #region-name { color:#e5cc91; font-size:8px; letter-spacing:.15em; }
.auto-mode-button { display:flex; align-items:center; gap:7px; height:38px; padding:0 12px; border:1px solid rgba(178,188,220,.2); background:rgba(7,7,16,.68); color:#949db5; }
.auto-mode-button i { width:7px; height:7px; border-radius:50%; background:#596174; box-shadow:0 0 0 transparent; }
.auto-mode-button span { font-size:9px; white-space:nowrap; }
.auto-mode-button.is-active { border-color:rgba(122,226,255,.55); color:#dffaff; background:rgba(23,73,90,.58); }
.auto-mode-button.is-active i { background:#7ceaff; box-shadow:0 0 10px #7ceaff; animation:breathe 1.2s ease-in-out infinite; }
.exploration-panel { position:absolute; left:clamp(15px,2.4vw,34px); bottom:clamp(14px,2.2vw,30px); width:244px; padding:9px; border:1px solid rgba(163,180,225,.16); background:rgba(5,7,16,.72); box-shadow:0 12px 40px rgba(0,0,0,.38); backdrop-filter:blur(8px); }
.map-heading { display:flex; justify-content:space-between; align-items:center; margin:0 2px 6px; }
.map-heading span { color:#cad4ec; font-size:9px; font-weight:700; letter-spacing:.12em; }
.map-heading small { color:#68728a; font-size:7px; }
#minimap { display:block; width:100%; height:auto; border:1px solid rgba(160,179,222,.13); background:#050711; }
.loot-status { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin-top:7px; }
.loot-status span { display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:4px; color:#7d879d; font-size:7px; }
.loot-status strong { grid-column:2; color:#dfe6f6; font-size:9px; white-space:nowrap; }
.loot-status strong.is-owned { color:#f5d47b; text-shadow:0 0 8px rgba(245,212,123,.55); }
.loot-status i { grid-row:1/3; width:9px; height:9px; transform:rotate(45deg); background:#6edff7; box-shadow:0 0 7px rgba(110,223,247,.55); }
.loot-status .fragment-icon { border:2px solid #b7eaff; border-right-color:transparent; border-radius:50%; background:transparent; transform:none; }
.loot-status .key-icon { width:10px; height:6px; border:2px solid #e2c86f; border-radius:50%; background:transparent; box-shadow:7px 0 0 -1px #e2c86f; transform:none; }
.mobile-controls .auto { width:43px; height:43px; border-color:rgba(120,232,255,.42); background:rgba(19,71,84,.58); font-size:15px; }

@media (max-width:900px) {
  .exploration-panel{width:190px;padding:6px}.loot-status{display:none}.auto-mode-button{max-width:92px;padding:0 8px}.auto-mode-button span{overflow:hidden;text-overflow:ellipsis}.room-badge{padding:0 8px}.stage-status{max-width:34vw;text-align:center}.stage-status strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
}
@media (max-height:600px) {
  .exploration-panel{width:180px}.map-heading{display:none}.loot-status{display:none}.hero-status{width:230px}.top-actions{gap:4px}.auto-mode-button{height:34px}.icon-button,.room-badge{height:34px}
}

/* Modular equipment and costume preview */
.appearance-preview { --outfit-main:#d8e5f4; --outfit-dark:#65738d; --hat-main:#625d78; --weapon-color:#dce7f2; }
.preview-outfit { position:absolute; z-index:3; left:50%; top:43%; width:76px; height:126px; transform:translateX(-50%); border:2px solid color-mix(in srgb,var(--outfit-main) 70%,white); background:linear-gradient(100deg,var(--outfit-dark),color-mix(in srgb,var(--outfit-main) 78%,transparent),var(--outfit-dark)); opacity:.72; clip-path:polygon(22% 0,78% 0,100% 100%,0 100%); pointer-events:none; mix-blend-mode:screen; }
.appearance-preview[data-outfit="knight"] .preview-outfit { width:112px; height:104px; border-width:5px; clip-path:polygon(0 9%,28% 0,50% 15%,72% 0,100% 9%,78% 100%,22% 100%); }
.appearance-preview[data-outfit="ranger"] .preview-outfit { width:96px; height:152px; transform:translateX(-62%) rotate(7deg); clip-path:polygon(18% 0,82% 0,100% 100%,8% 78%); opacity:.58; }
.appearance-preview[data-outfit="mystic"] .preview-outfit { width:110px; height:156px; border-radius:45% 45% 4px 4px; clip-path:polygon(28% 0,72% 0,100% 100%,0 100%); }
.preview-hat { position:absolute; z-index:5; left:50%; top:26%; width:70px; height:45px; transform:translateX(-50%); pointer-events:none; filter:drop-shadow(0 3px 4px #000); }
.appearance-preview[data-hat="none"] .preview-hat { display:none; }
.appearance-preview[data-hat="hood"] .preview-hat { border:5px solid var(--hat-main); border-bottom:0; border-radius:50% 50% 18% 18%; background:color-mix(in srgb,var(--hat-main) 70%,transparent); }
.appearance-preview[data-hat="helm"] .preview-hat { border:5px solid color-mix(in srgb,var(--hat-main) 65%,white); border-radius:45% 45% 8px 8px; background:linear-gradient(90deg,var(--hat-main),#d6dde8,var(--hat-main)); }
.appearance-preview[data-hat="straw"] .preview-hat { height:22px; top:29%; border-radius:50%; background:var(--hat-main); clip-path:polygon(50% 0,100% 75%,72% 100%,28% 100%,0 75%); }
.appearance-preview[data-hat="crown"] .preview-hat { height:42px; top:25%; background:var(--hat-main); clip-path:polygon(0 28%,22% 58%,35% 0,51% 58%,72% 4%,100% 65%,92% 100%,8% 100%); }
.appearance-preview[data-hat="horns"] .preview-hat { background:var(--hat-main); clip-path:polygon(2% 85%,0 0,35% 62%,50% 100%,65% 62%,100% 0,98% 85%); }
.preview-weapon { position:absolute; z-index:6; left:31%; top:46%; width:9px; height:118px; transform:rotate(34deg); border-radius:5px; background:linear-gradient(90deg,#302a28,var(--weapon-color),white); box-shadow:0 0 12px color-mix(in srgb,var(--weapon-color) 65%,transparent); pointer-events:none; }
.appearance-preview[data-weapon="woodSword"] .preview-weapon { background:#a16f3f;box-shadow:none; }
.appearance-preview[data-weapon="stoneAxe"] .preview-weapon,.appearance-preview[data-weapon="ironAxe"] .preview-weapon { width:8px;height:105px;background:#6d4a31; }
.appearance-preview[data-weapon="stoneAxe"] .preview-weapon::after,.appearance-preview[data-weapon="ironAxe"] .preview-weapon::after { content:"";position:absolute;left:-23px;top:-5px;width:52px;height:34px;border-radius:55% 15%;background:var(--weapon-color);clip-path:polygon(0 12%,100% 0,82% 100%,8% 78%); }
.appearance-preview[data-weapon="bow"] .preview-weapon { width:62px;height:116px;border:5px solid var(--weapon-color);border-left-color:transparent;border-radius:50%;background:transparent;box-shadow:none; }
.appearance-preview[data-weapon="sling"] .preview-weapon { width:38px;height:82px;border:3px solid #a98358;border-bottom:0;border-radius:50% 50% 0 0;background:transparent;box-shadow:none; }
.appearance-preview[data-weapon="laserSword"] .preview-weapon { width:10px;background:linear-gradient(90deg,#fff,var(--weapon-color),#fff);box-shadow:0 0 10px var(--weapon-color),0 0 25px var(--weapon-color); }
.appearance-preview[data-weapon="laserGun"] .preview-weapon { width:76px;height:24px;top:50%;transform:rotate(-8deg);background:linear-gradient(0deg,#161925,var(--weapon-color),#262b3e);clip-path:polygon(0 20%,100% 0,92% 64%,56% 72%,45% 100%,31% 100%,33% 64%,0 60%); }
.equipment-grid { grid-template-columns:repeat(4,1fr); }.four-grid { grid-template-columns:repeat(2,1fr); }.hat-grid,.color-grid { grid-template-columns:repeat(3,1fr); }.ornament-grid{grid-template-columns:repeat(5,1fr)}
.color-grid button { display:flex;align-items:center;justify-content:center;gap:5px;padding:0 5px }.color-grid i{width:8px;height:8px;border-radius:50%;background:#d8e5f4}.color-grid button[data-value="crimson"] i{background:#d84f68}.color-grid button[data-value="azure"] i{background:#54b9db}.color-grid button[data-value="jade"] i{background:#56ba91}.color-grid button[data-value="gold"] i{background:#d6a94e}.color-grid button[data-value="shadow"] i{background:#625d78}
.weapon-badge { position:absolute; top:clamp(85px,10vw,126px); left:clamp(77px,8.6vw,122px); display:flex;align-items:center;gap:8px;padding:5px 9px;border-left:2px solid var(--gold);background:rgba(6,7,16,.48);text-shadow:0 1px 4px #000; }
.weapon-badge span{color:#77829c;font-size:7px;letter-spacing:.12em}.weapon-badge strong{color:#e7edf9;font-size:9px}.weapon-badge small{padding-left:7px;border-left:1px solid rgba(255,255,255,.14);color:#7ceaff;font-size:8px}
.mobile-controls .run { width:46px;height:46px;margin-bottom:6px;border-color:rgba(244,211,117,.42);background:rgba(91,68,26,.58);font-size:16px; }

@media(max-width:700px){.equipment-grid{grid-template-columns:repeat(4,1fr)}.ornament-grid{grid-template-columns:repeat(3,1fr)}.appearance-options{padding:18px}.weapon-badge{display:none}}

/* Lobby, public room browser and character roster */
.entry-card { max-height:88vh; overflow:auto; scrollbar-width:thin; scrollbar-color:#3f4564 transparent; }
.room-title-field { display:grid;grid-template-columns:58px 1fr;align-items:center;gap:7px;margin-bottom:7px;color:#7f89a2;font-size:9px;letter-spacing:.08em; }
.room-title-field input { min-width:0;height:36px;padding:0 10px;border:1px solid rgba(176,193,238,.18);outline:0;background:rgba(1,1,8,.5);color:#fff;font-size:10px; }
.room-title-field input:focus{border-color:#8275d7}
.room-browser { margin-top:10px;padding-top:9px;border-top:1px solid rgba(151,169,213,.13); }
.room-browser-head { display:flex;justify-content:space-between;align-items:center;margin-bottom:6px; }
.room-browser-head strong { color:#9ba8c4;font-size:9px;letter-spacing:.12em; }.room-browser-head button{padding:4px 7px;background:transparent;color:#7785a8;font-size:8px;border:1px solid rgba(150,170,218,.14)}
.room-list { display:grid;gap:5px;max-height:116px;overflow:auto; }
.room-list>p { margin:8px 0;color:#68728a;font-size:9px;text-align:center; }
.room-row { display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;width:100%;min-height:42px;padding:7px 9px;border:1px solid rgba(153,174,224,.14);background:rgba(10,11,24,.64);text-align:left; }
.room-row:hover{border-color:rgba(120,232,255,.38)}.room-row:disabled{cursor:not-allowed;filter:saturate(.35);opacity:.58}
.room-row span{display:grid;min-width:0}.room-row strong{overflow:hidden;color:#dce5f7;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.room-row small{margin-top:2px;color:#68738d;font-size:8px}.room-row b{padding:5px 7px;border-radius:10px;background:rgba(72,99,139,.28);color:#8cecff;font-size:9px}.room-row.is-full b{color:#ff8ba2}
.room-empty{margin:10px 4px;color:#727c96;font-size:9px;text-align:center}
.panel-close-button { position:absolute;z-index:4;top:clamp(18px,3vw,42px);right:clamp(18px,3vw,42px);display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(214,223,255,.28);border-radius:50%;background:rgba(8,8,18,.82);color:#e6ebf8;font-size:25px;box-shadow:0 8px 28px #000; }
.character-grid { grid-template-columns:repeat(2,1fr); }
.character-grid button { display:grid;justify-items:start;gap:1px;padding:8px 10px;text-align:left; }.character-grid button strong{font-size:10px}.character-grid button small{color:#6f7890;font-size:7px}.character-grid button.is-active small{color:#b8b1e6}
.lobby-button{font-size:18px}.result-lobby-button{width:100%;margin-top:8px;min-height:38px;border:1px solid rgba(176,193,238,.2);background:rgba(50,54,83,.48);color:#aeb8cf;font-size:11px}
@media(max-height:700px){.entry-card{max-height:94vh;padding:16px}.room-list{max-height:82px}.network-note{min-height:0;margin:5px 0}.online-divider{margin:8px 0 6px}}