/* MODERN_VIP_PREMIUM_WINDOW_SYSTEM_START The approved PNG is a visual reference only. These surfaces remain real HTML/CSS controls and real scroll containers. */ :root { --mvip-ink: #07090d; --mvip-ink-soft: #10151b; --mvip-ink-deep: #05070a; --mvip-gold: #e2b85d; --mvip-gold-soft: #f4db91; --mvip-gold-muted: #9c7636; --mvip-blue: #28b9f4; --mvip-blue-soft: #85e4ff; --mvip-text: #f8f1df; --mvip-muted: #b8b8b2; } body:has(#dashboardPrivateTableMenuButton:not([hidden])), body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) { --mvip-metal: linear-gradient(145deg, #1c2329 0%, #090c10 48%, #171c22 100%); --mvip-metal-texture: repeating-linear-gradient(118deg, #ffffff08 0 1px, transparent 1px 7px), repeating-linear-gradient(28deg, #0000001c 0 2px, transparent 2px 11px); } /* Shared frame: black textured metal, gold double edge and blue light accents. */ body:has(#dashboardPrivateTableMenuButton:not([hidden])) #privateRoomPanel, body:has(#dashboardPrivateTableMenuButton:not([hidden])) #privatePreferencesForm, body:has(#dashboardPrivateTableMenuButton:not([hidden])) .friend-center, body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel, body:has(#dashboardPrivateTableMenuButton:not([hidden])) #messageInbox, body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #messageInbox { position: relative; isolation: isolate; color: var(--mvip-text); background-image: var(--mvip-metal-texture), var(--mvip-metal); border: 1px solid var(--mvip-gold-muted); box-shadow: inset 0 0 0 1px #f7d67a33, inset 0 0 0 3px #05070bcc, 0 16px 42px #000b; } body:has(#dashboardPrivateTableMenuButton:not([hidden])) #privateRoomPanel::before, body:has(#dashboardPrivateTableMenuButton:not([hidden])) #privatePreferencesForm::before, body:has(#dashboardPrivateTableMenuButton:not([hidden])) .friend-center::before, body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel::before, body:has(#dashboardPrivateTableMenuButton:not([hidden])) #messageInbox::before, body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #messageInbox::before { content: ""; position: absolute; inset: 6px; z-index: -1; border: 1px solid #d8a84d66; box-shadow: inset 0 0 0 1px #000b; pointer-events: none; } body:has(#dashboardPrivateTableMenuButton:not([hidden])) #privateRoomPanel::after, body:has(#dashboardPrivateTableMenuButton:not([hidden])) #privatePreferencesForm::after, body:has(#dashboardPrivateTableMenuButton:not([hidden])) .friend-center::after, body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel::after, body:has(#dashboardPrivateTableMenuButton:not([hidden])) #messageInbox::after, body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #messageInbox::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--mvip-blue) 0 28px, transparent 28px calc(100% - 28px), var(--mvip-blue) calc(100% - 28px)) top / 100% 2px no-repeat, linear-gradient(90deg, var(--mvip-blue) 0 28px, transparent 28px calc(100% - 28px), var(--mvip-blue) calc(100% - 28px)) bottom / 100% 2px no-repeat; filter: drop-shadow(0 0 5px var(--mvip-blue)); opacity: .72; pointer-events: none; } /* Compact private-table owner window; the long form scrolls instead of being clipped. */ body:has(#dashboardPrivateTableMenuButton:not([hidden])) #privateRoomPanel { width: min(100%, 760px); min-height: 0; margin: 8px auto 14px; padding: 12px; border-radius: 7px; background-color: var(--mvip-ink-deep); } body:has(#dashboardPrivateTableMenuButton:not([hidden])) #privateRoomPanel .private-room-grid { grid-template-columns: minmax(0, 1fr) minmax(220px, .82fr); gap: 12px; } body:has(#dashboardPrivateTableMenuButton:not([hidden])) #privatePreferencesForm, body:has(#dashboardPrivateTableMenuButton:not([hidden])) #privateRoomPanel .friend-center { min-width: 0; border-radius: 5px; padding: 12px; background-color: transparent; } body:has(#dashboardPrivateTableMenuButton:not([hidden])) #privatePreferencesForm { width: min(100%, 370px); max-height: min(76vh, 560px); overflow: auto; gap: 8px; } body:has(#dashboardPrivateTableMenuButton:not([hidden])) #privateRoomPanel h3, body:has(#dashboardPrivateTableMenuButton:not([hidden])) #privateRoomPanel h4 { color: var(--mvip-gold-soft); letter-spacing: .07em; text-transform: uppercase; } body:has(#dashboardPrivateTableMenuButton:not([hidden])) #privatePreferencesForm > h3:first-child { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; font-size: .96rem; } body:has(#dashboardPrivateTableMenuButton:not([hidden])) #privatePreferencesForm > h3:first-child::before { content: "♛"; color: var(--mvip-gold); font-size: 1.35rem; text-shadow: 0 0 8px #e2b85d88; } body:has(#dashboardPrivateTableMenuButton:not([hidden])) #privatePreferencesForm > h3:nth-of-type(2) { margin-top: 5px; padding-top: 8px; border-top: 1px solid #9c763666; font-size: .72rem; } body:has(#dashboardPrivateTableMenuButton:not([hidden])) #privateAssignmentInfo { margin: 0 0 8px; padding: 6px 8px; border-left: 2px solid var(--mvip-blue); color: var(--mvip-muted); font-size: .72rem; line-height: 1.35; } body:has(#dashboardPrivateTableMenuButton:not([hidden])) #privateRoomPanel label { color: var(--mvip-text); font-size: .78rem; } body:has(#dashboardPrivateTableMenuButton:not([hidden])) #privateRoomPanel select, body:has(#dashboardPrivateTableMenuButton:not([hidden])) #privateRoomPanel input:not([type="checkbox"]), body:has(#dashboardPrivateTableMenuButton:not([hidden])) #privateRoomPanel .friend-search input { min-height: 32px; border: 1px solid #9c7636; border-radius: 3px; background: #080b10; color: var(--mvip-text); box-shadow: inset 0 0 0 1px #000, 0 0 0 1px #28b9f422; } body:has(#dashboardPrivateTableMenuButton:not([hidden])) #privateRoomPanel select:focus-visible, body:has(#dashboardPrivateTableMenuButton:not([hidden])) #privateRoomPanel input:focus-visible, body:has(#dashboardPrivateTableMenuButton:not([hidden])) #privateRoomPanel button:focus-visible { outline: 2px solid var(--mvip-blue-soft); outline-offset: 2px; } body:has(#dashboardPrivateTableMenuButton:not([hidden])) #privateRoomPanel button { min-height: 32px; margin: 0; border-radius: 3px; border-color: var(--mvip-gold-muted); font-size: .76rem; letter-spacing: .04em; } body:has(#dashboardPrivateTableMenuButton:not([hidden])) #privateRoomPanel .primary { background: linear-gradient(180deg, #f0c965, #9e6c1f); color: #171008; box-shadow: inset 0 1px #fff4b0, 0 0 12px #e2b85d55; } body:has(#dashboardPrivateTableMenuButton:not([hidden])) #privateRoomPanel .secondary, body:has(#dashboardPrivateTableMenuButton:not([hidden])) #privateRoomPanel .ghost { background: #121820; color: var(--mvip-gold-soft); } /* Existing chat lists, input fields and scroll containers keep their JS/DOM behavior. */ body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) .table-chat.nok-chat-panel, body:has(#dashboardPrivateTableMenuButton:not([hidden])) .lobby-chat, body:has(#dashboardPrivateTableMenuButton:not([hidden])) .lobby-players { border: 1px solid var(--mvip-gold-muted); border-radius: 5px; background-image: var(--mvip-metal-texture), var(--mvip-metal); box-shadow: inset 0 0 0 2px #05070a99, 0 10px 26px #0008; } body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) .table-chat.nok-chat-panel .chat-heading, body:has(#dashboardPrivateTableMenuButton:not([hidden])) .lobby-chat .lobby-chat-title, body:has(#dashboardPrivateTableMenuButton:not([hidden])) .lobby-players .lobby-chat-title { border-bottom: 1px solid var(--mvip-gold-muted); background: linear-gradient(90deg, #0a0d12, #1e252c, #0a0d12); color: var(--mvip-gold-soft); text-transform: uppercase; letter-spacing: .07em; } body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) .table-chat.nok-chat-panel .chat-messages, body:has(#dashboardPrivateTableMenuButton:not([hidden])) .lobby-chat .lobby-chat-messages { background: #06090d; scrollbar-color: var(--mvip-gold-muted) #080b10; } body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) .table-chat.nok-chat-panel .chat-form, body:has(#dashboardPrivateTableMenuButton:not([hidden])) .lobby-chat .lobby-chat-form { border-top-color: #9c763666; background: #0b0f14; } body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) .table-chat.nok-chat-panel input, body:has(#dashboardPrivateTableMenuButton:not([hidden])) .lobby-chat input { border-color: #9c7636; background: #05070a; color: var(--mvip-text); } /* Modern VIP table menus reuse the existing panel and focus/close behavior. */ body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel { width: min(430px, calc(100vw - 24px)); max-height: min(78vh, 610px); overflow: auto; padding: 12px; border-radius: 6px; background-color: var(--mvip-ink-deep); } /* MODERN_VIP_HELP_PANEL_POSITION_FIX_START The shared panel is a fixed dialog. The VIP surface block above used position: relative for its shared metal-frame group, which left ordinary help/messages/sound panels in document flow instead of at the viewport center. Reference-image windows keep their own relative geometry below. */ body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel:not(.modern-vip-reference-window) { position: fixed !important; top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%) !important; z-index: 95 !important; box-sizing: border-box !important; } /* MODERN_VIP_HELP_PANEL_POSITION_FIX_END */ body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel .normal-okey-bottom-menu-panel-heading { border-bottom-color: #9c763666; } body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel h2 { color: var(--mvip-gold-soft); font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; } body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel .normal-okey-bottom-menu-item { border-color: #9c763699; border-radius: 4px; background: #0d1218; color: var(--mvip-text); } body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel .normal-okey-bottom-menu-item:hover, body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel .normal-okey-bottom-menu-item:focus-visible, body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel .normal-okey-bottom-menu-item[aria-current="true"] { border-color: var(--mvip-blue); background: #12202a; box-shadow: 0 0 10px #28b9f455; } body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel .modern-vip-private-table-settings { display: grid; gap: 10px; padding: 4px; } body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel .modern-vip-private-table-settings-kicker { margin: 0; color: var(--mvip-gold-soft); font-size: .78rem; font-weight: 800; letter-spacing: .1em; } body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel .modern-vip-private-table-settings label { display: grid; gap: 6px; color: var(--mvip-text); font-size: .8rem; } body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel .modern-vip-private-table-settings select { min-height: 34px; border: 1px solid var(--mvip-gold-muted); border-radius: 3px; background: #05070a; color: var(--mvip-text); } body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel .modern-vip-private-table-settings button { margin: 0; } body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel .modern-vip-private-table-settings-note { color: var(--mvip-muted); font-size: .72rem; line-height: 1.35; } /* Private messages are dynamically mounted; this class exists at construction. */ body:has(#dashboardPrivateTableMenuButton:not([hidden])) #messageInbox, body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #messageInbox { width: min(560px, calc(100vw - 24px)); max-height: min(82vh, 680px); padding: 16px; border-radius: 6px; background-color: var(--mvip-ink-deep); } body:has(#dashboardPrivateTableMenuButton:not([hidden])) #messageInbox::backdrop, body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #messageInbox::backdrop { background: #000b; } body:has(#dashboardPrivateTableMenuButton:not([hidden])) #messageInbox h2, body:has(#dashboardPrivateTableMenuButton:not([hidden])) #messageInbox h3, body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #messageInbox h2, body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #messageInbox h3 { color: var(--mvip-gold-soft); letter-spacing: .06em; } body:has(#dashboardPrivateTableMenuButton:not([hidden])) #messageInbox .pm-tabs button, body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #messageInbox .pm-tabs button { border-color: #9c7636; border-radius: 3px; background: #0d1218; color: var(--mvip-text); } body:has(#dashboardPrivateTableMenuButton:not([hidden])) #messageInbox .pm-tabs button[aria-selected="true"], body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #messageInbox .pm-tabs button[aria-selected="true"] { background: linear-gradient(180deg, #f0c965, #9e6c1f); color: #171008; } body:has(#dashboardPrivateTableMenuButton:not([hidden])) #messageInbox input, body:has(#dashboardPrivateTableMenuButton:not([hidden])) #messageInbox textarea, body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #messageInbox input, body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #messageInbox textarea { border: 1px solid #9c7636; border-radius: 3px; background: #05070a; color: var(--mvip-text); } body:has(#dashboardPrivateTableMenuButton:not([hidden])) #messageInbox .pm-message, body:has(#dashboardPrivateTableMenuButton:not([hidden])) #messageInbox .pm-conversation-item, body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #messageInbox .pm-message, body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #messageInbox .pm-conversation-item { border-color: #9c763655; background: #0d1218; } /* Other existing selection/composer surfaces use the same system only in a VIP-owned lobby or an active Modern VIP match. */ body:has(#dashboardPrivateTableMenuButton:not([hidden])) #newTableModal .new-table-card, body:has(#dashboardPrivateTableMenuButton:not([hidden])) #hemenOynaNoTableModal .hemen-oyna-no-table-card, body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeySettingsPanel, body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) .normal-okey-report-card, body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) .normal-okey-gift-card { color: var(--mvip-text); background-image: var(--mvip-metal-texture), var(--mvip-metal); border-color: var(--mvip-gold-muted); box-shadow: inset 0 0 0 1px #f7d67a33, inset 0 0 0 3px #05070bcc, 0 16px 42px #000b; } body:has(#dashboardPrivateTableMenuButton:not([hidden])) #newTableModal .new-table-card h2, body:has(#dashboardPrivateTableMenuButton:not([hidden])) #hemenOynaNoTableModal .hemen-oyna-no-table-card h2, body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeySettingsPanel summary, body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) .normal-okey-report-card h2, body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) .normal-okey-gift-card h2 { color: var(--mvip-gold-soft); } body:has(#dashboardPrivateTableMenuButton:not([hidden])) #newTableModal select, body:has(#dashboardPrivateTableMenuButton:not([hidden])) #newTableModal input, body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeySettingsPanel select, body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeySettingsPanel input, body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) .normal-okey-report-card select, body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) .normal-okey-report-card input, body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) .normal-okey-report-card textarea { border-color: var(--mvip-gold-muted); background: #05070a; color: var(--mvip-text); } @media (max-width: 760px) { body:has(#dashboardPrivateTableMenuButton:not([hidden])) #privateRoomPanel { width: calc(100% - 12px); } body:has(#dashboardPrivateTableMenuButton:not([hidden])) #privateRoomPanel .private-room-grid { grid-template-columns: 1fr; } body:has(#dashboardPrivateTableMenuButton:not([hidden])) #privatePreferencesForm { width: 100%; max-height: none; } } /* MODERN_VIP_FINAL_TABLE_SURFACE_START The approved 1498x1050 composition is rebuilt from the existing live DOM. No full-screen reference PNG is mounted as an interaction-blocking layer. */ #matchPanel.normal-okey.table-theme-modern-vip { --mvip-table-black: #090b0d; --mvip-table-black-soft: #12171b; --mvip-table-gold: #e5a52f; --mvip-table-gold-light: #ffe6a1; --mvip-table-orange: #ff7c22; position: fixed !important; inset: 0 !important; overflow: hidden !important; background: #030507 !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation { position: relative !important; display: block !important; width: 1498px !important; height: 1050px !important; min-height: 1050px !important; padding: 0 !important; overflow: hidden !important; transform-origin: top left !important; transform: scale(min(1, calc(100vw / 1498px), calc(100vh / 1050px))) !important; color: var(--mvip-text) !important; background: radial-gradient(circle at 51% 43%, #71370d66 0 12%, transparent 42%), radial-gradient(circle at 8% 82%, #f17b1b2e 0 8%, transparent 30%), repeating-linear-gradient(118deg, #ffffff08 0 1px, transparent 1px 9px), linear-gradient(135deg, #090b0e 0%, #1d130b 48%, #040b12 100%) !important; } /* MODERN_VIP_GIFT_REFERENCE_PLANE_START The gift layer follows the same 1498x1050 transformed presentation as the table. It remains input-transparent so rack and board interactions keep their existing hit targets. */ #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .normal-okey-gift-table-surface { position: absolute !important; inset: 0 !important; width: 1498px !important; height: 1050px !important; pointer-events: none !important; z-index: 50 !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .normal-okey-gift-table-surface .normal-okey-gift-notice-card.accepted { position: absolute !important; transform: translate(-50%, -50%) !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .normal-okey-gift-table-surface .normal-okey-gift-effect { position: absolute !important; } /* MODERN_VIP_GIFT_REFERENCE_PLANE_END */ #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent 0 18px, #f0a13266 18px 20px, transparent 20px calc(100% - 20px), #f0a13266 calc(100% - 20px) calc(100% - 18px), transparent calc(100% - 18px)), linear-gradient(0deg, transparent 0 14px, #f0a13266 14px 16px, transparent 16px calc(100% - 16px), #f0a13266 calc(100% - 16px) calc(100% - 14px), transparent calc(100% - 14px)); opacity: .7; } #matchPanel.normal-okey.table-theme-modern-vip .normal-okey-header, #matchPanel.normal-okey.table-theme-modern-vip .nok-topbar { display: contents !important; } /* Reference logo and table-information cards. */ #matchPanel.normal-okey.table-theme-modern-vip .nok-logo-card { position: absolute !important; left: 16px !important; top: 6px !important; width: 255px !important; height: 101px !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 8px 14px !important; border: 1px solid #e5a52f !important; border-radius: 9px !important; background: linear-gradient(145deg, #17100a, #040709 60%, #221305) !important; box-shadow: inset 0 0 0 2px #e5a52f33, 0 9px 22px #000b !important; z-index: 32 !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-logo-card::before, #matchPanel.normal-okey.table-theme-modern-vip .nok-logo-card::after { display: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-logo-image { display: block !important; width: 100% !important; height: 82px !important; object-fit: contain !important; object-position: center !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-left-column { position: absolute !important; left: 294px !important; top: 7px !important; width: 285px !important; height: 101px !important; z-index: 32 !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel { width: 100% !important; height: 100% !important; padding: 11px 13px !important; border: 1px solid #e5a52f !important; border-radius: 9px !important; background: linear-gradient(145deg, #151c20, #05080b 76%) !important; box-shadow: inset 0 0 0 1px #ffe6a133, 0 9px 22px #000b !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 3px 16px !important; margin: 0 !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dt { display: block !important; color: #aeb8bc !important; font-size: 10px !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dd { max-width: 15ch !important; color: #fff5df !important; font-size: 12px !important; text-align: right !important; } /* The old MASADAN ÇIK / RADYO / DAVET / SES row is replaced by the live reference menu and the five-button lower utility dock. */ #matchPanel.normal-okey.table-theme-modern-vip .nok-top-controls { display: none !important; } #matchPanel.normal-okey.table-theme-modern-vip #normalOkeyBottomMenu, #matchPanel.normal-okey.table-theme-modern-vip #normalOkeyBottomMenu[hidden] { position: absolute !important; inset: 0 !important; display: block !important; visibility: visible !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; pointer-events: none !important; z-index: 45 !important; } /* Exact five primary menu slots: OYUNLAR, LOBİLER, ÖZEL, İŞLEMLER, AYARLAR. */ #matchPanel.normal-okey.table-theme-modern-vip #normalOkeyBottomMenu > .normal-okey-bottom-menu-left { position: absolute !important; left: 758px !important; top: 8px !important; width: 727px !important; height: 69px !important; display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 8px !important; pointer-events: auto !important; } #matchPanel.normal-okey.table-theme-modern-vip #normalOkeyBottomMenu > .normal-okey-bottom-menu-left > button:not([hidden]) { display: flex !important; min-width: 0 !important; min-height: 0 !important; align-items: center !important; justify-content: center !important; padding: 0 8px !important; border: 1px solid #e5a52f !important; border-radius: 10px !important; color: #fff6df !important; background: linear-gradient(180deg, #172a4c, #06172a 62%, #02070d) !important; box-shadow: inset 0 1px #ffffff22, 0 0 13px #1ab9ff44 !important; font-size: 16px !important; font-weight: 900 !important; letter-spacing: .02em !important; white-space: nowrap !important; } #matchPanel.normal-okey.table-theme-modern-vip #normalOkeyBottomMenu > .normal-okey-bottom-menu-left > button:nth-child(3) { background: linear-gradient(180deg, #087c70, #03443f 62%, #021916) !important; } #matchPanel.normal-okey.table-theme-modern-vip #normalOkeyBottomMenu > .normal-okey-bottom-menu-left > button:nth-child(4) { background: linear-gradient(180deg, #b9362c, #581711 62%, #1c0807) !important; } #matchPanel.normal-okey.table-theme-modern-vip #normalOkeyBottomMenu > .normal-okey-bottom-menu-left > button:nth-child(5) { background: linear-gradient(180deg, #0d3f72, #06182e 62%, #02070d) !important; } #matchPanel.normal-okey.table-theme-modern-vip #normalOkeyBottomMenu > .normal-okey-bottom-menu-left > [data-bottom-menu="games"] { background: linear-gradient(180deg, #0d4c94, #061c45 62%, #020817) !important; } #matchPanel.normal-okey.table-theme-modern-vip #normalOkeyBottomMenu > .normal-okey-bottom-menu-left > [data-bottom-menu="lobbies"] { background: linear-gradient(180deg, #b87525, #54270e 62%, #1d0b06) !important; } #matchPanel.normal-okey.table-theme-modern-vip #normalOkeyBottomMenu > .normal-okey-bottom-menu-left > [data-bottom-menu="private"] { background: linear-gradient(180deg, #087c70, #03443f 62%, #021916) !important; } #matchPanel.normal-okey.table-theme-modern-vip #normalOkeyBottomMenu > .normal-okey-bottom-menu-left > [data-bottom-menu="operations"] { background: linear-gradient(180deg, #b9362c, #581711 62%, #1c0807) !important; } #matchPanel.normal-okey.table-theme-modern-vip #normalOkeyBottomMenu > .normal-okey-bottom-menu-left > [data-bottom-menu="operator-settings"] { background: linear-gradient(180deg, #0d3f72, #06182e 62%, #02070d) !important; } #matchPanel.normal-okey.table-theme-modern-vip #normalOkeyBottomMenu > .normal-okey-bottom-menu-left > button:hover:not(:disabled), #matchPanel.normal-okey.table-theme-modern-vip #normalOkeyBottomMenu > .normal-okey-bottom-menu-left > button:focus-visible { border-color: var(--mvip-blue-soft) !important; box-shadow: 0 0 18px #28b9f477, inset 0 1px #fff8 !important; } /* Exact five lower-right utility actions: MESAJ, DAVET, SES, YARDIM, BAĞLANTI. Their original DOM nodes and listeners remain authoritative. */ #matchPanel.normal-okey.table-theme-modern-vip #normalOkeyBottomMenu > .normal-okey-bottom-menu-right { position: absolute !important; left: 1140px !important; top: 891px !important; width: 345px !important; height: 82px !important; display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 5px !important; padding: 7px !important; border: 1px solid #e5a52f !important; border-radius: 9px !important; background: linear-gradient(145deg, #171c20, #05080b) !important; box-shadow: inset 0 0 0 1px #ffe6a133, 0 9px 22px #000b !important; pointer-events: auto !important; } #matchPanel.normal-okey.table-theme-modern-vip #normalOkeyBottomMenu > .normal-okey-bottom-menu-right > button:not([hidden]) { display: flex !important; min-width: 0 !important; min-height: 0 !important; align-items: center !important; justify-content: center !important; padding: 4px !important; overflow: hidden !important; border: 1px solid #9c7636 !important; border-radius: 7px !important; color: #fff0c5 !important; background: linear-gradient(180deg, #111b22, #05090d) !important; font-size: 10px !important; font-weight: 900 !important; white-space: nowrap !important; } #matchPanel.normal-okey.table-theme-modern-vip #normalOkeyBottomMenu > .normal-okey-bottom-menu-right > button { font-size: 0 !important; } #matchPanel.normal-okey.table-theme-modern-vip #normalOkeyBottomMenu > .normal-okey-bottom-menu-right > button::before { display: block !important; color: inherit !important; font-size: 11px !important; line-height: 1.05 !important; } #matchPanel.normal-okey.table-theme-modern-vip #normalOkeyBottomMenu > .normal-okey-bottom-menu-right > [data-bottom-menu="messages"]::before { content: "MESAJ"; } #matchPanel.normal-okey.table-theme-modern-vip #normalOkeyBottomMenu > .normal-okey-bottom-menu-right > [data-bottom-menu="invites"]::before { content: "DAVET"; } #matchPanel.normal-okey.table-theme-modern-vip #normalOkeyBottomMenu > .normal-okey-bottom-menu-right > [data-bottom-menu="sound"]::before { content: "SES"; } #matchPanel.normal-okey.table-theme-modern-vip #normalOkeyBottomMenu > .normal-okey-bottom-menu-right > [data-bottom-menu="help"]::before { content: "YARDIM"; } #matchPanel.normal-okey.table-theme-modern-vip #normalOkeyBottomMenu > .normal-okey-bottom-menu-right > #nokConnectionButton::before { content: "BAĞLANTI"; } #matchPanel.normal-okey.table-theme-modern-vip #normalOkeyBottomMenu > .normal-okey-bottom-menu-right > #nokConnectionButton > span, #matchPanel.normal-okey.table-theme-modern-vip #normalOkeyBottomMenu > .normal-okey-bottom-menu-right > #nokConnectionButton > small { display: none !important; } #matchPanel.normal-okey.table-theme-modern-vip #normalOkeyBottomMenu > .normal-okey-bottom-menu-right > button:hover:not(:disabled), #matchPanel.normal-okey.table-theme-modern-vip #normalOkeyBottomMenu > .normal-okey-bottom-menu-right > button:focus-visible { border-color: var(--mvip-blue-soft) !important; color: #ffffff !important; box-shadow: 0 0 12px #28b9f477 !important; } /* Reference table plane, decorative furniture and the four live seats. */ #matchPanel.normal-okey.table-theme-modern-vip .nok-table-stage { position: absolute !important; left: 17px !important; top: 285px !important; width: 1087px !important; height: 527px !important; padding: 0 !important; margin: 0 !important; display: block !important; z-index: 4 !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-table, #matchPanel.normal-okey.table-theme-modern-vip #gameBoard { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; min-height: 0 !important; max-width: none !important; box-sizing: border-box !important; border: 8px solid #9b561c !important; border-radius: 46px !important; background: radial-gradient(circle at 50% 48%, #191d20 0 30%, #0d1114 68%, #050608 100%) !important; box-shadow: 0 0 0 5px #ffd46d, 0 0 0 10px #381806, 0 18px 34px #000c, inset 0 0 0 2px #fff0a633 !important; overflow: visible !important; } #matchPanel.normal-okey.table-theme-modern-vip #gameBoard::before { content: "" !important; position: absolute !important; inset: 24px !important; border: 2px solid #d58c2b !important; border-radius: 34px !important; background: repeating-linear-gradient(135deg, #ffffff07 0 1px, transparent 1px 8px) !important; box-shadow: inset 0 0 35px #000b, 0 0 0 1px #ffcc6422 !important; pointer-events: none !important; } #matchPanel.normal-okey.table-theme-modern-vip #gameBoard::after { content: "" !important; position: absolute !important; inset: 15px 110px !important; border-top: 2px solid #ff9a2c !important; border-bottom: 2px solid #ff9a2c !important; filter: drop-shadow(0 0 8px #ff6b1f) !important; pointer-events: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-visual-furniture-shell { position: absolute !important; inset: -22px !important; z-index: 0 !important; border: 1px solid #ff9a2c66 !important; border-radius: 56px !important; background: radial-gradient(circle at 50% 50%, transparent 0 48%, #ff6d1d12 72%, #0008 100%) !important; box-shadow: 0 0 28px #ff7c2233, inset 0 0 25px #000b !important; pointer-events: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-center-brand { top: 48% !important; left: 50% !important; width: 420px !important; display: grid !important; gap: 5px !important; opacity: 1 !important; color: var(--mvip-table-gold-light) !important; text-align: center !important; text-shadow: 0 0 16px #ff8c2c88, 0 3px 8px #000 !important; pointer-events: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-center-brand .nok-crown { color: var(--mvip-table-gold-light) !important; font-size: 42px !important; line-height: 1 !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-center-brand strong { color: #f2a63b !important; font-size: 42px !important; letter-spacing: .16em !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-center-brand > span:not(.nok-crown) { color: #ffd98a !important; font-size: 12px !important; letter-spacing: .12em !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-station-top, #matchPanel.normal-okey.table-theme-modern-vip .nok-station-left, #matchPanel.normal-okey.table-theme-modern-vip .nok-station-right, #matchPanel.normal-okey.table-theme-modern-vip .nok-station-bottom, #matchPanel.normal-okey.table-theme-modern-vip .nok-own-station { z-index: 12 !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-station-top { left: 35% !important; top: -14% !important; width: 34% !important; height: 37% !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-station-left { left: -5% !important; top: 22% !important; width: 27% !important; height: 45% !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-station-right { right: -5% !important; top: 22% !important; width: 27% !important; height: 45% !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-station-bottom { left: 23% !important; top: 74% !important; width: 54% !important; height: 31% !important; } #matchPanel.normal-okey.table-theme-modern-vip .seat-avatar { width: 58px !important; height: 58px !important; border: 2px solid #f3b84c !important; box-shadow: 0 0 0 3px #050608, 0 0 14px #ff9d2e66 !important; } #matchPanel.normal-okey.table-theme-modern-vip .seat-identity { min-width: 142px !important; padding: 8px 12px !important; border: 1px solid #e5a52f !important; border-radius: 9px !important; background: linear-gradient(145deg, #11171b, #030507) !important; box-shadow: 0 5px 14px #000b !important; } #matchPanel.normal-okey.table-theme-modern-vip .seat-identity strong { color: #fff5df !important; font-size: 20px !important; } #matchPanel.normal-okey.table-theme-modern-vip .seat-identity small { color: #d5d8d8 !important; font-size: 10px !important; } #matchPanel.normal-okey.table-theme-modern-vip .seat-identity .player-score { color: #ffd36f !important; font-size: 18px !important; } #matchPanel.normal-okey.table-theme-modern-vip .opponent-rack { border: 2px solid #d28b2e !important; border-radius: 7px !important; background: repeating-linear-gradient(90deg, #5e3212 0 5px, #24140a 5px 8px) !important; box-shadow: inset 0 1px #ffe29c66, 0 5px 12px #000a !important; } /* The live rack is dark/gold like the approved shelf; the old wood PNG is not used by this theme. */ #matchPanel.normal-okey.table-theme-modern-vip .normal-okey-rack-zone { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; padding: 11px 13px 8px !important; border: 3px solid #d28b2e !important; border-radius: 9px !important; background: linear-gradient(180deg, #25282a, #0b0d0f 65%, #16100a) !important; box-shadow: inset 0 5px #ffe5a133, inset 0 -8px #000a, 0 0 0 3px #ffbd4e, 0 12px 24px #000b !important; } #matchPanel.normal-okey.table-theme-modern-vip .normal-okey-rack-zone .rack-image-skin, #matchPanel.normal-okey.table-theme-modern-vip .normal-okey-rack-zone .rack-wood-body { display: none !important; } #matchPanel.normal-okey.table-theme-modern-vip #handTiles { height: 100% !important; align-content: end !important; gap: 3px 4px !important; padding: 4px 8px !important; } #matchPanel.normal-okey.table-theme-modern-vip #handTiles .rack-slot { flex: 0 0 44px !important; width: 44px !important; height: 61px !important; } #matchPanel.normal-okey.table-theme-modern-vip #handTiles .tile, #matchPanel.normal-okey.table-theme-modern-vip .board-tile, #matchPanel.normal-okey.table-theme-modern-vip .center-indicator-tile, #matchPanel.normal-okey.table-theme-modern-vip .discard-stack { width: 44px !important; height: 61px !important; min-height: 0 !important; } #matchPanel.normal-okey.table-theme-modern-vip #handTiles .tile.tile-asset, #matchPanel.normal-okey.table-theme-modern-vip .board-tile.tile-asset, #matchPanel.normal-okey.table-theme-modern-vip .center-indicator-tile.tile-asset { border: 0 !important; background: transparent !important; } /* Chat, ikram and radio match the approved right column while keeping their existing message, submit, scroll and audio controls. */ #matchPanel.normal-okey.table-theme-modern-vip .nok-right-column { position: absolute !important; left: 1140px !important; top: 88px !important; width: 345px !important; height: 790px !important; display: flex !important; flex-direction: column !important; gap: 8px !important; padding: 0 !important; overflow: hidden !important; z-index: 28 !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-chat-panel, #matchPanel.normal-okey.table-theme-modern-vip .nok-treat-panel, #matchPanel.normal-okey.table-theme-modern-vip .nok-radio-panel { border: 1px solid #d28b2e !important; border-radius: 9px !important; background-image: repeating-linear-gradient(118deg, #ffffff06 0 1px, transparent 1px 8px), linear-gradient(145deg, #11181c, #030608) !important; box-shadow: inset 0 0 0 1px #ffe6a122, 0 9px 22px #000b !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-chat-panel { flex: 0 0 492px !important; height: 492px !important; min-height: 0 !important; padding: 10px !important; } #matchPanel.normal-okey.table-theme-modern-vip .chat-heading { margin-bottom: 8px !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-chat-tab { border: 1px solid #d28b2e !important; border-radius: 7px !important; color: #fff1c7 !important; background: #070b0f !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-chat-tab.active, #matchPanel.normal-okey.table-theme-modern-vip .nok-chat-tab:focus-visible { border-color: #28b9f4 !important; box-shadow: 0 0 10px #28b9f455 !important; } #matchPanel.normal-okey.table-theme-modern-vip #chatMessages { min-height: 0 !important; padding: 4px 3px !important; background: #03060899 !important; scrollbar-color: #9c7636 #080b10 !important; } #matchPanel.normal-okey.table-theme-modern-vip .chat-form { border-top: 1px solid #9c763666 !important; background: #080c10 !important; } #matchPanel.normal-okey.table-theme-modern-vip .chat-form input, #matchPanel.normal-okey.table-theme-modern-vip .chat-form button { border-color: #9c7636 !important; background: #05070a !important; color: #fff1c7 !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-treat-panel { flex: 0 0 137px !important; height: 137px !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-radio-panel { flex: 0 0 145px !important; height: 145px !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-treat-panel header, #matchPanel.normal-okey.table-theme-modern-vip .nok-radio-header { color: #ffe29a !important; border-bottom-color: #9c763666 !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-treat-options button, #matchPanel.normal-okey.table-theme-modern-vip .nok-radio-request-button { border-color: #9c7636 !important; color: #fff1c7 !important; background: #071017 !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-radio-header { cursor: pointer !important; } /* Exact twelve action slots. Labels are visual aliases only; the original button text, IDs, disabled state and listeners remain intact. */ #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .modern-vip-action-dock { position: absolute !important; left: 16px !important; top: 881px !important; width: 1106px !important; height: 94px !important; display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)) !important; gap: 5px !important; padding: 7px !important; box-sizing: border-box !important; border: 1px solid #d28b2e !important; border-radius: 10px !important; background: linear-gradient(145deg, #151b1f, #05070a) !important; box-shadow: inset 0 0 0 1px #ffe6a122, 0 9px 22px #000b !important; pointer-events: none !important; z-index: 46 !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .modern-vip-action-dock > button:not([hidden]):not(.hidden) { display: flex !important; min-width: 0 !important; min-height: 0 !important; align-items: center !important; justify-content: center !important; padding: 4px !important; border: 1px solid #9c7636 !important; border-radius: 7px !important; color: #fff1c7 !important; background: linear-gradient(180deg, #22180c, #07090b 62%, #030405) !important; box-shadow: inset 0 1px #ffe6a122 !important; font-size: 0 !important; font-weight: 900 !important; line-height: 1.05 !important; text-align: center !important; white-space: normal !important; pointer-events: auto !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .modern-vip-action-dock > button::before { display: block !important; color: inherit !important; font-size: 11px !important; line-height: 1.05 !important; white-space: normal !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .modern-vip-action-dock > #readyButton::before { content: "HAZIRIM"; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .modern-vip-action-dock > #nokAutoSortPresentation::before { content: "OTOMATİK DİZ"; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .modern-vip-action-dock > #showIndicatorButton::before { content: "GÖSTERGE GÖSTER"; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .modern-vip-action-dock > #nokDoubleGoButton::before { content: "ÇİFT GİT"; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .modern-vip-action-dock > #okeyAutoPlayButton::before { content: "OTO. OYNA"; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .modern-vip-action-dock > #drawPileButton::before { content: "TAŞ ÇEK"; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .modern-vip-action-dock > #discardPileButton::before { content: "SON TAŞI AL"; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .modern-vip-action-dock > #discardButton::before { content: "TAŞ AT"; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .modern-vip-action-dock > #nokUndoButton::before { content: "GERİ AL"; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .modern-vip-action-dock > #finishButton::before { content: "AÇ / BİTİR"; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .modern-vip-action-dock > #forfeitTableButton::before { content: "OYUNU BIRAK"; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .modern-vip-action-dock > #leaveTableButton::before { content: "MASADAN ÇIK"; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .modern-vip-action-dock > button:hover:not(:disabled), #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .modern-vip-action-dock > button:focus-visible { border-color: #28b9f4 !important; box-shadow: 0 0 12px #28b9f455, inset 0 1px #fff8 !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .modern-vip-action-dock > button:disabled { opacity: .55 !important; filter: saturate(.62) !important; } @media (max-width: 900px) { #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation { transform: scale(min(1, calc(100vw / 1498px), calc(100vh / 1050px))) !important; } } /* MODERN_VIP_FINAL_TABLE_SURFACE_END */ /* MODERN_VIP_APPROVED_REFERENCE_IMAGE_START The approved PNG is the only VIP surface. All visible controls below are transparent live DOM hitboxes or dynamic data overlays; no VIP furniture, logo, rack, button face, or table background is redrawn here. */ #matchPanel.normal-okey.table-theme-modern-vip { position: fixed !important; inset: 0 !important; overflow: hidden !important; background: #030507 !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation { position: relative !important; display: block !important; width: 1498px !important; height: 1050px !important; min-height: 1050px !important; max-width: none !important; padding: 0 !important; overflow: hidden !important; transform-origin: top left !important; transform: scale(min(1, calc(100vw / 1498px), calc(100vh / 1050px))) !important; background: transparent !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation::before, #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation::after { display: none !important; content: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .modern-vip-reference-surface { position: absolute !important; inset: 0 !important; display: block !important; width: 1498px !important; height: 1050px !important; max-width: none !important; object-fit: fill !important; object-position: top left !important; z-index: 0 !important; pointer-events: none !important; user-select: none !important; } /* The approved PNG already contains the logo, info card, labels, furniture, and button faces. Preserve only live data/control layers above it. */ #matchPanel.normal-okey.table-theme-modern-vip .nok-topbar { position: absolute !important; inset: 0 !important; display: block !important; z-index: 24 !important; pointer-events: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-logo-card, #matchPanel.normal-okey.table-theme-modern-vip .normal-okey-nav, #matchPanel.normal-okey.table-theme-modern-vip .normal-okey-session, #matchPanel.normal-okey.table-theme-modern-vip .nok-top-controls { visibility: hidden !important; pointer-events: none !important; } /* Dynamic top information covers the sample values in the PNG without changing the source image. */ #matchPanel.normal-okey.table-theme-modern-vip .nok-left-column { position: absolute !important; left: 294px !important; top: 7px !important; width: 285px !important; height: 101px !important; z-index: 25 !important; pointer-events: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel { position: relative !important; width: 100% !important; height: 100% !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-info-heading, #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dt, #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel .normal-okey-data, #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel .normal-okey-status { visibility: hidden !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl { position: absolute !important; inset: 0 !important; display: block !important; margin: 0 !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div { display: none !important; position: absolute !important; width: 126px !important; height: 20px !important; margin: 0 !important; pointer-events: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(1), #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(3), #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(4), #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(6) { display: block !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(1) { left: 10px !important; top: 31px !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(3) { left: 10px !important; top: 52px !important; width: 142px !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(4) { left: 153px !important; top: 31px !important; width: 105px !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(6) { left: 153px !important; top: 52px !important; width: 116px !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dd { display: block !important; max-width: none !important; margin: 0 !important; padding: 1px 4px !important; overflow: hidden !important; border-radius: 3px !important; color: #fff5df !important; background: rgba(5, 8, 11, .96) !important; font-size: 11px !important; line-height: 18px !important; text-align: left !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* The status controls remain live but are visually transparent over the corresponding reference strip. */ #matchPanel.normal-okey.table-theme-modern-vip .nok-statusbar { position: absolute !important; inset: 0 !important; z-index: 26 !important; pointer-events: none !important; background: transparent !important; border: 0 !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-game-status-panel { position: absolute !important; left: 590px !important; top: 88px !important; width: 230px !important; min-height: 38px !important; padding: 4px 8px !important; overflow: hidden !important; border: 0 !important; border-radius: 4px !important; color: #ffe9b1 !important; background: rgba(4, 8, 12, .84) !important; pointer-events: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-settings-panel { position: absolute !important; left: 828px !important; top: 88px !important; width: 300px !important; height: 42px !important; pointer-events: auto !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-settings-panel label { opacity: 0 !important; pointer-events: auto !important; } #matchPanel.normal-okey.table-theme-modern-vip #testModeBadge { visibility: hidden !important; } /* Exact five upper menu hitboxes. The existing 4D menu code moves the real settings button into this group and restores it when VIP is left. */ #matchPanel.normal-okey.table-theme-modern-vip #normalOkeyBottomMenu, #matchPanel.normal-okey.table-theme-modern-vip #normalOkeyBottomMenu[hidden] { position: absolute !important; inset: 0 !important; display: block !important; visibility: visible !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; pointer-events: none !important; z-index: 50 !important; } #matchPanel.normal-okey.table-theme-modern-vip #normalOkeyBottomMenu > .normal-okey-bottom-menu-left { position: absolute !important; left: 758px !important; top: 8px !important; width: 727px !important; height: 69px !important; display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 8px !important; pointer-events: auto !important; } #matchPanel.normal-okey.table-theme-modern-vip #normalOkeyBottomMenu > .normal-okey-bottom-menu-left > [data-bottom-menu="games"] { order: 1 !important; } #matchPanel.normal-okey.table-theme-modern-vip #normalOkeyBottomMenu > .normal-okey-bottom-menu-left > [data-bottom-menu="lobbies"] { order: 2 !important; } #matchPanel.normal-okey.table-theme-modern-vip #normalOkeyBottomMenu > .normal-okey-bottom-menu-left > [data-bottom-menu="private"] { order: 3 !important; } #matchPanel.normal-okey.table-theme-modern-vip #normalOkeyBottomMenu > .normal-okey-bottom-menu-left > [data-bottom-menu="operations"] { order: 4 !important; } #matchPanel.normal-okey.table-theme-modern-vip #normalOkeyBottomMenu > .normal-okey-bottom-menu-left > [data-bottom-menu="operator-settings"] { order: 5 !important; } #matchPanel.normal-okey.table-theme-modern-vip #normalOkeyBottomMenu > .normal-okey-bottom-menu-left > button:not([hidden]) { display: flex !important; min-width: 0 !important; min-height: 0 !important; align-items: center !important; justify-content: center !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; color: transparent !important; background: transparent !important; box-shadow: none !important; font-size: 0 !important; text-shadow: none !important; pointer-events: auto !important; } #matchPanel.normal-okey.table-theme-modern-vip #normalOkeyBottomMenu > .normal-okey-bottom-menu-left > button::before, #matchPanel.normal-okey.table-theme-modern-vip #normalOkeyBottomMenu > .normal-okey-bottom-menu-left > button::after { display: none !important; content: none !important; } #matchPanel.normal-okey.table-theme-modern-vip #normalOkeyBottomMenu > .normal-okey-bottom-menu-left > button[hidden] { display: none !important; } /* Exact five lower-right hitboxes. */ #matchPanel.normal-okey.table-theme-modern-vip #normalOkeyBottomMenu > .normal-okey-bottom-menu-right { position: absolute !important; left: 1140px !important; top: 891px !important; width: 345px !important; height: 82px !important; display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 5px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; pointer-events: auto !important; } #matchPanel.normal-okey.table-theme-modern-vip #normalOkeyBottomMenu > .normal-okey-bottom-menu-right > button { display: flex !important; min-width: 0 !important; min-height: 0 !important; align-items: center !important; justify-content: center !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; color: transparent !important; background: transparent !important; box-shadow: none !important; font-size: 0 !important; pointer-events: auto !important; } #matchPanel.normal-okey.table-theme-modern-vip #normalOkeyBottomMenu > .normal-okey-bottom-menu-right > button::before, #matchPanel.normal-okey.table-theme-modern-vip #normalOkeyBottomMenu > .normal-okey-bottom-menu-right > button::after { display: none !important; content: none !important; } #matchPanel.normal-okey.table-theme-modern-vip #normalOkeyBottomMenu > .normal-okey-bottom-menu-right > button[hidden] { display: none !important; } /* Directly mapped table plane and dynamic seat/game overlays. */ #matchPanel.normal-okey.table-theme-modern-vip .nok-table-stage { position: absolute !important; left: 17px !important; top: 285px !important; width: 1087px !important; height: 527px !important; padding: 0 !important; margin: 0 !important; display: block !important; z-index: 8 !important; background: transparent !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-table, #matchPanel.normal-okey.table-theme-modern-vip #gameBoard { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; min-height: 0 !important; max-width: none !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; } #matchPanel.normal-okey.table-theme-modern-vip #gameBoard::before, #matchPanel.normal-okey.table-theme-modern-vip #gameBoard::after, #matchPanel.normal-okey.table-theme-modern-vip .nok-visual-furniture-shell, #matchPanel.normal-okey.table-theme-modern-vip .nok-center-brand, #matchPanel.normal-okey.table-theme-modern-vip .nok-center-brand::before, #matchPanel.normal-okey.table-theme-modern-vip .nok-center-brand::after { display: none !important; content: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-center-play-area { position: absolute !important; inset: 0 !important; z-index: 12 !important; pointer-events: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-station-top { left: 465px !important; top: -91px !important; width: 300px !important; height: 84px !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-station-bottom { left: 465px !important; top: 270px !important; width: 300px !important; height: 84px !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-station-left { left: 0 !important; top: 125px !important; width: 216px !important; height: 84px !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-station-right { left: 911px !important; top: 125px !important; width: 205px !important; height: 84px !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-station-top, #matchPanel.normal-okey.table-theme-modern-vip .nok-station-bottom, #matchPanel.normal-okey.table-theme-modern-vip .nok-station-left, #matchPanel.normal-okey.table-theme-modern-vip .nok-station-right { z-index: 20 !important; } #matchPanel.normal-okey.table-theme-modern-vip .player-seat { position: absolute !important; inset: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; min-width: 0 !important; max-width: none !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .player-seat:not(.has-player) { visibility: hidden !important; pointer-events: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .player-seat.has-player { visibility: visible !important; pointer-events: auto !important; } #matchPanel.normal-okey.table-theme-modern-vip .seat-avatar { width: 54px !important; height: 54px !important; flex: 0 0 54px !important; border: 2px solid #e5a52f !important; box-shadow: 0 0 0 2px #050608, 0 0 12px #ff9d2e66 !important; } #matchPanel.normal-okey.table-theme-modern-vip .seat-identity { min-width: 126px !important; max-width: 180px !important; padding: 6px 9px !important; border: 1px solid #d28b2e !important; border-radius: 5px !important; background: rgba(4, 8, 11, .94) !important; box-shadow: 0 5px 12px #000b !important; } #matchPanel.normal-okey.table-theme-modern-vip .seat-identity strong { color: #fff5df !important; font-size: 20px !important; } #matchPanel.normal-okey.table-theme-modern-vip .seat-identity small { color: #d5d8d8 !important; font-size: 9px !important; } #matchPanel.normal-okey.table-theme-modern-vip .seat-identity .player-score { color: #ffd36f !important; font-size: 18px !important; } #matchPanel.normal-okey.table-theme-modern-vip .opponent-rack { border: 0 !important; background: transparent !important; box-shadow: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .opponent-rack::after { color: #ffe7bd !important; background: rgba(5, 8, 11, .92) !important; } /* The rack image and wood DOM are hidden because the approved PNG already contains the decorative rack; real tile nodes stay live above it. */ #matchPanel.normal-okey.table-theme-modern-vip .nok-own-station { position: absolute !important; left: 200px !important; top: 352px !important; width: 730px !important; height: 168px !important; z-index: 22 !important; } #matchPanel.normal-okey.table-theme-modern-vip .normal-okey-rack-zone { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .normal-okey-rack-zone::before, #matchPanel.normal-okey.table-theme-modern-vip .normal-okey-rack-zone::after, #matchPanel.normal-okey.table-theme-modern-vip .normal-okey-rack-zone .rack-image-skin, #matchPanel.normal-okey.table-theme-modern-vip .normal-okey-rack-zone .rack-wood-body, #matchPanel.normal-okey.table-theme-modern-vip .rack-hint, #matchPanel.normal-okey.table-theme-modern-vip .auto-sort-actions, #matchPanel.normal-okey.table-theme-modern-vip .nok-live-actions, #matchPanel.normal-okey.table-theme-modern-vip .nok-action-bar, #matchPanel.normal-okey.table-theme-modern-vip .nok-test-helper-actions { display: none !important; } #matchPanel.normal-okey.table-theme-modern-vip #handTiles { position: absolute !important; inset: 18px 10px 4px !important; display: flex !important; flex-wrap: wrap !important; align-content: end !important; gap: 3px 4px !important; width: auto !important; height: auto !important; padding: 0 !important; overflow: visible !important; background: transparent !important; border: 0 !important; } #matchPanel.normal-okey.table-theme-modern-vip #handTiles .rack-slot, #matchPanel.normal-okey.table-theme-modern-vip #handTiles .tile, #matchPanel.normal-okey.table-theme-modern-vip .board-tile, #matchPanel.normal-okey.table-theme-modern-vip .center-indicator-tile, #matchPanel.normal-okey.table-theme-modern-vip .discard-stack { width: 44px !important; height: 61px !important; min-height: 0 !important; } #matchPanel.normal-okey.table-theme-modern-vip #handTiles .rack-slot { flex: 0 0 44px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } #matchPanel.normal-okey.table-theme-modern-vip #handTiles .tile.tile-asset, #matchPanel.normal-okey.table-theme-modern-vip .board-tile.tile-asset, #matchPanel.normal-okey.table-theme-modern-vip .center-indicator-tile.tile-asset { border: 0 !important; background: transparent !important; } /* Live pile, indicator, and discards are transparent overlays over the table plane; their existing tile rendering and event behavior stay authoritative. */ #matchPanel.normal-okey.table-theme-modern-vip .nok-center { position: absolute !important; left: 385px !important; top: 135px !important; display: flex !important; gap: 12px !important; transform: none !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; z-index: 18 !important; pointer-events: auto !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-pile-box, #matchPanel.normal-okey.table-theme-modern-vip .center-indicator, #matchPanel.normal-okey.table-theme-modern-vip .nok-discard-center { background: rgba(4, 8, 11, .72) !important; border-radius: 4px !important; color: #fff1c7 !important; } #matchPanel.normal-okey.table-theme-modern-vip .seat-discards { z-index: 16 !important; } /* Right reference panels remain image-backed while live chat/forms retain their actual scrolling, submit, treat, radio, and keyboard behavior. */ #matchPanel.normal-okey.table-theme-modern-vip .nok-right-column { position: absolute !important; left: 1140px !important; top: 88px !important; width: 345px !important; height: 790px !important; display: flex !important; flex-direction: column !important; gap: 8px !important; padding: 0 !important; overflow: visible !important; z-index: 40 !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-chat-panel, #matchPanel.normal-okey.table-theme-modern-vip .nok-treat-panel, #matchPanel.normal-okey.table-theme-modern-vip .nok-radio-panel { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-chat-panel { position: relative !important; flex: 0 0 492px !important; height: 492px !important; padding: 0 !important; overflow: visible !important; } #matchPanel.normal-okey.table-theme-modern-vip .chat-heading { position: absolute !important; inset: 5px 8px auto !important; height: 72px !important; margin: 0 !important; z-index: 2 !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-chat-tab { color: transparent !important; background: transparent !important; border: 0 !important; box-shadow: none !important; font-size: 0 !important; } #matchPanel.normal-okey.table-theme-modern-vip #tableChatSubtitle { visibility: hidden !important; } #matchPanel.normal-okey.table-theme-modern-vip #chatMessages { position: absolute !important; left: 8px !important; top: 90px !important; width: 329px !important; height: 287px !important; min-height: 0 !important; padding: 4px !important; overflow: auto !important; background: rgba(3, 6, 8, .82) !important; scrollbar-color: #9c7636 #080b10 !important; } #matchPanel.normal-okey.table-theme-modern-vip #chatMessages .chat-empty { visibility: hidden !important; } #matchPanel.normal-okey.table-theme-modern-vip .chat-form { position: absolute !important; left: 8px !important; bottom: 8px !important; width: 329px !important; height: 52px !important; display: flex !important; gap: 4px !important; padding: 0 !important; border: 0 !important; background: transparent !important; } #matchPanel.normal-okey.table-theme-modern-vip .chat-form input { min-width: 0 !important; color: #fff1c7 !important; background: rgba(5, 7, 10, .94) !important; border-color: #9c7636 !important; } #matchPanel.normal-okey.table-theme-modern-vip .chat-form input::placeholder { color: transparent !important; } #matchPanel.normal-okey.table-theme-modern-vip .chat-form button { color: transparent !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-treat-panel { position: relative !important; flex: 0 0 137px !important; height: 137px !important; padding: 0 !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-treat-panel header { visibility: hidden !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-treat-options { position: absolute !important; inset: 35px 8px 8px !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 5px !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-treat-options button { color: transparent !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-treat-options button span { visibility: hidden !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-radio-panel { position: relative !important; flex: 0 0 145px !important; height: 145px !important; padding: 0 !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-radio-header { color: transparent !important; border: 0 !important; background: transparent !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-radio-body, #matchPanel.normal-okey.table-theme-modern-vip .nok-radio-controls, #matchPanel.normal-okey.table-theme-modern-vip .nok-radio-request-button { opacity: 0 !important; } /* Exact one-coordinate-system responsive scaling for both requested viewports. */ @media (max-width: 1498px), (max-height: 1050px) { #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation { transform: scale(min(1, calc(100vw / 1498px), calc(100vh / 1050px))) !important; } } /* MODERN_VIP_APPROVED_REFERENCE_IMAGE_END */ /* MODERN_VIP_REFERENCE_PAINT_ORDER_FIX_START The approved PNG is mounted as the first child of .nok-presentation and is intentionally non-interactive. Older VIP surface rules remain in this stylesheet for compatibility, so neutralize only their decorative paint roots here. Live seats, tiles, chat, menus and action buttons keep their existing DOM/event contracts and stay above the image layer. */ #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation { isolation: isolate !important; background: transparent !important; background-image: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .modern-vip-reference-surface { z-index: 0 !important; } /* The shared Normal Okey glass rules are lower-specificity than this theme-scoped ID selector. Remove only their backdrop blur from the live VIP overlays so the approved raster surface remains pixel-sharp. */ #matchPanel.normal-okey.table-theme-modern-vip .nok-statusbar, #matchPanel.normal-okey.table-theme-modern-vip .nok-center, #matchPanel.normal-okey.table-theme-modern-vip .player-seat, #matchPanel.normal-okey.table-theme-modern-vip .nok-right-column, #matchPanel.normal-okey.table-theme-modern-vip .nok-action-bar { backdrop-filter: none; -webkit-backdrop-filter: none; } /* The shared header rule paints an opaque full-screen gradient because the VIP presentation promotes .normal-okey-header/.nok-topbar to an inset stacking layer. Keep that live layer above the PNG, but remove only its decorative paint for VIP. */ #matchPanel.normal-okey.table-theme-modern-vip .nok-topbar { background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-shell, #matchPanel.normal-okey.table-theme-modern-vip .nok-center-column, #matchPanel.normal-okey.table-theme-modern-vip .normal-okey-main, #matchPanel.normal-okey.table-theme-modern-vip .nok-table-area, #matchPanel.normal-okey.table-theme-modern-vip .nok-table-stage, #matchPanel.normal-okey.table-theme-modern-vip .nok-table, #matchPanel.normal-okey.table-theme-modern-vip #gameBoard, #matchPanel.normal-okey.table-theme-modern-vip .nok-felt, #matchPanel.normal-okey.table-theme-modern-vip .nok-visual-furniture-shell, #matchPanel.normal-okey.table-theme-modern-vip .normal-okey-rack-zone, #matchPanel.normal-okey.table-theme-modern-vip #handTiles { background: transparent !important; background-image: none !important; box-shadow: none !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .modern-vip-action-dock { background: transparent !important; border: 0 !important; box-shadow: none !important; pointer-events: none !important; z-index: 46 !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .modern-vip-action-dock > button:not([hidden]):not(.hidden) { background: transparent !important; border: 0 !important; box-shadow: none !important; color: transparent !important; text-shadow: none !important; font-size: 0 !important; pointer-events: auto !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .modern-vip-action-dock > button::before, #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .modern-vip-action-dock > button::after { display: none !important; content: none !important; } /* MODERN_VIP_REFERENCE_PAINT_ORDER_FIX_END */ /* MODERN_VIP_RIGHT_PANEL_AND_BOTTOM_HITBOX_FIX_START The approved PNG already paints the right-column decoration and the five lower-right utility faces. Keep the existing DOM nodes, focus targets and listeners, but remove only their duplicate decorative paint in VIP. Live chat text and entered input remain real HTML overlays above the PNG. */ #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column { background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-chat-panel, #matchPanel.normal-okey.table-theme-modern-vip .nok-treat-panel, #matchPanel.normal-okey.table-theme-modern-vip .nok-radio-panel { background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; } /* The raster supplies the fixed panel labels and empty-state copy. */ #matchPanel.normal-okey.table-theme-modern-vip .chat-heading, #matchPanel.normal-okey.table-theme-modern-vip .nok-treat-panel header, #matchPanel.normal-okey.table-theme-modern-vip .nok-radio-header { background: transparent !important; border: 0 !important; box-shadow: none !important; } /* Keep the live message stream readable without placing an opaque sheet over the approved panel artwork. The empty state stays hidden to avoid a second copy of the PNG's fixed "Henüz mesaj yok." label. */ #matchPanel.normal-okey.table-theme-modern-vip #chatMessages { background: transparent !important; color: #fff1c7 !important; text-shadow: 0 1px 2px #000 !important; } #matchPanel.normal-okey.table-theme-modern-vip #chatMessages .chat-line, #matchPanel.normal-okey.table-theme-modern-vip #chatMessages .system-line { color: #fff1c7 !important; text-shadow: 0 1px 2px #000 !important; } #matchPanel.normal-okey.table-theme-modern-vip #chatMessages .chat-line strong { color: #ffd17a !important; } #matchPanel.normal-okey.table-theme-modern-vip #chatMessages .chat-line > span:last-child { color: #fff8ea !important; } #matchPanel.normal-okey.table-theme-modern-vip .chat-form { background: transparent !important; border-top: 0 !important; } #matchPanel.normal-okey.table-theme-modern-vip .chat-form input { background: transparent !important; border-color: transparent !important; color: #fff1c7 !important; caret-color: #28b9f4 !important; text-shadow: 0 1px 2px #000 !important; } #matchPanel.normal-okey.table-theme-modern-vip .chat-form input::placeholder { color: transparent !important; } /* Static PNG faces remain visible; controls remain keyboard/pointer targets. */ #matchPanel.normal-okey.table-theme-modern-vip .chat-form button, #matchPanel.normal-okey.table-theme-modern-vip .nok-treat-options button, #matchPanel.normal-okey.table-theme-modern-vip .nok-radio-request-button { background: transparent !important; border: 0 !important; box-shadow: none !important; color: transparent !important; text-shadow: none !important; pointer-events: auto !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-chat-tab:focus-visible, #matchPanel.normal-okey.table-theme-modern-vip .chat-form input:focus-visible, #matchPanel.normal-okey.table-theme-modern-vip .chat-form button:focus-visible, #matchPanel.normal-okey.table-theme-modern-vip .nok-treat-options button:focus-visible, #matchPanel.normal-okey.table-theme-modern-vip .nok-radio-header:focus-visible, #matchPanel.normal-okey.table-theme-modern-vip .nok-radio-request-button:focus-visible { outline: 2px solid #28b9f4 !important; outline-offset: 2px !important; background: transparent !important; border-color: transparent !important; box-shadow: none !important; } /* The radio artwork is fixed in the PNG. Do not hide the whole control subtree with opacity:0: keep its state and focus tree live, while making only the duplicated static faces transparent. */ #matchPanel.normal-okey.table-theme-modern-vip .nok-radio-body, #matchPanel.normal-okey.table-theme-modern-vip .nok-radio-controls, #matchPanel.normal-okey.table-theme-modern-vip .nok-radio-request-button { opacity: 1 !important; background: transparent !important; box-shadow: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-radio-artwork, #matchPanel.normal-okey.table-theme-modern-vip .nok-radio-equalizer, #matchPanel.normal-okey.table-theme-modern-vip .nok-radio-track > small, #matchPanel.normal-okey.table-theme-modern-vip .nok-radio-volume-icon { visibility: hidden !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-radio-track-title, #matchPanel.normal-okey.table-theme-modern-vip .nok-radio-track-artist { color: #fff1c7 !important; text-shadow: 0 1px 2px #000 !important; } /* The PNG supplies the volume slider and request-button face. The actual input/button remains the accessible hitbox and retains disabled semantics. */ #matchPanel.normal-okey.table-theme-modern-vip .nok-radio-volume { opacity: 0 !important; pointer-events: auto !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > #normalOkeyBottomMenu > .normal-okey-bottom-menu-right { background: transparent !important; border: 0 !important; box-shadow: none !important; } /* Higher specificity than the earlier visible-face rule at line 626. */ #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > #normalOkeyBottomMenu > .normal-okey-bottom-menu-right > button:not([hidden]):not(.hidden) { background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; color: transparent !important; text-shadow: none !important; font-size: 0 !important; pointer-events: auto !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > #normalOkeyBottomMenu > .normal-okey-bottom-menu-right > button::before, #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > #normalOkeyBottomMenu > .normal-okey-bottom-menu-right > button::after { display: none !important; content: none !important; } /* Hover/focus must not recreate a second button face. Focus remains visible through an outline so keyboard users keep a reliable target indicator. */ #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > #normalOkeyBottomMenu > .normal-okey-bottom-menu-right > button:hover:not(:disabled), #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > #normalOkeyBottomMenu > .normal-okey-bottom-menu-right > button:focus-visible { background: transparent !important; border: 0 !important; color: transparent !important; box-shadow: none !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > #normalOkeyBottomMenu > .normal-okey-bottom-menu-right > button:focus-visible { outline: 2px solid #28b9f4 !important; outline-offset: 2px !important; } /* MODERN_VIP_RIGHT_PANEL_AND_BOTTOM_HITBOX_FIX_END */ /* MODERN_VIP_PREMIUM_WINDOW_SYSTEM_END */ /* MODERN_VIP_CENTER_LIVE_GEOMETRY_START Live Chrome geometry (1280x899, PNG reference plane 1498x1050) showed the previous flex row beginning at presentation-local (385,135), which put the live pile/indicator/discard group over the baked OYUNPIYAT center mark. Keep every authoritative node and handler, but give the three live center hosts independent presentation-local slots above that mark. The compact slot is the normal/single-stack footprint; the five-stack branch below retains the real five-stack renderer and its source assets. */ @media (min-width: 901px) { #matchPanel.normal-okey.table-theme-modern-vip .nok-center { left: 350px !important; top: 45px !important; width: 560px !important; height: 90px !important; display: block !important; gap: 0 !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-pile-box, #matchPanel.normal-okey.table-theme-modern-vip .center-indicator, #matchPanel.normal-okey.table-theme-modern-vip .nok-discard-center { position: absolute !important; top: 0 !important; width: 72px !important; min-width: 72px !important; height: 77px !important; min-height: 77px !important; display: grid !important; align-content: start !important; justify-items: center !important; gap: 3px !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-pile-box { left: 0 !important; } #matchPanel.normal-okey.table-theme-modern-vip .center-indicator { left: 82px !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-discard-center { left: 164px !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-pile-box > #boardPileCount { position: relative !important; left: auto !important; top: auto !important; margin: 0 !important; min-width: 28px !important; line-height: 1.1 !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-draw-stack:not([data-stock-mode="five-stack"]) { position: relative !important; left: auto !important; top: auto !important; width: 43px !important; height: 58px !important; min-width: 43px !important; min-height: 58px !important; margin: 0 !important; } /* A five-stack is real gameplay presentation, not PNG decoration. Use the established 272x322 reference plane and move the independent indicator and unowned-discard hosts beside it without changing render order. */ #matchPanel.normal-okey.table-theme-modern-vip .nok-center:has(.nok-draw-stack[data-stock-mode="five-stack"]) { width: 560px !important; height: 350px !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-center:has(.nok-draw-stack[data-stock-mode="five-stack"]) .nok-pile-box { width: 272px !important; min-width: 272px !important; height: 350px !important; min-height: 350px !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-center:has(.nok-draw-stack[data-stock-mode="five-stack"]) .center-indicator { left: 300px !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-center:has(.nok-draw-stack[data-stock-mode="five-stack"]) .nok-discard-center { left: 382px !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-pile-box .nok-draw-stack[data-stock-mode="five-stack"] { position: absolute !important; left: 0 !important; top: 0 !important; width: 272px !important; min-width: 272px !important; height: 322px !important; min-height: 322px !important; display: block !important; overflow: visible !important; background: none !important; background-image: none !important; border: 0 !important; box-shadow: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .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: 106px !important; min-height: 106px !important; display: flex !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; } #matchPanel.normal-okey.table-theme-modern-vip .nok-pile-box .nok-draw-stack[data-stock-mode="five-stack"] .stock-stack-row[data-classic-row="center"] { top: 131px !important; align-items: flex-end !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-pile-box .nok-draw-stack[data-stock-mode="five-stack"] .stock-stack-row[data-classic-row="bottom"] { top: 252.5905511812px !important; flex-direction: row !important; } #matchPanel.normal-okey.table-theme-modern-vip .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 60px !important; width: 60px !important; min-width: 60px !important; max-width: 60px !important; height: 106px !important; min-height: 106px !important; max-height: 106px !important; aspect-ratio: 60 / 106 !important; object-fit: fill !important; margin: 0 !important; } #matchPanel.normal-okey.table-theme-modern-vip .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-vip .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; } #matchPanel.normal-okey.table-theme-modern-vip .nok-center:has(.nok-draw-stack[data-stock-mode="five-stack"]) .nok-pile-box > #boardPileCount { width: 180px !important; margin: 0 !important; } /* The approved PNG shows avatar-left / identity-right cards at all four stations. The shared Normal Okey seat rules leave #seat1/#seat2 in a vertical/reversed flow, which is why the measured Ekol avatar and card were split across y=534.5 and y=593.5. */ #matchPanel.normal-okey.table-theme-modern-vip .nok-station-top > #seat3, #matchPanel.normal-okey.table-theme-modern-vip .nok-station-bottom > #seat1, #matchPanel.normal-okey.table-theme-modern-vip .nok-station-left > #seat4, #matchPanel.normal-okey.table-theme-modern-vip .nok-station-right > #seat2 { flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 7px !important; } #matchPanel.normal-okey.table-theme-modern-vip .seat-identity { box-sizing: border-box !important; width: 174px !important; min-width: 174px !important; max-width: 174px !important; height: 60px !important; min-height: 60px !important; max-height: 60px !important; overflow: hidden !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-own-station { left: 200px !important; top: 352px !important; width: 730px !important; height: 168px !important; } #matchPanel.normal-okey.table-theme-modern-vip #handTiles { inset: 18px 10px 4px !important; width: auto !important; height: auto !important; align-content: end !important; } /* Use the same fixed presentation plane as the measured Modern discard anchors. The runtime's 396px inline top remains authoritative for #discardSeat3; this CSS only supplies the VIP containing block and the other three independent seat anchors. */ #matchPanel.normal-okey.table-theme-modern-vip #discardSeat1, #matchPanel.normal-okey.table-theme-modern-vip #discardSeat2, #matchPanel.normal-okey.table-theme-modern-vip #discardSeat3, #matchPanel.normal-okey.table-theme-modern-vip #discardSeat4 { position: fixed !important; inset: auto !important; right: auto !important; bottom: auto !important; width: 48px !important; min-width: 48px !important; height: 61px !important; min-height: 61px !important; transform: translate(-50%, -50%) !important; pointer-events: auto !important; } #matchPanel.normal-okey.table-theme-modern-vip #discardSeat1 { left: 874.125px !important; top: 589.8px !important; } #matchPanel.normal-okey.table-theme-modern-vip #discardSeat2 { left: 836.4px !important; top: 411px !important; } #matchPanel.normal-okey.table-theme-modern-vip #discardSeat3 { left: 372.6px !important; top: 396px !important; } #matchPanel.normal-okey.table-theme-modern-vip #discardSeat4 { left: 309px !important; top: 589.788px !important; } #matchPanel.normal-okey.table-theme-modern-vip .modern-discard-stack { position: relative !important; display: block !important; width: 44px !important; height: 61px !important; min-width: 44px !important; min-height: 61px !important; overflow: visible !important; } #matchPanel.normal-okey.table-theme-modern-vip .modern-discard-stack > .board-tile[data-modern-discard-face="history"] { position: absolute !important; inset: 0 !important; visibility: visible !important; opacity: 1 !important; pointer-events: none !important; z-index: var(--discard-z-index, 1) !important; transform: translate( calc(var(--discard-depth, 0) * 1px), calc(var(--discard-depth, 0) * -1px) ) !important; } #matchPanel.normal-okey.table-theme-modern-vip .modern-discard-stack > .board-tile[data-modern-discard-face="latest"] { position: absolute !important; inset: 0 !important; visibility: visible !important; pointer-events: auto !important; z-index: var(--discard-z-index, 1) !important; transform: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .modern-discard-stack > .discard-stack-count { position: absolute !important; left: calc(100% + 6px) !important; top: auto !important; right: auto !important; bottom: 0 !important; min-width: 18px !important; pointer-events: none !important; z-index: 10 !important; } } /* MODERN_VIP_CENTER_LIVE_GEOMETRY_END */ /* MODERN_VIP_MEASURED_CENTER_SLOT_ALIGNMENT_START The visible compact draw face and indicator share the live .nok-pile-box. Keep the existing draw interaction and state-owned children, but give the two native Royal Ivory faces one equal 44x61 row. app.js measures the containing block and moves that host toward the live bottom rack; these rules do not move the hidden legacy #centerIndicator host or discards. */ @media (min-width: 901px) { #matchPanel.normal-okey.table-theme-modern-vip[data-stock-presentation="modern"] .nok-pile-box[data-modern-single-stack="true"] > .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(5px, .48vw, 8px) !important; width: calc(44px + 44px + clamp(5px, .48vw, 8px)) !important; min-width: calc(44px + 44px + clamp(5px, .48vw, 8px)) !important; height: 61px !important; min-height: 61px !important; left: 0 !important; top: 0 !important; overflow: visible !important; } #matchPanel.normal-okey.table-theme-modern-vip[data-stock-presentation="modern"] .nok-pile-box[data-modern-single-stack="true"] > .nok-draw-stack.modern-stock-indicator-count-group > .stock-stack-image.stock-stack-single, #matchPanel.normal-okey.table-theme-modern-vip[data-stock-presentation="modern"] .nok-pile-box[data-modern-single-stack="true"] > .nok-draw-stack.modern-stock-indicator-count-group > .modern-single-stock-indicator { flex: 0 0 44px !important; width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 61px !important; min-height: 61px !important; max-height: 61px !important; margin: 0 !important; aspect-ratio: 44 / 61 !important; object-fit: contain !important; } #matchPanel.normal-okey.table-theme-modern-vip[data-stock-presentation="modern"] .nok-pile-box[data-modern-single-stack="true"] > .nok-draw-stack.modern-stock-indicator-count-group > .stock-stack-image.stock-stack-single { order: 1 !important; } #matchPanel.normal-okey.table-theme-modern-vip[data-stock-presentation="modern"] .nok-pile-box[data-modern-single-stack="true"] > .nok-draw-stack.modern-stock-indicator-count-group > .modern-single-stock-indicator { order: 2 !important; } #matchPanel.normal-okey.table-theme-modern-vip[data-stock-presentation="modern"] .nok-pile-box[data-modern-single-stack="true"] > .nok-draw-stack.modern-stock-indicator-count-group > .modern-stock-count { z-index: 5 !important; pointer-events: none !important; } } /* MODERN_VIP_MEASURED_CENTER_SLOT_ALIGNMENT_END */ /* MODERN_VIP_CHAT_AND_EMPTY_DISCARD_FIX_START The approved PNG owns the fixed empty-discard frame and the two upper chat tab faces. Keep the authoritative DOM controls as transparent, measured hitboxes over those faces; live messages and pagination remain real DOM. */ #matchPanel.normal-okey.table-theme-modern-vip #unownedDiscard:empty { min-height: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .chat-heading { position: absolute !important; left: 8px !important; top: 5px !important; right: auto !important; bottom: auto !important; width: 329px !important; height: 72px !important; margin: 0 !important; padding: 0 !important; display: block !important; overflow: visible !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-chat-tabs { position: absolute !important; left: 0 !important; top: 0 !important; width: 329px !important; height: 52px !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: 150px minmax(0, 1fr) !important; gap: 8px !important; align-items: stretch !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-chat-tab { display: flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: 50px !important; min-height: 50px !important; margin: 0 !important; padding: 0 !important; color: transparent !important; background: transparent !important; border: 0 !important; box-shadow: none !important; font-size: 0 !important; line-height: 1 !important; pointer-events: auto !important; } #matchPanel.normal-okey.table-theme-modern-vip #tableChatTab { grid-column: 1 !important; } #matchPanel.normal-okey.table-theme-modern-vip #tableSpectatorsTab { grid-column: 2 !important; } /* The raster supplies the tab labels and sample counter. The live count remains in the accessible button name and remains owned by app.js. */ #matchPanel.normal-okey.table-theme-modern-vip #tableSpectatorCount { pointer-events: none !important; } #matchPanel.normal-okey.table-theme-modern-vip #tableChatSubtitle { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } /* When pagination is available, place its real button in the raster's "Daha eski mesajlar" face instead of allowing normal flex flow to collide with the message list or entry form. [hidden] is intentionally untouched. */ #matchPanel.normal-okey.table-theme-modern-vip #chatOlderButton:not([hidden]) { position: absolute !important; left: 8px !important; top: 389px !important; width: 329px !important; height: 34px !important; min-height: 34px !important; margin: 0 !important; padding: 0 !important; display: block !important; color: transparent !important; background: transparent !important; border: 0 !important; box-shadow: none !important; font-size: 0 !important; line-height: 1 !important; pointer-events: auto !important; } #matchPanel.normal-okey.table-theme-modern-vip #chatOlderButton:focus-visible { outline: 2px solid #28b9f4 !important; outline-offset: 2px !important; } /* MODERN_VIP_CHAT_AND_EMPTY_DISCARD_FIX_END */ /* MODERN_VIP_TOP_INFO_STATUS_MEASURED_LAYOUT_START Keep the approved raster labels and panel bounds. Only the live values and live status strings receive an explicit measured layout so they do not share one inline baseline or escape the reference card. */ #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(1), #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(3), #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(4), #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(6) { box-sizing: border-box !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(1) { width: 126px !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(3) { width: 150px !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(4) { width: 105px !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(6) { width: 120px !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dd { box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-size: 10px !important; line-height: 18px !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-game-status-panel { box-sizing: border-box !important; display: grid !important; grid-template-rows: repeat(3, minmax(0, 1fr)) !important; align-content: stretch !important; align-items: center !important; gap: 0 !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-game-status-panel > #turnText, #matchPanel.normal-okey.table-theme-modern-vip .nok-game-status-panel > #phaseText, #matchPanel.normal-okey.table-theme-modern-vip .nok-game-status-panel > #turnTimer { display: block !important; min-width: 0 !important; max-width: 100% !important; min-height: 0 !important; height: auto !important; margin: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; line-height: 10px !important; } /* MODERN_VIP_SCREENSHOT_TARGETED_LAYOUT_START Final measured guard for the approved 1498x1050 surface. The earlier measured values are retained: only the live values are laid out here; the raster's fixed labels and panels remain untouched. */ #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel { overflow: hidden !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl { position: absolute !important; inset: 0 !important; display: block !important; overflow: hidden !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(1), #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(3), #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(4), #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(6) { display: block !important; position: absolute !important; box-sizing: border-box !important; min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(1) { left: 10px !important; top: 31px !important; width: 126px !important; height: 20px !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(3) { left: 10px !important; top: 52px !important; width: 142px !important; height: 20px !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(4) { left: 153px !important; top: 31px !important; width: 105px !important; height: 20px !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(6) { left: 153px !important; top: 52px !important; width: 116px !important; height: 20px !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(1) dd, #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(3) dd, #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(4) dd, #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(6) dd { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-game-status-panel { height: 42px !important; min-height: 42px !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: repeat(3, minmax(0, 1fr)) !important; align-content: stretch !important; align-items: center !important; overflow: hidden !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-game-status-panel > #turnText, #matchPanel.normal-okey.table-theme-modern-vip .nok-game-status-panel > #phaseText, #matchPanel.normal-okey.table-theme-modern-vip .nok-game-status-panel > #turnTimer { grid-column: 1 !important; min-width: 0 !important; max-width: 100% !important; min-height: 0 !important; height: auto !important; margin: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; line-height: 10px !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-game-status-panel > #turnText { grid-row: 1 !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-game-status-panel > #phaseText { grid-row: 2 !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-game-status-panel > #turnTimer { grid-row: 3 !important; } /* The approved PNG already paints this label. The real pagination control remains visible, focusable and clickable, but its own glyph is paintless. */ #matchPanel.normal-okey.table-theme-modern-vip #chatOlderButton:not([hidden]) { z-index: 3 !important; visibility: visible !important; opacity: 1 !important; text-indent: -9999px !important; -webkit-text-fill-color: transparent !important; } #matchPanel.normal-okey.table-theme-modern-vip #chatOlderButton::before, #matchPanel.normal-okey.table-theme-modern-vip #chatOlderButton::after { content: none !important; display: none !important; } /* MODERN_VIP_SCREENSHOT_TARGETED_LAYOUT_END */ /* MODERN_VIP_TOP_INFO_STATUS_MEASURED_LAYOUT_END */ /* MODERN_VIP_MEASURED_VISUAL_GUARD_START Chrome-measured VIP guard: keep pagination in the chat panel's reference coordinate system, not in the tab-panel flow. The PNG remains the visual surface; the real button stays a transparent accessible hitbox. */ #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel { position: relative !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel { position: static !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel > #chatOlderButton:not([hidden]) { position: absolute !important; left: 8px !important; top: 389px !important; right: auto !important; bottom: auto !important; width: 329px !important; height: 34px !important; min-height: 34px !important; margin: 0 !important; padding: 0 !important; display: block !important; pointer-events: auto !important; } /* The raster label is fixed. Remove the hidden dt from visual flow while retaining an accessible off-screen definition for each live value. */ #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(1) dt, #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(3) dt, #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(4) dt, #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(6) dt { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; visibility: visible !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(1) dd, #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(3) dd, #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(4) dd, #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(6) dd { box-sizing: border-box !important; display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* MODERN_VIP_MEASURED_VISUAL_GUARD_END */ /* MODERN_VIP_CHAT_HIDDEN_BUTTON_FIX_START The HTML hidden attribute must remove the pagination control from layout. Keep this scoped to the VIP table so the lobby and other themes retain their existing chat pagination behavior. */ #matchPanel.normal-okey.table-theme-modern-vip #chatOlderButton[hidden] { display: none !important; visibility: hidden !important; pointer-events: none !important; } /* MODERN_VIP_CHAT_HIDDEN_BUTTON_FIX_END */ /* MODERN_VIP_TABLE_INFO_READABILITY_FIX_START Keep the four measured value slots independent. Numeric values get a slightly larger tabular face; the room name remains ellipsized in its measured slot and exposes its full value through the DOM title/ARIA label. */ #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(1) dd, #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(4) dd, #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(6) dd { font-size: 11px !important; font-variant-numeric: tabular-nums !important; letter-spacing: 0 !important; white-space: nowrap !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(3) dd { min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* MODERN_VIP_TABLE_INFO_READABILITY_FIX_END */ /* MODERN_VIP_TABLE_INFO_SINGLE_DYNAMIC_TIME_START The approved clean raster still contains a sample duration in this exact value slot. Keep the live, server-authoritative turnSeconds value visible while giving only that slot an opaque local surface; the PNG itself and all neighboring table values remain unchanged. */ #matchPanel.normal-okey.table-theme-modern-vip #normalOkeyTimeInfo { background: #05080b !important; background-image: none !important; } /* MODERN_VIP_TABLE_INFO_SINGLE_DYNAMIC_TIME_END */ /* MODERN_VIP_TOP_INFO_NON_OVERLAP_FIX_START The approved raster's MASA BİLGİSİ card ends at the y=88 status/control band. Keep the live value layer inside that 81px card instead of letting the former 101px overlay extend into the next band. */ #matchPanel.normal-okey.table-theme-modern-vip .nok-left-column { height: 81px !important; max-height: 81px !important; overflow: hidden !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel { height: 81px !important; max-height: 81px !important; overflow: hidden !important; } /* MODERN_VIP_TOP_INFO_NON_OVERLAP_FIX_END */ /* MODERN_VIP_STATUS_READABILITY_FIX_START Preserve the measured three-row panel and the raster underneath it. The live status strings receive a readable reference-sized face, while each row remains bounded and ellipsized for waiting, active, spectator, and reconnect states. */ #matchPanel.normal-okey.table-theme-modern-vip .nok-game-status-panel { padding: 2px 8px !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-game-status-panel > #turnText, #matchPanel.normal-okey.table-theme-modern-vip .nok-game-status-panel > #phaseText, #matchPanel.normal-okey.table-theme-modern-vip .nok-game-status-panel > #turnTimer { box-sizing: border-box !important; min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-size: 11px !important; font-weight: 700 !important; line-height: 12px !important; } /* MODERN_VIP_STATUS_READABILITY_FIX_END */ /* MODERN_VIP_C_V2_COUNTER_START Approved Modern VIP C/V2 treatment. The existing #boardPileCount node remains the authoritative dynamic value; only this theme's paint changes. */ #matchPanel.normal-okey.table-theme-modern-vip .nok-pile-box > #boardPileCount { position: absolute !important; left: var(--modern-vip-counter-left) !important; top: var(--modern-vip-counter-top) !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; box-sizing: border-box !important; width: 180px !important; min-width: 180px !important; max-width: 180px !important; height: 22px !important; min-height: 22px !important; max-height: 22px !important; padding: 0 12px !important; border: 1px solid transparent !important; border-radius: 5px !important; background: linear-gradient(180deg, #25282a 0%, #111416 48%, #080a0c 100%) padding-box, linear-gradient(180deg, #f8d982 0%, #b77b1c 42%, #efbe54 72%, #9b6415 100%) border-box !important; color: #E9C76F !important; font-family: "Rajdhani", "Arial Narrow", "Segoe UI", Arial, sans-serif !important; font-size: 16px !important; font-variant-numeric: tabular-nums !important; font-weight: 800 !important; letter-spacing: .015em !important; line-height: 20px !important; text-align: center !important; text-shadow: 0 1px 1px rgba(0, 0, 0, .86) !important; white-space: nowrap !important; overflow: hidden !important; box-shadow: inset 0 1px 0 rgba(255, 244, 191, .2), inset 0 -1px 0 rgba(0, 0, 0, .75), 0 2px 5px rgba(0, 0, 0, .48) !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-pile-box > #boardPileCount::after { content: none !important; display: none !important; } #matchPanel.normal-okey:not(.table-theme-modern-vip) .nok-pile-box > .modern-vip-pile-label { display: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-pile-box > .modern-vip-pile-label { position: absolute !important; left: var(--modern-vip-counter-left) !important; top: var(--modern-vip-counter-top) !important; z-index: 1 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; box-sizing: border-box !important; width: 180px !important; min-width: 180px !important; max-width: 180px !important; height: 22px !important; min-height: 22px !important; max-height: 22px !important; padding: 0 12px !important; pointer-events: none !important; color: #E9C76F !important; font-family: "Rajdhani", "Arial Narrow", "Segoe UI", Arial, sans-serif !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .025em !important; line-height: 20px !important; text-shadow: 0 1px 1px rgba(0, 0, 0, .8) !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-pile-box > .modern-vip-pile-label::before { content: "|" !important; margin-right: 8px !important; color: #E9C76F !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-pile-box > small { display: none !important; } /* MODERN_VIP_C_V2_COUNTER_END */ /* MODERN_VIP_C_V2_SINGLE_STACK_RENDER_FIX_START In the single-stack path the visible counter is generated inside .nok-draw-stack as .modern-stock-count. The shared Modern lock below the theme block used to shrink that node to 56x33px, while the styled #boardPileCount node stayed hidden. Keep #boardPileCount as the authoritative value source, but give the generated VIP presentation its approved 180x22px footprint. The counter starts below the established 77px pile host plus a 5px clearance, so it cannot overlap the indicator or center-discard hosts at y=0..77. */ @media (min-width: 901px) { #matchPanel.normal-okey.table-theme-modern-vip[data-stock-presentation="modern"] .nok-center:has(.nok-draw-stack[data-stock-mode="single-stack"]) { height: 110px !important; } #matchPanel.normal-okey.table-theme-modern-vip[data-stock-presentation="modern"] .nok-pile-box[data-modern-single-stack="true"] { display: block !important; width: 272px !important; min-width: 272px !important; max-width: 272px !important; height: 110px !important; min-height: 110px !important; max-height: 110px !important; overflow: visible !important; } #matchPanel.normal-okey.table-theme-modern-vip[data-stock-presentation="modern"] .nok-pile-box[data-modern-single-stack="true"] > #boardPileCount, #matchPanel.normal-okey.table-theme-modern-vip[data-stock-presentation="modern"] .nok-pile-box[data-modern-single-stack="true"] > .modern-vip-pile-label { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } #matchPanel.normal-okey.table-theme-modern-vip[data-stock-presentation="modern"] .nok-pile-box[data-modern-single-stack="true"] > .nok-draw-stack.modern-stock-indicator-count-group { position: absolute !important; left: calc((72px - 43px) / 2) !important; top: 0 !important; width: 43px !important; min-width: 43px !important; height: 58px !important; min-height: 58px !important; margin: 0 !important; overflow: visible !important; } #matchPanel.normal-okey.table-theme-modern-vip[data-stock-presentation="modern"] .nok-pile-box[data-modern-single-stack="true"] > .nok-draw-stack.modern-stock-indicator-count-group > .modern-stock-count { position: absolute !important; left: calc((272px - 180px) / 2 - ((72px - 43px) / 2)) !important; top: calc(77px + 5px) !important; z-index: 5 !important; display: flex !important; flex: 0 0 180px !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; width: 180px !important; min-width: 180px !important; max-width: 180px !important; height: 22px !important; min-height: 22px !important; max-height: 22px !important; margin: 0 !important; padding: 0 12px !important; border: 1px solid transparent !important; border-radius: 5px !important; background: linear-gradient(180deg, #25282a 0%, #111416 48%, #080a0c 100%) padding-box, linear-gradient(180deg, #f8d982 0%, #b77b1c 42%, #efbe54 72%, #9b6415 100%) border-box !important; color: #E9C76F !important; font-family: "Rajdhani", "Arial Narrow", "Segoe UI", Arial, sans-serif !important; font-size: 16px !important; font-variant-numeric: tabular-nums !important; font-weight: 800 !important; letter-spacing: .015em !important; line-height: 20px !important; text-align: center !important; text-shadow: 0 1px 1px rgba(0, 0, 0, .86) !important; white-space: nowrap !important; overflow: hidden !important; box-shadow: inset 0 1px 0 rgba(255, 244, 191, .2), inset 0 -1px 0 rgba(0, 0, 0, .75), 0 2px 5px rgba(0, 0, 0, .48) !important; } #matchPanel.normal-okey.table-theme-modern-vip[data-stock-presentation="modern"] .modern-stock-counter-image { display: none !important; } #matchPanel.normal-okey.table-theme-modern-vip[data-stock-presentation="modern"] .modern-stock-counter-number, #matchPanel.normal-okey.table-theme-modern-vip[data-stock-presentation="modern"] .modern-stock-counter-divider, #matchPanel.normal-okey.table-theme-modern-vip[data-stock-presentation="modern"] .modern-stock-counter-label { position: static !important; top: auto !important; left: auto !important; display: inline-block !important; transform: none !important; margin: 0 !important; pointer-events: none !important; white-space: nowrap !important; } #matchPanel.normal-okey.table-theme-modern-vip[data-stock-presentation="modern"] .modern-stock-counter-number { z-index: auto !important; color: #E9C76F !important; font-family: "Arial Black", Arial, Helvetica, sans-serif !important; font-size: 16px !important; font-weight: 900 !important; line-height: 20px !important; letter-spacing: .015em !important; } #matchPanel.normal-okey.table-theme-modern-vip[data-stock-presentation="modern"] .modern-stock-counter-divider { margin: 0 12px !important; color: #E9C76F !important; font-size: 16px !important; font-weight: 400 !important; line-height: 20px !important; } #matchPanel.normal-okey.table-theme-modern-vip[data-stock-presentation="modern"] .modern-stock-counter-label { color: #E9C76F !important; font-family: "Rajdhani", "Arial Narrow", "Segoe UI", Arial, sans-serif !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .025em !important; line-height: 20px !important; text-shadow: 0 1px 1px rgba(0, 0, 0, .8) !important; } } /* MODERN_VIP_C_V2_SINGLE_STACK_RENDER_FIX_END */ /* MODERN_VIP_GOLD_MIC_START Keep the real speech-to-text control as the single visible microphone surface. The adjacent smiley control remains a separate hitbox. */ #matchPanel.normal-okey.table-theme-modern-vip #chatForm #chatVoiceButton { display: inline-grid !important; place-items: center !important; flex: 0 0 34px !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; border: 1px solid #d7a548 !important; border-radius: 50% !important; background: #05070a !important; background-image: none !important; color: #f3c86a !important; box-shadow: none !important; pointer-events: auto !important; } #matchPanel.normal-okey.table-theme-modern-vip #chatForm #chatVoiceButton:focus-visible { outline: 2px solid #f3c86a !important; outline-offset: 2px !important; box-shadow: none !important; } #matchPanel.normal-okey.table-theme-modern-vip #chatForm #chatVoiceButton.is-listening, #matchPanel.normal-okey.table-theme-modern-vip #chatForm #chatVoiceButton[data-voice-state="listening"], #matchPanel.normal-okey.table-theme-modern-vip #chatForm #chatVoiceButton.is-processing, #matchPanel.normal-okey.table-theme-modern-vip #chatForm #chatVoiceButton[data-voice-state="processing"] { border-color: #ffe49a !important; color: #ffe49a !important; background: rgba(31, 24, 10, .94) !important; outline: none !important; box-shadow: none !important; } #matchPanel.normal-okey.table-theme-modern-vip #chatForm > .smiley-picker { flex: 0 0 auto !important; margin: 0 !important; position: relative !important; } #matchPanel.normal-okey.table-theme-modern-vip #chatForm > #chatVoiceButton .speech-to-text-icon, #matchPanel.normal-okey.table-theme-modern-vip #chatForm > #chatVoiceButton .speech-to-text-icon path { display: block !important; width: 18px !important; height: 18px !important; color: currentColor !important; fill: currentColor !important; opacity: 1 !important; pointer-events: none !important; } #matchPanel.normal-okey.table-theme-modern-vip #chatForm > .chat-input-shell { position: relative !important; display: block !important; flex: 1 1 auto !important; min-width: 0 !important; height: 34px !important; min-height: 34px !important; box-sizing: border-box !important; } #matchPanel.normal-okey.table-theme-modern-vip #chatForm > .chat-input-shell > input[name="message"] { width: 100% !important; height: 34px !important; min-height: 34px !important; padding-right: 36px !important; box-sizing: border-box !important; } /* The approved raster contains the fixed empty-field label. Keep the native DOM placeholder silent, and paint only a filled input's own box so typed text never sits on top of the raster label. */ #matchPanel.normal-okey.table-theme-modern-vip #chatForm > .chat-input-shell > input[name="message"]::placeholder { color: transparent !important; opacity: 0 !important; -webkit-text-fill-color: transparent !important; } #matchPanel.normal-okey.table-theme-modern-vip #chatForm > .chat-input-shell > input[name="message"]:not(:placeholder-shown) { background: #05070a !important; background-image: none !important; } #matchPanel.normal-okey.table-theme-modern-vip #chatForm > .chat-input-shell > .speech-waveform { position: absolute !important; top: 50% !important; right: 9px !important; z-index: 2 !important; display: none !important; align-items: flex-end !important; justify-content: center !important; gap: 2px !important; width: 20px !important; height: 14px !important; transform: translateY(-50%) !important; color: #f3c86a !important; pointer-events: none !important; } #matchPanel.normal-okey.table-theme-modern-vip #chatForm > .chat-input-shell > .speech-waveform.is-active { display: inline-flex !important; } #matchPanel.normal-okey.table-theme-modern-vip #chatForm > .chat-input-shell > .speech-waveform > i { display: block !important; width: 2px !important; height: 5px !important; border: 0 !important; border-radius: 1px !important; background: #f3c86a !important; animation: modern-vip-chat-wave 680ms ease-in-out infinite alternate !important; } #matchPanel.normal-okey.table-theme-modern-vip #chatForm > .chat-input-shell > .speech-waveform > i:nth-child(2), #matchPanel.normal-okey.table-theme-modern-vip #chatForm > .chat-input-shell > .speech-waveform > i:nth-child(4) { height: 9px !important; animation-delay: 120ms !important; } #matchPanel.normal-okey.table-theme-modern-vip #chatForm > .chat-input-shell > .speech-waveform > i:nth-child(3) { height: 12px !important; animation-delay: 240ms !important; } @keyframes modern-vip-chat-wave { from { transform: scaleY(.42); opacity: .55; } to { transform: scaleY(1); opacity: 1; } } @media (prefers-reduced-motion: reduce) { #matchPanel.normal-okey.table-theme-modern-vip #chatForm > .chat-input-shell > .speech-waveform > i { animation: none !important; opacity: .84 !important; } } /* MODERN_VIP_GOLD_MIC_END */ /* MODERN_VIP_CHAT_SPECTATOR_INPUT_FIX_START The shared Modern chat-panel rule gives the chat tab panel display:flex; its specificity can otherwise defeat the .hidden utility. Keep the existing tab state authoritative, but make the inactive panel genuinely non-rendering and non-interactive in Modern VIP. */ #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel.hidden, #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableSpectatorsPanel.hidden { display: none !important; visibility: hidden !important; pointer-events: none !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) { display: flex !important; visibility: visible !important; pointer-events: auto !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) #chatForm { display: grid !important; grid-template-columns: minmax(0, 1fr) 34px 34px 56px !important; align-items: center !important; gap: 4px !important; width: 329px !important; height: 52px !important; min-height: 52px !important; margin: 0 !important; box-sizing: border-box !important; } #matchPanel.normal-okey.table-theme-modern-vip #chatForm > .chat-input-shell { grid-column: 1 !important; align-self: center !important; width: auto !important; height: 34px !important; min-height: 34px !important; min-width: 0 !important; } #matchPanel.normal-okey.table-theme-modern-vip #chatForm > .smiley-picker { grid-column: 2 !important; align-self: center !important; justify-self: center !important; display: grid !important; place-items: center !important; width: 34px !important; min-width: 34px !important; height: 34px !important; margin: 0 !important; } #matchPanel.normal-okey.table-theme-modern-vip #chatForm > .smiley-picker > #smileyToggle { width: 34px !important; min-width: 34px !important; height: 34px !important; min-height: 34px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } #matchPanel.normal-okey.table-theme-modern-vip #chatForm > #chatVoiceButton { grid-column: 3 !important; align-self: center !important; justify-self: center !important; } #matchPanel.normal-okey.table-theme-modern-vip #chatForm > button[type="submit"] { grid-column: 4 !important; align-self: center !important; justify-self: stretch !important; } #matchPanel.normal-okey.table-theme-modern-vip #chatForm > .chat-input-shell > input[name="message"]:focus, #matchPanel.normal-okey.table-theme-modern-vip #chatForm > .chat-input-shell > input[name="message"]:focus-visible { outline: none !important; border-color: #d7a548 !important; box-shadow: 0 0 0 2px rgba(215, 165, 72, .34), inset 0 0 0 1px rgba(255, 228, 154, .16) !important; } #matchPanel.normal-okey.table-theme-modern-vip #tableSpectatorsChatNotice { display: block !important; margin: 12px 0 0 !important; padding: 8px 10px !important; border: 1px solid rgba(215, 165, 72, .48) !important; border-radius: 4px !important; background: rgba(5, 7, 10, .78) !important; color: #f6cf7b !important; font-size: 11px !important; line-height: 16px !important; text-align: center !important; } #matchPanel.normal-okey.table-theme-modern-vip #tableSpectatorsChatNotice[hidden] { display: none !important; } /* MODERN_VIP_CHAT_SPECTATOR_INPUT_FIX_END */ /* MODERN_VIP_ASSIST_PANEL_START Live Chrome measurement at 1280x899 mapped the visible rack to approximately x=217..947, y=637..805 in the 1498x1050 reference plane. The first live action button begins at approximately y=888 in that same plane. Reserve y=818..870 for Smart Assist: 52 reference px ~= 44.4 screen px, leaving an 18 reference px gap before the action dock. Absolute positioning keeps the panel from pushing the rack or the twelve action buttons. */ #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation .normal-okey-main.nok-table-area > #okeySmartAssistPanel:not(:has(#okeySmartAssistMessage:empty)) { position: absolute !important; left: 217px !important; top: 818px !important; width: 730px !important; height: 52px !important; min-height: 52px !important; max-height: 52px !important; box-sizing: border-box !important; display: grid !important; grid-template-columns: max-content minmax(0, 1fr) !important; align-items: center !important; gap: 8px !important; margin: 0 !important; padding: 6px 10px !important; border: 1px solid #d28b2e !important; border-radius: 6px !important; color: #fff1c7 !important; background: linear-gradient(180deg, #15171a, #07090b 72%, #030405) !important; box-shadow: inset 0 1px rgba(255, 230, 166, .14), 0 5px 12px rgba(0, 0, 0, .6) !important; overflow: hidden !important; pointer-events: auto !important; z-index: 45 !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation .normal-okey-main.nok-table-area > #okeySmartAssistPanel:not(:has(#okeySmartAssistMessage:empty)) > .okey-smart-assist-panel-label { display: inline-flex !important; align-items: center !important; min-width: 0 !important; padding: 3px 7px !important; border: 1px solid rgba(242, 197, 111, .62) !important; border-radius: 4px !important; color: transparent !important; font-size: 0 !important; line-height: 1 !important; white-space: nowrap !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation .normal-okey-main.nok-table-area > #okeySmartAssistPanel:not(:has(#okeySmartAssistMessage:empty)) > .okey-smart-assist-panel-label::after { content: "ASİSTAN" !important; color: #f6cf7b !important; font-size: 9px !important; font-weight: 900 !important; letter-spacing: .08em !important; line-height: 1.2 !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation .normal-okey-main.nok-table-area > #okeySmartAssistPanel:not(:has(#okeySmartAssistMessage:empty)) > #okeySmartAssistMessage { min-width: 0 !important; max-height: 38px !important; margin: 0 !important; color: #fff2d1 !important; font-size: 11px !important; font-weight: 650 !important; line-height: 1.2 !important; white-space: normal !important; overflow: auto !important; overflow-wrap: anywhere !important; word-break: normal !important; } /* MODERN_VIP_ASSIST_PANEL_END */ /* MODERN_VIP_ASSIST_TOGGLE_START The existing Smart Assist panel remains the single source of help content. VIP keeps a compact shell visible even when its message is empty; the existing message node is expanded in place through the one native button. */ #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation .normal-okey-main.nok-table-area > #okeySmartAssistPanel { position: absolute !important; left: 217px !important; top: 818px !important; width: 730px !important; height: 52px !important; min-height: 52px !important; max-height: 52px !important; box-sizing: border-box !important; display: grid !important; grid-template-columns: max-content minmax(0, 1fr) max-content !important; align-items: center !important; gap: 8px !important; margin: 0 !important; padding: 6px 10px !important; border: 1px solid #d28b2e !important; border-radius: 6px !important; color: #fff1c7 !important; background: linear-gradient(180deg, #15171a, #07090b 72%, #030405) !important; box-shadow: inset 0 1px rgba(255, 230, 166, .14), 0 5px 12px rgba(0, 0, 0, .6) !important; overflow: hidden !important; pointer-events: auto !important; z-index: 45 !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation .normal-okey-main.nok-table-area > #okeySmartAssistPanel > .okey-smart-assist-panel-label { display: inline-flex !important; align-items: center !important; min-width: 0 !important; padding: 3px 7px !important; border: 1px solid rgba(242, 197, 111, .62) !important; border-radius: 4px !important; color: transparent !important; font-size: 0 !important; line-height: 1 !important; white-space: nowrap !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation .normal-okey-main.nok-table-area > #okeySmartAssistPanel > .okey-smart-assist-panel-label::after { content: "ASİSTAN" !important; color: #f6cf7b !important; font-size: 9px !important; font-weight: 900 !important; letter-spacing: .08em !important; line-height: 1.2 !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation .normal-okey-main.nok-table-area > #okeySmartAssistPanel > #okeySmartAssistMessage { min-width: 0 !important; max-height: 38px !important; margin: 0 !important; color: #fff2d1 !important; font-size: 11px !important; font-weight: 650 !important; line-height: 1.2 !important; white-space: normal !important; overflow: auto !important; overflow-wrap: anywhere !important; word-break: normal !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation .normal-okey-main.nok-table-area > #okeySmartAssistPanel > #okeySmartAssistToggle[hidden] { display: none !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation .normal-okey-main.nok-table-area > #okeySmartAssistPanel > #okeySmartAssistToggle:not([hidden]) { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 54px !important; min-width: 54px !important; height: 26px !important; min-height: 26px !important; margin: 0 !important; padding: 0 7px !important; border: 1px solid #d28b2e !important; border-radius: 4px !important; color: #f6cf7b !important; background: #0a0b0d !important; box-shadow: inset 0 1px rgba(255, 230, 166, .12), 0 2px 5px rgba(0, 0, 0, .5) !important; cursor: pointer !important; font-size: 0 !important; font-weight: 900 !important; line-height: 1 !important; white-space: nowrap !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation .normal-okey-main.nok-table-area > #okeySmartAssistPanel > #okeySmartAssistToggle:not([hidden])::after { content: "AÇ" !important; font-size: 9px !important; letter-spacing: .06em !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation .normal-okey-main.nok-table-area > #okeySmartAssistPanel > #okeySmartAssistToggle[aria-expanded="true"]::after { content: "DARALT" !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation .normal-okey-main.nok-table-area > #okeySmartAssistPanel > #okeySmartAssistToggle:not([hidden]):focus-visible { outline: 2px solid #ffe7a0 !important; outline-offset: 2px !important; } /* MODERN_VIP_ASSIST_TOGGLE_END */ /* MODERN_VIP_ASSIST_FIXED_MARQUEE_START Modern VIP keeps the measured compact shell permanently fixed. The existing message text is mirrored only into a CSS-generated visual track; the real status paragraph remains the accessible source of truth. */ #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation .normal-okey-main.nok-table-area > #okeySmartAssistPanel, #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation .normal-okey-main.nok-table-area > #okeySmartAssistPanel:has(#okeySmartAssistToggle[aria-expanded="true"]) { display: grid !important; left: 217px !important; top: 818px !important; width: 730px !important; height: 52px !important; min-height: 52px !important; max-height: 52px !important; grid-template-columns: 150px minmax(0, 1fr) 64px !important; grid-template-rows: 1fr !important; align-items: center !important; column-gap: 8px !important; padding: 0 10px !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation .normal-okey-main.nok-table-area > #okeySmartAssistPanel > #okeySmartAssistToggle { position: relative !important; grid-column: 3 !important; grid-row: 1 !important; justify-self: end !important; right: auto !important; top: auto !important; z-index: 3 !important; transform: none !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation .normal-okey-main.nok-table-area > #okeySmartAssistPanel > #okeySmartAssistToggle[hidden] { display: none !important; visibility: hidden !important; pointer-events: none !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation .normal-okey-main.nok-table-area > #okeySmartAssistPanel > #okeySmartAssistToggle:not([hidden]) { display: inline-flex !important; visibility: visible !important; pointer-events: auto !important; width: 54px !important; min-width: 54px !important; height: 26px !important; min-height: 26px !important; margin: 0 !important; padding: 0 7px !important; border: 1px solid #d28b2e !important; border-radius: 4px !important; color: #f6cf7b !important; background: #0a0b0d !important; box-shadow: inset 0 1px rgba(255, 230, 166, .12), 0 2px 5px rgba(0, 0, 0, .5) !important; cursor: pointer !important; font-size: 0 !important; font-weight: 900 !important; line-height: 1 !important; white-space: nowrap !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation .normal-okey-main.nok-table-area > #okeySmartAssistPanel > #okeySmartAssistToggle:not([hidden])::after { content: "A\00C7" !important; font-size: 9px !important; letter-spacing: .06em !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation .normal-okey-main.nok-table-area > #okeySmartAssistPanel > #okeySmartAssistToggle[aria-expanded="true"]::after { content: "KAPAT" !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation .normal-okey-main.nok-table-area > #okeySmartAssistPanel > #okeySmartAssistToggle:not([hidden]):focus-visible { outline: 2px solid #ffe7a0 !important; outline-offset: 2px !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation .normal-okey-main.nok-table-area > #okeySmartAssistPanel > #okeySmartAssistMessage { position: relative !important; grid-column: 2 !important; grid-row: 1 !important; justify-self: stretch !important; left: auto !important; right: auto !important; top: auto !important; z-index: 1 !important; transform: none !important; min-width: 0 !important; width: 100% !important; max-width: none !important; height: 24px !important; max-height: 24px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; overflow: hidden !important; color: transparent !important; text-overflow: clip !important; white-space: nowrap !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation .normal-okey-main.nok-table-area > #okeySmartAssistPanel > #okeySmartAssistMessage::before { content: attr(data-modern-vip-marquee-text) !important; position: absolute !important; top: 50% !important; left: 0 !important; display: inline-block !important; width: max-content !important; max-width: none !important; color: #f6cf7b !important; font-size: clamp(14px, 1.2vw, 20px) !important; font-weight: 900 !important; line-height: 1.1 !important; letter-spacing: .01em !important; white-space: nowrap !important; text-shadow: 0 1px 0 #08090b, 0 0 7px rgba(246, 207, 123, .18) !important; transform: translate(710px, -50%) !important; will-change: transform !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation .normal-okey-main.nok-table-area > #okeySmartAssistPanel > .okey-smart-assist-panel-label { position: relative !important; grid-column: 1 !important; grid-row: 1 !important; justify-self: stretch !important; left: auto !important; top: auto !important; z-index: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 0 !important; padding: 3px 12px !important; border: 1px solid rgba(242, 197, 111, .72) !important; border-radius: 4px !important; color: transparent !important; background: linear-gradient(180deg, #15171a, #07090b) !important; font-size: 0 !important; line-height: 1 !important; white-space: nowrap !important; transform: none !important; pointer-events: none !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation .normal-okey-main.nok-table-area > #okeySmartAssistPanel > .okey-smart-assist-panel-label::after { content: "AS\0130STAN" !important; color: #f6cf7b !important; font-size: 10px !important; font-weight: 900 !important; letter-spacing: .08em !important; line-height: 1.2 !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation .normal-okey-main.nok-table-area > #okeySmartAssistPanel:not(:has(#okeySmartAssistToggle[aria-expanded="true"])) > #okeySmartAssistMessage { visibility: hidden !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation .normal-okey-main.nok-table-area > #okeySmartAssistPanel:not(:has(#okeySmartAssistToggle[aria-expanded="true"])) > #okeySmartAssistMessage::before { content: none !important; animation: none !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation .normal-okey-main.nok-table-area > #okeySmartAssistPanel > #okeySmartAssistMessage.modern-vip-assist-marquee-run::before { animation: modern-vip-assist-marquee 15s linear infinite !important; } @keyframes modern-vip-assist-marquee { from { transform: translate(710px, -50%); } to { transform: translate(calc(-100% - 710px), -50%); } } @media (prefers-reduced-motion: reduce) { #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation .normal-okey-main.nok-table-area > #okeySmartAssistPanel > #okeySmartAssistMessage { height: 24px !important; min-height: 24px !important; max-height: 24px !important; overflow: hidden !important; color: transparent !important; white-space: nowrap !important; padding: 0 !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation .normal-okey-main.nok-table-area > #okeySmartAssistPanel > #okeySmartAssistMessage::before { display: inline-block !important; content: attr(data-modern-vip-marquee-text) !important; animation: modern-vip-assist-marquee 22s linear infinite !important; } } /* MODERN_VIP_ASSIST_FIXED_MARQUEE_END */ /* MODERN_VIP_RASTER_STATUS_RADIO_TEXT_DEDUP_START The approved raster already contains the preview waiting/status strip and the fixed radio labels. Keep live match/spectator status and live radio track data mounted, but remove only the duplicate preview/static faces. */ #matchPanel.normal-okey.table-theme-modern-vip.table-preview:not(.spectator-table) .nok-game-status-panel { visibility: hidden !important; pointer-events: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-radio-header > strong, #matchPanel.normal-okey.table-theme-modern-vip .nok-radio-header > .nok-radio-collapse, #matchPanel.normal-okey.table-theme-modern-vip .nok-radio-track > small { visibility: hidden !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-radio-request-button { color: transparent !important; font-size: 0 !important; text-shadow: none !important; pointer-events: auto !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-radio-track-title, #matchPanel.normal-okey.table-theme-modern-vip .nok-radio-track-artist { visibility: visible !important; } /* MODERN_VIP_RASTER_STATUS_RADIO_TEXT_DEDUP_END */ /* MODERN_VIP_RADIO_POWER_HITBOX_FIX_START .nok-radio-header is the existing accessible control wired in app.js. The old VIP placement put its 24px hitbox at the left edge of the artwork. Keep the radio panel as its containing block, but place the live control in the header row, to the right of the raster title and before the raster close glyph. The disk, volume slider and request control remain untouched. */ #matchPanel.normal-okey.table-theme-modern-vip .nok-radio-panel { position: relative !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-radio-header { position: absolute !important; left: 120px !important; top: 6px !important; right: auto !important; bottom: auto !important; z-index: 6 !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; width: 96px !important; min-width: 96px !important; height: 22px !important; min-height: 22px !important; margin: 0 !important; padding: 2px 7px !important; border: 1px solid #9c7636 !important; border-radius: 5px !important; color: transparent !important; background: rgba(7, 16, 23, .88) !important; box-shadow: 0 0 7px rgba(210, 139, 46, .22) !important; pointer-events: auto !important; cursor: pointer !important; transform: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-radio-header::after { content: "AÇ/KAPAT" !important; display: block !important; color: #ffe29a !important; font: 700 9px/1.1 Arial, sans-serif !important; letter-spacing: .04em !important; white-space: nowrap !important; pointer-events: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-radio-header::after { content: "A\00C7/KAPAT" !important; display: block !important; color: #ffe29a !important; font: 700 9px/1.1 Arial, sans-serif !important; letter-spacing: .04em !important; white-space: nowrap !important; pointer-events: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-radio-header:focus-visible { outline: 2px solid #28b9f4 !important; outline-offset: 2px !important; } /* MODERN_VIP_RADIO_POWER_HITBOX_FIX_END */ /* MODERN_VIP_WAITING_MESSAGE_LAYOUT_START The raster surface already owns the fixed status-strip artwork. In the real, non-spectator waiting preview, replace that strip's duplicate text with the live two-line status card. The 1498x1050 presentation is the containing block: the VIP table stage is x=17..1104, so its center is x=560.5. The source baseline was x=340.5/y=88 for this 440px card; this pass intentionally applies the requested horizontal +38px offset, producing x=378.5/y=126 and center x=598.5. */ #matchPanel.normal-okey.table-theme-modern-vip.table-preview:not(.spectator-table)[data-modern-vip-waiting="true"] > .nok-presentation > .nok-statusbar { display: block !important; position: absolute !important; left: 0 !important; top: 0 !important; right: auto !important; bottom: auto !important; width: 1498px !important; height: 1050px !important; min-height: 0 !important; box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } #matchPanel.normal-okey.table-theme-modern-vip.table-preview:not(.spectator-table)[data-modern-vip-waiting="true"] .nok-game-status-panel { display: grid !important; visibility: visible !important; position: absolute !important; left: 598.5px !important; top: 126px !important; right: auto !important; bottom: auto !important; width: 440px !important; height: 54px !important; min-height: 54px !important; box-sizing: border-box !important; margin: 0 !important; transform: translateX(-50%) !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: repeat(2, minmax(0, 1fr)) !important; align-items: center !important; justify-items: center !important; gap: 0 !important; padding: 4px 14px !important; border: 1px solid rgba(239, 190, 91, .9) !important; border-radius: 7px !important; background: linear-gradient(180deg, rgba(16, 18, 20, .97), rgba(3, 6, 8, .97)) !important; box-shadow: inset 0 1px rgba(255, 235, 174, .16), 0 5px 14px rgba(0, 0, 0, .48) !important; backdrop-filter: none !important; pointer-events: none !important; overflow: hidden !important; z-index: 30 !important; text-align: center !important; } #matchPanel.normal-okey.table-theme-modern-vip.table-preview:not(.spectator-table)[data-modern-vip-waiting="true"] .nok-game-status-panel > #turnText, #matchPanel.normal-okey.table-theme-modern-vip.table-preview:not(.spectator-table)[data-modern-vip-waiting="true"] .nok-game-status-panel > #phaseText { grid-column: 1 !important; display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; min-height: 0 !important; height: auto !important; margin: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; text-align: center !important; } #matchPanel.normal-okey.table-theme-modern-vip.table-preview:not(.spectator-table)[data-modern-vip-waiting="true"] .nok-game-status-panel > #turnText { grid-row: 1 !important; color: #f6cf7b !important; font-size: 13px !important; font-weight: 900 !important; line-height: 18px !important; } #matchPanel.normal-okey.table-theme-modern-vip.table-preview:not(.spectator-table)[data-modern-vip-waiting="true"] .nok-game-status-panel > #phaseText { grid-row: 2 !important; color: #fff8e7 !important; font-size: 12px !important; font-weight: 700 !important; line-height: 17px !important; } #matchPanel.normal-okey.table-theme-modern-vip.table-preview:not(.spectator-table)[data-modern-vip-waiting="true"] .nok-game-status-panel > #turnTimer { display: none !important; visibility: hidden !important; pointer-events: none !important; } /* The bottom ASİSTAN panel is the only VIP help control. The legacy select controls remain in the DOM for shared state/lifecycle code but do not retain a visual or hit-test surface in this theme. */ #matchPanel.normal-okey.table-theme-modern-vip .nok-statusbar > .nok-settings-panel { display: none !important; visibility: hidden !important; pointer-events: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-statusbar > .nok-settings-panel > .tile-surface-picker, #matchPanel.normal-okey.table-theme-modern-vip .nok-statusbar > .nok-settings-panel > .rack-skin-picker, #matchPanel.normal-okey.table-theme-modern-vip .nok-statusbar > .nok-settings-panel > .okey-smart-assist-control, #matchPanel.normal-okey.table-theme-modern-vip .nok-statusbar > .nok-settings-panel > .stock-display-picker { display: none !important; visibility: hidden !important; pointer-events: none !important; } /* MODERN_VIP_WAITING_MESSAGE_LAYOUT_END */ /* MODERN_VIP_SPECTATORS_PANEL_LAYOUT_START The approved raster owns the fixed tab labels and subtitle. Keep the subtitle in the accessible DOM, but do not paint it a second time. The live roster gets its own slot below the tabs so headings and rows never share the tab/header coordinate space. */ #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableSpectatorsPanel:not(.hidden) { position: absolute !important; top: 84px !important; right: auto !important; bottom: 8px !important; left: 8px !important; display: flex !important; flex: none !important; flex-direction: column !important; align-items: stretch !important; width: 329px !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; max-width: 329px !important; max-height: none !important; box-sizing: border-box !important; margin: 0 !important; padding: 8px 10px 10px !important; overflow-x: hidden !important; overflow-y: auto !important; background: transparent !important; border: 0 !important; box-shadow: none !important; z-index: 1 !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableSpectatorsPanel:not(.hidden) .table-roster-section { display: block !important; flex: 0 0 auto !important; min-width: 0 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableSpectatorsPanel:not(.hidden) .table-roster-section + .table-roster-section { margin-top: 14px !important; padding-top: 10px !important; border-top: 1px solid rgba(239, 190, 91, .26) !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableSpectatorsPanel:not(.hidden) .table-roster-heading { display: block !important; width: 100% !important; min-width: 0 !important; min-height: 18px !important; margin: 0 0 8px !important; padding: 0 !important; overflow: hidden !important; color: #f6cf7b !important; font-size: 11px !important; font-weight: 900 !important; line-height: 18px !important; letter-spacing: .04em !important; white-space: nowrap !important; text-overflow: ellipsis !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableSpectatorsPanel:not(.hidden) .table-spectators-list { display: grid !important; flex: 0 0 auto !important; grid-auto-rows: minmax(28px, auto) !important; gap: 7px !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableSpectatorsPanel:not(.hidden) .table-spectator-row { display: flex !important; align-items: center !important; width: 100% !important; min-width: 0 !important; min-height: 28px !important; box-sizing: border-box !important; margin: 0 !important; padding: 6px 8px !important; overflow: hidden !important; gap: 8px !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableSpectatorsPanel:not(.hidden) .table-spectator-row .table-spectator-presence { flex: 0 0 7px !important; width: 7px !important; height: 7px !important; min-width: 7px !important; min-height: 7px !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableSpectatorsPanel:not(.hidden) .table-spectator-row strong { display: block !important; flex: 1 1 auto !important; min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; color: #fff1c7 !important; font-size: 11px !important; line-height: 16px !important; white-space: nowrap !important; text-overflow: ellipsis !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableSpectatorsPanel:not(.hidden) .table-spectators-empty { display: block !important; width: 100% !important; min-width: 0 !important; margin: 0 0 4px !important; padding: 0 !important; overflow: hidden !important; color: #b9a77e !important; font-size: 11px !important; line-height: 18px !important; white-space: nowrap !important; text-overflow: ellipsis !important; } #matchPanel.normal-okey.table-theme-modern-vip .chat-heading #tableChatSubtitle { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } /* MODERN_VIP_SPECTATORS_PANEL_LAYOUT_END */ /* MODERN_VIP_RADIO_PLAYBACK_WAVE_START The existing .nok-radio-equalizer is the live DOM layer. It is hidden while the audio is stopped so the approved PNG remains the only visible static face. Once the authoritative HTMLAudioElement is actually playing, the local dark equalizer surface covers only the raster wave slot and the gold bars animate above it. */ #matchPanel.normal-okey.table-theme-modern-vip .nok-radio-body .nok-radio-equalizer { display: flex !important; flex: 0 0 30px !important; align-items: flex-end !important; justify-content: flex-end !important; gap: 3px !important; width: 30px !important; height: 28px !important; min-width: 30px !important; min-height: 28px !important; box-sizing: border-box !important; padding: 2px !important; overflow: hidden !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-radio-body[data-radio-playing="true"] .nok-radio-equalizer { visibility: visible !important; opacity: 1 !important; background: #05080b !important; background-image: none !important; border-radius: 4px !important; box-shadow: inset 0 0 0 1px rgba(214, 165, 72, .22) !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-radio-body .nok-radio-equalizer > i { display: block !important; flex: 0 0 3px !important; width: 3px !important; min-width: 3px !important; height: 9px !important; border: 0 !important; border-radius: 2px !important; background: linear-gradient(180deg, #fff3bd, #d7a548) !important; box-shadow: 0 0 5px rgba(243, 200, 106, .5) !important; transform-origin: center bottom !important; animation: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-radio-body[data-radio-playing="true"] .nok-radio-equalizer > i { animation: modern-vip-radio-playback-wave 720ms ease-in-out infinite alternate !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-radio-body[data-radio-playing="true"] .nok-radio-equalizer > i:nth-child(2), #matchPanel.normal-okey.table-theme-modern-vip .nok-radio-body[data-radio-playing="true"] .nok-radio-equalizer > i:nth-child(6) { height: 17px !important; animation-delay: 100ms !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-radio-body[data-radio-playing="true"] .nok-radio-equalizer > i:nth-child(3), #matchPanel.normal-okey.table-theme-modern-vip .nok-radio-body[data-radio-playing="true"] .nok-radio-equalizer > i:nth-child(7) { height: 12px !important; animation-delay: 210ms !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-radio-body[data-radio-playing="true"] .nok-radio-equalizer > i:nth-child(4) { height: 23px !important; animation-delay: 320ms !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-radio-body[data-radio-playing="true"] .nok-radio-equalizer > i:nth-child(5) { height: 15px !important; animation-delay: 160ms !important; } @keyframes modern-vip-radio-playback-wave { from { transform: scaleY(.35); opacity: .62; } to { transform: scaleY(1); opacity: 1; } } @media (prefers-reduced-motion: reduce) { #matchPanel.normal-okey.table-theme-modern-vip .nok-radio-body[data-radio-playing="true"] .nok-radio-equalizer > i { animation: none !important; opacity: .92 !important; } } /* MODERN_VIP_RADIO_PLAYBACK_WAVE_END */ /* MODERN_VIP_40_SMILEY_PICKER_START The catalog is added lazily only to the Modern VIP table picker. Keep every source image at 36x36 inside a 44x44 keyboard-focusable cell. */ #matchPanel.normal-okey.table-theme-modern-vip #smileyPanel { grid-template-columns: repeat(7, minmax(44px, 1fr)) !important; grid-auto-rows: 44px !important; gap: 6px !important; width: min(430px, calc(100vw - 70px)) !important; max-height: min(330px, calc(100vh - 90px)) !important; overflow-y: auto !important; } #matchPanel.normal-okey.table-theme-modern-vip #smileyPanel .okey-smiley-picker-button { width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; display: grid !important; place-items: center !important; box-sizing: border-box !important; padding: 3px !important; } #matchPanel.normal-okey.table-theme-modern-vip #smileyPanel .okey-smiley-picker-button > img { display: block !important; width: 36px !important; height: 36px !important; max-width: 36px !important; max-height: 36px !important; object-fit: contain !important; } #matchPanel.normal-okey.table-theme-modern-vip .chat-line .message-smiley { display: inline-block !important; width: 36px !important; height: 36px !important; max-width: 36px !important; max-height: 36px !important; margin: 1px 3px !important; object-fit: contain !important; vertical-align: middle !important; } #matchPanel.normal-okey.table-theme-modern-vip #smileyPanel .okey-smiley-picker-button:focus-visible { outline: 2px solid #f3c86a !important; outline-offset: 1px !important; } /* MODERN_VIP_40_SMILEY_PICKER_END */ /* MODERN_VIP_CHAT_SMILEY_MIC_FINAL_FIX_START The chat form already has the authoritative DOM order: message input -> smiley -> speech-to-text -> submit. This final, higher-specificity VIP block only resolves the visual cascade from the older transparent button rule; it does not add controls or listeners. */ #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm { display: grid !important; grid-template-columns: minmax(0, 1fr) 36px 36px 56px !important; align-items: center !important; column-gap: 4px !important; width: 329px !important; height: 52px !important; min-height: 52px !important; margin: 0 !important; box-sizing: border-box !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .chat-input-shell { grid-column: 1 !important; align-self: center !important; min-width: 0 !important; width: auto !important; height: 36px !important; min-height: 36px !important; margin: 0 !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .chat-input-shell > input[name="message"] { width: 100% !important; height: 36px !important; min-height: 36px !important; box-sizing: border-box !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker { grid-column: 2 !important; align-self: center !important; justify-self: center !important; display: grid !important; place-items: center !important; position: relative !important; width: 36px !important; min-width: 36px !important; height: 36px !important; min-height: 36px !important; margin: 0 !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyToggle { display: grid !important; place-items: center !important; width: 36px !important; min-width: 36px !important; height: 36px !important; min-height: 36px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; color: #f3c86a !important; background: #05070a !important; border: 1px solid #d7a548 !important; border-radius: 50% !important; box-shadow: 0 0 0 1px rgba(255, 228, 154, .12), inset 0 0 0 1px rgba(0, 0, 0, .55) !important; font-size: 18px !important; line-height: 1 !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translate(-3px, 2px) !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyToggle:focus-visible { outline: 2px solid #ffe49a !important; outline-offset: 2px !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > #chatVoiceButton { grid-column: 3 !important; align-self: center !important; justify-self: center !important; display: grid !important; place-items: center !important; width: 36px !important; min-width: 36px !important; height: 36px !important; min-height: 36px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; color: #f3c86a !important; background: #05070a !important; border: 1px solid #d7a548 !important; border-radius: 50% !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translate(-3px, 2px) !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > #chatVoiceButton .speech-to-text-icon, #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > #chatVoiceButton .speech-to-text-icon path { display: block !important; width: 18px !important; height: 18px !important; color: currentColor !important; fill: currentColor !important; opacity: 1 !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > button[type="submit"] { grid-column: 4 !important; align-self: center !important; justify-self: stretch !important; width: 56px !important; min-width: 56px !important; height: 34px !important; margin: 0 !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; left: auto !important; right: 0 !important; bottom: 42px !important; width: 322px !important; max-width: calc(100vw - 24px) !important; gap: 6px !important; padding: 8px !important; box-sizing: border-box !important; max-height: min(330px, calc(100vh - 90px)) !important; overflow-x: hidden !important; overflow-y: auto !important; z-index: 60 !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel .okey-smiley-category-tabs { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 4px !important; flex: 0 0 28px !important; min-height: 28px !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel .okey-smiley-category-tab { min-width: 0 !important; height: 28px !important; padding: 0 6px !important; border: 1px solid rgba(215, 165, 72, .62) !important; border-radius: 4px !important; background: rgba(5, 7, 10, .9) !important; color: #d8b56a !important; font-size: 10px !important; font-weight: 800 !important; line-height: 26px !important; white-space: nowrap !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel .okey-smiley-category-tab.active, #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel .okey-smiley-category-tab:focus-visible { border-color: #ffe49a !important; background: rgba(53, 37, 13, .96) !important; color: #ffe49a !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel .okey-smiley-category-panel { display: grid !important; grid-template-columns: repeat(6, 44px) !important; grid-auto-rows: 44px !important; gap: 6px !important; flex: 0 0 auto !important; min-height: 0 !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel .okey-smiley-category-panel[hidden] { display: none !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel.hidden, #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel[hidden] { display: none !important; visibility: hidden !important; pointer-events: none !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel:not(.hidden):not([hidden]) { display: flex !important; visibility: visible !important; pointer-events: auto !important; } @media (max-width: 420px) { #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel { width: min(286px, calc(100vw - 24px)) !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel .okey-smiley-category-panel { grid-template-columns: repeat(5, 44px) !important; } } /* MODERN_VIP_CHAT_SMILEY_MIC_FINAL_FIX_END */ /* MODERN_VIP_SMILEY_REFERENCE_PANEL_START Reference-led panel chrome only. The chat form remains outside this panel: message input, smiley toggle, microphone and submit keep their existing DOM and geometry. */ #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel { position: absolute !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; width: min(322px, calc(100vw - 24px)) !important; max-height: min(370px, calc(100vh - 90px)) !important; padding: 9px !important; gap: 6px !important; overflow: hidden !important; background: linear-gradient(155deg, #020304 0%, #0b0d10 52%, #010203 100%) !important; border: 2px solid #d7a548 !important; border-radius: 14px !important; box-shadow: 0 0 0 1px #ffe49a, 0 0 0 4px rgba(161, 99, 10, .58), inset 0 0 0 1px rgba(255, 236, 165, .82), 0 12px 28px rgba(0, 0, 0, .74) !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel::before { content: "" !important; position: absolute !important; inset: 5px !important; border: 1px solid rgba(255, 214, 103, .72) !important; border-radius: 9px !important; pointer-events: none !important; z-index: 0 !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel > * { position: relative !important; z-index: 1 !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel > .okey-smiley-panel-header { display: flex !important; flex: 0 0 54px !important; align-items: center !important; justify-content: center !important; min-height: 54px !important; position: relative !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel > .okey-smiley-panel-header > .okey-smiley-close { position: absolute !important; top: 0 !important; right: 0 !important; display: grid !important; place-items: center !important; width: 34px !important; min-width: 34px !important; height: 34px !important; min-height: 34px !important; padding: 0 !important; border: 1px solid #d7a548 !important; border-radius: 50% !important; background: linear-gradient(145deg, #12161b, #020304) !important; color: #fff7e5 !important; font-size: 27px !important; font-weight: 700 !important; line-height: 1 !important; cursor: pointer !important; box-shadow: inset 0 0 0 1px rgba(255, 228, 154, .24), 0 0 7px rgba(215, 165, 72, .44) !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel > .okey-smiley-panel-header > .okey-smiley-close:hover, #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel > .okey-smiley-panel-header > .okey-smiley-close:focus-visible { border-color: #ffe49a !important; color: #ffe49a !important; outline: 2px solid #ffe49a !important; outline-offset: 2px !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel > .okey-smiley-category-tabs { display: grid !important; flex: 0 0 48px !important; grid-template-columns: 1fr 1fr !important; gap: 6px !important; min-height: 48px !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel > .okey-smiley-category-tabs > .okey-smiley-category-tab { height: 48px !important; min-height: 48px !important; padding: 0 8px !important; border: 1px solid rgba(215, 165, 72, .88) !important; border-radius: 10px !important; background: linear-gradient(180deg, rgba(31, 35, 39, .98), rgba(2, 3, 4, .98)) !important; color: #fff0bf !important; font-size: 16px !important; font-weight: 900 !important; letter-spacing: .02em !important; line-height: 46px !important; white-space: nowrap !important; text-align: center !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel > .okey-smiley-category-tabs > .okey-smiley-category-tab.active, #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel > .okey-smiley-category-tabs > .okey-smiley-category-tab:focus-visible { border-color: #ffe49a !important; background: linear-gradient(180deg, #ffe77d 0%, #db8d12 100%) !important; color: #140d03 !important; outline: 2px solid #ffe49a !important; outline-offset: 1px !important; text-shadow: none !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel > .okey-smiley-category-panel:not([hidden]) { flex: 1 1 auto !important; max-height: 230px !important; min-height: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; padding: 4px 3px 4px 1px !important; scrollbar-color: #d7a548 #080a0d !important; scrollbar-width: thin !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel > .okey-smiley-category-panel:not([hidden])::-webkit-scrollbar { width: 9px !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel > .okey-smiley-category-panel:not([hidden])::-webkit-scrollbar-thumb { background: linear-gradient(#ffe49a, #b47614) !important; border-radius: 8px !important; } /* MODERN_VIP_SMILEY_REFERENCE_PANEL_END */ /* MODERN_VIP_SMILEY_REFERENCE_SURFACE_START The approved PNG is the only decorative panel surface. DOM elements below it are transparent hitboxes or live smiley content; they do not redraw the crown, frame, tabs or close icon. */ #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel { width: min(322px, calc(100vw - 24px)) !important; height: auto !important; aspect-ratio: 1293 / 1217 !important; max-height: calc(100vh - 70px) !important; padding: 0 !important; gap: 0 !important; overflow: hidden !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel::before { content: none !important; display: none !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel > .okey-smiley-reference-surface { 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; user-select: none !important; z-index: 0 !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel > .okey-smiley-panel-header { position: absolute !important; inset: 0 0 auto !important; height: 45px !important; min-height: 45px !important; display: block !important; pointer-events: none !important; z-index: 3 !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel > .okey-smiley-panel-header > .okey-smiley-close { position: absolute !important; top: 8px !important; right: 9px !important; display: block !important; width: 38px !important; min-width: 38px !important; height: 38px !important; min-height: 38px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: transparent !important; color: transparent !important; box-shadow: none !important; opacity: 0 !important; cursor: pointer !important; pointer-events: auto !important; z-index: 4 !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel > .okey-smiley-panel-header > .okey-smiley-close:focus-visible { opacity: 1 !important; outline: 2px solid #ffe49a !important; outline-offset: 2px !important; color: transparent !important; background: rgba(3, 5, 7, .24) !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel > .okey-smiley-category-tabs { position: absolute !important; top: 45px !important; right: 16px !important; left: 16px !important; height: 30px !important; min-height: 30px !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 6px !important; background: transparent !important; z-index: 3 !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel > .okey-smiley-category-tabs > .okey-smiley-category-tab, #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel > .okey-smiley-category-tabs > .okey-smiley-category-tab.active, #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel > .okey-smiley-category-tabs > .okey-smiley-category-tab:focus-visible { height: 30px !important; min-height: 30px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: transparent !important; font-size: 1px !important; line-height: 30px !important; text-shadow: none !important; outline: none !important; box-shadow: none !important; white-space: nowrap !important; overflow: hidden !important; z-index: 4 !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel > .okey-smiley-category-tabs > .okey-smiley-category-tab:focus-visible { outline: 2px solid #ffe49a !important; outline-offset: -2px !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel > .okey-smiley-category-panel:not([hidden]) { box-sizing: border-box !important; position: absolute !important; top: 80px !important; right: 14px !important; bottom: 11px !important; left: 14px !important; display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; grid-auto-rows: 44px !important; align-content: start !important; justify-content: stretch !important; gap: 4px !important; max-width: none !important; max-height: none !important; min-height: 0 !important; padding: 3px 8px 9px 3px !important; overflow-x: hidden !important; overflow-y: auto !important; scrollbar-gutter: stable !important; scroll-padding-block: 4px !important; background: #010305 !important; scrollbar-color: #d7a548 #010305 !important; scrollbar-width: thin !important; z-index: 2 !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel > .okey-smiley-category-panel[hidden] { display: none !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel > .okey-smiley-category-panel:not([hidden]) > button { width: 100% !important; min-width: 0 !important; max-width: none !important; box-sizing: border-box !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; display: grid !important; place-items: center !important; padding: 3px !important; border: 0 !important; border-radius: 50% !important; background: #010305 !important; color: transparent !important; filter: none !important; transform: none !important; overflow: hidden !important; box-shadow: none !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel > .okey-smiley-category-panel:not([hidden]) > button:hover, #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel > .okey-smiley-category-panel:not([hidden]) > button:focus-visible { outline: 2px solid #ffe49a !important; outline-offset: 1px !important; background: #080c11 !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel > .okey-smiley-category-panel:not([hidden]) > button > img, #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel > .okey-smiley-category-panel:not([hidden]) > button > .image-badge { display: block !important; width: 36px !important; height: 36px !important; max-width: 36px !important; max-height: 36px !important; object-fit: contain !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel > .okey-smiley-category-panel:not([hidden])::-webkit-scrollbar { width: 8px !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel > .okey-smiley-category-panel:not([hidden])::-webkit-scrollbar-thumb { background: #d7a548 !important; border-radius: 8px !important; } /* MODERN_VIP_SMILEY_REFERENCE_SURFACE_END */ /* MODERN_VIP_SMILEY_TAB_HITBOX_FIX_START The approved PNG owns the visible tab faces. Keep the image decorative and make the real tablist the top interactive layer at the PNG's reference coordinates. This is scoped to the real VIP chat DOM only. */ #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel { position: absolute !important; isolation: isolate !important; z-index: 60 !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel > .okey-smiley-reference-surface { pointer-events: none !important; z-index: 0 !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel > .okey-smiley-category-tabs { position: absolute !important; top: 15% !important; right: 5% !important; left: 5.2% !important; height: 9.4% !important; min-height: 0 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: .8% !important; pointer-events: auto !important; visibility: visible !important; z-index: 20 !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel > .okey-smiley-category-tabs > .okey-smiley-category-tab, #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel > .okey-smiley-category-tabs > .okey-smiley-category-tab.active, #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-chat-panel > #tableChatTabPanel:not(.hidden) > #chatForm > .smiley-picker > #smileyPanel > .okey-smiley-category-tabs > .okey-smiley-category-tab:focus-visible { position: relative !important; width: 100% !important; min-width: 0 !important; height: 100% !important; min-height: 0 !important; pointer-events: auto !important; cursor: pointer !important; touch-action: manipulation !important; z-index: 21 !important; } /* MODERN_VIP_SMILEY_TAB_HITBOX_FIX_END */ /* MODERN_VIP_DIRECT_REFERENCE_WINDOWS_START */ /* * These three surfaces are supplied by the approved PNG references. The * surrounding HTML remains the real, accessible control layer; the image is * decorative only and never receives pointer events. */ #normalOkeyBottomMenuPanel.modern-vip-reference-window, #privateRoomPanel.modern-vip-reference-window { position: relative !important; isolation: isolate !important; overflow: hidden !important; box-sizing: border-box !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window::before, #normalOkeyBottomMenuPanel.modern-vip-reference-window::after, #privateRoomPanel.modern-vip-reference-window::before, #privateRoomPanel.modern-vip-reference-window::after { content: none !important; display: none !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window > .modern-vip-reference-surface, #privateRoomPanel.modern-vip-reference-window > .modern-vip-reference-surface { position: absolute !important; inset: 0 !important; z-index: 0 !important; display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: fill !important; object-position: center !important; pointer-events: none !important; user-select: none !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window > *:not(.modern-vip-reference-surface), #privateRoomPanel.modern-vip-reference-window > *:not(.modern-vip-reference-surface) { position: relative !important; z-index: 1 !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="private-menu"] { width: min(760px, calc(100vw - 24px)) !important; height: auto !important; aspect-ratio: 1536 / 1024 !important; max-width: calc(100vw - 24px) !important; max-height: calc(100vh - 24px) !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="premium-window"], #privateRoomPanel.modern-vip-reference-window[data-reference-window="settings-window"] { width: min(521px, calc(100vw - 24px)) !important; height: auto !important; aspect-ratio: 1199 / 1312 !important; max-width: calc(100vw - 24px) !important; max-height: calc(100vh - 24px) !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window > .normal-okey-bottom-menu-panel-heading { position: absolute !important; inset: 0 !important; z-index: 3 !important; display: block !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; pointer-events: none !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window > .normal-okey-bottom-menu-panel-heading > h2 { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window > .normal-okey-bottom-menu-panel-heading > #normalOkeyBottomMenuClose { position: absolute !important; top: 4.5% !important; right: 4.5% !important; z-index: 4 !important; width: 9% !important; min-width: 0 !important; height: 9% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: transparent !important; color: transparent !important; box-shadow: none !important; opacity: 0 !important; pointer-events: auto !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window > .normal-okey-bottom-menu-panel-heading > #normalOkeyBottomMenuClose:focus-visible { opacity: 1 !important; color: #ffe49a !important; outline: 2px solid #ffe49a !important; outline-offset: 2px !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window > #normalOkeyBottomMenuContent { position: absolute !important; inset: 0 !important; z-index: 2 !important; display: block !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; overflow: visible !important; background: transparent !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="private-menu"] > #normalOkeyBottomMenuContent { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: repeat(2, minmax(0, 1fr)) !important; gap: 3% !important; padding: 39% 7% 25% !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="private-menu"] .normal-okey-bottom-menu-item { min-width: 0 !important; min-height: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: transparent !important; font-size: 0 !important; box-shadow: none !important; overflow: hidden !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="private-menu"] .normal-okey-bottom-menu-item > * { opacity: 0 !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="private-menu"] .normal-okey-bottom-menu-item:focus-visible { outline: 3px solid #ffe49a !important; outline-offset: -5px !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="premium-window"] .modern-vip-private-table-settings { position: absolute !important; inset: 0 !important; display: block !important; min-width: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="premium-window"] .modern-vip-private-table-settings-kicker, #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="premium-window"] .modern-vip-private-table-settings-note, #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="premium-window"] .modern-vip-private-table-settings > .message { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="premium-window"] .modern-vip-private-table-settings > label { position: absolute !important; top: 28% !important; left: 51% !important; width: 41% !important; height: 10% !important; margin: 0 !important; color: transparent !important; font-size: 0 !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="premium-window"] .modern-vip-private-table-settings > label > select { width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 8px !important; color: #ffe49a !important; font-size: clamp(10px, 1.1vw, 14px) !important; background: rgba(4, 6, 8, .88) !important; border: 1px solid #d7a548 !important; border-radius: 4px !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="premium-window"] .modern-vip-private-table-settings > button[type="submit"] { position: absolute !important; right: 9% !important; bottom: 7% !important; width: 38% !important; height: 9% !important; margin: 0 !important; padding: 0 !important; color: transparent !important; background: transparent !important; border: 0 !important; box-shadow: none !important; opacity: 0 !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="premium-window"] .modern-vip-private-table-settings > button[type="submit"]:focus-visible { opacity: 1 !important; outline: 3px solid #ffe49a !important; outline-offset: -4px !important; } /* MODERN_VIP_PREMIUM_SUPPORTED_CONTROLS_START */ /* * The approved Premium PNG already paints the labels, toggles and buttons. * These are real, transparent hitboxes only; the server remains authoritative * for visibility and the browser-local auto-open preference uses the existing * idempotent private-table/open endpoint. */ #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="premium-window"] .modern-vip-private-table-visibility-actions { position: absolute !important; top: 42% !important; left: 51% !important; width: 41% !important; height: 8% !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 2% !important; z-index: 3 !important; pointer-events: none !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="premium-window"] .modern-vip-premium-control-hitbox { min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 4px !important; background: transparent !important; color: transparent !important; box-shadow: none !important; opacity: 0 !important; pointer-events: auto !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="premium-window"] .modern-vip-premium-control-hitbox:focus-visible { opacity: 1 !important; color: #ffe49a !important; outline: 3px solid #ffe49a !important; outline-offset: -4px !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="premium-window"] .modern-vip-private-table-visibility-actions > .modern-vip-premium-control-hitbox { pointer-events: auto !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="premium-window"] .modern-vip-premium-auto-open-hitbox { position: absolute !important; top: 64% !important; left: 72% !important; width: 18% !important; height: 9% !important; z-index: 3 !important; } /* MODERN_VIP_PREMIUM_SUPPORTED_CONTROLS_END */ #privateRoomPanel.modern-vip-reference-window > .private-room-grid { position: absolute !important; inset: 0 !important; display: block !important; min-width: 0 !important; padding: 0 !important; background: transparent !important; } /* The settings reference has a visible X. Keep it a real, keyboard-accessible control without drawing a second close icon over the approved PNG. */ #privateRoomPanel.modern-vip-reference-window > #privateRoomCloseButton { position: absolute !important; top: 4.5% !important; right: 4.5% !important; z-index: 4 !important; width: 9% !important; min-width: 0 !important; height: 9% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: transparent !important; color: transparent !important; box-shadow: none !important; opacity: 0 !important; pointer-events: auto !important; } #privateRoomPanel.modern-vip-reference-window > #privateRoomCloseButton:focus-visible { opacity: 1 !important; color: #ffe49a !important; outline: 2px solid #ffe49a !important; outline-offset: 2px !important; } #privateRoomPanel.modern-vip-reference-window #privatePreferencesForm, #privateRoomPanel.modern-vip-reference-window .friend-center { position: absolute !important; top: 25% !important; bottom: 8% !important; width: 42% !important; min-width: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; gap: 7px !important; overflow: auto !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } #privateRoomPanel.modern-vip-reference-window #privatePreferencesForm { left: 7% !important; } #privateRoomPanel.modern-vip-reference-window .friend-center { right: 7% !important; } /* Map the real settings controls to the corresponding fields in the approved 1199x1312 surface. Labels stay in the accessibility tree; the PNG supplies their visible captions and control chrome. */ #privateRoomPanel.modern-vip-reference-window #privatePreferencesForm { overflow: visible !important; } #privateRoomPanel.modern-vip-reference-window #privatePreferencesForm > h3 { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; } #privateRoomPanel.modern-vip-reference-window #privatePreferencesForm > label { position: absolute !important; left: 6% !important; width: 88% !important; margin: 0 !important; padding: 0 !important; color: transparent !important; font-size: 0 !important; line-height: 0 !important; text-shadow: none !important; } #privateRoomPanel.modern-vip-reference-window #privatePreferencesForm > label:nth-of-type(1) { top: 9% !important; } #privateRoomPanel.modern-vip-reference-window #privatePreferencesForm > label:nth-of-type(2) { top: 16% !important; } #privateRoomPanel.modern-vip-reference-window #privatePreferencesForm > label:nth-of-type(3) { top: 29% !important; } #privateRoomPanel.modern-vip-reference-window #privatePreferencesForm > label:nth-of-type(4) { top: 42% !important; } #privateRoomPanel.modern-vip-reference-window #privatePreferencesForm > label:nth-of-type(5) { top: 63% !important; } #privateRoomPanel.modern-vip-reference-window #privatePreferencesForm > label:nth-of-type(6) { top: 75% !important; } #privateRoomPanel.modern-vip-reference-window #privatePreferencesForm > label > select { display: block !important; width: 100% !important; height: 44px !important; min-height: 0 !important; margin: 0 !important; color: #ffe49a !important; font-size: clamp(11px, 1.1vw, 15px) !important; background: rgba(4, 6, 8, .9) !important; border: 1px solid #d7a548 !important; border-radius: 6px !important; } #privateRoomPanel.modern-vip-reference-window #privatePreferencesForm > label:nth-of-type(1) > input, #privateRoomPanel.modern-vip-reference-window #privatePreferencesForm > label:nth-of-type(2) > input, #privateRoomPanel.modern-vip-reference-window #privatePreferencesForm > label:nth-of-type(6) > input { display: block !important; width: 28px !important; height: 28px !important; margin: 0 !important; accent-color: #e2b85d !important; } #privateRoomPanel.modern-vip-reference-window #privatePreferencesForm > button[type="submit"], #privateRoomPanel.modern-vip-reference-window #openPrivateTableButton { position: absolute !important; left: 6% !important; width: 88% !important; height: 8% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; color: transparent !important; font-size: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; opacity: 0 !important; pointer-events: auto !important; } #privateRoomPanel.modern-vip-reference-window #privatePreferencesForm > button[type="submit"] { top: 84% !important; } #privateRoomPanel.modern-vip-reference-window #openPrivateTableButton { top: 92% !important; } #privateRoomPanel.modern-vip-reference-window #privatePreferencesForm > button:focus-visible, #privateRoomPanel.modern-vip-reference-window #privatePreferencesForm > label:has(input:focus-visible) { opacity: 1 !important; outline: 3px solid #ffe49a !important; outline-offset: -4px !important; } #privateRoomPanel.modern-vip-reference-window .friend-center { overflow: hidden !important; } #privateRoomPanel.modern-vip-reference-window .friend-center > h3, #privateRoomPanel.modern-vip-reference-window .friend-center > h4 { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; } #privateRoomPanel.modern-vip-reference-window #friendSearchForm { position: absolute !important; top: 9% !important; left: 5% !important; right: 5% !important; display: grid !important; grid-template-columns: minmax(0, 1fr) 27% !important; gap: 8px !important; margin: 0 !important; } #privateRoomPanel.modern-vip-reference-window #friendSearchForm input, #privateRoomPanel.modern-vip-reference-window #friendSearchForm button { min-width: 0 !important; height: 44px !important; min-height: 0 !important; margin: 0 !important; } #privateRoomPanel.modern-vip-reference-window #friendSearchForm input { color: #ffe49a !important; background: rgba(4, 6, 8, .9) !important; border: 1px solid #d7a548 !important; } #privateRoomPanel.modern-vip-reference-window #friendSearchForm button { color: transparent !important; background: transparent !important; border: 0 !important; box-shadow: none !important; font-size: 0 !important; opacity: 0 !important; } #privateRoomPanel.modern-vip-reference-window #friendSearchForm button:focus-visible, #privateRoomPanel.modern-vip-reference-window #friendSearchForm input:focus-visible { opacity: 1 !important; outline: 3px solid #ffe49a !important; outline-offset: -4px !important; } #privateRoomPanel.modern-vip-reference-window #friendSearchResults, #privateRoomPanel.modern-vip-reference-window #friendList { position: absolute !important; left: 5% !important; right: 5% !important; overflow: auto !important; padding: 0 !important; } #privateRoomPanel.modern-vip-reference-window #friendSearchResults { top: 24% !important; height: 15% !important; } #privateRoomPanel.modern-vip-reference-window #friendList { top: 42% !important; bottom: 5% !important; } #privateRoomPanel.modern-vip-reference-window #privatePreferencesForm > h3, #privateRoomPanel.modern-vip-reference-window .friend-center > h3, #privateRoomPanel.modern-vip-reference-window .friend-center > h4 { color: #ffe49a !important; text-shadow: 0 1px 2px #000 !important; } #privateRoomPanel.modern-vip-reference-window #privatePreferencesForm > label, #privateRoomPanel.modern-vip-reference-window .friend-center label, #privateRoomPanel.modern-vip-reference-window .friend-center small, #privateRoomPanel.modern-vip-reference-window .friend-item, #privateRoomPanel.modern-vip-reference-window #privateRoomMessage { color: #f8e5b0 !important; text-shadow: 0 1px 2px #000 !important; } #privateRoomPanel.modern-vip-reference-window #privateAssignmentInfo { position: absolute !important; top: 17% !important; left: 7% !important; right: 7% !important; z-index: 3 !important; margin: 0 !important; padding: 4px 8px !important; color: #ffe49a !important; background: rgba(3, 5, 7, .86) !important; border: 1px solid rgba(215, 165, 72, .72) !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* MODERN_VIP_DIRECT_REFERENCE_WINDOWS_END */ /* MODERN_VIP_DIRECT_REFERENCE_WINDOWS_CASCADE_GUARD_START */ body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel.modern-vip-reference-window, body:has(#dashboardPrivateTableMenuButton:not([hidden])) #privateRoomPanel.modern-vip-reference-window { overflow: hidden !important; padding: 0 !important; border: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; } body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel.modern-vip-reference-window::before, body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel.modern-vip-reference-window::after, body:has(#dashboardPrivateTableMenuButton:not([hidden])) #privateRoomPanel.modern-vip-reference-window::before, body:has(#dashboardPrivateTableMenuButton:not([hidden])) #privateRoomPanel.modern-vip-reference-window::after { content: none !important; display: none !important; background: none !important; box-shadow: none !important; filter: none !important; } body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel.modern-vip-reference-window > .normal-okey-bottom-menu-panel-heading, body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel.modern-vip-reference-window > #normalOkeyBottomMenuContent, body:has(#dashboardPrivateTableMenuButton:not([hidden])) #privateRoomPanel.modern-vip-reference-window > .private-room-grid { background: transparent !important; background-image: none !important; } body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="private-menu"] .normal-okey-bottom-menu-item { background: transparent !important; border-color: transparent !important; box-shadow: none !important; color: transparent !important; } body:has(#dashboardPrivateTableMenuButton:not([hidden])) #privateRoomPanel.modern-vip-reference-window > .private-room-grid { display: block !important; grid-template-columns: none !important; gap: 0 !important; padding: 0 !important; } /* MODERN_VIP_DIRECT_REFERENCE_WINDOWS_CASCADE_GUARD_END */ /* MODERN_VIP_EMPTY_SEAT_HITBOX_FIX_START Empty seats are intentionally not rendered as occupied player cards, but they must remain real hit targets for the existing delegated double-click join flow in app.js. Keep the seat shell hit-testable and hide only its empty-state children so no synthetic player/avatar is shown. */ #matchPanel.normal-okey.table-theme-modern-vip .player-seat.available-seat:not(.has-player) { visibility: visible !important; pointer-events: auto !important; cursor: pointer !important; } #matchPanel.normal-okey.table-theme-modern-vip .player-seat.available-seat:not(.has-player) > * { visibility: hidden !important; pointer-events: none !important; } /* MODERN_VIP_EMPTY_SEAT_HITBOX_FIX_END */ /* MODERN_VIP_ACTION_DOCK_SLOT_HITBOX_FIX_START The approved PNG paints twelve fixed button faces. Keep every live button in its corresponding grid slot even when state hides it; hidden controls remain non-interactive while later hitboxes cannot slide onto another button's painted face. */ #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .modern-vip-action-dock > button { display: flex !important; min-width: 0 !important; min-height: 0 !important; visibility: hidden !important; pointer-events: none !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .modern-vip-action-dock > button:not([hidden]):not(.hidden) { visibility: visible !important; pointer-events: auto !important; } /* MODERN_VIP_ACTION_DOCK_SLOT_HITBOX_FIX_END */ /* MODERN_VIP_START_BUTTON_AND_EXPLICIT_ACTION_SLOTS_START The start control is a separate live button placed in the reference-plane gap between Smart Assist and the right radio column. Explicit grid columns keep transparent live hitboxes on the same painted face even when controls are hidden or disabled; no button is cloned and no listener is moved. */ #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation .normal-okey-main.nok-table-area > #modernVipStartMount[hidden], #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation .normal-okey-main.nok-table-area > #modernVipStartMount.hidden { display: none !important; visibility: hidden !important; pointer-events: none !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation .normal-okey-main.nok-table-area > #modernVipStartMount:not([hidden]):not(.hidden) { position: absolute !important; left: 965px !important; top: 818px !important; width: 159px !important; height: 52px !important; min-width: 159px !important; min-height: 52px !important; box-sizing: border-box !important; display: block !important; margin: 0 !important; padding: 0 !important; z-index: 47 !important; pointer-events: none !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation .normal-okey-main.nok-table-area > #modernVipStartMount:not([hidden]):not(.hidden) > #modernVipStartButton { display: flex !important; width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; box-sizing: border-box !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 6px 8px !important; border: 1px solid #d7a548 !important; border-radius: 6px !important; color: #ffe49a !important; background: linear-gradient(180deg, #21160a, #080a0d 72%, #030405) !important; box-shadow: inset 0 1px rgba(255, 228, 154, .2), 0 5px 12px rgba(0, 0, 0, .58) !important; font: 900 11px/1.1 Calibri, Carlito, Arial, sans-serif !important; letter-spacing: .06em !important; white-space: nowrap !important; text-align: center !important; pointer-events: auto !important; cursor: pointer !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation .normal-okey-main.nok-table-area > #modernVipStartMount:not([hidden]):not(.hidden) > #modernVipStartButton:disabled { color: #9f8b63 !important; border-color: #806b43 !important; background: linear-gradient(180deg, #15120d, #08090a) !important; box-shadow: inset 0 1px rgba(255, 228, 154, .08) !important; cursor: not-allowed !important; opacity: .62 !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation .normal-okey-main.nok-table-area > #modernVipStartMount:not([hidden]):not(.hidden) > #modernVipStartButton:focus-visible { outline: 2px solid #28b9f4 !important; outline-offset: 2px !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .modern-vip-action-dock > button { position: relative !important; inset: auto !important; width: 100% !important; height: 100% !important; margin: 0 !important; align-self: stretch !important; justify-self: stretch !important; grid-row: 1 !important; z-index: 1 !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .modern-vip-action-dock > #readyButton { grid-column: 1 !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .modern-vip-action-dock > #nokAutoSortPresentation { grid-column: 2 !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .modern-vip-action-dock > #showIndicatorButton { grid-column: 3 !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .modern-vip-action-dock > #nokDoubleGoButton { grid-column: 4 !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .modern-vip-action-dock > #okeyAutoPlayButton { grid-column: 5 !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .modern-vip-action-dock > #drawPileButton { grid-column: 6 !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .modern-vip-action-dock > #discardPileButton { grid-column: 7 !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .modern-vip-action-dock > #discardButton { grid-column: 8 !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .modern-vip-action-dock > #nokUndoButton { grid-column: 9 !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .modern-vip-action-dock > #finishButton { grid-column: 10 !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .modern-vip-action-dock > #forfeitTableButton { grid-column: 11 !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .modern-vip-action-dock > #leaveTableButton { grid-column: 12 !important; } /* MODERN_VIP_START_BUTTON_AND_EXPLICIT_ACTION_SLOTS_END */ /* MODERN_VIP_GAME_START_SETTINGS_REFERENCE_START The approved OYUN AYARLARI PNG is the direct surface. The controls below remain real form elements and only cover the PNG's fixed sample states when the live selection differs. */ #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] { width: min(760px, calc(100vw - 24px), calc((100vh - 24px) * 1303 / 1207)) !important; height: auto !important; aspect-ratio: 1303 / 1207 !important; max-width: calc(100vw - 24px) !important; max-height: calc(100vh - 24px) !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] #normalOkeySettingsPanel { position: absolute !important; inset: 0 !important; display: block !important; width: 100% !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] #normalOkeySettingsPanel > summary { display: none !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] #normalOkeySettingsForm { position: absolute !important; inset: 0 !important; display: block !important; margin: 0 !important; padding: 0 !important; background: transparent !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] #normalOkeySettingsForm > fieldset { position: absolute !important; inset: 0 !important; display: block !important; width: 100% !important; height: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; pointer-events: none !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] #normalOkeySettingsForm > fieldset > legend { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] #normalOkeySettingsForm > fieldset > label { position: absolute !important; display: block !important; width: 22.2% !important; height: 6.7% !important; margin: 0 !important; padding: 0 !important; color: transparent !important; font-size: 0 !important; line-height: 0 !important; border: 1px solid rgba(170, 180, 192, .62) !important; border-radius: 8px !important; background: rgba(4, 7, 11, .94) !important; box-shadow: none !important; pointer-events: auto !important; cursor: pointer !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] #normalOkeySettingsForm > fieldset:first-of-type > label:first-of-type, #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] #normalOkeySettingsForm > fieldset:nth-of-type(2) > label:first-of-type { left: 42.4% !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] #normalOkeySettingsForm > fieldset:first-of-type > label:last-of-type, #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] #normalOkeySettingsForm > fieldset:nth-of-type(2) > label:last-of-type { left: 64.2% !important; width: 23% !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] #normalOkeySettingsForm > fieldset:first-of-type > label { top: 29.1% !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] #normalOkeySettingsForm > fieldset:nth-of-type(2) > label { top: 38.7% !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] #normalOkeySettingsForm > fieldset > label.is-selected { border-color: #ffc62e !important; background: linear-gradient(180deg, rgba(74, 51, 8, .96), rgba(12, 10, 5, .96)) !important; box-shadow: inset 0 0 0 1px rgba(255, 228, 154, .42), 0 0 9px rgba(255, 194, 35, .22) !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] #normalOkeySettingsForm > fieldset > label > input { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; opacity: 0 !important; pointer-events: auto !important; cursor: pointer !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] #normalOkeySettingsForm > .normal-okey-series-setting { position: absolute !important; top: 47.3% !important; left: 42.4% !important; width: 28.2% !important; height: 6.7% !important; display: block !important; margin: 0 !important; padding: 0 !important; color: transparent !important; font-size: 0 !important; pointer-events: none !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] #normalOkeySettingsForm > .normal-okey-series-setting > select { width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 12% !important; color: #fff7df !important; font: 700 clamp(16px, 2.1vw, 28px)/1 Calibri, Carlito, Arial, sans-serif !important; text-align: left !important; background: rgba(4, 7, 11, .94) !important; border: 2px solid #ffc62e !important; border-radius: 8px !important; pointer-events: auto !important; cursor: pointer !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] #normalOkeySettingsForm > button[type="submit"] { display: none !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] #normalOkeySettingsForm > .modern-vip-settings-summary { position: absolute !important; top: 61.3% !important; left: 21.5% !important; width: 43% !important; height: 14.8% !important; display: grid !important; align-content: center !important; gap: 3px !important; margin: 0 !important; padding: 2% 2.5% !important; box-sizing: border-box !important; color: #f3f3ef !important; background: rgba(4, 8, 13, .96) !important; font: 400 clamp(12px, 1.35vw, 18px)/1.2 Calibri, Carlito, Arial, sans-serif !important; border: 0 !important; pointer-events: none !important; z-index: 4 !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] .modern-vip-settings-summary > div { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 5% !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] .modern-vip-settings-summary strong { color: #ffd34e !important; font-weight: 700 !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] #normalOkeyDefaultSettingsConfirmation { position: absolute !important; inset: 0 !important; display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; pointer-events: none !important; z-index: 5 !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] #normalOkeyDefaultSettingsConfirmation > p, #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] #normalOkeyDefaultSettingsConfirmation > dl { display: none !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] #normalOkeyDefaultSettingsConfirmation .normal-okey-settings-confirmation-actions { position: absolute !important; inset: 0 !important; display: block !important; margin: 0 !important; padding: 0 !important; pointer-events: none !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] #normalOkeyDefaultSettingsConfirmation .normal-okey-settings-confirmation-actions button { position: absolute !important; bottom: 7.7% !important; height: 8.7% !important; margin: 0 !important; padding: 0 !important; color: transparent !important; background: transparent !important; border: 0 !important; box-shadow: none !important; opacity: 0 !important; pointer-events: auto !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] #cancelDefaultNormalOkeySettingsButton { left: 6.6% !important; width: 32.8% !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] #confirmDefaultNormalOkeySettingsButton { right: 6.5% !important; width: 42.4% !important; } /* MODERN_VIP_START_SETTINGS_VIEWPORT_AND_LIVE_CONTROLS_FIX_START This panel is a body-level sibling of the transformed table. It therefore must be viewport-fixed, not positioned by the table's scroll/transform context. The image remains the unchanged decorative surface. */ body:has(#normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"]) #normalOkeyBottomMenuBackdrop:not([hidden]) { position: fixed !important; inset: 0 !important; z-index: 119 !important; pointer-events: auto !important; background: rgba(0, 0, 0, .68) !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] { position: fixed !important; top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%) !important; width: min(760px, calc(100vw - 24px), calc((100dvh - 24px) * 1303 / 1207)) !important; max-width: calc(100vw - 24px) !important; max-height: calc(100dvh - 24px) !important; overflow: hidden !important; z-index: 120 !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] #normalOkeySettingsForm > fieldset > label { display: grid !important; place-items: center !important; box-sizing: border-box !important; padding: 0 8% 0 16% !important; color: #f5f7fb !important; font: 800 clamp(11px, 1.55vw, 21px)/1 Calibri, Carlito, Arial, sans-serif !important; letter-spacing: .02em !important; text-align: center !important; text-shadow: 0 1px 2px #000 !important; overflow: hidden !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] #normalOkeySettingsForm > fieldset > label::before { content: "" !important; position: absolute !important; left: 7% !important; width: clamp(11px, 1.55vw, 21px) !important; height: clamp(11px, 1.55vw, 21px) !important; box-sizing: border-box !important; border: 2px solid #d6dce5 !important; border-radius: 50% !important; background: transparent !important; box-shadow: 0 1px 2px #000 !important; pointer-events: none !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] #normalOkeySettingsForm > fieldset > label.is-selected::before { border-color: #ffd34e !important; background: radial-gradient(circle, #fff9e7 0 38%, #d5a72c 42% 66%, transparent 70%) !important; box-shadow: 0 0 8px rgba(255, 198, 46, .72) !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] #normalOkeySettingsForm > .normal-okey-series-setting > select { box-sizing: border-box !important; padding: 0 10% !important; background: rgba(4, 7, 11, .99) !important; color: #fff7df !important; text-align: center !important; text-align-last: center !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] #normalOkeySettingsForm > .modern-vip-settings-summary { background: rgba(3, 7, 11, .995) !important; box-shadow: 0 0 0 1px rgba(255, 198, 46, .12) !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] #normalOkeyDefaultSettingsConfirmation .normal-okey-settings-confirmation-actions button { cursor: pointer !important; } /* MODERN_VIP_START_SETTINGS_VIEWPORT_AND_LIVE_CONTROLS_FIX_END */ /* MODERN_VIP_SINGLE_GIFT_COMPOSER_START The approved gift PNG is a decorative layer only. The six live catalog tabs, six live products, recipient select, and actions are real DOM above targeted opaque masks, so the static sample labels cannot collide with current state. */ #normalOkeyGiftReferenceSurface { display: none !important; } #normalOkeyGiftComposer.modern-vip-gift-composer { position: fixed !important; inset: 0 !important; z-index: 120 !important; display: grid !important; place-items: center !important; padding: 12px !important; box-sizing: border-box !important; overflow: hidden !important; background: rgba(0, 0, 0, .7) !important; } /* The ID-scoped open rule above otherwise outranks the shared [hidden] rule. */ #normalOkeyGiftComposer.modern-vip-gift-composer.hidden, #normalOkeyGiftComposer.modern-vip-gift-composer[hidden] { display: none !important; } #normalOkeyGiftComposer.modern-vip-gift-composer .normal-okey-gift-card { position: relative !important; width: min(780px, calc(100vw - 24px), calc((100dvh - 24px) * 1302 / 1208)) !important; height: auto !important; aspect-ratio: 1302 / 1208 !important; max-width: calc(100vw - 24px) !important; max-height: calc(100dvh - 24px) !important; overflow: hidden !important; box-sizing: border-box !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; color: #fff3d0 !important; background: transparent !important; box-shadow: none !important; isolation: isolate !important; } /* MODERN_VIP_GIFT_FOOTER_MASK_START The approved PNG contains sample product labels and sample footer controls below the live six-item grid. Keep those pixels as a decorative reference, but cover only that lower region so the live selection/recipient/actions are the single visible control layer. */ #normalOkeyGiftComposer.modern-vip-gift-composer .normal-okey-gift-card::after { content: "" !important; position: absolute !important; top: 81.25% !important; left: 7.2% !important; right: 7.2% !important; bottom: 2.4% !important; z-index: 1 !important; display: block !important; pointer-events: none !important; background: linear-gradient(180deg, rgba(2, 7, 9, .995), rgba(1, 4, 6, .995)) !important; border-top: 1px solid rgba(255, 198, 46, .62) !important; } #normalOkeyGiftComposer.modern-vip-gift-composer #normalOkeyGiftReferenceSurface { position: absolute !important; inset: 0 !important; z-index: 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; user-select: none !important; } #normalOkeyGiftComposer.modern-vip-gift-composer .normal-okey-gift-heading { position: absolute !important; inset: 0 !important; z-index: 4 !important; display: block !important; margin: 0 !important; padding: 0 !important; pointer-events: none !important; } #normalOkeyGiftComposer.modern-vip-gift-composer .normal-okey-gift-heading > div { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; } #normalOkeyGiftComposer.modern-vip-gift-composer #normalOkeyGiftClose { position: absolute !important; top: 3.4% !important; right: 3.2% !important; z-index: 5 !important; width: 7.5% !important; min-width: 0 !important; height: 7.5% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; color: transparent !important; background: transparent !important; box-shadow: none !important; cursor: pointer !important; pointer-events: auto !important; } #normalOkeyGiftComposer.modern-vip-gift-composer #normalOkeyGiftCategories { position: absolute !important; top: 11.2% !important; left: 7% !important; right: 7% !important; height: 7.5% !important; z-index: 3 !important; display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: .7% !important; padding: 0 !important; overflow: hidden !important; background: rgba(3, 8, 10, .99) !important; border: 1px solid rgba(255, 198, 46, .82) !important; border-radius: 8px !important; } #normalOkeyGiftComposer.modern-vip-gift-composer .normal-okey-gift-category { min-width: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 2px !important; overflow: hidden !important; border: 1px solid rgba(255, 198, 46, .5) !important; border-radius: 5px !important; color: #fff0bd !important; background: rgba(6, 12, 16, .98) !important; font: 800 clamp(7px, .82vw, 12px)/1 Arial, sans-serif !important; white-space: normal !important; text-align: center !important; cursor: pointer !important; } #normalOkeyGiftComposer.modern-vip-gift-composer .normal-okey-gift-category[aria-selected="true"] { color: #1a1003 !important; background: linear-gradient(180deg, #fff0a0, #d98b13) !important; border-color: #ffe077 !important; box-shadow: 0 0 9px rgba(255, 196, 43, .58) !important; } #normalOkeyGiftComposer.modern-vip-gift-composer #normalOkeyGiftProducts { position: absolute !important; top: 19.2% !important; left: 7.2% !important; right: 7.2% !important; height: 62% !important; z-index: 2 !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-template-rows: repeat(2, minmax(0, 1fr)) !important; gap: 1.2% !important; min-height: 0 !important; padding: 1.1% !important; overflow: hidden !important; box-sizing: border-box !important; background: rgba(2, 7, 9, .975) !important; border-top: 1px solid rgba(255, 198, 46, .72) !important; border-bottom: 1px solid rgba(255, 198, 46, .72) !important; } #normalOkeyGiftComposer.modern-vip-gift-composer .normal-okey-gift-product { min-width: 0 !important; min-height: 0 !important; width: 100% !important; height: 100% !important; display: grid !important; grid-template-rows: minmax(0, 1fr) auto !important; gap: 3px !important; padding: 4px !important; overflow: hidden !important; border: 1px solid rgba(255, 198, 46, .34) !important; border-radius: 6px !important; color: #fff1cc !important; background: rgba(8, 16, 19, .98) !important; cursor: pointer !important; } #normalOkeyGiftComposer.modern-vip-gift-composer .normal-okey-gift-product:hover, #normalOkeyGiftComposer.modern-vip-gift-composer .normal-okey-gift-product.selected { border-color: #ffd249 !important; background: linear-gradient(145deg, rgba(96, 67, 13, .98), rgba(14, 22, 20, .98)) !important; box-shadow: 0 0 14px rgba(255, 198, 46, .58), inset 0 0 0 1px rgba(255, 227, 133, .42) !important; } #normalOkeyGiftComposer.modern-vip-gift-composer .normal-okey-gift-product-image { align-self: stretch !important; width: 100% !important; height: 100% !important; min-height: 0 !important; border-radius: 4px !important; object-fit: contain !important; background: rgba(0, 0, 0, .22) !important; } #normalOkeyGiftComposer.modern-vip-gift-composer .normal-okey-gift-product > span:last-child { min-height: 1.2em !important; color: #fff2d1 !important; font: 800 clamp(8px, .9vw, 13px)/1.1 Arial, sans-serif !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #normalOkeyGiftComposer.modern-vip-gift-composer #normalOkeyGiftSelection { position: absolute !important; top: 82.2% !important; left: 7.2% !important; right: 7.2% !important; height: 4.2% !important; z-index: 3 !important; display: flex !important; align-items: center !important; margin: 0 !important; padding: 0 2% !important; overflow: hidden !important; box-sizing: border-box !important; border: 1px solid rgba(255, 198, 46, .38) !important; border-radius: 4px !important; color: #fff2c7 !important; background: rgba(2, 7, 9, .995) !important; font: 800 clamp(8px, 1vw, 14px)/1 Arial, sans-serif !important; white-space: nowrap !important; text-overflow: ellipsis !important; } #normalOkeyGiftComposer.modern-vip-gift-composer .normal-okey-gift-recipient-row { position: absolute !important; top: 86.8% !important; left: 7.2% !important; width: 48% !important; height: 5.8% !important; z-index: 3 !important; display: grid !important; grid-template-columns: 24% minmax(0, 1fr) !important; gap: 2% !important; align-items: center !important; margin: 0 !important; padding: 1% !important; box-sizing: border-box !important; background: rgba(2, 7, 9, .995) !important; border: 1px solid rgba(255, 198, 46, .38) !important; border-radius: 4px !important; } #normalOkeyGiftComposer.modern-vip-gift-composer .normal-okey-gift-recipient-row label { min-width: 0 !important; color: #ffe2a0 !important; font: 800 clamp(8px, .95vw, 13px)/1 Arial, sans-serif !important; } #normalOkeyGiftComposer.modern-vip-gift-composer .normal-okey-gift-recipient-row select { min-width: 0 !important; width: 100% !important; height: 100% !important; padding: 0 4% !important; overflow: hidden !important; color: #fff5dc !important; background: rgba(7, 13, 17, .99) !important; border: 1px solid rgba(255, 198, 46, .64) !important; border-radius: 3px !important; font: 700 clamp(8px, .85vw, 12px)/1 Arial, sans-serif !important; } #normalOkeyGiftComposer.modern-vip-gift-composer #normalOkeyGiftRecipientHint, #normalOkeyGiftComposer.modern-vip-gift-composer .normal-okey-gift-disabled-note { position: absolute !important; left: 7.2% !important; right: 7.2% !important; z-index: 3 !important; overflow: hidden !important; margin: 0 !important; padding: 0 1% !important; color: #ffe2a0 !important; background: rgba(2, 7, 9, .98) !important; font: 700 clamp(7px, .72vw, 10px)/1.1 Arial, sans-serif !important; white-space: nowrap !important; text-overflow: ellipsis !important; } #normalOkeyGiftComposer.modern-vip-gift-composer #normalOkeyGiftRecipientHint { top: 93.1% !important; height: 2.5% !important; } #normalOkeyGiftComposer.modern-vip-gift-composer .normal-okey-gift-disabled-note { top: 95.7% !important; height: 2.2% !important; color: #d2c4aa !important; } /* MODERN_VIP_GIFT_FOOTER_MASK_END */ #normalOkeyGiftComposer.modern-vip-gift-composer .normal-okey-gift-actions { position: absolute !important; top: 86.8% !important; right: 7.2% !important; width: 31% !important; height: 5.8% !important; z-index: 4 !important; display: grid !important; grid-template-columns: 1.2fr 1fr !important; gap: 3% !important; margin: 0 !important; } #normalOkeyGiftComposer.modern-vip-gift-composer .normal-okey-gift-actions button { min-width: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 4px !important; border-radius: 5px !important; font: 900 clamp(8px, 1.15vw, 16px)/1 Arial, sans-serif !important; cursor: pointer !important; } #normalOkeyGiftComposer.modern-vip-gift-composer .normal-okey-gift-actions .primary { color: #181004 !important; background: linear-gradient(180deg, #ffe58a, #d9961c) !important; border-color: #ffe58a !important; box-shadow: 0 0 12px rgba(255, 198, 46, .54) !important; } #normalOkeyGiftComposer.modern-vip-gift-composer .normal-okey-gift-actions .ghost { color: #fff0c8 !important; background: rgba(5, 10, 14, .98) !important; border-color: rgba(255, 198, 46, .68) !important; } @media (max-width: 520px) { #normalOkeyGiftComposer.modern-vip-gift-composer #normalOkeyGiftProducts { gap: 1.5% !important; } #normalOkeyGiftComposer.modern-vip-gift-composer .normal-okey-gift-product { padding: 2px !important; } } /* MODERN_VIP_SINGLE_GIFT_COMPOSER_END */ /* MODERN_VIP_SMALL_GIFT_PANEL_IMAGE_FIX_START The right-column quick-gift buttons retain their existing IDs, data hooks, dimensions, and click listeners. Their live product images and labels now mask only each small card's static sample pixels. */ #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-treat-panel > .nok-treat-options { z-index: 2 !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-treat-panel > .nok-treat-options > button { position: relative !important; z-index: 1 !important; display: grid !important; grid-template-rows: minmax(0, 1fr) auto !important; align-items: center !important; justify-items: center !important; min-width: 0 !important; min-height: 0 !important; padding: 4px 2px 3px !important; overflow: hidden !important; border: 1px solid rgba(156, 118, 54, .82) !important; border-radius: 5px !important; color: #fff1c7 !important; background: linear-gradient(180deg, rgba(12, 24, 30, .98), rgba(3, 9, 13, .98)) !important; font-size: 0 !important; line-height: 1 !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-treat-panel > .nok-treat-options > button > img { display: block !important; width: 100% !important; height: 68px !important; min-width: 0 !important; min-height: 0 !important; max-width: 100% !important; max-height: 68px !important; object-fit: contain !important; object-position: center !important; overflow: hidden !important; } /* The legacy 110x124 lemonade thumbnail carries a baked-in 3px gold strip at its right source edge. Clip only that source-edge artifact in the live VIP card; the approved asset, card border, dimensions, and other gift images remain unchanged. */ #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-treat-panel > .nok-treat-options > button[data-gift-id="cold-lemonade"] > img { clip-path: inset(0 8% 0 0) !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .nok-right-column > .nok-treat-panel > .nok-treat-options > button > span { display: block !important; visibility: visible !important; width: 100% !important; min-width: 0 !important; overflow: hidden !important; color: #fff1c7 !important; font: 800 9px/1 Arial, sans-serif !important; text-align: center !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* MODERN_VIP_SMALL_GIFT_PANEL_IMAGE_FIX_END */ #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] #normalOkeyDefaultSettingsConfirmation .normal-okey-settings-confirmation-actions button:focus-visible { opacity: 1 !important; color: #1a1103 !important; outline: 3px solid #ffe49a !important; outline-offset: -4px !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] #normalOkeySettingsMessage { position: absolute !important; left: 21% !important; right: 21% !important; bottom: 1.5% !important; margin: 0 !important; color: #ffe49a !important; font-size: clamp(10px, 1vw, 14px) !important; text-align: center !important; pointer-events: none !important; z-index: 6 !important; } /* MODERN_VIP_GAME_START_SETTINGS_REFERENCE_END */ /* MODERN_VIP_GAME_START_SETTINGS_LAYOUT_FIX_START The approved PNG already contains the option captions, radio chrome, and action labels. Keep the live labels as the single readable DOM layer over opaque cards, use the real radio input for the state indicator, and align the live summary/hitboxes to the painted panel instead of the old partial overlay coordinates. */ #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] #normalOkeySettingsForm > fieldset > label { display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; width: 21.2% !important; min-width: 0 !important; padding: 0 6px !important; gap: clamp(4px, .55vw, 8px) !important; color: #f5f7fb !important; font: 800 clamp(11px, 1.55vw, 21px)/1 Calibri, Carlito, Arial, sans-serif !important; letter-spacing: .02em !important; text-align: center !important; text-shadow: 0 1px 2px #000 !important; white-space: nowrap !important; overflow: hidden !important; background: rgba(3, 7, 11, .995) !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] #normalOkeySettingsForm > fieldset:first-of-type > label:first-of-type, #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] #normalOkeySettingsForm > fieldset:nth-of-type(2) > label:first-of-type { left: 42.4% !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] #normalOkeySettingsForm > fieldset:first-of-type > label:last-of-type, #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] #normalOkeySettingsForm > fieldset:nth-of-type(2) > label:last-of-type { left: 64.5% !important; width: 22.6% !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] #normalOkeySettingsForm > fieldset > label::before { content: none !important; display: none !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] #normalOkeySettingsForm > fieldset > label > input { position: static !important; inset: auto !important; display: block !important; flex: 0 0 auto !important; width: clamp(12px, 1.55vw, 21px) !important; height: clamp(12px, 1.55vw, 21px) !important; margin: 0 !important; padding: 0 !important; appearance: none !important; border: 2px solid #d6dce5 !important; border-radius: 50% !important; background: transparent !important; box-shadow: 0 1px 2px #000 !important; opacity: 1 !important; pointer-events: auto !important; cursor: pointer !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] #normalOkeySettingsForm > fieldset > label > input:checked { border-color: #ffd34e !important; background: radial-gradient(circle, #fff9e7 0 38%, #d5a72c 42% 66%, transparent 70%) !important; box-shadow: 0 0 8px rgba(255, 198, 46, .72) !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] #normalOkeySettingsForm > .modern-vip-settings-summary { top: 61.2% !important; left: 21.5% !important; width: 56.5% !important; height: 11.7% !important; box-sizing: border-box !important; display: grid !important; align-content: stretch !important; gap: 0 !important; padding: 1.1% 1.5% !important; overflow: hidden !important; background: rgba(3, 7, 11, .995) !important; border: 0 !important; border-radius: 0 !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] .modern-vip-settings-summary > div { min-width: 0 !important; display: grid !important; grid-template-columns: minmax(0, 31%) minmax(0, 1fr) !important; align-items: center !important; gap: 8% !important; line-height: 1 !important; overflow: hidden !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] .modern-vip-settings-summary span, #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] .modern-vip-settings-summary strong { min-width: 0 !important; overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] .modern-vip-settings-summary span::after { content: ":" !important; margin-left: .35em !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] #cancelDefaultNormalOkeySettingsButton { left: 11.8% !important; right: auto !important; width: 32.8% !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] #confirmDefaultNormalOkeySettingsButton { left: 46.6% !important; right: auto !important; width: 42.4% !important; } @media (max-width: 600px) { #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] #normalOkeySettingsForm > fieldset > label { gap: 4px !important; padding: 0 4px !important; font-size: clamp(10px, 3.2vw, 16px) !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] #normalOkeySettingsForm > fieldset > label > input { width: clamp(11px, 3.8vw, 18px) !important; height: clamp(11px, 3.8vw, 18px) !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] .modern-vip-settings-summary > div { grid-template-columns: minmax(0, 42%) minmax(0, 1fr) !important; gap: 4% !important; } #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="start-settings"] .modern-vip-settings-summary { font-size: clamp(9px, 2.5vw, 14px) !important; } } /* MODERN_VIP_GAME_START_SETTINGS_LAYOUT_FIX_END */ /* PRIVATE_TABLE_MODAL_NATIVE_SELECT_STABILITY_START The settings reference is a decorative PNG with real native controls on top. Keep each control in its painted slot without allowing label text, grid reflow, or a focused select to change the neighbouring slots. */ #privateRoomPanel.modern-vip-reference-window #privatePreferencesForm { display: block !important; box-sizing: border-box !important; height: auto !important; min-height: 0 !important; overflow: visible !important; transform: none !important; z-index: 2 !important; } #privateRoomPanel.modern-vip-reference-window #privatePreferencesForm > label { display: block !important; box-sizing: border-box !important; height: 44px !important; min-height: 44px !important; overflow: visible !important; transform: none !important; z-index: 2 !important; color: transparent !important; font-size: 0 !important; line-height: 0 !important; text-shadow: none !important; } #privateRoomPanel.modern-vip-reference-window #privatePreferencesForm > label > select { position: relative !important; z-index: 2 !important; display: block !important; box-sizing: border-box !important; width: 100% !important; height: 44px !important; min-height: 44px !important; margin: 0 !important; padding: 0 34px 0 12px !important; transform: none !important; color: #ffe49a !important; font-size: clamp(11px, 1.1vw, 15px) !important; font-weight: 700 !important; line-height: 1.2 !important; text-align: left !important; white-space: nowrap !important; background: rgba(4, 6, 8, .9) !important; border: 1px solid #d7a548 !important; border-radius: 6px !important; } #privateRoomPanel.modern-vip-reference-window #privatePreferencesForm > label > select:focus, #privateRoomPanel.modern-vip-reference-window #privatePreferencesForm > label > select:open { z-index: 5 !important; } #privateRoomPanel.modern-vip-reference-window #privatePreferencesForm > label > input { position: relative !important; z-index: 2 !important; transform: none !important; } #privateRoomPanel.modern-vip-reference-window #privatePreferencesForm > button[type="submit"], #privateRoomPanel.modern-vip-reference-window #openPrivateTableButton { z-index: 2 !important; transform: none !important; } #privateRoomPanel.modern-vip-reference-window #privateRoomMessage { position: absolute !important; left: 6% !important; right: 6% !important; top: 80% !important; bottom: auto !important; z-index: 3 !important; margin: 0 !important; max-height: 5% !important; overflow: hidden !important; color: #ffe49a !important; font-size: clamp(9px, .9vw, 12px) !important; line-height: 1.1 !important; text-align: center !important; text-overflow: ellipsis !important; white-space: nowrap !important; pointer-events: none !important; } /* PRIVATE_TABLE_MODAL_NATIVE_SELECT_STABILITY_END */ /* MODERN_VIP_PLAYER_PROFILE_SLOT_FIX_START The seat DOM is authoritative: renderParticipants() writes exactly one avatar, one identity block, and one private opponent-rack node into each visual station. The shared Normal Okey stylesheet was still contributing vertical/reversed flows, an opaque old seat card, and active/online pseudo decorations. Neutralize those legacy paints only for Modern VIP, then keep the approved PNG's avatar-left / information-right slots fixed. */ #matchPanel.normal-okey.table-theme-modern-vip .nok-station-top, #matchPanel.normal-okey.table-theme-modern-vip .nok-station-bottom, #matchPanel.normal-okey.table-theme-modern-vip .nok-station-left, #matchPanel.normal-okey.table-theme-modern-vip .nok-station-right { overflow: visible !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-station-top > .player-seat, #matchPanel.normal-okey.table-theme-modern-vip .nok-station-bottom > .player-seat, #matchPanel.normal-okey.table-theme-modern-vip .nok-station-left > .player-seat, #matchPanel.normal-okey.table-theme-modern-vip .nok-station-right > .player-seat { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 7px !important; overflow: visible !important; transform: none !important; isolation: isolate !important; } /* The old theme's SIRA badge and online dot are not profile data. */ #matchPanel.normal-okey.table-theme-modern-vip .player-seat::before, #matchPanel.normal-okey.table-theme-modern-vip .player-seat::after { display: none !important; content: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .player-seat.has-player { visibility: visible !important; pointer-events: auto !important; } #matchPanel.normal-okey.table-theme-modern-vip .player-seat:not(.has-player):not(.available-seat) { visibility: hidden !important; pointer-events: none !important; } /* Empty seats keep their existing join hitbox, but never expose synthetic initials, "Boş koltuk", score, or rack nodes over the baked empty slot. */ #matchPanel.normal-okey.table-theme-modern-vip .player-seat:not(.has-player) > .seat-avatar, #matchPanel.normal-okey.table-theme-modern-vip .player-seat:not(.has-player) > .seat-identity, #matchPanel.normal-okey.table-theme-modern-vip .player-seat:not(.has-player) > .opponent-rack { visibility: hidden !important; pointer-events: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .player-seat > .seat-avatar { position: relative !important; z-index: 2 !important; display: grid !important; flex: 0 0 58px !important; width: 58px !important; height: 58px !important; min-width: 58px !important; min-height: 58px !important; max-width: 58px !important; max-height: 58px !important; box-sizing: border-box !important; place-items: center !important; overflow: hidden !important; border: 2px solid #f3b84c !important; border-radius: 50% !important; object-fit: cover !important; object-position: center !important; line-height: 1 !important; } #matchPanel.normal-okey.table-theme-modern-vip .player-seat > .seat-identity { position: relative !important; z-index: 2 !important; display: flex !important; flex: 1 1 174px !important; width: 174px !important; min-width: 0 !important; max-width: 174px !important; height: 60px !important; min-height: 60px !important; max-height: 60px !important; box-sizing: border-box !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 0 !important; margin: 0 !important; padding: 3px 9px !important; overflow: hidden !important; border: 1px solid #d28b2e !important; border-radius: 5px !important; background: rgba(4, 8, 11, .96) !important; box-shadow: 0 5px 12px #000b !important; line-height: 1.1 !important; white-space: nowrap !important; } #matchPanel.normal-okey.table-theme-modern-vip .player-seat > .seat-identity > strong, #matchPanel.normal-okey.table-theme-modern-vip .player-seat > .seat-identity > small { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #matchPanel.normal-okey.table-theme-modern-vip .player-seat > .seat-identity > strong { color: #fff5df !important; font-size: 16px !important; font-weight: 900 !important; line-height: 1 !important; } #matchPanel.normal-okey.table-theme-modern-vip .player-seat > .seat-identity > small { color: #d5d8d8 !important; font-size: 10px !important; font-weight: 800 !important; line-height: 1 !important; } #matchPanel.normal-okey.table-theme-modern-vip .player-seat > .seat-identity > .player-score { color: #ffd36f !important; font-size: 14px !important; font-weight: 800 !important; line-height: 1 !important; } #matchPanel.normal-okey.table-theme-modern-vip .player-seat > .seat-identity > .seat-role, #matchPanel.normal-okey.table-theme-modern-vip .player-seat > .seat-identity > .series-score { font-size: 10px !important; } #matchPanel.normal-okey.table-theme-modern-vip .player-seat > .seat-identity > .series-score { max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* MODERN_VIP_PLAYER_PROFILE_SLOT_FIX_END */ /* MODERN_VIP_PROFILE_REFERENCE_GEOMETRY_START The approved 1498x1050 raster was measured in its own canonical plane. Visible gold-ring bounds (inclusive pixels) are top/seat3 (493,191)-(563,262), right/seat2 (922,409)-(992,478), bottom/seat1 (482,551)-(555,626), and left/seat4 (11,409)-(79,478). The adjacent black/gold card edge-transition envelopes are top (562,195)-(737,263), right (991,413)-(1140,476), bottom (551,556)-(737,625), and left (75,413)-(229,476). Station origins are already anchored to that same presentation plane: top (482,194), right (928,410), bottom (482,555), left (17,410). Place the live data nodes at station-relative coordinates derived from those measured rectangles. The parent .nok-presentation owns the only responsive scale, so no viewport-coordinate correction is compounded. */ #matchPanel.normal-okey.table-theme-modern-vip .nok-station-top > .player-seat, #matchPanel.normal-okey.table-theme-modern-vip .nok-station-right > .player-seat, #matchPanel.normal-okey.table-theme-modern-vip .nok-station-bottom > .player-seat, #matchPanel.normal-okey.table-theme-modern-vip .nok-station-left > .player-seat { position: absolute !important; inset: 0 !important; display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; transform: none !important; translate: none !important; overflow: visible !important; isolation: isolate !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-station-top > #seat3 > .seat-avatar, #matchPanel.normal-okey.table-theme-modern-vip .nok-station-right > #seat2 > .seat-avatar, #matchPanel.normal-okey.table-theme-modern-vip .nok-station-bottom > #seat1 > .seat-avatar, #matchPanel.normal-okey.table-theme-modern-vip .nok-station-left > #seat4 > .seat-avatar { position: absolute !important; z-index: 2 !important; display: grid !important; flex: none !important; width: 58px !important; min-width: 58px !important; max-width: 58px !important; height: 58px !important; min-height: 58px !important; max-height: 58px !important; margin: 0 !important; box-sizing: border-box !important; place-items: center !important; overflow: hidden !important; border-radius: 50% !important; object-fit: cover !important; object-position: center !important; transform: none !important; translate: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-station-top > #seat3 > .seat-avatar { left: 17px !important; top: 4px !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-station-right > #seat2 > .seat-avatar { left: 0px !important; top: 4px !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-station-bottom > #seat1 > .seat-avatar { left: 7px !important; top: 4px !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-station-left > #seat4 > .seat-avatar { left: -1px !important; top: 4px !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-station-top > #seat3 > .seat-identity, #matchPanel.normal-okey.table-theme-modern-vip .nok-station-right > #seat2 > .seat-identity, #matchPanel.normal-okey.table-theme-modern-vip .nok-station-bottom > #seat1 > .seat-identity, #matchPanel.normal-okey.table-theme-modern-vip .nok-station-left > #seat4 > .seat-identity { position: absolute !important; z-index: 2 !important; display: flex !important; flex: none !important; min-width: 0 !important; height: 60px !important; min-height: 60px !important; max-height: 60px !important; box-sizing: border-box !important; margin: 0 !important; transform: none !important; translate: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-station-top > #seat3 > .seat-identity { left: 81px !important; top: 5px !important; width: 174px !important; max-width: 174px !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-station-right > #seat2 > .seat-identity { left: 65px !important; top: 5px !important; width: 146px !important; max-width: 146px !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-station-bottom > #seat1 > .seat-identity { left: 72px !important; top: 5px !important; width: 183px !important; max-width: 183px !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-station-left > #seat4 > .seat-identity { left: 63px !important; top: 5px !important; width: 148px !important; max-width: 148px !important; } /* MODERN_VIP_PROFILE_REFERENCE_GEOMETRY_END */ /* MODERN_VIP_LIVE_PROFILE_OVERLAY_FIX_START The approved PNG already paints the gold avatar ring and the black/gold identity card, including its empty-seat copy. The live DOM remains the authoritative source for avatar/nickname/score, but must paint only the content surfaces: the old live gold border/card border created a second ring and a second card over the immutable reference. The opaque inner surfaces hide the baked empty-seat copy only when a seat is occupied; empty-seat DOM children stay hidden in the profile slot stage above. */ #matchPanel.normal-okey.table-theme-modern-vip .player-seat.has-player > .seat-avatar { border: 0 !important; box-shadow: none !important; background: #05080b !important; } #matchPanel.normal-okey.table-theme-modern-vip .player-seat.has-player > .seat-identity { border: 0 !important; border-radius: 5px !important; background: rgba(4, 8, 11, .97) !important; box-shadow: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .player-seat.has-player > .seat-identity::before, #matchPanel.normal-okey.table-theme-modern-vip .player-seat.has-player > .seat-identity::after { display: none !important; content: none !important; background: none !important; box-shadow: none !important; } /* MODERN_VIP_LIVE_PROFILE_OVERLAY_FIX_END */ /* MODERN_VIP_RACK_TWO_ROW_CHANNEL_FIX_START VIP uses the 1498x1050 surface, not the 1536x1024 Modern Premium PNG channel coordinate system. Use a deterministic 8-column/2-row measurement surface before renderRack() converts the captured rows into local absolute positions. The live free-X placement and responsive presentation scaling remain in one coordinate system. */ #matchPanel.normal-okey.table-theme-modern-vip #handTiles { display: grid !important; grid-template-columns: repeat(8, minmax(0, 1fr)) !important; grid-template-rows: repeat(2, 61px) !important; grid-auto-flow: row !important; align-items: stretch !important; align-content: flex-end !important; row-gap: 3px !important; column-gap: 4px !important; overflow: visible !important; } #matchPanel.normal-okey.table-theme-modern-vip #handTiles > .rack-slot { display: flex !important; width: 44px !important; min-width: 44px !important; height: 61px !important; min-height: 61px !important; justify-self: center !important; align-self: stretch !important; } /* MODERN_VIP_RACK_TWO_ROW_CHANNEL_FIX_END */ /* MODERN_VIP_DISCARD_STACKING_FIX_START seat-discard hosts are children of the play-area stacking context. Raising only the parent context makes all four latest discards paint above the table decoration/legacy seat layers while preserving the real drawable latest tile and its viewer-relative mapping. Absolute positioning keeps the canonical presentation coordinates under the single parent transform. */ #matchPanel.normal-okey.table-theme-modern-vip .nok-center-play-area { z-index: 26 !important; } #matchPanel.normal-okey.table-theme-modern-vip .seat-discards { position: absolute !important; z-index: 28 !important; overflow: visible !important; pointer-events: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .seat-discards > .modern-discard-stack, #matchPanel.normal-okey.table-theme-modern-vip .modern-discard-stack > .board-tile[data-modern-discard-face="latest"] { z-index: 31 !important; } #matchPanel.normal-okey.table-theme-modern-vip .modern-discard-stack > .board-tile[data-modern-discard-face="latest"] { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* MODERN_VIP_DISCARD_STACKING_FIX_END */ /* MODERN_VIP_TABLE_GHOST_LAYER_FIX_START Keep the authoritative stock/indicator/discard DOM and labels, but remove only the obsolete live backdrop/pseudo paints that duplicate the approved reference surface. */ #matchPanel.normal-okey.table-theme-modern-vip .nok-center-play-area::before, #matchPanel.normal-okey.table-theme-modern-vip .nok-center-play-area::after, #matchPanel.normal-okey.table-theme-modern-vip .nok-center::before, #matchPanel.normal-okey.table-theme-modern-vip .nok-center::after, #matchPanel.normal-okey.table-theme-modern-vip .nok-pile-box::before, #matchPanel.normal-okey.table-theme-modern-vip .nok-pile-box::after, #matchPanel.normal-okey.table-theme-modern-vip .center-indicator::before, #matchPanel.normal-okey.table-theme-modern-vip .center-indicator::after, #matchPanel.normal-okey.table-theme-modern-vip .nok-discard-center::before, #matchPanel.normal-okey.table-theme-modern-vip .nok-discard-center::after { display: none !important; content: none !important; background: none !important; box-shadow: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-pile-box, #matchPanel.normal-okey.table-theme-modern-vip .center-indicator, #matchPanel.normal-okey.table-theme-modern-vip .nok-discard-center { background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; } /* MODERN_VIP_TABLE_GHOST_LAYER_FIX_END */ /* MODERN_VIP_WAITING_BOARD_VISIBILITY_START Empty center hosts are present in the shared markup, but they are not gameplay visuals. Keep them hidden until an authoritative active Okey phase has opted the panel into the live board state. */ #matchPanel.normal-okey.table-theme-modern-vip:not([data-normal-okey-board-state="active"]) .nok-pile-box, #matchPanel.normal-okey.table-theme-modern-vip:not([data-normal-okey-board-state="active"]) .center-indicator, #matchPanel.normal-okey.table-theme-modern-vip:not([data-normal-okey-board-state="active"]) .nok-discard-center, #matchPanel.normal-okey.table-theme-modern-vip:not([data-normal-okey-board-state="active"]) .seat-discards { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* MODERN_VIP_WAITING_BOARD_VISIBILITY_END */ /* MODERN_VIP_DISCARD_LABEL_CLEANUP_START The approved VIP surface already carries the discard-area caption. Keep the authoritative discard host and its real tile stack, but remove only the duplicate live labels from this theme. */ #matchPanel.normal-okey.table-theme-modern-vip .nok-discard-center > small, #matchPanel.normal-okey.table-theme-modern-vip .nok-discard-center > .nok-discard-help { display: none !important; } /* MODERN_VIP_DISCARD_LABEL_CLEANUP_END */ /* MODERN_VIP_FLIPPED_TILE_BACK_FIX_START The shared rule hides the real face and leaves a small 68% pseudo-image; VIP has no team back-image variable, so that path renders as a dark/empty ghost. Reuse the existing neutral back treatment as one complete tile surface, remove the undersized pseudo-image, and do not rotate/reposition the rack item. */ #matchPanel.normal-okey.table-theme-modern-vip #handTiles .tile.flipped { position: relative !important; transform: none !important; transform-origin: center !important; opacity: 1 !important; filter: none !important; 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; } #matchPanel.normal-okey.table-theme-modern-vip #handTiles .tile.flipped > img { visibility: hidden !important; } #matchPanel.normal-okey.table-theme-modern-vip #handTiles .tile.flipped::before { content: "" !important; display: block !important; position: absolute !important; inset: 3px !important; border: 2px solid rgba(155,126,80,.28) !important; border-radius: 5px !important; 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)) !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 100% 100% !important; box-shadow: inset 0 0 0 2px rgba(255,255,255,.28) !important; transform: none !important; pointer-events: none !important; } #matchPanel.normal-okey.table-theme-modern-vip #handTiles .tile.flipped::after { content: none !important; display: none !important; } #matchPanel.normal-okey.table-theme-modern-vip #handTiles .tile.flipped.selected { transform: translateY(-6px) !important; } /* A flipped atlas tile must have exactly one paint source. The atlas face is removed by app.js and this state suppresses the legacy glossy pseudo-layer so it cannot leak numbers or create the old lamp-like glow over the back. */ #matchPanel.normal-okey.table-theme-modern-vip #handTiles .tile.flipped[data-flipped-back="true"]::before, #matchPanel.normal-okey.table-theme-modern-vip #handTiles .tile.flipped[data-flipped-back="true"]::after { content: none !important; display: none !important; background: none !important; box-shadow: none !important; } #matchPanel.normal-okey.table-theme-modern-vip #handTiles .tile.flipped[data-flipped-back="true"] > img { display: none !important; visibility: hidden !important; } /* MODERN_VIP_FLIPPED_TILE_BACK_FIX_END */ /* MODERN_VIP_PROFILE_CANONICAL_ALIGNMENT_START The shared Normal Okey station rules leave translateX/translateY on the four station shells. That legacy transform moves the live .player-seat subtree away from the baked gold-ring/black-panel slots even when the child offsets themselves are correct. Reset the containing blocks first, then use only station-relative coordinates in the fixed 1498x1050 presentation plane. The parent presentation supplies responsive scale. Only the VIP theme is touched; seat mapping and renderParticipants remain authoritative. */ #matchPanel.normal-okey.table-theme-modern-vip .nok-station-top, #matchPanel.normal-okey.table-theme-modern-vip .nok-station-right, #matchPanel.normal-okey.table-theme-modern-vip .nok-station-bottom, #matchPanel.normal-okey.table-theme-modern-vip .nok-station-left { position: absolute !important; inset: auto !important; margin: 0 !important; transform: none !important; translate: none !important; overflow: visible !important; z-index: 20 !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-station-top { left: 465px !important; top: -91px !important; width: 300px !important; height: 84px !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-station-right { left: 911px !important; top: 125px !important; width: 205px !important; height: 84px !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-station-bottom { left: 465px !important; top: 270px !important; width: 300px !important; height: 84px !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-station-left { left: 0 !important; top: 125px !important; width: 216px !important; height: 84px !important; } /* The approved surface already paints the empty-seat/rack decoration. Keep one live avatar and one live identity block per occupied seat; do not let the legacy opponent-rack presentation become a second profile card. */ #matchPanel.normal-okey.table-theme-modern-vip .player-seat > .opponent-rack { display: none !important; visibility: hidden !important; pointer-events: none !important; } /* MODERN_VIP_PROFILE_CANONICAL_ALIGNMENT_END */ /* Royal Ivory direct assets keep their native 44x61 ratio inside the existing Modern VIP footprints; no crop or stretch is allowed. */ #matchPanel.normal-okey.table-theme-modern-vip { --vip-tile-back-image: url("/okey/tiles/modern-vip/royal-ivory-back.png"); } #matchPanel.normal-okey.table-theme-modern-vip #handTiles .tile.tile-asset > img, #matchPanel.normal-okey.table-theme-modern-vip .board-tile.tile-asset > img, #matchPanel.normal-okey.table-theme-modern-vip .center-indicator-tile.tile-asset > img, #matchPanel.normal-okey.table-theme-modern-vip .modern-single-stock-indicator > img { object-fit: contain !important; object-position: center !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-pile-box .stock-stack-image[data-modern-vip-back="true"], #matchPanel.normal-okey.table-theme-modern-vip .nok-pile-box .stock-stack-source-five-base[data-modern-vip-back="true"] { object-fit: contain !important; object-position: center !important; background: transparent !important; } /* MODERN_VIP_DISCARD_HISTORY_FACE_GUARD_START Keep every real discard element in the single stack for history, count, and server-state ownership. History faces use the same Royal Ivory asset as the latest face and expose only a controlled 1-2px edge; the stack remains overflow-visible for the real count label. The latest face remains the only drawable, fully sized, interactive tile. */ #matchPanel.normal-okey.table-theme-modern-vip .modern-discard-stack > .board-tile[data-modern-discard-face="history"] { visibility: visible !important; opacity: 1 !important; pointer-events: none !important; transform: translate( calc(var(--discard-depth, 0) * 1px), calc(var(--discard-depth, 0) * -1px) ) !important; background: transparent !important; } #matchPanel.normal-okey.table-theme-modern-vip .modern-discard-stack > .board-tile[data-modern-discard-face="latest"] { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; transform: none !important; } /* MODERN_VIP_DISCARD_HISTORY_FACE_GUARD_END */ /* MODERN_VIP_PLAYER_TEXT_VERTICAL_NUDGE_START Move only the four live nickname and score text nodes two CSS pixels upward. Relative positioning preserves each existing inline x geometry; avatar, card, helper text, and station coordinates remain untouched. */ #matchPanel.normal-okey.table-theme-modern-vip .nok-station-top > #seat3 > .seat-identity > strong, #matchPanel.normal-okey.table-theme-modern-vip .nok-station-right > #seat2 > .seat-identity > strong, #matchPanel.normal-okey.table-theme-modern-vip .nok-station-bottom > #seat1 > .seat-identity > strong, #matchPanel.normal-okey.table-theme-modern-vip .nok-station-left > #seat4 > .seat-identity > strong, #matchPanel.normal-okey.table-theme-modern-vip .nok-station-top > #seat3 > .seat-identity > .player-score, #matchPanel.normal-okey.table-theme-modern-vip .nok-station-right > #seat2 > .seat-identity > .player-score, #matchPanel.normal-okey.table-theme-modern-vip .nok-station-bottom > #seat1 > .seat-identity > .player-score, #matchPanel.normal-okey.table-theme-modern-vip .nok-station-left > #seat4 > .seat-identity > .player-score { position: relative !important; top: -2px !important; } /* MODERN_VIP_PLAYER_TEXT_VERTICAL_NUDGE_END */ /* MODERN_VIP_STOCK_TURN_AND_TABLE_INFO_FINAL_GUARD_START Final VIP-only presentation owner. The shared Normal Okey active-seat rules include a nickname scale and a large glow; those effects repaint the whole composite surface when the active seat changes. Keep the active class and a small avatar outline as the turn cue, but remove geometry, opacity, filter, animation, and full-card glow changes from VIP. The measured table-info slots are also isolated from the status/control band so the older grid/101px declarations cannot re-enter the live surface. */ #matchPanel.normal-okey.table-theme-modern-vip .player-seat, #matchPanel.normal-okey.table-theme-modern-vip .player-seat > .seat-avatar, #matchPanel.normal-okey.table-theme-modern-vip .player-seat > .seat-identity, #matchPanel.normal-okey.table-theme-modern-vip .player-seat > .opponent-rack { animation: none !important; transition: none !important; filter: none !important; opacity: 1 !important; } #matchPanel.normal-okey.table-theme-modern-vip .player-seat.active { border-color: transparent !important; background: transparent !important; box-shadow: none !important; transform: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .player-seat.active::before { display: none !important; content: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .player-seat.active > .seat-avatar { transform: none !important; outline: 2px solid #f3b84c !important; outline-offset: 2px !important; box-shadow: 0 0 0 2px #050608 !important; } #matchPanel.normal-okey.table-theme-modern-vip .player-seat.active > .seat-identity > strong { color: #fff5df !important; transform: none !important; filter: none !important; text-shadow: none !important; } /* MODERN_VIP_TURN_GLOW_STATIC_START Keep the VIP turn cue unmistakable without reintroducing the legacy pulse: one authoritative .active seat gets a static gold halo, while inactive avatars have no residual highlight. */ #matchPanel.normal-okey.table-theme-modern-vip .player-seat.active > .seat-avatar { outline: 2px solid #f3b84c !important; outline-offset: 2px !important; box-shadow: 0 0 0 2px #050608, 0 0 12px rgba(243, 184, 76, .86), 0 0 24px rgba(243, 184, 76, .42) !important; } #matchPanel.normal-okey.table-theme-modern-vip .player-seat:not(.active) > .seat-avatar { outline: none !important; box-shadow: none !important; } /* MODERN_VIP_TURN_GLOW_STATIC_END */ #matchPanel.normal-okey.table-theme-modern-vip .nok-left-column, #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel { box-sizing: border-box !important; height: 81px !important; min-height: 81px !important; max-height: 81px !important; overflow: hidden !important; contain: layout paint !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl { position: absolute !important; inset: 0 !important; display: block !important; width: 100% !important; height: 81px !important; margin: 0 !important; overflow: hidden !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(1), #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(3), #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(4), #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(6) { box-sizing: border-box !important; display: block !important; position: absolute !important; height: 20px !important; min-height: 20px !important; max-height: 20px !important; margin: 0 !important; overflow: hidden !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dd { box-sizing: border-box !important; display: block !important; height: 20px !important; min-height: 20px !important; max-height: 20px !important; margin: 0 !important; padding: 1px 4px !important; overflow: hidden !important; line-height: 18px !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* MODERN_VIP_STOCK_TURN_AND_TABLE_INFO_FINAL_GUARD_END */ /* MODERN_VIP_VISIBLE_STOCK_INDICATOR_EQUALIZATION_START The shared modern presentation gives the visible indicator a 42x58 box but leaves the Royal Ivory draw-back at a larger responsive footprint. Both assets are native 44x61 tiles; keep the group/handlers intact and give the two visible tile children the same undistorted viewport box. The runtime counter remains independently positioned by app.js. */ @media (min-width: 901px) { #matchPanel.normal-okey.table-theme-modern-vip[data-stock-presentation="modern"] .nok-pile-box[data-modern-single-stack="true"] > .nok-draw-stack.modern-stock-indicator-count-group { width: calc(44px + 44px + clamp(5px, .48vw, 8px)) !important; min-width: calc(44px + 44px + clamp(5px, .48vw, 8px)) !important; height: 61px !important; min-height: 61px !important; } #matchPanel.normal-okey.table-theme-modern-vip[data-stock-presentation="modern"] .nok-pile-box[data-modern-single-stack="true"] > .nok-draw-stack.modern-stock-indicator-count-group > .modern-single-stock-indicator, #matchPanel.normal-okey.table-theme-modern-vip[data-stock-presentation="modern"] .nok-pile-box[data-modern-single-stack="true"] > .nok-draw-stack.modern-stock-indicator-count-group > .stock-stack-image.stock-stack-single { flex: 0 0 44px !important; width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 61px !important; min-height: 61px !important; max-height: 61px !important; aspect-ratio: 44 / 61 !important; object-fit: contain !important; } } /* MODERN_VIP_VISIBLE_STOCK_INDICATOR_EQUALIZATION_END */ /* MODERN_VIP_SOURCE5_DIRECT_INDICATOR_EQUALIZATION_START If the five-stack presentation is selected, the open indicator is still rendered in the authoritative final stack. Modern VIP uses the same Royal Ivory PNG for that face and the common back, both inside the existing source-five footprint; no traversal or stack geometry is changed. */ #matchPanel.normal-okey.table-theme-modern-vip .stock-stack-source-five > .stock-stack-source-five-base[data-modern-vip-back="true"] { 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; } #matchPanel.normal-okey.table-theme-modern-vip .stock-stack-source-five > .modern-vip-source-five-indicator-face { position: absolute !important; inset: 0 !important; display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; aspect-ratio: auto !important; overflow: hidden !important; pointer-events: none !important; z-index: 2 !important; line-height: 0 !important; } #matchPanel.normal-okey.table-theme-modern-vip .stock-stack-source-five > .modern-vip-source-five-indicator-face > .modern-vip-source-five-indicator-image { 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; } /* MODERN_VIP_SOURCE5_DIRECT_INDICATOR_EQUALIZATION_END */ /* MODERN_VIP_DISCARD_ASSET_FACE_CLEANUP_START Shared tile-surface rules paint a white ceramic ::before/::after layer on every .board-tile. That layer sits above Royal Ivory discard PNGs and was the pale fragment seen beneath the blue latest tile. Remove only that decorative layer for the authoritative VIP discard stack; history DOM, z-order, one-pixel depth and the latest-tile click handler remain intact. */ #matchPanel.normal-okey.table-theme-modern-vip .modern-discard-stack > .board-tile::before, #matchPanel.normal-okey.table-theme-modern-vip .modern-discard-stack > .board-tile::after { content: none !important; display: none !important; background: none !important; box-shadow: none !important; border: 0 !important; } #matchPanel.normal-okey.table-theme-modern-vip .modern-discard-stack > .board-tile.tile-asset { background: transparent !important; background-image: none !important; border-color: transparent !important; box-shadow: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .modern-discard-stack > .board-tile.tile-asset > img { display: block !important; width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center !important; } /* MODERN_VIP_DISCARD_ASSET_FACE_CLEANUP_END */ /* MODERN_VIP_TABLE_INFO_NON_OVERLAP_START The live values are the four dynamic cells in the approved top card. Earlier VIP layers first create a two-column grid and later absolutely position the same cells; that mixed containing-block contract is what lets a long value paint into its neighbour. Keep the 81px measured panel and place the four live cells in a bounded, responsive 2x2 grid. */ #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl { position: absolute !important; left: 10px !important; right: 10px !important; top: 31px !important; bottom: auto !important; width: auto !important; height: 41px !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-template-rows: repeat(2, 20px) !important; column-gap: 16px !important; row-gap: 1px !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(1), #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(3), #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(4), #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(6) { position: static !important; grid-column: auto !important; grid-row: auto !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: 20px !important; min-height: 20px !important; max-height: 20px !important; display: block !important; overflow: hidden !important; margin: 0 !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(1) { grid-column: 1 !important; grid-row: 1 !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(3) { grid-column: 1 !important; grid-row: 2 !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(4) { grid-column: 2 !important; grid-row: 1 !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(6) { grid-column: 2 !important; grid-row: 2 !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(1) dt, #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(3) dt, #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(4) dt, #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(6) dt { display: none !important; visibility: hidden !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(1) dd, #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(3) dd, #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(4) dd, #matchPanel.normal-okey.table-theme-modern-vip .nok-info-panel dl > div:nth-child(6) dd { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 20px !important; min-height: 20px !important; max-height: 20px !important; box-sizing: border-box !important; margin: 0 !important; padding: 1px 4px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; line-height: 18px !important; } /* MODERN_VIP_TABLE_INFO_NON_OVERLAP_END */ /* MODERN_VIP_DISCARD_SINGLE_STACK_FINAL_START One final VIP owner for all four discard stacks. Every history face uses the same tile asset as the latest face, shares its 44x61 anchor, and shows at most a two-pixel measured depth. The latest face remains full-size and drawable; no discard data is removed. */ #matchPanel.normal-okey.table-theme-modern-vip .modern-discard-stack { position: relative !important; width: 44px !important; min-width: 44px !important; height: 61px !important; min-height: 61px !important; overflow: visible !important; isolation: isolate !important; } #matchPanel.normal-okey.table-theme-modern-vip .modern-discard-stack > .board-tile[data-modern-discard-face="history"], #matchPanel.normal-okey.table-theme-modern-vip .modern-discard-stack > .board-tile[data-modern-discard-face="latest"] { position: absolute !important; inset: 0 !important; width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 61px !important; min-height: 61px !important; max-height: 61px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; visibility: visible !important; opacity: 1 !important; background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .modern-discard-stack > .board-tile[data-modern-discard-face="history"] { pointer-events: none !important; z-index: var(--discard-z-index, 1) !important; transform: translate( calc(var(--discard-depth, 0) * 1px), calc(var(--discard-depth, 0) * -1px) ) !important; } #matchPanel.normal-okey.table-theme-modern-vip .modern-discard-stack > .board-tile[data-modern-discard-face="latest"] { pointer-events: auto !important; z-index: 31 !important; transform: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .modern-discard-stack > .board-tile[data-modern-discard-face="history"]::before, #matchPanel.normal-okey.table-theme-modern-vip .modern-discard-stack > .board-tile[data-modern-discard-face="history"]::after, #matchPanel.normal-okey.table-theme-modern-vip .modern-discard-stack > .board-tile[data-modern-discard-face="latest"]::before, #matchPanel.normal-okey.table-theme-modern-vip .modern-discard-stack > .board-tile[data-modern-discard-face="latest"]::after { content: none !important; display: none !important; background: none !important; border: 0 !important; box-shadow: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .modern-discard-stack > .board-tile[data-modern-discard-face="history"] > img, #matchPanel.normal-okey.table-theme-modern-vip .modern-discard-stack > .board-tile[data-modern-discard-face="latest"] > img { 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; } /* MODERN_VIP_DISCARD_SINGLE_STACK_FINAL_END */ /* MODERN_VIP_STOCK_VISIBLE_SIZE_POSITION_LOCK_START Keep the current indicator as the measurement source. The draw face gets the measured indicator footprint, while both child centers and the pile host remain at their existing presentation-local coordinates. */ @media (min-width: 901px) { #matchPanel.normal-okey.table-theme-modern-vip[data-stock-presentation="modern"] .nok-pile-box[data-modern-single-stack="true"] > .nok-draw-stack.modern-stock-indicator-count-group.modern-vip-stock-geometry-locked { position: absolute !important; left: var(--mvip-stock-stack-left) !important; top: var(--mvip-stock-stack-top) !important; display: block !important; width: var(--mvip-stock-group-width) !important; min-width: var(--mvip-stock-group-width) !important; max-width: var(--mvip-stock-group-width) !important; height: var(--mvip-stock-group-height) !important; min-height: var(--mvip-stock-group-height) !important; max-height: var(--mvip-stock-group-height) !important; overflow: visible !important; } #matchPanel.normal-okey.table-theme-modern-vip[data-stock-presentation="modern"] .nok-pile-box[data-modern-single-stack="true"] > .nok-draw-stack.modern-stock-indicator-count-group.modern-vip-stock-geometry-locked > .stock-stack-image.stock-stack-single { position: absolute !important; left: var(--mvip-stock-draw-left) !important; top: var(--mvip-stock-draw-top) !important; flex: 0 0 auto !important; width: var(--mvip-stock-tile-width) !important; min-width: var(--mvip-stock-tile-width) !important; max-width: var(--mvip-stock-tile-width) !important; height: var(--mvip-stock-tile-height) !important; min-height: var(--mvip-stock-tile-height) !important; max-height: var(--mvip-stock-tile-height) !important; aspect-ratio: auto !important; object-fit: contain !important; margin: 0 !important; } #matchPanel.normal-okey.table-theme-modern-vip[data-stock-presentation="modern"] .nok-pile-box[data-modern-single-stack="true"] > .nok-draw-stack.modern-stock-indicator-count-group.modern-vip-stock-geometry-locked > .modern-single-stock-indicator { position: absolute !important; left: var(--mvip-stock-indicator-left) !important; top: var(--mvip-stock-indicator-top) !important; margin: 0 !important; } } /* MODERN_VIP_STOCK_VISIBLE_SIZE_POSITION_LOCK_END */ /* MODERN_VIP_REFERENCE_STOCK_TARGET_START The supplied 1259x890 reference is rendered through the existing width-fit presentation scale min(1259/1498, 890/1050). The red target-box centers land at approximately (550,437) and (618,435) in the 1498x1050 presentation plane. Anchor the draw face around the first center and keep the indicator at the second center; the shared stock group remains one authoritative position target. the counter stays independently aligned by app.js, and the locked branch below preserves the measured coordinates on every later render/resize. */ @media (min-width: 901px) { #matchPanel.normal-okey.table-theme-modern-vip[data-stock-presentation="modern"] .nok-pile-box[data-modern-single-stack="true"] > .nok-draw-stack.modern-stock-indicator-count-group:not(.modern-vip-stock-geometry-locked) { position: fixed !important; left: 528px !important; top: 406px !important; display: block !important; height: 61px !important; min-height: 61px !important; overflow: visible !important; } #matchPanel.normal-okey.table-theme-modern-vip[data-stock-presentation="modern"] .nok-pile-box[data-modern-single-stack="true"] > .nok-draw-stack.modern-stock-indicator-count-group:not(.modern-vip-stock-geometry-locked) > .stock-stack-image.stock-stack-single { position: absolute !important; left: 0 !important; top: 0 !important; } #matchPanel.normal-okey.table-theme-modern-vip[data-stock-presentation="modern"] .nok-pile-box[data-modern-single-stack="true"] > .nok-draw-stack.modern-stock-indicator-count-group:not(.modern-vip-stock-geometry-locked) > .modern-single-stock-indicator { position: absolute !important; left: 68px !important; top: -2px !important; } } /* MODERN_VIP_REFERENCE_STOCK_TARGET_END */ /* MODERN_VIP_STATIC_TABLE_SURFACE_NO_FLASH_START The VIP board is a fixed decorative surface. Turn changes still update the authoritative .active seat class, but no table-surface layer should animate, transition, or run a compositor filter during that repaint. The gold border and static box-shadows remain the visual light source. */ #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation, #matchPanel.normal-okey.table-theme-modern-vip .nok-table-stage, #matchPanel.normal-okey.table-theme-modern-vip .nok-table, #matchPanel.normal-okey.table-theme-modern-vip #gameBoard, #matchPanel.normal-okey.table-theme-modern-vip .nok-visual-furniture-shell { animation: none !important; transition: none !important; will-change: auto !important; } #matchPanel.normal-okey.table-theme-modern-vip #gameBoard, #matchPanel.normal-okey.table-theme-modern-vip #gameBoard::before, #matchPanel.normal-okey.table-theme-modern-vip #gameBoard::after, #matchPanel.normal-okey.table-theme-modern-vip .nok-visual-furniture-shell { animation: none !important; transition: none !important; filter: none !important; } /* MODERN_VIP_STATIC_TABLE_SURFACE_NO_FLASH_END */ /* MODERN_VIP_LEGACY_INDICATOR_AND_DISCARD_FLASH_GUARD_START The compact VIP stock owns its live indicator inside .nok-draw-stack. The old #centerIndicator host is still state-rendered for the shared layout and aria-hidden alone does not suppress its cream .center-indicator-tile paint. Remove that legacy paint only in the compact VIP presentation. The shared drawable pulse likewise belongs to the generic chat/discard contract; keep the discard button and click handler, but remove its animated outer paint for VIP discards. */ #matchPanel.normal-okey.table-theme-modern-vip[data-stock-presentation="modern"] #centerIndicator[aria-hidden="true"] { display: none !important; visibility: hidden !important; pointer-events: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .modern-discard-stack > .board-tile.tile-asset.drawable, #matchPanel.normal-okey.table-theme-modern-vip .modern-discard-stack > .board-tile.tile-asset.drawable:focus, #matchPanel.normal-okey.table-theme-modern-vip .modern-discard-stack > .board-tile.tile-asset.drawable:focus-visible { animation: none !important; animation-composition: replace !important; transition: none !important; filter: none !important; opacity: 1 !important; border-color: transparent !important; outline: none !important; outline-offset: 0 !important; box-shadow: none !important; } /* MODERN_VIP_LEGACY_INDICATOR_AND_DISCARD_FLASH_GUARD_END */ /* STAGE MODERN_VIP_TWO_STAGE_EXIT_BUTTON_START The existing OYUNU BIRAK hitbox becomes MASADAN KALK only after the server has acknowledged the forfeit and the authoritative viewer state still owns a retained seat. The separate legacy stand node is hidden on this theme so Modern VIP never presents a second stand-up button. */ #matchPanel.normal-okey.table-theme-modern-vip .nok-live-actions > #standTableButton { display: none !important; visibility: hidden !important; pointer-events: none !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .modern-vip-action-dock > #forfeitTableButton[data-modern-vip-action="stand"] { display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; border: 1px solid #d28b2e !important; border-radius: 8px !important; background: linear-gradient(145deg, #5b3317, #090b0e 72%, #030405) !important; box-shadow: inset 0 1px rgba(255, 230, 166, .2), 0 5px 12px rgba(0, 0, 0, .58) !important; color: #fff0c7 !important; font-size: 0 !important; text-indent: 0 !important; text-shadow: none !important; pointer-events: auto !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .modern-vip-action-dock > #forfeitTableButton[data-modern-vip-action="stand"]::before { display: block !important; content: attr(data-modern-vip-label) !important; color: inherit !important; font: 900 11px/1.05 Calibri, Carlito, Arial, sans-serif !important; letter-spacing: .04em !important; text-align: center !important; white-space: nowrap !important; } #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .modern-vip-action-dock > #forfeitTableButton[data-modern-vip-action="stand"]:hover, #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .modern-vip-action-dock > #forfeitTableButton[data-modern-vip-action="stand"]:focus-visible { border-color: #28b9f4 !important; box-shadow: 0 0 12px #28b9f455, inset 0 1px #fff8 !important; } /* STAGE MODERN_VIP_TWO_STAGE_EXIT_BUTTON_END */ #matchPanel.normal-okey.table-theme-modern-vip > .nok-presentation > .modern-vip-action-dock > #forfeitTableButton[data-modern-vip-action="stand"]::after { display: block !important; content: attr(data-modern-vip-icon) !important; color: inherit !important; font: 900 16px/1 Calibri, Carlito, Arial, sans-serif !important; margin-top: 2px !important; } /* STAGE MODERN_VIP_LEGACY_TOP_STRIP_CLEANUP_START The shared Normal Okey header/status DOM remains mounted for lifecycle and accessibility. Modern VIP removes only the legacy paint and controls; the live turn/phase/timer card remains available in a compact black/gold shell. */ #matchPanel.normal-okey.table-theme-modern-vip .normal-okey-header, #matchPanel.normal-okey.table-theme-modern-vip .nok-topbar { background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .normal-okey-header > .normal-okey-nav, #matchPanel.normal-okey.table-theme-modern-vip .normal-okey-header > .normal-okey-session, #matchPanel.normal-okey.table-theme-modern-vip .normal-okey-header > .nok-top-controls, #matchPanel.normal-okey.table-theme-modern-vip .nok-topbar > .normal-okey-nav, #matchPanel.normal-okey.table-theme-modern-vip .nok-topbar > .normal-okey-session, #matchPanel.normal-okey.table-theme-modern-vip .nok-topbar > .nok-top-controls { display: none !important; visibility: hidden !important; pointer-events: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-statusbar { background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; } #matchPanel.normal-okey.table-theme-modern-vip .nok-statusbar > .nok-game-status-panel { border: 1px solid #9c7636 !important; border-radius: 6px !important; background: linear-gradient(145deg, #151b20, #05070a 76%) !important; box-shadow: inset 0 0 0 1px #ffe6a122, 0 7px 16px #000a !important; } /* STAGE MODERN_VIP_LEGACY_TOP_STRIP_CLEANUP_END */ /* STAGE MODERN_VIP_TILE_THEME_PICKER_START Personal tile-set selection is a local presentation control. It shares the existing private-room settings surface and is not mounted in the global theme/lobby controls, so Classic and other table themes keep their DOM and geometry unchanged. */ #privateRoomPanel #modernVipTileThemePicker:not([hidden]):not(.hidden) { position: relative !important; inset: auto !important; width: 100% !important; min-width: 0 !important; max-width: none !important; min-height: 66px !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; gap: 4px !important; margin: 4px 0 0 !important; padding: 6px 8px !important; border: 1px solid #9c7636 !important; border-radius: 7px !important; background: linear-gradient(145deg, rgba(20, 25, 30, .96), rgba(4, 7, 10, .97)) !important; box-shadow: inset 0 0 0 1px #ffe6a122, 0 7px 16px #000a !important; color: #ffe9b1 !important; overflow: hidden !important; pointer-events: auto !important; z-index: 3 !important; } #privateRoomPanel #modernVipTileThemePicker[hidden], #privateRoomPanel #modernVipTileThemePicker.hidden { display: none !important; pointer-events: none !important; } #privateRoomPanel #modernVipTileThemePicker .modern-vip-tile-theme-heading { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; min-width: 0 !important; font: 800 9px/1 Calibri, Carlito, Arial, sans-serif !important; letter-spacing: .08em !important; text-transform: uppercase !important; } #privateRoomPanel #modernVipTileThemePicker .modern-vip-tile-theme-heading span { max-width: 184px !important; overflow: hidden !important; color: #b8c2ca !important; font-size: 8px !important; font-weight: 600 !important; letter-spacing: .02em !important; text-overflow: ellipsis !important; white-space: nowrap !important; text-transform: none !important; } #privateRoomPanel #modernVipTileThemePicker .modern-vip-tile-theme-options { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 4px !important; min-width: 0 !important; } #privateRoomPanel #modernVipTileThemePicker .modern-vip-tile-theme-option { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 4px !important; min-width: 0 !important; height: 31px !important; padding: 2px 4px !important; border: 1px solid #6b7780 !important; border-radius: 4px !important; background: #070a0d !important; color: #d5dde3 !important; cursor: pointer !important; font: 700 8px/1.05 Calibri, Carlito, Arial, sans-serif !important; overflow: hidden !important; pointer-events: auto !important; text-align: left !important; } #privateRoomPanel #modernVipTileThemePicker .modern-vip-tile-theme-option:hover, #privateRoomPanel #modernVipTileThemePicker .modern-vip-tile-theme-option:focus-visible, #privateRoomPanel #modernVipTileThemePicker .modern-vip-tile-theme-option.is-selected { border-color: #e1a84d !important; color: #fff0c7 !important; box-shadow: 0 0 8px #d28b2e55, inset 0 0 0 1px #ffe6a133 !important; outline: none !important; } #privateRoomPanel #modernVipTileThemePicker .modern-vip-tile-theme-option:disabled { cursor: wait !important; opacity: .64 !important; } #privateRoomPanel #modernVipTileThemePicker .modern-vip-tile-theme-option img { width: 22px !important; height: 25px !important; flex: 0 0 22px !important; border-radius: 2px !important; object-fit: cover !important; object-position: left top !important; background: #f4ead7 !important; pointer-events: none !important; } #privateRoomPanel #modernVipTileThemePicker .modern-vip-tile-theme-option span { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #privateRoomPanel #modernVipTileThemePicker .modern-vip-tile-theme-message { min-height: 9px !important; margin: 0 !important; overflow: hidden !important; color: #9eabb3 !important; font: 600 8px/1 Calibri, Carlito, Arial, sans-serif !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #privateRoomPanel #modernVipTileThemePicker .modern-vip-tile-theme-message.is-error { color: #ffb39e !important; } #privateRoomPanel.modern-vip-reference-window #modernVipTileThemePicker:not([hidden]):not(.hidden) { position: absolute !important; left: 6% !important; right: 6% !important; top: 50% !important; width: 88% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; z-index: 3 !important; } @media (max-width: 900px) { #privateRoomPanel #modernVipTileThemePicker:not([hidden]):not(.hidden) { width: 100% !important; min-width: 0 !important; max-width: none !important; } } @media (max-width: 600px) { #privateRoomPanel #modernVipTileThemePicker .modern-vip-tile-theme-options { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* STAGE MODERN_VIP_TILE_THEME_PICKER_END */ /* Modern VIP keeps the chat shell compact while allowing multiline text. */ #matchPanel.normal-okey.table-theme-modern-vip #chatForm > .chat-input-shell { min-height: 44px !important; height: auto !important; } #matchPanel.normal-okey.table-theme-modern-vip #chatForm > .chat-input-shell > textarea[name="message"] { width: 100% !important; min-width: 0 !important; min-height: 44px !important; max-height: 120px !important; box-sizing: border-box !important; resize: vertical !important; padding: 9px 48px 9px 12px !important; border: 1px solid #9c7636 !important; border-radius: 5px !important; color: var(--mvip-text) !important; background: #05070a !important; font: inherit !important; line-height: 1.35 !important; overflow-y: auto !important; } #matchPanel.normal-okey.table-theme-modern-vip #chatForm > .chat-input-shell > textarea[name="message"]:focus, #matchPanel.normal-okey.table-theme-modern-vip #chatForm > .chat-input-shell > textarea[name="message"]:focus-visible { outline: none !important; border-color: #d7a548 !important; box-shadow: 0 0 0 2px rgba(215, 165, 72, .34), inset 0 0 0 1px rgba(255, 228, 154, .16) !important; } /* MODERN_VIP_PREMIUM_GEOMETRY_REPAIR_START The approved Premium reference is 1080x1456. Keep it decorative and put the real controls into its painted slots; the parent remains a viewport- centered dialog so the bottom navigation cannot become its containing block. */ body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="premium-window"] { position: fixed !important; top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%) !important; width: min(521px, calc(100vw - 24px), calc(74.1758vh - 17.8px)) !important; height: auto !important; min-height: 0 !important; max-width: calc(100vw - 24px) !important; max-height: calc(100vh - 24px) !important; aspect-ratio: 1080 / 1456 !important; overflow: hidden !important; z-index: 100 !important; box-sizing: border-box !important; } body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="premium-window"] > #normalOkeyBottomMenuContent { position: absolute !important; inset: 0 !important; overflow: hidden !important; } body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="premium-window"] .modern-vip-private-table-settings { position: absolute !important; inset: 0 !important; display: block !important; width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; overflow: hidden !important; } body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="premium-window"] .modern-vip-private-table-settings > .modern-vip-premium-row { position: absolute !important; left: 48% !important; width: 43% !important; min-width: 0 !important; height: 6.2% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; pointer-events: none !important; z-index: 3 !important; } body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="premium-window"] .modern-vip-premium-row[data-premium-setting="theme"] { top: 23.2% !important; } body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="premium-window"] .modern-vip-premium-row[data-premium-setting="spectator-limit"] { top: 30.2% !important; } body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="premium-window"] .modern-vip-premium-row[data-premium-setting="visibility"] { top: 37.2% !important; } body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="premium-window"] .modern-vip-premium-row[data-premium-setting="table-chat"] { top: 44.2% !important; } body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="premium-window"] .modern-vip-premium-row[data-premium-setting="spectator-chat"] { top: 51.2% !important; } body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="premium-window"] .modern-vip-premium-row[data-premium-setting="auto-open"] { top: 58.2% !important; } body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="premium-window"] .modern-vip-premium-row[data-premium-setting="tile-set"] { top: 65.3% !important; height: 10.4% !important; align-items: stretch !important; } body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="premium-window"] .modern-vip-premium-row-label { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; } body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="premium-window"] .modern-vip-premium-row > .modern-vip-premium-select { position: static !important; width: 100% !important; height: 100% !important; min-height: 0 !important; box-sizing: border-box !important; padding: 0 8px !important; color: #ffe49a !important; background: rgba(4, 6, 8, .9) !important; border: 1px solid #d7a548 !important; border-radius: 5px !important; font-size: clamp(10px, 1.1vw, 14px) !important; pointer-events: auto !important; } body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="premium-window"] .modern-vip-private-table-visibility-actions { position: static !important; width: 100% !important; height: 100% !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 3% !important; pointer-events: auto !important; } body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="premium-window"] .modern-vip-private-table-visibility-actions > .modern-vip-premium-control-hitbox { position: static !important; width: 100% !important; height: 100% !important; } body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="premium-window"] .modern-vip-premium-auto-open-hitbox { position: static !important; width: 100% !important; height: 100% !important; } body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="premium-window"] .modern-vip-premium-unsupported-control { opacity: .82 !important; color: #9aa5ad !important; background: rgba(8, 12, 16, .88) !important; border: 1px solid #6b7780 !important; cursor: not-allowed !important; pointer-events: none !important; } body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="premium-window"] .modern-vip-premium-tile-theme-picker, body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="premium-window"] .modern-vip-premium-tile-theme-options { width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 3px !important; pointer-events: auto !important; } body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="premium-window"] .modern-vip-premium-tile-theme-option { min-width: 0 !important; min-height: 0 !important; width: 100% !important; height: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 2px !important; padding: 2px !important; overflow: hidden !important; color: #d9e2e8 !important; background: rgba(5, 8, 11, .84) !important; border: 1px solid #6b7780 !important; border-radius: 4px !important; font: 700 clamp(6px, .72vw, 10px)/1.05 Calibri, Carlito, Arial, sans-serif !important; pointer-events: auto !important; } body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="premium-window"] .modern-vip-premium-tile-theme-option img { display: block !important; width: auto !important; max-width: 100% !important; height: 58% !important; min-height: 0 !important; object-fit: contain !important; } body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="premium-window"] .modern-vip-premium-tile-theme-option span { max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="premium-window"] .modern-vip-premium-tile-theme-option.is-selected, body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="premium-window"] .modern-vip-premium-tile-theme-option:focus-visible { border-color: #f1c45d !important; box-shadow: 0 0 0 1px #f1c45d, 0 0 8px #d28b2e88 !important; outline: none !important; } body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="premium-window"] .modern-vip-premium-tile-theme-empty { grid-column: 1 / -1 !important; align-self: center !important; color: #9aa5ad !important; font-size: clamp(8px, 1vw, 12px) !important; text-align: center !important; } body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="premium-window"] #normalOkeyBottomMenuContent > .modern-vip-private-table-settings > .modern-vip-premium-cancel, body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="premium-window"] #normalOkeyBottomMenuContent > .modern-vip-private-table-settings > button[type="submit"] { position: absolute !important; bottom: 8.1% !important; height: 7.1% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; color: transparent !important; background: transparent !important; border: 0 !important; box-shadow: none !important; opacity: 0 !important; pointer-events: auto !important; } body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="premium-window"] #normalOkeyBottomMenuContent > .modern-vip-private-table-settings > .modern-vip-premium-cancel { left: 13% !important; width: 31% !important; } body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="premium-window"] #normalOkeyBottomMenuContent > .modern-vip-private-table-settings > button[type="submit"] { right: 9% !important; width: 38% !important; } body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="premium-window"] #normalOkeyBottomMenuContent > .modern-vip-private-table-settings > .modern-vip-premium-cancel:focus-visible, body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="premium-window"] #normalOkeyBottomMenuContent > .modern-vip-private-table-settings > button[type="submit"]:focus-visible { opacity: 1 !important; color: #ffe49a !important; outline: 3px solid #ffe49a !important; outline-offset: -4px !important; } /* The lobby panel keeps its approved absolute content window. It must not inherit the relative reference-surface frame used by the game dialog. */ body:has(#dashboardPrivateTableMenuButton:not([hidden])) #privateRoomPanel.modern-vip-reference-window { position: absolute !important; top: 27.5% !important; right: 5% !important; bottom: 18.4% !important; left: 5% !important; width: auto !important; height: auto !important; min-height: 0 !important; max-width: none !important; max-height: none !important; margin: 0 !important; transform: none !important; z-index: 8 !important; overflow: auto !important; } /* Verified Modern VIP conflict: the shared frame previously changed the message dialog from fixed to relative, allowing it to sit in table flow. */ body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #messageInbox.modern-vip-premium-window[open] { position: fixed !important; top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%) !important; width: min(760px, calc(100vw - 24px)) !important; max-width: calc(100vw - 24px) !important; max-height: min(90vh, 760px) !important; margin: 0 !important; overflow: auto !important; z-index: 130 !important; box-sizing: border-box !important; } @media (max-width: 600px) { body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="premium-window"] { width: min(calc(100vw - 16px), calc(74.1758vh - 17.8px)) !important; } body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="premium-window"] .modern-vip-premium-row { left: 47% !important; width: 44% !important; } body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="premium-window"] .modern-vip-premium-tile-theme-options { gap: 2px !important; } body:has(#matchPanel.normal-okey.table-theme-modern-vip:not(.hidden)) #normalOkeyBottomMenuPanel.modern-vip-reference-window[data-reference-window="premium-window"] .modern-vip-premium-tile-theme-option { font-size: 6px !important; } } /* MODERN_VIP_PREMIUM_GEOMETRY_REPAIR_END */