html, body {
    margin: 0;
    overflow: hidden;
    background: #89cff0;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    user-select: none;
    -webkit-user-select: none;
    /* Belt-and-suspenders alongside the viewport meta tag: stops a
       two-finger pinch anywhere on the page (not just the canvas) from
       zooming the whole page instead of staying inside the game. */
    touch-action: none;
}
canvas {
    display: block;
    background: transparent;
    touch-action: none;
}

/* ---------- Theme tokens ----------
   Studio's chrome (topbar, buttons, modals, popovers) uses these tokens
   throughout -- separate from the 3D scene itself (the sky-blue
   background above is the game world, not UI, and stays as-is). */
:root {
    --studio-bg: #e9e9ec;
    --studio-bg-raised: #ffffff;
    --studio-bg-hover: #dcdce0;
    --studio-bg-active: #dadade;
    --studio-border: #e4e4e7;
    --studio-text: #222222;
    --studio-text-muted: #777777;
    --studio-accent: #3d78d6;
    --studio-accent-hover: #366bc0;
    --studio-danger-bg: #f0dcdc;
    --studio-danger-text: #a33333;
    --studio-danger-bg-hover: #e6c8c8;
    --studio-divider: #b8b8bd;
}
[data-theme="dark"] {
    --studio-bg: #26292e;
    --studio-bg-raised: #1f2226;
    --studio-bg-hover: #2a2d32;
    --studio-bg-active: #33373c;
    --studio-border: #33373c;
    --studio-text: #d6d9dd;
    --studio-text-muted: #9aa0a6;
    --studio-accent: #5b93e0;
    --studio-accent-hover: #4a7dc7;
    --studio-danger-bg: #45292a;
    --studio-danger-text: #e08585;
    --studio-danger-bg-hover: #55302f;
    --studio-divider: #45484d;
}


/* ---------- Loading screen (shown while opening someone's build) ----------
   Same branded look as Parts Builder / Zombies (dark gradient backdrop,
   Hexi logo bottom-left, big centered title + subtitle) -- partsbuilder.css's
   #loading-logo rule (loaded above this file) already supplies the logo
   positioning; this just adds the "show" hook it needs plus studio's own
   title/owner text block. */
#studio-loading-screen {
    display: none;
    position: fixed; inset: 0; z-index: 10001;
    background: radial-gradient(circle at 85% 8%, #4a4a52 0%, #2c2c30 35%, #1a1a1c 75%);
    align-items: center; justify-content: center;
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.4s ease;
}
#studio-loading-screen.show { display: flex; }
#studio-loading-screen.fade-out { opacity: 0; pointer-events: none; }
/* Full-bleed, blurred/darkened copy of the build's own thumbnail --
   filled in by setLoadingScreenInfo() in studio.js when the build has
   one. Left empty (so the plain gradient above shows through) when it
   doesn't. Sized a bit larger than the screen so the blur's soft edge
   never reveals a hard border. */
#studio-loading-bg {
    position: absolute; inset: -30px;
    background-size: cover; background-position: center;
    filter: blur(22px) brightness(0.5);
    transform: scale(1.08);
    z-index: 0;
}
#studio-loading-inner {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    color: #fff; max-width: 90vw;
}
#studio-loading-preview { margin-bottom: 0; }
#studio-loading-preview img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: none;
}
#studio-loading-title {
    font-size: 26px; font-weight: 500; color: #ffffff;
    margin: 14px 0 0;
    line-height: 1.15;
}
#studio-loading-owner {
    font-size: 14px; font-weight: 400; color: #b8b8bd; margin-top: 2px;
}
/* Indeterminate loading bar pinned to the bottom of the page, width-matched
   to the thumbnail preview above so the whole loading screen reads as one
   aligned column even though the bar itself sits far below it. */
#studio-loading-bar {
    position: fixed;
    left: 50%; bottom: 40px;
    transform: translateX(-50%);
    width: 340px; max-width: 80vw;
    height: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,0.15);
    overflow: hidden;
    z-index: 2;
}
#studio-loading-bar-fill {
    position: absolute; top: 0; left: 0;
    width: 0%; height: 100%;
    border-radius: 999px;
    background: #a374ed;
    transition: width 0.25s ease-out;
}

#load-error-box {
    display: none;
    position: fixed; z-index: 10002; left: 50%; top: 50%; transform: translate(-50%, -50%);
    background: rgba(20,20,22,0.92); border: 1px solid rgba(255,255,255,0.12);
    padding: 22px 26px; text-align: center; max-width: 320px;
}
#load-error-message { color: #fff; font-size: 14px; margin-bottom: 14px; }
#load-error-retry-btn {
    background: #3d78d6; color: #fff; border: none; padding: 8px 18px;
    font-family: 'Poppins', sans-serif; font-weight: 500; cursor: pointer;
    border-radius: 4px;
}

/* ---------- Mobile play controls (same look as parts-builder) ---------- */
#mobile-controls {
    display: none;
    position: absolute; bottom: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 20;
}
#joystick-base {
    position: absolute; bottom: 40px; left: 40px; width: 120px; height: 120px;
    background: rgba(70, 70, 70, 0.5);
    border: none;
    border-radius: 50%;
    pointer-events: auto; touch-action: none;
}
#joystick-stick {
    position: absolute; top: 30px; left: 30px; width: 60px; height: 60px;
    background: rgba(90, 90, 90, 0.7);
    border: none;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(0px, 0px);
}
#jump-btn {
    position: absolute; bottom: 50px; right: 40px; width: 85px; height: 85px;
    background: rgba(70, 70, 70, 0.65);
    border: none;
    border-radius: 50%;
    color: #fff; font-size: 15px; font-weight: 300; font-family: 'Poppins', sans-serif;
    display: flex; align-items: center; justify-content: center;
    pointer-events: auto; box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    touch-action: none; transition: background 0.2s;
}
#jump-btn:active { background: rgba(90, 90, 90, 0.75); }
#jump-btn-triangle {
    width: 0; height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 20px solid #fff;
}
@media (max-width: 480px) {
    #joystick-base { width: 96px; height: 96px; bottom: 26px; left: 26px; }
    #joystick-stick { width: 48px; height: 48px; top: 24px; left: 24px; }
    #jump-btn { width: 68px; height: 68px; bottom: 34px; right: 26px; font-size: 13px; border-width: 0; }
    #jump-btn-triangle {
        border-left-width: 9px; border-right-width: 9px; border-bottom-width: 15px;
    }
}

/* ---------- Top-corner Menu/Chat icon bar ----------
   One rounded pill (same color as the chat box) housing both icon buttons
   (Menu = Leave, speech bubble = Chat toggle), sitting just above
   #chat-panel (which starts further down, at top: 60px, to leave room for
   this bar). Shown any time the real topbar is hidden -- i.e. outside
   build mode -- on every device, not just mobile/touch: previously this
   only had a fallback on narrow/touch screens, which left desktop players
   with no way to leave or open chat at all while just playing a build.
   studio-build-mode already has the real topbar's Exit Studio / Chat
   buttons, so this stays hidden there. */
#hud-topleft-controls {
    display: flex;
    position: fixed; top: 8px; left: 8px;
    background: rgba(52, 63, 74, 0.65);
    border-radius: 11px;
    padding: 3px;
    gap: 3px;
    z-index: 501;
}
/* Menu/Chat buttons: hidden while building, shown inside the game frame while play-testing. */
html.studio-build-mode:not(.studio-play-testing) #hud-topleft-controls { display: none; }
#mobile-leave-btn, #mobile-chat-btn {
    display: flex; align-items: center; justify-content: center;
    position: relative;
    width: 32px; height: 32px;
    background: transparent;
    border: none; border-radius: 8px;
    padding: 0; cursor: pointer;
    transition: background 0.15s;
}
#mobile-leave-btn svg, #mobile-chat-btn svg { width: 18px; height: 18px; display: block; }
#mobile-leave-btn svg { width: 22px; height: 22px; }
#mobile-leave-btn:hover, #mobile-chat-btn:hover { background: rgba(255, 255, 255, 0.12); }
#mobile-leave-btn:active, #mobile-chat-btn:active { background: rgba(0, 0, 0, 0.15); }
#mobile-chat-btn .chat-unread-dot {
    display: none;
    position: absolute; top: 6px; right: 6px;
    width: 7px; height: 7px; border-radius: 50%;
    background: #ff4d4d; border: 1.5px solid rgba(52, 63, 74, 0.9);
}
#mobile-chat-btn.has-unread .chat-unread-dot { display: block; }

/* ---------- Shift Lock crosshair (center-screen mouse-look indicator) ---------- */
#shiftlock-crosshair {
    display: none;
    position: fixed; top: 50%; left: 50%;
    width: 18px; height: 18px;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
    box-sizing: border-box;
    z-index: 490;
    pointer-events: none;
}
#shiftlock-crosshair.active { display: block; }



/* ---------- Pause/game menu (opened from the hamburger icon) ---------- */
#game-menu-overlay {
    display: flex; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6);
    z-index: 800; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s ease;
}
#game-menu-overlay.open { opacity: 1; pointer-events: auto; }
#game-menu-modal {
    background: rgb(52, 63, 74);
    border: none;
    position: relative;
    width: 620px; max-width: 96vw; padding: 320px 32px 24px;
    box-sizing: border-box; box-shadow: none;
    display: flex; flex-direction: column; gap: 14px;
    border-radius: 6px;
    transform: scale(0.85); opacity: 0;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}
#game-menu-overlay.open #game-menu-modal { transform: scale(1); opacity: 1; }
#game-menu-btn-row { display: flex; flex-direction: row; gap: 12px; margin-top: auto; }
#game-menu-title {
    position: absolute; top: 24px; left: 32px; right: 32px;
    font-family: 'Poppins', sans-serif; font-size: 32px; font-weight: 700; color: #ffffff;
}
#game-menu-sensitivity-row {
    position: absolute; top: 104px; left: 32px; right: 32px;
    display: flex; flex-direction: column; gap: 8px;
}
#game-menu-sensitivity-label-row {
    display: flex; flex-direction: row; justify-content: space-between; align-items: baseline;
}
#game-menu-sensitivity-label {
    font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 500; color: #ffffff;
}
#game-menu-sensitivity-value {
    font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.75);
}
#game-menu-sensitivity-slider {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 4px; border-radius: 2px;
    background: rgba(255, 255, 255, 0.25);
    outline: none; cursor: pointer; margin: 0;
}
#game-menu-sensitivity-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 16px; height: 16px; border-radius: 50%;
    background: #ffffff; cursor: pointer; border: none;
}
#game-menu-sensitivity-slider::-moz-range-thumb {
    width: 16px; height: 16px; border-radius: 50%;
    background: #ffffff; cursor: pointer; border: none;
}
#game-menu-divider {
    position: absolute; top: 76px; left: 32px; right: 32px;
    height: 1px; background: rgba(255, 255, 255, 0.15); border: none; margin: 0;
}
.game-menu-btn {
    flex: 1 1 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 500;
    text-align: center;
    padding: 6px 10px; cursor: pointer; border-radius: 4px; border: none; outline: none;
    background: rgba(255, 255, 255, 0.12); color: #ffffff;
}
.game-menu-btn:hover { background: rgba(255, 255, 255, 0.22); }
.game-menu-btn:active { transform: scale(0.98); }
.game-menu-btn:focus { outline: none; }
.game-menu-btn-danger { background: rgba(163, 51, 51, 0.4); color: #ffdada; }
.game-menu-btn-danger:hover { background: rgba(163, 51, 51, 0.55); }


/* ---------- Bottom stats bar (FPS / part count / username) ----------
   Thin strip pinned to the bottom of the screen, styled as part of the
   regular light Studio chrome (same idea as the topbar) rather than a
   transparent game-overlay -- solid background, thin top border. Offset
   from the left by the parts sidebar's width so it doesn't run underneath
   it; when that sidebar is hidden entirely (viewing/playing someone
   else's published build -- see applyViewMode() adding .full-width to
   this bar), it drops back to spanning the full width. */
#studio-bottom-bar {
    position: fixed; left: 180px; right: 0; bottom: 0;
    height: 26px;
    display: flex; align-items: center; justify-content: flex-end;
    gap: 14px;
    padding: 0 12px;
    box-sizing: border-box;
    background: var(--studio-bg-raised);
    border-top: 1px solid var(--studio-border);
    z-index: 501;
    pointer-events: none;
    user-select: none;
}
#studio-bottom-bar.full-width { left: 0; }
html:not(.studio-build-mode) #studio-bottom-bar { display: none !important; }

/* The bottom-middle HUD (pointer triangle, 4 item slots, health bar) is a
   play-time thing. Hide it while you're just building in the normal
   (unpublished) studio; it still shows when you press Play to test, and
   when viewing/playing a published build. */
html.studio-build-mode:not(.studio-play-testing) #hud-bottom { display: none !important; }
.studio-stat {
    color: var(--studio-text-muted);
    font-family: 'Poppins', monospace, sans-serif;
    font-size: 12px; font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
}


/* partsbuilder.css (loaded above) has a "Test game: simplified UI"
   section, written for a different game (Zombies) that wants chat always
   on screen with no toggle button. It force-shows #chat-panel with
   `display: flex !important` unconditionally, which -- since Studio
   shares this stylesheet too -- was making the chat box sit open on
   screen all the time instead of appearing only when the Chat button is
   clicked. This restores Studio's actual click-to-open behavior: hidden
   until the JS adds the `.open` class (see setChatOpen() in studio.js),
   then it shows the input so you can type and send a message. */
/* The panel stays laid out and fades/slides instead of snapping on and
   off, so opening gets a small pop-in and closing a quick slide-out. */
#chat-panel {
    display: flex !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform-origin: top left;
    transform: translateY(-10px) scale(0.94);
    transition: opacity 0.14s ease-in, transform 0.14s ease-in, visibility 0s linear 0.14s;
}
#chat-panel.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition: opacity 0.18s ease-out, transform 0.26s cubic-bezier(0.2, 0.9, 0.3, 1.25), visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
    #chat-panel, #chat-panel.open { transition: none; transform: none; }
}

/* Give the chat box the same floating-window look as the leaderboard:
   a solid header bar, a semi-transparent blue-gray body, rounded
   corners, and a little breathing room from the screen edge instead of
   sitting flush under the topbar. partsbuilder.css (loaded above) has
   an unscoped "Test game" rule further down that forces #chat-panel
   and its children fully transparent with !important -- these rules
   need matching !important + later cascade order (this file loads
   after partsbuilder.css) to win back a visible window here. */
#chat-panel {
    top: 52px !important;
    left: 8px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    overflow: hidden;
    text-shadow: none !important;
}
#chat-header {
    background: #3c4450 !important;
}
#chat-messages, #chat-input-row {
    background: rgba(52, 63, 74, 0.65) !important;
}
#chat-input-row {
    border-top: none !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 8px 8px !important;
    box-sizing: border-box;
}
/* The text box is its own rounded block inside the chat window, with a
   Send button on its right (partsbuilder.css hides the button globally). */
#chat-input {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 6px !important;
    padding: 8px 10px !important;
}
#chat-input:focus { background: rgba(255, 255, 255, 0.16) !important; }
#chat-input::placeholder { text-shadow: none !important; }
#chat-send-btn {
    display: flex !important;
    flex: 0 0 34px;
    width: 34px !important;
    height: 34px;
    align-self: center;
    border: none !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.14) !important;
    transition: background 0.15s;
}
#chat-send-btn:hover { background: rgba(255, 255, 255, 0.26) !important; }

#leaderboard {
    border-radius: 8px !important;
    opacity: 1;
    transition: opacity 0.2s ease;
}
/* Set by showLeaderboard()/hideLeaderboard() in studio.js -- fades the
   panel out before the JS flips it to display:none, instead of the
   panel just vanishing instantly. */
#leaderboard.leaderboard-fade-out {
    opacity: 0 !important;
}
#leaderboard-header {
    background: #3c4450 !important;
}
#leaderboard-body {
    background: rgba(52, 63, 74, 0.65) !important;
}
#leaderboard-close-btn {
    cursor: pointer;
}
#leaderboard-header, #leaderboard-self-card {
    cursor: pointer;
}

/* ---------- Topbar ---------- */
#game-topbar {
    position: fixed; top: 0; left: 0; right: 0; height: 92px;
    background: var(--studio-bg-raised);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 14px; box-sizing: border-box; z-index: 500;
    border-bottom: 1px solid var(--studio-border);
}
/* partsbuilder.css (loaded above) has a mobile/touch (`pointer: coarse` or
   narrow-width) rule that force-hides #game-topbar with !important -- it's
   meant for Zombies' stripped-down "just chat + leaderboard" phone UI.
   Studio shares that stylesheet too, so on touch devices it was wiping out
   the whole building toolbar (Add Part, Undo, Publish, etc.) even while
   building your own thing. Scoped to .studio-build-mode (set inline, above,
   only when NOT viewing/playing someone else's published build) so the
   topbar/Add Part button always show while you're actually building --
   while playing a published build on mobile still gets the original
   simplified, topbar-free UI, unchanged. */
html.studio-build-mode #game-topbar { display: flex !important; }

/* ---------- Document tab bar ----------
   Thin second bar directly under #game-topbar, spanning the same full
   width so it sits flush across the top of both the Explorer sidebar and
   the Toolbox panel below it. Always has the "Game" tab (the 3D
   viewport); a Script/LocalScript/ModuleScript tab is added next to it
   when one is inserted/selected (see renderTabBar() in studio.js), and
   switches #script-fullscreen-editor in for the viewport while active. */
#studio-tabbar {
    position: fixed; top: 92px; left: 0; right: 0; height: 34px;
    background: var(--studio-bg-raised); border-bottom: 1px solid var(--studio-border);
    display: flex; align-items: stretch; box-sizing: border-box; z-index: 460;
    overflow-x: auto; overflow-y: hidden;
    /* The Explorer/Toolbox panels overlay this bar's outer edges (they sit
       above it, z-index-wise, and start at the same top offset) -- so the
       actual tabs need to render only in the visible middle strip between
       them, or Explorer would cover the Game tab itself. */
    padding-left: 180px; padding-right: 180px;
}
#studio-tabbar.hidden { display: none; }
html.studio-build-mode #studio-tabbar { display: flex !important; }
/* Fully hidden (not just dimmed) while play-testing -- needs to beat the
   build-mode "always visible" rule above, hence the matching !important. */
html.studio-build-mode #studio-tabbar.play-testing { display: none !important; }
.studio-tab {
    display: flex; align-items: center; gap: 6px; padding: 0 12px; flex-shrink: 0;
    font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 500;
    color: var(--studio-text-muted); cursor: pointer; user-select: none;
    border-right: 1px solid var(--studio-border);
    border-bottom: 2px solid transparent; box-sizing: border-box;
    transition: background 0.12s, color 0.12s;
}
.studio-tab:hover { background: var(--studio-bg-hover); }
.studio-tab.active { color: var(--studio-text); border-bottom-color: var(--studio-accent); background: var(--studio-bg-hover); }
.studio-tab-icon { width: 14px; height: 14px; flex-shrink: 0; display: flex; }
.studio-tab-icon svg { width: 14px; height: 14px; }
.studio-tab-label { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#studio-tab-scripts { display: flex; align-items: stretch; }
.studio-tab-close {
    width: 14px; height: 14px; flex-shrink: 0; border-radius: 3px;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; line-height: 1; color: var(--studio-text-muted);
}
.studio-tab-close:hover { background: var(--studio-danger-text); color: #fff; }

/* ---------- Full-screen script editor ----------
   Fills the same rect the 3D viewport occupies (between the Explorer and
   Toolbox panels, below the tab bar) while a script tab is active.
   Hidden (and non-interactive) the rest of the time so it never blocks
   clicks into the game view. */
#script-fullscreen-editor {
    display: none; flex-direction: column;
    position: fixed; left: 180px; right: 180px; top: 126px; bottom: 0;
    background: var(--studio-bg); z-index: 470; padding: 14px; box-sizing: border-box;
}
#script-fullscreen-editor.open { display: flex; }
#script-fullscreen-editor .script-editor-wrap { flex: 1 1 0; min-height: 0; margin-top: 0; height: auto; }
#script-fullscreen-editor #script-editor-highlight,
#script-fullscreen-editor #script-editor-textarea { font-size: 14px; padding: 14px; }
#script-fullscreen-editor .script-editor-status { flex-shrink: 0; }
.script-editor-hint { font-size: 11px; color: var(--studio-text-muted); padding: 6px 2px 0; }
.script-part-notes { margin-top: 10px; padding: 8px 10px; border: 1px solid var(--studio-border, rgba(255,255,255,.12)); border-radius: 6px; font-size: 11px; line-height: 1.45; color: var(--studio-text-muted); }
.script-part-notes-title { font-weight: 600; margin-bottom: 4px; color: inherit; }
.script-part-notes ul { margin: 0; padding-left: 16px; }
.script-part-notes li { margin-bottom: 3px; }
.script-part-notes code { font-family: ui-monospace, Consolas, monospace; font-size: 10.5px; }

/* ---------- Play-testing: gray out the whole topbar except Stop ----------
   Set on #game-topbar by enterPlayMode()/exitPlayMode() in studio.js.
   Everything except the Test group (Play/Stop) dims and stops accepting
   clicks while you're testing your build -- Stop stays live so there's
   always a way back to building. */
#game-topbar.play-testing #part-tools-wrap,
#game-topbar.play-testing #snap-group,
#game-topbar.play-testing #insert-group,
#game-topbar.play-testing #edit-group,
#game-topbar.play-testing #undo-btn,
#game-topbar.play-testing #publish-btn,
#game-topbar.play-testing #chat-toggle-btn,
#game-topbar.play-testing .topbar-right {
    opacity: 0.4;
    pointer-events: none;
}
.topbar-left { display: flex; align-items: center; gap: 10px; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.topbar-divider { width: 1px; height: 48px; background: var(--studio-divider); border-radius: 0; flex-shrink: 0; }
#studio-viewing-badge {
    font-size: 12px; color: var(--studio-text-muted); padding: 4px 10px;
    border: 1px solid var(--studio-border);
}
.topbar-btn {
    font-family: 'Poppins', sans-serif; font-size: 10px; font-weight: 500;
    width: 56px; height: 56px; padding: 4px; border: none; cursor: pointer; color: var(--studio-text);
    background: transparent; border-radius: 6px; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; text-align: center;
    white-space: normal; word-break: break-word; line-height: 1.15;
    transition: background 0.15s, transform 0.1s;
}
.topbar-btn-icon { width: 22px; height: 22px; flex-shrink: 0; }
.topbar-btn-icon.test-btn-icon { width: 30px; height: 30px; }
.topbar-btn:hover { background: var(--studio-bg-hover); }
.topbar-btn:active { transform: scale(0.96); }
.topbar-btn.primary { background: var(--studio-accent); color: #fff; font-weight: 600; }
.topbar-btn.primary:hover { background: var(--studio-accent-hover); }
.topbar-btn.danger { background: var(--studio-danger-bg); color: var(--studio-danger-text); }
.topbar-btn.danger:hover { background: var(--studio-danger-bg-hover); }
.topbar-btn:disabled { opacity: 0.45; cursor: default; pointer-events: none; }
.topbar-btn.hidden { display: none; }
/* partsbuilder.css (loaded above) styles #add-part-btn as its own floating
   round "Part" button pinned to the bottom-center of the screen -- that's
   Parts Builder's on-screen FAB. Studio's Insert button now uses its own
   #insert-btn id (inside #insert-btn-wrap) instead of reusing that id, so
   it never picks up the floating FAB look in the first place and needs no
   reset here. */
#insert-btn-wrap .topbar-btn span {
    color: var(--studio-text);
    font-size: 13px;
    font-weight: 500;
}

/* ---------- Part tools: Move / Resize ----------
   Each is its own full 56x56 button (same footprint as a .topbar-btn),
   laid out side by side with the same gap the rest of the topbar uses.
   The group sits in a wrapper with a small "Tools" label underneath,
   matching the label under the Snap control next to it. */
#part-tools-wrap.hidden { display: none; }
#snap-group.hidden { display: none; }
#insert-group.hidden { display: none; }
#edit-group.hidden { display: none; }
#test-group.hidden { display: none; }
.part-tools-wrap { display: flex; flex-direction: column; align-items: center; align-self: stretch; justify-content: flex-end; gap: 2px; flex-shrink: 0; }
.part-tools-label {
    font-family: 'Poppins', sans-serif; font-size: 9px; font-weight: 600;
    color: var(--studio-text-muted); letter-spacing: 0.02em;
}
.split-btn-group {
    display: flex; flex-direction: row;
    gap: 10px; flex-shrink: 0;
}
.split-btn {
    width: 56px; height: 56px;
    font-family: 'Poppins', sans-serif; font-size: 10px; font-weight: 500;
    padding: 4px; border: 2px solid transparent; cursor: pointer; color: var(--studio-text);
    background: transparent; border-radius: 6px; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; text-align: center;
    white-space: normal; word-break: break-word; line-height: 1.15;
    transition: background 0.15s, border-color 0.15s, transform 0.1s, color 0.15s;
}
.split-btn-icon { width: 22px; height: 22px; flex-shrink: 0; }
.split-btn:hover { background: var(--studio-bg-hover); }
.split-btn:active { transform: scale(0.96); }
/* Move / Resize toggle group -- whichever mode is active gets a blue
   outline instead of a filled background, so the button chrome and icon
   colors stay the same and only the border calls out the selected one. */
.split-btn.active { background: transparent; border-color: var(--studio-accent); }
.split-btn.active:hover { background: var(--studio-bg-hover); }

/* ---------- Snap control ----------
   Sits between the Move/Resize/Rotate tool group and Undo. One bordered
   box split by a horizontal divider into two stacked number fields: top
   is the grid increment used while moving a part, bottom is the
   increment used while resizing one. Move/resize icons (matching the
   tool-mode buttons above) sit next to each field so it's clear which
   is which, with a small "Snap" label underneath the whole box. Both
   default to 1 (today's behavior); dropping either toward 0.1 allows
   much finer, closer-to-freeform placement/sizing. */
.snap-group { display: flex; flex-direction: column; align-items: center; align-self: stretch; justify-content: flex-end; gap: 2px; flex-shrink: 0; }
.snap-group-label {
    font-family: 'Poppins', sans-serif; font-size: 9px; font-weight: 600;
    color: var(--studio-text-muted); letter-spacing: 0.02em;
}
.snap-fields {
    display: flex; flex-direction: column; align-items: stretch;
    border: 1px solid var(--studio-border); border-radius: 6px;
    background: var(--studio-bg-raised);
    overflow: hidden;
}
.snap-fields:focus-within { border-color: var(--studio-accent); }
/* Shrunk toward a square (was a wide 65x43 box): tighter padding, a
   smaller icon, and a narrower input so the two-row control reads as
   a compact square instead of a long rectangle, taking up less room
   in the topbar. */
.snap-field { display: flex; align-items: center; justify-content: center; gap: 3px; padding: 2px 5px; }
.snap-field-icon { width: 11px; height: 11px; flex-shrink: 0; color: var(--studio-text-muted); }
.snap-field-checkbox { width: 11px; height: 11px; flex-shrink: 0; margin: 0; accent-color: var(--studio-accent); cursor: pointer; }
.snap-field-divider { height: 1px; background: var(--studio-border); }
.snap-field-input {
    width: 20px; border: none; background: transparent; padding: 0;
    font-family: 'Poppins', monospace, sans-serif; font-size: 11px; font-weight: 600;
    color: var(--studio-text); text-align: center;
}
.snap-field-input:focus { outline: none; }
.snap-field-input::-webkit-inner-spin-button,
.snap-field-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.snap-field-input { -moz-appearance: textfield; }

/* ---------- Shared icon-button groups (Insert / Edit / Test) ----------
   Same "row of buttons + small label underneath" shape as the Tools and
   Snap groups next to them, reusing the existing .topbar-btn look for
   each button so Part/Spawn/Kill, Copy/Paste/Duplicate, and Play/Stop
   all match the rest of the topbar's buttons. */
.topbar-group-wrap { display: flex; flex-direction: column; align-items: center; align-self: stretch; justify-content: flex-end; gap: 2px; flex-shrink: 0; }
.topbar-group-label {
    font-family: 'Poppins', sans-serif; font-size: 9px; font-weight: 600;
    color: var(--studio-text-muted); letter-spacing: 0.02em;
}
.topbar-group-btns { display: flex; flex-direction: row; gap: 6px; flex-shrink: 0; }

#insert-btn-wrap.hidden { display: none; }

/* ---------- Recolor popup ----------
   Positioned as a real dropdown: studio.js sets #color-row's top/left to
   sit just under the Recolor button (right-edge aligned), and this
   transform right-anchors + slides it down from there when opened. */
#color-row {
    position: fixed; top: 0; left: 0; transform: translate(-100%, -8px) scale(0.96);
    transform-origin: top right;
    display: grid; grid-template-columns: repeat(4, 28px); gap: 8px; z-index: 520;
    background: var(--studio-bg-raised); padding: 12px 14px; border-radius: 10px;
    border: 1px solid var(--studio-border);
    box-shadow: 0 10px 28px rgba(0,0,0,0.22);
    opacity: 0; pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
#color-row.open { opacity: 1; pointer-events: auto; transform: translate(-100%, 0) scale(1); }
#color-row.hidden { display: none; }
.color-swatch {
    width: 28px; height: 28px; border-radius: 6px; cursor: pointer;
    border: 2px solid rgba(0,0,0,0.1); box-shadow: 0 2px 5px rgba(0,0,0,0.18);
    transition: transform 0.1s;
}
.color-swatch:hover { transform: scale(1.12); }
.color-swatch.selected { border-color: var(--studio-accent); box-shadow: 0 0 0 2px rgba(61,120,214,0.35), 0 2px 5px rgba(0,0,0,0.18); }

/* ---------- Resize handles ----------
   Each handle is two nested elements: the outer .resize-handle div is
   the actual click/drag target and stays comfortably clickable (padded
   well past the dot -- see HANDLE_HIT_PADDING in studio.js) even when
   the part is tiny or far away; the inner .handle-dot is purely visual
   and is what actually shrinks down on small/distant parts. Splitting
   these means the hit area never gets so small that grabbing a handle
   starts whiffing. */
#handle-layer { position: fixed; inset: 0; pointer-events: none; z-index: 40; }
/* Box-select rectangle drawn while right-click-dragging (see startMarquee in studio.js). */
#marquee-box { position: fixed; display: none; pointer-events: none; z-index: 41; border: 1px dashed #ffd400; background: rgba(255, 212, 0, 0.14); }
.resize-handle {
    /* width/height/margin are set inline by studio.js each frame
       (updateResizeHandlePositions) so the hit box tracks the handle's
       screen position and the dot's shrink-with-distance sizing. The
       values below are just a fallback default. */
    position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none;
    pointer-events: auto; cursor: pointer; touch-action: none;
}
.handle-dot {
    width: 26px; height: 26px; border: 3px solid #ffffff; border-radius: 50%;
    background: #3d9dff; box-shadow: 0 0 6px rgba(0,0,0,0.4);
    pointer-events: none; box-sizing: border-box;
}
.resize-handle:hover .handle-dot { background: #6fb6ff; }
.resize-handle.dragging .handle-dot { background: #1c6fd6; }

/* ---------- Rotate handle ----------
   A single circle that orbits the part at its current rotation angle
   (see rotateHandleWorldPos in studio.js). Same sizing/hit-area
   behavior as the resize handles above, just one of them and in a
   different color so it's clearly a different tool. */
.rotate-handle {
    position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none;
    pointer-events: auto; cursor: grab; touch-action: none;
}
.rotate-handle .handle-dot { background: #8e5bd6; }
.rotate-handle:hover .handle-dot { background: #a476e0; }
.rotate-handle.dragging .handle-dot { background: #6a3aa8; }
.rotate-handle.dragging { cursor: grabbing; }
#select-outline {
    position: absolute; border: 2px dashed rgba(61, 157, 255, 0.85);
    pointer-events: none; display: none;
}

/* ---------- Copy popup (double-click a part) ---------- */
#copy-popup {
    position: fixed; z-index: 600; transform: translate(-50%, -125%);
    background: var(--studio-bg-raised); border: 1px solid var(--studio-border); border-radius: 8px; padding: 6px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.25);
    display: none;
}
#copy-popup.open { display: block; }
#copy-popup-btn {
    font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 500;
    background: var(--studio-accent); color: #fff; border: none; border-radius: 5px;
    padding: 8px 14px; cursor: pointer; white-space: nowrap;
}
#copy-popup-btn:hover { opacity: 0.9; }
#copy-popup-btn:active { transform: scale(0.96); }

/* ---------- Publish modal ---------- */
#publish-overlay {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55);
    z-index: 700; align-items: center; justify-content: center;
}
#publish-overlay.open { display: flex; }
#publish-modal {
    background: var(--studio-bg-raised); border: 1px solid var(--studio-border);
    width: 560px; max-width: 92vw; padding: 22px;
    box-sizing: border-box; box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    max-height: 88vh; overflow-y: auto;
}
#publish-modal-title { font-size: 17px; font-weight: 600; color: var(--studio-text); margin-bottom: 16px; }
.publish-field-label { display: block; font-size: 12px; font-weight: 500; color: var(--studio-text-muted); margin: 12px 0 6px; }
.publish-field-optional { font-weight: 400; color: var(--studio-text-muted); }
#publish-name-input {
    width: 100%; box-sizing: border-box; padding: 9px 10px; font-family: 'Poppins', sans-serif;
    font-size: 14px; border: 1px solid var(--studio-border); outline: none;
    background: var(--studio-bg); color: var(--studio-text);
}
#publish-name-input:focus { border-color: var(--studio-accent); }
.publish-textarea {
    width: 100%; box-sizing: border-box; padding: 9px 10px; font-family: 'Poppins', sans-serif;
    font-size: 13px; line-height: 1.5; border: 1px solid var(--studio-border); outline: none;
    background: var(--studio-bg); color: var(--studio-text); resize: vertical;
    min-height: 64px;
}
.publish-textarea-tall { min-height: 110px; }
.publish-textarea:focus { border-color: var(--studio-accent); }
.field-hint { font-size: 12px; margin-top: 5px; min-height: 14px; color: var(--studio-text-muted); }
.field-hint.error { color: var(--studio-danger-text); }
.field-hint.success { color: #2e9e4e; }
#publish-thumb-row { display: flex; align-items: center; gap: 12px; }
#publish-thumb-preview {
    width: 96px; height: 64px; background: var(--studio-bg); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    border: 1px solid var(--studio-border);
}
#publish-thumb-preview img { width: 100%; height: 100%; object-fit: cover; }
#publish-thumb-placeholder { font-size: 10px; color: var(--studio-text-muted); text-align: center; padding: 0 6px; }
#publish-thumb-buttons { display: flex; flex-direction: column; gap: 6px; }
.publish-secondary-btn {
    background: var(--studio-bg); border: 1px solid var(--studio-border); color: var(--studio-text); font-family: 'Poppins', sans-serif;
    font-size: 12px; padding: 6px 10px; cursor: pointer; border-radius: 4px;
}
.publish-secondary-btn:hover { background: var(--studio-bg-hover); }
#publish-modal-buttons { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.publish-primary-btn {
    background: var(--studio-accent); color: #fff; border: none; font-family: 'Poppins', sans-serif;
    font-size: 13px; font-weight: 500; padding: 9px 18px; cursor: pointer; border-radius: 4px;
}
.publish-primary-btn:hover { opacity: 0.9; }
.publish-primary-btn:disabled { opacity: 0.6; cursor: default; }

#publish-success-toast {
    display: none; position: fixed; top: 102px; left: 50%; transform: translateX(-50%);
    background: rgba(30, 130, 70, 0.92); color: #fff; font-size: 13px; padding: 10px 18px;
    z-index: 800;
}
#publish-success-toast.show { display: block; }

/* ---------- Insert button dropdown (Part / Kill Part) ---------- */
.insert-btn-caret { width: 12px; height: 12px; flex-shrink: 0; opacity: 0.7; }
.insert-menu {
    position: absolute; top: 62px; left: 0; width: 180px;
    background: var(--studio-bg-raised); border: 1px solid var(--studio-border); border-radius: 10px; padding: 6px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.22);
    opacity: 0; pointer-events: none; transform: translateY(8px) scale(0.96);
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 530; text-align: left;
}
.insert-menu.open { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.insert-menu-item {
    display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box;
    background: none; border: none; font-family: 'Poppins', sans-serif; font-size: 13px;
    color: var(--studio-text); padding: 9px 10px; cursor: pointer; border-radius: 6px; text-align: left;
}
.insert-menu-item:hover { background: var(--studio-bg-hover); }
.insert-menu-item:last-child { color: var(--studio-danger-text); }
.insert-menu-swatch { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; border: 1px solid rgba(0,0,0,0.15); }

/* ---------- Parts sidebar ----------
   Left-side panel listing every part inserted this session (icon + name).
   Visible by default while building; only hidden entirely when viewing or
   playing someone else's published build (applyViewMode() adds .hidden). */
#parts-sidebar {
    display: flex; flex-direction: column;
    position: fixed; left: 0; top: 92px; bottom: 0; width: 180px;
    background: var(--studio-bg-raised); border-right: 1px solid var(--studio-border);
    box-sizing: border-box; padding: 10px; z-index: 480;
}
#parts-sidebar.hidden { display: none; }
#parts-sidebar-title {
    font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600;
    letter-spacing: 0.02em; color: var(--studio-text-muted);
    padding: 0 10px 10px; margin: 0 -10px 10px;
    border-bottom: 1px solid var(--studio-border);
}
/* Bleeds out to the sidebar's edges (margin/padding match the sidebar's
   padding) so the Explorer rows' full-width hover/selected highlight isn't
   clipped by this scroll container. */
#parts-sidebar-list-wrap { flex: 1 1 0; min-height: 0; overflow-y: auto; margin: 0 -10px; padding: 0 10px; }
#parts-sidebar-split { border-top: 1px solid var(--studio-border); margin: 10px -10px 0; }
/* ---------- Toolbox (right side) ----------
   Builder-only panel of gear you can put into the build. Hidden when
   viewing/playing a published build (no .studio-build-mode) and while
   play-testing, so players never see it and it can't sit on top of the
   leaderboard. */
#toolbox-panel {
    position: fixed; right: 0; top: 92px; bottom: 0; width: 180px;
    background: var(--studio-bg-raised);
    border-left: 1px solid var(--studio-border);
    overflow-y: auto;
    box-sizing: border-box; padding: 10px; z-index: 480;
}
#toolbox-panel.hidden,
html:not(.studio-build-mode) #toolbox-panel,
html.studio-play-testing #toolbox-panel { display: none; }
#toolbox-panel-title {
    font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600;
    letter-spacing: 0.02em; color: var(--studio-text-muted);
    padding: 0 10px 10px; margin: 0 -10px 10px;
    border-bottom: 1px solid var(--studio-border);
}
#toolbox-gear-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.toolbox-tile {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 6px 4px 5px; border-radius: 6px; cursor: pointer;
    background: var(--studio-bg-hover); border: 1px solid var(--studio-border);
    font-family: 'Poppins', sans-serif; color: var(--studio-text);
}
.toolbox-tile:hover { background: var(--studio-bg-active); }
.toolbox-tile.added { border-color: var(--studio-accent); box-shadow: inset 0 0 0 1px var(--studio-accent); }
.toolbox-tile.added::after {
    content: '\2713'; position: absolute; top: 2px; right: 4px;
    font-size: 11px; font-weight: 700; color: var(--studio-accent);
}
.toolbox-tile-icon { width: 34px; height: 34px; object-fit: contain; pointer-events: none; user-select: none; }
.toolbox-tile-name { font-size: 10.5px; font-weight: 500; line-height: 1.15; text-align: center; }
#toolbox-hint {
    font-family: 'Poppins', sans-serif; font-size: 10.5px; line-height: 1.3;
    color: var(--studio-text-muted); padding: 8px 2px 0;
}
/* Spans the sidebar's full width (cancels its 10px padding, puts it back
   inside) so the Properties sections can run edge to edge. */
#parts-sidebar-properties-wrap { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; margin: 0 -10px; padding: 0 10px; box-sizing: border-box; }
#parts-sidebar-properties-title {
    font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600;
    letter-spacing: 0.02em; color: var(--studio-text-muted);
    padding: 10px 10px 10px; margin: 0 -10px 0;
}
#parts-sidebar-properties-divider { border-top: 1px solid var(--studio-border); margin: 0 -10px; }
.sidebar-property-group-label {
    font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600;
    letter-spacing: 0.02em; color: var(--studio-text-muted);
    padding: 8px 2px 0;
}
.sidebar-property-row {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 2px 2px; font-family: 'Poppins', sans-serif;
    font-size: 13px; font-weight: 500; color: var(--studio-text);
    cursor: pointer; user-select: none;
}
.sidebar-property-row input[type="checkbox"] { width: 14px; height: 14px; flex-shrink: 0; cursor: pointer; }
.sidebar-property-divider { border-top: 1px solid var(--studio-border); margin: 10px -2px 0; }
.sidebar-property-row-input { justify-content: space-between; cursor: default; }
.sidebar-property-row-input input[type="number"] {
    width: 52px; font-family: 'Poppins', sans-serif; font-size: 12.5px;
    color: var(--studio-text); background: var(--studio-bg-hover);
    border: 1px solid var(--studio-border); border-radius: 4px;
    padding: 3px 5px; box-sizing: border-box; text-align: right;
}
/* Lighting settings panel (Explorer > Lighting / Sky / Sun / Ambient) */
.sidebar-property-row-input input[type="color"] {
    width: 34px; height: 22px; padding: 0; cursor: pointer;
    background: var(--studio-bg-hover); border: 1px solid var(--studio-border); border-radius: 4px;
}
.sidebar-property-row-input input:disabled, .sidebar-property-row input:disabled { opacity: 0.4; cursor: default; }
.lighting-subhead { padding-top: 12px; }
.lighting-presets { display: flex; gap: 4px; padding: 8px 0 2px; }
.lighting-preset-btn {
    flex: 1 1 0; min-width: 0; padding: 4px 0;
    font-family: 'Poppins', sans-serif; font-size: 11.5px; font-weight: 500;
    color: var(--studio-text); background: var(--studio-bg-hover);
    border: 1px solid var(--studio-border); border-radius: 4px; cursor: pointer;
}
.lighting-preset-btn:hover { background: var(--studio-bg-active); }

/* ---------- Explorer: instance objects (PlayerGUI/CoreUI/ScriptService) ---------- */
.explorer-add-btn, .explorer-del-btn {
    flex: 0 0 auto; width: 16px; height: 16px; margin-left: 2px;
    display: none; align-items: center; justify-content: center;
    border-radius: 3px; font-family: 'Poppins', sans-serif; font-size: 12px; line-height: 1;
    color: var(--studio-text-muted); cursor: pointer;
}
.explorer-row:hover .explorer-add-btn, .explorer-row:hover .explorer-del-btn { display: flex; }
.explorer-add-btn:hover { background: var(--studio-accent); color: #fff; }
.explorer-del-btn:hover { background: var(--studio-danger-text); color: #fff; }
.explorer-label.renaming {
    outline: 1px solid var(--studio-accent); border-radius: 3px; padding: 0 2px; background: var(--studio-bg-hover);
}
.explorer-insert-menu {
    position: fixed; z-index: 2000; min-width: 150px; max-height: 260px; overflow-y: auto;
    background: var(--studio-bg-raised); border: 1px solid var(--studio-border); border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.35); padding: 4px;
}
.explorer-insert-item {
    display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 4px; cursor: pointer;
    font-family: 'Poppins', sans-serif; font-size: 12px; color: var(--studio-text);
}
.explorer-insert-item:hover { background: var(--studio-bg-hover); }
.explorer-insert-item svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ---------- Properties: GUI object panel ---------- */
#gui-panel-fields .sidebar-property-row-input input[type="number"] { width: 52px; }

/* ---------- Properties: Luau script editor ---------- */
.script-editor-titlerow { display: flex; align-items: center; gap: 6px; padding: 2px 0 8px; }
.script-editor-icon { width: 16px; height: 16px; flex-shrink: 0; display: flex; }
.script-editor-icon svg { width: 16px; height: 16px; }
.script-editor-name-input {
    flex: 1 1 auto; min-width: 0; background: transparent; border: none; border-bottom: 1px solid transparent;
    font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; color: var(--studio-text); padding: 2px 0;
}
.script-editor-name-input:hover, .script-editor-name-input:focus { border-bottom-color: var(--studio-border); outline: none; }
.script-editor-wrap {
    position: relative; margin-top: 8px; height: 260px;
    border: 1px solid var(--studio-border); border-radius: 6px; overflow: hidden; background: var(--studio-bg-hover);
}
#script-editor-highlight, #script-editor-textarea {
    position: absolute; inset: 0; margin: 0; padding: 8px; width: 100%; height: 100%; box-sizing: border-box;
    font-family: 'Menlo', 'Consolas', monospace; font-size: 12px; line-height: 1.5; white-space: pre; overflow: auto;
    tab-size: 4;
}
#script-editor-highlight { color: var(--studio-text); pointer-events: none; }
#script-editor-highlight code { white-space: pre; }
#script-editor-textarea {
    resize: none; background: transparent; color: transparent; caret-color: var(--studio-text);
    border: none; outline: none;
}
#script-editor-textarea::selection { background: rgba(120, 160, 255, 0.35); }
.hl-kw { color: #ff8f6b; } .hl-str { color: #9fd88c; } .hl-num { color: #d9a5ff; }
.hl-com { color: var(--studio-text-muted); } .hl-fn { color: #7ec2ff; } .hl-bi { color: #f0c674; }
.script-editor-status {
    margin-top: 6px; font-family: 'Poppins', sans-serif; font-size: 11px; color: var(--studio-text-muted);
}
.script-editor-status.has-error { color: var(--studio-danger-text); }

/* ---------- Play/publish: Luau GUI overlay (PlayerGUI/CoreUI render) ----------
   Fixed over the 3D canvas; the root and ScreenGui wrappers never catch
   clicks (so you can still drag the camera), only the actual controls
   (TextButton) do. Position/Size come from studio-luau.js as inline
   left/top/width/height/transform (see applyGuiBoxStyle in studio.js). */
#luau-gui-root { position: fixed; inset: 0; pointer-events: none; z-index: 490; }
.luau-screengui { position: absolute; inset: 0; pointer-events: none; }
.luau-gui-obj {
    position: absolute; box-sizing: border-box; overflow: hidden;
    display: flex; align-items: center; justify-content: center; text-align: center;
    font-family: 'Poppins', sans-serif; padding: 4px; pointer-events: none;
}
.luau-textbutton { pointer-events: auto; cursor: pointer; user-select: none; }
.luau-textbutton:active { filter: brightness(0.92); }
/* Shown at all times (even with nothing selected) so the panel doesn't
   jump around -- just dimmed and inert until a real part is picked. */
#property-physical-group.disabled { opacity: 0.45; }
#property-physical-group.disabled .sidebar-property-row { cursor: default; }
#property-physical-group.disabled input { pointer-events: none; cursor: default; }
#parts-sidebar-list { display: flex; flex-direction: column; gap: 0; --explorer-pad: 10px; }

/* ---------- Explorer tree ----------
   World > services > parts. Every row bleeds out to the sidebar's edges
   (negative margin = the sidebar's padding) so hover/selected highlights
   span the full width, and each depth level indents by 12px. */
.explorer-row {
    display: flex; align-items: center; gap: 4px;
    margin: 0 calc(-1 * var(--explorer-pad));
    padding: 2px var(--explorer-pad) 2px calc(var(--depth, 0) * 12px + 6px);
    min-height: 24px; box-sizing: border-box;
    font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 500;
    color: var(--studio-text); cursor: default;
    white-space: nowrap;
}
.explorer-row:hover { background: var(--studio-bg-hover); }
.explorer-row.selected { background: var(--studio-bg-active); }
.explorer-part-row { cursor: pointer; }
.explorer-group-row .explorer-label { font-weight: 600; }
.explorer-arrow {
    width: 12px; height: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--studio-text-muted);
}
.explorer-arrow svg { width: 12px; height: 12px; transition: transform 0.12s ease; }
.explorer-arrow.none svg { display: none; }
.explorer-node.open > .explorer-row > .explorer-arrow svg { transform: rotate(90deg); }
.explorer-icon { width: 16px; height: 16px; flex-shrink: 0; display: flex; }
.explorer-svg { width: 16px; height: 16px; }
.explorer-label { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.explorer-children { display: none; }
.explorer-node.open > .explorer-children { display: block; }
.explorer-empty {
    padding: 4px 4px 4px calc(var(--depth, 0) * 12px + 6px);
    font-family: 'Poppins', sans-serif; font-size: 11.5px;
    color: var(--studio-text-muted); white-space: normal;
}
@media (max-width: 640px), (pointer: coarse) {
    #studio-tabbar { top: 36px; height: 28px; padding-left: 130px; padding-right: 130px; }
    .studio-tab { padding: 0 8px; font-size: 11px; }
    .studio-tab-label { max-width: 90px; }
    #parts-sidebar { top: 36px; width: 130px; padding: 8px; }
    #studio-bottom-bar { left: 130px; }
    #parts-sidebar-title { padding: 0 8px 8px; margin: 0 -8px 8px; }
    #parts-sidebar-split { margin: 8px -8px 0; }
    #toolbox-panel { top: 36px; width: 130px; padding: 8px; }
    #script-fullscreen-editor { left: 130px; right: 130px; top: 64px; padding: 8px; }
    #toolbox-panel-title { padding: 0 8px 8px; margin: 0 -8px 8px; }
    #toolbox-gear-grid { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); }
    #parts-sidebar-properties-title { padding: 8px 8px 8px; margin: 0 -8px 0; }
    #parts-sidebar-properties-divider { margin: 0 -8px; }
    .sidebar-property-group-label { font-size: 10.5px; padding: 6px 2px 0; }
    .sidebar-property-row { font-size: 11.5px; padding: 6px 2px 2px; gap: 6px; }
    .sidebar-property-divider { margin: 8px -2px 0; }
    .sidebar-property-row-input input[type="number"] { width: 44px; font-size: 11px; padding: 2px 4px; }
    #parts-sidebar-list { --explorer-pad: 8px; }
    #parts-sidebar-list-wrap { margin: 0 -8px; padding: 0 8px; }
    .explorer-row { font-size: 11px; gap: 3px; padding-right: 4px; padding-left: calc(var(--depth, 0) * 9px + 4px); }
    .explorer-arrow, .explorer-arrow svg { width: 10px; height: 10px; }
    .explorer-icon, .explorer-svg { width: 14px; height: 14px; }
    .explorer-empty { font-size: 10.5px; padding-left: calc(var(--depth, 0) * 9px + 4px); }
    /* Snap control: squeeze a bit further so the now-square box fits
       comfortably in the crowded mobile topbar. */
    .snap-field { padding: 2px 4px; }
    .snap-field-input { width: 16px; }
}

/* --- Gear in the HUD hotbar (owned Market gear shows up in the slots) --- */
.hud-slot { position: relative; }
.hud-slot.has-gear { pointer-events: auto; cursor: pointer; transition: background 0.12s ease, box-shadow 0.12s ease; }
.hud-slot.has-gear:hover { background: rgba(86, 85, 102, 0.75); }
.hud-slot.has-gear.active { background: rgba(109, 255, 126, 0.25); box-shadow: inset 0 0 0 2px #6dff7e; }
.hud-slot-icon {
    position: absolute; left: 5px; top: 5px; width: calc(100% - 10px); height: calc(100% - 10px);
    object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none;
}
.hud-slot-key {
    position: absolute; top: 2px; left: 5px; font: 600 10px 'Poppins', sans-serif;
    color: rgba(255, 255, 255, 0.75); pointer-events: none; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* --- Paint bucket: little color palette that pops up above the hotbar --- */
#paint-menu {
    display: none; position: fixed; left: 50%; bottom: 150px; transform: translateX(-50%); z-index: 26;
    background: rgba(54, 53, 65, 0.92); border-radius: 8px; padding: 8px 10px 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); font-family: 'Poppins', sans-serif; color: #fff;
    user-select: none; -webkit-user-select: none;
}
#paint-menu.open { display: block; }
#paint-menu-title { font-size: 11px; font-weight: 600; text-align: center; margin-bottom: 6px; opacity: 0.85; letter-spacing: 0.3px; }
#paint-menu-swatches { display: grid; grid-template-columns: repeat(8, 24px); gap: 5px; }
.paint-swatch {
    width: 24px; height: 24px; padding: 0; border-radius: 5px; cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.25); transition: transform 0.08s ease;
}
.paint-swatch:hover { transform: scale(1.12); }
.paint-swatch.selected { border-color: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35); }
canvas.paint-tool-cursor, canvas.sword-tool-cursor { cursor: crosshair; }
html.studio-build-mode:not(.studio-play-testing) #paint-menu { display: none !important; }
@media (max-width: 640px), (pointer: coarse) {
    #paint-menu { bottom: 118px; padding: 6px 8px 8px; }
    #paint-menu-swatches { grid-template-columns: repeat(8, 20px); gap: 4px; }
    .paint-swatch { width: 20px; height: 20px; }
}

/* ---------- Properties: part panel (Appearance / Behavior / Transform) ----------
   Roblox-style: collapsible section headers, then label | value rows. */
.prop-panel {
    font-family: 'Poppins', sans-serif; font-weight: 400;
    font-size: 10px; color: var(--studio-text); user-select: none;
    margin: 0 -10px; /* full width of the sidebar */
}
.prop-section-head {
    display: flex; align-items: center; gap: 5px; padding: 6px 8px; margin-top: 4px;
    font-size: 11px; font-weight: 600; color: var(--studio-text);
    background: var(--studio-bg); border-top: 1px solid var(--studio-border); border-bottom: 1px solid var(--studio-border);
    cursor: pointer;
}
.prop-section-head:hover { background: var(--studio-bg-hover); }
.prop-section-head .prop-chevron { flex-shrink: 0; transition: transform 0.12s; color: var(--studio-text-muted); }
.prop-section.collapsed > .prop-section-head .prop-chevron { transform: rotate(-90deg); }
.prop-section.collapsed > .prop-section-body { display: none; }
.prop-row {
    display: grid; grid-template-columns: 68px minmax(0, 1fr); align-items: center; column-gap: 4px;
    min-height: 24px; padding: 1px 6px 1px 8px; box-sizing: border-box; cursor: default;
}
.prop-label { color: var(--studio-text); opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prop-value { display: flex; align-items: center; gap: 6px; min-width: 0; }
.prop-static { color: var(--studio-text); padding-left: 5px; }
.prop-input {
    width: 100%; min-width: 0; height: 20px; box-sizing: border-box; padding: 0 4px;
    font: inherit; color: var(--studio-text); background: var(--studio-bg);
    border: 1px solid var(--studio-border); border-radius: 2px; outline: none; text-overflow: ellipsis;
}
.prop-input:hover { border-color: var(--studio-divider); }
.prop-input:focus { border-color: var(--studio-accent); user-select: text; -webkit-user-select: text; }
.prop-input:disabled { opacity: 0.6; }
.prop-color-text { color: var(--studio-text); white-space: nowrap; }
.prop-swatch {
    position: relative; flex: 0 0 auto; width: 14px; height: 14px; box-sizing: border-box;
    background: #ffffff; border: 1px solid var(--studio-divider); cursor: pointer; overflow: hidden;
}
.prop-swatch input[type="color"] {
    position: absolute; inset: -4px; width: 26px; height: 26px; padding: 0; border: 0;
    opacity: 0; cursor: pointer;
}
.prop-select-wrap { position: relative; }
.prop-select { appearance: none; -webkit-appearance: none; padding-right: 16px; cursor: pointer; }
.prop-select-wrap .prop-chevron { position: absolute; right: 5px; pointer-events: none; color: var(--studio-text-muted); }
.prop-check {
    appearance: none; -webkit-appearance: none; flex: 0 0 auto; margin: 0 0 0 5px;
    width: 12px; height: 12px; box-sizing: border-box; cursor: pointer;
    background: var(--studio-bg) center / 10px 10px no-repeat; border: 1px solid var(--studio-divider); border-radius: 2px;
}
.prop-check:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2 L4.2 7.4 L8 2.8' fill='none' stroke='%23222' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme="dark"] .prop-check:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2 L4.2 7.4 L8 2.8' fill='none' stroke='%23e6e8eb' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.prop-check:disabled { opacity: 0.4; cursor: default; }
.prop-check:disabled:checked { opacity: 0.85; }
#property-physical-group.disabled .prop-row { cursor: default; }
#property-physical-group.disabled .prop-swatch { cursor: default; }
@media (max-width: 640px), (pointer: coarse) {
    #parts-sidebar-properties-wrap { margin: 0 -8px; padding: 0 8px; }
    .prop-panel { margin: 0 -8px; font-size: 9px; }
    .prop-section-head { font-size: 10px; padding: 5px 6px; }
    .prop-row { grid-template-columns: 50px minmax(0, 1fr); min-height: 22px; padding: 1px 4px; }
    .prop-value { gap: 4px; }
}


/* ---------------------------------------------------------------
   Team Create (see the Team Create block in studio.js)
   --------------------------------------------------------------- */
#team-online-strip { display: flex; align-items: center; gap: 4px; margin-right: 6px; }
.team-avatar {
    width: 26px; height: 26px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; text-transform: uppercase;
    border: 2px solid var(--studio-bg-raised); box-sizing: border-box; cursor: default; font-family: 'Poppins', sans-serif;
}
.team-avatar-more { background: var(--studio-text-muted); }
#team-btn.team-live { color: #2eb84c; }
#team-btn .team-live-dot {
    position: absolute; top: 6px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: #2eb84c;
}
#team-btn { position: relative; }
#team-overlay {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55);
    z-index: 710; align-items: center; justify-content: center;
}
#team-overlay.open { display: flex; }
#team-modal {
    background: var(--studio-bg-raised); border: 1px solid var(--studio-border);
    width: 460px; max-width: 92vw; padding: 22px; box-sizing: border-box;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); max-height: 88vh; overflow-y: auto;
    font-family: 'Poppins', sans-serif; color: var(--studio-text);
}
#team-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
#team-modal-title { font-size: 17px; font-weight: 600; }
.team-status { font-size: 12px; color: var(--studio-text-muted); margin-bottom: 10px; line-height: 1.5; }
.team-switch-row { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; cursor: pointer; margin-top: 4px; }
.team-help { font-size: 11px; color: var(--studio-text-muted); margin: 4px 0 2px 24px; line-height: 1.45; }
.team-invite-row { display: flex; gap: 8px; }
#team-invite-input {
    flex: 1; min-width: 0; box-sizing: border-box; padding: 8px 10px; font-family: 'Poppins', sans-serif;
    font-size: 13px; border: 1px solid var(--studio-border); outline: none;
    background: var(--studio-bg); color: var(--studio-text);
}
#team-invite-input:focus { border-color: var(--studio-accent); }
.team-list { display: flex; flex-direction: column; gap: 4px; min-height: 22px; }
.team-row {
    display: flex; align-items: center; gap: 8px; padding: 5px 8px; font-size: 13px;
    background: var(--studio-bg); border: 1px solid var(--studio-border);
}
.team-row .team-avatar { width: 22px; height: 22px; font-size: 10px; border: none; }
.team-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-row-role { font-size: 11px; color: var(--studio-text-muted); }
.team-row-remove {
    border: none; background: transparent; color: var(--studio-danger-text); cursor: pointer;
    font-size: 16px; line-height: 1; padding: 0 4px;
}
.team-empty { font-size: 12px; color: var(--studio-text-muted); padding: 2px 0; }
.team-footer { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

/* "+ Add Script" button at the top of the part Properties panel */
.prop-add-script-btn {
    display: block; width: calc(100% - 16px); margin: 8px; padding: 6px 8px;
    border: 1px solid var(--studio-accent); border-radius: 6px; background: transparent;
    color: var(--studio-accent); font: 600 12px 'Poppins', sans-serif; cursor: pointer;
}
.prop-add-script-btn:hover { background: var(--studio-accent); color: #fff; }

/* Explorer placeholder messages ("No parts yet...", "Empty") are hidden. */
.explorer-empty, #parts-sidebar-empty { display: none !important; }


/* ======================================================================
   Studio on phones / tablets: compact build UI
   ----------------------------------------------------------------------
   Mobile-only (narrow OR touch screens, same test the rules above use)
   and build-mode-only, so desktop is untouched and playing a published
   build keeps its own simplified UI. Everything is driven by three
   variables so the topbar, tab bar, side panels, script editor and
   toasts always line up:
     --m-topbar-h  height of the toolbar
     --m-tab-h     height of the tab bar under it
     --m-side      width of the Explorer (left) and Toolbox (right)
   This block is last on purpose -- it overrides the older mobile rules
   above, which assumed a 36px topbar even though the real one is 92px.
   ====================================================================== */
@media (max-width: 640px), (pointer: coarse) {
    html.studio-build-mode {
        --m-topbar-h: 52px;
        --m-tab-h: 24px;
        --m-side: clamp(100px, 26vw, 128px);
    }

    /* ---- Topbar: shorter, smaller buttons, swipe sideways for the rest ---- */
    html.studio-build-mode #game-topbar {
        height: var(--m-topbar-h); padding: 0 6px; gap: 6px;
        justify-content: flex-start;
        overflow-x: auto; overflow-y: hidden;
        -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
        scrollbar-width: none;
        touch-action: pan-x; /* html/body block touch gestures; let the bar scroll */
    }
    html.studio-build-mode #game-topbar::-webkit-scrollbar { display: none; }
    html.studio-build-mode #game-topbar .topbar-left,
    html.studio-build-mode #game-topbar .topbar-right { gap: 4px; flex-shrink: 0; }
    html.studio-build-mode #game-topbar .topbar-right { margin-left: auto; }

    html.studio-build-mode #game-topbar .topbar-btn,
    html.studio-build-mode #game-topbar .split-btn {
        width: 40px; height: 40px; padding: 2px; gap: 2px;
        font-size: 8px; line-height: 1.1; border-radius: 5px;
    }
    html.studio-build-mode #game-topbar .split-btn { border-width: 1.5px; }
    html.studio-build-mode #game-topbar .topbar-btn-icon,
    html.studio-build-mode #game-topbar .split-btn-icon { width: 16px; height: 16px; }
    html.studio-build-mode #game-topbar .topbar-btn-icon.test-btn-icon { width: 22px; height: 22px; }
    html.studio-build-mode #game-topbar #chat-toggle-btn svg,
    html.studio-build-mode #game-topbar #leave-btn svg { width: 16px; height: 16px; }
    html.studio-build-mode #game-topbar #insert-btn-wrap .topbar-btn span { font-size: 9px; }

    html.studio-build-mode #game-topbar .split-btn-group { gap: 4px; }
    html.studio-build-mode #game-topbar .topbar-group-btns { gap: 4px; }
    html.studio-build-mode #game-topbar .topbar-divider { height: 30px; }
    /* The little captions ("Tools", "Snap", "Insert"...) cost height -- the
       buttons already say what they are. */
    html.studio-build-mode #game-topbar .part-tools-label,
    html.studio-build-mode #game-topbar .snap-group-label,
    html.studio-build-mode #game-topbar .topbar-group-label { display: none; }
    html.studio-build-mode #game-topbar .part-tools-wrap,
    html.studio-build-mode #game-topbar .snap-group,
    html.studio-build-mode #game-topbar .topbar-group-wrap { justify-content: center; }
    html.studio-build-mode #game-topbar .snap-field { padding: 1px 4px; }
    html.studio-build-mode #game-topbar .snap-field-icon,
    html.studio-build-mode #game-topbar .snap-field-checkbox { width: 9px; height: 9px; }
    html.studio-build-mode #game-topbar .snap-field-input { width: 16px; font-size: 10px; }
    .team-avatar { width: 20px; height: 20px; font-size: 9px; }

    /* ---- Tab bar ---- */
    html.studio-build-mode #studio-tabbar {
        top: var(--m-topbar-h); height: var(--m-tab-h);
        padding-left: var(--m-side); padding-right: var(--m-side);
    }
    html.studio-build-mode .studio-tab { padding: 0 8px; font-size: 10px; gap: 4px; }
    html.studio-build-mode .studio-tab-label { max-width: 80px; }

    /* ---- Explorer (left) + Toolbox (right) ---- */
    html.studio-build-mode #parts-sidebar,
    html.studio-build-mode #toolbox-panel {
        top: var(--m-topbar-h); width: var(--m-side); padding: 6px;
    }
    html.studio-build-mode #parts-sidebar-title,
    html.studio-build-mode #toolbox-panel-title {
        font-size: 10.5px; padding: 0 6px 6px; margin: 0 -6px 6px;
    }
    html.studio-build-mode #parts-sidebar-list-wrap,
    html.studio-build-mode #parts-sidebar-properties-wrap { margin: 0 -6px; padding: 0 6px; }
    html.studio-build-mode #parts-sidebar-list { --explorer-pad: 6px; }
    html.studio-build-mode #parts-sidebar-split { margin: 6px -6px 0; }
    html.studio-build-mode #parts-sidebar-properties-title { padding: 6px; margin: 0 -6px 0; font-size: 10.5px; }
    html.studio-build-mode #parts-sidebar-properties-divider { margin: 0 -6px; }
    html.studio-build-mode .prop-panel { margin: 0 -6px; font-size: 9px; }
    html.studio-build-mode .prop-section-head { font-size: 9.5px; padding: 4px 5px; }
    html.studio-build-mode .prop-row { grid-template-columns: 42px minmax(0, 1fr); min-height: 20px; padding: 1px 3px 1px 5px; }
    html.studio-build-mode .prop-input { height: 18px; }
    html.studio-build-mode .prop-add-script-btn { width: calc(100% - 10px); margin: 5px; padding: 4px 6px; font-size: 10.5px; }
    html.studio-build-mode .explorer-row { font-size: 10.5px; }
    html.studio-build-mode #toolbox-gear-grid { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; }
    html.studio-build-mode .toolbox-tile { padding: 4px 2px 3px; gap: 2px; }
    html.studio-build-mode .toolbox-tile-icon { width: 26px; height: 26px; }
    html.studio-build-mode .toolbox-tile-name { font-size: 9px; }
    html.studio-build-mode #toolbox-hint { font-size: 9.5px; }

    /* ---- Script editor (fills the gap between the two panels) ---- */
    html.studio-build-mode #script-fullscreen-editor {
        left: var(--m-side); right: var(--m-side);
        top: calc(var(--m-topbar-h) + var(--m-tab-h)); padding: 6px;
    }
    html.studio-build-mode #script-fullscreen-editor #script-editor-highlight,
    html.studio-build-mode #script-fullscreen-editor #script-editor-textarea { font-size: 12px; padding: 8px; }

    /* ---- Bottom stats bar ---- */
    html.studio-build-mode #studio-bottom-bar:not(.full-width) { left: var(--m-side); }
    html.studio-build-mode #studio-bottom-bar { height: 20px; gap: 8px; padding: 0 8px; font-size: 10px; }

    /* ---- Chat panel, toasts, dialogs ---- */
    html.studio-build-mode #chat-panel { top: calc(var(--m-topbar-h) + var(--m-tab-h) + 6px) !important; }
    #publish-success-toast { top: calc(var(--m-topbar-h, 52px) + 8px); font-size: 12px; padding: 8px 14px; }
    #publish-modal, #team-modal { padding: 14px; max-height: 92vh; }
    #publish-modal-title, #team-modal-title { font-size: 15px; margin-bottom: 10px; }
    .publish-field-label { font-size: 11px; margin: 8px 0 4px; }
    #publish-name-input { font-size: 16px; padding: 7px 8px; } /* 16px stops iOS zooming on focus */
    .publish-textarea { font-size: 16px; padding: 7px 8px; min-height: 52px; }
    .publish-textarea-tall { min-height: 80px; }
    #publish-thumb-preview { width: 72px; height: 48px; }
    .publish-secondary-btn { font-size: 11px; padding: 5px 8px; }
    .publish-primary-btn { font-size: 12px; padding: 7px 14px; }
    #publish-modal-buttons { margin-top: 12px; }
    #team-invite-input { font-size: 16px; padding: 6px 8px; }
    .team-row { font-size: 12px; padding: 4px 6px; }
    #color-row { grid-template-columns: repeat(4, 24px); gap: 6px; padding: 8px 10px; }
    .color-swatch { width: 24px; height: 24px; }
}

/* Emote suggestions under the chat box (typing "/" in chat). */
#emote-menu{position:fixed;z-index:6000;display:none;flex-direction:column;gap:3px;padding:4px;box-sizing:border-box;border-radius:8px;background:rgba(52,63,74,.65);box-shadow:0 8px 24px rgba(0,0,0,.35);font-family:'Poppins',sans-serif;user-select:none;-webkit-user-select:none;transform-origin:50% 0}
#emote-menu.above{transform-origin:50% 100%}
#emote-menu.show{display:flex;animation:emote-menu-pop .18s cubic-bezier(.2,.9,.3,1.15) both}
@keyframes emote-menu-pop{
  0%{opacity:0;transform:translateY(-8px) scale(.94)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
#emote-menu.above.show{animation-name:emote-menu-pop-up}
@keyframes emote-menu-pop-up{
  0%{opacity:0;transform:translateY(8px) scale(.94)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@media (prefers-reduced-motion:reduce){#emote-menu.show{animation:none}}
#emote-menu .emote-row{display:flex;align-items:center;gap:12px;height:42px;padding:0 14px;border-radius:6px;border:2px solid transparent;cursor:pointer;color:#fff;transition:background .12s,border-color .12s}
#emote-menu .emote-row.sel{border-color:#fff;background:rgba(255,255,255,.08)}
#emote-menu .emote-row:hover{background:rgba(255,255,255,.12)}
#emote-menu .emote-name{flex:1;font-size:16px;font-weight:600;letter-spacing:.01em}
#emote-menu .emote-kind{font-size:13px;font-weight:500;color:rgba(255,255,255,.78)}


/* ---------- Game frame ----------
   Holds all in-game UI. Covers the whole window normally; while
   play-testing in Studio, studio.js (layoutGameFrame) sets top/left/right/
   bottom inline so it matches the 3D viewport exactly. The transform makes
   it the containing block for position:fixed children, and overflow:hidden
   clips anything that would poke out over Studio's panels. */
#game-frame {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 501;
    overflow: hidden;
    transform: translateZ(0);
}
/* pointer-events inherits, so the clickable pieces opt back in. */
#game-frame > #chat-panel,
#game-frame > #hud-topleft-controls { pointer-events: auto; }
/* Inside the box there is no Studio topbar to dodge while play-testing. */
html.studio-play-testing #game-frame > #leaderboard { top: 8px; }
/* Menu overlay and speech bubbles live in the frame too, so the pause menu
   darkens only the game view (position:fixed is relative to the frame). */
#game-frame > #game-menu-overlay { position: absolute; }


/* ---------- Right-click part menu (Group / Ungroup) ---------- */
#part-context-menu {
    position: fixed; display: none; z-index: 2500; min-width: 120px;
    padding: 4px; box-sizing: border-box;
    background: var(--studio-bg-raised); border: 1px solid var(--studio-border);
    border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    font-family: 'Poppins', sans-serif; user-select: none; -webkit-user-select: none;
}
#part-context-menu.show { display: block; animation: part-menu-pop 0.12s ease-out both; transform-origin: 0 0; }
#part-context-menu button {
    display: block; width: 100%; text-align: left; padding: 7px 12px;
    border: none; border-radius: 5px; background: transparent;
    color: var(--studio-text); font: 500 13px 'Poppins', sans-serif; cursor: pointer;
}
#part-context-menu button:hover { background: var(--studio-bg-hover); }
@keyframes part-menu-pop { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }

/* Sky Style dropdown (Explorer > Lighting > Sky) */
.sidebar-property-row-input select {
    background: rgba(255,255,255,0.08); color: inherit; border: 1px solid rgba(255,255,255,0.18);
    border-radius: 4px; padding: 2px 4px; font: inherit; width: 90px;
}
.sidebar-property-row-input select option { color: #111; }