:root {
  color-scheme: dark;
  --bg: #101327;
  --card: rgba(26, 30, 57, .82);
  --card-solid: #1b1e3a;
  --card-2: #202441;
  --stroke: rgba(255, 255, 255, .09);
  --stroke-strong: rgba(255, 255, 255, .18);
  --text: #f5f4ff;
  --muted: #a4abc6;
  --dim: #707998;
  --lavender: #a49aff;
  --purple: #8e80f8;
  --mint: #8ce9d1;
  --pink: #ffc1cb;
  --shadow: 0 26px 80px rgba(0,0,0,.28);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--bg); color: var(--text); overflow-x: hidden; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .46; }
button:focus-visible, input:focus-visible { outline: 3px solid rgba(164,154,255,.8); outline-offset: 3px; }
::selection { background: #7773c8; }
.ambient { position: fixed; z-index: -2; pointer-events:none; border-radius: 50%; filter: blur(6px); }
.ambient-one { background: radial-gradient(circle, rgba(104,94,227,.24), transparent 72%); width: 850px; height: 850px; left: -340px; top: -300px; }
.ambient-two { background: radial-gradient(circle, rgba(36,162,145,.13), transparent 74%); width: 720px; height: 720px; right: -300px; bottom: -330px; }
.noise { position: fixed; inset: 0; pointer-events: none; z-index:-1; opacity:.14; background-image: radial-gradient(rgba(255,255,255,.25) .6px, transparent .6px); background-size: 22px 22px; mask-image: linear-gradient(to bottom, black, transparent 80%); }
.app-shell { width:min(1080px, calc(100% - 64px)); margin:0 auto; position:relative; }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:15px; padding: 31px 0 12px; }
.brand { display:flex; align-items:center; gap:12px; color:var(--text); text-decoration:none; font-size:19px; font-weight:780; letter-spacing:.8px; }
.brand-mark { display:inline-flex; align-items:center; justify-content:center; width:39px; height:39px; border:1px solid rgba(183,179,255,.22); background: rgba(164,154,255,.14); border-radius:14px; }
.brand-mark svg { width:27px; height:27px; }
.header-right { display:flex; gap:10px; align-items:center; }
.online-badge, .room-chip { border:1px solid var(--stroke); color:#b8bfda; font-size:12px; background:rgba(255,255,255,.045); padding:9px 12px; border-radius:99px; white-space:nowrap; }
.online-badge i { display:inline-block; width:7px;height:7px;background:var(--mint);border-radius:50%; margin-right:7px; box-shadow:0 0 12px rgba(140,233,209,.8); }
.room-chip { color:var(--mint); font-weight:750; letter-spacing:1.2px; }
.lobby { display:grid; grid-template-columns: 1.08fr .92fr; gap:7%; align-items:center; min-height:calc(100dvh - 140px); padding: 28px 0 65px; }
.hero { padding:10px 0 20px; }
.eyebrow { display:inline-flex; align-items:center; gap:7px; font-weight:650; letter-spacing:2.3px; font-size:12px; color:var(--mint); }
.dot-star { color:var(--lavender); font-size:17px; }
.hero h1 { letter-spacing:-2px; font-weight:850; font-size:clamp(44px,5.25vw,72px); line-height:1.28; margin:23px 0; }
.gradient-text { background:linear-gradient(105deg, var(--lavender), #b9b3ff 36%, #94dddf 90%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-desc { max-width:440px; font-size:16px; line-height:2; color:var(--muted); margin:0; }
.orbit { height:215px; margin-top:32px; position:relative; overflow:hidden; }
.orbit-ring { position:absolute; width:410px; height:168px; top:27px; left:15px; border-radius:50%; transform:rotate(-13deg); border:1px dashed rgba(177,168,255,.20); }
.bubble { position:absolute; min-width:118px; border-radius:19px 19px 19px 7px; padding:17px 21px; box-shadow:0 12px 50px rgba(0,0,0,.15); font-size:24px; font-weight:800; }
.bubble-a { background:#a59aff; color:#221f49; left:40px; top:49px; transform:rotate(-10deg); }
.bubble-b { background:#86e6cd; color:#153d38; right:69px; top:102px; transform:rotate(8deg); border-radius:19px 19px 7px 19px; }
.sparkle { position:absolute; font-size:24px; color:#b1a5ff; }
.sparkle.one { left: 54%; top:13%; }
.sparkle.two { right: 7%; top:27%; color:var(--mint); }
.sparkle.three { left: 8%; bottom:4%; font-size:16px; }
.panel { background: var(--card); border:1px solid var(--stroke-strong); border-radius:27px; box-shadow:var(--shadow); backdrop-filter: blur(18px); padding:34px; }
.panel-top-icon { width:51px; height:51px; display:grid; place-items:center; background:rgba(164,154,255,.14); color:var(--lavender); border-radius:17px; margin-bottom:21px; }
.panel-top-icon svg { width:25px;height:25px; }
.panel h2 { margin:0; font-size:27px; letter-spacing:-.4px; }
.panel-subtitle { margin:9px 0 26px; line-height:1.75; font-size:13.5px; color:var(--muted); }
.field { display:block; margin-bottom:16px; }
.field-label { display:block; color:#d3d5ea; font-size:13px; font-weight:640; margin-bottom:10px; }
.input { display:block; width:100%; border:1px solid rgba(255,255,255,.13); background:rgba(9,12,30,.56); color:var(--text); outline:none; height:55px; padding:0 17px; border-radius:14px; font-size:16px; transition:border .2s, box-shadow .2s; }
.input::placeholder { color:#666f90; }
.input:focus { border-color:var(--lavender); box-shadow:0 0 0 3px rgba(164,154,255,.11); }
.input-code { letter-spacing:3px; text-transform:uppercase; font-weight:760; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; border:0; padding:0 22px; min-height:54px; background:var(--purple); color:#16162e; border-radius:14px; font-weight:790; font-size:15px; transition: transform .16s, filter .16s, background .16s; }
.btn:active:not(:disabled) { transform:scale(.985); }
.btn:hover:not(:disabled) { filter:brightness(1.07); }
.btn-primary { background:linear-gradient(110deg, #b1a6ff, #9084fb); box-shadow:0 7px 25px rgba(125,109,247,.15); }
.btn-secondary { background:#2a2d4e; color:#ebeaff; border:1px solid rgba(255,255,255,.1); }
.btn-ghost { background:transparent; border:1px solid var(--stroke-strong); color:#dadcf0; }
.btn-mint { background:linear-gradient(110deg,#a5f4db,#7be5c9); }
.btn-block { width:100%; }
.btn svg { width:18px;height:18px; }
.divider-or { display:flex; gap:14px; align-items:center; justify-content:center; color:#858cad; font-size:12px; margin:22px 0; }
.divider-or:before,.divider-or:after { content:""; height:1px; flex:1; background:var(--stroke); }
.join-line { display:grid; grid-template-columns:1fr auto; gap:9px; }
.join-line .btn { min-width:91px; }
.tiny-note { text-align:center; color:#7d86a7; font-size:12px; margin:18px 0 0; }
.footer { padding: 0 0 35px; color:#69728f; font-size:12px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.footer strong { font-weight:580; color:#9ca3c4; }
/* In-game layout */
.game-layout { padding:34px 0 55px; display:grid; grid-template-columns: minmax(0, 1fr) 280px; gap:22px; align-items:start; max-width:970px; margin:0 auto; }
.game-main { min-width:0; }
.game-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; gap:12px; }
.game-hint { font-size:12px; letter-spacing:.3px; color:var(--muted); }
.round-label { color:var(--lavender); font-size:13px; font-weight:760; display:inline-flex; gap:7px; align-items:center; }
.game-card { border:1px solid var(--stroke-strong); background:var(--card); backdrop-filter:blur(16px); box-shadow:var(--shadow); border-radius:27px; padding:33px; min-height:505px; }
.round-head { text-align:center; margin:8px auto 25px; }
.round-eyebrow { font-size:12px; letter-spacing:1.5px; color:var(--mint); font-weight:740; }
.round-head h1 { margin:13px 0 9px; font-size:clamp(24px,3.5vw,34px); line-height:1.45; letter-spacing:-.6px; }
.round-head p { color:var(--muted); font-size:13px; line-height:1.75; margin:0; }
.players { display:grid; grid-template-columns:1fr 38px 1fr; align-items:center; gap:8px; margin:0 0 28px; }
.player { min-width:0; text-align:center; background:rgba(255,255,255,.032); border:1px solid var(--stroke); border-radius:17px; padding:18px 9px 13px; min-height:125px; }
.player.is-me { border-color:rgba(164,154,255,.33); background:rgba(164,154,255,.055); }
.avatar { width:44px; height:44px; border-radius:15px; margin:0 auto 9px; background:linear-gradient(145deg,#9f92ff,#c6baff); color:#302756; display:grid; place-items:center; font-weight:850; font-size:18px; }
.player:not(.is-me) .avatar { background:linear-gradient(145deg,#a5f6db,#70cfbb); color:#165046; }
.player.pending .avatar { background:#343754; color:#7a84a8; }
.player-name { text-overflow:ellipsis; white-space:nowrap; overflow:hidden; font-size:13px; font-weight:730; }
.player-status { display:inline-flex; align-items:center; justify-content:center; gap:5px; color:#939dbc; font-size:11px; padding-top:6px; }
.player-status.done { color:var(--mint); }
.player-status.offline { color:var(--pink); }
.between { text-align:center; color:#868baa; font-size:12px; font-weight:780; }
.word-section { margin-top:8px; }
.word-label { font-size:12px; color:#c5c8de; margin-bottom:11px; display:block; }
.word-input { width:100%; height:73px; border-radius:17px; border:1px solid rgba(170,156,255,.33); background:rgba(10,13,35,.67); color:#fff; font-size:25px; font-weight:700; letter-spacing:1px; text-align:center; outline:none; padding:0 17px; transition:border-color .2s, box-shadow .2s; }
.word-input:focus { border-color:var(--lavender); box-shadow:0 0 0 4px rgba(164,154,255,.12); }
.word-input::placeholder { color:#515a7b; letter-spacing:0; font-weight:460; font-size:17px; }
.word-rule { text-align:center; color:#838eaa; font-size:11.5px; line-height:1.6; margin:11px 0 19px; }
.wait-area { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:18px 0 10px; text-align:center; }
.wait-area h3 { font-size:18px; margin:14px 0 6px; }
.wait-area p { font-size:13px; color:var(--muted); line-height:1.75; margin:0 0 13px; }
.wait-words { color:var(--lavender); font-weight:800; background:rgba(164,154,255,.10); border:1px solid rgba(164,154,255,.16); border-radius:14px; padding:13px 27px; font-size:21px; margin-bottom:5px; }
.pulse-orb { width:53px;height:53px;border-radius:50%;display:grid;place-items:center;background:rgba(140,233,209,.12);border:1px solid rgba(140,233,209,.24);animation:pulse 2.2s infinite;color:var(--mint);font-size:24px; }
@keyframes pulse { 50% { box-shadow:0 0 0 14px rgba(140,233,209,0); transform:scale(1.04); } }
.side { display:flex; flex-direction:column; gap:17px; }
.side-card { border:1px solid var(--stroke); background:rgba(26,30,57,.62); border-radius:22px; padding:22px; }
.side-header { display:flex;align-items:center;gap:8px;font-size:14px;font-weight:770; margin-bottom:14px; }
.side-header svg { width:18px; height:18px; color:var(--lavender); }
.room-number { font-size:29px;letter-spacing:5px;font-weight:850;color:var(--mint);margin-bottom:9px; }
.share-note { font-size:12px;color:var(--muted);line-height:1.75;margin:0 0 15px; }
.mini-button { border:1px solid rgba(164,154,255,.28);background:rgba(164,154,255,.11);color:#d3cfff;border-radius:11px;height:40px;width:100%;font-size:12px;font-weight:710; }
.side-tip { font-size:12px; line-height:1.9; margin:0; color:var(--muted); }
.history-list { display:flex; flex-direction:column; gap:9px; }
.history-row { display:flex; align-items:center; justify-content:space-between; gap:7px; font-size:12px; padding:10px 0; border-bottom:1px solid var(--stroke); }
.history-row:last-child { border-bottom:0; padding-bottom:0; }
.history-round { color:var(--dim);white-space:nowrap;font-size:11px; }
.history-words { font-weight:720; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; text-align:right; }
.history-words.win { color:var(--mint); }
.empty-history { color:var(--dim); font-size:12px; line-height:1.9; }
.leave-button { background:transparent;border:0;color:#8991af;font-size:12px;padding:9px 2px;align-self:flex-start; }
.leave-button:hover { color:var(--pink); }
.waiting-illustration { position:relative;width:130px;height:115px;margin:6px auto 15px; }
.ill-circle { width:75px;height:75px;display:grid;place-items:center;font-size:32px;border-radius:24px;position:absolute;transform:rotate(-11deg);background:#a79bf9;color:#27204c;left:9px;top:15px; }
.ill-circle.second { background:#32435a;color:#88aaac;left:60px;top:33px;transform:rotate(9deg);border:2px dashed rgba(140,233,209,.32); }
.waiting-code { padding:16px 12px;border-radius:16px;background:rgba(140,233,209,.06);border:1px dashed rgba(140,233,209,.31);text-align:center; margin:0 0 16px; }
.waiting-code strong { color:var(--mint);font-size:30px;letter-spacing:5px; }
.waiting-code small { display:block;font-size:11px;color:var(--muted);margin-top:5px; }
/* Reveal */
.reveal-area { text-align:center; padding-top:1px; }
.reveal-heading { font-size:29px;font-weight:850;margin:4px 0 4px; }
.reveal-heading.good { color:var(--mint); }
.reveal-desc { font-size:13px;color:var(--muted);margin-bottom:24px;line-height:1.7; }
.reveal-grid { display:grid;grid-template-columns:1fr 1fr;gap:13px; }
.reveal-word { background:rgba(164,154,255,.07);border:1px solid rgba(164,154,255,.28);border-radius:18px;padding:22px 8px; min-width:0; }
.reveal-word:nth-child(2) { background:rgba(140,233,209,.07);border-color:rgba(140,233,209,.26); }
.reveal-word span { display:block;color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.reveal-word strong { display:block;margin-top:9px;font-size:clamp(19px,3.5vw,28px);word-break:break-word; }
.reveal-word:nth-child(1) strong { color:#d1cbff; }
.reveal-word:nth-child(2) strong { color:var(--mint); }
.reveal-action { margin-top:22px; }
.record { color:var(--lavender);font-size:13px;font-weight:760;margin-top:16px; }
.confetti { position:relative; }
.confetti:before { content:'✦';position:absolute;left:24px;top:-8px;color:var(--lavender);font-size:29px;animation:spark 3s ease infinite; }
.confetti:after { content:'✦';position:absolute;right:25px;top:4px;color:var(--mint);font-size:23px;animation:spark 3s 1s ease infinite; }
@keyframes spark { 50%{transform:translateY(-8px) rotate(25deg);opacity:.6;} }
.toast { position:fixed;left:50%;bottom:calc(25px + env(safe-area-inset-bottom));transform:translate(-50%, 12px);max-width:calc(100vw - 34px);min-width:180px;text-align:center;padding:13px 19px;border:1px solid rgba(255,255,255,.19);border-radius:12px;background:#343b60;color:white;font-size:13px;box-shadow:0 12px 40px rgba(0,0,0,.35);z-index:20;opacity:0;pointer-events:none;transition:opacity .2s, transform .2s; }
.toast.show { opacity:1;transform:translate(-50%,0); }
.loading { height:60vh;display:grid;place-items:center;color:var(--muted); }
@media (max-width:820px) {
  .app-shell { width:min(620px, calc(100% - 36px)); }
  .site-header { padding:20px 0 8px; }
  .lobby { display:flex; flex-direction:column;gap:20px;padding:37px 0 31px;min-height:auto;align-items:stretch; }
  .hero { padding:0; }
  .hero h1 { font-size:clamp(38px,7vw,54px); margin:14px 0 10px; }
  .hero-desc { font-size:14px; }
  .orbit { display:none; }
  .panel { padding:26px; }
  .footer { margin-top:24px; }
  .game-layout { grid-template-columns:1fr; padding-top:20px; }
  .side { display:grid;grid-template-columns:1fr 1fr; gap:13px; }
  .leave-button { grid-column:1/-1; }
}
@media (max-width:480px) {
  .app-shell { width:calc(100% - 30px); }
  .site-header { padding:16px 0 8px; }
  .brand { font-size:17px;gap:9px; }
  .brand-mark { width:35px;height:35px;border-radius:12px; }
  .online-badge { font-size:10px;padding:8px 9px; }
  .lobby { padding:33px 0 18px; gap:22px; }
  .hero h1 { font-size:39px; letter-spacing:-1.5px; line-height:1.28; }
  .hero-desc { font-size:13px;line-height:1.85; }
  .eyebrow { font-size:10.5px; }
  .panel { border-radius:23px;padding:23px 20px 21px; }
  .panel-top-icon { display:none; }
  .panel h2 { font-size:23px; }
  .panel-subtitle { margin-bottom:20px; }
  .field { margin-bottom:14px; }
  .footer { flex-direction:column;align-items:center;gap:6px;padding-bottom:calc(22px + env(safe-area-inset-bottom)); }
  .game-layout { padding-top:14px; gap:12px;padding-bottom:22px; }
  .game-header { margin-bottom:13px; }
  .game-card { border-radius:23px; padding:23px 17px; min-height:0; }
  .round-head { margin:3px auto 19px; }
  .round-head h1 { font-size:25px; margin:11px 0 7px; }
  .round-head p { font-size:12px; }
  .players { gap:7px;grid-template-columns:1fr 26px 1fr;margin-bottom:23px; }
  .player { padding:14px 6px 11px;min-height:111px; }
  .avatar { width:39px;height:39px;border-radius:13px;font-size:16px;margin-bottom:7px; }
  .player-name { font-size:12px; }
  .player-status { font-size:10px; }
  .word-input { height:67px;font-size:23px; }
  .side { display:flex; }
  .side-card { padding:18px; }
  .side > .side-card:first-child { order:2; }
  .side > .side-card:nth-child(2) { order:1; }
  .leave-button { order:3; }
  .reveal-heading { font-size:26px; }
  .reveal-word { padding:20px 5px; }
  .reveal-word strong { font-size:23px; }
}
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }


/* Mode selector */
.mode-pill { border:1px solid var(--stroke); color:var(--lavender); font-size:11px; font-weight:760; background:rgba(255,255,255,.045); padding:8px 11px; border-radius:99px; white-space:nowrap; }
.mode-picker { margin:2px 0 18px; }
.mode-caption { color:var(--dim); font-size:10px; font-weight:500; margin-left:4px; }
.mode-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
.mode-option { min-width:0; min-height:112px; border:1px solid var(--stroke-strong); border-radius:16px; background:rgba(255,255,255,.035); color:var(--text); padding:13px 9px 12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; transition:transform .18s,border-color .18s,background .18s,box-shadow .18s; }
.mode-option:active { transform:scale(.98); }
.mode-option.active { border-color:var(--lavender); background:rgba(164,154,255,.12); box-shadow:0 0 0 3px rgba(164,154,255,.09); }
.mode-option-icon { font-size:27px; line-height:1.25; }
.mode-option strong { font-size:13px; }
.mode-option small { color:var(--muted); font-size:10px; line-height:1.4; text-align:center; }
.invite-mode-note { margin:2px 0 18px; padding:12px 13px; border-radius:12px; border:1px dashed var(--stroke-strong); color:var(--muted); font-size:12px; text-align:center; }

/* Pair profile */
.pair-stats-card { overflow:hidden; }
.duo-name { color:var(--text); font-size:13px; font-weight:760; text-align:center; margin:-3px 0 13px; overflow-wrap:anywhere; }
.duo-times { color:var(--lavender); padding:0 4px; }
.compat-score { display:flex; align-items:baseline; justify-content:center; gap:7px; padding:9px 0 15px; }
.compat-score strong { font-size:43px; line-height:1; letter-spacing:-1.8px; color:var(--mint); font-weight:900; }
.compat-score span { color:var(--muted); font-size:12px; }
.pair-stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.pair-stat { background:rgba(255,255,255,.035); border:1px solid var(--stroke); border-radius:13px; padding:11px 8px 10px; text-align:center; min-width:0; }
.pair-stat strong { display:block; color:var(--lavender); font-size:22px; font-weight:850; line-height:1.25; }
.pair-stat span { display:block; color:var(--muted); font-size:10px; margin-top:3px; }
.stats-footnote { color:var(--dim); font-size:10px; line-height:1.65; margin-top:12px; text-align:center; }

/* Collision victory animation */
.victory-stage { height:150px; max-width:330px; margin:-2px auto 9px; position:relative; display:flex; align-items:center; justify-content:center; isolation:isolate; }
.victory-glow { position:absolute; width:118px; height:118px; left:calc(50% - 59px); top:16px; border-radius:50%; background:radial-gradient(circle,rgba(140,233,209,.24),rgba(140,233,209,0) 72%); opacity:0; transform:scale(.3); }
.victory-icon { position:absolute; top:39px; font-size:58px; line-height:1; z-index:2; filter:drop-shadow(0 9px 12px rgba(0,0,0,.22)); }
.victory-icon.left { left:calc(50% - 82px); }
.victory-icon.right { left:calc(50% + 18px); }
.victory-impact { position:absolute; z-index:3; top:48px; left:calc(50% - 16px); font-size:34px; color:var(--mint); opacity:0; transform:scale(.1) rotate(-40deg); }
.victory-spark { position:absolute; z-index:1; color:var(--lavender); opacity:0; font-size:22px; }
.victory-spark.spark-a { top:15px; left:calc(50% - 96px); }
.victory-spark.spark-b { top:25px; right:calc(50% - 103px); }
.victory-spark.spark-c { bottom:17px; left:calc(50% - 8px); }
.victory-stage.play .victory-glow { animation: victory-glow 1.35s .25s ease-out both; }
.victory-stage.play .victory-icon.left { animation: victory-left .95s cubic-bezier(.18,.8,.25,1.2) both; }
.victory-stage.play .victory-icon.right { animation: victory-right .95s cubic-bezier(.18,.8,.25,1.2) both; }
.victory-stage.play .victory-impact { animation: victory-impact .75s .53s cubic-bezier(.2,.8,.2,1) both; }
.victory-stage.play .victory-spark.spark-a { animation: victory-spark .8s .55s ease-out both; }
.victory-stage.play .victory-spark.spark-b { animation: victory-spark .8s .68s ease-out both; }
.victory-stage.play .victory-spark.spark-c { animation: victory-spark .8s .78s ease-out both; }
.victory-stage.couple .victory-icon { font-size:63px; filter:drop-shadow(0 8px 13px rgba(216,55,105,.24)); }
.victory-stage.couple .victory-impact { color:#f04d79; }
.victory-stage.couple .victory-glow { background:radial-gradient(circle,rgba(255,112,153,.34),rgba(255,112,153,0) 72%); }
.victory-stage.classic .victory-icon { font-size:61px; }
@keyframes victory-left {
  0% { opacity:0; transform:translateX(-62px) rotate(-34deg) scale(.66); }
  62% { opacity:1; transform:translateX(29px) rotate(10deg) scale(1.13); }
  78% { transform:translateX(22px) rotate(0) scale(.94); }
  100% { opacity:1; transform:translateX(25px) rotate(0) scale(1); }
}
@keyframes victory-right {
  0% { opacity:0; transform:translateX(62px) rotate(34deg) scale(.66); }
  62% { opacity:1; transform:translateX(-29px) rotate(-10deg) scale(1.13); }
  78% { transform:translateX(-22px) rotate(0) scale(.94); }
  100% { opacity:1; transform:translateX(-25px) rotate(0) scale(1); }
}
@keyframes victory-glow {
  0% { opacity:0; transform:scale(.3); }
  45% { opacity:1; transform:scale(1.35); }
  100% { opacity:.55; transform:scale(1); }
}
@keyframes victory-impact {
  0% { opacity:0; transform:scale(.1) rotate(-40deg); }
  45% { opacity:1; transform:scale(1.35) rotate(12deg); }
  100% { opacity:.8; transform:scale(1) rotate(0); }
}
@keyframes victory-spark {
  0% { opacity:0; transform:scale(.3) translateY(10px) rotate(-20deg); }
  55% { opacity:1; transform:scale(1.2) translateY(-5px) rotate(12deg); }
  100% { opacity:.65; transform:scale(1) translateY(-13px) rotate(0); }
}

/* Couple mode: warm red, pink and white palette; gameplay remains identical. */
body.theme-couple {
  color-scheme:light;
  --bg:#fff1f5;
  --card:rgba(255,255,255,.91);
  --card-solid:#fffafd;
  --card-2:#ffe4ec;
  --stroke:rgba(183,48,88,.12);
  --stroke-strong:rgba(183,48,88,.23);
  --text:#552037;
  --muted:#9d667b;
  --dim:#bd8c9e;
  --lavender:#e94f7c;
  --purple:#ed547c;
  --mint:#f58aaa;
  --pink:#c92e5c;
  --shadow:0 24px 70px rgba(177,53,93,.12);
  background:var(--bg);
}
body.theme-couple .ambient-one { background:radial-gradient(circle,rgba(244,92,139,.23),transparent 72%); }
body.theme-couple .ambient-two { background:radial-gradient(circle,rgba(255,171,194,.34),transparent 74%); }
body.theme-couple .noise { opacity:.045; background-image:radial-gradient(rgba(177,53,93,.22) .6px,transparent .6px); }
body.theme-couple .brand-mark { border-color:rgba(220,72,119,.2); background:#ffe0e9; color:#d83e70; }
body.theme-couple .online-badge, body.theme-couple .room-chip, body.theme-couple .mode-pill { color:#b73562; background:rgba(255,255,255,.7); border-color:rgba(201,46,92,.15); }
body.theme-couple .online-badge i { background:#e94f7c; box-shadow:0 0 10px rgba(233,79,124,.35); }
body.theme-couple .gradient-text { background:linear-gradient(105deg,#c92e5c,#ed6790 55%,#f3a0b7); -webkit-background-clip:text; background-clip:text; color:transparent; }
body.theme-couple .bubble-a { background:#e94f7c; color:white; }
body.theme-couple .bubble-b { background:#ffe0e9; color:#a72a53; }
body.theme-couple .panel, body.theme-couple .game-card { background:var(--card); border-color:var(--stroke-strong); }
body.theme-couple .panel-top-icon { background:#ffe0e9; color:#d83e70; }
body.theme-couple .field-label, body.theme-couple .word-label { color:#78324e; }
body.theme-couple .input { background:#fff; border-color:rgba(201,46,92,.18); color:#552037; }
body.theme-couple .input::placeholder { color:#c28b9f; }
body.theme-couple .input:focus { border-color:#e94f7c; box-shadow:0 0 0 3px rgba(233,79,124,.12); }
body.theme-couple .btn-primary { background:linear-gradient(110deg,#f28eaa,#df3f70); color:#fff; box-shadow:0 7px 24px rgba(215,58,105,.18); }
body.theme-couple .btn-secondary { background:#ffe2eb; color:#a62d56; border:1px solid rgba(201,46,92,.14); }
body.theme-couple .btn-ghost { color:#a62d56; border-color:rgba(201,46,92,.22); }
body.theme-couple .btn-mint { background:linear-gradient(110deg,#f8b5c8,#e94f7c); color:#fff; }
body.theme-couple .mode-option { background:rgba(255,255,255,.75); border-color:rgba(201,46,92,.16); color:#552037; }
body.theme-couple .mode-option.active { border-color:#e94f7c; background:#ffe4ec; box-shadow:0 0 0 3px rgba(233,79,124,.1); }
body.theme-couple .mode-option small { color:#a66b80; }
body.theme-couple .invite-mode-note { border-color:rgba(201,46,92,.22); color:#9d667b; }
body.theme-couple .player { background:rgba(255,232,239,.55); border-color:rgba(201,46,92,.13); }
body.theme-couple .player.is-me { border-color:rgba(233,79,124,.42); background:rgba(255,211,225,.48); }
body.theme-couple .avatar { background:linear-gradient(145deg,#e94f7c,#f6a0b7); color:white; }
body.theme-couple .player:not(.is-me) .avatar { background:linear-gradient(145deg,#ffb6ca,#e94f7c); color:white; }
body.theme-couple .player.pending .avatar { background:#ffe3ec; color:#c58a9e; }
body.theme-couple .word-input { background:#fff; border-color:rgba(233,79,124,.3); color:#552037; }
body.theme-couple .word-input::placeholder { color:#c28b9f; }
body.theme-couple .wait-words { color:#bd315f; background:#ffe6ee; border-color:rgba(233,79,124,.2); }
body.theme-couple .pulse-orb { color:#df3f70; background:#ffe3ec; border-color:rgba(233,79,124,.22); }
body.theme-couple .side-card { background:rgba(255,255,255,.84); border-color:rgba(201,46,92,.13); }
body.theme-couple .room-number { color:#d83e70; }
body.theme-couple .mini-button { color:#b33160; border-color:rgba(201,46,92,.2); background:#ffe4ec; }
body.theme-couple .waiting-code { background:#fff2f6; border-color:rgba(233,79,124,.32); }
body.theme-couple .waiting-code strong { color:#d83e70; }
body.theme-couple .reveal-word { background:#fff0f4; border-color:rgba(233,79,124,.2); }
body.theme-couple .reveal-word:nth-child(2) { background:#ffe2eb; border-color:rgba(233,79,124,.24); }
body.theme-couple .reveal-word:nth-child(1) strong, body.theme-couple .reveal-word:nth-child(2) strong { color:#bd315f; }
body.theme-couple .record { color:#bd315f; }
body.theme-couple .pair-stat { background:#fff4f7; border-color:rgba(201,46,92,.12); }
body.theme-couple .pair-stat strong, body.theme-couple .compat-score strong { color:#d83e70; }
body.theme-couple .victory-impact { color:#d83e70; }
body.theme-couple .leave-button { color:#b37b8f; }
body.theme-couple .footer { color:#b88799; }
body.theme-couple .footer strong { color:#9d4666; }

@media (max-width:480px) {
  .mode-options { gap:8px; }
  .mode-option { min-height:105px; padding:11px 6px; }
  .mode-option small { font-size:9.5px; }
  .victory-stage { height:133px; margin-top:0; }
  .victory-icon { top:35px; }
  .victory-stage.couple .victory-icon { font-size:57px; }
  .pair-stat { padding:10px 5px; }
}
@media (prefers-reduced-motion:reduce) {
  .victory-stage.play .victory-icon.left,
  .victory-stage.play .victory-icon.right,
  .victory-stage.play .victory-impact,
  .victory-stage.play .victory-glow,
  .victory-stage.play .victory-spark { animation:none; opacity:1; transform:none; }
}

/* v1.2.4 · Page-level rules / header room exit / larger round marker */
.site-header { gap:12px; }
.header-top { display:flex; align-items:center; justify-content:space-between; gap:16px; min-width:0; }
.header-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.header-leave { padding:10px 16px; min-height:42px; flex-shrink:0; border:1px solid rgba(255,128,155,.45); border-radius:12px; background:rgba(245,99,129,.12); color:#ffb9cc; font-size:13px; font-weight:800; line-height:1.15; }
.header-leave:hover { background:rgba(245,99,129,.22); }
.header-leave:focus-visible { outline:2px solid #ff94b1; outline-offset:2px; }
.top-rules { display:flex; gap:11px; align-items:flex-start; padding:12px 16px; margin-top:11px; border:1px solid var(--stroke); border-radius:14px; background:rgba(255,255,255,.035); color:var(--muted); font-size:12px; line-height:1.8; }
.rules-spark { color:var(--lavender); font-size:17px; line-height:1.35; flex-shrink:0; }
.name-tip { display:block; color:var(--muted); font-size:11px; line-height:1.6; margin:8px 1px 0; font-weight:400; }
.mode-option { min-height:88px; gap:6px; }
.mode-option strong { font-size:14px; }
.round-label { font-size:20px; font-weight:800; letter-spacing:.3px; gap:7px; color:var(--lavender); border:1px solid var(--stroke-strong); background:rgba(164,154,255,.10); border-radius:14px; padding:8px 15px; }
.round-label strong { font-size:29px; font-weight:900; line-height:1; font-variant-numeric:tabular-nums; }
.round-symbol { font-size:17px; }
.game-header { flex-wrap:wrap; }
.game-layout { padding-top:20px; }
body.theme-couple .header-leave { border-color:rgba(201,46,92,.28); background:#ffe1ea; color:#b52e5b; }
body.theme-couple .header-leave:hover { background:#ffd1e0; }
body.theme-couple .top-rules { background:rgba(255,255,255,.71); border-color:rgba(201,46,92,.12); }
body.theme-couple .round-label { background:#ffe4ee; border-color:rgba(201,46,92,.20); }
@media (max-width:820px) {
  .site-header { display:flex; flex-direction:column; align-items:stretch; padding-bottom:4px; }
  .header-top { width:100%; }
  .header-meta { justify-content:flex-start; width:100%; }
  .top-rules { margin-top:9px; }
}
@media (max-width:480px) {
  .site-header { gap:10px; }
  .header-leave { padding:10px 14px; min-height:40px; font-size:13px; }
  .header-meta { gap:6px; }
  .header-meta .mode-pill, .header-meta .room-chip, .header-meta .online-badge { padding:6px 9px; font-size:10px; }
  .top-rules { font-size:11.5px; padding:10px 12px; }
  .round-label { font-size:18px; padding:8px 11px; }
  .round-label strong { font-size:27px; }
  .game-hint { font-size:11px; }
  .mode-option { min-height:80px; }
}