/* ============================================================================
   stamps.cl — "Patrimonio" default theme + Reseñas históricas UI + 3D view.
   Sober, premium and senior-friendly: deep heritage ink with calm teal/gold
   accents, soft glassmorphism, large readable type and gentle motion. The whole
   app re-themes through the shared CSS variables; the rest is scoped to
   [data-theme="patrimonio"] so other skins are untouched.
   ============================================================================ */

/* ---- Theme palette (drives every existing component via shared variables) ---- */
[data-theme="patrimonio"] {
  --bg: #0c1420;
  --bg-2: #142338;
  --panel: rgba(180, 205, 240, 0.06);
  --panel-border: rgba(150, 185, 230, 0.18);
  --text: #eef4fc;            /* high contrast for legibility */
  --muted: #aebdd6;
  --accent: #36c6d3;          /* sober teal */
  --accent-2: #d2ad5b;        /* heritage gold */
  --tile: rgba(255, 255, 255, 0.045);
  --card: rgba(255, 255, 255, 0.055);
  --shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.75);
}

/* ---- Ambient background: very slow, subtle heritage gradient (not neon) ---- */
[data-theme="patrimonio"] body {
  background:
    radial-gradient(58% 50% at 18% 8%, rgba(54, 198, 211, 0.10), transparent 60%),
    radial-gradient(60% 55% at 88% 4%, rgba(210, 173, 91, 0.10), transparent 62%),
    radial-gradient(120% 120% at 80% 110%, var(--bg-2), var(--bg)) fixed;
}
[data-theme="patrimonio"] .sidebar {
  background: linear-gradient(180deg, rgba(20, 35, 56, 0.72), rgba(12, 20, 32, 0.62));
  backdrop-filter: blur(18px) saturate(1.1);
}
/* Soft glass + hover lift on the catalogue cards. */
[data-theme="patrimonio"] .card-stamp {
  background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
  backdrop-filter: blur(8px);
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s, border-color .25s;
}
[data-theme="patrimonio"] .card-stamp:hover {
  box-shadow: 0 26px 60px -26px rgba(54, 198, 211, 0.45);
  border-color: rgba(54, 198, 211, 0.5);
}
[data-theme="patrimonio"] .scott-badge,
[data-theme="patrimonio"] .pager button.active {
  box-shadow: 0 6px 18px -8px rgba(54, 198, 211, 0.6);
}
@media (prefers-reduced-motion: reduce) {
  [data-theme="patrimonio"] .card-stamp { transition: none; }
}

/* ============================================================================
   "Reseña histórica" tab inside the ficha: a short lead-in plus one selectable
   card per review (title, source/issue, provenance and a snippet). Works in every
   theme. The .sr-link card is also reused by the 3D ficha.
   ============================================================================ */
.sr-tab { display: flex; flex-direction: column; gap: 13px; }
.sr-tab .sr-intro { font-size: 13px; line-height: 1.5; color: var(--text); margin: 0; }
.sr-tab .sr-intro b { color: var(--accent-2); font-weight: 700; }
.sr-tab-list { display: flex; flex-direction: column; gap: 10px; }
.sr-link {
  display: inline-flex; align-items: center; gap: 9px; max-width: 100%;
  background: var(--card); border: 1px solid var(--panel-border);
  border-radius: 12px; padding: 9px 13px; cursor: pointer; text-align: left;
  color: var(--text); transition: .18s; font: inherit;
}
.sr-link:hover { border-color: var(--accent); transform: translateY(-1px); }
.sr-link .sr-ico { font-size: 17px; line-height: 1; }
.sr-link .sr-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sr-link .sr-title { font-size: 13.5px; font-weight: 700; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sr-link .sr-meta { font-size: 11px; color: var(--muted); }
.sr-link .sr-meta b { color: var(--accent-2); font-weight: 700; }
/* Full-width selectable card variant used inside the reviews tab. */
.sr-card { width: 100%; align-items: flex-start; padding: 12px 14px; }
.sr-card .sr-snippet {
  font-size: 12px; line-height: 1.45; color: var(--text); opacity: .82; margin-top: 4px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sr-card .sr-cta { font-size: 11.5px; font-weight: 700; color: var(--accent); margin-top: 6px; }
.sr-expand {
  align-self: center; margin-top: 2px; padding: 8px 16px; cursor: pointer;
  background: transparent; border: 1px dashed var(--panel-border); border-radius: 10px;
  color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; transition: .18s;
}
.sr-expand:hover { border-color: var(--accent); color: var(--accent); }

/* ============================================================================
   Reseñas browser overlay (the "Con reseña histórica" section).
   ============================================================================ */
.res-overlay {
  position: fixed; inset: 0; z-index: 1090; display: none;
  background: rgba(6, 10, 18, 0.72); backdrop-filter: blur(6px);
}
.res-overlay.open { display: block; }
.res-shell {
  position: absolute; inset: 3vh 3vw; display: flex; flex-direction: column;
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--panel-border); border-radius: 20px;
  box-shadow: var(--shadow); overflow: hidden;
}
.res-top {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 18px 22px; border-bottom: 1px solid var(--panel-border);
}
.res-top h2 { margin: 0; font-size: 19px; font-weight: 800; }
.res-top h2 small { display: block; font-size: 11.5px; font-weight: 600;
  color: var(--muted); letter-spacing: .4px; margin-top: 3px; }
.res-search { flex: 1; display: flex; gap: 8px; min-width: 220px; }
.res-search input {
  flex: 1; background: var(--tile); border: 1px solid var(--panel-border);
  color: var(--text); border-radius: 11px; padding: 11px 14px; font-size: 15px;
}
.res-search input:focus { border-color: var(--accent); outline: none; }
.res-search button, .res-tabbtn {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #06212a; border: none; border-radius: 11px; padding: 11px 16px;
  font-weight: 800; cursor: pointer;
}
.res-tabbtn.ghost { background: var(--card); color: var(--text);
  border: 1px solid var(--panel-border); font-weight: 600; }
.res-close {
  background: var(--card); border: 1px solid var(--panel-border); color: var(--text);
  width: 40px; height: 40px; border-radius: 50%; font-size: 21px; cursor: pointer;
}
.res-body { flex: 1; overflow-y: auto; padding: 18px 22px 26px; }
.res-meta { color: var(--muted); font-size: 13px; margin: 0 0 14px; }

/* Result list: story cards */
.res-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.res-card {
  background: var(--card); border: 1px solid var(--panel-border); border-radius: 14px;
  padding: 16px 18px; cursor: pointer; transition: .18s; text-align: left;
}
.res-card:hover { border-color: var(--accent); transform: translateY(-3px);
  box-shadow: 0 20px 44px -24px rgba(54,198,211,.5); }
.res-card .rc-issue { font-size: 11px; font-weight: 800; color: var(--accent-2);
  text-transform: uppercase; letter-spacing: .6px; }
.res-card h3 { margin: 6px 0 8px; font-size: 15.5px; line-height: 1.3; font-weight: 800; }
.res-card p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.res-card .rc-foot { margin-top: 10px; font-size: 11.5px; color: var(--accent);
  display: flex; gap: 12px; flex-wrap: wrap; }
.res-card .rc-foot .pill { background: var(--tile); border: 1px solid var(--panel-border);
  border-radius: 20px; padding: 2px 9px; color: var(--muted); }

/* Story detail panel */
.res-story { max-width: 880px; margin: 0 auto; }
.res-story .rs-back { background: var(--card); border: 1px solid var(--panel-border);
  color: var(--text); border-radius: 10px; padding: 8px 14px; cursor: pointer; font-weight: 600; }
.res-story .rs-issue { margin-top: 16px; font-size: 12px; font-weight: 800;
  color: var(--accent-2); text-transform: uppercase; letter-spacing: .6px; }
.res-story h1 { font-size: clamp(22px, 3vw, 30px); line-height: 1.18; margin: 8px 0 6px; }
.res-story .rs-source { color: var(--muted); font-size: 13px; margin-bottom: 18px; }
.res-block { background: var(--card); border: 1px solid var(--panel-border);
  border-radius: 14px; padding: 16px 20px; margin-bottom: 16px; }
.res-block h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .7px; color: var(--accent); font-weight: 800; }
.res-block p { margin: 0 0 10px; font-size: 15px; line-height: 1.72; }
.res-block p:last-child { margin-bottom: 0; }
.res-cat { border-left: 3px solid var(--accent-2); }
/* Linked stamps inside a story */
.res-linked { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.res-stamp { background: var(--tile); border: 1px solid var(--panel-border);
  border-radius: 12px; padding: 10px; cursor: pointer; transition: .18s; text-align: center; }
.res-stamp:hover { border-color: var(--accent); transform: translateY(-2px); }
.res-stamp img { width: 100%; height: 96px; object-fit: contain; border-radius: 8px; background: #0006; }
.res-stamp .noimg { display: grid; place-items: center; height: 96px; color: var(--muted); font-size: 11px; }
.res-stamp .rs-scott { margin-top: 7px; font-size: 12px; font-weight: 800; color: var(--accent); }
.res-stamp .rs-name { font-size: 11.5px; color: var(--muted); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.res-stamp .rs-prov { font-size: 10px; color: var(--accent-2); margin-top: 4px; }

@media (max-width: 640px) {
  .res-shell { inset: 0; border-radius: 0; }
  .res-list { grid-template-columns: 1fr; }
}

/* ============================================================================
   Vista 3D — "Vitrina": a tilting 3D wall of stamps in rows of 5. Each stamp
   shows an info plaque (Scott, name, year, denomination, colour, reference value
   + antecedentes excerpt) on its LEFT; clicking flips a full ficha open in 3D.
   Reuses the heritage palette; honours reduced-motion.
   ============================================================================ */
.view3d {
  position: fixed; inset: 0; z-index: 1095; display: none;
  background:
    radial-gradient(60% 55% at 50% -5%, rgba(54,198,211,.16), transparent 60%),
    radial-gradient(80% 80% at 50% 120%, rgba(210,173,91,.12), transparent 60%),
    radial-gradient(40% 40% at 12% 30%, rgba(80,120,200,.10), transparent 70%),
    #060b14;
  color: #eef4fc;
}
.view3d.open { display: block; }
.view3d-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 24px;
  background: linear-gradient(180deg, rgba(6,11,20,.92), transparent);
}
.view3d-top h2 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; flex: 1; }
.view3d-top h2 small { display: block; font-size: 11px; color: #9fb0cc; font-weight: 600; margin-top: 2px; }
.v3d-pagenav { display: flex; align-items: center; gap: 10px; }
.v3d-pageinfo { font-size: 12px; color: #b9c7e0; font-weight: 700; min-width: 110px; text-align: center; }
.v3d-page { width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 20px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(150,185,230,.28); color: #fff; transition: .18s; }
.v3d-page:hover:not(:disabled) { border-color: rgba(54,198,211,.6); background: rgba(54,198,211,.18); }
.v3d-page:disabled { opacity: .3; cursor: default; }
.v3d-close { background: rgba(255,255,255,.06); border: 1px solid rgba(150,185,230,.25);
  color: #fff; width: 42px; height: 42px; border-radius: 50%; font-size: 22px; cursor: pointer; transition: .18s; }
.v3d-close:hover { border-color: rgba(230,120,120,.6); background: rgba(230,90,90,.18); }

/* the 3D scene: a perspective viewport that scrolls vertically through the rings */
.v3d-scene {
  position: absolute; inset: 0; z-index: 2;
  padding: 108px 5vw 130px; overflow-y: auto; overflow-x: hidden;
  perspective: 1500px; perspective-origin: 50% 40%;
}
.v3d-wall {
  display: flex; flex-direction: column; align-items: center; gap: 92px;
  transform-style: preserve-3d;
}

/* one "corrida de 5" = a 3D carousel: a stage that holds a slowly spinning ring.
   A soft elliptical "floor" glows under each ring so it reads as a lit vitrine. */
.v3d-stage {
  position: relative;
  width: 100%; height: 400px; display: grid; place-items: center;
  transform-style: preserve-3d; transform: rotateX(-9deg);
}
.v3d-stage::after {
  content: ''; position: absolute; left: 50%; bottom: 24px; z-index: -1;
  width: 460px; height: 90px; transform: translateX(-50%) rotateX(80deg);
  background: radial-gradient(closest-side, rgba(54,198,211,.28), rgba(210,173,91,.12) 55%, transparent 72%);
  filter: blur(6px); pointer-events: none;
}
.v3d-ring {
  position: relative; width: 232px; height: 340px;   /* width must match CARD_W in JS */
  transform-style: preserve-3d;
  animation: v3dSpin var(--spin-dur, 26s) linear infinite;
  animation-direction: var(--spin-dir, normal);
}
/* pause the spin when the user hovers the ring so a stamp can be read/clicked */
.v3d-stage:hover .v3d-ring { animation-play-state: paused; }
@keyframes v3dSpin { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }

/* each card sits on the cylinder; its rotateY/translateZ is set inline in JS */
.v3d-cell { position: absolute; inset: 0; transform-style: preserve-3d; }

.v3d-card { position: relative; width: 100%; height: 100%; cursor: pointer; outline: none;
  transform-style: preserve-3d; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.v3d-card:hover, .v3d-card:focus-visible { transform: translateY(-6px) scale(1.07); z-index: 3; }
.v3d-card-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }

/* two faces so the back of a spinning card shows a clean motif, not a mirrored stamp */
.v3d-face {
  position: absolute; inset: 0; border-radius: 18px; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.v3d-front {
  display: flex; flex-direction: column;
  background:
    linear-gradient(155deg, rgba(31,52,84,.98), rgba(11,18,32,.99));
  border: 1px solid rgba(150,185,230,.22);
  box-shadow:
    0 40px 80px -30px rgba(0,0,0,.9),
    0 0 0 1px rgba(210,173,91,.14) inset,
    inset 0 1px 0 rgba(255,255,255,.08);
}
/* gold "Scott" plaque pinned to the top-left corner */
.v3d-badge {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  font-size: 10.5px; font-weight: 800; letter-spacing: .3px; color: #10202a;
  padding: 4px 9px; border-radius: 999px;
  background: linear-gradient(135deg, #f0d68a, #d2ad5b 60%, #b98f3c);
  box-shadow: 0 4px 12px -3px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.5);
}
.v3d-front .v3d-img { flex: 1; min-height: 0; display: grid; place-items: center; padding: 26px 16px 8px; }
.v3d-front .v3d-img img { max-width: 100%; max-height: 176px; object-fit: contain;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.65)); }
.v3d-front .v3d-img .noimg { color: #8597b5; font-size: 12px; }
.v3d-cap { padding: 10px 13px 14px; display: flex; flex-direction: column; gap: 5px;
  background: linear-gradient(0deg, rgba(6,11,20,.96), rgba(6,11,20,.55) 70%, transparent);
  border-top: 1px solid rgba(210,173,91,.18); }
.cap-name { font-size: 13px; font-weight: 800; color: #f2f6fc; line-height: 1.22;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cap-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cap-year { font-size: 11px; font-weight: 700; color: #36c6d3; }
.cap-denom { font-size: 11px; font-weight: 600; color: #cdd8ea;
  padding: 1px 7px; border-radius: 6px; background: rgba(150,185,230,.12); }
.cap-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 1px; }
.cap-color { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; color: #a9b8d2;
  text-transform: capitalize; min-width: 0; }
.cap-color .cap-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset, 0 1px 2px rgba(0,0,0,.5); background: #8a93a3; }
.cap-color .cap-dot[data-multi] {
  background: conic-gradient(#c0392b, #e6b422, #2e8b57, #2b6cb0, #7d4bab, #c0392b); }
.cap-value { font-size: 10.5px; font-weight: 800; color: #e7c877;
  padding: 2px 8px; border-radius: 999px; background: rgba(210,173,91,.14);
  border: 1px solid rgba(210,173,91,.3); white-space: nowrap; }
/* glass sheen sweeping across the card front */
.v3d-shine {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: 18px;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.16) 50%, transparent 58%);
  opacity: .5;
}
.v3d-back {
  transform: rotateY(180deg); display: flex; flex-direction: column; gap: 10px;
  align-items: center; justify-content: center;
  border: 1px solid rgba(210,173,91,.22);
  background:
    repeating-linear-gradient(45deg, rgba(210,173,91,.06) 0 9px, transparent 9px 18px),
    radial-gradient(60% 60% at 50% 40%, rgba(54,198,211,.12), transparent 70%),
    linear-gradient(160deg, #14233a, #0a1422);
}
.v3d-back .back-mark { font-size: 52px; color: rgba(210,173,91,.5);
  text-shadow: 0 4px 18px rgba(210,173,91,.3); }
.v3d-back .back-scott { font-size: 11px; font-weight: 800; letter-spacing: .5px; color: #7f92b3; }
.v3d-card:hover .v3d-front, .v3d-card:focus-visible .v3d-front {
  border-color: rgba(54,198,211,.65);
  box-shadow:
    0 60px 120px -32px rgba(54,198,211,.5),
    0 0 0 1px rgba(54,198,211,.4) inset,
    inset 0 1px 0 rgba(255,255,255,.12); }

@media (prefers-reduced-motion: reduce) { .v3d-ring { animation: none; } }

.v3d-hint { position: absolute; bottom: 26px; left: 0; right: 0; text-align: center;
  font-size: 11px; letter-spacing: .12em; color: #7e90ad; text-transform: uppercase; z-index: 4;
  pointer-events: none; }

/* ---------- 3D detail: the full ficha flipped open in space ---------- */
.v3d-detail {
  position: absolute; inset: 0; z-index: 30; display: none;
  align-items: flex-start; justify-content: center; padding: 40px 16px;
  overflow-y: auto; background: rgba(4,8,14,.66); backdrop-filter: blur(5px);
  perspective: 1800px;
}
.v3d-detail.open { display: flex; animation: v3dFade .25s ease; }
@keyframes v3dFade { from { opacity: 0; } to { opacity: 1; } }
/* The card mirrors the classic detail modal (.detail-content) so the ficha renders
   identically in any theme: same surface (--bg-2) and text colour (--text). */
.v3d-detail-card {
  position: relative; width: 100%; max-width: 940px; border-radius: 18px;
  background: var(--bg-2, #14233a); color: var(--text, #e8eef8);
  border: 1px solid var(--panel-border, rgba(150,185,230,.2));
  box-shadow: 0 50px 120px -30px rgba(0,0,0,.85); transform-origin: 50% 30%;
  animation: v3dFlip .5s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes v3dFlip { from { opacity: 0; transform: rotateX(22deg) translateY(40px) scale(.94); } to { opacity: 1; transform: none; } }
.v3d-dclose { position: absolute; top: 12px; right: 14px; z-index: 4; width: 38px; height: 38px;
  border-radius: 50%; border: 1px solid rgba(0,0,0,.15); background: rgba(255,255,255,.7);
  color: #3a2a1c; font-size: 22px; cursor: pointer; }
.v3d-dclose:hover { background: #fff; }
.v3d-detail-flip { display: grid; grid-template-columns: minmax(240px, 360px) 1fr; gap: 22px; padding: 26px; }
.v3d-detail-photo { position: relative; border-radius: 14px; display: grid; place-items: center;
  padding: 22px; min-height: 280px; background: linear-gradient(160deg, #1a2942, #0c1320);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.v3d-detail-photo img { max-width: 100%; max-height: 420px; object-fit: contain; cursor: zoom-in;
  filter: drop-shadow(0 18px 34px rgba(0,0,0,.55)); }
.v3d-detail-photo .noimg { color: #8597b5; }
.v3d-detail-badge { position: absolute; left: 14px; bottom: 12px; font-size: 12px; font-weight: 800;
  color: #06212a; background: linear-gradient(135deg, var(--accent, #36c6d3), var(--accent-2, #d2ad5b));
  padding: 5px 11px; border-radius: 999px; }
.v3d-detail-info { min-width: 0; }
.v3d-detail-info .scott-line { font-size: 13px; font-weight: 800; color: var(--accent, #1f8a93); letter-spacing: .3px; }
.v3d-detail-info h2 { margin: 2px 0 8px; font-size: 22px; line-height: 1.2; }
.v3d-detail-info .emision { margin: 0 0 12px; font-size: 13px; }
.v3d-detail-actions { margin-top: 16px; }
.v3d-open-classic { cursor: pointer; border: 1px solid var(--panel-border, rgba(150,185,230,.3));
  background: transparent; color: var(--text, #cdd8ea); font-weight: 700; font-size: 13px;
  padding: 9px 14px; border-radius: 10px; }
.v3d-open-classic:hover { border-color: var(--accent, #36c6d3); color: var(--accent, #36c6d3); }
.v3d-reviews { margin-top: 14px; }

/* skin preview swatch for the settings panel */
.skin-prev.t-patrimonio {
  background: linear-gradient(135deg, #0c1420 0%, #142338 55%, #36c6d3 100%);
  border: 1px solid #d2ad5b;
}

/* topbar "Vista 3D" button */
.btn-3d { background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #06212a; border: none; border-radius: 11px; padding: 11px 16px; font-weight: 800;
  cursor: pointer; white-space: nowrap; box-shadow: var(--shadow); }
.btn-3d:hover { filter: brightness(1.08); }

/* Responsive: shrink the spinning ring (and its stage height) on smaller
   screens so each carousel still fits without clipping. The 5-per-ring layout
   is intrinsic to the cylinder, so it holds at every breakpoint. */
@media (max-width: 1100px) {
  .v3d-stage { transform: rotateX(-8deg); }
}
@media (max-width: 720px) {
  .v3d-scene { padding: 94px 10px 116px; perspective: 1150px; }
  .v3d-wall { gap: 60px; }
  .v3d-stage { height: 330px; }
  .v3d-stage::after { width: 320px; }
  .v3d-ring { transform: scale(.82); }
  .v3d-detail-flip { grid-template-columns: 1fr; }
}
@media (max-width: 440px) {
  .v3d-stage { height: 290px; }
  .v3d-ring { transform: scale(.68); }
}