/* menus — agent 07: modals, in-game menu, scores, round end, game over,
   how-to-play, leaderboard, friends, toasts, connection pill, invite bar, sheet chrome.
   Loaded after style.css, so these rules override the base modal styles. */

/* ------------------------------------------------------------ modal chrome */
.modal-root {
  padding: calc(14px + var(--safe-top)) 14px calc(14px + var(--safe-bottom));
}
.modal-backdrop {
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(38, 26, 12, 0.35), rgba(24, 15, 6, 0.72));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: mFade 0.22s ease both;
}
.modal-card {
  max-height: 100%;
  padding: 20px 18px 16px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(120, 90, 50, 0.35) transparent;
  background:
    repeating-linear-gradient(0deg, rgba(150, 115, 60, 0.045) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #fffdf6, #f3e6ca);
  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.8) inset, 0 26px 50px rgba(30, 18, 6, 0.55);
  transform-origin: 50% 60%;
  animation: mIn 0.3s cubic-bezier(0.2, 1.15, 0.35, 1) both;
}
.modal-card:focus { outline: none; }
.modal-card:focus-visible { outline: 3px solid rgba(34, 169, 216, 0.55); outline-offset: 2px; }
.modal-root.closing { pointer-events: none; }
.modal-root.closing .modal-backdrop { animation: mFadeOut 0.18s ease forwards; }
.modal-root.closing .modal-card { animation: mOut 0.18s ease-in forwards; }
.modal-root.locked .modal-backdrop { pointer-events: none; }
.modal-card h2 { font-size: 32px; line-height: 1.05; }
.modal-card .sub { font-size: 12.5px; }
.modal-card .btn { min-height: 46px; font-size: 14px; }
.modal-card .btn.small { min-height: 36px; font-size: 12.5px; }
.btn.invisible { visibility: hidden; }

@keyframes mIn { from { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes mOut { to { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.96); } }
@keyframes mFade { from { opacity: 0; } }
@keyframes mFadeOut { to { opacity: 0; } }
@keyframes rowIn { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------- in-game menu sign */
.modal-card.mk-menu {
  max-width: 330px;
  max-height: none;
  overflow: visible;
  margin-top: 34px;
  padding: 18px 16px 16px;
  color: #4a240a;
  border: 3px solid #6b3a14;
  border-radius: 14px;
  background:
    repeating-linear-gradient(90deg, rgba(120, 70, 20, 0.06) 0 2px, transparent 2px 11px),
    repeating-linear-gradient(180deg, transparent 0 62px, rgba(90, 45, 10, 0.26) 62px 64px, rgba(255, 236, 196, 0.35) 64px 65px),
    linear-gradient(180deg, #f3cb8c, #e1ab64 55%, #c98c47);
  box-shadow:
    inset 0 2px 0 rgba(255, 240, 205, 0.7),
    inset 0 -4px 0 rgba(90, 45, 10, 0.22),
    0 24px 44px rgba(30, 16, 4, 0.55);
  transform-origin: 50% -40px;
  animation-name: signIn;
  animation-duration: 0.42s;
  animation-timing-function: cubic-bezier(0.25, 1.4, 0.4, 1);
}
@keyframes signIn {
  from { opacity: 0; transform: translate3d(0, -40px, 0) rotate(-5deg); }
  60% { opacity: 1; transform: rotate(1.5deg); }
  to { opacity: 1; transform: none; }
}
.sign-ropes i {
  position: absolute; top: -48px; width: 5px; height: 52px; border-radius: 3px;
  background: repeating-linear-gradient(160deg, #d4b07a 0 4px, #8a6431 4px 7px);
}
.sign-ropes i:first-child { left: 22%; }
.sign-ropes i:last-child { right: 22%; }
.sign-ropes i::after {
  content: ""; position: absolute; bottom: -5px; left: -4px; width: 13px; height: 13px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f4efe4, #7d7366 72%);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}
.modal-card h2.sign-title {
  margin: 0; text-align: center;
  font-family: Bangers, Impact, sans-serif; font-size: 40px; letter-spacing: 4px; line-height: 1;
  color: #fff3d4; -webkit-text-stroke: 1.5px #5a2c0c;
  text-shadow: 0 3px 0 #5a2c0c, 0 6px 8px rgba(60, 30, 8, 0.3);
}
.sign-sub { text-align: center; font-size: 12px; font-weight: 600; color: rgba(74, 36, 10, 0.75); margin: 4px 0 14px; letter-spacing: 0.5px; }

.plank {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 48px; padding: 9px 12px; border-radius: 10px;
  font-family: "Bree Serif", Georgia, serif; font-size: 16px; color: #4a240a;
  background:
    repeating-linear-gradient(90deg, rgba(120, 70, 20, 0.05) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #fff3d8, #f2d6a3 60%, #e4ba78);
  border: 2px solid #8a5222;
  box-shadow: 0 3px 0 #7a4519, 0 6px 10px rgba(60, 30, 8, 0.22);
  text-shadow: 0 1px 0 rgba(255, 248, 230, 0.8);
  transition: transform 0.08s;
}
.plank:active { transform: translate3d(0, 2px, 0); box-shadow: 0 1px 0 #7a4519, 0 2px 4px rgba(60, 30, 8, 0.2); }
.plank svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.plank.go {
  min-height: 56px; font-family: Bangers, Impact, sans-serif; font-size: 27px; letter-spacing: 2.5px; color: #fff;
  background: linear-gradient(180deg, #8fe0ff, #2bb7e8 58%, #0a8cc0);
  border-color: #065f86; text-shadow: 0 2px 0 rgba(0, 60, 90, 0.55);
  box-shadow: 0 4px 0 #065f86, 0 8px 16px rgba(0, 60, 90, 0.3);
}
.plank.go svg { fill: #fff; stroke: none; width: 20px; height: 20px; }
.plank.go:active { box-shadow: 0 1px 0 #065f86; }
.plank.danger {
  color: #5e1206; border-color: #8f2a17; text-shadow: 0 1px 0 rgba(255, 235, 228, 0.7);
  background: linear-gradient(180deg, #ffe0d6, #f4a996 60%, #df735c);
  box-shadow: 0 3px 0 #8f2a17, 0 6px 10px rgba(90, 20, 8, 0.2);
}
.plank .badge { background: #cf2f22; color: #fff; font-family: Fredoka, sans-serif; font-size: 10px; font-weight: 600; border-radius: 9px; padding: 1px 6px; text-shadow: none; }
.plank-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.plank-row .plank { font-size: 15px; }

.menu-settings {
  margin-top: 12px; padding: 2px 12px; border-radius: 12px; color: var(--ink);
  background:
    repeating-linear-gradient(0deg, rgba(150, 115, 60, 0.05) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #fffdf6, #f3e6ca);
  border: 2px solid #9a6a30;
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 rgba(90, 45, 10, 0.25);
}
.set-row { display: flex; align-items: center; justify-content: space-between; min-height: 46px; font-weight: 600; font-size: 14.5px; }
.set-row + .set-row { border-top: 1px dashed rgba(120, 90, 50, 0.3); }
.switch {
  position: relative; width: 52px; height: 30px; border-radius: 15px; flex: none;
  background: #d8c9ab; border: 2px solid #b59a6e;
}
.switch i {
  position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.22s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.switch[aria-checked="true"] { background: #2fb5e6; border-color: #0a86b4; }
.switch[aria-checked="true"] i { transform: translate3d(22px, 0, 0); }
.seg { display: flex; gap: 2px; padding: 2px; border-radius: 10px; background: #e9dcc2; border: 2px solid #b59a6e; }
.seg button { min-height: 32px; padding: 4px 12px; border-radius: 7px; font-size: 13px; font-weight: 600; color: rgba(43, 29, 16, 0.65); }
.seg button[aria-checked="true"] { background: #fff; color: #0a86b4; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); }
.leave-zone { margin-top: 12px; }
.leave-confirm {
  padding: 10px; border-radius: 12px; background: rgba(255, 244, 238, 0.95); border: 2px solid #8f2a17;
  animation: rowIn 0.22s ease both;
}
.leave-confirm p { margin: 0 0 2px; text-align: center; font-size: 13px; font-weight: 600; color: #5e1206; }
.leave-confirm .plank-row { margin-top: 8px; }

/* ------------------------------------------------------------- round end */
.modal-card.mk-round { max-width: 400px; padding-top: 12px; }
.rm-head { text-align: center; margin: 0 -18px 12px; padding: 0 18px 12px; border-bottom: 2px dashed rgba(120, 90, 50, 0.22); }
.rm-kicker { font-size: 10px; letter-spacing: 2.2px; text-transform: uppercase; font-weight: 600; color: rgba(43, 29, 16, 0.5); }
.modal-card h2.rm-stamp {
  display: inline-block; margin: 2px 0 6px;
  font-family: Bangers, Impact, sans-serif; font-size: 58px; letter-spacing: 3px; line-height: 1;
  color: #ffd23f; -webkit-text-stroke: 2px #5d3100;
  text-shadow: 0 4px 0 #e08a00, 0 8px 0 #a85f00, 0 12px 18px rgba(60, 40, 15, 0.35);
  transform: rotate(-4deg);
  animation: stampIn 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) 0.06s both;
}
.rm-head.bad h2.rm-stamp {
  color: #ff8766; -webkit-text-stroke-color: #5e1206;
  text-shadow: 0 4px 0 #c0321f, 0 8px 0 #7d140a, 0 12px 18px rgba(90, 20, 8, 0.35);
}
@keyframes stampIn { from { opacity: 0; transform: rotate(-4deg) scale(1.9); } to { opacity: 1; transform: rotate(-4deg) scale(1); } }
.rm-line { margin: 0; font-size: 13.5px; line-height: 1.4; color: rgba(43, 29, 16, 0.8); }
.rm-line b { color: #2b1d10; }
.rv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rv-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  background: rgba(255, 255, 255, 0.72); border: 2px solid #e5d6b6; border-radius: 12px;
  animation: rowIn 0.34s cubic-bezier(0.2, 0.9, 0.3, 1) both;
  animation-delay: calc(var(--i, 0) * 70ms + 160ms);
}
.rv-row.caller { border-color: #e2a72e; background: linear-gradient(90deg, rgba(255, 210, 63, 0.3), rgba(255, 255, 255, 0.78)); }
.rm-head.bad + .rv-list .rv-row.caller { border-color: #e37b67; background: linear-gradient(90deg, rgba(207, 47, 34, 0.13), rgba(255, 255, 255, 0.78)); }
.rv-row.me .rv-name > span { color: #0a7fb3; }
.rv-row.out .rv-main, .rv-row.out .m-av { opacity: 0.6; }
.m-av { flex: none; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-weight: 600; border: 2px solid #fff; box-shadow: 0 2px 4px rgba(60, 40, 15, 0.25); }
.rv-main { flex: 1; min-width: 0; }
.rv-name { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; font-weight: 600; font-size: 14px; }
.rv-name small { color: rgba(43, 29, 16, 0.5); font-weight: 500; font-size: 11px; }
.rv-tag {
  font-style: normal; font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; font-weight: 700;
  padding: 2px 6px; border-radius: 6px; background: #e9e1d0; color: #5a4a35; white-space: nowrap; line-height: 1.3;
}
.rv-tag.yaniv { background: #ffd23f; color: #5d3100; }
.rv-tag.asaf { background: #cf2f22; color: #fff; }
.rv-tag.caught { background: #22a9d8; color: #fff; }
.rv-tag.lucky { background: #2a9d5c; color: #fff; }
.rv-tag.out { background: #2b1d10; color: #fff; }
.rv-hand { display: flex; align-items: center; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.rv-val { margin-left: 4px; font-size: 12px; font-weight: 600; color: rgba(43, 29, 16, 0.6); }
.rv-empty { font-size: 11px; color: rgba(43, 29, 16, 0.45); }
.rv-pts { text-align: right; min-width: 54px; flex: none; }
.rv-pts b { display: block; font-family: Fredoka, sans-serif; font-weight: 700; font-size: 24px; letter-spacing: 0; line-height: 1; }
.rv-pts b.zero { color: #23945a; }
.rv-pts b.plus { color: #b3261c; }
.rv-pts b.asaf { color: #cf2f22; }
.rv-pts small { font-size: 10.5px; color: rgba(43, 29, 16, 0.55); white-space: nowrap; }
.rm-next { margin-top: 12px; text-align: center; font-size: 12.5px; font-weight: 600; color: rgba(43, 29, 16, 0.65); font-variant-numeric: tabular-nums; }
.rm-timer { height: 6px; margin-top: 6px; border-radius: 3px; overflow: hidden; background: rgba(120, 90, 50, 0.18); }
.rm-timer i { display: block; height: 100%; background: linear-gradient(90deg, #ffd23f, #e08a00); transform-origin: left center; }
.modal-card .rm-peek { min-height: 40px; margin-top: 10px; font-size: 13px; }

/* mini paper cards (round reveal, tutorial) */
.mc {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; flex: none;
  width: 24px; height: 33px; border-radius: 4px; line-height: 0.95;
  background: linear-gradient(180deg, #fff, #f3efe6); border: 1px solid #b8ad9b;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  font-family: Georgia, "Bree Serif", serif; color: #1a1a1a;
}
.mc b { font-size: 12px; font-weight: 700; }
.mc i { font-style: normal; font-size: 11px; }
.mc.red { color: #cf2f22; }
.mc.joker { color: #7b3fbf; }
.mc.joker i { font-family: Fredoka, sans-serif; font-size: 6.5px; letter-spacing: 0.4px; }
.mc.big { width: 46px; height: 64px; border-radius: 7px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); }
.mc.big b { font-size: 21px; }
.mc.big i { font-size: 19px; }
.mc.big.joker i { font-size: 9px; }
.mc.back { background: repeating-linear-gradient(45deg, #2bb7e8 0 5px, #148fc0 5px 10px); border: 3px solid #fff; box-shadow: 0 0 0 1px #8aa6b4, 0 3px 6px rgba(0, 0, 0, 0.2); }

/* --------------------------------------------------------------- game over */
.modal-card.mk-over { max-width: 400px; text-align: center; overflow-x: hidden; }
.go-head h2 { font-size: 38px; }
.go-trophy svg { display: block; width: 66px; height: 66px; margin: 0 auto 2px; filter: drop-shadow(0 6px 8px rgba(120, 70, 0, 0.3)); animation: trophyIn 0.6s cubic-bezier(0.2, 1.5, 0.4, 1) 0.1s both; }
.go-head:not(.won) .go-trophy svg { width: 46px; height: 46px; opacity: 0.85; }
@keyframes trophyIn { from { opacity: 0; transform: scale(0.3) rotate(-20deg); } to { opacity: 1; transform: none; } }
.podium {
  display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 6px;
  margin: 14px 0 10px; padding: 0 4px; border-bottom: 5px solid #6b3a14; border-radius: 0 0 4px 4px;
}
.pod-col { display: flex; flex-direction: column; align-items: center; min-width: 0; --d: 0.3s; }
.pod-col.p1 { --d: 0.6s; }
.pod-col.p2 { --d: 0.45s; }
.pod-who { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-bottom: 6px; max-width: 100%; animation: rowIn 0.4s cubic-bezier(0.2, 1.2, 0.4, 1) var(--d) both; }
.pod-who .ic-crown { width: 32px; height: 21px; margin-bottom: -5px; position: relative; z-index: 1; animation: crownBob 2.6s ease-in-out 1.2s infinite; }
@keyframes crownBob { 50% { transform: translate3d(0, -3px, 0) rotate(-4deg); } }
.pod-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 13.5px; }
.pod-col.me .pod-name { color: #0a7fb3; }
.pod-score { font-size: 11px; font-weight: 600; color: rgba(43, 29, 16, 0.6); }
.pod-rd { min-height: 18px; }
.pod-block {
  width: 100%; display: grid; place-items: center; border-radius: 8px 8px 0 0;
  font-family: Bangers, Impact, sans-serif; font-size: 30px; color: #fff3d4;
  -webkit-text-stroke: 1px #5a2c0c; text-shadow: 0 2px 0 #5a2c0c;
  background:
    repeating-linear-gradient(90deg, rgba(120, 70, 20, 0.07) 0 2px, transparent 2px 10px),
    linear-gradient(180deg, #f0c27f, #d49a55 60%, #b97a3a);
  border: 2px solid #6b3a14; border-bottom: 0;
  transform-origin: 50% 100%;
  animation: podRise 0.5s cubic-bezier(0.2, 1, 0.3, 1.1) calc(var(--d) - 0.22s) both;
}
.p1 .pod-block { height: 92px; background: repeating-linear-gradient(90deg, rgba(120, 70, 20, 0.07) 0 2px, transparent 2px 10px), linear-gradient(180deg, #ffe48a, #f2b93b 60%, #d08b1c); }
.p2 .pod-block { height: 66px; }
.p3 .pod-block { height: 48px; }
.pod-col.empty { visibility: hidden; }
@keyframes podRise { from { transform: scaleY(0); } to { transform: none; } }
.rd { display: inline-block; margin-top: 2px; padding: 1px 6px; border-radius: 8px; font-size: 10.5px; font-weight: 700; background: #ece4d3; color: #5a4a35; font-variant-numeric: tabular-nums; }
.rd.up { background: rgba(35, 148, 90, 0.16); color: #1c7444; }
.rd.down { background: rgba(207, 47, 34, 0.13); color: #b3261c; }
.mk-over .standings { margin: 4px 0 6px; text-align: left; }
.standing.me { border-color: #22a9d8; }
.go-final { margin: 6px 0 2px; font-size: 12px; color: rgba(43, 29, 16, 0.62); }
.go-actions { margin-top: 8px; }
.go-actions .btn.big { font-family: Bangers, Impact, sans-serif; font-weight: 400; font-size: 22px; letter-spacing: 2px; min-height: 52px; }
.go-wait { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 0 2px; font-size: 12.5px; color: rgba(43, 29, 16, 0.65); }
/* rematch: avatars fill with ✓ as people accept */
.go-rematch { margin: 10px 0 2px; padding: 10px 8px 8px; border: 2px dashed #d8c19a; border-radius: 12px; background: rgba(255, 253, 246, 0.6); }
.rmx-seats { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.rmx-seat { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 56px; transition: opacity 0.2s, filter 0.2s; }
.rmx-seat .avatar { box-shadow: 0 0 0 3px #e3d3b4; transition: box-shadow 0.2s; }
.rmx-seat.in .avatar, .rmx-seat.bot .avatar { box-shadow: 0 0 0 3px #2fb36b; }
.rmx-seat.wait .avatar { animation: rmxWait 1.6s ease-in-out infinite; }
.rmx-seat.off { opacity: 0.4; filter: grayscale(1); }
.rmx-badge {
  position: absolute; top: 22px; right: 4px; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; line-height: 1; color: #fff;
  background: #b3a58c; border: 2px solid #fffdf6;
}
.rmx-seat.in .rmx-badge, .rmx-seat.bot .rmx-badge { background: #23945a; }
.rmx-seat.in .rmx-badge { animation: rmxPop 0.35s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.rmx-seat.off .rmx-badge { background: #8a7a62; }
.rmx-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 600; color: rgba(43, 29, 16, 0.75); }
.rmx-seat.me .rmx-name { color: #0a7fb3; }
.rmx-status { margin: 8px 0 6px; min-height: 18px; font-size: 12.5px; color: rgba(43, 29, 16, 0.75); }
.rmx-status b { font-variant-numeric: tabular-nums; }
.rmx-timer { height: 4px; border-radius: 2px; background: rgba(43, 29, 16, 0.1); overflow: hidden; }
.rmx-timer i { display: block; height: 100%; background: #22a9d8; transform-origin: 0 50%; transition: transform 0.5s linear; }
.go-actions .btn[disabled] { opacity: 1; cursor: default; }
.go-actions .btn.rmx-in { background: linear-gradient(180deg, #c9f0d6, #8fd6a9 60%, #5bb980); border-color: #3f9a64; box-shadow: 0 3px 0 #2f7a4c; }
.go-actions .rmx-start { width: 100%; margin-top: 8px; }
.go-actions .rmx-start[hidden] { display: none; }
.go-actions > .btn.ghost { margin-top: 8px; }
@keyframes rmxPop { from { transform: scale(0.2); } to { transform: none; } }
@keyframes rmxWait { 50% { box-shadow: 0 0 0 3px #f2c56b; } }

/* ------------------------------------------------------------------ scores */
.modal-card.mk-scores { max-width: 420px; }
.sc-wrap { overflow-x: auto; padding: 4px 8px 2px; border-radius: 14px; background: #fcf7ec; border: 2px solid #eadcbf; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.sc-wrap::-webkit-scrollbar { display: none; }
.sc-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.sc-table thead th { padding: 2px 4px 6px; text-align: center; white-space: nowrap; font-size: 9.5px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(43, 29, 16, 0.55); }
.sc-table thead th.c-name { text-align: left; }
.sc-table tbody tr:first-child th, .sc-table tbody tr:first-child td { border-top-color: rgba(120, 90, 50, 0.28); }
.sc-table tbody th, .sc-table tbody td { padding: 8px 4px; border-top: 1px solid rgba(120, 90, 50, 0.16); vertical-align: middle; }
.sc-table tbody th { text-align: left; font-weight: 600; }
.sc-table .c-name { position: sticky; left: 0; z-index: 1; min-width: 118px; background: #fcf7ec; }
.sc-who { display: flex; align-items: center; gap: 6px; }
.sc-n { display: inline-flex; align-items: center; gap: 3px; max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-n .ic-crown { width: 16px; height: 11px; flex: none; }
.sc-meta { margin-top: 2px; padding-left: 30px; font-size: 10px; font-weight: 500; color: rgba(43, 29, 16, 0.55); }
.c-r { min-width: 34px; text-align: center; font-size: 12px; color: rgba(43, 29, 16, 0.75); font-variant-numeric: tabular-nums; }
.c-r.none { color: rgba(43, 29, 16, 0.28); }
.c-r.o { color: #2b1d10; font-weight: 700; }
.c-r.y span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #ffd23f; color: #5d3100; font-size: 11px; font-weight: 700; }
.c-r.a span { display: inline-block; padding: 2px 5px; border-radius: 6px; background: #cf2f22; color: #fff; font-size: 11px; font-weight: 700; }
.c-tot { min-width: 66px; text-align: right; }
.c-tot b { font-family: Fredoka, sans-serif; font-weight: 700; font-size: 20px; letter-spacing: 0; line-height: 1; color: #0a86b4; }
.bar { display: block; height: 5px; margin-top: 4px; border-radius: 3px; overflow: hidden; background: rgba(120, 90, 50, 0.15); }
.bar i { display: block; height: 100%; background: #2fb5e6; transform-origin: left center; }
.bar.warm i { background: #e5a62a; }
.bar.hot i { background: #cf2f22; }
.sc-table tr.me th, .sc-table tr.me td { background: #e9f1ea; }
.sc-table tr.me .sc-n { color: #0a7fb3; }
.sc-table tr.lead .c-tot b { color: #b3700a; }
.sc-table tr.out th > *, .sc-table tr.out td { opacity: 0.55; }
.sc-table tr.out .sc-n { text-decoration: line-through; }
.sc-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin-top: 12px; font-size: 11px; color: rgba(43, 29, 16, 0.6); }
.sc-legend i { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 3px; vertical-align: -3px; border-radius: 50%; font-style: normal; font-size: 9px; font-weight: 700; }
.sc-legend i.y { background: #ffd23f; color: #5d3100; }
.sc-legend i.a { background: #cf2f22; color: #fff; border-radius: 4px; }
.sc-legend .ic-crown { width: 16px; height: 11px; vertical-align: -1px; }
.sc-rule { margin-top: 6px; text-align: center; }

/* -------------------------------------------------------------- how to play */
.modal-card.mk-rules { max-width: 400px; }
.rules-viewport { overflow: hidden; margin: 0 -18px; touch-action: pan-y; }
.rules-track { display: flex; transition: transform 0.4s cubic-bezier(0.2, 0.85, 0.25, 1); will-change: transform; }
.rules-slide { flex: 0 0 100%; padding: 0 18px; box-sizing: border-box; }
.rules-slide .tutorial-visual {
  min-height: 132px; margin-bottom: 12px; padding: 14px;
  border: 2px solid rgba(34, 169, 216, 0.25); border-radius: 14px;
  background: radial-gradient(120% 90% at 50% 20%, rgba(255, 255, 255, 0.85), rgba(207, 238, 248, 0.9) 60%, rgba(160, 222, 242, 0.9));
}
.rules-slide .tutorial-text h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 18px; }
.rules-slide .tutorial-text p { font-size: 14px; line-height: 1.5; color: rgba(43, 29, 16, 0.78); }
.rs-num { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: #0a86b4; color: #fff; font-size: 13px; }
.rs-row { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.rs-col { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.rs-col small { padding: 0 8px; border-radius: 8px; background: #fff; color: #0a86b4; font-size: 12px; font-weight: 700; }
.rs-fan { position: relative; display: inline-flex; }
.rs-fan .mc + .mc { margin-left: -14px; }
.rs-fan .mc:nth-child(1) { transform: rotate(-9deg) translate3d(0, 3px, 0); }
.rs-fan .mc:nth-child(3) { transform: rotate(9deg) translate3d(0, 3px, 0); }
.rs-fan em { position: absolute; top: -9px; right: -9px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-style: normal; font-size: 12px; font-weight: 700; color: #fff; z-index: 2; }
.rs-fan.ok em { background: #23945a; }
.rs-fan.no em { background: #cf2f22; }
.rs-fan.no .mc { opacity: 0.75; }
.rs-arrow { font-size: 26px; font-weight: 700; color: #0a86b4; }
.rs-deck { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rs-deck small { font-size: 11px; color: rgba(43, 29, 16, 0.6); }
.rs-stamp { display: inline-block; font-family: Bangers, Impact, sans-serif; font-size: 36px; letter-spacing: 2px; transform: rotate(-6deg); color: #ffd23f; -webkit-text-stroke: 1.5px #5d3100; text-shadow: 0 3px 0 #e08a00; }
.rs-stamp.bad { color: #ff8766; -webkit-text-stroke-color: #5e1206; text-shadow: 0 3px 0 #c0321f; }
.rs-pen { font-family: Bangers, Impact, sans-serif; font-size: 42px; color: #cf2f22; }
.rs-chips { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rs-chip { padding: 4px 12px; border-radius: 10px; border: 2px solid #d8c19a; background: #fff; color: #0a86b4; font-size: 14px; font-weight: 700; }
.rs-chip.out { color: #cf2f22; border-color: rgba(207, 47, 34, 0.35); }
.mk-rules .steps-dots { gap: 14px; margin: 14px 0 6px; }
.mk-rules .steps-dots button { position: relative; width: 8px; height: 8px; padding: 0; border-radius: 4px; background: rgba(43, 29, 16, 0.2); transition: transform 0.25s; }
.mk-rules .steps-dots button::after { content: ""; position: absolute; inset: -12px -6px; }
.mk-rules .steps-dots button.on { background: #d99a00; transform: scaleX(2.3); }
.rules-nav { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; margin-top: 4px; }
.modal-card .rules-nav .btn { margin-top: 0; }

/* ------------------------------------------------------------- leaderboard */
.modal-card.mk-lb { max-width: 400px; }
.mk-lb .lb-list { gap: 5px; min-height: 300px; }
.mk-lb .lb-row {
  gap: 10px; padding: 8px 10px; border: 2px solid transparent; border-radius: 12px;
  background: rgba(255, 255, 255, 0.6); border-top: 2px solid transparent;
  animation: rowIn 0.3s ease both; animation-delay: calc(var(--i, 0) * 28ms);
}
.mk-lb .lb-row .r { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; font-size: 12px; font-weight: 700; color: rgba(43, 29, 16, 0.6); background: rgba(120, 90, 50, 0.1); }
.mk-lb .lb-row.m1 .r { background: linear-gradient(180deg, #ffe680, #e5a62a); color: #5d3100; }
.mk-lb .lb-row.m2 .r { background: linear-gradient(180deg, #f4f4f4, #b9bec4); color: #3e444a; }
.mk-lb .lb-row.m3 .r { background: linear-gradient(180deg, #f6c79a, #c47c3c); color: #4e2507; }
.mk-lb .lb-row .n { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-lb .lb-row .n small { display: block; font-size: 10.5px; font-weight: 500; color: rgba(43, 29, 16, 0.5); }
.mk-lb .lb-row .v { font-family: Fredoka, sans-serif; font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; color: #0a86b4; }
.mk-lb .lb-row.me { border-color: #22a9d8; background: rgba(34, 169, 216, 0.13); }
.you-tag { margin-left: 4px; padding: 1px 5px; border-radius: 5px; background: #22a9d8; color: #fff; font-style: normal; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; vertical-align: 1px; }
.mk-lb .lb-row.skel { animation: none; }
.sk { position: relative; display: block; height: 12px; overflow: hidden; border-radius: 6px; background: rgba(120, 90, 50, 0.13); }
.sk-r { width: 28px; height: 28px; flex: none; border-radius: 50%; }
.sk-n { flex: 1; max-width: 55%; }
.sk-v { width: 40px; height: 18px; margin-left: auto; }
.sk::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  transform: translate3d(-100%, 0, 0);
  animation: shimmer 1.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 60ms);
}
@keyframes shimmer { to { transform: translate3d(100%, 0, 0); } }
.lb-you-note, .lb-empty { padding: 12px 6px; text-align: center; font-size: 12.5px; color: rgba(43, 29, 16, 0.6); }
.modal-card .lb-empty .btn { display: flex; width: auto; margin: 10px auto 0; padding: 7px 16px; }
.mk-lb .lb-list.loaded { min-height: 0; }
.lb-empty.big { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 10px 22px; }
.lb-empty.big svg { width: 64px; height: 64px; margin-bottom: 6px; opacity: 0.9; }
.lb-empty.big b { font-size: 16px; color: var(--ink); }

/* ---------------------------------------------------------------- friends */
.modal-card.mk-friends { max-width: 400px; }
.fr-code { display: flex; align-items: center; gap: 8px; margin: 8px 0 10px; padding: 8px 10px; border-radius: 12px; border: 2px dashed rgba(34, 169, 216, 0.45); background: rgba(34, 169, 216, 0.07); }
.fr-code-l { font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(43, 29, 16, 0.55); }
.fr-code b { flex: 1; font-family: "Bree Serif", Georgia, serif; font-size: 20px; letter-spacing: 3px; color: #0a86b4; }
.modal-card .fr-code .btn, .modal-card .friend-add .btn, .modal-card .friend-row .btn { width: auto; margin: 0; }
.friend-add { margin: 0 0 4px; }
.friend-add input { min-height: 42px; font-size: 16px; }
.friend-add input:focus { border-color: #22a9d8; }
.fr-label { display: flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(43, 29, 16, 0.55); }
.fr-label .badge { padding: 0 6px; border-radius: 8px; background: #cf2f22; color: #fff; font-size: 10px; letter-spacing: 0; }
.fr-count { color: #0a86b4; }
.friend-row { min-height: 50px; }
.friend-row.req { background: rgba(255, 210, 63, 0.14); border-radius: 10px; padding: 7px 8px; border-top: 0; margin-top: 4px; }
.friend-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.friend-name small { display: block; font-size: 10.5px; font-weight: 500; color: rgba(43, 29, 16, 0.5); }
.friend-avatar { width: 30px; height: 30px; flex: none; font-size: 12px; background: linear-gradient(160deg, #3cc0ee, #0a86b4); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }
.friend-x { width: 32px; height: 32px; flex: none; }
.fr-pending { font-size: 11px; font-style: italic; color: rgba(43, 29, 16, 0.5); }
.fr-empty { padding: 10px 0; font-size: 12.5px; color: rgba(43, 29, 16, 0.55); }
.fr-hint { margin-top: 12px; text-align: center; }

/* ----------------------------------------------------------------- toasts */
#toast.toast {
  position: absolute; left: 50%; bottom: calc(136px + var(--safe-bottom)); z-index: 100;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: max-content; max-width: min(92%, 380px); padding: 0;
  background: none; border: 0; box-shadow: none; border-radius: 0;
  opacity: 1; transform: translateX(-50%); transition: none; pointer-events: none;
}
.toast-item {
  display: flex; align-items: center; gap: 8px; pointer-events: auto; cursor: pointer;
  padding: 9px 14px; border-radius: 12px; text-align: left;
  font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--ink);
  background: #fffdf6; border: 2px solid #d8c19a;
  box-shadow: 0 8px 18px rgba(60, 40, 15, 0.32);
  animation: tIn 0.28s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
.toast-item::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: #22a9d8; }
.toast-item.warn { background: #fff4ef; border-color: #e7a693; }
.toast-item.warn::before { background: #cf2f22; }
.toast-item.ok::before { background: #23945a; }
.toast-item.bump { animation: tBump 0.3s ease; }
.toast-item.out { animation: tOut 0.2s ease-in forwards; pointer-events: none; }
@keyframes tIn { from { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.94); } }
@keyframes tOut { to { opacity: 0; transform: translate3d(0, 8px, 0) scale(0.96); } }
@keyframes tBump { 50% { transform: scale(1.06); } }

/* --------------------------------------------------------- connection pill */
.conn {
  top: calc(10px + var(--safe-top)); z-index: 95;
  display: flex; align-items: center; gap: 7px;
  padding: 6px 13px 6px 10px; border-radius: 20px;
  background: #fffdf6; color: #8a4b0a; border: 2px solid #e0b46a;
  font-size: 12px; font-weight: 600;
  box-shadow: 0 6px 14px rgba(60, 40, 15, 0.3);
  animation: connIn 0.3s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
.conn::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #e08a00; animation: connPulse 1s ease-in-out infinite; }
@keyframes connIn { from { opacity: 0; transform: translate3d(-50%, -14px, 0); } to { opacity: 1; transform: translate3d(-50%, 0, 0); } }
@keyframes connPulse { 50% { opacity: 0.45; transform: scale(0.55); } }

/* ------------------------------------------------------------- invite bar */
.invite-bar {
  top: calc(10px + var(--safe-top)); left: 12px; right: 12px;
  padding: 9px 9px 9px 14px; gap: 8px;
  border: 3px solid #6b3a14; border-radius: 12px; color: #4a240a;
  font-family: "Bree Serif", Georgia, serif; font-size: 14px; font-weight: 400;
  background:
    repeating-linear-gradient(90deg, rgba(120, 70, 20, 0.06) 0 2px, transparent 2px 11px),
    linear-gradient(180deg, #f6d39b, #e4b06a 60%, #cd914b);
  box-shadow: inset 0 2px 0 rgba(255, 240, 205, 0.7), 0 12px 24px rgba(40, 22, 6, 0.4);
  text-shadow: 0 1px 0 rgba(255, 240, 205, 0.7);
  animation: inviteIn 0.42s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
.invite-bar #inviteJoin { font-family: Bangers, Impact, sans-serif; font-size: 18px; letter-spacing: 1.5px; color: #fff; background: linear-gradient(180deg, #8fe0ff, #2bb7e8 58%, #0a8cc0); text-shadow: 0 1px 0 rgba(0, 60, 90, 0.5); }
.invite-x { width: 32px; height: 32px; flex: none; background: rgba(90, 45, 10, 0.14); color: #4a240a; }
@keyframes inviteIn { from { opacity: 0; transform: translate3d(0, -130%, 0); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ sheet chrome */
.sheet-grip { position: relative; width: 48px; height: 5px; margin: 0 auto 10px; background: rgba(120, 90, 50, 0.3); }
.sheet-grip::before { content: ""; position: absolute; inset: -14px -60px; }
.sheet-grip, .sheet-head { touch-action: none; cursor: grab; }
.sheet .icon-btn { width: 38px; height: 38px; }
.sheet.sheet-leaving { transform: translate3d(0, 105%, 0) !important; transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1) !important; }

/* -------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .modal-card, .modal-backdrop, .modal-root.closing .modal-card, .modal-root.closing .modal-backdrop,
  .rv-row, .rm-stamp, .pod-who, .pod-block, .go-trophy svg, .ic-crown, .mk-lb .lb-row, .sk::after,
  .toast-item, .conn, .conn::before, .invite-bar, .leave-confirm, .rmx-badge, .rmx-seat .avatar, .rmx-timer i {
    animation: none !important;
  }
  .rules-track, .switch i, .plank, .mk-rules .steps-dots button, .sheet.sheet-leaving { transition: none !important; }
}