/* Mưa lì xì: lớp sân khấu riêng, shell và chữ vẫn theo palette Spotify. */
.lr-dock { position: fixed; right: 24px; top: 86px; z-index: 90; }
.lr-ribbon { display: flex; align-items: center; gap: 13px; padding: 10px 17px 10px 8px; border: 1px solid var(--sp-border); border-radius: 19px; color: var(--sp-text); background: var(--sp-surface, var(--sp-bg-elevated, #fff)); box-shadow: 0 10px 36px #00000019; cursor: pointer; text-align: left; font: inherit; transition: border-color .3s, transform .3s, box-shadow .3s; isolation: isolate; }
.lr-ribbon:hover { transform: translateY(-3px); border-color: #c39a51; box-shadow: 0 12px 36px #00000025; }
.lr-ribbon:focus-visible, .lr-open-button:focus-visible, .lr-scene__skip:focus-visible, .lr-preview__tier:focus-visible { outline: 3px solid #e8ba68; outline-offset: 4px; }
.lr-ribbon__icon { width: 45px; height: 49px; display: grid; place-items: center; background: linear-gradient(145deg, #efc86b26, #e8615020); border-radius: 12px; }
.lr-envelope--mini { width: 35px; height: 44px; }
.lr-ribbon__copy { display: flex; flex-direction: column; gap: 5px; }
.lr-ribbon__eyebrow { font-size: 9px; letter-spacing: 1.5px; color: #99641e; font-weight: 800; }
.lr-ribbon__copy strong { font-size: 12px; font-weight: 600; }
.lr-ribbon__time { font-size: 23px; font-weight: 650; line-height: 1; font-variant-numeric: tabular-nums; border-left: 1px solid var(--sp-border); padding-left: 14px; letter-spacing: -.8px; }
.lr-ribbon__time small { display: block; font-size: 7px; margin-top: 7px; letter-spacing: 1px; color: var(--sp-text-muted); }
.lr-ribbon__arrow { font-size: 12px; color: #986023; padding-left: 3px; font-weight: 650; }
.lr-ribbon--live { border-color: #d8ab67; background: linear-gradient(125deg, #fff5d6, #fff9ed); color: #542a20; box-shadow: 0 5px 30px #b281392c; }
.lr-ribbon--live .lr-ribbon__icon { animation: lr-bob 3s ease-in-out infinite; }
:root[data-theme='dark'] .lr-ribbon { background: #232522; }
:root[data-theme='dark'] .lr-ribbon__eyebrow, :root[data-theme='dark'] .lr-ribbon__arrow { color: #e9bc77; }
:root[data-theme='dark'] .lr-ribbon--live { background: linear-gradient(120deg, #3d2922, #24201c); color: #fff2d6; }
.lr-modal .ant-modal-content { padding: 0; border-radius: 28px; overflow: hidden; background: #17151c; box-shadow: 0 30px 120px #0009; }
.lr-modal .ant-modal-close { color: #f3dec1a6; top: 15px; right: 15px; border-radius: 50%; }
.lr-modal .ant-modal-close:hover { color: #fff2d4; background: #ffffff15; }
.lr-modal .ant-modal-body { padding: 0; }
.lr-scene { --lr-accent: #e5ba6e; --lr-glow: #d89849; --lr-secondary: #ce5350; position: relative; min-height: 640px; overflow: hidden; border: 1px solid #eec38235; border-radius: 28px; text-align: center; color: #f9efd9; background: radial-gradient(ellipse at 50% 48%, #49252c 0, #211c27 42%, #14151b 82%); isolation: isolate; }
.lr-scene--bright { --lr-accent: #ffe396; --lr-glow: #f0b338; --lr-secondary: #e08838; background: radial-gradient(ellipse at 50% 46%, #624226, #261e20 44%, #15151b 82%); }
.lr-scene--grand { --lr-accent: #e6b9ff; --lr-glow: #a36ce1; --lr-secondary: #ebcb86; background: radial-gradient(ellipse at 50% 46%, #452868, #241d38 44%, #14131e 82%); }
.lr-scene--legendary { --lr-accent: #ffe8a1; --lr-glow: #f1c15b; --lr-secondary: #fbeed3; background: radial-gradient(ellipse at 50% 43%, #795320, #34271c 43%, #15151a 83%); border-color: #ffe3a270; }
.lr-scene__grain { position: absolute; inset: 0; opacity: .06; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.6' d='M0 0h160v160H0z'/%3E%3C/svg%3E"); }
.lr-scene__stars { position: absolute; inset: 0; pointer-events: none; }
.lr-scene__stars i { position: absolute; left: var(--x); top: var(--y); width: 2px; height: 2px; background: var(--lr-accent); box-shadow: 0 0 9px var(--lr-accent); border-radius: 50%; animation: lr-twinkle 4s ease-in-out var(--delay) infinite; }
.lr-scene__header { position: relative; z-index: 3; padding: 46px 24px 0; }
.lr-scene__eyebrow { display: flex; gap: 10px; justify-content: center; align-items: center; color: #d8ba83; font-size: 9px; font-weight: 600; letter-spacing: 3px; }
.lr-scene__eyebrow > span { width: 22px; height: 1px; background: linear-gradient(90deg, transparent, #d8ba83); }
.lr-scene__eyebrow > span:last-child { transform: rotate(180deg); }
.lr-scene h2 { color: #fff2d9; margin: 17px 0 8px; font: 500 30px/1.3 Georgia, 'Times New Roman', serif; letter-spacing: -.7px; }
.lr-scene__header p { font-size: 12px; color: #d6c3ae; margin: 0; }
.lr-stage { position: relative; height: 340px; display: grid; place-items: center; }
.lr-stage__aura { position: absolute; width: 250px; height: 250px; border-radius: 50%; background: radial-gradient(circle, var(--lr-glow), transparent 68%); opacity: .18; filter: blur(15px); animation: lr-breathe 5s ease-in-out infinite; }
.lr-stage__ring { position: absolute; width: 286px; height: 286px; border: 1px solid #ecc1811c; border-radius: 50%; }
.lr-stage__ring::before, .lr-stage__ring::after { content: ''; position: absolute; width: 4px; height: 4px; background: var(--lr-accent); border-radius: 50%; top: 50%; left: -2px; box-shadow: 0 0 10px var(--lr-accent); }
.lr-stage__ring::after { left: auto; right: -2px; }
.lr-stage__ring--outer { animation: lr-spin 42s linear infinite; }
.lr-stage__ring--inner { width: 256px; height: 256px; border-style: dashed; opacity: .5; animation: lr-spin 60s linear infinite reverse; }
.lr-stage__orbit { position: absolute; width: 300px; height: 300px; opacity: .5; }
.lr-stage__orbit i { position: absolute; top: 50%; left: 50%; font-style: normal; font-size: var(--mote-size); color: var(--lr-accent); animation: lr-wander var(--wander-duration) var(--wander-delay) ease-in-out infinite alternate; transform: translate(var(--anchor-x), var(--anchor-y)); }
.lr-stage__envelope { position: relative; width: 205px; height: 248px; z-index: 2; animation: lr-bob 4.5s ease-in-out infinite; filter: drop-shadow(0 22px 22px #0005); }
.lr-envelope { width: 100%; height: 100%; overflow: visible; }
.lr-envelope__flap { transform-box: view-box; transform-origin: 50% 12%; }
.lr-envelope__seal { transform-box: fill-box; transform-origin: center; }
.lr-stage__rays { position: absolute; width: 440px; height: 440px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, transparent 0deg 13deg, var(--lr-accent) 14deg 15deg, transparent 16deg 30deg); mask-image: radial-gradient(circle, transparent 12%, #0008 26%, transparent 68%); opacity: 0; }
.lr-stage__beam { position: absolute; width: 190px; height: 270px; top: 16px; background: linear-gradient(0deg, var(--lr-glow), transparent 92%); clip-path: polygon(0 0, 100% 0, 62% 100%, 38% 100%); filter: blur(12px); opacity: 0; }
.lr-stage__coins, .lr-stage__fireworks { position: absolute; left: 50%; top: 54%; pointer-events: none; z-index: 4; }
.lr-stage__coins i { position: absolute; display: grid; place-items: center; width: var(--particle-size); height: var(--particle-size); border: 2px solid #ffde8d; border-radius: 50%; background: linear-gradient(145deg, #fff1aa, #bc792a); color: #9b611e; font: bold 14px Georgia, serif; box-shadow: 0 0 12px #f6c46b35; opacity: 0; }
.lr-stage__fireworks i { position: absolute; width: 4px; height: 4px; background: var(--lr-accent); border-radius: 50%; box-shadow: 0 0 12px var(--lr-accent); opacity: 0; }
.lr-stage__fireworks i { width: var(--particle-size); height: var(--particle-size); }
.lr-stage__coins i { filter: hue-rotate(var(--particle-hue)); }
.lr-scene--pending .lr-stage__envelope { animation: lr-breathe 1.8s ease-in-out infinite; filter: drop-shadow(0 0 25px #e7bb6b30); }
.lr-scene--revealing .lr-stage__envelope { animation: lr-open-envelope 1.2s ease both; }
.lr-scene--revealing .lr-envelope__flap { animation: lr-open-flap .7s .12s ease both; }
.lr-scene--revealing .lr-envelope__seal { animation: lr-release-seal .7s ease both; }
.lr-scene--revealing .lr-stage__beam { animation: lr-beam 1.2s .3s ease both; }
.lr-scene--revealing .lr-stage__rays { animation: lr-rays 1.8s .35s ease both; }
.lr-scene--revealing .lr-stage__coins i { animation: var(--flight-name) var(--flight-duration) var(--flight-delay) linear both; }
.lr-scene--small .lr-stage__coins i { width: 5px; height: 5px; font-size: 0; border: 0; }
.lr-scene--small.lr-scene--revealing .lr-stage__rays { opacity: .08; }
.lr-scene--bright.lr-scene--revealing .lr-stage__ring--outer { animation: lr-ring-burst 1.3s .3s ease both; border-color: #ffe39690; }
.lr-scene--bright.lr-scene--revealing .lr-stage__ring--inner { animation: lr-ring-burst 1.3s .55s ease both; border-color: #ffe39690; }
.lr-scene--grand.lr-scene--revealing .lr-stage__ring { animation: lr-ring-burst 1.5s .3s ease both; border-color: #ddb6ff90; }
.lr-scene--grand.lr-scene--revealing .lr-stage__fireworks i { animation: var(--flight-name) var(--flight-duration) var(--flight-delay) linear both; }
.lr-scene--legendary.lr-scene--revealing .lr-stage__envelope { animation: lr-legend-open 2s ease both; }
.lr-scene--legendary.lr-scene--revealing .lr-stage__beam { animation: lr-beam 2.5s .45s ease both; width: 300px; height: 330px; }
.lr-scene--legendary.lr-scene--revealing .lr-stage__rays { animation: lr-rays 2.8s .5s ease both; width: 620px; height: 620px; }
.lr-scene--legendary.lr-scene--revealing .lr-stage__fireworks i { animation: var(--flight-name) var(--flight-duration) var(--flight-delay) linear both; }
.lr-scene--legendary.lr-scene--revealing .lr-stage__coins i { animation: var(--flight-name) var(--flight-duration) var(--flight-delay) linear both; }
.lr-scene--result .lr-stage__envelope { opacity: .13; transform: translateY(46px) scale(.7); animation: none; filter: blur(1px); }
.lr-scene--result .lr-envelope__flap { transform: scaleY(-.65); }
.lr-scene--result .lr-stage__aura { opacity: .3; width: 350px; height: 350px; }
.lr-scene--result .lr-stage__rays { opacity: .16; animation: lr-spin 90s linear infinite; }
.lr-scene--result.lr-scene--legendary .lr-stage__rays { opacity: .34; }
.lr-scene--result.lr-scene--grand .lr-stage__ring, .lr-scene--result.lr-scene--legendary .lr-stage__ring { border-color: #edcb8055; box-shadow: 0 0 30px #ebc87012, inset 0 0 30px #ebc87012; }
.lr-scene--result.lr-scene--legendary .lr-stage__orbit i { font-size: 15px; text-shadow: 0 0 20px #ffcd76; }
.lr-reward { position: absolute; z-index: 5; top: 86px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; animation: lr-reward-enter .7s cubic-bezier(.2,.8,.2,1) both; }
.lr-reward__badge { border: 1px solid color-mix(in srgb, var(--lr-accent) 40%, transparent); background: #ffffff09; border-radius: 30px; padding: 7px 16px; text-transform: uppercase; font-size: 9px; font-weight: 650; letter-spacing: 2px; color: var(--lr-accent); }
.lr-reward__amount { color: var(--lr-accent); font: 500 104px/1.2 Georgia, 'Times New Roman', serif; letter-spacing: -6px; text-shadow: 0 0 45px #e9b05e30; }
.lr-reward__amount > span { font: 300 43px/1 Georgia, serif; vertical-align: 14px; margin-right: 5px; }
.lr-reward__amount small { font: 650 16px/1 system-ui, sans-serif; letter-spacing: 2px; margin-left: 10px; }
.lr-reward__caption { font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: #deccb4; }
.lr-scene--legendary .lr-reward__amount { background: linear-gradient(115deg, #b87c2e, #fff0b5 35%, #fff9db 50%, #dba846 75%, #fff0ac); background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 18px #ffd56845); }
.lr-scene__footer { position: relative; z-index: 6; min-height: 131px; padding: 0 28px 30px; }
.lr-open-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 35px; min-width: 246px; min-height: 48px; padding: 13px 24px; border: 1px solid #ffdfa4; border-radius: 12px; background: linear-gradient(110deg, #ecc888, #ffdfa6, #d6a65f); color: #4b2b1c; font-size: 13px; font-weight: 700; box-shadow: 0 5px 28px #eac28519; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.lr-open-button:hover { transform: translateY(-2px); box-shadow: 0 7px 35px #eac28533; color: #4b2b1c; }
.lr-open-button:disabled { opacity: .45; cursor: default; }
.lr-scene__hint { margin: 14px 0 0; font-size: 10px; color: #c5ae99; letter-spacing: .2px; }
.lr-scene__count-label { display: block; font-size: 9px; letter-spacing: 2px; color: #d1b588; }
.lr-scene__count { display: block; margin-top: 8px; font-size: 36px; font-weight: 400; color: #fce7c0; letter-spacing: 2px; font-variant-numeric: tabular-nums; }
.lr-scene__status { margin: 10px 0 15px; color: #e4c9a2; font-size: 13px; }
.lr-scene__skip { background: none; border: none; color: #c9b79e; font: inherit; font-size: 11px; text-decoration: underline; cursor: pointer; padding: 10px; }
.lr-scene__credited { margin: 0 0 16px; color: #e1c9a5; font-size: 11px; }
.lr-scene__error { color: #ffe0ca; font-size: 12px; }
.lr-rain { position: fixed; inset: 0; z-index: 80; pointer-events: none; overflow: hidden; }
.lr-rain > span { position: absolute; top: -90px; left: var(--x); width: 36px; height: 46px; opacity: 0; animation: lr-fall 4s var(--delay) ease-in both; }
.lr-preview { min-height: 100vh; display: grid; grid-template-columns: 440px 520px; justify-content: center; align-items: center; gap: 80px; padding: 50px 35px; background: radial-gradient(ellipse at 85% 35%, #ead3ac30, transparent 50%), var(--sp-bg, #f6f5f1); color: var(--sp-text); }
.lr-preview__intro > a { color: var(--sp-text-muted); font-size: 12px; text-decoration: none; display: block; margin-bottom: 40px; }
.lr-preview__eyebrow { font-size: 9px; letter-spacing: 2px; font-weight: 700; color: #a47d43; }
.lr-preview h1 { font: 500 48px/1.15 Georgia, serif; letter-spacing: -2px; margin: 19px 0; }
.lr-preview h1 em { font-style: normal; color: #b98242; }
.lr-preview__intro > p { color: var(--sp-text-muted); font-size: 13px; line-height: 1.8; max-width: 370px; }
.lr-preview__tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 27px 0 18px; }
.lr-preview__tier { padding: 17px; border: 1px solid var(--sp-border); border-radius: 13px; background: var(--sp-surface, #fff); color: var(--sp-text); text-align: left; cursor: pointer; transition: transform .2s, border-color .2s; }
.lr-preview__tier:hover { transform: translateY(-2px); }
.lr-preview__tier span { font-size: 11px; display: flex; justify-content: space-between; color: var(--sp-text-muted); }
.lr-preview__tier strong { display: block; font-size: 19px; margin-top: 8px; }
.lr-preview__tier--small.is-selected { border-color: #b28156; box-shadow: 0 0 0 2px #b2815615; }
.lr-preview__tier--bright.is-selected { border-color: #cf9a40; box-shadow: 0 0 0 2px #cf9a4015; }
.lr-preview__tier--grand.is-selected { border-color: #a177bf; box-shadow: 0 0 0 2px #a177bf15; }
.lr-preview__tier--legendary.is-selected { border-color: #c19535; box-shadow: 0 0 0 2px #c1953515; }
.lr-preview__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.lr-preview .lr-preview__note { font-size: 10px; margin: 17px 0 24px; }
.lr-preview__scene { box-shadow: 0 30px 80px #22130f30; border-radius: 28px; }
.lr-preview--dark { --sp-bg: #101110; --sp-surface: #20221f; --sp-text: #f7f4ec; --sp-text-muted: #bbb4a7; --sp-border: #ffffff20; }
.lr-preview--dark .lr-ribbon { background: #20221f; }
.lr-preview--dark .lr-ribbon--live { background: linear-gradient(120deg, #3d2922, #24201c); color: #fff2d6; }
.lr-preview--dark .lr-ribbon__eyebrow { color: #e9bc77; }

@keyframes lr-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(3deg); } }
@keyframes lr-breathe { 0%, 100% { opacity: .3; transform: scale(.96); } 50% { opacity: .5; transform: scale(1.05); } }
@keyframes lr-spin { to { transform: rotate(360deg); } }
@keyframes lr-twinkle { 0%, 100% { opacity: .2; } 50% { opacity: .8; } }
@keyframes lr-open-envelope { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(-12px) scale(1.04); } 100% { transform: translateY(25px) scale(.88); opacity: .3; } }
@keyframes lr-legend-open { 0% { transform: scale(1); } 25% { transform: translateY(-8px) scale(.95); } 45% { transform: translateY(-18px) scale(1.12); filter: drop-shadow(0 0 25px #ffd28285); } 100% { transform: translateY(30px) scale(.8); opacity: .15; } }
@keyframes lr-open-flap { to { transform: scaleY(-.75); } }
@keyframes lr-release-seal { 30% { transform: scale(1.2); } 100% { transform: translateY(-30px) scale(.6); opacity: 0; } }
@keyframes lr-beam { 0% { opacity: 0; transform: scaleX(.3); } 45% { opacity: .7; transform: scaleX(1.3); } 100% { opacity: .08; transform: scaleX(1); } }
@keyframes lr-rays { 0% { opacity: 0; transform: scale(.5) rotate(-10deg); } 45% { opacity: .45; } 100% { opacity: .12; transform: scale(1.1) rotate(12deg); } }
@keyframes lr-scatter {
  0% { opacity: 0; transform: translate(var(--start-x), var(--start-y)) rotate(var(--start-angle)) scale(.3); }
  12% { opacity: 1; }
  24% { transform: translate(var(--p1-x), var(--p1-y)) rotateZ(var(--spin-mid)) rotateY(var(--flip-mid)) scale(1); }
  48% { transform: translate(var(--p2-x), var(--p2-y)) rotateZ(var(--spin-end)) rotateX(var(--flip-mid)) scale(.85); }
  74% { opacity: .9; transform: translate(var(--p3-x), var(--p3-y)) rotateZ(var(--spin-mid)) rotateY(var(--flip-end)) scale(1.1); }
  100% { opacity: 0; transform: translate(var(--p4-x), var(--p4-y)) rotateZ(var(--spin-end)) rotateX(var(--flip-end)) scale(.45); }
}
@keyframes lr-tumble {
  0% { opacity: 0; transform: translate(var(--start-x), var(--start-y)) rotate(var(--start-angle)) scale(.5); }
  15% { opacity: 1; }
  24% { transform: translate(var(--p1-x), var(--p1-y)) rotateX(var(--flip-mid)) rotateZ(var(--spin-mid)) scale(1.15); }
  48% { transform: translate(var(--p2-x), var(--p2-y)) rotateY(var(--flip-end)) rotateZ(var(--spin-end)) scale(.65); }
  74% { opacity: .7; transform: translate(var(--p3-x), var(--p3-y)) rotateX(var(--flip-end)) rotateZ(var(--spin-end)) scale(.95); }
  100% { opacity: 0; transform: translate(var(--p4-x), var(--p4-y)) rotateY(var(--flip-mid)) rotateZ(var(--spin-mid)) scale(.3); }
}
@keyframes lr-wander {
  0% { opacity: .3; transform: translate(var(--anchor-x), var(--anchor-y)) rotate(0deg) scale(.65); }
  43% { opacity: .8; transform: translate(calc(var(--anchor-x) - var(--wander-y) / 2), calc(var(--anchor-y) + var(--wander-x))) rotate(var(--wander-angle)) scale(1.2); }
  100% { opacity: .4; transform: translate(calc(var(--anchor-x) + var(--wander-x)), calc(var(--anchor-y) + var(--wander-y))) rotate(calc(var(--wander-angle) * -1)) scale(.8); }
}
@keyframes lr-ring-burst { 0% { transform: scale(.7); opacity: 0; } 35% { opacity: .7; } 100% { transform: scale(1.5); opacity: .1; } }
@keyframes lr-reward-enter { from { opacity: 0; transform: translateY(18px) scale(.92); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes lr-fall { 0% { transform: translateY(-30px) rotate(var(--tilt)); opacity: 0; } 15% { opacity: .85; } 100% { transform: translateY(110vh) rotate(calc(var(--tilt) + 45deg)); opacity: 0; } }

@media (max-width: 1100px) { .lr-preview { grid-template-columns: minmax(300px, 410px) minmax(360px, 480px); gap: 35px; } }
@media (max-width: 760px) {
  .lr-dock { top: auto; bottom: 100px; right: 12px; left: 12px; }
  .lr-dock .lr-ribbon { width: 100%; justify-content: space-between; gap: 9px; }
  .lr-ribbon__arrow { display: none; }
  .lr-ribbon__copy strong { font-size: 11px; }
  .lr-scene { min-height: 600px; }
  .lr-scene h2 { font-size: 26px; }
  .lr-stage { height: 310px; }
  .lr-preview { grid-template-columns: minmax(0, 520px); padding: 25px 18px 110px; }
  .lr-preview h1 { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .lr-scene *, .lr-ribbon *, .lr-rain > span { animation: none !important; transition: none !important; }
  .lr-rain, .lr-stage__coins, .lr-stage__fireworks, .lr-stage__beam { display: none; }
  .lr-scene--revealing .lr-envelope__flap { transform: scaleY(-.65); }
  .lr-scene--revealing .lr-envelope__seal { opacity: 0; }
  .lr-scene--revealing .lr-stage__rays { opacity: .1; }
  .lr-scene--result .lr-stage__envelope { opacity: .13; }
}

/* Trên mobile, không để lì xì nổi đè lên nút hành động/chat Ma Sói. */
@media (max-width: 600px) {
  .lr-dock.lr-dock--werewolf { position: static; margin: 0 12px max(16px, env(safe-area-inset-bottom)); }
}
.ice-intro-modal .ant-modal-content {
  padding: 0;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid #36546a;
  background: #091d2c;
  box-shadow: 0 32px 110px #00101bd9;
}
.ice-intro-modal .ant-modal-close {
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  color: #fff;
  background: #071827c9;
  border: 1px solid #ffffff42;
  border-radius: 50%;
}
.ice-intro-modal .ant-modal-close:hover { color: #fff; background: #234254; }
.ice-intro { color: #fff8e2; }
.ice-intro__screen { position: relative; aspect-ratio: 16 / 9; background: #04121d; }
.ice-intro__video { display: block; width: 100%; height: 100%; object-fit: contain; }
.ice-intro__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 26px 32px 28px;
  border-top: 1px solid #41657480;
  background: radial-gradient(ellipse at 0 100%, #14433866, transparent 70%), #091d2c;
}
.ice-intro__eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 9px;
  color: #92d8c2;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
}
.ice-intro__eyebrow span { width: 6px; height: 6px; border-radius: 50%; background: #9bebc4; box-shadow: 0 0 12px #9bebc4a0; }
.ice-intro__copy h2 { margin: 0 0 9px; color: #fff5d9; font-size: clamp(21px, 2.5vw, 28px); font-weight: 800; letter-spacing: -.7px; line-height: 1.2; }
.ice-intro__description { margin: 0; color: #bfd0d8; font-size: 13px; line-height: 1.75; }
.ice-intro__actions { display: flex; flex-direction: column; align-items: center; gap: 12px; flex: 0 0 210px; }
.ice-intro__play {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-height: 50px;
  width: 100%;
  border: 1px solid #ffe7a1;
  border-radius: 12px;
  padding: 12px 22px;
  color: #19313d;
  background: linear-gradient(180deg, #ffe285, #ffcb48);
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  box-shadow: 0 5px 0 #8d6319, 0 10px 24px #ffcb481c;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
  transition: transform .15s, filter .15s;
}
.ice-intro__play:hover { color: #19313d; transform: translateY(-2px); filter: brightness(1.06); }
.ice-intro__play:active { transform: translateY(2px); }
.ice-intro__later { border: 0; padding: 4px; background: none; color: #a1b8c6; font: inherit; font-size: 12px; cursor: pointer; }
.ice-intro__later:hover { color: #fff8e2; }
.ice-intro :is(button, a):focus-visible { outline: 3px solid #a1eaff; outline-offset: 4px; }
.ice-intro__video-error { margin: 6px 0 0; font-size: 12px; color: #ffe285; }
@media (max-width: 640px) {
  .ice-intro-modal .ant-modal-content { border-radius: 16px; }
  .ice-intro__body { flex-direction: column; align-items: stretch; gap: 20px; padding: 22px 20px 20px; }
  .ice-intro__actions { flex-basis: auto; gap: 10px; }
  .ice-intro__description br { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ice-intro__play { transition: none; } }

@media (min-width: 641px) {
  .ice-intro-modal.ant-modal { max-width: min(calc(100vw - 32px), calc((100dvh - 220px) * 1.77778)); }
}

.ice-intro__replay-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ice-intro__video-toggle { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; border: 0; padding: 0; color: #ffdf7e; background: #04121d33; cursor: pointer; font: inherit; }
.ice-intro__video-toggle-content { display: flex; flex-direction: column; align-items: center; gap: 12px; filter: drop-shadow(0 4px 18px #0008); }
.ice-intro__video-toggle-content > .anticon { font-size: clamp(56px, 8vw, 86px); background: #092335cc; border-radius: 50%; }
.ice-intro__video-toggle.is-playing { background: transparent; }
.ice-intro__video-toggle.is-playing .ice-intro__video-toggle-content { opacity: 0; }
.ice-intro__video-toggle.is-playing:hover .ice-intro__video-toggle-content,
.ice-intro__video-toggle.is-playing:focus-visible .ice-intro__video-toggle-content { opacity: 1; }
.ice-intro__sound { position: absolute; left: 14px; bottom: 14px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid #ffffff50; border-radius: 50%; background: #071e2ecc; color: #fff5d9; cursor: pointer; font-size: 18px; }
.ice-intro__sound:hover { background: #234254; }
.ice-intro__video-toggle:focus-visible { outline-offset: -4px !important; }
/* BeVietnamPro Font Face Declarations */
@font-face {
  font-family: 'BeVietnamPro';
  src: url('/fonts/BeVietnamPro-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'BeVietnamPro';
  src: url('/fonts/BeVietnamPro-ThinItalic.ttf') format('truetype');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'BeVietnamPro';
  src: url('/fonts/BeVietnamPro-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'BeVietnamPro';
  src: url('/fonts/BeVietnamPro-ExtraLightItalic.ttf') format('truetype');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'BeVietnamPro';
  src: url('/fonts/BeVietnamPro-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'BeVietnamPro';
  src: url('/fonts/BeVietnamPro-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'BeVietnamPro';
  src: url('/fonts/BeVietnamPro-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'BeVietnamPro';
  src: url('/fonts/BeVietnamPro-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'BeVietnamPro';
  src: url('/fonts/BeVietnamPro-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'BeVietnamPro';
  src: url('/fonts/BeVietnamPro-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'BeVietnamPro';
  src: url('/fonts/BeVietnamPro-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'BeVietnamPro';
  src: url('/fonts/BeVietnamPro-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'BeVietnamPro';
  src: url('/fonts/BeVietnamPro-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'BeVietnamPro';
  src: url('/fonts/BeVietnamPro-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'BeVietnamPro';
  src: url('/fonts/BeVietnamPro-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'BeVietnamPro';
  src: url('/fonts/BeVietnamPro-ExtraBoldItalic.ttf') format('truetype');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'BeVietnamPro';
  src: url('/fonts/BeVietnamPro-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'BeVietnamPro';
  src: url('/fonts/BeVietnamPro-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

:root {
  font-family: 'BeVietnamPro', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  line-height: 1.5;
  font-weight: 400;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Bảng màu và layout nằm trong styles/spotify.css */
:root {
  color-scheme: light;
}

:root[data-theme='dark'] {
  color-scheme: dark;
}

/* Tùy chỉnh cho Ant Design */
.ant-layout {
  transition: background-color 0.3s ease;
}

.ant-card {
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

.ant-list-item {
  transition: all 0.3s;
} /*
 * Design tokens + layout theo phong cách Spotify (light mặc định).
 * Dark theme giữ lại vì nút chuyển theme vẫn còn — dùng bảng màu Spotify dark.
 */

:root {
  /* Nền và bề mặt */
  --sp-bg: #f5f5f5;
  --sp-surface: #ffffff;
  --sp-surface-2: #f8f8f8;
  --sp-surface-hover: #f0f0f0;
  --sp-surface-active: #e8e8e8;
  --sp-border: #e4e4e4;
  --sp-border-strong: #d4d4d4;

  /* Chữ */
  --sp-text: #121212;
  --sp-text-muted: #6a6a6a;
  --sp-text-faint: #9b9b9b;
  --sp-text-on-accent: #000000;

  /* Thương hiệu */
  --sp-green: #1db954;
  --sp-green-hover: #1ed760;
  --sp-green-press: #199f47;
  --sp-green-soft: rgba(29, 185, 84, 0.12);
  --sp-red: #e22134;

  /* Hình khối */
  --sp-radius: 8px;
  --sp-radius-lg: 12px;
  --sp-radius-pill: 500px;
  --sp-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  --sp-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);

  /* Khung layout */
  /* Bốn màu Politetech (politetech-mark.svg). -deep: nền poster / nút có chữ trắng; -soft: nền nhạt; -ink: chữ đọc được trên nền nhạt */
  --pt-blue: #3d7dee;
  --pt-green: #4caf50;
  --pt-red: #e8443a;
  --pt-yellow: #f5c13d;
  --pt-blue-deep: #2159c4;
  --pt-green-deep: #2e7d32;
  --pt-red-deep: #c0362d;
  --pt-blue-soft: #e8f0fd;
  --pt-green-soft: #e7f4e8;
  --pt-red-soft: #fdebe9;
  --pt-yellow-soft: #fff4d3;
  --pt-blue-ink: #1d4fae;
  --pt-green-ink: #25702a;
  --pt-red-ink: #a8281f;
  --pt-yellow-ink: #6d4c00;

  --sp-sidebar-w: 340px;
  --sp-rail-w: 340px;
  --sp-rail-news-min: 380px;
  --sp-player-h: 84px;
  --sp-gap: 8px;
}

:root[data-theme='dark'] {
  --sp-bg: #000000;
  --sp-surface: #121212;
  --sp-surface-2: #181818;
  --sp-surface-hover: #1f1f1f;
  --sp-surface-active: #282828;
  --sp-border: #2a2a2a;
  --sp-border-strong: #3e3e3e;

  --sp-text: #ffffff;
  --sp-text-muted: #b3b3b3;
  --sp-text-faint: #7a7a7a;
  --sp-text-on-accent: #000000;

  --sp-green-soft: rgba(29, 185, 84, 0.18);
  --pt-blue-soft: rgba(61, 125, 238, 0.2);
  --pt-green-soft: rgba(76, 175, 80, 0.2);
  --pt-red-soft: rgba(232, 68, 58, 0.2);
  --pt-yellow-soft: rgba(245, 193, 61, 0.18);
  --pt-blue-ink: #9bbcff;
  --pt-green-ink: #9bd99e;
  --pt-red-ink: #ff9d96;
  --pt-yellow-ink: #ffd877;
  --sp-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  --sp-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
}

body {
  background: var(--sp-bg);
  color: var(--sp-text);
}

.sp-route-loading {
  display: grid;
  min-height: 100vh;
  place-items: center;
  background: var(--sp-bg);
  color: var(--sp-text-muted);
  font-size: 14px;
}

/* ── Khung ứng dụng ────────────────────────────────────────────────── */

.sp-shell {
  display: grid;
  grid-template-columns: var(--sp-sidebar-w) minmax(0, 1fr) var(--sp-rail-w);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    'sidebar main rail'
    'player player player';
  gap: var(--sp-gap);
  padding: var(--sp-gap);
  height: 100vh;
  background: var(--sp-bg);
  box-sizing: border-box;
}

.sp-shell--no-player {
  grid-template-areas:
    'sidebar main rail'
    'sidebar main rail';
}

.sp-sidebar {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  gap: var(--sp-gap);
  min-height: 0;
  overflow-y: auto;
}

/* Menu + các thẻ game giữ nguyên chiều cao; màn hình thấp thì cả sidebar cuộn, thay vì để thẻ tràn lên ô chat */
.sp-sidebar > nav.sp-panel {
  flex-shrink: 0;
}

.sp-main-add {
  flex: 0 0 auto;
}

.sp-main-add .sp-panel__head {
  padding: 16px 20px 8px;
}

.sp-main-add .sp-panel__body {
  padding: 0 20px 18px;
}

.add-song-form__identity {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 13px;
}

.add-song-form__fields {
  display: flex;
  flex-direction: column;
}

.add-song-form__submit {
  width: 100%;
}

.add-song-form--main .add-song-form__identity {
  margin-bottom: 10px;
}

.add-song-form--main .add-song-form__fields {
  display: grid;
  grid-template-columns: minmax(260px, 1.1fr) minmax(220px, 0.9fr) 170px;
  gap: 12px;
  align-items: end;
}

.add-song-form--main .ant-form-item {
  margin-bottom: 0;
}

.add-song-form--main .add-song-form__submit {
  width: 100%;
  min-height: 40px;
  margin-bottom: 0;
}

/* Biến thể inline: avatar · link · lời nhắn · nút, không nhãn, một dòng */
.add-song-form--inline {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.add-song-form--inline .add-song-form__avatar {
  flex: 0 0 auto;
  padding-top: 2px;
}

.add-song-form--inline .add-song-form__fields {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(180px, 1fr) auto;
  gap: 8px;
  align-items: start;
}

.add-song-form--inline .ant-form-item {
  margin-bottom: 0;
}

.add-song-form--inline .add-song-form__submit {
  width: auto;
  min-height: 32px;
  white-space: nowrap;
}

.add-song-form__notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--sp-radius);
  background: var(--sp-surface-2);
  color: var(--sp-text-muted);
  font-size: 13px;
}

.add-song-form__notice > span:nth-child(2) {
  flex: 1;
}

.add-song-form__notice strong {
  color: var(--sp-text);
}

.add-song-form--main.add-song-form__empty {
  padding: 18px 20px 20px;
}

.add-song-form--main.add-song-form__empty .sp-empty__icon {
  font-size: 24px;
}

.sp-main {
  grid-area: main;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--sp-surface);
  border-radius: var(--sp-radius-lg);
  border: 1px solid var(--sp-border);
}

/*
 * Cột giữa trang chủ: topbar → banner → Hàng chờ (kèm form thêm bài) → lưới game.
 * Hàng chờ chiếm phần cao còn lại và tự cuộn bên trong, nên lưới game luôn nằm
 * trong khung nhìn; màn quá thấp thì sàn min-height đẩy cả cột cuộn.
 */
.sp-main:has(> .sp-main__stack) {
  display: flex;
  flex-direction: column;
}

.sp-main__stack {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  padding: 16px 20px 20px;
}

.sp-main__stack > .sp-queue {
  flex: 1 1 0;
  min-height: 300px;
}

.sp-queue .sp-panel__head {
  padding: 12px 16px 8px;
}

.sp-queue__composer {
  padding: 0 16px 10px;
  border-bottom: 1px solid var(--sp-border);
  margin-bottom: 6px;
}

.sp-queue .sp-empty {
  padding: 20px 16px;
}

.sp-games {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.sp-games .ww-launch,
.sp-games .jg-launch,
.sp-games .au-launch,
.sp-games .cg-launch {
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 10px 14px;
}

/* Bản thu nhỏ: bỏ dòng khẩu hiệu, giữ tên game + trạng thái trực tiếp */
.sp-games .ww-launch__tagline,
.sp-games .jg-launch__tagline,
.sp-games .au-launch__tagline,
.sp-games .cg-launch__tagline {
  display: none;
}

.sp-games .ww-launch__status,
.sp-games .jg-launch__status,
.sp-games .au-launch__status,
.sp-games .cg-launch__status {
  margin-top: 4px;
}

.sp-rail {
  grid-area: rail;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-gap);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/*
 * Bố cục cột phải Home (dùng class rõ ràng, không phụ thuộc thứ tự con):
 * - Nút Cho-Han: cao tự nhiên, luôn nổi ở trên.
 * - Feed hoạt động: có trần, cuộn bên trong.
 * - Khung tin tức: chiếm phần chiều cao còn lại, nhưng có sàn tối thiểu.
 *
 * Trước đây khung tin chỉ có `flex: 1 1 auto; min-height: 0`, nên trên laptop
 * màn thấp nó bị Cho-Han + Billiards + feed bóp còn vài chục pixel — đúng vào
 * phần mà người ta muốn đọc. Giờ nó giữ sàn `--sp-rail-news-min` và cả cột
 * phải tự cuộn khi không đủ chỗ, thay vì bóp mỗi khung tin.
 */
.sp-rail > .lot-rail,
.sp-rail > .chohan-rail,
.sp-rail > .bil-rail {
  flex: 0 0 auto;
}

.sp-rail > .sp-rail-activity {
  flex: 0 1 auto;
  max-height: 240px;
  min-height: 140px;
}

.sp-rail > .sp-rail-news {
  flex: 1 1 auto;
  min-height: var(--sp-rail-news-min);
}

.chohan-rail {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sp-player {
  grid-area: player;
}

/* Panel chung — khối bo góc kiểu Spotify */
.sp-panel {
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-lg);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.sp-panel--grow {
  flex: 1;
  min-height: 0;
}

.sp-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px 12px;
}

.sp-panel__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--sp-text);
}

.sp-panel__body {
  padding: 0 12px 12px;
  overflow-y: auto;
  min-height: 0;
  flex: 1;
}

.sp-panel__body--flush {
  padding: 0;
}

/* ── Thanh thương hiệu / điều hướng ───────────────────────────────── */

.sp-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px;
  cursor: pointer;
  user-select: none;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

/*
 * Icon app trong sidebar. Bo góc và nền sẫm đã nằm sẵn trong favicon.svg
 * nên ở đây không đặt background hay border-radius — đặt thêm là viền tile
 * bị cắt cụt.
 */
.sp-brand__mark {
  width: 34px;
  height: 34px;
  display: block;
  flex-shrink: 0;
}

.sp-brand__name {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--sp-text);
  line-height: 1.1;
}

.sp-brand__sub {
  font-size: 11px;
  color: var(--sp-text-muted);
  font-weight: 500;
}

.sp-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 8px 12px;
}

.sp-nav__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: var(--sp-radius);
  color: var(--sp-text-muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  transition: color 0.15s ease, background 0.15s ease;
}

.sp-nav__item:hover {
  color: var(--sp-text);
  background: var(--sp-surface-hover);
}

.sp-nav__item--active {
  color: var(--sp-text);
  background: var(--sp-surface-active);
}

.sp-nav__icon {
  font-size: 18px;
  display: inline-flex;
}

/* Workspace là lối vào không gian tương tác, nổi bật hơn điều hướng thường. */
.sp-nav__item--workspace {
  gap: 10px;
  margin-top: 7px;
  padding: 8px 10px;
  min-height: 48px;
  border: 1px solid #a99af7;
  color: #30205e;
  background: linear-gradient(115deg, #ece8ff 0%, #e7f2ff 100%);
  box-shadow: 0 3px 10px rgba(100, 81, 185, 0.12);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.sp-nav__item--workspace:hover,
.sp-nav__item--workspace.sp-nav__item--active {
  color: #21144d;
  border-color: #836cf0;
  background: linear-gradient(115deg, #ddd5ff 0%, #d9ebff 100%);
  box-shadow: 0 5px 16px rgba(100, 81, 185, 0.22);
  transform: translateY(-1px);
}

.sp-nav__item--workspace:focus-visible {
  outline: 3px solid #7359e6;
  outline-offset: 2px;
}

.sp-nav__workspace-icon {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  height: 30px;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(145deg, #8b5cf6, #5478d8);
  box-shadow: 0 2px 5px rgba(100, 81, 185, 0.23);
}

.sp-nav__workspace-label {
  flex: 1;
  font-weight: 800;
}

.sp-nav__workspace-badges {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.sp-nav__workspace-badge {
  padding: 4px 6px;
  border-radius: 5px;
  color: #5942b6;
  background: rgba(255, 255, 255, 0.76);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.sp-nav__workspace-beta {
  padding: 4px 6px;
  border-radius: 5px;
  color: #fff;
  background: #7656d9;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

:root[data-theme='dark'] .sp-nav__item--workspace {
  border-color: #6b5bb9;
  color: #f5f0ff;
  background: linear-gradient(115deg, #3e326a 0%, #263d61 100%);
}

:root[data-theme='dark'] .sp-nav__item--workspace:hover,
:root[data-theme='dark'] .sp-nav__item--workspace.sp-nav__item--active {
  color: #fff;
  border-color: #a591ff;
  background: linear-gradient(115deg, #514184 0%, #305077 100%);
}

/* Hàng icon easter egg dưới menu điều hướng */
.sp-quicktoys {
  display: flex;
  gap: 6px;
  padding: 8px 14px 14px;
  border-top: 1px solid var(--sp-border);
  margin: 0 8px;
}

.sp-quicktoys__btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 50%;
  background: var(--sp-surface-2);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.15s ease, border-color 0.15s ease;
}

/* ICE City dùng ảnh nhân vật thay emoji: ảnh tròn phủ kín ô. */
.sp-quicktoys__btn--ice-city {
  padding: 0;
  overflow: hidden;
  border-color: #32b0fd;
}

.sp-quicktoys__btn--ice-city img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.sp-quicktoys__btn:hover {
  background: var(--sp-surface-active);
  transform: scale(1.08);
}

.sp-quicktoys__btn.is-active {
  border-color: var(--sp-green);
  background: var(--sp-green-soft);
}

/* ── Nút kiểu Spotify ─────────────────────────────────────────────── */

.sp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--sp-radius-pill);
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.sp-btn:active {
  transform: scale(0.97);
}

.sp-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.sp-btn--primary {
  background: var(--sp-green);
  color: var(--sp-text-on-accent);
}

.sp-btn--primary:hover:not(:disabled) {
  background: var(--sp-green-hover);
  transform: scale(1.03);
}

.sp-btn--ghost {
  background: transparent;
  color: var(--sp-text-muted);
}

.sp-btn--ghost:hover:not(:disabled) {
  color: var(--sp-text);
  background: var(--sp-surface-hover);
}

.sp-btn--outline {
  background: transparent;
  color: var(--sp-text);
  border: 1px solid var(--sp-border-strong);
}

.sp-btn--outline:hover:not(:disabled) {
  border-color: var(--sp-text);
  transform: scale(1.03);
}

.sp-btn--danger {
  background: var(--sp-red);
  color: #fff;
}

.sp-btn--sm {
  padding: 6px 14px;
  font-size: 13px;
}

.sp-btn--icon {
  padding: 8px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

/* ── Thanh trên cùng của vùng nội dung ────────────────────────────── */

.sp-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  background: var(--sp-surface);
  border-bottom: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-lg) var(--sp-radius-lg) 0 0;
}

.sp-topbar__greeting {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--sp-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sp-topbar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Chip tài khoản */
.sp-user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  border-radius: var(--sp-radius-pill);
  background: var(--sp-surface-active);
  border: none;
  cursor: pointer;
  color: var(--sp-text);
  font-weight: 600;
  font-size: 13px;
  transition: background 0.15s ease;
}

.sp-user-chip:hover {
  background: var(--sp-surface-hover);
}

.sp-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  text-transform: uppercase;
}

.sp-avatar--image {
  position: relative;
  overflow: hidden;
  background: var(--sp-surface-2);
}

.sp-avatar--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sp-avatar__fallback {
  display: none;
}

.sp-avatar--lg {
  width: 44px;
  height: 44px;
  font-size: 17px;
}

.avatar-picker {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  padding-top: 4px;
}

.avatar-picker__item {
  min-width: 0;
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  background: var(--sp-surface);
  color: var(--sp-text);
  cursor: pointer;
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 10px 6px 8px;
  font-size: 12px;
  font-weight: 700;
}

.avatar-picker__item:hover {
  background: var(--sp-surface-hover);
}

.avatar-picker__item.is-selected {
  border-color: var(--sp-green);
  background: var(--sp-green-soft);
  box-shadow: inset 0 0 0 1px var(--sp-green);
}

.avatar-picker__item span:last-child {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Danh sách bài hát ────────────────────────────────────────────── */

.sp-tracklist {
  display: flex;
  flex-direction: column;
}

.sp-track {
  display: grid;
  grid-template-columns: 32px 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 8px 12px;
  border-radius: var(--sp-radius);
  transition: background 0.15s ease;
}

.sp-track:hover {
  background: var(--sp-surface-hover);
}

.sp-track__rank {
  font-size: 15px;
  font-weight: 600;
  color: var(--sp-text-faint);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.sp-track__rank--top {
  color: var(--sp-green);
  font-weight: 800;
}

.sp-track__art {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--sp-surface-active);
  display: block;
}

.sp-track__meta {
  min-width: 0;
}

.sp-track__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--sp-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-track__sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--sp-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}

.sp-track__note {
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sp-track__side {
  display: flex;
  align-items: center;
  gap: 12px;
}

/*
 * Biến thể cho cột hẹp (cột phải trang admin): điểm số và nút reaction
 * xuống dòng riêng thay vì ép tiêu đề bài hát co lại còn vài pixel.
 */
.sp-tracklist--compact .sp-track {
  grid-template-columns: 26px 40px minmax(0, 1fr);
  grid-template-areas:
    'rank art meta'
    'side side side';
  gap: 8px 10px;
}

.sp-tracklist--compact .sp-track__rank {
  grid-area: rank;
}

.sp-tracklist--compact .sp-track__art {
  grid-area: art;
  width: 40px;
  height: 40px;
}

.sp-tracklist--compact .sp-track__meta {
  grid-area: meta;
}

.sp-tracklist--compact .sp-track__side {
  grid-area: side;
  justify-content: flex-end;
}

.sp-score {
  min-width: 44px;
  padding: 3px 10px;
  border-radius: var(--sp-radius-pill);
  background: var(--sp-surface-active);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--sp-text);
}

.sp-score--positive {
  background: var(--sp-green-soft);
  color: var(--sp-green-press);
}

:root[data-theme='dark'] .sp-score--positive {
  color: var(--sp-green-hover);
}

.sp-score--negative {
  background: rgba(226, 33, 52, 0.12);
  color: var(--sp-red);
}

/* ── Thanh phát nhạc dưới cùng ────────────────────────────────────── */

.sp-nowplaying {
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--sp-player-h);
  padding: 0 20px;
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-lg);
  box-sizing: border-box;
}

.sp-nowplaying__art {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}

.sp-nowplaying__meta {
  min-width: 0;
  flex: 1;
}

.sp-skip-next {
  display: grid;
  grid-template-columns: minmax(150px, 210px) auto;
  grid-template-areas:
    'copy button'
    'progress button';
  align-items: center;
  column-gap: 14px;
  row-gap: 6px;
  flex-shrink: 0;
}

.sp-skip-next__progress-copy {
  grid-area: copy;
  color: var(--sp-text-muted);
  font-size: 12px;
  white-space: nowrap;
}

.sp-skip-next__progress-copy strong {
  color: #d99a00;
  font-size: 13px;
}

:root[data-theme='dark'] .sp-skip-next__progress-copy strong {
  color: #ffd35a;
}

.sp-skip-next__progress {
  grid-area: progress;
  width: 100%;
  height: 5px;
  overflow: hidden;
  background: rgba(217, 154, 0, 0.16);
  border-radius: 999px;
}

.sp-skip-next__progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f5b700, #ff7a1a);
  transition: width 260ms ease;
}

.sp-skip-next__button {
  grid-area: button;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 154px;
  height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #f5b700, #ff7a1a);
  color: #211500;
  box-shadow: 0 6px 20px rgba(245, 183, 0, 0.25);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.sp-skip-next__button:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 8px 24px rgba(245, 183, 0, 0.34);
}

.sp-skip-next__button:focus-visible {
  outline: 3px solid rgba(245, 183, 0, 0.38);
  outline-offset: 3px;
}

.sp-skip-next__button:disabled {
  cursor: wait;
  filter: saturate(0.55);
  opacity: 0.75;
}

.sp-skip-next__button small {
  position: absolute;
  top: -8px;
  right: 8px;
  padding: 2px 6px;
  border: 2px solid var(--sp-surface);
  border-radius: 999px;
  background: var(--sp-red);
  color: #fff;
  font-size: 8px;
  letter-spacing: 0.08em;
}

.sp-skip-popover {
  width: 260px;
}

.sp-skip-popover__balance {
  margin-bottom: 10px;
  color: var(--sp-text-muted);
  font-size: 12px;
}

.sp-skip-popover__quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.sp-skip-popover__chip {
  padding: 5px 9px;
  border: 1px solid var(--sp-border);
  border-radius: 999px;
  background: var(--sp-surface-2);
  color: var(--sp-text);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}

.sp-skip-popover__chip--accent {
  border-color: rgba(245, 183, 0, 0.55);
  background: rgba(245, 183, 0, 0.12);
  color: #b17800;
  font-weight: 700;
}

.sp-skip-popover__custom {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.sp-nowplaying__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sp-green);
}

.sp-eq {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 11px;
}

.sp-eq span {
  width: 2.5px;
  background: var(--sp-green);
  border-radius: 1px;
  animation: sp-eq-bounce 0.9s ease-in-out infinite;
}

.sp-eq span:nth-child(1) {
  animation-delay: -0.5s;
}
.sp-eq span:nth-child(2) {
  animation-delay: -0.25s;
}
.sp-eq span:nth-child(3) {
  animation-delay: -0.75s;
}

@keyframes sp-eq-bounce {
  0%,
  100% {
    height: 3px;
  }
  50% {
    height: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sp-eq span {
    animation: none;
    height: 7px;
  }
}

/* ── Trang xác thực ───────────────────────────────────────────────── */

.sp-auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: linear-gradient(180deg, var(--sp-surface-2) 0%, var(--sp-bg) 55%);
  box-sizing: border-box;
}

.sp-auth__card {
  width: 100%;
  max-width: 420px;
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-lg);
  box-shadow: var(--sp-shadow-lg);
  padding: 36px 32px 28px;
}

.sp-auth__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.sp-auth__title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-align: center;
  margin: 0;
  color: var(--sp-text);
}

.sp-auth__hint {
  text-align: center;
  font-size: 13px;
  color: var(--sp-text-muted);
  margin: 8px 0 0;
}

.sp-auth__divider {
  height: 1px;
  background: var(--sp-border);
  margin: 22px 0 18px;
}

.sp-auth__switch {
  text-align: center;
  font-size: 13.5px;
  color: var(--sp-text-muted);
}

.sp-auth__switch button {
  border: none;
  background: none;
  padding: 0 4px;
  font: inherit;
  font-weight: 700;
  color: var(--sp-text);
  text-decoration: underline;
  cursor: pointer;
}

/* ── Tiện ích ─────────────────────────────────────────────────────── */

.sp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 36px 20px;
  text-align: center;
  color: var(--sp-text-muted);
  font-size: 13.5px;
}

.sp-empty__icon {
  font-size: 30px;
  opacity: 0.6;
}

.sp-section-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--sp-text);
}

.sp-muted {
  color: var(--sp-text-muted);
}

.sp-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 24px;
  border-radius: var(--sp-radius-lg);
  background: linear-gradient(135deg, #1db954 0%, #0f7a37 100%);
  color: #fff;
}

.sp-hero__art {
  width: 96px;
  height: 96px;
  border-radius: var(--sp-radius);
  object-fit: cover;
  box-shadow: var(--sp-shadow-lg);
  flex-shrink: 0;
}

.sp-hero__kicker {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.85;
}

.sp-hero__title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 4px 0 6px;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.sp-hero__sub {
  font-size: 13.5px;
  opacity: 0.9;
}

/* ── Responsive ───────────────────────────────────────────────────── */

@media (max-width: 1240px) {
  .sp-shell {
    grid-template-columns: var(--sp-sidebar-w) minmax(0, 1fr);
    grid-template-areas:
      'sidebar main'
      'player player';
  }

  .sp-rail {
    display: none;
  }
}

@media (max-width: 900px) {
  .sp-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      'sidebar'
      'main'
      'player';
    height: auto;
    min-height: 100vh;
  }

  .sp-main {
    overflow: visible;
  }

  /* Sidebar xếp dọc phía trên nội dung — vẫn giữ nguyên form thêm bài */
  .sp-sidebar {
    flex-direction: column;
  }

  .add-song-form--main .add-song-form__fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .add-song-form--inline .add-song-form__fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .avatar-picker {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sp-track {
    grid-template-columns: 28px 44px minmax(0, 1fr);
  }

  .sp-track__side {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

@media (max-width: 720px) {
  .sp-nowplaying {
    height: auto;
    min-height: var(--sp-player-h);
    flex-wrap: wrap;
    padding-block: 12px;
  }

  .sp-nowplaying__meta {
    flex-basis: calc(100% - 72px);
  }

  .sp-skip-next {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/*
 * ChibiOverlay đặt pointer-events:none trên wrapper, nhưng react-three-fiber
 * tự ghi pointer-events:auto (inline) lên div và canvas bên trong nên wrapper
 * bị vô hiệu — con chibi nuốt mọi click ở góc phải dưới màn hình. Inline style
 * chỉ thắng được bằng !important.
 */
.chibi-overlay,
.chibi-overlay * {
  pointer-events: none !important;
}

/* ── Khung tin tức ở cột phải ─────────────────────────────────────── */

/*
 * Chuỗi cha-con phải liên tục `flex: 1 / min-height: 0` thì chiều cao mới
 * truyền được xuống tận .news-scroll. Thiếu một mắt xích là widget lại phình
 * ra ngoài khung và nuốt mất thao tác cuộn/click.
 * Cấu trúc: .sp-newsdock > .ant-tabs > .ant-tabs-content-holder
 *           > .ant-tabs-tabpane > .news-view > .news-scroll
 */
.sp-newsdock {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.sp-newsdock > .ant-tabs,
.sp-newsdock .ant-tabs-content-holder,
.sp-newsdock .ant-tabs-content,
.sp-newsdock .ant-tabs-tabpane:not(.ant-tabs-tabpane-hidden) {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/*
 * antd ẩn tab không active bằng .ant-tabs-tabpane-hidden { display: none }.
 * Rule display:flex ở trên có specificity cao hơn nên phải loại trừ rõ ràng,
 * nếu không cả hai tab cùng hiện và tab sau bị đẩy xuống dưới.
 */
.sp-newsdock .ant-tabs-tabpane-hidden {
  display: none;
}

.sp-newsdock .ant-tabs-nav {
  flex: 0 0 auto;
}


.news-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}

/* ── Hoà antd vào bảng màu ────────────────────────────────────────── */

.sp-shell .ant-tabs-nav {
  margin-bottom: 8px;
}

.sp-shell .ant-tabs-tab {
  font-weight: 600;
}

.sp-panel .ant-empty-description {
  color: var(--sp-text-muted);
}
/* Pill số dư Polite Coins trên thanh trên cùng */
.sp-coin {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 14px 5px 5px;
  border-radius: var(--sp-radius-pill);
  background: linear-gradient(135deg, #ffe07a 0%, #f4b823 52%, #e79b0c 100%);
  color: #4d3400;
  font-size: 15px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  white-space: nowrap;
  border: 1.5px solid #ffe9a0;
  box-shadow:
    0 2px 10px rgba(238, 168, 20, 0.5),
    inset 0 1px 1px rgba(255, 255, 255, 0.75);
  transition: transform 0.12s ease, box-shadow 0.2s ease;
}

.sp-coin:hover {
  transform: translateY(-1px);
  box-shadow:
    0 4px 14px rgba(238, 168, 20, 0.6),
    inset 0 1px 1px rgba(255, 255, 255, 0.75);
}

.sp-coin__img {
  width: 26px;
  height: 26px;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(120, 80, 0, 0.35));
}

.sp-coin__unit {
  font-size: 11px;
  font-weight: 800;
  opacity: 0.75;
  margin-left: -2px;
}

:root[data-theme='dark'] .sp-coin {
  background: linear-gradient(135deg, #6b5a1e, #957f24);
  color: #ffe9a8;
}

/* ── Xúc xắc CSS (tạm, Đợt 2 thay bằng ảnh 3D) ────────────────────── */
.sp-die {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 12%;
  box-sizing: border-box;
  background: #fafafa;
  border-radius: 22%;
  box-shadow:
    inset 0 -3px 6px rgba(0, 0, 0, 0.12),
    inset 0 3px 4px rgba(255, 255, 255, 0.9),
    0 4px 10px rgba(0, 0, 0, 0.22);
  border: 1px solid #e6e6e6;
}

.sp-die__cell {
  display: grid;
  place-items: center;
}

.sp-die__pip {
  width: 66%;
  height: 66%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4a4a4a, #111);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.25);
}

.sp-die__pip--red {
  background: radial-gradient(circle at 35% 30%, #ff5a5a, #c81d1d);
}

.sp-die--hidden {
  background: linear-gradient(145deg, #e8e8e8, #cfcfcf);
}

.sp-die__q {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  display: grid;
  place-items: center;
  font-size: 150%;
  font-weight: 800;
  color: #9a9a9a;
}

@keyframes sp-die-shake {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-6px) rotate(-14deg); }
  50% { transform: translateY(2px) rotate(10deg); }
  75% { transform: translateY(-3px) rotate(-6deg); }
}

.sp-die--rolling {
  animation: sp-die-shake 0.45s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .sp-die--rolling {
    animation: none;
  }
}

/* ── Nút nổi bật ở cột phải Home ───────────────────────────────────── */
.chohan-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: none;
  border-radius: var(--sp-radius-lg);
  cursor: pointer;
  color: #fff;
  text-align: left;
  background: linear-gradient(135deg, #e2261d 0%, #7a0f16 100%);
  box-shadow: 0 8px 22px rgba(226, 38, 29, 0.35);
  transition: transform 0.12s ease, box-shadow 0.2s ease;
}

.chohan-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(226, 38, 29, 0.45);
}

.chohan-cta:active {
  transform: translateY(0);
}

.chohan-cta__icon {
  font-size: 26px;
  line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}

.chohan-cta__title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.chohan-cta__sub {
  font-size: 12px;
  opacity: 0.9;
}

.chohan-cta__badge {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--sp-radius-pill);
  background: rgba(255, 255, 255, 0.22);
  white-space: nowrap;
}

/* Dải trạng thái nhỏ trong panel Home */
.chohan-mini {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 10px 12px 2px;
}

.chohan-chip {
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
}

.chohan-chip--cho {
  background: #1db954;
}

.chohan-chip--han {
  background: #e2261d;
}

/* ── Overlay chơi ──────────────────────────────────────────────────── */
.chohan-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(3px);
}

.chohan-modal {
  width: 100%;
  max-width: 520px;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-lg);
  box-shadow: var(--sp-shadow-lg);
  padding: 20px 22px 24px;
}

.chohan-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.chohan-modal__title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--sp-text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.chohan-close {
  border: none;
  background: var(--sp-surface-active);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  color: var(--sp-text-muted);
}

.chohan-close:hover {
  background: var(--sp-surface-hover);
  color: var(--sp-text);
}

/* Nút "?" xem luật — màu nổi bật + nhịp pulse hút mắt */
.chohan-help {
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 17px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.55);
  animation: chohan-help-pulse 2s ease-out infinite;
  transition: transform 0.12s ease, background 0.15s ease;
}

.chohan-help:hover {
  background: linear-gradient(135deg, #4f8ff8, #3b82f6);
  transform: scale(1.1) rotate(-6deg);
  animation: none;
}

@keyframes chohan-help-pulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.5); }
  70% { box-shadow: 0 0 0 9px rgba(37, 99, 235, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .chohan-help {
    animation: none;
  }
}

/* Sân khấu bát + xúc xắc */
.chohan-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 0 10px;
}

/*
 * Sân khấu: bát gỗ (úp che xúc xắc) ở trên; khi lắc xong, bát nghiêng và 2
 * xúc xắc ĐỔ ra nền, nảy vài cái rồi nằm yên hé lộ mặt.
 */
.chohan-arena {
  position: relative;
  width: 300px;
  height: 284px;
  margin: 0 auto;
}

.sp-die-img {
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.28));
  user-select: none;
}

/* Bát gỗ — nằm trên cùng để che xúc xắc lúc đặt cược/lắc */
.chohan-bowl3d {
  position: absolute;
  left: 50%;
  top: 2px;
  width: 210px;
  transform: translateX(-50%);
  transform-origin: 50% 86%;
  z-index: 3;
  filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.3));
}

.chohan-arena--shaking .chohan-bowl3d {
  animation: chohan-bowl-shake 0.42s ease-in-out infinite;
}

.chohan-arena--revealed .chohan-bowl3d,
.chohan-arena--voided .chohan-bowl3d {
  animation: chohan-bowl-pour 0.9s cubic-bezier(0.3, 0.7, 0.4, 1) forwards;
}

@keyframes chohan-bowl-shake {
  0%, 100% { transform: translateX(-50%) rotate(-4deg); }
  25% { transform: translateX(-53%) rotate(4deg); }
  50% { transform: translateX(-47%) rotate(-3deg); }
  75% { transform: translateX(-51%) rotate(3deg); }
}

/* Bát rướn nhẹ rồi nghiêng đổ về phía trước, dạt lên trên nhường chỗ cho xúc xắc */
@keyframes chohan-bowl-pour {
  0% { transform: translateX(-50%) translateY(0) rotate(0); }
  30% { transform: translateX(-50%) translateY(-6px) rotate(-10deg); }
  65% { transform: translateX(-70%) translateY(-20px) rotate(34deg); }
  100% { transform: translateX(-78%) translateY(-28px) rotate(28deg); opacity: 0.96; }
}

/* Hai xúc xắc: ẩn trong bát lúc đặt cược/lắc, đổ ra nền khi mở */
.chohan-die {
  position: absolute;
  z-index: 2;
  opacity: 0;
}

.chohan-die--a {
  left: 78px;
  top: 184px;
}

.chohan-die--b {
  left: 176px;
  top: 198px;
}

.chohan-arena--revealed .chohan-die--a {
  animation: chohan-spill-a 1s cubic-bezier(0.25, 0.6, 0.3, 1) 0.18s forwards;
}

.chohan-arena--revealed .chohan-die--b {
  animation: chohan-spill-b 1s cubic-bezier(0.25, 0.6, 0.3, 1) 0.3s forwards;
}

@keyframes chohan-spill-a {
  0% { transform: translate(44px, -106px) scale(0.35) rotate(0); opacity: 0; }
  20% { opacity: 1; }
  55% { transform: translate(8px, -34px) scale(1.06) rotate(220deg); opacity: 1; }
  78% { transform: translate(0, -13px) scale(1) rotate(348deg); }
  100% { transform: translate(0, 0) scale(1) rotate(360deg); opacity: 1; }
}

@keyframes chohan-spill-b {
  0% { transform: translate(-54px, -120px) scale(0.35) rotate(0); opacity: 0; }
  20% { opacity: 1; }
  55% { transform: translate(-8px, -38px) scale(1.06) rotate(-210deg); opacity: 1; }
  80% { transform: translate(0, -11px) scale(1) rotate(-346deg); }
  100% { transform: translate(0, 0) scale(1) rotate(-360deg); opacity: 1; }
}

/* Bóng đổ dưới xúc xắc khi đã nằm yên */
.chohan-shadow {
  position: absolute;
  z-index: 1;
  width: 50px;
  height: 13px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  filter: blur(2px);
  opacity: 0;
}

.chohan-shadow--a {
  left: 80px;
  top: 234px;
}

.chohan-shadow--b {
  left: 180px;
  top: 248px;
}

.chohan-arena--revealed .chohan-shadow {
  animation: chohan-shadow-in 0.4s ease 0.6s forwards;
}

@keyframes chohan-shadow-in {
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .chohan-arena--shaking .chohan-bowl3d {
    animation: none;
  }
  .chohan-arena--revealed .chohan-bowl3d,
  .chohan-arena--voided .chohan-bowl3d {
    animation: none;
    transform: translateX(-78%) translateY(-28px) rotate(28deg);
  }
  .chohan-arena--revealed .chohan-die--a,
  .chohan-arena--revealed .chohan-die--b {
    animation: none;
    opacity: 1;
  }
  .chohan-arena--revealed .chohan-shadow {
    animation: none;
    opacity: 1;
  }
}

.chohan-phase {
  font-size: 13px;
  font-weight: 700;
  color: var(--sp-text-muted);
  text-align: center;
}

.chohan-countdown {
  font-size: 30px;
  font-weight: 800;
  color: var(--sp-text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.chohan-result-banner {
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  padding: 8px 0;
}

.chohan-result-banner--cho {
  color: var(--sp-green-press);
}

.chohan-result-banner--han {
  color: var(--sp-red);
}

/* Điều khiển đặt cược */
.chohan-sides {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 8px 0;
}

.chohan-side {
  padding: 14px;
  border-radius: var(--sp-radius);
  border: 2px solid var(--sp-border-strong);
  background: var(--sp-surface-2);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease, transform 0.1s ease, background 0.15s ease;
}

.chohan-side:hover:not(:disabled) {
  transform: translateY(-2px);
}

.chohan-side:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.chohan-side__name {
  font-size: 17px;
  font-weight: 800;
  color: var(--sp-text);
}

.chohan-side__hint {
  font-size: 12px;
  color: var(--sp-text-muted);
}

.chohan-side__tally {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--sp-text-muted);
}

.chohan-side--cho.is-selected {
  border-color: var(--sp-green);
  background: var(--sp-green-soft);
}

.chohan-side--han.is-selected {
  border-color: var(--sp-red);
  background: rgba(226, 33, 52, 0.12);
}

/* Stepper số cược */
.chohan-stake {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 10px 0;
}

.chohan-stake__btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--sp-border-strong);
  background: var(--sp-surface-2);
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  color: var(--sp-text);
}

.chohan-stake__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.chohan-stake__value {
  font-size: 26px;
  font-weight: 800;
  min-width: 84px;
  text-align: center;
  color: var(--sp-text);
  font-variant-numeric: tabular-nums;
}

.chohan-mybet {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  padding: 10px;
  border-radius: var(--sp-radius);
  background: var(--sp-surface-2);
  color: var(--sp-text);
}

.chohan-balance {
  text-align: center;
  font-size: 13px;
  color: var(--sp-text-muted);
  margin-top: 6px;
}

.chohan-balance strong {
  color: #d9a400;
}

/* Lịch sử ngắn dưới overlay */
.chohan-history {
  margin-top: 14px;
  border-top: 1px solid var(--sp-border);
  padding-top: 12px;
}

.chohan-history__title {
  font-size: 12px;
  font-weight: 700;
  color: var(--sp-text-muted);
  margin-bottom: 8px;
}

.chohan-history__row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Line chart tổng xúc xắc */
.chohan-chart {
  width: 100%;
  height: auto;
  display: block;
}

.chohan-chart__grid {
  stroke: var(--sp-border);
  stroke-width: 1;
}

.chohan-chart__ytext,
.chohan-chart__xtext {
  fill: var(--sp-text-faint);
  font-size: 9px;
  font-weight: 600;
}

.chohan-chart__line {
  fill: none;
  stroke: var(--sp-text-faint);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.chohan-chart__dot {
  stroke: var(--sp-surface);
  stroke-width: 1.5;
}

.chohan-chart__dot--cho {
  fill: var(--sp-green);
}

.chohan-chart__dot--han {
  fill: var(--sp-red);
}

/* ── Modal luật chơi ───────────────────────────────────────────────── */
.chohan-overlay--rules {
  z-index: 1300;
}

.chohan-rules__lead {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--sp-text);
  margin: 4px 0 12px;
}

.chohan-rules__desc {
  font-size: 13.5px;
  color: var(--sp-text-muted);
  margin: 0 0 14px;
}

.chohan-rules__block {
  background: var(--sp-surface-2);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  padding: 12px 14px;
  margin-bottom: 12px;
}

.chohan-rules__block p {
  margin: 0 0 8px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--sp-text);
}

.chohan-rules__block ul {
  margin: 0;
  padding-left: 4px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chohan-rules__block li {
  font-size: 13.5px;
  color: var(--sp-text);
}

.chohan-rules__outcome {
  display: grid;
  gap: 10px;
  margin-bottom: 8px;
}

.chohan-rules__outcome p {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--sp-radius);
  font-size: 13.5px;
  line-height: 1.55;
  background: var(--sp-green-soft);
  color: var(--sp-text);
}

.chohan-rules__outcome p:last-child {
  background: rgba(226, 33, 52, 0.1);
}
/* Bi-a 9 bóng — NPC dọn bàn. Dùng token --sp-* của design system chung. */

/* ── Nút ở cột phải Home ───────────────────────────────────────────── */
.bil-rail {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bil-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: none;
  border-radius: var(--sp-radius-lg);
  cursor: pointer;
  color: #fff;
  text-align: left;
  background: linear-gradient(135deg, #16955c 0%, #0a4a2c 100%);
  box-shadow: 0 8px 22px rgba(16, 122, 74, 0.32);
  transition: transform 0.12s ease, box-shadow 0.2s ease;
}

.bil-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(16, 122, 74, 0.42);
}

.bil-cta:active {
  transform: translateY(0);
}

.bil-cta__icon {
  font-size: 26px;
  line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}

.bil-cta__title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.bil-cta__sub {
  font-size: 12px;
  opacity: 0.9;
}

.bil-cta__badge {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--sp-radius-pill);
  background: rgba(255, 255, 255, 0.22);
  white-space: nowrap;
}

/* ── Overlay xem ván ───────────────────────────────────────────────── */
.bil-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.66);
  backdrop-filter: blur(3px);
}

.bil-modal {
  width: 100%;
  max-width: 1180px;
  max-height: 94vh;
  overflow-y: auto;
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-lg);
  box-shadow: var(--sp-shadow-lg);
  padding: 18px 22px 22px;
}

.bil-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.bil-modal__title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--sp-text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.bil-close {
  border: none;
  background: var(--sp-surface-active);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  color: var(--sp-text-muted);
}

.bil-close:hover {
  background: var(--sp-surface-hover);
  color: var(--sp-text);
}

/*
 * Chiều cao modal do BÀN BI quyết định, không phải cột thông tin — nếu không,
 * nhật ký dài ra tới bi thứ 6, 7 là modal giãn theo, nhìn nhảy hết cả UI.
 * Cột phải nằm absolute nên không đóng góp chiều cao, tự cuộn bên trong.
 */
.bil-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 268px;
  gap: 18px;
  align-items: stretch;
}

/* ── Bàn bi ────────────────────────────────────────────────────────── */
.bil-stage {
  position: relative;
  min-width: 0;
}

.bil-table {
  width: 100%;
  line-height: 0;
}

.bil-table__canvas {
  display: block;
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.bil-stage__banner {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  padding: 8px 18px;
  border-radius: var(--sp-radius-pill);
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
}

/* ── Cột thông tin ─────────────────────────────────────────────────── */
.bil-side {
  position: relative;
  min-width: 0;
}

.bil-side__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

.bil-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.bil-stat {
  background: var(--sp-surface-2);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.bil-stat__label {
  font-size: 11px;
  color: var(--sp-text-faint);
  font-weight: 600;
}

.bil-stat__value {
  font-size: 16px;
  font-weight: 800;
  color: var(--sp-text);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 6px;
}

.bil-stat__value--sm {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

/* Lý do phải nhấc bi cái đặt lại — hiếm khi hiện, nên cho nổi màu cảnh báo */
.bil-stat__reason {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  color: #b8860b;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

:root[data-theme='dark'] .bil-stat__reason {
  color: #ffd166;
}

.bil-block {
  background: var(--sp-surface-2);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  padding: 10px 12px;
}

.bil-block--grow {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.bil-block__title {
  font-size: 11px;
  font-weight: 700;
  color: var(--sp-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.bil-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Chấm tròn mang màu bi thật */
.bil-ball {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  background: radial-gradient(
    circle at 32% 28%,
    rgba(255, 255, 255, 0.75),
    var(--bil-ball-color) 44%,
    rgba(0, 0, 0, 0.55)
  );
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.bil-ball--striped {
  background:
    linear-gradient(
      to bottom,
      #f2f0ea 0 28%,
      var(--bil-ball-color) 28% 72%,
      #f2f0ea 72% 100%
    );
  color: #1b1b1b;
  text-shadow: none;
}

.bil-ball--muted {
  filter: grayscale(1);
  opacity: 0.3;
}

.bil-log {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bil-log__row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--sp-text);
}

.bil-log__pocket {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bil-log__shot {
  color: var(--sp-text-faint);
  font-size: 11px;
  white-space: nowrap;
}

.bil-log__empty {
  font-size: 12px;
  color: var(--sp-text-faint);
}

@media (max-width: 900px) {
  .bil-body {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Một cột thì để nội dung chảy tự nhiên, bỏ khung cuộn cố định */
  .bil-side {
    position: static;
  }

  .bil-side__inner {
    position: static;
    overflow: visible;
  }

  .bil-log {
    max-height: 240px;
  }
}

/* ── Các cửa ăn được của cơ hiện tại (nền cho tính năng cược) ──────── */
.bil-odds {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.bil-odds__row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--sp-text);
  border-radius: 6px;
  border-left: 3px solid var(--bil-odds-color);
  background: color-mix(in srgb, var(--bil-odds-color) 10%, transparent);
}

/* Cả hàng là một nút đặt cược */
.bil-odds__pick {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 6px 6px 8px;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
}

.bil-odds__pick:hover:not(:disabled) {
  background: color-mix(in srgb, var(--bil-odds-color) 18%, transparent);
}

.bil-odds__pick:disabled {
  cursor: default;
}

/* Kèo mình đã đặt */
.bil-odds__row--mine {
  outline: 2px solid var(--bil-odds-color);
  outline-offset: -1px;
}

.bil-odds__tag {
  margin-left: 6px;
  font-style: normal;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--bil-odds-color);
}

/* Kết quả sau khi bi đã lăn xong */
.bil-odds__row--won {
  background: color-mix(in srgb, #1db954 22%, transparent);
  border-left-color: #1db954;
}

.bil-odds__row--lost {
  opacity: 0.4;
}

.bil-odds__gain {
  flex: 0 0 auto;
  padding-right: 8px;
  font-size: 10px;
  font-weight: 700;
  color: #1db954;
  white-space: nowrap;
}

.bil-odds__gain--off {
  color: var(--sp-text-faint);
  font-weight: 600;
}

/* ── Khu đặt cược ──────────────────────────────────────────────────── */
.bil-bet__timer {
  margin-left: 6px;
  font-style: normal;
  font-weight: 800;
  color: #e8a317;
  text-transform: none;
}

.bil-bet__stakes {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.bil-bet__stake {
  flex: 1 1 0;
  padding: 5px 0;
  border-radius: 6px;
  border: 1px solid var(--sp-border-strong);
  background: var(--sp-surface);
  color: var(--sp-text);
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.bil-bet__stake--on {
  background: var(--sp-green);
  border-color: var(--sp-green);
  color: #fff;
}

.bil-bet__stake:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.bil-bet__error {
  margin: 8px 0 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--sp-red);
}

.bil-bet__mine {
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--sp-text-muted);
}

.bil-bet__win {
  color: #1db954;
  font-weight: 800;
}

.bil-bet__lose {
  color: var(--sp-red);
  font-weight: 800;
}

.bil-bet__hint {
  margin: 8px 0 0;
  font-size: 10px;
  line-height: 1.45;
  color: var(--sp-text-faint);
}

.bil-odds__row--easy {
  --bil-odds-color: #1db954;
}

.bil-odds__row--medium {
  --bil-odds-color: #e8a317;
}

.bil-odds__row--hard {
  --bil-odds-color: #e2513d;
}

.bil-odds__pocket {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bil-odds__row--won .bil-odds__pocket {
  font-weight: 800;
}

/* Người cược nhìn con số nhân, không nhìn chữ "Dễ/Khó" hay xác suất nội bộ. */
.bil-odds__mult {
  flex: 0 0 auto;
  min-width: 44px;
  text-align: right;
  font-size: 12px;
  font-weight: 800;
  color: var(--bil-odds-color);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bil-block__note {
  margin-left: 6px;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  color: var(--sp-text-faint);
  text-transform: none;
}
/*
 * Khung tin tức "Thế giới có gì mới?".
 *
 * Cột phải chỉ rộng 340px và phải chia chỗ cho Cho-Han / Billiards / feed hoạt
 * động, nên bố cục cũ (ảnh full-width 120px + 3 dòng tóm tắt cho MỌI tin) chỉ
 * đủ chỗ hiện đúng một tin — đọc thì ít mà chiếm chỗ thì nhiều. Bố cục mới:
 *   - tin đầu tiên = hero, tiêu đề đè lên ảnh (bắt mắt, gọn chiều cao)
 *   - các tin sau = hàng ngang thumbnail 72px (≈4 tin trong cùng khoảng trống)
 *   - nút "Xem tất cả" mở NewsReaderModal dạng lưới tạp chí để đọc thật sự
 */

/* ── Vỏ widget ────────────────────────────────────────────────────── */

.news-view {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.news-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: 0 0 auto;
  padding: 0 2px 8px;
}

.news-source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--sp-text-muted);
}

.news-source__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--news-accent, var(--sp-green));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--news-accent, var(--sp-green)) 22%, transparent);
}

.news-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--sp-text-muted);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.news-refresh:hover:not(:disabled) {
  background: var(--sp-surface-hover);
  color: var(--sp-text);
}

.news-refresh:disabled {
  cursor: default;
  opacity: 0.6;
}

/* ── Danh sách trong cột phải ─────────────────────────────────────── */

.news-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.news-item {
  color: inherit;
  text-decoration: none;
  border-radius: var(--sp-radius);
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.news-item:hover {
  color: inherit;
}

/* Hero — tin mới nhất, tiêu đề nằm trên ảnh */

.news-hero {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--sp-radius-lg);
  background: var(--sp-surface-2);
  aspect-ratio: 16 / 10;
  flex: 0 0 auto;
}

/* Không có ảnh (hoặc ảnh chết) thì hero co lại thành khối chữ, khỏi để một
 * mảng nền trống theo tỉ lệ 16/10 chình ình. */
.news-hero--flat {
  aspect-ratio: auto;
  background: linear-gradient(135deg, var(--sp-surface-active), var(--sp-surface-2));
}

.news-hero--flat .news-hero__veil {
  display: none;
}

.news-hero--flat .news-hero__body {
  position: static;
  padding: 14px;
}

.news-hero--flat .news-hero__title {
  color: var(--sp-text);
  text-shadow: none;
}

.news-hero--flat .news-hero__meta {
  color: var(--sp-text-faint);
}

.news-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.news-hero:hover .news-hero__img {
  transform: scale(1.04);
}

.news-hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.92) 0%,
    rgba(0, 0, 0, 0.72) 32%,
    rgba(0, 0, 0, 0.15) 62%,
    rgba(0, 0, 0, 0) 100%
  );
}

.news-hero__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 12px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.news-hero__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-hero__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.78);
}

/* Hàng gọn — thumbnail trái, tiêu đề phải */

.news-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 8px;
}

.news-row:hover {
  background: var(--sp-surface-hover);
}

.news-row__thumb {
  width: 72px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--sp-radius);
  background: var(--sp-surface-2);
  display: block;
}

.news-row__thumb--empty {
  display: grid;
  place-items: center;
  font-size: 18px;
}

.news-row__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.news-row__title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--sp-text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-row__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--sp-text-faint);
}

/* Nhãn "Mới" cho tin dưới 2 tiếng */

.news-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border-radius: var(--sp-radius-pill);
  background: var(--sp-green);
  color: var(--sp-text-on-accent, #000);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.news-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: var(--sp-radius-pill);
  background: var(--sp-surface-active);
  color: var(--sp-text-muted);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}

/* ── Nút mở trang đọc ─────────────────────────────────────────────── */

.news-expand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1px solid var(--sp-border-strong);
  border-radius: var(--sp-radius-pill);
  background: transparent;
  color: var(--sp-text-muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.news-expand:hover {
  background: var(--sp-surface-hover);
  border-color: var(--sp-green);
  color: var(--sp-text);
}

/* ── Trang đọc toàn màn hình ──────────────────────────────────────── */

.news-modal .ant-modal-content {
  padding: 0;
  overflow: hidden;
  border-radius: var(--sp-radius-lg);
  background: var(--sp-surface);
}

.news-modal .ant-modal-body {
  padding: 0;
}

.news-reader {
  display: flex;
  flex-direction: column;
  height: min(84vh, 900px);
  min-height: 0;
}

.news-reader__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px 0;
  flex: 0 0 auto;
}

.news-reader__title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--sp-text);
}

.news-reader__sub {
  display: block;
  margin: 4px 0 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--sp-text-muted);
}

.news-reader__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  padding: 0 24px 20px;
}

.news-reader__body > .ant-tabs,
.news-reader__body .ant-tabs-content-holder,
.news-reader__body .ant-tabs-content,
.news-reader__body .ant-tabs-tabpane:not(.ant-tabs-tabpane-hidden) {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.news-reader__body .ant-tabs-tabpane-hidden {
  display: none;
}

.news-reader__body .ant-tabs-nav {
  flex: 0 0 auto;
}

/* Lưới tạp chí */

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  align-items: start; /* không kéo dãn thẻ ngắn cho bằng thẻ dẫn */
  gap: 16px;
  padding-bottom: 8px;
}

.news-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: var(--sp-radius-lg);
  background: var(--sp-surface-2);
  color: inherit;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.news-card:hover {
  background: var(--sp-surface-hover);
  border-color: var(--sp-border-strong);
  color: inherit;
  transform: translateY(-2px);
}

/* Tin đầu tiên chiếm hai cột — mắt có chỗ để bám vào khi mở lưới. */
.news-card--lead {
  grid-column: span 2;
}

/* Trừ khi nó không có ảnh: một thẻ toàn chữ kéo rộng gấp đôi chỉ thấy trống. */
.news-card--lead.news-card--text {
  grid-column: span 1;
}

.news-card__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--sp-radius);
  background: var(--sp-surface-active);
  aspect-ratio: 16 / 9;
  flex: 0 0 auto;
}

.news-card--lead .news-card__media {
  aspect-ratio: 16 / 8;
}

.news-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Thẻ không ảnh: bù lại bằng chữ to hơn và nền đậm hơn để không bị "hụt". */
.news-card--text {
  padding: 14px 14px 12px;
  border-color: var(--sp-border);
}

.news-card--text .news-card__title {
  font-size: 15px;
  -webkit-line-clamp: 4;
}

.news-card--text .news-card__summary {
  -webkit-line-clamp: 4;
}

.news-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 4px 4px;
}

.news-card__title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--sp-text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-card--lead .news-card__title {
  font-size: 17px;
}

.news-card__summary {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--sp-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 2px;
  font-size: 11.5px;
  color: var(--sp-text-faint);
}

.news-loadmore {
  display: flex;
  justify-content: center;
  padding: 16px 0 4px;
  grid-column: 1 / -1;
}

/* Bố cục lưới hẹp lại thì tin dẫn không span 2 cột nữa */
@media (max-width: 720px) {
  .news-card--lead {
    grid-column: span 1;
  }

  .news-card--lead .news-card__title {
    font-size: 14.5px;
  }
}

/* ── Trạng thái rỗng / lỗi ────────────────────────────────────────── */

.news-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 16px;
  text-align: center;
  color: var(--sp-text-muted);
  font-size: 13px;
}

.news-skeleton {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.news-skeleton__block {
  border-radius: var(--sp-radius);
  background: linear-gradient(
    90deg,
    var(--sp-surface-2) 25%,
    var(--sp-surface-hover) 37%,
    var(--sp-surface-2) 63%
  );
  background-size: 400% 100%;
  animation: news-shimmer 1.4s ease infinite;
}

@keyframes news-shimmer {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .news-skeleton__block {
    animation: none;
  }

  .news-hero:hover .news-hero__img,
  .news-card:hover {
    transform: none;
  }
}
/* ── CTA cờ tướng ngoài Home ─────────────────────────────────────── */
.xiangqi-promo {
  position: relative;
  isolation: isolate;
  min-height: 160px;
  overflow: hidden;
  padding: 18px;
  border: 1px solid rgba(255, 221, 132, 0.55);
  border-radius: var(--sp-radius-lg);
  color: #fff9e9;
  background:
    linear-gradient(125deg, rgba(45, 13, 8, 0.12), rgba(45, 13, 8, 0.88)),
    url('/xiangqi/gmchess-wood/xiangqi_gmchess_wood.svg') center 42% / 145% auto,
    #7b2016;
  box-shadow: 0 14px 34px rgba(118, 31, 20, 0.34);
}

.xiangqi-promo__glow {
  position: absolute;
  z-index: -1;
  inset: -80px -120px auto auto;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(255, 197, 75, 0.3);
  filter: blur(30px);
}

.xiangqi-promo__piece {
  position: absolute;
  right: 12px;
  top: 33px;
  display: grid;
  width: 74px;
  height: 74px;
  place-items: center;
  border: 7px solid #6d160f;
  border-radius: 50%;
  color: #b01810;
  background: radial-gradient(circle at 35% 28%, #fff3c2, #d9a34d 68%, #955b1e);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.38), inset 0 0 0 2px #f7d985;
  font: 900 33px serif;
  transform: rotate(8deg);
}

.xiangqi-promo__copy { position: relative; z-index: 1; max-width: 230px; }
.xiangqi-promo__eyebrow, .xiangqi-eyebrow { color: #ffd86c; font-size: 10px; font-weight: 900; letter-spacing: 0.16em; }
.xiangqi-promo h2 { margin: 4px 0 2px; font-size: 21px; line-height: 1.1; }
.xiangqi-promo__copy > p { margin: 0 0 15px; font-size: 12px; color: rgba(255,255,255,.84); }
.xiangqi-promo__actions { display: flex; gap: 7px; }
.xiangqi-promo__actions button { border: 0; border-radius: 999px; padding: 8px 12px; cursor: pointer; font-size: 11px; font-weight: 850; }
.xiangqi-promo__primary { color: #351600; background: linear-gradient(135deg, #ffe899, #f3b92f); box-shadow: 0 4px 12px rgba(0,0,0,.22); }
.xiangqi-promo__secondary { color: white; background: rgba(255,255,255,.16); backdrop-filter: blur(4px); }
.xiangqi-promo__actions button:hover { transform: translateY(-1px); }
.xiangqi-promo__badge { position: absolute; right: 12px; bottom: 13px; padding: 3px 8px; border-radius: 999px; color: #ffe9a3; background: rgba(31,7,4,.52); font-size: 10px; font-weight: 750; }

.xiangqi-promo--sticky {
  position: fixed;
  z-index: 70;
  width: 238px;
  min-height: 92px;
  box-sizing: border-box;
  padding: 13px 12px 10px;
  cursor: grab;
  touch-action: none;
  transition: left .18s ease, top .18s ease, box-shadow .18s ease;
}

.xiangqi-promo--sticky:not([style]) { visibility: hidden; }
.xiangqi-promo--sticky.is-dragging { cursor: grabbing; transition: none; box-shadow: 0 18px 38px rgba(80,25,12,.46); }
.xiangqi-promo--sticky .xiangqi-promo__copy { max-width: 170px; }
.xiangqi-promo--sticky .xiangqi-promo__piece { top: 27px; right: 10px; width: 42px; height: 42px; border-width: 4px; font-size: 21px; }
.xiangqi-promo--sticky h2 { margin: 2px 0 1px; font-size: 15px; }
.xiangqi-promo--sticky .xiangqi-promo__copy > p { margin-bottom: 8px; font-size: 10px; }
.xiangqi-promo--sticky .xiangqi-promo__actions { gap: 5px; }
.xiangqi-promo--sticky .xiangqi-promo__actions button { padding: 6px 9px; font-size: 10px; }
.xiangqi-promo__drag { position: absolute; top: 3px; left: 7px; color: rgba(255,255,255,.6); font-size: 13px; line-height: 1; cursor: grab; }
.xiangqi-promo__close { position: absolute; z-index: 3; top: 5px; right: 5px; display: grid; width: 20px; height: 20px; padding: 0; place-items: center; border: 0; border-radius: 50%; color: rgba(255,255,255,.78); background: rgba(32,8,4,.48); cursor: pointer; font-size: 9px; }
.xiangqi-promo__close:hover { color: #fff; background: rgba(32,8,4,.75); }

.sp-quicktoys__btn--xiangqi {
  color: #9c271b !important;
  border: 2px solid #8c2519 !important;
  background: radial-gradient(circle at 35% 28%, #fff0ba, #dba554 72%, #a36b2e) !important;
  font-family: serif;
  font-weight: 950;
  box-shadow: 0 3px 7px rgba(74,34,9,.24);
}

/* ── Modal luật ───────────────────────────────────────────────────── */
.xiangqi-modal-backdrop { position: fixed; z-index: 1400; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(8,5,3,.68); backdrop-filter: blur(5px); }
.xiangqi-rules { width: min(660px, 100%); max-height: 92vh; overflow-y: auto; padding: 24px; border: 1px solid var(--sp-border); border-radius: 18px; color: var(--sp-text); background: var(--sp-surface); box-shadow: 0 26px 80px rgba(0,0,0,.38); }
.xiangqi-rules__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.xiangqi-rules h2 { margin: 3px 0 0; font-size: 27px; }
.xiangqi-icon-btn { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border: 1px solid var(--sp-border); border-radius: 50%; color: var(--sp-text); background: var(--sp-surface-2); cursor: pointer; font-weight: 800; }
.xiangqi-rules__lead { margin: 18px 0; color: var(--sp-text-muted); line-height: 1.55; }
.xiangqi-rules__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.xiangqi-rules__grid article { display: flex; flex-direction: column; gap: 5px; padding: 14px; border-radius: 12px; background: var(--sp-surface-2); }
.xiangqi-rules__grid strong { font-size: 14px; }
.xiangqi-rules__grid span { color: var(--sp-text-muted); font-size: 13px; line-height: 1.45; }
.xiangqi-rules__note { margin: 14px 0; padding: 12px 14px; border-left: 3px solid #c83b27; color: var(--sp-text-muted); background: rgba(200,59,39,.08); font-size: 13px; line-height: 1.5; }
.xiangqi-rules__play { width: 100%; }

/* ── Trang chơi ───────────────────────────────────────────────────── */
.xiangqi-page { min-height: 100vh; color: var(--sp-text); background: radial-gradient(circle at 50% -10%, rgba(162,73,34,.17), transparent 38%), var(--sp-bg); }
.xiangqi-topbar { display: grid; grid-template-columns: minmax(150px, 1fr) auto minmax(260px, 1fr); align-items: center; min-height: 68px; padding: 0 28px; border-bottom: 1px solid var(--sp-border); background: color-mix(in srgb, var(--sp-surface) 88%, transparent); backdrop-filter: blur(14px); }
.xiangqi-topbar__account { display: flex; min-width: 0; align-items: center; justify-content: flex-end; gap: 10px; }
.xiangqi-topbar__account .sp-user-chip { min-width: 0; max-width: 220px; }
.xiangqi-topbar__account .sp-user-chip > span:not(.anticon) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xiangqi-back { color: var(--sp-text-muted); font-size: 13px; font-weight: 700; text-decoration: none; }
.xiangqi-back:hover { color: var(--sp-text); }
.xiangqi-topbar__brand { display: flex; align-items: center; gap: 9px; font-size: 15px; white-space: nowrap; }
.xiangqi-topbar__brand span { display: grid; width: 34px; height: 34px; place-items: center; border: 3px solid #8e2418; border-radius: 50%; color: #a62618; background: #edcb89; font: 900 18px serif; }
.xiangqi-stage { width: min(1180px, calc(100% - 48px)); min-height: calc(100vh - 68px); margin: 0 auto; display: grid; place-items: center; padding: 30px 0 44px; box-sizing: border-box; }
.xiangqi-loading { color: var(--sp-text-muted); }

.xiangqi-lobby { width: min(780px, 100%); padding: 38px; text-align: center; border: 1px solid var(--sp-border); border-radius: 22px; background: var(--sp-surface); box-shadow: var(--sp-shadow-lg); }
.xiangqi-lobby h1 { margin: 7px 0; font-size: clamp(30px, 4vw, 44px); letter-spacing: -.04em; }
.xiangqi-lobby > p { margin: 0 auto 26px; color: var(--sp-text-muted); }
.xiangqi-difficulties { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.xiangqi-level { display: flex; min-height: 155px; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--sp-border); border-radius: 16px; color: var(--sp-text); background: var(--sp-surface-2); cursor: pointer; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.xiangqi-level:hover:not(:disabled) { transform: translateY(-4px); border-color: #c18a3c; box-shadow: 0 12px 28px rgba(112,62,20,.15); }
.xiangqi-level:disabled { cursor: not-allowed; opacity: .45; }
.xiangqi-level span { font-size: 17px; font-weight: 800; }
.xiangqi-level strong { color: #c33a24; font-size: 25px; }
.xiangqi-level small { color: var(--sp-text-muted); }
.xiangqi-level--hard { background: linear-gradient(145deg, rgba(184,49,30,.11), var(--sp-surface-2)); }
.xiangqi-warning { margin: 18px 0 0 !important; color: var(--sp-red) !important; font-size: 13px; }
.xiangqi-link-btn { margin-top: 20px; border: 0; color: var(--sp-text-muted); background: transparent; cursor: pointer; text-decoration: underline; }

.xiangqi-game-layout { width: 100%; display: grid; grid-template-columns: minmax(530px, 700px) minmax(280px, 340px); align-items: center; justify-content: center; gap: 34px; }
.xiangqi-board-wrap { position: relative; }
.xiangqi-board { position: relative; width: 100%; aspect-ratio: 902.383 / 1002; user-select: none; filter: drop-shadow(0 18px 25px rgba(62,30,8,.26)); }
.xiangqi-board__wood { display: block; width: 100%; height: 100%; pointer-events: none; }
.xiangqi-square { position: absolute; z-index: 2; left: calc(5.694% + var(--xq-col) * 11.082%); top: calc(5.09% + var(--xq-row) * 9.98%); display: grid; width: 10.8%; aspect-ratio: 1; padding: 0; place-items: center; border: 0; border-radius: 50%; background: transparent; cursor: pointer; transform: translate(-50%, -50%); transition: filter .12s ease, transform .12s ease; }
.xiangqi-square img { width: 96%; height: 96%; pointer-events: none; filter: drop-shadow(0 4px 3px rgba(46,20,5,.38)); }
.xiangqi-square:hover img { filter: drop-shadow(0 6px 4px rgba(46,20,5,.45)) brightness(1.04); }
.xiangqi-square.is-selected { outline: 4px solid rgba(255,235,89,.92); box-shadow: 0 0 0 7px rgba(82,44,8,.25); }
.xiangqi-square.is-target::after { content: ''; width: 23%; aspect-ratio: 1; border-radius: 50%; background: rgba(25,102,51,.72); box-shadow: 0 0 0 5px rgba(255,255,255,.26); }
.xiangqi-square.is-target:has(img)::after { position: absolute; inset: -1px; width: auto; border: 5px solid rgba(25,102,51,.82); background: transparent; }
.xiangqi-square.is-hint { outline: 4px solid #ffd83d; animation: xiangqi-pulse 1s ease-in-out infinite; }
.xiangqi-square.is-answer { outline: 5px solid #25a75c; }
.xiangqi-board.is-disabled .xiangqi-square { cursor: default; }
.xiangqi-board__check { position: absolute; z-index: 4; left: 50%; top: 50%; padding: 9px 17px; border: 2px solid #ffd693; border-radius: 8px; color: #fff; background: rgba(162,28,18,.91); box-shadow: 0 8px 25px rgba(0,0,0,.28); transform: translate(-50%,-50%) rotate(-4deg); font-size: 22px; font-weight: 950; letter-spacing: .08em; }
@keyframes xiangqi-pulse { 50% { filter: brightness(1.25); } }
.xiangqi-thinking { position: absolute; left: 50%; bottom: 6%; display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; color: #fff; background: rgba(39,22,12,.84); transform: translateX(-50%); font-size: 12px; font-weight: 750; backdrop-filter: blur(5px); }
.xiangqi-thinking span { width: 8px; height: 8px; border-radius: 50%; background: #ffd453; animation: xiangqi-blink .8s ease-in-out infinite alternate; }
@keyframes xiangqi-blink { to { opacity: .3; } }

.xiangqi-game-panel { padding: 22px; border: 1px solid var(--sp-border); border-radius: 18px; background: var(--sp-surface); box-shadow: var(--sp-shadow-lg); }
.xiangqi-game-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.xiangqi-level-tag { padding: 5px 11px; border-radius: 999px; background: var(--sp-surface-2); font-size: 12px; font-weight: 850; }
.xiangqi-level-tag--hard { color: #d7452c; background: rgba(215,69,44,.12); }
.xiangqi-pot { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--sp-border); color: var(--sp-text-muted); font-size: 13px; }
.xiangqi-pot strong { color: var(--sp-text); font-size: 16px; }
.xiangqi-pot--reward strong { color: #d8492e; }
.xiangqi-timer { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 3px 12px; margin-top: 16px; padding: 12px 13px; border: 1px solid rgba(30,154,80,.24); border-radius: 11px; color: var(--sp-text-muted); background: var(--sp-green-soft); font-size: 12px; }
.xiangqi-timer strong { color: var(--sp-green); font-size: 24px; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.xiangqi-timer small { grid-column: 1 / -1; color: var(--sp-text-faint); font-size: 10px; }
.xiangqi-timer.is-urgent { border-color: rgba(216,73,46,.38); background: rgba(216,73,46,.1); }
.xiangqi-timer.is-urgent strong { color: #d8492e; animation: xiangqi-timer-pulse .7s ease-in-out infinite alternate; }
.xiangqi-timer.is-expired { border-color: var(--sp-border); background: var(--sp-surface-2); }
.xiangqi-timer.is-expired strong { color: var(--sp-text-faint); animation: none; }
@keyframes xiangqi-timer-pulse { to { opacity: .55; } }
.xiangqi-turn { display: flex; align-items: center; gap: 9px; margin: 20px 0 14px; padding: 13px; border-radius: 10px; background: var(--sp-green-soft); font-size: 13px; font-weight: 800; }
.xiangqi-turn.is-npc { background: rgba(196,62,38,.1); }
.xiangqi-turn__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sp-green); box-shadow: 0 0 0 4px rgba(29,185,84,.14); }
.xiangqi-turn.is-npc .xiangqi-turn__dot { background: #c83e26; box-shadow: 0 0 0 4px rgba(200,62,38,.14); }
.xiangqi-practice { margin-bottom: 12px; padding: 8px 10px; border-radius: 8px; color: #936d11; background: rgba(242,191,45,.13); font-size: 11px; font-weight: 750; }
.xiangqi-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.xiangqi-tools button, .xiangqi-resign { min-height: 38px; border: 1px solid var(--sp-border); border-radius: 9px; color: var(--sp-text); background: var(--sp-surface-2); cursor: pointer; font-size: 12px; font-weight: 700; }
.xiangqi-tools button:disabled, .xiangqi-resign:disabled { opacity: .45; cursor: not-allowed; }
.xiangqi-resign { width: 100%; margin-top: 9px; color: var(--sp-red); background: transparent; }
.xiangqi-result { padding: 24px 0 10px; text-align: center; }
.xiangqi-result__icon { font-size: 42px; }
.xiangqi-result h2 { margin: 7px 0; }
.xiangqi-result p { color: var(--sp-text-muted); font-size: 13px; line-height: 1.45; }
.xiangqi-result__payout { display: block; margin: 12px 0 18px; color: var(--sp-green); font-size: 28px; }
.xiangqi-attribution { margin-top: 20px; color: var(--sp-text-faint); font-size: 9px; line-height: 1.4; }
.xiangqi-attribution a { color: inherit; }

@media (max-width: 960px) {
  .xiangqi-topbar { grid-template-columns: auto 1fr; gap: 14px; padding: 10px 18px; }
  .xiangqi-topbar__brand { justify-self: start; }
  .xiangqi-topbar__account { grid-column: 2; grid-row: 1 / span 2; }
  .xiangqi-back { grid-column: 1; grid-row: 2; }
  .xiangqi-game-layout { grid-template-columns: minmax(470px, 650px); }
  .xiangqi-game-panel { width: min(520px, 100%); margin: 0 auto; box-sizing: border-box; }
}

@media (prefers-reduced-motion: reduce) {
  .xiangqi-square, .xiangqi-level, .xiangqi-thinking span, .xiangqi-square.is-hint, .xiangqi-promo--sticky, .xiangqi-timer strong { animation: none; transition: none; }
}

/* Phòng cờ tướng hai người */
.xiangqi-modes { display: flex; justify-content: center; gap: 12px; margin-bottom: 24px; }
.xiangqi-modes button[aria-pressed='true'] { background: var(--sp-green); color: var(--sp-text-on-accent); }
.xiangqi-pvp-join { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.xiangqi-pvp-join label { width: 100%; }
.xiangqi-pvp-join input { border: 1px solid var(--sp-border); border-radius: 8px; padding: 10px 14px; background: var(--sp-surface); color: var(--sp-text); text-transform: uppercase; letter-spacing: .15em; }
.xiangqi-pvp-code { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 20px 0; }
.xiangqi-pvp-code strong { font-size: 24px; letter-spacing: .15em; }
.wordchain-promo { position: fixed; z-index: 1180; display: flex; width: 250px; min-height: 102px; box-sizing: border-box; align-items: center; gap: 10px; padding: 18px 12px 12px; overflow: hidden; border: 1px solid rgba(190,255,222,.28); border-radius: 16px; color: #fff; background: radial-gradient(circle at 10% 20%, rgba(70,255,179,.28), transparent 38%), linear-gradient(145deg,#173b37,#102521 62%,#091714); box-shadow: 0 15px 34px rgba(2,31,24,.38); cursor: grab; touch-action: none; user-select: none; }
.wordchain-promo:not([style]) { visibility: hidden; }
.wordchain-promo.is-dragging { cursor: grabbing; box-shadow: 0 20px 45px rgba(2,31,24,.52); }
.wordchain-promo__drag { position: absolute; top: 3px; left: 7px; color: rgba(255,255,255,.55); font-size: 13px; }
.wordchain-promo__close { position: absolute; z-index: 2; top: 5px; right: 5px; display: grid; width: 20px; height: 20px; padding: 0; place-items: center; border: 0; border-radius: 50%; color: rgba(255,255,255,.8); background: rgba(0,0,0,.25); cursor: pointer; font-size: 9px; }
.wordchain-promo__icon { display: grid; width: 45px; height: 45px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(177,255,218,.3); border-radius: 14px; background: rgba(44,214,145,.13); font-size: 24px; transform: rotate(-5deg); }
.wordchain-promo__copy { min-width: 0; flex: 1; }
.wordchain-promo__copy h2 { margin: 0 0 3px; font-size: 15px; line-height: 1.2; }
.wordchain-promo__copy p { margin: 0 0 8px; overflow: hidden; color: rgba(255,255,255,.77); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.wordchain-promo__copy p strong { color: #a9f5cf; }
.wordchain-promo__copy > div { display: flex; gap: 5px; }
.wordchain-promo__copy button { padding: 6px 9px; border: 0; border-radius: 999px; color: #08251b; background: #73e7ad; cursor: pointer; font-size: 10px; font-weight: 850; }
.wordchain-promo__copy button + button { color: #fff; background: rgba(255,255,255,.14); }
.wordchain-promo__badge { position: absolute; right: 10px; bottom: 4px; color: #83e8b6; font-size: 8px; font-weight: 800; letter-spacing: .03em; }

.wordchain-backdrop { position: fixed; z-index: 1450; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(2,13,10,.76); backdrop-filter: blur(7px); }
.wordchain-game { width: min(920px,100%); max-height: 92vh; overflow: auto; border: 1px solid var(--sp-border); border-radius: 22px; color: var(--sp-text); background: var(--sp-surface); box-shadow: 0 30px 90px rgba(0,0,0,.46); }
.wordchain-game__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--sp-border); background: linear-gradient(115deg,rgba(31,190,123,.13),transparent); }
.wordchain-game__head span, .wordchain-rules__head span { color: var(--sp-green); font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.wordchain-game__head h2, .wordchain-rules__head h2 { margin: 3px 0 0; font-size: 22px; }
.wordchain-game__head-actions { display: flex; gap: 7px; }
.wordchain-game__head-actions button, .wordchain-rules__head button { display: grid; width: 32px; height: 32px; padding: 0; place-items: center; border: 1px solid var(--sp-border); border-radius: 50%; color: var(--sp-text); background: var(--sp-surface-2); cursor: pointer; font-weight: 850; }
.wordchain-layout { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(240px,.75fr); }
.wordchain-arena { padding: 22px; border-right: 1px solid var(--sp-border); }
.wordchain-status { display: flex; align-items: center; justify-content: space-between; color: var(--sp-text-muted); font-size: 12px; font-weight: 750; }
.wordchain-status strong { min-width: 48px; color: var(--sp-green); font-size: 29px; font-variant-numeric: tabular-nums; text-align: right; }
.wordchain-status strong.is-urgent { color: var(--sp-red); animation: wordchain-pulse .55s ease-in-out infinite alternate; }
@keyframes wordchain-pulse { to { opacity: .45; transform: scale(.94); } }
.wordchain-current { display: flex; min-height: 148px; margin: 13px 0 18px; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(35,190,124,.22); border-radius: 18px; background: radial-gradient(circle,rgba(41,194,126,.13),transparent 68%),var(--sp-surface-2); }
.wordchain-current small { color: var(--sp-text-faint); font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.wordchain-current strong { margin: 6px 0 2px; color: var(--sp-green); font-size: clamp(33px,5vw,52px); letter-spacing: -.04em; }
.wordchain-current span { color: var(--sp-text-muted); font-size: 11px; }
.wordchain-answer > label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 800; }
.wordchain-answer > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.wordchain-answer input { min-width: 0; height: 44px; padding: 0 13px; border: 1px solid var(--sp-border); border-radius: 11px; outline: 0; color: var(--sp-text); background: var(--sp-surface-2); font-size: 15px; }
.wordchain-answer input:focus { border-color: var(--sp-green); box-shadow: 0 0 0 3px var(--sp-green-soft); }
.wordchain-answer button[type='submit'] { padding: 0 17px; border: 0; border-radius: 11px; color: #052016; background: var(--sp-green); cursor: pointer; font-weight: 900; }
.wordchain-answer button:disabled { cursor: not-allowed; opacity: .4; }
.wordchain-answer > p { min-height: 18px; margin: 7px 2px 0; color: var(--sp-text-muted); font-size: 10px; }
.wordchain-login { padding: 0; border: 0; color: var(--sp-green); background: transparent; cursor: pointer; font-size: 11px; font-weight: 800; }
.wordchain-meta { display: flex; margin-top: 18px; flex-wrap: wrap; gap: 6px; }
.wordchain-meta span { padding: 5px 8px; border-radius: 999px; color: var(--sp-text-muted); background: var(--sp-surface-2); font-size: 10px; font-weight: 700; }
.wordchain-history { min-height: 430px; padding: 20px; background: color-mix(in srgb,var(--sp-surface-2) 54%,transparent); }
.wordchain-history h3 { margin: 0 0 14px; font-size: 14px; }
.wordchain-history__seed, .wordchain-history li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; border-bottom: 1px solid var(--sp-border); font-size: 11px; }
.wordchain-history__seed { border-radius: 9px; background: var(--sp-green-soft); }
.wordchain-history span { min-width: 0; overflow: hidden; color: var(--sp-text-muted); text-overflow: ellipsis; white-space: nowrap; }
.wordchain-history strong { flex: 0 0 auto; color: var(--sp-text); }
.wordchain-history ol { max-height: 340px; margin: 8px 0 0; padding: 0; overflow: auto; list-style: none; }
.wordchain-history > p { color: var(--sp-text-faint); font-size: 11px; text-align: center; }
.wordchain-result { padding: 14px 16px; border-radius: 13px; text-align: center; background: var(--sp-green-soft); }
.wordchain-result > span { font-size: 30px; }
.wordchain-result h3 { margin: 5px 0; }
.wordchain-result > strong { color: var(--sp-green); font-size: 25px; }
.wordchain-result p, .wordchain-result small { display: block; margin: 6px 0 0; color: var(--sp-text-muted); font-size: 10px; }
.wordchain-result--voided { background: var(--sp-surface-2); }
.wordchain-empty { padding: 60px 20px; text-align: center; }
.wordchain-empty > span { display: block; font-size: 42px; }
.wordchain-empty strong { display: block; margin-top: 8px; }
.wordchain-empty p { color: var(--sp-text-muted); }

.wordchain-rules { width: min(700px,100%); max-height: 92vh; overflow: auto; padding: 24px; box-sizing: border-box; border: 1px solid var(--sp-border); border-radius: 20px; color: var(--sp-text); background: var(--sp-surface); box-shadow: 0 28px 85px rgba(0,0,0,.44); }
.wordchain-rules__head { display: flex; align-items: flex-start; justify-content: space-between; }
.wordchain-rules__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0 14px; }
.wordchain-rules__grid article { padding: 14px; border-radius: 12px; background: var(--sp-surface-2); }
.wordchain-rules__grid strong { font-size: 13px; }
.wordchain-rules__grid p, .wordchain-rules__note { color: var(--sp-text-muted); font-size: 12px; line-height: 1.5; }
.wordchain-rules__note { padding: 12px 14px; border-left: 3px solid var(--sp-green); background: var(--sp-green-soft); }
.wordchain-rules > .sp-btn { width: 100%; }

.sp-quicktoys__btn--wordchain { color: #08794e !important; background: rgba(66,224,156,.16) !important; }
@media (max-width: 760px) { .wordchain-layout { grid-template-columns: 1fr; } .wordchain-arena { border-right: 0; border-bottom: 1px solid var(--sp-border); } .wordchain-history { min-height: 220px; } .wordchain-rules__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .wordchain-status strong.is-urgent { animation: none; } }
.rl-backdrop {
  position: fixed;
  z-index: 1460;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(8, 18, 28, 0.78);
  backdrop-filter: blur(7px);
}

.rl-backdrop--rules { z-index: 1470; }

.rl-game {
  width: min(980px, 100%);
  max-height: 92vh;
  overflow: auto;
  border: 1px solid var(--sp-border);
  border-radius: 22px;
  color: var(--sp-text);
  background: var(--sp-surface);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.46);
}

.rl-game__head,
.rl-rules__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--sp-border);
  background: linear-gradient(115deg, rgba(46, 196, 90, 0.16), rgba(232, 67, 67, 0.12));
}

.rl-game__head span,
.rl-rules__head span {
  color: #1fa85a;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.rl-game__head h2,
.rl-rules__head h2 { margin: 3px 0 0; font-size: 22px; }

.rl-game__head-actions { display: flex; gap: 7px; }

.rl-game__head-actions button,
.rl-rules__head button {
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--sp-border);
  border-radius: 50%;
  color: var(--sp-text);
  background: var(--sp-surface-2);
  cursor: pointer;
  font-weight: 850;
}

.rl-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(220px, 0.7fr); }
.rl-arena { padding: 16px 18px 18px; border-right: 1px solid var(--sp-border); }
.rl-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  color: var(--sp-text-muted);
  font-size: 12px;
  font-weight: 750;
}
.rl-status strong {
  min-width: 48px;
  color: var(--sp-green);
  font-size: 28px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.rl-status strong.is-urgent { color: var(--sp-red); }

.rl-field {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 440px;
  border-radius: 18px;
  user-select: none;
  cursor: pointer;
  touch-action: none;
  background: linear-gradient(#7ec8ff 0 42%, #5dcf6b 42% 100%);
}
.rl-field--red,
.rl-field--turning_red { background: linear-gradient(#f08a7a 0 42%, #de6b4f 42% 100%); }
.rl-field--green,
.rl-field--turning_green { background: linear-gradient(#8fd4ff 0 42%, #62d46f 42% 100%); }

.rl-sky { position: absolute; inset: 0 0 48%; pointer-events: none; }
.rl-sun {
  position: absolute;
  top: 18px;
  right: 28px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #ffe56a;
}
.rl-cloud {
  position: absolute;
  height: 22px;
  border-radius: 20px;
  background: #fff;
  opacity: 0.9;
}
.rl-cloud--a { top: 36px; left: 24px; width: 78px; }
.rl-cloud--b { top: 58px; left: 120px; width: 54px; }

.rl-banner {
  position: absolute;
  z-index: 8;
  top: 12px;
  left: 50%;
  padding: 6px 16px;
  border-radius: 999px;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.08em;
  transform: translateX(-50%);
}
.rl-banner--green,
.rl-banner--turning_green { background: #1fa85a; }
.rl-banner--red,
.rl-banner--turning_red { background: #e23d3d; }

.rl-stage {
  position: absolute;
  z-index: 2;
  inset: 56px 10px 36px;
}

.rl-map {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.rl-map__grass {
  fill: #4ec86a;
  stroke: #2f8a44;
  stroke-width: 1.2;
  filter: drop-shadow(0 10px 0 #2f8a44);
}
.rl-map__track-edge {
  fill: none;
  stroke: #c47a22;
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.rl-map__finish {
  stroke: #c47a22;
  stroke-width: 0.6;
}

.rl-actors {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: visible;
  pointer-events: none;
}

.rl-gate {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.rl-gate__post {
  position: absolute;
  width: 10px;
  height: 64px;
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, #f3d27a, #8d4f12);
  box-shadow:
    inset -2px 0 0 rgba(0, 0, 0, 0.2),
    2px 2px 0 rgba(40, 20, 0, 0.18);
  transform: translate(-50%, -100%);
}
.rl-gate__post--far {
  width: 8px;
  height: 56px;
  filter: brightness(0.9);
}
.rl-gate__post--near { z-index: 8; }
.rl-gate__beam {
  position: absolute;
  z-index: 6;
  height: 8px;
  border-radius: 3px;
  background: linear-gradient(180deg, #ffe56a, #c47a22);
  box-shadow: 0 2px 0 #8d4f12;
  transform-origin: 0 center;
}
.rl-gate__banner {
  position: absolute;
  z-index: 7;
  display: flex;
  min-width: 64px;
  height: 24px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 2px solid #8d4f12;
  border-radius: 6px;
  color: #5a3208;
  background: linear-gradient(#ffe56a, #f0c84a);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  transform: translate(-50%, calc(-100% - 66px));
  box-shadow: 0 3px 0 #c47a22;
}

.rl-doll {
  position: absolute;
  z-index: 9;
  width: 48px;
  height: 78px;
  transform: translate(-50%, -100%);
  transform-origin: center bottom;
  transition: transform 0.35s ease;
}
.rl-doll--away {
  transform: translate(-50%, -100%) scaleX(-1);
}
.rl-doll__hair {
  position: absolute;
  left: 6px;
  top: 0;
  width: 34px;
  height: 24px;
  border-radius: 16px 16px 8px 8px;
  background: #3b2318;
}
.rl-doll__head {
  position: absolute;
  left: 10px;
  top: 8px;
  width: 26px;
  height: 24px;
  border-radius: 12px;
  background: #f3c7a3;
}
.rl-doll__head i {
  position: absolute;
  top: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #2b2118;
}
.rl-doll__head i:first-child { left: 5px; }
.rl-doll__head i:last-child { right: 5px; }
.rl-doll__dress {
  position: absolute;
  left: 5px;
  top: 30px;
  width: 36px;
  height: 44px;
  border-radius: 8px 8px 14px 14px;
  background: #e94b7a;
}

.rl-signal {
  position: absolute;
  z-index: 8;
  width: 16px;
  height: 40px;
  border-radius: 10px;
  background: #222;
  transform: translate(-50%, -100%);
}
.rl-signal b {
  display: block;
  width: 9px;
  height: 9px;
  margin: 5px auto 0;
  border-radius: 50%;
  background: #444;
}
.rl-signal--green b:last-child,
.rl-signal--turning_green b:last-child { background: #3dff6a; }
.rl-signal--red b:first-child,
.rl-signal--turning_red b:first-child { background: #ff4d4d; }

.rl-pawn {
  position: absolute;
  width: 0;
  height: 0;
  transition: left 0.12s linear, top 0.12s linear;
}
.rl-pawn__sprite {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 2px;
  transform: translate(-50%, calc(-100% - 1px));
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.28));
}
.rl-pawn__shadow {
  position: absolute;
  left: -16px;
  top: -4px;
  width: 32px;
  height: 10px;
  border-radius: 50%;
  background: rgba(20, 40, 16, 0.38);
}
.rl-pawn__name {
  max-width: 72px;
  overflow: hidden;
  padding: 1px 5px;
  border-radius: 999px;
  color: #123;
  background: rgba(255, 255, 255, 0.92);
  font-size: 9px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rl-pawn--eliminated { filter: grayscale(1); opacity: 0.72; }
.rl-pawn--eliminated .rl-pawn__sprite::after {
  content: '✕';
  position: absolute;
  top: -6px;
  right: -4px;
  color: #e23d3d;
  font-size: 16px;
  font-weight: 900;
}
.rl-pawn--finished .rl-pawn__name { background: #ffe56a; }
.rl-pawn.is-running .sp-avatar { animation: rl-hop 0.28s ease-in-out infinite alternate; }

.rl-hint {
  position: absolute;
  z-index: 8;
  right: 12px;
  bottom: 8px;
  left: 12px;
  margin: 0;
  color: rgba(20, 40, 20, 0.8);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.rl-result {
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  text-align: center;
  background: var(--sp-green-soft);
}
.rl-result span { font-size: 28px; }
.rl-result h3 { margin: 4px 0 8px; }
.rl-result ol { margin: 0; padding: 0; list-style: none; }
.rl-result li { color: var(--sp-text-muted); font-size: 13px; font-weight: 700; }

.rl-side {
  padding: 16px;
  background: color-mix(in srgb, var(--sp-surface-2) 54%, transparent);
}
.rl-side h3 { margin: 0 0 10px; font-size: 14px; }
.rl-side ul { margin: 0 0 14px; padding: 0; list-style: none; }
.rl-side li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid var(--sp-border);
  font-size: 13px;
}
.rl-side em { color: var(--sp-green); font-style: normal; font-size: 11px; font-weight: 800; }
.rl-side .sp-btn { width: 100%; }
.rl-side__note { margin: 10px 0 0; color: var(--sp-text-muted); font-size: 11px; line-height: 1.45; }

.rl-empty { padding: 70px 20px; text-align: center; }
.rl-empty span { display: block; font-size: 42px; }
.rl-empty strong { display: block; margin-top: 8px; }
.rl-empty p { color: var(--sp-text-muted); }

.rl-rules {
  width: min(720px, 100%);
  max-height: 92vh;
  overflow: auto;
  padding: 24px;
  box-sizing: border-box;
  border: 1px solid var(--sp-border);
  border-radius: 20px;
  color: var(--sp-text);
  background: var(--sp-surface);
}
.rl-rules__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0 14px; }
.rl-rules__grid article { padding: 14px; border-radius: 12px; background: var(--sp-surface-2); }
.rl-rules__grid p,
.rl-rules__note { color: var(--sp-text-muted); font-size: 12px; line-height: 1.5; }
.rl-rules__note {
  padding: 12px 14px;
  border-left: 3px solid #1fa85a;
  background: var(--sp-green-soft);
}
.rl-rules > .sp-btn { width: 100%; }

.sp-quicktoys__btn--redlight {
  color: #b42318 !important;
  background: rgba(226, 61, 61, 0.16) !important;
}
.sp-quicktoys__btn--redlight.is-active {
  border-color: #1fa85a;
  background: rgba(31, 168, 90, 0.18) !important;
}

@keyframes rl-hop {
  to { transform: translateY(-5px); }
}

@media (max-width: 760px) {
  .rl-layout,
  .rl-rules__grid { grid-template-columns: 1fr; }
  .rl-arena { border-right: 0; border-bottom: 1px solid var(--sp-border); }
}

@media (prefers-reduced-motion: reduce) {
  .rl-pawn.is-running .sp-avatar,
  .rl-doll { animation: none; transition: none; }
}
/* ══════════════════════════════════════════════════════════════════
   Lê Đồ (Mang PCs đi Lê Đồ) — giao diện đỏ/vàng may mắn, dùng chung token sp-*
   ══════════════════════════════════════════════════════════════════ */

.lot-rail {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── CTA ở cột phải Home — luxury gold, hút mắt hơn Cho-Han ───────── */
.lot-cta {
  --lot-gold: #f3d27a;
  --lot-gold-bright: #fff4c8;
  --lot-wine: #5a0c14;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 15px 16px;
  border: none;
  border-radius: var(--sp-radius-lg);
  cursor: pointer;
  overflow: hidden;
  color: #fff6dc;
  background: transparent;
  box-shadow:
    0 0 0 1px rgba(243, 210, 122, 0.55),
    0 8px 22px rgba(90, 12, 20, 0.45),
    0 0 26px rgba(212, 175, 55, 0.28);
  animation: lot-cta-breathe 3.4s ease-in-out infinite;
  transition: transform 0.16s ease, box-shadow 0.2s ease;
  text-align: left;
}

.lot-cta:hover {
  transform: translateY(-3px);
  box-shadow:
    0 0 0 1px rgba(255, 244, 200, 0.85),
    0 14px 32px rgba(90, 12, 20, 0.5),
    0 0 36px rgba(243, 210, 122, 0.45);
}

.lot-cta:active {
  transform: translateY(-1px);
}

.lot-cta__rim,
.lot-cta__fill,
.lot-cta__glow,
.lot-cta__shine,
.lot-cta__coins {
  pointer-events: none;
}

.lot-cta__rim {
  position: absolute;
  inset: -55%;
  background: conic-gradient(
    from 0deg,
    #7a5a14 0%,
    #ffe9a8 18%,
    #c9a227 36%,
    #fff6d0 54%,
    #8a6a1c 72%,
    #f3d27a 86%,
    #7a5a14 100%
  );
  animation: lot-cta-spin 5.5s linear infinite;
  z-index: 0;
}

.lot-cta__fill {
  position: absolute;
  inset: 1.5px;
  border-radius: calc(var(--sp-radius-lg) - 1px);
  background:
    linear-gradient(160deg, #7a1420 0%, #c41f28 42%, #4a0c12 100%);
  z-index: 0;
}

.lot-cta__glow {
  position: absolute;
  inset: 1.5px;
  border-radius: calc(var(--sp-radius-lg) - 1px);
  background:
    radial-gradient(130px 70px at 88% -8%, rgba(255, 228, 150, 0.62), transparent 68%),
    radial-gradient(100px 56px at 8% 118%, rgba(255, 196, 80, 0.32), transparent 70%);
  z-index: 0;
}

.lot-cta__shine {
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: -40%;
  width: 42%;
  background: linear-gradient(
    110deg,
    transparent 0%,
    rgba(255, 244, 200, 0.06) 36%,
    rgba(255, 255, 255, 0.46) 50%,
    rgba(243, 210, 122, 0.2) 62%,
    transparent 100%
  );
  transform: translateX(-30%) rotate(12deg);
  animation: lot-cta-shine 4.4s ease-in-out infinite;
  z-index: 1;
}

.lot-cta__coins {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.lot-cta__coin {
  position: absolute;
  font-size: 13px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
  animation: lot-cta-float 3.8s ease-in-out infinite;
}

.lot-cta__coin--1 {
  top: 5px;
  right: 26%;
}

.lot-cta__coin--2 {
  bottom: 6px;
  left: 20%;
  animation-delay: -1.4s;
  font-size: 12px;
}

.lot-cta__spark {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lot-gold-bright);
  box-shadow: 0 0 8px 2px rgba(255, 228, 150, 0.85);
  animation: lot-cta-twinkle 2.2s ease-in-out infinite;
}

.lot-cta__spark--1 {
  top: 10px;
  left: 48%;
}

.lot-cta__spark--2 {
  bottom: 12px;
  right: 22%;
  animation-delay: -0.7s;
  width: 3px;
  height: 3px;
}

.lot-cta__spark--3 {
  top: 18px;
  left: 14%;
  animation-delay: -1.5s;
  width: 4px;
  height: 4px;
}

.lot-cta__icon {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  font-size: 26px;
  line-height: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff4c8, #e0b84a 55%, #9a6f14);
  box-shadow:
    0 0 0 1px rgba(255, 236, 180, 0.7),
    0 2px 6px rgba(0, 0, 0, 0.28),
    0 0 12px rgba(243, 210, 122, 0.45);
  filter: none;
}

.lot-cta__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
  z-index: 2;
}

.lot-cta__title {
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: #f3d27a;
  background: linear-gradient(
    100deg,
    #c9a227 0%,
    #fff6d0 28%,
    #f3d27a 52%,
    #fff8e0 74%,
    #d4af37 100%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: lot-cta-foil 3.2s linear infinite;
  filter: drop-shadow(0 1px 0 rgba(60, 10, 12, 0.45));
}

.lot-cta__sub {
  font-size: 12px;
  color: rgba(255, 244, 214, 0.88);
}

.lot-cta__badge {
  z-index: 2;
  padding: 4px 10px;
  border-radius: var(--sp-radius-pill);
  background: linear-gradient(180deg, #fff6d0 0%, #f0c85a 100%);
  color: #6a120e;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset, 0 2px 6px rgba(80, 20, 10, 0.25);
}

@keyframes lot-cta-breathe {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(243, 210, 122, 0.45),
      0 8px 22px rgba(90, 12, 20, 0.42),
      0 0 20px rgba(212, 175, 55, 0.22);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255, 244, 200, 0.8),
      0 10px 26px rgba(90, 12, 20, 0.5),
      0 0 34px rgba(243, 210, 122, 0.42);
  }
}

@keyframes lot-cta-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes lot-cta-shine {
  0%,
  28% {
    transform: translateX(-40%) rotate(12deg);
  }
  52%,
  100% {
    transform: translateX(280%) rotate(12deg);
  }
}

@keyframes lot-cta-foil {
  to {
    background-position: 220% 0;
  }
}

@keyframes lot-cta-float {
  0%,
  100% {
    transform: translateY(0) rotate(-10deg);
    opacity: 0.4;
  }
  50% {
    transform: translateY(-7px) rotate(12deg);
    opacity: 0.95;
  }
}

@keyframes lot-cta-twinkle {
  0%,
  100% {
    opacity: 0.15;
    transform: scale(0.6);
  }
  45% {
    opacity: 1;
    transform: scale(1.15);
  }
}

/* ── Dải kết quả mini dưới CTA ────────────────────────────────────── */
.lot-mini {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px 10px;
  border-radius: var(--sp-radius);
  background: var(--sp-surface-2);
  border: 1px solid var(--sp-border);
}

.lot-mini__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--sp-text-muted);
}

.lot-mini__db {
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #d81f21;
  background: rgba(216, 31, 33, 0.1);
  padding: 2px 8px;
  border-radius: 6px;
}

.lot-mini__chip {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--sp-text-muted);
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  padding: 1px 6px;
  border-radius: 5px;
}

/* ── Overlay + modal ──────────────────────────────────────────────── */
.lot-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(3px);
  animation: lot-fade 0.15s ease;
}

.lot-overlay--rules {
  z-index: 1300;
}

@keyframes lot-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.lot-modal {
  width: min(920px, 100%);
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-lg);
  box-shadow: var(--sp-shadow-lg);
  animation: lot-pop 0.18s ease;
}

@keyframes lot-pop {
  from { transform: scale(0.96); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.lot-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  color: #fff5e0;
  background: linear-gradient(135deg, #b3140f, #d81f21);
}

.lot-modal__title {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lot-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lot-status {
  padding: 4px 10px;
  border-radius: var(--sp-radius-pill);
  background: rgba(255, 236, 179, 0.95);
  color: #7a0c08;
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lot-help,
.lot-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.15s ease;
}

.lot-help:hover,
.lot-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.lot-board-btn {
  position: relative;
  font-size: 15px;
}

.lot-board-btn.is-active {
  background: rgba(255, 236, 179, 0.95);
  color: #7a0c08;
  border-color: #ffe9a0;
}

.lot-board-btn__count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #ffe9a0;
  color: #7a0c08;
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
}

.lot-board {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 420px;
  max-height: 70vh;
  overflow: auto;
  padding: 16px 18px 20px;
}

.lot-board__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.lot-board__title {
  margin: 0;
  font-size: 16px;
  font-weight: 900;
}

.lot-board__meta {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--sp-text-muted);
}

.lot-empty--board {
  flex: 1;
  display: grid;
  place-items: center;
}

.lot-betlist--board .lot-betitem {
  font-size: 13px;
  padding: 9px 11px;
}

/* ── Thân modal 2 cột ─────────────────────────────────────────────── */
.lot-body {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0;
  overflow: hidden;
  min-height: 0;
}

.lot-play {
  padding: 16px 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lot-side {
  position: relative;
  border-left: 1px solid var(--sp-border);
  background: var(--sp-surface-2);
}

.lot-side__inner {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Tabs loại cược ───────────────────────────────────────────────── */
.lot-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.lot-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  border: 1.5px solid var(--sp-border);
  border-radius: var(--sp-radius);
  background: var(--sp-surface);
  color: var(--sp-text);
  cursor: pointer;
  transition: all 0.14s ease;
}

.lot-tab:hover {
  border-color: #d81f21;
}

.lot-tab.is-active {
  border-color: #d81f21;
  background: rgba(216, 31, 33, 0.1);
  box-shadow: inset 0 0 0 1px #d81f21;
}

.lot-tab__label {
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.lot-tab__mult {
  font-size: 11px;
  font-weight: 800;
  color: #d81f21;
}

/* ── Thanh hiển thị con đã chọn ───────────────────────────────────── */
.lot-pickbar {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lot-pickbar__hint {
  font-size: 12px;
  color: var(--sp-text-muted);
  font-weight: 600;
}

.lot-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 34px;
  align-items: center;
}

.lot-picks__empty {
  font-size: 13px;
  color: var(--sp-text-faint);
}

.lot-pick {
  padding: 5px 10px;
  border-radius: var(--sp-radius-pill);
  border: none;
  background: linear-gradient(135deg, #f4b823, #e79b0c);
  color: #4d3400;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}

/* ── Nhập tay ─────────────────────────────────────────────────────── */
.lot-input-row {
  display: flex;
  gap: 8px;
}

.lot-input {
  flex: 1;
  padding: 9px 12px;
  border-radius: var(--sp-radius);
  border: 1.5px solid var(--sp-border);
  background: var(--sp-surface);
  color: var(--sp-text);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
}

.lot-input:focus {
  outline: none;
  border-color: #d81f21;
}

/* ── Lưới chọn số nhanh ───────────────────────────────────────────── */
.lot-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
  max-height: 190px;
  overflow-y: auto;
  padding: 8px;
  border-radius: var(--sp-radius);
  background: var(--sp-surface-2);
  border: 1px solid var(--sp-border);
}

.lot-grid__cell {
  padding: 6px 0;
  border: 1px solid var(--sp-border);
  border-radius: 6px;
  background: var(--sp-surface);
  color: var(--sp-text);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: all 0.1s ease;
}

.lot-grid__cell:hover {
  border-color: #d81f21;
  color: #d81f21;
}

.lot-grid__cell.is-selected {
  background: #d81f21;
  border-color: #d81f21;
  color: #fff;
  font-weight: 800;
}

/* ── Mức cược + ước tính ──────────────────────────────────────────── */
.lot-betbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--sp-radius);
  background: var(--sp-surface-2);
  border: 1px solid var(--sp-border);
}

.lot-stake {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lot-stake__btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--sp-border-strong);
  background: var(--sp-surface);
  color: var(--sp-text);
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
}

.lot-stake__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.lot-stake__value {
  min-width: 64px;
  text-align: center;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.lot-estimate {
  font-size: 13px;
  color: var(--sp-text-muted);
}

.lot-estimate strong {
  color: var(--sp-green);
  font-size: 15px;
}

.lot-place {
  width: 100%;
}

.lot-note {
  padding: 10px 12px;
  border-radius: var(--sp-radius);
  background: rgba(245, 155, 35, 0.12);
  color: #b5710a;
  font-size: 13px;
  text-align: center;
  font-weight: 600;
}

.lot-balance {
  text-align: center;
  font-size: 13px;
  color: var(--sp-text-muted);
}

/* ── Cột phải: card ───────────────────────────────────────────────── */
.lot-card {
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  padding: 12px;
}

.lot-card__title {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 800;
}

.lot-card__meta {
  margin: -4px 0 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--sp-text-muted);
}

.lot-empty {
  font-size: 13px;
  color: var(--sp-text-faint);
  text-align: center;
  padding: 12px 0;
}

/* ── Danh sách vé ─────────────────────────────────────────────────── */
.lot-betlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lot-betitem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto auto;
  gap: 6px;
  align-items: center;
  padding: 7px 9px;
  border-radius: 7px;
  background: var(--sp-surface-2);
  font-size: 12px;
}

.lot-betitem.is-won {
  background: var(--sp-green-soft);
}

.lot-betitem.is-lost {
  opacity: 0.55;
}

.lot-betitem.is-mine {
  box-shadow: inset 0 0 0 1.5px #d81f21;
}

.lot-betitem__who {
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lot-betitem__type {
  font-weight: 700;
  color: var(--sp-text-muted);
}

.lot-betitem__nums {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #d81f21;
}

.lot-betitem__amt {
  font-variant-numeric: tabular-nums;
  color: var(--sp-text-muted);
}

.lot-betitem__state {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--sp-green);
  white-space: nowrap;
}

.lot-history {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lot-history__day {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lot-history__label {
  font-size: 12px;
  font-weight: 800;
  color: var(--sp-text-muted);
}

/* ── Danh sách kết quả ────────────────────────────────────────────── */
.lot-results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lot-resitem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 7px;
  background: var(--sp-surface-2);
}

.lot-resitem__date {
  font-size: 12px;
  font-weight: 700;
  color: var(--sp-text-muted);
  min-width: 44px;
}

.lot-resitem__db {
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: linear-gradient(135deg, #d81f21, #b3140f);
  padding: 2px 9px;
  border-radius: 6px;
}

.lot-resitem__seven {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.lot-resitem__chip {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--sp-text-muted);
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  padding: 1px 6px;
  border-radius: 5px;
}

/* ── Modal luật ───────────────────────────────────────────────────── */
.lot-rules {
  width: min(560px, 100%);
  overflow-y: auto;
  padding-bottom: 18px;
}

.lot-rules .lot-modal__head {
  position: sticky;
  top: 0;
  z-index: 1;
}

.lot-rules__slogan {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 14px 18px 0;
  padding: 12px 14px;
  border-radius: var(--sp-radius);
  border-left: 4px solid var(--sp-green);
  background: linear-gradient(100deg, rgba(29, 185, 84, 0.12), rgba(244, 184, 35, 0.1));
  font-size: 13.5px;
  font-style: italic;
  line-height: 1.55;
  color: var(--sp-text);
}

.lot-rules__slogan span[aria-hidden] {
  font-size: 20px;
  font-style: normal;
  line-height: 1.2;
}

.lot-rules__lead {
  padding: 12px 18px 0;
  margin: 0;
  font-size: 14px;
  color: var(--sp-text);
}

.lot-rules__block {
  padding: 12px 18px 0;
}

.lot-rules__block h3 {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 800;
}

.lot-rules__block ul {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  color: var(--sp-text-muted);
  line-height: 1.6;
}

.lot-rules__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.lot-rules__table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--sp-border);
}

.lot-rules__table td:last-child {
  text-align: right;
  font-weight: 800;
  color: #d81f21;
  white-space: nowrap;
}

.lot-rules__note {
  margin: 10px 18px 0;
  padding: 10px 12px;
  border-radius: var(--sp-radius);
  background: rgba(245, 155, 35, 0.12);
  color: #b5710a;
  font-size: 12.5px;
  line-height: 1.5;
}

.lot-rules .sp-btn {
  margin-left: 18px;
  margin-right: 18px;
  width: calc(100% - 36px) !important;
}

/* ── Responsive nhẹ (desktop-first) ───────────────────────────────── */
@media (max-width: 720px) {
  .lot-body {
    grid-template-columns: 1fr;
  }
  .lot-side {
    border-left: none;
    border-top: 1px solid var(--sp-border);
    max-height: 40vh;
  }
  .lot-side__inner {
    position: static;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lot-overlay,
  .lot-modal,
  .lot-cta,
  .lot-cta__rim,
  .lot-cta__shine,
  .lot-cta__coin,
  .lot-cta__spark,
  .lot-cta__title {
    animation: none;
  }

  .lot-cta__title {
    color: #fff4c8;
    background: none;
    -webkit-text-fill-color: #fff4c8;
  }
}
.thirteen-page { min-height: 100vh; background: var(--sp-bg); color: var(--sp-text); padding: 24px; }
.thirteen-page main { max-width: 1200px; margin: 32px auto; }
.thirteen-status, .thirteen-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.stake-slider { --st-thumb-w: 28px; --st-h: 40px; display: grid; flex: 1 1 100%; gap: 10px; min-width: 0; width: 100%; }
.stake-slider__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.stake-slider__label { color: var(--sp-text-muted); font-size: 13px; font-weight: 500; }
.stake-slider__value { color: var(--tone-ink); font-size: 28px; font-weight: 800; line-height: 1.15; letter-spacing: -0.03em; white-space: nowrap; font-variant-numeric: tabular-nums; transition: color 0.25s ease; }
.stake-slider__track { position: relative; height: var(--st-h); }
.stake-slider__track::before { content: ''; position: absolute; inset: 14px 0; border-radius: 999px; background: var(--sp-surface-active); }
.stake-slider__fill, .stake-slider__thumb { position: absolute; transition: width 0.2s ease, left 0.2s ease, background-color 0.25s ease, box-shadow 0.2s ease; }
.stake-slider__fill { inset: 14px auto 14px 0; width: calc(var(--st-thumb-w) / 2 + (100% - var(--st-thumb-w)) * var(--p)); overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--tone) 75%, transparent); }
.stake-slider__track[data-min] .stake-slider__fill { width: 0; }
.stake-slider__tick { position: absolute; top: 50%; left: calc(var(--st-thumb-w) / 2 + (100% - var(--st-thumb-w)) * var(--p)); width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: var(--sp-text-faint); transition: background-color 0.25s ease; }
.stake-slider__tick[data-on] { background: var(--tone); }
.stake-slider__tick[data-locked] { opacity: 0.35; }
.stake-slider__thumb { top: 6px; bottom: 6px; left: calc(var(--st-thumb-w) / 2 + (100% - var(--st-thumb-w)) * var(--p)); width: var(--st-thumb-w); margin-left: calc(var(--st-thumb-w) / -2); border-radius: 50%; background: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.12); }
/* Match the native thumb width to the visual thumb so pointer positions land on the ticks. */
.stake-slider__track input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; appearance: none; background: transparent; }
.stake-slider__track input::-webkit-slider-thumb { appearance: none; width: var(--st-thumb-w); height: var(--st-h); }
.stake-slider__track input::-moz-range-thumb { width: var(--st-thumb-w); height: var(--st-h); border: 0; }
.stake-slider__track:has(input:focus-visible) .stake-slider__thumb { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 0 3px var(--sp-surface), 0 0 0 6px var(--tone); }
.stake-slider__labels { position: relative; height: 28px; margin-top: -8px; }
.stake-slider__tick-label { position: absolute; top: 0; left: calc(var(--st-thumb-w) / 2 + (100% - var(--st-thumb-w)) * var(--p)); padding: 5px 6px; border: 0; border-radius: 6px; background: transparent; color: var(--sp-text-muted); font: inherit; font-size: 12px; font-weight: 600; line-height: 1.3; cursor: pointer; transform: translateX(-50%); transition: color 0.2s ease; }
.stake-slider__tick-label:hover:not(:disabled) { color: var(--sp-text); }
.stake-slider__tick-label[data-active] { color: var(--tone-ink); font-weight: 800; }
.stake-slider__tick-label[data-locked] { opacity: 0.4; }
.stake-slider__tick-label:disabled { cursor: not-allowed; }
.stake-slider__note { color: var(--sp-text-muted); font-size: 12px; line-height: 1.45; }
.stake-slider[data-disabled] { opacity: 0.5; }
.stake-slider[data-disabled] input { cursor: not-allowed; }
/* Only the highest stop shimmers; keep its base colour transition intact. */
.stake-slider__track[data-max] .stake-slider__fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.25) 50%, transparent 65%); transform: translateX(-100%); animation: stake-sweep 2.6s ease-in-out infinite; }
@keyframes stake-sweep { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .stake-slider__fill, .stake-slider__thumb, .stake-slider__tick, .stake-slider__value, .stake-slider__tick-label { transition: none; } .stake-slider__track[data-max] .stake-slider__fill::after { animation: none; display: none; } }
.thirteen-stake-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.thirteen-stake-row > span { color: var(--sp-text-muted); font-size: 13px; }
.th-game-end .thirteen-stake-row { margin: 0 0 16px; }
.th-game-end:has(.stake-slider) { box-sizing: border-box; width: 440px; }
.th-game-end:has(.stake-slider) .thirteen-ready-seats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.th-game-end:has(.stake-slider) .thirteen-ready-seats li { flex-wrap: wrap; gap: 4px 12px; }
.thirteen-surface { height: 520px; margin: 24px 0; border-radius: 16px; overflow: hidden; background: #94a3a6; }
.thirteen-surface--flat { height: 340px; padding: 32px; background: #31534e; color: white; display: flex; flex-direction: column; justify-content: space-around; }
.thirteen-opponents { display: flex; justify-content: space-between; gap: 12px; }
.thirteen-opponents > div { padding: 8px 12px; border-radius: 8px; background: #123329; color: white; }
.thirteen-opponents span { display: block; margin-top: 3px; }
.thirteen-page .is-turn { outline: 2px solid #48e487; outline-offset: 3px; }
.thirteen-hud { padding: 24px; margin-top: 16px; }
.thirteen-hud:empty { display: none; }
.thirteen-ranks { display: flex; flex-wrap: wrap; list-style: none; padding: 0; gap: 20px; font-size: 13px; }
.thirteen-ranks li { padding: 4px; border-radius: 4px; }
.thirteen-hand, .thirteen-trick { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 16px 0; }
.thirteen-card { background: #fffaf0; color: #17251e; border: 1px solid #a9b2ac; border-radius: 6px; min-width: 48px; padding: 16px 8px; font-size: 22px; font-weight: 700; box-shadow: 0 2px 3px #0002; }
button.thirteen-card { cursor: pointer; }
.thirteen-card.is-red { color: #b52a34; }
.thirteen-card.is-selected { transform: translateY(-8px); outline: 3px solid #1db954; }
.thirteen-card:focus-visible { outline: 3px solid #1db954; outline-offset: 4px; }
.thirteen-actions { justify-content: flex-start; }
.thirteen-actions span { color: var(--sp-text-muted); font-size: 13px; }
@media (max-width: 700px) { .thirteen-page { padding: 16px; } .thirteen-surface { height: 380px; } }
@media (prefers-reduced-motion: reduce) { .thirteen-card { transition: none; } }

.thirteen-enter { margin-top: 20px; }
.thirteen-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.th-overlay { position: fixed; inset: 0; z-index: 1200; background: #94a3a6; color: var(--sp-text); }
.th-game { position: relative; width: 100vw; height: 100dvh; overflow: hidden; outline: none; }
.th-game > .card-table-surface { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border-radius: 0; }

.th-game .thirteen-hud, .th-game-end { position: absolute; z-index: 50; bottom: max(16px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); margin: 0; padding: 12px 16px; border: 1px solid var(--sp-border); border-radius: var(--sp-radius-lg); background: color-mix(in srgb, var(--sp-surface) 90%, transparent); backdrop-filter: blur(12px); }
.th-game .thirteen-status { gap: 12px; font-size: 13px; margin-bottom: 8px; }
.th-game [role='timer'] { font-variant-numeric: tabular-nums; font-size: 18px; color: var(--turn-color, var(--pt-green)); }
.th-game .thirteen-actions { gap: 8px; }
.th-game .thirteen-actions span { max-width: 240px; font-size: 12px; }
.th-game-end p { margin: 3px 0; font-size: 13px; }
.th-game-end .thirteen-actions { margin-top: 10px; }
.th-game .thirteen-surface--flat { position: absolute; inset: 120px 16px 150px; height: auto; margin: 0; overflow: auto; }
@media (max-width: 700px) { .th-game .thirteen-actions span { display: none; } }

.thirteen-own-rank { display: inline-block; margin-left: 8px; padding: 3px 8px; border-radius: 10px; background: var(--sp-green); color: var(--sp-surface); animation: thirteen-own-rank 350ms ease-out; }
@keyframes thirteen-own-rank { from { transform: scale(0.5); } to { transform: scale(1); } }
.thirteen-own-label.has-passed { opacity: 0.6; }
.thirteen-own-pass { display: inline-block; margin-left: 8px; animation: thirteen-own-pass 800ms ease-out forwards; }
@keyframes thirteen-own-pass { 0% { opacity: 0; transform: scale(0.6); } 25%, 80% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .thirteen-own-rank, .thirteen-own-pass { animation: none; } }

.th-game [role='timer'].is-urgent { animation: thirteen-timer-pulse 700ms ease-in-out infinite alternate; }
@keyframes thirteen-timer-pulse { to { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .th-game [role='timer'].is-urgent { animation: none; } }


.th-game .thirteen-actions span { max-width: none; }
.thirteen-ready-seats { display: grid; grid-template-columns: repeat(2, minmax(160px, 1fr)); gap: 8px 20px; list-style: none; padding: 0; margin: 0 0 12px; }
.thirteen-ready-seats li { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.thirteen-ready-seats span { color: var(--sp-text-muted); }
.thirteen-results { list-style: none; padding: 0; margin: 0 0 16px; }
.thirteen-results li { display: flex; justify-content: space-between; gap: 40px; padding: 4px 0; font-size: 14px; }
.thirteen-hint { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 6px 12px; border-radius: 12px; background: var(--sp-surface); font-size: 12px; }
.thirteen-timer { width: 40px; height: 40px; border: 3px solid var(--turn-color, var(--pt-green)); color: var(--turn-color, var(--pt-green)); border-radius: 50%; display: inline-grid; place-items: center; font-size: 13px !important; }
.thirteen-last-play { position: absolute; bottom: calc(100% + 42px); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 5px; width: max-content; max-width: calc(100vw - 32px); padding: 7px 10px; border: 1px solid var(--sp-border); border-radius: 16px; background: color-mix(in srgb, var(--sp-surface) 94%, transparent); font-size: 12px; }
.thirteen-mini-card { display: inline-grid; place-items: center; min-width: 24px; height: 32px; padding: 0 3px; border: 1px solid var(--sp-border); border-radius: 4px; color: var(--sp-text); background: var(--sp-surface-2); font-weight: 700; }
.thirteen-mini-card.is-red, .thirteen-bomb-badge { color: var(--sp-red); }
.thirteen-bomb-badge { padding: 3px 6px; border-radius: 8px; background: var(--sp-surface-2); }
.thirteen-pass-notice { margin-left: 5px; color: var(--sp-text-muted); }

.th-game-corner-controls { position: absolute; z-index: 50; top: 16px; right: 16px; display: flex; gap: 8px; }
.th-game-corner-controls .th-icon { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid var(--sp-border); color: var(--sp-text); background: color-mix(in srgb, var(--sp-surface) 78%, transparent); backdrop-filter: blur(8px); }
.th-game-corner-controls .th-icon:disabled { opacity: 0.5; cursor: not-allowed; }

/* Turn cues share the server-synchronised colour scale. */
.th-game .thirteen-hud { box-sizing: border-box; max-width: calc(100% - 32px); }
.thirteen-hud.is-my-turn { border-color: color-mix(in srgb, var(--turn-color) 30%, transparent); box-shadow: 0 0 24px color-mix(in srgb, var(--turn-color) 18%, transparent); }
/* Cover the border box (the panel has a 1px border) so the countdown stroke sits exactly on the outer edge. */
.thirteen-turn-border { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); overflow: visible; pointer-events: none; }
.thirteen-turn-border rect { x: 1.5px; y: 1.5px; width: calc(100% - 3px); height: calc(100% - 3px); rx: calc(var(--sp-radius-lg) - 1.5px); ry: calc(var(--sp-radius-lg) - 1.5px); fill: none; stroke: var(--turn-color); stroke-width: 3; transition: stroke-dashoffset 250ms linear, stroke 250ms linear; }
.thirteen-turn-label { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px; font-size: 13px; font-weight: 800; color: var(--turn-color); }
.thirteen-hud .thirteen-hud-coins { padding: 3px 8px; font-size: 12px; color: #2b1d00; }
.thirteen-hud .thirteen-hud-coins .sp-coin__img { width: 16px; height: 16px; }
.thirteen-corner-coins { align-self: center; }
.thirteen-turn-banner { position: absolute; bottom: calc(100% + 64px); left: 50%; transform: translateX(-50%); padding: 8px 16px; border-radius: 999px; background: var(--pt-green); color: #fff; font-size: 15px; font-weight: 800; white-space: nowrap; }
.thirteen-hud.is-urgent .thirteen-turn-border { animation: thirteen-timer-pulse 700ms ease-in-out infinite alternate; }
@media (max-width: 700px) {
  .th-game .thirteen-hud { width: calc(100% - 32px); padding: 12px; }
  .th-game .thirteen-turn-label { gap: 8px; }
  .th-game .thirteen-actions .thirteen-own-label { display: none; }
  .th-game .thirteen-actions .thirteen-timer { display: inline-grid; }
  .th-game .thirteen-hud .thirteen-actions button span { display: inline; }
}
@media (prefers-reduced-motion: reduce) { .thirteen-hud.is-urgent .thirteen-turn-border { animation: none; } .thirteen-turn-border rect { transition: none; } }

/* Dải màu báo lượt phủ đáy màn hình, giữ thao tác bài và HUD phía trên. */
.thirteen-turn-bottom { position: fixed; inset: auto 0 0; height: clamp(120px, 22vh, 240px); z-index: 25; pointer-events: none; background: linear-gradient(to top, color-mix(in srgb, var(--turn-color) 42%, transparent), color-mix(in srgb, var(--turn-color) 15%, transparent) 45%, transparent); }
/* Sảnh game bài (/card-games) và sảnh Tiến Lên (/card-games/thirteen).
   Cùng ngôn ngữ với các thẻ Ma Sói / Cờ thú / Game bài ở sidebar Home: poster bo tròn, dòng eyebrow, tiêu đề in hoa,
   pill trạng thái, gradient mềm + quầng sáng. Màu chủ đạo là bốn màu Politetech (--pt-* ở spotify.css).
   Poster (.cgl-poster) giữ nguyên ở cả hai theme như các thẻ sidebar; phần còn lại theo --sp-* nên tự đổi sáng/tối. */

/* Mỗi thẻ chọn một trong bốn màu bằng class cgl-tone--*; các biến --tone-* là thứ mọi thành phần bên dưới đọc. */
.cgl-tone--blue { --tone: var(--pt-blue); --tone-deep: var(--pt-blue-deep); --tone-soft: var(--pt-blue-soft); --tone-ink: var(--pt-blue-ink); --tone-fill: var(--pt-blue-deep); --on-tone: #fff; }
.cgl-tone--green { --tone: var(--pt-green); --tone-deep: var(--pt-green-deep); --tone-soft: var(--pt-green-soft); --tone-ink: var(--pt-green-ink); --tone-fill: var(--pt-green-deep); --on-tone: #fff; }
.cgl-tone--red { --tone: var(--pt-red); --tone-deep: var(--pt-red-deep); --tone-soft: var(--pt-red-soft); --tone-ink: var(--pt-red-ink); --tone-fill: var(--pt-red-deep); --on-tone: #fff; }
.cgl-tone--yellow { --tone: var(--pt-yellow); --tone-deep: #c98f00; --tone-soft: var(--pt-yellow-soft); --tone-ink: var(--pt-yellow-ink); --tone-fill: var(--pt-yellow); --on-tone: #2b1d00; }

.cgl-page {
  background:
    radial-gradient(ellipse 55% 38% at 6% -4%, color-mix(in srgb, var(--pt-blue) 18%, transparent), transparent 72%),
    radial-gradient(ellipse 45% 36% at 100% 0%, color-mix(in srgb, var(--pt-yellow) 14%, transparent), transparent 72%),
    var(--sp-bg);
}
.cgl-page { box-sizing: border-box; }
.cgl-page main { max-width: 1200px; margin: 26px auto 40px; }
.cgl-page a.sp-btn, .cgl-page a.sp-btn:hover { text-decoration: none; }
.cgl-page :focus-visible, .cgl-page .ant-btn:focus-visible, .cgl-page .sp-btn:focus-visible { outline: 3px solid var(--pt-blue); outline-offset: 2px; }
.cgl-poster :focus-visible, .cgl-poster .ant-btn:focus-visible, .cgl-poster .sp-btn:focus-visible { outline-color: #fff; }

/* ── Header: nút quay lại · eyebrow + tiêu đề + phụ đề · hành động ───────────────────────── */
.cgl-header {
  display: grid;
  grid-template-areas: 'back title actions';
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 20px;
  max-width: 1200px;
  margin: 0 auto;
}
.cgl-back { grid-area: back; border: 1px solid var(--sp-border-strong); background: var(--sp-surface); color: var(--sp-text); }
.cgl-back:hover { border-color: var(--sp-text-muted); background: var(--sp-surface-hover); color: var(--sp-text); }
.cgl-title { grid-area: title; min-width: 0; }
.cgl-header__actions { grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; }
.cgl-eyebrow { display: inline-flex; align-items: center; color: var(--sp-text-muted); font-size: 10px; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; }
/* Bốn chấm Politetech: một phần tử + bốn box-shadow */
.cgl-dots { display: inline-block; flex: none; width: 6px; height: 6px; margin-right: 30px; border-radius: 50%; background: var(--pt-blue); box-shadow: 9px 0 0 var(--pt-green), 18px 0 0 var(--pt-yellow), 27px 0 0 var(--pt-red); }
.cgl-title h1 { margin: 8px 0 0; font-size: clamp(26px, 4.4vw, 40px); font-weight: 950; line-height: 1.2; letter-spacing: 0.03em; text-transform: uppercase; }
.cgl-title p { margin: 5px 0 0; color: var(--sp-text-muted); font-size: 13px; }

/* ── Pill trạng thái (giống pill trên banner) ─────────────────────────────────────────── */
.cgl-pill { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 3px 10px 3px 8px; border: 0; border-radius: 999px; font: inherit; font-size: 11px; font-weight: 800; white-space: nowrap; }
.cgl-pill i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cgl-poster .cgl-pill { background: rgba(6, 10, 30, 0.5); color: #fff; backdrop-filter: blur(4px); }
.cgl-poster .cgl-pill i { background: var(--pt-yellow); box-shadow: 0 0 0 3px rgba(245, 193, 61, 0.3); }
.cgl-poster .cgl-eyebrow { color: rgba(255, 255, 255, 0.86); }

/* ── Poster dùng chung ────────────────────────────────────────────────────────────────── */
.cgl-poster {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 18px;
  color: #fff;
  background:
    radial-gradient(ellipse 70% 100% at 92% 0%, rgba(255, 255, 255, 0.3), transparent 60%),
    linear-gradient(135deg, var(--tone-deep) 0%, var(--tone) 100%);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--tone) 38%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* Nút gọi hành động; trên poster là nút trắng chữ màu poster. Không gạch chân dù là thẻ <a>. */
.cgl-cta { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 20px; border: 0; border-radius: 999px; background: var(--tone-fill); color: var(--on-tone); font-size: 14px; font-weight: 800; line-height: 1.3; text-decoration: none; cursor: pointer; box-shadow: 0 6px 16px color-mix(in srgb, var(--tone) 35%, transparent); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.cgl-cta:hover:not(:disabled) { transform: translateY(-2px); color: var(--on-tone); text-decoration: none; }
.cgl-cta:disabled { cursor: not-allowed; opacity: 0.5; box-shadow: none; }
.cgl-poster .cgl-cta { background: #fff; color: var(--tone-deep); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22); }
.cgl-poster .cgl-cta:hover:not(:disabled) { color: var(--tone-deep); }

/* ── Lá bài xoè quạt: hình minh hoạ cho poster (kích thước theo em để thu nhỏ bằng font-size) ── */
.cgl-fan { position: absolute; z-index: -1; right: 4.4em; bottom: 1.2em; width: calc(var(--n) * 1.9em + 2.6em); height: 7em; font-size: 16px; pointer-events: none; animation: cgl-bob 2.8s ease-in-out infinite; }
.cgl-fan__card { position: absolute; bottom: 0; left: calc(var(--i) * 1.9em); display: flex; flex-direction: column; align-items: center; width: 4.4em; height: 6.2em; padding: 0.2em 0 0; border-radius: 0.5em; background: #fff; color: #1c1f21; box-shadow: 0 0.2em 0.6em rgba(0, 0, 0, 0.35); transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * 13deg)); transform-origin: 50% 130%; }
.cgl-fan__card.is-red { color: #d6283c; }
.cgl-fan__card b { align-self: flex-start; padding-left: 0.35em; font-size: 0.85em; line-height: 1.1; }
.cgl-fan__card i { margin-top: 0.3em; font-size: 2.1em; font-style: normal; line-height: 1; }
@keyframes cgl-bob { 50% { transform: translateY(-0.25em); } }

/* ── Hub: tile hero + tile "sắp ra mắt" ───────────────────────────────────────────────── */
.cgl-hub { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.cgl-tile--hero { display: flex; grid-column: 1 / -1; align-items: center; min-height: 220px; padding: 28px 32px; }
.cgl-tile__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: min(560px, 62%); }
.cgl-tile--hero h2 { margin: 8px 0 0; font-size: clamp(28px, 4.6vw, 46px); font-weight: 950; line-height: 1.12; letter-spacing: 0.03em; text-transform: uppercase; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.28); }
.cgl-tile--hero p { margin: 0; color: rgba(255, 255, 255, 0.9); font-size: 14px; font-style: italic; line-height: 1.45; }
.cgl-tile__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 14px; }

.cgl-tile--soon { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 140px; padding: 18px; border: 1.5px dashed color-mix(in srgb, var(--tone) 55%, transparent); border-radius: 16px; background: linear-gradient(160deg, var(--tone-soft), transparent 90%), var(--sp-surface); filter: saturate(0.75); }
.cgl-tile--soon::before { content: '♠'; content: '♠' / ''; position: absolute; right: 8px; bottom: -20px; color: var(--tone); font-size: 96px; line-height: 1; opacity: 0.16; pointer-events: none; }
.cgl-tile--soon.cgl-tone--green::before { content: '♣'; content: '♣' / ''; }
.cgl-tile--soon.cgl-tone--red::before { content: '♥'; content: '♥' / ''; }
.cgl-tile--soon.cgl-tone--yellow::before { content: '♦'; content: '♦' / ''; }
.cgl-tile--soon h2 { position: relative; margin: 0; font-size: 18px; font-weight: 900; letter-spacing: 0.04em; line-height: 1.2; text-transform: uppercase; }
.cgl-tile--soon .cgl-pill { position: relative; align-self: flex-start; border: 1px solid color-mix(in srgb, var(--tone) 45%, transparent); background: var(--tone-soft); color: var(--tone-ink); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; cursor: default; }

/* ── Sảnh Tiến Lên: poster "Vào bàn" ──────────────────────────────────────────────────── */
.cgl-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 22px; padding: 26px 30px; }
.cgl-hero .cgl-fan { right: 2.2em; bottom: auto; top: 1.4em; font-size: 13px; }
.cgl-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; max-width: min(560px, 64%); }
.cgl-hero__title { padding-top: 6px; font-size: clamp(24px, 3.6vw, 34px); font-weight: 950; line-height: 1.2; letter-spacing: 0.03em; text-transform: uppercase; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.28); }
.cgl-hero__sub { color: rgba(255, 255, 255, 0.9); font-size: 13px; font-style: italic; }
.cgl-hero .cgl-pill { margin-top: 8px; }
.cgl-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.cgl-hero__actions form { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.cgl-hero .sp-btn { height: auto; padding: 10px 22px; border: 1px solid transparent; font-size: 14px; font-weight: 800; box-shadow: none; transition: transform 0.15s ease, background 0.15s ease; }
.cgl-hero .sp-btn:hover:not(:disabled) { transform: translateY(-2px); }
.cgl-hero .sp-btn--primary, .cgl-hero .sp-btn--primary:hover:not(:disabled) { background: var(--pt-yellow); color: #2b1d00; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.24); }
.cgl-hero .sp-btn:not(.sp-btn--primary), .cgl-hero .sp-btn:not(.sp-btn--primary):hover:not(:disabled) { border-color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.16); color: #fff; }
.cgl-hero .sp-btn:disabled { opacity: 0.5; }
.cgl-hero .ant-input { width: 150px; height: auto; padding: 9px 16px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.95); color: #14213d; font-weight: 800; letter-spacing: 0.2em; text-align: center; text-transform: uppercase; box-shadow: none; }
.cgl-hero .ant-input::placeholder { color: #6b7488; font-weight: 600; letter-spacing: 0.02em; text-transform: none; }

.cgl-resume { position: sticky; top: 12px; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin-top: 22px; padding: 12px 18px; border-radius: 16px; font-size: 14px; font-weight: 700; }
.cgl-resume + .cgl-hero { margin-top: 16px; }
.cgl-resume .sp-btn { height: auto; padding: 8px 18px; }

.cgl-note { margin: 22px 0; padding: 12px 16px 12px 18px; border-left: 4px solid var(--pt-yellow); border-radius: 4px 14px 14px 4px; background: var(--pt-yellow-soft); color: var(--sp-text); font-size: 13px; line-height: 1.55; }

/* ── Thẻ bàn: mini card, màu nhấn theo trạng thái ─────────────────────────────────────── */
.cgl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.cgl-table { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; padding: 20px 18px 16px; border: 1px solid var(--sp-border); border-radius: 16px; background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--tone) 22%, transparent), transparent 55%), var(--sp-surface); box-shadow: var(--sp-shadow); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.cgl-table::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, var(--tone-deep), var(--tone)); }
.cgl-table:hover { transform: translateY(-3px); box-shadow: 0 14px 30px color-mix(in srgb, var(--tone) 28%, transparent); }
.cgl-table__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cgl-table h2 { margin: 0 auto 0 0; font-size: 20px; font-weight: 950; letter-spacing: 0.05em; line-height: 1.2; text-transform: uppercase; }
.cgl-pill--status { background: var(--tone-soft); color: var(--tone-ink); }
.cgl-pill--status i { background: var(--tone); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 28%, transparent); }
.cgl-pill--stake { border: 1px solid var(--sp-border-strong); background: var(--sp-surface-2); color: var(--sp-text); }
.cgl-seats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; margin: 0; padding: 0; list-style: none; }
.cgl-seats li { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; }
.cgl-seats li > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Bốn ghế = bốn màu Politetech */
.cgl-seat { display: inline-grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 800; box-shadow: 0 0 0 2px var(--sp-surface); }
.cgl-seat--0 { background: var(--pt-blue-deep); }
.cgl-seat--1 { background: var(--pt-green-deep); }
.cgl-seat--2 { background: var(--pt-yellow); color: #2b1d00; }
.cgl-seat--3 { background: var(--pt-red-deep); }
.cgl-seat--empty { border: 1.5px dashed var(--sp-border-strong); background: transparent; box-shadow: none; color: var(--sp-text-faint); }
.cgl-table .cgl-cta { width: 100%; margin-top: auto; height: auto; }
/* Bàn không vào được (đang chơi / đầy): vẫn đọc rõ, chỉ nhạt hơn nút bấm được */
.cgl-table .cgl-cta:disabled { border: 1px solid color-mix(in srgb, var(--tone) 40%, transparent); background: var(--tone-soft); color: var(--tone-ink); opacity: 1; }

.cgl-empty { display: grid; justify-items: center; gap: 6px; margin: 8px 0 0; padding: 30px 20px; border: 2px dashed var(--sp-border-strong); border-radius: 18px; color: var(--sp-text-muted); font-weight: 700; text-align: center; }
.cgl-empty::before { content: '♠ ♥ ♦ ♣'; content: '♠ ♥ ♦ ♣' / ''; background: linear-gradient(90deg, var(--pt-blue), var(--pt-green) 35%, var(--pt-yellow) 65%, var(--pt-red)); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 30px; letter-spacing: 0.3em; }

/* ── Modal tạo bàn: dải bốn màu trên cùng, tiêu đề in hoa ─────────────────────────────── */
.cgl-modal .ant-modal-content { position: relative; overflow: hidden; padding: 28px 24px 20px; border-radius: 20px; }
.cgl-modal .ant-modal-content::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, var(--pt-blue) 0 25%, var(--pt-green) 25% 50%, var(--pt-yellow) 50% 75%, var(--pt-red) 75%); }
.cgl-modal .ant-modal-title { font-size: 20px; font-weight: 950; letter-spacing: 0.05em; text-transform: uppercase; }
.cgl-modal .ant-modal-footer .sp-btn--primary { height: auto; padding: 10px 24px; background: var(--pt-yellow); color: #2b1d00; font-weight: 800; }

/* ── Điện thoại ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) { .cgl-hub { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

@media (max-width: 700px) {
  .cgl-hub { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cgl-header { grid-template-areas: 'actions' 'back' 'title'; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .cgl-back { justify-self: start; }
  .cgl-tile--hero { min-height: 0; padding: 22px 20px 20px; }
  .cgl-tile__copy, .cgl-hero__copy { max-width: 100%; }
  .cgl-tile--hero .cgl-fan { right: 2.6em; top: 1em; bottom: auto; font-size: 8px; opacity: 0.9; }
  .cgl-tile--hero h2 { max-width: 62%; }
  .cgl-hero { padding: 22px 20px 20px; }
  .cgl-hero .cgl-fan { right: 2.4em; top: 1em; font-size: 8px; }
  .cgl-hero__copy { max-width: 62%; }
  .cgl-hero__actions { align-items: stretch; flex-direction: column; }
  .cgl-hero__actions .sp-btn { width: 100%; }
  .cgl-hero__actions form { margin-left: 0; width: 100%; }
  .cgl-hero .ant-input { flex: 1; width: 100%; min-width: 0; }
  .cgl-hero__actions form .sp-btn { width: auto; flex: none; }
  .cgl-resume { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  .cgl-fan { animation: none; }
  .cgl-cta, .cgl-table, .cgl-hero .sp-btn { transition: none; }
  .cgl-cta:hover:not(:disabled), .cgl-table:hover, .cgl-hero .sp-btn:hover:not(:disabled) { transform: none; }
}
.card-table-surface { height: 520px; margin: 24px 0; border-radius: 16px; overflow: hidden; background: #94a3a6; }
.card-table-seat { padding: 5px 8px; border-radius: 8px; background: #123329; color: white; text-align: center; white-space: nowrap; font-size: 11px; min-width: 60px; pointer-events: none; }
.card-table-seat span { display: block; margin-top: 3px; }
.card-table-seat.is-turn { outline: 2px solid #48e487; outline-offset: 3px; }
@media (max-width: 700px) { .card-table-surface { height: 380px; } }

.card-table-seat { position: relative; border: 3px solid transparent; background: linear-gradient(#123329, #123329) padding-box, linear-gradient(#385348, #385348) border-box; }
.card-table-seat.is-turn { outline: none; background: linear-gradient(#123329, #123329) padding-box, conic-gradient(#72edb5 var(--turn-progress, 100%), #385348 0) border-box; }
.card-table-seat em { font-size: 9px; font-style: normal; color: #b5c9ff; margin-left: 6px; }
.card-table-seat.has-passed { opacity: 0.6; }
.card-table-pass, .card-table-rank { display: block; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); border-radius: 12px; padding: 5px 10px; background: #fff8e5; color: #183128; white-space: nowrap; }
.card-table-pass { animation: card-table-pass 800ms ease-out forwards; }
.card-table-rank { background: #d9f5b6; animation: card-table-rank 350ms ease-out; }
@keyframes card-table-pass { 0% { opacity: 0; transform: translateX(-50%) scale(0.6); } 25% { opacity: 1; transform: translateX(-50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) translateY(-8px); } }
@keyframes card-table-rank { from { transform: translateX(-50%) scale(0.5); } to { transform: translateX(-50%) scale(1); } }
@media (prefers-reduced-motion: reduce) { .card-table-pass, .card-table-rank { animation: none; } }

.card-table-stats { z-index: 1301 !important; top: 100px !important; left: 12px !important; }

.card-table-ready { color: #bbc9c2; font-size: 10px; }
.card-table-ready.is-ready { color: #72edb5; }
.card-table-empty-seat { color: var(--sp-text-secondary, #66746c); opacity: 0.55; font-size: 11px; white-space: nowrap; pointer-events: none; }
.hall-promo {
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 112px;
  padding: 16px 18px;
  overflow: hidden;
  border: 1px solid #82946b66;
  border-radius: 12px;
  background: #202b22;
  color: #f5edda;
  text-decoration: none;
  transition: border-color .2s ease;
}
.hall-promo:hover { color: #f5edda; border-color: #c0a66f; }
.hall-promo:focus-visible { outline: 3px solid #9b7b45; outline-offset: 3px; }
.hall-promo__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% center; }
.hall-promo__veil { position: absolute; inset: 0; background: linear-gradient(90deg, #1d2a22 0%, #1d2a22df 35%, #1d2a2230 100%); }
.hall-promo__copy { position: relative; }
.hall-promo__title { margin: 0; color: #f5edda; font-family: Georgia, 'Times New Roman', serif; font-size: 23px; font-weight: 400; line-height: 1.15; }
.hall-promo__description { display: block; margin-top: 5px; color: #cfdbcb; font-size: 11px; line-height: 1.5; }
.hall-promo__cta { display: inline-flex; align-items: center; gap: 12px; margin-top: 9px; color: #ecd7ad; font-size: 11px; font-weight: 700; }
.hall-promo__cta > span { font-size: 15px; line-height: 1; }
@media (prefers-reduced-motion: reduce) {
  .hall-promo { transition: none; }
}
.ice-city-promo {
  position: relative;
  isolation: isolate;
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 128px;
  aspect-ratio: 2.24;
  padding: 0;
  overflow: hidden;
  border: 1px solid #6ed5ed;
  border-radius: 14px;
  color: #fff;
  background: #1586bd;
  box-shadow: 0 6px 20px #146b9133;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ice-city-promo:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 10px 26px #146b9155; }
.ice-city-promo:focus-visible { outline: 3px solid #ffcf58; outline-offset: 3px; }
.ice-city-promo__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.ice-city-promo__new { position: absolute; top: 7px; left: 9px; padding: 2px 7px; border: 1px solid #ffffff99; border-radius: 5px; background: #07364dd9; color: #fff4be; font-size: 8px; font-weight: 800; letter-spacing: 1px; }
.ice-city-promo__footer { position: absolute; inset: auto 0 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 10px 8px; background: linear-gradient(transparent, #06283dee); font-size: 11px; font-weight: 700; text-shadow: 0 1px 4px #052238; }
.ice-city-promo__cta { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border: 1px solid #fff0b6; border-radius: 7px; background: linear-gradient(#ffe7a3, #ffd05c); color: #16344c; font-size: 11px; font-weight: 800; text-shadow: none; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .ice-city-promo { transition: none; } .ice-city-promo:hover { transform: none; } }
/* Thẻ Ma Sói ở sidebar Home. Cố ý là một "poster" trời đêm, giống nhau ở
   cả giao diện sáng lẫn tối, để nổi bật giữa sidebar phẳng kiểu Spotify. */
.ww-launch {
  position: relative;
  isolation: isolate;
  display: block;
  width: calc(100% - 16px);
  min-height: 118px;
  margin: 4px 8px 10px;
  padding: 14px 16px 12px;
  overflow: hidden;
  border: 1px solid rgba(186, 170, 255, 0.45);
  border-radius: 14px;
  color: #f3efff;
  background:
    radial-gradient(ellipse 90% 70% at 85% 0%, rgba(137, 110, 255, 0.55), transparent 60%),
    linear-gradient(160deg, #1b1446 0%, #0d0b24 62%, #2a0f1e 100%);
  box-shadow: 0 10px 28px rgba(35, 20, 110, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transform: rotate(-1.2deg);
  transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.3), box-shadow 0.25s ease;
  animation: ww-launch-glow 3.2s ease-in-out infinite;
}
.ww-launch:hover { transform: rotate(0deg) translateY(-3px) scale(1.02); box-shadow: 0 16px 36px rgba(60, 30, 170, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.16); }
.ww-launch:focus-visible { outline: 3px solid #b9a8ff; outline-offset: 2px; }

@keyframes ww-launch-glow {
  50% { box-shadow: 0 10px 34px rgba(120, 90, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
}

/* Sao lấp lánh vẽ bằng nhiều radial-gradient */
.ww-launch__stars {
  position: absolute;
  z-index: -3;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 30% 60%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 48% 14%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 42%, #d9d0ff 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 84%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 40% 34%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 52%, #cfc4ff 50%, transparent 51%);
  animation: ww-launch-twinkle 2.6s ease-in-out infinite alternate;
}
@keyframes ww-launch-twinkle { from { opacity: 0.45; } to { opacity: 1; } }

.ww-launch__moon {
  position: absolute;
  z-index: -2;
  top: -18px;
  right: -14px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #fffbe6 0%, #ffe9a8 45%, #f5c96a 100%);
  box-shadow: 0 0 28px 8px rgba(255, 224, 140, 0.45), 0 0 70px 24px rgba(255, 210, 120, 0.18);
}
.ww-launch__moon::after {
  /* vài vết lõm trên trăng */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 62% 58%, rgba(200, 150, 60, 0.35) 0 9%, transparent 10%),
    radial-gradient(circle at 34% 70%, rgba(200, 150, 60, 0.28) 0 6%, transparent 7%),
    radial-gradient(circle at 70% 30%, rgba(200, 150, 60, 0.25) 0 5%, transparent 6%);
}

/* Bóng sói: emoji tô đen hoàn toàn thành silhouette trước mặt trăng */
.ww-launch__wolf {
  position: absolute;
  z-index: -1;
  right: 14px;
  bottom: 6px;
  font-size: 50px;
  line-height: 1;
  filter: brightness(0) drop-shadow(0 0 6px rgba(160, 130, 255, 0.55));
  transform: scaleX(-1) rotate(-8deg);
  transform-origin: bottom center;
  transition: transform 0.3s ease;
}
.ww-launch:hover .ww-launch__wolf { transform: scaleX(-1) rotate(-22deg) translateY(-4px); }

.ww-launch__fog {
  position: absolute;
  z-index: -1;
  left: -20%;
  right: -20%;
  bottom: -18px;
  height: 46px;
  background: radial-gradient(ellipse at center, rgba(190, 175, 255, 0.28), transparent 70%);
  filter: blur(6px);
  animation: ww-launch-fog 7s ease-in-out infinite alternate;
}
@keyframes ww-launch-fog { to { transform: translateX(12%); } }

.ww-launch__copy { position: relative; display: flex; max-width: 72%; flex-direction: column; gap: 1px; }
.ww-launch__eyebrow { color: #c8bbff; font-size: 9px; font-weight: 900; letter-spacing: 0.16em; }
.ww-launch__title {
  padding-top: 4px;
  font-size: 26px;
  font-weight: 950;
  line-height: 1.15;
  letter-spacing: 0.04em;
  background: linear-gradient(180deg, #ffffff 30%, #ffc9d6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 14px rgba(255, 90, 130, 0.35);
}
.ww-launch__tagline { color: rgba(243, 239, 255, 0.82); font-size: 12px; font-style: italic; }

.ww-launch__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin-top: 8px;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  background: rgba(10, 6, 30, 0.55);
  color: #eee9ff;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  backdrop-filter: blur(4px);
}
.ww-launch__status i { width: 7px; height: 7px; border-radius: 50%; background: #9d8cff; }
.ww-launch.is-waiting .ww-launch__status i { background: #ffd43b; box-shadow: 0 0 0 0 rgba(255, 212, 59, 0.7); animation: ww-launch-ping 1.4s infinite; }
.ww-launch.is-live .ww-launch__status i { background: #ff4d6d; box-shadow: 0 0 0 0 rgba(255, 77, 109, 0.7); animation: ww-launch-ping 1.1s infinite; }
@keyframes ww-launch-ping { 70% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }

.ww-launch__cta {
  position: absolute;
  right: 12px;
  top: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #ff4d6d;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 12px rgba(255, 77, 109, 0.45);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.ww-launch:hover .ww-launch__cta, .ww-launch:focus-visible .ww-launch__cta { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ww-launch, .ww-launch__stars, .ww-launch__fog, .ww-launch__status i { animation: none; }
  .ww-launch, .ww-launch:hover { transform: none; }
}
/* Thẻ Cờ thú ở sidebar Home — poster bãi cỏ, giống nhau ở cả hai theme. */
.jg-launch {
  position: relative;
  isolation: isolate;
  display: block;
  width: calc(100% - 16px);
  min-height: 112px;
  margin: 4px 8px 10px;
  padding: 14px 16px 12px;
  overflow: hidden;
  border: 1px solid rgba(64, 192, 87, 0.5);
  border-radius: 14px;
  color: #fff;
  background:
    radial-gradient(ellipse 80% 70% at 90% 0%, rgba(255, 255, 255, 0.35), transparent 60%),
    linear-gradient(150deg, #2f9e44 0%, #5c940d 70%, #74b816 100%);
  box-shadow: 0 10px 26px rgba(47, 158, 68, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transform: rotate(1deg);
  transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.3), box-shadow 0.25s ease;
}
.jg-launch:hover { transform: rotate(0deg) translateY(-3px) scale(1.02); box-shadow: 0 16px 34px rgba(47, 158, 68, 0.45); }
.jg-launch:focus-visible { outline: 3px solid #b2f2bb; outline-offset: 2px; }
.jg-launch__river {
  position: absolute;
  right: -20px;
  bottom: -18px;
  width: 170px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(90deg, #4dabf7, #74c0fc);
  opacity: 0.85;
  z-index: -1;
}
.jg-launch__pets { position: absolute; right: 10px; bottom: 10px; display: flex; align-items: flex-end; }
.jg-launch__pets img {
  width: 44px;
  margin-left: -6px;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
  animation: jg-launch-hop 1.8s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.22s);
}
.jg-launch__pets img:first-child { width: 54px; }
.jg-launch__pets img:last-child { width: 34px; filter: sepia(0.35) drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25)); }
@keyframes jg-launch-hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.jg-launch__copy { position: relative; display: flex; flex-direction: column; gap: 3px; max-width: 62%; }
.jg-launch__eyebrow { font-size: 10px; font-weight: 800; letter-spacing: 0.12em; opacity: 0.85; }
.jg-launch__title { font-size: 24px; font-weight: 900; letter-spacing: 0.04em; line-height: 1.05; }
.jg-launch__status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; opacity: 0.95; }
.jg-launch__status i { width: 7px; height: 7px; border-radius: 50%; background: #d3f9d8; }
.jg-launch.is-waiting .jg-launch__status i { background: #ffd43b; box-shadow: 0 0 0 3px rgba(255, 212, 59, 0.35); }
.jg-launch.is-live .jg-launch__status i { background: #ff8787; box-shadow: 0 0 0 3px rgba(255, 135, 135, 0.35); }
@media (prefers-reduced-motion: reduce) { .jg-launch__pets img { animation: none; } }
/* Thẻ Au đi sần ở sidebar Home — poster neon, giống nhau ở cả hai theme. */
.au-launch {
  position: relative;
  isolation: isolate;
  display: block;
  width: calc(100% - 16px);
  min-height: 112px;
  margin: 4px 8px 10px;
  padding: 14px 16px 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 63, 208, 0.55);
  border-radius: 14px;
  color: #fff;
  background:
    radial-gradient(ellipse 70% 80% at 100% 0%, rgba(47, 224, 255, 0.45), transparent 60%),
    radial-gradient(ellipse 60% 70% at 0% 100%, rgba(255, 63, 208, 0.45), transparent 60%),
    linear-gradient(150deg, #1a0b3d 0%, #2b0f5c 60%, #120629 100%);
  box-shadow: 0 10px 26px rgba(160, 40, 200, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transform: rotate(-1deg);
  transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.3), box-shadow 0.25s ease;
}
.au-launch:hover { transform: rotate(0deg) translateY(-3px) scale(1.02); box-shadow: 0 16px 34px rgba(160, 40, 200, 0.5); }
.au-launch:focus-visible { outline: 3px solid #2fe0ff; outline-offset: 2px; }
.au-launch__keys { position: absolute; right: 10px; bottom: 12px; display: flex; gap: 2px; }
.au-launch__keys > span {
  display: inline-flex;
  animation: au-launch-beat 0.714s ease-in-out infinite; /* 84 BPM */
  animation-delay: calc(var(--i) * 0.178s);
}
.au-launch__keys .au-atlas { display: block; background-repeat: no-repeat; }
@keyframes au-launch-beat { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-5px); } }
.au-launch__copy { position: relative; display: flex; flex-direction: column; gap: 3px; max-width: 64%; }
.au-launch__eyebrow { font-size: 10px; font-weight: 800; letter-spacing: 0.12em; opacity: 0.85; color: #9ff3ff; }
.au-launch__title {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.05;
  text-shadow: 0 0 10px rgba(255, 63, 208, 0.8), 0 0 2px #fff;
}
.au-launch__status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; opacity: 0.95; }
.au-launch__status i { width: 7px; height: 7px; border-radius: 50%; background: #c3b5ff; }
.au-launch.is-waiting .au-launch__status i { background: #ffd43b; box-shadow: 0 0 0 3px rgba(255, 212, 59, 0.35); }
.au-launch.is-live .au-launch__status i { background: #ff5cd6; box-shadow: 0 0 0 3px rgba(255, 92, 214, 0.35); }
@media (prefers-reduced-motion: reduce) { .au-launch__keys > span { animation: none; } }
.chat-room {
  flex: 0 0 auto;
  min-height: 320px;
  max-height: 440px;
}

.chat-room--sidebar {
  flex: 1 1 0;
  min-height: 180px;
  max-height: none;
}

.chat-room__head {
  padding-bottom: 10px;
}

.chat-room__count {
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--sp-radius-pill);
  background: var(--sp-surface-2);
  color: var(--sp-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

.chat-room__body {
  padding: 0 12px;
}

.chat-room__state {
  min-height: 160px;
  display: grid;
  place-items: center;
  gap: 8px;
  align-content: center;
}

.chat-room__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 8px;
}

.chat-room__message {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.chat-room__message--mine .chat-room__bubble {
  background: var(--sp-green-soft);
  border-color: rgba(29, 185, 84, 0.24);
}

.chat-room__bubble {
  min-width: 0;
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  background: var(--sp-surface-2);
  padding: 8px 10px;
}

.chat-room__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-bottom: 4px;
}

.chat-room__author {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--sp-text);
  font-size: 12px;
  font-weight: 800;
}

.chat-room__role {
  flex: 0 0 auto;
  padding: 1px 6px;
  border-radius: var(--sp-radius-pill);
  background: var(--sp-green);
  color: var(--sp-text-on-accent);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.chat-room__time {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--sp-text-faint);
  font-size: 11px;
}

.chat-room__bubble p {
  margin: 0;
  color: var(--sp-text);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.chat-room__photo,
.chat-room__photo.ant-image {
  display: block;
  margin-top: 6px;
  max-width: 220px;
  overflow: hidden;
  border-radius: 8px;
}

.chat-room__photo img,
.chat-room__photo .ant-image-img {
  display: block;
  width: 100%;
  min-height: 80px;
  max-height: 220px;
  object-fit: contain;
  background: var(--sp-surface-2);
}

.chat-room__composer {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--sp-border);
  overflow: visible;
}

.chat-room__pending {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 28px;
  gap: 8px;
  align-items: center;
  padding: 6px;
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  background: var(--sp-surface-2);
}

.chat-room__pending img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
}

.chat-room__pending-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--sp-text-muted);
  font-size: 12px;
}

.chat-room__pending-remove {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--sp-radius-pill);
  background: transparent;
  color: var(--sp-text-muted);
  cursor: pointer;
}

.chat-room__pending-remove:hover {
  background: var(--sp-surface-hover);
  color: var(--sp-text);
}

.chat-room__composer-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px 40px;
  gap: 6px;
  align-items: end;
}

.chat-room__tool {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--sp-radius);
  background: var(--sp-surface-2);
  color: var(--sp-text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.chat-room__tool:hover:not(:disabled) {
  background: var(--sp-surface-hover);
  color: var(--sp-text);
}

.chat-room__tool:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.chat-emoji {
  position: relative;
}

.chat-emoji-picker {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(8, 32px);
  gap: 2px;
  max-height: 220px;
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  background: var(--sp-surface);
  box-shadow: var(--sp-shadow-lg);
}

.chat-emoji-picker__item {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.chat-emoji-picker__item:hover {
  background: var(--sp-surface-hover);
}

.chat-room__composer .ant-input {
  resize: none;
}

.chat-room__composer .ant-btn {
  width: 40px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* ── Banner Quốc khánh 2/9 ─────────────────────────────────────────────
 * Dải mảnh nằm trên cùng cột giữa HomePage. Mọi hiệu ứng chỉ chạy bằng
 * transform/opacity nên không gây reflow — trang này còn có vòng
 * requestAnimationFrame 60fps của Billiards, không được giành layout.
 * Cờ đỏ sao vàng: sao vàng LUÔN nằm trên nền đỏ, không có khối vàng nào.
 */

.nd-banner {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  padding: 14px 20px;
  min-height: 88px;
  border-radius: var(--sp-radius-lg);
  background: #da251d;
  border: 1px solid rgba(255, 205, 0, 0.28);
  box-shadow: var(--sp-shadow);
}

:root[data-theme='dark'] .nd-banner {
  background: #b31217;
  border-color: rgba(255, 205, 0, 0.22);
}

/* ── Lớp 1: đường chân trời Ba Đình, parallax theo con trỏ ───────────── */
.nd-banner__skyline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 62px;
  pointer-events: none;
  opacity: 0.16;
  transform: translate3d(var(--nd-parallax, 0px), 0, 0);
  transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.nd-banner__skyline svg {
  display: block;
  width: 108%;
  height: 100%;
  margin-left: -4%;
}

:root[data-theme='dark'] .nd-banner__skyline {
  opacity: 0.2;
}

/* ── Lớp 2: sao vàng là nguồn sáng duy nhất ──────────────────────────── */
.nd-banner__glow {
  position: absolute;
  left: 44px;
  top: 50%;
  width: 240px;
  height: 240px;
  transform: translateY(-50%);
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 205, 0, 0.26) 0%, rgba(255, 205, 0, 0) 62%);
  animation: nd-pulse 4.5s ease-in-out infinite;
}

:root[data-theme='dark'] .nd-banner__glow {
  background: radial-gradient(circle, rgba(255, 205, 0, 0.36) 0%, rgba(255, 205, 0, 0) 62%);
}

@keyframes nd-pulse {
  0%, 100% { opacity: 0.55; transform: translateY(-50%) scale(0.92); }
  50% { opacity: 1; transform: translateY(-50%) scale(1.06); }
}

/* ── Lớp 3: vệt sáng quét ngang mặt lụa ──────────────────────────────── */
.nd-banner__sweep {
  position: absolute;
  inset: -40% -12%;
  pointer-events: none;
  background: linear-gradient(76deg, transparent 42%, rgba(255, 255, 255, 0.16) 50%, transparent 58%);
  animation: nd-sweep 7s linear infinite;
}

@keyframes nd-sweep {
  0% { transform: translateX(-70%); }
  55%, 100% { transform: translateX(70%); }
}

/* ── Lớp 4: bụi sao bay lên, gói trong lòng banner ───────────────────── */
.nd-banner__dust {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.nd-banner__dust span {
  position: absolute;
  bottom: -10px;
  color: #ffcd00;
  font-size: 9px;
  line-height: 1;
  opacity: 0;
  animation: nd-rise linear infinite;
}

@keyframes nd-rise {
  0% { opacity: 0; transform: translateY(0) scale(0.6); }
  18% { opacity: 0.9; }
  70% { opacity: 0.45; }
  100% { opacity: 0; transform: translateY(-78px) scale(1) rotate(70deg); }
}

/* ── Lá cờ lụa bay ───────────────────────────────────────────────────── */
.nd-banner__flag {
  position: relative;
  flex-shrink: 0;
  width: 66px;
  height: 44px;
  perspective: 220px;
}

.nd-banner__flag svg {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  transform-origin: left center;
  animation: nd-wave 3.6s ease-in-out infinite;
}

@keyframes nd-wave {
  0%, 100% { transform: rotateY(-11deg) skewY(1.1deg); }
  50% { transform: rotateY(9deg) skewY(-1.1deg); }
}

.nd-banner__silk {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  pointer-events: none;
  mix-blend-mode: overlay;
  background: linear-gradient(
    100deg,
    rgba(0, 0, 0, 0.22) 8%,
    rgba(255, 255, 255, 0.14) 30%,
    rgba(0, 0, 0, 0.2) 55%,
    rgba(255, 255, 255, 0.12) 78%,
    rgba(0, 0, 0, 0.18) 96%
  );
  background-size: 200% 100%;
  animation: nd-silk 3.6s ease-in-out infinite;
}

@keyframes nd-silk {
  0%, 100% { background-position: 0% 0; }
  50% { background-position: 100% 0; }
}

/* ── Nội dung ────────────────────────────────────────────────────────── */
.nd-banner__body {
  position: relative;
  flex: 1 1 320px;
  min-width: 0;
}

.nd-banner__title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: #fff;
  letter-spacing: 0.1px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}

.nd-banner__subtitle {
  margin: 3px 0 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.74);
}

.nd-banner__countdown {
  position: relative;
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.nd-banner__cell {
  min-width: 46px;
  text-align: center;
  padding: 5px 6px 4px;
  border-radius: var(--sp-radius);
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 205, 0, 0.34);
}

.nd-banner__num {
  display: block;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: #ffcd00;
  font-variant-numeric: tabular-nums;
}

.nd-banner__unit {
  display: block;
  margin-top: 1px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.62);
}

.nd-banner__num--tick {
  animation: nd-tick 450ms ease;
}

@keyframes nd-tick {
  0% { transform: translateY(-4px); opacity: 0.35; }
  100% { transform: translateY(0); opacity: 1; }
}

.nd-banner__cta {
  position: relative;
  flex-shrink: 0;
  font: inherit;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: var(--sp-radius-pill);
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 205, 0, 0.55);
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
}

.nd-banner__cta:hover {
  background: rgba(255, 205, 0, 0.2);
}

.nd-banner__cta:active {
  transform: scale(0.97);
}

/* ── Pháo hoa sao vàng: chỉ bung khi bấm, gói trong banner ───────────── */
.nd-banner__spark {
  position: absolute;
  left: var(--nd-spark-x, 50%);
  top: 50%;
  color: #ffcd00;
  font-size: var(--nd-spark-size, 10px);
  line-height: 1;
  pointer-events: none;
  animation: nd-burst var(--nd-spark-dur, 1200ms) cubic-bezier(0.16, 0.84, 0.44, 1) forwards;
}

@keyframes nd-burst {
  0% { opacity: 1; transform: translate(0, 0) scale(0.4); }
  100% {
    opacity: 0;
    transform: translate(var(--nd-spark-dx, 0px), var(--nd-spark-dy, -60px)) scale(1.1) rotate(140deg);
  }
}

/* Tôn trọng thiết lập giảm chuyển động của hệ thống. */
@media (prefers-reduced-motion: reduce) {
  .nd-banner__glow,
  .nd-banner__sweep,
  .nd-banner__flag svg,
  .nd-banner__silk,
  .nd-banner__num--tick {
    animation: none;
  }

  .nd-banner__dust,
  .nd-banner__spark {
    display: none;
  }

  .nd-banner__skyline {
    transition: none;
  }
}
.daily-idiom {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 46px;
  padding: 0 4px 0 16px;
  margin-bottom: 20px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--di-border);
  background: var(--di-bg);
}

.daily-idiom__badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--di-badge);
}

.daily-idiom__badge-dot {
  font-size: 13px;
  line-height: 1;
}

/* Vạch ngăn giữa badge và phần chữ chạy */
.daily-idiom__divider {
  flex: 0 0 auto;
  width: 1px;
  height: 20px;
  background: var(--di-border);
}

.daily-idiom__viewport {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 24px,
    #000 calc(100% - 24px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 24px,
    #000 calc(100% - 24px),
    transparent 100%
  );
}

.daily-idiom__track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  /* Bắt đầu ngoài mép phải để không "chớp" trước khi animation chạy */
  transform: translateX(var(--di-start, 100%));
  animation: daily-idiom-scroll var(--di-duration, 20s) linear infinite;
}

.daily-idiom__viewport:hover .daily-idiom__track {
  animation-play-state: paused;
}

.daily-idiom__item {
  font-size: 15px;
  font-style: italic;
  font-weight: 500;
  line-height: 1;
  color: var(--di-text);
}

.daily-idiom__date {
  flex: 0 0 auto;
  padding: 0 10px 0 4px;
  font-size: 11px;
  letter-spacing: 0.4px;
  white-space: nowrap;
  color: var(--di-date);
}

.daily-idiom__vote {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding-right: 6px;
}

.daily-idiom__vote-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  color: var(--di-date);
  transition: background 0.15s, color 0.15s;
}

.daily-idiom__vote-btn:hover:not(:disabled) {
  background: rgba(128, 128, 128, 0.14);
  color: var(--di-text);
}

.daily-idiom__vote-btn:disabled {
  cursor: default;
  opacity: 0.6;
}

.daily-idiom__vote-btn.is-active {
  color: #52c41a;
}

.daily-idiom__vote-btn.is-active-down {
  color: #ff4d4f;
}

.daily-idiom__vote-count {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* Câu vào từ mép phải, trôi sang trái tới khi khuất hẳn, rồi lặp lại từ phải.
   Nhờ đó mỗi lượt vào trang user luôn đọc được câu từ chữ đầu tiên. */
@keyframes daily-idiom-scroll {
  from {
    transform: translateX(var(--di-start, 100%));
  }
  to {
    transform: translateX(var(--di-end, -100%));
  }
}

/* Tôn trọng người dùng tắt hiệu ứng chuyển động */
@media (prefers-reduced-motion: reduce) {
  .daily-idiom__track {
    animation: none;
    transform: none;
  }
  .daily-idiom__viewport {
    overflow-x: auto;
  }
}
.wealth-trigger {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid #d7a82f;
  border-radius: 6px;
  background: #161616;
  color: #ffd76a;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(215, 168, 47, 0.18);
  transition: border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.wealth-trigger:hover {
  border-color: #ffe29a;
  color: #fff2c2;
  transform: translateY(-1px);
}

.wealth-trigger:focus-visible,
.wealth-refresh:focus-visible,
.wealth-error button:focus-visible {
  outline: 2px solid #35d9d0;
  outline-offset: 2px;
}

.wealth-modal .ant-modal-content {
  overflow: hidden;
  padding: 0;
  border: 1px solid #53451f;
  border-radius: 8px;
  background: #111315;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.64), 0 0 32px rgba(255, 205, 84, 0.12);
}

.wealth-modal .ant-modal-close {
  top: 14px;
  right: 14px;
  color: #c8ced3;
  background: #25282b;
  border: 1px solid #3d4246;
}

.wealth-modal .ant-modal-close:hover {
  color: #ffffff;
  background: #303438;
}

.wealth-shell {
  min-height: 520px;
  padding: 28px;
  color: #f5f6f7;
  background-color: #111315;
  background-image:
    linear-gradient(rgba(255, 215, 106, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53, 217, 208, 0.03) 1px, transparent 1px);
  background-size: 32px 32px;
}

.wealth-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-right: 40px;
}

.wealth-header__emblem {
  display: grid;
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  place-items: center;
  border: 1px solid #6e5927;
  border-radius: 50%;
  background: #1b1c1d;
  box-shadow: inset 0 0 0 5px #121415, 0 0 24px rgba(255, 208, 91, 0.16);
}

.wealth-header__emblem img {
  width: 58px;
  height: 58px;
  object-fit: contain;
}

.wealth-header__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #35d9d0;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.wealth-header h2 {
  margin: 2px 0 0;
  color: #ffd76a;
  font-size: 28px;
  line-height: 1.15;
}

.wealth-header p {
  margin: 5px 0 0;
  color: #9da5ab;
  font-size: 13px;
}

.wealth-podiums {
  display: grid;
  min-height: 276px;
  align-items: end;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 24px;
}

.wealth-podium {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: flex-end;
}

.wealth-podium--rank-1 {
  grid-column: 2;
}

.wealth-podium--rank-2 {
  grid-column: 1;
  grid-row: 1;
}

.wealth-podium--rank-3 {
  grid-column: 3;
  grid-row: 1;
}

.wealth-podium__identity {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
  flex-direction: column;
  padding: 8px 6px 10px;
}

.wealth-podium__crown {
  position: absolute;
  top: -17px;
  color: #ffd76a;
  font-size: 24px;
  filter: drop-shadow(0 3px 5px rgba(255, 215, 106, 0.35));
}

.wealth-avatar {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  place-items: center;
  border: 2px solid #747b80;
  border-radius: 50%;
  background: var(--wealth-avatar-color);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32);
}

.wealth-avatar--rank-1 {
  width: 62px;
  height: 62px;
  border-color: #ffd76a;
  font-size: 16px;
  box-shadow: 0 0 0 4px rgba(255, 215, 106, 0.1), 0 7px 20px rgba(0, 0, 0, 0.36);
}

.wealth-avatar--rank-2 {
  border-color: #b9c5cd;
}

.wealth-avatar--rank-3 {
  border-color: #e68961;
}

.wealth-podium__name,
.wealth-podium__username {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wealth-podium__name {
  margin-top: 8px;
  color: #f8f9fa;
  font-size: 14px;
  font-weight: 800;
}

.wealth-podium__username {
  color: #7f8990;
  font-size: 11px;
}

.wealth-podium__base {
  display: flex;
  min-height: 112px;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  border: 1px solid #4c4f51;
  border-bottom-width: 4px;
  border-radius: 7px 7px 3px 3px;
  background: #202326;
}

.wealth-podium--rank-1 .wealth-podium__base {
  min-height: 148px;
  border-color: #806626;
  border-bottom-color: #ffd76a;
  background: #262316;
}

.wealth-podium--rank-2 .wealth-podium__base {
  min-height: 124px;
  border-bottom-color: #b9c5cd;
}

.wealth-podium--rank-3 .wealth-podium__base {
  border-bottom-color: #e68961;
}

.wealth-podium__rank {
  color: #777f85;
  font-size: 24px;
  font-weight: 900;
}

.wealth-podium--rank-1 .wealth-podium__rank {
  color: #ffd76a;
  font-size: 34px;
}

.wealth-balance {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #d9dde0;
  white-space: nowrap;
}

.wealth-balance img {
  width: 25px;
  height: 25px;
}

.wealth-balance strong {
  color: #ffffff;
  font-size: 16px;
}

.wealth-balance span {
  color: #ffd76a;
  font-size: 10px;
  font-weight: 800;
}

.wealth-ranking {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.wealth-row {
  display: grid;
  min-height: 58px;
  align-items: center;
  grid-template-columns: 34px 40px minmax(0, 1fr) auto auto;
  gap: 10px;
  padding: 7px 12px;
  border: 1px solid #353a3d;
  border-radius: 6px;
  background: #1a1d1f;
}

.wealth-row.is-current-user,
.wealth-podium.is-current-user .wealth-podium__base {
  border-color: #35d9d0;
}

.wealth-row__rank {
  color: #7e878d;
  font-size: 15px;
  font-weight: 900;
}

.wealth-row .wealth-avatar {
  width: 36px;
  height: 36px;
  font-size: 11px;
}

.wealth-row__identity {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.wealth-row__identity strong,
.wealth-row__identity small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wealth-row__identity strong {
  color: #f0f2f3;
  font-size: 13px;
}

.wealth-row__identity small {
  color: #778087;
  font-size: 11px;
}

.wealth-balance--compact {
  margin-left: auto;
}

.wealth-balance--compact img {
  width: 22px;
  height: 22px;
}

.wealth-balance--compact strong {
  font-size: 14px;
}

.wealth-you-badge {
  display: inline-flex;
  min-height: 18px;
  align-items: center;
  padding: 0 6px;
  border: 1px solid #238e89;
  border-radius: 4px;
  background: #153b3a;
  color: #67eee6;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.wealth-loading,
.wealth-error,
.wealth-empty {
  display: flex;
  min-height: 344px;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  color: #9ca4aa;
}

.wealth-loading img {
  width: 58px;
  height: 58px;
  animation: wealth-coin-pulse 1.2s ease-in-out infinite;
}

.wealth-error button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid #35d9d0;
  border-radius: 5px;
  background: #17312f;
  color: #6ce9e2;
  cursor: pointer;
}

.wealth-footer {
  display: flex;
  min-height: 36px;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  border-top: 1px solid #2c3033;
  color: #6f787e;
  font-size: 10px;
}

.wealth-refresh {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #8e979d;
  cursor: pointer;
}

.wealth-refresh:hover:not(:disabled) {
  background: #25292c;
  color: #35d9d0;
}

.wealth-refresh:disabled {
  cursor: wait;
  opacity: 0.55;
}

@keyframes wealth-coin-pulse {
  0%,
  100% {
    opacity: 0.65;
    transform: scale(0.92);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 720px) {
  .wealth-shell {
    padding: 22px 14px 18px;
  }

  .wealth-header__emblem {
    width: 58px;
    height: 58px;
    flex-basis: 58px;
  }

  .wealth-header__emblem img {
    width: 48px;
    height: 48px;
  }

  .wealth-header h2 {
    font-size: 23px;
  }

  .wealth-podiums {
    gap: 5px;
  }

  .wealth-podium__base {
    padding: 8px 2px;
  }

  .wealth-balance {
    gap: 3px;
  }

  .wealth-balance img {
    width: 20px;
    height: 20px;
  }

  .wealth-balance strong {
    font-size: 13px;
  }
}
.card-table-surface .card-table-seat.is-turn { background: linear-gradient(#123329, #123329) padding-box, conic-gradient(var(--turn-color, #4caf50) var(--turn-progress, 100%), #385348 0) border-box; box-shadow: 0 0 22px color-mix(in srgb, var(--turn-color, #4caf50) 50%, transparent); }
.card-table-seat .card-table-turn-label { color: var(--turn-color, #4caf50); font-weight: 800; }
.card-table-seat.is-turn b { color: var(--turn-color, #4caf50); }
.card-table-turn-edge { position: absolute; z-index: 24; box-sizing: border-box; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; transform: translate(-50%, -50%); padding: 7px 12px; border: 1px solid var(--turn-color, #4caf50); border-radius: 999px; background: #12231fee; color: #fff; box-shadow: 0 0 18px color-mix(in srgb, var(--turn-color, #4caf50) 25%, transparent); font-size: 12px; font-weight: 700; pointer-events: none; white-space: nowrap; }
.card-table-chat-bubble { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); width: max-content; max-width: min(220px, 70vw); padding: 10px 14px; border: 1px solid #ffffff88; border-radius: 15px 15px 15px 4px; background: #fff9eb; color: #24332c; font-size: 12px; font-weight: 600; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; box-shadow: 0 4px 16px #0004; pointer-events: none; }
.card-table-own-chat { position: absolute; z-index: 55; bottom: 170px; left: 50%; pointer-events: none; }
.card-table-own-chat .card-table-chat-bubble { bottom: 0; max-width: min(300px, 80vw); }
.thirteen-hud .thirteen-actions { max-width: 580px; }
.thirteen-actions .thirteen-selection-feedback { font-size: 12px; white-space: nowrap; }
.thirteen-selection-feedback.is-valid { color: var(--sp-green); }
.thirteen-selection-feedback.is-invalid { color: var(--sp-red); }
.thirteen-clear b { font-size: 18px; font-weight: 400; }
.thirteen-clear { gap: 4px; }
.thirteen-pass-pulse { animation: thirteen-pass-hint 700ms ease-in-out 3 alternate; }
@keyframes thirteen-pass-hint { to { box-shadow: 0 0 0 4px color-mix(in srgb, var(--sp-green) 45%, transparent); } }
.thirteen-card.is-dim { filter: brightness(0.65); }
.thirteen-card.is-focused { outline: 3px solid #ffc857; outline-offset: 4px; }
@media (max-width: 700px) {
  .th-game .thirteen-actions .thirteen-selection-feedback { order: -1; flex: 1 0 100%; overflow: hidden; text-overflow: ellipsis; }
  .th-game .thirteen-actions { gap: 6px; }
  .th-game .thirteen-actions .thirteen-timer { box-sizing: border-box; width: 34px; height: 34px; }
  .th-game .thirteen-actions button { padding-inline: 6px; font-size: 12px; }
  .th-game .thirteen-hud .thirteen-actions .thirteen-clear span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .thirteen-pass-pulse { animation: none; } }
.table-chat { position: absolute; z-index: 60; right: 12px; top: 68px; bottom: 12px; width: 320px; display: flex; flex-direction: column; color: var(--sp-text); pointer-events: none; }
.table-chat:not(.is-open) { width: auto; bottom: auto; }
.table-chat-toggle { align-self: flex-end; flex-shrink: 0; }
.table-chat button, .table-chat form, .table-chat-messages { pointer-events: auto; }
.table-chat .sp-btn { background: color-mix(in srgb, var(--sp-surface, #fff) 60%, transparent); backdrop-filter: blur(8px); }
.table-chat-body { flex: 1; min-height: 0; display: flex; flex-direction: column; background: transparent; }
.table-chat-body[hidden] { display: none; }
.table-chat-messages { list-style: none; margin: 0; padding: 8px 0; flex: 0 1 auto; min-height: 0; overflow-y: auto; }
.table-chat-messages li { margin-bottom: 8px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--sp-surface, #fff) 68%, transparent); text-shadow: 0 1px 2px var(--sp-surface, #fff); overflow-wrap: anywhere; }
.table-chat-messages li[aria-hidden] { padding: 0; margin: 0; height: 0; background: transparent; }
.table-chat-messages header { display: flex; justify-content: space-between; gap: 8px; }
.table-chat-messages time { color: var(--sp-text-muted); font-size: 11px; }
.table-chat-messages p { margin: 4px 0 0; white-space: pre-wrap; }
.table-chat form { display: flex; gap: 4px; padding: 8px; margin-top: auto; flex-shrink: 0; border-radius: 12px; background: color-mix(in srgb, var(--sp-surface, #fff) 50%, transparent); backdrop-filter: blur(8px); }
.table-chat input { width: 0; flex: 1; min-width: 0; background: transparent; color: var(--sp-text); border: 1px solid var(--sp-border); border-radius: 6px; padding: 8px; }
.table-chat .chat-emoji { position: relative; }
.table-chat .chat-emoji-picker { position: absolute; bottom: 40px; right: 0; width: 240px; max-height: 200px; overflow: auto; display: grid; grid-template-columns: repeat(6, 1fr); background: var(--sp-surface, #fff); }
.table-chat .chat-emoji-picker__item, .table-chat .chat-room__tool { background: transparent; border: 0; cursor: pointer; padding: 5px; }
@media (max-width: 700px) {
  .table-chat { top: auto; bottom: var(--table-chat-bottom, 12px); right: 12px; left: 12px; width: auto; height: min(55vh, 480px, calc(100dvh - var(--table-chat-bottom, 12px) - 80px)); }
  .table-chat:not(.is-open) { left: auto; height: auto; top: 68px; bottom: auto; }
}
.workspace-shell {
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
  background: #eef7ff;
  color: #24324a;
}

.workspace-topbar {
  height: 68px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid #d8e5f2;
  box-shadow: 0 6px 20px rgba(70, 105, 140, 0.09);
  position: relative;
  z-index: 20;
}

.workspace-brand {
  border: 0;
  background: transparent;
  color: #24324a;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-align: left;
}

.workspace-brand span { display: flex; flex-direction: column; }
.workspace-brand strong { font-size: 15px; }
.workspace-brand small { color: #71839a; font-size: 11px; }

.workspace-help {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #71839a;
  font-size: 12px;
}

.workspace-help kbd,
.workspace-prompt kbd {
  min-width: 27px;
  padding: 4px 7px;
  border: 1px solid #a9bfd5;
  border-bottom-width: 3px;
  border-radius: 6px;
  background: #f5f9fd;
  color: #334155;
  font: 700 12px monospace;
  text-align: center;
}

.workspace-stage { position: relative; height: calc(100vh - 68px); }
.workspace-game, .workspace-game canvas { width: 100%; height: 100%; display: block; }
.workspace-game canvas:focus { outline: 3px solid rgba(124, 58, 237, 0.22); outline-offset: -3px; }
.workspace-now-playing-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.workspace-status {
  position: absolute;
  top: 14px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid #c8d9ea;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #52637a;
  font-size: 12px;
  backdrop-filter: blur(10px);
}

.workspace-dot { width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; }
.workspace-dot.is-online { background: #22c55e; box-shadow: 0 0 9px #22c55e; }

.workspace-voice {
  position: absolute;
  top: 55px;
  right: 16px;
  z-index: 5;
  width: 260px;
  display: grid;
  gap: 7px;
  padding: 13px;
  border: 1px solid #b9d5e8;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 12px 32px rgba(70, 105, 140, 0.15);
}
.workspace-voice small { color: #52637a; }
.workspace-voice div { display: flex; gap: 7px; }
.workspace-voice button { border: 0; border-radius: 8px; padding: 8px; background: #5b67d7; color: white; cursor: pointer; }
.workspace-voice button:disabled { opacity: 0.5; cursor: default; }

.workspace-prompt {
  position: absolute;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid #c8d9ea;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
  color: #24324a;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 14px 40px rgba(70, 105, 140, 0.18);
}
.workspace-prompt--werewolf {
  border-color: rgba(186, 170, 255, 0.7);
  color: #f8f4ff;
  background: linear-gradient(135deg, #24164f, #0d0b24 68%, #4a142b);
  box-shadow: 0 10px 30px rgba(60, 30, 170, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.13);
}
.workspace-prompt--werewolf span { font-size: 20px; filter: drop-shadow(0 0 8px #9d8cff); }
.workspace-werewolf-modal .ant-modal-content { overflow: hidden; padding: 16px; background: var(--sp-bg); }
.workspace-werewolf-modal .ant-modal-body { max-height: 82vh; overflow-y: auto; }
.workspace-werewolf-title { display: inline-flex; align-items: baseline; gap: 10px; color: var(--sp-text); }
.workspace-werewolf-title small { color: var(--sp-text-muted); font-size: 12px; font-weight: 500; }
.workspace-werewolf-loading { display: grid; min-height: 320px; place-items: center; color: var(--sp-text-muted); }

.workspace-chat {
  position: absolute;
  left: 16px;
  bottom: 16px;
  width: min(410px, calc(100vw - 32px));
  padding: 10px;
  border: 1px solid #c8d9ea;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
}

.workspace-chat label { display: block; margin: 0 0 6px 3px; color: #71839a; font-size: 11px; }
.workspace-chat div { display: flex; gap: 8px; }
.workspace-chat input {
  flex: 1;
  min-width: 0;
  border: 1px solid #c8d9ea;
  border-radius: 9px;
  background: #f8fbff;
  color: #24324a;
  padding: 9px 11px;
  outline: none;
}
.workspace-chat input:focus { border-color: #8b5cf6; }
.workspace-chat button {
  border: 0;
  border-radius: 9px;
  padding: 0 15px;
  background: #7c3aed;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.workspace-chat button:disabled { opacity: 0.45; cursor: default; }

.workspace-credits {
  position: absolute;
  right: 16px;
  bottom: 14px;
  color: #6b7f96;
  font-size: 11px;
  text-decoration: none;
  text-shadow: 0 1px 2px #ffffff;
}
.workspace-credits:hover { color: #7c3aed; text-decoration: underline; }

.workspace-music-form { margin-bottom: 16px; }
.workspace-game-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.workspace-game-grid button {
  min-height: 150px;
  border: 1px solid var(--sp-border);
  border-radius: 14px;
  background: var(--sp-surface-2);
  color: var(--sp-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
}
.workspace-game-grid button:hover { border-color: #8b5cf6; transform: translateY(-2px); }
.workspace-game-grid span { font-size: 36px; }
.workspace-game-grid small { color: var(--sp-text-muted); }

@media (max-width: 760px) {
  .workspace-help { display: none; }
  .workspace-game-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .workspace-game-grid button { transition: none; }
}
.quick-reaction-buttons {
  position: relative;
  display: inline-flex;
  gap: 2px;
}

.quick-reaction-buttons__btn {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
}

.quick-reaction-buttons__btn:hover:not(:disabled) {
  background: var(--sp-surface-active);
  transform: scale(1.12);
}

.quick-reaction-buttons__btn:active:not(:disabled) {
  transform: scale(0.94);
}

.quick-reaction-buttons__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.quick-reaction-buttons__btn--active {
  background: var(--sp-green-soft);
  border-color: var(--sp-green);
}

.reaction-burst {
  position: absolute;
  pointer-events: none;
  font-size: 20px;
  animation: reaction-burst-float 0.9s ease-out forwards;
  z-index: 2;
}

@keyframes reaction-burst-float {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.8);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -120%) scale(1.4);
  }
}
/* ── Ma Sói ──────────────────────────────────────────────────────────
   Nền đổi theo pha (đêm tím than, ngày vàng nhạt, bỏ phiếu đỏ gạch);
   panel vẫn dùng token --sp-* để sáng/tối đều đọc được. */
.ww-page {
  --ww-accent: #6c5ce7;
  --ww-accent-soft: rgba(108, 92, 231, 0.14);
  --ww-wolf: #d9480f;
  --ww-dead: #868e96;
  --ww-private: #0c8599;
  min-height: 100vh;
  color: var(--sp-text);
  background: radial-gradient(circle at 50% -20%, var(--ww-accent-soft), transparent 45%), var(--sp-bg);
  transition: background 0.6s ease;
}
.ww-page--night { --ww-accent: #5f3dc4; --ww-accent-soft: rgba(72, 52, 212, 0.32); }
.ww-page--day { --ww-accent: #e8a200; --ww-accent-soft: rgba(250, 176, 5, 0.22); }
.ww-page--vote { --ww-accent: #e03131; --ww-accent-soft: rgba(224, 49, 49, 0.18); }
.ww-page--hunter { --ww-accent: #2b8a3e; --ww-accent-soft: rgba(47, 158, 68, 0.2); }
.ww-page--ended { --ww-accent: #1db954; --ww-accent-soft: rgba(29, 185, 84, 0.18); }
.ww-page--embedded { min-height: 0; }
.ww-page--embedded .ww-stage { width: 100%; padding: 0; }
.ww-page--embedded .ww-feed { height: min(70vh, 720px); }

.ww-loading { display: grid; min-height: 100vh; place-items: center; color: var(--sp-text-muted); }

.ww-topbar {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto minmax(260px, 1fr);
  align-items: center;
  min-height: 64px;
  padding: 0 28px;
  border-bottom: 1px solid var(--sp-border);
  background: color-mix(in srgb, var(--sp-surface) 88%, transparent);
  backdrop-filter: blur(14px);
}
.ww-back { color: var(--sp-text-muted); font-size: 13px; font-weight: 700; text-decoration: none; }
.ww-back:hover { color: var(--sp-text); }
.ww-topbar__brand { display: flex; align-items: center; gap: 9px; font-size: 16px; white-space: nowrap; }
.ww-topbar__brand span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: var(--ww-accent-soft); font-size: 19px; }
.ww-topbar__account { display: flex; min-width: 0; align-items: center; justify-content: flex-end; gap: 10px; }

.ww-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
  gap: 16px;
  width: min(1320px, calc(100% - 32px));
  margin: 0 auto;
  padding: 20px 0 32px;
  box-sizing: border-box;
}
.ww-main { display: flex; min-width: 0; flex-direction: column; gap: 12px; }

/* Banner pha + đồng hồ */
.ww-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border: 1px solid color-mix(in srgb, var(--ww-accent) 45%, var(--sp-border));
  border-radius: var(--sp-radius-lg);
  background: linear-gradient(120deg, var(--ww-accent-soft), transparent 70%), var(--sp-surface);
  box-shadow: var(--sp-shadow);
}
.ww-banner__icon { font-size: 34px; line-height: 1; }
.ww-banner strong { display: block; font-size: 20px; letter-spacing: -0.02em; }
.ww-banner small { color: var(--sp-text-muted); font-size: 13px; }
.ww-banner__clock {
  margin-left: auto;
  padding: 6px 14px;
  border-radius: var(--sp-radius-pill);
  background: var(--sp-surface-2);
  font: 800 22px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}
.ww-banner__clock.is-urgent { color: #fff; background: var(--sp-red); animation: ww-pulse 1s ease-in-out infinite; }
@keyframes ww-pulse { 50% { transform: scale(1.06); } }

/* Vai của tôi */
.ww-myrole {
  display: flex;
  gap: 14px;
  padding: 14px 18px;
  border: 1px dashed var(--sp-border-strong);
  border-radius: var(--sp-radius-lg);
  background: var(--sp-surface);
}
.ww-myrole.is-wolf { border-color: color-mix(in srgb, var(--ww-wolf) 60%, transparent); background: linear-gradient(120deg, rgba(217, 72, 15, 0.1), transparent 60%), var(--sp-surface); }
.ww-myrole.is-dead { opacity: 0.7; filter: grayscale(0.6); }
.ww-myrole__emoji { font-size: 40px; line-height: 1; }
.ww-myrole__eyebrow { color: var(--sp-text-faint); font-size: 10px; font-weight: 800; letter-spacing: 0.12em; }
.ww-myrole strong { display: block; font-size: 18px; }
.ww-myrole p { margin: 2px 0 0; color: var(--sp-text-muted); font-size: 13px; line-height: 1.45; }
.ww-myrole .ww-myrole__extra { color: var(--sp-text); font-weight: 700; }

/* Thanh hành động */
.ww-actions { position: relative; gap: 10px; padding: 14px 18px; }
.ww-actions p { margin: 0; font-size: 14px; line-height: 1.5; }
.ww-actions em { color: var(--ww-accent); font-style: normal; font-weight: 800; }
.ww-actions__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ww-actions__buttons .is-active { border-color: var(--ww-accent); color: var(--ww-accent); }
.ww-actions__meta { color: var(--sp-text-muted); font-size: 12px; }
.ww-actions__reset { position: absolute; top: 10px; right: 12px; border: 0; background: none; color: var(--sp-text-faint); font-size: 11px; cursor: pointer; }
.ww-actions__reset:hover { color: var(--sp-red); }

/* Lưới người chơi */
.ww-grid__hint { margin: 0 0 8px; color: var(--sp-text-muted); font-size: 13px; }
.ww-grid__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ww-card {
  position: relative;
  display: flex;
  min-height: 150px;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 10px 10px;
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-lg);
  color: var(--sp-text);
  background: var(--sp-surface);
  font: inherit;
  text-align: center;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
button.ww-card { cursor: pointer; }
.ww-card.is-targetable:hover { transform: translateY(-2px); border-color: var(--ww-accent); box-shadow: 0 6px 18px var(--ww-accent-soft); }
.ww-card.is-selected { border-color: var(--ww-accent); box-shadow: 0 0 0 3px var(--ww-accent-soft); }
.ww-card.is-me { background: linear-gradient(180deg, var(--ww-accent-soft), transparent 60%), var(--sp-surface); }
.ww-card.is-wolf .ww-card__role { color: var(--ww-wolf); }
.ww-card.is-dead { opacity: 0.55; filter: grayscale(0.85); }
.ww-card.is-winner { border-color: #f59f00; }
.ww-card__avatar { position: relative; }
.ww-card__tomb, .ww-card__lover { position: absolute; bottom: -4px; font-size: 18px; }
.ww-card__tomb { right: -10px; }
.ww-card__lover { left: -10px; }
.ww-card__name { overflow: hidden; max-width: 100%; margin-top: 4px; font-size: 14px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.ww-card__name small { color: var(--sp-text-muted); font-weight: 600; }
.ww-card__role { color: var(--sp-text-muted); font-size: 12px; font-weight: 700; }
.ww-card__unknown { color: var(--sp-text-faint); font-weight: 600; }
.ww-card__badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: auto; }
.ww-badge { padding: 2px 7px; border-radius: var(--sp-radius-pill); background: var(--sp-surface-2); color: var(--sp-text-muted); font-size: 11px; font-weight: 700; }
.ww-badge--ready { background: var(--sp-green-soft); color: var(--sp-green-press); }
.ww-badge--votes { background: rgba(224, 49, 49, 0.14); color: var(--sp-red); }
.ww-badge--wolf { background: rgba(217, 72, 15, 0.14); color: var(--ww-wolf); }
.ww-badge--win { background: rgba(245, 159, 0, 0.18); color: #b35c00; }

/* Diễn biến + chat */
.ww-feed { position: sticky; top: 16px; height: calc(100vh - 116px); min-height: 460px; overflow: hidden; }
.ww-feed__head { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 16px 10px; border-bottom: 1px solid var(--sp-border); }
.ww-feed__head span { color: var(--sp-text-faint); font-size: 12px; }
.ww-feed__list { flex: 1; min-height: 0; margin: 0; padding: 10px 12px; overflow-y: auto; list-style: none; }
.ww-feed__list > li { margin-bottom: 8px; }
.ww-feed__list p { margin: 0; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.ww-feed__system { padding: 6px 10px; border-left: 3px solid var(--sp-border-strong); border-radius: 0 6px 6px 0; background: var(--sp-surface-2); color: var(--sp-text-muted); }
.ww-feed__system.is-wolves { border-left-color: var(--ww-wolf); }
.ww-feed__system.is-private { border-left-color: var(--ww-private); color: var(--sp-text); background: rgba(12, 133, 153, 0.1); }
.ww-feed__system.is-dead { border-left-color: var(--ww-dead); }
.ww-feed__chat { display: flex; gap: 8px; align-items: flex-start; }
.ww-feed__chat > div { min-width: 0; padding: 6px 10px; border-radius: 10px; background: var(--sp-surface-2); }
.ww-feed__chat.is-mine > div { background: var(--ww-accent-soft); }
.ww-feed__chat.is-wolves > div { background: rgba(217, 72, 15, 0.12); }
.ww-feed__chat.is-dead > div { background: rgba(134, 142, 150, 0.16); font-style: italic; }
.ww-feed__author { margin-bottom: 1px; font-size: 12px; font-weight: 800; }
.ww-feed__tag { display: inline-block; margin: 0 6px 2px 0; padding: 1px 6px; border-radius: var(--sp-radius-pill); font-size: 10px; font-weight: 800; letter-spacing: 0.02em; vertical-align: middle; }
.ww-feed__tag.is-public { background: var(--sp-surface-active); color: var(--sp-text-muted); }
.ww-feed__tag.is-wolves { background: var(--ww-wolf); color: #fff; }
.ww-feed__tag.is-dead { background: var(--ww-dead); color: #fff; }
.ww-feed__tag.is-private { background: var(--ww-private); color: #fff; }
.ww-feed__empty { color: var(--sp-text-faint); font-size: 13px; text-align: center; }
.ww-feed__form { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--sp-border); }
.ww-feed__form .ww-feed__tag { margin: 0; flex-shrink: 0; }
.ww-feed__form input {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-pill);
  outline: none;
  color: var(--sp-text);
  background: var(--sp-surface-2);
  font: inherit;
  font-size: 13px;
}
.ww-feed__form input:focus { border-color: var(--ww-accent); }
.ww-feed__form input:disabled { cursor: not-allowed; opacity: 0.7; }

/* Modal luật */
.ww-rules__flow { margin: 0 0 12px; padding-left: 18px; line-height: 1.6; }
.ww-rules__flow li { margin-bottom: 6px; }
.ww-rules__note { padding: 8px 12px; border-radius: 8px; background: var(--sp-surface-2); font-size: 13px; }
.ww-rules__roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ww-rules__role { display: flex; gap: 10px; padding: 10px; border: 1px solid var(--sp-border); border-radius: 10px; }
.ww-rules__role.is-wolf { border-color: rgba(217, 72, 15, 0.45); }
.ww-rules__role.is-tanner, .ww-rules__role.is-killer { border-style: dashed; }
.ww-rules__emoji { font-size: 26px; line-height: 1; }
.ww-rules__role h4 { margin: 0; font-size: 14px; }
.ww-rules__role h4 small { margin-left: 4px; color: var(--sp-text-faint); font-weight: 600; }
.ww-rules__role p { margin: 2px 0 0; color: var(--sp-text-muted); font-size: 12px; line-height: 1.45; }
.ww-rules__credit { margin: 12px 0 0; color: var(--sp-text-faint); font-size: 11px; }

@media (max-width: 1180px) {
  .ww-topbar { grid-template-columns: auto 1fr; }
  .ww-topbar__brand { display: none; }
}

@media (max-width: 960px) {
  .ww-stage { grid-template-columns: minmax(0, 1fr); }
  .ww-feed { position: static; height: 520px; }
  .ww-rules__roles { grid-template-columns: minmax(0, 1fr); }
  .ww-topbar { grid-template-columns: auto 1fr; gap: 10px; padding: 10px 16px; }
  .ww-topbar__brand { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ww-page, .ww-card, .ww-banner__clock.is-urgent { transition: none; animation: none; }
}

/* Modal lịch sử ván */
.ww-history__empty { margin: 20px 0; color: var(--sp-text-muted); text-align: center; }
.ww-history__game { margin-bottom: 10px; border: 1px solid var(--sp-border); border-radius: 12px; background: var(--sp-surface); overflow: hidden; }
.ww-history__game.is-wolf { border-left: 4px solid #d9480f; }
.ww-history__game.is-village { border-left: 4px solid #2f9e44; }
.ww-history__game.is-tanner, .ww-history__game.is-killer, .ww-history__game.is-lovers { border-left: 4px solid #ae3ec9; }
.ww-history__game summary { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none; }
.ww-history__game summary::-webkit-details-marker { display: none; }
.ww-history__game summary::after { content: '▾'; margin-left: 8px; color: var(--sp-text-faint); transition: transform 0.15s ease; }
.ww-history__game:not([open]) summary::after { transform: rotate(-90deg); }
.ww-history__icon { font-size: 26px; line-height: 1; }
.ww-history__headline { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.ww-history__headline small { color: var(--sp-text-muted); font-size: 12px; }
.ww-history__me { padding: 3px 10px; border-radius: 999px; background: var(--sp-surface-2); color: var(--sp-text-muted); font-size: 12px; font-weight: 700; white-space: nowrap; }
.ww-history__me.is-win { background: rgba(245, 159, 0, 0.18); color: #b35c00; }
.ww-history__players { margin: 0; padding: 0 14px 12px; list-style: none; }
.ww-history__players li {
  display: grid;
  grid-template-columns: 26px minmax(90px, 1.1fr) minmax(120px, 1.3fr) minmax(130px, 1.4fr) 22px;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 13px;
}
.ww-history__players li:nth-child(odd) { background: var(--sp-surface-2); }
.ww-history__players li.is-me { box-shadow: inset 0 0 0 2px rgba(108, 92, 231, 0.45); }
.ww-history__players li.is-dead .ww-history__name { color: var(--sp-text-muted); }
.ww-history__name { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.ww-history__role { font-weight: 700; }
.ww-history__role.is-wolf { color: #d9480f; }
.ww-history__role small { color: var(--sp-text-faint); font-weight: 600; }
.ww-history__fate { color: var(--sp-text-muted); font-size: 12px; }
.ww-history__result { text-align: center; }

/* Vai mới: tà giáo, phóng hoả, kỹ năng ban ngày */
.ww-page { --ww-cult: #862e9c; }
.ww-badge--cult { background: rgba(134, 46, 156, 0.14); color: var(--ww-cult); }
.ww-badge--fuel { background: rgba(232, 89, 12, 0.14); color: #d9480f; }
.ww-feed__tag.is-cult { background: var(--ww-cult); color: #fff; }
.ww-feed__system.is-cult { border-left-color: var(--ww-cult); }
.ww-feed__chat.is-cult > div { background: rgba(134, 46, 156, 0.12); }
.ww-myrole.is-cult { border-color: color-mix(in srgb, var(--ww-cult) 60%, transparent); }
.ww-rules__role.is-cult, .ww-rules__role.is-arsonist, .ww-rules__role.is-neutral { border-style: dashed; }
.ww-actions__ability { border-color: var(--ww-accent); }
.ww-rules__group { margin: 16px 0 8px; font-size: 15px; }
.ww-rules__group small { color: var(--sp-text-faint); font-weight: 600; }
.ww-rules__block { margin-bottom: 4px; }
.ww-rules__list { margin: 0 0 8px; padding-left: 18px; font-size: 13px; line-height: 1.6; }
.ww-rules__list li { margin-bottom: 4px; }
.ww-rules__list ul { margin: 4px 0; padding-left: 18px; }
.ww-rules__role .ww-rules__appears { margin-top: 5px; color: var(--sp-text-faint); font-size: 11px; font-style: italic; }
.ww-actions .ww-actions__hint { color: var(--sp-text-muted); font-size: 13px; }

/* Voice dùng chung với workspace, nằm trong luồng trang khi vào route trực tiếp. */
.ww-mobile-nav { display: none; }
.ww-voice-wrap { width: min(1320px, calc(100% - 32px)); margin: 16px auto 0; }
.ww-page .ww-voice {
  position: static; width: auto; display: grid; gap: 8px; padding: 14px 16px;
  border: 1px solid var(--sp-border); border-radius: var(--sp-radius-lg);
  background: var(--sp-surface); color: var(--sp-text); box-shadow: var(--sp-shadow);
}
.ww-page .ww-voice small { color: var(--sp-text-muted); }
.ww-page .ww-voice > div { display: flex; flex-wrap: wrap; gap: 8px; }
.ww-page .ww-voice button {
  min-height: 44px; padding: 10px 16px; border: 0; border-radius: var(--sp-radius-pill);
  background: var(--sp-green); color: #fff; font: inherit; font-weight: 700; cursor: pointer;
}
.ww-page .ww-voice button:disabled { opacity: 0.5; cursor: default; }
.ww-page button:focus-visible { outline: 3px solid var(--ww-accent); outline-offset: 3px; }

@media (max-width: 600px) {
  .ww-page { min-height: 100svh; }
  .ww-topbar { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px; }
  .ww-topbar__account { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
  .ww-topbar__account .sp-coin { justify-self: start; }
  .ww-topbar__account .sp-user-chip { min-width: 0; max-width: 100%; }
  .ww-topbar__account .sp-user-chip .core-name-wrap { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ww-page .sp-btn { min-height: 44px; white-space: normal; }
  .ww-voice-wrap { width: calc(100% - 24px); margin-top: 12px; }
  .ww-mobile-nav {
    position: sticky; top: 0; z-index: 6; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px; padding: 8px 12px; background: var(--sp-bg); border-bottom: 1px solid var(--sp-border);
  }
  .ww-mobile-nav button {
    min-height: 44px; padding: 8px; border: 1px solid var(--sp-border); border-radius: 12px;
    color: var(--sp-text); background: var(--sp-surface); font: inherit; font-size: 13px; font-weight: 700;
  }
  .ww-mobile-nav button[aria-pressed='true'] { border-color: var(--ww-accent); background: var(--ww-accent-soft); }
  .ww-stage { width: calc(100% - 24px); gap: 12px; padding: 12px 0 max(16px, env(safe-area-inset-bottom)); }
  .ww-stage--game > .ww-feed, .ww-stage--chat > .ww-main { display: none; }
  .ww-page .ww-feed { height: 65vh; height: 65dvh; min-height: 280px; }
  .ww-feed__form { flex-wrap: wrap; padding: 10px; }
  .ww-feed__form > .ww-feed__tag { flex-basis: 100%; width: fit-content; }
  .ww-feed__form input { font-size: 16px; min-height: 44px; box-sizing: border-box; }
  .ww-feed__head { padding: 12px; }
  .ww-banner { gap: 8px; padding: 12px; }
  .ww-banner > div { min-width: 0; }
  .ww-banner__icon { font-size: 28px; }
  .ww-banner strong { font-size: 17px; }
  .ww-banner__clock { flex-shrink: 0; font-size: 18px; padding: 8px; }
  .ww-myrole { padding: 12px; gap: 10px; }
  .ww-myrole > div { min-width: 0; overflow-wrap: anywhere; }
  .ww-myrole__emoji { font-size: 32px; }
  .ww-actions { padding: 12px; }
  .ww-actions__reset { position: static; min-height: 44px; text-align: left; }
  .ww-grid__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ww-card { min-width: 0; min-height: 138px; padding: 12px 6px 8px; }
  .ww-card__role { overflow-wrap: anywhere; }
  .ww-history__game summary { flex-wrap: wrap; gap: 8px; padding: 10px; }
  .ww-history__headline { flex-basis: calc(100% - 70px); }
  .ww-history__players { padding: 0 6px 8px; }
  .ww-history__players li { position: relative; grid-template-columns: 26px minmax(0, 1fr) 22px; gap: 4px 8px; padding: 8px; }
  .ww-history__role, .ww-history__fate { grid-column: 2; overflow-wrap: anywhere; }
  .ww-history__result { position: absolute; top: 8px; right: 8px; }
  .ww-rules__role { min-width: 0; }
  .ww-rules__role > div { min-width: 0; overflow-wrap: anywhere; }
  .ww-badge { max-width: 100%; overflow-wrap: anywhere; }
}
.shift-shell { min-height: 100vh; background: var(--sp-bg); color: var(--sp-text); font-family: inherit; }
.shift-shell main { max-width: 1600px; padding: 18px 24px 36px; margin: auto; }
.shift-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 24px; border-bottom: 1px solid var(--sp-border); background: var(--sp-surface); }
.shift-brand { color: var(--sp-text); text-decoration: none; }
.shift-shell h2 { font-size: 20px; margin: 0 0 12px; }
.shift-shell p { line-height: 1.6; }
.shift-shell small { display: block; color: var(--sp-text-muted); line-height: 1.6; }
.shift-shell input { display: block; width: 100%; border: 1px solid var(--sp-border); background: var(--sp-surface); color: var(--sp-text); border-radius: 9px; padding: 10px 12px; margin: 8px 0 14px; }
.shift-shell button { cursor: pointer; }
.shift-shell button:disabled { cursor: not-allowed; opacity: .45; }
.shift-shell button:focus-visible, .shift-shell input:focus-visible, .shift-canvas canvas:focus-visible { outline: 3px solid #18bcb5; outline-offset: 3px; }
.shift-browser { padding: 32px; max-width: 1080px; margin: 20px auto; }
.shift-hero { border-radius: 16px; background: #15364b; color: #fff; padding: 30px; margin-bottom: 26px; }
.shift-hero h1 { color: #fff; font-size: 38px; margin: 8px 0; }
.shift-eyebrow { font-size: 12px; letter-spacing: 2px; color: #77ded4; }
.shift-browser-columns { display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px; }
.shift-browser form { border-top: 1px solid var(--sp-border); margin-top: 22px; padding-top: 22px; }
.shift-room-row { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--sp-border); }
.shift-shell .shift-phase-bar { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 14px 20px; gap: 20px; margin-bottom: 14px; }
.shift-timer { font-variant-numeric: tabular-nums; font-size: 24px; font-weight: 700; }
.shift-layout { display: grid; grid-template-columns: minmax(600px, 1fr) 320px; gap: 16px; align-items: start; }
.shift-stage { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--sp-border); background: #f4efdf; }
.shift-canvas { height: min(76vh, 850px); min-height: 550px; width: 100%; }
.shift-canvas canvas { display: block; }
.shift-location { position: absolute; left: 14px; top: 14px; background: #193349ee; color: #fff; border-radius: 8px; padding: 7px 12px; font-size: 12px; pointer-events: none; }
.shift-actions { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; width: max-content; max-width: 96%; padding: 10px; border-radius: 12px; background: var(--sp-surface); box-shadow: 0 4px 18px #0003; }
.shift-actions kbd { margin-right: 5px; }
.shift-danger { color: #d84659; }
.shift-rail { padding: 20px; max-height: 85vh; overflow: auto; }
.shift-roster { margin: 16px 0; }
.shift-roster > div { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.shift-suit-portrait { display: block; width: 52px; height: 52px; flex-shrink: 0; }
.shift-role { border-left: 4px solid #18bcb5; padding-left: 14px; margin-bottom: 22px; }
.shift-role.is-saboteur { border-color: #ed7884; }
.shift-task-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--sp-border); }
.shift-task-row.is-done { opacity: .55; }
.shift-shell progress { display: block; width: 100%; height: 10px; accent-color: #18bcb5; margin: 10px 0 16px; }
.shift-voice { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--sp-border); }
.shift-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.shift-rules { margin-top: 22px; font-size: 12px; }
.shift-rules summary, .shift-map-key summary { cursor: pointer; font-weight: 600; }
.shift-map-key { margin-top: 18px; }
.shift-map-key > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 12px; }
.shift-map-key span { padding: 8px 4px; font-size: 10px; text-align: center; border: 1px solid var(--sp-border); border-radius: 5px; }
.shift-map-key .is-current { background: #18bcb533; }
.shift-alert { border: 1px solid #e5b85a; background: #f8cc621c; padding: 12px 16px; margin-bottom: 12px; border-radius: 10px; }
.shift-alert button { margin-left: 8px; }
.shift-modal-backdrop { position: fixed; inset: 0; background: #081725b8; display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 24px; }
.shift-modal, .shift-meeting { background: var(--sp-surface); color: var(--sp-text); width: min(700px, 96vw); padding: 28px; border-radius: 18px; max-height: 85vh; overflow: auto; }
.shift-meeting { width: min(800px, 96vw); }
.shift-vote-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 16px 0; }
.shift-player-choice { background: var(--sp-surface); color: var(--sp-text); border: 1px solid var(--sp-border); border-radius: 10px; padding: 12px 8px; display: flex; align-items: center; flex-direction: column; }
.shift-player-choice.is-dead { filter: grayscale(1); opacity: .45; }
.shift-chat-log { max-height: 170px; overflow: auto; background: var(--sp-bg); border-radius: 10px; padding: 8px 12px; margin-top: 14px; }
.shift-chat-log p { margin: 5px 0; overflow-wrap: anywhere; }
.shift-chat-form { display: flex; gap: 8px; margin-top: 12px; }
.shift-chat-form input { margin: 0; }
.shift-code { letter-spacing: 8px; font-size: 24px; }
.shift-wires { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.shift-wires > div { display: grid; gap: 12px; }
.shift-wire { border: 3px solid currentColor; border-radius: 8px; padding: 10px; background: var(--sp-surface); font-weight: 700; }
.wire-0 { color: #d95369; }.wire-1 { color: #5687d5; }.wire-2 { color: #b88313; }.wire-3 { color: #33936d; }
.shift-wire.is-selected { outline: 3px solid #18bcb5; outline-offset: 3px; }
.shift-result { margin-top: 20px; }
.shift-shell.is-meeting .shift-voice { position: fixed; right: 20px; bottom: 20px; width: 270px; z-index: 1100; padding: 18px; margin: 0; background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: 12px; box-shadow: 0 4px 24px #0004; }
@media (max-width: 1000px) {
  .shift-layout { grid-template-columns: 1fr; }.shift-rail { max-height: none; }
  .shift-browser-columns { grid-template-columns: 1fr; }.shift-shell main { padding: 12px; }
}
.shift-task-game { width: 100%; aspect-ratio: 14 / 9; background: #142b3e; border-radius: 12px; overflow: hidden; }
.shift-task-game canvas { display: block; }

.shift-match-screen { min-height: 520px; padding: 48px 32px; text-align: center; background: radial-gradient(ellipse at top, #18bcb522, transparent 65%), var(--sp-surface); }
.shift-match-screen h1 { font-size: clamp(32px, 4vw, 56px); margin: 16px 0; }
.shift-match-screen.is-victory h1 { color: #18bcb5; }
.shift-match-screen.is-defeat h1 { color: #ed7884; }
.shift-lineup { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin: 36px auto; }
.shift-lineup-player { display: flex; align-items: center; flex-direction: column; gap: 10px; width: 160px; padding: 24px 12px; border: 1px solid var(--sp-border); border-radius: 16px; background: var(--sp-bg); }
.shift-lineup-player.is-ready { border-color: #18bcb5; }
.shift-lineup-player .shift-suit-portrait { width: 80px; height: 80px; }
.shift-lineup-player strong { overflow-wrap: anywhere; }
.shift-lineup-player small { color: var(--sp-text-secondary); }
.shift-match-screen .shift-buttons { justify-content: center; }
/* Cờ Thú — tông rừng xanh, dùng chung kiểu nút/khối với sp-* nhưng có palette riêng. */
.jg-page {
  --jg-bg: #eef6e9;
  --jg-bg-2: #dcefd2;
  --jg-surface: #ffffff;
  --jg-surface-2: #f6faf3;
  --jg-border: #d7e6cf;
  --jg-text: #1c2b1a;
  --jg-muted: #5e7259;
  --jg-faint: #8ea488;
  --jg-green: #2f9e44;
  --jg-green-2: #40c057;
  --jg-gold: #f59f00;
  --jg-red: #e5484d;
  --jg-blue: #3e7bfa;
  --jg-shadow: 0 10px 30px rgba(40, 70, 30, 0.12);
  min-height: 100vh;
  background:
    radial-gradient(1200px 500px at 15% -10%, #ffffff 0%, transparent 60%),
    linear-gradient(180deg, var(--jg-bg) 0%, var(--jg-bg-2) 100%);
  color: var(--jg-text);
  font-family: inherit;
}
:root[data-theme='dark'] .jg-page {
  --jg-bg: #0f1a12;
  --jg-bg-2: #0a120c;
  --jg-surface: #16241a;
  --jg-surface-2: #1b2c20;
  --jg-border: #27402d;
  --jg-text: #e9f5e6;
  --jg-muted: #a3bba0;
  --jg-faint: #6f8a6b;
  --jg-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  background:
    radial-gradient(1200px 500px at 15% -10%, #1e3a24 0%, transparent 60%),
    linear-gradient(180deg, var(--jg-bg) 0%, var(--jg-bg-2) 100%);
}
.jg-page.is-game { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }

/* ---------- Thanh trên ---------- */
.jg-top {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--jg-border);
  background: color-mix(in srgb, var(--jg-surface) 80%, transparent);
  backdrop-filter: blur(8px);
  position: relative;
  z-index: 5;
}
.jg-top__back { color: var(--jg-muted); font-weight: 600; text-decoration: none; }
.jg-top__back:hover { color: var(--jg-text); }
.jg-top__title { font-weight: 800; font-size: 18px; letter-spacing: 0.02em; }
.jg-top__right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* ---------- Nút ---------- */
.jg-btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease, box-shadow 0.15s ease, opacity 0.15s;
  color: var(--jg-text);
  background: var(--jg-surface-2);
}
.jg-btn:hover:not(:disabled) { transform: translateY(-1px); }
.jg-btn:active:not(:disabled) { transform: translateY(0) scale(0.98); }
.jg-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.jg-btn--primary { background: var(--jg-green); color: #fff; box-shadow: 0 4px 14px rgba(47, 158, 68, 0.35); }
.jg-btn--primary:hover:not(:disabled) { background: var(--jg-green-2); }
.jg-btn--practice { background: linear-gradient(135deg, #ffb703, #fb8500); color: #2b1600; box-shadow: 0 4px 14px rgba(251, 133, 0, 0.35); }
.jg-btn--ghost { background: transparent; border-color: var(--jg-border); }
.jg-btn--ghost:hover:not(:disabled) { background: var(--jg-surface-2); }
.jg-btn--danger { background: transparent; border-color: color-mix(in srgb, var(--jg-red) 50%, transparent); color: var(--jg-red); }
.jg-btn--danger:hover:not(:disabled) { background: color-mix(in srgb, var(--jg-red) 10%, transparent); }
.jg-btn--small { padding: 6px 14px; font-size: 13px; }

/* ---------- Sảnh ---------- */
.jg-lobby { max-width: 1120px; margin: 0 auto; padding: 28px 24px 60px; }
.jg-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 32px;
  border-radius: 20px;
  background:
    radial-gradient(400px 200px at 85% 30%, rgba(255, 255, 255, 0.35), transparent 70%),
    linear-gradient(120deg, #2f9e44 0%, #66a80f 55%, #94d82d 100%);
  color: #fff;
  box-shadow: var(--jg-shadow);
  overflow: hidden;
}
.jg-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 0.14em; opacity: 0.85; }
.jg-hero h1 { margin: 6px 0 8px; font-size: 44px; line-height: 1; font-weight: 900; color: #fff; }
.jg-hero p { margin: 0; max-width: 520px; font-size: 15px; opacity: 0.95; }
.jg-hero__pets { display: flex; align-items: flex-end; gap: 4px; }
.jg-hero__pets img {
  width: 92px;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.2));
  animation: jg-bob 2.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.25s);
}
.jg-hero__pets img.is-elephant { width: 116px; }
.jg-hero__pets img.is-rat { width: 70px; }
@keyframes jg-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.jg-resume { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.jg-resume__item {
  flex: 1;
  min-width: 260px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--jg-gold) 50%, transparent);
  background: color-mix(in srgb, var(--jg-gold) 12%, var(--jg-surface));
  color: var(--jg-text);
  cursor: pointer;
  font: inherit;
}
.jg-resume__item span { color: var(--jg-gold); font-weight: 700; }
.jg-resume__item.is-practice { border-color: var(--jg-border); background: var(--jg-surface); }

.jg-lobby__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; margin-top: 18px; }
.jg-card {
  background: var(--jg-surface);
  border: 1px solid var(--jg-border);
  border-radius: 18px;
  padding: 22px;
  box-shadow: var(--jg-shadow);
}
.jg-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.jg-card h2 { margin: 0; font-size: 22px; font-weight: 800; color: var(--jg-text); }
.jg-card h3 { margin: 22px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--jg-muted); }
.jg-card__desc { color: var(--jg-muted); margin: 8px 0 16px; }
.jg-pill {
  font-size: 12px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--jg-gold) 18%, transparent);
  color: #b26a00;
  white-space: nowrap;
}
:root[data-theme='dark'] .jg-pill { color: #ffc94d; }
.jg-pill.is-free { background: color-mix(in srgb, var(--jg-green) 16%, transparent); color: var(--jg-green); }
.jg-empty { color: var(--jg-faint); font-size: 14px; margin: 4px 0; }
.jg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.jg-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--jg-surface-2);
  border: 1px solid var(--jg-border);
}
.jg-list li .jg-btn { margin-left: auto; }
.jg-list__meta { color: var(--jg-muted); font-size: 13px; }
.jg-list__vs { color: var(--jg-faint); font-size: 12px; font-weight: 700; }
.jg-chip { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.jg-chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--jg-green-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--jg-green-2) 25%, transparent); }

.jg-levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.jg-level {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px;
  border-radius: 12px;
  border: 2px solid var(--jg-border);
  background: var(--jg-surface-2);
  color: var(--jg-text);
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: border-color 0.15s, transform 0.12s;
}
.jg-level:hover { transform: translateY(-1px); }
.jg-level strong { font-size: 16px; }
.jg-level small { color: var(--jg-muted); font-size: 12px; line-height: 1.35; }
.jg-level.is-active.is-easy { border-color: #40c057; }
.jg-level.is-active.is-medium { border-color: #fab005; }
.jg-level.is-active.is-hard { border-color: #fa5252; }
.jg-level.is-active { background: var(--jg-surface); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); }

.jg-segment {
  display: flex;
  margin: 14px 0 16px;
  padding: 4px;
  border-radius: 999px;
  background: var(--jg-surface-2);
  border: 1px solid var(--jg-border);
}
.jg-segment button {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--jg-muted);
  font: inherit;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 6px;
  border-radius: 999px;
  cursor: pointer;
}
.jg-segment button.is-active { background: var(--jg-surface); color: var(--jg-text); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }

.jg-ranks { display: flex; justify-content: space-between; margin-top: 22px; padding-top: 16px; border-top: 1px dashed var(--jg-border); }
.jg-rank { position: relative; display: flex; flex-direction: column; align-items: center; }
.jg-rank img { width: 40px; height: 40px; object-fit: contain; }
.jg-rank b {
  position: absolute;
  right: -4px;
  bottom: -2px;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--jg-text);
  color: var(--jg-surface);
  font-size: 11px;
  display: grid;
  place-items: center;
}

/* Báo/Sói/Chuột mượn ảnh của Hổ/Cáo/Koala: đổi màu bằng filter cho khớp model 3D. */
:is(.jg-page, .jg-rules) :is(img.is-wolf, .is-wolf img) { filter: grayscale(1) brightness(1.05); }
:is(.jg-page, .jg-rules) :is(img.is-leopard, .is-leopard img) { filter: hue-rotate(18deg) saturate(1.3) brightness(1.08); }
:is(.jg-page, .jg-rules) :is(img.is-rat, .is-rat img) { filter: sepia(0.35) saturate(0.9); }

/* ---------- Ván cờ ---------- */
.jg-game { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 340px; }
.jg-stage { position: relative; min-height: 0; }
.jg-stage canvas { display: block; }
.jg-stage__hint {
  position: absolute;
  left: 50%;
  top: 58px;
  white-space: nowrap;
  transform: translateX(-50%);
  margin: 0;
  font-size: 12px;
  color: rgba(20, 40, 20, 0.6);
  background: rgba(255, 255, 255, 0.6);
  padding: 4px 12px;
  border-radius: 999px;
  pointer-events: none;
}
.jg-turn {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: #1c2b1a;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  pointer-events: none;
  transition: background 0.2s, color 0.2s;
  z-index: 45;
}
.jg-turn.is-mine { background: #2f9e44; color: #fff; animation: jg-pulse 1.8s ease-in-out infinite; }
@keyframes jg-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(47, 158, 68, 0.45); } 50% { box-shadow: 0 0 0 10px rgba(47, 158, 68, 0); } }

.jg-offer {
  position: absolute;
  top: 96px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--jg-surface);
  border: 1px solid var(--jg-border);
  box-shadow: var(--jg-shadow);
  font-weight: 700;
  z-index: 45;
}

.jg-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(180deg, #d9f0ff, #c8ecc0);
  color: #2b4a2a;
  z-index: 60;
}
.jg-loading__bar { width: 240px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.7); overflow: hidden; }
.jg-loading__bar span { display: block; height: 100%; background: var(--jg-green); transition: width 0.2s; }

.jg-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-left: 1px solid var(--jg-border);
  background: var(--jg-surface);
  min-height: 0;
}
.jg-side__log { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.jg-side__log h3 { margin: 4px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--jg-muted); }
.jg-side__log h3 small { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--jg-faint); }
.jg-side__actions { display: flex; gap: 8px; }
.jg-side__actions .jg-btn { flex: 1; }

.jg-player {
  border-radius: 14px;
  padding: 12px;
  border: 2px solid var(--jg-border);
  background: var(--jg-surface-2);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.jg-player.is-red { --side: var(--jg-red); }
.jg-player.is-blue { --side: var(--jg-blue); }
.jg-player.is-turn { border-color: var(--side); box-shadow: 0 0 0 4px color-mix(in srgb, var(--side) 18%, transparent); }
.jg-player__id { display: flex; align-items: center; gap: 10px; }
.jg-player__id strong { display: block; font-size: 15px; }
.jg-player__id em { font-style: normal; color: var(--jg-muted); font-weight: 600; }
.jg-player__id small { color: var(--jg-muted); }
.jg-player__swatch { width: 14px; height: 14px; border-radius: 50%; background: var(--side); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--side) 25%, transparent); }
.jg-clock {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 22px;
  padding: 4px 10px;
  border-radius: 10px;
  background: var(--jg-surface);
  color: var(--jg-muted);
}
.jg-clock.is-running { color: var(--jg-text); background: color-mix(in srgb, var(--side) 14%, var(--jg-surface)); }
.jg-clock.is-low.is-running { color: #fff; background: var(--jg-red); animation: jg-blink 1s steps(2) infinite; }
@keyframes jg-blink { 50% { opacity: 0.75; } }
.jg-player__away { margin: 8px 0 0; font-size: 12px; font-weight: 700; color: var(--jg-red); }
.jg-player__lost { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 10px; min-height: 28px; align-items: center; }
.jg-player__lost img { width: 28px; height: 28px; object-fit: contain; opacity: 0.85; }
.jg-player__none { font-size: 12px; color: var(--jg-faint); }

.jg-log { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.jg-log li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 8px;
  border-left: 3px solid var(--side);
  background: var(--jg-surface-2);
}
.jg-log li.is-red { --side: var(--jg-red); }
.jg-log li.is-blue { --side: var(--jg-blue); }
.jg-log img { width: 20px; height: 20px; object-fit: contain; }
.jg-log__ply { color: var(--jg-faint); font-variant-numeric: tabular-nums; min-width: 22px; }
.jg-log b { color: var(--jg-red); }

/* ---------- Kết quả ---------- */
.jg-result {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, 90%);
  padding: 28px 24px 22px;
  text-align: center;
  border-radius: 22px;
  background: var(--jg-surface);
  border: 1px solid var(--jg-border);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
  animation: jg-pop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) both;
  animation-delay: 1s;
  /* Trên các nhãn drei Html (zIndexRange tối đa 40) */
  z-index: 50;
}
@keyframes jg-pop { from { opacity: 0; transform: translate(-50%, -40%) scale(0.85); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.jg-result__icon { font-size: 52px; display: block; }
.jg-result h2 { margin: 6px 0 4px; font-size: 30px; font-weight: 900; color: var(--jg-text); }
.jg-result.is-win h2 { color: var(--jg-green); }
.jg-result.is-lose h2 { color: var(--jg-red); }
.jg-result p { margin: 0; color: var(--jg-muted); }
.jg-result__coins { margin-top: 10px !important; font-weight: 800; color: var(--jg-text) !important; font-size: 18px; }
.jg-result__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; }

.jg-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 40px; text-align: center; color: var(--jg-muted); }
.jg-state h2 { margin: 0; color: var(--jg-text); font-size: 28px; font-weight: 900; }
.jg-waiting p { max-width: 460px; margin: 0; }
.jg-waiting__hint { font-size: 13px; color: var(--jg-faint); }
.jg-waiting__pets { display: flex; gap: 8px; margin-bottom: 8px; }
.jg-waiting__pets img { width: 72px; animation: jg-bob 1.4s ease-in-out infinite; animation-delay: calc(var(--i) * 0.2s); }

/* ---------- Nhãn trong cảnh 3D (drei Html) ---------- */
.jg-badge {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font: 800 13px/1 system-ui, sans-serif;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  user-select: none;
  white-space: nowrap;
}
.jg-badge.is-red { background: #e5484d; }
.jg-badge.is-blue { background: #3e7bfa; }
.jg-badge.is-weak { background: #495057; color: #ffd43b; }
.jg-badge s { opacity: 0.6; margin-right: 3px; font-weight: 600; }
.jg-float {
  font: 900 26px/1 system-ui, sans-serif;
  white-space: nowrap;
  color: #fff;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.25);
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.25), 0 8px 18px rgba(0, 0, 0, 0.3);
  user-select: none;
}
.jg-float.is-gold { color: #ffd43b; }
.jg-float.is-warn { color: #ffa8a8; font-size: 20px; }

/* ---------- Modal luật ---------- */
.jg-rules section + section { margin-top: 14px; }
.jg-rules h4 { margin: 0 0 6px; font-weight: 800; }
.jg-rules ul { margin: 0; padding-left: 18px; }
.jg-rules li + li { margin-top: 4px; }
.jg-rules__pieces { display: flex; flex-wrap: wrap; gap: 8px; }
.jg-rules__piece { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; border: 1px solid rgba(0, 0, 0, 0.08); }
.jg-rules__piece img { width: 28px; height: 28px; object-fit: contain; }

@media (max-width: 900px) {
  .jg-lobby__grid { grid-template-columns: 1fr; }
  .jg-hero__pets { display: none; }
  .jg-game { grid-template-columns: 1fr; grid-template-rows: minmax(360px, 1fr) auto; }
  .jg-page.is-game { height: auto; overflow: auto; }
  .jg-side { border-left: 0; border-top: 1px solid var(--jg-border); }
}

/* Thẻ Mưa lì xì (toàn cục, cố định góc trên phải) che thẻ đối thủ ở màn chơi: dời xuống góc dưới trái khung bàn. */
body:has(.jg-page.is-game) .lr-dock { top: auto; bottom: 44px; right: auto; left: 16px; }

/* ---------- HUD người chơi nổi trên khung 3D (gọn: 2 hàng) ---------- */
.jg-hud {
  --side: var(--jg-red);
  position: absolute;
  z-index: 46;
  box-sizing: border-box;
  width: 212px;
  padding: 8px 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--jg-surface) 86%, transparent);
  backdrop-filter: blur(8px);
  border: 2px solid color-mix(in srgb, var(--side) 25%, transparent);
  box-shadow: 0 6px 18px rgba(20, 40, 20, 0.16);
  color: var(--jg-text);
  pointer-events: none;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.jg-hud.is-blue { --side: var(--jg-blue); }
.jg-hud.is-top-left { top: 12px; left: 12px; }
.jg-hud.is-bottom-right { right: 12px; bottom: 12px; }
.jg-hud.is-turn { border-color: var(--side); box-shadow: 0 0 0 3px color-mix(in srgb, var(--side) 22%, transparent), 0 8px 20px rgba(20, 40, 20, 0.2); }
.jg-hud.is-low { animation: jg-hud-alarm 1s ease-in-out infinite; }
@keyframes jg-hud-alarm { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--jg-red) 35%, transparent); } }

.jg-hud__row { display: flex; align-items: center; gap: 8px; }
.jg-hud__avatar {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
  color: #fff;
  background: var(--side);
}
.jg-hud__who { min-width: 0; flex: 1; line-height: 1.15; }
.jg-hud__who strong { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jg-hud__tag { font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--side); }
.jg-hud__time { flex: none; font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; color: var(--jg-muted); }
.jg-hud.is-turn .jg-hud__time { color: var(--side); }
.jg-hud.is-low .jg-hud__time { color: var(--jg-red); }

.jg-hud__bar { display: block; height: 3px; margin-top: 6px; border-radius: 2px; background: var(--jg-surface-2); overflow: hidden; }
.jg-hud__bar span { display: block; height: 100%; background: var(--side); transition: width 0.25s linear; }
.jg-hud.is-low .jg-hud__bar span { background: var(--jg-red); }

.jg-hud__foot { display: flex; align-items: center; gap: 6px; margin-top: 6px; min-height: 18px; }
.jg-hud__state {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--jg-muted);
  background: var(--jg-surface-2);
}
.jg-hud__state.is-on { color: #fff; background: var(--side); }
.jg-hud__state i { width: 5px; height: 5px; border-radius: 50%; background: #fff; animation: jg-blink 1s steps(2) infinite; }
.jg-hud__lost { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0; margin-left: auto; }
.jg-hud__lost img { width: 18px; height: 18px; object-fit: contain; margin-left: -3px; }
.jg-hud__away { margin: 5px 0 0; font-size: 11px; font-weight: 800; color: var(--jg-red); }

/* ---------- Thẻ thông tin quân ---------- */
/* Nằm ở đầu cột phải (không nổi trên bàn) để không che các ô đi được. */
.jg-pcard {
  --side: var(--jg-red);
  position: relative;
  flex: none;
  max-height: 58%;
  overflow-y: auto;
  padding: 14px 16px 12px;
  border-radius: 16px;
  background: var(--jg-surface-2);
  border: 1px solid var(--jg-border);
  border-top: 4px solid var(--side);
  color: var(--jg-text);
  animation: jg-pcard-in 0.22s cubic-bezier(0.2, 1.2, 0.4, 1) both;
}
.jg-pcard.is-blue { --side: var(--jg-blue); }
@keyframes jg-pcard-in { from { opacity: 0; transform: translateY(-6px) scale(0.97); } }
.jg-pcard__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: var(--jg-surface-2);
  color: var(--jg-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.jg-pcard__close:hover { color: var(--jg-text); }
.jg-pcard__head { display: flex; align-items: center; gap: 12px; padding-right: 22px; }
.jg-pcard__icon { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--jg-surface-2); }
.jg-pcard__icon img { width: 44px; height: 44px; object-fit: contain; }
.jg-pcard__owner { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; color: var(--side); white-space: nowrap; }
.jg-pcard__head h3 { margin: 0; font-size: 20px; font-weight: 900; color: var(--jg-text); }
.jg-pcard__head p { margin: 0; font-size: 12px; color: var(--jg-muted); }
.jg-pcard__rank {
  margin-left: auto;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 44px;
  padding: 4px 6px;
  border-radius: 12px;
  background: var(--side);
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}
.jg-pcard__rank small { font-size: 9px; letter-spacing: 0.1em; opacity: 0.85; margin-bottom: 2px; }
.jg-pcard__rank.is-weak { background: #495057; color: #ffd43b; }
.jg-pcard__rank s { font-size: 12px; opacity: 0.6; }
.jg-pcard__situation { margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; font-size: 12.5px; line-height: 1.4; font-weight: 600; }
.jg-pcard__situation.is-danger { background: color-mix(in srgb, var(--jg-red) 12%, transparent); color: var(--jg-red); }
.jg-pcard__situation.is-info { background: color-mix(in srgb, var(--jg-blue) 12%, transparent); color: var(--jg-blue); }
.jg-pcard__situation.is-good { background: color-mix(in srgb, var(--jg-green) 12%, transparent); color: var(--jg-green); }
.jg-pcard__facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; margin: 12px 0 0; align-items: start; }
.jg-pcard__facts dt { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--jg-muted); padding-top: 4px; }
.jg-pcard__facts dd { margin: 0; }
.jg-pcard__chips { display: flex; flex-wrap: wrap; gap: 4px; }
.jg-pcard__chips em { color: var(--jg-faint); font-style: normal; }
.jg-pcard__chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px 2px 2px; border-radius: 999px; background: var(--jg-surface-2); border: 1px solid var(--jg-border); font-size: 12px; font-weight: 700; }
.jg-pcard__chip img { width: 18px; height: 18px; object-fit: contain; }
.jg-pcard__abilities { margin: 12px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.45; }
.jg-pcard__abilities li + li { margin-top: 3px; }
.jg-pcard__abilities li.is-general { color: var(--jg-muted); }
.jg-pcard__moves { margin: 10px 0 0; padding-top: 8px; border-top: 1px dashed var(--jg-border); font-size: 12px; font-weight: 700; color: var(--jg-green); }

.jg-side__tip { margin: 0; padding: 12px 14px; border-radius: 14px; border: 1px dashed var(--jg-border); color: var(--jg-muted); font-size: 13px; line-height: 1.45; }

/* ---------- Nút âm thanh ---------- */
.jg-audio { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; border: 1px solid var(--jg-border); background: var(--jg-surface); }
.jg-audio__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  border-radius: 999px;
  padding: 4px 10px;
  background: transparent;
  color: var(--jg-faint);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.jg-audio__btn.is-on { background: color-mix(in srgb, var(--jg-green) 14%, transparent); color: var(--jg-green); }
.jg-audio__btn:hover { color: var(--jg-text); }
/* Sảnh thiền /hall — toàn màn hình là cảnh 3D, giao diện nổi tối giản, tông xanh rêu. */
.hall-page {
  --hall-bg: #20251f;
  --hall-ink: #f1ecdf;
  --hall-muted: #b9b6a6;
  --hall-glass: rgba(24, 30, 23, 0.72);
  --hall-line: rgba(241, 236, 223, 0.16);
  --hall-warm: #e7b46a;
  --hall-moss: #7f9a6a;
  position: fixed;
  inset: 0;
  background: var(--hall-bg);
  color: var(--hall-ink);
  overflow: hidden;
  font-family: inherit;
  user-select: none;
}

.hall-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: grab;
}
.hall-canvas:active { cursor: grabbing; }

.hall-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hall-label {
  position: absolute;
  left: 0;
  top: 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(20, 24, 19, 0.6);
  color: var(--hall-ink);
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.9s ease;
  will-change: transform;
}
.hall-label.is-self,
.hall-label.is-shown { opacity: 1; transition-duration: 0.25s; }
.hall-label.is-self { background: rgba(231, 180, 106, 0.22); border: 1px solid rgba(231, 180, 106, 0.45); }

/* Không thông báo chen vào sảnh: ẩn toàn bộ Mưa lì xì (thẻ, phong bao rơi, hộp thoại) khi đang ở /hall. */
body:has(.hall-page) .lr-dock,
body:has(.hall-page) .lr-rain,
body:has(.hall-page) .ant-modal-root:has(.lr-modal) { display: none !important; }

/* Ping: nhãn nổi trên cột sáng (vị trí do engine đặt mỗi khung) */
.hall-ping {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 6px;
  border-radius: 999px;
  background: rgba(20, 24, 19, 0.72);
  border: 1px solid var(--ping);
  color: var(--hall-ink);
  font-size: 12px;
  white-space: nowrap;
  animation: hall-ping-in 0.35s ease;
  will-change: transform;
}
.hall-ping.is-mine { box-shadow: 0 0 12px color-mix(in srgb, var(--ping) 45%, transparent); }
.hall-ping__icon { font-size: 14px; line-height: 1; }
.hall-ping small { color: var(--hall-muted); font-size: 11px; }
@keyframes hall-ping-in { from { margin-top: 8px; filter: opacity(0); } to { margin-top: 0; filter: opacity(1); } }

/* Vòng chọn ping (giữ Ctrl/Alt + kéo) */
.hall-wheel { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 3; }
.hall-wheel__center {
  position: absolute;
  left: -7px;
  top: -7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(241, 236, 223, 0.85);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.hall-wheel.is-open::before {
  content: '';
  position: absolute;
  left: -86px;
  top: -86px;
  width: 172px;
  height: 172px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20, 24, 19, 0.25) 20%, rgba(20, 24, 19, 0.6) 70%, transparent 72%);
}
.hall-wheel__item {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%) translate(calc(var(--dx) * 62px), calc(var(--dy) * 62px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 64px;
  padding: 6px 8px;
  border-radius: 12px;
  background: rgba(24, 30, 23, 0.85);
  border: 1px solid var(--hall-line);
  color: var(--hall-muted);
  font-size: 11px;
  white-space: nowrap;
  transition: transform 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.hall-wheel__icon { font-size: 18px; line-height: 20px; }
.hall-wheel__item.is-active {
  color: var(--hall-ink);
  border-color: var(--ping);
  transform: translate(-50%, -50%) translate(calc(var(--dx) * 68px), calc(var(--dy) * 68px)) scale(1.1);
  box-shadow: 0 0 14px color-mix(in srgb, var(--ping) 40%, transparent);
}

/* Thanh trên */
.hall-top {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  pointer-events: none;
}
.hall-top > * { pointer-events: auto; }
.hall-top__spacer { flex: 1; }
.hall-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--hall-glass);
  border: 1px solid var(--hall-line);
  color: var(--hall-ink);
  font-size: 13px;
  line-height: 1.2;
  backdrop-filter: blur(6px);
  text-decoration: none;
}
button.hall-chip { cursor: pointer; font: inherit; font-size: 13px; }
.hall-chip--link:hover,
.hall-chip--link.is-active { border-color: rgba(231, 180, 106, 0.6); color: #fff; }
.hall-chip--soft { color: var(--hall-muted); }
.hall-chip--wait { border-color: rgba(231, 180, 106, 0.6); color: var(--hall-warm); }
.hall-chip--shared { border-color: rgba(127, 154, 106, 0.8); color: #cfe3bd; }
.hall-chip--cta {
  background: var(--hall-warm);
  color: #2a2116;
  border-color: transparent;
  font-weight: 600;
  padding: 8px 16px;
}

/* Thanh công cụ dưới */
.hall-toolbar {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  padding: 6px;
  border-radius: 18px;
  background: var(--hall-glass);
  border: 1px solid var(--hall-line);
  backdrop-filter: blur(8px);
}
.hall-tool {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 78px;
  padding: 8px 10px 7px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: var(--hall-ink);
  font: inherit;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.hall-tool:hover:not(:disabled) { background: rgba(241, 236, 223, 0.08); }
.hall-tool.is-active { background: rgba(231, 180, 106, 0.18); border-color: rgba(231, 180, 106, 0.55); }
.hall-tool:disabled { opacity: 0.5; cursor: default; }
.hall-tool__icon { font-size: 20px; line-height: 24px; height: 24px; display: flex; align-items: center; }
.hall-tool__icon img { width: 24px; height: 24px; object-fit: contain; }
.hall-tool__label { font-size: 12px; }
.hall-tool kbd {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 10px;
  color: var(--hall-muted);
  font-family: inherit;
}

.hall-incense {
  position: absolute;
  bottom: 104px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid rgba(231, 180, 106, 0.7);
  background: rgba(54, 38, 20, 0.82);
  color: #ffe2b0;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  animation: hall-rise 0.5s ease;
}
.hall-incense:hover { background: rgba(84, 58, 28, 0.9); }

.hall-toast,
.hall-hint {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 14px;
  border-radius: 12px;
  background: var(--hall-glass);
  border: 1px solid var(--hall-line);
  font-size: 13px;
  text-align: center;
  max-width: min(680px, 90vw);
}
.hall-toast { top: 64px; animation: hall-rise 0.4s ease; }
.hall-hint { bottom: 96px; color: var(--hall-muted); animation: hall-fade-late 14s ease forwards; pointer-events: none; }

/* Bảng nổi (tràng hạt, mõ, âm thanh) */
.hall-panel {
  position: absolute;
  right: 16px;
  top: 64px;
  width: 260px;
  padding: 14px;
  border-radius: 16px;
  background: var(--hall-glass);
  border: 1px solid var(--hall-line);
  backdrop-filter: blur(10px);
  animation: hall-rise 0.35s ease;
}
.hall-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.hall-panel__close,
.hall-btn {
  border: 1px solid var(--hall-line);
  background: transparent;
  color: var(--hall-ink);
  border-radius: 999px;
  padding: 4px 12px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.hall-panel__close:hover,
.hall-btn:hover { border-color: rgba(231, 180, 106, 0.6); }
.hall-btn--big { width: 100%; padding: 10px; font-size: 14px; background: var(--hall-warm); color: #2a2116; border-color: transparent; font-weight: 600; margin-bottom: 10px; }
.hall-panel__note { font-size: 12px; color: var(--hall-muted); margin: 8px 0 0; }
.hall-panel a { color: var(--hall-warm); }

.hall-row { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 6px 0; cursor: pointer; }
.hall-row small { display: block; color: var(--hall-muted); font-size: 11px; }
.hall-row--slider { flex-direction: column; align-items: stretch; gap: 4px; }
.hall-panel input[type='range'] { width: 100%; accent-color: var(--hall-warm); }
.hall-panel input[type='checkbox'] { accent-color: var(--hall-warm); width: 16px; height: 16px; }

/* Tràng hạt */
.hall-beads { width: 220px; }
.hall-beads__strand {
  position: relative;
  height: 280px;
  border-radius: 14px;
  background: radial-gradient(ellipse at center, rgba(231, 180, 106, 0.08), transparent 70%);
  cursor: default;
  overflow: hidden;
  user-select: none;
  outline: none;
  -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);
}
.hall-beads__strand:focus-visible { box-shadow: inset 0 0 0 2px rgba(231, 180, 106, 0.6); }
.hall-beads__cord { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: #6b3c22; transform: translateX(-50%); }
.hall-beads__mark {
  position: absolute;
  left: calc(50% - 24px);
  top: calc(50% - 1px);
  width: 48px;
  border-top: 1px solid rgba(231, 180, 106, 0.45);
}
.hall-bead {
  position: absolute;
  left: calc(50% - 13px);
  top: calc(50% - 13px);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c98b5a, #7a4325 60%, #4a2614);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
.hall-bead.is-current { box-shadow: 0 0 12px rgba(231, 180, 106, 0.45); }
.hall-beads__count { display: flex; align-items: baseline; gap: 10px; justify-content: center; margin-top: 10px; }
.hall-beads__n { font-size: 22px; font-variant-numeric: tabular-nums; }
.hall-beads__lap { font-size: 13px; color: var(--hall-warm); }
.hall-beads__note { font-size: 12px; color: var(--hall-muted); text-align: center; min-height: 32px; margin: 6px 0 0; }
.hall-beads.is-lap { border-color: rgba(231, 180, 106, 0.6); box-shadow: 0 0 40px rgba(231, 180, 106, 0.18); transition: box-shadow 1.2s ease; }
.hall-beads.is-lap .hall-beads__note { color: #ffe2b0; }

/* Mõ */
.hall-moktak__wood {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--hall-ink);
  font: inherit;
  cursor: pointer;
  padding: 6px;
}
.hall-moktak__wood img { width: 130px; transition: transform 0.08s ease; }
.hall-moktak__wood:active img { transform: scale(0.94) translateY(2px); }

/* Âm thanh */
.hall-sound { width: 280px; }
.hall-sound__layer { padding: 8px 0; border-top: 1px solid var(--hall-line); }
.hall-sound__layer:first-of-type { border-top: none; }
.hall-sound__notice { display: flex; flex-direction: column; gap: 8px; font-size: 13px; padding: 8px; border-radius: 10px; background: rgba(231, 180, 106, 0.12); margin-bottom: 10px; }
.hall-sound__shared { font-size: 12px; color: #cfe3bd; margin: 0 0 8px; }
.hall-sound__track { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.hall-sound__track img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; }

/* Ghi nguồn */
.hall-credits-link {
  position: absolute;
  left: 14px;
  bottom: 14px;
  border: none;
  background: transparent;
  color: var(--hall-muted);
  font: inherit;
  font-size: 11px;
  text-decoration: underline;
  cursor: pointer;
  opacity: 0.8;
}
.hall-modal { position: absolute; inset: 0; background: rgba(10, 12, 9, 0.6); display: flex; align-items: center; justify-content: center; z-index: 5; }
.hall-modal__card {
  width: min(640px, 92vw);
  max-height: 80vh;
  overflow: auto;
  padding: 18px 22px;
  border-radius: 16px;
  background: #1d221c;
  border: 1px solid var(--hall-line);
  font-size: 13px;
  line-height: 1.55;
  user-select: text;
}
.hall-modal__card h3 { font-size: 14px; margin: 14px 0 4px; color: var(--hall-warm); }
.hall-modal__card p { margin: 0; color: #ddd8c9; }
.hall-modal__card a { color: var(--hall-warm); }

/* Màn vào sảnh */
.hall-entry {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 30%, #2e3a2b, var(--hall-bg) 70%);
}
.hall-entry__card {
  width: min(440px, 90vw);
  padding: 28px;
  border-radius: 20px;
  background: rgba(24, 30, 23, 0.85);
  border: 1px solid var(--hall-line);
  text-align: center;
}
.hall-entry__card h1 { font-size: 26px; font-weight: 500; margin: 0 0 8px; color: var(--hall-ink); letter-spacing: 0.04em; }
.hall-entry__card p { color: var(--hall-muted); font-size: 14px; line-height: 1.55; margin: 0 0 14px; }
.hall-entry__meta { font-size: 12px !important; }
.hall-entry__field { display: flex; flex-direction: column; gap: 6px; text-align: left; margin: 16px 0; font-size: 13px; }
.hall-entry__field input {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--hall-line);
  background: rgba(0, 0, 0, 0.25);
  color: var(--hall-ink);
  font: inherit;
  user-select: text;
}
.hall-entry__name { margin: 16px 0 !important; color: var(--hall-ink) !important; }
.hall-entry__name strong { color: var(--hall-warm); font-weight: 600; }
.hall-entry__name small { display: block; margin-top: 4px; color: var(--hall-muted); font-size: 11px; }
.hall-entry__field small { color: var(--hall-muted); font-size: 11px; }
.hall-entry__go {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: none;
  background: var(--hall-warm);
  color: #2a2116;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.hall-entry__go:disabled { opacity: 0.75; cursor: progress; }
.hall-entry__error { color: #f0a58f !important; margin-top: 12px !important; }
.hall-entry__back { display: inline-block; margin-top: 14px; color: var(--hall-muted); font-size: 13px; }

@keyframes hall-rise { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.hall-panel { animation-name: hall-panel-in; }
@keyframes hall-panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes hall-fade-late { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .hall-page * { animation: none !important; transition: none !important; }
}
/* Dance Lab — trang thử animation nhân vật. Nền sân khấu là ảnh, canvas 3D trong suốt phủ lên. */

.dl-page {
  position: fixed;
  inset: 0;
  background-color: #0b0820;
  background-size: cover;
  background-position: center bottom;
  color: #f4f1ff;
  overflow: hidden;
  transition: background-image 0.3s ease;
}

.dl-stage {
  position: absolute;
  inset: 0 332px 0 0; /* chừa cột điều khiển bên phải để nhân vật ngoài cùng không bị che */
}

/* Thẻ Mưa lì xì (toàn cục, góc trên phải) đè lên bảng điều khiển: dời xuống góc dưới trái. */
body:has(.dl-page) .lr-dock { top: auto; bottom: 16px; right: auto; left: 16px; }

.dl-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  background: linear-gradient(to bottom, rgba(5, 3, 20, 0.75), transparent);
  pointer-events: none;
}

.dl-top > * {
  pointer-events: auto;
}

.dl-top__back {
  color: #f4f1ff;
  text-decoration: none;
  font-weight: 600;
  opacity: 0.85;
}

.dl-top__back:hover {
  opacity: 1;
}

.dl-top__title {
  font-size: 18px;
  font-weight: 800;
}

.dl-top__hint {
  font-size: 13px;
  opacity: 0.65;
}

.dl-panel {
  position: absolute;
  top: 60px;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  width: 300px;
  overflow-y: auto;
  padding: 14px;
  border-radius: 14px;
  background: rgba(10, 6, 30, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}

.dl-section + .dl-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.dl-section h3 {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(244, 241, 255, 0.7);
}

.dl-section h3 small {
  font-weight: 500;
  letter-spacing: 0;
}

.dl-stages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.dl-stage-btn {
  position: relative;
  height: 56px;
  border: 2px solid transparent;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  overflow: hidden;
  padding: 0;
}

.dl-stage-btn span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2px 4px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
}

.dl-stage-btn.is-active {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}

.dl-select {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: #f4f1ff;
  font-size: 14px;
}

.dl-select option,
.dl-select optgroup {
  color: #111;
}

.dl-select--small {
  padding: 5px 8px;
  font-size: 13px;
}

.dl-select:disabled {
  opacity: 0.4;
}

.dl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}

.dl-btn {
  flex: 1;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.1);
  color: #f4f1ff;
  font-size: 13px;
  cursor: pointer;
}

.dl-btn:hover {
  background: rgba(255, 255, 255, 0.18);
}

.dl-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.dl-speeds {
  display: flex;
  gap: 4px;
}

.dl-chip {
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  color: #f4f1ff;
  font-size: 12px;
  cursor: pointer;
}

.dl-chip.is-active {
  background: #f4f1ff;
  color: #1a1035;
  font-weight: 700;
}

.dl-dancer {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.dl-loading {
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 13px;
  white-space: nowrap;
}

.dl-loading--page {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ---------- Nhạc ---------- */
.dl-section:first-child h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dl-beat {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff5cd6;
  box-shadow: 0 0 10px #ff5cd6;
  opacity: 0.15;
}

.dl-beat.is-bar {
  background: #ffe066;
  box-shadow: 0 0 12px #ffe066;
}

.dl-track {
  font-weight: 700;
  font-size: 14px;
}

.dl-row--tight {
  gap: 8px;
}

.dl-btn--play {
  flex: 0 0 36px;
  padding: 6px 0;
}

.dl-seek {
  flex: 1;
  min-width: 0;
}

.dl-time {
  font-size: 12px;
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}

.dl-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.dl-field--block {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  margin-top: 10px;
}

.dl-num {
  width: 72px;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: #f4f1ff;
}

.dl-note {
  margin: 8px 0 0;
  font-size: 12px;
  opacity: 0.75;
}

.dl-btn:disabled,
.dl-chip:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
/* Sảnh dùng token Musicque; ảnh neon chỉ nằm trong banner của game. */
.au-salon { position: fixed; inset: 0; overflow-y: auto; background: var(--sp-bg); color: var(--sp-text); }
body:has(.au-salon) .lr-dock { display: none; }
.au-salon *, .au-salon *::before, .au-salon *::after { box-sizing: border-box; }
.au-salon__wrap { max-width: 1320px; margin: 0 auto; padding: 0 40px 48px; }
.au-salon__nav { min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.au-salon__back { display: flex; align-items: center; gap: 12px; color: var(--sp-text); text-decoration: none; font-size: 15px; }
.au-salon__back > .anticon { color: var(--sp-text-muted); }
.au-salon__back b { font-size: 20px; letter-spacing: -.8px; }
.au-salon__back span:last-child { color: var(--sp-text-muted); font-size: 13px; }
.au-salon__account { display: flex; align-items: center; gap: 8px; }
.au-salon__hero { padding: 32px 36px; border-radius: var(--sp-radius-lg); background-size: cover; background-position: center 48%; color: #fff; overflow: hidden; }
.au-salon__eyebrow { display: flex; align-items: center; gap: 8px; color: #bdf7d1; font-size: 10px; font-weight: 700; letter-spacing: 1.8px; }
.au-salon__hero h1 { margin: 14px 0 12px; font-size: clamp(32px, 3.4vw, 44px); font-weight: 800; line-height: 1.18; letter-spacing: -1.7px; }
.au-salon__hero h1 span { display: block; color: #e0dbe8; font-size: 22px; font-weight: 500; letter-spacing: -.6px; margin-top: 8px; }
.au-salon__hero p { margin: 0; font-size: 13px; color: #d0cbd8; }
.au-salon__hero-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; font-size: 11px; }
.au-salon__hero-tags span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid #ffffff30; border-radius: var(--sp-radius-pill); background: #ffffff0d; }
.au-salon__grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; margin-top: 24px; align-items: start; }
.au-salon__section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 24px 24px 18px; }
.au-salon h2 { font-size: 19px; letter-spacing: -.5px; margin: 0; }
.au-salon__section-head h2 { display: flex; align-items: center; gap: 10px; }
.au-salon__section-head h2 span { font-size: 12px; color: var(--sp-text-muted); background: var(--sp-surface-hover); padding: 4px 8px; border-radius: var(--sp-radius-pill); }
.au-salon__section-head p { margin: 7px 0 0; font-size: 12px; color: var(--sp-text-muted); }
.au-salon__live { display: inline-flex; align-items: center; gap: 6px; color: var(--sp-text-muted); font-size: 11px; white-space: nowrap; }
.au-salon__live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--sp-green); }
.au-salon__filters { display: flex; gap: 10px; padding: 0 24px 20px; border-bottom: 1px solid var(--sp-border); }
.au-salon__search { display: flex; align-items: center; gap: 10px; background: var(--sp-surface-2); border: 1px solid var(--sp-border); border-radius: var(--sp-radius); padding: 0 12px; color: var(--sp-text-muted); flex: 1; min-width: 0; }
.au-salon__search input { width: 100%; min-width: 0; height: 38px; border: 0; background: transparent; color: var(--sp-text); font: inherit; font-size: 12px; outline: none; }
.au-salon__search:focus-within { border-color: var(--sp-green); box-shadow: 0 0 0 2px var(--sp-green-soft); }
.au-salon input::placeholder { color: var(--sp-text-muted); opacity: 1; }
.au-salon__list { padding: 8px 12px; min-height: 340px; }
.au-salon__empty { min-height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px 24px; }
.au-salon__empty-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--sp-green-soft); color: var(--pt-green-ink); font-size: 27px; margin-bottom: 18px; }
.au-salon__empty h3 { margin: 0; font-size: 17px; letter-spacing: -.4px; }
.au-salon__empty p { color: var(--sp-text-muted); font-size: 13px; max-width: 330px; line-height: 1.8; margin: 10px 0 20px; }
.au-salon__room { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto 104px; gap: 14px; align-items: center; padding: 18px 12px; border-bottom: 1px solid var(--sp-border); border-radius: var(--sp-radius); }
.au-salon__room:last-child { border-bottom: 0; }
.au-salon__room:hover { background: var(--sp-surface-2); }
.au-salon__room.is-mine { background: var(--sp-green-soft); }
.au-salon__cover { width: 46px; height: 46px; display: grid; place-items: center; color: #e9dfff; background: linear-gradient(145deg, #342052, #7044a1); border-radius: 8px; font-size: 22px; }
.au-salon__room-title { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; min-width: 0; }
.au-salon__room h3 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; font-size: 14px; }
.au-salon__mine { font-size: 10px; color: var(--pt-green-ink); }
.au-salon__room-info { min-width: 0; }
.au-salon__room-info p { margin: 6px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.au-salon__room-info p span, .au-salon__host { color: var(--sp-text-muted); font-size: 11px; }
.au-salon__room-state { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; font-size: 11px; color: var(--sp-text-muted); white-space: nowrap; }
.au-salon__status { padding: 4px 8px; border-radius: var(--sp-radius-pill); background: var(--sp-green-soft); color: var(--pt-green-ink); }
.au-salon__status.is-playing { background: var(--pt-blue-soft); color: var(--pt-blue-ink); }
.au-salon__status.is-finished { background: var(--sp-surface-active); color: var(--sp-text-muted); }
.au-salon__create { padding: 24px; }
.au-salon__create-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--sp-green-soft); color: var(--pt-green-ink); margin-bottom: 16px; font-size: 18px; }
.au-salon__create > p { margin: 10px 0 24px; font-size: 12px; color: var(--sp-text-muted); line-height: 1.8; }
.au-salon__field { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 600; margin-bottom: 9px; }
.au-salon__field span { font-weight: 400; font-size: 10px; color: var(--sp-text-muted); }
.au-salon__input { width: 100%; padding: 12px; color: var(--sp-text); background: var(--sp-surface-2); border: 1px solid var(--sp-border-strong); border-radius: var(--sp-radius); font: inherit; font-size: 12px; }
.au-salon__del { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; cursor: pointer; }
.au-salon__del strong { font-size: 12px; font-weight: 600; }
.au-salon__del small { display: block; color: var(--sp-text-muted); font-size: 11px; line-height: 1.7; margin-top: 5px; }
.au-salon__del input { appearance: none; flex: 0 0 36px; height: 21px; margin: 0; border: 1px solid var(--sp-border-strong); background: var(--sp-surface-active); border-radius: 20px; cursor: pointer; position: relative; }
.au-salon__del input::after { content: ''; position: absolute; width: 13px; height: 13px; top: 3px; left: 3px; background: var(--sp-text-muted); border-radius: 50%; transition: transform .15s; }
.au-salon__del input:checked { background: var(--sp-green); border-color: var(--sp-green); }
.au-salon__del input:checked::after { transform: translateX(15px); background: #fff; }
.au-salon__del input:disabled { opacity: .45; cursor: not-allowed; }
.au-salon__submit { width: 100%; }
.au-salon__form-hint { font-size: 11px; text-align: center; color: var(--sp-text-muted); line-height: 1.8; margin: 12px 0 0; }
.au-salon__guide { padding: 24px 8px; }
.au-salon__guide h3 { margin: 0 0 14px; font-size: 13px; }
.au-salon__guide ol { padding-left: 19px; margin: 0; color: var(--sp-text-muted); font-size: 12px; line-height: 1.8; }
.au-salon__guide li { padding-left: 4px; margin-bottom: 10px; }
.au-salon__guide li::marker { color: var(--pt-green-ink); font-weight: 700; }
.au-salon__rejoin { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; margin-top: 20px; background: var(--sp-green-soft); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-lg); font-size: 13px; }
.au-salon__rejoin p { margin: 6px 0 0; color: var(--sp-text-muted); font-size: 12px; }
.au-salon button:focus-visible, .au-salon a:focus-visible, .au-salon__input:focus-visible, .au-salon__del input:focus-visible { outline: 2px solid var(--sp-green); outline-offset: 3px; }
@media (max-width: 1100px) {
  .au-salon__wrap { padding-right: 24px; padding-left: 24px; }
  .au-salon__grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; }
  .au-salon__room { grid-template-columns: minmax(0, 1fr) auto 100px; gap: 10px; }
  .au-salon__cover { display: none; }
}
@media (max-width: 800px) {
  .au-salon__grid { grid-template-columns: 1fr; }
  .au-salon__aside { grid-row: 1; }
  .au-salon__guide { display: none; }
  .au-salon__hero { padding: 24px; }
  .au-salon__rejoin { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 480px) {
  .au-salon__wrap { padding: 0 12px 24px; }
  .au-salon__back span:last-child { display: none; }
  .au-salon__nav { min-height: 68px; }
  .au-salon__account { gap: 0; }
  .au-salon__room { grid-template-columns: minmax(0, 1fr) 100px; }
  .au-salon__room-info { grid-column: 1 / -1; }
  .au-salon__room-state { align-items: flex-start; }
  .au-salon__section-head, .au-salon__filters { padding-left: 16px; padding-right: 16px; }
  .au-salon__live { display: none; }
}
/* Au đi sần (Audition) — sân khấu ảnh nền + canvas 3D trong suốt + HUD bằng ảnh từ bộ asset neon. */

.au-page {
  --au-cyan: #2fe0ff;
  --au-pink: #ff3fd0;
  --au-gold: #ffd84d;
  --au-ink: #f3f0ff;
  position: fixed;
  inset: 0;
  overflow: hidden;
  background-color: #070512;
  background-size: cover;
  background-position: center;
  color: var(--au-ink);
  font-family: inherit;
  user-select: none;
}

body:has(.au-page) .lr-dock { display: none; }

.au-stage {
  position: absolute;
  inset: 0;
}

.au-stage.is-panel {
  right: calc(6% + 400px);
}

.au-stage.is-showtime::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, rgba(255, 216, 77, 0.28), transparent 60%);
  animation: au-pulse 0.36s ease-in-out infinite alternate;
}

.au-loading {
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 13px;
  white-space: nowrap;
}

.au-loading--page {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ---------- HUD (bố cục kiểu Audition: phím tròn ở dưới giữa, level + thanh nhịp phía trên, điểm góc phải) ---------- */
.au-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.au-hud button {
  pointer-events: auto;
}

.au-hud__tl {
  position: absolute;
  top: 12px;
  left: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.au-icon {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: 0.85;
  transition: transform 0.12s ease, opacity 0.12s ease;
}

.au-icon .au-atlas {
  display: block;
}

.au-icon:hover {
  opacity: 1;
  transform: scale(1.08);
}

.au-progress {
  width: 160px;
  height: 6px;
  margin-left: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
}

.au-progress__fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--au-cyan), var(--au-pink));
}

.au-hud__tr {
  position: absolute;
  top: 8px;
  right: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.au-digits {
  display: inline-flex;
  filter: drop-shadow(0 3px 0 #5a1a00) drop-shadow(0 0 8px rgba(255, 170, 40, 0.5));
  transform-origin: right center;
  transition: transform 0.22s ease-out, filter 0.22s ease-out;
}

/* đang cộng điểm: phóng to + sáng hơn, đếm xong co về */
.au-digits.is-counting {
  transform: scale(1.28);
  filter: drop-shadow(0 3px 0 #5a1a00) drop-shadow(0 0 16px rgba(255, 210, 80, 0.95));
  transition-duration: 0.12s;
}

/* ảnh chữ số 128×160 có nhiều lề trong suốt: kéo sát lại */
.au-digits .au-atlas {
  margin: 0 -17px;
}

.au-digits .au-atlas.is-group {
  margin-left: -8px;
}

.au-best {
  margin-top: -6px;
  font-size: 11px;
  opacity: 0.7;
  text-shadow: 0 1px 2px #000;
}

/* nhãn Ready / Go / Finish / Paused */
.au-label {
  position: absolute;
  top: 14%;
  left: 50%;
  width: 300px;
  transform: translateX(-50%);
  animation: au-pop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) both;
  filter: drop-shadow(0 0 14px rgba(255, 63, 208, 0.6));
}

/* chữ chấm điểm hiện phía trên hàng phím, như Audition */
.au-label--finish {
  filter: drop-shadow(0 0 20px rgba(255, 216, 77, 0.85));
}

.au-label--paused {
  top: 36%;
  animation: none;
}

.au-judge {
  position: absolute;
  bottom: 158px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: au-judge 0.9s ease-out both;
}

.au-judge__pts {
  margin-top: -6px;
  font-size: 16px;
  font-weight: 800;
  color: var(--au-gold);
  text-shadow: 0 0 8px rgba(255, 216, 77, 0.8), 0 2px 0 #3a1460;
}

.au-showtime {
  position: absolute;
  inset: 0;
}

.au-showtime .au-sprite {
  position: absolute;
}

.au-showtime__a { left: calc(50% - 150px); top: 16%; }
.au-showtime__b { left: calc(50% - 260px); top: 30%; animation-delay: 0.15s !important; }
.au-showtime__c { left: calc(50% + 30px); top: 26%; animation-delay: 0.3s !important; }

.au-dock {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-width: 520px;
}

.au-dock__top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  height: 30px;
}

.au-level {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-weight: 900;
  font-style: italic;
  color: #e8e2c8;
  text-shadow: 0 2px 0 #3a3420, 0 0 6px rgba(0, 0, 0, 0.6);
}

.au-level__cap {
  font-size: 15px;
  letter-spacing: 0.08em;
}

.au-level__n {
  font-size: 26px;
  color: var(--au-gold);
}

.au-level.is-finish .au-level__cap {
  color: var(--au-gold);
  animation: au-pulse 0.36s ease-in-out infinite alternate;
}

.au-combo {
  display: inline-flex;
  align-items: center;
  animation: au-bump 0.3s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}

.au-combo .au-combo__label {
  height: 24px;
  margin-left: -4px;
}

/* thanh nhịp nhỏ góc phải phía trên hàng phím */
.au-rb {
  position: relative;
  margin-left: auto;
  width: 240px;
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(#1a1d22, #2b3037);
  border: 2px solid #8a8f99;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 6px rgba(0, 0, 0, 0.5);
}

.au-rb__tick {
  position: absolute;
  top: 3px;
  bottom: 3px;
  width: 1px;
  background: rgba(255, 255, 255, 0.25);
}

.au-rb__zone {
  position: absolute;
  top: 1px;
  bottom: 1px;
  width: 26px;
  margin-left: -13px;
  border-radius: 999px;
  background: radial-gradient(ellipse, rgba(255, 216, 77, 0.95), rgba(255, 140, 40, 0.35) 70%, transparent);
  box-shadow: 0 0 8px rgba(255, 200, 60, 0.7);
}

.au-rb__ball {
  position: absolute;
  top: 50%;
  left: 0;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, #ffd9d9 40%, #e3263c 72%, #7a0d1a);
  box-shadow: 0 0 6px rgba(255, 60, 80, 0.8);
}

.au-rb__burst {
  position: absolute;
  top: 50%;
  margin: -60px 0 0 -60px;
}

/* dải phím hình viên thuốc */
.au-pill {
  display: flex;
  justify-content: center;
  padding: 7px 18px;
  min-height: 60px;
  border-radius: 999px;
  background: linear-gradient(#4b5236, #2c311e 55%, #3b4129);
  border: 3px solid #9aa47a;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.25), inset 0 -3px 6px rgba(0, 0, 0, 0.45), 0 4px 14px rgba(0, 0, 0, 0.55);
}

.au-pill__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* phím vừa được bấm tới: loé trắng rồi dịu về xanh (chạy một lần khi gắn class is-lit) */
.au-pill__fill .au-key.is-lit {
  animation: au-key-flash 0.22s ease-out;
}

@keyframes au-key-flash {
  0% { filter: brightness(2.6) saturate(0.2); }
  35% { filter: brightness(1.9) saturate(0.55); }
  100% { filter: none; }
}

/* lớp phím xanh chồng khít lên hàng phím, mở dần trái -> phải (xem KeyRow) */
.au-pill__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  transition-property: clip-path;
  transition-timing-function: linear;
}

.au-pill__empty {
  width: 46px;
  height: 46px;
}

.au-pill__row.is-wrong {
  animation: au-shake 0.28s linear;
}

.au-pill__row.is-wrong .au-atlas {
  display: inline-block;
  flex-shrink: 0;
  background-repeat: no-repeat;
}

.au-key.is-error {
  filter: drop-shadow(0 0 6px rgba(255, 60, 90, 0.8));
}

.au-key.is-disabled {
  opacity: 0.8;
}

/* sprite 12 khung ngang: background-size 1200% rồi trượt 0% → 100% theo 12 nấc */
.au-sprite {
  display: inline-block;
  background-repeat: no-repeat;
  background-size: 1200% 100%;
  animation-name: au-sprite;
  animation-timing-function: steps(11, jump-none);
  animation-fill-mode: forwards;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* ---------- Sảnh / kết quả ---------- */
.au-modal {
  position: absolute;
  top: 50%;
  right: 6%;
  transform: translateY(-50%);
  width: 380px;
  padding: 22px 24px;
  border-radius: 16px;
  background: rgba(10, 6, 30, 0.78);
  border: 1px solid rgba(47, 224, 255, 0.35);
  box-shadow: 0 0 30px rgba(255, 63, 208, 0.25), inset 0 0 20px rgba(47, 224, 255, 0.08);
  backdrop-filter: blur(10px);
}

.au-lobby h1 {
  margin: 0;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 0.04em;
  background: linear-gradient(90deg, var(--au-cyan), var(--au-pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.au-sub {
  margin: 2px 0 16px;
  opacity: 0.8;
}

.au-check {
  cursor: pointer;
}

.au-chip {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: var(--au-ink);
  font-weight: 800;
  cursor: pointer;
}

.au-chip.is-active {
  border-color: var(--au-cyan);
  background: rgba(47, 224, 255, 0.2);
  box-shadow: 0 0 12px rgba(47, 224, 255, 0.5);
}

.au-start {
  width: 100%;
  padding: 12px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(90deg, var(--au-cyan), var(--au-pink));
  color: #12051f;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(255, 63, 208, 0.45);
}

.au-start:disabled {
  opacity: 0.5;
  cursor: wait;
}

/* ---------- Keyframes ---------- */
@keyframes au-sprite {
  from { background-position: 0% 0; }
  to { background-position: 100% 0; }
}

@keyframes au-pop {
  from { opacity: 0; transform: translateX(-50%) scale(0.5); }
  to { opacity: 1; transform: translateX(-50%) scale(1); }
}

@keyframes au-bump {
  from { transform: scale(0.6); }
  to { transform: scale(1); }
}

@keyframes au-judge {
  0% { opacity: 0; transform: translateX(-50%) scale(0.6); }
  15% { opacity: 1; transform: translateX(-50%) scale(1.08); }
  25% { transform: translateX(-50%) scale(1); }
  75% { opacity: 1; transform: translate(-50%, -14px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -24px) scale(0.96); }
}

@keyframes au-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-10px); }
  40% { transform: translateX(10px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}

@keyframes au-wrong {
  0%, 70% { filter: hue-rotate(150deg) saturate(2.5) brightness(1.1) drop-shadow(0 0 10px #ff2a4a); }
  100% { filter: none; }
}

@keyframes au-pulse {
  from { opacity: 0.6; }
  to { opacity: 1; }
}

/* ---------- Phòng nhiều người ---------- */
.au-live {
  position: absolute;
  right: 14px;
  bottom: 22px;
  width: 210px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.au-live li {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(10, 6, 30, 0.72);
  border: 1px solid rgba(47, 224, 255, 0.25);
  font-size: 12px;
}

.au-live li.is-me {
  border-color: var(--au-gold);
  box-shadow: 0 0 10px rgba(255, 216, 77, 0.35);
}

.au-live__pos {
  font-weight: 900;
  font-style: italic;
  color: var(--au-gold);
}

.au-live__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.au-live__score {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--au-cyan);
}

.au-pill {
  position: relative;
}

.au-pill.is-locked .au-pill__row {
  opacity: 0.45;
}

.au-pill__lock {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #ff8a9a;
  text-shadow: 0 1px 2px #000;
  z-index: 1;
}

.au-countdown {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 120px;
  font-weight: 900;
  color: var(--au-gold);
  text-shadow: 0 0 30px rgba(255, 216, 77, 0.7), 0 6px 0 #5a1a00;
  animation: au-pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) both;
  pointer-events: none;
}

.au-tap {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
  padding: 14px 26px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(90deg, var(--au-cyan), var(--au-pink));
  color: #12051f;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(255, 63, 208, 0.6);
}

.au-center {
  right: auto;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.au-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--au-cyan);
  font: inherit;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}

.au-check.is-readonly {
  opacity: 0.7;
  cursor: default;
}

.au-chip-btn {
  padding: 6px 14px;
  border-radius: 999px;
  border: 0;
  background: linear-gradient(90deg, var(--au-cyan), var(--au-pink));
  color: #12051f;
  font-weight: 800;
  cursor: pointer;
}

.au-chip-btn:disabled {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.5);
  cursor: not-allowed;
}

.au-bots .au-chip-btn {
  padding: 5px 12px;
}

.au-start.is-ready {
  background: linear-gradient(90deg, #4dffc3, #2fe0ff);
}

.au-chip:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Chat trong phòng — góc dưới trái */
.au-chat {
  position: absolute;
  left: 14px;
  bottom: 22px;
  z-index: 6;
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
  font-size: 13px;
}

.au-chat__list {
  margin: 0;
  padding: 6px 8px;
  list-style: none;
  max-height: 176px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: 10px;
  background: rgba(10, 6, 30, 0.45);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.au-chat.is-open .au-chat__list {
  max-height: 260px;
  overflow-y: auto;
  pointer-events: auto;
  background: rgba(10, 6, 30, 0.72);
}

.au-chat__list li {
  line-height: 1.35;
  word-break: break-word;
  color: #f3f0ff;
}

.au-chat__name {
  margin-right: 6px;
  font-weight: 800;
  color: #ff8be6;
}

.au-chat__list li.is-me .au-chat__name {
  color: #2fe0ff;
}

.au-chat__input {
  pointer-events: auto;
  height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(47, 224, 255, 0.6);
  border-radius: 10px;
  outline: none;
  background: rgba(10, 6, 30, 0.88);
  color: #fff;
  font: inherit;
  box-shadow: 0 0 14px rgba(47, 224, 255, 0.25);
}

.au-chat__hint {
  pointer-events: auto;
  align-self: flex-start;
  padding: 3px 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(10, 6, 30, 0.45);
  color: rgba(243, 240, 255, 0.65);
  font: inherit;
  font-size: 11px;
  cursor: text;
}

/* ô nhịp nghỉ từ level 6: không có phím */
.au-pill__rest {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255, 216, 77, 0.85);
  text-shadow: 0 1px 2px #000;
}

/* cảnh báo lượt ngay trước Finish Move */
.au-prefinish {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 3px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 216, 77, 0.7);
  background: rgba(60, 20, 0, 0.82);
  color: #ffd84d;
  font-size: 13px;
  font-weight: 800;
  text-shadow: 0 1px 2px #000;
  animation: au-pulse 0.5s ease-in-out infinite alternate;
}
.core-identity {
  --core-a: #168bff;
  --core-b: #6bbcff;
  --core-glow: rgba(22, 139, 255, 0.42);
}

.core-identity--polite-blue {
  --core-a: #168bff;
  --core-b: #6bbcff;
  --core-glow: rgba(22, 139, 255, 0.42);
}

.core-identity--polite-red {
  --core-a: #ff3d43;
  --core-b: #ff8588;
  --core-glow: rgba(255, 61, 67, 0.42);
}

.core-identity--polite-yellow {
  --core-a: #e6a900;
  --core-b: #ffd34e;
  --core-glow: rgba(255, 190, 11, 0.46);
}

.core-identity--polite-green {
  --core-a: #20b967;
  --core-b: #68df9d;
  --core-glow: rgba(32, 185, 103, 0.42);
}

.sp-avatar.core-identity {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--sp-surface-2), var(--sp-surface-2)) padding-box,
    linear-gradient(135deg, var(--core-a), var(--core-b), var(--core-a)) border-box !important;
  box-shadow: 0 0 10px var(--core-glow), inset 0 0 7px rgba(255, 255, 255, 0.26);
  animation: core-avatar-breathe 2.8s ease-in-out infinite;
}

.core-name-wrap {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  vertical-align: middle;
}

.core-name {
  white-space: nowrap;
  color: var(--core-a);
  background: linear-gradient(105deg, var(--core-a), var(--core-b), var(--core-a));
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 12px var(--core-glow);
  font-weight: 850;
  animation: core-name-shimmer 3.2s linear infinite;
}

.core-badge,
.core-boost-chip {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 2px 6px;
  border: 1px solid color-mix(in srgb, var(--core-a, #168bff) 60%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--core-a, #168bff) 13%, var(--sp-surface));
  color: var(--core-a, #168bff);
  font-size: 8px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.09em;
}

.core-boost-chip {
  margin-left: 4px;
  padding: 2px 7px;
  border-color: rgba(22, 139, 255, 0.3);
  background: rgba(22, 139, 255, 0.1);
  color: #168bff;
  font-size: 9px;
  letter-spacing: 0.04em;
}

.core-identity--vivid.sp-avatar {
  box-shadow: 0 0 18px var(--core-glow), 0 0 5px var(--core-a);
}

.core-identity--vivid .core-name {
  text-shadow: 0 0 16px var(--core-glow), 0 0 4px var(--core-glow);
}

.core-identity--still,
.core-identity--still .core-name {
  animation: none !important;
}

.chat-room__message.core-identity .chat-room__bubble {
  border-color: color-mix(in srgb, var(--core-a) 34%, var(--sp-border));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--core-a) 7%, var(--sp-surface-2)), var(--sp-surface-2));
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--core-a) 58%, transparent);
}

.chat-room__message.core-identity--vivid .chat-room__bubble {
  box-shadow: inset 2px 0 0 var(--core-a), 0 4px 18px color-mix(in srgb, var(--core-glow) 30%, transparent);
}

.core-modal .ant-modal-content {
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(22, 139, 255, 0.25);
  background: var(--sp-surface);
}

.core-modal .ant-modal-close { color: var(--sp-text); }

.core-hero {
  position: relative;
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 30px 34px 26px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 88% 0%, rgba(32, 185, 103, 0.28), transparent 32%),
    radial-gradient(circle at 12% 100%, rgba(22, 139, 255, 0.5), transparent 42%),
    #0b2236;
}

.core-hero::after {
  content: '';
  position: absolute;
  inset: -70% -20%;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.12) 49%, transparent 56%);
  animation: core-hero-sweep 5s ease-in-out infinite;
  pointer-events: none;
}

.core-hero__orb {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 20px;
  background: linear-gradient(135deg, #168bff, #20b967);
  box-shadow: 0 0 36px rgba(22, 139, 255, .5);
  font-size: 30px;
}

.core-hero__eyebrow { color: #8ac7ff; font-size: 11px; font-weight: 900; letter-spacing: .18em; }
.core-hero h2 { margin: 5px 0 4px; color: #fff; font-size: 25px; letter-spacing: -.035em; }
.core-hero p { margin: 0; color: rgba(255,255,255,.7); }

.core-preview {
  display: flex;
  align-items: start;
  gap: 12px;
  margin: 22px 28px 14px;
  padding: 16px;
  border: 1px solid var(--sp-border);
  border-radius: 16px;
  background: var(--sp-surface-2);
}

.core-preview__bubble { flex: 1; min-width: 0; }
.core-preview__bubble p { margin: 5px 0 0; color: var(--sp-text); }

.core-preset-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 0 28px;
}

.core-preset {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 12px 6px 10px;
  border: 1px solid var(--sp-border);
  border-radius: 12px;
  background: var(--sp-surface-2);
  color: var(--sp-text);
  cursor: pointer;
}

.core-preset:hover,
.core-preset.is-selected { border-color: var(--preset-a, #168bff); transform: translateY(-1px); }
.core-preset.is-selected { box-shadow: 0 0 0 1px var(--preset-a, #168bff), 0 8px 22px rgba(0,0,0,.12); }
.core-preset--polite-blue { --preset-a: #168bff; --preset-b: #6bbcff; }
.core-preset--polite-red { --preset-a: #ff3d43; --preset-b: #ff8588; }
.core-preset--polite-yellow { --preset-a: #e6a900; --preset-b: #ffd34e; }
.core-preset--polite-green { --preset-a: #20b967; --preset-b: #68df9d; }
.core-preset__gem { width: 26px; height: 26px; border-radius: 9px; background: linear-gradient(135deg, var(--preset-a), var(--preset-b)); box-shadow: 0 0 14px color-mix(in srgb, var(--preset-a) 55%, transparent); transform: rotate(45deg) scale(.72); }
.core-preset strong { font-size: 11px; }
.core-preset small { min-height: 28px; color: var(--sp-text-muted); font-size: 9px; line-height: 1.3; }

.core-controls,
.core-benefits,
.core-action { margin: 14px 28px 0; }
.core-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.core-controls label { display: flex; align-items: center; gap: 9px; color: var(--sp-text); font-weight: 700; }
.core-intensity { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--sp-surface-2); }
.core-intensity button { border: 0; border-radius: 999px; padding: 6px 11px; background: transparent; color: var(--sp-text-muted); cursor: pointer; }
.core-intensity button.is-active { background: var(--sp-surface); color: var(--sp-text); box-shadow: var(--sp-shadow-sm); }
.core-benefits { display: flex; flex-wrap: wrap; gap: 8px; color: var(--sp-text-muted); font-size: 12px; }
.core-benefits span { padding: 6px 9px; border-radius: 999px; background: var(--sp-surface-2); }
.core-action { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 0 24px; border-top: 1px solid var(--sp-border); }
.core-action div { display: grid; gap: 2px; color: var(--sp-text); }
.core-action small { color: var(--sp-text-muted); }
.core-action .ant-btn-primary { height: 42px; border: 0; background: linear-gradient(105deg, #168bff, #20b967); font-weight: 800; box-shadow: 0 8px 22px rgba(22,139,255,.25); }

.core-launch-modal .ant-modal-content {
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(22, 139, 255, .42);
  border-radius: 28px;
  background: #071827;
  box-shadow: 0 32px 100px rgba(0, 20, 38, .62), 0 0 0 1px rgba(255,255,255,.05) inset;
}

.core-launch-modal .ant-modal-close { color: rgba(255,255,255,.72); }
.core-launch-modal .ant-modal-close:hover { color: #fff; background: rgba(255,255,255,.1); }

.core-launch {
  position: relative;
  min-height: 570px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% -15%, rgba(22,139,255,.32), transparent 43%),
    radial-gradient(circle at 0% 100%, rgba(255,61,67,.16), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(32,185,103,.16), transparent 34%),
    linear-gradient(150deg, #0c2940 0%, #071827 52%, #06131f 100%);
}

.core-launch::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .26;
  background-image: radial-gradient(rgba(107,188,255,.8) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(to bottom, #000, transparent 75%);
}

.core-launch__aurora i {
  position: absolute;
  width: 320px;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .2;
  animation: core-launch-float 7s ease-in-out infinite alternate;
}
.core-launch__aurora i:nth-child(1) { top: -190px; left: -80px; background: #168bff; }
.core-launch__aurora i:nth-child(2) { top: -190px; right: -70px; background: #20b967; animation-delay: -2s; }
.core-launch__aurora i:nth-child(3) { bottom: -230px; left: 8%; background: #ff3d43; animation-delay: -4s; }
.core-launch__aurora i:nth-child(4) { bottom: -230px; right: 6%; background: #ffd34e; animation-delay: -6s; }

.core-launch__content {
  position: relative;
  width: min(690px, calc(100% - 56px));
  padding: 44px 0 34px;
  text-align: center;
}

.core-launch__mark {
  width: 92px;
  height: 92px;
  margin: 0 auto 17px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 30px;
  background: conic-gradient(from 30deg, #168bff, #20b967, #ffd34e, #ff3d43, #168bff);
  box-shadow: 0 0 50px rgba(22,139,255,.4), 0 16px 38px rgba(0,0,0,.32);
  transform: rotate(6deg);
}
.core-launch__mark span {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 23px;
  background: #0a2134;
  font-size: 38px;
  transform: rotate(-6deg);
}

.core-launch__eyebrow { margin: 0; color: #78c1ff; font-size: 11px; font-weight: 900; letter-spacing: .24em; }
.core-launch h2 { margin: 12px 0; color: #fff; font-size: clamp(38px, 5vw, 58px); line-height: .98; letter-spacing: -.055em; }
.core-launch h2 em { color: #6bbcff; font-style: normal; text-shadow: 0 0 30px rgba(22,139,255,.42); }
.core-launch__lead { max-width: 590px; margin: 0 auto; color: rgba(255,255,255,.68); font-size: 15px; line-height: 1.65; }

.core-launch__benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 28px; }
.core-launch__benefits article { padding: 15px 12px; border: 1px solid rgba(255,255,255,.11); border-radius: 16px; background: rgba(255,255,255,.055); backdrop-filter: blur(10px); }
.core-launch__benefits strong { display: block; margin-bottom: 4px; color: #fff; font-size: 17px; }
.core-launch__benefits span { color: rgba(255,255,255,.58); font-size: 11px; line-height: 1.4; }

.core-launch__action { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 24px; }
.core-launch__action > div { display: flex; align-items: baseline; gap: 5px; }
.core-launch__action > div strong { color: #fff; font-size: 25px; }
.core-launch__action > div span { color: rgba(255,255,255,.55); }
.core-launch__action .ant-btn-primary { height: 50px; padding-inline: 25px; border: 0; border-radius: 14px; background: linear-gradient(105deg, #168bff, #20b967); font-weight: 900; box-shadow: 0 12px 32px rgba(22,139,255,.35); }
.core-launch__action .ant-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(22,139,255,.46); }
.core-launch__later { margin-top: 15px; border: 0; background: transparent; color: rgba(255,255,255,.45); cursor: pointer; }
.core-launch__later:hover { color: #fff; }

@keyframes core-launch-float { to { transform: translate3d(35px, 24px, 0) scale(1.15); } }

@keyframes core-name-shimmer { to { background-position: -220% 0; } }
@keyframes core-avatar-breathe { 50% { filter: brightness(1.12) drop-shadow(0 0 5px var(--core-glow)); } }
@keyframes core-hero-sweep { 0%, 55% { transform: translateX(-55%); } 85%, 100% { transform: translateX(55%); } }

@media (prefers-reduced-motion: reduce) {
  .core-identity,
  .core-identity .core-name,
  .core-hero::after { animation: none !important; }
  .core-launch__aurora i { animation: none !important; }
}

@media (max-width: 720px) {
  .core-preset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .core-controls, .core-action { align-items: stretch; flex-direction: column; }
  .core-launch__benefits { grid-template-columns: 1fr; }
  .core-launch__action { flex-direction: column; gap: 12px; }
}
.coin-economy-modal .ant-modal-content {
  overflow: hidden;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--sp-border) 72%, #d3a73f 28%);
  border-radius: 8px;
  background: var(--sp-surface);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
}

.coin-economy-modal .ant-modal-close {
  top: 18px;
  right: 18px;
  color: var(--sp-text-secondary);
}

.coin-economy__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 56px 20px 24px;
  border-bottom: 1px solid var(--sp-border);
  background:
    linear-gradient(110deg, rgba(211, 167, 63, 0.12), transparent 42%),
    var(--sp-surface);
}

.coin-economy__title {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.coin-economy__title-icon {
  display: grid;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(211, 167, 63, 0.45);
  border-radius: 8px;
  color: #d3a73f;
  background: rgba(211, 167, 63, 0.1);
  font-size: 22px;
}

.coin-economy__eyebrow,
.coin-economy__section-title span,
.coin-economy__flow-head span {
  color: var(--sp-text-secondary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.coin-economy__title h2 {
  margin: 2px 0 1px;
  color: var(--sp-text);
  font-size: 22px;
  line-height: 1.2;
}

.coin-economy__title p {
  margin: 0;
  color: var(--sp-text-secondary);
  font-size: 13px;
}

.coin-economy__controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
}

.coin-economy__controls .ant-segmented {
  background: var(--sp-surface-soft);
}

.coin-economy__content {
  box-sizing: border-box;
  display: flex;
  max-height: min(680px, calc(100vh - 150px));
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
  padding: 22px 24px 26px;
}

.coin-economy__alert {
  margin: 16px 24px 0;
}

.coin-economy__hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.coin-economy__metric {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 11px;
  padding: 14px;
  border: 1px solid var(--sp-border);
  border-radius: 8px;
  background: var(--sp-surface-soft);
}

.coin-economy__metric-icon {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 7px;
  color: var(--sp-text-secondary);
  background: var(--sp-surface);
  font-size: 16px;
}

.coin-economy__metric > div {
  min-width: 0;
}

.coin-economy__metric-label,
.coin-economy__metric-note {
  display: block;
  overflow: hidden;
  color: var(--sp-text-secondary);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coin-economy__metric strong {
  display: block;
  margin: 3px 0 1px;
  color: var(--sp-text);
  font-size: 21px;
  line-height: 1.15;
}

.coin-economy__metric strong small {
  font-size: 11px;
  font-weight: 700;
}

.coin-economy__metric--supply .coin-economy__metric-icon,
.coin-economy__metric--positive .coin-economy__metric-icon {
  color: #25b985;
  background: rgba(37, 185, 133, 0.12);
}

.coin-economy__metric--negative .coin-economy__metric-icon,
.coin-economy__metric--spent .coin-economy__metric-icon {
  color: #f05f68;
  background: rgba(240, 95, 104, 0.12);
}

.coin-economy__metric--issued .coin-economy__metric-icon,
.coin-economy__metric--wager .coin-economy__metric-icon {
  color: #d3a73f;
  background: rgba(211, 167, 63, 0.12);
}

.coin-economy__metric--payout .coin-economy__metric-icon,
.coin-economy__metric--refund .coin-economy__metric-icon {
  color: #5b9cf0;
  background: rgba(91, 156, 240, 0.12);
}

.coin-economy__flows,
.coin-economy__users {
  border-top: 1px solid var(--sp-border);
  padding-top: 18px;
}

.coin-economy__flow-head,
.coin-economy__section-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.coin-economy__flow-head div,
.coin-economy__section-title div {
  display: flex;
  flex-direction: column;
}

.coin-economy__flow-head strong,
.coin-economy__section-title strong {
  color: var(--sp-text);
  font-size: 15px;
}

.coin-economy__flow-head .coin-economy__tracking,
.coin-economy__section-title > span {
  color: var(--sp-text-secondary);
  font-size: 11px;
  font-weight: 500;
  text-transform: none;
}

.coin-economy__flow-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.coin-economy__flow-grid .coin-economy__metric {
  padding: 11px;
}

.coin-economy__flow-grid .coin-economy__metric strong {
  font-size: 17px;
}

.coin-economy__user-list {
  overflow: hidden;
  border: 1px solid var(--sp-border);
  border-radius: 8px;
}

.coin-economy__user-row {
  display: grid;
  grid-template-columns: 30px minmax(150px, 1fr) 86px 86px 100px;
  min-height: 56px;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--sp-border);
}

.coin-economy__user-row:last-child {
  border-bottom: 0;
}

.coin-economy__rank {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 6px;
  color: #d3a73f;
  background: rgba(211, 167, 63, 0.1);
  font-size: 12px;
  font-weight: 800;
}

.coin-economy__identity,
.coin-economy__user-flow {
  min-width: 0;
}

.coin-economy__identity strong,
.coin-economy__identity span,
.coin-economy__user-flow span,
.coin-economy__user-flow strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coin-economy__identity strong {
  color: var(--sp-text);
  font-size: 13px;
}

.coin-economy__identity span,
.coin-economy__user-flow span {
  color: var(--sp-text-secondary);
  font-size: 10px;
}

.coin-economy__user-flow strong {
  margin-top: 2px;
  font-size: 12px;
}

.coin-economy__user-flow--in strong,
.coin-economy__net.is-positive {
  color: #25b985;
}

.coin-economy__user-flow--out strong,
.coin-economy__net.is-negative {
  color: #f05f68;
}

.coin-economy__net {
  text-align: right;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.coin-economy__empty {
  padding: 34px 16px;
  border: 1px dashed var(--sp-border);
  border-radius: 8px;
  color: var(--sp-text-secondary);
  text-align: center;
}

@media (max-width: 1180px) {
  .coin-economy-modal {
    max-width: calc(100vw - 32px);
  }

  .coin-economy__header {
    flex-direction: column;
  }

  .coin-economy__controls {
    width: 100%;
    justify-content: space-between;
  }

  .coin-economy__flow-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .coin-economy__content {
    max-height: calc(100vh - 230px);
  }
}

@media (max-width: 900px) {
  .coin-economy__hero-metrics {
    grid-template-columns: 1fr;
  }

  .coin-economy__user-row {
    grid-template-columns: 30px minmax(120px, 1fr) 74px 74px;
  }

  .coin-economy__net {
    display: none;
  }
}