/* The Vault reveal skin (owner 2026-10-17). Layout in container units of the scene (4:5, like the other game art), so the same
   scene scales from a 320 px phone to a desktop board. 3D: one perspective on the stage, the round door is a stack of discs
   (real thickness when it swings), hinged on its left edge. Motion only on transform/opacity; reduced motion shows the result. */
.tmcrv-safevault .tmcrv-board { padding: 0; background: none; border: 0; box-shadow: none; overflow: visible; }
.tmsv-scene {
  --gold: #f7c948; --gold-hi: #fff3c4; --amber: #ffcf5a; --steel: #1b2029; --steel-hi: #48505d;
  --tilt-x: 0deg; --tilt-y: 0deg; --door-ms: 950ms; --dial-ms: 150ms;
  position: relative; width: 100%; aspect-ratio: 4 / 5; container-type: inline-size; overflow: hidden;
  border-radius: 18px; background: #07090d var(--bg) center / cover no-repeat; isolation: isolate;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.tmsv-scene::after { /* vignette over the room */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 50% 52%, transparent 55%, rgba(3, 4, 8, .62) 100%);
}

/* code readout */
.tmsv-display { position: absolute; z-index: 3; top: 82cqw; left: 50%; width: 66cqw; translate: -50% 0; }
.tmsv-display-frame { display: block; width: 100%; height: auto; filter: drop-shadow(0 1.2cqw 1.6cqw rgba(0, 0, 0, .6)); }
.tmsv-digits {
  position: absolute; inset: 24% 9.5%; display: grid; grid-template-columns: repeat(var(--cells, 6), 1fr); align-items: center;
  font: 900 8.4cqw/1 "TMC Exo", ui-monospace, "SFMono-Regular", Menlo, monospace; font-variant-numeric: tabular-nums;
  text-align: center;
}
.tmsv-digit { color: rgba(255, 207, 90, .16); transition: color .12s, text-shadow .12s; }
.tmsv-digit.is-rolling { color: rgba(255, 207, 90, .55); filter: blur(.22cqw); }
.tmsv-digit.is-lit { color: var(--amber); text-shadow: 0 0 1.2cqw rgba(255, 190, 60, .9), 0 0 3cqw rgba(255, 160, 30, .55); }

/* the vault */
/* the door sits in the ring of the room art: centre at 35.7% of the height, 66% of the width across */
.tmsv-stage { position: absolute; z-index: 2; top: 12.6cqw; left: 18cqw; width: 64cqw; aspect-ratio: 1; perspective: 1300px; transition: scale .7s cubic-bezier(.3, .8, .3, 1); }
/* the camera leans in while the code is dialled and holds its breath once every lock is open */
.tmsv-scene.is-dialing .tmsv-stage { scale: 1.035; }
.tmsv-scene.is-armed .tmsv-stage { scale: 1.06; }
.tmsv-vault {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); transition: transform .25s ease-out;
}
.tmsv-interior {
  position: absolute; inset: 2cqw; border-radius: 50%; overflow: hidden; transform: translateZ(-26px);
  background: radial-gradient(circle at 50% 40%, #16233d, #04070e 75%); box-shadow: inset 0 0 6cqw rgba(0, 0, 0, .9);
}
.tmsv-interior-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: opacity .5s; }
.tmsv-vault:has(.tmsv-door.is-open) .tmsv-interior-img { opacity: 1; }
.tmsv-spill { /* warm light pouring out of the open doorway */
  position: absolute; inset: -12cqw; border-radius: 50%; transform: translateZ(-10px); pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(255, 214, 120, .55) 0, rgba(255, 180, 60, .18) 38%, transparent 64%);
  transition: opacity .6s;
}
.tmsv-vault:has(.tmsv-door.is-open) .tmsv-spill { opacity: 1; }
.tmsv-frame { /* the steel doorway ring the door seats into */
  position: absolute; inset: -2.4cqw; border-radius: 50%; pointer-events: none; transform: translateZ(-2px);
  background: radial-gradient(circle, transparent 0 63%, #0b0d12 63.5%, #3c434f 66%, #12151b 70%, #59616e 71.5%, #0d1015 74%, transparent 74.5%);
  filter: drop-shadow(0 2cqw 2.6cqw rgba(0, 0, 0, .7));
}
.tmsv-rays {
  position: absolute; inset: -20%; opacity: 0; transition: opacity .5s;
  background: repeating-conic-gradient(from 0deg, rgba(255, 226, 140, 0) 0 9deg, rgba(255, 226, 140, .2) 9deg 15deg);
  -webkit-mask-image: radial-gradient(circle, #000 0 18%, transparent 60%); mask-image: radial-gradient(circle, #000 0 18%, transparent 60%);
}
.tmsv-scene.is-win .tmsv-rays { opacity: .65; animation: tmsv-spin 9s linear infinite; }
.tmsv-scene.is-big .tmsv-rays { opacity: 1; }

/* the door: a stack of discs hinged on the left edge */
.tmsv-door {
  position: absolute; inset: 0; border-radius: 50%; cursor: pointer; transform-style: preserve-3d;
  transform-origin: 0% 50%; transform: rotateY(0deg);
  transition: transform var(--door-ms) cubic-bezier(.55, 0, .25, 1);
}
.tmsv-door.is-open { transform: rotateY(-116deg); }
/* Owner 2026-10-18: motion has weight. The door is a heavy mass: opening it starts slowly, gathers speed and glides to its stop,
   which it meets with a small rebound; closing it, it falls shut under its own weight, slams the frame and rebounds a little,
   losing energy each time. A browser without linear() keeps the heavy ease above. */
@supports (transition-timing-function: linear(0, 1)) {
  .tmsv-door { transition-timing-function: linear(0, 0.0005, 0.002, 0.0048, 0.009, 0.0149, 0.0225, 0.032, 0.0437, 0.0577, 0.0743, 0.0934, 0.1155, 0.1405, 0.1688, 0.2004, 0.2356, 0.2745, 0.3173, 0.3643, 0.4155, 0.4711, 0.5314, 0.5964, 0.6665, 0.7417, 0.8222, 0.9083, 1, 0.9633, 0.958, 0.9727, 0.9925, 0.993, 0.9878, 0.99, 0.9954, 0.9995, 0.9969, 0.9967, 1); }
  .tmsv-door.is-open { transition-timing-function: linear(0, 0.0004, 0.0028, 0.0089, 0.0199, 0.0368, 0.06, 0.0898, 0.126, 0.1685, 0.2166, 0.2697, 0.3268, 0.3871, 0.4494, 0.5127, 0.5757, 0.6373, 0.6965, 0.7521, 0.8033, 0.8492, 0.8892, 0.9229, 0.95, 0.9707, 0.9851, 0.9941, 0.9985, 0.9999, 0.9914, 0.9822, 0.9856, 0.9937, 0.9997, 0.9966, 0.9966, 0.9981, 0.9997, 0.9994, 1); }
}
.tmsv-door-slice {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 45% 40%, var(--steel-hi), var(--steel) 70%);
  transform: translateZ(calc((var(--z) - 2) * 5px));
}
.tmsv-door-back {
  position: absolute; inset: 0; border-radius: 50%; transform: translateZ(-12px) rotateY(180deg);
  background: radial-gradient(circle at 50% 45%, #2a303a, #0c0e12 72%); box-shadow: inset 0 0 0 1.6cqw #39404b;
}
.tmsv-door-face { position: absolute; inset: 0; transform: translateZ(12px); border-radius: 50%; overflow: hidden; }
.tmsv-door-face img { display: block; width: 100%; height: 100%; object-fit: contain; }
.tmsv-door-face::after { /* a slow glint across the steel */
  content: ""; position: absolute; inset: -10%; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 245, 210, .22) 50%, transparent 60%);
  transform: translateX(-80%); animation: tmsv-glint 7s ease-in-out infinite;
}
/* six locking bolts round the rim, under the door face: shot out into the doorway ring when locked, slid home one by one */
.tmsv-bolts { position: absolute; inset: 0; transform: translateZ(6px); pointer-events: none; }
.tmsv-bolt {
  position: absolute; left: 50%; top: 50%; width: 8.5cqw; height: 2.8cqw; margin-top: -1.4cqw; border-radius: 1.4cqw;
  transform-origin: 0 50%; transform: rotate(var(--a)) translateX(28.6cqw);
  background: linear-gradient(180deg, #e3e7ec 0%, #8b939e 30%, #3a4049 62%, #1a1d22 100%);
  box-shadow: inset -1.2cqw 0 0 #c99b2a, inset -1.6cqw 0 0 #6b4c0c, 0 .5cqw 1cqw rgba(0, 0, 0, .6);
  transition: transform .26s cubic-bezier(.3, 1.35, .4, 1);
}
.tmsv-bolt.is-out { transform: rotate(var(--a)) translateX(21.5cqw); }
/* a lamp per bolt, ringed round the dial: red while locked, green once its bolt is home */
.tmsv-lamps { position: absolute; left: 50%; top: 47.8%; width: 0; height: 0; transform: translateZ(24px); pointer-events: none; }
.tmsv-lamp {
  position: absolute; left: -1.1cqw; top: -1.1cqw; width: 2.2cqw; aspect-ratio: 1; border-radius: 50%;
  transform: rotate(var(--a)) translateX(10.9cqw);
  background: radial-gradient(circle at 40% 35%, #ffe2a3, #e08a12 58%, #5a3205);
  box-shadow: 0 0 .7cqw rgba(255, 170, 40, .55), inset 0 0 0 .25cqw rgba(30, 18, 5, .5);
  transition: background .18s, box-shadow .18s;
}
.tmsv-lamp.is-on {
  background: radial-gradient(circle at 40% 35%, #d8ffe5, #27c96f 58%, #0a4a26);
  box-shadow: 0 0 1.6cqw rgba(70, 255, 150, .9), inset 0 0 0 .25cqw rgba(5, 30, 15, .5);
}
.tmsv-scene.is-armed .tmsv-lamp.is-on { animation: tmsv-lamp-pulse .42s ease-in-out infinite alternate; }
/* light running round the door seal as it is unsealed */
.tmsv-seam {
  position: absolute; inset: -.8cqw; border-radius: 50%; pointer-events: none; transform: translateZ(1px); opacity: 0;
  background: conic-gradient(from var(--seam, 0deg), transparent 0 70%, var(--seam-c, rgba(225, 240, 255, .95)) 82%, transparent 92%);
  transition: filter .3s;
  -webkit-mask: radial-gradient(circle, transparent 0 69%, #000 70% 72.5%, transparent 73.5%);
  mask: radial-gradient(circle, transparent 0 69%, #000 70% 72.5%, transparent 73.5%);
  filter: drop-shadow(0 0 1.6cqw rgba(255, 200, 90, .9));
}
.tmsv-vault:has(.tmsv-door.is-unsealing) .tmsv-seam { opacity: 1; animation: tmsv-seam .9s linear forwards; }
.tmsv-vault:has(.tmsv-door.is-sealbreak) .tmsv-seam { --seam-c: rgba(255, 214, 110, 1); filter: drop-shadow(0 0 2.6cqw rgba(255, 190, 70, 1)); }
/* the door art has a large central well: the spoke wheel fills it and the dial sits on the wheel's hub */
.tmsv-dial {
  position: absolute; left: 50%; top: 47.8%; width: 15.5cqw; aspect-ratio: 1; transform: translate(-50%, -50%) translateZ(20px); z-index: 2;
  filter: drop-shadow(0 .8cqw 1.2cqw rgba(0, 0, 0, .65));
}
.tmsv-dial img {
  display: block; width: 100%; height: 100%; rotate: var(--dial, 0deg);
  transition: rotate var(--dial-ms) cubic-bezier(.5, 0, .2, 1); /* a heavy dial: it picks up speed, then settles */
}
.tmsv-wheel {
  position: absolute; left: 50%; top: 47.8%; width: 27cqw; aspect-ratio: 1; transform: translate(-50%, -50%) translateZ(14px);
  filter: drop-shadow(0 .8cqw 1.2cqw rgba(0, 0, 0, .6));
}
.tmsv-wheel img { display: block; width: 100%; height: 100%; rotate: var(--wheel, 0deg); transition: rotate var(--wheel-ms, .45s) cubic-bezier(.5, 0, .2, 1); }

/* what is inside */
.tmsv-prize {
  position: absolute; left: 50%; top: 50%; width: 40cqw; display: grid; justify-items: center; gap: .6cqw;
  translate: -50% -42%; scale: .55; opacity: 0; transition: opacity .25s, scale .55s cubic-bezier(.2, 1.4, .4, 1), translate .55s cubic-bezier(.2, 1.4, .4, 1);
}
.tmsv-prize.is-shown { opacity: 1; scale: 1; translate: -50% -55%; }
.tmsv-prize img { width: 24cqw; height: auto; filter: drop-shadow(0 1.4cqw 2cqw rgba(0, 0, 0, .7)) drop-shadow(0 0 2.6cqw rgba(255, 200, 80, .45)); }
.tmsv-prize b {
  font: 900 6.6cqw/1 "TMC Exo", system-ui, sans-serif; letter-spacing: .02em; color: var(--gold-hi);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, #b8860b); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 .4cqw 0 #3a2604) drop-shadow(0 0 1.6cqw rgba(247, 201, 72, .6));
  max-width: 38cqw; overflow-wrap: anywhere; text-align: center;
}
.tmsv-prize.is-named b { font-size: 4.6cqw; letter-spacing: .04em; text-transform: uppercase; }
.tmsv-prize span { font: 800 2.4cqw/1.1 "TMC Exo", system-ui, sans-serif; letter-spacing: .2em; color: #e9eef9; text-align: center; max-width: 38cqw; }
.tmsv-plate {
  position: absolute; left: 50%; top: 56%; width: 38cqw; aspect-ratio: 1024 / 320; display: grid; place-items: center;
  background: var(--plate) center / contain no-repeat; translate: -50% 30%; opacity: 0; transition: opacity .3s, translate .45s cubic-bezier(.2, .9, .3, 1);
}
.tmsv-plate.is-shown { opacity: 1; translate: -50% 0; }
.tmsv-plate b {
  font: 900 4.6cqw/1 "TMC Exo", system-ui, sans-serif; letter-spacing: .14em; color: #3b2a06;
  text-shadow: 0 .2cqw 0 rgba(255, 240, 190, .55), 0 -.15cqw 0 rgba(0, 0, 0, .35);
}
.tmsv-sparks { position: absolute; left: 50%; top: 46%; width: 0; height: 0; pointer-events: none; }
.tmsv-sparks i {
  position: absolute; left: -1.4cqw; top: -1.4cqw; width: 2.8cqw; aspect-ratio: 1; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #fff7d6 0, #ffd45f 40%, transparent 70%);
  animation: tmsv-spark .95s cubic-bezier(.15, .7, .3, 1) var(--d, 0ms) forwards;
}
.tmsv-scene.is-big .tmsv-stage { animation: tmsv-dolly 1.8s cubic-bezier(.2, .8, .3, 1); }
.tmsv-scene.is-big .tmsv-frame { filter: drop-shadow(0 0 3cqw rgba(255, 200, 70, .55)); }

@keyframes tmsv-spin { to { rotate: 360deg; } }
@property --seam { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes tmsv-seam { from { --seam: 0deg; } to { --seam: 720deg; } }
@keyframes tmsv-lamp-pulse { from { filter: brightness(1); } to { filter: brightness(1.6); } }
@keyframes tmsv-glint { 0%, 70% { transform: translateX(-80%); } 100% { transform: translateX(80%); } }
@keyframes tmsv-spark {
  0% { opacity: 0; transform: translate(0, 0) scale(.4); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1); }
}
@keyframes tmsv-dolly { 0% { scale: 1; } 35% { scale: 1.07; } 100% { scale: 1.03; } }

@media (prefers-reduced-motion: reduce) {
  .tmsv-door, .tmsv-dial img, .tmsv-wheel img, .tmsv-bolt, .tmsv-lamp, .tmsv-prize, .tmsv-plate, .tmsv-vault, .tmsv-stage { transition: none; }
  .tmsv-scene.is-armed .tmsv-lamp.is-on, .tmsv-vault:has(.tmsv-door.is-unsealing) .tmsv-seam { animation: none; }
  .tmsv-door-face::after, .tmsv-scene.is-win .tmsv-rays, .tmsv-scene.is-big .tmsv-stage, .tmsv-sparks i { animation: none; }
}

/* laser grid in front of the door (owner 2026-10-17 story): six red beams, one switched off with each bolt */
.tmsv-lasers { position: absolute; inset: -6cqw; transform: translateZ(40px); pointer-events: none; }
.tmsv-laser {
  position: absolute; left: 0; right: 0; top: calc(18% + var(--i) * 12.5%); height: .5cqw; border-radius: .5cqw;
  background: linear-gradient(90deg, transparent, rgba(255, 40, 40, .9) 12%, #ff6b5a 50%, rgba(255, 40, 40, .9) 88%, transparent);
  box-shadow: 0 0 1.2cqw rgba(255, 30, 30, .85), 0 0 3cqw rgba(255, 30, 30, .35);
  rotate: calc((var(--i) - 2.5) * 2.4deg); transform-origin: 50% 50%;
  opacity: .9; transition: opacity .18s;
}
.tmsv-laser.is-off { opacity: 0; animation: tmsv-laser-off .22s steps(2, end); }
.tmsv-vault:has(.tmsv-door.is-open) .tmsv-laser { opacity: 0; }
/* dust shaken loose from the top of the doorway by a heavy bolt */
.tmsv-dust { position: absolute; left: 0; right: 0; top: 0; height: 0; transform: translateZ(36px); pointer-events: none; }
.tmsv-dust i {
  position: absolute; left: var(--x); top: 2cqw; width: .7cqw; aspect-ratio: 1; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(255, 238, 200, .9), rgba(255, 238, 200, 0) 70%);
  animation: tmsv-dust 1.3s ease-in var(--d, 0ms) forwards;
}
/* vault log: plain words under the readout, the last line is the exact result */
.tmsv-log {
  position: absolute; z-index: 3; top: 100.5cqw; left: 4cqw; right: 4cqw; margin: 0; text-align: center; min-height: 3cqw;
  color: rgba(255, 243, 196, .9); font: 800 2.7cqw/1.2 "TMC Exo", ui-monospace, monospace; letter-spacing: .14em;
  text-shadow: 0 .3cqw .8cqw rgba(0, 0, 0, .8); overflow-wrap: anywhere;
}
@keyframes tmsv-laser-off { 0% { opacity: .9; } 50% { opacity: .2; } 100% { opacity: 0; } }
@keyframes tmsv-dust { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), 26cqw); } }
@media (prefers-reduced-motion: reduce) {
  .tmsv-laser.is-off, .tmsv-dust i { animation: none; }
}

/* Owner 2026-10-18: the wall of ten safes (art: Codex, ~/Project/tmc-videos/safe-wall-art; plate centre 49.5%/21%, lamp 77.3%/21.5%, shelf at 48%). The player picks one; the camera goes into it (the wall grows towards the picked
   safe and fades, the big door grows out of it), the door plays, and the wall comes back with that safe open on its result.
   Transform/opacity only. Numbers and results are text in code over the art in reveal-safe/safe-mini-*.webp. */
.tmsv-wall {
  position: absolute; z-index: 4; top: 15cqw; left: 4.5cqw; right: 4.5cqw;
  transform-origin: var(--ox, 50%) var(--oy, 40%);
  /* coming back: the door has gone first, then the wall settles in */
  transition: opacity .4s ease .22s, scale .62s cubic-bezier(.3, .8, .3, 1) .1s;
}
/* going in: the wall clears away at once, the door grows after it */
.tmsv-scene:not(.is-choosing) .tmsv-wall { opacity: 0; scale: 1.45; pointer-events: none; transition: opacity .28s ease, scale .62s cubic-bezier(.3, .8, .3, 1); }
.tmsv-wall-title {
  margin: 0 0 2.6cqw; text-align: center; color: var(--gold-hi);
  font: 900 4.4cqw/1 "TMC Exo", ui-monospace, monospace; letter-spacing: .2em;
  text-shadow: 0 0 2cqw rgba(255, 190, 60, .55), 0 .3cqw .8cqw rgba(0, 0, 0, .85);
}
.tmsv-wall-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3.4cqw 1.2cqw; }
.tmsv-box {
  position: relative; display: block; width: 100%; aspect-ratio: 6 / 7; margin: 0; padding: 0; border: 0; background: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: scale .25s cubic-bezier(.3, .8, .3, 1), filter .3s;
  filter: drop-shadow(0 1cqw 1.4cqw rgba(0, 0, 0, .65));
}
.tmsv-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .35s; }
.tmsv-box-open { opacity: 0; }
.tmsv-box.is-opened .tmsv-box-open { opacity: 1; }
.tmsv-box.is-opened .tmsv-box-closed { opacity: 0; }
.tmsv-box-num {
  position: absolute; left: 50%; top: 21%; translate: -50% -50%; z-index: 1;
  color: #2b1d02; font: 900 3.1cqw/1 "TMC Exo", ui-monospace, monospace; letter-spacing: .06em;
  text-shadow: 0 .1cqw 0 rgba(255, 240, 200, .55); transition: opacity .3s;
}
.tmsv-box.is-opened .tmsv-box-num { opacity: 0; }
.tmsv-box-lamp {
  position: absolute; left: 77.3%; top: 21.5%; width: 3cqw; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; opacity: 0; transition: opacity .2s;
  background: radial-gradient(circle, #fff7d6 0%, #ffc93c 45%, rgba(255, 170, 30, 0) 72%);
}
.tmsv-box.is-picked { scale: 1.14; z-index: 2; filter: drop-shadow(0 0 2.6cqw rgba(255, 196, 70, .85)) drop-shadow(0 1cqw 1.4cqw rgba(0, 0, 0, .6)); }
.tmsv-box.is-picked .tmsv-box-lamp { opacity: 1; animation: tmsv-box-lamp .45s ease-in-out infinite alternate; }
.tmsv-box-result {
  position: absolute; left: 52.5%; top: 41%; translate: -50% -50%; z-index: 1; width: 52%; text-align: center; opacity: 0;
  color: #9aa6ba; font: 900 2.9cqw/1.05 "TMC Exo", ui-monospace, monospace; letter-spacing: .04em; overflow-wrap: anywhere;
  text-shadow: 0 .2cqw .6cqw rgba(0, 0, 0, .9); transition: opacity .35s .15s;
}
.tmsv-box.is-opened .tmsv-box-result { opacity: 1; }
.tmsv-box.is-opened.is-win .tmsv-box-result { color: var(--amber); font-size: 3.4cqw; white-space: nowrap; overflow-wrap: normal; text-shadow: 0 0 1.4cqw rgba(255, 190, 60, .9), 0 .2cqw .6cqw rgba(0, 0, 0, .9); }
.tmsv-box.is-opened { cursor: default; }
.tmsv-box.is-opened:not(.is-win) { filter: saturate(.55) brightness(.8) drop-shadow(0 1cqw 1.4cqw rgba(0, 0, 0, .65)); }
@media (hover: hover) and (pointer: fine) {
  .tmsv-box:not(.is-opened):not(.is-picked):hover { scale: 1.06; filter: brightness(1.15) drop-shadow(0 1cqw 1.4cqw rgba(0, 0, 0, .65)); }
}
/* the big door grows out of the picked safe */
.tmsv-stage { transform-origin: 50% 50%; transition: scale .7s cubic-bezier(.3, .8, .3, 1), translate .7s cubic-bezier(.3, .8, .3, 1), opacity .45s ease .18s; }
.tmsv-scene.is-choosing .tmsv-stage { opacity: 0; scale: .26; translate: var(--sx, 0) var(--sy, 0); pointer-events: none;
  transition: scale .6s cubic-bezier(.5, 0, .7, .4), translate .6s cubic-bezier(.5, 0, .7, .4), opacity .3s ease; }
.tmsv-safe-tag {
  position: absolute; z-index: 5; top: -2.4cqw; left: 50%; translate: -50% 0; padding: .9cqw 2.6cqw; border-radius: 99cqw;
  background: linear-gradient(180deg, #ffe9a6, #d9a52a); color: #2b1d02; box-shadow: 0 .6cqw 1.6cqw rgba(0, 0, 0, .55);
  font: 900 2.8cqw/1 "TMC Exo", ui-monospace, monospace; letter-spacing: .16em; white-space: nowrap;
}
.tmsv-safe-tag:empty { display: none; }
@keyframes tmsv-box-lamp { from { opacity: .55; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .tmsv-wall, .tmsv-stage, .tmsv-box, .tmsv-box img, .tmsv-box-result { transition: none; }
  .tmsv-box.is-picked .tmsv-box-lamp { animation: none; }
}

/* Owner 2026-10-18 "и эффектов добавь": a slow light sweeps the wall, idle lamps blink one after another, the picked safe shakes
   in a spotlight, a winning safe glows, a fresh wall drops in. Transform/opacity only, so phones stay smooth. */
.tmsv-wall-grid { position: relative; }
.tmsv-wall-grid::after {
  content: ""; position: absolute; inset: -3cqw -8cqw; z-index: 3; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 228, 160, .2) 50%, transparent 58%);
  animation: tmsv-sweep 7s ease-in-out infinite;
}
.tmsv-scene:not(.is-choosing) .tmsv-wall-grid::after { animation: none; }
@keyframes tmsv-sweep { 0%, 50% { transform: translateX(-60%); opacity: 0; } 56% { opacity: 1; } 94% { transform: translateX(60%); opacity: 1; } 100% { transform: translateX(60%); opacity: 0; } }
.tmsv-box:not(.is-opened):not(.is-picked) .tmsv-box-lamp {
  background: radial-gradient(circle, #ffd0d0 0%, #ff4040 42%, rgba(255, 40, 40, 0) 72%);
  animation: tmsv-idle-lamp 3.4s ease-in-out infinite; animation-delay: calc(var(--n, 1) * -.41s);
}
@keyframes tmsv-idle-lamp { 0%, 72%, 100% { opacity: 0; } 82% { opacity: .8; } }
.tmsv-box.is-picked { animation: tmsv-pick-shake .42s ease-out; }
@keyframes tmsv-pick-shake { 0% { rotate: 0deg; } 20% { rotate: -2.5deg; } 45% { rotate: 2.2deg; } 70% { rotate: -1.2deg; } 100% { rotate: 0deg; } }
.tmsv-box::before { /* spotlight cone from above onto the picked safe */
  content: ""; position: absolute; left: -35%; right: -35%; bottom: 35%; height: 150%; z-index: -1; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(255, 230, 160, 0), rgba(255, 230, 160, .32));
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%); transition: opacity .25s;
}
.tmsv-box.is-picked::before { opacity: 1; }
.tmsv-box.is-opened.is-win::after { /* the gold inside glows */
  content: ""; position: absolute; inset: 20% 18% 30% 30%; border-radius: 14%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 214, 110, .6), rgba(255, 214, 110, 0) 70%);
  animation: tmsv-win-glow 1.5s ease-in-out infinite alternate;
}
@keyframes tmsv-win-glow { from { opacity: .3; } to { opacity: .95; } }
/* Owner 2026-10-18: the fresh wall drops in with gravity: each safe falls (slow at first, then faster), lands, rebounds a little and
   settles, losing energy at every bounce. The timing function of each step is the one of the physics, so the steps are linear. */
.tmsv-wall-grid.is-refill .tmsv-box { animation: tmsv-drop-in .85s linear both; animation-delay: calc(var(--n, 1) * 45ms); }
@keyframes tmsv-drop-in {
  0% { opacity: 0; translate: 0 -46%; animation-timing-function: cubic-bezier(.55, .05, .85, .4); }
  12% { opacity: 1; }
  50% { opacity: 1; translate: 0 0; animation-timing-function: cubic-bezier(.15, .6, .35, 1); }
  66% { translate: 0 -7%; animation-timing-function: cubic-bezier(.65, 0, .85, .4); }
  80% { translate: 0 0; animation-timing-function: cubic-bezier(.15, .6, .35, 1); }
  89% { translate: 0 -2.2%; animation-timing-function: cubic-bezier(.65, 0, .85, .4); }
  96% { translate: 0 0; animation-timing-function: ease-out; }
  100% { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tmsv-wall-grid::after, .tmsv-box:not(.is-opened):not(.is-picked) .tmsv-box-lamp, .tmsv-box.is-picked,
  .tmsv-box.is-opened.is-win::after, .tmsv-wall-grid.is-refill .tmsv-box { animation: none; }
}