:root {
  color-scheme: dark;
  font-family: Inter, Segoe UI, Arial, sans-serif;
  --page: #101418;
  --surface: #151b22;
  --surface-strong: #121820;
  --border: #303944;
  --border-soft: #252e38;
  --text: #eef3f7;
  --muted: #94a3b8;
  --accent: #f4c542;
  --accent-text: #161300;
  --felt: #17231f;
  --effect-duration: 650ms;
  --shake-distance: 8px;
  background: var(--page);
  color: var(--text);
}

/* Zuefa social activity */
.zuefa-invite-card,
.zuefa-arena,
.zuefa-history {
  border: 1px solid rgb(221 180 73 / 22%);
  border-radius: 22px;
  background:
    radial-gradient(circle at 92% 2%, rgb(213 166 57 / 12%), transparent 34%),
    linear-gradient(145deg, rgb(19 48 37 / 94%), rgb(7 24 18 / 96%));
  box-shadow: 0 20px 48px rgb(0 0 0 / 22%);
}
.zuefa-invite-card { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 20px; align-items: start; padding: 24px; margin-bottom: 16px; }
.zuefa-invite-card > span { display: grid; place-items: center; width: 86px; aspect-ratio: 1; border: 1px solid rgb(240 200 96 / 35%); border-radius: 26px; color: #f5d778; background: linear-gradient(145deg, #264f3c, #112c21); font-size: 42px; box-shadow: inset 0 1px rgb(255 255 255 / 12%), 0 14px 30px rgb(0 0 0 / 22%); }
.zuefa-invite-card small, .zuefa-arena .eyebrow { color: #dcbf70; letter-spacing: .12em; text-transform: uppercase; }
.zuefa-invite-card h3 { margin: 4px 0 7px; font-size: clamp(22px, 3vw, 32px); }
.zuefa-invite-card p { margin: 0; color: #a9bbb1; }
.zuefa-invite-card ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; padding: 0; list-style: none; }
.zuefa-invite-card li { padding: 7px 10px; border: 1px solid rgb(255 255 255 / 8%); border-radius: 999px; color: #c8d4cd; background: rgb(255 255 255 / 4%); font-size: 12px; }
.zuefa-invite-card > div > div { display: flex; flex-wrap: wrap; gap: 9px; }
.zuefa-arena { position: relative; overflow: hidden; padding: 20px; margin-bottom: 16px; }
.zuefa-arena::before { content: ""; position: absolute; inset: -50% 42% 44% -8%; border-radius: 50%; background: rgb(216 171 62 / 7%); filter: blur(18px); pointer-events: none; }
.zuefa-arena > * { position: relative; }
.zuefa-reveal-overlay { position: absolute; z-index: 20; inset: 0; display: grid; place-items: center; align-content: center; gap: 13px; overflow: hidden; border-radius: inherit; padding: 22px; background: radial-gradient(circle at 50% 48%, rgb(225 184 78 / 22%), transparent 31%), rgb(3 17 12 / 94%); backdrop-filter: blur(8px); isolation: isolate; animation: zuefaOverlayIn .2s ease both; }
.zuefa-reveal-overlay.result-loss { background: radial-gradient(circle at 50% 48%, rgb(184 88 69 / 18%), transparent 31%), rgb(6 16 13 / 95%); }
.zuefa-reveal-overlay.result-draw { background: radial-gradient(circle at 50% 48%, rgb(90 158 174 / 17%), transparent 31%), rgb(3 17 16 / 95%); }
.zuefa-chant { display: flex; justify-content: center; gap: 12px; min-height: 37px; color: #f2d377; font: 900 clamp(22px, 4vw, 37px)/1 Georgia, serif; letter-spacing: .08em; text-transform: uppercase; }
.zuefa-chant span { opacity: 0; transform: translateY(12px) scale(.82); animation: zuefaChantWord .3s cubic-bezier(.2,.8,.2,1) forwards; }
.zuefa-chant span:nth-child(2) { animation-delay: .34s; }
.zuefa-chant span:nth-child(3) { animation-delay: .68s; }
.zuefa-reveal-hands { display: grid; grid-template-columns: minmax(120px, 1fr) 62px minmax(120px, 1fr); gap: 18px; align-items: center; width: min(590px, 92%); }
.zuefa-reveal-hands article { display: grid; justify-items: center; gap: 3px; min-width: 0; }
.zuefa-reveal-hands article small { color: #95aa9f; letter-spacing: .12em; text-transform: uppercase; }
.zuefa-reveal-hands article strong { opacity: 0; color: #f0d57d; font-size: 17px; animation: zuefaResultIn .28s 1.27s ease forwards; }
.zuefa-animated-hand { position: relative; width: 112px; height: 112px; display: grid; place-items: center; border: 1px solid rgb(231 193 91 / 30%); border-radius: 34px; background: linear-gradient(145deg, rgb(48 91 70 / 95%), rgb(14 43 31 / 98%)); box-shadow: inset 0 1px rgb(255 255 255 / 11%), 0 18px 35px rgb(0 0 0 / 28%); }
.zuefa-reveal-hands article:not(.mine) .zuefa-animated-hand { transform: scaleX(-1); }
.zuefa-animated-hand span { position: absolute; display: block; font-size: 64px; line-height: 1; filter: drop-shadow(0 8px 10px rgb(0 0 0 / 28%)); }
.zuefa-animated-hand .fist { transform-origin: 50% 90%; animation: zuefaChantHand 1.18s cubic-bezier(.4,0,.2,1) forwards; }
.zuefa-animated-hand .final { opacity: 0; transform: scale(.45) rotate(-18deg); animation: zuefaHandReveal .42s 1.12s cubic-bezier(.18,.89,.32,1.35) forwards; }
.zuefa-reveal-flash { position: relative; display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid rgb(238 199 96 / 34%); border-radius: 50%; color: #f3d374; background: #153829; box-shadow: 0 0 0 0 rgb(236 194 84 / 0%); animation: zuefaVsFlash .48s 1.12s ease-out both; }
.zuefa-reveal-flash span { font: 900 18px/1 Georgia, serif; }
.zuefa-reveal-result { display: grid; justify-items: center; min-height: 50px; opacity: 0; transform: translateY(10px); animation: zuefaResultIn .38s 1.35s ease forwards; }
.zuefa-reveal-result small { color: #8da298; letter-spacing: .11em; text-transform: uppercase; }
.zuefa-reveal-result strong { color: #f4d77e; font: 900 clamp(23px, 3.4vw, 36px)/1.15 Georgia, serif; text-shadow: 0 4px 18px rgb(220 176 65 / 24%); }
.result-loss .zuefa-reveal-result strong { color: #d5a48f; text-shadow: none; }
.result-draw .zuefa-reveal-result strong { color: #a9d5d4; text-shadow: none; }
.zuefa-sparkles { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.zuefa-sparkles i { --angle: calc(var(--i) * 30deg); position: absolute; left: 50%; top: 53%; opacity: 0; color: #f0ce68; font-style: normal; transform: rotate(var(--angle)) translateX(35px) scale(.3); animation: zuefaSparkle .8s calc(1.25s + var(--i) * 18ms) ease-out forwards; }
@keyframes zuefaOverlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes zuefaChantWord { 0% { opacity: 0; transform: translateY(12px) scale(.82); } 65% { opacity: 1; transform: translateY(-3px) scale(1.08); } 100% { opacity: 1; transform: none; } }
@keyframes zuefaChantHand { 0%, 28%, 58% { opacity: 1; transform: translateY(-7px) rotate(-8deg); } 15%, 44%, 74% { opacity: 1; transform: translateY(9px) rotate(7deg); } 94% { opacity: 1; transform: translateY(-2px) scale(.96); } 100% { opacity: 0; transform: scale(.6); } }
@keyframes zuefaHandReveal { 0% { opacity: 0; transform: scale(.45) rotate(-18deg); } 65% { opacity: 1; transform: scale(1.14) rotate(3deg); } 100% { opacity: 1; transform: none; } }
@keyframes zuefaVsFlash { 0% { opacity: .4; transform: scale(.65); box-shadow: 0 0 0 0 rgb(236 194 84 / 45%); } 60% { opacity: 1; transform: scale(1.18); box-shadow: 0 0 0 28px rgb(236 194 84 / 0%); } 100% { opacity: 1; transform: none; } }
@keyframes zuefaResultIn { to { opacity: 1; transform: none; } }
@keyframes zuefaSparkle { 0% { opacity: 0; transform: rotate(var(--angle)) translateX(35px) scale(.3); } 35% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--angle)) translateX(clamp(150px, 24vw, 250px)) scale(1); } }
.zuefa-arena-header { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.zuefa-arena-header h3 { margin: 3px 0 4px; font-size: clamp(24px, 3vw, 34px); }
.zuefa-arena-header p { max-width: 720px; margin: 0; color: #9eb1a6; }
.zuefa-scoreboard { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: center; margin: 18px 0; padding: 13px; border: 1px solid rgb(255 255 255 / 7%); border-radius: 19px; background: rgb(2 16 11 / 46%); }
.zuefa-scoreboard article { display: flex; align-items: center; gap: 11px; min-width: 0; }
.zuefa-scoreboard article:not(.mine) { justify-content: flex-end; text-align: right; }
.zuefa-scoreboard article > span { display: grid; place-items: center; width: 44px; min-width: 44px; height: 44px; border: 1px solid rgb(230 190 85 / 28%); border-radius: 50%; color: #eed47e; background: #183b2c; font-weight: 900; }
.zuefa-scoreboard article div { min-width: 0; }
.zuefa-scoreboard article small, .zuefa-scoreboard article strong { display: block; }
.zuefa-scoreboard article small { color: #8fa69a; }
.zuefa-scoreboard article strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zuefa-scoreboard article > b { margin-left: auto; color: #f4d77e; font-size: 30px; font-family: Georgia, serif; }
.zuefa-scoreboard article:not(.mine) > b { margin: 0 auto 0 0; }
.zuefa-versus { display: grid; place-items: center; min-width: 58px; }
.zuefa-versus strong { color: #e5bd58; font: 900 19px/1 Georgia, serif; }
.zuefa-versus small { margin-top: 4px; color: #778e82; }
.zuefa-live-state { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; align-items: center; margin: 15px 0; }
.zuefa-live-state h3 { margin: 2px 0 4px; }
.zuefa-live-state p { margin: 0; color: #9db0a5; }
.zuefa-countdown { --remaining: 1; position: relative; display: grid; place-items: center; align-content: center; width: 82px; height: 82px; border-radius: 50%; color: #f4d77e; background: conic-gradient(#ddb64e calc(var(--remaining) * 1turn), rgb(255 255 255 / 8%) 0); }
.zuefa-countdown::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #102d21; box-shadow: inset 0 0 22px rgb(0 0 0 / 35%); }
.zuefa-countdown strong, .zuefa-countdown small { position: relative; display: block; }
.zuefa-countdown strong { font: 900 29px/1 Georgia, serif; }
.zuefa-countdown small { color: #94a99e; font-size: 10px; }
.zuefa-countdown.urgent { color: #ffb39e; background: conic-gradient(#db765a calc(var(--remaining) * 1turn), rgb(255 255 255 / 8%) 0); }
.zuefa-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.zuefa-choice { display: grid !important; place-items: center; min-width: 0; min-height: 138px; padding: 14px 10px !important; border: 1px solid rgb(225 184 78 / 18%) !important; border-radius: 19px !important; color: #dce8e0 !important; background: linear-gradient(145deg, rgb(38 76 58 / 90%), rgb(14 40 29 / 96%)) !important; box-shadow: inset 0 1px rgb(255 255 255 / 7%), 0 10px 24px rgb(0 0 0 / 15%) !important; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.zuefa-choice:hover:not(:disabled) { transform: translateY(-3px); border-color: rgb(240 202 103 / 55%) !important; box-shadow: inset 0 1px rgb(255 255 255 / 10%), 0 15px 28px rgb(0 0 0 / 26%) !important; }
.zuefa-choice > span { font-size: 42px; filter: drop-shadow(0 5px 8px rgb(0 0 0 / 25%)); }
.zuefa-choice > strong { margin-top: 6px; color: #f2d67d; font-size: 16px; }
.zuefa-choice > small { margin-top: 2px; color: #8fa69a; font-size: 11px; }
.zuefa-choice.selected { border-color: #e3bc59 !important; background: linear-gradient(145deg, #356a50, #183f2d) !important; box-shadow: inset 0 0 0 1px rgb(250 218 129 / 18%), 0 0 30px rgb(221 181 74 / 14%) !important; opacity: 1 !important; }
.zuefa-choice:disabled:not(.selected) { opacity: .42; }
.zuefa-round-history { display: grid; grid-template-columns: minmax(180px, .45fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgb(255 255 255 / 7%); }
.zuefa-round-history h3 { margin: 3px 0; }
.zuefa-round-history > div:last-child { display: grid; gap: 7px; }
.zuefa-round-history article { display: grid; grid-template-columns: 31px minmax(0, 1fr); gap: 10px; align-items: center; padding: 9px 11px; border: 1px solid rgb(255 255 255 / 6%); border-radius: 13px; background: rgb(255 255 255 / 3%); }
.zuefa-round-history article > span { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9px; color: #e7c769; background: rgb(218 179 74 / 10%); font-weight: 900; }
.zuefa-round-history article strong, .zuefa-round-history article small { display: block; }
.zuefa-round-history article small { color: #91a69b; }
.zuefa-round-history p { margin: 0; color: #8fa69a; }
.zuefa-forfeit { margin-top: 14px; color: #bba9a2 !important; }
.zuefa-finish-banner { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px; align-items: center; padding: 18px; border: 1px solid rgb(231 195 94 / 22%); border-radius: 19px; background: linear-gradient(135deg, rgb(216 174 65 / 10%), rgb(255 255 255 / 2%)); }
.zuefa-finish-banner > span { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 21px; color: #f0d374; background: #1e4735; font-size: 34px; }
.zuefa-finish-banner small, .zuefa-finish-banner h3, .zuefa-finish-banner p { margin: 0; }
.zuefa-finish-banner small { color: #c9ad60; text-transform: uppercase; letter-spacing: .1em; }
.zuefa-finish-banner p { color: #9bb0a5; }
.zuefa-history { padding: 18px; }
.zuefa-history > div:last-child { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.zuefa-match-card { display: grid !important; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-width: 0; padding: 13px !important; border: 1px solid rgb(255 255 255 / 7%) !important; border-radius: 16px !important; text-align: left; background: rgb(255 255 255 / 3%) !important; }
.zuefa-match-card:hover, .zuefa-match-card.selected { border-color: rgb(226 187 84 / 35%) !important; background: rgb(46 83 65 / 44%) !important; }
.zuefa-card-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: #f1d374; background: #183d2d; font-size: 22px; }
.zuefa-match-card div { min-width: 0; }
.zuefa-match-card small, .zuefa-match-card strong, .zuefa-match-card p { display: block; overflow: hidden; margin: 0; text-overflow: ellipsis; white-space: nowrap; }
.zuefa-match-card small { color: #899f94; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.zuefa-match-card strong { margin: 2px 0; color: #e9f1ec; }
.zuefa-match-card p { color: #9eb1a7; font-size: 12px; }
.zuefa-match-card i { color: #d6b85f; font-style: normal; font-size: 22px; }
.admin-zuefa-section { min-width: 0; }
.admin-zuefa-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; margin-bottom: 14px; }
.admin-zuefa-rules article { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px; border: 1px solid rgb(214 175 75 / 18%); border-radius: 16px; background: linear-gradient(145deg, rgb(31 62 48 / 70%), rgb(9 28 20 / 76%)); }
.admin-zuefa-rules article > span { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; color: #f1d276; background: rgb(222 180 70 / 10%); font: 900 25px/1 Georgia, serif; }
.admin-zuefa-rules strong, .admin-zuefa-rules p { display: block; margin: 0; }
.admin-zuefa-rules p { margin-top: 3px; color: #93a99d; font-size: 12px; }
.admin-zuefa-launch { margin-top: 0; }

@media (max-width: 1020px) {
  .zuefa-history > div:last-child { grid-template-columns: 1fr; }
  .admin-zuefa-rules { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .zuefa-invite-card { grid-template-columns: 60px minmax(0, 1fr); gap: 12px; padding: 15px; }
  .zuefa-invite-card > span { width: 58px; border-radius: 18px; font-size: 29px; }
  .zuefa-arena { padding: 14px; }
  .zuefa-arena-header { align-items: center; }
  .zuefa-scoreboard { gap: 7px; padding: 9px; }
  .zuefa-scoreboard article > span { width: 34px; min-width: 34px; height: 34px; }
  .zuefa-scoreboard article > b { font-size: 24px; }
  .zuefa-scoreboard article strong { max-width: 80px; }
  .zuefa-live-state { grid-template-columns: 68px minmax(0, 1fr); gap: 10px; }
  .zuefa-countdown { width: 64px; height: 64px; }
  .zuefa-countdown strong { font-size: 23px; }
  .zuefa-choice { min-height: 108px; padding: 10px 5px !important; }
  .zuefa-choice > span { font-size: 31px; }
  .zuefa-choice > small { display: none; }
  .zuefa-round-history { grid-template-columns: 1fr; }
}

@media (orientation: landscape) and (max-height: 460px) {
  .zuefa-reveal-overlay { gap: 5px; padding: 8px; }
  .zuefa-chant { min-height: 24px; font-size: 21px; }
  .zuefa-reveal-hands { grid-template-columns: minmax(80px, 1fr) 44px minmax(80px, 1fr); gap: 9px; width: min(440px, 88%); }
  .zuefa-animated-hand { width: 70px; height: 70px; border-radius: 22px; }
  .zuefa-animated-hand span { font-size: 42px; }
  .zuefa-reveal-flash { width: 42px; height: 42px; }
  .zuefa-reveal-result { min-height: 32px; }
  .zuefa-reveal-result strong { font-size: 22px; }
  .zuefa-arena { padding: 11px 13px; }
  .zuefa-arena-header h3 { font-size: 21px; }
  .zuefa-arena-header p { display: none; }
  .zuefa-scoreboard { margin: 8px 0; padding: 6px 9px; }
  .zuefa-scoreboard article > span { width: 30px; min-width: 30px; height: 30px; }
  .zuefa-scoreboard article > b { font-size: 21px; }
  .zuefa-live-state { grid-template-columns: 55px minmax(0, 1fr); margin: 7px 0; }
  .zuefa-live-state p { display: none; }
  .zuefa-countdown { width: 50px; height: 50px; }
  .zuefa-countdown::before { inset: 4px; }
  .zuefa-countdown strong { font-size: 19px; }
  .zuefa-countdown small { display: none; }
  .zuefa-choices { gap: 7px; }
  .zuefa-choice { min-height: 73px; padding: 5px !important; }
  .zuefa-choice > span { font-size: 25px; }
  .zuefa-choice > strong { margin-top: 1px; font-size: 13px; }
  .zuefa-choice > small { display: none; }
  .zuefa-round-history { margin-top: 8px; padding-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .zuefa-reveal-overlay, .zuefa-chant span, .zuefa-animated-hand .fist, .zuefa-animated-hand .final,
  .zuefa-reveal-flash, .zuefa-reveal-result, .zuefa-reveal-hands article strong, .zuefa-sparkles i { animation-duration: .001ms !important; animation-delay: 0ms !important; }
  .zuefa-animated-hand .fist { display: none; }
  .zuefa-animated-hand .final, .zuefa-reveal-result, .zuefa-reveal-hands article strong { opacity: 1; transform: none; }
}
.zuefa-reveal-overlay.motion-reduced, .zuefa-reveal-overlay.motion-reduced .zuefa-chant span,
.zuefa-reveal-overlay.motion-reduced .zuefa-animated-hand .final, .zuefa-reveal-overlay.motion-reduced .zuefa-reveal-flash,
.zuefa-reveal-overlay.motion-reduced .zuefa-reveal-result, .zuefa-reveal-overlay.motion-reduced .zuefa-reveal-hands article strong { animation-duration: .001ms !important; animation-delay: 0ms !important; opacity: 1; transform: none; }
.zuefa-reveal-overlay.motion-reduced .zuefa-animated-hand .fist, .zuefa-reveal-overlay.motion-reduced .zuefa-sparkles { display: none; }

/* Social hub: premium discovery, matches and direct conversations. */
.social-hub-workspace:not(.hidden) {
  --social-gold: #e6b84f;
  --social-green: #5ed47f;
  --social-wine: #7a183a;
  min-height: calc(100dvh - 92px);
  display: grid;
  grid-template-columns: 225px minmax(0, 1fr) 265px;
  gap: 9px;
  overflow: hidden;
  color: #eee8d8;
}
.social-hub-rail, .social-hub-main, .social-hub-aside {
  min-width: 0;
  border: 1px solid rgb(223 176 68 / 27%);
  border-radius: 15px;
  background:
    radial-gradient(circle at 20% 0%, rgb(36 102 65 / 18%), transparent 34%),
    linear-gradient(155deg, rgb(5 20 16 / 98%), rgb(2 10 10 / 98%));
  box-shadow: 0 16px 42px rgb(0 0 0 / 32%), inset 0 1px rgb(255 233 166 / 4%);
}
.social-hub-rail { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: 11px; }
.social-hub-rail-title { min-height: 65px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgb(226 182 79 / 17%); padding: 5px 7px 12px; }
.social-hub-rail-title > span { width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid #c48b32; border-radius: 50%; background: linear-gradient(145deg, #6d1737, #1b402d); color: #ffd76d; font-size: 23px; box-shadow: 0 0 18px rgb(198 40 85 / 18%); }
.social-hub-rail-title > div { display: grid; gap: 3px; }
.social-hub-rail-title strong { color: #f4d47b; font: 800 17px/1 Georgia, serif; }
.social-hub-rail-title small { color: #789285; font-size: 8px; }
.social-hub-rail nav { display: grid; align-content: start; gap: 6px; padding: 12px 0; }
.social-hub-rail nav button { min-width: 0; min-height: 58px; display: grid; grid-template-columns: 35px minmax(0, 1fr); align-items: center; gap: 7px; border-color: transparent; padding: 8px; background: transparent; box-shadow: none; color: #d8ded8; text-align: left; }
.social-hub-rail nav button > span { grid-row: 1; color: #b58b3e; font-size: 20px; text-align: center; }
.social-hub-rail nav button > div { min-width: 0; display: grid; gap: 3px; }
.social-hub-rail nav button strong { font-size: 10px; }
.social-hub-rail nav button small { overflow: hidden; color: #71877c; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.social-hub-rail nav button.selected { border-color: rgb(223 179 75 / 34%); background: linear-gradient(115deg, rgb(93 19 45 / 76%), rgb(17 54 38 / 62%)); box-shadow: inset 3px 0 #e4b34d, 0 0 20px rgb(111 26 50 / 16%); color: #fff0bf; }
.social-safety-note { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 7px; border: 1px solid rgb(87 160 109 / 18%); border-radius: 10px; padding: 9px; background: rgb(8 35 24 / 42%); }
.social-safety-note > span { color: #63d785; font-size: 20px; }
.social-safety-note strong { color: #b9dfc2; font-size: 8px; }
.social-safety-note p { margin: 4px 0 0; color: #698177; font-size: 7px; line-height: 1.45; }
.social-hub-main { min-height: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr); overflow: hidden; }
.social-hub-header { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid rgb(225 180 75 / 17%); padding: 13px 18px; }
.social-hub-header h2 { margin: 2px 0; color: #f1d47f; font: 800 25px/1 Georgia, serif; letter-spacing: .02em; }
.social-hub-header p { margin: 0; color: #789084; font-size: 9px; }
.social-hub-header button { min-height: 34px; font-size: 8px; }
.social-hub-gate { min-height: 0; overflow-y: auto; padding: 18px; }
.social-gate-card { min-height: 260px; display: grid; grid-template-columns: 76px minmax(0, 560px); align-content: center; justify-content: center; gap: 20px; border: 1px solid rgb(225 180 75 / 26%); border-radius: 16px; padding: 24px; background: radial-gradient(circle at 15% 30%, rgb(110 26 52 / 30%), transparent 31%), rgb(0 0 0 / 18%); }
.social-gate-icon, .social-gate-step { width: 70px; height: 70px; display: grid; place-items: center; border: 2px solid #c99a3b; border-radius: 50%; background: linear-gradient(145deg, #6d1938, #173f2c); color: #ffdb73; font: 800 35px/1 Georgia, serif; box-shadow: 0 0 28px rgb(217 163 54 / 15%); }
.social-gate-card h3 { margin: 5px 0; color: #f2e2b5; font: 800 23px/1.1 Georgia, serif; }
.social-gate-card p { color: #8ba095; font-size: 10px; line-height: 1.55; }
.social-age-form > div { display: grid; gap: 9px; }
.social-age-form label { gap: 5px; font-size: 9px; }
.social-age-form input[type="date"] { max-width: 260px; }
.social-gate-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.social-hub-content { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
.social-discovery-search { display: grid; grid-template-columns: 27px minmax(0, 1fr) auto; align-items: center; gap: 7px; border-bottom: 1px solid rgb(225 180 75 / 14%); padding: 10px 15px; background: rgb(0 0 0 / 12%); }
.social-discovery-search > span { color: var(--social-gold); font-size: 24px; text-align: center; }
.social-discovery-search input { min-width: 0; }
.social-discovery-search button { min-height: 39px; }
.social-hub-primary { min-height: 0; overflow-y: auto; padding: 14px 16px 22px; scrollbar-width: thin; }
.social-content-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.social-content-heading h3 { margin: 2px 0 0; color: #e9dfc6; font: 700 17px/1.1 Georgia, serif; }
.social-content-heading button { min-height: 30px; font-size: 7px; }
.social-recent-heading { border-top: 1px solid rgb(225 180 75 / 14%); margin-top: 18px; padding-top: 15px; }
.social-profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.social-profile-card { min-width: 0; min-height: 220px; display: grid; grid-template-columns: 118px minmax(0, 1fr); overflow: hidden; border: 1px solid rgb(220 176 73 / 22%); border-radius: 14px; background: linear-gradient(145deg, rgb(15 45 32 / 72%), rgb(17 12 18 / 90%)); box-shadow: inset 0 1px rgb(255 255 255 / 3%); }
.social-profile-card:hover { border-color: rgb(232 188 83 / 48%); transform: translateY(-1px); }
.social-profile-portrait { position: relative; min-width: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; border-right: 1px solid rgb(220 176 73 / 16%); background: radial-gradient(circle at 50% 35%, #1d6543, #071812 70%); }
.social-profile-avatar { width: 88px; height: 88px; align-self: center; justify-self: center; overflow: hidden; display: grid; place-items: center; border: 3px solid #d6a63f; border-radius: 50%; background: linear-gradient(145deg, #792442, #143c2b); color: #ffe8a0; font: 800 33px/1 Georgia, serif; box-shadow: 0 8px 24px rgb(0 0 0 / 38%), 0 0 0 4px rgb(220 174 67 / 8%); }
.social-profile-avatar img, .social-aside-avatar img, .social-conversation-avatar img { width: 100%; height: 100%; object-fit: cover; }
.social-profile-portrait > span:last-child { overflow: hidden; border-top: 1px solid rgb(218 176 75 / 15%); padding: 7px 4px; color: #e6c56d; font-size: 7px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.social-profile-copy { min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.social-profile-copy header { display: flex; justify-content: space-between; gap: 7px; }
.social-profile-copy h3 { margin: 0; color: #f3e7c9; font: 800 17px/1 Georgia, serif; }
.social-profile-copy header p, .social-profile-copy > p { margin: 3px 0 0; color: #8ba095; font-size: 8px; line-height: 1.45; }
.social-profile-copy header em { align-self: start; border: 1px solid rgb(75 177 105 / 28%); border-radius: 999px; padding: 3px 6px; color: #65d586; font-size: 6px; font-style: normal; white-space: nowrap; }
.social-interest-list { display: flex; flex-wrap: wrap; gap: 4px; }
.social-interest-list span { border: 1px solid rgb(209 165 64 / 22%); border-radius: 999px; padding: 3px 6px; background: rgb(86 54 15 / 18%); color: #cbb477; font-size: 6px; }
.social-profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.social-profile-stats span { display: grid; gap: 1px; border-radius: 6px; padding: 5px 2px; background: rgb(0 0 0 / 23%); text-align: center; }
.social-profile-stats b { color: #e5c665; font-size: 9px; }
.social-profile-stats small { color: #6f8479; font-size: 5px; }
.social-profile-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; }
.social-profile-actions button { min-height: 29px; padding: 5px 8px; font-size: 7px; }
.social-profile-actions .social-profile-hide { min-width: 29px; margin-left: auto; padding: 3px; }
.social-profile-grid.compact .social-profile-card { min-height: 195px; }
.social-profile-form { max-width: 820px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; border: 1px solid rgb(223 179 74 / 24%); border-radius: 15px; padding: 18px; background: rgb(0 0 0 / 17%); }
.social-profile-form-heading, .social-form-wide, .social-profile-form > button, .social-profile-form > p { grid-column: 1 / -1; }
.social-profile-form-heading { display: flex; align-items: center; gap: 12px; }
.social-profile-form-heading > span { width: 47px; height: 47px; display: grid; place-items: center; border: 1px solid #c49235; border-radius: 50%; background: #54152d; color: #f4ca61; font: 800 20px Georgia, serif; }
.social-profile-form-heading h3 { margin: 0; color: #eee1bc; font: 800 20px Georgia, serif; }
.social-profile-form-heading p { margin: 3px 0 0; color: #7d9488; font-size: 8px; }
.social-profile-form label { gap: 5px; color: #a2afa7; font-size: 8px; }
.social-profile-form textarea { resize: vertical; }
.social-profile-form > button { justify-self: start; min-width: 220px; }
.social-match-grid, .social-conversation-list { display: grid; gap: 8px; }
.social-match-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.social-match-grid > article { display: grid; grid-template-columns: 90px minmax(0, 1fr); align-items: center; gap: 12px; border: 1px solid rgb(222 177 73 / 23%); border-radius: 13px; padding: 12px; background: linear-gradient(135deg, rgb(83 19 43 / 46%), rgb(9 42 28 / 54%)); }
.social-match-grid h3 { margin: 0; color: #f0dfb4; font: 800 18px Georgia, serif; }
.social-match-grid p { color: #83978d; font-size: 8px; line-height: 1.45; }
.social-match-grid button { min-height: 31px; font-size: 7px; }
.social-conversation-list > button { min-width: 0; min-height: 70px; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto 15px; align-items: center; gap: 10px; border-color: rgb(220 177 75 / 19%); padding: 10px; background: rgb(4 19 14 / 62%); color: #e9e1ce; text-align: left; }
.social-conversation-avatar, .social-aside-avatar { overflow: hidden; display: grid; place-items: center; border: 2px solid #bf9138; border-radius: 50%; background: #4d1730; color: #ffe196; font-weight: 800; }
.social-conversation-avatar { width: 46px; height: 46px; font-size: 18px; }
.social-conversation-list > button > span:nth-child(2) { min-width: 0; display: grid; gap: 4px; }
.social-conversation-list strong, .social-conversation-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.social-conversation-list small { color: #789084; font-size: 7px; }
.social-conversation-list b { min-width: 22px; border-radius: 999px; padding: 4px; background: #891d47; color: #fff1bc; font-size: 7px; text-align: center; }
.social-conversation-list i { color: #deb751; font-style: normal; font-size: 18px; }
.social-empty-state { grid-column: 1 / -1; min-height: 210px; display: grid; place-items: center; align-content: center; gap: 7px; border: 1px dashed rgb(221 177 73 / 20%); border-radius: 14px; color: #758d81; text-align: center; }
.social-empty-state > span { color: #b68d3d; font-size: 39px; }
.social-empty-state strong { color: #cfccb9; }
.social-empty-state p { max-width: 380px; margin: 0; font-size: 8px; }
.social-hub-aside { min-height: 0; display: grid; align-content: start; gap: 9px; overflow-y: auto; padding: 10px; }
.social-aside-card { border: 1px solid rgb(222 177 73 / 19%); border-radius: 11px; padding: 12px; background: rgb(0 0 0 / 18%); }
.social-like-summary > strong { display: block; margin-top: 7px; color: #f1c75d; font: 900 40px/1 Georgia, serif; }
.social-like-summary p { margin: 2px 0 8px; color: #e2d7b9; font-size: 9px; }
.social-like-summary small { color: #758b80; font-size: 7px; line-height: 1.45; }
.social-aside-list { display: grid; gap: 5px; margin-top: 9px; }
.social-aside-list > p { color: #71867b; font-size: 8px; }
.social-aside-list > button { min-width: 0; min-height: 49px; display: grid; grid-template-columns: 37px minmax(0, 1fr); align-items: center; gap: 7px; border-color: rgb(221 177 73 / 15%); padding: 6px; background: rgb(5 25 17 / 67%); color: #e7e1d1; text-align: left; }
.social-aside-avatar { width: 35px; height: 35px; }
.social-aside-list button > span:last-child { min-width: 0; display: grid; gap: 2px; }
.social-aside-list strong, .social-aside-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.social-aside-list strong { font-size: 8px; }
.social-aside-list small { color: #71887c; font-size: 6px; }
.social-hub-rule { display: grid; grid-template-columns: 47px minmax(0, 1fr); gap: 9px; }
.social-hub-rule > span { width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid #a02547; border-radius: 50%; background: #4d1226; color: #ff8ba8; font-weight: 900; }
.social-hub-rule strong { color: #ddb6bd; font-size: 8px; }
.social-hub-rule p { margin: 4px 0 0; color: #7e7778; font-size: 7px; line-height: 1.45; }

.chat-message-reactions { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 3px; margin-top: 5px; }
.chat-message-reactions > button { min-width: 27px; min-height: 22px; display: inline-flex; align-items: center; gap: 3px; border-color: rgb(92 129 157 / 25%); border-radius: 999px; padding: 2px 6px; background: #091722; box-shadow: none; font-size: 10px; }
.chat-message-reactions > button.mine { border-color: #c431b5; background: rgb(99 18 102 / 40%); }
.chat-message-reactions b { color: #9eafbc; font-size: 7px; }
.chat-reaction-toggle { color: #8b9ba7 !important; }
.chat-reaction-picker { z-index: 3; display: none; gap: 3px; border: 1px solid rgb(191 45 180 / 38%); border-radius: 999px; padding: 3px; background: #07111a; box-shadow: 0 8px 24px rgb(0 0 0 / 45%); }
.community-chat-message.reaction-open .chat-reaction-picker { display: flex; }
.chat-reaction-picker button { min-width: 27px; min-height: 25px; border: 0; border-radius: 50%; padding: 2px; background: transparent; box-shadow: none; }
.chat-structured-invite { display: grid; grid-template-columns: 43px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-top: 6px; border: 1px solid rgb(221 176 69 / 38%); border-radius: 10px; padding: 9px; background: linear-gradient(120deg, rgb(83 19 43 / 48%), rgb(8 45 29 / 52%)); }
.chat-structured-invite > span { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid #c69638; border-radius: 50%; background: #3f1528; color: #f2c75c; font-size: 21px; }
.chat-structured-invite > div:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.chat-structured-invite small { color: #b99c5b; font-size: 7px; text-transform: uppercase; }
.chat-structured-invite strong { color: #eee0b9; font-size: 10px; }
.chat-structured-invite em { color: #d5b45f; font-size: 7px; font-style: normal; }
.chat-structured-invite em.status-accepted { color: #5ed27d; }
.chat-structured-invite em.status-declined, .chat-structured-invite em.status-cancelled, .chat-structured-invite em.status-expired { color: #9a8c8e; }
.chat-structured-invite > div:last-child { display: flex; gap: 5px; }
.chat-structured-invite button { min-height: 28px; padding: 4px 8px; font-size: 7px; }

@media (max-width: 1120px) {
  .social-hub-workspace:not(.hidden) { grid-template-columns: 205px minmax(0, 1fr); }
  .social-hub-aside { display: none; }
  .social-profile-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .social-hub-workspace:not(.hidden) { min-height: calc(100dvh - 128px); grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
  .social-hub-rail { display: block; border-radius: 12px; padding: 6px; }
  .social-hub-rail-title, .social-safety-note { display: none; }
  .social-hub-rail nav { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; padding: 0; }
  .social-hub-rail nav button { min-height: 47px; grid-template-columns: 1fr; justify-items: center; gap: 1px; padding: 4px 2px; text-align: center; }
  .social-hub-rail nav button > span { font-size: 17px; }
  .social-hub-rail nav button small { display: none; }
  .social-hub-rail nav button strong { font-size: 7px; }
  .social-hub-main { border-radius: 12px; }
  .social-hub-header { min-height: 67px; padding: 9px 11px; }
  .social-hub-header h2 { font-size: 19px; }
  .social-hub-header p { max-width: 260px; font-size: 7px; }
  .social-discovery-search { grid-template-columns: minmax(0, 1fr) auto; padding: 7px; }
  .social-discovery-search > span { display: none; }
  .social-hub-primary { padding: 10px; }
  .social-profile-card { grid-template-columns: 92px minmax(0, 1fr); }
  .social-profile-avatar { width: 68px; height: 68px; font-size: 25px; }
  .social-profile-copy { padding: 9px; }
  .social-profile-stats { display: none; }
  .social-match-grid { grid-template-columns: 1fr; }
  .social-profile-form { grid-template-columns: 1fr; padding: 12px; }
  .social-profile-form > * { grid-column: 1; }
  .social-gate-card { min-height: 0; grid-template-columns: 1fr; justify-items: center; padding: 17px; text-align: center; }
  .social-gate-card > div { justify-items: center; }
  .social-gate-card .checkline { text-align: left; }
  .social-gate-actions { justify-content: center; }
  .chat-structured-invite { grid-template-columns: 35px minmax(0, 1fr); }
  .chat-structured-invite > span { width: 34px; height: 34px; }
  .chat-structured-invite > div:last-child { grid-column: 1 / -1; }
}
@media (max-height: 540px) and (orientation: landscape) {
  .social-hub-workspace:not(.hidden) { min-height: calc(100dvh - 56px); grid-template-columns: 160px minmax(0, 1fr); gap: 5px; }
  .social-hub-rail, .social-hub-aside { padding: 6px; }
  .social-hub-rail-title { min-height: 42px; padding: 2px 4px 6px; }
  .social-hub-rail-title > span { width: 30px; height: 30px; font-size: 16px; }
  .social-hub-rail-title strong { font-size: 11px; }
  .social-hub-rail nav { gap: 2px; padding: 5px 0; }
  .social-hub-rail nav button { min-height: 38px; grid-template-columns: 24px minmax(0, 1fr); padding: 4px; }
  .social-hub-rail nav button > span { font-size: 14px; }
  .social-safety-note { display: none; }
  .social-hub-header { min-height: 52px; padding: 6px 10px; }
  .social-hub-header h2 { font-size: 17px; }
  .social-hub-header p { font-size: 6px; }
  .social-discovery-search { padding: 5px 9px; }
  .social-discovery-search input, .social-discovery-search button { min-height: 31px; }
  .social-hub-primary { padding: 7px 9px; }
  .social-content-heading { margin-bottom: 5px; }
  .social-content-heading h3 { font-size: 12px; }
  .social-profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .social-profile-card { min-height: 143px; grid-template-columns: 76px minmax(0, 1fr); border-radius: 9px; }
  .social-profile-avatar { width: 53px; height: 53px; border-width: 2px; font-size: 20px; }
  .social-profile-copy { gap: 4px; padding: 6px; }
  .social-profile-copy h3 { font-size: 11px; }
  .social-profile-copy > p, .social-profile-stats { display: none; }
  .social-profile-actions button { min-height: 23px; padding: 3px 5px; font-size: 5px; }
  .social-aside-card { padding: 7px; }
  .social-like-summary > strong { font-size: 24px; }
  .social-hub-rule { display: none; }
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--page); color: var(--text); }
body.launch-active { overflow: hidden; }
body.launch-active > :not(.launch-splash) { visibility: hidden; }

.launch-splash {
  --launch-accent: #e8c66a;
  --launch-accent-bright: #fff0a6;
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  overflow: hidden;
  isolation: isolate;
  background: #070b0d;
  opacity: 1;
  transition: opacity 700ms ease, transform 900ms cubic-bezier(.2,.7,.2,1);
}
.launch-splash[data-splash-theme="burgundy"] {
  --launch-accent: #e7b9a9;
  --launch-accent-bright: #fff0e9;
}
.launch-splash[data-splash-theme="night"] {
  --launch-accent: #efb65b;
  --launch-accent-bright: #ffe4a5;
}
.launch-splash-art,
.launch-splash-shade {
  position: absolute;
  inset: -2%;
}
.launch-splash-art {
  z-index: -2;
  background: #070b0d var(--splash-image) center / cover no-repeat;
  filter: saturate(1.04) contrast(1.03);
  transform: scale(1.035);
  animation: launchCamera 12s ease-out both;
}
.launch-splash-shade {
  z-index: -1;
  background:
    radial-gradient(circle at 50% 55%, transparent 12%, rgb(0 0 0 / 10%) 55%, rgb(0 0 0 / 52%) 100%),
    linear-gradient(180deg, rgb(0 0 0 / 2%) 40%, rgb(0 0 0 / 48%) 100%);
}
.launch-splash-content {
  position: absolute;
  left: 50%;
  top: 61%;
  width: min(92vw, 900px);
  display: grid;
  justify-items: center;
  gap: clamp(15px, 3vh, 28px);
  padding: 0 max(24px, env(safe-area-inset-left));
  transform: translate(-50%, -50%);
  text-align: center;
}
.launch-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.8vw, 25px);
  margin: 0;
  color: transparent;
  font: 900 clamp(34px, 6.5vw, 82px)/.9 Georgia, "Times New Roman", serif;
  letter-spacing: clamp(1px, .45vw, 7px);
  opacity: 0;
  filter: drop-shadow(0 13px 11px rgb(0 0 0 / 64%));
  transform: translateY(24px) scale(.95);
}
.launch-title span,
.launch-title i {
  background: linear-gradient(180deg, #fffbea 0%, var(--launch-accent-bright) 25%, var(--launch-accent) 48%, #8c6428 76%, #fff0a1 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 0 rgb(255 255 255 / 30%), 0 4px 0 rgb(69 38 9 / 70%);
}
.launch-title i {
  font-size: .72em;
  font-style: normal;
  letter-spacing: 0;
}
.launch-play {
  min-width: clamp(190px, 23vw, 300px);
  min-height: clamp(48px, 9vh, 68px);
  border: 1px solid color-mix(in srgb, var(--launch-accent-bright) 70%, transparent);
  border-radius: 999px;
  padding: 10px 36px;
  background: linear-gradient(180deg, var(--launch-accent-bright), var(--launch-accent) 48%, #9a6a25);
  box-shadow: 0 5px 0 #503311, 0 13px 32px rgb(0 0 0 / 56%), inset 0 1px 1px rgb(255 255 255 / 72%);
  color: #211508;
  font-size: clamp(17px, 2.2vw, 27px);
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transform: translateY(22px) scale(.96);
}
.launch-play:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-2px) scale(1.025);
}
.launch-play:active:not(:disabled) {
  box-shadow: 0 2px 0 #503311, 0 8px 22px rgb(0 0 0 / 50%), inset 0 1px 1px rgb(255 255 255 / 72%);
  transform: translateY(3px);
}
.launch-splash.is-ready .launch-title {
  animation: launchTitleIn 950ms cubic-bezier(.16,.85,.28,1.12) both;
}
.launch-splash.is-ready .launch-play {
  animation: launchButtonIn 800ms 1180ms cubic-bezier(.16,.85,.28,1.12) both;
}
.launch-splash.is-ready .launch-play:not(:disabled) { pointer-events: auto; }
.launch-splash.is-leaving {
  opacity: 0;
  pointer-events: none;
  transform: scale(1.035);
}
@keyframes launchCamera {
  from { transform: scale(1.055); }
  to { transform: scale(1); }
}
@keyframes launchTitleIn {
  from { opacity: 0; transform: translateY(24px) scale(.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes launchButtonIn {
  from { opacity: 0; transform: translateY(22px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-height: 540px) and (orientation: landscape) {
  .launch-splash-content { top: 63%; gap: 13px; }
  .launch-title { font-size: clamp(30px, 8.3vh, 55px); }
  .launch-play { min-height: 45px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .launch-splash-art { animation: none; transform: scale(1); }
  .launch-splash.is-ready .launch-title,
  .launch-splash.is-ready .launch-play { animation-duration: 180ms; }
}

/* 2026 navigation and account center — authoritative profile layer. */
.topbar .brand-lockup {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0 !important;
  border-radius: 14px;
  padding: 3px 8px 3px 2px;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit;
  text-align: left;
}
.topbar .brand-lockup::after { display: none !important; }
.topbar .brand-lockup:hover { background: rgb(239 202 108 / 6%) !important; transform: translateY(-1px); }
.brand-emblem { width: 56px; height: 56px; flex: 0 0 56px; display: block; object-fit: contain; filter: drop-shadow(0 7px 9px rgb(0 0 0 / 46%)); }
.brand-copy { min-width: 0; display: grid; gap: 3px; }
.brand-copy strong { color: #fff3ce; font: 800 clamp(20px, 2.15vw, 31px)/.95 var(--club-font, Georgia, serif); letter-spacing: -.045em; white-space: nowrap; text-shadow: 0 2px 10px rgb(0 0 0 / 45%); }
.brand-copy strong i { color: #d9aa4e; font-style: normal; font-weight: 400; }
.brand-copy small { max-width: 300px; overflow: hidden; color: #8fa79a; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.profile-trigger.polished-button {
  width: 68px;
  min-width: 68px;
  min-height: 58px;
  display: grid;
  place-items: center;
  gap: 1px;
  border: 0 !important;
  padding: 2px 4px;
  background: transparent !important;
  box-shadow: none !important;
}
.profile-trigger.polished-button::after { display: none; }
.profile-trigger > small { color: #d8bf7a; font-size: 8px; font-weight: 800; line-height: 1; text-align: center; white-space: nowrap; }
.profile-trigger-frame,
.profile-avatar-frame {
  --tier-a: #d9b86b;
  --tier-b: #724f20;
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 36% 64% 42% 58% / 57% 39% 61% 43%;
  padding: 3px;
  background: conic-gradient(from 25deg, var(--tier-a), #fff0b6, var(--tier-b), var(--tier-a), #fff3c7, var(--tier-b));
  box-shadow: 0 6px 16px rgb(0 0 0 / 48%), 0 0 13px color-mix(in srgb, var(--tier-a) 32%, transparent);
  transform: rotate(-2deg);
}
.profile-trigger-frame { width: 48px; height: 48px; }
.profile-avatar-frame { width: 96px; height: 96px; flex: 0 0 96px; padding: 5px; }
.profile-trigger-frame::after,
.profile-avatar-frame::after { content: ""; position: absolute; inset: -3px; border: 1px solid color-mix(in srgb, var(--tier-a) 58%, transparent); border-radius: inherit; transform: rotate(7deg); pointer-events: none; }
[data-account-tier="silver"] { --tier-a: #e7eef0; --tier-b: #66808a; }
[data-account-tier="gold"] { --tier-a: #ffd66b; --tier-b: #9d5c10; }
[data-account-tier="premium-1"] { --tier-a: #71d6c7; --tier-b: #125a57; }
[data-account-tier="premium-2"] { --tier-a: #e69bf4; --tier-b: #652272; }
[data-account-tier="vip"] { --tier-a: #fff0a3; --tier-b: #8f1938; }
.profile-trigger-avatar,
.profile-avatar-large {
  width: 100% !important;
  height: 100% !important;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px solid #10241a !important;
  border-radius: inherit !important;
  background: linear-gradient(145deg, #f4d47d, #8f5b1f) !important;
  color: #201607;
  font: 900 28px/1 Georgia, serif;
  transform: none !important;
}
.profile-trigger-avatar { font-size: 16px; }
.profile-trigger-avatar img,
.profile-avatar-large img { width: 100%; height: 100%; display: block; object-fit: cover; }

.profile-menu {
  left: 0 !important;
  right: auto !important;
  display: flex !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-104%);
  transition: transform 330ms cubic-bezier(.2,.78,.2,1), opacity 220ms ease, visibility 0s linear 330ms;
  animation: none !important;
  border-right: 1px solid rgb(235 194 101 / 42%) !important;
  border-left: 0 !important;
  box-shadow: 28px 0 80px rgb(0 0 0 / 70%) !important;
}
.profile-menu.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  transition-delay: 0s;
}
.profile-menu-summary { min-height: 118px; align-content: center; }
.drawer-profile-identity { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 12px; }
.drawer-profile-identity .profile-trigger-frame { width: 55px; height: 55px; }
.drawer-profile-identity > div { min-width: 0; display: grid; gap: 3px; }
.drawer-profile-identity strong { overflow: hidden; font-size: 19px; text-overflow: ellipsis; white-space: nowrap; }
.drawer-profile-identity span { font-size: 11px; }
.profile-menu-summary > small { color: #81998c; font-size: 10px; }

.profile-view.app-panel-view:not(.hidden) { grid-template-columns: clamp(155px, 17vw, 210px) minmax(0, 1fr); }
.profile-view .app-view-rail nav button { grid-template-columns: 30px minmax(0, 1fr); }
.profile-view .app-view-rail nav button > span { color: #d9b65f; font-size: 18px; text-align: center; }
.profile-view .app-view-stage { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.profile-view .app-view-page { height: auto; min-height: 100%; overflow: visible; }
.profile-view .app-view-page.panel-page-active { display: block; }
.profile-view .app-view-page > * { width: 100%; height: auto; min-height: 0; overflow: visible; }
.profile-page-shell { display: grid; align-content: start; gap: 12px; }
.profile-view .profile-page-shell.box { padding: 18px; }
.profile-view .profile-hero-panel { grid-template-columns: auto minmax(180px, 1fr) minmax(330px, auto) auto; align-items: center; gap: 18px; padding: 22px; }
.profile-view .profile-avatar-large { font-size: 36px; }
.profile-tier-label { display: inline-flex; width: fit-content; margin-top: 7px; color: #e5c46b; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.profile-view .profile-hero-metrics { grid-template-columns: repeat(5, minmax(68px, 1fr)); }
.profile-view .profile-hero-actions { min-width: 148px; }
.profile-overview-grid { display: grid; grid-template-columns: minmax(250px, .72fr) minmax(340px, 1.28fr); gap: 12px; }
.profile-overview-grid > .box { margin: 0; }
.profile-awards-wall { min-height: 190px; margin: 0 !important; }
.profile-awards-wall .section-heading > small { color: #81978b; font-size: 9px; }
.profile-page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; border-bottom: 1px solid rgb(232 189 88 / 16%); padding-bottom: 13px; }
.profile-page-heading h2 { margin: 3px 0; font-size: 23px !important; }
.profile-page-heading p { color: #8fa69a; font-size: 11px; }
.profile-subtabs { display: inline-flex; gap: 4px; border: 1px solid rgb(232 189 88 / 16%); border-radius: 13px; padding: 4px; background: rgb(0 0 0 / 18%); }
.profile-subtabs button { min-height: 34px; border: 0; padding: 6px 12px; background: transparent; color: #8fa69a; box-shadow: none; font-size: 10px; }
.profile-subtabs button.selected { background: linear-gradient(145deg, #6f2638, #173e30); color: #ffe6a1; }
.profile-stats-pane { padding-top: 14px; }
.profile-stat-grid,
.profile-balance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 10px; }
.profile-stat-card { min-height: 112px; display: grid; align-content: center; gap: 5px; border: 1px solid rgb(232 189 88 / 17%); border-radius: 17px; padding: 15px; background: radial-gradient(circle at 100% 0%, rgb(232 189 88 / 10%), transparent 42%), rgb(0 0 0 / 14%); }
.profile-stat-card > span { color: #8da398; font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.profile-stat-card > strong { color: #f5d477; font: 800 29px/1 Georgia, serif; }
.profile-stat-card > small { color: #9eb0a7; font-size: 10px; }
.profile-photo-editor { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 18px; padding-top: 14px; }
.profile-photo-editor input[type="file"] { width: 100%; border: 1px dashed rgb(232 189 88 / 32%); padding: 9px; }
.profile-avatar-file-input { position: absolute; width: 1px !important; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.profile-file-picker { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgb(232 189 88 / 38%); border-radius: 12px; padding: 9px 15px; background: linear-gradient(145deg, #e8c968, #b27b25); box-shadow: 0 8px 20px rgb(0 0 0 / 25%); color: #281a07; font-size: 12px; font-weight: 900; cursor: pointer; }
.profile-file-picker:hover { filter: brightness(1.07); transform: translateY(-1px); }
.profile-photo-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.profile-security-settings .grid-form label { display: grid; gap: 6px; color: #b6c6bd; font-size: 10px; }
.profile-security-settings .grid-form button { align-self: end; }

@media (max-width: 1050px) {
  .profile-view .profile-hero-panel { grid-template-columns: auto minmax(0, 1fr); }
  .profile-view .profile-hero-metrics,
  .profile-view .profile-hero-actions { grid-column: 1 / -1; }
  .profile-view .profile-hero-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .profile-overview-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .brand-emblem { width: 43px; height: 43px; flex-basis: 43px; }
  .brand-copy strong { font-size: 18px; }
  .brand-copy small { display: none; }
  .profile-trigger.polished-button { width: 50px; min-width: 50px; min-height: 50px; }
  .profile-trigger-frame { width: 39px; height: 39px; }
  .profile-trigger > small { display: none; }
  .profile-view.app-panel-view:not(.hidden) { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .profile-view .app-view-rail { padding: 7px; }
  .profile-view .app-view-rail-heading { display: none; }
  .profile-view .app-view-rail nav { grid-template-columns: repeat(5, minmax(0, 1fr)); overflow-x: auto; }
  .profile-view .app-view-rail nav button { min-height: 48px; grid-template-columns: 1fr; place-items: center; gap: 2px; padding: 4px; text-align: center; }
  .profile-view .app-view-rail nav button > span { font-size: 16px; }
  .profile-view .app-view-rail nav button > strong { font-size: 8px; }
  .profile-view .profile-hero-panel { grid-template-columns: 75px minmax(0, 1fr); padding: 15px; }
  .profile-view .profile-avatar-frame { width: 72px; height: 72px; flex-basis: 72px; }
  .profile-view .profile-hero-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .profile-view .profile-hero-actions { grid-template-columns: 1fr; }
  .profile-page-heading { align-items: stretch; flex-direction: column; }
  .profile-subtabs { width: 100%; }
  .profile-subtabs button { flex: 1; }
  .profile-photo-editor { grid-template-columns: 76px minmax(0, 1fr); }
  .profile-photo-editor .profile-avatar-frame { width: 72px; height: 72px; }
}
@media (max-height: 600px) and (orientation: landscape) {
  .brand-emblem { width: 40px; height: 40px; flex-basis: 40px; }
  .brand-copy strong { font-size: 18px; }
  .profile-trigger.polished-button { min-height: 43px; height: 43px; }
  .profile-trigger-frame { width: 37px; height: 37px; }
  .profile-trigger > small { display: none; }
  .profile-view .profile-hero-panel { padding: 10px; }
  .profile-view .profile-avatar-frame { width: 66px; height: 66px; flex-basis: 66px; }
  .profile-stat-card { min-height: 82px; padding: 9px; }
  .profile-stat-card > strong { font-size: 21px; }
}

/* System settings — game configuration (screen 89). */
.game-settings-page { --game-accent: #b638dc; --game-accent-blue: #5978ff; min-width: 0; color: #edf2fb; }
.game-settings-heading > div:first-child, .game-settings-layout > *, .game-settings-tabs { min-width: 0; }
.game-settings-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; border-bottom: 1px solid rgb(118 130 187 / 20%); padding: 4px 4px 13px; }
.game-settings-heading h2 { margin: 3px 0 2px; font-size: clamp(19px, 2.3vw, 27px); }
.game-settings-heading p { max-width: 720px; margin: 0; color: #8e9caf; font-size: 10px; line-height: 1.55; }
.game-settings-save-area { display: grid; justify-items: end; gap: 6px; flex: 0 0 auto; }
.game-settings-save-area button { min-width: 148px; background: linear-gradient(110deg, #7638e9, #cb35bd); box-shadow: 0 9px 24px rgb(111 39 205 / 25%); }
.game-settings-state { min-height: 15px; color: #8192a5; font-size: 8px; }
.game-settings-state[data-state="dirty"], .game-settings-state[data-state="validationError"], .game-settings-state[data-state="conflict"] { color: #f1b760; }
.game-settings-state[data-state="saved"] { color: #66d899; }
.game-settings-state[data-state="saveError"], .game-settings-state[data-state="loadError"] { color: #ff7891; }
.game-settings-tabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid rgb(110 126 177 / 20%); padding: 8px 3px 0; }
.game-settings-tabs button { min-height: 34px; border: 0; border-bottom: 2px solid transparent; border-radius: 7px 7px 0 0; padding: 7px 13px; background: transparent; box-shadow: none; color: #8191a6; white-space: nowrap; }
.game-settings-tabs button.selected { border-color: #c543d4; background: linear-gradient(180deg, rgb(116 60 219 / 15%), transparent); color: #f0e8ff; }
.game-settings-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 11px; padding-top: 11px; }
.game-settings-main { min-width: 0; }
.game-settings-tab-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 10px; }
.game-setting-card, .game-settings-sidebar > section { min-width: 0; border: 1px solid rgb(99 115 173 / 24%); border-radius: 11px; background: linear-gradient(145deg, rgb(13 24 43 / 92%), rgb(15 16 39 / 88%)); box-shadow: inset 0 1px rgb(255 255 255 / 3%); padding: 12px; }
.game-setting-card-wide, .game-setting-note-card { grid-column: 1 / -1; }
.game-setting-card > header { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; }
.game-setting-card h3, .game-settings-sidebar h3 { margin: 0; font-size: 11px; }
.game-setting-card header p, .game-setting-note-card p { margin: 2px 0 0; color: #7f8da0; font-size: 8px; }
.game-setting-icon { width: 29px; height: 29px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgb(189 63 220 / 29%); border-radius: 8px; background: linear-gradient(135deg, rgb(85 104 255 / 18%), rgb(201 49 187 / 20%)); color: #d85adb; font-size: 15px; }
.player-count-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; border: 0; margin: 0; padding: 0; }
.player-count-options label { display: grid; place-items: center; gap: 1px; position: relative; min-height: 69px; border: 1px solid rgb(102 121 172 / 28%); border-radius: 9px; background: #091523; cursor: pointer; }
.player-count-options label:has(input:checked) { border-color: #9e48e8; background: linear-gradient(145deg, rgb(83 73 222 / 30%), rgb(155 39 177 / 24%)); box-shadow: 0 0 18px rgb(118 51 214 / 14%); }
.player-count-options input { position: absolute; top: 7px; right: 7px; width: 12px; height: 12px; min-height: 0; }
.player-count-options strong { font-size: 20px; }
.player-count-options span { color: #8391a3; font-size: 8px; }
.setting-help { margin: 9px 0 0; color: #7d8b9d; font-size: 8px; line-height: 1.45; }
.setting-toggle { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgb(105 123 166 / 15%); padding: 8px 1px; }
.setting-toggle:last-of-type { border-bottom: 0; }
.setting-toggle > span { display: grid; gap: 3px; }
.setting-toggle small, .game-setting-card label > small { color: #748498; font-size: 7px; line-height: 1.35; }
.setting-toggle input[role="switch"] { appearance: none; width: 35px; height: 19px; min-height: 19px; flex: 0 0 auto; border: 1px solid #46556c; border-radius: 20px; padding: 0; background: #182434; cursor: pointer; }
.setting-toggle input[role="switch"]::before { content: ""; display: block; width: 13px; height: 13px; border-radius: 50%; margin: 2px; background: #79879a; transition: transform .18s, background .18s; }
.setting-toggle input[role="switch"]:checked { border-color: #a447e7; background: linear-gradient(90deg, #5a67df, #ad36c2); }
.setting-toggle input[role="switch"]:checked::before { transform: translateX(16px); background: white; }
.game-setting-card > label:not(.setting-toggle) { display: grid; gap: 5px; margin-top: 9px; color: #c8d1dd; font-size: 8px; }
.game-settings-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.game-settings-fields.four-columns { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.game-settings-fields label { display: grid; gap: 5px; color: #c6cfdb; font-size: 8px; }
.game-settings-fields input, .game-setting-card select { width: 100%; min-height: 35px; border-color: rgb(104 124 176 / 34%); background: #081421; }
.game-settings-fields input[readonly] { color: #6fd39a; }
.level-definition-preview { display: flex; gap: 6px; overflow-x: auto; margin-top: 11px; padding-bottom: 2px; }
.level-definition-preview span { min-width: 72px; display: grid; gap: 2px; border: 1px solid rgb(102 119 171 / 21%); border-radius: 7px; padding: 6px; background: #091421; color: #8998a9; font-size: 7px; }
.level-definition-preview strong { color: #d7ddea; font-size: 9px; }
.game-setting-note-card { border-color: rgb(88 121 188 / 24%); background: linear-gradient(100deg, rgb(28 52 91 / 45%), rgb(39 20 68 / 32%)); }
.game-settings-sidebar { display: grid; align-content: start; gap: 9px; }
.game-settings-sidebar > section { padding: 11px; }
.game-settings-sidebar section > header { display: flex; align-items: center; justify-content: space-between; }
.game-settings-sidebar section > header button { min-width: 26px; min-height: 24px; padding: 2px; }
.game-settings-sidebar dl { display: grid; gap: 7px; margin: 9px 0 0; }
.game-settings-sidebar dl div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid rgb(103 118 158 / 13%); padding-bottom: 6px; }
.game-settings-sidebar dt { color: #748398; font-size: 7px; }
.game-settings-sidebar dd { margin: 0; color: #d4dbe5; font-size: 8px; text-align: right; }
.game-settings-sidebar ul { display: grid; gap: 6px; margin: 9px 0 0; padding-left: 15px; color: #8594a7; font-size: 8px; line-height: 1.35; }
.game-settings-sidebar li::marker { color: #bb42d3; }
.game-settings-history { display: grid; gap: 6px; max-height: 210px; overflow-y: auto; margin: 9px 0; }
.game-settings-history article { border-left: 2px solid #844fe1; padding: 2px 0 2px 7px; }
.game-settings-history strong { display: block; color: #ccd4df; font-size: 8px; }
.game-settings-history p { margin: 2px 0; color: #78889b; font-size: 7px; line-height: 1.35; }
.game-settings-history time { color: #65768a; font-size: 7px; }
.game-settings-error { grid-column: 1 / -1; border: 1px solid rgb(255 87 119 / 42%); border-radius: 8px; margin-top: 9px; padding: 9px; background: rgb(103 20 42 / 35%); color: #ff9aac; font-size: 9px; }
.game-settings-leave-dialog { width: min(540px, 92vw); }
.game-settings-leave-dialog p { color: #9aa8b9; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.dialog-actions .danger { border-color: rgb(245 76 107 / 45%); background: rgb(116 22 44 / 50%); }

@media (max-width: 930px) {
  .game-settings-layout { grid-template-columns: 1fr; }
  .game-settings-sidebar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .game-settings-fields.four-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .game-settings-heading { align-items: stretch; flex-direction: column; }
  .game-settings-save-area { justify-items: stretch; }
  .game-settings-save-area button { width: 100%; }
  .game-settings-tab-panel, .game-settings-fields, .game-settings-fields.four-columns, .game-settings-sidebar { grid-template-columns: 1fr; }
}

@media (max-height: 600px) and (orientation: landscape) {
  .game-settings-heading { padding-bottom: 6px; }
  .game-settings-heading h2 { font-size: 18px; }
  .game-settings-heading p { font-size: 8px; }
  .game-settings-tabs { padding-top: 3px; }
  .game-settings-tabs button { min-height: 27px; padding: 4px 9px; font-size: 8px; }
  .game-settings-layout { grid-template-columns: minmax(0, 1fr) 205px; gap: 7px; padding-top: 6px; }
  .game-settings-sidebar { grid-template-columns: 1fr; }
  .game-setting-card, .game-settings-sidebar > section { padding: 8px; }
  .player-count-options label { min-height: 52px; }
  .game-settings-fields input, .game-setting-card select { min-height: 29px; }
}

/* Moderation chat queue: evidence-focused three-column workspace. */
.moderation-chat-workspace:not(.hidden) {
  height: calc(100dvh - 92px);
  min-height: 650px;
  display: grid;
  grid-template-columns: 170px minmax(600px, 1fr) 370px;
  gap: 9px;
  overflow: hidden;
  color: #e9edf5;
}
.moderation-section-rail,
.moderation-chat-main,
.moderation-chat-detail {
  min-width: 0;
  border: 1px solid rgb(68 117 151 / 27%);
  border-radius: 12px;
  background: linear-gradient(155deg, rgb(5 16 25 / 99%), rgb(2 9 15 / 99%));
  box-shadow: 0 14px 38px rgb(0 0 0 / 25%);
}
.moderation-section-rail { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: 9px; }
.moderation-rail-brand { min-height: 48px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid rgb(82 125 155 / 20%); color: #d8bd59; text-transform: uppercase; }
.moderation-rail-brand span { font-size: 24px; }
.moderation-section-rail nav { display: grid; align-content: start; gap: 4px; overflow-y: auto; padding: 9px 0; }
.moderation-section-rail nav button { min-width: 0; min-height: 45px; display: grid; grid-template-columns: 25px minmax(0, 1fr) auto; align-items: center; border: 1px solid transparent; padding: 6px 8px; background: transparent; box-shadow: none; color: #d8e0e7; text-align: left; }
.moderation-section-rail nav button > span { color: #8eb5cd; font-size: 16px; text-align: center; }
.moderation-section-rail nav button strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.moderation-section-rail nav button small { min-width: 20px; border-radius: 10px; padding: 2px 5px; background: #a80d34; color: white; text-align: center; }
.moderation-section-rail nav button.selected { border-color: #c42cb8; background: linear-gradient(105deg, rgb(112 10 112 / 67%), rgb(37 8 48 / 80%)); box-shadow: inset 3px 0 #f12dc4; }
.moderation-section-rail nav button:disabled { opacity: .42; cursor: default; }
.moderation-section-rail > button { min-height: 38px; font-size: 8px; }
.moderation-chat-main { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto auto; overflow: hidden; }
.moderation-chat-heading { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid rgb(74 116 145 / 22%); padding: 9px 13px; }
.moderation-chat-heading h2 { margin: 1px 0; font-size: 22px; }
.moderation-chat-heading p { max-width: 650px; margin: 0; color: #8094a3; font-size: 8px; }
.moderation-chat-heading button { min-width: 96px; }
.moderation-status-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid rgb(74 116 145 / 20%); padding: 7px 10px 0; }
.moderation-status-tabs button { min-width: 0; min-height: 37px; border: 1px solid rgb(73 108 132 / 18%); border-radius: 7px 7px 0 0; padding: 5px; background: rgb(8 20 30 / 80%); box-shadow: none; color: #b8c4cc; font-size: 8px; white-space: nowrap; }
.moderation-status-tabs button b { margin-left: 4px; border-radius: 10px; padding: 2px 6px; background: #172b39; color: #dce6ed; }
.moderation-status-tabs button.selected { border-color: #b828b4; background: linear-gradient(180deg, rgb(98 12 103 / 76%), rgb(44 8 52 / 80%)); color: white; box-shadow: inset 0 -2px #e22fc7; }
.moderation-chat-filters { display: grid; grid-template-columns: minmax(180px, 1fr) 135px 145px 88px; gap: 6px; padding: 8px 10px; }
.moderation-chat-filters input, .moderation-chat-filters select, .moderation-chat-filters button { min-width: 0; min-height: 35px; font-size: 8px; }
.moderation-chat-search { min-width: 0; display: grid; grid-template-columns: 25px minmax(0, 1fr); align-items: center; border: 1px solid rgb(72 111 140 / 25%); border-radius: 8px; background: rgb(4 13 21 / 82%); }
.moderation-chat-search span { text-align: center; color: #dfb945; }
.moderation-chat-search input { border: 0; background: transparent; }
.moderation-chat-queue { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); margin: 0 10px; overflow: hidden; border: 1px solid rgb(65 106 136 / 21%); border-radius: 9px; }
.moderation-chat-columns, .moderation-chat-case { display: grid; grid-template-columns: 78px minmax(160px, 1fr) 90px 58px 78px 80px; align-items: center; gap: 7px; }
.moderation-chat-columns { min-height: 28px; padding: 4px 9px; background: #091722; color: #7f929f; font-size: 7px; }
.moderation-chat-cases { min-height: 0; overflow-y: auto; }
.moderation-chat-case { width: 100%; min-height: 67px; border: 0; border-bottom: 1px solid rgb(64 103 131 / 18%); border-radius: 0; padding: 6px 9px; background: rgb(4 14 22 / 65%); box-shadow: none; color: #dce5eb; text-align: left; }
.moderation-chat-case:hover, .moderation-chat-case.selected { background: linear-gradient(100deg, rgb(72 9 79 / 58%), rgb(12 20 31 / 82%)); }
.moderation-chat-case.selected { outline: 1px solid #ce2aba; outline-offset: -1px; }
.moderation-chat-case > strong { color: #d8e3ea; font-size: 9px; }
.moderation-case-message { min-width: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 6px; align-items: center; }
.moderation-case-message > i { width: 33px; height: 33px; overflow: hidden; display: grid; place-items: center; border: 1px solid #426d88; border-radius: 50%; background: #102b3c; color: #88d6ff; font-style: normal; font-weight: 900; }
.moderation-case-message img { width: 100%; height: 100%; object-fit: cover; }
.moderation-case-message > span { min-width: 0; display: grid; gap: 1px; }
.moderation-case-message b { font-size: 9px; }
.moderation-case-message small, .moderation-case-source small, .moderation-chat-case time small { display: block; color: #6f8594; font-size: 6px; }
.moderation-case-message em { overflow: hidden; color: #b9c4cb; font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.moderation-case-source { min-width: 0; }
.moderation-case-source b { display: block; overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.moderation-chat-case time { color: #b7c3ca; font-size: 7px; }
.moderation-priority { font-size: 7px; white-space: nowrap; }
.moderation-priority-low { color: #79c93c; }.moderation-priority-normal { color: #ff9b28; }.moderation-priority-high { color: #ff4a59; }.moderation-priority-urgent { color: #ff255f; text-shadow: 0 0 9px rgb(255 37 95 / 55%); }
.moderation-case-status { border: 1px solid rgb(195 36 181 / 35%); border-radius: 6px; padding: 5px 7px; background: rgb(91 11 91 / 30%); color: #efa1ed; font-size: 7px; text-align: center; white-space: nowrap; }
.moderation-case-status-in_progress { border-color: rgb(239 164 30 / 42%); color: #efb239; }.moderation-case-status-confirmed { border-color: rgb(39 193 102 / 35%); color: #55d58b; }.moderation-case-status-rejected { border-color: rgb(102 124 139 / 28%); color: #8c9ba5; }
.moderation-chat-empty, .moderation-detail-empty { height: 100%; display: grid; place-items: center; align-content: center; gap: 6px; color: #708795; text-align: center; }
.moderation-chat-empty span, .moderation-detail-empty span { font-size: 32px; color: #ba2eb0; }
.moderation-chat-empty p, .moderation-detail-empty p { max-width: 230px; margin: 0; font-size: 8px; }
.moderation-chat-pagination { min-height: 40px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 5px; color: #91a2ad; font-size: 8px; }
.moderation-chat-pagination button { min-width: 33px; min-height: 29px; padding: 3px; }
.moderation-chat-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 0 10px 9px; }
.moderation-chat-stats article { display: flex; align-items: center; justify-content: space-between; border: 1px solid rgb(66 108 137 / 22%); border-radius: 7px; padding: 6px 8px; background: #07141e; }
.moderation-chat-stats span { color: #8496a2; font-size: 7px; }.moderation-chat-stats strong { color: #f0c75a; font-size: 14px; }
.moderation-chat-detail { overflow-y: auto; padding: 10px; }
.moderation-chat-detail > header { display: flex; align-items: flex-start; justify-content: space-between; border-bottom: 1px solid rgb(75 115 143 / 20%); padding-bottom: 7px; }
.moderation-chat-detail > header span { color: #8b9ba5; font-size: 7px; }.moderation-chat-detail > header h2 { margin: 2px 0 0; font-size: 17px; }.moderation-chat-detail > header button { min-width: 30px; min-height: 28px; padding: 2px; }
.moderation-detail-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 0; }
.moderation-detail-badges b { color: #c8d1d7; font-size: 7px; }
.moderation-detail-author, .moderation-detail-message, .moderation-detail-context, .moderation-detail-reports, .moderation-detail-controls, .moderation-chat-sanction { border: 1px solid rgb(66 107 135 / 22%); border-radius: 8px; padding: 8px; background: rgb(5 16 24 / 76%); }
.moderation-chat-detail section + section { margin-top: 7px; }
.moderation-detail-author > div { display: flex; align-items: center; gap: 7px; }.moderation-detail-author > div > span:last-child { min-width: 0; display: grid; }
.moderation-detail-avatar { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #416d87; border-radius: 50%; background: #102a3b; color: #8dd7ff; font-weight: 900; }
.moderation-detail-author small, .moderation-detail-author p, .moderation-detail-message small { color: #738995; font-size: 7px; }.moderation-detail-author p { margin: 7px 0 0; }.moderation-detail-author > button { width: 100%; min-height: 28px; margin-top: 7px; font-size: 7px; }
.moderation-detail-message header, .moderation-detail-context header, .moderation-detail-reports header, .moderation-detail-controls header { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.moderation-detail-message time, .moderation-detail-context header small, .moderation-detail-controls header small { color: #728592; font-size: 7px; }.moderation-detail-message p { margin: 7px 0; border: 1px solid rgb(84 121 146 / 20%); border-radius: 6px; padding: 8px; background: #081722; font-size: 8px; }
.moderation-detail-context > div { max-height: 185px; overflow-y: auto; margin: 7px 0; border: 1px solid rgb(78 116 142 / 18%); border-radius: 6px; }
.moderation-context-message { display: grid; grid-template-columns: 31px 62px minmax(0, 1fr); gap: 4px; padding: 5px 6px; border-bottom: 1px solid rgb(69 105 129 / 15%); font-size: 7px; }
.moderation-context-message.target { background: linear-gradient(90deg, rgb(113 9 107 / 68%), rgb(48 7 58 / 64%)); outline: 1px solid #c323b5; outline-offset: -1px; }
.moderation-context-message time { color: #718895; }.moderation-context-message strong { overflow: hidden; color: #9edcff; text-overflow: ellipsis; white-space: nowrap; }.moderation-context-message p { margin: 0; }.moderation-context-message small { grid-column: 2 / 4; color: #efb54b; }
.moderation-detail-context > button { width: 100%; min-height: 29px; font-size: 7px; }
.moderation-detail-reports p { margin: 7px 0 0; color: #aebbc3; font-size: 7px; }
.moderation-reporter-avatars { display: flex; }.moderation-reporter-avatars span { width: 23px; height: 23px; display: grid; place-items: center; margin-left: -4px; border: 1px solid #496f86; border-radius: 50%; background: #102839; color: #9bdcff; font-size: 7px; }
.moderation-detail-controls { display: grid; gap: 7px; }.moderation-detail-controls label { display: grid; gap: 3px; color: #82949f; font-size: 7px; }.moderation-detail-controls select, .moderation-detail-controls textarea, .moderation-detail-controls button { min-height: 32px; font-size: 8px; }
.moderation-decision-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }.moderation-decision-buttons button { min-width: 0; padding: 5px; }.moderation-decision-buttons button.selected { outline: 2px solid #f2c34d; }
.moderation-resolution { border: 1px solid rgb(55 153 96 / 24%); border-radius: 7px; padding: 8px; background: rgb(13 64 38 / 23%); }.moderation-resolution p { margin: 4px 0; color: #aab8c0; font-size: 8px; }.moderation-resolution small { color: #67cf91; font-size: 7px; }
.moderation-chat-sanction { display: grid; gap: 6px; }.moderation-chat-sanction select, .moderation-chat-sanction input, .moderation-chat-sanction textarea, .moderation-chat-sanction button { min-height: 32px; font-size: 8px; }
.moderation-violation-filters { grid-template-columns: minmax(150px, 1fr) 125px 118px 100px 76px; }
.moderation-violation-columns,
.moderation-violation-case { grid-template-columns: 72px minmax(125px, .9fr) minmax(120px, 1fr) 82px 58px 70px 88px; }
.moderation-violation-type { min-width: 0; display: grid; gap: 2px; }
.moderation-violation-type b { overflow: hidden; color: #dce4ea; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.moderation-violation-type small { overflow: hidden; color: #718692; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
.moderation-case-status-pending_review { border-color: rgb(195 36 181 / 35%); color: #efa1ed; }
.moderation-case-status-waiting_for_sanction { border-color: rgb(42 147 211 / 42%); background: rgb(12 67 104 / 30%); color: #71c8ff; }
.moderation-case-status-closed { border-color: rgb(39 193 102 / 35%); background: rgb(14 77 42 / 25%); color: #55d58b; }
.moderation-violation-evidence { display: grid; gap: 5px; padding: 7px; }
.moderation-violation-evidence p { margin: 0; color: #c4d0d7; font-size: 8px; }
.moderation-violation-evidence small, .moderation-violation-evidence em { color: #748995; font-size: 7px; font-style: normal; }
.moderation-violation-evidence > div { display: grid; gap: 3px; }
.moderation-violation-evidence > div span { color: #d6a94f; font-size: 7px; }
.moderation-inline-profile, .moderation-inline-history { display: grid; gap: 4px; margin-top: 7px; border: 1px solid rgb(76 119 146 / 22%); border-radius: 6px; padding: 7px; background: #071722; color: #9eb0bb; font-size: 7px; }
.moderation-inline-history button { min-height: 29px; display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 4px 6px; font-size: 7px; text-align: left; }
.violation-decision-grid { grid-template-columns: 1fr 1fr; }
.violation-decision-grid button:last-child { grid-column: 1 / -1; }
.moderation-heading-actions { display: flex; align-items: center; gap: 6px; }
.moderation-heading-actions button { min-width: 78px; }
.moderation-sanction-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.moderation-sanction-filters { grid-template-columns: minmax(135px, 1fr) 105px 105px 78px 92px 66px; }
.moderation-sanction-columns,
.moderation-sanction-case { grid-template-columns: 62px minmax(110px, .9fr) 82px minmax(105px, 1fr) 55px 55px 70px 78px; gap: 5px; }
.moderation-sanction-type, .moderation-sanction-reason, .moderation-sanction-creator { min-width: 0; display: grid; gap: 2px; }
.moderation-sanction-type b, .moderation-sanction-reason b, .moderation-sanction-creator b { overflow: hidden; color: #dce5eb; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.moderation-sanction-type small, .moderation-sanction-reason small, .moderation-sanction-creator small { overflow: hidden; color: #718591; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
.moderation-case-status-active { border-color: rgb(235 51 64 / 48%); background: rgb(104 11 24 / 34%); color: #ff6d77; }
.moderation-case-status-scheduled { border-color: rgb(45 144 207 / 42%); color: #79caff; }
.moderation-case-status-revoked { border-color: rgb(47 160 99 / 38%); background: rgb(12 70 39 / 25%); color: #66d696; }
.moderation-case-status-expired { border-color: rgb(108 126 139 / 35%); background: rgb(63 73 81 / 25%); color: #9ba8b0; }
.moderation-sanction-timeline { border: 1px solid rgb(66 107 135 / 22%); border-radius: 8px; padding: 8px; background: rgb(5 16 24 / 76%); }
.moderation-sanction-timeline > header { margin-bottom: 6px; }
.moderation-sanction-timeline > div { display: grid; gap: 1px; }
.moderation-sanction-timeline article { min-height: 30px; display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; align-items: center; gap: 6px; border-left: 1px solid rgb(81 123 148 / 28%); padding: 3px 0 3px 7px; }
.moderation-sanction-timeline article i { width: 7px; height: 7px; margin-left: -11px; border: 1px solid #61b9e7; border-radius: 50%; background: #09243a; }
.moderation-sanction-timeline article span { display: grid; }.moderation-sanction-timeline article b { font-size: 7px; }.moderation-sanction-timeline article small, .moderation-sanction-timeline article em { color: #718691; font-size: 6px; font-style: normal; }
.moderation-sanction-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.moderation-sanction-actions button { min-width: 0; padding: 5px; }
.moderation-sanction-create-form { margin-top: 8px; }
.moderation-sanction-create-form label, .moderation-chat-sanction label { display: grid; gap: 3px; color: #82949f; font-size: 7px; }
.moderation-chat-sanction small, .moderation-chat-sanction p { color: #81939e; font-size: 7px; }

@media (max-height: 600px) and (orientation: landscape) {
  .moderation-chat-workspace:not(.hidden) { height: calc(100dvh - 68px); min-height: 0; grid-template-columns: 105px minmax(0, 1fr) 225px; gap: 5px; }
  .moderation-section-rail { padding: 5px; }.moderation-rail-brand { min-height: 34px; }.moderation-rail-brand span { font-size: 16px; }.moderation-rail-brand strong { font-size: 8px; }
  .moderation-section-rail nav { padding: 5px 0; }.moderation-section-rail nav button { min-height: 33px; grid-template-columns: 19px minmax(0, 1fr) auto; padding: 3px; }.moderation-section-rail nav button > span { font-size: 12px; }.moderation-section-rail nav button strong { font-size: 6px; }
  .moderation-section-rail > button { min-height: 29px; padding: 3px; font-size: 6px; }
  .moderation-chat-heading { min-height: 45px; padding: 4px 7px; }.moderation-chat-heading h2 { font-size: 15px; }.moderation-chat-heading p { display: none; }.moderation-chat-heading button { min-width: 70px; min-height: 30px; padding: 3px; font-size: 6px; }
  .moderation-status-tabs { padding: 3px 5px 0; }.moderation-status-tabs button { min-height: 28px; padding: 3px 1px; font-size: 5px; }.moderation-status-tabs button b { padding: 1px 3px; }
  .moderation-chat-filters { grid-template-columns: minmax(90px, 1fr) 90px 90px 55px; gap: 3px; padding: 4px 5px; }.moderation-chat-filters input, .moderation-chat-filters select, .moderation-chat-filters button { min-height: 27px; padding: 3px; font-size: 6px; }
  .moderation-chat-queue { margin: 0 5px; }.moderation-chat-columns, .moderation-chat-case { grid-template-columns: 57px minmax(120px, 1fr) 70px 58px 60px; gap: 3px; }.moderation-chat-columns span:nth-child(4), .moderation-chat-case time { display: none; }.moderation-chat-columns { min-height: 21px; padding: 2px 4px; font-size: 5px; }.moderation-chat-case { min-height: 50px; padding: 3px 4px; }.moderation-case-message { grid-template-columns: 25px minmax(0, 1fr); }.moderation-case-message > i { width: 24px; height: 24px; }.moderation-case-message b, .moderation-chat-case > strong { font-size: 6px; }.moderation-case-message em, .moderation-case-source b { font-size: 5px; }.moderation-case-status, .moderation-priority { padding: 3px; font-size: 5px; }
  .moderation-chat-pagination { min-height: 29px; padding: 2px; }.moderation-chat-pagination button { min-height: 23px; }.moderation-chat-stats { gap: 3px; padding: 0 5px 4px; }.moderation-chat-stats article { padding: 3px 4px; }.moderation-chat-stats span { font-size: 5px; }.moderation-chat-stats strong { font-size: 9px; }
  .moderation-chat-detail { padding: 5px; }.moderation-chat-detail section + section { margin-top: 4px; }.moderation-detail-author, .moderation-detail-message, .moderation-detail-context, .moderation-detail-reports, .moderation-detail-controls, .moderation-chat-sanction { padding: 5px; }.moderation-detail-context > div { max-height: 105px; }.moderation-context-message { grid-template-columns: 25px 45px minmax(0, 1fr); padding: 3px; font-size: 5px; }.moderation-detail-reports { display: none; }.moderation-detail-controls select, .moderation-detail-controls textarea, .moderation-detail-controls button { min-height: 27px; font-size: 6px; }.moderation-decision-buttons { grid-template-columns: 1fr; }
  .moderation-violation-filters { grid-template-columns: minmax(80px, 1fr) 78px 70px 60px 48px; }
  .moderation-violation-columns, .moderation-violation-case { grid-template-columns: 54px minmax(90px, .8fr) minmax(90px, 1fr) 58px 52px 67px; }
  .moderation-violation-columns span:nth-child(5), .moderation-violation-case time { display: none; }
  .moderation-violation-type b { font-size: 6px; }.moderation-violation-type small { font-size: 5px; }
  .moderation-heading-actions { gap: 3px; }.moderation-heading-actions button { min-width: 48px; }
  .moderation-sanction-filters { grid-template-columns: minmax(70px, 1fr) 58px 60px 49px 54px 43px; }
  .moderation-sanction-columns, .moderation-sanction-case { grid-template-columns: 48px minmax(82px, 1fr) 65px minmax(80px, 1fr) 58px 62px; }
  .moderation-sanction-columns span:nth-child(4) { display: block; }
  .moderation-sanction-columns span:nth-child(5), .moderation-sanction-columns span:nth-child(6), .moderation-sanction-case time { display: none; }
  .moderation-sanction-type b, .moderation-sanction-reason b, .moderation-sanction-creator b { font-size: 5px; }
  .moderation-sanction-type small, .moderation-sanction-reason small, .moderation-sanction-creator small { font-size: 4px; }
  .moderation-sanction-timeline article { min-height: 22px; }.moderation-sanction-actions { grid-template-columns: 1fr; }
}
button, input, select, textarea { font: inherit; }
.app { width: min(1180px, 100%); margin: 0 auto; padding: 20px; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-bottom: 1px solid #2b333c; padding-bottom: 14px; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.tabs button { background: transparent; color: #aebccd; border: 1px solid transparent; padding: 9px 11px; }
.tabs button.selected, .tabs button:hover { color: #fff; border-color: #45515f; background: #1b242d; }
h1 { margin: 0 0 4px; font-size: 34px; }
h2 { margin: 18px 0 10px; font-size: 18px; color: #cbd7e1; }
h3 { margin: 18px 0 8px; font-size: 15px; color: #aebccd; }
p { margin: 0; color: #94a3b8; }
.panel { margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; }
.download-link { min-height: 44px; display: inline-grid; place-items: center; border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; background: var(--surface); color: var(--text); font-weight: 800; text-align: center; text-decoration: none; }
.download-link:hover { border-color: var(--accent); }
.view { margin-top: 22px; }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.box { border-top: 1px solid #2b333c; padding: 6px 0 18px; }
label { display: grid; gap: 6px; color: #cbd7e1; }
.checkline { display: flex; align-items: center; gap: 8px; min-height: 46px; }
.checkline input { width: auto; }
input, select, textarea { width: 100%; border: 1px solid #334155; background: #151c23; color: #fff; border-radius: 8px; padding: 12px; }
select { appearance: auto; }
textarea { resize: vertical; min-height: 180px; font: 13px/1.45 Consolas, monospace; }
button { border: 0; background: #f4c542; color: #161300; border-radius: 8px; padding: 12px 14px; cursor: pointer; font-weight: 700; }
button:disabled { opacity: .45; cursor: not-allowed; }
.ghost { background: #1f2933; color: #e2e8f0; border: 1px solid #3c4652; }
.hidden { display: none !important; }
.actions, .inline-form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.section-heading h2 { margin-right: auto; }
.icon-button { width: 42px; height: 42px; padding: 0; display: inline-grid; place-items: center; font-size: 18px; }
.profile-menu-wrap { position: relative; }
.profile-menu { position: absolute; z-index: 80; top: calc(100% + 7px); right: 0; width: 230px; display: grid; gap: 6px; border: 1px solid var(--border); background: var(--surface-strong); border-radius: 8px; padding: 8px; box-shadow: 0 14px 34px rgb(0 0 0 / 38%); }
.profile-menu button { width: 100%; text-align: left; }
.profile-menu-summary { display: grid; gap: 3px; border-bottom: 1px solid var(--border-soft); padding: 7px 7px 10px; }
.profile-menu-summary span { color: var(--muted); font-size: 13px; }
.notification-badge { display: inline-grid; place-items: center; min-width: 19px; height: 19px; margin-left: 4px; border-radius: 10px; padding: 0 5px; background: #b91c1c; color: #fff; font-size: 11px; }
.notification-card.unread { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.room-list { display: grid; gap: 8px; }
.room-row { display: grid; grid-template-columns: minmax(180px, 1fr) 110px auto; align-items: center; gap: 12px; border: 1px solid #303944; background: #151b22; border-radius: 8px; padding: 10px 12px; }
.room-row > div { display: grid; gap: 3px; }
.room-row span, .room-row small { color: #94a3b8; }
.inline-form input { flex: 1 1 220px; }
.grid-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; }
.grid-form button { min-height: 46px; }
.kv { display: grid; gap: 8px; }
.kv > div { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid #252e38; padding: 8px 0; }
.kv span { color: #94a3b8; }
.leaderboard { display: grid; gap: 7px; }
.leaderboard-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: var(--surface); }
.leaderboard-row.current { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.leaderboard-row > strong { display: flex; align-items: center; gap: 10px; min-width: 0; overflow-wrap: anywhere; }
.leaderboard-place { display: inline-grid; place-items: center; min-width: 38px; color: var(--accent); font-variant-numeric: tabular-nums; }
.leaderboard-score { display: grid; justify-items: end; gap: 2px; }
.leaderboard-score b { font-size: 18px; font-variant-numeric: tabular-nums; }
.leaderboard-score span, .muted { color: var(--muted); font-size: 13px; }
.daily-reward-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; }
.daily-reward-day { display: grid; gap: 6px; border: 1px solid var(--border); border-radius: 8px; padding: 10px; background: var(--surface); text-align: center; }
.daily-reward-day.active { border-color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); }
.daily-reward-day strong { color: var(--accent); }
.daily-reward-day span { color: var(--muted); font-size: 12px; }
.daily-challenge-card { display: grid; gap: 9px; }
.daily-challenge-card progress { width: 100%; height: 10px; accent-color: var(--accent); }
.daily-challenge-card.completed { border-color: var(--accent); }
.daily-challenge-admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin: 12px 0; }
.daily-challenge-admin-grid .mini-card { display: grid; gap: 8px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.mini-card { border: 1px solid #303944; background: #151b22; border-radius: 8px; padding: 12px; }
.mini-card p { margin: 7px 0; font-size: 14px; overflow-wrap: anywhere; }
.mini-card span { display: inline-block; margin: 3px 5px 0 0; padding: 3px 6px; border: 1px solid #3c4652; border-radius: 4px; color: #cbd5e1; font-size: 12px; }
.mini-card .card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mini-card .card-actions button { padding: 8px 10px; font-size: 13px; }
.danger { background: #3b1d22; color: #fecaca; border: 1px solid #7f1d1d; }
.warning { background: #3a2d12; color: #fde68a; border: 1px solid #854d0e; }
.catalog-item { display: grid; gap: 8px; align-content: start; }
.catalog-item button { margin-top: auto; }
.roomline { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 20px 0; }
.empty-state { margin: 10px 0 0; border: 1px dashed var(--border); border-radius: 8px; padding: 18px; color: var(--muted); text-align: center; }
.turn-timer { min-width: 92px; color: #f4c542; font-variant-numeric: tabular-nums; }
.players { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.player { border: 1px solid #303944; background: #151b22; border-radius: 8px; padding: 12px; min-height: 98px; }
.player.active { outline: 2px solid #f4c542; }
.player strong { display: block; margin-bottom: 8px; }
.player-block { margin-top: 9px; padding: 6px 8px; font-size: 12px; }
.player .card-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.standings { margin-top: 12px; border-top: 1px solid #303944; padding-top: 10px; }
.standings h3 { margin: 0 0 8px; font-size: 16px; }
.standings > div { display: grid; grid-template-columns: 90px 1fr auto; gap: 10px; padding: 7px 0; border-bottom: 1px solid #252e38; }
.meta { display: grid; gap: 4px; color: #aebccd; font-size: 14px; }
.table { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-top: 14px; }
.trick, .bidbox, .log { min-height: 96px; border: 1px solid #303944; background: #121820; border-radius: 8px; padding: 12px; }
.trick { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.trick .card { width: 104px; }
.card small { display: block; margin-top: 6px; font-weight: 600; font-size: 11px; }
.hand { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 10px; }
.card { min-height: 118px; border-radius: 8px; border: 1px solid #45515f; background: #f8fafc; color: #111827; padding: 10px; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 800; }
.card.red { color: #b91c1c; }
.card.joker { background: #f4c542; }
.card.playable { box-shadow: 0 0 0 2px #22c55e inset; }
.bidgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.bidgrid button { padding: 8px; }
.log { display: grid; gap: 4px; color: #cbd5e1; max-height: 190px; overflow: auto; font-size: 14px; }
.room-social { margin-top: 16px; }
.room-music { margin-top: 16px; }
.room-video { margin-top: 16px; }
.video-controls { display: flex; align-items: center; gap: 7px; }
.video-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.video-tile { position: relative; aspect-ratio: 16 / 9; min-width: 0; overflow: hidden; border: 1px solid #303944; border-radius: 8px; background: #080b0e; }
.video-tile video { width: 100%; height: 100%; display: block; object-fit: cover; }
.video-tile span { position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: rgb(8 11 14 / 78%); color: #eef3f7; border-radius: 4px; padding: 4px 7px; font-size: 12px; }
.music-controls { display: flex; align-items: center; gap: 7px; }
.music-controls input[type="range"] { width: 110px; padding: 0; }
.music-now { min-height: 52px; display: grid; align-content: center; border-left: 3px solid #f4c542; padding: 8px 12px; background: #151b22; }
.music-now strong { display: block; }
.music-now span { color: #94a3b8; font-size: 13px; }
.music-queue { display: grid; gap: 5px; margin-top: 9px; }
.music-queue div { display: flex; justify-content: space-between; gap: 12px; color: #aebccd; font-size: 13px; border-bottom: 1px solid #252e38; padding: 6px 0; }
.social-feed { min-height: 72px; max-height: 160px; overflow: auto; display: grid; align-content: start; gap: 6px; border: 1px solid #303944; background: #121820; border-radius: 8px; padding: 10px; }
.social-message { display: flex; gap: 8px; align-items: baseline; font-size: 14px; }
.social-message strong { color: #f4c542; white-space: nowrap; }
.social-message span { color: #dbe5ee; overflow-wrap: anywhere; }
.social-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.social-actions button { padding: 8px 10px; background: #1f2933; color: #e2e8f0; border: 1px solid #3c4652; }
.social-actions.emoji-actions button { min-width: 42px; font-size: 20px; line-height: 1; }
.communication-menu { position: relative; margin-top: 8px; border: 1px solid var(--border); background: var(--surface); border-radius: 8px; padding: 9px; }
.segmented-control { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; border-bottom: 1px solid var(--border-soft); padding-bottom: 8px; }
.segmented-control button { min-height: 38px; padding: 7px 9px; background: transparent; color: var(--muted); border: 1px solid transparent; }
.segmented-control button.selected { color: var(--text); border-color: var(--border); background: var(--surface-strong); }
.communication-content { min-height: 48px; }
dialog { width: min(560px, calc(100% - 28px)); border: 1px solid #45515f; border-radius: 8px; background: #151b22; color: #eef3f7; padding: 0; }
dialog::backdrop { background: rgb(5 8 12 / 75%); }
.dialog-form { display: grid; gap: 14px; padding: 18px; }
.dialog-form h2 { margin: 0; }
.dialog-form textarea { min-height: 110px; }
#howToPlayDialog { width: min(760px, calc(100% - 28px)); }
.onboarding-dialog { gap: 18px; }
.eyebrow { display: block; margin-bottom: 5px; color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.onboarding-lead { margin: 0; color: var(--text); font-size: 17px; line-height: 1.5; }
.onboarding-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.onboarding-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-strong); padding: 12px; }
.onboarding-steps li:last-child { grid-column: 1 / -1; }
.onboarding-steps strong { display: block; margin-bottom: 4px; }
.onboarding-steps p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.step-number { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: var(--accent); color: var(--accent-text); font-weight: 900; }
#adDialog { width: min(760px, calc(100% - 28px)); }
.ad-campaign-card { display: grid; gap: 5px; align-content: start; }
.ad-media { width: 100%; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: #080b0e; }
.ad-media img, .ad-media video { width: 100%; height: 100%; display: block; object-fit: contain; }
.ad-timer { min-height: 28px; color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; }
.ad-link { color: var(--text); text-align: center; }
.tournament-prize-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.tournament-prize-grid .mini-card { display: grid; gap: 9px; }
.tournament-card { display: grid; gap: 7px; align-content: start; }
.tournament-card .card-actions { margin-top: auto; }
details { margin-top: 10px; color: #aebccd; }
details summary { cursor: pointer; }
details pre { max-height: 190px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; color: #cbd5e1; font: 12px/1.45 Consolas, monospace; }
.choicebar, .joker-choice { border: 1px solid #45515f; background: #151b22; border-radius: 8px; padding: 12px; margin: 14px 0; }
.violation-notice { display: flex; align-items: center; gap: 14px; border: 1px solid #b45309; background: #261b12; border-radius: 8px; padding: 12px; margin: 14px 0; }
.violation-notice .card { width: 82px; min-height: 96px; flex: 0 0 82px; }
.violation-notice strong { color: #fbbf24; }
.choicebar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.choicebar strong { margin-right: 8px; }
.joker-choice { display: grid; gap: 8px; }
.joker-row { display: grid; grid-template-columns: minmax(150px, 1.5fr) repeat(4, 1fr); gap: 8px; align-items: center; }
.joker-row button { min-width: 0; padding: 10px 6px; }
.settings-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: end; margin-bottom: 12px; }
.effect-overlay { position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0; background: rgb(190 16 35 / 48%); box-shadow: inset 0 0 42px 14px rgb(255 28 46 / 80%); }
.effect-overlay.effect-active { animation: red-discipline-pulse var(--effect-duration) ease-out both; }
.discipline-shake .app { animation: discipline-shake var(--effect-duration) ease-out both; }
.animations-disabled .effect-overlay.effect-active { animation: none; opacity: .42; }
.animations-disabled .app, .animations-disabled .card { animation: none !important; transition: none !important; }
.card { transition: transform 150ms ease, box-shadow 150ms ease; }
.card.playable:hover { transform: translateY(-4px); }
.hand .card { touch-action: none; user-select: none; -webkit-user-select: none; position: relative; z-index: 1; will-change: transform; }
.hand .card.card-dragging { z-index: 70; cursor: grabbing; box-shadow: 0 18px 38px rgb(0 0 0 / 48%); transition: none; }
.hand .card.card-returning { z-index: 70; transition: transform 180ms cubic-bezier(.2, .8, .3, 1), box-shadow 180ms ease; }
.hand .card.card-drop-accepted { opacity: .65; transform: scale(.92) !important; transition: transform 120ms ease, opacity 120ms ease; }
.trick.drop-target-active { outline: 3px solid var(--accent); outline-offset: 2px; box-shadow: inset 0 0 0 999px rgb(255 255 255 / 5%); }
.violation-table-card { animation: violation-card-return 420ms ease-out both; }
@keyframes violation-card-return {
  0% { transform: scale(.7); opacity: 0; }
  55% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes red-discipline-pulse {
  0%, 100% { opacity: 0; }
  18% { opacity: .78; }
  48% { opacity: .22; }
  72% { opacity: .62; }
}
@keyframes discipline-shake {
  0%, 100% { transform: translate(0, 0); }
  15% { transform: translate(var(--shake-distance), 0); }
  30% { transform: translate(calc(0px - var(--shake-distance)), 2px); }
  48% { transform: translate(var(--shake-distance), -2px); }
  66% { transform: translate(calc(0px - var(--shake-distance)), 0); }
  82% { transform: translate(2px, 0); }
}

body, input, select, textarea { background-color: var(--page); color: var(--text); }
.topbar, .box { border-color: var(--border); }
.tabs button.selected, .tabs button:hover, .ghost, .choicebar, .joker-choice { background: var(--surface); border-color: var(--border); color: var(--text); }
input, select, textarea, .room-row, .mini-card, .player, .music-now { background: var(--surface); border-color: var(--border); color: var(--text); }
.trick, .bidbox, .log, .social-feed { background: var(--surface-strong); border-color: var(--border); }
.trick { background-color: var(--felt); }
.kv > div, .standings > div, .music-queue div { border-color: var(--border-soft); }
button { background: var(--accent); color: var(--accent-text); }
.turn-timer, .social-message strong { color: var(--accent); }
.player.active { outline-color: var(--accent); }
.music-now { border-left-color: var(--accent); }
.card.joker { background: var(--accent); }
@media (max-width: 760px) {
  .panel, .split, .table, .players, .grid-form, .tournament-prize-grid { grid-template-columns: 1fr; }
  .app { padding: 14px; }
  .card { min-height: 92px; }
  .topbar { align-items: flex-start; flex-direction: column; }
  .tabs { justify-content: flex-start; }
  .joker-row { grid-template-columns: repeat(2, 1fr); }
  .joker-row strong { grid-column: 1 / -1; }
  .room-row { grid-template-columns: 1fr auto; }
  .room-row > div:first-child { grid-column: 1 / -1; }
  .video-grid { grid-template-columns: 1fr; }
  .onboarding-steps { grid-template-columns: 1fr; }
  .onboarding-steps li:last-child { grid-column: auto; }
}

/* Желания и Честь Джокера: самостоятельный премиальный вертикальный модуль. */
.zuefa-desire-bridge { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-top: 14px; padding: 12px; border: 1px solid rgb(226 188 85 / 22%); border-radius: 16px; background: linear-gradient(135deg, rgb(210 169 62 / 10%), rgb(255 255 255 / 3%)); }
.zuefa-desire-bridge > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: #f1d375; background: #1d4634; font-size: 23px; }
.zuefa-desire-bridge strong, .zuefa-desire-bridge small { display: block; }
.zuefa-desire-bridge small { margin-top: 3px; color: #93a99d; }
.zuefa-desire-bridge.waiting { opacity: .8; }
.desire-center, .desire-detail, .desire-composer { margin-bottom: 16px; animation: desirePanelIn .28s ease both; }
.desire-honor-card { position: relative; display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 16px; align-items: center; overflow: hidden; margin-bottom: 17px; padding: 18px; border: 1px solid rgb(233 197 100 / 25%); border-radius: 20px; background: radial-gradient(circle at 10% 0, rgb(234 198 99 / 17%), transparent 34%), linear-gradient(145deg, #183c2c, #0d251b); box-shadow: 0 16px 34px rgb(0 0 0 / 18%); }
.desire-honor-card::after { content: ""; position: absolute; inset: 0; transform: translateX(-120%); background: linear-gradient(100deg, transparent 35%, rgb(255 241 184 / 7%), transparent 65%); animation: desireSheen 5s ease-in-out infinite; pointer-events: none; }
.desire-honor-card > span { display: grid; place-items: center; width: 68px; height: 68px; border: 1px solid rgb(244 211 119 / 30%); border-radius: 22px; color: #f3d67e; background: rgb(225 183 72 / 10%); font-size: 34px; }
.desire-honor-card small, .desire-honor-card strong, .desire-honor-card p { display: block; margin: 0; }
.desire-honor-card small { color: #cfb55f; letter-spacing: .12em; text-transform: uppercase; }
.desire-honor-card strong { color: #f5d97e; font: 900 35px/1.05 Georgia, serif; }
.desire-honor-card p { margin-top: 4px; color: #9eb1a7; }
.desire-proposal-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.desire-proposal-card { display: grid !important; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 11px; align-items: center; min-width: 0; padding: 13px !important; border: 1px solid rgb(255 255 255 / 7%) !important; border-radius: 16px !important; text-align: left; background: rgb(255 255 255 / 3%) !important; transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.desire-proposal-card:hover, .desire-proposal-card.selected { transform: translateY(-2px); border-color: rgb(226 188 85 / 38%) !important; background: rgb(43 80 62 / 48%) !important; }
.desire-proposal-card > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: #efd174; background: #193d2d; font-size: 21px; }
.desire-proposal-card div { min-width: 0; }
.desire-proposal-card small, .desire-proposal-card strong, .desire-proposal-card p { display: block; overflow: hidden; margin: 0; text-overflow: ellipsis; white-space: nowrap; }
.desire-proposal-card small, .desire-proposal-card p { color: #8fa69a; font-size: 11px; }
.desire-proposal-card strong { margin: 2px 0; color: #eef3ef; }
.desire-proposal-card i { color: #d8b95e; font-style: normal; font-size: 22px; }
.desire-detail, .desire-composer { padding: 20px; border: 1px solid rgb(229 192 93 / 20%); border-radius: 21px; background: linear-gradient(145deg, rgb(25 57 43 / 94%), rgb(8 28 20 / 97%)); box-shadow: 0 18px 42px rgb(0 0 0 / 22%); }
.desire-detail > header, .desire-composer > header { display: flex; justify-content: space-between; gap: 15px; align-items: start; }
.desire-detail h3, .desire-composer h3 { margin: 3px 0 6px; font-size: clamp(23px, 3vw, 32px); }
.desire-detail header p, .desire-composer header p { max-width: 760px; margin: 0; color: #a3b5ab; }
.desire-detail-people { display: grid; grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); gap: 11px; align-items: center; margin: 17px 0; }
.desire-detail-people article { padding: 12px; border: 1px solid rgb(255 255 255 / 7%); border-radius: 15px; background: rgb(255 255 255 / 3%); }
.desire-detail-people article:last-child { text-align: right; }
.desire-detail-people small, .desire-detail-people strong, .desire-detail-people span { display: block; }
.desire-detail-people small { color: #8ca297; }
.desire-detail-people span, .desire-detail-people > i { color: #d5b65d; font-style: normal; }
.desire-detail-people > i { text-align: center; font-size: 24px; }
.desire-status-line { display: flex; justify-content: space-between; gap: 10px; padding: 10px 13px; border-radius: 13px; color: #e9cb70; background: rgb(213 173 67 / 8%); }
.desire-status-line small { color: #9db0a6; }
.desire-money-note { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; margin-top: 10px; padding: 11px; border: 1px solid rgb(218 180 77 / 15%); border-radius: 14px; background: rgb(0 0 0 / 12%); }
.desire-money-note > span { display: grid; place-items: center; color: #e4c466; font-size: 21px; }
.desire-money-note p, .desire-dispute-note p { margin: 3px 0 0; color: #9eb1a7; }
.desire-dispute-note { margin-top: 10px; padding: 12px; border: 1px solid rgb(203 111 84 / 23%); border-radius: 14px; background: rgb(111 42 31 / 12%); }
.desire-dispute-note small { color: #cfb29f; }
.desire-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.desire-catalog-grid { display: grid; gap: 13px; margin-top: 17px; }
.desire-catalog-grid > section { padding: 14px; border: 1px solid rgb(255 255 255 / 7%); border-radius: 17px; background: rgb(255 255 255 / 2.5%); }
.desire-catalog-grid h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: #e9ce76; font-size: 17px; }
.desire-catalog-grid h4 span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; background: rgb(223 181 71 / 9%); }
.desire-catalog-grid section > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.desire-catalog-grid button { display: grid !important; min-height: 105px; padding: 12px !important; border: 1px solid rgb(255 255 255 / 7%) !important; border-radius: 14px !important; text-align: left; background: rgb(4 23 16 / 46%) !important; }
.desire-catalog-grid button:hover { border-color: rgb(231 194 94 / 36%) !important; }
.desire-catalog-grid button small { margin-top: 4px; color: #95aa9f; }
.desire-catalog-grid button strong { color: #f0d47b; }
.desire-catalog-grid button i { align-self: end; margin-top: 9px; color: #dcbd61; font-style: normal; }
.custom-desire-form { margin-top: 14px; padding: 15px; border: 1px solid rgb(229 191 91 / 20%); border-radius: 17px; background: linear-gradient(135deg, rgb(215 174 66 / 8%), rgb(255 255 255 / 2%)); }
.custom-desire-form > div { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 11px; }
.custom-desire-form > div > span { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 13px; color: #e8c969; background: #1c4433; font-size: 22px; }
.custom-desire-form p { margin: 3px 0; color: #9fb1a7; }
.custom-desire-form small { color: #dbbd65; }
.custom-desire-form textarea { width: 100%; min-height: 88px; margin: 12px 0 9px; resize: vertical; }
.admin-honor-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.admin-honor-rules article { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 11px; align-items: center; padding: 13px; border: 1px solid rgb(222 182 78 / 17%); border-radius: 16px; background: linear-gradient(145deg, rgb(31 63 48 / 70%), rgb(8 27 19 / 76%)); }
.admin-honor-rules article > span { display: grid; place-items: center; width: 53px; height: 53px; border-radius: 15px; color: #f0d176; background: rgb(222 181 72 / 10%); font: 900 24px/1 Georgia, serif; }
.admin-honor-rules p { margin: 3px 0 0; color: #91a79c; font-size: 12px; }
.admin-desire-columns { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(235px, .55fr); gap: 15px; margin-top: 15px; }
.admin-desire-columns > section, .admin-desire-columns > aside, .admin-desire-review-grid > section { padding: 15px; border: 1px solid rgb(255 255 255 / 7%); border-radius: 17px; background: rgb(255 255 255 / 2.5%); }
.admin-desire-columns .compatibility-revision-list article > div { display: grid; gap: 3px; }
.admin-desire-settings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 13px 0; }
.desire-catalog-editor { display: grid; gap: 10px; }
.desire-editor-category { margin-bottom: 10px; padding: 12px; border: 1px solid rgb(223 183 81 / 14%); border-radius: 15px; background: rgb(0 0 0 / 12%); }
.desire-editor-category > header { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 9px; align-items: end; }
.desire-editor-category > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 10px 0; }
.desire-editor-category > div > section { padding: 10px; border: 1px solid rgb(255 255 255 / 6%); border-radius: 13px; background: rgb(255 255 255 / 2%); }
.desire-editor-category textarea { min-height: 72px; resize: vertical; }
.admin-desire-review-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; margin-top: 15px; }
.admin-desire-queue { display: grid; gap: 9px; }
.admin-desire-queue > article { padding: 12px; border: 1px solid rgb(255 255 255 / 7%); border-radius: 14px; background: rgb(0 0 0 / 12%); }
.admin-desire-queue article > header { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; }
.admin-desire-queue article > header > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #eccd70; background: #1c4433; font-size: 21px; }
.admin-desire-queue small, .admin-desire-queue strong { display: block; }
.admin-desire-queue small { color: #8fa59a; }
.admin-desire-queue p { margin: 4px 0; color: #9fb1a8; }
.admin-desire-queue label { margin-top: 10px; }
.admin-desire-queue textarea { min-height: 65px; resize: vertical; }
.admin-desire-queue article > div:last-child { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.admin-desire-empty { display: grid; justify-items: center; padding: 26px; text-align: center; }
.admin-desire-empty span { color: #dfc16a; font-size: 30px; }
.admin-desire-empty p { margin: 4px 0; color: #8fa59a; }
@keyframes desirePanelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes desireSheen { 0%, 65% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

@media (max-width: 1100px) {
  .admin-desire-columns, .admin-desire-review-grid { grid-template-columns: 1fr; }
  .desire-proposal-list { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .zuefa-desire-bridge { grid-template-columns: 42px minmax(0, 1fr); }
  .zuefa-desire-bridge button { grid-column: 1 / -1; }
  .desire-catalog-grid section > div, .desire-editor-category > div, .admin-honor-rules, .admin-desire-settings { grid-template-columns: 1fr; }
  .desire-editor-category > header { grid-template-columns: 1fr; }
  .desire-detail > header, .desire-composer > header { flex-direction: column; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .desire-detail, .desire-composer { padding: 12px 14px; }
  .desire-honor-card { grid-template-columns: 55px minmax(0, 1fr); padding: 11px; }
  .desire-honor-card > span { width: 50px; height: 50px; border-radius: 16px; font-size: 26px; }
  .desire-honor-card strong { font-size: 27px; }
  .desire-catalog-grid { grid-template-columns: repeat(3, minmax(220px, 1fr)); overflow-x: auto; }
  .desire-catalog-grid section > div { grid-template-columns: 1fr; }
  .desire-catalog-grid button { min-height: 88px; }
}
@media (prefers-reduced-motion: reduce) {
  .desire-center, .desire-detail, .desire-composer, .desire-honor-card::after { animation: none !important; }
  .desire-proposal-card:hover { transform: none; }
}

/* Tournament and rating workspaces: screens 12–15. */
.tournament-workspace:not(.hidden),
.rating-workspace:not(.hidden),
.club-workspace:not(.hidden),
.rewards-workspace:not(.hidden),
.catalog-workspace:not(.hidden),
.events-workspace:not(.hidden) {
  min-height: 0;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 205px minmax(0, 1fr);
  gap: 9px;
  overflow: hidden;
  margin-top: 10px;
}
.workspace-section-rail {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  overflow-y: auto;
  border: 1px solid rgb(232 189 88 / 18%);
  border-radius: 18px;
  padding: 12px;
  background: linear-gradient(155deg, rgb(15 36 27 / 98%), rgb(5 17 12 / 98%));
  box-shadow: 0 20px 50px rgb(0 0 0 / 27%);
}
.workspace-section-rail button {
  width: 100%;
  min-height: 64px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  padding: 8px;
  background: transparent;
  box-shadow: none;
  color: #a8bbb1;
  text-align: left;
}
.workspace-section-rail button > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: #e1bd5c; font: 700 18px Georgia, serif; }
.workspace-section-rail button > strong { font-size: 11px; }
.workspace-section-rail button.selected { border-color: #d2ae4f; background: linear-gradient(135deg, #1d6a34, #0c411f); color: #fff3d2; }
.workspace-section-rail button:last-child { margin-top: auto; }

.tournament-workspace > .tournament-hub,
.rating-workspace > .rating-hub,
.club-workspace > .club-hub,
.rewards-workspace > .rewards-hub,
.catalog-workspace > .catalog-hub,
.events-workspace > .events-hub {
  height: 100%;
  min-height: 0;
  margin: 0;
  overflow-y: auto;
  border-radius: 18px;
  padding: 16px;
  scrollbar-width: thin;
}
.tournament-workspace .tournament-heading h2,
.rating-heading h2 { margin-top: 2px; color: #f4dfaa; font: 700 clamp(24px, 2.5vw, 34px)/1.05 Georgia, serif; }
.tournament-workspace .tournament-heading p,
.rating-heading p { max-width: 720px; margin-top: 6px; color: #91a59a; }
.tournament-workspace .tournament-filters,
.rating-filters { margin: 14px 0 11px; border-bottom: 1px solid rgb(232 189 88 / 15%); }
.tournament-workspace .tournament-filters button,
.rating-filters button { min-height: 41px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; box-shadow: none; color: #8fa399; font-size: 11px; }
.tournament-workspace .tournament-filters button.active,
.rating-filters button.active { border-bottom-color: #e2bd5d; background: linear-gradient(0deg, rgb(226 189 93 / 11%), transparent); color: #f5dfaa; }
.tournament-workspace .tournament-summary { margin-bottom: 10px; }
.tournament-workspace .tournament-summary article { border-radius: 10px; padding: 8px 11px; background: rgb(5 20 13 / 67%); }
.tournament-workspace .tournament-summary article > span { width: 30px; height: 30px; flex-basis: 30px; }
.tournament-workspace .tournament-summary strong { font-size: 16px; }

.tournament-workspace .tournament-layout { grid-template-columns: minmax(430px, 1.08fr) minmax(390px, .92fr); gap: 10px; }
.tournament-list-shell { min-width: 0; overflow: hidden; border: 1px solid rgb(232 189 88 / 16%); border-radius: 13px; background: rgb(4 17 11 / 67%); }
.tournament-list-heading { display: grid; grid-template-columns: minmax(0, 1fr) 104px 116px; gap: 10px; border-bottom: 1px solid rgb(232 189 88 / 13%); padding: 8px 12px 8px 68px; color: #71867b; font-size: 8px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.tournament-workspace .tournament-list { gap: 0; }
.tournament-workspace .tournament-row { grid-template-columns: 44px minmax(0, 1fr) 104px 116px; gap: 10px; border: 0; border-bottom: 1px solid rgb(232 189 88 / 10%); border-radius: 0; padding: 11px 12px; background: transparent; }
.tournament-workspace .tournament-row:last-child { border-bottom: 0; }
.tournament-workspace .tournament-row:hover { background: rgb(226 189 93 / 5%); transform: none; }
.tournament-workspace .tournament-row.selected { border-color: rgb(232 189 88 / 10%); background: linear-gradient(90deg, rgb(31 101 51 / 25%), rgb(226 189 93 / 4%)); box-shadow: inset 3px 0 #d9b553; }
.tournament-workspace .tournament-row-icon { width: 42px; height: 42px; border: 1px solid rgb(226 189 93 / 26%); border-radius: 50%; font-size: 21px; }
.tournament-workspace .tournament-row-main > strong { font-size: 13px; }
.tournament-workspace .tournament-row-main > small { font-size: 9px; }
.tournament-row-capacity { display: grid; align-content: center; gap: 4px; }
.tournament-row-capacity > strong { color: #e7d9b4; font-size: 12px; }
.tournament-row-capacity > span { height: 4px; overflow: hidden; border-radius: 999px; background: #1b3025; }
.tournament-row-capacity > span i { width: var(--fill); height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #2f9b59, #e0bb58); }
.tournament-row-capacity > small { color: #71867b; font-size: 8px; }
.tournament-workspace .tournament-row-meta { align-content: center; justify-items: start; max-width: none; text-align: left; }
.tournament-workspace .tournament-row-meta small { font-size: 9px; }
.tournament-workspace .tournament-row-meta span { font-size: 10px; }

.tournament-workspace .tournament-detail { top: 0; border-radius: 13px; background: rgb(4 17 11 / 77%); }
.tournament-workspace .tournament-detail-hero { min-height: 146px; background: radial-gradient(circle at 12% 45%, rgb(236 194 85 / 22%), transparent 28%), linear-gradient(120deg, #18261d, #09130e); }
.tournament-workspace .tournament-detail-hero h3 { color: #f3dfac; font: 700 clamp(20px, 2vw, 27px)/1.05 Georgia, serif; }
.tournament-hero-economy { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 11px; }
.tournament-hero-economy span { display: grid; gap: 2px; }
.tournament-hero-economy small { color: #758b80; font-size: 8px; text-transform: uppercase; }
.tournament-hero-economy b { color: #e9c96f; font-size: 11px; }
.tournament-detail-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--border); margin: 0 17px 14px; }
.tournament-detail-tabs button { min-height: 38px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 7px; background: transparent; box-shadow: none; color: #82978c; font-size: 10px; }
.tournament-detail-tabs button.active { border-bottom-color: #dbb553; color: #efd68f; }
.tournament-detail-page { display: none; }
.tournament-detail-page.active { display: block; }
.tournament-detail-page > section { padding: 0 17px 16px; }
.tournament-about-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.tournament-about-grid > div { min-width: 0; display: grid; gap: 3px; border: 1px solid rgb(232 189 88 / 13%); border-radius: 8px; padding: 8px; background: rgb(19 47 33 / 42%); }
.tournament-about-grid small { color: #71867b; font-size: 8px; text-transform: uppercase; }
.tournament-about-grid strong { overflow: hidden; color: #e9dfc4; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.tournament-participant-list { display: grid; gap: 5px; }
.tournament-participant-list > span { display: grid; grid-template-columns: 22px 26px minmax(0, 1fr) auto; align-items: center; gap: 6px; border-bottom: 1px solid rgb(232 189 88 / 9%); padding: 5px 0; }
.tournament-participant-list > span > b { color: #70867a; font-size: 9px; }
.tournament-participant-list > span > i { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid rgb(226 189 93 / 25%); border-radius: 50%; background: #173224; color: #e2be60; font-size: 10px; font-style: normal; }
.tournament-participant-list > span > strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.tournament-participant-list > span > small { color: #799084; font-size: 8px; }
.tournament-rules-copy p, .tournament-rules-copy li { color: #91a59a; font-size: 11px; line-height: 1.55; }
.tournament-rules-copy ul { margin: 9px 0 0; padding-left: 17px; }

.rating-filters { display: flex; gap: 8px; overflow-x: auto; }
.rating-availability { border: 1px solid rgb(226 189 93 / 24%); border-radius: 10px; margin-bottom: 10px; padding: 11px; background: rgb(226 189 93 / 7%); color: #d7c18a; font-size: 11px; }
.rating-layout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 11px; align-items: start; }
.rating-board, .rating-sidebar > section { border: 1px solid rgb(232 189 88 / 15%); border-radius: 13px; background: rgb(4 17 11 / 67%); }
.rating-podium { min-height: 205px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 8px; padding: 17px 14px 0; background: radial-gradient(circle at 50% 100%, rgb(224 184 82 / 12%), transparent 47%); }
.rating-podium-place { position: relative; min-height: 154px; display: grid; justify-items: center; align-content: center; gap: 4px; border: 1px solid rgb(232 189 88 / 15%); border-bottom: 0; border-radius: 13px 13px 0 0; padding: 13px 8px 18px; background: linear-gradient(180deg, rgb(27 63 43 / 88%), rgb(10 31 20 / 88%)); text-align: center; }
.rating-podium-place.place-1 { min-height: 188px; border-color: rgb(230 191 88 / 44%); background: linear-gradient(180deg, rgb(67 66 31 / 76%), rgb(12 41 24 / 92%)); }
.rating-podium-place.current { box-shadow: inset 0 0 0 1px #d9b553; }
.rating-podium-number { position: absolute; top: 8px; left: 10px; color: #e6c367; font: 700 17px Georgia, serif; }
.rating-podium-avatar, .rating-avatar, .rating-own-avatar { display: grid; place-items: center; overflow: hidden; border: 2px solid #b99338; border-radius: 50%; background: #173624; color: #f0cf75; font-weight: 900; }
.rating-podium-avatar { width: 58px; height: 58px; font-size: 20px; }
.rating-podium-place.place-1 .rating-podium-avatar { width: 70px; height: 70px; }
.rating-podium-avatar img, .rating-avatar img, .rating-own-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rating-podium-place strong { max-width: 100%; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.rating-podium-place > span:not(.rating-podium-avatar):not(.rating-podium-number) { color: #edcf78; font-weight: 900; }
.rating-podium-place small { color: #789084; font-size: 8px; }
.rating-list-heading, .rating-row { display: grid; grid-template-columns: minmax(0, 1fr) 70px 60px 80px; gap: 8px; align-items: center; }
.rating-list-heading { border-top: 1px solid rgb(232 189 88 / 13%); border-bottom: 1px solid rgb(232 189 88 / 13%); padding: 8px 11px; color: #6e8478; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.rating-row { min-height: 48px; border-bottom: 1px solid rgb(232 189 88 / 8%); padding: 7px 11px; }
.rating-row:last-child { border-bottom: 0; }
.rating-row.current { background: linear-gradient(90deg, rgb(34 117 59 / 25%), transparent); }
.rating-row > div { min-width: 0; display: grid; grid-template-columns: 24px 32px minmax(0, 1fr); align-items: center; gap: 6px; }
.rating-row > div > b { color: #8ea097; font-size: 10px; }
.rating-avatar { width: 31px; height: 31px; font-size: 10px; }
.rating-row > div > span { min-width: 0; display: grid; }
.rating-row > div strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.rating-row > div small { color: #72887c; font-size: 8px; }
.rating-row > span { color: #9eb0a6; font-size: 10px; }
.rating-row > strong { color: #e5c367; font-size: 11px; }
.rating-empty { grid-column: 1 / -1; padding: 28px; color: #81958a; text-align: center; }
.rating-sidebar { display: grid; gap: 9px; }
.rating-sidebar > section { padding: 14px; }
.rating-own-place { background: radial-gradient(circle at 100% 0, rgb(229 190 86 / 17%), transparent 42%), rgb(4 17 11 / 72%) !important; }
.rating-own-main { display: grid; grid-template-columns: 45px 44px minmax(0, 1fr); align-items: center; gap: 8px; margin: 11px 0; }
.rating-own-main > strong { color: #edca6b; font: 700 30px Georgia, serif; }
.rating-own-avatar { width: 43px; height: 43px; }
.rating-own-main > span { min-width: 0; display: grid; gap: 2px; }
.rating-own-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rating-own-main small { color: #82978c; font-size: 9px; }
.rating-own-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgb(232 189 88 / 13%); padding-top: 9px; }
.rating-own-stats span { display: grid; justify-items: center; gap: 2px; }
.rating-own-stats b { color: #e7d8ad; font-size: 13px; }
.rating-own-stats small { color: #71867b; font-size: 8px; }
.rating-season-card h3, .rating-rules-card h3 { margin: 5px 0 7px; color: #ead7a4; font: 700 17px Georgia, serif; }
.rating-season-card p, .rating-rules-card p { color: #82978c; font-size: 10px; line-height: 1.5; }
.rating-season-card > div { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid rgb(232 189 88 / 10%); padding: 8px 0; font-size: 9px; }
.rating-season-card > div span { color: #71867b; }
.rating-season-card > div strong { color: #d9c99e; }

@media (max-width: 1100px) {
  .tournament-workspace:not(.hidden), .rating-workspace:not(.hidden), .club-workspace:not(.hidden), .rewards-workspace:not(.hidden), .catalog-workspace:not(.hidden), .events-workspace:not(.hidden) { grid-template-columns: 170px minmax(0, 1fr); }
  .workspace-section-rail { padding: 8px; }
  .workspace-section-rail button { min-height: 52px; grid-template-columns: 29px minmax(0, 1fr); padding: 6px; }
  .workspace-section-rail button > span { width: 28px; height: 28px; }
  .tournament-workspace .tournament-layout { grid-template-columns: 1fr; }
  .tournament-workspace .tournament-detail { position: static; }
  .rating-layout { grid-template-columns: minmax(0, 1fr) 230px; }
}

@media (max-width: 760px) {
  .tournament-workspace:not(.hidden), .rating-workspace:not(.hidden), .club-workspace:not(.hidden), .rewards-workspace:not(.hidden), .catalog-workspace:not(.hidden), .events-workspace:not(.hidden) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 6px; }
  .workspace-section-rail { flex-direction: row; overflow-x: auto; overflow-y: hidden; border-radius: 14px; padding: 6px; }
  .workspace-section-rail button { min-width: 94px; min-height: 42px; grid-template-columns: 22px minmax(0, 1fr); margin: 0 !important; }
  .workspace-section-rail button > span { width: 21px; height: 21px; font-size: 13px; }
  .workspace-section-rail button > strong { font-size: 8px; }
  .tournament-workspace > .tournament-hub, .rating-workspace > .rating-hub, .club-workspace > .club-hub, .rewards-workspace > .rewards-hub, .catalog-workspace > .catalog-hub, .events-workspace > .events-hub { border-radius: 14px; padding: 10px; }
  .tournament-workspace .tournament-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tournament-workspace .tournament-summary article { display: grid; justify-items: center; gap: 4px; padding: 7px 4px; text-align: center; }
  .tournament-workspace .tournament-summary article > span { display: none; }
  .tournament-list-heading { display: none; }
  .tournament-workspace .tournament-row { grid-template-columns: 38px minmax(0, 1fr) auto; }
  .tournament-workspace .tournament-row-icon { width: 36px; height: 36px; }
  .tournament-row-capacity { display: none; }
  .tournament-workspace .tournament-row-meta { grid-column: 3; grid-template-columns: 1fr; }
  .tournament-about-grid { grid-template-columns: 1fr; }
  .tournament-participant-list > span { grid-template-columns: 22px 26px minmax(0, 1fr); }
  .tournament-participant-list > span > small { display: none; }
  .rating-layout { grid-template-columns: 1fr; }
  .rating-podium { min-height: 170px; padding-inline: 7px; }
  .rating-podium-place { min-height: 126px; padding-inline: 4px; }
  .rating-podium-place.place-1 { min-height: 153px; }
  .rating-podium-avatar { width: 44px; height: 44px; }
  .rating-podium-place.place-1 .rating-podium-avatar { width: 54px; height: 54px; }
  .rating-list-heading, .rating-row { grid-template-columns: minmax(0, 1fr) 48px 64px; }
  .rating-list-heading span:nth-child(3), .rating-row > span:nth-of-type(2) { display: none; }
}
@media (max-height: 600px) and (orientation: landscape) {
  .app { width: 100%; padding: 8px 10px; }
  .topbar { min-height: 48px; padding-bottom: 6px; flex-direction: row; align-items: center; }
  .topbar h1 { font-size: 22px; margin: 0; }
  .topbar p { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; }
  .tabs button { padding: 7px 8px; white-space: nowrap; }
  .view { margin-top: 8px; }
  h2 { margin: 8px 0 6px; font-size: 15px; }
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .players { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .player { min-height: 72px; padding: 8px; }
  .player strong { margin-bottom: 4px; font-size: 13px; }
  .meta { font-size: 11px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .roomline { margin: 8px 0; gap: 7px; }
  .roomline button { padding: 7px 9px; }
  .table { grid-template-columns: minmax(0, 2fr) minmax(170px, .8fr); gap: 8px; margin-top: 7px; }
  .trick, .bidbox { min-height: 82px; padding: 7px; }
  .trick .card { width: 64px; min-height: 74px; }
  .hand { grid-template-columns: repeat(9, minmax(48px, 1fr)); gap: 5px; }
  .hand .card { min-height: 76px; padding: 5px; }
  .settings-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Generated card deck v1. */
.card { position: relative; overflow: hidden; padding: 0 !important; background: #f5ecd7 !important; }
.card-art { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; display: block; border-radius: inherit; object-fit: fill; pointer-events: none; user-select: none; }
.game-active .hand .card { aspect-ratio: 5 / 8; min-height: 0 !important; height: 101px; border: 0; background: transparent !important; }
.game-active .played-card .card { aspect-ratio: 5 / 8; min-height: 0 !important; height: 98px; border: 0; background: transparent !important; }
.game-active .trump-upcard { aspect-ratio: 5 / 8; min-height: 0 !important; height: 67px; border: 0; background: transparent !important; }
.last-trick-entry .card { aspect-ratio: 5 / 8; min-height: 0 !important; height: 99px; border: 0; background: transparent !important; }
.violation-table-card .card-art, .violation-notice .card-art { filter: drop-shadow(0 8px 13px rgb(0 0 0 / 35%)); }

/* Authoritative club navigation: one left profile drawer and one right section drawer. */
.main-menu-heading { display: none; }
.profile-menu {
  left: 0 !important;
  right: auto !important;
  border-right: 1px solid rgb(235 194 101 / 42%) !important;
  border-left: 0 !important;
  animation-name: profile-drawer-enter-left !important;
}
@keyframes profile-drawer-enter-left {
  from { opacity: 0; transform: translateX(-100%); }
  to { opacity: 1; transform: none; }
}
.profile-admin-shortcut,
.lobby-admin-shortcut {
  border-color: rgb(238 198 98 / 44%) !important;
  background: linear-gradient(135deg, rgb(125 35 55 / 56%), rgb(164 112 34 / 24%)) !important;
  color: #ffe9aa !important;
}
.profile-admin-shortcut .lobby-feature-icon,
.lobby-admin-shortcut .lobby-feature-icon { color: #ffe49a; }
.app-view-rail nav { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }

@media (max-width: 1200px) {
  body.menu-drawer-open::after {
    content: "";
    position: fixed;
    z-index: 700;
    inset: 0;
    background: rgb(0 0 0 / 66%);
    backdrop-filter: blur(4px);
  }
  body.menu-drawer-open .topbar { z-index: 710; pointer-events: none; }
  body.menu-drawer-open #mainMenuPanel { pointer-events: auto; }
  .main-menu-panel,
  .main-menu-panel.open {
    position: fixed !important;
    z-index: 720 !important;
    inset: 0 0 0 auto !important;
    width: min(390px, 92vw) !important;
    height: 100vh !important;
    height: 100dvh !important;
    align-content: start;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    overflow-y: auto !important;
    border: 0 !important;
    border-left: 1px solid rgb(235 194 101 / 42%) !important;
    border-radius: 0 !important;
    padding: 16px !important;
    background: radial-gradient(circle at 15% 8%, rgb(145 31 56 / 30%), transparent 30%), linear-gradient(155deg, #12291e, #07130f 58%, #17090d) !important;
    box-shadow: -28px 0 80px rgb(0 0 0 / 70%) !important;
  }
  .main-menu-panel:not(.open) { display: none !important; }
  .main-menu-panel.open { display: grid !important; animation: main-menu-drawer-enter 310ms cubic-bezier(.2,.78,.2,1) both; }
  @keyframes main-menu-drawer-enter {
    from { opacity: 0; transform: translateX(100%); }
    to { opacity: 1; transform: none; }
  }
  .main-menu-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 5px;
    border-bottom: 1px solid rgb(235 194 101 / 22%);
    padding-bottom: 12px;
    color: #f6dda1;
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .main-menu-heading button { width: auto !important; min-height: 36px !important; }
  .main-menu-panel > button:not(.hidden) {
    min-height: 48px;
    display: flex;
    align-items: center;
    border: 1px solid rgb(235 194 101 / 18%);
    border-radius: 13px;
    padding: 9px 12px;
    background: linear-gradient(145deg, rgb(255 255 255 / 6%), rgb(0 0 0 / 11%));
    color: #fff5d8;
  }
  .main-menu-panel #adminTab:not(.hidden) {
    border-color: rgb(238 198 98 / 44%);
    background: linear-gradient(135deg, rgb(125 35 55 / 56%), rgb(164 112 34 / 24%));
    color: #ffe9aa;
  }
}

@media (max-height: 600px) and (orientation: landscape) {
  .profile-menu,
  .main-menu-panel,
  .main-menu-panel.open { width: min(360px, 46vw) !important; padding: 9px !important; }
  .profile-menu { gap: 6px; }
  .profile-drawer-heading,
  .main-menu-heading { padding-bottom: 7px; font-size: 10px; }
  .profile-menu-summary { min-height: 58px; padding: 8px 11px; }
  .profile-menu-summary strong { font-size: 17px; }
  .profile-menu-summary span { font-size: 10px; }
  .profile-menu .profile-drawer-nav { gap: 4px; }
  .profile-menu .profile-drawer-nav button { min-height: 42px; grid-template-columns: 28px minmax(0,1fr) 13px; padding: 5px 7px; }
  .profile-drawer-nav button > span { font-size: 17px; }
  .profile-drawer-nav strong { font-size: 12px; }
  .profile-drawer-nav small { font-size: 8px; }
  .main-menu-panel > button:not(.hidden) { min-height: 37px; padding: 6px 9px; font-size: 10px; }
}

/* Final action placement override: emoji in the corner, quick messages beside it. */
.game-active :is(#emojiPickerToggle,[data-game-role="emojiPickerToggle"]) { right: 9px !important; }
.game-active :is(#quickChatToggle,[data-game-role="quickChatToggle"]) { right: 65px !important; }
@media (max-height: 600px) and (orientation: landscape) {
  .game-active :is(#emojiPickerToggle,[data-game-role="emojiPickerToggle"]) { right: 9px !important; }
  .game-active :is(#quickChatToggle,[data-game-role="quickChatToggle"]) { right: 59px !important; }
}

/* Score ledger v2: narrow bid cells and readable block calculations. */
.game-active .score-ledger col.score-number-column { width: 30px; }
.game-active .score-ledger col.score-order-column { width: 36px; }
.game-active .score-ledger col.score-points-column { width: auto; }
.game-active .score-ledger .score-order { width: 36px !important; overflow: hidden; padding-inline: 1px !important; font-size: 9px !important; line-height: 1; white-space: nowrap; }
.game-active .score-ledger .score-prize-status { width: 36px !important; padding: 1px !important; }
.game-active .score-ledger .score-prize-status span { width: 20px; height: 20px; display: inline-grid; place-items: center; border-radius: 50%; color: #fff; font: 900 14px/1 Inter, Segoe UI, sans-serif; text-shadow: 0 1px 2px rgb(0 0 0 / 35%); }
.game-active .score-ledger .score-prize-won { background: #14884f; box-shadow: inset 0 0 0 1px #72d49e, 0 1px 4px rgb(15 91 54 / 28%); }
.game-active .score-ledger .score-prize-missed { background: #b62d42; box-shadow: inset 0 0 0 1px #ef8c9b, 0 1px 4px rgb(120 23 39 / 28%); }
.game-active .score-ledger-total .score-summary-sum,
.game-active .score-ledger-prize .score-cumulative-sum { background: #eadfc5 !important; }
.game-active .score-ledger-total .score-summary-sum strong { color: #0c4b37 !important; font-weight: 950; text-shadow: none !important; }
.game-active .score-ledger-prize .score-cumulative-sum strong { color: #641b2d !important; font-weight: 950; text-shadow: none !important; }
.game-active .score-ledger-total .score-summary-sum sup,
.game-active .score-ledger-prize .score-cumulative-sum sup { color: #8b263a !important; font-weight: 900; text-shadow: none !important; }

/* Video-reference pass: compact native-game table, ledger and communication overlays. */
.game-active :is(#game,[data-game-role="game"]) { grid-template-rows: 0 minmax(0, 1fr); font-family: var(--club-font, Georgia, serif); }
.game-active .game-hud { position: absolute; z-index: 340; inset: 0; min-height: 0; display: block; padding: 0; border: 0; background: transparent; box-shadow: none; pointer-events: none; }
.game-active .game-hud-primary,
.game-active .game-hud-status { display: none !important; }
.game-active .game-hud-actions { display: contents; pointer-events: auto; }
.game-active .game-hud-actions .icon-art-button {
  position: fixed;
  z-index: 350;
  width: 50px;
  min-width: 50px;
  height: 50px;
  min-height: 50px;
  display: grid !important;
  place-items: center;
  overflow: hidden;
  border: 0;
  border-radius: 15px;
  padding: 0;
  background: rgb(7 18 14 / 74%);
  box-shadow: 0 7px 20px rgb(0 0 0 / 38%);
  touch-action: none;
}
.game-active .icon-art-button img { width: 100%; height: 100%; display: block; object-fit: cover; }
.game-active .icon-art-button:active { transform: scale(.93); filter: brightness(1.12); }
.game-active .icon-art-button:disabled { opacity: .38; filter: grayscale(.55); }
.game-active :is(#gameToolsToggle,[data-game-role="gameToolsToggle"]) { left: 9px; right: auto; top: 9px; bottom: auto; }
.game-active :is(#quickChatToggle,[data-game-role="quickChatToggle"]) { right: 9px; top: 9px; }
.game-active :is(#emojiPickerToggle,[data-game-role="emojiPickerToggle"]) { right: 65px; top: 9px; }
.game-active :is(#scoreSheetToggle,[data-game-role="scoreSheetToggle"]) { left: auto; right: 9px; bottom: 9px; }
.game-active :is(#lastTrickHold,[data-game-role="lastTrickHold"]) { right: 65px; bottom: 9px; }
.game-active #copyGameCodeBtn,
.game-active #nextBtn { display: none !important; }
.game-active .game-arena { grid-row: 2; background: #030d09; }
.game-active .felt-table {
  inset: 5px;
  border: 8px solid #402718;
  border-radius: 35px;
  background: radial-gradient(ellipse at 50% 42%, rgb(81 165 116 / 28%), transparent 61%), repeating-linear-gradient(30deg, rgb(255 255 255 / 1.2%) 0 1px, transparent 1px 5px), #075139;
  box-shadow: inset 0 0 0 2px #bd9150, inset 0 0 0 8px #28170f, inset 0 0 95px rgb(0 0 0 / 46%), 0 18px 35px rgb(0 0 0 / 56%);
}
.game-active .felt-table::before { inset: 20%; opacity: .075; filter: sepia(1) saturate(.7) brightness(1.65); }
.game-active .trump-indicator {
  left: auto;
  right: 12px;
  top: 70px;
  width: 50px;
  min-width: 50px;
  min-height: 66px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(235 196 99 / 45%);
  border-radius: 12px;
  padding: 3px;
  background: rgb(18 31 25 / 92%);
  box-shadow: 0 9px 22px rgb(0 0 0 / 42%);
}
.game-active .trump-indicator > div:not(.card) { display: none; }
.game-active .trump-upcard { width: 42px; min-height: 58px; flex-basis: 42px; border-radius: 7px; }
.game-active .trump-upcard .card-center { font-size: 20px; }
.game-active .trump-upcard .card-corner { left: 4px; top: 3px; font-size: 10px; }
.game-active .trump-upcard .card-caption { display: none; }
.game-active .trump-suit-mark { width: 42px; height: 58px; flex-basis: 42px; font-size: 20px; border-radius: 8px; }
.game-active .game-seat {
  --turn-progress: 1;
  --turn-color: #2bd06f;
  width: 124px;
  min-height: 58px;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: auto;
  gap: 7px;
  border: 1px solid rgb(229 191 97 / 23%);
  border-radius: 17px;
  padding: 5px 7px 5px 5px;
  background: linear-gradient(145deg, rgb(25 43 34 / 96%), rgb(5 15 11 / 96%));
  box-shadow: 0 9px 23px rgb(0 0 0 / 38%);
}
.game-active .game-seat.active { border-color: rgb(229 191 97 / 28%); box-shadow: 0 9px 23px rgb(0 0 0 / 38%); }
.game-active .game-seat.active::after { display: none; }
.game-active .seat-avatar {
  position: relative;
  z-index: 1;
  width: 46px;
  height: 46px;
  overflow: visible;
  border: 2px solid #9c783c;
  border-radius: 13px;
  background: linear-gradient(145deg, #ddb65b, #71451f);
  font-size: 17px;
}
.game-active .seat-avatar img { width: 100%; height: 100%; display: block; overflow: hidden; border-radius: 10px; object-fit: cover; }
.game-active .game-seat.active .seat-avatar::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -6px;
  border-radius: 17px;
  background: conic-gradient(var(--turn-color, #2bd06f) calc(var(--turn-progress) * 1turn), rgb(255 255 255 / 11%) 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 3px;
  filter: drop-shadow(0 0 4px rgb(245 204 94 / 55%));
}
.game-active .seat-copy { gap: 3px; }
.game-active .seat-copy > strong { color: #fff0c7; font-size: 10px; }
.game-active .seat-copy > small { display: none; }
.game-active .seat-score { display: flex; gap: 4px; margin: 0; font-size: 9px; }
.game-active .seat-score > span { min-width: 23px; border: 1px solid rgb(239 201 106 / 20%); border-radius: 7px; padding: 2px 4px; background: rgb(0 0 0 / 24%); text-align: center; }
.game-active .seat-score b { color: #f7d981; }
.game-active .seat-technars b { color: #ff9b9f; font-size: 8px; }
.game-active .seat-cards { display: none !important; }
.game-active .seat-bid-bubble {
  position: absolute;
  z-index: 5;
  left: 20px;
  top: -29px;
  display: grid;
  min-width: 31px;
  height: 27px;
  place-items: center;
  border: 2px solid #f4dfaa;
  border-radius: 50% 50% 50% 12%;
  background: #fffaf0;
  box-shadow: 0 5px 13px rgb(0 0 0 / 34%);
  color: #381823;
  font: 900 12px/1 var(--club-font, Georgia, serif);
}
.game-active .seat-bid-bubble.bid-just-set { animation: bidFromAvatar 650ms cubic-bezier(.18,.89,.32,1.28); }
@keyframes bidFromAvatar { from { opacity: 0; transform: translateY(24px) scale(.35); } 65% { opacity: 1; transform: translateY(-3px) scale(1.12); } to { transform: none; } }
.game-active .seat-bottom { left: 13px; bottom: 12px; transform: none; }
.game-active .seat-top { left: 50%; top: 12px; transform: translateX(-50%); }
.game-active .seat-left { left: 13px; top: 40%; transform: translateY(-50%); }
.game-active .seat-right { right: 13px; top: 40%; transform: translateY(-50%); }
.game-active .seat-top-left { left: 20%; top: 12px; }
.game-active .seat-top-right { right: 20%; top: 12px; }
.game-active .dealer-chip { left: -5px; top: -7px; }
.game-active .hand-panel { left: 145px; right: 130px; bottom: 3px; height: 112px; }
.game-active .hand .card { min-width: 48px; max-width: 72px; min-height: 101px; }
.game-active .trick { width: min(68%, 510px); min-height: 108px; }
.game-active .played-card .card { width: 61px; min-height: 86px; }
.game-active .bid-panel.action-required {
  left: 50%;
  top: 50%;
  width: min(355px, calc(100% - 120px));
  border: 2px solid #b99a62;
  border-radius: 17px;
  padding: 9px;
  background: linear-gradient(160deg, #fffdf7, #e9e1cf);
  box-shadow: 0 18px 55px rgb(0 0 0 / 57%), inset 0 0 0 1px #fff;
}
.game-active .bid-panel .game-section-title { display: none; }
.game-active .bidbox { min-height: 0; }
.game-active .bidgrid { display: grid; grid-template-columns: repeat(5, minmax(42px, 1fr)); gap: 6px; }
.game-active .bidgrid button { width: auto; min-height: 38px; border: 1px solid #bfae89; border-radius: 10px; background: #fffefa; box-shadow: none; color: #321a20; font: 900 15px/1 var(--club-font, Georgia, serif); }
.game-active .bidgrid button:first-child { color: #8b2035; font-size: 11px; }

.score-sheet-panel {
  position: fixed !important;
  z-index: 700 !important;
  inset: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 12px 54px 12px 12px;
  background: rgb(0 7 5 / 72%) !important;
  box-shadow: none !important;
  backdrop-filter: blur(7px);
}
.score-sheet-card {
  position: relative;
  width: min(780px, calc(100vw - 78px));
  max-width: none;
  height: min(94dvh, 780px);
  max-height: none;
  overflow: auto;
  border: 3px solid #8d6c35;
  border-radius: 18px;
  padding: 10px;
  background: radial-gradient(circle at 50% 0%, rgb(255 255 255 / 70%), transparent 29%), repeating-linear-gradient(0deg, rgb(78 55 25 / 2%) 0 1px, transparent 1px 4px), #f2ead7;
  box-shadow: inset 0 0 0 2px #dcc48e, 0 25px 70px rgb(0 0 0 / 68%);
}
.score-sheet-close { position: absolute; left: calc(50% + min(390px, calc((100vw - 78px) / 2)) + 10px); top: 18px; width: 39px; min-width: 39px; height: 39px; min-height: 39px; border: 1px solid #e8ca7a; border-radius: 50%; padding: 0; background: #401522; color: #fff1c8; }
.score-sheet-table { overflow: visible; color: #173b2e; font-family: var(--club-font, Georgia, serif); }
.score-sheet-table .score-ledger { width: 100%; min-width: 560px; border-collapse: collapse; border-spacing: 0; table-layout: fixed; text-align: center; }
.score-sheet-table .score-ledger th,
.score-sheet-table .score-ledger td { min-width: 0; height: 27px; border: 1px solid rgb(31 82 61 / 48%); border-radius: 0; padding: 2px 3px; background: rgb(255 253 245 / 45%); color: #173b2e; font-size: 11px; }
.score-sheet-table .score-ledger thead th { position: sticky; z-index: 4; top: 0; height: 42px; border-color: #896a37; background: #e3d5b8; color: #381922; }
.score-sheet-table .score-ledger thead tr:nth-child(2) th { top: 42px; height: 21px; font-size: 8px; }
.score-sheet-table .score-ledger tbody th { position: sticky; z-index: 2; left: 0; width: 28px; background: #e8dcc0; color: #321921; }
.score-player { display: flex; align-items: center; justify-content: center; gap: 5px; }
.score-player i { width: 28px; height: 28px; display: grid; place-items: center; overflow: hidden; border: 1px solid #8f6e34; border-radius: 8px; background: #174333; color: #f6d789; font-style: normal; }
.score-player i img { width: 100%; height: 100%; display: block; object-fit: cover; }
.score-player b { max-width: 80px; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.score-ledger .score-order { width: 28px; color: #7c2639; font-weight: 900; }
.score-ledger .score-points { width: 38px; font-weight: 800; }
.score-ledger .score-exact { background: rgb(75 139 102 / 16%); }
.score-ledger .score-hist { color: #a21c38; background: rgb(164 35 58 / 10%); }
.score-ledger .score-current > * { box-shadow: inset 0 0 0 2px rgb(191 145 54 / 46%); }
.score-ledger .score-ledger-total > *,
.score-ledger .score-ledger-prize > * { height: 24px; border-top: 2px solid #80622f; background: #d8c69f; font-weight: 900; }
.score-ledger .score-ledger-prize > * { border-top-width: 1px; border-bottom: 3px double #765a2e; background: #eadfc5; }
.score-ledger sup { margin-left: 2px; color: #a51f3c; font-size: 7px; }

.last-trick-overlay,
.bot-takeover-overlay {
  position: fixed;
  z-index: 680;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid #b8944f;
  border-radius: 20px;
  padding: 13px 18px;
  background: linear-gradient(155deg, rgb(17 50 37 / 97%), rgb(46 13 23 / 97%));
  box-shadow: 0 24px 70px rgb(0 0 0 / 65%);
  color: #f8e5b4;
  font-family: var(--club-font, Georgia, serif);
}
.last-trick-overlay { min-width: min(520px, calc(100vw - 80px)); pointer-events: none; }
.last-trick-overlay > div:first-child { display: flex; justify-content: space-between; gap: 25px; margin-bottom: 8px; }
.last-trick-overlay span { color: #c8ac68; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.last-trick-cards { display: flex; align-items: end; justify-content: center; gap: 5px; }
.last-trick-entry { display: grid; justify-items: center; gap: 3px; }
.last-trick-entry .card { width: 62px; min-height: 88px; }
.bot-takeover-overlay { width: min(410px, calc(100vw - 70px)); display: grid; justify-items: center; gap: 8px; text-align: center; backdrop-filter: blur(5px); }
.bot-takeover-overlay .bot-takeover-mark { color: #edcc72; font-size: 34px; }
.bot-takeover-overlay strong { font-size: 20px; }
.bot-takeover-overlay span { color: #c5d0c8; font: 500 11px/1.4 Inter, Segoe UI, sans-serif; }
.bot-takeover-overlay button { margin-top: 4px; }

.game-active .game-extras[open] { inset: 0; width: auto; display: flex !important; align-items: center; justify-content: center; overflow: hidden; border: 0; border-radius: 0; padding: 45px 12px 12px; background: rgb(0 7 5 / 72%); backdrop-filter: blur(7px); }
.game-active .game-extras[open] > summary { position: absolute; z-index: 5; left: 14px; top: 12px; border: 1px solid rgb(235 197 99 / 38%); border-radius: 11px; padding: 8px 12px; background: #3b1420; color: #f5dea4; font: 800 11px/1 var(--club-font, Georgia, serif); }
.game-active .game-extras[open] .room-video,
.game-active .game-extras[open] .room-music { display: none !important; }
.game-active .game-extras[open] .room-social { width: min(600px, calc(100vw - 35px)); max-height: calc(100dvh - 72px); display: grid; grid-template-columns: minmax(125px, .36fr) minmax(0, 1fr); gap: 8px; overflow: auto; border: 2px solid #95723b; border-radius: 19px; padding: 12px; background: linear-gradient(145deg, #112d22, #35121d); box-shadow: 0 24px 65px rgb(0 0 0 / 60%); }
.game-active .room-social .section-heading { grid-column: 1 / -1; }
.game-active .room-social .section-heading h2 { color: #f6dda0; font: 800 18px/1 var(--club-font, Georgia, serif); }
.game-active .room-social #communicationMenuToggle { display: none; }
.game-active .social-feed { min-height: 170px; max-height: 250px; overflow-y: auto; border: 1px solid rgb(235 197 99 / 16%); border-radius: 12px; padding: 8px; background: rgb(0 0 0 / 18%); }
.game-active .communication-menu { min-width: 0; display: grid; gap: 8px; }
.game-active .communication-menu.hidden { display: none; }
.game-active .room-social.quick-messages-only { grid-template-columns: minmax(0, 1fr); }
.game-active .room-social.quick-messages-only .communication-menu { grid-column: 1 / -1; }
.game-active .segmented-control { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.game-active .segmented-control button { min-height: 34px; padding: 5px; font-size: 9px; }
.game-active .social-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.game-active .social-actions button { min-height: 38px; padding: 5px; font-size: 9px; }
.game-active .emoji-actions { grid-template-columns: repeat(5, minmax(42px, 1fr)); }

@media (min-width: 760px) {
  :is(#home,[data-game-role="home"]):not(.game-active) .lobby-shell { grid-template-columns: minmax(245px, .58fr) minmax(0, 1.42fr); }
  :is(#home,[data-game-role="home"]):not(.game-active) .lobby-profile-card { grid-column: 1; grid-row: 1; }
  :is(#home,[data-game-role="home"]):not(.game-active) .lobby-hero { grid-column: 2; grid-row: 1; }
  .profile-menu { left: 0; right: auto; }
}

@media (max-height: 600px) and (orientation: landscape) {
  .game-active .felt-table { inset: 4px; border-radius: 28px; }
  .game-active .game-seat { width: 112px; min-height: 51px; grid-template-columns: 41px minmax(0, 1fr); padding: 4px; }
  .game-active .seat-avatar { width: 39px; height: 39px; border-radius: 11px; }
  .game-active .seat-avatar img { border-radius: 8px; }
  .game-active .seat-copy > strong { font-size: 9px; }
  .game-active .seat-score { font-size: 8px; }
  .game-active .seat-bottom { bottom: 8px; }
  .game-active .seat-top { top: 8px; }
  .game-active .seat-left, .game-active .seat-right { top: 39%; }
  .game-active .hand-panel { left: 128px; right: 122px; height: 98px; }
  .game-active .hand .card { min-width: 43px; max-width: 64px; min-height: 88px; }
  .game-active .trump-indicator { right: 10px; top: 67px; width: 44px; min-width: 44px; min-height: 58px; }
  .game-active .trump-upcard { width: 37px; min-height: 51px; }
  .game-active .game-hud-actions .icon-art-button { width: 45px; min-width: 45px; height: 45px; min-height: 45px; border-radius: 13px; }
  .game-active :is(#emojiPickerToggle,[data-game-role="emojiPickerToggle"]), .game-active :is(#lastTrickHold,[data-game-role="lastTrickHold"]) { right: 59px; }
  .score-sheet-card { height: calc(100dvh - 14px); padding: 7px; }
  .score-sheet-table .score-ledger th, .score-sheet-table .score-ledger td { height: 20px; padding: 1px 2px; font-size: 9px; }
  .score-sheet-table .score-ledger thead th { height: 34px; }
  .score-sheet-table .score-ledger thead tr:nth-child(2) th { top: 34px; height: 17px; }
  .score-player i { width: 23px; height: 23px; border-radius: 6px; }
  .score-player b { font-size: 8px; }
  .game-active .game-extras[open] .room-social { max-height: calc(100dvh - 58px); }
}

/* 2026 premium table pass: one typographic and interaction language. */
:root {
  --club-font: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
}
html, body, button, input, select, textarea, summary {
  font-family: var(--club-font) !important;
}
button, .download-link {
  letter-spacing: .015em;
}
.lobby-panel-close { width: auto; min-width: 86px; border-radius: 999px; }

body.profile-drawer-open::after {
  content: "";
  position: fixed;
  z-index: 700;
  inset: 0;
  background: rgb(0 0 0 / 66%);
  backdrop-filter: blur(4px);
}

/* Floating emoji tray: the right-most top action stays reserved for reactions. */
.game-active :is(#emojiPickerToggle,[data-game-role="emojiPickerToggle"]) { right: 9px !important; }
.game-active :is(#quickChatToggle,[data-game-role="quickChatToggle"]) { right: 65px !important; }

.emoji-picker-panel {
  position: fixed;
  z-index: 690;
  top: 66px;
  right: 9px;
  width: min(350px, calc(100vw - 18px));
  max-height: calc(100dvh - 76px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 9px;
  overflow: hidden;
  border: 2px solid #a17a3d;
  border-radius: 19px;
  padding: 11px;
  background:
    radial-gradient(circle at 88% 0%, rgb(227 185 82 / 18%), transparent 34%),
    linear-gradient(148deg, rgb(16 54 40 / 98%), rgb(55 14 27 / 98%));
  box-shadow: inset 0 0 0 1px rgb(255 228 154 / 16%), 0 22px 60px rgb(0 0 0 / 68%);
  color: #f7e4af;
  backdrop-filter: blur(9px);
}
.emoji-picker-panel.hidden { display: none !important; }
.emoji-picker-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.emoji-picker-heading > div { display: grid; gap: 2px; }
.emoji-picker-heading strong { color: #ffe8aa; font-size: 18px; line-height: 1; }
.emoji-picker-heading small { color: #b9c8bf; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.emoji-picker-heading #closeEmojiPicker { width: 31px; min-width: 31px; height: 31px; min-height: 31px; border-radius: 50%; padding: 0; font-size: 19px; }
.emoji-pack-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; border-radius: 12px; padding: 4px; background: rgb(0 0 0 / 24%); }
.emoji-pack-tabs button { min-height: 34px; border: 1px solid transparent; border-radius: 9px; padding: 6px 8px; background: transparent; color: #aebdb4; font-size: 11px; }
.emoji-pack-tabs button.selected { border-color: rgb(238 201 109 / 46%); background: linear-gradient(145deg, #6e2639, #174b39); color: #ffeba9; box-shadow: inset 0 0 12px rgb(255 218 118 / 8%); }
.emoji-pack-tabs button span { color: #efc85f; }
.emoji-picker-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.emoji-picker-grid.hidden { display: none !important; }
.emoji-picker-item {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgb(239 204 116 / 18%);
  border-radius: 13px;
  padding: 2px;
  background: radial-gradient(circle, rgb(255 255 255 / 8%), rgb(0 0 0 / 18%));
  box-shadow: none;
}
.emoji-picker-item:not(:disabled):hover,
.emoji-picker-item:not(:disabled):focus-visible { border-color: #ebc96f; background: rgb(255 221 128 / 12%); transform: translateY(-2px) scale(1.03); }
.emoji-picker-item img { width: 100%; height: 100%; display: block; object-fit: contain; }
.emoji-picker-item > span { font-size: 30px; }
.emoji-picker-item.is-locked { opacity: .62; filter: saturate(.7); }
.emoji-picker-item.is-locked img { filter: brightness(.62) saturate(.7); }
.emoji-picker-item.is-locked i { position: absolute; right: 3px; bottom: 3px; width: 18px; height: 18px; display: grid; place-items: center; border: 1px solid #e7c664; border-radius: 50%; background: #3d1521; color: #f3cf68; font: 800 10px/1 Georgia, serif; }
.emoji-picker-empty { grid-column: 1 / -1; margin: 12px; color: #b7c1bb; text-align: center; }
.emoji-premium-notice { margin: 0; border-top: 1px solid rgb(238 201 109 / 20%); padding-top: 8px; color: #d5bd78; font-size: 10px; text-align: center; }

.game-seat .seat-emoji-reaction {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: calc(100% + 2px);
  width: 88px;
  height: 88px;
  pointer-events: none;
  filter: drop-shadow(0 10px 12px rgb(0 0 0 / 55%));
  transform-origin: 50% 100%;
  animation: seatEmojiReaction 3s ease-out both;
}
.game-seat .seat-emoji-reaction img { width: 100%; height: 100%; display: block; object-fit: contain; }
.game-seat.seat-top .seat-emoji-reaction,
.game-seat.seat-top-left .seat-emoji-reaction,
.game-seat.seat-top-right .seat-emoji-reaction { top: calc(100% + 2px); bottom: auto; transform-origin: 50% 0; }
.game-seat.seat-left .seat-emoji-reaction { left: calc(100% + 2px); bottom: 50%; }
.game-seat.seat-right .seat-emoji-reaction { right: calc(100% + 2px); left: auto; bottom: 50%; }
@keyframes seatEmojiReaction {
  0% { opacity: 0; transform: translateY(12px) scale(.3) rotate(-7deg); }
  10% { opacity: 1; transform: translateY(0) scale(1.08) rotate(2deg); }
  18%, 78% { opacity: 1; transform: translateY(-2px) scale(1); }
  100% { opacity: 0; transform: translateY(-18px) scale(.82); }
}

@media (max-height: 600px) and (orientation: landscape) {
  .emoji-picker-panel { top: 60px; width: min(330px, calc(100vw - 18px)); max-height: calc(100dvh - 68px); padding: 8px; }
  .emoji-picker-heading strong { font-size: 15px; }
  .emoji-picker-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
  .emoji-picker-item { border-radius: 10px; }
  .game-seat .seat-emoji-reaction { width: 70px; height: 70px; }
}
.profile-menu {
  position: fixed;
  z-index: 720;
  top: 0;
  right: 0;
  width: min(390px, 92vw);
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  border: 0;
  border-left: 1px solid rgb(235 194 101 / 42%);
  border-radius: 0;
  padding: 16px;
  background:
    radial-gradient(circle at 85% 8%, rgb(145 31 56 / 33%), transparent 28%),
    linear-gradient(155deg, #12291e, #07130f 58%, #17090d);
  box-shadow: -28px 0 80px rgb(0 0 0 / 70%);
  animation: profile-drawer-enter 310ms cubic-bezier(.2,.78,.2,1) both;
}
@keyframes profile-drawer-enter { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: none; } }
.profile-drawer-heading, .game-menu-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgb(235 194 101 / 22%);
  padding-bottom: 12px;
  color: #f6dda1;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.profile-drawer-heading button { width: auto; }
.profile-menu-summary {
  min-height: 92px;
  align-content: center;
  gap: 6px;
  border: 1px solid rgb(235 194 101 / 26%);
  border-radius: 18px;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgb(121 26 47 / 35%), rgb(255 255 255 / 3%));
}
.profile-menu-summary strong { color: #fff0c7; font-size: 24px; }
.profile-menu-summary span { color: #cbbd9c; font-size: 14px; }
.profile-drawer-nav { display: grid; gap: 8px; }
.profile-menu .profile-drawer-nav button,
.game-menu-panel > button {
  width: 100%;
  min-height: 66px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  border: 1px solid rgb(235 194 101 / 18%);
  border-radius: 15px;
  padding: 9px 12px;
  background: linear-gradient(145deg, rgb(255 255 255 / 6%), rgb(0 0 0 / 11%));
  color: #fff5d8;
  text-align: left;
}
.profile-drawer-nav button > span,
.game-menu-panel > button > span { color: #e9bf61; font-size: 23px; text-align: center; }
.profile-drawer-nav button > div,
.game-menu-panel > button > div { display: grid; gap: 3px; min-width: 0; }
.profile-drawer-nav strong,
.game-menu-panel > button strong { font-size: 16px; }
.profile-drawer-nav small,
.game-menu-panel > button small { color: #91aa9d; font-size: 11px; }
.profile-drawer-nav i,
.game-menu-panel > button i { color: #c69c49; font-size: 25px; font-style: normal; }
.profile-menu .profile-drawer-logout { width: 100%; margin-top: auto; }

.game-active .game-hud {
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 42px;
  background: linear-gradient(90deg, #160b0f, #081712 48%, #160b0f);
}
.game-active .game-hud-primary > div { display: flex; align-items: baseline; gap: 7px; }
.game-active .game-hud-primary strong { color: #f3d58d; font-size: 14px; }
.game-active .game-hud-status > span:first-child,
.game-active :is(#gameTurnHint,[data-game-role="gameTurnHint"]) { display: none !important; }
.game-active .game-hud-status { justify-content: flex-end; }
.game-active .game-hud-status .turn-timer {
  min-width: 72px;
  border: 1px solid rgb(232 189 88 / 25%);
  border-radius: 999px;
  padding: 5px 10px;
  background: rgb(0 0 0 / 22%);
  color: #f7d77f;
  font-size: 10px;
  text-align: center;
}
.game-active .game-hud-actions { position: static; }
.game-active :is(#scoreSheetToggle,[data-game-role="scoreSheetToggle"]),
.game-active :is(#gameToolsToggle,[data-game-role="gameToolsToggle"]) {
  position: fixed;
  z-index: 330;
  bottom: 10px;
  min-width: 98px;
  min-height: 42px;
  border-color: rgb(239 200 107 / 48%);
  border-radius: 14px;
  background: linear-gradient(145deg, rgb(75 27 39 / 96%), rgb(16 34 27 / 98%));
  box-shadow: 0 12px 28px rgb(0 0 0 / 52%);
  font-size: 11px;
}
.game-active :is(#scoreSheetToggle,[data-game-role="scoreSheetToggle"]) { left: 10px; }
.game-active :is(#gameToolsToggle,[data-game-role="gameToolsToggle"]) { right: 10px; }

.game-active .felt-table {
  inset: 28px 58px 104px;
  border: 7px solid #4a2b1a;
  border-radius: 38px;
  background:
    radial-gradient(ellipse at center, rgb(93 190 137 / 22%), transparent 63%),
    repeating-linear-gradient(32deg, rgb(255 255 255 / 1.5%) 0 1px, transparent 1px 5px),
    #095137;
  box-shadow:
    0 20px 40px rgb(0 0 0 / 55%),
    inset 0 0 0 2px #b58a4d,
    inset 0 0 0 7px #27160f,
    inset 0 0 82px rgb(0 0 0 / 44%);
}
.game-active .felt-table::before {
  content: "";
  position: absolute;
  inset: 13%;
  background: url("/icon-512.png") center / contain no-repeat;
  opacity: .065;
  filter: sepia(1) saturate(.7) brightness(1.45);
}
.game-active .table-monogram { display: none; }
.game-active .table-prompt { display: none; }
.game-active .trick.drop-target-active {
  outline: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(244 211 127 / 18%), transparent 68%);
  box-shadow: 0 0 48px rgb(244 211 127 / 18%);
}
.game-active .trump-indicator {
  left: auto;
  right: 12px;
  top: 12px;
  width: 132px;
  min-height: 62px;
  gap: 8px;
  border: 1px solid rgb(232 189 88 / 48%);
  border-radius: 16px;
  padding: 7px;
  background: linear-gradient(145deg, rgb(88 24 40 / 96%), rgb(7 27 20 / 98%));
  box-shadow: 0 13px 30px rgb(0 0 0 / 48%);
}
.game-active .trump-upcard,
.game-active .trump-suit-mark { width: 40px; min-height: 48px; flex-basis: 40px; }
.game-active .trump-suit-mark { height: 48px; font-size: 23px; }
.game-active .trump-indicator small { font-size: 7px; }
.game-active .trump-indicator strong { font-size: 11px; }

.game-active .game-seat {
  width: 126px;
  min-height: 76px;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 5px 7px;
  border: 1px solid rgb(232 189 88 / 28%);
  border-radius: 19px;
  padding: 7px;
  background: linear-gradient(145deg, rgb(29 48 39 / 98%), rgb(8 20 16 / 98%));
}
.game-active .game-seat.active { border-color: #f0c766; box-shadow: 0 0 0 3px rgb(240 199 102 / 13%), 0 14px 32px rgb(0 0 0 / 55%); }
.game-active .seat-avatar {
  width: 44px;
  height: 44px;
  align-self: start;
  overflow: hidden;
  border-radius: 14px;
}
.game-active .seat-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.game-active .seat-copy { align-self: start; }
.game-active .seat-copy > strong { font-size: 11px; }
.game-active .seat-copy > small { display: block; font-size: 7px; }
.game-active .seat-score { grid-column: 1 / -1; gap: 7px; font-size: 8px; }
.game-active .seat-technars { color: #ff9ca8; }
.game-active .seat-cards { position: absolute; right: -4px; bottom: -9px; transform: scale(.58); }
.game-active .seat-cards i { border-color: #d5ac5a; background: #163d2d url("/assets/cards/card-back.png") center / cover no-repeat; }
.game-active .seat-top { top: 5px; }
.game-active .seat-bottom { bottom: 94px; }
.game-active .seat-left { left: 5px; }
.game-active .seat-right { right: 5px; }

.game-active .off-turn-card { cursor: grab; filter: saturate(.92) brightness(.94); }
.game-active .off-turn-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgb(205 80 99 / 28%);
  pointer-events: none;
}
.game-active .dealt-card { transform-origin: 50% 140%; animation-duration: 620ms; animation-delay: calc(var(--deal-index) * 65ms); }

.score-sheet-panel {
  position: fixed !important;
  z-index: 650 !important;
  inset: 0 !important;
  max-height: none !important;
  display: grid;
  place-items: center;
  overflow: auto;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 18px !important;
  background: rgb(0 0 0 / 73%) !important;
  backdrop-filter: blur(5px);
}
.score-sheet-card {
  position: relative;
  width: min(980px, 96vw);
  max-height: 92vh;
  max-height: 92dvh;
  overflow: auto;
  border: 1px solid #a87a39;
  border-radius: 24px;
  padding: 18px;
  background:
    linear-gradient(rgb(17 42 31 / 94%), rgb(8 24 18 / 97%)),
    url("/icon-512.png") center / 48% no-repeat;
  box-shadow: inset 0 0 0 4px #2d1a10, 0 30px 90px rgb(0 0 0 / 78%);
}
.score-sheet-heading { position: sticky; top: -18px; z-index: 4; margin: -18px -18px 12px; padding: 15px 18px 12px; background: linear-gradient(90deg, #421321, #10291e 55%, #421321); }
.score-sheet-heading h2 { color: #ffe8ad; font-size: 25px; }
.score-sheet-heading span { color: #cfa957; letter-spacing: .15em; text-transform: uppercase; }
.score-sheet-table table { min-width: 620px; border-collapse: separate; border-spacing: 3px; }
.score-sheet-table th, .score-sheet-table td { border: 1px solid rgb(215 177 87 / 18%); border-radius: 8px; padding: 7px; background: rgb(2 15 10 / 58%); }
.score-sheet-table thead th { position: sticky; top: 63px; z-index: 3; color: #f8d987; background: #173a2b; }
.score-sheet-table td strong { color: #fff0c4; font-size: 15px; }
.score-sheet-table td sup { margin-left: 3px; color: #ff9ba7; font-size: 8px; }
.score-sheet-table .score-exact { background: rgb(52 105 75 / 44%); }
.score-sheet-table .score-hist { box-shadow: inset 0 0 0 2px rgb(195 54 75 / 50%); }
.score-sheet-table .score-block-title th { padding: 8px 12px; background: linear-gradient(90deg, #491625, #214634); text-align: left; }
.score-block-title span { margin-right: 10px; color: #d2ad5b; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.score-block-title strong { color: #ffecc1; font-size: 15px; }
.score-sheet-table .score-block-total th,
.score-sheet-table .score-block-total td { border-color: rgb(234 193 95 / 45%); background: rgb(83 50 27 / 55%); }

.game-menu-panel {
  position: fixed;
  z-index: 560;
  top: 0;
  right: 0;
  width: min(370px, 92vw);
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 9px;
  overflow-y: auto;
  border-left: 1px solid rgb(232 189 88 / 42%);
  padding: 14px;
  background: radial-gradient(circle at 90% 8%, rgb(119 26 47 / 42%), transparent 29%), linear-gradient(155deg, #122b20, #06140f 70%);
  box-shadow: -28px 0 80px rgb(0 0 0 / 72%);
  animation: profile-drawer-enter 280ms cubic-bezier(.2,.78,.2,1) both;
}
.game-menu-panel.hidden, .score-sheet-panel.hidden { display: none !important; }
.game-menu-heading { margin-bottom: 4px; }
.game-menu-panel > button.danger { margin-top: auto; border-color: rgb(204 70 84 / 42%); }

.game-event-toast {
  position: fixed;
  z-index: 680;
  left: 50%;
  top: 42%;
  opacity: 0;
  border: 1px solid rgb(238 199 102 / 45%);
  border-radius: 18px;
  padding: 14px 26px;
  background: linear-gradient(145deg, rgb(75 19 34 / 94%), rgb(8 32 23 / 96%));
  box-shadow: 0 20px 55px rgb(0 0 0 / 60%);
  color: #ffe9ad;
  font-size: clamp(22px, 4vw, 42px);
  font-weight: 700;
  letter-spacing: .035em;
  text-shadow: 0 2px 0 #5b2a19, 0 0 20px rgb(242 204 111 / 24%);
  transform: translate(-50%, -42%) scale(.86);
  transition: opacity 360ms ease, transform 450ms cubic-bezier(.2,.8,.2,1);
}
.game-event-toast.event-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.game-event-toast.event-technar { color: #ffc6bd; }
.game-event-toast.event-attached {
  border-color: rgb(106 191 238 / 58%);
  background: linear-gradient(145deg, rgb(23 74 96 / 96%), rgb(7 27 37 / 97%));
  color: #a9e3ff;
}

@media (max-height: 600px) and (orientation: landscape) {
  .profile-menu { width: min(350px, 44vw); padding: 10px; }
  .profile-menu-summary { min-height: 65px; padding: 10px 14px; }
  .profile-menu-summary strong { font-size: 19px; }
  .profile-drawer-nav { gap: 4px; }
  .profile-menu .profile-drawer-nav button { min-height: 49px; grid-template-columns: 30px minmax(0,1fr) 14px; padding: 5px 9px; }
  .profile-drawer-nav button > span { font-size: 18px; }
  .profile-drawer-nav strong { font-size: 13px; }
  .profile-drawer-nav small { font-size: 8px; }
  .game-active .felt-table { inset: 22px 52px 101px; border-radius: 31px; }
  .game-active .game-seat { width: 116px; min-height: 67px; grid-template-columns: 38px minmax(0,1fr); border-radius: 16px; padding: 5px; }
  .game-active .seat-avatar { width: 38px; height: 38px; border-radius: 12px; }
  .game-active .seat-bottom { bottom: 92px; }
  .game-active .trump-indicator { width: 118px; min-height: 54px; }
  .game-active .trump-upcard, .game-active .trump-suit-mark { width: 34px; min-height: 42px; flex-basis: 34px; height: 42px; }
  .game-menu-panel { width: min(335px, 44vw); padding: 10px; }
  .game-menu-panel > button { min-height: 52px; grid-template-columns: 32px minmax(0,1fr) 14px; padding: 5px 9px; }
  .game-menu-panel > button strong { font-size: 13px; }
  .game-menu-panel > button small { font-size: 8px; }
  .score-sheet-panel { padding: 7px !important; }
  .score-sheet-card { max-height: 96dvh; border-radius: 17px; padding: 12px; }
  .score-sheet-heading { top: -12px; margin: -12px -12px 8px; padding: 8px 12px; }
  .score-sheet-heading h2 { font-size: 18px; }
  .score-sheet-table th, .score-sheet-table td { padding: 4px 6px; font-size: 9px; }
  .score-sheet-table thead th { top: 43px; }
}

/* Living table: card motion, score sheet and focused in-game chrome */
.profile-trigger-avatar,
.profile-avatar-large { overflow: hidden; }
.profile-trigger-avatar img,
.profile-avatar-large img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  object-fit: cover;
}

.joker-choice-heading { display: flex; align-items: center; gap: 10px; }
.joker-choice-heading > span { color: var(--accent); font-size: 28px; filter: drop-shadow(0 0 12px rgb(232 189 88 / 45%)); }
.joker-choice-heading strong,
.joker-choice-heading small { display: block; }
.joker-choice-heading small { margin-top: 2px; color: var(--muted); }
.joker-mode-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.joker-mode-choice button { min-height: 68px; display: grid; align-content: center; gap: 4px; text-align: left; }
.joker-mode-choice small { color: inherit; opacity: .72; }
.joker-suit-choice { display: grid; gap: 8px; }
.joker-suit-choice > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }

.score-sheet-panel {
  position: absolute;
  inset: 50px 7px 7px;
  z-index: 260;
  overflow: auto;
  border: 1px solid rgb(232 189 88 / 42%);
  border-radius: 18px;
  padding: 12px;
  background: linear-gradient(155deg, rgb(14 38 28 / 98%), rgb(4 16 11 / 99%));
  box-shadow: 0 24px 70px rgb(0 0 0 / 62%), inset 0 1px rgb(255 255 255 / 7%);
  backdrop-filter: blur(14px);
}
.score-sheet-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.score-sheet-heading span { color: var(--accent); font-size: 9px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.score-sheet-heading h2 { margin: 2px 0 0; font: 900 22px/1 Georgia, serif; }
.score-sheet-table { overflow: auto; }
.score-sheet-table table { width: 100%; border-collapse: separate; border-spacing: 4px; text-align: center; }
.score-sheet-table th,
.score-sheet-table td { min-width: 74px; border: 1px solid rgb(255 255 255 / 8%); border-radius: 9px; padding: 7px 5px; background: rgb(255 255 255 / 4%); }
.score-sheet-table thead th { position: sticky; top: 0; z-index: 2; color: #f3d780; background: #142b21; }
.score-sheet-table tbody th { position: sticky; left: 0; z-index: 1; background: #10241b; }
.score-sheet-table strong,
.score-sheet-table small { display: block; }
.score-sheet-table small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.score-sheet-table .score-exact { border-color: rgb(100 220 145 / 45%); color: #91efb3; background: rgb(36 111 66 / 18%); }
.score-sheet-table .score-current td,
.score-sheet-table .score-current th { border-color: rgb(232 189 88 / 32%); }

.flying-card {
  position: fixed !important;
  z-index: 1000 !important;
  pointer-events: none !important;
  margin: 0 !important;
  opacity: 1;
  transform-origin: center;
  transition: transform 390ms cubic-bezier(.18, .86, .22, 1), opacity 390ms ease;
  filter: drop-shadow(0 22px 20px rgb(0 0 0 / 48%));
}
.card-launching { opacity: .18 !important; transform: translateY(-8px) scale(.94) !important; }
.new-played-card { animation: table-card-arrival 420ms cubic-bezier(.17, .86, .28, 1) both; }
.trick-complete .played-card { filter: drop-shadow(0 0 11px rgb(232 189 88 / 28%)); }
.trick-complete + .table-prompt,
.felt-table .table-prompt:not(.hidden) {
  z-index: 20;
  border: 1px solid rgb(232 189 88 / 38%);
  border-radius: 999px;
  padding: 5px 10px;
  background: rgb(5 22 15 / 88%);
  color: #f4d77d;
  box-shadow: 0 8px 20px rgb(0 0 0 / 38%);
}
.dealt-card { animation: deal-card 420ms cubic-bezier(.16, .82, .25, 1) both; animation-delay: calc(var(--deal-index) * 45ms); }
.hand .card.playable { animation: playable-breathe 1.8s ease-in-out infinite; }

@keyframes table-card-arrival {
  0% { opacity: 0; transform: translateY(-58px) scale(.72) rotate(9deg); }
  72% { opacity: 1; transform: translateY(5px) scale(1.04) rotate(-2deg); }
  100% { transform: translateY(0) scale(1) rotate(0); }
}
@keyframes deal-card {
  0% { opacity: 0; transform: translateY(-55px) scale(.72) rotate(-7deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
@keyframes playable-breathe {
  0%, 100% { box-shadow: 0 8px 16px rgb(0 0 0 / 34%), 0 0 0 1px rgb(92 235 143 / 20%); }
  50% { box-shadow: 0 12px 22px rgb(0 0 0 / 38%), 0 0 18px rgb(92 235 143 / 34%); }
}

@media (max-width: 900px) {
  .game-session-active .topbar {
    position: fixed;
    top: 6px;
    right: 7px;
    left: auto;
    width: 42px;
    height: 42px;
    min-height: 0;
    flex: 0 0 0;
    overflow: visible;
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }
  .game-session-active .brand-lockup,
  .game-session-active .main-menu-toggle,
  .game-session-active .main-menu-panel { display: none !important; }
  .game-session-active .tabs { width: 42px; }
  .game-session-active .profile-trigger {
    width: 42px;
    height: 42px;
    min-height: 42px;
    border-radius: 50%;
    padding: 4px;
    box-shadow: 0 8px 24px rgb(0 0 0 / 42%), 0 0 0 2px rgb(232 189 88 / 18%);
  }
  .game-session-active .profile-trigger-avatar { width: 32px; height: 32px; flex-basis: 32px; }
  .game-session-active :is(#home,[data-game-role="home"]).game-active { margin-top: 0; }
  .game-active .game-hud { padding-right: 52px; }
  .game-active .game-hud-actions { display: flex; gap: 4px; }
  .game-active #copyGameCodeBtn,
  .game-active #nextBtn { display: none !important; }
  .game-active :is(#scoreSheetToggle,[data-game-role="scoreSheetToggle"]) { width: 34px; min-height: 32px; padding: 5px; font-size: 0; }
  .game-active :is(#scoreSheetToggle,[data-game-role="scoreSheetToggle"]) .button-icon { margin: 0; }
  .game-active .game-arena .felt-table { inset: 70px 22px 64px; }
  .game-active :is(#jokerChoice,[data-game-role="jokerChoice"]):not(.hidden) { left: 50%; right: auto; width: min(470px, calc(100% - 16px)); transform: translate(-50%, -50%); top: 50%; }
  .score-sheet-panel { inset: 45px 5px 5px; border-radius: 13px; padding: 8px; }
  .score-sheet-heading h2 { font-size: 17px; }
  .score-sheet-heading button { min-height: 32px; padding: 5px 8px; font-size: 10px; }
  .score-sheet-table th,
  .score-sheet-table td { min-width: 64px; padding: 5px 3px; font-size: 10px; }
}

@media (max-height: 600px) and (orientation: landscape) {
  .game-active :is(#game,[data-game-role="game"]) { grid-template-columns: minmax(0, 1fr) clamp(188px, 23vw, 225px); }
  .game-active .game-arena .felt-table { inset: 25px 46px 27px; }
  .game-active .game-hud { padding-right: 49px; }
  .game-session-active .topbar { top: 4px; right: 6px; width: 36px; height: 36px; }
  .game-session-active .tabs,
  .game-session-active .profile-trigger { width: 36px; height: 36px; min-height: 36px; }
  .game-session-active .profile-trigger-avatar { width: 28px; height: 28px; flex-basis: 28px; }
  .joker-mode-choice button { min-height: 54px; }
}

@media (max-width: 520px) {
  .joker-mode-choice { grid-template-columns: 1fr; }
  .joker-suit-choice > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .flying-card,
  .new-played-card,
  .dealt-card,
  .hand .card.playable { animation: none !important; transition: none !important; }
}
.animations-disabled .flying-card,
.animations-disabled .new-played-card,
.animations-disabled .dealt-card,
.animations-disabled .hand .card.playable { animation: none !important; transition: none !important; }

.game-session-active .brand-lockup,
.game-session-active .main-menu-toggle,
.game-session-active .main-menu-panel { display: none !important; }
.game-session-active .tabs { margin-left: auto; }
@media (prefers-reduced-motion: reduce) {
  .discipline-shake .app { animation: none; }
  .card { transition: none; }
}

/* Club visual system */
:root {
  --page: #07120f;
  --surface: #10201a;
  --surface-strong: #0b1814;
  --border: #29483b;
  --border-soft: #1c342a;
  --text: #f7f3e8;
  --muted: #a7b8af;
  --accent: #e8bd58;
  --accent-text: #211706;
  --felt: #0c422e;
}
body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 8% 6%, rgb(30 116 79 / 28%), transparent 32rem),
    radial-gradient(circle at 92% 16%, rgb(161 38 54 / 17%), transparent 28rem),
    linear-gradient(145deg, #06100d 0%, #0a1713 45%, #07100e 100%);
  background-attachment: fixed;
}
body::before {
  content: "♠   ♥   ♦   ♣";
  position: fixed;
  inset: auto -3vw -9vw auto;
  z-index: -1;
  color: rgb(232 189 88 / 3.5%);
  font: 900 clamp(120px, 22vw, 320px)/1 Georgia, serif;
  letter-spacing: -.16em;
  white-space: nowrap;
  transform: rotate(-8deg);
  pointer-events: none;
}
.app { width: min(1320px, 100%); padding: 18px 24px 38px; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 90;
  min-height: 72px;
  border: 1px solid rgb(232 189 88 / 13%);
  border-top: 0;
  border-radius: 0 0 18px 18px;
  padding: 10px 14px;
  background: rgb(7 18 15 / 86%);
  box-shadow: 0 12px 40px rgb(0 0 0 / 26%);
  backdrop-filter: blur(16px);
}
.brand-lockup { display: flex; align-items: center; gap: 12px; min-width: max-content; }
.brand-mark {
  display: grid;
  width: 46px;
  height: 52px;
  place-items: center;
  border: 1px solid rgb(232 189 88 / 48%);
  border-radius: 9px;
  background: linear-gradient(145deg, #f7e3a5, #d19b36);
  box-shadow: 0 8px 24px rgb(0 0 0 / 34%), inset 0 0 0 3px rgb(255 255 255 / 18%);
  color: #16231e;
  font: 900 27px/1 Georgia, serif;
  transform: rotate(-4deg);
}
.topbar h1 { margin: 0; color: #fffaf0; font: 700 27px/1 Georgia, serif; letter-spacing: -.035em; }
.topbar h1 span { color: var(--accent); font-weight: 400; }
.topbar p { margin-top: 5px; color: #91aa9e; font-size: 12px; letter-spacing: .02em; }
.tabs { gap: 7px; }
.tabs button {
  min-height: 40px;
  border-radius: 11px;
  padding: 9px 12px;
  color: #b8c8bf;
}
.tabs button.selected, .tabs button:hover { border-color: rgb(232 189 88 / 32%); background: rgb(232 189 88 / 10%); color: #fff6de; }
button, .download-link {
  border-radius: 12px;
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease, filter 150ms ease;
}
button:not(:disabled):hover, .download-link:hover { transform: translateY(-1px); filter: brightness(1.06); }
button:not(:disabled):active { transform: translateY(1px); }
button { box-shadow: 0 7px 18px rgb(0 0 0 / 16%); }
.ghost { background: rgb(255 255 255 / 4%); border-color: rgb(255 255 255 / 12%); }
input, select, textarea {
  min-height: 47px;
  border-radius: 12px;
  border-color: #355548;
  background: rgb(4 12 9 / 62%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 3%);
}
input:focus, select:focus, textarea:focus { outline: 2px solid rgb(232 189 88 / 42%); outline-offset: 1px; border-color: var(--accent); }
.auth-stage {
  min-height: calc(100vh - 112px);
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(380px, .82fr);
  gap: clamp(24px, 5vw, 76px);
  align-items: center;
  padding: clamp(30px, 7vh, 82px) clamp(4px, 3vw, 34px);
}
.auth-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 520px;
  display: grid;
  align-content: center;
  border: 1px solid rgb(232 189 88 / 22%);
  border-radius: 30px;
  padding: clamp(34px, 6vw, 74px);
  background:
    linear-gradient(115deg, rgb(5 39 27 / 94%), rgb(8 25 20 / 82%)),
    radial-gradient(circle at 74% 32%, #1b8059, transparent 42%);
  box-shadow: 0 34px 80px rgb(0 0 0 / 38%), inset 0 0 90px rgb(0 0 0 / 25%);
}
.auth-hero::before, .auth-hero::after {
  content: "J";
  position: absolute;
  z-index: -1;
  width: 190px;
  height: 270px;
  border: 2px solid rgb(232 189 88 / 18%);
  border-radius: 18px;
  color: rgb(232 189 88 / 13%);
  background: rgb(255 255 255 / 2%);
  font: 700 80px/1 Georgia, serif;
  padding: 18px;
  transform: rotate(14deg);
}
.auth-hero::before { top: -52px; right: 18px; }
.auth-hero::after { content: "♠"; right: -40px; bottom: -95px; transform: rotate(-12deg); text-align: center; }
.auth-hero .eyebrow, .auth-kicker { color: var(--accent); font-weight: 850; letter-spacing: .14em; text-transform: uppercase; font-size: 11px; }
.auth-title { max-width: 760px; margin: 18px 0; color: #fffaf0; font: 700 clamp(43px, 5.2vw, 76px)/.98 Georgia, serif; letter-spacing: -.055em; }
.auth-title em { color: var(--accent); font-weight: 400; }
.auth-lead { max-width: 650px; color: #c2d0c9; font-size: clamp(16px, 1.55vw, 20px); line-height: 1.65; }
.suit-row { display: flex; gap: 13px; margin: 28px 0 34px; color: #f9ebbd; font: 700 29px/1 Georgia, serif; }
.red-suit { color: #df6572; }
.auth-highlights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.auth-highlights > div { display: grid; gap: 4px; border-left: 2px solid rgb(232 189 88 / 44%); padding: 4px 12px; }
.auth-highlights strong { color: #fff8e5; font: 700 22px/1 Georgia, serif; }
.auth-highlights span { color: #90aa9d; font-size: 12px; }
.auth-card {
  position: relative;
  display: grid;
  gap: 17px;
  border: 1px solid rgb(232 189 88 / 24%);
  border-radius: 26px;
  padding: clamp(25px, 3vw, 38px);
  background: linear-gradient(155deg, rgb(20 38 31 / 96%), rgb(8 21 16 / 97%));
  box-shadow: 0 30px 70px rgb(0 0 0 / 42%), inset 0 1px 0 rgb(255 255 255 / 5%);
}
.auth-card::before { content: ""; position: absolute; inset: 0 22px auto; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
.auth-card-heading h2 { margin: 5px 0 0; color: #fffaf0; font: 700 30px/1.12 Georgia, serif; }
.auth-card-heading p { margin-top: 9px; color: #9eb0a7; line-height: 1.5; }
.auth-entry-choice { display: grid; align-content: center; gap: 18px; min-height: 100%; }
.auth-choice-grid { display: grid; gap: 10px; }
.auth-choice {
  position: relative;
  min-height: 68px;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: start;
  align-content: center;
  gap: 4px;
  overflow: hidden;
  border: 1px solid rgb(232 189 88 / 28%);
  border-radius: 16px;
  padding: 13px 18px 13px 64px;
  background: linear-gradient(135deg, rgb(45 66 56 / 96%), rgb(13 31 24 / 98%));
  color: #fff8e7;
  text-align: left;
}
.auth-choice::before {
  position: absolute;
  left: 18px;
  top: 50%;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 50%;
  background: rgb(0 0 0 / 22%);
  color: var(--accent);
  font: 800 15px/1 Georgia, serif;
  transform: translateY(-50%);
}
.auth-choice-guest::before { content: "J"; }
.auth-choice-vk::before { content: "VK"; font: 800 10px/1 Inter, sans-serif; }
.auth-choice-email::before { content: "@"; }
.auth-choice strong { font-size: 16px; letter-spacing: .02em; }
.auth-choice span { color: #9db0a6; font-size: 12px; font-weight: 600; }
.auth-choice-vk { border-color: rgb(91 154 255 / 42%); background: linear-gradient(135deg, #286dcc, #17447e); }
.auth-choice-vk::before { color: #fff; }
.auth-choice-vk span { color: #d8e8ff; }
.auth-choice-email { background: linear-gradient(135deg, #56313a, #29161c); }
.auth-password-link { min-height: 42px; color: #d6c59b; }
.auth-method-panel, .auth-method-section { display: grid; gap: 14px; }
.auth-method-panel { align-content: center; min-height: 100%; }
.auth-method-section label { gap: 7px; color: #d7e0da; font-size: 13px; font-weight: 700; }
.auth-back { justify-self: start; min-height: 38px; padding: 8px 12px; }
.android-client #androidDownloadLink { display: none; }
.auth-mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; border: 1px solid var(--border); border-radius: 14px; padding: 4px; background: rgb(0 0 0 / 18%); }
.auth-mode-switch button { min-height: 40px; border: 0; background: transparent; box-shadow: none; color: var(--muted); }
.auth-mode-switch button.selected { background: linear-gradient(135deg, #f1d07c, #dcae48); color: #241a08; box-shadow: 0 8px 20px rgb(0 0 0 / 26%); }
.account-form { display: grid; gap: 12px; }
.account-form label, .external-auth label { gap: 7px; color: #d7e0da; font-size: 13px; font-weight: 700; }
.primary-cta { min-height: 52px; margin-top: 3px; background: linear-gradient(135deg, #f3d27f, #d8a43c); box-shadow: 0 12px 26px rgb(174 119 26 / 20%); font-size: 16px; }
.form-hint, .auth-note { min-height: 19px; color: #8fa59a; font-size: 12px; line-height: 1.45; text-align: center; }
.form-error { color: #ff9ba5; }
.auth-divider { display: flex; align-items: center; gap: 10px; color: #71897e; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; flex: 1; background: var(--border-soft); }
.guest-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.guest-entry button { white-space: nowrap; }
.external-auth { margin: 0; border: 1px solid var(--border-soft); border-radius: 13px; padding: 11px 13px; background: rgb(0 0 0 / 11%); }
.external-auth summary { color: #b7c7be; font-weight: 750; }
.external-auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 13px; }
.external-auth-grid .vk-button { grid-column: 1 / -1; background: #2876f0; color: #fff; }
.external-auth button:disabled { border: 1px dashed #40564c; background: #17241f; color: #70867b; box-shadow: none; }
.auth-card .download-link { min-height: 38px; padding: 7px 12px; background: transparent; border-color: rgb(232 189 88 / 22%); color: #d7c38f; font-size: 12px; }
.box, .mini-card, .room-row, .leaderboard-row {
  border: 1px solid rgb(232 189 88 / 12%);
  border-radius: 17px;
  background: linear-gradient(155deg, rgb(18 35 29 / 88%), rgb(9 23 18 / 88%));
  box-shadow: 0 14px 34px rgb(0 0 0 / 19%);
}
.box { padding: 18px; }
.box h2 { color: #f0dfb1; }
.table { border: 1px solid rgb(232 189 88 / 14%); border-radius: 22px; padding: 17px; background: radial-gradient(circle at center, #14543b, #092d20 74%); box-shadow: inset 0 0 60px rgb(0 0 0 / 32%); }
.trick { background: rgb(5 39 27 / 68%); }
.profile-menu { border-color: rgb(232 189 88 / 24%); border-radius: 14px; background: #0d1d17; }
@media (max-width: 900px) {
  .auth-stage { grid-template-columns: 1fr; padding-top: 24px; }
  .auth-hero { min-height: 420px; }
}
@media (max-width: 600px) {
  .app { padding: 0 12px 24px; }
  .auth-stage { padding: 16px 0; gap: 16px; }
  .auth-hero { min-height: 350px; border-radius: 22px; padding: 28px 24px; }
  .auth-title { font-size: 40px; }
  .auth-highlights { grid-template-columns: 1fr; }
  .auth-highlights > div { grid-template-columns: 55px 1fr; align-items: center; }
  .auth-card { border-radius: 22px; padding: 23px 18px; }
  .guest-entry, .external-auth-grid { grid-template-columns: 1fr; }
  .external-auth-grid .vk-button { grid-column: auto; }
}
@media (max-height: 600px) and (orientation: landscape) {
  .auth-stage { min-height: auto; grid-template-columns: 1fr; gap: 0; padding: 7px 0; align-items: start; }
  .auth-hero { display: none; }
  .auth-card { max-height: calc(100vh - 70px); overflow-y: auto; border-radius: 18px; padding: 12px 16px; gap: 8px; }
  .auth-entry-choice { gap: 8px; }
  .auth-card-heading h2 { margin-top: 2px; font-size: 21px; }
  .auth-card-heading p { margin-top: 4px; font-size: 11px; }
  .auth-choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .auth-choice { min-height: 65px; padding: 8px 7px 8px 43px; border-radius: 12px; }
  .auth-choice::before { left: 8px; width: 27px; height: 27px; }
  .auth-choice strong { font-size: 14px; }
  .auth-choice span { font-size: 10px; }
  .auth-password-link { min-height: 34px; padding: 6px 10px; font-size: 12px; }
  .auth-note { min-height: 12px; font-size: 10px; }
  .auth-method-panel { min-height: 0; }
  .account-form { gap: 8px; }
  .account-form input { min-height: 40px; padding: 9px 11px; }
  .primary-cta { min-height: 43px; }
}

/* Full game table */
.game-active { margin-top: 10px; }
.game-active > .split, .game-active > .box { display: none; }
:is(#game,[data-game-role="game"]) { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.game-hud {
  position: sticky;
  top: 78px;
  z-index: 78;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  min-height: 70px;
  border: 1px solid rgb(232 189 88 / 19%);
  border-radius: 17px;
  padding: 10px 14px;
  background: rgb(7 20 15 / 91%);
  box-shadow: 0 14px 36px rgb(0 0 0 / 28%);
  backdrop-filter: blur(14px);
}
.game-hud-primary { display: flex; align-items: center; gap: 11px; }
.game-hud-primary > div { display: grid; gap: 3px; }
.game-hud-primary strong { color: #fff5d9; font: 700 16px/1.1 Georgia, serif; }
.game-hud-primary span:not(.phase-badge) { color: var(--muted); font-size: 11px; }
.phase-badge { border: 1px solid rgb(232 189 88 / 30%); border-radius: 999px; padding: 7px 10px; background: rgb(232 189 88 / 12%); color: var(--accent); font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.game-hud-status { display: flex; align-items: center; justify-content: center; gap: 16px; min-width: 0; }
.game-hud-status > span { color: var(--muted); font-size: 12px; white-space: nowrap; }
.game-hud-status b { color: #fff1c8; }
.game-hud-status > strong { overflow: hidden; color: #fff; text-overflow: ellipsis; white-space: nowrap; }
.game-hud-status .turn-timer { color: var(--accent); font-weight: 800; }
.game-hud-actions { display: flex; gap: 7px; }
.game-hud-actions button { min-height: 40px; padding: 8px 11px; white-space: nowrap; }
.game-arena {
  position: relative;
  min-height: 510px;
  overflow: hidden;
  border: 1px solid rgb(232 189 88 / 18%);
  border-radius: 30px;
  background:
    radial-gradient(ellipse at center, rgb(26 116 77 / 26%), transparent 55%),
    linear-gradient(145deg, #07150f, #0b1d16);
  box-shadow: 0 24px 60px rgb(0 0 0 / 28%), inset 0 0 80px rgb(0 0 0 / 25%);
}
.trump-indicator {
  position: absolute;
  left: 16px;
  top: 104px;
  z-index: 7;
  width: 150px;
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgb(232 189 88 / 38%);
  border-radius: 15px;
  padding: 7px 9px;
  background: linear-gradient(145deg, rgb(8 27 19 / 97%), rgb(5 16 12 / 97%));
  box-shadow: 0 12px 28px rgb(0 0 0 / 34%);
  pointer-events: none;
}
.trump-indicator > div:last-child { min-width: 0; display: grid; gap: 2px; }
.trump-indicator small { color: #799487; font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.trump-indicator strong { color: #fff2c9; font: 700 12px/1.05 Georgia, serif; }
.trump-indicator.red-trump strong { color: #ffb3b9; }
.trump-suit-mark { display: grid; width: 47px; height: 55px; flex: 0 0 47px; place-items: center; border: 1px solid #d9d4c5; border-radius: 8px; background: #fffdf7; color: #171b18; font: 700 28px/1 Georgia, serif; box-shadow: 0 7px 14px rgb(0 0 0 / 30%); }
.trump-indicator.red-trump .trump-suit-mark { color: #b91c2c; }
.pending-mark { border-style: dashed; background: #173b2d; color: #e6c46e; }
.no-trump-mark { border-color: #d8b95d; background: #191f1b; color: #f1d37e; font-size: 18px; }
.trump-upcard { position: relative; width: 47px; min-height: 58px; flex: 0 0 47px; overflow: hidden; border-radius: 7px; padding: 5px; }
.trump-upcard .card-corner { left: 5px; top: 4px; font-size: 11px; }
.trump-upcard .card-corner i { font-size: 9px; }
.trump-upcard .card-center { font-size: 23px; }
.trump-upcard .card-caption { display: none; }
.game-active :is(#trumpChoice,[data-game-role="trumpChoice"]) { position: relative; border-color: var(--accent); border-radius: 14px; background: linear-gradient(135deg, rgb(62 48 17 / 96%), rgb(16 37 28 / 98%)); box-shadow: 0 0 0 3px rgb(232 189 88 / 10%), 0 15px 32px rgb(0 0 0 / 22%); }
.game-active :is(#trumpChoice,[data-game-role="trumpChoice"]) strong { color: #fff1bd; }
.game-active :is(#trumpChoice,[data-game-role="trumpChoice"]) button { min-width: 96px; }
.felt-table {
  position: absolute;
  inset: 95px 180px 100px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 9px solid #543b20;
  border-radius: 48% / 44%;
  background:
    radial-gradient(ellipse at 45% 40%, rgb(43 135 93 / 36%), transparent 55%),
    repeating-linear-gradient(35deg, rgb(255 255 255 / 1.5%) 0 1px, transparent 1px 5px),
    #0c4b33;
  box-shadow: 0 22px 45px rgb(0 0 0 / 42%), inset 0 0 0 3px #9b713b, inset 0 0 70px rgb(0 0 0 / 42%);
}
.table-monogram { position: absolute; color: rgb(232 189 88 / 11%); font: 700 clamp(52px, 8vw, 100px)/1 Georgia, serif; letter-spacing: -.08em; transform: rotate(-8deg); }
.table-monogram span { color: rgb(255 255 255 / 8%); }
.table-prompt { position: relative; z-index: 2; max-width: 280px; border: 1px solid rgb(255 255 255 / 9%); border-radius: 999px; padding: 9px 14px; background: rgb(0 0 0 / 18%); color: #b8cec2; font-size: 12px; text-align: center; }
.game-seats { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.game-seat {
  position: absolute;
  width: 230px;
  min-height: 82px;
  display: grid;
  grid-template-columns: 43px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border: 1px solid #315244;
  border-radius: 16px;
  padding: 9px;
  background: linear-gradient(145deg, rgb(20 42 33 / 96%), rgb(7 21 16 / 96%));
  box-shadow: 0 14px 30px rgb(0 0 0 / 35%);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.game-seat.active { border-color: var(--accent); box-shadow: 0 0 0 3px rgb(232 189 88 / 13%), 0 15px 35px rgb(0 0 0 / 42%); }
.game-seat.active::after { content: "ХОД"; position: absolute; top: -9px; right: 12px; border-radius: 999px; padding: 3px 7px; background: var(--accent); color: var(--accent-text); font-size: 8px; font-weight: 950; letter-spacing: .08em; }
.game-seat.is-you { background: linear-gradient(145deg, rgb(39 72 55 / 98%), rgb(10 29 21 / 98%)); }
.seat-bottom { left: 50%; bottom: 9px; transform: translateX(-50%); }
.seat-top { left: 50%; top: 9px; transform: translateX(-50%); }
.seat-left { left: 12px; top: 50%; transform: translateY(-50%); }
.seat-right { right: 12px; top: 50%; transform: translateY(-50%); }
.seat-top-left { left: 14%; top: 9px; }
.seat-top-right { right: 14%; top: 9px; }
.seat-avatar { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgb(232 189 88 / 32%); border-radius: 50%; background: linear-gradient(145deg, #d9ac4f, #8d6524); color: #1b160c; font: 800 19px/1 Georgia, serif; }
.seat-copy { min-width: 0; display: grid; gap: 2px; }
.seat-copy > strong { overflow: hidden; color: #fff8e8; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.seat-copy > small { color: #7f9c8d; font-size: 9px; }
.seat-score { display: flex; gap: 8px; margin-top: 3px; color: #8ea79a; font-size: 9px; white-space: nowrap; }
.seat-score b { color: #f3d27f; }
.seat-cards { position: relative; width: 40px; height: 44px; }
.seat-cards i { position: absolute; top: 5px; width: 24px; height: 34px; border: 1px solid #b78d42; border-radius: 4px; background: repeating-linear-gradient(45deg, #6b1930 0 3px, #8e2944 3px 6px); box-shadow: 0 2px 4px rgb(0 0 0 / 35%); transform-origin: bottom center; }
.seat-cards i:nth-child(1) { left: 0; transform: rotate(-14deg); }
.seat-cards i:nth-child(2) { left: 4px; transform: rotate(-7deg); }
.seat-cards i:nth-child(3) { left: 8px; }
.seat-cards i:nth-child(4) { left: 12px; transform: rotate(7deg); }
.seat-cards i:nth-child(5) { left: 16px; transform: rotate(14deg); }
.seat-cards > b { position: absolute; z-index: 3; right: -3px; bottom: -1px; display: grid; min-width: 18px; height: 18px; place-items: center; border-radius: 50%; background: #f0cc72; color: #211807; font-size: 9px; }
.dealer-chip { position: absolute; left: -7px; top: -7px; display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid #fff3c9; border-radius: 50%; background: #f6e4ae; color: #3b2b0e; font: 900 9px/1 Georgia, serif; }
.trick { position: relative; z-index: 3; width: min(92%, 530px); min-height: 150px; display: flex; align-items: center; justify-content: center; gap: 2px; border: 0; padding: 0; background: transparent; }
.played-card { display: grid; justify-items: center; gap: 4px; margin-left: -13px; }
.played-card:first-child { margin-left: 0; }
.played-card > span { max-width: 90px; overflow: hidden; color: #d7e4dc; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.played-card .card { width: 78px; min-height: 108px; box-shadow: 0 9px 18px rgb(0 0 0 / 35%); transform: rotate(var(--card-rotation, 0deg)); }
.played-card:nth-child(1) .card { --card-rotation: -6deg; }
.played-card:nth-child(2) .card { --card-rotation: 3deg; }
.played-card:nth-child(3) .card { --card-rotation: -2deg; }
.played-card:nth-child(4) .card { --card-rotation: 6deg; }
.game-action-deck { display: grid; grid-template-columns: minmax(240px, .3fr) minmax(0, 1fr); gap: 12px; }
.bid-panel, .hand-panel { min-width: 0; border: 1px solid rgb(232 189 88 / 16%); border-radius: 19px; padding: 14px; background: linear-gradient(145deg, rgb(17 37 29 / 96%), rgb(7 21 16 / 96%)); box-shadow: 0 14px 34px rgb(0 0 0 / 19%); }
.bid-panel.action-required { border-color: var(--accent); box-shadow: 0 0 0 3px rgb(232 189 88 / 10%), 0 14px 34px rgb(0 0 0 / 24%); }
.game-section-title { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.game-section-title > span { color: rgb(232 189 88 / 48%); font: 700 22px/1 Georgia, serif; }
.game-section-title > div { display: grid; gap: 1px; }
.game-section-title strong { color: #f8eac3; }
.game-section-title small { color: var(--muted); font-size: 10px; }
.bidbox { min-height: 84px; display: grid; align-content: center; border: 0; padding: 0; background: transparent; }
.bid-instruction, .control-placeholder { margin-bottom: 8px; color: #b8c9c0; font-size: 11px; text-align: center; }
.bidgrid { grid-template-columns: repeat(auto-fit, minmax(38px, 1fr)); }
.bidgrid button { min-height: 42px; border: 1px solid rgb(232 189 88 / 24%); border-radius: 10px; padding: 6px; font-size: 15px; }
.locked-bid { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--muted); }
.locked-bid strong { display: grid; width: 50px; height: 50px; place-items: center; border: 1px solid rgb(232 189 88 / 42%); border-radius: 50%; color: var(--accent); font: 700 24px/1 Georgia, serif; }
.hand { min-height: 132px; display: flex; align-items: end; justify-content: center; gap: 7px; overflow-x: auto; padding: 5px 3px 10px; }
.hand .card { position: relative; flex: 0 0 82px; width: 82px; min-height: 120px; overflow: hidden; border: 1px solid #d7d4c9; border-radius: 10px; padding: 8px; background: linear-gradient(145deg, #fffefa, #e9e6dc); color: #151a18; box-shadow: 0 8px 17px rgb(0 0 0 / 26%); }
.hand .card:disabled { opacity: .88; filter: saturate(.72) brightness(.82); }
.hand .card.playable { box-shadow: 0 0 0 3px #39cb7b, 0 12px 24px rgb(0 0 0 / 34%); transform: translateY(-4px); }
.hand .card.risky { border-color: #d68f42; box-shadow: inset 0 0 0 2px rgb(214 143 66 / 42%); }
.hand .card.joker { background: linear-gradient(145deg, #f4d77f, #d79d32); }
.card-corner { position: absolute; left: 7px; top: 6px; display: grid; justify-items: center; font: 800 16px/.92 Georgia, serif; }
.card-corner i { font-style: normal; font-size: 14px; }
.card-center { font: 700 38px/1 Georgia, serif; }
.card-caption { position: absolute; right: 7px; bottom: 6px; color: inherit; font: 800 11px/1 Georgia, serif; transform: rotate(180deg); }
.joker-star { color: #7a142a; text-shadow: 0 1px #fff1b0; }
.empty-hand { width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; border: 1px dashed #375548; border-radius: 13px; padding: 22px; color: #789487; }
.empty-hand > span { font: 700 28px/1 Georgia, serif; }
.game-standings { border: 1px solid rgb(232 189 88 / 26%); border-radius: 18px; padding: 16px; background: rgb(18 40 31 / 94%); }
.game-extras, .game-log { border: 1px solid var(--border-soft); border-radius: 15px; padding: 0 14px; background: rgb(6 18 13 / 60%); }
.game-extras > summary, .game-log > summary { padding: 13px 0; color: #b9cac1; font-weight: 800; }
.game-log > summary span { color: #6f897c; font-size: 10px; font-weight: 500; }
.game-extras .box { margin: 8px 0 14px; }
.game-log .log { margin: 0 0 14px; border: 0; background: #07130f; }
@media (max-width: 820px) {
  .game-hud { grid-template-columns: 1fr auto; top: 72px; }
  .game-hud-status { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; overflow-x: auto; }
  .game-arena { min-height: 440px; }
  .felt-table { inset: 90px 120px 95px; }
  .game-seat { width: 195px; }
  .game-action-deck { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .game-hud { grid-template-columns: minmax(0, 1fr); gap: 8px; top: 68px; }
  .game-hud-primary, .game-hud-primary > div { min-width: 0; }
  .game-hud-primary strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .game-hud-status { grid-column: 1; grid-row: auto; justify-content: flex-start; gap: 9px; }
  .game-hud-status > strong { font-size: 12px; }
  .game-hud-actions { display: flex; }
  .game-arena { min-height: 440px; }
  .trump-indicator { left: 7px; top: 88px; width: 126px; min-height: 62px; gap: 6px; padding: 6px; }
  .trump-suit-mark { width: 38px; height: 47px; flex-basis: 38px; font-size: 23px; }
  .trump-upcard { width: 38px; min-height: 49px; flex-basis: 38px; }
  .trump-upcard .card-center { font-size: 18px; }
  .trump-indicator strong { font-size: 10px; }
  .game-active :is(#trumpChoice,[data-game-role="trumpChoice"]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .game-active :is(#trumpChoice,[data-game-role="trumpChoice"]) strong { grid-column: 1 / -1; }
  .game-active :is(#trumpChoice,[data-game-role="trumpChoice"]) button { min-width: 0; }
  .felt-table { inset: 96px 42px 92px; }
  .game-seat { width: 158px; min-height: 70px; grid-template-columns: 35px minmax(0, 1fr) 30px; gap: 5px; padding: 6px; }
  .seat-avatar { width: 34px; height: 34px; font-size: 15px; }
  .seat-copy > strong { font-size: 11px; }
  .seat-copy > small { font-size: 8px; }
  .seat-score { gap: 4px; font-size: 7px; }
  .seat-cards { transform: scale(.74); transform-origin: center; }
  .seat-left { left: 5px; }
  .seat-right { right: 5px; }
  .played-card .card { width: 62px; min-height: 88px; }
  .played-card > span { font-size: 8px; }
  .hand-panel, .bid-panel { padding: 11px; }
}
@media (max-height: 600px) and (orientation: landscape) {
  .game-active { margin-top: 5px; }
  .game-hud { top: 57px; min-height: 54px; grid-template-columns: auto 1fr auto; gap: 9px; padding: 6px 9px; }
  .game-hud-status { grid-column: auto; grid-row: auto; justify-content: center; gap: 9px; }
  .game-hud-status > strong { font-size: 12px; }
  .game-hud-primary strong { font-size: 13px; }
  .phase-badge { padding: 5px 7px; font-size: 9px; }
  .game-hud-actions button { min-height: 34px; padding: 6px 8px; font-size: 11px; }
  .game-arena { min-height: 345px; border-radius: 20px; }
  .trump-indicator { left: 7px; top: 70px; width: 119px; min-height: 52px; gap: 5px; padding: 5px; }
  .trump-suit-mark { width: 32px; height: 40px; flex-basis: 32px; font-size: 19px; }
  .trump-upcard { width: 32px; min-height: 42px; flex-basis: 32px; }
  .trump-upcard .card-center { font-size: 16px; }
  .trump-indicator strong { font-size: 9px; }
  .felt-table { inset: 68px 135px 72px; border-width: 6px; }
  .game-seat { width: 178px; min-height: 61px; grid-template-columns: 32px minmax(0, 1fr) 31px; gap: 6px; border-radius: 11px; padding: 5px; }
  .seat-avatar { width: 31px; height: 31px; font-size: 14px; }
  .seat-copy > strong { font-size: 11px; }
  .seat-score { gap: 5px; font-size: 8px; }
  .seat-cards { transform: scale(.78); transform-origin: center; }
  .seat-top, .seat-top-left, .seat-top-right { top: 5px; }
  .seat-bottom { bottom: 5px; }
  .seat-left { left: 6px; }
  .seat-right { right: 6px; }
  .trick { min-height: 105px; }
  .played-card .card { width: 55px; min-height: 78px; }
  .played-card > span { font-size: 7px; }
  .card-center { font-size: 27px; }
  .game-action-deck { grid-template-columns: 215px minmax(0, 1fr); gap: 7px; }
  .bid-panel, .hand-panel { border-radius: 13px; padding: 8px; }
  .game-section-title { margin-bottom: 4px; }
  .game-section-title > span { font-size: 17px; }
  .bidbox { min-height: 68px; }
  .bidgrid button { min-height: 34px; padding: 4px; }
  .hand { min-height: 92px; gap: 4px; padding: 2px 2px 5px; }
  .hand .card { flex-basis: 58px; width: 58px; min-height: 84px; border-radius: 7px; }
  .card-corner { left: 5px; top: 4px; font-size: 12px; }
  .card-corner i { font-size: 10px; }
  .card-caption { right: 5px; bottom: 4px; font-size: 8px; }
}

/* Profile, settings and administration */
.profile-trigger { display: flex; align-items: center; gap: 8px; max-width: 210px; }
.profile-trigger > span:not(.button-icon):not(.profile-trigger-avatar) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-trigger i { color: var(--accent); font-style: normal; }
.profile-trigger-avatar { display: grid; width: 27px; height: 27px; flex: 0 0 27px; place-items: center; border: 1px solid rgb(232 189 88 / 42%); border-radius: 50%; background: linear-gradient(145deg, #e8c56c, #a87528); color: #211707; font: 900 12px/1 Georgia, serif; }
.profile-menu { width: 270px; padding: 10px; box-shadow: 0 22px 50px rgb(0 0 0 / 48%); }
.profile-menu button { min-height: 44px; border-radius: 10px; }
.profile-menu-summary { padding: 10px 9px 13px; }
.profile-menu-summary strong { color: #fff2cc; font: 700 16px/1.15 Georgia, serif; }
.profile-hero-panel, .admin-hero-panel {
  position: relative;
  overflow: hidden;
  display: grid;
  align-items: center;
  border: 1px solid rgb(232 189 88 / 25%);
  border-radius: 25px;
  background:
    radial-gradient(circle at 82% 18%, rgb(54 146 101 / 27%), transparent 34%),
    linear-gradient(135deg, #102b20, #091a14 72%);
  box-shadow: 0 26px 62px rgb(0 0 0 / 32%), inset 0 1px 0 rgb(255 255 255 / 5%);
}
.profile-hero-panel { grid-template-columns: auto minmax(210px, 1fr) auto auto; gap: 22px; padding: 25px; }
.profile-hero-panel::after, .admin-hero-panel::after { content: "♠"; position: absolute; right: -23px; bottom: -48px; color: rgb(232 189 88 / 6%); font: 900 150px/1 Georgia, serif; transform: rotate(-12deg); pointer-events: none; }
.profile-avatar-large { display: grid; width: 78px; height: 78px; place-items: center; border: 2px solid #e9c66b; border-radius: 24px; background: linear-gradient(145deg, #f0d17c, #9d6722); box-shadow: 0 15px 30px rgb(0 0 0 / 32%); color: #251907; font: 900 34px/1 Georgia, serif; transform: rotate(-3deg); }
.profile-hero-copy { min-width: 0; }
.profile-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.profile-title-row h2 { overflow: hidden; margin: 4px 0; color: #fff7df; font: 700 31px/1.05 Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.profile-hero-copy p { color: #94aa9f; font-size: 13px; }
.role-badge { border: 1px solid #49665a; border-radius: 999px; padding: 5px 9px; background: rgb(255 255 255 / 5%); color: #bfd0c7; font-size: 9px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.role-admin { border-color: rgb(232 189 88 / 48%); background: rgb(232 189 88 / 13%); color: #f2d584; }
.role-moderator { border-color: #5794c4; background: rgb(54 122 175 / 14%); color: #a9d7f7; }
.profile-hero-metrics { display: grid; grid-template-columns: repeat(3, minmax(70px, 1fr)); gap: 7px; }
.profile-hero-metrics > div { min-width: 76px; display: grid; gap: 3px; border: 1px solid rgb(255 255 255 / 8%); border-radius: 13px; padding: 10px; background: rgb(0 0 0 / 17%); text-align: center; }
.profile-hero-metrics span { color: #769083; font-size: 8px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.profile-hero-metrics strong { color: #f4d37c; font: 700 19px/1 Georgia, serif; }
.profile-hero-actions { position: relative; z-index: 1; display: grid; gap: 7px; }
.profile-view > .split, .profile-view > .box { margin-top: 14px; }
.profile-view > .box, .profile-view > .split > .box, .admin-view > .box { border-color: rgb(232 189 88 / 15%); border-radius: 19px; background: linear-gradient(150deg, rgb(18 38 30 / 95%), rgb(8 22 16 / 94%)); }
.admin-access-hint { margin-top: 13px; border: 1px dashed rgb(232 189 88 / 25%); border-radius: 12px; padding: 11px; background: rgb(232 189 88 / 6%); color: #b8aa81; font-size: 12px; line-height: 1.45; }
.settings-panel { scroll-margin-top: 105px; }
.settings-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.settings-heading h2 { margin: 5px 0; font: 700 25px/1.1 Georgia, serif; }
.settings-heading p { color: var(--muted); font-size: 13px; }
.settings-icon { display: grid; width: 54px; height: 54px; flex: 0 0 54px; place-items: center; border: 1px solid rgb(232 189 88 / 30%); border-radius: 17px; background: rgb(232 189 88 / 9%); color: var(--accent); font-size: 26px; }
.settings-panel .settings-grid { grid-template-columns: repeat(4, minmax(160px, 1fr)); gap: 11px; }
.settings-panel .settings-grid > label { min-height: 68px; align-content: center; border: 1px solid rgb(255 255 255 / 8%); border-radius: 14px; padding: 10px 12px; background: rgb(0 0 0 / 14%); }
.settings-panel .checkline { display: flex; justify-content: space-between; }
.settings-panel .checkline input { position: relative; order: 2; width: 44px; height: 24px; min-height: 24px; flex: 0 0 44px; appearance: none; border: 1px solid #40584d; border-radius: 999px; padding: 0; background: #14241d; cursor: pointer; }
.settings-panel .checkline input::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #71887c; transition: transform 150ms ease, background 150ms ease; }
.settings-panel .checkline input:checked { border-color: #dcb855; background: rgb(232 189 88 / 22%); }
.settings-panel .checkline input:checked::after { background: #f0ca68; transform: translateX(20px); }
.admin-hero-panel { grid-template-columns: minmax(0, 1fr) auto auto; gap: 22px; margin-bottom: 14px; padding: 27px; }
.admin-hero-panel h2 { margin: 5px 0 7px; color: #fff4d3; font: 700 31px/1.08 Georgia, serif; }
.admin-hero-panel p { max-width: 680px; color: #94aa9f; }
.admin-hero-status { display: grid; gap: 3px; border-left: 2px solid rgb(232 189 88 / 37%); padding-left: 16px; }
.admin-hero-status span, .admin-hero-status small { color: #799184; font-size: 9px; text-transform: uppercase; letter-spacing: .07em; }
.admin-hero-status strong { color: #efd17c; }
.admin-view > .box { margin-top: 12px; padding: 21px; }
.admin-view > .box > h2 { margin-top: 0; font: 700 21px/1.15 Georgia, serif; }
.admin-view textarea { border-color: #3b594c; background: #07130f; }
.mobile-dock { display: none; }
@media (max-width: 900px) {
  .profile-hero-panel { grid-template-columns: auto minmax(0, 1fr); }
  .profile-hero-metrics, .profile-hero-actions { grid-column: 1 / -1; }
  .profile-hero-actions { grid-template-columns: 1fr 1fr; }
  .settings-panel .settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .app { padding-bottom: 98px; }
  .tabs { width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { flex: 0 0 auto; white-space: nowrap; }
  .profile-hero-panel { grid-template-columns: 58px minmax(0, 1fr); gap: 14px; border-radius: 20px; padding: 18px; }
  .profile-avatar-large { width: 56px; height: 56px; border-radius: 17px; font-size: 24px; }
  .profile-title-row h2 { max-width: 205px; font-size: 23px; }
  .profile-hero-metrics { width: 100%; gap: 5px; }
  .profile-hero-metrics > div { min-width: 0; padding: 9px 5px; }
  .profile-hero-actions { grid-template-columns: 1fr; }
  .settings-panel .settings-grid { grid-template-columns: 1fr; }
  .settings-heading h2 { font-size: 21px; }
  .settings-icon { width: 45px; height: 45px; flex-basis: 45px; }
  .admin-hero-panel { grid-template-columns: 1fr; gap: 13px; border-radius: 20px; padding: 20px; }
  .admin-hero-panel h2 { font-size: 25px; }
  .admin-hero-status { border-left: 0; border-top: 1px solid rgb(232 189 88 / 20%); padding: 11px 0 0; }
  .mobile-dock:not(.hidden) { position: fixed; left: 10px; right: 10px; bottom: max(9px, env(safe-area-inset-bottom)); z-index: 180; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; border: 1px solid rgb(232 189 88 / 24%); border-radius: 18px; padding: 6px; background: rgb(7 20 15 / 94%); box-shadow: 0 18px 48px rgb(0 0 0 / 48%); backdrop-filter: blur(16px); }
  .mobile-dock button { min-width: 0; min-height: 54px; display: grid; place-items: center; gap: 2px; border: 1px solid transparent; border-radius: 13px; padding: 5px; background: transparent; box-shadow: none; color: #879e92; }
  .mobile-dock button span { font-size: 17px; line-height: 1; }
  .mobile-dock button small { font-size: 9px; }
  .mobile-dock button.selected { border-color: rgb(232 189 88 / 27%); background: rgb(232 189 88 / 11%); color: #f0d17c; }
}

@media (max-width: 760px), (pointer: coarse) {
  .topbar,
  .mobile-dock:not(.hidden),
  .profile-hero-panel,
  .admin-hero-panel {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  button,
  .download-link,
  .card {
    transition-duration: 80ms;
  }

  button:not(:disabled):hover,
  .download-link:hover {
    filter: none;
    transform: none;
  }
}

html {
  touch-action: manipulation;
}

button,
a,
input,
select,
summary,
[role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

button {
  -webkit-user-select: none;
  user-select: none;
}

/* Polished controls and vector icon system */
button.polished-button,
.download-link.polished-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgb(238 201 105 / 48%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 22%),
    inset 0 -1px 0 rgb(77 48 7 / 22%),
    0 8px 20px rgb(0 0 0 / 25%),
    0 0 0 1px rgb(232 189 88 / 5%);
}

button.polished-button.ghost,
.tabs button.polished-button,
.profile-trigger.polished-button {
  border-color: rgb(232 189 88 / 28%);
  background: linear-gradient(145deg, rgb(39 58 49 / 96%), rgb(14 29 23 / 98%));
  color: #f6edda;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 8%),
    0 7px 18px rgb(0 0 0 / 24%),
    0 0 0 1px rgb(232 189 88 / 4%);
}

button.polished-button.danger {
  border-color: rgb(232 93 105 / 48%);
  background: linear-gradient(145deg, #57262d, #291318);
  color: #ffd9dc;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 9%), 0 8px 20px rgb(0 0 0 / 25%);
}

.auth-mode-switch button.polished-button {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.auth-mode-switch button.polished-button.selected,
.tabs button.polished-button.selected,
.mobile-dock button.polished-button.selected {
  border-color: rgb(244 207 111 / 65%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 15%),
    0 0 0 1px rgb(232 189 88 / 16%),
    0 0 22px rgb(232 189 88 / 16%);
}

button.polished-button::after,
.download-link.polished-button::after {
  content: "";
  position: absolute;
  inset: -80% auto -80% -45%;
  width: 34%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 28%), transparent);
  opacity: 0;
  transform: translateX(-220%) rotate(15deg);
  transition: transform 440ms ease, opacity 180ms ease;
}

button.polished-button:not(:disabled):hover::after,
button.polished-button:not(:disabled):focus-visible::after,
.download-link.polished-button:hover::after {
  opacity: 1;
  transform: translateX(560%) rotate(15deg);
}

button.polished-button:not(:disabled):hover,
button.polished-button:not(:disabled):focus-visible,
.download-link.polished-button:hover,
.download-link.polished-button:focus-visible {
  border-color: rgb(248 213 123 / 78%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 22%),
    0 10px 24px rgb(0 0 0 / 30%),
    0 0 22px rgb(232 189 88 / 20%);
}

button.polished-button:not(:disabled):active {
  transform: translateY(1px) scale(.975);
  box-shadow: inset 0 2px 5px rgb(0 0 0 / 30%), 0 3px 9px rgb(0 0 0 / 24%);
}

.has-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.button-icon {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  display: inline-grid;
  place-items: center;
  color: currentColor;
  filter: drop-shadow(0 1px 4px rgb(255 218 122 / 16%));
  transition: transform 180ms cubic-bezier(.2, .8, .2, 1), filter 180ms ease;
}

.button-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.polished-button:not(:disabled):hover .button-icon,
.polished-button:focus-visible .button-icon {
  transform: translateY(-1px) scale(1.09);
  filter: drop-shadow(0 0 6px rgb(255 218 122 / 42%));
}

.polished-button:not(:disabled):active .button-icon {
  transform: scale(.86) rotate(-5deg);
}

.mobile-dock .button-icon {
  width: 21px;
  height: 21px;
  flex-basis: 21px;
}

@media (prefers-reduced-motion: reduce) {
  button.polished-button,
  .download-link.polished-button,
  .button-icon,
  button.polished-button::after,
  .download-link.polished-button::after {
    transition: none !important;
    animation: none !important;
  }
}

.animations-disabled button.polished-button,
.animations-disabled .download-link.polished-button,
.animations-disabled .button-icon,
.animations-disabled button.polished-button::after,
.animations-disabled .download-link.polished-button::after {
  transition: none !important;
  animation: none !important;
}

/* Compact navigation */
.main-menu-toggle { display: none; }
.main-menu-panel { display: contents; }

@media (max-width: 1200px) {
  .topbar {
    min-height: 58px;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
  }

  .brand-lockup { min-width: 0; margin-right: auto; }
  .brand-mark { width: 36px; height: 40px; flex: 0 0 36px; font-size: 21px; }
  .topbar h1 { font-size: 20px; }
  .topbar p { max-width: 170px; margin-top: 2px; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
  .tabs { position: relative; width: auto; flex: 0 0 auto; align-items: center; overflow: visible; }
  .main-menu-toggle { min-height: 40px; display: inline-flex; padding: 8px 11px; }
  .main-menu-panel {
    position: absolute;
    top: calc(100% + 9px);
    right: 0;
    z-index: 420;
    width: min(286px, calc(100vw - 20px));
    display: none;
    grid-template-columns: 1fr;
    gap: 5px;
    border: 1px solid rgb(232 189 88 / 32%);
    border-radius: 17px;
    padding: 8px;
    background: linear-gradient(155deg, rgb(17 39 30 / 99%), rgb(5 17 12 / 99%));
    box-shadow: 0 22px 56px rgb(0 0 0 / 58%);
  }
  .main-menu-panel.open { display: grid; }
  .main-menu-panel > button {
    width: 100%;
    min-height: 42px;
    justify-content: flex-start;
    overflow: visible;
    padding: 8px 11px;
    text-align: left;
    text-overflow: clip;
    white-space: normal;
  }
  .profile-trigger { width: 42px; min-height: 40px; justify-content: center; padding: 5px; }
  .profile-trigger .button-icon,
  .profile-trigger > span:not(.profile-trigger-avatar):not(.profile-trigger-frame) { display: none; }
  .profile-trigger-avatar { width: 29px; height: 29px; flex-basis: 29px; }
}

/* Single-screen game cockpit */
@media (max-width: 1200px) {
  :is(body.game-session-active,.game-session-surface) {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
  }
  .game-session-active .app {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0 6px 5px;
  }
  .game-session-active .topbar {
    position: relative;
    top: auto;
    z-index: 300;
    flex: 0 0 52px;
    min-height: 52px;
    border-radius: 0 0 13px 13px;
    padding: 5px 7px;
    backdrop-filter: none;
  }
  .game-session-active .brand-mark { width: 31px; height: 34px; flex-basis: 31px; font-size: 18px; }
  .game-session-active .topbar h1 { font-size: 17px; }
  .game-session-active .topbar p { display: none; }
  .game-session-active .mobile-dock { display: none !important; }
  .game-session-active :is(#home,[data-game-role="home"]).game-active {
    min-height: 0;
    flex: 1 1 auto;
    margin: 4px 0 0;
    overflow: hidden;
  }
  .game-active :is(#game,[data-game-role="game"]) {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 46px minmax(0, 1fr) 126px 166px;
    gap: 5px;
    overflow: hidden;
  }
  .game-active .game-hud {
    position: relative;
    top: auto;
    grid-row: 1;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    border-radius: 11px;
    padding: 4px 7px;
    backdrop-filter: none;
  }
  .game-active .game-hud-primary { gap: 6px; min-width: 0; }
  .game-active .game-hud-primary strong { font-size: 11px; }
  .game-active .game-hud-primary > div > span { display: none; }
  .game-active .phase-badge { padding: 4px 6px; font-size: 7px; }
  .game-active .game-hud-status { grid-column: 2; grid-row: 1; max-width: 48vw; gap: 6px; overflow: hidden; }
  .game-active .game-hud-status > span:first-child { font-size: 9px; }
  .game-active .game-hud-status > strong { font-size: 9px; }
  .game-active .game-hud-status .turn-timer { font-size: 9px; }
  .game-active .game-hud-actions { display: flex; }
  .game-active .game-arena {
    grid-row: 2;
    min-height: 0;
    height: auto;
    border-radius: 17px;
  }
  .game-active .game-action-deck {
    grid-row: 3;
    min-height: 0;
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 5px;
  }
  .game-active .bid-panel,
  .game-active .hand-panel { min-height: 0; overflow: hidden; border-radius: 11px; padding: 5px; }
  .game-active .game-section-title { gap: 4px; margin-bottom: 2px; }
  .game-active .game-section-title > span,
  .game-active .game-section-title small { display: none; }
  .game-active .game-section-title strong { font-size: 9px; }
  .game-active .bidbox { min-height: 0; height: calc(100% - 14px); }
  .game-active .bid-instruction,
  .game-active .control-placeholder { margin: 0 0 2px; font-size: 8px; }
  .game-active .bidgrid { gap: 2px; }
  .game-active .bidgrid button { min-height: 25px; border-radius: 6px; padding: 2px; font-size: 10px; }
  .game-active .hand { min-height: 0; height: calc(100% - 14px); align-items: end; gap: 1px; overflow: hidden; padding: 0 1px 2px; }
  .game-active .hand .card {
    min-width: 35px;
    max-width: 57px;
    min-height: 80px;
    flex: 1 1 0;
    border-radius: 7px;
    padding: 4px;
  }
  .game-active .card-corner { left: 4px; top: 3px; font-size: 11px; }
  .game-active .card-corner i { font-size: 9px; }
  .game-active .card-center { font-size: 25px; }
  .game-active .card-caption { right: 4px; bottom: 3px; font-size: 7px; }
  .game-active .game-extras {
    grid-row: 4;
    min-height: 0;
    display: block;
    overflow: hidden;
    border-radius: 11px;
    padding: 0;
    background: rgb(6 18 13 / 94%);
  }
  .game-active .game-extras > summary,
  .game-active #roomVideo,
  .game-active #roomMusic { display: none !important; }
  .game-active .room-social {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 4px;
    margin: 0;
    border: 0;
    border-radius: 0;
    padding: 5px;
    box-shadow: none;
  }
  .game-active .room-social .section-heading { grid-column: 1 / -1; min-height: 24px; }
  .game-active .room-social .section-heading h2 { margin: 0; font-size: 10px; }
  .game-active #communicationMenuToggle { display: none; }
  .game-active .social-feed { min-height: 0; max-height: none; overflow-y: auto; border-radius: 7px; padding: 5px; font-size: 9px; }
  .game-active .social-message { gap: 4px; font-size: 9px; }
  .game-active .communication-menu,
  .game-active .communication-menu.hidden {
    min-height: 0;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 3px;
    overflow: hidden;
    margin: 0;
    border-radius: 7px;
    padding: 4px;
  }
  .game-active .segmented-control { gap: 2px; padding-bottom: 3px; }
  .game-active .segmented-control button { min-height: 26px; padding: 3px; font-size: 8px; }
  .game-active .communication-content { min-height: 0; overflow-y: auto; }
  .game-active .social-actions { align-content: start; gap: 3px; margin-top: 2px; }
  .game-active .social-actions button { min-height: 26px; padding: 3px 5px; font-size: 8px; }
  .game-active .social-actions.emoji-actions button { min-width: 30px; font-size: 16px; }
  .game-active #textMessageForm { align-items: center; margin: 0; }
  .game-active #textMessage { min-height: 30px; padding: 5px 7px; font-size: 10px; }
  .game-active #sendTextMessage { min-height: 30px; padding: 4px 7px; font-size: 0; }
  .game-active #sendTextMessage .button-icon { margin: 0; }
  .game-active .game-log { display: none; }
  .game-active #violationNotice:not(.hidden),
  .game-active :is(#trumpChoice,[data-game-role="trumpChoice"]):not(.hidden),
  .game-active :is(#jokerChoice,[data-game-role="jokerChoice"]):not(.hidden),
  .game-active #gameStandingsBox:not(.hidden) {
    position: absolute;
    left: 5px;
    right: 5px;
    top: 50px;
    z-index: 120;
    max-height: calc(100% - 55px);
    overflow: auto;
  }
}

@media (max-height: 600px) and (orientation: landscape) {
  .game-session-active .topbar { flex-basis: 42px; min-height: 42px; }
  .game-session-active .brand-mark { display: none; }
  .game-session-active .topbar h1 { font-size: 16px; }
  .game-session-active .main-menu-toggle,
  .game-session-active .profile-trigger { min-height: 34px; height: 34px; }
  .game-active :is(#game,[data-game-role="game"]) {
    grid-template-columns: minmax(0, 1fr) clamp(205px, 27vw, 270px);
    grid-template-rows: 38px minmax(0, 1fr) 88px;
    gap: 4px;
  }
  .game-active .game-hud { grid-column: 1; grid-row: 1; }
  .game-active .game-arena { grid-column: 1; grid-row: 2; min-height: 0; }
  .game-active .game-action-deck { grid-column: 1; grid-row: 3; grid-template-columns: 145px minmax(0, 1fr); }
  .game-active .game-extras { grid-column: 2; grid-row: 1 / 4; }
  .game-active .room-social { grid-template-columns: 1fr; grid-template-rows: auto minmax(45px, .65fr) minmax(0, 1.35fr); }
  .game-active .room-social .section-heading { grid-column: 1; }
  .game-active .game-hud-status { max-width: 50vw; }
  .game-active .game-arena .felt-table { inset: 43px 100px 45px; border-width: 5px; }
  .game-active .trump-indicator { left: 4px; top: 40px; width: 94px; min-height: 42px; padding: 3px; }
  .game-active .trump-suit-mark { width: 27px; height: 34px; flex-basis: 27px; font-size: 16px; }
  .game-active .trump-upcard { width: 27px; min-height: 36px; flex-basis: 27px; }
  .game-active .game-seat { width: 142px; min-height: 45px; grid-template-columns: 25px minmax(0, 1fr) 25px; gap: 3px; border-radius: 8px; padding: 3px; }
  .game-active .seat-avatar { width: 24px; height: 24px; font-size: 11px; }
  .game-active .seat-copy > strong { font-size: 9px; }
  .game-active .seat-copy > small { display: none; }
  .game-active .seat-score { gap: 3px; font-size: 6px; }
  .game-active .seat-cards { transform: scale(.57); }
  .game-active .trick { min-height: 62px; }
  .game-active .played-card .card { width: 43px; min-height: 59px; }
  .game-active .played-card > span { display: none; }
  .game-active .hand .card { min-height: 62px; max-width: 49px; }
  .game-active .locked-bid { gap: 5px; font-size: 8px; }
  .game-active .locked-bid strong { width: 31px; height: 31px; font-size: 15px; }
}

/* Club lobby */
.lobby-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(290px, .65fr);
  gap: 16px;
}

.lobby-hero,
.lobby-profile-card,
.lobby-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgb(232 189 88 / 18%);
  border-radius: 24px;
  background: linear-gradient(145deg, rgb(17 39 30 / 96%), rgb(6 19 13 / 96%));
  box-shadow: 0 22px 48px rgb(0 0 0 / 24%), inset 0 1px 0 rgb(255 255 255 / 3%);
}

.lobby-hero {
  min-height: 330px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 34%);
  align-items: center;
  padding: clamp(26px, 4vw, 50px);
  background:
    radial-gradient(circle at 82% 28%, rgb(232 189 88 / 17%), transparent 29%),
    radial-gradient(circle at 8% 100%, rgb(135 25 53 / 46%), transparent 46%),
    linear-gradient(125deg, #38151f, #151b18 57%, #0b2118);
}

.lobby-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgb(255 255 255 / 4%), transparent 34%, rgb(0 0 0 / 13%));
  pointer-events: none;
}

.lobby-hero-copy { position: relative; z-index: 2; min-width: 0; }
.lobby-hero .eyebrow,
.lobby-panel .eyebrow { color: #d8b867; letter-spacing: .17em; }
.lobby-hero h2 {
  max-width: 720px;
  margin: 7px 0 9px;
  color: #fff8e8;
  font: 700 clamp(29px, 3.2vw, 46px)/1.02 Georgia, "Times New Roman", serif;
  letter-spacing: -.045em;
}
.lobby-hero h2 span { color: #f0cf77; }
.lobby-hero-copy > p { max-width: 590px; color: #d0c5bc; font-size: 14px; }

.lobby-hero-actions {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-top: 24px;
}

.lobby-quick-button {
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1px solid #f4d782;
  padding: 9px 22px 9px 11px;
  background: linear-gradient(180deg, #f6dc8d, #d5a940 72%, #ac7925);
  box-shadow: 0 10px 28px rgb(0 0 0 / 34%), inset 0 1px 0 rgb(255 255 255 / 64%);
  color: #241708;
  text-align: left;
}
.lobby-quick-button > span:last-child { display: grid; gap: 2px; }
.lobby-quick-button strong { font-size: 16px; }
.lobby-quick-button small { color: #5c411f; font-size: 10px; font-weight: 700; }
.lobby-quick-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(55 31 5 / 20%);
  border-radius: 50%;
  background: rgb(255 255 255 / 24%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 34%);
  font-size: 15px;
  text-indent: 2px;
}
.lobby-secondary-button { min-height: 64px; border-color: rgb(241 207 113 / 24%); color: #f4e8ca; }

.lobby-stat-strip {
  width: min(530px, 100%);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 25px;
  border: 1px solid rgb(241 207 113 / 15%);
  border-radius: 14px;
  overflow: hidden;
  background: rgb(241 207 113 / 12%);
}
.lobby-stat-strip > div { display: grid; gap: 2px; padding: 9px 13px; background: rgb(7 15 12 / 53%); }
.lobby-stat-strip span { color: #a99c8b; font-size: 9px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.lobby-stat-strip strong { color: #fff8e8; font-size: 17px; font-variant-numeric: tabular-nums; }

.lobby-card-art { position: relative; z-index: 1; height: 230px; transform: translateX(10px); }
.lobby-card {
  position: absolute;
  top: 18px;
  left: 50%;
  width: 128px;
  height: 184px;
  display: grid;
  place-items: center;
  border: 5px solid #eee2cc;
  border-radius: 14px;
  box-shadow: 0 24px 36px rgb(0 0 0 / 52%);
  font: 800 37px/1 Georgia, serif;
}
.lobby-card-back {
  margin-left: -104px;
  background: repeating-linear-gradient(45deg, #5f1729 0 6px, #8b2b43 6px 9px);
  color: rgb(247 218 153 / 88%);
  transform: rotate(-14deg) translateY(8px);
}
.lobby-card-back::after { content: ""; position: absolute; inset: 7px; border: 1px solid rgb(245 211 128 / 52%); border-radius: 8px; }
.lobby-card-front {
  margin-left: -21px;
  align-content: space-between;
  justify-items: start;
  padding: 13px;
  background: linear-gradient(145deg, #fff9ec, #d8c9b3);
  color: #741b2e;
  transform: rotate(11deg);
}
.lobby-card-front i { justify-self: center; align-self: center; font-size: 58px; font-style: normal; }
.lobby-joker-mark {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border: 1px solid #e5bd5a;
  border-radius: 50%;
  background: radial-gradient(circle, #b9485a, #5e1124 64%, #1d0b10);
  box-shadow: 0 13px 26px rgb(0 0 0 / 45%), inset 0 0 0 5px rgb(255 222 135 / 12%);
  color: #f5d276;
  font-size: 27px;
}

.lobby-profile-card { padding: 14px; }
.lobby-profile-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 115px; background: radial-gradient(circle at 25% 0%, rgb(158 35 61 / 29%), transparent 61%); pointer-events: none; }
.lobby-player-heading {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  border: 0;
  padding: 8px;
  background: transparent;
  box-shadow: none;
  color: #fff8e9;
  text-align: left;
}
.lobby-player-heading > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.lobby-player-heading strong { overflow: hidden; font: 700 18px/1.1 Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.lobby-player-heading small { color: #91a99d; font-size: 10px; }
.lobby-avatar {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgb(236 198 101 / 48%);
  border-radius: 16px;
  background: linear-gradient(145deg, #50202b, #15291f);
  color: #f0cc6c;
  font: 700 23px/1 Georgia, serif;
}
.lobby-avatar img { width: 100%; height: 100%; object-fit: cover; }
.lobby-chevron { color: #d8b867; font: 300 30px/1 Georgia, serif; }
.lobby-wallet { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 9px 0 11px; }
.lobby-wallet > div { display: flex; align-items: center; gap: 8px; min-width: 0; border: 1px solid rgb(232 189 88 / 12%); border-radius: 13px; padding: 9px; background: rgb(0 0 0 / 15%); }
.lobby-wallet > div > span:last-child { min-width: 0; display: grid; gap: 1px; }
.lobby-wallet small { color: #829b8e; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.lobby-wallet strong { overflow: hidden; color: #f6ecd4; font-size: 14px; text-overflow: ellipsis; }
.wallet-token { width: 25px; height: 25px; flex: 0 0 25px; display: grid; place-items: center; border-radius: 50%; font-size: 11px; }
.wallet-chip { background: linear-gradient(145deg, #f5d87b, #9f6a18); color: #3a2507; }
.wallet-shell { background: linear-gradient(145deg, #c7e2dd, #477f75); color: #102f2a; }

.lobby-progress-list { display: grid; gap: 6px; }
.lobby-progress-list button {
  width: 100%;
  min-height: 46px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 1px solid transparent;
  padding: 6px 8px;
  background: rgb(255 255 255 / 2.5%);
  box-shadow: none;
  color: #eef3ed;
  text-align: left;
}
.lobby-progress-list button:hover { border-color: rgb(232 189 88 / 18%); background: rgb(232 189 88 / 7%); }
.lobby-progress-list button > span:last-child { min-width: 0; display: grid; gap: 2px; }
.lobby-progress-list button strong { font-size: 12px; }
.lobby-progress-list button small { overflow: hidden; color: #81978c; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.lobby-feature-icon { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid rgb(231 192 95 / 20%); border-radius: 10px; background: rgb(117 31 49 / 18%); color: #e4c268; font-size: 16px; }

.lobby-panel { padding: 19px; }
.lobby-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.lobby-panel-heading h2 { margin: 3px 0 0; color: #f3e5c2; font: 700 21px/1.1 Georgia, serif; }
.lobby-panel-number { color: rgb(232 189 88 / 22%); font: 700 32px/1 Georgia, serif; }
.lobby-form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.lobby-form-grid label { gap: 5px; color: #9cb0a5; font-size: 10px; font-weight: 750; }
.lobby-form-grid select { min-height: 42px; padding: 8px 10px; font-size: 12px; }
.lobby-create-actions { display: grid; grid-template-columns: minmax(150px, .42fr) minmax(260px, .58fr); gap: 8px; margin-top: 12px; }
.lobby-create-actions > button { min-height: 44px; }
.lobby-code-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.lobby-code-entry input { min-height: 44px; padding: 9px 11px; }
.lobby-code-entry button { min-height: 44px; }

.lobby-roomline { margin-bottom: 8px; }
.lobby-roomline > span:first-child { min-height: 37px; display: inline-flex; align-items: center; border: 1px solid rgb(232 189 88 / 12%); border-radius: 11px; padding: 7px 10px; background: rgb(0 0 0 / 14%); color: #93a89d; }
.lobby-roomline b { margin-left: 6px; color: #f0ce74; }
.lobby-current-room .empty-state { min-height: 68px; display: grid; place-items: center; border: 1px dashed rgb(232 189 88 / 15%); border-radius: 13px; padding: 12px; text-align: center; }
.lobby-players { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.lobby-open-rooms { grid-column: 1 / -1; }
.lobby-rooms-heading { align-items: center; }
.lobby-rooms-heading .eyebrow { display: block; }
.lobby-room-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lobby-room-list > p { grid-column: 1 / -1; min-height: 54px; display: grid; place-items: center; }
.lobby-room-list .room-row { grid-template-columns: minmax(0, 1fr) auto auto; border-radius: 14px; padding: 11px 12px; background: rgb(4 16 11 / 44%); box-shadow: none; }
.lobby-room-list .room-row button { min-height: 38px; padding: 8px 13px; }
.game-active > .lobby-shell { display: none; }

@media (max-width: 1050px) {
  .lobby-shell { grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); gap: 11px; }
  .lobby-hero { min-height: 310px; grid-template-columns: minmax(0, 1fr) 190px; padding: 28px; }
  .lobby-card-art { transform: scale(.82); transform-origin: center; }
  .lobby-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lobby-room-list { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .lobby-shell { grid-template-columns: 1fr; }
  .lobby-hero { min-height: 0; grid-template-columns: minmax(0, 1fr) 150px; padding: 24px; }
  .lobby-card-art { height: 190px; transform: scale(.72); }
  .lobby-profile-card { display: grid; grid-template-columns: minmax(190px, .75fr) minmax(0, 1.25fr); gap: 8px 12px; }
  .lobby-player-heading { align-self: start; }
  .lobby-wallet { grid-column: 1; margin: 0; }
  .lobby-progress-list { grid-column: 2; grid-row: 1 / 3; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lobby-create-actions { grid-template-columns: 1fr 1.3fr; }
}

@media (max-width: 560px) {
  .lobby-hero { grid-template-columns: 1fr; }
  .lobby-card-art { display: none; }
  .lobby-hero-actions { display: grid; }
  .lobby-profile-card { display: block; }
  .lobby-wallet { margin: 9px 0 11px; }
  .lobby-progress-list { grid-template-columns: 1fr; }
  .lobby-form-grid, .lobby-create-actions { grid-template-columns: 1fr; }
}

@media (max-height: 600px) and (orientation: landscape) {
  :is(#home,[data-game-role="home"]):not(.game-active) { margin-top: 8px; }
  .lobby-shell { grid-template-columns: minmax(0, 1.35fr) minmax(250px, .65fr); gap: 8px; }
  .lobby-hero { min-height: 228px; grid-template-columns: 1fr; padding: 17px 20px; border-radius: 18px; }
  .lobby-hero h2 { margin: 3px 0 5px; font-size: clamp(25px, 6.5vh, 35px); }
  .lobby-hero-copy > p { font-size: 11px; }
  .lobby-card-art { display: none; }
  .lobby-hero-actions { margin-top: 12px; }
  .lobby-quick-button, .lobby-secondary-button { min-height: 48px; }
  .lobby-quick-icon { width: 32px; height: 32px; flex-basis: 32px; }
  .lobby-stat-strip { margin-top: 11px; }
  .lobby-stat-strip > div { padding: 6px 10px; }
  .lobby-profile-card { display: block; border-radius: 18px; padding: 8px; }
  .lobby-player-heading { grid-template-columns: 40px minmax(0, 1fr) auto; padding: 4px; }
  .lobby-avatar { width: 40px; height: 40px; border-radius: 12px; font-size: 18px; }
  .lobby-wallet { margin: 4px 0; }
  .lobby-wallet > div { padding: 5px 7px; }
  .lobby-progress-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
  .lobby-progress-list button { min-height: 39px; gap: 5px; padding: 4px; }
  .lobby-feature-icon { width: 27px; height: 27px; font-size: 13px; }
  .lobby-progress-list button small { display: none; }
  .lobby-panel { border-radius: 18px; padding: 13px; }
  .lobby-form-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lobby-current-room { min-height: 0; }
  .lobby-open-rooms { margin-bottom: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .lobby-card { transform: none; }
}

/* Fixed application shell: lobby windows, section panels and full-screen table */
body.home-view-active:not(:is(.game-session-active,.tutorial-session-active)),
body.panel-view-active {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.home-view-active:not(:is(.game-session-active,.tutorial-session-active)) .app,
.panel-view-active .app {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 10px;
}

:is(#home,[data-game-role="home"]):not(.game-active) {
  position: relative;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
  margin-top: 10px;
}

:is(#home,[data-game-role="home"]):not(.game-active) > :is(#game,[data-game-role="game"]) { display: none !important; }
:is(#home,[data-game-role="home"]):not(.game-active) .lobby-shell {
  height: 100%;
  grid-template-columns: minmax(0, 1.5fr) minmax(270px, .62fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 12px;
}
:is(#home,[data-game-role="home"]):not(.game-active) .lobby-hero,
:is(#home,[data-game-role="home"]):not(.game-active) .lobby-profile-card { min-height: 0; height: 100%; }
:is(#home,[data-game-role="home"]):not(.game-active) .lobby-open-rooms,
:is(#home,[data-game-role="home"]):not(.game-active) .lobby-room-setup,
:is(#home,[data-game-role="home"]):not(.game-active) .lobby-current-room { display: none; }
:is(#home,[data-game-role="home"]).lobby-layer-active::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 300;
  border-radius: 22px;
  background: rgb(2 10 7 / 72%);
  backdrop-filter: blur(5px);
}
:is(#home,[data-game-role="home"]):not(.game-active) .lobby-panel.lobby-layer-open {
  position: absolute;
  inset: clamp(8px, 2vw, 24px);
  z-index: 310;
  display: block;
  overflow: hidden;
  border-color: rgb(232 189 88 / 36%);
  background: linear-gradient(145deg, rgb(18 42 31 / 99%), rgb(5 18 12 / 99%));
  box-shadow: 0 30px 80px rgb(0 0 0 / 62%);
}
.lobby-panel-close {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  color: #f3d47f;
  font-size: 25px;
  line-height: 1;
}
.lobby-panel-controls { display: flex; align-items: center; gap: 7px; }
.lobby-layer-open .lobby-room-list {
  max-height: calc(100% - 72px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow-y: auto;
  padding-right: 4px;
}

.app-panel-view:not(.hidden) {
  min-height: 0;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: clamp(145px, 18vw, 210px) minmax(0, 1fr);
  gap: 10px;
  overflow: hidden;
  margin-top: 10px;
}
.app-view-rail,
.app-view-stage {
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgb(232 189 88 / 18%);
  border-radius: 21px;
  background: linear-gradient(155deg, rgb(15 36 27 / 98%), rgb(5 17 12 / 98%));
  box-shadow: 0 20px 50px rgb(0 0 0 / 27%);
}
.app-view-rail { display: flex; flex-direction: column; gap: 7px; padding: 12px; }
.app-view-rail-heading { display: grid; gap: 2px; padding: 4px 5px 8px; }
.app-view-rail-heading span { color: #80978b; font-size: 9px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.app-view-rail-heading strong { color: #f5e7c3; font: 700 20px/1.1 Georgia, serif; }
.app-view-home { min-height: 38px; padding: 7px 9px; text-align: left; }
.app-view-rail nav { min-height: 0; display: grid; gap: 5px; }
.app-view-rail nav button {
  min-height: 43px;
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  border: 1px solid transparent;
  padding: 7px 8px;
  background: transparent;
  box-shadow: none;
  color: #a8bbb1;
  text-align: left;
}
.app-view-rail nav button > span { color: #6f8b7d; font: 700 10px/1 Georgia, serif; }
.app-view-rail nav button > strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.app-view-rail nav button.selected { border-color: rgb(232 189 88 / 25%); background: linear-gradient(135deg, rgb(123 34 55 / 38%), rgb(232 189 88 / 8%)); color: #f5dfaa; }
.app-view-rail nav button.selected > span { color: #e8c568; }
.app-view-stage { padding: 10px; }
.app-view-page { width: 100%; height: 100%; min-height: 0; display: none; gap: 10px; }
.app-view-page.panel-page-active { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.app-view-page > * { min-width: 0; min-height: 0; height: 100%; margin: 0 !important; overflow: auto; }
.app-view-page > .box,
.app-view-page > .split > .box { border-radius: 16px; padding: 13px; }
.app-view-page > .split { gap: 8px; }
.app-view-page .box h2 { margin-top: 0; font-size: 16px; }
.app-view-page .cards { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.app-view-page .profile-hero-panel { grid-template-columns: 58px minmax(0, 1fr); align-content: start; gap: 10px; border-radius: 16px; padding: 14px; }
.app-view-page .profile-avatar-large { width: 56px; height: 56px; }
.app-view-page .profile-hero-metrics,
.app-view-page .profile-hero-actions { grid-column: 1 / -1; }
.app-view-page .profile-hero-actions { grid-template-columns: 1fr; }
.app-view-page .profile-hero-actions button { min-height: 36px; padding: 7px 9px; }

/* The active match is one table, not a collection of web blocks. */
.game-session-active .app { width: 100%; padding: 0; }
.game-session-active .topbar { display: none !important; }
.game-session-active :is(#home,[data-game-role="home"]).game-active { width: 100%; height: 100vh; height: 100dvh; flex: 1 1 auto; margin: 0; }
.game-active :is(#game,[data-game-role="game"]) {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 43px minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  background: #04110c;
}
.game-active .game-hud {
  position: relative;
  top: auto;
  z-index: 200;
  grid-column: 1;
  grid-row: 1;
  min-height: 43px;
  display: grid;
  grid-template-columns: minmax(185px, auto) minmax(0, 1fr) auto;
  gap: 8px;
  border: 0;
  border-bottom: 1px solid rgb(232 189 88 / 18%);
  border-radius: 0;
  padding: 4px 7px;
  background: linear-gradient(90deg, #071914, #101612 55%, #190d11);
  box-shadow: 0 7px 18px rgb(0 0 0 / 32%);
}
.game-active .game-hud-primary { gap: 6px; min-width: 0; }
.game-active .game-hud-primary strong { font-size: 11px; }
.game-active .game-hud-primary > div > span { display: none; }
.game-active .phase-badge { padding: 4px 7px; font-size: 7px; }
.game-active .game-hud-status { grid-column: 2; grid-row: 1; justify-content: center; gap: 8px; min-width: 0; }
.game-active .game-hud-status > span,
.game-active .game-hud-status > strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.game-active .game-hud-actions { display: flex; gap: 4px; }
.game-active .game-hud-actions button { min-height: 32px; padding: 4px 7px; font-size: 8px; }
.game-active .game-arena {
  position: relative;
  grid-column: 1;
  grid-row: 2;
  min-height: 0;
  height: auto;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(ellipse at center, rgb(34 133 86 / 26%), transparent 62%),
    linear-gradient(145deg, #071a12, #04100c);
}
.game-active .felt-table {
  inset: 38px 82px 105px;
  border-width: 7px;
  border-radius: 48% / 44%;
  background:
    radial-gradient(ellipse at 45% 40%, rgb(72 169 119 / 34%), transparent 58%),
    repeating-linear-gradient(35deg, rgb(255 255 255 / 1.4%) 0 1px, transparent 1px 5px),
    #0b5638;
  box-shadow: 0 18px 38px rgb(0 0 0 / 48%), inset 0 0 0 3px #a57a42, inset 0 0 85px rgb(0 0 0 / 38%);
}
.game-active .table-monogram { font-size: clamp(48px, 8vw, 92px); }
.game-active .trump-indicator { left: 7px; top: 40px; width: 104px; min-height: 42px; gap: 4px; border-radius: 10px; padding: 4px; }
.game-active .trump-suit-mark { width: 28px; height: 34px; flex-basis: 28px; font-size: 17px; }
.game-active .trump-upcard { width: 28px; min-height: 36px; flex-basis: 28px; }
.game-active .trump-indicator small { font-size: 6px; }
.game-active .trump-indicator strong { font-size: 8px; }
.game-active .game-seat { width: 150px; min-height: 46px; grid-template-columns: 28px minmax(0, 1fr) 27px; gap: 4px; border-radius: 10px; padding: 4px; background: linear-gradient(145deg, rgb(12 29 23 / 96%), rgb(4 13 10 / 97%)); }
.game-active .seat-avatar { width: 27px; height: 27px; font-size: 11px; }
.game-active .seat-copy > strong { font-size: 9px; }
.game-active .seat-copy > small { display: none; }
.game-active .seat-score { gap: 4px; font-size: 6px; }
.game-active .seat-cards { transform: scale(.62); transform-origin: center; }
.game-active .seat-top { top: 4px; }
.game-active .seat-bottom { bottom: 103px; }
.game-active .seat-left { left: 5px; }
.game-active .seat-right { right: 5px; }
.game-active .seat-top-left { left: 13%; top: 4px; }
.game-active .seat-top-right { right: 13%; top: 4px; }
.game-active .trick { min-height: 88px; }
.game-active .played-card { margin-left: -10px; }
.game-active .played-card .card { width: 54px; min-height: 76px; border-radius: 7px; }
.game-active .played-card > span { display: none; }
.game-active .game-action-deck { display: contents; }
.game-active .hand-panel {
  position: absolute;
  z-index: 30;
  left: 70px;
  right: 70px;
  bottom: 2px;
  height: 102px;
  min-height: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
.game-active .hand-panel .game-section-title { display: none; }
.game-active .hand { height: 100%; min-height: 0; align-items: end; gap: 2px; overflow: visible; padding: 0 2px 3px; }
.game-active .hand .card { min-width: 45px; max-width: 66px; min-height: 91px; flex: 1 1 0; border-radius: 8px; padding: 5px; }
.game-active .hand .card.playable { transform: translateY(-7px); }
.game-active .card-corner { left: 5px; top: 4px; font-size: 12px; }
.game-active .card-corner i { font-size: 10px; }
.game-active .card-center { font-size: 28px; }
.game-active .card-caption { right: 5px; bottom: 4px; font-size: 8px; }
.game-active .card.suit-h { color: #c31532; }
.game-active .card.suit-d { color: #d42d28; }
.game-active .card.suit-s { color: #12191b; }
.game-active .card.suit-c { color: #123c2d; }
.game-active .card.red .card-center,
.game-active .card.red .card-corner { text-shadow: 0 1px 0 #fff, 0 0 8px rgb(193 21 50 / 10%); }
.game-active .bid-panel { display: none; }
.game-active .bid-panel.action-required {
  position: absolute;
  z-index: 120;
  left: 50%;
  top: 42%;
  width: min(390px, calc(100% - 180px));
  min-height: 0;
  display: block;
  border-color: #e4bd57;
  border-radius: 16px;
  padding: 12px;
  background: linear-gradient(145deg, rgb(24 48 37 / 99%), rgb(6 18 13 / 99%));
  box-shadow: 0 25px 70px rgb(0 0 0 / 64%);
  transform: translate(-50%, -50%);
}
.game-active .bid-panel .game-section-title { margin-bottom: 5px; }
.game-active .bidbox { min-height: 58px; }
.game-active .bidgrid { grid-template-columns: repeat(auto-fit, minmax(44px, 62px)); justify-content: center; }
.game-active .bidgrid button { width: 62px; min-height: 40px; font-size: 16px; }
.game-active .empty-hand { min-height: 78px; padding: 8px; background: rgb(0 0 0 / 18%); }
.game-active .game-log { display: none; }
.game-active .game-extras { display: none !important; }
.game-active .game-extras[open] {
  position: fixed;
  z-index: 520;
  top: 49px;
  right: 7px;
  bottom: 7px;
  width: min(330px, calc(100vw - 14px));
  display: block !important;
  overflow-y: auto;
  border: 1px solid rgb(232 189 88 / 35%);
  border-radius: 16px;
  padding: 0 9px 9px;
  background: linear-gradient(155deg, rgb(16 39 29 / 99%), rgb(4 15 10 / 99%));
  box-shadow: 0 25px 70px rgb(0 0 0 / 68%);
}
.game-active .game-extras > summary { position: sticky; top: 0; z-index: 2; padding: 10px 4px; background: #10271d; color: #f2d587; }
.game-active .game-extras .box { margin: 6px 0; border-radius: 11px; padding: 8px; }
.game-active .game-extras .section-heading h2 { margin: 0; font-size: 11px; }
.game-active .score-sheet-panel {
  position: fixed;
  z-index: 600;
  inset: 8%;
  max-height: none;
  overflow: auto;
  border-radius: 18px;
  background: rgb(8 27 19 / 99%);
  box-shadow: 0 30px 90px rgb(0 0 0 / 72%);
}
.game-active #violationNotice:not(.hidden),
.game-active :is(#trumpChoice,[data-game-role="trumpChoice"]):not(.hidden),
.game-active :is(#jokerChoice,[data-game-role="jokerChoice"]):not(.hidden),
.game-active #gameStandingsBox:not(.hidden) {
  position: fixed;
  z-index: 610;
  left: 50%;
  top: 50%;
  width: min(620px, calc(100vw - 30px));
  max-height: calc(100vh - 70px);
  overflow: auto;
  transform: translate(-50%, -50%);
}

@media (max-height: 600px) and (orientation: landscape) {
  .home-view-active:not(:is(.game-session-active,.tutorial-session-active)) .topbar,
  .panel-view-active .topbar { flex: 0 0 49px; min-height: 49px; }
  :is(#home,[data-game-role="home"]):not(.game-active) { margin-top: 7px; }
  :is(#home,[data-game-role="home"]):not(.game-active) .lobby-hero { min-height: 0; padding: 18px 20px; }
  :is(#home,[data-game-role="home"]):not(.game-active) .lobby-profile-card { padding: 8px; }
  :is(#home,[data-game-role="home"]):not(.game-active) .lobby-hero-actions { display: grid; grid-template-columns: 1.25fr .75fr .75fr; }
  :is(#home,[data-game-role="home"]):not(.game-active) .lobby-hero-actions:has(#lobbyCurrentShortcut:not(.hidden)) { grid-template-columns: 1.2fr repeat(3, .62fr); }
  :is(#home,[data-game-role="home"]):not(.game-active) .lobby-quick-button,
  :is(#home,[data-game-role="home"]):not(.game-active) .lobby-secondary-button { min-height: 46px; padding: 6px 10px; }
  .app-panel-view:not(.hidden) { margin-top: 7px; gap: 7px; }
  .app-view-rail { gap: 4px; padding: 8px; }
  .app-view-rail-heading { padding-bottom: 3px; }
  .app-view-rail-heading strong { font-size: 16px; }
  .app-view-home { min-height: 31px; padding: 4px 7px; font-size: 10px; }
  .app-view-rail nav { gap: 3px; }
  .app-view-rail nav button { min-height: 35px; padding: 4px 6px; }
  .app-view-stage { padding: 7px; }
  .app-view-page { gap: 7px; }
  .app-view-page > .box, .app-view-page > .split > .box { padding: 9px; }
  .app-view-page .kv { gap: 3px; }
  .app-view-page .kv > div { padding: 4px 0; font-size: 9px; }
}

/* Final cascade for the full-screen table. */
.profile-menu { position: fixed; top: 0; right: 0; width: min(390px, 92vw); height: 100dvh; padding: 16px; border-radius: 0; }
body.profile-drawer-open .topbar { z-index: 710; pointer-events: none; }
body.profile-drawer-open .profile-menu-wrap { pointer-events: auto; }
.game-active .game-hud { grid-template-columns: auto minmax(0, 1fr) auto; min-height: 42px; background: linear-gradient(90deg, #160b0f, #081712 48%, #160b0f); }
.game-active .game-hud-primary > div { display: flex; align-items: baseline; gap: 7px; }
.game-active .game-hud-primary strong { color: #f3d58d; font-size: 14px; }
.game-active .game-hud-status > span:first-child, .game-active :is(#gameTurnHint,[data-game-role="gameTurnHint"]) { display: none !important; }
.game-active .game-hud-status { justify-content: flex-end; }
.game-active .game-hud-status .turn-timer { min-width: 72px; border: 1px solid rgb(232 189 88 / 25%); border-radius: 999px; padding: 5px 10px; background: rgb(0 0 0 / 22%); color: #f7d77f; font-size: 10px; text-align: center; }
.game-active :is(#scoreSheetToggle,[data-game-role="scoreSheetToggle"]), .game-active :is(#gameToolsToggle,[data-game-role="gameToolsToggle"]) { position: fixed; z-index: 330; bottom: 10px; min-width: 98px; min-height: 42px; display: inline-flex !important; border-color: rgb(239 200 107 / 48%); border-radius: 14px; background: linear-gradient(145deg, rgb(75 27 39 / 96%), rgb(16 34 27 / 98%)); box-shadow: 0 12px 28px rgb(0 0 0 / 52%); font-size: 11px; }
.game-active :is(#scoreSheetToggle,[data-game-role="scoreSheetToggle"]) { left: 10px; }
.game-active :is(#gameToolsToggle,[data-game-role="gameToolsToggle"]) { right: 10px; }
.game-active .felt-table { inset: 28px 58px 104px; border: 7px solid #4a2b1a; border-radius: 38px; background: radial-gradient(ellipse at center, rgb(93 190 137 / 22%), transparent 63%), repeating-linear-gradient(32deg, rgb(255 255 255 / 1.5%) 0 1px, transparent 1px 5px), #095137; box-shadow: 0 20px 40px rgb(0 0 0 / 55%), inset 0 0 0 2px #b58a4d, inset 0 0 0 7px #27160f, inset 0 0 82px rgb(0 0 0 / 44%); }
.game-active .felt-table::before { content: ""; position: absolute; inset: 13%; background: url("/icon-512.png") center / contain no-repeat; opacity: .065; filter: sepia(1) saturate(.7) brightness(1.45); }
.game-active .table-monogram, .game-active .table-prompt { display: none; }
.game-active .trick.drop-target-active { outline: 0; border-radius: 50%; background: radial-gradient(circle, rgb(244 211 127 / 18%), transparent 68%); box-shadow: 0 0 48px rgb(244 211 127 / 18%); }
.game-active .trump-indicator { left: auto; right: 12px; top: 12px; width: 132px; min-height: 62px; gap: 8px; border: 1px solid rgb(232 189 88 / 48%); border-radius: 16px; padding: 7px; background: linear-gradient(145deg, rgb(88 24 40 / 96%), rgb(7 27 20 / 98%)); box-shadow: 0 13px 30px rgb(0 0 0 / 48%); }
.game-active .trump-upcard, .game-active .trump-suit-mark { width: 40px; min-height: 48px; flex-basis: 40px; }
.game-active .trump-suit-mark { height: 48px; font-size: 23px; }
.game-active .trump-indicator small { font-size: 7px; }
.game-active .trump-indicator strong { font-size: 11px; }
.game-active .game-seat { width: 126px; min-height: 76px; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; gap: 5px 7px; border: 1px solid rgb(232 189 88 / 28%); border-radius: 19px; padding: 7px; background: linear-gradient(145deg, rgb(29 48 39 / 98%), rgb(8 20 16 / 98%)); }
.game-active .seat-avatar { width: 44px; height: 44px; align-self: start; overflow: hidden; border-radius: 14px; }
.game-active .seat-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.game-active .seat-copy > strong { font-size: 11px; }
.game-active .seat-copy > small { display: block; font-size: 7px; }
.game-active .seat-score { grid-column: 1 / -1; gap: 7px; font-size: 8px; }
.game-active .seat-cards { position: absolute; right: -4px; bottom: -9px; transform: scale(.58); }
.game-active .seat-top { top: 5px; }
.game-active .seat-bottom { bottom: 94px; }
.game-active .seat-left { left: 5px; }
.game-active .seat-right { right: 5px; }
.game-active .game-extras[open] { display: block !important; }
.emoji-actions { display: grid; grid-template-columns: repeat(5, minmax(44px, 1fr)); gap: 7px; }
.emoji-actions button { aspect-ratio: 1; min-height: 0; overflow: hidden; border-radius: 14px; padding: 2px; background: radial-gradient(circle, rgb(255 255 255 / 8%), rgb(0 0 0 / 18%)); }
.emoji-actions button img { width: 100%; height: 100%; display: block; object-fit: contain; }
.social-message .joker-emoji-feed { width: 72px; height: 72px; display: block; object-fit: contain; }
@media (max-height: 600px) and (orientation: landscape) {
  .profile-menu { width: min(350px, 44vw); padding: 10px; }
  .game-active .felt-table { inset: 22px 52px 101px; border-radius: 31px; }
  .game-active .game-seat { width: 116px; min-height: 67px; grid-template-columns: 38px minmax(0,1fr); border-radius: 16px; padding: 5px; }
  .game-active .seat-avatar { width: 38px; height: 38px; border-radius: 12px; }
  .game-active .seat-bottom { bottom: 92px; }
  .game-active .trump-indicator { width: 118px; min-height: 54px; }
}

/* Final authoritative game layout. Keep this section last. */
.game-active :is(#game,[data-game-role="game"]) { grid-template-rows: 0 minmax(0, 1fr) !important; font-family: var(--club-font, Georgia, serif); }
.game-active .game-hud { position: absolute !important; inset: 0 !important; z-index: 340; min-height: 0 !important; display: block !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; pointer-events: none; }
.game-active .game-hud-primary, .game-active .game-hud-status { display: none !important; }
.game-active .game-hud-actions { display: contents !important; pointer-events: auto; }
.game-active .game-hud-actions .icon-art-button { position: fixed !important; z-index: 350; width: 50px !important; min-width: 50px !important; height: 50px !important; min-height: 50px !important; display: grid !important; place-items: center; overflow: hidden; border: 0 !important; border-radius: 15px !important; padding: 0 !important; background: rgb(7 18 14 / 74%) !important; box-shadow: 0 7px 20px rgb(0 0 0 / 38%) !important; touch-action: none; }
.game-active .icon-art-button img { width: 100%; height: 100%; display: block; object-fit: cover; }
.game-active :is(#gameToolsToggle,[data-game-role="gameToolsToggle"]) { left: 9px !important; right: auto !important; top: 9px !important; bottom: auto !important; }
.game-active :is(#quickChatToggle,[data-game-role="quickChatToggle"]) { right: 9px !important; top: 9px !important; bottom: auto !important; }
.game-active :is(#emojiPickerToggle,[data-game-role="emojiPickerToggle"]) { right: 65px !important; top: 9px !important; bottom: auto !important; }
.game-active :is(#scoreSheetToggle,[data-game-role="scoreSheetToggle"]) { left: auto !important; right: 9px !important; bottom: 9px !important; top: auto !important; }
.game-active :is(#lastTrickHold,[data-game-role="lastTrickHold"]) { right: 65px !important; bottom: 9px !important; top: auto !important; }
.game-active .game-arena { grid-row: 2 !important; }
.game-active .felt-table { inset: 5px !important; border: 8px solid #402718 !important; border-radius: 35px !important; background: radial-gradient(ellipse at 50% 42%, rgb(81 165 116 / 28%), transparent 61%), repeating-linear-gradient(30deg, rgb(255 255 255 / 1.2%) 0 1px, transparent 1px 5px), #075139 !important; box-shadow: inset 0 0 0 2px #bd9150, inset 0 0 0 8px #28170f, inset 0 0 95px rgb(0 0 0 / 46%), 0 18px 35px rgb(0 0 0 / 56%) !important; }
.game-active .felt-table::before { inset: 20% !important; opacity: .075 !important; }
.game-active .trump-indicator { left: auto !important; right: 12px !important; top: 70px !important; width: 50px !important; min-width: 50px !important; min-height: 66px !important; display: grid !important; place-items: center; border-radius: 12px !important; padding: 3px !important; background: rgb(18 31 25 / 92%) !important; }
.game-active .trump-indicator > div:not(.card) { display: none !important; }
.game-active .trump-upcard { width: 42px !important; min-height: 58px !important; flex-basis: 42px !important; }
.game-active .trump-suit-mark { width: 42px !important; height: 58px !important; min-height: 58px !important; flex-basis: 42px !important; }
.game-active .game-seat { --turn-progress: 1; --turn-color: #2bd06f; width: 124px !important; min-height: 58px !important; grid-template-columns: 48px minmax(0, 1fr) !important; grid-template-rows: auto !important; gap: 7px !important; border-radius: 17px !important; padding: 5px 7px 5px 5px !important; }
.game-active .game-seat.active { border-color: rgb(229 191 97 / 28%) !important; box-shadow: 0 9px 23px rgb(0 0 0 / 38%) !important; }
.game-active .game-seat.active::after { display: none !important; }
.game-active .seat-avatar { position: relative !important; z-index: 1; width: 46px !important; height: 46px !important; overflow: visible !important; border: 2px solid #9c783c !important; border-radius: 13px !important; }
.game-active .seat-avatar img { overflow: hidden; border-radius: 10px; }
.game-active .game-seat.active .seat-avatar::before { content: ""; position: absolute; z-index: -1; inset: -6px; border-radius: 17px; padding: 3px; background: conic-gradient(var(--turn-color, #2bd06f) calc(var(--turn-progress) * 1turn), rgb(255 255 255 / 11%) 0); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; filter: drop-shadow(0 0 4px rgb(255 255 255 / 28%)); }
.game-active .seat-copy > strong { font-size: 10px !important; }
.game-active .seat-copy > small { display: none !important; }
.game-active .seat-score { grid-column: auto !important; gap: 4px !important; margin: 0; font-size: 9px !important; }
.game-active .seat-score > span { min-width: 23px; border: 1px solid rgb(239 201 106 / 20%); border-radius: 7px; padding: 2px 4px; background: rgb(0 0 0 / 24%); text-align: center; }
.game-active .seat-cards { display: none !important; }
.game-active .seat-bottom { left: 13px !important; bottom: 12px !important; transform: none !important; }
.game-active .seat-top { left: 50% !important; top: 34px !important; transform: translateX(-50%) !important; }
.game-active .seat-left { left: 13px !important; top: 40% !important; transform: translateY(-50%) !important; }
.game-active .seat-right { right: 13px !important; top: 40% !important; transform: translateY(-50%) !important; }
.game-active .hand-panel { left: 145px !important; right: 130px !important; bottom: 3px !important; height: 112px !important; }
.game-active .hand .card { min-width: 48px !important; max-width: 72px !important; min-height: 101px !important; }
.game-active .trick { width: min(68%, 510px) !important; min-height: 108px !important; }
.game-active .played-card .card { width: 61px !important; min-height: 86px !important; }
.game-active .bid-panel.action-required { left: 50% !important; top: 50% !important; width: fit-content !important; max-width: calc(100% - 120px); border: 2px solid #b99a62 !important; border-radius: 17px !important; padding: 9px !important; background: linear-gradient(160deg, #fffdf7, #e9e1cf) !important; box-shadow: 0 18px 55px rgb(0 0 0 / 57%), inset 0 0 0 1px #fff !important; }
.game-active .bid-panel .game-section-title { display: none !important; }
.game-active .bidgrid { display: grid !important; grid-template-columns: repeat(5, 56px) !important; gap: 6px !important; }
.game-active .bidgrid:has(button:nth-child(2):last-child) { grid-template-columns: repeat(2, 56px) !important; }
.game-active .bidgrid:has(button:nth-child(3):last-child) { grid-template-columns: repeat(3, 56px) !important; }
.game-active .bidgrid:has(button:nth-child(4):last-child) { grid-template-columns: repeat(4, 56px) !important; }
.game-active .bidgrid:has(button:nth-child(5):last-child) { grid-template-columns: repeat(5, 56px) !important; }
.game-active .bidgrid button { width: auto !important; min-height: 38px !important; border: 1px solid #bfae89 !important; border-radius: 10px !important; background: #fffefa !important; box-shadow: none !important; color: #321a20 !important; }
.game-active .score-sheet-panel { display: flex !important; align-items: center; justify-content: center; overflow: visible !important; padding: 12px 54px 12px 12px !important; background: rgb(0 7 5 / 72%) !important; backdrop-filter: blur(7px); }
.game-active .score-sheet-panel.hidden { display: none !important; }
.game-active .score-sheet-panel:not(.hidden) ~ .bot-takeover-overlay { display: none !important; }
.game-active .score-sheet-card { width: min(780px, calc(100vw - 78px)) !important; max-width: none !important; height: min(94dvh, 780px) !important; max-height: none !important; overflow: auto !important; border: 3px solid #8d6c35 !important; border-radius: 18px !important; padding: 10px !important; background: #f2ead7 !important; }
.game-active .score-sheet-close { position: absolute; right: 10px; top: 18px; left: auto; width: 39px; min-width: 39px; height: 39px; min-height: 39px; border-radius: 50%; padding: 0; }
.game-active .score-sheet-table .score-ledger { width: 100%; min-width: 560px; border-collapse: collapse; border-spacing: 0; table-layout: fixed; }
.game-active .score-sheet-table .score-ledger th, .game-active .score-sheet-table .score-ledger td { min-width: 0; height: 27px; border: 1px solid rgb(31 82 61 / 48%); border-radius: 0; padding: 2px 3px; background: rgb(255 253 245 / 45%); color: #173b2e; font-size: 11px; }
.game-active .score-sheet-table .score-ledger thead th { position: sticky; z-index: 4; top: 0; height: 42px; background: #e3d5b8; color: #381922; }
.game-active .score-sheet-table .score-ledger thead tr:nth-child(2) th { top: 42px; height: 21px; font-size: 8px; }
.game-active .score-sheet-table .score-ledger tbody th { position: sticky; z-index: 2; left: 0; width: 28px; background: #e8dcc0; color: #321921; }
.game-active .game-extras[open] { position: fixed; z-index: 700; inset: 0 !important; width: auto !important; display: flex !important; align-items: center; justify-content: center; overflow: hidden !important; border: 0 !important; border-radius: 0 !important; padding: 45px 12px 12px !important; background: rgb(0 7 5 / 72%) !important; backdrop-filter: blur(7px); }
.game-active .game-extras[open] > summary { position: absolute; left: 14px; top: 12px; padding: 8px 12px; border-radius: 11px; background: #3b1420; }
.game-active .game-extras[open] .room-video, .game-active .game-extras[open] .room-music { display: none !important; }
.game-active .game-extras[open] .room-social { width: min(600px, calc(100vw - 35px)); height: auto !important; max-height: calc(100dvh - 72px); display: grid; grid-template-columns: minmax(125px, .36fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 8px; overflow: auto; border: 2px solid #95723b; border-radius: 19px; padding: 12px; background: linear-gradient(145deg, #112d22, #35121d); }
.game-active .game-extras[open] .room-social.quick-messages-only { grid-template-columns: minmax(0, 1fr); }
.game-active .room-social .section-heading { grid-column: 1 / -1; }
.game-active .room-social #communicationMenuToggle { display: none; }
.game-active .room-social #closeCommunication { display: inline-flex; min-height: 32px; padding: 5px 9px; font-size: 9px; }
.game-active .communication-menu { min-width: 0; display: grid; grid-template-rows: auto auto !important; gap: 8px; }
.game-active .communication-menu.hidden { display: none; }
.game-active .social-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.game-active .emoji-actions { grid-template-columns: repeat(5, minmax(42px, 1fr)); }
@media (min-width: 760px) {
  :is(#home,[data-game-role="home"]):not(.game-active) .lobby-shell { grid-template-columns: minmax(245px, .58fr) minmax(0, 1.42fr) !important; }
  :is(#home,[data-game-role="home"]):not(.game-active) .lobby-profile-card { grid-column: 1; grid-row: 1; }
  :is(#home,[data-game-role="home"]):not(.game-active) .lobby-hero { grid-column: 2; grid-row: 1; }
  .profile-menu { left: 0 !important; right: auto !important; }
}
@media (max-height: 600px) and (orientation: landscape) {
  .game-active .felt-table { inset: 4px !important; border-radius: 28px !important; }
  .game-active .game-seat { width: 112px !important; min-height: 51px !important; grid-template-columns: 41px minmax(0, 1fr) !important; padding: 4px !important; }
  .game-active .seat-avatar { width: 39px !important; height: 39px !important; }
  .game-active .seat-bottom { bottom: 8px !important; }
  .game-active .hand-panel { left: 128px !important; right: 122px !important; height: 98px !important; }
  .game-active .hand .card { min-width: 43px !important; max-width: 64px !important; min-height: 88px !important; }
  .game-active .trump-indicator { right: 10px !important; top: 67px !important; width: 44px !important; min-width: 44px !important; min-height: 58px !important; }
  .game-active .game-hud-actions .icon-art-button { width: 45px !important; min-width: 45px !important; height: 45px !important; min-height: 45px !important; }
  .game-active :is(#emojiPickerToggle,[data-game-role="emojiPickerToggle"]), .game-active :is(#lastTrickHold,[data-game-role="lastTrickHold"]) { right: 59px !important; }
  .game-active .score-sheet-card { height: calc(100dvh - 14px) !important; padding: 7px !important; }
  .game-active .score-sheet-table .score-ledger th, .game-active .score-sheet-table .score-ledger td { height: 20px; padding: 1px 2px; font-size: 9px; }
  .game-active .score-sheet-table .score-ledger thead th { height: 34px; }
  .game-active .score-sheet-table .score-ledger thead tr:nth-child(2) th { top: 34px; height: 17px; }
}

/* Generated card deck v1 — authoritative asset layer. */
.card { position: relative; overflow: hidden; padding: 0 !important; background: #f5ecd7 !important; }
.card-art { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; display: block; border-radius: inherit; object-fit: fill; pointer-events: none; user-select: none; }
.game-active .hand .card { aspect-ratio: 5 / 8; min-height: 0 !important; height: 96px !important; border: 0 !important; padding: 0 !important; background: transparent !important; }
.game-active .played-card .card { aspect-ratio: 5 / 8; min-height: 0 !important; height: 98px !important; border: 0 !important; padding: 0 !important; background: transparent !important; }
.game-active .trump-upcard { aspect-ratio: 5 / 8; min-height: 0 !important; height: 67px !important; border: 0 !important; padding: 0 !important; background: transparent !important; }
.last-trick-entry .card { aspect-ratio: 5 / 8; min-height: 0 !important; height: 99px !important; border: 0 !important; padding: 0 !important; background: transparent !important; }
.violation-table-card .card-art, .violation-notice .card-art { filter: drop-shadow(0 8px 13px rgb(0 0 0 / 35%)); }

/* Approved engraved Joker table artwork. This must remain the final table layer. */
:is(#home,[data-game-role="home"]).game-active :is(#gameArena,[data-game-role="gameArena"]) { background: #020805 !important; }
:is(#home,[data-game-role="home"]).game-active :is(#gameArena,[data-game-role="gameArena"]) :is(#feltTable,[data-game-role="feltTable"]) {
  inset: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: #020805 !important;
  background-image: var(--table-art-image, url("/assets/table/table-concept-v1.f3b1cea0a5f25176.webp")) !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
}
:is(#home,[data-game-role="home"]).game-active :is(#gameArena,[data-game-role="gameArena"]) :is(#feltTable,[data-game-role="feltTable"])::before {
  display: none !important;
  content: none !important;
  background: none !important;
  opacity: 0 !important;
}

/* Emoji picker v2: isolated native-game overlay; keep after legacy communication rules. */
:is(#home,[data-game-role="home"]).game-active :is(#quickChatToggle,[data-game-role="quickChatToggle"]) {
  top: 8px !important;
  right: 64px !important;
  bottom: auto !important;
}
:is(#home,[data-game-role="home"]).game-active :is(#emojiPickerToggle,[data-game-role="emojiPickerToggle"]) {
  top: 8px !important;
  right: 8px !important;
  bottom: auto !important;
}
:is(#home,[data-game-role="home"]).game-active #emojiPickerPanel {
  position: fixed !important;
  z-index: 850 !important;
  inset: 64px 8px auto auto !important;
  box-sizing: border-box !important;
  width: min(360px, calc(100vw - 16px)) !important;
  height: auto !important;
  max-height: calc(100dvh - 72px) !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  gap: 8px !important;
  overflow: hidden !important;
  isolation: isolate;
  contain: layout paint;
  border: 2px solid #a98242 !important;
  border-radius: 18px !important;
  padding: 10px !important;
  background: linear-gradient(145deg, rgb(12 45 34 / 99%), rgb(53 14 27 / 99%)) !important;
  box-shadow: inset 0 0 0 1px rgb(255 231 161 / 14%), 0 20px 55px rgb(0 0 0 / 72%) !important;
}
:is(#home,[data-game-role="home"]).game-active #emojiPickerPanel.hidden { display: none !important; }
:is(#home,[data-game-role="home"]).game-active #emojiPickerPanel .emoji-pack-tabs {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
:is(#home,[data-game-role="home"]).game-active #emojiPickerPanel .emoji-picker-grid {
  box-sizing: border-box !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  gap: 5px !important;
  align-content: start !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
:is(#home,[data-game-role="home"]).game-active #emojiPickerPanel .emoji-picker-grid.hidden { display: none !important; }
:is(#home,[data-game-role="home"]).game-active #emojiPickerPanel .emoji-picker-item {
  position: relative !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  margin: 0 !important;
  border-radius: 12px !important;
  padding: 2px !important;
  transform: none;
}
:is(#home,[data-game-role="home"]).game-active #emojiPickerPanel .emoji-picker-item img {
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  transform: none !important;
}
:is(#home,[data-game-role="home"]).game-active .game-seat .seat-emoji-reaction {
  z-index: 20 !important;
  width: 68px !important;
  height: 68px !important;
  overflow: visible !important;
}
@media (max-height: 600px) and (orientation: landscape) {
  :is(#home,[data-game-role="home"]).game-active #emojiPickerPanel {
    inset: 59px 8px auto auto !important;
    width: min(340px, 46vw) !important;
    max-height: calc(100dvh - 67px) !important;
    gap: 5px !important;
    padding: 7px !important;
  }
  :is(#home,[data-game-role="home"]).game-active #emojiPickerPanel .emoji-picker-heading small { display: none !important; }
  :is(#home,[data-game-role="home"]).game-active #emojiPickerPanel .emoji-picker-item { border-radius: 9px !important; }
}

/* Emoji reactions v3: anchor every reaction beside its avatar, toward the table. */
:is(#home,[data-game-role="home"]).game-active :is(#gameArena,[data-game-role="gameArena"]),
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]),
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .game-seat { isolation: isolate; }
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) { overflow: visible !important; }
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .game-seat { overflow: visible !important; }
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-emoji-reaction {
  position: absolute !important;
  z-index: 80 !important;
  width: 76px !important;
  height: 76px !important;
  display: block !important;
  overflow: visible !important;
  opacity: 1;
  pointer-events: none !important;
  filter: drop-shadow(0 9px 12px rgb(0 0 0 / 58%));
  animation-name: seatEmojiReaction !important;
  animation-duration: 3s !important;
  animation-timing-function: ease-out !important;
  animation-delay: var(--reaction-delay, 0ms) !important;
  animation-fill-mode: both !important;
}
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-emoji-reaction img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
}
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-bottom .seat-emoji-reaction {
  left: 34px !important;
  right: auto !important;
  top: auto !important;
  bottom: calc(100% - 7px) !important;
  transform-origin: 50% 100% !important;
}
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-top .seat-emoji-reaction {
  left: 28px !important;
  right: auto !important;
  top: calc(100% - 7px) !important;
  bottom: auto !important;
  transform-origin: 50% 0 !important;
}
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-left .seat-emoji-reaction {
  left: calc(100% - 8px) !important;
  right: auto !important;
  top: 3px !important;
  bottom: auto !important;
  transform-origin: 0 50% !important;
}
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-right .seat-emoji-reaction {
  left: auto !important;
  right: calc(100% - 8px) !important;
  top: 3px !important;
  bottom: auto !important;
  transform-origin: 100% 50% !important;
}
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-top-left .seat-emoji-reaction {
  left: 34px !important;
  right: auto !important;
  top: calc(100% - 7px) !important;
  bottom: auto !important;
  transform-origin: 50% 0 !important;
}
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-top-right .seat-emoji-reaction {
  left: auto !important;
  right: 34px !important;
  top: calc(100% - 7px) !important;
  bottom: auto !important;
  transform-origin: 50% 0 !important;
}
@media (max-height: 600px) and (orientation: landscape) {
  :is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-emoji-reaction {
    width: 68px !important;
    height: 68px !important;
  }
}

/* Premium emoji set v2: one clean paired collection, readable even while locked. */
:is(#home,[data-game-role="home"]).game-active #emojiPickerPanel .emoji-picker-item.is-locked:disabled {
  opacity: .82 !important;
  filter: saturate(.82) !important;
}
:is(#home,[data-game-role="home"]).game-active #emojiPickerPanel .emoji-picker-item.is-locked img {
  filter: brightness(.78) saturate(.82) !important;
}
:is(#home,[data-game-role="home"]).game-active #emojiPickerPanel .emoji-picker-item.is-locked i {
  z-index: 3 !important;
  right: 3px !important;
  bottom: 3px !important;
  width: 17px !important;
  height: 17px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: #3d1521 !important;
  color: #f4d779 !important;
}

/* Administrative privilege management. */
.admin-privileges-section {
  position: relative;
  overflow: hidden;
  border-color: rgb(226 187 94 / 32%);
  background:
    radial-gradient(circle at 92% 8%, rgb(196 49 72 / 14%), transparent 34%),
    linear-gradient(145deg, rgb(24 18 22 / 97%), rgb(10 14 14 / 98%));
}
.admin-privileges-section::after {
  content: "♛";
  position: absolute;
  right: 22px;
  top: 8px;
  color: rgb(235 201 111 / 10%);
  font: 700 92px/1 Georgia, serif;
  pointer-events: none;
}
.admin-player-search,
.admin-privilege-form,
.privilege-current-box { position: relative; z-index: 1; }
.admin-player-results { margin: 12px 0; }
.admin-player-card { border-color: rgb(215 180 91 / 22%); }
.admin-player-card .card-actions { margin-top: 9px; }
.admin-privilege-form {
  margin-top: 14px;
  border: 1px solid rgb(218 183 92 / 22%);
  border-radius: 16px;
  padding: 14px;
  background: rgb(0 0 0 / 18%);
}
.privilege-current-box { margin-top: 14px; }
.privilege-active-card {
  border-color: rgb(237 203 111 / 52%);
  background: linear-gradient(135deg, rgb(83 22 37 / 52%), rgb(21 37 33 / 72%));
  box-shadow: inset 0 1px rgb(255 255 255 / 7%), 0 12px 28px rgb(0 0 0 / 18%);
}
.privilege-active-card strong { color: #f3d785; }
@media (max-width: 720px) {
  .admin-player-search { display: grid; grid-template-columns: 1fr; }
  .admin-privileges-section::after { font-size: 68px; opacity: .7; }
}

/* Player seats v4: large portrait with two isolated trick counters. */
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .game-seat {
  --seat-avatar-size: 72px;
  box-sizing: border-box !important;
  width: 112px !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 14px var(--seat-avatar-size) 37px !important;
  justify-items: center !important;
  align-items: center !important;
  gap: 4px !important;
  overflow: visible !important;
  border: 1px solid rgb(224 189 105 / 32%) !important;
  border-radius: 22px !important;
  padding: 6px !important;
  background: linear-gradient(155deg, rgb(25 45 36 / 96%), rgb(5 15 12 / 97%)) !important;
  box-shadow: inset 0 1px rgb(255 255 255 / 7%), 0 10px 24px rgb(0 0 0 / 42%) !important;
}
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .game-seat.is-you {
  background: linear-gradient(155deg, rgb(40 70 55 / 98%), rgb(8 24 18 / 98%)) !important;
}
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-name {
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  color: #fff3ce;
  font: 800 11px/14px var(--club-font, Georgia, serif);
  letter-spacing: .01em;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0 2px 4px rgb(0 0 0 / 72%);
  white-space: nowrap;
}
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-avatar {
  position: relative !important;
  z-index: 2 !important;
  box-sizing: border-box !important;
  width: var(--seat-avatar-size) !important;
  height: var(--seat-avatar-size) !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
  border: 2px solid #b9914c !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, #e2bd68, #774a25) !important;
  color: #21150d !important;
  box-shadow: inset 0 0 0 2px rgb(255 243 194 / 17%), 0 6px 13px rgb(0 0 0 / 42%) !important;
  font: 900 25px/1 var(--club-font, Georgia, serif) !important;
}
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-avatar img {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: 17px !important;
  object-fit: cover !important;
}
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .game-seat.active .seat-avatar::before {
  border-radius: 24px !important;
}
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-metrics {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-metric {
  box-sizing: border-box;
  min-width: 0;
  height: 37px;
  display: grid;
  grid-template-rows: 11px 18px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgb(228 199 126 / 22%);
  border-radius: 9px;
  padding: 3px 2px;
  background: linear-gradient(155deg, rgb(255 255 255 / 7%), rgb(0 0 0 / 24%));
  box-shadow: inset 0 1px rgb(255 255 255 / 5%);
  text-align: center;
}
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-metric small {
  color: #aebdb5;
  font: 700 7px/10px var(--club-font, Georgia, serif);
  letter-spacing: .025em;
  text-transform: uppercase;
}
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-metric b {
  font: 900 16px/18px var(--club-font, Georgia, serif);
  text-shadow: 0 1px 4px rgb(0 0 0 / 55%);
}
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-order {
  border-color: rgb(81 164 237 / 35%);
  background: linear-gradient(155deg, rgb(40 104 160 / 24%), rgb(3 21 37 / 42%));
}
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-order b { color: #68bfff; }
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-taken b { color: #e7dfca; }
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-taken.taken-exact {
  border-color: rgb(76 218 130 / 38%);
  background: linear-gradient(155deg, rgb(36 130 76 / 25%), rgb(4 35 20 / 43%));
}
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-taken.taken-exact b { color: #5bea91; }
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-taken.taken-over {
  border-color: rgb(241 83 93 / 42%);
  background: linear-gradient(155deg, rgb(157 39 52 / 26%), rgb(48 4 11 / 44%));
}
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-taken.taken-over b { color: #ff6670; }
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-order.bid-just-set {
  animation: bidFromAvatar 650ms cubic-bezier(.18, .89, .32, 1.28);
}
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .dealer-chip {
  z-index: 5;
  left: 12px !important;
  top: 23px !important;
}
:is(#home,[data-game-role="home"]).game-active :is(#gameArena,[data-game-role="gameArena"])[data-player-count="3"] .seat-top-left {
  left: max(24%, 116px) !important;
  top: 8px !important;
}
:is(#home,[data-game-role="home"]).game-active :is(#gameArena,[data-game-role="gameArena"])[data-player-count="3"] .seat-top-right {
  right: max(24%, 116px) !important;
  top: 8px !important;
}
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-top {
  top: 8px !important;
}
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-left { top: 38% !important; }
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-right { top: 55% !important; }
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-bottom {
  bottom: 8px !important;
}
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-bottom .seat-emoji-reaction {
  left: 50% !important;
  bottom: calc(100% - 36px) !important;
  transform-origin: 50% 100% !important;
}
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-top .seat-emoji-reaction,
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-top-left .seat-emoji-reaction,
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-top-right .seat-emoji-reaction {
  top: calc(18px + var(--seat-avatar-size)) !important;
}
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-left .seat-emoji-reaction,
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-right .seat-emoji-reaction {
  top: 26px !important;
}

@media (max-height: 600px) and (orientation: landscape) {
  :is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .game-seat {
    --seat-avatar-size: 60px;
    width: 98px !important;
    grid-template-rows: 12px var(--seat-avatar-size) 33px !important;
    gap: 3px !important;
    border-radius: 19px !important;
    padding: 5px !important;
  }
  :is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-name { font-size: 10px; line-height: 12px; }
  :is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-avatar { border-radius: 17px !important; font-size: 22px !important; }
  :is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-avatar img { border-radius: 14px !important; }
  :is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-metric { height: 33px; grid-template-rows: 9px 17px; border-radius: 8px; padding: 2px 1px; }
  :is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-metric small { font-size: 6px; line-height: 8px; }
  :is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-metric b { font-size: 14px; line-height: 17px; }
  :is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .dealer-chip { left: 11px !important; top: 19px !important; }
  :is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-left { top: 38% !important; }
  :is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-right { top: 55% !important; }
}

/* Quick table messages v1: one non-blocking animated phrase beside its sender. */
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-quick-message {
  position: absolute !important;
  z-index: 76 !important;
  box-sizing: border-box;
  width: max-content;
  max-width: min(210px, 30vw);
  min-width: 92px;
  display: block;
  overflow: visible !important;
  border: 1px solid rgb(240 207 127 / 58%);
  border-radius: 14px;
  padding: 9px 13px;
  background:
    radial-gradient(circle at 20% 0, rgb(255 238 178 / 14%), transparent 48%),
    linear-gradient(145deg, rgb(66 20 34 / 98%), rgb(8 35 26 / 98%));
  box-shadow: inset 0 1px rgb(255 255 255 / 10%), 0 10px 24px rgb(0 0 0 / 55%);
  color: #fff1c7;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  pointer-events: none !important;
  animation: quickMessageIn 3s cubic-bezier(.2, .8, .2, 1) var(--quick-message-delay, 0ms) both;
}
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-quick-message b {
  display: block;
  font: 800 clamp(11px, 1.45vw, 15px)/1.2 var(--club-font, Georgia, serif);
  letter-spacing: .01em;
  text-shadow: 0 2px 5px rgb(0 0 0 / 75%);
}
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-quick-message::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-right: 1px solid rgb(240 207 127 / 58%);
  border-bottom: 1px solid rgb(240 207 127 / 58%);
  background: #102f25;
  transform: rotate(45deg);
}
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-bottom .seat-quick-message {
  left: calc(100% + 8px) !important;
  bottom: calc(100% + 7px) !important;
}
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-bottom .seat-quick-message::after {
  left: -6px;
  bottom: 11px;
  transform: rotate(135deg);
}
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-top .seat-quick-message {
  left: calc(100% + 8px) !important;
  top: calc(100% + 6px) !important;
}
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-top .seat-quick-message::after,
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-top-left .seat-quick-message::after {
  left: 18px;
  top: -6px;
  transform: rotate(225deg);
}
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-left .seat-quick-message,
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-top-left .seat-quick-message {
  left: calc(100% + 8px) !important;
  top: 24px !important;
}
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-left .seat-quick-message::after {
  left: -6px;
  top: 15px;
  transform: rotate(135deg);
}
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-right .seat-quick-message,
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-top-right .seat-quick-message {
  right: calc(100% + 8px) !important;
  left: auto !important;
  top: 24px !important;
}
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-right .seat-quick-message::after {
  right: -6px;
  top: 15px;
  transform: rotate(-45deg);
}
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-top-right .seat-quick-message::after {
  right: 18px;
  top: -6px;
  transform: rotate(225deg);
}
@keyframes quickMessageIn {
  0% { opacity: 0; transform: translateY(8px) scale(.78); filter: blur(2px); }
  10% { opacity: 1; transform: translateY(0) scale(1.04); filter: none; }
  17%, 78% { opacity: 1; transform: none; filter: none; }
  100% { opacity: 0; transform: translateY(-6px) scale(.96); filter: blur(1px); }
}

:is(#home,[data-game-role="home"]).game-active #quickMessages {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-content: start;
  gap: 6px !important;
  overflow-y: auto;
  padding: 2px;
}
:is(#home,[data-game-role="home"]).game-active #quickMessages.hidden { display: none !important; }
:is(#home,[data-game-role="home"]).game-active #quickMessages button {
  min-width: 0;
  min-height: 38px !important;
  overflow: visible;
  border: 1px solid rgb(226 190 100 / 28%) !important;
  border-radius: 11px !important;
  padding: 6px 8px !important;
  background: linear-gradient(145deg, rgb(80 24 39 / 78%), rgb(12 47 35 / 88%)) !important;
  color: #f8e9bd !important;
  font: 750 10px/1.15 var(--club-font, Georgia, serif) !important;
  overflow-wrap: anywhere;
  white-space: normal;
}
:is(#home,[data-game-role="home"]).game-active #quickMessages button:hover,
:is(#home,[data-game-role="home"]).game-active #quickMessages button:focus-visible {
  border-color: rgb(240 204 116 / 68%) !important;
  box-shadow: 0 0 0 2px rgb(240 204 116 / 12%), 0 7px 16px rgb(0 0 0 / 28%) !important;
}
@media (max-width: 520px) {
  :is(#home,[data-game-role="home"]).game-active #quickMessages { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-height: 600px) and (orientation: landscape) {
  :is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-quick-message {
    max-width: min(150px, 24vw);
    min-width: 84px;
    border-radius: 12px;
    padding: 7px 10px;
  }
  :is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-quick-message b { font-size: 12px; }
}

/* Bid balance: compact result of all trick orders beside the player's hand. */
:is(#home,[data-game-role="home"]).game-active .bid-balance-indicator {
  position: absolute;
  z-index: 45;
  right: calc(50% - 52px);
  top: -55px;
  box-sizing: border-box;
  width: 104px;
  min-height: 48px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 15px 24px;
  align-items: center;
  column-gap: 6px;
  overflow: hidden;
  border: 1px solid rgb(229 193 105 / 44%);
  border-radius: 13px;
  padding: 5px 9px;
  background: linear-gradient(145deg, rgb(24 47 37 / 97%), rgb(5 17 13 / 98%));
  box-shadow: inset 0 1px rgb(255 255 255 / 7%), 0 9px 22px rgb(0 0 0 / 44%);
  color: #f8e9bd;
  pointer-events: none;
  animation: bidBalanceIn 360ms cubic-bezier(.2, .85, .25, 1.15) both;
}
:is(#home,[data-game-role="home"]).game-active .bid-balance-indicator.hidden { display: none !important; }
:is(#home,[data-game-role="home"]).game-active .bid-balance-indicator > span {
  grid-column: 1 / -1;
  font: 800 10px/15px var(--club-font, Georgia, serif);
  letter-spacing: .06em;
  text-transform: uppercase;
}
:is(#home,[data-game-role="home"]).game-active .bid-balance-indicator > strong {
  font: 900 23px/24px var(--club-font, Georgia, serif);
  text-shadow: 0 2px 7px rgb(0 0 0 / 55%);
}
:is(#home,[data-game-role="home"]).game-active .bid-balance-indicator > small {
  align-self: end;
  padding-bottom: 2px;
  color: #c5d1ca;
  font: 700 8px/11px var(--club-font, Georgia, serif);
  text-transform: uppercase;
}
:is(#home,[data-game-role="home"]).game-active .bid-balance-indicator.is-ripping {
  border-color: rgb(244 103 111 / 52%);
  background: linear-gradient(145deg, rgb(91 25 38 / 97%), rgb(30 8 15 / 98%));
}
:is(#home,[data-game-role="home"]).game-active .bid-balance-indicator.is-ripping > strong { color: #ff747d; }
:is(#home,[data-game-role="home"]).game-active .bid-balance-indicator.is-stuffing {
  border-color: rgb(90 185 235 / 48%);
  background: linear-gradient(145deg, rgb(24 72 91 / 97%), rgb(6 25 34 / 98%));
}
:is(#home,[data-game-role="home"]).game-active .bid-balance-indicator.is-stuffing > strong { color: #78d2ff; }
@keyframes bidBalanceIn {
  from { opacity: 0; transform: translateX(10px) scale(.88); }
  to { opacity: 1; transform: none; }
}
@media (max-height: 600px) and (orientation: landscape) {
  :is(#home,[data-game-role="home"]).game-active .bid-balance-indicator { right: calc(50% - 50px); width: 101px; top: -70px; }
}

/* Forbidden last bid remains visible and is crossed out in red. */
:is(#home,[data-game-role="home"]).game-active .bidgrid button.bid-forbidden {
  position: relative;
  opacity: .88 !important;
  border-color: rgb(185 60 72 / 58%) !important;
  background: #eadfd7 !important;
  color: #72585b !important;
  cursor: not-allowed;
}
:is(#home,[data-game-role="home"]).game-active .bidgrid button.bid-forbidden::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 7px;
  right: 7px;
  top: calc(50% - 2px);
  height: 4px;
  border-radius: 999px;
  background: #d51f38;
  box-shadow: 0 1px 0 rgb(255 255 255 / 55%), 0 0 7px rgb(213 31 56 / 38%);
  transform: rotate(-12deg);
  pointer-events: none;
}

/* Joker declaration: blue, frameless and visible beside the acting avatar for 3 seconds. */
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-quick-message.joker-action-message {
  min-width: 142px;
  max-width: min(235px, 33vw);
  border: 0 !important;
  border-radius: 17px;
  padding: 11px 16px;
  background:
    radial-gradient(circle at 18% 0, rgb(127 224 255 / 24%), transparent 48%),
    linear-gradient(145deg, rgb(16 102 150 / 96%), rgb(5 39 66 / 98%));
  box-shadow: inset 0 1px rgb(255 255 255 / 16%), 0 0 22px rgb(57 184 244 / 35%), 0 12px 28px rgb(0 0 0 / 52%);
  color: #eaf9ff;
}
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-quick-message.joker-action-message b {
  font-size: clamp(12px, 1.55vw, 16px);
  letter-spacing: .015em;
  text-shadow: 0 2px 6px rgb(0 15 32 / 76%), 0 0 12px rgb(116 220 255 / 22%);
}
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-quick-message.joker-action-message::after {
  border: 0 !important;
  background: #0d6292 !important;
  box-shadow: 2px 2px 8px rgb(40 183 238 / 28%);
}
@media (max-height: 600px) and (orientation: landscape) {
  :is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-quick-message.joker-action-message {
    min-width: 118px;
    max-width: min(190px, 29vw);
    padding: 8px 11px;
  }
}

/* Current-turn cue: clear, compact and outside the player's cards. */
:is(#home,[data-game-role="home"]).game-active .your-turn-indicator {
  position: absolute;
  z-index: 44;
  left: 50%;
  bottom: 122px;
  transform: translateX(-50%);
  color: #61ef98;
  font: 900 clamp(15px, 2vw, 20px)/1 var(--club-font, Georgia, serif);
  letter-spacing: .07em;
  text-shadow: 0 2px 7px rgb(0 0 0 / 85%), 0 0 14px rgb(43 208 111 / 42%);
  white-space: nowrap;
  pointer-events: none;
  animation: yourTurnPulse 1.5s ease-in-out infinite;
}
:is(#home,[data-game-role="home"]).game-active .your-turn-indicator.hidden { display: none !important; }
@keyframes yourTurnPulse {
  0%, 100% { opacity: .8; transform: translateX(-50%) scale(.98); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.04); }
}
@media (max-height: 600px) and (orientation: landscape) {
  :is(#home,[data-game-role="home"]).game-active .your-turn-indicator { bottom: 108px; font-size: 15px; }
}

/* Real table motion: one-by-one deal from the deck and confirmed play from its seat. */
.deal-animation-layer {
  position: fixed;
  z-index: 92;
  inset: 0;
  overflow: hidden;
  opacity: 1;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.dealer-draw-layer {
  position: fixed;
  z-index: 93;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.dealer-center-card,
.dealer-draw-card {
  position: absolute !important;
  display: block;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 7px;
  filter: drop-shadow(0 10px 11px rgb(0 0 0 / 52%));
  transform-origin: center;
}
.dealer-center-card {
  z-index: 2;
  box-shadow: -3px 3px 0 #d7c18e, -6px 6px 0 #4c2a31;
  animation: dealerCenterCardLanding 680ms cubic-bezier(.18, .7, .2, 1) both;
}
.dealer-center-card img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  object-fit: fill;
}
.dealer-draw-card {
  z-index: 3;
  opacity: 0;
  animation: dealerOpenCardFlight 650ms cubic-bezier(.2, .65, .18, 1) var(--draw-delay, 0ms) both;
}
.dealer-draw-card.dealer-winning-ace {
  z-index: 5;
  filter: drop-shadow(0 0 10px #f5d569) drop-shadow(0 12px 12px rgb(0 0 0 / 58%));
}
.dealer-draw-winner {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 57%;
  display: grid;
  justify-items: center;
  gap: 4px;
  border: 0;
  border-radius: 16px;
  padding: 10px 18px;
  background: linear-gradient(145deg, rgb(16 85 57 / 94%), rgb(5 36 24 / 96%));
  box-shadow: 0 12px 28px rgb(0 0 0 / 48%), 0 0 22px rgb(73 224 137 / 24%);
  color: #edffe9;
  opacity: 0;
  transform: translate(-50%, 12px) scale(.9);
  animation: dealerWinnerReveal 420ms cubic-bezier(.2, .8, .2, 1) var(--winner-delay, 0ms) both;
}
.dealer-draw-winner small {
  color: #8ff0b4;
  font: 800 9px/1 var(--club-font, Georgia, serif);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.dealer-draw-winner strong {
  font: 900 clamp(13px, 1.8vw, 18px)/1.15 var(--club-font, Georgia, serif);
  white-space: nowrap;
}
.deal-animation-layer.deal-animation-finished { opacity: 0; }
.deal-origin-deck,
.deal-flight-card {
  position: absolute;
  display: block;
  border-radius: 6px;
  filter: drop-shadow(0 8px 9px rgb(0 0 0 / 48%));
  transform-origin: 50% 80%;
}
.deal-origin-deck {
  z-index: 2;
  box-shadow: -3px 3px 0 #d7c18e, -6px 6px 0 #4c2a31, 0 0 18px rgb(232 189 88 / 25%);
  animation: dealDeckLanding 680ms cubic-bezier(.18, .7, .2, 1) both;
}
.deal-origin-deck img,
.deal-flight-card img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  object-fit: fill;
}
.deal-flight-card {
  z-index: 3;
  opacity: 0;
  animation: dealCardFromCenter 700ms cubic-bezier(.2, .64, .18, 1) var(--deal-delay, 0ms) both;
}
.played-card-flight {
  position: fixed !important;
  z-index: 96 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  opacity: 0;
  pointer-events: none !important;
  filter: drop-shadow(0 15px 14px rgb(0 0 0 / 52%));
  animation: playedCardFromSeat 330ms cubic-bezier(.2, .72, .2, 1) var(--play-delay, 0ms) both;
}
.local-dropped-card {
  position: fixed !important;
  z-index: 97 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  opacity: 1 !important;
  pointer-events: none !important;
  filter: drop-shadow(0 15px 15px rgb(0 0 0 / 50%));
  will-change: left, top, width, height, transform;
}
.local-dropped-card.local-card-impact {
  animation: localCardImpact 90ms cubic-bezier(.16, .72, .24, 1) both;
}
.local-dropped-card.local-card-settling {
  transition:
    left var(--local-settle-duration, 400ms) cubic-bezier(.14, .76, .18, 1),
    top var(--local-settle-duration, 400ms) cubic-bezier(.14, .76, .18, 1),
    width var(--local-settle-duration, 400ms) cubic-bezier(.14, .76, .18, 1),
    height var(--local-settle-duration, 400ms) cubic-bezier(.14, .76, .18, 1),
    transform var(--local-settle-duration, 400ms) cubic-bezier(.14, .76, .18, 1),
    filter var(--local-settle-duration, 400ms) ease;
  filter: drop-shadow(0 9px 9px rgb(0 0 0 / 40%));
}
.local-drop-measure { visibility: hidden !important; pointer-events: none !important; }
.game-active .hand .card,
.game-active .hand .card-art {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

/* Free card landing: the release point on the felt is the real resting place. */
:is(#home,[data-game-role="home"]).game-active .felt-table > .trick {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  display: block !important;
  overflow: visible;
  pointer-events: none;
}
:is(#home,[data-game-role="home"]).game-active .trick > .table-landed-card {
  position: absolute !important;
  left: var(--landing-x) !important;
  top: var(--landing-y) !important;
  z-index: 4;
  margin: 0 !important;
  transform: translate(-50%, -50%);
  transform-origin: center;
}
:is(#home,[data-game-role="home"]).game-active .trick > .table-landed-card.joker-give-under { z-index: 2; }
:is(#home,[data-game-role="home"]).game-active .trick > .table-landed-card:not(.joker-give-under) { z-index: 4; }
.local-dropped-card.joker-give-tucking {
  filter: drop-shadow(0 4px 5px rgb(0 0 0 / 42%));
}
:is(#home,[data-game-role="home"]).game-active .trick > .table-landed-card .card {
  transform: rotate(var(--landing-rotation, 0deg)) !important;
  transform-origin: center;
}
.trick-collection-layer {
  position: fixed;
  z-index: 125;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.trick-collection-card {
  position: fixed !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  opacity: 1;
  pointer-events: none !important;
  filter: drop-shadow(0 10px 10px rgb(0 0 0 / 48%));
  transform-origin: center;
  animation: trickCardCollected 650ms cubic-bezier(.2, .72, .16, 1) var(--collect-delay, 0ms) both;
}
:is(#home,[data-game-role="home"]).game-active .trick.trick-collecting > .played-card { opacity: 0 !important; }
@keyframes trickCardCollected {
  0% { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(0); }
  48% { opacity: 1; transform: translate3d(var(--collect-mid-x), var(--collect-mid-y), 0) scale(.82) rotate(var(--collect-rotation)); }
  86% { opacity: 1; transform: translate3d(var(--collect-x), var(--collect-y), 0) scale(.42) rotate(0); }
  100% { opacity: 0; transform: translate3d(var(--collect-x), var(--collect-y), 0) scale(.34) rotate(0); }
}

/* Designer joker decision: one modal language for action and suit selection. */
:is(#home,[data-game-role="home"]).game-active .joker-choice {
  position: fixed;
  z-index: 610;
  left: 50%;
  top: 50%;
  width: min(520px, calc(100vw - 56px));
  max-height: calc(100dvh - 36px);
  overflow: auto;
  gap: 14px;
  margin: 0;
  border: 0 !important;
  border-radius: 25px;
  padding: 18px;
  background:
    radial-gradient(circle at 84% 12%, rgb(210 67 93 / 22%), transparent 34%),
    radial-gradient(circle at 9% 90%, rgb(44 171 112 / 18%), transparent 38%),
    linear-gradient(145deg, rgb(49 16 27 / 99%), rgb(7 31 23 / 99%) 58%, rgb(4 18 14 / 99%));
  box-shadow: 0 0 0 100vmax rgb(1 8 6 / 72%), 0 26px 80px rgb(0 0 0 / 72%), inset 0 1px rgb(255 255 255 / 9%);
  color: #fff8e8;
  transform: translate(-50%, -50%);
  animation: jokerDecisionIn 240ms cubic-bezier(.2, .82, .22, 1) both;
}
:is(#home,[data-game-role="home"]).game-active .joker-choice-heading { gap: 13px; padding: 2px 3px 4px; }
:is(#home,[data-game-role="home"]).game-active .joker-choice-heading > span {
  display: grid;
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  place-items: center;
  border-radius: 16px;
  background: radial-gradient(circle at 35% 28%, #ffd98a, #9d2842 54%, #30101b);
  color: #fff2bd;
  font-size: 29px;
  box-shadow: 0 9px 24px rgb(0 0 0 / 42%), inset 0 0 0 1px rgb(255 224 153 / 38%);
}
:is(#home,[data-game-role="home"]).game-active .joker-choice-heading strong {
  color: #fff4d0;
  font: 900 clamp(20px, 3vw, 27px)/1.05 var(--club-font, Georgia, serif);
  letter-spacing: .015em;
}
:is(#home,[data-game-role="home"]).game-active .joker-choice-heading small { max-width: 390px; color: #b9cfc4; font-size: 10px; line-height: 1.35; }
:is(#home,[data-game-role="home"]).game-active .joker-mode-choice { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
:is(#home,[data-game-role="home"]).game-active .joker-mode-choice button {
  min-height: 96px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 18px;
  padding: 12px;
  background: linear-gradient(145deg, rgb(26 105 69 / 96%), rgb(8 53 37 / 98%));
  box-shadow: inset 0 0 0 1px rgb(147 239 188 / 20%), 0 12px 28px rgb(0 0 0 / 30%);
  color: #ecfff3;
  text-align: left;
}
:is(#home,[data-game-role="home"]).game-active .joker-mode-choice button[data-joker-mode="give"] { background: linear-gradient(145deg, rgb(111 34 52 / 97%), rgb(54 16 28 / 99%)); box-shadow: inset 0 0 0 1px rgb(255 169 185 / 19%), 0 12px 28px rgb(0 0 0 / 30%); }
:is(#home,[data-game-role="home"]).game-active .joker-mode-choice button > i {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 14px;
  background: rgb(255 255 255 / 10%);
  color: #f8d77e;
  font: 900 25px/1 var(--club-font, Georgia, serif);
  font-style: normal;
}
:is(#home,[data-game-role="home"]).game-active .joker-mode-choice button > span { min-width: 0; display: grid; gap: 4px; }
:is(#home,[data-game-role="home"]).game-active .joker-mode-choice strong { color: inherit; font: 900 18px/1 var(--club-font, Georgia, serif); }
:is(#home,[data-game-role="home"]).game-active .joker-mode-choice small { color: rgb(238 255 245 / 70%); font-size: 9px; line-height: 1.3; }
:is(#home,[data-game-role="home"]).game-active .joker-suit-choice { gap: 12px; }
:is(#home,[data-game-role="home"]).game-active .joker-suit-choice > strong { color: #f5d886; font: 900 16px/1.15 var(--club-font, Georgia, serif); text-align: center; }
:is(#home,[data-game-role="home"]).game-active .joker-suit-choice > div { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
:is(#home,[data-game-role="home"]).game-active .joker-suit-choice [data-joker-suit] {
  min-height: 92px;
  display: grid;
  place-items: center;
  gap: 4px;
  border: 0;
  border-radius: 17px;
  padding: 8px;
  background: linear-gradient(160deg, #fffdf7, #ddd4c3);
  box-shadow: 0 12px 24px rgb(0 0 0 / 38%), inset 0 0 0 1px #fff;
  color: #142019;
}
:is(#home,[data-game-role="home"]).game-active .joker-suit-choice [data-joker-suit="H"],
:is(#home,[data-game-role="home"]).game-active .joker-suit-choice [data-joker-suit="D"] { color: #b51635; }
:is(#home,[data-game-role="home"]).game-active .joker-suit-choice [data-joker-suit] i { font: 900 36px/1 Georgia, serif; font-style: normal; }
:is(#home,[data-game-role="home"]).game-active .joker-suit-choice [data-joker-suit] span { font: 900 11px/1 var(--club-font, Georgia, serif); }
:is(#home,[data-game-role="home"]).game-active :is(#jokerBack,[data-game-role="jokerBack"]),
:is(#home,[data-game-role="home"]).game-active :is(#cancelJoker,[data-game-role="cancelJoker"]) { min-height: 37px; border: 0; border-radius: 12px; background: rgb(255 255 255 / 7%); color: #d9e8df; }
@keyframes jokerDecisionIn {
  from { opacity: 0; transform: translate(-50%, -46%) scale(.94); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@media (max-height: 600px) and (orientation: landscape) {
  :is(#home,[data-game-role="home"]).game-active .joker-choice { width: min(560px, calc(100vw - 120px)); gap: 8px; padding: 11px 13px; border-radius: 19px; }
  :is(#home,[data-game-role="home"]).game-active .joker-choice-heading > span { width: 40px; height: 40px; flex-basis: 40px; border-radius: 12px; font-size: 23px; }
  :is(#home,[data-game-role="home"]).game-active .joker-choice-heading strong { font-size: 19px; }
  :is(#home,[data-game-role="home"]).game-active .joker-mode-choice button { min-height: 72px; grid-template-columns: 35px minmax(0, 1fr); padding: 8px 10px; }
  :is(#home,[data-game-role="home"]).game-active .joker-mode-choice button > i { width: 34px; height: 34px; border-radius: 10px; font-size: 20px; }
  :is(#home,[data-game-role="home"]).game-active .joker-suit-choice [data-joker-suit] { min-height: 66px; }
  :is(#home,[data-game-role="home"]).game-active .joker-suit-choice [data-joker-suit] i { font-size: 28px; }
}
.card-flight-pending { opacity: 0 !important; }
@keyframes localCardImpact {
  0% { filter: drop-shadow(0 18px 18px rgb(0 0 0 / 58%)); }
  72% { filter: drop-shadow(0 5px 5px rgb(0 0 0 / 47%)); }
  100% { filter: drop-shadow(0 9px 9px rgb(0 0 0 / 40%)); }
}
@keyframes dealCardFromCenter {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.86) rotate(0); }
  7% { opacity: 1; }
  55% { opacity: 1; transform: translate3d(var(--deal-arc-x), var(--deal-arc-y), 0) scale(.9) rotate(var(--deal-rotate)); }
  86% { opacity: 1; transform: translate3d(var(--deal-near-x), var(--deal-near-y), 0) scale(.72) rotate(-1deg); }
  100% { opacity: 0; transform: translate3d(var(--deal-x), var(--deal-y), 0) scale(.66) rotate(0); }
}
@keyframes dealerCenterCardLanding {
  0% { opacity: 0; transform: translate3d(0, -95px, 0) scale(.72) rotate(-11deg); }
  18% { opacity: 1; }
  78% { transform: translate3d(0, 4px, 0) scale(1.035) rotate(2deg); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(0); }
}
@keyframes dealerOpenCardFlight {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.7) rotate(0); }
  8% { opacity: 1; }
  56% { opacity: 1; transform: translate3d(var(--draw-arc-x), var(--draw-arc-y), 0) scale(.94) rotate(var(--draw-rotate)); }
  100% { opacity: 1; transform: translate3d(var(--draw-x), var(--draw-y), 0) scale(.76) rotate(0); }
}
@keyframes dealerWinnerReveal {
  from { opacity: 0; transform: translate(-50%, 12px) scale(.9); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes playedCardFromSeat {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.5) rotate(var(--play-rotate)); }
  10% { opacity: 1; }
  82% { opacity: 1; transform: translate3d(var(--play-mid-x), var(--play-mid-y), 0) scale(1.015) rotate(-1deg); }
  100% { opacity: 1; transform: translate3d(var(--play-x), var(--play-y), 0) scale(1) rotate(0); }
}
@keyframes dealDeckLanding {
  0% { opacity: 0; transform: translate3d(var(--deck-from-x), var(--deck-from-y), 0) scale(.72) rotate(-12deg); }
  18% { opacity: 1; }
  78% { transform: translate3d(0, -5px, 0) scale(1.035) rotate(2deg); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  .deal-animation-layer,
  .dealer-draw-layer,
  .played-card-flight { display: none !important; }
  .card-flight-pending { opacity: 1 !important; }
  body:not(.animations-disabled) .local-dropped-card { display: block !important; }
  body:not(.animations-disabled) .local-flight-pending { opacity: 0 !important; }
}
.animations-disabled .deal-animation-layer,
.animations-disabled .dealer-draw-layer,
.animations-disabled .local-dropped-card,
.animations-disabled .played-card-flight { display: none !important; }
.animations-disabled .card-flight-pending { opacity: 1 !important; }

/* Frameless discipline notices and per-deal technar marks. */
.game-event-toast > strong,
.game-event-toast > span { display: block; text-align: center; }
.game-event-toast > strong { font: 900 clamp(28px, 4.8vw, 54px)/1 var(--club-font, Georgia, serif); letter-spacing: .035em; }
.game-event-toast > span { margin-top: 7px; font: 700 clamp(13px, 2vw, 22px)/1.2 var(--club-font, Georgia, serif); letter-spacing: .025em; }
.game-event-toast.event-technar,
.game-event-toast.event-hist {
  width: min(700px, calc(100vw - 48px));
  border: 0 !important;
  border-radius: 0 !important;
  padding: 10px 18px !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none;
}
.game-event-toast.event-technar { color: #ffded8; text-shadow: 0 3px 2px #45050d, 0 0 16px rgb(224 42 57 / 72%), 0 0 38px rgb(170 17 42 / 45%); }
.game-event-toast.event-technar > span { color: #ffb9b1; }
.game-event-toast.event-hist { color: #ffd8d0; text-shadow: 0 3px 2px #4b0711, 0 0 16px rgb(215 47 64 / 68%), 0 0 38px rgb(130 13 35 / 42%); }
.game-event-toast.event-hist > span { color: #f3bab4; }
.game-active #violationNotice { display: none !important; }
.game-active .score-ledger .score-row-technars {
  margin-left: 2px;
  color: #a61531 !important;
  font: 950 8px/1 var(--club-font, Georgia, serif);
  letter-spacing: -1px;
  text-shadow: none !important;
  vertical-align: super;
}
.game-active :is(#lastTrickHold,[data-game-role="lastTrickHold"]) { touch-action: none; user-select: none; -webkit-user-select: none; }

@media (max-height: 600px) and (orientation: landscape) {
  .game-event-toast.event-technar,
  .game-event-toast.event-hist { top: 39%; padding: 6px 14px !important; }
  .game-event-toast > strong { font-size: clamp(24px, 5.2vw, 42px); }
  .game-event-toast > span { margin-top: 4px; font-size: clamp(12px, 2.1vw, 17px); }
}

/* Match result certificate v1: animated winner document and ten-second lobby return. */
.match-result-overlay {
  --result-gold: #f0ca68;
  --result-gold-bright: #fff0ad;
  --result-wine: #7d1830;
  --result-emerald: #0c3a2a;
  position: fixed;
  z-index: 9800;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  background: rgb(1 8 5 / 78%);
  font-family: var(--club-font, Georgia, "Times New Roman", serif);
  cursor: pointer;
  isolation: isolate;
  overscroll-behavior: contain;
}
.match-result-overlay.hidden { display: none !important; }
.match-result-ambient {
  position: fixed;
  z-index: -2;
  inset: -8%;
  background:
    radial-gradient(circle at 19% 16%, rgb(155 35 63 / 38%), transparent 31%),
    radial-gradient(circle at 83% 78%, rgb(31 133 87 / 28%), transparent 34%),
    repeating-conic-gradient(from 12deg at 50% 50%, rgb(240 202 104 / 5%) 0 3deg, transparent 3deg 14deg),
    #020b08;
  filter: blur(2px);
  transform: scale(1.04);
}
.match-result-ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 20%, rgb(0 0 0 / 76%) 88%);
}
.match-result-document {
  position: relative;
  width: min(1060px, 96vw);
  min-height: min(590px, calc(100dvh - 28px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(12px, 2.1vh, 22px);
  overflow: hidden;
  border: 2px solid #b1833c;
  border-radius: 24px;
  padding: clamp(22px, 3.4vw, 42px);
  background:
    linear-gradient(115deg, transparent 0 47%, rgb(255 255 255 / 2%) 48% 49%, transparent 50% 100%),
    repeating-linear-gradient(4deg, rgb(255 255 255 / 1.2%) 0 1px, transparent 1px 5px),
    radial-gradient(circle at 50% 15%, rgb(27 91 65 / 46%), transparent 43%),
    linear-gradient(145deg, #123d2e 0%, #08281e 46%, #061d17 100%);
  box-shadow:
    0 30px 90px rgb(0 0 0 / 72%),
    inset 0 0 0 5px #071810,
    inset 0 0 0 7px rgb(240 202 104 / 30%),
    inset 0 0 70px rgb(0 0 0 / 45%);
  color: #fff6d9;
  cursor: pointer;
}
.match-result-document::before,
.match-result-document::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.match-result-document::before {
  inset: 13px;
  border: 1px solid rgb(240 202 104 / 34%);
  border-radius: 15px;
}
.match-result-document::after {
  left: 5%;
  right: 5%;
  top: 91px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d5a94e, #fff1ae, #d5a94e, transparent);
  box-shadow: 0 1px 0 rgb(0 0 0 / 55%);
}
.match-result-overlay.is-open .match-result-document {
  animation: matchResultDocumentIn 620ms cubic-bezier(.16,.84,.26,1.06) both;
}
.match-result-overlay.is-leaving {
  animation: matchResultOverlayOut 320ms ease-in both;
  pointer-events: none;
}
.match-result-corner {
  position: absolute;
  z-index: 2;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #b83b50;
  font: 800 24px/1 Georgia, serif;
  text-shadow: 0 1px 0 #ffdda0, 0 0 13px rgb(240 202 104 / 36%);
}
.corner-top-left { left: 17px; top: 17px; }
.corner-top-right { right: 17px; top: 17px; color: #d75a5f; }
.corner-bottom-left { left: 17px; bottom: 17px; color: #d75a5f; }
.corner-bottom-right { right: 17px; bottom: 17px; color: #b8d2c3; }
.match-result-heading { position: relative; z-index: 1; display: grid; justify-items: center; gap: 3px; text-align: center; }
.match-result-kicker {
  color: var(--result-gold);
  font-size: clamp(9px, 1.2vw, 12px);
  font-weight: 900;
  letter-spacing: .34em;
  text-transform: uppercase;
}
.match-result-heading h2 {
  margin: 0;
  background: linear-gradient(180deg, #fffbea 8%, #ffe39a 45%, #b77928 86%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font: 900 clamp(28px, 4.4vw, 50px)/1.02 var(--club-font, Georgia, serif);
  letter-spacing: .035em;
  text-shadow: 0 5px 18px rgb(0 0 0 / 34%);
}
.match-result-heading p { color: #a9c2b5; font-size: clamp(10px, 1.4vw, 13px); }
.match-result-layout {
  position: relative;
  z-index: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.34fr) minmax(240px, .66fr);
  align-items: center;
  gap: clamp(20px, 4vw, 58px);
}
.match-result-list { display: grid; gap: 9px; min-width: 0; margin: 0; padding: 0; list-style: none; counter-reset: result-place; }
.match-result-row {
  min-height: 64px;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  border: 1px solid rgb(240 202 104 / 14%);
  border-radius: 13px;
  padding: 8px 16px 8px 8px;
  background: linear-gradient(90deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 1.5%));
  box-shadow: inset 4px 0 0 rgb(123 35 53 / 65%);
}
.match-result-overlay.is-open .match-result-row { animation: matchResultRowIn 480ms cubic-bezier(.18,.8,.26,1) both; }
.match-result-overlay.is-open .match-result-row:nth-child(1) { animation-delay: 180ms; }
.match-result-overlay.is-open .match-result-row:nth-child(2) { animation-delay: 260ms; }
.match-result-overlay.is-open .match-result-row:nth-child(3) { animation-delay: 340ms; }
.match-result-overlay.is-open .match-result-row:nth-child(4) { animation-delay: 420ms; }
.match-result-row.place-1 {
  border-color: rgb(255 225 135 / 46%);
  background: linear-gradient(90deg, rgb(203 156 58 / 22%), rgb(255 255 255 / 3%));
  box-shadow: inset 4px 0 0 #e6bb55, 0 9px 24px rgb(0 0 0 / 18%);
}
.match-result-place {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  align-content: center;
  border: 1px solid #8a713c;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 27%, #fff0b0, #c3943b 58%, #654319);
  color: #251a0a;
  box-shadow: inset 0 0 0 3px rgb(45 27 7 / 24%), 0 5px 12px rgb(0 0 0 / 30%);
}
.match-result-row.place-2 .match-result-place { filter: saturate(.48) brightness(.99); }
.match-result-row.place-3 .match-result-place { filter: sepia(.35) brightness(.8); }
.match-result-row.place-4 .match-result-place { filter: grayscale(.5) brightness(.72); }
.match-result-place b { font: 950 20px/.82 Georgia, serif; }
.match-result-place small { font: 800 6px/1 Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.match-result-player { min-width: 0; display: grid; gap: 4px; }
.match-result-player strong { overflow: hidden; color: #fff8e5; font-size: clamp(16px, 2vw, 22px); text-overflow: ellipsis; white-space: nowrap; }
.match-result-player small { overflow: hidden; color: #87a897; font: 700 10px/1.2 Arial, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.match-result-score { display: grid; justify-items: end; gap: 2px; color: var(--result-gold-bright); }
.match-result-score b { font: 900 clamp(20px, 2.6vw, 30px)/1 Georgia, serif; font-variant-numeric: tabular-nums; }
.match-result-score small { color: #789889; font: 800 7px/1 Arial, sans-serif; letter-spacing: .15em; text-transform: uppercase; }
.winner-stamp {
  position: relative;
  width: min(29vw, 300px);
  min-width: 230px;
  aspect-ratio: 1;
  justify-self: center;
  transform-origin: 52% 50%;
  filter: drop-shadow(0 20px 17px rgb(0 0 0 / 44%));
  will-change: transform, opacity;
}
.winner-stamp::before,
.winner-stamp::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 9%;
  border: 3px solid rgb(255 220 126 / 62%);
  border-radius: 50%;
  opacity: 0;
}
.match-result-overlay.is-open .winner-stamp { animation: winnerStampPlacement 980ms 630ms cubic-bezier(.16,.78,.25,1.16) both; }
.match-result-overlay.is-open .winner-stamp::before { animation: winnerStampImpact 560ms 1240ms ease-out both; }
.match-result-overlay.is-open .winner-stamp::after { animation: winnerStampImpact 560ms 1320ms ease-out both; }
.winner-stamp-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.winner-stamp-title { fill: #fff0ae; font: 900 16px/1 Georgia, serif; letter-spacing: 2.4px; paint-order: stroke; stroke: #4b0b1b; stroke-width: 3px; }
.winner-stamp-name { fill: #fff8df; font: 900 18px/1 Georgia, serif; paint-order: stroke; stroke: #4b0b1b; stroke-width: 3px; }
.winner-stamp-name.is-long { font-size: 13px; }
.match-result-footer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  min-height: 54px;
}
.match-result-exit-copy {
  color: #ccddcf;
  font: 800 clamp(11px, 1.7vw, 15px)/1.2 Arial, sans-serif;
  letter-spacing: .045em;
  text-align: center;
  animation: matchResultExitPulse 1.8s 1.7s ease-in-out infinite;
}
.match-result-timer {
  --result-progress-angle: 360deg;
  position: relative;
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  align-content: center;
  border-radius: 50%;
  background: conic-gradient(var(--result-gold) var(--result-progress-angle), rgb(255 255 255 / 9%) 0);
  color: #fff0ad;
  font-variant-numeric: tabular-nums;
}
.match-result-timer::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #0a281e; box-shadow: inset 0 0 10px rgb(0 0 0 / 50%); }
.match-result-timer b,
.match-result-timer small { position: relative; z-index: 1; }
.match-result-timer b { font: 900 18px/.9 Georgia, serif; }
.match-result-timer small { color: #8eab9c; font: 700 7px/1 Arial, sans-serif; }
@keyframes matchResultDocumentIn {
  from { opacity: 0; transform: translateY(28px) scale(.96); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes matchResultRowIn {
  from { opacity: 0; transform: translateX(-24px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes winnerStampPlacement {
  0% { opacity: 0; transform: translate(72px, -210px) rotate(24deg) scale(1.32); filter: blur(3px); }
  60% { opacity: 1; transform: translate(0, 8px) rotate(-4deg) scale(.91); filter: blur(0); }
  74% { transform: translate(0, -4px) rotate(1.5deg) scale(1.04); }
  100% { opacity: 1; transform: translate(0, 0) rotate(-1.2deg) scale(1); }
}
@keyframes winnerStampImpact {
  0% { opacity: .75; transform: scale(.72); }
  100% { opacity: 0; transform: scale(1.34); }
}
@keyframes matchResultExitPulse {
  0%, 100% { opacity: .58; }
  50% { opacity: 1; text-shadow: 0 0 12px rgb(240 202 104 / 30%); }
}
@keyframes matchResultOverlayOut {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(1.025); }
}
@media (max-width: 720px) {
  .match-result-overlay { align-items: start; }
  .match-result-document { min-height: calc(100dvh - 28px); gap: 13px; padding: 27px 18px 20px; }
  .match-result-document::after { top: 87px; }
  .match-result-layout { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .winner-stamp { width: 190px; min-width: 190px; grid-row: 1; }
  .match-result-list { grid-row: 2; gap: 6px; }
  .match-result-row { min-height: 55px; grid-template-columns: 49px minmax(0, 1fr) auto; gap: 8px; padding: 6px 10px 6px 5px; }
  .match-result-place { width: 44px; height: 44px; }
  .match-result-player strong { font-size: 15px; }
  .match-result-score b { font-size: 19px; }
}
@media (max-height: 620px) and (orientation: landscape) {
  .match-result-overlay { padding: 7px; }
  .match-result-document { width: min(1100px, 98vw); min-height: calc(100dvh - 14px); gap: 7px; padding: 17px 30px 12px; border-radius: 18px; }
  .match-result-document::after { top: 66px; }
  .match-result-kicker { font-size: 8px; }
  .match-result-heading h2 { font-size: clamp(25px, 5.2vh, 35px); }
  .match-result-heading p { font-size: 9px; }
  .match-result-layout { grid-template-columns: minmax(0, 1.45fr) minmax(210px, .55fr); gap: 24px; }
  .match-result-list { gap: 6px; }
  .match-result-row { min-height: 53px; grid-template-columns: 49px minmax(0, 1fr) auto; padding: 5px 12px 5px 5px; }
  .match-result-place { width: 43px; height: 43px; }
  .match-result-place b { font-size: 17px; }
  .match-result-player strong { font-size: 16px; }
  .match-result-score b { font-size: 22px; }
  .winner-stamp { width: min(40vh, 270px); min-width: 220px; }
  .match-result-footer { min-height: 42px; }
  .match-result-timer { width: 39px; height: 39px; flex-basis: 39px; }
  .match-result-timer b { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .match-result-overlay.is-open .match-result-document,
  .match-result-overlay.is-open .match-result-row,
  .match-result-overlay.is-open .winner-stamp,
  .match-result-overlay.is-open .winner-stamp::before,
  .match-result-overlay.is-open .winner-stamp::after,
  .match-result-exit-copy { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; }
}

/* Keep the complete wordmark readable on standard desktop and laptop widths. */
@media (max-width: 1500px) {
  .topbar .brand-lockup { flex: 0 0 auto; min-width: min(340px, calc(100vw - 185px)); }
  .tabs { position: relative; width: auto; flex: 0 0 auto; align-items: center; overflow: visible; }
  .main-menu-toggle { display: inline-flex; }
  .main-menu-panel {
    position: absolute;
    z-index: 730;
    top: calc(100% + 9px);
    right: 58px;
    width: min(300px, calc(100vw - 20px));
    display: none;
    grid-template-columns: 1fr;
    gap: 5px;
    border: 1px solid rgb(232 189 88 / 32%);
    border-radius: 17px;
    padding: 8px;
    background: linear-gradient(155deg, rgb(17 39 30 / 99%), rgb(5 17 12 / 99%));
    box-shadow: 0 22px 56px rgb(0 0 0 / 58%);
  }
  .main-menu-panel.open { display: grid; }
  .main-menu-panel > button { width: 100%; justify-content: flex-start; text-align: left; }
}
@media (max-width: 720px) {
  .topbar .brand-lockup { min-width: 0; flex: 1 1 auto; }
  .main-menu-panel { position: fixed; inset: 0 0 0 auto; top: 0; right: 0; width: min(320px, 88vw); border-radius: 0; padding: 14px; }
}

/* Interactive profile photo framing. */
.profile-photo-settings .profile-photo-editor {
  grid-template-columns: 118px minmax(300px, 1fr);
  align-items: start;
}
.profile-photo-preview-column { display: grid; justify-items: center; gap: 9px; padding-top: 4px; }
.profile-photo-preview-column > span { color: #91a79c; font-size: 9px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.profile-photo-preview-column .profile-avatar-frame { width: 104px; height: 104px; flex-basis: 104px; }
.profile-photo-workspace { min-width: 0; }
.profile-photo-workspace > .profile-file-picker { width: fit-content; }
.profile-avatar-cropper {
  display: grid;
  grid-template-columns: minmax(210px, 330px) minmax(180px, 1fr);
  align-items: center;
  gap: 17px;
  margin-top: 14px;
  border: 1px solid rgb(232 189 88 / 20%);
  border-radius: 18px;
  padding: 14px;
  background: radial-gradient(circle at 10% 0%, rgb(232 189 88 / 9%), transparent 45%), rgb(0 0 0 / 18%);
}
.profile-avatar-cropper.hidden { display: none; }
.profile-avatar-crop-viewport {
  position: relative;
  width: min(100%, 330px);
  aspect-ratio: 1;
  overflow: hidden;
  isolation: isolate;
  border: 2px solid #e9c86e;
  border-radius: 20px;
  background: #0d1c16;
  box-shadow: 0 16px 34px rgb(0 0 0 / 42%), inset 0 0 0 1px rgb(255 255 255 / 8%);
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.profile-avatar-crop-viewport:focus-visible { outline: 3px solid rgb(255 224 137 / 42%); outline-offset: 3px; }
.profile-avatar-crop-viewport.is-dragging { cursor: grabbing; }
.profile-avatar-crop-viewport > img,
.profile-avatar-large > .profile-avatar-live-preview {
  position: absolute;
  z-index: 0;
  max-width: none;
  display: block;
  object-fit: fill;
  transform: translate(-50%, -50%);
  transform-origin: center;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.profile-avatar-crop-shade { position: absolute; z-index: 1; inset: 0; border-radius: inherit; box-shadow: inset 0 0 42px rgb(0 0 0 / 40%); pointer-events: none; }
.profile-avatar-crop-grid {
  position: absolute;
  z-index: 2;
  inset: 0;
  border: 1px solid rgb(255 244 205 / 50%);
  border-radius: inherit;
  background:
    linear-gradient(90deg, transparent 33.1%, rgb(255 244 205 / 26%) 33.2% 33.7%, transparent 33.8% 66.2%, rgb(255 244 205 / 26%) 66.3% 66.8%, transparent 66.9%),
    linear-gradient(transparent 33.1%, rgb(255 244 205 / 26%) 33.2% 33.7%, transparent 33.8% 66.2%, rgb(255 244 205 / 26%) 66.3% 66.8%, transparent 66.9%);
  pointer-events: none;
}
.profile-avatar-crop-controls { display: grid; align-content: center; gap: 11px; }
.profile-avatar-crop-controls > label { display: flex; align-items: center; justify-content: space-between; color: #d9e2dd; font-size: 11px; font-weight: 800; }
.profile-avatar-crop-controls output { color: #f1cf73; font-variant-numeric: tabular-nums; }
.profile-avatar-zoom-row { display: grid; grid-template-columns: 38px minmax(110px, 1fr) 38px; align-items: center; gap: 8px; }
.profile-avatar-zoom-row button { min-height: 38px; padding: 4px; font-size: 20px; }
.profile-avatar-zoom-row input[type="range"] { width: 100%; min-height: 38px; padding: 0; accent-color: #ddb956; }
.profile-avatar-crop-controls #resetProfileAvatarCrop { width: 100%; }
.profile-avatar-crop-hint { grid-column: 1 / -1; color: #81998d; font-size: 10px; line-height: 1.45; }
.profile-avatar-large { position: relative; }

@media (max-width: 900px) {
  .profile-photo-settings .profile-photo-editor { grid-template-columns: 80px minmax(0, 1fr); }
  .profile-photo-preview-column .profile-avatar-frame { width: 72px; height: 72px; flex-basis: 72px; }
  .profile-avatar-cropper { grid-template-columns: 1fr; gap: 11px; padding: 10px; }
  .profile-avatar-crop-viewport { justify-self: center; }
  .profile-avatar-crop-hint { grid-column: 1; }
}
@media (max-width: 540px) {
  .profile-photo-settings .profile-photo-editor { grid-template-columns: 1fr; }
  .profile-photo-preview-column { grid-template-columns: auto auto; justify-content: start; align-items: center; }
  .profile-avatar-cropper { grid-template-columns: 1fr; }
  .profile-avatar-crop-viewport { justify-self: center; }
  .profile-avatar-crop-hint { grid-column: 1; }
}

/* The compact top bar must keep the framed profile avatar visible. */
.topbar .profile-trigger > .profile-trigger-frame { display: grid !important; visibility: visible; opacity: 1; }
.topbar .profile-trigger-frame > .profile-trigger-avatar { display: grid !important; visibility: visible; opacity: 1; }

/* 2026 premium masthead and generated account-tier frames. */
#howToPlayBtn,
#homeTab { display: none !important; }

.topbar {
  min-height: 124px;
  align-items: stretch;
  overflow: visible;
  padding: 0 18px;
}
.topbar .brand-lockup {
  position: relative;
  min-width: 510px;
  height: 124px;
  align-self: end;
  gap: 0;
  overflow: visible;
  padding: 0 12px 0 0;
}
.topbar .brand-emblem {
  position: relative;
  z-index: 1;
  width: 138px;
  height: 138px;
  flex: 0 0 138px;
  margin: -4px -25px -11px -7px;
  object-fit: contain;
  filter: drop-shadow(0 13px 14px rgb(0 0 0 / 62%));
}
.topbar .brand-copy {
  position: relative;
  z-index: 2;
  align-content: center;
  gap: 8px;
  min-width: 0;
  padding: 4px 0 0;
}
.topbar .brand-copy strong {
  color: transparent;
  font: 950 clamp(37px, 3.45vw, 58px)/.9 Georgia, "Times New Roman", serif;
  letter-spacing: -.06em;
  background: linear-gradient(180deg, #fff9dc 0%, #f8d77b 23%, #a86518 49%, #ffe9a0 70%, #8b4d10 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  paint-order: stroke fill;
  -webkit-text-stroke: 1px rgb(69 32 7 / 78%);
  filter: drop-shadow(0 3px 0 #35180a) drop-shadow(0 8px 8px rgb(0 0 0 / 58%));
  transform: perspective(420px) rotateX(3deg);
  transform-origin: left center;
}
.topbar .brand-copy strong i { color: inherit; -webkit-text-fill-color: #d09b36; text-shadow: inherit; }
.topbar .brand-copy small {
  max-width: 320px;
  margin-left: 25px;
  color: #b9c9c0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-shadow: 0 2px 6px rgb(0 0 0 / 72%);
}
.topbar .tabs { margin-left: auto; justify-content: flex-end; align-items: center; }

.profile-trigger-frame,
.profile-avatar-frame {
  --account-frame-image: url("/assets/ui/avatar-frame-base-v1.png?v=1");
  isolation: isolate;
  overflow: visible !important;
  border-radius: 50% !important;
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
  transform: none !important;
}
[data-account-tier="player"],
[data-account-tier="base"],
[data-account-tier="silver"],
[data-account-tier="gold"] { --account-frame-image: url("/assets/ui/avatar-frame-base-v1.png?v=1"); }
[data-account-tier="premium-1"] { --account-frame-image: url("/assets/ui/avatar-frame-premium-1-v1.png?v=1"); }
[data-account-tier="premium-2"] { --account-frame-image: url("/assets/ui/avatar-frame-premium-2-v1.png?v=1"); }
[data-account-tier="vip"] { --account-frame-image: url("/assets/ui/avatar-frame-vip-v1.png?v=1"); }
.profile-trigger-frame::before,
.profile-avatar-frame::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  background: var(--account-frame-image) center / contain no-repeat;
  filter: drop-shadow(0 7px 8px rgb(0 0 0 / 58%));
  pointer-events: none;
}
.profile-trigger-frame::after,
.profile-avatar-frame::after { display: none !important; }
.profile-trigger-frame > .profile-trigger-avatar,
.profile-avatar-frame > .profile-avatar-large {
  position: relative;
  z-index: 1;
  width: 61% !important;
  height: 61% !important;
  overflow: hidden;
  border: 1px solid rgb(255 222 132 / 36%) !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 25%, #f1cf75, #6f4217) !important;
  box-shadow: inset 0 0 12px rgb(0 0 0 / 48%);
}
.profile-trigger-frame > .profile-trigger-avatar img,
.profile-avatar-frame > .profile-avatar-large img { border-radius: 50% !important; }

.topbar .profile-trigger.polished-button {
  position: relative;
  width: 116px !important;
  min-width: 116px !important;
  height: 116px !important;
  min-height: 116px !important;
  overflow: visible;
  padding: 0 !important;
}
.topbar .profile-trigger-frame { width: 104px !important; height: 104px !important; flex: 0 0 104px !important; }
.topbar .profile-trigger > small {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 1px;
  display: block !important;
  max-width: 108px;
  overflow: hidden;
  border: 1px solid rgb(244 207 110 / 45%);
  border-radius: 999px;
  padding: 3px 9px;
  background: linear-gradient(180deg, rgb(66 29 38 / 96%), rgb(15 35 27 / 97%));
  box-shadow: 0 5px 12px rgb(0 0 0 / 52%);
  color: #ffe69b;
  font-size: 8px;
  letter-spacing: .035em;
  text-overflow: ellipsis;
  transform: translateX(-50%);
}
.drawer-profile-identity .profile-trigger-frame { width: 82px !important; height: 82px !important; }
.drawer-profile-identity { grid-template-columns: 84px minmax(0, 1fr); }
.profile-view .profile-hero-panel > .profile-avatar-frame { width: 140px !important; height: 140px !important; flex-basis: 140px !important; }
.profile-photo-preview-column .profile-avatar-frame { width: 116px !important; height: 116px !important; flex-basis: 116px !important; }

:is(body.game-session-active,.game-session-surface).menu-drawer-open::after,
:is(body.game-session-active,.game-session-surface).profile-drawer-open::after { content: none !important; display: none !important; backdrop-filter: none !important; }
:is(body.game-session-active,.game-session-surface) > main.app,
:is(#home,[data-game-role="home"]).game-active,
:is(#home,[data-game-role="home"]).game-active .game-shell { filter: none !important; }

@media (min-width: 1501px) {
  .topbar .main-menu-panel { display: flex; align-items: center; justify-content: flex-end; }
  .topbar .main-menu-panel > button { flex: 0 0 auto; }
}

@media (max-width: 1500px) {
  .topbar { min-height: 112px; }
  .topbar .brand-lockup { min-width: min(500px, calc(100vw - 290px)); height: 112px; }
  .topbar .brand-emblem { width: 124px; height: 124px; flex-basis: 124px; margin-right: -23px; }
  .topbar .brand-copy strong { font-size: clamp(31px, 4vw, 46px); }
  .topbar .profile-trigger.polished-button { width: 104px !important; min-width: 104px !important; height: 106px !important; min-height: 106px !important; }
  .topbar .profile-trigger-frame { width: 94px !important; height: 94px !important; flex-basis: 94px !important; }
  .topbar .main-menu-panel { right: 104px; }
}

@media (max-width: 720px) {
  .topbar { min-height: 92px; gap: 2px; padding: 0 5px; }
  .topbar .brand-lockup { min-width: 0; height: 92px; padding: 0; }
  .topbar .brand-emblem { width: 88px; height: 88px; flex-basis: 88px; margin: 0 -19px -5px -7px; }
  .topbar .brand-copy { gap: 3px; padding-top: 2px; }
  .topbar .brand-copy strong { font-size: clamp(20px, 6vw, 28px); letter-spacing: -.065em; -webkit-text-stroke-width: .6px; }
  .topbar .brand-copy small { max-width: 128px; margin-left: 14px; font-size: 7px; letter-spacing: 0; }
  .topbar .tabs { gap: 1px; }
  .topbar .main-menu-toggle { width: 48px; min-width: 48px; min-height: 45px; gap: 0; overflow: hidden; padding: 6px; font-size: 0; }
  .topbar .main-menu-toggle .button-icon { width: 23px; height: 23px; flex-basis: 23px; }
  .topbar .profile-trigger.polished-button { width: 82px !important; min-width: 82px !important; height: 88px !important; min-height: 88px !important; }
  .topbar .profile-trigger-frame { width: 78px !important; height: 78px !important; flex-basis: 78px !important; }
  .topbar .profile-trigger > small { bottom: 0; max-width: 78px; padding: 2px 6px; font-size: 6px; }
  .topbar .main-menu-panel { right: 0; }
  .profile-view .profile-hero-panel > .profile-avatar-frame { width: 98px !important; height: 98px !important; flex-basis: 98px !important; }
  :is(#home,[data-game-role="home"]):not(.game-active) { overflow-y: auto; padding-bottom: 94px; }
  :is(#home,[data-game-role="home"]):not(.game-active) .lobby-shell {
    height: auto;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto;
  }
  :is(#home,[data-game-role="home"]):not(.game-active) .lobby-hero,
  :is(#home,[data-game-role="home"]):not(.game-active) .lobby-profile-card {
    grid-column: 1;
    min-width: 0;
    height: auto;
  }
  :is(#home,[data-game-role="home"]):not(.game-active) .lobby-hero { grid-row: 1; }
  :is(#home,[data-game-role="home"]):not(.game-active) .lobby-profile-card { grid-row: 2; }
}

@media (max-width: 480px) {
  .topbar { min-height: 82px; }
  .topbar .brand-lockup { height: 82px; }
  .topbar .brand-emblem { width: 76px; height: 76px; flex-basis: 76px; margin: 0 -16px -4px -6px; }
  .topbar .brand-copy strong { font-size: clamp(17px, 5vw, 21px); letter-spacing: -.07em; }
  .topbar .brand-copy small { display: none; }
  .topbar .main-menu-toggle { width: 44px; min-width: 44px; min-height: 42px; }
  .topbar .profile-trigger.polished-button { width: 72px !important; min-width: 72px !important; height: 80px !important; min-height: 80px !important; }
  .topbar .profile-trigger-frame { width: 68px !important; height: 68px !important; flex-basis: 68px !important; }
  .topbar .profile-trigger > small { max-width: 69px; font-size: 5.5px; }
}

/* Player seats v5: the portrait owns the card; counters float above and the name sits below. */
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .game-seat {
  --seat-frame-size: 116px;
  --seat-avatar-size: var(--seat-frame-size);
  box-sizing: border-box !important;
  width: 126px !important;
  height: 184px !important;
  min-height: 184px !important;
  display: block !important;
  overflow: visible !important;
  border: 1px solid rgb(232 189 88 / 18%) !important;
  border-radius: 27px !important;
  padding: 0 !important;
  background: radial-gradient(circle at 50% 40%, rgb(255 224 132 / 9%), transparent 58%), rgb(4 15 11 / 58%) !important;
  box-shadow: 0 12px 28px rgb(0 0 0 / 38%) !important;
  isolation: isolate;
}
:is(#home,[data-game-role="home"]).game-active .game-hud {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .game-seat.is-you {
  border-color: rgb(235 202 113 / 35%) !important;
  background: radial-gradient(circle at 50% 38%, rgb(255 225 135 / 15%), transparent 61%), rgb(9 29 21 / 72%) !important;
}
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-avatar {
  position: absolute !important;
  z-index: 3 !important;
  left: 50% !important;
  top: 36px !important;
  width: var(--seat-frame-size) !important;
  height: var(--seat-frame-size) !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 50% !important;
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
  transform: translateX(-50%) !important;
}
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-avatar::before,
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .game-seat.active .seat-avatar::before {
  content: "" !important;
  position: absolute !important;
  z-index: 5 !important;
  inset: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  padding: 0 !important;
  background: var(--account-frame-image) center / contain no-repeat !important;
  filter: drop-shadow(0 7px 7px rgb(0 0 0 / 58%)) !important;
  -webkit-mask: none !important;
  mask: none !important;
  pointer-events: none;
}
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-avatar::after { content: none; }
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .game-seat.active .seat-avatar::after {
  content: "";
  position: absolute;
  z-index: 6;
  inset: -3px;
  border-radius: 50%;
  padding: 3px;
  background: conic-gradient(var(--turn-color, #2bd06f) calc(var(--turn-progress, 1) * 1turn), rgb(255 255 255 / 12%) 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--turn-color, #2bd06f) 78%, transparent));
  pointer-events: none;
}
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-avatar-photo {
  position: relative;
  z-index: 2;
  width: 68%;
  height: 68%;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgb(255 230 160 / 42%);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 25%, #f1cf75, #6f4217 73%);
  box-shadow: inset 0 0 15px rgb(0 0 0 / 52%);
  color: #25170c;
  font: 950 30px/1 Georgia, "Times New Roman", serif;
}
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-avatar-initial { position: relative; z-index: 1; }
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-avatar-photo img {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  border: 0 !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-metrics {
  position: absolute;
  z-index: 9;
  left: 8px;
  right: 8px;
  top: 2px;
  width: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  pointer-events: none;
}
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-metric {
  box-sizing: border-box;
  min-width: 0;
  height: 30px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 1fr;
  align-items: center;
  gap: 2px;
  overflow: hidden;
  border: 1px solid rgb(240 211 133 / 38%);
  border-radius: 10px;
  padding: 3px 5px;
  background: linear-gradient(155deg, rgb(18 45 35 / 96%), rgb(4 15 11 / 97%));
  box-shadow: 0 5px 11px rgb(0 0 0 / 52%), inset 0 1px rgb(255 255 255 / 7%);
}
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-metric small {
  overflow: hidden;
  color: #b8c8bf;
  font: 800 6px/1 var(--club-font, Georgia, serif);
  letter-spacing: .015em;
  text-overflow: clip;
  text-transform: uppercase;
  white-space: nowrap;
}
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-metric b {
  font: 950 14px/1 Georgia, "Times New Roman", serif;
  text-shadow: 0 2px 4px rgb(0 0 0 / 65%);
}
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-name {
  position: absolute;
  z-index: 9;
  left: 5px;
  right: 5px;
  bottom: 3px;
  box-sizing: border-box;
  width: auto;
  min-height: 28px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgb(239 204 111 / 42%);
  border-radius: 11px;
  padding: 4px 7px 5px;
  background: linear-gradient(180deg, rgb(77 27 40 / 96%), rgb(10 31 23 / 97%));
  box-shadow: 0 5px 12px rgb(0 0 0 / 55%), inset 0 1px rgb(255 255 255 / 8%);
  color: #ffe6a0;
  font: 900 12px/1.05 Georgia, "Times New Roman", serif;
  letter-spacing: .01em;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0 2px 5px rgb(0 0 0 / 80%);
  white-space: nowrap;
}
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .game-seat[data-account-tier="premium-1"] { box-shadow: 0 0 18px rgb(126 176 212 / 16%), 0 12px 28px rgb(0 0 0 / 38%) !important; }
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .game-seat[data-account-tier="premium-2"] { box-shadow: 0 0 20px rgb(176 100 223 / 22%), 0 12px 28px rgb(0 0 0 / 38%) !important; }
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .game-seat[data-account-tier="vip"] { box-shadow: 0 0 22px rgb(238 186 67 / 25%), 0 12px 28px rgb(0 0 0 / 42%) !important; }
:is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .dealer-chip { z-index: 10; left: 3px !important; top: 44px !important; }

@media (max-height: 600px) and (orientation: landscape) {
  :is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .game-seat {
    --seat-frame-size: 94px;
    width: 104px !important;
    height: 154px !important;
    min-height: 154px !important;
    border-radius: 23px !important;
  }
  :is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-avatar { top: 30px !important; }
  :is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-avatar-photo { font-size: 25px; }
  :is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-metrics { left: 6px; right: 6px; top: 3px; gap: 3px; }
  :is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-metric { height: 25px; border-radius: 8px; padding: 2px 4px; }
  :is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-metric small { font-size: 5px; }
  :is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-metric b { font-size: 12px; }
  :is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-name { min-height: 23px; border-radius: 9px; padding: 3px 5px; font-size: 10px; }
  :is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .dealer-chip { left: 2px !important; top: 35px !important; }
}

@media (max-width: 560px) and (orientation: portrait) {
  :is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .game-seat {
    --seat-frame-size: 86px;
    width: 96px !important;
    height: 144px !important;
    min-height: 144px !important;
    border-radius: 21px !important;
  }
  :is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-avatar { top: 29px !important; }
  :is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-avatar-photo { font-size: 23px; }
  :is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-metrics { left: 5px; right: 5px; top: 3px; gap: 3px; }
  :is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-metric { height: 24px; border-radius: 8px; padding: 2px 3px; }
  :is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-metric small { font-size: 5px; }
  :is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-metric b { font-size: 11px; }
  :is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-name { min-height: 22px; border-radius: 8px; padding: 3px 4px; font-size: 9px; }
  :is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .dealer-chip { left: 1px !important; top: 33px !important; }
}

/* Web table scale: use up to 2.5x card artwork and all free space around the portrait. */
@media (min-width: 1000px) and (min-height: 650px) {
  :is(#home,[data-game-role="home"]).game-active {
    --web-seat-frame: clamp(185px, 26.5vh, 290px);
    --web-card-height: clamp(205px, 32vh, 240px);
    --web-played-card-height: clamp(150px, 22vh, 190px);
  }
  :is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .game-seat {
    --seat-frame-size: var(--web-seat-frame);
    width: calc(var(--web-seat-frame) + 14px) !important;
    height: calc(var(--web-seat-frame) + 78px) !important;
    min-height: calc(var(--web-seat-frame) + 78px) !important;
    border-radius: 34px !important;
  }
  :is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-avatar { top: 38px !important; }
  :is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-avatar-photo { font-size: clamp(36px, 5vh, 54px); }
  :is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-metrics {
    left: 16%;
    right: 16%;
    top: 1px;
    gap: 7px;
  }
  :is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-metric {
    height: 33px;
    border-radius: 11px;
    padding: 3px 6px;
  }
  :is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-metric small { font-size: 7px; }
  :is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-metric b { font-size: 17px; }
  :is(#home,[data-game-role="home"]).game-active :is(#gamePlayers,[data-game-role="gamePlayers"]) .seat-name {
    left: 9%;
    right: 9%;
    bottom: 3px;
    min-height: 31px;
    border-radius: 12px;
    font-size: 14px;
  }
  :is(#home,[data-game-role="home"]).game-active .hand-panel {
    left: calc(var(--web-seat-frame) + 34px) !important;
    right: calc(var(--web-seat-frame) + 34px) !important;
    height: calc(var(--web-card-height) + 15px) !important;
  }
  :is(#home,[data-game-role="home"]).game-active .hand {
    --hand-overlap: 0px;
    gap: 0 !important;
    overflow: visible !important;
  }
  :is(#home,[data-game-role="home"]).game-active .hand .card {
    width: calc(var(--web-card-height) * .625) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: var(--web-card-height) !important;
    min-height: 0 !important;
    flex: 0 0 calc(var(--web-card-height) * .625) !important;
    border-radius: 13px !important;
  }
  :is(#home,[data-game-role="home"]).game-active .hand .card + .card { margin-left: var(--hand-overlap) !important; }
  :is(#home,[data-game-role="home"]).game-active .played-card .card,
  :is(#home,[data-game-role="home"]).game-active .trick > .table-landed-card .card {
    width: calc(var(--web-played-card-height) * .625) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: var(--web-played-card-height) !important;
    min-height: 0 !important;
  }
  :is(#home,[data-game-role="home"]).game-active .trump-upcard,
  :is(#home,[data-game-role="home"]).game-active .trump-suit-mark {
    height: 106px !important;
    min-height: 106px !important;
  }
  :is(#home,[data-game-role="home"]).game-active .trump-upcard { width: 66px !important; flex-basis: 66px !important; }
  :is(#home,[data-game-role="home"]).game-active .trump-suit-mark { width: 66px !important; flex-basis: 66px !important; font-size: 36px !important; }
}

/* Tournament hub: server-backed four-player elimination bracket. */
.tournament-hub {
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--accent) 12%, transparent), transparent 30%),
    var(--surface);
}
.tournament-heading { align-items: flex-start; gap: 18px; }
.tournament-heading h2 { margin: 0; }
.tournament-heading p { max-width: 720px; margin: 7px 0 0; color: var(--muted); }
.tournament-filters { display: flex; gap: 7px; margin: 18px 0 12px; overflow-x: auto; scrollbar-width: thin; }
.tournament-filters button { flex: 0 0 auto; min-height: 38px; padding: 8px 14px; border: 1px solid var(--border); background: var(--surface-strong); color: var(--muted); }
.tournament-filters button.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--surface-strong)); color: var(--text); }
.tournament-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-bottom: 12px; }
.tournament-summary article { display: flex; align-items: center; gap: 11px; min-width: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-strong); padding: 11px 13px; }
.tournament-summary article > span { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); font-size: 19px; }
.tournament-summary strong, .tournament-summary small { display: block; }
.tournament-summary strong { font-size: 18px; line-height: 1; }
.tournament-summary small { margin-top: 3px; color: var(--muted); }
.tournament-layout { display: grid; grid-template-columns: minmax(340px, .88fr) minmax(430px, 1.12fr); gap: 12px; align-items: start; }
.tournament-list { display: grid; gap: 8px; min-width: 0; }
.tournament-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 11px; align-items: center; min-width: 0; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-strong); padding: 12px; cursor: pointer; transition: border-color 150ms ease, background 150ms ease, transform 150ms ease; }
.tournament-row:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); transform: translateY(-1px); }
.tournament-row.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface-strong)); box-shadow: inset 3px 0 var(--accent); }
.tournament-row-icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 12px; background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 27%, var(--surface)), var(--surface)); color: var(--accent); font-size: 24px; }
.tournament-row-main { min-width: 0; }
.tournament-row-main > strong, .tournament-row-main > small, .tournament-row-main > em { display: block; }
.tournament-row-main > strong { margin: 5px 0 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.tournament-row-main > small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.tournament-row-main > em { margin-top: 5px; color: var(--accent); font-size: 12px; font-style: normal; font-weight: 700; }
.tournament-row-meta { display: grid; justify-items: end; gap: 4px; max-width: 125px; text-align: right; }
.tournament-row-meta strong { font-size: 16px; }
.tournament-row-meta small { color: var(--muted); }
.tournament-row-meta span { color: var(--accent); font-size: 12px; font-weight: 700; }
.tournament-status { display: inline-flex; width: max-content; min-height: 21px; align-items: center; border: 1px solid var(--border); border-radius: 999px; padding: 2px 7px; background: var(--surface); color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.tournament-status.status-open { border-color: #237a57; background: rgb(24 117 78 / 16%); color: #58d59f; }
.tournament-status.status-ready, .tournament-status.status-running { border-color: #8e711b; background: rgb(185 143 21 / 14%); color: #f4c542; }
.tournament-status.status-completed { border-color: #526173; background: rgb(91 111 134 / 14%); color: #b7c6d8; }
.tournament-status.status-cancelled { border-color: #753642; background: rgb(151 45 63 / 14%); color: #f08b9c; }
.tournament-detail { position: sticky; top: 12px; min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 15px; background: var(--surface-strong); }
.tournament-detail > section { padding: 0 17px 16px; }
.tournament-detail > section h4 { margin: 0 0 9px; color: var(--text); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.tournament-detail-hero { display: grid; grid-template-columns: 58px 1fr; gap: 14px; min-height: 130px; align-items: center; padding: 18px; background: radial-gradient(circle at 15% 50%, rgb(244 197 66 / 19%), transparent 31%), linear-gradient(120deg, #161d27, #10151c); }
.tournament-detail-hero[data-theme="emerald"] { background: radial-gradient(circle at 15% 50%, rgb(50 201 139 / 20%), transparent 31%), linear-gradient(120deg, #10231e, #10151c); }
.tournament-detail-hero[data-theme="ruby"] { background: radial-gradient(circle at 15% 50%, rgb(220 63 83 / 21%), transparent 31%), linear-gradient(120deg, #271419, #10151c); }
.tournament-detail-hero h3 { margin: 7px 0 4px; font-size: clamp(20px, 2vw, 27px); }
.tournament-detail-hero p { margin: 0; color: #aebccd; line-height: 1.4; }
.tournament-crown { display: grid; width: 58px; height: 58px; place-items: center; border: 1px solid rgb(244 197 66 / 45%); border-radius: 17px; background: rgb(244 197 66 / 10%); color: #f4c542; font-size: 34px; box-shadow: 0 10px 28px rgb(0 0 0 / 23%); }
.tournament-rule-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.tournament-rule-strip > span { min-width: 0; padding: 11px 9px; text-align: center; }
.tournament-rule-strip > span + span { border-left: 1px solid var(--border); }
.tournament-rule-strip b, .tournament-rule-strip small { display: block; }
.tournament-rule-strip b { overflow: hidden; text-overflow: ellipsis; color: var(--text); white-space: nowrap; }
.tournament-rule-strip small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.tournament-own-state { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 17px 16px; border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--border)); border-radius: 10px; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); padding: 10px 12px; color: var(--accent); }
.tournament-own-state span { color: var(--muted); font-size: 12px; }
.tournament-stages { display: grid; gap: 7px; }
.tournament-stage { display: grid; grid-template-columns: 32px 1fr; gap: 9px; align-items: center; border: 1px solid var(--border-soft); border-radius: 9px; padding: 8px; }
.tournament-stage > span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 9px; background: var(--surface); color: var(--muted); font-weight: 800; }
.tournament-stage strong, .tournament-stage small { display: block; }
.tournament-stage small { margin-top: 2px; color: var(--muted); }
.tournament-stage.active { border-color: color-mix(in srgb, var(--accent) 52%, var(--border)); }
.tournament-stage.active > span { background: var(--accent); color: var(--accent-text); }
.tournament-stage.done > span { background: #176845; color: #a7f3d0; }
.tournament-prizes { display: flex; flex-wrap: wrap; gap: 7px; }
.tournament-prizes span { border: 1px solid #765f1c; border-radius: 8px; background: rgb(244 197 66 / 8%); padding: 7px 9px; color: #f1d36f; font-size: 12px; }
.tournament-participants { display: flex; flex-wrap: wrap; gap: 6px; }
.tournament-participants span { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border-soft); border-radius: 999px; padding: 5px 9px; color: var(--muted); font-size: 12px; }
.tournament-participants b { color: var(--accent); }
.tournament-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--border); padding: 14px 17px 17px; }
.tournament-detail-actions button { flex: 1 1 170px; }
.tournament-enter { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 8px 22px color-mix(in srgb, var(--accent) 16%, transparent); }
.tournament-empty { display: grid; min-height: 190px; place-content: center; justify-items: center; padding: 25px; text-align: center; }
.tournament-empty > span { color: var(--accent); font-size: 34px; }
.tournament-empty > strong { margin-top: 7px; }
.tournament-empty p { max-width: 330px; margin: 6px 0 0; color: var(--muted); }

@media (max-width: 980px) {
  .tournament-layout { grid-template-columns: 1fr; }
  .tournament-detail { position: static; }
}

@media (max-width: 620px) {
  .tournament-heading { display: grid; }
  .tournament-heading > button { width: 100%; }
  .tournament-summary { grid-template-columns: 1fr; }
  .tournament-summary article { padding: 9px 11px; }
  .tournament-row { grid-template-columns: 38px minmax(0, 1fr); padding: 10px; }
  .tournament-row-icon { width: 38px; height: 38px; font-size: 21px; }
  .tournament-row-meta { grid-column: 2; grid-template-columns: repeat(3, auto); justify-content: start; justify-items: start; max-width: none; text-align: left; }
  .tournament-rule-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tournament-rule-strip > span:nth-child(3) { border-left: 0; border-top: 1px solid var(--border); }
  .tournament-rule-strip > span:nth-child(4) { border-top: 1px solid var(--border); }
  .tournament-detail-hero { grid-template-columns: 46px 1fr; padding: 14px; }
  .tournament-crown { width: 46px; height: 46px; border-radius: 13px; font-size: 27px; }
  .tournament-own-state { align-items: flex-start; flex-direction: column; }
}

/* Clubs and club wars. */
.club-hub { overflow: hidden; background: radial-gradient(circle at 90% 0, rgb(28 129 89 / 13%), transparent 32%), var(--surface); }
.club-heading { align-items: flex-start; }
.club-heading h2 { margin: 0; }
.club-heading p { margin: 6px 0 0; color: var(--muted); }
.club-navigation { display: flex; gap: 7px; margin: 18px 0 14px; overflow-x: auto; }
.club-navigation button { flex: 0 0 auto; border: 1px solid var(--border); background: var(--surface-strong); color: var(--muted); }
.club-navigation button.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface-strong)); color: var(--text); }
.club-content { min-height: 320px; }
.club-discovery-hero { display: grid; grid-template-columns: 72px 1fr; gap: 18px; align-items: center; border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(125deg, #12251f, var(--surface-strong)); padding: 20px; }
.club-discovery-hero > span { display: grid; width: 72px; height: 72px; place-items: center; border: 1px solid #2a7d5c; border-radius: 20px; background: rgb(28 129 89 / 15%); color: #66daa9; font-size: 42px; }
.club-discovery-hero h3, .club-discovery-hero p { margin: 0; }
.club-discovery-hero p { margin-top: 6px; color: var(--muted); }
.club-discovery-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .65fr); gap: 12px; margin-top: 12px; align-items: start; }
.club-section { border: 1px solid var(--border); border-radius: 14px; background: var(--surface-strong); padding: 16px; }
.club-section > h3:first-child { margin-top: 0; }
.club-create-card { display: grid; gap: 10px; }
.club-create-card h3 { margin: 0; }
.club-create-card textarea { min-height: 86px; }
.club-search, .club-invite-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 11px; }
.club-directory { display: grid; gap: 7px; }
.club-directory-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 11px; align-items: center; border: 1px solid var(--border-soft); border-radius: 11px; padding: 10px; }
.club-directory-row > div:nth-child(2) { min-width: 0; }
.club-directory-row strong, .club-directory-row small { display: block; }
.club-directory-row small { margin-top: 3px; color: var(--muted); }
.club-directory-row > div:last-child { display: grid; justify-items: end; gap: 6px; color: var(--muted); font-size: 11px; }
.club-emblem { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 13px; background: rgb(28 129 89 / 14%); color: #66daa9; font-size: 25px; }
.club-notice { border: 1px solid #7c671f; border-radius: 10px; background: rgb(244 197 66 / 8%); padding: 10px 12px; color: #ebd477; }
.club-profile-hero { display: grid; grid-template-columns: 86px 1fr; gap: 18px; align-items: center; min-height: 150px; border: 1px solid var(--border); border-radius: 16px; background: radial-gradient(circle at 12% 50%, rgb(28 129 89 / 22%), transparent 27%), linear-gradient(125deg, #12251f, #10151c); padding: 21px; }
.club-profile-emblem { display: grid; width: 86px; height: 86px; place-items: center; border: 1px solid #367e62; border-radius: 24px; background: rgb(28 129 89 / 14%); color: #6bddae; font-size: 48px; box-shadow: 0 15px 32px rgb(0 0 0 / 25%); }
.club-profile-hero h3 { margin: 7px 0 4px; font-size: clamp(23px, 3vw, 34px); }
.club-profile-hero h3 small { color: var(--accent); font-size: .42em; }
.club-profile-hero p { margin: 0; color: var(--muted); }
.club-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin: 11px 0; }
.club-metrics article { border: 1px solid var(--border); border-radius: 11px; background: var(--surface-strong); padding: 12px; }
.club-metrics small, .club-metrics strong { display: block; }
.club-metrics small { color: var(--muted); }
.club-metrics strong { margin-top: 5px; color: var(--text); font-size: 19px; }
.club-war-banner { display: flex; align-items: center; justify-content: space-between; gap: 15px; border: 1px solid #896f1e; border-radius: 13px; background: linear-gradient(120deg, rgb(244 197 66 / 12%), var(--surface-strong)); padding: 14px 16px; margin-bottom: 11px; }
.club-war-banner.quiet { border-color: var(--border); background: var(--surface-strong); }
.club-war-banner strong, .club-war-banner small { display: block; }
.club-war-banner small { margin-top: 4px; color: var(--muted); }
.club-member-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.club-member-grid.full { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.club-member-card { display: grid; grid-template-columns: 39px minmax(0, 1fr); gap: 9px; align-items: center; border: 1px solid var(--border-soft); border-radius: 10px; padding: 9px; }
.club-member-card.inactive { opacity: .68; border-style: dashed; }
.club-member-avatar { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 50%; background: #1d5845; color: #c7f8e5; font-weight: 900; }
.club-member-card strong, .club-member-card small, .club-member-card em { display: block; }
.club-member-card small { margin-top: 2px; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.club-member-card em { margin-top: 3px; color: #5bd3a2; font-size: 11px; font-style: normal; }
.club-member-card.inactive em { color: #dca56b; }
.club-member-card .card-actions { grid-column: 1 / -1; }
.club-war-score { display: grid; grid-template-columns: 1fr auto 1fr; gap: 17px; align-items: center; border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(125deg, #17231f, #141820); padding: 21px; }
.club-war-score article { display: grid; justify-items: center; text-align: center; }
.club-war-score article > span { font-size: 38px; }
.club-war-score article strong { margin: 6px 0; }
.club-war-score article b { color: var(--accent); font-size: clamp(22px, 4vw, 34px); }
.club-war-score > i { color: var(--muted); font-style: normal; font-weight: 900; }
.club-own-war-state { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 10px 0; border: 1px solid var(--border); border-radius: 11px; padding: 11px; }
.club-own-war-state span { color: var(--muted); }
.club-own-war-state button { margin-left: auto; }
.club-war-leaders { display: grid; gap: 5px; margin-bottom: 17px; }
.club-war-leaders > div { display: grid; grid-template-columns: 30px 1fr auto; gap: 8px; border-bottom: 1px solid var(--border-soft); padding: 7px; }
.club-war-leaders b { color: var(--accent); }
.club-war-searching { display: grid; min-height: 220px; place-content: center; justify-items: center; text-align: center; }
.club-war-searching > span { color: var(--accent); font-size: 44px; }
.club-war-searching p { color: var(--muted); }
.club-war-rules { border-top: 1px solid var(--border); padding-top: 12px; line-height: 1.55; }
.club-permissions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-bottom: 13px; }
.club-permissions label { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border-soft); border-radius: 9px; padding: 9px; }
.club-permissions input { width: auto; }
.club-danger-zone { display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid #6d3039; margin-top: 20px; padding-top: 15px; }
.club-danger-zone h4 { flex: 1 0 100%; margin: 0; color: #ef9aa8; }
.admin-club-layout { display: grid; grid-template-columns: minmax(350px, .9fr) minmax(420px, 1.1fr); gap: 12px; align-items: start; margin: 12px 0 20px; }
.admin-club-roster { display: grid; gap: 5px; max-height: 360px; overflow: auto; }
.admin-club-roster > div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--border-soft); padding: 6px 0; }
.admin-club-roster small { color: var(--muted); }

@media (max-width: 980px) {
  .club-discovery-layout, .admin-club-layout { grid-template-columns: 1fr; }
  .club-member-grid.full { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .club-heading { display: grid; }
  .club-heading > button { width: 100%; }
  .club-discovery-hero, .club-profile-hero { grid-template-columns: 54px 1fr; padding: 14px; }
  .club-discovery-hero > span, .club-profile-emblem { width: 54px; height: 54px; border-radius: 16px; font-size: 31px; }
  .club-directory-row { grid-template-columns: 42px 1fr; }
  .club-directory-row > div:last-child { grid-column: 2; justify-items: start; }
  .club-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .club-war-banner { align-items: stretch; flex-direction: column; }
  .club-member-grid, .club-member-grid.full { grid-template-columns: 1fr; }
  .club-war-score { gap: 6px; padding: 13px 7px; }
  .club-own-war-state { align-items: stretch; flex-direction: column; }
  .club-own-war-state button { margin-left: 0; }
  .club-permissions { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .app-panel-view:not(.hidden) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 7px;
    overflow: hidden;
  }
  .app-view-rail { min-width: 0; flex-direction: row; align-items: center; padding: 7px; }
  .app-view-rail-heading { display: none; }
  .app-view-home { flex: 0 0 auto; min-height: 40px; }
  .app-view-rail nav { min-width: 0; display: flex; flex: 1 1 auto; gap: 4px; overflow-x: auto; overflow-y: hidden; }
  .app-view-rail nav button { min-width: 88px; min-height: 40px; grid-template-columns: 18px minmax(0, 1fr); padding: 5px 7px; }
  .app-view-stage { min-width: 0; padding: 7px; }
}

/* Lobby command center: screens 1–5. */
:is(#home,[data-game-role="home"]):not(.game-active) .lobby-dashboard {
  grid-template-columns: 214px minmax(520px, 1fr) 268px !important;
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
}
:is(#home,[data-game-role="home"]):not(.game-active) .lobby-side-rail,
:is(#home,[data-game-role="home"]):not(.game-active) .lobby-command-center,
:is(#home,[data-game-role="home"]):not(.game-active) .lobby-right-rail { min-width: 0; min-height: 0; height: 100%; }
.lobby-side-rail { display: flex; flex-direction: column; padding: 11px; }
.lobby-side-rail .lobby-player-heading { grid-template-columns: 48px minmax(0, 1fr) auto; padding: 5px; }
.lobby-side-rail .lobby-avatar { width: 48px; height: 48px; border-radius: 50%; }
.lobby-side-rail .lobby-wallet { margin: 8px 0; }
.lobby-side-rail .lobby-progress-list { flex: 1 1 auto; align-content: start; }
.lobby-side-rail .lobby-progress-list button { min-height: 43px; }
.lobby-tournament-promo {
  display: grid;
  gap: 4px;
  overflow: hidden;
  border: 1px solid rgb(235 196 94 / 24%);
  border-radius: 16px;
  padding: 13px;
  background: radial-gradient(circle at 100% 0, rgb(229 186 78 / 20%), transparent 42%), linear-gradient(145deg, #5b172a, #27101a);
}
.lobby-tournament-promo > span { color: #d8b969; font-size: 8px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.lobby-tournament-promo > strong { color: #fff0c5; font: 700 15px/1.1 Georgia, serif; }
.lobby-tournament-promo > small { color: #c7aeb2; font-size: 9px; line-height: 1.35; }
.lobby-tournament-promo button { width: 100%; min-height: 34px; margin-top: 5px; padding: 6px; font-size: 9px; }

.lobby-command-center {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 24px;
  padding: clamp(18px, 2vw, 28px);
  background:
    radial-gradient(circle at 80% 5%, rgb(223 179 69 / 10%), transparent 30%),
    radial-gradient(circle at 0 100%, rgb(113 28 47 / 20%), transparent 38%),
    linear-gradient(145deg, rgb(13 38 28 / 98%), rgb(4 18 12 / 98%));
}
.lobby-welcome { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: 15px; }
.lobby-welcome h2 { margin: 4px 0 0; color: #fff0c9; font: 700 clamp(24px, 2.15vw, 34px)/1 Georgia, serif; letter-spacing: -.035em; }
.lobby-welcome h2 > span:last-child { color: #ebc862; }
.lobby-welcome > button { min-height: 38px; }
.lobby-primary-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lobby-action-card {
  position: relative;
  min-height: 196px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px;
  grid-template-rows: 1fr auto;
  gap: 8px;
  overflow: hidden;
  border: 1px solid rgb(233 194 96 / 19%);
  border-radius: 19px;
  padding: 20px;
  background: linear-gradient(135deg, #5b1a2b, #29131b 52%, #10251c);
  box-shadow: 0 14px 28px rgb(0 0 0 / 24%);
}
.lobby-action-card.rooms-card { background: linear-gradient(135deg, #173c2c, #0b2b20 54%, #421828); }
.lobby-action-card > div:nth-child(2) { position: relative; z-index: 2; align-self: center; }
.lobby-action-card h3 { margin: 4px 0 7px; color: #fff1c7; font: 700 23px/1 Georgia, serif; }
.lobby-action-card p { max-width: 220px; margin: 0; color: #b9afa8; font-size: 10px; line-height: 1.45; }
.lobby-action-card > button { position: relative; z-index: 3; width: fit-content; min-height: 38px; padding: 8px 17px; }
.lobby-action-art { position: relative; grid-column: 2; grid-row: 1 / 3; min-width: 0; }
.mini-table { position: absolute; inset: 29px -42px auto 3px; height: 82px; border: 5px solid #8f6324; border-radius: 50%; background: radial-gradient(ellipse, #126345, #073c2b 68%, #042319); box-shadow: 0 18px 25px rgb(0 0 0 / 48%), inset 0 0 0 2px #d9b65e; transform: rotate(-8deg); }
.mini-table i { position: absolute; inset: 15px 24px; border: 1px solid rgb(241 207 111 / 35%); border-radius: 50%; }
.mini-table b { position: absolute; left: 50%; top: 50%; color: rgb(244 211 119 / 62%); font: 700 18px Georgia, serif; transform: translate(-50%, -50%); }
.floating-card { position: absolute; z-index: 2; width: 46px; height: 64px; display: grid; place-items: center; border: 3px solid #ecddbd; border-radius: 7px; background: #f4ead4; box-shadow: 0 9px 16px rgb(0 0 0 / 54%); color: #741b2e; font: 800 17px Georgia, serif; }
.floating-card.card-one { right: 7px; top: 4px; transform: rotate(13deg); }
.floating-card.card-two { right: 43px; top: 13px; transform: rotate(-13deg); }
.lobby-friends-banner {
  width: 100%;
  min-height: 70px;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  margin-top: 12px;
  border: 1px solid rgb(220 178 83 / 23%);
  border-radius: 17px;
  padding: 10px 16px;
  background: radial-gradient(circle at 95% 50%, rgb(231 193 92 / 15%), transparent 25%), linear-gradient(100deg, #671b35, #421529 50%, #1c3228);
  color: #fff1ca;
  text-align: left;
}
.lobby-friends-banner > span:nth-child(2) { display: grid; gap: 3px; }
.lobby-friends-banner strong { font: 700 17px/1 Georgia, serif; }
.lobby-friends-banner small { color: #c8b7b7; font-size: 9px; }
.lobby-friends-banner > b { color: #e8cb79; font-size: 10px; }
.friends-stack { display: flex; padding-left: 11px; }
.friends-stack i { width: 37px; height: 37px; display: grid; place-items: center; border: 2px solid #e6c76c; border-radius: 50%; margin-left: -11px; background: linear-gradient(145deg, #783046, #173f30); box-shadow: 0 5px 12px rgb(0 0 0 / 38%); color: #fff0c4; font: 700 12px Georgia, serif; }
.lobby-recent-section { min-height: 0; display: flex; flex: 1 1 auto; flex-direction: column; margin-top: 14px; }
.lobby-recent-section > header { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.lobby-recent-section h3 { margin: 2px 0 0; color: #f4e6c5; font: 700 17px/1 Georgia, serif; }
.lobby-recent-section > header button { min-height: 32px; padding: 6px 10px; font-size: 9px; }
.lobby-recent-matches { min-height: 0; display: grid; gap: 5px; overflow-y: auto; }
.lobby-recent-matches > p { color: #829b8f; font-size: 10px; }
.lobby-match-row { display: grid; grid-template-columns: 31px minmax(0, 1fr) auto 42px; align-items: center; gap: 9px; border: 1px solid rgb(232 189 88 / 10%); border-radius: 11px; padding: 6px 8px; background: rgb(0 0 0 / 16%); }
.lobby-match-row .match-place { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; background: rgb(122 32 52 / 34%); color: #e9c96e; }
.lobby-match-row > div { min-width: 0; display: grid; gap: 2px; }
.lobby-match-row > div strong { overflow: hidden; color: #e7e7de; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.lobby-match-row > div small { color: #7f968a; font-size: 8px; }
.lobby-match-row > b { color: #d5ded8; font-size: 10px; }
.lobby-match-row > em { font-size: 10px; font-style: normal; font-weight: 900; text-align: right; }
.lobby-match-row > em.positive { color: #73d49b; }
.lobby-match-row > em.negative { color: #e67c8c; }

.lobby-right-rail { display: flex; flex-direction: column; gap: 9px; }
.lobby-right-rail > section,
.lobby-right-rail > article,
.lobby-right-rail > button { border: 1px solid rgb(232 189 88 / 18%); border-radius: 18px; background: linear-gradient(145deg, rgb(17 39 30 / 96%), rgb(6 19 13 / 96%)); box-shadow: 0 15px 34px rgb(0 0 0 / 22%); }
.lobby-summary-card { flex: 1 1 auto; min-height: 235px; padding: 14px; }
.lobby-summary-card > header { display: flex; align-items: center; justify-content: space-between; color: #dfe8e2; font-size: 10px; font-weight: 800; }
.lobby-summary-card > header button { width: 30px; height: 30px; min-height: 30px; padding: 0; border-radius: 50%; }
.lobby-rating-orbit { width: 128px; height: 128px; display: grid; align-content: center; justify-items: center; gap: 3px; margin: 10px auto; border: 7px solid rgb(229 193 96 / 18%); border-top-color: #e6c86e; border-right-color: #a96f26; border-radius: 50%; background: radial-gradient(circle, rgb(114 36 51 / 30%), transparent 67%); box-shadow: inset 0 0 22px rgb(0 0 0 / 35%); }
.lobby-rating-orbit span { color: #94aa9e; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.lobby-rating-orbit strong { color: #f8dd8b; font: 700 27px/1 Georgia, serif; }
.lobby-rating-orbit small { max-width: 92px; color: #8ca195; font-size: 7px; text-align: center; }
.lobby-summary-card .lobby-stat-strip { width: 100%; margin: 8px 0 0; }
.lobby-summary-card .lobby-stat-strip > div { padding: 8px 5px; text-align: center; }
.lobby-summary-card .lobby-stat-strip span { font-size: 7px; }
.lobby-summary-card .lobby-stat-strip strong { font-size: 14px; }
.lobby-vip-card { display: grid; gap: 4px; padding: 13px; background: radial-gradient(circle at 100% 0, rgb(240 204 107 / 22%), transparent 45%), linear-gradient(145deg, #5e1a2e, #27131b) !important; }
.lobby-vip-card > span { color: #ebca72; font-size: 8px; font-weight: 900; letter-spacing: .09em; }
.lobby-vip-card > strong { color: #f9e9c0; font: 700 15px Georgia, serif; }
.lobby-vip-card > small { color: #beaeb0; font-size: 8px; }
.lobby-vip-card button { min-height: 31px; margin-top: 4px; padding: 5px 9px; font-size: 8px; }
.lobby-daily-card { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 10px; }
.daily-gift { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: #6c1c36; color: #f1cd73; }
.lobby-daily-card > div { min-width: 0; display: grid; gap: 2px; }
.lobby-daily-card strong { color: #f1e8d0; font-size: 10px; }
.lobby-daily-card small { overflow: hidden; color: #8da195; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.lobby-daily-card button { min-height: 32px; padding: 6px 8px; font-size: 8px; }
.lobby-right-rail > .lobby-quick-button { width: 100%; min-height: 55px; padding: 8px 10px; }

/* Shared full-screen lobby layers. */
:is(#home,[data-game-role="home"]):not(.game-active) .lobby-friends-room { display: none; }
:is(#home,[data-game-role="home"]):not(.game-active) .lobby-panel.lobby-layer-open { overflow-x: hidden; overflow-y: auto; padding: clamp(18px, 2.2vw, 30px); }
.lobby-panel-heading > div > p { margin: 5px 0 0; color: #81988c; font-size: 10px; }
.lobby-panel-heading h2 { font-size: clamp(22px, 2.1vw, 31px); }
.lobby-native-selects { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.lobby-setup-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(255px, .55fr); gap: 20px; }
.lobby-option-stack { display: grid; gap: 10px; }
.lobby-option-stack fieldset { min-width: 0; border: 1px solid rgb(232 189 88 / 12%); border-radius: 14px; padding: 11px; background: rgb(0 0 0 / 12%); }
.lobby-option-stack legend { display: flex; align-items: center; gap: 9px; padding: 0 5px; }
.lobby-option-stack legend > b { color: rgb(232 189 88 / 42%); font: 700 18px Georgia, serif; }
.lobby-option-stack legend > span { display: grid; gap: 1px; color: #f1e4c4; font-size: 11px; font-weight: 900; }
.lobby-option-stack legend small { color: #7d9388; font-size: 8px; font-weight: 500; }
.lobby-choice-grid { display: grid; gap: 7px; margin-top: 7px; }
.lobby-choice-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lobby-choice-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lobby-choice-grid button { min-height: 58px; display: flex; align-items: center; justify-content: flex-start; gap: 9px; border-color: rgb(232 189 88 / 12%); padding: 8px 11px; background: rgb(255 255 255 / 2%); box-shadow: none; color: #c8d4ce; text-align: left; }
.lobby-choice-grid button > i { min-width: 31px; color: #d0b263; font: 700 15px Georgia, serif; text-align: center; }
.lobby-choice-grid button > span { display: grid; gap: 2px; }
.lobby-choice-grid button > strong { font: 700 20px Georgia, serif; }
.lobby-choice-grid button strong { color: #eee6d2; font-size: 11px; }
.lobby-choice-grid button small { color: #778d82; font-size: 8px; }
.lobby-choice-grid button.selected { border-color: #dfbd61; background: linear-gradient(135deg, rgb(114 29 51 / 45%), rgb(218 177 70 / 8%)); box-shadow: inset 0 0 0 1px rgb(255 224 135 / 9%); }
.lobby-table-preview,
.lobby-wait-info,
.lobby-room-detail,
.friends-room-settings,
.friends-room-share { border: 1px solid rgb(232 189 88 / 15%); border-radius: 18px; padding: 16px; background: rgb(0 0 0 / 18%); }
.lobby-table-preview { display: flex; flex-direction: column; }
.preview-table { position: relative; width: min(100%, 285px); aspect-ratio: 1.65; margin: 22px auto; border: 9px solid #745221; border-radius: 50%; background: radial-gradient(ellipse, #176b4b, #084431 69%, #05281e); box-shadow: 0 23px 34px rgb(0 0 0 / 46%), inset 0 0 0 2px #d5b45f, inset 0 0 40px rgb(0 0 0 / 28%); }
.preview-table > span { position: absolute; left: 50%; top: 50%; color: rgb(235 205 118 / 35%); font: 800 24px Georgia, serif; transform: translate(-50%, -50%); }
.preview-table > span span { color: #7e2940; }
.preview-table > i { position: absolute; width: 36px; height: 36px; border: 3px solid #c7a853; border-radius: 50%; background: #44202b; box-shadow: 0 5px 11px rgb(0 0 0 / 45%); }
.preview-table > i:nth-of-type(1) { left: 50%; top: -24px; transform: translateX(-50%); }
.preview-table > i:nth-of-type(2) { right: -24px; top: 50%; transform: translateY(-50%); }
.preview-table > i:nth-of-type(3) { left: 50%; bottom: -24px; transform: translateX(-50%); }
.preview-table > i:nth-of-type(4) { left: -24px; top: 50%; transform: translateY(-50%); }
.preview-table.compact { width: 205px; margin: 18px auto 25px; }
.preview-table.large { width: min(390px, 80%); margin: 35px auto; }
.preview-summary { display: grid; gap: 1px; overflow: hidden; border: 1px solid rgb(232 189 88 / 11%); border-radius: 12px; background: rgb(232 189 88 / 9%); }
.preview-summary > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; background: rgb(3 15 10 / 65%); }
.preview-summary span { color: #81988c; font-size: 8px; }
.preview-summary strong { color: #e8e4d5; font-size: 9px; text-align: right; }
.lobby-table-preview > button { min-height: 46px; margin-top: auto; }
.lobby-create-actions { align-items: center; border-top: 1px solid rgb(232 189 88 / 10%); padding-top: 11px; color: #82998d; font-size: 9px; }

/* Waiting room. */
.lobby-wait-layout { display: grid; grid-template-columns: minmax(500px, 1fr) 270px; gap: 17px; min-height: 460px; }
.lobby-wait-stage { min-width: 0; display: flex; flex-direction: column; }
.lobby-roomline { justify-content: center; }
.lobby-wait-table { position: relative; min-height: 390px; flex: 1 1 auto; margin: 4px 28px; }
.lobby-wait-table::before { content: ""; position: absolute; inset: 70px 13%; border: 12px solid #725022; border-radius: 50%; background: radial-gradient(ellipse, #146b49, #08432f 67%, #05271d); box-shadow: 0 25px 38px rgb(0 0 0 / 50%), inset 0 0 0 2px #d5b25b, inset 0 0 70px rgb(0 0 0 / 34%); }
.lobby-wait-table > .table-monogram { position: absolute; z-index: 1; left: 50%; top: 50%; color: rgb(235 203 112 / 31%); font: 800 34px Georgia, serif; transform: translate(-50%, -50%); }
.lobby-wait-table > .table-monogram span { color: #7d2840; }
.lobby-wait-table .empty-state { position: absolute; z-index: 4; left: 50%; top: 50%; margin: 0; transform: translate(-50%, -50%); }
.lobby-players { position: absolute; z-index: 3; inset: 0; display: block; }
.lobby-players .waiting-seat { position: absolute; width: 142px; min-height: 78px; display: grid; grid-template-columns: 48px minmax(0, 1fr); align-content: center; align-items: center; gap: 2px 8px; border: 1px solid rgb(233 196 100 / 22%); border-radius: 15px; padding: 8px; background: linear-gradient(145deg, rgb(22 52 39 / 98%), rgb(7 24 17 / 98%)); box-shadow: 0 12px 23px rgb(0 0 0 / 42%); }
.lobby-players .waiting-seat.seat-1 { left: 50%; bottom: 0; transform: translateX(-50%); }
.lobby-players .waiting-seat.seat-2 { left: 0; top: 50%; transform: translateY(-50%); }
.lobby-players .waiting-seat.seat-3 { left: 50%; top: 0; transform: translateX(-50%); }
.lobby-players .waiting-seat.seat-4 { right: 0; top: 50%; transform: translateY(-50%); }
.lobby-players[data-player-count="2"] .waiting-seat.seat-2 { left: 50%; top: 0; transform: translateX(-50%); }
.lobby-players[data-player-count="3"] .waiting-seat.seat-2 { left: 4%; top: 32%; transform: none; }
.lobby-players[data-player-count="3"] .waiting-seat.seat-3 { left: auto; right: 4%; top: 32%; transform: none; }
.waiting-avatar { grid-row: 1 / 3; width: 48px; height: 48px; display: grid; place-items: center; overflow: hidden; border: 2px solid #d8b75f; border-radius: 50%; background: #431c29; color: #e8ca76; font: 700 17px Georgia, serif; }
.waiting-avatar img { width: 100%; height: 100%; object-fit: cover; }
.waiting-seat > strong { overflow: hidden; color: #f0e7cf; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.waiting-seat > small { color: #80998c; font-size: 8px; }
.waiting-seat.empty { border-style: dashed; background: rgb(5 21 15 / 78%); }
.waiting-seat.empty .waiting-avatar { border-style: dashed; background: transparent; color: #869b90; font-size: 25px; }
.waiting-seat .player-block { position: absolute; right: 4px; top: 4px; width: 24px; min-height: 22px; padding: 0; font-size: 8px; }
.lobby-wait-info { display: flex; flex-direction: column; gap: 10px; }
.lobby-wait-info h3 { margin: 0; color: #f1e6c8; font: 700 18px Georgia, serif; }
.wait-note { display: grid; gap: 3px; margin-top: auto; border: 1px solid rgb(232 189 88 / 12%); border-radius: 12px; padding: 11px; background: rgb(107 29 49 / 17%); }
.wait-note strong { color: #e4c870; font-size: 10px; }
.wait-note small { color: #82978c; font-size: 8px; line-height: 1.4; }
.lobby-wait-actions { display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid rgb(232 189 88 / 11%); margin-top: 12px; padding-top: 12px; }

/* Open rooms. */
.lobby-room-filters { display: flex; align-items: center; gap: 5px; margin-bottom: 12px; overflow-x: auto; }
.lobby-room-filters span { flex: 1 1 auto; }
.lobby-room-filters button { min-width: max-content; min-height: 34px; padding: 6px 11px; border-color: rgb(232 189 88 / 12%); background: rgb(255 255 255 / 2%); color: #849b8f; font-size: 8px; box-shadow: none; }
.lobby-room-filters button.selected { border-color: #d8b75e; background: rgb(115 31 51 / 36%); color: #f0d989; }
.lobby-rooms-layout { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 14px; }
.lobby-layer-open .lobby-room-list { max-height: calc(100dvh - 260px); display: grid; grid-template-columns: 1fr; align-content: start; gap: 7px; }
.lobby-room-list .room-row { width: 100%; min-height: 70px; display: grid; grid-template-columns: 62px minmax(150px, 1fr) auto 70px 58px 18px; align-items: center; gap: 9px; border: 1px solid rgb(232 189 88 / 11%); border-radius: 13px; padding: 8px; background: rgb(2 15 10 / 43%); color: #dce4df; text-align: left; }
.lobby-room-list .room-row.selected { border-color: rgb(226 190 95 / 58%); background: linear-gradient(100deg, rgb(106 29 48 / 35%), rgb(15 47 34 / 50%)); }
.room-row-code, .room-row-copy, .room-row-rating, .room-row-free { min-width: 0; display: grid; gap: 3px; }
.room-row-code small, .room-row-rating small, .room-row-free small { color: #71887c; font-size: 7px; text-transform: uppercase; }
.room-row-code strong { color: #e7c96f; font: 700 13px Georgia, serif; }
.room-row-copy strong { color: #e7e8de; font-size: 10px; }
.room-row-copy span { overflow: hidden; color: #7f9589; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.room-row-rating strong, .room-row-free strong { color: #e4d6b7; font-size: 11px; }
.room-row-players, .room-detail-avatars { display: flex; padding-left: 8px; }
.room-row-players { min-width: 76px; flex-direction: row !important; flex-wrap: nowrap !important; }
.room-row-players i, .room-detail-avatars i { width: 30px; height: 30px; display: grid; place-items: center; overflow: hidden; border: 2px solid #bd9d4f; border-radius: 50%; margin-left: -8px; background: #40202a; color: #f0d985; font: 700 9px Georgia, serif; }
.room-row-players i img, .room-detail-avatars i img { width: 100%; height: 100%; object-fit: cover; }
.room-row-players i.empty, .room-detail-avatars i.empty { border-style: dashed; background: #09251a; color: #698276; }
.room-row-arrow { color: #d9bb65; font: 24px Georgia, serif; }
.lobby-room-detail { min-height: 420px; display: flex; flex-direction: column; align-items: stretch; }
.lobby-room-detail h3 { margin: 4px 0 7px; color: #f1e5c5; font: 700 19px Georgia, serif; text-align: center; }
.lobby-room-detail > p { color: #81988c; font-size: 9px; text-align: center; }
.lobby-room-detail .room-detail-avatars { justify-content: center; margin: 0 0 14px; }
.lobby-room-detail .preview-summary { margin-bottom: 12px; }
.lobby-room-detail > button { min-height: 43px; margin-top: auto; }

/* Friends room. */
.friends-room-tabs { display: flex; gap: 5px; border-bottom: 1px solid rgb(232 189 88 / 12%); margin-bottom: 14px; padding-bottom: 8px; }
.friends-room-tabs button { min-height: 37px; border-color: transparent; padding: 7px 13px; background: transparent; box-shadow: none; color: #82978c; font-size: 9px; }
.friends-room-tabs button.selected { border-color: rgb(232 189 88 / 24%); background: rgb(113 30 50 / 30%); color: #f0d785; }
.friends-room-pane:not(.hidden) { display: grid; }
.friends-create-pane { grid-template-columns: 260px minmax(340px, 1fr) 250px; gap: 14px; }
.friends-room-settings { display: grid; align-content: start; gap: 10px; }
.friends-room-settings label { gap: 5px; color: #8da297; font-size: 9px; }
.friends-room-settings select { min-height: 39px; }
.friends-room-settings > div:nth-of-type(1) { display: grid; gap: 2px; margin-top: 3px; color: #e9dfc5; font-size: 10px; }
.friends-room-settings > div:nth-of-type(1) small { color: #7d9488; font-size: 8px; }
.lobby-friends-list { max-height: 245px; display: grid; gap: 5px; overflow-y: auto; }
.lobby-friends-list > p, .lobby-incoming-invites > p { color: #7f968a; font-size: 9px; line-height: 1.4; }
.lobby-friends-list article, .lobby-incoming-invites article { display: grid; grid-template-columns: 33px minmax(0, 1fr) auto; align-items: center; gap: 7px; border: 1px solid rgb(232 189 88 / 10%); border-radius: 10px; padding: 6px; background: rgb(0 0 0 / 14%); }
.friend-avatar { width: 33px; height: 33px; display: grid; place-items: center; border: 1px solid #c5a44f; border-radius: 50%; background: #521e30; color: #efd27a; font: 700 10px Georgia, serif; }
.lobby-friends-list article > div, .lobby-incoming-invites article > div { min-width: 0; display: grid; gap: 2px; }
.lobby-friends-list article strong, .lobby-incoming-invites article strong { overflow: hidden; color: #e8e7dd; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.lobby-friends-list article small, .lobby-incoming-invites article small { color: #748c7f; font-size: 7px; }
.lobby-friends-list article button, .lobby-incoming-invites article button { min-height: 29px; padding: 4px 7px; font-size: 7px; }
.friends-table-stage { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgb(232 189 88 / 9%); border-radius: 18px; background: radial-gradient(circle, rgb(22 74 52 / 25%), transparent 63%); }
.friends-table-stage h3 { margin: 5px 0; color: #f1e5c3; font: 700 18px Georgia, serif; }
.friends-table-stage p { margin: 0 20px 20px; color: #7f968a; font-size: 9px; text-align: center; }
.friends-room-share { display: flex; flex-direction: column; gap: 7px; }
.friends-room-share h3 { margin: 8px 0 0; color: #f0e4c3; font: 700 19px Georgia, serif; }
.friends-room-share p { color: #81988c; font-size: 9px; line-height: 1.5; }
.friends-room-share button { min-height: 45px; margin-top: auto; }
.friends-join-pane { min-height: 330px; grid-template-columns: minmax(300px, .7fr) minmax(300px, 1.3fr); align-items: start; gap: 20px; padding: 30px; }
.friends-join-pane h3 { color: #f2e6c7; font: 700 22px Georgia, serif; }
.friends-join-pane p { color: #81988c; font-size: 10px; }
.lobby-incoming-invites { display: grid; gap: 6px; }
.lobby-incoming-invites article { grid-template-columns: minmax(0, 1fr) auto; }

@media (max-width: 1180px) {
  :is(#home,[data-game-role="home"]):not(.game-active) .lobby-dashboard { grid-template-columns: 185px minmax(470px, 1fr) 225px !important; gap: 8px; }
  .lobby-command-center { padding: 17px; }
  .lobby-action-card { min-height: 175px; grid-template-columns: minmax(0, 1fr) 96px; padding: 15px; }
  .lobby-action-card h3 { font-size: 19px; }
  .lobby-action-art { transform: scale(.82); transform-origin: right center; }
  .lobby-friends-banner { grid-template-columns: 82px minmax(0, 1fr); }
  .lobby-friends-banner > b { display: none; }
  .lobby-summary-card { padding: 10px; }
  .lobby-rating-orbit { width: 112px; height: 112px; }
  .friends-create-pane { grid-template-columns: 235px minmax(300px, 1fr) 220px; }
}

@media (max-width: 900px) {
  :is(#home,[data-game-role="home"]):not(.game-active) .lobby-dashboard { height: auto; grid-template-columns: 180px minmax(0, 1fr) !important; grid-template-rows: auto auto; }
  :is(#home,[data-game-role="home"]):not(.game-active) .lobby-side-rail { grid-column: 1; grid-row: 1 / 3; height: auto; min-height: 680px; }
  :is(#home,[data-game-role="home"]):not(.game-active) .lobby-command-center { grid-column: 2; grid-row: 1; height: auto; min-height: 540px; }
  :is(#home,[data-game-role="home"]):not(.game-active) .lobby-right-rail { grid-column: 2; grid-row: 2; height: auto; display: grid; grid-template-columns: 1.25fr 1fr; }
  .lobby-summary-card { grid-row: 1 / 4; }
  .lobby-setup-layout, .lobby-wait-layout, .lobby-rooms-layout { grid-template-columns: 1fr; }
  .lobby-table-preview { min-height: 390px; }
  .lobby-wait-info, .lobby-room-detail { min-height: 0; }
  .friends-create-pane { grid-template-columns: 230px minmax(300px, 1fr); }
  .friends-room-share { grid-column: 1 / -1; min-height: 150px; }
}

@media (max-width: 720px) {
  :is(#home,[data-game-role="home"]):not(.game-active) .lobby-dashboard { display: flex; flex-direction: column; gap: 8px; }
  :is(#home,[data-game-role="home"]):not(.game-active) .lobby-side-rail { min-height: 0; order: 2; }
  :is(#home,[data-game-role="home"]):not(.game-active) .lobby-command-center { min-height: 0; order: 1; padding: 14px; }
  :is(#home,[data-game-role="home"]):not(.game-active) .lobby-right-rail { order: 3; display: grid; grid-template-columns: 1fr; }
  .lobby-side-rail .lobby-progress-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lobby-tournament-promo { margin-top: 7px; }
  .lobby-primary-actions { grid-template-columns: 1fr; }
  .lobby-action-card { min-height: 170px; }
  .lobby-friends-banner { grid-template-columns: 78px minmax(0, 1fr); }
  .lobby-recent-matches { max-height: 260px; }
  .lobby-summary-card { grid-row: auto; }
  :is(#home,[data-game-role="home"]):not(.game-active) .lobby-panel.lobby-layer-open { position: fixed; inset: 7px; z-index: 760; max-height: calc(100dvh - 14px); border-radius: 18px; padding: 14px; }
  :is(#home,[data-game-role="home"]).lobby-layer-active::before { position: fixed; z-index: 750; }
  .lobby-choice-grid.two, .lobby-choice-grid.three { grid-template-columns: 1fr; }
  .lobby-table-preview { min-height: 330px; }
  .lobby-create-actions { grid-template-columns: 1fr; }
  .lobby-wait-layout { min-height: 580px; }
  .lobby-wait-table { min-height: 430px; margin: 0; transform: scale(.86); }
  .lobby-room-list .room-row { grid-template-columns: 50px minmax(110px, 1fr) auto 18px; }
  .room-row-rating, .room-row-free { display: none; }
  .lobby-layer-open .lobby-room-list { max-height: none; }
  .friends-create-pane, .friends-join-pane { grid-template-columns: 1fr; padding: 0; }
  .friends-table-stage { min-height: 330px; }
  .friends-room-share { grid-column: 1; }
}

@media (max-width: 430px) {
  .lobby-welcome { align-items: flex-start; flex-direction: column; }
  .lobby-welcome h2 { font-size: 23px; }
  .lobby-action-card { grid-template-columns: minmax(0, 1fr) 82px; padding: 13px; }
  .lobby-action-card p { max-width: 190px; }
  .lobby-friends-banner { grid-template-columns: 1fr; }
  .friends-stack { display: none; }
  .lobby-match-row { grid-template-columns: 29px minmax(0, 1fr) 36px; }
  .lobby-match-row > b { display: none; }
  .lobby-side-rail .lobby-progress-list { grid-template-columns: 1fr; }
  .lobby-wait-table { margin: -30px; transform: scale(.72); }
  .lobby-wait-actions { display: grid; }
  .lobby-wait-actions button { width: 100%; }
  .lobby-room-list .room-row { grid-template-columns: 50px minmax(0, 1fr) 18px; }
  .room-row-players { display: none; }
  .lobby-room-filters span { display: none; }
}

/* Administration shell v2: canonical blue-purple system from screens 88-138. */
body.admin-view-active {
  --admin-bg: #030914;
  --admin-panel: #071321;
  --admin-panel-strong: #091827;
  --admin-border: rgb(77 142 194 / 22%);
  --admin-border-hot: rgb(221 42 177 / 52%);
  --admin-text: #e7eef8;
  --admin-muted: #8494a8;
  --admin-blue: #23b7f2;
  --admin-magenta: #df2eb5;
  background:
    radial-gradient(circle at 74% 7%, rgb(45 35 116 / 23%), transparent 32%),
    linear-gradient(145deg, #030914, #02070e 66%, #06111c);
}

body.admin-view-active .app {
  width: 100%;
  max-width: none;
  min-height: 100dvh;
  padding: 10px;
}

body.admin-view-active .topbar {
  height: 54px;
  min-height: 54px;
  flex: 0 0 54px;
  align-items: center;
  border: 1px solid var(--admin-border);
  border-radius: 12px;
  padding: 7px 12px;
  background: linear-gradient(180deg, rgb(7 19 32 / 97%), rgb(3 11 19 / 97%));
  box-shadow: 0 14px 34px rgb(0 0 0 / 34%), inset 0 1px rgb(255 255 255 / 3%);
}

body.admin-view-active .topbar .brand-lockup {
  min-width: 0;
  height: 46px;
  min-height: 0;
  align-self: center;
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

body.admin-view-active .topbar .brand-emblem {
  width: 46px;
  height: 46px;
  flex-basis: 46px;
  margin: 0;
}

body.admin-view-active .topbar .brand-copy {
  gap: 1px;
  padding: 0;
}

body.admin-view-active .topbar .brand-copy strong {
  font-size: 22px;
  letter-spacing: -.04em;
}

body.admin-view-active .topbar .brand-copy small {
  max-width: 230px;
  margin: 0;
  color: #718399;
  font-size: 8px;
  letter-spacing: .02em;
}

body.admin-view-active .topbar .main-menu-toggle,
body.admin-view-active .topbar .profile-trigger {
  min-height: 38px;
}

body.admin-view-active .topbar .profile-trigger.polished-button {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
}

body.admin-view-active .topbar .profile-trigger-frame {
  width: 42px !important;
  height: 42px !important;
  flex-basis: 42px !important;
}

body.admin-view-active .topbar .profile-trigger > small {
  display: none !important;
}

.admin-view.app-panel-view:not(.hidden) {
  grid-template-columns: clamp(168px, 15vw, 224px) minmax(0, 1fr);
  gap: 10px;
  color: var(--admin-text);
}

.admin-view .app-view-rail,
.admin-view .app-view-stage {
  border-color: var(--admin-border);
  border-radius: 12px;
  background:
    linear-gradient(160deg, rgb(9 24 39 / 98%), rgb(3 12 21 / 99%));
  box-shadow: 0 20px 54px rgb(0 0 0 / 32%), inset 0 1px rgb(255 255 255 / 3%);
}

.admin-view .app-view-rail {
  padding: 10px 8px;
}

.admin-view .app-view-rail-heading {
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 9px;
  align-items: center;
  border-bottom: 1px solid var(--admin-border);
  margin-bottom: 3px;
  padding: 3px 5px 12px;
}

.admin-view .app-view-rail-heading > i {
  grid-row: 1 / 3;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(224 45 180 / 49%);
  border-radius: 10px;
  background: radial-gradient(circle, rgb(211 42 172 / 22%), rgb(27 12 42 / 66%));
  box-shadow: 0 0 20px rgb(218 42 176 / 15%);
  color: #ff5fd4;
  font: normal 22px/1 Georgia, serif;
}

.admin-view .app-view-rail-heading > span {
  align-self: end;
  color: #71849a;
  font-size: 7px;
  letter-spacing: .09em;
}

.admin-view .app-view-rail-heading > strong {
  align-self: start;
  color: #f0f5fb;
  font: 800 15px/1.1 "Segoe UI", sans-serif;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.admin-view .app-view-home {
  order: 3;
  margin-top: auto;
  border-color: rgb(227 46 78 / 38%);
  background: linear-gradient(180deg, rgb(71 10 26 / 53%), rgb(28 7 15 / 78%));
  color: #ff667e;
  text-align: center;
}

.admin-view .app-view-rail nav {
  gap: 4px;
  overflow-y: auto;
  padding: 2px 0;
}

.admin-view .app-view-rail nav button {
  min-height: 45px;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 7px;
  border-radius: 8px;
  padding: 7px 8px;
  color: #b7c2d0;
}

.admin-view .app-view-rail nav button > span {
  color: #6f849a;
  font: 800 17px/1 "Segoe UI Symbol", "Segoe UI", sans-serif;
  text-align: center;
}

.admin-view .app-view-rail nav button > strong {
  font-size: 10px;
  line-height: 1.2;
  white-space: normal;
}

.admin-view .app-view-rail nav button:hover {
  border-color: rgb(62 136 190 / 22%);
  background: rgb(21 65 96 / 19%);
  color: #eef5fc;
}

.admin-view .app-view-rail nav button.selected {
  border-color: var(--admin-border-hot);
  background:
    linear-gradient(90deg, rgb(190 27 151 / 27%), rgb(45 31 95 / 30%)),
    #091421;
  box-shadow: inset 3px 0 #df2eb5, 0 0 20px rgb(218 41 175 / 10%);
  color: #fff;
}

.admin-view .app-view-rail nav button.selected > span {
  color: #f84fd0;
}

.admin-view .app-view-stage-admin {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  padding: 8px;
}

.admin-view .app-view-persistent {
  min-width: 0;
}

.admin-view .admin-hero-panel {
  min-height: 82px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 18px;
  overflow: hidden;
  border: 1px solid var(--admin-border);
  border-radius: 9px;
  margin: 0;
  padding: 14px 17px;
  background:
    radial-gradient(circle at 70% 0, rgb(39 67 138 / 18%), transparent 39%),
    linear-gradient(105deg, rgb(8 24 39 / 98%), rgb(4 14 24 / 98%));
  box-shadow: none;
}

.admin-view .admin-hero-panel::after {
  content: "";
}

.admin-view .admin-hero-panel .eyebrow {
  color: #b53ca3;
  font-size: 8px;
  letter-spacing: .08em;
}

.admin-view .admin-hero-panel h2 {
  margin: 3px 0 4px;
  color: #f4f7fb;
  font: 700 24px/1.05 "Segoe UI", sans-serif;
}

.admin-view .admin-hero-panel p {
  color: var(--admin-muted);
  font-size: 10px;
}

.admin-view .admin-hero-status {
  border-left-color: rgb(57 139 197 / 25%);
}

.admin-view .admin-hero-status span,
.admin-view .admin-hero-status small {
  color: #708398;
}

.admin-view .admin-hero-status strong {
  color: #65c9f2;
}

.admin-view #refreshAdminBtn {
  border: 1px solid rgb(219 43 177 / 44%);
  background: linear-gradient(180deg, rgb(68 15 71 / 76%), rgb(22 10 38 / 90%));
  color: #f7a5e2;
}

.admin-view .app-view-page {
  grid-row: 2;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 3px;
  scrollbar-color: #27516c #07111c;
}

.admin-view .app-view-page.panel-page-active {
  align-content: start;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}

.admin-view .app-view-page > *,
.admin-view .app-view-page > .split > .box {
  height: auto;
  overflow: visible;
}

.admin-view .app-view-page > .box,
.admin-view .app-view-page > .split > .box,
.admin-view .app-view-page > .split {
  border-color: var(--admin-border);
  border-radius: 9px;
  background:
    radial-gradient(circle at 100% 0, rgb(31 69 115 / 9%), transparent 37%),
    linear-gradient(145deg, rgb(8 23 37 / 98%), rgb(4 14 24 / 98%));
  box-shadow: inset 0 1px rgb(255 255 255 / 2%);
}

.admin-view .app-view-page .box h2,
.admin-view .app-view-page .box h3 {
  color: #e8eef6;
  font-family: "Segoe UI", sans-serif;
}

.admin-view .app-view-page .box h2 {
  border-bottom: 1px solid rgb(64 123 166 / 17%);
  padding-bottom: 9px;
}

.admin-view input,
.admin-view select,
.admin-view textarea {
  border-color: rgb(72 126 165 / 27%);
  border-radius: 7px;
  background: #040d17;
  color: #e8f0f8;
}

.admin-view input:focus,
.admin-view select:focus,
.admin-view textarea:focus {
  border-color: #b62b9a;
  outline: 2px solid rgb(218 42 176 / 12%);
}

.admin-view label,
.admin-view .muted,
.admin-view p {
  color: #8c9bae;
}

.admin-view button:not(.danger):not(.app-view-home) {
  border: 1px solid rgb(39 155 211 / 31%);
  background: linear-gradient(180deg, rgb(11 64 93 / 88%), rgb(5 31 49 / 95%));
  color: #d9f3ff;
  box-shadow: inset 0 1px rgb(255 255 255 / 5%);
}

.admin-view button:not(.danger):not(.app-view-home):hover {
  border-color: rgb(61 190 239 / 55%);
  filter: brightness(1.08);
}

.admin-view button.danger {
  border: 1px solid rgb(232 56 83 / 42%);
  background: linear-gradient(180deg, rgb(91 15 31 / 72%), rgb(37 8 17 / 94%));
  color: #ff9baa;
}

.admin-view .card,
.admin-view .mini-card,
.admin-view .tournament-row,
.admin-view .tournament-detail,
.admin-view .kv > div {
  border-color: rgb(71 124 162 / 20%);
  background: rgb(4 15 25 / 72%);
}

@media (max-width: 980px) {
  .admin-view.app-panel-view:not(.hidden) {
    grid-template-columns: 154px minmax(0, 1fr);
  }
  .admin-view .app-view-rail nav button {
    grid-template-columns: 24px minmax(0, 1fr);
    padding-inline: 5px;
  }
  .admin-view .admin-hero-panel {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .admin-view .admin-hero-status {
    display: none;
  }
  .admin-view .app-view-page.panel-page-active {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-height: 600px) and (orientation: landscape) {
  body.admin-view-active .app { padding: 6px; }
  body.admin-view-active .topbar {
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    flex-basis: 44px;
    padding: 3px 8px;
  }
  body.admin-view-active .topbar .brand-emblem {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }
  body.admin-view-active .topbar .brand-copy strong { font-size: 17px; }
  body.admin-view-active .topbar .brand-copy small { display: none; }
  body.admin-view-active .topbar .main-menu-toggle,
  body.admin-view-active .topbar .profile-trigger { min-height: 34px; height: 34px; }
  body.admin-view-active .topbar .profile-trigger.polished-button {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
  }
  body.admin-view-active .topbar .profile-trigger-frame {
    width: 32px !important;
    height: 32px !important;
    flex-basis: 32px !important;
  }
  .admin-view.app-panel-view:not(.hidden) {
    grid-template-columns: 142px minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 6px;
  }
  .admin-view .app-view-rail {
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
    padding: 6px;
  }
  .admin-view .app-view-rail-heading {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    padding: 2px 3px 7px;
  }
  .admin-view .app-view-rail-heading > i { width: 27px; height: 27px; font-size: 16px; }
  .admin-view .app-view-rail-heading > span { display: none; }
  .admin-view .app-view-rail-heading > strong { align-self: center; font-size: 11px; }
  .admin-view .app-view-rail nav {
    display: grid;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .admin-view .app-view-rail nav button {
    min-width: 0;
    min-height: 32px;
    grid-template-columns: 20px minmax(0, 1fr);
    padding: 3px 5px;
  }
  .admin-view .app-view-rail nav button > span { font-size: 13px; }
  .admin-view .app-view-rail nav button > strong { font-size: 8px; }
  .admin-view .app-view-home { min-height: 29px; margin-top: 3px; font-size: 8px; }
  .admin-view .app-view-stage-admin { padding: 5px; }
  .admin-view .admin-hero-panel {
    min-height: 58px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 8px 10px;
  }
  .admin-view .admin-hero-panel h2 { font-size: 18px; }
  .admin-view .admin-hero-panel p { display: none; }
  .admin-view #refreshAdminBtn { min-height: 34px; padding: 5px 8px; font-size: 9px; }
  .admin-view .app-view-page > .box,
  .admin-view .app-view-page > .split > .box { padding: 8px; }
}

@media (min-width: 721px) {
  .topbar .main-menu-toggle { display: inline-flex !important; }
  .topbar .main-menu-panel {
    position: absolute !important;
    z-index: 730;
    top: calc(100% + 9px) !important;
    right: 104px !important;
    width: min(310px, calc(100vw - 24px)) !important;
    display: none !important;
    grid-template-columns: 1fr !important;
    gap: 5px;
    border: 1px solid rgb(232 189 88 / 32%);
    border-radius: 17px;
    padding: 9px !important;
    background: linear-gradient(155deg, rgb(17 39 30 / 99%), rgb(5 17 12 / 99%));
    box-shadow: 0 22px 56px rgb(0 0 0 / 58%);
  }
  .topbar .main-menu-panel.open { display: grid !important; }
  .topbar .main-menu-panel > button { width: 100%; justify-content: flex-start; text-align: left; }
}

/* Profile workspace: screens 6–11. */
.profile-view.app-panel-view:not(.hidden) {
  grid-template-columns: 205px minmax(0, 1fr) !important;
  grid-template-rows: 62px minmax(0, 1fr) !important;
  gap: 9px;
}
.profile-section-rail {
  grid-column: 1;
  grid-row: 1 / 3;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  overflow: hidden;
  border: 1px solid rgb(232 189 88 / 18%);
  border-radius: 21px;
  padding: 12px;
  background: linear-gradient(155deg, rgb(15 36 27 / 98%), rgb(5 17 12 / 98%));
  box-shadow: 0 20px 50px rgb(0 0 0 / 27%);
}
.profile-section-rail button {
  width: 100%;
  min-height: 64px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 1px solid transparent;
  padding: 9px;
  background: transparent;
  box-shadow: none;
  color: #a8bbb1;
  text-align: left;
}
.profile-section-rail button > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: #e1bd5c; font: 700 18px Georgia, serif; }
.profile-section-rail button > strong { font-size: 11px; }
.profile-section-rail button.selected { border-color: #d2ae4f; background: linear-gradient(135deg, #1d6a34, #0c411f); color: #fff3d2; }
.profile-section-rail button:last-child { margin-top: auto; }
.profile-view > .app-view-rail {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  flex-direction: row;
  align-items: stretch;
  padding: 6px;
}
.profile-view > .app-view-rail .app-view-rail-heading,
.profile-view > .app-view-rail .app-view-home { display: none; }
.profile-view > .app-view-rail nav { width: 100%; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; }
.profile-view > .app-view-rail nav button {
  min-height: 48px;
  display: flex;
  grid-template-columns: none;
  justify-content: center;
  gap: 7px;
  border-radius: 10px;
  padding: 7px;
  text-align: center;
}
.profile-view > .app-view-rail nav button > span { display: none; }
.profile-view > .app-view-rail nav button > strong { font-size: 10px; }
.profile-view > .app-view-rail nav button.selected { border-color: rgb(208 173 75 / 45%); background: linear-gradient(180deg, #1f6e35, #0c451f); color: #fff2c8; }
.profile-view > .app-view-stage { grid-column: 2; grid-row: 2; border-radius: 21px; padding: 10px; }
.profile-view .app-view-page { min-width: 0; }
.profile-view .profile-page-shell { gap: 10px; }
.profile-view .profile-hero-panel {
  min-height: 205px;
  grid-template-columns: 135px minmax(180px, 1fr) minmax(365px, 1.2fr) 145px !important;
  gap: 17px !important;
  border: 1px solid rgb(232 189 88 / 22%);
  border-radius: 18px;
  padding: 20px !important;
  background: radial-gradient(circle at 12% 45%, rgb(29 115 75 / 24%), transparent 24%), linear-gradient(145deg, #11251e, #081711);
}
.profile-view .profile-hero-panel > .profile-avatar-frame { width: 130px !important; height: 130px !important; flex-basis: 130px !important; }
.profile-view .profile-title-row h2 { font-size: clamp(25px, 2.5vw, 37px); }
.profile-view .profile-hero-copy p { font-size: 10px; }
.profile-view .profile-hero-metrics { grid-template-columns: repeat(3, minmax(78px, 1fr)); }
.profile-view .profile-hero-metrics,
.profile-view .profile-hero-actions { grid-column: auto !important; }
.profile-view .profile-hero-metrics > div { min-height: 67px; }
.profile-view .profile-hero-metrics > div:nth-child(n+4) { display: none; }
.profile-view .profile-hero-actions { min-width: 0; }
.profile-view .profile-hero-actions button { min-height: 39px; font-size: 9px; }
.profile-overview-grid { display: grid; grid-template-columns: minmax(280px, .78fr) minmax(430px, 1.22fr); gap: 10px; }
.profile-overview-grid > .box { margin: 0; }
.profile-overview-footer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border-radius: 17px; padding: 0 !important; background: rgb(232 189 88 / 12%) !important; }
.profile-overview-footer > div { min-height: 92px; display: flex; align-items: center; gap: 16px; padding: 17px 25px; background: rgb(7 23 16 / 96%); }
.profile-overview-footer > div > span:last-child { display: grid; gap: 5px; }
.profile-overview-footer small { color: #81998c; font-size: 9px; text-transform: uppercase; }
.profile-overview-footer strong { color: #d9e6df; font-size: 13px; }
.profile-overview-icon { color: #e6c35f; font: 700 32px Georgia, serif; }

.profile-stat-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; border: 1px solid rgb(232 189 88 / 14%); border-radius: 15px; padding: 12px; background: rgb(0 0 0 / 12%); }
.profile-stat-filters > div { display: grid; grid-template-columns: auto repeat(3, minmax(85px, 1fr)); align-items: center; gap: 6px; }
.profile-stat-filters > div:last-child { grid-template-columns: auto repeat(2, minmax(100px, 1fr)); }
.profile-stat-filters span { color: #d5c8a9; font-size: 9px; font-weight: 800; }
.profile-stat-filters button { min-height: 38px; border-color: rgb(232 189 88 / 12%); padding: 7px 10px; background: transparent; box-shadow: none; color: #859b90; font-size: 8px; }
.profile-stat-filters button.selected { border-color: #cbaa4e; background: linear-gradient(180deg, #216f34, #0f451e); color: #fff0c5; }
.profile-view .profile-stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.profile-view .profile-stat-card { min-height: 118px; text-align: center; }
.profile-view .profile-stat-card > strong { font-size: 30px; }
.profile-metric-divider { display: flex; align-items: center; justify-content: center; gap: 12px; color: #e0bc5b; font: 700 13px Georgia, serif; }
.profile-metric-divider::before, .profile-metric-divider::after { content: ""; width: min(130px, 18%); height: 1px; background: linear-gradient(90deg, transparent, #a37a2e); }
.profile-metric-divider::after { transform: scaleX(-1); }
.profile-view .profile-stat-details-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.profile-view .profile-stat-details-grid .profile-stat-card { min-height: 126px; padding: 11px; }

.profile-history-filters { display: flex; gap: 6px; }
.profile-history-filters button { min-height: 37px; font-size: 8px; }
.profile-history-list { display: grid; gap: 7px; }
.profile-history-list > p { color: #80968a; }
.profile-history-row { min-height: 88px; display: grid; grid-template-columns: 52px minmax(190px, 1.3fr) minmax(100px, .55fr) 80px minmax(105px, .6fr) 110px; align-items: center; gap: 13px; border: 1px solid rgb(232 189 88 / 16%); border-radius: 15px; padding: 10px 13px; background: linear-gradient(100deg, rgb(20 49 36 / 63%), rgb(4 19 13 / 70%)); }
.profile-history-row.win { border-color: rgb(157 202 56 / 30%); }
.profile-history-emblem { width: 50px; height: 50px; display: grid; place-items: center; border: 1px solid #b58e35; border-radius: 50%; background: #183f28; color: #efc95f; font: 700 23px Georgia, serif; }
.profile-history-copy, .profile-history-result, .profile-history-rating, .profile-history-time { min-width: 0; display: grid; gap: 4px; }
.profile-history-copy strong { color: #edf1eb; font-size: 13px; }
.profile-history-row small { color: #81978b; font-size: 8px; }
.profile-history-result, .profile-history-rating, .profile-history-time { border-left: 1px solid rgb(232 189 88 / 14%); padding-left: 13px; }
.profile-history-result strong { color: #e9d7a7; font-size: 12px; text-transform: uppercase; }
.profile-history-rating strong { font-size: 18px; }
.profile-history-rating .positive { color: #8ad642; }
.profile-history-rating .negative { color: #e7757e; }
.profile-history-time strong { color: #d5dfd9; font-size: 10px; }
.profile-history-row > button { min-height: 39px; padding: 7px 9px; font-size: 8px; }

.profile-awards-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid rgb(232 189 88 / 14%); border-radius: 15px; background: rgb(232 189 88 / 11%); }
.profile-awards-summary > div { min-height: 72px; display: grid; grid-template-columns: 45px auto; grid-template-rows: auto auto; align-content: center; justify-content: center; column-gap: 11px; padding: 10px; background: rgb(5 20 14 / 95%); }
.profile-awards-summary span { grid-row: 1 / 3; color: #e6bc45; font-size: 34px; }
.profile-awards-summary strong { color: #f0ddab; font: 700 22px Georgia, serif; }
.profile-awards-summary small { color: #879b90; font-size: 8px; }
.profile-awards-page section > h3 { margin: 3px 0 8px; color: #e5bc56; font: 700 14px Georgia, serif; text-transform: uppercase; }
.profile-ranks-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; }
.profile-rank-card { min-width: 0; display: grid; justify-items: center; gap: 5px; border-bottom: 1px solid rgb(232 189 88 / 16%); padding: 9px 5px; text-align: center; }
.profile-rank-card > span { width: 62px; height: 62px; display: grid; place-items: center; border: 3px solid #9e7028; border-radius: 50%; background: radial-gradient(circle, #4d1e29, #14231d); color: #edc65f; font: 700 25px Georgia, serif; box-shadow: 0 8px 17px rgb(0 0 0 / 32%); }
.profile-rank-card.locked { filter: grayscale(.85); opacity: .56; }
.profile-rank-card strong { overflow: hidden; color: #e4e7df; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.profile-rank-card small { color: #b8a175; font-size: 8px; }
.profile-rank-card > i { width: 80%; height: 5px; overflow: hidden; border-radius: 99px; background: #2b301e; }
.profile-rank-card > i b { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #6c9e1c, #c9db28); }
.profile-achievement-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.profile-achievement-card { min-height: 142px; display: grid; justify-items: center; align-content: center; gap: 5px; border: 1px solid rgb(232 189 88 / 16%); border-radius: 15px; padding: 12px; background: rgb(0 0 0 / 14%); text-align: center; }
.profile-achievement-card > span { width: 52px; height: 52px; display: grid; place-items: center; border: 2px solid #b68931; border-radius: 50%; background: #18251f; color: #e6bc56; font-size: 22px; }
.profile-achievement-card > span img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.profile-achievement-card > strong { color: #e8e8df; font-size: 10px; }
.profile-achievement-card > small { color: #82968b; font-size: 8px; line-height: 1.4; }
.profile-achievement-card > b { color: #8acb37; font-size: 8px; }
.profile-achievement-card.locked { opacity: .65; }

.profile-collection-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.profile-collection-card { min-width: 0; display: flex; flex-direction: column; border: 1px solid rgb(232 189 88 / 16%); border-radius: 15px; padding: 12px; background: linear-gradient(145deg, rgb(17 42 31 / 78%), rgb(4 17 12 / 82%)); }
.profile-collection-card > header { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 6px; }
.profile-collection-card > header span { color: #e3bd55; font-size: 18px; }
.profile-collection-card > header strong { color: #e4e8e1; font-size: 10px; text-transform: uppercase; }
.profile-collection-card > header small { color: #9dca3e; font-size: 9px; }
.profile-collection-card > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 13px 0; }
.profile-collection-card > div i { aspect-ratio: 1; display: grid; place-items: center; border: 1px solid #8c692c; border-radius: 12px; background: radial-gradient(circle, #28533d, #0b251a); color: #edc960; font: 700 20px Georgia, serif; }
.profile-collection-card > div i.locked { filter: grayscale(1); opacity: .4; }
.profile-collection-card > button { width: 100%; min-height: 35px; margin-top: auto; font-size: 8px; }
.profile-collection-active { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid rgb(232 189 88 / 14%); border-radius: 15px; background: rgb(232 189 88 / 10%); }
.profile-collection-active > div { min-width: 0; min-height: 84px; display: flex; align-items: center; gap: 11px; padding: 11px; background: rgb(4 18 12 / 94%); }
.profile-collection-active > div > span:last-child { min-width: 0; display: grid; gap: 2px; }
.profile-collection-active small { color: #859a8f; font-size: 7px; text-transform: uppercase; }
.profile-collection-active strong { overflow: hidden; color: #a8d53c; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.profile-collection-active em { color: #9baaa2; font-size: 8px; font-style: normal; }
.collection-active-icon { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; border: 2px solid #b68a31; border-radius: 50%; background: #173624; color: #efc75f; font-size: 21px; }

@media (max-width: 1100px) {
  .profile-view.app-panel-view:not(.hidden) { grid-template-columns: 170px minmax(0, 1fr) !important; }
  .profile-section-rail { padding: 8px; }
  .profile-section-rail button { min-height: 52px; grid-template-columns: 29px minmax(0, 1fr); padding: 6px; }
  .profile-section-rail button > span { width: 28px; height: 28px; }
  .profile-view .profile-hero-panel { grid-template-columns: 105px minmax(150px, 1fr) minmax(260px, 1.1fr) !important; }
  .profile-view .profile-hero-panel > .profile-avatar-frame { width: 100px !important; height: 100px !important; flex-basis: 100px !important; }
  .profile-view .profile-hero-actions { grid-column: 1 / -1 !important; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .profile-view .profile-stat-details-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .profile-ranks-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .profile-collection-grid, .profile-collection-active { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .profile-view.app-panel-view:not(.hidden) { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto auto minmax(0, 1fr) !important; gap: 6px; }
  .profile-section-rail { grid-column: 1; grid-row: 1; flex-direction: row; overflow-x: auto; overflow-y: hidden; border-radius: 14px; padding: 6px; }
  .profile-section-rail button { min-width: 94px; min-height: 42px; grid-template-columns: 22px minmax(0, 1fr); margin: 0 !important; }
  .profile-section-rail button > span { width: 21px; height: 21px; font-size: 13px; }
  .profile-section-rail button > strong { font-size: 8px; }
  .profile-view > .app-view-rail { grid-column: 1; grid-row: 2; min-height: 48px; border-radius: 14px; overflow-x: auto; }
  .profile-view > .app-view-rail nav { min-width: 590px; }
  .profile-view > .app-view-stage { grid-column: 1; grid-row: 3; border-radius: 14px; padding: 6px; }
  .profile-view .profile-hero-panel { grid-template-columns: 82px minmax(0, 1fr) !important; padding: 13px !important; }
  .profile-view .profile-hero-panel > .profile-avatar-frame { width: 78px !important; height: 78px !important; flex-basis: 78px !important; }
  .profile-view .profile-hero-metrics, .profile-view .profile-hero-actions { grid-column: 1 / -1 !important; }
  .profile-view .profile-hero-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .profile-overview-grid, .profile-stat-filters { grid-template-columns: 1fr; }
  .profile-overview-footer { grid-template-columns: 1fr; }
  .profile-view .profile-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-history-row { grid-template-columns: 45px minmax(0, 1fr) 70px; gap: 8px; }
  .profile-history-result { border-left: 0; padding-left: 0; text-align: right; }
  .profile-history-rating, .profile-history-time, .profile-history-row > button { display: none; }
  .profile-ranks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-achievement-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-collection-grid, .profile-collection-active { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .profile-view .profile-hero-actions { grid-template-columns: 1fr; }
  .profile-stat-filters > div, .profile-stat-filters > div:last-child { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-stat-filters span { grid-column: 1 / -1; }
  .profile-view .profile-stat-grid, .profile-view .profile-stat-details-grid { grid-template-columns: 1fr 1fr; }
  .profile-awards-summary { grid-template-columns: 1fr; }
  .profile-ranks-grid, .profile-achievement-grid { grid-template-columns: 1fr 1fr; }
}

/* Club workspace: shared shell and member-management screens. */
.club-workspace .club-hub {
  background: radial-gradient(circle at 100% 0, rgb(225 185 80 / 10%), transparent 29%), linear-gradient(145deg, rgb(15 37 27 / 98%), rgb(6 22 14 / 98%));
}
.club-workspace .club-heading { align-items: flex-start; }
.club-workspace .club-heading h2 { margin: 2px 0 0; color: #f4dfaa; font: 700 clamp(24px, 2.5vw, 34px)/1.05 Georgia, serif; }
.club-workspace .club-heading p { max-width: 680px; margin-top: 6px; color: #91a59a; }
.club-workspace .club-navigation { display: flex; gap: 7px; overflow-x: auto; border-bottom: 1px solid rgb(232 189 88 / 15%); margin: 14px 0 11px; scrollbar-width: thin; }
.club-workspace .club-navigation.hidden { display: none !important; }
.club-workspace .club-navigation button { flex: 0 0 auto; min-height: 41px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 8px 14px; background: transparent; box-shadow: none; color: #8fa399; font-size: 11px; }
.club-workspace .club-navigation button.active { border-bottom-color: #e2bd5d; background: linear-gradient(0deg, rgb(226 189 93 / 11%), transparent); color: #f5dfaa; }
.club-workspace .club-content { min-height: 0; }
.club-workspace .club-profile-hero { min-height: 154px; grid-template-columns: 92px minmax(0, 1fr); border-color: rgb(232 189 88 / 22%); border-radius: 14px; padding: 18px; background: radial-gradient(circle at 10% 50%, rgb(224 184 82 / 18%), transparent 25%), linear-gradient(115deg, rgb(27 60 42 / 94%), rgb(8 27 17 / 97%)); }
.club-workspace .club-profile-emblem { width: 78px; height: 78px; border: 1px solid rgb(231 194 92 / 45%); border-radius: 24px; background: rgb(221 180 76 / 9%); color: #e9c45f; font-size: 43px; box-shadow: 0 14px 34px rgb(0 0 0 / 26%); }
.club-workspace .club-profile-hero h3 { margin: 8px 0 4px; color: #f3dfaa; font: 700 clamp(22px, 2.4vw, 31px)/1.05 Georgia, serif; }
.club-workspace .club-profile-hero h3 small { display: inline-flex; border: 1px solid rgb(226 189 93 / 28%); border-radius: 999px; padding: 3px 7px; color: #d7b456; font: 800 9px/1.2 Inter, Segoe UI, sans-serif; vertical-align: middle; }
.club-workspace .club-profile-hero p { color: #9db0a6; }
.club-overview-layout { display: grid; grid-template-columns: minmax(0, 1fr) 275px; gap: 10px; align-items: start; }
.club-overview-layout > main { min-width: 0; display: grid; gap: 10px; }
.club-overview-sidebar { display: grid; gap: 10px; }
.club-workspace .club-metrics { gap: 7px; margin: 0; }
.club-workspace .club-metrics article { border-color: rgb(232 189 88 / 14%); border-radius: 10px; background: rgb(4 18 11 / 65%); padding: 11px; }
.club-workspace .club-metrics small { color: #71867b; font-size: 8px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.club-workspace .club-metrics strong { margin-top: 5px; color: #e8d7aa; font-size: 18px; }
.club-workspace .club-section { border: 1px solid rgb(232 189 88 / 14%); border-radius: 13px; margin-top: 0; padding: 14px; background: rgb(4 18 11 / 61%); }
.club-workspace .club-section h3 { margin: 3px 0 4px; color: #e9d8ab; font: 700 18px/1.15 Georgia, serif; }
.club-workspace .club-section .section-heading p { color: #80958a; font-size: 10px; }
.club-self-card { border: 1px solid rgb(232 189 88 / 18%); border-radius: 13px; padding: 14px; background: radial-gradient(circle at 100% 0, rgb(224 184 82 / 15%), transparent 40%), rgb(4 18 11 / 72%); }
.club-self-card > div { display: grid; grid-template-columns: 45px minmax(0, 1fr); align-items: center; gap: 9px; margin: 11px 0; }
.club-self-card > div > span:last-child { min-width: 0; display: grid; gap: 3px; }
.club-self-card > div strong { overflow: hidden; color: #eadcb7; text-overflow: ellipsis; white-space: nowrap; }
.club-self-card > div small, .club-self-card > small { color: #82978c; font-size: 9px; }
.club-self-card p { margin: 12px 0 3px; color: #71867b; font-size: 9px; }
.club-self-card > b { display: block; margin-bottom: 10px; color: #e7c25f; font: 700 27px Georgia, serif; }
.club-overview-sidebar .club-war-banner { min-height: 176px; align-items: stretch; flex-direction: column; margin: 0; border-radius: 13px; background: radial-gradient(circle at 90% 0, rgb(224 184 82 / 19%), transparent 43%), rgb(6 25 15 / 78%); }
.club-overview-sidebar .club-war-banner button { width: 100%; margin-top: auto; }
.club-workspace .club-member-grid { gap: 7px; }
.club-workspace .club-member-card { position: relative; border-color: rgb(232 189 88 / 12%); border-radius: 9px; background: rgb(10 35 22 / 58%); }
.club-workspace .club-member-card:hover { border-color: rgb(232 189 88 / 27%); }
.club-workspace .club-member-avatar { border: 1px solid rgb(225 185 80 / 27%); background: #173624; color: #edca69; }
.club-workspace .club-member-card strong { color: #e5dbc0; font-size: 10px; }
.club-workspace .club-member-card small { font-size: 8px; }
.club-workspace .club-member-card em { font-size: 8px; }
.club-members-page { min-height: 100%; }
.club-members-toolbar { display: grid; grid-template-columns: minmax(180px, 1fr) 170px minmax(260px, 1.35fr); gap: 8px; margin: 12px 0; }
.club-members-toolbar input, .club-members-toolbar select { min-height: 40px; }
.club-members-toolbar .club-invite-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; margin: 0; }
.club-members-page .club-member-grid.full { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.club-members-page .club-member-card { align-content: start; }
.club-members-page .club-member-card .card-actions { display: grid; grid-template-columns: 1fr; }
.club-members-page .club-member-card .card-actions button { min-height: 31px; padding: 5px 7px; font-size: 8px; }
.club-workspace .club-wars-page { background: radial-gradient(circle at 50% 0, rgb(137 35 54 / 14%), transparent 36%), rgb(4 18 11 / 65%); }
.club-workspace .club-war-score { border-color: rgb(232 189 88 / 22%); background: linear-gradient(125deg, #142c20, #1b1118); }
.club-workspace .club-settings .grid-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.club-workspace .club-discovery-hero { border-color: rgb(232 189 88 / 21%); border-radius: 14px; background: radial-gradient(circle at 12% 50%, rgb(224 184 82 / 20%), transparent 30%), linear-gradient(115deg, #183c29, #091c12); }
.club-workspace .club-discovery-hero h3 { color: #f0dca7; font: 700 24px Georgia, serif; }
.club-workspace .club-directory-row { border-color: rgb(232 189 88 / 12%); background: rgb(5 24 15 / 60%); }
.club-workspace .club-create-card { background: radial-gradient(circle at 100% 0, rgb(224 184 82 / 14%), transparent 37%), rgb(5 24 15 / 70%); }

@media (max-width: 1100px) {
  .club-overview-layout { grid-template-columns: minmax(0, 1fr) 230px; }
  .club-members-toolbar { grid-template-columns: 1fr 150px; }
  .club-members-toolbar .club-invite-form { grid-column: 1 / -1; }
  .club-members-page .club-member-grid.full { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .club-workspace .club-heading { display: grid; }
  .club-workspace .club-heading > button { width: 100%; }
  .club-workspace .club-navigation { margin-top: 8px; }
  .club-workspace .club-profile-hero { min-height: 120px; grid-template-columns: 62px minmax(0, 1fr); padding: 13px; }
  .club-workspace .club-profile-emblem { width: 58px; height: 58px; border-radius: 17px; font-size: 31px; }
  .club-overview-layout { grid-template-columns: 1fr; }
  .club-workspace .club-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .club-overview-sidebar { grid-template-columns: 1fr; }
  .club-overview-sidebar .club-war-banner { min-height: 145px; }
  .club-members-toolbar { grid-template-columns: 1fr; }
  .club-members-toolbar .club-invite-form { grid-column: auto; grid-template-columns: 1fr; }
  .club-members-page .club-member-grid.full { grid-template-columns: 1fr; }
  .club-workspace .club-settings .grid-form { grid-template-columns: 1fr; }
}

/* Store and rewards workspaces. */
.catalog-workspace .catalog-hub,
.rewards-workspace .rewards-hub { background: radial-gradient(circle at 100% 0, rgb(225 185 80 / 11%), transparent 30%), linear-gradient(145deg, rgb(15 37 27 / 98%), rgb(6 22 14 / 98%)); }
.commerce-section-rail button:nth-last-child(2) { margin-top: auto; }
.commerce-section-rail button:last-child { margin-top: 0; }
.catalog-heading, .rewards-heading { align-items: flex-start; }
.catalog-heading h2, .rewards-heading h2 { margin: 2px 0 0; color: #f4dfaa; font: 700 clamp(24px, 2.5vw, 34px)/1.05 Georgia, serif; }
.catalog-heading p, .rewards-heading p { max-width: 680px; margin-top: 6px; color: #91a59a; }
.catalog-wallet { display: flex; gap: 7px; }
.catalog-wallet > span { min-width: 92px; display: grid; gap: 3px; border: 1px solid rgb(232 189 88 / 18%); border-radius: 10px; padding: 8px 11px; background: rgb(4 18 11 / 62%); color: #71867b; font-size: 8px; text-transform: uppercase; }
.catalog-wallet strong { color: #e6c66e; font-size: 15px; }
.catalog-navigation, .rewards-navigation { display: flex; gap: 7px; overflow-x: auto; border-bottom: 1px solid rgb(232 189 88 / 15%); margin: 14px 0 11px; scrollbar-width: thin; }
.catalog-navigation button, .rewards-navigation button { flex: 0 0 auto; min-height: 41px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 8px 14px; background: transparent; box-shadow: none; color: #8fa399; font-size: 11px; }
.catalog-navigation button.active, .rewards-navigation button.active { border-bottom-color: #e2bd5d; background: linear-gradient(0deg, rgb(226 189 93 / 11%), transparent); color: #f5dfaa; }
.catalog-page, .reward-page { display: none; }
.catalog-page.active, .reward-page.active { display: block; }
.catalog-spotlight { min-height: 166px; display: grid; grid-template-columns: 84px minmax(0, 1fr) 180px; align-items: center; gap: 16px; overflow: hidden; border: 1px solid rgb(232 189 88 / 24%); border-radius: 14px; margin-bottom: 10px; padding: 18px; background: radial-gradient(circle at 8% 50%, rgb(227 188 82 / 23%), transparent 25%), linear-gradient(112deg, #23452d, #151e15 65%, #291f10); }
.catalog-spotlight-icon { width: 72px; height: 72px; display: grid; place-items: center; border: 1px solid rgb(231 193 90 / 48%); border-radius: 22px; background: rgb(224 182 76 / 10%); color: #efc85e; font-size: 39px; box-shadow: 0 14px 35px rgb(0 0 0 / 24%); }
.catalog-spotlight h3 { margin: 5px 0; color: #f1dfa9; font: 700 25px Georgia, serif; }
.catalog-spotlight p { margin: 0 0 9px; color: #9eb0a6; font-size: 11px; }
.catalog-spotlight > div:nth-child(2) > div { display: flex; flex-wrap: wrap; gap: 6px; }
.catalog-spotlight > div:nth-child(2) > div span { border: 1px solid rgb(232 189 88 / 15%); border-radius: 999px; padding: 4px 7px; color: #c9d8cf; font-size: 8px; }
.catalog-spotlight > aside { display: grid; justify-items: stretch; gap: 5px; text-align: center; }
.catalog-spotlight > aside strong { color: #f0cb64; font: 700 25px Georgia, serif; }
.catalog-spotlight > aside small { color: #81958a; font-size: 9px; }
.catalog-spotlight > aside button { margin-top: 6px; }
.catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.catalog-product-card { min-width: 0; display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto minmax(58px, 1fr) auto; gap: 9px; border: 1px solid rgb(232 189 88 / 14%); border-radius: 12px; padding: 12px; background: rgb(4 18 11 / 65%); }
.catalog-product-card:hover { border-color: rgb(232 189 88 / 34%); background: rgb(9 31 20 / 78%); }
.catalog-product-icon { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgb(227 188 82 / 26%); border-radius: 12px; background: #173624; color: #e9c45f; font-size: 22px; }
.catalog-product-copy { min-width: 0; }
.catalog-product-copy > span { color: #6f877a; font-size: 7px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.catalog-product-copy h3 { margin: 4px 0; overflow: hidden; color: #e9dcb9; font: 700 15px Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.catalog-product-copy p { margin: 0; color: #84988e; font-size: 9px; line-height: 1.4; }
.catalog-product-grants { grid-column: 1 / -1; display: grid; align-content: start; gap: 3px; }
.catalog-product-grants span { color: #a8b9b0; font-size: 8px; }
.catalog-product-buy { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px 8px; border-top: 1px solid rgb(232 189 88 / 11%); padding-top: 9px; }
.catalog-product-buy strong { color: #e8c564; font-size: 14px; }
.catalog-product-buy small { grid-column: 1; color: #71867b; font-size: 8px; }
.catalog-product-buy button { grid-column: 2; grid-row: 1 / 3; min-height: 35px; padding: 6px 12px; }
.catalog-orders-card { border: 1px solid rgb(232 189 88 / 14%); border-radius: 13px; padding: 14px; background: rgb(4 18 11 / 64%); }
.catalog-orders-card h2 { margin: 3px 0; color: #ead9ad; font: 700 22px Georgia, serif; }
.catalog-orders-list { display: grid; gap: 5px; margin-top: 11px; }
.catalog-order-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) 120px 90px; align-items: center; gap: 9px; border-bottom: 1px solid rgb(232 189 88 / 9%); padding: 8px; }
.catalog-order-icon { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid rgb(232 189 88 / 22%); border-radius: 10px; background: #173624; color: #e7c261; }
.catalog-order-row > div { min-width: 0; display: grid; gap: 2px; }
.catalog-order-row > div strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalog-order-row > div small { color: #71867b; font-size: 8px; }
.catalog-order-status { width: max-content; border: 1px solid #79631d; border-radius: 999px; padding: 3px 7px; color: #ddc46d; font-size: 8px; }
.catalog-order-row > strong { color: #e3d3a8; text-align: right; }
.catalog-empty { grid-column: 1 / -1; min-height: 150px; display: grid; place-items: center; color: #7f9388; text-align: center; }

.rewards-workspace .reward-inner-card { min-height: 0; border: 1px solid rgb(232 189 88 / 14%); border-radius: 14px; margin: 0; padding: 16px; background: rgb(4 18 11 / 64%); }
.rewards-workspace .reward-inner-card h2 { margin: 3px 0; color: #ebd9ab; font: 700 23px Georgia, serif; }
.rewards-workspace .daily-reward-panel { background: radial-gradient(circle at 100% 0, rgb(224 184 82 / 14%), transparent 34%), rgb(4 18 11 / 66%); }
.rewards-workspace .daily-reward-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; margin-top: 15px; }
.rewards-workspace .daily-reward-day { position: relative; min-height: 166px; display: grid; justify-items: center; align-content: center; gap: 6px; border: 1px solid rgb(232 189 88 / 13%); border-radius: 12px; padding: 12px 7px; background: rgb(7 28 17 / 70%); text-align: center; }
.rewards-workspace .daily-reward-day.active { border-color: #dfb950; background: radial-gradient(circle at 50% 45%, rgb(224 184 82 / 21%), transparent 46%), #173621; box-shadow: inset 0 0 0 1px rgb(223 185 80 / 18%); }
.rewards-workspace .daily-reward-day.completed { opacity: .72; }
.daily-reward-check { position: absolute; top: 8px; left: 8px; width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid rgb(232 189 88 / 18%); border-radius: 50%; color: #8ea097; font-size: 8px; }
.daily-reward-day.completed .daily-reward-check { border-color: #2f8a55; background: #1b6c3c; color: #c8f3d9; }
.rewards-workspace .daily-reward-day > i { color: #e5bd53; font-size: 28px; font-style: normal; }
.rewards-workspace .daily-reward-day > strong { color: #e7d9b5; font-size: 11px; }
.rewards-workspace .daily-reward-day > span:not(.daily-reward-check) { color: #e9c55f; font-size: 10px; font-weight: 800; }
.rewards-workspace .daily-reward-day > small { color: #71867b; font-size: 8px; }
.rewards-workspace #dailyChallengeTasks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.rewards-workspace .daily-challenge-card { min-height: 125px; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; grid-template-rows: 1fr auto; align-items: center; gap: 8px 10px; border: 1px solid rgb(232 189 88 / 13%); border-radius: 11px; padding: 12px; background: rgb(7 28 17 / 68%); }
.rewards-workspace .daily-challenge-card.completed { border-color: rgb(66 168 101 / 36%); background: rgb(18 57 34 / 69%); }
.daily-challenge-icon { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgb(232 189 88 / 23%); border-radius: 13px; background: #173624; color: #e7c25d; font-size: 23px; }
.daily-challenge-copy { min-width: 0; display: grid; gap: 3px; }
.daily-challenge-copy > span { color: #6f877a; font-size: 7px; font-weight: 900; text-transform: uppercase; }
.daily-challenge-copy > strong { color: #e8dab6; font-size: 12px; }
.daily-challenge-copy p { margin: 0; color: #81958a; font-size: 8px; }
.daily-challenge-copy progress { width: 100%; height: 5px; }
.daily-challenge-reward { display: grid; justify-items: end; gap: 3px; color: #e8c563; font-size: 9px; }
.rewards-workspace .daily-challenge-card > button { grid-column: 2 / 4; min-height: 34px; }
.rewards-workspace #adsSummary { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 12px 0; }
.rewards-workspace #adsCampaigns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rewards-workspace .ad-campaign-card { border-color: rgb(232 189 88 / 14%); background: rgb(7 28 17 / 68%); }

@media (max-width: 1100px) {
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rewards-workspace .daily-reward-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .catalog-heading, .rewards-heading { display: grid; }
  .catalog-wallet { width: 100%; }
  .catalog-wallet > span { flex: 1; }
  .catalog-spotlight { grid-template-columns: 58px minmax(0, 1fr); padding: 13px; }
  .catalog-spotlight-icon { width: 54px; height: 54px; border-radius: 16px; font-size: 28px; }
  .catalog-spotlight > aside { grid-column: 1 / -1; grid-template-columns: 1fr auto; align-items: center; text-align: left; }
  .catalog-spotlight > aside small { grid-column: 1; }
  .catalog-spotlight > aside button { grid-column: 2; grid-row: 1 / 3; margin: 0; }
  .catalog-grid { grid-template-columns: 1fr; }
  .catalog-order-row { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .catalog-order-status { grid-column: 2; }
  .catalog-order-row > strong { grid-column: 3; grid-row: 1 / 3; }
  .rewards-workspace .rewards-heading > button { width: 100%; }
  .rewards-workspace .daily-reward-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rewards-workspace .daily-reward-day { min-height: 135px; }
  .rewards-workspace #dailyChallengeTasks, .rewards-workspace #adsCampaigns { grid-template-columns: 1fr; }
  .rewards-workspace #adsSummary { grid-template-columns: 1fr; }
}

/* Events and notification center. */
.events-workspace .events-hub {
  background: radial-gradient(circle at 100% 0, rgb(225 185 80 / 11%), transparent 30%), linear-gradient(145deg, rgb(15 37 27 / 98%), rgb(6 22 14 / 98%));
}
.events-heading { align-items: flex-start; }
.events-heading h2 { margin: 2px 0 0; color: #f4dfaa; font: 700 clamp(24px, 2.5vw, 34px)/1.05 Georgia, serif; }
.events-heading p { max-width: 680px; margin-top: 6px; color: #91a59a; }
.events-heading-actions { display: flex; gap: 7px; }
.events-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; }
.events-summary article { min-width: 0; display: flex; align-items: center; gap: 10px; border: 1px solid rgb(232 189 88 / 14%); border-radius: 12px; padding: 10px 12px; background: rgb(4 18 11 / 63%); }
.events-summary article > span { width: 37px; height: 37px; flex: 0 0 37px; display: grid; place-items: center; border: 1px solid rgb(232 189 88 / 22%); border-radius: 11px; background: #173624; color: #e8c35f; font: 700 18px Georgia, serif; }
.events-summary article > div { min-width: 0; display: grid; gap: 2px; }
.events-summary small { color: #71867b; font-size: 8px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.events-summary strong { color: #ead9ad; font-size: 18px; }
.events-navigation { display: flex; gap: 7px; overflow-x: auto; border-bottom: 1px solid rgb(232 189 88 / 15%); margin: 12px 0 11px; scrollbar-width: thin; }
.events-navigation button { flex: 0 0 auto; min-height: 41px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 8px 14px; background: transparent; box-shadow: none; color: #8fa399; font-size: 11px; }
.events-navigation button.active { border-bottom-color: #e2bd5d; background: linear-gradient(0deg, rgb(226 189 93 / 11%), transparent); color: #f5dfaa; }
.events-navigation button span { min-width: 19px; display: inline-grid; place-items: center; border-radius: 999px; margin-left: 4px; padding: 2px 5px; background: rgb(226 189 93 / 12%); color: #dec069; font-size: 8px; }
.events-layout { display: grid; grid-template-columns: minmax(0, 1fr) 265px; gap: 10px; align-items: start; }
.events-layout > main { min-width: 0; border: 1px solid rgb(232 189 88 / 13%); border-radius: 14px; padding: 14px; background: rgb(4 18 11 / 62%); }
.events-feed-heading { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.events-feed-heading h3 { margin: 2px 0 0; color: #e9d9ae; font: 700 19px Georgia, serif; }
.events-feed-heading > small { color: #71867b; font-size: 9px; }
.events-feed { display: grid; gap: 0; margin-top: 6px; }
.events-day-label { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 9px; margin: 9px 0 4px; }
.events-day-label span { color: #82968b; font-size: 8px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.events-day-label i { height: 1px; background: rgb(232 189 88 / 10%); }
.event-card { position: relative; min-width: 0; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 11px; border: 0; border-bottom: 1px solid rgb(232 189 88 / 9%); padding: 12px 8px; background: transparent; box-shadow: none; }
.event-card:last-child { border-bottom: 0; }
.event-card.unread { border-color: rgb(232 189 88 / 12%); background: linear-gradient(90deg, rgb(35 104 57 / 22%), transparent 78%); box-shadow: inset 2px 0 #dab755; }
.event-card-icon { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgb(232 189 88 / 22%); border-radius: 13px; background: #173624; color: #e7c15d; font: 700 21px Georgia, serif; }
.event-card.event-game .event-card-icon { color: #9fc9ff; background: #102b31; }
.event-card.event-warning .event-card-icon { color: #f1a2a2; background: #341b20; }
.event-card.event-reward .event-card-icon { color: #f1cc68; background: #3a3217; }
.event-card-copy { min-width: 0; display: grid; gap: 4px; }
.event-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.event-card-meta span { color: #75a98a; font-size: 7px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.event-card-meta time { flex: 0 0 auto; color: #667d70; font-size: 8px; }
.event-card-copy > strong { overflow: hidden; color: #e8dab6; font: 700 13px/1.25 Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.event-card-copy > p { margin: 0; color: #8da097; font-size: 9px; line-height: 1.45; }
.event-card .card-actions { justify-content: flex-start; margin-top: 5px; }
.event-card .card-actions button { min-height: 30px; padding: 5px 9px; font-size: 8px; }
.event-read-state { align-self: center; color: #63796d; font-size: 8px; }
.event-unread-dot { position: absolute; top: 14px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: #edc65f; box-shadow: 0 0 10px rgb(237 198 95 / 60%); }
.events-sidebar { display: grid; gap: 9px; }
.events-shortcuts, .events-note { border: 1px solid rgb(232 189 88 / 13%); border-radius: 14px; padding: 14px; background: rgb(4 18 11 / 63%); }
.events-shortcuts h3 { margin: 3px 0 11px; color: #e8d8ad; font: 700 19px Georgia, serif; }
.events-shortcuts > button { width: 100%; min-height: 51px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 8px; border: 0; border-bottom: 1px solid rgb(232 189 88 / 9%); border-radius: 0; padding: 7px 2px; background: transparent; box-shadow: none; color: #d6dfd9; text-align: left; }
.events-shortcuts > button:last-child { border-bottom: 0; }
.events-shortcuts > button > span { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid rgb(232 189 88 / 18%); border-radius: 10px; color: #e5bf59; }
.events-shortcuts > button div { min-width: 0; display: grid; gap: 2px; }
.events-shortcuts > button strong { font-size: 9px; }
.events-shortcuts > button small { color: #71867b; font-size: 8px; }
.events-shortcuts > button i { color: #9aab9f; font-size: 18px; font-style: normal; }
.events-note { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 9px; background: radial-gradient(circle at 100% 0, rgb(224 184 82 / 12%), transparent 42%), rgb(5 24 15 / 68%); }
.events-note > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: rgb(225 186 81 / 10%); color: #e5bf5b; font-size: 20px; }
.events-note strong { color: #ded3b4; font-size: 9px; }
.events-note p { margin: 4px 0 0; color: #788d81; font-size: 8px; line-height: 1.5; }
.events-empty { min-height: 260px; display: grid; place-items: center; align-content: center; gap: 7px; color: #82958a; text-align: center; }
.events-empty > span { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid rgb(232 189 88 / 19%); border-radius: 16px; background: #173624; color: #e6c15e; font-size: 25px; }
.events-empty strong { color: #e2d4b1; font: 700 16px Georgia, serif; }
.events-empty p { max-width: 330px; margin: 0; font-size: 9px; }

@media (max-width: 980px) {
  .events-layout { grid-template-columns: minmax(0, 1fr) 220px; }
}

@media (max-width: 760px) {
  .events-heading { display: grid; }
  .events-heading-actions { width: 100%; }
  .events-heading-actions button { flex: 1; }
  .events-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .events-summary article { display: grid; justify-items: center; gap: 4px; padding: 8px 4px; text-align: center; }
  .events-summary article > span { width: 31px; height: 31px; flex-basis: 31px; }
  .events-summary strong { font-size: 15px; }
  .events-layout { grid-template-columns: 1fr; }
  .events-layout > main { padding: 11px; }
  .events-sidebar { grid-template-columns: 1fr; }
  .events-shortcuts { display: none; }
  .event-card { grid-template-columns: 39px minmax(0, 1fr); gap: 8px; padding: 11px 5px; }
  .event-card-icon { width: 37px; height: 37px; border-radius: 11px; font-size: 18px; }
  .event-card-copy > strong { white-space: normal; }
  .event-card .card-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .event-card .card-actions button { width: 100%; }
}

/* Administration: system reliability workspace. */
body.admin-view-active .admin-system-section {
  background:
    radial-gradient(circle at 100% 0, rgb(153 47 197 / 12%), transparent 32%),
    linear-gradient(150deg, rgb(7 20 34 / 97%), rgb(4 12 22 / 97%));
}
body.admin-view-active .system-health-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 12px 0;
}
body.admin-view-active .system-health-summary article {
  border-color: var(--admin-border);
  background: rgb(4 14 25 / 76%);
}
body.admin-view-active .system-health-summary .system-status-operational > span,
body.admin-view-active .system-check-ok > div span { color: #6ce59c; }
body.admin-view-active .system-health-summary .system-status-attention > span,
body.admin-view-active .system-check-warning > div span { color: #ffd166; }
body.admin-view-active .system-check-failed { border-color: rgb(255 80 117 / 45%); }
body.admin-view-active .system-check-failed > div span,
body.admin-view-active .system-record-error { color: #ff718d; }
body.admin-view-active .system-checks {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
body.admin-view-active .system-check,
body.admin-view-active .system-record-card,
body.admin-view-active .system-audit-card {
  border-color: var(--admin-border);
  background: linear-gradient(145deg, rgb(7 25 43 / 88%), rgb(5 14 25 / 88%));
}
body.admin-view-active .system-subheading {
  border-top: 1px solid var(--admin-border);
  margin-top: 18px;
  padding-top: 15px;
}
body.admin-view-active .system-subheading h3 { margin: 0 0 4px; }
body.admin-view-active .system-incident-form {
  grid-template-columns: minmax(220px, 1.3fr) 180px minmax(280px, 2fr) auto;
  align-items: end;
}
body.admin-view-active .system-incident-form textarea { min-height: 62px; }
body.admin-view-active .incident-high { border-left: 3px solid #ff9f5a; }
body.admin-view-active .incident-critical { border-left: 3px solid #ff4f76; }
body.admin-view-active #systemAuditBox {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1050px) {
  body.admin-view-active .system-health-summary,
  body.admin-view-active .system-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.admin-view-active .system-incident-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.admin-view-active .system-incident-form textarea { grid-column: 1 / -1; }
  body.admin-view-active #systemAuditBox { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-height: 600px) and (orientation: landscape) {
  body.admin-view-active .system-health-summary,
  body.admin-view-active .system-checks,
  body.admin-view-active #systemAuditBox { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.admin-view-active .system-incident-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* System settings overview: screen 88. */
.admin-view .admin-system-subnav {
  display: none;
  gap: 1px;
  border-left: 1px solid rgb(219 45 177 / 28%);
  margin: -1px 0 3px 17px;
  padding: 2px 0 3px 7px;
}
.admin-view .app-view-rail nav > [data-open-panel-page="system"].selected + .admin-system-subnav { display: grid; }
.admin-view .app-view-rail nav .admin-system-subnav button {
  min-height: 25px;
  grid-template-columns: 9px minmax(0, 1fr);
  border: 0;
  border-radius: 5px;
  padding: 3px 5px;
  background: transparent;
  box-shadow: none;
  color: #8fa0b4;
}
.admin-view .app-view-rail nav .admin-system-subnav button > span { color: #b84b9f; font-size: 8px; }
.admin-view .app-view-rail nav .admin-system-subnav button > strong { font-size: 8px; font-weight: 600; }
.admin-view .app-view-rail nav .admin-system-subnav button.selected { background: linear-gradient(90deg, rgb(193 28 151 / 25%), transparent); color: #f1d9ed; }

body.admin-view-active .admin-system-section {
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
}
.system-settings-page { min-width: 0; }
.system-settings-page.system-settings-page-active { display: block; }
.system-overview-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 292px;
  gap: 9px;
}
.system-overview-layout.hidden { display: none !important; }
.system-overview-main,
.system-overview-sidebar > section,
#systemBackupsPage,
#systemMaintenancePage,
#systemSettingsPlaceholder {
  min-width: 0;
  border: 1px solid var(--admin-border);
  border-radius: 9px;
  background: linear-gradient(150deg, rgb(7 20 34 / 97%), rgb(4 12 22 / 98%));
}
.system-overview-main { padding: 12px; }
.system-overview-heading {
  min-height: 58px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.system-overview-heading span { color: #d447b6; font-size: 8px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.system-overview-heading h2 { margin: 4px 0 2px; color: #eef3fa; font-size: 21px; }
.system-overview-heading p { margin: 0; font-size: 9px; }
.system-overview-heading button { flex: 0 0 auto; min-height: 35px; }
.system-configuration-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin: 8px 0;
}
.admin-view .system-config-card {
  min-width: 0;
  min-height: 96px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 6px 8px;
  border-color: rgb(61 132 185 / 25%) !important;
  border-radius: 8px;
  padding: 9px;
  background: linear-gradient(145deg, rgb(8 24 41 / 97%), rgb(5 13 24 / 98%)) !important;
  text-align: left;
}
.system-config-card > i { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 7px; background: rgb(8 18 33 / 70%); font-size: 20px; font-style: normal; }
.system-config-card > span { min-width: 0; display: grid; gap: 1px; }
.system-config-card > span b { overflow: hidden; color: #dbe4ef; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.system-config-card > span strong { color: #eef4fb; font-size: 21px; line-height: 1; }
.system-config-card > span small { overflow: hidden; color: #8393a7; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.system-config-card > em { grid-column: 1 / -1; border-top: 1px solid rgb(76 130 168 / 13%); padding-top: 5px; color: #74869a; font-size: 7px; font-style: normal; }
.system-config-magenta > i, .system-config-magenta > em { color: #f04fc9; }
.system-config-green > i, .system-config-green > em { color: #56d84e; }
.system-config-blue > i, .system-config-blue > em { color: #43bfff; }
.system-config-orange > i, .system-config-orange > em { color: #ff9d30; }
.system-state-panel,
.system-overview-feed {
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: rgb(4 14 25 / 72%);
}
.system-state-panel > header,
.system-overview-feed > header {
  min-height: 37px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--admin-border);
  padding: 8px 10px;
}
.system-state-panel h3,
.system-overview-feed h3,
.system-overview-sidebar h3 { margin: 0; color: #e7edf5; font-size: 13px; }
.system-state-panel > header time { color: #73859a; font-size: 7px; }
.system-state-content { display: grid; grid-template-columns: minmax(210px, .85fr) minmax(0, 1.25fr); }
.system-service-status { border-right: 1px solid var(--admin-border); padding: 7px 10px; }
.system-service { min-width: 0; min-height: 31px; display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 7px; }
.system-service > i { width: 6px; height: 6px; border-radius: 50%; background: #6b7d90; box-shadow: 0 0 8px currentColor; }
.system-service > span { min-width: 0; display: grid; }
.system-service > span strong { color: #bdc8d5; font-size: 8px; }
.system-service > span small { overflow: hidden; color: #687b90; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
.system-service > b { border: 1px solid rgb(89 122 149 / 24%); border-radius: 4px; padding: 3px 6px; color: #8495a8; font-size: 7px; }
.system-service-healthy > i { background: #4acb62; color: #4acb62; }
.system-service-healthy > b { border-color: rgb(68 204 101 / 28%); color: #57d773; }
.system-service-warning > i { background: #ffb53d; color: #ffb53d; }
.system-service-warning > b { color: #ffc15d; }
.system-service-unavailable > i { background: #ff405e; color: #ff405e; }
.system-service-unavailable > b { border-color: rgb(255 64 94 / 34%); color: #ff6d82; }
.system-service-unknown > i { background: #ff8d32; color: #ff8d32; }
.system-service-unknown > b { color: #ffad64; }
.system-overview-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: center; gap: 1px; padding: 7px; }
.system-overview-metrics article { min-width: 0; display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 5px; padding: 6px; }
.system-overview-metrics article > i { color: #9aadc0; font-size: 15px; font-style: normal; text-align: center; }
.system-overview-metrics article > span { min-width: 0; display: grid; }
.system-overview-metrics small { overflow: hidden; color: #74869a; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
.system-overview-metrics strong { color: #e6edf6; font-size: 11px; }
.system-overview-lower { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.system-overview-feed { min-width: 0; overflow: hidden; }
.system-overview-feed > div { min-height: 126px; display: grid; align-content: start; padding: 4px 8px; }
.system-overview-feed > div > article,
.system-admin-activity article { min-width: 0; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 7px; border-bottom: 1px solid rgb(69 119 156 / 12%); padding: 6px 2px; }
.system-overview-feed article > i,
.system-admin-activity article > i { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid rgb(49 157 213 / 25%); border-radius: 7px; background: rgb(10 40 61 / 72%); color: #52c4f2; font-size: 12px; font-style: normal; }
.system-overview-feed article > span,
.system-admin-activity article > span { min-width: 0; display: grid; gap: 2px; }
.system-overview-feed article strong,
.system-admin-activity article strong { overflow: hidden; color: #cdd8e4; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.system-overview-feed article small,
.system-admin-activity article small { overflow: hidden; color: #738599; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.system-overview-feed article time,
.system-admin-activity article time { color: #73859a; font-size: 6px; line-height: 1.35; text-align: right; }
.admin-view .system-overview-feed > button,
.admin-view .system-admin-activity > button { width: calc(100% - 16px); min-height: 28px; margin: 3px 8px 8px; font-size: 7px; }
.admin-view .system-warning {
  width: 100%; min-width: 0; min-height: 42px; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center; gap: 7px; border: 0 !important; border-bottom: 1px solid rgb(68 119 156 / 12%) !important;
  border-radius: 0; padding: 5px 2px; background: transparent !important; box-shadow: none !important; text-align: left;
}
.system-warning > i { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 7px; color: #48bfff; font-style: normal; }
.system-warning > span { min-width: 0; display: grid; gap: 2px; }
.system-warning strong { overflow: hidden; color: #ccd7e3; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.system-warning small { overflow: hidden; color: #738599; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.system-warning time { color: #728397; font-size: 6px; }
.system-warning-critical > i { color: #ff405e; }
.system-warning-warning > i { color: #ffbd3d; }
.system-no-warnings { min-height: 100px; display: flex; align-items: center; justify-content: center; gap: 9px; color: #6dd98a; text-align: left; }
.system-no-warnings i { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgb(89 214 125 / 30%); border-radius: 50%; font-style: normal; }
.system-no-warnings span { display: grid; gap: 2px; }
.system-no-warnings small { color: #718599; font-size: 7px; }
.system-overview-note { border-top: 1px solid var(--admin-border); margin-top: 8px; padding: 8px; color: #687b90; font-size: 7px; text-align: center; }
.system-overview-sidebar { min-width: 0; display: grid; align-content: start; gap: 9px; }
.system-overview-sidebar > section { padding: 10px; }
.system-quick-actions > div { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 9px; }
.admin-view .system-quick-actions button { min-width: 0; min-height: 58px; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 6px; border-radius: 7px; padding: 8px; text-align: left; }
.system-quick-actions button > span { color: #48c4f8; font-size: 18px; text-align: center; }
.system-quick-actions button > strong { font-size: 8px; line-height: 1.3; }
.system-quick-actions button:nth-child(1), .system-quick-actions button:nth-child(4) { border-color: rgb(221 44 177 / 35%); background: linear-gradient(145deg, rgb(70 15 78 / 72%), rgb(16 15 38 / 90%)); }
.system-quick-actions button:nth-child(2) { border-color: rgb(64 190 75 / 33%); background: linear-gradient(145deg, rgb(18 70 39 / 72%), rgb(7 29 25 / 92%)); }
.system-quick-actions button:nth-child(5) { border-color: rgb(239 54 77 / 36%); background: linear-gradient(145deg, rgb(70 14 28 / 72%), rgb(25 10 23 / 92%)); }
.system-quick-actions button:last-child { grid-column: 1 / -1; }
.system-admin-activity > div { margin-top: 6px; }
.system-admin-activity article > i { border-radius: 50%; background: linear-gradient(145deg, #1c6688, #10354c); color: #d7f3ff; }
.system-overview-loading, .system-overview-empty, .system-overview-error { align-self: center; justify-self: center; margin: 8px; color: #73869a; font-size: 8px; text-align: center; }
.system-overview-error { color: #ff718d; }
#systemBackupsPage,
#systemMaintenancePage,
#systemSettingsPlaceholder { min-height: 100%; padding: 13px; }
.admin-audit-section #systemAuditBox { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1120px) {
  .system-overview-layout { grid-template-columns: minmax(0, 1fr) 220px; }
  .system-configuration-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .system-overview-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .system-quick-actions > div { grid-template-columns: 1fr; }
  .system-quick-actions button:last-child { grid-column: auto; }
}

@media (max-height: 600px) and (orientation: landscape) {
  .admin-view .app-view-rail nav .admin-system-subnav button { min-height: 20px; padding-block: 1px; }
  .admin-view .app-view-rail nav .admin-system-subnav button > strong { font-size: 7px; }
  .system-overview-layout { grid-template-columns: minmax(0, 1fr) 184px; gap: 5px; }
  .system-overview-main { padding: 7px; }
  .system-overview-heading { min-height: 43px; }
  .system-overview-heading h2 { margin-top: 2px; font-size: 16px; }
  .system-overview-heading p { display: none; }
  .system-overview-heading button { min-height: 28px; padding: 4px 7px; font-size: 7px; }
  .system-configuration-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 4px 0; }
  .admin-view .system-config-card { min-height: 68px; grid-template-columns: 25px minmax(0, 1fr); gap: 3px 4px; padding: 5px; }
  .system-config-card > i { width: 23px; height: 23px; font-size: 13px; }
  .system-config-card > span b, .system-config-card > em { font-size: 5px; }
  .system-config-card > span strong { font-size: 14px; }
  .system-config-card > span small { font-size: 5px; }
  .system-state-panel > header, .system-overview-feed > header { min-height: 28px; padding: 4px 6px; }
  .system-state-panel h3, .system-overview-feed h3, .system-overview-sidebar h3 { font-size: 9px; }
  .system-state-content { grid-template-columns: minmax(150px, .9fr) minmax(0, 1.1fr); }
  .system-service-status { padding: 3px 6px; }
  .system-service { min-height: 22px; }
  .system-service > span strong, .system-service > b { font-size: 5px; }
  .system-service > span small { display: none; }
  .system-overview-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 3px; }
  .system-overview-metrics article { grid-template-columns: 15px minmax(0, 1fr); padding: 3px; }
  .system-overview-metrics article > i { font-size: 10px; }
  .system-overview-metrics small { font-size: 4px; }
  .system-overview-metrics strong { font-size: 7px; }
  .system-overview-lower { gap: 4px; margin-top: 4px; }
  .system-overview-feed > div { min-height: 86px; max-height: 86px; overflow: hidden; padding: 2px 5px; }
  .system-overview-feed > div > article, .system-admin-activity article { grid-template-columns: 19px minmax(0, 1fr) auto; gap: 4px; padding: 3px 1px; }
  .system-overview-feed article > i, .system-admin-activity article > i { width: 18px; height: 18px; font-size: 8px; }
  .system-overview-feed article strong, .system-admin-activity article strong { font-size: 5px; }
  .system-overview-feed article small, .system-admin-activity article small, .system-overview-feed article time, .system-admin-activity article time { font-size: 4px; }
  .admin-view .system-overview-feed > button, .admin-view .system-admin-activity > button { min-height: 21px; margin: 2px 5px 5px; font-size: 5px; }
  .system-overview-note { margin-top: 4px; padding: 4px; font-size: 5px; }
  .system-overview-sidebar { gap: 5px; }
  .system-overview-sidebar > section { padding: 7px; }
  .system-quick-actions > div { grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 5px; }
  .admin-view .system-quick-actions button { min-height: 37px; grid-template-columns: 18px minmax(0, 1fr); padding: 4px; }
  .system-quick-actions button > span { font-size: 12px; }
  .system-quick-actions button > strong { font-size: 5px; }
  .system-quick-actions button:last-child { grid-column: 1 / -1; }
  .system-admin-activity article:nth-child(n+4) { display: none; }
}

/* Community chat: full-width horizontal workspace. */
.community-chat-workspace:not(.hidden) {
  min-height: calc(100dvh - 92px);
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr) 285px;
  gap: 9px;
  overflow: hidden;
  color: #e8edf5;
}
.community-chat-channels,
.community-chat-main,
.community-chat-player {
  min-width: 0;
  border: 1px solid rgb(94 129 157 / 28%);
  border-radius: 13px;
  background: linear-gradient(155deg, rgb(6 15 23 / 98%), rgb(2 8 13 / 98%));
  box-shadow: 0 15px 38px rgb(0 0 0 / 28%);
}
.community-chat-channels { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: 10px; }
.chat-channel-heading { min-height: 42px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgb(102 132 157 / 20%); padding: 3px 5px 9px; text-transform: uppercase; }
.chat-channel-heading > span { font-weight: 900; letter-spacing: .06em; }
.chat-channel-heading button { min-width: 34px; min-height: 32px; padding: 4px; }
#communityChatChannels { display: grid; align-content: start; gap: 5px; overflow-y: auto; padding: 9px 0; }
#communityChatChannels button { min-width: 0; min-height: 55px; display: grid; grid-template-columns: 33px minmax(0, 1fr); grid-template-rows: 1fr auto; align-items: center; border: 1px solid transparent; border-radius: 10px; padding: 8px; background: transparent; box-shadow: none; color: #dce4eb; text-align: left; }
#communityChatChannels button > span { grid-row: 1 / 3; color: #2fbaff; font-size: 21px; text-align: center; }
#communityChatChannels button strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
#communityChatChannels button small { color: #718494; font-size: 7px; }
#communityChatChannels button.selected { border-color: #b929c5; background: linear-gradient(120deg, rgb(100 12 123 / 68%), rgb(41 8 54 / 82%)); box-shadow: inset 3px 0 #eb2fc3, 0 0 18px rgb(202 34 190 / 13%); }
.community-chat-main { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto auto auto; overflow: hidden; }
.community-chat-header { min-height: 59px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgb(94 129 157 / 22%); padding: 9px 14px; }
.community-chat-header h2 { margin: 2px 0 0; font-size: 22px; }
.community-chat-header > span { color: #48cf82; font-size: 9px; }
.chat-load-older { justify-self: center; min-height: 29px; margin: 5px; padding: 4px 10px; font-size: 8px; }
.community-chat-messages { min-height: 0; display: grid; align-content: start; gap: 5px; overflow-y: auto; padding: 7px 10px; scrollbar-width: thin; }
.community-chat-message { min-width: 0; display: grid; grid-template-columns: 42px minmax(0, 1fr) 35px; align-items: start; gap: 8px; border: 1px solid rgb(78 116 145 / 18%); border-radius: 10px; padding: 8px; background: rgb(7 17 26 / 74%); }
.community-chat-message:hover, .community-chat-message.selected { border-color: rgb(207 42 193 / 45%); background: rgb(28 12 34 / 68%); }
.chat-message-avatar, .chat-player-avatar { overflow: hidden; display: grid; place-items: center; border: 1px solid rgb(99 151 190 / 32%); border-radius: 50%; background: #102a3b; color: #8ed9ff; font-weight: 900; }
.chat-message-avatar { width: 40px; height: 40px; padding: 0; box-shadow: none; }
.chat-message-avatar img, .chat-player-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-message-body { min-width: 0; }
.chat-message-body header { display: flex; align-items: center; gap: 6px; }
.chat-message-body header button { min-height: 0; border: 0; padding: 0; background: transparent; box-shadow: none; color: #eef3f8; }
.chat-message-body header strong { font-size: 11px; }
.chat-message-body time { margin-left: auto; color: #728393; font-size: 8px; }
.chat-message-body > p { margin: 4px 0 0; color: #d2dbe3; font-size: 10px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-level { border: 1px solid #245b3b; border-radius: 5px; padding: 2px 5px; color: #69db8c; font-size: 7px; white-space: nowrap; }
.chat-level-premium_1, .chat-level-premium_2 { border-color: #176ea5; color: #39baff; }
.chat-level-vip { border-color: #8c278d; color: #f09ae8; }
.chat-message-menu { min-width: 33px; min-height: 29px; padding: 3px; }
.chat-message-reply { width: 100%; min-height: 0; display: grid; gap: 2px; border: 0; border-left: 2px solid #d32ab3; border-radius: 4px; margin: 5px 0; padding: 4px 7px; background: rgb(137 22 130 / 11%); box-shadow: none; color: #cb8fc5; text-align: left; }
.chat-message-reply small { overflow: hidden; color: #9daab5; text-overflow: ellipsis; white-space: nowrap; }
.chat-message-emoji { width: 54px; height: 54px; object-fit: contain; }
.chat-message-gift { display: flex; align-items: center; gap: 10px; margin-top: 5px; border: 1px solid rgb(217 165 54 / 31%); border-radius: 9px; padding: 8px; background: linear-gradient(110deg, rgb(96 65 10 / 28%), rgb(53 18 61 / 25%)); }
.chat-message-gift > span { font-size: 30px; }
.chat-message-gift p { margin: 2px 0 0; color: #d4b870; font-size: 9px; }
.community-chat-message.system-casino-win { grid-template-columns: 42px minmax(0, 1fr); border-color: rgb(226 175 55 / 52%); background: radial-gradient(circle at 12% 30%, rgb(143 72 14 / 27%), transparent 34%), linear-gradient(110deg, rgb(45 18 50 / 86%), rgb(14 20 28 / 92%)); box-shadow: inset 0 0 18px rgb(221 156 40 / 8%); }
.chat-casino-avatar { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid #d9a838; border-radius: 50%; background: linear-gradient(145deg, #6a3210, #321241); font-size: 23px; box-shadow: 0 0 12px rgb(218 154 43 / 24%); }
.chat-casino-badge { border: 1px solid rgb(211 162 53 / 38%); border-radius: 999px; padding: 1px 6px; color: #deb75e; font-size: 7px; text-transform: uppercase; }
.chat-casino-win-content { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; }
.chat-casino-win-content p { margin: 5px 0 0; color: #f0e4c3; font-size: 10px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-casino-win-content p strong { color: #ffd565; }
.chat-casino-win-content button { min-height: 28px; padding: 4px 9px; color: #ffe079; font-size: 8px; }
.community-chat-reply, .community-chat-restriction { margin: 0 10px 6px; border: 1px solid rgb(206 43 190 / 28%); border-radius: 8px; padding: 7px 10px; background: rgb(84 14 89 / 28%); }
.community-chat-reply { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.community-chat-reply > div { min-width: 0; display: grid; gap: 2px; }
.community-chat-reply small { overflow: hidden; color: #9faab4; text-overflow: ellipsis; white-space: nowrap; }
.community-chat-reply button { min-width: 30px; min-height: 28px; padding: 3px; }
.community-chat-restriction { border-color: rgb(255 73 107 / 38%); background: rgb(95 14 30 / 34%); color: #ff9bad; font-size: 9px; }
.community-chat-emoji { max-height: 175px; overflow-y: auto; border-top: 1px solid rgb(92 126 153 / 19%); padding: 8px 10px; background: #050d15; }
.community-chat-emoji section { display: grid; gap: 5px; }
.community-chat-emoji section + section { margin-top: 8px; }
.community-chat-emoji section > div { display: flex; flex-wrap: wrap; gap: 4px; }
.community-chat-emoji button { width: 38px; height: 38px; min-height: 0; padding: 3px; }
.community-chat-emoji img { width: 100%; height: 100%; object-fit: contain; }
.community-chat-composer { display: grid; grid-template-columns: 41px 41px minmax(0, 1fr) auto auto; align-items: center; gap: 7px; border-top: 1px solid rgb(94 129 157 / 24%); padding: 9px 11px; }
.community-chat-composer > button { min-width: 39px; min-height: 39px; padding: 5px 9px; }
.community-chat-composer input { min-width: 0; }
.community-chat-composer > span { color: #718393; font-size: 8px; }
.community-chat-player { display: grid; align-content: start; gap: 8px; overflow-y: auto; padding: 10px; }
.chat-player-empty { min-height: 220px; display: grid; place-items: center; align-content: center; gap: 6px; color: #758695; text-align: center; }
.chat-player-empty > span { font-size: 38px; color: #c52ab6; }
.chat-player-empty p { max-width: 190px; margin: 0; font-size: 9px; }
.chat-player-card, .chat-player-actions { position: relative; display: grid; justify-items: center; gap: 6px; border: 1px solid rgb(87 121 148 / 22%); border-radius: 11px; padding: 12px; background: rgb(6 16 25 / 75%); text-align: center; }
.chat-player-card > button { position: absolute; top: 7px; right: 7px; min-width: 29px; min-height: 27px; padding: 2px; }
.chat-player-avatar { width: 70px; height: 70px; font-size: 27px; }
.chat-player-card h3 { margin: 2px 0; }
.chat-player-card > p { margin: 0; color: #788997; font-size: 8px; }
.chat-player-stats { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 5px; }
.chat-player-stats span { display: grid; gap: 2px; border-radius: 7px; padding: 6px 3px; background: #091925; }
.chat-player-stats small { color: #718393; font-size: 7px; }
.chat-player-actions { justify-items: stretch; }
.chat-player-actions h3 { margin: 0 0 3px; text-align: left; }
.chat-player-actions button { width: 100%; justify-content: flex-start; }
.chat-empty { min-height: 220px; display: grid; place-items: center; align-content: center; gap: 6px; color: #778896; text-align: center; }
.chat-empty > span { color: #c32db8; font-size: 34px; }
.chat-empty p { margin: 0; font-size: 9px; }
.chat-gift-dialog { width: min(620px, 92vw); }
.chat-gift-catalog { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.chat-gift-catalog button { min-height: 120px; display: grid; place-items: center; gap: 4px; border-color: rgb(223 175 61 / 24%); background: #0a1721; }
.chat-gift-catalog button.selected { border-color: #dfbd5d; background: rgb(104 70 10 / 30%); }
.chat-gift-catalog span { font-size: 34px; }
.chat-gift-catalog small { color: #d3b760; }
.admin-chat-levels { display: flex; flex-wrap: wrap; gap: 12px; border: 1px solid var(--admin-border, rgb(94 129 157 / 28%)); border-radius: 9px; margin: 10px 0; padding: 10px; }
.admin-chat-levels label { display: inline-flex; align-items: center; gap: 5px; }

/* Lottery: separate premium Web and Android-landscape compositions. */
body.lottery-view-active {
  overflow: hidden;
  background: #020306;
}
body.lottery-view-active .app {
  width: 100%;
  max-width: none;
  height: 100dvh;
  padding: 0;
}
body.lottery-view-active .topbar,
body.lottery-view-active .mobile-dock { display: none !important; }
.lottery-view:not(.hidden) { position: relative; width: 100%; height: 100dvh; overflow: hidden; margin: 0; }
.lottery-layout { width: 100%; height: 100%; }
.lottery-mobile-layout { display: none; }
.lottery-shell {
  --lottery-gold: #f4c856;
  --lottery-gold-soft: #9f7022;
  --lottery-purple: #8b3eb1;
  --lottery-panel: rgb(7 8 17 / 97%);
  width: 100%; height: 100%; display: grid; grid-template-rows: 126px minmax(0, 1fr) 88px; gap: 8px;
  overflow: hidden; border: 2px solid #1d2027; border-radius: 28px; padding: 14px 18px 12px;
  background:
    radial-gradient(circle at 42% 5%, rgb(90 25 115 / 23%), transparent 31%),
    radial-gradient(circle at 89% 38%, rgb(28 42 97 / 17%), transparent 32%),
    linear-gradient(145deg, #03040a, #070713 52%, #020307);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 7%), inset 0 0 60px rgb(0 0 0 / 85%);
  color: #f4f1e9; font-family: "Segoe UI", sans-serif;
}
.lottery-shell button { font-family: inherit; }
.lottery-header { min-width: 0; display: grid; grid-template-columns: 54px 315px minmax(300px, 1fr) 275px 315px; gap: 10px; align-items: stretch; }
.lottery-back { align-self: center; width: 50px; min-height: 50px; border: 1px solid #8f671c; border-radius: 14px; background: #080a0e; color: var(--lottery-gold); font-size: 27px; }
.lottery-brand { min-width: 0; display: flex; align-items: center; gap: 3px; }
.lottery-brand img { width: 94px; height: 94px; object-fit: contain; filter: drop-shadow(0 0 14px rgb(246 178 44 / 22%)); }
.lottery-brand span { display: grid; margin-left: -7px; line-height: .9; }
.lottery-brand small { color: #fff; font-size: 20px; font-weight: 800; letter-spacing: .05em; }
.lottery-brand strong { background: linear-gradient(#fff0a4, #dc901d 66%, #8d4a0c); -webkit-background-clip: text; color: transparent; font: 900 36px/.95 Georgia, serif; text-shadow: 0 3px 14px rgb(238 159 35 / 18%); }
.lottery-brand strong { white-space: nowrap; }
.lottery-jackpot, .lottery-draw-summary, .lottery-sales { min-width: 0; display: grid; align-content: center; position: relative; border-left: 1px solid rgb(153 69 177 / 35%); padding: 9px 19px; }
.lottery-jackpot { grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; border: 1px solid rgb(177 82 205 / 51%); border-radius: 18px; background: linear-gradient(145deg, rgb(49 23 60 / 69%), rgb(9 8 18 / 92%)); text-align: center; }
.lottery-jackpot small { grid-column: 1 / -1; color: #f7d36c; font-size: 17px; font-weight: 800; }
.lottery-jackpot strong { align-self: center; background: linear-gradient(#fff1aa, #dfa62f); -webkit-background-clip: text; color: transparent; font: 900 clamp(34px, 4.6vw, 68px)/1 Georgia, serif; letter-spacing: .02em; }
.lottery-jackpot.safe-prize strong{min-width:0;max-width:100%;overflow:hidden;font-size:clamp(20px,2.2vw,30px);white-space:nowrap}
.lottery-jackpot > span { align-self: center; color: #f4c955; font-size: 36px; }
.lottery-jackpot em { grid-column: 1 / -1; color: #f1cb54; font-size: 13px; font-style: normal; font-weight: 700; }
.lottery-draw-summary strong, .lottery-sales > small { font-size: 18px; }
.lottery-draw-summary small, .lottery-sales > span { color: #d9d5d0; font-size: 12px; }
.lottery-draw-summary b, .lottery-sales b { color: #f4c75d; font: 800 31px/1.1 "Segoe UI", sans-serif; letter-spacing: .04em; }
.lottery-draw-summary span { color: #ddd9d1; font-size: 15px; }
.lottery-sales strong { color: #6dea29; font-size: 25px; }
.lottery-sales strong.closed { color: #ff5f64; }
.lottery-content { min-width: 0; min-height: 0; overflow: hidden; }
.lottery-panel { width: 100%; height: 100%; display: none; min-width: 0; min-height: 0; }
.lottery-panel.active { display: grid; }
.lottery-draw-panel { grid-template-columns: minmax(0, 1fr) 420px; gap: 10px; }
.lottery-picker { min-width: 0; min-height: 0; display: grid; grid-template-rows: 43% minmax(0, 1fr); gap: 8px; }
.lottery-slots-card, .lottery-deck-card, .lottery-purchase-card, .lottery-panel:not(.lottery-draw-panel) { border: 1px solid rgb(165 80 185 / 45%); border-radius: 14px; background: linear-gradient(145deg, rgb(17 12 29 / 94%), rgb(3 7 13 / 98%)); box-shadow: inset 0 1px rgb(255 255 255 / 4%); }
.lottery-slots-card, .lottery-deck-card { min-height: 0; display: grid; padding: 9px 12px; }
.lottery-slots-card { position: relative; grid-template-rows: 31px minmax(0, 1fr) 25px; overflow: hidden; }
.lottery-deck-card { grid-template-rows: 31px minmax(0, 1fr); }
.lottery-slots-card > header, .lottery-deck-card > header, .lottery-purchase-card > header { display: flex; align-items: center; gap: 7px; color: #f1ede9; font-size: 15px; font-weight: 850; }
.lottery-slots-card > header b, .lottery-deck-card > header b, .lottery-purchase-card > header b { color: #dbb4ed; }
.lottery-slots-card > header button { margin-left: auto; min-height: 26px; border-color: rgb(213 173 84 / 45%); padding: 4px 9px; background: #0a0b11; color: #c9a95d; font-size: 9px; }
.lottery-slots-card > p { width: 76%; margin: 2px 0 0; text-align: center; font-size: 12px; }
.lottery-slots-card > p strong { color: #f2c85b; }
.lottery-slots { z-index: 1; width: 76%; min-height: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; }
.lottery-joker-art { position: absolute; z-index: 0; right: 1.3%; bottom: -2%; width: 22%; height: 89%; object-fit: contain; filter: drop-shadow(0 0 18px rgb(151 51 184 / 30%)); opacity: .96; pointer-events: none; }
.lottery-joker-art { mix-blend-mode: screen; }
.lottery-slots > button { min-width: 0; min-height: 0; position: relative; display: grid; place-items: center; border: 1px dashed #875397; border-radius: 11px; padding: 4px; background: rgb(21 11 31 / 55%); }
.lottery-slots > button > small { position: absolute; left: -1px; top: -1px; z-index: 2; width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid #9d63ac; border-radius: 50%; background: #3f1553; color: white; }
.lottery-slots > button.empty > span { color: rgb(113 67 124 / 28%); font: 700 46px/1 Georgia, serif; }
.lottery-playing-card { position: relative; width: min(80px, 88%); aspect-ratio: .7; display: grid; place-items: center; border: 1px solid #d7d0be; border-radius: 7px; background: linear-gradient(145deg, #fffefa, #e6e1d7); box-shadow: 0 5px 12px rgb(0 0 0 / 34%); color: #121212; }
.lottery-playing-card.red { color: #c52c25; }
.lottery-playing-card b { position: absolute; left: 6px; top: 4px; font-size: 17px; }
.lottery-playing-card i { font-size: 29px; font-style: normal; }
.lottery-playing-card img { width: 100%; height: 100%; display: block; border-radius: inherit; object-fit: fill; }
.lottery-playing-card.matched { border-color: #ffdd62; box-shadow: 0 0 0 2px #d9a91b, 0 0 22px rgb(255 216 79 / 72%); animation: lottery-match-pulse 1.6s ease-in-out infinite; }
.lottery-deck { min-height: 0; display: grid; grid-template-columns: minmax(42px, .62fr) repeat(9, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 5px 7px; }
.lottery-suit-label { min-width: 0; min-height: 0; display: grid; place-items: center; border: 1px solid #7e5e22; border-radius: 7px; background: linear-gradient(#15131a, #08090d); color: #e4b954; font-size: clamp(23px, 2vw, 34px); }
.lottery-suit-label.red { color: #d9493d; }
.lottery-deck > button { min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid #bfb8aa; border-radius: 7px; padding: 2px; background: linear-gradient(#fff, #e8e3da); color: #161616; font-size: 20px; box-shadow: 0 2px 5px rgb(0 0 0 / 45%); }
.lottery-deck > button img { width: 100%; height: 100%; display: block; border-radius: 5px; object-fit: fill; }
.lottery-deck > button.red { color: #bb3029; }
.lottery-deck > button i { font-size: 21px; font-style: normal; }
.lottery-deck > button.selected { border-color: #f2c650; box-shadow: 0 0 0 2px #8e5c0c, 0 0 17px rgb(244 196 65 / 58%); transform: translateY(-2px); }
.lottery-purchase-card { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 34px 68px 58px auto auto auto 1fr; gap: 7px 9px; padding: 10px 13px; }
.lottery-purchase-card > header { grid-column: 1 / -1; }
.lottery-quantity { grid-column: 1 / -1; display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; border-bottom: 1px solid rgb(255 255 255 / 8%); padding-bottom: 7px; }
.lottery-quantity button { min-height: 47px; border: 1px solid #9a6919; border-radius: 9px; background: #0b0b11; color: #e5ba4f; font-size: 27px; }
.lottery-quantity strong { text-align: center; font-size: 34px; font-weight: 400; }
.lottery-autopick { min-height: 50px; border: 1px solid #8f639b; background: linear-gradient(#5a3e6b, #24172f); color: #fff; font-weight: 800; }
.lottery-packages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.lottery-packages span { grid-column: 1 / -1; font-size: 10px; }
.lottery-packages button { min-height: 28px; border: 1px solid #795d20; background: #0a0910; color: #d8d0cb; padding: 3px; }
.lottery-price, .lottery-total { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; align-items: center; border: 1px solid rgb(255 255 255 / 15%); border-radius: 10px; padding: 9px 11px; background: rgb(0 0 0 / 27%); }
.lottery-price > span, .lottery-total > span { color: #ddd6cd; font-size: 13px; }
.lottery-price > strong { color: #f2c95e; font-size: 25px; }
.lottery-price > small { grid-column: 1 / -1; color: #d1c5b4; font-size: 11px; }
.lottery-total > span { color: #e4bd54; font-weight: 800; }
.lottery-total > strong { color: #f3c65b; font-size: 31px; }
.lottery-total > strong small { color: #d7d0c7; font-size: 16px; font-weight: 400; }
.lottery-total > em { grid-column: 1 / -1; color: #817e82; font-size: 11px; font-style: normal; }
.lottery-buy { grid-column: 1 / -1; min-height: 70px; display: grid; place-items: center; border: 1px solid #55d535; border-radius: 12px; background: linear-gradient(#35aa43, #08771e); box-shadow: inset 0 1px rgb(255 255 255 / 23%), 0 0 22px rgb(27 174 54 / 15%); color: #fff; font-size: 23px; font-weight: 900; text-shadow: 0 2px 3px #064e14; }
.lottery-buy small { display: block; font-size: 14px; }
.lottery-buy:disabled { border-color: #4c5150; background: linear-gradient(#38423e, #1e2522); color: #929995; text-shadow: none; }
.lottery-limit { grid-column: 1 / -1; margin: 0; color: #bbb5ad; font-size: 12px; text-align: center; }
.lottery-message { grid-column: 1 / -1; align-self: end; min-height: 18px; margin: 0; color: #e0ba56; font-size: 11px; text-align: center; }
.lottery-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid #20222c; border-radius: 15px; overflow: hidden; background: #070810; }
.lottery-tabs button { min-width: 0; display: grid; grid-template-columns: 54px 1fr; grid-template-rows: 1fr 1fr; align-items: center; border: 0; border-right: 1px solid #24242c; border-radius: 0; padding: 11px 22px; background: transparent; color: #eee9df; text-align: left; }
.lottery-tabs button > span { grid-row: 1 / 3; color: #969297; font-size: 34px; text-align: center; }
.lottery-tabs button strong { font-size: 18px; }
.lottery-tabs button small { color: #b7b0aa; font-size: 12px; }
.lottery-tabs button.active { background: linear-gradient(135deg, #71329a, #332048); box-shadow: inset 0 0 0 1px #a658cc; }
.lottery-tabs button.active > span { color: #fff; }
.lottery-panel:not(.lottery-draw-panel) { min-height: 0; grid-template-rows: auto minmax(0, 1fr); gap: 13px; overflow: hidden; padding: 20px; }
.lottery-page-heading { display: flex; justify-content: space-between; align-items: end; border-bottom: 1px solid rgb(238 198 91 / 22%); padding-bottom: 14px; }
.lottery-page-heading span { color: #9e73af; font-size: 12px; text-transform: uppercase; }
.lottery-page-heading h2 { margin: 3px 0 0; color: #f4ce67; font: 800 30px/1 Georgia, serif; }
.lottery-ticket-list, .lottery-history-list { min-height: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); align-content: start; gap: 12px; overflow-y: auto; padding-right: 5px; }
.lottery-ticket { display: grid; gap: 10px; border: 1px solid rgb(205 159 58 / 32%); border-radius: 13px; padding: 13px; background: rgb(6 9 15 / 86%); }
.lottery-ticket header, .lottery-ticket footer { display: flex; justify-content: space-between; gap: 10px; }
.lottery-ticket header strong { color: #eec95e; }
.lottery-ticket header span { color: #8cd569; }
.lottery-ticket > div { display: flex; gap: 7px; }
.lottery-ticket .lottery-playing-card { width: 55px; }
.lottery-ticket footer { color: #8d929a; }
.lottery-ticket footer b { color: #e2bd58; }
.lottery-empty { min-height: 150px; display: grid; place-items: center; align-content: center; gap: 7px; color: #85818b; text-align: center; }
.lottery-empty > span { color: #735383; font-size: 44px; }
.lottery-empty strong { color: #d5cdd6; font-size: 18px; }
.lottery-empty p { margin: 0; }
.lottery-rules-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-content: start; }
.lottery-rules-grid article { position: relative; border: 1px solid rgb(150 87 169 / 29%); border-radius: 13px; padding: 16px 16px 16px 53px; background: rgb(17 10 26 / 67%); }
.lottery-rules-grid article > b { position: absolute; left: 13px; top: 15px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #5d2776; color: #f3d56f; }
.lottery-rules-grid h3 { margin: 0 0 7px; color: #f0cb68; }
.lottery-rules-grid p { margin: 0; color: #aaa4ab; line-height: 1.45; }
.lottery-prize-table { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; align-self: end; }
.lottery-prize-table span { display: grid; place-items: center; gap: 5px; border: 1px solid #80622c; border-radius: 10px; padding: 14px; color: #bcb5ac; }
.lottery-prize-table b { color: #f2cb62; font-size: 19px; }
.lottery-orientation-note { display: none; }
.lottery-live-stage { position: fixed; z-index: 1200; inset: 0; display: grid; place-items: center; align-content: center; gap: 17px; overflow: hidden; background: radial-gradient(circle, rgb(62 21 83 / 72%), #03030a 72%); }
.lottery-live-stage.hidden { display: none; }
.lottery-live-shade { position: absolute; inset: 0; background: radial-gradient(circle at 50% 20%, rgb(236 184 62 / 8%), transparent 36%); pointer-events: none; }
.lottery-live-brand { display: flex; align-items: center; color: #f3c85d; font: 800 23px/1 Georgia, serif; }
.lottery-live-brand img { width: 72px; height: 72px; object-fit: contain; }
.lottery-live-stage h2 { z-index: 1; margin: 0; color: #ffd96e; font: 900 clamp(32px, 5vw, 68px)/1 Georgia, serif; text-shadow: 0 0 25px rgb(255 206 77 / 31%); }
.lottery-live-stage p { z-index: 1; color: #d9cadf; font-size: 17px; }
.lottery-live-cards { z-index: 1; display: flex; gap: 13px; }
.lottery-reveal-card { animation: lottery-card-reveal .65s cubic-bezier(.2,.8,.2,1) both; }
.lottery-reveal-card .lottery-playing-card { width: clamp(70px, 8vw, 126px); }
.lottery-skip { position: absolute; z-index: 2; right: 20px; top: 18px; border: 1px solid #8b6c2d; background: #0c0b12; color: #d4ba72; }
@keyframes lottery-card-reveal { from { opacity: 0; transform: translate(120px,-100px) rotateY(180deg) rotate(18deg) scale(.7); } to { opacity: 1; transform: none; } }
@keyframes lottery-match-pulse { 50% { filter: brightness(1.25); transform: translateY(-2px); } }

/* Admin shell: independent full-screen workspace with one page per sidebar destination. */
body.admin-view-active { overflow: hidden; }
body.admin-view-active .app { width: 100%; max-width: none; height: 100dvh; min-height: 0; padding: 0; }
body.admin-view-active .topbar,
body.admin-view-active .mobile-dock { display: none !important; }
.admin-view.app-panel-view:not(.hidden) { width: 100%; height: 100dvh; min-height: 0; grid-template-columns: 238px minmax(0, 1fr); grid-template-rows: 78px minmax(0, 1fr); gap: 0; margin: 0; border: 0; border-radius: 0; background: #02070c; }
.admin-global-header { grid-column: 1 / -1; grid-row: 1; min-width: 0; display: grid; grid-template-columns: 360px minmax(300px, 1fr) 420px; align-items: center; gap: 15px; border-bottom: 1px solid rgb(188 126 21 / 48%); padding: 7px 17px; background: linear-gradient(180deg, #030504, #010302); box-shadow: 0 7px 25px rgb(0 0 0 / 45%); color: #e9bd44; }
.admin-global-title { min-width: 0; display: flex; align-items: center; gap: 15px; }
.admin-global-title > span { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid #a6791e; border-radius: 10px; color: #e9b944; font-size: 24px; }
.admin-global-title > strong { font: 800 25px/1 Georgia, serif; letter-spacing: .025em; white-space: nowrap; }
.admin-global-title > b { font-size: 25px; }
.admin-global-brand { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 9px; color: #e3b63f; font: 800 clamp(21px, 2.2vw, 35px)/1 Georgia, serif; letter-spacing: .04em; text-shadow: 0 0 14px rgb(213 153 37 / 22%); }
.admin-global-brand img { width: 62px; height: 62px; object-fit: contain; }
.admin-global-tools { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.admin-global-tools > time { display: grid; border: 1px solid #72561b; border-radius: 9px; padding: 7px 13px; color: #d9d4c9; font-size: 10px; text-align: center; }
.admin-global-tools > time span { color: #a6997d; }
.admin-global-role { display: flex; align-items: center; gap: 8px; border: 1px solid #72561b; border-radius: 9px; padding: 5px 13px 5px 7px; color: #ddd6c9; font-size: 9px; }
.admin-global-role img { width: 40px; height: 40px; object-fit: contain; }
.admin-global-role span { display: grid; gap: 2px; }
.admin-global-role strong { color: #e9ba42; font-size: 11px; }
.admin-view > .app-view-rail { grid-column: 1; grid-row: 2; height: 100%; min-height: 0; border: 0; border-right: 1px solid rgb(102 80 31 / 40%); border-radius: 0; padding: 12px 10px; background: linear-gradient(180deg, #03090d, #010609); }
.admin-view > .app-view-rail .app-view-rail-heading { display: none; }
.admin-view > .app-view-rail nav { min-height: 0; align-content: start; }
.admin-view > .app-view-rail nav button { border-color: transparent; background: transparent; color: #bdc2c4; }
.admin-view > .app-view-rail nav button:hover { border-color: rgb(179 129 33 / 27%); background: rgb(76 56 19 / 15%); }
.admin-view > .app-view-rail nav button.selected { border-color: #8c4ba3; background: linear-gradient(90deg, #59277b, #22152f); box-shadow: inset 3px 0 #d357e7, 0 0 18px rgb(123 39 146 / 17%); }
.admin-view > .app-view-rail nav > button:not(.selected) { border-color: transparent !important; background: transparent !important; box-shadow: none !important; }
.admin-view > .app-view-rail nav > button.selected { border-color: #8c4ba3 !important; background: linear-gradient(90deg, #59277b, #22152f) !important; }
.admin-view > .app-view-stage { grid-column: 2; grid-row: 2; height: 100%; min-height: 0; border: 0; border-radius: 0; padding: 10px 12px; background: radial-gradient(circle at 70% 0, rgb(19 45 78 / 17%), transparent 35%), #02090f; }
.admin-view .app-view-stage-admin { grid-template-rows: minmax(0, 1fr); }
.admin-view .app-view-persistent { display: none; }
.admin-view .admin-hero-panel { display: none; }
.admin-view .app-view-page { grid-row: 1; min-height: 0; overflow: auto; }
.admin-view .app-view-page:not(.panel-page-active) { display: none !important; }
.admin-view .app-view-page.panel-page-active { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; align-content: start; }
.admin-view .app-view-page[data-panel-page="overview"].panel-page-active { grid-template-rows: minmax(0, 1fr); align-content: stretch; }
.admin-view .app-view-page[data-panel-page="overview"] > .admin-dashboard-section { height: 100%; }
.admin-view .app-view-page.panel-page-active > .box,
.admin-view .app-view-page.panel-page-active > .split { width: 100%; min-width: 0; margin: 0; }
.admin-view [data-panel-page="system"] > #adminGameSettingsGroup,
.admin-view [data-panel-page="system"] > #adminAuthSection,
.admin-view [data-panel-page="system"] > #adminMusicSettingsSection,
.admin-view [data-panel-page="system"] > #adminVideoSection { display: none !important; }
.admin-dashboard-section { min-height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; color: #dce7f1; }
.admin-dashboard-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.admin-dashboard-metrics article { min-width: 0; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 9px; border: 1px solid rgb(44 110 151 / 27%); border-radius: 8px; padding: 11px 12px; background: linear-gradient(145deg, #071725, #040f19); box-shadow: inset 0 1px rgb(255 255 255 / 3%); }
.admin-dashboard-metrics article > span { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgb(197 44 164 / 36%); border-radius: 8px; background: rgb(107 26 99 / 18%); color: #d54abb; font-size: 21px; }
.admin-dashboard-metrics article > div { min-width: 0; display: grid; }
.admin-dashboard-metrics small { overflow: hidden; color: #71869a; font-size: 8px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.admin-dashboard-metrics strong { overflow: hidden; color: #f0f5f9; font-size: clamp(17px, 1.45vw, 25px); line-height: 1.15; text-overflow: ellipsis; }
.admin-dashboard-metrics em { overflow: hidden; color: #42be79; font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.admin-dashboard-grid { min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(190px, 1fr)); gap: 10px; }
.admin-dashboard-card { min-width: 0; min-height: 0; overflow: hidden; border: 1px solid rgb(43 105 145 / 27%); border-radius: 9px; padding: 14px; background: linear-gradient(145deg, rgb(7 23 36 / 96%), rgb(3 13 22 / 98%)); box-shadow: inset 0 1px rgb(255 255 255 / 3%); }
.admin-dashboard-card > header { min-height: 35px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid rgb(47 103 138 / 22%); margin-bottom: 11px; padding-bottom: 10px; }
.admin-dashboard-card > header > div { display: flex; align-items: center; gap: 8px; }
.admin-dashboard-card > header strong { color: #edf3f8; font-size: 12px; }
.admin-dashboard-card > header small { color: #677e92; font-size: 8px; }
.admin-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #40cf6a; box-shadow: 0 0 12px #40cf6a; }
.admin-system-score { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 15px; border-bottom: 1px solid rgb(45 99 134 / 20%); padding: 8px 4px 17px; }
.admin-system-score > b { color: #4fe080; font-size: clamp(36px, 4vw, 60px); font-weight: 500; line-height: 1; }
.admin-system-score > span { display: grid; gap: 3px; }
.admin-system-score strong { color: #dfeaf2; font-size: 14px; }
.admin-system-score small { color: #687f93; font-size: 9px; }
.admin-system-lines { display: grid; gap: 7px; padding-top: 13px; }
.admin-system-lines span { display: flex; justify-content: space-between; gap: 10px; color: #72889a; font-size: 9px; }
.admin-system-lines b { color: #52c984; font-weight: 700; }
.admin-quick-grid { height: calc(100% - 47px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.admin-quick-grid button { min-width: 0; display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: 1fr 1fr; align-items: center; gap: 0 8px; border: 1px solid rgb(46 111 151 / 24%); border-radius: 7px; padding: 9px; background: #061521; color: #d9e4ee; text-align: left; }
.admin-quick-grid button:hover { border-color: rgb(198 43 164 / 52%); background: #0b1c2a; }
.admin-quick-grid button > span { grid-row: 1 / 3; color: #c945ad; font-size: 23px; text-align: center; }
.admin-quick-grid button strong { align-self: end; font-size: 10px; }
.admin-quick-grid button small { align-self: start; color: #6f8496; font-size: 8px; }
.admin-dashboard-feed > header button { min-height: 27px; padding: 3px 9px; font-size: 8px; }
.admin-dashboard-feed > div { display: grid; grid-template-columns: 1fr; gap: 7px; }
.admin-dashboard-feed p { min-width: 0; display: grid; grid-template-columns: 31px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: 2px 8px; margin: 0; border: 1px solid rgb(42 96 131 / 20%); border-radius: 7px; padding: 10px; background: rgb(3 13 22 / 65%); }
.admin-feed-icon { grid-row: 1 / 3; width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; background: rgb(41 136 88 / 20%); color: #52d489; }
.admin-dashboard-feed b { overflow: hidden; color: #d8e3ec; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.admin-dashboard-feed small { overflow: hidden; color: #6d8395; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.admin-domain-card { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.admin-domain-card > header button { min-height: 27px; padding: 3px 9px; font-size: 8px; }
.admin-domain-card > div { display: grid; grid-template-columns: 80px minmax(0, 1fr); grid-template-rows: 1fr auto; align-items: center; gap: 2px 13px; }
.admin-domain-symbol { grid-row: 1 / 3; width: 78px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; background: rgb(213 46 179 / 10%); color: #d54bb6; font-size: 43px; }
.admin-domain-symbol.tournament { color: #e6ad37; }
.admin-domain-symbol.clubs { color: #4bc1eb; }
.admin-domain-symbol.moderation { color: #ef4c55; font-weight: 900; }
.admin-domain-card > div > b { align-self: end; color: #f0f5f8; font-size: clamp(30px, 3vw, 48px); font-weight: 500; line-height: 1; }
.admin-domain-card > div > small { align-self: start; color: #74899b; font-size: 9px; }
.admin-domain-card > p { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid rgb(47 103 138 / 20%); margin: 10px 0 0; padding-top: 10px; color: #718698; font-size: 9px; }
.admin-domain-card > p strong { color: #d8e5ed; }
.admin-domain-placeholder { min-height: 300px; display: grid; place-items: center; align-content: center; gap: 9px; border: 1px dashed rgb(57 119 157 / 35%); border-radius: 9px; background: rgb(3 14 23 / 48%); color: #748a9d; text-align: center; }
.admin-domain-placeholder > span { color: #c844ac; font-size: 48px; }
.admin-domain-placeholder strong { color: #e0eaf1; font-size: 17px; }
.admin-domain-placeholder strong b { color: #e4c568; }
.admin-domain-placeholder p { max-width: 600px; margin: 0; font-size: 11px; line-height: 1.55; }
.admin-domain-navigation { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 7px; scrollbar-width: thin; }
.admin-domain-navigation button { flex: 0 0 auto; min-height: 34px; border-color: rgb(41 126 177 / 27%); background: #06131f; color: #8296aa; font-size: 10px; white-space: nowrap; }
.admin-domain-navigation button.active { border-color: #c0299e; background: linear-gradient(#582253, #25152e); color: #fff; }
.admin-lottery-section { display: grid; gap: 10px; }
.admin-lottery-content { display: none; gap: 10px; }
.admin-lottery-content.active { display: grid; }
.admin-lottery-metrics { display: grid; grid-template-columns: repeat(6, minmax(125px, 1fr)); gap: 8px; }
.admin-lottery-metrics article { display: grid; gap: 5px; border: 1px solid rgb(43 116 157 / 27%); border-radius: 8px; padding: 12px; background: linear-gradient(145deg, #081a29, #04101a); }
.admin-lottery-metrics small { color: #7f91a4; }
.admin-lottery-metrics strong { color: #e8c862; font-size: 19px; }
.admin-lottery-dashboard { display: grid; grid-template-columns: 1.35fr .65fr; gap: 9px; }
.admin-lottery-dashboard > article { border: 1px solid rgb(43 116 157 / 24%); border-radius: 8px; padding: 13px; background: #05131f; }
.admin-lottery-dashboard > article > header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgb(44 104 142 / 21%); margin-bottom: 10px; padding-bottom: 9px; }
.admin-lottery-dashboard h3 { margin: 0; }
.admin-lottery-draw-card dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; margin: 0; }
.admin-lottery-draw-card dl > div { display: flex; justify-content: space-between; gap: 10px; border: 1px solid rgb(49 103 138 / 18%); border-radius: 6px; padding: 8px; }
.admin-lottery-draw-card dt { color: #71869a; }
.admin-lottery-draw-card dd { margin: 0; color: #dfeaf4; }
.admin-lottery-actions { display: grid; gap: 8px; }
.lottery-config-form { display: grid; gap: 12px; }
.lottery-config-grid { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: 10px; }
.lottery-config-wide { grid-column: 1 / -1; }
.admin-lottery-table { display: grid; border: 1px solid rgb(47 110 150 / 25%); border-radius: 8px; overflow: hidden; }
.admin-lottery-row { min-width: 840px; display: grid; grid-template-columns: .5fr .8fr 1.4fr 1fr .6fr; gap: 8px; align-items: center; border: 0; border-bottom: 1px solid rgb(47 110 150 / 18%); border-radius: 0; padding: 9px 12px; background: #06131f; color: #c8d4df; text-align: left; }
.admin-lottery-row-head { background: #0a1d2d; color: #718ba1; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.lottery-verification-card { display: grid; gap: 11px; border: 1px solid rgb(49 122 164 / 30%); border-radius: 9px; padding: 17px; background: #061521; }
.lottery-verification-card.valid { border-color: rgb(73 190 93 / 50%); }
.lottery-verification-card.invalid { border-color: rgb(237 67 86 / 50%); }
.lottery-verification-card code { overflow-wrap: anywhere; color: #d8c36c; }

@media (max-width: 1099px), (max-height: 650px) and (orientation: landscape) {
  .lottery-desktop-layout { display: none; }
  .lottery-mobile-layout { display: block; }
  .lottery-shell { grid-template-rows: 58px minmax(0, 1fr) 47px; gap: 4px; border-width: 1px; border-radius: 8px; padding: 4px; }
  .lottery-header { grid-template-columns: 32px 135px minmax(150px, 1fr) 135px 145px; gap: 4px; }
  .lottery-back { width: 30px; min-height: 30px; border-radius: 7px; font-size: 15px; padding: 2px; }
  .lottery-brand { gap: 0; }
  .lottery-brand img { width: 48px; height: 48px; }
  .lottery-brand span { margin-left: -4px; }
  .lottery-brand small { font-size: 8px; }
  .lottery-brand strong { font-size: 15px; }
  .lottery-jackpot, .lottery-draw-summary, .lottery-sales { padding: 3px 7px; }
  .lottery-jackpot { border-radius: 7px; }
  .lottery-jackpot small { font-size: 7px; }
  .lottery-jackpot strong { font-size: clamp(18px, 4vw, 29px); }
  .lottery-jackpot > span { font-size: 15px; }
  .lottery-jackpot em { font-size: 6px; }
  .lottery-draw-summary strong, .lottery-sales > small { font-size: 8px; }
  .lottery-draw-summary small, .lottery-sales > span { font-size: 6px; }
  .lottery-draw-summary b, .lottery-sales b { font-size: 15px; }
  .lottery-draw-summary span { font-size: 7px; }
  .lottery-sales strong { font-size: 12px; }
  .lottery-draw-panel { grid-template-columns: minmax(0, 1fr) 189px; gap: 4px; }
  .lottery-picker { grid-template-rows: 40% minmax(0, 1fr); gap: 4px; }
  .lottery-slots-card, .lottery-deck-card { border-radius: 6px; padding: 3px 5px; }
  .lottery-slots-card { grid-template-rows: 18px minmax(0, 1fr) 14px; }
  .lottery-deck-card { grid-template-rows: 18px minmax(0, 1fr); }
  .lottery-slots-card > header, .lottery-deck-card > header, .lottery-purchase-card > header { gap: 3px; font-size: 7px; }
  .lottery-slots-card > header button { min-height: 14px; padding: 1px 4px; font-size: 5px; }
  .lottery-slots-card > p { font-size: 6px; }
  .lottery-slots { gap: 4px; }
  .lottery-slots, .lottery-slots-card > p { width: 78%; }
  .lottery-joker-art { right: .5%; width: 21%; height: 84%; }
  .lottery-slots > button { border-radius: 5px; padding: 2px; }
  .lottery-slots > button > small { width: 13px; height: 13px; font-size: 6px; }
  .lottery-slots > button.empty > span { font-size: 20px; }
  .lottery-playing-card { width: min(40px, 88%); border-radius: 3px; }
  .lottery-playing-card b { left: 2px; top: 1px; font-size: 8px; }
  .lottery-playing-card i { font-size: 13px; }
  .lottery-deck { grid-template-columns: minmax(18px, .6fr) repeat(9, minmax(0, 1fr)); gap: 2px 3px; }
  .lottery-suit-label { border-radius: 3px; font-size: 13px; }
  .lottery-deck > button { gap: 2px; border-radius: 3px; padding: 0; font-size: 10px; }
  .lottery-deck > button i { font-size: 10px; }
  .lottery-deck > button.selected { box-shadow: 0 0 0 1px #8e5c0c, 0 0 7px rgb(244 196 65 / 58%); transform: translateY(-1px); }
  .lottery-purchase-card { grid-template-rows: 18px 37px 31px auto auto auto 1fr; gap: 3px 4px; border-radius: 6px; padding: 3px 5px; }
  .lottery-quantity { grid-template-columns: 28px 1fr 28px; padding-bottom: 3px; }
  .lottery-quantity button { min-height: 27px; border-radius: 4px; padding: 1px; font-size: 14px; }
  .lottery-quantity strong { font-size: 17px; }
  .lottery-autopick { min-height: 27px; padding: 2px; font-size: 7px; }
  .lottery-packages { gap: 2px; }
  .lottery-packages span { font-size: 5px; }
  .lottery-packages button { min-height: 15px; padding: 0; font-size: 7px; }
  .lottery-price, .lottery-total { border-radius: 4px; padding: 3px 5px; }
  .lottery-price > span, .lottery-total > span { font-size: 6px; }
  .lottery-price > strong { font-size: 13px; }
  .lottery-price > small { font-size: 5px; }
  .lottery-total > strong { font-size: 15px; }
  .lottery-total > strong small { font-size: 7px; }
  .lottery-total > em { font-size: 5px; }
  .lottery-buy { min-height: 35px; border-radius: 5px; padding: 2px; font-size: 11px; }
  .lottery-buy small { font-size: 7px; }
  .lottery-limit, .lottery-message { font-size: 5px; }
  .lottery-tabs { border-radius: 6px; }
  .lottery-tabs button { grid-template-columns: 24px 1fr; padding: 3px 7px; }
  .lottery-tabs button > span { font-size: 17px; }
  .lottery-tabs button strong { font-size: 8px; }
  .lottery-tabs button small { font-size: 6px; }
  .lottery-panel:not(.lottery-draw-panel) { gap: 5px; border-radius: 6px; padding: 7px; }
  .lottery-page-heading { padding-bottom: 5px; }
  .lottery-page-heading span { font-size: 6px; }
  .lottery-page-heading h2 { font-size: 16px; }
  .lottery-ticket-list, .lottery-history-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .lottery-ticket { gap: 4px; border-radius: 5px; padding: 5px; font-size: 6px; }
  .lottery-ticket .lottery-playing-card { width: 25px; }
  .lottery-rules-grid { grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .lottery-rules-grid article { border-radius: 5px; padding: 6px 5px 5px 21px; }
  .lottery-rules-grid article > b { left: 4px; top: 5px; width: 13px; height: 13px; font-size: 6px; }
  .lottery-rules-grid h3 { margin-bottom: 2px; font-size: 8px; }
  .lottery-rules-grid p { font-size: 6px; }
  .lottery-prize-table { gap: 3px; }
  .lottery-prize-table span { gap: 1px; border-radius: 4px; padding: 4px; font-size: 6px; }
  .lottery-prize-table b { font-size: 8px; }
  .admin-lottery-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-lottery-dashboard { grid-template-columns: 1fr; }
}

@media (orientation: portrait) and (max-width: 720px) {
  .lottery-layout { display: none !important; }
  .lottery-orientation-note { width: 100%; height: 100%; display: grid; place-items: center; align-content: center; gap: 13px; padding: 24px; background: radial-gradient(circle, #321540, #03050a 67%); color: #ddd6df; text-align: center; }
  .lottery-orientation-note img { width: 120px; height: 120px; object-fit: contain; }
  .lottery-orientation-note strong { color: #f0c861; font: 800 28px/1 Georgia, serif; }
  .lottery-orientation-note span { max-width: 310px; color: #aaa1ad; }
}

@media (max-height: 600px) and (orientation: landscape) {
  .admin-view.app-panel-view:not(.hidden) { grid-template-columns: 168px minmax(0, 1fr) !important; grid-template-rows: 46px minmax(0, 1fr) !important; gap: 0; }
  .admin-global-header { grid-template-columns: 190px minmax(180px, 1fr) 190px; gap: 5px; padding: 3px 7px; }
  .admin-global-title { gap: 6px; }
  .admin-global-title > span { width: 31px; height: 31px; border-radius: 6px; font-size: 14px; }
  .admin-global-title > strong { font-size: 14px; }
  .admin-global-title > b { font-size: 15px; }
  .admin-global-brand { gap: 3px; font-size: 14px; }
  .admin-global-brand img { width: 36px; height: 36px; }
  .admin-global-tools { gap: 5px; }
  .admin-global-tools > time { border-radius: 5px; padding: 3px 6px; font-size: 6px; }
  .admin-global-role { gap: 3px; border-radius: 5px; padding: 2px 5px; font-size: 5px; }
  .admin-global-role img { width: 26px; height: 26px; }
  .admin-global-role strong { font-size: 7px; }
  .admin-view > .app-view-rail { padding: 5px; }
  .admin-view .app-view-stage-admin { grid-template-rows: minmax(0, 1fr); }
  .admin-view .admin-hero-panel { height: 54px; min-height: 54px; padding: 5px 9px; }
  .admin-view .admin-hero-panel h2 { font-size: 17px; }
  .admin-view .app-view-rail nav button { min-height: 28px; }
  .admin-lottery-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lottery-config-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-height: 600px) and (orientation: landscape) {
  .community-chat-workspace:not(.hidden) { height: auto; min-height: 0; flex: 1 1 auto; grid-template-columns: 140px minmax(0, 1fr) 190px; gap: 6px; }
  .community-chat-channels, .community-chat-player { padding: 6px; }
  .chat-channel-heading { min-height: 34px; }
  #communityChatChannels button { min-height: 40px; grid-template-columns: 24px minmax(0, 1fr); padding: 5px; }
  #communityChatChannels button > span { font-size: 16px; }
  .community-chat-header { min-height: 43px; padding: 5px 9px; }
  .community-chat-header h2 { font-size: 17px; }
  .community-chat-message { grid-template-columns: 31px minmax(0, 1fr) 29px; gap: 5px; padding: 5px; }
  .chat-message-avatar { width: 29px; height: 29px; }
  .chat-message-body > p { font-size: 8px; }
  .chat-message-body header strong { font-size: 9px; }
  .community-chat-composer { min-height: 43px; grid-template-columns: 32px 32px minmax(0, 1fr) auto auto; gap: 4px; padding: 5px; }
  .community-chat-composer > button { min-width: 31px; min-height: 31px; padding: 3px; }
  .community-chat-composer input { min-height: 33px; }
  .chat-player-empty { min-height: 150px; }
  .chat-player-card, .chat-player-actions { padding: 7px; }
  .chat-player-avatar { width: 48px; height: 48px; }
  .chat-player-actions button { min-height: 31px; padding: 5px; font-size: 8px; }
}

/* Fortune: isolated mobile landscape preview. No live round controls are enabled here. */
.fortune-preview-card { border-color: rgb(219 165 48 / 44%); background: linear-gradient(145deg, rgb(55 20 71 / 92%), rgb(20 7 28 / 96%)); }
.fortune-preview-joker, .fortune-preview-shell { position: absolute; display: grid; place-items: center; border: 1px solid #e0aa3e; color: #ffdd70; font-weight: 1000; }
.fortune-preview-joker { inset: 13px auto 13px 24px; width: 58px; border-radius: 10px; background: #3d0d5b; font-size: 34px; transform: rotate(-8deg); }
.fortune-preview-shell { right: 24px; bottom: 18px; width: 38px; height: 38px; border-radius: 50%; background: #17110a; }
body.fortune-view-active { height: 100vh; height: 100dvh; overflow: hidden; background: #020104; }
.fortune-view-active .app { width: 100%; height: 100vh; height: 100dvh; max-width: none; padding: 0; }
.fortune-view-active .topbar, .fortune-view-active .mobile-dock { display: none !important; }
.fortune-mobile-view:not(.hidden) { width: 100%; height: 100%; min-height: 0; overflow: hidden; margin: 0; }
.fortune-orientation-note { display: none; }
.fortune-mobile-stage {
  --fortune-gold: #f2bd45;
  width: 100%; height: 100%; display: grid;
  grid-template-rows: clamp(55px, 11vh, 92px) minmax(0, 1fr) clamp(43px, 9vh, 76px);
  gap: clamp(4px, .7vw, 10px); padding: clamp(5px, .8vw, 13px); color: #fff5cf;
  background: radial-gradient(circle at 52% 16%, rgb(105 32 118 / 32%), transparent 32%), radial-gradient(circle at 18% 58%, rgb(129 66 15 / 22%), transparent 34%), linear-gradient(145deg, #070309, #120719 48%, #040205);
  font-family: Georgia, "Times New Roman", serif;
}
.fortune-mobile-stage button { min-width: 0; min-height: 0; border: 1px solid rgb(242 189 69 / 68%); border-radius: clamp(7px, .8vw, 13px); padding: clamp(4px, .55vw, 9px); background: linear-gradient(155deg, #1b1021, #08050b); box-shadow: inset 0 0 0 1px rgb(255 225 126 / 8%), 0 0 15px rgb(213 137 28 / 9%); color: #ffe27d; font: inherit; }
.fortune-mobile-stage button:disabled { opacity: .66; cursor: not-allowed; filter: saturate(.72); }
.fortune-topbar { min-width: 0; display: grid; grid-template-columns: clamp(45px, 5vw, 72px) clamp(120px, 18vw, 270px) minmax(150px, 1fr) auto; align-items: stretch; gap: clamp(4px, .7vw, 10px); }
.fortune-icon-button { display: grid; place-items: center; font-size: clamp(20px, 2.5vw, 38px) !important; }
.fortune-wallet { min-width: 0; display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; align-items: center; gap: 0 clamp(5px, .7vw, 11px); border: 1px solid rgb(242 189 69 / 68%); border-radius: clamp(7px, .8vw, 13px); padding: clamp(5px, .8vw, 12px); background: linear-gradient(145deg, #21151b, #090509); }
.fortune-wallet > span { grid-row: 1 / 3; display: grid; place-items: center; width: clamp(28px, 3.3vw, 48px); aspect-ratio: 1; border-radius: 50%; background: #6b4310; color: #ffd863; font-size: clamp(15px, 2vw, 28px); }
.fortune-wallet strong { overflow: hidden; font-size: clamp(15px, 2.1vw, 32px); line-height: 1; text-overflow: ellipsis; }
.fortune-wallet small { color: #d3b66b; font-size: clamp(7px, .85vw, 12px); text-transform: uppercase; }
.fortune-brand { min-width: 0; display: grid; place-content: center; justify-items: center; line-height: .9; text-shadow: 0 2px 0 #6c3008, 0 0 16px rgb(255 188 49 / 38%); }
.fortune-brand strong { color: #ffd264; font-size: clamp(25px, 4.1vw, 66px); letter-spacing: .04em; }
.fortune-brand span { margin-top: clamp(4px, .5vw, 8px); color: #d47bf2; font-size: clamp(9px, 1.25vw, 20px); letter-spacing: .36em; }
.fortune-service-nav { display: grid; grid-template-columns: repeat(4, clamp(46px, 6vw, 94px)); gap: clamp(3px, .5vw, 8px); }
.fortune-service-nav button { display: grid; place-items: center; gap: 1px; }
.fortune-service-nav button > span { font-size: clamp(16px, 2.1vw, 32px); line-height: 1; }
.fortune-service-nav button > small { font-size: clamp(6px, .7vw, 11px); text-transform: uppercase; }
.fortune-main-layout { min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(125px, 19%) minmax(0, 1fr) minmax(135px, 20%); gap: clamp(4px, .65vw, 10px); }
.fortune-left-panel, .fortune-right-panel { min-width: 0; min-height: 0; display: grid; gap: clamp(3px, .5vw, 8px); }
.fortune-left-panel { grid-template-rows: minmax(58px, 1.35fr) auto auto auto; }
.fortune-joker-art { min-height: 0; display: grid; place-items: center; align-content: center; overflow: hidden; border: 1px solid rgb(242 189 69 / 37%); border-radius: clamp(8px, .9vw, 15px); background: radial-gradient(circle, rgb(125 37 143 / 55%), rgb(18 5 24 / 92%) 69%); }
.fortune-joker-art img { max-width: 70%; max-height: 74%; object-fit: contain; filter: sepia(.25) saturate(1.3) drop-shadow(0 0 12px rgb(210 58 205 / 40%)); }
.fortune-joker-art strong { color: #ffc952; font-size: clamp(9px, 1.2vw, 18px); letter-spacing: .18em; }
.fortune-metric, .fortune-multiplier-list, .fortune-bet { display: grid; place-items: center; border: 1px solid rgb(242 189 69 / 44%); border-radius: clamp(7px, .8vw, 13px); padding: clamp(3px, .45vw, 7px); background: linear-gradient(150deg, rgb(40 15 47 / 96%), rgb(9 5 12 / 98%)); text-align: center; }
.fortune-metric small, .fortune-multiplier-list > small, .fortune-bet > small { color: #d7c79b; font-size: clamp(6px, .75vw, 11px); text-transform: uppercase; }
.fortune-metric strong { color: #ffd35f; font-size: clamp(17px, 2.4vw, 37px); line-height: 1; }
.fortune-metric span, .fortune-bet > span { color: #c6aa68; font-size: clamp(6px, .7vw, 11px); text-transform: uppercase; }
.fortune-multiplier strong { font-size: clamp(20px, 3vw, 45px); }
.fortune-multiplier-list > div { width: 100%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; margin-top: 3px; }
.fortune-multiplier-list span { border-radius: 4px; padding: 2px 0; background: rgb(107 57 17 / 48%); color: #ffd666; font-size: clamp(6px, .72vw, 11px); }
.fortune-board-wrap { min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; place-items: center; gap: 3px; }
.fortune-board { width: 100%; height: 100%; min-width: 0; min-height: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr)); gap: clamp(2px, .3vw, 5px); border: clamp(3px, .45vw, 7px) ridge #c98928; border-radius: clamp(8px, 1vw, 16px); padding: clamp(3px, .45vw, 7px); background: linear-gradient(135deg, #25102c, #08040b); box-shadow: 0 0 22px rgb(206 105 24 / 21%); }
.fortune-symbol { min-width: 0; min-height: 0; display: grid; place-items: center; overflow: hidden; border: 1px solid rgb(144 68 161 / 42%); border-radius: clamp(4px, .45vw, 7px); background: radial-gradient(circle at 50% 38%, #2a1731, #0b0710 70%); font-weight: 1000; font-size: clamp(20px, 4.2vw, 66px); line-height: 1; text-shadow: 0 2px 0 #09040b, 0 0 9px currentColor; }
.fortune-symbol.clubs { color: #43c95b; } .fortune-symbol.diamonds { color: #ff3d37; } .fortune-symbol.hearts { color: #ef414b; } .fortune-symbol.spades { color: #4d8aff; } .fortune-symbol.rank, .fortune-symbol.crown { color: #f2c34f; }
.fortune-symbol.joker { border-color: #ffd15a; background: linear-gradient(145deg, #e5a82e, #6d320c); color: #2c092f; text-shadow: none; }
.fortune-availability { max-width: 100%; overflow: hidden; margin: 0; color: #9b86a1; font: 600 clamp(6px, .68vw, 10px) system-ui, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.fortune-right-panel { grid-template-rows: minmax(78px, 1.25fr) auto minmax(60px, .8fr) auto; }
.fortune-bonus-buy { display: grid; place-items: center; align-content: center; gap: 2px; text-transform: uppercase; }
.fortune-bonus-buy b { border: 1px solid #e7ad42; border-radius: 7px; padding: 2px 10px; background: #592075; color: #ffe66f; font-size: clamp(11px, 1.4vw, 22px); }
.fortune-bonus-buy strong { font-size: clamp(8px, 1vw, 15px); }
.fortune-bonus-buy span { color: #ffd461; font-size: clamp(14px, 2vw, 30px); font-weight: 1000; }
.fortune-bonus-buy small { color: #bda8bd; font-size: clamp(6px, .68vw, 10px); }
.fortune-bet { gap: 2px; }
.fortune-bet > div { width: 100%; display: grid; grid-template-columns: clamp(24px, 3vw, 44px) 1fr clamp(24px, 3vw, 44px); align-items: center; gap: 4px; }
.fortune-bet button { aspect-ratio: 1; font-size: clamp(13px, 1.7vw, 25px); }
.fortune-bet strong { color: #f6e7be; font-size: clamp(15px, 2vw, 30px); }
.fortune-play { display: grid; place-items: center; align-content: center; border-color: #80d95e !important; background: linear-gradient(#16782c, #064214) !important; color: #fff19a !important; }
.fortune-play strong { font-size: clamp(18px, 2.7vw, 42px); }
.fortune-play small { font: 700 clamp(6px, .67vw, 10px) system-ui, sans-serif; }
.fortune-auto { font-size: clamp(8px, 1vw, 15px) !important; }
.fortune-mobile-bonus-panel { min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(90px, 1.35fr) auto auto auto; gap: clamp(3px, .5vw, 8px); }
.fortune-bonus-spins, .fortune-bonus-total { min-width: 0; display: grid; place-items: center; align-content: center; gap: 2px; overflow: hidden; border: 1px solid rgb(205 97 239 / 54%); border-radius: clamp(7px, .8vw, 13px); padding: clamp(4px, .55vw, 9px); background: radial-gradient(circle, rgb(89 20 109 / 66%), rgb(12 4 17 / 98%) 72%); text-align: center; }
.fortune-bonus-spins small, .fortune-bonus-total small { color: #dac3de; font-size: clamp(6px, .74vw, 11px); font-weight: 800; text-transform: uppercase; }
.fortune-bonus-spins strong { color: #eea9ff; font-size: clamp(41px, 6vw, 91px); line-height: .9; text-shadow: 0 0 14px #a628d0; }
.fortune-bonus-spins b { border-radius: 7px; padding: 2px 9px; background: #5c1b6e; color: #ffd55d; font-size: clamp(9px, 1.15vw, 18px); }
.fortune-bonus-spins span { color: #d3c0d3; font: 700 clamp(6px, .66vw, 10px) system-ui, sans-serif; }
.fortune-bonus-total strong { color: #ffd15a; font-size: clamp(19px, 2.4vw, 37px); line-height: 1; }
.fortune-bonus-total span { color: #c8aa65; font-size: clamp(6px, .68vw, 10px); text-transform: uppercase; }
.fortune-bonus-total-multiplier strong { color: #f5a2ff; font-size: clamp(31px, 4vw, 60px); text-shadow: 0 0 12px #b02dd0; }
.fortune-skip-animation { padding: clamp(5px, .65vw, 10px) !important; font: 900 clamp(7px, .83vw, 13px) system-ui, sans-serif !important; text-transform: uppercase; }
.fortune-bonus-active .fortune-mobile-stage { background: radial-gradient(circle at 52% 16%, rgb(151 35 181 / 46%), transparent 34%), radial-gradient(circle at 18% 58%, rgb(108 35 128 / 25%), transparent 35%), linear-gradient(145deg, #050207, #180620 48%, #030104); }
.fortune-bonus-active .fortune-brand strong { font-size: clamp(19px, 3.1vw, 50px); }
.fortune-bonus-active .fortune-brand span { color: #f0a9ff; }
.fortune-bonus-active .fortune-board, .fortune-bonus-active .fortune-desktop-board { box-shadow: 0 0 26px rgb(203 52 238 / 27%); }
.fortune-footer { min-width: 0; display: grid; grid-template-columns: minmax(105px, 19%) minmax(0, 1fr) minmax(105px, 20%); align-items: stretch; gap: clamp(4px, .65vw, 10px); }
.fortune-footer > div { min-width: 0; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; gap: clamp(3px, .5vw, 8px); }
.fortune-footer span { min-width: 0; color: #cfbf9c; font: 700 clamp(6px, .8vw, 12px) system-ui, sans-serif; text-align: center; }
.fortune-footer b { color: #ffe070; font-size: clamp(9px, 1.2vw, 18px); }
.fortune-footer button { font-size: clamp(7px, .9vw, 14px); font-weight: 900; text-transform: uppercase; }
@media (max-height: 430px) and (orientation: landscape) {
  .fortune-mobile-stage { grid-template-rows: 48px minmax(0, 1fr) 39px; padding: 4px; }
  .fortune-topbar { grid-template-columns: 42px 125px minmax(120px, 1fr) auto; }
  .fortune-service-nav { grid-template-columns: repeat(4, 45px); }
  .fortune-main-layout { grid-template-columns: minmax(112px, 18%) minmax(0, 1fr) minmax(122px, 19%); }
  .fortune-left-panel { grid-template-rows: minmax(43px, 1fr) auto auto auto; }
  .fortune-joker-art img { max-height: 62%; }
  .fortune-multiplier-list > div { margin-top: 1px; }
}
@media (orientation: portrait) {
  .fortune-mobile-view:not(.hidden) .fortune-mobile-stage { display: none; }
  .fortune-mobile-view:not(.hidden) .fortune-orientation-note { width: 100%; height: 100%; display: grid; place-content: center; gap: 10px; padding: 28px; background: radial-gradient(circle, #35113d, #050207 70%); color: #f4d675; text-align: center; }
  .fortune-orientation-note strong { font-size: clamp(24px, 8vw, 48px); }
  .fortune-orientation-note span { color: #d8c8dc; font-size: clamp(14px, 4vw, 22px); }
}

/* Fortune Web: a separate desktop composition, not a scaled mobile layout. */
.fortune-desktop-stage { display: none; }
@media (min-width: 1000px) and (min-height: 620px) and (orientation: landscape) {
  .fortune-mobile-stage { display: none; }
  .fortune-desktop-stage {
    width: 100%; height: 100%; display: grid;
    grid-template-rows: clamp(78px, 11vh, 108px) minmax(0, 1fr) clamp(62px, 8vh, 82px);
    gap: clamp(8px, .7vw, 13px); padding: clamp(10px, .85vw, 17px); color: #fff3c7;
    background: radial-gradient(circle at 50% 10%, rgb(118 31 128 / 35%), transparent 30%), radial-gradient(circle at 8% 48%, rgb(141 66 15 / 23%), transparent 35%), linear-gradient(145deg, #050207, #16091c 52%, #040205);
    font-family: Georgia, "Times New Roman", serif;
  }
  .fortune-desktop-stage button { min-width: 0; min-height: 0; border: 1px solid rgb(239 180 57 / 66%); border-radius: 12px; background: linear-gradient(150deg, #211028, #08050a); box-shadow: inset 0 0 0 1px rgb(255 226 125 / 8%), 0 8px 24px rgb(0 0 0 / 24%); color: #ffe17c; font: inherit; }
  .fortune-desktop-stage button:disabled { opacity: .67; cursor: not-allowed; filter: saturate(.74); }
  .fortune-desktop-topbar { min-width: 0; min-height: 0; display: grid; grid-template-columns: clamp(65px, 5vw, 86px) clamp(220px, 19vw, 320px) minmax(250px, 1fr) auto; align-items: stretch; gap: clamp(8px, .7vw, 13px); overflow: hidden; }
  .fortune-desktop-topbar > * { min-height: 0; height: 100%; max-height: 100%; }
  .fortune-desktop-menu { display: grid; place-items: center; font-size: clamp(27px, 2.4vw, 42px) !important; }
  .fortune-desktop-wallet { min-width: 0; display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; align-items: center; gap: 0 13px; border: 1px solid rgb(239 180 57 / 66%); border-radius: 13px; padding: 9px 14px; background: linear-gradient(145deg, #26181d, #090508); }
  .fortune-desktop-wallet > span { grid-row: 1 / 3; display: grid; place-items: center; width: clamp(48px, 4vw, 68px); aspect-ratio: 1; border-radius: 50%; background: linear-gradient(145deg, #a16b18, #573408); color: #ffe26e; font-size: clamp(24px, 2vw, 34px); }
  .fortune-desktop-wallet strong { overflow: hidden; font-size: clamp(25px, 2.2vw, 38px); line-height: 1; text-overflow: ellipsis; }
  .fortune-desktop-wallet small { color: #c9ac62; font-size: clamp(10px, .82vw, 14px); text-transform: uppercase; }
  .fortune-desktop-brand { min-width: 0; display: grid; place-content: center; justify-items: center; overflow: hidden; line-height: .86; text-shadow: 0 3px 0 #6e3008, 0 0 22px rgb(255 185 41 / 42%); }
  .fortune-desktop-brand strong { max-width: 100%; color: #ffd264; font-size: clamp(45px, 4.7vw, 78px); letter-spacing: .035em; white-space: nowrap; }
  .fortune-desktop-brand span { margin-top: 9px; color: #d677ef; font-size: clamp(14px, 1.3vw, 22px); letter-spacing: .42em; }
  .fortune-desktop-services { min-height: 0; display: grid; grid-template-columns: repeat(4, clamp(78px, 6vw, 100px)); gap: clamp(7px, .55vw, 10px); overflow: hidden; }
  .fortune-desktop-services button { height: 100%; display: grid; place-items: center; gap: 3px; overflow: hidden; padding: 7px; }
  .fortune-desktop-services span { font-size: clamp(26px, 2.3vw, 39px); line-height: 1; }
  .fortune-desktop-services small { font-size: clamp(8px, .7vw, 12px); text-transform: uppercase; }
  .fortune-desktop-main { min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(245px, 20%) minmax(0, 1fr) minmax(255px, 20%); gap: clamp(8px, .7vw, 13px); }
  .fortune-desktop-left, .fortune-desktop-right { min-width: 0; min-height: 0; display: grid; gap: clamp(6px, .55vw, 10px); }
  .fortune-desktop-left { grid-template-rows: minmax(130px, 1fr) auto auto auto; }
  .fortune-desktop-joker { position: relative; min-height: 0; overflow: hidden; border: 1px solid rgb(239 180 57 / 38%); border-radius: 15px; background: #150918; }
  .fortune-desktop-joker::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, transparent 40%, rgb(4 1 6 / 50%)); pointer-events: none; }
  .fortune-desktop-joker img { width: 100%; height: 100%; object-fit: cover; }
  .fortune-desktop-joker > span { position: absolute; z-index: 1; left: 50%; bottom: 8px; transform: translateX(-50%); color: #ffd35e; font-size: clamp(12px, 1vw, 17px); font-weight: 1000; letter-spacing: .2em; text-shadow: 0 2px 4px #000; }
  .fortune-desktop-metric, .fortune-desktop-multipliers, .fortune-desktop-bet { display: grid; place-items: center; border: 1px solid rgb(239 180 57 / 45%); border-radius: 13px; padding: clamp(5px, .55vw, 10px); background: linear-gradient(150deg, rgb(43 14 52 / 97%), rgb(8 4 11 / 98%)); text-align: center; }
  .fortune-desktop-metric small, .fortune-desktop-multipliers > small, .fortune-desktop-bet > small { color: #d3c298; font-size: clamp(9px, .72vw, 12px); text-transform: uppercase; }
  .fortune-desktop-metric strong { color: #ffd25a; font-size: clamp(29px, 2.7vw, 45px); line-height: 1; }
  .fortune-desktop-metric span, .fortune-desktop-bet > span { color: #c8aa65; font-size: clamp(9px, .7vw, 12px); text-transform: uppercase; }
  .fortune-desktop-multiplier strong { font-size: clamp(35px, 3.5vw, 58px); }
  .fortune-desktop-multipliers > div { width: 100%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-top: 6px; }
  .fortune-desktop-multipliers span { border-radius: 6px; padding: 5px 2px; background: rgb(112 62 17 / 50%); color: #ffd565; font-size: clamp(9px, .75vw, 13px); }
  .fortune-desktop-board-wrap { min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; place-items: center; gap: 5px; }
  .fortune-desktop-board { width: 100%; height: 100%; min-width: 0; min-height: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr)); gap: clamp(4px, .35vw, 7px); border: clamp(5px, .45vw, 8px) ridge #c88a2a; border-radius: 17px; padding: clamp(5px, .45vw, 8px); background: linear-gradient(135deg, #25102c, #070309); box-shadow: 0 0 30px rgb(207 108 24 / 23%); }
  .fortune-desktop-symbol { min-width: 0; min-height: 0; display: grid; place-items: center; overflow: hidden; border: 1px solid rgb(148 67 165 / 45%); border-radius: 8px; background: radial-gradient(circle at 50% 38%, #2b1732, #09050d 72%); font-size: clamp(45px, 5vw, 84px); font-weight: 1000; line-height: 1; text-shadow: 0 3px 0 #08030a, 0 0 12px currentColor; }
  .fortune-desktop-symbol.clubs { color: #43ca5c; } .fortune-desktop-symbol.diamonds { color: #ff3e38; } .fortune-desktop-symbol.hearts { color: #ef414b; } .fortune-desktop-symbol.spades { color: #4c88fa; } .fortune-desktop-symbol.rank, .fortune-desktop-symbol.crown { color: #f1c34e; }
  .fortune-desktop-symbol.joker { border-color: #ffd15a; background: linear-gradient(145deg, #e2a72d, #6d320c); color: #2b092e; text-shadow: none; }
  .fortune-desktop-availability { max-width: 100%; overflow: hidden; margin: 0; color: #9a859f; font: 600 clamp(8px, .63vw, 11px) system-ui, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
  .fortune-desktop-right { grid-template-rows: minmax(150px, 1.3fr) auto minmax(90px, .72fr) auto; }
  .fortune-desktop-bonus { display: grid; place-items: center; align-content: center; gap: 3px; padding: 10px; text-transform: uppercase; }
  .fortune-desktop-bonus b { border: 1px solid #e4ac41; border-radius: 8px; padding: 3px 15px; background: #5c2177; color: #ffe66f; font-size: clamp(17px, 1.5vw, 25px); }
  .fortune-desktop-bonus strong { font-size: clamp(13px, 1.15vw, 19px); line-height: 1.25; }
  .fortune-desktop-bonus em { color: #ffd25a; font-size: clamp(35px, 4vw, 66px); font-style: normal; font-weight: 1000; line-height: 1; }
  .fortune-desktop-bonus span { color: #e8c16a; font-size: clamp(11px, .9vw, 15px); }
  .fortune-desktop-bonus small { color: #bba5bc; font-size: clamp(8px, .66vw, 11px); }
  .fortune-desktop-bet { gap: 4px; }
  .fortune-desktop-bet > div { width: 100%; display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; gap: 7px; }
  .fortune-desktop-bet > div button { aspect-ratio: 1; font-size: 24px; }
  .fortune-desktop-bet strong { color: #f7e8bf; font-size: clamp(27px, 2.4vw, 40px); }
  .fortune-desktop-bet nav { width: 100%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
  .fortune-desktop-bet nav button { padding: 5px 2px; font-size: clamp(9px, .76vw, 13px); }
  .fortune-desktop-play { display: grid; place-items: center; align-content: center; border-color: #7fd85d !important; background: linear-gradient(#187b2f, #064114) !important; color: #fff199 !important; }
  .fortune-desktop-play strong { font-size: clamp(31px, 3.3vw, 55px); }
  .fortune-desktop-play small { font: 700 clamp(8px, .66vw, 11px) system-ui, sans-serif; }
  .fortune-desktop-auto { padding: 8px; font-size: clamp(15px, 1.2vw, 20px) !important; }
  .fortune-desktop-bonus-panel { min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(180px, 1.4fr) auto auto auto; gap: clamp(6px, .55vw, 10px); }
  .fortune-desktop-bonus-panel .fortune-bonus-spins, .fortune-desktop-bonus-panel .fortune-bonus-total { border-radius: 14px; padding: 10px; }
  .fortune-desktop-bonus-panel .fortune-bonus-spins small, .fortune-desktop-bonus-panel .fortune-bonus-total small { font-size: clamp(10px, .8vw, 14px); }
  .fortune-desktop-bonus-panel .fortune-bonus-spins strong { font-size: clamp(75px, 7vw, 118px); }
  .fortune-desktop-bonus-panel .fortune-bonus-spins b { padding: 4px 14px; font-size: clamp(14px, 1.2vw, 20px); }
  .fortune-desktop-bonus-panel .fortune-bonus-spins span { font-size: clamp(9px, .7vw, 12px); }
  .fortune-desktop-bonus-panel .fortune-bonus-total strong { font-size: clamp(29px, 2.65vw, 45px); }
  .fortune-desktop-bonus-panel .fortune-bonus-total-multiplier strong { font-size: clamp(50px, 4.8vw, 80px); }
  .fortune-desktop-bonus-panel .fortune-skip-animation { padding: 10px !important; font-size: clamp(11px, .9vw, 15px) !important; }
  .fortune-bonus-active .fortune-desktop-stage { background: radial-gradient(circle at 50% 9%, rgb(155 33 183 / 43%), transparent 32%), radial-gradient(circle at 8% 48%, rgb(104 31 124 / 25%), transparent 35%), linear-gradient(145deg, #040106, #17051e 52%, #030104); }
  .fortune-bonus-active .fortune-desktop-brand strong { font-size: clamp(30px, 3.25vw, 53px); }
  .fortune-bonus-active .fortune-desktop-brand span { color: #efa4ff; }
  .fortune-desktop-footer { min-width: 0; display: grid; grid-template-columns: minmax(245px, 20%) minmax(0, 1fr) minmax(255px, 20%); align-items: stretch; gap: clamp(8px, .7vw, 13px); }
  .fortune-desktop-footer > div { min-width: 0; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; gap: 9px; }
  .fortune-desktop-footer span { color: #d0be98; font: 700 clamp(9px, .8vw, 14px) system-ui, sans-serif; text-align: center; }
  .fortune-desktop-footer b { color: #ffe071; font-size: clamp(16px, 1.45vw, 24px); }
  .fortune-desktop-footer button { padding: 8px; font-size: clamp(12px, 1vw, 17px); font-weight: 900; text-transform: uppercase; }
}

/* Compatibility: shared social activity, desktop and Android landscape. */
.compatibility-focus, .compatibility-history { min-width: 0; }
.compatibility-focus { margin-bottom: 18px; overflow: hidden; border: 1px solid rgb(215 177 77 / 34%); border-radius: 22px; background: linear-gradient(145deg, rgb(33 51 42 / 97%), rgb(13 27 22 / 98%)); box-shadow: 0 18px 46px rgb(0 0 0 / 22%); }
.compatibility-focus > header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 15px; padding: 20px 22px; border-bottom: 1px solid rgb(255 255 255 / 8%); background: radial-gradient(circle at 8% 20%, rgb(206 162 55 / 16%), transparent 40%); }
.compatibility-focus > header > span { width: 54px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid #cfae55; border-radius: 50%; background: #132d23; color: #f1cd69; font: 900 20px Georgia, serif; box-shadow: inset 0 0 0 4px rgb(255 255 255 / 3%); }
.compatibility-focus header h3, .compatibility-focus header p, .compatibility-focus header small { margin: 0; }
.compatibility-focus header h3 { color: #f7e8bd; font: 800 clamp(21px, 2vw, 31px) Georgia, serif; }
.compatibility-focus header p { max-width: 760px; margin-top: 4px; color: #b8c9bf; line-height: 1.45; }
.compatibility-focus header small { color: #d5b75d; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.compatibility-composer form { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding: 20px 22px; }
.compatibility-composer form > label { display: grid; gap: 7px; color: #d9e2dc; font-weight: 800; }
.compatibility-composer select { width: 100%; min-width: 0; border: 1px solid rgb(213 178 82 / 38%); border-radius: 12px; padding: 12px 14px; background: #10271e; color: #f8edca; }
.compatibility-composer form > article { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 15px; border: 1px solid rgb(255 255 255 / 8%); border-radius: 16px; padding: 15px; background: rgb(7 17 13 / 45%); }
.compatibility-composer form > article > span { width: 48px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 14px; background: #274638; color: #f1cf72; font-size: 24px; }
.compatibility-composer article strong, .compatibility-composer article p, .compatibility-composer article small { display: block; margin: 0; }
.compatibility-composer article strong { color: #fff0c7; }
.compatibility-composer article p { margin: 3px 0; color: #bdcbc3; }
.compatibility-composer article small { color: #8eaa9a; }
.compatibility-composer form > button { justify-self: start; }
.compatibility-composer form > .muted { align-self: center; margin: 0; }
.compatibility-history > .social-content-heading { margin-top: 0; }
.compatibility-history > div:last-child { display: grid; gap: 9px; }
.compatibility-session-card { width: 100%; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; border: 1px solid rgb(255 255 255 / 8%); border-radius: 16px; padding: 13px 15px; background: linear-gradient(135deg, rgb(24 47 37 / 96%), rgb(12 28 21 / 96%)); color: #ecf4ef; text-align: left; box-shadow: none; }
.compatibility-session-card:hover, .compatibility-session-card.selected { border-color: rgb(226 186 78 / 58%); background: linear-gradient(135deg, rgb(40 65 50 / 98%), rgb(15 35 26 / 98%)); transform: translateY(-1px); }
.compatibility-session-card > span { display: grid; place-items: center; min-width: 62px; min-height: 58px; border-radius: 13px; background: rgb(6 20 14 / 58%); color: #f0cd69; }
.compatibility-session-card > span strong { font: 900 19px Georgia, serif; }
.compatibility-session-card > span small { color: #9fb3a7; font-size: 9px; text-transform: uppercase; }
.compatibility-session-card div { min-width: 0; }
.compatibility-session-card b, .compatibility-session-card p, .compatibility-session-card time { display: block; overflow: hidden; margin: 0; text-overflow: ellipsis; white-space: nowrap; }
.compatibility-session-card b { color: #f8ebc6; font-size: 15px; }
.compatibility-session-card p { margin: 3px 0; color: #b5c7bc; }
.compatibility-session-card time { color: #769183; font-size: 11px; }
.compatibility-session-card > i { color: #d3b458; font-size: 25px; font-style: normal; }
.compatibility-questionnaire form { padding: 20px 22px; }
.compatibility-questionnaire fieldset { margin: 0 0 14px; border: 1px solid rgb(255 255 255 / 8%); border-radius: 16px; padding: 14px; background: rgb(7 18 13 / 45%); }
.compatibility-questionnaire legend { display: flex; align-items: center; gap: 10px; padding: 0 8px; color: #f1e7c9; font-weight: 800; }
.compatibility-questionnaire legend b { width: 26px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: #b78f2f; color: #102319; }
.compatibility-questionnaire fieldset > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; }
.compatibility-questionnaire label { position: relative; min-width: 0; }
.compatibility-questionnaire label input { position: absolute; opacity: 0; pointer-events: none; }
.compatibility-questionnaire label span { height: 100%; display: grid; place-items: center; border: 1px solid rgb(255 255 255 / 10%); border-radius: 11px; padding: 11px; background: #173328; color: #c7d4cc; text-align: center; cursor: pointer; }
.compatibility-questionnaire label input:checked + span { border-color: #e0bc58; background: #315141; color: #fff0bb; box-shadow: inset 0 0 0 1px rgb(255 223 126 / 24%); }
.compatibility-form-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.compatibility-waiting { padding-bottom: 18px; }
.compatibility-waiting > button { margin: 18px 22px 0; }
.compatibility-result { position: relative; }
.compatibility-score { display: grid; place-items: center; align-content: center; width: clamp(130px, 18vw, 190px); aspect-ratio: 1; margin: 22px auto; border: 8px solid rgb(220 180 71 / 24%); border-top-color: #dfbd5c; border-radius: 50%; background: radial-gradient(circle, #315141, #10261d 70%); box-shadow: 0 0 30px rgb(213 171 59 / 16%); }
.compatibility-score strong { color: #ffe594; font: 900 clamp(32px, 5vw, 54px) Georgia, serif; }
.compatibility-score span { color: #a9bdb1; font-size: 11px; text-transform: uppercase; }
.compatibility-breakdown { display: grid; gap: 10px; padding: 0 22px 18px; }
.compatibility-breakdown article { border-radius: 13px; padding: 12px 14px; background: rgb(5 16 11 / 45%); }
.compatibility-breakdown article > div { display: flex; justify-content: space-between; gap: 12px; color: #dce8e0; }
.compatibility-breakdown progress { width: 100%; height: 7px; margin-top: 8px; accent-color: #d2ae4b; }
.compatibility-breakdown small { display: block; margin-top: 6px; color: #94aa9d; }
.compatibility-disclaimer { margin: 0; padding: 14px 22px 20px; color: #91a59a; text-align: center; }

@media (max-width: 760px) {
  .compatibility-focus > header { grid-template-columns: auto minmax(0, 1fr); padding: 15px; }
  .compatibility-focus > header > button { grid-column: 1 / -1; justify-self: stretch; }
  .compatibility-composer form { grid-template-columns: 1fr; padding: 15px; }
  .compatibility-composer form > article { grid-column: 1; }
  .compatibility-questionnaire form, .compatibility-breakdown { padding-inline: 15px; }
}

@media (max-height: 600px) and (orientation: landscape) {
  .compatibility-focus { border-radius: 14px; margin-bottom: 10px; }
  .compatibility-focus > header { gap: 9px; padding: 10px 12px; }
  .compatibility-focus > header > span { width: 40px; }
  .compatibility-focus header h3 { font-size: 18px; }
  .compatibility-focus header p { font-size: 11px; line-height: 1.25; }
  .compatibility-composer form { gap: 8px; padding: 10px 12px; }
  .compatibility-composer form > article { padding: 9px; }
  .compatibility-session-card { padding: 8px 10px; }
  .compatibility-session-card > span { min-width: 50px; min-height: 45px; }
  .compatibility-questionnaire form { padding: 10px 12px; }
  .compatibility-questionnaire fieldset { margin-bottom: 8px; padding: 9px; }
  .compatibility-questionnaire label span { padding: 7px; font-size: 11px; }
  .compatibility-score { width: 112px; margin: 12px auto; }
  .compatibility-breakdown { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 12px 10px; }
}

.admin-compatibility-section { min-width: 0; }
.admin-compatibility-metrics { display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); gap: 10px; margin-bottom: 14px; }
.admin-compatibility-metrics article { border: 1px solid rgb(209 174 77 / 20%); border-radius: 14px; padding: 13px; background: linear-gradient(145deg, rgb(30 54 43 / 70%), rgb(13 29 22 / 75%)); }
.admin-compatibility-metrics small, .admin-compatibility-metrics strong { display: block; }
.admin-compatibility-metrics small { color: #92a99c; }
.admin-compatibility-metrics strong { margin-top: 4px; color: #f4d77e; font-size: 23px; }
.admin-compatibility-launch { display: grid; grid-template-columns: minmax(220px, 1.2fr) auto minmax(180px, .7fr) minmax(260px, 1fr) auto; align-items: end; gap: 13px; border: 1px solid rgb(210 174 75 / 25%); border-radius: 17px; padding: 16px; background: rgb(8 25 18 / 62%); }
.admin-compatibility-launch h3, .admin-compatibility-launch p { margin: 0; }
.admin-compatibility-launch p { color: #94aa9e; }
.admin-compatibility-launch > label:not(.checkline) { display: grid; gap: 6px; color: #b9c9bf; font-weight: 700; }
.admin-compatibility-launch input[type="text"], .admin-compatibility-launch input:not([type]) { width: 100%; }
.admin-compatibility-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 300px); gap: 14px; margin-top: 14px; }
.admin-compatibility-columns > section, .admin-compatibility-columns > aside { min-width: 0; border: 1px solid rgb(255 255 255 / 7%); border-radius: 17px; padding: 15px; background: rgb(7 19 14 / 40%); }
.compatibility-catalog-editor { display: grid; gap: 13px; }
.compatibility-editor-category { overflow: hidden; border: 1px solid rgb(213 176 74 / 26%); border-radius: 16px; background: #10281e; }
.compatibility-editor-category > header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 13px; background: linear-gradient(135deg, rgb(47 78 62 / 72%), rgb(18 43 31 / 72%)); }
.compatibility-editor-category > header > div { min-width: 0; }
.compatibility-editor-category > header small { display: block; color: #a9bdb1; }
.compatibility-editor-category > header input { width: 100%; }
.compatibility-editor-icon input { width: 48px !important; height: 44px; padding: 5px; text-align: center; font-size: 22px; }
.compatibility-editor-category > label { display: grid; gap: 5px; padding: 12px 13px 0; color: #aebfb5; }
.compatibility-editor-category > label textarea { width: 100%; resize: vertical; }
.compatibility-editor-category > div { display: grid; gap: 10px; padding: 12px 13px; }
.compatibility-editor-category > button { margin: 0 13px 13px; }
.compatibility-editor-topic { border: 1px solid rgb(255 255 255 / 8%); border-radius: 13px; padding: 12px; background: rgb(4 16 10 / 42%); }
.compatibility-editor-topic > header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.compatibility-editor-topic > header > span { margin-right: auto; color: #e5ca77; font-weight: 900; }
.compatibility-editor-topic-fields { display: grid; grid-template-columns: .7fr 1.3fr; gap: 9px; }
.compatibility-editor-topic-fields label, .compatibility-editor-question > label { display: grid; gap: 4px; color: #9eb2a6; font-size: 12px; font-weight: 700; }
.compatibility-editor-topic-fields input, .compatibility-editor-question textarea { width: 100%; }
.compatibility-editor-questions { display: grid; gap: 8px; margin: 10px 0; }
.compatibility-editor-question { border: 1px solid rgb(255 255 255 / 7%); border-radius: 12px; padding: 11px; background: #173126; }
.compatibility-editor-question > header { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.compatibility-editor-question > header b { margin-right: auto; color: #d9be6d; }
.compatibility-editor-question > header label { display: flex; align-items: center; gap: 6px; color: #91aa9b; font-size: 11px; }
.compatibility-editor-question > header select { padding: 6px; }
.compatibility-editor-options { display: grid; gap: 6px; margin: 8px 0; }
.compatibility-editor-option { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 6px; }
.compatibility-editor-option > span { width: 25px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: #315343; color: #ead17d; font-size: 11px; font-weight: 900; }
.compatibility-editor-option input { width: 100%; }
.compatibility-result-editor { margin-top: 14px; border: 1px solid rgb(213 176 74 / 20%); border-radius: 15px; padding: 13px; background: #10271e; }
.compatibility-result-editor h3, .compatibility-result-editor p { margin: 0; }
.compatibility-result-editor p { color: #8fa398; }
.compatibility-result-editor > div:last-child { display: grid; gap: 7px; margin-top: 11px; }
.compatibility-result-editor article { display: grid; grid-template-columns: minmax(170px, .7fr) 90px minmax(240px, 1.3fr); gap: 8px; border-radius: 11px; padding: 9px; background: rgb(4 16 10 / 45%); }
.compatibility-result-editor label { display: grid; gap: 4px; color: #9db1a5; font-size: 11px; font-weight: 700; }
.compatibility-result-editor input, .compatibility-result-editor textarea { width: 100%; }
.admin-compatibility-editor-actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: 13px; }
.compatibility-revision-list { display: grid; gap: 8px; }
.compatibility-revision-card { display: grid; gap: 3px; border: 1px solid rgb(255 255 255 / 8%); border-left: 4px solid #64756c; border-radius: 12px; padding: 11px; background: #10271e; }
.compatibility-revision-card.status-published { border-left-color: #65ba76; }
.compatibility-revision-card.status-draft { border-left-color: #d7b54d; }
.compatibility-revision-card span { color: #a7baaf; font-size: 11px; text-transform: uppercase; }
.compatibility-revision-card strong { color: #eff4f1; }
.compatibility-revision-card small { color: #83998d; }
.compatibility-revision-card button { margin-top: 7px; }

@media (max-width: 1100px) {
  .admin-compatibility-launch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-compatibility-launch > div { grid-column: 1 / -1; }
  .admin-compatibility-columns { grid-template-columns: 1fr; }
  .compatibility-revision-list { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}

@media (max-width: 760px) {
  .admin-compatibility-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-compatibility-launch { grid-template-columns: 1fr; }
  .admin-compatibility-launch > div { grid-column: 1; }
  .compatibility-editor-category > header { grid-template-columns: auto minmax(0, 1fr); }
  .compatibility-editor-category > header > label, .compatibility-editor-category > header > button { grid-column: 1 / -1; }
  .compatibility-editor-topic-fields { grid-template-columns: 1fr; }
  .compatibility-result-editor article { grid-template-columns: 1fr; }
  .compatibility-editor-topic > header, .compatibility-editor-question > header { align-items: stretch; flex-direction: column; }
}
/* Premium social: VIP calls and Unions */
.social-video-overlay{position:fixed;inset:0;z-index:1400;overflow:hidden;background:radial-gradient(circle at 50% 30%,#332450 0,#14101f 48%,#07060b 100%);color:#fff}
.social-video-overlay>video{width:100%;height:100%;object-fit:cover;background:#09080e}
.social-video-overlay>header{position:absolute;inset:0 0 auto;display:flex;justify-content:space-between;align-items:flex-start;padding:clamp(18px,4vw,42px);background:linear-gradient(#08060dbd,transparent);pointer-events:none}
.social-video-overlay>header small{color:#d9c9ef;text-transform:uppercase;letter-spacing:.16em}.social-video-overlay>header h2{margin:.3rem 0;font-size:clamp(1.4rem,4vw,2.6rem)}
.social-video-overlay>header time{font:700 1.1rem/1 monospace;padding:.7rem 1rem;border:1px solid #ffffff2c;border-radius:999px;background:#0907108c}
.social-video-avatar{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:1rem}.social-video-avatar span{display:grid;place-items:center;width:clamp(90px,18vw,170px);aspect-ratio:1;border-radius:50%;font-size:clamp(3rem,9vw,7rem);color:#e7c877;background:radial-gradient(circle,#584179,#22182f);border:2px solid #d8b95c;box-shadow:0 0 70px #8d5fc866}.social-video-avatar strong{font-size:clamp(1rem,2vw,1.4rem)}
.social-local-preview{position:absolute;right:clamp(16px,4vw,48px);top:clamp(100px,16vh,150px);width:clamp(130px,22vw,250px);aspect-ratio:3/4;border:2px solid #d9bd67;border-radius:22px;overflow:hidden;background:#161020;box-shadow:0 18px 50px #0009;touch-action:none;cursor:grab}.social-local-preview:active{cursor:grabbing}.social-local-preview video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.social-local-preview span{position:absolute;left:.65rem;bottom:.55rem;padding:.3rem .55rem;border-radius:999px;background:#08060dbf;font-size:.75rem}
.social-video-controls{position:absolute;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;gap:.7rem;padding:.75rem;border:1px solid #ffffff20;border-radius:999px;background:#0c0911cf;backdrop-filter:blur(18px);box-shadow:0 15px 45px #0008}.social-video-controls button{min-height:46px;border-radius:999px;white-space:nowrap}.social-video-controls .danger{background:#8f2436;color:#fff}
.video-call-center,.union-center{display:grid;gap:1.2rem}.video-call-center>header{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1.3rem;border:1px solid #745a923d;border-radius:22px;background:linear-gradient(135deg,#2b203c,#171321)}.video-dnd{display:flex!important;align-items:center;gap:.65rem;white-space:nowrap}.video-dnd input{width:1.25rem;height:1.25rem}
.video-call-current{display:flex;align-items:center;gap:1.2rem;padding:1.4rem;border:1px solid #d7b96066;border-radius:24px;background:radial-gradient(circle at 0,#7452933d,transparent 55%),#171220}.video-call-current>div{flex:1}.video-call-current h3{font-size:1.5rem;margin:.25rem 0}.video-call-current>div>div{display:flex;gap:.7rem;flex-wrap:wrap}.video-call-pulse{display:grid;place-items:center;width:74px;aspect-ratio:1;border-radius:50%;font-size:2rem;color:#f4d57b;background:#4b3765;animation:videoCallPulse 1.6s ease-in-out infinite}
@keyframes videoCallPulse{50%{box-shadow:0 0 0 18px #9c77c117;transform:scale(1.04)}}
.video-call-history,.premium-social-history{display:grid;gap:.6rem}.video-call-history article,.premium-social-history article{display:flex;align-items:center;gap:.8rem;padding:.85rem 1rem;border:1px solid #ffffff12;border-radius:14px;background:#ffffff05}.video-call-history article>span,.premium-social-history article>span{display:grid;place-items:center;width:38px;aspect-ratio:1;border-radius:12px;background:#6d519633;color:#e8cf86}.video-call-history article div,.premium-social-history article div{display:grid;gap:.2rem}.video-call-history small,.premium-social-history small{color:var(--muted)}
.premium-social-upsell,.union-intro,.union-compose,.union-hero{display:flex;gap:1.3rem;align-items:center;padding:clamp(1.2rem,3vw,2rem);border:1px solid #d5b65755;border-radius:26px;background:radial-gradient(circle at 10%,#7a5b9b3c,transparent 45%),linear-gradient(135deg,#251a33,#15111e)}.premium-social-upsell>span,.union-intro>span,.union-compose>span,.union-crest{display:grid;place-items:center;flex:0 0 90px;aspect-ratio:1;border-radius:50%;font-size:3rem;color:#efd277;background:#4b365e;border:1px solid #d9bc65;box-shadow:0 0 40px #a779c24d}.premium-social-upsell h3,.union-intro h3,.union-compose h3,.union-hero h3{margin:.25rem 0;font-size:clamp(1.35rem,3vw,2rem)}
.union-intro ul{display:flex;gap:.5rem;flex-wrap:wrap;padding:0;list-style:none}.union-intro li{padding:.4rem .65rem;border-radius:999px;background:#ffffff0d}.union-hero>div:nth-child(2){flex:1}.union-hero>button{align-self:flex-start}.union-rating-benefit{display:flex;gap:.55rem;flex-wrap:wrap}.union-rating-benefit>*{padding:.4rem .7rem;border-radius:999px;background:#d8b85a1b}.union-rating-benefit b{color:#f2d57c}
.union-stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.65rem}.union-stats article{display:grid;gap:.15rem;padding:.8rem;border:1px solid #ffffff12;border-radius:16px;background:linear-gradient(145deg,#211927,#151119);text-align:center}.union-stats b{color:#f2d57c;font-size:1.3rem}.union-stats span{color:var(--muted);font-size:.72rem}
.union-proposal-list{display:grid;gap:.8rem}.union-proposal-card{display:flex;gap:1rem;padding:1rem;border:1px solid #ffffff16;border-radius:18px;background:#17131e}.union-proposal-card>span{font-size:2rem;color:#e3c56d}.union-proposal-card>div{flex:1}.union-proposal-card h3{margin:.2rem 0}.union-proposal-card>div>div:last-child{display:flex;gap:.6rem;flex-wrap:wrap}.union-confirm-progress{display:flex;gap:.5rem;margin:.7rem 0}.union-confirm-progress b{padding:.35rem .55rem;border-radius:9px;background:#ffffff0a;color:var(--muted);font-size:.75rem}.union-confirm-progress b.done{background:#2e7d4d42;color:#88e5a9}.union-timeline{padding:1rem;border:1px solid #ffffff12;border-radius:22px}.union-timeline>article{display:flex;gap:.8rem;padding:.8rem;border-left:1px solid #c4a95a55}.union-timeline>article>span{color:#dfc46c}.union-timeline>article>div{display:grid}
.union-ceremony{position:fixed;inset:0;z-index:1500;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle,#56386ccf,#100b17f5 62%,#050408);color:#fff}.union-ceremony-stars{position:absolute;inset:-20%;background-image:radial-gradient(circle,#f4d875 0 2px,transparent 3px),radial-gradient(circle,#b586df 0 2px,transparent 3px);background-size:70px 70px,95px 95px;animation:unionStars 16s linear infinite}.union-ceremony-card{position:relative;width:min(620px,90vw);padding:clamp(1.8rem,5vw,4rem);text-align:center;border:2px solid #d9b95c;border-radius:32px;background:linear-gradient(145deg,#39264ee8,#17101fe8);box-shadow:0 0 90px #b37edf55}.union-ceremony-card>i{display:block;font-size:5rem;color:#f0d170;font-style:normal;animation:unionCrest 1.2s ease-in-out infinite alternate}.union-ceremony-card h2{font-size:clamp(2rem,7vw,4.2rem);margin:.5rem 0;color:#f0d47e;letter-spacing:.08em;text-shadow:0 0 28px #c18bdf}.union-ceremony-card>div{display:flex;align-items:center;justify-content:center;gap:1rem;font-size:clamp(1.1rem,3vw,1.7rem)}.union-ceremony-card>div span{color:#d3adf1}.union-ceremony-card button{margin-top:1.2rem}
@keyframes unionStars{to{transform:rotate(360deg)}}@keyframes unionCrest{to{transform:translateY(-8px);filter:drop-shadow(0 0 22px #f0d170)}}
.admin-premium-social-section{display:grid;gap:1.2rem}.admin-premium-social-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:1rem}.admin-premium-social-grid>section{padding:1rem;border:1px solid #ffffff12;border-radius:18px;background:#ffffff04}.premium-social-infra{display:grid;gap:.7rem}.premium-social-infra article{padding:1rem;border-left:3px solid #c3a750;background:#15111d}.union-milestone-editor{display:grid;gap:.55rem;margin:.75rem 0}.union-milestone-editor article{display:grid;grid-template-columns:1fr 1.4fr auto;gap:.6rem;align-items:end;padding:.7rem;border:1px solid #ffffff12;border-radius:14px}.premium-social-disabled{min-height:260px}
@media (max-width:900px){.admin-premium-social-grid{grid-template-columns:1fr}.union-milestone-editor article{grid-template-columns:1fr 1fr}.social-video-controls{bottom:12px;max-width:calc(100vw - 20px);overflow-x:auto}.social-video-controls button{min-width:44px;font-size:.75rem}.social-local-preview{width:min(28vw,180px);top:82px}.premium-social-upsell,.union-intro,.union-compose,.union-hero{align-items:flex-start}.premium-social-upsell>span,.union-intro>span,.union-compose>span,.union-crest{flex-basis:64px;font-size:2rem}.union-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (orientation:landscape) and (max-height:600px){.social-video-overlay>header{padding:12px 18px}.social-video-overlay>header h2{font-size:1.25rem}.social-local-preview{top:64px;width:min(22vw,150px);aspect-ratio:4/3}.social-video-controls{padding:.45rem;bottom:8px}.social-video-controls button{min-height:38px}.union-ceremony-card{padding:1.2rem;max-height:92vh}.union-ceremony-card>i{font-size:3rem}.union-ceremony-card h2{font-size:2rem}}
@media (prefers-reduced-motion:reduce){.video-call-pulse,.union-ceremony-stars,.union-ceremony-card>i{animation:none}}

/* Shot Token and Bonus Store */
.catalog-wallet-shot{border-color:#8f65cf55!important;background:linear-gradient(145deg,#291d3d,#101c16)!important}.catalog-wallet-shot strong{color:#cda7ff!important}
.bonus-store-hero{display:flex;align-items:center;justify-content:space-between;gap:1.3rem;margin-bottom:1rem;padding:clamp(1.2rem,3vw,2rem);border:1px solid #a879d950;border-radius:24px;background:radial-gradient(circle at 10%,#8151b83b,transparent 48%),linear-gradient(135deg,#221830,#0d1c15)}.bonus-store-hero h2{margin:.25rem 0;color:#f2d579}.bonus-store-hero p{max-width:760px;margin:0;color:#b0beb6}.bonus-store-hero>strong{display:grid;min-width:150px;padding:1rem 1.25rem;border:1px solid #d0b26b47;border-radius:18px;background:#080c0ab8;text-align:center}.bonus-store-hero>strong span,.bonus-store-hero>strong small{color:#9eaeaa;font-size:.72rem;text-transform:uppercase}.bonus-store-hero>strong b{color:#d7b5ff;font-size:2rem}
.bonus-store-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.85rem}.bonus-store-card{overflow:hidden;border:1px solid #ffffff14;border-radius:19px;background:linear-gradient(150deg,#20172b,#0d1b15);box-shadow:0 14px 32px #0003}.bonus-store-card-image{height:145px;display:grid;place-items:center;background:radial-gradient(circle,#704d9257,transparent 60%),#121019;color:#e8cc78;font-size:3.2rem}.bonus-store-card-image img{width:100%;height:100%;object-fit:cover}.bonus-store-card>div:last-child{display:grid;gap:.65rem;padding:1rem}.bonus-store-card h3,.bonus-store-card p{margin:0}.bonus-store-card p{min-height:42px;color:#9caea4}.bonus-store-card-meta{display:flex;justify-content:space-between;gap:.5rem;color:#9fb1a8;font-size:.75rem}.bonus-store-card footer{display:flex;align-items:center;justify-content:space-between;gap:.7rem}.bonus-store-card footer strong{color:#d6b0ff;font-size:1.1rem}.bonus-store-card button:disabled{opacity:.55;cursor:not-allowed}.bonus-history-card{margin-top:1rem;padding:1rem;border:1px solid #ffffff10;border-radius:18px;background:#07140e99}.shot-token-history{display:grid;gap:.5rem}.shot-token-history article{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.8rem;padding:.7rem .85rem;border-radius:12px;background:#ffffff06}.shot-token-history article>span{display:grid;place-items:center;width:34px;aspect-ratio:1;border-radius:10px;background:#6e4e963c;color:#d9b9ff}.shot-token-history article div{display:grid}.shot-token-history article small{color:var(--muted)}.shot-token-history article>b{color:#78d09a}.shot-token-history article>b.debit{color:#dda66e}
.admin-ecosystem-reward-section{display:grid;gap:1rem}.admin-ecosystem-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(360px,1.15fr);gap:1rem}.admin-ecosystem-grid>section{padding:1rem;border:1px solid #ffffff10;border-radius:18px;background:#ffffff04}.ecosystem-admin-list,.ecosystem-ledger-list{display:grid;gap:.6rem}.ecosystem-admin-list article,.ecosystem-ledger-list article{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.6rem;align-items:center;padding:.8rem;border:1px solid #ffffff10;border-radius:14px;background:#0b1c15}.ecosystem-admin-list article header{display:grid;gap:.2rem}.ecosystem-admin-list article small,.ecosystem-ledger-list small{color:var(--muted)}.ecosystem-admin-list article>div{display:flex;gap:.45rem;flex-wrap:wrap;justify-content:flex-end}.ecosystem-admin-list article button{padding:.55rem .75rem}.ecosystem-ledger-list article{grid-template-columns:minmax(0,1fr) auto auto}.ecosystem-ledger-list b.credit{color:#72d79a}.ecosystem-ledger-list b.debit{color:#e2a169}.bonus-item-editor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin:.8rem 0}.bonus-item-editor label{display:grid;gap:.35rem;color:#aebfb5;font-weight:700}.bonus-item-editor textarea,.bonus-item-editor input,.bonus-item-editor select{width:100%}.bonus-item-editor label:nth-of-type(1),.bonus-item-editor label:nth-of-type(2),.bonus-item-editor label:nth-of-type(3){grid-column:1/-1}.bonus-item-preview{grid-column:1/-1;min-height:130px;display:grid;place-items:center;align-content:center;gap:.35rem;overflow:hidden;border:1px dashed #b78cde70;border-radius:16px;background:radial-gradient(circle,#76519b42,transparent 60%),#111017;color:#d9ba79}.bonus-item-preview img{width:100%;height:160px;object-fit:cover}.bonus-item-preview span{font-size:2.5rem}
@media(max-width:900px){.admin-ecosystem-grid{grid-template-columns:1fr}.bonus-store-hero{align-items:stretch}.ecosystem-ledger-list article{grid-template-columns:minmax(0,1fr) auto}}
@media(max-width:600px){.bonus-store-hero{display:grid}.bonus-store-hero>strong{min-width:0}.bonus-item-editor{grid-template-columns:1fr}.bonus-item-editor label,.bonus-item-preview{grid-column:1!important}.ecosystem-admin-list article,.ecosystem-ledger-list article{grid-template-columns:1fr}.ecosystem-admin-list article>div{justify-content:flex-start}.catalog-wallet{flex-wrap:wrap}.catalog-wallet>span{min-width:88px}}
.media-editor-layout{display:grid;grid-template-columns:minmax(360px,1.15fr) minmax(300px,.85fr);gap:18px;margin:18px 0 26px}.media-editor-workbench,.media-editor-controls{border:1px solid rgba(224,173,40,.25);border-radius:18px;background:rgba(4,17,25,.72);padding:16px}.media-editor-canvas-wrap{position:relative;display:grid;place-items:center;overflow:hidden;max-width:620px;aspect-ratio:1;margin:auto;border-radius:16px;background-color:#101820;background-image:linear-gradient(45deg,rgba(255,255,255,.055) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.055) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.055) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.055) 75%);background-size:28px 28px;background-position:0 0,0 14px,14px -14px,-14px 0}.media-editor-canvas-wrap canvas{display:block;width:100%;height:100%}.media-editor-canvas-wrap>div{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:8px;color:#91a0ad;background:rgba(4,11,16,.72)}.media-editor-canvas-wrap>div.hidden{display:none}.media-editor-canvas-wrap>div span{font-size:64px;color:#dba925}.media-editor-file-row,.media-editor-actions{display:flex;gap:10px;align-items:center;margin-top:14px}.media-editor-file-row input{position:absolute;inline-size:1px;block-size:1px;opacity:0}.media-editor-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px}.media-editor-controls>label:first-child,.media-editor-controls>label:nth-child(2),.media-editor-controls>.checkline,.media-editor-controls>.media-editor-actions,.media-editor-controls>button,.media-editor-controls>p{grid-column:1/-1}.media-editor-controls label{display:grid;gap:7px;color:#aebbc6}.media-editor-controls output{float:right;color:#efbd36}.media-editor-controls input[type=range]{width:100%}.media-library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}.media-library-card{display:grid;gap:10px;padding:12px;border:1px solid rgba(224,173,40,.2);border-radius:16px;background:rgba(6,22,25,.82)}.media-library-card>div:first-child{aspect-ratio:1;display:grid;place-items:center;overflow:hidden;border-radius:12px;background:#0b1118}.media-library-card img{width:100%;height:100%;object-fit:contain}.media-library-card header{display:grid;gap:3px}.media-library-card header small{color:#8fa0aa}.media-library-card>span{justify-self:start;padding:4px 9px;border-radius:999px;background:#172a25;color:#a7dcc1;font-size:12px}.media-library-card footer{display:flex;gap:8px;flex-wrap:wrap}.catalog-product-icon img,.catalog-spotlight-icon img{width:100%;height:100%;object-fit:contain;border-radius:inherit}
@media(max-width:900px){.media-editor-layout{grid-template-columns:1fr}.media-editor-controls{grid-template-columns:1fr 1fr}.media-library-grid{grid-template-columns:repeat(2,minmax(180px,1fr))}}
@media(max-width:560px){.media-editor-controls{grid-template-columns:1fr}.media-editor-controls>*{grid-column:1!important}.media-library-grid{grid-template-columns:1fr}}
.media-editor-file-row .profile-file-picker{color:#07161c;text-shadow:none}
@media(max-width:600px){body.admin-view-active .admin-view.app-panel-view:not(.hidden){grid-template-columns:minmax(0,1fr)!important;grid-template-rows:64px minmax(0,1fr)!important}.admin-global-header{grid-template-columns:minmax(0,1fr);padding:7px 10px}.admin-global-brand,.admin-global-tools{display:none}.admin-global-title{gap:9px}.admin-global-title>.admin-rail-toggle{width:42px;height:42px;min-width:42px;display:grid;place-items:center;border:1px solid #a6791e;border-radius:9px;padding:0;background:#071016;color:#e9b944;font-size:23px}.admin-global-title>strong{overflow:hidden;font-size:18px;text-overflow:ellipsis}.admin-global-title>b{font-size:18px}.admin-view>.app-view-rail{position:fixed;z-index:60;top:64px;bottom:0;left:0;width:min(82vw,300px);height:auto;transform:translateX(-105%);transition:transform .22s ease;box-shadow:18px 0 40px rgb(0 0 0 / 55%)}.admin-view.admin-rail-open>.app-view-rail{transform:translateX(0)}.admin-view>.app-view-stage{grid-column:1;grid-row:2;padding:6px}.admin-media-section{padding:12px}.media-editor-layout{gap:12px}.media-editor-workbench,.media-editor-controls{padding:10px}}
.admin-global-title>.admin-rail-toggle{width:48px;height:48px;min-width:48px;display:grid;place-items:center;border:1px solid #a6791e;border-radius:10px;padding:0;background:#050b0d;color:#e9b944;font-size:24px;line-height:1}.admin-global-title>.admin-rail-toggle:hover{border-color:#e0b643;background:#102129}
@media(max-width:600px){.admin-global-title>.admin-rail-toggle{width:42px;height:42px;min-width:42px;border-radius:9px;font-size:23px}.admin-view>.app-view-rail{flex-direction:column;align-items:stretch;gap:7px;padding:10px}.admin-view>.app-view-rail nav{width:100%;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;overflow-x:hidden;overflow-y:auto}.admin-view>.app-view-rail nav button{width:100%;min-width:0;min-height:42px;grid-template-columns:30px minmax(0,1fr);text-align:left}.admin-view>.app-view-rail nav button>strong{font-size:11px}.admin-view>.app-view-home{width:100%;min-height:42px}}
/* No-code content studio */
#adminCatalogEditorSection { padding: 0; overflow: hidden; background: linear-gradient(145deg, rgba(12,31,27,.98), rgba(7,19,17,.98)); border: 1px solid rgba(218,181,88,.24); }
.admin-view [data-panel-page="economy"].panel-page-active { grid-auto-rows: max-content; }
.admin-view [data-panel-page="economy"].panel-page-active > .box { height: max-content !important; min-height: max-content; overflow: hidden; }
.content-studio-heading { display:flex; justify-content:space-between; gap:24px; align-items:flex-end; padding:26px 28px 20px; border-bottom:1px solid rgba(255,255,255,.08); background:radial-gradient(circle at 80% -20%,rgba(218,181,88,.13),transparent 40%); }
.content-studio-heading h2,.content-studio-heading p { margin:4px 0 0; }
.content-studio-heading p { color:var(--muted); max-width:680px; }
.content-studio-tabs { display:flex; gap:6px; padding:5px; border-radius:14px; background:rgba(0,0,0,.28); }
.content-studio-tabs button { white-space:nowrap; background:transparent; box-shadow:none; }
.content-studio-tabs button.selected { color:#172019; background:linear-gradient(135deg,#f5d98c,#c99a39); }
.content-studio-status { margin:0; min-height:42px; padding:12px 28px; color:#efdca5; background:rgba(218,181,88,.07); border-bottom:1px solid rgba(255,255,255,.06); }
.content-studio-layout { display:grid; grid-template-columns:minmax(280px,32%) minmax(0,1fr); min-width:0; }
.content-template-panel { padding:22px; border-right:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.14); min-width:0; }
.content-template-panel>header,.content-editor-panel>header,.content-effects-panel>header,.content-library-panel>header { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.content-template-panel h3,.content-editor-panel h3,.content-effects-panel h3,.content-library-panel h3 { margin:0; }
.content-template-panel>input,.content-template-panel>select { width:100%; margin-top:12px; }
.content-template-grid { display:grid; gap:10px; margin-top:16px; max-height:720px; overflow:auto; padding-right:5px; }
.content-template-grid button { display:grid; text-align:left; gap:4px; width:100%; padding:14px; border:1px solid rgba(255,255,255,.09); border-radius:14px; color:inherit; background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.025)); box-shadow:none; }
.content-template-grid button:hover { border-color:rgba(229,190,90,.52); transform:translateY(-1px); }
.content-template-grid button span { color:#d9b65a; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; }
.content-template-grid button small { color:var(--muted); line-height:1.35; }
.content-template-grid button em { color:#9bcbbd; font-size:.72rem; font-style:normal; }
.content-editor-panel { padding:24px 28px 28px; min-width:0; }
.content-editor-panel>header span { color:#d9b65a; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; }
.content-editor-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:20px; }
.content-editor-form label { display:grid; gap:7px; color:#d9e5df; font-size:.84rem; }
.content-editor-form .wide { grid-column:1/-1; }
.content-editor-form input,.content-editor-form textarea,.content-editor-form select { width:100%; }
.content-effects-panel { margin-top:22px; padding-top:20px; border-top:1px solid rgba(255,255,255,.08); }
.content-effects-panel header p,.content-library-panel header p { margin:4px 0 0; color:var(--muted); }
.content-effects-panel header>span { color:#efdca5; white-space:nowrap; }
.content-effects-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:16px; }
.content-effects-grid fieldset { display:grid; gap:8px; margin:0; padding:12px; border:1px solid rgba(255,255,255,.08); border-radius:14px; }
.content-effects-grid legend { padding:0 6px; color:#d9b65a; font-weight:700; }
.content-effect-option { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px; border:1px solid rgba(255,255,255,.07); border-radius:11px; cursor:pointer; background:rgba(255,255,255,.025); }
.content-effect-option.selected { border-color:rgba(218,181,88,.48); background:rgba(218,181,88,.08); }
.content-effect-option input[type=checkbox] { width:18px; height:18px; }
.content-effect-option input[type=number] { width:76px; }
.content-effect-option span { display:grid; gap:2px; }
.content-effect-option small { color:var(--muted); line-height:1.25; }
.content-live-preview { position:relative; display:grid; grid-template-columns:92px minmax(0,1fr) auto; gap:18px; align-items:center; margin-top:22px; padding:20px; border:1px solid rgba(218,181,88,.26); border-radius:18px; background:linear-gradient(135deg,rgba(218,181,88,.1),rgba(26,95,73,.12)); overflow:hidden; }
.content-live-preview img,.content-preview-placeholder { width:92px; height:92px; object-fit:cover; display:grid; place-items:center; border-radius:16px; background:rgba(0,0,0,.3); color:#e8c76f; font-size:2.2rem; }
.content-live-preview h3,.content-live-preview p { margin:3px 0; }
.content-live-preview p { color:var(--muted); }
.content-live-preview>div>div { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.content-live-preview>div span { padding:4px 7px; border-radius:8px; background:rgba(19,92,69,.32); font-size:.76rem; }
.content-live-preview aside { display:grid; gap:4px; text-align:right; }
.content-live-preview aside strong { color:#f1d683; font-size:1.15rem; }
.content-live-preview footer { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:8px; padding-top:12px; border-top:1px solid rgba(255,255,255,.08); font-size:.78rem; }
.content-live-preview footer.has-errors { color:#efaa9e; }
.content-live-preview footer.is-valid { color:#8ce0bb; }
.content-editor-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }
.content-reward-editor { grid-column:1/-1; max-width:1100px; width:100%; margin:auto; }
.content-library-panel { padding:24px 28px 28px; border-top:1px solid rgba(255,255,255,.08); }
.content-library-panel>header select { width:auto; min-width:180px; }
.content-library-grid { display:grid; gap:10px; margin-top:16px; }
.content-library-grid article { display:grid; grid-template-columns:58px minmax(0,1fr) auto; gap:14px; align-items:center; padding:12px 14px; border:1px solid rgba(255,255,255,.08); border-radius:14px; background:rgba(255,255,255,.03); }
.content-library-art,.content-library-art img { width:58px; height:58px; object-fit:cover; display:grid; place-items:center; border-radius:12px; background:rgba(0,0,0,.24); color:#d9b65a; font-size:1.5rem; }
.content-library-grid article>div:nth-child(2) { display:grid; gap:3px; }
.content-library-grid article>div:nth-child(2)>span { color:#d9b65a; font-size:.72rem; text-transform:uppercase; }
.content-library-grid article small { color:var(--muted); }
.content-library-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
@media (max-width:900px){.content-studio-heading{align-items:stretch;flex-direction:column}.content-studio-tabs button{flex:1}.content-studio-layout{grid-template-columns:1fr}.content-template-panel{border-right:0;border-bottom:1px solid rgba(255,255,255,.08)}.content-template-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:380px}.content-effects-grid{grid-template-columns:1fr}.content-live-preview{grid-template-columns:72px minmax(0,1fr)}.content-live-preview img,.content-preview-placeholder{width:72px;height:72px}.content-live-preview aside{grid-column:1/-1;text-align:left}.content-library-grid article{grid-template-columns:48px minmax(0,1fr)}.content-library-actions{grid-column:1/-1;justify-content:flex-start}}
@media (max-width:540px){.content-studio-heading,.content-editor-panel,.content-template-panel,.content-library-panel{padding:18px}.content-studio-status{padding:10px 18px}.content-studio-tabs{width:100%;overflow:auto}.content-template-grid,.content-editor-form{grid-template-columns:1fr}.content-editor-form .wide{grid-column:auto}.content-live-preview{grid-template-columns:1fr}.content-live-preview img,.content-preview-placeholder{width:100%;height:150px}.content-editor-actions{flex-direction:column}.content-editor-actions button{width:100%}.content-library-panel>header{align-items:stretch;flex-direction:column}.content-library-panel>header select{width:100%}.content-library-actions button{flex:1}}

/* No-code achievements */
.achievement-studio{min-width:0;overflow:hidden;padding:0;background:linear-gradient(145deg,rgba(13,31,28,.98),rgba(8,19,18,.98));border-color:rgba(218,181,88,.24)}
.admin-view [data-panel-page="rewards"].panel-page-active{grid-auto-rows:max-content}.admin-view [data-panel-page="rewards"].panel-page-active>.box{height:max-content!important;min-height:max-content;overflow:hidden}
.achievement-studio>.section-heading{padding:24px 28px 18px;border-bottom:1px solid rgba(255,255,255,.08);background:radial-gradient(circle at 80% -30%,rgba(218,181,88,.14),transparent 42%)}
.achievement-studio>.section-heading h2,.achievement-studio>.section-heading p{margin:4px 0 0}.achievement-studio>.section-heading p{max-width:720px;color:var(--muted)}
.achievement-studio-metrics{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:10px;padding:16px 28px;border-bottom:1px solid rgba(255,255,255,.07)}
.achievement-studio-metrics article{display:grid;gap:3px;padding:12px 14px;border:1px solid rgba(218,181,88,.18);border-radius:13px;background:rgba(255,255,255,.035)}
.achievement-studio-metrics small{color:var(--muted)}.achievement-studio-metrics strong{color:#f1d47f;font-size:1.35rem}
.achievement-studio-layout{display:grid;grid-template-columns:minmax(260px,30%) minmax(0,1fr)}
.achievement-template-panel{min-width:0;padding:22px;border-right:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.14)}
.achievement-template-panel>header{display:grid;gap:3px}.achievement-template-panel>header small{color:var(--muted)}.achievement-template-panel>input,.achievement-template-panel>select{width:100%;margin-top:11px}
.achievement-template-list{display:grid;gap:9px;max-height:620px;margin-top:14px;padding-right:4px;overflow:auto}
.achievement-template-list button{display:grid;gap:4px;width:100%;padding:12px;text-align:left;color:inherit;border:1px solid rgba(255,255,255,.09);border-radius:13px;background:rgba(255,255,255,.035);box-shadow:none}
.achievement-template-list button:hover{transform:translateY(-1px);border-color:rgba(218,181,88,.48)}.achievement-template-list span{color:#d9b65a;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}.achievement-template-list small{color:var(--muted);line-height:1.35}
.achievement-editor-panel{min-width:0;padding:22px 28px 28px}.achievement-editor-panel>header{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}.achievement-editor-panel>header h3{margin:6px 0 0}.achievement-editor-panel>header p{max-width:420px;margin:0;text-align:right}
.achievement-editor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-top:18px}.achievement-editor-grid label{display:grid;gap:6px;color:#d9e5df;font-size:.84rem}.achievement-editor-grid .wide{grid-column:1/-1}.achievement-editor-grid input,.achievement-editor-grid select,.achievement-editor-grid textarea{width:100%}
.achievement-live-preview{display:grid;grid-template-columns:90px minmax(0,1fr);gap:17px;align-items:center;margin-top:20px;padding:18px;border:1px solid rgba(218,181,88,.26);border-radius:18px;background:linear-gradient(135deg,rgba(218,181,88,.1),rgba(25,91,71,.12))}
.achievement-live-preview img,.achievement-preview-placeholder{display:grid;place-items:center;width:90px;height:90px;object-fit:cover;border-radius:50%;background:radial-gradient(circle,#745d2d,#171f1b);color:#f2d378;font-size:2.2rem;border:1px solid rgba(232,199,111,.46)}
.achievement-live-preview>div{display:grid;gap:4px}.achievement-live-preview small{color:#d9b65a;text-transform:uppercase;letter-spacing:.08em}.achievement-live-preview h3,.achievement-live-preview p{margin:0}.achievement-live-preview p{color:var(--muted)}.achievement-live-preview>div>strong{margin-top:5px}.achievement-live-preview em{color:#9dceb9;font-size:.78rem;font-style:normal}
.achievement-live-preview footer{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;padding-top:11px;border-top:1px solid rgba(255,255,255,.08);font-size:.78rem}.achievement-live-preview footer.has-errors{color:#efaa9e}.achievement-live-preview footer.is-valid{color:#8ce0bb}
.achievement-library-panel{padding:22px 28px 28px;border-top:1px solid rgba(255,255,255,.08)}.achievement-library-panel>header{display:flex;justify-content:space-between;gap:18px;align-items:center}.achievement-library-panel h3,.achievement-library-panel p{margin:0}.achievement-library-panel p{color:var(--muted)}
.achievement-library-grid{display:grid;gap:10px;margin-top:15px}.achievement-library-grid article{display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 14px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.03)}
.achievement-library-art,.achievement-library-art img{display:grid;place-items:center;width:58px;height:58px;object-fit:cover;border-radius:50%;background:rgba(0,0,0,.26);color:#e0bf65;font-size:1.5rem}.achievement-library-grid article>div:nth-child(2){display:grid;gap:3px}.achievement-library-grid article>div:nth-child(2)>span{color:#d9b65a;font-size:.72rem;text-transform:uppercase}.achievement-library-grid small{color:var(--muted)}.achievement-library-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
@media(max-width:900px){.achievement-studio-layout{grid-template-columns:1fr}.achievement-template-panel{border-right:0;border-bottom:1px solid rgba(255,255,255,.08)}.achievement-template-list{grid-template-columns:repeat(2,minmax(0,1fr));max-height:340px}.achievement-library-grid article{grid-template-columns:50px minmax(0,1fr)}.achievement-library-actions{grid-column:1/-1;justify-content:flex-start}}
@media(max-width:560px){.achievement-studio>.section-heading,.achievement-editor-panel,.achievement-template-panel,.achievement-library-panel{padding:17px}.achievement-studio>.section-heading{align-items:stretch}.achievement-studio>.section-heading button{width:100%}.achievement-studio-metrics{grid-template-columns:repeat(2,minmax(0,1fr));padding:13px 17px}.achievement-template-list,.achievement-editor-grid{grid-template-columns:1fr}.achievement-editor-grid .wide{grid-column:auto}.achievement-editor-panel>header,.achievement-library-panel>header{align-items:stretch;flex-direction:column}.achievement-editor-panel>header p{text-align:left}.achievement-live-preview{grid-template-columns:1fr}.achievement-live-preview img,.achievement-preview-placeholder{width:100%;height:150px;border-radius:16px}.achievement-library-panel select{width:100%}.achievement-library-actions button{flex:1}}

/* No-code collections */
.admin-view [data-panel-page="collections"].panel-page-active{grid-auto-rows:max-content}.admin-view [data-panel-page="collections"].panel-page-active>.box{height:max-content!important;min-height:max-content;overflow:hidden}
.collection-studio{min-width:0;padding:0;overflow:hidden;background:linear-gradient(145deg,rgba(13,31,28,.98),rgba(8,19,18,.98));border-color:rgba(218,181,88,.24)}
.collection-studio .content-studio-heading{background:radial-gradient(circle at 82% -35%,rgba(218,181,88,.15),transparent 44%)}
.collection-studio-layout{display:grid;grid-template-columns:minmax(280px,32%) minmax(0,1fr);min-width:0}
.collection-guidance-panel{padding:25px;border-right:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.14)}
.collection-guidance-panel h3{margin:7px 0 15px}.collection-guidance-panel ol{display:grid;gap:13px;margin:0;padding-left:22px;color:#d9e5df}.collection-guidance-panel li::marker{color:#d9b65a;font-weight:800}.collection-guidance-panel p{margin:20px 0 0;color:var(--muted);line-height:1.5}
.collection-picker-panel{margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08)}
.collection-picker-panel>header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.collection-picker-panel h3,.collection-picker-panel p{margin:0}.collection-picker-panel p{margin-top:4px;color:var(--muted)}.collection-picker-panel>header>span{color:#efdca5;white-space:nowrap}
.collection-emoji-palette{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}.collection-emoji-palette fieldset{margin:0;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:14px}.collection-emoji-palette legend{padding:0 6px;color:#d9b65a;font-weight:700}.collection-emoji-palette fieldset>div{display:grid;grid-template-columns:repeat(5,minmax(38px,1fr));gap:7px}
.collection-emoji-palette button{display:grid;place-items:center;min-width:0;height:42px;padding:0;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(255,255,255,.035);box-shadow:none;font-size:1.35rem}.collection-emoji-palette button:hover,.collection-emoji-palette button.selected{transform:none;border-color:rgba(228,193,100,.7);background:rgba(218,181,88,.16)}
.collection-preview-emojis span{font-size:1.15rem}.collection-studio .content-template-grid button>span{font-size:1.1rem;letter-spacing:.04em;text-transform:none}
@media(max-width:1100px){.collection-studio-layout{grid-template-columns:1fr}.collection-guidance-panel{border-right:0;border-bottom:1px solid rgba(255,255,255,.08)}.collection-studio .content-template-panel{border-right:0;border-bottom:1px solid rgba(255,255,255,.08)}.collection-studio .content-template-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:380px}}
@media(max-width:900px){.collection-emoji-palette{grid-template-columns:1fr}}
@media(max-width:560px){.collection-guidance-panel{padding:18px}.collection-picker-panel>header{flex-direction:column}.collection-studio .content-template-grid{grid-template-columns:1fr}.collection-emoji-palette fieldset>div{grid-template-columns:repeat(4,minmax(38px,1fr))}}

/* Personal emoji editor and moderation */
.personal-emoji-section{display:grid;gap:15px;margin-top:16px;padding:20px;border:1px solid rgba(222,186,87,.2);border-radius:20px;background:radial-gradient(circle at 92% 0,rgba(217,180,77,.12),transparent 38%),linear-gradient(145deg,rgba(13,38,29,.9),rgba(5,20,14,.94))}
.personal-emoji-section>header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.personal-emoji-section h3,.personal-emoji-section p{margin:3px 0}.personal-emoji-section>header p{color:var(--muted)}.personal-emoji-section>header>span{padding:7px 10px;border:1px solid rgba(218,181,88,.25);border-radius:999px;color:#e9ce7c;background:rgba(0,0,0,.2);font-size:.76rem;white-space:nowrap}
.personal-emoji-locked{display:flex;align-items:center;gap:15px;padding:17px;border:1px dashed rgba(218,181,88,.32);border-radius:16px;background:rgba(0,0,0,.18)}.personal-emoji-locked>span{display:grid;place-items:center;width:52px;aspect-ratio:1;border-radius:15px;background:rgba(218,181,88,.12);color:#ebce77;font-size:1.8rem}.personal-emoji-locked>div{min-width:0;flex:1}.personal-emoji-locked strong{color:#f1dfaa}.personal-emoji-locked p{color:var(--muted)}
.personal-emoji-workspace{display:grid;grid-template-columns:minmax(220px,340px) minmax(280px,1fr);gap:18px}.personal-emoji-canvas-wrap{position:relative;display:grid;place-items:center;overflow:hidden;aspect-ratio:1;border:1px solid rgba(218,181,88,.25);border-radius:19px;background-color:#0b1714;background-image:linear-gradient(45deg,rgba(255,255,255,.045) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.045) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.045) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.045) 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0}.personal-emoji-canvas-wrap canvas{display:block;width:100%;height:100%}.personal-emoji-canvas-wrap>div{position:absolute;inset:0;display:grid;place-content:center;gap:5px;text-align:center;color:var(--muted);background:rgba(3,14,10,.72)}.personal-emoji-canvas-wrap>div.hidden{display:none}.personal-emoji-canvas-wrap>div span{color:#dfc066;font-size:3rem}
.personal-emoji-controls{display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:12px;padding:2px}.personal-emoji-controls>label{display:grid;gap:6px;color:#cbd8d1;font-size:.82rem}.personal-emoji-controls>label:first-child,.personal-emoji-controls>label:nth-of-type(2),.personal-emoji-controls>label:nth-of-type(3),.personal-emoji-controls>button,.personal-emoji-controls>p{grid-column:1/-1}.personal-emoji-controls>div{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:9px}.personal-emoji-controls>div input{position:absolute;width:1px;height:1px;opacity:0}.personal-emoji-controls input[type=range]{width:100%}.personal-emoji-controls output{float:right;color:#e9c866}.personal-emoji-controls .profile-file-picker{display:inline-flex;align-items:center;justify-content:center;margin:0;padding:10px 14px;border-radius:10px;color:#092016;background:linear-gradient(135deg,#f0cf77,#c89436);cursor:pointer;font-weight:800}.personal-emoji-controls>button{justify-self:start}.personal-emoji-controls>p{min-height:20px}
.personal-emoji-controls>.checkline{display:flex;align-items:center;gap:9px}.personal-emoji-controls>.checkline input[type=checkbox]{flex:0 0 18px;width:18px;height:18px;margin:0}
.personal-emoji-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px}.personal-emoji-grid>article{display:grid;grid-template-rows:auto auto auto 1fr auto;gap:6px;padding:10px;border:1px solid rgba(255,255,255,.08);border-radius:15px;background:rgba(0,0,0,.18)}.personal-emoji-grid>article>div{display:grid;place-items:center;aspect-ratio:1;overflow:hidden;border-radius:12px;background:rgba(255,255,255,.04)}.personal-emoji-grid img{width:100%;height:100%;object-fit:contain}.personal-emoji-grid strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.personal-emoji-grid span{justify-self:start;padding:3px 7px;border-radius:999px;color:#b7c8bf;background:rgba(255,255,255,.07);font-size:.68rem}.personal-emoji-grid .status-approved{color:#88dfad;background:rgba(45,139,85,.16)}.personal-emoji-grid .status-rejected{color:#efa69b;background:rgba(175,62,52,.16)}.personal-emoji-grid p{margin:0;color:#dca49b;font-size:.72rem;line-height:1.35}.personal-emoji-grid button{padding:7px;font-size:.72rem}
.personal-emoji-admin-panel{min-width:0;overflow:hidden;border:1px solid rgba(218,181,88,.22);border-radius:19px;background:linear-gradient(145deg,rgba(13,31,28,.98),rgba(8,19,18,.98))}.personal-emoji-admin-panel>header{display:grid;grid-template-columns:minmax(260px,1fr) minmax(420px,1.2fr);gap:22px;align-items:center;padding:22px 28px;border-bottom:1px solid rgba(255,255,255,.08);background:radial-gradient(circle at 8% 0,rgba(218,181,88,.12),transparent 42%)}.personal-emoji-admin-panel h3,.personal-emoji-admin-panel p{margin:4px 0}.personal-emoji-admin-panel p{color:var(--muted)}.personal-emoji-admin-settings{display:grid;grid-template-columns:1fr 150px 180px auto;gap:10px;align-items:end}.personal-emoji-admin-settings label{display:grid;gap:6px;color:#cbd8d1;font-size:.78rem}.personal-emoji-admin-settings .checkline{display:flex;align-items:center;padding-bottom:10px}.personal-emoji-admin-settings input[type=number]{width:100%}
.personal-emoji-moderation-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px;padding:20px 28px 28px}.personal-emoji-moderation-card{display:grid;grid-template-columns:100px minmax(0,1fr);gap:13px;padding:12px;border:1px solid rgba(255,255,255,.09);border-radius:16px;background:rgba(255,255,255,.035)}.personal-emoji-moderation-card.status-pending{border-color:rgba(224,180,67,.3)}.personal-emoji-moderation-preview{display:grid;place-items:center;overflow:hidden;aspect-ratio:1;border-radius:13px;background:rgba(0,0,0,.25)}.personal-emoji-moderation-preview img{width:100%;height:100%;object-fit:contain}.personal-emoji-moderation-copy{display:grid;align-content:start;gap:4px;min-width:0}.personal-emoji-moderation-copy>span{justify-self:start;color:#e8c96f;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase}.personal-emoji-moderation-copy h4,.personal-emoji-moderation-copy p{overflow:hidden;margin:0;text-overflow:ellipsis;white-space:nowrap}.personal-emoji-moderation-copy p,.personal-emoji-moderation-copy small{color:var(--muted)}.personal-emoji-moderation-copy em{margin-top:4px;color:#dea49c;font-size:.72rem;font-style:normal;line-height:1.35}.personal-emoji-moderation-actions{grid-column:1/-1;display:flex;gap:8px}.personal-emoji-moderation-actions button{flex:1;padding:8px}.personal-emoji-moderation-empty{grid-column:1/-1;display:grid;place-items:center;gap:4px;min-height:160px;color:var(--muted);text-align:center}.personal-emoji-moderation-empty span{color:#8adbb0;font-size:2rem}.personal-emoji-moderation-empty p{margin:0}
@media(max-width:1050px){.personal-emoji-admin-panel>header{grid-template-columns:1fr}.personal-emoji-admin-settings{grid-template-columns:1fr 1fr 1fr auto}}
@media(max-width:760px){.personal-emoji-section{padding:15px}.personal-emoji-section>header{display:grid}.personal-emoji-section>header>span{justify-self:start}.personal-emoji-workspace{grid-template-columns:1fr}.personal-emoji-canvas-wrap{width:min(100%,340px);margin:auto}.personal-emoji-admin-panel>header,.personal-emoji-moderation-grid{padding:17px}.personal-emoji-admin-settings{grid-template-columns:1fr 1fr}.personal-emoji-admin-settings .checkline,.personal-emoji-admin-settings button{grid-column:1/-1}.personal-emoji-moderation-grid{grid-template-columns:1fr}}
@media(max-width:480px){.personal-emoji-locked{display:grid}.personal-emoji-locked button{width:100%}.personal-emoji-controls{grid-template-columns:1fr}.personal-emoji-controls>*{grid-column:1!important}.personal-emoji-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.personal-emoji-admin-settings{grid-template-columns:1fr}.personal-emoji-admin-settings>*{grid-column:1!important}.personal-emoji-moderation-card{grid-template-columns:78px minmax(0,1fr)}}
.personal-emoji-heading-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}.personal-emoji-heading-actions>span{padding:7px 10px;border:1px solid rgba(218,181,88,.25);border-radius:999px;color:#e9ce7c;background:rgba(0,0,0,.2);font-size:.76rem;white-space:nowrap}.personal-emoji-heading-actions button{padding:8px 12px}
.personal-emoji-controls>.personal-emoji-draft-heading{display:flex;justify-content:space-between;align-items:center;padding-top:10px;border-top:1px solid rgba(255,255,255,.08)}.personal-emoji-draft-heading span{color:#e9c866}.personal-emoji-controls>.personal-emoji-draft-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}.personal-emoji-draft-grid>p{grid-column:1/-1}.personal-emoji-draft-grid article{position:relative;min-width:0;border:1px solid rgba(255,255,255,.09);border-radius:12px;background:rgba(0,0,0,.2)}.personal-emoji-draft-grid article.selected{border-color:#e0ba57;box-shadow:0 0 0 2px rgba(224,186,87,.12)}.personal-emoji-draft-grid article>button:first-child{display:grid;gap:4px;width:100%;padding:7px;color:inherit;background:none;box-shadow:none}.personal-emoji-draft-grid img{width:100%;aspect-ratio:1;object-fit:contain;border-radius:8px;background:#07130f}.personal-emoji-draft-grid span{overflow:hidden;font-size:.67rem;text-overflow:ellipsis;white-space:nowrap}.personal-emoji-draft-grid article>button:last-child{position:absolute;top:3px;right:3px;width:25px;height:25px;padding:0;border-radius:50%}.personal-emoji-controls>.personal-emoji-submit-row{display:flex;gap:9px}.personal-emoji-submit-row button{flex:1}
.personal-emoji-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}.personal-emoji-grid>.personal-emoji-pack-card{display:grid;grid-template-rows:auto auto 1fr auto}.personal-emoji-pack-card>header{display:flex;align-items:flex-start;justify-content:space-between;gap:9px}.personal-emoji-pack-card>header>div{display:grid;gap:4px}.personal-emoji-pack-card>header small{color:var(--muted);white-space:nowrap}.personal-emoji-grid>.personal-emoji-pack-card>.personal-emoji-pack-mosaic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;aspect-ratio:auto;padding:7px}.personal-emoji-pack-mosaic img{min-width:0;aspect-ratio:1;object-fit:contain;border-radius:8px;background:#07130f}
.personal-emoji-admin-settings{grid-template-columns:repeat(2,minmax(0,1fr))}.personal-emoji-moderation-card{grid-template-columns:130px minmax(0,1fr)}.personal-emoji-moderation-preview.personal-emoji-pack-mosaic{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-self:start;align-content:center;gap:4px;aspect-ratio:1}.personal-emoji-moderation-preview.personal-emoji-pack-mosaic img{aspect-ratio:1;border-radius:6px}
@media(max-width:1200px){.personal-emoji-admin-settings{grid-template-columns:repeat(2,minmax(0,1fr))}.personal-emoji-admin-settings .checkline,.personal-emoji-admin-settings button{grid-column:1/-1}}
@media(max-width:760px){.personal-emoji-heading-actions{justify-content:flex-start}.personal-emoji-grid{grid-template-columns:1fr}.personal-emoji-controls>.personal-emoji-submit-row{display:grid}.personal-emoji-moderation-card{grid-template-columns:110px minmax(0,1fr)}}
@media(max-width:480px){.personal-emoji-admin-settings{grid-template-columns:1fr}.personal-emoji-draft-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.personal-emoji-moderation-card{grid-template-columns:90px minmax(0,1fr)}}
.admin-view [data-panel-page="moderation"].panel-page-active { grid-auto-rows: max-content; }
.admin-view [data-panel-page="moderation"].panel-page-active > .box { height: max-content !important; min-height: max-content; }
.social-settings-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.social-settings-form fieldset { display: grid; align-content: start; gap: 12px; min-width: 0; margin: 0; padding: 16px; border: 1px solid rgba(218,181,88,.25); border-radius: 12px; }
.social-settings-form legend { padding: 0 6px; color: #e9ce7c; }
.social-settings-form label { display: grid; gap: 6px; min-width: 0; }
.social-settings-form label.checkline { display: flex; align-items: center; }
.social-settings-form input[type="number"] { width: 100%; min-width: 0; }
.social-settings-form p { margin: 0; }
.social-settings-actions { display: flex; gap: 10px; flex-wrap: wrap; grid-column: 1 / -1; }
#socialSettingsStatus { grid-column: 1 / -1; overflow-wrap: anywhere; }
@media (max-width: 760px) { .social-settings-form { grid-template-columns: minmax(0, 1fr); } .social-settings-actions button { flex: 1 1 200px; } }

/* Critical table images: readable trump while the image recovers. */
.trump-upcard { position: relative; }
.trump-upcard .trump-card-fallback { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 7px; background: #f5ead0; color: #17251e; font: 700 22px/1 Georgia, serif; }
.trump-upcard.red .trump-card-fallback { color: #b32338; }
.trump-upcard[data-card-art-state="ready"] .trump-card-fallback { display: none; }
.trump-upcard[data-card-art-state]:not([data-card-art-state="ready"]) .card-art { visibility: hidden; }