/* v0.4.32 · purposeful five-second breaks, readable rewards, branded entry. */
.pair-reaction-dialog { box-sizing:border-box; width:min(470px,calc(100vw - 28px)); max-height:calc(100dvh - 32px); overflow:auto; padding:24px; border:1px solid var(--line); border-radius:26px; color:var(--ink); background:var(--panel); box-shadow:0 24px 90px #090a2259; text-align:center; }
.pair-reaction-dialog::backdrop { background:#101329ad; backdrop-filter:blur(5px); }
.pair-break-art { height:54px; position:relative; display:flex; align-items:center; justify-content:center; gap:14px; font-size:40px; }
.pair-break-art span:last-child { font-size:25px; transform:rotate(12deg); }
.pair-break-kicker { font-size:.7rem; letter-spacing:.16em; font-weight:800; color:var(--ux-purple); margin:14px 0 5px; }
.pair-reaction-dialog h2 { font-size:clamp(1.4rem,5vw,1.85rem); margin:0; color:var(--ink); }
.pair-break-hint { color:var(--muted); margin:8px 0 18px; }
.pair-reaction-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.pair-reaction { display:flex; align-items:center; justify-content:center; gap:8px; min-height:76px; border-radius:18px; border:1px solid var(--line); background:var(--ux-soft); color:var(--ink); margin:0; padding:10px 4px; box-shadow:none; }
.pair-reaction-emoji { font-size:clamp(1.75rem,6vw,2.3rem); line-height:1.3; }
.pair-reaction-count { font-size:1rem; font-weight:800; }
.pair-reaction[aria-pressed="true"] { border:2px solid var(--ux-purple); background:var(--ux-purple-soft); }
.pair-break-next { display:flex; align-items:center; justify-content:flex-start; gap:10px; text-align:left; margin:20px 0 0; border-top:1px solid var(--line); padding-top:17px; }
.pair-break-next>div { min-width:0; flex:1; }
.pair-break-next strong { display:block; overflow-wrap:anywhere; font-size:.95rem; line-height:1.4; }
.pair-break-next .meta { font-size:.65rem; }
.pair-break-clock { flex:0 0 40px; display:grid; place-items:center; min-height:40px; padding:5px; border-radius:50%; font-size:1.2rem; font-weight:850; color:var(--ux-purple); background:var(--ux-purple-soft); font-variant-numeric:tabular-nums; }
.pair-break-auto { color:var(--muted); font-size:.75rem; margin:14px 0 0; }
#pairReactionError { font-size:.85rem; color:var(--ux-purple); }
.phase-transition-screen .phase-complete-label { color:var(--ux-purple); font-weight:750; font-size:.85rem; }
.phase-transition-screen h2 { margin:12px 0; }
.phase-transition-screen .start-countdown-number { color:var(--ux-purple); }
.phase-transition-screen .phase-next-detail { max-width:30ch; margin:0 auto; color:var(--muted); }
.choice-card .choice-icon.brand-choice-icon { width:126px; height:80px; border-radius:0; background:none; margin:0 0 4px; display:block; }
.brand-choice-icon img { display:block; width:126px; height:80px; object-fit:contain; }
.choice-card { overflow:hidden; }
.arcade-discovery-tip { display:flex; align-items:flex-start; gap:10px; padding:12px 14px; margin:10px 0 16px; border:1px solid var(--line); border-left:3px solid var(--ux-purple); border-radius:12px; color:var(--ink); background:var(--ux-soft); font-size:.88rem; line-height:1.5; }
.arcade-discovery-tip .tip-icon { font-size:1.35rem; flex-shrink:0; }
.arcade-discovery-tip strong { font-weight:800; }
.arcade-prize-card { border:1px solid var(--ux-purple); background:var(--ux-purple-soft); color:var(--ink); border-radius:16px; margin:14px 0; padding:16px; text-align:left; display:flex; align-items:flex-start; gap:12px; overflow-wrap:anywhere; }
.arcade-prize-card[hidden],.arcade-achievements[hidden] { display:none; }
.arcade-prize-card .prize-icon { font-size:2rem; line-height:1.2; }
.arcade-prize-card .prize-copy { min-width:0; }
.arcade-prize-card .prize-copy strong { display:block; font-size:1.1rem; }
.arcade-prize-card .prize-copy small { display:block; margin:5px 0 0; color:var(--muted); line-height:1.45; }
.prize-kicker { display:block; color:var(--ux-purple); letter-spacing:.08em; font-weight:800; font-size:.65rem; margin-bottom:4px; }
.arcade-achievements { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:12px 0; }
.arcade-achievement { background:var(--ux-gold-soft); color:var(--ux-gold); padding:7px 11px; border-radius:99px; font-weight:750; font-size:.85rem; }
.arcade-achievement small { display:block; font-size:.75em; font-weight:600; margin-top:2px; }
.room-fish-record { background:var(--ux-gold-soft); color:var(--ux-gold); border-radius:14px; border:1px solid var(--ux-gold); padding:14px; line-height:1.5; margin:12px 0 18px; overflow-wrap:anywhere; }
.room-fish-record strong { display:block; }
@media(prefers-reduced-motion:no-preference) {
  .pair-reaction-dialog[open] { animation:pair-break-enter .22s ease-out both; }
  .pair-reaction.just-reacted .pair-reaction-emoji { animation:pair-reaction-pop .32s ease-out 1; }
  @keyframes pair-break-enter { from { opacity:0; transform:translateY(10px) scale(.98); } to { opacity:1; transform:none; } }
  @keyframes pair-reaction-pop { 0%,100% { transform:none; } 40% { transform:translateY(-5px) rotate(-8deg) scale(1.14); } }
}
@media(max-width:350px) { .pair-reaction-dialog { padding:18px; } .pair-reaction-grid { gap:8px; } .pair-reaction { min-height:65px; } }
