/* The tilt maze: a maple board with birch walls in a walnut box, brass knobs and a brass cup, a steel ball, on a warm
   linen table. */
:root {
  --linen: #efe4d0;          /* the table under the toy */
  --linen-dark: #dccaa9;     /* the table's shaded edges */
  --ink: #2c1b10;            /* the words */
  --ink-soft: #7a5a40;       /* the quieter words */
  --maple-a: #e6b77a;        /* the board: the light wood */
  --maple-b: #d39a5a;        /* the board: the deeper wood */
  --grain: #8a5328;          /* the grain of the wood */
  --line: #2a1709;           /* the printed line through the maze */
  --print: #6b3f1d;          /* the words printed on the board */
  --wall-top: #f3d6a6;       /* the top of the walls */
  --wall-side: #d9a868;      /* the front of the walls */
  --wall-shade: #b98245;     /* the sides of the walls */
  --walnut-top: #8b5a36;     /* the box: its top edge */
  --walnut: #6b4127;         /* the box: its sides */
  --walnut-dark: #3e2414;    /* the box: inside, in the shade */
  --hole: #120904;           /* the inside of a hole */
  --brass: #d6a63f;          /* the cup and the knobs */
  --brass-light: #f6dc8c;    /* the shine on the brass */
  --brass-dark: #8a6018;     /* the brass in the shade */
  --steel-light: #ffffff;    /* the shine on the ball */
  --steel: #9aa4ae;          /* the ball */
  --steel-dark: #262c33;     /* the ball's dark edge */
  --paper: #fffaf0;          /* the shop's tag */
  --paper-1: #e5533d;        /* the confetti: tomato */
  --paper-2: #f2b134;        /* the confetti: mustard */
  --paper-3: #2a9d8f;        /* the confetti: teal */
  --paper-4: #3d6bd6;        /* the confetti: blue */
  --paper-5: #f28fb0;        /* the confetti: pink */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--linen);
  color: var(--ink);
  font-family: 'Bricolage Grotesque Variable', 'Bricolage Grotesque', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  justify-items: center;
  align-items: center;
  padding: clamp(12px, 3vh, 28px) 16px clamp(12px, 3vh, 26px);
  overflow: hidden;
  background:
    radial-gradient(70% 60% at 50% 55%, color-mix(in srgb, var(--linen) 70%, #fff) 0%, transparent 70%),
    radial-gradient(120% 90% at 50% 50%, transparent 55%, var(--linen-dark) 100%),
    var(--linen);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

/* ---- the shop, above ---- */
.shop {
  text-align: center;
  display: grid;
  gap: 2px;
}

.shop__name {
  margin: 0;
  font-family: 'Fraunces Variable', 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: clamp(19px, 2.6vw, 26px);
  letter-spacing: -0.01em;
}

.shop__line {
  margin: 0;
  font-size: clamp(12px, 1.4vw, 14px);
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

/* ---- the scene: perspective here, the 3D below ---- */
.scene {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.fit,
.intro,
.table,
.box,
.lift,
.board {
  transform-style: preserve-3d;
}

.fit {
  position: absolute;
  left: 50%;
  top: 50%;
}

.intro {
  position: absolute;
  inset: 0;
}

.table {
  position: absolute;
  inset: 0;
  transform: rotateX(var(--view, 34deg));
}

.box {
  position: absolute;
  left: 0;
  top: 0;
}

.lift {
  position: absolute;
  inset: 0;
}

.board {
  position: absolute;
  transform-origin: 50% 50%;
}

.board__top {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(40% 30% at 28% 70%, color-mix(in srgb, var(--maple-b) 60%, transparent), transparent 70%),
    radial-gradient(35% 40% at 78% 25%, color-mix(in srgb, var(--maple-a) 70%, #fff 10%), transparent 70%),
    linear-gradient(170deg, var(--maple-a), var(--maple-b));
}

.art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.grain__line {
  fill: none;
  stroke: var(--grain);
  stroke-opacity: 0.16;
  stroke-width: 1.1;
}

.grain__dark {
  fill: none;
  stroke: var(--grain);
  stroke-opacity: 0.24;
  stroke-width: 2.4;
}

.line {
  fill: none;
  stroke: var(--line);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  opacity: 0.82;
}

.printed {
  fill: var(--print);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.24em;
}

/* ---- the holes, the start ring and the cup, all painted on the wood ---- */
.holes {
  position: absolute;
  inset: 0;
}

.hole {
  position: absolute;
  width: calc(var(--r) * 2);
  height: calc(var(--r) * 2);
  margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, var(--hole) 0 56%, color-mix(in srgb, var(--hole) 70%, var(--maple-b)) 76%, color-mix(in srgb, var(--maple-b) 70%, var(--hole)) 100%);
  box-shadow:
    inset 0 4px 5px rgba(0, 0, 0, 0.7),
    0 1px 0 1px color-mix(in srgb, var(--wall-top) 60%, transparent),
    0 -1px 0 1px color-mix(in srgb, var(--grain) 40%, transparent);
}

.hole--cup {
  background:
    radial-gradient(circle at 50% 42%, var(--hole) 0 48%, var(--brass-dark) 53%, var(--brass) 62%, var(--brass-light) 70%, var(--brass) 80%, var(--brass-dark) 100%);
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.45),
    0 2px 3px rgba(60, 30, 5, 0.4);
}

.start-ring {
  position: absolute;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  border: 2px solid var(--line);
  opacity: 0.55;
}

.shadow {
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, rgba(50, 25, 5, 0.55) 0 45%, rgba(50, 25, 5, 0.2) 75%, transparent 100%);
}

.whirl {
  position: absolute;
  left: 0;
  top: 0;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  overflow: visible;
}

.whirl path {
  fill: none;
  stroke: var(--wall-top);
  stroke-width: 2.4;
  stroke-linecap: round;
  opacity: 0.9;
}

/* ---- the steel ball ---- */
.ball {
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  --dim: 1;
  filter: brightness(var(--dim));
  background:
    radial-gradient(circle at 34% 28%, var(--steel-light) 0 7%, color-mix(in srgb, var(--steel-light) 70%, var(--steel)) 15%, var(--steel) 42%, color-mix(in srgb, var(--steel) 45%, var(--steel-dark)) 70%, var(--steel-dark) 100%);
  box-shadow: inset -2px -3px 4px rgba(0, 0, 0, 0.35);
  will-change: transform;
}

/* the warm wood reflected in the bottom of the ball, and a window in its top */
.ball__shine {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(60% 34% at 50% 92%, color-mix(in srgb, var(--maple-a) 70%, transparent), transparent 80%),
    radial-gradient(18% 12% at 64% 22%, rgba(255, 255, 255, 0.75), transparent 80%);
}

/* ---- the blocks: walls, rim, the board's thickness, the box ---- */
.block {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateZ(var(--z0)) scale3d(1, 1, var(--rise, 1));
}

.face {
  position: absolute;
  display: block;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.face--top {
  inset: 0;
  transform: translateZ(var(--hgt));
}

.face--n {
  left: 0;
  top: 0;
  width: 100%;
  height: var(--hgt);
  transform-origin: 50% 0;
  transform: rotateX(90deg);
}

.face--s {
  left: 0;
  top: calc(100% - var(--hgt));
  width: 100%;
  height: var(--hgt);
  transform-origin: 50% 100%;
  transform: rotateX(-90deg);
}

.face--e {
  top: 0;
  left: calc(100% - var(--hgt));
  width: var(--hgt);
  height: 100%;
  transform-origin: 100% 50%;
  transform: rotateY(90deg);
}

.face--w {
  top: 0;
  left: 0;
  width: var(--hgt);
  height: 100%;
  transform-origin: 0 50%;
  transform: rotateY(-90deg);
}

.wall .face--top {
  background: linear-gradient(135deg, color-mix(in srgb, var(--wall-top) 85%, #fff), var(--wall-top));
  border-radius: 1.5px;
}

.wall .face--s {
  background: linear-gradient(180deg, var(--wall-side), color-mix(in srgb, var(--wall-side) 80%, var(--grain)));
}

.wall .face--w {
  background: color-mix(in srgb, var(--wall-side) 70%, var(--wall-top));
}

.wall .face--e,
.wall .face--n {
  background: var(--wall-shade);
}

.rim .face--top {
  background:
    repeating-linear-gradient(90deg, transparent 0 22px, color-mix(in srgb, var(--grain) 14%, transparent) 22px 23px),
    linear-gradient(135deg, color-mix(in srgb, var(--wall-top) 70%, var(--maple-a)), color-mix(in srgb, var(--maple-a) 85%, var(--grain)));
}

.rim .face--s,
.rim .face--w {
  background: color-mix(in srgb, var(--maple-b) 85%, var(--grain));
}

.rim .face--e,
.rim .face--n {
  background: color-mix(in srgb, var(--maple-b) 70%, var(--grain));
}

.slab .face--top,
.slab .face--n {
  display: none;
}

.slab .face {
  background: color-mix(in srgb, var(--maple-b) 55%, var(--walnut-dark));
}

.side .face--top {
  background:
    repeating-linear-gradient(90deg, transparent 0 30px, rgba(0, 0, 0, 0.06) 30px 31px),
    linear-gradient(135deg, color-mix(in srgb, var(--walnut-top) 80%, #fff 8%), var(--walnut-top));
}

.side .face--s {
  background: linear-gradient(180deg, var(--walnut), color-mix(in srgb, var(--walnut) 75%, #000));
}

.side .face--n,
.side .face--e,
.side .face--w {
  background: linear-gradient(180deg, color-mix(in srgb, var(--walnut) 80%, #000), var(--walnut-dark));
}

.box-floor {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--walnut-dark);
  box-shadow: 0 40px 70px rgba(70, 40, 10, 0.32), 0 10px 18px rgba(70, 40, 10, 0.25);
}

/* ---- the front of the box: the shop's name between two brass knobs ---- */
.box-brand {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Fraunces Variable', 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--brass-light) 75%, var(--walnut));
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}

.knob {
  position: absolute;
  top: 50%;
  left: 14%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  display: block;
}

.knob--right {
  left: 86%;
}

.knob__cap {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 50%;
  transform: rotate(var(--turn, 0deg));
  background:
    repeating-conic-gradient(from 0deg, var(--brass-dark) 0 6deg, var(--brass) 6deg 15deg),
    var(--brass);
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

/* the face of the knob, with the notch that shows how far it has turned */
.knob__cap::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, var(--brass-light), var(--brass) 55%, var(--brass-dark));
}

.knob__cap::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 6px;
  width: 3px;
  height: 9px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--walnut-dark);
}

/* ---- the hint below ---- */
.hint {
  margin: 0;
  min-height: 1.4em;
  font-size: clamp(13px, 1.6vw, 16px);
  font-weight: 500;
  color: var(--ink);
  text-align: center;
  max-width: 34em;
}

.hint__word {
  display: inline-block;
}

/* ---- the confetti and the tag ---- */
.confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.strip {
  position: absolute;
  left: 0;
  top: 0;
  width: 7px;
  height: 17px;
  margin: -8.5px 0 0 -3.5px;
  display: block;
  background: var(--c);
  border-radius: 1px;
}

.win {
  position: absolute;
  left: 50%;
  top: 46%;
  margin: 0;
  padding: clamp(18px, 3vw, 30px) clamp(22px, 4vw, 44px) clamp(16px, 2.6vw, 26px);
  text-align: center;
  background: var(--paper);
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(70, 40, 10, 0.28), 0 2px 0 rgba(70, 40, 10, 0.12);
  pointer-events: none;
  white-space: nowrap;
  max-width: calc(100vw - 32px);
}

/* the hole punched in the tag */
.win::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 10px;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--linen-dark);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

.win__shop {
  margin: 8px 0 2px;
  font-size: clamp(11px, 1.3vw, 13px);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.win__title {
  margin: 0;
  font-family: 'Fraunces Variable', 'Fraunces', Georgia, serif;
  font-weight: 800;
  font-size: clamp(38px, 7.4vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.win__letter {
  display: inline-block;
}

.win__line {
  margin: 6px 0 0;
  font-size: clamp(12px, 1.4vw, 15px);
  color: var(--ink-soft);
}

@media (max-width: 560px) {
  .win {
    white-space: normal;
  }
}