/* High-key retro palette over a clean paper-white background. */
:root {
  color-scheme: light;
  --ground: #CDD1D3;
  --page-background: #FFFFFF;
  --ink: #3C3C3B;
  --warm-white: #FFFFFF;
  --tone-purple: #C193ED;
  --tone-terracotta: #F29400;
  --tone-moss: #79CAA8;
  --tone-rose: #F08EB2;
  --tone-blue: #9FD1FD;
  --tone-ochre: #F8D94E;
  --block-stroke: rgb(0 0 0 / 52%);
  --block-shadow: 0 3px 0 rgb(0 0 0 / 16%);
  --font-body: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
  --font-display: 'Plaster Rounded', 'Arial Rounded MT Bold', 'PingFang SC', sans-serif;
  --font-rounded: var(--font-display);
  --plaster: #F8F4ED;
  --edge: color-mix(in srgb, var(--ground) 88%, black);
  --fiber-texture: none;
  --dust-texture: none;
  --gap: 5px;
  --radius: 15px;
  --board-height: calc(100svh - 6px);
}
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
html, body { background: var(--page-background); }
body { font-family: var(--font-body); font-weight:400; }
.foundation { overflow: hidden; padding: 3px; }
.board { position: relative; width: 100%; height: var(--board-height); background: transparent; outline: none; }
.slab {
  isolation: isolate;
  position: absolute;
  left: calc(var(--x) * 25% + var(--gap) / 2);
  top: calc(var(--y) * 20% + var(--gap) / 2);
  width: calc(var(--w) * 25% - var(--gap));
  height: calc(var(--h) * 20% - var(--gap));
  margin: 0; padding: 0;
  border: 2px solid var(--block-stroke);
  border-radius: var(--radius);
  background: var(--plaster);
  box-shadow:var(--block-shadow);
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: left 120ms ease-out, top 120ms ease-out, opacity 300ms ease;
  outline: none;
}
.slab::before, .slab::after, .fixed-slab::before, .fixed-slab::after, .dial-knob::before { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; }
.slab::before, .fixed-slab::before, .dial-knob::before {
  background-image: var(--fiber-texture), var(--dust-texture);
  background-size: 1024px 1024px,384px 384px;
  background-position: var(--grain-x, 0px) var(--grain-y, 0px);
  mix-blend-mode: multiply;
  opacity: .23;
}
.slab::after, .fixed-slab::after { box-shadow:none; }
.slab:focus-visible { outline: none; }
.slab[data-decoration="violet"] { --plaster: #EAD8FA; --pattern-ink: #B875E6; }
.slab[data-decoration="blue"] { --plaster: #D6ECFF; --pattern-ink: #78BFF2; }
.slab[data-decoration="green"] { --plaster: #E1F6C7; --pattern-ink: #9AD455; }
.slab[data-decoration="orange"] { --plaster: #FFE2B8; --pattern-ink: #F29400; }
.slab[data-decoration] {
  background:var(--plaster);
}
.slab[data-decoration]::before,.slab[data-profile]::before,.corridor > .fixed-slab::before { opacity:.08; mix-blend-mode:soft-light; }
.leopard-pattern {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.leopard-brand {
  position:absolute; inset:0; display:flex; align-items:center;
  pointer-events:none; border-radius:inherit; opacity:.48;
}
.leopard-brand svg { display:block; width:100%; overflow:visible; }
.leopard-brand text {
  font-family:var(--font-rounded); font-size:140px; font-weight:900;
  fill:color-mix(in srgb, var(--plaster) 78%, var(--pattern-ink));
}
.social-engraving {
  position:absolute; left:50%; top:50%; width:min(42%,92px); aspect-ratio:1; z-index:1;
  transform:translate(-50%,-50%); border-radius:50%; cursor:pointer; pointer-events:auto;
  background:color-mix(in srgb,var(--plaster) 82%,var(--pattern-ink));
  box-shadow:inset 2px 3px 5px color-mix(in srgb,var(--pattern-ink) 72%,transparent),
             inset -2px -2px 4px color-mix(in srgb,var(--plaster) 58%,white),
             0 1px 0 color-mix(in srgb,var(--plaster) 72%,white);
  opacity:.9;
}
.social-engraving::before {
  content:''; position:absolute; inset:27% 22%;
  background:color-mix(in srgb,var(--pattern-ink) 78%,#132322);
  -webkit-mask:var(--brand-icon) center / contain no-repeat;
  mask:var(--brand-icon) center / contain no-repeat;
  filter:drop-shadow(0 1px 0 color-mix(in srgb,var(--plaster) 45%,white));
}
.social-engraving:focus-visible { outline:none; opacity:1; }
.slab.is-dragging {
  cursor:grabbing; transition:none; z-index:3; will-change:transform;
  box-shadow:0 8px 10px color-mix(in srgb,#314b49 20%,transparent);
}
.slab.is-leaving { pointer-events: none; z-index: 4; cursor: default; }
.slab.is-landed { top: calc(60% + var(--corridor-height) + var(--gap) / 2); transition: none; pointer-events: auto; cursor: grab; }
.slab.is-landed.is-parked { top:calc(60% + var(--gap) / 2); pointer-events:none; cursor:default; }
.slab.is-landed.is-lifted { cursor: grabbing; will-change: transform; box-shadow: 0 6px 10px color-mix(in srgb, var(--edge) 28%, transparent); }
.slab.is-rearranging { z-index: 3; pointer-events: none; will-change: transform; transform-origin: 0 0; }
.lift-shadow {
  position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  box-shadow: 0 8px 12px color-mix(in srgb, var(--edge) 32%, transparent);
  opacity: 0;
}
.is-rearranging > .lift-shadow { will-change: opacity; }
.corridor {
  --dial-size: min(250px, 46vw);
  --control-top: 42px;
  --safe-zone: calc(var(--control-top) + var(--dial-size) + 52px);
  position: relative;
  height: calc(var(--safe-zone) + var(--board-height) * .4);
  padding-top: var(--control-top);
  transition:height 620ms cubic-bezier(.22,.8,.25,1);
}
.rail {
  position: absolute; top: calc(var(--gap) / 2); bottom: calc(var(--gap) / 2);
  width: calc(25% - var(--gap)); display: grid; gap: var(--gap);
}
.fixed-slab {
  position: relative; width: 100%; min-height: 0; padding: 0; margin: 0; border:2px solid var(--block-stroke); border-radius: var(--radius);
  background: var(--plaster);
  box-shadow:var(--block-shadow);
  cursor: pointer; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.fixed-slab:focus-visible { outline: none; }
.rail-left { left: calc(var(--gap) / 2); grid-template-rows: calc(var(--safe-zone) - var(--gap)) 1fr; }
.rail-right { right: calc(var(--gap) / 2); grid-template-rows: calc(var(--safe-zone) - var(--gap)) 1fr; }
.difficulty { --dial-color:var(--tone-purple); position:relative; z-index:5; width:var(--dial-size); aspect-ratio:1; margin:0 auto; }
.project-strips { display: grid; gap: var(--gap); padding: calc(var(--gap) / 2); }
.project-strip { height: clamp(180px, 34svh, 420px); }
.dial-well {
  position: absolute; inset: 21%; border-radius: 50%;
  background: var(--ground);
  box-shadow: inset 3px 5px 9px color-mix(in srgb, var(--edge) 52%, transparent), inset -2px -3px 5px color-mix(in srgb, var(--plaster) 65%, transparent), 0 1px 0 color-mix(in srgb, var(--plaster) 60%, transparent);
}
.dial-knob {
  position: absolute; inset: 10%; border-radius: 50%; cursor: grab; touch-action: none;
  background:var(--dial-color); outline:none; user-select:none;
  box-shadow:inset 0 2px 5px color-mix(in srgb,var(--dial-color) 48%,white),inset 0 -5px 9px color-mix(in srgb,var(--dial-color) 64%,#496361),0 3px 2px color-mix(in srgb,var(--dial-color) 54%,#425b59),0 5px 8px color-mix(in srgb,var(--edge) 30%,transparent);
  transition:background-color 360ms cubic-bezier(.22,.8,.25,1),box-shadow 360ms cubic-bezier(.22,.8,.25,1);
}
.dial-knob:focus-visible { outline: 1px solid var(--edge); outline-offset: 5px; }
.dial-knob.is-turning { cursor: grabbing; }
.dial-indicator { position: absolute; inset: 0; transform: rotate(var(--turn)); transition: transform 280ms cubic-bezier(.45,0,.25,1); pointer-events: none; }
.dial-indicator::before { content: ''; position: absolute; width: 3px; height: 12%; top: 14%; left: calc(50% - 1.5px); border-radius: 9px; background:var(--ink); box-shadow: inset 0 1px 1px color-mix(in srgb, var(--edge) 45%, transparent), 0 1px 0 color-mix(in srgb,var(--dial-color) 55%,white); }
.dial-stop {
  position: absolute; width: 44px; height: 44px; padding: 0; border: 0; background: none;
  color: color-mix(in srgb, var(--ground) 65%, black); font: 300 18px/1 -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  font-variant-numeric: tabular-nums; cursor: pointer; border-radius: 50%; transition: color 180ms ease;
}
.dial-stop[data-level="1"] { left: 4%; top: 22%; }
.dial-stop[data-level="2"] { left: calc(50% - 22px); top: 0; }
.dial-stop[data-level="3"] { right: 4%; top: 22%; }
.dial-stop[aria-checked="true"] { color: var(--ink); }
.dial-stop { font-family: var(--font-body); font-weight:400; }
.dial-stop:focus-visible { outline: 1px solid var(--edge); }
@media (max-width: 700px) { :root { --gap: 4px; --radius: 12px; --board-height: calc(100svh - 4px); } .foundation { padding: 2px; } }
@media (max-width: 700px) { .corridor { --control-top: 26px; } .dial-stop { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .slab, .dial-indicator, .dial-stop { transition: none; } }