:root {
  color-scheme: dark;
  font-family: "Pretendard", "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif;
  --text: #fff1de;
  --muted: #c5b09c;
  --gold: #f7cb67;
  --line: #c298675c;
  --glass: #1c1512eb;
  --edge: clamp(10px, 2vw, 24px);
  --top: calc(var(--edge) + env(safe-area-inset-top));
  --bottom: calc(var(--edge) + env(safe-area-inset-bottom));
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body { color: var(--text); background: #201712; }
[hidden] { display: none !important; }
button, input { font: inherit; }
button { cursor: pointer; color: inherit; border: 0; background: none; }
button:disabled { cursor: not-allowed; opacity: .48; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
button { -webkit-tap-highlight-color: transparent; }
i[data-icon] { display: inline-flex; flex: none; width: 17px; height: 17px; vertical-align: middle; pointer-events: none; }
i svg { width: 100%; height: 100%; }

.stage { position: relative; isolation: isolate; width: 100%; height: 100%; height: 100dvh; overflow: hidden; }
.stage:focus { outline: none; }
canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.stage::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,#1e1008b8,transparent 24%,transparent 72%,#160e09be),
    radial-gradient(ellipse at center,transparent 60%,#26140953);
}
.entrance {
  position: absolute; z-index: 5; inset: 0; isolation: isolate; overflow: hidden;
  background: #2a1b14bb;
}
.entrance-art { position: absolute; z-index: -2; inset: 0; }
.entrance-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; color: transparent; }
.entrance::before {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, #20140db5, #24180e0f 29%, transparent 69%, #20130cb5 100%),
    radial-gradient(ellipse at 50% 47%, transparent 40%, #21160e50 100%);
}
.entrance-inner {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  height: 100%; padding: calc(clamp(18px, 4.5dvh, 50px) + env(safe-area-inset-top)) 14px
    calc(clamp(24px, 6dvh, 70px) + env(safe-area-inset-bottom));
}
.entrance-logo {
  --logo-size: clamp(45px, min(11vw, 11dvh), 112px);
  position: relative; text-align: center;
  filter: drop-shadow(0 .13em .11em #220910d9) drop-shadow(0 .02em .02em #1b0d13);
  font-size: var(--logo-size);
}
.entrance h1::before, .entrance h1::after {
  content: ""; position: absolute; bottom: .23em; width: .43em; height: .34em;
  background: linear-gradient(#ffe593, #f5a536 50%, #a64727 51%, #7d2c22);
  clip-path: polygon(0 50%, 31% 0, 100% 0, 100% 24%, 43% 24%, 24% 50%, 43% 76%, 100% 76%, 100% 100%, 31% 100%);
  left: -.47em;
}
.entrance h1::after { left: auto; right: -.47em; transform: scaleX(-1); }
.entrance h1 {
  position: relative; margin: 0; font-size: inherit; font-weight: 1000; line-height: .94; letter-spacing: -.085em;
  white-space: nowrap;
}
.entrance h1 span {
  display: block; padding-right: .085em; color: #fff0d1; font-size: .64em;
  -webkit-text-stroke: .078em #2b1720; paint-order: stroke fill;
  text-shadow: 0 .025em #fffcf0, 0 .075em #a28573, 0 .12em #6e4c46, 0 .17em #321725;
}
.entrance h1 span + span {
  margin-top: .03em; color: #ffc95d; font-size: 1em;
  -webkit-text-stroke-color: #35141b;
  text-shadow: 0 -.02em #ffe8aa, 0 .05em #f08b32, 0 .08em #c05022, 0 .12em #892f20, 0 .16em #531a1e, 0 .19em #2f131c;
}
.beta-badge {
  display: table; margin: 15px auto 0; padding: 4px 9px; border: 1px solid #f5bf68a0; border-radius: 5px;
  color: #ffe5b6; background: #3a2619; font-size: 11px; font-weight: 900; letter-spacing: .09em;
  line-height: 1.2;
}
.entrance-deck {
  display: grid; justify-items: stretch; gap: 7px; width: min(556px, 100%);
}
.entrance-controls, .entrance-actions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }
.entrance-actions:has(#spectate-market[hidden]) .enter-market { grid-column: 1 / -1; }
.market-hours-card, .queue-card {
  min-width: 0; min-height: 56px; border: 1px solid #e2a7669c; border-radius: 9px;
  background: #251810f5; box-shadow: 0 3px 14px #170c08a0;
}
.market-hours-card { padding: 7px 9px; }
.market-hours-heading { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: space-between; gap: 2px 7px; }
.market-hours-heading strong { color: #fff0d8; font-size: 12px; }
.market-hours-heading small, .watch-hours > small { color: #e4ccb2; font-size: 10px; }
.market-hours-list { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 4px; list-style: none; padding: 0; margin: 5px 0 0; }
.market-hours-list li { display: grid; grid-template-columns: 1fr; gap: 1px; padding: 3px 2px; border-radius: 4px; background: #493021; text-align: center; }
.market-hours-list span { color: #e4ccb2; font-size: 10px; }
.market-hours-list time { color: #ffe09b; font-size: 13px; font-weight: 850; font-variant-numeric: tabular-nums; }
.queue-card { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 11px; }
.queue-card div { min-width: 0; }
.queue-title { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.queue-full { padding: 2px 5px; border-radius: 4px; color: #ffdcaa; background: #6c3b2b; font-size: 10px; font-weight: 850; white-space: nowrap; }
#queue-heading, #queue-detail { display: block; }
#queue-heading { color: #ffdf9d; font-size: 13px; font-weight: 900; }
#queue-detail { margin-top: 2px; color: #e4ccb2; font-size: 10px; word-break: keep-all; }
#queue-countdown { font-size: clamp(18px, 4.6vw, 24px); font-variant-numeric: tabular-nums; color: #f8c667; white-space: nowrap; }
.queue-card[data-state=queue] { border-color: #ffcf79; box-shadow: 0 0 18px #f6b0475c; }
.queue-card[data-state=open] #queue-countdown { color: #c9dea5; }
.queue-card[data-state=full] { border-color: #e8a473; }
.entrance-notice {
  justify-self: center; margin: 0; padding: 5px 9px; border-radius: 6px; background: #2d1c13f5; color: #ffe5b2;
  font-size: 12px; font-weight: 850; text-align: center; word-break: keep-all;
}
.enter-market {
  position: relative; display: grid; place-items: center;
  min-width: min(250px, 100%); min-height: 57px; padding: 9px 42px;
  border: 2px solid #ffe0a0; border-radius: 7px;
  color: #331611; background: linear-gradient(180deg, #ffda77 0%, #fbb550 51%, #ef8d35 100%);
  box-shadow: inset 0 0 0 2px #92472480, 0 5px #984623, 0 8px #2b1016, 0 10px 35px #190912c9;
  text-shadow: 0 1px #ffdc89; font-size: 19px; font-weight: 950; white-space: nowrap;
  transition: transform .16s ease, filter .16s ease;
}
.enter-market:hover { transform: translateY(-2px); filter: brightness(1.13); }
.enter-market:active { transform: translateY(2px); }
.enter-market:disabled { opacity: 1; filter: none; transform: none; background: #4d392b; color: #e8c9a1; text-shadow: none; border-color: #9a7853; box-shadow: 0 4px #261a14, 0 7px 20px #180c08a0; }
.enter-market i { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); }
.entrance-actions .enter-market { min-width: 0; min-height: 51px; padding-inline: 12px 30px; }
.entrance-actions .enter-market:disabled { padding-inline: 12px; }
.entrance-actions .enter-market:disabled i { visibility: hidden; }
.watch-market { min-width: 0; padding: 7px 11px; font-size: 14px; font-weight: 850; white-space: nowrap; }
.watch-market i { color: var(--gold); }
.watch-summary { display: flex; justify-content: space-between; gap: 8px; margin: 3px 0 9px; color: var(--gold); font-size: 13px; }
.watch-stock { min-height: 0; overflow: auto; }
.watch-stock .item { padding: 6px 0; }
.watch-stock .item-pic { width: 30px; height: 30px; }
.watch-soldout { color: #e6a68b; }
#watch-ui { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
#watch-ui button, .watch-panel { pointer-events: auto; }
.watch-top { position: absolute; top: var(--top); left: var(--edge); right: var(--edge); }
.watch-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }
.watch-brand { display: grid; gap: 2px; padding: 8px 11px; }
.watch-brand span { color: #f8cc75; font-size: 10px; font-weight: 900; }
.watch-brand strong { font-size: 15px; }
.watch-brand small, .watch-queue small { color: #ebd4b8; font-size: 11px; word-break: keep-all; }
.watch-header-actions, .watch-views { display: flex; gap: 5px; }
.watch-header-actions .icon-btn { width: 35px; height: 35px; }
.watch-control { min-height: 35px; padding: 6px 9px; white-space: nowrap; font-size: 12px; font-weight: 850; }
.watch-control[aria-pressed=true] { border-color: #e5b168; color: #ffe3af; background: #59402a; }
.watch-side { display: grid; gap: 6px; justify-items: start; margin-top: 6px; }
.watch-queue { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 11px; border-color: #e5b168; }
.watch-queue [role=status] { display: grid; gap: 3px; }
.watch-queue strong { color: #ffe09b; font-size: 15px; }
.watch-queue .watch-control { min-height: 30px; font-size: 11px; }
.watch-hours { pointer-events: auto; padding: 6px 8px; }
.watch-hours summary { cursor: pointer; color: #ffe09b; font-size: 11px; font-weight: 850; }
.watch-hours[open] { width: min(225px, calc(100vw - 2 * var(--edge))); }
.watch-hours > small { display: block; margin-top: 4px; }
.watch-panel { position: absolute; display: flex; flex-direction: column; top: calc(var(--top) + 45px); right: var(--edge); bottom: calc(var(--bottom) + 49px); width: min(335px, 40vw); padding: 12px; border: 1px solid #ae8051; border-radius: 9px; background: #231911ee; }
.watch-panel #watch-refresh { align-self: flex-start; margin-top: 6px; }
.watch-footer { position: absolute; bottom: var(--bottom); left: var(--edge); right: var(--edge); display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.watch-feedback { position: absolute; left: var(--edge); bottom: calc(var(--bottom) + 43px); max-width: calc(100% - 2 * var(--edge)); margin: 0; padding: 6px 9px; font-size: 12px; }
@media (max-width: 640px), (max-height: 480px) {
  .entrance-logo { --logo-size: clamp(36px, min(15vw, 13dvh), 72px); }
  .enter-market { min-width: min(220px, 100%); min-height: 48px; font-size: 17px; }
}
@media (max-width: 530px) {
  .entrance-deck { width: min(340px, 100%); gap: 7px; }
  .entrance-controls { grid-template-columns: 1fr; gap: 5px; }
  .market-hours-card, .queue-card { min-height: 45px; }
  .entrance-actions .enter-market { padding-inline: 9px 25px; font-size: clamp(13px, 4vw, 15px); }
  .entrance-actions .enter-market i { right: 6px; }
  .watch-market { font-size: 12px; }
}
@media (max-width: 640px) {
  .watch-brand { padding: 6px 7px; }
  .watch-brand strong { font-size: 12px; }
  .watch-control { padding: 5px 7px; font-size: 11px; }
  .watch-header-actions .watch-control i { display: none; }
  .watch-header-actions .icon-btn { width: 32px; }
  .watch-panel { top: auto; bottom: calc(var(--bottom) + 43px); left: var(--edge); width: auto; max-height: 38dvh; }
}
@media (max-height: 440px) {
  .entrance-inner { padding-top: max(10px, env(safe-area-inset-top)); padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .entrance-deck { gap: 6px; }
  .market-hours-card, .queue-card { min-height: 43px; }
}
@media (prefers-reduced-motion: reduce) { .enter-market { transition: none; } }
.topbar, .hud, .stage-bottom { position: absolute; z-index: 4; pointer-events: none; }
.topbar > *, .stage-bottom > * { pointer-events: auto; }
.topbar {
  top: var(--top); left: var(--edge); right: var(--edge);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.brand, .location, .glass, .live, .market-stats, .keys, .stage-hint {
  border: 1px solid var(--line); background: var(--glass); border-radius: 10px;
  box-shadow: 0 3px 15px #1a100b58;
}
.brand { display: flex; align-items: center; gap: 9px; padding: 7px 12px 7px 7px; }
.brand strong, .brand small { display: block; white-space: nowrap; }
.brand strong { font-size: 16px; font-weight: 900; letter-spacing: -.055em; }
.brand small { margin-top: 3px; color: #d0aa7d; font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.location { display: flex; align-items: center; gap: 6px; margin-top: 7px; padding: 8px 11px; color: #ead6bd; font-size: 11px; font-weight: 800; }
.location i { color: var(--gold); width: 14px; height: 14px; }
.location span { color: #ba9977; }
.nav { display: flex; gap: 5px; align-items: center; margin-top: 4px; }
.navitem, .icon-btn { display: flex; align-items: center; justify-content: center; height: 39px; gap: 6px; }
.navitem { padding: 0 10px; white-space: nowrap; font-size: 11px; font-weight: 800; }
.icon-btn { width: 39px; padding: 0; }
.glass:hover { background: #503326; }
.navitem i { color: var(--gold); }
.exit-market { border-color: #be8b5d; }
.entrance-nav {
  position: absolute; z-index: 2; top: var(--top); right: var(--edge);
  display: flex; justify-content: center; gap: 5px;
}
.entrance-nav .navitem[aria-expanded=true] { border-color: #d7a766; background: #523723; }
.lobby-chat {
  position: absolute; z-index: 3; top: calc(var(--top) + 46px); right: var(--edge);
  display: grid; grid-template-rows: auto auto minmax(36px, 1fr) auto auto;
  gap: 8px; width: min(340px, calc(100% - 2 * var(--edge))); max-height: min(345px, calc(100dvh - var(--top) - 56px));
  padding: 12px; border: 1px solid #d2a065; border-radius: 10px;
  background: #251910fa; box-shadow: 0 10px 30px #170c08bf;
}
.lobby-chat header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.lobby-chat h2 { margin: 0; font-size: 16px; color: #ffe6ba; }
.lobby-chat header p { margin: 3px 0 0; color: #dac3ac; font-size: 11px; }
.lobby-chat header button { width: 31px; height: 31px; flex: none; }
.lobby-chat-empty, .lobby-chat-error { margin: 0; color: #e4cbb2; font-size: 12px; line-height: 1.45; }
.lobby-chat-error { color: #ffc09d; }
.lobby-chat-feed { grid-row: 3; display: grid; align-content: start; gap: 4px; min-height: 95px; overflow: auto; }
.lobby-chat-feed > div { padding: 5px 7px; border-radius: 5px; background: #493122; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.lobby-chat-feed b { color: #ffd593; margin-right: 6px; }
.lobby-chat-feed .own-message { background: #4a3b25; }
.lobby-chat-form { grid-row: 4; display: flex; gap: 6px; min-width: 0; }
.lobby-chat-form input { flex: 1; min-width: 0; padding: 7px; border: 1px solid #a27a55; border-radius: 6px; background: #1b120d; color: var(--text); font-size: 16px; }
.lobby-chat-form button { white-space: nowrap; }
.lobby-chat-error { grid-row: 5; }
@media (max-width: 1024px) {
  .entrance-nav { left: var(--edge); }
  .entrance-inner { padding-top: calc(var(--top) + 46px); }
}
@media (max-width: 640px) {
  .entrance-nav .navitem { width: auto; height: 36px; padding: 0 7px; gap: 4px; }
  .entrance-nav .navitem span { display: inline; }
  .entrance-nav i { width: 13px; height: 13px; }
}
#nickname { max-width: 112px; overflow: hidden; text-overflow: ellipsis; }
.hud { top: calc(var(--top) + 64px); left: var(--edge); display: grid; gap: 6px; justify-items: start; }
.live, .market-stats { display: flex; align-items: center; gap: 7px; padding: 7px 9px; font-size: 11px; }
.live { color: #e1cbb0; }
.live i { width: 14px; height: 14px; }
.lamp, .shop-live > span { width: 6px; height: 6px; border-radius: 50%; background: #8cda9f; box-shadow: 0 0 8px #76d78b80; }
.live.offline .lamp { background: #f5bd64; box-shadow: none; }
.divider { width: 1px; height: 12px; background: #5f4735; }
.market-stats { gap: 10px; }
.cash, .stock-status { display: flex; align-items: center; gap: 4px; }
.cash { color: var(--gold); }
.cash b { font-size: 15px; }
.stock-status { border-left: 1px solid #5f4735; padding-left: 9px; color: var(--muted); }
.stock-status i { width: 13px; height: 13px; }
.stock-status strong { color: var(--text); font-variant-numeric: tabular-nums; }

.markers { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.marker, .speech, .peer-label { position: absolute; transform: translate(-50%, -100%); }
.marker, .speech { pointer-events: auto; }
.marker {
  padding: 6px 9px; border: 1px solid #f6c66ca0; border-radius: 6px;
  background: #302016ed; color: #fff0ce; font-size: 11px; font-weight: 900; white-space: nowrap;
}
.marker:hover { background: #61442d; }
.marker span { color: var(--gold); }
.junk-marker { border-color: #c8a6e2bc; }
.junk-marker span { color: #e1b9ff; }
.speech {
  width: max-content; max-width: min(245px, 59vw); text-align: left;
  padding: 8px 11px; border: 1px solid #d6a16b; border-radius: 10px;
  color: #372416; background: #fff0cf; box-shadow: 0 5px 16px #1d110967;
  font-size: 12px; font-weight: 700; line-height: 1.42; word-break: keep-all;
}
.speech::after {
  content: ""; position: absolute; left: calc(50% - 5px); bottom: -5px;
  width: 9px; height: 9px; background: inherit; border-right: 1px solid #d6a16b;
  border-bottom: 1px solid #d6a16b; transform: rotate(45deg);
}
.speech-speaker { display: flex; align-items: center; gap: 5px; margin-bottom: 3px; color: #9a4529; font-size: 11px; }
.speech-speaker img { border-radius: 5px; }
.speech-speaker i { margin-left: auto; width: 13px; height: 13px; }
.speech-reopen { display: block; width: fit-content; margin-top: 5px; padding: 2px 5px; border-radius: 4px; color: #793c22; background: #ecd8ac; font-size: 10px; font-weight: 900; }
.soldout-tag { margin-left: auto; padding: 2px 5px; border-radius: 4px; color: #fff4dd; background: #a74429; white-space: nowrap; font-size: 9px; }
.speech[data-state=soldout] { border-color: #ffb56d; background: #ffe1a9; box-shadow: 0 0 0 2px #cf713b65, 0 4px 23px #ed87488a; }
.speech[data-state=soldout] .speech-speaker i, .speech[data-state=loading] .speech-speaker i { display: none; }
.speech.soldout-pop { transform-origin: 50% 100%; animation: soldout-pop .82s ease-out; }
@keyframes soldout-pop {
  0% { transform: translate(-50%,-100%) scale(.58) rotate(-5deg); box-shadow: 0 0 0 0 #ffd788c0; }
  28% { transform: translate(-50%,-100%) scale(1.24) rotate(3deg); }
  48% { transform: translate(-50%,-100%) scale(.94) rotate(-2deg); }
  70% { transform: translate(-50%,-100%) scale(1.04); }
  100% { transform: translate(-50%,-100%) scale(1); box-shadow: 0 0 0 22px #ffd78800; }
}
.soldout-scene {
  --impact-x: 50%;
  --impact-y: 55%;
  --burst-size: min(31vw, 285px, 38vh);
  position: absolute; z-index: 3; inset: 0; pointer-events: none;
}
.soldout-rays {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at var(--impact-x) var(--impact-y), #ffbb5b69 0%, #a73d2c48 38%, #2d1007b8 83%);
  animation: soldout-light 2.4s ease-out both;
}
.soldout-impact { position: absolute; left: var(--impact-x); top: var(--impact-y); width: 0; height: 0; }
.soldout-impact::before {
  content: ""; position: absolute; left: 0; top: 0; width: calc(var(--burst-size) * 2.4); aspect-ratio: 1;
  background: repeating-conic-gradient(from 5deg, #ffe4a63d 0deg 6deg, transparent 7deg 24deg);
  border-radius: 50%; mask-image: radial-gradient(circle, #000 12%, #0009 44%, transparent 72%);
  animation: soldout-rays 1.9s ease-out both;
}
.soldout-ring {
  position: absolute; width: calc(var(--burst-size) * 1.7); aspect-ratio: 1;
  border: 2px solid #ffe29d; border-radius: 50%; box-shadow: 0 0 24px #ffd178bd, inset 0 0 18px #ffd17870;
  animation: soldout-ring 1.12s ease-out both;
}
.soldout-sparks span {
  position: absolute; top: 0; left: 0; color: #ffe49d; text-shadow: 0 0 10px #fbb158;
  font-size: clamp(14px, 3.1vw, 32px); line-height: 1;
  animation: soldout-spark 1.48s .08s cubic-bezier(.11,.69,.33,1) both;
}
.soldout-sparks span:nth-child(3n) { color: #fff0be; font-size: clamp(13px, 2.4vw, 23px); }
.soldout-seal {
  position: absolute; display: grid; justify-items: center; gap: 5px; width: max-content; min-width: min(270px, 75vw);
  padding: 10px clamp(14px, 3vw, 32px) 12px; border: 5px double #ffde8d; border-radius: 11px;
  background: linear-gradient(151deg, #b54832, #722117 76%);
  color: #fff0bc; box-shadow: 0 0 0 2px #542214, 0 9px 0 #33160fcf, 0 0 44px #f2a758a9;
  text-align: center; white-space: nowrap; animation: soldout-stamp 2.4s cubic-bezier(.2,.7,.32,1) both;
}
.soldout-seal strong {
  font-size: clamp(44px, 9.2vw, 104px); font-weight: 1000; letter-spacing: -.095em; line-height: .98;
  padding-right: .085em; text-shadow: 0 3px #572419, 0 5px #562217;
}
.soldout-scene-label { color: #ffe3a8; font-size: 11px; font-weight: 900; letter-spacing: .13em; }
.soldout-scene-next { padding-top: 4px; border-top: 1px solid #f5cb78a6; color: #ffdfa0; font-size: 11px; font-weight: 800; }
@keyframes soldout-light {
  0%, 100% { opacity: 0; }
  16%, 48% { opacity: .8; }
}
@keyframes soldout-stamp {
  0% { opacity: 0; transform: translate(-50%,-50%) rotate(-13deg) scale(1.65); }
  11% { opacity: 1; transform: translate(-50%,-50%) rotate(-8deg) scale(.86); }
  21% { transform: translate(-50%,-50%) rotate(-7deg) scale(1.08); }
  30%, 79% { opacity: 1; transform: translate(-50%,-50%) rotate(-6deg) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-47%) rotate(-4deg) scale(.96); }
}
@keyframes soldout-ring {
  0% { opacity: .95; transform: translate(-50%,-50%) scale(.14); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.25); }
}
@keyframes soldout-rays {
  0% { opacity: 0; transform: translate(-50%,-50%) rotate(-10deg) scale(.55); }
  24% { opacity: .92; }
  100% { opacity: 0; transform: translate(-50%,-50%) rotate(9deg) scale(1.15); }
}
@keyframes soldout-spark {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.1); }
  18% { opacity: 1; }
  65% { opacity: 1; transform: translate(-50%,-50%) translate(calc(var(--x) * var(--burst-size)),calc(var(--y) * var(--burst-size))) rotate(var(--spin)) scale(.9); }
  100% { opacity: 0; transform: translate(-50%,-50%) translate(calc(var(--x) * var(--burst-size) * 1.13),calc(var(--y) * var(--burst-size) * 1.13)) rotate(var(--spin)) scale(.4); }
}
@media (min-width: 641px) {
  .stage:has(.shop:not([hidden])) .soldout-scene { --impact-x: 43%; }
}
@media (max-width: 640px) {
  .soldout-scene { --impact-y: 43%; --burst-size: min(37vw, 210px); }
  .soldout-seal { min-width: min(215px, 75vw); }
}
@media (max-width: 360px) {
  .topbar .navitem, .topbar .nav .icon-btn { width: 27px; }
  .topbar .brand img { width: 24px; height: 24px; }
  .topbar .brand strong { font-size: 10px; }
  .entrance-nav .navitem { padding: 0 5px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .speech.soldout-pop, .soldout-seal { animation: none; }
  .soldout-seal { transform: translate(-50%,-50%) rotate(-6deg); }
  .soldout-rays, .soldout-impact::before, .soldout-ring, .soldout-sparks { display: none; }
}
.peer-label { padding: 2px 5px; border: 1px solid #92c48f85; border-radius: 4px; color: #eaf7e4; background: #1e2b22e8; font-size: 10px; white-space: nowrap; }
.player-speech {
  position: absolute; z-index: 1; transform: translate(-50%, -100%); width: max-content;
  max-width: min(205px, 55vw); padding: 6px 9px; border: 1px solid #8cbdad; border-radius: 8px;
  background: #d8f3e5; color: #18352f; box-shadow: 0 4px 12px #151a1680;
  font-size: 12px; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere;
}
.player-speech::after {
  content: ""; position: absolute; left: calc(50% - 4px); bottom: -4px;
  width: 7px; height: 7px; transform: rotate(45deg); background: inherit;
  border-right: 1px solid #8cbdad; border-bottom: 1px solid #8cbdad;
}
.player-speech.own-speech { background: #e5e9ff; color: #343364; border-color: #b4b0dc; }
.player-speech.own-speech::after { border-color: #b4b0dc; }
.watch-speech { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.rare-pickups { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.rare-pickup {
  position: absolute; display: flex; align-items: center; gap: 7px; width: max-content; max-width: calc(100% - 16px);
  transform: translate(-50%, -100%); padding: 5px 8px 5px 5px; border: 1px solid #ffd77f; border-radius: 8px;
  color: #fff4db; background: linear-gradient(115deg, #63402a, #302119); box-shadow: 0 0 18px #ffb94d9c, 0 4px 12px #1c100db0;
  animation: pickup-pop .45s ease-out both;
}
.rare-pickup::after {
  content: ""; position: absolute; left: calc(50% - 4px); bottom: -5px; width: 8px; height: 8px;
  transform: rotate(45deg); background: #462d20; border-right: 1px solid #ffd77f; border-bottom: 1px solid #ffd77f;
}
.rare-pickup .item-pic { width: 32px; height: 32px; border-color: #f8c668; }
.rare-pickup small, .rare-pickup strong { display: block; }
.rare-pickup small { color: #ffdc89; font-size: 10px; font-weight: 900; }
.rare-pickup strong { font-size: 12px; }
@keyframes pickup-pop {
  from { opacity: 0; transform: translate(-50%, -83%) scale(.74); }
  65% { transform: translate(-50%, -105%) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { .rare-pickup { animation: none; } }
.chat-feed {
  position: absolute; z-index: 3; top: calc(var(--top) + 145px); left: var(--edge); width: min(246px, 52vw);
  display: grid; gap: 4px; justify-items: start; pointer-events: none;
}
.chat-feed > div { max-width: 100%; padding: 5px 7px; border: 1px solid #7197899c; border-radius: 6px; color: #eff8f0; background: #21352dec; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.chat-feed b { margin-right: 5px; color: #a9e0c8; }
.chat-feed .own-message { border-color: #9592bb9c; background: #2d3047ec; }
.chat-feed .own-message b { color: #d2d5fc; }
.world-error { position: absolute; z-index: 3; top: 40%; left: 50%; width: min(85%, 380px); transform: translateX(-50%); padding: 16px; text-align: center; background: #281c16; border-radius: 10px; }
.world-error p { margin: 0 0 10px; font-size: 13px; }

.stage-bottom {
  bottom: var(--bottom); left: var(--edge); right: var(--edge);
  display: flex; align-items: end; justify-content: space-between; gap: 8px;
}
.keys, .interact, .stage-hint { display: flex; align-items: center; gap: 6px; padding: 7px 9px; font-size: 11px; white-space: nowrap; }
.keys { color: #e7ccb0; }
kbd { display: inline-grid; place-items: center; min-width: 21px; height: 22px; padding: 0 3px; border: 1px solid #755b46; border-bottom-width: 2px; border-radius: 4px; font: 800 11px system-ui; background: #34261e; }
.key-e { margin-left: 6px; }
.interact { font-weight: 900; }
.interact kbd { color: #21160e; background: var(--gold); border-color: #c58c3d; }
.interact i { color: var(--gold); width: 14px; height: 14px; }
.stage-hint { pointer-events: none; color: #ead8c0; }
.hint-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.touch { display: none; }
.chat-controls { position: absolute; z-index: 4; bottom: var(--bottom); left: 50%; transform: translateX(-50%); }
.chat-toggle { display: flex; align-items: center; gap: 5px; padding: 6px 8px; white-space: nowrap; font-size: 11px; font-weight: 900; }
.chat-toggle i { color: #b2e3ce; }
.chat-form {
  position: absolute; left: 50%; bottom: 43px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px; width: min(390px, calc(100vw - 24px));
  padding: 6px; border: 1px solid #91bba8a8; border-radius: 9px; background: #1e2722f5; box-shadow: 0 5px 20px #13130b95;
}
.chat-form input { min-width: 0; flex: 1; padding: 7px; border: 1px solid #6c8879; border-radius: 6px; background: #151d18; color: #ecf9ef; font-size: 14px; }
.chat-form .icon-btn { width: 31px; height: 31px; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.shop {
  position: absolute; z-index: 3; top: calc(var(--top) + 64px); right: var(--edge);
  width: min(344px, 38vw); max-height: calc(100dvh - var(--top) - var(--bottom) - 125px);
  display: flex; flex-direction: column; padding: 15px; overflow: hidden;
  border: 1px solid #c78e5f90; border-radius: 14px; background: #231913f5; box-shadow: 0 12px 35px #170c098c;
}
.shop-head, .modal-head { display: flex; justify-content: space-between; align-items: start; gap: 10px; }
.shop-head h2, .modal-head h2 { margin: 4px 0 8px; font-size: 22px; letter-spacing: -.055em; }
.shop-head .icon-btn, .modal-head .icon-btn { width: 32px; height: 32px; }
.kicker { display: flex; align-items: center; gap: 5px; color: var(--gold); font-size: 9px; font-weight: 900; letter-spacing: .16em; }
.kicker > span:first-child { width: 6px; height: 6px; transform: rotate(45deg); background: var(--gold); }
.shop-summary { display: flex; justify-content: space-between; gap: 6px; align-items: center; padding: 0 0 7px; color: var(--muted); font-size: 11px; }
.shop-summary b { color: var(--gold); font-variant-numeric: tabular-nums; }
.shop-live { display: flex; align-items: center; gap: 5px; }
.shop-live #sale-label { color: inherit; font-weight: 500; }
.shop-filters { display: flex; align-items: center; gap: 5px; padding: 0 0 7px; }
.shop-filters button { padding: 5px 8px; border: 1px solid #644838; border-radius: 6px; color: var(--muted); background: #39271d; font-size: 11px; }
.shop-filters button[aria-pressed=true] { color: #ffe6ac; border-color: #bd8a54; background: #574029; }
.shop-closed { display: grid; gap: 6px; padding: 14px 10px; text-align: center; border: 1px dashed #b58c5f80; border-radius: 8px; background: #45302261; }
.shop-closed strong { color: var(--gold); font-size: 17px; }
.shop-closed p { margin: 0; color: var(--muted); font-size: 11px; }
.shop-soldout { border-color: #e9a45caa; background: #60392289; }
.shop-soldout p span { color: var(--muted); font-size: 9px; }
.daily-rare { margin-bottom: 7px; padding: 6px 7px; border: 1px solid #d9a2628c; border-radius: 6px; color: #ffdd91; background: #543923; font-size: 10px; font-weight: 900; }
.rare-tag { display: inline-flex; align-items: center; gap: 3px; margin-left: 5px; padding: 1px 5px; border-radius: 4px; background: #f1c368; color: #382411; font-size: 9px; font-weight: 900; vertical-align: 1px; white-space: nowrap; }
.rare-tag > span { color: #805019; }
.closed-tag { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.shop-items { overflow: auto; overscroll-behavior: contain; }
.shop-feedback { margin: 0; font-size: 11px; line-height: 1.4; color: var(--gold); }
.shop-feedback:not(:empty) { padding-top: 7px; }
.test-effect { flex: none; margin-top: 8px; padding: 6px 8px; border: 1px dashed #c68c5a; border-radius: 6px; color: #f6d099; background: #412c20; font-size: 11px; font-weight: 900; }
.test-effect:hover, .test-effect[aria-pressed=true] { background: #694324; }
.item { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid #4b3528; }
.item-pic { display: grid; place-items: center; flex: none; width: 39px; height: 39px; border-radius: 8px; background: #3d2c22; font-size: 21px; }
.item.rare-item, .shop .item.rare-item { margin: 3px 0; padding: 7px 8px; border: 1px solid #c49352; border-radius: 7px; background: linear-gradient(115deg, #5b3c26, #34261e 70%); }
@property --rare-border-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.rare-item .item-pic {
  position: relative; width: 42px; height: 42px; border: 2px solid transparent; border-radius: 8px;
  background: linear-gradient(#705034, #402b22) padding-box,
    conic-gradient(from var(--rare-border-angle, 0deg), #8b5026 0%, #e3a84d 15%, #fff3c1 27%, #f7cc67 36%, #945427 52%, #e1a546 70%, #fff0b5 82%, #8b5026) border-box;
  box-shadow: 0 0 0 1px #ffd77f76, 0 0 12px #ffb84d7a, inset 0 0 8px #e8ae5057;
  animation: rare-border 3.6s linear infinite;
}
.rare-item .item-pic::before, .rare-item .item-pic::after {
  content: "✦"; position: absolute; z-index: 1; color: #fff1b6; text-shadow: 0 0 7px #ffb847;
  font-size: 15px; line-height: 1; animation: rare-glint 1.7s ease-in-out infinite alternate;
}
.rare-item .item-pic::before { top: -6px; right: -6px; }
.rare-item .item-pic::after { bottom: -5px; left: -5px; font-size: 11px; animation-delay: -.9s; }
@keyframes rare-border { to { --rare-border-angle: 360deg; } }
@keyframes rare-glint { from { transform: scale(.72); opacity: .75; } to { transform: scale(1.12); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .rare-item .item-pic, .rare-item .item-pic::before, .rare-item .item-pic::after { animation: none; }
}
.rare-item .item-info strong { color: #ffe3ac; }
.swatch { width: 24px; height: 23px; border-radius: 3px; border: 1px solid #ffeed85c; background-color: var(--cloth); transform: rotate(-9deg); box-shadow: 2px 3px #1d1510a0; }
.swatch.stripe { background-image: repeating-linear-gradient(115deg, transparent 0 5px, var(--ink) 5px 7px); }
.swatch.dot { background-image: radial-gradient(circle, var(--ink) 18%, transparent 27%); background-size: 8px 8px; }
.swatch.flower { background-image: radial-gradient(ellipse, var(--ink) 21%, transparent 27%), radial-gradient(ellipse, var(--ink) 19%, transparent 26%); background-size: 9px 9px; background-position: 0 0, 4px 4px; }
.swatch.check { background-image: repeating-linear-gradient(0deg, transparent 0 4px, var(--ink) 4px 5px), repeating-linear-gradient(90deg, transparent 0 4px, var(--ink) 4px 5px); }
.swatch.wave { background-image: repeating-radial-gradient(ellipse at 40% 115%, transparent 0 4px, var(--ink) 4px 5px, transparent 5px 8px); }
.swatch.paisley { background-image: radial-gradient(ellipse at 38% 31%, var(--ink) 12%, transparent 21%), radial-gradient(ellipse at 63% 61%, var(--ink) 19%, transparent 30%); background-size: 12px 12px; }
.item-info { min-width: 0; flex: 1; }
.item-info strong, .item-info small { display: block; }
.item-info strong { font-size: 13px; }
.item-info small { margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.item-price { color: var(--gold); font-size: 12px; font-weight: 800; white-space: nowrap; }
.primary { padding: 6px 8px; border-radius: 6px; font-size: 11px; font-weight: 900; white-space: nowrap; }
.primary { color: #26180f; background: var(--gold); border: 1px solid #f4bb5e; }
.primary:hover { background: #ffe19a; }
.empty { padding: 15px 0; text-align: center; color: var(--muted); font-size: 13px; }

dialog { width: min(500px, calc(100% - 28px)); max-height: 85dvh; padding: 17px; color: var(--text); background: #241b16; border: 1px solid #a3724e; border-radius: 14px; box-shadow: 0 16px 75px #080504b0; }
dialog::backdrop { background: #130e0bc9; backdrop-filter: blur(3px); }
.modal-note { margin: 0 0 8px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.rank-list { padding: 0; margin: 0; list-style: none; }
.rank-row { display: flex; align-items: center; gap: 7px; padding: 7px 0; border-bottom: 1px solid #493427; font-size: 12px; }
.rank-pos { width: 17px; text-align: center; font-weight: 900; color: var(--gold); }
.rank-face { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 6px; color: #ffd29a; background: #503b2b; }
.rank-face i { width: 14px; height: 14px; }
.rank-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-name small { margin-left: 4px; color: var(--gold); }
.rank-num { color: var(--gold); font-weight: 900; white-space: nowrap; }
.rank-num small { color: var(--muted); font-size: 10px; font-weight: 500; }
.profile-tabs { display: flex; gap: 6px; margin: 1px 0 13px; }
.profile-tabs button { display: flex; align-items: center; gap: 5px; padding: 7px 9px; border: 1px solid #644838; border-radius: 7px; color: var(--muted); background: #39271d; font-size: 12px; font-weight: 800; }
.profile-tabs button[aria-pressed=true] { color: #ffe6ac; border-color: #bd8a54; background: #574029; }
.profile-tabs i { width: 14px; height: 14px; }
.profile-form fieldset { min-width: 0; padding: 0; margin: 0; border: 0; }
.profile-editor { display: grid; grid-template-columns: minmax(100px, .78fr) minmax(0, 1fr); gap: 12px; }
.avatar-card {
  display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 0; padding: 5px 6px 8px;
  border: 1px solid #84603f; border-radius: 10px; background: radial-gradient(ellipse at 52% 44%, #704d35, #32241b 76%);
}
.avatar-card canvas { position: static; display: block; width: 100%; height: auto; max-width: 190px; }
.wardrobe-label { margin: 0 0 5px; color: #f1d19f; font-size: 11px; font-weight: 850; text-align: center; }
#rotate-avatar { display: flex; align-items: center; gap: 4px; padding: 5px 6px; font-size: 10px; white-space: nowrap; }
#rotate-avatar i { width: 13px; height: 13px; }
.profile-choices { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 3px; }
.profile-choices label { margin-top: 3px; color: var(--muted); font-size: 11px; }
.profile-choices input, .profile-choices select { width: 100%; min-width: 0; padding: 6px 7px; border: 1px solid #684833; border-radius: 6px; background: #1c1512; color: var(--text); font: inherit; font-size: 13px; }
.profile-choices select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.wardrobe-note { margin: 9px 0; font-size: 11px; }
.profile-save { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.profile-save .primary { padding: 8px 12px; }
.dialog-feedback { margin: 0; padding-top: 6px; color: var(--gold); font-size: 12px; }
#toast { position: fixed; z-index: 5; bottom: calc(var(--bottom) + 45px); left: 50%; max-width: 88vw; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; background: #36271d; border: 1px solid #bc9052; border-radius: 8px; padding: 8px 11px; color: #fff0d7; font-size: 12px; transition: .18s; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
body:has(#chat-form:not([hidden])) #toast { bottom: calc(var(--bottom) + 92px); }

@media (max-width: 850px) {
  .location { display: none; }
}
@media (pointer: coarse), (max-width: 640px) {
  .stage, dialog { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  input, textarea { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
  button, summary { touch-action: manipulation; }
  .stage img { pointer-events: none; }
  .keys { display: none; }
  .touch { display: grid; grid-template-columns: repeat(3, 37px); grid-template-rows: repeat(2, 33px); gap: 3px; touch-action: none; }
  .touch button { background: var(--glass); border: 1px solid #af845bba; border-radius: 6px; color: #ffe0b5; font-size: 13px; touch-action: none; }
  .touch button:active { background: #735134; }
  .touch [data-dir=w] { grid-column: 2; }
  .touch [data-dir=a] { grid-column: 1; }
  .touch [data-dir=s] { grid-column: 2; }
  .touch [data-dir=d] { grid-column: 3; }
  #toast { bottom: calc(var(--bottom) + 74px); }
}
@media (max-width: 640px) {
  .topbar { gap: 5px; }
  .brand { gap: 5px; padding: 5px 7px 5px 5px; }
  .brand img { width: 29px; height: 29px; }
  .brand strong { font-size: 12px; }
  .brand small { font-size: 6px; letter-spacing: .07em; }
  .nav { margin-top: 1px; gap: 3px; }
  .navitem, .nav .icon-btn { width: 31px; height: 36px; padding: 0; }
  .navitem span { display: none; }
  .hud { top: calc(var(--top) + 45px); }
  .live, .market-stats { padding: 5px 7px; font-size: 10px; }
  .cash b { font-size: 13px; }
  .stage-hint { padding: 6px; font-size: 9px; }
  .shop { top: auto; left: var(--edge); width: auto; bottom: calc(var(--bottom) + 76px); max-height: min(43dvh, 350px); padding: 10px; }
  .shop-head h2 { font-size: 18px; margin-bottom: 5px; }
  .shop .item { padding: 6px 0; }
  .shop .item-pic { width: 32px; height: 32px; font-size: 17px; }
  .speech { font-size: 11px; padding: 6px 8px; }
  .chat-controls { left: auto; right: var(--edge); bottom: calc(var(--bottom) + 39px); transform: none; }
  .chat-feed { top: calc(var(--top) + 113px); }
  .chat-feed > div { font-size: 10px; }
  .chat-toggle { padding: 6px 8px; }
  .chat-toggle kbd { display: none; }
  .chat-form { left: auto; right: 0; bottom: 36px; transform: none; }
  body:has(#chat-form:not([hidden])) #toast { bottom: calc(var(--bottom) + 124px); }
}