:root { color-scheme: light; --paper: #fdf6e3; --ink: #002b36; --muted: #839496; --line: #d9d7c8; --water: #2aa198; --sand: #b58900; --air: #657b83; --success: #859900; --conference-height: 72px; --play-height: calc(100dvh - var(--conference-height)); --contamination-border: #dc322f; }
*, *::before, *::after { box-sizing: border-box; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; touch-action: manipulation; background: var(--paper); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input:not([type="range"]):not([type="checkbox"]):not([type="file"]), textarea { -webkit-user-select: text; user-select: text; }
@font-face { font-family: "Source Code Pro"; src: url('/fonts/SourceCodePro-Regular.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Source Code Pro"; src: url('/fonts/SourceCodePro-Bold.woff2') format('woff2'); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url('/fonts/SpaceMono-Bold.ttf') format('truetype'); font-style: normal; font-weight: 700; font-display: swap; }
body { font-family: "Source Code Pro", ui-monospace, "SFMono-Regular", Consolas, monospace; color: var(--ink); }
#game { position: relative; width: 100%; height: var(--play-height); isolation: isolate; }
#world-divider { position: absolute; z-index: 0; width: 2px; transform: translateX(-1px); background: #002b3633; opacity: 0; transition: opacity 100ms cubic-bezier(.16, 1, .3, 1); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { #world-divider { transition: none; } }
canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; touch-action: none; }
canvas:focus { outline: none; }
button { appearance: none; border: 0; background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 1px solid var(--ink); outline-offset: 6px; }
button:is(:hover, .controller-hover) { background: #002b3608; }
.masthead { position: absolute; left: 4%; right: 4%; top: 4%; height: 64px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.masthead button, .actions { pointer-events: auto; }
#level-header { position: relative; flex-shrink: 0; width: 88px; height: 64px; padding: 0; }
.level-bowl { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 6; stroke-linecap: round; }
#level-number { position: absolute; inset: 0 0 0 20px; display: grid; place-items: center; font-size: 40px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.flow-readout { display: grid; gap: 3px; margin-left: 20px; margin-right: auto; font-size: clamp(20px, 2vw, 32px); font-variant-numeric: tabular-nums; line-height: 1.2; }
.flow-readout small { font-size: .6em; color: var(--air); }
.actions { display: flex; align-items: center; gap: clamp(10px, 1.1vw, 22px); }
.actions > button { display: grid; place-items: center; flex: none; width: 64px; height: 64px; aspect-ratio: 1; border-radius: 50%; font-size: 50px; line-height: 1; padding: 0; }
#status { color: var(--ink); font-size: 40px; line-height: 1; }
#status:empty { display: none; }
#time-controls { display: flex; align-items: center; height: 48px; padding: 4px; border: 1px solid var(--line); border-radius: 24px; }
#time-controls button { height: 38px; padding: 0 16px; font-size: 16px; line-height: 1; border-radius: 20px; }
#time-controls button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
#inlet-controls { position: absolute; inset: 0; pointer-events: none; }
.inlet-control { --inlet-color: var(--water); position: absolute; transform: translate(-50%, -100%); width: clamp(56px, 8vh, 88px); aspect-ratio: 1; line-height: 1; pointer-events: auto; touch-action: none; user-select: none; cursor: grab; }
/* Expand only an acquired mouse hover, retaining it across the exit band. */
.inlet-control:hover::before { content: ""; position: absolute; inset: -12px; }
.inlet-sand { --inlet-color: var(--sand); }
.inlet-control[data-turning] { cursor: grabbing; }
.inlet-control svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.inlet-track { fill: none; stroke: var(--inlet-color); stroke-width: 1.5; stroke-dasharray: 3 4; opacity: 0; transition: opacity 180ms cubic-bezier(.333333, 0, .666667, 1); }
.inlet-grip, .inlet-hub { stroke: none; }
.inlet-grip { fill: var(--ink); opacity: .65; transition: fill 180ms cubic-bezier(.333333, 0, .666667, 1), opacity 180ms cubic-bezier(.333333, 0, .666667, 1); }
.inlet-hub { fill: var(--paper); }
.inlet-control > span { position: absolute; inset: 30% 31%; display: grid; place-items: center; font-size: clamp(24px, 3vh, 32px); pointer-events: none; }
.inlet-control input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.inlet-control:is(:hover, .controller-hover, [data-turning], :has(input:focus-visible)) .inlet-track { opacity: .55; }
.inlet-control:is(:hover, .controller-hover, [data-turning], :has(input:focus-visible)) .inlet-grip { fill: var(--inlet-color); opacity: 1; }
[hidden] { display: none !important; }
.message { position: absolute; inset: 45% 45%; font-size: 96px; text-align: center; }
#piece-labels { position: absolute; inset: 0; pointer-events: none; }
.piece-label { position: absolute; transform: translate(-50%, -100%); display: inline-flex; align-items: center; gap: .25em; line-height: 1.2; color: var(--muted); font-size: clamp(30px, 2.25vw, 45px); white-space: nowrap; }
.signature-neutral { color: var(--ink); }
.material-water { color: var(--water); font-weight: 700; }
.material-sand { color: var(--sand); font-weight: 700; position: relative; display: inline-block; width: .9em; height: 1em; overflow: hidden; text-indent: -9999px; vertical-align: middle; }
.material-sand::before { content: ""; position: absolute; inset: 0; background: currentColor; mask: url('/icons/sand.svg') center / contain no-repeat; }
.inlet-control > .material-sand { width: auto; height: auto; }
.material-air { color: var(--air); font-weight: 700; }
.pipe-label { display: grid; padding: 0; transform: translate(-50%, -50%) rotate(var(--pipe-angle)); --material-color: var(--air); --signal-color: color-mix(in srgb, var(--material-color) 75%, var(--paper)); --completion-fill: color-mix(in srgb, var(--material-color) 12%, var(--paper)); --ring-width: clamp(3px, calc(var(--pipe-width) * .09), 7px); }
.pipe-label.water { --material-color: var(--water); }
.pipe-label.sand { --material-color: var(--sand); }
.pipe-label.contaminated { --signal-color: var(--contamination-border); }
.pipe-label .symbol { position: relative; display: grid; place-items: center; width: var(--pipe-width); height: var(--pipe-width); border-radius: 50%; background: var(--paper); font-size: min(48px, calc(var(--pipe-width) * .6)); line-height: 1; transform: rotate(calc(0rad - var(--pipe-angle))); isolation: isolate; }
.pipe-label .symbol::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 50%; background: conic-gradient(var(--signal-color) calc(var(--progress) * 1turn), transparent 0); mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring-width)), #000 calc(100% - var(--ring-width) + .5px)); }
.pipe-label .symbol::after { content: ""; position: absolute; inset: var(--ring-width); border-radius: 50%; background: var(--completion-fill); opacity: 0; transform: scale(0); }
.pipe-label .glyph { position: relative; z-index: 2; }
.pipe-check { position: absolute; bottom: calc(100% + 22px); left: 0; right: 0; font-size: 30px; text-align: center; color: var(--success); opacity: 0; }
.pipe-label.ready .symbol { animation: pipe-pop 650ms cubic-bezier(.2, .7, .2, 1) both; }
.pipe-label.ready .symbol::after { animation: pipe-circle-fill 480ms 120ms ease-out both; }
.pipe-label.ready .pipe-check { animation: pipe-check-enter 400ms 220ms ease-out both; }
@keyframes pipe-pop { 0% { transform: rotate(calc(0rad - var(--pipe-angle))) scale(1); } 45% { transform: rotate(calc(0rad - var(--pipe-angle))) scale(1.22); } 100% { transform: rotate(calc(0rad - var(--pipe-angle))) scale(1.08); } }
@keyframes pipe-circle-fill { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes pipe-check-enter { from { opacity: 0; transform: translateY(8px) scale(.7); } to { opacity: 1; transform: translateY(0) scale(1); } }
.rotation-hints { position: absolute; transform: translate(-50%, -50%); overflow: visible; color: var(--ring-rest-color, color-mix(in srgb, var(--ink) 65%, #268bd2)); opacity: .42; pointer-events: none; transition: color 180ms cubic-bezier(.333333, 0, .666667, 1), opacity 180ms cubic-bezier(.333333, 0, .666667, 1); }
.rotate-hint { fill: none; stroke: currentColor; stroke-width: 1.75px; stroke-linecap: round; stroke-linejoin: round; transform-box: view-box; transform-origin: center; --orbit: 10deg; transition: stroke-width 180ms cubic-bezier(.333333, 0, .666667, 1); }
.rotation-hints.hovered { color: var(--ring-color, #268bd2); opacity: .9; }
.rotation-hints.hovered .rotate-hint { stroke-width: 2.5px; animation: rotation-hint-orbit 1800ms ease-in-out infinite; }
.rotate-hint.counterclockwise { --orbit: -10deg; }
@keyframes rotation-hint-orbit { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(var(--orbit)); } }
#levels { width: 100vw; height: var(--play-height); max-width: none; max-height: none; margin: 0; border: 0; padding: 0; background: var(--paper); color: var(--ink); overflow: auto; }
#levels::backdrop { background: var(--paper); }
#level-intro { width: 100vw; height: var(--play-height); max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--paper); color: var(--ink); outline: none; }
#level-intro[open] { display: grid; place-items: center; cursor: pointer; }
#level-intro[open].revealing { animation: level-reveal 350ms cubic-bezier(.4, 0, .2, 1) both; }
#level-intro::backdrop { background: transparent; }
.intro-content { display: grid; justify-items: center; gap: clamp(40px, 7vh, 80px); width: 100%; padding: 48px 24px; }
.intro-items { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(20px, 3vw, 48px); animation: level-name-enter 400ms 150ms cubic-bezier(.22, 1, .36, 1) both; }
.intro-items:empty { display: none; }
.intro-item { margin: 0; width: clamp(180px, 17vw, 300px); }
canvas.intro-preview { position: static; display: block; width: 100%; height: auto; aspect-ratio: 340 / 440; border: 3px solid var(--line); background: var(--paper); z-index: auto; pointer-events: none; }
.intro-item figcaption { display: flex; align-items: center; justify-content: center; gap: 12px; padding-bottom: 20px; font-size: clamp(16px, 1.1vw, 22px); }
.intro-signature { display: inline-flex; align-items: center; gap: .25em; font-size: 35px; }
.intro-signature:empty { display: none; }
.intro-heading { text-align: center; animation: level-name-enter 400ms 50ms cubic-bezier(.22, 1, .36, 1) both; }
#intro-level { margin: 0 0 12px; font-size: clamp(18px, 1.5vw, 28px); letter-spacing: .1em; }
#level-name { margin: 0; padding: 0 24px; font-size: clamp(36px, 6vw, 96px); font-weight: 400; letter-spacing: .08em; text-align: center; }
@keyframes level-name-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes level-reveal { from { opacity: 1; } to { opacity: 0; } }
#success { color: var(--ink); position: fixed; inset: 0; width: 100vw; height: var(--play-height); max-width: none; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; overflow: hidden; outline: none; }
#success[open] { display: grid; place-items: center; }
#success::backdrop { background: transparent; }
canvas#confetti { z-index: 0; pointer-events: none; }
#success-paper { position: absolute; inset: 0; background: var(--paper); opacity: 0; }
#success-level { position: relative; padding: 24px; text-align: center; font-size: clamp(36px, 6vw, 96px); font-weight: 400; letter-spacing: .08em; line-height: 1.3; opacity: 0; }
@media (prefers-reduced-motion: reduce) { canvas#confetti { visibility: hidden; } .intro-heading, .intro-items, .rotation-hints, .rotate-hint, .rotation-hints.hovered .rotate-hint { animation: none; } #level-intro[open].revealing { animation-duration: 1ms; } .pipe-label.ready .symbol { animation: none; transform: rotate(calc(0rad - var(--pipe-angle))) scale(1.08); } .pipe-label.ready .symbol::after, .pipe-label.ready .pipe-check { animation: none; opacity: 1; transform: none; } }
.close-levels { position: absolute; top: 4%; right: 4%; display: grid; place-items: center; width: 64px; height: 64px; aspect-ratio: 1; padding: 0; border-radius: 50%; font-size: 64px; line-height: 1; color: var(--ink); }
.level-constellation { --bubble-size: clamp(70px, 8vw, 145px); --bubble-gap: clamp(20px, 5vw, 85px); min-height: 100%; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: var(--bubble-gap); max-width: calc(4 * var(--bubble-size) + 3 * var(--bubble-gap)); margin: auto; }
.level-constellation.many-levels { --bubble-size: clamp(54px, 7vh, 84px); --bubble-gap: clamp(14px, 2.4vh, 28px); max-width: calc(7 * var(--bubble-size) + 6 * var(--bubble-gap)); }
#level-bubbles { padding: 88px 20px 36px; max-width: calc(4 * var(--bubble-size) + 3 * var(--bubble-gap) + 40px); }
#level-bubbles.many-levels { padding: 110px 20px 48px; max-width: calc(7 * var(--bubble-size) + 6 * var(--bubble-gap) + 40px); }
.level-bubble { position: relative; flex: 0 0 var(--bubble-size); width: var(--bubble-size); height: var(--bubble-size); padding: 0; border: 1px solid var(--line); border-radius: 50%; aspect-ratio: 1; font-size: clamp(18px, calc(var(--bubble-size) * .34), 30px); font-variant-numeric: tabular-nums; letter-spacing: .08em; transition: border-color 120ms, background 120ms; }
.many-levels .level-bubble { padding-bottom: clamp(10px, calc(var(--bubble-size) * .28), 16px); font-size: clamp(14px, calc(var(--bubble-size) * .34), 24px); }
.level-bubble:is(:hover, .controller-hover, .current) { border-color: var(--ink); color: var(--ink); background: #eee8d533; }
.level-bubble:focus-visible { border-color: var(--ink); outline-offset: 2px; }
.level-bubble.completed::after { content: "✓"; position: absolute; left: 0; right: 0; bottom: 12%; font-size: clamp(12px, calc(var(--bubble-size) * .28), 28px); color: var(--ink); }
.level-bubble:disabled { color: #657b83; border-color: var(--line); background: transparent; opacity: .8; cursor: not-allowed; }
.level-bubble:disabled::after { content: ""; position: absolute; left: 50%; right: auto; top: calc(50% + var(--bubble-size) * .16); bottom: auto; transform: translateX(-50%); width: clamp(12px, calc(var(--bubble-size) * .24), 16px); height: clamp(12px, calc(var(--bubble-size) * .24), 16px); background: currentColor; mask: url('/icons/lock.svg') center / contain no-repeat; }
.many-levels .level-bubble:disabled::after { top: calc(50% + var(--bubble-size) * .1); }
@media (max-width: 850px) { .masthead { top: 2%; } .actions { gap: 4px; } #time-controls button { padding: 0 9px; font-size: 13px; } .actions > button { width: 44px; height: 44px; } }
@media (max-width: 600px) { .masthead { height: 48px; } #level-header { width: 66px; height: 48px; } #level-number { inset: 0 0 0 15px; font-size: 30px; } .actions > button { width: 32px; height: 32px; font-size: 32px; } #time-controls button { padding: 0 6px; font-size: 11px; } }

/* The top-layer overlay follows native dialogs and remains inside fullscreen. */
#controller-overlay { position: fixed; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; pointer-events: none; }
#controller-overlay::backdrop { background: transparent; pointer-events: none; }
.controller-cursor { position: absolute; z-index: 1; left: -16px; top: -6px; width: 64px; height: 64px; transform-origin: 16px 6px; pointer-events: none; filter: drop-shadow(0 2px 2px var(--cursor-shadow)); }
.controller-selection { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.rotation-handle circle { fill: none; stroke: var(--selection-color); stroke-width: 1.2; stroke-dasharray: 4 5; opacity: .42; transition: stroke 180ms, stroke-width 180ms, opacity 180ms; }
.rotation-target.hovered circle { stroke: var(--selection-accent); stroke-width: 4.4; opacity: .9; }
.pair-controller { position: absolute; right: 24px; bottom: calc(var(--conference-height) + 16px); width: 64px; height: 56px; padding: 10px; background: var(--paper); border-radius: 12px; box-shadow: 0 3px 14px #002b3626; pointer-events: auto; }
.pair-controller svg { width: 100%; height: 100%; fill: none; stroke: var(--ink); stroke-width: 2; }
.pair-controller:disabled { opacity: .45; }


/* One compact advertisement stays above game screens and native modal dialogs. */
#conference-bar { position: fixed; inset: auto 0 0; z-index: 10; display: flex; justify-content: center; align-items: center; gap: clamp(10px, 1.5vw, 24px); width: 100%; height: var(--conference-height); max-width: none; max-height: none; margin: 0; padding: 0 clamp(24px, 3vw, 56px); border: 0; border-top: 2px dashed #53616b; background: linear-gradient(110deg, #0d1821, #122230 55%, #0d1821); color: #fffbe3; font: 700 clamp(8px, 1.35vw, 20px)/1.4 "Space Mono", monospace; white-space: nowrap; cursor: default; color-scheme: dark; }
#conference-bar { --conference-content-height: clamp(16px, 3.5vw, 44px); }
#conference-bar .conference-title { display: block; flex: 0 1 1144px; width: 1144px; min-width: 0; height: var(--conference-content-height); }
#conference-bar .conference-title text { fill: currentColor; word-spacing: -24px; }
#conference-bar .xcc-blue { color: #60a2d8; }
#conference-bar .xcc-aqua { color: #6ac5d7; }
#conference-bar .xcc-purple { color: #a984b6; }
#conference-bar .conference-date { flex: 0 1 324px; width: 324px; min-width: 0; height: var(--conference-content-height); color: #fffbe3; }
#conference-bar .conference-date svg { display: block; width: 100%; height: 100%; }
#conference-bar .conference-date text { fill: currentColor; word-spacing: -24px; }
#conference-bar a { display: inline-flex; flex: none; align-items: center; gap: 8px; height: var(--conference-content-height); padding: 0 clamp(8px, 1.2vw, 18px); border: 2px solid #00fefc; border-radius: 0; background: transparent; color: #00fefc; text-decoration: none; text-transform: uppercase; letter-spacing: .08em; font-size: clamp(9px, 1vw, 12px); }
/* Stretch the native link across the banner, including its text and padding. */
#conference-bar a { cursor: pointer; }
#conference-bar a::before { content: ""; position: absolute; inset: 0; }
#conference-bar a:hover { background: #00fefc; color: #0d1821; }
#conference-bar a:focus-visible { outline: 2px solid #a984b6; outline-offset: 4px; }
#conference-bar::backdrop { display: none; }
@media (max-width: 600px) {
  #conference-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; gap: 6px 10px; }
  #conference-bar .conference-title { width: 100%; }
  #conference-bar .conference-date { grid-column: 1; grid-row: 2; width: min(100%, calc(var(--conference-content-height) * 7.36)); }
  #conference-bar a { grid-column: 2; grid-row: 1 / 3; height: 36px; }
}

/* Every cursor reveals nearby rotation handles; opacity/scale are presentation only. */
.rotation-target { position: absolute; opacity: 0; transform: translate(-50%, -50%) scale(.88); pointer-events: none; transition: opacity 180ms cubic-bezier(.333333, 0, .666667, 1), transform 180ms cubic-bezier(.333333, 0, .666667, 1); --selection-color: color-mix(in srgb, var(--ink) 65%, #268bd2); --selection-accent: #268bd2; }
.controller-selection .rotation-target { --selection-color: inherit; --selection-accent: inherit; }
.rotation-target.nearby { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.rotation-handle { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rotation-target .rotation-hints { --ring-rest-color: var(--selection-color); --ring-color: var(--selection-accent); }
@media (prefers-reduced-motion: reduce) { .rotation-target { transition: none; } }

/* Opening screen foreground floats above the title water simulation. */
#welcome { width: 100vw; height: var(--play-height); max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--paper); color: var(--ink); overflow: hidden; outline: none; }
#welcome::backdrop { background: var(--paper); }
#welcome-water { z-index: 0; pointer-events: none; }
#welcome-title { position: absolute; z-index: 1; left: 0; right: 0; top: 50%; transform: translateY(-50%); margin: 0; text-align: center; font-size: clamp(72px, 14vw, 280px); letter-spacing: -.07em; line-height: 1.2; font-weight: 400; }
.missing-c { visibility: hidden; }
.welcome-settings { position: absolute; z-index: 3; top: 4%; right: 4%; }
#highscores { position: absolute; z-index: 2; bottom: 22%; left: 50%; transform: translateX(-50%); width: min(560px, 86vw); cursor: default; text-align: center; }
#highscores h2 { margin: 0 0 8px; font-size: clamp(16px, 1.5vw, 24px); font-weight: 400; }
#welcome:has(#highscores:not([hidden])) #welcome-title { top: 42%; }
#welcome:has(#highscores:not([hidden])) .welcome-start { top: auto; bottom: 4%; }
@media (min-height: 551px) and (max-height: 800px) { #highscores { bottom: 24%; } #welcome:has(#highscores:not([hidden])) #welcome-title { font-size: min(12vw, 20vh); } }
.podium-frame { position: relative; padding: 10px 12px 0; }
.score-podium { display: flex; align-items: flex-end; justify-content: center; gap: 5px; list-style: none; margin: 0; padding: 0; }
.score-place { --metal: #93a1a1; --metal-deep: #657b83; position: relative; font-variant-numeric: tabular-nums; }
.score-place.tier-1 { --metal: #d6ad39; --metal-deep: #b58900; }
.score-place.tier-3 { --metal: #d88b4a; --metal-deep: #a45a2a; }
.score-podium .score-place { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 33.333%; }
.score-podium .tier-1 { order: 2; }
.score-podium .tier-2 { order: 1; }
.score-podium .tier-3 { order: 3; }
.score-medal { font-size: clamp(36px, 5vh, 60px); line-height: 1.15; }
.score-value { display: block; font-size: clamp(22px, 2.4vw, 36px); line-height: 1.25; font-weight: 700; }
.score-ties { font-size: 14px; color: var(--air); line-height: 1.3; }
.podium-step { display: grid; place-items: center; width: 100%; height: clamp(60px, 9vh, 96px); margin-top: 8px; background: linear-gradient(var(--metal), var(--metal-deep)); border-radius: 5px 5px 0 0; box-shadow: 0 3px 10px #002b361a; color: var(--paper); font-size: clamp(12px, 1vw, 16px); }
.tier-2 .podium-step { height: clamp(44px, 6vh, 66px); }
.tier-3 .podium-step { height: clamp(30px, 4vh, 44px); }
.latest-run .podium-step { box-shadow: inset 0 0 0 3px var(--ink), 0 3px 10px #002b361a; }
.podium-button { position: absolute; inset: 0; width: 100%; border-radius: 5px; }
.podium-button:is(:hover, .controller-hover) { background: #002b3608; }
#run-summary, #leaderboard { position: fixed; inset: 0; width: 100vw; height: var(--play-height); max-width: none; max-height: none; margin: 0; padding: 36px 24px; border: 0; background: var(--paper); color: var(--ink); overflow-y: auto; }
#run-summary::backdrop, #leaderboard::backdrop { background: var(--paper); }
.run-summary-content { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; }
#run-summary-title { margin: 0; font-size: clamp(30px, 4vw, 64px); font-weight: 400; text-align: center; }
#run-highscores { width: min(560px, 90vw); }
.run-standing { display: flex; justify-content: center; gap: 64px; padding: 24px 40px; background: #eee8d5; border-radius: 5px; text-align: center; }
.run-standing span { display: block; font-size: 16px; color: var(--air); margin-bottom: 8px; }
.run-standing strong { font-size: clamp(28px, 3vw, 42px); }
.run-actions { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.run-actions .welcome-start { position: static; transform: none; font-size: 24px; }
.run-actions .welcome-start:is(:hover, .controller-hover, :focus-visible, :active) { transform: scale(1.06); }
#run-home, #leaderboard-back { min-height: 44px; font-size: 20px; padding: 8px 20px; }
#score-save-error { margin: 0; color: var(--contamination-border); }
.leaderboard-content { max-width: 560px; margin: auto; text-align: center; }
#leaderboard-title { margin: 12px 0 28px; font-size: clamp(28px, 3vw, 44px); font-weight: 400; }
#leaderboard-title:focus { outline: none; }
.score-list { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0 20px; }
.score-list .score-place { display: grid; grid-template-columns: 60px 1fr; align-items: center; padding: 10px 24px; border-radius: 5px; background: #eee8d5; text-align: left; }
.score-list .score-value { font-size: 28px; line-height: 1.1; }
.score-list .score-medal { grid-row: 1 / span 3; text-align: center; font-size: 36px; }
.score-list .score-detail { grid-column: 2; color: var(--air); font-size: 14px; }
.score-list .score-ties { grid-column: 2; }
.score-list .latest-run { box-shadow: inset 0 0 0 2px var(--ink); }
.score-latest { position: absolute; top: -8px; right: 16px; padding: 0 8px; background: var(--paper); color: var(--ink); font-size: 12px; }
#leaderboard-back { margin: 24px 0; }
@media (max-width: 700px) { .flow-readout { margin-left: 8px; font-size: 18px; } .score-value { font-size: clamp(16px, 4vw, 28px); } .run-standing { gap: 32px; padding: 20px; } }
.welcome-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
#welcome-mute, #settings-toggle { display: grid; place-items: center; flex: none; width: 48px; height: 48px; aspect-ratio: 1; padding: 0; opacity: .6; border-radius: 50%; }
#welcome-mute:is(:hover, :focus-visible, .controller-hover, [aria-pressed="true"]), #settings-toggle:is(:hover, :focus-visible, .controller-hover, [aria-expanded="true"]) { opacity: 1; }
#welcome-mute svg, #settings-toggle svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#settings-toggle svg { transform: translate(0, 2px); }
#controller-settings { margin-top: 12px; width: min(320px, 85vw); max-height: calc(var(--play-height) - 96px); padding: 20px 24px; background: var(--paper); box-shadow: 0 6px 30px #002b3626; display: grid; gap: 10px; overflow-y: auto; cursor: auto; }
#controller-settings label { font-size: 16px; text-box-trim: trim-both; text-box-edge: cap alphabetic; }
#controller-settings select { width: 100%; min-height: 44px; padding: 8px; background: var(--paper); color: var(--ink); font: inherit; border: 1px solid var(--line); border-radius: 4px; }
#controller-settings input[type="range"] { --slider-track-size: .5rem; --slider-thumb-size: 1.25rem; --slider-track-radius: 999px; --slider-thumb-radius: 50%; --slider-track-color: var(--line); --slider-fill-color: var(--ink); --slider-thumb-color: var(--slider-fill-color); --slider-direction: to right; --attr-min: attr(min type(<number>), 0); --attr-max: attr(max type(<number>), 100); --control-value: attr(value type(<number>), 100); --slider-progress: calc(progress(var(--control-value), var(--attr-min), var(--attr-max)) * 100%); appearance: none; inline-size: 100%; block-size: 2rem; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer; }
#controller-settings input[type="range"]:dir(rtl) { --slider-direction: to left; }
@supports not (opacity: progress(1, 0, 100)) { #controller-settings input[type="range"] { --slider-progress: calc((var(--control-value) - var(--attr-min)) / (var(--attr-max) - var(--attr-min)) * 100%); } }
#controller-settings input[type="range"]::-webkit-slider-runnable-track { block-size: var(--slider-track-size); border: 0; border-radius: var(--slider-track-radius); background: linear-gradient(var(--slider-direction), var(--slider-fill-color) var(--slider-progress), var(--slider-track-color) var(--slider-progress)); }
#controller-settings input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; inline-size: var(--slider-thumb-size); block-size: var(--slider-thumb-size); margin-block-start: calc((var(--slider-track-size) - var(--slider-thumb-size)) / 2); border: 0; border-radius: var(--slider-thumb-radius); background: var(--slider-thumb-color); }
#controller-settings input[type="range"]::-moz-range-track { block-size: var(--slider-track-size); border: 0; border-radius: var(--slider-track-radius); background: var(--slider-track-color); }
#controller-settings input[type="range"]::-moz-range-progress { block-size: var(--slider-track-size); border-radius: var(--slider-track-radius); background: var(--slider-fill-color); }
#controller-settings input[type="range"]::-moz-range-thumb { inline-size: var(--slider-thumb-size); block-size: var(--slider-thumb-size); border: 0; border-radius: var(--slider-thumb-radius); background: var(--slider-thumb-color); }
#controller-settings input[type="range"]:focus-visible { outline: 2px solid var(--slider-fill-color); outline-offset: 4px; }
.welcome-start { position: absolute; z-index: 2; top: 71%; left: 50%; transform: translateX(-50%); min-width: 150px; padding: 14px 32px; font-size: clamp(20px, 2vw, 28px); background: var(--paper); border: 2px solid transparent; border-radius: 4px; box-shadow: 0 2px 14px #002b361a; transition: transform 180ms ease, border-color 180ms ease; }
.welcome-start:is(:hover, .controller-hover, :focus-visible, :active) { background: var(--paper); border-color: var(--ink); transform: translateX(-50%) scale(1.06); outline: none; }
.welcome-start:active { transform: translateX(-50%) scale(1.02); }
@media (prefers-reduced-motion: reduce) { .welcome-start { transition: none; } }
.actions > button svg { display: block; width: min(38px, 100%); height: auto; aspect-ratio: 1; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
@media (max-height: 550px) { #welcome-title { font-size: min(14vw, 28vh); top: 52%; } #highscores { bottom: 16%; width: min(440px, 70vw); } #welcome:has(#highscores:not([hidden])) #welcome-title { top: 42%; font-size: min(12vw, 20vh); } .score-medal { font-size: 30px; } .podium-step { height: 40px; } .tier-2 .podium-step { height: 28px; } .tier-3 .podium-step { height: 20px; } #highscores h2 { font-size: 14px; } .run-summary-content { gap: 20px; } }
/* JSON library, campaigns and authoring share the game's paper and ink. */
.welcome-editor { position: absolute; z-index: 3; left: 50%; top: 84%; transform: translateX(-50%); padding: 12px 24px; font-size: 20px; white-space: nowrap; background: var(--paper); }
#welcome:has(#highscores:not([hidden])) .welcome-editor { top: auto; bottom: 4%; left: calc(50% + 210px); }
.workshop-screen { inset: 0; width: 100vw; height: var(--play-height); max-width: none; max-height: none; margin: 0; padding: clamp(20px, 3vw, 48px); border: 0; color: var(--ink); background: var(--paper); overflow: auto; }
.workshop-screen::backdrop { background: var(--paper); }
.workshop-header { display: flex; justify-content: space-between; align-items: start; gap: 24px; margin-bottom: 28px; }
.workshop-header h1 { font-size: clamp(30px, 3vw, 48px); font-weight: 400; margin: 4px 0 12px; }
.workshop-header p { margin: 0; }
.eyebrow { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #586e75; }
.workshop-screen button, .file-button { padding: 12px 18px; min-height: 46px; border: 1px solid var(--line); border-radius: 4px; text-align: left; font: inherit; cursor: pointer; }
.workshop-screen button:is(:hover, :focus-visible, .controller-hover), .file-button:hover { background: #eee8d5; border-color: var(--ink); }
.workshop-screen button:disabled { opacity: .45; cursor: default; }
.workshop-screen input, .workshop-screen select { min-width: 0; padding: 10px; min-height: 44px; font: inherit; color: var(--ink); background: #fffaf0; border: 1px solid var(--line); border-radius: 3px; }
.workshop-screen label { display: grid; gap: 7px; font-size: 14px; }
.workshop-message { min-height: 24px; font-size: 14px; color: #586e75; }
/* Campaign names give way to the same sparse level bubbles used in-game. */
#campaigns { position: fixed; inset: 0; width: 100vw; height: var(--play-height); max-width: none; max-height: none; margin: 0; padding: 0; border: 0; color: var(--ink); background: var(--paper); overflow: auto; }
#campaigns::backdrop { background: var(--paper); }
.campaign-heading { position: absolute; top: 4%; left: 4%; right: 4%; height: 88px; display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: center; }
#campaign-title, #builder-home-title { grid-column: 2; grid-row: 1; justify-self: center; max-width: 100%; margin: 0; font-size: clamp(36px, 4vw, 64px); font-weight: 400; line-height: 1.2; text-align: center; text-box-trim: trim-both; text-box-edge: cap alphabetic; }
#campaign-back, #builder-home-back { grid-column: 1; grid-row: 1; display: grid; place-items: center; width: 64px; height: 64px; aspect-ratio: 1; padding: 0; border-radius: 50%; }
#campaign-back svg, #builder-home-back svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#campaign-list { min-height: 100%; width: 100%; padding: 160px clamp(24px, 6vw, 96px) 88px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 44px; }
.campaign-options { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(28px, 6vh, 64px) 48px; width: min(100%, 1120px); }
.campaign-option { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: calc(50% - 24px); padding: 20px 12px; border-radius: 48px; font-size: clamp(20px, 2.5vw, 36px); line-height: 1.35; transition: color 180ms ease, background 180ms ease; }
.campaign-option small { color: #657b83; font-size: clamp(14px, 1.4vw, 18px); font-variant-numeric: tabular-nums; }
.campaign-option:disabled { color: #93a1a1; cursor: default; }
.campaign-option:disabled:hover { background: transparent; }
.campaign-option:focus-visible { outline: 1px solid var(--line); outline-offset: 4px; }
#campaign-list .campaign-levels { min-height: 0; width: 100%; }
#campaign-message { position: absolute; bottom: 18px; left: 10%; right: 10%; margin: 0; color: #586e75; font-size: 13px; text-align: center; }
#campaign-message:empty { display: none; }
@media (max-width: 750px) {
  .campaign-heading { top: max(12px, env(safe-area-inset-top)); left: 16px; right: 16px; height: 52px; grid-template-columns: 44px minmax(0, 1fr) 44px; }
  #campaign-back, #builder-home-back { width: 44px; height: 44px; }
  #campaign-back svg, #builder-home-back svg { width: 26px; height: 26px; }
  #campaign-title, #builder-home-title { font-size: clamp(22px, 6.5vw, 32px); }
  #campaign-list, #builder-home-content { padding: calc(max(12px, env(safe-area-inset-top)) + 64px) 16px 20px; gap: 20px; }
  .campaign-options { flex-direction: column; gap: clamp(8px, 1.6dvh, 14px); width: auto; max-width: min(100%, 300px); }
  .campaign-option { width: auto; min-width: min(200px, 100%); max-width: 100%; padding: clamp(10px, 1.5dvh, 14px) 28px; gap: 4px; font-size: clamp(18px, min(5.2vw, 3.2dvh), 26px); }
  .campaign-option small { font-size: clamp(12px, min(3.4vw, 2dvh), 15px); }
  .close-levels { top: max(12px, env(safe-area-inset-top)); right: 16px; width: 44px; height: 44px; font-size: 40px; }
  .level-constellation { --bubble-size: clamp(48px, min(16vw, 8.5dvh), 68px); --bubble-gap: clamp(12px, min(4.5vw, 2.2dvh), 22px); max-width: calc(3 * var(--bubble-size) + 2 * var(--bubble-gap)); gap: var(--bubble-gap); }
  .level-constellation.many-levels { --bubble-size: clamp(36px, min(11vw, 5.8dvh), 48px); --bubble-gap: clamp(6px, min(2.4vw, 1.2dvh), 12px); max-width: calc(6 * var(--bubble-size) + 5 * var(--bubble-gap)); gap: var(--bubble-gap); }
  #level-bubbles { padding: calc(max(12px, env(safe-area-inset-top)) + 56px) 16px 20px; max-width: calc(3 * var(--bubble-size) + 2 * var(--bubble-gap) + 32px); }
  #level-bubbles.many-levels { padding: calc(max(12px, env(safe-area-inset-top)) + 56px) 16px 20px; max-width: calc(6 * var(--bubble-size) + 5 * var(--bubble-gap) + 32px); }
  #welcome:has(#highscores:not([hidden])) .welcome-start { bottom: 11%; }
  #welcome:has(#highscores:not([hidden])) .welcome-editor { bottom: 2%; left: 50%; padding: 8px 18px; font-size: 16px; }
  #run-summary, #leaderboard { padding: 20px 16px; }
  .run-summary-content { gap: clamp(16px, 3dvh, 28px); }
}
@media (prefers-reduced-motion: reduce) { .campaign-option { transition: none; } }
/* Live authoring floats over the same WebGPU canvas used during play. */
#level-builder { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: visible; background: transparent; color: var(--ink); pointer-events: none; }
#level-builder input, #level-builder select, #level-builder button, #level-builder .builder-panel, #builder-palette, .builder-import, #builder-home { pointer-events: auto; }
#builder-home { position: fixed; inset: 0; z-index: 6; width: 100vw; height: var(--play-height); background: var(--paper); overflow: auto; }
#builder-home-content { min-height: 100%; width: 100%; padding: 150px clamp(24px, 6vw, 96px) 88px; display: flex; flex-direction: column; align-items: center; gap: 36px; }
.builder-create-btn { min-height: 54px; padding: 14px 36px; font-size: clamp(20px, 2.2vw, 28px); border: 1.5px solid var(--ink); border-radius: 999px; background: var(--paper); color: var(--ink); outline: none; cursor: pointer; transition: transform 150ms ease, background 150ms ease; }
.builder-create-btn:is(:hover, :focus-visible) { background: #eee8d5; transform: scale(1.03); }
.builder-home-tools { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 8px; }
.builder-home-link { position: relative; display: inline-flex; align-items: center; min-height: 46px; padding: 10px 18px; border: 0; border-radius: 8px; background: transparent; color: #586e75; font: inherit; font-size: 16px; cursor: pointer; }
.builder-home-link:is(:hover, :focus-visible, :focus-within) { color: var(--ink); background: #eee8d5; }
.builder-home-link:disabled { opacity: .35; cursor: default; background: transparent; }
.builder-empty { color: #586e75; font-size: 16px; text-align: center; margin: 24px 0; }
#game:has(#level-builder[open]) > .masthead { visibility: hidden; }
.builder-namebar, .builder-actions { position: absolute; top: 4%; height: 52px; display: flex; align-items: center; gap: 14px; }
.builder-namebar { left: 4%; }
.builder-actions { right: 4%; }
#builder-name { width: clamp(180px, 20vw, 320px); height: 48px; padding: 0 0 2px; border: 0; border-bottom: 1.5px solid transparent; background: transparent; color: var(--ink); font: inherit; font-size: clamp(20px, 1.8vw, 28px); line-height: 1; text-overflow: ellipsis; }
#builder-name:is(:hover, :focus) { border-bottom-color: var(--line); }
.builder-icon { display: inline-grid; place-items: center; flex: none; width: 48px; height: 48px; padding: 9px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); cursor: pointer; }
.builder-icon:is(:hover, :focus-visible):not(:disabled) { background: #eee8d5; }
.builder-icon svg { display: block; width: 100%; height: 100%; }
.builder-icon[aria-pressed="true"] { color: #268bd2; background: #268bd210; }
.builder-icon:disabled { opacity: .22; cursor: default; }
.builder-publish { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 18px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--paper); color: var(--ink); font: inherit; font-size: 16px; line-height: 1; outline: none; cursor: pointer; transition: opacity 150ms ease, background 150ms ease, color 150ms ease, border-color 150ms ease; }
#builder-publish-icon { display: inline-grid; place-items: center; width: 20px; height: 20px; }
.builder-publish svg { width: 20px; height: 20px; display: block; }
#builder-publish-label { text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.builder-publish[data-disabled="true"] { opacity: .45; border-color: var(--line); cursor: not-allowed; }
.builder-publish[aria-pressed="true"] { color: #2aa198; border-color: #2aa198; background: #2aa19812; }
#ui-tooltip { position: fixed; inset: auto; margin: 0; z-index: 9999; width: max-content; max-width: min(300px, 85vw); padding: 8px 14px; border: 0; border-radius: 6px; background: var(--ink); color: var(--paper); font: inherit; font-size: 14px; line-height: 1.35; letter-spacing: .01em; text-align: center; white-space: normal; box-shadow: 0 4px 18px #002b3638; pointer-events: none; overflow: visible; }
#ui-tooltip[hidden] { display: none; }
#ui-tooltip::before { content: ""; position: absolute; width: 8px; height: 8px; background: var(--ink); transform: rotate(45deg); }
#ui-tooltip[data-placement="bottom"]::before { top: -4px; left: calc(var(--arrow-x, 50%) - 4px); }
#ui-tooltip[data-placement="top"]::before { bottom: -4px; left: calc(var(--arrow-x, 50%) - 4px); }
#ui-tooltip[data-placement="right"]::before { left: -4px; top: calc(var(--arrow-y, 50%) - 4px); }
#builder-message { position: absolute; top: calc(100% + 4px); left: 62px; font-size: 14px; white-space: nowrap; color: #586e75; }
#level-builder:has(#builder-home:not([hidden])) #builder-message { position: fixed; top: auto; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 8; }
#builder-palette { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); display: grid; grid-template-columns: repeat(2, 58px); gap: 8px; padding: 12px; border-radius: 16px; background: #fdf6e3f2; border: 1.5px solid #002b361a; box-shadow: 0 4px 24px #002b3618; }
#builder-palette button { width: 58px; height: clamp(46px, 5.8vh, 56px); padding: 6px; border: 1.5px solid #002b3624; border-radius: 10px; background: #fffaf0; touch-action: none; cursor: grab; transition: background 120ms ease, border-color 120ms ease; }
#builder-palette button:is(:hover, :focus-visible, .controller-hover) { background: #eee8d5; border-color: var(--ink); }
#builder-palette button:is([aria-pressed="true"], [aria-expanded="true"]) { color: #268bd2; background: #268bd218; border-color: #268bd2; box-shadow: inset 0 0 0 1px #268bd2; }
#builder-palette button:active { cursor: grabbing; }
#builder-palette svg { display: block; width: 100%; height: 100%; }
#builder-divider { position: absolute; left: 50%; width: 1px; background: repeating-linear-gradient(to bottom, #002b3655 0 8px, transparent 8px 16px); }
#builder-guides { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; fill: none; }
#builder-bounds { stroke: #002b3648; stroke-width: 1; stroke-dasharray: 5 7; vector-effect: non-scaling-stroke; }
#builder-fixed-outline { stroke: #268bd2; stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 3px #268bd255); }
#builder-fixed-outline > * { vector-effect: non-scaling-stroke; }
#builder-fixed-outline .builder-grab-area { stroke-width: 1; stroke-dasharray: 4 5; fill: #268bd20a; }
#builder-fixed-outline[data-dragging="true"] .builder-grab-area { fill: #268bd216; stroke-dasharray: none; }
#builder-ghost { position: fixed; top: 0; left: 0; width: 64px; height: 64px; color: #268bd2; opacity: .85; pointer-events: none; }
#builder-ghost svg { width: 100%; height: 100%; }
.builder-panel { position: absolute; z-index: 3; min-width: 310px; max-width: min(420px, 92vw); padding: 24px; border-radius: 14px; background: var(--paper); border: 1.5px solid #002b3624; box-shadow: 0 8px 34px #002b362b; font-size: 16px; }
.builder-import { position: relative; overflow: hidden; }
.builder-import input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.builder-import:focus-within { outline: 1px solid var(--ink); outline-offset: 3px; }
#builder-delete { text-align: left; min-height: 44px; font-size: 16px; font-weight: 600; color: #cb4b16; padding: 12px 0 0; border-top: 1px solid var(--line); cursor: pointer; }
#builder-settings, #builder-properties { right: 4%; top: calc(4% + 66px); display: grid; gap: 16px; }
.builder-panel label { display: grid; gap: 8px; font-size: 15px; font-weight: 600; }
.builder-panel input:not([type="checkbox"]), .builder-panel select { min-width: 0; width: 100%; min-height: 46px; font: inherit; font-size: 16px; font-weight: 400; color: var(--ink); padding: 10px 12px; background: #fffaf0; border: 1.5px solid var(--line); border-radius: 6px; }
.builder-panel .builder-checkbox { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 16px; font-weight: 400; cursor: pointer; }
.builder-checkbox input { width: 22px; height: 22px; accent-color: var(--ink); cursor: pointer; }
#builder-properties { width: min(360px, 92vw); grid-template-columns: 1fr 1fr; gap: 16px; }
#builder-properties h3 { grid-column: 1/-1; font-size: 19px; font-weight: 700; margin: 0 0 2px; }
#builder-properties label:has(select) { grid-column: 1/-1; }
#builder-object-controls { position: absolute; display: flex; align-items: center; gap: 6px; transform: translate(-50%, -50%); padding: 6px 10px; background: #fdf6e3f5; border: 1.5px solid #002b3624; border-radius: 999px; box-shadow: 0 4px 18px #002b3622; pointer-events: auto; }
#builder-object-controls .builder-icon { width: 46px; height: 46px; aspect-ratio: 1; padding: 10px; border-radius: 50%; }
#builder-scale { display: flex; align-items: center; gap: 6px; }
#builder-radius { width: 120px; height: 28px; accent-color: var(--ink); cursor: ew-resize; }
@media (max-width: 1000px) { .builder-actions { gap: 6px; right: 2%; } .builder-namebar { left: 2%; gap: 8px; } .builder-icon { width: 44px; height: 44px; } #builder-palette { left: 12px; gap: 6px; padding: 8px; } }
@media (max-height: 650px) { #builder-palette { grid-template-columns: repeat(2, 46px); gap: 4px; padding: 8px; } #builder-palette button { width: 46px; height: 40px; } }
@media (max-width: 650px) { .builder-namebar { top: 12px; } .builder-actions { top: auto; bottom: 14px; left: 50%; right: auto; transform: translateX(-50%); background: var(--paper); border-radius: 12px; box-shadow: 0 2px 18px #002b3612; } #builder-properties, #builder-settings { top: 80px; right: 12px; } #builder-palette { left: 8px; grid-template-columns: 44px; } #builder-palette button { width: 44px; height: 40px; } }
#level-builder { z-index: 2; }
/* Portrait worlds retain their own geometry even when the device rotates. */
html[data-device="mobile"] { --conference-height: calc(60px + env(safe-area-inset-bottom)); -webkit-text-size-adjust: 100%; }
html[data-device="mobile"] body { overscroll-behavior: none; }
html[data-device="mobile"] #controller-settings :is(label[for="controller-type"], #controller-type, label[for="controller-count"], #controller-count) { display: none; }
html[data-device="mobile"] #conference-bar { padding: 4px 12px calc(4px + env(safe-area-inset-bottom)); }
html[data-world="portrait"] .masthead { top: max(10px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); height: 48px; }
html[data-world="portrait"] .actions > button { width: clamp(38px, 11.3vw, 44px); height: clamp(38px, 11.3vw, 44px); font-size: 32px; }
html[data-world="portrait"] .flow-readout { font-size: 18px; margin-left: 6px; }
html[data-world="portrait"] #level-header { width: 62px; height: 48px; }
html[data-world="portrait"] #level-number { font-size: 28px; }
html[data-world="portrait"] .piece-label:not(.pipe-label) { font-size: clamp(16px, 3.5vw, 22px); gap: .16em; }
html[data-world="portrait"] .inlet-control { width: 44px; }
html[data-world="portrait"] .inlet-control > span { font-size: 23px; }
html[data-device="mobile"] .campaign-heading { top: max(12px, env(safe-area-inset-top)); height: 52px; }
html[data-device="mobile"] :is(#campaign-title, #builder-home-title) { font-size: clamp(22px, 6.5vw, 34px); }
html[data-device="mobile"] #campaign-list { padding: calc(max(12px, env(safe-area-inset-top)) + 64px) 16px 20px; }
html[data-device="mobile"] .level-constellation { --bubble-size: clamp(48px, min(16vw, 8.5dvh), 68px); --bubble-gap: clamp(12px, min(4.5vw, 2.2dvh), 22px); max-width: calc(3 * var(--bubble-size) + 2 * var(--bubble-gap)); gap: var(--bubble-gap); }
html[data-device="mobile"] .level-constellation.many-levels { --bubble-size: clamp(36px, min(11vw, 5.8dvh), 48px); --bubble-gap: clamp(6px, min(2.4vw, 1.2dvh), 12px); max-width: calc(6 * var(--bubble-size) + 5 * var(--bubble-gap)); gap: var(--bubble-gap); }
html[data-device="mobile"] #level-bubbles { padding: calc(max(12px, env(safe-area-inset-top)) + 56px) 16px 20px; max-width: calc(3 * var(--bubble-size) + 2 * var(--bubble-gap) + 32px); }
html[data-device="mobile"] #level-bubbles.many-levels { padding: calc(max(12px, env(safe-area-inset-top)) + 56px) 16px 20px; max-width: calc(6 * var(--bubble-size) + 5 * var(--bubble-gap) + 32px); }
html[data-device="mobile"] .intro-content { gap: clamp(16px, 3dvh, 24px); padding: max(20px, env(safe-area-inset-top)) 16px 20px; max-height: 100%; overflow: auto; }
html[data-device="mobile"] .intro-items { gap: 12px; }
html[data-device="mobile"] .intro-item { width: clamp(104px, 34vw, 132px); }
html[data-device="mobile"] .intro-item figcaption { font-size: 14px; gap: 5px; padding-bottom: 8px; }
html[data-device="mobile"] .intro-signature { font-size: 23px; }
html[data-device="mobile"] #level-name { font-size: clamp(24px, 7vw, 32px); padding: 0; }
html[data-device="mobile"] #welcome-title { font-size: min(18vw, 14vh); }
html[data-device="mobile"] .welcome-start, html[data-device="mobile"] .welcome-editor { min-height: 44px; }
#builder-palette[data-layout="portrait"] { top: auto; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; max-width: calc(100% - 16px); padding: 8px 10px; border-radius: 16px; }
.palette-categories, .palette-tray { display: flex; gap: 8px; }
#builder-palette[data-layout="portrait"] button { width: 50px; height: 50px; padding: 6px; }
#builder-palette[data-layout="portrait"] .palette-tray { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); max-width: min(380px, calc(100vw - 16px)); padding: 8px; overflow-x: auto; border-radius: 14px; background: var(--paper); border: 1.5px solid #002b3624; box-shadow: 0 4px 24px #002b3624; }
.palette-tray button { flex: 0 0 50px; }
.palette-categories button[aria-expanded="true"] { color: #268bd2; background: #268bd218; border-color: #268bd2; }
html[data-world="portrait"] .builder-namebar { top: max(8px, env(safe-area-inset-top)); left: 12px; right: 12px; min-height: 48px; }
html[data-world="portrait"] #builder-name { width: min(220px, calc(100vw - 90px)); font-size: 20px; }
html[data-world="portrait"] .builder-actions { top: max(56px, calc(env(safe-area-inset-top) + 52px)); bottom: auto; left: 50%; right: auto; transform: translateX(-50%); gap: 4px; min-height: 48px; background: #fdf6e3ed; border-radius: 14px; padding: 4px; }
html[data-world="portrait"] .builder-icon { width: 46px; height: 46px; }
html[data-world="portrait"] #builder-object-controls { max-width: calc(100vw - 16px); }
html[data-world="portrait"] #builder-object-controls .builder-icon { width: 46px; height: 46px; }
html[data-world="portrait"] #builder-settings, html[data-world="portrait"] #builder-properties { top: 72px; left: 12px; right: 12px; width: auto; min-width: 0; max-width: none; max-height: calc(var(--play-height) - 220px); overflow-y: auto; }
@media (pointer: coarse) { button, select, input { touch-action: manipulation; } .builder-panel input { font-size: 16px; } }
html[data-world="portrait"] #game:has(#level-builder[open]) :is(#water, #piece-labels, #inlet-controls, #builder-guides) { top: calc(104px + env(safe-area-inset-top)); height: calc(100% - 184px - env(safe-area-inset-top)); }
html[data-device="mobile"] #conference-bar a { height: 44px; }

.inlet-leader { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; fill: none; stroke: #657b8370; stroke-width: 1; }
@media (pointer: coarse) { .inlet-control:hover::before { display: none; } }
html[data-world="portrait"] #builder-message { top: calc(100% + 56px); max-width: calc(100vw - 92px); white-space: normal; line-height: 1.3; }
/* Localhost campaign organizer shares #builder-home and aligns controls to a uniform 48px track. */
#welcome:has(#open-campaign-editor:not([hidden])):not(:has(#highscores:not([hidden]))) #open-editor { left: calc(50% - 120px); }
#welcome:has(#open-campaign-editor:not([hidden])):not(:has(#highscores:not([hidden]))) #open-campaign-editor { left: calc(50% + 120px); }
#welcome:has(#highscores:not([hidden])) #open-campaign-editor { top: auto; bottom: 4%; left: calc(50% - 210px); }
#builder-level-list:has(.campaign-editor-list) { flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 22px; width: min(100%, 1040px); }
.campaign-editor-create-bar, .campaign-editor-toolbar, .campaign-level-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; width: 100%; }
.campaign-editor-create-bar > *, .campaign-editor-toolbar > *, .campaign-level-actions > * { height: 48px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.campaign-editor-create-bar input, .campaign-editor-create-bar select, .campaign-editor-toolbar input:not([type="checkbox"]) { padding: 0 14px; font: inherit; font-size: 16px; color: var(--ink); background: #fffaf0; border: 1.5px solid var(--line); border-radius: 8px; }
#new-campaign-name { width: clamp(200px, 24vw, 280px); }
#campaign-edit-name { width: clamp(180px, 18vw, 240px); }
.campaign-editor-toolbar .builder-checkbox { display: inline-flex; align-items: center; gap: 8px; padding: 0 8px; font-size: 16px; cursor: pointer; }
.campaign-editor-toolbar .builder-checkbox span, .campaign-save-btn, .campaign-danger-btn, .campaign-level-actions button { text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.campaign-save-btn, .campaign-editor-create-bar .builder-create-btn, .campaign-level-actions .builder-create-btn { padding: 0 22px; font-size: 17px; }
.campaign-danger-btn { padding: 0 16px; font: inherit; font-size: 16px; color: #cb4b16; border: 1.5px solid #cb4b1655; border-radius: 999px; background: var(--paper); cursor: pointer; }
.campaign-danger-btn:is(:hover, :focus-visible):not(:disabled) { background: #cb4b1612; border-color: #cb4b16; }
.campaign-danger-btn:disabled { opacity: .35; cursor: default; }
.campaign-editor-list { display: flex; flex-direction: column; gap: 12px; width: min(100%, 880px); margin-inline: auto; }
.campaign-editor-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 18px; border: 1.5px solid var(--line); border-radius: 14px; background: #fffaf0; }
.campaign-editor-main { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 4px 6px; text-align: left; border-radius: 8px; }
.campaign-editor-main .campaign-name { font-size: clamp(18px, 1.8vw, 24px); line-height: 1.2; text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.campaign-editor-main .campaign-meta { color: #586e75; font-size: 14px; font-variant-numeric: tabular-nums; }
.campaign-editor-row-actions { display: inline-flex; align-items: center; gap: 6px; }
.campaign-row-btn { display: inline-grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); font-size: 18px; line-height: 1; }
.campaign-row-btn:is(:hover, :focus-visible):not(:disabled) { background: #eee8d5; border-color: var(--ink); }
.campaign-row-btn:disabled { opacity: .3; cursor: default; }
.campaign-copy-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; width: min(100%, 880px); max-height: 280px; padding: 14px; overflow-y: auto; border: 1.5px solid var(--line); border-radius: 14px; background: #fffaf0; }
.campaign-copy-option { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); text-align: left; }
.campaign-copy-option:is(:hover, :focus-visible) { background: #eee8d5; border-color: var(--ink); }
.campaign-copy-option strong { font-size: 16px; font-weight: 600; }
.campaign-copy-option small { color: #586e75; font-size: 13px; }