/* Normal Okey visual system: intentionally scoped to avoid Okey101/shared UI. */
.match-panel.normal-okey {
  --nok-bg: #120d0b;
  --nok-bg-soft: #2a1712;
  --nok-panel: rgba(27, 20, 20, .94);
  --nok-panel-border: rgba(218, 170, 104, .34);
  --nok-felt: #12665c;
  --nok-felt-dark: #073c38;
  --nok-wood: #754326;
  --nok-wood-light: #c4874a;
  --nok-wood-dark: #32170e;
  --nok-text: #fff4dd;
  --nok-muted: #cdbda8;
  --nok-accent: #edbd70;
  --nok-rack-wood: #a46331;
}


/* AUTOPLAY_CANONICAL_GROUP_BOUNDARIES_V1: visual-only separators.  The
   server supplies group membership; this marker changes neither slot count
   nor tile geometry and is intentionally Premium desktop scoped. */
@media (min-width: 901px) {
  .match-panel.normal-okey.table-theme-premium #handTiles .rack-slot.autoplay-group-start {
    position: relative;
  }

  .match-panel.normal-okey.table-theme-premium #handTiles .rack-slot.autoplay-group-start::before {
    content: "";
    position: absolute;
    top: 10%;
    bottom: 10%;
    left: -3px;
    width: 2px;
    border-radius: 2px;
    background: rgba(255, 224, 156, .82);
    box-shadow: 0 0 5px rgba(255, 214, 90, .5);
    pointer-events: none;
    z-index: 2;
  }
}

/* STAGE17D2_OPERATOR_CONTROLS=YES */
.match-panel.normal-okey .normal-okey-operator-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  font-size: 10px;
}
.match-panel.normal-okey .normal-okey-operator-badge {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  padding: 3px 7px;
  border: 1px solid rgba(247, 210, 119, .55);
  border-radius: 999px;
  color: #ffe7a1;
  letter-spacing: .04em;
  font-weight: 700;
}
.match-panel.normal-okey .normal-okey-operator-controls label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.match-panel.normal-okey .normal-okey-operator-controls select,
.match-panel.normal-okey .normal-okey-operator-controls button {
  min-height: 25px;
  font-size: 10px;
}

.okey-smart-assist-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.okey-smart-assist-control select {
  min-width: 92px;
}

.okey-smart-assist-message {
  min-height: 1.35em;
  margin: 5px 0 0;
  color: var(--muted, #9fb3a7);
  font-size: .78rem;
}

.match-panel.normal-okey {
  min-height: 100vh;
  color: var(--nok-text);
  background:
    radial-gradient(circle at 48% 42%, rgba(116, 67, 33, .2), transparent 42%),
    linear-gradient(135deg, #130d0b 0%, #2d1912 52%, #100b09 100%);
  overflow: hidden;
}
.match-panel.normal-okey .normal-okey-header {
  min-height: 58px;
  padding: 8px 14px;
  display: grid;
  grid-template-columns: minmax(178px, 220px) 1fr auto;
  gap: 12px;
  align-items: center;
  background: linear-gradient(180deg, rgba(38, 27, 26, .98), rgba(18, 14, 16, .98));
  border-bottom: 1px solid var(--nok-panel-border);
}
.match-panel.normal-okey .nok-logo-card,
.match-panel.normal-okey .nok-info-panel {
  border: 1px solid var(--nok-panel-border);
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(70, 37, 24, .96), rgba(27, 20, 22, .96));
  box-shadow: 0 7px 20px rgba(0, 0, 0, .28), inset 0 1px rgba(255,255,255,.06);
}
.match-panel.normal-okey .nok-logo-card { padding: 7px 12px; line-height: 1.08; }
.match-panel.normal-okey .nok-logo-card strong { display: block; color: var(--nok-accent); letter-spacing: .12em; font-size: 15px; }
.match-panel.normal-okey .nok-logo-card span { color: #fff0d5; font-size: 10px; letter-spacing: .22em; }
.match-panel.normal-okey .nok-top-controls { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.match-panel.normal-okey .nok-top-controls button,
.match-panel.normal-okey .match-actions button,
.match-panel.normal-okey .auto-sort-actions button,
.match-panel.normal-okey .nok-radio-panel button { border: 1px solid rgba(232, 188, 116, .35); border-radius: 6px; color: #ffe9c4; background: rgba(26, 18, 18, .84); padding: 6px 10px; font-size: 11px; cursor: pointer; }
.match-panel.normal-okey .nok-top-controls button:hover,
.match-panel.normal-okey .match-actions button:hover { border-color: var(--nok-accent); background: rgba(111, 63, 34, .65); }
.match-panel.normal-okey .normal-okey-session { justify-self: end; }
.match-panel.normal-okey .normal-okey-session button { border: 0; background: transparent; color: var(--nok-muted); cursor: pointer; }
.match-panel.normal-okey .nok-shell { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(246px, 22vw, 306px); gap: 12px; padding: 12px 14px 14px 210px; align-items: start; }
.match-panel.normal-okey .nok-info-panel { position: absolute; left: 14px; top: 12px; width: 182px; padding: 12px; z-index: 3; }
.match-panel.normal-okey .nok-info-panel h3 { margin: 0 0 8px; color: var(--nok-accent); font-size: 12px; letter-spacing: .08em; }
.match-panel.normal-okey .nok-info-panel p { margin: 5px 0; color: var(--nok-muted); font-size: 11px; }
.match-panel.normal-okey .nok-table-area { min-width: 0; }
.match-panel.normal-okey .nok-table-stage { position: relative; width: 100%; padding: 48px 34px 106px; }
.match-panel.normal-okey .nok-table,
.match-panel.normal-okey .game-board { position: relative; width: 100%; max-width: 1020px; min-height: 370px; aspect-ratio: 1.55 / 1; margin: 0 auto; border: 10px solid var(--nok-wood-dark); border-radius: 24% / 27%; background: radial-gradient(ellipse at center, #168172 0%, var(--nok-felt) 56%, var(--nok-felt-dark) 100%); box-shadow: 0 0 0 5px var(--nok-wood), 0 0 0 10px #2a130c, 0 18px 38px rgba(0,0,0,.55), inset 0 0 32px rgba(0,0,0,.38); overflow: visible; }
.match-panel.normal-okey .nok-table::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(170, 236, 190, .2); border-radius: inherit; pointer-events: none; }
.match-panel.normal-okey .board-brand { position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%); text-align: center; color: rgba(228, 248, 217, .32); pointer-events: none; z-index: 1; }
.match-panel.normal-okey .board-brand strong { display: block; font-size: clamp(21px, 2.5vw, 34px); letter-spacing: .18em; }
.match-panel.normal-okey .board-brand span { font-size: 11px; letter-spacing: .28em; }
.match-panel.normal-okey .board-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; gap: 10px; align-items: center; z-index: 4; }
.match-panel.normal-okey .nok-draw-stack { width: 54px; height: 70px; border: 3px solid #d99b58; border-radius: 7px; background: repeating-linear-gradient(135deg, #7a4529 0 5px, #a76635 5px 8px); box-shadow: 4px 4px 0 #3a1c12, 0 8px 16px rgba(0,0,0,.3); }
.match-panel.normal-okey #boardPileCount { margin-top: 76px; min-width: 28px; text-align: center; color: #ffe9be; font-size: 11px; }
.match-panel.normal-okey #centerIndicatorTile { min-width: 38px; }
.match-panel.normal-okey .player-seat { position: absolute; z-index: 6; display: flex; align-items: center; gap: 7px; border: 0; border-radius: 8px; background: transparent; box-shadow: none; color: var(--nok-text); }
.match-panel.normal-okey #seat3 { top: -39px; left: 50%; transform: translateX(-50%); flex-direction: column; }
.match-panel.normal-okey #seat1 { bottom: -68px; left: 50%; transform: translateX(-50%); flex-direction: column; }
.match-panel.normal-okey #seat4 { left: -48px; top: 50%; transform: translateY(-50%); flex-direction: row; }
.match-panel.normal-okey #seat2 { right: -48px; top: 50%; transform: translateY(-50%); flex-direction: row-reverse; }
.match-panel.normal-okey .player-seat .player-card { min-width: 106px; padding: 6px 8px; border: 1px solid rgba(221, 179, 114, .34); border-radius: 8px; background: rgba(34, 24, 21, .88); box-shadow: 0 5px 12px rgba(0,0,0,.25); font-size: 11px; }
.match-panel.normal-okey .player-seat .player-card .player-name { color: #ffe3b4; font-weight: 700; }
.match-panel.normal-okey .player-seat .player-card .player-score { color: var(--nok-muted); font-size: 10px; }
.match-panel.normal-okey .player-seat .player-rack { border: 1px solid rgba(213, 141, 70, .7); border-radius: 6px; background: linear-gradient(180deg, #9e6030, #4b2817); box-shadow: inset 0 2px rgba(255,255,255,.16); }
.match-panel.normal-okey .seat-avatar { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(237,189,112,.6); border-radius: 50%; background: #4b2a1b; color: #ffe7bd; font-size: 9px; font-weight: 700; object-fit: cover; }
.match-panel.normal-okey .seat-identity { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 92px; }
.match-panel.normal-okey .seat-identity strong { max-width: 110px; overflow: hidden; color: #ffe3b4; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.match-panel.normal-okey .seat-identity small { color: var(--nok-muted); font-size: 9px; white-space: nowrap; }
.match-panel.normal-okey .opponent-rack { position: relative; border: 1px solid rgba(213,141,70,.7); border-radius: 6px; background: repeating-linear-gradient(135deg, #8d542d 0 5px, #63341e 5px 8px); box-shadow: inset 0 2px rgba(255,255,255,.13), 0 3px 7px rgba(0,0,0,.25); }
.match-panel.normal-okey .opponent-rack::after { content: attr(data-hand-count); position: absolute; right: 3px; bottom: 2px; color: #ffe7bd; font-size: 9px; opacity: .8; }
.match-panel.normal-okey .opponent-rack-bottom, .match-panel.normal-okey .opponent-rack-top { width: 144px; height: 22px; }
.match-panel.normal-okey .opponent-rack-left, .match-panel.normal-okey .opponent-rack-right { width: 110px; height: 22px; }
.match-panel.normal-okey #seat1 .opponent-rack { display: none; }
.match-panel.normal-okey #seat3 .player-rack, .match-panel.normal-okey #seat1 .player-rack { width: 154px; height: 27px; }
.match-panel.normal-okey #seat2 .player-rack, .match-panel.normal-okey #seat4 .player-rack { width: 27px; height: 154px; }
.match-panel.normal-okey .seat-discards { position: absolute; z-index: 5; display: flex; gap: 2px; pointer-events: none; }
.match-panel.normal-okey #discardSeat3 { top: 22px; left: 50%; transform: translateX(-50%); }
.match-panel.normal-okey #discardSeat1 { bottom: 22px; left: 50%; transform: translateX(-50%); }
.match-panel.normal-okey #discardSeat4 { left: 28px; top: 50%; transform: translateY(-50%); }
.match-panel.normal-okey #discardSeat2 { right: 28px; top: 50%; transform: translateY(-50%); }
.match-panel.normal-okey .normal-okey-rack-zone { position: absolute; left: 50%; bottom: -101px; transform: translateX(-50%); width: min(680px, 78%); padding: 9px 12px 7px; border: 4px solid var(--nok-wood-dark); border-radius: 13px; background: linear-gradient(180deg, #bc7740, var(--nok-rack-wood) 55%, #63341d); box-shadow: 0 0 0 3px #c4874a, 0 10px 22px rgba(0,0,0,.45); z-index: 10; }
.match-panel.normal-okey .normal-okey-side-controls { position: absolute; right: 8px; top: -32px; display: flex; gap: 4px; }
.match-panel.normal-okey .normal-okey-side-controls button { padding: 4px 7px; border: 1px solid #bd8150; border-radius: 5px; background: #392117; color: #ffe4b7; font-size: 10px; }
.match-panel.normal-okey #handTiles { position: relative; display: flex; flex-wrap: wrap; min-height: 82px; padding: 3px 7px; gap: 3px 4px; align-items: flex-end; align-content: flex-end; overflow: visible; }
.match-panel.normal-okey .rack-slot { display: contents !important; border: 0; background: transparent; box-shadow: none; outline: 0; }
.match-panel.normal-okey #handTiles > .tile { width: 100%; min-width: 0; min-height: 38px; border: 1px solid rgba(94, 52, 25, .55); border-radius: 5px; background: linear-gradient(145deg, #fff6dd, #e8d5ad); color: #302018; box-shadow: 0 3px 5px rgba(0,0,0,.33); cursor: grab; transition: transform .12s ease, box-shadow .12s ease; }
.match-panel.normal-okey #handTiles > .tile:hover { transform: translateY(-3px); box-shadow: 0 7px 10px rgba(0,0,0,.38); }
.match-panel.normal-okey #handTiles > .tile.is-dragging { opacity: .78; transform: translateY(-8px) scale(1.04); }
.match-panel.normal-okey #handTiles::after { content: ""; position: absolute; left: var(--rack-insertion-left, -999px); top: var(--rack-insertion-top, -999px); width: 4px; height: 42px; border-radius: 3px; background: var(--nok-accent); box-shadow: 0 0 10px rgba(255,207,116,.8); pointer-events: none; }
.match-panel.normal-okey .auto-sort-actions { display: flex; justify-content: center; gap: 4px; margin-top: 5px; }
.match-panel.normal-okey .auto-sort-actions button { padding: 3px 7px; font-size: 9px; }
.match-panel.normal-okey .match-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; margin-top: 5px; padding: 0; border: 0; background: transparent; }
.match-panel.normal-okey .match-actions button { padding: 4px 7px; font-size: 10px; }
.match-panel.normal-okey .table-chat { min-height: 0; height: 286px; border: 1px solid var(--nok-panel-border); border-radius: 10px; background: var(--nok-panel); box-shadow: 0 8px 22px rgba(0,0,0,.28); overflow: hidden; }
.match-panel.normal-okey .chat-heading { padding: 9px 11px; color: var(--nok-accent); border-bottom: 1px solid rgba(218,170,104,.25); }
.match-panel.normal-okey #chatMessages { height: 195px; padding: 8px; overflow: auto; }
.match-panel.normal-okey #chatForm { display: flex; gap: 5px; padding: 7px; }
.match-panel.normal-okey #chatForm input { min-width: 0; flex: 1; }
.match-panel.normal-okey .nok-treat-panel, .match-panel.normal-okey .nok-radio-panel { margin-top: 8px; padding: 9px; border: 1px solid var(--nok-panel-border); border-radius: 9px; background: var(--nok-panel); }
.match-panel.normal-okey .nok-treat-panel h4, .match-panel.normal-okey .nok-radio-panel h4 { margin: 0 0 6px; color: var(--nok-accent); font-size: 11px; }
.match-panel.normal-okey .nok-treat-options { display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; }
.match-panel.normal-okey .nok-treat-options button { padding: 5px 2px; border: 1px solid rgba(218,170,104,.3); border-radius: 5px; background: #281b19; color: var(--nok-muted); font-size: 9px; }
.match-panel.normal-okey .nok-radio-panel { display: flex; align-items: center; justify-content: space-between; }
.match-panel.normal-okey .nok-radio-panel h4 { margin: 0; }
.match-panel.normal-okey .nok-radio-panel button { padding: 4px 7px; }
.match-panel.normal-okey .statusbar, .match-panel.normal-okey .normal-okey-statusbar { display: none; }

/* Neutralize shared legacy layout only inside Normal Okey. */
.match-panel.normal-okey .game-board, .match-panel.normal-okey .player-seat, .match-panel.normal-okey .hand-tiles, .match-panel.normal-okey .tile, .match-panel.normal-okey .rack-slot, .match-panel.normal-okey .table-chat, .match-panel.normal-okey .match-actions, .match-panel.normal-okey .seat-discards, .match-panel.normal-okey .board-center { box-sizing: border-box; }
.match-panel.normal-okey .player-seat { background: transparent; }
.match-panel.normal-okey .hand-tiles { border: 0; }
.match-panel.normal-okey .table-chat { max-height: 286px; }

@media (max-width: 1200px) {
  .match-panel.normal-okey .nok-shell { padding-left: 196px; grid-template-columns: minmax(0, 1fr) 254px; }
  .match-panel.normal-okey .nok-info-panel { width: 168px; }
  .match-panel.normal-okey .nok-table-stage { padding-left: 27px; padding-right: 27px; }
}
@media (max-width: 1050px) {
  .match-panel.normal-okey .nok-shell { padding: 10px; grid-template-columns: minmax(0,1fr) 236px; }
  .match-panel.normal-okey .nok-info-panel { position: static; width: auto; margin: 10px; }
  .match-panel.normal-okey .nok-table-stage { padding-top: 42px; }
}
@media (max-width: 820px) {
  .match-panel.normal-okey .normal-okey-header { grid-template-columns: 1fr; }
  .match-panel.normal-okey .normal-okey-session { justify-self: start; }
  .match-panel.normal-okey .nok-shell { display: block; }
  .match-panel.normal-okey .table-chat, .match-panel.normal-okey .nok-treat-panel, .match-panel.normal-okey .nok-radio-panel { max-width: 620px; margin-left: auto; margin-right: auto; }
  .match-panel.normal-okey .nok-table-stage { padding-left: 22px; padding-right: 22px; }
  .match-panel.normal-okey .nok-table { min-height: 300px; }
}
@media (max-width: 560px) {
  .match-panel.normal-okey .nok-table { min-height: 260px; border-width: 7px; }
  .match-panel.normal-okey .nok-table-stage { padding: 38px 12px 92px; }
  .match-panel.normal-okey #seat2, .match-panel.normal-okey #seat4 { display: none; }
  .match-panel.normal-okey .normal-okey-rack-zone { width: 94%; bottom: -87px; }
  .match-panel.normal-okey #handTiles { gap: 2px; }
  .match-panel.normal-okey #handTiles > .tile { min-height: 32px; }
}

/* Stage 5E.5B geometry correction: override the old game-stage/rack contracts. */
.match-panel.normal-okey {
  margin: 0;
  max-width: none;
  padding: 0;
}
.match-panel.normal-okey .nok-table-stage {
  display: block;
  width: 100%;
  min-width: 0;
  grid-template-columns: none;
  grid-template-areas: none;
  gap: 0;
  margin: 0;
}
.match-panel.normal-okey .nok-table,
.match-panel.normal-okey #gameBoard {
  width: 100%;
  max-width: 1020px;
  height: auto;
  min-height: 0;
  aspect-ratio: 1.55 / 1;
}
.match-panel.normal-okey .normal-okey-rack-zone {
  width: min(620px, 82%);
  min-width: 0;
  bottom: -76px;
  padding: 7px 10px 6px;
}
.match-panel.normal-okey #handTiles {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto;
  min-height: 78px;
  overflow: visible;
  overflow-x: visible;
  margin: 0;
  box-sizing: border-box;
}
.match-panel.normal-okey .rack-slot {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
.match-panel.normal-okey .player-seat {
  min-width: 0;
  max-width: none;
  width: auto;
  padding: 0;
  border-width: 0;
  background: transparent !important;
  box-shadow: none;
}
.match-panel.normal-okey .player-seat.active,
.match-panel.normal-okey .player-seat.current-seat {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  animation: none !important;
}
.match-panel.normal-okey .player-seat.active::before { display: none !important; }
.match-panel.normal-okey #seat3 { top: -34px; }
.match-panel.normal-okey #seat1 { bottom: -56px; }
.match-panel.normal-okey #seat2 { right: -24px; }
.match-panel.normal-okey #seat4 { left: -24px; }
.match-panel.normal-okey .table-chat {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  box-sizing: border-box;
}
.match-panel.normal-okey .normal-okey-nav,
.match-panel.normal-okey .normal-okey-session {
  display: none !important;
}
.match-panel.normal-okey .normal-okey-header {
  grid-template-columns: minmax(178px, 220px) minmax(0, 1fr);
}
.match-panel.normal-okey .nok-shell {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.match-panel.normal-okey .nok-table-area,
.match-panel.normal-okey .nok-table-stage,
.match-panel.normal-okey .nok-table {
  min-width: 0;
}
#dashboardView:has(> #matchPanel.normal-okey) {
  max-width: none;
  padding: 12px 18px 18px;
}

/* Stage 5E.6B: reference-driven three-column presentation shell. */
.match-panel.normal-okey .nok-presentation {
  display: grid;
  grid-template-columns: 190px minmax(650px, 1fr) 270px;
  grid-template-rows: auto 1fr;
  gap: 12px 14px;
  align-items: start;
  min-height: calc(100vh - 24px);
  padding: 14px 16px 18px;
  background: radial-gradient(circle at 47% 48%, rgba(112, 63, 32, .2), transparent 46%);
}
.match-panel.normal-okey .normal-okey-header { display: contents; }
.match-panel.normal-okey .nok-logo-card { grid-column: 1; grid-row: 1; align-self: stretch; }
.match-panel.normal-okey .nok-top-controls { grid-column: 2; grid-row: 1; align-self: center; }
.match-panel.normal-okey .nok-left-column { grid-column: 1; grid-row: 2; width: 100%; }
.match-panel.normal-okey .nok-center-column { grid-column: 2; grid-row: 2; min-width: 0; width: 100%; }
.match-panel.normal-okey .nok-right-column { grid-column: 3; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 9px; min-width: 0; width: 100%; }
.match-panel.normal-okey .nok-shell { display: contents; }
.match-panel.normal-okey .normal-okey-statusbar,
.match-panel.normal-okey #tableBanner,
.match-panel.normal-okey .normal-okey-nav,
.match-panel.normal-okey .normal-okey-session { display: none !important; }
.match-panel.normal-okey .nok-info-panel { position: relative; inset: auto; width: 100%; margin: 0; padding: 13px; }
.match-panel.normal-okey .nok-info-panel > strong { display: block; margin-bottom: 12px; color: var(--nok-accent); font-size: 16px; letter-spacing: .12em; }
.match-panel.normal-okey .nok-info-panel dl { display: grid; gap: 9px; margin: 0; }
.match-panel.normal-okey .nok-info-panel dl > div { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 7px; border-bottom: 1px solid rgba(218,170,104,.18); }
.match-panel.normal-okey .nok-info-panel dt { color: var(--nok-muted); font-size: 10px; }
.match-panel.normal-okey .nok-info-panel dd { margin: 0; color: var(--nok-text); font-size: 11px; text-align: right; }
.match-panel.normal-okey .nok-table-area { width: 100%; min-width: 0; }
.match-panel.normal-okey .nok-table-stage { width: 100%; min-width: 0; padding: 56px 42px 132px; }
.match-panel.normal-okey .nok-table,
.match-panel.normal-okey #gameBoard { width: 100%; max-width: 1100px; height: auto; min-height: 360px; max-height: 520px; aspect-ratio: 1.55 / 1; margin: 0 auto; }
.match-panel.normal-okey .nok-center-play-area { position: static; }
.match-panel.normal-okey .nok-station-top,
.match-panel.normal-okey .nok-station-left,
.match-panel.normal-okey .nok-station-right,
.match-panel.normal-okey .nok-station-bottom,
.match-panel.normal-okey .nok-own-station { position: absolute; z-index: 8; }
.match-panel.normal-okey .nok-station-top { top: -48px; left: 50%; transform: translateX(-50%); }
.match-panel.normal-okey .nok-station-left { left: -38px; top: 50%; transform: translateY(-50%); }
.match-panel.normal-okey .nok-station-right { right: -38px; top: 50%; transform: translateY(-50%); }
.match-panel.normal-okey .nok-station-bottom { left: 50%; bottom: -52px; transform: translateX(-50%); }
.match-panel.normal-okey .nok-station-top .player-seat,
.match-panel.normal-okey .nok-station-left .player-seat,
.match-panel.normal-okey .nok-station-right .player-seat,
.match-panel.normal-okey .nok-station-bottom .player-seat { position: relative; inset: auto; transform: none; }
.match-panel.normal-okey .nok-station-top #seat3,
.match-panel.normal-okey .nok-station-left #seat4,
.match-panel.normal-okey .nok-station-right #seat2,
.match-panel.normal-okey .nok-station-bottom #seat1 { top: auto; right: auto; bottom: auto; left: auto; transform: none; }
.match-panel.normal-okey .nok-station-top .player-seat,
.match-panel.normal-okey .nok-station-bottom .player-seat { flex-direction: column; }
.match-panel.normal-okey .nok-station-left .player-seat { flex-direction: row; }
.match-panel.normal-okey .nok-station-right .player-seat { flex-direction: row-reverse; }
.match-panel.normal-okey .nok-station-top .opponent-rack,
.match-panel.normal-okey .nok-station-left .opponent-rack,
.match-panel.normal-okey .nok-station-right .opponent-rack { width: 126px; height: 22px; }
.match-panel.normal-okey .nok-own-station { left: 50%; bottom: -103px; width: min(640px, 82%); transform: translateX(-50%); }
.match-panel.normal-okey .normal-okey-rack-zone { position: relative; inset: auto; width: 100%; transform: none; padding: 7px 10px 6px; }
.match-panel.normal-okey .rack-hint,
.match-panel.normal-okey .auto-sort-actions { display: none !important; }
.match-panel.normal-okey .normal-okey-rack-zone .match-actions { position: absolute; top: calc(100% + 9px); left: 50%; width: min(720px, 110%); transform: translateX(-50%); margin: 0; }
.match-panel.normal-okey .table-chat { height: 340px; max-height: 340px; flex: 1 1 auto; }
.match-panel.normal-okey #chatMessages { height: auto; min-height: 220px; flex: 1 1 auto; }
.match-panel.normal-okey .nok-treat-panel,
.match-panel.normal-okey .nok-radio-panel { flex: 0 0 auto; margin: 0; }
.match-panel.normal-okey .nok-treat-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1200px) {
  .match-panel.normal-okey .nok-presentation { grid-template-columns: 180px minmax(560px, 1fr) 250px; }
  .match-panel.normal-okey .nok-table-stage { padding-left: 28px; padding-right: 28px; }
}
@media (max-width: 1050px) {
  .match-panel.normal-okey .nok-presentation { grid-template-columns: 170px minmax(500px, 1fr) 230px; gap: 10px; padding-inline: 10px; }
  .match-panel.normal-okey .nok-table-stage { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 820px) {
  .match-panel.normal-okey .nok-presentation { display: block; min-height: 0; padding: 10px; }
  .match-panel.normal-okey .nok-logo-card { display: block; margin-bottom: 8px; }
  .match-panel.normal-okey .nok-top-controls { margin-bottom: 10px; }
  .match-panel.normal-okey .nok-left-column { margin-bottom: 10px; }
  .match-panel.normal-okey .nok-right-column { margin-top: 112px; }
  .match-panel.normal-okey .nok-table-stage { padding-inline: 18px; }
}
@media (max-width: 560px) {
  .match-panel.normal-okey .nok-table-stage { padding-inline: 8px; padding-bottom: 112px; }
  .match-panel.normal-okey .nok-own-station { width: 94%; }
  .match-panel.normal-okey .nok-station-left,
  .match-panel.normal-okey .nok-station-right { display: none; }
  .match-panel.normal-okey .normal-okey-rack-zone .match-actions { width: 100%; }
}

/* Stage 5E.7B: 1536x1024 master reference coordinate scene. */
.match-panel.normal-okey {
  position: relative;
  width: 100vw;
  min-width: 0;
  min-height: 100vh;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  background: #080505;
}
#dashboardView:has(> #matchPanel.normal-okey) {
  width: 100vw;
  max-width: none;
  margin: 0;
  padding: 0;
}
.match-panel.normal-okey .nok-presentation {
  position: relative;
  display: block;
  width: 1536px;
  height: 1024px;
  min-height: 1024px;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(99, 54, 25, .2), transparent 38%),
    linear-gradient(135deg, #080505 0%, #1c0d08 46%, #021224 100%);
}
.match-panel.normal-okey .normal-okey-header { display: contents; }
.match-panel.normal-okey .normal-okey-statusbar,
.match-panel.normal-okey .normal-okey-nav,
.match-panel.normal-okey .normal-okey-session,
.match-panel.normal-okey #tableBanner { display: none !important; }
.match-panel.normal-okey .nok-logo-card {
  position: absolute;
  left: 8px;
  top: 9px;
  width: 232px;
  height: 124px;
  box-sizing: border-box;
  padding: 40px 12px 10px;
  text-align: center;
  border: 2px solid #D79A35;
  border-radius: 11px;
  background: linear-gradient(145deg, #100b08, #020407 58%, #11100a);
  box-shadow: inset 0 0 0 2px rgba(215,154,53,.28), 0 8px 18px rgba(0,0,0,.5);
}
.match-panel.normal-okey .nok-logo-card strong { color: #FBB656; font-size: 30px; letter-spacing: .04em; }
.match-panel.normal-okey .nok-logo-card span { display: block; margin-top: 7px; color: #FBB656; font-size: 18px; letter-spacing: .14em; }
.match-panel.normal-okey .nok-top-controls {
  position: absolute;
  left: 474px;
  top: 20px;
  width: 900px;
  height: 55px;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 13px;
  flex-wrap: nowrap;
}
.match-panel.normal-okey .nok-top-controls button {
  height: 55px;
  min-width: 120px;
  padding: 0 18px;
  border: 1px solid #202833;
  border-radius: 9px;
  background: #061A33;
  color: #F0F2F7;
  font-size: 18px;
  white-space: nowrap;
}
.match-panel.normal-okey .nok-top-controls button:first-child { min-width: 158px; }
.match-panel.normal-okey .nok-top-controls button:nth-child(3) { min-width: 146px; }
.match-panel.normal-okey .nok-left-column {
  position: absolute;
  left: 246px;
  top: 8px;
  width: 209px;
  height: 126px;
  display: block;
}
.match-panel.normal-okey .nok-info-panel {
  position: absolute;
  inset: 0;
  width: 209px;
  height: 126px;
  box-sizing: border-box;
  padding: 11px 12px;
  border: 2px solid #D79A35;
  border-radius: 10px;
  background: #080E16;
  box-shadow: inset 0 0 0 1px rgba(215,154,53,.25), 0 8px 18px rgba(0,0,0,.48);
}
.match-panel.normal-okey .nok-info-panel > strong { display: none; }
.match-panel.normal-okey .nok-info-panel dl { gap: 3px; }
.match-panel.normal-okey .nok-info-panel dl > div { padding: 0; border: 0; }
.match-panel.normal-okey .nok-info-panel dt,
.match-panel.normal-okey .nok-info-panel dd { color: #F0F2F7; font-size: 18px; line-height: 1.22; }
.match-panel.normal-okey .nok-info-panel dt { display: none; }
.match-panel.normal-okey .nok-info-panel dd { text-align: left; }
.match-panel.normal-okey .nok-info-panel dd::before { content: ""; }
.match-panel.normal-okey .nok-info-panel .normal-okey-data,
.match-panel.normal-okey .nok-info-panel .normal-okey-status { display: none; }
.match-panel.normal-okey .nok-shell { display: contents; }
.match-panel.normal-okey .nok-center-column { display: contents; }
.match-panel.normal-okey .normal-okey-main { display: contents; }
.match-panel.normal-okey .nok-table-area { display: contents; }
.match-panel.normal-okey .nok-table-stage {
  position: absolute;
  left: 109px;
  top: 297px;
  width: 1048px;
  height: 460px;
  padding: 0;
  margin: 0;
  display: block;
  min-width: 0;
}
.match-panel.normal-okey .nok-table,
.match-panel.normal-okey #gameBoard {
  position: absolute;
  left: 0;
  top: 0;
  width: 1048px;
  height: 460px;
  min-height: 0;
  max-width: none;
  aspect-ratio: auto;
  box-sizing: border-box;
  border: 10px solid #6F3C0F;
  border-radius: 40px;
  background: radial-gradient(ellipse at center, #015E64 0%, #004B4E 100%);
  box-shadow: 0 0 0 7px #B7783D, 0 0 0 12px #32170E, 0 20px 38px rgba(0,0,0,.65), inset 0 0 0 2px rgba(183,120,61,.48);
  overflow: visible;
}
.match-panel.normal-okey .nok-table::before { inset: 30px; border-color: rgba(2,18,36,.76); border-radius: 30px; }
.match-panel.normal-okey .nok-center-play-area { position: static; }
.match-panel.normal-okey .nok-station-top,
.match-panel.normal-okey .nok-station-left,
.match-panel.normal-okey .nok-station-right,
.match-panel.normal-okey .nok-station-bottom,
.match-panel.normal-okey .nok-own-station { position: absolute; z-index: 9; }
.match-panel.normal-okey .nok-station-top { left: 394px; top: -169px; width: 329px; height: 191px; transform: none; }
.match-panel.normal-okey .nok-station-left { left: -86px; top: 34px; width: 312px; height: 250px; transform: none; }
.match-panel.normal-okey .nok-station-right { left: 872px; top: 34px; width: 173px; height: 250px; transform: none; }
.match-panel.normal-okey .nok-station-bottom { left: 399px; top: 297px; width: 170px; height: 90px; transform: none; }
.match-panel.normal-okey .nok-station-top .player-seat,
.match-panel.normal-okey .nok-station-left .player-seat,
.match-panel.normal-okey .nok-station-right .player-seat,
.match-panel.normal-okey .nok-station-bottom .player-seat { position: absolute; inset: auto; transform: none; min-width: 0; max-width: none; padding: 0; background: transparent !important; border: 0; box-shadow: none !important; }
.match-panel.normal-okey .nok-station-top .player-seat { left: 56px; top: 0; flex-direction: column; }
.match-panel.normal-okey .nok-station-left .player-seat { left: 0; top: 0; flex-direction: row; }
.match-panel.normal-okey .nok-station-right .player-seat { right: 0; top: 0; flex-direction: row-reverse; }
.match-panel.normal-okey .nok-station-bottom .player-seat { left: 0; top: 0; flex-direction: column; }
.match-panel.normal-okey .seat-avatar { width: 86px; height: 86px; border-width: 2px; }
.match-panel.normal-okey .seat-identity { min-width: 120px; padding: 9px 12px; border-radius: 10px; background: rgba(0,0,0,.83); }
.match-panel.normal-okey .seat-identity strong { font-size: 19px; }
.match-panel.normal-okey .seat-identity small { font-size: 14px; }
.match-panel.normal-okey .opponent-rack { border-color: #B7783D; background: linear-gradient(180deg,#B7783D,#6F3C0F); }
.match-panel.normal-okey .nok-station-top .opponent-rack { width: 328px; height: 61px; }
.match-panel.normal-okey .nok-station-left .opponent-rack,
.match-panel.normal-okey .nok-station-right .opponent-rack { width: 110px; height: 251px; }
.match-panel.normal-okey .seat-discards { z-index: 6; }
.match-panel.normal-okey .nok-own-station { left: 172px; top: 396px; width: 719px; height: 175px; transform: none; }
.match-panel.normal-okey .normal-okey-rack-zone { position: absolute; inset: 0; width: 719px; height: 175px; box-sizing: border-box; padding: 9px 12px 7px; border: 4px solid #6F3C0F; border-radius: 10px; background: linear-gradient(180deg,#B7783D,#6F3C0F); box-shadow: 0 0 0 3px #B7783D, 0 10px 20px rgba(0,0,0,.5); }
.match-panel.normal-okey #handTiles { width: 100%; max-width: 100%; height: 150px; min-height: 0; overflow: visible; overflow-x: visible; display: flex; flex-wrap: wrap; align-content: flex-end; gap: 3px 5px; padding: 4px 9px; }
.match-panel.normal-okey .rack-hint,
.match-panel.normal-okey .auto-sort-actions { display: none !important; }
.match-panel.normal-okey .normal-okey-side-controls { top: -34px; }
.match-panel.normal-okey .normal-okey-rack-zone .match-actions { position: absolute; left: -223px; top: 219px; width: 1432px; height: 70px; display: flex; flex-wrap: nowrap; gap: 11px; margin: 0; padding: 0; transform: none; }
.match-panel.normal-okey .normal-okey-rack-zone .match-actions button { flex: 1 1 0; height: 70px; min-width: 0; padding: 0 12px; border-radius: 9px; font-size: 17px; }
.match-panel.normal-okey .nok-right-column { position: absolute; left: 1197px; top: 90px; width: 330px; height: 812px; display: flex; flex-direction: column; gap: 5px; }
.match-panel.normal-okey .table-chat { position: relative; width: 330px; height: 515px; max-height: 515px; min-height: 0; flex: 0 0 515px; box-sizing: border-box; }
.match-panel.normal-okey #chatMessages { height: 405px; min-height: 0; flex: none; }
.match-panel.normal-okey .nok-treat-panel { width: 330px; height: 142px; flex: 0 0 142px; box-sizing: border-box; }
.match-panel.normal-okey .nok-radio-panel { width: 330px; height: 145px; flex: 0 0 145px; box-sizing: border-box; }
.match-panel.normal-okey .nok-treat-options { grid-template-columns: repeat(4,1fr); }
.match-panel.normal-okey #matchMessage { display: none; }
/* Stage 17A.3: expose the existing status element only for authoritative indicator feedback. */
.match-panel.normal-okey #matchMessage.indicator-feedback { display: block !important; }
@media (max-width: 1535px) {
  .match-panel.normal-okey .nok-presentation { transform-origin: top left; transform: scale(calc(100vw / 1536)); }
}

/* Stage 5E.8: image-locked Normal Okey scene.  The match scene owns the
   viewport while the existing IDs remain the functional contract. */
body:has(#matchPanel.normal-okey:not(.hidden)) .topbar { display: none; }
body:has(#matchPanel.normal-okey:not(.hidden)) #dashboardView {
  width: 100vw;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}
body:has(#matchPanel.normal-okey:not(.hidden)) #dashboardView > .dashboard-grid {
  display: contents;
}
.match-panel.normal-okey {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 0;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 48% 44%, rgba(171,91,25,.18), transparent 32%),
    radial-gradient(circle at 12% 84%, rgba(106,52,19,.22), transparent 34%),
    linear-gradient(135deg, #080505 0%, #221108 52%, #020c18 100%);
}
.match-panel.normal-okey .nok-presentation {
  position: relative;
  display: block;
  width: 100vw;
  height: 100vh;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 42% 50%, rgba(106,57,22,.25), transparent 38%),
    linear-gradient(135deg, rgba(18,9,5,.92), rgba(41,18,7,.72) 48%, rgba(2,15,28,.95));
}
.match-panel.normal-okey .normal-okey-header { display: contents; }
.match-panel.normal-okey .normal-okey-statusbar,
.match-panel.normal-okey .normal-okey-nav,
.match-panel.normal-okey .normal-okey-session,
.match-panel.normal-okey #tableBanner { display: none !important; }

/* Reference top-left cards. */
.match-panel.normal-okey .nok-logo-card {
  position: absolute;
  left: .52vw;
  top: .88vh;
  width: 15.10vw;
  height: 12.11vh;
  box-sizing: border-box;
  padding: 2.5vh .8vw .8vh;
  text-align: center;
  border: 2px solid #e0a73f;
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(5,7,8,.96), rgba(20,11,4,.95));
  box-shadow: inset 0 0 0 2px rgba(224,167,63,.22), 0 7px 18px rgba(0,0,0,.55);
  z-index: 20;
}
.match-panel.normal-okey .nok-logo-card::before {
  content: "♛";
  display: block;
  height: 2.3vh;
  color: #f6be49;
  font-size: 25px;
  line-height: 1;
}
.match-panel.normal-okey .nok-logo-card strong { color: #ffe1a0; font-size: clamp(18px, 2.08vw, 32px); letter-spacing: .04em; }
.match-panel.normal-okey .nok-logo-card span { display: block; margin-top: .6vh; color: #f8dd62; font-size: clamp(11px, 1.18vw, 18px); letter-spacing: .12em; }
.match-panel.normal-okey .nok-left-column {
  position: absolute;
  left: 16.02vw;
  top: .78vh;
  width: 13.61vw;
  height: 12.30vh;
  z-index: 20;
}
.match-panel.normal-okey .nok-info-panel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 1.0vh .8vw;
  border: 2px solid #d89d3f;
  border-radius: 10px;
  background: rgba(4,8,13,.94);
  box-shadow: inset 0 0 0 1px rgba(216,157,63,.22), 0 7px 18px rgba(0,0,0,.5);
}
.match-panel.normal-okey .nok-info-panel > strong { display: none; }
.match-panel.normal-okey .nok-info-panel dl { display: grid; gap: .15vh; margin: 0; }
.match-panel.normal-okey .nok-info-panel dl > div { padding: 0; border: 0; }
.match-panel.normal-okey .nok-info-panel dt { display: none; }
.match-panel.normal-okey .nok-info-panel dd { margin: 0; color: #f0f2f7; font-size: clamp(12px, 1.23vw, 19px); line-height: 1.3; text-align: left; }
.match-panel.normal-okey .nok-info-panel .normal-okey-data,
.match-panel.normal-okey .nok-info-panel .normal-okey-status { display: none; }

/* Reference control row. */
.match-panel.normal-okey .nok-top-controls {
  position: absolute;
  left: 30.86vw;
  top: 1.95vh;
  width: 58.59vw;
  height: 5.37vh;
  display: flex;
  align-items: stretch;
  gap: .8vw;
  flex-wrap: nowrap;
  z-index: 20;
}
.match-panel.normal-okey .nok-top-controls button {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  padding: 0 .75vw;
  border: 1px solid #202833;
  border-radius: 9px;
  background: linear-gradient(180deg, #10294a, #06172b);
  color: #f0f2f7;
  font-size: clamp(13px, 1.15vw, 18px);
  white-space: nowrap;
}

/* Reference table and felt. */
.match-panel.normal-okey .nok-shell,
.match-panel.normal-okey .nok-center-column,
.match-panel.normal-okey .normal-okey-main,
.match-panel.normal-okey .nok-table-area { display: contents; }
.match-panel.normal-okey .nok-table-stage {
  position: absolute;
  left: 7.10vw;
  top: 29.00vh;
  width: 68.23vw;
  height: 44.92vh;
  padding: 0;
  margin: 0;
  display: block;
  min-width: 0;
  z-index: 4;
}
.match-panel.normal-okey .nok-table,
.match-panel.normal-okey #gameBoard {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  min-height: 0;
  aspect-ratio: auto;
  box-sizing: border-box;
  border: 10px solid #6f3c0f;
  border-radius: 42px;
  background: radial-gradient(ellipse at 50% 44%, #08757a 0%, #015e64 54%, #004b4e 100%);
  box-shadow: 0 0 0 7px #b7783d, 0 0 0 12px #32170e, 0 20px 38px rgba(0,0,0,.68), inset 0 0 0 2px rgba(183,120,61,.48);
  overflow: visible;
}
.match-panel.normal-okey .nok-table::before { content: ""; position: absolute; inset: 30px; border: 2px solid rgba(2,18,36,.75); border-radius: 30px; pointer-events: none; }
.match-panel.normal-okey .nok-center-play-area { position: static; }
.match-panel.normal-okey .nok-center-brand { position: absolute; left: 50%; top: 43%; transform: translate(-50%,-50%); z-index: 1; opacity: .32; }
.match-panel.normal-okey .nok-center { position: absolute; left: 50%; top: 49%; transform: translate(-50%,-50%); z-index: 5; }

/* Station wrappers keep renderParticipants() replaceChildren() isolated. */
.match-panel.normal-okey .nok-station-top,
.match-panel.normal-okey .nok-station-left,
.match-panel.normal-okey .nok-station-right,
.match-panel.normal-okey .nok-station-bottom,
.match-panel.normal-okey .nok-own-station { position: absolute; z-index: 10; }
.match-panel.normal-okey .nok-station-top { left: 37.7%; top: -16.0%; width: 31.4%; height: 41.5%; }
.match-panel.normal-okey .nok-station-left { left: -8.2%; top: 7.4%; width: 29.8%; height: 54.4%; }
.match-panel.normal-okey .nok-station-right { right: -1.0%; top: 7.4%; width: 16.5%; height: 54.4%; }
.match-panel.normal-okey .nok-station-bottom { left: 16.4%; top: 64.6%; width: 68.6%; height: 59.6%; }
.match-panel.normal-okey .nok-station-top .player-seat,
.match-panel.normal-okey .nok-station-left .player-seat,
.match-panel.normal-okey .nok-station-right .player-seat,
.match-panel.normal-okey .nok-station-bottom .player-seat { position: absolute; inset: auto; min-width: 0; max-width: none; padding: 0; border: 0; background: transparent !important; box-shadow: none !important; }
.match-panel.normal-okey .nok-station-top .player-seat { left: 50%; top: 0; transform: translateX(-50%); flex-direction: column; }
.match-panel.normal-okey .nok-station-left .player-seat { left: 0; top: 38%; flex-direction: row; }
.match-panel.normal-okey .nok-station-right .player-seat { right: 0; top: 38%; flex-direction: row-reverse; }
.match-panel.normal-okey .nok-station-bottom .player-seat { left: 50%; top: 0; transform: translateX(-50%); flex-direction: column; }
.match-panel.normal-okey .seat-avatar { width: clamp(58px, 5.6vw, 88px); height: clamp(58px, 5.6vw, 88px); border: 2px solid #d99a32; }
.match-panel.normal-okey .seat-identity { min-width: 120px; padding: 8px 12px; border-radius: 10px; background: rgba(0,0,0,.84); }
.match-panel.normal-okey .seat-identity strong { font-size: clamp(15px, 1.25vw, 20px); }
.match-panel.normal-okey .seat-identity small { font-size: clamp(11px, .95vw, 15px); }
.match-panel.normal-okey .opponent-rack { border: 3px solid #b7783d; background: linear-gradient(180deg,#d39a54,#6f3c0f); box-shadow: inset 0 0 0 2px rgba(255,218,157,.32), 0 7px 14px rgba(0,0,0,.35); }
.match-panel.normal-okey .nok-station-top .opponent-rack { width: 100%; height: 61px; }
.match-panel.normal-okey .nok-station-left .opponent-rack,
.match-panel.normal-okey .nok-station-right .opponent-rack { width: 110px; height: 100%; }

/* Own rack follows the reference shelf; slot wrappers stay invisible. */
.match-panel.normal-okey .nok-own-station { left: 16.4%; top: 86.1%; width: 68.6%; height: 38.0%; }
.match-panel.normal-okey .normal-okey-rack-zone { position: absolute; inset: 0; width: 100%; height: 100%; box-sizing: border-box; padding: 9px 12px 7px; border: 4px solid #6f3c0f; border-radius: 10px; background: linear-gradient(180deg,#b7783d 0%,#8a501f 58%,#6f3c0f 100%); box-shadow: inset 0 7px 0 rgba(255,220,160,.25), inset 0 -8px 0 rgba(53,25,8,.35), 0 0 0 3px #b7783d, 0 10px 20px rgba(0,0,0,.5); }
.match-panel.normal-okey .normal-okey-rack-zone::after { content: ""; position: absolute; left: 1.2%; right: 1.2%; top: 50%; height: 4px; background: rgba(62,29,10,.58); border-radius: 3px; pointer-events: none; }
.match-panel.normal-okey #handTiles { width: 100%; max-width: 100%; min-width: 0; height: 100%; min-height: 0; overflow: visible; display: flex; flex-wrap: wrap; align-content: flex-end; gap: 3px 5px; padding: 4px 9px; background: transparent; border: 0; }
.match-panel.normal-okey .rack-slot { border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none !important; }
.match-panel.normal-okey .rack-hint,
.match-panel.normal-okey .auto-sort-actions { display: none !important; }
.match-panel.normal-okey .normal-okey-rack-zone .match-actions { position: absolute; left: -31.0%; top: 125%; width: 199%; height: 6.84vh; display: flex; flex-wrap: nowrap; gap: .72vw; margin: 0; padding: 0; transform: none; }
.match-panel.normal-okey .normal-okey-rack-zone .match-actions button { flex: 1 1 0; height: 100%; min-width: 0; padding: 0 .8vw; border-radius: 9px; font-size: clamp(12px, 1.1vw, 17px); }

/* Reference right column: chat, treats, radio stay together. */
.match-panel.normal-okey .nok-right-column { position: absolute; left: 77.93vw; top: 8.79vh; width: 21.48vw; height: 79.30vh; display: flex; flex-direction: column; gap: .49vh; z-index: 18; }
.match-panel.normal-okey .table-chat { width: 100%; height: 50.2vh; max-height: none; min-height: 0; flex: 0 0 50.2vh; box-sizing: border-box; }
.match-panel.normal-okey #chatMessages { height: auto; min-height: 0; flex: 1 1 auto; }
.match-panel.normal-okey .nok-treat-panel { width: 100%; height: 13.9vh; flex: 0 0 13.9vh; box-sizing: border-box; }
.match-panel.normal-okey .nok-radio-panel { width: 100%; height: 14.2vh; flex: 0 0 14.2vh; box-sizing: border-box; }
.match-panel.normal-okey .nok-treat-options { grid-template-columns: repeat(4,minmax(0,1fr)); }

@media (max-aspect-ratio: 3/2) {
  .match-panel.normal-okey .nok-presentation { transform-origin: top left; transform: scale(min(1, calc(100vw / 1536px), calc(100vh / 1024px))); }
}

/* Direct approved-image preview: active only on a Normal Okey match view. */
.normal-okey-image-preview { display: none; }
body:has(#matchPanel.normal-okey:not(.hidden)) .topbar { display: none; }
.match-panel.normal-okey {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #050505 !important;
}
.match-panel.normal-okey > :not(.normal-okey-image-preview) { display: none !important; }
.match-panel.normal-okey > .normal-okey-image-preview {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #050505;
}
.match-panel.normal-okey > .normal-okey-image-preview img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Approved clean rack artwork and the existing live hand share the
   reference rack footprint. The artwork is an image asset; no rack is
   redrawn in CSS. */
.match-panel.normal-okey > .normal-okey-image-preview .normal-okey-clean-rack {
  position: absolute;
  left: 18.30%;
  top: 67.68%;
  width: 46.81%;
  height: 17.09%;
  max-width: none;
  max-height: none;
  object-fit: fill;
  object-position: center;
  z-index: 2;
  pointer-events: none;
}
.match-panel.normal-okey > .normal-okey-image-preview .normal-okey-live-rack-layer {
  position: absolute;
  left: 18.30%;
  top: 67.68%;
  width: 46.81%;
  height: 17.09%;
  box-sizing: border-box;
  padding: 9px 12px 7px;
  overflow: visible;
  z-index: 3;
}
.match-panel.normal-okey > .normal-okey-image-preview .normal-okey-live-rack-layer #handTiles {
  display: grid;
  grid-template-columns: repeat(8, 44px);
  grid-template-rows: repeat(2, 61px);
  grid-auto-flow: row;
  align-content: flex-end;
  gap: 3px 1px;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: visible;
  padding: 0;
  border: 0;
  background: transparent;
}
.match-panel.normal-okey > .normal-okey-image-preview .normal-okey-live-rack-layer #handTiles .rack-slot {
  display: block !important;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
.match-panel.normal-okey > .normal-okey-image-preview .normal-okey-live-rack-layer #handTiles .tile {
  flex: 0 0 44px;
  width: 44px;
  height: 61px;
}
.match-panel.normal-okey .tile.tile-asset {
  display: block;
  box-sizing: border-box;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: transparent;
  box-shadow: none;
  overflow: visible;
}
.match-panel.normal-okey .tile.tile-asset > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  user-select: none;
}
.match-panel.normal-okey .tile.tile-asset::before,
.match-panel.normal-okey .tile.tile-asset::after {
  content: none !important;
  display: none !important;
  pointer-events: none;
}

/* Rack-position-only correction: retain the locked 44x61 tile footprint. */
.match-panel.normal-okey > .normal-okey-image-preview .normal-okey-live-rack-layer {
  padding-left: 18px;
}
.match-panel.normal-okey > .normal-okey-image-preview .normal-okey-live-rack-layer #handTiles > .rack-slot:nth-child(-n + 8) {
  position: relative;
  top: -6px;
}

/* Measured approved-rack layout: preserve source PNG aspect ratio and empty right space. */
.match-panel.normal-okey > .normal-okey-image-preview .normal-okey-live-rack-layer {
  top: 67.18%;
  padding: 0 12px 0 5px;
}
.match-panel.normal-okey > .normal-okey-image-preview .normal-okey-live-rack-layer #handTiles {
  grid-template-columns: repeat(8, 60px);
  grid-template-rows: repeat(2, 83px);
  align-content: start;
  gap: 0 0;
  transform: translateY(-0.20px);
}
.match-panel.normal-okey > .normal-okey-image-preview .normal-okey-live-rack-layer #handTiles > .rack-slot:nth-child(-n + 8) {
  top: 0;
  left: 0;
}
.match-panel.normal-okey > .normal-okey-image-preview .normal-okey-live-rack-layer #handTiles .tile {
  flex: 0 0 60px;
  width: 60px;
  height: 83px;
}

/* Stage 6: live premium Normal Okey table.  This layer is intentionally
   scoped to the standard Okey panel; tile geometry is shared by every theme. */
.match-panel.normal-okey {
  --nok-felt: #125048;
  --nok-felt-deep: #092e2d;
  --nok-frame: #8b4f2a;
  --nok-frame-light: #c98948;
  --nok-panel: rgba(20, 30, 36, .92);
  --nok-panel-soft: rgba(39, 48, 56, .9);
  --nok-gold: #f2b35f;
  --nok-text: #f8f4eb;
  --nok-muted: #aeb6ba;
  position: fixed !important;
  inset: 0 !important;
  z-index: 20;
  width: 100vw !important;
  max-width: none !important;
  min-height: 100dvh;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #071113 !important;
}
.match-panel.normal-okey.table-theme-classic {
  --nok-felt: #155950;
  --nok-felt-deep: #082f2e;
  --nok-frame: #8b4f2a;
  --nok-frame-light: #d3934e;
  background: radial-gradient(circle at 38% 24%, #394651 0, #182831 46%, #090f13 100%) !important;
}
.match-panel.normal-okey.table-theme-modern {
  --nok-felt: #165e69;
  --nok-felt-deep: #0b303a;
  --nok-frame: #315b69;
  --nok-frame-light: #6fc6d0;
  background: radial-gradient(circle at 42% 20%, #344e5d 0, #122832 48%, #071015 100%) !important;
}
.match-panel.normal-okey.table-theme-premium {
  --nok-felt: #4f263b;
  --nok-felt-deep: #241424;
  --nok-frame: #80502d;
  --nok-frame-light: #e2b46e;
  background: radial-gradient(circle at 45% 18%, #54404c 0, #231b2a 52%, #0d0b13 100%) !important;
}
.match-panel.normal-okey.table-theme-nature {
  --nok-felt: #2d5a43;
  --nok-felt-deep: #122f25;
  --nok-frame: #5d6330;
  --nok-frame-light: #b3a557;
  background: radial-gradient(circle at 45% 18%, #40564b 0, #172e29 50%, #091310 100%) !important;
}
.match-panel.normal-okey.table-theme-black {
  --nok-felt: #1d2d33;
  --nok-felt-deep: #0b1418;
  --nok-frame: #303b42;
  --nok-frame-light: #8aa9ad;
  background: radial-gradient(circle at 45% 18%, #26333b 0, #111a20 50%, #050709 100%) !important;
}
.match-panel.normal-okey > .normal-okey-image-preview {
  display: none !important;
}
.match-panel.normal-okey > .nok-presentation {
  display: grid !important;
  position: relative !important;
  grid-template-columns: minmax(190px, 15vw) minmax(188px, 14vw) minmax(0, 1fr) clamp(278px, 22vw, 342px);
  grid-template-rows: 126px minmax(0, 1fr);
  gap: 10px;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 620px;
  padding: 12px 14px 82px !important;
  overflow: hidden !important;
  transform: none !important;
  color: var(--nok-text);
  background: transparent !important;
}
.match-panel.normal-okey .nok-topbar {
  display: contents !important;
}
.match-panel.normal-okey .nok-logo-card {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: 82px;
  padding: 15px 16px;
  border: 1px solid rgba(242, 179, 95, .52);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(36, 44, 52, .96), rgba(12, 18, 22, .96));
  box-shadow: 0 16px 34px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .08);
  letter-spacing: .12em;
}
.match-panel.normal-okey .nok-logo-card::before {
  content: "✦";
  color: var(--nok-gold);
  font-size: 14px;
  line-height: 1;
}
.match-panel.normal-okey .nok-logo-card strong {
  color: #fff8eb;
  font-size: clamp(16px, 1.5vw, 23px);
  line-height: 1.05;
}
.match-panel.normal-okey .nok-logo-card span {
  color: var(--nok-gold);
  font-size: 10px;
  font-weight: 800;
}
.match-panel.normal-okey .nok-top-controls {
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 52px;
  padding: 4px 0;
}
.match-panel.normal-okey .nok-top-control,
.match-panel.normal-okey .normal-okey-session button,
.match-panel.normal-okey .nok-top-controls button {
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 10px;
  color: #e8edef;
  background: rgba(25, 35, 42, .84);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.match-panel.normal-okey .nok-top-control:first-child {
  border-color: rgba(242, 179, 95, .58);
  color: #ffdca6;
}
.match-panel.normal-okey .nok-top-control:disabled,
.match-panel.normal-okey .nok-action-presentation:disabled {
  cursor: not-allowed;
  opacity: .56;
}
.match-panel.normal-okey .normal-okey-nav,
.match-panel.normal-okey .normal-okey-session {
  display: none !important;
}
.match-panel.normal-okey .nok-left-column {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  min-width: 0;
}
.match-panel.normal-okey .nok-info-panel {
  width: 100%;
  min-height: 102px;
  padding: 13px 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
  background: var(--nok-panel);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .24), inset 0 1px rgba(255, 255, 255, .06);
}
.match-panel.normal-okey .nok-info-heading,
.match-panel.normal-okey .nok-info-panel dl > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.match-panel.normal-okey .nok-info-heading {
  margin-bottom: 9px;
  color: #fff8eb;
  font-size: 11px;
  letter-spacing: .08em;
}
.match-panel.normal-okey .nok-live-pill {
  padding: 3px 6px;
  border-radius: 999px;
  color: #9bf0bf;
  background: rgba(47, 179, 111, .14);
  font-size: 9px;
  letter-spacing: .08em;
}
.match-panel.normal-okey .nok-info-panel dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
  margin: 0;
}
.match-panel.normal-okey .nok-info-panel dt {
  color: var(--nok-muted);
  font-size: 10px;
}
.match-panel.normal-okey .nok-info-panel dd {
  max-width: 10ch;
  margin: 0;
  overflow: hidden;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.match-panel.normal-okey .normal-okey-data,
.match-panel.normal-okey .normal-okey-status,
.match-panel.normal-okey .rack-hint,
.match-panel.normal-okey .auto-sort-actions,
.match-panel.normal-okey .normal-okey-nav,
.match-panel.normal-okey .normal-okey-session,
.match-panel.normal-okey .meld-workspace {
  display: none !important;
}
.match-panel.normal-okey .nok-statusbar {
  position: absolute !important;
  top: 91px;
  left: calc(15vw + 16px);
  right: calc(22vw + 24px);
  z-index: 18;
  display: flex !important;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
  color: #c7d0d2;
  background: rgba(6, 14, 17, .62);
  font-size: 10px;
}
.match-panel.normal-okey .nok-statusbar > span:not(.turn-timer) {
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .07);
}
.match-panel.normal-okey .nok-statusbar .turn-timer {
  margin-left: auto;
  color: #ffcf8c;
  font-weight: 800;
}
.match-panel.normal-okey .test-mode-badge {
  padding: 4px 8px;
  border: 1px solid rgba(255, 210, 105, .65);
  border-radius: 6px;
  color: #ffe2a5;
  background: rgba(117, 73, 12, .42);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  white-space: nowrap;
}
.match-panel.normal-okey #prepareHumanFinishTestButton {
  border-color: rgba(255, 210, 105, .65);
  color: #ffe2a5;
}
.match-panel.normal-okey .theme-picker {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  color: var(--nok-muted);
  white-space: nowrap;
}
.match-panel.normal-okey .theme-picker select {
  min-height: 24px;
  padding: 2px 6px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 6px;
  color: #f1f5f5;
  background: rgba(255, 255, 255, .08);
  font-size: 10px;
}
.match-panel.normal-okey .rack-skin-picker {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  color: var(--nok-muted);
  white-space: nowrap;
}
.match-panel.normal-okey .rack-skin-picker select {
  min-height: 24px;
  padding: 2px 6px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 6px;
  color: #f1f5f5;
  background: rgba(255, 255, 255, .08);
  font-size: 10px;
}
.match-panel.normal-okey .nok-shell,
.match-panel.normal-okey .nok-center-column,
.match-panel.normal-okey .normal-okey-main,
.match-panel.normal-okey .nok-table-area {
  display: contents !important;
}
.match-panel.normal-okey .nok-table-stage {
  grid-column: 1 / 4;
  grid-row: 2;
  position: relative !important;
  display: flex !important;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  padding: 48px 42px 0;
  overflow: visible !important;
}
.match-panel.normal-okey .nok-table {
  position: relative !important;
  width: min(100%, 1120px) !important;
  height: clamp(360px, 53vh, 590px) !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  border: 12px solid var(--nok-frame) !important;
  border-radius: 30px !important;
  background: var(--nok-felt) !important;
  box-shadow: 0 24px 44px rgba(0, 0, 0, .4), inset 0 0 0 2px rgba(255, 222, 158, .24), inset 0 0 0 7px rgba(44, 20, 13, .3) !important;
}
.match-panel.normal-okey .nok-table::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(232, 207, 149, .23);
  border-radius: 20px;
  background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .05), transparent 58%), linear-gradient(145deg, rgba(255, 255, 255, .035), transparent 42%);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .17);
  pointer-events: none;
}
.match-panel.normal-okey .nok-table::after {
  content: "";
  position: absolute;
  right: 24px;
  bottom: 12px;
  left: 24px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--nok-frame-light), transparent);
  opacity: .65;
}
.match-panel.normal-okey .nok-right-column {
  grid-column: 4;
  grid-row: 1 / 3;
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  padding-top: 2px;
  overflow: hidden;
}
.match-panel.normal-okey .nok-chat-panel,
.match-panel.normal-okey .nok-treat-panel,
.match-panel.normal-okey .nok-radio-panel {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 16px;
  background: var(--nok-panel);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .23), inset 0 1px rgba(255, 255, 255, .06);
}
.match-panel.normal-okey .nok-chat-panel {
  display: flex !important;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 240px;
  padding: 14px;
  overflow: hidden;
}
.match-panel.normal-okey .chat-heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.match-panel.normal-okey .nok-chat-tabs {
  display: flex;
  gap: 12px;
  align-items: center;
}
.match-panel.normal-okey .nok-chat-tabs strong {
  color: #fff7e9;
  font-size: 14px;
}
.match-panel.normal-okey .nok-chat-tabs span,
.match-panel.normal-okey .chat-heading small {
  color: var(--nok-muted);
  font-size: 10px;
}
.match-panel.normal-okey .chat-messages {
  flex: 1 1 auto;
  min-height: 90px;
  padding: 4px 2px;
  overflow-y: auto;
  scrollbar-color: rgba(242, 179, 95, .48) transparent;
}
.match-panel.normal-okey .chat-line,
.match-panel.normal-okey .system-line {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 5px 8px;
  margin: 0 0 9px;
  color: #d9e0e0;
  font-size: 11px;
  line-height: 1.35;
}
.match-panel.normal-okey .system-line {
  display: block;
  width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}
.match-panel.normal-okey .chat-line .chat-avatar {
  grid-row: span 2;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(242, 179, 95, .55);
  border-radius: 50%;
  object-fit: cover;
}
.match-panel.normal-okey .chat-line strong { color: #f4c47b; }
.match-panel.normal-okey .chat-line > span:last-child { grid-column: 2; color: #b9c5c6; }
.match-panel.normal-okey .chat-empty { color: #859294; font-size: 11px; }
.match-panel.normal-okey .chat-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  margin-top: 8px;
}
.match-panel.normal-okey .chat-form input {
  min-width: 0;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  color: #f4f5f5;
  background: rgba(255, 255, 255, .06);
  font-size: 11px;
}
.match-panel.normal-okey .chat-form button { min-height: 34px; padding: 7px 10px; font-size: 10px; }
.match-panel.normal-okey .smiley-picker,
.match-panel.normal-okey #chatMessage { display: none !important; }
.match-panel.normal-okey .nok-treat-panel,
.match-panel.normal-okey .nok-radio-panel { flex: 0 0 auto; padding: 12px; }
.match-panel.normal-okey .nok-treat-panel header,
.match-panel.normal-okey .nok-radio-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
  color: #fff4df;
  font-size: 12px;
}
.match-panel.normal-okey .nok-treat-panel header span,
.match-panel.normal-okey .nok-radio-panel header span { color: var(--nok-muted); }
.match-panel.normal-okey .nok-treat-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.match-panel.normal-okey .nok-treat-options button {
  display: grid;
  gap: 2px;
  justify-items: center;
  padding: 5px 2px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 8px;
  color: #d4dada;
  background: rgba(255, 255, 255, .05);
  font-size: 15px;
}
.match-panel.normal-okey .nok-treat-options button span { color: #aeb8b9; font-size: 9px; }
.match-panel.normal-okey .nok-radio-body { display: flex; align-items: center; gap: 9px; }
.match-panel.normal-okey .nok-radio-icon { color: #f2b35f; font-size: 22px; }
.match-panel.normal-okey .nok-radio-body > div { display: grid; gap: 2px; min-width: 0; }
.match-panel.normal-okey .nok-radio-body strong { color: #f0f3ed; font-size: 11px; }
.match-panel.normal-okey .nok-radio-body small { color: var(--nok-muted); font-size: 9px; }
.match-panel.normal-okey .nok-radio-body button { margin-left: auto; padding: 5px 8px; font-size: 9px; }
.match-panel.normal-okey .nok-station-bottom,
.match-panel.normal-okey .nok-station-right,
.match-panel.normal-okey .nok-station-top,
.match-panel.normal-okey .nok-station-left {
  position: absolute !important;
  z-index: 12;
  display: block !important;
}
.match-panel.normal-okey .nok-station-bottom { right: 50%; bottom: -41px; transform: translateX(50%); }
.match-panel.normal-okey .nok-station-right { top: 50%; right: -67px; transform: translateY(-50%); }
.match-panel.normal-okey .nok-station-top { top: -48px; left: 50%; transform: translateX(-50%); }
.match-panel.normal-okey .nok-station-left { top: 50%; left: -67px; transform: translateY(-50%); }
.match-panel.normal-okey .player-seat {
  position: relative !important;
  display: flex !important;
  align-items: center;
  gap: 8px;
  width: 168px;
  min-height: 66px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, .17) !important;
  border-radius: 15px;
  color: var(--nok-text);
  background: linear-gradient(145deg, rgba(34, 45, 51, .97), rgba(11, 20, 25, .97)) !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .31), inset 0 1px rgba(255, 255, 255, .08);
}
.match-panel.normal-okey .player-seat.active {
  border-color: #ffc56d !important;
  background: linear-gradient(145deg, rgba(77, 55, 32, .98), rgba(32, 24, 20, .98)) !important;
  box-shadow: 0 0 0 2px rgba(242, 179, 95, .22), 0 14px 28px rgba(0, 0, 0, .4), 0 0 22px rgba(242, 179, 95, .16) !important;
}
.match-panel.normal-okey .player-seat.active::before {
  content: "SIRA";
  position: absolute;
  top: -9px;
  right: 11px;
  padding: 3px 6px;
  border-radius: 999px;
  color: #321d08;
  background: #ffc56d;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .09em;
}
.match-panel.normal-okey .player-seat.own { border-color: rgba(118, 209, 173, .7) !important; }
.match-panel.normal-okey .seat-avatar {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border: 2px solid var(--nok-frame-light);
  border-radius: 50%;
  color: #f8f2e7;
  background: linear-gradient(145deg, #6e8490, #2e414a);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
  font-size: 12px;
  font-weight: 900;
  object-fit: cover;
}
.match-panel.normal-okey .seat-identity {
  display: flex !important;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.match-panel.normal-okey .seat-identity strong {
  max-width: 95px;
  overflow: hidden;
  color: #fff8e9;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.match-panel.normal-okey .seat-identity > small { color: #aebabc; font-size: 9px; }
.match-panel.normal-okey .seat-identity .player-score { color: #f2c27b; font-size: 9px; }
.match-panel.normal-okey .opponent-rack {
  position: absolute;
  right: -7px;
  bottom: -13px;
  display: block !important;
  width: 41px;
  height: 14px;
  border: 1px solid rgba(242, 179, 95, .56);
  border-radius: 4px;
  background: repeating-linear-gradient(90deg, #315c70 0 5px, #193849 5px 7px);
  box-shadow: 0 4px 7px rgba(0, 0, 0, .35);
}
.match-panel.normal-okey .opponent-rack::after {
  content: "";
  position: absolute;
  top: -15px;
  right: 0;
  padding: 1px 4px;
  border-radius: 999px;
  color: #fff;
  background: rgba(10, 18, 22, .94);
  font-size: 8px;
}
.match-panel.normal-okey .opponent-rack.bot-rack::after { content: attr(data-hand-count); }
.match-panel.normal-okey .nok-center-play-area { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.match-panel.normal-okey .nok-center-brand {
  position: absolute;
  top: 31%;
  left: 50%;
  display: grid;
  gap: 3px;
  transform: translate(-50%, -50%);
  color: rgba(238, 224, 183, .28);
  text-align: center;
  pointer-events: none;
}
.match-panel.normal-okey .nok-center-brand strong { font-size: 18px; letter-spacing: .22em; }
.match-panel.normal-okey .nok-center-brand span { font-size: 9px; letter-spacing: .12em; }
.match-panel.normal-okey .nok-center {
  position: absolute;
  top: 49%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 17px;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}
.match-panel.normal-okey .nok-pile-box,
.match-panel.normal-okey .center-indicator,
.match-panel.normal-okey .nok-discard-center {
  display: grid;
  justify-items: center;
  gap: 5px;
  min-width: 72px;
  color: #f5ead4;
  font-size: 10px;
  text-align: center;
}
.match-panel.normal-okey .nok-pile-box strong { color: #fff; font-size: 18px; line-height: 1; }
.match-panel.normal-okey .nok-pile-box small,
.match-panel.normal-okey .center-indicator small,
.match-panel.normal-okey .nok-discard-center > small { color: #d8bf92; font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.match-panel.normal-okey .draw-stack {
  position: relative !important;
  width: 43px;
  height: 58px;
  margin: 0;
  border: 1px solid rgba(255, 239, 198, .48);
  border-radius: 6px;
  background: repeating-linear-gradient(135deg, #71422f 0 5px, #c18145 5px 7px);
  box-shadow: 4px 4px 0 #472c26, 8px 8px 0 #2a2020, 0 9px 13px rgba(0, 0, 0, .38);
  cursor: pointer;
}
.match-panel.normal-okey .draw-stack i { display: none; }
.match-panel.normal-okey .center-indicator-tile {
  display: grid;
  place-items: center;
  width: 48px !important;
  height: 66px !important;
  overflow: hidden;
  border: 1px solid rgba(255, 239, 198, .72);
  border-radius: 5px;
  color: #1b2023;
  background: #f4ecdc;
  box-shadow: 0 8px 15px rgba(0, 0, 0, .28);
  font-size: 22px;
  font-weight: 900;
}
.match-panel.normal-okey .center-indicator-tile img,
.match-panel.normal-okey .board-tile.tile-asset img,
.match-panel.normal-okey .tile.tile-asset img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}
.match-panel.normal-okey .nok-discard-center { min-width: 64px; }
.match-panel.normal-okey .nok-discard-help { color: rgba(239, 227, 202, .52); font-size: 8px; white-space: nowrap; }
.match-panel.normal-okey .unowned-discard {
  display: grid;
  min-height: 66px;
  place-items: center;
  width: 48px;
  border: 1px dashed rgba(255, 255, 255, .17);
  border-radius: 5px;
}
.match-panel.normal-okey .seat-discards {
  position: absolute !important;
  z-index: 5;
  display: flex !important;
  min-width: 48px;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}
.match-panel.normal-okey .nok-discard-bottom-left { bottom: 24%; left: 28%; }
.match-panel.normal-okey .nok-discard-bottom-right { right: 28%; bottom: 24%; }
.match-panel.normal-okey .nok-discard-top-right { top: 24%; right: 28%; }
.match-panel.normal-okey .nok-discard-top-left { top: 24%; left: 28%; }
.match-panel.normal-okey .discard-stack { position: relative; width: 45px; height: 62px; }
.match-panel.normal-okey .discard-tile-back,
.match-panel.normal-okey .discard-stack .board-tile {
  position: absolute;
  inset: 0;
  width: 42px !important;
  height: 58px !important;
  border-radius: 5px;
}
.match-panel.normal-okey .discard-tile-back {
  transform: translate(calc(var(--discard-index) * 2px), calc(var(--discard-index) * -2px));
  border: 1px solid rgba(255, 239, 198, .35);
  background: repeating-linear-gradient(135deg, #315d6e 0 5px, #193a4c 5px 7px);
}
.match-panel.normal-okey .discard-stack .board-tile { transform: translate(calc(var(--discard-index) * 2px), calc(var(--discard-index) * -2px)); }
.match-panel.normal-okey .board-tile {
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 5px;
  color: #1d2529;
  background: #f4ecdc;
  font-size: 19px;
  font-weight: 900;
}
.match-panel.normal-okey .board-tile.tile-asset { padding: 0; }
.match-panel.normal-okey .board-tile.drawable { cursor: pointer; box-shadow: 0 0 0 2px rgba(242, 179, 95, .78); }
.match-panel.normal-okey .nok-own-station {
  position: absolute !important;
  z-index: 15;
  right: 50%;
  bottom: -99px;
  width: min(760px, 82%);
  height: 156px;
  transform: translateX(50%);
}
.match-panel.normal-okey .normal-okey-rack-zone {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 100%;
  height: 100%;
  padding: 8px;
  border: 5px solid var(--nok-frame);
  border-radius: 18px;
  background: linear-gradient(145deg, #a76b3d, #5c3426 65%, #38221e);
  box-shadow: 0 18px 30px rgba(0, 0, 0, .46), inset 0 1px rgba(255, 229, 169, .45), inset 0 0 0 2px rgba(46, 20, 13, .5);
}
.match-panel.normal-okey #handTiles {
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
  height: 100%;
  padding: 0;
}
.match-panel.normal-okey #handTiles .rack-slot {
  display: flex !important;
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
  height: 100% !important;
  padding: 0;
}
.match-panel.normal-okey #handTiles .tile {
  flex: 0 1 auto !important;
  width: 100% !important;
  height: min(100%, 72px) !important;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(30, 34, 34, .32);
  border-radius: 5px;
  background: #f4ecdc;
  box-shadow: 0 3px 4px rgba(0, 0, 0, .27);
}
.match-panel.normal-okey #handTiles .tile.selected { transform: translateY(-6px); box-shadow: 0 0 0 2px #ffe09c, 0 6px 8px rgba(0, 0, 0, .35); }
.match-panel.normal-okey .normal-okey-side-controls {
  position: absolute;
  top: -40px;
  left: 0;
  display: flex;
  gap: 5px;
}
.match-panel.normal-okey .normal-okey-side-controls button { min-height: 30px; padding: 5px 8px; font-size: 9px; }
/* NORMAL_OKEY_SIDE_CONTROLS_HIT_TARGET=YES */
.match-panel.normal-okey .normal-okey-side-controls { pointer-events: none; }
.match-panel.normal-okey .normal-okey-side-controls :is(button, input, select, textarea, label, [role="button"]) { pointer-events: auto; }
.match-panel.normal-okey .nok-live-actions {
  position: absolute;
  top: -40px;
  right: 0;
  display: flex;
  gap: 5px;
}
.match-panel.normal-okey .nok-live-actions button {
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 7px;
  color: #eef3f0;
  background: rgba(13, 24, 29, .88);
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
}
.match-panel.normal-okey .nok-live-actions .primary { border-color: rgba(242, 179, 95, .58); color: #ffe0aa; }
.match-panel.normal-okey .nok-action-bar {
  position: fixed !important;
  right: clamp(12px, 3vw, 48px);
  bottom: clamp(10px, 2vh, 22px);
  left: clamp(12px, 3vw, 48px);
  z-index: 40;
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
  height: 56px;
  margin: 0 !important;
}
.match-panel.normal-okey .nok-action-bar button {
  min-width: 0;
  min-height: 0;
  padding: 6px 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 11px;
  color: #dbe3e2;
  background: linear-gradient(145deg, rgba(39, 50, 57, .97), rgba(15, 23, 28, .97));
  box-shadow: 0 9px 18px rgba(0, 0, 0, .28);
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.match-panel.normal-okey .nok-action-bar #nokAutoSortPresentation {
  border-color: rgba(113, 208, 163, .62);
  color: #b9f3d0;
}
.match-panel.normal-okey .nok-action-bar button:disabled { color: #79878a; background: rgba(25, 33, 38, .72); }
.match-panel.normal-okey .nok-connection-control { display: grid !important; grid-template-columns: auto 1fr; align-items: center; gap: 3px 5px; }
.match-panel.normal-okey .nok-connection-control > small { grid-column: 2; color: #f2c27b; font-size: 8px; }
.match-panel.normal-okey .nok-connection-control[data-connection-state="connected"] > span:first-child { color: #79e3ae; }
.match-panel.normal-okey .nok-connection-control[data-connection-state="error"] > span:first-child,
.match-panel.normal-okey .nok-connection-control[data-connection-state="disconnected"] > span:first-child { color: #ff877f; }
.match-panel.normal-okey #matchMessage { position: absolute; right: 0; bottom: -125px; left: 0; z-index: 20; margin: 0; color: #ffe0aa; text-align: center; }

@media (max-width: 1180px) {
  .match-panel.normal-okey > .nok-presentation {
    grid-template-columns: 184px minmax(0, 1fr) 270px;
    grid-template-rows: 108px minmax(0, 1fr);
    padding-right: 10px !important;
    padding-left: 10px !important;
  }
  .match-panel.normal-okey .nok-logo-card { grid-column: 1; grid-row: 1; min-height: 72px; padding: 11px 12px; }
  .match-panel.normal-okey .nok-top-controls { grid-column: 2; grid-row: 1; justify-content: flex-start; gap: 5px; }
  .match-panel.normal-okey .nok-top-control { padding: 7px 8px; font-size: 10px; }
  .match-panel.normal-okey .nok-left-column { grid-column: 1; grid-row: 2; align-self: start; }
  .match-panel.normal-okey .nok-table-stage { grid-column: 2; grid-row: 2; padding: 48px 10px 0; }
  .match-panel.normal-okey .nok-right-column { grid-column: 3; grid-row: 1 / 3; }
  .match-panel.normal-okey .nok-statusbar { top: 75px; left: 194px; right: 288px; }
  .match-panel.normal-okey .nok-table { height: clamp(320px, 52vh, 500px) !important; border-width: 9px !important; border-radius: 24px !important; }
  .match-panel.normal-okey .nok-own-station { bottom: -88px; width: min(580px, 92%); height: 138px; }
  .match-panel.normal-okey #handTiles .tile { height: min(100%, 61px) !important; }
  .match-panel.normal-okey .nok-action-bar { grid-template-columns: repeat(4, minmax(0, 1fr)); height: 92px; gap: 6px; }
  .match-panel.normal-okey .nok-action-bar button { font-size: 9px; }
}
@media (max-width: 900px) {
  .match-panel.normal-okey { overflow: auto !important; }
  .match-panel.normal-okey > .nok-presentation {
    display: block !important;
    width: 100% !important;
    min-height: 100dvh;
    height: auto !important;
    padding: 10px 10px 116px !important;
    overflow: visible !important;
  }
  .match-panel.normal-okey .nok-topbar { display: flex !important; align-items: flex-start; flex-wrap: wrap; gap: 8px; }
  .match-panel.normal-okey .nok-logo-card { width: 190px; }
  .match-panel.normal-okey .nok-top-controls { flex: 1 1 400px; min-height: 72px; justify-content: flex-start; }
  .match-panel.normal-okey .nok-left-column { width: 100%; margin: 8px 0; }
  .match-panel.normal-okey .nok-info-panel { min-height: 0; }
  .match-panel.normal-okey .nok-info-panel dl { grid-template-columns: repeat(3, 1fr); }
  .match-panel.normal-okey .nok-statusbar { position: static !important; margin: 6px 0 8px; }
  .match-panel.normal-okey .nok-shell,
  .match-panel.normal-okey .nok-center-column,
  .match-panel.normal-okey .normal-okey-main,
  .match-panel.normal-okey .nok-table-area { display: block !important; }
  .match-panel.normal-okey .nok-table-stage { display: flex !important; width: 100%; height: 540px; padding: 56px 12px 0; }
  .match-panel.normal-okey .nok-table { width: 100% !important; height: clamp(320px, 58vw, 430px) !important; }
  .match-panel.normal-okey .nok-right-column { position: relative; width: 100%; max-height: 310px; margin-top: 12px; overflow: visible; }
  .match-panel.normal-okey .nok-chat-panel { min-height: 190px; }
  .match-panel.normal-okey .nok-action-bar { position: absolute !important; right: 10px; bottom: 14px; left: 10px; }
  .match-panel.normal-okey .nok-own-station { width: min(700px, 94%); }
}
@media (max-width: 620px) {
  .match-panel.normal-okey .nok-logo-card { width: 100%; min-height: 60px; }
  .match-panel.normal-okey .nok-top-controls { flex-basis: 100%; min-height: 0; }
  .match-panel.normal-okey .nok-top-control { flex: 1 1 92px; }
  .match-panel.normal-okey .nok-info-panel dl { grid-template-columns: repeat(2, 1fr); }
  .match-panel.normal-okey .nok-table-stage { height: 490px; padding: 48px 4px 0; }
  .match-panel.normal-okey .nok-table { height: 300px !important; border-width: 7px !important; }
  .match-panel.normal-okey .nok-station-left,
  .match-panel.normal-okey .nok-station-right { display: none !important; }
  .match-panel.normal-okey .nok-station-top { top: -44px; }
  .match-panel.normal-okey .player-seat { width: 142px; min-height: 58px; padding: 5px 7px; }
  .match-panel.normal-okey .seat-avatar { width: 38px; height: 38px; }
  .match-panel.normal-okey .seat-identity strong { max-width: 76px; font-size: 10px; }
  .match-panel.normal-okey .nok-center { gap: 6px; }
  .match-panel.normal-okey .nok-pile-box,
  .match-panel.normal-okey .center-indicator,
  .match-panel.normal-okey .nok-discard-center { min-width: 50px; }
  .match-panel.normal-okey .nok-own-station { bottom: -80px; width: 98%; height: 126px; }
  .match-panel.normal-okey #handTiles { gap: 2px; }
.match-panel.normal-okey #handTiles .tile { height: min(100%, 53px) !important; }
  .match-panel.normal-okey .nok-live-actions { top: -37px; left: 0; right: auto; }
  .match-panel.normal-okey .nok-live-actions button { padding: 4px 5px; font-size: 8px; }
  .match-panel.normal-okey .normal-okey-side-controls { display: none; }
  .match-panel.normal-okey .nok-action-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); height: 154px; }
}

/* OYUNPIYAT_IKRAM_STAGE1_START */
.normal-okey-gift-composer {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(3, 12, 15, .72);
}
.normal-okey-gift-composer.hidden,
.normal-okey-gift-composer[hidden] { display: none !important; }
.normal-okey-gift-card {
  width: min(700px, calc(100vw - 24px));
  max-height: min(85vh, calc(100vh - 24px));
  max-height: min(85dvh, calc(100vh - 24px));
  overflow: auto;
  padding: 18px;
  border: 1px solid rgba(225, 181, 104, .42);
  border-radius: 16px;
  color: #f6ead5;
  background: linear-gradient(145deg, rgba(55, 32, 26, .98), rgba(14, 26, 29, .98));
  box-shadow: 0 22px 48px rgba(0, 0, 0, .48), inset 0 1px rgba(255, 255, 255, .08);
}
.normal-okey-gift-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.normal-okey-gift-heading .eyebrow { margin: 0 0 4px; color: #e4bd79; font-size: 10px; letter-spacing: .14em; }
.normal-okey-gift-heading h2 { margin: 0; color: #ffe1a1; font-size: 20px; letter-spacing: .08em; }
.normal-okey-gift-heading button { min-width: 34px; min-height: 34px; font-size: 20px; }
.normal-okey-gift-categories {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 1px 8px;
  scrollbar-width: thin;
}
.normal-okey-gift-category,
.normal-okey-gift-product {
  border: 1px solid rgba(225, 181, 104, .28);
  border-radius: 9px;
  color: #f5dfba;
  background: rgba(18, 31, 33, .78);
  cursor: pointer;
}
.normal-okey-gift-category { flex: 0 0 auto; padding: 7px 9px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.normal-okey-gift-category[aria-selected="true"] { border-color: #e8b968; color: #fff0ca; background: rgba(121, 75, 38, .7); }
.normal-okey-gift-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; min-height: 174px; padding: 8px 0 12px; }
.normal-okey-gift-product { display: grid; grid-template-columns: 1fr; justify-items: center; align-items: center; gap: 7px; min-height: 164px; padding: 8px; text-align: center; }
.normal-okey-gift-product:hover,
.normal-okey-gift-product.selected { border-color: #f0c574; background: rgba(96, 123, 91, .42); box-shadow: 0 5px 12px rgba(0, 0, 0, .2); }
.normal-okey-gift-product-image { display: block; width: 100%; height: 116px; border-radius: 7px; object-fit: contain; background: rgba(0, 0, 0, .2); }
.normal-okey-gift-product-icon { font-size: 24px; line-height: 1; }
.normal-okey-gift-product > span:last-child { color: #fff2d7; font-size: 11px; font-weight: 700; }
.normal-okey-gift-selection { min-height: 24px; margin: 0 0 10px; padding: 7px 9px; border-radius: 8px; color: #ffe5ae; background: rgba(255, 255, 255, .06); font-size: 11px; }
.normal-okey-gift-recipient-row { display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: center; gap: 8px; }
.normal-okey-gift-recipient-row label { color: #f2ce8b; font-size: 11px; font-weight: 800; }
.normal-okey-gift-recipient-row select { min-width: 0; padding: 8px 9px; border: 1px solid rgba(225, 181, 104, .3); border-radius: 8px; color: #fff0d0; background: rgba(8, 20, 23, .8); }
.normal-okey-gift-recipient-row select:disabled { cursor: not-allowed; opacity: .62; }
.normal-okey-gift-recipient-hint { min-height: 17px; margin: 6px 0 0; color: #b7c4c0; font-size: 10px; }
.normal-okey-gift-disabled-note { margin: 10px 0 0; color: #e7c883; font-size: 10px; }
.normal-okey-gift-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.normal-okey-gift-actions button { min-width: 100px; }
.normal-okey-gift-actions button:disabled { cursor: not-allowed; opacity: .55; }
@media (max-width: 620px) {
  .normal-okey-gift-composer { padding: 10px; }
  .normal-okey-gift-card { width: min(100%, 520px); padding: 13px; }
  .normal-okey-gift-heading h2 { font-size: 17px; }
  .normal-okey-gift-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .normal-okey-gift-product { min-height: 132px; padding: 7px 5px; }
  .normal-okey-gift-product-image { height: 88px; }
  .normal-okey-gift-product > span:last-child { font-size: 10px; }
  .normal-okey-gift-recipient-row { grid-template-columns: 1fr; gap: 5px; }
  .normal-okey-gift-actions { justify-content: stretch; }
  .normal-okey-gift-actions button { flex: 1 1 0; }
}
/* OYUNPIYAT_IKRAM_STAGE1_END */

/* Stage 7: viewport-controlled desktop scene. The board and rack share the
   stage flow so neither relies on overflow outside the viewport. */
.match-panel.normal-okey > .nok-presentation {
  grid-template-columns: minmax(178px, 196px) minmax(0, 1fr) clamp(276px, 22vw, 330px) !important;
  grid-template-rows: 86px minmax(0, 1fr) !important;
  gap: 10px !important;
  padding: 10px 12px 78px !important;
}
.match-panel.normal-okey .nok-logo-card {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-height: 70px;
  padding: 10px 12px;
}
.match-panel.normal-okey .nok-top-controls {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-content: flex-start;
  align-content: flex-start;
  min-width: 0;
  min-height: 0;
  padding: 0;
}
.match-panel.normal-okey .nok-top-control,
.match-panel.normal-okey .nok-top-controls button {
  min-height: 34px;
  padding: 7px 10px;
  font-size: clamp(10px, .75vw, 12px);
}
.match-panel.normal-okey .nok-left-column {
  grid-column: 1 !important;
  grid-row: 2 !important;
  align-self: start;
  min-width: 0;
}
.match-panel.normal-okey .nok-info-panel {
  min-height: 0;
  padding: 13px 12px;
}
.match-panel.normal-okey .nok-statusbar {
  top: 61px;
  left: 208px;
  right: calc(22vw + 22px);
  min-height: 27px;
  padding: 4px 8px;
  font-size: 10px;
}
.match-panel.normal-okey .nok-shell,
.match-panel.normal-okey .nok-center-column,
.match-panel.normal-okey .normal-okey-main,
.match-panel.normal-okey .nok-table-area {
  display: contents !important;
}
.match-panel.normal-okey .nok-table-stage {
  grid-column: 2 !important;
  grid-row: 2 !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  min-height: 0;
  padding: 30px 70px 8px !important;
  overflow: visible !important;
}
.match-panel.normal-okey .nok-table {
  flex: 0 0 auto;
  width: min(100%, 1080px, calc((100dvh - 295px) * 1.7)) !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: 1.7 / 1;
  margin: 0 !important;
  border-width: 10px !important;
  border-radius: 26px !important;
}
.match-panel.normal-okey .nok-table::before { inset: 15px; border-radius: 17px; }
.match-panel.normal-okey .nok-station-bottom { bottom: -52px; }
.match-panel.normal-okey .nok-station-top { top: -54px; }
.match-panel.normal-okey .nok-station-left { left: -58px; }
.match-panel.normal-okey .nok-station-right { right: -58px; }
.match-panel.normal-okey .player-seat {
  width: clamp(142px, 12vw, 168px);
  min-height: 64px;
}
.match-panel.normal-okey .seat-identity strong { max-width: 10.5em; font-size: clamp(11px, .78vw, 13px); }
.match-panel.normal-okey .seat-identity > small,
.match-panel.normal-okey .seat-identity .player-score { font-size: clamp(9px, .62vw, 10px); }
.match-panel.normal-okey .nok-own-station {
  position: relative !important;
  right: auto;
  bottom: auto;
  flex: 0 0 auto;
  width: min(760px, 100%) !important;
  height: 132px;
  margin: 0;
  transform: none !important;
}
.match-panel.normal-okey .normal-okey-rack-zone {
  width: 100%;
  height: 100%;
  padding: 8px;
  border-width: 5px;
}
.match-panel.normal-okey #handTiles {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 4px;
  height: 100%;
}
.match-panel.normal-okey #handTiles .tile {
  width: 100% !important;
  height: min(100%, 55px) !important;
}
.match-panel.normal-okey .normal-okey-side-controls { top: -37px; }
.match-panel.normal-okey .nok-live-actions { top: -37px; }
.match-panel.normal-okey .nok-live-actions button {
  min-height: 29px;
  padding: 5px 7px;
  font-size: 9px;
}
.match-panel.normal-okey .nok-right-column {
  grid-column: 3 !important;
  grid-row: 1 / 3 !important;
  min-height: 0;
  padding-top: 0;
}
.match-panel.normal-okey .nok-chat-panel { min-height: 0; }
.match-panel.normal-okey #matchMessage {
  position: fixed !important;
  right: calc(22vw + 22px);
  bottom: 70px;
  left: 208px;
  z-index: 45;
  margin: 0;
  font-size: 11px;
  text-align: center;
  pointer-events: none;
}
.match-panel.normal-okey .nok-action-bar {
  right: clamp(12px, 2.5vw, 42px);
  bottom: clamp(8px, 1.5vh, 16px);
  left: clamp(12px, 2.5vw, 42px);
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 7px;
  height: 56px;
}
.match-panel.normal-okey .nok-action-bar button {
  min-height: 0;
  padding: 6px 7px;
  font-size: clamp(9px, .7vw, 11px);
}

@media (max-width: 1180px) {
  .match-panel.normal-okey > .nok-presentation {
    grid-template-columns: 180px minmax(0, 1fr) 270px !important;
    grid-template-rows: 82px minmax(0, 1fr) !important;
    padding: 9px 10px 108px !important;
  }
  .match-panel.normal-okey .nok-logo-card { min-height: 66px; }
  .match-panel.normal-okey .nok-statusbar { top: 58px; left: 190px; right: 280px; }
  .match-panel.normal-okey .nok-table-stage { padding: 32px 60px 12px !important; }
  .match-panel.normal-okey .nok-table { width: min(100%, calc((100dvh - 285px) * 1.65)) !important; }
  .match-panel.normal-okey .nok-station-left { left: -52px; }
  .match-panel.normal-okey .nok-station-right { right: -52px; }
  .match-panel.normal-okey .player-seat { width: 146px; min-height: 60px; }
  .match-panel.normal-okey .nok-own-station { height: 124px; }
  .match-panel.normal-okey #handTiles .tile { height: min(100%, 51px) !important; }
  .match-panel.normal-okey .nok-action-bar { grid-template-columns: repeat(4, minmax(0, 1fr)); height: 92px; gap: 6px; }
  .match-panel.normal-okey .nok-action-bar button { font-size: 9px; }
  .match-panel.normal-okey #matchMessage { right: 280px; bottom: 103px; left: 190px; }
}
@media (max-width: 900px) {
  .match-panel.normal-okey > .nok-presentation {
    display: block !important;
    min-height: 100dvh;
    height: auto !important;
    padding: 10px 10px 180px !important;
    overflow: visible !important;
  }
  .match-panel.normal-okey .nok-topbar { display: flex !important; gap: 8px; }
  .match-panel.normal-okey .nok-logo-card { width: 190px; }
  .match-panel.normal-okey .nok-top-controls { flex: 1 1 400px; min-height: 66px; }
  .match-panel.normal-okey .nok-left-column { width: 100%; margin: 8px 0; }
  .match-panel.normal-okey .nok-statusbar { position: static !important; margin: 6px 0 8px; }
  .match-panel.normal-okey .nok-shell,
  .match-panel.normal-okey .nok-center-column,
  .match-panel.normal-okey .normal-okey-main,
  .match-panel.normal-okey .nok-table-area { display: block !important; }
  .match-panel.normal-okey .nok-table-stage {
    display: flex !important;
    width: 100%;
    height: clamp(500px, 78vw, 610px);
    padding: 48px 8px 12px !important;
  }
  .match-panel.normal-okey .nok-table { width: min(100%, calc((100dvh - 310px) * 1.65)) !important; }
  .match-panel.normal-okey .nok-own-station { width: min(700px, 100%) !important; height: 124px; }
  .match-panel.normal-okey .nok-right-column {
    position: relative;
    width: 100%;
    max-height: 310px;
    margin-top: 12px;
    overflow: visible;
  }
  .match-panel.normal-okey .nok-action-bar { position: absolute !important; right: 10px; bottom: 14px; left: 10px; }
  .match-panel.normal-okey #matchMessage { right: 10px; bottom: 170px; left: 10px; }
}
@media (max-width: 620px) {
  .match-panel.normal-okey .nok-logo-card { width: 100%; }
  .match-panel.normal-okey .nok-top-controls { flex-basis: 100%; min-height: 0; }
  .match-panel.normal-okey .nok-table-stage { height: 490px; padding: 45px 4px 10px !important; }
  .match-panel.normal-okey .nok-table { width: 100% !important; height: auto !important; }
  .match-panel.normal-okey .nok-own-station { width: 98% !important; height: 116px; }
  .match-panel.normal-okey #handTiles .tile { height: min(100%, 48px) !important; }
  .match-panel.normal-okey .nok-action-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); height: 154px; }
}

/* Stage 8: Premium OYUNPİYAT atmosphere. Visual finish only: all board IDs,
   tile geometry, server state, and controls stay on the existing contract. */
.match-panel.normal-okey.table-theme-premium {
  --nok-felt: #0f5a53;
  --nok-felt-deep: #063634;
  --nok-frame: #8a552f;
  --nok-frame-light: #e1b568;
  --nok-panel: rgba(9, 25, 29, .9);
  --nok-panel-soft: rgba(18, 47, 47, .92);
  --nok-gold: #f2c56f;
  background:
    radial-gradient(circle at 52% 28%, rgba(38, 145, 133, .22), transparent 38%),
    radial-gradient(circle at 7% 92%, rgba(196, 132, 61, .15), transparent 31%),
    linear-gradient(135deg, #06191b 0%, #0a2b2b 48%, #071314 100%) !important;
}
.match-panel.normal-okey > .nok-presentation {
  isolation: isolate;
  background:
    radial-gradient(ellipse at 42% 47%, rgba(55, 155, 141, .12), transparent 42%),
    radial-gradient(ellipse at 58% 86%, rgba(224, 166, 77, .07), transparent 29%),
    transparent !important;
}
.match-panel.normal-okey > .nok-presentation::before,
.match-panel.normal-okey > .nok-presentation::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.match-panel.normal-okey > .nok-presentation::before {
  background:
    radial-gradient(circle at 50% 43%, rgba(255, 255, 255, .055), transparent 31%),
    linear-gradient(115deg, transparent 0 32%, rgba(255, 255, 255, .025) 32.1% 32.25%, transparent 32.35% 67%, rgba(255, 255, 255, .02) 67.1% 67.25%, transparent 67.35%);
  opacity: .82;
}
.match-panel.normal-okey > .nok-presentation::after {
  inset: 10px 12px 78px;
  border: 1px solid rgba(224, 181, 104, .1);
  border-radius: 24px;
  box-shadow: inset 0 0 70px rgba(0, 0, 0, .18), 0 0 0 1px rgba(255, 255, 255, .015);
}
.match-panel.normal-okey .nok-logo-card,
.match-panel.normal-okey .nok-left-column,
.match-panel.normal-okey .nok-statusbar,
.match-panel.normal-okey .nok-table-stage,
.match-panel.normal-okey .nok-right-column,
.match-panel.normal-okey #matchMessage { z-index: 1; }
.match-panel.normal-okey .nok-logo-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(225, 181, 104, .68);
  background:
    radial-gradient(circle at 50% -30%, rgba(242, 197, 111, .22), transparent 53%),
    linear-gradient(145deg, rgba(18, 53, 52, .98), rgba(5, 18, 22, .98));
  box-shadow: 0 18px 36px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 247, 214, .16), inset 0 -20px 30px rgba(0, 0, 0, .14);
}
.match-panel.normal-okey .nok-logo-card::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(225, 181, 104, .17);
  border-radius: 11px;
  pointer-events: none;
}
.match-panel.normal-okey .nok-logo-card strong {
  color: #fff4cf;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.match-panel.normal-okey .nok-logo-card span { color: #f4c76c; }
.match-panel.normal-okey .nok-top-control,
.match-panel.normal-okey .nok-top-controls button {
  border-color: rgba(166, 220, 205, .16);
  background: linear-gradient(145deg, rgba(22, 59, 62, .94), rgba(7, 26, 31, .96));
  box-shadow: 0 9px 22px rgba(0, 0, 0, .2), inset 0 1px rgba(255, 255, 255, .07);
}
.match-panel.normal-okey .nok-top-control:first-child {
  border-color: rgba(239, 195, 105, .7);
  color: #ffe2a0;
  background: linear-gradient(145deg, #6d482a, #382417);
}
.match-panel.normal-okey .nok-info-panel {
  border-color: rgba(225, 181, 104, .32);
  background: linear-gradient(145deg, rgba(16, 42, 44, .96), rgba(7, 20, 24, .96));
  box-shadow: 0 18px 34px rgba(0, 0, 0, .3), inset 0 1px rgba(255, 243, 204, .1), inset 0 -16px 22px rgba(0, 0, 0, .12);
}
.match-panel.normal-okey .nok-info-heading { color: #fff0c8; }
.match-panel.normal-okey .nok-live-pill {
  color: #b6f6cc;
  background: rgba(50, 192, 125, .16);
  box-shadow: inset 0 0 0 1px rgba(120, 240, 177, .12);
}
.match-panel.normal-okey .nok-statusbar {
  border-color: rgba(145, 207, 194, .16);
  background: linear-gradient(90deg, rgba(7, 31, 33, .82), rgba(7, 21, 26, .64));
  box-shadow: 0 9px 24px rgba(0, 0, 0, .17), inset 0 1px rgba(255, 255, 255, .05);
  backdrop-filter: blur(12px);
}
.match-panel.normal-okey .nok-statusbar > span:not(.turn-timer) { background: rgba(65, 159, 145, .12); }
.match-panel.normal-okey .nok-table {
  border-color: #8b552f !important;
  background:
    radial-gradient(circle at 50% 38%, rgba(130, 235, 209, .16), transparent 39%),
    repeating-linear-gradient(102deg, rgba(255, 255, 255, .012) 0 1px, transparent 1px 7px),
    radial-gradient(ellipse at 50% 42%, #176f67 0%, var(--nok-felt) 52%, var(--nok-felt-deep) 100%) !important;
  box-shadow:
    0 0 0 6px rgba(225, 167, 83, .78),
    0 0 0 11px rgba(47, 24, 16, .96),
    0 26px 52px rgba(0, 0, 0, .58),
    inset 0 0 0 2px rgba(255, 236, 175, .27),
    inset 0 -24px 36px rgba(0, 0, 0, .13) !important;
}
.match-panel.normal-okey .nok-table::before {
  inset: 20px;
  border-color: rgba(205, 239, 207, .24);
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 41%, rgba(0, 0, 0, .06) 72%, rgba(0, 0, 0, .16) 100%),
    linear-gradient(135deg, rgba(255, 255, 255, .045), transparent 35%, rgba(0, 0, 0, .08));
  box-shadow: inset 0 0 42px rgba(0, 0, 0, .18), 0 0 0 1px rgba(255, 226, 160, .04);
}
.match-panel.normal-okey .nok-center-brand {
  opacity: .42;
  color: rgba(213, 242, 214, .34);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .28);
}
.match-panel.normal-okey .nok-center-brand::before {
  content: "NORMAL OKEY";
  display: block;
  margin-bottom: 4px;
  color: rgba(245, 211, 137, .44);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .28em;
}
.match-panel.normal-okey .nok-center {
  padding: 13px 16px;
  border: 1px solid rgba(224, 195, 129, .23);
  border-radius: 22px;
  background: rgba(4, 29, 30, .42);
  box-shadow: 0 17px 32px rgba(0, 0, 0, .2), inset 0 1px rgba(255, 255, 255, .07);
  backdrop-filter: blur(5px);
}
.match-panel.normal-okey .nok-pile-box,
.match-panel.normal-okey .center-indicator,
.match-panel.normal-okey .nok-discard-center { color: #f8efd7; }
.match-panel.normal-okey .nok-pile-box strong { color: #ffe09b; text-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.match-panel.normal-okey .draw-stack {
  border-color: rgba(250, 217, 151, .65);
  background: repeating-linear-gradient(135deg, #20555a 0 5px, #0d343d 5px 7px);
  box-shadow: 4px 4px 0 #0a292e, 8px 8px 0 #061b21, 0 12px 18px rgba(0, 0, 0, .35), inset 0 1px rgba(255, 255, 255, .15);
}
.match-panel.normal-okey .center-indicator-tile {
  border-color: rgba(252, 218, 149, .76);
  background: #f4ecdc;
  box-shadow: 0 9px 18px rgba(0, 0, 0, .34), 0 0 0 3px rgba(225, 181, 104, .14);
}
.match-panel.normal-okey .unowned-discard {
  border-color: rgba(246, 218, 159, .34);
  background: rgba(255, 255, 255, .035);
}
.match-panel.normal-okey .player-seat {
  border-color: rgba(234, 215, 170, .22) !important;
  background: linear-gradient(145deg, rgba(20, 55, 59, .96), rgba(6, 23, 29, .97)) !important;
  box-shadow: 0 16px 30px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .1), inset 0 -12px 16px rgba(0, 0, 0, .12);
  backdrop-filter: blur(8px);
}
.match-panel.normal-okey .player-seat::after {
  content: "";
  position: absolute;
  top: 9px;
  right: 10px;
  width: 8px;
  height: 8px;
  border: 2px solid rgba(7, 23, 27, .86);
  border-radius: 50%;
  background: #54e497;
  box-shadow: 0 0 0 2px rgba(84, 228, 151, .12), 0 0 10px rgba(84, 228, 151, .44);
}
.match-panel.normal-okey .player-seat.active {
  border-color: #f3c970 !important;
  background: linear-gradient(145deg, rgba(82, 64, 35, .98), rgba(23, 33, 32, .98)) !important;
  box-shadow: 0 0 0 2px rgba(242, 179, 95, .25), 0 19px 36px rgba(0, 0, 0, .42), 0 0 28px rgba(242, 195, 104, .2) !important;
}
.match-panel.normal-okey .seat-avatar {
  border-color: var(--nok-frame-light);
  outline: 3px solid rgba(225, 181, 104, .12);
  box-shadow: 0 0 0 1px rgba(255, 243, 202, .18), 0 6px 14px rgba(0, 0, 0, .32);
}
.match-panel.normal-okey .seat-identity {
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(145deg, rgba(12, 35, 39, .88), rgba(5, 17, 22, .94));
  box-shadow: inset 0 1px rgba(255, 255, 255, .05);
}
.match-panel.normal-okey .seat-identity strong { color: #fff6dd; }
.match-panel.normal-okey .seat-identity .player-score { color: #f3cc7b; }
.match-panel.normal-okey .player-seat .opponent-rack {
  position: relative !important;
  inset: auto !important;
  align-self: flex-start;
  width: 62px;
  height: 15px;
  margin-top: 3px;
  border-color: rgba(224, 181, 104, .62);
  border-radius: 5px;
  background: repeating-linear-gradient(90deg, #2d6b73 0 5px, #123e49 5px 7px);
  box-shadow: inset 0 1px rgba(255, 255, 255, .17), 0 4px 8px rgba(0, 0, 0, .32);
}
.match-panel.normal-okey .nok-station-top .player-seat .opponent-rack { align-self: center; width: 82px; }
.match-panel.normal-okey .nok-station-left .player-seat .opponent-rack,
.match-panel.normal-okey .nok-station-right .player-seat .opponent-rack { width: 58px; }
.match-panel.normal-okey .opponent-rack::after { top: -13px; right: -2px; color: #d8f4e1; background: rgba(5, 24, 28, .94); }
.match-panel.normal-okey .normal-okey-rack-zone {
  border-color: var(--nok-frame) !important;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(224, 171, 93, .22), transparent 16%),
    linear-gradient(145deg, #9a6137, #654024 62%, #3c281d) !important;
  box-shadow:
    0 22px 36px rgba(0, 0, 0, .48),
    0 0 0 4px rgba(224, 181, 104, .42),
    inset 0 2px rgba(255, 236, 174, .36),
    inset 0 -12px 16px rgba(52, 27, 13, .35) !important;
}
.match-panel.normal-okey .normal-okey-rack-zone::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(255, 228, 167, .18);
  border-radius: 13px;
  pointer-events: none;
}
.match-panel.normal-okey #handTiles .tile.tile-asset > img {
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .28));
}
.match-panel.normal-okey .nok-right-column {
  padding: 8px;
  border: 1px solid rgba(224, 181, 104, .17);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(8, 31, 34, .82), rgba(5, 18, 23, .88));
  box-shadow: 0 20px 38px rgba(0, 0, 0, .26), inset 0 1px rgba(255, 255, 255, .06);
  backdrop-filter: blur(10px);
}
.match-panel.normal-okey .nok-chat-panel,
.match-panel.normal-okey .nok-treat-panel,
.match-panel.normal-okey .nok-radio-panel {
  border-color: rgba(166, 218, 202, .16);
  background: linear-gradient(145deg, rgba(19, 52, 54, .84), rgba(7, 23, 28, .92));
  box-shadow: 0 15px 28px rgba(0, 0, 0, .25), inset 0 1px rgba(255, 255, 255, .075);
}
.match-panel.normal-okey .nok-chat-tabs strong,
.match-panel.normal-okey .nok-treat-panel header strong,
.match-panel.normal-okey .nok-radio-panel header strong { color: #ffdf9b; }
.match-panel.normal-okey .nok-chat-tabs span {
  padding: 3px 7px;
  border: 1px solid rgba(134, 226, 193, .15);
  border-radius: 999px;
  color: #aee5cc;
  background: rgba(62, 181, 142, .11);
}
.match-panel.normal-okey .chat-form input {
  border-color: rgba(170, 220, 205, .18);
  background: rgba(3, 19, 24, .52);
}
.match-panel.normal-okey .nok-treat-options button {
  border-color: rgba(225, 181, 104, .18);
  background: rgba(255, 255, 255, .045);
}
.match-panel.normal-okey .nok-radio-icon { color: #f4c56e; text-shadow: 0 0 12px rgba(244, 197, 110, .3); }
.match-panel.normal-okey .nok-action-bar {
  left: clamp(208px, 16vw, 228px);
  right: calc(22vw + 22px);
  bottom: clamp(8px, 1.5vh, 16px);
  padding: 7px;
  border: 1px solid rgba(224, 181, 104, .2);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(10, 34, 37, .94), rgba(5, 17, 22, .96));
  box-shadow: 0 18px 34px rgba(0, 0, 0, .36), inset 0 1px rgba(255, 255, 255, .07);
  backdrop-filter: blur(12px);
}
.match-panel.normal-okey .nok-action-bar button {
  border-color: rgba(160, 215, 200, .14);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(29, 74, 75, .78), rgba(7, 28, 33, .9));
}
.match-panel.normal-okey .nok-action-bar #nokAutoSortPresentation { border-color: rgba(116, 224, 175, .44); color: #b9f2d1; }
.match-panel.normal-okey .nok-connection-control > small { color: #ffd58a; }

@media (max-width: 1180px) {
  .match-panel.normal-okey .nok-action-bar { left: 190px; right: 280px; }
  .match-panel.normal-okey .nok-right-column { padding: 6px; }
}
@media (max-width: 900px) {
  .match-panel.normal-okey .nok-action-bar { right: 10px; left: 10px; }
  .match-panel.normal-okey > .nok-presentation::after { inset: 10px; }
}

/* Stage 9: final premium composition. The left column owns the table scene;
   the right column remains a real, visible desktop panel. */
.match-panel.normal-okey > .nok-presentation {
  grid-template-columns: minmax(0, 1fr) clamp(240px, 20vw, 330px) !important;
  grid-template-rows: 86px minmax(0, 1fr) !important;
  gap: 10px !important;
  padding: 10px 12px 78px !important;
}
.match-panel.normal-okey .nok-logo-card {
  position: absolute;
  left: 12px;
  top: 10px;
  width: 196px;
  height: 70px;
  min-height: 0;
  box-sizing: border-box;
  padding: 10px 12px;
}
.match-panel.normal-okey .nok-left-column {
  position: absolute;
  left: 218px;
  top: 10px;
  width: 196px;
  height: 70px;
  min-width: 0;
  z-index: 1;
}
.match-panel.normal-okey .nok-info-panel {
  width: 100%;
  height: 70px;
  min-height: 0;
  padding: 8px 10px;
  box-sizing: border-box;
}
.match-panel.normal-okey .nok-info-heading {
  margin-bottom: 4px;
  font-size: 9px;
}
.match-panel.normal-okey .nok-info-panel dl { gap: 2px 8px; }
.match-panel.normal-okey .nok-info-panel dt { font-size: 8px; }
.match-panel.normal-okey .nok-info-panel dd { max-width: 9ch; font-size: 9px; }
.match-panel.normal-okey .nok-top-controls {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: auto;
  min-width: 0;
  min-height: 0;
  margin-left: 430px;
  padding: 0;
  gap: 6px;
  align-items: center;
  justify-content: stretch;
  flex-wrap: nowrap;
}
.match-panel.normal-okey .nok-top-controls button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 34px;
  padding: 6px 7px;
  font-size: clamp(9px, .72vw, 11px);
}
.match-panel.normal-okey .nok-statusbar {
  top: 94px;
  left: 218px;
  right: calc(clamp(240px, 20vw, 330px) + 22px);
}
.match-panel.normal-okey .nok-table-stage {
  grid-column: 1 !important;
  grid-row: 2 !important;
  padding: 22px 56px 8px !important;
  justify-content: space-between;
}
.match-panel.normal-okey .nok-table {
  width: min(100%, 1080px, calc((100dvh - 420px) * 1.7)) !important;
}
.match-panel.normal-okey .nok-station-top { top: -42px; }
.match-panel.normal-okey .nok-station-bottom { bottom: -34px; }
.match-panel.normal-okey .nok-station-left { left: -52px; }
.match-panel.normal-okey .nok-station-right { right: -52px; }
.match-panel.normal-okey .nok-own-station {
  width: min(840px, 100%) !important;
  height: 172px;
}
.match-panel.normal-okey .normal-okey-rack-zone { height: 100%; }
.match-panel.normal-okey #handTiles .tile { height: min(100%, 72px) !important; }
.match-panel.normal-okey .nok-right-column {
  grid-column: 2 !important;
  grid-row: 1 / 3 !important;
  display: flex !important;
  min-width: 0;
  min-height: 0;
  padding: 8px;
  overflow: hidden;
}
.match-panel.normal-okey .nok-action-bar {
  left: 12px;
  right: calc(clamp(240px, 20vw, 330px) + 22px);
}
.match-panel.normal-okey #matchMessage {
  left: 218px;
  right: calc(clamp(240px, 20vw, 330px) + 22px);
}

@media (max-width: 1180px) and (min-width: 901px) {
  .match-panel.normal-okey > .nok-presentation {
    grid-template-columns: minmax(0, 1fr) 240px !important;
    grid-template-rows: 86px minmax(0, 1fr) !important;
    padding: 9px 10px 108px !important;
  }
  .match-panel.normal-okey .nok-logo-card { left: 10px; top: 9px; width: 180px; height: 66px; }
  .match-panel.normal-okey .nok-left-column { left: 200px; top: 9px; width: 180px; height: 66px; }
  .match-panel.normal-okey .nok-info-panel { height: 66px; padding: 7px 8px; }
  .match-panel.normal-okey .nok-top-controls {
    margin-left: 392px;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: center;
    gap: 5px;
  }
  .match-panel.normal-okey .nok-statusbar { top: 94px; left: 200px; right: 260px; }
  .match-panel.normal-okey .nok-table-stage { padding: 22px 48px 8px !important; }
  .match-panel.normal-okey .nok-table { width: min(100%, calc((100dvh - 470px) * 1.7)) !important; }
  .match-panel.normal-okey .nok-own-station { width: min(760px, 100%) !important; height: 154px; }
  .match-panel.normal-okey #handTiles .tile { height: min(100%, 66px) !important; }
  .match-panel.normal-okey .nok-station-left { left: -44px; }
  .match-panel.normal-okey .nok-station-right { right: -44px; }
  .match-panel.normal-okey .nok-right-column { padding: 6px; }
  .match-panel.normal-okey .nok-action-bar { left: 10px; right: 260px; }
  .match-panel.normal-okey #matchMessage { left: 200px; right: 260px; }
}

@media (max-width: 900px) {
  .match-panel.normal-okey > .nok-presentation {
    display: block !important;
    min-height: 100dvh;
    height: auto !important;
    padding: 10px 10px 180px !important;
    overflow: visible !important;
  }
  .match-panel.normal-okey .nok-logo-card {
    position: relative;
    left: auto;
    top: auto;
    width: 190px;
    height: auto;
    min-height: 66px;
  }
  .match-panel.normal-okey .nok-left-column {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    margin: 8px 0;
  }
  .match-panel.normal-okey .nok-info-panel { height: auto; min-height: 0; }
  .match-panel.normal-okey .nok-topbar { display: flex !important; gap: 8px; }
  .match-panel.normal-okey .nok-top-controls {
    display: flex !important;
    grid-column: auto !important;
    grid-row: auto !important;
    width: auto;
    margin-left: 0;
    min-height: 66px;
    flex: 1 1 400px;
    flex-wrap: wrap;
  }
  .match-panel.normal-okey .nok-statusbar { position: static !important; margin: 6px 0 8px; }
  .match-panel.normal-okey .nok-shell,
  .match-panel.normal-okey .nok-center-column,
  .match-panel.normal-okey .normal-okey-main,
  .match-panel.normal-okey .nok-table-area { display: block !important; }
  .match-panel.normal-okey .nok-table-stage {
    display: flex !important;
    width: 100%;
    height: clamp(500px, 78vw, 610px);
    padding: 48px 8px 12px !important;
  }
  .match-panel.normal-okey .nok-table { width: min(100%, calc((100dvh - 310px) * 1.65)) !important; }
  .match-panel.normal-okey .nok-own-station { width: min(700px, 100%) !important; height: 124px; }
  .match-panel.normal-okey #handTiles .tile { height: min(100%, 55px) !important; }
  .match-panel.normal-okey .nok-right-column {
    position: relative;
    width: 100%;
    max-height: 310px;
    margin-top: 12px;
    overflow: visible;
  }
  .match-panel.normal-okey .nok-action-bar { position: absolute !important; right: 10px; bottom: 14px; left: 10px; }
  .match-panel.normal-okey #matchMessage { right: 10px; bottom: 170px; left: 10px; }
}

@media (max-width: 620px) {
  .match-panel.normal-okey .nok-table-stage { height: 490px; padding: 45px 4px 10px !important; }
  .match-panel.normal-okey .nok-own-station { width: 98% !important; height: 116px; }
  .match-panel.normal-okey #handTiles .tile { height: min(100%, 48px) !important; }
}

/* Stage 10: real Chrome desktop correction. Keep the panel in the viewport
   instead of relying on a display:contents grid descendant to paint it. */
body:has(#matchPanel.normal-okey:not(.hidden)) { overflow-x: hidden; }
.match-panel.normal-okey > .nok-presentation {
  overflow-x: clip !important;
}
.match-panel.normal-okey .nok-right-column {
  position: absolute !important;
  top: 96px;
  right: 12px;
  bottom: 78px;
  width: clamp(220px, 20vw, 250px);
  grid-column: auto !important;
  grid-row: auto !important;
  z-index: 32 !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: hidden !important;
}
/* Stage 17A.4: the success toast must sit above the presentation layers.
   It remains pointer-transparent and does not participate in layout. */
.match-panel.normal-okey #matchMessage.indicator-feedback {
  display: block !important;
  z-index: 45 !important;
}
.normal-okey-toast {
  position: fixed;
  top: clamp(76px, 10vh, 120px);
  left: 50%;
  z-index: 120 !important;
  display: block;
  width: max-content;
  max-width: min(92vw, 560px);
  transform: translateX(-50%);
  margin: 0;
  padding: 10px 18px;
  border: 1px solid rgba(231, 184, 92, .82);
  border-radius: 999px;
  background: rgba(18, 42, 31, .96);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .32);
  color: #f8e5b7;
  font-size: clamp(.82rem, 1.2vw, 1rem);
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  pointer-events: none;
}
.normal-okey-toast[hidden] { display: none !important; }
.match-panel.normal-okey .normal-okey-indicator-toast {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 60;
  display: block;
  width: max-content;
  max-width: calc(100% - 32px);
  margin: 0;
  padding: 10px 18px;
  border: 1px solid rgba(231, 184, 92, .88);
  border-radius: 12px;
  background: rgba(18, 42, 31, .96);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .32);
  color: #f8e5b7;
  font-size: clamp(.82rem, 1.2vw, 1rem);
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  white-space: pre-line;
  overflow-wrap: anywhere;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.match-panel.normal-okey .normal-okey-indicator-toast[hidden] { display: none !important; }
/* Stage17D.4.2.1: active-seat lock feedback is centered on the actual table,
   while indicator and other Normal Okey toasts retain their top position. */
.normal-okey-toast.center-table-warning {
  top: var(--normal-okey-toast-top, 50vh);
  left: var(--normal-okey-toast-left, 50vw);
  transform: translate(-50%, -50%);
}
.match-panel.normal-okey .nok-table-stage {
  top: -28px;
  z-index: 2;
}
.match-panel.normal-okey .nok-station-top { z-index: 14; }
.match-panel.normal-okey .nok-station-left,
.match-panel.normal-okey .nok-station-right,
.match-panel.normal-okey .nok-station-bottom { z-index: 14; }
.match-panel.normal-okey .nok-action-bar { z-index: 40; }

@media (max-width: 1180px) and (min-width: 901px) {
  .match-panel.normal-okey .nok-right-column {
    top: 94px;
    right: 10px;
    bottom: 108px;
    width: 240px;
  }
}

@media (max-width: 900px) {
  .match-panel.normal-okey .nok-right-column {
    position: relative !important;
    top: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    z-index: 1 !important;
    overflow: visible !important;
  }
  .match-panel.normal-okey .nok-table-stage { top: auto; }
}

/* Stage 11: deterministic 1250px desktop geometry. The table scene owns
   everything left of the panel; no station can paint behind the panel. */
@media (min-width: 901px) {
  .match-panel.normal-okey .nok-table-stage {
    position: absolute !important;
    top: 78px;
    right: calc(clamp(220px, 20vw, 250px) + 22px);
    bottom: 78px;
    left: 12px;
    width: auto !important;
    height: auto !important;
    min-width: 0;
    padding: 22px 56px 8px !important;
    overflow: visible !important;
    transform: none !important;
  }
  .match-panel.normal-okey .nok-table {
    flex: 0 0 auto;
    max-width: 100%;
  }
  .match-panel.normal-okey .nok-own-station {
    width: min(840px, calc(100% - 8px)) !important;
    max-width: 100%;
  }
  .match-panel.normal-okey .nok-station-top,
  .match-panel.normal-okey .nok-station-left,
  .match-panel.normal-okey .nok-station-right,
  .match-panel.normal-okey .nok-station-bottom {
    width: max-content;
    height: max-content;
  }
  .match-panel.normal-okey .nok-station-top {
    top: -70px;
    right: 50%;
    left: auto;
    transform: translateX(50%);
  }
  .match-panel.normal-okey .nok-station-left {
    top: 50%;
    right: auto;
    left: -52px;
    transform: translateY(-50%);
  }
  .match-panel.normal-okey .nok-station-right {
    top: 50%;
    right: -52px;
    left: auto;
    transform: translateY(-50%);
  }
  .match-panel.normal-okey .nok-station-bottom {
    right: 50%;
    bottom: -34px;
    left: auto;
    transform: translateX(50%);
  }
  .match-panel.normal-okey .nok-station-top .player-seat {
    width: clamp(138px, 12vw, 160px);
    min-height: 0;
    gap: 5px;
    padding: 6px 8px;
  }
  .match-panel.normal-okey .nok-station-top .seat-avatar {
    width: 42px;
    height: 42px;
  }
  .match-panel.normal-okey .nok-station-top .seat-identity {
    padding: 6px 8px;
    gap: 1px;
  }
  .match-panel.normal-okey .nok-station-top .seat-identity strong { font-size: 11px; }
  .match-panel.normal-okey .nok-station-top .seat-identity > small,
  .match-panel.normal-okey .nok-station-top .seat-identity .player-score { font-size: 8px; }
  .match-panel.normal-okey .nok-station-top .opponent-rack { height: 13px; }
  .match-panel.normal-okey .nok-station-bottom .player-seat {
    min-height: 0;
    gap: 5px;
    padding: 6px 8px;
  }
  .match-panel.normal-okey .nok-station-bottom .seat-avatar { width: 44px; height: 44px; }
  .match-panel.normal-okey .nok-station-bottom .seat-identity { padding: 6px 8px; }
}

/* Stage17D.4.2: active leave requires an explicit, layout-neutral confirmation. */
.match-panel.normal-okey .normal-okey-forfeit-confirmation {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 140 !important;
  width: min(92vw, 430px);
  box-sizing: border-box;
  margin: 0;
  padding: 22px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(225, 181, 104, .72);
  border-radius: 14px;
  background: rgba(7, 20, 24, .98);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
  color: #fff0c8;
}
.match-panel.normal-okey .normal-okey-forfeit-confirmation[hidden] { display: none !important; }
.match-panel.normal-okey .normal-okey-forfeit-confirmation > p { display: grid; gap: 10px; margin: 12px 0 18px; line-height: 1.5; }
.match-panel.normal-okey .normal-okey-forfeit-warning { color: #ffdc78; font-weight: 800; }
.match-panel.normal-okey .normal-okey-forfeit-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

@media (max-width: 1180px) and (min-width: 901px) {
  .match-panel.normal-okey .nok-table-stage {
    top: 76px;
    right: 260px;
    bottom: 108px;
    left: 10px;
    padding: 20px 48px 8px !important;
  }
  .match-panel.normal-okey .nok-station-left { left: -44px; }
  .match-panel.normal-okey .nok-station-right { right: -44px; }
  .match-panel.normal-okey .nok-own-station { width: min(760px, calc(100% - 8px)) !important; }
}

/* Stage 12: final premium skin. Geometry and state bindings stay owned by
   the preceding layout stages; this layer only adds finish, depth, and focus. */
.match-panel.normal-okey.table-theme-premium {
  background:
    radial-gradient(ellipse at 50% 13%, rgba(105, 215, 183, .14), transparent 34%),
    radial-gradient(circle at 10% 86%, rgba(226, 165, 78, .13), transparent 29%),
    radial-gradient(circle at 92% 24%, rgba(40, 151, 135, .11), transparent 25%),
    linear-gradient(135deg, #041316 0%, #082a2b 47%, #061012 100%) !important;
}
.match-panel.normal-okey.table-theme-premium > .nok-presentation {
  background:
    radial-gradient(ellipse at 50% 36%, rgba(122, 229, 192, .08), transparent 31%),
    radial-gradient(ellipse at 78% 82%, rgba(240, 186, 91, .08), transparent 25%),
    transparent !important;
}
.match-panel.normal-okey.table-theme-premium > .nok-presentation::before {
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 255, 255, .045), transparent 28%),
    radial-gradient(circle at 18% 24%, rgba(117, 218, 186, .07), transparent 19%),
    radial-gradient(circle at 84% 68%, rgba(230, 169, 82, .055), transparent 18%),
    linear-gradient(116deg, transparent 0 34%, rgba(255, 255, 255, .018) 34.1% 34.22%, transparent 34.34% 66%, rgba(255, 255, 255, .014) 66.1% 66.22%, transparent 66.34%);
  opacity: .9;
}
.match-panel.normal-okey .nok-logo-card {
  border-color: rgba(242, 197, 111, .76);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .36), inset 0 1px rgba(255, 249, 219, .2), inset 0 -18px 28px rgba(0, 0, 0, .16);
}
.match-panel.normal-okey .nok-logo-card strong {
  color: #fff4cc;
  letter-spacing: .16em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .4), 0 0 16px rgba(242, 197, 111, .12);
}
.match-panel.normal-okey .nok-logo-card span {
  color: #f2c875;
  font-weight: 800;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .3);
}
.match-panel.normal-okey .nok-top-controls button,
.match-panel.normal-okey .nok-live-actions button,
.match-panel.normal-okey .normal-okey-side-controls button,
.match-panel.normal-okey .nok-action-bar button {
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease, color .16s ease;
}
.match-panel.normal-okey .nok-top-controls button:hover,
.match-panel.normal-okey .nok-live-actions button:hover,
.match-panel.normal-okey .normal-okey-side-controls button:hover,
.match-panel.normal-okey .nok-action-bar button:hover:not(:disabled) {
  border-color: rgba(244, 202, 116, .68);
  color: #fff3ce;
  background: linear-gradient(145deg, rgba(56, 105, 95, .92), rgba(11, 39, 41, .96));
  box-shadow: 0 8px 18px rgba(0, 0, 0, .24), 0 0 0 1px rgba(244, 202, 116, .08);
  transform: translateY(-1px);
}
.match-panel.normal-okey .nok-top-controls button:first-child:hover {
  border-color: #ffe0a0;
  background: linear-gradient(145deg, #805534, #40281b);
}
.match-panel.normal-okey .nok-top-controls button:active,
.match-panel.normal-okey .nok-live-actions button:active,
.match-panel.normal-okey .normal-okey-side-controls button:active,
.match-panel.normal-okey .nok-action-bar button:active:not(:disabled) { transform: translateY(0); }
.match-panel.normal-okey .player-seat {
  border-color: rgba(241, 213, 161, .3) !important;
  background: linear-gradient(145deg, rgba(22, 61, 63, .97), rgba(5, 23, 28, .98)) !important;
  box-shadow: 0 15px 28px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .11), inset 0 -11px 16px rgba(0, 0, 0, .14);
}
.match-panel.normal-okey .player-seat.active {
  border-color: #f6cf7a !important;
  box-shadow: 0 0 0 2px rgba(246, 207, 122, .2), 0 17px 32px rgba(0, 0, 0, .46), 0 0 24px rgba(246, 207, 122, .2) !important;
}
.match-panel.normal-okey .seat-avatar {
  border-color: var(--nok-frame-light);
  outline: 3px solid rgba(242, 197, 111, .13);
  box-shadow: 0 0 0 1px rgba(255, 246, 212, .2), 0 6px 14px rgba(0, 0, 0, .36);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.match-panel.normal-okey .seat-avatar[src] { background: #243c41; }
.match-panel.normal-okey .player-seat:has(.bot-rack) .seat-avatar {
  border-color: rgba(128, 214, 181, .78);
  background: linear-gradient(145deg, #2f6c67, #153e42);
}
.match-panel.normal-okey .seat-identity {
  border-color: rgba(246, 213, 155, .12);
  box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 4px 10px rgba(0, 0, 0, .12);
}
.match-panel.normal-okey .seat-identity strong {
  color: #fff7df;
  font-size: clamp(11px, .78vw, 13px);
  text-shadow: 0 1px 5px rgba(0, 0, 0, .3);
}
.match-panel.normal-okey .seat-identity > small { color: #b7ceca; }
.match-panel.normal-okey .seat-identity .player-score { color: #f4cb7c; }
.match-panel.normal-okey .player-seat:has(.bot-rack) .seat-identity > small:first-of-type { color: #9ed5bd; }
.match-panel.normal-okey .nok-table {
  box-shadow:
    0 0 0 6px rgba(225, 167, 83, .84),
    0 0 0 11px rgba(42, 22, 15, .98),
    0 28px 56px rgba(0, 0, 0, .62),
    inset 0 0 0 2px rgba(255, 239, 184, .3),
    inset 0 -26px 38px rgba(0, 0, 0, .16) !important;
}
.match-panel.normal-okey.table-theme-premium .nok-table {
  background:
    radial-gradient(circle at 50% 35%, rgba(143, 240, 211, .14), transparent 38%),
    repeating-linear-gradient(102deg, rgba(255, 255, 255, .014) 0 1px, transparent 1px 7px),
    radial-gradient(ellipse at 50% 42%, #176f67 0%, #0f5a53 54%, #063634 100%) !important;
}
.match-panel.normal-okey.table-theme-premium .nok-table::before {
  background:
    radial-gradient(circle at 50% 50%, transparent 0 40%, rgba(0, 0, 0, .055) 70%, rgba(0, 0, 0, .17) 100%),
    repeating-linear-gradient(112deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 9px),
    linear-gradient(135deg, rgba(255, 255, 255, .045), transparent 36%, rgba(0, 0, 0, .09));
  box-shadow: inset 0 0 44px rgba(0, 0, 0, .2), 0 0 0 1px rgba(255, 226, 160, .05);
}
.match-panel.normal-okey .nok-center {
  border-color: rgba(244, 207, 133, .28);
  background: linear-gradient(145deg, rgba(6, 43, 42, .54), rgba(4, 24, 28, .48));
  box-shadow: 0 18px 34px rgba(0, 0, 0, .25), inset 0 1px rgba(255, 255, 255, .09), inset 0 -10px 18px rgba(0, 0, 0, .12);
}
.match-panel.normal-okey .nok-pile-box strong { color: #fff0c5; text-shadow: 0 2px 10px rgba(0, 0, 0, .42); }
.match-panel.normal-okey .center-indicator-tile,
.match-panel.normal-okey .unowned-discard,
.match-panel.normal-okey .discard-stack .board-tile {
  box-shadow: 0 9px 17px rgba(0, 0, 0, .34), 0 0 0 1px rgba(255, 240, 198, .08);
}
.match-panel.normal-okey .draw-stack {
  box-shadow: 4px 4px 0 #09292e, 8px 8px 0 #051a20, 0 12px 19px rgba(0, 0, 0, .4), inset 0 1px rgba(255, 255, 255, .18);
}
.match-panel.normal-okey .normal-okey-rack-zone {
  background:
    linear-gradient(180deg, rgba(255, 220, 147, .22), transparent 17%),
    linear-gradient(145deg, #aa6b3d, #673d25 62%, #38261c) !important;
  box-shadow:
    0 23px 38px rgba(0, 0, 0, .52),
    0 0 0 4px rgba(225, 181, 104, .46),
    inset 0 2px rgba(255, 239, 183, .4),
    inset 0 -14px 19px rgba(52, 27, 13, .38) !important;
}
.match-panel.normal-okey .normal-okey-rack-zone::before {
  box-shadow: inset 0 2px rgba(255, 247, 211, .08), 0 3px 8px rgba(44, 21, 11, .16);
}
.match-panel.normal-okey #handTiles .tile {
  box-shadow: 0 4px 6px rgba(0, 0, 0, .3), inset 0 1px rgba(255, 255, 255, .5);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.match-panel.normal-okey #handTiles .tile:hover:not(:disabled) {
  filter: brightness(1.035) saturate(1.03);
  box-shadow: 0 8px 12px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .6);
}
.match-panel.normal-okey #handTiles .tile.selected {
  box-shadow: 0 0 0 2px #ffe09c, 0 8px 12px rgba(0, 0, 0, .4), 0 0 14px rgba(255, 224, 156, .2);
}
.match-panel.normal-okey .nok-right-column {
  border-color: rgba(225, 181, 104, .23);
  background: linear-gradient(180deg, rgba(8, 35, 37, .87), rgba(4, 18, 23, .93));
  box-shadow: 0 22px 42px rgba(0, 0, 0, .32), inset 0 1px rgba(255, 255, 255, .08), inset 0 -20px 28px rgba(0, 0, 0, .11);
}
.match-panel.normal-okey .nok-chat-panel,
.match-panel.normal-okey .nok-treat-panel,
.match-panel.normal-okey .nok-radio-panel {
  border-color: rgba(167, 224, 205, .2);
  background: linear-gradient(145deg, rgba(22, 62, 62, .86), rgba(7, 25, 30, .94));
  box-shadow: 0 16px 30px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .085);
}
.match-panel.normal-okey .chat-line {
  border-color: rgba(167, 224, 205, .09);
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(34, 86, 80, .2), rgba(6, 27, 32, .2));
}
.match-panel.normal-okey .chat-line strong { color: #f4cb7c; }
.match-panel.normal-okey .chat-line .chat-avatar {
  border-color: rgba(242, 197, 111, .65);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
}
.match-panel.normal-okey .nok-chat-tabs span {
  border-color: rgba(242, 197, 111, .24);
  color: #c5efd9;
  background: rgba(64, 180, 148, .13);
}
.match-panel.normal-okey .chat-form input {
  border-color: rgba(166, 221, 204, .25);
  background: rgba(2, 20, 25, .62);
  box-shadow: inset 0 1px rgba(255, 255, 255, .05);
}
.match-panel.normal-okey .nok-treat-options button {
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.match-panel.normal-okey .nok-treat-options button:hover:not(:disabled) {
  border-color: rgba(242, 197, 111, .58);
  background: rgba(92, 144, 117, .2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  transform: translateY(-1px);
}
.match-panel.normal-okey .nok-radio-icon { text-shadow: 0 0 14px rgba(242, 197, 111, .42); }
.match-panel.normal-okey .nok-statusbar .turn-timer {
  color: #ffe4a6;
  border-color: rgba(242, 197, 111, .24);
  background: rgba(144, 98, 45, .18);
  box-shadow: inset 0 1px rgba(255, 255, 255, .08);
}
.match-panel.normal-okey .nok-statusbar .turn-timer.urgent {
  color: #ffb28d;
  border-color: rgba(255, 128, 91, .48);
  background: rgba(157, 56, 42, .24);
  box-shadow: 0 0 12px rgba(255, 112, 80, .16), inset 0 1px rgba(255, 196, 162, .1);
}
.match-panel.normal-okey button:focus-visible,
.match-panel.normal-okey .nok-action-bar button:focus-visible,
.match-panel.normal-okey select:focus-visible,
.match-panel.normal-okey input:focus-visible {
  outline: 2px solid #f5ce7b;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(245, 206, 123, .16);
}
.match-panel.normal-okey button:disabled { cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) {
  .match-panel.normal-okey *,
  .match-panel.normal-okey *::before,
  .match-panel.normal-okey *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* STAGE2B2_OPERATOR_WINDOW=YES
   The existing settings form is parked outside the Classic grid and mounted
   inside the shared modal only when it is requested. */
.match-panel.normal-okey #normalOkeySettingsMount #normalOkeySettingsPanel[hidden],
.match-panel.normal-okey #normalOkeyOperatorStartMount[hidden] {
  display: none !important;
  visibility: hidden !important;
}

.match-panel.normal-okey #normalOkeyBottomMenuContent #normalOkeySettingsPanel {
  display: block !important;
  visibility: visible !important;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.match-panel.normal-okey .normal-okey-operator-action-primary {
  display: flex;
  margin-bottom: 2px;
}

.match-panel.normal-okey .normal-okey-operator-action-primary #startTableButton {
  width: 100%;
  min-height: 42px;
  letter-spacing: .06em;
}

.match-panel.normal-okey .normal-okey-operator-start-mount {
  display: none !important;
}

/* STAGE2B2A_OPERATOR_COMPACT=YES: operator windows use content-sized
   Classic desktop proportions instead of the generic wide modal. */
.match-panel.normal-okey .normal-okey-bottom-menu-panel[data-menu-key="operator"] {
  width: min(600px, calc(100vw - 48px));
}

.match-panel.normal-okey .normal-okey-bottom-menu-panel[data-menu-key="operator-invites"] {
  width: min(400px, calc(100vw - 48px));
}

.match-panel.normal-okey .normal-okey-bottom-menu-panel[data-menu-key="operator-settings"] {
  /* STAGE2B2B_GAME_SETTINGS_COMPACT=YES */
  width: min(400px, calc(100vw - 48px));
}

.match-panel.normal-okey .normal-okey-bottom-menu-panel[data-menu-key="operator-kick"] {
  width: min(600px, calc(100vw - 48px));
}

/* STAGE2B2D_SOUND_COMPACT=YES */
.match-panel.normal-okey .normal-okey-bottom-menu-panel[data-menu-key="sound"] {
  width: min(460px, calc(100vw - 24px));
}

/* STAGE18_MENU_2B1: navigation and modal windows stay in presentation layers.
   They must not become grid items or alter the locked Classic table grid. */
.match-panel.normal-okey .normal-okey-bottom-menu[hidden],
.match-panel.normal-okey .normal-okey-bottom-menu-backdrop[hidden],
.match-panel.normal-okey .normal-okey-bottom-menu-panel[hidden] {
  display: none !important;
}

.match-panel.normal-okey .normal-okey-bottom-menu-backdrop {
  position: fixed !important;
  inset: 0;
  z-index: 92;
  background: rgba(3, 12, 12, .48);
  pointer-events: auto;
}

.match-panel.normal-okey .normal-okey-bottom-menu {
  position: absolute !important;
  left: clamp(14px, 2.4vw, 34px);
  right: clamp(14px, 2.4vw, 34px);
  bottom: clamp(18px, 2.6vh, 28px);
  z-index: 96;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3.4vw, 54px);
  min-width: 0;
  max-width: calc(100% - 28px);
  padding: 6px 10px;
  border: 1px solid rgba(242, 179, 95, .30);
  border-radius: 10px;
  background: rgba(12, 25, 26, .94);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .24), inset 0 1px rgba(255, 255, 255, .05);
  pointer-events: none;
}

.match-panel.normal-okey .normal-okey-bottom-menu-group {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  pointer-events: auto;
}

.match-panel.normal-okey .normal-okey-bottom-menu-button {
  min-width: 0;
  max-width: 18ch;
  min-height: 32px;
  padding: 7px 11px;
  border: 1px solid rgba(242, 179, 95, .34);
  border-radius: 7px;
  background: rgba(17, 27, 29, .94);
  color: #f5e7d1;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-panel.normal-okey .normal-okey-bottom-menu-button:hover:not(:disabled),
.match-panel.normal-okey .normal-okey-bottom-menu-button:focus-visible {
  border-color: rgba(242, 179, 95, .82);
  background: rgba(65, 53, 38, .96);
  color: #fff8ed;
}

.match-panel.normal-okey .normal-okey-bottom-menu-button.is-preparing,
.match-panel.normal-okey .normal-okey-bottom-menu-button:disabled {
  cursor: not-allowed;
  opacity: .52;
}

.match-panel.normal-okey .normal-okey-bottom-menu-panel {
  position: fixed !important;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  z-index: 95;
  width: min(780px, calc(100vw - 48px));
  max-height: min(78dvh, 720px);
  min-width: 0;
  overflow: auto;
  padding: 16px;
  border: 1px solid rgba(242, 179, 95, .36);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(16, 40, 38, .99), rgba(9, 24, 27, .99));
  box-shadow: 0 20px 54px rgba(0, 0, 0, .48), inset 0 1px rgba(255, 255, 255, .06);
}

.match-panel.normal-okey .normal-okey-bottom-menu-panel[data-menu-key="games"] { width: min(620px, calc(100vw - 48px)); }
.match-panel.normal-okey .normal-okey-bottom-menu-panel[data-menu-key="lobbies"] { width: min(900px, calc(100vw - 48px)); }
.match-panel.normal-okey .normal-okey-bottom-menu-panel[data-menu-key="operations"] { width: min(820px, calc(100vw - 48px)); }
.match-panel.normal-okey .normal-okey-bottom-menu-panel[data-menu-key="private"],
.match-panel.normal-okey .normal-okey-bottom-menu-panel[data-menu-key="private-table"] { width: min(560px, calc(100vw - 48px)); }
.match-panel.normal-okey .normal-okey-bottom-menu-panel[data-menu-key="messages"] { width: min(460px, calc(100vw - 24px)); }
.match-panel.normal-okey .normal-okey-bottom-menu-panel[data-menu-key="invites"] { width: min(760px, calc(100vw - 48px)); }
.match-panel.normal-okey .normal-okey-bottom-menu-panel[data-menu-key="help"] { width: min(820px, calc(100vw - 48px)); }

.match-panel.normal-okey .normal-okey-bottom-menu-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.match-panel.normal-okey .normal-okey-bottom-menu-panel-heading h2 {
  margin: 0;
  color: #f8e5c6;
  font-size: 13px;
  letter-spacing: .06em;
}

.match-panel.normal-okey .normal-okey-bottom-menu-panel-heading button {
  min-width: 30px;
  min-height: 28px;
  padding: 2px 8px;
}

.match-panel.normal-okey .normal-okey-bottom-menu-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 8px;
}

.match-panel.normal-okey .normal-okey-bottom-menu-item {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 7px;
  background: rgba(255, 255, 255, .045);
  color: #e9eeee;
  text-align: left;
}

.match-panel.normal-okey .normal-okey-bottom-menu-item:not(:disabled):hover,
.match-panel.normal-okey .normal-okey-bottom-menu-item:not(:disabled):focus-visible {
  border-color: rgba(242, 179, 95, .72);
  background: rgba(242, 179, 95, .12);
}

.match-panel.normal-okey .normal-okey-bottom-menu-item:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.match-panel.normal-okey .normal-okey-bottom-menu-item-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}

.match-panel.normal-okey .normal-okey-bottom-menu-item-meta {
  flex: 0 1 auto;
  min-width: 0;
  color: #aebbbc;
  font-size: 10px;
  overflow-wrap: anywhere;
  text-align: right;
  white-space: normal;
}

.match-panel.normal-okey .normal-okey-bottom-menu-empty {
  margin: 4px 0;
  color: #aebbbc;
  font-size: 12px;
}

.match-panel.normal-okey .normal-okey-modal-form {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.match-panel.normal-okey .normal-okey-modal-form input[type="text"],
.match-panel.normal-okey .normal-okey-modal-form input:not([type]),
.match-panel.normal-okey .normal-okey-modal-form select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid rgba(242, 179, 95, .28);
  border-radius: 6px;
  background: rgba(0, 0, 0, .22);
  color: #f5e7d1;
}

.match-panel.normal-okey .normal-okey-modal-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 7px;
  color: #e9eeee;
  font-size: 12px;
  font-weight: 700;
}

.match-panel.normal-okey .normal-okey-modal-toggle-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.match-panel.normal-okey .normal-okey-modal-switch-input {
  appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 42px;
  height: 24px;
  margin: 0;
  border: 1px solid rgba(242, 179, 95, .52);
  border-radius: 999px;
  background: rgba(78, 92, 92, .82);
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}

.match-panel.normal-okey .normal-okey-modal-switch-input::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #e7eee9;
  content: "";
  transition: transform .16s ease;
}

.match-panel.normal-okey .normal-okey-modal-switch-input:checked {
  border-color: rgba(242, 179, 95, .88);
  background: #98703b;
}

.match-panel.normal-okey .normal-okey-modal-switch-input:checked::after {
  transform: translateX(18px);
}

.match-panel.normal-okey .normal-okey-modal-switch-input:focus-visible {
  outline: 2px solid #f5cf81;
  outline-offset: 2px;
}

.match-panel.normal-okey .normal-okey-modal-toggle-state {
  flex: 0 0 auto;
  min-width: 44px;
  color: #f5cf81;
  font-size: 10px;
  letter-spacing: .05em;
  text-align: right;
}

.match-panel.normal-okey .normal-okey-modal-toggle-label {
  flex: 1 1 auto;
}

.match-panel.normal-okey .normal-okey-modal-switch-input:disabled {
  cursor: not-allowed;
  opacity: .48;
}

.match-panel.normal-okey .normal-okey-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 2px;
}

.match-panel.normal-okey .normal-okey-modal-actions button {
  min-width: 92px;
  margin: 0;
}

.match-panel.normal-okey .normal-okey-sound-form,
.match-panel.normal-okey .normal-okey-message-form {
  gap: 8px;
}

.match-panel.normal-okey .normal-okey-modal-toggle.is-off .normal-okey-modal-toggle-state {
  color: #aebbbc;
}

.match-panel.normal-okey .normal-okey-modal-status {
  min-height: 1.2em;
  margin: 0;
  color: #f5cf81;
  font-size: 11px;
}

.match-panel.normal-okey .normal-okey-invitation-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.match-panel.normal-okey .normal-okey-invitation-item {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 7px;
  background: rgba(255, 255, 255, .045);
  color: #e9eeee;
}

.match-panel.normal-okey .normal-okey-invitation-item strong,
.match-panel.normal-okey .normal-okey-invitation-item small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.match-panel.normal-okey .normal-okey-invitation-item small {
  color: #aebbbc;
}

.match-panel.normal-okey .normal-okey-invitation-item button {
  justify-self: start;
}

.match-panel.normal-okey .normal-okey-operator-invite-heading {
  display: block;
  margin: 2px 0 8px;
  color: #f8e5c6;
  font-size: 11px;
  letter-spacing: .05em;
}

.match-panel.normal-okey .normal-okey-operator-invite-list {
  display: grid;
  gap: 6px;
  max-height: min(42dvh, 320px);
  min-width: 0;
  overflow-y: auto;
  padding: 2px;
}

.match-panel.normal-okey .normal-okey-operator-invite-member {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 7px;
  background: rgba(255, 255, 255, .045);
  color: #e9eeee;
  overflow-wrap: anywhere;
  text-align: left;
  white-space: normal;
}

.match-panel.normal-okey .normal-okey-operator-invite-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.match-panel.normal-okey .normal-okey-operator-invite-cooldown {
  flex: 0 0 auto;
  margin-left: auto;
  color: #f2d18e;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.match-panel.normal-okey .normal-okey-operator-invite-member.is-cooldown {
  cursor: not-allowed;
  opacity: .68;
}

.normal-okey-invite-avatar,
.invitation-notification-avatar .chat-avatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-grid;
  place-items: center;
  background: rgba(242, 179, 95, .14);
  color: #f8e5c6;
  font-size: 18px;
}

.invitation-notification-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(3, 14, 15, .72);
}

.invitation-notification-modal[hidden] { display: none !important; }

.invitation-notification-card {
  width: min(420px, calc(100vw - 40px));
  max-height: min(78dvh, 520px);
  overflow: auto;
  padding: 18px;
  border: 1px solid rgba(242, 179, 95, .5);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(16, 40, 38, .99), rgba(9, 24, 27, .99));
  box-shadow: 0 20px 54px rgba(0, 0, 0, .52), inset 0 1px rgba(255, 255, 255, .06);
  color: #e9eeee;
}

.invitation-notification-heading { margin-bottom: 14px; }
.invitation-notification-heading h2 { margin: 0; color: #f8e5c6; }
.invitation-notification-inviter { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.invitation-notification-avatar .chat-avatar { width: 56px; height: 56px; font-size: 25px; }
.invitation-notification-card > p { margin: 8px 0; line-height: 1.45; }
.invitation-notification-countdown { color: #f2d18e; font-weight: 800; }
.invitation-notification-actions { display: flex; gap: 8px; margin-top: 16px; }
.invitation-notification-actions button { flex: 1 1 0; min-width: 0; }

.match-panel.normal-okey .normal-okey-operator-invite-member:hover,
.match-panel.normal-okey .normal-okey-operator-invite-member:focus-visible,
.match-panel.normal-okey .normal-okey-operator-invite-member.is-selected {
  border-color: rgba(242, 179, 95, .78);
  background: rgba(242, 179, 95, .16);
  color: #fff8ed;
}

.match-panel.normal-okey .normal-okey-bottom-menu-content article {
  min-width: 0;
  padding: 4px 2px;
}

.match-panel.normal-okey .normal-okey-bottom-menu-content article h3 {
  margin: 0 0 4px;
  color: #f8e5c6;
  font-size: 12px;
}

.match-panel.normal-okey .normal-okey-bottom-menu-content article p {
  margin: 0;
  color: #c8d1d1;
  font-size: 11px;
  line-height: 1.45;
}

@media (min-width: 901px) {
  /* The social column occupies the right edge; bias the fixed window toward
     the playable table without changing the locked grid geometry. */
  .match-panel.normal-okey .normal-okey-bottom-menu-panel {
    left: calc(50% - clamp(0px, 4vw, 72px));
  }
}

@media (max-width: 900px) {
  .match-panel.normal-okey .normal-okey-bottom-menu {
    align-items: stretch;
    bottom: 16px;
    gap: 8px;
  }

  .match-panel.normal-okey .normal-okey-bottom-menu-group {
    flex: 1 1 48%;
  }

  .match-panel.normal-okey .normal-okey-bottom-menu-button {
    flex: 1 1 auto;
    max-width: none;
    padding-inline: 8px;
  }

  .match-panel.normal-okey .normal-okey-bottom-menu-panel {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: min(760px, calc(100vw - 32px));
    max-height: min(74dvh, 620px);
    transform: translate(-50%, -50%);
  }
}

@media (max-width: 560px) {
  .match-panel.normal-okey .normal-okey-bottom-menu {
    inset-inline: 8px;
    flex-wrap: wrap;
    max-width: calc(100% - 16px);
  }

  .match-panel.normal-okey .normal-okey-bottom-menu-group {
    flex-basis: 100%;
  }

  .match-panel.normal-okey .normal-okey-bottom-menu-right {
    justify-content: flex-end;
  }

  .match-panel.normal-okey .normal-okey-bottom-menu-panel {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: calc(100vw - 20px);
    max-height: 78dvh;
    transform: translate(-50%, -50%);
  }
}

/* STAGE18B_SERIES_SCORE_UI=YES
   The table/series score is a compact server-state line below the existing
   profile score.  It does not change the Classic seat-card geometry. */
.match-panel.normal-okey .seat-identity .series-score {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: #f5cf81;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-panel.normal-okey .seat-identity .series-score.eliminated {
  color: #ff9b90;
  text-transform: uppercase;
}

/* Stage 25: final Classic vertical cluster alignment.  The reference order
   is branding, bottom player, human rack, then live actions.  Keep these
   presentation boxes separate so the live tile and button contracts remain
   untouched. */
@media (min-width: 901px) {
  .match-panel.normal-okey.table-theme-classic > .nok-presentation {
    --classic-cluster-rack-top: 78.26%;
    --classic-cluster-player-height: clamp(82px, 8.01vh, 90px);
    --classic-cluster-player-gap: clamp(10px, 1.17vh, 14px);
    --classic-cluster-action-gap: clamp(2px, .39vh, 4px);
  }

  .match-panel.normal-okey.table-theme-classic .nok-own-station {
    top: var(--classic-cluster-rack-top) !important;
    right: auto !important;
    bottom: auto !important;
    height: var(--classic-rack-height) !important;
    min-height: var(--classic-rack-height) !important;
    overflow: visible !important;
  }

  /* The own seat has no opponent rack; the late generic opponent-rack rule
     must not inflate or cover the real bottom player card. */
  .match-panel.normal-okey.table-theme-classic .nok-station-bottom .opponent-rack {
    display: none !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-station-bottom {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: calc(var(--classic-cluster-rack-top) - var(--classic-cluster-player-height) - var(--classic-cluster-player-gap)) !important;
    bottom: auto !important;
    width: clamp(190px, 15.23vw, 234px) !important;
    height: var(--classic-cluster-player-height) !important;
    min-height: var(--classic-cluster-player-height) !important;
    transform: translateX(-50%) !important;
    overflow: visible !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-station-bottom .player-seat {
    position: absolute !important;
    inset: 0 auto auto 50% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(6px, .52vw, 8px) !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    padding: 5px 8px !important;
    transform: translateX(-50%) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-station-bottom .seat-avatar {
    flex: 0 0 auto !important;
    width: clamp(58px, 5.2vw, 72px) !important;
    height: clamp(58px, 5.2vw, 72px) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-station-bottom .seat-identity {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 5px 8px !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions {
    top: calc(var(--classic-cluster-rack-top) + var(--classic-rack-height) + var(--classic-cluster-action-gap)) !important;
    right: auto !important;
    bottom: auto !important;
    left: var(--classic-action-local-left) !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: clamp(5px, .46vw, 7px) !important;
    height: var(--classic-action-height) !important;
    min-height: var(--classic-action-height) !important;
    box-sizing: border-box !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-center-brand {
    top: 0 !important;
    left: 50% !important;
    visibility: visible !important;
    opacity: .84 !important;
    z-index: 6 !important;
    pointer-events: none !important;
  }
}

/* Stage 13: final station micro-offsets only. Keep the board and rack
   geometry unchanged while separating the top/bottom player cards. */
@media (min-width: 901px) {
  .match-panel.normal-okey .nok-station-top { top: -88px; }
  .match-panel.normal-okey .nok-station-bottom { bottom: 82px; }
}

/* Functional layout contract: keep the live Okey controls in normal flow
   after the rack. This is deliberately scoped to Normal Okey and does not
   change tile rules, action wiring, or the shared table features. */
@media (min-width: 901px) {
  .match-panel.normal-okey .nok-table-stage {
    top: 78px !important;
    right: calc(clamp(220px, 20vw, 250px) + 22px) !important;
    bottom: 78px !important;
    left: 12px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    box-sizing: border-box;
    padding: 22px 56px 8px !important;
  }

  .match-panel.normal-okey .nok-table {
    flex: 0 0 auto !important;
    width: min(100%, 1100px, calc((100dvh - 368px) * 1.7)) !important;
    height: auto !important;
    aspect-ratio: 1.7 / 1;
  }

  .match-panel.normal-okey .nok-own-station {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: min(760px, 100%) !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
  }

  .match-panel.normal-okey .normal-okey-rack-zone {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 132px !important;
    width: 100% !important;
    height: 132px !important;
    min-height: 132px !important;
    box-sizing: border-box;
  }

  .match-panel.normal-okey #handTiles {
    height: 100% !important;
    min-height: 0 !important;
  }

  .match-panel.normal-okey .nok-live-actions {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    height: 36px;
    flex: 0 0 36px;
  }

  .match-panel.normal-okey .nok-live-actions button {
    min-width: 0;
    min-height: 36px;
    padding: 5px 6px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .match-panel.normal-okey .nok-station-bottom {
    bottom: 8px !important;
  }

  .match-panel.normal-okey .nok-action-bar {
    right: clamp(12px, 2.5vw, 42px) !important;
    bottom: 10px !important;
    left: clamp(12px, 2.5vw, 42px) !important;
    height: 48px !important;
  }
}

/* Functional rack fix: preserve client-only group gaps and restore the
   existing right-click tile back face after the Normal Okey tile overrides. */
.match-panel.normal-okey #handTiles .rack-slot.rack-group-gap {
  background: linear-gradient(90deg, rgba(255, 224, 156, .22), transparent 45%) !important;
}
.match-panel.normal-okey #handTiles .tile.flipped {
  position: relative;
  transform: rotate(180deg);
  color: transparent !important;
  font-size: 0 !important;
  background: linear-gradient(145deg, #fffdf4 0, #eadfc8 52%, #cdbb99 100%) !important;
  border: 1px solid #efe3c9 !important;
  box-shadow: inset 2px 2px 3px rgba(255,255,255,.9), inset -3px -3px 5px rgba(99,76,45,.22), 0 4px 10px rgba(0,0,0,.22) !important;
}
.match-panel.normal-okey #handTiles .tile.flipped > img {
  visibility: hidden !important;
}
.match-panel.normal-okey #handTiles .tile.flipped::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 5px;
  border: 2px solid rgba(155,126,80,.28);
  border-radius: 5px;
  background: radial-gradient(ellipse at 35% 28%, rgba(255,255,255,.85), transparent 38%), linear-gradient(145deg, rgba(255,255,255,.32), rgba(157,126,80,.12));
  background-image: radial-gradient(ellipse at 35% 28%, rgba(255,255,255,.85), transparent 38%), var(--vip-tile-back-image, none);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: auto, 68% 68%;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.28);
  transform: rotate(180deg);
  pointer-events: none;
}
.match-panel.normal-okey #handTiles .tile.flipped.selected {
  transform: translateY(-6px) rotate(180deg);
}

/* Test-only action pipeline diagnostics. It never participates in gameplay. */
.normal-okey-diagnostic.hidden { display: none !important; }
.normal-okey-diagnostic {
  position: fixed;
  right: 12px;
  bottom: 72px;
  z-index: 10000;
  width: min(320px, calc(100vw - 24px));
  max-height: min(44vh, 390px);
  overflow: auto;
  padding: 10px 12px;
  border: 1px solid rgba(231,184,92,.72);
  border-radius: 8px;
  background: rgba(7, 13, 19, .96);
  color: #f0f2f7;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  font: 11px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace;
  pointer-events: none;
}
.normal-okey-diagnostic > strong {
  display: block;
  margin-bottom: 7px;
  color: #fbb656;
  letter-spacing: .08em;
}
.normal-okey-diagnostic dl { display: grid; gap: 3px; margin: 0; }
.normal-okey-diagnostic dl > div { display: grid; grid-template-columns: 1fr minmax(0, 1.35fr); gap: 8px; }
.normal-okey-diagnostic dt { color: #9fb3c7; }
.normal-okey-diagnostic dd { min-width: 0; margin: 0; overflow-wrap: anywhere; color: #f0f2f7; }
@media (max-width: 620px) {
  .normal-okey-diagnostic { right: 8px; bottom: 66px; width: min(300px, calc(100vw - 16px)); max-height: 38vh; }
}

/* Smart Assist gets its own flow area after the table/rack scene.  It is
   intentionally independent from live controls and the fixed action bar so
   long strong suggestions can grow without covering playable elements. */
.match-panel.normal-okey .okey-smart-assist-panel {
  position: relative !important;
  z-index: 28 !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 6px 10px;
  flex: 0 0 auto;
  width: min(760px, calc(100% - 24px));
  max-width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 8px 12px;
  border: 1px solid rgba(242, 197, 111, .38);
  border-radius: 9px;
  color: #f7e5bd;
  background: linear-gradient(145deg, rgba(17, 51, 52, .96), rgba(6, 24, 29, .96));
  box-shadow: 0 9px 20px rgba(0, 0, 0, .24), inset 0 1px rgba(255, 245, 210, .1);
  overflow: visible;
}
.match-panel.normal-okey .okey-smart-assist-panel:has(#okeySmartAssistMessage:empty) { display: none !important; }
.match-panel.normal-okey .okey-smart-assist-panel-label {
  padding: 3px 6px;
  border: 1px solid rgba(242, 197, 111, .32);
  border-radius: 999px;
  color: #f6cf7b;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1.2;
  white-space: nowrap;
}
.match-panel.normal-okey .okey-smart-assist-message {
  min-width: 0;
  min-height: 0;
  margin: 0;
  color: #fff2d1;
  font-size: clamp(10px, .75vw, 12px);
  font-weight: 650;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  word-break: normal;
}
@media (max-width: 900px) {
  .match-panel.normal-okey .okey-smart-assist-panel {
    width: min(700px, calc(100% - 16px));
    padding: 8px 10px;
  }
}
@media (max-width: 560px) {
  .match-panel.normal-okey .okey-smart-assist-panel {
    grid-template-columns: 1fr;
    gap: 4px;
    width: calc(100% - 8px);
    padding: 7px 9px;
  }
  .match-panel.normal-okey .okey-smart-assist-panel-label { justify-self: start; }
}

/* Stage 14: final Normal Okey theme tokens.  The existing panel-class theme
   system is the source of truth for the five selectable themes.  This layer
   is deliberately paint-only: it does not declare layout, sizing, hitboxes,
   rack geometry, or interaction behavior. */
.match-panel.normal-okey {
  --table-surface: #1a6b55;
  --table-surface-deep: #0a3b31;
  --table-surface-highlight: #3d9973;
  --table-border: #704622;
  --table-inner-border: rgba(255, 228, 170, .28);
  --presentation-bg: radial-gradient(circle at 50% 34%, rgba(63, 153, 115, .2), transparent 34%), linear-gradient(135deg, #0b1916, #193c31 52%, #08110f);
  --rack-bg: linear-gradient(180deg, #b77a42, #70401f 62%, #3f2416);
  --rack-border: #c88949;
  --panel-bg: linear-gradient(145deg, rgba(27, 58, 48, .96), rgba(9, 26, 22, .98));
  --panel-bg-solid: #10261f;
  --panel-border: rgba(211, 157, 81, .48);
  --status-bg: rgba(8, 28, 23, .82);
  --control-bg: linear-gradient(145deg, rgba(43, 91, 72, .9), rgba(13, 39, 31, .96));
  --control-hover: linear-gradient(145deg, rgba(68, 128, 98, .96), rgba(20, 59, 45, .98));
  --control-border: rgba(237, 190, 103, .54);
  --text-main: #fff6df;
  --text-muted: #c0cfbf;
  --accent: #f2c570;
  --accent-strong: #ffdc91;
  --tile-face: #fffdf5;
  --tile-ink: #17221f;
  --tile-border: #d7c8a7;
  --tile-shadow: 0 5px 10px rgba(0, 0, 0, .34);
  --fake-okey-accent: #ee5260;
  --avatar-frame: #f2c570;
  --avatar-halo: rgba(242, 197, 112, .2);
  --deck-top: #315f67;
  --deck-bottom: #143c42;
}

.match-panel.normal-okey.table-theme-classic {
  --table-surface: #1a6b55;
  --table-surface-deep: #0a3b31;
  --table-surface-highlight: #3d9973;
  --table-border: #704622;
  --presentation-bg: radial-gradient(circle at 50% 34%, rgba(63, 153, 115, .2), transparent 34%), linear-gradient(135deg, #0b1916, #193c31 52%, #08110f);
  --rack-bg: linear-gradient(180deg, #b77a42, #70401f 62%, #3f2416);
  --rack-border: #c88949;
  --panel-bg: linear-gradient(145deg, rgba(27, 58, 48, .96), rgba(9, 26, 22, .98));
  --panel-bg-solid: #10261f;
  --accent: #f2c570;
  --avatar-frame: #f2c570;
  --deck-top: #315f67;
  --deck-bottom: #143c42;
}

.match-panel.normal-okey.table-theme-modern {
  --table-surface: #1c566b;
  --table-surface-deep: #081d2d;
  --table-surface-highlight: #3f8b9a;
  --table-border: #6fc3ce;
  --table-inner-border: rgba(196, 249, 255, .3);
  --presentation-bg: radial-gradient(circle at 52% 24%, rgba(89, 185, 205, .2), transparent 31%), linear-gradient(135deg, #07131e, #112d3e 52%, #050a11);
  --rack-bg: linear-gradient(180deg, #5c8290, #2b4e60 62%, #182e3e);
  --rack-border: #75cbd4;
  --panel-bg: linear-gradient(145deg, rgba(22, 53, 68, .78), rgba(7, 22, 35, .94));
  --panel-bg-solid: #0e2433;
  --panel-border: rgba(117, 211, 222, .5);
  --status-bg: rgba(4, 18, 30, .78);
  --control-bg: linear-gradient(145deg, rgba(31, 75, 94, .88), rgba(7, 28, 45, .94));
  --control-hover: linear-gradient(145deg, rgba(51, 119, 137, .94), rgba(11, 49, 68, .98));
  --control-border: rgba(124, 226, 231, .58);
  --text-main: #eefcff;
  --text-muted: #b8d2d8;
  --accent: #7be6de;
  --accent-strong: #b5fff5;
  --tile-border: #c9e1e6;
  --tile-shadow: 0 5px 12px rgba(0, 0, 0, .4), 0 0 8px rgba(94, 213, 229, .12);
  --avatar-frame: #7be6de;
  --avatar-halo: rgba(123, 230, 222, .22);
  --deck-top: #28627e;
  --deck-bottom: #0b2b43;
}

.match-panel.normal-okey.table-theme-premium {
  --table-surface: #3b2545;
  --table-surface-deep: #120d1b;
  --table-surface-highlight: #73536e;
  --table-border: #b98a4a;
  --table-inner-border: rgba(255, 222, 152, .3);
  --presentation-bg: radial-gradient(circle at 50% 22%, rgba(189, 140, 67, .17), transparent 30%), linear-gradient(135deg, #0b0b12, #251a2b 54%, #07070b);
  --rack-bg: linear-gradient(180deg, #8c6845, #513829 62%, #241a19);
  --rack-border: #d0a15b;
  --panel-bg: linear-gradient(145deg, rgba(50, 35, 57, .96), rgba(15, 12, 22, .98));
  --panel-bg-solid: #1c1424;
  --panel-border: rgba(218, 176, 101, .54);
  --status-bg: rgba(13, 9, 20, .84);
  --control-bg: linear-gradient(145deg, rgba(75, 52, 70, .92), rgba(25, 17, 32, .98));
  --control-hover: linear-gradient(145deg, rgba(123, 86, 93, .95), rgba(50, 29, 40, .98));
  --control-border: rgba(231, 190, 107, .62);
  --text-main: #fff7e7;
  --text-muted: #c8b9c8;
  --accent: #edc675;
  --accent-strong: #ffe4a3;
  --tile-border: #e2d3b1;
  --tile-shadow: 0 5px 12px rgba(0, 0, 0, .48), 0 0 10px rgba(223, 176, 90, .12);
  --avatar-frame: #e4b768;
  --avatar-halo: rgba(228, 183, 104, .24);
  --deck-top: #684a65;
  --deck-bottom: #2d1c3a;
}

.match-panel.normal-okey.table-theme-nature {
  --table-surface: #3f6b46;
  --table-surface-deep: #142f24;
  --table-surface-highlight: #73935c;
  --table-border: #756039;
  --table-inner-border: rgba(226, 211, 161, .28);
  --presentation-bg: radial-gradient(circle at 48% 24%, rgba(124, 157, 94, .2), transparent 32%), linear-gradient(135deg, #0c1913, #274636 52%, #0a100d);
  --rack-bg: linear-gradient(180deg, #a47748, #6d492b 62%, #36291b);
  --rack-border: #c69a5e;
  --panel-bg: linear-gradient(145deg, rgba(43, 75, 54, .96), rgba(12, 31, 22, .98));
  --panel-bg-solid: #193322;
  --panel-border: rgba(196, 157, 91, .5);
  --status-bg: rgba(11, 30, 20, .82);
  --control-bg: linear-gradient(145deg, rgba(61, 103, 71, .9), rgba(18, 46, 30, .97));
  --control-hover: linear-gradient(145deg, rgba(92, 139, 87, .95), rgba(31, 72, 42, .98));
  --control-border: rgba(211, 179, 111, .56);
  --text-main: #fff7df;
  --text-muted: #c3d0b5;
  --accent: #e1c47c;
  --accent-strong: #f6dda0;
  --tile-border: #dacba8;
  --tile-shadow: 0 5px 10px rgba(0, 0, 0, .36);
  --avatar-frame: #d7b76e;
  --avatar-halo: rgba(215, 183, 110, .2);
  --deck-top: #4e704d;
  --deck-bottom: #203e2d;
}

.match-panel.normal-okey.table-theme-black {
  --table-surface: #2f3a41;
  --table-surface-deep: #090d11;
  --table-surface-highlight: #53636c;
  --table-border: #9eacb2;
  --table-inner-border: rgba(232, 241, 242, .3);
  --presentation-bg: radial-gradient(circle at 50% 24%, rgba(148, 174, 185, .14), transparent 31%), linear-gradient(135deg, #05070a, #151d23 52%, #030405);
  --rack-bg: linear-gradient(180deg, #424b51, #252d33 62%, #101519);
  --rack-border: #aab7bb;
  --panel-bg: linear-gradient(145deg, rgba(35, 45, 52, .98), rgba(9, 13, 17, .99));
  --panel-bg-solid: #12191f;
  --panel-border: rgba(180, 198, 204, .48);
  --status-bg: rgba(4, 7, 10, .88);
  --control-bg: linear-gradient(145deg, rgba(53, 64, 72, .96), rgba(14, 19, 24, .99));
  --control-hover: linear-gradient(145deg, rgba(79, 96, 105, .98), rgba(23, 31, 38, .99));
  --control-border: rgba(216, 229, 231, .56);
  --text-main: #f7fbfc;
  --text-muted: #c3cdd1;
  --accent: #f1d27a;
  --accent-strong: #ffe6a0;
  --tile-face: #fffefa;
  --tile-border: #e4e8e5;
  --tile-shadow: 0 5px 12px rgba(0, 0, 0, .6);
  --avatar-frame: #d8e4e6;
  --avatar-halo: rgba(216, 228, 230, .2);
  --deck-top: #59656b;
  --deck-bottom: #1a242a;
}

.match-panel.normal-okey > .nok-presentation {
  color: var(--text-main);
  background: var(--presentation-bg) !important;
}
.match-panel.normal-okey .nok-table {
  border-color: var(--table-border) !important;
  background: radial-gradient(ellipse at center, var(--table-surface-highlight) 0, var(--table-surface) 57%, var(--table-surface-deep) 100%) !important;
  box-shadow: 0 0 0 6px var(--table-border), 0 0 0 11px rgba(0, 0, 0, .72), 0 28px 56px rgba(0, 0, 0, .56), inset 0 0 0 2px var(--table-inner-border), inset 0 -24px 36px rgba(0, 0, 0, .2) !important;
}
.match-panel.normal-okey .nok-table::before {
  border-color: var(--table-inner-border);
  background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .05), transparent 58%);
}
.match-panel.normal-okey .nok-logo-card,
.match-panel.normal-okey .nok-info-panel,
.match-panel.normal-okey .nok-right-column,
.match-panel.normal-okey .nok-chat-panel,
.match-panel.normal-okey .nok-treat-panel,
.match-panel.normal-okey .nok-radio-panel {
  border-color: var(--panel-border);
  background: var(--panel-bg);
  color: var(--text-main);
  box-shadow: 0 18px 34px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .08);
}
.match-panel.normal-okey .nok-logo-card strong,
.match-panel.normal-okey .nok-chat-tabs strong,
.match-panel.normal-okey .nok-treat-panel header strong,
.match-panel.normal-okey .nok-radio-panel header strong,
.match-panel.normal-okey .nok-pile-box strong,
.match-panel.normal-okey .nok-info-panel dd {
  color: var(--accent-strong);
}
.match-panel.normal-okey .nok-logo-card span,
.match-panel.normal-okey .nok-chat-tabs span,
.match-panel.normal-okey .chat-heading small,
.match-panel.normal-okey .nok-info-panel dt,
.match-panel.normal-okey .nok-radio-body small,
.match-panel.normal-okey .nok-treat-options button span {
  color: var(--text-muted);
}
.match-panel.normal-okey .nok-top-controls button,
.match-panel.normal-okey .nok-live-actions button,
.match-panel.normal-okey .normal-okey-side-controls button,
.match-panel.normal-okey .nok-action-bar button,
.match-panel.normal-okey .theme-picker select,
.match-panel.normal-okey .okey-smart-assist-control select {
  border-color: var(--control-border);
  color: var(--text-main);
  background: var(--control-bg);
}
.match-panel.normal-okey .nok-top-controls button:hover,
.match-panel.normal-okey .nok-live-actions button:hover,
.match-panel.normal-okey .normal-okey-side-controls button:hover,
.match-panel.normal-okey .nok-action-bar button:hover:not(:disabled),
.match-panel.normal-okey .nok-treat-options button:hover:not(:disabled) {
  border-color: var(--accent-strong);
  color: var(--text-main);
  background: var(--control-hover);
}
.match-panel.normal-okey .nok-statusbar {
  border-color: var(--panel-border);
  color: var(--text-main);
  background: var(--status-bg);
}
.match-panel.normal-okey .nok-statusbar > span:not(.turn-timer) {
  background: rgba(255, 255, 255, .07);
}
.match-panel.normal-okey .nok-statusbar .turn-timer,
.match-panel.normal-okey .nok-connection-control > small {
  color: var(--accent-strong);
}
.match-panel.normal-okey .normal-okey-rack-zone {
  border-color: var(--rack-border) !important;
  background: var(--rack-bg) !important;
  box-shadow: 0 22px 36px rgba(0, 0, 0, .48), 0 0 0 4px color-mix(in srgb, var(--rack-border) 52%, transparent), inset 0 2px rgba(255, 255, 255, .22), inset 0 -12px 16px rgba(0, 0, 0, .28) !important;
}
.match-panel.normal-okey .player-seat {
  border-color: var(--panel-border) !important;
  background: var(--panel-bg) !important;
  color: var(--text-main);
}
.match-panel.normal-okey .seat-avatar {
  border-color: var(--avatar-frame);
  box-shadow: 0 0 0 3px var(--avatar-halo), 0 0 0 1px rgba(255, 255, 255, .22), 0 6px 14px rgba(0, 0, 0, .36);
}
.match-panel.normal-okey .seat-identity {
  border-color: color-mix(in srgb, var(--panel-border) 65%, transparent);
  background: color-mix(in srgb, var(--panel-bg-solid) 88%, transparent);
}
.match-panel.normal-okey .seat-identity strong,
.match-panel.normal-okey .seat-identity .player-score {
  color: var(--text-main);
}
.match-panel.normal-okey .seat-identity > small {
  color: var(--text-muted);
}
.match-panel.normal-okey .opponent-rack {
  border-color: var(--rack-border);
  background: repeating-linear-gradient(90deg, var(--deck-top) 0 5px, var(--deck-bottom) 5px 7px);
}
.match-panel.normal-okey .draw-stack {
  border-color: var(--accent);
  background: repeating-linear-gradient(135deg, var(--deck-top) 0 5px, var(--deck-bottom) 5px 7px);
}
.match-panel.normal-okey .center-indicator-tile,
.match-panel.normal-okey .board-tile,
.match-panel.normal-okey #handTiles .tile {
  border-color: var(--tile-border);
  color: var(--tile-ink);
  background: var(--tile-face);
  box-shadow: var(--tile-shadow);
}
.match-panel.normal-okey .tile.tile-asset,
.match-panel.normal-okey .board-tile.tile-asset,
.match-panel.normal-okey .center-indicator-tile.tile-asset {
  border-color: var(--tile-border);
}
.match-panel.normal-okey .tile.false.tile-asset,
.match-panel.normal-okey .board-tile.false.tile-asset,
.match-panel.normal-okey .center-indicator-tile.false.tile-asset {
  border-color: var(--fake-okey-accent);
  box-shadow: var(--tile-shadow), 0 0 0 1px color-mix(in srgb, var(--fake-okey-accent) 32%, transparent);
}
.match-panel.normal-okey .unowned-discard {
  border-color: var(--panel-border);
  background: rgba(255, 255, 255, .05);
}
.match-panel.normal-okey .discard-tile-back {
  border-color: var(--panel-border);
  background: repeating-linear-gradient(135deg, var(--deck-top) 0 5px, var(--deck-bottom) 5px 7px);
}
.match-panel.normal-okey .nok-center-brand {
  color: color-mix(in srgb, var(--accent-strong) 34%, transparent);
}
.match-panel.normal-okey .nok-pile-box small,
.match-panel.normal-okey .center-indicator small,
.match-panel.normal-okey .nok-discard-center > small,
.match-panel.normal-okey .nok-discard-help {
  color: var(--text-muted);
}
.match-panel.normal-okey .nok-action-bar {
  border-color: var(--panel-border);
  background: var(--panel-bg);
  box-shadow: 0 18px 34px rgba(0, 0, 0, .4), inset 0 1px rgba(255, 255, 255, .08);
}
.match-panel.normal-okey .nok-action-bar #nokAutoSortPresentation {
  border-color: var(--control-border);
  color: var(--accent-strong);
}
.match-panel.normal-okey .okey-smart-assist-panel {
  border-color: var(--panel-border);
  color: var(--text-main);
  background: var(--panel-bg);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .3), inset 0 1px rgba(255, 255, 255, .08);
}
.match-panel.normal-okey .okey-smart-assist-panel-label {
  border-color: var(--control-border);
  color: var(--accent-strong);
}
.match-panel.normal-okey .okey-smart-assist-message {
  color: var(--text-main);
}
.match-panel.normal-okey .round-overlay {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--panel-bg-solid) 92%, black);
  color: var(--text-main);
  box-shadow: 0 0 55px color-mix(in srgb, var(--accent) 38%, transparent);
}
.match-panel.normal-okey .round-overlay.round-overlay-team-result #roundOverlayText {
  white-space: pre-line;
  letter-spacing: normal;
  text-align: left;
}
.match-panel.normal-okey .round-overlay-okey-label {
  margin-top: 12px;
  color: var(--accent-strong);
  font-size: .92rem;
  letter-spacing: .14em;
}
.match-panel.normal-okey button:focus-visible,
.match-panel.normal-okey select:focus-visible,
.match-panel.normal-okey input:focus-visible {
  outline-color: var(--accent-strong);
  box-shadow: 0 0 0 4px var(--avatar-halo);
}

/* Stage 15: ten-theme visual registry. Theme differences remain paint-only;
   the shared rack, tile, table, and action geometry stays owned by earlier
   functional layers. */
.match-panel.normal-okey {
  --brand-main: var(--accent-strong);
  --brand-slogan: var(--text-muted);
  --vip-tile-back-image: none;
}

.match-panel.normal-okey.table-theme-classic {
  --brand-main: #ffdc91;
  --brand-slogan: #d1dfce;
}

.match-panel.normal-okey.table-theme-modern {
  --table-surface: #1b3d59;
  --table-surface-deep: #070f1d;
  --table-surface-highlight: #315f86;
  --table-border: #4ea8c4;
  --table-inner-border: rgba(126, 224, 255, .3);
  --presentation-bg: radial-gradient(circle at 52% 24%, rgba(74, 171, 221, .2), transparent 31%), linear-gradient(135deg, #050a14, #10243a 52%, #03060d);
  --rack-bg: linear-gradient(180deg, #405f73, #243a4e 62%, #111d2b);
  --rack-border: #5bbdd6;
  --panel-bg: linear-gradient(145deg, rgba(18, 43, 65, .9), rgba(5, 15, 27, .97));
  --panel-bg-solid: #0c1b2d;
  --panel-border: rgba(91, 192, 220, .52);
  --status-bg: rgba(3, 12, 24, .86);
  --control-bg: linear-gradient(145deg, rgba(25, 63, 91, .94), rgba(5, 22, 39, .98));
  --control-hover: linear-gradient(145deg, rgba(43, 105, 139, .96), rgba(8, 39, 62, .99));
  --control-border: rgba(91, 211, 234, .66);
  --text-main: #eefaff;
  --text-muted: #b9d1dc;
  --accent: #67d9ed;
  --accent-strong: #b5f5ff;
  --avatar-frame: #67d9ed;
  --avatar-halo: rgba(103, 217, 237, .22);
  --deck-top: #2b6080;
  --deck-bottom: #0b263f;
  --brand-main: #b5f5ff;
  --brand-slogan: #c1dbe5;
}

.match-panel.normal-okey.table-theme-premium {
  --table-surface: #30323a;
  --table-surface-deep: #0b0d12;
  --table-surface-highlight: #565966;
  --table-border: #c9a864;
  --table-inner-border: rgba(239, 214, 157, .3);
  --presentation-bg: radial-gradient(circle at 50% 22%, rgba(218, 187, 111, .16), transparent 30%), repeating-linear-gradient(119deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 13px), linear-gradient(135deg, #08090d, #25262d 54%, #050609);
  --rack-bg: linear-gradient(180deg, #5d6068, #353840 62%, #191b21);
  --rack-border: #d6b878;
  --panel-bg: linear-gradient(145deg, rgba(54, 55, 63, .96), rgba(11, 12, 17, .99));
  --panel-bg-solid: #17181e;
  --panel-border: rgba(227, 195, 124, .55);
  --status-bg: rgba(7, 8, 12, .9);
  --control-bg: linear-gradient(145deg, rgba(67, 68, 77, .95), rgba(21, 22, 28, .99));
  --control-hover: linear-gradient(145deg, rgba(102, 96, 88, .98), rgba(38, 34, 34, .99));
  --control-border: rgba(235, 205, 139, .68);
  --text-main: #fff9eb;
  --text-muted: #cec7b8;
  --accent: #dfbb72;
  --accent-strong: #ffe5a5;
  --avatar-frame: #e2c17e;
  --avatar-halo: rgba(226, 193, 126, .22);
  --deck-top: #777a82;
  --deck-bottom: #262931;
  --brand-main: #ffe5a5;
  --brand-slogan: #f1d99f;
}

.match-panel.normal-okey.table-theme-nature {
  --table-surface: #315f43;
  --table-surface-deep: #0d2419;
  --table-surface-highlight: #65966b;
  --table-border: #80623b;
  --table-inner-border: rgba(222, 226, 159, .28);
  --presentation-bg: radial-gradient(ellipse at 17% 28%, rgba(113, 163, 102, .2), transparent 19%), radial-gradient(ellipse at 83% 75%, rgba(57, 133, 161, .18), transparent 24%), linear-gradient(135deg, #08160f, #1f4930 52%, #07100b);
  --rack-bg: linear-gradient(180deg, #a77a47, #69462a 62%, #302217);
  --rack-border: #c89d60;
  --panel-bg: linear-gradient(145deg, rgba(39, 78, 51, .96), rgba(8, 27, 18, .98));
  --panel-bg-solid: #173521;
  --panel-border: rgba(190, 164, 97, .52);
  --status-bg: rgba(7, 27, 17, .84);
  --control-bg: linear-gradient(145deg, rgba(54, 105, 65, .92), rgba(15, 45, 27, .98));
  --control-hover: linear-gradient(145deg, rgba(84, 143, 79, .96), rgba(25, 72, 40, .99));
  --control-border: rgba(213, 185, 109, .6);
  --text-main: #fff8df;
  --text-muted: #c2d4b6;
  --accent: #dec078;
  --accent-strong: #f4d99b;
  --avatar-frame: #d7bb73;
  --avatar-halo: rgba(215, 187, 115, .21);
  --deck-top: #4d7651;
  --deck-bottom: #1d3b2a;
  --brand-main: #f4d99b;
  --brand-slogan: #d3e2bb;
}

.match-panel.normal-okey.table-theme-black {
  --table-surface: #292e33;
  --table-surface-deep: #07090b;
  --table-surface-highlight: #4b555c;
  --table-border: #9daab0;
  --table-inner-border: rgba(235, 243, 244, .28);
  --presentation-bg: radial-gradient(circle at 50% 24%, rgba(194, 207, 211, .1), transparent 31%), linear-gradient(135deg, #030405, #161b20 52%, #020304);
  --rack-bg: linear-gradient(180deg, #444b51, #252b30 62%, #111519);
  --rack-border: #b7c4c8;
  --panel-bg: linear-gradient(145deg, rgba(38, 45, 51, .98), rgba(7, 10, 13, .99));
  --panel-bg-solid: #11161a;
  --panel-border: rgba(190, 205, 210, .5);
  --status-bg: rgba(2, 4, 6, .9);
  --control-bg: linear-gradient(145deg, rgba(57, 65, 71, .96), rgba(13, 17, 21, .99));
  --control-hover: linear-gradient(145deg, rgba(86, 98, 104, .98), rgba(26, 33, 38, .99));
  --control-border: rgba(215, 228, 231, .62);
  --text-main: #f7fbfc;
  --text-muted: #c2cdd1;
  --accent: #c7d2d5;
  --accent-strong: #f1f6f6;
  --avatar-frame: #d8e4e6;
  --avatar-halo: rgba(216, 228, 230, .2);
  --deck-top: #5c666b;
  --deck-bottom: #1b2429;
  --brand-main: #f1f6f6;
  --brand-slogan: #c9d3d5;
}

.match-panel.normal-okey.table-theme-vip-royal {
  --table-surface: #542737;
  --table-surface-deep: #19080f;
  --table-surface-highlight: #8b4b54;
  --table-border: #d9ad5a;
  --table-inner-border: rgba(255, 227, 160, .34);
  --presentation-bg: radial-gradient(circle at 50% 18%, rgba(228, 177, 78, .18), transparent 29%), linear-gradient(135deg, #0d080e, #3b1727 54%, #080407);
  --rack-bg: linear-gradient(180deg, #755044, #452731 62%, #201219);
  --rack-border: #e0b96d;
  --panel-bg: linear-gradient(145deg, rgba(68, 29, 46, .97), rgba(19, 7, 14, .99));
  --panel-bg-solid: #25101b;
  --panel-border: rgba(226, 181, 91, .62);
  --status-bg: rgba(18, 5, 12, .88);
  --control-bg: linear-gradient(145deg, rgba(104, 48, 61, .94), rgba(32, 11, 20, .99));
  --control-hover: linear-gradient(145deg, rgba(151, 76, 76, .97), rgba(57, 18, 30, .99));
  --control-border: rgba(244, 205, 119, .72);
  --text-main: #fff7e5;
  --text-muted: #e0c4a5;
  --accent: #e0b45e;
  --accent-strong: #ffe1a0;
  --avatar-frame: #e7be70;
  --avatar-halo: rgba(231, 190, 112, .24);
  --deck-top: #754454;
  --deck-bottom: #351823;
  --brand-main: #ffe1a0;
  --brand-slogan: #f3c876;
}

.match-panel.normal-okey.table-theme-fenerbahce {
  --table-surface: #153c70;
  --table-surface-deep: #061326;
  --table-surface-highlight: #32689d;
  --table-border: #f2ca38;
  --table-inner-border: rgba(255, 226, 83, .32);
  --presentation-bg: radial-gradient(circle at 50% 18%, rgba(245, 204, 55, .16), transparent 28%), linear-gradient(135deg, #050d1b, #102e58 54%, #040912);
  --rack-bg: linear-gradient(180deg, #4d6070, #293d50 62%, #111d2c);
  --rack-border: #f2cf45;
  --panel-bg: linear-gradient(145deg, rgba(18, 53, 96, .96), rgba(4, 15, 31, .99));
  --panel-bg-solid: #0b203d;
  --panel-border: rgba(246, 207, 65, .62);
  --status-bg: rgba(3, 13, 29, .88);
  --control-bg: linear-gradient(145deg, rgba(26, 72, 125, .95), rgba(6, 26, 55, .99));
  --control-hover: linear-gradient(145deg, rgba(45, 106, 172, .98), rgba(10, 46, 88, .99));
  --control-border: rgba(248, 211, 66, .72);
  --text-main: #f7fbff;
  --text-muted: #c1d2e8;
  --accent: #f2ca39;
  --accent-strong: #ffe36d;
  --avatar-frame: #f2ca39;
  --avatar-halo: rgba(242, 202, 57, .24);
  --deck-top: #315e98;
  --deck-bottom: #0b2c59;
  --brand-main: #ffe36d;
  --brand-slogan: #f7d66b;
  --vip-tile-back-image: url("/assets/fenerbahce.png");
}

.match-panel.normal-okey.table-theme-besiktas {
  --table-surface: #31383d;
  --table-surface-deep: #08090b;
  --table-surface-highlight: #59636a;
  --table-border: #e5e9eb;
  --table-inner-border: rgba(255, 255, 255, .3);
  --presentation-bg: radial-gradient(circle at 50% 18%, rgba(255, 255, 255, .12), transparent 29%), linear-gradient(135deg, #030405, #252b30 54%, #010102);
  --rack-bg: linear-gradient(180deg, #6b7378, #3a4146 62%, #171b1e);
  --rack-border: #f2f4f4;
  --panel-bg: linear-gradient(145deg, rgba(48, 55, 60, .98), rgba(7, 9, 11, .99));
  --panel-bg-solid: #15181b;
  --panel-border: rgba(236, 241, 242, .52);
  --status-bg: rgba(3, 4, 5, .9);
  --control-bg: linear-gradient(145deg, rgba(69, 77, 82, .96), rgba(15, 18, 21, .99));
  --control-hover: linear-gradient(145deg, rgba(105, 115, 120, .98), rgba(28, 33, 37, .99));
  --control-border: rgba(248, 250, 250, .68);
  --text-main: #fbfcfc;
  --text-muted: #cbd1d3;
  --accent: #f1f3f4;
  --accent-strong: #ffffff;
  --avatar-frame: #f1f3f4;
  --avatar-halo: rgba(241, 243, 244, .2);
  --deck-top: #6b747a;
  --deck-bottom: #20262a;
  --brand-main: #ffffff;
  --brand-slogan: #e4e8e9;
  --vip-tile-back-image: url("/assets/besiktas.png");
}

.match-panel.normal-okey.table-theme-galatasaray {
  --table-surface: #68172a;
  --table-surface-deep: #1c070e;
  --table-surface-highlight: #a32f43;
  --table-border: #e3b83f;
  --table-inner-border: rgba(255, 222, 94, .33);
  --presentation-bg: radial-gradient(circle at 50% 18%, rgba(232, 184, 48, .18), transparent 29%), linear-gradient(135deg, #10060c, #501323 54%, #080306);
  --rack-bg: linear-gradient(180deg, #845048, #542b33 62%, #25131a);
  --rack-border: #e9bf45;
  --panel-bg: linear-gradient(145deg, rgba(105, 24, 43, .97), rgba(25, 6, 13, .99));
  --panel-bg-solid: #2b0d18;
  --panel-border: rgba(235, 190, 62, .64);
  --status-bg: rgba(22, 4, 11, .89);
  --control-bg: linear-gradient(145deg, rgba(139, 40, 55, .95), rgba(49, 9, 20, .99));
  --control-hover: linear-gradient(145deg, rgba(184, 60, 65, .98), rgba(75, 13, 28, .99));
  --control-border: rgba(245, 204, 71, .73);
  --text-main: #fff8e8;
  --text-muted: #e0c39b;
  --accent: #e7ba3d;
  --accent-strong: #ffe17a;
  --avatar-frame: #e7ba3d;
  --avatar-halo: rgba(231, 186, 61, .24);
  --deck-top: #92304c;
  --deck-bottom: #421321;
  --brand-main: #ffe17a;
  --brand-slogan: #f0c55c;
  --vip-tile-back-image: url("/assets/galatasaray.png");
}

.match-panel.normal-okey.table-theme-trabzonspor {
  --table-surface: #4d273a;
  --table-surface-deep: #17080f;
  --table-surface-highlight: #637b9a;
  --table-border: #b48caa;
  --table-inner-border: rgba(189, 219, 242, .3);
  --presentation-bg: radial-gradient(circle at 50% 18%, rgba(109, 159, 202, .18), transparent 29%), linear-gradient(135deg, #0c060b, #3b1c2e 54%, #050307);
  --rack-bg: linear-gradient(180deg, #6c5867, #3f3343 62%, #1d1721);
  --rack-border: #a9cce7;
  --panel-bg: linear-gradient(145deg, rgba(78, 35, 57, .97), rgba(16, 7, 15, .99));
  --panel-bg-solid: #26121f;
  --panel-border: rgba(148, 193, 223, .58);
  --status-bg: rgba(16, 5, 13, .89);
  --control-bg: linear-gradient(145deg, rgba(91, 50, 79, .95), rgba(27, 13, 29, .99));
  --control-hover: linear-gradient(145deg, rgba(112, 75, 112, .98), rgba(45, 22, 47, .99));
  --control-border: rgba(182, 218, 239, .72);
  --text-main: #fff8ef;
  --text-muted: #d2cedd;
  --accent: #a9d0ed;
  --accent-strong: #ffe09a;
  --avatar-frame: #a9d0ed;
  --avatar-halo: rgba(169, 208, 237, .22);
  --deck-top: #5c789d;
  --deck-bottom: #283d5d;
  --brand-main: #ffe09a;
  --brand-slogan: #f3c970;
  --vip-tile-back-image: url("/assets/trabzonspor.png");
}

/* Stage 15 presentation accents are shared by all ten registry entries. */
.match-panel.normal-okey .round-overlay {
  box-sizing: border-box;
  padding-right: 112px;
}
.match-panel.normal-okey .round-overlay-finished-hand {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  margin-top: 14px;
}
.match-panel.normal-okey .round-overlay-finished-hand.hidden {
  display: none !important;
}
.match-panel.normal-okey .round-overlay-finished-hand > strong {
  color: var(--accent-strong);
  font-size: .78rem;
  letter-spacing: .14em;
}
.match-panel.normal-okey .round-overlay-finished-hand .revealed-hand {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, auto));
  grid-auto-flow: row;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  margin-top: 0;
}
.match-panel.normal-okey .round-overlay-finished-hand .terminal-result-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.match-panel.normal-okey .round-overlay-finished-hand .terminal-group {
  display: flex;
  flex: 0 0 auto;
  gap: 3px;
  align-items: flex-start;
  min-width: 0;
}
.match-panel.normal-okey .round-overlay-finished-hand .terminal-group-continuation {
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
}
.match-panel.normal-okey .round-overlay-finished-hand .terminal-group-start {
  margin-left: 9px;
  padding-left: 9px;
  border-left: 2px solid color-mix(in srgb, var(--accent) 62%, transparent);
}
.match-panel.normal-okey .round-overlay-finished-hand .terminal-group .board-tile {
  flex: 0 0 auto;
  width: 34px;
  height: 47px;
  font-size: 1.2rem;
}
.match-panel.normal-okey .round-overlay-finished-hand .terminal-group .board-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.match-panel.normal-okey .round-overlay-ack {
  margin-top: 14px;
  min-width: 100px;
}
.match-panel.normal-okey .round-overlay-last-tile {
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  justify-items: center;
  gap: 5px;
  min-width: 70px;
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 72%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--panel-bg-solid) 82%, black);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .28);
}
.match-panel.normal-okey .round-overlay-last-tile.hidden {
  display: none !important;
}
.match-panel.normal-okey .round-overlay-last-tile > strong {
  color: var(--accent-strong);
  font-size: .62rem;
  letter-spacing: .12em;
  white-space: nowrap;
}
.match-panel.normal-okey .round-overlay-last-tile-value .board-tile {
  width: 44px;
  height: 61px;
  font-size: 1.45rem;
}
.match-panel.normal-okey .round-overlay-last-tile-value .board-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

/* Terminal result rack: reuse the approved two-channel rack artwork while
   keeping the canonical winning-hand rows and their tile IDs untouched. */
.match-panel.normal-okey .round-overlay:has(#roundOverlayFinishedHand:not(.hidden)) {
  width: min(760px, calc(100vw - 32px));
  min-width: 0;
  max-width: calc(100vw - 32px);
  padding: 24px 116px 24px 24px;
  overflow: visible;
}
.match-panel.normal-okey .terminal-result-rack {
  position: relative;
  display: block;
  width: min(100%, 480px);
  height: 166px;
  min-height: 166px;
  margin: 0 auto;
  box-sizing: border-box;
  overflow: visible;
  isolation: isolate;
}
.match-panel.normal-okey .terminal-result-rack > .rack-image-skin {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
  object-position: center;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.match-panel.normal-okey .terminal-result-rack > .revealed-hand {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: none;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: visible !important;
  z-index: 1;
}
.match-panel.normal-okey .terminal-result-rack .terminal-result-row {
  position: absolute;
  left: 34px;
  right: 34px;
  width: auto;
  max-width: none;
  height: 47px;
  min-width: 0;
  overflow: visible !important;
  justify-content: center;
  gap: 4px;
}
.match-panel.normal-okey .terminal-result-rack .terminal-result-row:first-child { top: 27px; }
.match-panel.normal-okey .terminal-result-rack .terminal-result-row:nth-child(2) { top: 91px; }
.match-panel.normal-okey .terminal-result-rack .terminal-group,
.match-panel.normal-okey .terminal-result-rack .terminal-result-row > .board-tile {
  flex: 0 0 auto;
}
.match-panel.normal-okey .terminal-result-rack .board-tile {
  width: 34px;
  height: 47px;
  font-size: 1.2rem;
}
.match-panel.normal-okey .terminal-result-rack .board-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}
@media (max-width: 700px) {
  .match-panel.normal-okey .round-overlay:has(#roundOverlayFinishedHand:not(.hidden)) {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    padding: 18px 84px 18px 10px;
  }
  .match-panel.normal-okey .terminal-result-rack {
    width: min(100%, 430px);
    height: 138px;
    min-height: 138px;
  }
  .match-panel.normal-okey .terminal-result-rack .terminal-result-row {
    left: 26px;
    right: 26px;
    height: 39px;
    gap: 2px;
  }
  .match-panel.normal-okey .terminal-result-rack .terminal-result-row:first-child { top: 22px; }
  .match-panel.normal-okey .terminal-result-rack .terminal-result-row:nth-child(2) { top: 75px; }
  .match-panel.normal-okey .terminal-result-rack .board-tile {
    width: 28px;
    height: 39px;
    font-size: 1rem;
  }
}

/* STAGE VICTORY_OVERLAY_ASSET_INTEGRATION_START
   Decorative victory art is scoped to the existing winner overlay only. The
   authoritative winner text, last discard, and canonical two-row rack remain
   live DOM content above this non-interactive image. */
.match-panel.normal-okey .round-overlay.winner-celebration {
  width: min(760px, calc(100vw - 32px));
  min-width: 0;
  max-width: calc(100vw - 32px);
  min-height: 520px;
  padding: 250px 116px 24px 24px;
  overflow: visible;
  isolation: isolate;
  background: #130b24;
  border-color: #f5c94f;
}
.match-panel.normal-okey .round-overlay-victory-decoration {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  object-position: center top;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.match-panel.normal-okey .round-overlay.winner-celebration .round-overlay-victory-decoration {
  display: block;
}
.match-panel.normal-okey .round-overlay.winner-celebration > :not(.round-overlay-victory-decoration) {
  position: relative;
  z-index: 1;
}
.match-panel.normal-okey .round-overlay.winner-celebration #roundOverlayTitle {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.match-panel.normal-okey .round-overlay.winner-celebration #roundOverlayText {
  margin-top: 0;
  color: #fff8dc;
  font-size: clamp(1.05rem, 2.4vw, 1.55rem);
  line-height: 1.25;
  letter-spacing: .035em;
  overflow-wrap: anywhere;
  text-shadow: 0 2px 10px rgba(15, 3, 30, .95), 0 0 18px rgba(255, 213, 83, .62);
}
.match-panel.normal-okey .round-overlay.winner-celebration .round-overlay-okey-label {
  color: #ffe879;
  text-shadow: 0 1px 8px rgba(20, 3, 45, .9);
}
.match-panel.normal-okey .round-overlay.winner-celebration .round-overlay-finished-hand {
  margin-top: 14px;
}
.match-panel.normal-okey .round-overlay.winner-celebration .round-overlay-last-tile {
  z-index: 2;
}
.match-panel.normal-okey .round-overlay.winner-celebration .round-overlay-ack {
  z-index: 2;
}
@media (max-width: 700px) {
  .match-panel.normal-okey .round-overlay.winner-celebration {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    min-height: 490px;
    padding: 214px 84px 18px 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .match-panel.normal-okey .round-overlay-victory-decoration {
    transition: none;
  }
}
/* STAGE VICTORY_OVERLAY_ASSET_INTEGRATION_END */
.match-panel.normal-okey .nok-center-brand {
  color: var(--brand-main);
  opacity: .88;
}
.match-panel.normal-okey .nok-center-brand .nok-crown {
  display: block;
  color: var(--brand-main);
  font-size: 19px;
  line-height: 1;
  text-shadow: 0 1px 8px color-mix(in srgb, var(--brand-main) 32%, transparent);
}
.match-panel.normal-okey .nok-center-brand strong {
  color: var(--brand-main);
  text-shadow: 0 2px 12px color-mix(in srgb, var(--brand-main) 25%, transparent);
}
.match-panel.normal-okey .nok-center-brand > span:not(.nok-crown) {
  color: var(--brand-slogan);
  font-weight: 800;
  letter-spacing: .1em;
  white-space: nowrap;
}
.match-panel.normal-okey .nok-center-brand .nok-club-mark {
  display: block;
  width: 28px;
  height: 28px;
  max-width: 28px;
  max-height: 28px;
  margin: 2px auto 0;
  object-fit: contain;
  border: 1px solid color-mix(in srgb, var(--brand-main) 72%, transparent);
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-main) 22%, transparent), 0 4px 10px rgba(0, 0, 0, .28);
}
.match-panel.normal-okey #handTiles .tile.flipped::before {
  border-color: color-mix(in srgb, var(--accent-strong) 48%, transparent);
  background-image: radial-gradient(ellipse at 35% 28%, rgba(255,255,255,.72), transparent 38%), var(--vip-tile-back-image, none);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: auto, 68% 68%;
}
.match-panel.normal-okey .discard-tile-back {
  background-image: repeating-linear-gradient(135deg, var(--deck-top) 0 5px, var(--deck-bottom) 5px 7px), var(--vip-tile-back-image, none);
  background-repeat: repeat, no-repeat;
  background-position: center, center;
  background-size: auto, 68% 68%;
}

/* Stage 16: Klasik master masa.  This is the approved geometry/layout
   reference for the next theme pass; all other theme classes keep the
   existing composition.  Tile, rack, and interaction selectors are
   intentionally absent from this layer. */
@media (min-width: 1181px) {
  .match-panel.normal-okey.table-theme-classic > .nok-presentation {
    grid-template-columns: minmax(188px, 210px) minmax(0, 1fr) clamp(286px, 22vw, 332px) !important;
    grid-template-rows: 96px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 12px 14px 82px !important;
    isolation: isolate;
    background:
      radial-gradient(ellipse at 48% 43%, rgba(67, 145, 99, .17), transparent 39%),
      radial-gradient(circle at 10% 90%, rgba(157, 100, 42, .16), transparent 29%),
      linear-gradient(135deg, #07130f 0%, #102e23 48%, #06100c 100%) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-logo-card,
  .match-panel.normal-okey.table-theme-classic .nok-info-panel,
  .match-panel.normal-okey.table-theme-classic .nok-chat-panel,
  .match-panel.normal-okey.table-theme-classic .nok-treat-panel,
  .match-panel.normal-okey.table-theme-classic .nok-radio-panel {
    border-color: rgba(224, 174, 88, .52);
    background: linear-gradient(145deg, rgba(29, 67, 50, .97), rgba(8, 28, 20, .98));
    box-shadow: 0 18px 34px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 241, 193, .12);
  }

  .match-panel.normal-okey.table-theme-classic .nok-logo-card {
    position: relative;
    overflow: hidden;
    align-self: stretch;
    border-width: 1px;
    border-radius: 14px;
    padding: 13px 16px;
  }
  .match-panel.normal-okey.table-theme-classic .nok-logo-card::before {
    content: "\265b";
    color: #f5cc78;
    text-shadow: 0 2px 9px rgba(0, 0, 0, .3);
  }
  .match-panel.normal-okey.table-theme-classic .nok-logo-card strong {
    color: #ffe0a0;
    text-shadow: 0 2px 11px rgba(0, 0, 0, .32);
  }
  .match-panel.normal-okey.table-theme-classic .nok-logo-card span { color: #d9c48e; }

  .match-panel.normal-okey.table-theme-classic .nok-top-controls {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 0;
  }
  .match-panel.normal-okey.table-theme-classic .nok-top-controls button {
    min-height: 38px;
    border-color: rgba(213, 170, 91, .34);
    border-radius: 9px;
    color: #f7efd9;
    background: linear-gradient(145deg, rgba(40, 89, 62, .94), rgba(12, 43, 28, .98));
    box-shadow: 0 9px 20px rgba(0, 0, 0, .2), inset 0 1px rgba(255, 239, 182, .1);
  }
  .match-panel.normal-okey.table-theme-classic .nok-top-controls button:first-child {
    border-color: rgba(240, 195, 103, .68);
    color: #ffe4ad;
    background: linear-gradient(145deg, #79552c, #402817);
  }

  .match-panel.normal-okey.table-theme-classic .nok-left-column {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: start;
  }
  .match-panel.normal-okey.table-theme-classic .nok-info-panel {
    min-height: 0;
    padding: 14px;
    border-radius: 14px;
  }
  .match-panel.normal-okey.table-theme-classic .nok-info-heading { color: #ffe0a0; }
  .match-panel.normal-okey.table-theme-classic .nok-info-panel dt { color: #bcd0bd; }
  .match-panel.normal-okey.table-theme-classic .nok-info-panel dd { color: #fff8e8; }

  .match-panel.normal-okey.table-theme-classic .nok-statusbar {
    top: 70px;
    left: 222px;
    right: calc(clamp(286px, 22vw, 332px) + 26px);
    border-color: rgba(224, 174, 88, .32);
    background: rgba(5, 25, 17, .78);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .2), inset 0 1px rgba(255, 239, 182, .08);
  }

  .match-panel.normal-okey.table-theme-classic .nok-table-stage {
    grid-column: 2 !important;
    grid-row: 2 !important;
    padding: 26px 48px 6px !important;
    gap: 12px !important;
  }
  .match-panel.normal-okey.table-theme-classic .nok-table {
    width: min(100%, 1120px, calc((100dvh - 420px) * 1.74)) !important;
    aspect-ratio: 1.74 / 1;
    border: 12px solid #65401f !important;
    border-radius: 32px !important;
    background:
      radial-gradient(circle at 50% 35%, rgba(115, 201, 143, .14), transparent 39%),
      repeating-linear-gradient(102deg, rgba(255, 255, 255, .012) 0 1px, transparent 1px 8px),
      radial-gradient(ellipse at 50% 44%, #2d8a66 0%, #196449 54%, #0b352a 100%) !important;
    box-shadow:
      0 0 0 6px #b4773b,
      0 0 0 11px #2a160e,
      0 26px 52px rgba(0, 0, 0, .58),
      inset 0 0 0 2px rgba(255, 230, 168, .28),
      inset 0 -24px 36px rgba(0, 0, 0, .16) !important;
  }
  .match-panel.normal-okey.table-theme-classic .nok-table::before {
    inset: 19px;
    border-color: rgba(222, 235, 184, .27);
    border-radius: 22px;
    background: radial-gradient(circle at 50% 50%, transparent 0 43%, rgba(0, 0, 0, .08) 78%, rgba(0, 0, 0, .17) 100%);
    box-shadow: inset 0 0 44px rgba(0, 0, 0, .2), 0 0 0 1px rgba(255, 226, 160, .05);
  }
  .match-panel.normal-okey.table-theme-classic .nok-table::after {
    right: 30px;
    bottom: 15px;
    left: 30px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #d7a44f, transparent);
    opacity: .62;
  }

  .match-panel.normal-okey.table-theme-classic .nok-station-top { top: -72px !important; }
  .match-panel.normal-okey.table-theme-classic .nok-station-left { left: -62px !important; }
  .match-panel.normal-okey.table-theme-classic .nok-station-right { right: -62px !important; }
  .match-panel.normal-okey.table-theme-classic .nok-station-bottom { bottom: 8px !important; }
  .match-panel.normal-okey.table-theme-classic .player-seat {
    border-color: rgba(223, 178, 91, .42) !important;
    background: linear-gradient(145deg, rgba(31, 69, 49, .98), rgba(7, 27, 19, .98)) !important;
    box-shadow: 0 13px 27px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 238, 176, .1) !important;
  }
  .match-panel.normal-okey.table-theme-classic .player-seat.active {
    border-color: #f0c66f !important;
    background: linear-gradient(145deg, rgba(89, 69, 34, .98), rgba(35, 31, 19, .98)) !important;
    box-shadow: 0 0 0 2px rgba(240, 198, 111, .24), 0 16px 30px rgba(0, 0, 0, .42) !important;
  }
  .match-panel.normal-okey.table-theme-classic .seat-avatar {
    border-color: #e4b65e;
    background: linear-gradient(145deg, #6d956d, #254e38);
    box-shadow: 0 0 0 3px rgba(228, 182, 94, .18), 0 6px 14px rgba(0, 0, 0, .36);
  }
  .match-panel.normal-okey.table-theme-classic .seat-identity strong { color: #fff3d0; }
  .match-panel.normal-okey.table-theme-classic .seat-identity > small { color: #bcd2bf; }
  .match-panel.normal-okey.table-theme-classic .seat-identity .player-score { color: #f5cf81; }
  .match-panel.normal-okey.table-theme-classic .seat-identity { position: relative; }
  .match-panel.normal-okey.table-theme-classic .seat-identity::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 7px;
    height: 7px;
    border: 1px solid rgba(255, 245, 202, .7);
    border-radius: 50%;
    background: #e7bb65;
    box-shadow: 0 0 0 2px rgba(231, 187, 101, .16), 0 0 8px rgba(231, 187, 101, .45);
  }
  .match-panel.normal-okey.table-theme-classic:has(.nok-connection-control[data-connection-state="connected"]) .seat-identity::after { background: #75db9b; box-shadow: 0 0 0 2px rgba(117, 219, 155, .16), 0 0 8px rgba(117, 219, 155, .45); }
  .match-panel.normal-okey.table-theme-classic:has(.nok-connection-control[data-connection-state="disconnected"], .nok-connection-control[data-connection-state="error"]) .seat-identity::after { background: #f17f72; box-shadow: 0 0 0 2px rgba(241, 127, 114, .16), 0 0 8px rgba(241, 127, 114, .42); }
  .match-panel.normal-okey.table-theme-classic .opponent-rack {
    border-color: #b4773b;
    background: repeating-linear-gradient(90deg, #39765b 0 5px, #1a4738 5px 7px);
  }

  .match-panel.normal-okey.table-theme-classic .nok-center-brand {
    top: 27% !important;
    opacity: .78;
    color: #f5d58b;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .3);
  }
  .match-panel.normal-okey.table-theme-classic .nok-center-brand strong {
    color: #ffe0a0;
    font-size: clamp(19px, 1.8vw, 28px);
    letter-spacing: .2em;
  }
  .match-panel.normal-okey.table-theme-classic .nok-center-brand > span:not(.nok-crown) {
    color: #dbe5bd;
    font-size: clamp(9px, .7vw, 11px);
    letter-spacing: .08em;
  }
  .match-panel.normal-okey.table-theme-classic .nok-center {
    top: 53% !important;
    padding: 12px 15px;
    border: 1px solid rgba(231, 192, 113, .25);
    border-radius: 20px;
    background: rgba(7, 48, 34, .38);
    box-shadow: 0 17px 32px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 245, 197, .08);
  }

  .match-panel.normal-okey.table-theme-classic .nok-right-column {
    grid-column: 3 !important;
    grid-row: 1 / 3 !important;
    gap: 10px;
    padding-top: 0;
    overflow: hidden;
  }
  .match-panel.normal-okey.table-theme-classic .nok-chat-panel {
    flex: 1 1 auto;
    min-height: 300px;
  }
  .match-panel.normal-okey.table-theme-classic #chatMessages { min-height: 0; }
  .match-panel.normal-okey.table-theme-classic .nok-treat-panel { flex: 0 0 112px; min-height: 112px; }
  .match-panel.normal-okey.table-theme-classic .nok-radio-panel { flex: 0 0 88px; min-height: 88px; }
  .match-panel.normal-okey.table-theme-classic .nok-treat-options button { color: #e8e4cf; background: rgba(255, 240, 188, .06); }
  .match-panel.normal-okey.table-theme-classic .nok-radio-icon { color: #f1c873; }
  .match-panel.normal-okey.table-theme-classic .nok-action-bar {
    border-color: rgba(218, 170, 88, .38);
    background: linear-gradient(145deg, rgba(27, 65, 47, .98), rgba(7, 28, 19, .98));
    box-shadow: 0 18px 34px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 241, 192, .1);
  }
  .match-panel.normal-okey.table-theme-classic .nok-action-bar button {
    border-color: rgba(222, 178, 94, .3);
    color: #f1ead7;
    background: linear-gradient(145deg, rgba(45, 94, 64, .96), rgba(12, 42, 27, .99));
  }
  .match-panel.normal-okey.table-theme-classic .nok-action-bar button:hover:not(:disabled) {
    border-color: #f3cb78;
    background: linear-gradient(145deg, rgba(82, 132, 83, .98), rgba(24, 67, 40, .99));
  }
  .match-panel.normal-okey.table-theme-classic .okey-smart-assist-panel {
    border-color: rgba(222, 178, 94, .4);
    background: linear-gradient(145deg, rgba(29, 75, 52, .97), rgba(7, 30, 21, .98));
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .match-panel.normal-okey.table-theme-classic > .nok-presentation {
    grid-template-columns: 180px minmax(0, 1fr) 270px !important;
    grid-template-rows: 82px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 9px 10px 108px !important;
  }
  .match-panel.normal-okey.table-theme-classic .nok-statusbar { top: 58px; left: 190px; right: 280px; }
  .match-panel.normal-okey.table-theme-classic .nok-table-stage { padding: 26px 38px 6px !important; }
  .match-panel.normal-okey.table-theme-classic .nok-table { width: min(100%, calc((100dvh - 400px) * 1.68)) !important; }
  .match-panel.normal-okey.table-theme-classic .nok-station-left { left: -52px !important; }
  .match-panel.normal-okey.table-theme-classic .nok-station-right { right: -52px !important; }
  .match-panel.normal-okey.table-theme-classic .nok-chat-panel { min-height: 240px; }
  .match-panel.normal-okey.table-theme-classic .nok-treat-panel { flex-basis: 104px; min-height: 104px; }
  .match-panel.normal-okey.table-theme-classic .nok-radio-panel { flex-basis: 82px; min-height: 82px; }
}

/* Stage 18: Classic master PNG calibration.  This reproduces the reference
   composition with live DOM surfaces; the reference image is deliberately
   not mounted as a flat background.  Gameplay and tile/rack contracts stay
   outside this paint/layout layer. */
.match-panel.normal-okey.table-theme-classic {
  --classic-room-deep: #140d08;
  --classic-room-warm: #3a2112;
  --classic-wood: #8e5528;
  --classic-wood-light: #d39a55;
  --classic-felt: #126043;
  --classic-felt-light: #24815a;
  --classic-gold: #f2c66f;
  background: var(--classic-room-deep) !important;
}

@media (min-width: 901px) {
  body:has(#matchPanel.normal-okey.table-theme-classic:not(.hidden)) {
    overflow: hidden;
    background: var(--classic-room-deep);
  }

  .match-panel.normal-okey.table-theme-classic > .nok-presentation {
    box-sizing: border-box;
    grid-template-columns: minmax(0, 1fr) clamp(300px, 24.5vw, 378px) !important;
    grid-template-rows: 78px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 10px 10px 74px !important;
    overflow: hidden !important;
    isolation: isolate;
    background:
      radial-gradient(ellipse at 16% 24%, rgba(245, 180, 82, .23), transparent 7%),
      radial-gradient(ellipse at 80% 25%, rgba(234, 167, 77, .19), transparent 8%),
      radial-gradient(ellipse at 52% 8%, rgba(45, 90, 113, .28), transparent 23%),
      linear-gradient(180deg, rgba(17, 13, 10, .15), rgba(17, 9, 4, .68)),
      linear-gradient(135deg, #08141b 0%, #21130b 40%, #3b2110 70%, #0b1115 100%) !important;
  }

  .match-panel.normal-okey.table-theme-classic > .nok-presentation::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .78;
    background:
      linear-gradient(90deg, transparent 0 14%, rgba(11, 7, 4, .48) 14.2% 15.1%, transparent 15.3% 77%, rgba(9, 6, 4, .5) 77.2% 78.1%, transparent 78.3%),
      radial-gradient(ellipse at 13% 38%, rgba(251, 190, 96, .32), transparent 3.5%),
      radial-gradient(ellipse at 82% 31%, rgba(248, 191, 105, .32), transparent 4%),
      linear-gradient(90deg, rgba(12, 7, 4, .76) 0 5%, transparent 5% 94%, rgba(9, 6, 4, .7) 94% 100%),
      repeating-linear-gradient(90deg, rgba(255, 210, 128, .035) 0 1px, transparent 1px 86px);
  }

  .match-panel.normal-okey.table-theme-classic > .nok-presentation::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 86px;
    z-index: -1;
    pointer-events: none;
    border-top: 1px solid rgba(227, 164, 84, .38);
    background:
      linear-gradient(180deg, rgba(33, 17, 8, .2), rgba(9, 6, 5, .9)),
      repeating-linear-gradient(3deg, rgba(215, 146, 65, .12) 0 2px, transparent 2px 13px),
      linear-gradient(90deg, #271409, #6e3d1a 32%, #3d200f 68%, #1c100a);
  }

  .match-panel.normal-okey.table-theme-classic .nok-logo-card {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 268px;
    height: 78px;
    min-width: 0;
    box-sizing: border-box;
    padding: 13px 20px;
    border: 1px solid rgba(224, 164, 70, .78);
    border-radius: 11px;
    background: linear-gradient(145deg, rgba(5, 22, 29, .97), rgba(3, 12, 17, .98));
    box-shadow: 0 13px 24px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 234, 174, .16);
  }
  .match-panel.normal-okey.table-theme-classic .nok-logo-card::before {
    content: "♛";
    display: block;
    height: 17px;
    color: var(--classic-gold);
    font-size: 22px;
    line-height: 17px;
    text-align: center;
  }
  .match-panel.normal-okey.table-theme-classic .nok-logo-card strong {
    display: block;
    color: #ffe5a9;
    font-size: clamp(18px, 1.85vw, 28px);
    letter-spacing: .14em;
    line-height: 1.05;
    text-align: center;
  }
  .match-panel.normal-okey.table-theme-classic .nok-logo-card span {
    display: block;
    margin-top: 3px;
    color: #fff2cf;
    font-size: clamp(9px, .72vw, 12px);
    letter-spacing: .2em;
    line-height: 1;
    text-align: center;
  }

  .match-panel.normal-okey.table-theme-classic .nok-top-controls {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: calc(100% - 280px);
    min-width: 0;
    margin-left: 280px;
    padding: 0;
    gap: 8px;
    align-items: center;
    justify-content: stretch;
    flex-wrap: nowrap;
    overflow: visible;
  }
  .match-panel.normal-okey.table-theme-classic .nok-top-controls button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    padding: 7px 10px;
    border: 1px solid rgba(43, 146, 185, .58);
    border-radius: 8px;
    color: #f4f6f2;
    background: linear-gradient(145deg, rgba(8, 59, 80, .96), rgba(4, 27, 40, .98));
    box-shadow: 0 9px 17px rgba(0, 0, 0, .3), inset 0 1px rgba(193, 235, 246, .13);
    font-size: clamp(9px, .72vw, 12px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .match-panel.normal-okey.table-theme-classic .nok-top-controls button:first-child {
    border-color: rgba(236, 176, 73, .76);
    background: linear-gradient(145deg, #79532a, #3e2616);
  }

  .match-panel.normal-okey.table-theme-classic .nok-left-column {
    position: absolute !important;
    top: 88px;
    left: 10px;
    width: 265px;
    margin: 0;
    z-index: 9;
  }
  .match-panel.normal-okey.table-theme-classic .nok-info-panel {
    width: 100%;
    min-height: 182px;
    box-sizing: border-box;
    padding: 16px;
    border: 1px solid rgba(223, 170, 82, .6);
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(7, 30, 39, .96), rgba(3, 16, 22, .98));
    box-shadow: 0 13px 27px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 239, 178, .12);
  }
  .match-panel.normal-okey.table-theme-classic .nok-info-heading {
    margin-bottom: 12px;
    color: #ffe1a0;
    font-size: 14px;
  }
  .match-panel.normal-okey.table-theme-classic .nok-info-panel dl {
    gap: 8px;
  }
  .match-panel.normal-okey.table-theme-classic .nok-info-panel dt {
    color: #c1d3ce;
    font-size: 11px;
  }
  .match-panel.normal-okey.table-theme-classic .nok-info-panel dd {
    color: #fff8e7;
    font-size: 12px;
  }

  .match-panel.normal-okey.table-theme-classic .nok-statusbar {
    top: 90px;
    left: 290px;
    right: calc(clamp(300px, 24.5vw, 378px) + 20px);
    min-width: 0;
    padding: 5px 9px;
    border-color: rgba(221, 173, 88, .34);
    background: rgba(3, 21, 27, .76);
    z-index: 10;
  }

  .match-panel.normal-okey.table-theme-classic .nok-table-stage {
    grid-column: 1 !important;
    grid-row: 2 !important;
    min-width: 0;
    min-height: 0;
    padding: clamp(106px, 14vh, 148px) 18px 8px 108px !important;
    overflow: visible !important;
  }
  .match-panel.normal-okey.table-theme-classic .nok-table {
    width: min(100%, 1030px, calc((100dvh - 330px) * 1.56)) !important;
    max-width: 100%;
    min-height: 0;
    aspect-ratio: 1.56 / 1;
    border-width: 12px !important;
    border-radius: 8% / 14% !important;
    border-color: #77471f !important;
    background:
      radial-gradient(ellipse at 50% 30%, rgba(73, 166, 97, .22), transparent 38%),
      repeating-linear-gradient(96deg, rgba(255, 255, 255, .014) 0 1px, transparent 1px 8px),
      radial-gradient(ellipse at 50% 48%, var(--classic-felt-light) 0%, var(--classic-felt) 59%, #0a3828 100%) !important;
    box-shadow:
      0 0 0 6px var(--classic-wood-light),
      0 0 0 11px #281309,
      0 25px 45px rgba(0, 0, 0, .62),
      inset 0 0 0 2px rgba(255, 232, 171, .3),
      inset 0 -28px 42px rgba(0, 0, 0, .2) !important;
  }
  .match-panel.normal-okey.table-theme-classic .nok-table::before {
    inset: 21px;
    border-color: rgba(213, 235, 190, .28);
    border-radius: 6% / 11%;
    box-shadow: inset 0 0 42px rgba(0, 0, 0, .2);
  }

  .match-panel.normal-okey.table-theme-classic .nok-station-top { top: -132px !important; }
  .match-panel.normal-okey.table-theme-classic .nok-station-left { left: -54px !important; }
  .match-panel.normal-okey.table-theme-classic .nok-station-right { right: -54px !important; }
  .match-panel.normal-okey.table-theme-classic .nok-station-bottom { bottom: 4px !important; }
  .match-panel.normal-okey.table-theme-classic .player-seat {
    border-color: rgba(232, 180, 91, .52) !important;
    background: linear-gradient(145deg, rgba(13, 42, 46, .98), rgba(4, 20, 25, .98)) !important;
    box-shadow: 0 14px 26px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 239, 183, .12) !important;
  }
  .match-panel.normal-okey.table-theme-classic .seat-avatar {
    border-color: #edc06a;
    box-shadow: 0 0 0 3px rgba(237, 192, 106, .16), 0 7px 14px rgba(0, 0, 0, .38);
  }
  .match-panel.normal-okey.table-theme-classic .seat-identity strong { color: #fff1c9; }
  .match-panel.normal-okey.table-theme-classic .seat-identity .player-score { color: #f4c970; }
  .match-panel.normal-okey.table-theme-classic .opponent-rack {
    border-color: #b8793b;
    background: repeating-linear-gradient(90deg, #9b5e2d 0 5px, #5b3019 5px 8px);
  }

  .match-panel.normal-okey.table-theme-classic .nok-center-brand {
    top: 43% !important;
    z-index: 12 !important;
    opacity: .86 !important;
    pointer-events: none !important;
    color: #b8d8a9;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .5);
  }
  .match-panel.normal-okey.table-theme-classic .nok-center-brand .nok-crown {
    color: var(--classic-gold);
    font-size: 24px;
  }
  .match-panel.normal-okey.table-theme-classic .nok-center-brand strong {
    color: #b8d8a9;
    font-size: clamp(22px, 2.1vw, 34px);
    letter-spacing: .16em;
  }
  .match-panel.normal-okey.table-theme-classic .nok-center-brand > span:not(.nok-crown) {
    color: #b8d8a9;
    font-size: clamp(10px, .82vw, 13px);
    letter-spacing: .06em;
  }
  .match-panel.normal-okey.table-theme-classic .nok-center {
    top: 51% !important;
    z-index: 11 !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-right-column {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    align-self: start;
    height: calc(100% - 66px);
    min-height: 0;
    margin-top: 66px;
    padding: 0;
    gap: 6px;
    overflow: hidden;
    z-index: 20;
    border-color: rgba(219, 166, 79, .44);
    background: linear-gradient(180deg, rgba(4, 24, 31, .95), rgba(2, 12, 18, .98));
    box-shadow: 0 17px 32px rgba(0, 0, 0, .4), inset 0 1px rgba(255, 239, 186, .12);
  }
  .match-panel.normal-okey.table-theme-classic .nok-chat-panel {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    max-height: none;
    border-color: rgba(153, 205, 197, .22);
    background: linear-gradient(145deg, rgba(12, 47, 56, .93), rgba(3, 19, 27, .98));
  }
  .match-panel.normal-okey.table-theme-classic .chat-heading strong,
  .match-panel.normal-okey.table-theme-classic .nok-treat-panel header strong,
  .match-panel.normal-okey.table-theme-classic .nok-radio-panel header strong {
    color: #ffe0a0;
    letter-spacing: .06em;
  }
  .match-panel.normal-okey.table-theme-classic .nok-treat-panel {
    flex: 0 0 112px;
    min-height: 112px;
    padding: 11px;
  }
  .match-panel.normal-okey.table-theme-classic .nok-radio-panel {
    flex: 0 0 145px;
    min-height: 145px;
    padding: 11px;
  }
  .match-panel.normal-okey.table-theme-classic .nok-treat-options button {
    color: #f4ead3;
    background: rgba(255, 237, 182, .07);
  }

  .match-panel.normal-okey.table-theme-classic #normalOkeyDiagnosticPanel {
    top: auto !important;
    right: auto !important;
    bottom: 106px !important;
    left: 12px !important;
    width: min(225px, calc(100vw - 24px));
    max-height: 26px;
    overflow: hidden;
    z-index: 60;
  }

  .match-panel.normal-okey.table-theme-classic .nok-action-bar {
    left: 0;
    right: 0;
    bottom: -76px;
    width: min(100%, 1000px);
    margin-inline: auto;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .match-panel.normal-okey.table-theme-classic > .nok-presentation {
    grid-template-columns: minmax(0, 1fr) 270px !important;
    grid-template-rows: 70px minmax(0, 1fr) !important;
    padding: 8px 8px 68px !important;
  }
  .match-panel.normal-okey.table-theme-classic .nok-logo-card {
    width: 214px;
    height: 70px;
    padding-inline: 12px;
  }
  .match-panel.normal-okey.table-theme-classic .nok-top-controls {
    width: calc(100% - 224px);
    margin-left: 224px;
    gap: 5px;
  }
  .match-panel.normal-okey.table-theme-classic .nok-top-controls button {
    min-height: 38px;
    padding-inline: 6px;
  }
  .match-panel.normal-okey.table-theme-classic .nok-left-column {
    top: 78px;
    left: 8px;
    width: 190px;
  }
  .match-panel.normal-okey.table-theme-classic .nok-info-panel {
    min-height: 160px;
    padding: 11px;
  }
  .match-panel.normal-okey.table-theme-classic .nok-statusbar {
    top: 78px;
    left: 208px;
    right: 278px;
  }
  .match-panel.normal-okey.table-theme-classic .nok-table-stage {
    padding: clamp(92px, 12vh, 116px) 12px 6px 88px !important;
  }
  .match-panel.normal-okey.table-theme-classic .nok-table {
    width: min(100%, calc((100dvh - 300px) * 1.56)) !important;
  }
  .match-panel.normal-okey.table-theme-classic .nok-station-top { top: -118px !important; }
  .match-panel.normal-okey.table-theme-classic .nok-station-left { left: -42px !important; }
  .match-panel.normal-okey.table-theme-classic .nok-station-right { right: -42px !important; }
  .match-panel.normal-okey.table-theme-classic .nok-right-column {
    height: calc(100% - 54px);
    margin-top: 54px;
  }
  .match-panel.normal-okey.table-theme-classic .nok-treat-panel {
    flex-basis: 104px;
    min-height: 104px;
  }
  .match-panel.normal-okey.table-theme-classic .nok-radio-panel {
    flex-basis: 104px;
    min-height: 104px;
  }
}

/* Stage 17: browser-corrected Classic master.  The main scene owns one
   column and the social stack owns the other; the test diagnostic is a
   compact optional overlay instead of a competing right-side panel. */
@media (min-width: 901px) {
  .match-panel.normal-okey.table-theme-classic > .nok-presentation {
    grid-template-columns: minmax(0, 1fr) clamp(296px, 24vw, 360px) !important;
    grid-template-rows: 96px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 12px 14px 82px !important;
    overflow: hidden !important;
    background:
      radial-gradient(ellipse at 37% 45%, rgba(63, 145, 94, .16), transparent 39%),
      radial-gradient(circle at 7% 91%, rgba(157, 100, 42, .14), transparent 28%),
      linear-gradient(135deg, #07130f 0%, #102e23 48%, #06100c 100%) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-logo-card {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 190px;
    min-width: 0;
    z-index: 2;
  }
  .match-panel.normal-okey.table-theme-classic .nok-top-controls {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: calc(100% - 202px);
    min-width: 0;
    margin-left: 202px;
    align-self: center;
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    gap: 7px;
    overflow: visible;
    z-index: 2;
  }
  .match-panel.normal-okey.table-theme-classic .nok-top-controls button {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 7px;
    font-size: clamp(9px, .72vw, 11px);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .match-panel.normal-okey.table-theme-classic .nok-left-column {
    position: absolute !important;
    top: 120px;
    left: 14px;
    width: 180px;
    margin: 0;
    z-index: 3;
  }
  .match-panel.normal-okey.table-theme-classic .nok-info-panel {
    width: 100%;
    min-height: 0;
  }
  .match-panel.normal-okey.table-theme-classic .nok-statusbar {
    top: 70px;
    left: 222px;
    right: calc(clamp(296px, 24vw, 360px) + 26px);
    min-width: 0;
    flex-wrap: wrap;
    overflow: visible;
    z-index: 4;
  }

  .match-panel.normal-okey.table-theme-classic .nok-table-stage {
    grid-column: 1 !important;
    grid-row: 2 !important;
    min-width: 0;
    min-height: 0;
    padding: 26px 18px 6px 204px !important;
    gap: 12px !important;
    overflow: visible !important;
  }
  .match-panel.normal-okey.table-theme-classic .nok-table {
    width: min(100%, 1120px, calc((100dvh - 420px) * 1.74)) !important;
  }
  .match-panel.normal-okey.table-theme-classic .nok-station-left { left: -10px !important; }
  .match-panel.normal-okey.table-theme-classic .nok-station-right { right: -10px !important; }
  .match-panel.normal-okey.table-theme-classic .nok-center-brand {
    top: 27% !important;
    z-index: 8 !important;
    opacity: .92 !important;
    pointer-events: none !important;
  }
  .match-panel.normal-okey.table-theme-classic .nok-center-brand .nok-crown,
  .match-panel.normal-okey.table-theme-classic .nok-center-brand strong,
  .match-panel.normal-okey.table-theme-classic .nok-center-brand > span:not(.nok-crown) {
    visibility: visible;
    opacity: 1;
  }
  .match-panel.normal-okey.table-theme-classic .nok-center {
    top: 54% !important;
    z-index: 7 !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-right-column {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    min-width: 0;
    min-height: 0;
    height: auto;
    padding: 0;
    gap: 10px;
    overflow: hidden;
    z-index: 6;
  }
  .match-panel.normal-okey.table-theme-classic .nok-chat-panel {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
  }
  .match-panel.normal-okey.table-theme-classic #chatMessages {
    min-height: 0;
    overflow-y: auto;
  }
  .match-panel.normal-okey.table-theme-classic .nok-treat-panel {
    flex: 0 0 112px;
    min-height: 112px;
  }
  .match-panel.normal-okey.table-theme-classic .nok-radio-panel {
    flex: 0 0 88px;
    min-height: 88px;
  }
}

/* Test-only diagnostics remain available without covering the social stack.
   Hovering the small badge expands the existing data panel for verification. */
body:has(#matchPanel.normal-okey.table-theme-classic:not(.hidden)) #normalOkeyDiagnosticPanel {
  top: auto !important;
  right: auto !important;
  bottom: 150px !important;
  left: 14px !important;
  width: min(220px, calc(100vw - 28px));
  max-height: 28px;
  overflow: hidden;
  padding: 6px 9px;
  pointer-events: auto;
  z-index: 30;
}
body:has(#matchPanel.normal-okey.table-theme-classic:not(.hidden)) #normalOkeyDiagnosticPanel > strong {
  margin: 0;
  font-size: 9px;
  line-height: 1.4;
}
body:has(#matchPanel.normal-okey.table-theme-classic:not(.hidden)) #normalOkeyDiagnosticPanel:hover,
body:has(#matchPanel.normal-okey.table-theme-classic:not(.hidden)) #normalOkeyDiagnosticPanel:focus-within {
  max-height: min(38vh, 360px);
  overflow: auto;
}

@media (min-width: 901px) and (max-width: 1180px) {
  .match-panel.normal-okey.table-theme-classic > .nok-presentation {
    grid-template-columns: minmax(0, 1fr) 270px !important;
    grid-template-rows: 82px minmax(0, 1fr) !important;
    padding: 9px 10px 108px !important;
  }
  .match-panel.normal-okey.table-theme-classic .nok-logo-card { width: 172px; }
  .match-panel.normal-okey.table-theme-classic .nok-top-controls { width: calc(100% - 184px); margin-left: 184px; gap: 5px; }
  .match-panel.normal-okey.table-theme-classic .nok-left-column { top: 104px; left: 10px; width: 164px; }
  .match-panel.normal-okey.table-theme-classic .nok-statusbar { top: 58px; left: 194px; right: 280px; }
  .match-panel.normal-okey.table-theme-classic .nok-table-stage { padding: 26px 14px 6px 184px !important; }
  .match-panel.normal-okey.table-theme-classic .nok-table { width: min(100%, calc((100dvh - 400px) * 1.68)) !important; }
}

/* Stage 19: Classic master effective-cascade repair.  Older presentation
   experiments intentionally remain in the file for their contracts, but
   this final scoped layer must be the last desktop authority. */
@media (min-width: 901px) {
  body:has(#matchPanel.normal-okey.table-theme-classic:not(.hidden)) {
    overflow-x: hidden;
    overflow-y: hidden;
  }

  .match-panel.normal-okey.table-theme-classic > .nok-presentation {
    display: grid !important;
    position: relative !important;
    isolation: isolate;
    grid-template-columns: minmax(0, 1fr) clamp(286px, 24vw, 360px) !important;
    grid-template-rows: 82px minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    height: 100dvh !important;
    min-width: 0 !important;
    min-height: 620px !important;
    box-sizing: border-box;
    padding: 10px 10px 74px !important;
    overflow: hidden !important;
    transform: none !important;
    background:
      radial-gradient(ellipse at 33% 42%, rgba(65, 143, 87, .18), transparent 38%),
      radial-gradient(circle at 7% 92%, rgba(163, 101, 40, .17), transparent 30%),
      linear-gradient(135deg, #07130f 0%, #123126 48%, #06100c 100%) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-topbar,
  .match-panel.normal-okey.table-theme-classic .nok-shell,
  .match-panel.normal-okey.table-theme-classic .nok-center-column,
  .match-panel.normal-okey.table-theme-classic .normal-okey-main,
  .match-panel.normal-okey.table-theme-classic .nok-table-area {
    display: contents !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-logo-card {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: start !important;
    width: 202px !important;
    min-width: 0 !important;
    min-height: 62px !important;
    box-sizing: border-box;
    padding: 10px 13px !important;
    border-radius: 13px !important;
    z-index: 25 !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-top-controls {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: calc(100% - 214px) !important;
    min-width: 0 !important;
    margin-left: 214px !important;
    align-self: center !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 6px !important;
    overflow: hidden !important;
    z-index: 25 !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-top-controls button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 6px 7px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: clamp(9px, .72vw, 11px) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-left-column {
    position: absolute !important;
    top: 86px !important;
    left: 10px !important;
    width: 190px !important;
    min-width: 0 !important;
    margin: 0 !important;
    z-index: 24 !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-statusbar {
    position: absolute !important;
    top: 86px !important;
    left: 210px !important;
    right: calc(clamp(286px, 24vw, 360px) + 20px) !important;
    min-width: 0 !important;
    min-height: 28px !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    z-index: 24 !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-table-stage {
    grid-column: 1 !important;
    grid-row: 2 !important;
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: clamp(58px, 7.2vh, 78px) 18px 8px 104px !important;
    gap: 12px !important;
    overflow: visible !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-table {
    position: relative !important;
    flex: 0 0 auto !important;
    width: min(100%, 1030px, calc((100dvh - 470px) * 1.56)) !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    aspect-ratio: 1.56 / 1 !important;
    margin: 0 !important;
    transform: none !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-station-top { top: -44px !important; }
  .match-panel.normal-okey.table-theme-classic .nok-station-bottom { bottom: 8px !important; }
  .match-panel.normal-okey.table-theme-classic .nok-station-left { left: -10px !important; }
  .match-panel.normal-okey.table-theme-classic .nok-station-right { right: -10px !important; }

  .match-panel.normal-okey.table-theme-classic .nok-own-station {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex: 0 0 132px !important;
    width: min(840px, calc(100% - 34px)) !important;
    height: 132px !important;
    min-width: 0 !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 22 !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    flex: 0 0 48px !important;
    width: min(840px, calc(100% - 34px)) !important;
    height: 48px !important;
    min-width: 0 !important;
    margin: 0 !important;
    gap: 7px !important;
    z-index: 35 !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions button {
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 5px 6px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: clamp(9px, .72vw, 11px) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-center-brand {
    top: 42% !important;
    left: 50% !important;
    display: grid !important;
    visibility: visible !important;
    opacity: .94 !important;
    transform: translate(-50%, -50%) !important;
    z-index: 12 !important;
    color: #d6e2b7 !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .58) !important;
    pointer-events: none !important;
  }
  .match-panel.normal-okey.table-theme-classic .nok-center-brand .nok-crown,
  .match-panel.normal-okey.table-theme-classic .nok-center-brand strong,
  .match-panel.normal-okey.table-theme-classic .nok-center-brand > span:not(.nok-crown) {
    visibility: visible !important;
    opacity: 1 !important;
  }
  .match-panel.normal-okey.table-theme-classic .nok-center-brand .nok-crown {
    color: #f2cf7b !important;
    font-size: 24px !important;
  }
  .match-panel.normal-okey.table-theme-classic .nok-center-brand strong {
    color: #e2edc6 !important;
    font-size: clamp(22px, 2.1vw, 34px) !important;
  }
  .match-panel.normal-okey.table-theme-classic .nok-center-brand > span:not(.nok-crown) {
    color: #d6e2b7 !important;
    font-size: clamp(10px, .82vw, 13px) !important;
  }
  .match-panel.normal-okey.table-theme-classic .nok-center {
    top: 56% !important;
    z-index: 11 !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-right-column {
    position: relative !important;
    inset: auto !important;
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 62px 0 0 !important;
    padding: 0 !important;
    gap: 8px !important;
    overflow: hidden !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 20 !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-chat-panel {
    display: flex !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
  }
  .match-panel.normal-okey.table-theme-classic #chatMessages {
    min-height: 0 !important;
    overflow-y: auto !important;
  }
  .match-panel.normal-okey.table-theme-classic .nok-treat-panel {
    flex: 0 0 112px !important;
    min-height: 112px !important;
  }
  .match-panel.normal-okey.table-theme-classic .nok-radio-panel {
    flex: 0 0 145px !important;
    min-height: 145px !important;
  }

  /* The real gameplay toolbar is .nok-live-actions above.  Keep this older
     presentation-only duplicate in the DOM for compatibility, but do not
     let it cover the rack or the social column. */
  .match-panel.normal-okey.table-theme-classic .nok-action-bar {
    display: none !important;
  }
}

/* Compact desktop still keeps the social column in the viewport. */
@media (min-width: 901px) and (max-width: 1300px) {
  .match-panel.normal-okey.table-theme-classic > .nok-presentation {
    grid-template-columns: minmax(0, 1fr) clamp(276px, 24vw, 310px) !important;
    padding-inline: 8px !important;
  }
  .match-panel.normal-okey.table-theme-classic .nok-logo-card {
    width: 182px !important;
  }
  .match-panel.normal-okey.table-theme-classic .nok-top-controls {
    width: calc(100% - 194px) !important;
    margin-left: 194px !important;
    gap: 4px !important;
  }
  .match-panel.normal-okey.table-theme-classic .nok-left-column {
    left: 8px !important;
    width: 178px !important;
  }
  .match-panel.normal-okey.table-theme-classic .nok-statusbar {
    left: 196px !important;
    right: calc(clamp(276px, 24vw, 310px) + 16px) !important;
  }
  .match-panel.normal-okey.table-theme-classic .nok-table-stage {
    padding-left: 92px !important;
    padding-right: 12px !important;
  }
  .match-panel.normal-okey.table-theme-classic .nok-own-station,
  .match-panel.normal-okey.table-theme-classic .nok-live-actions {
    width: min(760px, calc(100% - 20px)) !important;
  }
}

/* Diagnostic is test-only and fixed out of the table grid.  It cannot take
   the social column's grid slot or push any gameplay surface. */
body:has(#matchPanel.normal-okey.table-theme-classic:not(.hidden)) #normalOkeyDiagnosticPanel {
  top: auto !important;
  right: auto !important;
  bottom: 76px !important;
  left: 12px !important;
  width: min(220px, calc(100vw - 24px)) !important;
  max-height: 24px !important;
  overflow: hidden !important;
  padding: 5px 8px !important;
  pointer-events: auto !important;
  z-index: 10000 !important;
}
body:has(#matchPanel.normal-okey.table-theme-classic:not(.hidden)) #normalOkeyDiagnosticPanel:hover,
body:has(#matchPanel.normal-okey.table-theme-classic:not(.hidden)) #normalOkeyDiagnosticPanel:focus-within {
  max-height: min(38vh, 360px) !important;
  overflow: auto !important;
}

/* Stage 21: Classic master reference geometry.  These values are derived
   from the 1536x1024 approved PNG; the PNG itself is never painted. */
@media (min-width: 901px) {
  .match-panel.normal-okey.table-theme-classic > .nok-presentation {
    --classic-reference-width: 1536;
    --classic-reference-height: 1024;
    --classic-page-pad-x: clamp(8px, .65vw, 10px);
    --classic-page-pad-y: clamp(8px, .98vh, 10px);
    --classic-layout-gap: clamp(6px, .65vw, 10px);
    --classic-logo-width: clamp(202px, 17.38vw, 267px);
    --classic-stage-left: clamp(92px, 7.55vw, 116px);
    --classic-rack-left: clamp(190px, 15.10vw, 232px);
    --classic-action-left: clamp(124px, 9.77vw, 150px);
    --classic-social-width: clamp(276px, 23.83vw, 366px);
    display: grid !important;
    position: relative !important;
    grid-template-columns: minmax(0, 1fr) var(--classic-social-width) !important;
    grid-template-rows: clamp(72px, 9.77vh, 100px) minmax(0, 1fr) !important;
    gap: var(--classic-layout-gap) !important;
    width: 100% !important;
    height: 100dvh !important;
    min-width: 0 !important;
    min-height: 620px !important;
    box-sizing: border-box !important;
    padding: var(--classic-page-pad-y) var(--classic-page-pad-x) 0 !important;
    overflow: hidden !important;
    transform: none !important;
    background:
      radial-gradient(ellipse at 29% 38%, rgba(123, 75, 35, .22), transparent 37%),
      radial-gradient(circle at 7% 91%, rgba(177, 111, 44, .17), transparent 31%),
      linear-gradient(135deg, #120d09 0%, #203d2b 48%, #07110d 100%) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-logo-card {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: start !important;
    width: var(--classic-logo-width) !important;
    min-width: 0 !important;
    min-height: clamp(75px, 9.77vh, 100px) !important;
    box-sizing: border-box !important;
    padding: clamp(9px, 1.3vh, 13px) !important;
    text-align: center !important;
    z-index: 25 !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-top-controls {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: calc(100% - var(--classic-logo-width) - clamp(10px, 1.11vw, 17px)) !important;
    min-width: 0 !important;
    margin-left: calc(var(--classic-logo-width) + clamp(10px, 1.11vw, 17px)) !important;
    align-self: center !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: clamp(4px, .39vw, 6px) !important;
    overflow: visible !important;
    z-index: 25 !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-top-controls button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: clamp(34px, 5.37vh, 55px) !important;
    padding-inline: clamp(5px, 1.17vw, 18px) !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    font-size: clamp(9px, 1.17vw, 18px) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-left-column {
    position: absolute !important;
    top: clamp(88px, 11.52vh, 118px) !important;
    left: var(--classic-page-pad-x) !important;
    width: clamp(190px, 17.25vw, 265px) !important;
    min-width: 0 !important;
    margin: 0 !important;
    z-index: 24 !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-table-stage {
    grid-column: 1 !important;
    grid-row: 2 !important;
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: clamp(96px, 12.60vh, 129px) 0 0 var(--classic-stage-left) !important;
    gap: 0 !important;
    overflow: visible !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-table {
    position: relative !important;
    flex: 0 0 auto !important;
    width: min(1032px, 67.19vw, calc(100% + 8px)) !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    aspect-ratio: 1.87 / 1 !important;
    margin: 0 !important;
    transform: none !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-station-top {
    top: clamp(-173px, -11.26vw, -118px) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-station-left {
    left: clamp(52px, 5.08vw, 78px) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-station-right {
    right: clamp(-25px, -1.63vw, -18px) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-station-bottom {
    bottom: clamp(84px, 10.94vh, 112px) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-own-station {
    position: absolute !important;
    left: var(--classic-rack-left) !important;
    top: clamp(420px, 54.80vh, 592px) !important;
    bottom: auto !important;
    width: min(843px, max(752px, 54.80vw)) !important;
    height: 132px !important;
    min-width: 0 !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 22 !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions {
    position: absolute !important;
    left: var(--classic-action-left) !important;
    top: clamp(560px, 75.70vh, 775px) !important;
    width: min(998px, calc(100% - var(--classic-action-left) + 8px)) !important;
    height: clamp(48px, 8.20vh, 84px) !important;
    min-width: 0 !important;
    margin: 0 !important;
    gap: clamp(5px, .46vw, 7px) !important;
    z-index: 35 !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-center-brand {
    top: 51.8% !important;
    left: 50% !important;
    display: grid !important;
    max-width: 36% !important;
    visibility: visible !important;
    opacity: .72 !important;
    transform: translate(-50%, -50%) !important;
    z-index: 3 !important;
    pointer-events: none !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-center {
    top: 31% !important;
    z-index: 5 !important;
  }

  .match-panel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column {
    position: relative !important;
    inset: auto !important;
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    align-self: start !important;
    display: flex !important;
    flex-direction: column !important;
    width: auto !important;
    height: clamp(620px, 85.84vh, 879px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: clamp(50px, 6.45vh, 66px) 0 0 !important;
    padding: 0 !important;
    gap: clamp(2px, .29vh, 3px) !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 20 !important;
  }

  .match-panel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-chat-panel {
    display: flex !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  .match-panel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-treat-panel {
    flex: 0 0 clamp(96px, 11.82vh, 121px) !important;
    min-height: clamp(96px, 11.82vh, 121px) !important;
  }

  .match-panel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-radio-panel {
    flex: 0 0 clamp(124px, 15.33vh, 157px) !important;
    min-height: clamp(124px, 15.33vh, 157px) !important;
  }

  .match-panel.normal-okey.table-theme-classic #okeySmartAssistPanel {
    position: absolute !important;
    left: var(--classic-stage-left) !important;
    right: var(--classic-social-width) !important;
    bottom: clamp(8px, 1.17vh, 12px) !important;
    width: auto !important;
    margin: 0 !important;
    z-index: 38 !important;
    pointer-events: none !important;
  }
}

@media (min-width: 901px) and (max-width: 1300px) {
  .match-panel.normal-okey.table-theme-classic > .nok-presentation {
    --classic-stage-left: clamp(92px, 7.55vw, 104px);
    --classic-rack-left: clamp(190px, 15.10vw, 207px);
    --classic-action-left: clamp(124px, 9.77vw, 134px);
  }
}

/* Stage 20: make the approved Classic social stack a real presentation-grid
   child.  The panels are intentionally outside .nok-shell so they do not
   depend on a nested display: contents chain to become visible grid items. */
@media (min-width: 901px) {
  .match-panel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column {
    position: relative !important;
    inset: auto !important;
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    display: flex !important;
    flex-direction: column !important;
    align-self: stretch !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 62px 0 0 !important;
    padding: 0 !important;
    gap: 8px !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 20 !important;
  }

  .match-panel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-chat-panel {
    display: flex !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  .match-panel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #chatMessages {
    min-height: 0 !important;
    overflow-y: auto !important;
  }

  .match-panel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-treat-panel {
    flex: 0 0 112px !important;
    min-height: 112px !important;
  }

  .match-panel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-radio-panel {
    flex: 0 0 145px !important;
    min-height: 145px !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-center-brand {
    top: 68% !important;
    z-index: 2 !important;
    opacity: .76 !important;
    max-width: 48% !important;
    pointer-events: none !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-top-controls {
    overflow: visible !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-top-controls button {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }
}

/* Stage 22: reference-coordinate viewport fit.  The approved PNG places the
   human rack at y=.665h with h=.208h and the action row at y=.874h.  Anchor
   those outer layout boxes to the viewport so the live 15x2 rack remains
   visible at the tested desktop heights; tile/rack geometry is untouched. */
@media (min-width: 901px) {
  .match-panel.normal-okey.table-theme-classic > .nok-presentation {
    --classic-reference-rack-top: 0.665;
    --classic-reference-rack-height: 0.208;
    --classic-reference-action-top: 0.874;
    --classic-toolbar-gap: clamp(7px, .65vw, 10px);
    --classic-rack-height: clamp(132px, 20.80vh, 213px);
    --classic-rack-bottom: clamp(78px, 12.60vh, 136px);
    --classic-action-height: clamp(48px, 8.20vh, 84px);
    --classic-action-bottom: clamp(32px, 4.40vh, 45px);
    grid-template-columns: minmax(0, 1fr) var(--classic-social-width) !important;
    grid-template-rows: clamp(72px, 9.77vh, 100px) minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-top-controls {
    width: calc(100% - var(--classic-logo-width) - var(--classic-toolbar-gap)) !important;
    margin-left: calc(var(--classic-logo-width) + var(--classic-toolbar-gap)) !important;
    gap: clamp(2px, .30vw, 5px) !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-top-controls button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: clamp(30px, 4.30vh, 44px) !important;
    padding-inline: clamp(3px, .40vw, 6px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: clamp(8px, .72vw, 11px) !important;
    line-height: 1.1 !important;
  }

  /* Keep all six values readable in a small status card below the toolbar;
     it no longer occupies the table's vertical composition. */
  .match-panel.normal-okey.table-theme-classic .nok-left-column {
    top: calc(var(--classic-page-pad-y) + clamp(72px, 9.77vh, 100px) + var(--classic-layout-gap)) !important;
    left: var(--classic-page-pad-x) !important;
    width: clamp(154px, 12vw, 184px) !important;
    min-width: 0 !important;
    z-index: 24 !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-info-panel {
    width: 100% !important;
    min-height: 0 !important;
    padding: clamp(6px, .78vh, 8px) clamp(7px, .65vw, 10px) !important;
    border-radius: 9px !important;
    box-sizing: border-box !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-info-heading {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 5px !important;
    margin-bottom: clamp(3px, .45vh, 5px) !important;
    font-size: clamp(8px, .65vw, 10px) !important;
    line-height: 1.1 !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-info-panel dl {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(2px, .35vh, 4px) clamp(4px, .45vw, 7px) !important;
    margin: 0 !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-info-panel dl > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-info-panel dt {
    color: #bcd0bd !important;
    font-size: clamp(7px, .52vw, 8px) !important;
    line-height: 1 !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-info-panel dd {
    max-width: 100% !important;
    overflow: hidden !important;
    color: #fff8e8 !important;
    font-size: clamp(8px, .60vw, 9px) !important;
    line-height: 1.05 !important;
    text-align: left !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* The outer station follows the reference rack bbox; its child rack
     retains the existing tile dimensions and drag/drop contract. */
  .match-panel.normal-okey.table-theme-classic .nok-own-station {
    top: auto !important;
    right: auto !important;
    bottom: var(--classic-rack-bottom) !important;
    left: var(--classic-rack-left) !important;
    width: min(843px, max(752px, 54.80vw)) !important;
    height: var(--classic-rack-height) !important;
    min-height: var(--classic-rack-height) !important;
    overflow: visible !important;
    z-index: 22 !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions {
    top: auto !important;
    right: auto !important;
    bottom: var(--classic-action-bottom) !important;
    left: var(--classic-action-left) !important;
    width: min(998px, calc(100% - var(--classic-action-left) + 8px)) !important;
    height: var(--classic-action-height) !important;
    min-height: var(--classic-action-height) !important;
    overflow: visible !important;
    z-index: 35 !important;
  }

  /* Restore the measured center branding position after the stale Stage 20
     override, and keep the bottom player in its own lower table band. */
  .match-panel.normal-okey.table-theme-classic .nok-center-brand {
    top: 51.8% !important;
    left: 50% !important;
    width: min(374px, 36%) !important;
    max-width: min(374px, 36%) !important;
    visibility: visible !important;
    opacity: .84 !important;
    z-index: 2 !important;
    pointer-events: none !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-station-bottom {
    left: 50% !important;
    right: auto !important;
    bottom: clamp(78px, 10.94vh, 112px) !important;
    transform: translateX(-50%) !important;
    width: clamp(190px, 15.23vw, 234px) !important;
    z-index: 7 !important;
  }

  /* Reassert the calibrated social stack after the older Stage 20 block. */
  .match-panel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column {
    align-self: start !important;
    height: clamp(620px, 85.84vh, 879px) !important;
    margin: clamp(50px, 6.45vh, 66px) 0 0 !important;
    gap: clamp(2px, .29vh, 3px) !important;
    overflow: hidden !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .match-panel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-chat-panel {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
  }

  .match-panel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-treat-panel {
    flex: 0 0 clamp(96px, 11.82vh, 121px) !important;
    min-height: clamp(96px, 11.82vh, 121px) !important;
  }

  .match-panel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-radio-panel {
    flex: 0 0 clamp(124px, 15.33vh, 157px) !important;
    min-height: clamp(124px, 15.33vh, 157px) !important;
  }
}

@media (min-width: 901px) and (max-width: 1300px) {
  .match-panel.normal-okey.table-theme-classic > .nok-presentation {
    --classic-logo-width: clamp(172px, 14.50vw, 182px);
    --classic-stage-left: clamp(92px, 7.55vw, 104px);
    --classic-rack-left: clamp(190px, 15.10vw, 207px);
    --classic-action-left: clamp(124px, 9.77vw, 134px);
  }

  .match-panel.normal-okey.table-theme-classic .nok-logo-card {
    width: var(--classic-logo-width) !important;
  }
}

/* Stage 23: legacy cascade correction retained for compatibility.  The real
   DOM has .nok-own-station and .nok-live-actions as siblings under
   .nok-table; Stage 24 below is the final table-local geometry authority. */
@media (min-width: 901px) {
  .match-panel.normal-okey.table-theme-classic .nok-own-station {
    bottom: var(--classic-rack-bottom) !important;
    height: var(--classic-rack-height) !important;
    min-height: var(--classic-rack-height) !important;
    overflow: visible !important;
    z-index: 2 !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions {
    position: absolute !important;
    top: 20.90vh !important;
    right: auto !important;
    bottom: auto !important;
    left: calc(var(--classic-action-left) - var(--classic-rack-left)) !important;
    width: min(998px, calc(100vw - var(--classic-action-left) - var(--classic-page-pad-x) - var(--classic-social-width) - var(--classic-layout-gap))) !important;
    height: var(--classic-action-height) !important;
    min-height: var(--classic-action-height) !important;
    overflow: visible !important;
    z-index: 35 !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-center-brand {
    top: 51.8% !important;
    width: min(374px, 36%) !important;
    max-width: min(374px, 36%) !important;
    visibility: visible !important;
    opacity: .84 !important;
    z-index: 6 !important;
    pointer-events: none !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-station-bottom {
    left: 50% !important;
    right: auto !important;
    bottom: clamp(78px, 10.94vh, 112px) !important;
    transform: translateX(-50%) !important;
    width: clamp(190px, 15.23vw, 234px) !important;
    z-index: 7 !important;
  }
}

/* Stage 26: release the Classic match from the dashboard's lobby grid.
   #matchPanel is a direct child of .dashboard-grid, not #dashboardView.
   The old #dashboardView:has(> #matchPanel...) rules never matched and left
   the match in the first 1.25fr dashboard column, so the presentation's
   right column was laid out inside a narrowed outer cell while the viewport
   retained a large empty column.  Keep the live DOM intact and make the
   active match use the viewport containing block before its existing
   two-column presentation lays out. */
@media (min-width: 901px) {
  body:has(#matchPanel.normal-okey:not(.hidden)) #dashboardView {
    width: 100vw !important;
    max-width: none !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body:has(#matchPanel.normal-okey:not(.hidden)) #dashboardView > .dashboard-grid {
    display: contents !important;
  }

  body:has(#matchPanel.normal-okey:not(.hidden)) #dashboardView > .dashboard-grid > #matchPanel.normal-okey:not(.hidden) {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
}

/* Stage 24: table-local cluster geometry.  The approved PNG coordinates are
   normalized against the actual .nok-table containing block.  The live DOM
   keeps the own station, live actions, bottom player and center play area as
   separate siblings/branches; no gameplay or tile geometry is changed. */
@media (min-width: 901px) {
  .match-panel.normal-okey.table-theme-classic > .nok-presentation {
    --classic-rack-local-left: clamp(96px, 7.55vw, 116px);
    --classic-action-local-left: clamp(28px, 2.21vw, 34px);
  }

  .match-panel.normal-okey.table-theme-classic .nok-own-station {
    position: absolute !important;
    top: 78.26% !important;
    right: auto !important;
    bottom: auto !important;
    left: var(--classic-rack-local-left) !important;
    width: min(843px, max(752px, 54.80vw)) !important;
    height: var(--classic-rack-height) !important;
    min-height: var(--classic-rack-height) !important;
    overflow: visible !important;
    z-index: 22 !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions {
    position: absolute !important;
    top: calc(78.26% + var(--classic-rack-height)) !important;
    right: auto !important;
    bottom: auto !important;
    left: var(--classic-action-local-left) !important;
    width: min(998px, calc(100% - var(--classic-action-local-left))) !important;
    height: var(--classic-action-height) !important;
    min-height: var(--classic-action-height) !important;
    overflow: visible !important;
    z-index: 35 !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-center-brand {
    top: 51.8% !important;
    left: 50% !important;
    width: min(374px, 36%) !important;
    max-width: min(374px, 36%) !important;
    visibility: visible !important;
    opacity: .84 !important;
    z-index: 6 !important;
    pointer-events: none !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-center {
    top: 31% !important;
    z-index: 5 !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-station-bottom {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: calc(78.26% - clamp(72px, 8.01vh, 82px)) !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    width: clamp(190px, 15.23vw, 234px) !important;
    z-index: 7 !important;
  }
}

/* Stage 27: explicit Classic presentation-grid placement.  The live
   layout diagnostic proved that the presentation has two tracks, but the
   social child was auto-placed into an implicit next row (y=viewport
   bottom).  Reassert only the grid coordinates on the actual table and
   social grid items; their internal layout and all visual dimensions stay
   unchanged. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation .nok-table-stage {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
  }
}

/* Tenth grid fix: keep the Classic social grid item on its actual second
   track.  The live fallback had left grid-column:auto and width:100%, which
   expanded an auto-placed item to the full 1920px implicit-row width. */
/* TENTH_GRID_FIX_SERVED=YES */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* Eleventh grid/DOM fix: valid HTML nesting keeps the social column as a
   direct child of the Classic presentation grid. */
/* ELEVENTH_GRID_FIX_SERVED=YES */

/* Stage 12: measured Classic alignment refinement.  This layer only tunes
   the existing presentation spacing and table-local controls; the Stage 11
   direct-child grid relationship and the gameplay geometry contracts remain
   authoritative. */
/* TWELFTH_VISUAL_ALIGNMENT_FIX_SERVED=YES */
@media (min-width: 901px) {
  .match-panel.normal-okey.table-theme-classic > .nok-presentation {
    --classic-stage-top-padding: clamp(72px, 9vh, 92px);
  }

  .match-panel.normal-okey.table-theme-classic .nok-table-stage {
    align-items: center !important;
    padding-top: var(--classic-stage-top-padding) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-table {
    margin-inline: auto !important;
  }

  /* Keep the existing social stack and tracks intact; only make the gaps
     visibly controlled between its already-sized panels. */
  .match-panel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column {
    gap: clamp(6px, .60vh, 8px) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    column-gap: clamp(5px, .46vw, 7px) !important;
    row-gap: 0 !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions button {
    width: auto !important;
    min-width: 0 !important;
    height: 100% !important;
    align-self: stretch !important;
  }

  /* Reserve a small, predictable band between the live action cluster and
     the Smart Assist bar without changing its content or event handling. */
  .match-panel.normal-okey.table-theme-classic #okeySmartAssistPanel {
    bottom: clamp(88px, 10vh, 108px) !important;
  }
}

@media (min-width: 901px) and (max-width: 1300px) {
  .match-panel.normal-okey.table-theme-classic > .nok-presentation {
    --classic-stage-top-padding: clamp(68px, 8.8vh, 82px);
  }
}

/* Stage 13: keep live controls and Smart Assist in separate visual bands.
   The live action row remains table-local; the assist panel remains
   presentation-local.  Only their vertical reservation and test-only helper
   placement change, so gameplay handlers and the Stage 11 grid stay intact. */
/* THIRTEENTH_BOTTOM_CONTROLS_FIX_SERVED=YES */
@media (min-width: 901px) {
  .match-panel.normal-okey.table-theme-classic .nok-live-actions {
    height: clamp(44px, 4.90vh, 52px) !important;
    min-height: clamp(44px, 4.90vh, 52px) !important;
    align-items: stretch !important;
    justify-items: stretch !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions button {
    min-height: 44px !important;
    height: 100% !important;
    align-self: stretch !important;
  }

  .match-panel.normal-okey.table-theme-classic #okeySmartAssistPanel {
    bottom: 0 !important;
    padding: 6px 10px !important;
  }

  .match-panel.normal-okey.table-theme-classic #okeySmartAssistMessage {
    line-height: 1.3 !important;
  }

  /* The test helper is visible only in test mode.  Removing it from the
     action grid prevents an implicit second row from covering live buttons;
     its fixed test-only dock does not affect production layout flow. */
  body:has(#matchPanel.normal-okey.table-theme-classic:not(.hidden)) #prepareHumanFinishTestButton {
    position: fixed !important;
    top: clamp(12px, 1.40vh, 16px) !important;
    right: 12px !important;
    bottom: auto !important;
    left: auto !important;
    width: min(220px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: start !important;
    white-space: normal !important;
    z-index: 10001 !important;
  }
}

/* Short desktop heights cannot fit a full assist message below the already
   calibrated rack/action cluster without moving the table.  Keep the same
   reserved gap by placing the assist band above the actions only at these
   compact heights; the primary 1920x945 layout stays below the actions. */
@media (min-width: 901px) and (max-height: 920px) {
  .match-panel.normal-okey.table-theme-classic #okeySmartAssistPanel {
    bottom: clamp(104px, 12vh, 112px) !important;
  }
}

/* Stage 14: make the Classic Smart Assist band observable without changing
   the table, rack, action-row, or presentation-grid geometry.  The previous
   stage positioned the panel but left the base empty-message hide rule as
   the effective visibility authority; a real suggestion could therefore be
   reported by layout assertions while the browser showed no panel. */
/* FOURTEENTH_BOTTOM_VERTICAL_FIX_SERVED=YES */
@media (min-width: 901px) {
  .match-panel.normal-okey.table-theme-classic #okeySmartAssistPanel:has(#okeySmartAssistMessage:empty) {
    display: none !important;
  }

  .match-panel.normal-okey.table-theme-classic #okeySmartAssistPanel:not(:has(#okeySmartAssistMessage:empty)) {
    display: grid !important;
    position: absolute !important;
    left: var(--classic-stage-left) !important;
    right: var(--classic-social-width) !important;
    bottom: 0 !important;
    width: auto !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: 64px !important;
    margin: 0 !important;
    padding: 4px 8px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .match-panel.normal-okey.table-theme-classic #okeySmartAssistMessage {
    line-height: 1.2 !important;
  }

  /* Test-only diagnostics remain a fixed overlay and never consume the
     bottom control band or the presentation grid's available height. */
  body:has(#matchPanel.normal-okey.table-theme-classic:not(.hidden)) #normalOkeyDiagnosticPanel {
    position: fixed !important;
    top: 12px !important;
    right: auto !important;
    bottom: auto !important;
    left: 12px !important;
    max-height: 24px !important;
    overflow: hidden !important;
  }
}

@media (min-width: 901px) and (max-height: 920px) {
  .match-panel.normal-okey.table-theme-classic #okeySmartAssistPanel:not(:has(#okeySmartAssistMessage:empty)) {
    bottom: clamp(104px, 12vh, 112px) !important;
    max-height: min(64px, calc(100vh - 12px)) !important;
  }
}

/* Layout diagnostic: test-only, query-gated, and deliberately outside layout flow. */
.layout-diagnostic-overlay {
  position:fixed !important;
  top: 6px !important;
  right: 6px !important;
  z-index: 2147483647 !important;
  display: block;
  box-sizing: border-box;
  width: min(680px, calc(100vw - 12px));
  max-height: calc(100vh - 12px);
  margin: 0 !important;
  padding: 6px !important;
  overflow: auto;
  contain: layout paint style;
  isolation: isolate;
  pointer-events: none !important;
  user-select: none;
  color: #e8f1e7;
  background: rgba(9, 22, 17, .94);
  border: 1px solid rgba(216, 176, 88, .84);
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
  font: 11px/1.08 ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.layout-diagnostic-overlay.hidden {
  display: none !important;
}

.layout-diagnostic-overlay pre {
  margin: 0;
  font: inherit;
  white-space: inherit;
}

/* Pre-game Normal Okey settings stay inside the existing information column. */
.match-panel.normal-okey .normal-okey-settings {
  margin-top: 8px;
  padding: 7px 8px;
  color: #f4ead0;
  background: rgba(18, 35, 25, .82);
  border: 1px solid rgba(212, 174, 88, .38);
  border-radius: 7px;
  font-size: 11px;
}
.match-panel.normal-okey .normal-okey-settings summary {
  cursor: pointer;
  color: #f0cf7a;
  font-weight: 700;
}
.match-panel.normal-okey .normal-okey-settings form {
  display: grid;
  gap: 6px;
  margin-top: 7px;
}
.match-panel.normal-okey .normal-okey-settings fieldset {
  display: flex;
  gap: 7px;
  min-width: 0;
  margin: 0;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, .14);
}
.match-panel.normal-okey .normal-okey-settings legend {
  padding: 0 3px;
  color: #b9c8b5;
  font-size: 9px;
}
.match-panel.normal-okey .normal-okey-settings label,
.match-panel.normal-okey .normal-okey-series-setting {
  display: flex;
  align-items: center;
  gap: 3px;
}
.match-panel.normal-okey .normal-okey-series-setting {
  justify-content: space-between;
}
.match-panel.normal-okey .normal-okey-settings select,
.match-panel.normal-okey .normal-okey-settings button {
  min-height: 27px;
  font-size: 11px;
}
.match-panel.normal-okey .normal-okey-settings-message {
  min-height: 1.1em;
  color: #d6e8d1;
}
.match-panel.normal-okey .normal-okey-settings-confirmation {
  margin-top: 8px;
  padding: 8px;
  border: 1px solid rgba(240, 207, 122, .55);
  border-radius: 6px;
  background: rgba(35, 47, 25, .72);
}
.match-panel.normal-okey .normal-okey-settings-confirmation[hidden] {
  display: none !important;
}
.match-panel.normal-okey .normal-okey-settings-confirmation p {
  margin: 0 0 6px;
  line-height: 1.35;
}
.match-panel.normal-okey .normal-okey-settings-confirmation dl {
  margin: 0 0 7px;
  display: grid;
  gap: 2px;
}
.match-panel.normal-okey .normal-okey-settings-confirmation dl div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.match-panel.normal-okey .normal-okey-settings-confirmation dt,
.match-panel.normal-okey .normal-okey-settings-confirmation dd {
  margin: 0;
}
.match-panel.normal-okey .normal-okey-settings-confirmation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.match-panel.normal-okey .normal-okey-settings-confirmation-actions button {
  min-height: 27px;
  font-size: 10px;
}

/* STAGE17D1_SETTINGS_FLOW_FIX=YES
   Keep the Classic table-information card and pre-game settings panel in
   normal flow. Earlier presentation rules positioned the information card
   over the whole left-column containing block, hiding its sibling details. */
@media (min-width: 901px) {
  .match-panel.normal-okey.table-theme-classic .nok-left-column {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-info-panel {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
  }

  .match-panel.normal-okey.table-theme-classic #normalOkeySettingsPanel {
    position: relative !important;
    display: block !important;
    z-index: 25 !important;
  }
}

/* STAGE17D4_UI_CLASSIC_RACK_FINAL_VISUAL_FIX_2_FINAL=YES
   Final cascade authority for the browser-tested Classic table.  The
   earlier visual layers remain historical contracts; this last layer is the
   only authority for the visible rack/action proportions. */
@media (min-width: 901px) {
  .match-panel.normal-okey.table-theme-classic > .nok-presentation {
    --classic-rack-width: min(720px, 47vw);
    --classic-rack-height: clamp(108px, 14.30vh, 148px);
    --classic-action-height: clamp(40px, 4.10vh, 44px);
    --classic-action-bar-to-rack-gap: clamp(6px, .65vh, 8px);
  }

  .match-panel.normal-okey.table-theme-classic .nok-own-station,
  .match-panel.normal-okey.table-theme-classic .nok-live-actions {
    right: auto !important;
    left: 50% !important;
    width: var(--classic-rack-width) !important;
    max-width: calc(100% - 24px) !important;
    transform: translateX(-50%) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-own-station {
    top: 78.26% !important;
    bottom: auto !important;
    height: var(--classic-rack-height) !important;
    min-height: var(--classic-rack-height) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions {
    top: calc(78.26% - var(--classic-action-height) - var(--classic-rack-action-gap)) !important;
    bottom: auto !important;
    display: grid !important;
    grid-auto-flow: row !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: clamp(3px, .30vw, 5px) !important;
    height: var(--classic-action-height) !important;
    min-height: var(--classic-action-height) !important;
    overflow: visible !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions:has(#okeyAutoPlayButton:not([hidden])) {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions:has(#forfeitTableButton:not([hidden])):has(#showIndicatorButton[hidden]) {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions:has(#forfeitTableButton:not([hidden])):has(#showIndicatorButton:not([hidden])) {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions button {
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 2px clamp(2px, .32vw, 5px) !important;
    border-radius: 6px !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    line-height: 1.04 !important;
    font-size: clamp(8px, .58vw, 10px) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions #okeyAutoPlayButton {
    white-space: nowrap !important;
    font-size: clamp(7px, .50vw, 9px) !important;
    letter-spacing: -.01em !important;
  }

  .match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone {
    padding: clamp(5px, .72vh, 8px) var(--classic-rack-cap) !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow:
      0 9px 16px rgba(0, 0, 0, .34),
      0 0 0 2px rgba(229, 177, 95, .22),
      inset 0 1px rgba(255, 243, 203, .55),
      inset 0 -4px 0 rgba(91, 43, 17, .20) !important;
  }

  .match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone::after {
    height: 4px !important;
    border-top-width: 1px !important;
    border-bottom-width: 1px !important;
  }

  .match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone #handTiles {
    gap: clamp(1px, .18vw, 3px) clamp(1px, .24vw, 4px) !important;
    padding: 1px 0 !important;
    background: transparent !important;
  }

  /* Two open shelf surfaces behind the unchanged 8x2 slot grid. */
  .match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone #handTiles::before {
    content: "";
    position: absolute;
    inset: 2px 0;
    z-index: 0;
    border: 1px solid rgba(105, 55, 22, .36);
    border-radius: 4px;
    background:
      linear-gradient(180deg,
        rgba(255, 239, 184, .16) 0 43%,
        rgba(105, 55, 22, .72) 43% 46%,
        rgba(240, 195, 117, .86) 46% 49%,
        rgba(255, 238, 177, .11) 49% 93%,
        rgba(105, 55, 22, .72) 93% 96%,
        rgba(240, 195, 117, .86) 96% 100%);
    box-shadow:
      inset 0 1px rgba(255, 247, 205, .42),
      inset 0 -2px 3px rgba(91, 42, 16, .16);
    pointer-events: none;
  }

  .match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone #handTiles .rack-slot {
    position: relative !important;
    z-index: 1 !important;
  }
}

@media (max-width: 900px) {
  .match-panel.normal-okey.table-theme-classic > .nok-presentation {
    --classic-rack-width: min(720px, 94vw);
    --classic-rack-height: clamp(96px, 16.50vh, 124px);
    --classic-action-height: clamp(40px, 5.00vh, 42px);
    --classic-rack-action-gap: 5px;
  }

  .match-panel.normal-okey.table-theme-classic .nok-own-station,
  .match-panel.normal-okey.table-theme-classic .nok-live-actions {
    right: auto !important;
    left: 50% !important;
    width: var(--classic-rack-width) !important;
    max-width: calc(100% - 12px) !important;
    transform: translateX(-50%) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-own-station {
    top: 78.26% !important;
    bottom: auto !important;
    height: var(--classic-rack-height) !important;
    min-height: var(--classic-rack-height) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions {
    top: calc(78.26% - var(--classic-action-height) - var(--classic-rack-action-gap)) !important;
    bottom: auto !important;
    display: grid !important;
    grid-auto-flow: row !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 3px !important;
    height: var(--classic-action-height) !important;
    min-height: var(--classic-action-height) !important;
    overflow: visible !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions:has(#okeyAutoPlayButton:not([hidden])) {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions:has(#forfeitTableButton:not([hidden])):has(#showIndicatorButton[hidden]) {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions:has(#forfeitTableButton:not([hidden])):has(#showIndicatorButton:not([hidden])) {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions button {
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 2px 1px !important;
    border-radius: 5px !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    line-height: 1.02 !important;
    font-size: clamp(6.5px, 1.65vw, 9px) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions #okeyAutoPlayButton {
    white-space: nowrap !important;
    font-size: clamp(6px, 1.42vw, 8px) !important;
  }
}

/* STAGE17D4_UI_CLASSIC_RACK_FINAL_VISUAL_FIX_2=YES
   Browser visual correction: keep the approved min(720px, 47vw) cluster,
   distribute only the controls that are actually visible, and expose two
   distinct open tile shelves on the existing 8x2 rack.  The live rack DOM,
   tile handlers, drag/drop contract, and table geometry remain unchanged. */
@media (min-width: 901px) {
  .match-panel.normal-okey.table-theme-classic > .nok-presentation {
    --classic-rack-width: min(720px, 47vw);
    --classic-rack-height: clamp(108px, 14.30vh, 148px);
    --classic-action-height: clamp(40px, 4.10vh, 44px);
    --classic-rack-action-gap: clamp(4px, .45vh, 7px);
  }

  .match-panel.normal-okey.table-theme-classic .nok-own-station,
  .match-panel.normal-okey.table-theme-classic .nok-live-actions {
    right: auto !important;
    left: 50% !important;
    width: var(--classic-rack-width) !important;
    max-width: calc(100% - 24px) !important;
    transform: translateX(-50%) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-own-station {
    top: 78.26% !important;
    bottom: auto !important;
    height: var(--classic-rack-height) !important;
    min-height: var(--classic-rack-height) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions {
    top: calc(78.26% - var(--classic-action-height) - var(--classic-rack-action-gap)) !important;
    bottom: auto !important;
    display: grid !important;
    grid-auto-flow: row !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: clamp(3px, .30vw, 5px) !important;
    height: var(--classic-action-height) !important;
    min-height: var(--classic-action-height) !important;
    overflow: visible !important;
  }

  /* Hidden controls must not reserve columns.  :has() follows the existing
     hidden attribute that app.js sets from the authoritative table state. */
  .match-panel.normal-okey.table-theme-classic .nok-live-actions:has(#okeyAutoPlayButton:not([hidden])) {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions:has(#forfeitTableButton:not([hidden])):has(#showIndicatorButton[hidden]) {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions:has(#forfeitTableButton:not([hidden])):has(#showIndicatorButton:not([hidden])) {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions button {
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 2px clamp(2px, .32vw, 5px) !important;
    border-radius: 6px !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    line-height: 1.04 !important;
    font-size: clamp(8px, .58vw, 10px) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions #okeyAutoPlayButton {
    white-space: nowrap !important;
    font-size: clamp(7px, .50vw, 9px) !important;
    letter-spacing: -.01em !important;
  }

  .match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone {
    padding: clamp(5px, .72vh, 8px) var(--classic-rack-cap) !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow:
      0 9px 16px rgba(0, 0, 0, .34),
      0 0 0 2px rgba(229, 177, 95, .22),
      inset 0 1px rgba(255, 243, 203, .55),
      inset 0 -4px 0 rgba(91, 43, 17, .20) !important;
  }

  .match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone::after {
    height: 4px !important;
    border-top-width: 1px !important;
    border-bottom-width: 1px !important;
  }

  /* These are the two visible tile lanes.  They sit behind the unchanged
     rack slots, so the rails describe the drop surfaces without intercepting
     pointer, drag, reorder, or selection events. */
  .match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone #handTiles {
    gap: clamp(1px, .18vw, 3px) clamp(1px, .24vw, 4px) !important;
    padding: 1px 0 !important;
    background: transparent !important;
  }

  .match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone #handTiles::before {
    content: "";
    position: absolute;
    inset: 2px 0;
    z-index: 0;
    border: 1px solid rgba(105, 55, 22, .36);
    border-radius: 4px;
    background:
      linear-gradient(180deg,
        rgba(255, 239, 184, .16) 0 43%,
        rgba(105, 55, 22, .72) 43% 46%,
        rgba(240, 195, 117, .86) 46% 49%,
        rgba(255, 238, 177, .11) 49% 93%,
        rgba(105, 55, 22, .72) 93% 96%,
        rgba(240, 195, 117, .86) 96% 100%);
    box-shadow:
      inset 0 1px rgba(255, 247, 205, .42),
      inset 0 -2px 3px rgba(91, 42, 16, .16);
    pointer-events: none;
  }

  .match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone #handTiles .rack-slot {
    position: relative !important;
    z-index: 1 !important;
  }
}

@media (max-width: 900px) {
  .match-panel.normal-okey.table-theme-classic > .nok-presentation {
    --classic-rack-width: min(720px, 94vw);
    --classic-rack-height: clamp(96px, 16.50vh, 124px);
    --classic-action-height: clamp(40px, 5.00vh, 42px);
    --classic-rack-action-gap: 5px;
  }

  .match-panel.normal-okey.table-theme-classic .nok-own-station,
  .match-panel.normal-okey.table-theme-classic .nok-live-actions {
    right: auto !important;
    left: 50% !important;
    width: var(--classic-rack-width) !important;
    max-width: calc(100% - 12px) !important;
    transform: translateX(-50%) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-own-station {
    top: 78.26% !important;
    bottom: auto !important;
    height: var(--classic-rack-height) !important;
    min-height: var(--classic-rack-height) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions {
    top: calc(78.26% - var(--classic-action-height) - var(--classic-rack-action-gap)) !important;
    bottom: auto !important;
    display: grid !important;
    grid-auto-flow: row !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 3px !important;
    height: var(--classic-action-height) !important;
    min-height: var(--classic-action-height) !important;
    overflow: visible !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions:has(#okeyAutoPlayButton:not([hidden])) {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions:has(#forfeitTableButton:not([hidden])):has(#showIndicatorButton[hidden]) {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions:has(#forfeitTableButton:not([hidden])):has(#showIndicatorButton:not([hidden])) {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions button {
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 2px 1px !important;
    border-radius: 5px !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    line-height: 1.02 !important;
    font-size: clamp(6.5px, 1.65vw, 9px) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions #okeyAutoPlayButton {
    white-space: nowrap !important;
    font-size: clamp(6px, 1.42vw, 8px) !important;
  }
}

/* STAGE17D4_UI_CLASSIC_RACK_ACTIONS=YES
   The approved Classic table uses a real two-tier wooden rack.  The live
   #handTiles grid and its slot/event contract remain unchanged; this layer
   only gives the existing surface a front-facing shelf, two open channels,
   dark side caps, and restrained hardware details. */
.match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone {
  --classic-rack-cap: clamp(13px, 1.25vw, 19px);
  position: relative !important;
  box-sizing: border-box !important;
  padding: clamp(9px, 1.10vh, 12px) var(--classic-rack-cap) !important;
  border: 3px solid #6b3b1c !important;
  border-radius: 11px !important;
  background:
    linear-gradient(90deg, rgba(91, 48, 22, .96) 0 var(--classic-rack-cap), transparent var(--classic-rack-cap) calc(100% - var(--classic-rack-cap)), rgba(91, 48, 22, .96) calc(100% - var(--classic-rack-cap)) 100%),
    repeating-linear-gradient(174deg, rgba(255, 230, 174, .11) 0 2px, transparent 2px 13px),
    linear-gradient(180deg, #edc887 0%, #d4a15e 42%, #bb7b40 72%, #8c4e26 100%) !important;
  box-shadow:
    0 16px 27px rgba(0, 0, 0, .43),
    0 0 0 3px rgba(229, 177, 95, .34),
    inset 0 2px rgba(255, 243, 203, .64),
    inset 0 -9px 0 rgba(91, 43, 17, .30) !important;
}

.match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone::before {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: 0;
  border: 1px solid rgba(255, 238, 186, .38);
  border-radius: 7px;
  background:
    radial-gradient(circle at 9px 9px, #f7dea1 0 2px, #8b562d 2.5px 3.5px, transparent 4px),
    radial-gradient(circle at calc(100% - 9px) 9px, #f7dea1 0 2px, #8b562d 2.5px 3.5px, transparent 4px),
    radial-gradient(circle at 9px calc(100% - 9px), #f7dea1 0 2px, #8b562d 2.5px 3.5px, transparent 4px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #f7dea1 0 2px, #8b562d 2.5px 3.5px, transparent 4px),
    linear-gradient(90deg, #75411f 0 13px, transparent 13px calc(100% - 13px), #75411f calc(100% - 13px) 100%),
    linear-gradient(180deg, rgba(255, 239, 184, .20), rgba(132, 72, 31, .12));
  box-shadow: inset 0 1px rgba(255, 250, 220, .42), inset 0 -3px 6px rgba(91, 42, 16, .18);
  pointer-events: none;
}

.match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--classic-rack-cap);
  left: var(--classic-rack-cap);
  z-index: 2;
  height: 7px;
  transform: translateY(-50%);
  border-top: 1px solid rgba(255, 225, 157, .72);
  border-bottom: 2px solid rgba(91, 45, 18, .72);
  border-radius: 3px;
  background: linear-gradient(180deg, #e3b36c, #a86432 70%, #75401f);
  box-shadow: 0 2px 4px rgba(71, 31, 12, .38), inset 0 1px rgba(255, 241, 192, .55);
  pointer-events: none;
}

.match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone #handTiles {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  align-content: stretch !important;
  gap: clamp(2px, .24vw, 4px) clamp(2px, .30vw, 5px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 2px 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
}

.match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone #handTiles .rack-slot {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  width: auto !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* Keep the existing tile sizing, selection, drag/drop and flip behavior while
   allowing the two existing grid rows to use the open rack channels. */
.match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone #handTiles .tile {
  width: 100% !important;
  height: min(100%, 72px) !important;
  min-width: 0 !important;
  padding: 0 !important;
}

@media (min-width: 901px) {
  /* Six core controls plus the existing indicator control share one compact
     row; test-only helpers remain hidden and do not create an extra row. */
  .match-panel.normal-okey.table-theme-classic .nok-live-actions {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: clamp(4px, .35vw, 6px) !important;
    top: calc(78.26% + var(--classic-rack-height) - clamp(14px, 2vh, 22px)) !important;
    height: var(--classic-action-height) !important;
    min-height: var(--classic-action-height) !important;
    overflow: visible !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions button {
    min-width: 0 !important;
    min-height: 44px !important;
    height: 100% !important;
    padding: 3px clamp(3px, .45vw, 7px) !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    line-height: 1.08 !important;
    font-size: clamp(8px, .68vw, 11px) !important;
  }
}

/* STAGE17D4_UI_CLASSIC_RACK_FINAL_VISUAL_FIX=YES
   Final approved proportion pass: keep the existing two-row rack and live
   action DOM, but make their shared cluster thinner, centered, and compact.
   No tile/event/handler contract is changed. */
@media (min-width: 901px) {
  .match-panel.normal-okey.table-theme-classic > .nok-presentation {
    --classic-rack-width: min(720px, 47vw);
    --classic-rack-height: clamp(108px, 14.30vh, 148px);
    --classic-action-height: clamp(32px, 3.90vh, 42px);
    --classic-rack-action-gap: clamp(4px, .45vh, 7px);
  }

  .match-panel.normal-okey.table-theme-classic .nok-own-station {
    top: 78.26% !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    width: var(--classic-rack-width) !important;
    max-width: calc(100% - 24px) !important;
    height: var(--classic-rack-height) !important;
    min-height: var(--classic-rack-height) !important;
    transform: translateX(-50%) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions {
    top: calc(78.26% - var(--classic-action-height) - var(--classic-rack-action-gap)) !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    width: var(--classic-rack-width) !important;
    max-width: calc(100% - 24px) !important;
    height: var(--classic-action-height) !important;
    min-height: var(--classic-action-height) !important;
    transform: translateX(-50%) !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: clamp(3px, .30vw, 5px) !important;
  }

  .match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone {
    padding: clamp(5px, .72vh, 8px) var(--classic-rack-cap) !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    box-shadow:
      0 10px 18px rgba(0, 0, 0, .38),
      0 0 0 2px rgba(229, 177, 95, .28),
      inset 0 1px rgba(255, 243, 203, .58),
      inset 0 -6px 0 rgba(91, 43, 17, .26) !important;
  }

  .match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone::before {
    inset: 3px;
    border-radius: 5px;
  }

  .match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone::after {
    height: 5px;
  }

  .match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone #handTiles {
    gap: clamp(1px, .18vw, 3px) clamp(1px, .24vw, 4px) !important;
    padding: 1px 0 !important;
  }

  .match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone #handTiles .tile {
    height: min(100%, 68px) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions button {
    min-height: 0 !important;
    height: 100% !important;
    padding: 2px clamp(2px, .32vw, 5px) !important;
    border-radius: 6px !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    line-height: 1.04 !important;
    font-size: clamp(7px, .63vw, 10px) !important;
  }
}

@media (max-width: 900px) {
  .match-panel.normal-okey.table-theme-classic > .nok-presentation {
    --classic-rack-width: min(720px, 94vw);
    --classic-rack-height: clamp(96px, 16.50vh, 124px);
    --classic-action-height: clamp(32px, 5.00vh, 40px);
    --classic-rack-action-gap: 5px;
  }

  .match-panel.normal-okey.table-theme-classic .nok-own-station {
    top: 78.26% !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    width: var(--classic-rack-width) !important;
    max-width: calc(100% - 12px) !important;
    height: var(--classic-rack-height) !important;
    min-height: var(--classic-rack-height) !important;
    transform: translateX(-50%) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions {
    top: calc(78.26% - var(--classic-action-height) - var(--classic-rack-action-gap)) !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    width: var(--classic-rack-width) !important;
    max-width: calc(100% - 12px) !important;
    height: var(--classic-action-height) !important;
    min-height: var(--classic-action-height) !important;
    transform: translateX(-50%) !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 3px !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions button {
    min-height: 0 !important;
    height: 100% !important;
    padding: 2px 1px !important;
    border-radius: 5px !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    line-height: 1.02 !important;
    font-size: clamp(6px, 1.65vw, 9px) !important;
  }
}

@media (max-width: 900px) {
  .match-panel.normal-okey.table-theme-classic .nok-live-actions {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 4px !important;
    transform: translateY(-8px) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions button {
    min-width: 0 !important;
    padding: 3px 2px !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    line-height: 1.08 !important;
    font-size: clamp(7px, 1.75vw, 10px) !important;
  }
}

/* CLASSIC_CHAT_TYPOGRAPHY_PLUS_30=YES
   Increase only message typography inside the existing Classic chat card.
   The chat/spectator card, right-column tracks, input, and action controls
   retain their existing geometry. */
.match-panel.normal-okey.table-theme-classic .chat-line,
.match-panel.normal-okey.table-theme-classic .system-line {
  font-size: 14.3px;
  line-height: 1.35;
}

.match-panel.normal-okey.table-theme-classic .chat-line strong {
  font-size: 14.3px;
  font-weight: 700;
}

.match-panel.normal-okey.table-theme-classic .chat-line > span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* STAGE17D3_TABLE_CHAT_SPECTATOR_TABS=YES
   The tab panels stay inside the existing chat card; no right-column track or
   Classic presentation geometry is changed. */
.match-panel.normal-okey .nok-chat-tabs {
  gap: 6px;
  flex-wrap: wrap;
}

.match-panel.normal-okey .nok-chat-tab {
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--nok-muted);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 5px 8px;
}

.match-panel.normal-okey .nok-chat-tab.active {
  border-color: rgba(242, 179, 95, .55);
  background: rgba(242, 179, 95, .12);
  color: #fff7e9;
}

.match-panel.normal-okey .table-chat-tab-panel {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
}

.match-panel.normal-okey .table-spectators-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 2px;
}

.match-panel.normal-okey .table-roster-section + .table-roster-section {
  margin-top: 14px;
}

.match-panel.normal-okey .table-roster-heading {
  display: block;
  margin: 0 2px 7px;
  color: #fff7e9;
  font-size: 11px;
  letter-spacing: .04em;
}

.match-panel.normal-okey .table-spectators-list {
  display: grid;
  gap: 7px;
}

.match-panel.normal-okey .table-spectator-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  background: rgba(0, 0, 0, .12);
  color: #d9e0e0;
  font-size: 11px;
}

.match-panel.normal-okey .table-spectator-presence {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #59d69b;
  box-shadow: 0 0 0 3px rgba(89, 214, 155, .12);
}

.match-panel.normal-okey .table-spectators-empty {
  margin: 10px 2px;
  color: var(--nok-muted);
  font-size: 11px;
}

/* STAGE17D2_SETTINGS_VISIBILITY_LOCK_FIX=YES
   The settings control is a real details panel, not the global Settings
   button. Keep its existing Classic left-column position in normal flow and
   keep it open so waiting, read-only, and active locked states remain visible. */
@media (min-width: 901px) {
  .match-panel.normal-okey.table-theme-classic .nok-left-column {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .match-panel.normal-okey.table-theme-classic #normalOkeySettingsPanel {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    z-index: 25 !important;
  }
}

/* RACK_GEOMETRY_CORRECTION_3=YES
   Final rack authority. The live 8x2 slot grid supplies the two tile lanes;
   explicit DOM layers draw the physical rear/front shelf body behind it. */
@media (min-width: 901px) {
  .match-panel.normal-okey.table-theme-classic > .nok-presentation {
    --classic-rack-width: min(720px, 47vw) !important;
    --classic-rack-height: clamp(50px, 5.70vh, 62px) !important;
    --classic-tile-render-height: 60px !important;
    --classic-shelf-support-height: clamp(9px, calc(var(--classic-tile-render-height) * .18), 11px) !important;
    --classic-shelf-base-height: 4px !important;
    --classic-shelf-lip-height: 4px !important;
    --classic-rack-row-gap: clamp(1px, .16vw, 3px) !important;
    --classic-rack-row-gap-half: clamp(.5px, .08vw, 1.5px) !important;
    --classic-action-height: clamp(40px, 4.10vh, 44px) !important;
    --classic-rack-action-gap: clamp(4px, .45vh, 8px) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-own-station {
    width: var(--classic-rack-width) !important;
    height: var(--classic-rack-height) !important;
    min-height: var(--classic-rack-height) !important;
  }

  /* Preserve the existing action-bar geometry; this correction only removes
     the stale full-height rack frame behind it. */
  .match-panel.normal-okey.table-theme-classic .nok-live-actions {
    top: calc(78.26% - var(--classic-action-height) - var(--classic-rack-action-gap)) !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    width: var(--classic-rack-width) !important;
    max-width: calc(100% - 24px) !important;
    transform: translateX(-50%) !important;
    display: grid !important;
    grid-auto-flow: row !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: clamp(3px, .30vw, 5px) !important;
    height: var(--classic-action-height) !important;
    min-height: var(--classic-action-height) !important;
    overflow: visible !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions:has(#okeyAutoPlayButton:not([hidden])) {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions:has(#forfeitTableButton:not([hidden])):has(#showIndicatorButton[hidden]) {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions:has(#forfeitTableButton:not([hidden])):has(#showIndicatorButton:not([hidden])) {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions button {
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 2px clamp(2px, .32vw, 5px) !important;
    border-radius: 6px !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    line-height: 1.04 !important;
    font-size: clamp(8px, .58vw, 10px) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions #okeyAutoPlayButton {
    white-space: nowrap !important;
    font-size: clamp(7px, .50vw, 9px) !important;
    letter-spacing: -.01em !important;
  }

  .match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    padding: 0 var(--classic-rack-cap) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone::before {
    content: none !important;
    display: none !important;
    pointer-events: none !important;
  }

  .match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone::after {
    content: none !important;
    display: none !important;
  }

  .match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone .rack-wood-body {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    overflow: visible !important;
    pointer-events: none !important;
  }

  .match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone .rack-wood-body > span {
    position: absolute !important;
    display: block !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
  }

  .match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone .rack-rear-support,
  .match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone .rack-rear-base,
  .match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone .rack-rear-lip,
  .match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone .rack-front-support,
  .match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone .rack-front-base,
  .match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone .rack-front-lip {
    right: var(--classic-rack-cap) !important;
    left: var(--classic-rack-cap) !important;
    border-radius: 2px !important;
  }

  .match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone .rack-rear-support {
    top: calc(50% - var(--classic-rack-row-gap-half) - var(--classic-shelf-lip-height) - var(--classic-shelf-base-height) - var(--classic-shelf-support-height)) !important;
    height: var(--classic-shelf-support-height) !important;
    z-index: 2 !important;
    background: linear-gradient(164deg, #f0d09a 0%, #d3a064 54%, #a76435 100%) !important;
    clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%) !important;
    box-shadow: inset 0 1px rgba(255, 247, 214, .42), 0 2px 3px rgba(65, 31, 12, .26) !important;
  }

  .match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone .rack-rear-base {
    top: calc(50% - var(--classic-rack-row-gap-half) - var(--classic-shelf-lip-height) - var(--classic-shelf-base-height)) !important;
    height: var(--classic-shelf-base-height) !important;
    z-index: 1 !important;
    background: linear-gradient(180deg, #d69a5b 0%, #9d5c2f 100%) !important;
    box-shadow: 0 1px 2px rgba(55, 25, 9, .34) !important;
  }

  .match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone .rack-rear-lip {
    top: calc(50% - var(--classic-rack-row-gap-half) - var(--classic-shelf-lip-height)) !important;
    height: var(--classic-shelf-lip-height) !important;
    z-index: 3 !important;
    background: linear-gradient(180deg, #f2d29a 0%, #bd7c40 65%, #75401f 100%) !important;
    box-shadow: 0 1px 2px rgba(53, 24, 8, .40) !important;
  }

  .match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone .rack-front-support {
    top: calc(100% - var(--classic-shelf-lip-height) - var(--classic-shelf-base-height) - var(--classic-shelf-support-height)) !important;
    height: var(--classic-shelf-support-height) !important;
    z-index: 0 !important;
    background: linear-gradient(164deg, #e9c487 0%, #c78f52 54%, #995a2d 100%) !important;
    clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%) !important;
    box-shadow: inset 0 1px rgba(255, 244, 206, .35), 0 2px 3px rgba(65, 31, 12, .24) !important;
  }

  .match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone .rack-front-base {
    top: calc(100% - var(--classic-shelf-lip-height) - var(--classic-shelf-base-height)) !important;
    height: var(--classic-shelf-base-height) !important;
    z-index: 1 !important;
    background: linear-gradient(180deg, #c98849 0%, #8f4e28 100%) !important;
    box-shadow: 0 1px 2px rgba(55, 25, 9, .34) !important;
  }

  .match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone .rack-front-lip {
    top: calc(100% - var(--classic-shelf-lip-height)) !important;
    height: var(--classic-shelf-lip-height) !important;
    z-index: 3 !important;
    background: linear-gradient(180deg, #edc98e 0%, #b8733a 65%, #6d3a1d 100%) !important;
    box-shadow: 0 1px 2px rgba(53, 24, 8, .42) !important;
  }

  .match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone .rack-left-cap,
  .match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone .rack-right-cap {
    top: max(0px, calc(50% - var(--classic-rack-row-gap-half) - var(--classic-shelf-lip-height) - var(--classic-shelf-base-height) - var(--classic-shelf-support-height))) !important;
    bottom: 0 !important;
    width: var(--classic-rack-cap) !important;
    z-index: 1 !important;
    border-radius: 2px !important;
    background:
      radial-gradient(circle at 50% 7px, #f0d18f 0 1.2px, #744721 1.5px 2.2px, transparent 2.5px),
      radial-gradient(circle at 50% calc(100% - 5px), #e7bd77 0 1.2px, #744721 1.5px 2.2px, transparent 2.5px),
      linear-gradient(90deg, #5e351d 0%, #8a512b 48%, #4c2917 100%) !important;
    box-shadow: inset 1px 0 rgba(255, 220, 157, .18), inset -1px 0 rgba(45, 20, 9, .35), 0 2px 4px rgba(40, 17, 7, .28) !important;
  }

  .match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone .rack-left-cap {
    left: 0 !important;
  }

  .match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone .rack-right-cap {
    right: 0 !important;
  }

  .match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone #handTiles.hand-tiles {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    grid-template-rows: minmax(0, .96fr) minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    align-content: stretch !important;
    gap: var(--classic-rack-row-gap) clamp(1px, .22vw, 4px) !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  .match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone #handTiles.hand-tiles::before {
    content: none !important;
    display: none !important;
    pointer-events: none !important;
  }

  .match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone #handTiles.hand-tiles .rack-slot {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    width: auto !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 0 5px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone #handTiles.hand-tiles .rack-slot::before {
    content: none !important;
    display: none !important;
    pointer-events: none !important;
  }

  .match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone #handTiles.hand-tiles .tile {
    position: relative !important;
    z-index: 3 !important;
    width: 100% !important;
    height: min(100%, var(--classic-tile-render-height)) !important;
    max-height: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
}

@media (max-width: 900px) {
  .match-panel.normal-okey.table-theme-classic > .nok-presentation {
    --classic-rack-width: min(720px, 94vw) !important;
    --classic-rack-height: clamp(48px, 8.00vh, 60px) !important;
    --classic-tile-render-height: 54px !important;
    --classic-shelf-support-height: 16px !important;
    --classic-shelf-base-height: 3px !important;
    --classic-shelf-lip-height: 4px !important;
    --classic-rack-row-gap: 1px !important;
    --classic-rack-row-gap-half: .5px !important;
    --classic-action-height: clamp(40px, 5.00vh, 42px) !important;
    --classic-rack-action-gap: 5px !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-own-station {
    width: var(--classic-rack-width) !important;
    height: var(--classic-rack-height) !important;
    min-height: var(--classic-rack-height) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions {
    top: calc(78.26% - var(--classic-action-height) - var(--classic-rack-action-gap)) !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    width: var(--classic-rack-width) !important;
    max-width: calc(100% - 12px) !important;
    transform: translateX(-50%) !important;
    display: grid !important;
    grid-auto-flow: row !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 3px !important;
    height: var(--classic-action-height) !important;
    min-height: var(--classic-action-height) !important;
    overflow: visible !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions:has(#okeyAutoPlayButton:not([hidden])) {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions:has(#forfeitTableButton:not([hidden])):has(#showIndicatorButton[hidden]) {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions:has(#forfeitTableButton:not([hidden])):has(#showIndicatorButton:not([hidden])) {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions button {
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 2px 1px !important;
    border-radius: 5px !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    line-height: 1.02 !important;
    font-size: clamp(6.5px, 1.65vw, 9px) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions #okeyAutoPlayButton {
    white-space: nowrap !important;
    font-size: clamp(6px, 1.42vw, 8px) !important;
  }

  .match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 var(--classic-rack-cap) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone::before {
    content: "" !important;
    position: absolute !important;
    inset: 4px 0 4px !important;
    z-index: 0 !important;
    border-radius: 3px !important;
    background:
      radial-gradient(circle at 4px 4px, #efd18f 0 1.2px, #80502c 1.5px 2.2px, transparent 2.5px),
      radial-gradient(circle at 4px calc(100% - 4px), #efd18f 0 1.2px, #80502c 1.5px 2.2px, transparent 2.5px),
      radial-gradient(circle at calc(100% - 4px) 4px, #efd18f 0 1.2px, #80502c 1.5px 2.2px, transparent 2.5px),
      radial-gradient(circle at calc(100% - 4px) calc(100% - 4px), #efd18f 0 1.2px, #80502c 1.5px 2.2px, transparent 2.5px),
      linear-gradient(90deg, #704424 0 var(--classic-rack-cap), transparent var(--classic-rack-cap) calc(100% - var(--classic-rack-cap)), #704424 calc(100% - var(--classic-rack-cap)) 100%) !important;
  }

  .match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone::after {
    content: none !important;
    display: none !important;
  }

  .match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone #handTiles.hand-tiles {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    grid-template-rows: minmax(0, .96fr) minmax(0, 1fr) !important;
    gap: 1px 2px !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone #handTiles.hand-tiles::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    border-radius: 2px !important;
    background:
      linear-gradient(168deg, rgba(255, 235, 190, .34), transparent 62%) 0 calc(50% - var(--classic-shelf-lip-height) - var(--classic-shelf-support-height)) / 100% var(--classic-shelf-support-height) no-repeat,
      linear-gradient(180deg, #efcc89 0%, #c88748 64%, #82451f 100%) 0 calc(50% - var(--classic-shelf-lip-height)) / 100% var(--classic-shelf-lip-height) no-repeat,
      linear-gradient(168deg, rgba(255, 230, 174, .30), transparent 62%) 0 calc(100% - var(--classic-shelf-lip-height) - var(--classic-shelf-support-height)) / 100% var(--classic-shelf-support-height) no-repeat,
      linear-gradient(180deg, #eac482 0%, #bd793d 64%, #79421f 100%) 0 calc(100% - var(--classic-shelf-lip-height)) / 100% var(--classic-shelf-lip-height) no-repeat,
      linear-gradient(168deg, #e8c487 0%, #d09a5b 58%, #a66632 100%) 0 calc(50% - var(--classic-shelf-lip-height) - var(--classic-shelf-support-height)) / 100% var(--classic-shelf-support-height) no-repeat,
      linear-gradient(168deg, #e4bd7d 0%, #c88d4f 58%, #9b5c2d 100%) 0 calc(100% - var(--classic-shelf-lip-height) - var(--classic-shelf-support-height)) / 100% var(--classic-shelf-support-height) no-repeat !important;
    pointer-events: none !important;
  }

  .match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone #handTiles.hand-tiles .rack-slot {
    position: relative !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    height: 100% !important;
    padding: 0 0 4px !important;
    border: 0 !important;
    background: transparent !important;
  }

  .match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone #handTiles.hand-tiles .rack-slot::before {
    content: none !important;
    display: none !important;
    pointer-events: none !important;
  }

  .match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone #handTiles.hand-tiles .tile {
    position: relative !important;
    z-index: 4 !important;
    width: 100% !important;
    height: min(100%, var(--classic-tile-render-height)) !important;
    max-height: 100% !important;
    margin: 0 !important;
  }
}

/* Explicit DOM rack body: all physical wood is here, while #handTiles stays
   the unchanged interaction/grid layer. This remains inside the final rack
   authority and replaces the old pseudo-element frame in both viewports. */
.match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone::before,
.match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

.match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone .rack-wood-body {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, .96fr) minmax(0, 1fr) !important;
  row-gap: var(--classic-rack-row-gap) !important;
  overflow: visible !important;
  pointer-events: none !important;
  z-index: 0 !important;
  isolation: isolate !important;
  --classic-rack-endcap-piece-height: clamp(9px, 1.05vh, 12px);
  --classic-front-tier-lift: clamp(4px, .55vh, 6px);
  --classic-rack-transition-height: clamp(7px, .72vh, 10px);
  background:
    linear-gradient(165deg, rgba(255, 236, 190, .30) 0%, rgba(255, 236, 190, 0) 72%) center calc(50% + var(--classic-rack-row-gap-half)) / calc(100% - var(--classic-rack-cap) - var(--classic-rack-cap)) var(--classic-rack-transition-height) no-repeat,
    linear-gradient(180deg, #a96a35 0%, #77401f 100%) center calc(50% + var(--classic-rack-row-gap-half)) / calc(100% - var(--classic-rack-cap) - var(--classic-rack-cap)) var(--classic-rack-transition-height) no-repeat !important;
  border-radius: 0 !important;
  clip-path: none !important;
  box-shadow: none !important;
}

.match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone .rack-wood-body > span {
  position: absolute !important;
  display: block !important;
  box-sizing: border-box !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone .rack-rear-support,
.match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone .rack-rear-base,
.match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone .rack-rear-lip,
.match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone .rack-front-support,
.match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone .rack-front-base,
.match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone .rack-front-lip {
  right: calc(var(--classic-rack-cap) + 4px) !important;
  left: calc(var(--classic-rack-cap) + 4px) !important;
  border-radius: 2px !important;
}

.match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone .rack-rear-support {
  top: calc(50% - var(--classic-rack-row-gap-half) - var(--classic-shelf-lip-height) - var(--classic-shelf-base-height) - var(--classic-shelf-support-height)) !important;
  height: var(--classic-shelf-support-height) !important;
  z-index: 0 !important;
  background:
    linear-gradient(165deg, rgba(255, 247, 214, .34) 0%, rgba(255, 247, 214, 0) 42%),
    linear-gradient(164deg, #e8c487 0%, #c99558 55%, #a56534 100%) !important;
  border: 1px solid rgba(118, 69, 29, .28) !important;
  clip-path: polygon(0 30%, 100% 0, 100% 78%, 94% 100%, 6% 100%, 0 78%) !important;
  transform: perspective(280px) rotateX(-12deg) !important;
  transform-origin: 50% 100% !important;
  box-shadow: inset 0 1px rgba(255, 247, 214, .42), inset 0 -2px 2px rgba(97, 48, 17, .18), 0 2px 3px rgba(65, 31, 12, .18) !important;
}

.match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone .rack-rear-base {
  top: calc(50% - var(--classic-rack-row-gap-half) - var(--classic-shelf-lip-height) - var(--classic-shelf-base-height)) !important;
  height: var(--classic-shelf-base-height) !important;
  z-index: 1 !important;
  left: calc(var(--classic-rack-cap) - 2px) !important;
  right: calc(var(--classic-rack-cap) - 2px) !important;
  background:
    linear-gradient(180deg, #e0aa69 0%, #af6b35 60%, #79401e 100%) !important;
  border: 1px solid rgba(112, 60, 23, .42) !important;
  clip-path: polygon(0 0, 100% 0, 96% 100%, 4% 100%) !important;
  transform: translateY(1px) perspective(220px) rotateX(-16deg) !important;
  transform-origin: 50% 0 !important;
  box-shadow: inset 0 1px rgba(255, 237, 186, .45), 0 2px 2px rgba(55, 25, 9, .34) !important;
}

.match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone .rack-rear-lip {
  top: calc(50% - var(--classic-rack-row-gap-half) - var(--classic-shelf-lip-height)) !important;
  height: var(--classic-shelf-lip-height) !important;
  z-index: 3 !important;
  left: calc(var(--classic-rack-cap) - 1px) !important;
  right: calc(var(--classic-rack-cap) - 1px) !important;
  background: linear-gradient(180deg, #f7dba3 0%, #c48445 62%, #75401f 100%) !important;
  border: 1px solid rgba(108, 55, 20, .48) !important;
  border-radius: 1px 1px 3px 3px !important;
  clip-path: polygon(0 0, 100% 0, 96% 100%, 4% 100%) !important;
  transform: translateY(1px) !important;
  box-shadow: 0 2px 2px rgba(53, 24, 8, .40) !important;
}

.match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone .rack-front-support {
  top: calc(100% - var(--classic-shelf-lip-height) - var(--classic-shelf-base-height) - var(--classic-shelf-support-height)) !important;
  height: var(--classic-shelf-support-height) !important;
  z-index: 0 !important;
  left: calc(var(--classic-rack-cap) - 1px) !important;
  right: calc(var(--classic-rack-cap) - 1px) !important;
  background:
    linear-gradient(165deg, rgba(255, 244, 206, .30) 0%, rgba(255, 244, 206, 0) 42%),
    linear-gradient(164deg, #dfb878 0%, #c38b50 55%, #96592d 100%) !important;
  border: 1px solid rgba(112, 62, 26, .28) !important;
  clip-path: polygon(0 30%, 100% 0, 100% 78%, 94% 100%, 6% 100%, 0 78%) !important;
  transform: translateY(calc(1px - var(--classic-front-tier-lift))) perspective(280px) rotateX(-16deg) !important;
  transform-origin: 50% 100% !important;
  box-shadow: inset 0 1px rgba(255, 244, 206, .36), inset 0 -2px 2px rgba(97, 48, 17, .18), 0 3px 3px rgba(65, 31, 12, .18) !important;
}

.match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone .rack-front-base {
  top: calc(100% - var(--classic-shelf-lip-height) - var(--classic-shelf-base-height)) !important;
  height: var(--classic-shelf-base-height) !important;
  z-index: 1 !important;
  left: calc(var(--classic-rack-cap) - 2px) !important;
  right: calc(var(--classic-rack-cap) - 2px) !important;
  background: linear-gradient(180deg, #d79b5a 0%, #a96331 60%, #713b1e 100%) !important;
  border: 1px solid rgba(103, 53, 20, .46) !important;
  clip-path: polygon(0 0, 100% 0, 96% 100%, 4% 100%) !important;
  transform: translateY(calc(1px - var(--classic-front-tier-lift))) perspective(220px) rotateX(-18deg) !important;
  transform-origin: 50% 0 !important;
  box-shadow: inset 0 1px rgba(255, 233, 181, .40), 0 2px 2px rgba(55, 25, 9, .34) !important;
}

.match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone .rack-front-lip {
  top: calc(100% - var(--classic-shelf-lip-height)) !important;
  height: var(--classic-shelf-lip-height) !important;
  z-index: 3 !important;
  left: calc(var(--classic-rack-cap) - 1px) !important;
  right: calc(var(--classic-rack-cap) - 1px) !important;
  background: linear-gradient(180deg, #f2cf93 0%, #bd7d40 62%, #6d3a1d 100%) !important;
  border: 1px solid rgba(101, 51, 18, .52) !important;
  border-radius: 1px 1px 3px 3px !important;
  clip-path: polygon(0 0, 100% 0, 96% 100%, 4% 100%) !important;
  transform: translateY(calc(1px - var(--classic-front-tier-lift))) !important;
  box-shadow: 0 2px 2px rgba(53, 24, 8, .42) !important;
}

.match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone .rack-rear-support,
.match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone .rack-rear-base,
.match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone .rack-rear-lip {
  position: relative !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: end !important;
  justify-self: stretch !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: auto !important;
  margin-inline: calc(var(--classic-rack-cap) + 4px) !important;
}

.match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone .rack-front-support,
.match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone .rack-front-base,
.match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone .rack-front-lip {
  position: relative !important;
  grid-column: 1 !important;
  grid-row: 2 !important;
  align-self: end !important;
  justify-self: stretch !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: auto !important;
  margin-inline: calc(var(--classic-rack-cap) + 4px) !important;
}

.match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone .rack-left-cap,
.match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone .rack-right-cap {
  top: 5px !important;
  bottom: auto !important;
  height: calc(100% - 10px) !important;
  width: var(--classic-rack-cap) !important;
  z-index: 1 !important;
  border-radius: 2px !important;
  background:
    radial-gradient(circle at 50% 5px, #f0d18f 0 1.2px, #744721 1.5px 2.2px, transparent 2.5px) top center / 100% var(--classic-rack-endcap-piece-height) no-repeat,
    linear-gradient(90deg, #5e351d 0%, #8a512b 48%, #4c2917 100%) top center / 100% var(--classic-rack-endcap-piece-height) no-repeat,
    linear-gradient(164deg, #6d3e20 0%, #9a5c2c 52%, #4d2814 100%) center calc(50% + var(--classic-rack-row-gap-half)) / 100% var(--classic-rack-transition-height) no-repeat,
    radial-gradient(circle at 50% calc(100% - 5px), #e7bd77 0 1.2px, #744721 1.5px 2.2px, transparent 2.5px) bottom center / 100% var(--classic-rack-endcap-piece-height) no-repeat,
    linear-gradient(90deg, #5e351d 0%, #8a512b 48%, #4c2917 100%) bottom center / 100% var(--classic-rack-endcap-piece-height) no-repeat !important;
  box-shadow: inset 1px 0 rgba(255, 220, 157, .12), inset -1px 0 rgba(45, 20, 9, .28) !important;
}

.match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone .rack-left-cap {
  left: 0 !important;
}

.match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone .rack-right-cap {
  right: 0 !important;
}

.match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone #handTiles.hand-tiles::before {
  content: none !important;
  display: none !important;
  background: none !important;
  pointer-events: none !important;
}

/* DUAL_RACK_SKIN_SYSTEM=YES: one image skin behind the unchanged gameplay grid. */
.match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone .rack-image-skin {
  position: absolute !important;
  /* The approved 2132x738 PNG seats are at source y=370 and y=603.
     Calibrating those two source baselines to the locked two-row grid keeps
     the image skin fitted to the tiles without moving the gameplay layer. */
  --classic-rack-skin-rear-seat-y: 50.14%;
  --classic-rack-skin-front-seat-y: 81.71%;
  --classic-rack-skin-channel-span: 31.57%;
  --classic-rack-skin-inset-x: clamp(6px, .65vw, 10px);
  --classic-rack-skin-width: calc(100% - clamp(12px, 1.30vw, 20px));
  /* Restore the compact common frame used before the channel calibration.
     The two retaining lips below provide the seating illusion without
     scaling or translating the locked gameplay rows. */
  --classic-rack-skin-height: 100%;
  top: 0 !important;
  left: 50% !important;
  display: block !important;
  width: var(--classic-rack-skin-width) !important;
  height: var(--classic-rack-skin-height) !important;
  max-width: none !important;
  object-fit: fill !important;
  object-position: center !important;
  transform: translateX(-50%) !important;
  z-index: 0 !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

.match-panel.normal-okey .normal-okey-rack-zone > .rack-image-skin {
  pointer-events: none !important;
}

.match-panel.normal-okey.table-theme-premium .normal-okey-rack-zone.normal-okey-rack-zone > .rack-image-skin {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: fill !important;
  object-position: center !important;
  z-index: 0 !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

.match-panel.normal-okey.table-theme-premium .normal-okey-rack-zone.normal-okey-rack-zone #handTiles.hand-tiles {
  position: relative !important;
  z-index: 1 !important;
}

.match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone[data-rack-skin] .rack-wood-body {
  --classic-channel-lip-height: 4px;
  --classic-channel-lip-overlap: 4px;
  --classic-front-channel-lip-height: 5px;
  --classic-front-channel-lip-overlap: 5px;
  --classic-rack-slot-bottom-inset: 5px;
  visibility: visible !important;
  display: block !important;
  background: none !important;
  z-index: 2 !important;
}

.match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone[data-rack-skin] .rack-wood-body > span:not(.rack-rear-lip):not(.rack-front-lip) {
  display: none !important;
  visibility: hidden !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone[data-rack-skin] .rack-rear-lip,
.match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone[data-rack-skin] .rack-front-lip {
  position: absolute !important;
  display: block !important;
  visibility: visible !important;
  top: auto !important;
  right: calc(var(--classic-rack-cap) - 1px) !important;
  bottom: auto !important;
  left: calc(var(--classic-rack-cap) - 1px) !important;
  width: auto !important;
  height: var(--classic-channel-lip-height) !important;
  box-sizing: border-box !important;
  border: 1px solid transparent !important;
  border-radius: 1px 1px 3px 3px !important;
  clip-path: polygon(0 0, 100% 0, 96% 100%, 4% 100%) !important;
  transform: none !important;
  pointer-events: none !important;
  user-select: none !important;
  z-index: 3 !important;
}

.match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone[data-rack-skin] .rack-rear-lip {
  top: calc(50% - var(--classic-rack-row-gap-half) - var(--classic-rack-slot-bottom-inset) - var(--classic-channel-lip-overlap)) !important;
}

.match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone[data-rack-skin] .rack-front-lip {
  height: var(--classic-front-channel-lip-height) !important;
  top: calc(100% - var(--classic-rack-slot-bottom-inset) - var(--classic-front-channel-lip-overlap)) !important;
}

.match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone[data-rack-skin="classic-walnut"] .rack-rear-lip,
.match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone[data-rack-skin="classic-walnut"] .rack-front-lip {
  background: linear-gradient(180deg, #b77a47 0%, #75411f 72%, #4b2816 100%) !important;
  border-color: rgba(55, 28, 15, .72) !important;
  box-shadow: 0 1px 2px rgba(24, 11, 5, .42) !important;
}

.match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone[data-rack-skin="light-beech"] .rack-rear-lip,
.match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone[data-rack-skin="light-beech"] .rack-front-lip {
  background: linear-gradient(180deg, #f0c98b 0%, #b9773e 72%, #70401f 100%) !important;
  border-color: rgba(104, 57, 24, .58) !important;
  box-shadow: 0 1px 2px rgba(53, 24, 8, .36) !important;
}

.match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone.normal-okey-rack-zone #handTiles.hand-tiles {
  z-index: 1 !important;
}

/* ACTION_BAR_STAGE2_IMPLEMENTED=YES
   The gameplay toolbar owns exactly the seven live controls.  Test helpers
   are deliberately outside this grid so they cannot narrow labels or create
   an implicit gameplay row.  Rack, handTiles, and all handlers stay intact. */
/* ACTION_BAR_STAGE2_1_IMPLEMENTED=YES
   The locked bottom-card/rack band is only --classic-cluster-player-gap tall,
   so it cannot contain the 40-44px gameplay row.  Keep the card and rack
   fixed, and place the helper/gameplay rows above the card without changing
   gameplay control dimensions. */
@media (min-width: 901px) {
  .match-panel.normal-okey.table-theme-classic > .nok-presentation {
    --classic-action-bar-width: min(900px,68vw);
    --classic-action-bar-gap: clamp(4px, .30vw, 6px);
    --classic-action-height: clamp(40px, 4.10vh, 44px);
    --classic-action-bar-to-rack-gap: clamp(6px, .65vh, 8px);
    --classic-action-card-gap: clamp(4px, .35vh, 6px);
    --classic-test-helper-height: clamp(20px, 2.10vh, 24px);
    --classic-test-helper-gap: clamp(4px, .35vw, 6px);
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions {
    position: absolute !important;
    top: calc(var(--classic-cluster-rack-top) - var(--classic-cluster-player-height) - var(--classic-cluster-player-gap) - var(--classic-action-card-gap) - var(--classic-action-height)) !important;
    width: var(--classic-action-bar-width) !important;
    max-width: calc(100% - 24px) !important;
    grid-auto-flow: column !important;
    grid-template-columns: .90fr 1.15fr .70fr 1.25fr 1.35fr 1.55fr 1.20fr !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: var(--classic-action-bar-gap) !important;
    height: var(--classic-action-height) !important;
    min-height: var(--classic-action-height) !important;
    align-items: stretch !important;
    justify-items: stretch !important;
  }

  /* Keep every authoritative track stable when an action is hidden or not
     applicable; visible controls never redistribute into giant buttons. */
  .match-panel.normal-okey.table-theme-classic .nok-live-actions > #drawPileButton { grid-column: 1 !important; }
  .match-panel.normal-okey.table-theme-classic .nok-live-actions > #discardPileButton { grid-column: 2 !important; }
  .match-panel.normal-okey.table-theme-classic .nok-live-actions > #discardButton { grid-column: 3 !important; }
  .match-panel.normal-okey.table-theme-classic .nok-live-actions > #finishButton { grid-column: 4 !important; }
  .match-panel.normal-okey.table-theme-classic .nok-live-actions > #showIndicatorButton { grid-column: 5 !important; }
  .match-panel.normal-okey.table-theme-classic .nok-live-actions > #okeyAutoPlayButton { grid-column: 6 !important; }
  .match-panel.normal-okey.table-theme-classic .nok-live-actions > #forfeitTableButton { grid-column: 7 !important; }

  /* Historical Classic blocks contain higher-specificity :has() fallbacks.
     Keep those selectors harmless at the terminal authority so a hidden
     control cannot collapse the seven locked positions. */
  .match-panel.normal-okey.table-theme-classic .nok-live-actions:has(#okeyAutoPlayButton:not([hidden])),
  .match-panel.normal-okey.table-theme-classic .nok-live-actions:has(#forfeitTableButton:not([hidden])):has(#showIndicatorButton[hidden]),
  .match-panel.normal-okey.table-theme-classic .nok-live-actions:has(#forfeitTableButton:not([hidden])):has(#showIndicatorButton:not([hidden])) {
    grid-template-columns: .90fr 1.15fr .70fr 1.25fr 1.35fr 1.55fr 1.20fr !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions button {
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 clamp(6px, .42vw, 9px) !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    line-height: 1.10 !important;
    font-size: clamp(10px, .72vw, 12px) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions #okeyAutoPlayButton {
    white-space: nowrap !important;
    font-size: clamp(9px, .66vw, 11px) !important;
    letter-spacing: -.01em !important;
  }

  /* Test-only controls retain their existing IDs and click handlers, but no
     longer participate in the gameplay grid.  The band is positioned inside
     the same table-local containing block and only appears in test mode. */
  .match-panel.normal-okey.table-theme-classic #gameBoard > .nok-test-helper-actions {
    position: absolute !important;
    top: calc(var(--classic-cluster-rack-top) - var(--classic-cluster-player-height) - var(--classic-cluster-player-gap) - var(--classic-action-card-gap) - var(--classic-action-height) - var(--classic-test-helper-gap) - var(--classic-test-helper-height)) !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    width: var(--classic-action-bar-width) !important;
    max-width: calc(100% - 24px) !important;
    height: var(--classic-test-helper-height) !important;
    min-height: var(--classic-test-helper-height) !important;
    transform: translateX(-50%) !important;
    display: none !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: var(--classic-test-helper-gap) !important;
    align-items: stretch !important;
    z-index: 34 !important;
    pointer-events: auto !important;
  }

  .match-panel.normal-okey.table-theme-classic #gameBoard > .nok-test-helper-actions:has(button:not(.hidden)) {
    display: grid !important;
  }

  .match-panel.normal-okey.table-theme-classic #gameBoard > .nok-test-helper-actions button,
  body:has(#matchPanel.normal-okey.table-theme-classic:not(.hidden)) #gameBoard > .nok-test-helper-actions #prepareHumanFinishTestButton,
  body:has(#matchPanel.normal-okey.table-theme-classic:not(.hidden)) #gameBoard > .nok-test-helper-actions #prepareHumanIndicatorTestButton,
  body:has(#matchPanel.normal-okey.table-theme-classic:not(.hidden)) #gameBoard > .nok-test-helper-actions #prepareHumanSevenPairsTestButton,
  body:has(#matchPanel.normal-okey.table-theme-classic:not(.hidden)) #gameBoard > .nok-test-helper-actions #prepareHumanOkeyFinishTestButton {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 2px 6px !important;
    align-self: stretch !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    line-height: 1.05 !important;
    font-size: clamp(7px, .46vw, 9px) !important;
    z-index: auto !important;
  }
}

@media (max-width: 900px) {
  .match-panel.normal-okey.table-theme-classic > .nok-presentation {
    --classic-action-bar-width: min(720px,94vw);
    --classic-action-bar-to-rack-gap: 6px;
    --classic-test-helper-height: 30px;
    --classic-test-helper-gap: 4px;
  }

  .match-panel.normal-okey.table-theme-classic #gameBoard > .nok-test-helper-actions {
    position: absolute !important;
    top: calc(78.26% - var(--classic-action-height) - var(--classic-action-bar-to-rack-gap) - var(--classic-test-helper-height) - var(--classic-test-helper-gap)) !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    width: var(--classic-action-bar-width) !important;
    max-width: calc(100% - 12px) !important;
    height: var(--classic-test-helper-height) !important;
    min-height: var(--classic-test-helper-height) !important;
    transform: translateX(-50%) !important;
    display: none !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--classic-test-helper-gap) !important;
    z-index: 34 !important;
  }

  .match-panel.normal-okey.table-theme-classic #gameBoard > .nok-test-helper-actions:has(button:not(.hidden)) {
    display: grid !important;
  }

  .match-panel.normal-okey.table-theme-classic #gameBoard > .nok-test-helper-actions button {
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 2px 3px !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    white-space: normal !important;
    line-height: 1.02 !important;
    font-size: clamp(7px, 1.45vw, 9px) !important;
  }
}

/* Normal Okey right-seat hitbox: keep the station inside the table stage so
   the spectator/chat column cannot cover its interactive seat surface. */
.match-panel.normal-okey:not(.table-theme-classic) .nok-station-right {
  right: 0;
}

/* Classic seat hitboxes: keep the right station in the table stage and the
   bottom seat above the existing rack geometry without changing the rack or
   any other station. */
@media (min-width: 901px) {
  .match-panel.normal-okey.table-theme-classic .nok-station-right {
    right: 0 !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-station-bottom {
    top: auto !important;
    bottom: calc(var(--classic-rack-bottom) + var(--classic-rack-height) + var(--classic-cluster-player-gap)) !important;
  }
}

/* Normal Okey V1 scoreboard: compact, state-only presentation below the
   existing table information card.  It does not participate in table/seat,
   rack, tile, or chat layout contracts. */
.match-panel.normal-okey .normal-okey-scoreboard[hidden] {
  display: none !important;
}

.match-panel.normal-okey .normal-okey-scoreboard {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid rgba(218, 170, 104, .22);
}

.match-panel.normal-okey .normal-okey-scoreboard-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 6px;
  color: var(--nok-accent);
  font-size: 10px;
  letter-spacing: .08em;
}

.match-panel.normal-okey .normal-okey-scoreboard-heading span {
  color: var(--nok-muted);
  font-size: 9px;
  letter-spacing: 0;
  white-space: nowrap;
}

.match-panel.normal-okey .normal-okey-scoreboard-rows {
  display: grid;
  gap: 3px;
  max-height: min(27vh, 180px);
  overflow: auto;
}

.match-panel.normal-okey .normal-okey-scoreboard-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto minmax(24px, auto) auto;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 3px 4px;
  border: 1px solid rgba(218, 170, 104, .14);
  border-radius: 4px;
  background: rgba(0, 0, 0, .14);
  color: var(--nok-text);
  font-size: 10px;
  line-height: 1.15;
}

.match-panel.normal-okey .normal-okey-scoreboard-row-double {
  grid-template-columns: 18px auto minmax(0, 1fr) minmax(24px, auto) auto;
}

.match-panel.normal-okey .normal-okey-scoreboard-rank,
.match-panel.normal-okey .normal-okey-scoreboard-seat,
.match-panel.normal-okey .normal-okey-scoreboard-status {
  color: var(--nok-muted);
  font-size: 9px;
}

.match-panel.normal-okey .normal-okey-scoreboard-name,
.match-panel.normal-okey .normal-okey-scoreboard-team,
.match-panel.normal-okey .normal-okey-scoreboard-members {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-panel.normal-okey .normal-okey-scoreboard-score {
  color: #f5cf81;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.match-panel.normal-okey .normal-okey-scoreboard-status {
  color: #ff9b90;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .match-panel.normal-okey .normal-okey-scoreboard-row {
    font-size: clamp(9px, 2.3vw, 10px);
  }
}

/* PREMIUM_DRAW_STACK_LAYERS=YES: enlarge only the Premium desktop deck while
   keeping its root and decorative layers inside the existing pile box. */
@media (min-width: 901px) {
  .match-panel.normal-okey.table-theme-premium .draw-stack.nok-draw-stack {
    width: 54px;
    height: 70px;
  }

  .match-panel.normal-okey.table-theme-premium .draw-stack.nok-draw-stack > i {
    display: block;
    box-sizing: border-box;
    position: absolute;
    width: 46px;
    height: 62px;
    border: 1px solid var(--accent);
    border-radius: 4px;
    background: inherit;
    box-shadow: 1px 2px 3px rgba(0, 0, 0, .28);
    pointer-events: none;
    z-index: 0;
  }

  .match-panel.normal-okey.table-theme-premium .draw-stack.nok-draw-stack > i:nth-child(1) {
    left: 0;
    top: 8px;
  }

  .match-panel.normal-okey.table-theme-premium .draw-stack.nok-draw-stack > i:nth-child(2) {
    left: 4px;
    top: 4px;
  }

  .match-panel.normal-okey.table-theme-premium .draw-stack.nok-draw-stack > i:nth-child(3) {
    left: 8px;
    top: 0;
  }
}

/* PREMIUM_DISCARD_HISTORY_V1=YES: render each seat's latest five discard
   faces in compact desktop-only lanes.  The global 42x58 discard contract,
   Classic/mobile layout, and all station/center stacking contracts remain
   unchanged. */
@media (min-width: 901px) {
  .match-panel.normal-okey.table-theme-premium #discardSeat1,
  .match-panel.normal-okey.table-theme-premium #discardSeat2,
  .match-panel.normal-okey.table-theme-premium #discardSeat3,
  .match-panel.normal-okey.table-theme-premium #discardSeat4 {
    width: 113px !important;
    min-width: 113px !important;
    height: 30px !important;
    min-height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 2px !important;
    overflow: visible !important;
    transform: none !important;
  }

  .match-panel.normal-okey.table-theme-premium #discardSeat1 {
    top: 66.67% !important;
    right: auto !important;
    bottom: auto !important;
    left: 67.1% !important;
  }

  .match-panel.normal-okey.table-theme-premium #discardSeat2 {
    top: 33.33% !important;
    right: auto !important;
    bottom: auto !important;
    left: 67.1% !important;
  }

  .match-panel.normal-okey.table-theme-premium #discardSeat3 {
    top: 8.89% !important;
    right: auto !important;
    bottom: auto !important;
    left: 67.1% !important;
  }

  .match-panel.normal-okey.table-theme-premium #discardSeat4 {
    top: 33.33% !important;
    right: auto !important;
    bottom: auto !important;
    left: 14% !important;
  }

  .match-panel.normal-okey.table-theme-premium .seat-discards,
  .match-panel.normal-okey.table-theme-premium .discard-stack,
  .match-panel.normal-okey.table-theme-premium .discard-tile-back,
  .match-panel.normal-okey.table-theme-premium .seat-discards .board-tile {
    pointer-events: none !important;
  }

  .match-panel.normal-okey.table-theme-premium
    .seat-discards .board-tile.drawable {
    pointer-events: auto !important;
  }

  .match-panel.normal-okey.table-theme-premium .discard-stack {
    position: static !important;
    display: flex !important;
    flex: 0 0 113px !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 2px !important;
    width: 113px !important;
    height: 30px !important;
    overflow: visible !important;
  }

  .match-panel.normal-okey.table-theme-premium .discard-tile-back,
  .match-panel.normal-okey.table-theme-premium .discard-stack .board-tile {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 21px !important;
    width: 21px !important;
    height: 30px !important;
    min-width: 21px !important;
    min-height: 30px !important;
    box-sizing: border-box !important;
    transform: none !important;
    border-radius: 3px !important;
    font-size: 9px !important;
  }
}

/* NORMAL_OKEY_TURN_NICKNAME_AVATAR_HIGHLIGHT=YES */
.match-panel.normal-okey .player-seat.active .seat-identity > strong {
  color: #ffda70 !important;
  transform: scale(1.12);
  transform-origin: left center;
}

.match-panel.normal-okey .player-seat.active .seat-avatar {
  border-color: #ffda70 !important;
  box-shadow: 0 0 0 2px rgba(255, 218, 112, .58), 0 0 14px rgba(255, 218, 112, .48), 0 6px 14px rgba(0, 0, 0, .36) !important;
}
.match-panel.normal-okey .chat-form{grid-template-columns:minmax(0,1fr) auto auto}.match-panel.normal-okey .speech-to-text-button{width:34px;min-width:34px;height:34px;padding:7px}

/* NORMAL_OKEY_THEME_STAGE_1B_START */
/* Stage 1B: five-theme visual finish.  This section is paint-only: it does
   not own layout, tile geometry, seat coordinates, action wiring, or chat
   structure. */
.match-panel.normal-okey.table-theme-classic {
  --table-surface: #176449;
  --table-surface-deep: #082d24;
  --table-surface-highlight: #3c956b;
  --table-border: #704522;
  --table-inner-border: rgba(255, 224, 161, .3);
  --presentation-bg: radial-gradient(circle at 48% 42%, rgba(71, 151, 104, .2), transparent 37%), radial-gradient(circle at 8% 92%, rgba(127, 76, 35, .22), transparent 24%), linear-gradient(135deg, #17100b, #2a1b12 48%, #081c16);
  --rack-bg: linear-gradient(180deg, #a96e3f, #70421f 62%, #3d2415);
  --rack-border: #c38b50;
  --panel-bg: linear-gradient(145deg, rgba(38, 67, 52, .96), rgba(10, 28, 22, .98));
  --panel-bg-solid: #13271f;
  --panel-border: rgba(213, 160, 91, .52);
  --accent: #e9bd68;
  --accent-strong: #ffe1a0;
  --tile-face: #fffdf5;
  --tile-border: #d7c8a7;
  --avatar-frame: #efc16e;
  --avatar-halo: rgba(239, 193, 110, .22);
  --theme-table-shadow: 0 0 0 6px #704522, 0 0 0 11px rgba(48, 27, 15, .98), 0 24px 48px rgba(0, 0, 0, .58), inset 0 0 0 2px rgba(255, 231, 174, .28);
  --theme-panel-shadow: 0 18px 34px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 245, 211, .1);
}

.match-panel.normal-okey.table-theme-modern {
  --table-surface: #153f68;
  --table-surface-deep: #050d1b;
  --table-surface-highlight: #2d6d9c;
  --table-border: #3fa8d4;
  --table-inner-border: rgba(117, 224, 255, .34);
  --presentation-bg: radial-gradient(circle at 50% 38%, rgba(57, 145, 214, .2), transparent 37%), radial-gradient(circle at 92% 12%, rgba(64, 190, 231, .14), transparent 23%), linear-gradient(135deg, #040914, #0b1b31 52%, #02050b);
  --rack-bg: linear-gradient(180deg, #496c80, #263f53 62%, #101c2b);
  --rack-border: #63c7e5;
  --panel-bg: linear-gradient(145deg, rgba(16, 42, 67, .94), rgba(4, 14, 27, .98));
  --panel-bg-solid: #0b1b2e;
  --panel-border: rgba(83, 190, 226, .56);
  --accent: #61d6ed;
  --accent-strong: #b8f5ff;
  --tile-face: #f7fcff;
  --tile-border: #c7e4ed;
  --avatar-frame: #68d9ef;
  --avatar-halo: rgba(104, 217, 239, .24);
  --theme-table-shadow: 0 0 0 5px #1e6b9c, 0 0 0 9px rgba(3, 12, 27, .98), 0 24px 52px rgba(0, 0, 0, .68), 0 0 28px rgba(49, 183, 237, .22), inset 0 0 0 2px rgba(153, 239, 255, .28);
  --theme-panel-shadow: 0 18px 34px rgba(0, 0, 0, .48), 0 0 18px rgba(42, 165, 218, .08), inset 0 1px rgba(219, 250, 255, .1);
}

.match-panel.normal-okey.table-theme-premium {
  --table-surface: #24272d;
  --table-surface-deep: #050609;
  --table-surface-highlight: #41464e;
  --table-border: #c7a15b;
  --table-inner-border: rgba(255, 220, 145, .3);
  --presentation-bg: radial-gradient(circle at 50% 18%, rgba(219, 173, 86, .13), transparent 28%), repeating-linear-gradient(121deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 16px), repeating-linear-gradient(31deg, transparent 0 43px, rgba(208, 164, 83, .04) 44px 45px, transparent 46px 96px), linear-gradient(135deg, #030406, #17191e 53%, #020204);
  --rack-bg: linear-gradient(180deg, #5f5547, #302a25 62%, #151515);
  --rack-border: #d3ae68;
  --panel-bg: linear-gradient(145deg, rgba(38, 39, 44, .96), rgba(7, 8, 11, .99));
  --panel-bg-solid: #121419;
  --panel-border: rgba(224, 183, 101, .56);
  --accent: #d9ad5f;
  --accent-strong: #ffe2a0;
  --tile-face: #fffaf0;
  --tile-border: #e3d1a8;
  --avatar-frame: #e4bd76;
  --avatar-halo: rgba(228, 189, 118, .22);
  --theme-table-shadow: 0 0 0 5px #c49b55, 0 0 0 10px rgba(8, 8, 10, .99), 0 26px 56px rgba(0, 0, 0, .78), inset 0 0 0 2px rgba(255, 228, 163, .28);
  --theme-panel-shadow: 0 20px 38px rgba(0, 0, 0, .62), inset 0 1px rgba(255, 235, 181, .1);
}

.match-panel.normal-okey.table-theme-nature {
  --table-surface: #2d754d;
  --table-surface-deep: #0b2b1c;
  --table-surface-highlight: #5aa875;
  --table-border: #80603a;
  --table-inner-border: rgba(231, 221, 164, .3);
  --presentation-bg: radial-gradient(ellipse at 5% 88%, rgba(91, 151, 84, .27), transparent 22%), radial-gradient(ellipse at 95% 17%, rgba(108, 166, 88, .22), transparent 21%), radial-gradient(ellipse at 82% 90%, rgba(179, 139, 73, .14), transparent 19%), linear-gradient(135deg, #0b1a11, #234c31 51%, #07110b);
  --rack-bg: linear-gradient(180deg, #aa7b47, #6c4828 62%, #332317);
  --rack-border: #c69a5c;
  --panel-bg: linear-gradient(145deg, rgba(38, 80, 51, .95), rgba(8, 28, 18, .98));
  --panel-bg-solid: #163421;
  --panel-border: rgba(197, 165, 98, .52);
  --accent: #d8bb72;
  --accent-strong: #f3d99b;
  --tile-face: #fffdf3;
  --tile-border: #d8c79f;
  --avatar-frame: #d8bb72;
  --avatar-halo: rgba(216, 187, 114, .22);
  --theme-table-shadow: 0 0 0 6px #80603a, 0 0 0 11px rgba(20, 42, 25, .98), 0 24px 50px rgba(0, 0, 0, .54), inset 0 0 0 2px rgba(238, 227, 171, .24);
  --theme-panel-shadow: 0 18px 34px rgba(0, 0, 0, .4), inset 0 1px rgba(238, 243, 205, .1);
}

.match-panel.normal-okey.table-theme-black {
  --table-surface: #11151a;
  --table-surface-deep: #020304;
  --table-surface-highlight: #252d35;
  --table-border: #7d2935;
  --table-inner-border: rgba(255, 83, 96, .28);
  --presentation-bg: radial-gradient(circle at 50% 32%, rgba(132, 25, 38, .16), transparent 31%), radial-gradient(circle at 94% 8%, rgba(255, 56, 70, .12), transparent 19%), linear-gradient(135deg, #020304, #0d1116 54%, #010101);
  --rack-bg: linear-gradient(180deg, #343a40, #1c2126 62%, #090b0d);
  --rack-border: #6d2933;
  --panel-bg: linear-gradient(145deg, rgba(25, 29, 34, .98), rgba(4, 6, 8, .99));
  --panel-bg-solid: #0b0d10;
  --panel-border: rgba(196, 50, 63, .48);
  --accent: #ed5964;
  --accent-strong: #ff9ba2;
  --tile-face: #fffefa;
  --tile-border: #d9dee0;
  --avatar-frame: #ff5f6b;
  --avatar-halo: rgba(255, 79, 91, .22);
  --deck-top: #4d2027;
  --deck-bottom: #17080c;
  --theme-table-shadow: 0 0 0 4px #6e202c, 0 0 0 9px rgba(0, 0, 0, .99), 0 24px 52px rgba(0, 0, 0, .78), 0 0 26px rgba(244, 46, 64, .22), inset 0 0 0 2px rgba(255, 91, 104, .22);
  --theme-panel-shadow: 0 20px 40px rgba(0, 0, 0, .64), 0 0 18px rgba(226, 39, 55, .08), inset 0 1px rgba(255, 230, 232, .08);
}

.match-panel.normal-okey > .nok-presentation {
  background: var(--presentation-bg) !important;
}
.match-panel.normal-okey .nok-table {
  background: radial-gradient(ellipse at center, var(--table-surface-highlight) 0, var(--table-surface) 57%, var(--table-surface-deep) 100%) !important;
  border-color: var(--table-border) !important;
  box-shadow: var(--theme-table-shadow) !important;
}
.match-panel.normal-okey .nok-logo-card,
.match-panel.normal-okey .nok-info-panel,
.match-panel.normal-okey .nok-right-column,
.match-panel.normal-okey .nok-chat-panel,
.match-panel.normal-okey .nok-treat-panel,
.match-panel.normal-okey .nok-radio-panel,
.match-panel.normal-okey .nok-action-bar {
  border-color: var(--panel-border) !important;
  background: var(--panel-bg) !important;
  box-shadow: var(--theme-panel-shadow) !important;
}
.match-panel.normal-okey .nok-top-controls button,
.match-panel.normal-okey .nok-live-actions button,
.match-panel.normal-okey .normal-okey-side-controls button,
.match-panel.normal-okey .nok-action-bar button,
.match-panel.normal-okey .theme-picker select,
.match-panel.normal-okey .okey-smart-assist-control select,
.match-panel.normal-okey .speech-to-text-button {
  border-color: var(--control-border) !important;
  background: var(--control-bg) !important;
  color: var(--text-main) !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .22);
}
.match-panel.normal-okey .nok-top-controls button:hover,
.match-panel.normal-okey .nok-live-actions button:hover,
.match-panel.normal-okey .normal-okey-side-controls button:hover,
.match-panel.normal-okey .nok-action-bar button:hover:not(:disabled),
.match-panel.normal-okey .speech-to-text-button:hover {
  border-color: var(--accent-strong) !important;
  background: var(--control-hover) !important;
  box-shadow: 0 0 16px var(--avatar-halo), 0 8px 18px rgba(0, 0, 0, .28);
}
.match-panel.normal-okey .normal-okey-rack-zone {
  border-color: var(--rack-border) !important;
  background: var(--rack-bg) !important;
}
.match-panel.normal-okey .nok-center-brand,
.match-panel.normal-okey .nok-logo-card strong,
.match-panel.normal-okey .nok-info-panel dd,
.match-panel.normal-okey .nok-pile-box strong {
  color: var(--accent-strong) !important;
}
.match-panel.normal-okey .player-seat {
  border-color: var(--panel-border) !important;
  background: var(--panel-bg) !important;
}
.match-panel.normal-okey .seat-avatar {
  border-color: var(--avatar-frame) !important;
  box-shadow: 0 0 0 3px var(--avatar-halo), 0 6px 14px rgba(0, 0, 0, .36);
}
.match-panel.normal-okey .player-seat.active .seat-identity > strong {
  color: var(--accent-strong) !important;
}
.match-panel.normal-okey .player-seat.active .seat-avatar {
  border-color: var(--accent-strong) !important;
  box-shadow: 0 0 0 2px var(--avatar-halo), 0 0 16px var(--avatar-halo), 0 6px 14px rgba(0, 0, 0, .36) !important;
}

/* NORMAL_OKEY_THEME_STAGE_1B_END */
/* NORMAL_OKEY_CLASSIC_LEGACY_GEOMETRY_START */
/* Stage 1C legacy compatibility geometry.  This historical layer is kept
   for source-contract history but is intentionally non-authoritative; the
   consolidated final Classic geometry owner is the section at EOF.  The
   Classic layers above describe approved reference proportions, but several
   later compatibility repairs re-used different containing-block math.  Keep
   its declarations available for audit without activating a second desktop
   composition. */
@media (min-width: 901px) and (max-width: 0px) {
  .match-panel.normal-okey.table-theme-classic > .nok-presentation {
    --classic-live-rack-top: 75%;
    --classic-live-rack-height: clamp(104px, 13vh, 132px);
    --classic-live-player-height: clamp(70px, 8vh, 82px);
    --classic-live-player-gap: clamp(7px, .8vh, 10px);
    --classic-live-action-gap: clamp(7px, .8vh, 10px);
    --classic-live-action-height: clamp(42px, 5vh, 50px);
  }

  /* The four station wrappers are table-local overlays.  Their dimensions
     are deliberately bounded so the player cards cannot enter the action
     band or the social column. */
  .match-panel.normal-okey.table-theme-classic .nok-station-top,
  .match-panel.normal-okey.table-theme-classic .nok-station-left,
  .match-panel.normal-okey.table-theme-classic .nok-station-right,
  .match-panel.normal-okey.table-theme-classic .nok-station-bottom {
    position: absolute !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-station-top {
    top: -112px !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    width: min(240px, 28%) !important;
    height: 148px !important;
    transform: translateX(-50%) !important;
    z-index: 12 !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-station-top .player-seat {
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    transform: translateX(-50%) !important;
    flex-direction: column !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-station-top .seat-avatar {
    width: clamp(54px, 4.8vw, 64px) !important;
    height: clamp(54px, 4.8vw, 64px) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-station-top .opponent-rack {
    width: 100% !important;
    height: clamp(28px, 3.8vh, 40px) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-station-left,
  .match-panel.normal-okey.table-theme-classic .nok-station-right {
    top: 22% !important;
    width: min(240px, 24%) !important;
    height: clamp(132px, 17vh, 160px) !important;
    transform: none !important;
    z-index: 10 !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-station-left {
    right: auto !important;
    bottom: auto !important;
    left: -18px !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-station-right {
    right: -18px !important;
    bottom: auto !important;
    left: auto !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-station-left .player-seat,
  .match-panel.normal-okey.table-theme-classic .nok-station-right .player-seat {
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    left: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    transform: none !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-station-right .player-seat {
    right: 0 !important;
    left: auto !important;
    flex-direction: row-reverse !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-station-left .player-seat {
    flex-direction: row !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-station-left .opponent-rack,
  .match-panel.normal-okey.table-theme-classic .nok-station-right .opponent-rack {
    width: clamp(52px, 4.8vw, 64px) !important;
    height: clamp(68px, 8.8vh, 86px) !important;
  }

  /* The bottom player is a compact horizontal card immediately above the
     rack.  The rack itself is smaller than the old full-height frame, while
     retaining the existing two-row hand and rack-skin DOM. */
  .match-panel.normal-okey.table-theme-classic .nok-station-bottom {
    top: calc(var(--classic-live-rack-top) - var(--classic-live-player-height) - var(--classic-live-player-gap)) !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    width: min(270px, 34%) !important;
    height: var(--classic-live-player-height) !important;
    min-height: var(--classic-live-player-height) !important;
    transform: translateX(-50%) !important;
    z-index: 24 !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-station-bottom .player-seat {
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    transform: translateX(-50%) !important;
    flex-direction: row !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-own-station {
    top: var(--classic-live-rack-top) !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    width: min(860px, 84%) !important;
    height: var(--classic-live-rack-height) !important;
    min-height: var(--classic-live-rack-height) !important;
    transform: translateX(-50%) !important;
    overflow: visible !important;
    z-index: 22 !important;
  }

  .match-panel.normal-okey.table-theme-classic .normal-okey-rack-zone {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  /* Visible controls flow compactly in DOM order.  Hidden controls do not
     leave empty tracks, so the row remains deliberate at every live state. */
  .match-panel.normal-okey.table-theme-classic .nok-live-actions {
    top: calc(var(--classic-live-rack-top) + var(--classic-live-rack-height) + var(--classic-live-action-gap)) !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    width: min(860px, 84%) !important;
    height: var(--classic-live-action-height) !important;
    min-height: var(--classic-live-action-height) !important;
    display: grid !important;
    grid-auto-flow: column !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: clamp(5px, .5vw, 8px) !important;
    transform: translateX(-50%) !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    overflow: visible !important;
    z-index: 35 !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions:has(#showIndicatorButton:not([hidden])):not(:has(#forfeitTableButton:not([hidden]))),
  .match-panel.normal-okey.table-theme-classic .nok-live-actions:has(#showIndicatorButton[hidden]):has(#forfeitTableButton:not([hidden])) {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions:has(#showIndicatorButton:not([hidden])):has(#forfeitTableButton:not([hidden])) {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions > #drawPileButton,
  .match-panel.normal-okey.table-theme-classic .nok-live-actions > #discardPileButton,
  .match-panel.normal-okey.table-theme-classic .nok-live-actions > #discardButton,
  .match-panel.normal-okey.table-theme-classic .nok-live-actions > #finishButton,
  .match-panel.normal-okey.table-theme-classic .nok-live-actions > #showIndicatorButton,
  .match-panel.normal-okey.table-theme-classic .nok-live-actions > #okeyAutoPlayButton,
  .match-panel.normal-okey.table-theme-classic .nok-live-actions > #forfeitTableButton {
    grid-column: auto !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-live-actions button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    height: 100% !important;
    padding: 4px clamp(5px, .55vw, 9px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    line-height: 1.1 !important;
    font-size: clamp(10px, .82vw, 13px) !important;
  }

  /* Move the center stack down from the stale upper-third anchor while
     leaving the board center and discard data contract untouched. */
  .match-panel.normal-okey.table-theme-classic .nok-center {
    top: 38% !important;
    z-index: 8 !important;
  }

  .match-panel.normal-okey.table-theme-classic .nok-center-brand {
    top: 51% !important;
    z-index: 6 !important;
  }
}
/* NORMAL_OKEY_CLASSIC_LEGACY_GEOMETRY_END */

/* NORMAL_OKEY_CLASSIC_FINAL_GEOMETRY_START */
/* Consolidated final Classic desktop geometry authority.  This is the only
   active Classic geometry owner.  It uses one real DOM and does not
   replace seats, handTiles, tiles, action IDs, chat, or their handlers. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation {
    /* WAVE-23B: the supplied KLASİK-ANA-REFERANS is 1536x1024.  Keep one
       reference coordinate system so the table silhouette is scaled from the
       actual authority instead of the retired 1505x1045 approximation. */
    --classic-reference-viewport-width: 1536px;
    --classic-reference-viewport-height: 1024px;
    --classic-reference-scale: clamp(.58, min(calc(100vw / 1536px), calc(100vh / 1024px)), 1.24);
    --classic-reference-scale-x: var(--classic-reference-scale);
    --classic-reference-scale-y: var(--classic-reference-scale);
    --classic-reference-page-pad: calc(8px * var(--classic-reference-scale-x));
    --classic-reference-social-width: calc(328px * var(--classic-reference-scale-x));
    --classic-reference-main-gap: calc(18px * var(--classic-reference-scale-x));
    --classic-reference-stage-left: calc(77px * var(--classic-reference-scale-x));
    --classic-reference-stage-top: calc(312px * var(--classic-reference-scale-y));
    --classic-reference-stage-bottom: calc(65px * var(--classic-reference-scale-y));
    /* Root gameplay plane: 1020x418.  The shell's -14/-16/-28 inset expands
       this to the measured ~1048x462 visible furniture silhouette. */
    --classic-reference-table-width: calc(1020px * var(--classic-reference-scale-x));
    --classic-reference-table-height: calc(418px * var(--classic-reference-scale-y));
    --classic-reference-table-outer-width: calc(1048px * var(--classic-reference-scale-x));
    --classic-reference-table-outer-height: calc(444px * var(--classic-reference-scale-y));
    --classic-reference-side-station-inset: 0px;
    --classic-reference-lower-width: calc(716px * var(--classic-reference-scale-x));
    --classic-reference-rack-gap: 0px;
    /* The rack is derived from the real 8x2 hand grid: two tall upright tile
       rows plus only the wood needed to seat and retain them. */
    --classic-reference-rack-tile-row-height: calc(78px * var(--classic-reference-scale-y));
    --classic-reference-rack-row-gap: calc(6px * var(--classic-reference-scale-y));
    --classic-reference-rack-column-gap: calc(5px * var(--classic-reference-scale-x));
    --classic-reference-rack-grid-padding: calc(1px * var(--classic-reference-scale-y));
    --classic-reference-rack-rear-rail-height: calc(14px * var(--classic-reference-scale-y));
    --classic-reference-rack-middle-ledge-height: calc(8px * var(--classic-reference-scale-y));
    --classic-reference-rack-lower-ledge-height: calc(9px * var(--classic-reference-scale-y));
    --classic-reference-rack-front-rail-height: calc(29px * var(--classic-reference-scale-y));
    --classic-reference-rack-height: calc(
      var(--classic-reference-rack-rear-rail-height) +
      (var(--classic-reference-rack-tile-row-height) * 2) +
      var(--classic-reference-rack-row-gap) +
      (var(--classic-reference-rack-grid-padding) * 2) +
      var(--classic-reference-rack-front-rail-height)
    );
    --classic-reference-action-gap: calc(5px * var(--classic-reference-scale-y));
    --classic-reference-live-action-height: calc(47px * var(--classic-reference-scale-y));
    --classic-reference-auxiliary-gap: calc(2px * var(--classic-reference-scale-y));
    --classic-reference-auxiliary-height: calc(31px * var(--classic-reference-scale-y));
    --classic-reference-smart-help-height: calc(35px * var(--classic-reference-scale-y));
    --classic-reference-own-player-clearance: calc(10px * var(--classic-reference-scale-y));
    --classic-reference-own-player-height: calc(84px * var(--classic-reference-scale-y));
    --classic-reference-own-rack-offset: calc(36px * var(--classic-reference-scale-y));
    /* WAVE-26: reference-aligned side stations start near the table's far
       shoulder; the station width/height and rack anchors remain unchanged. */
    --classic-reference-side-station-top: calc(20px * var(--classic-reference-scale-y));
    --classic-reference-navigation-bottom: calc(5px * var(--classic-reference-scale-y));
    --classic-reference-navigation-height: calc(28px * var(--classic-reference-scale-y));
    --classic-reference-smart-help-bottom-offset: calc(35px * var(--classic-reference-scale-y));
    --classic-reference-header-height: calc(126px * var(--classic-reference-scale-y));
    --classic-reference-status-height: calc(27px * var(--classic-reference-scale-y));
    --classic-reference-status-gap: calc(4px * var(--classic-reference-scale-y));
    /* Occupied-game visual tokens.  These enlarge only the live participant
       cards and the painted center/hand objects; station ownership,
       containing blocks, rack material, and gameplay geometry remain intact. */
    --classic-occupied-top-avatar: calc(52px * var(--classic-reference-scale-x));
    --classic-occupied-side-avatar: calc(54px * var(--classic-reference-scale-x));
    --classic-occupied-own-avatar: calc(62px * var(--classic-reference-scale-x));
    --classic-occupied-card-name-size: calc(16px * var(--classic-reference-scale-x));
    --classic-occupied-card-meta-size: calc(10px * var(--classic-reference-scale-x));
    --classic-occupied-card-score-size: calc(12px * var(--classic-reference-scale-x));
    position: relative !important;
    display: block !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    transform: none !important;
    background:
      linear-gradient(135deg, rgba(9, 5, 3, .38), rgba(25, 12, 5, .18) 46%, rgba(2, 12, 17, .48)),
      url("/okey/classic/normal-okey-classic-room.jpg") center / cover no-repeat !important;
  }

  #matchPanel.normal-okey.table-theme-classic .normal-okey-header {
    display: contents !important;
  }

  /* Header controls and the live status/theme controls remain one fallback
     band below the wide-desktop composition threshold. */
  #matchPanel.normal-okey.table-theme-classic .nok-statusbar {
    position: absolute !important;
    top: calc(208px * var(--classic-reference-scale-y)) !important;
    right: calc(var(--classic-reference-social-width) + var(--classic-reference-main-gap)) !important;
    left: var(--classic-reference-page-pad) !important;
    width: auto !important;
    height: var(--classic-reference-status-height) !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 0 7px !important;
    overflow: hidden !important;
    border: 1px solid rgba(215, 154, 53, .46) !important;
    border-radius: 8px !important;
    background: rgba(7, 17, 14, .88) !important;
    z-index: 39 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-game-status-panel,
  #matchPanel.normal-okey.table-theme-classic .nok-settings-panel {
    display: contents !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-statusbar .nok-game-status-panel > span,
  #matchPanel.normal-okey.table-theme-classic .nok-statusbar .nok-settings-panel > span,
  #matchPanel.normal-okey.table-theme-classic .nok-statusbar .nok-settings-panel > label {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-statusbar .nok-settings-panel > .theme-picker,
  #matchPanel.normal-okey.table-theme-classic .nok-statusbar .nok-settings-panel > .rack-skin-picker,
  #matchPanel.normal-okey.table-theme-classic .nok-statusbar .nok-settings-panel > .okey-smart-assist-control {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    font-size: 8px !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-statusbar .nok-game-status-panel > span:not(.turn-timer) {
    padding: 4px 8px !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, .07) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-statusbar .nok-settings-panel > label.theme-picker {
    margin-left: 10px !important;
    border-left: 1px solid rgba(221, 173, 89, .35) !important;
    padding-left: 9px !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-statusbar .nok-settings-panel select {
    min-width: 0 !important;
    max-width: 104px !important;
    height: 24px !important;
    padding: 2px 4px !important;
    font-size: 8px !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-statusbar .nok-game-status-panel > #turnText,
  #matchPanel.normal-okey.table-theme-classic .nok-statusbar .nok-game-status-panel > #phaseText {
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-statusbar .nok-game-status-panel > #turnTimer {
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-statusbar .nok-settings-panel > label.theme-picker,
  #matchPanel.normal-okey.table-theme-classic .nok-statusbar .nok-settings-panel > label.rack-skin-picker,
  #matchPanel.normal-okey.table-theme-classic .nok-statusbar .nok-settings-panel > label.okey-smart-assist-control {
    font-size: 9px !important;
    font-weight: 600 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-statusbar .nok-settings-panel > label.theme-picker select,
  #matchPanel.normal-okey.table-theme-classic .nok-statusbar .nok-settings-panel > label.rack-skin-picker select,
  #matchPanel.normal-okey.table-theme-classic .nok-statusbar .nok-settings-panel > label.okey-smart-assist-control select {
    font-size: 9px !important;
  }

  /* Preserve the pre-composition fallback order when the semantic wrappers
     participate in the existing 901px+ status row. */
  #matchPanel.normal-okey.table-theme-classic .nok-statusbar .nok-game-status-panel > *,
  #matchPanel.normal-okey.table-theme-classic .nok-statusbar .nok-test-mode-companion {
    order: 0 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-statusbar .nok-test-mode-companion {
    order: 1 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-statusbar .nok-settings-panel > label {
    order: 2 !important;
  }

  /* Header: logo, table information, then the existing control buttons. */
  #matchPanel.normal-okey.table-theme-classic .nok-logo-card {
    position: absolute !important;
    top: calc(24px * var(--classic-reference-scale-y)) !important;
    left: var(--classic-reference-page-pad) !important;
    width: calc(229px * var(--classic-reference-scale-x)) !important;
    /* The approved logo outer frame is 229x132; the table-information panel
       keeps the existing 229x126 reference height. */
    height: calc(132px * var(--classic-reference-scale-y)) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 16px 10px 9px !important;
    border: 2px solid #d79a35 !important;
    border-radius: 11px !important;
    background: linear-gradient(145deg, rgba(8, 9, 8, .97), rgba(35, 19, 8, .96)) !important;
    box-shadow: inset 0 0 0 2px rgba(215, 154, 53, .24), 0 9px 22px rgba(0, 0, 0, .48) !important;
    z-index: 40 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-logo-card::before {
    content: "♛" !important;
    display: block !important;
    height: 17px !important;
    color: #ffd45e !important;
    font-size: clamp(17px, 1.6vw, 24px) !important;
    line-height: 1 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-logo-card strong {
    color: #ffe7a0 !important;
    font-size: clamp(18px, 2vw, 29px) !important;
    letter-spacing: .04em !important;
    line-height: 1 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-logo-card span {
    margin-top: 3px !important;
    color: #f8d762 !important;
    font-size: clamp(9px, .9vw, 14px) !important;
    letter-spacing: .14em !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-left-column {
    position: absolute !important;
    top: calc(24px * var(--classic-reference-scale-y)) !important;
    left: calc(245px * var(--classic-reference-scale-x)) !important;
    width: calc(208px * var(--classic-reference-scale-x)) !important;
    height: var(--classic-reference-header-height) !important;
    margin: 0 !important;
    z-index: 40 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-info-panel {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(215, 154, 53, .72) !important;
    border-radius: 10px !important;
    background: linear-gradient(145deg, rgba(7, 13, 12, .96), rgba(18, 25, 22, .95)) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 220, 133, .12), 0 9px 20px rgba(0, 0, 0, .42) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-info-panel dl {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px 9px !important;
    margin: 0 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-info-panel dl > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-info-panel dt {
    color: #aebfae !important;
    font-size: 8px !important;
    line-height: 1 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-info-panel dd {
    max-width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: #fff4d3 !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    text-align: left !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-top-controls {
    position: absolute !important;
    top: calc(33px * var(--classic-reference-scale-y)) !important;
    right: calc(153px * var(--classic-reference-scale-x)) !important;
    left: calc(461px * var(--classic-reference-scale-x)) !important;
    width: auto !important;
    height: calc(58px * var(--classic-reference-scale-y)) !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: clamp(3px, .45vw, 7px) !important;
    overflow: visible !important;
    z-index: 40 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-top-controls button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 100% !important;
    padding: 0 clamp(4px, .7vw, 11px) !important;
    border: 1px solid rgba(90, 131, 177, .42) !important;
    border-radius: 9px !important;
    background: linear-gradient(180deg, #132f52, #071a31) !important;
    color: #f2f5fb !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 7px 16px rgba(0, 0, 0, .3) !important;
    font-size: clamp(10px, .85vw, 15px) !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-top-controls #leaveTableButton {
    flex-grow: 1.35 !important;
  }

  /* The playable scene is one large felt surface, with the social column
     isolated on the right and a reserved lower band for the rack/actions. */
  #matchPanel.normal-okey.table-theme-classic .nok-table-stage {
    position: absolute !important;
    top: var(--classic-reference-stage-top) !important;
    right: calc(var(--classic-reference-social-width) + var(--classic-reference-main-gap)) !important;
    bottom: var(--classic-reference-stage-bottom) !important;
    left: var(--classic-reference-stage-left) !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: block !important;
    overflow: visible !important;
    z-index: 4 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-table,
  #matchPanel.normal-okey.table-theme-classic #gameBoard {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    width: var(--classic-reference-table-width) !important;
    height: var(--classic-reference-table-height) !important;
    aspect-ratio: auto !important;
    min-height: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    border: 14px solid #5d3215 !important;
    border-radius: 38px 38px 50px 50px !important;
    background:
      radial-gradient(ellipse at 50% 42%, #328b69 0%, #176449 54%, #0a342a 100%) !important;
    box-shadow:
      0 0 0 6px #b8793f,
      0 0 0 11px rgba(44, 23, 12, .98),
      0 28px 46px rgba(0, 0, 0, .66),
      inset 0 0 0 2px rgba(255, 223, 155, .3),
      inset 0 -24px 38px rgba(0, 36, 28, .26) !important;
    overflow: visible !important;
  }

  /* WAVE-6 STRUCTURAL FURNITURE SHELL.  The board remains the rectangular
     gameplay coordinate plane; this first child owns the visible trapezoidal
     table, recessed felt, and front furniture planes. */
  #matchPanel.normal-okey.table-theme-classic .nok-visual-furniture-shell {
    position: absolute !important;
    inset: calc(-16px * var(--classic-reference-scale-x)) calc(-14px * var(--classic-reference-scale-x)) calc(-10px * var(--classic-reference-scale-y)) !important;
    display: block !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    /* WAVE-23B: the far edge is materially narrower than the near edge.  The
       lower edge is allowed to run nearly full width so the table reads as a
       single physical slab rather than a rectangular green panel. */
    /* WAVE-23B2: use one shared lower chamfer.  The former 98%/2% shoulder
       points created thin walnut wings at the two near corners. */
    clip-path: polygon(19% 0, 85% 0, 94% 88%, 96% 93%, 96% 100%, 4% 100%, 4% 93%, 6% 88%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-visual-furniture-shell::before {
    content: "" !important;
    position: absolute !important;
    /* WAVE-23B: deepen the walnut surround and carry the felt through the
       same far-to-near perspective as the outer shell. */
    inset: calc(26px * var(--classic-reference-scale-y)) calc(20px * var(--classic-reference-scale-x)) calc(25px * var(--classic-reference-scale-y)) !important;
    box-sizing: border-box !important;
    /* Keep the felt, inner walnut and outer walnut on the same physical
       lower-corner termination instead of letting the felt form near-edge
       points of its own. */
    clip-path: polygon(20% 0, 83% 0, 94% 88%, 96% 93%, 96% 100%, 4% 100%, 4% 93%, 6% 88%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-visual-furniture-shell::after {
    content: "" !important;
    position: absolute !important;
    left: 4% !important;
    right: 4% !important;
    bottom: 0 !important;
    height: 10% !important;
    box-sizing: border-box !important;
    /* WAVE-23B2: the parent shell supplies the only corner silhouette.  The
       fascia is a continuous physical plane, not a second polygon wing. */
    clip-path: inset(0) !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  /* Retain the transparent border width for the stable containing block, but
     remove the former rectangular paint and both obsolete table pseudo-shells. */
  #matchPanel.normal-okey.table-theme-classic .nok-table,
  #matchPanel.normal-okey.table-theme-classic #gameBoard {
    border-color: transparent !important;
    border-image: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-table::before,
  #matchPanel.normal-okey.table-theme-classic .nok-table::after {
    content: none !important;
    display: none !important;
    pointer-events: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-table::before {
    inset: 25px !important;
    border: 2px solid rgba(2, 34, 27, .7) !important;
    border-radius: 24px 24px 32px 32px !important;
  }

  /* Compact reference-like player stations.  The existing pseudo online
     indicator, nickname, score, and participant-owned IDs remain intact. */
  #matchPanel.normal-okey.table-theme-classic .nok-station-top,
  #matchPanel.normal-okey.table-theme-classic .nok-station-left,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right,
  #matchPanel.normal-okey.table-theme-classic .nok-station-bottom {
    position: absolute !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    z-index: 18 !important;
  }

  /* The station wrapper is only a positioning surface.  Identity data lives
     in the compact seat-identity card below, so the old full rectangular
     player-seat panel must not remain visible behind it. */
  #matchPanel.normal-okey.table-theme-classic .nok-station-top .player-seat,
  #matchPanel.normal-okey.table-theme-classic .nok-station-left .player-seat,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .player-seat,
  #matchPanel.normal-okey.table-theme-classic .nok-station-bottom .player-seat {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-top .player-seat.active,
  #matchPanel.normal-okey.table-theme-classic .nok-station-left .player-seat.active,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .player-seat.active,
  #matchPanel.normal-okey.table-theme-classic .nok-station-bottom .player-seat.active {
    border: 1px solid rgba(240, 198, 111, .58) !important;
    background: rgba(57, 44, 23, .22) !important;
    box-shadow: 0 0 0 2px rgba(240, 198, 111, .12), 0 10px 22px rgba(0, 0, 0, .24) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-top {
    top: calc(-184px * var(--classic-reference-scale-y)) !important;
    left: 50% !important;
    width: calc(260px * var(--classic-reference-scale-x)) !important;
    height: calc(116px * var(--classic-reference-scale-y)) !important;
    transform: translateX(-50%) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-top .player-seat {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-top .seat-avatar {
    width: calc(70px * var(--classic-reference-scale-x)) !important;
    height: calc(70px * var(--classic-reference-scale-y)) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-top .seat-identity {
    position: static !important;
    min-width: calc(175px * var(--classic-reference-scale-x)) !important;
    padding: calc(7px * var(--classic-reference-scale-y)) calc(10px * var(--classic-reference-scale-x)) !important;
    border: 1px solid rgba(221, 179, 114, .42) !important;
    border-radius: 9px !important;
    background: rgba(7, 13, 12, .94) !important;
    box-shadow: 0 7px 16px rgba(0, 0, 0, .34) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-top .seat-identity::after,
  #matchPanel.normal-okey.table-theme-classic .nok-station-left .seat-identity::after {
    top: calc(8px * var(--classic-reference-scale-y)) !important;
    right: calc(8px * var(--classic-reference-scale-x)) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-right .seat-identity::after {
    top: calc(8px * var(--classic-reference-scale-y)) !important;
    right: auto !important;
    left: calc(8px * var(--classic-reference-scale-x)) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-top .opponent-rack {
    position: absolute !important;
    top: calc(82px * var(--classic-reference-scale-y) + (4px * var(--classic-reference-scale-y))) !important;
    left: 50% !important;
    width: calc(326px * var(--classic-reference-scale-x)) !important;
    height: calc(61px * var(--classic-reference-scale-y)) !important;
    transform: translateX(-50%) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-left,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right {
    top: var(--classic-reference-side-station-top) !important;
    width: calc(330px * var(--classic-reference-scale-x)) !important;
    height: calc(258px * var(--classic-reference-scale-y)) !important;
    transform: none !important;
  }

  /* Side cards overlap the table edge only enough to stay fully visible; their
     concealed rails sit just inside the corresponding inner felt edge. */
  #matchPanel.normal-okey.table-theme-classic .nok-station-left {
    left: calc((100% - var(--classic-reference-table-width)) / 2 - (90px * var(--classic-reference-scale-x))) !important;
  }
  #matchPanel.normal-okey.table-theme-classic .nok-station-right {
    right: calc((100% - var(--classic-reference-table-width)) / 2 - (20px * var(--classic-reference-scale-x))) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-left .player-seat,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .player-seat {
    position: absolute !important;
    top: 0 !important;
    width: calc(230px * var(--classic-reference-scale-x)) !important;
    min-width: 0 !important;
    height: calc(160px * var(--classic-reference-scale-y)) !important;
    align-items: center !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    transform: none !important;
    z-index: 3 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-left .player-seat { left: 0 !important; flex-direction: row !important; }
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .player-seat { right: 0 !important; flex-direction: column !important; }

  #matchPanel.normal-okey.table-theme-classic .nok-station-left .seat-avatar,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .seat-avatar {
    width: calc(70px * var(--classic-reference-scale-x)) !important;
    height: calc(70px * var(--classic-reference-scale-y)) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-left .seat-identity,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .seat-identity {
    position: static !important;
    min-width: calc(158px * var(--classic-reference-scale-x)) !important;
    padding: calc(8px * var(--classic-reference-scale-y)) calc(10px * var(--classic-reference-scale-x)) !important;
    border: 1px solid rgba(221, 179, 114, .42) !important;
    border-radius: 9px !important;
    background: rgba(7, 13, 12, .94) !important;
    box-shadow: 0 7px 16px rgba(0, 0, 0, .34) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-left .opponent-rack,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .opponent-rack {
    position: absolute !important;
    top: calc(50% - (15px * var(--classic-reference-scale-y))) !important;
    width: calc(46px * var(--classic-reference-scale-x)) !important;
    height: calc(252px * var(--classic-reference-scale-y)) !important;
    transform: translateY(-50%) !important;
    z-index: 1 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-left .opponent-rack {
    left: calc(230px * var(--classic-reference-scale-x) + (8px * var(--classic-reference-scale-x))) !important;
    right: auto !important;
  }
  /* Side racks are positioned from the player-seat containing block.  This
     keeps the mirrored card/rack relationship stable after the identity card
     stops becoming the rack's accidental containing block. */
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .opponent-rack {
    left: auto !important;
    right: calc(230px * var(--classic-reference-scale-x) + (8px * var(--classic-reference-scale-x))) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-bottom .seat-avatar {
    width: calc(70px * var(--classic-reference-scale-x)) !important;
    height: calc(70px * var(--classic-reference-scale-y)) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-bottom .seat-identity {
    min-width: calc(150px * var(--classic-reference-scale-x)) !important;
    padding: calc(6px * var(--classic-reference-scale-y)) calc(9px * var(--classic-reference-scale-x)) !important;
    border: 1px solid rgba(221, 179, 114, .42) !important;
    border-radius: 9px !important;
    background: rgba(7, 13, 12, .94) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-bottom .opponent-rack { display: none !important; }

  #matchPanel.normal-okey.table-theme-classic .nok-station-top .seat-identity,
  #matchPanel.normal-okey.table-theme-classic .nok-station-left .seat-identity,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .seat-identity,
  #matchPanel.normal-okey.table-theme-classic .nok-station-bottom .seat-identity {
    font-size: calc(14px * var(--classic-reference-scale-x)) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-top .seat-identity strong,
  #matchPanel.normal-okey.table-theme-classic .nok-station-left .seat-identity strong,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .seat-identity strong,
  #matchPanel.normal-okey.table-theme-classic .nok-station-bottom .seat-identity strong {
    max-width: 100% !important;
    font-size: calc(14px * var(--classic-reference-scale-x)) !important;
    line-height: 1.08 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-top .seat-identity > small,
  #matchPanel.normal-okey.table-theme-classic .nok-station-left .seat-identity > small,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .seat-identity > small,
  #matchPanel.normal-okey.table-theme-classic .nok-station-bottom .seat-identity > small {
    font-size: calc(10px * var(--classic-reference-scale-x)) !important;
    line-height: 1.1 !important;
  }

  /* Keep the concealed opponent rack representation on the table edge; it
     exposes only the server-provided count and never a private tile face. */
  #matchPanel.normal-okey.table-theme-classic .opponent-rack {
    border: 2px solid #c58a4c !important;
    border-radius: 5px !important;
    background: repeating-linear-gradient(90deg, #a86b37 0 7px, #70421f 7px 10px) !important;
    box-shadow: inset 0 1px rgba(255, 235, 183, .34), 0 5px 12px rgba(0, 0, 0, .35) !important;
  }

  /* The reference keeps the felt dominant, but the center stack and brand
     still need enough visual weight to read as the table's focal point. */
  #matchPanel.normal-okey.table-theme-classic .nok-center-brand {
    top: 60% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: calc(340px * var(--classic-reference-scale-x)) !important;
    max-width: 42% !important;
    opacity: .64 !important;
    filter: saturate(1.04) !important;
    text-shadow: 0 3px 14px rgba(0, 0, 0, .55) !important;
    pointer-events: none !important;
    z-index: 3 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-center {
    top: 48% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: calc(28px * var(--classic-reference-scale-x)) !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    z-index: 7 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-pile-box,
  #matchPanel.normal-okey.table-theme-classic .center-indicator,
  #matchPanel.normal-okey.table-theme-classic .nok-discard-center {
    flex: 0 0 calc(100px * var(--classic-reference-scale-x)) !important;
    min-width: calc(88px * var(--classic-reference-scale-x)) !important;
    box-sizing: border-box !important;
    padding: 7px 7px !important;
    border: 1px solid rgba(222, 181, 107, .36) !important;
    border-radius: 8px !important;
    background: rgba(8, 24, 19, .38) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .18), inset 0 1px rgba(255, 239, 188, .08) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .draw-stack {
    width: calc(52px * var(--classic-reference-scale-x)) !important;
    height: calc(70px * var(--classic-reference-scale-y)) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .center-indicator-tile {
    width: calc(56px * var(--classic-reference-scale-x)) !important;
    height: calc(76px * var(--classic-reference-scale-y)) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .unowned-discard {
    width: calc(56px * var(--classic-reference-scale-x)) !important;
    min-height: calc(76px * var(--classic-reference-scale-y)) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .center-indicator-tile > img,
  #matchPanel.normal-okey.table-theme-classic .nok-discard-center .board-tile.tile-asset > img {
    object-fit: contain !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-pile-box strong,
  #matchPanel.normal-okey.table-theme-classic .center-indicator small,
  #matchPanel.normal-okey.table-theme-classic .nok-discard-center small {
    color: #f5d48d !important;
    font-size: 10px !important;
  }

  /* Own rack and gameplay controls form deliberate lower bands. */
  #matchPanel.normal-okey.table-theme-classic .nok-own-station {
    position: absolute !important;
    top: calc(var(--classic-reference-table-height) - var(--classic-reference-own-rack-offset) + var(--classic-reference-rack-gap)) !important;
    left: 50% !important;
    width: var(--classic-reference-lower-width) !important;
    height: var(--classic-reference-rack-height) !important;
    min-height: var(--classic-reference-rack-height) !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    overflow: visible !important;
    z-index: 26 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .normal-okey-rack-zone {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    padding: 4px 8px 3px !important;
    border: 4px solid #633618 !important;
    border-radius: 17px !important;
    background:
      linear-gradient(180deg, rgba(255, 220, 153, .26), transparent 18%),
      linear-gradient(180deg, #cb8444 0%, #9a5c2d 58%, #673719 100%) !important;
    box-shadow: inset 0 3px rgba(255, 234, 181, .4), inset 0 -12px 18px rgba(55, 27, 11, .28), 0 0 0 3px rgba(195, 139, 80, .8), 0 18px 30px rgba(0, 0, 0, .48) !important;
  }

  /* OWN_RACK_PLAYER_FACING_CONSTRUCTION_FIX=YES
     Inspection showed that the active data-rack-skin layer hid every rear /
     front support and base, leaving two thin lips over a flat image.  The
     old orientation rule therefore transformed elements that were not
     rendered.  The local rack now uses the existing DOM wood spans as the
     visible construction: the back rail is the top/table-side section,
     both tile ledges sit between the rows, and the thicker front lip is the
     bottom/player-side section.  #handTiles remains a separate upright layer. */
  #matchPanel.normal-okey.table-theme-classic .nok-own-station .normal-okey-rack-zone[data-rack-skin] {
    --classic-own-rack-facing: player;
    --classic-own-rack-cap-width: calc(24px * var(--classic-reference-scale-x));
    --classic-own-rack-row-height: var(--classic-reference-rack-tile-row-height);
    --classic-own-rack-row-gap: var(--classic-reference-rack-row-gap);
    --classic-own-rack-grid-padding: var(--classic-reference-rack-grid-padding);
    --classic-own-rack-rear-rail-height: var(--classic-reference-rack-rear-rail-height);
    --classic-own-rack-middle-ledge-height: var(--classic-reference-rack-middle-ledge-height);
    --classic-own-rack-lower-ledge-height: var(--classic-reference-rack-lower-ledge-height);
    --classic-own-rack-front-rail-height: var(--classic-reference-rack-front-rail-height);
    --classic-own-rack-front-lip-depth: calc(7px * var(--classic-reference-scale-y));
    --classic-own-rack-shell-wood: linear-gradient(180deg, #6f3b1d 0%, #4a2412 54%, #2f140a 100%);
    --classic-own-rack-shell-inset: linear-gradient(180deg, rgba(255, 224, 157, .20) 0%, rgba(168, 98, 42, .18) 43%, rgba(28, 11, 5, .32) 100%);
    --classic-own-rack-groove-dark: rgba(36, 15, 7, .82);
    --classic-own-rack-groove-light: rgba(238, 183, 98, .72);
    background: transparent !important;
    box-shadow: 0 18px 30px rgba(0, 0, 0, .48), 0 0 0 3px rgba(195, 139, 80, .8) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-own-station .normal-okey-rack-zone[data-rack-skin="classic-walnut"] {
    --classic-own-rack-rear-wood: linear-gradient(180deg, #9b5c2d 0%, #5f2e17 100%);
    --classic-own-rack-rear-base: linear-gradient(180deg, #c08043 0%, #6c351b 100%);
    --classic-own-rack-ledge: linear-gradient(180deg, #d99b58 0%, #75401f 100%);
    --classic-own-rack-front-wood: linear-gradient(180deg, #8f5128 0%, #4b2413 100%);
    --classic-own-rack-front-lip: linear-gradient(180deg, #e0a765 0%, #71381b 72%, #3e1c0e 100%);
    --classic-own-rack-cap-wood: linear-gradient(90deg, #3d1d10 0%, #75401f 48%, #2b130a 100%);
    --classic-own-rack-shell-wood: linear-gradient(180deg, #6e3b1e 0%, #45200f 54%, #291108 100%);
    --classic-own-rack-shell-inset: linear-gradient(180deg, rgba(226, 157, 84, .16) 0%, rgba(120, 61, 25, .20) 48%, rgba(23, 8, 4, .42) 100%);
    --classic-own-rack-groove-dark: rgba(25, 9, 4, .88);
    --classic-own-rack-groove-light: rgba(214, 143, 70, .72);
  }

  #matchPanel.normal-okey.table-theme-classic .nok-own-station .normal-okey-rack-zone[data-rack-skin="light-beech"] {
    --classic-own-rack-rear-wood: linear-gradient(180deg, #9b5c2d 0%, #5f2e17 100%);
    --classic-own-rack-rear-base: linear-gradient(180deg, #c08043 0%, #6c351b 100%);
    --classic-own-rack-ledge: linear-gradient(180deg, #d99b58 0%, #75401f 100%);
    --classic-own-rack-front-wood: linear-gradient(180deg, #8f5128 0%, #4b2413 100%);
    --classic-own-rack-front-lip: linear-gradient(180deg, #e0a765 0%, #71381b 72%, #3e1c0e 100%);
    --classic-own-rack-cap-wood: linear-gradient(90deg, #3d1d10 0%, #75401f 48%, #2b130a 100%);
    --classic-own-rack-shell-wood: linear-gradient(180deg, #6e3b1e 0%, #45200f 54%, #291108 100%);
    --classic-own-rack-shell-inset: linear-gradient(180deg, rgba(226, 157, 84, .16) 0%, rgba(120, 61, 25, .20) 48%, rgba(23, 8, 4, .42) 100%);
    --classic-own-rack-groove-dark: rgba(25, 9, 4, .88);
    --classic-own-rack-groove-light: rgba(214, 143, 70, .72);
  }

  /* The approved rack image is the visible Classic wood surface.  The skin
     selector still controls its source and the gameplay grid remains above
     this decorative layer. */
  #matchPanel.normal-okey.table-theme-classic .nok-own-station .normal-okey-rack-zone[data-rack-skin] > .rack-image-skin {
    display: block !important;
    visibility: visible !important;
    top: 0 !important;
    left: 50% !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: translateX(-50%) !important;
    z-index: 0 !important;
  }

  /* The shell follows the actual playable grid.  The existing tile rule is
     retained; this only gives its two rows the measured current footprint so
     the rear rail, row gap, separator, and front rail have real attachment
     points instead of percentage-painted cavities. */
  #matchPanel.normal-okey.table-theme-classic .nok-own-station .normal-okey-rack-zone[data-rack-skin] > #handTiles {
    position: absolute !important;
    top: var(--classic-own-rack-rear-rail-height) !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    width: 100% !important;
    height: calc((var(--classic-own-rack-row-height) * 2) + var(--classic-own-rack-row-gap) + (var(--classic-own-rack-grid-padding) * 2)) !important;
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, var(--classic-own-rack-row-height)) !important;
    row-gap: var(--classic-own-rack-row-gap) !important;
    column-gap: var(--classic-reference-rack-column-gap) !important;
    justify-content: stretch !important;
    align-items: center !important;
    padding: var(--classic-own-rack-grid-padding) 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
    z-index: 2 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-own-station .normal-okey-rack-zone[data-rack-skin] > #handTiles .tile {
    width: calc(56px * var(--classic-reference-scale-x)) !important;
    min-width: 0 !important;
    height: min(100%, calc(78px * var(--classic-reference-scale-y))) !important;
    align-self: center !important;
    justify-self: center !important;
    aspect-ratio: 51 / 71 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-own-station .normal-okey-rack-zone[data-rack-skin] > #handTiles .tile.tile-asset > img {
    object-fit: contain !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-own-station .normal-okey-rack-zone[data-rack-skin] > #handTiles::before {
    content: "" !important;
    position: absolute !important;
    inset: var(--classic-own-rack-grid-padding) 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    border-radius: 4px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-own-station .normal-okey-rack-zone[data-rack-skin]:not(:has(#handTiles .tile)) > #handTiles::before {
    background: transparent !important;
    box-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-own-station .normal-okey-rack-zone[data-rack-skin] > .rack-wood-body {
    position: absolute !important;
    inset: 0 !important;
    display: none !important;
    visibility: hidden !important;
    isolation: auto !important;
    overflow: visible !important;
    z-index: auto !important;
    border: 3px solid rgba(42, 18, 8, .92) !important;
    border-radius: 13px !important;
    background:
      linear-gradient(180deg, rgba(255, 226, 160, .14), transparent 12%, transparent 86%, rgba(20, 6, 2, .38)),
      var(--classic-own-rack-shell-inset),
      var(--classic-own-rack-shell-wood) !important;
    box-shadow:
      inset 0 3px rgba(255, 234, 181, .38),
      inset 0 -8px 12px rgba(15, 5, 2, .44),
      0 9px 17px rgba(25, 9, 4, .48) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-own-station .normal-okey-rack-zone[data-rack-skin] > .rack-wood-body::before {
    content: "" !important;
    position: absolute !important;
    top: var(--classic-own-rack-rear-rail-height) !important;
    right: calc(var(--classic-own-rack-cap-width) + 3px) !important;
    bottom: var(--classic-own-rack-front-rail-height) !important;
    left: calc(var(--classic-own-rack-cap-width) + 3px) !important;
    display: block !important;
    border: 1px solid rgba(255, 226, 160, .20) !important;
    border-radius: 7px !important;
    background:
      linear-gradient(180deg, rgba(13, 5, 2, .46), rgba(121, 61, 24, .16) 48%, rgba(19, 6, 2, .46)) !important;
    box-shadow: inset 0 2px rgba(255, 244, 197, .16), inset 0 -4px 8px rgba(20, 7, 3, .22) !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-own-station .normal-okey-rack-zone[data-rack-skin] > .rack-wood-body::after {
    content: "" !important;
    position: absolute !important;
    display: none !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-own-station .normal-okey-rack-zone[data-rack-skin] > .rack-wood-body > span {
    position: absolute !important;
    display: block !important;
    visibility: visible !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
    border-radius: 2px !important;
    transform: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-left,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right {
    top: calc(100px * var(--classic-reference-scale-y)) !important;
  }

  /* Top/table side: only the raised rear rail remains above the real tile
     grid; the tiles, not an empty percentage panel, occupy the rack body. */
  #matchPanel.normal-okey.table-theme-classic .nok-own-station .normal-okey-rack-zone[data-rack-skin] .rack-rear-support {
    top: 0 !important;
    right: calc(var(--classic-own-rack-cap-width) + 3px) !important;
    bottom: auto !important;
    left: calc(var(--classic-own-rack-cap-width) + 3px) !important;
    height: var(--classic-own-rack-rear-rail-height) !important;
    z-index: 0 !important;
    background: linear-gradient(90deg, rgba(255, 235, 170, .10), transparent 13% 87%, rgba(34, 10, 4, .24)), var(--classic-own-rack-rear-wood) !important;
    border: 2px solid rgba(83, 40, 16, .52) !important;
    border-radius: 5px !important;
    box-shadow: inset 0 2px rgba(255, 238, 186, .38), inset 0 -7px 11px rgba(65, 28, 10, .28), 0 2px 4px rgba(30, 10, 3, .22) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-own-station .normal-okey-rack-zone[data-rack-skin] .rack-rear-base {
    top: calc(var(--classic-own-rack-rear-rail-height) - 2px) !important;
    right: calc(var(--classic-own-rack-cap-width) + 1px) !important;
    bottom: auto !important;
    left: calc(var(--classic-own-rack-cap-width) + 1px) !important;
    height: 4px !important;
    z-index: 0 !important;
    background: var(--classic-own-rack-rear-base) !important;
    border: 1px solid rgba(91, 44, 17, .58) !important;
    box-shadow: inset 0 1px rgba(255, 230, 164, .25), 0 2px 3px rgba(53, 24, 8, .28) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-own-station .normal-okey-rack-zone[data-rack-skin] .rack-rear-lip {
    top: calc(var(--classic-own-rack-rear-rail-height) + var(--classic-own-rack-grid-padding) + var(--classic-own-rack-row-height) + (var(--classic-own-rack-row-gap) / 2) - (var(--classic-own-rack-middle-ledge-height) / 2)) !important;
    right: calc(var(--classic-own-rack-cap-width) - 1px) !important;
    bottom: auto !important;
    left: calc(var(--classic-own-rack-cap-width) - 1px) !important;
    height: var(--classic-own-rack-middle-ledge-height) !important;
    z-index: 3 !important;
    background: var(--classic-own-rack-ledge) !important;
    border: 2px solid rgba(104, 57, 24, .64) !important;
    border-radius: 3px 3px 6px 6px !important;
    transform: perspective(360px) rotateX(-4deg) !important;
    transform-origin: 50% 100% !important;
    box-shadow: 0 4px 5px rgba(53, 24, 8, .42), inset 0 2px rgba(255, 241, 192, .56), inset 0 -3px 4px rgba(53, 24, 8, .24) !important;
  }

  /* Bottom/player side: the lower row ends on a real ledge and a separate
     player-facing front rail. */
  #matchPanel.normal-okey.table-theme-classic .nok-own-station .normal-okey-rack-zone[data-rack-skin] .rack-front-support {
    top: calc(var(--classic-own-rack-rear-rail-height) + var(--classic-own-rack-grid-padding) + var(--classic-own-rack-row-height) + var(--classic-own-rack-row-gap)) !important;
    right: calc(var(--classic-own-rack-cap-width) + 3px) !important;
    bottom: calc(var(--classic-own-rack-front-rail-height) + var(--classic-own-rack-lower-ledge-height)) !important;
    left: calc(var(--classic-own-rack-cap-width) + 3px) !important;
    height: auto !important;
    z-index: 0 !important;
    background: linear-gradient(180deg, rgba(17, 5, 2, .72), rgba(88, 32, 10, .34) 32%, rgba(28, 8, 3, .78)), var(--classic-own-rack-front-wood) !important;
    border: 2px solid rgba(83, 40, 16, .52) !important;
    border-radius: 4px !important;
    box-shadow: inset 0 2px rgba(255, 237, 185, .28), inset 0 0 0 2px rgba(16, 5, 2, .24), inset 0 -8px 12px rgba(65, 28, 10, .38), 0 2px 4px rgba(30, 10, 3, .24) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-own-station .normal-okey-rack-zone[data-rack-skin] .rack-front-base {
    top: auto !important;
    right: calc(var(--classic-own-rack-cap-width) + 1px) !important;
    bottom: var(--classic-own-rack-front-rail-height) !important;
    left: calc(var(--classic-own-rack-cap-width) + 1px) !important;
    height: var(--classic-own-rack-lower-ledge-height) !important;
    z-index: 0 !important;
    background: var(--classic-own-rack-front-wood) !important;
    border: 1px solid rgba(91, 44, 17, .58) !important;
    box-shadow: inset 0 1px rgba(255, 230, 164, .22), 0 2px 3px rgba(53, 24, 8, .30) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-own-station .normal-okey-rack-zone[data-rack-skin] .rack-front-lip {
    /* FINAL_REFERENCE_RACK_CONSTRUCTION=YES: the lower lip closes the
       actual second tile row without transforming the tile layer. */
    top: auto !important;
    right: calc(var(--classic-own-rack-cap-width) - 1px) !important;
    bottom: 0 !important;
    left: calc(var(--classic-own-rack-cap-width) - 1px) !important;
    height: var(--classic-own-rack-front-rail-height) !important;
    z-index: 3 !important;
    background: var(--classic-own-rack-front-lip) !important;
    border: 2px solid rgba(101, 51, 18, .68) !important;
    border-top: 3px solid rgba(255, 241, 192, .72) !important;
    border-bottom: 5px solid rgba(53, 24, 8, .78) !important;
    border-radius: 4px 4px 10px 10px !important;
    transform: translateY(var(--classic-own-rack-front-lip-depth)) perspective(360px) rotateX(-5deg) !important;
    transform-origin: 50% 0 !important;
    box-shadow: 0 6px 0 -1px rgba(69, 28, 9, .60), 0 10px 13px rgba(53, 24, 8, .46), inset 0 2px rgba(255, 241, 192, .66), inset 0 -5px 5px rgba(42, 16, 6, .40) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-own-station .normal-okey-rack-zone[data-rack-skin] .rack-left-cap,
  #matchPanel.normal-okey.table-theme-classic .nok-own-station .normal-okey-rack-zone[data-rack-skin] .rack-right-cap {
    top: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    width: var(--classic-own-rack-cap-width) !important;
    height: 100% !important;
    z-index: 4 !important;
    background: linear-gradient(180deg, rgba(255, 224, 157, .16), transparent 20% 76%, rgba(20, 6, 2, .26)), var(--classic-own-rack-cap-wood) !important;
    border: 2px solid rgba(58, 27, 12, .64) !important;
    border-radius: 10px !important;
    box-shadow: inset 2px 0 rgba(255, 220, 157, .22), inset -4px 0 rgba(45, 20, 9, .42), 0 5px 9px rgba(30, 10, 3, .32) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-own-station .normal-okey-rack-zone[data-rack-skin] .rack-left-cap {
    left: 0 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-own-station .normal-okey-rack-zone[data-rack-skin] .rack-right-cap {
    left: auto !important;
    right: 0 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-live-actions {
    position: absolute !important;
    top: calc(var(--classic-reference-table-height) - var(--classic-reference-own-rack-offset) + var(--classic-reference-rack-gap) + var(--classic-reference-rack-height) + var(--classic-reference-action-gap)) !important;
    left: 50% !important;
    width: var(--classic-reference-lower-width) !important;
    height: var(--classic-reference-live-action-height) !important;
    min-height: var(--classic-reference-live-action-height) !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: calc(4px * var(--classic-reference-scale-x)) !important;
    transform: translateX(-50%) !important;
    z-index: 38 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-live-actions button {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: calc(2px * var(--classic-reference-scale-y)) calc(4px * var(--classic-reference-scale-x)) !important;
    border: 1px solid rgba(216, 173, 96, .55) !important;
    border-radius: 8px !important;
    background: linear-gradient(180deg, rgba(38, 58, 48, .96), rgba(10, 26, 20, .98)) !important;
    color: #fff1ca !important;
    box-shadow: 0 7px 14px rgba(0, 0, 0, .3), inset 0 1px rgba(255, 245, 207, .1) !important;
    font-size: clamp(10px, .78vw, 12px) !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
  }

  /* The historical AutoPlay selector is more specific than the shared
     button rule.  Keep the primary controls on one reference type scale. */
  #matchPanel.normal-okey.table-theme-classic .nok-live-actions #okeyAutoPlayButton {
    font-size: calc(14px * var(--classic-reference-scale-x)) !important;
  }

  /* Preserve one readable row when optional live controls are revealed. */
  #matchPanel.normal-okey.table-theme-classic .nok-live-actions:has(#showIndicatorButton:not([hidden])):not(:has(#forfeitTableButton:not([hidden]))),
  #matchPanel.normal-okey.table-theme-classic .nok-live-actions:has(#showIndicatorButton[hidden]):has(#forfeitTableButton:not([hidden])) {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-live-actions:has(#showIndicatorButton:not([hidden])):has(#forfeitTableButton:not([hidden])) {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }

  /* The two waiting-state controls are part of the same primary row as the
     gameplay controls.  Hidden state is still owned by app.js, so the row
     compacts naturally when a control is unavailable. */
  #matchPanel.normal-okey.table-theme-classic .nok-live-actions {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    align-items: stretch !important;
    justify-items: stretch !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-live-actions > button {
    grid-column: auto !important;
  }

  /* The existing presentation action row remains available as a separate
     footer band, matching the reference without touching game controls. */
  #matchPanel.normal-okey.table-theme-classic .nok-action-bar {
    position: absolute !important;
    top: calc(var(--classic-reference-table-height) - var(--classic-reference-own-rack-offset) + var(--classic-reference-rack-gap) + var(--classic-reference-rack-height) + var(--classic-reference-action-gap) + var(--classic-reference-live-action-height) + var(--classic-reference-auxiliary-gap)) !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    width: var(--classic-reference-lower-width) !important;
    height: var(--classic-reference-auxiliary-height) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: calc(4px * var(--classic-reference-scale-x)) !important;
    border: 0 !important;
    background: transparent !important;
    transform: translateX(-50%) !important;
    z-index: 60 !important;
  }

  /* Smart Help is transient.  It occupies the same lower presentation slot
     as the disabled compatibility toolbar, never both at once.  The real
     gameplay action row remains visible in either state. */
  #matchPanel.normal-okey.table-theme-classic:has(#okeySmartAssistPanel:not(:has(#okeySmartAssistMessage:empty))) .nok-action-bar {
    display: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic #okeySmartAssistPanel:not(:has(#okeySmartAssistMessage:empty)) {
    position: absolute !important;
    top: auto !important;
    right: auto !important;
    left: 50% !important;
    width: min(760px, calc(100% - 24px)) !important;
    box-sizing: border-box !important;
    padding: calc(4px * var(--classic-reference-scale-y)) calc(8px * var(--classic-reference-scale-x)) !important;
    bottom: var(--classic-reference-smart-help-bottom-offset) !important;
    height: var(--classic-reference-smart-help-height) !important;
    max-height: var(--classic-reference-smart-help-height) !important;
    overflow: auto !important;
    transform: translateX(-50%) !important;
    z-index: 60 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-action-bar button {
    min-width: 0 !important;
    height: 100% !important;
    padding: calc(2px * var(--classic-reference-scale-y)) calc(4px * var(--classic-reference-scale-x)) !important;
    border: 1px solid rgba(87, 126, 164, .48) !important;
    border-radius: 8px !important;
    background: linear-gradient(180deg, #142b47, #07182c) !important;
    color: #f5f7fc !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .1) !important;
    font-size: clamp(9px, .72vw, 11px) !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-action-bar #nokAutoSortPresentation {
    border-color: rgba(54, 198, 133, .8) !important;
    background: linear-gradient(180deg, #11855b, #07553d) !important;
  }

  /* The real Normal Okey bottom navigation is a separate final band.  Keep
     it compact enough to leave the auxiliary presentation row fully visible
     above it without changing any menu IDs or handlers. */
  #matchPanel.normal-okey.table-theme-classic .normal-okey-bottom-menu {
    right: var(--classic-reference-page-pad) !important;
    bottom: var(--classic-reference-navigation-bottom) !important;
    left: var(--classic-reference-page-pad) !important;
    width: auto !important;
    height: var(--classic-reference-navigation-height) !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    flex-wrap: nowrap !important;
    gap: calc(18px * var(--classic-reference-scale-x)) !important;
    padding: 3px 8px !important;
    overflow: hidden !important;
  }

  #matchPanel.normal-okey.table-theme-classic .normal-okey-bottom-menu-group {
    flex-wrap: nowrap !important;
    gap: 4px !important;
  }

  #matchPanel.normal-okey.table-theme-classic .normal-okey-bottom-menu-button {
    max-width: none !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: calc(3px * var(--classic-reference-scale-y)) calc(6px * var(--classic-reference-scale-x)) !important;
    font-size: calc(11px * var(--classic-reference-scale-x)) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  /* Social column stays a first-class isolated surface. */
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column {
    position: absolute !important;
    top: calc(104px * var(--classic-reference-scale-y)) !important;
    right: var(--classic-reference-page-pad) !important;
    bottom: calc(var(--classic-reference-auxiliary-height) + var(--classic-reference-navigation-height) + var(--classic-reference-navigation-bottom) + (18px * var(--classic-reference-scale-y))) !important;
    left: auto !important;
    width: var(--classic-reference-social-width) !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    overflow: hidden !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 45 !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-chat-panel {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    border: 1px solid rgba(215, 154, 53, .52) !important;
    border-radius: 10px !important;
    background: linear-gradient(145deg, rgba(7, 17, 22, .97), rgba(5, 11, 15, .98)) !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .08) !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-treat-panel,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-radio-panel {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    border: 1px solid rgba(215, 154, 53, .52) !important;
    border-radius: 10px !important;
    background: linear-gradient(145deg, rgba(7, 17, 22, .96), rgba(5, 11, 15, .98)) !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-treat-panel {
    min-height: calc(136px * var(--classic-reference-scale-y)) !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-radio-panel {
    min-height: calc(143px * var(--classic-reference-scale-y)) !important;
  }

  /* NORMAL_OKEY_CLASSIC_CANONICAL_STATE_CALIBRATION=YES
     The playing composition is the Classic reference geometry.  Apply the
     same card, rail, hand and center calibration in preview/waiting/watch
     states so state changes alter content only, never seat anchors or their
     containing blocks. */
  #matchPanel.normal-okey.table-theme-classic .nok-station-top .seat-avatar {
    width: var(--classic-occupied-top-avatar) !important;
    height: var(--classic-occupied-top-avatar) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-left .seat-avatar,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .seat-avatar {
    width: var(--classic-occupied-side-avatar) !important;
    height: var(--classic-occupied-side-avatar) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-bottom .seat-avatar {
    width: var(--classic-occupied-own-avatar) !important;
    height: var(--classic-occupied-own-avatar) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-top .seat-identity {
    min-width: calc(185px * var(--classic-reference-scale-x)) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-left .seat-identity,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .seat-identity {
    min-width: 0 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-bottom .seat-identity {
    min-width: 0 !important;
    width: calc(136px * var(--classic-reference-scale-x)) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-top {
    height: calc(136px * var(--classic-reference-scale-y)) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-top .opponent-rack {
    top: calc(128px * var(--classic-reference-scale-y)) !important;
    width: calc(330px * var(--classic-reference-scale-x)) !important;
    height: calc(61px * var(--classic-reference-scale-y)) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-left .opponent-rack,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .opponent-rack {
    top: calc(50% - (55px * var(--classic-reference-scale-y))) !important;
    width: calc(68px * var(--classic-reference-scale-x)) !important;
    height: calc(252px * var(--classic-reference-scale-y)) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-left .opponent-rack {
    left: calc(180px * var(--classic-reference-scale-x) + (8px * var(--classic-reference-scale-x))) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-right .opponent-rack {
    right: calc(180px * var(--classic-reference-scale-x) + (8px * var(--classic-reference-scale-x))) !important;
  }

  /* Occupied cards are vertical reference cards.  The player-seat remains
     the positioned containing block for the concealed rail; only its visual
     flow changes, so no participant data or interaction target changes. */
  #matchPanel.normal-okey.table-theme-classic .nok-station-top .player-seat {
    inset: auto !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: calc(2px * var(--classic-reference-scale-y)) !important;
    width: calc(204px * var(--classic-reference-scale-x)) !important;
    height: calc(120px * var(--classic-reference-scale-y)) !important;
    padding: calc(3px * var(--classic-reference-scale-y)) calc(5px * var(--classic-reference-scale-x)) !important;
    transform: translateX(-50%) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-left .player-seat,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .player-seat {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: calc(4px * var(--classic-reference-scale-x)) !important;
    width: calc(180px * var(--classic-reference-scale-x)) !important;
    height: calc(104px * var(--classic-reference-scale-y)) !important;
    padding: calc(4px * var(--classic-reference-scale-y)) calc(5px * var(--classic-reference-scale-x)) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-right .player-seat {
    flex-direction: row-reverse !important;
  }

  /* Occupied cards are one visual object: the avatar and identity content
     share the dark/gold player surface, while the concealed rack remains a
     separate positioned rail below or beside that surface. */
  #matchPanel.normal-okey.table-theme-classic .nok-station-top .player-seat,
  #matchPanel.normal-okey.table-theme-classic .nok-station-left .player-seat,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .player-seat,
  #matchPanel.normal-okey.table-theme-classic .nok-station-bottom .player-seat {
    border: 2px solid rgba(239, 190, 101, .82) !important;
    border-radius: 14px !important;
    background: linear-gradient(145deg, rgba(7, 26, 25, .97), rgba(3, 13, 17, .98)) !important;
    box-shadow: inset 0 1px rgba(255, 236, 184, .18), 0 12px 24px rgba(0, 0, 0, .48), 0 0 0 1px rgba(246, 208, 120, .12) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-top .seat-identity,
  #matchPanel.normal-okey.table-theme-classic .nok-station-left .seat-identity,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .seat-identity,
  #matchPanel.normal-okey.table-theme-classic .nok-station-bottom .seat-identity {
    align-items: flex-start !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .opponent-rack[data-hand-count="0"],
  #matchPanel.normal-okey.table-theme-classic .opponent-rack[hidden] {
    display: none !important;
    visibility: hidden !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-top .seat-identity {
    width: calc(154px * var(--classic-reference-scale-x)) !important;
    min-width: 0 !important;
    align-items: center !important;
    text-align: center !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-left .seat-identity,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .seat-identity {
    width: calc(100px * var(--classic-reference-scale-x)) !important;
    min-width: 0 !important;
    align-items: flex-start !important;
  }

  #matchPanel.normal-okey.table-theme-classic .seat-identity strong {
    max-width: calc(180px * var(--classic-reference-scale-x)) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .seat-identity strong {
    font-size: var(--classic-occupied-card-name-size) !important;
    line-height: 1.06 !important;
    font-weight: 800 !important;
    text-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .seat-identity > small {
    font-size: var(--classic-occupied-card-meta-size) !important;
    line-height: 1.12 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .seat-identity .player-score {
    font-size: var(--classic-occupied-card-score-size) !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    text-shadow: none !important;
  }

  /* The real tile boxes keep their IDs, order, aspect ratio, and hit
     handlers.  A contained visual scale gives the occupied two-row hand
     reference weight without changing rack height or the lower action bands. */
  #matchPanel.normal-okey.table-theme-classic .nok-own-station .normal-okey-rack-zone[data-rack-skin] > #handTiles .tile {
    transform: scale(1.12) !important;
    transform-origin: center center !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-own-station .normal-okey-rack-zone[data-rack-skin] > #handTiles .tile:hover:not(:disabled) {
    transform: translateY(-3px) scale(1.12) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-own-station .normal-okey-rack-zone[data-rack-skin] > #handTiles .tile.selected {
    transform: translateY(-6px) scale(1.12) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-own-station .normal-okey-rack-zone[data-rack-skin] > #handTiles .tile.is-dragging {
    transform: translateY(-8px) scale(1.10) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-own-station .normal-okey-rack-zone[data-rack-skin] > #handTiles {
    column-gap: 0px !important;
  }

  /* The three center objects remain separate logical controls, but their
     visual boxes now carry the weight of the occupied reference scene. */
  #matchPanel.normal-okey.table-theme-classic .nok-pile-box,
  #matchPanel.normal-okey.table-theme-classic .center-indicator,
  #matchPanel.normal-okey.table-theme-classic .nok-discard-center {
    flex-basis: calc(120px * var(--classic-reference-scale-x)) !important;
    min-width: calc(112px * var(--classic-reference-scale-x)) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .draw-stack {
    width: calc(78px * var(--classic-reference-scale-x)) !important;
    height: calc(96px * var(--classic-reference-scale-y)) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .center-indicator-tile,
  #matchPanel.normal-okey.table-theme-classic .unowned-discard {
    width: calc(60px * var(--classic-reference-scale-x)) !important;
    min-height: calc(84px * var(--classic-reference-scale-y)) !important;
    height: calc(84px * var(--classic-reference-scale-y)) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-pile-box strong {
    font-size: calc(13px * var(--classic-reference-scale-x)) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .center-indicator small,
  #matchPanel.normal-okey.table-theme-classic .nok-discard-center small {
    font-size: calc(11px * var(--classic-reference-scale-x)) !important;
  }

  /* Keep the brand behind the center controls, but make the existing live
     crown/name/subtitle paint crisp rather than faint or legacy-blurred. */
  #matchPanel.normal-okey.table-theme-classic .nok-center-brand {
    top: 60% !important;
    width: round(nearest, calc(400px * var(--classic-reference-scale-x)), 1px) !important;
    max-width: 50% !important;
    display: grid !important;
    visibility: visible !important;
    opacity: .98 !important;
    filter: none !important;
    transform: translate(calc(-50% + .05px), calc(-50% + .30px)) !important;
    text-shadow: none !important;
    color: #e4edc2 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-center-brand::before {
    content: none !important;
    display: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-center-brand .nok-crown {
    font-size: round(nearest, calc(30px * var(--classic-reference-scale-x)), 1px) !important;
    line-height: round(nearest, calc(30px * var(--classic-reference-scale-y)), 1px) !important;
    font-weight: 700 !important;
    letter-spacing: round(nearest, .12em, 1px) !important;
    text-shadow: 0 1px 1px rgba(48, 28, 6, .35) !important;
    color: #f6d37f !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-center-brand strong {
    font-size: round(nearest, calc(36px * var(--classic-reference-scale-x)), 1px) !important;
    line-height: round(nearest, calc(36px * var(--classic-reference-scale-y)), 1px) !important;
    font-weight: 900 !important;
    letter-spacing: round(nearest, .15em, 1px) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .46) !important;
    color: #e4edc2 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-center-brand > span:not(.nok-crown) {
    font-size: round(nearest, calc(13px * var(--classic-reference-scale-x)), 1px) !important;
    line-height: round(nearest, calc(13px * var(--classic-reference-scale-y)), 1px) !important;
    font-weight: 600 !important;
    letter-spacing: round(nearest, .18em, 1px) !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .34) !important;
    color: #d6e2b7 !important;
  }

  /* WAVE-23B2_STATION_ANCHOR_STABILITY=YES
     The participant content changes between waiting and playing (ready text
     versus series text), but the visible avatar/card anchor must not be
     re-centered from that changing content height.  The player-seat remains
     the fixed containing block for the count-only rack. */
  #matchPanel.normal-okey.table-theme-classic .nok-station-top .player-seat {
    justify-content: flex-start !important;
  }

  /* WAVE-23B2_FINAL_STATION_PLACEMENT=YES
     The top rack remains on its locked absolute anchor.  Only the two
     visible identity children receive a small negative flex margin so the
     status strip cannot crowd the card; the static identity wrapper remains
     out of the rack's containing-block chain. */
  #matchPanel.normal-okey.table-theme-classic .nok-station-top .player-seat > .seat-avatar,
  #matchPanel.normal-okey.table-theme-classic .nok-station-top .player-seat > .seat-identity {
    margin-top: calc(-2px * var(--classic-reference-scale-y)) !important;
  }

  /* WAVE-23_FINAL_STATION_POLISH=YES
     Keep the side rack containing block and its public-back anchor fixed while
     giving each identity card a small mirrored breathing offset away from the
     angled rail.  Static margins do not create a new containing block, so the
     absolute opponent rack remains on its locked 180px + 8px anchor. */
  #matchPanel.normal-okey.table-theme-classic .nok-station-left .seat-identity {
    margin-left: calc(-4px * var(--classic-reference-scale-x)) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-right .seat-identity {
    margin-right: calc(-4px * var(--classic-reference-scale-x)) !important;
  }

  /* WAVE-23_CANONICAL_BOTTOM_STATION=YES
     The own rack is the lower-center foreground anchor.  The local identity
     uses the same board containing block, centered on the rack's centerline,
     and its bottom edge stops at the rack's top edge minus the controlled
     clearance.  This is the single authoritative Classic BOTTOM geometry. */
  #matchPanel.normal-okey.table-theme-classic .nok-station-bottom {
    top: calc(
      var(--classic-reference-table-height) -
      var(--classic-reference-own-rack-offset) -
      var(--classic-reference-own-player-height) -
      var(--classic-reference-own-player-clearance)
    ) !important;
    left: 50% !important;
    width: calc(230px * var(--classic-reference-scale-x)) !important;
    height: var(--classic-reference-own-player-height) !important;
    transform: translateX(-50%) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-bottom .player-seat {
    inset: 0 !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    left: 0 !important;
    width: 100% !important;
    height: var(--classic-reference-own-player-height) !important;
    transform: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-left .player-seat,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .player-seat,
  #matchPanel.normal-okey.table-theme-classic .nok-station-bottom .player-seat {
    align-items: flex-start !important;
  }

  /* The local card is behind the center play stack when their reserved
     bounds touch, while the own rack keeps its separate foreground layer.
     This prevents the local card from painting over ATILAN/GÖSTERGE. */
  #matchPanel.normal-okey.table-theme-classic .nok-station-bottom {
    z-index: 6 !important;
  }
}

/* Narrow desktop/tablet layouts keep the established responsive path. */
@media (max-width: 900px) {
  #matchPanel.normal-okey.table-theme-classic .nok-action-bar {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
  }
}

/* WAVE-E5: compact 1129px-1300px desktop composition.  Keep the legacy
   statusbar as a DOM/containing host only; the semantic game and settings
   groups own their own painted/interactive regions in this band. */
@media (min-width: 1129px) and (max-width: 1300px) {
  #matchPanel.normal-okey.table-theme-classic .nok-statusbar {
    position: absolute !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    left: 0 !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none !important;
    z-index: 39 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-game-status-panel {
    position: absolute !important;
    top: calc((96px * var(--classic-reference-scale-y)) + 28px) !important;
    right: auto !important;
    bottom: auto !important;
    left: calc(804px * var(--classic-reference-scale-x)) !important;
    width: max-content !important;
    max-width: none !important;
    height: auto !important;
    min-width: 180px !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: max-content max-content !important;
    grid-template-rows: auto auto !important;
    column-gap: 4px !important;
    row-gap: 3px !important;
    align-items: start !important;
    margin: 0 !important;
    padding: clamp(0px, calc(2.65vw - 29.92px), 4px) clamp(0px, calc(8vw - 90.32px), 12px) !important;
    overflow: visible !important;
    border: 1px solid rgba(221, 173, 89, .5) !important;
    border-radius: 8px !important;
    background: rgba(4, 18, 21, .88) !important;
    box-shadow: inset 0 1px rgba(255, 236, 180, .09) !important;
    pointer-events: auto !important;
    z-index: 39 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-game-status-panel > span {
    min-width: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-game-status-panel > #turnText {
    grid-column: 1 !important;
    grid-row: 1 !important;
    padding: 3px 7px !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, .07) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-game-status-panel > #turnTimer {
    grid-column: 2 !important;
    grid-row: 1 !important;
    padding: 3px 0 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    text-align: left !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-game-status-panel > #turnTimer.urgent {
    box-shadow: inset 0 1px rgba(255, 196, 162, .1) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-game-status-panel > #phaseText {
    grid-column: 1 !important;
    grid-row: 2 !important;
    padding: 3px 7px !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, .07) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-settings-panel {
    position: absolute !important;
    top: calc((96px * var(--classic-reference-scale-y)) - clamp(0px, calc(24px - 2vw), .7px)) !important;
    right: auto !important;
    bottom: auto !important;
    left: calc(453px * var(--classic-reference-scale-x)) !important;
    width: calc(516px * var(--classic-reference-scale-x)) !important;
    height: 24px !important;
    min-width: 0 !important;
    min-height: 24px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 0 7px !important;
    overflow: visible !important;
    border: 1px solid rgba(221, 173, 89, .5) !important;
    border-radius: 8px !important;
    background: rgba(4, 18, 21, .88) !important;
    box-shadow: inset 0 1px rgba(255, 236, 180, .09) !important;
    pointer-events: auto !important;
    z-index: 39 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-settings-panel > label {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    order: 0 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-settings-panel > label.theme-picker {
    margin-left: 0 !important;
    height: 24px !important;
    min-height: 24px !important;
    box-sizing: border-box !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-top-width: 0 !important;
    border-bottom-width: 0 !important;
    border-left: 1px solid rgba(221, 173, 89, .35) !important;
    padding-left: 9px !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-settings-panel > label.rack-skin-picker,
  #matchPanel.normal-okey.table-theme-classic .nok-settings-panel > label.okey-smart-assist-control {
    height: 24px !important;
    min-height: 24px !important;
    box-sizing: border-box !important;
    position: relative !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-settings-panel > label.rack-skin-picker::before,
  #matchPanel.normal-okey.table-theme-classic .nok-settings-panel > label.okey-smart-assist-control::before {
    content: "" !important;
    position: absolute !important;
    top: 5px !important;
    left: -3px !important;
    width: 1px !important;
    height: 14px !important;
    background: rgba(221, 173, 89, .25) !important;
    pointer-events: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-settings-panel > label.theme-picker,
  #matchPanel.normal-okey.table-theme-classic .nok-settings-panel > label.rack-skin-picker,
  #matchPanel.normal-okey.table-theme-classic .nok-settings-panel > label.okey-smart-assist-control {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    font-size: 9px !important;
    font-weight: 600 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-settings-panel select {
    min-width: 0 !important;
    max-width: 104px !important;
    height: 24px !important;
    padding: 2px 4px !important;
    font-size: 9px !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-test-mode-companion {
    position: absolute !important;
    top: calc(256px * var(--classic-reference-scale-y)) !important;
    right: auto !important;
    bottom: auto !important;
    left: calc(8px * var(--classic-reference-scale-x)) !important;
    width: calc(108px * var(--classic-reference-scale-x)) !important;
    height: 24px !important;
    min-height: 24px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 8px !important;
    white-space: nowrap !important;
    pointer-events: auto !important;
    z-index: 39 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-test-mode-companion.hidden {
    display: none !important;
  }

  /* STAGE_CLASSIC_LOWER_ACTIONS_1280_VISIBILITY_FIX=YES
     At 1280x900 the later exact-rack composition is 214px high while the
     older live-action anchor is derived from the smaller rack-height token.
     Preserve the rack/table geometry and move only the gameplay row below
     the actual rack clearance.  The seven primary controls keep one stable
     row; optional controls retain their DOM/visibility ownership. */
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation {
    --classic-reference-live-action-clearance: calc(4px * var(--classic-reference-scale-y));
  }

  #matchPanel.normal-okey.table-theme-classic .nok-table-stage,
  #matchPanel.normal-okey.table-theme-classic #gameBoard {
    overflow: visible !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-live-actions {
    top: calc(
      var(--classic-reference-table-height) -
      var(--classic-reference-own-rack-offset) +
      var(--classic-reference-rack-gap) +
      var(--classic-reference-rack-height) +
      var(--classic-reference-action-gap) +
      var(--classic-reference-live-action-clearance)
    ) !important;
    overflow: visible !important;
    z-index: 80 !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    align-content: stretch !important;
    align-items: stretch !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-live-actions > button {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-action-bar {
    top: calc(
      var(--classic-reference-table-height) -
      var(--classic-reference-own-rack-offset) +
      var(--classic-reference-rack-gap) +
      var(--classic-reference-rack-height) +
      var(--classic-reference-action-gap) +
      var(--classic-reference-live-action-clearance) +
      var(--classic-reference-live-action-height) +
      var(--classic-reference-auxiliary-gap)
    ) !important;
    overflow: visible !important;
    z-index: 70 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .normal-okey-bottom-menu {
    z-index: 70 !important;
  }
}
/* NORMAL_OKEY_CLASSIC_FINAL_GEOMETRY_END */

/* WAVE-E: wide-desktop status composition.  The legacy row remains the
   fallback below 1301px; the reference viewport uses two independent panels
   and a separate diagnostic chip so no painted strip crosses the table. */
@media (min-width: 1301px) {
  #matchPanel.normal-okey.table-theme-classic .nok-statusbar {
    position: absolute !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    left: 0 !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none !important;
    z-index: 39 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-game-status-panel {
    position: absolute !important;
    top: calc(256px * var(--classic-reference-scale-y)) !important;
    right: auto !important;
    bottom: auto !important;
    left: calc(8px * var(--classic-reference-scale-x)) !important;
    width: calc(430px * var(--classic-reference-scale-x)) !important;
    height: var(--classic-reference-status-height) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 0 7px !important;
    overflow: hidden !important;
    border: 1px solid rgba(221, 173, 89, .5) !important;
    border-radius: 8px !important;
    background: rgba(4, 18, 21, .88) !important;
    box-shadow: inset 0 1px rgba(255, 236, 180, .09), 0 7px 16px rgba(0, 0, 0, .28) !important;
    pointer-events: auto !important;
    z-index: 39 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-game-status-panel > span {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-game-status-panel > span:not(.turn-timer) {
    padding: 4px 8px !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, .07) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-settings-panel {
    position: absolute !important;
    top: calc(96px * var(--classic-reference-scale-y)) !important;
    right: auto !important;
    bottom: auto !important;
    left: calc(461px * var(--classic-reference-scale-x)) !important;
    width: calc(520px * var(--classic-reference-scale-x)) !important;
    height: var(--classic-reference-status-height) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 0 7px !important;
    overflow: hidden !important;
    border: 1px solid rgba(221, 173, 89, .5) !important;
    border-radius: 8px !important;
    background: rgba(4, 18, 21, .88) !important;
    box-shadow: inset 0 1px rgba(255, 236, 180, .09), 0 7px 16px rgba(0, 0, 0, .28) !important;
    pointer-events: auto !important;
    z-index: 39 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-settings-panel > label {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    order: 0 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-settings-panel > label.theme-picker {
    margin-left: 0 !important;
    border-left: 1px solid rgba(221, 173, 89, .35) !important;
    padding-left: 9px !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-settings-panel select {
    min-width: 0 !important;
    max-width: 104px !important;
    height: 24px !important;
    padding: 2px 4px !important;
    font-size: 9px !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-test-mode-companion {
    position: absolute !important;
    top: calc(96px * var(--classic-reference-scale-y)) !important;
    right: auto !important;
    bottom: auto !important;
    left: calc(989px * var(--classic-reference-scale-x)) !important;
    width: calc(90px * var(--classic-reference-scale-x)) !important;
    height: var(--classic-reference-status-height) !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 8px !important;
    white-space: nowrap !important;
    pointer-events: auto !important;
    z-index: 39 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-test-mode-companion.hidden {
    display: none !important;
  }
}

/* NORMAL_OKEY_CLASSIC_VISUAL_SKIN_START */
/*
   Reference skin only.  The final geometry authority above owns every
   desktop band and coordinate.  This section owns paint, depth, contrast and
   texture for Classic; it deliberately contains no layout declarations and
   never replaces the live gameplay DOM.
*/
#matchPanel.normal-okey.table-theme-classic {
  --classic-skin-wood-dark: #2b160d;
  --classic-skin-wood: #754018;
  --classic-skin-wood-light: #c4843d;
  --classic-skin-felt: #0f6848;
  --classic-skin-felt-deep: #063728;
  --classic-skin-gold: #f1c36e;
  --classic-skin-ink: #06151a;
  color: #f8edcf !important;
  background: #100906 url("/okey/classic/normal-okey-classic-room.jpg") center / cover no-repeat fixed !important;
}

#matchPanel.normal-okey.table-theme-classic > .nok-presentation {
  background:
    linear-gradient(180deg, rgba(4, 13, 15, .34), rgba(11, 8, 5, .58)),
    radial-gradient(ellipse at 50% 54%, rgba(20, 93, 63, .16), transparent 38%),
    url("/okey/classic/normal-okey-classic-room.jpg") center / cover no-repeat !important;
}

#matchPanel.normal-okey.table-theme-classic > .nok-presentation::before {
  background:
    radial-gradient(ellipse at 21% 20%, rgba(255, 213, 126, .16), transparent 8%),
    radial-gradient(ellipse at 78% 21%, rgba(255, 213, 126, .13), transparent 8%),
    radial-gradient(ellipse at 50% 56%, rgba(94, 183, 126, .09), transparent 25%),
    repeating-linear-gradient(90deg, transparent 0 48px, rgba(255, 228, 166, .018) 49px 50px, transparent 51px 96px) !important;
  opacity: .86 !important;
}

#matchPanel.normal-okey.table-theme-classic > .nok-presentation::after {
  border-color: rgba(235, 177, 89, .24) !important;
  box-shadow: inset 0 0 80px rgba(0, 0, 0, .28), 0 0 0 1px rgba(255, 230, 170, .035) !important;
}

/* Warm walnut surround and deep felt, without changing the locked table box. */
#matchPanel.normal-okey.table-theme-classic .nok-table,
#matchPanel.normal-okey.table-theme-classic #gameBoard {
  border-color: #6f3c18 !important;
  border-image: url("/okey/classic/normal-okey-classic-walnut.jpg") 48 round !important;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(73, 173, 105, .18), transparent 42%),
    linear-gradient(rgba(8, 77, 50, .2), rgba(3, 47, 34, .28)),
    url("/okey/classic/normal-okey-classic-felt.jpg") center / 420px 420px repeat !important;
  box-shadow:
    0 0 0 5px var(--classic-skin-wood-dark),
    0 0 0 9px var(--classic-skin-wood),
    0 0 0 13px rgba(40, 17, 8, .98),
    0 10px 0 rgba(53, 22, 8, .72),
    0 18px 26px rgba(0, 0, 0, .64),
    inset 0 2px 0 rgba(255, 226, 159, .5),
    inset 0 0 0 3px rgba(38, 14, 5, .56),
    inset 0 -14px 18px rgba(0, 26, 17, .42) !important;
}

#matchPanel.normal-okey.table-theme-classic .nok-table::before {
  border-color: rgba(242, 204, 131, .34) !important;
  border-radius: 15px 15px 24px 24px !important;
  clip-path: polygon(18% 0, 82% 0, 100% 16%, 100% 80%, 96% 100%, 4% 100%, 0 80%, 0 16%) !important;
  background:
    radial-gradient(ellipse at 50% 48%, transparent 0 50%, rgba(0, 0, 0, .08) 67%, rgba(0, 0, 0, .34) 100%),
    linear-gradient(180deg, rgba(255, 241, 194, .18), transparent 15%, transparent 67%, rgba(19, 6, 2, .5)),
    linear-gradient(90deg, rgba(20, 6, 2, .38), transparent 15%, transparent 85%, rgba(20, 6, 2, .38)),
    linear-gradient(135deg, rgba(255, 231, 180, .1), transparent 30%, rgba(0, 0, 0, .16)) !important;
  box-shadow:
    inset 0 3px 0 rgba(255, 235, 183, .28),
    inset 0 -18px 18px rgba(0, 0, 0, .44),
    inset 0 0 0 2px rgba(27, 9, 3, .42),
    0 0 0 1px rgba(255, 229, 168, .15) !important;
}

/* Decorative furniture shell only: the playable table box and every child
   coordinate remain owned by the final geometry layer above. */
#matchPanel.normal-okey.table-theme-classic .nok-table::after {
  content: "" !important;
  position: absolute !important;
  inset: -16px -16px -42px !important;
  border-width: 18px 18px 42px !important;
  border-style: solid !important;
  border-color: #4b2410 !important;
  border-image: url("/okey/classic/normal-okey-classic-walnut.jpg") 48 round !important;
  border-radius: 16px 16px 24px 24px !important;
  clip-path: polygon(20% 0, 80% 0, 92% 8%, 100% 26%, 100% 91%, 96% 100%, 4% 100%, 0 91%, 0 26%, 8% 8%) !important;
  background:
    radial-gradient(ellipse at 50% 42%, transparent 0 58%, rgba(67, 25, 7, .2) 64%, rgba(23, 6, 2, .56) 100%),
    linear-gradient(180deg, rgba(255, 222, 151, .2) 0 8%, rgba(255, 210, 135, .08) 8% 23%, transparent 23% 61%, rgba(42, 14, 4, .3) 61% 76%, rgba(24, 7, 2, .7) 76% 100%),
    linear-gradient(90deg, rgba(27, 8, 3, .58), transparent 12% 88%, rgba(27, 8, 3, .58)) !important;
  box-shadow:
    inset 0 4px 0 rgba(255, 222, 151, .48),
    inset 0 13px 0 rgba(255, 210, 135, .14),
    inset 0 -9px 0 rgba(42, 14, 4, .6),
    inset 0 -25px 0 rgba(24, 7, 2, .52),
    0 14px 0 rgba(54, 20, 7, .82),
    0 28px 0 rgba(31, 10, 3, .72),
    0 44px 24px rgba(0, 0, 0, .58) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* WAVE-6 paint owner: one continuous walnut body around the unchanged
   gameplay plane.  The outer element itself is trapezoidal; the felt is a
   recessed child plane, not a trapezoid floating inside a rectangle. */
#matchPanel.normal-okey.table-theme-classic .nok-visual-furniture-shell {
  border: 10px solid #4a2410 !important;
  border-image: url("/okey/classic/normal-okey-classic-walnut.jpg") 48 round !important;
  background:
    linear-gradient(180deg, rgba(255, 223, 151, .22) 0 10%, rgba(127, 65, 22, .12) 10% 34%, rgba(39, 13, 4, .34) 34% 70%, rgba(22, 6, 2, .72) 70% 100%),
    url("/okey/classic/normal-okey-classic-walnut.jpg") center / 420px 420px repeat !important;
  box-shadow:
    inset 0 4px rgba(255, 224, 155, .5),
    inset 0 -14px 0 rgba(27, 8, 2, .58),
    0 8px 0 rgba(51, 18, 6, .68),
    0 16px 12px rgba(0, 0, 0, .42) !important;
}

#matchPanel.normal-okey.table-theme-classic .nok-visual-furniture-shell::before {
  border: 5px solid rgba(49, 21, 8, .86) !important;
  border-image: url("/okey/classic/normal-okey-classic-walnut.jpg") 48 round !important;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(77, 182, 109, .22), transparent 45%),
    linear-gradient(180deg, rgba(45, 139, 92, .18), rgba(10, 57, 40, .18)),
    url("/okey/classic/normal-okey-classic-felt.jpg") center / 420px 420px repeat !important;
  box-shadow:
    inset 0 4px rgba(255, 226, 159, .34),
    inset 0 -8px 12px rgba(0, 20, 13, .36),
    inset 0 0 0 3px rgba(27, 9, 3, .46) !important;
}

#matchPanel.normal-okey.table-theme-classic .nok-visual-furniture-shell::after {
  /* WAVE-15: remove the independent border-image ring that produced the
     mirrored lower wedges and made the fascia read as a detached plank. */
  border: 0 !important;
  border-image: none !important;
  background:
    linear-gradient(180deg, rgba(255, 222, 151, .32) 0 15%, rgba(157, 84, 28, .16) 15% 38%, rgba(35, 11, 3, .52) 38% 100%),
    url("/okey/classic/normal-okey-classic-walnut.jpg") center / 420px 420px repeat !important;
  box-shadow:
    inset 0 3px rgba(255, 225, 158, .42),
    inset 0 -4px 6px rgba(23, 6, 2, .52),
    0 4px 0 rgba(29, 8, 2, .46) !important;
}

/* Reference-style compact identity cards; all participant data remains live. */
#matchPanel.normal-okey.table-theme-classic .seat-identity {
  border-width: 2px !important;
  border-color: rgba(239, 190, 101, .82) !important;
  background:
    linear-gradient(145deg, rgba(7, 26, 25, .96), rgba(3, 13, 17, .97)) !important;
  box-shadow: inset 0 1px rgba(255, 236, 184, .18), 0 10px 22px rgba(0, 0, 0, .48) !important;
}

#matchPanel.normal-okey.table-theme-classic .seat-identity strong {
  color: #ffe09a !important;
  text-shadow: 0 1px 7px rgba(0, 0, 0, .55) !important;
}

#matchPanel.normal-okey.table-theme-classic .seat-identity > small {
  color: #bfd6c6 !important;
}

#matchPanel.normal-okey.table-theme-classic .seat-identity .player-score {
  color: #ffd27c !important;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .42) !important;
}

#matchPanel.normal-okey.table-theme-classic .seat-avatar {
  border-color: #edbd66 !important;
  outline-color: rgba(238, 190, 102, .28) !important;
  background: radial-gradient(circle at 35% 28%, #6b8b7c, #1c4b45 72%, #0c292b) !important;
  box-shadow: 0 0 0 2px rgba(255, 225, 147, .16), 0 8px 16px rgba(0, 0, 0, .42) !important;
}

#matchPanel.normal-okey.table-theme-classic .seat-identity::after {
  background: #61dc92 !important;
  box-shadow: 0 0 0 2px rgba(97, 220, 146, .18), 0 0 12px rgba(97, 220, 146, .52) !important;
}

#matchPanel.normal-okey.table-theme-classic .player-seat.active .seat-identity {
  border-color: #f6d078 !important;
  box-shadow: 0 0 0 1px rgba(246, 208, 120, .18), 0 0 20px rgba(246, 190, 91, .2), 0 8px 18px rgba(0, 0, 0, .42) !important;
}

/* Concealed racks stay count-only, but now read as carved walnut rails. */
#matchPanel.normal-okey.table-theme-classic .opponent-rack {
  border-color: #d39a55 !important;
  background:
    linear-gradient(180deg, rgba(227, 167, 91, .24), rgba(38, 15, 7, .34)),
    url("/okey/classic/normal-okey-classic-walnut.jpg") center / 180px 180px repeat !important;
  box-shadow: inset 0 1px rgba(255, 235, 182, .48), inset 0 -2px rgba(45, 19, 8, .34), 0 7px 14px rgba(0, 0, 0, .46) !important;
}

#matchPanel.normal-okey.table-theme-classic .opponent-rack::before {
  content: "" !important;
  position: absolute !important;
  inset: 4px !important;
  border: 1px solid rgba(255, 228, 164, .28) !important;
  border-radius: 3px !important;
  background:
    linear-gradient(180deg, rgba(255, 235, 185, .14), transparent 24%, transparent 72%, rgba(18, 5, 2, .38)),
    linear-gradient(90deg, rgba(28, 8, 3, .24), transparent 18%, transparent 82%, rgba(28, 8, 3, .24)) !important;
  box-shadow: inset 0 1px rgba(255, 240, 195, .22), inset 0 -2px rgba(31, 8, 2, .38) !important;
  pointer-events: none !important;
}

#matchPanel.normal-okey.table-theme-classic .nok-station-top .opponent-rack {
  background:
    linear-gradient(180deg, rgba(255, 226, 151, .18) 0 12%, rgba(116, 58, 19, .08) 12% 58%, rgba(33, 9, 3, .46) 58% 100%),
    url("/okey/racks/normal-okey-rack-classic-walnut.png") center / cover no-repeat !important;
  box-shadow: inset 0 1px rgba(255, 235, 182, .46), inset 0 -3px rgba(45, 19, 8, .42), 0 8px 14px rgba(0, 0, 0, .48) !important;
}

/* WAVE-17A: the real rack boxes remain rectangular count-only anchors.  The
   visible side rack is a compact horizontal furniture shell painted by one
   pseudo-element; the anchor itself stays private-safe and geometry-stable. */
#matchPanel.normal-okey.table-theme-classic .nok-station-left .opponent-rack::before {
  inset: 36% -68% 37% -68% !important;
  clip-path: polygon(0 22%, 8% 0, 92% 0, 100% 22%, 100% 78%, 92% 100%, 8% 100%, 0 78%) !important;
  transform: rotate(-9deg) !important;
  transform-origin: 100% 50% !important;
  pointer-events: none !important;
}

#matchPanel.normal-okey.table-theme-classic .nok-station-right .opponent-rack::before {
  inset: 36% -68% 37% -68% !important;
  clip-path: polygon(0 22%, 8% 0, 92% 0, 100% 22%, 100% 78%, 92% 100%, 8% 100%, 0 78%) !important;
  transform: rotate(9deg) !important;
  transform-origin: 0 50% !important;
  pointer-events: none !important;
}

/* Side rails are now full decorative rack shells laid along the furniture
   diagonals; the real rack boxes remain transparent count-only anchors. */
#matchPanel.normal-okey.table-theme-classic .nok-station-left .opponent-rack,
#matchPanel.normal-okey.table-theme-classic .nok-station-right .opponent-rack {
  /* WAVE-17B: the count-only anchor must not leave the inherited solid
     border as a vertical stem behind the compact decorative rack. */
  border-color: transparent !important;
  border-style: none !important;
  border-image: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

#matchPanel.normal-okey.table-theme-classic .nok-station-left .opponent-rack::before,
#matchPanel.normal-okey.table-theme-classic .nok-station-right .opponent-rack::before {
  border: 2px solid rgba(211, 154, 85, .68) !important;
  border-image: none !important;
  background:
    linear-gradient(180deg, rgba(255, 235, 181, .56) 0 9%, rgba(182, 112, 43, .42) 9% 18%, rgba(105, 48, 14, .46) 18% 74%, rgba(24, 6, 2, .74) 74% 100%),
    linear-gradient(90deg, rgba(30, 8, 2, .56), rgba(144, 72, 22, .24) 14%, rgba(183, 104, 33, .2) 50%, rgba(73, 27, 8, .3) 86%, rgba(27, 7, 2, .58)),
    url("/okey/classic/normal-okey-classic-walnut.jpg") center / 220px 220px repeat !important;
  box-shadow:
    inset 0 2px rgba(255, 235, 182, .45),
    inset 0 -4px 6px rgba(38, 11, 2, .55),
    0 4px 7px rgba(0, 0, 0, .34) !important;
  pointer-events: none !important;
}

/* The top rail receives one continuous recessed plane instead of a row of
   tile-like divisions.  It remains a static decorative layer. */
#matchPanel.normal-okey.table-theme-classic .nok-station-top .opponent-rack::before {
  inset: 8% 1% 10% !important;
  clip-path: polygon(2% 18%, 98% 18%, 100% 34%, 100% 78%, 96% 100%, 4% 100%, 0 78%, 0 34%) !important;
  box-shadow: inset 0 2px rgba(255, 240, 195, .28), inset 0 -5px rgba(31, 8, 2, .46), 0 3px 6px rgba(0, 0, 0, .3) !important;
  pointer-events: none !important;
}

/* WAVE-22B3: public-count-only true closed-tile backs.  The existing rack
   pseudo-shell remains the only paint surface: each repeated cell is a dark
   patterned back with a raised edge, a visible thickness line, and a contact
   shadow.  No opponent tile or slot nodes are created. */
#matchPanel.normal-okey.table-theme-classic .nok-station-left .opponent-rack::before,
#matchPanel.normal-okey.table-theme-classic .nok-station-right .opponent-rack::before {
  background-image:
    /* Individual tile separation: a dark contact line follows every back. */
    repeating-linear-gradient(
      90deg,
      rgba(12, 4, 5, .78) 0 calc(var(--opponent-closed-back-width, 0%) * .04),
      rgba(186, 65, 43, .98) calc(var(--opponent-closed-back-width, 0%) * .04) calc(var(--opponent-closed-back-width, 0%) * .10),
      rgba(103, 22, 20, .98) calc(var(--opponent-closed-back-width, 0%) * .10) calc(var(--opponent-closed-back-width, 0%) * .18),
      rgba(181, 58, 39, .98) calc(var(--opponent-closed-back-width, 0%) * .18) calc(var(--opponent-closed-back-width, 0%) * .25),
      rgba(121, 25, 21, .98) calc(var(--opponent-closed-back-width, 0%) * .25) calc(var(--opponent-closed-back-width, 0%) * .75),
      rgba(181, 58, 39, .98) calc(var(--opponent-closed-back-width, 0%) * .75) calc(var(--opponent-closed-back-width, 0%) * .82),
      rgba(92, 18, 17, .98) calc(var(--opponent-closed-back-width, 0%) * .82) calc(var(--opponent-closed-back-width, 0%) * .92),
      rgba(36, 8, 9, .98) calc(var(--opponent-closed-back-width, 0%) * .92) var(--opponent-closed-back-width, 0%),
      rgba(13, 4, 5, .98) var(--opponent-closed-back-width, 0%) calc(var(--opponent-closed-back-width, 0%) + .45%),
      transparent calc(var(--opponent-closed-back-width, 0%) + .45%) var(--opponent-closed-tile-step, 0%)
    ),
    /* A narrow warm inset and dark trough make the back read as embossed,
       rather than as an ivory face or a flat paper strip. */
    repeating-linear-gradient(
      90deg,
      transparent 0 calc(var(--opponent-closed-back-width, 0%) * .18),
      rgba(244, 157, 78, .44) calc(var(--opponent-closed-back-width, 0%) * .18) calc(var(--opponent-closed-back-width, 0%) * .23),
      rgba(61, 11, 13, .42) calc(var(--opponent-closed-back-width, 0%) * .23) calc(var(--opponent-closed-back-width, 0%) * .29),
      transparent calc(var(--opponent-closed-back-width, 0%) * .29) calc(var(--opponent-closed-back-width, 0%) * .71),
      rgba(61, 11, 13, .42) calc(var(--opponent-closed-back-width, 0%) * .71) calc(var(--opponent-closed-back-width, 0%) * .77),
      rgba(244, 157, 78, .34) calc(var(--opponent-closed-back-width, 0%) * .77) calc(var(--opponent-closed-back-width, 0%) * .82),
      transparent calc(var(--opponent-closed-back-width, 0%) * .82) var(--opponent-closed-tile-step, 0%)
    ),
    linear-gradient(180deg, rgba(255, 189, 108, .30) 0 10%, rgba(93, 18, 16, .05) 10% 68%, rgba(21, 5, 6, .68) 68% 100%),
    linear-gradient(180deg, rgba(255, 235, 181, .56) 0 9%, rgba(182, 112, 43, .42) 9% 18%, rgba(105, 48, 14, .46) 18% 74%, rgba(24, 6, 2, .74) 74% 100%),
    linear-gradient(90deg, rgba(30, 8, 2, .56), rgba(144, 72, 22, .24) 14%, rgba(183, 104, 33, .2) 50%, rgba(73, 27, 8, .3) 86%, rgba(27, 7, 2, .58)),
    url("/okey/classic/normal-okey-classic-walnut.jpg") !important;
  background-position: center 42%, center 42%, center 42%, center, center, center !important;
  background-size: var(--opponent-closed-strip-width, 0%) 74%, var(--opponent-closed-strip-width, 0%) 74%, var(--opponent-closed-strip-width, 0%) 74%, auto, auto, 220px 220px !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat !important;
  box-shadow:
    inset 0 2px rgba(255, 219, 143, .42),
    inset 0 -4px 6px rgba(26, 5, 5, .74),
    0 5px 10px rgba(0, 0, 0, .46) !important;
}

#matchPanel.normal-okey.table-theme-classic .nok-station-top .opponent-rack::before {
  background-image:
    repeating-linear-gradient(
      90deg,
      rgba(12, 4, 5, .78) 0 calc(var(--opponent-closed-back-width, 0%) * .04),
      rgba(186, 65, 43, .98) calc(var(--opponent-closed-back-width, 0%) * .04) calc(var(--opponent-closed-back-width, 0%) * .10),
      rgba(103, 22, 20, .98) calc(var(--opponent-closed-back-width, 0%) * .10) calc(var(--opponent-closed-back-width, 0%) * .18),
      rgba(181, 58, 39, .98) calc(var(--opponent-closed-back-width, 0%) * .18) calc(var(--opponent-closed-back-width, 0%) * .25),
      rgba(121, 25, 21, .98) calc(var(--opponent-closed-back-width, 0%) * .25) calc(var(--opponent-closed-back-width, 0%) * .75),
      rgba(181, 58, 39, .98) calc(var(--opponent-closed-back-width, 0%) * .75) calc(var(--opponent-closed-back-width, 0%) * .82),
      rgba(92, 18, 17, .98) calc(var(--opponent-closed-back-width, 0%) * .82) calc(var(--opponent-closed-back-width, 0%) * .92),
      rgba(36, 8, 9, .98) calc(var(--opponent-closed-back-width, 0%) * .92) var(--opponent-closed-back-width, 0%),
      rgba(13, 4, 5, .98) var(--opponent-closed-back-width, 0%) calc(var(--opponent-closed-back-width, 0%) + .45%),
      transparent calc(var(--opponent-closed-back-width, 0%) + .45%) var(--opponent-closed-tile-step, 0%)
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 calc(var(--opponent-closed-back-width, 0%) * .18),
      rgba(244, 157, 78, .44) calc(var(--opponent-closed-back-width, 0%) * .18) calc(var(--opponent-closed-back-width, 0%) * .23),
      rgba(61, 11, 13, .42) calc(var(--opponent-closed-back-width, 0%) * .23) calc(var(--opponent-closed-back-width, 0%) * .29),
      transparent calc(var(--opponent-closed-back-width, 0%) * .29) calc(var(--opponent-closed-back-width, 0%) * .71),
      rgba(61, 11, 13, .42) calc(var(--opponent-closed-back-width, 0%) * .71) calc(var(--opponent-closed-back-width, 0%) * .77),
      rgba(244, 157, 78, .34) calc(var(--opponent-closed-back-width, 0%) * .77) calc(var(--opponent-closed-back-width, 0%) * .82),
      transparent calc(var(--opponent-closed-back-width, 0%) * .82) var(--opponent-closed-tile-step, 0%)
    ),
    linear-gradient(180deg, rgba(255, 189, 108, .30) 0 10%, rgba(93, 18, 16, .05) 10% 68%, rgba(21, 5, 6, .68) 68% 100%),
    linear-gradient(
      90deg,
      rgba(255, 235, 185, .14), transparent 24%, transparent 72%, rgba(18, 5, 2, .38)
    ),
    linear-gradient(90deg, rgba(28, 8, 3, .24), transparent 18%, transparent 82%, rgba(28, 8, 3, .24)) !important;
  background-position: center 42%, center 42%, center 42%, center, center !important;
  background-size: var(--opponent-closed-strip-width, 0%) 76%, var(--opponent-closed-strip-width, 0%) 76%, var(--opponent-closed-strip-width, 0%) 76%, auto, auto !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat !important;
  box-shadow:
    inset 0 2px rgba(255, 219, 143, .42),
    inset 0 -5px 7px rgba(26, 5, 5, .78),
    0 5px 10px rgba(0, 0, 0, .46) !important;
}

#matchPanel.normal-okey.table-theme-classic .opponent-rack::after {
  color: #fff0bf !important;
  border: 1px solid rgba(214, 158, 82, .44) !important;
  background: rgba(5, 18, 16, .92) !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .5) !important;
}

/* WAVE-17C: side count badges must stay intrinsic.  The historical
   bottom: 2px combined with the side rack's tall containing block and the
   later top offset made this pseudo-element stretch into a vertical stem. */
#matchPanel.normal-okey.table-theme-classic .nok-station-left .opponent-rack::after,
#matchPanel.normal-okey.table-theme-classic .nok-station-right .opponent-rack::after {
  top: -13px !important;
  right: -2px !important;
  bottom: auto !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  pointer-events: none !important;
}

/* The rack remains the existing two-row interaction surface, with a richer
   walnut finish behind the unchanged handTiles/grid/tile elements. */
#matchPanel.normal-okey.table-theme-classic .normal-okey-rack-zone {
  border-color: rgba(91, 45, 19, .42) !important;
  background:
    linear-gradient(180deg, rgba(255, 224, 157, .32), transparent 16%),
    linear-gradient(180deg, rgba(192, 119, 55, .34), rgba(61, 28, 13, .28)),
    url("/okey/classic/normal-okey-classic-walnut.jpg") center / 420px 420px repeat !important;
  box-shadow:
    0 8px 14px rgba(0, 0, 0, .28),
    inset 0 3px rgba(255, 237, 187, .48),
    inset 0 -8px 12px rgba(55, 25, 9, .28) !important;
}

/* A decorative front-furniture bridge makes the accepted light rack read as
   part of the walnut table body.  It sits behind the rack and never changes
   the rack, hand-tile, or drag/drop geometry.  WAVE-16 keeps the bridge
   flush with the rack so it cannot paint detached horizontal bars beside it. */
#matchPanel.normal-okey.table-theme-classic .nok-own-station::before {
  content: "" !important;
  position: absolute !important;
  inset: -2px 0 -1px !important;
  border: 1px solid rgba(58, 25, 9, .72) !important;
  border-radius: 4px 4px 7px 7px !important;
  background:
    linear-gradient(180deg, rgba(255, 222, 151, .18) 0 14%, transparent 14% 60%, rgba(24, 7, 2, .34) 60% 100%),
    url("/okey/classic/normal-okey-classic-walnut.jpg") center / 420px 420px repeat !important;
  box-shadow:
    inset 0 1px rgba(255, 226, 159, .28),
    inset 0 -2px 4px rgba(24, 7, 2, .42),
    0 1px 2px rgba(31, 10, 3, .18) !important;
  clip-path: polygon(4% 0, 96% 0, 100% 13%, 100% 86%, 95% 100%, 5% 100%, 0 86%, 0 13%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

#matchPanel.normal-okey.table-theme-classic .nok-own-station .normal-okey-rack-zone[data-rack-skin] {
  z-index: 1 !important;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, .18),
    inset 0 3px rgba(255, 237, 187, .48),
    inset 0 -6px 10px rgba(55, 25, 9, .24) !important;
}

/* Keep the accepted rack material and tile plane intact while slimming only
   the decorative end posts and player-facing shadow planes. */
#matchPanel.normal-okey.table-theme-classic .nok-own-station .normal-okey-rack-zone[data-rack-skin] .rack-left-cap,
#matchPanel.normal-okey.table-theme-classic .nok-own-station .normal-okey-rack-zone[data-rack-skin] .rack-right-cap {
  border-width: 1px !important;
  box-shadow: inset 1px 0 rgba(255, 220, 157, .18), inset -2px 0 rgba(45, 20, 9, .26), 0 2px 4px rgba(30, 10, 3, .18) !important;
}

#matchPanel.normal-okey.table-theme-classic .nok-own-station .normal-okey-rack-zone[data-rack-skin] .rack-front-lip {
  border-top-width: 2px !important;
  border-bottom-width: 3px !important;
  box-shadow: 0 3px 6px rgba(53, 24, 8, .28), inset 0 2px rgba(255, 241, 192, .54), inset 0 -3px 4px rgba(42, 16, 6, .28) !important;
}

#matchPanel.normal-okey.table-theme-classic #handTiles .tile {
  border-color: rgba(117, 76, 35, .62) !important;
  border-radius: 5px !important;
  background-color: #fff5df !important;
  box-shadow: 0 5px 8px rgba(45, 21, 9, .38), inset 0 1px rgba(255, 255, 255, .78) !important;
}

#matchPanel.normal-okey.table-theme-classic #handTiles .tile:hover:not(:disabled) {
  filter: brightness(1.045) saturate(1.04) !important;
  box-shadow: 0 8px 13px rgba(45, 21, 9, .46), inset 0 1px rgba(255, 255, 255, .86) !important;
}

/* Center objects read as physical pieces, not as one large dark panel. */
#matchPanel.normal-okey.table-theme-classic .nok-center {
  background: transparent !important;
}

#matchPanel.normal-okey.table-theme-classic .nok-pile-box,
#matchPanel.normal-okey.table-theme-classic .center-indicator,
#matchPanel.normal-okey.table-theme-classic .nok-discard-center {
  border-color: rgba(229, 183, 104, .34) !important;
  background: rgba(4, 29, 20, .16) !important;
  box-shadow: 0 8px 15px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 239, 189, .1) !important;
}

#matchPanel.normal-okey.table-theme-classic .draw-stack {
  border-color: #e0ad67 !important;
  background:
    linear-gradient(145deg, rgba(194, 124, 57, .45), rgba(50, 21, 9, .52)),
    url("/okey/classic/normal-okey-classic-walnut.jpg") center / 180px 180px repeat !important;
  box-shadow: 4px 4px 0 #4b2513, 8px 8px 0 #2a130c, 0 13px 18px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 235, 183, .28) !important;
}

#matchPanel.normal-okey.table-theme-classic .center-indicator-tile {
  border-color: #f1d293 !important;
  background: #fff5df !important;
  box-shadow: 0 9px 18px rgba(0, 0, 0, .4), 0 0 0 2px rgba(235, 183, 93, .2) !important;
}

#matchPanel.normal-okey.table-theme-classic .unowned-discard {
  border-color: rgba(238, 199, 128, .52) !important;
  background: rgba(255, 246, 220, .07) !important;
}

/* Header, controls and status keep the reference's dark-blue polished client
   treatment while the existing labels, IDs and handlers stay untouched. */
#matchPanel.normal-okey.table-theme-classic .nok-logo-card {
  border-color: #d79b3f !important;
  background: linear-gradient(145deg, rgba(5, 18, 22, .98), rgba(21, 26, 20, .96)) !important;
  box-shadow: inset 0 0 0 2px rgba(246, 202, 113, .2), 0 10px 24px rgba(0, 0, 0, .5) !important;
}

#matchPanel.normal-okey.table-theme-classic .nok-logo-card::before {
  content: "\265B" !important;
  color: #ffd76f !important;
  text-shadow: 0 2px 10px rgba(255, 194, 79, .32) !important;
}

#matchPanel.normal-okey.table-theme-classic .nok-left-column .nok-info-panel {
  border-color: rgba(221, 173, 89, .7) !important;
  background: linear-gradient(145deg, rgba(6, 22, 25, .97), rgba(4, 13, 17, .97)) !important;
  box-shadow: inset 0 1px rgba(255, 236, 180, .1), 0 10px 22px rgba(0, 0, 0, .44) !important;
}

#matchPanel.normal-okey.table-theme-classic .nok-top-controls button {
  border-color: rgba(83, 154, 186, .62) !important;
  background: linear-gradient(180deg, #143f5c, #071d31) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .12), 0 7px 16px rgba(0, 0, 0, .36) !important;
}

#matchPanel.normal-okey.table-theme-classic .nok-top-controls button:hover:not(:disabled) {
  border-color: #f1c36e !important;
  background: linear-gradient(180deg, #245a73, #0b293c) !important;
}

@media (min-width: 1301px) {
  #matchPanel.normal-okey.table-theme-classic .nok-statusbar {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

/* Action hierarchy follows the reference: blue draw, amber take-back,
   red discard, green finish, blue autoplay. */
#matchPanel.normal-okey.table-theme-classic .nok-live-actions button {
  border-color: rgba(223, 178, 91, .56) !important;
  box-shadow: inset 0 1px rgba(255, 246, 208, .13), 0 7px 14px rgba(0, 0, 0, .38) !important;
}

#matchPanel.normal-okey.table-theme-classic .nok-live-actions #drawPileButton {
  background: linear-gradient(180deg, #18789d, #07445f) !important;
}

#matchPanel.normal-okey.table-theme-classic .nok-live-actions #discardPileButton {
  background: linear-gradient(180deg, #a16c1f, #5c360b) !important;
}

#matchPanel.normal-okey.table-theme-classic .nok-live-actions #discardButton {
  border-color: rgba(255, 127, 108, .74) !important;
  background: linear-gradient(180deg, #c43e3a, #721b24) !important;
}

#matchPanel.normal-okey.table-theme-classic .nok-live-actions #finishButton {
  border-color: rgba(91, 224, 137, .74) !important;
  background: linear-gradient(180deg, #13935d, #075b3d) !important;
}

#matchPanel.normal-okey.table-theme-classic .nok-live-actions #showIndicatorButton,
#matchPanel.normal-okey.table-theme-classic .nok-live-actions #okeyAutoPlayButton,
#matchPanel.normal-okey.table-theme-classic .nok-live-actions #forfeitTableButton {
  background: linear-gradient(180deg, #205b78, #0a2c45) !important;
}

#matchPanel.normal-okey.table-theme-classic .nok-action-bar {
  border: 1px solid rgba(225, 178, 91, .28) !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, rgba(7, 22, 29, .82), rgba(4, 13, 18, .76)) !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 238, 187, .08) !important;
}

#matchPanel.normal-okey.table-theme-classic .nok-action-bar button {
  border-color: rgba(80, 148, 183, .54) !important;
  background: linear-gradient(180deg, #17435f, #082239) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 6px 12px rgba(0, 0, 0, .34) !important;
}

#matchPanel.normal-okey.table-theme-classic .nok-action-bar #nokAutoSortPresentation {
  border-color: rgba(82, 216, 133, .72) !important;
  background: linear-gradient(180deg, #147c56, #075238) !important;
  color: #efffe9 !important;
}

/* The right column keeps its locked geometry but receives the same client
   finish and retains the existing chat/microphone controls. */
#matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column {
  border-color: rgba(217, 169, 87, .46) !important;
  background: linear-gradient(180deg, rgba(5, 23, 29, .93), rgba(3, 13, 18, .97)) !important;
  box-shadow: 0 22px 44px rgba(0, 0, 0, .46), inset 0 1px rgba(255, 239, 191, .1) !important;
}

#matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-chat-panel,
#matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-treat-panel,
#matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-radio-panel {
  border-color: rgba(83, 160, 176, .46) !important;
  background: linear-gradient(145deg, rgba(8, 31, 40, .96), rgba(3, 16, 23, .98)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 8px 18px rgba(0, 0, 0, .28) !important;
}

#matchPanel.normal-okey.table-theme-classic .chat-line {
  border-color: rgba(103, 185, 187, .16) !important;
  background: linear-gradient(145deg, rgba(17, 67, 70, .28), rgba(3, 23, 31, .36)) !important;
}

#matchPanel.normal-okey.table-theme-classic .chat-line strong,
#matchPanel.normal-okey.table-theme-classic .nok-treat-panel header strong,
#matchPanel.normal-okey.table-theme-classic .nok-radio-panel header strong {
  color: #f5cf7c !important;
}

#matchPanel.normal-okey.table-theme-classic .chat-form input {
  border-color: rgba(98, 173, 185, .42) !important;
  background: rgba(2, 17, 24, .84) !important;
}

#matchPanel.normal-okey.table-theme-classic .speech-to-text-button {
  border-color: rgba(220, 174, 91, .62) !important;
  background: linear-gradient(180deg, #194965, #09273d) !important;
  color: #f6d88d !important;
}

#matchPanel.normal-okey.table-theme-classic .nok-radio-icon {
  color: #f2c76f !important;
  text-shadow: 0 0 14px rgba(242, 199, 111, .5) !important;
}

#matchPanel.normal-okey.table-theme-classic .normal-okey-bottom-menu {
  border-color: rgba(217, 169, 87, .42) !important;
  background: linear-gradient(180deg, rgba(5, 23, 29, .94), rgba(3, 13, 18, .98)) !important;
  box-shadow: 0 9px 22px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 239, 191, .08) !important;
}

#matchPanel.normal-okey.table-theme-classic .normal-okey-bottom-menu-button {
  border-color: rgba(74, 143, 172, .5) !important;
  background: linear-gradient(180deg, #143d57, #071e32) !important;
  color: #f4e4bd !important;
}

#matchPanel.normal-okey.table-theme-classic .normal-okey-bottom-menu-button:hover:not(:disabled),
#matchPanel.normal-okey.table-theme-classic .normal-okey-bottom-menu-button:focus-visible {
  border-color: #f1c36e !important;
  background: linear-gradient(180deg, #245d73, #0b2a40) !important;
}

/* WAVE-25_PRESENTATION_POLISH_START
   Presentation-only finish for the already locked Classic composition.  No
   station, rack, table, center, or interaction geometry is owned here. */
#matchPanel.normal-okey.table-theme-classic .seat-identity strong {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  letter-spacing: .012em !important;
}

#matchPanel.normal-okey.table-theme-classic .seat-identity > small {
  color: rgba(205, 222, 211, .78) !important;
  font-weight: 600 !important;
  letter-spacing: .018em !important;
  opacity: .9 !important;
}

#matchPanel.normal-okey.table-theme-classic .seat-identity .player-score {
  color: #f1cd86 !important;
  font-weight: 700 !important;
  opacity: .86 !important;
}

#matchPanel.normal-okey.table-theme-classic .seat-identity .series-score {
  font-weight: 650 !important;
  opacity: .82 !important;
}

#matchPanel.normal-okey.table-theme-classic .seat-avatar {
  outline: 1px solid rgba(255, 218, 132, .34) !important;
  outline-offset: 1px !important;
  box-shadow:
    inset 0 2px 4px rgba(255, 236, 184, .18),
    0 0 0 2px rgba(255, 225, 147, .14),
    0 7px 14px rgba(0, 0, 0, .42) !important;
}

#matchPanel.normal-okey.table-theme-classic .seat-identity::after {
  z-index: 3 !important;
  pointer-events: none !important;
  box-shadow: 0 0 0 2px rgba(7, 20, 16, .72), 0 0 9px rgba(97, 220, 146, .4) !important;
}

#matchPanel.normal-okey.table-theme-classic .player-seat.active .seat-identity {
  box-shadow:
    0 0 0 1px rgba(246, 208, 120, .2),
    0 0 13px rgba(246, 190, 91, .18),
    0 8px 18px rgba(0, 0, 0, .42) !important;
}

#matchPanel.normal-okey.table-theme-classic .nok-station-top .opponent-rack::before,
#matchPanel.normal-okey.table-theme-classic .nok-station-left .opponent-rack::before,
#matchPanel.normal-okey.table-theme-classic .nok-station-right .opponent-rack::before {
  box-shadow:
    inset 0 2px rgba(255, 235, 182, .38),
    inset 0 -4px 7px rgba(26, 5, 5, .68),
    0 4px 8px rgba(0, 0, 0, .4) !important;
  filter: saturate(1.04) contrast(1.02) !important;
}

#matchPanel.normal-okey.table-theme-classic .nok-own-station .normal-okey-rack-zone[data-rack-skin] {
  box-shadow:
    0 7px 13px rgba(0, 0, 0, .3),
    inset 0 3px rgba(255, 237, 187, .5),
    inset 0 -7px 11px rgba(55, 25, 9, .28) !important;
}

#matchPanel.normal-okey.table-theme-classic .nok-own-station .rack-wood-body {
  filter: saturate(1.04) contrast(1.02) drop-shadow(0 2px 3px rgba(33, 11, 3, .22)) !important;
}

#matchPanel.normal-okey.table-theme-classic .nok-pile-box strong,
#matchPanel.normal-okey.table-theme-classic .center-indicator small,
#matchPanel.normal-okey.table-theme-classic .nok-discard-center small {
  color: #f4d99b !important;
  font-weight: 800 !important;
  letter-spacing: .075em !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .5) !important;
}

#matchPanel.normal-okey.table-theme-classic .nok-pile-box small,
#matchPanel.normal-okey.table-theme-classic .nok-discard-help {
  color: rgba(220, 229, 201, .76) !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
}

#matchPanel.normal-okey.table-theme-classic .center-indicator-tile,
#matchPanel.normal-okey.table-theme-classic .unowned-discard {
  box-shadow:
    0 7px 15px rgba(0, 0, 0, .38),
    0 0 0 1px rgba(235, 183, 93, .22),
    inset 0 1px rgba(255, 255, 255, .56) !important;
}

#matchPanel.normal-okey.table-theme-classic .nok-live-actions button,
#matchPanel.normal-okey.table-theme-classic .nok-action-bar button {
  font-weight: 700 !important;
  letter-spacing: .012em !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .34) !important;
  transition: filter .16s ease, border-color .16s ease, box-shadow .16s ease !important;
}

#matchPanel.normal-okey.table-theme-classic .nok-live-actions button:disabled,
#matchPanel.normal-okey.table-theme-classic .nok-action-bar button:disabled {
  filter: saturate(.68) brightness(.82) !important;
}

#matchPanel.normal-okey.table-theme-classic .normal-okey-scoreboard-heading strong {
  color: #f4d28c !important;
  font-weight: 800 !important;
  letter-spacing: .09em !important;
}

#matchPanel.normal-okey.table-theme-classic .normal-okey-scoreboard-row {
  border-color: rgba(218, 170, 104, .2) !important;
  background: linear-gradient(90deg, rgba(255, 218, 132, .06), rgba(0, 0, 0, .16)) !important;
  box-shadow: inset 0 1px rgba(255, 239, 189, .06) !important;
}

#matchPanel.normal-okey.table-theme-classic .normal-okey-scoreboard-name,
#matchPanel.normal-okey.table-theme-classic .normal-okey-scoreboard-team {
  color: #e9e2c8 !important;
  font-weight: 700 !important;
}

#matchPanel.normal-okey.table-theme-classic .normal-okey-scoreboard-score {
  color: #f5cf81 !important;
  font-weight: 800 !important;
}
/* WAVE-25_PRESENTATION_POLISH_END */

/* WAVE-25B_LEFT_RIGHT_READABILITY_START
   Side stations keep their locked 180x104 cards and rack anchors.  Only the
   identity paint layer receives a mirrored readability treatment. */
#matchPanel.normal-okey.table-theme-classic .nok-station-left .seat-identity,
#matchPanel.normal-okey.table-theme-classic .nok-station-right .seat-identity {
  border-radius: 7px !important;
}

#matchPanel.normal-okey.table-theme-classic .nok-station-left .seat-identity {
  background: linear-gradient(90deg, rgba(3, 14, 18, .94) 0 68%, rgba(3, 14, 18, .58) 86%, transparent 100%) !important;
}

#matchPanel.normal-okey.table-theme-classic .nok-station-right .seat-identity {
  background: linear-gradient(270deg, rgba(3, 14, 18, .94) 0 68%, rgba(3, 14, 18, .58) 86%, transparent 100%) !important;
}

#matchPanel.normal-okey.table-theme-classic .nok-station-left .seat-identity > strong,
#matchPanel.normal-okey.table-theme-classic .nok-station-left .seat-identity > small,
#matchPanel.normal-okey.table-theme-classic .nok-station-left .seat-identity > .player-score,
#matchPanel.normal-okey.table-theme-classic .nok-station-left .seat-identity > .series-score,
#matchPanel.normal-okey.table-theme-classic .nok-station-right .seat-identity > strong,
#matchPanel.normal-okey.table-theme-classic .nok-station-right .seat-identity > small,
#matchPanel.normal-okey.table-theme-classic .nok-station-right .seat-identity > .player-score,
#matchPanel.normal-okey.table-theme-classic .nok-station-right .seat-identity > .series-score {
  z-index: 3 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .82), 0 0 5px rgba(3, 14, 18, .72) !important;
}

#matchPanel.normal-okey.table-theme-classic .nok-station-left .opponent-rack,
#matchPanel.normal-okey.table-theme-classic .nok-station-right .opponent-rack {
  z-index: 1 !important;
}
/* WAVE-25B_LEFT_RIGHT_READABILITY_END */

/* WAVE-25C_OPPONENT_RACK_PRIVACY_ORIENTATION_START
   The count-only rack anchors remain unchanged, but their visible face is a
   single opaque walnut plane.  This deliberately supersedes the historical
   repeated tile-back paint: opponents show furniture, never a tile-back row.
   Public hand-count variables remain data-only and no opponent tile nodes are
   introduced. */
#matchPanel.normal-okey.table-theme-classic .nok-station-top .opponent-rack::before,
#matchPanel.normal-okey.table-theme-classic .nok-station-left .opponent-rack::before,
#matchPanel.normal-okey.table-theme-classic .nok-station-right .opponent-rack::before {
  background-image:
    linear-gradient(180deg, rgba(255, 230, 165, .3), rgba(126, 61, 20, .08) 32%, rgba(26, 7, 2, .58) 100%),
    linear-gradient(90deg, rgba(28, 8, 3, .5), rgba(169, 88, 28, .18) 22%, rgba(190, 112, 40, .2) 50%, rgba(72, 26, 7, .3) 82%, rgba(25, 6, 2, .58)),
    url("/okey/classic/normal-okey-classic-walnut.jpg") !important;
  background-position: center, center, center !important;
  background-size: 100% 100%, 100% 100%, 220px 220px !important;
  background-repeat: no-repeat, no-repeat, repeat !important;
  box-shadow:
    inset 0 2px rgba(255, 235, 182, .42),
    inset 0 -5px 7px rgba(35, 9, 2, .68),
    0 5px 10px rgba(0, 0, 0, .46) !important;
}
/* WAVE-25C_OPPONENT_RACK_PRIVACY_ORIENTATION_END */

/* NORMAL_OKEY_CLASSIC_VISUAL_SKIN_END */

/* NORMAL_OKEY_CLASSIC_PARITY8_UI_GATE=YES
   Test controls remain in the DOM for explicit local test mode, but a
   localhost test runtime must not make them part of ordinary gameplay. */
html:not([data-test-mode="enabled"]) #matchPanel.normal-okey #gameBoard > .nok-test-helper-actions,
html:not([data-test-mode="enabled"]) #normalOkeyDiagnosticPanel {
  display: none !important;
}

/* The former occupied side-rack box shadow painted a dark vertical stem
   behind the decorative pseudo-shell.  The count-only anchor stays visually
   transparent; the pseudo-shell above owns all side-rack paint. */
#matchPanel.normal-okey.table-theme-classic .nok-station-top .opponent-rack {
  border-radius: 8px !important;
  box-shadow:
    inset 0 2px rgba(255, 235, 182, .34),
    inset 0 -7px rgba(45, 19, 8, .42),
    0 8px 16px rgba(0, 0, 0, .5) !important;
}

/* NORMAL_OKEY_CLASSIC_STRUCTURAL_SHELL_START */
/* The old table pseudo-shell remains historical source material, but is no
   longer painted.  The dedicated furniture element above is the sole visible
   outer shell and remains non-interactive. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic .nok-table,
  #matchPanel.normal-okey.table-theme-classic #gameBoard {
    border-color: transparent !important;
    border-image: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-table::before,
  #matchPanel.normal-okey.table-theme-classic .nok-table::after {
    content: none !important;
    display: none !important;
    pointer-events: none !important;
  }
}
/* NORMAL_OKEY_CLASSIC_STRUCTURAL_SHELL_END */

/* WAVE-H7_REFERENCE_TABLE_FURNITURE_EXACT_REBUILD_START */
/*
   H7 is the sole effective Classic desktop table paint owner.  Gameplay
   coordinates remain a separate plane.  The visible furniture is composed as
   a reference-first walnut case: far rail, sloped side rails, chamfered
   corner joints, a recessed felt opening with continuous amber trim, and a
   deep near/front fascia.  Historical H2/H3/H4/H5/H6 paint rules above are
   source history only and are deterministically inert. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic .nok-table,
  #matchPanel.normal-okey.table-theme-classic #gameBoard {
    border-color: transparent !important;
    border-image: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-table::before,
  #matchPanel.normal-okey.table-theme-classic .nok-table::after,
  #matchPanel.normal-okey.table-theme-classic #gameBoard::before,
  #matchPanel.normal-okey.table-theme-classic #gameBoard::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-visual-furniture-shell {
    --classic-h7-shell-top: calc(48px * var(--classic-reference-scale-y));
    --classic-h7-shell-right: calc(30px * var(--classic-reference-scale-x));
    --classic-h7-shell-bottom: calc(66px * var(--classic-reference-scale-y));
    --classic-h7-shell-left: calc(60px * var(--classic-reference-scale-x));
    --classic-h7-felt-top: calc(38px * var(--classic-reference-scale-y));
    --classic-h7-felt-right: calc(30px * var(--classic-reference-scale-x));
    --classic-h7-felt-bottom: calc(48px * var(--classic-reference-scale-y));
    --classic-h7-felt-left: calc(30px * var(--classic-reference-scale-x));
    --classic-h7-front-rail: calc(58px * var(--classic-reference-scale-y));
    inset: calc(-1 * var(--classic-h7-shell-top))
      calc(-1 * var(--classic-h7-shell-right))
      calc(-1 * var(--classic-h7-shell-bottom))
      calc(-1 * var(--classic-h7-shell-left)) !important;
    border: calc(12px * var(--classic-reference-scale-x)) solid #4b2410 !important;
    border-image: url("/okey/classic/normal-okey-classic-walnut.jpg") 48 round !important;
    border-radius: 22px 22px 34px 34px !important;
    clip-path: polygon(
      17% 0,
      83% 0,
      88% 2%,
      97% 88%,
      100% 95%,
      97% 100%,
      3% 100%,
      0 95%,
      3% 88%,
      12% 2%
    ) !important;
    background:
      linear-gradient(180deg, rgba(255, 227, 164, .38) 0 7%, rgba(145, 75, 24, .2) 7% 16%, transparent 16% 84%, rgba(39, 12, 4, .42) 84% 100%),
      linear-gradient(110deg, rgba(255, 224, 157, .24) 0 3%, transparent 3% 91%, rgba(32, 9, 3, .42) 97% 100%),
      linear-gradient(70deg, rgba(32, 9, 3, .42) 0 3%, transparent 9% 97%, rgba(255, 215, 141, .18) 97% 100%),
      url("/okey/classic/normal-okey-classic-walnut.jpg") center / 420px 420px repeat !important;
    box-shadow:
      inset 0 3px rgba(255, 232, 172, .48),
      inset 0 -24px 26px rgba(27, 8, 2, .52),
      0 14px 22px rgba(0, 0, 0, .38) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-visual-furniture-shell::before {
    inset: var(--classic-h7-felt-top) var(--classic-h7-felt-right) var(--classic-h7-felt-bottom) var(--classic-h7-felt-left) !important;
    border: 2px solid rgba(211, 164, 72, .92) !important;
    border-image: none !important;
    clip-path: polygon(
      20% 0,
      80% 0,
      84% 3%,
      95% 88%,
      98% 95%,
      95% 100%,
      5% 100%,
      2% 95%,
      5% 88%,
      16% 3%
    ) !important;
    background:
      radial-gradient(ellipse at 50% 38%, rgba(61, 185, 105, .2), rgba(8, 90, 51, .08) 58%, rgba(1, 35, 24, .32) 100%),
      linear-gradient(180deg, rgba(27, 139, 78, .16), rgba(2, 57, 33, .28)),
      url("/okey/classic/normal-okey-classic-felt.jpg") center / 420px 420px repeat !important;
    box-shadow:
      inset 0 2px rgba(255, 225, 139, .22),
      inset 0 0 0 3px rgba(14, 29, 17, .76),
      inset 0 -12px 16px rgba(0, 24, 13, .4) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-visual-furniture-shell::after {
    left: 1% !important;
    right: 1% !important;
    bottom: 0 !important;
    height: var(--classic-h7-front-rail) !important;
    border: 2px solid rgba(117, 59, 20, .78) !important;
    border-image: none !important;
    clip-path: polygon(
      4% 0,
      96% 0,
      100% 12%,
      98% 86%,
      95% 100%,
      5% 100%,
      2% 86%,
      0 12%
    ) !important;
    background:
      linear-gradient(180deg, rgba(255, 226, 158, .42) 0 14%, rgba(181, 98, 31, .24) 14% 40%, rgba(55, 19, 5, .68) 40% 100%),
      linear-gradient(90deg, rgba(38, 10, 2, .56), rgba(175, 91, 28, .2) 18%, rgba(191, 112, 39, .24) 50%, rgba(65, 20, 5, .56) 84%),
      url("/okey/classic/normal-okey-classic-walnut.jpg") center / 420px 420px repeat !important;
    box-shadow:
      inset 0 3px rgba(255, 231, 170, .52),
      inset 0 -12px 16px rgba(23, 6, 2, .7),
      0 3px 6px rgba(0, 0, 0, .28) !important;
  }
}
/* WAVE-H7_REFERENCE_TABLE_FURNITURE_EXACT_REBUILD_END */

/* WAVE-H8_APPROVED_IMAGE_TABLE_IMPLEMENTATION_START */
/*
   H8 is the final approved-image furniture layer for Classic desktop.  The
   board remains the gameplay coordinate plane; this single decorative child
   paints the continuous walnut body, straight perspective rails, recessed
   felt opening, inner brass trim, and deep near fascia.  H7 remains in source
   history only and is superseded here by the later cascade.
*/
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic .nok-table,
  #matchPanel.normal-okey.table-theme-classic #gameBoard {
    border-color: transparent !important;
    border-image: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-table::before,
  #matchPanel.normal-okey.table-theme-classic .nok-table::after,
  #matchPanel.normal-okey.table-theme-classic #gameBoard::before,
  #matchPanel.normal-okey.table-theme-classic #gameBoard::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-visual-furniture-shell {
    --classic-h8-frame-top: calc(38px * var(--classic-reference-scale-y));
    --classic-h8-frame-side: calc(36px * var(--classic-reference-scale-x));
    --classic-h8-frame-bottom: calc(58px * var(--classic-reference-scale-y));
    --classic-h8-front-rail: calc(52px * var(--classic-reference-scale-y));
    inset: calc(-16px * var(--classic-reference-scale-y))
      calc(-14px * var(--classic-reference-scale-x))
      calc(-10px * var(--classic-reference-scale-y))
      calc(-14px * var(--classic-reference-scale-x)) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    border: 0 !important;
    border-image: none !important;
    border-radius: 28px 28px 36px 36px !important;
    clip-path: polygon(
      4% 0,
      96% 0,
      99% 2%,
      100% 7%,
      100% 88%,
      99% 95%,
      96% 100%,
      4% 100%,
      1% 95%,
      0 88%,
      0 7%,
      1% 2%
    ) !important;
    background:
      linear-gradient(180deg, rgba(255, 225, 156, .28) 0 6%, transparent 6% 84%, rgba(44, 14, 5, .28) 84% 100%),
      linear-gradient(90deg, rgba(36, 10, 3, .48), transparent 10% 90%, rgba(36, 10, 3, .5)),
      linear-gradient(180deg, rgba(113, 52, 17, .2), rgba(56, 20, 6, .18)),
      url("/okey/classic/normal-okey-classic-walnut.jpg") center / 420px 420px repeat !important;
    box-shadow:
      inset 0 2px rgba(255, 235, 180, .5),
      inset 0 0 0 3px rgba(48, 16, 5, .52),
      inset 0 -25px 30px rgba(31, 8, 2, .46),
      0 12px 20px rgba(0, 0, 0, .34) !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-visual-furniture-shell::before {
    content: "" !important;
    position: absolute !important;
    inset: var(--classic-h8-frame-top) var(--classic-h8-frame-side)
      var(--classic-h8-frame-bottom) var(--classic-h8-frame-side) !important;
    box-sizing: border-box !important;
    border: 2px solid rgba(211, 158, 61, .82) !important;
    border-image: none !important;
    border-radius: 15px 15px 24px 24px !important;
    clip-path: polygon(
      5% 0,
      95% 0,
      100% 5%,
      100% 89%,
      97% 100%,
      3% 100%,
      0 89%,
      0 5%
    ) !important;
    background:
      radial-gradient(ellipse at 50% 38%, rgba(68, 180, 105, .2), rgba(10, 92, 54, .08) 58%, rgba(0, 31, 23, .34) 100%),
      linear-gradient(180deg, rgba(30, 138, 78, .14), rgba(1, 48, 30, .3)),
      url("/okey/classic/normal-okey-classic-felt.jpg") center / 420px 420px repeat !important;
    box-shadow:
      inset 0 0 0 2px rgba(12, 25, 16, .84),
      inset 0 2px rgba(255, 225, 139, .2),
      inset 0 -12px 18px rgba(0, 25, 14, .42),
      0 0 0 1px rgba(24, 12, 4, .86) !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-visual-furniture-shell::after {
    content: "" !important;
    position: absolute !important;
    left: calc(6px * var(--classic-reference-scale-x)) !important;
    right: calc(6px * var(--classic-reference-scale-x)) !important;
    bottom: 0 !important;
    height: var(--classic-h8-front-rail) !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-top: 2px solid rgba(246, 193, 96, .48) !important;
    border-radius: 0 0 27px 27px !important;
    clip-path: polygon(
      4% 0,
      96% 0,
      99.5% 10%,
      100% 86%,
      96% 100%,
      4% 100%,
      0 86%,
      .5% 10%
    ) !important;
    background:
      linear-gradient(180deg, rgba(255, 222, 149, .32) 0 8%, rgba(152, 76, 23, .18) 8% 30%, rgba(67, 22, 5, .76) 30% 100%),
      linear-gradient(90deg, rgba(39, 10, 2, .58), rgba(162, 81, 24, .22) 18%, rgba(202, 124, 42, .28) 50%, rgba(67, 20, 4, .58) 84%),
      url("/okey/classic/normal-okey-classic-walnut.jpg") center / 420px 420px repeat !important;
    box-shadow:
      inset 0 3px rgba(255, 232, 171, .42),
      inset 0 -14px 18px rgba(23, 6, 2, .72),
      0 3px 7px rgba(0, 0, 0, .3) !important;
    pointer-events: none !important;
    z-index: 2 !important;
  }
}
/* WAVE-H8_APPROVED_IMAGE_TABLE_IMPLEMENTATION_END */

/* WAVE-H9_EXACT_LUXURY_REFERENCE_TABLE_START */
/*
   H9 is driven by the supplied 1536x1024 luxury-table reference.  The
   gameplay board remains transparent and coordinate-stable; the one
   decorative furniture child paints the broad walnut case, perspective
   rails, recessed felt opening, brass inner trim, and deep near fascia.
   H8 is superseded by this later layer and is retained only as source history.
*/
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic .nok-table,
  #matchPanel.normal-okey.table-theme-classic #gameBoard {
    border-color: transparent !important;
    border-image: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-table::before,
  #matchPanel.normal-okey.table-theme-classic .nok-table::after,
  #matchPanel.normal-okey.table-theme-classic #gameBoard::before,
  #matchPanel.normal-okey.table-theme-classic #gameBoard::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-visual-furniture-shell {
    --classic-h9-frame-top: calc(58px * var(--classic-reference-scale-y));
    --classic-h9-frame-side: calc(36px * var(--classic-reference-scale-x));
    --classic-h9-frame-bottom: calc(154px * var(--classic-reference-scale-y));
    --classic-h9-front-body: calc(154px * var(--classic-reference-scale-y));
    inset: calc(-78px * var(--classic-reference-scale-y))
      calc(-14px * var(--classic-reference-scale-x))
      calc(-176px * var(--classic-reference-scale-y))
      calc(-50px * var(--classic-reference-scale-x)) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    border: 0 !important;
    border-image: none !important;
    border-radius: 42px 42px 62px 62px !important;
    clip-path: polygon(
      17% 0,
      83% 0,
      87% 1%,
      91% 5%,
      96% 20%,
      98% 43%,
      100% 76%,
      100% 91%,
      99% 97%,
      96% 100%,
      4% 100%,
      1% 97%,
      0 91%,
      0 76%,
      2% 43%,
      4% 20%,
      9% 5%,
      13% 1%
    ) !important;
    background:
      linear-gradient(180deg, rgba(255, 222, 144, .44) 0 5%, rgba(161, 81, 22, .18) 5% 12%, transparent 12% 78%, rgba(42, 11, 3, .38) 78% 100%),
      linear-gradient(90deg, rgba(37, 10, 2, .58), transparent 11% 89%, rgba(37, 10, 2, .6)),
      linear-gradient(132deg, rgba(255, 200, 102, .2), transparent 17% 73%, rgba(31, 8, 2, .34)),
      url("/okey/classic/normal-okey-classic-walnut.jpg") center / 420px 420px repeat !important;
    box-shadow:
      inset 0 3px rgba(255, 238, 184, .64),
      inset 0 0 0 3px rgba(54, 16, 4, .66),
      inset 0 -42px 48px rgba(28, 7, 2, .56),
      0 18px 30px rgba(0, 0, 0, .46) !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-visual-furniture-shell::before {
    content: "" !important;
    position: absolute !important;
    inset: var(--classic-h9-frame-top) var(--classic-h9-frame-side)
      var(--classic-h9-frame-bottom) var(--classic-h9-frame-side) !important;
    box-sizing: border-box !important;
    border: 2px solid rgba(226, 169, 63, .92) !important;
    border-image: none !important;
    border-radius: 22px 22px 34px 34px !important;
    clip-path: polygon(
      22% 0,
      78% 0,
      84% 2%,
      92% 13%,
      97% 46%,
      100% 88%,
      97% 97%,
      94% 100%,
      6% 100%,
      3% 97%,
      0 88%,
      3% 46%,
      8% 13%,
      16% 2%
    ) !important;
    background:
      radial-gradient(ellipse at 50% 38%, rgba(76, 190, 108, .24), rgba(9, 106, 59, .12) 56%, rgba(0, 39, 25, .42) 100%),
      linear-gradient(180deg, rgba(35, 153, 84, .18), rgba(1, 53, 32, .34)),
      url("/okey/classic/normal-okey-classic-felt.jpg") center / 420px 420px repeat !important;
    box-shadow:
      inset 0 0 0 3px rgba(11, 28, 16, .9),
      inset 0 2px rgba(255, 229, 141, .28),
      inset 0 -18px 22px rgba(0, 24, 13, .5),
      0 0 0 2px rgba(31, 12, 3, .86) !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-visual-furniture-shell::after {
    content: "" !important;
    position: absolute !important;
    left: calc(20px * var(--classic-reference-scale-x)) !important;
    right: calc(20px * var(--classic-reference-scale-x)) !important;
    bottom: 0 !important;
    height: var(--classic-h9-front-body) !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-top: 3px solid rgba(246, 193, 88, .66) !important;
    border-radius: 0 0 48px 48px !important;
    clip-path: polygon(
      5% 0,
      95% 0,
      98% 4%,
      100% 14%,
      100% 88%,
      97% 97%,
      93% 100%,
      7% 100%,
      3% 97%,
      0 88%,
      0 14%,
      2% 4%
    ) !important;
    background:
      linear-gradient(180deg, rgba(255, 227, 152, .5) 0 7%, rgba(181, 97, 28, .34) 7% 22%, rgba(117, 46, 11, .42) 22% 54%, rgba(50, 14, 3, .88) 54% 100%),
      linear-gradient(90deg, rgba(39, 9, 2, .7), rgba(173, 87, 23, .24) 16%, rgba(218, 137, 44, .34) 50%, rgba(68, 18, 4, .7) 85%),
      url("/okey/classic/normal-okey-classic-walnut.jpg") center / 420px 420px repeat !important;
    box-shadow:
      inset 0 4px rgba(255, 236, 177, .54),
      inset 0 12px 18px rgba(255, 175, 63, .12),
      inset 0 -26px 30px rgba(21, 5, 1, .78),
      0 5px 10px rgba(0, 0, 0, .42) !important;
    pointer-events: none !important;
    z-index: 2 !important;
  }
}
/* WAVE-H9_EXACT_LUXURY_REFERENCE_TABLE_END */

/* WAVE-H10B_REFERENCE_FURNITURE_ASSET_RUNTIME_INTEGRATION_START */
/*
   H10B replaces all synthetic H8/H9 furniture paint with the validated
   transparent reference-furniture asset.  The board remains the gameplay
   plane and supplies only the felt beneath the asset's transparent opening.
*/
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic .nok-table,
  #matchPanel.normal-okey.table-theme-classic #gameBoard {
    border-color: transparent !important;
    border-image: none !important;
    background:
      radial-gradient(ellipse at 50% 44%, rgba(26, 137, 92, .36), rgba(5, 83, 55, .2) 58%, rgba(1, 40, 28, .34) 100%),
      url("/okey/classic/normal-okey-classic-felt.jpg") center / 420px 420px repeat !important;
    box-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-table::before,
  #matchPanel.normal-okey.table-theme-classic .nok-table::after,
  #matchPanel.normal-okey.table-theme-classic #gameBoard::before,
  #matchPanel.normal-okey.table-theme-classic #gameBoard::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-visual-furniture-shell {
    inset: auto !important;
    top: calc(-115px * var(--classic-reference-scale-y)) !important;
    left: calc(-54px * var(--classic-reference-scale-x)) !important;
    width: calc(1096px * var(--classic-reference-scale-x)) !important;
    height: auto !important;
    aspect-ratio: 1588 / 990 !important;
    box-sizing: border-box !important;
    display: block !important;
    overflow: visible !important;
    border: 0 !important;
    border-image: none !important;
    border-radius: 0 !important;
    clip-path: none !important;
    background-color: transparent !important;
    background-image: url("/assets/normal-okey/classic/normal-okey-luxury-reference-furniture.png") !important;
    background-position: top left !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    box-shadow: none !important;
    transform: none !important;
    transform-origin: top left !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-visual-furniture-shell::before,
  #matchPanel.normal-okey.table-theme-classic .nok-visual-furniture-shell::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }
}
/* WAVE-H10B_REFERENCE_FURNITURE_ASSET_RUNTIME_INTEGRATION_END */

/* WAVE-H10H2_REFERENCE_FURNITURE_ALIGNMENT_START */
/* H10H2 changes only the reference furniture asset registration point. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic .nok-table,
  #matchPanel.normal-okey.table-theme-classic #gameBoard {
    background: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    border-image: none !important;
    box-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-table::before,
  #matchPanel.normal-okey.table-theme-classic .nok-table::after,
  #matchPanel.normal-okey.table-theme-classic #gameBoard::before,
  #matchPanel.normal-okey.table-theme-classic #gameBoard::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-visual-furniture-shell {
    top: calc(-81px * var(--classic-reference-scale-y)) !important;
    left: calc(-13px * var(--classic-reference-scale-x)) !important;
  }
}
/* WAVE-H10H2_REFERENCE_FURNITURE_ALIGNMENT_END */

/* WAVE-H10I3D_REFERENCE_COMPOSITION_START */
/*
   H10I3D changes only the Classic desktop gameplay composition.  The H10H2
   furniture asset registration point above remains authoritative and all
   participant/center DOM handlers remain unchanged.
*/
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic .nok-station-top {
    top: calc(-224.8px * var(--classic-reference-scale-y)) !important;
    left: 50% !important;
    width: calc(260px * var(--classic-reference-scale-x)) !important;
    height: calc(136px * var(--classic-reference-scale-y)) !important;
    transform: translateX(-50%) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-top .player-seat {
    top: 0 !important;
    left: 50% !important;
    width: calc(136px * var(--classic-reference-scale-x)) !important;
    height: calc(135px * var(--classic-reference-scale-y)) !important;
    transform: translateX(-50%) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-top .opponent-rack {
    top: calc(130px * var(--classic-reference-scale-y)) !important;
    left: 50% !important;
    width: calc(330px * var(--classic-reference-scale-x)) !important;
    height: calc(61px * var(--classic-reference-scale-y)) !important;
    transform: translateX(-50%) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-left,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right {
    top: calc(53px * var(--classic-reference-scale-y)) !important;
    width: calc(330px * var(--classic-reference-scale-x)) !important;
    height: calc(258px * var(--classic-reference-scale-y)) !important;
    transform: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-right {
    right: calc((100% - var(--classic-reference-table-width)) / 2 - (90px * var(--classic-reference-scale-x))) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-left .player-seat,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .player-seat {
    top: 0 !important;
    width: calc(134px * var(--classic-reference-scale-x)) !important;
    height: calc(143px * var(--classic-reference-scale-y)) !important;
    transform: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-left .player-seat {
    left: calc(53.5px * var(--classic-reference-scale-x)) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-right .player-seat {
    right: calc(53.5px * var(--classic-reference-scale-x)) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-left .opponent-rack,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .opponent-rack {
    top: calc(-49px * var(--classic-reference-scale-y)) !important;
    width: calc(68px * var(--classic-reference-scale-x)) !important;
    height: calc(252px * var(--classic-reference-scale-y)) !important;
    transform: none !important;
    z-index: 1 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-left .opponent-rack {
    left: calc(134.5px * var(--classic-reference-scale-x)) !important;
    right: auto !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-right .opponent-rack {
    left: auto !important;
    right: calc(134.5px * var(--classic-reference-scale-x)) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-bottom {
    top: calc(308px * var(--classic-reference-scale-y)) !important;
    left: 50% !important;
    width: calc(254px * var(--classic-reference-scale-x)) !important;
    height: calc(96px * var(--classic-reference-scale-y)) !important;
    transform: translateX(-50%) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-bottom .player-seat {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-own-station {
    top: calc(383px * var(--classic-reference-scale-y)) !important;
    left: 50% !important;
    width: calc(884px * var(--classic-reference-scale-x)) !important;
    height: calc(214px * var(--classic-reference-scale-y)) !important;
    min-height: calc(214px * var(--classic-reference-scale-y)) !important;
    transform: translateX(-50%) !important;
  }

  /* Keep the center DOM and event targets intact; only its visual children
     become reference-positioned.  .draw-stack remains the existing double-
     click/drag target and #centerIndicatorTile remains JS-owned. */
  #matchPanel.normal-okey.table-theme-classic .nok-center {
    left: calc(388.5px * var(--classic-reference-scale-x)) !important;
    top: calc(62px * var(--classic-reference-scale-y)) !important;
    width: calc(272px * var(--classic-reference-scale-x)) !important;
    height: calc(114px * var(--classic-reference-scale-y)) !important;
    display: block !important;
    gap: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-pile-box,
  #matchPanel.normal-okey.table-theme-classic .center-indicator,
  #matchPanel.normal-okey.table-theme-classic .nok-discard-center {
    position: absolute !important;
    box-sizing: border-box !important;
    flex: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-pile-box {
    left: 0 !important;
    top: calc(40px * var(--classic-reference-scale-y)) !important;
    width: calc(65px * var(--classic-reference-scale-x)) !important;
    height: calc(61px * var(--classic-reference-scale-y)) !important;
    padding: 4px !important;
  }

  #matchPanel.normal-okey.table-theme-classic .center-indicator {
    left: calc(109px * var(--classic-reference-scale-x)) !important;
    top: 0 !important;
    width: calc(58px * var(--classic-reference-scale-x)) !important;
    height: calc(112px * var(--classic-reference-scale-y)) !important;
    padding: 4px !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-discard-center {
    left: calc(214px * var(--classic-reference-scale-x)) !important;
    top: calc(28px * var(--classic-reference-scale-y)) !important;
    width: calc(58px * var(--classic-reference-scale-x)) !important;
    height: calc(74px * var(--classic-reference-scale-y)) !important;
    padding: 4px !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-pile-box .nok-draw-stack {
    width: calc(52px * var(--classic-reference-scale-x)) !important;
    height: calc(48px * var(--classic-reference-scale-y)) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .center-indicator-tile {
    width: calc(50px * var(--classic-reference-scale-x)) !important;
    height: calc(84px * var(--classic-reference-scale-y)) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-discard-center .unowned-discard {
    width: calc(50px * var(--classic-reference-scale-x)) !important;
    min-height: calc(60px * var(--classic-reference-scale-y)) !important;
    height: calc(60px * var(--classic-reference-scale-y)) !important;
  }
}
/* WAVE-H10I3D_REFERENCE_COMPOSITION_END */

/* WAVE-H10I4B_DEDICATED_FELT_AND_LEGACY_REMOVAL_START */
/*
   The H10A furniture PNG has a transparent center.  Reuse the existing
   furniture pseudo-layer as the only gameplay-felt owner and clip it to the
   measured PNG opening.  The board remains the gameplay coordinate plane;
   its former green background is made paint-inert below without changing
   its box, DOM, or child stacking contract.
*/
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic .nok-visual-furniture-shell::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-image: none !important;
    border-radius: 0 !important;
    background: url("/okey/classic/normal-okey-classic-felt.jpg") center / 420px 420px repeat !important;
    clip-path: polygon(
      21.22% 14.44%,
      78.65% 14.44%,
      77.08% 21.21%,
      76.64% 26.97%,
      78.15% 34.34%,
      79.47% 41.52%,
      80.79% 48.89%,
      82.18% 56.16%,
      89.04% 60.61%,
      89.74% 63.54%,
      90.43% 66.67%,
      9.32% 66.67%,
      10.08% 63.54%,
      10.70% 60.61%,
      17.44% 56.16%,
      18.89% 48.89%,
      20.40% 41.52%,
      21.85% 34.34%,
      23.30% 26.97%,
      22.80% 21.21%
    ) !important;
    box-shadow: none !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-table,
  #matchPanel.normal-okey.table-theme-classic #gameBoard {
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
  }
}
/* WAVE-H10I4B_DEDICATED_FELT_AND_LEGACY_REMOVAL_END */

/* WAVE-H10I5A_LEGACY_CUE_VISUAL_REMOVAL_START */
/* Keep the anonymous opponent rack anchors and their count badge, but make
   the historical brown/walnut cue paint inert on Classic desktop.  No rack
   geometry, stacking, or gameplay data contract is owned by this layer. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic .nok-station-top .opponent-rack,
  #matchPanel.normal-okey.table-theme-classic .nok-station-left .opponent-rack,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .opponent-rack,
  #matchPanel.normal-okey.table-theme-classic .nok-station-bottom .opponent-rack {
    background: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    border-image: none !important;
    box-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-top .opponent-rack::before,
  #matchPanel.normal-okey.table-theme-classic .nok-station-left .opponent-rack::before,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .opponent-rack::before {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
  }
}
/* WAVE-H10I5A_LEGACY_CUE_VISUAL_REMOVAL_END */

/* WAVE-H10I6A_SEAT_RIGHT_DISCARD_ALIGNMENT_START */
/*
   Each seat's latest discard is placed on that player's local right-hand
   side.  Reset the older ID-based edges first: those rules otherwise outrank
   the generic .nok-discard-* percentage anchors and can leave opposing inset
   pairs active at the same time.  Host/tile sizing, stacking, pointer
   behavior, and renderBoardDiscards() ownership remain unchanged.
*/
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic #discardSeat1,
  #matchPanel.normal-okey.table-theme-classic #discardSeat2,
  #matchPanel.normal-okey.table-theme-classic #discardSeat3,
  #matchPanel.normal-okey.table-theme-classic #discardSeat4 {
    inset: auto !important;
    transform: none !important;
  }

  /* BOTTOM: local right is the lower-right felt shoulder. */
  #matchPanel.normal-okey.table-theme-classic #discardSeat1 {
    right: calc(171px * var(--classic-reference-scale-x)) !important;
    bottom: calc(88px * var(--classic-reference-scale-y)) !important;
  }

  /* RIGHT: local right turns toward the upper-right felt shoulder. */
  #matchPanel.normal-okey.table-theme-classic #discardSeat2 {
    right: calc(175px * var(--classic-reference-scale-x)) !important;
    top: calc(18px * var(--classic-reference-scale-y)) !important;
  }

  /* TOP: local right turns toward the upper-left felt shoulder. */
  #matchPanel.normal-okey.table-theme-classic #discardSeat3 {
    left: calc(215px * var(--classic-reference-scale-x)) !important;
    top: calc(18px * var(--classic-reference-scale-y)) !important;
  }

  /* LEFT: local right turns toward the lower-left felt shoulder. */
  #matchPanel.normal-okey.table-theme-classic #discardSeat4 {
    left: calc(175px * var(--classic-reference-scale-x)) !important;
    bottom: calc(88px * var(--classic-reference-scale-y)) !important;
  }
}
/* WAVE-H10I6A_SEAT_RIGHT_DISCARD_ALIGNMENT_END */

/* WAVE-CLASSIC_THEME_DISCARD_POSITIONS_FROM_ATILAN_TAS_REFERENCE_START */
/*
   ATILAN TAS.png is the authoritative visual reference for the four latest
   discard centers.  The reference centers are normalized to the existing
   1020x418 Classic gameBoard plane; the play-area is an inset:0 child of that
   unchanged board.  Only discard host anchors are changed here.  Host/tile
   sizing, stacking, real-tile rendering, and discard ownership remain intact.
*/
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic #discardSeat1,
  #matchPanel.normal-okey.table-theme-classic #discardSeat2,
  #matchPanel.normal-okey.table-theme-classic #discardSeat3,
  #matchPanel.normal-okey.table-theme-classic #discardSeat4 {
    inset: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
  }

  /* BOTTOM: black 4 in ATILAN TAS.png. */
  #matchPanel.normal-okey.table-theme-classic #discardSeat1 {
    left: 80.2451% !important;
    top: 59.2105% !important;
  }

  /* RIGHT: blue 8 in ATILAN TAS.png. */
  #matchPanel.normal-okey.table-theme-classic #discardSeat2 {
    left: 76.2745% !important;
    top: 11.1244% !important;
  }

  /* TOP: red 6 in ATILAN TAS.png. */
  #matchPanel.normal-okey.table-theme-classic #discardSeat3 {
    left: 28.6765% !important;
    top: 11.0048% !important;
  }

  /* LEFT: blue 9 in ATILAN TAS.png. */
  #matchPanel.normal-okey.table-theme-classic #discardSeat4 {
    left: 23.1863% !important;
    top: 59.2105% !important;
  }
}
/* WAVE-CLASSIC_THEME_DISCARD_POSITIONS_FROM_ATILAN_TAS_REFERENCE_END */

/* WAVE-H10I7A_TOP_HAND_COUNT_BADGE_STUB_FIX_START */
/* Keep the top opponent hand-count badge, but clear the inherited bottom
   inset that stretches its auto-height box into a vertical stub. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic .nok-station-top .opponent-rack::after {
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }
}
/* WAVE-H10I7A_TOP_HAND_COUNT_BADGE_STUB_FIX_END */

/* WAVE-H10I8A_WHOLE_TABLE_LEFT_SHIFT_START */
/* Move only the existing table stage.  #gameBoard keeps its own centered
   translateX(-50%) and every gameplay child therefore retains its local
   geometry, stacking, and interaction contract. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic #gameStage.nok-table-stage {
    --classic-table-shift-x: calc(-40px * var(--classic-reference-scale-x));
    transform: translateX(var(--classic-table-shift-x)) !important;
  }
}
/* WAVE-H10I8A_WHOLE_TABLE_LEFT_SHIFT_END */

/* WAVE-H10I9A_RADIO_VERTICAL_COLLISION_FIX_START */
/* The chat panel is intentionally flexible, but its content can change the
   auto-sized social stack between waiting and playing.  Keep the radio panel
   on one canonical vertical anchor instead of allowing the final flex item
   to inherit that content-height delta.  The right-column X/width contract,
   chat flow, and radio content remain unchanged. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-radio-panel {
    position: absolute !important;
    top: calc(447.54px * var(--classic-reference-scale-y)) !important;
    right: auto !important;
    bottom: auto !important;
    left: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }
}
/* WAVE-H10I9A_RADIO_VERTICAL_COLLISION_FIX_END */

/* WAVE-H10I10B_RADIO_HORIZONTAL_CLEARANCE_FIX_START */
/* Keep the accepted vertical anchor. Move only the radio panel's left edge
   inward from the table while right-anchoring its reduced width inside the
   existing social column. Chat, treats, table, and furniture stay fixed. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic
    > .nok-presentation
    > .nok-right-column
    .nok-radio-panel {
    left: calc(15px * var(--classic-reference-scale-x)) !important;
    right: 0 !important;
    width: auto !important;
  }
}
/* WAVE-H10I10B_RADIO_HORIZONTAL_CLEARANCE_FIX_END */

/* WAVE-H10J1_RIGHT_SOCIAL_COMMON_ALIGNMENT_START */
/* Align chat, treats, and radio to one narrower right-anchored column. The
   radio keeps H10I9A's absolute vertical anchor; only its H10I10B horizontal
   offset is superseded by this shared column geometry. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic
    > .nok-presentation
    > .nok-right-column {
    width: calc(var(--classic-reference-social-width) - (15px * var(--classic-reference-scale-x))) !important;
  }

  #matchPanel.normal-okey.table-theme-classic
    > .nok-presentation
    > .nok-right-column .nok-chat-panel,
  #matchPanel.normal-okey.table-theme-classic
    > .nok-presentation
    > .nok-right-column .nok-treat-panel,
  #matchPanel.normal-okey.table-theme-classic
    > .nok-presentation
    > .nok-right-column .nok-radio-panel {
    width: 100% !important;
  }

  #matchPanel.normal-okey.table-theme-classic
    > .nok-presentation
    > .nok-right-column .nok-radio-panel {
    left: 0 !important;
    right: auto !important;
  }
}
/* WAVE-H10J1_RIGHT_SOCIAL_COMMON_ALIGNMENT_END */

/* WAVE-H10J2A_RADIO_TABLE_CORNER_CLEARANCE_START */
/* H10J3A final calibration: the accepted radio-only contract is 50px
   canonical inset.  This is the same terminal layer, updated in place. */
/* Keep H10J1's chat/treat common-column geometry and H10I9A's vertical
   anchor.  Only the radio panel receives a positive, scale-aware left inset;
   its right edge remains fixed at the existing social-column edge. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic
    > .nok-presentation
    > .nok-right-column
    .nok-radio-panel {
    left: calc(50px * var(--classic-reference-scale-x)) !important;
    right: 0 !important;
    width: auto !important;
  }
}
/* WAVE-H10J2A_RADIO_TABLE_CORNER_CLEARANCE_END */

/* WAVE-H10K1_REFERENCE_SOCIAL_DIRECT_REPRODUCTION_START */
/*
   Direct social-surface reproduction from REFERANS MASA LUKS.png.
   This layer is intentionally paint-only: the accepted right-column,
   chat/treat, H10I9A radio anchor, and H10J3A radio inset remain owned by
   the geometry layers above.  Features absent from the live DOM are not
   synthesized here.
*/
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-chat-panel,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-treat-panel,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-radio-panel {
    border-color: rgba(13, 126, 174, .88) !important;
    background: linear-gradient(180deg, rgba(3, 27, 42, .98), rgba(1, 12, 20, .99)) !important;
    box-shadow: 0 9px 20px rgba(0, 0, 0, .56), inset 0 1px rgba(105, 207, 245, .16) !important;
    color: #f5f8fb !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .chat-heading {
    border-bottom-color: rgba(29, 116, 158, .48) !important;
    color: #f7fbff !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-chat-tab {
    border-color: transparent !important;
    background: transparent !important;
    color: #f1f5f8 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-chat-tab.active {
    border-color: rgba(15, 137, 193, .95) !important;
    background: linear-gradient(180deg, #0a5f8d, #07334f) !important;
    box-shadow: inset 0 1px rgba(127, 220, 255, .28), 0 3px 9px rgba(0, 0, 0, .34) !important;
    color: #ffffff !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-chat-tabs span {
    border-color: transparent !important;
    background: transparent !important;
    color: #f1f5f8 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .chat-heading small {
    color: #8fa8b8 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .chat-line {
    border-color: rgba(20, 106, 145, .36) !important;
    background: linear-gradient(145deg, rgba(8, 43, 64, .58), rgba(2, 18, 29, .52)) !important;
    color: #f1f5f8 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .chat-line strong {
    color: #18d4f5 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .chat-line.own strong {
    color: #ffe16a !important;
  }

  #matchPanel.normal-okey.table-theme-classic .chat-line .nickname-admin {
    color: #ff4450 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .chat-line .nickname-private-owner {
    color: #ffd45f !important;
  }

  #matchPanel.normal-okey.table-theme-classic .chat-line > span:last-child {
    color: #f3f6f8 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .chat-line .chat-avatar {
    border-color: rgba(17, 136, 184, .82) !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .42) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .chat-empty,
  #matchPanel.normal-okey.table-theme-classic .system-line {
    color: #91a7b5 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .chat-form input {
    border-color: rgba(19, 123, 169, .7) !important;
    background: linear-gradient(180deg, rgba(10, 43, 63, .92), rgba(3, 23, 36, .96)) !important;
    color: #f4f8fb !important;
    box-shadow: inset 0 1px rgba(106, 204, 239, .12) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .chat-form input::placeholder {
    color: #91a7b5 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .speech-to-text-button {
    border-color: rgba(14, 137, 191, .92) !important;
    background: linear-gradient(180deg, #0d5a82, #062e4a) !important;
    color: #f4fbff !important;
    box-shadow: 0 4px 9px rgba(0, 0, 0, .42) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .chat-form > button[type="submit"] {
    border-color: rgba(7, 190, 119, .94) !important;
    background: linear-gradient(180deg, #08a86d, #006743) !important;
    color: #f3fff9 !important;
    box-shadow: 0 4px 9px rgba(0, 0, 0, .42) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-treat-panel header strong,
  #matchPanel.normal-okey.table-theme-classic .nok-radio-panel header strong {
    color: #ffe16b !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-treat-panel header span,
  #matchPanel.normal-okey.table-theme-classic .nok-radio-panel header span {
    color: #e8f2f7 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-treat-options button {
    border-color: rgba(13, 112, 158, .78) !important;
    background: linear-gradient(180deg, #0b3047, #062033) !important;
    color: #f7fbfd !important;
    box-shadow: inset 0 1px rgba(94, 192, 231, .11), 0 4px 8px rgba(0, 0, 0, .32) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-treat-options button span {
    color: #f4f7f9 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-radio-body strong {
    color: #f5f8fb !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-radio-body small {
    color: #9aadb9 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-radio-icon {
    color: #27c9f5 !important;
    text-shadow: 0 0 13px rgba(39, 201, 245, .4) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-radio-body button {
    border-color: rgba(13, 123, 169, .76) !important;
    background: linear-gradient(180deg, #0b3b58, #062337) !important;
    color: #edf8fc !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .32) !important;
  }
}
/* WAVE-H10K1_REFERENCE_SOCIAL_DIRECT_REPRODUCTION_END */

/* WAVE-H10K2_REFERENCE_SOCIAL_EXACT_REPRODUCTION_START */
/*
   The reference image is the source for the social module's internal
   presentation.  These rules stay inside the accepted social-panel boxes;
   H10I9A/H10J3A continue to own the radio's outer position and width.
   Radio metadata is intentionally empty until a real frontend radio state is
   available; no song, artist, or live status is fabricated here.
*/
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic .chat-line {
    grid-template-columns: 26px minmax(0, 1fr) auto !important;
    align-items: start !important;
  }

  #matchPanel.normal-okey.table-theme-classic .chat-message-body {
    grid-column: 2 !important;
    min-width: 0 !important;
    color: #f3f6f8 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  #matchPanel.normal-okey.table-theme-classic .chat-message-time {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: start !important;
    padding-top: 1px !important;
    color: #8297a7 !important;
    font-size: 10px !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
  }

  #matchPanel.normal-okey.table-theme-classic .chat-form {
    grid-template-columns: minmax(0, 1fr) auto auto auto !important;
    align-items: center !important;
    gap: 6px !important;
  }

  #matchPanel.normal-okey.table-theme-classic .chat-form > .smiley-picker {
    display: grid !important;
    position: relative !important;
    margin: 0 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .chat-form > .smiley-picker .smiley-toggle {
    display: grid !important;
    place-items: center !important;
    width: 30px !important;
    min-width: 30px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border: 1px solid rgba(17, 143, 194, .82) !important;
    border-radius: 50% !important;
    background: linear-gradient(180deg, #0d5a82, #062e4a) !important;
    color: #f8d772 !important;
    font-size: 18px !important;
    line-height: 1 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .chat-form > .smiley-picker .smiley-panel {
    left: auto !important;
    right: 0 !important;
    bottom: 42px !important;
    width: min(330px, 28vw) !important;
    grid-template-columns: repeat(6, 1fr) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .chat-form .speech-to-text-button {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 7px !important;
    border-radius: 50% !important;
  }

  #matchPanel.normal-okey.table-theme-classic .chat-form > button[type="submit"] {
    min-width: 54px !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-treat-panel header,
  #matchPanel.normal-okey.table-theme-classic .nok-radio-panel header {
    letter-spacing: .04em !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-treat-options {
    gap: 7px !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-treat-options button {
    min-height: 58px !important;
    padding: 7px 3px 6px !important;
    border-radius: 9px !important;
    opacity: 1 !important;
    font-size: 25px !important;
    line-height: 1 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-treat-options button span {
    font-size: 10px !important;
    line-height: 1.1 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-radio-header {
    margin-bottom: 8px !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-radio-collapse {
    color: #b9d3e0 !important;
    font-size: 16px !important;
    line-height: 1 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-radio-live {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-left: auto !important;
    margin-right: 6px !important;
    color: #ff5a61 !important;
    font-size: 9px !important;
    letter-spacing: .03em !important;
    text-transform: uppercase !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-radio-live.hidden {
    display: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-radio-live i {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #ff3f4d !important;
    box-shadow: 0 0 8px rgba(255, 63, 77, .72) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-radio-body {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 9px !important;
    min-width: 0 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-radio-artwork {
    display: grid !important;
    place-items: center !important;
    width: 52px !important;
    height: 52px !important;
    border: 1px solid rgba(77, 187, 238, .68) !important;
    border-radius: 50% !important;
    background: radial-gradient(circle at 34% 28%, rgba(111, 219, 255, .96) 0 9%, transparent 10%), radial-gradient(circle at 70% 68%, rgba(72, 41, 169, .95) 0 18%, transparent 19%), conic-gradient(from 24deg, #0b8bd1, #4635bc, #0c456e, #2e90c9, #21175e, #0b8bd1) !important;
    box-shadow: inset 0 0 0 4px rgba(5, 16, 43, .52), 0 0 14px rgba(26, 170, 235, .25) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-radio-artwork-disc {
    width: 31px !important;
    height: 31px !important;
    border: 1px solid rgba(208, 246, 255, .62) !important;
    border-radius: 50% !important;
    background: repeating-radial-gradient(circle, rgba(8, 21, 61, .06) 0 2px, rgba(7, 17, 49, .38) 3px 4px), radial-gradient(circle, #64d6f2 0 8%, #2a42af 9% 38%, #0d133f 39% 100%) !important;
    box-shadow: 0 0 9px rgba(72, 201, 245, .55) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-radio-track {
    display: grid !important;
    min-width: 0 !important;
    gap: 2px !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-radio-track small {
    color: #8da9bb !important;
    font-size: 9px !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-radio-track-title,
  #matchPanel.normal-okey.table-theme-classic .nok-radio-track-artist {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-radio-track-title {
    min-height: 12px !important;
    color: #f5f8fb !important;
    font-size: 11px !important;
    font-weight: 800 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-radio-track-artist {
    min-height: 10px !important;
    color: #9db4c1 !important;
    font-size: 9px !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-radio-equalizer {
    display: flex !important;
    align-items: end !important;
    justify-content: end !important;
    gap: 3px !important;
    width: 30px !important;
    height: 28px !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-radio-equalizer i {
    display: block !important;
    width: 3px !important;
    height: 9px !important;
    border-radius: 3px !important;
    background: linear-gradient(180deg, #8affc0, #1ea978) !important;
    box-shadow: 0 0 7px rgba(67, 238, 159, .38) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-radio-equalizer i:nth-child(2) { height: 17px !important; }
  #matchPanel.normal-okey.table-theme-classic .nok-radio-equalizer i:nth-child(3) { height: 12px !important; }
  #matchPanel.normal-okey.table-theme-classic .nok-radio-equalizer i:nth-child(4) { height: 23px !important; }
  #matchPanel.normal-okey.table-theme-classic .nok-radio-equalizer i:nth-child(5) { height: 15px !important; }
  #matchPanel.normal-okey.table-theme-classic .nok-radio-equalizer i:nth-child(6) { height: 20px !important; }
  #matchPanel.normal-okey.table-theme-classic .nok-radio-equalizer i:nth-child(7) { height: 11px !important; }

  #matchPanel.normal-okey.table-theme-classic .nok-radio-controls {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 10px !important;
    padding-top: 7px !important;
    border-top: 1px solid rgba(33, 123, 161, .42) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-radio-volume-icon {
    display: grid !important;
    place-items: center !important;
    width: 18px !important;
    height: 18px !important;
    color: #b8d4df !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-radio-volume-icon svg {
    width: 16px !important;
    height: 16px !important;
    fill: currentColor !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-radio-volume {
    width: 100% !important;
    height: 4px !important;
    accent-color: #49c9ed !important;
    opacity: 1 !important;
  }
}
/* WAVE-H10K2_REFERENCE_SOCIAL_EXACT_REPRODUCTION_END */

/* WAVE-H10K4_GIFTS_REFERENCE_PIXEL_LIVE_INTEGRATION_START */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-treat-panel {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-treat-panel > header {
    background-color: transparent !important;
    background-image: url("/assets/classic/social/classic-gifts-header-reference.png") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: transparent !important;
    text-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-treat-panel > header strong,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-treat-panel > header span {
    color: transparent !important;
    text-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-treat-options {
    background: transparent !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-treat-options button {
    background-color: transparent !important;
    background-image: none !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: transparent !important;
    opacity: 1 !important;
    text-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-treat-options button > span {
    color: transparent !important;
    text-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-treat-options button:nth-child(1) {
    background-image: url("/assets/classic/social/classic-gift-tea-reference.png") !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-treat-options button:nth-child(2) {
    background-image: url("/assets/classic/social/classic-gift-coffee-reference.png") !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-treat-options button:nth-child(3) {
    background-image: url("/assets/classic/social/classic-gift-lemonade-reference.png") !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-treat-options button:nth-child(4) {
    background-image: url("/assets/ikram/quick-cocktail.png") !important;
  }
}
/* WAVE-H10K4_GIFTS_REFERENCE_PIXEL_LIVE_INTEGRATION_END */

/* WAVE-H10K4E_GIFTS_OPTION_B_REFERENCE_PIXEL_EXACT_INTEGRATION_START */
/* The gifts panel is one reference-pixel composition.  Its DOM buttons stay
   as transparent hit areas; only the master PNG owns the visible surface. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column {
    --classic-gifts-reference-width: calc(var(--classic-reference-social-width) - (15px * var(--classic-reference-scale-x)));
    --classic-gifts-reference-height: calc(var(--classic-gifts-reference-width) * 128 / 348);
    --classic-gifts-chat-height: calc((447.54px * var(--classic-reference-scale-y)) - var(--classic-gifts-reference-height) - 10px);
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-chat-panel {
    flex: 0 0 var(--classic-gifts-chat-height) !important;
    height: var(--classic-gifts-chat-height) !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-treat-panel {
    position: relative !important;
    flex: 0 0 var(--classic-gifts-reference-height) !important;
    width: var(--classic-gifts-reference-width) !important;
    height: var(--classic-gifts-reference-height) !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 0 0 -1px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-treat-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    background-color: transparent !important;
    background-image: url("/assets/classic/classic-social-gifts-reference.png") !important;
    background-repeat: no-repeat !important;
    background-position: top left !important;
    background-size: 100% auto !important;
    pointer-events: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-treat-panel > header {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: transparent !important;
    text-shadow: none !important;
    pointer-events: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-treat-panel > header strong,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-treat-panel > header span {
    color: transparent !important;
    text-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-treat-options {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    pointer-events: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-treat-options button,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-treat-options button:nth-child(1),
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-treat-options button:nth-child(2),
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-treat-options button:nth-child(3),
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-treat-options button:nth-child(4) {
    position: absolute !important;
    z-index: 3 !important;
    display: block !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: none !important;
    background-repeat: no-repeat !important;
    background-position: 0 0 !important;
    background-size: auto !important;
    box-shadow: none !important;
    color: transparent !important;
    text-shadow: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    pointer-events: auto !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-treat-options button:nth-child(1) {
    left: 3.735632184% !important;
    top: 35.15625% !important;
    width: 20.689655172% !important;
    height: 56.25% !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-treat-options button:nth-child(2) {
    left: 27.586206897% !important;
    top: 35.15625% !important;
    width: 20.402298851% !important;
    height: 56.25% !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-treat-options button:nth-child(3) {
    left: 51.436781609% !important;
    top: 35.15625% !important;
    width: 20.402298851% !important;
    height: 56.25% !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-treat-options button:nth-child(4) {
    left: 75% !important;
    top: 35.15625% !important;
    width: 20.689655172% !important;
    height: 56.25% !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-treat-options button > span {
    color: transparent !important;
    text-shadow: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }
}
/* WAVE-H10K4E_GIFTS_OPTION_B_REFERENCE_PIXEL_EXACT_INTEGRATION_END */

/* WAVE-H10K4G_REFERENCE_PIXEL_VISIBILITY_FIX_START */
/* Keep H10K4E/H10I9A/H10J3A geometry intact; only release the Classic
   social rail's parent clipping so the accepted absolute radio rect can
   paint below the rail's own box.  Chat and gifts retain their panel-level
   overflow contracts. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column {
    overflow: visible !important;
  }
}
/* WAVE-H10K4G_REFERENCE_PIXEL_VISIBILITY_FIX_END */

/* WAVE-H10K5E_SINGLE_BLOCK_REFERENCE_PIXEL_LIVE_INTEGRATION_START */
/* One reference image owns the complete Classic social rail.  The existing
   panels remain in the DOM for geometry and interaction, but their paint is
   transparent so they cannot redraw or cover the reference pixels. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column {
    isolation: isolate !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column::before {
    content: "" !important;
    position: absolute !important;
    top: 1px !important;
    right: auto !important;
    bottom: auto !important;
    left: 0 !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 365 / 882 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: url("/assets/classic/classic-social-column-reference.png") !important;
    background-repeat: no-repeat !important;
    background-position: top left !important;
    background-size: 100% auto !important;
    box-shadow: none !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-chat-panel,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-treat-panel,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-radio-panel {
    z-index: 1 !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: transparent !important;
    text-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-chat-panel *,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-treat-panel *,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-radio-panel * {
    background-color: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: transparent !important;
    text-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-chat-panel *::before,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-chat-panel *::after,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-treat-panel *::before,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-treat-panel *::after,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-radio-panel *::before,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-radio-panel *::after {
    content: none !important;
    display: none !important;
    background: none !important;
    box-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-chat-panel img,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-chat-panel svg,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-chat-panel canvas,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-treat-panel img,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-treat-panel svg,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-treat-panel canvas,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-radio-panel img,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-radio-panel svg,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-radio-panel canvas {
    opacity: 0 !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-radio-panel input,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-chat-panel input,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-chat-panel textarea,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-chat-panel select {
    -webkit-text-fill-color: transparent !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-chat-panel input::placeholder,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-chat-panel textarea::placeholder {
    color: transparent !important;
    opacity: 0 !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-chat-panel::before,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-chat-panel::after,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-treat-panel::before,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-treat-panel::after,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-radio-panel::before,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-radio-panel::after {
    content: none !important;
    display: none !important;
    background: none !important;
    box-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-chat-tab,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #chatForm,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #chatForm *,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-treat-options button,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-radio-panel input,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-radio-panel button {
    pointer-events: auto !important;
  }
}
/* WAVE-H10K5E_SINGLE_BLOCK_REFERENCE_PIXEL_LIVE_INTEGRATION_END */

/* WAVE-H10K6C_NEW_SOCIAL_SINGLE_BLOCK_PIXEL_INTEGRATION_START */
/* Supersede H10K5E's reference pixels with the exact SOHBET_REFERENCE.png
   social crop.  The right-column anchor and width remain H10K5E-owned; only
   the single image source, aspect ratio, and transparent functional overlay
   bands are updated for the new 326x803 source block. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column {
    --classic-h10k6-reference-width: calc(var(--classic-reference-social-width) - (15px * var(--classic-reference-scale-x)));
    --classic-h10k6-chat-height: calc(var(--classic-h10k6-reference-width) * 506 / 326);
    --classic-h10k6-gifts-top: calc(1px + (var(--classic-h10k6-reference-width) * 511 / 326));
    --classic-h10k6-gifts-height: calc(var(--classic-h10k6-reference-width) * 144 / 326);
    --classic-h10k6-radio-top: calc(1px + (var(--classic-h10k6-reference-width) * 659 / 326));
    --classic-h10k6-radio-height: calc(var(--classic-h10k6-reference-width) * 144 / 326);
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column::before {
    content: "" !important;
    position: absolute !important;
    top: 1px !important;
    right: auto !important;
    bottom: auto !important;
    left: 0 !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 326 / 803 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: url("/assets/classic/classic-social-column-reference-h10k6.png") !important;
    background-repeat: no-repeat !important;
    background-position: top left !important;
    background-size: 100% auto !important;
    box-shadow: none !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-chat-panel,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-treat-panel,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-radio-panel {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    flex: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-chat-panel {
    top: 1px !important;
    height: var(--classic-h10k6-chat-height) !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-treat-panel {
    top: var(--classic-h10k6-gifts-top) !important;
    height: var(--classic-h10k6-gifts-height) !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-radio-panel {
    top: var(--classic-h10k6-radio-top) !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    width: 100% !important;
    height: var(--classic-h10k6-radio-height) !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}
/* WAVE-H10K6C_NEW_SOCIAL_SINGLE_BLOCK_PIXEL_INTEGRATION_END */

/* WAVE-H10K6E_SOCIAL_FUNCTIONAL_OVERLAY_AND_VOICE_INPUT_START */
/* The H10K6C PNG remains the only static social paint source.  This terminal
   layer maps the existing DOM controls to the crop's source coordinates and
   restores only dynamic text/state needed by chat and spectators. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column {
    --classic-h10k6-control-width: var(--classic-h10k6-reference-width);
    --classic-h10k6-control-scale: calc(var(--classic-h10k6-control-width) / 326px);
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-chat-panel {
    overflow: visible !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-chat-panel .chat-heading {
    position: static !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-chat-tabs {
    position: absolute !important;
    top: calc(var(--classic-h10k6-control-width) * 10 / 326) !important;
    left: calc(var(--classic-h10k6-control-width) * 10 / 326) !important;
    width: calc(var(--classic-h10k6-control-width) * 308 / 326) !important;
    height: calc(var(--classic-h10k6-control-width) * 43 / 326) !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 4 !important;
    pointer-events: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .nok-chat-tabs .nok-chat-tab {
    position: absolute !important;
    top: 0 !important;
    height: calc(var(--classic-h10k6-control-width) * 43 / 326) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    pointer-events: auto !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #tableChatTab {
    left: 0 !important;
    width: calc(var(--classic-h10k6-control-width) * 143 / 326) !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #tableSpectatorsTab {
    left: calc(var(--classic-h10k6-control-width) * 149 / 326) !important;
    width: calc(var(--classic-h10k6-control-width) * 159 / 326) !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #tableSpectatorCount {
    color: #f3f6f8 !important;
    font-size: 10px !important;
    line-height: 1 !important;
    pointer-events: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #tableChatTabPanel,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #tableSpectatorsPanel {
    position: absolute !important;
    inset: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #tableChatTabPanel:not(.hidden),
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #tableSpectatorsPanel:not(.hidden) {
    display: block !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #chatMessages {
    position: absolute !important;
    top: calc(var(--classic-h10k6-control-width) * 60 / 326) !important;
    right: calc(var(--classic-h10k6-control-width) * 8 / 326) !important;
    bottom: calc(var(--classic-h10k6-control-width) * 55 / 326) !important;
    left: calc(var(--classic-h10k6-control-width) * 10 / 326) !important;
    height: auto !important;
    min-height: 0 !important;
    padding: calc(var(--classic-h10k6-control-width) * 4 / 326) calc(var(--classic-h10k6-control-width) * 2 / 326) !important;
    overflow-y: auto !important;
    color: #f3f6f8 !important;
    pointer-events: auto !important;
    z-index: 2 !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #chatMessages .chat-line,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #chatMessages .system-line,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #chatMessages .chat-empty,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #chatMessages .chat-line strong,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #chatMessages .chat-message-body,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #chatMessages .chat-message-time {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: #f3f6f8 !important;
    text-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #chatMessages img {
    opacity: 1 !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #chatForm {
    position: absolute !important;
    top: calc(var(--classic-h10k6-control-width) * 459 / 326) !important;
    left: calc(var(--classic-h10k6-control-width) * 11 / 326) !important;
    width: calc(var(--classic-h10k6-control-width) * 307 / 326) !important;
    height: calc(var(--classic-h10k6-control-width) * 41 / 326) !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: auto !important;
    z-index: 3 !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #chatForm input[name="message"] {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: calc(var(--classic-h10k6-control-width) * 220 / 326) !important;
    height: calc(var(--classic-h10k6-control-width) * 41 / 326) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    padding: calc(var(--classic-h10k6-control-width) * 7 / 326) calc(var(--classic-h10k6-control-width) * 9 / 326) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #f3f6f8 !important;
    -webkit-text-fill-color: #f3f6f8 !important;
    caret-color: #f3f6f8 !important;
    pointer-events: auto !important;
    z-index: 1 !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #chatForm input[name="message"]::placeholder {
    color: transparent !important;
    opacity: 0 !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #chatForm > .smiley-picker {
    position: absolute !important;
    top: calc(var(--classic-h10k6-control-width) * 4 / 326) !important;
    left: calc(var(--classic-h10k6-control-width) * 188 / 326) !important;
    width: calc(var(--classic-h10k6-control-width) * 32 / 326) !important;
    height: calc(var(--classic-h10k6-control-width) * 34 / 326) !important;
    display: block !important;
    margin: 0 !important;
    pointer-events: auto !important;
    z-index: 4 !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #smileyToggle {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: transparent !important;
    font-size: 0 !important;
    pointer-events: auto !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #chatVoiceButton {
    position: absolute !important;
    top: calc(var(--classic-h10k6-control-width) * 4 / 326) !important;
    left: calc(var(--classic-h10k6-control-width) * 220 / 326) !important;
    width: calc(var(--classic-h10k6-control-width) * 10 / 326) !important;
    min-width: 0 !important;
    height: calc(var(--classic-h10k6-control-width) * 34 / 326) !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: transparent !important;
    opacity: 0 !important;
    pointer-events: auto !important;
    z-index: 5 !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #chatForm > button[type="submit"] {
    position: absolute !important;
    top: 0 !important;
    left: calc(var(--classic-h10k6-control-width) * 230 / 326) !important;
    width: calc(var(--classic-h10k6-control-width) * 77 / 326) !important;
    min-width: 0 !important;
    height: calc(var(--classic-h10k6-control-width) * 41 / 326) !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: transparent !important;
    font-size: 0 !important;
    pointer-events: auto !important;
    z-index: 4 !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #smileyPanel:not(.hidden) {
    position: absolute !important;
    right: 0 !important;
    bottom: calc(100% + 8px) !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: min(330px, 28vw) !important;
    max-height: 240px !important;
    overflow: auto !important;
    padding: 6px !important;
    border: 1px solid rgba(13, 123, 169, .76) !important;
    border-radius: 8px !important;
    background: rgba(3, 18, 28, .98) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .42) !important;
    color: #f3f6f8 !important;
    pointer-events: auto !important;
    z-index: 6 !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #smileyPanel:not(.hidden) button {
    display: grid !important;
    place-items: center !important;
    min-width: 0 !important;
    min-height: 28px !important;
    padding: 2px !important;
    border: 0 !important;
    border-radius: 5px !important;
    background: transparent !important;
    color: #f3f6f8 !important;
    font-size: 18px !important;
    line-height: 1 !important;
    pointer-events: auto !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #tableSpectatorsPanel {
    top: calc(var(--classic-h10k6-control-width) * 60 / 326) !important;
    right: calc(var(--classic-h10k6-control-width) * 8 / 326) !important;
    bottom: calc(var(--classic-h10k6-control-width) * 55 / 326) !important;
    left: calc(var(--classic-h10k6-control-width) * 10 / 326) !important;
    overflow-y: auto !important;
    color: #f3f6f8 !important;
    pointer-events: auto !important;
    z-index: 2 !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #tableSpectatorsPanel .table-roster-heading,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #tableSpectatorsPanel .table-spectator-row,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #tableSpectatorsPanel .table-spectators-empty,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #tableSpectatorsPanel .table-spectator-row strong {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: #f3f6f8 !important;
    text-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #tableSpectatorsPanel .table-spectator-presence {
    opacity: 1 !important;
  }
}
/* WAVE-H10K6E_SOCIAL_FUNCTIONAL_OVERLAY_AND_VOICE_INPUT_END */

/* WAVE-H10K6G_SOCIAL_CHAT_CLEAN_FUNCTIONAL_OVERLAY_START */
/* Keep live chat/spectator data and controls, but remove the old DOM skin.
   The H10K6C reference image remains the only static social paint source. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #chatMessages,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #tableSpectatorsPanel {
    scrollbar-width: none !important;
    scrollbar-color: transparent transparent !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #chatMessages::-webkit-scrollbar,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #tableSpectatorsPanel::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #chatMessages .chat-line,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #chatMessages .system-line,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #chatMessages .chat-empty,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #chatMessages .chat-line strong,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #chatMessages .chat-message-body,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #chatMessages .chat-message-time {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    text-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #chatMessages .chat-line .chat-avatar {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    outline: 0 !important;
    opacity: 1 !important;
    object-fit: cover !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #chatMessages .chat-line::before,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #chatMessages .chat-line::after,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #chatMessages .system-line::before,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #chatMessages .system-line::after {
    content: none !important;
    display: none !important;
    background: none !important;
    box-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #tableSpectatorsPanel .table-roster-section,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #tableSpectatorsPanel .table-roster-heading,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #tableSpectatorsPanel .table-spectator-row,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #tableSpectatorsPanel .table-spectator-row strong,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #tableSpectatorsPanel .table-spectators-empty {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    text-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #tableSpectatorsPanel .table-spectator-row::before,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #tableSpectatorsPanel .table-spectator-row::after,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #tableSpectatorsPanel .table-roster-section::before,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #tableSpectatorsPanel .table-roster-section::after {
    content: none !important;
    display: none !important;
    background: none !important;
    box-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #tableSpectatorsPanel .table-spectator-presence {
    box-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #chatForm,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #chatForm input[name="message"],
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #chatForm > button[type="submit"],
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #smileyToggle {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* Preserve the social block and send/emoji bands; reserve a 40px source
     band for a visible, glyph-only microphone between input and emoji. */
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #chatForm input[name="message"] {
    width: calc(var(--classic-h10k6-control-width) * 148 / 326) !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #chatVoiceButton {
    top: calc(var(--classic-h10k6-control-width) * 3 / 326) !important;
    left: calc(var(--classic-h10k6-control-width) * 148 / 326) !important;
    width: calc(var(--classic-h10k6-control-width) * 40 / 326) !important;
    min-width: 0 !important;
    height: calc(var(--classic-h10k6-control-width) * 36 / 326) !important;
    min-height: 0 !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #f4fbff !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 5 !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #chatVoiceButton:disabled {
    opacity: .55 !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #chatVoiceButton .speech-to-text-icon {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    fill: currentColor !important;
    opacity: 1 !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column .seat-avatar[src] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    object-fit: cover !important;
  }
}
/* WAVE-H10K6G_SOCIAL_CHAT_CLEAN_FUNCTIONAL_OVERLAY_END */

/* WAVE-H10K6J_CLEAN_DYNAMIC_CHAT_REFERENCE_PIXEL_INTEGRATION_START */
/* The source-derived clean layer keeps the reference chrome, gifts, and
   radio pixels while leaving the demo-message content band transparent for
   live chat/spectator DOM content. No visual surface is synthesized here. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column::before {
    background-image: url("/assets/classic/classic-social-column-reference-h10k6-clean.png") !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #chatMessages,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #tableSpectatorsPanel {
    background: transparent !important;
    background-image: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #chatVoiceButton {
    position: absolute !important;
    top: calc(var(--classic-h10k6-control-width) * 3 / 326) !important;
    left: calc(var(--classic-h10k6-control-width) * 148 / 326) !important;
    width: calc(var(--classic-h10k6-control-width) * 40 / 326) !important;
    min-width: 0 !important;
    height: calc(var(--classic-h10k6-control-width) * 36 / 326) !important;
    min-height: 0 !important;
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #f4fbff !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    transform: none !important;
    pointer-events: auto !important;
    z-index: 5 !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #chatVoiceButton .speech-to-text-icon {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #f4fbff !important;
    fill: currentColor !important;
  }
}
/* WAVE-H10K6J_CLEAN_DYNAMIC_CHAT_REFERENCE_PIXEL_INTEGRATION_END */

/* WAVE-H10K6K_LIVE_SPECTATOR_COUNTER_REFERENCE_GAP_START */
/* The clean reference keeps the tab chrome, but its sample counter is not
   live data. The DOM counter owns only the cleared reference-counter band. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #tableSpectatorCount {
    position: absolute !important;
    top: calc(var(--classic-h10k6-control-width) * 9 / 326) !important;
    left: calc(var(--classic-h10k6-control-width) * 117 / 326) !important;
    width: calc(var(--classic-h10k6-control-width) * 25 / 326) !important;
    display: inline-block !important;
    color: #f3f6f8 !important;
    font-size: calc(var(--classic-h10k6-control-width) * 10 / 326) !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    z-index: 5 !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #tableSpectatorCount::before {
    content: "(" !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #tableSpectatorCount::after {
    content: ")" !important;
  }
}
/* WAVE-H10K6K_LIVE_SPECTATOR_COUNTER_REFERENCE_GAP_END */

/* WAVE-H10K7_PLAYER_TILE_STOCK_AND_VOICE_UI_START */
/*
  H10K7 uses only source-derived pixels from OYUNCU_TAS.png for the
  Classic player chrome and closed-stock presentation. Participant text,
  public avatar images, hand counts, discard ownership and all game actions
  remain DOM/server owned.
*/
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic .nok-station-top .player-seat,
  #matchPanel.normal-okey.table-theme-classic .nok-station-bottom .player-seat {
    width: calc(255px * var(--classic-reference-scale-x)) !important;
    height: calc(89px * var(--classic-reference-scale-x)) !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: calc(8px * var(--classic-reference-scale-x)) !important;
    padding: calc(7px * var(--classic-reference-scale-x)) !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: url("/assets/classic/classic-h10k7-player-panel-horizontal.png") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    box-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-top .player-seat {
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-bottom .player-seat {
    width: calc(235px * var(--classic-reference-scale-x)) !important;
    height: calc(83px * var(--classic-reference-scale-x)) !important;
    background-image: url("/assets/classic/classic-h10k7-player-panel-bottom.png") !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-top .opponent-rack {
    position: absolute !important;
    top: calc(89px * var(--classic-reference-scale-x)) !important;
    left: 50% !important;
    width: calc(51px * var(--classic-reference-scale-x)) !important;
    height: calc(83px * var(--classic-reference-scale-x)) !important;
    transform: translateX(-50%) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: url("/assets/classic/classic-h10k7-stock-five.png") !important;
    background-repeat: repeat-x !important;
    background-position: left bottom !important;
    background-size: calc(51px * var(--classic-reference-scale-x)) auto !important;
    box-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-bottom {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-bottom .player-seat {
    inset: auto !important;
    position: relative !important;
    flex: 0 0 auto !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-left .player-seat,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .player-seat {
    width: calc(126px * var(--classic-reference-scale-x)) !important;
    height: calc(126px * var(--classic-reference-scale-x)) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: calc(4px * var(--classic-reference-scale-x)) !important;
    padding: calc(8px * var(--classic-reference-scale-x)) !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: url("/assets/classic/classic-h10k7-player-panel-side.png") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    box-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-left .seat-identity,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .seat-identity,
  #matchPanel.normal-okey.table-theme-classic .nok-station-top .seat-identity,
  #matchPanel.normal-okey.table-theme-classic .nok-station-bottom .seat-identity {
    min-width: 0 !important;
    min-height: 0 !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-left .seat-identity,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .seat-identity {
    width: 100% !important;
    align-items: center !important;
    text-align: center !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-left .opponent-rack,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .opponent-rack {
    position: absolute !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: calc(51px * var(--classic-reference-scale-x)) !important;
    height: calc(83px * var(--classic-reference-scale-x)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: url("/assets/classic/classic-h10k7-stock-five.png") !important;
    background-repeat: repeat-y !important;
    background-position: center bottom !important;
    background-size: auto calc(83px * var(--classic-reference-scale-x)) !important;
    box-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .opponent-rack::before {
    content: none !important;
    display: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .opponent-rack::after {
    color: #f5ead1 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .85) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .seat-avatar {
    flex: 0 0 auto !important;
    object-fit: cover !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-draw-stack {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: calc(2px * var(--classic-reference-scale-x)) !important;
    width: calc(272px * var(--classic-reference-scale-x)) !important;
    min-height: calc(89px * var(--classic-reference-scale-x)) !important;
    height: auto !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-draw-stack > i {
    display: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-draw-stack .stock-stack-image {
    display: block !important;
    flex: 0 0 auto !important;
    width: clamp(18px, calc(51px * var(--classic-reference-scale-x)), 30px) !important;
    height: auto !important;
    aspect-ratio: 51 / 83 !important;
    object-fit: contain !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-draw-stack[data-stock-mode="single-stack"] {
    flex-direction: row !important;
    align-items: center !important;
    gap: calc(8px * var(--classic-reference-scale-x)) !important;
  }

  /* CLASSIC_INITIAL_DEAL_TILE_LAYOUT_REFERENCE: keep each five-tile group
     horizontal while composing the compact reference rows. Modern mode keeps
     the existing single image plus count contract above. */
  #matchPanel.normal-okey.table-theme-classic .nok-draw-stack[data-stock-mode="five-stack"] {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: calc(6px * var(--classic-reference-scale-y)) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-draw-stack[data-stock-mode="five-stack"] .stock-stack-row {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: calc(2px * var(--classic-reference-scale-x)) !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-draw-stack[data-stock-mode="five-stack"] .stock-stack-row[data-classic-row="bottom"] {
    flex-direction: row-reverse !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-draw-stack[data-stock-mode="five-stack"] .stock-stack-row .stock-stack-image {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  /* CLASSIC_THEME_INDICATOR_ON_FINAL_STACK_AND_LEAVE_BEHIND: the indicator
     remains a sibling of the stock stack. Its anchor is measured from the
     final group, so moving the last draw stack cannot move the indicator. */
  #matchPanel.normal-okey.table-theme-classic .nok-center .classic-final-stack-anchor {
    position: absolute !important;
    display: none !important;
    pointer-events: none !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-center[data-classic-stock-state="classic"] .classic-final-stack-anchor {
    display: block !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-center:not([data-classic-stock-state]) .nok-pile-box,
  #matchPanel.normal-okey.table-theme-classic .nok-center[data-classic-stock-state="idle"] .nok-pile-box,
  #matchPanel.normal-okey.table-theme-classic .nok-center:not([data-classic-stock-state]) .center-indicator,
  #matchPanel.normal-okey.table-theme-classic .nok-center[data-classic-stock-state="idle"] .center-indicator {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    box-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-center[data-classic-stock-state="classic"] .center-indicator[data-indicator-visible="true"] {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 12 !important;
    pointer-events: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-center[data-classic-stock-state="classic"] .center-indicator:not([data-indicator-visible="true"]),
  #matchPanel.normal-okey.table-theme-classic .nok-center[data-classic-stock-state="modern"] .center-indicator[data-indicator-visible="false"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    box-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-draw-stack .stock-count {
    display: inline-block !important;
    min-width: 1.5em !important;
    color: #f4ead0 !important;
    font-weight: 800 !important;
    font-size: clamp(11px, calc(13px * var(--classic-reference-scale-x)), 13px) !important;
    line-height: 1 !important;
    text-align: center !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .86) !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #chatVoiceButton .speech-waveform {
    display: none !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 2px !important;
    width: 17px !important;
    height: 12px !important;
    color: currentColor !important;
    pointer-events: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #chatVoiceButton.is-listening .speech-waveform,
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #chatVoiceButton.is-processing .speech-waveform {
    display: inline-flex !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #chatVoiceButton .speech-waveform i {
    display: block !important;
    width: 2px !important;
    height: 5px !important;
    background: currentColor !important;
    border: 0 !important;
    border-radius: 1px !important;
    animation: h10k7-voice-wave 760ms ease-in-out infinite alternate !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #chatVoiceButton .speech-waveform i:nth-child(2),
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #chatVoiceButton .speech-waveform i:nth-child(4) {
    animation-delay: 140ms !important;
    height: 9px !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #chatVoiceButton .speech-waveform i:nth-child(3) {
    animation-delay: 260ms !important;
    height: 12px !important;
  }

  #matchPanel.normal-okey.table-theme-classic > .nok-presentation > .nok-right-column #chatVoiceButton.is-listening {
    grid-template-columns: 18px 17px !important;
    column-gap: 2px !important;
  }
}

@keyframes h10k7-voice-wave {
  from { transform: scaleY(.45); opacity: .62; }
  to { transform: scaleY(1); opacity: 1; }
}
/* WAVE-H10K7_PLAYER_TILE_STOCK_AND_VOICE_UI_END */

/* WAVE-H10K8_CANONICAL_PLAYER_TILE_REFERENCE_ALIGNMENT_START */
/*
   H10K8 canonical source guard:
   D:\\OYUNPIYATCODEX\\OYUNCU_TAS.png is the only player/tile reference.
   These rules only register source-derived image crops and position the
   existing participant/rack DOM. They do not paint a replacement player,
   tile, rack, table, or furniture design.
*/
@media (min-width: 901px) {
  /* The table's furniture remains the existing .nok-visual-furniture-shell.
     The own station has one visible rack surface: the existing source asset.
     Its legacy DOM wood body is inert so it cannot create a second rack. */
  #matchPanel.normal-okey.table-theme-classic .nok-own-station .normal-okey-rack-zone[data-rack-skin] > .rack-wood-body {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* North: the horizontal source-derived panel sits immediately above the
     table plane; its closed stock is a five-stack strip inside the table. */
  #matchPanel.normal-okey.table-theme-classic .nok-station-top {
    top: calc(-89px * var(--classic-reference-scale-y)) !important;
    height: calc(250px * var(--classic-reference-scale-y)) !important;
    overflow: visible !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-top .player-seat {
    width: calc(255px * var(--classic-reference-scale-x)) !important;
    height: calc(89px * var(--classic-reference-scale-y)) !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    flex-direction: row !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-top .opponent-rack {
    top: calc(140px * var(--classic-reference-scale-y)) !important;
    left: 50% !important;
    width: calc(255px * var(--classic-reference-scale-x)) !important;
    height: calc(83px * var(--classic-reference-scale-y)) !important;
    transform: translateX(-50%) !important;
    background-color: transparent !important;
    background-image: url("/assets/classic/classic-h10k7-stock-five.png") !important;
    background-repeat: repeat-x !important;
    background-position: left top !important;
    background-size: calc(51px * var(--classic-reference-scale-x)) calc(83px * var(--classic-reference-scale-y)) !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* Side panels use the canonical square crop. Their closed-stock anchor is
     placed toward the felt, never inside or above the player panel. */
  #matchPanel.normal-okey.table-theme-classic .nok-station-left .player-seat,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .player-seat {
    width: calc(126px * var(--classic-reference-scale-x)) !important;
    height: calc(126px * var(--classic-reference-scale-y)) !important;
    top: 0 !important;
    transform: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-left .opponent-rack,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .opponent-rack {
    top: calc(21px * var(--classic-reference-scale-y)) !important;
    width: calc(51px * var(--classic-reference-scale-x)) !important;
    height: calc(83px * var(--classic-reference-scale-y)) !important;
    transform: none !important;
    background-color: transparent !important;
    background-image: url("/assets/classic/classic-h10k7-stock-five.png") !important;
    background-repeat: repeat-y !important;
    background-position: center top !important;
    background-size: calc(51px * var(--classic-reference-scale-x)) calc(83px * var(--classic-reference-scale-y)) !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-left .opponent-rack {
    left: calc(194px * var(--classic-reference-scale-x)) !important;
    right: auto !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-right .opponent-rack {
    left: auto !important;
    right: calc(194px * var(--classic-reference-scale-x)) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-top .opponent-rack::before,
  #matchPanel.normal-okey.table-theme-classic .nok-station-left .opponent-rack::before,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .opponent-rack::before {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
  }
}
/* WAVE-H10K8_CANONICAL_PLAYER_TILE_REFERENCE_ALIGNMENT_END */

/* WAVE-H10K8B_LIVE_VISUAL_CORRECTION_START */
/*
   The canonical furniture PNG already owns the lower wood/rack band.  The
   old normalOkeyRackSkin was painting a second walnut rail over that same
   band, while the gameplay hand DOM remained correctly positioned.  Keep the
   furniture source and the live hand tiles; make only the duplicate legacy
   image/shell paint inert.

   Side-player and concealed-stock corrections are placement-only.  They use
   the existing source-derived panel/stock pixels and never alter participant
   data or tile identity.
*/
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic .nok-own-station
    .normal-okey-rack-zone[data-rack-skin] > #normalOkeyRackSkin {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-own-station
    .normal-okey-rack-zone[data-rack-skin] {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* The bottom furniture remains the sole wood surface under the local hand.
     The hand/grid stays live and above that source-derived surface. */
  #matchPanel.normal-okey.table-theme-classic .nok-own-station {
    z-index: 26 !important;
  }

  /* Move the right player toward the social column.  The player card keeps
     the canonical side crop and remains inside the table/social clearance. */
  #matchPanel.normal-okey.table-theme-classic .nok-station-right {
    right: calc((100% - var(--classic-reference-table-width)) / 2 - (140px * var(--classic-reference-scale-x))) !important;
  }

  /* Mirror the canonical side-stock separation: away from the centre, still
     inside the table plane and separate from each side player card. */
  #matchPanel.normal-okey.table-theme-classic .nok-station-left .opponent-rack {
    left: calc(150px * var(--classic-reference-scale-x)) !important;
    right: auto !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-right .opponent-rack {
    left: auto !important;
    right: calc(150px * var(--classic-reference-scale-x)) !important;
  }

  /* Active turn is a state tint over the unchanged source-derived panel.
     Inactive cards retain their existing dark pixel surface. */
  #matchPanel.normal-okey.table-theme-classic
    .nok-station-top .player-seat::before,
  #matchPanel.normal-okey.table-theme-classic
    .nok-station-left .player-seat::before,
  #matchPanel.normal-okey.table-theme-classic
    .nok-station-right .player-seat::before,
  #matchPanel.normal-okey.table-theme-classic
    .nok-station-bottom .player-seat::before {
    content: none !important;
    display: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic
    .nok-station-top .player-seat.active::before,
  #matchPanel.normal-okey.table-theme-classic
    .nok-station-left .player-seat.active::before,
  #matchPanel.normal-okey.table-theme-classic
    .nok-station-right .player-seat.active::before,
  #matchPanel.normal-okey.table-theme-classic
    .nok-station-bottom .player-seat.active::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    background: rgba(7, 105, 113, .78) !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  #matchPanel.normal-okey.table-theme-classic
    .nok-station-top .player-seat.active > :not(.opponent-rack),
  #matchPanel.normal-okey.table-theme-classic
    .nok-station-left .player-seat.active > :not(.opponent-rack),
  #matchPanel.normal-okey.table-theme-classic
    .nok-station-right .player-seat.active > :not(.opponent-rack),
  #matchPanel.normal-okey.table-theme-classic
    .nok-station-bottom .player-seat.active > :not(.opponent-rack) {
    position: relative !important;
    z-index: 1 !important;
  }

  #matchPanel.normal-okey.table-theme-classic
    .nok-station-top .player-seat.active > .opponent-rack,
  #matchPanel.normal-okey.table-theme-classic
    .nok-station-left .player-seat.active > .opponent-rack,
  #matchPanel.normal-okey.table-theme-classic
    .nok-station-right .player-seat.active > .opponent-rack,
  #matchPanel.normal-okey.table-theme-classic
    .nok-station-bottom .player-seat.active > .opponent-rack {
    z-index: 1 !important;
  }

  /* H10K5E's broad transparent cascade also reaches the SVG path itself.
     Restore paint on the existing microphone only; no new icon is created. */
  #matchPanel.normal-okey.table-theme-classic
    > .nok-presentation > .nok-right-column #chatVoiceButton,
  #matchPanel.normal-okey.table-theme-classic
    > .nok-presentation > .nok-right-column #chatVoiceButton .speech-to-text-icon,
  #matchPanel.normal-okey.table-theme-classic
    > .nok-presentation > .nok-right-column #chatVoiceButton .speech-to-text-icon path {
    color: #f4fbff !important;
    fill: currentColor !important;
    stroke: none !important;
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  #matchPanel.normal-okey.table-theme-classic
    > .nok-presentation > .nok-right-column #chatVoiceButton .speech-to-text-icon {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    position: relative !important;
    z-index: 6 !important;
  }

  #matchPanel.normal-okey.table-theme-classic
    > .nok-presentation > .nok-right-column #chatVoiceButton .speech-to-text-icon path {
    display: block !important;
    width: auto !important;
    height: auto !important;
    position: static !important;
    z-index: auto !important;
  }
}
/* WAVE-H10K8B_LIVE_VISUAL_CORRECTION_END */

/* WAVE-H10K8C_EKOL_RACK_EXACT_REFERENCE_FIX_START */
/*
   The local rack image is an exact, source-derived crop from
   D:\\OYUNPIYATCODEX\\EKOL_ISTAKA.png.  Tile pixels and the player card were
   made transparent in the crop so the existing live #handTiles and player
   DOM remain authoritative.  The approved table furniture shell stays
   untouched; the earlier walnut image and synthetic rack body remain inert.
*/
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic .nok-own-station
    .normal-okey-rack-zone[data-rack-skin] > #normalOkeyRackSkin,
  #matchPanel.normal-okey.table-theme-classic .nok-own-station
    .normal-okey-rack-zone[data-rack-skin] > .rack-wood-body {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-own-station
    .normal-okey-rack-zone[data-rack-skin] {
    background-color: transparent !important;
    background-image: url("/assets/classic/classic-ekol-rack-reference.png") !important;
    background-repeat: no-repeat !important;
    background-position: center bottom !important;
    background-size: 100% auto !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-own-station
    .normal-okey-rack-zone[data-rack-skin] > #handTiles {
    position: relative !important;
    z-index: 1 !important;
  }
}
/* WAVE-H10K8C_EKOL_RACK_EXACT_REFERENCE_FIX_END */

/* WAVE-H10K8D_EXACT_EKOL_RACK_FROM_REFERENCE_ONLY_START */
/*
   The local rack paint is a source-pixel crop from
   D:\\OYUNPIYATCODEX\\EKOL_ISTAKA.png only.  The earlier H10K8C crop is
   superseded and is not referenced by this terminal rule.  The table
   furniture shell and the live hand/player DOM remain unchanged.
*/
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic .nok-own-station
    .normal-okey-rack-zone[data-rack-skin] > #normalOkeyRackSkin,
  #matchPanel.normal-okey.table-theme-classic .nok-own-station
    .normal-okey-rack-zone[data-rack-skin] > .rack-wood-body {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-own-station
    .normal-okey-rack-zone[data-rack-skin] {
    background: transparent !important;
    background-image: url("/assets/classic/classic-ekol-rack-exact-reference.png") !important;
    background-repeat: no-repeat !important;
    background-position: center bottom !important;
    background-size: 100% auto !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-own-station
    .normal-okey-rack-zone[data-rack-skin] > #handTiles {
    position: relative !important;
    z-index: 1 !important;
  }
}
/* WAVE-H10K8D_EXACT_EKOL_RACK_FROM_REFERENCE_ONLY_END */

/* WAVE-H10K8E_FINAL_EKOL_RACK_REFERENCE_LOCK_START */
/*
   Final local-rack paint: the two-tier wooden rack is a direct source-pixel
   crop from D:\\OYUNPIYATCODEX\\EKOL_ISTAKA.png.  The earlier rack crops are
   not referenced by this terminal layer.  Furniture remains the table's
   own shell; gameplay hand tiles remain DOM-owned and unchanged.
*/
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic .nok-own-station
    .normal-okey-rack-zone[data-rack-skin] > #normalOkeyRackSkin,
  #matchPanel.normal-okey.table-theme-classic .nok-own-station
    .normal-okey-rack-zone[data-rack-skin] > .rack-wood-body {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-own-station
    .normal-okey-rack-zone[data-rack-skin] {
    background: transparent !important;
    background-image: url("/assets/classic/classic-ekol-rack-final-reference.png") !important;
    background-repeat: no-repeat !important;
    background-position: center bottom !important;
    background-size: 100% auto !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-own-station
    .normal-okey-rack-zone[data-rack-skin] > #handTiles {
    position: relative !important;
    z-index: 1 !important;
  }
}
/* WAVE-H10K8E_FINAL_EKOL_RACK_REFERENCE_LOCK_END */

/* WAVE-H10K8F_REMOVE_BOTH_OLD_RACKS_AND_USE_EKOL_ISTAKA_EXACT_PIXELS_START */
/*
   Old local rack paint is terminally inert here: the walnut rack image,
   generated rack body, own-station decorative bridge, and rack pseudo
   surfaces cannot paint.  The table furniture shell remains the table
   furniture owner and is not removed.  Only the local-player rack surface
   is supplied by the final EKOL_ISTAKA source crop below.
*/
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic .nok-own-station::before,
  #matchPanel.normal-okey.table-theme-classic .nok-own-station::after,
  #matchPanel.normal-okey.table-theme-classic .nok-own-station
    .normal-okey-rack-zone[data-rack-skin]::before,
  #matchPanel.normal-okey.table-theme-classic .nok-own-station
    .normal-okey-rack-zone[data-rack-skin]::after,
  #matchPanel.normal-okey.table-theme-classic .nok-own-station
    .normal-okey-rack-zone[data-rack-skin] > #handTiles::before {
    content: none !important;
    display: none !important;
    visibility: hidden !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-own-station
    .normal-okey-rack-zone[data-rack-skin] > #normalOkeyRackSkin,
  #matchPanel.normal-okey.table-theme-classic .nok-own-station
    .normal-okey-rack-zone[data-rack-skin] > .rack-wood-body {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-own-station
    .normal-okey-rack-zone[data-rack-skin] {
    background: transparent !important;
    background-image: url("/assets/classic/classic-ekol-rack-final-reference.png") !important;
    background-repeat: no-repeat !important;
    background-position: center bottom !important;
    background-size: 100% auto !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-own-station
    .normal-okey-rack-zone[data-rack-skin] > #handTiles {
    position: relative !important;
    z-index: 1 !important;
  }
}
/* WAVE-H10K8F_REMOVE_BOTH_OLD_RACKS_AND_USE_EKOL_ISTAKA_EXACT_PIXELS_END */

/* WAVE-CLASSIC_THEME_REMOVE_EKOL_UPPER_RACK_ONLY_START */
/*
   The upper local rack is the independent rack-zone paint surface.  Remove
   only that surface; the canonical furniture PNG remains untouched and keeps
   the lower rack/furniture pixels exactly as they are.  #handTiles remains
   live and keeps its existing geometry and gameplay behavior.
*/
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic .nok-own-station
    .normal-okey-rack-zone[data-rack-skin] {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }
}
/* WAVE-CLASSIC_THEME_REMOVE_EKOL_UPPER_RACK_ONLY_END */

/* WAVE-CLASSIC_THEME_REMOVE_HANDTILES_SHADOW_ONLY_START */
/* Remove only the Classic local hand container shadow; preserve its geometry,
   live tiles, rack position, and every other theme's styling. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic .nok-own-station
    .normal-okey-rack-zone[data-rack-skin] > #handTiles {
    box-shadow: none !important;
  }
}
/* WAVE-CLASSIC_THEME_REMOVE_HANDTILES_SHADOW_ONLY_END */

/* WAVE-CLASSIC_THEME_EKOL_TWO_LEVEL_RACK_SOURCE_PIXEL_MASK_APPLY_START */
/* This is an alpha mask of only visible wood/gold source pixels from
   EKOL_ISTAKA.png.  Live hand tiles remain DOM-owned above it. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic .nok-own-station
    .normal-okey-rack-zone[data-rack-skin] {
    background: transparent !important;
    background-image: url("/assets/classic/classic-ekol-two-level-rack-source-mask.png") !important;
    background-repeat: no-repeat !important;
    background-position: center bottom !important;
    background-size: 100% auto !important;
    border: 0 !important;
    box-shadow: none !important;
  }
}
/* WAVE-CLASSIC_THEME_EKOL_TWO_LEVEL_RACK_SOURCE_PIXEL_MASK_APPLY_END */

/* WAVE-CLASSIC_THEME_REPLACE_LOCAL_RACK_WITH_ATLAS_REFERENCE_ONLY_START */
/* Source-pixel-only Atlas rack mask.  Existing hand tiles remain live DOM;
   the table/furniture shell and all player geometry remain untouched. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic .nok-own-station
    .normal-okey-rack-zone[data-rack-skin] {
    background: transparent !important;
    background-image: url("/assets/classic/classic-atlas-local-two-level-rack-reference.png") !important;
    background-repeat: no-repeat !important;
    background-position: center bottom !important;
    background-size: 100% auto !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-own-station
    .normal-okey-rack-zone[data-rack-skin] > #handTiles {
    position: relative !important;
    z-index: 1 !important;
  }
}
/* WAVE-CLASSIC_THEME_REPLACE_LOCAL_RACK_WITH_ATLAS_REFERENCE_ONLY_END */

/* WAVE-CLASSIC_THEME_REMOVE_ONLY_OLD_EMBEDDED_RACK_FROM_FURNITURE_START */
/* Keep the canonical furniture shell geometry and all non-rack pixels;
   only the source-derived furniture variant removes the embedded local rack.
   The visible local rack remains the Atlas rack layer above. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic .nok-visual-furniture-shell {
    background-image: url("/assets/normal-okey/classic/normal-okey-luxury-reference-furniture-no-embedded-local-rack.png") !important;
  }
}
/* WAVE-CLASSIC_THEME_REMOVE_ONLY_OLD_EMBEDDED_RACK_FROM_FURNITURE_END */

/* WAVE-CLASSIC_THEME_APPLY_MASA_GENERAL_FIRST_START */
/*
   MASA.png is the sole Classic general-table raster source for this stage.
   The existing gameplay DOM remains mounted above this passive visual shell;
   legacy table/rack paints are inert without removing their DOM anchors.
*/
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic .nok-visual-furniture-shell {
    inset: auto !important;
    top: calc(-81px * var(--classic-reference-scale-y)) !important;
    left: calc(-13px * var(--classic-reference-scale-x)) !important;
    width: calc(1096px * var(--classic-reference-scale-x)) !important;
    height: auto !important;
    aspect-ratio: 1536 / 1024 !important;
    box-sizing: border-box !important;
    display: block !important;
    overflow: hidden !important;
    border: 0 !important;
    border-image: none !important;
    border-radius: 0 !important;
    clip-path: none !important;
    background-color: transparent !important;
    background-image: url("/assets/classic/MASA-transparent.png") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    box-shadow: none !important;
    transform: none !important;
    transform-origin: center !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-visual-furniture-shell::before,
  #matchPanel.normal-okey.table-theme-classic .nok-visual-furniture-shell::after {
    content: none !important;
    display: none !important;
    visibility: hidden !important;
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-own-station::before,
  #matchPanel.normal-okey.table-theme-classic .nok-own-station::after,
  #matchPanel.normal-okey.table-theme-classic .nok-own-station
    .normal-okey-rack-zone[data-rack-skin]::before,
  #matchPanel.normal-okey.table-theme-classic .nok-own-station
    .normal-okey-rack-zone[data-rack-skin]::after,
  #matchPanel.normal-okey.table-theme-classic .nok-own-station
    .normal-okey-rack-zone[data-rack-skin] > #handTiles::before {
    content: none !important;
    display: none !important;
    visibility: hidden !important;
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-own-station
    .normal-okey-rack-zone[data-rack-skin] {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-own-station
    .normal-okey-rack-zone[data-rack-skin] > #normalOkeyRackSkin,
  #matchPanel.normal-okey.table-theme-classic .nok-own-station
    .normal-okey-rack-zone[data-rack-skin] > .rack-wood-body {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .opponent-rack,
  #matchPanel.normal-okey.table-theme-classic .opponent-rack::before,
  #matchPanel.normal-okey.table-theme-classic .opponent-rack::after {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .opponent-rack::before,
  #matchPanel.normal-okey.table-theme-classic .opponent-rack::after {
    content: none !important;
    display: none !important;
    visibility: hidden !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-own-station
    .normal-okey-rack-zone[data-rack-skin] > #handTiles {
    position: relative !important;
    z-index: 1 !important;
  }

  /* The live center brand is a duplicate of the brand pixels embedded in MASA.png. */
  #matchPanel.normal-okey.table-theme-classic #gameBoard .nok-center-play-area > .nok-center-brand,
  #matchPanel.normal-okey.table-theme-classic #gameBoard .nok-center-play-area > .nok-center-brand::before,
  #matchPanel.normal-okey.table-theme-classic #gameBoard .nok-center-play-area > .nok-center-brand::after {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    content: none !important;
    pointer-events: none !important;
  }
}
/* WAVE-CLASSIC_THEME_APPLY_MASA_GENERAL_FIRST_END */

/* WAVE-CLASSIC_BOTTOM_PLAYER_PANEL_MATCH_TOP_START */
/* Keep the existing bottom station anchor and Y placement; only align the
   live bottom player panel's size with the final TOP reference panel. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic .nok-station-bottom .player-seat {
    width: calc(255px * var(--classic-reference-scale-x)) !important;
    height: calc(89px * var(--classic-reference-scale-y)) !important;
  }
}
/* WAVE-CLASSIC_BOTTOM_PLAYER_PANEL_MATCH_TOP_END */

/* WAVE-CLASSIC_PLAYER_PROFILE_AND_DISCARD_REFERENCE_ONLY_START */
/* Presentation-only Classic profile/discard layer.  It uses the existing
   seat, avatar, participant, and board-tile DOM; no table/rack asset or
   gameplay geometry is owned here. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic .nok-station-top .player-seat,
  #matchPanel.normal-okey.table-theme-classic .nok-station-left .player-seat,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .player-seat,
  #matchPanel.normal-okey.table-theme-classic .nok-station-bottom .player-seat {
    background-color: rgba(4, 19, 23, .96) !important;
    background-image: linear-gradient(145deg, rgba(14, 62, 65, .98), rgba(3, 16, 21, .98)) !important;
    border: 1px solid rgba(241, 197, 104, .78) !important;
    border-radius: 12px !important;
    box-shadow: inset 0 1px rgba(255, 239, 186, .18), 0 8px 18px rgba(0, 0, 0, .42) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-top .player-seat::before,
  #matchPanel.normal-okey.table-theme-classic .nok-station-left .player-seat::before,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .player-seat::before,
  #matchPanel.normal-okey.table-theme-classic .nok-station-bottom .player-seat::before {
    content: none !important;
    display: none !important;
    background: none !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .seat-identity {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .seat-role:not(.seat-owner-vip) {
    display: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .seat-role.seat-owner-vip {
    display: block !important;
    color: #ffe08c !important;
    font-size: var(--classic-occupied-card-meta-size) !important;
    font-weight: 900 !important;
    letter-spacing: .14em !important;
    line-height: 1 !important;
    text-shadow: 0 1px 5px rgba(0, 0, 0, .55) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .seat-avatar {
    border-radius: 50% !important;
    object-fit: cover !important;
  }

  #matchPanel.normal-okey.table-theme-classic .player-seat:not(.has-player) .seat-identity::after {
    display: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic
    .nok-station-top .player-seat.active,
  #matchPanel.normal-okey.table-theme-classic
    .nok-station-left .player-seat.active,
  #matchPanel.normal-okey.table-theme-classic
    .nok-station-right .player-seat.active,
  #matchPanel.normal-okey.table-theme-classic
    .nok-station-bottom .player-seat.active {
    animation: classic-profile-panel-turn-glow 2.25s ease-in-out infinite !important;
  }

  #matchPanel.normal-okey.table-theme-classic
    .nok-station-top .player-seat:not(.active),
  #matchPanel.normal-okey.table-theme-classic
    .nok-station-left .player-seat:not(.active),
  #matchPanel.normal-okey.table-theme-classic
    .nok-station-right .player-seat:not(.active),
  #matchPanel.normal-okey.table-theme-classic
    .nok-station-bottom .player-seat:not(.active) {
    animation: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic #discardSeat1,
  #matchPanel.normal-okey.table-theme-classic #discardSeat2,
  #matchPanel.normal-okey.table-theme-classic #discardSeat3,
  #matchPanel.normal-okey.table-theme-classic #discardSeat4,
  #matchPanel.normal-okey.table-theme-classic .seat-discards,
  #matchPanel.normal-okey.table-theme-classic .discard-stack {
    min-width: 0 !important;
    min-height: 0 !important;
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .discard-tile-back {
    display: none !important;
    visibility: hidden !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-discard-center {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@keyframes classic-profile-panel-turn-glow {
  0%, 100% {
    box-shadow: inset 0 0 0 1px rgba(255, 218, 112, .12), inset 0 0 14px rgba(205, 145, 35, .08), 0 0 0 1px rgba(112, 75, 20, .45), 0 6px 16px rgba(0, 0, 0, .44), 0 0 10px rgba(198, 143, 48, .20) !important;
  }
  50% {
    box-shadow: inset 0 0 0 1px rgba(255, 226, 132, .30), inset 0 0 18px rgba(215, 160, 48, .18), 0 0 0 1px rgba(219, 164, 63, .68), 0 6px 16px rgba(0, 0, 0, .42), 0 0 20px rgba(201, 145, 42, .42) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #matchPanel.normal-okey.table-theme-classic .player-seat.active {
    animation: none !important;
    box-shadow: inset 0 1px rgba(255, 247, 207, .3), 0 8px 18px rgba(0, 0, 0, .42), 0 0 18px rgba(247, 193, 79, .58) !important;
  }
}
/* WAVE-CLASSIC_PLAYER_PROFILE_AND_DISCARD_REFERENCE_ONLY_END */

/* WAVE-CLASSIC_LEGACY_PLAYER_PROFILE_VISUAL_CLEANUP_ONLY_START */
/* The live profile surface above is the only Classic player-seat paint owner.
   Keep .player-seat and its identity children mounted for interaction/state;
   disable only the superseded panel pseudo-paint and decorative effects. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic .nok-station-top .player-seat,
  #matchPanel.normal-okey.table-theme-classic .nok-station-left .player-seat,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .player-seat,
  #matchPanel.normal-okey.table-theme-classic .nok-station-bottom .player-seat {
    outline: none !important;
    filter: none !important;
  }

  /* The avatar image remains mounted and unchanged; remove only the old
     Classic frame paint.  The live turn glow stays on .player-seat itself. */
  #matchPanel.normal-okey.table-theme-classic .seat-avatar {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .player-seat.active .seat-avatar {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-top .player-seat::before,
  #matchPanel.normal-okey.table-theme-classic .nok-station-top .player-seat::after,
  #matchPanel.normal-okey.table-theme-classic .nok-station-left .player-seat::before,
  #matchPanel.normal-okey.table-theme-classic .nok-station-left .player-seat::after,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .player-seat::before,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .player-seat::after,
  #matchPanel.normal-okey.table-theme-classic .nok-station-bottom .player-seat::before,
  #matchPanel.normal-okey.table-theme-classic .nok-station-bottom .player-seat::after {
    content: none !important;
    display: none !important;
    visibility: hidden !important;
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    filter: none !important;
    pointer-events: none !important;
  }
}
/* WAVE-CLASSIC_LEGACY_PLAYER_PROFILE_VISUAL_CLEANUP_ONLY_END */

/* WAVE-CLASSIC_THEME_APPLY_REFERENCE_PLAYER_PROFILE_FINAL_START */
/* Final live Classic profile surface.  The four existing player-seat nodes
   remain the functional/state owners; this terminal layer only replaces the
   retired H10K7 panel skins with one scaled DOM/CSS profile contract. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic .nok-station-top .player-seat,
  #matchPanel.normal-okey.table-theme-classic .nok-station-left .player-seat,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .player-seat,
  #matchPanel.normal-okey.table-theme-classic .nok-station-bottom .player-seat {
    position: absolute !important;
    box-sizing: border-box !important;
    width: calc(212px * var(--classic-reference-scale-x)) !important;
    height: calc(74px * var(--classic-reference-scale-y)) !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: calc(8px * var(--classic-reference-scale-x)) !important;
    padding: calc(8px * var(--classic-reference-scale-y)) calc(9px * var(--classic-reference-scale-x)) !important;
    overflow: visible !important;
    border: 1px solid rgba(241, 197, 104, .78) !important;
    border-radius: 12px !important;
    background-color: rgba(4, 19, 23, .96) !important;
    background-image: linear-gradient(145deg, rgba(14, 62, 65, .98), rgba(3, 16, 21, .98)) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    box-shadow: inset 0 1px rgba(255, 239, 186, .18), 0 8px 18px rgba(0, 0, 0, .42) !important;
    filter: none !important;
  }

  /* North/south cards stay centered on their existing station anchors. */
  #matchPanel.normal-okey.table-theme-classic .nok-station-top .player-seat,
  #matchPanel.normal-okey.table-theme-classic .nok-station-bottom .player-seat {
    top: 0 !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  /* Side cards use the same horizontal profile but remain wholly outside the
     existing side-rack anchors; the rack position and size are untouched. */
  #matchPanel.normal-okey.table-theme-classic .nok-station-left .player-seat {
    top: 0 !important;
    left: calc(-66px * var(--classic-reference-scale-x)) !important;
    right: auto !important;
    transform: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-right .player-seat {
    top: 0 !important;
    left: auto !important;
    right: calc(-66px * var(--classic-reference-scale-x)) !important;
    transform: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .seat-avatar {
    flex: 0 0 auto !important;
    width: calc(58px * var(--classic-reference-scale-x)) !important;
    height: calc(58px * var(--classic-reference-scale-y)) !important;
    aspect-ratio: 1 / 1 !important;
    border: 1px solid rgba(241, 197, 104, .86) !important;
    border-radius: 50% !important;
    background: linear-gradient(145deg, #6b8b7c, #1c4b45 72%, #0c292b) !important;
    object-fit: cover !important;
    box-shadow: 0 0 0 1px rgba(255, 225, 147, .16), 0 4px 10px rgba(0, 0, 0, .42) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .seat-identity {
    position: relative !important;
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    text-align: left !important;
  }

  #matchPanel.normal-okey.table-theme-classic .seat-identity strong {
    display: block !important;
    width: 100% !important;
    max-width: calc(126px * var(--classic-reference-scale-x)) !important;
    overflow: hidden !important;
    color: #fff3d0 !important;
    font-size: calc(16px * var(--classic-reference-scale-x)) !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #matchPanel.normal-okey.table-theme-classic .seat-identity > small {
    display: block !important;
    color: #bcd2bf !important;
    font-size: calc(12px * var(--classic-reference-scale-x)) !important;
    line-height: 1.12 !important;
    white-space: nowrap !important;
  }

  #matchPanel.normal-okey.table-theme-classic .seat-role:not(.seat-owner-vip) {
    display: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .seat-role.seat-owner-vip {
    display: block !important;
    color: #ffe08c !important;
    font-size: calc(10px * var(--classic-reference-scale-x)) !important;
    font-weight: 900 !important;
    letter-spacing: .14em !important;
    line-height: 1 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .player-seat.active {
    animation: classic-profile-panel-turn-glow 2.25s ease-in-out infinite !important;
  }

  #matchPanel.normal-okey.table-theme-classic .player-seat:not(.active) {
    animation: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .player-seat.active .seat-avatar {
    border-color: #ffda70 !important;
    box-shadow: 0 0 0 1px rgba(255, 218, 112, .58), 0 0 12px rgba(255, 218, 112, .48), 0 4px 10px rgba(0, 0, 0, .42) !important;
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic .player-seat.active {
    animation: none !important;
    box-shadow: inset 0 1px rgba(255, 247, 207, .3), 0 8px 18px rgba(0, 0, 0, .42), 0 0 18px rgba(247, 193, 79, .58) !important;
  }
}
/* WAVE-CLASSIC_THEME_APPLY_REFERENCE_PLAYER_PROFILE_FINAL_END */

/* WAVE-CLASSIC_THEME_REFERENCE_INVENTORY_AND_PLAYER_PROFILE_EXACT_APPLICATION_START */
/* The supplied references are layout/style references only.  The live seat
   DOM, participant data, and real board tiles remain the source of truth. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic .nok-station-top .player-seat,
  #matchPanel.normal-okey.table-theme-classic .nok-station-left .player-seat,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .player-seat,
  #matchPanel.normal-okey.table-theme-classic .nok-station-bottom .player-seat {
    background-color: rgba(4, 19, 23, .96) !important;
    background-image: linear-gradient(145deg, rgba(14, 62, 65, .98), rgba(3, 16, 21, .98)) !important;
    border: 1px solid rgba(241, 197, 104, .78) !important;
    border-radius: 10px !important;
    box-shadow: inset 0 1px rgba(255, 239, 186, .18), 0 10px 22px rgba(0, 0, 0, .42) !important;
    filter: none !important;
  }

  /* No legacy profile pseudo-paint may sit behind or above the live card. */
  #matchPanel.normal-okey.table-theme-classic .nok-station-top .player-seat::before,
  #matchPanel.normal-okey.table-theme-classic .nok-station-top .player-seat::after,
  #matchPanel.normal-okey.table-theme-classic .nok-station-left .player-seat::before,
  #matchPanel.normal-okey.table-theme-classic .nok-station-left .player-seat::after,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .player-seat::before,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .player-seat::after,
  #matchPanel.normal-okey.table-theme-classic .nok-station-bottom .player-seat::before,
  #matchPanel.normal-okey.table-theme-classic .nok-station-bottom .player-seat::after {
    content: none !important;
    display: none !important;
    visibility: hidden !important;
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    filter: none !important;
    pointer-events: none !important;
  }

  /* Keep the existing live avatar/name/score/owner contract at the measured
     reference scale; no profile raster is painted here. */
  #matchPanel.normal-okey.table-theme-classic .seat-avatar {
    width: calc(58px * var(--classic-reference-scale-x)) !important;
    height: calc(58px * var(--classic-reference-scale-y)) !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
  }

  #matchPanel.normal-okey.table-theme-classic .seat-identity strong {
    max-width: calc(126px * var(--classic-reference-scale-x)) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #matchPanel.normal-okey.table-theme-classic .seat-role:not(.seat-owner-vip) {
    display: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .seat-role.seat-owner-vip {
    display: block !important;
    color: #ffe08c !important;
  }

  #matchPanel.normal-okey.table-theme-classic .player-seat.active {
    animation: classic-profile-panel-turn-glow 2.25s ease-in-out infinite !important;
  }

  /* The live logo text stays in HTML; this is only its reference-derived
     crown/panel treatment, not a screenshot or raster asset. */
  #matchPanel.normal-okey.table-theme-classic .nok-logo-card {
    border: 1px solid rgba(225, 181, 104, .78) !important;
    border-radius: 10px !important;
    background: linear-gradient(145deg, rgba(5, 18, 22, .98), rgba(21, 26, 20, .96)) !important;
    box-shadow: inset 0 0 0 2px rgba(246, 202, 113, .2), 0 10px 24px rgba(0, 0, 0, .5) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-logo-card::before {
    content: "\265B" !important;
    color: #ffd76f !important;
    text-shadow: 0 2px 10px rgba(255, 194, 79, .32) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-logo-card strong {
    color: #fff1c5 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .35) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-logo-card span {
    color: #f4c76c !important;
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic .player-seat.active {
    animation: none !important;
    box-shadow: inset 0 1px rgba(255, 247, 207, .3), 0 10px 22px rgba(0, 0, 0, .42), 0 0 18px rgba(247, 193, 79, .58) !important;
  }
}
/* WAVE-CLASSIC_THEME_REFERENCE_INVENTORY_AND_PLAYER_PROFILE_EXACT_APPLICATION_END */

/* WAVE-CLASSIC_THEME_PLAYER_PROFILE_REFERENCE_VISUAL_CORRECTION_START */
/* Reference correction: the live seat remains the same 212x74 containing
   block so concealed-rack anchors and seat interaction geometry do not move.
   The visible profile is the dark identity body plus an overlapping avatar,
   matching the supplied reference composition. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic .nok-station-top .player-seat,
  #matchPanel.normal-okey.table-theme-classic .nok-station-left .player-seat,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .player-seat,
  #matchPanel.normal-okey.table-theme-classic .nok-station-bottom .player-seat {
    width: calc(212px * var(--classic-reference-scale-x)) !important;
    height: calc(74px * var(--classic-reference-scale-y)) !important;
    box-sizing: border-box !important;
    align-items: center !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-top .player-seat,
  #matchPanel.normal-okey.table-theme-classic .nok-station-bottom .player-seat {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    flex-direction: row !important;
  }

  /* Keep both side profiles fully inside the side station surfaces. */
  #matchPanel.normal-okey.table-theme-classic .nok-station-left .player-seat {
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    flex-direction: row !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-right .player-seat {
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    transform: none !important;
    flex-direction: row-reverse !important;
  }

  /* The avatar deliberately overlaps the identity body, as in the primary
     reference; its containing seat and rack anchors remain unchanged. */
  #matchPanel.normal-okey.table-theme-classic .seat-avatar {
    flex: 0 0 auto !important;
    width: calc(86px * var(--classic-reference-scale-x)) !important;
    height: calc(86px * var(--classic-reference-scale-y)) !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 calc(-46px * var(--classic-reference-scale-x)) 0 0 !important;
    border: 1px solid rgba(241, 197, 104, .9) !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    position: relative !important;
    z-index: 2 !important;
    box-shadow: 0 0 0 1px rgba(255, 225, 147, .2), 0 7px 16px rgba(0, 0, 0, .48) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .seat-identity {
    flex: 0 0 calc(172px * var(--classic-reference-scale-x)) !important;
    width: calc(172px * var(--classic-reference-scale-x)) !important;
    height: calc(74px * var(--classic-reference-scale-y)) !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: calc(9px * var(--classic-reference-scale-y)) calc(10px * var(--classic-reference-scale-x)) calc(8px * var(--classic-reference-scale-y)) 0 !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: calc(2px * var(--classic-reference-scale-y)) !important;
    border: 1px solid rgba(225, 181, 104, .78) !important;
    border-radius: 10px !important;
    background: linear-gradient(145deg, rgba(5, 18, 22, .97), rgba(3, 13, 17, .98)) !important;
    background-image: linear-gradient(145deg, rgba(5, 18, 22, .97), rgba(3, 13, 17, .98)) !important;
    box-shadow: inset 0 1px rgba(255, 239, 186, .14), 0 9px 20px rgba(0, 0, 0, .46) !important;
    position: relative !important;
    z-index: 1 !important;
    text-align: left !important;
  }

  #matchPanel.normal-okey.table-theme-classic .seat-identity strong {
    width: 100% !important;
    max-width: calc(102px * var(--classic-reference-scale-x)) !important;
    font-size: calc(16px * var(--classic-reference-scale-x)) !important;
    line-height: 1.08 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .seat-identity > small {
    max-width: calc(102px * var(--classic-reference-scale-x)) !important;
    font-size: calc(12px * var(--classic-reference-scale-x)) !important;
    line-height: 1.1 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .seat-role.seat-owner-vip {
    display: inline-block !important;
    width: fit-content !important;
    padding: 2px 6px !important;
    border: 1px solid rgba(247, 205, 111, .55) !important;
    border-radius: 999px !important;
    background: rgba(113, 77, 24, .28) !important;
    color: #ffe08c !important;
    font-size: calc(10px * var(--classic-reference-scale-x)) !important;
    font-weight: 900 !important;
    letter-spacing: .12em !important;
    line-height: 1 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .player-seat.active .seat-identity {
    animation: classic-profile-panel-turn-glow 2.25s ease-in-out infinite !important;
  }

  #matchPanel.normal-okey.table-theme-classic .player-seat.active .seat-avatar {
    border-color: #ffda70 !important;
    box-shadow: 0 0 0 1px rgba(255, 218, 112, .58), 0 0 16px rgba(255, 218, 112, .62), 0 7px 16px rgba(0, 0, 0, .48) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .player-seat:not(.active) .seat-identity {
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic .player-seat.active .seat-identity {
    animation: none !important;
    box-shadow: inset 0 1px rgba(255, 247, 207, .3), 0 9px 20px rgba(0, 0, 0, .46), 0 0 18px rgba(247, 193, 79, .58) !important;
  }
}
/* WAVE-CLASSIC_THEME_PLAYER_PROFILE_REFERENCE_VISUAL_CORRECTION_END */

/* WAVE-CLASSIC_THEME_PROFILE_LIVE_GEOMETRY_CORRECTION_START */
/* The 1280x899 live audit showed that the two station wrappers do not have
   mirrored containing-block edges.  Keep the table/rack wrappers untouched;
   correct only the visible profile children with one shared target clearance
   and measured wrapper-specific compensation so their final card centers
   mirror around the game-board center. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation {
    --classic-profile-side-target-clearance: calc(12px * var(--classic-reference-scale-x));
    --classic-profile-side-left-shift: calc(var(--classic-profile-side-target-clearance) + (6.48px * var(--classic-reference-scale-x)));
    --classic-profile-side-right-shift: calc(68.4px * var(--classic-reference-scale-x));
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-left .player-seat,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .player-seat {
    width: calc(212px * var(--classic-reference-scale-x)) !important;
    height: calc(74px * var(--classic-reference-scale-y)) !important;
    flex-direction: row !important;
    align-items: center !important;
    overflow: visible !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-left .player-seat {
    left: var(--classic-profile-side-left-shift) !important;
    right: auto !important;
    transform: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-right .player-seat {
    left: auto !important;
    right: var(--classic-profile-side-right-shift) !important;
    transform: none !important;
  }

  /* The identity body is the visible profile window; never let the avatar
     become the only painted part of an occupied or empty seat. */
  #matchPanel.normal-okey.table-theme-classic .nok-station-left .seat-identity,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .seat-identity {
    display: flex !important;
    flex: 0 0 calc(172px * var(--classic-reference-scale-x)) !important;
    width: calc(172px * var(--classic-reference-scale-x)) !important;
    height: calc(74px * var(--classic-reference-scale-y)) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    overflow: visible !important;
    border: 1px solid rgba(225, 181, 104, .78) !important;
    border-radius: 10px !important;
    background: linear-gradient(145deg, rgba(5, 18, 22, .97), rgba(3, 13, 17, .98)) !important;
    background-image: linear-gradient(145deg, rgba(5, 18, 22, .97), rgba(3, 13, 17, .98)) !important;
    box-shadow: inset 0 1px rgba(255, 239, 186, .14), 0 9px 20px rgba(0, 0, 0, .46) !important;
    z-index: 1 !important;
  }

  /* Reassert the correct north/south center contract without changing their
     already-correct live horizontal centers. */
  #matchPanel.normal-okey.table-theme-classic .nok-station-top .player-seat,
  #matchPanel.normal-okey.table-theme-classic .nok-station-bottom .player-seat {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
}
/* WAVE-CLASSIC_THEME_PROFILE_LIVE_GEOMETRY_CORRECTION_END */

/* WAVE-CLASSIC_THEME_PROFILE_IDENTITY_AND_BOTTOM_MENU_REGRESSION_FIX_START
   Own only the final Classic profile paint and the real bottom navigation
   sizing.  Table, rack, station, chat, and gameplay geometry stay owned by
   their existing contracts above. */
@media (min-width: 901px) {
  /* The old H10K7/compact layers left the visible identity body dependent on
     station-specific cascade order.  Reassert one shared body contract for
     occupied and empty seats so the avatar can never be the only painted
     profile surface. */
  #matchPanel.normal-okey.table-theme-classic .nok-station-top .player-seat,
  #matchPanel.normal-okey.table-theme-classic .nok-station-left .player-seat,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .player-seat,
  #matchPanel.normal-okey.table-theme-classic .nok-station-bottom .player-seat {
    flex-direction: row !important;
    align-items: center !important;
    overflow: visible !important;
  }

  /* Keep the measured 1280px north/south centers and the already mirrored
     live side clearances authoritative.  These declarations do not move the
     locked table, rack, or station wrappers. */
  #matchPanel.normal-okey.table-theme-classic .nok-station-top .player-seat,
  #matchPanel.normal-okey.table-theme-classic .nok-station-bottom .player-seat {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-left .player-seat {
    left: var(--classic-profile-side-left-shift) !important;
    right: auto !important;
    transform: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-right .player-seat {
    left: auto !important;
    right: var(--classic-profile-side-right-shift) !important;
    transform: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-top .seat-identity,
  #matchPanel.normal-okey.table-theme-classic .nok-station-left .seat-identity,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .seat-identity,
  #matchPanel.normal-okey.table-theme-classic .nok-station-bottom .seat-identity {
    display: flex !important;
    flex: 0 0 calc(172px * var(--classic-reference-scale-x)) !important;
    width: calc(172px * var(--classic-reference-scale-x)) !important;
    height: calc(74px * var(--classic-reference-scale-y)) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: calc(2px * var(--classic-reference-scale-y)) !important;
    padding: calc(9px * var(--classic-reference-scale-y)) calc(10px * var(--classic-reference-scale-x)) calc(8px * var(--classic-reference-scale-y)) 0 !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    border: 1px solid rgba(225, 181, 104, .78) !important;
    border-radius: 10px !important;
    background: linear-gradient(145deg, rgba(5, 18, 22, .97), rgba(3, 13, 17, .98)) !important;
    background-image: linear-gradient(145deg, rgba(5, 18, 22, .97), rgba(3, 13, 17, .98)) !important;
    box-shadow: inset 0 1px rgba(255, 239, 186, .14), 0 9px 20px rgba(0, 0, 0, .46) !important;
    position: relative !important;
    z-index: 1 !important;
    text-align: left !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-top .seat-avatar,
  #matchPanel.normal-okey.table-theme-classic .nok-station-left .seat-avatar,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .seat-avatar,
  #matchPanel.normal-okey.table-theme-classic .nok-station-bottom .seat-avatar {
    flex: 0 0 auto !important;
    width: calc(58px * var(--classic-reference-scale-x)) !important;
    height: calc(58px * var(--classic-reference-scale-y)) !important;
    aspect-ratio: 1 / 1 !important;
    /* Keep the avatar fixed and let the existing 8px flex gap place the
       identity text immediately to its right. */
    margin: 0 !important;
    border: 1px solid rgba(241, 197, 104, .9) !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    position: relative !important;
    z-index: 2 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .seat-identity strong,
  #matchPanel.normal-okey.table-theme-classic .seat-identity > small {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-width: calc(102px * var(--classic-reference-scale-x)) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #matchPanel.normal-okey.table-theme-classic .seat-identity strong {
    width: 100% !important;
    color: #fff1d7 !important;
    font-size: calc(16px * var(--classic-reference-scale-x)) !important;
    line-height: 1.08 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .seat-identity > small {
    color: #e8d6ae !important;
    font-size: calc(12px * var(--classic-reference-scale-x)) !important;
    line-height: 1.1 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .player-seat.active .seat-identity {
    animation: classic-profile-panel-turn-glow 2.25s ease-in-out infinite !important;
  }

  #matchPanel.normal-okey.table-theme-classic .player-seat:not(.active) .seat-identity {
    animation: none !important;
  }

  /* Restore the readable base menu contract.  Keep its existing final
     position and IDs; only the collapsed height, padding and button sizing
     are repaired. */
  #matchPanel.normal-okey.table-theme-classic #normalOkeyBottomMenu,
  #matchPanel.normal-okey.table-theme-classic .normal-okey-bottom-menu {
    height: var(--classic-reference-navigation-height) !important;
    min-height: var(--classic-reference-navigation-height) !important;
    box-sizing: border-box !important;
    flex-wrap: nowrap !important;
    padding: 2px 8px !important;
    overflow: hidden !important;
  }

  #matchPanel.normal-okey.table-theme-classic #normalOkeyBottomMenu .normal-okey-bottom-menu-group,
  #matchPanel.normal-okey.table-theme-classic .normal-okey-bottom-menu .normal-okey-bottom-menu-group {
    flex-wrap: nowrap !important;
    gap: 4px !important;
  }

  #matchPanel.normal-okey.table-theme-classic #normalOkeyBottomMenu .normal-okey-bottom-menu-button,
  #matchPanel.normal-okey.table-theme-classic .normal-okey-bottom-menu .normal-okey-bottom-menu-button {
    min-height: 0 !important;
    height: 100% !important;
    padding: 2px 6px !important;
    font-size: calc(11px * var(--classic-reference-scale-x)) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic .player-seat.active .seat-identity {
    animation: none !important;
    box-shadow: inset 0 1px rgba(255, 247, 207, .3), 0 9px 20px rgba(0, 0, 0, .46), 0 0 18px rgba(247, 193, 79, .58) !important;
  }
}
/* WAVE-CLASSIC_THEME_PROFILE_IDENTITY_AND_BOTTOM_MENU_REGRESSION_FIX_END */

/* WAVE-CLASSIC_THEME_PROFILE_LIVE_POSITION_FINALIZATION_START
   Position-only terminal contract.  The locked 212x74 profile, 172x74
   identity body, 58x58 avatar, and bottom-menu contract are intentionally
   not redeclared here.  Side placement is derived from the existing
   .opponent-rack anchor geometry; the right edge is safety-clamped before the
   locked chat column. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation {
    --classic-profile-side-rack-anchor: calc(150px * var(--classic-reference-scale-x));
    --classic-profile-side-rack-width: calc(51px * var(--classic-reference-scale-x));
    --classic-profile-side-rack-top: calc(21px * var(--classic-reference-scale-y));
    --classic-profile-side-rack-height: calc(83px * var(--classic-reference-scale-y));
    --classic-profile-side-rack-card-overlap: calc(131.52px * var(--classic-reference-scale-x));
    --classic-profile-side-right-chat-safe: calc(60.5px * var(--classic-reference-scale-x));
    --classic-profile-side-profile-top: calc(
      (127px * var(--classic-reference-scale-y)) - 2cm
    );
    /* Keep the locked own-rack position.  The authoritative live audit places
       the visible own-rack top 75 source px below this station origin.  The
       profile shell is 74 source px high; subtracting the 12 source px safe
       gap yields an -11px source drop, or about -27.5px from the previously
       observed live profile position.  The rack itself is not moved. */
    --classic-profile-bottom-rack-top-offset: calc(75px * var(--classic-reference-scale-y));
    --classic-profile-bottom-profile-height: calc(74px * var(--classic-reference-scale-y));
    --classic-profile-bottom-safe-gap: calc(12px * var(--classic-reference-scale-y));
    --classic-profile-bottom-drop: calc(
      var(--classic-profile-bottom-rack-top-offset) -
      var(--classic-profile-bottom-profile-height) -
      var(--classic-profile-bottom-safe-gap)
    );
  }

  /* The side profiles use the measured lower side-station band.  The target
     is the profile position itself; no zero-sized rack audit result is used
     as an anchor. */
  #matchPanel.normal-okey.table-theme-classic .nok-station-left .player-seat,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .player-seat {
    top: var(--classic-profile-side-profile-top) !important;
  }

  /* Mirror the rack-relative overlap.  The right side uses the smallest
     permitted chat-safe inset when that mirrored position would enter the
     locked right column. */
  #matchPanel.normal-okey.table-theme-classic .nok-station-left .player-seat {
    left: calc(
      var(--classic-profile-side-rack-anchor) -
      var(--classic-profile-side-rack-card-overlap)
    ) !important;
    right: auto !important;
    transform: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-right .player-seat {
    left: auto !important;
    right: max(
      calc(
        var(--classic-profile-side-rack-anchor) -
        var(--classic-profile-side-rack-card-overlap)
      ),
      var(--classic-profile-side-right-chat-safe)
    ) !important;
    transform: none !important;
  }

  /* Preserve the exact TOP/BOTTOM centerline.  Only BOTTOM receives the
     measured lower-band drop; the own rack remains untouched. */
  #matchPanel.normal-okey.table-theme-classic .nok-station-top .player-seat {
    top: 0 !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-bottom #seat1 {
    /* #seat1 is the only bottom profile.  Keep the anchor state-independent
       so occupied, empty, own, and active classes cannot move it. */
    top: var(--classic-profile-bottom-drop) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
}
/* WAVE-CLASSIC_THEME_PROFILE_LIVE_POSITION_FINALIZATION_END */

/* WAVE-CLASSIC_THEME_PROFILE_TYPOGRAPHY_AND_RIGHT_VISUAL_ANCHOR_FINAL_FIX_START
   Final typography and state-independent anchor contract.  Profile, avatar,
   identity, rack, chat, and bottom-menu dimensions remain owned elsewhere. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic .seat-identity strong {
    display: block !important;
    width: 100% !important;
    max-width: calc(102px * var(--classic-reference-scale-x)) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #fff4df !important;
    font-family: Calibri, "Carlito", Arial, sans-serif !important;
    font-size: calc(19.2px * var(--classic-reference-scale-x)) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .seat-identity .player-score {
    display: block !important;
    max-width: calc(102px * var(--classic-reference-scale-x)) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #ffd27c !important;
    font-family: Calibri, "Carlito", Arial, sans-serif !important;
    font-size: calc(15.36px * var(--classic-reference-scale-x)) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .seat-identity {
    gap: 0 !important;
    padding-top: calc(2px * var(--classic-reference-scale-y)) !important;
    padding-bottom: calc(2px * var(--classic-reference-scale-y)) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .seat-identity > small {
    line-height: 1 !important;
  }

  /* Empty seats center their own identity copy inside the profile frame;
     occupied seats keep the left-reading layout and shift only the text
     group by the requested 5px.  Avatar and outer seat geometry stay fixed. */
  #matchPanel.normal-okey.table-theme-classic .player-seat:not(.has-player) .seat-identity {
    align-items: center !important;
    justify-content: center !important;
    padding-left: 0 !important;
    text-align: center !important;
  }

  #matchPanel.normal-okey.table-theme-classic .player-seat.has-player .seat-identity {
    align-items: flex-start !important;
    justify-content: center !important;
    padding-left: 5px !important;
    text-align: left !important;
  }

  /* The historical station-specific rules above use !important for the
     compact 14px/10px profile text.  These occupied-seat selectors are
     intentionally more specific and terminal, so the canonical 19.2px/15.36px
     live typography wins without forcing empty-seat copy to that size. */
  #matchPanel.normal-okey.table-theme-classic .nok-station-top .player-seat.has-player .seat-identity strong,
  #matchPanel.normal-okey.table-theme-classic .nok-station-left .player-seat.has-player .seat-identity strong,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .player-seat.has-player .seat-identity strong,
  #matchPanel.normal-okey.table-theme-classic .nok-station-bottom .player-seat.has-player .seat-identity strong {
    max-width: calc(102px * var(--classic-reference-scale-x)) !important;
    font-family: Calibri, "Carlito", Arial, sans-serif !important;
    font-size: calc(19.2px * var(--classic-reference-scale-x)) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-top .player-seat.has-player .seat-identity > small.player-score,
  #matchPanel.normal-okey.table-theme-classic .nok-station-left .player-seat.has-player .seat-identity > small.player-score,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .player-seat.has-player .seat-identity > small.player-score,
  #matchPanel.normal-okey.table-theme-classic .nok-station-bottom .player-seat.has-player .seat-identity > small.player-score {
    max-width: calc(102px * var(--classic-reference-scale-x)) !important;
    font-family: Calibri, "Carlito", Arial, sans-serif !important;
    font-size: calc(15.36px * var(--classic-reference-scale-x)) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  /* The same geometry applies to occupied, own, current-turn, and empty
     seats because the state classes do not own placement.  Reassert only the
     already verified side anchors, including the 20px+ chat safety clamp. */
  #matchPanel.normal-okey.table-theme-classic .nok-station-left .player-seat,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .player-seat {
    top: var(--classic-profile-side-profile-top) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-left .player-seat {
    left: calc(
      var(--classic-profile-side-rack-anchor) -
      var(--classic-profile-side-rack-card-overlap)
    ) !important;
    right: auto !important;
    transform: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-right .player-seat {
    left: auto !important;
    right: max(
      calc(
        var(--classic-profile-side-rack-anchor) -
        var(--classic-profile-side-rack-card-overlap)
      ),
      var(--classic-profile-side-right-chat-safe)
    ) !important;
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic .player-seat.active .seat-identity {
    animation: none !important;
  }
}
/* WAVE-CLASSIC_THEME_PROFILE_TYPOGRAPHY_AND_RIGHT_VISUAL_ANCHOR_FINAL_FIX_END */

/* WAVE-CLASSIC_THEME_MODERN_DISCARD_SINGLE_STACK_REFERENCE_ALIGNMENT_START
   Modern uses one fixed stack per seat.  These four anchors reuse the
   ATILAN TAS.png centers normalized to the unchanged 1020x418 gameBoard plane;
   they do not move profiles, furniture, racks, or action controls. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic #discardSeat1,
  #matchPanel.normal-okey.table-theme-classic #discardSeat2,
  #matchPanel.normal-okey.table-theme-classic #discardSeat3,
  #matchPanel.normal-okey.table-theme-classic #discardSeat4,
  #matchPanel.normal-okey.table-theme-modern #discardSeat1,
  #matchPanel.normal-okey.table-theme-modern #discardSeat2,
  #matchPanel.normal-okey.table-theme-modern #discardSeat3,
  #matchPanel.normal-okey.table-theme-modern #discardSeat4 {
    inset: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
  }

  /* BOTTOM: black 4 reference center. */
  #matchPanel.normal-okey.table-theme-classic #discardSeat1 {
    left: 80.2451% !important;
    top: 59.2105% !important;
  }
  #matchPanel.normal-okey.table-theme-modern #discardSeat1 {
    left: 75.7571% !important;
    top: 66.9245% !important;
  }

  /* RIGHT: blue 8 reference center. */
  #matchPanel.normal-okey.table-theme-classic #discardSeat2 {
    left: 76.2745% !important;
    top: 11.1244% !important;
  }
  #matchPanel.normal-okey.table-theme-modern #discardSeat2 {
    left: 69.4022% !important;
    top: 24.7923% !important;
  }

  /* TOP: red 6 reference center. */
  #matchPanel.normal-okey.table-theme-classic #discardSeat3 {
    left: 28.6765% !important;
    top: 11.0048% !important;
  }
  #matchPanel.normal-okey.table-theme-modern #discardSeat3 {
    left: 25.1470% !important;
    top: 23.7488% !important;
  }

  /* LEFT: blue 9 reference center. */
  #matchPanel.normal-okey.table-theme-classic #discardSeat4 {
    left: 23.1863% !important;
    top: 59.2105% !important;
  }
  #matchPanel.normal-okey.table-theme-modern #discardSeat4 {
    left: 19.0784% !important;
    top: 67.8376% !important;
  }

  /* The live DOM contract is .seat-discards > .discard-stack.  Keep the
     optional modern-discard-stack class as a JS marker, but make the
     presentation rule apply to the real production container itself. */
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation {
    /* 1.5cm at the canonical reference scale, expressed in the existing
       Classic render scale rather than changing any table-local anchor. */
    --classic-discard-common-y-offset: calc(56.692913px * var(--classic-reference-scale-y));
  }

  #matchPanel.normal-okey.table-theme-classic #discardSeat1,
  #matchPanel.normal-okey.table-theme-classic #discardSeat2,
  #matchPanel.normal-okey.table-theme-classic #discardSeat3,
  #matchPanel.normal-okey.table-theme-classic #discardSeat4 {
    transform: translate(-50%, calc(-50% + var(--classic-discard-common-y-offset))) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .discard-stack,
  #matchPanel.normal-okey.table-theme-modern .discard-stack {
    display: block !important;
    position: relative !important;
    flex: none !important;
    gap: 0 !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
    width: 45px !important;
    height: 62px !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  #matchPanel.normal-okey.table-theme-classic .seat-discards,
  #matchPanel.normal-okey.table-theme-modern .seat-discards {
    display: block !important;
    flex: none !important;
    gap: 0 !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
    align-items: initial !important;
    justify-content: initial !important;
  }

  #matchPanel.normal-okey.table-theme-classic .discard-stack .board-tile,
  #matchPanel.normal-okey.table-theme-modern .discard-stack .board-tile {
    position: absolute !important;
    inset: auto !important;
    left: 0 !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    display: block !important;
    float: none !important;
    transform: none !important;
    z-index: var(--discard-z-index, 1) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .discard-stack .discard-stack-count,
  #matchPanel.normal-okey.table-theme-modern .discard-stack .discard-stack-count {
    position: absolute !important;
    left: calc(100% + 6px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #fff0c5 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .7) !important;
    pointer-events: none !important;
  }
}
/* WAVE-CLASSIC_THEME_MODERN_DISCARD_SINGLE_STACK_REFERENCE_ALIGNMENT_END */

/* WAVE-CLASSIC_THEME_STOCK_LAYOUT_USE_YER_TAS_REFERENCE_START
   YER_TAS.png supplies the extracted stock pixels and the approved layout:
   four horizontal five-tile groups above one draw group and four horizontal
   groups below it.  The older,
   more-specific pile-box rule constrained the live five-stack to 52x48px,
   while the generic terminal rule was 272px wide; that cascade left the
   reference rows compressed and visually displaced.  This terminal block
   resolves that conflict only for Classic five-stack presentation. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic .nok-pile-box .nok-draw-stack[data-stock-mode="five-stack"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: calc(272px * var(--classic-reference-scale-x)) !important;
    min-width: calc(272px * var(--classic-reference-scale-x)) !important;
    min-height: 0 !important;
    height: auto !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-pile-box .nok-draw-stack[data-stock-mode="five-stack"] .stock-stack-row {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: flex-end !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-pile-box .nok-draw-stack[data-stock-mode="five-stack"] .stock-stack-row[data-classic-row="bottom"] {
    flex-direction: row-reverse !important;
    margin-top: calc(32px * var(--classic-reference-scale-y)) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-pile-box .nok-draw-stack[data-stock-mode="five-stack"] .stock-stack-row[data-classic-row="overflow"] {
    flex-direction: row-reverse !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-pile-box .nok-draw-stack[data-stock-mode="five-stack"] .stock-stack-image.stock-stack-five {
    display: block !important;
    flex: 0 0 auto !important;
    width: calc(60px * var(--classic-reference-scale-x)) !important;
    min-width: calc(60px * var(--classic-reference-scale-x)) !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    margin: 0 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-pile-box .nok-draw-stack[data-stock-mode="single-stack"] .stock-stack-image.stock-stack-single {
    width: calc(60px * var(--classic-reference-scale-x)) !important;
    min-width: calc(60px * var(--classic-reference-scale-x)) !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
  }
}
/* WAVE-CLASSIC_THEME_STOCK_LAYOUT_USE_YER_TAS_REFERENCE_END */

/* WAVE-CLASSIC_THEME_YER_TAS_LEGACY_STOCK_PAINT_SUPPRESSION_START
   The live Classic page still received the old stock artwork from the
   station-specific opponent-rack rules above.  Those rules are more
   specific than the earlier generic cleanup, so they continued painting
   the five-across top strip and the repeat-y side strips.  Keep the live
   opponent-rack nodes/data for participant hand state, but remove only
   their legacy Classic stock paint. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic .nok-station-top .opponent-rack,
  #matchPanel.normal-okey.table-theme-classic .nok-station-left .opponent-rack,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .opponent-rack {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-station-top .opponent-rack::before,
  #matchPanel.normal-okey.table-theme-classic .nok-station-top .opponent-rack::after,
  #matchPanel.normal-okey.table-theme-classic .nok-station-left .opponent-rack::before,
  #matchPanel.normal-okey.table-theme-classic .nok-station-left .opponent-rack::after,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .opponent-rack::before,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .opponent-rack::after,
  #matchPanel.normal-okey.table-theme-classic .nok-station-bottom .opponent-rack::before,
  #matchPanel.normal-okey.table-theme-classic .nok-station-bottom .opponent-rack::after {
    content: none !important;
    display: none !important;
    visibility: hidden !important;
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
  }
}
/* WAVE-CLASSIC_THEME_YER_TAS_LEGACY_STOCK_PAINT_SUPPRESSION_END */

/* WAVE-CLASSIC_THEME_YER_TAS_FINAL_POSITIONING_FROM_LIVE_SCREEN_START
   YER_TAS.png felt envelope: y=225..680 in the 1536x1024 reference.  The
   lower 121px of the locked Classic board is reserved for the local profile
   and rack, so the reference is normalized into the protected stock plane
   y=0..297.  The resulting visible content starts are about 13px, 96px and
   266px after the additional one-centimetre downward BOTTOM adjustment.  The
   previous flex column instead stacked all rows at one flow
   origin, which pushed the bottom group into the player/rack band. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic
    .nok-center[data-classic-stock-state="classic"] .nok-pile-box {
    left: 0 !important;
    top: 0 !important;
    width: calc(272px * var(--classic-reference-scale-x)) !important;
    height: calc(350px * var(--classic-reference-scale-y)) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic
    .nok-center[data-classic-stock-state="classic"] .nok-draw-stack[data-stock-mode="five-stack"] {
    position: absolute !important;
    left: 0 !important;
    top: calc(-52px * var(--classic-reference-scale-y)) !important;
    width: calc(272px * var(--classic-reference-scale-x)) !important;
    min-width: calc(272px * var(--classic-reference-scale-x)) !important;
    height: calc(322px * var(--classic-reference-scale-y)) !important;
    min-height: calc(322px * var(--classic-reference-scale-y)) !important;
    display: block !important;
    overflow: visible !important;
  }

  #matchPanel.normal-okey.table-theme-classic
    .nok-center[data-classic-stock-state="classic"] .nok-draw-stack[data-stock-mode="five-stack"] .stock-stack-row {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    height: calc(106px * var(--classic-reference-scale-y)) !important;
    min-height: calc(106px * var(--classic-reference-scale-y)) !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    white-space: nowrap !important;
  }

  #matchPanel.normal-okey.table-theme-classic
    .nok-center[data-classic-stock-state="classic"] .nok-draw-stack[data-stock-mode="five-stack"] .stock-stack-row[data-classic-row="center"] {
    /* Keep the full 8-tile image at its existing visual position while
       making the row's bottom the shared baseline for every shorter asset:
       83px original top + (154px full asset - 106px row baseline) = 131px. */
    top: calc(131px * var(--classic-reference-scale-y)) !important;
    align-items: flex-end !important;
  }

  #matchPanel.normal-okey.table-theme-classic
    .nok-center[data-classic-stock-state="classic"] .nok-draw-stack[data-stock-mode="five-stack"] .stock-stack-row[data-classic-row="bottom"] {
    top: calc(252.5905511812px * var(--classic-reference-scale-y)) !important;
    flex-direction: row !important;
    margin-top: 0 !important;
  }

  #matchPanel.normal-okey.table-theme-classic
    .nok-center[data-classic-stock-state="classic"] .nok-draw-stack[data-stock-mode="five-stack"] .stock-stack-row .stock-stack-image.stock-stack-five {
    flex: 0 0 calc(60px * var(--classic-reference-scale-x)) !important;
    width: calc(60px * var(--classic-reference-scale-x)) !important;
    min-width: calc(60px * var(--classic-reference-scale-x)) !important;
    max-width: calc(60px * var(--classic-reference-scale-x)) !important;
    height: calc(106px * var(--classic-reference-scale-y)) !important;
    min-height: calc(106px * var(--classic-reference-scale-y)) !important;
    max-height: calc(106px * var(--classic-reference-scale-y)) !important;
    aspect-ratio: 60 / 106 !important;
    object-fit: fill !important;
    margin: 0 !important;
  }

  #matchPanel.normal-okey.table-theme-classic
    .nok-center[data-classic-stock-state="classic"] .nok-draw-stack[data-stock-mode="five-stack"] .stock-stack-row[data-classic-row="center"] .stock-stack-image.stock-stack-center {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: fill !important;
  }

  #matchPanel.normal-okey.table-theme-classic
    .nok-center[data-classic-stock-state="classic"] .nok-draw-stack[data-stock-mode="five-stack"] .stock-stack-row .stock-stack-image.stock-stack-partial {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: fill !important;
  }

  #matchPanel.normal-okey.table-theme-classic
    .nok-center[data-classic-stock-state="classic"] .nok-draw-stack[data-stock-mode="five-stack"] .stock-stack-row[data-classic-row="overflow"] {
    display: none !important;
  }

  /* The indicator tile is the only indicator paint.  The historic
     .center-indicator panel was a visible backing box, so it appeared as an
     extra layer beside/under the real Deste5 stack.  Keep the DOM/state node,
     but make its wrapper transparent and let the independent tile sit on the
     Deste5 anchor. */
  #matchPanel.normal-okey.table-theme-classic
    .nok-center[data-classic-stock-state="classic"] .center-indicator[data-indicator-visible="true"] {
    display: grid !important;
    width: calc(60px * var(--classic-reference-scale-x)) !important;
    min-width: calc(60px * var(--classic-reference-scale-x)) !important;
    height: calc(84px * var(--classic-reference-scale-y)) !important;
    min-height: calc(84px * var(--classic-reference-scale-y)) !important;
    gap: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  #matchPanel.normal-okey.table-theme-classic
    .nok-center[data-classic-stock-state="classic"] .center-indicator[data-indicator-visible="true"] > small {
    display: none !important;
  }
}
/* WAVE-CLASSIC_THEME_YER_TAS_FINAL_POSITIONING_FROM_LIVE_SCREEN_END */

/* STAGE_CLASSIC_GLOSSY_TILE_SURFACE_DEFAULT_START
   The approved glossy treatment is a material overlay on the existing face
   tile assets. It never paints closed stock backs and never replaces the
   established number/pip artwork. */
#matchPanel.normal-okey[data-tile-surface="glossy"] .tile:not(.flipped),
#matchPanel.normal-okey[data-tile-surface="glossy"] .board-tile,
#matchPanel.normal-okey[data-tile-surface="glossy"] .center-indicator-tile {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background: linear-gradient(145deg, #fffaf0 0%, #f6e8cf 56%, #e2c49c 100%) !important;
  border-color: rgba(174, 116, 47, .58) !important;
  box-shadow:
    0 5px 10px rgba(58, 25, 8, .34),
    inset 0 1px 1px rgba(255, 255, 255, .94),
    inset 0 -5px 8px rgba(128, 72, 20, .16) !important;
}

#matchPanel.normal-okey[data-tile-surface="glossy"] .tile.tile-asset > img,
#matchPanel.normal-okey[data-tile-surface="glossy"] .board-tile.tile-asset > img,
#matchPanel.normal-okey[data-tile-surface="glossy"] .center-indicator-tile > img {
  position: relative !important;
  z-index: 0 !important;
  filter: saturate(.96) contrast(1.03) brightness(1.025) drop-shadow(0 2px 2px rgba(63, 29, 8, .16)) !important;
}

#matchPanel.normal-okey[data-tile-surface="glossy"] .tile:not(.flipped)::before,
#matchPanel.normal-okey[data-tile-surface="glossy"] .board-tile::before,
#matchPanel.normal-okey[data-tile-surface="glossy"] .center-indicator-tile::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 2 !important;
  top: 1px !important;
  right: 3px !important;
  left: 3px !important;
  height: 17% !important;
  border-radius: inherit !important;
  background: linear-gradient(103deg, rgba(255, 255, 255, .48), rgba(255, 255, 255, .16) 42%, transparent 86%) !important;
  opacity: .72 !important;
  pointer-events: none !important;
}

#matchPanel.normal-okey[data-tile-surface="glossy"] .tile:not(.flipped)::after,
#matchPanel.normal-okey[data-tile-surface="glossy"] .board-tile::after,
#matchPanel.normal-okey[data-tile-surface="glossy"] .center-indicator-tile::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 2 !important;
  inset: 0 !important;
  border: 1px solid rgba(255, 248, 224, .56) !important;
  border-radius: inherit !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, .12), transparent 24% 78%, rgba(255, 255, 255, .08)) !important;
  box-shadow: inset 0 -1px rgba(111, 59, 15, .18) !important;
  pointer-events: none !important;
}

#matchPanel.normal-okey[data-tile-surface="normal"] .tile:not(.flipped),
#matchPanel.normal-okey[data-tile-surface="normal"] .board-tile,
#matchPanel.normal-okey[data-tile-surface="normal"] .center-indicator-tile {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background: linear-gradient(145deg, #f7eee1 0%, #eee0cc 58%, #d9c2a3 100%) !important;
  border-color: rgba(166, 132, 91, .66) !important;
  box-shadow:
    0 3px 7px rgba(61, 39, 21, .28),
    inset 1px 1px 2px rgba(255, 252, 242, .68),
    inset -2px -3px 5px rgba(111, 74, 38, .14) !important;
}

#matchPanel.normal-okey[data-tile-surface="normal"] .tile.tile-asset:not(.flipped) > img,
#matchPanel.normal-okey[data-tile-surface="normal"] .board-tile.tile-asset > img,
#matchPanel.normal-okey[data-tile-surface="normal"] .center-indicator-tile > img {
  position: relative !important;
  z-index: 0 !important;
  filter: saturate(.88) contrast(1.015) brightness(.985) drop-shadow(0 1px 1px rgba(61, 39, 21, .12)) !important;
}

/* NORMAL/MAT has its own diffuse ceramic light pass. It is deliberately broad
   and low contrast, so it reads as porcelain rather than a disabled glossy
   layer. */
#matchPanel.normal-okey[data-tile-surface="normal"] .tile:not(.flipped)::before,
#matchPanel.normal-okey[data-tile-surface="normal"] .board-tile::before,
#matchPanel.normal-okey[data-tile-surface="normal"] .center-indicator-tile::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 2 !important;
  top: 2px !important;
  right: 3px !important;
  left: 3px !important;
  height: 38% !important;
  border-radius: inherit !important;
  background: linear-gradient(180deg, rgba(255, 252, 242, .18), rgba(255, 252, 242, .07) 48%, transparent 100%) !important;
  opacity: .72 !important;
  pointer-events: none !important;
}

#matchPanel.normal-okey[data-tile-surface="normal"] .tile:not(.flipped)::after,
#matchPanel.normal-okey[data-tile-surface="normal"] .board-tile::after,
#matchPanel.normal-okey[data-tile-surface="normal"] .center-indicator-tile::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 2 !important;
  inset: 0 !important;
  border: 1px solid rgba(255, 249, 232, .42) !important;
  border-radius: inherit !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, .05), transparent 38% 74%, rgba(104, 67, 32, .055)) !important;
  box-shadow: inset 0 -1px rgba(112, 73, 35, .16) !important;
  pointer-events: none !important;
}

/* The false Okey changes face content only. In Classic NORMAL/MAT it uses the
   exact same ceramic surface values as numbered faces; only the logo image is
   different. */
#matchPanel.normal-okey[data-tile-surface="normal"] .tile.false.tile-asset,
#matchPanel.normal-okey[data-tile-surface="normal"] .board-tile.false.tile-asset,
#matchPanel.normal-okey[data-tile-surface="normal"] .center-indicator-tile.false.tile-asset {
  border-color: rgba(166, 132, 91, .66) !important;
  box-shadow:
    0 3px 7px rgba(61, 39, 21, .28),
    inset 1px 1px 2px rgba(255, 252, 242, .68),
    inset -2px -3px 5px rgba(111, 74, 38, .14) !important;
}

/* Final reference lock: these tiles already contain the extracted reference
   body plus the preserved canonical number/logo pixels. Do not paint a second
   CSS material over the production reference asset. */
#matchPanel.normal-okey .classic-atlas-tile {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  overflow: visible !important;
}

#matchPanel.normal-okey .classic-atlas-tile::before,
#matchPanel.normal-okey .classic-atlas-tile::after {
  content: none !important;
  display: none !important;
}

#matchPanel.normal-okey .classic-atlas-tile > img.classic-atlas-tile-image {
  position: relative !important;
  z-index: 0 !important;
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* STAGE_CLASSIC_OKEY_TILE_ATLAS_DIRECT_ASSET_LOCK_START
   Atlas PNGs contain the complete face. These higher-specificity rules
   neutralize all earlier surface-paint selectors for atlas-backed faces;
   CSS does not recreate or recolor the tile body. */
#matchPanel.normal-okey[data-tile-surface="glossy"] .tile.tile-asset.classic-atlas-tile:not(.flipped),
#matchPanel.normal-okey[data-tile-surface="normal"] .tile.tile-asset.classic-atlas-tile:not(.flipped),
#matchPanel.normal-okey[data-tile-surface] button.tile.tile-asset.classic-atlas-tile:not(.flipped),
#matchPanel.normal-okey .board-tile.tile-asset.classic-atlas-tile,
#matchPanel.normal-okey .center-indicator-tile.classic-atlas-tile {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  isolation: auto !important;
  overflow: visible !important;
}

#matchPanel.normal-okey[data-tile-surface="glossy"] .tile.tile-asset.classic-atlas-tile:not(.flipped)::before,
#matchPanel.normal-okey[data-tile-surface="glossy"] .tile.tile-asset.classic-atlas-tile:not(.flipped)::after,
#matchPanel.normal-okey[data-tile-surface="normal"] .tile.tile-asset.classic-atlas-tile:not(.flipped)::before,
#matchPanel.normal-okey[data-tile-surface="normal"] .tile.tile-asset.classic-atlas-tile:not(.flipped)::after,
#matchPanel.normal-okey .board-tile.tile-asset.classic-atlas-tile::before,
#matchPanel.normal-okey .board-tile.tile-asset.classic-atlas-tile::after,
#matchPanel.normal-okey .center-indicator-tile.classic-atlas-tile::before,
#matchPanel.normal-okey .center-indicator-tile.classic-atlas-tile::after {
  content: none !important;
  display: none !important;
}

#matchPanel.normal-okey[data-tile-surface="glossy"] .tile.tile-asset.classic-atlas-tile > img.classic-atlas-tile-image,
#matchPanel.normal-okey[data-tile-surface="normal"] .tile.tile-asset.classic-atlas-tile > img.classic-atlas-tile-image,
#matchPanel.normal-okey .board-tile.tile-asset.classic-atlas-tile > img.classic-atlas-tile-image,
#matchPanel.normal-okey .center-indicator-tile.classic-atlas-tile > img.classic-atlas-tile-image {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

#matchPanel.normal-okey[data-tile-surface="glossy"] .tile.false.tile-asset.classic-atlas-tile,
#matchPanel.normal-okey[data-tile-surface="normal"] .tile.false.tile-asset.classic-atlas-tile,
#matchPanel.normal-okey .board-tile.false.tile-asset.classic-atlas-tile,
#matchPanel.normal-okey .center-indicator-tile.false.classic-atlas-tile {
  border: 0 !important;
  box-shadow: none !important;
}

/* The Classic rack has a later, ID-heavy legacy tile contract. Keep the
   atlas button itself transparent at that same specificity so replacing the
   rack children cannot reintroduce the old cream body or its shadow. The
   interaction transforms and transitions are intentionally not overridden. */
#matchPanel.normal-okey.table-theme-classic .nok-own-station .normal-okey-rack-zone[data-rack-skin] > #handTiles > .rack-slot > button.tile.tile-asset.classic-atlas-tile:not(.flipped),
#matchPanel.normal-okey.table-theme-classic .nok-own-station .normal-okey-rack-zone[data-rack-skin] > #handTiles > .rack-slot > button.tile.tile-asset.classic-atlas-tile:not(.flipped):hover:not(:disabled),
#matchPanel.normal-okey.table-theme-classic .nok-own-station .normal-okey-rack-zone[data-rack-skin] > #handTiles > .rack-slot > button.tile.tile-asset.classic-atlas-tile.selected:not(.flipped),
#matchPanel.normal-okey.table-theme-classic .nok-own-station .normal-okey-rack-zone[data-rack-skin] > #handTiles > .rack-slot > button.tile.tile-asset.classic-atlas-tile.dragging:not(.flipped) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

#matchPanel.normal-okey.table-theme-classic .nok-own-station .normal-okey-rack-zone[data-rack-skin] > #handTiles > .rack-slot > button.tile.tile-asset.classic-atlas-tile:not(.flipped)::before,
#matchPanel.normal-okey.table-theme-classic .nok-own-station .normal-okey-rack-zone[data-rack-skin] > #handTiles > .rack-slot > button.tile.tile-asset.classic-atlas-tile:not(.flipped)::after {
  content: none !important;
  display: none !important;
}

#matchPanel.normal-okey.table-theme-classic .nok-own-station .normal-okey-rack-zone[data-rack-skin] > #handTiles > .rack-slot > button.tile.tile-asset.classic-atlas-tile:not(.flipped) > img.classic-atlas-tile-image {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}
/* STAGE_CLASSIC_OKEY_TILE_ATLAS_DIRECT_ASSET_LOCK_END */

/* STAGE_CLASSIC_INDICATOR_OPEN_STOCK_TOP_FACE_FIX_START
   The authoritative indicator is a stock-top presentation: the existing
   single closed stock-top shell supplies the outer footprint and only the
   face marks are painted from the canonical indicator atlas asset.  The
   player/rack tile shell is never reused for this Classic layer. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic
    .nok-center[data-classic-stock-state="classic"]
    .center-indicator[data-indicator-visible="true"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic
    .nok-center[data-classic-stock-state="classic"]
    .classic-final-stack-anchor {
    display: block !important;
    overflow: visible !important;
  }

  #matchPanel.normal-okey.table-theme-classic
    .nok-center
    .classic-final-stack-anchor
    .stock-stack-sixth-layer {
    position: absolute !important;
    left: 0 !important;
    bottom: 100% !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
    overflow: visible !important;
    pointer-events: none !important;
    line-height: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic
    .nok-center
    .classic-final-stack-anchor
    .stock-stack-sixth-shell {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  #matchPanel.normal-okey.table-theme-classic
    .nok-center
    .classic-final-stack-anchor
    .stock-stack-sixth-face {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic
    .nok-center
    .classic-final-stack-anchor
    .stock-stack-sixth-face-fallback {
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    place-items: center !important;
    color: #241b16 !important;
    font: 700 1em/1 sans-serif !important;
    pointer-events: none !important;
  }
}
/* STAGE_CLASSIC_INDICATOR_OPEN_STOCK_TOP_FACE_FIX_END */

/* STAGE_CLASSIC_FINAL_STACK_OPEN_SIXTH_INDICATOR_ONLY_START
   The locked Ekol-left Deste5 remains one stack element.  Its existing
   six-closed shell stays in place while the authoritative indicator face is
   painted only inside that same sixth tile. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic
    .nok-center[data-classic-stock-state="classic"]
    .center-indicator[data-classic-indicator-presentation="sixth-open-tile-in-stack"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic
    .nok-center[data-classic-stock-state="classic"]
    .nok-draw-stack[data-stock-mode="five-stack"]
    .stock-stack-row[data-classic-row="bottom"]
    .stock-stack-image.stock-stack-center[data-classic-source-stack="5"] {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: fill !important;
    align-self: flex-end !important;
    overflow: visible !important;
  }
}
/* STAGE_CLASSIC_FINAL_STACK_OPEN_SIXTH_INDICATOR_ONLY_END */

/* STAGE_CLASSIC_INDICATOR_EXACT_EKOL_LEFT_HORIZONTAL_SIXTH_TILE_FIX_START
   The indicator anchor is the first Deste5 block in the lower horizontal
   group, which is the left side of the Ekol-facing stock row in the approved
   reference.  Preserve the existing row geometry; this only makes the
   already-approved DOM order explicit for the locked indicator anchor. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic
    .nok-center[data-classic-stock-state="classic"]
    .nok-draw-stack[data-stock-mode="five-stack"]
    .stock-stack-row[data-classic-row="bottom"] {
    flex-direction: row !important;
  }
}
/* STAGE_CLASSIC_INDICATOR_EXACT_EKOL_LEFT_HORIZONTAL_SIXTH_TILE_FIX_END */

/* STAGE_CLASSIC_INDICATOR_SOURCE5_TOP_SIXTH_OPEN_FIX_START
   Source 5 keeps the exact stock-stack geometry above.  Its five-closed
   shell reserves the top asset-space band for the authoritative in-place
   sixth, open indicator layer; no sibling or floating indicator is created. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic
    .nok-center[data-classic-stock-state="classic"]
    .nok-draw-stack[data-stock-mode="five-stack"]
    .stock-stack-row[data-classic-row="bottom"]
    .stock-stack-source-five {
    position: relative !important;
    overflow: visible !important;
    line-height: 0 !important;
  }

  #matchPanel.normal-okey.table-theme-classic
    .nok-center[data-classic-stock-state="classic"]
    .nok-draw-stack[data-stock-mode="five-stack"]
    .stock-stack-row[data-classic-row="bottom"]
    .stock-stack-source-five > .stock-stack-source-five-base {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: fill !important;
    pointer-events: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic
    .nok-center[data-classic-stock-state="classic"]
    .stock-stack-source-five > .classic-source-five-indicator-face {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 32.7868852459% !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
    overflow: hidden !important;
    pointer-events: none !important;
    z-index: 2 !important;
    line-height: 0 !important;
  }

  #matchPanel.normal-okey.table-theme-classic
    .nok-center[data-classic-stock-state="classic"]
    .stock-stack-source-five > .classic-source-five-indicator-face
    > .classic-source-five-indicator-crop
    > img.classic-atlas-tile-image {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
    pointer-events: none !important;
  }
}
/* STAGE_CLASSIC_INDICATOR_SOURCE5_TOP_SIXTH_OPEN_FIX_END */

/* STAGE_CLASSIC_INDICATOR_BBOX_CROP_SHARPNESS_FIX_START
   The 0,0,60,40 bbox is in source5-composite asset space, not canonical
   atlas-image pixel space.  It defines the locked top-layer viewport.  The
   canonical indicator image is cropped inside that viewport with
   aspect-ratio-preserving object-fit: cover; the host footprint is untouched. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic
    .nok-center[data-classic-stock-state="classic"]
    .stock-stack-source-five > .classic-source-five-indicator-face
    > .classic-source-five-indicator-crop {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    overflow: hidden !important;
    aspect-ratio: var(--classic-indicator-bbox-width) / var(--classic-indicator-bbox-height) !important;
    pointer-events: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic
    .nok-center[data-classic-stock-state="classic"]
    .stock-stack-source-five > .classic-source-five-indicator-face
    > .classic-source-five-indicator-crop
    > img.classic-atlas-tile-image {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
    image-rendering: auto !important;
    pointer-events: none !important;
  }
}
/* STAGE_CLASSIC_INDICATOR_BBOX_CROP_SHARPNESS_FIX_END */

/* STAGE_CLASSIC_INDICATOR_INNER_IMAGE_ASPECT_CROP_FIX_START
   The crop viewport remains the locked source-five top-layer footprint.  The
   canonical face image must size from its intrinsic ratio, then be centered
   and clipped by that viewport; forcing both image axes to 100% would
   recreate the non-uniform full-image squeeze. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic
    .nok-center[data-classic-stock-state="classic"]
    .stock-stack-source-five > .classic-source-five-indicator-face
    > .classic-source-five-indicator-crop
    > img.classic-atlas-tile-image {
    position: absolute !important;
    inset: auto !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: translate(-50%, -50%) !important;
    transform-origin: center center !important;
    image-rendering: auto !important;
    pointer-events: none !important;
  }
}
/* STAGE_CLASSIC_INDICATOR_INNER_IMAGE_ASPECT_CROP_FIX_END */

/* STAGE_CLASSIC_INDICATOR_SOURCE5_ZERO_HEIGHT_WRAPPER_FIX_START
   The source-five wrapper contains an in-place face overlay, so both of its
   original children were previously out of normal flow.  Keep the existing
   source-five footprint, let the composite base image provide wrapper sizing,
   and leave only the authoritative face as an absolute overlay. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic
    .nok-center[data-classic-stock-state="classic"]
    .nok-draw-stack[data-stock-mode="five-stack"]
    .stock-stack-row[data-classic-row="bottom"]
    .stock-stack-row .stock-stack-image.stock-stack-five.stock-stack-source-five {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }

  #matchPanel.normal-okey.table-theme-classic
    .nok-center[data-classic-stock-state="classic"]
    .nok-draw-stack[data-stock-mode="five-stack"]
    .stock-stack-row[data-classic-row="bottom"]
    .stock-stack-row .stock-stack-image.stock-stack-five.stock-stack-source-five > .stock-stack-source-five-base {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    pointer-events: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic
    .nok-center[data-classic-stock-state="classic"]
    .nok-draw-stack[data-stock-mode="five-stack"]
    .stock-stack-row[data-classic-row="bottom"]
    .stock-stack-source-five > img.stock-stack-source-five-base {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
  }
}
/* STAGE_CLASSIC_INDICATOR_SOURCE5_ZERO_HEIGHT_WRAPPER_FIX_END */

/* STAGE_CLASSIC_INDICATOR_REFERENCE_VISUAL_ONLY_IMPLEMENTATION_START
   The source-five indicator uses a neutral shell extracted only from the
   reference's open indicator tile.  The number and dot remain live DOM
   content driven by state.indicator; no vertical canonical atlas image is
   stretched or cropped in this presentation. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic
    .nok-center[data-classic-stock-state="classic"]
    .stock-stack-source-five > .classic-source-five-indicator-face[data-reference-visual-template="warm-rummikub-indicator-red4-only"]
    > .classic-indicator-reference-shell {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: fill !important;
    object-position: center !important;
    transform: none !important;
    pointer-events: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic
    .nok-center[data-classic-stock-state="classic"]
    .stock-stack-source-five > .classic-source-five-indicator-face[data-reference-visual-template="warm-rummikub-indicator-red4-only"]
    > .classic-indicator-reference-content {
    position: absolute !important;
    inset: 7% 9% 6% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: calc(1px * var(--classic-reference-scale-y)) !important;
    overflow: hidden !important;
    color: var(--classic-indicator-face-color) !important;
    pointer-events: none !important;
    text-align: center !important;
  }

  #matchPanel.normal-okey.table-theme-classic
    .nok-center[data-classic-stock-state="classic"]
    .stock-stack-source-five > .classic-source-five-indicator-face[data-reference-visual-template="warm-rummikub-indicator-red4-only"]
    .classic-indicator-reference-number {
    display: block !important;
    max-width: 100% !important;
    color: var(--classic-indicator-face-color) !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: calc(17px * var(--classic-reference-scale-y)) !important;
    font-weight: 900 !important;
    line-height: .82 !important;
    letter-spacing: -.06em !important;
    text-shadow: 0 0 .35px currentColor !important;
    white-space: nowrap !important;
  }

  #matchPanel.normal-okey.table-theme-classic
    .nok-center[data-classic-stock-state="classic"]
    .stock-stack-source-five > .classic-source-five-indicator-face[data-reference-visual-template="warm-rummikub-indicator-red4-only"]
    .classic-indicator-reference-dot {
    display: block !important;
    flex: 0 0 auto !important;
    width: calc(7px * var(--classic-reference-scale-y)) !important;
    height: calc(4px * var(--classic-reference-scale-y)) !important;
    border-radius: 50% !important;
    background: var(--classic-indicator-face-color) !important;
    box-shadow: 0 0 .35px currentColor !important;
  }

  #matchPanel.normal-okey.table-theme-classic
    .nok-center[data-classic-stock-state="classic"]
    .stock-stack-source-five > .classic-source-five-indicator-face[data-reference-visual-template="warm-rummikub-indicator-red4-only"]
    > .classic-source-five-indicator-crop {
    display: none !important;
  }
}
/* STAGE_CLASSIC_INDICATOR_REFERENCE_VISUAL_ONLY_IMPLEMENTATION_END */

/* STAGE_CLASSIC_INDICATOR_EXACT_REFERENCE_RED4_PROOF_START
   Proof mode deliberately shows one raster extracted from the reference
   indicator only.  The old neutral shell and DOM number/dot composition are
   inactive on this render path. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic
    .nok-center[data-classic-stock-state="classic"]
    .stock-stack-source-five > .classic-source-five-indicator-face[data-reference-visual-template="exact-reference-red4-proof"]
    > .classic-indicator-reference-red4 {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
    pointer-events: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic
    .nok-center[data-classic-stock-state="classic"]
    .stock-stack-source-five > .classic-source-five-indicator-face[data-reference-visual-template="exact-reference-red4-proof"]
    > .classic-indicator-reference-shell,
  #matchPanel.normal-okey.table-theme-classic
    .nok-center[data-classic-stock-state="classic"]
    .stock-stack-source-five > .classic-source-five-indicator-face[data-reference-visual-template="exact-reference-red4-proof"]
    > .classic-indicator-reference-content {
    display: none !important;
  }
}
/* STAGE_CLASSIC_INDICATOR_EXACT_REFERENCE_RED4_PROOF_END */

@media (min-width: 901px) {
  #matchPanel.normal-okey[data-tile-surface] .nok-settings-panel > label.tile-surface-picker:not(.hidden):not([hidden]) {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    height: 24px !important;
    min-height: 24px !important;
    box-sizing: border-box !important;
    position: relative !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
  }
  #matchPanel.normal-okey[data-tile-surface] .nok-settings-panel > label.tile-surface-picker:not(.hidden):not([hidden])::before {
    content: "" !important;
    position: absolute !important;
    top: 5px !important;
    left: -3px !important;
    width: 1px !important;
    height: 14px !important;
    background: rgba(221, 173, 89, .25) !important;
    pointer-events: none !important;
  }
  #matchPanel.normal-okey[data-tile-surface] .nok-settings-panel > label.tile-surface-picker select {
    min-width: 0 !important;
    max-width: 104px !important;
    height: 24px !important;
    padding: 2px 4px !important;
    font-size: 9px !important;
  }
}
/* STAGE_CLASSIC_GLOSSY_TILE_SURFACE_DEFAULT_END */

/* STAGE_CLASSIC_RACK_TASK1_CONTIGUOUS_TILE_TRACK_FIX_START
   Canonical Classic horizontal grid contract.  The previous symmetric
   cap-width inset and its independent reference-scaled offset aligned the
   grid to hidden rack DOM geometry instead of the visible rack cap contract.
   The existing --classic-rack-cap is the source-level usable-lane inset used
   by the rack artwork.  Keep the right rail inset unchanged and add that
   existing cap only to the left grid origin.  The logical 8x2 grid remains,
   but its eight visual tracks use the unchanged button width multiplied by
   the unchanged 1.12 presentation transform; fractional 1fr stretching is
   therefore removed without changing the tile itself or its interaction. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic .nok-own-station
    .normal-okey-rack-zone[data-rack-skin] > #handTiles {
    --classic-own-rack-grid-inset: calc(var(--classic-own-rack-cap-width) + 3px);
    --classic-own-rack-grid-left-inset: calc(
      var(--classic-own-rack-grid-inset) + var(--classic-rack-cap)
    );
    --classic-own-rack-grid-right-inset: var(--classic-own-rack-grid-inset);
    --classic-own-rack-atlas-base-tile-width: min(
      44px,
      calc(56px * var(--classic-reference-scale-x))
    );
    --classic-own-rack-atlas-visual-track-pitch: calc(
      var(--classic-own-rack-atlas-base-tile-width) * 1.12
    );
    box-sizing: border-box !important;
    grid-template-columns: repeat(
      8,
      var(--classic-own-rack-atlas-visual-track-pitch)
    ) !important;
    column-gap: 0 !important;
    justify-content: center !important;
    padding-left: calc(
      var(--classic-own-rack-grid-left-inset)
    ) !important;
    padding-right: var(--classic-own-rack-grid-right-inset) !important;
  }
}
/* STAGE_CLASSIC_RACK_TASK1_CONTIGUOUS_TILE_TRACK_FIX_END */

/* STAGE_CLASSIC_LOCKED_CENTER_STOCK_ORIENTATION_RESTORE_START
   The center stock is a locked horizontal presentation. Reassert its
   direction and orientation only inside the Classic center stock scope so
   shared rack/tile rules cannot alter the source 1-8 visual order or rotate
   any stock image. This does not change stock coordinates, dimensions,
   assets, or draw traversal. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic
    .nok-center[data-classic-stock-state="classic"]
    .nok-draw-stack[data-stock-mode="five-stack"]
    .stock-stack-row {
    flex-direction: row !important;
    direction: ltr !important;
    writing-mode: horizontal-tb !important;
    transform: none !important;
    rotate: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic
    .nok-center[data-classic-stock-state="classic"]
    .nok-draw-stack[data-stock-mode="five-stack"]
    .stock-stack-row .stock-stack-image {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    rotate: none !important;
  }
}
/* STAGE_CLASSIC_LOCKED_CENTER_STOCK_ORIENTATION_RESTORE_END */

/* STAGE_CLASSIC_CENTER_STOCK_REFERENCE_IMAGE_DIRECT_USE_IMPLEMENTATION_START
   The normal five-stack uses only the approved reference-derived raster. Its
   intrinsic ratio is allowed to size the image; the existing stock slot and
   anchor remain unchanged. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic
    .nok-center[data-classic-stock-state="classic"]
    .nok-draw-stack[data-stock-mode="five-stack"]
    .stock-stack-row
    .stock-stack-image.stock-stack-five[data-classic-reference-five="true"] {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 70 / 117 !important;
    object-fit: contain !important;
    align-self: flex-end !important;
  }

  #matchPanel.normal-okey.table-theme-classic
    .nok-center[data-classic-stock-state="classic"]
    .stock-stack-source-five > .classic-source-five-indicator-face[data-reference-visual-template="reference-image-body-state-face"] {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 72 / 62 !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
    overflow: visible !important;
    pointer-events: none !important;
    z-index: 2 !important;
    line-height: 0 !important;
  }

  #matchPanel.normal-okey.table-theme-classic
    .nok-center[data-classic-stock-state="classic"]
    .stock-stack-source-five > .classic-source-five-indicator-face[data-reference-visual-template="reference-image-body-state-face"]
    > img.classic-source-five-indicator-body {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
    pointer-events: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic
    .nok-center[data-classic-stock-state="classic"]
    .stock-stack-source-five > .classic-source-five-indicator-face[data-reference-visual-template="reference-image-body-state-face"]
    > .classic-source-five-indicator-content {
    position: absolute !important;
    inset: 8% 25% 14% !important;
    display: block !important;
    overflow: hidden !important;
    background: transparent !important;
    pointer-events: none !important;
    line-height: 0 !important;
  }

  #matchPanel.normal-okey.table-theme-classic
    .nok-center[data-classic-stock-state="classic"]
    .stock-stack-source-five > .classic-source-five-indicator-face[data-reference-visual-template="reference-image-body-state-face"]
    > .classic-source-five-indicator-content > .classic-atlas-tile {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  #matchPanel.normal-okey.table-theme-classic
    .nok-center[data-classic-stock-state="classic"]
    .stock-stack-source-five > .classic-source-five-indicator-face[data-reference-visual-template="reference-image-body-state-face"]
    > .classic-source-five-indicator-content > .classic-atlas-tile > img.classic-atlas-tile-image {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: auto !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: translate(-50%, -50%) !important;
    transform-origin: center center !important;
    pointer-events: none !important;
  }

  /* The open sixth tile is one full glossy tile, not a white reference shell
     with a small face window.  Keep it inside the locked Source5 outer box. */
  #matchPanel.normal-okey.table-theme-classic
    .nok-center[data-classic-stock-state="classic"]
    .stock-stack-source-five > .classic-source-five-indicator-face[data-reference-visual-template="reference-image-body-state-face"] {
    overflow: hidden !important;
  }

  #matchPanel.normal-okey.table-theme-classic
    .nok-center[data-classic-stock-state="classic"]
    .stock-stack-source-five > .classic-source-five-indicator-face[data-reference-visual-template="reference-image-body-state-face"]
    > canvas.classic-source-five-indicator-canvas {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    transform: none !important;
    pointer-events: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic
    .nok-center[data-classic-stock-state="classic"]
    .stock-stack-source-five > .classic-source-five-indicator-face[data-reference-visual-template="reference-image-body-state-face"]
    > img.classic-source-five-indicator-reference-body,
  #matchPanel.normal-okey.table-theme-classic
    .nok-center[data-classic-stock-state="classic"]
    .stock-stack-source-five > .classic-source-five-indicator-face[data-reference-visual-template="reference-image-body-state-face"]
    > img.classic-source-five-indicator-source {
    display: none !important;
  }
}
/* STAGE_CLASSIC_CENTER_STOCK_REFERENCE_IMAGE_DIRECT_USE_IMPLEMENTATION_END */

/* STAGE_CLASSIC_CROWN_BLUR_FIX_AND_MODERN_SINGLE_STOCK_INDICATOR_ORNATE_COUNT_START */
/* The furniture crown is an approved raster asset.  Remove only the shared
   center panel's glass blur in the two canonical Classic scopes; leave the
   non-Classic center treatment unchanged. */
#matchPanel.normal-okey.table-theme-classic .nok-center,
#matchPanel.normal-okey.table-theme-classic-blue .nok-center {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Modern single-stack presentation keeps .nok-draw-stack as the existing
   double-click/drag target.  The indicator, stock image, and count are
   presentation children of that same target, so no draw interaction or
   Classic stock DOM is moved. */
#matchPanel.normal-okey[data-stock-presentation="modern"] .nok-pile-box[data-modern-single-stack="true"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  gap: clamp(5px, .48vw, 8px) !important;
}

#matchPanel.normal-okey[data-stock-presentation="modern"] .nok-pile-box[data-modern-single-stack="true"] > #boardPileCount,
#matchPanel.normal-okey[data-stock-presentation="modern"] .nok-pile-box[data-modern-single-stack="true"] > small,
#matchPanel.normal-okey[data-stock-presentation="modern"] .nok-center .center-indicator[data-modern-indicator-presentation="group"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#matchPanel.normal-okey[data-stock-presentation="modern"] .nok-draw-stack.modern-stock-indicator-count-group {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: row !important;
  gap: clamp(4px, .42vw, 7px) !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: clamp(58px, 6vw, 72px) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#matchPanel.normal-okey[data-stock-presentation="modern"] .modern-single-stock-indicator {
  display: grid !important;
  flex: 0 0 auto !important;
  place-items: center !important;
  width: clamp(33px, 3.25vw, 48px) !important;
  min-width: clamp(33px, 3.25vw, 48px) !important;
  height: clamp(46px, 4.48vw, 66px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

#matchPanel.normal-okey[data-stock-presentation="modern"] .modern-single-stock-indicator > img,
#matchPanel.normal-okey[data-stock-presentation="modern"] .modern-single-stock-indicator .classic-atlas-tile-image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  /* Match the established discard-face renderer so the atlas pixels occupy
     the same 42x58 visible body, rather than letterboxing the indicator. */
  object-fit: fill !important;
  pointer-events: none !important;
}

#matchPanel.normal-okey[data-stock-presentation="modern"] .nok-draw-stack.modern-stock-indicator-count-group > .stock-stack-image.stock-stack-single {
  display: block !important;
  flex: 0 0 auto !important;
  width: clamp(38px, 3.65vw, 54px) !important;
  min-width: clamp(38px, 3.65vw, 54px) !important;
  height: auto !important;
  max-height: clamp(54px, 5.25vw, 76px) !important;
  object-fit: contain !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

/* STAGE_CLASSIC_CROWN_BLUR_FIX_AND_MODERN_SINGLE_STOCK_INDICATOR_ORNATE_COUNT_END */

/* STAGE_MODERN_FIVE_STACK_HIDE_LEGACY_BOARD_COUNTER_START
   Five-stack Modern uses the reference stack artwork and its per-stack
   composition.  The legacy #boardPileCount is still updated from the
   authoritative draw-pile count, but it is a duplicate visual counter in
   this presentation and was appearing beside the center crown.  Keep the
   single-stack counter path and all non-Modern themes unchanged. */
#matchPanel.normal-okey.table-theme-modern[data-stock-presentation="classic"]
  .nok-center[data-classic-stock-state="classic"]
  .nok-pile-box > #boardPileCount {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
/* STAGE_MODERN_FIVE_STACK_HIDE_LEGACY_BOARD_COUNTER_END */

/* STAGE_SAYAC_REFERENCE_MODERN_SINGLE_STOCK_LAYOUT_START
   Reference-faithful three-piece presentation for Modern/single-stack.
   Geometry is viewport-scaled so the reference is not copied as raw pixels. */
#matchPanel.normal-okey[data-stock-presentation="modern"] .nok-pile-box[data-modern-single-stack="true"] {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  gap: 0 !important;
}

#matchPanel.normal-okey[data-stock-presentation="modern"] .nok-draw-stack.modern-stock-indicator-count-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: clamp(20px, 1.8vw, 28px) !important;
  min-height: clamp(80px, 7.45vw, 112px) !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
}

#matchPanel.normal-okey[data-stock-presentation="modern"] .nok-draw-stack.modern-stock-indicator-count-group > .modern-single-stock-indicator {
  order: 1 !important;
  /* The live discard face is 42x58px after the atlas lock. Match that
     visible tile box exactly; retain the former flex footprint in symmetric
     margins so the indicator center and the counter/deck anchors do not move. */
  flex: 0 0 42px !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 58px !important;
  min-height: 58px !important;
  margin-top: calc(
    clamp(18px, 2.2vw, 33px) +
    clamp(0px, calc((4.65vw - 58px) / 2), 6px)
  ) !important;
  margin-left: clamp(0px, calc((3.4vw - 42px) / 2), 5px) !important;
  margin-right: clamp(0px, calc((3.4vw - 42px) / 2), 5px) !important;
}

#matchPanel.normal-okey[data-stock-presentation="modern"] .nok-draw-stack.modern-stock-indicator-count-group > .stock-stack-image.stock-stack-single {
  order: 3 !important;
  flex: 0 0 clamp(50px, 3.75vw, 58px) !important;
  width: clamp(50px, 3.75vw, 58px) !important;
  min-width: clamp(50px, 3.75vw, 58px) !important;
  max-width: clamp(50px, 3.75vw, 58px) !important;
  height: auto !important;
  max-height: clamp(88px, 6.65vw, 100px) !important;
  margin-top: clamp(13px, 1.5vw, 23px) !important;
  object-fit: contain !important;
}

#matchPanel.normal-okey[data-stock-presentation="modern"] .nok-draw-stack.modern-stock-indicator-count-group > .modern-stock-count {
  position: relative !important;
  order: 2 !important;
  display: block !important;
  flex: 0 0 clamp(82px, 6.8vw, 104px) !important;
  width: clamp(82px, 6.8vw, 104px) !important;
  min-width: clamp(82px, 6.8vw, 104px) !important;
  height: clamp(84px, 7vw, 108px) !important;
  min-height: clamp(84px, 7vw, 108px) !important;
  margin-right: clamp(16px, 2.5vw, 36px) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #ffe6a0 !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-shadow: none !important;
  overflow: visible !important;
}

#matchPanel.normal-okey[data-stock-presentation="modern"] .modern-stock-counter-number {
  z-index: 1;
  color: #fff0be;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(20px, 1.8vw, 28px);
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .7);
}

/* STAGE_SAYAC_REFERENCE_MODERN_SINGLE_STOCK_LAYOUT_END */

/* STAGE_SAYACREF_COUNTER_FRAME_ASSET_ONLY_START
   The taçsız green-gold frame pixels come directly from sayacref.png.
   Modern rendering adds only the live count text. */
#matchPanel.normal-okey[data-stock-presentation="modern"] .nok-draw-stack.modern-stock-indicator-count-group > .modern-stock-count {
  position: relative !important;
  order: 2 !important;
  display: grid !important;
  flex: 0 0 clamp(100px, 9.1vw, 138px) !important;
  place-items: center !important;
  width: clamp(100px, 9.1vw, 138px) !important;
  min-width: clamp(100px, 9.1vw, 138px) !important;
  height: clamp(80px, 7.45vw, 112px) !important;
  min-height: clamp(80px, 7.45vw, 112px) !important;
  margin-right: clamp(4px, .55vw, 8px) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff0be !important;
  font-size: 0 !important;
  line-height: 1 !important;
  overflow: visible !important;
}

#matchPanel.normal-okey[data-stock-presentation="modern"] .modern-stock-counter-image {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  pointer-events: none !important;
}

#matchPanel.normal-okey[data-stock-presentation="modern"] .modern-stock-counter-number {
  position: absolute !important;
  z-index: 1 !important;
  top: 50% !important;
  left: 50% !important;
  display: block !important;
  color: #fff0be !important;
  font-family: "Arial Black", Arial, Helvetica, sans-serif !important;
  font-size: clamp(19.6px, 1.54vw, 23.8px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
  word-spacing: 0 !important;
  text-shadow: 0 1px 1px rgba(62, 39, 20, .9), 0 0 1px rgba(0, 0, 0, .55) !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
  white-space: nowrap !important;
}

#matchPanel.normal-okey[data-stock-presentation="modern"] .nok-draw-stack.modern-stock-indicator-count-group > .modern-stock-count::before,
#matchPanel.normal-okey[data-stock-presentation="modern"] .nok-draw-stack.modern-stock-indicator-count-group > .modern-stock-count::after {
  content: none !important;
  display: none !important;
}

/* STAGE_SAYACREF_COUNTER_FRAME_SIZE_AND_CENTER_LOCK_START
   The previous counter box was 100-138x80-112px. Keep its flex footprint and
   center fixed with symmetric margins while the reference frame itself is
   exactly 56x33px. */
#matchPanel.normal-okey[data-stock-presentation="modern"] .nok-draw-stack.modern-stock-indicator-count-group > .modern-stock-count {
  flex: 0 0 56px !important;
  width: 56px !important;
  min-width: 56px !important;
  height: 33px !important;
  min-height: 33px !important;
  margin-top: calc((clamp(80px, 7.45vw, 112px) - 33px) / 2) !important;
  margin-left: calc((clamp(100px, 9.1vw, 138px) - 56px) / 2) !important;
  margin-right: calc(
    clamp(4px, .55vw, 8px) +
    (clamp(100px, 9.1vw, 138px) - 56px) / 2
  ) !important;
}
/* STAGE_SAYACREF_COUNTER_FRAME_SIZE_AND_CENTER_LOCK_END */

@media (min-width: 901px) {
  /* Preserve the existing SAYAC reference vertical center anchor. */
  #matchPanel.normal-okey.table-theme-classic[data-stock-presentation="modern"]
    .nok-pile-box[data-modern-single-stack="true"] {
    position: absolute !important;
    left: 0 !important;
    top: calc(-24px * var(--classic-reference-scale-y)) !important;
  }
}

/* STAGE_NORMAL_OKEY_STOCK_PRESENTATION_THEME_INDEPENDENCE_START
   Stock presentation is a product mode, not a table theme.  These selectors
   re-use the locked Classic five-stack/source-5 geometry whenever the stock
   mode is five-stack, including Premium/Nature/club table themes. */
@media (min-width: 901px) {
  #matchPanel.normal-okey:not(.table-theme-classic):not(.table-theme-classic-blue)[data-stock-presentation="classic"]
    .nok-center[data-classic-stock-state="classic"] .nok-pile-box {
    left: 0 !important;
    top: 0 !important;
    width: calc(272px * var(--classic-reference-scale-x)) !important;
    height: calc(350px * var(--classic-reference-scale-y)) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #matchPanel.normal-okey:not(.table-theme-classic):not(.table-theme-classic-blue)[data-stock-presentation="classic"]
    .nok-center[data-classic-stock-state="classic"] .nok-draw-stack[data-stock-mode="five-stack"] {
    position: absolute !important;
    left: 0 !important;
    top: calc(-52px * var(--classic-reference-scale-y)) !important;
    width: calc(272px * var(--classic-reference-scale-x)) !important;
    min-width: calc(272px * var(--classic-reference-scale-x)) !important;
    height: calc(322px * var(--classic-reference-scale-y)) !important;
    min-height: calc(322px * var(--classic-reference-scale-y)) !important;
    display: block !important;
    overflow: visible !important;
  }

  #matchPanel.normal-okey:not(.table-theme-classic):not(.table-theme-classic-blue)[data-stock-presentation="classic"]
    .nok-center[data-classic-stock-state="classic"] .nok-draw-stack[data-stock-mode="five-stack"] .stock-stack-row {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    height: calc(106px * var(--classic-reference-scale-y)) !important;
    min-height: calc(106px * var(--classic-reference-scale-y)) !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  #matchPanel.normal-okey:not(.table-theme-classic):not(.table-theme-classic-blue)[data-stock-presentation="classic"]
    .nok-center[data-classic-stock-state="classic"] .nok-draw-stack[data-stock-mode="five-stack"] .stock-stack-row[data-classic-row="center"] {
    top: calc(131px * var(--classic-reference-scale-y)) !important;
    align-items: flex-end !important;
  }

  #matchPanel.normal-okey:not(.table-theme-classic):not(.table-theme-classic-blue)[data-stock-presentation="classic"]
    .nok-center[data-classic-stock-state="classic"] .nok-draw-stack[data-stock-mode="five-stack"] .stock-stack-row[data-classic-row="bottom"] {
    top: calc(252.5905511812px * var(--classic-reference-scale-y)) !important;
    flex-direction: row !important;
  }

  #matchPanel.normal-okey:not(.table-theme-classic):not(.table-theme-classic-blue)[data-stock-presentation="classic"]
    .nok-center[data-classic-stock-state="classic"] .nok-draw-stack[data-stock-mode="five-stack"] .stock-stack-row .stock-stack-image.stock-stack-five {
    flex: 0 0 calc(60px * var(--classic-reference-scale-x)) !important;
    width: calc(60px * var(--classic-reference-scale-x)) !important;
    min-width: calc(60px * var(--classic-reference-scale-x)) !important;
    max-width: calc(60px * var(--classic-reference-scale-x)) !important;
    height: calc(106px * var(--classic-reference-scale-y)) !important;
    min-height: calc(106px * var(--classic-reference-scale-y)) !important;
    max-height: calc(106px * var(--classic-reference-scale-y)) !important;
    aspect-ratio: 60 / 106 !important;
    object-fit: fill !important;
    margin: 0 !important;
  }

  #matchPanel.normal-okey:not(.table-theme-classic):not(.table-theme-classic-blue)[data-stock-presentation="classic"]
    .nok-center[data-classic-stock-state="classic"] .nok-draw-stack[data-stock-mode="five-stack"] .stock-stack-row[data-classic-row="center"] .stock-stack-image.stock-stack-center,
  #matchPanel.normal-okey:not(.table-theme-classic):not(.table-theme-classic-blue)[data-stock-presentation="classic"]
    .nok-center[data-classic-stock-state="classic"] .nok-draw-stack[data-stock-mode="five-stack"] .stock-stack-row .stock-stack-image.stock-stack-partial {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: fill !important;
  }

  #matchPanel.normal-okey:not(.table-theme-classic):not(.table-theme-classic-blue)[data-stock-presentation="classic"]
    .nok-center[data-classic-stock-state="classic"] .nok-draw-stack[data-stock-mode="five-stack"] .stock-stack-row[data-classic-row="overflow"] {
    display: none !important;
  }

  #matchPanel.normal-okey:not(.table-theme-classic):not(.table-theme-classic-blue)[data-stock-presentation="classic"]
    .nok-center[data-classic-stock-state="classic"] .classic-final-stack-anchor {
    display: block !important;
    overflow: visible !important;
  }

  #matchPanel.normal-okey:not(.table-theme-classic):not(.table-theme-classic-blue)[data-stock-presentation="classic"]
    .nok-center[data-classic-stock-state="classic"] .center-indicator {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  #matchPanel.normal-okey:not(.table-theme-classic):not(.table-theme-classic-blue)[data-stock-presentation="classic"]
    .nok-center[data-classic-stock-state="classic"] .stock-stack-source-five {
    position: relative !important;
    overflow: visible !important;
    line-height: 0 !important;
  }

  #matchPanel.normal-okey:not(.table-theme-classic):not(.table-theme-classic-blue)[data-stock-presentation="classic"]
    .nok-center[data-classic-stock-state="classic"] .stock-stack-source-five > .stock-stack-source-five-base {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: contain !important;
    pointer-events: none !important;
  }

  #matchPanel.normal-okey:not(.table-theme-classic):not(.table-theme-classic-blue)[data-stock-presentation="classic"]
    .nok-center[data-classic-stock-state="classic"] .stock-stack-source-five > .classic-source-five-indicator-face {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 72 / 62 !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
    overflow: hidden !important;
    pointer-events: none !important;
    z-index: 2 !important;
    line-height: 0 !important;
  }

  #matchPanel.normal-okey:not(.table-theme-classic):not(.table-theme-classic-blue)[data-stock-presentation="classic"]
    .nok-center[data-classic-stock-state="classic"] .stock-stack-source-five > .classic-source-five-indicator-face > canvas.classic-source-five-indicator-canvas {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    pointer-events: none !important;
  }

  #matchPanel.normal-okey:not(.table-theme-classic):not(.table-theme-classic-blue)[data-stock-presentation="classic"]
    .nok-center[data-classic-stock-state="classic"] .stock-stack-source-five > .classic-source-five-indicator-face > img.classic-source-five-indicator-reference-body,
  #matchPanel.normal-okey:not(.table-theme-classic):not(.table-theme-classic-blue)[data-stock-presentation="classic"]
    .nok-center[data-classic-stock-state="classic"] .stock-stack-source-five > .classic-source-five-indicator-face > img.classic-source-five-indicator-source {
    display: none !important;
  }
}
/* STAGE_NORMAL_OKEY_STOCK_PRESENTATION_THEME_INDEPENDENCE_END */

/* NORMAL_OKEY_CLASSIC_AVATAR_BACKGROUND_CLEANUP_START
   All avatar content keeps its image/text, round geometry, size, and position.
   The Classic theme must not paint a decorative fill or frame around either
   a real photo image or a text-only empty-seat avatar. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic .seat-avatar,
  #matchPanel.normal-okey.table-theme-classic .player-seat.has-player .seat-avatar,
  #matchPanel.normal-okey.table-theme-classic .player-seat.has-player.active .seat-avatar {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
  }
}
/* NORMAL_OKEY_CLASSIC_AVATAR_BACKGROUND_CLEANUP_END */

/* NORMAL_OKEY_CLASSIC_PLAYER_SEAT_FRAME_CLEANUP_START
   The avatar itself is already paint-free, but the enclosing player-seat was
   still painting the gold/green frame and its turn-shadow.  Keep the seat
   node, dimensions, anchors, children, and identity panel intact; remove only
   this outer decorative paint in the Classic theme. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic .nok-station-top .player-seat,
  #matchPanel.normal-okey.table-theme-classic .nok-station-left .player-seat,
  #matchPanel.normal-okey.table-theme-classic .nok-station-right .player-seat,
  #matchPanel.normal-okey.table-theme-classic .nok-station-bottom .player-seat {
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation: none !important;
  }
}
/* NORMAL_OKEY_CLASSIC_PLAYER_SEAT_FRAME_CLEANUP_END */

/* NORMAL_OKEY_CLASSIC_IDENTITY_STATUS_RING_CLEANUP_START
   The remaining circular paint is the connection-status pseudo-element on the
   identity sibling, not the avatar.  Keep its state color, but remove only
   the gold border and outer glow that read as an unwanted avatar ring. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic .seat-identity::after {
    border: 0 !important;
    box-shadow: none !important;
  }
}
/* NORMAL_OKEY_CLASSIC_IDENTITY_STATUS_RING_CLEANUP_END */

/* NORMAL_OKEY_CLASSIC_EMPTY_SEAT_CIRCLE_CLEANUP_START
   Empty seats retain their layout boxes, but their avatar placeholder and
   identity status decoration must not paint a circular indicator.  Occupied
   seats are intentionally excluded by :not(.has-player). */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic .player-seat:not(.has-player) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic .player-seat:not(.has-player) > .seat-avatar {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  #matchPanel.normal-okey.table-theme-classic
    .player-seat:not(.has-player) > .seat-identity::after {
    content: none !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }
}
/* NORMAL_OKEY_CLASSIC_EMPTY_SEAT_CIRCLE_CLEANUP_END */

/* NORMAL_OKEY_CLASSIC_ACTION_STATE_COLORS_START
   Action authority remains in app.js (disabled/legalActions/phase).  These
   rules only make that existing state legible: usable controls are warm
   amber, unavailable controls are dark/quiet, and the autoplay toggle has a
   separate selected treatment. */
#matchPanel.normal-okey.table-theme-classic .nok-live-actions > button:is(
  #drawPileButton,
  #discardPileButton,
  #standTableButton,
  #readyButton,
  #discardButton,
  #finishButton,
  #okeyAutoPlayButton,
  #showIndicatorButton,
  #forfeitTableButton
):not(:disabled):not([hidden]),
#matchPanel.normal-okey.table-theme-classic .nok-action-bar > button:not(:disabled):not([hidden]) {
  border-color: rgba(255, 215, 118, .92) !important;
  background: linear-gradient(180deg, #c58b32, #71400f) !important;
  color: #fff5d4 !important;
  box-shadow: inset 0 1px rgba(255, 248, 211, .36), 0 6px 14px rgba(54, 26, 5, .48) !important;
  filter: none !important;
}

#matchPanel.normal-okey.table-theme-classic .nok-live-actions > button:is(
  #drawPileButton,
  #discardPileButton,
  #standTableButton,
  #readyButton,
  #discardButton,
  #finishButton,
  #okeyAutoPlayButton,
  #showIndicatorButton,
  #forfeitTableButton
):disabled,
#matchPanel.normal-okey.table-theme-classic .nok-action-bar > button:disabled {
  border-color: rgba(128, 137, 132, .34) !important;
  background: linear-gradient(180deg, #343936, #191d1b) !important;
  color: rgba(218, 224, 217, .52) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .05), 0 3px 8px rgba(0, 0, 0, .24) !important;
  filter: none !important;
  cursor: not-allowed !important;
}

#matchPanel.normal-okey.table-theme-classic .nok-live-actions > button:is(
  #drawPileButton,
  #discardPileButton,
  #standTableButton,
  #readyButton,
  #discardButton,
  #finishButton,
  #okeyAutoPlayButton,
  #showIndicatorButton,
  #forfeitTableButton
):not(:disabled):not([hidden]):hover,
#matchPanel.normal-okey.table-theme-classic .nok-live-actions > button:is(
  #drawPileButton,
  #discardPileButton,
  #standTableButton,
  #readyButton,
  #discardButton,
  #finishButton,
  #okeyAutoPlayButton,
  #showIndicatorButton,
  #forfeitTableButton
):not(:disabled):not([hidden]):focus-visible,
#matchPanel.normal-okey.table-theme-classic .nok-action-bar > button:not(:disabled):not([hidden]):hover,
#matchPanel.normal-okey.table-theme-classic .nok-action-bar > button:not(:disabled):not([hidden]):focus-visible {
  border-color: #ffe29a !important;
  background: linear-gradient(180deg, #dfa94d, #8a5518) !important;
  color: #fff9e8 !important;
  box-shadow: inset 0 1px rgba(255, 252, 226, .5), 0 0 0 2px rgba(255, 211, 112, .18), 0 8px 16px rgba(54, 26, 5, .5) !important;
}

#matchPanel.normal-okey.table-theme-classic .nok-live-actions #okeyAutoPlayButton.active:not(:disabled):not([hidden]),
#matchPanel.normal-okey.table-theme-classic .nok-live-actions #okeyAutoPlayButton[aria-pressed="true"]:not(:disabled):not([hidden]) {
  border-color: #fff0b0 !important;
  background: linear-gradient(180deg, #e0ad4f, #95601d) !important;
  color: #fffbe9 !important;
  box-shadow: inset 0 1px rgba(255, 255, 226, .56), 0 0 0 2px rgba(255, 217, 118, .24), 0 8px 18px rgba(65, 31, 5, .54) !important;
}

#matchPanel.normal-okey.table-theme-classic .nok-live-actions #okeyAutoPlayButton {
  font-size: clamp(10px, .78vw, 12px) !important;
  white-space: normal !important;
}
/* NORMAL_OKEY_CLASSIC_ACTION_STATE_COLORS_END */

/* NORMAL_OKEY_CLASSIC_LIVE_ACTION_HIT_TARGET_GUARD_START
   Terminal desktop guard for the measured 10px live-button regression.  The
   rack/table anchors remain untouched; only the action row's own track and
   hit target are made non-collapsible. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic > .nok-presentation {
    --classic-reference-live-action-height: clamp(44px, 4.6vh, 48px);
  }

  #matchPanel.normal-okey.table-theme-classic .nok-live-actions {
    height: var(--classic-reference-live-action-height) !important;
    min-height: var(--classic-reference-live-action-height) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    align-items: stretch !important;
    overflow: visible !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-live-actions > button {
    height: 100% !important;
    min-height: 44px !important;
    max-height: none !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }
}
/* NORMAL_OKEY_CLASSIC_LIVE_ACTION_HIT_TARGET_GUARD_END */

/* NORMAL_OKEY_CLASSIC_EQUAL_ACTION_HEIGHTS_START
   Keep every visible primary control on the same grid track.  The existing
   visibility state remains owned by app.js; hidden controls do not reserve a
   track, while every visible control fills the one shared row. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic .nok-live-actions {
    grid-auto-flow: column !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    grid-template-rows: var(--classic-reference-live-action-height) !important;
    grid-auto-rows: var(--classic-reference-live-action-height) !important;
    align-content: stretch !important;
    align-items: stretch !important;
    justify-items: stretch !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-live-actions > button:not([hidden]) {
    grid-column: auto !important;
    grid-row: 1 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
    position: static !important;
    inset: auto !important;
    margin: 0 !important;
    transform: translateY(0) !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.04 !important;
  }

  /* Override the historical per-ID grid placement selectors, which carry
     two IDs and therefore outrank a generic child rule even when both use
     !important.  Every live action must share row 1 and the same stretch
     track; hidden state still remains owned by app.js. */
  #matchPanel.normal-okey.table-theme-classic .nok-live-actions > #drawPileButton:not([hidden]),
  #matchPanel.normal-okey.table-theme-classic .nok-live-actions > #discardPileButton:not([hidden]),
  #matchPanel.normal-okey.table-theme-classic .nok-live-actions > #standTableButton:not([hidden]),
  #matchPanel.normal-okey.table-theme-classic .nok-live-actions > #readyButton:not([hidden]),
  #matchPanel.normal-okey.table-theme-classic .nok-live-actions > #discardButton:not([hidden]),
  #matchPanel.normal-okey.table-theme-classic .nok-live-actions > #finishButton:not([hidden]),
  #matchPanel.normal-okey.table-theme-classic .nok-live-actions > #showIndicatorButton:not([hidden]),
  #matchPanel.normal-okey.table-theme-classic .nok-live-actions > #okeyAutoPlayButton:not([hidden]),
  #matchPanel.normal-okey.table-theme-classic .nok-live-actions > #forfeitTableButton:not([hidden]) {
    grid-column: auto !important;
    grid-row: 1 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    transform: translateY(0) !important;
  }

  /* The autoplay selector has historical ID-level specificity; keep its
     long label wrap-capable without changing its existing font size/color. */
  #matchPanel.normal-okey.table-theme-classic .nok-live-actions > #okeyAutoPlayButton:not([hidden]) {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-action-bar {
    grid-auto-flow: column !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-template-rows: var(--classic-reference-auxiliary-height) !important;
    grid-auto-rows: var(--classic-reference-auxiliary-height) !important;
    align-content: stretch !important;
    align-items: stretch !important;
    justify-items: stretch !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-action-bar > button:not([hidden]) {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
    grid-column: auto !important;
    grid-row: 1 !important;
    position: static !important;
    inset: auto !important;
    margin: 0 !important;
    transform: translateY(0) !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.04 !important;
  }
}
/* NORMAL_OKEY_CLASSIC_EQUAL_ACTION_HEIGHTS_END */

/* NORMAL_OKEY_CLASSIC_ACTIVE_IDENTITY_GLOW_START
   The authoritative .active class is assigned by updateActiveSeat().  Paint
   only the rectangular identity panel; avatar geometry and seat layout stay
   untouched. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic .player-seat.has-player.active > .seat-identity {
    animation: classic-profile-panel-turn-glow 2.4s ease-in-out infinite !important;
    position: relative !important;
    z-index: 1 !important;
  }

  #matchPanel.normal-okey.table-theme-classic .player-seat.has-player:not(.active) > .seat-identity {
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic .player-seat.has-player.active > .seat-identity {
    animation: none !important;
    box-shadow: inset 0 0 0 1px rgba(255, 220, 112, .20), inset 0 0 12px rgba(205, 145, 35, .10), 0 0 0 1px rgba(185, 132, 42, .54), 0 6px 16px rgba(0, 0, 0, .44) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .player-seat.has-player:not(.active) > .seat-identity {
    animation: none !important;
  }
}
/* NORMAL_OKEY_CLASSIC_ACTIVE_IDENTITY_GLOW_END */

/* NORMAL_OKEY_CLASSIC_ACTIVE_IDENTITY_INNER_PULSE_FINAL_START
   The turn state is authoritative in app.js (.player-seat.active).  Keep the
   seat and avatar untouched; the black rectangular identity surface owns both
   the soft interior pulse and the restrained exterior glow. */
@keyframes classic-profile-panel-inner-gold-pulse {
  0%, 100% {
    background-color: rgba(0, 0, 0, .90);
    box-shadow:
      inset 0 0 7px rgba(255, 207, 91, .11),
      inset 0 0 16px rgba(180, 118, 24, .07),
      0 0 0 1px rgba(122, 82, 23, .48),
      0 6px 16px rgba(0, 0, 0, .44),
      0 0 12px rgba(198, 143, 48, .22);
  }

  50% {
    background-color: rgba(0, 0, 0, .90);
    box-shadow:
      inset 0 0 12px rgba(255, 220, 112, .34),
      inset 0 0 27px rgba(215, 160, 48, .27),
      inset 0 0 3px rgba(255, 235, 164, .34),
      0 0 0 1px rgba(219, 164, 63, .72),
      0 6px 16px rgba(0, 0, 0, .42),
      0 0 20px rgba(201, 145, 42, .44);
  }
}

#matchPanel.normal-okey.table-theme-classic .player-seat.has-player > .seat-identity {
  background-color: rgba(0, 0, 0, .90) !important;
  background-image: none !important;
}

#matchPanel.normal-okey.table-theme-classic .player-seat.has-player.active > .seat-identity {
  animation: classic-profile-panel-inner-gold-pulse 2.4s ease-in-out infinite !important;
  position: relative !important;
  z-index: 1 !important;
}

#matchPanel.normal-okey.table-theme-classic .player-seat.has-player:not(.active) > .seat-identity {
  animation: none !important;
  box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
  #matchPanel.normal-okey.table-theme-classic .player-seat.has-player.active > .seat-identity {
    animation: none !important;
    background-color: rgba(0, 0, 0, .90) !important;
    box-shadow:
      inset 0 0 10px rgba(255, 220, 112, .24),
      inset 0 0 20px rgba(205, 145, 35, .17),
      0 0 0 1px rgba(185, 132, 42, .58),
      0 6px 16px rgba(0, 0, 0, .44) !important;
  }
}
/* NORMAL_OKEY_CLASSIC_ACTIVE_IDENTITY_INNER_PULSE_FINAL_END */

/* NORMAL_OKEY_CLASSIC_ACTIVE_IDENTITY_SURFACE_OVERLAY_START
   Inset shadows alone are too easy to lose against the panel's dark paint.
   This pseudo-layer is the visible interior light source.  It stays inside
   the rectangular identity panel and all text remains above it. */
@keyframes classic-profile-panel-inner-gold-overlay {
  0%, 100% {
    opacity: .10;
    transform: scale(.985);
  }

  50% {
    opacity: .72;
    transform: scale(1.015);
  }
}

#matchPanel.normal-okey.table-theme-classic .player-seat.has-player > .seat-identity {
  overflow: hidden !important;
  isolation: isolate !important;
}

#matchPanel.normal-okey.table-theme-classic .player-seat.has-player > .seat-identity::before {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background: radial-gradient(ellipse at center, rgba(255, 204, 83, .58) 0%, rgba(214, 151, 37, .30) 46%, rgba(74, 45, 8, 0) 84%) !important;
  opacity: 0 !important;
  transform: scale(.985) !important;
  transform-origin: center !important;
}

#matchPanel.normal-okey.table-theme-classic .player-seat.has-player > .seat-identity > * {
  position: relative !important;
  z-index: 1 !important;
}

#matchPanel.normal-okey.table-theme-classic .player-seat.has-player.active > .seat-identity::before {
  opacity: 1 !important;
  animation: classic-profile-panel-inner-gold-overlay 2.4s ease-in-out infinite !important;
}

#matchPanel.normal-okey.table-theme-classic .player-seat.has-player:not(.active) > .seat-identity::before {
  opacity: 0 !important;
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  #matchPanel.normal-okey.table-theme-classic .player-seat.has-player.active > .seat-identity::before {
    opacity: .58 !important;
    animation: none !important;
    transform: none !important;
  }
}
/* NORMAL_OKEY_CLASSIC_ACTIVE_IDENTITY_SURFACE_OVERLAY_END */

/* Use the supplied logo PNG as the sole Classic-theme logo surface. */
#matchPanel.normal-okey.table-theme-classic .nok-logo-card {
  overflow: visible !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: none !important;
}

#matchPanel.normal-okey.table-theme-classic .nok-logo-card::before {
  content: none !important;
  display: none !important;
}

#matchPanel.normal-okey.table-theme-classic .nok-logo-card::after {
  content: none !important;
  display: none !important;
}

#matchPanel.normal-okey.table-theme-classic .nok-logo-card > .nok-logo-image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

#matchPanel.normal-okey.table-theme-classic .nok-logo-card > strong,
#matchPanel.normal-okey.table-theme-classic .nok-logo-card > span {
  display: none !important;
}

/* NORMAL_OKEY_CLASSIC_VISIBLE_LOGO_ENLARGEMENT_START
   The supplied PNG has a visible gold frame smaller than its bitmap bounds.
   At reference scale 1, 296.247x166.728 renders that frame at approximately
   278.883x132 without changing or distorting the source PNG.  The adjacent
   header blocks move right by the same measured clearance while retaining the
   existing control-group width and button spacing. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic .nok-logo-card {
    width: calc(296.247px * var(--classic-reference-scale-x)) !important;
    height: calc(166.728px * var(--classic-reference-scale-y)) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-logo-card > .nok-logo-image {
    width: auto !important;
    height: calc(166.728px * var(--classic-reference-scale-y)) !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-left-column {
    left: calc(312.25px * var(--classic-reference-scale-x)) !important;
  }

  #matchPanel.normal-okey.table-theme-classic .nok-top-controls {
    left: calc(528.25px * var(--classic-reference-scale-x)) !important;
    right: calc(85.75px * var(--classic-reference-scale-x)) !important;
  }
}
/* NORMAL_OKEY_CLASSIC_VISIBLE_LOGO_ENLARGEMENT_END */

/* NORMAL_OKEY_CLASSIC_VISIBLE_LOGO_ALIGNMENT_START
   The PNG's outer gold frame begins 87/941 of its bitmap height below the
   image top.  Move only the logo card by that scaled internal offset so the
   visible frame, rather than the transparent-looking bitmap margin, aligns
   with the unchanged table-information top edge. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-classic .nok-logo-card {
    top: calc(8.585px * var(--classic-reference-scale-y)) !important;
  }
}
/* NORMAL_OKEY_CLASSIC_VISIBLE_LOGO_ALIGNMENT_END */

/* NORMAL_OKEY_CLASSIC_HEADER_CONTROLS_START
   Keep the approved logo and table-information geometry locked.  On desktop,
   place the appearance/help controls after the information panel and hide only
   the Classic-theme rack-skin picker; the shared rack selector and its runtime
   behavior remain available to other themes. */
@media (min-width: 1129px) {
  #matchPanel.normal-okey.table-theme-classic .nok-settings-panel {
    left: calc(528.25px * var(--classic-reference-scale-x)) !important;
  }
}

#matchPanel.normal-okey.table-theme-classic .nok-statusbar .nok-settings-panel > label.rack-skin-picker {
  display: none !important;
}
/* NORMAL_OKEY_CLASSIC_HEADER_CONTROLS_END */

/* STAGE_048B_NORMAL_OKEY_REPORT_START */
.normal-okey-report-composer {
  position: fixed;
  inset: 0;
  z-index: 125;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(3, 12, 15, .72);
}
.normal-okey-report-composer.hidden,
.normal-okey-report-composer[hidden] { display: none !important; }
.normal-okey-report-card {
  width: min(520px, calc(100vw - 24px));
  max-height: min(85vh, calc(100vh - 24px));
  max-height: min(85dvh, calc(100dvh - 24px));
  overflow: auto;
  padding: 18px;
  border: 1px solid rgba(225, 181, 104, .42);
  border-radius: 16px;
  color: #f6ead5;
  background: linear-gradient(145deg, rgba(55, 32, 26, .98), rgba(14, 26, 29, .98));
  box-shadow: 0 22px 48px rgba(0, 0, 0, .48), inset 0 1px rgba(255, 255, 255, .08);
}
.normal-okey-report-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.normal-okey-report-heading .eyebrow { margin: 0 0 4px; color: #e4bd79; font-size: 10px; letter-spacing: .14em; }
.normal-okey-report-heading h2 { margin: 0; color: #ffe1a1; font-size: 20px; letter-spacing: .08em; }
.normal-okey-report-heading button { min-width: 34px; min-height: 34px; font-size: 20px; }
.normal-okey-report-hint { margin: 0 0 14px; color: #c6c0ad; font-size: 11px; line-height: 1.5; }
.normal-okey-report-form { display: grid; gap: 12px; }
.normal-okey-report-form label { display: grid; gap: 6px; color: #f2ce8b; font-size: 11px; font-weight: 800; }
.normal-okey-report-form select,
.normal-okey-report-form textarea {
  width: 100%;
  border: 1px solid rgba(225, 181, 104, .3);
  border-radius: 8px;
  color: #fff0d0;
  background: rgba(8, 20, 23, .8);
  padding: 9px;
  resize: vertical;
}
.normal-okey-report-form select:focus,
.normal-okey-report-form textarea:focus { outline: 2px solid rgba(232, 185, 104, .42); outline-offset: 1px; }
.normal-okey-report-form textarea { min-height: 118px; line-height: 1.45; }
.normal-okey-report-form .message { min-height: 18px; margin: 0; }
.normal-okey-report-actions { display: flex; justify-content: flex-end; gap: 8px; }
.normal-okey-report-actions button { min-width: 100px; }
.normal-okey-report-actions button:disabled { cursor: not-allowed; opacity: .55; }
@media (max-width: 620px) {
  .normal-okey-report-composer { padding: 10px; }
  .normal-okey-report-card { width: min(100%, 520px); padding: 13px; }
  .normal-okey-report-heading h2 { font-size: 17px; }
  .normal-okey-report-actions { justify-content: stretch; }
  .normal-okey-report-actions button { flex: 1 1 0; }
}
/* STAGE_048B_NORMAL_OKEY_REPORT_END */

/* IKRAM-DECISION: visual surfaces never capture board input. */
.normal-okey-gift-inbox,
.normal-okey-gift-table-surface {
  position: fixed;
  z-index: 18;
  pointer-events: none;
  display: grid;
  gap: 8px;
  box-sizing: border-box;
}
.normal-okey-gift-inbox[hidden],
.normal-okey-gift-table-surface[hidden] { display: none !important; }
.normal-okey-gift-inbox {
  top: 50%;
  left: 50%;
  right: auto;
  z-index: 120;
  width: min(460px, calc(100vw - 24px));
  max-height: min(78vh, 640px);
  max-height: min(78dvh, 640px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 12px;
  border: 1px solid rgba(232, 185, 104, .58);
  border-radius: 18px;
  background: rgba(14, 26, 29, .96);
  box-shadow: 0 22px 48px rgba(0, 0, 0, .48), inset 0 1px rgba(255, 255, 255, .08);
  transform: translate(-50%, -50%);
}
.normal-okey-gift-table-surface {
  inset: 0;
  display: block;
  overflow: visible;
  z-index: 50;
}
.normal-okey-gift-effect {
  position: fixed;
  z-index: 58;
  overflow: hidden;
  contain: layout paint style;
  pointer-events: none;
  border-radius: 16px;
}
.normal-okey-gift-effect * { pointer-events: none; }
.normal-okey-gift-effect.confetti .normal-okey-gift-confetti-piece {
  position: absolute;
  left: var(--gift-x);
  top: var(--gift-y);
  width: clamp(4px, .55vw, 8px);
  height: clamp(8px, 1vw, 14px);
  border-radius: 1px;
  background: var(--gift-color);
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0deg);
  animation: normal-okey-gift-confetti-fall var(--gift-duration) ease-out var(--gift-delay) forwards;
}
@keyframes normal-okey-gift-confetti-fall {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(0deg) scale(.8); }
  12% { opacity: 1; }
  72% { opacity: .92; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--gift-drift)), 122px) rotate(var(--gift-rotation)) scale(1); }
}
.normal-okey-gift-effect.fireworks .normal-okey-gift-firework-burst {
  position: absolute;
  left: var(--gift-x);
  top: var(--gift-burst-y);
  width: 1px;
  height: 1px;
  overflow: visible;
}
.normal-okey-gift-effect.fireworks .normal-okey-gift-firework-rocket {
  position: absolute;
  left: 0;
  top: 100%;
  width: 3px;
  height: 15px;
  border-radius: 50%;
  background: #fff3b0;
  box-shadow: 0 0 8px 2px rgba(255, 220, 120, .9);
  opacity: 0;
  animation: normal-okey-gift-firework-rise 980ms ease-out var(--gift-delay) both;
}
.normal-okey-gift-effect.fireworks .normal-okey-gift-firework-spark {
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 18px;
  border-radius: 50%;
  background: var(--gift-color);
  box-shadow: 0 0 7px 2px color-mix(in srgb, var(--gift-color) 74%, transparent);
  opacity: 0;
  transform-origin: 50% 100%;
  transform: rotate(var(--gift-angle)) translateY(0) scale(.2);
  animation: normal-okey-gift-firework-spark 2100ms ease-out var(--gift-delay) both;
}
@keyframes normal-okey-gift-firework-rise {
  0% { opacity: 0; transform: translateY(0) scale(.7); }
  18% { opacity: 1; }
  72% { opacity: 1; transform: translateY(calc(var(--gift-rise-distance) * -1)) scale(1); }
  100% { opacity: 0; transform: translateY(calc(var(--gift-rise-distance) * -1)) scale(.35); }
}
@keyframes normal-okey-gift-firework-spark {
  0% { opacity: 0; transform: rotate(var(--gift-angle)) translateY(0) scale(.2); }
  18% { opacity: 1; transform: rotate(var(--gift-angle)) translateY(0) scale(1); }
  76% { opacity: .92; }
  100% { opacity: 0; transform: rotate(var(--gift-angle)) translateY(calc(var(--gift-distance) * -1)) scale(.35); }
}
.normal-okey-gift-effect[aria-hidden="true"] { user-select: none; }
.normal-okey-gift-table-surface .normal-okey-gift-notice-card.accepted {
  position: fixed;
  width: clamp(64px, 7vw, 96px);
  height: clamp(64px, 7vw, 96px);
  max-width: none;
  min-width: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  box-sizing: border-box;
  display: block;
  animation: normal-okey-gift-prop-enter 180ms ease-out;
}
.normal-okey-gift-table-surface .normal-okey-gift-notice-card.accepted img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
  filter: drop-shadow(0 5px 4px rgba(0, 0, 0, .34));
}
.normal-okey-gift-table-surface .normal-okey-gift-notice-card.accepted .normal-okey-gift-accepted-meta {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.normal-okey-gift-notice-card {
  pointer-events: none;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(232, 185, 104, .45);
  border-radius: 14px;
  color: #fff0d0;
  background: linear-gradient(145deg, rgba(55, 32, 26, .98), rgba(22, 31, 32, .98));
  box-shadow: 0 8px 26px rgba(0, 0, 0, .24);
  animation: normal-okey-gift-enter 180ms ease-out;
}
.normal-okey-gift-notice-card.pending {
  pointer-events: auto;
}
.normal-okey-gift-notice-card img {
  width: 88px;
  height: 88px;
  max-width: 100%;
  object-fit: contain;
  border-radius: 12px;
  background: rgba(8, 20, 23, .42);
}
.normal-okey-gift-notice-card.pending > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
  align-content: start;
}
.normal-okey-gift-notice-card strong,
.normal-okey-gift-notice-card small { display: block; }
.normal-okey-gift-notice-card strong,
.normal-okey-gift-notice-card small {
  grid-column: 1 / -1;
  overflow-wrap: anywhere;
}
.normal-okey-gift-notice-card strong {
  font-size: 1.08rem;
  line-height: 1.35;
}
.normal-okey-gift-notice-card small {
  color: rgba(255, 240, 208, .82);
  margin-top: 0;
  font-size: .95rem;
  line-height: 1.4;
}
.normal-okey-gift-notice-card button {
  pointer-events: auto;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  margin: 0;
  padding: 11px 12px;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  touch-action: manipulation;
}
.normal-okey-gift-notice-card button:disabled { opacity: .55; }
.normal-okey-gift-countdown { font-variant-numeric: tabular-nums; }
.normal-okey-gift-product.is-locked { opacity: .5; filter: grayscale(.75); }
.normal-okey-gift-product.is-locked::after { content: " 🔒"; }
@keyframes normal-okey-gift-enter {
  from { opacity: 0; transform: translateY(-5px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes normal-okey-gift-prop-enter {
  from { opacity: 0; transform: translateY(-3px) scale(.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .normal-okey-gift-notice-card { animation: none; transition: none; }
  .normal-okey-gift-effect,
  .normal-okey-gift-effect * { animation: none !important; opacity: 0 !important; }
}

/* NORMAL_OKEY_MODERN_PREMIUM_REFERENCE_LAYER_START
   The source PNG remains immutable. This Modern-only layer uses the exact
   copied reference PNG as an opaque background. Live DOM remains mounted
   for gameplay; any baked-in reference UI/object overlap is reported rather
   than removed or synthesized here. */
.match-panel.normal-okey.table-theme-modern > .nok-presentation {
  display: block !important;
  position: relative !important;
  width: 1536px !important;
  height: 1024px !important;
  min-height: 1024px !important;
  padding: 0 !important;
  overflow: hidden !important;
  background-color: #030406 !important;
    background-image: url("/okey/modern/MODERN_PREMIUM_BOS_REFERANS.png") !important;
  background-position: 0 0 !important;
  background-repeat: no-repeat !important;
  background-size: 1536px 1024px !important;
  transform-origin: top left !important;
}
.match-panel.normal-okey.table-theme-modern > .nok-presentation > .batak-panel,
.match-panel.normal-okey.table-theme-modern > .normal-okey-image-preview {
  display: none !important;
}
.match-panel.normal-okey.table-theme-modern > .nok-presentation > .normal-okey-header {
  display: contents !important;
}
.match-panel.normal-okey.table-theme-modern {
  --table-surface: #08757a;
  --table-surface-deep: #015e64;
  --table-surface-highlight: #14969a;
  --table-border: #d3a25d;
  --table-inner-border: rgba(255, 226, 160, .38);
  --presentation-bg: transparent;
  --rack-bg: transparent;
  --rack-border: #d6a45d;
  --panel-bg: linear-gradient(145deg, rgba(5, 13, 22, .97), rgba(1, 4, 9, .99));
  --panel-bg-solid: #050d16;
  --panel-border: rgba(224, 177, 91, .72);
  --status-bg: rgba(3, 8, 14, .9);
  --control-bg: linear-gradient(180deg, #102849, #06152b);
  --control-hover: linear-gradient(180deg, #173c67, #081d39);
  --control-border: rgba(215, 166, 84, .72);
  --text-main: #f8f0df;
  --text-muted: #c7cbd0;
  --accent: #efbd62;
  --accent-strong: #ffe0a0;
  --tile-face: #fffdf5;
  --tile-ink: #102238;
  --tile-border: #e4cfaa;
  --avatar-frame: #e1ac57;
  --avatar-halo: rgba(231, 181, 91, .28);
  background: #030406 !important;
}
.match-panel.normal-okey.table-theme-modern .nok-table-area,
.match-panel.normal-okey.table-theme-modern .nok-center-column,
.match-panel.normal-okey.table-theme-modern .nok-shell,
.match-panel.normal-okey.table-theme-modern .normal-okey-main {
  background: transparent !important;
}
.match-panel.normal-okey.table-theme-modern .nok-table,
.match-panel.normal-okey.table-theme-modern #gameBoard {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.match-panel.normal-okey.table-theme-modern .nok-table::before,
.match-panel.normal-okey.table-theme-modern .nok-table::after {
  display: none !important;
}
.match-panel.normal-okey.table-theme-modern .nok-center-brand {
  display: none !important;
}
.match-panel.normal-okey.table-theme-modern .nok-center,
.match-panel.normal-okey.table-theme-modern .nok-center-play-area {
  background: transparent !important;
}

/* STAGE 2E-2: remove only the legacy center frame paint in Modern. */
.match-panel.normal-okey.table-theme-modern .nok-center {
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.match-panel.normal-okey.table-theme-modern .normal-okey-rack-zone {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.match-panel.normal-okey.table-theme-modern .normal-okey-rack-zone::before,
.match-panel.normal-okey.table-theme-modern .normal-okey-rack-zone::after {
  content: none !important;
  display: none !important;
}
.match-panel.normal-okey.table-theme-modern .normal-okey-rack-zone > .rack-image-skin {
  display: none !important;
}
.match-panel.normal-okey.table-theme-modern .normal-okey-rack-zone > .rack-wood-body {
  display: none !important;
}
.match-panel.normal-okey.table-theme-modern .normal-okey-rack-zone > #handTiles {
  position: relative !important;
  z-index: 1 !important;
}
/* STAGE 2E-12: remove only the legacy Modern hand-container shadow.
   Keep #handTiles geometry, grid, tile layout, and interaction behavior. */
.match-panel.normal-okey.table-theme-modern #handTiles {
  box-shadow: none !important;
}
.match-panel.normal-okey.table-theme-modern .opponent-rack {
  border-color: rgba(218, 166, 88, .82) !important;
  background: linear-gradient(180deg, #d6a25a, #7f4c24 52%, #342014) !important;
  box-shadow: inset 0 1px rgba(255, 238, 188, .44), 0 7px 14px rgba(0, 0, 0, .42) !important;
}
.match-panel.normal-okey.table-theme-modern .player-seat,
.match-panel.normal-okey.table-theme-modern .seat-identity {
  border-color: rgba(222, 171, 91, .76) !important;
  background: linear-gradient(145deg, rgba(3, 10, 17, .97), rgba(0, 2, 6, .98)) !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .48), inset 0 1px rgba(255, 236, 184, .1) !important;
}
.match-panel.normal-okey.table-theme-modern .player-seat {
  background: transparent !important;
  box-shadow: none !important;
}
.match-panel.normal-okey.table-theme-modern .seat-identity strong,
.match-panel.normal-okey.table-theme-modern .seat-identity .player-score {
  color: #ffe0a0 !important;
}
.match-panel.normal-okey.table-theme-modern .nok-logo-card,
.match-panel.normal-okey.table-theme-modern .nok-info-panel,
.match-panel.normal-okey.table-theme-modern .nok-action-bar {
  border-color: var(--panel-border) !important;
  background: var(--panel-bg) !important;
  box-shadow: 0 16px 30px rgba(0, 0, 0, .58), inset 0 1px rgba(255, 235, 183, .1) !important;
}
.match-panel.normal-okey.table-theme-modern .nok-live-actions button,
.match-panel.normal-okey.table-theme-modern .nok-action-bar button,
.match-panel.normal-okey.table-theme-modern .normal-okey-side-controls button,
.match-panel.normal-okey.table-theme-modern .speech-to-text-button {
  border-color: var(--control-border) !important;
  background: var(--control-bg) !important;
  color: var(--text-main) !important;
}
.match-panel.normal-okey.table-theme-modern .nok-live-actions button:hover,
.match-panel.normal-okey.table-theme-modern .nok-action-bar button:hover:not(:disabled),
.match-panel.normal-okey.table-theme-modern .speech-to-text-button:hover {
  border-color: var(--accent-strong) !important;
  background: var(--control-hover) !important;
}
.match-panel.normal-okey.table-theme-modern .nok-pile-box,
.match-panel.normal-okey.table-theme-modern .center-indicator,
.match-panel.normal-okey.table-theme-modern .nok-discard-center {
  border-color: rgba(222, 171, 91, .6) !important;
  background: rgba(3, 13, 19, .9) !important;
  box-shadow: 0 10px 18px rgba(0, 0, 0, .44), inset 0 1px rgba(255, 234, 176, .1) !important;
}
.match-panel.normal-okey.table-theme-modern > .nok-presentation::before,
.match-panel.normal-okey.table-theme-modern > .nok-presentation::after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
.match-panel.normal-okey.table-theme-modern .nok-right-column,
.match-panel.normal-okey.table-theme-modern .nok-action-bar {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.match-panel.normal-okey.table-theme-modern .player-seat {
  backdrop-filter: none !important;
}
.match-panel.normal-okey.table-theme-modern .seat-identity,
.match-panel.normal-okey.table-theme-modern .seat-avatar {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.match-panel.normal-okey.table-theme-modern .seat-avatar {
  outline: none !important;
}
.match-panel.normal-okey.table-theme-modern .nok-logo-card::before,
.match-panel.normal-okey.table-theme-modern .nok-logo-card::after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* STAGE 2C: Modern Premium uses one canonical 1536x1024 canvas.  These
   container values are the existing reference-scale values expressed in
   canvas pixels; live child slot placement is intentionally unchanged. */
.match-panel.normal-okey.table-theme-modern > .nok-presentation {
  width: 1536px !important;
  height: 1024px !important;
  min-width: 1536px !important;
  min-height: 1024px !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  transform-origin: top left !important;
  transform: scale(min(1, calc(100vw / 1536px), calc(100vh / 1024px))) !important;
}

/* Convert the existing Modern presentation containers from viewport units to
   the same reference canvas.  No player, tile, chat, or button slot is moved
   in this stage; only the containing coordinate plane is made deterministic. */
.match-panel.normal-okey.table-theme-modern .nok-logo-card {
  left: 7.9872px !important;
  top: 9.0112px !important;
  width: 231.936px !important;
  height: 124.0064px !important;
}
.match-panel.normal-okey.table-theme-modern .nok-left-column {
  left: 246.0672px !important;
  top: 7.9872px !important;
  width: 209.0496px !important;
  height: 125.952px !important;
}
.match-panel.normal-okey.table-theme-modern .nok-top-controls {
  left: 474.0096px !important;
  top: 19.968px !important;
  width: 899.9424px !important;
  height: 54.9888px !important;
  gap: 12.288px !important;
}
.match-panel.normal-okey.table-theme-modern .nok-top-controls button {
  padding-inline: 11.52px !important;
}
.match-panel.normal-okey.table-theme-modern .nok-table-stage {
  left: 109.056px !important;
  top: 296.96px !important;
  width: 1048.0128px !important;
  height: 459.9808px !important;
}
.match-panel.normal-okey.table-theme-modern .nok-right-column {
  left: 1197.0048px !important;
  top: 90.0096px !important;
  width: 329.9328px !important;
  height: 812.032px !important;
  gap: 5.0176px !important;
}
.match-panel.normal-okey.table-theme-modern .table-chat {
  height: 514.048px !important;
  flex-basis: 514.048px !important;
}
.match-panel.normal-okey.table-theme-modern .nok-treat-panel {
  height: 142.336px !important;
  flex-basis: 142.336px !important;
}
.match-panel.normal-okey.table-theme-modern .nok-radio-panel {
  height: 145.408px !important;
  flex-basis: 145.408px !important;
}

/* A transformed presentation establishes the fixed containing block for the
   action bar.  Keep its existing reference-scale margins, but prevent the
   older rack-relative .match-actions rule from winning the cascade. */
.match-panel.normal-okey.table-theme-modern
  .normal-okey-rack-zone .nok-action-bar {
  position: fixed !important;
  inset: auto 46.08px 20.48px 46.08px !important;
  width: auto !important;
  height: 56px !important;
  transform: none !important;
}

/* STAGE 2D: Modern Premium player stations use the measured profile slots in
   the immutable 1536x1024 reference.  The application still owns seat
   mapping/content; this layer only aligns the existing live nodes. */
.match-panel.normal-okey.table-theme-modern .nok-station-top,
.match-panel.normal-okey.table-theme-modern .nok-station-right,
.match-panel.normal-okey.table-theme-modern .nok-station-bottom,
.match-panel.normal-okey.table-theme-modern .nok-station-left {
  position: absolute !important;
  z-index: 9 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  overflow: visible !important;
}

/* Reference profile bounds: top (493,237,220,68), right (971,427,210,68),
   bottom (492,614,220,68), left (11,427,190,68). */
.match-panel.normal-okey.table-theme-modern .nok-station-top {
  left: 384px !important;
  top: -212.95px !important;
  width: 220px !important;
  height: 68px !important;
}
.match-panel.normal-okey.table-theme-modern .nok-station-right {
  left: 862px !important;
  top: -22.95px !important;
  width: 210px !important;
  height: 68px !important;
}
.match-panel.normal-okey.table-theme-modern .nok-station-bottom {
  left: 383px !important;
  top: 164.05px !important;
  width: 220px !important;
  height: 68px !important;
}
.match-panel.normal-okey.table-theme-modern .nok-station-left {
  left: -98px !important;
  top: -22.95px !important;
  width: 190px !important;
  height: 68px !important;
}

/* STAGE 2D-6: the live stations are offset-positioned against #gameBoard,
   which sits about 152.95 canonical pixels below the Premium reference plane.
   Correct only the Modern station Y anchors; keep the board, presentation,
   seat boxes, and Stage 2D-3 inner box sizing unchanged. */

.match-panel.normal-okey.table-theme-modern
  .nok-station-top .player-seat,
.match-panel.normal-okey.table-theme-modern
  .nok-station-right .player-seat,
.match-panel.normal-okey.table-theme-modern
  .nok-station-bottom .player-seat,
.match-panel.normal-okey.table-theme-modern
  .nok-station-left .player-seat {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  width: 100% !important;
  height: 68px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 68px !important;
  max-height: 68px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.match-panel.normal-okey.table-theme-modern
  .nok-station-top .seat-avatar,
.match-panel.normal-okey.table-theme-modern
  .nok-station-right .seat-avatar,
.match-panel.normal-okey.table-theme-modern
  .nok-station-bottom .seat-avatar,
.match-panel.normal-okey.table-theme-modern
  .nok-station-left .seat-avatar {
  position: relative !important;
  z-index: 2 !important;
  flex: 0 0 66px !important;
  width: 66px !important;
  height: 66px !important;
  min-width: 66px !important;
  min-height: 66px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  object-fit: cover !important;
  object-position: center !important;
}

.match-panel.normal-okey.table-theme-modern
  .nok-station-top .seat-identity,
.match-panel.normal-okey.table-theme-modern
  .nok-station-right .seat-identity,
.match-panel.normal-okey.table-theme-modern
  .nok-station-bottom .seat-identity,
.match-panel.normal-okey.table-theme-modern
  .nok-station-left .seat-identity {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex: 0 0 174px !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 1px !important;
  width: 174px !important;
  min-width: 0 !important;
  max-width: 174px !important;
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  margin: 0 0 0 -19px !important;
  /* STAGE 2D-7B: avatar edge (66px) to text start (47px + 25px) = 6px. */
  padding: 7px 8px 5px 25px !important;
  box-sizing: border-box !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
  text-align: left !important;
}
.match-panel.normal-okey.table-theme-modern
  .nok-station-left .seat-identity {
  flex-basis: 144px !important;
  width: 144px !important;
  max-width: 144px !important;
}
.match-panel.normal-okey.table-theme-modern
  .nok-station-right .seat-identity {
  flex-basis: 164px !important;
  width: 164px !important;
  max-width: 164px !important;
}

.match-panel.normal-okey.table-theme-modern
  .nok-station-top .seat-identity > strong,
.match-panel.normal-okey.table-theme-modern
  .nok-station-right .seat-identity > strong,
.match-panel.normal-okey.table-theme-modern
  .nok-station-bottom .seat-identity > strong,
.match-panel.normal-okey.table-theme-modern
  .nok-station-left .seat-identity > strong,
.match-panel.normal-okey.table-theme-modern
  .nok-station-top .seat-identity > small,
.match-panel.normal-okey.table-theme-modern
  .nok-station-right .seat-identity > small,
.match-panel.normal-okey.table-theme-modern
  .nok-station-bottom .seat-identity > small,
.match-panel.normal-okey.table-theme-modern
  .nok-station-left .seat-identity > small {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: #f3d58e !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.match-panel.normal-okey.table-theme-modern
  .nok-station-top .seat-identity > strong,
.match-panel.normal-okey.table-theme-modern
  .nok-station-right .seat-identity > strong,
.match-panel.normal-okey.table-theme-modern
  .nok-station-bottom .seat-identity > strong,
.match-panel.normal-okey.table-theme-modern
  .nok-station-left .seat-identity > strong {
  color: #ffe2a4 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

/* Keep the Modern player boxes and avatars fixed; lift only the nickname glyphs. */
.match-panel.normal-okey.table-theme-modern
  .nok-station-top > #seat3 > .seat-identity > strong,
.match-panel.normal-okey.table-theme-modern
  .nok-station-right > #seat2 > .seat-identity > strong,
.match-panel.normal-okey.table-theme-modern
  .nok-station-bottom > #seat1 > .seat-identity > strong,
.match-panel.normal-okey.table-theme-modern
  .nok-station-left > #seat4 > .seat-identity > strong {
  position: relative !important;
  top: -2.4px !important;
}

/* STAGE 2D-7E: lift only the score line with the nickname; keep the
   identity box, horizontal text start, role line, and series line in flow. */
.match-panel.normal-okey.table-theme-modern
  .nok-station-top > #seat3 > .seat-identity > .player-score,
.match-panel.normal-okey.table-theme-modern
  .nok-station-right > #seat2 > .seat-identity > .player-score,
.match-panel.normal-okey.table-theme-modern
  .nok-station-bottom > #seat1 > .seat-identity > .player-score,
.match-panel.normal-okey.table-theme-modern
  .nok-station-left > #seat4 > .seat-identity > .player-score {
  position: relative !important;
  top: -2.4px !important;
}

.match-panel.normal-okey.table-theme-modern
  .nok-station-top .seat-identity > .player-score,
.match-panel.normal-okey.table-theme-modern
  .nok-station-right .seat-identity > .player-score,
.match-panel.normal-okey.table-theme-modern
  .nok-station-bottom .seat-identity > .player-score,
.match-panel.normal-okey.table-theme-modern
  .nok-station-left .seat-identity > .player-score,
.match-panel.normal-okey.table-theme-modern
  .nok-station-top .seat-identity > .series-score,
.match-panel.normal-okey.table-theme-modern
  .nok-station-right .seat-identity > .series-score,
.match-panel.normal-okey.table-theme-modern
  .nok-station-bottom .seat-identity > .series-score,
.match-panel.normal-okey.table-theme-modern
  .nok-station-left .seat-identity > .series-score {
  color: #d7b66d !important;
  font-size: 9px !important;
  line-height: 1.15 !important;
}
.match-panel.normal-okey.table-theme-modern
  .nok-station-top .player-seat.active,
.match-panel.normal-okey.table-theme-modern
  .nok-station-right .player-seat.active,
.match-panel.normal-okey.table-theme-modern
  .nok-station-bottom .player-seat.active,
.match-panel.normal-okey.table-theme-modern
  .nok-station-left .player-seat.active {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.match-panel.normal-okey.table-theme-modern
  .nok-station-top .player-seat.active::before,
.match-panel.normal-okey.table-theme-modern
  .nok-station-right .player-seat.active::before,
.match-panel.normal-okey.table-theme-modern
  .nok-station-bottom .player-seat.active::before,
.match-panel.normal-okey.table-theme-modern
  .nok-station-left .player-seat.active::before {
  content: none !important;
  display: none !important;
}
.match-panel.normal-okey.table-theme-modern
  .nok-station-top .player-seat.active .seat-avatar,
.match-panel.normal-okey.table-theme-modern
  .nok-station-right .player-seat.active .seat-avatar,
.match-panel.normal-okey.table-theme-modern
  .nok-station-bottom .player-seat.active .seat-avatar,
.match-panel.normal-okey.table-theme-modern
  .nok-station-left .player-seat.active .seat-avatar {
  border: 0 !important;
  box-shadow: none !important;
}
.match-panel.normal-okey.table-theme-modern
  .nok-station-top .player-seat.active .seat-identity > strong,
.match-panel.normal-okey.table-theme-modern
  .nok-station-right .player-seat.active .seat-identity > strong,
.match-panel.normal-okey.table-theme-modern
  .nok-station-bottom .player-seat.active .seat-identity > strong,
.match-panel.normal-okey.table-theme-modern
  .nok-station-left .player-seat.active .seat-identity > strong {
  color: #ffda70 !important;
}

/* The PNG already contains the three opponent rails.  Keep the live rack
   node and its server-provided count, but remove only the duplicate paint. */
.match-panel.normal-okey.table-theme-modern
  .nok-station-top .opponent-rack,
.match-panel.normal-okey.table-theme-modern
  .nok-station-left .opponent-rack,
.match-panel.normal-okey.table-theme-modern
  .nok-station-right .opponent-rack {
  position: absolute !important;
  z-index: 0 !important;
  display: block !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
.match-panel.normal-okey.table-theme-modern
  .nok-station-top .opponent-rack {
  left: -95px !important;
  top: 56px !important;
  width: 414px !important;
  height: 77px !important;
}
.match-panel.normal-okey.table-theme-modern
  .nok-station-left .opponent-rack {
  left: 169px !important;
  top: -83px !important;
  width: 154px !important;
  height: 278px !important;
}
.match-panel.normal-okey.table-theme-modern
  .nok-station-right .opponent-rack {
  left: -122px !important;
  top: -83px !important;
  width: 110px !important;
  height: 278px !important;
}
.match-panel.normal-okey.table-theme-modern
  .nok-station-top .opponent-rack::before,
.match-panel.normal-okey.table-theme-modern
  .nok-station-left .opponent-rack::before,
.match-panel.normal-okey.table-theme-modern
  .nok-station-right .opponent-rack::before {
  content: none !important;
  display: none !important;
}
.match-panel.normal-okey.table-theme-modern
  .nok-station-top .opponent-rack::after,
.match-panel.normal-okey.table-theme-modern
  .nok-station-left .opponent-rack::after,
.match-panel.normal-okey.table-theme-modern
  .nok-station-right .opponent-rack::after {
  top: -18px !important;
  right: 8px !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 2 !important;
  padding: 1px 4px !important;
  color: #f7e1a3 !important;
  background: rgba(5, 10, 14, .74) !important;
  border: 1px solid rgba(222, 171, 91, .52) !important;
  border-radius: 999px !important;
  font-size: 9px !important;
  line-height: 1.1 !important;
}

/* STAGE 2D-1: Keep each live seat inside its measured 1536x1024 profile
   slot.  Absolute child placement removes the legacy flex direction,
   viewport alignment and negative identity margin from the coordinate chain. */
.match-panel.normal-okey.table-theme-modern
  .nok-station-top > #seat3,
.match-panel.normal-okey.table-theme-modern
  .nok-station-right > #seat2,
.match-panel.normal-okey.table-theme-modern
  .nok-station-bottom > #seat1,
.match-panel.normal-okey.table-theme-modern
  .nok-station-left > #seat4 {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 68px !important;
  min-height: 68px !important;
  max-height: 68px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  flex: none !important;
  flex-direction: initial !important;
  align-items: initial !important;
  justify-content: initial !important;
  gap: 0 !important;
  overflow: visible !important;
}

.match-panel.normal-okey.table-theme-modern
  .nok-station-top > #seat3 > .seat-avatar,
.match-panel.normal-okey.table-theme-modern
  .nok-station-right > #seat2 > .seat-avatar,
.match-panel.normal-okey.table-theme-modern
  .nok-station-bottom > #seat1 > .seat-avatar,
.match-panel.normal-okey.table-theme-modern
  .nok-station-left > #seat4 > .seat-avatar {
  position: absolute !important;
  left: 0 !important;
  top: 1px !important;
  z-index: 2 !important;
  display: block !important;
  flex: none !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

.match-panel.normal-okey.table-theme-modern
  .nok-station-top > #seat3 > .seat-identity,
.match-panel.normal-okey.table-theme-modern
  .nok-station-right > #seat2 > .seat-identity,
.match-panel.normal-okey.table-theme-modern
  .nok-station-bottom > #seat1 > .seat-identity,
.match-panel.normal-okey.table-theme-modern
  .nok-station-left > #seat4 > .seat-identity {
  position: absolute !important;
  left: 47px !important;
  top: 4px !important;
  z-index: 1 !important;
  display: flex !important;
  flex: none !important;
  width: 174px !important;
  min-width: 0 !important;
  max-width: 174px !important;
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  margin: 0 !important;
  padding: 7px 8px 5px 25px !important;
  transform: none !important;
}
.match-panel.normal-okey.table-theme-modern
  .nok-station-right > #seat2 > .seat-identity {
  width: 164px !important;
  max-width: 164px !important;
}
.match-panel.normal-okey.table-theme-modern
  .nok-station-left > #seat4 > .seat-identity {
  width: 144px !important;
  max-width: 144px !important;
}

/* STAGE 2D-3: The measured seat dimensions are outer-box dimensions.  The
   legacy content-box sizing otherwise adds padding and avatar/identity
   borders to those reference bounds.  The generic green player-seat pseudo
   is decorative and is not driven by participant state; remove it only in
   Modern so empty seats do not show a false status light. */
.match-panel.normal-okey.table-theme-modern
  .nok-station-top > #seat3 > .seat-avatar,
.match-panel.normal-okey.table-theme-modern
  .nok-station-right > #seat2 > .seat-avatar,
.match-panel.normal-okey.table-theme-modern
  .nok-station-bottom > #seat1 > .seat-avatar,
.match-panel.normal-okey.table-theme-modern
  .nok-station-left > #seat4 > .seat-avatar,
.match-panel.normal-okey.table-theme-modern
  .nok-station-top > #seat3 > .seat-identity,
.match-panel.normal-okey.table-theme-modern
  .nok-station-right > #seat2 > .seat-identity,
.match-panel.normal-okey.table-theme-modern
  .nok-station-bottom > #seat1 > .seat-identity,
.match-panel.normal-okey.table-theme-modern
  .nok-station-left > #seat4 > .seat-identity {
  box-sizing: border-box !important;
}

/* STAGE MODERN_PREMIUM_PROFILE_ROLLBACK_AND_CORRECT_FIX: target the real
   .seat-avatar and its existing .seat-identity paint only.  The empty black
   circles belong to the immutable Modern background; station/rack anchors,
   hit areas, and seat mapping remain unchanged.  Transform offsets preserve
   each node's measured size and DOM layout while aligning its visual center. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-top > #seat3 > .seat-avatar {
    transform: translate(-48.428px, -61.288px) !important;
  }
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-right > #seat2 > .seat-avatar {
    transform: translate(-46.881px, -58.301px) !important;
  }
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-left > #seat4 > .seat-avatar {
    transform: translate(-48.383px, -60.699px) !important;
  }
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-bottom > #seat1 > .seat-avatar {
    transform: translate(-48.029px, -63.706px) !important;
  }
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-top > #seat3 > .seat-identity {
    transform: translate(-57.428px, -71.488px) !important;
  }
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-right > #seat2 > .seat-identity {
    transform: translate(-55.881px, -67.301px) !important;
  }
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-left > #seat4 > .seat-identity {
    transform: translate(-57.383px, -69.699px) !important;
  }
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-bottom > #seat1 > .seat-identity {
    transform: translate(-57.029px, -72.706px) !important;
  }
}

.match-panel.normal-okey.table-theme-modern .player-seat::after {
  content: none !important;
  display: none !important;
}

/* STAGE 2E: the immutable Premium reference PNG is the Modern table paint.
   Keep all live gameplay nodes mounted and geometrically unchanged, but
   neutralize legacy shell/rack/center-container paint that would otherwise
   draw over or beneath the reference.  Do not reset #handTiles::after: its
   insertion marker is part of drag-and-drop interaction feedback. */
.match-panel.normal-okey.table-theme-modern #gameStage,
.match-panel.normal-okey.table-theme-modern .nok-table-stage,
.match-panel.normal-okey.table-theme-modern #gameBoard,
.match-panel.normal-okey.table-theme-modern .nok-table,
.match-panel.normal-okey.table-theme-modern .nok-felt,
.match-panel.normal-okey.table-theme-modern .nok-visual-furniture-shell {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
.match-panel.normal-okey.table-theme-modern #gameBoard::before,
.match-panel.normal-okey.table-theme-modern #gameBoard::after,
.match-panel.normal-okey.table-theme-modern .nok-table::before,
.match-panel.normal-okey.table-theme-modern .nok-table::after,
.match-panel.normal-okey.table-theme-modern .nok-visual-furniture-shell::before,
.match-panel.normal-okey.table-theme-modern .nok-visual-furniture-shell::after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
.match-panel.normal-okey.table-theme-modern .nok-center-play-area,
.match-panel.normal-okey.table-theme-modern .nok-center {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
.match-panel.normal-okey.table-theme-modern .nok-center-play-area {
  backdrop-filter: none !important;
}
.match-panel.normal-okey.table-theme-modern .normal-okey-rack-zone,
.match-panel.normal-okey.table-theme-modern #handTiles {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
.match-panel.normal-okey.table-theme-modern .normal-okey-rack-zone::before,
.match-panel.normal-okey.table-theme-modern .normal-okey-rack-zone::after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
.match-panel.normal-okey.table-theme-modern .opponent-rack {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
.match-panel.normal-okey.table-theme-modern .opponent-rack::before {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
.match-panel.normal-okey.table-theme-modern .nok-pile-box,
.match-panel.normal-okey.table-theme-modern .center-indicator,
.match-panel.normal-okey.table-theme-modern .nok-discard-center {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* STAGE 2F: remove only the obsolete Modern duplicate control bands.
   The top controls open the shared menu dialog, so keep
   #normalOkeyBottomMenuPanel and its backdrop mounted.  The live action row
   remains visible because it owns draw/discard/ready/stand/indicator actions. */
.match-panel.normal-okey.table-theme-modern #normalOkeyBottomMenu,
.match-panel.normal-okey.table-theme-modern .nok-action-bar {
  display: none !important;
}

/* STAGE 2F-1: keep the Modern right-panel layout after the legacy Stage 2E
   paint reset.  The immutable reference PNG owns the panel surfaces. */
.match-panel.normal-okey.table-theme-modern .nok-chat-panel,
.match-panel.normal-okey.table-theme-modern .nok-treat-panel,
.match-panel.normal-okey.table-theme-modern .nok-radio-panel {
  box-sizing: border-box !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.match-panel.normal-okey.table-theme-modern .nok-treat-panel {
  padding: 12px !important;
}
.match-panel.normal-okey.table-theme-modern .nok-radio-panel {
  padding: 9px !important;
}
.match-panel.normal-okey.table-theme-modern .nok-treat-panel > header,
.match-panel.normal-okey.table-theme-modern .nok-radio-panel > header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 16px !important;
  margin: 0 0 5px !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}
.match-panel.normal-okey.table-theme-modern .nok-radio-panel {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0 !important;
}
.match-panel.normal-okey.table-theme-modern .nok-treat-options {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 5px !important;
  width: 100% !important;
  min-width: 0 !important;
}
.match-panel.normal-okey.table-theme-modern .nok-treat-options button {
  box-sizing: border-box !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.match-panel.normal-okey.table-theme-modern .nok-radio-body {
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) 30px !important;
  align-items: center !important;
  gap: 9px !important;
  min-width: 0 !important;
}
.match-panel.normal-okey.table-theme-modern .nok-radio-artwork {
  display: grid !important;
  place-items: center !important;
  width: 52px !important;
  height: 52px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border: 1px solid rgba(77, 187, 238, .68) !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 34% 28%, rgba(111, 219, 255, .96) 0 9%, transparent 10%), radial-gradient(circle at 70% 68%, rgba(72, 41, 169, .95) 0 18%, transparent 19%), conic-gradient(from 24deg, #0b8bd1, #4635bc, #0c456e, #2e90c9, #21175e, #0b8bd1) !important;
  box-shadow: inset 0 0 0 4px rgba(5, 16, 43, .52), 0 0 14px rgba(26, 170, 235, .25) !important;
}
.match-panel.normal-okey.table-theme-modern .nok-radio-artwork-disc {
  width: 31px !important;
  height: 31px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(208, 246, 255, .62) !important;
  border-radius: 50% !important;
  background: repeating-radial-gradient(circle, rgba(8, 21, 61, .06) 0 2px, rgba(7, 17, 49, .38) 3px 4px), radial-gradient(circle, #64d6f2 0 8%, #2a42af 9% 38%, #0d133f 39% 100%) !important;
  box-shadow: 0 0 9px rgba(72, 201, 245, .55) !important;
}
.match-panel.normal-okey.table-theme-modern .nok-radio-track {
  display: grid !important;
  min-width: 0 !important;
  gap: 2px !important;
}
.match-panel.normal-okey.table-theme-modern .nok-radio-track-title,
.match-panel.normal-okey.table-theme-modern .nok-radio-track-artist {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.match-panel.normal-okey.table-theme-modern .nok-radio-equalizer {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
  gap: 3px !important;
  width: 30px !important;
  height: 28px !important;
  overflow: hidden !important;
}
.match-panel.normal-okey.table-theme-modern .nok-radio-equalizer i {
  display: block !important;
  width: 3px !important;
  height: 9px !important;
  border-radius: 3px !important;
  background: linear-gradient(180deg, #fff8df, #b8b8ad) !important;
  box-shadow: 0 0 5px rgba(255, 244, 197, .28) !important;
}
.match-panel.normal-okey.table-theme-modern .nok-radio-equalizer i:nth-child(2) { height: 17px !important; }
.match-panel.normal-okey.table-theme-modern .nok-radio-equalizer i:nth-child(3) { height: 12px !important; }
.match-panel.normal-okey.table-theme-modern .nok-radio-equalizer i:nth-child(4) { height: 23px !important; }
.match-panel.normal-okey.table-theme-modern .nok-radio-equalizer i:nth-child(5) { height: 15px !important; }
.match-panel.normal-okey.table-theme-modern .nok-radio-equalizer i:nth-child(6) { height: 20px !important; }
.match-panel.normal-okey.table-theme-modern .nok-radio-equalizer i:nth-child(7) { height: 11px !important; }
.match-panel.normal-okey.table-theme-modern .nok-radio-controls {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  margin-top: 6px !important;
  padding-top: 4px !important;
  border-top: 1px solid rgba(224, 177, 91, .34) !important;
}
.match-panel.normal-okey.table-theme-modern .nok-radio-volume-icon {
  display: grid !important;
  place-items: center !important;
  width: 18px !important;
  height: 18px !important;
  overflow: hidden !important;
  color: var(--text-muted) !important;
}
.match-panel.normal-okey.table-theme-modern .nok-radio-volume-icon svg {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  fill: currentColor !important;
}
.match-panel.normal-okey.table-theme-modern .nok-radio-volume {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 4px !important;
  accent-color: var(--accent) !important;
  opacity: 1 !important;
}
.match-panel.normal-okey.table-theme-modern .nok-radio-request-button {
  align-self: flex-end !important;
  max-width: 100% !important;
  margin-top: 5px !important;
  padding: 3px 7px !important;
  font-size: 9px !important;
  white-space: nowrap !important;
}

/* STAGE 2F-3: the reference PNG already contains the Modern panel/control
   chrome. Keep live text, hit areas, and layout, but remove duplicate CSS
   paint from the controls and decorative radio artwork. */
.match-panel.normal-okey.table-theme-modern .nok-top-controls button,
.match-panel.normal-okey.table-theme-modern .nok-top-controls button:hover,
.match-panel.normal-okey.table-theme-modern .nok-chat-tab,
.match-panel.normal-okey.table-theme-modern .nok-chat-tab.active,
.match-panel.normal-okey.table-theme-modern .nok-chat-tabs span,
.match-panel.normal-okey.table-theme-modern .chat-form input,
.match-panel.normal-okey.table-theme-modern .chat-form button,
.match-panel.normal-okey.table-theme-modern .nok-treat-options button,
.match-panel.normal-okey.table-theme-modern .nok-radio-request-button {
  border: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
}
.match-panel.normal-okey.table-theme-modern .chat-heading {
  border-bottom: 0 !important;
}
.match-panel.normal-okey.table-theme-modern .nok-radio-artwork,
.match-panel.normal-okey.table-theme-modern .nok-radio-artwork-disc,
.match-panel.normal-okey.table-theme-modern .nok-radio-equalizer,
.match-panel.normal-okey.table-theme-modern .nok-radio-equalizer i {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
.match-panel.normal-okey.table-theme-modern .nok-radio-controls {
  border-top: 0 !important;
  padding-top: 0 !important;
}
.match-panel.normal-okey.table-theme-modern .nok-radio-volume {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
.match-panel.normal-okey.table-theme-modern .nok-radio-volume::-webkit-slider-runnable-track,
.match-panel.normal-okey.table-theme-modern .nok-radio-volume::-moz-range-track,
.match-panel.normal-okey.table-theme-modern .nok-radio-volume::-moz-range-progress {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.match-panel.normal-okey.table-theme-modern .nok-radio-volume::-webkit-slider-thumb,
.match-panel.normal-okey.table-theme-modern .nok-radio-volume::-moz-range-thumb {
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* STAGE 2F-5A: keep the live chat entry row at the bottom of the Modern
   chat panel. The hidden smiley picker leaves exactly three visible form
   children: message input, microphone, and submit. */
.match-panel.normal-okey.table-theme-modern .table-chat-tab-panel {
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.match-panel.normal-okey.table-theme-modern .chat-messages {
  min-width: 0 !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
.match-panel.normal-okey.table-theme-modern #chatForm {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 34px 56px !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 0 0 34px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 34px !important;
  height: 34px !important;
  box-sizing: border-box !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
.match-panel.normal-okey.table-theme-modern #chatForm input[name="message"] {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.match-panel.normal-okey.table-theme-modern #chatForm .speech-to-text-button {
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  box-sizing: border-box !important;
  padding: 7px !important;
  overflow: hidden !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text-main) !important;
}
.match-panel.normal-okey.table-theme-modern #chatForm .speech-to-text-icon {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  fill: currentColor !important;
}
.match-panel.normal-okey.table-theme-modern #chatForm > button[type="submit"] {
  display: block !important;
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  box-sizing: border-box !important;
  padding: 7px 6px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text-main) !important;
}
.match-panel.normal-okey.table-theme-modern #chatForm input[name="message"]::placeholder {
  color: var(--text-muted) !important;
  opacity: 1 !important;
}
/* STAGE 2F-5B: keep the complete Modern chat entry group anchored to the
   bottom of the chat panel. The message list absorbs remaining height. */
.match-panel.normal-okey.table-theme-modern .table-chat-tab-panel {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: stretch !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.match-panel.normal-okey.table-theme-modern .chat-messages {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
.match-panel.normal-okey.table-theme-modern #chatForm {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 34px 56px !important;
  align-items: center !important;
  align-self: stretch !important;
  gap: 6px !important;
  flex: 0 0 34px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 34px !important;
  height: 34px !important;
  box-sizing: border-box !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
.match-panel.normal-okey.table-theme-modern #chatForm input[name="message"] {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.match-panel.normal-okey.table-theme-modern #chatForm .speech-to-text-button {
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  box-sizing: border-box !important;
  padding: 7px !important;
  overflow: hidden !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text-main) !important;
}
.match-panel.normal-okey.table-theme-modern #chatForm .speech-to-text-icon {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  fill: currentColor !important;
}
.match-panel.normal-okey.table-theme-modern #chatForm > button[type="submit"] {
  display: block !important;
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  box-sizing: border-box !important;
  padding: 7px 6px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text-main) !important;
}
.match-panel.normal-okey.table-theme-modern #chatForm input[name="message"]::placeholder {
  color: var(--text-muted) !important;
  opacity: 1 !important;
}
/* NORMAL_OKEY_MODERN_PREMIUM_REFERENCE_LAYER_END */
@media (max-width: 620px) {
  .normal-okey-gift-inbox {
    width: calc(100vw - 24px);
    max-height: min(82vh, 640px);
    max-height: min(82dvh, 640px);
    padding: 10px;
  }
  .normal-okey-gift-table-surface { inset: 0; }
  .normal-okey-gift-table-surface .normal-okey-gift-notice-card.accepted {
    width: clamp(58px, 15vw, 76px);
    height: clamp(58px, 15vw, 76px);
  }
  .normal-okey-gift-notice-card {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
  }
  .normal-okey-gift-notice-card img { width: 72px; height: 72px; }
  .normal-okey-gift-notice-card strong { font-size: 1rem; }
  .normal-okey-gift-notice-card small { font-size: .9rem; }
}

/* STAGE 2D-7F: apply the score lift to the live score node without relying
   on the viewer-relative seat ID.  This is Modern-only and does not move the
   identity box, avatar, panel, or station; the existing nickname lift stays
   unchanged above. */
.match-panel.normal-okey.table-theme-modern
  .nok-station-top .seat-identity > small.player-score,
.match-panel.normal-okey.table-theme-modern
  .nok-station-right .seat-identity > small.player-score,
.match-panel.normal-okey.table-theme-modern
  .nok-station-bottom .seat-identity > small.player-score,
.match-panel.normal-okey.table-theme-modern
  .nok-station-left .seat-identity > small.player-score {
  position: relative !important;
  top: -2.4px !important;
}

/* STAGE 2F-5H: use independent Modern right-panel slots in the immutable
   1536x1024 reference canvas.  The right-column containing block keeps its
   existing outer geometry; only the three panel children leave flex flow so
   a taller chat panel cannot move Treats or Radio. */
.match-panel.normal-okey.table-theme-modern .nok-right-column {
  position: absolute !important;
  display: block !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  overflow: visible !important;
}
.match-panel.normal-okey.table-theme-modern > .nok-presentation > .nok-right-column > .nok-chat-panel,
.match-panel.normal-okey.table-theme-modern > .nok-presentation > .nok-right-column > .nok-treat-panel,
.match-panel.normal-okey.table-theme-modern > .nok-presentation > .nok-right-column > .nok-radio-panel {
  position: absolute !important;
  left: -14px !important;
  width: 343px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
.match-panel.normal-okey.table-theme-modern > .nok-presentation > .nok-right-column > .nok-chat-panel {
  top: 1px !important;
  height: 540px !important;
  min-height: 540px !important;
  flex: none !important;
  padding: 14px 14px 12px 13px !important;
}
.match-panel.normal-okey.table-theme-modern > .nok-presentation > .nok-right-column > .nok-treat-panel {
  top: 551px !important;
  height: 136px !important;
  min-height: 136px !important;
  flex: none !important;
}
.match-panel.normal-okey.table-theme-modern > .nok-presentation > .nok-right-column > .nok-radio-panel {
  top: 696px !important;
  height: 150px !important;
  min-height: 150px !important;
  flex: none !important;
}
.match-panel.normal-okey.table-theme-modern > .nok-presentation > .nok-right-column > .nok-chat-panel #tableChatTabPanel {
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.match-panel.normal-okey.table-theme-modern > .nok-presentation > .nok-right-column > .nok-chat-panel #chatMessages {
  min-width: 0 !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
.match-panel.normal-okey.table-theme-modern > .nok-presentation > .nok-right-column > .nok-chat-panel #chatForm {
  width: 316px !important;
  min-width: 316px !important;
  max-width: 316px !important;
  height: 45px !important;
  min-height: 45px !important;
  flex: 0 0 45px !important;
  /* STAGE 2F-5K: reserve the reference PNG's empty circular slot between
     the real microphone hit area and the fixed right-side submit button. */
  grid-template-columns: minmax(0, 1fr) 45px 35px 56px !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
.match-panel.normal-okey.table-theme-modern > .nok-presentation > .nok-right-column > .nok-chat-panel #chatForm input[name="message"] {
  width: 100% !important;
  max-width: 100% !important;
  height: 45px !important;
  min-height: 45px !important;
  box-sizing: border-box !important;
}
.match-panel.normal-okey.table-theme-modern > .nok-presentation > .nok-right-column > .nok-chat-panel #chatForm .speech-to-text-button {
  width: 45px !important;
  min-width: 45px !important;
  max-width: 45px !important;
  height: 45px !important;
  min-height: 45px !important;
  max-height: 45px !important;
  box-sizing: border-box !important;
}
.match-panel.normal-okey.table-theme-modern > .nok-presentation > .nok-right-column > .nok-chat-panel #chatForm > button[type="submit"] {
  grid-column: 4 !important;
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  height: 45px !important;
  min-height: 45px !important;
  max-height: 45px !important;
  box-sizing: border-box !important;
}

/* STAGE 2F-5L: the reference PNG supplies the visible microphone glyph.
   Keep the real SVG in the DOM and keep the button interactive, but remove
   only its duplicate paint. State feedback remains on the button outline. */
.match-panel.normal-okey.table-theme-modern > .nok-presentation > .nok-right-column > .nok-chat-panel #chatForm #chatVoiceButton .speech-to-text-icon {
  visibility: hidden !important;
}
.match-panel.normal-okey.table-theme-modern > .nok-presentation > .nok-right-column > .nok-chat-panel #chatForm #chatVoiceButton:focus-visible {
  outline: 2px solid var(--accent-strong) !important;
  outline-offset: 2px !important;
}
.match-panel.normal-okey.table-theme-modern > .nok-presentation > .nok-right-column > .nok-chat-panel #chatForm #chatVoiceButton:disabled {
  opacity: .58 !important;
  outline: 1px dashed rgba(224, 231, 238, .62) !important;
  outline-offset: 2px !important;
}
.match-panel.normal-okey.table-theme-modern > .nok-presentation > .nok-right-column > .nok-chat-panel #chatForm #chatVoiceButton.is-listening,
.match-panel.normal-okey.table-theme-modern > .nok-presentation > .nok-right-column > .nok-chat-panel #chatForm #chatVoiceButton[data-voice-state="listening"] {
  outline: 2px solid var(--accent-strong) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px rgba(255, 217, 112, .34) !important;
}
.match-panel.normal-okey.table-theme-modern > .nok-presentation > .nok-right-column > .nok-chat-panel #chatForm #chatVoiceButton.is-processing,
.match-panel.normal-okey.table-theme-modern > .nok-presentation > .nok-right-column > .nok-chat-panel #chatForm #chatVoiceButton[data-voice-state="processing"] {
  outline: 2px solid #8ed8bb !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px rgba(142, 216, 187, .3) !important;
}

/* STAGE SPEECH_TO_TEXT_5: keep the lightweight listening wave inside the
   Modern message field while the real microphone control stays clickable. */
body.match-window .match-panel.normal-okey.table-theme-modern .nok-right-column > .nok-chat-panel #chatForm > .chat-input-shell {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 45px !important;
  min-height: 45px !important;
  box-sizing: border-box !important;
}
body.match-window .match-panel.normal-okey.table-theme-modern .nok-right-column > .nok-chat-panel #chatForm > .chat-input-shell > input[name="message"] {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 45px !important;
  min-height: 45px !important;
  padding-right: 48px !important;
  box-sizing: border-box !important;
}
body.match-window .match-panel.normal-okey.table-theme-modern .nok-right-column > .nok-chat-panel #chatForm > .chat-input-shell > .speech-waveform {
  position: absolute !important;
  top: 50% !important;
  right: 13px !important;
  z-index: 2 !important;
  display: none !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 3px !important;
  width: 24px !important;
  height: 16px !important;
  transform: translateY(-50%) !important;
  color: var(--accent-strong) !important;
  pointer-events: none !important;
}
body.match-window .match-panel.normal-okey.table-theme-modern .nok-right-column > .nok-chat-panel #chatForm > .chat-input-shell > .speech-waveform.is-active {
  display: inline-flex !important;
}
body.match-window .match-panel.normal-okey.table-theme-modern .nok-right-column > .nok-chat-panel #chatForm > .chat-input-shell > .speech-waveform > i {
  display: block !important;
  width: 3px !important;
  height: 6px !important;
  border: 0 !important;
  border-radius: 2px !important;
  background: currentColor !important;
  animation: none !important;
}
body.match-window .match-panel.normal-okey.table-theme-modern .nok-right-column > .nok-chat-panel #chatForm > .chat-input-shell > .speech-waveform.is-active > i {
  animation: normal-okey-chat-wave 680ms ease-in-out infinite alternate !important;
}
body.match-window .match-panel.normal-okey.table-theme-modern .nok-right-column > .nok-chat-panel #chatForm > .chat-input-shell > .speech-waveform > i:nth-child(2),
body.match-window .match-panel.normal-okey.table-theme-modern .nok-right-column > .nok-chat-panel #chatForm > .chat-input-shell > .speech-waveform > i:nth-child(4) {
  height: 10px !important;
  animation-delay: 120ms !important;
}
body.match-window .match-panel.normal-okey.table-theme-modern .nok-right-column > .nok-chat-panel #chatForm > .chat-input-shell > .speech-waveform > i:nth-child(3) {
  height: 15px !important;
  animation-delay: 240ms !important;
}
@keyframes normal-okey-chat-wave {
  from { transform: scaleY(.42); opacity: .55; }
  to { transform: scaleY(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  body.match-window .match-panel.normal-okey.table-theme-modern .nok-right-column > .nok-chat-panel #chatForm > .chat-input-shell > .speech-waveform > i {
    animation: none !important;
    opacity: .82 !important;
  }
}

/* STAGE 2G: Modern Premium live-turn focus.
   The authoritative .active class already comes from app.js.  Add only a
   paint cue on the existing avatar/text nodes so the reference composition,
   station geometry, tile/rack geometry, and interaction hitboxes stay intact. */
#matchPanel.normal-okey.table-theme-modern
  .nok-station-top .player-seat.active .seat-avatar,
#matchPanel.normal-okey.table-theme-modern
  .nok-station-right .player-seat.active .seat-avatar,
#matchPanel.normal-okey.table-theme-modern
  .nok-station-bottom .player-seat.active .seat-avatar,
#matchPanel.normal-okey.table-theme-modern
  .nok-station-left .player-seat.active .seat-avatar {
  outline: 2px solid rgba(255, 218, 112, .92) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(255, 218, 112, .24), 0 0 18px rgba(255, 191, 78, .62) !important;
}
#matchPanel.normal-okey.table-theme-modern
  .nok-station-top .player-seat.active .seat-identity > strong,
#matchPanel.normal-okey.table-theme-modern
  .nok-station-right .player-seat.active .seat-identity > strong,
#matchPanel.normal-okey.table-theme-modern
  .nok-station-bottom .player-seat.active .seat-identity > strong,
#matchPanel.normal-okey.table-theme-modern
  .nok-station-left .player-seat.active .seat-identity > strong {
  color: #ffe7ad !important;
  text-shadow: 0 0 10px rgba(255, 204, 106, .58) !important;
}

/* STAGE 2H: lock the Modern Premium upper-left reference slots.
   The approved blank PNG already owns the OYUNPIYAT logo frame and the
   upper-left Masa Bilgisi frame.  Keep live information over that adjacent
   frame, leave the lower-left reference surface empty, hide the duplicate
   live logo paint, and keep the status/settings strip below the header row. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-modern .nok-logo-card {
    left: 15px !important;
    top: 13px !important;
    width: 255px !important;
    height: 96px !important;
    visibility: hidden !important;
    pointer-events: none !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-left-column {
    position: absolute !important;
    left: 284px !important;
    top: 13px !important;
    width: 249px !important;
    height: 89px !important;
    z-index: 22 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-info-panel {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 13px 13px 10px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-info-heading {
    margin-bottom: 8px !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-info-panel dl {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px 12px !important;
    margin: 0 !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-info-panel dl > div {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 4px !important;
    min-width: 0 !important;
    align-items: baseline !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-info-panel dt {
    font-size: 10px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-info-panel dd {
    min-width: 0 !important;
    max-width: none !important;
    overflow: hidden !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-statusbar {
    top: 92px !important;
    left: 284px !important;
    right: 356px !important;
    z-index: 23 !important;
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-statusbar > span:not(.turn-timer) {
    background: transparent !important;
  }
}

/* STAGE MODERN_PREMIUM_3D_BUTTONS_IMPLEMENTATION_A: paint-only 3D
   treatment for the five existing Modern top controls.  The controls,
   their IDs, event wiring, and the established slot geometry remain intact. */
#matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control {
  border: 1px solid rgba(128, 218, 255, .72) !important;
  border-radius: 12px !important;
  color: #f4fbff !important;
  background: linear-gradient(180deg, rgba(70, 132, 169, .98) 0%, rgba(15, 57, 91, .98) 46%, rgba(4, 19, 39, 1) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .46),
    inset 0 -3px 0 rgba(0, 0, 0, .48),
    0 2px 0 rgba(1, 8, 17, .98),
    0 8px 18px rgba(0, 0, 0, .44),
    0 0 0 1px rgba(42, 186, 255, .26),
    0 0 15px rgba(32, 157, 232, .22) !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9) !important;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, color .16s ease !important;
  white-space: nowrap !important;
}

#matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:first-child {
  border-color: rgba(255, 229, 155, .96) !important;
  color: #fff5cf !important;
  background: linear-gradient(180deg, #f1c66d 0%, #9b5e1d 46%, #3f2110 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .58),
    inset 0 -3px 0 rgba(45, 17, 4, .5),
    0 2px 0 rgba(28, 10, 2, .98),
    0 8px 18px rgba(0, 0, 0, .44),
    0 0 0 1px rgba(255, 202, 78, .34),
    0 0 16px rgba(244, 165, 54, .26) !important;
}

#matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control::before {
  display: inline !important;
  color: #b9edff !important;
  font-family: "Segoe UI Symbol", "Arial Unicode MS", sans-serif !important;
  font-weight: 900 !important;
  text-shadow: 0 0 7px rgba(101, 222, 255, .72) !important;
}

#matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:first-child::before {
  content: "⇥ ";
  color: #fff0b6 !important;
  text-shadow: 0 0 7px rgba(255, 218, 113, .78) !important;
}

#matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:nth-child(2)::before { content: "◉ "; }
#matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:nth-child(3)::before { content: "♙+ "; }
#matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:nth-child(4)::before { content: "◖)) "; }
#matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:nth-child(5)::before { content: "⚙ "; }

#matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:hover:not(:disabled) {
  border-color: rgba(183, 241, 255, .98) !important;
  background: linear-gradient(180deg, rgba(101, 176, 212, .99) 0%, rgba(20, 74, 114, .99) 46%, rgba(5, 25, 49, 1) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .58),
    inset 0 -3px 0 rgba(0, 0, 0, .42),
    0 2px 0 rgba(1, 8, 17, .98),
    0 9px 20px rgba(0, 0, 0, .48),
    0 0 0 1px rgba(66, 205, 255, .4),
    0 0 20px rgba(48, 187, 255, .34) !important;
}

#matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:first-child:hover:not(:disabled) {
  border-color: #fff1b8 !important;
  background: linear-gradient(180deg, #ffdc83 0%, #b87525 46%, #512912 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .66),
    inset 0 -3px 0 rgba(45, 17, 4, .46),
    0 2px 0 rgba(28, 10, 2, .98),
    0 9px 20px rgba(0, 0, 0, .48),
    0 0 0 1px rgba(255, 214, 93, .52),
    0 0 20px rgba(255, 182, 61, .38) !important;
}

#matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:active:not(:disabled) {
  border-color: rgba(224, 249, 255, .98) !important;
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, .52),
    inset 0 -1px 0 rgba(255, 255, 255, .2),
    0 1px 0 rgba(1, 8, 17, .98),
    0 3px 9px rgba(0, 0, 0, .38) !important;
}

#matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:first-child:active:not(:disabled) {
  border-color: #ffeeb0 !important;
  box-shadow:
    inset 0 2px 5px rgba(45, 17, 4, .56),
    inset 0 -1px 0 rgba(255, 255, 255, .24),
    0 1px 0 rgba(28, 10, 2, .98),
    0 3px 9px rgba(0, 0, 0, .38) !important;
}

#matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:focus-visible {
  outline: 2px solid rgba(154, 231, 255, .96) !important;
  outline-offset: 3px !important;
}

#matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:disabled {
  cursor: not-allowed !important;
  filter: saturate(.68) !important;
  opacity: .56 !important;
}

/* STAGE 3D_TOP_BUTTONS_VISUAL_CORRECTION: keep the five existing controls
   inside the established Modern slot while strengthening the reference-like
   embossed paint.  Only this control row is reflowed; table and side-panel
   geometry remain owned by the preceding Modern coordinate rules. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-modern .nok-top-controls {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 9px !important;
    overflow: visible !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding-inline: 8px !important;
    font-size: 16px !important;
    line-height: 1 !important;
    text-align: center !important;
    border-width: 2px !important;
    border-radius: 11px !important;
    background: linear-gradient(180deg, #4c91ba 0%, #164d79 43%, #061b36 100%) !important;
    box-shadow:
      inset 0 2px 0 rgba(255, 255, 255, .58),
      inset 0 0 0 1px rgba(145, 230, 255, .32),
      inset 0 -5px 0 rgba(0, 5, 15, .62),
      0 2px 0 rgba(1, 8, 17, 1),
      0 8px 20px rgba(0, 0, 0, .5),
      0 0 0 1px rgba(45, 191, 255, .42),
      0 0 22px rgba(31, 166, 242, .32) !important;
    text-shadow: 0 2px 2px rgba(0, 0, 0, .95), 0 0 8px rgba(198, 244, 255, .2) !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:first-child {
    background: linear-gradient(180deg, #ffd979 0%, #bd7928 43%, #4a2410 100%) !important;
    border-color: #ffe8a7 !important;
    box-shadow:
      inset 0 2px 0 rgba(255, 255, 255, .68),
      inset 0 0 0 1px rgba(255, 238, 177, .42),
      inset 0 -5px 0 rgba(55, 19, 3, .62),
      0 2px 0 rgba(30, 9, 1, 1),
      0 8px 20px rgba(0, 0, 0, .5),
      0 0 0 1px rgba(255, 207, 89, .58),
      0 0 22px rgba(255, 177, 49, .42) !important;
    text-shadow: 0 2px 2px rgba(60, 21, 3, .95), 0 0 8px rgba(255, 245, 198, .3) !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control::before {
    display: inline-block !important;
    margin-right: .28em !important;
    font-size: 1.2em !important;
    line-height: 0 !important;
    vertical-align: -.08em !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:first-child::before {
    content: "\21E5\00A0";
  }
  #matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:nth-child(2)::before {
    content: "\25C9\00A0";
  }
  #matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:nth-child(3)::before {
    content: "\2659+\00A0";
  }
  #matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:nth-child(4)::before {
    content: "\25D6))\00A0";
  }
  #matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:nth-child(5)::before {
    content: "\2699\00A0";
  }

  #matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:hover:not(:disabled) {
    border-color: #c8f5ff !important;
    background: linear-gradient(180deg, #73c2e8 0%, #1e6a9c 43%, #08264c 100%) !important;
    box-shadow:
      inset 0 2px 0 rgba(255, 255, 255, .72),
      inset 0 0 0 1px rgba(190, 244, 255, .44),
      inset 0 -5px 0 rgba(0, 5, 15, .55),
      0 3px 0 rgba(1, 8, 17, 1),
      0 10px 24px rgba(0, 0, 0, .54),
      0 0 0 1px rgba(105, 225, 255, .62),
      0 0 28px rgba(55, 197, 255, .5) !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:first-child:hover:not(:disabled) {
    border-color: #fff7c9 !important;
    background: linear-gradient(180deg, #ffe99a 0%, #d99639 43%, #613015 100%) !important;
    box-shadow:
      inset 0 2px 0 rgba(255, 255, 255, .78),
      inset 0 0 0 1px rgba(255, 244, 193, .5),
      inset 0 -5px 0 rgba(55, 19, 3, .55),
      0 3px 0 rgba(30, 9, 1, 1),
      0 10px 24px rgba(0, 0, 0, .54),
      0 0 0 1px rgba(255, 224, 112, .7),
      0 0 28px rgba(255, 193, 63, .54) !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:active:not(:disabled) {
    box-shadow:
      inset 0 3px 7px rgba(0, 0, 0, .64),
      inset 0 -1px 0 rgba(255, 255, 255, .22),
      0 1px 0 rgba(1, 8, 17, 1),
      0 3px 9px rgba(0, 0, 0, .44) !important;
  }
}

/* STAGE 3D_TOP_BUTTONS_DOM_LAYER_FIX / STAGE 3D_TOP_BUTTONS_COORDINATE_FIX:
   the approved Modern reference owns one canvas coordinate plane. Keep the
   five live buttons in that plane; do not let the display:contents header or
   an auto-positioned presentation wrapper introduce a second x offset. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-modern > .nok-presentation {
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    left: 0 !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform-origin: top left !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-top-controls {
    box-sizing: border-box !important;
    position: absolute !important;
    display: grid !important;
    grid-template-columns: 154px 138px 149px 140px 159px !important;
    grid-auto-rows: 62px !important;
    align-items: stretch !important;
    gap: 0 8px !important;
    left: 730px !important;
    top: 16px !important;
    margin-left: 0 !important;
    width: 772px !important;
    height: 62px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    z-index: 32 !important;
    isolation: isolate !important;
  }

  /* Mask only the baked five-button strip in the immutable PNG. */
  #matchPanel.normal-okey.table-theme-modern .nok-top-controls::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    border-radius: 8px !important;
    background: linear-gradient(180deg, rgba(13, 20, 29, .98), rgba(3, 8, 15, .99)) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 210, 111, .08), 0 0 0 1px rgba(0, 0, 0, .72) !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control {
    display: block !important;
    position: relative !important;
    z-index: 1 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 2px solid rgba(128, 218, 255, .82) !important;
    border-radius: 13px !important;
    background: linear-gradient(180deg, #4c91ba 0%, #164d79 43%, #061b36 100%) !important;
    box-shadow:
      inset 0 2px 0 rgba(255, 255, 255, .58),
      inset 0 0 0 1px rgba(145, 230, 255, .32),
      inset 0 -5px 0 rgba(0, 5, 15, .62),
      0 2px 0 rgba(1, 8, 17, 1),
      0 8px 20px rgba(0, 0, 0, .5),
      0 0 0 1px rgba(45, 191, 255, .42),
      0 0 22px rgba(31, 166, 242, .32) !important;
    color: #f4fbff !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    letter-spacing: .03em !important;
    line-height: 1 !important;
    text-align: center !important;
    text-shadow: 0 2px 2px rgba(0, 0, 0, .95), 0 0 8px rgba(198, 244, 255, .2) !important;
    overflow: hidden !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    transform: none !important;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, color .16s ease !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control::before {
    display: inline-block !important;
    margin-right: .24em !important;
    color: #b9edff !important;
    font-family: "Segoe UI Symbol", "Arial Unicode MS", sans-serif !important;
    font-size: 1.2em !important;
    font-weight: 900 !important;
    line-height: 0 !important;
    text-shadow: 0 0 8px rgba(101, 222, 255, .72) !important;
    vertical-align: -.08em !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:first-child {
    border-color: #ffe8a7 !important;
    color: #fff5cf !important;
    background: linear-gradient(180deg, #ffd979 0%, #bd7928 43%, #4a2410 100%) !important;
    box-shadow:
      inset 0 2px 0 rgba(255, 255, 255, .68),
      inset 0 0 0 1px rgba(255, 238, 177, .42),
      inset 0 -5px 0 rgba(55, 19, 3, .62),
      0 2px 0 rgba(30, 9, 1, 1),
      0 8px 20px rgba(0, 0, 0, .5),
      0 0 0 1px rgba(255, 207, 89, .58),
      0 0 22px rgba(255, 177, 49, .42) !important;
    text-shadow: 0 2px 2px rgba(60, 21, 3, .95), 0 0 8px rgba(255, 245, 198, .3) !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:first-child::before {
    content: "\21E5\00A0" !important;
    color: #fff0b6 !important;
    text-shadow: 0 0 8px rgba(255, 218, 113, .78) !important;
  }
  #matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:nth-child(2)::before { content: "\25C9\00A0" !important; }
  #matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:nth-child(3)::before { content: "\2659+\00A0" !important; }
  #matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:nth-child(4)::before { content: "\25D6))\00A0" !important; }
  #matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:nth-child(5)::before { content: "\2699\00A0" !important; }

  #matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control::after {
    content: none !important;
    display: none !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:hover:not(:disabled) {
    border-color: #c8f5ff !important;
    background: linear-gradient(180deg, #73c2e8 0%, #1e6a9c 43%, #08264c 100%) !important;
    box-shadow:
      inset 0 2px 0 rgba(255, 255, 255, .72),
      inset 0 0 0 1px rgba(190, 244, 255, .44),
      inset 0 -5px 0 rgba(0, 5, 15, .55),
      0 3px 0 rgba(1, 8, 17, 1),
      0 10px 24px rgba(0, 0, 0, .54),
      0 0 0 1px rgba(105, 225, 255, .62),
      0 0 28px rgba(55, 197, 255, .5) !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:first-child:hover:not(:disabled) {
    border-color: #fff7c9 !important;
    background: linear-gradient(180deg, #ffe99a 0%, #d99639 43%, #613015 100%) !important;
    box-shadow:
      inset 0 2px 0 rgba(255, 255, 255, .78),
      inset 0 0 0 1px rgba(255, 244, 193, .5),
      inset 0 -5px 0 rgba(55, 19, 3, .55),
      0 3px 0 rgba(30, 9, 1, 1),
      0 10px 24px rgba(0, 0, 0, .54),
      0 0 0 1px rgba(255, 224, 112, .7),
      0 0 28px rgba(255, 193, 63, .54) !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:active:not(:disabled) {
    box-shadow:
      inset 0 3px 7px rgba(0, 0, 0, .64),
      inset 0 -1px 0 rgba(255, 255, 255, .22),
      0 1px 0 rgba(1, 8, 17, 1),
      0 3px 9px rgba(0, 0, 0, .44) !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:focus-visible {
    outline: 2px solid rgba(255, 235, 151, .98) !important;
    outline-offset: -3px !important;
    box-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:disabled {
    cursor: not-allowed !important;
    opacity: .56 !important;
  }

}

/* STAGE MODERN_PREMIUM_HEADER_LAYER_CLEANUP: the approved Modern canvas
   already paints the logo and header frames.  Keep the live information and
   controls mounted, but make only the duplicate header wrappers paintless. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-modern .nok-topbar,
  #matchPanel.normal-okey.table-theme-modern .nok-left-column,
  #matchPanel.normal-okey.table-theme-modern .nok-info-panel {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    backdrop-filter: none !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-logo-card {
    display: none !important;
  }
}

/* STAGE MODERN_PREMIUM_LOGO_ASSET_SWAP: replace the baked logo in the
   immutable reference canvas with the existing DOM logo asset.  The card
   slot geometry is intentionally inherited from STAGE 2H; only the visual
   source is restored, and the opaque asset covers the baked logo below it. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-modern .nok-logo-card {
    display: block !important;
    visibility: visible !important;
    pointer-events: none !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: #050d16 !important;
    box-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-logo-card > .nok-logo-image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}

/* STAGE MODERN_PREMIUM_BOTTOM_5_BUTTONS_PLACEMENT: the approved 1536x1024
   canvas has five colored slots at the bottom-left.  The immutable PNG owns
   those pixels, so this single opaque action-bar surface masks only that strip
   before the existing HTML buttons paint their labels and hit areas. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar {
    box-sizing: border-box !important;
    position: fixed !important;
    inset: 904px auto auto 25px !important;
    width: 1123px !important;
    height: 77px !important;
    display: grid !important;
    grid-template-columns: 215px 210px 206px 207px 222px !important;
    grid-template-rows: 64px !important;
    grid-auto-flow: row !important;
    grid-auto-rows: 64px !important;
    gap: 0 14px !important;
    margin: 0 !important;
    padding: 6px 0 7px 7px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: linear-gradient(180deg, #071625 0%, #020910 100%) !important;
    box-shadow:
      inset 0 0 0 2px rgba(244, 189, 72, .94),
      inset 0 0 0 3px rgba(24, 41, 58, .96),
      0 8px 20px rgba(0, 0, 0, .48) !important;
    z-index: 40 !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > .nok-action-presentation {
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 64px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 64px !important;
    margin: 0 !important;
    padding: 7px 8px 6px !important;
    border: 2px solid rgba(144, 220, 255, .9) !important;
    border-radius: 12px !important;
    color: #f7fbff !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    letter-spacing: .025em !important;
    line-height: 1.05 !important;
    text-align: center !important;
    text-shadow: 0 2px 2px rgba(0, 0, 0, .94), 0 0 8px rgba(215, 247, 255, .24) !important;
    white-space: normal !important;
    overflow: hidden !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    transform: none !important;
    transition: filter .16s ease, border-color .16s ease, box-shadow .16s ease, transform .08s ease !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > .nok-action-presentation::before {
    display: block !important;
    margin-right: .32em !important;
    color: currentColor !important;
    font-family: "Segoe UI Symbol", "Arial Unicode MS", sans-serif !important;
    font-size: 1.55em !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-shadow: 0 0 9px currentColor !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokAutoSortPresentation {
    grid-column: 1 !important;
    grid-row: 1 !important;
    border-color: #58bdf2 !important;
    background: linear-gradient(180deg, #156ea9 0%, #073b67 52%, #031c36 100%) !important;
    box-shadow:
      inset 0 2px 0 rgba(223, 248, 255, .68),
      inset 0 -6px 0 rgba(1, 13, 31, .64),
      0 3px 0 rgba(0, 8, 19, .98),
      0 0 0 1px rgba(76, 188, 255, .66),
      0 0 19px rgba(35, 164, 245, .42) !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokAutoSortPresentation::before { content: "\2261\00A0" !important; }

  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokDoubleGoButton {
    grid-column: 2 !important;
    grid-row: 1 !important;
    border-color: #ffd76d !important;
    background: linear-gradient(180deg, #e0a12d 0%, #8d5818 52%, #3d210d 100%) !important;
    box-shadow:
      inset 0 2px 0 rgba(255, 251, 212, .74),
      inset 0 -6px 0 rgba(58, 25, 3, .64),
      0 3px 0 rgba(28, 10, 1, .98),
      0 0 0 1px rgba(255, 207, 76, .7),
      0 0 19px rgba(255, 183, 46, .42) !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokDoubleGoButton::before { content: "\2161\00A0" !important; }

  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokJokerButton {
    grid-column: 3 !important;
    grid-row: 1 !important;
    border-color: #ff5e58 !important;
    background: linear-gradient(180deg, #c9363c 0%, #78151c 52%, #31080e 100%) !important;
    box-shadow:
      inset 0 2px 0 rgba(255, 231, 219, .68),
      inset 0 -6px 0 rgba(42, 2, 8, .66),
      0 3px 0 rgba(24, 2, 5, .98),
      0 0 0 1px rgba(255, 74, 72, .66),
      0 0 19px rgba(244, 54, 54, .38) !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokJokerButton::before { content: "\2605\00A0" !important; }

  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokUndoButton {
    grid-column: 4 !important;
    grid-row: 1 !important;
    border-color: #62e3ad !important;
    background: linear-gradient(180deg, #148f69 0%, #07543f 52%, #03271f 100%) !important;
    box-shadow:
      inset 0 2px 0 rgba(225, 255, 241, .7),
      inset 0 -6px 0 rgba(1, 31, 24, .64),
      0 3px 0 rgba(0, 19, 14, .98),
      0 0 0 1px rgba(70, 222, 163, .62),
      0 0 19px rgba(31, 214, 145, .36) !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokUndoButton::before { content: "\21B6\00A0" !important; }

  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokOperationsButton {
    grid-column: 5 !important;
    grid-row: 1 !important;
    border-color: #58bdf2 !important;
    background: linear-gradient(180deg, #156ea9 0%, #073b67 52%, #031c36 100%) !important;
    box-shadow:
      inset 0 2px 0 rgba(223, 248, 255, .68),
      inset 0 -6px 0 rgba(1, 13, 31, .64),
      0 3px 0 rgba(0, 8, 19, .98),
      0 0 0 1px rgba(76, 188, 255, .66),
      0 0 19px rgba(35, 164, 245, .42) !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokOperationsButton::before { content: "\2637\00A0" !important; }

  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > .nok-action-presentation:hover:not(:disabled) {
    filter: brightness(1.18) saturate(1.08) !important;
    border-color: #fff0b0 !important;
    box-shadow:
      inset 0 2px 0 rgba(255, 255, 255, .82),
      inset 0 -4px 0 rgba(0, 4, 12, .58),
      0 5px 0 rgba(0, 7, 17, .92),
      0 0 0 1px currentColor,
      0 0 25px currentColor !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > .nok-action-presentation:active:not(:disabled) {
    transform: translateY(2px) !important;
    filter: brightness(.94) !important;
    box-shadow: inset 0 4px 8px rgba(0, 0, 0, .62), 0 1px 0 rgba(0, 0, 0, .82) !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > .nok-action-presentation:focus-visible {
    outline: 2px solid rgba(255, 236, 153, .98) !important;
    outline-offset: -4px !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > .nok-action-presentation:disabled {
    cursor: not-allowed !important;
    filter: saturate(.62) brightness(.82) !important;
    opacity: .72 !important;
  }

  /* The immutable five-slot reference has no sixth report surface.  Keep the
     report node and its existing handler mounted, but do not create a sixth
     row or invent a new bottom location for it. */
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokReportButton {
    display: none !important;
  }
}

/* STAGE TOP_5_EXACT_REFERENCE_BUTTON_ASSETS: use the immutable approved PNG
   as the five existing button surfaces.  The canvas is sampled per button by
   background-position; no full-canvas overlay, gradient, shadow, border, or
   replacement DOM button is introduced.  The preceding coordinate rules own
   every width, height, gap, and parent offset. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-modern .nok-top-controls::before,
  #matchPanel.normal-okey.table-theme-modern .nok-top-controls::after,
  #matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control::before,
  #matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control::after {
    content: none !important;
    display: none !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control,
  #matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:hover,
  #matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:active,
  #matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:focus {
    box-sizing: border-box !important;
    background-color: transparent !important;
    background-image: url("/okey/modern/MODERN_PREMIUM_3D_BUTTONS_APPROVED.png") !important;
    background-repeat: no-repeat !important;
    background-size: 1536px 1024px !important;
    background-origin: border-box !important;
    border: 0 !important;
    box-shadow: none !important;
    color: rgba(0, 0, 0, 0) !important;
    text-indent: -10000px !important;
    text-shadow: none !important;
    overflow: hidden !important;
    pointer-events: auto !important;
    transform: none !important;
    filter: none !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:nth-child(1) {
    background-position: -730px -16px !important;
  }
  #matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:nth-child(2) {
    background-position: -892px -16px !important;
  }
  #matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:nth-child(3) {
    background-position: -1038px -16px !important;
  }
  #matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:nth-child(4) {
    background-position: -1195px -16px !important;
  }
  #matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:nth-child(5) {
    background-position: -1343px -16px !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:disabled {
    opacity: 1 !important;
  }
}

/* STAGE MODERN_PREMIUM_BOTTOM_13_EXACT_ASSETS: the approved Modern reference
   supplies the two lower button rows.  Each existing control samples one
   lossless crop; no CSS-painted button surface or full-canvas overlay is
   introduced.  State, DOM ownership, and event handlers remain live. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none !important;
    z-index: 42 !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-live-actions > #standTableButton:not([hidden]):not(.hidden),
  #matchPanel.normal-okey.table-theme-modern .nok-live-actions > #readyButton:not([hidden]):not(.hidden),
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokAutoSortPresentation:not([hidden]):not(.hidden),
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokDoubleGoButton:not([hidden]):not(.hidden),
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokJokerButton:not([hidden]):not(.hidden),
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokUndoButton:not([hidden]):not(.hidden),
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokOperationsButton:not([hidden]):not(.hidden),
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokReportButton:not([hidden]):not(.hidden),
  #matchPanel.normal-okey.table-theme-modern #normalOkeyBottomMenu:not([hidden]) [data-bottom-menu="games"],
  #matchPanel.normal-okey.table-theme-modern #normalOkeyBottomMenu:not([hidden]) [data-bottom-menu="lobbies"],
  #matchPanel.normal-okey.table-theme-modern #normalOkeyBottomMenu:not([hidden]) [data-bottom-menu="operations"],
  #matchPanel.normal-okey.table-theme-modern #normalOkeyBottomMenu:not([hidden]) [data-bottom-menu="private"],
  #matchPanel.normal-okey.table-theme-modern #normalOkeyBottomMenu:not([hidden]) [data-bottom-menu="messages"] {
    position: fixed !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: 0 0 !important;
    background-origin: border-box !important;
    background-clip: border-box !important;
    box-shadow: none !important;
    color: rgba(0, 0, 0, 0) !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -10000px !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    pointer-events: auto !important;
    z-index: 43 !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-live-actions > #standTableButton:not([hidden]):not(.hidden),
  #matchPanel.normal-okey.table-theme-modern .nok-live-actions > #readyButton:not([hidden]):not(.hidden),
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokAutoSortPresentation:not([hidden]):not(.hidden),
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokDoubleGoButton:not([hidden]):not(.hidden),
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokJokerButton:not([hidden]):not(.hidden),
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokUndoButton:not([hidden]):not(.hidden),
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokOperationsButton:not([hidden]):not(.hidden),
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokReportButton:not([hidden]):not(.hidden) {
    width: auto !important;
    height: auto !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-live-actions > #standTableButton:not([hidden]):not(.hidden) {
    left: 34px !important;
    top: 822px !important;
    width: 159px !important;
    height: 67px !important;
    background-image: url("/okey/modern/bottom-buttons/01-masadan-kalk.png") !important;
    background-size: 159px 67px !important;
  }
  #matchPanel.normal-okey.table-theme-modern .nok-live-actions > #readyButton:not([hidden]):not(.hidden) {
    left: 203px !important;
    top: 822px !important;
    width: 139px !important;
    height: 67px !important;
    background-image: url("/okey/modern/bottom-buttons/02-hazirim.png") !important;
    background-size: 139px 67px !important;
  }
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokAutoSortPresentation:not([hidden]):not(.hidden) {
    left: 351px !important;
    top: 822px !important;
    width: 121px !important;
    height: 67px !important;
    background-image: url("/okey/modern/bottom-buttons/03-otomatik-diz.png") !important;
    background-size: 121px 67px !important;
  }
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokDoubleGoButton:not([hidden]):not(.hidden) {
    left: 481px !important;
    top: 822px !important;
    width: 115px !important;
    height: 67px !important;
    background-image: url("/okey/modern/bottom-buttons/04-cift-git.png") !important;
    background-size: 115px 67px !important;
  }
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokJokerButton:not([hidden]):not(.hidden) {
    left: 606px !important;
    top: 822px !important;
    width: 115px !important;
    height: 67px !important;
    background-image: url("/okey/modern/bottom-buttons/05-joker.png") !important;
    background-size: 115px 67px !important;
  }
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokUndoButton:not([hidden]):not(.hidden) {
    left: 731px !important;
    top: 822px !important;
    width: 117px !important;
    height: 67px !important;
    background-image: url("/okey/modern/bottom-buttons/06-geri-al.png") !important;
    background-size: 117px 67px !important;
  }
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokOperationsButton:not([hidden]):not(.hidden) {
    left: 858px !important;
    top: 822px !important;
    width: 115px !important;
    height: 67px !important;
    background-image: url("/okey/modern/bottom-buttons/07-islemler.png") !important;
    background-size: 115px 67px !important;
  }
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokReportButton:not([hidden]):not(.hidden) {
    left: 985px !important;
    top: 822px !important;
    width: 140px !important;
    height: 67px !important;
    background-image: url("/okey/modern/bottom-buttons/08-hata-bildir.png") !important;
    background-size: 140px 67px !important;
  }

  #matchPanel.normal-okey.table-theme-modern #normalOkeyBottomMenu:not([hidden]) {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none !important;
    z-index: 42 !important;
  }
  #matchPanel.normal-okey.table-theme-modern #normalOkeyBottomMenu:not([hidden]) > .normal-okey-bottom-menu-group {
    display: contents !important;
    pointer-events: none !important;
  }
  #matchPanel.normal-okey.table-theme-modern #normalOkeyBottomMenu:not([hidden]) [data-bottom-menu]:not([data-bottom-menu="games"]):not([data-bottom-menu="lobbies"]):not([data-bottom-menu="operations"]):not([data-bottom-menu="private"]):not([data-bottom-menu="messages"]) {
    display: none !important;
  }
  #matchPanel.normal-okey.table-theme-modern #normalOkeyBottomMenu:not([hidden]) [data-bottom-menu="games"] {
    left: 29px !important;
    top: 922px !important;
    width: 219px !important;
    height: 71px !important;
    background-image: url("/okey/modern/bottom-buttons/09-oyunlar.png") !important;
    background-size: 219px 71px !important;
  }
  #matchPanel.normal-okey.table-theme-modern #normalOkeyBottomMenu:not([hidden]) [data-bottom-menu="lobbies"] {
    left: 259px !important;
    top: 922px !important;
    width: 216px !important;
    height: 71px !important;
    background-image: url("/okey/modern/bottom-buttons/10-lobiler.png") !important;
    background-size: 216px 71px !important;
  }
  #matchPanel.normal-okey.table-theme-modern #normalOkeyBottomMenu:not([hidden]) [data-bottom-menu="operations"] {
    left: 484px !important;
    top: 922px !important;
    width: 226px !important;
    height: 71px !important;
    background-image: url("/okey/modern/bottom-buttons/11-islemler.png") !important;
    background-size: 226px 71px !important;
  }
  #matchPanel.normal-okey.table-theme-modern #normalOkeyBottomMenu:not([hidden]) [data-bottom-menu="private"] {
    left: 719px !important;
    top: 922px !important;
    width: 216px !important;
    height: 71px !important;
    background-image: url("/okey/modern/bottom-buttons/12-ozel.png") !important;
    background-size: 216px 71px !important;
  }
  #matchPanel.normal-okey.table-theme-modern #normalOkeyBottomMenu:not([hidden]) [data-bottom-menu="messages"] {
    left: 943px !important;
    top: 922px !important;
    width: 213px !important;
    height: 71px !important;
    background-image: url("/okey/modern/bottom-buttons/13-mesaj.png") !important;
    background-size: 213px 71px !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-live-actions > #standTableButton:not([hidden]):not(.hidden)::before,
  #matchPanel.normal-okey.table-theme-modern .nok-live-actions > #readyButton:not([hidden]):not(.hidden)::before,
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > .nok-action-presentation::before,
  #matchPanel.normal-okey.table-theme-modern #normalOkeyBottomMenu:not([hidden]) .normal-okey-bottom-menu-button::before,
  #matchPanel.normal-okey.table-theme-modern #normalOkeyBottomMenu:not([hidden]) .normal-okey-bottom-menu-button::after {
    content: none !important;
    display: none !important;
  }
}

/* STAGE BOTTOM_13_EXACT_ASSET_GEOMETRY_FIX: geometry-only correction for the
   first lower row.  The existing lossless PNG surfaces remain unchanged;
   proportional sizing keeps their native aspect ratios and the second row
   keeps its approved coordinates. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-modern .nok-live-actions > #standTableButton:not([hidden]):not(.hidden),
  #matchPanel.normal-okey.table-theme-modern .nok-live-actions > #readyButton:not([hidden]):not(.hidden),
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokAutoSortPresentation:not([hidden]):not(.hidden),
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokDoubleGoButton:not([hidden]):not(.hidden),
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokJokerButton:not([hidden]):not(.hidden),
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokUndoButton:not([hidden]):not(.hidden),
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokOperationsButton:not([hidden]):not(.hidden),
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokReportButton:not([hidden]):not(.hidden) {
    top: 846px !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-live-actions > #standTableButton:not([hidden]):not(.hidden) {
    left: 53.875px !important;
    width: 119.25px !important;
    height: 50.25px !important;
    background-size: 119.25px 50.25px !important;
  }
  #matchPanel.normal-okey.table-theme-modern .nok-live-actions > #readyButton:not([hidden]):not(.hidden) {
    left: 220.375px !important;
    width: 104.25px !important;
    height: 50.25px !important;
    background-size: 104.25px 50.25px !important;
  }
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokAutoSortPresentation:not([hidden]):not(.hidden) {
    left: 366.125px !important;
    width: 90.75px !important;
    height: 50.25px !important;
    background-size: 90.75px 50.25px !important;
  }
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokDoubleGoButton:not([hidden]):not(.hidden) {
    left: 495.375px !important;
    width: 86.25px !important;
    height: 50.25px !important;
    background-size: 86.25px 50.25px !important;
  }
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokJokerButton:not([hidden]):not(.hidden) {
    left: 620.375px !important;
    width: 86.25px !important;
    height: 50.25px !important;
    background-size: 86.25px 50.25px !important;
  }
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokUndoButton:not([hidden]):not(.hidden) {
    left: 745.625px !important;
    width: 87.75px !important;
    height: 50.25px !important;
    background-size: 87.75px 50.25px !important;
  }
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokOperationsButton:not([hidden]):not(.hidden) {
    left: 872.375px !important;
    width: 86.25px !important;
    height: 50.25px !important;
    background-size: 86.25px 50.25px !important;
  }
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokReportButton:not([hidden]):not(.hidden) {
    left: 1002.5px !important;
    width: 105px !important;
    height: 50.25px !important;
    background-size: 105px 50.25px !important;
  }
}

/* STAGE MODERN_PREMIUM_UI_LAYER_CLEANUP: keep the existing Modern controls
   and immutable PNG surfaces, while removing legacy presentation layers that
   can re-enter after the exact-asset stages.  Shared rack/connection logic
   remains mounted for scripts and diagnostics; only their Modern presentation
   nodes are removed from the visible layer. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-modern .nok-statusbar .nok-settings-panel > .rack-skin-picker {
    display: none !important;
  }

  #matchPanel.normal-okey.table-theme-modern #normalOkeyBottomMenu .nok-connection-control {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-top-controls::before,
  #matchPanel.normal-okey.table-theme-modern .nok-top-controls::after,
  #matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control::before,
  #matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control::after {
    content: none !important;
    display: none !important;
    background: none !important;
    box-shadow: none !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control,
  #matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:is(:hover, :focus, :focus-visible, :active, :disabled) {
    box-sizing: border-box !important;
    background-color: transparent !important;
    background-image: url("/okey/modern/MODERN_PREMIUM_3D_BUTTONS_APPROVED.png") !important;
    background-repeat: no-repeat !important;
    background-size: 1536px 1024px !important;
    background-origin: border-box !important;
    background-clip: border-box !important;
    border: 0 !important;
    box-shadow: none !important;
    color: transparent !important;
    text-indent: -10000px !important;
    text-shadow: none !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    pointer-events: auto !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:nth-child(1),
  #matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:nth-child(1):is(:hover, :focus, :focus-visible, :active, :disabled) {
    background-position: -730px -16px !important;
  }
  #matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:nth-child(2),
  #matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:nth-child(2):is(:hover, :focus, :focus-visible, :active, :disabled) {
    background-position: -892px -16px !important;
  }
  #matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:nth-child(3),
  #matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:nth-child(3):is(:hover, :focus, :focus-visible, :active, :disabled) {
    background-position: -1038px -16px !important;
  }
  #matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:nth-child(4),
  #matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:nth-child(4):is(:hover, :focus, :focus-visible, :active, :disabled) {
    background-position: -1195px -16px !important;
  }
  #matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:nth-child(5),
  #matchPanel.normal-okey.table-theme-modern .nok-top-controls > .nok-top-control:nth-child(5):is(:hover, :focus, :focus-visible, :active, :disabled) {
    background-position: -1343px -16px !important;
  }
}

/* STAGE MODERN_PREMIUM_TOP_CONTROL_STRIP_LEGACY_CLEANUP: keep the existing
   Modern status-strip bounds and live controls, but give its nested status
   and selector groups one explicit, non-overlapping layout contract.  This
   removes presentation-only remnants without changing the shared DOM or
   selector behavior. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-modern .nok-statusbar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-statusbar > .nok-game-status-panel {
    display: flex !important;
    flex: 0 1 auto !important;
    align-items: center !important;
    gap: 4px !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-statusbar > .nok-game-status-panel > span {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-statusbar > .nok-settings-panel {
    display: flex !important;
    flex: 1 1 auto !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-statusbar > .nok-settings-panel > .theme-picker,
  #matchPanel.normal-okey.table-theme-modern .nok-statusbar > .nok-settings-panel > .okey-smart-assist-control,
  #matchPanel.normal-okey.table-theme-modern .nok-statusbar > .nok-settings-panel > .stock-display-picker {
    display: inline-flex !important;
    flex: 0 1 auto !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-statusbar > .nok-settings-panel > .theme-picker select,
  #matchPanel.normal-okey.table-theme-modern .nok-statusbar > .nok-settings-panel > .okey-smart-assist-control select,
  #matchPanel.normal-okey.table-theme-modern .nok-statusbar > .nok-settings-panel > .stock-display-picker select {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 104px !important;
    height: 24px !important;
    box-sizing: border-box !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-statusbar > .nok-settings-panel > .tile-surface-picker,
  #matchPanel.normal-okey.table-theme-modern .nok-statusbar > .nok-settings-panel > .rack-skin-picker {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-statusbar > .nok-settings-panel > .theme-picker::before,
  #matchPanel.normal-okey.table-theme-modern .nok-statusbar > .nok-settings-panel > .theme-picker::after,
  #matchPanel.normal-okey.table-theme-modern .nok-statusbar > .nok-settings-panel > .okey-smart-assist-control::before,
  #matchPanel.normal-okey.table-theme-modern .nok-statusbar > .nok-settings-panel > .okey-smart-assist-control::after,
  #matchPanel.normal-okey.table-theme-modern .nok-statusbar > .nok-settings-panel > .stock-display-picker::before,
  #matchPanel.normal-okey.table-theme-modern .nok-statusbar > .nok-settings-panel > .stock-display-picker::after {
    content: none !important;
    display: none !important;
  }
}
/* STAGE MODERN_PREMIUM_TOP_CONTROL_STRIP_LEGACY_CLEANUP_END */

/* STAGE BOTTOM_RIGHT_GOLD_5_RECONNECT_START
   Existing dashboard/menu controls remain the hit targets.  These surfaces
   are lossless PNG crops; no new controls or CSS-drawn button surfaces. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-modern #normalOkeyBottomMenu:not([hidden]) {
    display: block !important;
  }

  #matchPanel.normal-okey.table-theme-modern #normalOkeyBottomMenu:not([hidden]) > .normal-okey-bottom-menu-right {
    display: contents !important;
    pointer-events: none !important;
  }

  #matchPanel.normal-okey.table-theme-modern #normalOkeyBottomMenu:not([hidden]) > .normal-okey-bottom-menu-right > [data-bottom-menu="messages"],
  #matchPanel.normal-okey.table-theme-modern #normalOkeyBottomMenu:not([hidden]) > .normal-okey-bottom-menu-right > [data-bottom-menu="invites"],
  #matchPanel.normal-okey.table-theme-modern #normalOkeyBottomMenu:not([hidden]) > .normal-okey-bottom-menu-right > [data-bottom-menu="sound"],
  #matchPanel.normal-okey.table-theme-modern #normalOkeyBottomMenu:not([hidden]) > .normal-okey-bottom-menu-right > [data-bottom-menu="help"] {
    display: none !important;
  }

  #dashboardView:has(#matchPanel.normal-okey.table-theme-modern:not(.hidden)) #dashboardActionBar {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none !important;
    z-index: 43 !important;
  }

  #dashboardView:has(#matchPanel.normal-okey.table-theme-modern:not(.hidden)) #dashboardActionBar > .dashboard-action-group-left {
    display: none !important;
  }

  #dashboardView:has(#matchPanel.normal-okey.table-theme-modern:not(.hidden)) #dashboardActionBar > .dashboard-action-group-right {
    display: flex !important;
    position: fixed !important;
    top: auto !important;
    left: auto !important;
    right: calc(1cm + 98px + 8px) !important;
    bottom: 10px !important;
    width: auto !important;
    height: 54px !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 8px !important;
    align-items: center !important;
    pointer-events: none !important;
  }

  #dashboardView:has(#matchPanel.normal-okey.table-theme-modern:not(.hidden)) #dashboardActionBar > .dashboard-action-group-right > [data-bottom-menu="messages"],
  #dashboardView:has(#matchPanel.normal-okey.table-theme-modern:not(.hidden)) #dashboardActionBar > .dashboard-action-group-right > [data-bottom-menu="invites"],
  #dashboardView:has(#matchPanel.normal-okey.table-theme-modern:not(.hidden)) #dashboardActionBar > .dashboard-action-group-right > [data-bottom-menu="sound"],
  #dashboardView:has(#matchPanel.normal-okey.table-theme-modern:not(.hidden)) #dashboardActionBar > .dashboard-action-group-right > [data-bottom-menu="help"],
  #matchPanel.normal-okey.table-theme-modern #normalOkeyBottomMenu:not([hidden]) #nokConnectionButton {
    position: fixed !important;
    top: auto !important;
    left: auto !important;
    bottom: 10px !important;
    flex: 0 0 auto !important;
    width: 98px !important;
    height: 54px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    box-shadow: none !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
    pointer-events: auto !important;
  }

  #dashboardView:has(#matchPanel.normal-okey.table-theme-modern:not(.hidden)) #dashboardActionBar > .dashboard-action-group-right > [data-bottom-menu="messages"] {
    position: static !important;
    width: 97px !important;
    background-image: url("/okey/modern/bottom-right-buttons/01-mesaj.png") !important;
  }

  #dashboardView:has(#matchPanel.normal-okey.table-theme-modern:not(.hidden)) #dashboardActionBar > .dashboard-action-group-right > [data-bottom-menu="invites"] {
    position: static !important;
    width: 98px !important;
    background-image: url("/okey/modern/bottom-right-buttons/02-davet.png") !important;
  }

  #dashboardView:has(#matchPanel.normal-okey.table-theme-modern:not(.hidden)) #dashboardActionBar > .dashboard-action-group-right > [data-bottom-menu="sound"] {
    position: static !important;
    width: 99px !important;
    background-image: url("/okey/modern/bottom-right-buttons/03-ses.png") !important;
  }

  #dashboardView:has(#matchPanel.normal-okey.table-theme-modern:not(.hidden)) #dashboardActionBar > .dashboard-action-group-right > [data-bottom-menu="help"] {
    position: static !important;
    width: 98px !important;
    background-image: url("/okey/modern/bottom-right-buttons/04-yardim.png") !important;
  }

  #matchPanel.normal-okey.table-theme-modern #normalOkeyBottomMenu:not([hidden]) #nokConnectionButton {
    right: 1cm !important;
    background-image: url("/okey/modern/bottom-right-buttons/05-baglanti.png") !important;
    visibility: visible !important;
  }

  #dashboardView:has(#matchPanel.normal-okey.table-theme-modern:not(.hidden)) #dashboardActionBar > .dashboard-action-group-right > [data-bottom-menu="messages"],
  #dashboardView:has(#matchPanel.normal-okey.table-theme-modern:not(.hidden)) #dashboardActionBar > .dashboard-action-group-right > [data-bottom-menu="invites"],
  #dashboardView:has(#matchPanel.normal-okey.table-theme-modern:not(.hidden)) #dashboardActionBar > .dashboard-action-group-right > [data-bottom-menu="sound"],
  #dashboardView:has(#matchPanel.normal-okey.table-theme-modern:not(.hidden)) #dashboardActionBar > .dashboard-action-group-right > [data-bottom-menu="help"] {
    pointer-events: auto !important;
  }

  #dashboardView:has(#matchPanel.normal-okey.table-theme-modern:not(.hidden)) #dashboardActionBar > .dashboard-action-group-right > [data-bottom-menu="messages"]:is(:hover, :focus, :active),
  #dashboardView:has(#matchPanel.normal-okey.table-theme-modern:not(.hidden)) #dashboardActionBar > .dashboard-action-group-right > [data-bottom-menu="invites"]:is(:hover, :focus, :active),
  #dashboardView:has(#matchPanel.normal-okey.table-theme-modern:not(.hidden)) #dashboardActionBar > .dashboard-action-group-right > [data-bottom-menu="sound"]:is(:hover, :focus, :active),
  #dashboardView:has(#matchPanel.normal-okey.table-theme-modern:not(.hidden)) #dashboardActionBar > .dashboard-action-group-right > [data-bottom-menu="help"]:is(:hover, :focus, :active),
  #matchPanel.normal-okey.table-theme-modern #normalOkeyBottomMenu:not([hidden]) #nokConnectionButton:is(:hover, :focus, :active, :disabled) {
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    border: 0 !important;
    box-shadow: none !important;
    color: transparent !important;
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
/* STAGE BOTTOM_RIGHT_GOLD_5_RECONNECT_END */

/* STAGE BOTTOM_RIGHT_GOLD_5_LIVE_VISIBILITY_FIX_START
   The four reusable dashboard controls live inside .lobby-panel.  A match
   window intentionally hides that panel, so a descendant fixed position
   cannot escape its display:none ancestor.  Release only the ancestor's
   formatting context while the Modern Normal Okey match is active, hide its
   unrelated lobby content, and keep the existing action bar as the sole
   interactive surface.  No controls are cloned and no PNG is repainted. */
@media (min-width: 901px) {
  body.match-window:has(#matchPanel.normal-okey.table-theme-modern:not(.hidden)) .lobby-panel {
    display: contents !important;
  }

  body.match-window:has(#matchPanel.normal-okey.table-theme-modern:not(.hidden)) .lobby-panel > :not(#dashboardActionBar) {
    display: none !important;
  }

  body.match-window:has(#matchPanel.normal-okey.table-theme-modern:not(.hidden)) #dashboardActionBar {
    display: block !important;
    visibility: visible !important;
  }
}
/* STAGE BOTTOM_RIGHT_GOLD_5_LIVE_VISIBILITY_FIX_END */

/* STAGE BOTTOM_RIGHT_GOLD_5_JOKER_SIZE_FIX_START
   Match the five preserved PNG surfaces to the existing Modern Premium
   JOKER presentation geometry.  The connection control remains the sole
   existing DOM hit target; no controls or image surfaces are cloned. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-modern #normalOkeyBottomMenu {
    --modern-joker-visible-width: min(86.25px, 5.615234375vw);
    --modern-joker-visible-height: min(50.25px, 3.271484375vw);
    display: block !important;
    visibility: visible !important;
    overflow: visible !important;
    z-index: 44 !important;
  }

  #dashboardView:has(#matchPanel.normal-okey.table-theme-modern:not(.hidden)) #dashboardActionBar {
    --modern-joker-visible-width: min(86.25px, 5.615234375vw);
    --modern-joker-visible-height: min(50.25px, 3.271484375vw);
  }

  #matchPanel.normal-okey.table-theme-modern #normalOkeyBottomMenu > .normal-okey-bottom-menu-right {
    display: contents !important;
    visibility: visible !important;
    overflow: visible !important;
  }

  #dashboardView:has(#matchPanel.normal-okey.table-theme-modern:not(.hidden)) #dashboardActionBar > .dashboard-action-group-right {
    right: calc(1cm + var(--modern-joker-visible-width) + 8px) !important;
    height: var(--modern-joker-visible-height) !important;
    gap: 8px !important;
  }

  #dashboardView:has(#matchPanel.normal-okey.table-theme-modern:not(.hidden)) #dashboardActionBar > .dashboard-action-group-right > [data-bottom-menu="messages"],
  #dashboardView:has(#matchPanel.normal-okey.table-theme-modern:not(.hidden)) #dashboardActionBar > .dashboard-action-group-right > [data-bottom-menu="invites"],
  #dashboardView:has(#matchPanel.normal-okey.table-theme-modern:not(.hidden)) #dashboardActionBar > .dashboard-action-group-right > [data-bottom-menu="sound"],
  #dashboardView:has(#matchPanel.normal-okey.table-theme-modern:not(.hidden)) #dashboardActionBar > .dashboard-action-group-right > [data-bottom-menu="help"],
  #matchPanel.normal-okey.table-theme-modern #normalOkeyBottomMenu #nokConnectionButton {
    width: var(--modern-joker-visible-width) !important;
    height: var(--modern-joker-visible-height) !important;
    min-width: var(--modern-joker-visible-width) !important;
    min-height: var(--modern-joker-visible-height) !important;
    flex: 0 0 var(--modern-joker-visible-width) !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    box-sizing: border-box !important;
  }

  #matchPanel.normal-okey.table-theme-modern #normalOkeyBottomMenu #nokConnectionButton {
    position: fixed !important;
    right: 1cm !important;
    bottom: 10px !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 44 !important;
    pointer-events: auto !important;
  }

  #matchPanel.normal-okey.table-theme-modern #normalOkeyBottomMenu #nokConnectionButton:is(:hover, :focus, :active, :disabled) {
    background-size: contain !important;
    background-position: center !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

@media (min-width: 901px) and (max-aspect-ratio: 3 / 2) {
  #matchPanel.normal-okey.table-theme-modern #normalOkeyBottomMenu,
  #dashboardView:has(#matchPanel.normal-okey.table-theme-modern:not(.hidden)) #dashboardActionBar {
    --modern-joker-visible-width: min(86.25px, 5.615234375vw, 8.4228515625vh);
    --modern-joker-visible-height: min(50.25px, 3.271484375vw, 4.9072265625vh);
  }
}
/* STAGE BOTTOM_RIGHT_GOLD_5_JOKER_SIZE_FIX_END */

/* STAGE BOTTOM_RIGHT_BAGLANTI_ONLY_FIX_START
   Move the existing connection hit target between the legacy menu group and
   the Modern dashboard group at runtime.  Classic keeps the legacy parent;
   Modern uses the same visible dashboard group as the four existing crops. */
@media (min-width: 901px) {
  #dashboardView:has(#matchPanel.normal-okey.table-theme-modern:not(.hidden)) #dashboardActionBar > .dashboard-action-group-right {
    right: 1cm !important;
  }

  #dashboardView:has(#matchPanel.normal-okey.table-theme-modern:not(.hidden)) #dashboardActionBar > .dashboard-action-group-right > #nokConnectionButton {
    position: static !important;
    inset: auto !important;
    width: var(--modern-joker-visible-width) !important;
    height: var(--modern-joker-visible-height) !important;
    min-width: var(--modern-joker-visible-width) !important;
    min-height: var(--modern-joker-visible-height) !important;
    flex: 0 0 var(--modern-joker-visible-width) !important;
    display: flex !important;
    overflow: hidden !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    white-space: nowrap !important;
    background-color: transparent !important;
    background-image: url("/okey/modern/bottom-right-buttons/05-baglanti.png") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
    pointer-events: auto !important;
  }

  #dashboardView:has(#matchPanel.normal-okey.table-theme-modern:not(.hidden)) #dashboardActionBar > .dashboard-action-group-right > #nokConnectionButton:is(:hover, :focus, :active, :disabled) {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: transparent !important;
    background-color: transparent !important;
    background-image: url("/okey/modern/bottom-right-buttons/05-baglanti.png") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
  }
}
/* STAGE BOTTOM_RIGHT_BAGLANTI_ONLY_FIX_END */

/* STAGE MODERN_PREMIUM_TILE_VISUAL_ALIGNMENT_FIX_START
   The shared rack contract intentionally packs tiles with width: calc(100% +
   8px) and a negative right margin.  Modern Premium uses an eight-slot
   two-row grid plus measured free-rack collision repair, so that legacy
   expansion makes a full row wider than its available content box.  Keep the
   canonical tile assets and slot/drag DOM intact; make only the Modern tile
   surface fit its owning slot. */
.match-panel.normal-okey.table-theme-modern .nok-own-station #handTiles > .rack-slot > .tile {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}
/* STAGE MODERN_PREMIUM_TILE_VISUAL_ALIGNMENT_FIX_END */

/* STAGE MODERN_PREMIUM_DRAG_TILE_OPACITY_FIX_START
   The shared rack stylesheet dims .tile.dragging for the legacy HTML5 drag
   path.  Normal Okey uses the pointer-capture preview path instead; keep the
   Modern atlas surface visually identical while it is being moved. */
.match-panel.normal-okey.table-theme-modern #handTiles .tile.dragging {
  opacity: 1 !important;
}
/* STAGE MODERN_PREMIUM_DRAG_TILE_OPACITY_FIX_END */

/* STAGE MODERN_TILE_ASPECT_RATIO_REPAIR_START
   Modern atlas tiles are 51x71.  Keep the measured rack slots and the
   two-row placement unchanged, but let each tile surface derive its width
   from its bounded height instead of stretching across the whole slot. */
.match-panel.normal-okey.table-theme-modern .nok-own-station #handTiles > .rack-slot > .tile {
  box-sizing: border-box !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: min(100%, 72px) !important;
  aspect-ratio: 51 / 71 !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}
.match-panel.normal-okey.table-theme-modern .nok-own-station #handTiles > .rack-slot > .tile.tile-asset > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
/* STAGE MODERN_TILE_ASPECT_RATIO_REPAIR_END */

/* STAGE MODERN_TILE_COMPACT_TRACK_FIX_START
   Modern Premium keeps eight logical columns, but the tracks must follow the
   portrait tile width instead of stretching across the rack.  The 26.89px
   inset preserves the measured first-tile anchor from the 94px legacy track
   (94px - 40.22px) / 2.  renderRack() measures these actual tracks before it
   installs its absolute presentation positions, so CSS and JS share one
   geometry without changing slot IDs, order, or drag/drop behavior. */
@media (min-width: 1181px) {
  .match-panel.normal-okey.table-theme-modern .nok-own-station #handTiles {
    box-sizing: border-box !important;
    grid-template-columns: repeat(8, minmax(40.22px, max-content)) !important;
    justify-content: start !important;
    column-gap: 4px !important;
    row-gap: 4px !important;
    padding-inline-start: 26.89px !important;
    padding-inline-end: 0 !important;
  }
}
/* STAGE MODERN_TILE_COMPACT_TRACK_FIX_END */

/* STAGE MODERN_OWN_RACK_PNG_ANCHOR_FIX_START
   The Modern reference PNG contains the physical own-rack surface at
   approximately canonical y=684..819.  The live hand surface is 116px tall
   inside its 132px rack (8px inset on each side), so centering that live
   surface on the PNG surface gives station top=685.5px.  #gameBoard begins
   at canonical y=449.94px in the measured presentation, hence the
   board-local top=235.56px.  Keep the existing width, height, tile grid,
   slot contract, and drag/drop behavior unchanged. */
.match-panel.normal-okey.table-theme-modern > .nok-presentation #gameBoard > .nok-own-station {
  position: absolute !important;
  left: 0 !important;
  top: 235.56px !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
}
/* STAGE MODERN_OWN_RACK_PNG_ANCHOR_FIX_END */

/* STAGE MODERN_RACK_TWO_ROW_INNER_ALIGNMENT_START
   The main station anchor stays locked.  The two-row live hand surface
   begins 9.5px below the upper edge of the PNG's dark inner rack surface;
   move only that single measured inner surface upward.  Keep the 8x2 grid,
   4px row gap, tile dimensions, slot order, and renderRack measurements
   unchanged so both rows remain one coherent logical rack. */
@media (min-width: 1181px) {
  .match-panel.normal-okey.table-theme-modern .nok-own-station #handTiles {
    position: relative !important;
    top: -9.5px !important;
    row-gap: 4px !important;
  }
}
/* STAGE MODERN_RACK_TWO_ROW_INNER_ALIGNMENT_END */

/* STAGE MODERN_RACK_ACTION_BUTTON_COLLISION_FIX_START
   Keep the measured own-rack and hand-tile geometry unchanged.  The prior
   bottom-row geometry stage placed the shared Modern action controls at
   canonical y=846px, which overlaps the lower hand row.  Move only the
   existing action-bar children to the last free canonical slot before the
   locked second bottom row (y=922px); widths, heights, assets, hit targets,
   and event handlers remain unchanged. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokAutoSortPresentation:not([hidden]):not(.hidden),
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokDoubleGoButton:not([hidden]):not(.hidden),
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokJokerButton:not([hidden]):not(.hidden),
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokUndoButton:not([hidden]):not(.hidden),
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokOperationsButton:not([hidden]):not(.hidden),
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokReportButton:not([hidden]):not(.hidden) {
    top: 871px !important;
  }
}
/* STAGE MODERN_RACK_ACTION_BUTTON_COLLISION_FIX_END */

/* STAGE MODERN_TILES_AND_ACTIONS_UP_1_5CM_START
   Apply the measured canonical-coordinate delta only to the Modern action
   row.  The presentation scale converts 56.693px to about 47.24 screen px
   at scale=.833333; the rack, board, tile dimensions, and action-button
   dimensions remain untouched.  The hand surface keeps its single measured
   inner-rack anchor below, so the desktop action adjustment cannot become a
   second rack anchor. */
@media (min-width: 901px) {
  .match-panel.normal-okey.table-theme-modern > .nok-presentation {
    --modern-premium-up-15cm: 56.693px;
  }

  .match-panel.normal-okey.table-theme-modern .nok-action-bar > #nokAutoSortPresentation:not([hidden]):not(.hidden),
  .match-panel.normal-okey.table-theme-modern .nok-action-bar > #nokDoubleGoButton:not([hidden]):not(.hidden),
  .match-panel.normal-okey.table-theme-modern .nok-action-bar > #nokJokerButton:not([hidden]):not(.hidden),
  .match-panel.normal-okey.table-theme-modern .nok-action-bar > #nokUndoButton:not([hidden]):not(.hidden),
  .match-panel.normal-okey.table-theme-modern .nok-action-bar > #nokOperationsButton:not([hidden]):not(.hidden),
  .match-panel.normal-okey.table-theme-modern .nok-action-bar > #nokReportButton:not([hidden]):not(.hidden) {
    top: calc(871px - var(--modern-premium-up-15cm)) !important;
  }
}

@media (min-width: 1181px) {
  .match-panel.normal-okey.table-theme-modern .nok-own-station #handTiles {
    top: -9.5px !important;
  }
}
/* STAGE MODERN_TILES_AND_ACTIONS_UP_1_5CM_END */

/* STAGE MODERN_RACK_PNG_CHANNEL_WIDTH_FIX_START
   At 1024px the earlier percentage cap reduced the live hand surface to
   581.037px while the reference PNG's usable inner rack channel is the
   canonical ~744px hand surface inside the 760px station.  Expand only the
   Modern station in the 901..1180 breakpoint so the transparent DOM surface
   follows the baked PNG channel; the presentation transform still supplies
   the one responsive scale and freeRackBounds() continues to measure the
   resulting content box.  The desktop width is already 760px. */
@media (min-width: 901px) and (max-width: 1180px) {
  .match-panel.normal-okey.table-theme-modern > .nok-presentation #gameBoard > .nok-own-station {
    width: 760px !important;
    max-width: none !important;
  }
}
/* STAGE MODERN_RACK_PNG_CHANNEL_WIDTH_FIX_END */

/* STAGE MODERN_SIX_ACTION_BUTTONS_UP_1CM_START
   The supplied live measurement is the authoritative current action-row
   position: canonical y=871px -> screen y=725.83px at scale=.833333.
   Move only these six existing action surfaces by one canonical CSS cm
   (37.795px).  This absolute canonical target avoids compounding the prior
   presentation-scale offset; rack, hand tiles, dimensions, and assets stay
   untouched. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokAutoSortPresentation:not([hidden]):not(.hidden),
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokDoubleGoButton:not([hidden]):not(.hidden),
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokJokerButton:not([hidden]):not(.hidden),
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokUndoButton:not([hidden]):not(.hidden),
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokOperationsButton:not([hidden]):not(.hidden),
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokReportButton:not([hidden]):not(.hidden) {
    top: calc(871px - 37.795px) !important;
  }
}
/* STAGE MODERN_SIX_ACTION_BUTTONS_UP_1CM_END */

/* STAGE MODERN_ACTION_BUTTON_LIVE_MEASURED_CLEARANCE_START
   At viewport 1024x719 the Modern presentation scale is 2/3.  The live
   lower hand row ends at screen y=583.7px, so the five visible game controls
   must start at or below y=589.7px for the required six-pixel clearance.
   That measured screen coordinate maps to canonical y=884.55px.  Keep the
   rack, slots, tile dimensions, free-rack placement, and hidden report
   control unchanged. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokAutoSortPresentation:not([hidden]):not(.hidden),
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokDoubleGoButton:not([hidden]):not(.hidden),
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokJokerButton:not([hidden]):not(.hidden),
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokUndoButton:not([hidden]):not(.hidden),
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokOperationsButton:not([hidden]):not(.hidden) {
    top: 884.55px !important;
  }
}
/* STAGE MODERN_ACTION_BUTTON_LIVE_MEASURED_CLEARANCE_END */

/* STAGE MODERN_ACTION_BUTTONS_BOTTOM_BLACK_STRIP_START
   The Modern bottom strip occupies canonical y=922..993 (71px).  Keep the
   existing 50.25px button surfaces and place only the five game controls in
   one left-aligned row inside that strip.  The canonical y=932.25px centers
   the controls in the strip and keeps their screen bottom aligned with the
   measured dashboard-right band at the 1024x719 reference viewport.  The
   report control and the right-side navigation remain unchanged. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokAutoSortPresentation:not([hidden]):not(.hidden),
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokDoubleGoButton:not([hidden]):not(.hidden),
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokJokerButton:not([hidden]):not(.hidden),
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokUndoButton:not([hidden]):not(.hidden),
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokOperationsButton:not([hidden]):not(.hidden) {
    top: 932.25px !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokAutoSortPresentation:not([hidden]):not(.hidden) {
    left: 29px !important;
  }
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokDoubleGoButton:not([hidden]):not(.hidden) {
    left: 129.75px !important;
  }
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokJokerButton:not([hidden]):not(.hidden) {
    left: 226px !important;
  }
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokUndoButton:not([hidden]):not(.hidden) {
    left: 322.25px !important;
  }
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar > #nokOperationsButton:not([hidden]):not(.hidden) {
    left: 420px !important;
  }
}
/* STAGE MODERN_ACTION_BUTTONS_BOTTOM_BLACK_STRIP_END */

/* STAGE MODERN_DISCARD_CONTAINING_BLOCK_HEIGHT_FIX_START
   The Modern board's live #gameBoard is intentionally a 30px gameplay
   strip, so its inset play-area cannot be used as the discard coordinate
   plane.  Position only the four Modern discard hosts against the
   transformed 1536x1024 presentation canvas.  The presentation transform
   then applies the responsive scale exactly once; the board, racks, center
   stock, controls, and game hitboxes remain unchanged. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-modern #discardSeat1,
  #matchPanel.normal-okey.table-theme-modern #discardSeat2,
  #matchPanel.normal-okey.table-theme-modern #discardSeat3,
  #matchPanel.normal-okey.table-theme-modern #discardSeat4 {
    position: fixed !important;
    inset: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
  }

  /* Canonical centers: ALT, SAĞ, ÜST, SOL. */
  #matchPanel.normal-okey.table-theme-modern #discardSeat1 {
    /* Ekol bottom: +57.140625px canonical X correction from live Chrome;
       Y remains locked to the existing reference. */
    left: 874.125px !important;
    top: 589.8px !important;
  }

  #matchPanel.normal-okey.table-theme-modern #discardSeat2 {
    left: 836.4px !important;
    top: 411px !important;
  }

  #matchPanel.normal-okey.table-theme-modern #discardSeat3 {
    left: 372.6px !important;
    /* Aysu's top discard: retain the measured clearance correction and apply
       one additional -15px Y delta.  The runtime inline anchor uses 396px,
       so this fallback has the same final position without stacking offsets. */
    top: calc(406.2px + 10.17px) !important;
  }

  #matchPanel.normal-okey.table-theme-modern #discardSeat4 {
    left: 309px !important;
    /* Aysu left-bottom: -16.01 screen px at the live 5/6 presentation
       scale equals -19.212 canonical CSS px; X remains locked. */
    top: 589.788px !important;
  }
}
/* STAGE MODERN_DISCARD_CONTAINING_BLOCK_HEIGHT_FIX_END */

/* STAGE MODERN_DISCARD_SINGLE_VISIBLE_FACE_START
   Keep the authoritative same-seat discard history in the DOM for ownership,
   count, and interaction state, but only the latest face is painted.  The
   previous Modern stack rendered every historical face at the same (0,0)
   offset, allowing atlas digits/colors to show through one another. */
#matchPanel.normal-okey.table-theme-modern
  .modern-discard-stack > .board-tile[data-modern-discard-face="history"] {
  visibility: hidden !important;
  pointer-events: none !important;
}

#matchPanel.normal-okey.table-theme-modern
  .modern-discard-stack > .board-tile[data-modern-discard-face="latest"] {
  visibility: visible !important;
  pointer-events: auto !important;
}
/* STAGE MODERN_DISCARD_SINGLE_VISIBLE_FACE_END */

/* STAGE MODERN_DISCARD_CLASSIC_ATLAS_FIT_START
   Modern discard faces reuse the same Classic Atlas image family as the
   PASS + LOCKED rack tiles.  Keep the existing discard box and anchors, but
   fit the single atlas image without distortion and pin its visible base to
   the box baseline. */
#matchPanel.normal-okey.table-theme-modern
  .modern-discard-stack > .board-tile.tile-asset.classic-atlas-tile
  > img.classic-atlas-tile-image {
  object-fit: contain !important;
  object-position: center bottom !important;
}
/* STAGE MODERN_DISCARD_CLASSIC_ATLAS_FIT_END */

/* STAGE MODERN_DISCARD_ATLAS_OUTER_FRAME_REMOVAL_START
   The Classic Atlas image owns the visible tile edge.  Keep the Modern
   discard button, its selectable state, dimensions, and shadow, but remove
   only the duplicate Modern theme border around the Atlas face. */
#matchPanel.normal-okey.table-theme-modern
  .modern-discard-stack > .board-tile.tile-asset.classic-atlas-tile {
  border-color: transparent !important;
}
/* STAGE MODERN_DISCARD_ATLAS_OUTER_FRAME_REMOVAL_END */

/* STAGE MODERN_DISCARD_ATLAS_SIZE_EQUALIZATION_START
   Match the visible Atlas face to the terminal Modern rack tile box.  The
   discard stack, its four fixed anchors, and its counter remain unchanged;
   only the absolutely anchored child face grows in place. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-modern
    .modern-discard-stack > .board-tile.tile-asset.classic-atlas-tile {
    box-sizing: border-box !important;
    width: 62.72px !important;
    min-width: 62.72px !important;
    max-width: 62.72px !important;
    height: 87.36px !important;
    min-height: 87.36px !important;
    max-height: 87.36px !important;
    aspect-ratio: 51 / 71 !important;
  }
}
/* STAGE MODERN_DISCARD_ATLAS_SIZE_EQUALIZATION_END */

/* STAGE MODERN_DISCARD_COUNT_CLEARANCE_START
   The count is a real gameplay label created by renderModernDiscardStack;
   it is not part of the tile atlas.  Anchor it outside the logical stack
   footprint so the glyph cannot paint over the latest discard face when the
   presentation is scaled or the atlas face extends to the stack edge. */
#matchPanel.normal-okey.table-theme-modern
  .modern-discard-stack > .discard-stack-count {
  left: calc(100% + 6px) !important;
  top: auto !important;
  right: auto !important;
  bottom: 0 !important;
  transform: none !important;
  min-width: 18px !important;
  padding: 2px 3px !important;
  border: 1px solid rgba(255, 240, 198, .34) !important;
  border-radius: 4px !important;
  background: rgba(24, 13, 8, .88) !important;
  color: #fff0c5 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .78) !important;
  z-index: 10 !important;
  pointer-events: none !important;
}
/* STAGE MODERN_DISCARD_COUNT_CLEARANCE_END */

/* STAGE MODERN_DISCARD_COUNTER_PREMIUM_ALIGNMENT_START
   The Modern Atlas face is intentionally larger than its unchanged logical
   discard stack (62.72 x 87.36px versus 45 x 62px).  Position the real
   counter from the visible face box, not from the smaller stack containing
   block.  The stack anchors, tile geometry, counter value, and hit targets
   remain unchanged; only the counter's visual placement and finish change. */
#matchPanel.normal-okey.table-theme-modern
  .modern-discard-stack > .discard-stack-count {
  --modern-discard-visible-width: 42px;
  --modern-discard-visible-height: 58px;
  --modern-discard-counter-gap: 6px;
  --modern-discard-counter-width: 26px;
  --modern-discard-counter-height: 20px;
  position: absolute !important;
  left: calc(var(--modern-discard-visible-width) + var(--modern-discard-counter-gap)) !important;
  top: calc(var(--modern-discard-visible-height) - var(--modern-discard-counter-height)) !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--modern-discard-counter-width) !important;
  min-width: var(--modern-discard-counter-width) !important;
  height: var(--modern-discard-counter-height) !important;
  min-height: var(--modern-discard-counter-height) !important;
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 3px !important;
  border: 1px solid rgba(235, 193, 112, .58) !important;
  border-radius: 5px !important;
  background: linear-gradient(180deg, rgba(43, 27, 16, .96), rgba(16, 10, 8, .96)) !important;
  color: #f8e8c2 !important;
  font-family: "Segoe UI", Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .72) !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .32), inset 0 1px rgba(255, 248, 218, .1) !important;
  z-index: 10 !important;
  pointer-events: none !important;
  white-space: nowrap !important;
}
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-modern
    .modern-discard-stack > .discard-stack-count {
    --modern-discard-visible-width: 62.72px;
    --modern-discard-visible-height: 87.36px;
    --modern-discard-counter-gap: 8px;
  }
}
/* STAGE MODERN_DISCARD_COUNTER_PREMIUM_ALIGNMENT_END */

/* STAGE MODERN_UNUSED_UNOWNED_DISCARD_PLACEHOLDER_HIDE_START
   Normal Okey renders player-owned discards in the four seat hosts.  The
   center #unownedDiscard container is cleared on every Normal Okey render
   and is not a drop target; keep the DOM contract intact while removing
   only its Modern placeholder border/background. */
#matchPanel.normal-okey.table-theme-modern .unowned-discard {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* STAGE MODERN_UNUSED_UNOWNED_DISCARD_PLACEHOLDER_HIDE_END */

/* STAGE MODERN_OPPONENT_HAND_COUNT_CLEARANCE_START
   The visible hand count is a data-backed opponent-rack pseudo-element,
   distinct from .discard-stack-count.  Keep attr(data-hand-count) live,
   but keep the badge inside the transparent PNG-backed rack box so it
   cannot project into a neighboring discard tile's paint plane. */
#matchPanel.normal-okey.table-theme-modern
  .nok-station-top .opponent-rack::after,
#matchPanel.normal-okey.table-theme-modern
  .nok-station-left .opponent-rack::after,
#matchPanel.normal-okey.table-theme-modern
  .nok-station-right .opponent-rack::after {
  top: 8px !important;
  right: 8px !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  z-index: 2 !important;
}
/* STAGE MODERN_OPPONENT_HAND_COUNT_CLEARANCE_END */

/* STAGE MODERN_RIGHT_OPPONENT_HAND_COUNT_VISUAL_SUPPRESSION_START
   Keep the live data-hand-count and opponent-rack node, but do not paint the
   right-side count badge over the transparent PNG alignment box. */
#matchPanel.normal-okey.table-theme-modern
  .nok-station-right .opponent-rack::after {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* STAGE MODERN_RIGHT_OPPONENT_HAND_COUNT_VISUAL_SUPPRESSION_END */

/* STAGE MODERN_DISCARD_FOCUS_RING_REMOVAL_START
   A drawable discard is a real button and must stay clickable.  The shared
   button:focus-visible rule paints an accent outline plus avatar halo; the
   old border-color-only fix could not affect either paint owner.  Remove only
   that outer focus ring for Modern Atlas discards and leave the drawable
   class, click handler, tile dimensions, anchors, and image untouched. */
#matchPanel.normal-okey.table-theme-modern
  .modern-discard-stack > .board-tile.tile-asset.classic-atlas-tile.drawable:focus,
#matchPanel.normal-okey.table-theme-modern
  .modern-discard-stack > .board-tile.tile-asset.classic-atlas-tile.drawable:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}
/* STAGE MODERN_DISCARD_FOCUS_RING_REMOVAL_END */

/* STAGE MODERN_DISCARD_DRAWABLE_GREEN_FRAME_SUPPRESSION_START
   The shared chat.css contract paints every .board-tile.drawable with a
   green border, outline, and drawable-pulse box-shadow animation even when
   the button is not focused.  The Modern discard Atlas owns its natural
   edge; suppress only that duplicate outer paint while preserving the
   drawable class, pointer behavior, and take_discard handler. */
#matchPanel.normal-okey.table-theme-modern
  .modern-discard-stack > .board-tile.tile-asset.classic-atlas-tile.drawable {
  border-color: transparent !important;
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  animation: none !important;
}
/* STAGE MODERN_DISCARD_DRAWABLE_GREEN_FRAME_SUPPRESSION_END */

/* STAGE MODERN_PROFILE_MICRO_OFFSETS_START
   Move each Modern Premium profile as one visual unit so the avatar and
   nickname preserve their existing internal spacing.  These are the final
   presentation-scale offsets only; the station boxes, racks, discards,
   controls, and Classic Theme geometry remain untouched. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-modern .nok-station-top .player-seat,
  #matchPanel.normal-okey.table-theme-modern .nok-station-bottom .player-seat {
    transform: translateY(-2.4px) !important;
  }

  #matchPanel.normal-okey.table-theme-modern .nok-station-left .player-seat,
  #matchPanel.normal-okey.table-theme-modern .nok-station-right .player-seat {
    transform: translateX(1.2px) !important;
  }
}
/* STAGE MODERN_PROFILE_MICRO_OFFSETS_END */

/* STAGE MODERN_PROFILE_PHOTO_MICRO_OFFSETS_START
   Move only the four Modern Premium photo nodes.  The seat containers,
   frames, identity panels, nicknames, and all surrounding geometry stay
   fixed; values below are canonical CSS-pixel transforms in the 1536x1024
   presentation plane.  The parent presentation owns the only responsive
   scale, so these values must not be multiplied by that scale again. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-top > #seat3 > .seat-avatar {
    transform: translate(-46.432px, -57.700px) !important;
  }
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-right > #seat2 > .seat-avatar {
    transform: translate(-46.681px, -59.301px) !important;
  }
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-left > #seat4 > .seat-avatar {
    transform: translate(-47.183px, -57.099px) !important;
  }
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-bottom > #seat1 > .seat-avatar {
    transform: translate(-45.432px, -59.700px) !important;
  }
}
/* STAGE MODERN_PROFILE_PHOTO_MICRO_OFFSETS_END */

/* STAGE MODERN_PROFILE_PHOTO_MEASURED_FRAME_ALIGN_START
   Chrome measured the existing 58px CSS avatar as 48.3px on screen.  Keep
   that measured size and the intentional horizontal panel overlap; only lift
   the three affected photos by their measured frame-center deltas.  The
   identity frame, text, station, and z-index rules remain untouched. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-right > #seat2 > .seat-avatar,
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-left > #seat4 > .seat-avatar,
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-bottom > #seat1 > .seat-avatar {
    flex-basis: 58px !important;
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  #matchPanel.normal-okey.table-theme-modern
    .nok-station-right > #seat2 > .seat-avatar {
    transform: translate(-42.681px, -63.281px) !important;
  }
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-left > #seat4 > .seat-avatar {
    transform: translate(-43.183px, -65.639px) !important;
  }
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-bottom > #seat1 > .seat-avatar {
    transform: translate(-41.432px, -68.720px) !important;
  }
}
/* STAGE MODERN_PROFILE_PHOTO_MEASURED_FRAME_ALIGN_END */

/* STAGE MODERN_PROFILE_PHOTO_FRAME_FOREGROUND_START
   The measured transforms already center these 58px photos against the
   existing 50px identity frames.  The remaining overlap bug was stacking:
   the shared avatar rule paints at z-index 2 while the immutable gold frame
   paints at z-index 1.  Lower only the three affected photo nodes so the
   existing frame border/text remains in front.  Because the identity panel
   has an opaque background, also move only the measured X-overlap out of the
   panel; Y and the frame/station geometry stay untouched. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-right > #seat2 > .seat-avatar,
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-left > #seat4 > .seat-avatar,
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-bottom > #seat1 > .seat-avatar {
    z-index: 0 !important;
  }

  #matchPanel.normal-okey.table-theme-modern
    .nok-station-right > #seat2 > .seat-avatar {
    transform: translate(-68.121px, -63.281px) !important;
  }
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-left > #seat4 > .seat-avatar {
    transform: translate(-68.383px, -65.639px) !important;
  }
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-bottom > #seat1 > .seat-avatar {
    transform: translate(-69.272px, -68.720px) !important;
  }

  /* Aysu's measured frame begins at 57.84px in the canonical plane.  Keep
     the avatar fully inside the viewport and just clear that fixed panel
     edge; Ekol/Ceren and all frame/station geometry remain unchanged. */
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-left > #seat4 > .seat-avatar {
    flex-basis: 57.80px !important;
    width: 57.80px !important;
    min-width: 57.80px !important;
    max-width: 57.80px !important;
    height: 57.80px !important;
    min-height: 57.80px !important;
    max-height: 57.80px !important;
    transform: translate(-68.263px, -65.639px) !important;
  }
}
/* STAGE MODERN_PROFILE_PHOTO_FRAME_FOREGROUND_END */

/* STAGE MODERN_PROFILE_PHOTO_PNG_RING_ALIGNMENT_START
   The Modern gold profile rings are baked into the immutable
   MODERN_PREMIUM_BOS_REFERANS.png at canonical 1536x1024 coordinates.  The
   live photo nodes use the current absolute station containing blocks, so
   align only those nodes to the measured PNG ring centers.  A 48px circle
   fits inside the approximately 50px inner opening while leaving the baked
   gold edge visible. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-top > #seat3 > .seat-avatar,
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-right > #seat2 > .seat-avatar,
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-bottom > #seat1 > .seat-avatar,
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-left > #seat4 > .seat-avatar {
    z-index: 2 !important;
    flex-basis: 48px !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  /* Live Chrome at 1280x899 measured a +46.70,+53.00 viewport-pixel
     center drift.  Divide by the presentation scale (5/6) and add the
     resulting canonical correction to the prior (7,5) transform. */
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-top > #seat3 > .seat-avatar {
    transform: translate(-49.04px, -58.60px) !important;
  }

  /* Live Chrome measured a +47.71,+55.00 viewport-pixel center drift;
     canonical correction from the prior (10,8) transform is (-57.252,-66). */
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-right > #seat2 > .seat-avatar {
    transform: translate(-47.252px, -58px) !important;
  }

  /* Live Chrome measured a +46.70,+52.99 viewport-pixel center drift;
     canonical correction from the prior (8,7) transform is (-56.04,-63.588). */
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-bottom > #seat1 > .seat-avatar {
    transform: translate(-48.04px, -56.588px) !important;
  }

  /* Live Chrome measured a +47.71,+55.00 viewport-pixel center drift;
     canonical correction from the prior (7,5) transform is (-57.252,-66). */
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-left > #seat4 > .seat-avatar {
    transform: translate(-50.252px, -61px) !important;
  }
}
/* STAGE MODERN_PROFILE_PHOTO_PNG_RING_ALIGNMENT_END */

/* STAGE MODERN_PROFILE_PANEL_RING_CLEARANCE_START
   The four gold profile rings are baked into the immutable 1536x1024 PNG.
   Keep the photo/ring coordinates fixed and move only the existing identity
   panels horizontally.  PNG outer-right measurements are Deniz/Ekol=555,
   Ceren=1034, Aysu=74; at presentation scale 5/6, a 10px viewport gap is
   12 canonical px.  The Y values below are the existing identity transforms
   and are intentionally unchanged. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-top > #seat3 > .seat-identity {
    transform: translate(27px, -71.488px) !important;
  }
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-right > #seat2 > .seat-identity {
    transform: translate(28px, -67.301px) !important;
  }
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-bottom > #seat1 > .seat-identity {
    transform: translate(28px, -72.706px) !important;
  }
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-left > #seat4 > .seat-identity {
    transform: translate(28px, -69.699px) !important;
  }
}
/* STAGE MODERN_PROFILE_PANEL_RING_CLEARANCE_END */

/* STAGE MODERN_FIVE_STACK_CANONICAL_GEOMETRY_START
   Modern Premium may intentionally use the existing five-stack stock mode.
   Keep that render path and its draw order unchanged, but give it the same
   responsive reference-plane geometry as the approved five-stack layout.
   This block is Modern-only; Classic five-stack rules remain untouched. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-modern
    .nok-center[data-classic-stock-state="classic"] .nok-pile-box {
    /* The presentation owns responsive scaling; keep this reference plane unscaled. */
    --modern-five-stack-reference-scale: 1;
    --classic-reference-scale-x: var(--modern-five-stack-reference-scale);
    --classic-reference-scale-y: var(--modern-five-stack-reference-scale);
  }

  #matchPanel.normal-okey.table-theme-modern
    .nok-center[data-classic-stock-state="classic"]
    .nok-pile-box
    .nok-draw-stack[data-stock-mode="five-stack"] {
    position: absolute !important;
    left: 0 !important;
    top: calc(-52px * var(--modern-five-stack-reference-scale)) !important;
    width: calc(272px * var(--modern-five-stack-reference-scale)) !important;
    min-width: calc(272px * var(--modern-five-stack-reference-scale)) !important;
    height: calc(322px * var(--modern-five-stack-reference-scale)) !important;
    min-height: calc(322px * var(--modern-five-stack-reference-scale)) !important;
    background: none;
    background-image: none;
    border: 0;
    box-shadow: none;
    display: block !important;
    overflow: visible !important;
  }

  #matchPanel.normal-okey.table-theme-modern
    .nok-center[data-classic-stock-state="classic"]
    .nok-pile-box
    .nok-draw-stack[data-stock-mode="five-stack"]
    .stock-stack-row {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    height: calc(106px * var(--modern-five-stack-reference-scale)) !important;
    min-height: calc(106px * var(--modern-five-stack-reference-scale)) !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    white-space: nowrap !important;
    direction: ltr !important;
    writing-mode: horizontal-tb !important;
    transform: none !important;
    rotate: none !important;
  }

  #matchPanel.normal-okey.table-theme-modern
    .nok-center[data-classic-stock-state="classic"]
    .nok-pile-box
    .nok-draw-stack[data-stock-mode="five-stack"]
    .stock-stack-row[data-classic-row="center"] {
    top: calc(131px * var(--modern-five-stack-reference-scale)) !important;
    align-items: flex-end !important;
  }

  #matchPanel.normal-okey.table-theme-modern
    .nok-center[data-classic-stock-state="classic"]
    .nok-pile-box
    .nok-draw-stack[data-stock-mode="five-stack"]
    .stock-stack-row[data-classic-row="bottom"] {
    top: calc(252.5905511812px * var(--modern-five-stack-reference-scale)) !important;
    flex-direction: row !important;
    margin-top: 0 !important;
  }

  #matchPanel.normal-okey.table-theme-modern
    .nok-center[data-classic-stock-state="classic"]
    .nok-pile-box
    .nok-draw-stack[data-stock-mode="five-stack"]
    .stock-stack-row
    .stock-stack-image.stock-stack-five {
    display: block !important;
    flex: 0 0 calc(60px * var(--modern-five-stack-reference-scale)) !important;
    width: calc(60px * var(--modern-five-stack-reference-scale)) !important;
    min-width: calc(60px * var(--modern-five-stack-reference-scale)) !important;
    max-width: calc(60px * var(--modern-five-stack-reference-scale)) !important;
    height: calc(106px * var(--modern-five-stack-reference-scale)) !important;
    min-height: calc(106px * var(--modern-five-stack-reference-scale)) !important;
    max-height: calc(106px * var(--modern-five-stack-reference-scale)) !important;
    aspect-ratio: 60 / 106 !important;
    object-fit: fill !important;
    margin: 0 !important;
  }

  #matchPanel.normal-okey.table-theme-modern
    .nok-center[data-classic-stock-state="classic"]
    .nok-pile-box
    .nok-draw-stack[data-stock-mode="five-stack"]
    .stock-stack-row[data-classic-row="center"] .stock-stack-image.stock-stack-center,
  #matchPanel.normal-okey.table-theme-modern
    .nok-center[data-classic-stock-state="classic"]
    .nok-pile-box
    .nok-draw-stack[data-stock-mode="five-stack"]
    .stock-stack-row .stock-stack-image.stock-stack-partial {
    height: 106px !important;
    min-height: 106px !important;
    max-height: 106px !important;
  }
}
/* STAGE MODERN_FIVE_STACK_CANONICAL_GEOMETRY_END */

/* STAGE MODERN_RACK_PNG_CANONICAL_CHANNEL_ALIGNMENT_START
   The Modern rack now uses the same visible tile footprint as the approved
   Classic rack: 62.72x87.36px at the 1536x1024 reference viewport.  The
   presentation transform remains the only responsive scale owner.  The
   resized channel plane keeps the reference x anchors and a 6.72px canonical
   gap between its two independent rows. */
@media (min-width: 901px) {
  .match-panel.normal-okey.table-theme-modern > .nok-presentation #gameBoard > .nok-own-station {
    box-sizing: border-box !important;
    left: 117.944px !important;
    top: 230.06px !important;
    right: auto !important;
    bottom: auto !important;
    width: 751px !important;
    height: 197.44px !important;
    max-width: none !important;
    transform: none !important;
  }

  .match-panel.normal-okey.table-theme-modern > .nok-presentation #gameBoard > .nok-own-station > .normal-okey-rack-zone {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 8px !important;
    border: 0 !important;
    transform: none !important;
  }

  .match-panel.normal-okey.table-theme-modern > .nok-presentation #gameBoard > .nok-own-station > .normal-okey-rack-zone > #handTiles {
    box-sizing: border-box !important;
    position: relative !important;
    inset: auto !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: 181.44px !important;
    min-width: 0 !important;
    min-height: 181.44px !important;
    max-height: 181.44px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(8, 62.72px) !important;
    grid-template-rows: 87.36px 87.36px !important;
    justify-content: start !important;
    align-content: start !important;
    column-gap: 0px !important;
    row-gap: 6.72px !important;
  }

  .match-panel.normal-okey.table-theme-modern > .nok-presentation #gameBoard > .nok-own-station > .normal-okey-rack-zone > #handTiles > .rack-slot > .tile {
    box-sizing: border-box !important;
    width: 62.72px !important;
    min-width: 62.72px !important;
    max-width: 62.72px !important;
    height: 87.36px !important;
    min-height: 87.36px !important;
    max-height: 87.36px !important;
    aspect-ratio: 51 / 71 !important;
    justify-self: center !important;
    align-self: center !important;
    transform: none !important;
  }

  .match-panel.normal-okey.table-theme-modern > .nok-presentation #gameBoard > .nok-own-station > .normal-okey-rack-zone > #handTiles > .rack-slot > .tile:hover:not(:disabled) {
    transform: translateY(-3px) !important;
  }

  .match-panel.normal-okey.table-theme-modern > .nok-presentation #gameBoard > .nok-own-station > .normal-okey-rack-zone > #handTiles > .rack-slot > .tile.selected {
    transform: translateY(-6px) !important;
  }

  .match-panel.normal-okey.table-theme-modern > .nok-presentation #gameBoard > .nok-own-station > .normal-okey-rack-zone > #handTiles > .rack-slot > .tile.dragging,
  .match-panel.normal-okey.table-theme-modern > .nok-presentation #gameBoard > .nok-own-station > .normal-okey-rack-zone > #handTiles > .rack-slot > .tile.is-dragging {
    transform: translateY(-8px) !important;
  }
}
/* STAGE MODERN_RACK_PNG_CANONICAL_CHANNEL_ALIGNMENT_END */

/* STAGE MODERN_RACK_VISIBLE_TILE_BASELINE_START
   The reference atlas PNGs are wider than the locked 62.72x87.36 tile box.
   object-fit: contain therefore leaves vertical letterbox space and makes the
   visible tile bottom stop above the measured wood-channel baseline.  Keep
   the source aspect ratio and the tile/hitbox dimensions, but anchor the
   rendered atlas face to the slot bottom. */
@media (min-width: 901px) {
  .match-panel.normal-okey.table-theme-modern > .nok-presentation #gameBoard > .nok-own-station > .normal-okey-rack-zone > #handTiles > .rack-slot > .tile.tile-asset > img.classic-atlas-tile-image {
    object-position: center bottom !important;
  }
}
/* STAGE MODERN_RACK_VISIBLE_TILE_BASELINE_END */

/* STAGE MODERN_RACK_VISUAL_SURFACE_ALIGNMENT_START
   Keep the existing table/furniture wood surface as the only visible rack
   surface.  The later V2 black-gold pseudo-layer is intentionally disabled;
   the station, #handTiles, slot order, tile dimensions, and pointer handling
   remain unchanged. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-modern > .nok-presentation #gameBoard > .nok-own-station,
  .match-panel.normal-okey.table-theme-modern > .nok-presentation #gameBoard > .nok-own-station {
    box-sizing: border-box !important;
    width: 751px !important;
    height: 197.44px !important;
    min-width: 751px !important;
    min-height: 197.44px !important;
    max-width: none !important;
    max-height: none !important;
  }

  #matchPanel.normal-okey.table-theme-modern > .nok-presentation #gameBoard > .nok-own-station > .normal-okey-rack-zone,
  .match-panel.normal-okey.table-theme-modern > .nok-presentation #gameBoard > .nok-own-station > .normal-okey-rack-zone {
    position: absolute !important;
    inset: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 8px !important;
    overflow: visible !important;
    isolation: isolate !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  #matchPanel.normal-okey.table-theme-modern > .nok-presentation #gameBoard > .nok-own-station > .normal-okey-rack-zone::before,
  .match-panel.normal-okey.table-theme-modern > .nok-presentation #gameBoard > .nok-own-station > .normal-okey-rack-zone::before {
    content: none !important;
    display: none !important;
    pointer-events: none !important;
    background: none !important;
  }

  #matchPanel.normal-okey.table-theme-modern > .nok-presentation #gameBoard > .nok-own-station > .normal-okey-rack-zone::after,
  .match-panel.normal-okey.table-theme-modern > .nok-presentation #gameBoard > .nok-own-station > .normal-okey-rack-zone::after {
    content: none !important;
    display: none !important;
  }

  #matchPanel.normal-okey.table-theme-modern > .nok-presentation #gameBoard > .nok-own-station > .normal-okey-rack-zone > .rack-image-skin,
  #matchPanel.normal-okey.table-theme-modern > .nok-presentation #gameBoard > .nok-own-station > .normal-okey-rack-zone > .rack-wood-body,
  .match-panel.normal-okey.table-theme-modern > .nok-presentation #gameBoard > .nok-own-station > .normal-okey-rack-zone > .rack-image-skin,
  .match-panel.normal-okey.table-theme-modern > .nok-presentation #gameBoard > .nok-own-station > .normal-okey-rack-zone > .rack-wood-body {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  #matchPanel.normal-okey.table-theme-modern > .nok-presentation #gameBoard > .nok-own-station > .normal-okey-rack-zone > #handTiles,
  .match-panel.normal-okey.table-theme-modern > .nok-presentation #gameBoard > .nok-own-station > .normal-okey-rack-zone > #handTiles {
    position: relative !important;
    z-index: 1 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 181.44px !important;
    min-height: 181.44px !important;
    max-height: 181.44px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
}
/* STAGE MODERN_RACK_VISUAL_SURFACE_ALIGNMENT_END */

/* STAGE MODERN_REAL_OKEY_GOLD_PULSE_START
   The server-authoritative state exposes the real Okey face as okeyTile.
   app.js marks every matching non-false-Okey tile, so duplicate physical
   copies receive the same presentation without changing tile opacity,
   dimensions, transforms, atlas assets, or rack geometry. */
@keyframes modern-real-okey-gold-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(255, 204, 64, .62),
      0 0 6px rgba(255, 196, 40, .24);
  }

  50% {
    box-shadow:
      0 0 0 2px rgba(255, 218, 92, .96),
      0 0 16px rgba(255, 191, 28, .62);
  }
}

#matchPanel.normal-okey.table-theme-modern #handTiles .tile.real-okey {
  opacity: 1 !important;
  animation: modern-real-okey-gold-pulse 1.2s ease-in-out infinite;
}

#matchPanel.normal-okey.table-theme-modern #handTiles .tile.real-okey.dragging,
#matchPanel.normal-okey.table-theme-modern #handTiles .tile.real-okey.is-dragging {
  animation: none !important;
  box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
  #matchPanel.normal-okey.table-theme-modern #handTiles .tile.real-okey {
    animation: none !important;
    box-shadow:
      0 0 0 2px rgba(255, 211, 78, .72),
      0 0 8px rgba(255, 192, 30, .28) !important;
  }
}
/* STAGE MODERN_REAL_OKEY_GOLD_PULSE_END */

/* STAGE MODERN_OPPONENT_HAND_COUNT_VISUAL_SUPPRESSION_FINAL_START
   data-hand-count remains the authoritative DOM value for accessibility and
   future presentation work.  Modern Premium does not paint that value as a
   rack pseudo-label: the earlier clearance rule only moved the pseudo and
   the right-only suppression left the top/left sources alive.  Keep this
   terminal Modern-only rule after every responsive block so no later
   specificity/source-order variant can repaint a spurious "14". */
#matchPanel.normal-okey.table-theme-modern
  .nok-station-top .opponent-rack::after,
#matchPanel.normal-okey.table-theme-modern
  .nok-station-right .opponent-rack::after,
#matchPanel.normal-okey.table-theme-modern
  .nok-station-bottom .opponent-rack::after,
#matchPanel.normal-okey.table-theme-modern
  .nok-station-left .opponent-rack::after {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* STAGE MODERN_OPPONENT_HAND_COUNT_VISUAL_SUPPRESSION_FINAL_END */

/* STAGE MODERN_PLAYER_IDENTITY_PANEL_AND_TURN_GLOW_START
   renderParticipants() gives every visual Normal Okey station the same
   .player-seat.nok-player > .seat-identity node.  A later Modern cleanup
   rule previously made that identity surface transparent, so the own-seat
   (Ekol) panel lost the shared black/gold card paint.  Restore only the
   identity surface here; the outer seat, rack, discard, and station geometry
   remain untouched.

   updateActiveSeat() is the authoritative turn-seat bridge: it toggles
   .active on exactly one rendered participant when the active Normal Okey
   series is available.  The panel pulse is therefore state-driven and is
   automatically removed on turn changes, reconnect renders, and terminal
   renders when .active is cleared. */
@keyframes modern-player-identity-gold-pulse {
  0%, 100% {
    opacity: .14;
    transform: scale(.985);
  }

  50% {
    opacity: .82;
    transform: scale(1);
  }
}

#matchPanel.normal-okey.table-theme-modern
  .player-seat.nok-player.has-player > .seat-identity {
  position: relative !important;
  z-index: 1 !important;
  border: 1px solid rgba(222, 171, 91, .76) !important;
  background: linear-gradient(145deg, rgba(3, 10, 17, .97), rgba(0, 2, 6, .98)) !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .48), inset 0 1px rgba(255, 236, 184, .1) !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

#matchPanel.normal-okey.table-theme-modern
  .player-seat.nok-player.has-player > .seat-identity::before {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background: radial-gradient(circle at 50% 50%, rgba(255, 215, 111, .62), rgba(255, 190, 46, .18) 44%, transparent 78%) !important;
  opacity: 0;
  transform: scale(.985);
  transform-origin: center !important;
}

#matchPanel.normal-okey.table-theme-modern
  .player-seat.nok-player.has-player > .seat-identity > * {
  position: relative !important;
  z-index: 1 !important;
}

#matchPanel.normal-okey.table-theme-modern
  .player-seat.nok-player.has-player > .seat-identity > strong {
  color: #fff0c7 !important;
}

#matchPanel.normal-okey.table-theme-modern
  .player-seat.nok-player.has-player > .seat-identity > .seat-role,
#matchPanel.normal-okey.table-theme-modern
  .player-seat.nok-player.has-player > .seat-identity > .player-score,
#matchPanel.normal-okey.table-theme-modern
  .player-seat.nok-player.has-player > .seat-identity > .series-score {
  color: #e8d6ae !important;
}

#matchPanel.normal-okey.table-theme-modern
  .player-seat.nok-player.has-player.active > .seat-identity::before {
  animation: modern-player-identity-gold-pulse 2.4s ease-in-out infinite !important;
}

#matchPanel.normal-okey.table-theme-modern
  .player-seat.nok-player.has-player:not(.active) > .seat-identity::before {
  animation: none !important;
  opacity: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  #matchPanel.normal-okey.table-theme-modern
    .player-seat.nok-player.has-player.active > .seat-identity::before {
    animation: none !important;
    opacity: .64 !important;
    transform: none !important;
  }

  #matchPanel.normal-okey.table-theme-modern
    .player-seat.nok-player.has-player.active > .seat-identity {
    border-color: rgba(255, 220, 112, .94) !important;
    box-shadow: 0 0 0 2px rgba(255, 220, 112, .38), 0 0 18px rgba(255, 191, 54, .48), 0 12px 24px rgba(0, 0, 0, .48), inset 0 1px rgba(255, 246, 204, .18) !important;
  }
}
/* STAGE MODERN_PLAYER_IDENTITY_PANEL_AND_TURN_GLOW_END */

/* STAGE MODERN_PLAYER_IDENTITY_BAKED_PANEL_SURFACE_START
   The immutable Premium reference PNG already paints the black/gold identity
   card beside each avatar ring.  Keep the live identity node and all of its
   dynamic text, but remove only its duplicate surface paint.  No avatar,
   ring, station, transform, or layout geometry is changed here. */
#matchPanel.normal-okey.table-theme-modern
  .player-seat.nok-player.has-player > .seat-identity {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* STAGE MODERN_PLAYER_IDENTITY_BAKED_PANEL_SURFACE_END */

/* STAGE MODERN_PLAYER_IDENTITY_TEXT_CALIBRATION_START
   Use the live Chrome measurements from 1280x899 with a 5/6 presentation
   scale.  The identity box keeps its existing 60px canonical height and the
   PNG remains the only black/gold panel surface.  The active nickname's
   existing scale(1.12) is intentionally preserved; its left transform origin
   does not change the text start edge.  The identity box is anchored at the
   top of the existing 68px station band with a 4px top margin, so the Y
   placement is deterministic and does not depend on a compounded translateY.
   The previous -67..-73px values placed the text over the table surface. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-top .seat-identity,
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-right .seat-identity,
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-bottom .seat-identity,
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-left .seat-identity {
    align-self: flex-start !important;
    margin: 4px 0 0 -19px !important;
  }

  #matchPanel.normal-okey.table-theme-modern
    .nok-station-bottom > #seat1 > .seat-identity {
    transform: translate(-66.044px, 0px) !important;
  }
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-right > #seat2 > .seat-identity {
    transform: translate(-65.252px, 0px) !important;
  }
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-top > #seat3 > .seat-identity {
    transform: translate(-67.044px, 0px) !important;
  }
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-left > #seat4 > .seat-identity {
    transform: translate(-68.252px, 0px) !important;
  }
}

#matchPanel.normal-okey.table-theme-modern
  .nok-station-top .seat-identity,
#matchPanel.normal-okey.table-theme-modern
  .nok-station-right .seat-identity,
#matchPanel.normal-okey.table-theme-modern
  .nok-station-bottom .seat-identity,
#matchPanel.normal-okey.table-theme-modern
  .nok-station-left .seat-identity {
  gap: 0 !important;
  padding: 3px 8px 3px 25px !important;
}

#matchPanel.normal-okey.table-theme-modern
  .nok-station-top .seat-identity > strong,
#matchPanel.normal-okey.table-theme-modern
  .nok-station-right .seat-identity > strong,
#matchPanel.normal-okey.table-theme-modern
  .nok-station-bottom .seat-identity > strong,
#matchPanel.normal-okey.table-theme-modern
  .nok-station-left .seat-identity > strong {
  font-family: Calibri, Carlito, Arial, sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #FFF0C7 !important;
}

#matchPanel.normal-okey.table-theme-modern
  .nok-station-top .seat-identity > .seat-role,
#matchPanel.normal-okey.table-theme-modern
  .nok-station-right .seat-identity > .seat-role,
#matchPanel.normal-okey.table-theme-modern
  .nok-station-bottom .seat-identity > .seat-role,
#matchPanel.normal-okey.table-theme-modern
  .nok-station-left .seat-identity > .seat-role {
  font-family: Calibri, Carlito, Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #E8D6AE !important;
}

#matchPanel.normal-okey.table-theme-modern
  .nok-station-top .seat-identity > .player-score,
#matchPanel.normal-okey.table-theme-modern
  .nok-station-right .seat-identity > .player-score,
#matchPanel.normal-okey.table-theme-modern
  .nok-station-bottom .seat-identity > .player-score,
#matchPanel.normal-okey.table-theme-modern
  .nok-station-left .seat-identity > .player-score,
#matchPanel.normal-okey.table-theme-modern
  .nok-station-top .seat-identity > .series-score,
#matchPanel.normal-okey.table-theme-modern
  .nok-station-right .seat-identity > .series-score,
#matchPanel.normal-okey.table-theme-modern
  .nok-station-bottom .seat-identity > .series-score,
#matchPanel.normal-okey.table-theme-modern
  .nok-station-left .seat-identity > .series-score {
  font-family: Calibri, Carlito, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: #F4E8CE !important;
}
/* STAGE MODERN_PLAYER_IDENTITY_TEXT_CALIBRATION_END */

/* STAGE MODERN_PLAYER_IDENTITY_ROLE_ROW_SUPPRESSION_START
   Keep renderParticipants()'s authoritative bot/human field and DOM node for
   data, accessibility, and non-Modern themes.  Modern Premium presents only
   nickname, score, and series in the baked identity panel. */
#matchPanel.normal-okey.table-theme-modern
  .nok-station-top .seat-identity > .seat-role,
#matchPanel.normal-okey.table-theme-modern
  .nok-station-right .seat-identity > .seat-role,
#matchPanel.normal-okey.table-theme-modern
  .nok-station-bottom .seat-identity > .seat-role,
#matchPanel.normal-okey.table-theme-modern
  .nok-station-left .seat-identity > .seat-role {
  display: none !important;
}
/* STAGE MODERN_PLAYER_IDENTITY_ROLE_ROW_SUPPRESSION_END */

/* STAGE MODERN_PLAYER_IDENTITY_TEXT_GROUP_VERTICAL_SHIFT_START
   The earlier -54.42px text-only lift moved the three rows outside the fixed
   60px identity panel.  Keep the existing row-local offsets, but do not add a
   second Y translation: the panel must contain the complete nickname, score,
   and series stack.  This is Modern text paint only; X, panel, avatar, PNG,
   and station geometry remain unchanged. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-top .seat-identity > strong,
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-right .seat-identity > strong,
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-bottom .seat-identity > strong,
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-left .seat-identity > strong,
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-top .seat-identity > .player-score,
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-right .seat-identity > .player-score,
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-bottom .seat-identity > .player-score,
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-left .seat-identity > .player-score,
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-top .seat-identity > .series-score,
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-right .seat-identity > .series-score,
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-bottom .seat-identity > .series-score,
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-left .seat-identity > .series-score {
    translate: 0 0 !important;
  }
}
/* STAGE MODERN_PLAYER_IDENTITY_TEXT_GROUP_VERTICAL_SHIFT_END */

/* STAGE MODERN_PLAYER_IDENTITY_TEXT_GROUP_CLIPPING_FIX_START
   The over-large text lift is removed above, so the three rows now fit inside
   the fixed 60px identity panel.  Keep the panel's containment active; this
   prevents future text overflow from painting over tiles or controls.  No
   panel, avatar, station, or PNG geometry is moved. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-top .seat-identity,
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-right .seat-identity,
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-bottom .seat-identity,
#matchPanel.normal-okey.table-theme-modern
    .nok-station-left .seat-identity {
    overflow: hidden !important;
  }
}
/* STAGE MODERN_PLAYER_IDENTITY_TEXT_GROUP_CLIPPING_FIX_END */

/* STAGE MODERN_RUMUZ_RED_REFERENCE_ALIGNMENT_START
   The supplied 1484x1060 reference marks the four intended text areas with
   red guide rectangles.  Their measured outer bounds are top
   (541,237)-(670,277), right (1005,410)-(1120,452), left
   (73,410)-(180,452), and bottom (538,577)-(673,623).  Using the existing
   5/6 presentation scale and the previously measured final text starts,
   these become canonical text-only corrections of top (-8.004,-14), right
   (-25,-30), left (+6,-30), and bottom (-11.004,-48) pixels.

   Only the transparent identity text carrier is translated.  Its existing
   transform property is preserved; the independent translate keeps all
   three live rows inside the existing overflow-hidden box.  The baked PNG
   panel, avatar/ring, station, rack, and seat coordinates remain untouched. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-modern
    .nok-station-top > #seat3 > .seat-identity {
    translate: -8.004px -14px !important;
  }

  #matchPanel.normal-okey.table-theme-modern
    .nok-station-right > #seat2 > .seat-identity {
    translate: -25px -30px !important;
  }

  #matchPanel.normal-okey.table-theme-modern
    .nok-station-left > #seat4 > .seat-identity {
    translate: 6px -30px !important;
  }

  #matchPanel.normal-okey.table-theme-modern
    .nok-station-bottom > #seat1 > .seat-identity {
    translate: -11.004px -48px !important;
  }
}
/* STAGE MODERN_RUMUZ_RED_REFERENCE_ALIGNMENT_END */

/* STAGE MODERN_EKOL_IDENTITY_FOREGROUND_STACKING_START
   Ekol's #seat1 is inside .nok-station-bottom, while the live own rack is a
   later sibling .nok-own-station.  The rack is a higher stacking context in
   the live layout, so the bottom identity paint must be above it.  This is
   active-game-only and hit-test transparent: hand-tile pointer events pass
   through the visual seat layer to #handTiles; positions, transforms,
   overflow, avatar, panel, rack geometry, and tile handlers stay intact. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-modern:not(.table-preview)
    > .nok-presentation #gameBoard > .nok-station-bottom {
    z-index: 16 !important;
    pointer-events: none !important;
  }
}
/* STAGE MODERN_EKOL_IDENTITY_FOREGROUND_STACKING_END */

/* STAGE MODERN_DRAW_DISCARD_BOTTOM_CLEARANCE_START
   The live draw/take-discard controls remain the original two buttons and
   listeners, but their legacy -37px placement sits over the felt.  At the
   1536x1024 reference plane the right column ends at y=902 and the lower
   auxiliary row occupies x=29..1156 from y=922 onward.  Use the unused
   lower-right strip for these two existing hit targets; the presentation
   transform supplies the responsive scale.  Narrow layouts return them to
   the existing in-flow action grid. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-modern
    .nok-live-actions > #drawPileButton:not([hidden]):not(.hidden),
  #matchPanel.normal-okey.table-theme-modern
    .nok-live-actions > #discardPileButton:not([hidden]):not(.hidden) {
    position: fixed !important;
    top: 906px !important;
    width: 145px !important;
    height: 50px !important;
    min-width: 145px !important;
    min-height: 50px !important;
    max-width: 145px !important;
    max-height: 50px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    pointer-events: auto !important;
    z-index: 43 !important;
  }

  #matchPanel.normal-okey.table-theme-modern
    .nok-live-actions > #drawPileButton:not([hidden]):not(.hidden) {
    left: 1197px !important;
  }

  #matchPanel.normal-okey.table-theme-modern
    .nok-live-actions > #discardPileButton:not([hidden]):not(.hidden) {
    left: 1352px !important;
  }
}

@media (max-width: 900px) {
  #matchPanel.normal-okey.table-theme-modern
    .nok-live-actions > #drawPileButton,
  #matchPanel.normal-okey.table-theme-modern
    .nok-live-actions > #discardPileButton {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 36px !important;
    max-height: none !important;
    margin: 0 !important;
  }
}
/* STAGE MODERN_DRAW_DISCARD_BOTTOM_CLEARANCE_END */

/* STAGE MODERN_REAL_OKEY_VISIBLE_FRAME_FIX_START
   The shared canonical Atlas lock intentionally sets box-shadow:none !important
   on .classic-atlas-tile so the PNG face owns its natural edge.  That rule
   also reaches the Modern real-Okey tile, so an animation whose only paint
   channel is box-shadow can report its animation name while rendering no
   visible glow.  Keep the Atlas surface untouched and use an outline as the
   Modern-only outer light channel.  Outline does not change tile geometry or
   the pointer/click hitbox. */
@keyframes modern-real-okey-visible-frame-pulse {
  0%, 100% {
    outline: 1px solid rgba(255, 204, 64, .62);
    outline-offset: 1px;
  }

  50% {
    outline: 3px solid rgba(255, 218, 92, .98);
    outline-offset: 2px;
  }
}

#matchPanel.normal-okey.table-theme-modern
  #handTiles .tile.real-okey:not(.selected):not(.dragging):not(.is-dragging) {
  animation: modern-real-okey-visible-frame-pulse 1.2s ease-in-out infinite both !important;
  animation-composition: replace !important;
}

#matchPanel.normal-okey.table-theme-modern
  #handTiles .tile.real-okey.selected,
#matchPanel.normal-okey.table-theme-modern
  #handTiles .tile.real-okey.dragging,
#matchPanel.normal-okey.table-theme-modern
  #handTiles .tile.real-okey.is-dragging {
  animation: none !important;
  animation-composition: replace !important;
}

@media (prefers-reduced-motion: reduce) {
  #matchPanel.normal-okey.table-theme-modern
    #handTiles .tile.real-okey:not(.selected):not(.dragging):not(.is-dragging) {
    animation: none !important;
    outline: 2px solid rgba(255, 211, 78, .78) !important;
    outline-offset: 1px !important;
  }
}
/* STAGE MODERN_REAL_OKEY_VISIBLE_FRAME_FIX_END */

/* STAGE MODERN_ALL_GAME_ACTIONS_BOTTOM_DOCK_START
   Keep every existing gameplay action in the same live DOM group, but move
   the whole group below the Modern table surface.  The fixed canonical dock
   sits to the right of the existing lower action row (x=29..1156) and below
   the right-side table column (ending near y=902).  Buttons remain live,
   individually hit-testable, and state/disabled/event wiring is untouched. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-modern .nok-live-actions {
    position: fixed !important;
    inset: 906px auto auto 1176px !important;
    width: 352px !important;
    height: 104px !important;
    min-width: 352px !important;
    min-height: 104px !important;
    max-width: 352px !important;
    max-height: 104px !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: repeat(4, 85px) !important;
    grid-auto-rows: 32px !important;
    gap: 2px !important;
    align-content: start !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: none !important;
    z-index: 43 !important;
  }

  #matchPanel.normal-okey.table-theme-modern
    .nok-live-actions > button:not([hidden]):not(.hidden) {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 32px !important;
    max-height: 32px !important;
    margin: 0 !important;
    padding: 2px 3px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    white-space: normal !important;
    text-align: center !important;
    text-indent: 0 !important;
    font-size: 8px !important;
    line-height: 1.05 !important;
    pointer-events: auto !important;
    z-index: 43 !important;
  }
}

@media (max-width: 900px) {
  #matchPanel.normal-okey.table-theme-modern .nok-live-actions {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(36px, auto) !important;
    gap: 6px !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }

  #matchPanel.normal-okey.table-theme-modern
    .nok-live-actions > button:not([hidden]):not(.hidden) {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 36px !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 5px 6px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    white-space: normal !important;
    text-align: center !important;
    text-indent: 0 !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
    pointer-events: auto !important;
  }
}
/* STAGE MODERN_ALL_GAME_ACTIONS_BOTTOM_DOCK_END */

/* STAGE MODERN_TABLE_UI_SIMPLIFICATION_START
   Modern keeps the five top hit targets and the live gameplay controls, but
   removes presentation-only lower bands and appearance selectors from the
   visible UI.  The underlying DOM and handlers remain mounted for the
   shared menu, accessibility, and gameplay contracts; no table, rack, tile,
   avatar, or PNG geometry is changed here. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-modern .nok-statusbar > .nok-settings-panel > .tile-surface-picker,
  #matchPanel.normal-okey.table-theme-modern .nok-statusbar > .nok-settings-panel > .rack-skin-picker,
  #matchPanel.normal-okey.table-theme-modern .nok-statusbar > .nok-settings-panel > .stock-display-picker,
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar,
  #matchPanel.normal-okey.table-theme-modern #normalOkeyBottomMenu,
  #dashboardView:has(#matchPanel.normal-okey.table-theme-modern:not(.hidden)) #dashboardActionBar {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media (max-width: 900px) {
  #matchPanel.normal-okey.table-theme-modern .nok-statusbar > .nok-settings-panel > .tile-surface-picker,
  #matchPanel.normal-okey.table-theme-modern .nok-statusbar > .nok-settings-panel > .rack-skin-picker,
  #matchPanel.normal-okey.table-theme-modern .nok-statusbar > .nok-settings-panel > .stock-display-picker,
  #matchPanel.normal-okey.table-theme-modern .nok-action-bar,
  #matchPanel.normal-okey.table-theme-modern #normalOkeyBottomMenu,
  #dashboardView:has(#matchPanel.normal-okey.table-theme-modern:not(.hidden)) #dashboardActionBar {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}
/* STAGE MODERN_TABLE_UI_SIMPLIFICATION_END */

/* STAGE MODERN_VIP_THEME_FOUNDATION_START
   Modern VIP owns a separate visual surface.  The approved composite PNG is
   a design reference only; the live table is painted by scoped HTML/CSS while
   the existing gameplay DOM remains mounted. */
.match-panel.normal-okey.table-theme-modern-vip > .nok-presentation {
  background-image: none !important;
}

.match-panel.normal-okey.table-theme-modern-vip {
  --modern-vip-foundation: 1;
}
/* STAGE MODERN_VIP_THEME_FOUNDATION_END */

/* STAGE MODERN_VIP_PLAYER_PANEL_GEOMETRY_START
   Retired: the former seat3-only transform stage caused the four-seat VIP
   profile to inherit mixed geometry.  The complete reference-plane mapping
   is owned by the final Modern VIP stylesheet so all four seats share one
   seat-relative coordinate system. */
/* STAGE MODERN_VIP_PLAYER_PANEL_GEOMETRY_END */

/* STAGE MODERN_VIP_ACTION_DOCK_START
   Move the existing action buttons into one Modern VIP-only row.  The
   buttons themselves remain the original DOM nodes, so their IDs, listeners,
   disabled states and game-state visibility continue to be authoritative. */
@media (min-width: 901px) {
  #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .modern-vip-action-dock {
    position: absolute !important;
    left: 29px !important;
    top: 922px !important;
    width: 1127px !important;
    height: 71px !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    grid-auto-flow: column !important;
    gap: 4px !important;
    align-items: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    z-index: 43 !important;
    pointer-events: none !important;
  }

  #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .modern-vip-action-dock > button:not([hidden]):not(.hidden) {
    position: static !important;
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 4px 5px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(219, 166, 71, 0.62) !important;
    border-radius: 8px !important;
    background: linear-gradient(145deg, #5b3317, #1a0e06) !important;
    color: #fff0c7 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    pointer-events: auto !important;
    z-index: 43 !important;
  }

  #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .modern-vip-action-dock > button:disabled {
    opacity: 0.55 !important;
    filter: saturate(0.6) !important;
    cursor: not-allowed !important;
  }
}

@media (max-width: 900px) {
  #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .modern-vip-action-dock {
    position: absolute !important;
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    bottom: 8px !important;
    width: auto !important;
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;
    box-sizing: border-box !important;
    display: flex !important;
    gap: 6px !important;
    align-items: stretch !important;
    margin: 0 !important;
    padding: 0 8px 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    z-index: 43 !important;
    pointer-events: none !important;
  }

  #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .modern-vip-action-dock > button:not([hidden]):not(.hidden) {
    position: static !important;
    display: flex !important;
    flex: 0 0 112px !important;
    width: 112px !important;
    height: 64px !important;
    min-width: 112px !important;
    max-width: 112px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 4px 5px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(219, 166, 71, 0.62) !important;
    border-radius: 8px !important;
    background: linear-gradient(145deg, #5b3317, #1a0e06) !important;
    color: #fff0c7 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    pointer-events: auto !important;
    z-index: 43 !important;
  }

  #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .modern-vip-action-dock > button:disabled {
    opacity: 0.55 !important;
    filter: saturate(0.6) !important;
    cursor: not-allowed !important;
  }
}
/* STAGE MODERN_VIP_ACTION_DOCK_END */

/* Chat messages are multiline fields; server-side validation and rate limits
   still define the authoritative message boundary. */
.match-panel.normal-okey .chat-form textarea[name="message"] {
  min-width: 0;
  min-height: 34px;
  max-height: 140px;
  resize: vertical;
  box-sizing: border-box;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  color: #f4f5f5;
  background: rgba(255, 255, 255, .06);
  font: inherit;
  line-height: 1.35;
  overflow-y: auto;
}