/* ====================================================================================================================================
   The 3D view (world-tool.js, world-gui-layer.js, world-inspector.js, world-walk.js, world-export-panel.js) and a viewport frame's
   picture on the flat canvas (viewport-preview.js). Plain CSS, linked from roblox-ui-builder.eta. Everything of its own is under
   .wv / .wv-*; it reads the builder's tokens (--ub-*) so it follows the editor's accent, with the dark theme's values as fallbacks.
   ==================================================================================================================================== */

/* ---- the builder while a 3D view is open: its pane takes the canvas's place; the controls that only mean something on a flat screen go */
.ui-builder__world[hidden] { display: none !important; }
.ui-builder__world { position: relative; display: flex; flex: 1; flex-direction: column; min-width: 0; min-height: 0; background: var(--ub-bg0, #0b0b0d); }
.ui-builder__workspace.is-world > .ui-builder__pane--main,
.ui-builder__workspace.is-world:not(.is-planning) > .ui-builder__pane--compare { display: none !important; }
.ub[data-world="1"] #uiBuilderDisplayBar [aria-label="UI scaling"],
.ub[data-world="1"] #uiBuilderDisplayBar [aria-label="Workspace color"],
.ub[data-world="1"] #uiBuilderDisplayBar .ub-zoom,
.ub[data-world="1"] #uiBuilderExplorerModeBtn { display: none !important; }
/* Compare: the 3D pane is the one being edited, so it stands first, with the other device beside it. There is no zoom to link. */
.ui-builder__workspace.is-world > .ui-builder__world { order: -1; }
.ui-builder__workspace.is-world > .ub-sync { display: none; }
.ui-builder__world > .ub-panewrap[hidden] { display: none; }
.wv-compare { position: absolute; inset: 0; overflow: hidden; }
.wv-compare[hidden] { display: none; }
/* The arrange bar, while it sits in the 3D pane: out of the picture until something is selected, then it drops down from the top.
   The line about the selected GUI moves down to make room for it. */
.wv-well > .ub-float--top { transform: translateY(-64px); opacity: 0; visibility: hidden; transition: transform 0.16s ease, opacity 0.16s ease, visibility 0s linear 0.16s; }
.wv-well > .ub-float--top.is-open { transform: none; opacity: 1; visibility: visible; transition: transform 0.16s ease, opacity 0.16s ease; }
.wv-verdict { transition: top 0.16s ease; }
.wv-well.has-arrange .wv-verdict { top: 62px; }
@media (prefers-reduced-motion: reduce) { .wv-well > .ub-float--top, .wv-well > .ub-float--top.is-open, .wv-verdict { transition: none; } }
/* Animate's banner, while it sits in the 3D pane: at the foot of the picture, clear of the line about the selected GUI at its head */
.wv-well > .ub-float--animate { left: 50%; top: auto; bottom: 12px; transform: translateX(-50%); z-index: 4; }

/* ---- the bar: where you are, what a prompt is pressed with, and the way in to Walk */
.wv-bar { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 32px; padding: 8px 14px; border-bottom: 1px solid var(--ub-line, #25252b); }
.wv-bar__gap { flex: 1 1 auto; }
.wv-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; font-size: 13px; }
.wv-crumbs__link { padding: 2px 0; background: none; border: 0; color: var(--ub-tx2, #b8b8c2); font: inherit; cursor: pointer; }
.wv-crumbs__link:hover { color: var(--ub-tx, #f3f3f5); }
.wv-crumbs__here { font-weight: 600; color: var(--ub-tx, #f3f3f5); }
.wv-crumbs__sep { color: var(--ub-line3, #4a4a54); }
.wv-crumbs__size { margin-left: 6px; color: var(--ub-tx3, #8c8c98); font-size: 12px; }

/* ---- the stage: laid out at the device's own pixels, scaled to fit the well */
.wv-well { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: var(--ub-bg0, #0b0b0d); touch-action: none; user-select: none; }
.wv-stage { position: absolute; transform-origin: 0 0; overflow: hidden; background: #0f1115; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 12px 40px rgba(0, 0, 0, 0.5); }
.wv-behind, .wv-gl, .wv-layer, .wv-marks { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.wv-behind, .wv-gl { display: block; }
.wv-behind[hidden] { display: none; }
/* Each layer is a stacking context of its own: the GUIs inside one are ordered among themselves (nearer over further) and can never
   climb over the 3D canvas that sits between the two layers. */
.wv-layer { overflow: hidden; pointer-events: none; isolation: isolate; }
.wv-marks { overflow: visible; pointer-events: none; }
.wv-marks__label { fill: var(--ub-ac2, #ffb866); font-family: var(--ub-font-mono, monospace); paint-order: stroke; stroke: #0f1115; stroke-width: 3px; stroke-linejoin: round; }
/* a GUI in the world: the flat canvas's own elements, in a box the stage places */
.wv-gui { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; }
.wv-gui .rbx-ui-el { transition: none; }
.wv-gui[data-prompt] { transition: opacity 0.2s ease-out; }
.wv-handles { overflow: visible; }
.wv-handle { position: absolute; width: calc(11px / var(--wv-zoom, 1)); height: calc(11px / var(--wv-zoom, 1)); margin: 0; padding: 0; transform: translate(-50%, -50%); background: #fff; border: calc(2px / var(--wv-zoom, 1)) solid var(--ub-ac, #ff8c00); border-radius: 50%; cursor: grab; pointer-events: auto; }
.wv-handle:hover { background: var(--ub-ac, #ff8c00); }
.wv-well.is-boxing, .wv-well.is-boxing * { cursor: crosshair !important; } /* B is held: a drag draws a selection box */
/* the dots of a layer (or of a billboard): square, as on the flat canvas */
.wv-handle--layer { width: calc(9px / var(--wv-zoom, 1)); height: calc(9px / var(--wv-zoom, 1)); border-width: calc(1.5px / var(--wv-zoom, 1)); border-radius: calc(2px / var(--wv-zoom, 1)); cursor: nwse-resize; }
.wv-handle--layer[data-layer="ne"], .wv-handle--layer[data-layer="sw"], .wv-handle--layer[data-board="ne"], .wv-handle--layer[data-board="sw"] { cursor: nesw-resize; }
.wv-handle--layer[data-layer="n"], .wv-handle--layer[data-layer="s"] { cursor: ns-resize; }
.wv-handle--layer[data-layer="e"], .wv-handle--layer[data-layer="w"] { cursor: ew-resize; }

/* ---- the line about the selected GUI */
.wv-verdict { position: absolute; left: 14px; top: 12px; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 28px); box-sizing: border-box; padding: 7px 12px; background: rgba(17, 17, 20, 0.92); border: 1px solid var(--ub-line2, #33333a); border-radius: var(--ub-r-group, 10px); font-size: 13px; color: var(--ub-tx, #f3f3f5); }
.wv-verdict[hidden] { display: none; }
.wv-verdict .ub-dot { flex: none; }
.wv-approx { flex: none; padding: 1px 6px; border: 1px dashed var(--ub-line3, #4a4a54); border-radius: 6px; font-size: 11px; color: var(--ub-tx3, #8c8c98); cursor: help; }
.wv-note { position: absolute; left: 14px; bottom: 12px; margin: 0; padding: 7px 12px; background: rgba(17, 17, 20, 0.92); border: 1px solid var(--ub-line2, #33333a); border-radius: var(--ub-r-group, 10px); font-size: 12px; color: var(--ub-tx2, #b8b8c2); }
.wv-note[hidden] { display: none; }

/* ---- the two questions an empty view asks */
.wv-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; gap: 18px; width: min(520px, calc(100% - 32px)); box-sizing: border-box; padding: 26px; background: var(--ub-bg1, #111114); border: 1px solid var(--ub-line, #25252b); border-radius: 16px; box-shadow: var(--ub-shadow-pop, 0 16px 40px rgba(0, 0, 0, 0.55)); }
.wv-card[hidden] { display: none; }
.wv-card__title { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; text-align: center; color: var(--ub-tx, #f3f3f5); }
.wv-card__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wv-card__pick { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 10px; background: var(--ub-bg2, #18181c); border: 1px solid var(--ub-line, #25252b); border-radius: 12px; color: var(--ub-tx, #f3f3f5); font: inherit; font-size: 13px; cursor: pointer; }
.wv-card__pick svg { color: var(--ub-tx2, #b8b8c2); }
.wv-card__pick:hover, .wv-card__pick:focus-visible { border-color: var(--ub-ac, #ff8c00); background: var(--ub-ac-tint, rgba(255, 140, 0, 0.14)); }
.wv-art-accent { stroke: var(--ub-ac, #ff8c00); }
.wv-card__back { align-self: center; padding: 4px 0; background: none; border: 0; color: var(--ub-tx3, #8c8c98); font: inherit; font-size: 13px; cursor: pointer; }
.wv-card__back:hover { color: var(--ub-tx, #f3f3f5); }

/* ---- the Stand ruler */
.wv-ruler { --wv-ranges: 0; display: flex; flex: none; align-items: flex-start; gap: 14px; padding: 8px 16px 10px; background: var(--ub-bg1, #111114); border-top: 1px solid var(--ub-line, #25252b); }
.wv-ruler[hidden] { display: none; }
.wv-ruler__label { flex: none; padding-top: 24px; color: var(--ub-tx3, #8c8c98); font-size: 13px; }
.wv-ruler__track { position: relative; flex: 1 1 auto; min-width: 0; height: calc(48px + max(2, var(--wv-ranges)) * 13px); } /* room for two range rows always: the picture must not hop when something is selected */
.wv-ruler__stop { position: absolute; top: 0; min-height: 22px; padding: 0 8px; background: transparent; border: 1px solid transparent; border-radius: 6px; color: var(--ub-tx2, #b8b8c2); font: inherit; font-size: 12px; white-space: nowrap; cursor: pointer; }
.wv-ruler__stop:hover { color: var(--ub-tx, #f3f3f5); }
.wv-ruler__stop[aria-pressed="true"] { background: var(--ub-ac-tint, rgba(255, 140, 0, 0.14)); border-color: var(--ub-ac, #ff8c00); color: var(--ub-tx, #f3f3f5); }
.wv-ruler__range { position: absolute; left: 0; top: 26px; width: 100%; margin: 0; }
.wv-ruler__ranges { position: absolute; left: 0; right: 0; top: 46px; }
.wv-ruler__value { flex: none; min-width: 78px; padding-top: 24px; text-align: right; font-size: 12px; color: var(--ub-tx, #f3f3f5); }
.wv-range { position: absolute; left: 0; right: 0; height: 12px; }
.wv-range__bar { position: absolute; left: 0; top: 5px; height: 4px; border-radius: 2px; background: var(--ub-blue, #4ea1ff); }
.wv-range__label { position: absolute; top: -2px; font-size: 11px; white-space: nowrap; color: #8fc4ff; }
/* a range that reaches past the end of the ruler: its bar stops short and its label sits at the end */
.wv-range--past .wv-range__bar { width: calc(100% - 170px) !important; }
.wv-range--past .wv-range__label { left: auto !important; right: 0; }
.wv-range--shows .wv-range__bar { background: var(--ub-ac, #ff8c00); }
.wv-range--shows .wv-range__label, .wv-range--dot .wv-range__label { color: var(--ub-ac2, #ffb866); }
.wv-range--dot .wv-range__bar { background: none; border-top: 2px dotted var(--ub-ac, #ff8c00); height: 0; top: 6px; }

/* ---- editing one GUI of a 3D view flat: the bar over the canvas, and the small picture of it in the world */
.wv-flat { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wv-flat[hidden] { display: none; }
.wv-flat__from { font-size: 12px; color: var(--ub-tx3, #8c8c98); }
.wv-flat__from[hidden], .wv-flat .ub-num[hidden] { display: none; }
.ub[data-world="flat"] #uiBuilderDisplayBar [aria-label="UI scaling"],
.ub[data-world="flat"] #uiBuilderExplorerModeBtn { display: none !important; }
.wv-peek { position: absolute; right: 14px; bottom: 56px; z-index: 6; display: flex; flex-direction: column; width: 280px; max-width: calc(100% - 28px); overflow: hidden; background: var(--ub-bg1, #111114); border: 1px solid var(--ub-line2, #33333a); border-radius: 12px; box-shadow: var(--ub-shadow-float, 0 10px 30px rgba(0, 0, 0, 0.5)); }
.wv-peek[hidden] { display: none; }
.wv-peek__open { display: block; margin: 0; padding: 0; background: none; border: 0; cursor: pointer; }
.wv-peek__stage { position: relative; width: 280px; overflow: hidden; background: #0f1115; }
.wv-peek__frame { box-shadow: none; }
.wv-peek__line { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--ub-line, #25252b); font-size: 12px; color: var(--ub-tx, #f3f3f5); }
.wv-peek__line[hidden] { display: none; }
.wv-peek__line .ub-dot { flex: none; }

/* ---- Walk: the bar, Roblox's touch controls where they sit, and a screen opened over the world */
.wv-walkbar { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 4; max-width: calc(100% - 28px); }
.wv-walkbar__open { display: inline-flex; align-items: center; gap: 6px; }
.wv-walkbar__open[hidden] { display: none; }
.wv-touch { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.wv-touch[hidden] { display: none; }
.wv-touch__ring, .wv-touch__knob, .wv-touch__jump { position: absolute; box-sizing: border-box; border-radius: 50%; }
.wv-touch__ring { border: 2px solid rgba(255, 255, 255, 0.45); background: rgba(0, 0, 0, 0.12); }
.wv-touch__knob { background: rgba(255, 255, 255, 0.5); }
.wv-touch__jump { border: 2px solid rgba(255, 255, 255, 0.45); background: rgba(0, 0, 0, 0.18); }
.wv-touch__jump::after { content: ""; position: absolute; left: 32%; right: 32%; top: 30%; bottom: 34%; border: solid rgba(255, 255, 255, 0.7); border-width: 3px 3px 0 0; transform: rotate(-45deg) translate(-8%, 30%); }
.wv-screen { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.wv-screen__display { background: transparent; }
/* what a prompt does */
.wv-does__row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.wv-does__verb { flex: none; font-size: 12px; color: var(--ub-tx2, #b8b8c2); }
.wv-does__row .ub-select { flex: 1 1 auto; min-width: 0; }
.wv-does__row .ub-select.wv-does__verb { flex: 0 0 84px; }

/* ---- a viewport frame's picture on the flat canvas */
.rbx-ui-viewport { display: block; width: 100%; height: 100%; }

/* ---- the way to Studio: "What is each thing in the game?" */
.wv-game { position: absolute; inset: 0; z-index: 8; display: flex; flex-wrap: wrap; background: var(--ub-bg0, #0b0b0d); color: var(--ub-tx, #f3f3f5); font-size: 13px; }
.wv-game[hidden] { display: none; }
.wv-game__main { flex: 999 1 520px; min-width: 0; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; padding: 22px 26px 28px; overflow: auto; }
.wv-game__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 12px; }
.wv-game__title { flex: 1 1 auto; margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }
.wv-game__studio { display: inline-flex; align-items: center; gap: 8px; color: var(--ub-tx2, #b8b8c2); }
.wv-game__label { margin: 12px 0 4px; font-size: 13px; font-weight: 400; color: var(--ub-tx3, #8c8c98); }
.wv-game__label[hidden], .wv-game__rows[hidden] { display: none; }
.wv-game__rows { display: flex; flex-direction: column; gap: 6px; }
.wv-game__row, .wv-game__made { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 8px 10px 8px 14px; background: var(--ub-bg2, #18181c); border: 1px solid var(--ub-line, #25252b); border-radius: 12px; }
.wv-game__made { align-items: baseline; padding: 10px 14px; }
.wv-game__name { flex: 1 1 160px; display: flex; flex-direction: column; min-width: 0; }
.wv-game__sub { font-size: 12px; color: var(--ub-tx3, #8c8c98); }
.wv-game__path { flex: 2 1 240px; min-width: 0; }
.wv-game__path[hidden] { display: none; }
.wv-game__state { flex: 1 1 200px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--ub-tx2, #b8b8c2); }
.wv-game__state[data-state="out"], .wv-game__state[data-state="todo"] { color: var(--ub-tx3, #8c8c98); }
.wv-game__where { flex: 1 1 280px; font-size: 12px; color: var(--ub-tx2, #b8b8c2); }
.wv-game__made strong { flex: 0 1 140px; }
.wv-game__why { flex: 2 1 260px; color: var(--ub-tx3, #8c8c98); }
.wv-game__side { flex: 1 1 260px; max-width: 340px; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; padding: 26px 22px; background: var(--ub-bg1, #111114); border-left: 1px solid var(--ub-line, #25252b); }
.wv-game__count { margin: 0; font-size: 18px; font-weight: 600; }
.wv-game__actions { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.wv-game__actions [hidden] { display: none; }
.wv-game__note { font-size: 12px; color: var(--ub-tx3, #8c8c98); text-align: center; }

/* ---- the Layers panel's footer on a 3D view */
.wv-add { display: flex; flex: none; flex-direction: column; gap: 8px; margin-top: auto; padding: 12px; border-top: 1px solid var(--ub-line, #25252b); }
.wv-add[hidden] { display: none; }
/* the same buttons at the head of the Insert tab */
.wv-add--top { margin-top: 0; border-top: 0; border-bottom: 1px solid var(--ub-line, #25252b); }
.wv-add__label { font-size: 12px; color: var(--ub-tx3, #8c8c98); }
.wv-add__row { display: flex; flex-wrap: wrap; gap: 6px; }
.wv-add__btn { min-height: 28px; padding: 0 10px; background: transparent; border: 1px dashed var(--ub-line3, #4a4a54); border-radius: var(--ub-r-btn, 8px); color: var(--ub-tx2, #b8b8c2); font: inherit; font-size: 12px; cursor: pointer; }
.wv-add__btn:hover, .wv-add__btn:focus-visible { border-color: var(--ub-ac, #ff8c00); color: var(--ub-tx, #f3f3f5); }
/* a 3D view's card in the Views panel */
.rbx-view--world .rbx-view__thumb-host { display: flex; align-items: center; justify-content: center; background: #0f1115; color: var(--ub-tx3, #8c8c98); }
.rbx-view__kind { margin-left: auto; padding: 0 6px; border: 1px solid var(--ub-line2, #33333a); border-radius: 6px; font-size: 10px; color: var(--ub-tx2, #b8b8c2); }
.ub-views__foot { display: flex; flex-wrap: wrap; gap: 6px; }
.ub-views__foot .ub-newview { flex: 1 1 auto; }

/* ---- the Inspector's groups on a 3D view: questions, with Roblox's property names under them */
.wv-ins__question { text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--ub-tx2, #b8b8c2); }
.wv-ins__edit { margin: 10px 12px 4px; width: calc(100% - 24px); }
.wv-ins__triple { display: flex; flex-wrap: nowrap; gap: 4px; min-width: 0; }
.wv-ins__triple .ub-num { flex: 1 1 0; min-width: 0; width: auto; }
.wv-ins__stack { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 3px 0; }
.wv-ins__stack[hidden] { display: none; }
.wv-ins__stacklabel { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--ub-tx2, #b8b8c2); }
.wv-ins__stacklabel .rbx-props__keys[hidden], .wv-ins__section .rbx-props__keys[hidden] { display: none !important; }
.wv-ins__readout { font-size: 12px; color: var(--ub-tx, #f3f3f5); text-align: right; }
.wv-ins__note { margin: 2px 0 0; }
.wv-ins__note[hidden] { display: none; }
.wv-pills { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 6px; }
.wv-pill { min-height: 28px; padding: 0 10px; background: transparent; border: 1px solid var(--ub-line2, #33333a); border-radius: 14px; color: var(--ub-tx2, #b8b8c2); font: inherit; font-size: 12px; cursor: pointer; }
.wv-pill:hover { color: var(--ub-tx, #f3f3f5); }
.wv-pill[aria-pressed="true"] { background: var(--ub-ac-tint, rgba(255, 140, 0, 0.14)); border-color: var(--ub-ac, #ff8c00); color: var(--ub-tx, #f3f3f5); }
.wv-ins__section .wv-approx { align-self: flex-start; margin: 0 0 6px; }
.wv-ins__section .wv-approx[hidden] { display: none; }