/* ============================================================================
 * tarot-cards.css — 動物塔羅抽卡 × 集卡簿 共用視覺層
 *
 * 設計依據：docs/superpowers/specs/2026-08-01-tarot-gacha-ui-design.md（🎨 胖丁）
 *   外殼 = A 皮（Material 3 淺色暖橘，Tailwind token）
 *   舞台 = B 皮（暗金 glassmorphism），一律 scope 在 .tg-dark 底下，不污染全頁。
 *
 * 🔴 所有 class 一律 `tg-` 前綴 —— .card / .bg / .loader 這類裸名在本平台是撞名地雷
 *    （shop.html 商品卡、index.html 遊戲卡都在用）。
 * 🔴 uiverse 元件的裸元素選擇器（原件有一條 `button:active {}`）必須改成 `.tg-btn-ten:active`，
 *    否則會把全站按鈕一起傾斜。
 * ========================================================================== */

/* ── B 皮 token（1:1 取自 quiz/tarot-play.html:39-52，不重新調色）────────── */
.tg-dark {
  --tg-gold: #d4a853;
  --tg-gold-l: #f0d68a;
  --tg-gold-d: #a07830;
  --tg-bg: #0a0a0f;
  --tg-txt: #e8d5a3;
  --tg-txt-d: #7a6e58;
  --tg-glass: rgba(10, 10, 15, .72);
  --tg-glass-border: rgba(212, 168, 83, .22);
  color: var(--tg-txt);
}

/* 金色漸層標題（tarot-play .sec-title 配方）*/
.tg-title-gold {
  background: linear-gradient(135deg, var(--tg-gold-l), var(--tg-gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 12px rgba(212, 168, 83, .3));
}

/* ── 翻牌（複製 quiz/tarot-play.html:331-345，僅加前綴，數值一字不改）────── */
.tg-flip { position: relative; width: 100%; height: 100%; perspective: 1200px; }
.tg-flip-inner {
  width: 100%; height: 100%; position: relative;
  transform-style: preserve-3d;
  transition: transform .85s cubic-bezier(.4, 0, .2, 1);
}
.tg-flip-inner.is-flipped { transform: rotateY(180deg); }
.tg-flip-face {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 6px 30px rgba(0, 0, 0, .5);
}
.tg-flip-back { transform: rotateY(180deg); }
.tg-flip-face img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; }

/* ── 稀有度光暈（暗底上用；色值只從 TAROT_RARITY 的 glow RGB 來）──────────
 * common 50% / R 35%：完全不發光。稀缺感來自對比，不是「大家都閃一點」。 */
.tg-rare--common { box-shadow: 0 0 0 1.5px rgb(203, 213, 225); }
.tg-rare--R { box-shadow: 0 0 0 1.5px rgb(96, 165, 250), 0 0 10px rgba(96, 165, 250, .30); }
.tg-rare--SR {
  box-shadow: 0 0 0 2px rgb(192, 132, 252),
              0 0 18px rgba(192, 132, 252, .45),
              0 0 44px rgba(192, 132, 252, .20);
}
.tg-rare--SSR {
  box-shadow: 0 0 0 2px rgb(250, 204, 21),
              0 0 24px rgba(250, 204, 21, .55),
              0 0 60px rgba(250, 204, 21, .28);
}

/* 旋轉光環 —— From Uiverse.io by SelfMadeSystem（MIT），
 * .card/.bg/.uwu → .tg-rare-card/.tg-rare-glow/.tg-rare-glow-blur，conic 改單色系。
 * 只有 SSR（4s 金）與 SR（6s 紫）有環，轉速差本身就是層級語言。 */
.tg-rare-card { position: relative; }
.tg-rare-glow { position: absolute; z-index: -1; inset: -4px; border-radius: 16px; overflow: hidden; }
.tg-rare-glow-blur { filter: blur(8px); }
.tg-rare-glow::before {
  content: '';
  position: absolute; aspect-ratio: 1 / 1; top: 50%; left: 50%;
  min-width: 150%; min-height: 150%;
  transform-origin: 0% 0%;
  transform: rotate(0deg) translate(-50%, -50%);
  background-image: conic-gradient(hsl(48, 96%, 53%), hsl(38, 96%, 58%), hsl(52, 98%, 70%),
                                   hsl(38, 96%, 58%), hsl(48, 96%, 53%));
  animation: tg-rotate 4s linear infinite;
}
.tg-rare--sr-halo .tg-rare-glow::before {
  background-image: conic-gradient(hsl(276, 84%, 75%), hsl(291, 84%, 68%), hsl(262, 84%, 80%),
                                   hsl(291, 84%, 68%), hsl(276, 84%, 75%));
  animation-duration: 6s;
}
@keyframes tg-rotate {
  from { transform: rotate(0deg) translate(-50%, -50%); }
  to   { transform: rotate(360deg) translate(-50%, -50%); }
}

/* ── 稀有度光爆（純 radial-gradient，零素材）────────────────────────────── */
.tg-burst {
  position: absolute; inset: 0; pointer-events: none; border-radius: 50%; z-index: 5;
  background: radial-gradient(circle, rgba(250, 204, 21, .85) 0%, rgba(250, 204, 21, .35) 42%, transparent 70%);
  animation: tg-burst .6s cubic-bezier(.16, 1, .3, 1) forwards;
}
.tg-burst--sr {
  background: radial-gradient(circle, rgba(192, 132, 252, .8) 0%, rgba(192, 132, 252, .3) 42%, transparent 70%);
  animation-duration: .5s;
}
@keyframes tg-burst {
  0%   { transform: scale(.3); opacity: .9; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* 全屏金色斜掃（十連含 SSR 時掃一次，不論幾張）*/
.tg-sweep {
  position: fixed; inset: 0; pointer-events: none; z-index: 90;
  background: linear-gradient(105deg, transparent 40%, rgba(240, 214, 138, .55) 50%, transparent 60%);
  background-size: 260% 100%;
  animation: tg-sweep .7s ease-out forwards;
}
@keyframes tg-sweep {
  from { background-position: 180% 0; }
  to   { background-position: -80% 0; }
}

/* 懸念搖晃（單抽卡背）*/
@keyframes tg-shake {
  0%, 100% { transform: rotate(0deg); }
  25%  { transform: rotate(-3deg); }
  75%  { transform: rotate(3deg); }
}
.tg-shake { animation: tg-shake .2s ease-in-out; }

/* 入場彈跳（沿用 app/gacha.html zfPop 曲線）*/
@keyframes tg-pop {
  0%   { transform: scale(.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.tg-pop { animation: tg-pop .35s cubic-bezier(.18, .9, .32, 1.4) both; }

/* ── 召喚 loader —— From Uiverse.io by VashonG（MIT），.loader → .tg-summon-loader ──
 * 🔴 改名必要：.loader 是全站最容易撞的 class 之一。
 * --hue 固定 42（金）：依稀有度改色會劇透。 */
.tg-summon-loader-wrap {
  position: relative; width: 88px; height: 88px; margin: 0 auto;
}
.tg-summon-loader {
  --hue: 42; --size: 88px; --border: 8px; --speed: .9s; --blur: var(--border);
  width: var(--border); aspect-ratio: 1; background: #fff; border-radius: 50%;
  position: absolute; left: calc(50% - var(--border) / 2); top: calc(50% - var(--border) / 2);
  --y: calc((var(--size) * -0.5) + (var(--border) * 0.5));
  transform: rotate(0deg) translateY(var(--y));
  animation: tg-loader-spin var(--speed) infinite linear;
}
.tg-summon-loader::before {
  content: ""; position: absolute; inset: calc(var(--border) * -0.5);
  border-radius: 50%; background: #fff; filter: blur(var(--blur)); z-index: -1;
}
.tg-summon-loader::after {
  content: ""; width: var(--size); aspect-ratio: 1; position: absolute;
  top: 0; left: 50%; translate: -50% 0; border-radius: 50%;
  background: conic-gradient(#fff, hsl(var(--hue), 100%, 70%), hsl(var(--hue), 100%, 10%), transparent 65%);
  mask: radial-gradient(transparent calc(((var(--size) * 0.5) - var(--border)) - 1px),
                        #fff calc((var(--size) * 0.5) - var(--border)));
  -webkit-mask: radial-gradient(transparent calc(((var(--size) * 0.5) - var(--border)) - 1px),
                                #fff calc((var(--size) * 0.5) - var(--border)));
}
@keyframes tg-loader-spin { to { transform: rotate(-360deg) translateY(var(--y)); } }

/* ── 十連主按鈕 —— From Uiverse.io by VashonG（MIT），
 * .neo-pop-tilted-button → .tg-btn-ten；配色改平台 primary 系。
 * 🔴 原件最後一條是裸的 `button:active{}` —— 這裡改成 .tg-btn-ten:active，
 *    否則整站按鈕都會被套上 perspective 傾斜。
 * ⚠️ 方角 + 傾斜與平台 M3 圓角語彙衝突 → 只准出現在 .tg-dark 暗金區。 */
.tg-btn-ten {
  border: 0.1px; padding: 0 0 6px 0; box-shadow: 1px 5px 7px rgba(0, 0, 0, .5);
  position: relative; overflow: hidden; background-color: #7A3A00; color: #241000;
  font-size: 1rem; font-weight: 700; cursor: pointer;
  transform: perspective(180px) rotateX(30deg) translateY(2px);
  transition: transform .3s ease, background-color .3s ease;
}
.tg-btn-ten::before,
.tg-btn-ten > span::before {
  content: ""; position: absolute; top: 0; left: 60%; width: 35%; height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, .85) 5px, rgba(255, 255, 255, 0) 5px,
                              rgba(255, 255, 255, 0) 10px, rgba(255, 255, 255, .85) 2px);
  animation: tg-shimmer 5.5s infinite linear;
}
.tg-btn-ten > span {
  background: #f38020; padding: .7rem 1.1rem; position: relative; z-index: 1;
  display: block; border-radius: 0; border: 1px solid rgba(73, 74, 75, .6);
  line-height: 1.25;
}
.tg-btn-ten:focus { outline: none; }
.tg-btn-ten:focus-visible { box-shadow: 0 0 0 3px rgba(243, 128, 32, .55); }
.tg-btn-ten:active { transform: perspective(170px) rotateX(36deg) translateY(5px); }
.tg-btn-ten[disabled] { opacity: .5; cursor: not-allowed; }
@keyframes tg-shimmer {
  0%   { transform: translateX(-1950%); }
  100% { transform: translateX(100%); }
}

/* 單抽按鈕（B 皮金框，與十連配對但層級較低）*/
.tg-btn-single {
  border: 1px solid var(--tg-glass-border, rgba(212, 168, 83, .22));
  background: linear-gradient(180deg, rgba(212, 168, 83, .18), rgba(212, 168, 83, .06));
  color: #f0d68a; border-radius: 12px; padding: .7rem .9rem;
  font-weight: 700; cursor: pointer; line-height: 1.25;
  transition: background .2s ease, transform .12s ease;
}
.tg-btn-single:hover { background: linear-gradient(180deg, rgba(212, 168, 83, .30), rgba(212, 168, 83, .12)); }
.tg-btn-single:active { transform: translateY(1px); }
.tg-btn-single[disabled] { opacity: .5; cursor: not-allowed; }

/* ── amicro 覆寫（不改庫，只在使用端 scope 調 CSS 變數 / 尺寸）──────────
 * 卡片高度一律 = 寬 × 1.791（卡面 512:917 的精確比例），手機優先用 clamp 收斂。 */
.tg-deck.amc, .tg-fan.amc {
  --amc-card-w: clamp(3.4rem, 14vw, 6rem);
  --amc-card-h: calc(var(--amc-card-w) * 1.791);
  --amc-radius: 10px;
}
.tg-deck .amc-card { border-color: rgba(212, 168, 83, .3); }
.tg-deck .amc-face { background: transparent; }
.tg-deck .amc-face img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tg-fan .amc-card { border: 0; box-shadow: none; overflow: visible; }
.tg-fan .amc-face { background: transparent; overflow: visible; }

/* CoverFlow：卡面比例改成塔羅的 512:917（庫預設是 3/4）。
 * --amc-card-w / -h 由 JS 依 cardWidth 設在 host 上（stage 尺寸＝卡片靜態位置的參考框）。*/
.tg-flow .amc-card--flow { aspect-ratio: 512 / 917; box-shadow: none; border: 0; }
.tg-flow .amc-face { background: transparent; }
.tg-flow .amc-face img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* 🔴 stage 要比卡片高 —— active 卡是 scale(1.1) 再 translateZ(+70)（perspective 1000
 *    ⇒ 再放大 ~1.075，合計 ~1.18）。stage 只留卡片原尺寸的話，放大的卡會蓋掉下方的
 *    ‹ 圓點 › 控制列與卡名。1.22 給上下各約 11% 餘裕。
 * 🔴 選擇器必須帶 [data-amc-effect]：庫內是
 *    `.amc[data-amc-effect^='cover-flow'] .amc-stage{height:140px}`（特異性 0,3,0），
 *    只寫 `.tg-flow .amc-stage`（0,2,0）會被蓋掉、完全不生效。 */
.tg-flow.amc[data-amc-effect^='cover-flow'] .amc-stage {
  height: calc(var(--amc-card-h) * 1.22);
  background: transparent;
}

/* ── 集卡簿格子 ───────────────────────────────────────────────────────── */
.tg-cell {
  position: relative; aspect-ratio: 200 / 358; border-radius: 10px; overflow: hidden;
  border: 2px solid transparent; background: #e4e2e1; cursor: pointer; display: block;
  width: 100%; padding: 0; appearance: none;
}
.tg-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tg-cell--locked img { filter: grayscale(.6) brightness(.55); }
.tg-cell--locked { border-color: #ddc1b1; }
.tg-cell-num {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font: 900 clamp(16px, 4.5vw, 26px)/1 'Plus Jakarta Sans', 'Noto Sans TC', sans-serif;
  color: rgba(232, 213, 163, .78); text-shadow: 0 2px 8px rgba(0, 0, 0, .6); letter-spacing: 1px;
  pointer-events: none;
}
.tg-cell-chip {
  position: absolute; top: 3px; left: 3px; font-size: 9px; font-weight: 900;
  padding: 1px 5px; border-radius: 4px; color: #fff; line-height: 1.4; pointer-events: none;
}
.tg-cell-count {
  position: absolute; right: 3px; bottom: 3px; font-size: 10px; font-weight: 900;
  padding: 1px 6px; border-radius: 999px; line-height: 1.5; pointer-events: none;
  background: rgba(0, 0, 0, .62); color: #fff;
}

/* ── overlay ──────────────────────────────────────────────────────────── */
.tg-overlay {
  position: fixed; inset: 0; z-index: 80; display: none;
  align-items: center; justify-content: center; padding: 16px;
  background: radial-gradient(circle at 50% 40%, rgba(10, 10, 15, .82), rgba(10, 10, 15, .94));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.tg-overlay.is-open { display: flex; }

/* ── 無障礙：降低動態偏好時，所有自寫動效一律關掉（amicro 庫自己會處理）── */
@media (prefers-reduced-motion: reduce) {
  .tg-flip-inner { transition: none; }
  .tg-burst, .tg-sweep, .tg-shake, .tg-pop { animation: none !important; }
  .tg-rare-glow::before { animation: none; }
  .tg-summon-loader { animation-duration: 2s; }
  .tg-btn-ten::before, .tg-btn-ten > span::before { animation: none; }
}