/* ==========================================================================
   BOBA NOVA — milk-tea mouse theme
   A soft, edible pastel layer over the original layout.
   ========================================================================== */
@font-face {
  font-family: 'ZCOOL KuaiLe';
  src: url('../assets/fonts/zcool-kuaile-subset.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #fff7ee;
  --bg-2: #ffeef2;
  --panel: rgba(255, 251, 244, .88);
  --panel-strong: #fffdf8;
  --panel-soft: rgba(255, 218, 228, .18);
  --line: rgba(126, 82, 69, .11);
  --line-strong: rgba(126, 82, 69, .2);
  --text: #5b3a32;
  --muted: #98766d;
  --muted-2: #ba958a;
  --cyan: #ff8fab;
  --sky: #9bbfe4;
  --violet: #b49be8;
  --pink: #ff7fa0;
  --lime: #9bcf9d;
  --amber: #f6b85c;
  --coral: #ff957f;
  --danger: #ef7488;
  --good: #62c8a3;
  --font-display: 'Fredoka', ui-rounded, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
  --font-cute: 'ZCOOL KuaiLe', 'Fredoka', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
  --radius: 24px;
  --radius-sm: 15px;
  --shadow: 0 24px 70px rgba(166, 107, 96, .15);
  --glow-cyan: 0 0 30px rgba(255, 143, 171, .2);
  --glow-pink: 0 0 30px rgba(255, 127, 160, .22);
}

html { background: #fff7ee; }
body {
  background: #fff7ee;
  color: var(--text);
}
body::selection, ::selection { background: rgba(255, 143, 171, .3); color: #5b3a32; }
:focus-visible { outline: 2px solid #ff9fb5; outline-offset: 3px; }
* { scrollbar-color: rgba(222, 154, 158, .4) transparent; }
*::-webkit-scrollbar-thumb { background: rgba(222, 154, 158, .38); }

/* soft boba landscape behind everything */
.art-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: linear-gradient(180deg, #ffeaf0 0%, #fff6e9 52%, #eaf8f0 100%);
}
.art-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .58;
  filter: saturate(.9) brightness(1.08) blur(.2px);
  transform: scale(1.03);
}
.art-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 58% at 14% 8%, rgba(255, 255, 255, .52), transparent 70%),
    linear-gradient(180deg, rgba(255, 249, 241, .38), rgba(255, 249, 241, .62) 42%, rgba(255, 246, 236, .82) 100%);
}
#bg-canvas { z-index: 1; opacity: .9; }
.aurora {
  z-index: 1;
  opacity: .36;
  background:
    radial-gradient(circle at 12% 16%, rgba(255, 170, 192, .5), transparent 32%),
    radial-gradient(circle at 86% 10%, rgba(255, 213, 160, .42), transparent 36%),
    radial-gradient(circle at 78% 86%, rgba(176, 224, 203, .35), transparent 34%),
    radial-gradient(circle at 8% 82%, rgba(203, 186, 238, .28), transparent 30%);
  filter: blur(38px);
}
.grain { opacity: .018; z-index: 2; }

/* shared bits */
.eyebrow {
  gap: 8px;
  padding: 7px 13px 7px 10px;
  border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, .86);
  background: rgba(255, 252, 245, .68);
  box-shadow: 0 6px 18px rgba(192, 126, 128, .1);
  color: #b17870;
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: none;
  font-weight: 700;
  backdrop-filter: blur(8px);
}
.live-dot {
  width: 7px;
  height: 7px;
  background: #78cfad;
  box-shadow: 0 0 0 4px rgba(120, 207, 173, .16), 0 0 10px rgba(120, 207, 173, .55);
}
.title-dot { color: #ff8fab; }
.brand-en em { color: #ff7f9f; }

/* top bar */
.topbar {
  height: 72px;
  gap: 16px;
  padding: 0 26px;
  background: rgba(255, 250, 243, .84);
  border-bottom: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 10px 34px rgba(174, 116, 110, .08);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  color: var(--text);
}
.brand { gap: 11px; }
.brand-orb {
  width: 40px;
  height: 40px;
  overflow: hidden;
  border: 3px solid #fffaf2;
  background: #fff url('../assets/art/mouse-icon.webp') center / cover no-repeat;
  box-shadow: 0 6px 16px rgba(190, 128, 130, .22), 0 0 0 1px rgba(255, 192, 204, .5);
}
.brand-orb i, .brand-orb b { display: none; }
.brand-en {
  color: #5b3a32;
  font-size: 16px;
  letter-spacing: .05em;
  text-shadow: 0 1px 0 #fff;
}
.brand-cn {
  color: #b57f76;
  font-family: var(--font-cute);
  font-size: 10px;
  letter-spacing: .24em;
}
.topbar-actions { gap: 7px; }
.conn-pill {
  height: 31px;
  border: 1px solid rgba(255, 255, 255, .9);
  background: rgba(255, 252, 246, .76);
  color: #a38077;
  box-shadow: 0 4px 12px rgba(180, 120, 120, .07);
}
.conn-pill[data-state='open'] { color: #4f9b82; border-color: #d9f0e6; background: #f4fffa; }
.conn-pill[data-state='open'] i { background: #62c8a3; box-shadow: 0 0 9px rgba(98, 200, 163, .7); }
.conn-pill[data-state='connecting'] { color: #b58542; border-color: #ffe7bf; background: #fffaf0; }
.conn-pill[data-state='connecting'] i { background: #f6b85c; }
.conn-pill[data-state='offline'] { color: #c16473; border-color: #ffd6dc; background: #fff6f7; }
.conn-pill[data-state='offline'] i { background: #ef7488; }
.icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #a47d73;
  border: 1px solid rgba(255, 255, 255, .9);
  background: rgba(255, 252, 246, .65);
  box-shadow: 0 4px 12px rgba(180, 120, 120, .06);
}
.icon-btn:hover { color: #6d453c; background: #fffdf8; border-color: #ffe1e5; transform: translateY(-1px); }
.icon-btn.small { border-radius: 11px; background: #fffaf3; border-color: #ffe3e4; color: #b07d73; }

/* panels */
.panel {
  background:
    linear-gradient(150deg, rgba(255, 255, 255, .58), transparent 38%),
    var(--panel);
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: 0 18px 42px rgba(172, 112, 106, .12), inset 0 0 0 1px rgba(255, 232, 229, .4);
  backdrop-filter: blur(16px) saturate(115%);
  -webkit-backdrop-filter: blur(16px) saturate(115%);
}
.panel::after { background: radial-gradient(120% 80% at 16% 0%, rgba(255, 255, 255, .24), transparent 48%); }
.panel > * { position: relative; z-index: 1; }
.panel-head { color: #846259; font-size: 11px; }
.panel-head span:first-child {
  text-transform: none;
  font-family: var(--font-cute);
  font-weight: 400;
  letter-spacing: .05em;
  font-size: 13px;
  color: #6b463d;
}
.panel-meta { color: #b48e83; }
.panel-meta b { color: #f0859e; }

/* buttons */
.btn {
  min-height: 46px;
  border-radius: 16px;
  font-weight: 700;
  color: #5b3a32;
  transition: transform .18s var(--ease), box-shadow .18s, background .18s, border-color .18s;
}
.btn-primary {
  color: #6a3933;
  background: linear-gradient(135deg, #ffd2dc 0%, #ffa7bb 44%, #ffc38f 100%);
  border: 2px solid rgba(255, 255, 255, .92);
  box-shadow: 0 11px 24px rgba(240, 133, 158, .27), inset 0 2px 0 rgba(255, 255, 255, .65);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 15px 30px rgba(240, 133, 158, .32), inset 0 2px 0 rgba(255, 255, 255, .7); }
.btn-primary:active { transform: translateY(0) scale(.985); }
.btn-primary:disabled { opacity: .46; filter: saturate(.55); }
.btn-glass {
  color: #80574e;
  background: rgba(255, 252, 246, .82);
  border: 2px solid rgba(255, 255, 255, .95);
  box-shadow: 0 8px 20px rgba(178, 118, 112, .1);
}
.btn-glass:hover { background: #fffdf9; border-color: #ffe2e5; box-shadow: 0 11px 24px rgba(178, 118, 112, .14); }
.btn-ghost { color: #a68177; }
.btn-ghost:hover { color: #6b463d; background: rgba(255, 255, 255, .55); }
.btn[disabled] { opacity: .46; }
.btn-hero { border-radius: 22px; height: 66px; }
.btn-hero small { color: rgba(103, 55, 48, .62); }
.mini-btn {
  border-radius: 10px;
  border: 1px solid #ffe0e4;
  background: #fff6f4;
  color: #a86867;
}
.mini-btn:hover { background: #fff0ef; color: #874f4b; }
.mini-btn.ghost { color: #a27c73; border-color: #f4dfd8; }

/* home */
.screen-home { padding: 3.5vh 28px 30px; }
.home-grid { gap: clamp(26px, 4vw, 64px); }
.home-copy { max-width: 620px; }
.logo {
  margin-top: 15px;
  color: #5b3a32;
  font-size: clamp(64px, 8.2vw, 116px);
  letter-spacing: -.035em;
  text-shadow: 0 2px 0 rgba(255, 255, 255, .8), 0 14px 36px rgba(198, 128, 130, .13);
}
.logo-bubble { color: #ff8fab; text-shadow: 0 3px 0 #fff, 0 10px 22px rgba(255, 143, 171, .2); }
.logo-rest { color: #5b3a32; }
.logo-nova {
  margin-top: 4px;
  font-size: .75em;
  background: linear-gradient(100deg, #ff7f9f 4%, #e9a34f 50%, #9b7ed6 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 2px 0 rgba(255, 255, 255, .7)) drop-shadow(0 8px 18px rgba(238, 158, 164, .18));
}
.logo-cn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 6px 15px;
  border-radius: 99px;
  background: rgba(255, 252, 246, .62);
  border: 1px solid rgba(255, 255, 255, .9);
  color: #b67975;
  font-family: var(--font-cute);
  font-size: clamp(14px, 1.3vw, 17px);
  font-weight: 400;
  letter-spacing: .22em;
  box-shadow: 0 5px 16px rgba(190, 126, 126, .07);
}
.logo-cn::before, .logo-cn::after {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8b5a44;
  box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .28);
  opacity: .75;
}
.tagline { margin-top: 22px; color: #947169; font-size: clamp(14px, 1.1vw, 16px); line-height: 1.9; }
.profile-card {
  margin-top: 28px;
  width: min(100%, 470px);
  padding: 18px 20px 16px;
  border-radius: 24px;
  background: rgba(255, 252, 246, .8);
  border: 1px solid rgba(255, 255, 255, .96);
  box-shadow: 0 18px 42px rgba(174, 112, 108, .13), inset 0 0 0 1px rgba(255, 230, 228, .45);
  backdrop-filter: blur(16px);
}
.field-label {
  margin-bottom: 6px;
  color: #b88b81;
  font-family: var(--font-cute);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: none;
}
.name-input {
  height: 40px;
  border-bottom: 2px dashed #f1c8c4;
  color: #5b3a32;
  font-family: var(--font-cute);
  font-size: 21px;
  font-weight: 400;
}
.name-input::placeholder { color: #c6a096; }
.name-input:focus { border-color: #ff9db2; }
.dice-btn {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  color: #d66f8a;
  background: #fff0f3;
  border: 1px solid #ffe0e5;
}
.dice-btn:hover { background: #ffe9ee; }
.avatar-picker { gap: 7px; margin-top: 15px; }
.avatar-choice { width: 38px; height: 38px; }
.avatar-choice[aria-checked='true'] {
  border-color: #fff;
  box-shadow: 0 0 0 4px rgba(255, 159, 181, .22), 0 6px 15px rgba(216, 126, 145, .24);
}
.home-actions { margin-top: 24px; }
.home-note { color: #b18a80; }
.invite-banner {
  border: 1px solid #ffdfe4;
  background: #fff5f4;
  color: #9d6864;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(190, 126, 126, .07);
}
.invite-banner code { color: #d66f8a; }
.feature-strip {
  margin-top: 32px;
  padding: 4px 0;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 24px;
  background: rgba(255, 252, 246, .55);
  box-shadow: 0 12px 30px rgba(176, 116, 110, .07);
  backdrop-filter: blur(10px);
}
.feature { padding: 17px 20px; }
.feature + .feature::before { background: rgba(240, 208, 201, .5); }
.feature .icon { color: #f08ba2; opacity: .9; }
.feature b { color: #6b463d; font-size: 12px; }
.feature span { color: #b28c82; }
.home-footer { color: #b49187; margin-top: 28px; }
.foot-dot { color: #e2bdb4; }

/* the milk tea mouse hero */
.home-visual { gap: 16px; }
.hero-card {
  position: relative;
  width: min(100%, 460px);
  aspect-ratio: 4 / 5;
  border-radius: 36px;
  border: 7px solid rgba(255, 253, 247, .92);
  background: #ffe9e7;
  box-shadow: 0 30px 70px rgba(180, 112, 110, .2), 0 0 0 1px rgba(255, 209, 214, .55);
  transform: rotate(-2deg);
  overflow: hidden;
  animation: heroFloat 8s ease-in-out infinite;
}
.hero-card > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), inset 0 -110px 80px rgba(255, 240, 232, .18);
}
.hero-sticker {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  padding: 10px 14px;
  border-radius: 18px;
  background: rgba(255, 250, 242, .88);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 10px 24px rgba(155, 98, 91, .15);
  backdrop-filter: blur(10px);
  z-index: 2;
}
.hero-sticker b {
  display: block;
  color: #7d4f44;
  font-family: var(--font-cute);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .06em;
}
.hero-sticker span { display: block; margin-top: 2px; color: #b1847a; font-size: 8px; letter-spacing: .13em; }
.hero-spark {
  position: absolute;
  z-index: 2;
  color: #fff7ec;
  text-shadow: 0 2px 8px rgba(174, 106, 105, .2);
  animation: sparkle 3.8s ease-in-out infinite;
}
.hs-a { top: 18px; left: 22px; font-size: 24px; color: #ffd1dc; }
.hs-b { top: 84px; right: 26px; font-size: 13px; color: #f3c58d; animation-delay: -1.3s; }
.hs-c { bottom: 98px; left: 22px; font-size: 20px; color: #ffc1d2; animation-delay: -2.3s; }
.hs-d { top: 42%; right: 18px; font-size: 18px; color: #c9e8d6; animation-delay: -.7s; }
@keyframes heroFloat { 0%, 100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(-1deg) translateY(-9px); } }
@keyframes sparkle { 0%, 100% { opacity: .55; transform: scale(.9) rotate(-6deg); } 50% { opacity: 1; transform: scale(1.12) rotate(7deg); } }
.visual-caption { margin-top: 2px; color: #ad857a; }
.visual-caption span::before { background: #f39ab0; }

/* lobby */
.screen-lobby { padding: 32px 26px 48px; }
.lobby-shell { max-width: 1200px; }
.screen-title {
  color: #5b3a32;
  font-family: var(--font-cute);
  font-weight: 400;
  font-size: clamp(52px, 5.6vw, 70px);
  letter-spacing: .02em;
  text-shadow: 0 2px 0 #fff, 0 12px 26px rgba(190, 124, 118, .12);
}
.screen-sub { color: #a07b72; }
.room-ticket {
  padding: 14px 16px 14px 20px;
  border-radius: 20px;
  border: 2px dashed #f4cdc8;
  background: rgba(255, 251, 244, .78);
  box-shadow: 0 14px 32px rgba(180, 116, 110, .1);
}
.room-ticket::before {
  width: 5px;
  border-radius: 0;
  background: linear-gradient(180deg, #ffb1c1, #ffd2a8);
  opacity: .8;
}
.ticket-label { color: #b58c81; }
.room-code { color: #6b463d; font-family: var(--font-display); letter-spacing: .18em; }
.ticket-hint { color: #b89086; }
.ticket-actions .icon-btn.small { background: #fff8f2; }
.seats-panel { padding: 22px; }
.seat {
  min-height: 178px;
  border-radius: 20px;
  border: 1px solid #ffe4e0;
  background: rgba(255, 253, 248, .62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}
.seat.is-filled { background: linear-gradient(160deg, #fffdf9, #fff5f2); border-color: #ffe3e2; }
.seat.is-self {
  border-color: #ffb7c5;
  box-shadow: 0 0 0 4px rgba(255, 183, 197, .16), 0 12px 26px rgba(231, 143, 157, .12);
}
.seat.is-empty { border-style: dashed; border-color: #f4cdc8; color: #c49a90; }
.seat-name { color: #6b463d; }
.seat-tags .tag, .seat-tags span { color: #b18a80; }
.seat-crown { color: #f1b44e; }
.seat-empty-plus {
  background: #fff0f2;
  border: 1px dashed #f3c8c4;
  color: #d68d8e;
}
.seat-empty-label { color: #c49a90; }
.seats-foot { border-top: 1px dashed #f4dcd6; color: #ac867c; }
.seats-foot .icon { color: #d99a9e; }
.settings-list div { border-top: 1px dashed #f3dfd9; color: #a98379; }
.settings-list b { color: #6b463d; }
.switch { background: #f6e6e0; border-color: #efd8d1; }
.switch::after { background: #fffaf4; box-shadow: 0 2px 6px rgba(155, 105, 98, .18); }
.switch-row input:checked + .switch { background: #ffc1cf; border-color: #ffb2c4; }
.switch-row input:checked + .switch::after { background: #fff; box-shadow: 0 2px 8px rgba(219, 114, 138, .3); }
.switch-copy small { color: #b58e84; }
.host-tag { color: #b58e84; }
.how-list li { border-bottom: 1px dashed #f4dfd9; }
.how-list b { color: #6b463d; }
.how-list span { color: #a98379; }
.auto-countdown {
  border: 1px solid #ffe1e4;
  background: #fff5f3;
  border-radius: 16px;
  color: #a87470;
}
.auto-ring { border-color: #ffc6d2; color: #d66f8a; }
.lobby-actions .btn-primary { min-height: 54px; }
.waiting-copy { color: #b18a80; }

/* game */
.screen-game { padding: 14px 20px 16px; }
.game-shell { max-width: 1280px; }
.rivals-panel {
  border-radius: 26px;
  background: rgba(255, 251, 244, .72);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 18px 40px rgba(174, 112, 106, .1);
  backdrop-filter: blur(14px);
}
.rivals-panel::before {
  content: '8';
  color: rgba(245, 176, 188, .2);
  text-shadow: 0 2px 0 rgba(255, 255, 255, .4);
}
.rivals-panel::after { background: radial-gradient(circle, rgba(255, 176, 192, .16), transparent 67%); }
.rivals-head { color: #846259; }
.rivals-hint { border-top: 1px dashed #f2dcd6; color: #b28c82; }
.rival {
  border-radius: 16px;
  background: rgba(255, 253, 248, .68);
  border: 1px solid #ffe5e1;
  box-shadow: 0 4px 12px rgba(180, 120, 112, .05);
}
.rival:hover { background: #fffdf9; border-color: #ffc9d2; box-shadow: 0 8px 18px rgba(200, 130, 140, .1); }
.rival.is-target {
  border-color: #ff9fb3;
  background: #fff7f6;
  box-shadow: 0 0 0 2px rgba(255, 159, 179, .17), 0 8px 20px rgba(220, 132, 148, .12);
}
.rival.is-spectated { border-color: #d4b5ea; }
.rival-name { color: #6b463d; }
.rival-bot { color: #cc7c8e; border-color: #ffd9e0; background: #fff4f5; border-radius: 5px; }
.rival-board { background: #fff5ee; border-color: #f6dcd4; border-radius: 8px; }
.rival-score { color: #5b3a32; }
.rival-danger { background: #f8e5df; }
.rival-danger i { background: linear-gradient(90deg, #8fd4b4, #f7c77f 60%, #f08ba0); }
.rival-place { color: #b25e6d; background: #fff0f2; border-color: #ffd4db; }
.rival-flag { color: #e88aa2; }
.rival-attack { border-color: rgba(240, 116, 136, .7); }
.rival-speech {
  color: #7b5048;
  background: rgba(255, 250, 242, .96);
  border: 1px solid #ffdfe2;
  box-shadow: 0 6px 14px rgba(170, 110, 106, .12);
}
.rival-speech.emote { text-shadow: 0 3px 10px rgba(160, 100, 95, .2); }
.target-readout { color: #a68076; }
.target-readout .icon { color: #f08ba0; }
.target-readout b { color: #6b463d; }
.round-pill {
  border-color: #ffe3df;
  background: rgba(255, 252, 246, .72);
  color: #ad857b;
}
.danger-tag { color: #b45e6d; background: #fff0f1; border-color: #ffd1d8; }
.board-frame {
  border-radius: 30px;
  background:
    radial-gradient(90% 70% at 50% 109%, rgba(255, 181, 188, .22), transparent 62%),
    linear-gradient(180deg, #fffaf3, #fff1f5);
  border: 3px solid rgba(255, 255, 255, .95);
  box-shadow: 0 24px 62px rgba(188, 120, 120, .16), inset 0 0 0 1px rgba(255, 219, 219, .6);
}
.board-glow { background: radial-gradient(ellipse, rgba(255, 164, 181, .22), transparent 67%); }
#game-board {
  border-radius: 22px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .95), 0 18px 42px rgba(190, 120, 120, .12);
}
.arena-head { color: #a17c72; }
.arena-foot { color: #a17c72; }
.ammo-label { color: #b58e83; }
.aim-hint { color: #b08a80; }
.fire-btn {
  background: linear-gradient(135deg, #ffd0da, #ff9fb2 48%, #ffc28f);
  border: 2px solid rgba(255, 255, 255, .94);
  box-shadow: 0 10px 24px rgba(235, 132, 152, .25), inset 0 2px 0 rgba(255, 255, 255, .6);
  color: #6a3933;
}
.fire-btn:hover { box-shadow: 0 14px 30px rgba(235, 132, 152, .3); }
.fire-core { background: #fff5f2; color: #d66f8a; box-shadow: inset 0 0 0 1px #ffe0e4; }
.fire-label { color: #6a3933; }
.tactics-panel { gap: 9px; }
.self-panel { padding: 14px; }
.self-meta b { color: #6b463d; }
.self-score { color: #b28c82; }
.self-score em { color: #d66f8a; }
.self-combo { color: #c36f83; background: #fff1f3; border-color: #ffdce2; }
.self-combo.hot { color: #a94e64; background: #ffe3e9; box-shadow: 0 0 18px rgba(255, 127, 160, .16); }
.self-stats { border-top: 1px dashed #f2dcd6; }
.self-stats span { color: #b58e83; }
.self-stats b { color: #6b463d; }
.energy-pips i { background: #f9e9e3; border-color: #f3dcd5; }
.energy-pips i.on { background: linear-gradient(90deg, #ffb2c2, #ffd49f); box-shadow: 0 0 10px rgba(255, 170, 186, .35); }
.energy-copy { color: #b28c82; }
.target-chip { background: #fff7f2; border-color: #ffe1db; }
.target-chip b { color: #6b463d; }
.target-chip span { color: #b28c82; }
.link-btn { color: #d17b8c; }
.emote-btn {
  background: #fffaf4;
  border-color: #ffe5df;
  border-radius: 10px;
}
.emote-btn:hover { background: #fff0f2; transform: translateY(-2px); }
.chat-btn {
  color: #a47d73;
  background: #fffaf4;
  border-color: #ffe5df;
}
.chat-btn:hover { color: #6b463d; background: #fff3ef; }
.feed-item { color: #8a6259; font-size: 10px; }
.feed-item b { color: #5b3a32; font-weight: 700; }
.feed-panel .feed { gap: 6px; }
.feed-item em { color: #d28b55; }
.feed-item .feed-dot { background: #e4c3bb; }
.empty-feed { color: #c2a096; }

/* game overlays */
.countdown-overlay {
  background: radial-gradient(circle at 50% 55%, rgba(255, 249, 242, .55), rgba(255, 243, 238, .82));
  backdrop-filter: blur(5px);
}
.countdown-kicker { color: #b1857a; }
.countdown-overlay strong {
  background: linear-gradient(120deg, #ff9fb5, #f7b36b 52%, #b59ce6);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 8px 26px rgba(245, 160, 168, .25);
}
.countdown-text { color: #a98379; }
.dead-overlay {
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(255, 158, 176, .18), transparent 52%),
    rgba(255, 248, 241, .93);
  border: 1px solid rgba(255, 193, 200, .9);
  box-shadow: 0 18px 40px rgba(180, 112, 110, .14);
  color: #6b463d;
}
.dead-kicker { color: #d9788d; }
.dead-overlay strong { color: #6b463d; }
.dead-overlay p { color: #a68076; }
.conn-overlay { background: rgba(255, 247, 240, .88); backdrop-filter: blur(7px); color: #6b463d; }
.conn-overlay strong { color: #6b463d; }
.conn-overlay span { color: #a68076; }
.spinner { border-color: #ffe1e3; border-top-color: #f08ba0; }
.combo-banner {
  color: #7b4a43;
  background: rgba(255, 249, 241, .94);
  border: 1px solid #ffd8dd;
  box-shadow: 0 10px 30px rgba(219, 132, 145, .16);
  text-shadow: 0 1px 0 #fff;
}
.attack-flash { background: radial-gradient(circle at 50% 80%, rgba(255, 143, 171, 0), rgba(255, 143, 171, .23) 70%, rgba(255, 143, 171, .38)); }
.match-timer {
  color: #6b463d;
  background: rgba(255, 252, 246, .8);
  border-color: #ffe3df;
  box-shadow: 0 4px 12px rgba(180, 120, 112, .06);
}
.match-timer .icon { color: #e88ba0; }
.match-timer.low { color: #c25d70; border-color: #ffd1d8; background: #fff1f2; }
.match-room { color: #b28c82; }
.match-room b { color: #7b5048; }

/* result */
.screen-result { padding: 18px 24px 26px; }
.result-top { margin-bottom: 14px; }
.result-mascot {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 3px solid #fffaf2;
  box-shadow: 0 8px 20px rgba(190, 125, 125, .14);
  margin-bottom: 3px;
}
.result-kicker { color: #b48c82; }
.result-title {
  background: linear-gradient(100deg, #ff9fb5, #f6b26a 48%, #b49be8);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 10px 22px rgba(240, 158, 166, .16));
  font-family: var(--font-cute);
  font-weight: 400;
}
.result-sub { color: #a37d73; }
.podium-card {
  background: linear-gradient(165deg, #fffdf8, #fff5f1);
  border: 1px solid #ffe3df;
  box-shadow: 0 12px 28px rgba(180, 118, 112, .09);
}
.podium-card.p1 {
  background:
    radial-gradient(100% 80% at 50% 0%, rgba(255, 206, 132, .28), transparent 64%),
    linear-gradient(165deg, #fffdf7, #fff4e7);
  border-color: #ffdfb3;
  box-shadow: 0 20px 44px rgba(235, 177, 100, .16);
}
.podium-card.p2 { border-color: #e7e1f4; }
.podium-card.p3 { border-color: #ffe1d2; }
.podium-rank { background: #fff6ee; border-color: #ffe3dc; color: #b18a80; }
.podium-card.p1 .podium-rank { color: #7d4f26; background: linear-gradient(140deg, #ffe7aa, #ffc568); border-color: #fff3d5; box-shadow: 0 4px 12px rgba(255, 190, 90, .25); }
.podium-card.p2 .podium-rank { color: #fff; background: linear-gradient(140deg, #d8d2e7, #a9a0c4); }
.podium-card.p3 .podium-rank { color: #6b3d2e; background: linear-gradient(140deg, #ffd4b8, #e9a57f); }
.podium-name { color: #6b463d; }
.podium-score { color: #d66f8a; }
.podium-score small { color: #b28c82; }
.ranking-panel { border-radius: 24px; }
.rank-row { border-top: 1px dashed #f2dcd6; color: #a17c72; }
.rank-row.is-me { background: linear-gradient(90deg, rgba(255, 190, 202, .2), transparent); }
.rank-num { color: #b18a80; }
.rank-row:nth-child(1) .rank-num { color: #e0a54f; }
.rank-name { color: #6b463d; }
.rank-score { color: #d66f8a; }
.rank-stat span { color: #b58e83; }
.result-hint { color: #b28c82; }
@media (min-width: 821px) {
  .result-title { font-size: clamp(48px, 6vw, 68px); margin-top: 3px; }
  .result-sub { margin-top: 6px; font-size: 12px; }
  .podium { margin: 10px auto 12px; gap: 10px; }
  .podium-card { padding: 12px 10px 10px; }
  .podium-card.p1 { padding-top: 17px; }
  .podium-avatar { width: 54px; height: 54px; }
  .podium-card.p1 .podium-avatar { width: 70px; height: 70px; }
  .podium-name { font-size: 12px; }
  .podium-score { font-size: 20px; }
  .ranking-panel { padding: 12px 16px 6px; }
  .ranking { margin-top: 4px; }
  .rank-row { padding: 4px 4px; font-size: 10px; }
  .rank-avatar { width: 24px; height: 24px; }
  .rank-score { font-size: 15px; }
  .result-actions { margin-top: 12px; }
  .result-actions .btn { min-height: 42px; }
  .result-hint { margin-top: 8px; }
}

/* toasts and modals */
.toast {
  border-radius: 14px;
  background: rgba(255, 251, 245, .96);
  border: 1px solid #ffe2e2;
  box-shadow: 0 14px 30px rgba(170, 108, 102, .13);
  color: #6b463d;
}
.combo-banner { bottom: 194px; }
.toast::before { background: #f08ba0; box-shadow: 0 0 8px rgba(240, 139, 160, .6); }
.toast.error::before { background: #ef7488; }
.toast.good::before { background: #62c8a3; }
.modal-backdrop {
  background: rgba(255, 239, 235, .55);
  backdrop-filter: blur(10px);
}
.modal {
  border-radius: 26px;
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(255, 202, 213, .24), transparent 44%),
    linear-gradient(160deg, #fffdf8, #fff7f1);
  border: 1px solid rgba(255, 255, 255, .96);
  box-shadow: 0 36px 90px rgba(160, 98, 92, .24), inset 0 0 0 1px rgba(255, 224, 224, .55);
  color: #5b3a32;
}
.modal-kicker { color: #d17b8c; }
.modal-title { color: #5b3a32; font-family: var(--font-cute); font-weight: 400; }
.modal-close { color: #a68076; background: #fff5f1; border: 1px solid #ffe5df; }
.modal-close:hover { color: #6b463d; background: #fff0ee; }
.modal-body { color: #8a6660; }
.code-input {
  border: 2px dashed #f2c8c4;
  background: #fffaf3;
  color: #6b463d;
  border-radius: 16px;
}
.code-input:focus { border-color: #ff9fb2; box-shadow: 0 0 0 4px rgba(255, 159, 178, .12); }
.code-input::placeholder { color: #d2ada3; }
.code-help { color: #b28c82; }
.rule-block { background: #fff8f3; border-color: #ffe8e2; border-radius: 15px; }
.rule-block h4 { color: #6b463d; }
.rule-block h4 .icon { color: #f08ba0; }
.rule-block p, .rule-list { color: #9a746b; }
.rule-block b { color: #6b463d; }
.leave-warning { color: #c25d70; }
.boot-overlay { background: rgba(255, 247, 240, .86); backdrop-filter: blur(12px); color: #5b3a32; }
.boot-overlay strong { color: #6b463d; }
.boot-overlay span { color: #a68076; }
.noscript { background: #fff7ee; color: #5b3a32; }
.visual-caption, .ticket-hint, .how-list, .settings-list, .seats-foot, .waiting-copy { font-family: var(--font-ui); }
.tag, .seat-tags span, .podium-tags .tag { border-radius: 6px; }

/* soft mobile adaptations */
@media (max-width: 1020px) {
  .home-grid { grid-template-columns: 1fr; }
  .home-visual { order: 2; }
  .hero-card { width: min(72vw, 380px); border-width: 5px; }
}
@media (max-width: 820px) {
  .topbar { background: rgba(255, 250, 243, .92); }
  .brand-orb { width: 34px; height: 34px; border-width: 2px; }
  .home-visual { display: flex; order: 2; margin-top: 12px; }
  .hero-card { width: min(58vw, 260px); border-radius: 24px; }
  .hero-sticker { left: 10px; right: 10px; bottom: 10px; padding: 7px 9px; border-radius: 12px; }
  .hero-sticker b { font-size: 12px; }
  .hero-sticker span { font-size: 7px; letter-spacing: .06em; }
  .visual-caption { display: none; }
  .feature-strip { border-radius: 18px; }
  .screen-title { font-size: clamp(42px, 11vw, 56px); }
  .board-frame { border-width: 2px; box-shadow: 0 14px 30px rgba(188, 120, 120, .12); }
  .rival { background: rgba(255, 253, 248, .7); }
  .rivals-panel { background: rgba(255, 251, 244, .8); }
  .dead-overlay { background: rgba(255, 248, 241, .94); }
  .combo-banner { bottom: 128px; }
  .result-mascot { width: 58px; height: 58px; border-width: 3px; }
}
@media (max-width: 480px) {
  .brand-words { display: none; }
  .brand { padding: 2px; }
  .logo { font-size: clamp(54px, 17vw, 76px); }
  .logo-cn { font-size: 12px; letter-spacing: .15em; }
  .hero-card { width: min(62vw, 220px); }
  .profile-card { border-radius: 20px; }
  .avatar-choice { width: 33px; height: 33px; }
  .screen-title { font-size: 40px; }
}