/* SYNQLO「ちょっと遊んでみる」の枠の中身。配色は play.html とアプリ(lib/theme/choice_colors.dart)に合わせる。
   大きさは幅 320 を基準にした単位 --kt-u(try.js が入れる)。 */
.kt-try[data-kt-try="synqlo"] {
  --kt-accent: #fff; --kt-accent-edge: rgba(0,0,0,.22); --kt-accent-ink: #1f2937;
  --kt-panel: linear-gradient(135deg, #be185d, #7e22ce); --kt-cta-min: 33%;
}
.kt-try[data-kt-try="synqlo"] .kt-lead { color: #6b7280; }
/* サブ導線: ストアのボタンより目立たせない */
.kt-cta-sub { align-self: center; margin-top: 12px; color: #fff; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; opacity: .92; }
.kt-try[data-kt-try="synqlo"] .kt-again { margin-top: 6px; }

.sq { --u: var(--kt-u, 1px); --a: #2563eb; --b: #be185d; --ink: #1f2937; --muted: #6b7280;
  position: absolute; inset: 0; background: linear-gradient(135deg, #fbcfe8, #e9d5ff); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif; }
.sq-view { position: absolute; inset: 0; display: flex; flex-direction: column; padding: calc(var(--u) * 44) calc(var(--u) * 18) calc(var(--u) * 18); }
.sq button { font-family: inherit; cursor: pointer; border: 0; }

/* はじめる */
.sq-start { align-items: center; justify-content: center; text-align: center; }
.sq-icon { width: calc(var(--u) * 72); height: calc(var(--u) * 72); border-radius: calc(var(--u) * 18); box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 18) rgba(0,0,0,.12); }
.sq-title { margin-top: calc(var(--u) * 18); font-size: calc(var(--u) * 23); font-weight: 800; line-height: 1.45; }
.sq-lead { margin: calc(var(--u) * 10) 0 calc(var(--u) * 22); font-size: calc(var(--u) * 13.5); line-height: 1.7; color: #4b5563; }
.sq-primary { width: 100%; padding: calc(var(--u) * 15); border-radius: 999px; color: #fff; font-size: calc(var(--u) * 17); font-weight: 800;
  background: linear-gradient(90deg, #db2777, #9333ea); box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 16) rgba(147,51,234,.3); }

/* 質問 */
.sq-progress { height: calc(var(--u) * 6); border-radius: 999px; background: rgba(255,255,255,.7); overflow: hidden; }
.sq-progress > span { display: block; height: 100%; background: linear-gradient(90deg, #ec4899, #a855f7); transition: width .25s ease; }
.sq-count { margin-top: calc(var(--u) * 10); text-align: center; font-size: calc(var(--u) * 13); font-weight: 700; color: #6b21a8; }
.sq-stage { position: relative; flex: 1; margin: calc(var(--u) * 12) 0 calc(var(--u) * 14); }
.sq-card { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; padding: calc(var(--u) * 18);
  border-radius: calc(var(--u) * 24); background: #fff; box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 28) rgba(0,0,0,.12);
  touch-action: pan-y; cursor: grab; will-change: transform; }
.sq-card:active { cursor: grabbing; }
.sq-card:focus-visible { outline: calc(var(--u) * 3) solid #7e22ce; outline-offset: calc(var(--u) * 2); }
.sq-qtext { font-size: calc(var(--u) * 26); font-weight: 800; line-height: 1.5; text-align: center; }
.sq-tint { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; pointer-events: none; color: #fff;
  font-size: calc(var(--u) * 26); font-weight: 800; text-align: center; padding: calc(var(--u) * 16); }
.sq-tint-a { background: var(--a); }
.sq-tint-b { background: var(--b); }
.sq-choices { display: flex; gap: calc(var(--u) * 8); }
.sq-choice { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 6);
  min-height: calc(var(--u) * 58); padding: calc(var(--u) * 8) calc(var(--u) * 12); border-radius: calc(var(--u) * 16);
  color: #fff; font-size: calc(var(--u) * 14.5); font-weight: 800; line-height: 1.3; text-align: left; }
.sq-choice.sq-a { background: var(--a); }
.sq-choice.sq-b { background: var(--b); text-align: right; }
.sq-choice:disabled { opacity: .45; cursor: default; }
.sq-choice:focus-visible { outline: calc(var(--u) * 3) solid #1f2937; outline-offset: calc(var(--u) * 2); }
.sq-arrow { flex: 0 0 auto; font-size: calc(var(--u) * 17); }
.sq-hint { margin-top: calc(var(--u) * 10); text-align: center; font-size: calc(var(--u) * 11.5); color: #4b5563; }

/* 答えた直後: そろった / ちがった */
.sq-fb { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: calc(var(--u) * 10);
  padding: calc(var(--u) * 20); border-radius: calc(var(--u) * 24); background: #fff; box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 28) rgba(0,0,0,.12);
  animation: sq-pop .28s ease-out both; }
.sq-fb-mark { margin-bottom: calc(var(--u) * 8); text-align: center; font-size: calc(var(--u) * 32); font-weight: 800; }
.sq-fb.sq-hit .sq-fb-mark { color: #be185d; }
.sq-fb.sq-miss .sq-fb-mark { color: #6b7280; }
.sq-fb-row { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 10); font-size: calc(var(--u) * 13); color: var(--muted); font-weight: 700; }
.sq-fb-row b { max-width: 70%; padding: calc(var(--u) * 8) calc(var(--u) * 14); border-radius: 999px; color: #fff; font-size: calc(var(--u) * 15); font-weight: 800; text-align: center; }
.sq-fb-row b.sq-a { background: var(--a); }
.sq-fb-row b.sq-b { background: var(--b); }

/* 結果(下のほうは導線が覆うので、上に寄せる) */
.sq-result { text-align: center; padding-top: calc(var(--u) * 40); }
.sq-rate-label { font-size: calc(var(--u) * 12.5); font-weight: 700; color: #6b21a8; }
.sq-rate { font-size: calc(var(--u) * 62); font-weight: 800; line-height: 1.05; color: #be185d; animation: sq-pop .4s ease-out both; }
.sq-comment { margin: calc(var(--u) * 4) 0 calc(var(--u) * 10); font-size: calc(var(--u) * 12.5); line-height: 1.55; font-weight: 700; color: var(--ink); }
.sq-answers { text-align: left; }
.sq-ans { margin-bottom: calc(var(--u) * 6); padding: calc(var(--u) * 7) calc(var(--u) * 11); border-radius: calc(var(--u) * 12); background: rgba(255,255,255,.78); font-size: calc(var(--u) * 11.5); }
.sq-ans.sq-hit { background: #fff; box-shadow: inset 0 0 0 calc(var(--u) * 1.5) #f9a8d4; }
.sq-ans-q { display: flex; justify-content: space-between; gap: calc(var(--u) * 8); font-weight: 800; }
.sq-ans-pair { display: flex; justify-content: space-between; gap: calc(var(--u) * 8); margin-top: calc(var(--u) * 2); color: #4b5563; }
.sq-mark { flex: 0 0 auto; color: #6b7280; }
.sq-ans.sq-hit .sq-mark { color: #be185d; }

@keyframes sq-pop { from { transform: scale(.86); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sq-fb, .sq-rate { animation: none; } .sq-progress > span { transition: none; } }