/* NGAO: reuses the Blackjack / 3 Card Poker table styles (bj.css, tcp.css); only the differences live here */
#ngSub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ngSpk.on, #ngMic.on { color: var(--brand); background: var(--surface-2); }
.bj.ng .betbox .ctl-row { margin-top: 6px; } .bj.ng #ngPlace { padding-top: 9px; padding-bottom: 9px; }
.bj.ng .bet-spots { grid-template-columns: 1fr; }
.bj.ng .bet-info span { white-space: normal; }

/* seat hands: 5 cards in a row, the hand name under them */
.ng .seat .hands { align-items: center; }
.ng .mh.ng-mh .pcard.mini + .pcard.mini { margin-left: -12px; }
.ng .mh.ng-mh .pcard.mini.gap { margin-left: -4px; }
.ng .mh.ng-mh .pcard.mini.rest { transform: translateY(-3px); }
.ng .tot.ng-tot { display: inline-block; margin-top: 1px; font-size: 9.5px; font-weight: 800; background: rgba(0,0,0,.6); border-radius: 6px; padding: 0 5px; white-space: nowrap; }
.ng .tot.ng-tot.bj { background: var(--gold); color: #3b2200; } .ng .tot.ng-tot.bust { background: #4b5563; }
.ng .seat.edge-l .hands { left: 4px; align-items: flex-start; } .ng .seat.edge-r .hands { right: 4px; align-items: flex-end; }
.ng .seat.edge-l .schip { transform: translateX(calc(50% - 29px)); }
.ng .seat.edge-r .schip { transform: translateX(calc(-50% + 29px)); }
.ng .cut-badge { position: absolute; right: -6px; top: -6px; background: var(--gold); color: #3b2200; border-radius: 50%; width: 18px; height: 18px; font-size: 11px; display: flex; align-items: center; justify-content: center; animation: glow 1.2s ease-in-out infinite; }
.ng .bj-phase small { display: block; font-size: 10px; opacity: .85; font-weight: 700; }
/* more seats → smaller cards */
.ng-table[data-n="7"] .seat, .ng-table[data-n="8"] .seat { width: 50px; }
.ng-table[data-n="9"] .seat, .ng-table[data-n="10"] .seat { width: 44px; }
.ng-table[data-n="8"] .pcard.mini, .ng-table[data-n="9"] .pcard.mini, .ng-table[data-n="10"] .pcard.mini { width: 18px; height: 26px; }
.ng-table[data-n="8"] .pcard.mini b, .ng-table[data-n="9"] .pcard.mini b, .ng-table[data-n="10"] .pcard.mini b { font-size: 8.5px; }
.ng-table[data-n="8"] .mh.ng-mh .pcard.mini + .pcard.mini, .ng-table[data-n="9"] .mh.ng-mh .pcard.mini + .pcard.mini, .ng-table[data-n="10"] .mh.ng-mh .pcard.mini + .pcard.mini { margin-left: -10px; }
.ng-table[data-n="9"] .seat .av.sm, .ng-table[data-n="10"] .seat .av.sm { width: 28px; height: 28px; }

/* the banker's 5 cards */
.ng .dl-cards.ng-dl .pcard + .pcard { margin-left: -18px; }
.ng .dl-cards.ng-dl .pcard.art + .pcard.art { margin-left: -24px; }
.ng .dl-cards.ng-dl .pcard.gap { margin-left: -4px !important; }
.ng .dl-cards.ng-dl .pcard.rest { transform: translateY(4px); }
.ng .dl-tot span.bj { background: var(--gold); color: #3b2200; border-radius: 6px; padding: 0 6px; }

/* my hand */
.bj.ng .bj-me .bjh-cards .pcard { width: 42px; height: 60px; }
.bj.ng .bj-me .bjh-cards .pcard.art + .pcard.art { margin-left: -16px; }
.bj.ng .bj-me .bjh-cards .pcard.gap { margin-left: 4px !important; }
.bj.ng .bj-me .bjh-cards .pcard.rest { transform: translateY(-5px); }
.bj.ng .bj-me .bjh { padding: 4px 8px; }
.bjh.ng-mine .bjh-info { flex-wrap: wrap; }
.bjh.ng-mine.r-win { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(243,196,107,.25); }
.bjh.ng-mine .pos { color: var(--ok); font-weight: 800; } .bjh.ng-mine .neg { color: var(--err); font-weight: 800; }

/* joker */
.pcard.joker { color: #c4122f; background: linear-gradient(160deg, #fff7e2, #f6e2b8); }
.pcard.joker b { color: #c4122f; } .pcard.joker i { font-size: 7px; font-weight: 800; color: #7b1e2e; }
.pcard .jas { position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); font-style: normal; font-size: 8.5px; font-weight: 900; line-height: 1; background: #161214; color: #fff; border-radius: 4px; padding: 1px 3px; white-space: nowrap; z-index: 2; }
.pcard .jas.red { color: #ffb3bf; }
.pcard.big .jas, .pcard.mid .jas { font-size: 10px; bottom: -6px; }

/* cut panel (the player who cuts) */
.ng-cut { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: rgba(16,5,8,.55); animation: fadeIn .2s; }
.ngc-box { width: min(320px, calc(100% - 32px)); background: var(--surface); color: var(--text); border: 1.5px solid var(--gold); border-radius: 16px; padding: 16px; text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,.45); }
.ngc-t { font-size: 18px; font-weight: 900; } .ngc-s { font-size: 12px; opacity: .75; margin-top: 4px; }
.ngc-deck { margin: 14px auto 6px; width: 64px; height: 120px; display: flex; flex-direction: column; gap: 6px; }
.ngc-deck > div { border-radius: 6px; border: 2px solid #fbf7f0; outline: 1px solid rgba(243,196,107,.6); outline-offset: -5px; min-height: 4px; transition: height .12s;
  background: repeating-linear-gradient(0deg, #9c2a3f 0 3px, #7b1e2e 3px 5px); box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.ngc-top { transform: translateX(-10px); } .ngc-bot { transform: translateX(10px); }
.ngc-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.ngc-row input[type=range] { flex: 1; accent-color: #c4122f; }
.ngc-row b { min-width: 44px; font-size: 18px; color: var(--brand); }
.ngc-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.ngc-timer { font-size: 11px; opacity: .7; margin-top: 8px; min-height: 14px; }

/* everyone: cut animation */
.ngcut-anim { position: relative; width: 120px; height: 90px; margin: 0 auto; }
.ngcut-anim .half { position: absolute; left: 30px; width: 60px; height: 84px; }
.ngcut-anim .half i { position: absolute; inset: 0; border-radius: 6px; border: 2px solid #fbf7f0; background: repeating-linear-gradient(45deg, #9c2a3f 0 4px, #5a1220 4px 8px); box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.ngcut-anim .half i:nth-child(2) { transform: translate(-1px, -1px); } .ngcut-anim .half i:nth-child(3) { transform: translate(-2px, -2px); }
.ngcut-anim .half.a { animation: ngcutA 1s var(--ease) both; z-index: 2; }
.ngcut-anim .half.b { animation: ngcutB 1s var(--ease) both; }
@keyframes ngcutA { 0% { transform: none; } 40% { transform: translate(-46px, -8px) rotate(-8deg); } 70% { transform: translate(-46px, -8px) rotate(-8deg); } 100% { transform: translate(0, 4px); z-index: 0; } }
@keyframes ngcutB { 0% { transform: none; } 40% { transform: translate(46px, 4px) rotate(6deg); } 70% { transform: translate(0, -6px); } 100% { transform: translate(0, -6px); } }

/* enter animation / lobby */
.ng-enter-cards { width: 170px; }
.ng-enter-cards .e3 { left: 33px; top: -8px; z-index: 1; animation: e2 .8s .05s var(--ease) both; }
.ng-enter-cards .e2 { left: 92px; }
.ng-room .bjr-felt { background: radial-gradient(ellipse at 50% 0, #b0273d, #4a0f1a 80%); }

/* history */
.ng-hist .ngh-stage { margin-top: 6px; padding-left: 8px; border-left: 2px solid var(--line); }
.ng-hist .ngh-st { font-size: 11px; font-weight: 800; color: var(--brand); }
.ng-hist .ngh-b { font-weight: 600; }
.ng-hist span.gap { margin-left: 6px; }
.ng-hist .ngh-tot { margin-top: 6px; font-weight: 700; }
.ng-hist .red { color: #c0283c; }
.ng-hist b.pos { color: var(--ok); } .ng-hist b.neg { color: var(--err); }
.rules .kv small { opacity: .7; font-size: 11px; }