/* Speech to Epistle — bare dictation page */
.ste-wrap { max-width: 640px; margin: 0 auto; text-align: center; }
.ste-mic {
  width: 96px; height: 96px; border-radius: 50%;
  font-size: 44px; line-height: 1; cursor: pointer;
  background: radial-gradient(circle at 50% 35%, #3a0d12, #12060a);
  border: 2px solid #8f1d22; color: #f3d9dc;
  box-shadow: 0 0 18px rgba(160, 30, 35, 0.35);
  transition: transform .12s ease, box-shadow .2s ease;
}
.ste-mic:active { transform: scale(0.94); }
.ste-mic:disabled { opacity: 0.4; cursor: default; }
.ste-mic.live {
  border-color: #ff4d4d; color: #fff;
  box-shadow: 0 0 26px rgba(255, 60, 60, 0.65);
  animation: ste-pulse 1.6s ease-in-out infinite;
}
@keyframes ste-pulse { 50% { box-shadow: 0 0 40px rgba(255, 60, 60, 0.9); } }
.ste-status { margin: 14px 0 6px; }
.ste-interim { min-height: 1.6em; color: #c98a8a; font-style: italic; margin: 0 0 10px; }
.ste-label { display: block; text-align: left; }
.ste-text { width: 100%; margin-top: 6px; }
.ste-actions { display: flex; gap: 10px; justify-content: center; margin: 12px 0; flex-wrap: wrap; }

/* Wave 1: modes, speaker chips, shaping, captions */
.ste-modes { display: flex; gap: 8px; justify-content: center; margin: 12px 0 4px; }
.ste-tab { background: none; border: 1px solid #8f1d22; color: #c98a8a; border-radius: 999px; padding: 6px 18px; cursor: pointer; font-size: 14px; }
.ste-tab.on { background: #8f1d22; color: #fff; }
.ste-speakers { display: flex; gap: 8px; justify-content: center; align-items: center; margin: 8px 0; flex-wrap: wrap; }
.ste-speakers[hidden] { display: none; }
.ste-chip { width: 42px; height: 42px; border-radius: 50%; border: 1px solid #8f1d22; background: none; color: #c98a8a; font-size: 16px; cursor: pointer; }
.ste-chip.on { background: #8f1d22; color: #fff; box-shadow: 0 0 12px rgba(255, 60, 60, 0.5); }
.ste-select { background: #12060a; color: #f3d9dc; border: 1px solid #8f1d22; border-radius: 8px; padding: 8px 10px; font-size: 14px; }
.ste-captions { position: fixed; inset: 0; background: #000; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; cursor: pointer; }
.ste-captions[hidden] { display: none; }
.ste-captions p:first-child { font-size: 7vw; line-height: 1.35; color: #fff; margin: 0 0 16px; max-width: 100%; overflow-wrap: break-word; }

/* Privacy cover: a boring decoy screen over prying eyes */
.ste-privacy { position: fixed; inset: 0; background: #0a0a0c; z-index: 10000; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; }
.ste-privacy[hidden] { display: none; }
.ste-privacy-mic { font-size: 64px; margin: 0 0 12px; opacity: 0.7; }
.ste-privacy p { color: #8a8a8e; margin: 4px 0; }

/* Session timer beside the mic */
.ste-microw { display: flex; align-items: center; justify-content: center; gap: 14px; }
.ste-timer { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 22px; color: #c8c8ce; min-width: 70px; text-align: left; }
.ste-timer.on { color: #ff6b6b; }

/* War deck: the tactical thumb bar under the box */
.ste-deck { position: relative; margin: 12px 0 6px; padding: 14px 10px 10px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(34,9,12,.94), rgba(10,4,5,.97));
  border: 1px solid rgba(255,96,96,.30);
  box-shadow: inset 0 1px 0 rgba(255,150,150,.12), 0 8px 24px rgba(0,0,0,.55); }
.ste-deck::before { content: ''; position: absolute; top: 0; left: 16px; right: 16px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #ff2d2d 20%, #ffc36b 50%, #ff2d2d 80%, transparent);
  box-shadow: 0 0 12px rgba(255,64,64,.85); }
.ste-deck-row { display: flex; gap: 8px; }
.ste-deck-row.r1 { margin-bottom: 8px; }
.ste-deck-row .ste-key { flex: 1 1 0; min-width: 0; }
.ste-deck-row.r2 .ste-key { flex: 1 1 0; }
.ste-deck-row.r2 .ste-key-prime { flex: 1.5 1 0; }
.ste-key { min-height: 56px; padding: 6px 8px; font-size: 15px; font-weight: 700; letter-spacing: .03em;
  color: #ffd9d9; border-radius: 12px; cursor: pointer; font-family: inherit;
  border: 1px solid rgba(255,112,112,.38);
  background: linear-gradient(180deg, #47161a 0%, #2b0d10 45%, #150708 100%);
  box-shadow: 0 3px 0 rgba(0,0,0,.9), 0 7px 15px rgba(0,0,0,.5),
    inset 0 1px 1px rgba(255,178,178,.38), inset 0 -3px 7px rgba(0,0,0,.55);
  text-shadow: 0 2px 2px #000, 0 0 10px rgba(255,72,72,.42);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.ste-key:active { transform: translateY(3px);
  background: linear-gradient(180deg, #5f1f24 0%, #341114 55%, #1d0a0c 100%);
  box-shadow: 0 0 0 rgba(0,0,0,.9), 0 2px 7px rgba(0,0,0,.55),
    inset 0 2px 9px rgba(0,0,0,.68), 0 0 16px rgba(255,60,60,.3); }
.ste-key-prime {
  background: linear-gradient(180deg, #6e4c1c 0%, #41300f 45%, #211505 100%);
  border-color: rgba(255,202,122,.55); color: #ffe4ac;
  text-shadow: 0 2px 2px #000, 0 0 11px rgba(255,182,74,.5);
  box-shadow: 0 3px 0 rgba(0,0,0,.9), 0 7px 15px rgba(0,0,0,.5),
    inset 0 1px 1px rgba(255,232,190,.42), inset 0 -3px 7px rgba(0,0,0,.6),
    0 0 14px rgba(255,178,66,.25); }
.ste-key-prime:active {
  background: linear-gradient(180deg, #8a6124 0%, #4e3a13 55%, #2a1d07 100%);
  box-shadow: 0 0 0 rgba(0,0,0,.9), 0 2px 7px rgba(0,0,0,.55),
    inset 0 2px 9px rgba(0,0,0,.68), 0 0 20px rgba(255,190,80,.5); }
.ste-deck-slot { flex: 1 1 0; min-width: 0; display: flex; }
.ste-deck-slot:empty { display: none; }
.ste-deck .skb-toggle { flex: 1 1 0; width: auto; height: auto; min-height: 56px; margin: 0;
  border-radius: 12px; font-size: 24px;
  border: 1px solid rgba(255,112,112,.38);
  background: linear-gradient(180deg, #47161a 0%, #2b0d10 45%, #150708 100%);
  box-shadow: 0 3px 0 rgba(0,0,0,.9), 0 7px 15px rgba(0,0,0,.5),
    inset 0 1px 1px rgba(255,178,178,.38), inset 0 -3px 7px rgba(0,0,0,.55); }
.ste-deck .skb-toggle:active { transform: translateY(3px); }
/* Golden face plate + dark-sparkle descent on /ste. */
.ste-plate-zone { position: relative; }
.ste-faceplate {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; width: 100%; cursor: pointer;
  background: radial-gradient(ellipse at center, #100906 0%, #0d0705 70%, #0a0504 100%);
  border: 1px solid #6b5a2a; border-radius: 18px;
  padding: 18px; -webkit-tap-highlight-color: transparent;
  transition: opacity .6s ease, transform .6s ease;
}
.ste-faceplate img {
  width: min(72%, 300px); aspect-ratio: 1; object-fit: cover; border-radius: 50%;
  box-shadow: 0 0 44px rgba(255,190,80,.35), 0 0 120px rgba(255,150,50,.18);
  animation: plate-flip 48s linear infinite;
}
@keyframes plate-flip { to { transform: rotateY(360deg); } }
.ste-faceplate-hint {
  color: #ffd98a; font-size: 13px; letter-spacing: .22em; text-transform: uppercase;
  opacity: .75; animation: hint-pulse 3.2s ease-in-out infinite;
}
@keyframes hint-pulse { 0%,100% { opacity: .35 } 50% { opacity: .9 } }
.ste-faceplate.lifted { opacity: 0; pointer-events: none; transform: translateY(-16px) scale(.97); }
.ste-recover {
  position: absolute; top: 8px; right: 8px; z-index: 6;
  opacity: 0; pointer-events: none; transition: opacity .4s ease;
  background: rgba(20,10,6,.85); color: #ffd98a; border: 1px solid #6b5a2a;
  border-radius: 999px; padding: 6px 12px; font-size: 13px; cursor: pointer;
}
.ste-recover.show { opacity: 1; pointer-events: auto; }
#ste-veil {
  position: fixed; inset: 0; z-index: 60; background: #000;
  opacity: 0; pointer-events: none;
}
#ste-sparkles {
  position: fixed; inset: 0; z-index: 61; pointer-events: none; opacity: 0; overflow: hidden;
}
#ste-sparkles .sparkle {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(255,222,150,.95) 35%, rgba(255,200,120,0) 70%);
  animation: sparkle-twinkle 3.4s ease-in-out infinite;
}
@keyframes sparkle-twinkle { 0%,100% { transform: scale(.35); opacity: .2 } 50% { transform: scale(1); opacity: 1 } }
@media (prefers-reduced-motion: reduce) {
  .ste-faceplate img, .ste-faceplate-hint, #ste-sparkles .sparkle { animation: none; }
}
/* 3D rectangular jewel coin — both faces glassy, side profile on the edges. */
.coin3d { width: min(94%, 430px); aspect-ratio: 1.586; perspective: 1000px; }
.coin-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: coin-flip 44s linear infinite; }
@keyframes coin-flip { to { transform: rotateY(360deg); } }
.coin-face { position: absolute; inset: 0; border-radius: 12px; background-size: cover; background-position: center; }
.coin-face::after { content: ''; position: absolute; inset: 0; border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.06) 30%, transparent 55%, rgba(255,255,255,.14) 100%); }
.coin-front { background-image: url('/img/shrine-coin-front.webp'); transform: translateZ(22px); }
.coin-back { background-image: url('/img/shrine-coin-back.webp?v=20260927b'); transform: rotateY(180deg) translateZ(22px); }
.coin-edge { position: absolute; background-image: url('/img/shrine-coin-edge.webp'); background-size: cover; background-position: center;
  border-top: 1px solid rgba(255,220,150,.55); border-bottom: 1px solid rgba(120,80,20,.8); }
.edge-t { top: 0; left: 0; width: 100%; height: 44px; transform: translateY(-22px) rotateX(90deg); }
.edge-b { bottom: 0; left: 0; width: 100%; height: 44px; transform: translateY(22px) rotateX(90deg); }
.edge-l { top: 0; left: 0; width: 44px; height: 100%; transform: translateX(-22px) rotateY(90deg); }
.edge-r { top: 0; right: 0; width: 44px; height: 100%; transform: translateX(22px) rotateY(90deg); }