/* Strawberry Cream: shared by the local and friends' tables. */
:root {
  color-scheme: light;
  --bg: #fff8f3;
  --bg-2: #fff1f4;
  --panel: #fffaf6;
  --panel-2: #ffe8ef;
  --panel-solid: #fffaf6;
  --border: #e9b8c9;
  --text: #57243f;
  --text-dim: #81556c;
  --text-faint: #92657b;
  --gold: #b42a61;
  --gold-2: #eb719b;
  --red: #bf355a;
  --green: #367768;
  --blue: #286786;
  --jade: #367768;
  --radius: 24px;
  --radius-sm: 14px;
  --shadow: 0 20px 64px #9b3a6320, 0 3px 12px #9b3a6310;
  --shadow-sm: 0 5px 16px #9b3a6317;
}
body {
  background: #fff8f3;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
::selection { color: #fff; background: #bd3e70; }
h1, h2, h3 { text-wrap: balance; }
p, .local-help, .online-room-copy { text-wrap: pretty; }
button, select, input, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #ab2d65;
  outline-offset: 3px;
}
body.kitty-theme .btn, .local-option, .online-secondary, .online-seat-take, .online-share, .local-start {
  transition: transform 120ms, background-color 160ms, border-color 160ms, box-shadow 160ms, opacity 160ms;
}
body.kitty-theme .btn:active:not(:disabled), .local-option:active:not(:disabled), .local-start:active:not(:disabled),
.online-secondary:active:not(:disabled), .online-seat-take:active:not(:disabled), .online-share:active:not(:disabled) {
  transform: scale(.96);
}
body.kitty-theme .btn {
  color: #62304c;
  background: linear-gradient(#fffdf9, #fff3eb);
  border-color: #e7bdc9;
  border-radius: 999px;
  box-shadow: inset 0 1px #fff, 0 3px 7px #b54f7520;
}
body.kitty-theme .btn.btn-primary, .local-start {
  color: #fff;
  background: linear-gradient(160deg, #ce4076, #bb3667);
  border-color: #d84c82;
  box-shadow: inset 0 1px #ffc5db, 0 5px 12px #c847772b;
}
body.kitty-theme .btn.btn-danger {
  color: #fff;
  background: linear-gradient(160deg, #c8406c, #b92d5b);
  border-color: #c9416c;
}
body.kitty-theme .btn.btn-ghost { background: transparent; box-shadow: none; }
body.kitty-theme .btn-sm, body.kitty-theme .chip { min-height: 40px; }
body.kitty-theme .chip { border-radius: 999px; }
body.kitty-theme .chip.active { color: #a72d61; background: #ffe0ec; border-color: #db7da1; }
body.kitty-theme .btn:disabled, .local-option:disabled { opacity: .48; }
body.kitty-theme .btn-primary:disabled, .local-start:disabled { color: #fff; }
@media (hover:hover) {
  body.kitty-theme .btn:hover:not(:disabled), .online-secondary:hover:not(:disabled) { color: #762447; background: #ffe8ee; border-color: #d57b9b; }
  body.kitty-theme .btn.btn-primary:hover:not(:disabled), .local-start:hover:not(:disabled) { color: #fff; background: linear-gradient(160deg, #cb3d71, #b93063); border-color: #cc3e75; }
  body.kitty-theme .btn.btn-ghost:hover:not(:disabled) { background: #f9dfe8; }
}
.local-lobby {
  background: radial-gradient(ellipse at 5% 38%, #ffe3ecb3, transparent 53%), radial-gradient(ellipse at 95% 85%, #ffe6cb73, transparent 48%), #fff8f3;
  color: var(--text);
}
.local-brand { color: #7b3155; letter-spacing: 1.6px; min-height: 54px; }
.local-brand-mark {
  width: 60px;
  height: 54px;
  flex: none;
  font-size: 0;
  background: url('/guandan/assets/kitty-hello.png') center / contain no-repeat;
}
.local-badge { color: #965773; background: #fffdf9; border-color: #efd4de; box-shadow: 0 2px 6px #bc678310; }
.local-eyebrow { color: #b34b78; letter-spacing: 1.8px; }
.local-intro h1 { color: #692848; letter-spacing: 5px; }
.local-lead { color: #87566f; }
.local-keyboard, .local-help, .local-entry-footer { color: #94647a; }
.local-keyboard { max-width: 370px; line-height: 1.8; }
.local-cards { width: 350px; isolation: isolate; }
.local-cards::after {
  content: '';
  position: absolute;
  z-index: -1;
  right: -25px;
  bottom: 0;
  width: 125px;
  height: 150px;
  background: url('/guandan/assets/kitty-melody.png') center / contain no-repeat;
  pointer-events: none;
  transform: rotate(8deg);
}
.local-card { background: #fffdf8; border-color: #efc6d4; box-shadow: 0 5px 12px #bf698424, 0 20px 34px #ad507716; }
.local-card.card-middle { color: #cb446f; }
.local-card small { color: #b94c76; background: #fff0f5; border-color: #e89fbb; }
.local-settings { color: #672b4a; background: #fffdf8ed; border: 1px solid #efcdd9; border-radius: 28px; box-shadow: 0 12px 40px #b95d8220, inset 0 1px #fff; }
.local-section-heading { color: #723650; }
.local-section-heading small, .local-settings legend { color: #926177; }
.local-option { color: #895970; background: #fff8f4; border-color: #efd4dd; border-radius: 14px; }
.local-option.active { color: #9f275d; background: #ffe5ef; border-color: #e689ac; box-shadow: inset 0 1px #fff; }
.local-option:hover { color: #a02d5d; border-color: #dc8eac; }
.local-start { border-radius: 999px; min-height: 56px; }
.local-text-button { color: #ad3e6e; min-height: 40px; display: inline-flex; align-items: center; }
.local-footer { color: #986e81; border-color: #efd5df; }
.local-boot { color: #a63569; background: #fff6f3; }
/* The top strip stays cream so the pink play surface has a clear boundary. */
body.kitty-theme .shell > .bar {
  color: #632c49;
  background: linear-gradient(110deg, #fffdf7, #fff5f3);
  border-bottom: 1px solid #efc9d6;
  box-shadow: 0 3px 10px #9b3d6014;
}
body.kitty-theme .shell > .bar .title strong { color: #672747; }
body.kitty-theme .shell > .bar .sub, body.kitty-theme .rules-btn { color: #8b5c74; }
body.kitty-theme .shell > .bar .btn-icon { color: #9c3f68; }
body.kitty-theme .shell > .bar .title { padding-left: 34px; background: url('/guandan/assets/kitty-hello.png') left center / 29px 34px no-repeat; }
body.kitty-theme .watch-tag, body.kitty-theme .replay-tag { color: #276b8c; background: #e1f2fb; border-color: #aed8ed; }
body.kitty-theme .guandan { --table-bg: radial-gradient(ellipse at 50% 35%, #fbd0dd, #f7b7cd 72%, #f1a4bf); }
body.kitty-theme .table-felt { box-shadow: inset 0 0 45px #c461852b; }
body.kitty-theme .table-felt::before {
  inset: 9px;
  border: 2px dashed #e994b3;
  border-radius: 28px;
  box-shadow: 0 0 0 5px #fff4e9bf, inset 0 0 0 3px #ffdbe7;
}
body.kitty-theme .table-felt::after {
  content: '';
  position: absolute;
  z-index: 2;
  top: 16px;
  right: 16px;
  bottom: auto;
  width: 76px;
  height: 76px;
  background: url('/guandan/assets/kitty-hello.png') center / contain no-repeat;
  pointer-events: none;
}
body.kitty-theme .card-actions .act {
  border-radius: 999px;
  box-shadow: 0 4px #bc5e7e35, 0 6px 12px #b1487020, inset 0 1px #fff8;
  border-width: 1px;
}
body.kitty-theme .card-actions .act.primary { color: #fff; background: linear-gradient(#ce4076, #bb3667); border-color: #db4f84; }
body.kitty-theme .card-actions .act.secondary { color: #622641; background: linear-gradient(#fffefa, #fff0e5); border-color: #e7bbc8; }
body.kitty-theme .card-actions .act.blue { color: #275e85; background: linear-gradient(#dbf3ff, #a9d8f5); border-color: #91c7e6; }
body.kitty-theme .card-actions .act.danger { color: #fff; background: linear-gradient(#c8406c, #b92d5b); border-color: #c94570; }
body.kitty-theme .card-actions .act:active:not(:disabled), body.kitty-theme .card-actions .act.pressed { transform: scale(.96); box-shadow: 0 1px #bc5e7e35, inset 0 1px #fff8; }
body.kitty-theme .card-actions .act:focus-visible { outline: 3px solid #9e2e63; outline-offset: 3px; box-shadow: 0 0 0 5px #fff7ed, 0 4px #bc5e7e35; }
body.kitty-theme .card-actions kbd { background: #89335216; }
body.kitty-theme .selected-play-type { color: #762747 !important; text-shadow: 0 1px 3px #fff4ed !important; }
body.kitty-theme .accessible-hand button:focus-visible { background: #fff1f3aa; outline-color: #ae3069; }
body.kitty-theme .accessible-hand button span, body.kitty-theme .keyboard-help { color: #6d2e4b; background: #fff9f3f5; box-shadow: 0 2px 8px #a9486b20; }
/* These panels have inline colors in the shared renderer. Keep their layout intact. */
body.kitty-theme .tribute-records { color: #7b3e59 !important; background: #fff4f7f5 !important; border-color: #e6b4c6 !important; }
body.kitty-theme .tribute-records > div:first-child { color: #94637b !important; }
body.kitty-theme .tribute-record { color: #833e5f !important; border-color: #edc1d0 !important; }
body.kitty-theme .round-review { color: #70304d !important; background: #fff9f3fa !important; border-color: #e2a2bc !important; }
body.kitty-theme .round-review strong { color: #953b65 !important; }
body.kitty-theme .round-review span { color: #87596f !important; }
body.kitty-theme .partner-hand-panel { color: #793754 !important; background: #fff9f3fa !important; border-color: #e6b5c7 !important; box-shadow: 0 5px 16px #a6456b1a; }
body.kitty-theme .partner-hand-panel strong { color: #7e3457; }
body.kitty-theme .partner-hand-panel [aria-expanded] { color: #a13664 !important; min-width: 40px; min-height: 40px; }
body.kitty-theme .partner-hand-panel strong + span { color: #95687d !important; }
body.kitty-theme .partner-hand-panel [role='listitem'] { background: #fffdf8 !important; border-color: #e6c4cf !important; }
/* Dialogs, end-of-round controls, and connection notices. */
.local-modal-backdrop, body.kitty-theme .backdrop { background: #80465d66; }
.local-modal, body.kitty-theme .modal { color: #65314c; background: #fffbf6; border: 1px solid #edc5d4; box-shadow: 0 24px 90px #74354f35; }
.local-modal { border-radius: 28px; }
.local-modal h2 { color: #823c5b; }
.local-modal p, .local-modal li { color: #85596e; }
body.kitty-theme .toc-bar { background: #fffbf6; box-shadow: 0 5px 10px -8px #ab5775; }
body.kitty-theme .result-emblem { color: #b03f70; background: #ffe6ef; border-color: #ecabc5; box-shadow: 0 8px 18px #ba4f7820; }
body.kitty-theme .result-emblem.win { color: #bc3b70; background: #ffe0ed; border-color: #e991b4; }
body.kitty-theme .result-emblem.lose { color: #447c99; background: #e6f3fb; border-color: #b5d9e9; }
body.kitty-theme .result-title.lose, body.kitty-theme .score.neg, body.kitty-theme .elo.down { color: #54788e; }
body.kitty-theme .result-actions .result-primary { box-shadow: 0 6px 18px #d64e7e2b; }
body.kitty-theme .rows li.me { background: #fff0f5; outline-color: #e5a1bb; }
body.kitty-theme .tag { color: #ae3569; background: #ffe0ec; }
body.kitty-theme .ended-actions, body.kitty-theme .trustee-bar { color: #7d3e59; background: #fff8f3f5; border-color: #e5acc1; }
body.kitty-theme .conn-banner { color: #a04463; background: #fff3f5f5; border-color: #dc8fa7; }
body.kitty-theme .chat-drawer { color: #6e3450; background: #fffaf5fa; border: 1px solid #edc6d5; border-radius: 22px; }
body.kitty-theme .input-row input { background: #fff9f3; }
body.kitty-theme .mine .bubble { background: #ffe5ef; }
.local-toast, body.kitty-theme .toast { color: #74415b; background: #fffaf6f5; border-color: #ecc1d1; box-shadow: 0 8px 25px #a4446824; }
.local-toast.error, body.kitty-theme .toast.error { color: #ae3059; border-color: #e58fa9; }
body.kitty-theme .toast.success { color: #367567; border-color: #a5d1bc; }
body.kitty-theme .toast-enter-active, body.kitty-theme .toast-leave-active { transition: opacity 180ms, transform 180ms; }
/* Friends' lobby and waiting seats. */
.online-field-label, .online-room-heading p, .online-room-copy, .online-invite-expanded label { color: #8b5a73; }
.online-input, .online-invite-link, .online-perspective-control select {
  color: #68314e;
  background: #fffaf6;
  border-color: #e7bdce;
  border-radius: 14px;
}
.online-input:focus, .online-invite-link:focus { border-color: #d876a0; box-shadow: 0 0 0 3px #f3bfd34d; }
.online-input::placeholder { color: #ab7e94; }
.online-input option, .online-seat-choice option, .online-perspective-control option { color: #68314e; background: #fffaf6; }
.online-secondary { color: #9d4e73; background: #fff9f5; border-color: #edc7d5; border-radius: 999px; min-height: 40px; }
.online-seat { color: #71364f; background: #fffdf8d9; border-color: #efd0db; border-radius: 24px; box-shadow: 0 4px 14px #b4607e10; }
.online-seat.mine { background: #fff3f7; border-color: #df8faf; box-shadow: inset 0 0 0 2px #ffe3ee, 0 4px 14px #b4607e10; }
.online-seat.empty { background: #fffaf6b3; border-color: #e8c6d3; }
.online-avatar, .online-seat.empty .online-avatar { width: 56px; height: 56px; color: #c15682; background: #fff8f3; border-color: #efd3df; border-radius: 50%; overflow: hidden; }
.online-avatar img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.online-seat-details > span, .online-seat.empty .online-seat-state { color: #966078; }
.online-seat-details > .online-seat-label { color: #b35c80; }
.online-seat-state { color: #4b8a74; }
.online-seat-state.away { color: #b67a30; }
.online-seat-take { color: #ac3d71; background: #fff0f5; border-color: #e6a5bf; border-radius: 999px; }
.online-seat-take:hover:not(:disabled) { color: #982856; background: #ffe0eb; border-color: #d77b9f; }
.online-share { color: #a73e6f; background: #fff0f5; border-color: #e5a7c0; border-radius: 999px; }
.online-share:hover { background: #ffe4ee; }
.online-invite-expanded small, .online-room-summary { color: #96667e; }
.online-room-summary, .online-room-actions .online-perspective-control { border-color: #efd4de; }
.online-wait-owner { color: #a25e7e; background: #fff0f5; border-color: #ebc1d1; }
.online-error { color: #b33b62; background: #fff0f4; border-color: #edb3c7; }
.online-table-info { color: #95657f; background: #fff5f5; border-bottom-color: #efc9d6; }
.online-table-room { color: #a13969; }
.online-table-warning { color: #ad5473; }
.online-perspective-control label { color: #8f5c76; }
.online-perspective-control select { min-height: 40px; padding-top: 6px; padding-bottom: 6px; }
.online-perspective-status { color: #ac4976; }
.online-status-dot { background: #69a790; }
.online-status-dot.reconnecting { background: #d99f4b; }
.online-reconnecting { color: #9b5a39; background: #fff3df; border-color: #e5bd80; }
@media (max-width: 900px) {
  .local-cards { width: 315px; }
  .local-cards::after { right: -12px; width: 108px; height: 130px; }
}
@media (max-width: 700px) {
  .local-brand { font-size: 11px; letter-spacing: .8px; gap: 7px; }
  .local-brand-mark { width: 44px; height: 44px; }
  .local-badge { font-size: 10px; padding: 6px 10px; }
  .local-keyboard { margin-left: auto; margin-right: auto; }
  .local-cards { width: 310px; }
  .local-cards::after { right: -6px; }
  .online-avatar, .online-seat.empty .online-avatar { width: 43px; height: 43px; }
  .online-seat { border-radius: 20px; }
  .online-seat-details strong { max-width: 90px; }
  .online-table-info > .local-text-button { min-height: 40px; }
  body.kitty-theme .table-felt::before { inset: 5px; border-radius: 19px; box-shadow: 0 0 0 3px #fff4e9bf, inset 0 0 0 2px #ffdbe7; }
  body.kitty-theme .table-felt::after { display: none; }
  body.kitty-theme .shell > .bar .title { background: none; padding-left: 0; }
  .local-modal { padding: 25px 21px; }
}
@media (max-width: 360px) {
  .local-lobby { padding-left: 15px; padding-right: 15px; }
  .local-brand { gap: 5px; font-size: 10px; letter-spacing: 0; }
  .local-badge { padding: 6px 8px; }
  .local-entry { padding-top: 30px; }
  .local-settings { padding: 22px 18px; }
  .online-entry .local-intro h1 { font-size: 36px; letter-spacing: 2px; }
  .online-seats { gap: 8px; }
  .online-seat { padding-left: 10px; padding-right: 10px; gap: 7px; }
  .online-avatar, .online-seat.empty .online-avatar { width: 35px; height: 35px; }
  .online-seat-details strong { max-width: 74px; }
  body.kitty-theme .partner-hand-panel { padding-left: 8px !important; padding-right: 8px !important; }
}
@media (orientation:landscape) and (max-height:500px) {
  body.kitty-theme .table-felt::after { display: none; }
  .online-table-info { padding-top: 2px; padding-bottom: 2px; }
  .online-table-info .online-perspective-control select { min-height: 40px; }
  body.kitty-theme .shell > .bar .title { background: none; padding-left: 0; }
}
@media (prefers-reduced-motion:reduce) {
  body.kitty-theme .btn, .local-option, .online-secondary, .online-seat-take, .online-share, .local-start { transition: none; }
  body.kitty-theme .card-actions .act:active:not(:disabled), body.kitty-theme .card-actions .act.pressed,
  body.kitty-theme .btn:active:not(:disabled), .local-option:active:not(:disabled), .local-start:active:not(:disabled),
  .online-secondary:active:not(:disabled), .online-seat-take:active:not(:disabled), .online-share:active:not(:disabled) { transform: none; }
}

/* Results are teleported beside #app; the real seat travels with each avatar. */
body.kitty-theme .kitty-result-avatar .avatar {
  background-color: #fff7f3;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border-color: #edbfd0;
  box-shadow: 0 2px 6px #b350751c;
}
body.kitty-theme .kitty-result-avatar .face { visibility: hidden; }
body.kitty-theme .kitty-result-avatar.kitty-seat-0 .avatar { background-image: url('/guandan/assets/kitty-hello.png'); }
body.kitty-theme .kitty-result-avatar.kitty-seat-1 .avatar { background-image: url('/guandan/assets/kitty-pompom.png'); }
body.kitty-theme .kitty-result-avatar.kitty-seat-2 .avatar { background-image: url('/guandan/assets/kitty-melody.png'); }
body.kitty-theme .kitty-result-avatar.kitty-seat-3 .avatar { background-image: url('/guandan/assets/kitty-kuromi.png'); }

/* Sound wardrobe: the existing mute switch keeps authority over previews too. */
body.kitty-theme .kitty-sound-trigger { display: inline-flex; align-items: center; gap: 5px; min-height: 40px; padding: 6px 10px; font-size: 12px; white-space: nowrap; }
body.kitty-theme .kitty-sound-intro { margin: 0 0 18px; color: #87556c; line-height: 1.7; font-size: 13px; }
body.kitty-theme .kitty-sound-options { display: grid; gap: 10px; }
body.kitty-theme .kitty-sound-option { display: flex; align-items: center; gap: 5px; padding: 5px 9px 5px 5px; border: 1px solid #efd0dd; border-radius: 20px; background: #fffdf9; transition: border-color 140ms, background-color 140ms; }
body.kitty-theme .kitty-sound-option.selected { border-color: #d979a1; background: #fff0f5; }
body.kitty-theme .kitty-sound-choice { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; min-height: 64px; padding: 8px; color: #73344f; text-align: left; border: 0; border-radius: 15px; background: transparent; cursor: pointer; }
body.kitty-theme .kitty-sound-symbol { display: grid; place-items: center; flex: 0 0 36px; height: 36px; border-radius: 50%; color: #c3467b; background: #ffe0ec; font-size: 24px; }
body.kitty-theme .kitty-sound-copy { display: grid; gap: 5px; }
body.kitty-theme .kitty-sound-copy strong { font-size: 14px; font-weight: 650; }
body.kitty-theme .kitty-sound-copy small { color: #94667d; font-size: 11px; line-height: 1.4; }
body.kitty-theme .kitty-sound-check { margin-left: auto; color: #bf4376; font-size: 17px; }
body.kitty-theme .kitty-sound-preview { flex: 0 0 auto; min-width: 46px; min-height: 40px; padding: 5px 8px; color: #a73566; background: #fff8f3; border: 1px solid #ebbbcf; border-radius: 999px; }
body.kitty-theme .kitty-sound-preview:disabled { opacity: .45; cursor: default; }
body.kitty-theme .kitty-sound-choice:focus-visible, body.kitty-theme .kitty-sound-preview:focus-visible { outline: 3px solid #b9467b; outline-offset: 3px; }
body.kitty-theme .kitty-sound-note { margin: 15px 0 18px; color: #94667d; font-size: 11px; line-height: 1.6; }
body.kitty-theme .kitty-sound-done { width: 100%; min-height: 44px; }
@media (max-width: 700px) {
  body.kitty-theme .kitty-sound-trigger { width: 40px; min-width: 40px; padding: 7px; justify-content: center; }
  body.kitty-theme .kitty-sound-trigger > span { display: none; }
}
@media (max-width: 380px) {
  body.kitty-theme .kitty-sound-choice { gap: 7px; padding: 7px 5px; }
  body.kitty-theme .kitty-sound-symbol { flex-basis: 29px; height: 29px; font-size: 21px; }
  body.kitty-theme .kitty-sound-copy small { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  body.kitty-theme .kitty-sound-option { transition: none; }
}