/* ==========================================================================
   TRANSMUTE — the daily word alchemy
   The crucible board, rune keyboard, arcana reveal, register drawer.
   Palette: gold = true place · violet = wrong seat · ash = burned away.
   ========================================================================== */

.tr-page {
  padding-top: var(--hero-pad-top);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.tr-inner {
  max-width: 880px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --------------------------------------------------------------------------
   1 · Header
   -------------------------------------------------------------------------- */
.tr-head {
  text-align: center;
}

.tr-title {
  font-size: clamp(2.6rem, 9vw, 4.6rem);
  letter-spacing: 0.06em;
  margin-top: 0.7rem;
  font-variation-settings: 'opsz' 144, 'wght' 620, 'SOFT' 30;
}

.tr-sub {
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--star-3);
  font-variant-numeric: tabular-nums;
}
.tr-sub-sep { margin: 0 0.6em; color: var(--star-4); }

/* --------------------------------------------------------------------------
   Topbar — streak / cards / user chip / help
   -------------------------------------------------------------------------- */
.tr-topbar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1.6rem;
  width: min(560px, 100%);
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--glass-2);
  backdrop-filter: blur(10px);
}
.tr-topbar-spacer { flex: 1; min-width: 0.25rem; }

.tr-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--star-3);
  padding: 0.2rem 0.4rem;
}
.tr-stat svg { width: 17px; height: 17px; flex: none; }
.tr-flame { color: var(--gold); filter: drop-shadow(0 0 6px rgba(242, 193, 78, 0.55)); }
#tr-cards-stat svg { color: var(--violet-hot); }
.tr-stat-num {
  color: var(--star-1);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: transform 0.3s var(--ease-spring);
}
.tr-stat-num.is-bumped { transform: translateY(-3px) scale(1.25); color: var(--gold-hot); }
.tr-stat-label { letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.62rem; }

.tr-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 34px;
  padding: 0.25rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(242, 193, 78, 0.05);
  color: var(--star-1);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 460;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: border-color 0.25s, color 0.25s, background 0.25s;
  max-width: 15ch;
  white-space: nowrap;
}
.tr-chip #tr-user-label { overflow: hidden; text-overflow: ellipsis; }
.tr-chip:hover { border-color: var(--line-bright); color: var(--gold-hot); }
.tr-chip-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--star-4);
  transition: background 0.25s, box-shadow 0.25s;
}
.tr-chip.is-signed-in .tr-chip-dot {
  background: var(--jade);
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.7);
}

.tr-help-open {
  width: 34px; height: 34px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--star-3);
  font-family: var(--font-display);
  font-size: 1rem;
  cursor: pointer;
  transition: border-color 0.25s, color 0.25s, transform 0.25s var(--ease-spring);
}
.tr-help-open:hover { border-color: var(--line-bright); color: var(--gold-hot); transform: rotate(12deg); }

.tr-chip:focus-visible,
.tr-help-open:focus-visible,
.kbd-key:focus-visible,
.tr-tab:focus-visible,
.tr-close:focus-visible,
.tr-inline-link:focus-visible,
.tr-panel:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   2 · The crucible board
   -------------------------------------------------------------------------- */
.tr-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: clamp(1.6rem, 4vw, 2.4rem);
}

.cru-wrap { position: relative; }

.cru-board {
  display: grid;
  gap: 8px;
  width: min(348px, calc(100vw - 2.5rem));
}
.cru-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  perspective: 640px;
}

.cru-tile {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: var(--radius-s);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008));
  color: var(--star-1);
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 6vw, 1.9rem);
  font-weight: 600;
  text-transform: uppercase;
  user-select: none;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s, background 0.4s, color 0.4s, box-shadow 0.4s, transform 0.15s var(--ease-spring);
  will-change: transform;
}

/* letter just typed */
.cru-tile[data-state="filled"] {
  border-color: rgba(242, 193, 78, 0.45);
  animation: tile-pop 0.18s var(--ease-spring);
}
@keyframes tile-pop {
  from { transform: scale(0.86); }
  60%  { transform: scale(1.08); }
  to   { transform: scale(1); }
}

/* ash — burned away */
.cru-tile[data-state="ash"] {
  background: linear-gradient(170deg, #14101f, #0b0816);
  border-color: rgba(80, 72, 110, 0.5);
  color: var(--star-4);
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.65), inset 0 -2px 6px rgba(240, 119, 74, 0.06);
}

/* violet — right rune, wrong seat */
.cru-tile[data-state="violet"] {
  background: linear-gradient(160deg, rgba(139, 92, 246, 0.3), rgba(139, 92, 246, 0.1));
  border-color: rgba(183, 156, 255, 0.65);
  color: var(--violet-hot);
  box-shadow: 0 0 22px -6px rgba(139, 92, 246, 0.55), inset 0 0 12px rgba(139, 92, 246, 0.18);
}
.cru-tile[data-state="violet"]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(183, 156, 255, 0.28) 50%, transparent 70%);
  transform: translateX(-110%);
  animation: violet-shimmer 1.1s ease-out 0.15s;
}
@keyframes violet-shimmer {
  to { transform: translateX(110%); }
}

/* gold — transmuted */
.cru-tile[data-state="gold"] {
  background: linear-gradient(160deg, rgba(242, 193, 78, 0.4), rgba(240, 119, 74, 0.2));
  border-color: rgba(255, 221, 135, 0.8);
  color: #ffe9b0;
  text-shadow: 0 0 14px rgba(255, 221, 135, 0.6);
  box-shadow: 0 0 26px -4px rgba(242, 193, 78, 0.6), inset 0 0 14px rgba(242, 193, 78, 0.22);
}

/* loading shimmer — the crucible warming up, never a blank board */
.cru-board.is-loading .cru-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 25%, rgba(201, 194, 226, 0.09) 50%, transparent 75%);
  background-size: 260% 100%;
  animation: cru-shimmer 1.6s linear infinite;
}
@keyframes cru-shimmer {
  from { background-position: 130% 0; }
  to   { background-position: -130% 0; }
}

/* invalid word */
.cru-row.is-shaking { animation: cru-shake 0.5s ease-in-out; }
@keyframes cru-shake {
  10%, 50%, 90% { transform: translateX(-6px); }
  30%, 70%      { transform: translateX(6px); }
  100%          { transform: none; }
}

/* solve pulse — the row breathes gold in unison */
.cru-row.is-won .cru-tile {
  animation: tile-triumph 0.9s var(--ease-spring) both;
}
@keyframes tile-triumph {
  0%   { transform: none; }
  35%  { transform: translateY(-9px) scale(1.06); }
  100% { transform: none; }
}

/* expanding gold ring at the solve */
.cru-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 120px; height: 120px;
  margin: -60px 0 0 -60px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  box-shadow: 0 0 30px rgba(242, 193, 78, 0.5), inset 0 0 24px rgba(242, 193, 78, 0.35);
  opacity: 0;
  transform: scale(0.3);
  pointer-events: none;
  z-index: 2;
}
.cru-ring.is-fired { animation: ring-out 1.1s var(--ease-spring) forwards; }
@keyframes ring-out {
  0%   { opacity: 0.95; transform: scale(0.3); }
  100% { opacity: 0; transform: scale(3.4); }
}

/* particles (positioned + animated by JS via WAAPI) */
.tr-spark {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  will-change: transform, opacity;
}
.tr-spark--gold { background: var(--gold-hot); box-shadow: 0 0 8px rgba(255, 221, 135, 0.9); }
.tr-spark--ember { width: 3px; height: 3px; background: rgba(240, 119, 74, 0.8); box-shadow: 0 0 5px rgba(240, 119, 74, 0.6); }

/* --------------------------------------------------------------------------
   3 · On-screen keyboard
   -------------------------------------------------------------------------- */
.tr-kbd {
  width: min(520px, 100%);
  margin-top: clamp(1.4rem, 4vw, 2rem);
  user-select: none;
}
.kbd-row {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 7px;
}
.kbd-row--mid { padding: 0 4.5%; }

.kbd-key {
  flex: 1;
  min-width: 0;
  height: 54px; /* ≥44px touch target */
  border-radius: 8px;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  color: var(--star-2);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.3s, color 0.3s, box-shadow 0.3s, transform 0.1s;
}
.kbd-key:active { transform: scale(0.94); background: rgba(255, 255, 255, 0.1); }
.kbd-key--wide { flex: 1.55; font-size: 0.72rem; letter-spacing: 0.08em; }

.kbd-key[data-state="ash"] {
  background: rgba(8, 6, 16, 0.85);
  border-color: rgba(80, 72, 110, 0.35);
  color: var(--star-4);
}
.kbd-key[data-state="violet"] {
  background: linear-gradient(160deg, rgba(139, 92, 246, 0.32), rgba(139, 92, 246, 0.12));
  border-color: rgba(183, 156, 255, 0.55);
  color: var(--violet-hot);
}
.kbd-key[data-state="gold"] {
  background: linear-gradient(160deg, rgba(242, 193, 78, 0.38), rgba(240, 119, 74, 0.18));
  border-color: rgba(255, 221, 135, 0.7);
  color: var(--gold-hot);
  box-shadow: 0 0 14px -4px rgba(242, 193, 78, 0.5);
}

@media (max-width: 400px) {
  .tr-kbd { width: calc(100% + 0.9rem); }
  .kbd-row { gap: 4px; margin-bottom: 5px; }
  .kbd-key { height: 56px; font-size: 0.88rem; border-radius: 6px; }
}

/* --------------------------------------------------------------------------
   Post-game panel — share, countdown, nudge
   -------------------------------------------------------------------------- */
.tr-postgame {
  width: min(420px, 100%);
  margin-top: clamp(1.4rem, 4vw, 2rem);
  padding: 1.5rem 1.4rem 1.6rem;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  backdrop-filter: blur(14px);
  animation: pg-in 0.7s var(--ease-spring) both;
}
@keyframes pg-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.tr-pg-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--star-1);
}
.tr-pg-title .aurora-text { font-style: italic; }
.tr-pg-sub { margin-top: 0.4rem; color: var(--star-3); font-size: 0.92rem; }
.tr-pg-answer {
  font-family: var(--font-display);
  letter-spacing: 0.22em;
  color: var(--gold-hot);
  text-transform: uppercase;
}

.tr-pg-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 1.1rem auto 0;
  padding: 0.7rem 0.9rem;
  max-width: 320px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: rgba(6, 4, 15, 0.4);
  transition: border-color 0.3s, transform 0.3s var(--ease-spring);
}
.tr-pg-card:hover { border-color: var(--line-bright); transform: translateY(-2px); }
.tr-pg-card img {
  width: 44px;
  height: auto;            /* beats the img's height attribute — no slivers */
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 4px;
  flex: none;
}
.tr-pg-card-num {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--gold);
  display: block;
}
.tr-pg-card-name { color: var(--star-1); font-weight: 500; font-size: 0.95rem; }

/* share block */
.tr-share { margin-top: 1.2rem; }
.tr-share-pre {
  font-family: var(--font-mono);
  font-size: 1.02rem;
  line-height: 1.45;
  letter-spacing: 0.18em;
  white-space: pre;
  color: var(--star-2);
}
.tr-share-btn { margin-top: 0.9rem; padding: 0.65rem 1.5rem; font-size: 0.88rem; }
.tr-share-btn.is-copied { border-color: var(--jade); color: var(--jade-hot); }

/* countdown */
.tr-count-wrap { margin-top: 1.3rem; }
.tr-count-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--star-4);
}
.tr-count {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px rgba(242, 193, 78, 0.35);
}

/* save-your-streak nudge */
.tr-nudge {
  margin-top: 1.3rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--star-3);
}
.tr-nudge button { margin-top: 0.6rem; }

.tr-inline-link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--gold);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(242, 193, 78, 0.4);
}
.tr-inline-link:hover { color: var(--gold-hot); }

/* --------------------------------------------------------------------------
   4 · Tabs — collection & leaderboard
   -------------------------------------------------------------------------- */
.tr-tabs { width: 100%; margin-top: clamp(3rem, 7vw, 4.5rem); }

.tr-tablist {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0;
}
.tr-tab {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 0.7rem 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--star-3);
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s;
}
.tr-tab:hover { color: var(--star-1); }
.tr-tab[aria-selected="true"] { color: var(--gold); border-bottom-color: var(--gold); }

.tr-panel { padding-top: 1.8rem; }
.tr-panel-lede {
  text-align: center;
  color: var(--star-3);
  font-size: 0.95rem;
  max-width: 46ch;
  margin: 0 auto 1.6rem;
}

/* collection grid */
.tr-collection {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 14px;
  max-width: 720px;
  margin: 0 auto;
}
.tr-mini { text-align: center; }
.tr-mini-frame {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: 9px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--void-2);
  transition: transform 0.35s var(--ease-spring), border-color 0.35s, box-shadow 0.35s;
}
.tr-mini-frame img { width: 100%; height: 100%; object-fit: cover; }
.tr-mini--owned .tr-mini-frame { border-color: rgba(242, 193, 78, 0.4); }
.tr-mini--owned .tr-mini-frame:hover {
  transform: translateY(-4px) rotate(-1deg);
  border-color: var(--line-bright);
  box-shadow: var(--glow-gold);
}
.tr-mini--unowned .tr-mini-frame img { opacity: 0.4; filter: saturate(0.5); }
.tr-mini-num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  color: rgba(242, 238, 252, 0.75);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}
.tr-mini-cap {
  display: block;
  margin-top: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--star-4);
}
.tr-mini--owned .tr-mini-cap { color: var(--star-3); }
/* freshly drawn */
.tr-mini.is-new .tr-mini-frame { animation: mini-glow 1.6s var(--ease-spring); }
@keyframes mini-glow {
  0%   { box-shadow: 0 0 0 rgba(242, 193, 78, 0); }
  30%  { box-shadow: 0 0 34px rgba(242, 193, 78, 0.7); }
  100% { box-shadow: 0 0 0 rgba(242, 193, 78, 0); }
}

/* leaderboard */
.tr-lb {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  border-collapse: collapse;
}
.tr-lb th {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--star-4);
  text-align: left;
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--line);
}
.tr-lb td {
  padding: 0.65rem 0.7rem;
  border-bottom: 1px solid rgba(143, 135, 179, 0.08);
  color: var(--star-2);
  font-size: 0.92rem;
}
.tr-lb td.n {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--star-3);
}
.tr-lb .tr-lb-name { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-lb tr.is-podium td { color: var(--star-1); }
.tr-lb tr.is-podium td.n, .tr-lb tr.is-podium td:first-child { color: var(--gold); text-shadow: 0 0 12px rgba(242, 193, 78, 0.35); }
.tr-lb-empty { text-align: center; color: var(--star-4); font-size: 0.92rem; }

/* --------------------------------------------------------------------------
   Veils, modal, drawer, help
   -------------------------------------------------------------------------- */
.tr-veil[hidden] { display: none; }
.tr-veil {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(6, 4, 15, 0.72);
  backdrop-filter: blur(8px);
  animation: veil-in 0.35s ease both;
}
@keyframes veil-in { from { opacity: 0; } to { opacity: 1; } }
.tr-veil.is-leaving { animation: veil-in 0.25s ease reverse both; }

.tr-modal {
  position: relative;
  width: min(430px, 100%);
  max-height: min(88dvh, 760px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2.1rem 1.7rem 1.9rem;
  border: 1px solid var(--line-bright);
  border-radius: var(--radius-l);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012)),
    var(--void-1);
  box-shadow: var(--shadow-deep), 0 0 80px -30px rgba(242, 193, 78, 0.35);
  animation: modal-in 0.55s var(--ease-spring) both;
  text-align: center;
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(22px) scale(0.95); }
  to   { opacity: 1; transform: none; }
}

.tr-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--star-3);
  cursor: pointer;
  transition: color 0.25s, background 0.25s;
  z-index: 2;
}
.tr-close:hover { color: var(--star-1); background: rgba(255, 255, 255, 0.06); }

/* ---- the card reveal ---- */
.tr-reveal-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
}
.tr-reveal-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--star-1);
  margin-top: 0.5rem;
}

.tr-card-scene {
  width: min(220px, 56vw);
  margin: 1.4rem auto 0;
  perspective: 1000px;
}
/* The flip is built from two SELF-CONTAINED 3D transforms (perspective()
   inside each face's own transform). preserve-3d/backface-visibility would
   be flattened by the modal's overflow-y:auto in Chromium — which rendered
   the turn as a flat horizontal squash on short viewports. */
.tr-card-flip {
  position: relative;
  aspect-ratio: 2 / 3;
}
.tr-card-face {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(242, 193, 78, 0.45);
  box-shadow: 0 18px 50px -18px rgba(0, 0, 0, 0.8);
  transform: translateZ(0); /* Safari: force own layer so backface hides */
}
.tr-card-face img, .tr-card-face video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Rest states: back showing, front waiting edge-on */
.tr-card-face--back  { transform: perspective(1000px) rotateY(0deg); }
.tr-card-face--front { transform: perspective(1000px) rotateY(-90deg); opacity: 0; }

/* First half: the back turns away… */
.tr-card-flip.is-flipped .tr-card-face--back {
  animation: card-turn-out 0.5s ease-in forwards;
}
@keyframes card-turn-out {
  to { transform: perspective(1000px) rotateY(90deg); opacity: 0; }
}
/* …second half: the face turns in. */
.tr-card-flip.is-flipped .tr-card-face--front {
  animation: card-turn-in 0.5s ease-out 0.5s forwards;
}
@keyframes card-turn-in {
  from { transform: perspective(1000px) rotateY(-90deg); opacity: 1; }
  to   { transform: perspective(1000px) rotateY(0deg); opacity: 1; }
}

/* glint sweep across the freshly revealed face */
.tr-card-flip.is-flipped .tr-card-face--front::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 235, 190, 0.4) 50%, transparent 68%);
  transform: translateX(-130%);
  animation: card-glint 1.2s ease-out 0.75s both;
  pointer-events: none;
}
@keyframes card-glint { to { transform: translateX(130%); } }

.tr-card-caption {
  margin-top: 1.1rem;
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  color: var(--gold);
}
.tr-card-name {
  margin-top: 0.35rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--star-1);
}
.tr-card-tagline { margin-top: 0.3rem; color: var(--star-3); font-size: 0.92rem; }
.tr-card-meet {
  display: inline-block;
  margin-top: 0.7rem;
  font-size: 0.9rem;
}

/* failure variant */
.tr-modal--fail { box-shadow: var(--shadow-deep), 0 0 80px -30px rgba(139, 92, 246, 0.3); }

/* ---- drawer (register / sign-in) ---- */
.tr-veil--drawer {
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  padding: 0;
}
.tr-drawer {
  position: relative;
  width: min(430px, 100%);
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(var(--nav-h) + 1rem) 1.9rem 2.2rem;
  background:
    linear-gradient(200deg, rgba(139, 92, 246, 0.07), transparent 42%),
    var(--void-1);
  border-left: 1px solid var(--line-bright);
  box-shadow: -30px 0 80px -30px rgba(0, 0, 0, 0.8);
  animation: drawer-in 0.5s var(--ease-spring) both;
}
@keyframes drawer-in {
  from { transform: translateX(60px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.tr-drawer-title { font-size: 1.45rem; margin-top: 0.9rem; }
.tr-drawer-lede { margin-top: 0.7rem; color: var(--star-3); font-size: 0.95rem; }

#tr-reg-form { margin-top: 1.6rem; display: grid; gap: 1.1rem; }
.tr-field { display: grid; gap: 0.4rem; }
.tr-field span {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--star-4);
}
.tr-field input {
  width: 100%;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-s);
  border: 1px solid var(--line);
  background: rgba(6, 4, 15, 0.5);
  color: var(--star-1);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.tr-field input::placeholder { color: var(--star-4); }
.tr-field input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(242, 193, 78, 0.15);
}
.tr-check {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.88rem;
  color: var(--star-3);
  cursor: pointer;
}
.tr-check input {
  width: 18px; height: 18px;
  margin-top: 2px;
  accent-color: var(--gold);
  flex: none;
}
.tr-check input:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.tr-reg-error { color: var(--rose-hot); font-size: 0.88rem; }
.tr-reg-submit { justify-content: center; }
.tr-reg-submit[disabled] { opacity: 0.6; cursor: wait; }

.tr-sent-seal {
  margin-top: 2rem;
  font-size: 3rem;
  text-align: center;
  color: var(--gold);
  text-shadow: 0 0 30px rgba(242, 193, 78, 0.5);
}
#tr-user-view .btn { margin-top: 1.6rem; }

/* ---- help popover ---- */
.tr-help { text-align: left; }
.tr-help-title { font-size: 1.35rem; margin-top: 0.7rem; }
.tr-help-lede { margin-top: 0.7rem; color: var(--star-3); font-size: 0.94rem; }
.tr-help-rules {
  list-style: none;
  margin-top: 1.2rem;
  display: grid;
  gap: 0.9rem;
}
.tr-help-rules li { display: flex; align-items: center; gap: 0.9rem; }
.tr-help-rules p { font-size: 0.92rem; color: var(--star-2); }
.tr-help-rules strong { color: var(--star-1); font-weight: 560; }
.cru-tile--demo {
  width: 46px; height: 46px;
  aspect-ratio: auto;
  flex: none;
  display: inline-grid;
  font-size: 1.3rem;
}
.tr-help-foot {
  margin-top: 1.2rem;
  font-size: 0.9rem;
  color: var(--star-3);
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}
.tr-help-go { margin-top: 1.3rem; }

/* --------------------------------------------------------------------------
   Toast
   -------------------------------------------------------------------------- */
.tr-toast {
  position: fixed;
  top: calc(var(--nav-h) + 12px);
  left: 50%;
  z-index: 400;
  transform: translateX(-50%);
  max-width: min(92vw, 420px);
  padding: 0.7rem 1.3rem;
  border-radius: 999px;
  border: 1px solid var(--line-bright);
  background: rgba(10, 7, 24, 0.92);
  backdrop-filter: blur(12px);
  color: var(--star-1);
  font-size: 0.9rem;
  text-align: center;
  box-shadow: var(--shadow-deep);
  animation: toast-in 0.4s var(--ease-spring) both;
  pointer-events: none;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-14px); }
  to   { opacity: 1; transform: translateX(-50%); }
}
.tr-toast.is-leaving { animation: toast-in 0.3s ease reverse both; }

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
.tr-vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Reduced motion — the game stays fully playable, all choreography instant.
   (theme.css already zeroes durations globally; these remove the rest.)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cru-tile, .tr-card-flip, .kbd-key { transition: none; }
  .cru-tile[data-state="violet"]::after,
  .tr-card-flip.is-flipped .tr-card-face--front::after { animation: none; content: none; }
  .cru-board.is-loading .cru-tile::before { animation: none; opacity: 0.4; }
  .cru-ring { display: none; }
  /* no turn — the face simply appears */
  .tr-card-flip.is-flipped .tr-card-face--back { animation: none; opacity: 0; }
  .tr-card-flip.is-flipped .tr-card-face--front {
    animation: none;
    transform: perspective(1000px) rotateY(0deg);
    opacity: 1;
  }
}