/* Telefoon liggend: vaste tafelindeling volgens het aangeleverde ontwerp. */
.landscape-game-status,
.landscape-variant-label { display: none; }

@media (orientation: landscape) and (max-width: 1100px) and (max-height: 700px) {
  html,
  body.game-active {
    width: 100% !important;
    height: var(--app-visible-height, 100dvh) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.game-active {
    background-color: #160e08 !important;
    background-position: center !important;
    background-size: cover !important;
  }

  body.game-active .app-shell {
    position: relative !important;
    isolation: isolate !important;
    box-sizing: border-box !important;
    width: 100vw !important;
    max-width: none !important;
    height: var(--app-visible-height, 100dvh) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: max(6px, env(safe-area-inset-top)) max(7px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(7px, env(safe-area-inset-left)) !important;
    display: grid !important;
    grid-template-columns: minmax(118px, 17%) minmax(0, 63%) minmax(142px, 20%) !important;
    grid-template-rows: minmax(0, 32%) minmax(0, 57%) minmax(42px, 11%) !important;
    grid-template-areas:
      "status table score"
      "chat table hand"
      "events table hand" !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  body.game-active .app-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(18, 10, 5, .42);
    pointer-events: none;
  }

  body.game-active :is(.top-bar, .score-board, .hand-panel, .table-chat, .game-events) {
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border: 1px solid rgba(206, 170, 91, .28) !important;
    border-radius: 10px !important;
    background: linear-gradient(145deg, rgba(16, 31, 22, .97), rgba(8, 20, 14, .94)) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 8px 22px rgba(0,0,0,.3) !important;
    overflow: hidden !important;
  }

  /* Linksboven: merk, troef, speler en slag. */
  body.game-active .top-bar {
    grid-area: status !important;
    width: 100% !important;
    height: 100% !important;
    padding: clamp(8px, 1.5vh, 13px) !important;
    display: grid !important;
    grid-template-rows: auto !important;
    align-content: start !important;
    align-items: start !important;
    gap: 0 !important;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }

  body.game-active[data-game-variant="amsterdam"] .top-bar {
    background-image:
      linear-gradient(145deg, rgba(7, 25, 16, .68), rgba(5, 18, 12, .9)),
      url("./assets/amsterdam-canals.png") !important;
  }

  body.game-active[data-game-variant="rotterdam"] .top-bar {
    background-image:
      linear-gradient(145deg, rgba(7, 25, 16, .68), rgba(5, 18, 12, .9)),
      url("./assets/rotterdam-harbor.png") !important;
  }

  body.game-active .top-bar > div:first-child {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body.game-active .top-bar .eyebrow {
    display: block !important;
    margin: 0 !important;
    color: #e0b857 !important;
    font: 800 clamp(11px, 2.2vh, 16px)/1.05 Arial, sans-serif !important;
  }

  body.game-active .landscape-variant-label {
    display: block !important;
    margin-top: 5px !important;
    color: #fffaf0 !important;
    font-size: clamp(12px, 2.5vh, 17px) !important;
    line-height: 1.05 !important;
    font-weight: 600 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.game-active .top-bar h1 { display: none !important; }
  body.game-active .top-variant-thumb { display: none !important; }

  body.game-active .status-grid { display: none !important; }

  body.game-active .status-pill {
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 6px 8px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,.045) !important;
    overflow: hidden !important;
  }

  body.game-active .trump-status {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
  }

  body.game-active .trump-status > span { display: none !important; }
  body.game-active .trump-status-content { display: contents !important; }
  body.game-active .trump-status-content strong {
    margin: 0 !important;
    color: #f7f0de !important;
    font-size: clamp(13px, 2.8vh, 19px) !important;
  }

  body.game-active .trump-status-icon {
    width: clamp(30px, 7vh, 42px) !important;
    height: clamp(30px, 7vh, 42px) !important;
    border-radius: 7px !important;
    font-size: clamp(22px, 5.4vh, 32px) !important;
  }

  body.game-active .status-pill span {
    color: #d8caa7 !important;
    font-size: clamp(8px, 1.65vh, 11px) !important;
  }

  body.game-active .status-pill strong {
    margin-top: 2px !important;
    color: #fffaf0 !important;
    font-size: clamp(11px, 2.2vh, 15px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* De variantbanner hoort niet in de aangeleverde liggende spelindeling. */
  body.game-active .variant-banner { display: none !important; }

  /* Grote centrale tafel. */
  body.game-active .table {
    grid-area: table !important;
    position: relative !important;
    place-self: stretch !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    border: clamp(5px, 1.1vh, 10px) solid rgba(91, 48, 22, .95) !important;
    border-radius: 18px !important;
    background-position: center !important;
    background-size: cover !important;
    box-shadow: inset 0 0 0 2px rgba(220,174,74,.38), inset 0 0 34px rgba(0,0,0,.42), 0 7px 20px rgba(0,0,0,.46) !important;
    overflow: hidden !important;
  }

  body.game-active .table::after {
    content: "";
    position: absolute;
    inset: 9px;
    z-index: 0;
    border: 1px solid rgba(216, 178, 89, .3);
    border-radius: 12px;
    pointer-events: none;
  }

  body.game-active .player {
    z-index: 8 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  body.game-active .player-top {
    top: 7px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    flex-direction: column !important;
    transform: translateX(-50%) !important;
  }

  body.game-active .player-left {
    top: 52% !important;
    left: clamp(7px, 1.3vw, 15px) !important;
    right: auto !important;
    bottom: auto !important;
    flex-direction: column-reverse !important;
    transform: translateY(-50%) !important;
  }

  body.game-active .player-right {
    top: 43% !important;
    right: clamp(7px, 1.3vw, 15px) !important;
    left: auto !important;
    bottom: auto !important;
    flex-direction: column-reverse !important;
    transform: translateY(-50%) !important;
  }

  body.game-active .player .avatar {
    width: clamp(38px, 9vh, 58px) !important;
    height: clamp(38px, 9vh, 58px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    border: 3px solid #fff !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.52) !important;
  }

  body.game-active .player .player-info {
    position: relative !important;
    z-index: 2 !important;
    min-width: clamp(74px, 12vw, 108px) !important;
    padding: 4px 8px !important;
    border: 1px solid rgba(207,169,84,.24) !important;
    border-radius: 8px !important;
    background: rgba(13, 17, 12, .84) !important;
    text-align: center !important;
  }

  body.game-active .player .player-info span {
    color: #fffaf0 !important;
    font-size: clamp(10px, 2.25vh, 15px) !important;
    line-height: 1.05 !important;
  }

  body.game-active .player .player-info small {
    color: #e8dfcb !important;
    font-size: clamp(8px, 1.8vh, 12px) !important;
    line-height: 1.05 !important;
  }

  /* Echte waaiers: het aantal ruggen volgt steeds het actuele aantal kaarten. */
  body.game-active .player::before { display: none !important; }

  body.game-active .opponent-card-fan {
    position: absolute !important;
    top: auto !important;
    z-index: 0 !important;
    width: calc(clamp(27px, 6.2vh, 40px) + (var(--fan-count) - 1) * clamp(5px, 1.15vh, 8px)) !important;
    height: clamp(40px, 9vh, 58px) !important;
    pointer-events: none !important;
  }

  /* De vaste gesloten handen verschijnen pas nadat alle kaarten zijn gedeeld. */
  body.game-active.deal-animation-active .opponent-card-fan {
    visibility: hidden !important;
    opacity: 0 !important;
  }

  body.game-active .player > .avatar {
    position: relative !important;
    z-index: 3 !important;
  }

  body.game-active .opponent-card-fan span {
    position: absolute !important;
    top: 0 !important;
    left: calc(var(--card-index) * clamp(5px, 1.15vh, 8px)) !important;
    width: clamp(28px, 6.5vh, 42px) !important;
    height: clamp(40px, 9.2vh, 60px) !important;
    border: 1px solid rgba(244,224,166,.92) !important;
    border-radius: 4px !important;
    background: var(--card-back-bg) !important;
    box-shadow: var(--card-back-shadow) !important;
    opacity: .9 !important;
    transform: rotate(calc(var(--card-offset) * 2deg)) !important;
    transform-origin: 50% 110% !important;
  }

  body.game-active .player-top .opponent-card-fan {
    top: clamp(34px, 7.8vh, 48px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  body.game-active .player-left .opponent-card-fan {
    top: 54% !important;
    left: clamp(31px, 6.8vh, 44px) !important;
    transform: translateY(-50%) rotate(90deg) !important;
  }

  body.game-active .player-right .opponent-card-fan {
    top: 54% !important;
    right: clamp(31px, 6.8vh, 44px) !important;
    transform: translateY(-50%) rotate(-90deg) !important;
  }

  body.game-active .trick-area {
    position: absolute !important;
    inset: 20% 17% 21% !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }

  body.game-active .trick-area .mini-card {
    width: clamp(46px, 8vw, 66px) !important;
    height: auto !important;
    aspect-ratio: .68 !important;
  }

  /* De slag ligt lager dan de naamkaart van de bovenste speler. */
  body.game-active .table > .trick-area:not(.collecting) .played-card.seat-partner {
    top: 43% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
  }

  body.game-active .table > .trick-area:not(.collecting) .played-card.seat-left {
    top: 68% !important;
    left: 31% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
  }

  body.game-active .table > .trick-area:not(.collecting) .played-card.seat-right {
    top: 68% !important;
    left: 69% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
  }

  body.game-active .table > .trick-area:not(.collecting) .played-card.seat-user {
    top: 84% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
  }

  /* Rechtsboven: twee scoreblokken en de twee spelknoppen. */
  body.game-active .score-board {
    grid-area: score !important;
    width: 100% !important;
    height: 100% !important;
    padding: 7px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: minmax(38px, 1fr) minmax(38px, .78fr) !important;
    gap: 6px !important;
    align-items: stretch !important;
  }

  body.game-active .score-board > .score-card {
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 7px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,.045) !important;
  }

  body.game-active .score-board > .score-card:nth-child(2) { display: none !important; }
  body.game-active .score-board > .score-card:nth-child(3) { grid-column: 2 !important; }
  body.game-active .score-card span { display: none !important; }
  body.game-active .score-card strong {
    margin: 0 !important;
    color: #fffaf0 !important;
    font-size: clamp(14px, 3.6vh, 23px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.game-active .score-board > .score-actions {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
    max-width: none !important;
    align-items: stretch !important;
    gap: 6px !important;
  }

  body.game-active .score-actions button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 4px !important;
    border-radius: 7px !important;
    font-size: clamp(10px, 2.1vh, 14px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Rechts: live speloverzicht. De eigen kaarten liggen al onder aan de tafel. */
  body.game-active .hand-panel {
    grid-area: hand !important;
    width: 100% !important;
    height: 100% !important;
    padding: 10px !important;
    overflow: visible !important;
  }

  body.game-active .hand-heading {
    display: none !important;
  }

  body.game-active .landscape-game-status {
    width: 100% !important;
    height: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-content: start !important;
    gap: 6px !important;
    color: #fffaf0 !important;
  }

  body.game-active .landscape-game-status h2 {
    grid-column: 1 / -1 !important;
    margin: 0 0 2px !important;
    color: #f4cf70 !important;
    font-size: clamp(12px, 2.8vh, 17px) !important;
    line-height: 1.05 !important;
  }

  body.game-active .landscape-status-item {
    min-width: 0 !important;
    padding: 6px 7px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 2px !important;
    border: 1px solid rgba(225, 181, 72, .28) !important;
    border-radius: 7px !important;
    background: rgba(3, 24, 16, .72) !important;
    overflow: hidden !important;
  }

  body.game-active .landscape-status-item span {
    color: #b9c9bf !important;
    font-size: clamp(8px, 1.6vh, 10px) !important;
    line-height: 1 !important;
  }

  body.game-active .landscape-status-item strong {
    color: #fffaf0 !important;
    font-size: clamp(11px, 2.4vh, 15px) !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.game-active .landscape-status-trump,
  body.game-active .landscape-status-wide { grid-column: 1 / -1 !important; }

  body.game-active .landscape-status-trump strong {
    color: #f4cf70 !important;
    font-size: clamp(14px, 3vh, 19px) !important;
  }

  body.game-active .your-player-label {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
  }

  body.game-active .your-player-label .avatar {
    width: clamp(32px, 7vh, 44px) !important;
    height: clamp(32px, 7vh, 44px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
  }

  body.game-active .hand-heading h2 {
    color: #fffaf0 !important;
    font-size: clamp(14px, 3.1vh, 20px) !important;
    line-height: 1.05 !important;
  }

  body.game-active .hand-heading p { display: none !important; }

  body.game-active #playerHand.hand {
    position: fixed !important;
    z-index: 36 !important;
    left: 48.5vw !important;
    bottom: max(5px, env(safe-area-inset-bottom)) !important;
    width: min(57vw, 610px) !important;
    height: clamp(76px, 22vh, 120px) !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 2px !important;
    background: transparent !important;
    transform: translateX(-50%) !important;
    overflow: visible !important;
    pointer-events: none !important;
  }

  body.game-active #playerHand.hand .card {
    flex: 0 1 clamp(40px, 6.7vw, 66px) !important;
    width: clamp(40px, 6.7vw, 66px) !important;
    height: clamp(72px, 20vh, 112px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 66px !important;
    padding: 0 !important;
    border-width: 1px !important;
    border-radius: 6px !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  body.game-active #playerHand.hand .card .corner {
    top: 5px !important;
    left: 5px !important;
    font-size: clamp(11px, 2.7vh, 17px) !important;
  }

  body.game-active #playerHand.hand .card .suit {
    padding-top: 8px !important;
    font-size: clamp(24px, 6vh, 38px) !important;
  }

  body.game-active #playerHand.hand .card .trump-mark {
    right: 4px !important;
    bottom: 4px !important;
    width: clamp(18px, 4.5vh, 25px) !important;
    height: clamp(18px, 4.5vh, 25px) !important;
    font-size: clamp(10px, 2.3vh, 14px) !important;
  }

  /* Linksmidden: compacte tafelchat zoals in het voorbeeld. */
  body.game-active .table-chat {
    grid-area: chat !important;
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    padding: 9px !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    gap: 7px !important;
  }

  body.game-active .table-chat-header {
    display: none !important;
    order: 0 !important;
  }
  body.game-active .table-chat-header span {
    color: #e4c576 !important;
    font-size: clamp(9px, 1.8vh, 12px) !important;
  }
  body.game-active .table-chat-header strong {
    display: none !important;
  }
  body.game-active .table-chat-header small { display: none !important; }

  body.game-active .table-chat-log {
    grid-row: 1 !important;
    order: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 7px !important;
    border: 1px solid rgba(87, 146, 187, .45) !important;
    border-radius: 8px !important;
    background: rgba(8, 34, 49, .78) !important;
    overflow: hidden auto !important;
    margin-bottom: 0 !important;
  }

  body.game-active .table-chat-log .chat-line.compact {
    font-size: clamp(9px, 1.8vh, 12px) !important;
  }

  body.game-active .table-chat-form {
    grid-row: 2 !important;
    order: 0 !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 4 !important;
    width: 100% !important;
    height: 73px !important;
    min-height: 73px !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 32px 34px !important;
    align-content: start !important;
    align-items: stretch !important;
    gap: 7px !important;
  }

  body.game-active .table-chat-form input {
    grid-row: 1 !important;
    position: static !important;
    display: block !important;
    min-height: 32px !important;
    max-height: 32px !important;
    margin: 0 !important;
    transform: none !important;
  }

  body.game-active .table-chat-form input,
  body.game-active .table-chat-form button {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 32px !important;
    min-height: 0 !important;
    padding: 4px 7px !important;
    border-radius: 7px !important;
    font-size: 16px !important;
  }

  body.game-active .table-chat-form input::placeholder {
    font-size: 13px !important;
  }

  body.game-active .table-chat-form button {
    grid-row: 2 !important;
    width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: none !important;
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    font-size: clamp(10px, 2vh, 13px) !important;
  }

  /* Linksonder: één rustige verslagbalk. */
  body.game-active .game-events {
    grid-area: events !important;
    width: 100% !important;
    height: 100% !important;
    padding: 7px !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    overflow: hidden !important;
  }

  body.game-active .game-events > [hidden] {
    display: none !important;
  }

  body.game-active .game-events .message {
    display: flex !important;
    position: static !important;
    flex: 1 1 auto !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 7px 9px !important;
    border: 0 !important;
    background: transparent !important;
    color: #fffaf0 !important;
    font-size: clamp(10px, 2.1vh, 14px) !important;
    line-height: 1.25 !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    overflow: hidden !important;
  }

  body.game-active .game-events :is(.trick-points, .roem-burst, .roem-board) {
    max-width: 100% !important;
    max-height: 100% !important;
  }

  body.game-active .bid-panel:not([hidden]) {
    position: fixed !important;
    z-index: 70 !important;
    left: 48.5vw !important;
    top: 50% !important;
    width: min(430px, 52vw) !important;
    max-height: 76vh !important;
    padding: 12px !important;
    border: 2px solid #d7a94c !important;
    transform: translate(-50%, -50%) !important;
    overflow: auto !important;
  }

  body.game-active .bid-popup-dialog {
    width: min(430px, 62vw) !important;
    max-height: 86vh !important;
  }

  body.game-active :is(.turn-deadline-alert, .nat-popup, .pit-popup) {
    max-height: calc(var(--app-visible-height, 100dvh) - 18px) !important;
  }
}

/* Definitief contrast voor de gekleurde daguitdagingbediening. Dit bestand
   wordt als laatste geladen, zodat algemene licht-modusregels niet opnieuw
   donkere tekst op het groene of rode vlak kunnen zetten. */
#onlineModal #onlineContent .daily-reference-hero.daily-hero,
#onlineModal #onlineContent .daily-reference-grid .daily-reference-card,
#onlineModal #onlineContent .daily-reference-score {
  border-color: #d8a43d !important;
  background: linear-gradient(155deg, #fffdf7, #f7ecd9) !important;
  color: #35291f !important;
}

#onlineModal #onlineContent .daily-reference-info {
  border-color: #d8a43d !important;
  background: #fff0c4 !important;
  color: #35291f !important;
}

#onlineModal #onlineContent .daily-reference-hero :is(h2,p),
#onlineModal #onlineContent .daily-reference-card :is(h2,p),
#onlineModal #onlineContent .daily-reference-info :is(strong,p) {
  color: #174a31 !important;
  opacity: 1 !important;
}

#onlineModal #onlineContent .daily-reference-hero p,
#onlineModal #onlineContent .daily-reference-card p,
#onlineModal #onlineContent .daily-reference-info p { color: #695746 !important; }

#onlineModal #onlineContent .daily-variant-ribbon,
#onlineModal #onlineContent .daily-variant-ribbon *,
#onlineModal #onlineContent button.daily-reference-start,
#onlineModal #onlineContent button.daily-reference-start b,
#onlineModal #onlineContent button.daily-reference-start span {
  color: #fff8e8 !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #fff8e8 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.48) !important;
}

#onlineModal #onlineContent .daily-variant-ribbon {
  color: #ffe7a8 !important;
  -webkit-text-fill-color: #ffe7a8 !important;
}

/* De speelkaarten in de knop houden hun eigen rode en zwarte kaartkleur. */
#onlineModal #onlineContent button.daily-reference-start .daily-button-cards i {
  background: #fffdf6 !important;
  color: #302b25 !important;
  -webkit-text-fill-color: #302b25 !important;
  text-shadow: none !important;
}

#onlineModal #onlineContent button.daily-reference-start .daily-button-cards i:first-child {
  color: #c94545 !important;
  -webkit-text-fill-color: #c94545 !important;
}

/* Informatieletter op het donkergroene ronde vlak. */
#onlineModal #onlineContent .daily-reference-info .daily-info-icon {
  color: #fff8e8 !important;
  -webkit-text-fill-color: #fff8e8 !important;
  opacity: 1 !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.32) !important;
}

/* Op echte telefoons gebruiken de zijpanelen ook de ruimte rond de veilige schermranden. */
@media (orientation: landscape) and (max-width: 1100px) and (max-height: 700px) and (hover: none) and (pointer: coarse) {
  body.game-active .app-shell {
    padding: 6px 7px !important;
    grid-template-rows: minmax(96px, 22%) minmax(0, 67%) minmax(42px, 11%) !important;
    gap: 4px !important;
  }

  body.game-active :is(.top-bar, .score-board, .table-chat, .hand-panel, .game-events) {
    align-self: stretch !important;
    max-height: none !important;
  }
}

/* Zeer smalle telefoons behouden dezelfde verhoudingen met smallere zijpanelen. */
@media (orientation: landscape) and (max-width: 720px) and (max-height: 500px) {
  body.game-active .app-shell {
    grid-template-columns: minmax(104px, 16.5%) minmax(0, 64%) minmax(120px, 19.5%) !important;
    gap: 4px !important;
  }

  body.game-active #playerHand.hand {
    left: 48.5vw !important;
    width: 59vw !important;
    gap: 0 !important;
  }

  body.game-active #playerHand.hand .card {
    width: clamp(36px, 7vw, 48px) !important;
    height: clamp(64px, 20vh, 86px) !important;
  }
}