/* TWINS DECO「ちょっと遊んでみる」の枠の中身(ふたりの波紋)。アプリの占い画面と結果カードと同じ配色。
   大きさは幅 320 を基準にした単位 --kt-u(try.js が入れる)。フォントはアプリと同じく端末標準の太字。 */
.kt-try[data-kt-try="ripple"] { --kt-accent: #D6216E; --kt-accent-edge: #9C174E; --kt-accent-ink: #fff; --kt-bezel: #3A2E39; --kt-panel: #FFF6E9; --kt-cta-min: 32%; }
.kt-try[data-kt-try="ripple"] .kt-lead { color: #6b6470; text-wrap: balance; }
/* 導線の地がクリーム色なので、文字は濃い色にする */
.kt-try[data-kt-try="ripple"] .kt-cta, .kt-try[data-kt-try="ripple"] .kt-cta-main:not([href]) { color: #3A2E39; }
.kt-try[data-kt-try="ripple"] .kt-again { color: #6b6470; }

.tr { --u: var(--kt-u, 1px); position: absolute; inset: 0; background: #1B1538; color: #fff; font-weight: 900; }
.tr canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tr-text { position: absolute; left: 0; right: 0; margin: 0; padding: 0 calc(var(--u) * 16); text-align: center;
  font-size: calc(var(--u) * 16.5); line-height: 1.1; pointer-events: none; }
.tr-p2 { bottom: calc(var(--u) * 48); }
/* 上の人は向かい側から見るので、アプリの対面モードと同じく逆さにする */
.tr-p1 { top: calc(var(--u) * 48); transform: rotate(180deg); }
.tr-spot { position: absolute; left: 50%; width: calc(var(--u) * 130); height: calc(var(--u) * 130); margin: calc(var(--u) * -65) 0 0 calc(var(--u) * -65);
  padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; }
.tr-s1 { top: 25%; } .tr-s2 { top: 75%; }
.tr-spot:disabled { cursor: default; }
.tr-spot:focus-visible { outline: calc(var(--u) * 3) solid #fff; outline-offset: calc(var(--u) * -18); }
.tr-done .tr-spot, .tr-done .tr-text { display: none; }

/* 結果: クリーム色の地に夜空のカード。下の 32% は共通の導線が覆う */
.tr-result { position: absolute; inset: 0; background: #FFF6E9; animation: tr-fade .25s linear both; }
.tr-result[hidden] { display: none; }
.tr-card { position: absolute; top: calc(var(--u) * 38); left: calc(var(--u) * 20); right: calc(var(--u) * 20); bottom: calc(32% + var(--u) * 8);
  display: flex; flex-direction: column; align-items: center; padding: calc(var(--u) * 20) calc(var(--u) * 14) calc(var(--u) * 12);
  background: linear-gradient(#241B4B, #5B3C8C, #E88FB8); box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 14) rgba(0,0,0,.22);
  text-align: center; line-height: 1.35; }
.tr-title { font-size: calc(var(--u) * 14); }
.tr-main { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 0; }
.tr-label { font-size: calc(var(--u) * 12); font-weight: 800; }
.tr-pct { font-size: calc(var(--u) * 80); line-height: 1; font-variant-numeric: tabular-nums; }
.tr-type { margin-top: calc(var(--u) * 4); font-size: calc(var(--u) * 24); white-space: nowrap; }
.tr-msg { margin: calc(var(--u) * 6) 0 0; font-size: calc(var(--u) * 12); font-weight: 700; text-wrap: balance; }
.tr-note { font-size: calc(var(--u) * 9); font-weight: 400; opacity: .7; }
.tr-store { font-size: calc(var(--u) * 10.5); font-weight: 700; opacity: .85; }
.tr-app { font-size: calc(var(--u) * 13); font-weight: 800; letter-spacing: .08em; }
@keyframes tr-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tr-result { animation: none; } }