:root {
  --frame: clamp(16px, 2.6vmin, 36px);
  --frame-bottom: calc(var(--frame) * 2.2);
  --button: calc(var(--frame-bottom) * 0.52);
  --depth: 560;
  /* washi texture bitmaps are painted by main.js */
  --grain: none;
  --fibre: none;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #0c0c10;
}

body { touch-action: none; }

/* ─── The box ───────────────────────────────────────────── */

.stage {
  position: fixed;
  /* tuck the box a few pixels under the mat so tilting never shows a seam */
  inset: calc(var(--frame) - 6px) calc(var(--frame) - 6px) calc(var(--frame-bottom) - 6px);
  overflow: hidden;
  background: #0a0d18;
  opacity: 0;
  transition: opacity 0.8s ease;   /* the sky first; the intro brings the sheets */
}
.stage.is-ready { opacity: 1; }

/* one theme's diorama: its own perspective, so it can fade without flattening the 3D inside */
.layer {
  position: absolute;
  inset: 0;
  transition: opacity 0.6s ease;   /* CONFIG.crossfade in main.js */
}
.layer.is-pending { opacity: 0; visibility: hidden; }
/* the outgoing layer stays opaque underneath while the new one fades in on top,
   so the scene never dims mid-switch; main.js removes it once the fade is done */

.box, .sheet {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.sheet {
  will-change: transform;
  pointer-events: none;
}

.sheet canvas {
  position: absolute;
  overflow: hidden;
}

.wall { position: absolute; overflow: hidden; }

/* warm light through the opening; light.js slides it against the lean */
.wall__glow {
  position: absolute;
  inset: -20%;
  background: radial-gradient(ellipse 45% 40% at 38% 46%, rgba(var(--glow-rgb), var(--glow-a)), rgba(var(--glow-rgb), 0) 70%);
  will-change: transform;
}

.wall canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.wall--back {
  inset: 0;
  transform: translateZ(calc(var(--depth) * -1px));
}

.wall--left, .wall--right {
  top: 0;
  height: 100%;
  width: calc(var(--depth) * 1px);
}

.wall--left {
  left: 0;
  transform-origin: 0 50%;
  transform: rotateY(90deg);
}

.wall--right {
  right: 0;
  transform-origin: 100% 50%;
  transform: rotateY(-90deg);
}

.wall--top, .wall--bottom {
  left: 0;
  width: 100%;
  height: calc(var(--depth) * 1px);
}

.wall--top {
  top: 0;
  transform-origin: 50% 0;
  transform: rotateX(-90deg);
}

.wall--bottom {
  bottom: 0;
  transform-origin: 50% 100%;
  transform: rotateX(90deg);
}

/* ─── The frame ─────────────────────────────────────────── */

.frame {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  padding: var(--frame) var(--frame) var(--frame-bottom);
  background:
    var(--grain), var(--fibre),
    linear-gradient(165deg, #25232b 0%, #16151b 55%, #1d1b21 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* the mat's bevelled edge, and the shade it throws into the box */
.opening {
  position: fixed;
  inset: var(--frame) var(--frame) var(--frame-bottom);
  z-index: 3;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.7),
    inset 0 0 0 3px #cbb991,
    inset 1px 1px 0 3px #e9dcba,
    inset 0 0 0 4px rgba(0, 0, 0, 0.45),
    inset 0 14px 22px -6px rgba(0, 0, 0, 0.6),
    inset 10px 0 20px -8px rgba(0, 0, 0, 0.35),
    inset 0 0 70px rgba(0, 0, 0, 0.3);
}

.caption {
  position: absolute;
  left: calc(var(--frame) + 4px);
  right: calc(var(--frame) + 2 * var(--button) + 22px);   /* leave room for the theme and full-screen buttons */
  bottom: 0;
  height: var(--frame-bottom);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2vmin;
  font: 500 clamp(9px, 1.2vmin, 13px)/1 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(222, 204, 165, 0.6);
  white-space: nowrap;
}

.caption__jp {
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
  font-family: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  font-weight: 600;
  letter-spacing: 0.4em;
}

.caption__title { font-weight: 600; color: rgba(236, 222, 190, 0.78); }

.seal {
  display: inline-grid;
  place-items: center;
  width: 2.1em;
  height: 2.1em;
  letter-spacing: 0;
  font-size: 1.05em;
  color: #f3e2c4;
  background: #a8342a;
  border-radius: 3px;
  transform: rotate(-4deg);
  box-shadow: inset 0 0 0 2px rgba(243, 226, 196, 0.28), 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ─── Tilt permission (iOS) ─────────────────────────────── */

.tilt {
  position: fixed;
  z-index: 4;
  left: 50%;
  bottom: calc(var(--frame-bottom) + 14px);
  transform: translateX(-50%);
  padding: 0.7em 1.3em;
  border: 1px solid rgba(222, 204, 165, 0.4);
  border-radius: 999px;
  background: rgba(14, 14, 20, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #eedfbd;
  font: 600 13px/1 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: pointer;
}
.tilt[hidden] { display: none; }

/* ─── Theme and full screen buttons ─────────────────────── */

.fullscreen { right: var(--frame); }
.theme { right: calc(var(--frame) + var(--button) + 8px); }

.theme, .fullscreen {
  position: fixed;
  z-index: 4;
  bottom: calc((var(--frame-bottom) - var(--button)) / 2);
  width: var(--button);
  height: var(--button);
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(222, 204, 165, 0.22);
  border-radius: 3px;
  background: transparent;
  color: rgba(222, 204, 165, 0.6);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.fullscreen[hidden] { display: none; }
/* with no full-screen button (iPhone), the theme button takes its corner */
.theme:has(~ .fullscreen[hidden]) { right: var(--frame); }

.theme:hover, .fullscreen:hover {
  color: #eedfbd;
  border-color: rgba(222, 204, 165, 0.55);
  background-color: rgba(222, 204, 165, 0.06);
}

.theme:focus-visible, .fullscreen:focus-visible {
  outline: 2px solid #cbb991;
  outline-offset: 2px;
}

.theme svg, .fullscreen svg {
  width: 62%;
  height: 62%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fullscreen__exit,
.is-fullscreen .fullscreen__enter { display: none; }
.is-fullscreen .fullscreen__exit { display: inline; }

.theme[aria-busy="true"] { cursor: progress; opacity: 0.55; }
.theme__wave,
.theme[aria-pressed="true"] .theme__sun { display: none; }
.theme[aria-pressed="true"] .theme__wave { display: inline; }

@media (max-width: 720px) {
  .caption__note, .caption__jp { display: none; }
  .caption { justify-content: center; }
}