:root{color-scheme:dark;font-family:system-ui,sans-serif;color:#f0ebe0;background:#192723}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0}main{max-width:1060px;margin:auto;padding:30px 24px 64px}header,.party-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}header{margin-bottom:36px}.brand{font-weight:750;letter-spacing:.14em;color:#d6c68e;text-decoration:none;font-size:16px}h1{font-size:clamp(28px,4vw,42px);line-height:1.15;overflow-wrap:anywhere}h2{font-size:24px}p{line-height:1.6}.muted,#platform{color:#bed0c5}nav{display:flex;gap:10px;margin:20px 0}nav button[aria-pressed=false],.secondary{background:transparent;color:#e5dcc5;border:1px solid #809688}button,a,input,select,textarea{font:inherit}button{padding:12px 18px;background:#d6c68e;color:#192723;border:1px solid transparent;border-radius:8px;cursor:pointer;font-weight:600}button:disabled{opacity:.5;cursor:wait}a{color:#d6c68e}label{display:block;margin:18px 0}input,select,textarea{display:block;width:100%;margin-top:8px;padding:12px;border:1px solid #738878;border-radius:8px;background:#22372f;color:#fff}textarea{resize:vertical}fieldset{border:0;padding:0;margin:24px 0}legend{font-weight:650}button:focus-visible,a:focus-visible,input:focus,select:focus,textarea:focus{outline:3px solid #eed689;outline-offset:3px}.columns{display:grid;grid-template-columns:1.2fr 1fr;gap:48px}#preview{height:380px;background:#22372f;border-radius:20px;overflow:hidden}aside{padding-top:25px;align-self:start;position:sticky;top:20px}canvas{display:block;max-width:100%}.color-swatches{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}.color-swatches label{margin:0;position:relative}.color-swatches input{position:absolute;opacity:0;width:1px;height:1px}.color-swatches span{display:block;width:36px;height:36px;border-radius:50%;background:var(--color);border:2px solid #92a596;cursor:pointer}.color-swatches input:checked+span{outline:3px solid #f5e4a9;outline-offset:3px}.color-swatches input:focus-visible+span{outline:3px dashed #fff;outline-offset:4px}#error{background:#542f28;padding:16px;border-radius:6px}#notice:empty{display:none}.description{white-space:pre-wrap;overflow-wrap:anywhere;max-height:220px;overflow:auto}#invite-info{border-bottom:1px solid #536a5c;padding-bottom:16px}#invitation{margin-top:36px;border-top:1px solid #536a5c;padding-top:16px;max-width:650px}.invite-code{font-size:28px;letter-spacing:.1em;font-weight:700}#qr{display:block;background:white;border-radius:8px;width:min(100%,320px);height:auto;margin:20px 0 12px}#auth-error a{display:block;margin-top:20px}.eyebrow{font-size:14px;color:#d6c68e}#code-form{max-width:600px}#submit{width:100%}@media(max-width:650px){main{padding:20px 16px}.columns{grid-template-columns:1fr;gap:16px}aside{position:static;padding:0;grid-row:1}#preview{height:230px}header{align-items:start;flex-direction:column;gap:8px;margin-bottom:20px}nav button{flex:1;padding:12px 8px}.party-heading{align-items:start}.invite-code{font-size:22px}}

.brand { display:inline-flex; align-items:center; gap:10px; max-width:100%; }
.brand-icon { display:block; width:40px; height:40px; flex-shrink:0; object-fit:contain; }
.brand > span { min-width:0; overflow-wrap:anywhere; }
main:has(#party:not([hidden])) .brand-icon { width:32px; height:32px; }

/* Shared select component: native form semantics, custom accessible popup. */
.custom-select { position: relative; margin-top: 8px; }
.custom-select__native { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; border: 0; opacity: 0; pointer-events: none; clip-path: inset(50%); }
.custom-select__trigger { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 50px; padding: 13px 16px; border: 1px solid #627d6d; border-radius: 12px; background: linear-gradient(135deg, #2b4438, #22372f); color: #f0ebe0; font-weight: 500; text-align: left; box-shadow: inset 0 1px 0 #ffffff08; transition: border-color .15s, box-shadow .15s; }
.custom-select__trigger:hover:not(:disabled) { border-color: #b2bd94; }
.custom-select__trigger.is-placeholder { color: #afc0b5; }
.custom-select__trigger[aria-invalid=true] { border-color: #ecac91; }
.custom-select__value { overflow: hidden; text-overflow: ellipsis; }
.custom-select__chevron { flex: 0 0 8px; height: 8px; border-right: 1.5px solid #d6c68e; border-bottom: 1.5px solid #d6c68e; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.is-open .custom-select__trigger { border-color: #d6c68e; box-shadow: 0 0 0 3px #d6c68e15; }
.is-open .custom-select__chevron { transform: translateY(2px) rotate(225deg); }
.custom-select__list { position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; right: 0; padding: 6px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid #5c7566; border-radius: 14px; background: #243b30; box-shadow: 0 16px 40px #08140e66, 0 4px 10px #08140e33; }
.opens-up .custom-select__list { top: auto; bottom: calc(100% + 8px); }
.custom-select__option { position: relative; min-height: 44px; padding: 12px 38px 12px 12px; border-radius: 8px; color: #e2e9de; font-size: 16px; cursor: pointer; }
.custom-select__option:hover:not([aria-disabled=true]), .custom-select__option.is-active { background: #3a5542; }
.custom-select__option[aria-selected=true] { color: #f0dfa5; background: #d6c68e13; }
.custom-select__option[aria-selected=true]::after { content: '✓'; position: absolute; right: 13px; color: #e8d394; }
.custom-select__option[aria-disabled=true] { opacity: .4; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .custom-select__trigger, .custom-select__chevron { transition: none; } }

/* Consistent action spacing: use a button-row for neighbouring actions. */
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-block: 20px; }
.button-row > button, .button-row > a { margin: 0; }
#auth-error .button-row > a { margin: 0; padding-block: 10px; }
#code-form { margin-bottom: 28px; }
#setup nav { gap: 12px; margin-bottom: 28px; }
#submit { margin-top: 8px; }
#reconnect { margin-block: 8px 16px; }
#leave { flex-shrink: 0; }
#copy { margin-block: 4px 8px; }
#copy-status:empty { display: none; }
#qr-open { display: block; width: fit-content; margin-block: 16px; }
#qr-open img { margin: 0; }
.button-link { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 12px 18px; border: 1px solid #809688; border-radius: 8px; color: #e5dcc5; text-decoration: none; font-weight: 600; }
.button-link:hover { background: #ffffff08; }
#rotate { display: block; margin-top: 24px; }
#invitation > .muted { margin-top: 12px; }
@media (max-width: 650px) {
  .button-row { align-items: stretch; }
  .button-row > button, .button-row > a { flex: 1 1 180px; text-align: center; }
}

.custom-select__option + .custom-select__option { margin-top: 4px; }

.apartment { position:relative; width:100%; height: min(68vh,620px); min-height:340px; overflow:hidden; border-radius:20px; background:#192723; margin-top:24px; }
.apartment canvas { display:block; touch-action:none; width:100%; height:100%; }
.apartment canvas:focus-visible { outline:3px solid #e9c481; outline-offset:-3px; }
.camera-actions { margin:0; position:absolute; top:16px; right:16px; z-index:1; }
.camera-actions button { background:#f4efdfe8; color:#243b30; box-shadow:0 3px 14px #0002; }
.joystick { display:none; position:absolute; bottom:24px; left:24px; width:112px; height:112px; border-radius:50%; background:#ffffff25; border:2px solid #ffffff90; touch-action:none; align-items:center; justify-content:center; user-select:none; }
.joystick span { width:44px; height:44px; border-radius:50%; background:#eee9d9d9; box-shadow:0 3px 10px #0003; pointer-events:none; }
.scene-help { line-height:1.6; margin:16px 0 24px; }
@media (pointer:coarse) { .joystick {display:flex;} .apartment {height:65vh;} }

/* The apartment uses the viewport width; surrounding content stays readable. */
main:has(#party:not([hidden])) { max-width:none; padding-inline:0; padding-top:16px; }
main:has(#party:not([hidden])) > :not(#party),
#party > :not(.apartment) { width:calc(100% - 48px); max-width:1012px; margin-inline:auto; }
main:has(#party:not([hidden])) > header { margin-bottom:20px; }
#party .party-header {padding:18px 20px;border:1px solid #78958440;border-radius:16px;background:linear-gradient(115deg,#29403699,#20332c66);}
#party .party-heading {gap:16px;align-items:center;}
.party-heading-copy {min-width:0;flex:1;}
#party .party-header .eyebrow {margin:0 0 5px;font-size:10px;line-height:1.3;letter-spacing:.16em;color:#cbbc87;}
#party .party-header h1 {margin:0;font-size:clamp(21px,2.5vw,29px);line-height:1.2;letter-spacing:-.025em;}
.party-heading-actions {flex:0 0 auto;margin:0;}
.party-heading-actions > #leave {flex:0 0 auto;}
#leave {display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:9px 13px;border-color:#92a59655;font-size:13px;}
#leave svg {width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
#party-description {margin:10px 0 0;max-height:72px;font-size:13px;line-height:1.5;color:#c0cfc5;}
.party-meta {display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:12px;padding-top:12px;border-top:1px solid #78958430;}
.party-meta p {margin:0;font-size:12px;line-height:1.5;overflow-wrap:anywhere;min-width:0;}
#welcome {color:#c6d5cb;flex:1;}
#connection {display:flex;align-items:baseline;gap:7px;color:#d3cba9;max-width:100%;}
#connection::before {content:'';width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:#cfb56f;align-self:flex-start;margin-top:6px;}
#connection[data-state=connected] {color:#a8cfb5;}
#connection[data-state=connected]::before {background:#93c5a3;box-shadow:0 0 0 3px #93c5a310;}
.party-reconnect:has(button[hidden]) {display:none;}
.party-reconnect {margin:12px 0 0;}
#reconnect {font-size:13px;min-height:44px;}
#scene-status {margin:12px 0 0;font-size:13px;line-height:1.5;color:#efd1ad;}
#scene-status:empty {display:none;}
main:has(#party:not([hidden])) > header {margin-bottom:12px;}
main:has(#party:not([hidden])) .brand {font-size:12px;letter-spacing:.08em;}
main:has(#party:not([hidden])) #platform {font-size:11px;}
#party > #invitation { max-width:1012px; }
.apartment { height:clamp(320px,56.25vw,80vh); height:clamp(min(320px,80svh),56.25vw,80svh); min-height:0; border-radius:0; margin-top:20px; }
@media (max-width:650px) {
  main:has(#party:not([hidden])) > :not(#party),
  #party > :not(.apartment) { width:calc(100% - 32px); }
  main:has(#party:not([hidden])) > header { flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px 16px; }
  main:has(#party:not([hidden])) .brand { letter-spacing:.04em; }
  .apartment { height:65vh; height:65svh; }
  .camera-actions { top:12px; right:12px; }
  .camera-actions button { padding:10px 14px; }
  .joystick { bottom:20px; left:20px; }
}
@media (orientation:landscape) and (max-height:500px) {
  .apartment { height:80vh; height:80svh; }
}

.camera-actions .camera-zoom { display:inline-flex; align-items:center; justify-content:center; flex:0 0 44px; width:44px; height:44px; padding:10px; }
.camera-zoom svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.camera-actions { align-items:center; max-width:calc(100% - 24px); }

#chat { margin-block:28px; padding:24px; border:1px solid #536a5c; border-radius:16px; background:#20332b; }
#chat h2 {margin-top:0;} .chat-log {list-style:none;padding:0;max-height:300px;overflow:auto;overscroll-behavior:contain;}
.chat-log:empty {display:none;} .chat-log li {padding:12px 0;border-bottom:1px solid #ffffff12;}
.chat-log p {white-space:pre-wrap;overflow-wrap:anywhere;margin:6px 0;} .chat-meta {color:#d6c68e;font-size:13px;}
.chat-log .button-row {margin:8px 0 0;} #chat form .button-row {margin-bottom:0;}
.avatar-labels {position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.avatar-label {position:absolute;transform:translate(-50%,-100%);max-width:190px;text-align:center;}
.avatar-name {display:inline-block;padding:3px 8px;border-radius:6px;background:#15251ee6;color:#fff;font-size:12px;max-width:min(160px,100%);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.speech-bubble {background:#f3eedf;color:#1b2b23;padding:9px 12px;margin-bottom:7px;border-radius:12px;box-shadow:0 3px 12px #0003;font-size:13px;line-height:1.4;overflow:hidden;overflow-wrap:anywhere;white-space:pre-wrap;min-width:80px;}
.speech-bubble-text {display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}
@media(max-width:650px){#chat{padding:16px;} .avatar-label{max-width:150px;}}

.avatar-label::after {content:"";position:absolute;top:100%;left:50%;height:var(--stem,8px);width:1px;background:#e5dcc580;}

/* Chat floats above its launcher in the lower-right corner of the game. */
.chat-icon-button {display:inline-flex;align-items:center;justify-content:center;padding:10px;flex:0 0 auto;}
.chat-icon-button svg {width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.chat-toggle {position:absolute;right:16px;bottom:16px;z-index:4;width:52px;height:52px;border-radius:50%;background:#d6c68e;color:#192723;box-shadow:0 4px 18px #0005;}
.chat-toggle[aria-expanded=true] {background:#f0e1b2;}
#apartment #chat {position:absolute;right:16px;bottom:80px;z-index:5;width:min(370px,calc(100% - 32px));height:min(460px,calc(100% - 96px));max-height:calc(100% - 96px);margin:0;padding:16px;display:flex;flex-direction:column;gap:10px;background:#20332bf5;box-shadow:0 12px 40px #0006;overflow:hidden;}
.chat-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0;}
#chat .chat-heading h2 {font-size:18px;margin:0;}
#chat [data-chat-close] {width:36px;height:36px;border-radius:8px;background:transparent;color:#e5dcc5;}
#chat [data-chat-close]:hover {background:#ffffff12;}
#chat [data-chat-status] {margin:0;font-size:12px;line-height:1.4;flex-shrink:0;}
#chat .chat-log {flex:1;min-height:0;max-height:none;margin:0;}
#chat .chat-log:empty {display:block;}
#chat form {flex-shrink:0;}
#chat form label {margin:0;font-size:13px;}
#chat textarea {min-height:42px;max-height:70px;margin-top:5px;padding:9px 10px;resize:none;}
#chat form .button-row {margin:8px 0 0;gap:8px;}
#chat form .button-row > button {flex:0 0 auto;padding:9px 14px;}
#chat form .button-row > span {font-size:11px;flex:1;}
@media(max-width:650px){#apartment #chat{right:12px;bottom:76px;width:calc(100% - 24px);height:calc(100% - 88px);max-height:calc(100% - 88px);padding:12px;gap:8px;} .chat-toggle{right:12px;bottom:12px;}}
@media(max-height:500px) and (orientation:landscape){#apartment #chat{gap:4px;padding:8px;}#chat [data-chat-status],#chat form .button-row > span{display:none;}#chat form label{font-size:0;}#chat form{display:flex;gap:8px;align-items:end;}#chat form label{flex:1;}#chat textarea{font-size:14px;margin:0;}#chat form .button-row{margin:0;}#chat .chat-heading h2{font-size:16px;}}

#apartment #chat {border:1px solid #66857299;border-radius:20px;background:linear-gradient(155deg,#2a4238fa,#192d25fa 65%);box-shadow:0 16px 48px #06130a80,inset 0 1px #ffffff0a;}
.chat-heading-title {display:flex;gap:10px;align-items:center;min-width:0;}
.chat-heading-mark {display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:#d6c68e19;color:#e4d7a9;flex-shrink:0;}
.chat-heading-mark svg {width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
#chat .chat-heading h2 {font-weight:650;letter-spacing:-.02em;font-size:17px;}
#chat [data-chat-status] {padding:8px 10px;border:1px solid #ffffff08;border-radius:10px;background:#0e211840;color:#b6cabd;}
#chat [data-chat-status]::before {content:"";display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:7px;background:#91a398;vertical-align:middle;}
#chat[data-connected=true] [data-chat-status]::before {background:#95cda1;box-shadow:0 0 6px #95cda133;}
#chat .chat-log {padding:2px 3px 8px;scrollbar-width:thin;scrollbar-color:#577361 transparent;}
#chat .chat-log:empty::before {content:"Здесь появится ваш разговор. Подойдите к друзьям и поздоровайтесь.";display:block;padding:24px 16px;text-align:center;color:#a6bbae;font-size:13px;line-height:1.6;}
#chat .chat-message {width:fit-content;max-width:92%;padding:10px 12px;margin:8px 0;border:1px solid #ffffff09;border-radius:14px 14px 14px 4px;background:#ffffff08;}
#chat .chat-message.is-own {margin-left:auto;background:#d6c68e16;border-color:#d6c68e22;border-radius:14px 14px 4px 14px;}
#chat .chat-meta {font-size:11px;font-weight:600;color:#abc6b5;}
#chat .is-own .chat-meta {color:#e0cf97;}
#chat .chat-message p {font-size:14px;line-height:1.5;margin:5px 0 0;color:#f0f0e5;}
#chat .chat-message > .muted {display:block;margin-top:6px;font-size:11px;}
#chat form {padding-top:10px;border-top:1px solid #ffffff0d;}
#chat form label {color:#bacebf;font-size:12px;}
#chat textarea {border-radius:12px;border-color:#6d887c70;background:#10251b70;line-height:1.5;color:#f4f3e9;}
#chat textarea::placeholder {color:#8da89a;}
#chat textarea:focus {outline:2px solid #d6c68e80;outline-offset:1px;border-color:#d6c68e;}
#chat form .button-row > button {border-radius:10px;background:#dfd09f;box-shadow:0 2px 8px #0002;}
#chat form .button-row > button:hover:not(:disabled) {background:#ecddb0;}
@media(max-height:500px) and (orientation:landscape){#chat form{padding-top:4px;}#chat .chat-heading-mark{width:28px;height:28px;}#chat .chat-log:empty::before{padding:8px;}}

#chat [data-chat-close] {padding:4px;}

.audio-panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:20px;margin:20px 0}
.audio-panels>section{padding:20px;border:1px solid var(--border,#536a5c);border-radius:16px;background:var(--panel,#20342b)}
.audio-panels h2{margin-top:0}.audio-panels .button-row{margin:12px 0}.audio-panels input[type=range]{width:100%}
.audio-panels progress{width:100%;margin:12px 0}.audio-panels [data-ptt]{touch-action:none;user-select:none;margin:12px 0}
.audio-panels .voice-peer{display:flex;align-items:center;gap:10px;margin:8px 0}.voice-peer input{width:auto}

.audio-panels p{overflow-wrap:anywhere}.audio-panels [data-web]{margin-top:12px}

.audio-panels>.music-panel{background:linear-gradient(145deg,#2c4338,#1b3028);border-color:#617460;box-shadow:inset 0 1px #ffffff0a;align-self:start;padding:24px}
.music-panel svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.music-heading{display:flex;justify-content:space-between;align-items:start;gap:12px}.music-panel .music-eyebrow{margin:0 0 8px;font-size:10px;letter-spacing:.18em;color:#baC99d;font-weight:700}.music-panel h2{font-size:21px;margin:0;letter-spacing:-.03em}.music-badge{font-size:11px;padding:6px 9px;background:#ffffff09;border:1px solid #ffffff12;border-radius:20px;white-space:nowrap;color:#b9c8bc}
.music-track{display:flex;align-items:center;gap:16px;margin:26px 0 24px}.music-art{display:grid;place-items:center;position:relative;width:66px;height:66px;flex-shrink:0;border-radius:18px;background:radial-gradient(ellipse at top left,#a5b18b,#637e68 60%,#425e4c);box-shadow:0 6px 18px #0002;color:#eff1d8}.music-art>svg{width:30px;height:30px}.music-track-copy{min-width:0}.music-panel [data-track]{font-size:16px;font-weight:650;line-height:1.45;margin:0 0 6px}.music-panel [data-caption]{font-size:12px;color:#b3c3b7;margin:0;line-height:1.4}
.music-panel input[type=range]{appearance:none;-webkit-appearance:none;height:6px;border:0;border-radius:8px;padding:0;margin:12px 0;background:#52695a;cursor:pointer;accent-color:#dfd09f}.music-panel #music-seek{background:linear-gradient(to right,#dfd09f var(--fill,0%),#52695a var(--fill,0%))}.music-panel input[type=range]::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border-radius:50%;background:#f1dfaa;border:2px solid #f1dfaa;box-shadow:0 1px 5px #0004}.music-panel input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#f1dfaa;border:0}.music-panel input[type=range]:disabled{cursor:default}.music-panel input[type=range]:disabled::-webkit-slider-thumb{visibility:hidden}
.music-times{display:flex;justify-content:space-between;font-size:11px;font-variant-numeric:tabular-nums;color:#b8c8bc;margin-top:10px}.music-panel .music-transport{justify-content:center;margin:22px 0 26px;flex-wrap:nowrap}.music-panel button{display:inline-flex;align-items:center;justify-content:center;gap:9px}.music-panel .music-play{min-width:155px;border-radius:30px;background:#e1d1a1;min-height:48px;box-shadow:0 5px 15px #0002}.music-panel .music-stop{width:46px;height:46px;padding:0;flex:0 0 46px;border-radius:50%;border-color:#718473}.music-play:hover:not(:disabled){background:#f0dfaf}.music-panel .music-volume label{display:flex;align-items:center;gap:9px;font-size:12px;color:#cbd7ce;margin:0 0 10px}.music-volume output{margin-left:auto;font-variant-numeric:tabular-nums}.music-volume svg{width:18px;height:18px}.music-upload{margin-top:24px;border-top:1px solid #ffffff13;padding-top:8px}.music-upload button{font-size:12px;padding:10px 12px;border-color:#677e6c;border-radius:10px}.music-file-hint{font-size:11px;color:#a7bbaa}.music-panel .music-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.music-panel .music-unlock:has([hidden]){display:none}.music-panel [data-error]:empty{display:none}.music-panel [data-error]{font-size:12px;color:#efbd9e}.music-guest{font-size:12px;color:#a9beaf;text-align:center;margin:20px 0 0}.music-panel [data-upload-status]{font-size:12px;color:#c9d5bc;margin:0}
.music-equalizer{position:absolute;right:7px;bottom:7px;display:none;align-items:end;gap:2px;height:12px}.music-equalizer i{width:3px;height:9px;background:#f1dfa8;border-radius:2px;animation:music-level .8s ease-in-out infinite alternate}.music-equalizer i:nth-child(2){animation-delay:-.3s}.music-equalizer i:nth-child(3){animation-delay:-.6s}.music-panel[data-playing=true] .music-equalizer{display:flex}.music-panel[data-playing=true] .music-badge{color:#d5e6b6;background:#a8c88b18;border-color:#a8c88b33}@keyframes music-level{to{height:3px}}@media(prefers-reduced-motion:reduce){.music-equalizer i{animation:none}}@media(max-width:650px){.audio-panels>.music-panel{padding:20px}.music-panel .music-transport>.music-play{flex:0 1 180px}.music-upload .button-row>button{flex:0 1 auto}.music-heading{align-items:center}.music-panel h2{font-size:19px}}

.audio-panels>.voice-panel{background:linear-gradient(145deg,#293e35,#1b3028);border-color:#617460;box-shadow:inset 0 1px #ffffff0a;align-self:start;padding:24px}
.voice-panel svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.voice-heading{display:flex;align-items:start;justify-content:space-between;gap:12px}.voice-panel .voice-eyebrow{margin:0 0 8px;font-size:10px;letter-spacing:.16em;color:#bac99d;font-weight:700}.voice-panel h2{font-size:21px;letter-spacing:-.03em;margin:0}.voice-badge{font-size:11px;padding:6px 9px;border:1px solid #ffffff12;background:#ffffff09;color:#bac9bd;border-radius:20px;white-space:nowrap}.voice-panel[data-mic-state=on] .voice-badge{color:#d5e6b6;background:#a8c88b18;border-color:#a8c88b33}
.voice-summary{display:flex;align-items:center;gap:16px;margin:26px 0 22px}.voice-art{display:grid;place-items:center;position:relative;width:66px;height:66px;flex:0 0 66px;border-radius:18px;color:#e9e3cb;background:radial-gradient(ellipse at top left,#80978a,#536f61 65%,#3c5a4b);box-shadow:0 6px 18px #0002}.voice-art>svg{width:29px;height:29px}.voice-panel .voice-summary-title{font-weight:650;font-size:15px;line-height:1.45;margin:0 0 6px}.voice-panel .voice-description{font-size:12px;color:#b3c3b7;line-height:1.4;margin:0}
.voice-panel button,.voice-panel .button-link{display:inline-flex;align-items:center;justify-content:center;gap:9px}.voice-panel .voice-actions{gap:10px;margin:0 0 24px}.voice-panel .voice-mic{border-radius:24px;min-height:46px;background:#e1d1a1;box-shadow:0 4px 12px #0002;font-size:13px;padding:12px 16px;flex:1 1 200px;white-space:nowrap}.voice-panel .voice-listen{min-height:46px;border-color:#718473;border-radius:24px;font-size:12px;padding:12px;flex:1 1 145px;white-space:nowrap}.voice-panel[data-mic-state=on] .voice-mic{background:#d0ddba}.voice-panel .voice-mic:hover:not(:disabled){background:#f0dfaf}.voice-panel .voice-mode-label{font-size:12px;color:#cbd7ce;margin:0}.voice-panel .custom-select__trigger{font-size:13px;min-height:46px;padding:12px;border-radius:12px;box-shadow:none;background:#ffffff04}.voice-panel .custom-select__option{font-size:13px}.voice-panel .voice-ptt{width:100%;margin:12px 0 0;min-height:50px;border:1px dashed #8ba17f;border-radius:12px;background:#a2bc8512;color:#d8e4c6;font-size:13px;padding:12px}.voice-panel .voice-ptt[aria-pressed=true]{background:#d1dfb8;color:#20342b;border-style:solid}.voice-panel .voice-status{font-size:12px;line-height:1.5;color:#c3d0bf;margin:12px 0 20px;min-height:36px}
.voice-neighbors-heading{display:flex;align-items:center;gap:8px;border-top:1px solid #ffffff13;padding-top:18px;color:#c3d1c5;font-size:12px}.voice-neighbors-heading svg{width:17px;height:17px}.voice-panel [data-peer-count]{margin-left:auto;font-size:11px;min-width:22px;text-align:center;padding:3px 6px;border-radius:8px;background:#ffffff0a;color:#cfddc7}.voice-panel .voice-empty{font-size:12px;color:#9eb3a4;text-align:center;padding:10px 12px;line-height:1.6;margin:12px 0 0}.voice-peers{max-height:192px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#617a66 transparent;margin-top:10px}.voice-panel .voice-peer{position:relative;display:flex;align-items:center;gap:10px;margin:4px 0;min-height:46px;padding:5px 8px;border-radius:11px;cursor:pointer;background:#ffffff03}.voice-panel .voice-peer:hover{background:#ffffff08}.voice-peer-avatar{display:grid;place-items:center;flex:0 0 30px;height:30px;border-radius:10px;background:#839a7620;color:#d0dcb9;font-weight:650;font-size:12px}.voice-peer-name{font-size:13px;min-width:0;overflow-wrap:anywhere;flex:1}.voice-mute-icon{display:grid;place-items:center;flex:0 0 34px;height:34px;border-radius:50%;color:#bed1b5;background:#ffffff04}.voice-mute-icon svg{width:17px;height:17px}.voice-peer[data-muted=true] .voice-mute-icon{background:#b884681e;color:#dfb89e}.voice-panel .voice-mute-input{position:absolute;opacity:0;width:1px;height:1px;margin:0;padding:0}.voice-peer:has(input:focus-visible){outline:2px solid #e1d1a1;outline-offset:-2px}.voice-panel .voice-peer-hint{font-size:11px;text-align:center;color:#9fb4a5;margin:10px 0 0}.voice-panel [data-web]{font-size:12px;border-radius:10px}
.voice-signal{position:absolute;bottom:7px;right:7px;display:flex;gap:2px;align-items:end;height:10px}.voice-signal i{width:3px;height:3px;border-radius:2px;background:#b8cab5}.voice-panel[data-speaking=true] .voice-signal i{background:#f1dfa8;animation:voice-level .45s ease-in-out infinite alternate}.voice-signal i:nth-child(2){animation-delay:-.1s!important}.voice-signal i:nth-child(3){animation-delay:-.3s!important}.voice-signal i:nth-child(4){animation-delay:-.2s!important}@keyframes voice-level{to{height:10px}}@media(prefers-reduced-motion:reduce){.voice-panel[data-speaking=true] .voice-signal i{animation:none;height:9px}}@media(max-width:650px){.audio-panels>.voice-panel{padding:20px}.voice-panel h2{font-size:19px}.voice-panel .voice-actions>button{flex:1 1 100%}.voice-heading{align-items:center}.voice-panel .voice-eyebrow{font-size:9px;letter-spacing:.13em}}

.voice-panel .custom-select__trigger{justify-content:space-between}

.music-dj-management { display: grid; gap: 12px; margin-top: 20px; }
.music-dj-management[hidden] { display: none; }

/* Administrator workspace. */
.admin-page { max-width: 1400px; }
.admin-page #login { max-width: 440px; }
.admin-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.admin-stats > div { padding: 24px; background: #22372f; border: 1px solid #526c5a; border-radius: 12px; }
.admin-stats strong, .admin-stats span { display: block; }
.admin-stats strong { font-size: 36px; color: #eed689; }
.admin-filters { display: flex; align-items: end; gap: 20px; flex-wrap: wrap; margin-top: 24px; }
.admin-filters label { flex: 1 1 240px; }
.admin-table-wrap { overflow-x: auto; }
.admin-host-key { min-width: 220px; font-family: monospace; margin-bottom: 12px; }
.admin-page table { width: 100%; border-collapse: collapse; text-align: left; }
.admin-page th, .admin-page td { padding: 14px 12px; border-bottom: 1px solid #526c5a; vertical-align: top; }
.admin-page th { color: #bed0c5; font-size: 14px; }
.admin-page td small { display: block; font-size: 12px; overflow-wrap: anywhere; margin-top: 6px; }
.admin-party-link { padding: 0; background: none; color: #eed689; text-align: left; overflow-wrap: anywhere; }
.admin-page #detail { margin-top: 36px; border-top: 1px solid #738878; padding-top: 20px; }
.admin-metadata { display: grid; grid-template-columns: minmax(100px, 180px) 1fr; gap: 12px; }
.admin-metadata dd { margin: 0; overflow-wrap: anywhere; }
.admin-page #participants li { padding-block: 8px; overflow-wrap: anywhere; }
.admin-page #close-party { max-width: 680px; padding-top: 16px; }
@media (max-width: 650px) { .admin-stats { grid-template-columns: 1fr; } .admin-page header { align-items: start; flex-direction: column; } }

/* A compact invitation card, with a full-resolution QR available on click. */
#party > #invitation { max-width: 880px; padding-top: 26px; }
.invitation-heading h2 { margin: 6px 0; }
.invitation-heading .eyebrow { font-size: 11px; letter-spacing: .12em; margin: 0; }
#invitation-title { margin: 0 0 18px; overflow-wrap: anywhere; }
#invitation > .button-row:has(> [hidden]) { display: none; }
.invitation-card { display: grid; grid-template-columns: 176px minmax(0, 1fr); gap: 28px; align-items: center; background: #22372f; border: 1px solid #536a5c; border-radius: 18px; padding: 24px; }
.invitation-qr #qr-open { margin: 0; width: 176px; border-radius: 10px; overflow: hidden; }
.invitation-qr #qr { width: 176px; height: 176px; margin: 0; border-radius: 0; }
.invitation-qr p { margin: 10px 0 0; text-align: center; font-size: 12px; line-height: 1.5; color: #bed0c5; }
.invitation-top { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 18px; }
.invitation-label { font-size: 12px; color: #bed0c5; }
.invitation-details .invite-code { margin: 6px 0 0; font-size: clamp(16px, 2.2vw, 22px); letter-spacing: .055em; white-space: nowrap; font-variant-numeric: tabular-nums; color: #f0dfa5; }
.invitation-details > label { margin: 0; }
#invite-url { margin-top: 6px; font-size: 13px; padding: 10px 12px; color: #d3dfd7; }
.invitation-actions.button-row { margin: 14px 0 0; }
.invitation-actions #copy, .invitation-actions #qr-download { margin: 0; min-height: 42px; padding: 10px 14px; font-size: 13px; }
#copy-status { margin: 10px 0 0; font-size: 12px; color: #f0dfa5; }
.invitation-footer { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 16px; }
.invitation-footer .button-row { margin: 0; }
.invitation-footer #rotate { margin: 0; padding: 9px 12px; font-size: 12px; }
.invitation-footer p { margin: 0; font-size: 12px; line-height: 1.5; }
@media (max-width: 650px) {
  .invitation-card { grid-template-columns: 1fr; gap: 20px; padding: 18px; }
  .invitation-qr { display: flex; align-items: center; gap: 16px; }
  .invitation-qr #qr-open, .invitation-qr #qr { width: 144px; height: 144px; flex-shrink: 0; }
  .invitation-qr p { margin: 0; text-align: left; }
  .invitation-top { flex-wrap: wrap; gap: 16px; }
  .invitation-details .invite-code { font-size: 19px; }
  .invitation-actions.button-row > button, .invitation-actions.button-row > a { flex: 1 1 120px; }
}

/* Host controls remain usable on narrow screens and with long names. */
#host-panel{margin:24px 0;padding:24px;border:1px solid #d6d0c5;border-radius:16px}
.host-participants{list-style:none;padding:0;margin:16px 0}
.host-person{padding:12px 0;border-bottom:1px solid #d6d0c5}
.host-person span{flex:1;min-width:160px;overflow-wrap:anywhere}
#server-error{margin:24px 0}

#scene-status:not(:empty){padding:16px;border:1px solid #d6d0c5;border-radius:12px}
.apartment.scene-unavailable{height:220px;min-height:220px}
.scene-unavailable .camera-actions,.scene-unavailable .joystick,.scene-unavailable canvas{display:none}

#session-ended{max-width:720px;margin:48px auto;padding:clamp(20px,5vw,40px);border:1px solid #d6d0c5;border-radius:20px}
#session-ended:focus{outline:none}
#session-ended .button-row{margin-top:28px}
#kick-explanation{margin-top:24px;overflow-wrap:anywhere}

.host-key-card { margin: 16px 0 24px; }
.host-key-card .button-row, #host-login .button-row { margin-top: 12px; }

.emote-actions { position:absolute; left:16px; bottom:16px; z-index:4; margin:0; flex-wrap:nowrap; }
.emote-button { position:relative; display:inline-flex; align-items:center; justify-content:center; flex:0 0 48px; width:48px; height:48px; border-radius:50%; padding:11px; background:#20392feF; color:#eee8d7; border:1px solid #779782; box-shadow:0 4px 14px #0004; }
.emote-button svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.emote-button[aria-pressed=true] { background:#d6c68e; color:#192723; border-color:#f0e1b2; }
.emote-button[aria-disabled=true] { cursor:default; }
.emote-button.cooling { opacity:.5; }
.emote-tooltip { position:absolute; left:0; bottom:calc(100% + 10px); padding:7px 10px; border-radius:8px; background:#14251ff5; color:#fff5dd; font-size:13px; white-space:nowrap; pointer-events:none; visibility:hidden; opacity:0; }
.emote-button:hover .emote-tooltip,.emote-button:focus-visible .emote-tooltip { visibility:visible; opacity:1; }
.emote-status { position:absolute; left:0; bottom:calc(100% + 48px); width:240px; font-size:13px; color:#fff5dd; background:#14251fee; border-radius:8px; }
.emote-status:not(:empty) { padding:8px; }
@media(pointer:coarse) { .emote-actions {bottom:140px;left:16px;} }
@media(max-width:650px) { .emote-actions {left:12px;gap:12px;} }

.admin-setting {margin-block:20px;max-width:520px;}
.admin-setting code {display:block;color:#d6c68e;overflow-wrap:anywhere;margin:6px 0 10px;}
.premium-control {display:inline-flex;align-items:center;gap:8px;margin:8px 0 8px 16px;}
.premium-control input {width:18px;height:18px;margin:0;}

.admin-setting input[type=checkbox] {width:20px;height:20px;margin:0;}

.admin-settings-scroll {overflow-x:auto;margin-block:20px;}
.admin-settings-table {width:100%;border-collapse:collapse;}
.admin-settings-table th,.admin-settings-table td {padding:12px;text-align:left;vertical-align:middle;border-bottom:1px solid #77978255;}
.admin-settings-table th {white-space:nowrap;}
.admin-settings-table code {overflow-wrap:anywhere;}
.admin-settings-table input {min-width:140px;margin:0;}
.admin-settings-table td:last-child input {min-width:220px;}
.admin-new-setting {max-width:580px;margin-block:20px;}
.admin-new-setting .button-row {margin-top:20px;}
#new-setting {margin-top:28px;}

.admin-settings-table td:first-child {min-width:210px;}
.admin-settings-table td:nth-child(2) {min-width:240px;}

@media(max-width:650px) {
  main:has(#party:not([hidden])) {padding-top:12px;}
  #party .party-header {padding:14px;border-radius:12px;}
  #party .party-heading {gap:10px;align-items:flex-start;}
  #party .party-header h1 {font-size:21px;}
  #leave {padding:9px 10px;gap:6px;}
  .party-meta {gap:6px;margin-top:10px;padding-top:10px;}
  .party-meta #welcome {flex-basis:100%;}
  #party-description {max-height:60px;}
  #party > .apartment {margin-top:12px;}
}

.account-panel {margin-block:0 18px;padding:10px 14px;border:1px solid #78958440;border-radius:12px;background:#22372f66;}
.account-bar {display:flex;align-items:center;justify-content:space-between;gap:12px;}
#account-label {font-size:13px;overflow-wrap:anywhere;min-width:0;}
.account-actions.button-row {margin:0;gap:12px;}
.account-actions button {min-height:44px;padding:8px 12px;font-size:12px;}
.vk-login {display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#0077ff;color:white;}
.vk-login svg {width:24px;height:24px;flex:0 0 24px;}
#profile-editor {margin-top:14px;border-top:1px solid #78958440;}
#profile-editor label {font-size:13px;margin:14px 0 8px;}
.profile-fields {display:flex;align-items:center;gap:12px;}
.profile-fields input {margin:0;min-width:0;flex:1;}
.profile-fields .button-row {margin:0;}
#profile-editor p {font-size:12px;margin:10px 0 0;}
@media(max-width:650px){.account-bar,.profile-fields{flex-wrap:wrap;}.account-actions.button-row{flex-wrap:wrap;}.account-actions.button-row>button{flex:0 1 auto;}.profile-fields input{flex-basis:100%;}}

@media(max-width:650px){.profile-fields .button-row{width:100%;}.profile-fields .button-row>button{flex:1 1 100px;}}

.premium-buy { display: inline-flex; align-items: center; gap: 8px; }
.premium-buy svg { flex-shrink: 0; }
.premium-panel { margin-top: 16px; }
.premium-panel h3 { margin: 0 0 8px; }
.premium-panel .button-row { margin-top: 8px; }
.premium-panel .button-row:not(:has(> :not([hidden]))) { display: none; }
.premium-panel [data-premium-status] { margin: 8px 0 0; }
.premium-panel [data-premium-status]:empty { display: none; }

.premium-product { display: flex; align-items: center; gap: 20px; }
.premium-product-image { width: 144px; height: 144px; flex: 0 0 144px; object-fit: cover; border-radius: 16px; }
.premium-product p { margin: 0; }
.premium-product [data-premium-price] { margin-top: 8px; font-weight: 600; }
@media (max-width: 650px) {
  .premium-product { align-items: flex-start; flex-direction: column; gap: 16px; }
  .premium-product-image { width: 128px; height: 128px; flex-basis: auto; }
}

/* Decorative icons stay in place when status text is updated via textContent. */
:is(p[role="status"], p[role="alert"], [data-chat-status]):not(:empty) {
  position: relative;
  padding-inline-start: 30px;
}
#error:not(:empty) { padding-inline-start: 46px; }
:is(p[role="status"], p[role="alert"], [data-chat-status]):not(:empty)::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.18em;
  width: 20px;
  height: 20px;
  background: currentColor;
  mask: url('/assets/notification-info.svg') center / contain no-repeat;
}
#error:not(:empty)::before { inset-inline-start: 16px; top: calc(16px + 0.18em); }
:is(p[role="alert"], [data-error]):not(:empty)::before {
  mask-image: url('/assets/notification-error.svg');
}

/* Shared notifications float above all page panels without blocking the page. */
.notifications {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(400px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px - env(safe-area-inset-top));
  overflow-y: auto;
  /* Apply the shadow after scroll clipping so rounded corners stay soft. */
  filter: drop-shadow(0 8px 14px #08140e66);
  pointer-events: none;
}
.notification {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid #738878;
  border-radius: 14px;
  background: #243b30;
  color: #f0ebe0;
  flex-shrink: 0;
  pointer-events: auto;
  animation: notification-enter .18s ease-out;
}
.notification[data-type=error] { background: #542f28; border-color: #b97b67; }
.notification[data-type=success] { border-color: #9db889; }
.notification__message { flex: 1; min-width: 0; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; }
.notification__icon { flex: 0 0 20px; height: 20px; margin-top: 2px; background: #d6c68e; mask: url('/assets/notification-info.svg') center / contain no-repeat; }
.notification[data-type=error] .notification__icon { background: #f1b5a0; mask-image: url('/assets/notification-error.svg'); }
.notification[data-type=success] .notification__icon { mask: none; background: none; color: #bdd7a9; }
.notification[data-type=success] .notification__icon::before { content: '✓'; font-weight: 700; }
.notification__close { flex: 0 0 32px; min-height: 32px; margin: -4px -4px -4px 0; padding: 0; background: transparent; color: inherit; font-size: 24px; line-height: 1; }
.notification__close:hover { background: #ffffff12; }
@keyframes notification-enter { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .notification { animation: none; } }