:root {
    --aqua-50: #e8fffc;
    --aqua-100: #c8faf4;
    --aqua-300: #6ce2d8;
    --aqua-500: #31c9bd;
    --aqua-700: #168e89;
    --sky-100: #dff5ff;
    --sky-300: #88dcff;
    --sky-500: #43b9ef;
    --coral-300: #ff9b87;
    --coral-500: #ff715d;
    --coral-700: #cf493b;
    --yellow-100: #fff4c6;
    --yellow-300: #ffdb66;
    --yellow-500: #f5bd2d;
    --lime-300: #bce96c;
    --lime-500: #83c442;
    --purple-300: #c8adff;
    --purple-500: #9271e7;
    --cream: #fffaf0;
    --paper: #fffdf8;
    --paper-2: #f6f0e4;
    --ink: #17324a;
    --ink-2: #2a4960;
    --muted: #6b8190;
    --line: #c8d8dd;
    --danger: #e95858;
    --success: #43a763;
    --window-shadow: 0 18px 50px rgba(27, 63, 79, .25), 0 4px 0 rgba(32, 79, 95, .13);
    --pixel-shadow: 0 4px 0 rgba(23, 50, 74, .18);
    --hud-height: 68px;
    --dock-height: 78px;
    color-scheme: light;
    font-family: "Trebuchet MS", "Arial Rounded MT Bold", ui-rounded, system-ui, sans-serif;
    font-synthesis: none;
    line-height: 1.4;
}

*,
*::before,
*::after { box-sizing: border-box; }

html,
body { min-width: 320px; min-height: 100%; margin: 0; }

body { color: var(--ink); background: var(--aqua-500); }

button,
input,
textarea,
select { color: inherit; font: inherit; }

button,
a,
input,
textarea,
select,
canvas { -webkit-tap-highlight-color: transparent; }

button { border: 0; }

button:not(:disabled),
a { cursor: pointer; }

button:disabled { cursor: not-allowed; opacity: .55; }

:focus-visible { outline: 3px solid #175c80; outline-offset: 3px; }

[hidden] { display: none !important; }

.sr-only {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.skip-link {
    position: fixed;
    z-index: 1000;
    top: 8px;
    left: 8px;
    padding: 10px 14px;
    border-radius: 8px;
    color: #fff;
    background: var(--ink);
    transform: translateY(-140%);
}

.skip-link:focus { transform: none; }

.ui-icon,
.pixel-button svg,
.notice svg,
.pixel-label svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.avatar-stack {
    position: relative;
    display: inline-block;
    width: 33px;
    height: 92px;
    flex: 0 0 auto;
    image-rendering: pixelated;
}

.avatar-stack img {
    position: absolute;
    inset: 0;
    width: 33px;
    height: 92px;
    object-fit: contain;
    image-rendering: pixelated;
}

/* Launcher */

.landing-page {
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    background:
        linear-gradient(180deg, #71dff3 0 54%, #44c9ae 54% 100%);
}

.landing-page::before {
    position: fixed;
    inset: 54% 0 0;
    content: "";
    opacity: .26;
    background-image:
        linear-gradient(30deg, transparent 45%, rgba(255,255,255,.75) 46% 49%, transparent 50%),
        linear-gradient(150deg, transparent 45%, rgba(255,255,255,.75) 46% 49%, transparent 50%);
    background-size: 60px 30px;
    pointer-events: none;
}

.launcher {
    position: relative;
    display: grid;
    width: min(1320px, calc(100% - 48px));
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto;
    grid-template-rows: auto 1fr auto;
}

.launcher-header {
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
}

.launcher-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--ink);
    text-decoration: none;
}

.launcher-logo {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border: 3px solid var(--ink);
    border-radius: 15px 15px 12px 12px;
    background: var(--cream);
    box-shadow: 0 5px 0 rgba(23, 50, 74, .2);
    transform: rotate(-2deg);
}

.launcher-logo img { width: 48px; height: 48px; object-fit: contain; image-rendering: pixelated; }
.launcher-brand > span:last-child { display: grid; }
.launcher-brand strong { font-size: 23px; letter-spacing: -.04em; }
.launcher-brand small { margin-top: -2px; color: #2b6c78; font-size: 12px; font-weight: 800; }

.launcher-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 2px solid rgba(23,50,74,.8);
    border-radius: 999px;
    background: rgba(255,255,255,.74);
    box-shadow: 0 3px 0 rgba(23,50,74,.15);
    font-size: 12px;
    font-weight: 900;
}

.launcher-status i,
.online-label i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #4dbe6d;
    box-shadow: 0 0 0 3px rgba(77,190,109,.18);
}
.launcher-status.is-starting { color: #8c6418; background: #fff5cf; }
.launcher-status.is-starting i { background: var(--yellow-500); box-shadow: 0 0 0 3px rgba(245,189,45,.2); }

.launcher-hero {
    position: relative;
    display: grid;
    align-items: center;
    gap: clamp(32px, 5vw, 80px);
    padding: 30px 0 54px;
    grid-template-columns: minmax(420px, 1fr) minmax(370px, 475px);
}

.launcher-copy { position: relative; z-index: 3; max-width: 680px; }

.pixel-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: 2px solid rgba(23,50,74,.5);
    border-radius: 8px;
    color: #126b71;
    background: rgba(255,255,255,.66);
    box-shadow: 3px 3px 0 rgba(23,50,74,.12);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.pixel-label svg { width: 16px; height: 16px; }

.launcher-copy h1 {
    max-width: 700px;
    margin: 22px 0 18px;
    color: #12334b;
    font-size: clamp(50px, 6.2vw, 88px);
    font-weight: 1000;
    letter-spacing: -.075em;
    line-height: .92;
    text-wrap: balance;
    text-shadow: 0 4px 0 rgba(255,255,255,.28);
}

.launcher-copy h1 span { display: block; color: #fff9dc; text-shadow: 0 4px 0 rgba(23,50,74,.17); }

.launcher-copy > p {
    max-width: 610px;
    margin: 0;
    color: #24576b;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.55;
}

.launcher-features {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    margin: 25px 0 0;
    list-style: none;
}

.launcher-features li {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 155px;
    padding: 10px 12px;
    border: 2px solid rgba(23,50,74,.22);
    border-radius: 11px;
    background: rgba(255,255,255,.78);
}

.launcher-features svg { width: 27px; height: 27px; fill: none; stroke: #116f78; stroke-width: 1.8; }
.launcher-features li > span { display: grid; }
.launcher-features strong { font-size: 12px; }
.launcher-features small { color: #397080; font-size: 10px; font-weight: 700; }

.launcher-world {
    position: absolute;
    z-index: 0;
    right: calc(50% - 110px);
    bottom: -20px;
    width: 540px;
    height: 380px;
    pointer-events: none;
    opacity: .88;
}

.pixel-cloud { position: absolute; height: 25px; border-radius: 3px; background: rgba(255,255,255,.72); box-shadow: 25px -12px rgba(255,255,255,.72), 55px 0 rgba(255,255,255,.72); }
.pixel-cloud-a { top: 12px; left: 45px; width: 60px; }
.pixel-cloud-b { top: 72px; right: 60px; width: 45px; transform: scale(.7); opacity: .72; }
.iso-platform { position: absolute; inset: 80px 20px 0; }
.platform-tile { position: absolute; width: 180px; height: 90px; background: #fbeac0; clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); filter: drop-shadow(0 8px #d5b976); }
.tile-a { left: 60px; top: 80px; }
.tile-b { left: 150px; top: 125px; }
.tile-c { left: 240px; top: 80px; }
.tile-d { left: 150px; top: 35px; }
.launcher-furni { position: absolute; z-index: 2; image-rendering: pixelated; }
.launcher-furni-plant { left: 120px; top: 58px; width: 66px; height: 108px; }
.launcher-furni-seat { left: 275px; top: 130px; width: 60px; height: 47px; }
.launcher-keko { position: absolute; z-index: 3; left: 222px; top: 77px; filter: drop-shadow(0 5px 2px rgba(23,50,74,.2)); }
.pixel-speech { position: absolute; z-index: 4; left: 250px; top: 44px; padding: 6px 10px; border: 2px solid var(--ink); border-radius: 8px 8px 8px 2px; background: #fff; box-shadow: 3px 3px 0 rgba(23,50,74,.18); font-size: 11px; font-weight: 900; }

.pixel-window {
    position: relative;
    z-index: 6;
    overflow: hidden;
    border: 3px solid var(--ink);
    border-radius: 16px 16px 12px 12px;
    color: var(--ink);
    background: var(--paper);
    box-shadow: 0 9px 0 rgba(23,50,74,.25), 0 24px 60px rgba(23,73,89,.25);
}

.pixel-window-bar {
    display: grid;
    align-items: center;
    height: 43px;
    padding: 0 13px;
    grid-template-columns: 1fr auto 1fr;
    border-bottom: 3px solid var(--ink);
    background: var(--yellow-300);
    font-size: 11px;
}

.pixel-window-bar > strong { font-size: 11px; text-transform: uppercase; }
.window-lights { display: flex; gap: 5px; }
.window-lights i { width: 9px; height: 9px; border: 2px solid var(--ink); border-radius: 50%; background: var(--coral-500); }
.window-lights i:nth-child(2) { background: #fff2a0; }
.window-lights i:nth-child(3) { background: var(--lime-300); }
.window-open { justify-self: end; padding: 3px 6px; border: 1px solid #2f8055; border-radius: 4px; color: #226c47; background: #bdef9b; font-size: 8px; font-weight: 1000; text-transform: uppercase; }
.auth-card-body { min-height: 430px; padding: 25px 28px 27px; }

.notice { display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px; margin-bottom: 14px; border: 2px solid; border-radius: 9px; font-size: 12px; font-weight: 800; }
.notice svg { width: 18px; height: 18px; flex: 0 0 auto; }
.notice-error { border-color: #e39387; color: #9e392e; background: #fff0ed; }
.notice-success { border-color: #7ac692; color: #287745; background: #edfff2; }
.notice-info { border-color: #78c5e8; color: #276e91; background: #ecf9ff; }

.auth-tabs { display: grid; gap: 5px; padding: 4px; border: 2px solid #d6e1df; border-radius: 10px; background: #edf2ee; grid-template-columns: 1fr 1fr; }
.auth-tabs button { min-height: 39px; padding: 0 12px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; font-size: 12px; font-weight: 900; }
.auth-tabs button[aria-selected="true"] { color: var(--ink); background: #fff; box-shadow: 0 2px 0 rgba(23,50,74,.12); }
.auth-panel { padding-top: 20px; }
.auth-intro h2 { margin: 0; font-size: 25px; letter-spacing: -.04em; }
.auth-intro p { margin: 3px 0 16px; color: var(--muted); font-size: 12px; font-weight: 700; }

.game-form { display: grid; gap: 9px; }
.game-form label,
.room-editor label,
.room-editor legend,
.pixel-dialog label { color: var(--ink-2); font-size: 11px; font-weight: 900; }

.game-form input,
.game-form textarea,
.room-editor input,
.room-editor textarea,
.room-editor select,
.pixel-dialog input,
.panel-toolbar select {
    width: 100%;
    min-height: 45px;
    padding: 10px 12px;
    border: 2px solid #c9d7d7;
    border-radius: 9px;
    outline: 0;
    color: var(--ink);
    background: #fff;
    font-size: 13px;
    font-weight: 700;
}

.game-form input:focus,
.game-form textarea:focus,
.room-editor input:focus,
.room-editor textarea:focus,
.room-editor select:focus,
.pixel-dialog input:focus { border-color: var(--aqua-500); box-shadow: 0 0 0 3px rgba(49,201,189,.18); }
.field-with-icon { position: relative; }
.field-with-icon > svg { position: absolute; z-index: 1; top: 12px; left: 12px; width: 20px; height: 20px; fill: none; stroke: #78929d; stroke-width: 1.8; }
.field-with-icon > input { padding-left: 41px; }
.password-toggle { position: absolute; top: 4px; right: 4px; display: grid; width: 37px; height: 37px; padding: 0; place-items: center; border-radius: 7px; color: var(--muted); background: transparent; }
.password-toggle svg { position: static; width: 19px; height: 19px; }

.pixel-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 45px;
    padding: 0 15px;
    border: 2px solid var(--ink);
    border-radius: 9px;
    font-size: 12px;
    font-weight: 1000;
    transition: transform .12s, box-shadow .12s, filter .12s;
}
.pixel-button:not(:disabled):hover { filter: brightness(1.04); transform: translateY(-1px); }
.pixel-button:not(:disabled):active { box-shadow: none; transform: translateY(3px); }
.pixel-button-primary { color: #133f42; background: var(--aqua-300); box-shadow: 0 4px 0 #198a86; }
.pixel-button-ghost { color: var(--ink); background: var(--paper-2); box-shadow: 0 4px 0 #c4d0d0; }
.pixel-button-danger { color: #fff; background: var(--danger); box-shadow: 0 4px 0 #a93737; }
.game-form > .pixel-button { margin-top: 6px; }
.game-form .pixel-button svg { width: 19px; height: 19px; }
.text-button { display: block; margin: 13px auto 0; padding: 5px; color: #2a778d; background: transparent; font-size: 11px; font-weight: 900; text-decoration: underline; text-underline-offset: 3px; }
.resume-session { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 12px; padding: 10px; border: 2px dashed var(--aqua-500); border-radius: 8px; color: #167672; background: var(--aqua-50); font-size: 12px; text-decoration: none; }
.resume-session svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
.back-button { display: inline-flex; align-items: center; gap: 5px; padding: 4px 0; margin-bottom: 12px; color: var(--muted); background: transparent; font-size: 11px; font-weight: 900; }
.back-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; transform: rotate(180deg); }
.auth-message-panel { display: grid; justify-items: center; padding: 28px 4px 8px; text-align: center; }
.auth-message-icon { display: grid; width: 68px; height: 68px; margin-bottom: 14px; place-items: center; border: 3px solid var(--ink); border-radius: 16px; color: #24738a; background: var(--sky-100); box-shadow: 0 5px 0 rgba(23,50,74,.17); }
.auth-message-icon svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.auth-message-panel .auth-intro p { max-width: 330px; }
.development-link { display: inline-flex; align-items: center; justify-content: center; gap: 7px; margin-top: 13px; color: #276f83; font-size: 10px; font-weight: 900; text-align: center; text-underline-offset: 3px; }
.development-link.pixel-button { color: #133f42; font-size: 11px; text-decoration: none; }
.form-two-columns { display: grid; gap: 9px 11px; grid-template-columns: 1fr 1fr; }
.form-two-columns > div { display: grid; gap: 6px; }

.look-picker { min-width: 0; padding: 0; margin: 5px 0 0; border: 0; }
.look-picker legend { padding: 0; }
.look-options { display: grid; gap: 7px; margin-top: 7px; grid-template-columns: repeat(4, 1fr); }
.look-option { position: relative; display: grid; min-width: 0; height: 112px; overflow: hidden; place-items: center; border: 2px solid #cbd8d5; border-radius: 9px; background: #eaf3ec; transition: transform .12s, border-color .12s; }
.look-option:hover { transform: translateY(-2px); }
.look-option input { position: absolute; opacity: 0; }
.look-option:has(input:checked) { border-color: var(--aqua-700); background: var(--aqua-100); box-shadow: inset 0 0 0 2px #fff; }
.look-option .avatar-stack { margin-top: -10px; }
.look-option small { position: absolute; right: 0; bottom: 4px; left: 0; overflow: hidden; color: var(--ink-2); font-size: 9px; font-weight: 900; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.launcher-footer { z-index: 3; display: flex; justify-content: space-between; padding: 15px 0 19px; border-top: 2px solid rgba(23,50,74,.14); color: #246276; font-size: 10px; font-weight: 900; text-transform: uppercase; }

/* Hotel shell */

.hotel-page { height: 100vh; height: 100dvh; overflow: hidden; overscroll-behavior: none; }
.hotel-app { position: relative; isolation: isolate; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; background: #75d9ee; }
.game-hud { position: fixed; z-index: 60; top: max(10px, env(safe-area-inset-top)); right: 12px; left: 12px; display: flex; align-items: center; gap: 8px; height: 56px; padding: 6px 8px; border: 2px solid rgba(23,50,74,.88); border-radius: 13px; background: rgba(255,253,248,.94); box-shadow: 0 5px 0 rgba(23,50,74,.2), 0 10px 26px rgba(37,85,102,.16); backdrop-filter: blur(10px); }
.hud-brand { display: flex; align-items: center; gap: 5px; padding-right: 8px; color: var(--ink); font-size: 14px; font-weight: 1000; text-decoration: none; }
.hud-brand img { width: 37px; height: 37px; object-fit: contain; image-rendering: pixelated; }
.hud-room { display: flex; align-items: center; gap: 8px; min-width: 210px; height: 42px; padding: 4px 9px; border: 2px solid #bad1d4; border-radius: 9px; text-align: left; background: #ecfafa; }
.hud-room > svg:first-child { width: 23px; color: var(--aqua-700); }
.hud-room > svg:last-child { width: 16px; margin-left: auto; color: var(--muted); }
.hud-room > span { display: grid; min-width: 0; }
.hud-room small { color: var(--muted); font-size: 8px; font-weight: 900; text-transform: uppercase; }
.hud-room strong { overflow: hidden; max-width: 170px; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.hud-spacer { flex: 1; }
.connection-chip,
.hud-chip,
.hud-icon-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 10px; border: 2px solid #c5d5d7; border-radius: 9px; background: #fff; font-size: 10px; font-weight: 900; }
.connection-chip svg { width: 18px; }
.connection-chip[data-state="online"] { border-color: #9dd3a9; color: #2d8150; background: #effff2; }
.connection-chip[data-state="connecting"] { border-color: #f0d27f; color: #916919; background: #fff9e3; }
.connection-chip[data-state="offline"] { border-color: #efaaa1; color: #ad453a; background: #fff0ed; }
.credits-chip { color: #785811; background: var(--yellow-100); border-color: #e2bd4c; }
.credits-chip svg { width: 19px; }
.credits-chip strong { font-size: 13px; }
.daily-chip { color: #815019; background: #fff1d9; border-color: #e5af70; }
.online-chip { min-width: 51px; color: #346d86; background: var(--sky-100); }
.hud-icon-button { width: 39px; padding: 0; color: var(--ink-2); }
.hud-icon-button span { font-size: 8px; }
.hud-logout { margin: 0; }

.room-stage { position: absolute; z-index: 1; inset: 0; overflow: hidden; background: #77dcf0; touch-action: none; }
#room-canvas { position: absolute; z-index: 2; inset: 0; display: block; width: 100%; height: 100%; outline-offset: -5px; image-rendering: pixelated; touch-action: none; }
.stage-sky-decor { position: absolute; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; }
.stage-sky-decor i { position: absolute; width: 70px; height: 23px; border-radius: 4px; opacity: .42; background: #fff; box-shadow: 24px -10px #fff, 51px 0 #fff; }
.stage-sky-decor i:first-child { top: 15%; left: 7%; }
.stage-sky-decor i:nth-child(2) { top: 22%; right: 12%; transform: scale(.72); }
.stage-sky-decor i:nth-child(3) { top: 42%; left: 42%; transform: scale(.55); opacity: .25; }

.room-loading { position: absolute; z-index: 45; inset: 0; display: grid; align-content: center; justify-items: center; gap: 8px; color: #195267; background: rgba(123,222,239,.88); backdrop-filter: blur(7px); transition: opacity .24s, visibility .24s; }
.room-loading.is-hidden { visibility: hidden; opacity: 0; pointer-events: none; }
.room-loading strong { font-size: 17px; }
.room-loading small { color: #397488; font-size: 11px; font-weight: 800; }
.pixel-loader { position: relative; display: flex; align-items: flex-end; gap: 4px; height: 38px; }
.pixel-loader i { width: 15px; height: 15px; border: 2px solid var(--ink); background: var(--yellow-300); animation: pixel-jump .8s steps(2, end) infinite; }
.pixel-loader i:nth-child(2) { animation-delay: .13s; background: var(--coral-300); }
.pixel-loader i:nth-child(3) { animation-delay: .26s; background: var(--lime-300); }
@keyframes pixel-jump { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-13px); } }

.room-status-badge { position: absolute; z-index: 8; top: calc(max(10px, env(safe-area-inset-top)) + 68px); left: 16px; display: flex; align-items: center; gap: 9px; max-width: 250px; padding: 8px 11px; border: 2px solid rgba(23,50,74,.72); border-radius: 10px; background: rgba(255,253,248,.86); box-shadow: 0 3px 0 rgba(23,50,74,.15); backdrop-filter: blur(7px); }
.room-status-badge > span:first-child { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 7px; color: #24778b; background: var(--sky-100); }
.room-status-badge svg { width: 19px; }
.room-status-badge > span:last-child { display: grid; min-width: 0; }
.room-status-badge strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.room-status-badge small { color: var(--muted); font-size: 9px; font-weight: 800; }

.camera-tools { position: absolute; z-index: 9; right: 16px; bottom: calc(var(--dock-height) + 24px); display: grid; gap: 7px; }
.camera-tools button { display: grid; width: 43px; height: 43px; place-items: center; border: 2px solid rgba(23,50,74,.8); border-radius: 10px; color: var(--ink); background: rgba(255,253,248,.92); box-shadow: 0 3px 0 rgba(23,50,74,.2); }
.camera-tools svg { width: 22px; }

.canvas-tip { position: absolute; z-index: 10; top: calc(max(10px, env(safe-area-inset-top)) + 72px); left: 50%; display: flex; align-items: center; gap: 8px; max-width: min(430px, calc(100% - 32px)); padding: 8px 8px 8px 11px; border: 2px solid rgba(23,50,74,.75); border-radius: 10px; background: rgba(255,248,207,.94); box-shadow: 0 3px 0 rgba(23,50,74,.16); font-size: 10px; font-weight: 900; transform: translateX(-50%); transition: opacity .18s; }
.canvas-tip > svg { width: 18px; color: #a26e12; }
.canvas-tip button { display: grid; width: 26px; height: 26px; margin-left: auto; place-items: center; border-radius: 6px; color: var(--muted); background: rgba(255,255,255,.55); }
.canvas-tip button svg { width: 15px; }

.quick-chat { position: absolute; z-index: 12; bottom: calc(var(--dock-height) + 16px); left: 50%; display: flex; align-items: center; width: min(500px, calc(100% - 150px)); height: 49px; padding: 4px 5px 4px 8px; border: 2px solid rgba(23,50,74,.85); border-radius: 13px; background: rgba(255,253,248,.95); box-shadow: 0 4px 0 rgba(23,50,74,.18); transform: translateX(-50%); backdrop-filter: blur(9px); }
.quick-chat-avatar { width: 33px; height: 38px; overflow: hidden; margin-right: 3px; }
.quick-chat input { min-width: 0; height: 39px; flex: 1; padding: 0 10px; border: 0; outline: 0; background: transparent; font-size: 12px; font-weight: 800; }
.quick-chat button { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border: 2px solid var(--ink); border-radius: 9px; color: #124f55; background: var(--aqua-300); box-shadow: 0 2px 0 #238b86; }
.quick-chat button svg { width: 19px; }

.placement-toolbar { position: absolute; z-index: 30; top: calc(max(10px, env(safe-area-inset-top)) + 74px); left: 50%; display: flex; align-items: center; gap: 9px; min-height: 59px; padding: 5px 7px; border: 3px solid var(--ink); border-radius: 12px; color: var(--ink); background: var(--yellow-100); box-shadow: 0 5px 0 rgba(23,50,74,.24); transform: translateX(-50%); }
.placement-preview { display: grid; width: 140px; height: 140px; place-items: end center; overflow: visible; border-radius: 7px; background: #fff; }
.placement-preview img { width: auto; height: auto; max-width: none; max-height: none; image-rendering: pixelated; }
.placement-toolbar > span:nth-child(2) { display: grid; min-width: 100px; }
.placement-toolbar small { color: var(--muted); font-size: 8px; font-weight: 900; text-transform: uppercase; }
.placement-toolbar strong { font-size: 11px; }
.placement-toolbar button { display: inline-flex; align-items: center; gap: 5px; min-height: 39px; padding: 0 9px; border: 2px solid #b8a34d; border-radius: 8px; color: #6f5512; background: #fff; font-size: 10px; font-weight: 900; }
.placement-toolbar button svg { width: 18px; }

.toast-stack { position: fixed; z-index: 100; top: calc(max(10px, env(safe-area-inset-top)) + 67px); right: 18px; display: grid; gap: 8px; width: min(330px, calc(100% - 36px)); pointer-events: none; }
.toast { display: flex; align-items: flex-start; gap: 9px; padding: 11px 13px; border: 2px solid var(--ink); border-radius: 10px; color: var(--ink); background: #fff; box-shadow: 0 4px 0 rgba(23,50,74,.22), 0 12px 25px rgba(23,50,74,.14); font-size: 11px; font-weight: 800; animation: toast-in .2s ease-out; }
.toast svg { width: 19px; height: 19px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; }
.toast.is-error { background: #fff0ed; }
.toast.is-success { background: #effff3; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } }

.game-dock { position: fixed; z-index: 55; right: 50%; bottom: max(9px, env(safe-area-inset-bottom)); display: flex; align-items: stretch; gap: 4px; height: 66px; padding: 5px; border: 2px solid var(--ink); border-radius: 14px; background: rgba(255,253,248,.96); box-shadow: 0 5px 0 rgba(23,50,74,.22), 0 12px 28px rgba(23,75,91,.2); transform: translateX(50%); backdrop-filter: blur(10px); }
.game-dock button { position: relative; display: grid; min-width: 76px; height: 52px; padding: 5px 8px 3px; place-items: center; border: 2px solid transparent; border-radius: 9px; color: var(--ink-2); background: transparent; transition: background .12s, transform .12s; }
.game-dock button:hover { background: var(--aqua-50); transform: translateY(-2px); }
.game-dock button[aria-expanded="true"] { border-color: var(--aqua-700); color: #126b68; background: var(--aqua-100); }
.game-dock svg { width: 24px; height: 24px; }
.game-dock span { font-size: 9px; font-weight: 900; }
.dock-badge { position: absolute; top: -5px; right: 5px; display: grid; min-width: 19px; height: 19px; padding: 0 4px; place-items: center; border: 2px solid var(--ink); border-radius: 999px; color: #fff; background: var(--coral-500); font-size: 8px; }

/* Game windows */

.window-layer { position: fixed; z-index: 50; inset: 0; pointer-events: none; }
.game-window { position: absolute; display: flex; overflow: hidden; flex-direction: column; min-width: 310px; border: 3px solid var(--ink); border-radius: 14px 14px 11px 11px; color: var(--ink); background: var(--paper); box-shadow: var(--window-shadow); pointer-events: auto; animation: window-pop .15s ease-out; }
@keyframes window-pop { from { opacity: 0; transform: translateY(8px); } }
.game-window.is-front { box-shadow: 0 20px 60px rgba(22,57,75,.34), 0 5px 0 rgba(23,50,74,.22); }
.game-window-header { display: flex; align-items: center; gap: 9px; min-height: 51px; padding: 5px 6px 5px 8px; border-bottom: 3px solid var(--ink); background: #f4ecdc; cursor: grab; user-select: none; touch-action: none; }
.game-window-header:active { cursor: grabbing; }
.game-window-header > span:nth-child(2) { display: grid; min-width: 0; }
.game-window-header small { color: var(--muted); font-size: 8px; font-weight: 900; text-transform: uppercase; }
.game-window-header strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.game-window-header > button { display: grid; width: 35px; height: 35px; margin-left: auto; flex: 0 0 auto; place-items: center; border: 2px solid #c4cdcb; border-radius: 8px; color: var(--ink-2); background: #fff; }
.game-window-header > button svg { width: 18px; }
.window-icon { display: grid; width: 35px; height: 35px; flex: 0 0 auto; place-items: center; border: 2px solid var(--ink); border-radius: 8px; box-shadow: 0 2px 0 rgba(23,50,74,.14); }
.window-icon svg { width: 20px; }
.window-icon-sky { background: var(--sky-300); }
.window-icon-coral { background: var(--coral-300); }
.window-icon-yellow { background: var(--yellow-300); }
.window-icon-lime { background: var(--lime-300); }
.window-icon-purple { background: var(--purple-300); }
.game-window-body { min-height: 0; flex: 1; overflow: auto; scrollbar-color: #a8c4c7 transparent; scrollbar-width: thin; }
.window-navigator { top: 86px; left: 18px; width: 365px; height: min(650px, calc(100vh - 185px)); }
.window-chat { right: 18px; bottom: 93px; width: 350px; height: min(520px, calc(100vh - 190px)); }
.window-inventory { right: 18px; bottom: 93px; width: min(620px, calc(100% - 36px)); height: min(570px, calc(100vh - 190px)); }
.window-shop { top: 86px; left: 50%; width: min(880px, calc(100% - 38px)); height: min(680px, calc(100vh - 185px)); transform: translateX(-50%); }
.window-shop.is-dragged { transform: none; }
.window-tokens { top: 105px; left: 50%; width: min(720px, calc(100% - 38px)); max-height: min(620px, calc(100vh - 195px)); transform: translateX(-50%); }
.window-tokens.is-dragged { transform: none; }
.window-rooms { top: 86px; left: 50%; width: min(650px, calc(100% - 38px)); height: min(650px, calc(100vh - 185px)); transform: translateX(-50%); }
.window-rooms.is-dragged { transform: none; }
.window-profile { top: 86px; right: 18px; width: 470px; height: min(650px, calc(100vh - 185px)); }
.window-entity { right: 18px; bottom: 93px; width: 330px; max-height: min(510px, calc(100vh - 190px)); }
.window-mod-tool { top: 84px; left: 18px; width: 360px; max-height: min(690px, calc(100vh - 180px)); }

.navigator-body { display: grid; align-content: start; gap: 11px; padding: 13px; }
.segmented-tabs { display: grid; gap: 4px; padding: 3px; border: 2px solid #d4dfdc; border-radius: 9px; background: #edf2ee; grid-template-columns: 1fr 1fr; }
.segmented-tabs button { min-height: 35px; border-radius: 6px; color: var(--muted); background: transparent; font-size: 10px; font-weight: 900; }
.segmented-tabs button[aria-selected="true"] { color: var(--ink); background: #fff; box-shadow: 0 2px 0 rgba(23,50,74,.1); }
.search-field { position: relative; display: flex; align-items: center; min-height: 42px; border: 2px solid #cbd9d8; border-radius: 9px; background: #fff; }
.search-field:focus-within { border-color: var(--aqua-500); box-shadow: 0 0 0 3px rgba(49,201,189,.15); }
.search-field > svg { width: 19px; height: 19px; margin-left: 10px; flex: 0 0 auto; fill: none; stroke: var(--muted); stroke-width: 2; }
.search-field input { min-width: 0; height: 38px; flex: 1; padding: 0 9px; border: 0; outline: 0; background: transparent; font-size: 11px; font-weight: 800; }
.panel-state { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 90px; color: var(--muted); font-size: 11px; font-weight: 900; text-align: center; }
.mini-loader { width: 18px; height: 18px; border: 3px solid #cee0de; border-top-color: var(--aqua-700); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.panel-error { display: grid; gap: 7px; padding: 13px; border: 2px solid #efb0a8; border-radius: 9px; color: #a3483e; background: #fff1ef; }
.panel-error button,
.panel-empty button { justify-self: center; padding: 6px 10px; border: 2px solid currentColor; border-radius: 7px; color: inherit; background: #fff; font-size: 10px; font-weight: 900; }
.panel-empty { display: grid; justify-items: center; gap: 5px; min-height: 160px; padding: 25px; color: var(--muted); text-align: center; }
.panel-empty > svg { width: 42px; height: 42px; opacity: .65; fill: none; stroke: currentColor; stroke-width: 1.5; }
.panel-empty strong { color: var(--ink-2); font-size: 13px; }
.panel-empty span { max-width: 240px; font-size: 10px; font-weight: 700; }
.room-list,
.owned-room-list { display: grid; gap: 8px; }
.room-card { display: grid; align-items: center; gap: 9px; width: 100%; min-height: 70px; padding: 7px; border: 2px solid #cbd9d8; border-radius: 10px; text-align: left; background: #fff; grid-template-columns: 58px minmax(0, 1fr) auto; transition: border-color .12s, transform .12s; }
.room-card:hover { border-color: var(--aqua-500); transform: translateY(-1px); }
.room-card.is-current { border-color: var(--aqua-700); background: var(--aqua-50); }
.room-thumb { position: relative; display: grid; width: 58px; height: 52px; place-items: center; overflow: hidden; border-radius: 7px; background: var(--sky-100); }
.room-thumb::before { width: 48px; height: 25px; content: ""; background: #f8dc97; clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); filter: drop-shadow(0 5px #c8a75f); }
.room-thumb svg { position: absolute; top: 5px; right: 5px; width: 15px; height: 15px; padding: 2px; border-radius: 4px; color: #824b13; background: var(--yellow-100); }
.room-card > span:nth-child(2) { display: grid; min-width: 0; }
.room-card strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.room-card small { overflow: hidden; margin-top: 2px; color: var(--muted); font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.room-card-meta { display: flex; align-items: center; gap: 7px; margin-top: 5px; color: #39788d; font-size: 8px; font-weight: 900; }
.room-card-meta span { display: inline-flex; align-items: center; gap: 3px; }
.room-card-meta svg { width: 12px; height: 12px; }
.room-card > svg { width: 18px; color: var(--muted); }
.window-main-action { width: 100%; }

.chat-window-body { display: grid; min-height: 0; grid-template-rows: 1fr auto; }
.activity-feed { overflow-y: auto; padding: 12px; }
.system-message,
.chat-message { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.system-message > svg { width: 24px; height: 24px; padding: 4px; flex: 0 0 auto; border-radius: 7px; color: #8d6b15; background: var(--yellow-100); fill: none; stroke: currentColor; stroke-width: 2; }
.system-message p,
.chat-message p { display: grid; margin: 0; font-size: 10px; line-height: 1.45; }
.system-message strong,
.chat-message strong { font-size: 10px; }
.system-message span { color: var(--muted); font-weight: 700; }
.chat-message-avatar { display: grid; width: 29px; height: 29px; flex: 0 0 auto; place-items: center; border: 2px solid var(--ink); border-radius: 8px; color: #1e6477; background: var(--sky-100); font-size: 10px; font-weight: 1000; }
.chat-message p { padding: 7px 9px; border: 1px solid #d4dfde; border-radius: 4px 9px 9px 9px; background: #fff; }
.chat-message time { margin-left: 6px; color: var(--muted); font-size: 8px; font-weight: 700; }
.window-chat-form { position: relative; display: grid; padding: 9px; border-top: 2px solid #d3dcda; background: #f4efe5; grid-template-columns: 1fr 38px; }
.window-chat-form textarea { width: 100%; min-height: 49px; padding: 8px 37px 8px 9px; resize: none; border: 2px solid #c4d3d3; border-radius: 8px; outline: 0; background: #fff; font-size: 11px; font-weight: 700; }
.window-chat-form textarea:focus { border-color: var(--aqua-500); }
.window-chat-form > span { position: absolute; right: 58px; bottom: 14px; color: var(--muted); font-size: 8px; font-weight: 800; }
.window-chat-form button { display: grid; width: 35px; height: 49px; margin-left: 4px; place-items: center; border: 2px solid var(--ink); border-radius: 8px; color: #14585c; background: var(--aqua-300); }
.window-chat-form button svg { width: 18px; }

.inventory-body { display: grid; align-content: start; gap: 10px; padding: 13px; }
.panel-toolbar { display: grid; gap: 8px; grid-template-columns: 1fr 150px; }
.panel-toolbar select { min-height: 42px; padding: 0 9px; }
.item-grid,
.catalog-grid { display: grid; align-content: start; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); }
.inventory-item,
.catalog-item { position: relative; display: grid; min-width: 0; min-height: 166px; padding: 7px; place-items: center; border: 2px solid #cbd9d8; border-radius: 10px; text-align: center; background: #fff; transition: transform .12s, border-color .12s; }
.inventory-item:hover,
.catalog-item:hover { border-color: var(--aqua-500); transform: translateY(-2px); }
.inventory-item.is-selected,
.catalog-item.is-selected { border-color: var(--aqua-700); background: var(--aqua-50); box-shadow: inset 0 0 0 1px #fff; }
.item-image { display: grid; width: 132px; height: 136px; overflow: visible; place-items: end center; }
.item-image img { width: auto; height: auto; max-width: none; max-height: none; image-rendering: pixelated; }
.inventory-item strong,
.catalog-item strong { overflow: hidden; width: 100%; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.item-quantity { position: absolute; top: 6px; right: 6px; display: grid; min-width: 22px; height: 22px; padding: 0 4px; place-items: center; border: 2px solid var(--ink); border-radius: 7px; color: #fff; background: var(--coral-500); font-size: 8px; font-weight: 1000; }
.item-price { display: inline-flex; align-items: center; gap: 3px; color: #84631a; font-size: 9px; font-weight: 1000; }
.item-price svg { width: 13px; height: 13px; }

.window-balance { display: inline-flex !important; align-items: center; gap: 4px; margin-left: auto; padding: 5px 8px; border: 2px solid #e0bd52; border-radius: 8px; color: #755412; background: var(--yellow-100); font-size: 10px; }
.window-balance svg { width: 16px; }
.game-window-header .window-balance + button { margin-left: 0; }
.shop-body { display: grid; min-height: 0; grid-template-rows: auto 1fr; overflow: hidden; }
.category-tabs { display: flex; gap: 5px; overflow-x: auto; padding: 10px 12px; border-bottom: 2px solid #d3dcda; background: #f7f0e4; scrollbar-width: thin; }
.category-tabs button { min-height: 34px; padding: 0 12px; flex: 0 0 auto; border: 2px solid #cbd7d5; border-radius: 8px; color: var(--ink-2); background: #fff; font-size: 9px; font-weight: 900; }
.category-tabs button[aria-selected="true"] { border-color: var(--aqua-700); color: #146965; background: var(--aqua-100); }
.shop-layout { display: grid; min-height: 0; grid-template-columns: 1fr 270px; }
.shop-layout > div { min-height: 0; overflow-y: auto; padding: 12px; }
.catalog-detail { overflow-y: auto; padding: 14px; border-left: 2px solid #d3dcda; background: #f5efe4; }
.catalog-detail [data-close-detail] { display: none; margin-bottom: 9px; }
.catalog-detail-placeholder { display: grid; justify-items: center; gap: 7px; min-height: 260px; align-content: center; color: var(--muted); text-align: center; }
.catalog-detail-placeholder svg { width: 48px; height: 48px; opacity: .55; }
.catalog-detail-placeholder strong { color: var(--ink-2); font-size: 13px; }
.catalog-detail-placeholder span { font-size: 10px; font-weight: 700; }
.catalog-preview { display: grid; height: 190px; place-items: center; border: 2px solid #d4ddda; border-radius: 11px; background: linear-gradient(145deg,#dff6ff,#fef6d9); }
.catalog-preview img { width: auto; height: auto; max-width: none; max-height: none; image-rendering: pixelated; }
.rotation-dots { display: flex; justify-content: center; gap: 5px; margin: 8px 0; }
.rotation-dots button { width: 25px; height: 25px; padding: 0; border: 2px solid #bdccca; border-radius: 6px; color: var(--muted); background: #fff; font-size: 8px; font-weight: 900; }
.rotation-dots button[aria-pressed="true"] { border-color: var(--aqua-700); color: #146965; background: var(--aqua-100); }
.catalog-detail h3 { margin: 10px 0 3px; font-size: 18px; letter-spacing: -.03em; }
.catalog-detail > p { min-height: 42px; margin: 0 0 12px; color: var(--muted); font-size: 10px; font-weight: 700; line-height: 1.5; }
.catalog-buy-row { display: grid; align-items: center; gap: 8px; grid-template-columns: 85px 1fr; }
.catalog-buy-price { display: inline-flex; align-items: center; gap: 5px; font-size: 16px; font-weight: 1000; }
.catalog-buy-price svg { width: 22px; }

.token-store-body { display: grid; align-content: start; gap: 13px; padding: 15px; background: linear-gradient(150deg, #fffdf8, #fff8d8); }
.token-window-balance { border-color: #d4aa2c; }
.token-store-intro { display: flex; align-items: center; gap: 12px; padding: 13px; border: 2px solid #ddc56d; border-radius: 12px; background: #fff9df; }
.token-store-intro > span { display: grid; width: 43px; height: 43px; flex: 0 0 auto; place-items: center; border: 2px solid var(--ink); border-radius: 11px; color: #805d12; background: var(--yellow-300); }
.token-store-intro svg { width: 23px; }
.token-store-intro div { display: grid; gap: 3px; }
.token-store-intro strong { font-size: 13px; }
.token-store-intro p { margin: 0; color: var(--muted); font-size: 10px; font-weight: 750; line-height: 1.45; }
.token-pack-grid { display: grid; gap: 11px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.game-token-pack { position: relative; display: grid; min-width: 0; justify-items: center; overflow: hidden; padding: 18px 13px 13px; border: 2px solid var(--ink); border-radius: 14px; text-align: center; background: #fff; box-shadow: 0 4px 0 #c5aa52; }
.game-token-pack-shine { position: absolute; top: 7px; right: 9px; color: #e4a81c; font-size: 18px; }
.game-token-pack > strong { color: #187e86; font-size: 38px; line-height: 1; letter-spacing: -.05em; }
.game-token-pack > strong small { font-size: 11px; letter-spacing: 0; }
.game-token-pack h3 { margin: 11px 0 4px; font-size: 13px; }
.game-token-pack p { min-height: 44px; margin: 0; color: var(--muted); font-size: 9px; font-weight: 700; line-height: 1.45; }
.game-token-pack-price { margin: 10px 0; color: #765610; font-size: 20px; }
.game-token-pack button { width: 100%; min-height: 41px; padding: 0 8px; font-size: 9px; }
.game-token-pack button:disabled { color: var(--muted); background: #e7ecea; box-shadow: none; }
.token-store-legal { margin: 0; color: var(--muted); font-size: 8px; font-weight: 750; text-align: center; }

.room-manager-body { overflow: hidden; }
.owned-room-view { overflow-y: auto; height: 100%; padding: 13px; }
.panel-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.panel-heading-row > div { display: grid; }
.panel-heading-row strong { font-size: 14px; }
.panel-heading-row span { color: var(--muted); font-size: 10px; font-weight: 700; }
.small-button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 34px; padding: 0 10px; border: 2px solid #c5d2d1; border-radius: 8px; color: var(--ink-2); background: #fff; font-size: 9px; font-weight: 900; }
.small-button.primary { border-color: var(--ink); color: #12585a; background: var(--aqua-300); box-shadow: 0 2px 0 #238b86; }
.small-button svg { width: 16px; }
.owned-room-card { display: grid; align-items: center; gap: 8px; padding: 8px; border: 2px solid #cbd9d8; border-radius: 10px; background: #fff; grid-template-columns: 58px minmax(0,1fr) auto; }
.owned-room-card > span:nth-child(2) { display: grid; min-width: 0; }
.owned-room-card strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.owned-room-card small { color: var(--muted); font-size: 9px; font-weight: 700; }
.room-actions { display: flex; gap: 4px; }
.room-actions button { display: grid; width: 34px; height: 34px; place-items: center; border: 2px solid #c9d6d5; border-radius: 7px; color: var(--ink-2); background: #fff; }
.room-actions button.is-danger { color: #ad3f3f; background: #fff1ef; }
.room-actions svg { width: 17px; }
.room-editor { display: grid; height: 100%; grid-template-rows: auto 1fr auto; }
.editor-heading { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border-bottom: 2px solid #d5dedc; background: #f7f1e5; }
.editor-heading > button { display: grid; width: 35px; height: 35px; place-items: center; border: 2px solid #c5d2d1; border-radius: 8px; background: #fff; }
.editor-heading svg { width: 18px; transform: rotate(180deg); }
.editor-heading > div { display: grid; }
.editor-heading strong { font-size: 13px; }
.editor-heading span { color: var(--muted); font-size: 9px; font-weight: 700; }
.room-editor-scroll { display: grid; align-content: start; gap: 7px; overflow-y: auto; padding: 13px; }
.room-editor textarea { resize: vertical; }
.room-editor fieldset { min-width: 0; padding: 0; margin: 4px 0; border: 0; }
.room-editor legend { margin-bottom: 6px; }
.layout-options { display: grid; gap: 7px; grid-template-columns: repeat(3, 1fr); }
.layout-option { position: relative; display: grid; justify-items: center; gap: 5px; min-height: 98px; padding: 7px; border: 2px solid #cbd8d6; border-radius: 9px; background: #fff; }
.layout-option input { position: absolute; opacity: 0; }
.layout-option:has(input:checked) { border-color: var(--aqua-700); background: var(--aqua-50); }
.layout-preview { display: block; width: 65px; height: 37px; margin-top: 6px; background: #f8d995; clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); filter: drop-shadow(0 5px #c6a45c); }
.layout-option strong { font-size: 9px; }
.layout-option small { color: var(--muted); font-size: 8px; font-weight: 700; }
.room-editor-scroll .form-two-columns { margin-top: 4px; }
.room-editor-scroll .form-two-columns > div { gap: 7px; }
#room-password-field { display: grid; gap: 7px; padding: 10px; border: 2px dashed #deb756; border-radius: 9px; background: var(--yellow-100); }
#room-password-field small { color: #86651d; font-size: 8px; font-weight: 700; }
.theme-fields { display: grid; gap: 9px; grid-template-columns: 1fr 1fr; }
.theme-fields > div { display: grid; gap: 7px; }
.room-editor-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 13px 14px; border-top: 2px solid #d5dedc; background: #f7f1e5; }

.profile-body { padding: 14px; }
.profile-hero { display: flex; align-items: center; gap: 18px; padding: 12px; margin-bottom: 15px; border: 2px solid #d2ddda; border-radius: 11px; background: linear-gradient(145deg,var(--sky-100),var(--yellow-100)); }
.profile-avatar { transform-origin: bottom; }
.profile-hero > div { display: grid; }
.online-label { display: inline-flex; align-items: center; gap: 6px; color: #39714b; font-size: 8px; font-weight: 1000; text-transform: uppercase; }
.online-label i { display: inline-block; width: 7px; height: 7px; }
.profile-hero h2 { margin: 5px 0 1px; font-size: 20px; letter-spacing: -.04em; }
.profile-hero p { margin: 0; color: var(--muted); font-size: 9px; font-weight: 700; }
.profile-body textarea { resize: none; }
.daily-card { display: grid; align-items: center; gap: 9px; padding: 10px; margin-top: 14px; border: 2px solid #e3bc50; border-radius: 10px; background: var(--yellow-100); grid-template-columns: 38px 1fr auto; }
.daily-card > svg { width: 30px; height: 30px; color: #986c12; }
.daily-card > div { display: grid; }
.daily-card strong { font-size: 10px; }
.daily-card span { color: #80682f; font-size: 8px; font-weight: 700; }
.daily-card button { min-height: 32px; padding: 0 9px; border: 2px solid #8d6818; border-radius: 7px; color: #664b10; background: #fff; font-size: 9px; font-weight: 900; }

.profile-tabs { display: grid; gap: 4px; padding: 4px; margin: 0 0 13px; border: 2px solid #d4dfdc; border-radius: 10px; background: #edf2ee; grid-template-columns: repeat(4,minmax(0,1fr)); }
.profile-tabs button { min-height: 38px; padding: 0 5px; border-radius: 7px; color: var(--muted); background: transparent; font-size: 9px; font-weight: 1000; }
.profile-tabs button[aria-selected="true"] { color: var(--ink); background: #fff; box-shadow: 0 2px 0 rgba(23,50,74,.11); }
.profile-tabs button:focus-visible,
.avatar-slot-tabs button:focus-visible,
.outfit-card:focus-visible,
.wardrobe-item:focus-visible,
.badge-visibility:focus-visible { outline: 3px solid rgba(49,201,189,.34); outline-offset: 1px; }
.profile-panel { display: grid; align-content: start; gap: 12px; }
.profile-panel[hidden] { display: none; }
.profile-section-heading { display: grid; gap: 2px; }
.profile-section-heading strong { font-size: 12px; }
.profile-section-heading span { color: var(--muted); font-size: 9px; font-weight: 700; line-height: 1.4; }
.profile-panel-empty { display: flex; min-height: 110px; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: 9px; font-weight: 900; text-align: center; }

.wardrobe-preview-card { display: grid; min-height: 124px; align-items: center; gap: 23px; padding: 12px 18px; border: 2px solid #cbdcda; border-radius: 12px; background: linear-gradient(145deg,#dff7ff,#fff1c6); grid-template-columns: 58px 1fr; }
.wardrobe-preview-card > div { display: grid; gap: 3px; }
.wardrobe-preview-card strong { font-size: 15px; }
.wardrobe-preview-card span:not(.avatar-stack) { color: var(--muted); font-size: 9px; font-weight: 700; }
.wardrobe-preview { margin: 0 auto; transform: scale(1.2); transform-origin: center; }
.profile-save-status { min-height: 14px; color: #28704c !important; }
.outfit-grid { display: grid; gap: 6px; grid-template-columns: repeat(4,minmax(0,1fr)); }
.outfit-card { display: grid; min-height: 108px; justify-items: center; gap: 5px; padding: 7px 4px; border: 2px solid #ccd9d8; border-radius: 9px; color: var(--ink-2); background: #fff; }
.outfit-card:hover,
.outfit-card.is-selected { border-color: var(--aqua-700); background: var(--aqua-50); }
.outfit-card .avatar-stack { transform: scale(.58); transform-origin: center; margin: -17px 0 -18px; }
.outfit-card strong { overflow: hidden; max-width: 100%; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.avatar-slot-tabs { display: grid; gap: 4px; padding: 3px; border: 2px solid #d5dfdd; border-radius: 9px; background: #f0f3ef; grid-template-columns: repeat(4,minmax(0,1fr)); }
.avatar-slot-tabs button { min-height: 34px; border-radius: 6px; color: var(--muted); background: transparent; font-size: 8px; font-weight: 1000; }
.avatar-slot-tabs button[aria-selected="true"] { color: #176b68; background: #fff; box-shadow: 0 2px 0 rgba(23,50,74,.1); }
.wardrobe-item-grid { display: grid; gap: 6px; grid-template-columns: repeat(5,minmax(0,1fr)); }
.wardrobe-item { position: relative; display: grid; min-height: 100px; justify-items: center; align-content: center; gap: 3px; padding: 5px 2px; overflow: hidden; border: 2px solid #cedbd9; border-radius: 9px; background: #fff; }
.wardrobe-item:hover,
.wardrobe-item.is-selected { border-color: var(--coral-500); background: #fff2ee; }
.wardrobe-item .avatar-stack { transform: scale(.53); transform-origin: center; margin: -20px 0 -21px; }
.wardrobe-item strong { overflow: hidden; width: 100%; padding: 0 3px; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.wardrobe-item.is-selected::after { position: absolute; top: 4px; right: 4px; display: grid; width: 16px; height: 16px; place-items: center; border: 1px solid var(--ink); border-radius: 50%; color: #fff; content: "✓"; background: var(--coral-500); font-size: 9px; font-weight: 1000; }
.wardrobe-save { position: sticky; z-index: 1; bottom: 0; width: 100%; }

.badge-list { display: grid; gap: 8px; }
.badge-card { display: grid; min-height: 72px; align-items: center; gap: 10px; padding: 8px; border: 2px solid #d1dcda; border-radius: 10px; background: #fff; grid-template-columns: 54px minmax(0,1fr) auto; }
.badge-art { display: grid; width: 54px; height: 54px; place-items: center; border: 2px solid #cbd8d7; border-radius: 9px; background: linear-gradient(145deg,#e1f7ff,#fff5d7); }
.badge-art img { width: auto; height: auto; max-width: 44px; max-height: 44px; image-rendering: pixelated; }
.badge-card > div:nth-child(2) { display: grid; min-width: 0; gap: 2px; }
.badge-card strong { font-size: 11px; }
.badge-card small { color: var(--muted); font-size: 8px; font-weight: 700; line-height: 1.35; }
.badge-visibility { position: relative; display: grid; width: 46px; height: 28px; padding: 3px; border: 2px solid #a9bfbd; border-radius: 20px; justify-items: start; background: #dce5e3; }
.badge-visibility::before { width: 18px; height: 18px; border: 2px solid var(--ink); border-radius: 50%; content: ""; background: #fff; transition: transform .14s; }
.badge-visibility[aria-pressed="true"] { border-color: #248e70; background: #62d59c; }
.badge-visibility[aria-pressed="true"]::before { transform: translateX(16px); }

.achievement-summary { display: grid; min-height: 74px; align-content: center; justify-items: center; border: 2px solid #e1b744; border-radius: 11px; color: #71500d; background: linear-gradient(145deg,#fff0ac,#fff8db); }
.achievement-summary strong { font-size: 20px; }
.achievement-summary span { font-size: 8px; font-weight: 900; text-transform: uppercase; }
.achievement-list { display: grid; gap: 8px; }
.achievement-card { display: grid; gap: 7px; padding: 10px; border: 2px solid #d4dedc; border-radius: 10px; background: #f2f4f0; }
.achievement-card.is-unlocked { border-color: #e1b744; background: #fffaf0; }
.achievement-card-header { display: flex; align-items: center; gap: 7px; }
.achievement-medal { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border: 2px solid #aebfbd; border-radius: 9px; color: #6d7d7a; background: #fff; font-size: 16px; }
.achievement-card.is-unlocked .achievement-medal { border-color: #9b7518; color: #8a6410; background: #ffe170; }
.achievement-card-header > div { display: grid; min-width: 0; }
.achievement-card strong { font-size: 10px; }
.achievement-card small { color: var(--muted); font-size: 8px; font-weight: 700; }
.achievement-reward { margin-left: auto; color: #806018; font-size: 9px; font-weight: 1000; white-space: nowrap; }
.achievement-progress { height: 8px; overflow: hidden; border: 1px solid #b9c7c5; border-radius: 6px; background: #dfe7e5; }
.achievement-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--aqua-500); }
.achievement-card.is-unlocked .achievement-progress > span { background: #e8b936; }

.entity-body { display: grid; gap: 12px; padding: 14px; }
.entity-preview { display: grid; height: 155px; place-items: center; border: 2px solid #d2ddda; border-radius: 11px; background: linear-gradient(145deg,var(--sky-100),#fff4cd); }
.entity-preview img { width: auto; height: auto; max-width: none; max-height: none; image-rendering: pixelated; }
.entity-avatar { transform-origin: bottom; }
.entity-heading h2 { margin: 0; font-size: 19px; letter-spacing: -.035em; }
.entity-heading p { margin: 3px 0 0; color: var(--muted); font-size: 10px; font-weight: 700; }
.entity-facts { display: grid; gap: 0; margin: 0; border: 2px solid #d6dfdd; border-radius: 9px; }
.entity-facts > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 37px; padding: 7px 9px; border-bottom: 1px solid #d6dfdd; }
.entity-facts > div:last-child { border: 0; }
.entity-facts dt { color: var(--muted); font-size: 9px; font-weight: 800; }
.entity-facts dd { margin: 0; font-size: 9px; font-weight: 900; text-align: right; }
.entity-actions { display: grid; gap: 7px; grid-template-columns: 1fr 1fr; }

.mod-tool-toggle { position: fixed; z-index: 54; bottom: calc(var(--dock-height) + 16px); left: 16px; display: grid; width: 58px; height: 58px; padding: 5px; place-items: center; border: 3px solid #4d2639; border-radius: 15px; color: #fff; background: linear-gradient(145deg,#e45f65,#943e59); box-shadow: 0 5px 0 #4d2639, 0 12px 26px rgba(51,25,43,.3); transition: transform .12s ease, filter .12s ease; }
.mod-tool-toggle:hover { filter: brightness(1.08); transform: translateY(-2px); }
.mod-tool-toggle:focus-visible { outline: 4px solid #fff; outline-offset: 3px; }
.mod-tool-toggle svg { width: 26px; height: 26px; }
.mod-tool-toggle span { margin-top: -5px; font-size: 8px; font-weight: 1000; letter-spacing: .12em; }
.mod-tool-toggle[aria-expanded="true"] { color: #4d2639; background: linear-gradient(145deg,#ffe781,#ffbb70); }

.mod-tool-header { color: #fff; background: linear-gradient(90deg,#73324d,#b8465c); }
.mod-tool-header small { color: rgba(255,255,255,.72); }
.mod-tool-header > button { border-color: rgba(255,255,255,.45); color: #55273c; }
.mod-tool-body { display: grid; gap: 12px; padding: 12px; background: linear-gradient(180deg,#fff9ed,#f8eee4); }
.mod-tool-identity { display: grid; min-height: 57px; align-items: center; gap: 9px; padding: 8px; border: 2px solid #6d3049; border-radius: 11px; color: #fff; background: #512a3d; grid-template-columns: 40px minmax(0,1fr) auto; }
.mod-tool-identity > span { display: grid; width: 40px; height: 40px; place-items: center; border: 2px solid #fff1bc; border-radius: 9px; color: #5b293f; background: #ffda63; }
.mod-tool-identity svg { width: 22px; height: 22px; }
.mod-tool-identity > div { display: grid; min-width: 0; }
.mod-tool-identity small { color: #dcbac8; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.mod-tool-identity strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.mod-tool-identity > i { width: 10px; height: 10px; margin-right: 4px; border: 2px solid #fff; border-radius: 50%; background: #56ce75; box-shadow: 0 0 0 3px rgba(86,206,117,.2); }
.mod-tool-section { display: grid; gap: 8px; padding: 10px; border: 2px solid #d6c8bf; border-radius: 11px; background: rgba(255,255,255,.78); }
.mod-tool-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 10px; }
.mod-tool-section-heading > div { display: grid; }
.mod-tool-section-heading small { color: #8c6975; font-size: 7px; font-weight: 1000; letter-spacing: .08em; text-transform: uppercase; }
.mod-tool-section-heading h3 { margin: 1px 0 0; font-size: 12px; }
.mod-tool-section-heading > span { overflow: hidden; max-width: 145px; padding: 4px 6px; border-radius: 6px; color: #704051; background: #f6e5e6; font-size: 8px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.mod-tool-action-grid { display: grid; gap: 7px; grid-template-columns: 1fr 1fr; }
.mod-action-button { display: grid; min-height: 54px; align-items: center; gap: 7px; padding: 7px; border: 2px solid #a9c5c4; border-radius: 9px; color: var(--ink); background: #edfbf8; text-align: left; grid-template-columns: 29px minmax(0,1fr); }
.mod-action-button:hover { border-color: #267883; background: #dff7f4; }
.mod-action-button svg { width: 23px; height: 23px; color: #23707c; }
.mod-action-button > span { display: grid; min-width: 0; }
.mod-action-button strong { font-size: 9px; }
.mod-action-button small { overflow: hidden; color: #6a8084; font-size: 7px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.mod-action-button.is-warning { border-color: #ddbd5b; background: #fff6d6; }
.mod-action-button.is-warning svg { color: #9a6b13; }
.mod-action-button.is-danger { border-color: #d18d91; background: #fff0ef; }
.mod-action-button.is-danger svg { color: #ad3c4c; }
.mod-tool-empty { margin: 0; padding: 13px 10px; border: 2px dashed #cbbbc0; border-radius: 9px; color: #826875; background: #fbf4f0; font-size: 9px; font-weight: 750; line-height: 1.45; text-align: center; }
.mod-selected-user { display: grid; gap: 9px; }
.mod-selected-user-heading { display: flex; min-height: 58px; align-items: center; gap: 10px; padding: 5px 8px; border: 2px solid #d8cac5; border-radius: 9px; background: #fff; }
.mod-selected-user-heading > .avatar-stack { width: 44px; height: 48px; overflow: hidden; flex: 0 0 auto; transform-origin: center bottom; }
.mod-selected-user-heading > div { display: grid; }
.mod-selected-user-heading small { color: #8c6975; font-size: 7px; font-weight: 900; text-transform: uppercase; }
.mod-selected-user-heading strong { font-size: 12px; }
.mod-tool-status { min-height: 14px; margin: 0 2px; color: #765b66; font-size: 8px; font-weight: 800; }
.entity-moderation { display: grid; gap: 8px; padding: 9px; border: 2px solid #aa7183; border-radius: 10px; background: linear-gradient(145deg,#fff1e8,#f8e8eb); }
.entity-moderation-heading { display: flex; align-items: center; gap: 7px; color: #71354d; }
.entity-moderation-heading svg { width: 18px; height: 18px; }
.entity-moderation-heading strong { font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.entity-moderation-actions { display: grid; gap: 6px; grid-template-columns: 1fr 1fr; }
.entity-moderation-actions button { min-height: 42px; padding: 6px 7px; border: 2px solid #bd8c98; border-radius: 8px; color: #663147; background: #fff; font-size: 8px; font-weight: 900; }
.entity-moderation-actions button.is-danger { color: #943746; background: #fff0ef; }

.mod-action-dialog { width: min(470px, calc(100% - 28px)); border-color: #512a3d; }
.mod-action-dialog form { justify-items: stretch; padding: 25px 25px 21px; text-align: left; }
.mod-action-dialog .dialog-icon { justify-self: center; }
.mod-action-dialog h2,
.mod-action-dialog > form > p { text-align: center; }
.mod-action-kicker { margin-top: 12px; color: #9b4055; font-size: 8px; font-weight: 1000; letter-spacing: .1em; text-align: center; text-transform: uppercase; }
.mod-action-dialog h2 { margin-top: 3px; }
.mod-action-dialog textarea { width: 100%; min-height: 92px; resize: vertical; }
.mod-expiry-field { display: grid; gap: 6px; margin-top: 10px; }
.mod-expiry-field > span { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mod-expiry-field small { color: var(--muted); font-size: 7px; }
.mod-destructive-confirm { display: grid; min-height: 47px; align-items: center; gap: 9px; margin-top: 11px; padding: 8px; border: 2px solid #d28b90; border-radius: 9px; color: #7c3545; background: #fff0ef; font-size: 9px; font-weight: 850; grid-template-columns: 23px minmax(0,1fr); }
.mod-destructive-confirm input { width: 21px; height: 21px; margin: 0; accent-color: #a33c50; }
.mod-action-error { min-height: 16px; margin: 8px 0 0 !important; color: #a52f40 !important; font-size: 9px !important; font-weight: 850 !important; text-align: left !important; }

.pixel-dialog { width: min(390px, calc(100% - 28px)); padding: 0; border: 3px solid var(--ink); border-radius: 14px; color: var(--ink); background: var(--paper); box-shadow: 0 12px 0 rgba(23,50,74,.24), 0 30px 70px rgba(23,50,74,.32); }
.pixel-dialog::backdrop { background: rgba(26,63,80,.42); backdrop-filter: blur(4px); }
.pixel-dialog form { position: relative; display: grid; justify-items: center; padding: 25px 24px 21px; text-align: center; }
.dialog-close { position: absolute; top: 8px; right: 8px; display: grid; width: 33px; height: 33px; place-items: center; border: 2px solid #c5d2d1; border-radius: 8px; background: #fff; }
.dialog-close svg { width: 17px; }
.dialog-icon { display: grid; width: 54px; height: 54px; place-items: center; border: 2px solid var(--ink); border-radius: 12px; color: #6c5316; background: var(--yellow-300); box-shadow: 0 3px 0 rgba(23,50,74,.14); }
.dialog-icon svg { width: 28px; }
.dialog-icon-warning { color: #8e382f; background: var(--coral-300); }
.pixel-dialog h2 { margin: 13px 0 3px; font-size: 21px; letter-spacing: -.04em; }
.pixel-dialog p { margin: 0 0 14px; color: var(--muted); font-size: 10px; font-weight: 700; }
.pixel-dialog label { justify-self: stretch; margin-bottom: 5px; text-align: left; }
.dialog-actions { display: grid; width: 100%; gap: 8px; margin-top: 14px; grid-template-columns: 1fr 1fr; }
.moderation-notice-dialog { width: min(440px, calc(100% - 28px)); border-color: #562e3f; background: linear-gradient(180deg, #fff7ec, #fffdf8); }
.moderation-notice-dialog form { padding: 29px 28px 23px; }
.moderation-notice-dialog .dialog-icon { width: 62px; height: 62px; border-radius: 17px; background: linear-gradient(145deg, var(--yellow-300), var(--coral-300)); box-shadow: 0 4px 0 rgba(86,46,63,.2); }
.moderation-notice-kicker { margin-top: 15px; color: #a5423b; font-size: 9px; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.moderation-notice-dialog h2 { margin-top: 3px; font-size: 24px; }
.moderation-notice-dialog p { max-width: 340px; margin: 5px 0 12px; color: var(--ink-2); font-size: 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.moderation-notice-dialog small { min-height: 14px; color: var(--muted); font-size: 9px; font-weight: 750; }
.moderation-notice-dialog .dialog-actions { grid-template-columns: 1fr; }
.offline-banner { position: fixed; z-index: 150; right: 50%; bottom: calc(var(--dock-height) + 17px); display: flex; align-items: center; gap: 8px; padding: 9px 13px; border: 2px solid var(--ink); border-radius: 9px; color: #8f3b32; background: #fff0ed; box-shadow: 0 4px 0 rgba(23,50,74,.2); font-size: 10px; font-weight: 900; transform: translateX(50%); }
.offline-banner svg { width: 18px; }

@media (max-width: 1050px) {
    .launcher-hero { grid-template-columns: minmax(360px,1fr) minmax(350px,430px); gap: 28px; }
    .launcher-world { opacity: .45; right: 42%; }
    .launcher-copy h1 { font-size: clamp(48px,7vw,72px); }
    .launcher-features li { min-width: 142px; }
    .connection-chip span,
    .daily-chip span,
    .credits-chip span,
    .hud-brand span { display: none; }
    .hud-room { min-width: 180px; }
    .hud-room strong { max-width: 140px; }
    .game-dock button { min-width: 68px; }
}

@media (max-width: 800px) {
    :root { --dock-height: 68px; }
    .launcher { width: min(620px, calc(100% - 28px)); }
    .launcher-hero { align-items: start; padding-top: 20px; grid-template-columns: 1fr; }
    .launcher-copy { text-align: center; }
    .launcher-copy > p { margin-inline: auto; }
    .launcher-features { justify-content: center; }
    .launcher-world { top: 100px; right: 50%; bottom: auto; transform: translateX(50%); opacity: .24; }
    .auth-card { width: min(475px, 100%); margin: 0 auto; }
    .game-hud { right: 8px; left: 8px; gap: 5px; height: 53px; padding: 5px; }
    .hud-brand { padding: 0; }
    .hud-brand img { width: 34px; height: 34px; }
    .hud-room { min-width: 0; max-width: 42vw; height: 39px; padding: 3px 7px; }
    .hud-room > svg:first-child { display: none; }
    .hud-room strong { max-width: 30vw; }
    .connection-chip { width: 37px; padding: 0; }
    .connection-chip span { display: none; }
    .online-chip,
    .daily-chip,
    #zoom-toggle,
    .hud-logout { display: none; }
    .credits-chip { min-width: 58px; padding: 0 6px; }
    .room-status-badge { top: calc(max(8px, env(safe-area-inset-top)) + 62px); left: 10px; }
    .canvas-tip { top: calc(max(8px, env(safe-area-inset-top)) + 65px); }
    .quick-chat { bottom: calc(var(--dock-height) + max(8px, env(safe-area-inset-bottom))); width: calc(100% - 88px); }
    .camera-tools { right: 9px; bottom: calc(var(--dock-height) + 73px); }
    .game-dock { right: 7px; bottom: max(6px, env(safe-area-inset-bottom)); left: 7px; height: 61px; overflow-x: auto; justify-content: space-around; padding: 4px; border-radius: 12px; transform: none; scrollbar-width: none; }
    .game-dock::-webkit-scrollbar { display: none; }
    .game-dock button { min-width: 54px; height: 49px; padding: 4px 5px 2px; flex: 1 0 54px; }
    .game-dock svg { width: 22px; height: 22px; }
    .game-dock span { font-size: 7px; }
    .window-layer { z-index: 70; }
    .game-window,
    .window-navigator,
    .window-chat,
    .window-inventory,
    .window-shop,
    .window-rooms,
    .window-profile,
    .window-mod-tool,
    .window-entity {
        position: fixed;
        top: auto !important;
        right: 5px !important;
        bottom: calc(5px + env(safe-area-inset-bottom)) !important;
        left: 5px !important;
        width: auto !important;
        height: min(72vh, 670px);
        max-height: calc(100dvh - max(16px, env(safe-area-inset-top)));
        min-width: 0;
        border-radius: 17px 17px 11px 11px;
        transform: none !important;
        animation: sheet-up .22s ease-out;
    }
    .window-chat,
    .window-profile,
    .window-mod-tool,
    .window-entity { height: min(62vh, 540px); }
    @keyframes sheet-up { from { opacity: 0; transform: translateY(35px); } }
    .game-window-header { min-height: 56px; cursor: default; }
    .game-window-header::before { position: absolute; top: 5px; left: 50%; width: 34px; height: 4px; border-radius: 4px; content: ""; background: rgba(23,50,74,.2); transform: translateX(-50%); }
    .shop-layout { grid-template-columns: 1fr; }
    .catalog-detail { position: absolute; z-index: 3; inset: 54px 0 0; border: 0; background: var(--paper); }
    .catalog-detail.is-empty-mobile { display: none; }
    .catalog-detail [data-close-detail] { display: inline-flex; }
    .toast-stack { top: calc(max(8px, env(safe-area-inset-top)) + 60px); right: 8px; width: calc(100% - 16px); }
    .placement-toolbar { top: calc(max(8px, env(safe-area-inset-top)) + 63px); max-width: calc(100% - 18px); }
    .mod-tool-toggle { bottom: calc(var(--dock-height) + 76px); left: 9px; width: 52px; height: 52px; border-radius: 13px; }
}

@media (max-width: 520px) {
    .token-pack-grid { grid-template-columns: 1fr; }
    .game-token-pack { grid-template-columns: 1fr auto; align-items: center; justify-items: start; gap: 3px 10px; text-align: left; }
    .game-token-pack > strong { grid-row: 1 / 3; }
    .game-token-pack h3,
    .game-token-pack p { margin: 0; min-height: 0; }
    .game-token-pack-price,
    .game-token-pack button { grid-column: 1 / -1; width: 100%; text-align: center; }
    .profile-body { padding: 10px; }
    .profile-tabs { position: sticky; z-index: 2; top: 0; }
    .profile-tabs button { min-height: 42px; font-size: 8px; }
    .outfit-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .wardrobe-item-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
    .avatar-slot-tabs button { min-height: 42px; padding: 0 2px; }
    .badge-card { grid-template-columns: 50px minmax(0,1fr) 46px; }
    .launcher { width: calc(100% - 20px); }
    .launcher-header { padding: 12px 0; }
    .launcher-logo { width: 48px; height: 48px; }
    .launcher-logo img { width: 40px; height: 40px; }
    .launcher-brand strong { font-size: 19px; }
    .launcher-status { padding: 7px 9px; font-size: 9px; }
    .launcher-hero { padding: 18px 0 30px; }
    .launcher-copy h1 { font-size: 46px; }
    .launcher-copy > p { font-size: 14px; }
    .launcher-features { display: grid; grid-template-columns: 1fr 1fr; }
    .launcher-features li { min-width: 0; }
    .launcher-features li:last-child { grid-column: 1 / -1; }
    .auth-card-body { min-height: 0; padding: 19px 16px 21px; }
    .form-two-columns { grid-template-columns: 1fr; }
    .look-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .look-option { height: 92px; }
    .launcher-footer span:last-child { display: none; }
    .hud-brand { display: none; }
    .hud-room { max-width: 45vw; }
    .hud-room strong { max-width: 32vw; }
    .credits-chip { margin-left: auto; }
    .room-status-badge { max-width: 190px; }
    .canvas-tip { right: 8px; left: 8px; max-width: none; transform: none; }
    .canvas-tip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .quick-chat-avatar { display: none; }
    .quick-chat { left: 8px; width: calc(100% - 68px); transform: none; }
    .camera-tools { bottom: calc(var(--dock-height) + 70px); }
    .camera-tools button { width: 40px; height: 40px; }
    .placement-preview { display: none; }
    .placement-toolbar > span:nth-child(2) { min-width: 70px; }
    .placement-toolbar button span { display: none; }
    .placement-toolbar button { width: 40px; padding: 0; justify-content: center; }
    .panel-toolbar { grid-template-columns: 1fr; }
    .shop-layout { grid-template-columns: 1fr; }
    .item-grid,
    .catalog-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .inventory-item,
    .catalog-item { min-height: 158px; padding: 5px; }
    .item-image { width: 132px; height: 136px; }
    .layout-options { grid-template-columns: 1fr 1fr; }
    .room-editor-scroll .form-two-columns,
    .theme-fields { grid-template-columns: 1fr 1fr; }
    .entity-actions { grid-template-columns: 1fr; }
    .entity-moderation-actions { grid-template-columns: 1fr; }
    .mod-tool-action-grid { grid-template-columns: 1fr; }
    .mod-action-dialog form { padding: 23px 17px 17px; }
}

@media (max-height: 690px) and (min-width: 801px) {
    .game-hud { top: 7px; }
    .room-status-badge,
    .canvas-tip,
    .placement-toolbar { top: 72px; }
    .quick-chat { bottom: 83px; }
    .game-dock { bottom: 7px; }
}

/* Immersive launcher: Three.js atmosphere + native-resolution game art */

.landing-page {
    position: relative;
    overflow-x: hidden;
    background: #65d5eb;
}

.landing-page::before { display: none; }

.launcher-atmosphere {
    position: fixed;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(circle at 72% 23%, rgba(255,245,188,.8), transparent 18%),
        linear-gradient(180deg, #45a9df 0%, #82dded 48%, #d7f8f3 63%, #23aeb7 64%, #087c9a 100%);
}

#landing-sky-canvas {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    image-rendering: auto;
    transition: opacity .45s ease;
}

html.three-sky-ready #landing-sky-canvas { opacity: 1; }

.launcher-cloud-fallback {
    position: absolute;
    z-index: 1;
    width: clamp(300px, 38vw, 620px);
    height: auto;
    opacity: .64;
    filter: drop-shadow(0 24px 34px rgba(34,78,120,.18));
    image-rendering: auto;
    animation: landing-cloud-drift 28s ease-in-out infinite alternate;
}

.launcher-cloud-fallback-a { top: 5%; left: -7%; }
.launcher-cloud-fallback-b { top: 20%; right: -9%; width: clamp(240px, 30vw, 500px); opacity: .42; animation-duration: 36s; animation-direction: alternate-reverse; }
html.three-sky-ready .launcher-cloud-fallback { display: none; }

.launcher-horizon-glow {
    position: absolute;
    z-index: 1;
    top: 56%;
    right: -10%;
    left: -10%;
    height: 18%;
    background: radial-gradient(ellipse at center, rgba(255,255,236,.82), rgba(180,239,239,.2) 50%, transparent 72%);
    filter: blur(18px);
}

@keyframes landing-cloud-drift {
    from { translate: -2vw 0; }
    to { translate: 3vw 1.5vh; }
}

.landing-page .launcher {
    isolation: isolate;
    z-index: 1;
    width: min(1460px, calc(100% - 48px));
    min-height: max(100dvh, 880px);
}

.landing-page .launcher-header,
.landing-page .launcher-hero,
.landing-page .launcher-footer { position: relative; z-index: 4; }

.landing-page .launcher-header { padding: 18px 0 10px; }

.landing-page .launcher-brand {
    display: block;
    width: 399px;
    height: 103px;
    overflow: visible;
}

.landing-page .launcher-logo {
    position: relative;
    display: block;
    width: 399px;
    height: 103px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
}

.landing-page .launcher-logo img {
    position: absolute;
    top: 0;
    left: 0;
    width: 399px;
    height: 103px;
    max-width: none;
    object-fit: contain;
    image-rendering: auto;
}

.landing-page .launcher-status,
.landing-page .pixel-label,
.landing-page .launcher-features li {
    border-color: rgba(16,53,76,.3);
    background: rgba(250,255,252,.82);
    box-shadow: 0 5px 18px rgba(11,78,104,.12);
    backdrop-filter: blur(12px);
}

.landing-page .launcher-hero {
    align-items: stretch;
    gap: clamp(28px, 4vw, 68px);
    padding: 8px 0 34px;
    grid-template-columns: minmax(620px, 1fr) minmax(360px, 420px);
}

.launcher-showcase {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 750px;
    grid-template-rows: auto 1fr;
}

.landing-page .launcher-copy {
    align-self: start;
    max-width: 650px;
    padding-top: clamp(26px, 5vh, 72px);
}

.landing-page .launcher-copy h1 {
    max-width: 620px;
    margin: 18px 0 15px;
    color: #0f3652;
    font-size: clamp(58px, 5.5vw, 82px);
    letter-spacing: -.065em;
    line-height: .88;
    text-shadow: 0 4px 0 rgba(255,255,255,.3), 0 12px 36px rgba(13,78,111,.15);
}

.landing-page .launcher-copy h1 span {
    color: #fff5c8;
    text-shadow: 0 4px 0 rgba(17,74,93,.2), 0 12px 34px rgba(10,71,99,.12);
}

.landing-page .launcher-copy > p {
    max-width: 570px;
    color: #164f67;
    font-size: 16px;
    line-height: 1.5;
    text-shadow: 0 1px rgba(255,255,255,.45);
}

.landing-page .launcher-features { margin-top: 18px; }

.landing-page .launcher-world {
    position: relative;
    inset: auto;
    align-self: end;
    justify-self: center;
    width: var(--landing-art-width, 720px);
    height: var(--landing-art-height, 420px);
    opacity: 1;
    pointer-events: none;
    transform: none;
}

.launcher-world-art {
    position: absolute;
    top: var(--landing-snap-y, 0px);
    left: calc(50% + var(--landing-snap-x, 0px));
    width: 720px;
    height: 420px;
    transform: translateX(-50%) scale(var(--landing-art-scale, 1));
    transform-origin: top center;
}

.launcher-platform {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: block;
    width: 720px;
    height: 420px;
    overflow: visible;
    shape-rendering: geometricPrecision;
}

.launcher-world-caption {
    position: absolute;
    z-index: 6;
    top: 18px;
    left: 50%;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border: 2px solid rgba(18,54,76,.72);
    border-radius: 999px;
    color: #163f55;
    background: rgba(255,255,248,.9);
    box-shadow: 0 3px 0 rgba(18,54,76,.14);
    font-size: 9px;
    font-weight: 1000;
    text-transform: uppercase;
    translate: -50% 0;
}

.launcher-world-caption i { width: 7px; height: 7px; border-radius: 50%; background: #48bd6b; box-shadow: 0 0 0 3px rgba(72,189,107,.18); }

.landing-page .launcher-furni,
.landing-page .launcher-keko {
    position: absolute;
    height: auto;
    transform: none;
    image-rendering: pixelated;
}

.landing-page .launcher-furni-fridge { z-index: 2; top: 158px; left: 150px; width: 52px; }
.landing-page .launcher-furni-plant { z-index: 3; top: 150px; left: 240px; width: 66px; }
.landing-page .launcher-keko { z-index: 4; top: 169px; left: 354px; width: 33px; }
.landing-page .launcher-furni-seat { z-index: 5; top: 238px; left: 470px; width: 60px; }
.landing-page .pixel-speech { z-index: 7; top: 132px; left: 376px; }

.landing-page .auth-card {
    align-self: center;
    justify-self: end;
    width: 100%;
    max-width: 420px;
    border-color: #133a53;
    background: rgba(255,253,248,.96);
    box-shadow: 0 9px 0 rgba(14,59,78,.2), 0 28px 70px rgba(9,65,91,.2);
    backdrop-filter: blur(16px);
}

.landing-page .auth-card-body { min-height: 0; padding: 20px 22px 22px; }
.landing-page .auth-panel { padding-top: 16px; }
.landing-page .auth-intro h2 { font-size: 23px; }
.landing-page .launcher-footer { border-top-color: rgba(16,61,83,.18); color: #174f63; }

@media (max-width: 1120px) {
    .landing-page .launcher { width: min(800px, calc(100% - 32px)); }
    .landing-page .launcher-hero { grid-template-columns: 1fr; gap: 16px; }
    .launcher-showcase { min-height: 760px; }
    .landing-page .launcher-copy { justify-self: center; text-align: center; }
    .landing-page .launcher-copy > p { margin-inline: auto; }
    .landing-page .launcher-features { justify-content: center; }
    .landing-page .launcher-world { justify-self: center; }
    .landing-page .auth-card { justify-self: center; margin-bottom: 22px; }
}

@media (max-width: 600px) {
    .landing-page .launcher { width: calc(100% - 20px); min-height: 100dvh; }
    .landing-page .launcher-header { padding: 11px 0 4px; }
    .landing-page .launcher-brand,
    .landing-page .launcher-logo { width: min(250px, calc(100vw - 130px)); height: auto; aspect-ratio: 399 / 103; }
    .landing-page .launcher-logo img { width: 100%; height: 100%; }
    .landing-page .launcher-hero { padding: 8px 0 26px; }
    .launcher-showcase { display: flex; min-height: 0; flex-direction: column; }
    .landing-page .launcher-copy { padding-top: 24px; }
    .landing-page .launcher-copy h1 { margin-top: 15px; font-size: clamp(48px, 15vw, 62px); }
    .landing-page .launcher-copy > p { font-size: 14px; }
    .landing-page .launcher-features { display: grid; width: 100%; grid-template-columns: 1fr; }
    .landing-page .launcher-features li,
    .landing-page .launcher-features li:last-child { min-width: 0; grid-column: auto; }
    .landing-page .launcher-world { align-self: center; width: min(var(--landing-art-width, 720px), calc(100vw - 20px)); height: var(--landing-art-height, 420px); overflow: hidden; margin: 12px 0 6px; }
    .launcher-platform { width: 720px; height: 420px; }
    .landing-page .auth-card { max-width: 440px; }
    .landing-page .auth-card-body { padding: 17px 15px 19px; }
    .launcher-cloud-fallback-a { top: 8%; left: -38%; width: 430px; }
    .launcher-cloud-fallback-b { top: 34%; right: -45%; width: 360px; }
}

@media (prefers-reduced-motion: reduce) {
    .launcher-cloud-fallback { animation: none; }
    #landing-sky-canvas { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Public website */

.site-header {
    position: relative;
    z-index: 20;
    display: flex;
    min-height: 92px;
    align-items: center;
    gap: clamp(14px, 2vw, 30px);
}

.site-brand { display: block; width: 250px; flex: 0 0 auto; }
.site-brand img { display: block; width: 100%; height: auto; object-fit: contain; }
.site-nav { display: flex; align-items: center; gap: 5px; padding: 5px; border: 2px solid rgba(20,66,88,.2); border-radius: 14px; background: rgba(255,255,255,.72); box-shadow: 0 5px 22px rgba(13,79,104,.11); backdrop-filter: blur(14px); }
.site-nav a { display: inline-flex; min-height: 42px; align-items: center; gap: 7px; padding: 0 12px; border-radius: 9px; color: #1b5368; font-size: 11px; font-weight: 900; text-decoration: none; }
.site-nav a:hover { background: rgba(227,255,250,.86); }
.site-nav a[aria-current="page"] { color: #103f53; background: #fffdf6; box-shadow: 0 3px 0 rgba(22,68,87,.12); }
.site-nav svg,
.site-header-actions svg,
.site-footer svg,
.section-kicker svg,
.news-read svg,
.safety-cta svg,
.contact-copy svg,
.lobby-actions svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.site-header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.site-login-link { padding: 10px 8px; color: #184e63; font-size: 11px; font-weight: 900; text-decoration: none; }
.site-enter-button { display: inline-flex; min-height: 43px; align-items: center; gap: 7px; padding: 0 13px; border: 2px solid #17324a; border-radius: 10px; color: #133f42; background: #6ce2d8; box-shadow: 0 4px 0 #198a86; font-size: 11px; font-weight: 1000; text-decoration: none; }
.site-enter-button:hover { filter: brightness(1.04); transform: translateY(-1px); }

.landing-page .site-brand { width: 399px; }
.landing-page .site-header { justify-content: flex-start; }
.landing-page .site-header-actions { margin-left: 0; }
.home-news-links { display: grid; max-width: 570px; gap: 5px; padding: 12px 14px; margin-top: 14px; border-left: 4px solid #ffdb66; border-radius: 0 10px 10px 0; background: rgba(255,255,255,.7); box-shadow: 0 8px 24px rgba(13,76,100,.08); }
.home-news-links > span { color: #2b6f7e; font-size: 8px; font-weight: 1000; letter-spacing: .09em; text-transform: uppercase; }
.home-news-links a { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; overflow: hidden; color: #173b50; font-size: 10px; font-weight: 900; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.home-news-links a:hover { color: #087579; }
.home-news-links svg { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; }

.public-page { min-height: 100dvh; overflow-x: hidden; background: #e9fbf8; }
.public-atmosphere { position: fixed; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; background: radial-gradient(circle at 76% 11%, rgba(255,244,170,.78), transparent 19%), linear-gradient(180deg, #56bde9 0, #9ee8ee 42%, #e8fbf4 72%, #d8f4eb 100%); }
.public-atmosphere::after { position: absolute; right: 0; bottom: 0; left: 0; height: 36%; content: ""; opacity: .28; background-image: linear-gradient(30deg, transparent 46%, #fff 47% 49%, transparent 50%), linear-gradient(150deg, transparent 46%, #fff 47% 49%, transparent 50%); background-size: 60px 30px; mask-image: linear-gradient(transparent, #000); }
.public-atmosphere > span { position: absolute; top: 48%; right: -10%; left: -10%; height: 20%; background: radial-gradient(ellipse, rgba(255,255,230,.8), transparent 68%); filter: blur(22px); }
.public-cloud { position: absolute; width: clamp(320px, 42vw, 680px); opacity: .32; filter: drop-shadow(0 24px 34px rgba(35,70,110,.15)); }
.public-cloud-a { top: 8%; left: -12%; }
.public-cloud-b { top: 24%; right: -17%; width: clamp(260px, 34vw, 530px); opacity: .23; }
.public-shell { position: relative; z-index: 1; width: min(1240px, calc(100% - 40px)); min-height: 100dvh; margin: auto; }
.public-content { min-height: calc(100dvh - 180px); padding: 44px 0 80px; }
.site-footer { display: grid; min-height: 80px; align-items: center; padding: 18px 0; border-top: 2px solid rgba(23,50,74,.14); color: #275e70; font-size: 10px; font-weight: 900; grid-template-columns: 1fr auto 1fr; }
.site-footer > a { color: inherit; text-decoration: none; text-transform: uppercase; }
.site-footer nav { display: flex; gap: 18px; }
.site-footer nav a { color: inherit; text-decoration: none; }
.site-footer > span { justify-self: end; text-transform: uppercase; }

.section-kicker { display: inline-flex; min-height: 34px; align-items: center; gap: 8px; padding: 6px 11px; border: 2px solid rgba(20,61,80,.28); border-radius: 9px; color: #116776; background: rgba(255,255,255,.78); box-shadow: 3px 3px 0 rgba(23,50,74,.1); font-size: 9px; font-weight: 1000; letter-spacing: .06em; text-transform: uppercase; }
.section-kicker svg { width: 16px; height: 16px; }
.public-hero { display: grid; min-height: 330px; align-items: center; gap: 48px; grid-template-columns: minmax(0, 1fr) 360px; }
.public-hero h1,
.contact-copy h1,
.news-detail h1 { margin: 18px 0 16px; color: #11364f; font-size: clamp(54px, 6.5vw, 88px); letter-spacing: -.07em; line-height: .88; text-wrap: balance; }
.public-hero h1 span,
.contact-copy h1 span { color: #fff5c8; text-shadow: 0 4px 0 rgba(20,64,83,.16); }
.public-hero > div:first-child > p,
.contact-copy > p { max-width: 650px; margin: 0; color: #265b6e; font-size: 17px; font-weight: 700; line-height: 1.55; }
.public-hero-window { position: relative; height: 250px; overflow: hidden; border: 3px solid #17324a; border-radius: 18px; background: #fffdf5; box-shadow: 0 9px 0 rgba(23,50,74,.2), 0 25px 60px rgba(18,78,98,.18); transform: rotate(2deg); }
.public-hero-window::before { position: absolute; top: 0; right: 0; left: 0; height: 42px; border-bottom: 3px solid #17324a; content: ""; background: #ffdb66; }
.public-hero-window .window-lights { position: absolute; z-index: 2; top: 16px; left: 14px; }
.public-hero-window > strong { position: absolute; right: 0; bottom: 18px; left: 0; color: #244b5f; font-size: 10px; text-align: center; letter-spacing: .13em; }
.news-pixel-scene { position: absolute; top: 64px; right: 40px; left: 40px; height: 116px; background: #7fd9e9; clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); filter: drop-shadow(0 11px 0 #278e9e); }
.news-pixel-scene::before,
.news-pixel-scene::after { position: absolute; width: 60px; height: 46px; content: ""; background: #fff0bd; box-shadow: inset -8px -8px #d6bc79; }
.news-pixel-scene::before { top: 25px; left: 78px; }
.news-pixel-scene::after { top: 48px; left: 135px; background: #ff846e; box-shadow: inset -8px -8px #c34c42; }

.content-filters { display: flex; gap: 7px; overflow-x: auto; padding: 7px; margin: 24px 0 26px; border: 2px solid rgba(23,50,74,.17); border-radius: 14px; background: rgba(255,255,255,.65); scrollbar-width: none; }
.content-filters::-webkit-scrollbar { display: none; }
.content-filters a { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; padding: 0 17px; border-radius: 9px; color: #355f70; font-size: 11px; font-weight: 900; text-decoration: none; white-space: nowrap; }
.content-filters a[aria-current="page"] { color: #143e51; background: #fff; box-shadow: 0 3px 0 rgba(23,50,74,.12); }
.news-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.news-card { overflow: hidden; border: 2px solid rgba(23,50,74,.75); border-radius: 14px; background: rgba(255,253,248,.94); box-shadow: 0 6px 0 rgba(23,50,74,.15), 0 18px 36px rgba(22,80,98,.1); transition: transform .16s, box-shadow .16s; }
.news-card:hover { box-shadow: 0 9px 0 rgba(23,50,74,.13), 0 24px 42px rgba(22,80,98,.16); transform: translateY(-3px); }
.news-card > a { display: block; height: 100%; color: inherit; text-decoration: none; }
.news-card-art { position: relative; height: 155px; overflow: hidden; border-bottom: 2px solid rgba(23,50,74,.5); background: linear-gradient(160deg, #7be0ed, #4ab7df); }
.news-card-art::before { position: absolute; inset: 32% -8% -30%; content: ""; background: #40bd9f; transform: skewY(-8deg); }
.news-card-art span { position: absolute; z-index: 2; right: 23%; bottom: 16%; width: 72px; height: 72px; background: #ffeeba; clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); filter: drop-shadow(9px 10px 0 rgba(26,68,80,.22)); }
.news-card-art i { position: absolute; z-index: 3; right: 31%; bottom: 26%; width: 24px; height: 36px; background: #ff785f; box-shadow: 25px 8px #fff4c7, -25px 9px #48bdd2; }
.news-card-art b { position: absolute; z-index: 1; top: 15px; left: 19px; width: 50px; height: 20px; background: rgba(255,255,255,.72); box-shadow: 25px -9px rgba(255,255,255,.72), 51px 3px rgba(255,255,255,.72); }
.news-art-1 { background: linear-gradient(150deg, #8edff4, #8f80e8); }
.news-art-1::before { background: #ffd66f; }
.news-art-2 { background: linear-gradient(150deg, #79dce3, #39a6cc); }
.news-art-2::before { background: #ff8d78; }
.news-card-body { padding: 18px 18px 20px; }
.news-meta { color: #3f7a88; font-size: 9px; font-weight: 1000; text-transform: uppercase; }
.news-card h2 { margin: 8px 0 8px; font-size: 21px; letter-spacing: -.035em; line-height: 1.08; }
.news-card p { margin: 0 0 15px; color: #5b7480; font-size: 12px; font-weight: 700; line-height: 1.55; }
.news-read { display: flex; align-items: center; justify-content: space-between; color: #117779; font-size: 10px; font-weight: 1000; text-transform: uppercase; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 30px; color: #3f6979; font-size: 11px; font-weight: 900; }
.pagination a { padding: 9px 13px; border: 2px solid rgba(23,50,74,.4); border-radius: 8px; color: #173f54; background: #fff; text-decoration: none; }
.public-state { display: flex; min-height: 170px; align-items: center; justify-content: center; gap: 16px; padding: 30px; border: 2px dashed rgba(23,50,74,.35); border-radius: 16px; background: rgba(255,255,255,.62); text-align: left; }
.public-state > svg { width: 38px; height: 38px; fill: none; stroke: #23889a; stroke-width: 1.8; }
.public-state > div { display: grid; }
.public-state strong { font-size: 17px; }
.public-state span { color: #587582; font-size: 12px; font-weight: 700; }

.news-detail { max-width: 940px; margin: 0 auto; }
.back-link { display: inline-flex; align-items: center; gap: 5px; color: #245d70; font-size: 11px; font-weight: 900; text-decoration: none; }
.back-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; transform: rotate(180deg); }
.news-detail header { padding: 45px 0 25px; }
.news-detail h1 { max-width: 840px; font-size: clamp(46px, 7vw, 78px); }
.news-detail header > p { max-width: 760px; color: #426a78; font-size: 18px; font-weight: 700; }
.news-detail-art { position: relative; height: 260px; overflow: hidden; border: 3px solid #17324a; border-radius: 17px; background: linear-gradient(155deg, #62ccec, #7ce1d3 58%, #31a894); box-shadow: 0 8px 0 rgba(23,50,74,.15); }
.news-detail-art::before { position: absolute; right: 12%; bottom: -90px; width: 360px; height: 260px; content: ""; background: #fff0b5; clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); filter: drop-shadow(16px 18px 0 rgba(24,83,91,.2)); }
.news-detail-art span { position: absolute; z-index: 2; right: 29%; bottom: 67px; width: 92px; height: 82px; background: #ff7863; box-shadow: inset -14px -13px #c85245; }
.news-detail-art i { position: absolute; z-index: 3; right: 16%; bottom: 49px; width: 62px; height: 102px; background: #fff2c4; box-shadow: inset -12px -12px #cdb66f; }
.news-detail-art b { position: absolute; top: 32px; left: 11%; width: 85px; height: 30px; background: rgba(255,255,255,.72); box-shadow: 43px -15px rgba(255,255,255,.72), 88px 5px rgba(255,255,255,.72); }
.prose { padding: 38px 45px; margin: 26px 0; border: 2px solid rgba(23,50,74,.2); border-radius: 14px; color: #244d5f; background: rgba(255,253,248,.9); font-size: 16px; font-weight: 650; line-height: 1.75; }

.public-hero-security { grid-template-columns: 1fr 310px; }
.security-shield { position: relative; display: grid; width: 230px; height: 250px; justify-self: center; place-items: center; border: 4px solid #17324a; border-radius: 45% 45% 55% 55% / 34% 34% 70% 70%; color: #135f6b; background: linear-gradient(145deg, #dffff8, #72ddd2); box-shadow: inset -18px -18px rgba(25,139,137,.13), 0 11px 0 rgba(23,50,74,.18), 0 30px 60px rgba(18,76,95,.18); }
.security-shield svg { width: 78px; height: 78px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.security-shield i { position: absolute; width: 14px; height: 14px; border: 3px solid #17324a; background: #ffdb66; transform: rotate(45deg); }
.security-shield i:nth-of-type(1) { top: 40px; left: -7px; }
.security-shield i:nth-of-type(2) { top: 75px; right: -11px; background: #ff806c; }
.security-shield i:nth-of-type(3) { bottom: 29px; left: 17px; background: #fff; }
.security-layout { display: grid; align-items: start; gap: 24px; margin-top: 28px; grid-template-columns: minmax(0, 1.25fr) minmax(310px, .75fr); }
.section-heading > span { color: #2b7684; font-size: 9px; font-weight: 1000; letter-spacing: .1em; text-transform: uppercase; }
.section-heading h2 { margin: 4px 0 7px; font-size: 30px; letter-spacing: -.045em; }
.section-heading p { max-width: 660px; margin: 0; color: #527380; font-size: 12px; font-weight: 700; }
.rules-list { display: grid; gap: 10px; padding: 0; margin: 20px 0 0; list-style: none; }
.rules-list li { display: flex; align-items: flex-start; gap: 15px; padding: 17px; border: 2px solid rgba(23,50,74,.28); border-radius: 12px; background: rgba(255,253,248,.9); box-shadow: 0 4px 0 rgba(23,50,74,.1); }
.rules-list li[data-severity="critical"] { border-left: 6px solid #ff715d; }
.rules-list li[data-severity="warning"] { border-left: 6px solid #ffcf55; }
.rule-number { display: grid; width: 39px; height: 39px; flex: 0 0 auto; place-items: center; border: 2px solid #17324a; border-radius: 9px; color: #174658; background: #a7eee6; font-size: 11px; font-weight: 1000; box-shadow: 0 3px 0 rgba(23,50,74,.15); }
.rules-list h3 { margin: 1px 0 4px; font-size: 15px; }
.rules-list p { margin: 0; color: #54717d; font-size: 12px; font-weight: 700; line-height: 1.5; }
.security-guides { display: grid; gap: 13px; }
.security-guides article { padding: 21px; border: 2px solid rgba(23,50,74,.55); border-radius: 14px; background: rgba(255,253,248,.92); box-shadow: 0 6px 0 rgba(23,50,74,.12); }
.guide-icon { display: grid; width: 45px; height: 45px; place-items: center; border: 2px solid #17324a; border-radius: 10px; color: #176d77; background: #c8faf4; }
.guide-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.security-guides h2 { margin: 13px 0 5px; font-size: 19px; }
.security-guides p { margin: 0 0 10px; color: #356a7a; font-size: 12px; font-weight: 900; }
.security-guides article > div { color: #5d7680; font-size: 11px; font-weight: 700; line-height: 1.55; }
.staff-section { padding: 55px 0 15px; }
.staff-grid { display: grid; gap: 14px; margin-top: 20px; grid-template-columns: repeat(3, 1fr); }
.staff-card { display: flex; min-height: 170px; align-items: center; gap: 17px; padding: 17px; border: 2px solid rgba(23,50,74,.55); border-radius: 14px; background: rgba(255,253,248,.92); box-shadow: 0 5px 0 rgba(23,50,74,.12); }
.staff-avatar-wrap { position: relative; display: grid; width: 94px; height: 132px; flex: 0 0 auto; place-items: end center; border-radius: 11px; background: linear-gradient(145deg, #dff8ff, #b9efe2); }
.staff-avatar-wrap .avatar-stack { transform: scale(1.2); transform-origin: bottom center; }
.staff-badge { position: absolute; top: 7px; right: 7px; width: auto; max-width: 42px; height: 28px; object-fit: contain; image-rendering: pixelated; }
.staff-card > div:last-child > span { color: #16807e; font-size: 9px; font-weight: 1000; }
.staff-card h3 { margin: 4px 0; font-size: 16px; }
.staff-card p { margin: 0; color: #5a747e; font-size: 11px; font-weight: 700; line-height: 1.5; }
.safety-cta { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px; margin-top: 35px; border: 3px solid #17324a; border-radius: 14px; background: #ffdb66; box-shadow: 0 7px 0 rgba(23,50,74,.17); }
.safety-cta > div { display: grid; }
.safety-cta strong { font-size: 18px; }
.safety-cta span { color: #5d573a; font-size: 11px; font-weight: 800; }
.safety-cta a { display: inline-flex; min-height: 43px; align-items: center; gap: 8px; padding: 0 14px; border: 2px solid #17324a; border-radius: 9px; color: #17324a; background: #fffdf8; box-shadow: 0 4px 0 rgba(23,50,74,.16); font-size: 11px; font-weight: 1000; text-decoration: none; }

.contact-layout { display: grid; min-height: calc(100dvh - 250px); align-items: center; gap: clamp(40px, 7vw, 100px); grid-template-columns: minmax(0, 1fr) minmax(410px, 520px); }
.contact-copy h1 { font-size: clamp(60px, 7vw, 92px); }
.contact-copy ul { display: grid; gap: 11px; padding: 0; margin: 30px 0 0; list-style: none; }
.contact-copy li { display: flex; align-items: center; gap: 12px; }
.contact-copy li > svg { display: grid; width: 38px; height: 38px; padding: 8px; flex: 0 0 auto; border: 2px solid rgba(23,50,74,.46); border-radius: 9px; color: #126f77; background: rgba(255,255,255,.7); }
.contact-copy li > span { display: grid; }
.contact-copy li strong { font-size: 12px; }
.contact-copy li small { color: #4c7481; font-size: 10px; font-weight: 700; }
.contact-card { width: 100%; }
.contact-card-body { padding: 22px; }
.contact-form select { width: 100%; min-height: 45px; padding: 10px 12px; border: 2px solid #c9d7d7; border-radius: 9px; outline: 0; color: var(--ink); background: #fff; font-size: 13px; font-weight: 700; }
.contact-form select:focus { border-color: var(--aqua-500); box-shadow: 0 0 0 3px rgba(49,201,189,.18); }
.form-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.privacy-check { display: flex !important; align-items: flex-start; gap: 9px; padding: 10px; border-radius: 8px; background: #eef8f5; }
.privacy-check input { width: 20px !important; min-height: 20px !important; margin: 1px 0 0; flex: 0 0 auto; accent-color: #168e89; }
.privacy-check span { color: #4c6874; font-size: 10px; font-weight: 700; line-height: 1.4; }

/* Visual lobby: no realtime and no avatars */

.lobby-page { min-height: 100dvh; overflow: hidden; background: #50c8e6; }
.entry-lobby { position: relative; isolation: isolate; width: 100%; min-height: 100dvh; overflow: hidden; background: linear-gradient(180deg, #46afe0 0, #92e0ec 52%, #daf8ef 69%, #26aaa8 70%, #087d97 100%); }
.lobby-sky { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.lobby-sky img { position: absolute; top: 9%; left: -8%; width: clamp(320px, 43vw, 680px); opacity: .38; filter: drop-shadow(0 25px 40px rgba(37,68,103,.16)); }
.lobby-sky img:nth-child(2) { top: 26%; right: -12%; left: auto; width: clamp(260px, 32vw, 500px); opacity: .24; }
.lobby-sky span { position: absolute; top: 54%; right: -10%; left: -10%; height: 24%; background: radial-gradient(ellipse, rgba(255,255,225,.84), transparent 68%); filter: blur(24px); }
.lobby-header { position: relative; z-index: 5; display: flex; height: 110px; align-items: center; justify-content: space-between; width: min(1420px, calc(100% - 54px)); margin: auto; }
.lobby-brand { width: 320px; }
.lobby-brand img { display: block; width: 100%; height: auto; }
.lobby-user { display: flex; align-items: center; gap: 10px; padding: 9px 13px; border: 2px solid rgba(23,50,74,.7); border-radius: 12px; background: rgba(255,255,255,.76); box-shadow: 0 4px 0 rgba(23,50,74,.14); }
.lobby-user > span { display: grid; text-align: right; }
.lobby-user small { color: #4a7180; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.lobby-user strong { font-size: 12px; }
.lobby-user i { width: 11px; height: 11px; border-radius: 50%; background: #4dbe6d; box-shadow: 0 0 0 4px rgba(77,190,109,.18); }
.lobby-copy { position: absolute; z-index: 4; top: 18%; left: max(27px, calc((100vw - 1420px) / 2)); width: min(560px, 44vw); }
.lobby-copy h1 { margin: 20px 0 17px; color: #103550; font-size: clamp(64px, 6.7vw, 98px); letter-spacing: -.075em; line-height: .84; }
.lobby-copy h1 span { color: #fff4c2; text-shadow: 0 5px 0 rgba(22,63,81,.18); }
.lobby-copy > p { max-width: 550px; color: #174e65; font-size: 15px; font-weight: 750; line-height: 1.55; }
.lobby-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 25px; }
.lobby-actions a { min-height: 51px; padding: 0 19px; text-decoration: none; }
.lobby-contract { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; color: #245d70; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.lobby-contract i { width: 8px; height: 8px; border-radius: 50%; background: #ffca4c; box-shadow: 0 0 0 4px rgba(255,202,76,.2); }
.lobby-room-picker { position: absolute; z-index: 7; bottom: 69px; left: max(27px, calc((100vw - 1420px) / 2)); width: min(610px, 47vw); background: rgba(255,253,248,.96); backdrop-filter: blur(16px); }
.lobby-picker-body { display: grid; gap: 10px; padding: 13px; }
.lobby-picker-tabs { display: grid; gap: 5px; padding: 4px; border: 2px solid #d6e1df; border-radius: 10px; background: #edf2ee; grid-template-columns: 1fr 1fr; }
.lobby-picker-tabs button { min-height: 38px; border-radius: 7px; color: #647d89; background: transparent; font-size: 10px; font-weight: 1000; }
.lobby-picker-tabs button[aria-selected="true"] { color: #17324a; background: #fff; box-shadow: 0 2px 0 rgba(23,50,74,.12); }
.lobby-room-status { display: flex; min-height: 76px; align-items: center; justify-content: center; gap: 9px; padding: 14px; border: 2px dashed #b9ccce; border-radius: 9px; color: #54737f; font-size: 11px; font-weight: 800; text-align: center; }
.lobby-room-list { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 7px; scrollbar-color: #97c4c6 transparent; scrollbar-width: thin; }
.lobby-room-option { display: flex; min-width: 180px; min-height: 68px; align-items: center; gap: 9px; padding: 8px; border: 2px solid #c6d5d5; border-radius: 10px; background: #f6fbf8; text-align: left; }
.lobby-room-option:hover { border-color: #49bdb7; background: #e9fffb; }
.lobby-room-option[aria-selected="true"] { border-color: #168e89; background: #c8faf4; box-shadow: inset 0 0 0 2px #fff; }
.lobby-room-thumb { position: relative; width: 54px; height: 42px; flex: 0 0 auto; background: #ffefb8; clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); filter: drop-shadow(0 5px 0 #b99a54); }
.lobby-room-thumb::after { position: absolute; inset: 12px 18px 9px; content: ""; background: #4fc4d6; box-shadow: 13px 4px #ff7c67; }
.lobby-room-option > span:last-child { display: grid; min-width: 0; }
.lobby-room-option strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.lobby-room-option small { color: #5c7882; font-size: 9px; font-weight: 800; }
.lobby-picker-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 2px; }
.lobby-picker-actions > span { overflow: hidden; color: #57737e; font-size: 9px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.lobby-picker-actions .pixel-button { min-height: 42px; flex: 0 0 auto; text-decoration: none; }
.lobby-picker-actions .is-disabled { filter: grayscale(.5); opacity: .5; pointer-events: none; }
.lobby-footer { position: absolute; z-index: 6; right: 27px; bottom: 20px; left: 27px; display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.87); font-size: 10px; font-weight: 900; }
.lobby-footer a { color: inherit; text-decoration: none; }
.lobby-footer form { margin: 0; }
.lobby-footer button { padding: 8px 10px; color: inherit; background: transparent; font-size: inherit; font-weight: inherit; }

.isometric-estate { position: absolute; z-index: 2; right: -2vw; bottom: -9vh; width: min(860px, 63vw); height: min(700px, 73vh); transform: rotateX(58deg) rotateZ(-45deg); transform-style: preserve-3d; }
.estate-ground { position: absolute; inset: 8%; border: 4px solid #27665c; border-radius: 30px; background: #7acb78; box-shadow: 0 0 0 22px #4dac78, 34px 34px 0 #1c7180, 55px 55px 60px rgba(3,55,75,.42); }
.estate-ground::before { position: absolute; inset: 0; border-radius: inherit; content: ""; opacity: .22; background-image: linear-gradient(90deg, transparent 48%, #fff 49% 51%, transparent 52%), linear-gradient(0deg, transparent 48%, #fff 49% 51%, transparent 52%); background-size: 60px 60px; }
.estate-road { position: absolute; z-index: 2; background: #e7d59c; box-shadow: inset 0 0 0 4px #bd9d5d; }
.road-a { top: 11%; bottom: 11%; left: 45%; width: 13%; }
.road-b { top: 45%; right: 11%; left: 11%; height: 13%; }
.estate-block,
.estate-tower { position: absolute; z-index: 4; transform: translateZ(55px); transform-style: preserve-3d; }
.estate-block::before,
.estate-tower::before { position: absolute; inset: 0; border: 4px solid #17324a; border-radius: 6px; content: ""; background: #fff0bb; box-shadow: inset -13px -13px #d9bd71, 15px 15px 0 rgba(30,81,76,.24); }
.estate-block::after,
.estate-tower::after { position: absolute; top: -24px; right: -3px; left: -3px; height: 27px; border: 4px solid #17324a; content: ""; background: #ff826d; transform: skewX(-38deg); transform-origin: bottom; }
.estate-block i,
.estate-tower i { position: absolute; z-index: 2; width: 17px; height: 25px; border: 3px solid #17324a; background: #77d7ea; box-shadow: inset -4px -4px rgba(23,68,88,.2); }
.estate-block i:nth-child(1), .estate-tower i:nth-child(1) { top: 20px; left: 18px; }
.estate-block i:nth-child(2), .estate-tower i:nth-child(2) { top: 20px; right: 18px; }
.estate-block i:nth-child(3), .estate-tower i:nth-child(3) { bottom: 16px; left: 42%; height: 34px; background: #55b9a6; }
.block-a { top: 18%; left: 17%; width: 150px; height: 112px; }
.block-b { top: 18%; right: 16%; width: 170px; height: 120px; }
.block-b::before { background: #d9efff; box-shadow: inset -13px -13px #89b9d5, 15px 15px 0 rgba(30,81,76,.24); }
.block-b::after { background: #9a7be4; }
.block-c { right: 17%; bottom: 15%; width: 145px; height: 107px; }
.block-c::before { background: #ffe7da; box-shadow: inset -13px -13px #dda591, 15px 15px 0 rgba(30,81,76,.24); }
.block-c::after { background: #ffcf55; }
.estate-tower { bottom: 15%; left: 16%; width: 145px; height: 150px; transform: translateZ(78px); }
.estate-tower::before { background: #dbf6ed; box-shadow: inset -15px -15px #87c9b7, 18px 18px 0 rgba(30,81,76,.25); }
.estate-tower::after { top: -30px; height: 33px; background: #55c5d4; }
.estate-tower b { position: absolute; z-index: 5; top: -58px; left: 45%; width: 6px; height: 30px; background: #17324a; box-shadow: 13px 5px 0 #ff735f; }
.estate-pool { position: absolute; z-index: 3; top: 34%; left: 28%; width: 145px; height: 85px; border: 6px solid #fff1bf; border-radius: 45%; background: repeating-radial-gradient(ellipse, #61dbed 0 8px, #38b5da 9px 14px); box-shadow: 10px 12px 0 rgba(37,91,85,.2); transform: translateZ(8px); }
.estate-garden { position: absolute; z-index: 5; right: 29%; bottom: 20%; width: 100px; height: 90px; transform: translateZ(32px); }
.estate-garden i { position: absolute; width: 28px; height: 54px; border: 3px solid #225447; border-radius: 50%; background: #42b458; box-shadow: inset -7px -7px #278940, 7px 8px 0 rgba(32,94,74,.18); }
.estate-garden i:nth-child(1) { top: 3px; left: 5px; }
.estate-garden i:nth-child(2) { top: 25px; left: 38px; }
.estate-garden i:nth-child(3) { top: 0; right: 2px; }
.estate-sign { position: absolute; z-index: 8; top: 47%; left: 42%; padding: 7px 10px; border: 3px solid #17324a; border-radius: 6px; color: #17324a; background: #ffdb66; box-shadow: 5px 5px 0 rgba(23,50,74,.19); font-size: 8px; font-weight: 1000; transform: translateZ(90px) rotateZ(45deg) rotateX(-58deg); white-space: nowrap; }

@media (max-width: 1180px) {
    .site-brand,
    .landing-page .site-brand { width: 260px; }
    .site-nav a { padding: 0 9px; }
    .site-nav svg { display: none; }
    .landing-page .site-header { flex-wrap: wrap; }
    .landing-page .site-nav { order: 3; width: 100%; justify-content: center; }
    .landing-page .site-header-actions { margin-left: auto; }
    .public-hero { grid-template-columns: 1fr 300px; }
    .news-grid { grid-template-columns: repeat(2, 1fr); }
    .staff-grid { grid-template-columns: 1fr 1fr; }
    .contact-layout { gap: 40px; }
    .isometric-estate { right: -17vw; width: 72vw; }
}

@media (min-width: 901px) and (max-width: 1120px) {
    .landing-page .launcher { width: calc(100% - 32px); }
    .landing-page .site-header { flex-wrap: nowrap; }
    .landing-page .site-nav { order: initial; width: auto; justify-content: flex-start; }
    .landing-page .launcher-hero { gap: 20px; grid-template-columns: minmax(0, 1fr) 380px; }
    .landing-page .launcher-showcase { min-height: 650px; }
    .landing-page .launcher-copy { justify-self: start; text-align: left; }
    .landing-page .launcher-copy > p { margin-inline: 0; }
    .landing-page .launcher-features { justify-content: flex-start; }
    .landing-page .launcher-features li { min-width: 145px; }
    .landing-page .launcher-world { justify-self: start; width: 560px; height: 330px; }
    .landing-page .launcher-world-art { --landing-art-scale: .77; left: 50%; }
    .landing-page .auth-card { align-self: start; margin: 48px 0 22px; }
    .lobby-copy { top: 12%; }
}

@media (max-width: 820px) {
    .public-shell { width: min(100% - 24px, 650px); }
    .site-header { min-height: 132px; flex-wrap: wrap; align-content: center; gap: 7px; }
    .site-brand,
    .landing-page .site-brand { width: 230px; }
    .site-header-actions { margin-left: auto; }
    .site-nav { order: 3; width: 100%; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
    .site-nav::-webkit-scrollbar { display: none; }
    .site-nav a { flex: 1 0 auto; justify-content: center; }
    .public-content { padding-top: 25px; }
    .public-hero { min-height: 0; grid-template-columns: 1fr; }
    .public-hero-window,
    .security-shield { display: none; }
    .public-hero h1 { font-size: clamp(50px, 12vw, 72px); }
    .news-grid { grid-template-columns: 1fr; }
    .security-layout { grid-template-columns: 1fr; }
    .staff-grid { grid-template-columns: 1fr; }
    .contact-layout { grid-template-columns: 1fr; }
    .contact-copy { padding-top: 20px; }
    .contact-copy h1 { font-size: clamp(52px, 13vw, 76px); }
    .site-footer { gap: 12px; grid-template-columns: 1fr auto; }
    .site-footer > span { display: none; }
    .lobby-copy { top: 15%; width: 58vw; }
    .lobby-copy h1 { font-size: clamp(54px, 10vw, 78px); }
    .lobby-room-picker { width: min(610px, 58vw); }
    .isometric-estate { right: -27vw; bottom: -3vh; width: 79vw; height: 55vh; opacity: .92; }
}

@media (max-width: 560px) {
    .site-header { min-height: 126px; }
    .site-brand,
    .landing-page .site-brand { width: min(210px, 48vw); }
    .site-login-link { display: none; }
    .site-enter-button { min-height: 40px; padding: 0 10px; }
    .site-nav a { min-height: 40px; padding: 0 8px; font-size: 9px; }
    .site-nav svg { display: block; width: 16px; }
    .public-content { padding-bottom: 50px; }
    .public-hero h1 { font-size: clamp(48px, 15vw, 64px); }
    .public-hero > div:first-child > p,
    .contact-copy > p { font-size: 14px; }
    .news-card-art { height: 135px; }
    .news-detail header { padding-top: 30px; }
    .news-detail h1 { font-size: clamp(42px, 13vw, 60px); }
    .news-detail-art { height: 190px; }
    .prose { padding: 25px 20px; }
    .safety-cta { align-items: stretch; flex-direction: column; }
    .safety-cta a { justify-content: center; }
    .contact-card-body { padding: 17px 14px; }
    .contact-form .form-two-columns { grid-template-columns: 1fr; }
    .site-footer { font-size: 8px; }
    .lobby-header { width: calc(100% - 24px); height: 86px; }
    .lobby-brand { width: 205px; }
    .lobby-user { padding: 7px 9px; }
    .lobby-user > span { display: none; }
    .lobby-copy { top: 14%; left: 12px; width: calc(100% - 24px); text-align: center; }
    .lobby-copy h1 { font-size: clamp(54px, 17vw, 72px); }
    .lobby-copy > p { max-width: 450px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.64); font-size: 12px; }
    .lobby-actions { justify-content: center; }
    .lobby-actions a { min-height: 48px; }
    .lobby-contract { padding: 7px 10px; border-radius: 999px; background: rgba(255,255,255,.68); }
    .lobby-room-picker { right: 12px; bottom: 53px; left: 12px; width: auto; }
    .lobby-picker-body { padding: 10px; }
    .lobby-room-option { min-width: 160px; }
    .lobby-picker-actions > span { display: none; }
    .lobby-picker-actions .pixel-button { width: 100%; }
    .isometric-estate { right: -31vw; bottom: -15vh; width: 126vw; height: 56vh; opacity: .6; }
    .lobby-footer { right: 12px; bottom: 10px; left: 12px; }
}