:root {
  --paper: #ead6aa;
  --paper-deep: #c69b62;
  --ink: #332116;
  --muted: #6e513a;
  --gold: #f3c56a;
  --ember: #f18a2d;
  --shadow: rgba(13, 8, 6, 0.72);
  --leather: #4a2819;
  --thread: rgba(255, 226, 171, 0.34);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  overflow: hidden;
  background: #130d0b;
  color: var(--paper);
  font-family: Georgia, "Times New Roman", serif;
}

button {
  font: inherit;
}

.game-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 52%, rgba(231, 138, 52, 0.22), transparent 34rem),
    linear-gradient(180deg, #241512, #100b0a);
}

.scene-frame {
  position: relative;
  width: min(100vw, 177.78vh);
  height: min(100vh, 56.25vw);
  min-width: 320px;
  min-height: 180px;
  overflow: hidden;
  background: #211613;
  box-shadow: 0 0 0 1px rgba(255, 226, 171, 0.12), 0 34px 90px rgba(0, 0, 0, 0.68);
}

.scene-stack,
.scene-layer {
  position: absolute;
  inset: 0;
}

.scene-stack {
  overflow: hidden;
  --parallax-x: 0;
  --parallax-y: 0;
}

.scene-layer {
  pointer-events: none;
  transform:
    translate(
      calc(var(--parallax-x, 0) * var(--layer-drift-x, 0px)),
      calc(var(--parallax-y, 0) * var(--layer-drift-y, 0px))
    )
    scale(var(--layer-scale, 1));
  transition: opacity 600ms ease, filter 900ms ease, transform 900ms ease;
}

.scene-layer[data-scene-layer="background"] {
  z-index: 0;
  --layer-drift-x: -0.18px;
  --layer-drift-y: -0.08px;
  --layer-scale: 1.04;
  filter: blur(1.2px) saturate(0.92) brightness(0.82);
}

.scene-layer[data-scene-layer="midground"] {
  z-index: 1;
  --layer-drift-x: 0.08px;
  --layer-drift-y: 0.04px;
  --layer-scale: 1.01;
}

.scene-layer[data-scene-layer="lighting"] {
  z-index: 2;
  mix-blend-mode: screen;
}

.scene-layer[data-scene-layer="atmosphere"] {
  z-index: 3;
}

.scene-layer[data-scene-layer="foreground"] {
  z-index: 5;
  --layer-drift-x: 0.24px;
  --layer-drift-y: 0.1px;
}

.scene-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.018);
  transition: opacity 1150ms ease, filter 1400ms ease;
}

.scene-layer[data-scene-layer="background"] .scene-art {
  opacity: 0;
  filter: saturate(0.8) brightness(0.68);
}

[data-time="morning"] .scene-layer[data-scene-layer="background"] .scene-day1,
[data-time="weeks"] .scene-layer[data-scene-layer="background"] .scene-weeks,
[data-time="evening"] .scene-layer[data-scene-layer="background"] .scene-evening {
  opacity: 1;
}

[data-time="morning"] .scene-day1,
[data-time="weeks"] .scene-weeks,
[data-time="evening"] .scene-evening {
  opacity: 1;
  transform: scale(1);
  filter: saturate(1.03);
}

.scene-frame::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 47% 52%, transparent 0 42%, rgba(20, 9, 6, 0.26) 74%),
    linear-gradient(180deg, rgba(12, 7, 5, 0.2), transparent 24%, rgba(8, 5, 4, 0.38));
}

.scene-light,
.particle-anchor {
  position: absolute;
  pointer-events: none;
}

.ember-glow {
  left: 32%;
  top: 38%;
  width: 30%;
  height: 34%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 153, 45, 0.38), transparent 68%);
  mix-blend-mode: screen;
  animation: emberPulse 3.8s ease-in-out infinite;
}

.window-light {
  left: 7%;
  top: 8%;
  width: 34%;
  height: 76%;
  background: linear-gradient(105deg, rgba(255, 230, 164, 0.24), transparent 64%);
  clip-path: polygon(18% 0, 56% 0, 100% 100%, 0 100%);
  opacity: 0.42;
  mix-blend-mode: screen;
}

[data-time="evening"] .window-light {
  opacity: 0.1;
}

.particle-anchor {
  left: calc(var(--anchor-x, 50) * 1%);
  top: calc(var(--anchor-y, 50) * 1%);
  width: calc(var(--anchor-width, 20) * 1%);
  height: calc(var(--anchor-height, 20) * 1%);
  opacity: var(--anchor-opacity, 0.34);
  transform: translate(-50%, -50%);
}

.particle-anchor span {
  position: absolute;
  width: calc(var(--particle-size, 3px) * var(--particle-scale, 1));
  height: calc(var(--particle-size, 3px) * var(--particle-scale, 1));
  border-radius: 50%;
  background: var(--particle-color, rgba(255, 219, 141, 0.64));
  box-shadow: 0 0 12px var(--particle-glow, rgba(241, 138, 45, 0.28));
}

.atmospheric-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.atmosphere-haze {
  opacity: var(--atmosphere-haze, 0.2);
  background:
    radial-gradient(circle at 24% 38%, rgba(255, 228, 174, 0.18), transparent 28%),
    linear-gradient(90deg, transparent, rgba(255, 217, 150, 0.12), transparent);
  mix-blend-mode: screen;
  animation: atmosphereBreathe var(--motion-breath, 12s) ease-in-out infinite;
}

.atmosphere-slow-drift {
  opacity: calc(var(--atmosphere-haze, 0.2) * 0.56);
  background:
    radial-gradient(circle at 12% 72%, rgba(255, 236, 190, 0.16), transparent 18%),
    radial-gradient(circle at 78% 24%, rgba(255, 188, 102, 0.12), transparent 22%);
  mix-blend-mode: screen;
  animation: slowDrift var(--motion-drift, 28s) linear infinite;
}

.particle-anchor[data-particle-anchor="forge-embers"] span {
  animation: emberDrift var(--particle-speed, 8s) ease-in-out infinite;
}

.particle-anchor[data-particle-anchor="forge-embers"] span:nth-child(1) {
  left: 30%;
  bottom: 16%;
  animation-delay: -1.4s;
}

.particle-anchor[data-particle-anchor="forge-embers"] span:nth-child(2) {
  left: 58%;
  bottom: 24%;
  transform: scale(0.72);
  animation-delay: -4s;
}

.particle-anchor[data-particle-anchor="forge-embers"] span:nth-child(3) {
  left: 44%;
  bottom: 6%;
  transform: scale(0.55);
  animation-delay: -6.2s;
}

.particle-anchor[data-particle-anchor="window-dust"] {
  --particle-size: 2px;
  --particle-color: rgba(255, 232, 178, 0.42);
  --particle-glow: rgba(255, 232, 178, 0.18);
}

.particle-anchor[data-particle-anchor="window-dust"] span {
  animation: dustFloat var(--particle-speed, 14s) linear infinite;
}

.particle-anchor[data-particle-anchor="window-dust"] span:nth-child(1) {
  left: 22%;
  top: 18%;
  animation-delay: -2s;
}

.particle-anchor[data-particle-anchor="window-dust"] span:nth-child(2) {
  left: 52%;
  top: 42%;
  transform: scale(0.7);
  animation-delay: -7s;
}

.particle-anchor[data-particle-anchor="window-dust"] span:nth-child(3) {
  left: 78%;
  top: 64%;
  transform: scale(0.5);
  animation-delay: -10s;
}

.showcase-piece {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms ease, transform 900ms ease;
}

.showcase-piece span {
  position: absolute;
  left: 0;
  top: -28px;
  padding: 5px 8px;
  color: #2d1c14;
  background: rgba(239, 210, 151, 0.86);
  border: 1px solid rgba(76, 44, 25, 0.2);
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: clamp(0.62rem, 0.86vw, 0.78rem);
  font-weight: 800;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.showcase-background-structure > span,
.showcase-midground-workshop > span,
.showcase-window-glow > span,
.showcase-foreground-clutter > span {
  display: none;
}

.showcase-layer-label {
  z-index: 7;
}

.showcase-layer-label span {
  top: 0;
}

.showcase-background-label {
  right: 24%;
  top: 34%;
}

.showcase-midground-label {
  right: 28%;
  top: 28%;
}

.showcase-lighting-label {
  left: 52%;
  top: 53%;
}

.showcase-foreground-label {
  left: 1%;
  top: 65%;
}

[data-time="showcase"] .scene-caption {
  max-width: min(430px, 38vw);
}

[data-time="showcase"] .scene-caption h1 {
  font-size: clamp(1.85rem, 3.4vw, 4.4rem);
}

[data-time="showcase"] .scene-caption p:last-child {
  max-width: 360px;
  font-size: clamp(0.9rem, 1.08vw, 1.08rem);
}

.showcase-background-structure {
  left: 5%;
  right: 5%;
  bottom: 38%;
  height: 42%;
  background:
    linear-gradient(142deg, transparent 0 10%, rgba(71, 55, 63, 0.78) 10% 18%, transparent 18% 23%, rgba(71, 55, 63, 0.72) 23% 36%, transparent 36%),
    linear-gradient(38deg, transparent 0 58%, rgba(91, 72, 78, 0.68) 58% 72%, transparent 72%),
    linear-gradient(180deg, rgba(64, 60, 76, 0.56), rgba(35, 36, 52, 0.36));
  clip-path: polygon(0 72%, 9% 55%, 17% 66%, 28% 42%, 39% 60%, 48% 34%, 63% 58%, 76% 39%, 91% 63%, 100% 48%, 100% 100%, 0 100%);
  filter: blur(0.4px) saturate(0.8);
}

.showcase-midground-workshop {
  left: 18%;
  top: 24%;
  width: 56%;
  height: 52%;
  background:
    linear-gradient(90deg, rgba(101, 60, 39, 0.14), transparent 18% 82%, rgba(61, 34, 25, 0.18)),
    repeating-linear-gradient(90deg, rgba(119, 75, 48, 0.72) 0 12px, rgba(88, 52, 35, 0.72) 12px 16px);
  border: 2px solid rgba(222, 176, 102, 0.34);
  box-shadow: inset 0 0 44px rgba(27, 15, 11, 0.58), 0 24px 42px rgba(0, 0, 0, 0.24);
}

.showcase-midground-workshop::before {
  content: "";
  position: absolute;
  left: 15%;
  top: 18%;
  width: 26%;
  height: 38%;
  background: rgba(245, 185, 91, 0.18);
  border: 3px solid rgba(52, 31, 22, 0.72);
  box-shadow: inset 0 0 18px rgba(255, 224, 148, 0.18);
}

.showcase-midground-workshop::after {
  content: "";
  position: absolute;
  right: 12%;
  bottom: 17%;
  width: 34%;
  height: 14%;
  background: rgba(57, 33, 24, 0.86);
  border-top: 4px solid rgba(174, 111, 58, 0.64);
}

.showcase-window-glow {
  left: 23%;
  top: 27%;
  width: 38%;
  height: 46%;
  background:
    radial-gradient(ellipse at 24% 28%, rgba(255, 224, 139, 0.62), rgba(242, 154, 58, 0.2) 28%, transparent 62%),
    linear-gradient(105deg, rgba(255, 218, 139, 0.34), transparent 68%);
  clip-path: polygon(0 0, 38% 0, 100% 100%, 18% 100%);
  mix-blend-mode: screen;
  filter: blur(2px);
}

.showcase-dust {
  display: none;
  --particle-size: 4px;
  --particle-color: rgba(255, 238, 190, 0.78);
  --particle-glow: rgba(255, 222, 151, 0.28);
}

.showcase-dust span {
  animation: dustFloat var(--particle-speed, 12s) linear infinite;
}

.showcase-dust span:nth-child(1) {
  left: 8%;
  top: 24%;
  animation-delay: -1s;
}

.showcase-dust span:nth-child(2) {
  left: 36%;
  top: 58%;
  animation-delay: -3s;
}

.showcase-dust span:nth-child(3) {
  left: 61%;
  top: 34%;
  animation-delay: -5.4s;
}

.showcase-dust span:nth-child(4) {
  left: 82%;
  top: 66%;
  animation-delay: -8s;
}

.showcase-atmosphere-label {
  left: 48%;
  top: 18%;
}

.showcase-atmosphere-label span {
  top: 0;
}

.showcase-foreground-clutter {
  left: 0;
  right: 0;
  bottom: 0;
  height: 32%;
  background:
    radial-gradient(ellipse at 42% 15%, rgba(24, 16, 12, 0.7), transparent 12%),
    linear-gradient(8deg, transparent 0 17%, rgba(92, 52, 31, 0.94) 18% 38%, transparent 39%),
    linear-gradient(-7deg, transparent 0 55%, rgba(52, 33, 24, 0.96) 56% 78%, transparent 79%),
    linear-gradient(180deg, transparent 0 34%, rgba(40, 24, 18, 0.92) 35% 100%);
  border-top: 3px solid rgba(183, 116, 56, 0.5);
  box-shadow: 0 -16px 28px rgba(0, 0, 0, 0.24);
}

.showcase-foreground-clutter::before,
.showcase-foreground-clutter::after {
  content: "";
  position: absolute;
  bottom: 32%;
  background: rgba(29, 20, 16, 0.92);
  box-shadow: 0 10px 16px rgba(0, 0, 0, 0.35);
}

.showcase-foreground-clutter::before {
  left: 30%;
  width: 8%;
  height: 54%;
  transform: rotate(9deg);
}

.showcase-foreground-clutter::after {
  right: 22%;
  width: 10%;
  height: 66%;
  transform: rotate(-7deg);
}

[data-time="showcase"] .scene-art,
[data-time="showcase"] .depth-slice,
[data-time="showcase"] .ember-glow,
[data-time="showcase"] .window-light,
[data-time="showcase"] .particle-anchor[data-particle-anchor="forge-embers"],
[data-time="showcase"] .particle-anchor[data-particle-anchor="window-dust"] {
  opacity: 0;
}

[data-time="showcase"] .showcase-piece,
[data-time="showcase"] .showcase-dust {
  display: block;
  opacity: 1;
}

[data-time="showcase"] .gabriel {
  z-index: 4;
}

[data-time="showcase"] .hotspot {
  z-index: 6;
}

.walk-marker {
  position: absolute;
  z-index: 4;
  left: calc(var(--marker-x, 52) * 1%);
  top: calc(var(--marker-y, 70) * 1%);
  width: clamp(24px, 2.8vw, 42px);
  height: clamp(10px, 1.1vw, 16px);
  border: 1px solid rgba(245, 197, 106, 0.52);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.72);
  transition: opacity 180ms ease, transform 260ms ease;
  box-shadow: 0 0 18px rgba(241, 138, 45, 0.22), inset 0 0 14px rgba(245, 197, 106, 0.16);
}

.walk-marker.is-visible {
  opacity: 0.78;
  transform: translate(-50%, -50%) scale(1);
}

.scene-transition {
  position: absolute;
  z-index: 11;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 52%, rgba(255, 226, 171, 0.12), transparent 30%),
    rgba(13, 8, 6, 0.42);
  transition: opacity 220ms ease;
}

.scene-transition span {
  padding: 7px 12px;
  color: rgba(255, 238, 204, 0.86);
  background: rgba(42, 24, 16, 0.62);
  border: 1px solid rgba(255, 226, 171, 0.18);
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: clamp(0.72rem, 0.9vw, 0.86rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: translateY(5px);
  transition: transform 220ms ease, opacity 220ms ease;
}

[data-transition="leaving"] .scene-transition,
[data-transition="entering"] .scene-transition {
  opacity: 1;
}

[data-transition="entering"] .scene-transition span {
  opacity: 0.62;
  transform: translateY(0);
}

[data-transition="leaving"] .scene-transition span {
  opacity: 0.92;
  transform: translateY(0);
}

.gabriel {
  position: absolute;
  z-index: 4;
  left: calc(var(--gabriel-x, 48) * 1%);
  top: calc(var(--gabriel-y, 74) * 1%);
  width: clamp(86px, 8.6vw, 142px);
  pointer-events: none;
  transform: translate(-50%, -100%) scale(var(--gabriel-scale, 0.9));
  transform-origin: 50% 100%;
  transition: filter 180ms ease;
  filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.38));
}

.gabriel::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: -1;
  width: 58%;
  height: 9%;
  border-radius: 50%;
  background: rgba(9, 5, 4, 0.48);
  filter: blur(4px);
  transform: translate(-50%, 38%);
}

.gabriel-body {
  transform: scaleX(var(--gabriel-facing, 1));
  transform-origin: 50% 100%;
}

.gabriel-frame {
  width: 100%;
  aspect-ratio: 2 / 3;
  background-image: url("./assets/gabriel-walk-sheet.png");
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 400% 100%;
}

.gabriel.is-walking .gabriel-frame {
  animation: smithStep 520ms steps(4) infinite;
}

.depth-foreground {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  transform: none;
  transition: opacity 400ms ease;
}

.depth-slice {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-image: url("./assets/workshop-day1-painted.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

[data-time="morning"] .depth-slice,
[data-time="weeks"] .depth-slice,
[data-time="evening"] .depth-slice {
  opacity: 1;
}

.depth-anvil {
  clip-path: polygon(51% 60%, 67% 60%, 69% 91%, 40% 91%, 39% 70%);
}

.depth-table {
  clip-path: polygon(66% 73%, 100% 65%, 100% 100%, 59% 100%);
}

[data-time="weeks"] .depth-slice {
  background-image: url("./assets/workshop-weeks-painted.png");
}

[data-time="weeks"] .depth-anvil {
  clip-path: polygon(16% 52%, 36% 52%, 39% 91%, 8% 93%, 8% 68%);
}

[data-time="weeks"] .depth-table {
  clip-path: polygon(75% 60%, 100% 56%, 100% 100%, 68% 100%);
}

[data-time="evening"] .depth-slice {
  background-image: url("./assets/workshop-evening-painted.png");
}

[data-time="evening"] .depth-anvil {
  clip-path: polygon(0 54%, 27% 54%, 32% 92%, 0 94%);
}

[data-time="evening"] .depth-table {
  clip-path: polygon(48% 68%, 100% 56%, 100% 100%, 45% 100%);
}

.gabriel.is-walking .gabriel-body {
  animation: smithBob 520ms steps(2, end) infinite;
}

.gabriel.is-walking {
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.42));
}

.gabriel-frame {
  width: 100%;
  height: auto;
}

.scene-caption {
  position: absolute;
  z-index: 4;
  left: clamp(18px, 4vw, 62px);
  top: clamp(16px, 4vw, 52px);
  max-width: min(470px, 48vw);
  text-shadow: 0 3px 20px rgba(0, 0, 0, 0.82);
}

.eyebrow {
  margin: 0 0 9px;
  color: var(--gold);
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: clamp(0.68rem, 0.9vw, 0.82rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 12px;
  font-size: clamp(2rem, 4.2vw, 5.7rem);
  line-height: 0.95;
  font-weight: 500;
  letter-spacing: 0;
}

.scene-caption p:last-child {
  max-width: 420px;
  margin-bottom: 0;
  color: rgba(255, 238, 204, 0.9);
  font-size: clamp(0.98rem, 1.3vw, 1.32rem);
  line-height: 1.44;
}

.hotspot {
  position: absolute;
  z-index: 5;
  display: grid;
  place-items: center;
  width: clamp(34px, 3.4vw, 52px);
  height: clamp(34px, 3.4vw, 52px);
  border: 1px solid rgba(255, 218, 144, 0.28);
  border-radius: 50%;
  color: #ffe5ae;
  background:
    radial-gradient(circle at 45% 42%, rgba(255, 219, 133, 0.86) 0 7%, transparent 8%),
    radial-gradient(circle, rgba(56, 30, 17, 0.16), rgba(30, 16, 12, 0.42));
  box-shadow: 0 0 0 0 rgba(241, 180, 88, 0.24), inset 0 0 18px rgba(255, 187, 88, 0.12);
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, opacity 220ms ease;
  animation: hush 3.8s ease-in-out infinite;
}

.hotspot span {
  position: absolute;
  top: calc(100% + 7px);
  padding: 5px 9px 6px;
  color: #3b2418;
  background: rgba(235, 205, 151, 0.9);
  border: 1px solid rgba(80, 45, 24, 0.24);
  box-shadow: 0 8px 24px rgba(8, 4, 3, 0.38);
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 180ms ease, transform 180ms ease;
  white-space: nowrap;
}

.hotspot:hover,
.hotspot:focus-visible {
  transform: scale(1.08);
  border-color: rgba(255, 228, 163, 0.78);
  background:
    radial-gradient(circle at 45% 42%, rgba(255, 232, 159, 0.94) 0 10%, transparent 11%),
    radial-gradient(circle, rgba(112, 62, 28, 0.3), rgba(35, 18, 12, 0.72));
  outline: none;
}

.hotspot:hover span,
.hotspot:focus-visible span {
  opacity: 1;
  transform: translateY(0);
}

.forge {
  left: 55%;
  top: 54%;
}

.board {
  left: 24%;
  top: 31%;
}

.journal {
  left: 78%;
  top: 78%;
}

.window {
  left: 10%;
  top: 25%;
}

.barter {
  left: 36%;
  top: 50%;
}

[data-time="weeks"] .forge {
  left: 13%;
  top: 48%;
}

[data-time="weeks"] .board {
  left: 63%;
  top: 30%;
}

[data-time="weeks"] .journal {
  left: 86%;
  top: 67%;
}

[data-time="weeks"] .window {
  left: 43%;
  top: 28%;
}

[data-time="weeks"] .barter {
  left: 73%;
  top: 58%;
}

[data-time="evening"] .forge {
  left: 18%;
  top: 47%;
}

[data-time="evening"] .board {
  left: 89%;
  top: 25%;
}

[data-time="evening"] .journal {
  left: 72%;
  top: 72%;
}

[data-time="evening"] .window {
  left: 63%;
  top: 29%;
}

[data-time="evening"] .barter {
  left: 82%;
  top: 74%;
}

.room-prompt {
  position: absolute;
  z-index: 6;
  left: clamp(16px, 3vw, 44px);
  bottom: clamp(14px, 3vw, 34px);
  width: min(360px, calc(100vw - 32px));
  padding: 12px 15px 13px;
  color: #f5dfb9;
  background:
    linear-gradient(90deg, rgba(74, 40, 25, 0.92), rgba(32, 17, 12, 0.78)),
    radial-gradient(circle at 12% 20%, rgba(245, 197, 106, 0.2), transparent 34%);
  border: 1px solid var(--thread);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(255, 244, 204, 0.05);
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}

.room-prompt span {
  display: block;
  margin-bottom: 5px;
  color: var(--gold);
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.room-prompt p {
  margin: 0;
  font-size: clamp(0.86rem, 1vw, 1rem);
  line-height: 1.36;
}

.town-spaces {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.town-space {
  position: absolute;
  width: clamp(64px, 8vw, 116px);
  min-height: clamp(42px, 5vw, 74px);
  opacity: 0.42;
  transform: translate(-50%, -50%) scale(0.96);
  transition: opacity 420ms ease, transform 420ms ease, filter 420ms ease;
}

.town-space span {
  position: absolute;
  left: 50%;
  bottom: -24px;
  padding: 5px 8px;
  color: #332116;
  background: rgba(234, 214, 170, 0.84);
  border: 1px solid rgba(78, 45, 24, 0.2);
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: clamp(0.62rem, 0.78vw, 0.74rem);
  font-weight: 800;
  transform: translateX(-50%);
  white-space: nowrap;
}

.town-space::before,
.town-space::after {
  content: "";
  position: absolute;
  inset: 0;
}

.town-space::before {
  border: 1px solid rgba(245, 197, 106, 0.24);
  background: rgba(43, 24, 16, 0.34);
  box-shadow: inset 0 0 24px rgba(246, 186, 96, 0.08), 0 12px 28px rgba(0, 0, 0, 0.25);
}

.town-space::after {
  opacity: 0.44;
  background: radial-gradient(circle at 50% 50%, rgba(255, 220, 141, 0.42), transparent 58%);
  mix-blend-mode: screen;
}

.town-space.is-current {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.04);
  filter: saturate(1.08);
}

.town-space-workshop {
  left: 53%;
  top: 61%;
}

.town-space-bakery {
  left: 27%;
  top: 59%;
}

.town-space-bakery::before {
  clip-path: polygon(8% 38%, 50% 0, 92% 38%, 92% 100%, 8% 100%);
  background: linear-gradient(180deg, rgba(124, 67, 40, 0.62), rgba(55, 30, 20, 0.62));
}

.town-space-well {
  left: 48%;
  top: 55%;
  width: clamp(54px, 6vw, 88px);
}

.town-space-well::before {
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(40, 30, 24, 0.72) 0 42%, rgba(119, 91, 64, 0.62) 44% 68%, rgba(42, 25, 17, 0.5) 70%);
}

.town-space-market {
  left: 72%;
  top: 58%;
}

.town-space-market::before {
  clip-path: polygon(0 22%, 100% 22%, 88% 100%, 12% 100%);
  background:
    repeating-linear-gradient(90deg, rgba(180, 92, 54, 0.72) 0 14px, rgba(231, 181, 104, 0.72) 14px 28px),
    rgba(67, 37, 25, 0.5);
}

.town-nav {
  position: absolute;
  z-index: 7;
  right: clamp(16px, 3vw, 44px);
  top: clamp(118px, 18vh, 176px);
  display: grid;
  gap: 7px;
  width: min(172px, 28vw);
  padding: 9px;
  background: rgba(49, 26, 18, 0.68);
  border: 1px solid rgba(255, 226, 171, 0.22);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.32);
}

.town-destination {
  min-height: 34px;
  padding: 0 10px;
  color: rgba(255, 236, 199, 0.88);
  background: rgba(27, 14, 10, 0.58);
  border: 1px solid rgba(255, 226, 171, 0.14);
  cursor: pointer;
  text-align: left;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.town-destination:hover,
.town-destination:focus-visible,
.town-destination.is-active {
  color: #332116;
  background: rgba(235, 197, 118, 0.94);
  border-color: rgba(255, 232, 171, 0.48);
  outline: none;
}

[data-current-town-space="bakery"] .town-space-bakery,
[data-current-town-space="well"] .town-space-well,
[data-current-town-space="market"] .town-space-market,
[data-current-town-space="workshop"] .town-space-workshop {
  opacity: 1;
}

.ambient-observations {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.observation-marker {
  position: absolute;
  width: clamp(20px, 2vw, 32px);
  height: clamp(20px, 2vw, 32px);
  border: 1px solid rgba(255, 226, 171, 0.22);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 226, 171, 0.36) 0 16%, rgba(47, 26, 17, 0.2) 17% 100%);
  box-shadow: 0 0 16px rgba(245, 197, 106, 0.12);
  cursor: pointer;
  opacity: 0.58;
  pointer-events: auto;
  transition: opacity 180ms ease, transform 180ms ease, border-color 180ms ease;
}

.observation-marker:hover,
.observation-marker:focus-visible {
  opacity: 1;
  transform: scale(1.12);
  border-color: rgba(255, 226, 171, 0.6);
  outline: none;
}

.observation-marker.is-noticed {
  opacity: 0.22;
  transform: scale(0.86);
}

.observation-bakery-window {
  left: 27%;
  top: 53%;
}

.observation-well-rope {
  left: 48%;
  top: 51%;
}

.observation-market-cloth {
  left: 72%;
  top: 54%;
}

.observation-journal {
  position: absolute;
  z-index: 6;
  right: clamp(16px, 3vw, 44px);
  top: clamp(284px, 42vh, 360px);
  width: min(260px, 30vw);
  padding: 10px 12px;
  color: rgba(255, 235, 199, 0.84);
  background: rgba(43, 24, 16, 0.62);
  border: 1px solid rgba(255, 226, 171, 0.16);
  pointer-events: none;
}

.observation-journal span {
  display: block;
  margin-bottom: 5px;
  color: var(--gold);
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.observation-journal p {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.28;
}

.book-gump {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 54%;
  width: min(820px, 82vw);
  aspect-ratio: 1.72;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -43%) scale(0.94);
  transition: opacity 260ms ease, transform 260ms ease;
  filter: drop-shadow(0 28px 50px rgba(0, 0, 0, 0.58));
}

[data-book="open"] .book-gump {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

[data-book="open"] .scene-caption,
[data-book="open"] .hotspot,
[data-book="open"] .room-prompt,
[data-book="open"] .day-thread,
[data-forge="open"] .scene-caption,
[data-forge="open"] .hotspot,
[data-forge="open"] .room-prompt,
[data-forge="open"] .day-thread {
  opacity: 0;
}

.book-gump > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.close-book {
  position: absolute;
  right: 7%;
  top: 9%;
  z-index: 2;
  width: 35px;
  height: 35px;
  border: 1px solid rgba(73, 39, 22, 0.38);
  border-radius: 50%;
  color: #4d2d1e;
  background: rgba(232, 200, 146, 0.74);
  cursor: pointer;
}

.book-tabs {
  position: absolute;
  z-index: 2;
  left: 7.4%;
  top: 20%;
  display: grid;
  gap: 7px;
}

.book-tab {
  width: clamp(54px, 6vw, 76px);
  min-height: 36px;
  padding: 0 8px;
  border: 1px solid rgba(64, 36, 21, 0.24);
  color: #3f2819;
  background: rgba(166, 103, 52, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 229, 179, 0.18);
  cursor: pointer;
}

.book-tab:hover,
.book-tab:focus-visible,
.book-tab.is-active {
  color: #25150e;
  background: rgba(223, 164, 88, 0.88);
  outline: none;
}

.book-page {
  position: absolute;
  z-index: 1;
  top: 24%;
  width: 25%;
  color: var(--ink);
}

.left-page {
  left: 25%;
}

.right-page {
  right: 19%;
}

.book-page h2 {
  margin-bottom: 12px;
  font-size: clamp(1.35rem, 2.15vw, 2.2rem);
  line-height: 1;
  font-weight: 500;
}

.book-page h3 {
  margin-bottom: 10px;
  font-size: clamp(1rem, 1.5vw, 1.34rem);
  color: #51351f;
}

.book-page p {
  color: var(--muted);
  font-size: clamp(0.82rem, 1.05vw, 1rem);
  line-height: 1.46;
}

.book-actions {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.book-action {
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgba(87, 50, 27, 0.32);
  color: #332116;
  background:
    linear-gradient(180deg, rgba(238, 201, 128, 0.78), rgba(197, 135, 67, 0.6));
  box-shadow: inset 0 1px 0 rgba(255, 244, 213, 0.38), 0 6px 14px rgba(63, 31, 14, 0.16);
  cursor: pointer;
  text-align: left;
}

.book-action:hover,
.book-action:focus-visible {
  background:
    linear-gradient(180deg, rgba(252, 220, 151, 0.9), rgba(211, 151, 77, 0.74));
  outline: 2px solid rgba(96, 55, 27, 0.2);
}

.forge-ritual {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 50%;
  width: min(1180px, calc(100vw - 48px));
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -48%) scale(0.96);
  transition: opacity 260ms ease, transform 260ms ease;
  filter: drop-shadow(0 28px 52px rgba(0, 0, 0, 0.58));
}

.forge-ritual.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.craft-complete {
  position: absolute;
  z-index: 12;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 54px);
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 215, 139, 0.16), transparent 32%),
    rgba(13, 8, 6, 0.54);
  transition: opacity 420ms ease;
}

[data-completion="open"] .craft-complete {
  opacity: 1;
  pointer-events: auto;
}

.completion-frame {
  width: min(520px, calc(100vw - 34px));
  padding: clamp(18px, 3vw, 30px);
  color: #f5dfb9;
  background:
    linear-gradient(180deg, rgba(62, 34, 21, 0.94), rgba(23, 13, 10, 0.96)),
    radial-gradient(circle at 50% 24%, rgba(245, 197, 106, 0.18), transparent 42%);
  border: 1px solid rgba(255, 226, 171, 0.32);
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.58), inset 0 0 0 1px rgba(255, 244, 204, 0.05);
}

.completion-frame h2 {
  margin-bottom: 4px;
  font-size: clamp(1.7rem, 3vw, 3.2rem);
  font-weight: 500;
  letter-spacing: 0;
}

.completion-recipient {
  margin-bottom: 16px;
  color: rgba(255, 238, 204, 0.72);
}

.finished-object {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(130px, 20vw, 190px);
  margin: 8px 0 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 52%, rgba(245, 197, 106, 0.16), transparent 44%),
    linear-gradient(180deg, rgba(16, 9, 7, 0.52), rgba(8, 5, 4, 0.34));
  border: 1px solid rgba(255, 226, 171, 0.16);
}

.finished-object img {
  position: relative;
  z-index: 1;
  width: min(68%, 320px);
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.46));
}

.finished-object-light {
  position: absolute;
  inset: 10%;
  background: radial-gradient(circle, rgba(255, 196, 92, 0.32), transparent 62%);
  mix-blend-mode: screen;
  animation: emberPulse 4.8s ease-in-out infinite;
}

.completion-interpretation,
.completion-memory {
  margin-bottom: 12px;
  color: rgba(255, 238, 204, 0.9);
  font-size: clamp(0.98rem, 1.25vw, 1.13rem);
  line-height: 1.48;
}

.completion-memory {
  color: rgba(243, 197, 106, 0.92);
}

.completion-return {
  min-height: 42px;
  padding: 10px 16px;
  color: #2f1b12;
  background: linear-gradient(180deg, #f3c56a, #c88f42);
  border: 1px solid rgba(255, 236, 178, 0.44);
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
}

.forge-panel {
  position: relative;
  max-height: calc(100vh - 48px);
  overflow: hidden;
  padding: clamp(14px, 1.5vw, 20px);
  color: #ead6aa;
  background:
    radial-gradient(circle at 72% 58%, rgba(241, 138, 45, 0.22), transparent 36%),
    radial-gradient(circle at 22% 72%, rgba(119, 68, 32, 0.22), transparent 32%),
    linear-gradient(145deg, rgba(65, 38, 24, 0.97), rgba(24, 14, 10, 0.97));
  border: 1px solid rgba(255, 226, 171, 0.24);
  box-shadow: inset 0 0 0 1px rgba(255, 239, 190, 0.06), inset 0 -28px 60px rgba(12, 7, 5, 0.46);
  clip-path: polygon(10px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 10px 100%, 0 calc(100% - 12px), 0 12px);
}

.close-forge {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 226, 171, 0.2);
  border-radius: 50%;
  color: #f3d79a;
  background: rgba(34, 17, 10, 0.72);
  cursor: pointer;
}

.forge-heading {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  align-items: baseline;
  max-width: 760px;
}

.forge-heading h2 {
  grid-column: 1;
  margin-bottom: 6px;
  font-size: clamp(1.35rem, 2vw, 2.05rem);
  line-height: 0.95;
  font-weight: 500;
}

.forge-recipient {
  grid-column: 2;
  margin: 0;
  color: rgba(255, 235, 199, 0.7);
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.forge-heading p:last-child {
  grid-column: 1 / -1;
  max-width: 620px;
  margin: 4px 0 0;
  color: rgba(255, 236, 202, 0.86);
  font-size: clamp(0.86rem, 1vw, 1rem);
  line-height: 1.28;
}

.craft-intent {
  display: inline-block;
  grid-column: 1 / -1;
  margin: -2px 0 2px;
  color: #f3c56a;
  font-size: clamp(0.98rem, 1.2vw, 1.18rem);
  line-height: 1.1;
}

.forge-workbench {
  display: grid;
  grid-template-columns: minmax(250px, 0.55fr) minmax(560px, 1.45fr);
  gap: 10px 16px;
  align-items: stretch;
  margin-top: 12px;
}

.fuel-observation,
.process-feedback {
  grid-column: 1;
}

.iron-stage,
.heat-read,
.hammer-zones {
  grid-column: 2;
}

.fuel-observation {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 0;
  background: transparent;
  border: 0;
}

.fuel-observation p {
  margin: 0;
  color: rgba(255, 235, 199, 0.82);
  font-size: 0.84rem;
  line-height: 1.24;
}

.fuel-choices {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.fuel-choice {
  position: relative;
  min-height: 92px;
  padding: 12px 12px 10px 86px;
  overflow: hidden;
  border: 1px solid rgba(255, 226, 171, 0.13);
  color: #efd8ad;
  background:
    radial-gradient(circle at 26px 58%, rgba(245, 197, 106, 0.1), transparent 42px),
    linear-gradient(180deg, rgba(64, 38, 25, 0.5), rgba(23, 13, 9, 0.44));
  cursor: pointer;
  text-align: left;
}

.fuel-choice strong {
  display: block;
}

.fuel-choice strong {
  margin-bottom: 5px;
  color: #f3c56a;
  font-size: 0.9rem;
}

.fuel-choice span {
  display: block;
  color: rgba(255, 235, 199, 0.78);
  font-size: 0.74rem;
  line-height: 1.2;
}

.fuel-object {
  position: absolute;
  left: 12px;
  top: 18px;
  width: 58px;
  height: 54px;
  pointer-events: none;
}

.fuel-scrap {
  background:
    linear-gradient(24deg, transparent 0 36%, rgba(158, 96, 48, 0.9) 37% 53%, transparent 54%),
    linear-gradient(-18deg, transparent 0 28%, rgba(199, 137, 65, 0.76) 29% 44%, transparent 45%),
    linear-gradient(70deg, transparent 0 45%, rgba(94, 54, 31, 0.86) 46% 64%, transparent 65%);
  filter: drop-shadow(0 8px 9px rgba(0, 0, 0, 0.36));
}

.fuel-charcoal {
  border-radius: 0 0 12px 12px;
  background:
    radial-gradient(circle at 50% 18%, rgba(30, 27, 24, 0.95) 0 38%, transparent 39%),
    linear-gradient(180deg, rgba(88, 72, 58, 0.8), rgba(34, 25, 20, 0.96));
  box-shadow: inset 0 0 0 2px rgba(199, 164, 102, 0.22), 0 10px 15px rgba(0, 0, 0, 0.34);
}

.fuel-damp {
  border-radius: 18px 8px 15px 9px;
  background:
    linear-gradient(16deg, rgba(77, 53, 36, 0.92), rgba(117, 81, 49, 0.7)),
    radial-gradient(circle at 70% 25%, rgba(199, 190, 157, 0.32), transparent 32%);
  box-shadow: inset 0 0 0 1px rgba(221, 209, 171, 0.12), 0 10px 15px rgba(0, 0, 0, 0.32);
}

.fuel-choice:hover,
.fuel-choice:focus-visible,
.fuel-choice.is-selected {
  background:
    radial-gradient(circle at 40px 48px, rgba(244, 181, 79, 0.18), transparent 56px),
    linear-gradient(180deg, rgba(73, 43, 27, 0.58), rgba(24, 13, 9, 0.5));
  border-color: rgba(255, 215, 145, 0.32);
  outline: none;
}

.fuel-choice:hover strong,
.fuel-choice:focus-visible strong,
.fuel-choice.is-selected strong {
  color: #ffd987;
}

.fuel-choice:hover span,
.fuel-choice:focus-visible span,
.fuel-choice.is-selected span:not(.fuel-object) {
  color: rgba(255, 237, 203, 0.86);
}

.fuel-choice.is-selected .fuel-object {
  filter: drop-shadow(0 0 12px rgba(244, 181, 79, 0.34)) drop-shadow(0 8px 9px rgba(0, 0, 0, 0.36));
}

.iron-stage {
  position: relative;
  min-height: clamp(350px, 48vh, 430px);
  display: grid;
  place-items: center;
  overflow: hidden;
  background-color: rgba(31, 18, 12, 0.96);
  background:
    radial-gradient(ellipse at 52% 58%, rgba(255, 142, 45, calc(0.04 + var(--forge-heat, 0.08) * 0.26)), transparent 45%),
    radial-gradient(ellipse at 50% 80%, rgba(20, 9, 5, 0.64), transparent 52%),
    rgba(31, 18, 12, 0.96);
  border: 0;
  box-shadow:
    inset 0 -30px 78px rgba(0, 0, 0, 0.36),
    0 20px 44px rgba(0, 0, 0, 0.12);
}

.iron-stage::before,
.iron-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.iron-stage::before {
  background:
    radial-gradient(ellipse at 51% 63%, rgba(255, 117, 26, calc(var(--forge-heat, 0.08) * 0.5)), transparent 43%),
    radial-gradient(ellipse at 53% 76%, rgba(255, 201, 106, calc(var(--fire-intensity, 0.12) * 0.22)), transparent 34%);
  mix-blend-mode: screen;
  opacity: calc(0.12 + var(--forge-heat, 0.08) * 0.9);
  filter: blur(calc(18px + var(--forge-heat, 0.08) * 18px));
  animation: hearthBreath calc(5.8s - var(--fire-intensity, 0.12) * 2.4s) ease-in-out infinite;
}

.iron-stage::after {
  background:
    linear-gradient(100deg, transparent 0 18%, rgba(0, 0, 0, calc(0.14 + (1 - var(--fire-stability, 0.5)) * 0.18)) 32%, transparent 46% 100%),
    linear-gradient(-82deg, transparent 0 56%, rgba(0, 0, 0, calc(0.12 + var(--fire-intensity, 0.12) * 0.18)) 72%, transparent 88% 100%);
  opacity: calc(0.24 + var(--fire-intensity, 0.12) * 0.46);
  animation: forgeShadows calc(7s - var(--fire-intensity, 0.12) * 3s) ease-in-out infinite;
}

.forge-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 48% 52%, rgba(255, 184, 81, calc(var(--forge-heat, 0.08) * 0.18)), transparent 34%),
    radial-gradient(ellipse at 52% 90%, rgba(255, 102, 23, calc(var(--fire-intensity, 0.12) * 0.2)), transparent 44%);
  opacity: calc(0.16 + var(--forge-heat, 0.08) * 0.76);
  filter: blur(10px) saturate(calc(0.78 + var(--fire-intensity, 0.12) * 0.72));
  mix-blend-mode: screen;
  animation: hearthBreath calc(6.4s - var(--fire-intensity, 0.12) * 2.8s) ease-in-out infinite;
}

.forge-smoke {
  position: absolute;
  left: 55%;
  bottom: 24%;
  width: 46%;
  height: 52%;
  opacity: calc(var(--fuel-smoke, 0.08) * (0.26 + var(--forge-heat, 0.08) * 0.7));
  pointer-events: none;
  background:
    radial-gradient(circle at 38% 78%, rgba(218, 207, 184, 0.24), transparent 25%),
    radial-gradient(circle at 58% 52%, rgba(218, 207, 184, 0.18), transparent 30%),
    radial-gradient(circle at 45% 24%, rgba(218, 207, 184, 0.12), transparent 28%);
  filter: blur(14px);
  transform: translateX(-50%);
  animation: smokeWaver 4.8s ease-in-out infinite;
}

.workpiece {
  position: relative;
  z-index: 3;
  width: min(620px, 82%);
  aspect-ratio: 1508 / 782;
  --strike-x: 50%;
  --strike-y: 52%;
  transform: translate(-8%, -3%) rotate(-1deg);
  filter:
    drop-shadow(0 24px 30px rgba(0, 0, 0, 0.52))
    drop-shadow(0 0 calc(var(--forge-heat, 0.08) * 24px) rgba(255, 139, 42, calc(var(--forge-heat, 0.08) * 0.4)));
}

.workpiece-art {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
}

.workpiece-heat,
.workpiece-strike-flash {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.workpiece-heat {
  opacity: calc(var(--iron-heat, 0.1) * (0.28 + var(--fire-stability, 0.5) * 0.24));
  background:
    radial-gradient(ellipse at 21% 73%, rgba(255, 111, 31, 0.46), transparent 32%),
    radial-gradient(ellipse at 80% 72%, rgba(255, 111, 31, 0.4), transparent 33%),
    radial-gradient(ellipse at 50% 64%, rgba(255, 171, 65, 0.18), transparent 26%);
  mix-blend-mode: screen;
}

.workpiece-strike-flash {
  opacity: 0;
  background: radial-gradient(circle at var(--strike-x) var(--strike-y), rgba(255, 230, 142, 0.9), rgba(244, 116, 35, 0.32) 13%, transparent 27%);
  mix-blend-mode: screen;
}

.workpiece[data-strike-focus="left"] {
  --strike-x: 25%;
  --strike-y: 48%;
}

.workpiece[data-strike-focus="pin"] {
  --strike-x: 50%;
  --strike-y: 50%;
}

.workpiece[data-strike-focus="right"] {
  --strike-x: 75%;
  --strike-y: 48%;
}

.workpiece[data-workpiece-variant="rough"] .workpiece-art {
  filter: saturate(0.88) contrast(0.92);
}

.workpiece[data-workpiece-variant="steady"] .workpiece-art,
.workpiece[data-workpiece-variant="fine"] .workpiece-art {
  filter: saturate(1.05) contrast(1.04);
}

.forge-ritual[data-heat-band="cold"] .iron-stage {
  background:
    radial-gradient(ellipse at 52% 68%, rgba(151, 61, 19, 0.1), transparent 36%),
    radial-gradient(ellipse at 50% 82%, rgba(10, 5, 3, 0.42), transparent 58%);
}

.forge-ritual[data-heat-band="ready"] .iron-stage {
  box-shadow:
    inset 0 36px 90px rgba(255, 168, 69, 0.1),
    inset 0 -40px 80px rgba(0, 0, 0, 0.55),
    0 20px 44px rgba(0, 0, 0, 0.22);
}

.forge-ritual[data-heat-band="hot"] .iron-stage {
  background:
    radial-gradient(ellipse at 50% 58%, rgba(255, 170, 73, 0.38), transparent 50%),
    radial-gradient(ellipse at 55% 82%, rgba(255, 85, 18, 0.3), transparent 48%),
    radial-gradient(ellipse at 50% 18%, rgba(255, 207, 130, 0.1), transparent 42%);
  box-shadow:
    inset 0 28px 100px rgba(255, 190, 99, 0.18),
    inset 0 -36px 70px rgba(0, 0, 0, 0.42),
    0 0 52px rgba(255, 109, 31, 0.18);
}

.forge-ritual[data-heat-band="hot"] .workpiece-art {
  filter: saturate(1.18) contrast(0.9) blur(0.7px);
}

.heat-read {
  display: grid;
  gap: 6px;
}

.heat-read p {
  min-height: 0;
  margin: 0;
  color: rgba(255, 235, 199, 0.82);
  font-size: 0.92rem;
  line-height: 1.3;
}

.hammer-zones {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 0;
}

.strike-zone,
.ritual-button {
  min-height: 38px;
  border: 1px solid rgba(255, 226, 171, 0.18);
  color: #f5ddb2;
  background: rgba(24, 12, 8, 0.54);
  cursor: pointer;
}

.strike-zone {
  min-height: 38px;
  padding: 6px 8px;
  font-size: 0.76rem;
  line-height: 1.12;
  text-align: left;
}

.strike-zone strong,
.strike-zone span {
  display: block;
}

.strike-zone strong {
  margin-bottom: 4px;
  font-size: 0.78rem;
}

.strike-zone span {
  color: rgba(255, 235, 199, 0.64);
  font-size: 0.68rem;
}

.strike-zone.is-complete {
  color: #2f2016;
  background: rgba(237, 201, 121, 0.78);
  border-color: rgba(255, 235, 176, 0.5);
  opacity: 1;
}

.strike-zone.is-complete span,
.strike-zone.is-complete strong {
  color: #2f2016;
}

.process-feedback {
  min-height: 52px;
  margin: 0;
  padding: 7px 10px;
  color: rgba(255, 235, 199, 0.86);
  background: rgba(13, 7, 5, 0.42);
  border: 1px solid rgba(255, 226, 171, 0.12);
  font-size: 0.84rem;
  line-height: 1.24;
}

.strike-zone:hover:not(:disabled),
.strike-zone:focus-visible:not(:disabled),
.ritual-button:hover:not(:disabled),
.ritual-button:focus-visible:not(:disabled) {
  color: #2f2016;
  background: #edc979;
  outline: none;
}

.strike-zone:disabled,
.ritual-button:disabled {
  cursor: default;
  opacity: 0.45;
}

.forge-actions {
  display: grid;
  grid-column: 2;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  justify-content: center;
  margin-top: 0;
}

.ritual-button {
  min-width: 0;
  min-height: 34px;
  padding: 0 10px;
  font-size: 0.82rem;
  line-height: 1.08;
}

.forge-sandbox {
  display: grid;
  grid-template-columns: minmax(560px, 1fr) minmax(230px, 300px);
  gap: clamp(14px, 2vw, 24px);
  align-items: stretch;
  margin-top: 14px;
}

.forge-fire {
  --forge-heat: 0.54;
  --fire-intensity: 0.54;
  --fire-stability: 0.76;
  --forge-instability: 0.24;
  --forge-breath: 5.4s;
  --forge-flicker: 1.6s;
  --forge-variance: 0.18;
  position: relative;
  min-height: clamp(390px, 58vh, 560px);
  isolation: isolate;
}

.forge-glow-layer {
  position: absolute;
  inset: 13% 5% -8%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 66%, rgba(255, 192, 85, calc(0.16 + var(--forge-heat) * 0.46)), transparent 43%),
    radial-gradient(ellipse at 52% 82%, rgba(255, 91, 25, calc(var(--forge-heat) * 0.38)), transparent 56%);
  filter: blur(calc(26px + var(--forge-heat) * 34px));
  opacity: calc(0.18 + var(--forge-heat) * 0.82);
  mix-blend-mode: screen;
  animation: forgeGlowBreath var(--forge-breath) ease-in-out infinite;
}

.forge-mouth {
  position: absolute;
  inset: 2% 0 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 80%, rgba(97, 49, 24, 0.48), transparent 48%),
    linear-gradient(180deg, rgba(9, 9, 8, 0.94), rgba(33, 19, 13, 0.98) 62%, rgba(19, 10, 7, 0.98));
  border: 16px solid rgba(62, 52, 43, 0.96);
  border-bottom-width: 24px;
  border-radius: 46% 46% 7px 7px / 20% 20% 7px 7px;
  box-shadow:
    inset 0 24px 46px rgba(0, 0, 0, 0.74),
    inset 0 -18px 40px rgba(255, 92, 26, calc(var(--forge-heat) * 0.18)),
    0 22px 42px rgba(0, 0, 0, 0.36);
}

.forge-mouth::before {
  content: "";
  position: absolute;
  inset: -16px;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.42), transparent 18% 82%, rgba(0, 0, 0, 0.42)),
    repeating-linear-gradient(90deg, rgba(255, 231, 174, 0.08) 0 1px, transparent 1px 9%);
  mix-blend-mode: soft-light;
}

.forge-shadow-mask {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.62), transparent 15% 84%, rgba(0, 0, 0, 0.62)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.6), transparent 22% 70%, rgba(0, 0, 0, 0.28));
}

.forge-layer {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 11%;
  pointer-events: none;
}

.forge-layer span {
  position: absolute;
  left: var(--x);
  bottom: 0;
  width: var(--w);
  height: var(--h);
  transform-origin: 50% 100%;
  opacity: var(--o);
  filter: blur(var(--blur));
  animation-duration: var(--forge-breath);
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.forge-coal-layer {
  z-index: 2;
  height: 25%;
  background:
    radial-gradient(ellipse at 50% 82%, rgba(0, 0, 0, 0.62), transparent 68%),
    radial-gradient(ellipse at 50% 70%, rgba(255, 65, 21, calc(var(--forge-heat) * 0.58)), transparent 56%);
}

.forge-coal-layer span {
  --blur: 0;
  --o: calc(0.58 + var(--forge-heat) * 0.36);
  border-radius: 52% 48% 42% 58%;
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 138, 39, calc(var(--forge-heat) * 0.92)), transparent 26%),
    linear-gradient(180deg, #392016, #120c09 70%);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.58), 0 0 calc(var(--forge-heat) * 18px) rgba(255, 82, 21, 0.56);
  animation-name: coalPulse;
}

.forge-coal-layer span:nth-child(1) { --x: 5%; --w: 18%; --h: 44%; animation-delay: -0.8s; }
.forge-coal-layer span:nth-child(2) { --x: 21%; --w: 24%; --h: 56%; animation-delay: -2.7s; }
.forge-coal-layer span:nth-child(3) { --x: 42%; --w: 20%; --h: 49%; animation-delay: -1.9s; }
.forge-coal-layer span:nth-child(4) { --x: 57%; --w: 26%; --h: 58%; animation-delay: -3.6s; }
.forge-coal-layer span:nth-child(5) { --x: 78%; --w: 16%; --h: 42%; animation-delay: -1.2s; }

.forge-red-core-layer {
  z-index: 3;
  height: calc(18% + var(--forge-heat) * 24%);
  opacity: calc(0.26 + var(--forge-heat) * 0.72);
  animation: redCoreRoll calc(var(--forge-breath) * 1.18) ease-in-out infinite;
}

.forge-red-core-layer span {
  --blur: calc(6px + var(--forge-instability) * 4px);
  --o: calc(0.42 + var(--forge-heat) * 0.46);
  border-radius: 56% 44% 46% 54% / 78% 82% 18% 18%;
  background:
    radial-gradient(ellipse at 52% 34%, rgba(255, 79, 25, 0.95), transparent 42%),
    linear-gradient(180deg, rgba(168, 37, 19, 0.92), rgba(75, 18, 12, 0.18));
  animation-name: flameLean;
}

.forge-red-core-layer span:nth-child(1) { --x: 12%; --w: 30%; --h: 82%; animation-delay: -1.7s; }
.forge-red-core-layer span:nth-child(2) { --x: 34%; --w: 34%; --h: 100%; animation-delay: -3.2s; }
.forge-red-core-layer span:nth-child(3) { --x: 60%; --w: 27%; --h: 78%; animation-delay: -0.9s; }

.forge-orange-layer {
  z-index: 4;
  height: calc(24% + var(--forge-heat) * 45%);
  opacity: calc(0.18 + var(--forge-heat) * 0.84);
}

.forge-orange-layer span {
  --blur: calc(2px + var(--forge-instability) * 3px);
  --o: calc(0.34 + var(--forge-heat) * 0.58);
  border-radius: 48% 52% 45% 55% / 82% 86% 14% 14%;
  background:
    radial-gradient(ellipse at 50% 26%, rgba(255, 181, 49, 0.88), transparent 32%),
    linear-gradient(180deg, rgba(238, 91, 20, 0.96), rgba(146, 37, 15, 0.18));
  animation-name: flameBreathe;
}

.forge-orange-layer span:nth-child(1) { --x: 12%; --w: 22%; --h: 70%; animation-delay: -1.1s; }
.forge-orange-layer span:nth-child(2) { --x: 29%; --w: 28%; --h: 95%; animation-delay: -2.9s; }
.forge-orange-layer span:nth-child(3) { --x: 49%; --w: 24%; --h: 86%; animation-delay: -0.4s; }
.forge-orange-layer span:nth-child(4) { --x: 66%; --w: 18%; --h: 64%; animation-delay: -3.8s; }

.forge-yellow-layer {
  z-index: 5;
  height: calc(12% + var(--forge-heat) * 42%);
  opacity: calc(var(--forge-heat) * 0.95);
}

.forge-yellow-layer span {
  --blur: calc(1px + var(--forge-instability) * 1.2px);
  --o: calc(0.18 + var(--forge-heat) * 0.72);
  border-radius: 42% 58% 49% 51% / 88% 84% 16% 12%;
  background:
    radial-gradient(ellipse at 50% 24%, rgba(255, 250, 186, 0.95), transparent 28%),
    linear-gradient(180deg, rgba(255, 202, 62, 0.96), rgba(255, 116, 25, 0.14));
  animation-name: yellowLick;
  animation-duration: var(--forge-flicker);
}

.forge-yellow-layer span:nth-child(1) { --x: 26%; --w: 15%; --h: 72%; animation-delay: -0.6s; }
.forge-yellow-layer span:nth-child(2) { --x: 44%; --w: 18%; --h: 96%; animation-delay: -1.4s; }
.forge-yellow-layer span:nth-child(3) { --x: 63%; --w: 14%; --h: 62%; animation-delay: -0.2s; }

.forge-spark-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.forge-debug-controls {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 14px;
  background: rgba(15, 9, 7, 0.52);
  border: 1px solid rgba(255, 226, 171, 0.14);
}

.forge-control {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 10px;
  align-items: center;
  color: rgba(255, 236, 202, 0.86);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.forge-control input {
  grid-column: 1 / -1;
  width: 100%;
  accent-color: #f3b13f;
}

.forge-control output {
  color: #f6cf7b;
  font-variant-numeric: tabular-nums;
}

.forge-read {
  margin: 2px 0 0;
  color: rgba(255, 235, 199, 0.84);
  font-size: 0.92rem;
  line-height: 1.38;
}

@keyframes forgeGlowBreath {
  50% {
    opacity: calc(0.1 + var(--forge-heat) * 0.9);
    transform: scale(calc(1.02 + var(--forge-heat) * 0.04));
  }
}

@keyframes coalPulse {
  50% {
    filter: brightness(calc(0.86 + var(--forge-heat) * 0.72));
    transform: translateY(1px) scale(calc(0.98 + var(--forge-heat) * 0.04));
  }
}

@keyframes redCoreRoll {
  50% {
    transform: translateX(calc((0.5 - var(--fire-stability)) * 18px)) scaleY(calc(0.96 + var(--forge-heat) * 0.08));
  }
}

@keyframes flameLean {
  50% {
    opacity: calc(var(--o) - var(--forge-instability) * 0.12);
    transform: translateX(calc((0.5 - var(--fire-stability)) * 26px)) skewX(calc((var(--forge-instability) - 0.2) * 8deg)) scaleY(calc(0.9 + var(--forge-heat) * 0.22));
  }
}

@keyframes flameBreathe {
  35% {
    transform: translateX(calc(var(--forge-instability) * -12px)) scaleY(calc(0.96 + var(--forge-heat) * 0.18 + var(--forge-instability) * 0.16));
  }
  68% {
    transform: translateX(calc(var(--forge-instability) * 14px)) scaleY(calc(0.9 + var(--forge-heat) * 0.14));
  }
}

@keyframes yellowLick {
  44% {
    opacity: calc(var(--o) + var(--forge-heat) * 0.22);
    transform: translateX(calc((0.5 - var(--fire-stability)) * 20px)) scaleY(calc(0.82 + var(--forge-heat) * 0.42 + var(--forge-instability) * 0.28));
  }
}

[data-phase="prepare"] .iron-stage {
  min-height: clamp(350px, 48vh, 430px);
}

[data-phase="prepare"] .workpiece {
  opacity: 0.34;
  filter: grayscale(0.35) drop-shadow(0 12px 18px rgba(0, 0, 0, 0.34));
}

.forge-ritual.just-struck .workpiece {
  animation: strikeFlash 180ms ease;
}

.forge-ritual.just-struck .workpiece-strike-flash {
  animation: strikeGlow 220ms ease;
}

.day-thread {
  position: absolute;
  z-index: 6;
  right: clamp(16px, 3vw, 46px);
  top: clamp(16px, 3vw, 44px);
  width: min(310px, 34vw);
  padding: 11px 14px 12px;
  color: #f5dfb9;
  background:
    linear-gradient(110deg, rgba(48, 27, 18, 0.88), rgba(91, 51, 29, 0.72));
  border: 1px solid rgba(255, 226, 171, 0.22);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.36), inset 0 0 0 1px rgba(255, 239, 190, 0.05);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

.day-thread span {
  display: block;
  margin-bottom: 5px;
  color: var(--gold);
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.day-thread p {
  margin: 0;
  font-size: clamp(0.84rem, 0.96vw, 0.98rem);
  line-height: 1.34;
}

.memory-token {
  position: absolute;
  z-index: 5;
  left: 19%;
  top: 36%;
  opacity: 0;
  pointer-events: none;
  transform: rotate(-2deg) translateY(8px);
  transition: opacity 500ms ease, transform 500ms ease;
}

.memory-token span {
  display: block;
  max-width: 150px;
  padding: 7px 10px;
  color: #3c2416;
  background: rgba(235, 207, 152, 0.92);
  border: 1px solid rgba(76, 43, 24, 0.22);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.26);
  font-size: 0.74rem;
  line-height: 1.18;
}

.workshop-evolution {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.evolution-prop {
  position: absolute;
  opacity: 0;
  transition: opacity 600ms ease, transform 600ms ease;
}

.evolution-threshold {
  left: 68%;
  top: 62%;
  width: clamp(78px, 8vw, 132px);
  height: clamp(16px, 1.8vw, 26px);
  background: linear-gradient(90deg, rgba(231, 190, 117, 0.7), rgba(89, 49, 28, 0.62));
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
  transform: rotate(-2deg) translateY(8px);
}

.evolution-hearth {
  left: 37%;
  top: 53%;
  width: clamp(38px, 5vw, 74px);
  height: clamp(38px, 5vw, 74px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 172, 72, 0.42), rgba(120, 55, 28, 0.16) 48%, transparent 70%);
  mix-blend-mode: screen;
  transform: scale(0.85);
}

[data-workshop-stage="settling"] .evolution-prop {
  opacity: 1;
  transform: none;
}

.workshop-memory-rail {
  position: absolute;
  z-index: 6;
  left: clamp(16px, 3vw, 44px);
  top: clamp(164px, 26vh, 236px);
  display: grid;
  gap: 8px;
  width: min(230px, 30vw);
  pointer-events: none;
}

.memory-slot {
  opacity: 0.28;
  padding: 9px 11px;
  color: rgba(255, 235, 199, 0.74);
  background: rgba(43, 24, 16, 0.54);
  border: 1px solid rgba(255, 226, 171, 0.13);
  transform: translateY(6px);
  transition: opacity 420ms ease, transform 420ms ease, background 420ms ease;
}

.memory-slot span {
  display: block;
  color: var(--gold);
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.memory-slot p {
  margin: 4px 0 0;
  font-size: 0.78rem;
  line-height: 1.25;
}

.memory-slot.is-recorded {
  opacity: 1;
  background: rgba(83, 45, 27, 0.76);
  transform: translateY(0);
}

[data-day-step="returned"] .memory-token,
[data-day-step="journaled"] .memory-token {
  opacity: 1;
  transform: rotate(-2deg) translateY(0);
}

.time-controls {
  position: absolute;
  z-index: 7;
  right: clamp(16px, 3vw, 46px);
  bottom: clamp(14px, 3vw, 34px);
  display: flex;
  gap: 8px;
  padding: 8px;
  background:
    linear-gradient(180deg, rgba(95, 51, 30, 0.78), rgba(31, 16, 11, 0.72));
  border: 1px solid rgba(255, 226, 171, 0.2);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.34), inset 0 0 0 1px rgba(255, 239, 190, 0.05);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

.time-button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(255, 226, 171, 0.14);
  color: #f5ddb2;
  background: rgba(21, 11, 8, 0.36);
  cursor: pointer;
}

.time-button:hover,
.time-button:focus-visible,
.time-button.is-active {
  color: #2f2016;
  background: #edc979;
  outline: none;
}

@keyframes emberPulse {
  0%,
  100% {
    opacity: 0.46;
    transform: scale(0.98);
  }
  50% {
    opacity: 0.72;
    transform: scale(1.05);
  }
}

@keyframes drift {
  to {
    background-position: 80px 120px, -50px 180px;
  }
}

@keyframes emberDrift {
  0%,
  100% {
    opacity: 0;
    transform: translateY(12px) scale(0.7);
  }
  18%,
  72% {
    opacity: 0.82;
  }
  100% {
    transform: translate(10px, -46px) scale(0.35);
  }
}

@keyframes dustFloat {
  0% {
    opacity: 0;
    transform: translate3d(-8px, 10px, 0) scale(0.72);
  }
  25%,
  74% {
    opacity: 0.55;
  }
  100% {
    opacity: 0;
    transform: translate3d(22px, -20px, 0) scale(1);
  }
}

@keyframes atmosphereBreathe {
  0%,
  100% {
    transform: scale(1);
    filter: blur(0);
  }
  50% {
    transform: scale(1.018);
    filter: blur(1.5px);
  }
}

@keyframes slowDrift {
  0% {
    transform: translate3d(-1.5%, 0, 0);
  }
  50% {
    transform: translate3d(1.5%, -0.8%, 0);
  }
  100% {
    transform: translate3d(-1.5%, 0, 0);
  }
}

@keyframes hush {
  50% {
    box-shadow: 0 0 0 10px rgba(241, 180, 88, 0.02), inset 0 0 22px rgba(255, 187, 88, 0.2);
  }
}

@keyframes smithBob {
  0% {
    transform: scaleX(var(--gabriel-facing, 1)) translateY(0) rotate(-0.45deg);
  }
  100% {
    transform: scaleX(var(--gabriel-facing, 1)) translateY(-2.5%) rotate(0.45deg);
  }
}

@keyframes smithStep {
  to {
    background-position: 100% 0;
  }
}

@keyframes strikeFlash {
  50% {
    transform: translateY(2px);
    filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.56)) drop-shadow(0 0 18px rgba(255, 157, 61, 0.36));
  }
}

@keyframes strikeGlow {
  40% {
    opacity: 1;
  }
}

@keyframes smokeWaver {
  50% {
    transform: translate(-46%, -8%) scale(1.08);
  }
}

@keyframes hearthBreath {
  50% {
    opacity: calc(0.22 + var(--forge-heat, 0.08) * 0.74);
    transform: scale(1.04) translateY(-1%);
  }
}

@keyframes forgeShadows {
  50% {
    transform: translateX(calc((1 - var(--fire-stability, 0.5)) * 14px));
    opacity: calc(0.18 + var(--fire-intensity, 0.12) * 0.54);
  }
}

@media (max-width: 760px) {
  body {
    overflow: auto;
  }

  .game-shell {
    min-height: 100dvh;
  }

  .scene-frame {
    width: 100vw;
    height: 100dvh;
  }

  .scene-art {
    object-position: 50% 50%;
  }

  .scene-caption {
    max-width: calc(100vw - 32px);
  }

  .book-gump {
    width: 152vw;
    max-width: 640px;
    top: 49%;
  }

  .book-page {
    top: 24%;
    width: 25%;
  }

  .left-page {
    left: 25%;
  }

  .right-page {
    right: 19%;
  }

  .book-page h2 {
    margin-bottom: 7px;
    font-size: clamp(1rem, 5vw, 1.42rem);
  }

  .book-page h3 {
    margin-bottom: 6px;
    font-size: clamp(0.78rem, 3.8vw, 1rem);
  }

  .book-page p {
    font-size: clamp(0.62rem, 2.85vw, 0.78rem);
    line-height: 1.24;
  }

  .book-page .eyebrow {
    margin-bottom: 6px;
    font-size: 0.56rem;
  }

  .book-tabs {
    left: 7.2%;
    top: 20%;
    gap: 4px;
  }

  .book-tab {
    width: 52px;
    min-height: 30px;
    padding: 0 5px;
    font-size: 0.74rem;
  }

  .close-book {
    width: 32px;
    height: 32px;
  }

  .time-controls {
    left: 12px;
    right: 12px;
    justify-content: center;
  }

  .time-button {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 8px;
    font-size: 0.94rem;
  }

  .room-prompt {
    left: 12px;
    right: 12px;
    bottom: 86px;
    width: auto;
    padding: 10px 12px 11px;
  }

  .room-prompt p {
    font-size: 0.88rem;
  }

  .gabriel {
    width: clamp(72px, 24vw, 108px);
  }

  .day-thread {
    left: 12px;
    right: 12px;
    top: auto;
    bottom: 154px;
    width: auto;
  }

  .memory-token {
    left: 21%;
    top: 43%;
  }

  .book-actions {
    gap: 5px;
    margin-top: 8px;
  }

  .book-action {
    min-height: 30px;
    padding: 5px 7px;
    font-size: 0.66rem;
    line-height: 1.12;
  }

  .forge-ritual {
    width: calc(100vw - 24px);
    top: 49%;
  }

  .forge-panel {
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 16px;
  }

  .forge-heading h2 {
    font-size: 1.6rem;
  }

  .forge-workbench {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 12px;
  }

  .fuel-observation,
  .process-feedback,
  .iron-stage,
  .heat-read,
  .hammer-zones,
  .forge-actions {
    grid-column: 1;
  }

  .fuel-observation {
    padding: 10px;
  }

  .fuel-observation p {
    font-size: 0.84rem;
  }

  .fuel-choices {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .fuel-choice {
    min-height: 0;
    padding: 7px 9px;
  }

  .fuel-choice strong {
    margin-bottom: 2px;
    font-size: 0.84rem;
  }

  .fuel-choice span {
    font-size: 0.72rem;
  }

  .iron-stage {
    min-height: 164px;
  }

  .workpiece {
    width: min(310px, 92%);
  }

  .heat-read p {
    min-height: 0;
    font-size: 0.86rem;
  }

  .hammer-zones {
    gap: 6px;
  }

  .strike-zone {
    min-height: 34px;
    font-size: 0.78rem;
  }

  .forge-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    padding-top: 10px;
    background: linear-gradient(180deg, rgba(39, 20, 13, 0), rgba(39, 20, 13, 0.94) 28%);
  }

  .ritual-button {
    min-width: 0;
    min-height: 34px;
    font-size: 0.74rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}