:root {
  color-scheme: light;
  --ink: #18213a;
  --muted: #68738c;
  --paper: rgba(255, 255, 255, 0.91);
  --purple: #7b4ce2;
  --purple-dark: #5d35be;
  --mint: #72dfbd;
  --line: rgba(28, 40, 72, 0.12);
  font-family: Inter, ui-rounded, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.landing-page {
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 82% 12%, rgba(255, 255, 255, .8) 0 3%, transparent 3.2%),
    linear-gradient(180deg, #74cafa 0%, #a9def8 62%, #dff3e8 100%);
}

.landing-page::after {
  content: "";
  position: fixed;
  z-index: 0;
  inset: auto -5% -16vh;
  height: 35vh;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(165deg, #8ed598, #5fb875);
  box-shadow: 0 -18px 0 rgba(255,255,255,.35);
}

.sky-decor { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.cloud {
  position: absolute;
  width: 150px;
  height: 43px;
  border-radius: 99px;
  opacity: .62;
  background: #fff;
  filter: blur(.2px);
  animation: drift 20s ease-in-out infinite alternate;
}
.cloud::before, .cloud::after { content: ""; position: absolute; border-radius: 50%; background: inherit; }
.cloud::before { width: 72px; height: 72px; left: 25px; bottom: 8px; }
.cloud::after { width: 92px; height: 92px; right: 16px; bottom: 5px; }
.cloud-one { left: 4vw; top: 19vh; transform: scale(.72); }
.cloud-two { right: 4vw; top: 12vh; transform: scale(1.1); animation-delay: -8s; }
.cloud-three { right: 14vw; top: 55vh; transform: scale(.55); animation-delay: -4s; }
@keyframes drift { to { translate: 34px 8px; } }

.landing-shell { position: relative; z-index: 2; width: min(1060px, calc(100% - 32px)); margin: 0 auto; padding: 66px 0 34px; }
.brand-lockup { max-width: 760px; margin: 0 auto 38px; text-align: center; }
.brand-kicker, .eyebrow { color: #475776; font-size: .72rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.brand-lockup h1 { margin: 9px 0 15px; font-size: clamp(2.85rem, 8vw, 5.75rem); line-height: .9; letter-spacing: -.065em; }
.brand-lockup h1 span { color: #fff; text-shadow: 0 4px 0 rgba(57,112,151,.17); }
.brand-lockup p { max-width: 680px; margin: 0 auto; color: #334564; font-size: 1.08rem; line-height: 1.6; }

.global-card { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(250px, 330px); align-items: center; gap: 24px; margin-bottom: 20px; padding: 28px 32px; overflow: hidden; border: 1px solid rgba(255,255,255,.76); border-radius: 27px; color: #fff; background: linear-gradient(135deg, rgba(35,55,76,.96), rgba(48,102,92,.94)); box-shadow: 0 25px 70px rgba(39,75,106,.2), inset 0 1px 0 rgba(255,255,255,.15); }
.global-card-icon { display: grid; width: 64px; height: 64px; place-items: center; border-radius: 20px; color: #d9fff0; background: rgba(125,224,184,.17); box-shadow: inset 0 0 0 1px rgba(174,255,223,.16); font-size: 1.8rem; }
.global-card .eyebrow { color: #8fe1c1; }
.global-card h2 { margin: 5px 0 5px; font-size: 2rem; letter-spacing: -.04em; }
.global-card p { max-width: 520px; margin: 0; color: rgba(235,247,245,.76); line-height: 1.45; }
.global-status { display: flex; align-items: center; margin-top: 12px; color: #d9eee9; font-size: .76rem; }
.global-card-actions { display: grid; gap: 9px; }
.global-card-actions small { color: rgba(226,242,238,.62); text-align: center; font-size: .66rem; line-height: 1.4; }
.button-mountain { color: #16372f; background: linear-gradient(135deg, #92e7c5, #6dcca7); box-shadow: 0 10px 24px rgba(14,38,33,.28); }
.entry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.entry-card { position: relative; min-height: 370px; padding: 34px; overflow: hidden; border: 1px solid rgba(255,255,255,.7); border-radius: 27px; background: var(--paper); box-shadow: 0 25px 70px rgba(39,75,106,.17), inset 0 1px 0 #fff; backdrop-filter: blur(12px); }
.entry-card::before { content: ""; position: absolute; width: 210px; height: 210px; border-radius: 50%; right: -80px; top: -105px; opacity: .16; background: currentColor; }
.host-card { color: var(--purple); }
.join-card { color: #2b8f77; }
.entry-card h2 { color: var(--ink); margin: 8px 0 10px; font-size: 2rem; letter-spacing: -.04em; }
.entry-card p { color: var(--muted); line-height: 1.55; margin: 0 0 26px; max-width: 410px; }
.card-icon { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 25px; border-radius: 16px; background: color-mix(in srgb, currentColor 15%, white); font-size: 1.5rem; }
.entry-card .eyebrow { color: currentColor; }
.world-mode-picker { display: grid; gap: 8px; margin: -10px 0 16px; }
.world-mode-picker label { position: relative; cursor: pointer; }
.world-mode-picker input { position: absolute; opacity: 0; pointer-events: none; }
.world-mode-picker span { display: grid; padding: 11px 13px 11px 42px; border: 2px solid #e1e7ef; border-radius: 13px; color: #667188; background: rgba(247,250,252,.76); transition: border-color .15s, background .15s, transform .15s; }
.world-mode-picker span::before { content: ""; position: absolute; left: 15px; top: 50%; width: 13px; height: 13px; translate: 0 -50%; border: 2px solid #b9c3d3; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3px #fff; }
.world-mode-picker strong { color: #26324a; font-size: .82rem; }
.world-mode-picker small { margin-top: 2px; color: #7b8699; font-size: .68rem; }
.world-mode-picker input:checked + span { border-color: #8d5bff; background: #f2edff; transform: translateX(2px); }
.world-mode-picker input:checked + span::before { border-color: #7b4ce2; background: #7b4ce2; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 49px; padding: 12px 17px; border: 0; border-radius: 14px; cursor: pointer; text-decoration: none; font-weight: 800; transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease; }
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0); }
.button[disabled], .button.disabled { opacity: .46; pointer-events: none; }
.button-twitch { color: #fff; background: linear-gradient(135deg, #8d5bff, #6e3bd1); box-shadow: 0 10px 22px rgba(104,57,200,.25); }
.button-dark { color: #fff; background: #172039; box-shadow: 0 10px 22px rgba(23,32,57,.18); }
.button-soft { color: #252f49; background: #eef2fa; }
.twitch-mark { font-size: 1.25rem; }

.join-form { display: grid; grid-template-columns: 132px 1fr; gap: 10px; }
.join-form label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.join-form input { width: 100%; min-width: 0; height: 52px; border: 2px solid #dce3ec; border-radius: 14px; outline: 0; color: var(--ink); background: #f8fbfd; text-align: center; font-size: 1.22rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.join-form input:focus { border-color: #70d9bd; box-shadow: 0 0 0 4px rgba(112,217,189,.16); }
.join-form .button { width: auto; }
.room-preview { margin-top: 13px; padding: 10px 13px; border-radius: 11px; color: #376153; background: #e7f8f1; font-size: .86rem; }
.notice { margin: -18px auto 20px; max-width: 720px; padding: 13px 18px; border-radius: 13px; background: rgba(255,246,217,.94); color: #674d16; box-shadow: 0 8px 30px rgba(44,66,88,.1); text-align: center; }
.hidden { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.landing-footer { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 25px; margin-top: 27px; color: rgba(28,49,73,.7); font-size: .81rem; font-weight: 700; }
.status-dot, .live-dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: #36c68d; box-shadow: 0 0 0 4px rgba(54,198,141,.14); }

.game-page, .camera-page, .overlay-page { width: 100%; height: 100vh; overflow: hidden; overscroll-behavior: none; background: #7bcefa; }
.overlay-page { background: transparent; }
#game, #overlay, #preview { display: block; width: 100%; height: 100%; }
#game { touch-action: none; -webkit-touch-callout: none; user-select: none; }
.overlay-frame { position: fixed; z-index: 7; inset: clamp(10px, 1.2vw, 24px); border: clamp(5px, .42vw, 8px) solid rgba(18,27,44,.9); border-radius: clamp(18px, 1.8vw, 34px); box-shadow: 0 0 0 2px rgba(255,255,255,.42), inset 0 0 clamp(20px, 2.2vw, 42px) rgba(8,16,29,.26), 0 12px 34px rgba(5,12,24,.24); opacity: 0; pointer-events: none; transition: opacity .22s ease; }
.overlay-frame::after { content: ""; position: absolute; inset: 3px; border: 1px solid rgba(126,224,199,.42); border-radius: inherit; }
.overlay-frame.is-visible { opacity: 1; }
.overlay-controls { position: fixed; z-index: 10; top: max(18px, env(safe-area-inset-top)); right: max(18px, env(safe-area-inset-right)); display: grid; gap: 8px; transition: opacity .2s ease, translate .2s ease; }
.overlay-controls.is-idle { opacity: 0; translate: 0 -7px; pointer-events: none; }
.overlay-setting-toggle { min-width: 174px; min-height: 54px; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 9px; padding: 8px 12px 8px 9px; border: 1px solid rgba(255,255,255,.78); border-radius: 14px; color: #28364a; background: rgba(250,253,255,.94); box-shadow: 0 9px 28px rgba(21,43,62,.2); cursor: pointer; text-align: left; }
.overlay-setting-toggle:hover { background: #fff; }
.overlay-setting-toggle:focus-visible { outline: 3px solid #ffd36e; outline-offset: 3px; }
.overlay-setting-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: #526176; background: #edf1f6; font-size: 1rem; }
.overlay-setting-copy { display: grid; gap: 1px; }
.overlay-setting-copy strong { font-size: .75rem; line-height: 1.2; }
.overlay-setting-copy small { color: #748096; font-size: .58rem; font-weight: 700; line-height: 1.25; }
.overlay-performance-mode-toggle[data-level="performance"] { color: #315e52; border-color: rgba(142,213,189,.9); background: rgba(225,247,239,.95); }
.overlay-performance-mode-toggle[data-level="performance"] .overlay-performance-mode-icon { color: #386e60; background: #c7ecdf; }
.overlay-performance-mode-toggle[data-level="ultra"] { color: #583d91; border-color: rgba(187,164,235,.92); background: rgba(240,234,253,.96); }
.overlay-performance-mode-toggle[data-level="ultra"] .overlay-performance-mode-icon { color: #6846ad; background: #ddd0f7; }
.overlay-frame-toggle.is-active { color: #315e52; border-color: rgba(142,213,189,.9); background: rgba(225,247,239,.95); }
.overlay-frame-toggle.is-active .overlay-setting-icon { color: #386e60; background: #c7ecdf; }
.camera-page.performance-mode .livestream-event-card, .overlay-page.performance-mode .livestream-event-card { backdrop-filter: none; }
.livestream-event-card { --livestream-event-accent: #f3c95e; position: fixed; z-index: 8; left: max(6vw, env(safe-area-inset-left)); bottom: max(6vh, env(safe-area-inset-bottom)); width: min(520px, 34vw); display: grid; grid-template-columns: clamp(46px, 3.2vw, 62px) minmax(0, 1fr); align-items: center; gap: clamp(12px, 1vw, 18px); padding: clamp(13px, 1vw, 18px); overflow: hidden; border: 1px solid color-mix(in srgb, var(--livestream-event-accent) 68%, white); border-left-width: 5px; border-radius: clamp(14px, 1.1vw, 20px); color: #f7fbff; background: linear-gradient(110deg, rgba(14,22,38,.96), rgba(27,35,54,.92)); box-shadow: 0 18px 55px rgba(3,8,17,.42), inset 0 1px 0 rgba(255,255,255,.12); opacity: 0; visibility: hidden; transform: translate3d(0, 18px, 0) scale(.975); transform-origin: left bottom; transition: opacity .2s ease, transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s linear .28s; backdrop-filter: blur(10px); pointer-events: none; will-change: opacity, transform; }
.livestream-event-card::after { content: ""; position: absolute; inset: auto -8% -55% auto; width: 42%; aspect-ratio: 1; border-radius: 50%; background: var(--livestream-event-accent); opacity: .1; filter: blur(2px); }
.livestream-event-card.is-visible { opacity: 1; visibility: visible; transform: translate3d(0, 0, 0) scale(1); transition-delay: 0s; }
.livestream-event-card[data-accent="flag"] { --livestream-event-accent: #ffce62; }
.livestream-event-card[data-accent="launch"] { --livestream-event-accent: #ff8d72; }
.livestream-event-card[data-accent="challenge"] { --livestream-event-accent: #a8ef79; }
.livestream-event-card[data-accent="recovery"] { --livestream-event-accent: #74e0c0; }
.livestream-event-card-icon { position: relative; z-index: 1; display: grid; width: clamp(46px, 3.2vw, 62px); aspect-ratio: 1; place-items: center; border: 1px solid color-mix(in srgb, var(--livestream-event-accent) 72%, white); border-radius: 30%; color: #182238; background: var(--livestream-event-accent); box-shadow: 0 8px 22px color-mix(in srgb, var(--livestream-event-accent) 24%, transparent); font-size: clamp(1.35rem, 1.7vw, 2rem); line-height: 1; }
.livestream-event-card-copy { position: relative; z-index: 1; min-width: 0; display: grid; gap: 2px; }
.livestream-event-card-label { color: var(--livestream-event-accent); font-size: clamp(.58rem, .55vw, .7rem); font-weight: 900; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; }
.livestream-event-card-title { overflow: hidden; color: #fff; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(1rem, 1.15vw, 1.35rem); line-height: 1.25; }
.livestream-event-card-message { display: -webkit-box; overflow: hidden; color: #d9e2ef; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: clamp(.7rem, .72vw, .88rem); font-weight: 650; line-height: 1.35; }
.game-hud { position: fixed; z-index: 3; top: 18px; left: 18px; right: 18px; display: flex; align-items: center; gap: 10px; pointer-events: none; }
.hud-brand, .hud-pill { height: 40px; display: flex; align-items: center; border: 1px solid rgba(255,255,255,.72); border-radius: 13px; color: #26324d; background: rgba(255,255,255,.83); box-shadow: 0 8px 25px rgba(47,91,120,.13); backdrop-filter: blur(10px); }
.hud-brand { padding: 0 16px; color: #6040bd; text-decoration: none; font-weight: 950; letter-spacing: -.03em; pointer-events: auto; }
.hud-pill { gap: 8px; padding: 0 13px; font-size: .78rem; }
.hud-pill span:not(.live-dot) { color: #7a8499; }
.hud-pill strong { letter-spacing: .06em; }
.flag-progress { gap: 4px; color: #34434d; background: rgba(255,250,224,.9); }
.flag-progress .flag-progress-icon { margin-right: 3px; color: #e4566f; font-size: 1.05rem; line-height: 1; }
.flag-progress .flag-progress-divider { color: #a19075; }
.flag-progress.complete { color: #315a4b; background: rgba(222,255,236,.92); box-shadow: 0 8px 25px rgba(47,91,120,.13), 0 0 0 3px rgba(88,202,151,.18); }
.hud-map-button { height: 40px; display: inline-flex; align-items: center; gap: 7px; padding: 0 9px 0 12px; border: 1px solid rgba(255,255,255,.72); border-radius: 13px; color: #334258; background: rgba(255,255,255,.88); box-shadow: 0 8px 25px rgba(47,91,120,.13); backdrop-filter: blur(10px); cursor: pointer; pointer-events: auto; font-size: .76rem; font-weight: 850; }
.hud-map-button:hover { background: #fff; transform: translateY(-1px); }
.hud-map-button .hud-map-icon { color: #5f48af; font-size: 1.05rem; }
.hud-map-button kbd { min-width: 22px; height: 22px; color: #5d4ca0; border-color: #d8d0f0; background: #f1edfb; }
.controls-card { position: fixed; z-index: 3; right: 18px; top: 18px; display: flex; gap: 13px; padding: 8px 11px; border: 1px solid rgba(255,255,255,.72); border-radius: 13px; background: rgba(255,255,255,.82); box-shadow: 0 8px 25px rgba(47,91,120,.13); backdrop-filter: blur(10px); }
.controls-card > div { display: flex; align-items: center; gap: 4px; color: #67738a; font-size: .72rem; font-weight: 750; }
.performance-mode-toggle { min-height: 28px; display: inline-flex; align-items: center; gap: 5px; margin-left: 2px; padding: 0 8px; border: 1px solid #d4dce4; border-radius: 8px; color: #637086; background: rgba(255,255,255,.76); cursor: pointer; font-size: .62rem; font-weight: 850; }
.performance-mode-toggle:hover { color: #354157; background: #fff; }
.performance-mode-toggle[aria-pressed="true"] { color: #345f53; border-color: #a9d8c8; background: #dcf3ea; }
.performance-mode-toggle:focus-visible { outline: 3px solid #ffd36e; outline-offset: 3px; }
.performance-mode .hud-brand, .performance-mode .hud-pill, .performance-mode .hud-map-button, .performance-mode .controls-card, .performance-mode .flag-toast, .performance-mode .interaction-toast, .performance-mode .game-tip { backdrop-filter: none; }
.performance-mode .npc-dialogue::backdrop, .performance-mode .world-map-dialog::backdrop, .performance-mode .customizer-dialog::backdrop { backdrop-filter: none; }
kbd, .mouse-key { display: inline-grid; min-width: 23px; height: 23px; place-items: center; padding: 0 5px; border: 1px solid #cfd7e3; border-bottom-width: 3px; border-radius: 6px; color: #313b54; background: #fff; font-size: .65rem; font-weight: 850; }
.mouse-key { border-radius: 10px 10px 7px 7px; }
.connection-banner { position: fixed; z-index: 5; left: 50%; top: 76px; translate: -50% 0; padding: 11px 17px; border-radius: 12px; color: #fff; background: rgba(25,34,56,.9); box-shadow: 0 8px 28px rgba(0,0,0,.2); font-size: .82rem; font-weight: 750; transition: opacity .3s; }
.connection-banner.connected { opacity: 0; pointer-events: none; }
.connection-banner.error { background: #a93e59; }
.flag-toast { position: fixed; z-index: 6; left: 50%; top: 76px; display: flex; align-items: center; gap: 11px; min-width: 210px; padding: 11px 16px 11px 12px; translate: -50% 0; border: 1px solid rgba(255,255,255,.72); border-radius: 15px; color: #3a3541; background: rgba(255,249,216,.94); box-shadow: 0 12px 35px rgba(52,70,92,.2); backdrop-filter: blur(10px); animation: flag-toast-in .28s cubic-bezier(.2,.8,.25,1.15); pointer-events: none; }
.flag-toast-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 11px; color: #fff; background: linear-gradient(145deg, #ff7287, #dd4866); box-shadow: 0 6px 14px rgba(190,56,82,.25); font-size: 1.1rem; }
.flag-toast > span:last-child { display: grid; gap: 1px; }
.flag-toast small { color: #8a7b69; font-size: .58rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.flag-toast strong { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; }
.interaction-toast { position: fixed; z-index: 6; left: 50%; top: 132px; display: flex; align-items: center; gap: 11px; width: min(470px, calc(100% - 32px)); padding: 11px 16px 11px 12px; translate: -50% 0; border: 1px solid rgba(255,255,255,.76); border-radius: 15px; color: #33413f; background: rgba(226,251,241,.96); box-shadow: 0 12px 35px rgba(52,70,92,.2); backdrop-filter: blur(10px); pointer-events: none; }
.interaction-toast-icon { display: grid; flex: 0 0 36px; width: 36px; height: 36px; place-items: center; border-radius: 11px; color: #fff; background: linear-gradient(145deg, #5eb9a3, #397c70); font-size: 1.15rem; font-weight: 900; }
.interaction-toast > span:last-child { display: grid; min-width: 0; gap: 2px; }
.interaction-toast small { color: #638078; font-size: .58rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.interaction-toast strong { font-size: .8rem; line-height: 1.35; }
@keyframes flag-toast-in { from { opacity: 0; translate: -50% -10px; scale: .95; } }
.game-tip { position: fixed; z-index: 3; left: 50%; bottom: 19px; translate: -50% 0; padding: 9px 14px; border-radius: 12px; color: #536077; background: rgba(255,255,255,.78); font-size: .74rem; font-weight: 700; backdrop-filter: blur(8px); pointer-events: none; }
.npc-prompt { position: fixed; z-index: 7; left: 50%; bottom: calc(66px + env(safe-area-inset-bottom)); display: inline-flex; min-height: 48px; align-items: center; gap: 10px; translate: -50% 0; padding: 8px 16px 8px 9px; border: 1px solid rgba(255,255,255,.84); border-radius: 15px; color: #28364a; background: rgba(255,255,255,.94); box-shadow: 0 12px 34px rgba(32,63,84,.24); backdrop-filter: blur(10px); cursor: pointer; font-size: .78rem; font-weight: 780; }
.npc-prompt kbd { min-width: 30px; height: 30px; color: #fff; border-color: #315f59; background: #4f8d82; box-shadow: inset 0 -2px 0 rgba(0,0,0,.13); }
.npc-prompt strong { color: #356d64; }
.npc-prompt:hover { translate: -50% -2px; }
.npc-prompt:focus-visible, .npc-dialogue button:focus-visible { outline: 3px solid #ffd36e; outline-offset: 3px; }
.npc-dialogue { position: fixed; inset: auto auto max(20px, env(safe-area-inset-bottom)) 50%; width: min(620px, calc(100% - 32px)); max-height: calc(100vh - 40px); margin: 0; padding: 0; translate: -50% 0; overflow: auto; border: 1px solid rgba(255,255,255,.82); border-radius: 22px; color: #233047; background: rgba(250,253,251,.97); box-shadow: 0 24px 80px rgba(19,38,54,.38); }
.npc-dialogue[open] { display: grid; gap: 18px; padding: 22px; }
.npc-dialogue::backdrop { background: rgba(25,42,55,.24); backdrop-filter: blur(2px); }
.npc-dialogue-heading { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.npc-dialogue-kicker { color: #4f8d82; font-size: .62rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.npc-dialogue h2 { margin: 3px 0 1px; color: #1e2b40; font-size: 1.55rem; line-height: 1; letter-spacing: -.035em; }
.npc-dialogue-heading p { margin: 5px 0 0; color: #748096; font-size: .75rem; font-weight: 750; }
.npc-dialogue-close { display: grid; flex: 0 0 44px; width: 44px; height: 44px; place-items: center; border: 0; border-radius: 13px; color: #526078; background: #e9eef2; cursor: pointer; font-size: 1.45rem; line-height: 1; }
.npc-dialogue-line { min-height: 3.2em; margin: 0; color: #334258; font-size: clamp(1rem, 2.6vw, 1.16rem); font-weight: 650; line-height: 1.6; }
.npc-dialogue-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.npc-dialogue-progress { color: #8a94a5; font-size: .72rem; font-weight: 800; }
.npc-dialogue-next { width: auto; min-width: 150px; min-height: 48px; color: #fff; background: linear-gradient(135deg, #4f8d82, #39746b); box-shadow: 0 8px 20px rgba(45,103,93,.22); }
.game-page.npc-dialogue-open .mobile-controls { opacity: .22; pointer-events: none; }
.world-map-dialog { position: fixed; z-index: 20; inset: 50% auto auto 50%; width: min(1120px, calc(100vw - 32px)); height: min(760px, calc(100dvh - 32px)); max-width: none; max-height: none; margin: 0; padding: 0; translate: -50% -50%; overflow: hidden; border: 0; border-radius: 25px; color: #26344a; background: transparent; box-shadow: 0 28px 95px rgba(14,29,45,.48); }
.world-map-dialog[open] { display: block; }
.world-map-dialog::backdrop { background: rgba(19,33,46,.55); backdrop-filter: blur(5px); }
.world-map-panel { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; border: 1px solid rgba(255,255,255,.78); border-radius: inherit; background: linear-gradient(155deg, rgba(250,253,248,.99), rgba(226,238,233,.99)); }
.world-map-heading { display: flex; align-items: start; justify-content: space-between; gap: 22px; padding: 20px 22px 15px; }
.world-map-kicker { color: #6b55b2; font-size: .62rem; font-weight: 950; letter-spacing: .13em; text-transform: uppercase; }
.world-map-heading h2 { margin: 3px 0 0; color: #1f2c40; font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1; letter-spacing: -.045em; }
.world-map-heading p { margin: 7px 0 0; color: #68768a; font-size: .78rem; font-weight: 730; }
.world-map-close { display: grid; flex: 0 0 44px; width: 44px; height: 44px; place-items: center; border: 0; border-radius: 13px; color: #526078; background: #e2e9e7; cursor: pointer; font-size: 1.45rem; line-height: 1; }
.world-map-close:hover { color: #29364b; background: #d8e2df; }
.hud-map-button:focus-visible, .world-map-dialog button:focus-visible { outline: 3px solid #ffd36e; outline-offset: 3px; }
.world-map-body { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 14px; padding: 0 22px; }
.world-map-viewport { min-height: 0; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(63,84,83,.22); border-radius: 17px; background: #bdd9d7; box-shadow: inset 0 0 0 5px rgba(255,255,255,.28), 0 9px 25px rgba(41,70,75,.13); }
.world-map-panel > .world-map-viewport { margin: 0 22px; }
.world-map-canvas { display: block; width: 100%; height: 100%; max-height: 100%; background: linear-gradient(#cae3df, #a8cbc8); }
.world-map-ground { fill: #b8d5d1; }
.world-map-fog-base { fill: #9ca8aa; }
.world-map-fog-line { fill: none; stroke: rgba(228,235,234,.25); stroke-width: 120; }
.world-map-region-shape { stroke: rgba(37,59,64,.42); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.world-map-region.biome-village .world-map-region-shape { fill: #8dcc9a; }
.world-map-region.biome-forest .world-map-region-shape { fill: #62a879; }
.world-map-region.biome-ravine .world-map-region-shape { fill: #719ca0; }
.world-map-region.biome-foothills .world-map-region-shape { fill: #b99a6d; }
.world-map-region.biome-quarry .world-map-region-shape { fill: #9a8c7e; }
.world-map-region.biome-alpine .world-map-region-shape { fill: #91b69c; }
.world-map-region.biome-glacier .world-map-region-shape { fill: #8dcbd6; }
.world-map-region.biome-summit .world-map-region-shape { fill: #c2cbd1; }
.world-map-region.is-locked .world-map-region-shape { fill: url(#world-map-fog); stroke: rgba(63,72,76,.4); }
.world-map-region-label { fill: #fffef5; stroke: rgba(28,45,50,.68); stroke-width: 50px; paint-order: stroke fill; text-anchor: middle; font: 900 330px Inter, ui-rounded, system-ui; letter-spacing: 8px; pointer-events: none; }
.world-map-region.is-locked .world-map-region-label { fill: #e1e6e5; stroke: rgba(55,65,69,.62); font-size: 270px; letter-spacing: 22px; text-transform: uppercase; }
.world-map-landmark circle { fill: #f7cb55; stroke: #fff7da; stroke-width: 55px; }
.world-map-landmark text { fill: #684719; text-anchor: middle; dominant-baseline: central; font: 950 220px Inter, ui-rounded, system-ui; }
.world-map-landmark.is-secret circle { fill: #aa82df; }
.world-map-landmark.is-secret text { fill: #fff; }
.world-map-player circle { vector-effect: non-scaling-stroke; }
.world-map-player.is-other circle { stroke: rgba(255,255,255,.9); stroke-width: 3px; }
.world-map-player.is-self circle:not(.world-map-player-pulse) { fill: #744fc1; stroke: #fff; stroke-width: 4px; }
.world-map-player.is-self .world-map-player-pulse { fill: none; stroke: rgba(116,79,193,.42); stroke-width: 7px; }
.world-map-player text { fill: #fff; stroke: rgba(30,39,53,.72); stroke-width: 35px; paint-order: stroke fill; text-anchor: middle; font: 950 260px Inter, ui-rounded, system-ui; pointer-events: none; }
.world-map-leaderboard { min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; border: 1px solid rgba(67,91,88,.15); border-radius: 17px; background: rgba(255,255,255,.58); box-shadow: 0 9px 25px rgba(41,70,75,.08); }
.world-map-leaderboard-heading { display: flex; align-items: start; justify-content: space-between; gap: 9px; padding: 16px 15px 12px; border-bottom: 1px solid rgba(67,91,88,.11); }
.world-map-leaderboard-heading span:first-child { color: #6b55b2; font-size: .53rem; font-weight: 950; letter-spacing: .11em; text-transform: uppercase; }
.world-map-leaderboard-heading h3 { margin: 3px 0 0; color: #27364b; font-size: .98rem; line-height: 1.05; letter-spacing: -.025em; }
.world-map-leaderboard-count { flex: 0 0 auto; padding: 5px 7px; border-radius: 999px; color: #4f7369; background: #dcece5; font-size: .54rem; font-weight: 900; }
.world-map-leaderboard-list { min-height: 0; margin: 0; padding: 8px; overflow-y: auto; list-style: none; scrollbar-width: thin; }
.world-map-leaderboard-item { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 7px; min-height: 42px; padding: 6px 7px; border-radius: 11px; color: #445267; }
.world-map-leaderboard-item + .world-map-leaderboard-item { margin-top: 3px; }
.world-map-leaderboard-item.is-self { color: #4f3890; background: rgba(116,79,193,.1); }
.world-map-leaderboard-rank { color: #8993a1; text-align: center; font-size: .65rem; font-weight: 950; font-variant-numeric: tabular-nums; }
.world-map-leaderboard-player { min-width: 0; display: flex; align-items: center; gap: 7px; font-size: .68rem; font-weight: 850; }
.world-map-leaderboard-player > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.world-map-leaderboard-player small { flex: 0 0 auto; padding: 2px 4px; border-radius: 5px; color: #674ca9; background: rgba(116,79,193,.12); font-size: .48rem; font-weight: 950; text-transform: uppercase; }
.world-map-leaderboard-dot { flex: 0 0 10px; width: 10px; height: 10px; border: 2px solid rgba(255,255,255,.92); border-radius: 50%; box-shadow: 0 0 0 1px rgba(44,60,68,.2); }
.world-map-leaderboard-score { color: #7c5b0e; font-size: .68rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.world-map-leaderboard-empty { padding: 20px 12px; color: #85909e; text-align: center; font-size: .68rem; font-weight: 750; line-height: 1.45; }
.world-map-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 22px 18px; }
.world-map-footer p { max-width: 390px; margin: 0; color: #677588; text-align: right; font-size: .7rem; font-weight: 720; line-height: 1.4; }
.world-map-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 15px; color: #4f5d6e; font-size: .66rem; font-weight: 800; }
.world-map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.map-key { display: inline-block; width: 12px; height: 12px; border: 2px solid rgba(255,255,255,.88); border-radius: 50%; box-shadow: 0 0 0 1px rgba(44,60,68,.2); }
.map-key-self { background: #744fc1; }
.map-key-player { background: #717b83; }
.map-key-flag { border-radius: 3px 7px 7px 3px; background: #f7cb55; }
.map-key-fog { border-color: #8a9598; border-radius: 3px; background: repeating-linear-gradient(45deg, #929da0 0 3px, #abb4b5 3px 6px); }
.game-page.world-map-open .mobile-controls { opacity: .18; pointer-events: none; }
.customizer-dialog { position: fixed; inset: 50% auto auto 50%; width: min(940px, calc(100vw - 32px)); height: min(690px, calc(100dvh - 32px)); max-width: none; max-height: none; margin: 0; padding: 0; translate: -50% -50%; overflow: hidden; border: 0; border-radius: 26px; color: #26344a; background: transparent; box-shadow: 0 28px 95px rgba(14,29,45,.48); }
.customizer-dialog[open] { display: block; }
.customizer-dialog::backdrop { background: rgba(19,33,46,.57); backdrop-filter: blur(5px); }
.customizer-panel { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; border: 1px solid rgba(255,255,255,.8); border-radius: inherit; background: linear-gradient(145deg, rgba(252,254,249,.99), rgba(229,240,234,.99)); }
.customizer-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; padding: 22px 24px 18px; border-bottom: 1px solid rgba(67,91,88,.12); }
.customizer-kicker { color: #4f8d82; font-size: .62rem; font-weight: 950; letter-spacing: .13em; text-transform: uppercase; }
.customizer-heading h2 { margin: 3px 0 0; color: #1f2c40; font-size: clamp(1.55rem, 3vw, 2.1rem); line-height: 1; letter-spacing: -.045em; }
.customizer-heading p { margin: 7px 0 0; color: #68768a; font-size: .78rem; font-weight: 720; }
.customizer-heading-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; }
.customizer-heading .customizer-balance { display: flex; align-items: baseline; gap: 5px; margin: 0; padding: 8px 11px; border: 1px solid rgba(137,103,24,.13); border-radius: 13px; color: #80651f; background: #fff3c8; font-size: .61rem; font-weight: 850; line-height: 1; box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }
.customizer-balance strong { color: #674e0d; font-size: 1rem; font-variant-numeric: tabular-nums; }
.customizer-close { display: grid; flex: 0 0 44px; width: 44px; height: 44px; place-items: center; border: 0; border-radius: 13px; color: #526078; background: #e2e9e7; cursor: pointer; font-size: 1.45rem; line-height: 1; }
.customizer-close:hover { color: #29364b; background: #d8e2df; }
.customizer-layout { min-height: 0; display: grid; grid-template-columns: minmax(230px, .78fr) minmax(400px, 1.55fr); gap: 0; }
.customizer-preview-card { min-width: 0; display: grid; grid-template-rows: minmax(220px, 1fr) auto; gap: 16px; padding: 24px; border-right: 1px solid rgba(67,91,88,.12); background: radial-gradient(circle at 50% 34%, rgba(255,255,255,.96), rgba(205,231,220,.84)); }
.customizer-preview-stage { position: relative; min-height: 250px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(62,100,91,.15); border-radius: 22px; background: linear-gradient(#bde5ec 0 62%, #a9d28e 62%); box-shadow: inset 0 0 0 5px rgba(255,255,255,.25); }
.customizer-preview-stage::before, .customizer-preview-stage::after { content: ""; position: absolute; bottom: 37%; width: 75px; height: 44px; border-radius: 60% 60% 0 0; background: rgba(76,145,103,.32); }
.customizer-preview-stage::before { left: -24px; }
.customizer-preview-stage::after { right: -20px; scale: 1.3 .8; }
.customizer-avatar { --avatar-body: #7655c5; --headwear-primary: #7655c5; --headwear-accent: #f6cf63; position: relative; z-index: 2; width: 116px; height: 150px; margin-top: 26px; border: 4px solid rgba(39,47,67,.78); border-radius: 52% 52% 45% 45%; background: var(--avatar-body); box-shadow: inset 12px -12px 0 rgba(33,42,66,.13), 0 12px 24px rgba(45,75,73,.19); }
.customizer-preview-eye { position: absolute; top: 57px; width: 12px; height: 16px; border-radius: 50%; background: #fff; box-shadow: inset 0 -5px 0 #273048; }
.customizer-preview-eye-left { left: 28px; }
.customizer-preview-eye-right { right: 28px; }
.customizer-preview-mouth { position: absolute; left: 50%; top: 88px; width: 22px; height: 10px; translate: -50% 0; border-bottom: 4px solid rgba(38,43,61,.8); border-radius: 50%; }
.customizer-preview-arm { position: absolute; z-index: -1; top: 77px; width: 65px; height: 25px; border: 4px solid rgba(39,47,67,.76); border-radius: 99px; background: var(--avatar-body); transform-origin: center; }
.customizer-preview-arm-left { right: 83px; rotate: -24deg; }
.customizer-preview-arm-right { left: 83px; rotate: 24deg; }
.customizer-preview-shadow { position: absolute; z-index: 1; left: 50%; bottom: 30px; width: 142px; height: 27px; translate: -50% 0; border-radius: 50%; background: rgba(42,73,65,.2); filter: blur(2px); }
.customizer-preview-headwear { position: absolute; z-index: 3; left: 50%; bottom: calc(100% - 18px); translate: -50% 0; pointer-events: none; }
.customizer-preview-headwear.is-none { display: none; }
.customizer-preview-headwear.is-beanie { width: 92px; height: 53px; border: 4px solid rgba(39,47,67,.78); border-radius: 52px 52px 18px 18px; background: var(--headwear-primary); box-shadow: inset 0 -10px 0 var(--headwear-accent); }
.customizer-preview-headwear.is-beanie::before { content: ""; position: absolute; left: 50%; top: -22px; width: 27px; height: 27px; translate: -50% 0; border: 4px solid rgba(39,47,67,.78); border-radius: 50%; background: var(--headwear-accent); }
.customizer-preview-headwear.is-party-hat { width: 90px; height: 92px; bottom: calc(100% - 13px); clip-path: polygon(50% 0, 100% 100%, 0 100%); background: repeating-linear-gradient(115deg, var(--headwear-primary) 0 17px, var(--headwear-accent) 17px 31px); filter: drop-shadow(0 3px 0 rgba(39,47,67,.78)) drop-shadow(3px 0 0 rgba(39,47,67,.78)) drop-shadow(-3px 0 0 rgba(39,47,67,.78)); }
.customizer-preview-card > p { display: grid; gap: 3px; margin: 0; color: #34465a; text-align: center; font-size: .78rem; }
.customizer-preview-card > p span { color: #778496; font-size: .68rem; line-height: 1.4; }
.customizer-form { min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; }
.customizer-options { min-height: 0; overflow: auto; padding: 22px 24px 12px; }
.customizer-earn-note { margin: 0 0 17px; padding: 9px 11px; border-radius: 11px; color: #6b613d; background: rgba(255,241,194,.65); font-size: .62rem; font-weight: 720; line-height: 1.4; }
.customizer-options fieldset { min-width: 0; margin: 0 0 22px; padding: 0; border: 0; }
.customizer-options legend { width: 100%; margin-bottom: 10px; color: #27364a; font-size: .85rem; font-weight: 900; }
.customizer-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.customizer-choice { position: relative; display: grid; min-width: 0; align-content: start; }
.customizer-choice-select { position: relative; display: block; min-width: 0; cursor: pointer; }
.customizer-choice-select > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.customizer-choice-card { min-height: 74px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; border: 2px solid #d9e2df; border-radius: 15px; color: #354356; background: rgba(255,255,255,.72); transition: border-color .15s, background .15s, translate .15s; }
.customizer-choice-select:hover .customizer-choice-card { translate: 0 -1px; border-color: #aecbc3; background: #fff; }
.customizer-choice-select > input:focus-visible + .customizer-choice-card, .customizer-dialog button:focus-visible { outline: 3px solid #ffd36e; outline-offset: 3px; }
.customizer-choice-select > input:checked + .customizer-choice-card { border-color: #4c897e; background: #ecf9f4; box-shadow: 0 0 0 3px rgba(76,137,126,.12); }
.customizer-choice-select > input:disabled + .customizer-choice-card { opacity: .68; cursor: not-allowed; border-style: dashed; background: rgba(230,235,234,.68); }
.customizer-form.is-busy .customizer-choice-select > input:disabled + .customizer-choice-card { opacity: .8; border-style: solid; }
.customizer-choice-mark { display: grid; width: 42px; height: 42px; place-items: center; border: 2px solid rgba(44,56,72,.22); border-radius: 13px; background: var(--option-color, #eef1ef); box-shadow: inset 0 0 0 3px rgba(255,255,255,.35); color: #5f6b78; font-size: 1.15rem; font-weight: 900; }
.customizer-choice-mark.is-profile { background: conic-gradient(#8edfc0, #e783a3, #8da8eb, #8edfc0); }
.customizer-choice-mark.is-headwear { color: #fff; background: linear-gradient(145deg, var(--option-color, #7655c5), var(--option-accent, #f6cf63)); }
.customizer-choice-copy { min-width: 0; display: grid; gap: 3px; }
.customizer-choice-copy strong { overflow: hidden; color: #29374b; text-overflow: ellipsis; white-space: nowrap; font-size: .76rem; }
.customizer-choice-copy small { overflow: hidden; color: #788596; text-overflow: ellipsis; white-space: nowrap; font-size: .62rem; }
.customizer-choice-state { padding: 4px 6px; border-radius: 7px; color: #467469; background: #dff3eb; font-size: .54rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.customizer-choice-state.is-locked { color: #776f66; background: #e7e4df; }
.customizer-purchase { width: calc(100% - 12px); min-height: 40px; margin: -5px 6px 0; padding: 8px 10px 7px; border: 0; border-radius: 0 0 12px 12px; color: #5d4710; background: linear-gradient(#ffe499, #f4cd65); cursor: pointer; font-size: .63rem; font-weight: 900; box-shadow: 0 5px 12px rgba(104,78,15,.12); }
.customizer-purchase:hover:not(:disabled) { color: #493606; background: linear-gradient(#ffeba9, #f6d575); }
.customizer-purchase:disabled { color: #827a67; background: #deddd7; cursor: not-allowed; box-shadow: none; }
.customizer-status { min-height: 38px; margin: 0; padding: 10px 24px; border-top: 1px solid rgba(67,91,88,.1); color: #617184; background: rgba(255,255,255,.42); font-size: .7rem; font-weight: 720; line-height: 1.4; }
.customizer-status.is-error { color: #993c55; background: rgba(255,228,233,.72); }
.customizer-status.is-success { color: #276856; background: rgba(220,249,237,.72); }
.customizer-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 24px 20px; }
.customizer-actions button { min-width: 118px; min-height: 46px; padding: 10px 16px; border: 0; border-radius: 13px; cursor: pointer; font-size: .75rem; font-weight: 850; }
.customizer-secondary { color: #435166; background: #e4eae8; }
.customizer-save { color: #fff; background: linear-gradient(135deg, #4f8d82, #39746b); box-shadow: 0 8px 20px rgba(45,103,93,.2); }
.customizer-save:disabled { opacity: .48; cursor: not-allowed; box-shadow: none; }
.game-page.customizer-open .mobile-controls { opacity: .18; pointer-events: none; }
.mobile-controls { display: none; }
.movement-dial { position: fixed; z-index: 7; left: max(20px, env(safe-area-inset-left)); bottom: max(22px, env(safe-area-inset-bottom)); width: 118px; height: 118px; border: 2px solid rgba(255,255,255,.62); border-radius: 50%; touch-action: none; background: radial-gradient(circle, rgba(255,255,255,.3), rgba(26,52,74,.2)); box-shadow: inset 0 0 0 12px rgba(255,255,255,.08), 0 13px 36px rgba(27,63,88,.2); backdrop-filter: blur(7px); }
.movement-dial > span { position: absolute; left: 50%; bottom: -20px; translate: -50% 0; color: rgba(34,55,75,.76); font-size: .61rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.dial-arrows { position: absolute; inset: 5px; color: rgba(255,255,255,.7); text-align: center; font-size: .8rem; font-weight: 900; }
.dial-arrows::before, .dial-arrows::after { position: absolute; top: 45%; color: inherit; }
.dial-arrows::before { content: "←"; left: 2px; }
.dial-arrows::after { content: "→"; right: 2px; }
.movement-knob { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; translate: -50% -50%; border: 2px solid rgba(255,255,255,.9); border-radius: 50%; background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(206,239,246,.76)); box-shadow: 0 7px 18px rgba(29,67,91,.27); pointer-events: none; will-change: transform; }
.touch-instruction { position: fixed; z-index: 5; right: max(17px, env(safe-area-inset-right)); bottom: max(26px, env(safe-area-inset-bottom)); max-width: 190px; padding: 9px 12px; border: 1px solid rgba(255,255,255,.62); border-radius: 12px; color: #405068; background: rgba(255,255,255,.76); text-align: center; font-size: .68rem; font-weight: 800; line-height: 1.35; backdrop-filter: blur(7px); pointer-events: none; }
.touch-instruction small { color: #728096; font-size: .57rem; font-weight: 700; }
.arm-touch { position: fixed; z-index: 8; display: grid; width: 45px; height: 45px; translate: -50% -50%; place-items: center; border: 3px solid rgba(255,255,255,.92); border-radius: 50%; color: #fff; background: rgba(82,56,145,.48); box-shadow: 0 5px 18px rgba(23,41,67,.22), inset 0 0 0 5px rgba(255,255,255,.16); font-size: .67rem; font-weight: 950; pointer-events: none; }
.arm-touch-right { background: rgba(40,142,119,.52); }
.arm-touch-walking { background: rgba(233,132,54,.72); box-shadow: 0 0 0 8px rgba(255,190,95,.2), 0 5px 18px rgba(23,41,67,.22), inset 0 0 0 5px rgba(255,255,255,.16); }
.arm-touch-walking::after { content: "WALK"; position: absolute; top: calc(100% + 7px); padding: 2px 5px; border-radius: 5px; color: #fff; background: rgba(31,43,64,.76); font-size: .45rem; letter-spacing: .08em; }

.control-page { min-height: 100vh; color: #edf2ff; background: #10172a; }
.control-header { height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 26px; border-bottom: 1px solid rgba(255,255,255,.08); background: #121a2f; }
.control-brand { color: #fff; text-decoration: none; font-size: 1.1rem; font-weight: 900; letter-spacing: -.03em; }
.control-brand span { margin-right: 5px; color: #9d78f4; }
.control-status { display: flex; align-items: center; gap: 8px; color: #9da8be; font-size: .76rem; font-weight: 700; }
.control-status i { width: 8px; height: 8px; border-radius: 50%; background: #e2ad49; }
.control-status i.online { background: #4bd3a2; box-shadow: 0 0 0 4px rgba(75,211,162,.12); }
.control-layout { min-height: calc(100vh - 64px); display: grid; grid-template-columns: 350px minmax(0, 1fr); }
.control-sidebar { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-right: 1px solid rgba(255,255,255,.08); background: #151e34; }
.panel { padding: 20px; border: 1px solid rgba(255,255,255,.08); border-radius: 17px; background: rgba(255,255,255,.035); }
.panel .eyebrow, .camera-area .eyebrow { color: #8794ad; }
.big-room-code { margin: 8px 0 15px; color: #fff; font-size: 2.8rem; font-weight: 950; letter-spacing: .16em; line-height: 1; }
.mode-badge { display: inline-flex; margin: 10px 0 2px; padding: 4px 8px; border-radius: 7px; color: #aee8d8; background: rgba(83,202,167,.12); font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.text-link { display: block; margin-top: 13px; color: #9fddcd; text-decoration: none; text-align: center; font-size: .79rem; font-weight: 750; }
.panel-title-row { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.panel h2 { margin: 0; font-size: 1rem; }
.resolution-tag { padding: 4px 7px; border-radius: 6px; color: #aab5ca; background: rgba(255,255,255,.07); font-size: .62rem; font-weight: 750; }
.panel-copy { margin: 9px 0 16px; color: #8f9ab0; font-size: .78rem; line-height: 1.45; }
.overlay-health { display: grid; grid-template-columns: 10px minmax(0, 1fr); align-items: center; gap: 10px; margin: -3px 0 15px; padding: 10px 11px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; color: #aab5ca; background: rgba(7,13,25,.32); }
.overlay-health i { width: 9px; height: 9px; border-radius: 50%; background: #d0a44f; box-shadow: 0 0 0 4px rgba(208,164,79,.1); }
.overlay-health span { min-width: 0; display: grid; gap: 2px; }
.overlay-health strong { color: #dbe3f3; font-size: .7rem; }
.overlay-health small { color: #7f8ba1; font-size: .61rem; line-height: 1.3; }
.overlay-health[data-state="online"] { border-color: rgba(75,211,162,.2); background: rgba(75,211,162,.055); }
.overlay-health[data-state="online"] i { background: #4bd3a2; box-shadow: 0 0 0 4px rgba(75,211,162,.12); }
.overlay-health[data-state="offline"] i { background: #e37982; box-shadow: 0 0 0 4px rgba(227,121,130,.1); }
.url-field { display: block; margin-bottom: 10px; }
.url-field span { display: block; margin-bottom: 6px; color: #8792a8; font-size: .67rem; font-weight: 750; }
.url-field input { width: 100%; padding: 10px 11px; border: 1px solid rgba(255,255,255,.09); border-radius: 9px; outline: 0; color: #bac4d8; background: #0d1425; font-family: ui-monospace, monospace; font-size: .68rem; }
.setting-toggle { position: relative; display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 11px; margin: 4px 0 14px; cursor: pointer; }
.setting-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.setting-switch { position: relative; width: 38px; height: 22px; border-radius: 99px; background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); transition: background .16s; }
.setting-switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #c8d1e2; transition: translate .16s, background .16s; }
.setting-toggle input:checked + .setting-switch { background: #7047ce; }
.setting-toggle input:checked + .setting-switch::after { translate: 16px 0; background: #fff; }
.setting-toggle input:focus-visible + .setting-switch { outline: 2px solid #b999ff; outline-offset: 3px; }
.setting-toggle:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.setting-copy { display: grid; gap: 2px; color: #dbe3f3; font-size: .72rem; }
.setting-copy small { color: #7f8ba1; font-size: .63rem; line-height: 1.35; }
.danger-panel { margin-top: auto; padding: 14px 18px; }
.text-danger { border: 0; padding: 0; color: #ee8198; background: none; cursor: pointer; font-weight: 750; }
.danger-panel span { display: block; margin-top: 5px; color: #778198; font-size: .65rem; }
.camera-area { min-width: 0; padding: 26px clamp(22px, 4vw, 54px); background: radial-gradient(circle at 70% 15%, rgba(111,81,192,.12), transparent 38%), #10172a; }
.camera-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 17px; }
.camera-toolbar h1 { margin: 3px 0 0; font-size: 1.55rem; letter-spacing: -.035em; }
.camera-actions { display: flex; align-items: center; gap: 14px; }
.viewer-count { color: #95a0b5; font-size: .76rem; font-weight: 750; }
.segmented-control { display: flex; padding: 3px; border-radius: 10px; background: rgba(255,255,255,.075); }
.segmented-control button { border: 0; padding: 7px 13px; border-radius: 7px; color: #8f9bb0; background: transparent; cursor: pointer; font-size: .72rem; font-weight: 800; }
.segmented-control button.active { color: #fff; background: #7047ce; box-shadow: 0 3px 10px rgba(0,0,0,.2); }
.preview-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; container-type: inline-size; border: 1px solid rgba(255,255,255,.11); border-radius: 19px; background: #70c8f4; box-shadow: 0 30px 80px rgba(0,0,0,.28); }
.preview-frame .livestream-event-card { position: absolute; left: 6%; bottom: 6%; width: 27.0833%; grid-template-columns: 3.2cqw minmax(0, 1fr); gap: .9375cqw; padding: .9375cqw; border-left-width: .2604cqw; border-radius: 1.0417cqw; }
.preview-frame .livestream-event-card-icon { width: 3.2cqw; font-size: 1.6667cqw; }
.preview-frame .livestream-event-card-label { font-size: .5833cqw; }
.preview-frame .livestream-event-card-title { font-size: 1.125cqw; }
.preview-frame .livestream-event-card-message { font-size: .7333cqw; }
.safe-area { position: absolute; inset: 6%; border: 1px dashed rgba(255,255,255,.35); border-radius: 6px; pointer-events: none; }
.safe-area span { position: absolute; top: -9px; left: 12px; padding: 1px 6px; color: rgba(255,255,255,.65); background: rgba(28,57,83,.34); font-size: .54rem; text-transform: uppercase; letter-spacing: .08em; }
.manual-help { position: absolute; left: 50%; bottom: 15px; translate: -50% 0; display: flex; align-items: center; gap: 5px; padding: 7px 10px; border-radius: 9px; color: #dce5f7; background: rgba(14,21,38,.78); font-size: .66rem; }
.camera-note { color: #7f8ba1; font-size: .73rem; line-height: 1.5; }
.toast { position: fixed; z-index: 10; right: 22px; bottom: 22px; padding: 11px 15px; border-radius: 10px; color: #17273a; background: #8ee6ca; box-shadow: 0 12px 40px rgba(0,0,0,.25); font-size: .76rem; font-weight: 800; }

@media (max-width: 850px) {
  .landing-shell { padding-top: 38px; }
  .global-card { grid-template-columns: auto 1fr; }
  .global-card-actions { grid-column: 1 / -1; }
  .entry-grid { grid-template-columns: 1fr; }
  .entry-card { min-height: 0; }
  .control-layout { grid-template-columns: 1fr; }
  .control-sidebar { border-right: 0; }
  .camera-area { padding: 20px; }
}

@media (max-width: 600px) {
  .brand-lockup h1 { font-size: 3.5rem; }
  .global-card { grid-template-columns: 1fr; padding: 25px; }
  .global-card-icon { width: 50px; height: 50px; border-radius: 16px; }
  .global-card-actions { grid-column: auto; }
  .entry-card { padding: 25px; border-radius: 22px; }
  .join-form { grid-template-columns: 1fr; }
  .controls-card { display: none; }
  .game-tip { width: calc(100% - 32px); text-align: center; }
  .npc-dialogue[open] { gap: 15px; padding: 18px; }
  .npc-dialogue-actions { align-items: stretch; flex-direction: column-reverse; gap: 10px; }
  .npc-dialogue-next { width: 100%; }
  .world-map-dialog { width: calc(100vw - 16px); height: calc(100dvh - 16px); border-radius: 19px; }
  .world-map-heading { padding: 15px 15px 11px; }
  .world-map-heading p { margin-top: 5px; font-size: .7rem; }
  .world-map-body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) 145px; gap: 9px; padding-inline: 10px; }
  .world-map-viewport, .world-map-leaderboard { border-radius: 13px; }
  .world-map-panel > .world-map-viewport { margin-inline: 10px; }
  .world-map-leaderboard-heading { padding: 9px 11px 7px; }
  .world-map-leaderboard-list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr); grid-template-rows: repeat(2, 1fr); gap: 3px; overflow-x: auto; overflow-y: hidden; }
  .world-map-leaderboard-item { min-height: 0; }
  .world-map-footer { align-items: start; flex-direction: column; gap: 8px; padding: 10px 15px 14px; }
  .world-map-footer p { max-width: none; text-align: left; font-size: .63rem; }
  .world-map-legend { gap: 6px 11px; font-size: .6rem; }
  .customizer-dialog { width: calc(100vw - 12px); height: calc(100dvh - 12px); border-radius: 19px; }
  .customizer-heading { padding: 15px 15px 12px; }
  .customizer-heading p { margin-top: 5px; font-size: .68rem; }
  .customizer-heading .customizer-balance { margin: 0; font-size: .55rem; }
  .customizer-balance span:first-child { display: none; }
  .customizer-layout { grid-template-columns: 1fr; grid-template-rows: 154px minmax(0, 1fr); }
  .customizer-preview-card { grid-template-columns: 150px minmax(0, 1fr); grid-template-rows: 1fr; align-items: center; gap: 12px; padding: 10px 15px; border-right: 0; border-bottom: 1px solid rgba(67,91,88,.12); }
  .customizer-preview-stage { min-height: 132px; height: 132px; }
  .customizer-avatar { width: 72px; height: 93px; margin-top: 18px; border-width: 3px; }
  .customizer-preview-eye { top: 34px; width: 8px; height: 11px; box-shadow: inset 0 -3px 0 #273048; }
  .customizer-preview-eye-left { left: 18px; }
  .customizer-preview-eye-right { right: 18px; }
  .customizer-preview-mouth { top: 55px; width: 15px; height: 8px; border-bottom-width: 3px; }
  .customizer-preview-arm { top: 48px; width: 40px; height: 17px; border-width: 3px; }
  .customizer-preview-arm-left { right: 51px; }
  .customizer-preview-arm-right { left: 51px; }
  .customizer-preview-headwear.is-beanie { width: 58px; height: 35px; border-width: 3px; box-shadow: inset 0 -7px 0 var(--headwear-accent); }
  .customizer-preview-headwear.is-beanie::before { top: -15px; width: 18px; height: 18px; border-width: 3px; }
  .customizer-preview-headwear.is-party-hat { width: 56px; height: 58px; }
  .customizer-preview-shadow { bottom: 10px; width: 92px; height: 17px; }
  .customizer-preview-card > p { text-align: left; }
  .customizer-options { padding: 16px 15px 6px; }
  .customizer-earn-note { margin-bottom: 13px; }
  .customizer-choice-grid { grid-template-columns: 1fr; }
  .customizer-choice-card { min-height: 66px; }
  .customizer-status { padding: 9px 15px; }
  .customizer-actions { padding: 11px 15px 15px; }
  .customizer-actions button { flex: 1; min-width: 0; min-height: 48px; }
  .camera-toolbar { align-items: start; flex-direction: column; }
  .camera-actions { width: 100%; justify-content: space-between; }
}

@media (pointer: coarse) {
  .mobile-controls { display: block; }
  .controls-card, .game-tip { display: none; }
  .hud-pill, .hud-map-button, .movement-dial, .touch-instruction, .npc-prompt, .flag-toast, .interaction-toast {
    backdrop-filter: none;
  }
  .npc-dialogue::backdrop, .world-map-dialog::backdrop, .customizer-dialog::backdrop {
    backdrop-filter: none;
  }
  .game-hud { top: max(11px, env(safe-area-inset-top)); left: 11px; right: 11px; }
  .hud-brand { display: none; }
  .hud-pill { height: 36px; padding: 0 10px; background: rgba(255,255,255,.72); }
  .hud-map-button { width: 44px; min-width: 44px; height: 44px; justify-content: center; padding: 0; }
  .hud-map-button .hud-map-label, .hud-map-button kbd { display: none; }
  .hud-map-button .hud-map-icon { font-size: 1.2rem; }
  .connection-banner { top: calc(max(11px, env(safe-area-inset-top)) + 47px); }
  .flag-toast { top: calc(max(11px, env(safe-area-inset-top)) + 47px); }
  .interaction-toast { top: calc(max(11px, env(safe-area-inset-top)) + 99px); }
  .npc-prompt { bottom: max(156px, calc(136px + env(safe-area-inset-bottom))); min-height: 52px; padding-inline: 18px; }
  .npc-prompt kbd { display: none; }
}

@media (pointer: coarse) and (orientation: landscape) {
  .movement-dial { width: 98px; height: 98px; bottom: max(14px, env(safe-area-inset-bottom)); }
  .movement-knob { width: 46px; height: 46px; }
  .touch-instruction { bottom: max(16px, env(safe-area-inset-bottom)); }
  .npc-prompt { bottom: max(124px, calc(108px + env(safe-area-inset-bottom))); }
  .customizer-dialog { height: calc(100dvh - 12px); }
}

@media (max-height: 520px) and (orientation: landscape) {
  .customizer-heading { padding: 10px 15px; }
  .customizer-heading p { display: none; }
  .customizer-layout { grid-template-columns: minmax(150px, .62fr) minmax(0, 1.6fr); grid-template-rows: minmax(0, 1fr); }
  .customizer-preview-card { grid-template-columns: 1fr; grid-template-rows: minmax(150px, 1fr) auto; padding: 10px; border-right: 1px solid rgba(67,91,88,.12); border-bottom: 0; }
  .customizer-preview-stage { min-height: 150px; }
  .customizer-preview-card > p span { display: none; }
  .customizer-options { padding-block: 12px 4px; }
  .customizer-options fieldset { margin-bottom: 13px; }
  .customizer-status { min-height: 32px; padding-block: 7px; }
  .customizer-actions { padding-block: 8px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .npc-prompt, .customizer-choice-card, .livestream-event-card, .overlay-frame, .overlay-controls { transition: none; }
  .livestream-event-card, .livestream-event-card.is-visible { transform: none; }
}