/* Clean, last-loaded portrait card layout. No legacy mobile positions survive this file. */

/* Last-loaded shared popup layer: keep points and roem above cards on every viewport. */
body.game-active .table > #trickPoints,
body.game-active .table > #roemBurst {
  position: absolute !important;
  z-index: 2147483000 !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  margin: 0 !important;
  translate: none !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  padding: clamp(8px, 1.8cqw, 12px) clamp(12px, 2.8cqw, 18px) !important;
}

body.game-active .table > #trickPoints strong,
body.game-active .table > #roemBurst strong {
  max-width: 100% !important;
  margin: 0 !important;
  font-size: clamp(18px, 4.6cqw, 28px) !important;
  line-height: 1 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  text-align: center !important;
}

body.game-active .table > #trickPoints span,
body.game-active .table > #roemBurst span {
  max-width: 100% !important;
  margin: 4px 0 0 !important;
  font-size: clamp(9px, 2.1cqw, 12px) !important;
  line-height: 1.15 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  text-align: center !important;
}

body.game-active .table > #trickPoints {
  top: 50% !important;
}

body.game-active .table > #roemBurst {
  /* Half points-popup + gap + half roem-popup: always fully below it. */
  top: calc(50% + clamp(78px, 15cqw, 112px)) !important;
}

body.game-active .table > #trickPoints.burst-active,
body.game-active .table > #roemBurst.burst-active {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  animation: finalOutcomePopup 1700ms ease both !important;
}

body.game-active .table > #trickPoints[hidden],
body.game-active .table > #roemBurst[hidden] {
  display: none !important;
}

@keyframes finalOutcomePopup {
  0% { visibility: visible; opacity: 0; transform: translate(-50%, -50%) scale(.9); }
  10%, 82% { visibility: visible; opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { visibility: visible; opacity: 0; transform: translate(-50%, -50%) scale(.96); }
}

/* iOS zoomt automatisch in bij invoervelden kleiner dan 16px. */
@media (max-width: 1100px) {
  body.game-active #tableChatInput,
  body.game-active .table-chat-form input,
  .social-chat-form input {
    font-size: 16px !important;
    line-height: 1.2 !important;
  }
}

/* Alle-berichten-popup: het bericht is belangrijker dan de afzender. */
body.game-active .chat-history-dialog {
  color: #fffaf0 !important;
  background: rgba(9, 25, 20, .99) !important;
}

body.game-active .chat-history-dialog > .last-trick-header span,
body.game-active .chat-history-dialog > .last-trick-header strong,
body.game-active .chat-history-dialog #chatHistoryTitle {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.55) !important;
}

body.game-active .chat-history-list {
  gap: 10px !important;
  padding: 4px !important;
}

body.game-active .chat-history-list .chat-line {
  display: grid !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 11px 13px !important;
  border: 1px solid rgba(230, 200, 133, .32) !important;
  border-left: 4px solid rgba(217, 170, 69, .72) !important;
  border-radius: 9px !important;
  background: rgba(32, 50, 40, .96) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 4px 12px rgba(0,0,0,.2) !important;
}

body.game-active .chat-history-list .chat-line.ai {
  border-left-color: #74b99b !important;
  background: rgba(25, 54, 43, .97) !important;
}

body.game-active .chat-history-list .chat-line.system {
  border-left-color: #6daed0 !important;
  background: rgba(22, 47, 58, .97) !important;
}

body.game-active .chat-history-list .chat-line strong {
  display: block !important;
  margin: 0 !important;
  color: #d8c99f !important;
  font-size: clamp(11px, 2.5vw, 13px) !important;
  font-weight: 750 !important;
  line-height: 1.1 !important;
  letter-spacing: .02em !important;
}

body.game-active .chat-history-list .chat-line span {
  display: block !important;
  margin: 0 !important;
  color: #ffffff !important;
  font-size: clamp(15px, 3.6vw, 17px) !important;
  font-weight: 600 !important;
  line-height: 1.42 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.55) !important;
  overflow-wrap: anywhere !important;
}

/* Complete lichte spelmodus: warme panelen, donker leesbare tekst en duidelijke acties. */
:root[data-theme="light"] body.game-active {
  color: #2c241b !important;
  background-color: #d9dfd1 !important;
}

:root[data-theme="light"] body.game-active::before {
  background: rgba(246, 241, 229, .38) !important;
}

:root[data-theme="light"]:has(body.game-active) {
  background: #d9dfd1 !important;
}

/* De standaard donkergroene clubsfeer krijgt in lichte modus een lichte linnenvariant. */
:root[data-theme="light"] body.game-active[data-game-background="atmosphere"] {
  background-color: #d9dfd1 !important;
  background-image:
    repeating-linear-gradient(118deg, rgba(255,255,255,.16) 0, rgba(255,255,255,.16) 1px, rgba(87,105,82,.035) 1px, rgba(87,105,82,.035) 3px),
    radial-gradient(ellipse at 50% 42%, rgba(255,253,244,.92) 0%, rgba(231,235,220,.82) 44%, rgba(198,210,194,.78) 74%, rgba(172,190,176,.9) 100%),
    linear-gradient(180deg, #edf0e5 0%, #d8dfd0 56%, #becdc0 100%) !important;
  background-repeat: repeat, no-repeat, no-repeat !important;
  background-position: center !important;
  background-size: 5px 5px, cover, cover !important;
}

/* Fotoachtergronden blijven zichtbaar, maar zonder de zware donkere vignette. */
:root[data-theme="light"] body.game-active:not([data-game-background="atmosphere"])::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background: rgba(244, 240, 226, .2) !important;
  backdrop-filter: brightness(1.14) saturate(.82) !important;
}

:root[data-theme="light"] body.game-active .app-shell {
  position: relative !important;
  z-index: 1 !important;
}

:root[data-theme="light"] body.game-active :is(
  .top-bar,
  .score-panel,
  .hand-panel,
  .table-chat,
  .game-events,
  .message,
  .bid-popup-dialog
) {
  color: #2d271f !important;
  border-color: rgba(115, 87, 33, .42) !important;
  background: linear-gradient(145deg, rgba(250,247,238,.97), rgba(224,228,216,.97)) !important;
  box-shadow: 0 8px 24px rgba(54,43,27,.18) !important;
}

:root[data-theme="light"] body.game-active :is(.status-pill, .score-board) {
  color: #282118 !important;
  border: 1px solid rgba(103, 85, 55, .2) !important;
  background: rgba(255, 253, 246, .92) !important;
}

:root[data-theme="light"] body.game-active :is(.status-pill, .score-board) span {
  color: #655a4a !important;
}

:root[data-theme="light"] body.game-active :is(
  .top-bar .eyebrow,
  .top-bar h1,
  .hand-title,
  .hand-panel h2,
  .table-chat-header strong,
  .message,
  #hintText
) {
  color: #29231b !important;
  text-shadow: none !important;
}

:root[data-theme="light"] body.game-active .table-chat-header :is(span, small),
:root[data-theme="light"] body.game-active .hand-panel p {
  color: #665947 !important;
}

:root[data-theme="light"] body.game-active .table-chat-log {
  color: #29231b !important;
  border: 1px solid rgba(71,105,91,.36) !important;
  background: rgba(245,249,244,.96) !important;
}

:root[data-theme="light"] body.game-active .table-chat-log .chat-line strong {
  color: #66502b !important;
}

:root[data-theme="light"] body.game-active .table-chat-log .chat-line span {
  color: #28231d !important;
}

:root[data-theme="light"] body.game-active #tableChatInput {
  color: #18271f !important;
  border: 2px solid #47735e !important;
  background: #ffffff !important;
  box-shadow: inset 0 1px 3px rgba(34,49,40,.1) !important;
}

:root[data-theme="light"] body.game-active #tableChatInput::placeholder {
  color: #736f66 !important;
  opacity: 1 !important;
}

:root[data-theme="light"] body.game-active :is(
  .start-game-button,
  #nextGameButton,
  .bid-popup-actions button:first-child,
  .table-chat-form button
) {
  color: #ffffff !important;
  border: 2px solid #165338 !important;
  background: linear-gradient(145deg, #2c8056, #16563a) !important;
  box-shadow: 0 4px 10px rgba(21,78,51,.28), inset 0 1px rgba(255,255,255,.22) !important;
  font-weight: 850 !important;
}

:root[data-theme="light"] body.game-active :is(
  #lastTrickButton,
  .bid-popup-actions button:not(:first-child),
  .info-button
) {
  color: #302511 !important;
  border: 2px solid #bd8d28 !important;
  background: linear-gradient(145deg, #fff4d0, #e7c978) !important;
  box-shadow: 0 4px 10px rgba(105,78,21,.2) !important;
  font-weight: 800 !important;
}

:root[data-theme="light"] body.game-active button:disabled {
  color: #77746b !important;
  border-color: #c9c5b8 !important;
  background: #e2dfd4 !important;
  box-shadow: none !important;
  opacity: .72 !important;
}

:root[data-theme="light"] body.game-active .bid-popup-dialog :is(.eyebrow, p, span) {
  color: #5e5548 !important;
}

:root[data-theme="light"] body.game-active .bid-popup-dialog :is(h2, strong) {
  color: #174b34 !important;
}

:root[data-theme="light"] body.game-active .hand-panel {
  background: linear-gradient(145deg, rgba(249,246,235,.96), rgba(219,226,211,.96)) !important;
}

:root[data-theme="light"] body.game-active .score-panel {
  background: linear-gradient(180deg, rgba(239,243,233,.98), rgba(215,224,209,.98)) !important;
}

/* Verfijnde lichte scorekaarten: duidelijk los van het zijpaneel. */
:root[data-theme="light"] body.game-active .score-board > .score-card {
  color: #173f2d !important;
  border: 1px solid rgba(35, 96, 66, .38) !important;
  border-left: 5px solid #277653 !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #ffffff, #dceadf) !important;
  box-shadow: 0 5px 14px rgba(41,72,54,.16), inset 0 1px #fff !important;
}

:root[data-theme="light"] body.game-active .score-board > .score-card:nth-child(2) {
  border-left-color: #a44b42 !important;
  background: linear-gradient(135deg, #fffdf9, #eee2da) !important;
}

:root[data-theme="light"] body.game-active .score-board > .score-card:nth-child(3) {
  border-left-color: #c28d22 !important;
  background: linear-gradient(135deg, #fffdf5, #f1e6bc) !important;
}

:root[data-theme="light"] body.game-active .score-board > .score-card span {
  color: #5a5145 !important;
  font-weight: 700 !important;
}

:root[data-theme="light"] body.game-active .score-board > .score-card strong {
  color: #172d22 !important;
  font-weight: 900 !important;
}

/* Biedpopup met twee ondubbelzinnige acties. */
:root[data-theme="light"] body.game-active .bid-popup-dialog {
  border: 2px solid rgba(42,103,72,.55) !important;
  background: linear-gradient(145deg, #fffdf7, #dfe9dc) !important;
  box-shadow: 0 18px 45px rgba(24,49,35,.3) !important;
}

:root[data-theme="light"] body.game-active #bidPopupActions {
  gap: 12px !important;
}

:root[data-theme="light"] body.game-active #bidPopupActions button:first-child {
  color: #ffffff !important;
  border: 2px solid #145036 !important;
  background: linear-gradient(145deg, #359267, #176044) !important;
  box-shadow: 0 5px 13px rgba(19,84,55,.3) !important;
}

:root[data-theme="light"] body.game-active #bidPopupActions button:not(:first-child) {
  color: #44300d !important;
  border: 2px solid #b9841c !important;
  background: linear-gradient(145deg, #fff4cf, #e6bd55) !important;
  box-shadow: 0 5px 13px rgba(114,78,13,.22) !important;
}

/* Handkaarten blijven helder, ook wanneer bieden ze tijdelijk uitschakelt. */
:root[data-theme="light"] body.game-active:not([data-card-style="classic"]) #playerHand .card {
  color: #171713 !important;
  border: 2px solid #b99a42 !important;
  background: linear-gradient(145deg, #ffffff, #fffaf0) !important;
  box-shadow: 0 7px 16px rgba(64,48,16,.24), 0 0 0 2px rgba(255,255,255,.65) !important;
  opacity: 1 !important;
  filter: none !important;
}

:root[data-theme="light"] body.game-active:not([data-card-style="classic"]) #playerHand .card.red {
  color: #d43e3e !important;
}

:root[data-theme="light"] body.game-active:not([data-card-style="classic"]) #playerHand .card:disabled {
  color: #34342d !important;
  border-color: #baa869 !important;
  background: linear-gradient(145deg, #fffefa, #f4efe2) !important;
  box-shadow: 0 5px 12px rgba(64,48,16,.18) !important;
  opacity: .92 !important;
  filter: none !important;
}

:root[data-theme="light"] body.game-active:not([data-card-style="classic"]) #playerHand .card.red:disabled {
  color: #c94646 !important;
}

:root[data-theme="light"] body.game-active:not([data-card-style="classic"]) #playerHand .card:not(:disabled):hover {
  border-color: #2b7d57 !important;
  box-shadow: 0 9px 20px rgba(34,104,70,.28), 0 0 0 3px rgba(55,139,94,.2) !important;
}

/* De klassieke kaartstijl gebruikt eigen illustraties. Een `background`-override
   in lichte modus wistte die afbeeldingen, waardoor alleen lege kaarten
   zichtbaar waren. Houd de illustratie ook tijdens bieden en delen actief. */
:root[data-theme="light"] body.game-active[data-card-style="classic"] #playerHand .card {
  background-image: var(--classic-card-image) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-color: #fffdf7 !important;
  border: 2px solid #9b7a2d !important;
  box-shadow: 0 7px 16px rgba(64,48,16,.27), 0 0 0 2px rgba(255,255,255,.72) !important;
  opacity: 1 !important;
  filter: none !important;
}

:root[data-theme="light"] body.game-active[data-card-style="classic"] #playerHand .card:disabled {
  background-image: var(--classic-card-image) !important;
  opacity: .9 !important;
  filter: saturate(.88) !important;
}

/* De echte hand blijft verborgen zolang de deelanimatie loopt. Deze regel staat
   bewust na de lichte klassieke kaartregels, zodat hun opacity-override de
   bestaande onthulling niet voortijdig kan opheffen. */
:root[data-theme="light"] body.game-active.deal-animation-active[data-card-style="classic"] #playerHand .card,
:root[data-theme="light"] body.game-active.deal-animation-active[data-card-style="classic"] #playerHand .card:disabled {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(10px) scale(.98) !important;
}

/* Tijdens de biedronde tilde de algemene aandachtstijl de hand 4px op. In de
   compacte handstrook is de kaart exact even hoog als het vak en werd daardoor
   de bovenkant afgesneden. Klassieke kaarten blijven binnen hun eigen vak. */
:root[data-theme="light"] body.game-active[data-card-style="classic"][data-bid-phase="bidding"] #playerHand .card,
:root[data-theme="light"] body.game-active[data-card-style="classic"][data-bid-phase="bidding"] #playerHand .card:disabled {
  transform: none !important;
}

/* Spelerinformatie blijft op de geïllustreerde tafel altijd contrastrijk. */
:root[data-theme="light"] body.game-active .table .player-info {
  color: #ffffff !important;
  border: 1px solid rgba(255, 226, 150, .42) !important;
  background: rgba(19, 24, 19, .91) !important;
  box-shadow: 0 5px 14px rgba(0,0,0,.42) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.95) !important;
  opacity: 1 !important;
}

:root[data-theme="light"] body.game-active .table .player-info span {
  color: #ffffff !important;
  font-weight: 900 !important;
  opacity: 1 !important;
}

:root[data-theme="light"] body.game-active .table .player-info small {
  color: #f3e5be !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}

:root[data-theme="light"] body.game-active .table .trick-stack strong {
  color: #211704 !important;
  border: 2px solid rgba(87,57,4,.35) !important;
  background: #e5b43d !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.38) !important;
  font-weight: 950 !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

:root[data-theme="light"] body.game-active .table .trick-stack small {
  color: #ffffff !important;
  font-weight: 850 !important;
  text-shadow: 0 2px 4px rgba(0,0,0,.95), 0 0 3px rgba(0,0,0,.9) !important;
  opacity: 1 !important;
}

/* Alle modale vensters in lichte modus: expliciet contrast voor lokaal én online. */
:root[data-theme="light"] :is(
  .online-dialog,
  .last-trick-dialog,
  .boom-dialog,
  .info-dialog,
  .settings-dialog,
  .chat-history-dialog,
  .bid-popup-dialog
) {
  color: #30271f !important;
  border-color: #b88a32 !important;
  background: linear-gradient(145deg, #fffdf8 0%, #e3e9dc 100%) !important;
  box-shadow: 0 24px 64px rgba(36,45,35,.32), inset 0 0 0 3px rgba(255,255,255,.68) !important;
}

:root[data-theme="light"] :is(
  .online-dialog,
  .last-trick-dialog,
  .boom-dialog,
  .info-dialog,
  .settings-dialog,
  .chat-history-dialog
) > .last-trick-header :is(span, strong) {
  color: #184a33 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

:root[data-theme="light"] :is(.last-trick-summary, .boom-winner, .chat-history-note) {
  color: #342a21 !important;
  border: 1px solid rgba(146,108,38,.28) !important;
  background: #fffaf0 !important;
}

/* Pot-/slagterugblik gebruikt donkere kaarten: dus altijd lichte tekst erop. */
:root[data-theme="light"] :is(.last-trick-dialog, .boom-dialog) .pot-review-row {
  border: 1px solid rgba(229,190,104,.38) !important;
  background: #20382e !important;
  box-shadow: inset 0 1px rgba(255,255,255,.04), 0 4px 12px rgba(29,45,35,.16) !important;
}

:root[data-theme="light"] :is(.last-trick-dialog, .boom-dialog) .pot-review-row :is(p, small) {
  color: #f1e7d4 !important;
  opacity: 1 !important;
}

:root[data-theme="light"] :is(.last-trick-dialog, .boom-dialog) .pot-review-row span {
  color: #f0bc48 !important;
  font-weight: 850 !important;
  opacity: 1 !important;
}

:root[data-theme="light"] :is(.last-trick-dialog, .boom-dialog) .pot-review-row strong {
  color: #ffffff !important;
  font-weight: 900 !important;
  opacity: 1 !important;
}

/* Online oppervlakken die licht zijn krijgen consequent donkere tekst. */
:root[data-theme="light"] .online-dialog :is(
  .online-card,
  .online-profile > div,
  .online-match-head > div,
  .ranking-columns > section,
  .leaderboard-row,
  .social-player-card,
  .social-search-result,
  .social-invite-card,
  .social-message-row,
  .settings-toggle,
  .settings-field
) {
  color: #30271f !important;
  border-color: rgba(54,102,76,.28) !important;
  background: rgba(255,253,247,.94) !important;
}

:root[data-theme="light"] .online-dialog :is(
  .online-card,
  .online-profile,
  .online-match-head,
  .ranking-columns,
  .leaderboard-row,
  .social-player-card,
  .social-search-result,
  .social-invite-card,
  .social-message-row
) :is(h1,h2,h3,strong) {
  color: #173f2d !important;
  opacity: 1 !important;
}

:root[data-theme="light"] .online-dialog :is(
  .online-card,
  .online-profile,
  .online-match-head,
  .ranking-columns,
  .leaderboard-row,
  .social-player-card,
  .social-search-result,
  .social-invite-card,
  .social-message-row
) :is(p,span,small,label) {
  color: #584a3d !important;
  opacity: 1 !important;
}

/* Donkere online helden/keuzes behouden juist witte tekst. */
:root[data-theme="light"] .online-dialog :is(
  .daily-reference-hero,
  .daily-hero-upgraded,
  .premium-hero,
  .online-table-option.selected,
  .social-chat,
  .social-chat-messages p
) :is(h1,h2,h3,strong,p,span,small,label) {
  color: #fff8e8 !important;
  opacity: 1 !important;
}

:root[data-theme="light"] :is(.info-dialog, .settings-dialog) :is(p,li,span,small,label) {
  color: #51463b !important;
  opacity: 1 !important;
}

:root[data-theme="light"] :is(.info-dialog, .settings-dialog) :is(h1,h2,h3,h4,strong) {
  color: #173f2d !important;
  opacity: 1 !important;
}

:root[data-theme="light"] :is(.online-dialog, .info-dialog, .settings-dialog) :is(input,select,textarea) {
  color: #252019 !important;
  border: 1px solid #557965 !important;
  background: #ffffff !important;
}

:root[data-theme="light"] :is(.online-dialog, .last-trick-dialog, .boom-dialog, .info-dialog, .settings-dialog) button {
  opacity: 1 !important;
}

@media (orientation: portrait) and (max-width: 700px) {
  body.game-active .table {
    --table-play-card-width: clamp(48px, 12.5cqw, 58px) !important;
    --table-play-card-height: calc(var(--table-play-card-width) * 1.45) !important;
  }

  body.game-active .table > .trick-area {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
  }

  body.game-active .table > .trick-area .played-card {
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    transition: none !important;
    animation: none !important;
  }

  body.game-active .table > .trick-area .played-card.seat-partner {
    top: 53% !important;
    left: 50% !important;
  }

  body.game-active .table > .trick-area .played-card.seat-user {
    top: 77% !important;
    left: 50% !important;
  }

  body.game-active .table > .trick-area .played-card.seat-left {
    top: 65% !important;
    left: 35% !important;
  }

  body.game-active .table > .trick-area .played-card.seat-right {
    top: 65% !important;
    left: 65% !important;
  }

  body.game-active .table > .trick-area .played-card .mini-card {
    transition: none !important;
    animation: none !important;
  }
}

@media (orientation: landscape) and (max-height: 700px) and (max-width: 1100px) {
  body.game-active .table {
    --table-play-card-width: clamp(48px, 10cqw, 62px) !important;
    --table-play-card-height: calc(var(--table-play-card-width) * 1.45) !important;
  }

  body.game-active .table > #trickPoints,
  body.game-active .table > #roemBurst {
    width: clamp(126px, 27cqw, 174px) !important;
    min-width: 0 !important;
    max-width: min(174px, calc(100% - 24px)) !important;
    min-height: 48px !important;
    padding: 7px 12px !important;
  }

  body.game-active .table > #trickPoints strong,
  body.game-active .table > #roemBurst strong {
    font-size: clamp(17px, 4cqw, 24px) !important;
  }

  body.game-active .table > #trickPoints span,
  body.game-active .table > #roemBurst span {
    font-size: clamp(8px, 1.8cqw, 11px) !important;
  }
}

/* De schud- en deelkaarten zijn decoratief. Houd ze op telefoons én in de
   compacte browserweergave duidelijk kleiner dan de gewone speelkaarten. */
@media (max-width: 980px) {
  body.game-active .deal-animation-layer {
    --deal-card-w: clamp(20px, 3vw, 28px) !important;
    --deal-card-h: calc(var(--deal-card-w) * 1.42) !important;
  }

  body.game-active .table .deal-animation-layer :is(.deal-card, .deal-mini-card) {
    width: var(--deal-card-w) !important;
    height: var(--deal-card-h) !important;
    min-width: var(--deal-card-w) !important;
    min-height: var(--deal-card-h) !important;
    max-width: var(--deal-card-w) !important;
    max-height: var(--deal-card-h) !important;
  }

  body.game-active .deal-animation-layer .deal-glow {
    width: min(120px, 28%) !important;
  }
}