@layer base, globals, modules, floors; @font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/cinzel-latin-var.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/cinzel-latin-var.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/cinzel-latin-var.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/inter-latin-var.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/inter-latin-var.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @layer floors { button:focus-visible, .btn:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; } } @layer floors { @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms; animation-iteration-count: 1; transition-duration: 0.01ms; scroll-behavior: auto; } } } @layer base{/* Cascade layer order — the single authority on who wins (see vite.config.ts css-layer-wrap and docs/css-z-index-map.md). Later layers win normal declarations regardless of specificity or injection order. */ /* Self-hosted variable fonts (moved from Google Fonts, July 2026 — LCP fix). Latin subsets; single variable file per family covers all used weights. Declared as separate weight blocks for robust cross-browser SVG and text compatibility. */ * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; -webkit-tap-highlight-color: transparent; } :root { /* Core default fonts */ --font-sans: 'Inter', system-ui, sans-serif; --font-serif: 'Cinzel', Georgia, serif; font-family: var(--font-sans); line-height: var(--leading-normal, 1.5); font-weight: var(--weight-normal, 400); color-scheme: light dark; color: rgba(255, 255, 255, 0.87); background-color: #0b110e; font-synthesis: none; /* Team colors - accessible blue/amber pair */ --color-us: #60a5fa; --color-them: #f59e0b; --color-them-dark: #d97706; --color-pass: #ef4444; --color-marks: #f59e0b; --color-gold: #c9910d; --review-win-gold: #fde047; --coaching-bg-start: rgba(234, 179, 8, 0.08); --coaching-bg-end: rgba(234, 179, 8, 0); --color-brand: #1a3070; /* ═══ Player Theme Palette ═══ */ /* Layer 1: Named palette colors (dark defaults) */ --palette-primary: #60a5fa; --palette-primary-dim: rgba(96, 165, 250, 0.15); --palette-primary-border: rgba(96, 165, 250, 0.5); --palette-primary-glow: rgba(96, 165, 250, 0.4); --palette-primary-shadow: 0 0 5px rgba(96, 165, 250, 0.4); --palette-secondary: #f59e0b; --palette-secondary-dim: rgba(245, 158, 11, 0.15); --palette-secondary-border: rgba(245, 158, 11, 0.5); --palette-secondary-glow: rgba(245, 158, 11, 0.4); --palette-secondary-shadow: 0 0 5px rgba(245, 158, 11, 0.4); --palette-tertiary: #a78bfa; --palette-tertiary-dim: rgba(167, 139, 250, 0.15); --palette-tertiary-border: rgba(167, 139, 250, 0.4); --palette-tertiary-glow: rgba(167, 139, 250, 0.4); --palette-tertiary-shadow: 0 0 5px rgba(167, 139, 250, 0.4); /* Light-mode palette variants (concrete values, inherited by light panels) */ --palette-primary-on-light: #2563eb; --palette-primary-dim-on-light: rgba(37, 99, 235, 0.12); --palette-primary-border-on-light: rgba(37, 99, 235, 0.5); --palette-primary-glow-on-light: rgba(37, 99, 235, 0.15); --palette-primary-shadow-on-light: 0 1px 1px rgba(0, 0, 0, 0.1); --palette-secondary-on-light: #b45309; --palette-secondary-dim-on-light: rgba(180, 83, 9, 0.1); --palette-secondary-border-on-light: rgba(180, 83, 9, 0.4); --palette-secondary-glow-on-light: rgba(180, 83, 9, 0.15); --palette-secondary-shadow-on-light: 0 1px 1px rgba(0, 0, 0, 0.1); --palette-tertiary-on-light: #7c3aed; --palette-tertiary-dim-on-light: rgba(124, 58, 237, 0.12); --palette-tertiary-border-on-light: rgba(124, 58, 237, 0.4); --palette-tertiary-glow-on-light: rgba(124, 58, 237, 0.15); --palette-tertiary-shadow-on-light: 0 1px 1px rgba(0, 0, 0, 0.1); /* M10f: Multiplayer rating accent — aged purple */ --mp-accent: #907AB5; --mp-accent-dim: rgba(144, 122, 181, 0.15); /* Z-index scale — canonical stacking order; see docs/css-z-index-map.md */ --z-table: 1; --z-hand: 10; --z-badges: 20; --z-popover: 100; /* dropdowns, context menus, in-screen toasts */ --z-toast-local: 500; /* trick toast, continue gate */ --z-backdrop: 999; --z-modal: 1000; --z-panel: 1100; --z-hand-raised: 1150; /* hand above HUD, below drawers */ --z-scrim: 1199; /* drawer scrim */ --z-drawer: 1200; --z-nav: 1201; --z-kickup: 1300; --z-game-modal: 4000; /* bid / trump / nello modals (canonicalizes the old global 4000 !important) */ --z-game-modal-panel: 4001; --z-review: 1000; /* game review; re-based to 4400 in portrait */ --z-floating-chat: 3000; /* floating chat + spectator popover — fixed, never re-based */ --z-coach: 3500; /* tutorial chrome; desktop slide drawer + chat FAB */ --z-system: 5000; /* top-level modals, install banner, delete flow */ --z-toast-global: 9999; --z-admin: 10000; --z-blocker: 99999; /* landscape blocker */ /* Safe-area insets — single source for env() (value-preserving alias). CONSUMER SET IS A PRODUCT DECISION: game chrome (nav/hand/drawers) is deliberately flush to the physical bottom edge (Android parity, device-confirmed 2026-07-10) while lobby scroll-clearance keeps insets. Alias only — never add or remove a consumer in a refactor. */ --safe-area-top: env(safe-area-inset-top, 0px); --safe-area-bottom: env(safe-area-inset-bottom, 0px); --safe-area-left: env(safe-area-inset-left, 0px); --safe-area-right: env(safe-area-inset-right, 0px); /* Transition durations */ --duration-fast: 150ms; --duration-base: 200ms; --duration-slow: 300ms; --duration-drawer: 220ms; --ease-out: ease-out; --ease-in: ease-in; /* Typography scale */ --text-xs: 10px; --text-sm: 12px; --text-base: 14px; --text-md: 16px; --text-lg: 18px; --text-xl: 24px; --text-2xl: 32px; --text-3xl: 48px; --weight-normal: 400; --weight-bold: 500; --leading-tight: 1.2; --leading-normal: 1.5; --leading-loose: 1.7; --tracking-tight: 0; --tracking-normal: 0.5px; --tracking-wide: 2px; --tracking-widest: 4px; /* Layout */ --tile-width: 56px; --tile-height: calc(var(--tile-width) * 2); --hand-gap: 8px; --hand-pad-y: 24px; --hand-pad-x: 32px; --hand-row-gap: 16px; --panel-padding: 16px; --border-radius-tile: 8px; --border-radius-card: 12px; --border-radius-pill: 20px; --border-radius-button: 8px; --mobile-nav-height: 60px; --hand-padding-bottom: 0px; /* Phase 10: Button Hover Tokens */ --hover-lighten: rgba(255, 255, 255, 0.08); --hover-lighten-strong: rgba(255, 255, 255, 0.14); --hover-darken: rgba(0, 0, 0, 0.12); --hover-duration: 150ms; --active-scale: scale(0.97); --active-duration: 150ms; /* ── Panel Theme Variables (dark glass defaults) ── */ /* Panel Surface */ --panel-bg: rgba(0, 0, 0, 0.55); --panel-blur: 16px; --panel-border: rgba(255, 255, 255, 0.15); --panel-border-top: rgba(255, 255, 255, 0.25); --panel-shadow: 0 10px 40px rgba(0, 0, 0, 0.6); --panel-text: #ffffff; --panel-text-near-black: #ffffff; /* Text Hierarchy */ --panel-heading: #ffffff; --panel-text-secondary: rgba(255, 255, 255, 0.7); --panel-text-muted: rgba(255, 255, 255, 0.4); --panel-label: #fdfbf7; --panel-label-secondary: #ffffff; /* Interactive Elements */ --panel-btn-bg: rgba(255, 255, 255, 0.05); --panel-btn-border: rgba(255, 255, 255, 0.1); --panel-btn-hover-bg: rgba(255, 255, 255, 0.12); --panel-btn-hover-border: rgba(255, 255, 255, 0.6); --panel-btn-active-text: #ffffff; --panel-btn-primary-bg: #f8fafc; --panel-btn-primary-border: transparent; --panel-btn-primary-text: var(--color-brand); --panel-btn-primary-hover-bg: #e2e8f0; --panel-btn-primary-hover-border: transparent; --panel-btn-primary-hover-text: var(--color-brand); --panel-divider: rgba(255, 255, 255, 0.08); --panel-card-bg: rgba(255, 255, 255, 0.06); --panel-card-border: rgba(255, 255, 255, 0.1); --panel-rating-card-bg: linear-gradient(135deg, rgba(201, 145, 13, 0.08), rgba(0, 0, 0, 0.35)); --panel-rating-card-border: rgba(201, 145, 13, 0.2); --panel-segment-active-bg: var(--color-gold); --panel-segment-active-text: #111827; /* Inputs & Dropdowns */ --panel-input-bg: rgba(20, 20, 25, 0.95); --panel-input-border: rgba(255, 255, 255, 0.15); --panel-input-shadow: 0 -10px 40px rgba(0, 0, 0, 0.8); /* Tracks & Meters */ --panel-track-bg: rgba(255, 255, 255, 0.12); --panel-track-remainder: rgba(255, 255, 255, 0.15); --panel-track-inset: none; --panel-ring-inset: rgba(10, 22, 40, 0.5); /* HUD Badges */ --badge-trump-color: #fcd34d; --badge-trump-bg: rgba(252, 211, 77, 0.15); --badge-trump-border: rgba(252, 211, 77, 0.3); --badge-nello-color: #c4b5fd; --badge-nello-bg: rgba(196, 181, 253, 0.15); --badge-nello-border: rgba(196, 181, 253, 0.3); --badge-led-color: #f1f5f9; --badge-led-bg: rgba(226, 232, 240, 0.15); --badge-led-border: rgba(226, 232, 240, 0.3); --badge-contract-color: #93c5fd; --badge-contract-bg: rgba(147, 197, 253, 0.15); --badge-contract-border: rgba(147, 197, 253, 0.3); --badge-turn-color: #6ee7b7; --badge-turn-bg: rgba(110, 231, 183, 0.15); --badge-turn-border: rgba(110, 231, 183, 0.3); --badge-pass-color: #fca5a5; --badge-pass-bg: rgba(252, 165, 165, 0.15); --badge-pass-border: rgba(252, 165, 165, 0.3); --badge-spectator-color: #ffb400; --badge-spectator-bg: rgba(255, 180, 0, 0.15); --badge-spectator-border: rgba(255, 180, 0, 0.3); /* BidSlider */ --bid-label-color: var(--color-gold); --bid-highest-color: rgba(255, 255, 255, 0.6); --bid-pass-bg: rgba(239, 68, 68, 0.2); --bid-pass-border: rgba(239, 68, 68, 0.6); --bid-pass-text: #fca5a5; --bid-pass-hover-bg: rgba(239, 68, 68, 0.32); --bid-pass-hover-border: #ef4444; --bid-pass-hover-text: #ffffff; --bid-pass-active-text: #ffffff; --bid-confirm-border: rgba(255, 255, 255, 0.2); --bid-confirm-text: #ffffff; --bid-confirm-hover-border: rgba(255, 255, 255, 0.7); --bid-confirm-disabled-border: rgba(255, 255, 255, 0.15); --bid-confirm-disabled-text: rgba(255, 255, 255, 0.3); --bid-confirm-dim-border: rgba(255, 255, 255, 0.3); --bid-confirm-dim-text: rgba(255, 255, 255, 0.6); --bid-special-bg: rgba(167, 139, 250, 0.15); --bid-special-border: rgba(167, 139, 250, 0.5); --bid-special-text: #a78bfa; --bid-special-hover-bg: rgba(167, 139, 250, 0.28); --bid-special-hover-border: #a78bfa; --bid-special-hover-text: #ffffff; --bid-special-active-text: #ffffff; --bid-thumb-bg: #ffffff; --bid-thumb-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); --bid-zone-divider: rgba(255, 255, 255, 0.3); --bid-tick-muted: rgba(255, 255, 255, 0.7); --bid-tick-subdued: rgba(255, 255, 255, 0.4); --bid-forced-banner-bg: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(184, 134, 11, 0.1) 100%); --bid-forced-banner-border: rgba(212, 175, 55, 0.35); --bid-forced-banner-text: #ffd700; --bid-forced-banner-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); --bid-forced-banner-pulse: rgba(212, 175, 55, 0.45); /* BidSlider TSX Neutrals */ --panel-neutral-text: #ffffff; --panel-neutral-glow: rgba(255, 255, 255, 0.15); --panel-neutral-progress: #ffffff; --panel-neutral-value: #ffffff; --panel-thumb-border: #ffffff; --panel-muted-text: rgba(255, 255, 255, 0.4); /* Chat & Avatar Panel Settings */ --panel-avatar-bg: rgba(15, 23, 42, 0.4); --chat-sender-color: rgb(var(--theme-accent-rgb, 99, 179, 237)); --chat-bubble-me-bg: rgba(var(--theme-accent-rgb, 99, 179, 237), 0.15); --chat-bubble-me-border: rgba(var(--theme-accent-rgb, 99, 179, 237), 0.25); --chat-settings-active-text: #1a202c; /* Gold Admin Message Settings (Dark glass default) */ --chat-admin-bg: rgba(201, 145, 13, 0.12); --chat-admin-border: rgba(201, 145, 13, 0.35); --chat-admin-text: #ffffff; --chat-admin-text-name: var(--color-gold, #c9910d); --chat-admin-glow: rgba(201, 145, 13, 0.15); } /* Unified Tablet Layout (768px - 1366px) */ @media (min-width: 768px) and (max-width: 1366px) { :root { --tile-width: min(56px, calc((100vw - 140px) / 7)); --tile-height: calc(var(--tile-width) * 2); --hand-gap: 8px; --text-xl: 26px; --text-2xl: 34px; --text-3xl: 46px; } } /* Height-based adjustments for short screens (landscape tablets like Galaxy A9+, small laptops) */ @media (max-height: 849px) and (min-width: 768px) { :root { --tile-width: 46px; --hand-pad-y: 16px; --hand-pad-x: 24px; --hand-row-gap: 12px; --hand-gap: 6px; } } @media (max-height: 719px) and (min-width: 768px) { :root { --tile-width: 40px; --hand-pad-y: 16px; --hand-pad-x: 24px; --hand-row-gap: 12px; --hand-gap: 6px; } } /* Mobile overrides */ @media (max-width: 767px) { :root { --tile-width: min(52px, calc((100vw - 32px) / 7)); --tile-height: calc(var(--tile-width) * 2); --hand-gap: 2px; --text-xl: 20px; --text-2xl: 26px; --text-3xl: 36px; } } /* Phase 10 Universal Interactive Button States. The a11y floors live in the LAST cascade layer (floors) so they beat every component rule without a single !important. A component that must deliberately override a floor joins @layer floors with a more specific selector (see Hand.module.css .btn-sort:disabled). */ button:active:not(:disabled):not(.disabled), .btn:active:not(:disabled):not(.disabled), button:active, .btn:active { transform: var(--active-scale); transition: transform var(--active-duration); } button:disabled, button.disabled, .btn:disabled, .btn.disabled, @layer floors { button[disabled], .btn[disabled] { opacity: 0.4; cursor: not-allowed; pointer-events: none; } } /* Phase 7: Touch Accessibility Minimum Bounds */ button:not(.close-drawer-btn), .btn:not(.close-drawer-btn) { min-height: 44px; min-width: 44px; } /* Phase 7: Blanket Animation Kill Switch for WCAG Compliance */ html, body { position: fixed; top: -1px; left: 0; width: 100%; height: calc(100% + 2px); height: calc(100dvh + 2px); /* Dynamic viewport height: expands when mobile nav bar hides (fullscreen) */ margin: 0; padding: 0; overflow: hidden; background-color: #0d1838; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { -webkit-user-select: none; user-select: none; touch-action: manipulation; /* Drop 300ms latency globally */ } #root { position: fixed; top: 0; left: 0; width: 100%; height: 100%; height: 100dvh; /* Dynamic viewport height: expands when mobile nav bar hides (fullscreen) */ display: flex; margin: 0; padding: 0; overflow: hidden; } /* Hash test variable for SW 2 */ /* Global spinner keyframe — used by inline-styled connecting states */ @keyframes spin { to { transform: rotate(360deg); } } .panel-theme-light { --color-gold: #854d0e; --review-win-gold: #854d0e; --coaching-bg-start: rgba(133, 77, 14, 0.08); --coaching-bg-end: rgba(133, 77, 14, 0); /* Panel Surface */ --panel-bg: rgba(245, 248, 255, 0.88); --panel-blur: 24px; --panel-border: rgba(255, 255, 255, 0.65); --panel-border-top: rgba(255, 255, 255, 0.9); --panel-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2); --panel-text: #1e293b; --panel-text-near-black: #0f172a; /* Text Hierarchy */ --panel-heading: #1e293b; --panel-text-secondary: rgba(0, 0, 0, 0.6); --panel-text-muted: rgba(0, 0, 0, 0.35); --panel-label: #334155; --panel-label-secondary: #475569; /* Interactive Elements */ --panel-btn-bg: rgba(0, 0, 0, 0.05); --panel-btn-border: rgba(0, 0, 0, 0.1); --panel-btn-hover-bg: rgba(0, 0, 0, 0.08); --panel-btn-hover-border: rgba(0, 0, 0, 0.4); --panel-btn-active-text: #0f172a; --panel-btn-primary-bg: var(--color-brand); --panel-btn-primary-border: transparent; --panel-btn-primary-text: #f8fafc; --panel-btn-primary-hover-bg: #11204d; --panel-btn-primary-hover-border: transparent; --panel-btn-primary-hover-text: #f8fafc; --panel-divider: rgba(0, 0, 0, 0.08); --panel-card-bg: rgba(0, 0, 0, 0.04); --panel-card-border: rgba(0, 0, 0, 0.08); --panel-rating-card-bg: linear-gradient(135deg, rgba(133, 77, 14, 0.08), rgba(0, 0, 0, 0.03)); --panel-rating-card-border: rgba(133, 77, 14, 0.2); --panel-segment-active-bg: var(--chat-sender-color, var(--color-gold)); --panel-segment-active-text: #ffffff; /* Inputs & Dropdowns */ --panel-input-bg: rgba(250, 252, 255, 0.85); --panel-input-border: rgba(0, 0, 0, 0.1); --panel-input-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15); /* Tracks & Meters */ --panel-track-bg: rgba(0, 0, 0, 0.12); --panel-track-remainder: rgba(0, 0, 0, 0.08); --panel-track-inset: inset 0 1px 2px rgba(0, 0, 0, 0.1); --panel-ring-inset: #fff; /* HUD Badges */ --badge-trump-color: #fcd34d; --badge-trump-bg: rgba(0, 0, 0, 0.65); --badge-trump-border: rgba(252, 211, 77, 0.4); --badge-nello-color: #c4b5fd; --badge-nello-bg: rgba(0, 0, 0, 0.65); --badge-nello-border: rgba(196, 181, 253, 0.4); --badge-led-color: #f1f5f9; --badge-led-bg: rgba(0, 0, 0, 0.65); --badge-led-border: rgba(226, 232, 240, 0.4); --badge-contract-color: #93c5fd; --badge-contract-bg: rgba(0, 0, 0, 0.65); --badge-contract-border: rgba(147, 197, 253, 0.4); --badge-turn-color: #6ee7b7; --badge-turn-bg: rgba(0, 0, 0, 0.65); --badge-turn-border: rgba(110, 231, 183, 0.4); --badge-pass-color: #fca5a5; --badge-pass-bg: rgba(0, 0, 0, 0.65); --badge-pass-border: rgba(252, 165, 165, 0.4); --badge-spectator-color: #ffb400; --badge-spectator-bg: rgba(0, 0, 0, 0.65); --badge-spectator-border: rgba(255, 180, 0, 0.4); /* BidSlider */ --bid-label-color: #b45309; --bid-highest-color: #475569; --bid-pass-bg: rgba(239, 68, 68, 0.12); --bid-pass-border: rgba(220, 38, 38, 0.5); --bid-pass-text: #dc2626; --bid-pass-hover-bg: rgba(239, 68, 68, 0.18); --bid-pass-hover-border: #dc2626; --bid-pass-hover-text: #b91c1c; --bid-pass-active-text: #b91c1c; --bid-confirm-border: rgba(0, 0, 0, 0.15); --bid-confirm-text: #ffffff; --bid-confirm-hover-border: rgba(0, 0, 0, 0.3); --bid-confirm-disabled-border: rgba(0, 0, 0, 0.15); --bid-confirm-disabled-text: rgba(0, 0, 0, 0.3); --bid-confirm-dim-border: rgba(0, 0, 0, 0.2); --bid-confirm-dim-text: rgba(0, 0, 0, 0.5); --bid-special-bg: rgba(109, 40, 217, 0.08); --bid-special-border: rgba(109, 40, 217, 0.4); --bid-special-text: #6d28d9; --bid-special-hover-bg: rgba(109, 40, 217, 0.15); --bid-special-hover-border: #6d28d9; --bid-special-hover-text: #4c1d95; --bid-special-active-text: #4c1d95; --bid-thumb-bg: #f8fafc; --bid-thumb-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); --bid-zone-divider: rgba(0, 0, 0, 0.2); --bid-tick-muted: rgba(0, 0, 0, 0.6); --bid-tick-subdued: rgba(0, 0, 0, 0.35); --bid-forced-banner-bg: linear-gradient(135deg, rgba(133, 77, 14, 0.12) 0%, rgba(133, 77, 14, 0.06) 100%); --bid-forced-banner-border: rgba(133, 77, 14, 0.3); --bid-forced-banner-text: #854d0e; --bid-forced-banner-text-shadow: none; --bid-forced-banner-pulse: rgba(133, 77, 14, 0.25); /* BidSlider TSX Neutrals */ --panel-neutral-text: #475569; --panel-neutral-glow: rgba(0, 0, 0, 0.1); --panel-neutral-progress: #64748b; --panel-neutral-value: #1e293b; --panel-thumb-border: #94a3b8; --panel-muted-text: rgba(0, 0, 0, 0.35); /* Button Hover Tokens — invert from white-tint to dark-tint for light backgrounds */ --hover-lighten: rgba(0, 0, 0, 0.06); --hover-lighten-strong: rgba(0, 0, 0, 0.10); /* Chat & Avatar Panel Settings */ --panel-avatar-bg: rgba(15, 23, 42, 0.85); --chat-sender-color: #1d4ed8; --chat-bubble-me-bg: rgba(29, 78, 216, 0.08); --chat-bubble-me-border: rgba(29, 78, 216, 0.2); --chat-settings-active-text: #ffffff; /* Gold Admin Message Settings (Light glass overrides for high contrast readability) */ --chat-admin-bg: rgba(180, 83, 9, 0.09); --chat-admin-border: rgba(180, 83, 9, 0.35); --chat-admin-text: #78350f; --chat-admin-text-name: #b45309; --chat-admin-glow: rgba(180, 83, 9, 0.05); } /* ═══ Layer 2: Game Mode → Player Mapping ═══ */ /* var() resolves HERE on .app, using .app's palette values (including theme overrides) */ .game-mode-fourp { --player-0-color: var(--palette-primary); --player-0-dim: var(--palette-primary-dim); --player-0-border: var(--palette-primary-border); --player-0-glow: var(--palette-primary-glow); --player-0-shadow: var(--palette-primary-shadow); --player-1-color: var(--palette-secondary); --player-1-dim: var(--palette-secondary-dim); --player-1-border: var(--palette-secondary-border); --player-1-glow: var(--palette-secondary-glow); --player-1-shadow: var(--palette-secondary-shadow); --player-2-color: var(--palette-primary); /* partner of 0 */ --player-2-dim: var(--palette-primary-dim); --player-2-border: var(--palette-primary-border); --player-2-glow: var(--palette-primary-glow); --player-2-shadow: var(--palette-primary-shadow); --player-3-color: var(--palette-secondary); /* partner of 1 */ --player-3-dim: var(--palette-secondary-dim); --player-3-border: var(--palette-secondary-border); --player-3-glow: var(--palette-secondary-glow); --player-3-shadow: var(--palette-secondary-shadow); /* Team color mapping for in-game elements (toasts, throw-down, tutorial, bid slider fallbacks) */ --color-us: var(--palette-primary); --color-them: var(--palette-secondary); } .game-mode-moon3 { --player-0-color: var(--palette-primary); --player-0-dim: var(--palette-primary-dim); --player-0-border: var(--palette-primary-border); --player-0-glow: var(--palette-primary-glow); --player-0-shadow: var(--palette-primary-shadow); --player-1-color: var(--palette-secondary); --player-1-dim: var(--palette-secondary-dim); --player-1-border: var(--palette-secondary-border); --player-1-glow: var(--palette-secondary-glow); --player-1-shadow: var(--palette-secondary-shadow); --player-2-color: var(--palette-tertiary); --player-2-dim: var(--palette-tertiary-dim); --player-2-border: var(--palette-tertiary-border); --player-2-glow: var(--palette-tertiary-glow); --player-2-shadow: var(--palette-tertiary-shadow); --player-3-color: transparent; --player-3-dim: transparent; --player-3-border: transparent; --player-3-glow: transparent; --player-3-shadow: none; /* Team color mapping for in-game elements */ --color-us: var(--palette-primary); --color-them: var(--palette-secondary); } /* ═══ Light Panels: re-declare player vars directly ═══ */ /* var() resolves HERE on .panel-theme-light, using inherited -on-light values from .app. These inherit correctly because -on-light tokens are concrete values set on .app (via theme class or :root defaults), not var() references. */ .game-mode-fourp .panel-theme-light { --player-0-color: var(--palette-primary-on-light); --player-0-dim: var(--palette-primary-dim-on-light); --player-0-border: var(--palette-primary-border-on-light); --player-0-glow: var(--palette-primary-glow-on-light); --player-0-shadow: var(--palette-primary-shadow-on-light); --player-1-color: var(--palette-secondary-on-light); --player-1-dim: var(--palette-secondary-dim-on-light); --player-1-border: var(--palette-secondary-border-on-light); --player-1-glow: var(--palette-secondary-glow-on-light); --player-1-shadow: var(--palette-secondary-shadow-on-light); --player-2-color: var(--palette-primary-on-light); /* partner */ --player-2-dim: var(--palette-primary-dim-on-light); --player-2-border: var(--palette-primary-border-on-light); --player-2-glow: var(--palette-primary-glow-on-light); --player-2-shadow: var(--palette-primary-shadow-on-light); --player-3-color: var(--palette-secondary-on-light); /* partner */ --player-3-dim: var(--palette-secondary-dim-on-light); --player-3-border: var(--palette-secondary-border-on-light); --player-3-glow: var(--palette-secondary-glow-on-light); --player-3-shadow: var(--palette-secondary-shadow-on-light); } .game-mode-moon3 .panel-theme-light { --player-0-color: var(--palette-primary-on-light); --player-0-dim: var(--palette-primary-dim-on-light); --player-0-border: var(--palette-primary-border-on-light); --player-0-glow: var(--palette-primary-glow-on-light); --player-0-shadow: var(--palette-primary-shadow-on-light); --player-1-color: var(--palette-secondary-on-light); --player-1-dim: var(--palette-secondary-dim-on-light); --player-1-border: var(--palette-secondary-border-on-light); --player-1-glow: var(--palette-secondary-glow-on-light); --player-1-shadow: var(--palette-secondary-shadow-on-light); --player-2-color: var(--palette-tertiary-on-light); --player-2-dim: var(--palette-tertiary-dim-on-light); --player-2-border: var(--palette-tertiary-border-on-light); --player-2-glow: var(--palette-tertiary-glow-on-light); --player-2-shadow: var(--palette-tertiary-shadow-on-light); --player-3-color: transparent; --player-3-dim: transparent; --player-3-border: transparent; --player-3-glow: transparent; --player-3-shadow: none; } /* ═══ Layer 1b: Theme Overrides ═══ */ .player-theme-ocean_breeze { --palette-primary: #06b6d4; --palette-primary-dim: rgba(6, 182, 212, 0.15); --palette-primary-border: rgba(6, 182, 212, 0.5); --palette-primary-glow: rgba(6, 182, 212, 0.4); --palette-primary-shadow: 0 0 5px rgba(6, 182, 212, 0.4); --palette-primary-on-light: #0891b2; --palette-primary-dim-on-light: rgba(8, 145, 178, 0.12); --palette-primary-border-on-light: rgba(8, 145, 178, 0.5); --palette-primary-glow-on-light: rgba(8, 145, 178, 0.15); --palette-primary-shadow-on-light: 0 1px 1px rgba(0, 0, 0, 0.1); --palette-secondary: #f97316; --palette-secondary-dim: rgba(249, 115, 22, 0.15); --palette-secondary-border: rgba(249, 115, 22, 0.5); --palette-secondary-glow: rgba(249, 115, 22, 0.4); --palette-secondary-shadow: 0 0 5px rgba(249, 115, 22, 0.4); --palette-secondary-on-light: #c2410c; --palette-secondary-dim-on-light: rgba(194, 65, 12, 0.1); --palette-secondary-border-on-light: rgba(194, 65, 12, 0.4); --palette-secondary-glow-on-light: rgba(194, 65, 12, 0.15); --palette-secondary-shadow-on-light: 0 1px 1px rgba(0, 0, 0, 0.1); --palette-tertiary: #fb7185; --palette-tertiary-dim: rgba(251, 113, 133, 0.15); --palette-tertiary-border: rgba(251, 113, 133, 0.4); --palette-tertiary-glow: rgba(251, 113, 133, 0.4); --palette-tertiary-shadow: 0 0 5px rgba(251, 113, 133, 0.4); --palette-tertiary-on-light: #be123c; --palette-tertiary-dim-on-light: rgba(190, 18, 60, 0.12); --palette-tertiary-border-on-light: rgba(190, 18, 60, 0.4); --palette-tertiary-glow-on-light: rgba(190, 18, 60, 0.15); --palette-tertiary-shadow-on-light: 0 1px 1px rgba(0, 0, 0, 0.1); } .player-theme-sunset_mesa { --palette-primary: #f43f5e; --palette-primary-dim: rgba(244, 63, 94, 0.15); --palette-primary-border: rgba(244, 63, 94, 0.5); --palette-primary-glow: rgba(244, 63, 94, 0.4); --palette-primary-shadow: 0 0 5px rgba(244, 63, 94, 0.4); --palette-primary-on-light: #be123c; --palette-primary-dim-on-light: rgba(190, 18, 60, 0.12); --palette-primary-border-on-light: rgba(190, 18, 60, 0.5); --palette-primary-glow-on-light: rgba(190, 18, 60, 0.15); --palette-primary-shadow-on-light: 0 1px 1px rgba(0, 0, 0, 0.1); --palette-secondary: #eab308; --palette-secondary-dim: rgba(234, 179, 8, 0.15); --palette-secondary-border: rgba(234, 179, 8, 0.5); --palette-secondary-glow: rgba(234, 179, 8, 0.4); --palette-secondary-shadow: 0 0 5px rgba(234, 179, 8, 0.4); --palette-secondary-on-light: #a16207; --palette-secondary-dim-on-light: rgba(161, 98, 7, 0.1); --palette-secondary-border-on-light: rgba(161, 98, 7, 0.4); --palette-secondary-glow-on-light: rgba(161, 98, 7, 0.15); --palette-secondary-shadow-on-light: 0 1px 1px rgba(0, 0, 0, 0.1); --palette-tertiary: #2dd4bf; --palette-tertiary-dim: rgba(45, 212, 191, 0.15); --palette-tertiary-border: rgba(45, 212, 191, 0.4); --palette-tertiary-glow: rgba(45, 212, 191, 0.4); --palette-tertiary-shadow: 0 0 5px rgba(45, 212, 191, 0.4); --palette-tertiary-on-light: #0d9488; --palette-tertiary-dim-on-light: rgba(13, 148, 136, 0.12); --palette-tertiary-border-on-light: rgba(13, 148, 136, 0.4); --palette-tertiary-glow-on-light: rgba(13, 148, 136, 0.15); --palette-tertiary-shadow-on-light: 0 1px 1px rgba(0, 0, 0, 0.1); } .player-theme-forest_trail { --palette-primary: #22c55e; --palette-primary-dim: rgba(34, 197, 94, 0.15); --palette-primary-border: rgba(34, 197, 94, 0.5); --palette-primary-glow: rgba(34, 197, 94, 0.4); --palette-primary-shadow: 0 0 5px rgba(34, 197, 94, 0.4); --palette-primary-on-light: #15803d; --palette-primary-dim-on-light: rgba(21, 128, 61, 0.12); --palette-primary-border-on-light: rgba(21, 128, 61, 0.5); --palette-primary-glow-on-light: rgba(21, 128, 61, 0.15); --palette-primary-shadow-on-light: 0 1px 1px rgba(0, 0, 0, 0.1); --palette-secondary: #a855f7; --palette-secondary-dim: rgba(168, 85, 247, 0.15); --palette-secondary-border: rgba(168, 85, 247, 0.5); --palette-secondary-glow: rgba(168, 85, 247, 0.4); --palette-secondary-shadow: 0 0 5px rgba(168, 85, 247, 0.4); --palette-secondary-on-light: #7e22ce; --palette-secondary-dim-on-light: rgba(126, 34, 206, 0.1); --palette-secondary-border-on-light: rgba(126, 34, 206, 0.4); --palette-secondary-glow-on-light: rgba(126, 34, 206, 0.15); --palette-secondary-shadow-on-light: 0 1px 1px rgba(0, 0, 0, 0.1); --palette-tertiary: #fb923c; --palette-tertiary-dim: rgba(251, 146, 60, 0.15); --palette-tertiary-border: rgba(251, 146, 60, 0.4); --palette-tertiary-glow: rgba(251, 146, 60, 0.4); --palette-tertiary-shadow: 0 0 5px rgba(251, 146, 60, 0.4); --palette-tertiary-on-light: #c2410c; --palette-tertiary-dim-on-light: rgba(194, 65, 12, 0.12); --palette-tertiary-border-on-light: rgba(194, 65, 12, 0.4); --palette-tertiary-glow-on-light: rgba(194, 65, 12, 0.15); --palette-tertiary-shadow-on-light: 0 1px 1px rgba(0, 0, 0, 0.1); } .player-theme-midnight_neon { --palette-primary: #818cf8; --palette-primary-dim: rgba(129, 140, 248, 0.15); --palette-primary-border: rgba(129, 140, 248, 0.5); --palette-primary-glow: rgba(129, 140, 248, 0.4); --palette-primary-shadow: 0 0 5px rgba(129, 140, 248, 0.4); --palette-primary-on-light: #4f46e5; --palette-primary-dim-on-light: rgba(79, 70, 229, 0.12); --palette-primary-border-on-light: rgba(79, 70, 229, 0.5); --palette-primary-glow-on-light: rgba(79, 70, 229, 0.15); --palette-primary-shadow-on-light: 0 1px 1px rgba(0, 0, 0, 0.1); --palette-secondary: #f472b6; --palette-secondary-dim: rgba(244, 114, 182, 0.15); --palette-secondary-border: rgba(244, 114, 182, 0.5); --palette-secondary-glow: rgba(244, 114, 182, 0.4); --palette-secondary-shadow: 0 0 5px rgba(244, 114, 182, 0.4); --palette-secondary-on-light: #db2777; --palette-secondary-dim-on-light: rgba(219, 39, 119, 0.1); --palette-secondary-border-on-light: rgba(219, 39, 119, 0.4); --palette-secondary-glow-on-light: rgba(219, 39, 119, 0.15); --palette-secondary-shadow-on-light: 0 1px 1px rgba(0, 0, 0, 0.1); --palette-tertiary: #22d3ee; --palette-tertiary-dim: rgba(34, 211, 238, 0.15); --palette-tertiary-border: rgba(34, 211, 238, 0.4); --palette-tertiary-glow: rgba(34, 211, 238, 0.4); --palette-tertiary-shadow: 0 0 5px rgba(34, 211, 238, 0.4); --palette-tertiary-on-light: #0891b2; --palette-tertiary-dim-on-light: rgba(8, 145, 178, 0.12); --palette-tertiary-border-on-light: rgba(8, 145, 178, 0.4); --palette-tertiary-glow-on-light: rgba(8, 145, 178, 0.15); --palette-tertiary-shadow-on-light: 0 1px 1px rgba(0, 0, 0, 0.1); } .player-theme-desert_oasis { --palette-primary: #fbbf24; --palette-primary-dim: rgba(251, 191, 36, 0.15); --palette-primary-border: rgba(251, 191, 36, 0.5); --palette-primary-glow: rgba(251, 191, 36, 0.4); --palette-primary-shadow: 0 0 5px rgba(251, 191, 36, 0.4); --palette-primary-on-light: #d97706; --palette-primary-dim-on-light: rgba(217, 119, 6, 0.12); --palette-primary-border-on-light: rgba(217, 119, 6, 0.5); --palette-primary-glow-on-light: rgba(217, 119, 6, 0.15); --palette-primary-shadow-on-light: 0 1px 1px rgba(0, 0, 0, 0.1); --palette-secondary: #34d399; --palette-secondary-dim: rgba(52, 211, 153, 0.15); --palette-secondary-border: rgba(52, 211, 153, 0.5); --palette-secondary-glow: rgba(52, 211, 153, 0.4); --palette-secondary-shadow: 0 0 5px rgba(52, 211, 153, 0.4); --palette-secondary-on-light: #059669; --palette-secondary-dim-on-light: rgba(5, 150, 105, 0.1); --palette-secondary-border-on-light: rgba(5, 150, 105, 0.4); --palette-secondary-glow-on-light: rgba(5, 150, 105, 0.15); --palette-secondary-shadow-on-light: 0 1px 1px rgba(0, 0, 0, 0.1); --palette-tertiary: #fb923c; --palette-tertiary-dim: rgba(251, 146, 60, 0.15); --palette-tertiary-border: rgba(251, 146, 60, 0.4); --palette-tertiary-glow: rgba(251, 146, 60, 0.4); --palette-tertiary-shadow: 0 0 5px rgba(251, 146, 60, 0.4); --palette-tertiary-on-light: #c2410c; --palette-tertiary-dim-on-light: rgba(194, 65, 12, 0.12); --palette-tertiary-border-on-light: rgba(194, 65, 12, 0.4); --palette-tertiary-glow-on-light: rgba(194, 65, 12, 0.15); --palette-tertiary-shadow-on-light: 0 1px 1px rgba(0, 0, 0, 0.1); } /* ── Light Panels: Table-specific Chat Variable Overrides ── */ .panel-theme-light.theme-table-green, .theme-table-green .panel-theme-light { --chat-sender-color: #15803d; --chat-bubble-me-bg: rgba(21, 128, 61, 0.08); --chat-bubble-me-border: rgba(21, 128, 61, 0.2); } .panel-theme-light.theme-table-navy, .theme-table-navy .panel-theme-light { --chat-sender-color: #1d4ed8; --chat-bubble-me-bg: rgba(29, 78, 216, 0.08); --chat-bubble-me-border: rgba(29, 78, 216, 0.2); } .panel-theme-light.theme-table-red, .theme-table-red .panel-theme-light { --chat-sender-color: #b91c1c; --chat-bubble-me-bg: rgba(185, 28, 28, 0.08); --chat-bubble-me-border: rgba(185, 28, 28, 0.2); } .panel-theme-light.theme-table-orange, .theme-table-orange .panel-theme-light { --chat-sender-color: #c2410c; --chat-bubble-me-bg: rgba(194, 65, 12, 0.08); --chat-bubble-me-border: rgba(194, 65, 12, 0.2); } .panel-theme-light.theme-table-maroon, .theme-table-maroon .panel-theme-light { --chat-sender-color: #be123c; --chat-bubble-me-bg: rgba(190, 18, 60, 0.08); --chat-bubble-me-border: rgba(190, 18, 60, 0.2); } .panel-theme-light.theme-table-black, .theme-table-black .panel-theme-light { --chat-sender-color: #374151; --chat-bubble-me-bg: rgba(55, 65, 81, 0.08); --chat-bubble-me-border: rgba(55, 65, 81, 0.2); } .panel-theme-light.theme-table-yellow, .theme-table-yellow .panel-theme-light { --chat-sender-color: #a16207; --chat-bubble-me-bg: rgba(161, 98, 7, 0.08); --chat-bubble-me-border: rgba(161, 98, 7, 0.2); } .panel-theme-light.theme-table-purple, .theme-table-purple .panel-theme-light { --chat-sender-color: #7e22ce; --chat-bubble-me-bg: rgba(126, 34, 206, 0.08); --chat-bubble-me-border: rgba(126, 34, 206, 0.2); } .panel-theme-light.theme-table-lunar_midnight, .theme-table-lunar_midnight .panel-theme-light { --chat-sender-color: #1e3a8a; --chat-bubble-me-bg: rgba(30, 58, 138, 0.08); --chat-bubble-me-border: rgba(30, 58, 138, 0.2); } /* Portrait z-index re-base — the ONLY place portrait stacking differs from the canonical scale above. See docs/css-z-index-map.md. Tokens not listed here keep their base value in portrait; per-selector portrait z-index overrides are forbidden — re-base the token or pin a literal instead. */ @media (max-width: 1366px) and (orientation: portrait) { :root { --z-toast-local: 1200; --z-review: 4400; --z-scrim: 4499; --z-drawer: 4500; --z-nav: 4501; } } } @layer globals {:root { --tile-width-opp: 44px; --tile-height-opp: 88px; --opp-gap: 8px; --table-radius: 280px; --sidebar-width: 380px; --font-scale: 1; --mobile-badge-dx: 290px; --mobile-badge-dy: 190px; }@media (max-width: 1366px) { :root { --font-scale: 0.85; --table-radius: 210px; --tile-width-opp: 42px; --tile-height-opp: 84px; --opp-gap: 4px; --mobile-badge-dx: 215px; --mobile-badge-dy: 140px; } }@media (max-width: 767px) { :root { --table-radius: 182px; --tile-width-opp: 36px; --tile-height-opp: 72px; --sidebar-width: 0px; --mobile-badge-dx: 165px; --mobile-badge-dy: 110px; } }@media (max-width: 400px) { :root { --mobile-badge-dx: 135px; } }/* ========================================= GLOBAL OPPONENT BADGES & BIDS Used by both Mobile and Landscape Tablet ========================================= */.mobile-opponent-badge { pointer-events: none; }.opponent-badge-circle { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 48px; height: 48px; background: rgba(18, 20, 24, 0.85); border: 2px solid rgba(255, 255, 255, 0.15); border-radius: 50%; color: #fff; font-family: var(--font-sans); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: border-color 0.3s, box-shadow 0.3s, background 0.3s; }.opponent-badge-circle.active-turn { border-color: #ffeb3b; box-shadow: 0 0 16px rgba(255, 235, 59, 0.5); background: rgba(40, 35, 10, 0.9); }.opponent-badge-circle.trick-winner-halo, .trick-winner-avatar-halo { animation: trick-halo-global 0.8s ease-out forwards; }@keyframes trick-halo-global { 0% { box-shadow: 0 0 0 transparent; } 30% { box-shadow: 0 0 35px var(--halo-color); } 100% { box-shadow: 0 0 0 transparent; } }.dealer-shaker-indicator { position: absolute; top: -4px; right: -4px; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, #ffd700 0%, #b8860b 100%); border: 1px solid rgba(255, 255, 255, 0.8); color: #000; font-family: var(--font-sans); font-size: 10px; font-weight: 900; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); z-index: 10; }.dealer-shaker-indicator.shaking span { display: inline-block; animation: shakerRattle 0.15s infinite linear; }@keyframes shakerRattle { 0% { transform: translate(0, 0); } 20% { transform: translate(-1.5px, 1px); } 40% { transform: translate(1px, -1px); } 60% { transform: translate(-1px, -1px); } 80% { transform: translate(1.5px, 1px); } 100% { transform: translate(0, 0); } }.opponent-left:not(.mobile-opponent-badge) .dealer-shaker-indicator { right: auto; left: -4px; transform: rotate(-90deg); }.opponent-right:not(.mobile-opponent-badge) .dealer-shaker-indicator { transform: rotate(90deg); }.opponent-nw:not(.mobile-opponent-badge) .dealer-shaker-indicator { transform: rotate(60deg); }.opponent-ne:not(.mobile-opponent-badge) .dealer-shaker-indicator { /* Container is rotated +60deg, so the local top-left corner is what lands at the visual top — mirroring the NW seat's badge position. */ right: auto; left: -4px; transform: rotate(-60deg); }.badge-count { font-size: var(--text-md); font-weight: var(--weight-bold); line-height: 1; margin-bottom: 2px; }.badge-icon { font-size: var(--text-base); line-height: 1; opacity: 0.8; }.mobile-bid { position: absolute; bottom: -24px; left: 50%; transform: translateX(-50%); font-size: var(--text-xs); padding: 2px 8px; white-space: nowrap; border-radius: 12px; }.opponent-left.mobile-opponent-badge .mobile-bid { left: calc(100% + 10px); top: 50%; transform: translateY(-50%); bottom: auto; }.opponent-right.mobile-opponent-badge .mobile-bid { right: calc(100% + 10px); left: auto; top: 50%; transform: translateY(-50%); bottom: auto; }.opponent-left.mobile-opponent-badge { left: 8px; transform: translateY(-50%); }.opponent-right.mobile-opponent-badge { right: 8px; transform: translateY(-50%); }.opponent-top.mobile-opponent-badge { top: 4px; transform: translateX(-50%); }.opponent-nw.mobile-opponent-badge { left: 50%; top: 50%; transform: translate(calc(-50% - var(--mobile-badge-dx)), calc(-50% - var(--mobile-badge-dy))); }.opponent-ne.mobile-opponent-badge { left: 50%; right: auto; top: 50%; transform: translate(calc(-50% + var(--mobile-badge-dx)), calc(-50% - var(--mobile-badge-dy))); }@media (max-width: 767px) { /* Legacy un-prefixed overrides for old desktop nodes - still safely needed just in case */ .opponent-left { transform: translateY(-50%); left: 8px; } .opponent-right { transform: translateY(-50%); right: 8px; } .opponent-top { transform: translateX(-50%); top: 4px; } }.app { position: fixed; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; margin: 0; padding: 0; display: flex; background-color: #0b110e; /* Base color only — the felt radial lives on .main-content so its center matches the visible play area (this shell spans the full viewport including the sidebar, which put the old gradient's hotspot ~sidebar-width/2 left of the table center). */ background: var(--table-bg-base, #0b110e); overflow: hidden; }/* Global 44px Touch Targets */button, .domino, .custom-dropdown-trigger { touch-action: manipulation; }@media (max-width: 1366px) { button { min-height: 44px; min-width: 44px; position: relative; } }.layout { display: flex; width: 100%; height: 100%; }.main-content { flex: 1; position: relative; display: flex; flex-direction: column; overflow: clip; /* Felt radial centered on the PLAY AREA (this element excludes the sidebar), fixing the hotspot sitting left of the table center. */ background: var(--table-bg, radial-gradient(circle at center, #1e2c24 0%, #0b110e 100%)); }.sidebar { width: var(--sidebar-width); padding: 24px; box-sizing: border-box; display: flex; flex-direction: column; gap: 24px; border-right: 1px solid rgba(255, 255, 255, 0.05); box-shadow: 10px 0 30px rgba(0,0,0,0.5); z-index: var(--z-hand); overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }.sidebar::-webkit-scrollbar { display: none; }.universal-bottom-nav { position: absolute; bottom: 0; left: 0; width: var(--sidebar-width); height: var(--mobile-nav-height); padding-bottom: 0; display: flex; flex-direction: row; align-items: center; justify-content: space-around; border-top: 1px solid rgba(255, 255, 255, 0.1); background: rgba(18, 20, 24, 0.98); padding-left: 8px; padding-right: 8px; box-sizing: border-box; z-index: var(--z-nav); }.universal-bottom-nav button { background: transparent; border: 1px solid transparent; color: rgba(255,255,255,0.6); cursor: pointer; border-radius: 8px; display: flex; align-items: center; justify-content: center; height: 48px; min-width: 48px; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; font-family: inherit; }.universal-bottom-nav button:hover { background: rgba(255,255,255,0.1); color: #fff; }.universal-bottom-nav button.active { background: rgba(255,255,255,0.15); color: var(--color-us); border-color: rgba(255,255,255,0.2); }.universal-bottom-nav.nav-light { background: rgba(248, 250, 255, 0.85); /* Highly opaque bright frost to force high contrast over dark tables */ backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-top: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 -8px 32px 0 rgba(0, 0, 0, 0.15); }.universal-bottom-nav.nav-light button { color: #334155; }.universal-bottom-nav.nav-light button:hover { background: rgba(255, 255, 255, 0.4); color: #0f172a; }.universal-bottom-nav.nav-light button.active { background: rgba(255, 255, 255, 0.8); color: #047857; /* Deep green for visibility on bright background */ border-color: rgba(0, 0, 0, 0.15); }.sidebar-slide-drawer { position: absolute; left: 0; width: var(--sidebar-width); bottom: var(--mobile-nav-height); /* Sits precisely atop the bottom strip natively */ height: max-content; max-height: calc(100% - var(--mobile-nav-height)); /* Fill available space inside sidebar natively up to top */ border-top: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1); z-index: var(--z-coach); display: flex; flex-direction: column; opacity: 0; pointer-events: none; box-shadow: 0px -10px 30px rgba(0,0,0,0.5); overflow-y: auto; overflow-x: hidden; }.sidebar-slide-drawer.drawer-open { transform: translateY(0); opacity: 1; pointer-events: auto; }/* FB3: while pinned, the drawer is height-capped just below the scoreboard (inline max-height from usePinnedDrawerMaxHeight) so it never covers the Us/Them counts; the existing overflow-y:auto turns the excess into scroll. Touch devices scroll with no scrollbar; fine pointers get a thin one. */.sidebar-slide-drawer.drawer-pinned { scrollbar-width: thin; }@media (pointer: coarse) { .sidebar-slide-drawer.drawer-pinned { scrollbar-width: none; } .sidebar-slide-drawer.drawer-pinned::-webkit-scrollbar { display: none; width: 0; } }/* Ensure padding pushes content above the fixed absolute overlays mapped directly in sidebar space */.sidebar { position: relative; padding-bottom: 70px; }.drawer-overlay { line-height: 0; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: var(--z-scrim); background: transparent; opacity: 0; pointer-events: none; transition: opacity 0.3s; }.drawer-overlay.active { opacity: 1; pointer-events: auto; }@media (max-width: 1366px) and (orientation: portrait) { .universal-bottom-nav, .sidebar-slide-drawer { width: 100vw; position: fixed; /* Secure lock visually decoupled from scroll */ z-index: var(--z-drawer); /* portrait re-base (docs/css-z-index-map.md): above review (4400), below nav */ } .universal-bottom-nav { z-index: var(--z-nav); } .sidebar-slide-drawer { bottom: var(--mobile-nav-height); max-height: calc(100% - var(--mobile-nav-height)); } .drawer-overlay { background: rgba(0,0,0,0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .sidebar-slide-drawer.panel-theme-dark { background: rgba(0, 0, 0, 0.92); } .sidebar-slide-drawer.panel-theme-light { background: rgba(245, 248, 255, 0.92); } }.play-area { flex: 1; display: flex; flex-direction: column; position: relative; }/* Transient Trick Result Overlay */.trick-toast { position: absolute; top: 50%; left: 50%; pointer-events: none; font-family: var(--font-sans); font-weight: 900; /* Base size for medium-length trick labels (~8–9 chars: "TOOK IT!", "LOST IT!", "DODGED IT!") */ font-size: clamp(1.8rem, 9vw, 3.5rem); letter-spacing: 2px; text-align: center; text-shadow: 0 4px 10px rgba(0,0,0,0.8), 0 0 20px currentColor; white-space: nowrap; z-index: var(--z-toast-local); }@media (max-width: 1366px) { }.toast-us { color: var(--color-us); animation: toast-pop 1.2s ease-out forwards; }/* Nello announce — 2-line label, tighter vw to stay legible */.toast-nello { color: #c4b5fd; font-size: clamp(1.8rem, 5vw, 3rem); white-space: pre-line; line-height: 1.1; animation: toast-pop 1.2s ease-out forwards; }/* Redeal pass-out — neutral amber, single-line informational */.toast-redeal { color: #f5c842; font-size: clamp(1.4rem, 4vw, 2.2rem); animation: toast-pop 1.2s ease-out forwards; }/* Auction auto-pass — neutral amber, single-line informational */.toast-autopass { color: #f5c842; font-size: clamp(1.4rem, 4vw, 2.2rem); animation: toast-pop 1.2s ease-out forwards; }/* Long-form trick labels: "CAUGHT 'EM!", "MISSED 'EM!" (~11 chars) — tighter vw */.toast-them { color: var(--color-them); font-size: clamp(1.8rem, 8vw, 3.5rem); animation: toast-droop 1.5s ease-in forwards; }/* Trick-level "CAUGHT!" splash (used on Nello bidder failure, ~7 chars) — generous vw */.toast-set { color: var(--color-them); font-size: clamp(2rem, 12vw, 5rem); filter: saturate(1.5); animation: toast-droop 1.8s cubic-bezier(0.4, 0, 1, 1) forwards; }@keyframes toast-pop { 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; } 15% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; } 30% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 75% { transform: translate(-50%, -50%) scale(1); opacity: 1; filter: saturate(1.2); } 100% { transform: translate(-50%, -50%) scale(1.05); opacity: 0; } }@keyframes toast-pop-long { 0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0; } 5% { transform: translate(-50%, -50%) scale(1.02); opacity: 1; } 10% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 90% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(0.95); opacity: 0; } }@keyframes toast-droop { 0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; } 15% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 40% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -20%) scale(0.95); opacity: 0; } }/* End of Hand Transient Toasts vw coefficients are tuned per label character count so each label fills the same visual footprint regardless of string length: "SET!" = 4 chars → 15vw "BUSTED!" = 7 chars → 12vw "MADE IT!" = 8 chars → 11vw "OPPONENT SET!"= 13 chars → 8vw "THEY MADE IT!"= 13 chars → 8vw All share the same 1.8rem floor (legible at tiny sizes) and realistic desktop caps so they never swamp the board at 1440px+. *//* "MADE IT!" — 8 chars, US team won bid */.toast-hand-made { color: var(--color-us); font-size: clamp(1.8rem, 11vw, 5rem); animation: toast-hand-pop 1.8s ease-out forwards; }@keyframes toast-hand-pop { 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; } 10% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; filter: brightness(1.2); } 25% { transform: translate(-50%, -50%) scale(1.05); opacity: 1; filter: brightness(1); } 80% { transform: translate(-50%, -50%) scale(1.05); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.1); opacity: 0; } }/* "SET!" (4 chars) or "BUSTED!" (7 chars) — US was the bidder and failed */.toast-hand-set { color: var(--color-them); font-size: clamp(1.8rem, 15vw, 6rem); filter: saturate(1.8) contrast(1.2); animation: toast-hand-droop 2.2s cubic-bezier(0.4, 0, 1, 1) forwards; }/* "OPPONENT SET!" (13 chars) or "CAUGHT 'EM!" (11 chars) — THEM bidder failed */.toast-hand-set-us { color: var(--color-us); font-size: clamp(1.8rem, 8vw, 5rem); filter: saturate(1.8) contrast(1.2); animation: toast-hand-droop 2.2s cubic-bezier(0.4, 0, 1, 1) forwards; }@keyframes toast-hand-droop { 0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; } 10% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; } 35% { transform: translate(-50%, -50%) scale(1.05); opacity: 1; } 100% { transform: translate(-50%, -10%) scale(0.9); opacity: 0; filter: contrast(1); } }/* "THEY MADE IT!" — 13 chars, THEM bidder succeeded */.toast-hand-them-made { color: var(--color-them); font-size: clamp(1.8rem, 8vw, 4rem); animation: toast-hand-pop 1.8s ease-out forwards; }/* "MARK!" / "X MARKS!" — font-size is set via inline style in GamePlayBoard based on count */.toast-hand-them-marks { color: var(--color-them); animation: toast-hand-pulse 2.4s ease-out forwards; }.toast-hand-marks { color: var(--color-us); animation: toast-hand-pulse 2.4s ease-out forwards; }@keyframes toast-hand-pulse { 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; } 8% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; filter: brightness(1.5); } 16% { transform: translate(-50%, -50%) scale(0.95); opacity: 1; filter: brightness(1); } 24% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; filter: brightness(1.3); } 32% { transform: translate(-50%, -50%) scale(1); opacity: 1; filter: brightness(1); } 85% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.05); opacity: 0; } }/* Continue Gate — pauses auto-deal between hands for review */.continue-gate-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: var(--z-toast-local); display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 40px; border-radius: 14px; border: 1px solid var(--color-gold); background: rgba(15, 23, 42, 0.95); color: #ffffff; font-family: var(--font-sans); font-weight: var(--weight-bold); font-size: clamp(1.15rem, 3vw, 1.5rem); letter-spacing: 0.5px; cursor: pointer; box-shadow: inset 0 0 20px rgba(201, 145, 13, 0.15), 0 8px 30px rgba(0, 0, 0, 0.6); animation: continue-gate-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; transition: background var(--hover-duration), border-color var(--hover-duration), filter var(--hover-duration), transform var(--active-duration); pointer-events: auto; }/* Pulsing effect using pseudo-element scale/opacity to prevent browser paint loops */.continue-gate-btn::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 14px; box-shadow: 0 0 0 4px rgba(201, 145, 13, 0.4); opacity: 1; animation: continue-gate-pulse 2.5s 0.5s infinite ease-in-out; z-index: -1; pointer-events: none; }.continue-gate-btn .continue-arrow { display: inline-flex; /* Required for align-items and translateX */ align-items: center; font-size: 1.25em; /* Increase size relative to button text */ line-height: 1; position: relative; top: -3px; /* Nudge up vertically to align perfectly with text */ animation: continue-arrow-nudge 1.5s 0.8s infinite ease-in-out; flex-shrink: 0; }@keyframes continue-arrow-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }@keyframes continue-gate-enter { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.85); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }@keyframes continue-gate-pulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.03, 1.12); opacity: 0; } }@media (hover: hover) { .continue-gate-btn:hover { background: rgba(25, 35, 55, 0.98); border-color: var(--color-gold); filter: brightness(1.15); } .continue-gate-btn:hover .continue-arrow { animation: none; transform: translateX(4px); } }.continue-gate-btn:active { transform: translate(-50%, -50%) scale(0.96); filter: brightness(1.0); }@media (max-width: 1366px) { }.player-hand-area { position: absolute; bottom: 0; left: 0; right: 0; min-height: 200px; height: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 24px; z-index: var(--z-hand-raised); /* Forces the active dominoes safely above the interactive modal layers seamlessly globally */ pointer-events: none; }.player-hand-area.tutorial-dimmed-hand { z-index: 15; opacity: 0.25; filter: brightness(0.4); pointer-events: none; transition: opacity 0.3s ease, filter 0.3s ease; }body.custom-sort-dragging .player-hand-area { z-index: 4000; /* clears every board layer while dragging; no modal coexists with a drag */ }.nello-sitting-out { opacity: 0.35; filter: grayscale(0.8); transition: opacity 0.4s ease, filter 0.4s ease; pointer-events: none; }.player-hand-area > * { pointer-events: auto; }.fade-in { animation: fadeIn 0.3s var(--ease-out); }.panel-theme-light, .panel-theme-dark { background: var(--panel-bg); backdrop-filter: blur(var(--panel-blur)); -webkit-backdrop-filter: blur(var(--panel-blur)); border: 1px solid var(--panel-border); border-top: 1px solid var(--panel-border-top); box-shadow: var(--panel-shadow); color: var(--panel-text); }.panel-theme-light button, .panel-theme-dark button { color: var(--panel-label); font-weight: var(--weight-bold); }.table-wrapper { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: var(--z-table); }.main-content.modal-dimmed::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: var(--dimmer-bg, rgba(10, 18, 42, 0.7)); z-index: var(--z-modal); pointer-events: none; animation: fadeInDimmer 0.25s ease-out forwards; }@keyframes fadeInDimmer { from { opacity: 0; } to { opacity: 1; } }.table-inner-wrapper { position: relative; width: 500px; height: 500px; display: flex; justify-content: center; align-items: center; pointer-events: none; }.table-inner-wrapper > * { pointer-events: auto; }.table-trick-history { position: absolute; z-index: var(--z-hand); /* allow the column-wrapped history to grow into available space */ max-height: 85%; overflow: visible; pointer-events: auto; }.table-trick-history.top-left { top: 40px; left: 40px; max-width: calc(50% - 60px); }.table-trick-history.top-right { top: 40px; right: 40px; max-width: calc(50% - 60px); }.table-trick-history.bottom-left, .table-trick-history.left { bottom: 40px; left: 40px; max-width: calc(50% - 60px); }.table-trick-history.bottom-right, .table-trick-history.right { bottom: 40px; right: 40px; max-width: calc(50% - 60px); }.table-brand-watermark { position: absolute; top: 16px; left: 24px; font-family: var(--font-sans); font-weight: var(--weight-bold); font-style: italic; font-size: clamp(0.8rem, 1.5vw, 1.5rem); /* Subdued fluid sizing scaling far tighter globally to clear North avatar clipping */ color: rgba(255, 255, 255, 0.08); /* Transparent branding */ pointer-events: none; z-index: 1; /* Render perfectly cleanly underneath foreground dynamic components including Trick History conditionally */ user-select: none; transform-origin: top left; }button { background: transparent; border: 1px solid rgba(255, 255, 255, 0.3); color: #ffffff; padding: 8px 16px; border-radius: 8px; cursor: pointer; font-family: var(--font-sans); font-weight: var(--weight-bold); transition: background var(--hover-duration), border-color var(--hover-duration), transform var(--active-duration); }@media (hover: hover) { button:not(:disabled):not(.disabled):hover { background: var(--hover-lighten); border-color: rgba(255, 255, 255, 0.6); color: #ffffff; } }button:active:not(:disabled):not(.disabled) { color: #ffffff; }.new-game-btn { background: transparent; background-color: transparent; border: 1.5px solid rgba(255, 255, 255, 0.4); color: #ffffff; font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--weight-normal); -webkit-font-smoothing: antialiased; cursor: pointer; transition: background var(--duration-fast), border-color var(--duration-fast); }@media (hover: hover) { .new-game-btn:hover { background: var(--hover-lighten); border-color: rgba(255, 255, 255, 0.7); color: #ffffff; } }.new-game-btn:active { transform: var(--active-scale); background: var(--hover-lighten-strong); color: #ffffff; }.settings-panel { display: flex; flex-direction: column; gap: 12px; margin-top: auto; /* Push to bottom of sidebar */ position: relative; overflow: visible; }.dropdown-container { position: relative; width: 100%; display: flex; flex-direction: column; }.dropdown-container button { width: 100%; }.settings-options { display: flex; flex-direction: column; gap: 8px; background: var(--panel-input-bg); padding: 16px; border-radius: 12px; border: 1px solid var(--panel-input-border); box-shadow: var(--panel-input-shadow); }.inline-dropdown { position: absolute; /* pop upwards above the button */ bottom: calc(100% + 8px); left: 0; width: 100%; z-index: 1200; /* fixed above hand/HUD; NOT the drawer band — must not portrait-re-base */ box-sizing: border-box; }.settings-options label { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: inherit; cursor: pointer; }.settings-grid-row { display: grid; grid-template-columns: 1fr 1.5fr; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--panel-divider); }.settings-grid-row:last-child { border-bottom: none; padding-bottom: 0; }.settings-section-container { padding-bottom: 8px; border-bottom: 1px solid var(--panel-divider); }.settings-section-container:last-child { border-bottom: none; }.settings-section-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; padding: 8px 0; user-select: none; }.settings-section-summary { display: flex; align-items: center; gap: 8px; color: var(--panel-text-secondary); font-size: 0.9rem; }.summary-val { display: flex; align-items: center; gap: 6px; }.summary-swatch { width: 20px; height: 20px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.5); display: inline-block; }.summary-pip-preview { display: flex; gap: 2px; background: #f0f0f0; padding: 2px 4px; border-radius: 4px; }.panel-theme-dark .summary-pip-preview { background: #2a2a2a; }.summary-pip-dot { width: 4px; height: 4px; border-radius: 50%; }.settings-section-content { padding-bottom: 8px; }.emporiumLink { display: block; width: 100%; margin-top: 8px; padding: 8px 12px; background: rgba(240, 165, 0, 0.08); border: 1px solid rgba(240, 165, 0, 0.25); border-radius: 6px; color: var(--color-secondary); font-family: var(--font-sans); font-size: 0.8rem; letter-spacing: 0.05em; text-align: center; cursor: pointer; }.emporiumLink:hover { background: rgba(240, 165, 0, 0.15); border-color: rgba(240, 165, 0, 0.5); }/* Entitlement verification toast */.entitlement-toast { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: var(--z-toast-global); display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: rgba(20, 16, 8, 0.95); border: 1px solid rgba(240, 165, 0, 0.35); border-radius: 10px; backdrop-filter: blur(12px); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); font-family: var(--font-sans); font-size: 0.85rem; color: rgba(255, 255, 255, 0.9); cursor: pointer; animation: entitlementSlideIn 0.4s ease-out; max-width: 90vw; }.entitlement-toast span { flex: 1; }.entitlement-toast button { background: rgba(240, 165, 0, 0.2); border: 1px solid rgba(240, 165, 0, 0.4); border-radius: 6px; color: #f0a500; font-family: var(--font-sans); font-size: 0.8rem; padding: 6px 12px; cursor: pointer; white-space: nowrap; }.entitlement-toast button:hover { background: rgba(240, 165, 0, 0.35); }@keyframes entitlementSlideIn { from { opacity: 0; transform: translateX(-50%) translateY(-20px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }/* Grant variant — green accent for gifted cosmetics */.entitlement-toast-grant { border-color: rgba(52, 211, 153, 0.35); }.entitlement-toast-grant button { background: rgba(52, 211, 153, 0.2); border: 1px solid rgba(52, 211, 153, 0.4); color: #34d399; }.entitlement-toast-grant button:hover { background: rgba(52, 211, 153, 0.35); }/* settings-grid-row border now uses var(--panel-divider) in base rule */.settings-grid-row label { font-weight: var(--weight-bold); font-size: 0.95rem; margin: 0; color: inherit; text-align: left; }.settings-emporium-link { background: transparent; border: none; color: var(--color-secondary); font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; padding: 6px 0 0; text-align: left; transition: color var(--duration-fast); }.settings-emporium-link:hover { color: #fff; }/* h2/label colors now use inherited var(--panel-text) from parent */.action-btn { margin-bottom: 8px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; background: var(--panel-btn-bg); border: 1px solid var(--panel-btn-border); border-radius: 8px; font-weight: var(--weight-bold); transition: background var(--hover-duration), border-color var(--hover-duration), transform var(--active-duration); color: var(--panel-label); font-family: inherit; font-size: 15px; width: 100%; }@media (hover: hover) { .action-btn:not(:disabled):hover { background: var(--panel-btn-hover-bg); border-color: var(--panel-btn-hover-border); color: var(--panel-btn-active-text); } }.action-btn:active:not(:disabled) { color: var(--panel-btn-active-text); }/* Opponent Hands Placement */.opponent-hand-area { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 5; overflow: visible; }.opponent-top { top: 30px; left: 50%; transform: translateX(-50%); }.opponent-nw:not(.mobile-opponent-badge) { top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-60deg) translateY(-430px); }.opponent-ne:not(.mobile-opponent-badge) { top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%) rotate(60deg) translateY(-430px); }.opponent-left { left: 24px; top: 50%; transform: translateY(-50%) rotate(90deg); }.opponent-right { right: 24px; top: 50%; transform: translateY(-50%) rotate(-90deg); --s-x: 0; --s-y: -4px; --hl-x: -2px; --hl-y: -2px; --hl-inv-x: 2px; --hl-inv-y: 2px; --pip-hl-x: -1px; --pip-hl-y: -1px; --pip-hl-inv-x: 1px; --pip-hl-inv-y: 1px; }.opponent-left .opponent-bid-badge { position: absolute; top: -80px; /* Right of the hand towards the center (since rotated 90deg) */ left: 50%; transform: translateX(-50%) rotate(-90deg); /* Counter-rotate to read horizontally */ }.opponent-right .opponent-bid-badge { position: absolute; top: -80px; /* Left of the hand towards the center (since rotated -90deg) */ left: 50%; transform: translateX(-50%) rotate(90deg); /* Counter-rotate */ }.opponent-top .opponent-bid-badge { position: absolute; bottom: -80px; /* Below the top hand */ left: 50%; transform: translateX(-50%); }.opponent-nw:not(.mobile-opponent-badge) .opponent-bid-badge { position: absolute; bottom: -80px; left: 50%; transform: translateX(-50%) rotate(60deg); }.opponent-ne:not(.mobile-opponent-badge) .opponent-bid-badge { position: absolute; bottom: -80px; left: 50%; transform: translateX(-50%) rotate(-60deg); }.mobile-opponent-badge.opponent-nw .opponent-bid-badge, .mobile-opponent-badge.opponent-ne .opponent-bid-badge { position: absolute; bottom: -80px; left: 50%; transform: translateX(-50%); }.badge-player { position: absolute; top: -80px; /* Above the player's hand */ left: 50%; transform: translateX(-50%); z-index: var(--z-badges); }/* Tighter Snug Fitting when mobile circles replace the thick domino racks natively. E/W have no rule here: their toasts side-center on the circle (top: 50%, line ~165); a stale -60px override once shadowed by !important lived here and raised them. */.mobile-opponent-badge.opponent-top .opponent-bid-badge { bottom: -60px; }.badge-player.mobile-bid { top: -60px; }/* Trump Selection UI */.trump-select-label { display: block; font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-gold); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; text-align: center; }.trump-select-wrapper { position: relative; width: 100%; margin-bottom: 12px; }.trump-select-wrapper::after { content: "▼"; color: var(--color-gold); font-size: var(--text-sm); position: absolute; right: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; }.trump-select { appearance: none; -webkit-appearance: none; width: 100%; height: 52px; border-radius: 8px; background-color: var(--color-brand); color: #fff; border: 1px solid rgba(255, 255, 255, 0.1); padding: 0 40px 0 16px; font-size: var(--text-md); font-weight: var(--weight-bold); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; cursor: pointer; outline: none; transition: border-color 0.2s, box-shadow 0.2s; }.trump-select:focus { border-color: var(--color-gold); box-shadow: 0 0 0 2px rgba(201, 145, 13, 0.2); }.trump-confirm-btn { width: 100%; height: 52px; font-size: var(--text-md); margin-top: 0; }@keyframes badgeEphemeralFade { 0%, 88% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 -5px; pointer-events: none; visibility: hidden; } }.opponent-bid-badge { position: absolute; border-radius: 6px; padding: 4px 10px; font-size: 0.75rem; font-weight: var(--weight-bold); font-family: var(--font-sans); letter-spacing: 0.05em; white-space: nowrap; pointer-events: none; box-shadow: 0 4px 12px rgba(0,0,0,0.5); z-index: var(--z-badges); animation: badgeEphemeralFade 4.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; }/* Spatial offsets globally driven exclusively by relative wrapper scaling *//* Badge colors */.opponent-bid-badge.badge-bid { background-color: rgba(134, 239, 172, 0.15); color: #86efac; border: 1px solid rgba(134, 239, 172, 0.3); }.opponent-bid-badge.badge-pass { background-color: rgba(253, 224, 71, 0.15); color: #fde047; border: 1px solid rgba(253, 224, 71, 0.3); }.opponent-bid-badge.badge-nello { background-color: rgba(196, 181, 253, 0.15); color: #c4b5fd; border: 1px solid rgba(196, 181, 253, 0.3); }.pause-btn { position: absolute; top: 14px; right: 14px; z-index: 30; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 50%; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: rgba(255,255,255,0.6); font-size: 0.9rem; transition: background 0.2s, color 0.2s; }.pause-btn:hover { background: rgba(255,255,255,0.18); color: #fff; }.opponent-hand-container { padding: 12px 16px; border-radius: 16px; gap: var(--opp-gap, 8px); margin: 0; flex-wrap: wrap; }.compass-badge .compass-letter { font-family: 'Cinzel', var(--font-serif), Georgia, serif; font-size: 1.4rem; font-weight: bold; }/* Table Themes */.theme-table-green { --table-bg-base: #0c1a12; --table-bg: radial-gradient(circle at center, #1a3c2a 0%, #0c1a12 100%); --dimmer-bg: rgba(12, 26, 18, 0.7); --theme-accent-rgb: 52, 211, 153; }.theme-table-navy { --table-bg-base: #0d1838; --table-bg: radial-gradient(circle at center, var(--color-brand) 0%, #0d1838 100%); --dimmer-bg: rgba(10, 18, 42, 0.7); --theme-accent-rgb: 56, 189, 248; }.theme-table-red { --table-bg-base: #170505; --table-bg: radial-gradient(circle at center, #3a1515 0%, #170505 100%); --dimmer-bg: rgba(23, 5, 5, 0.7); --theme-accent-rgb: 248, 113, 113; }.theme-table-orange { --table-bg-base: #1e1109; --table-bg: radial-gradient(circle at center, #422513 0%, #1e1109 100%); --dimmer-bg: rgba(30, 17, 9, 0.7); --theme-accent-rgb: 251, 146, 60; }.theme-table-maroon { --table-bg-base: #1a0a12; --table-bg: radial-gradient(circle at center, #3a1424 0%, #1a0a12 100%); --dimmer-bg: rgba(26, 10, 18, 0.7); --theme-accent-rgb: 244, 63, 94; }.theme-table-black { --table-bg-base: #0a0a0c; --table-bg: radial-gradient(circle at center, #1a1a1e 0%, #0a0a0c 100%); --dimmer-bg: rgba(10, 10, 12, 0.7); --theme-accent-rgb: 209, 213, 219; }.theme-table-yellow { --table-bg-base: #201806; --table-bg: radial-gradient(circle at center, #5c4309 0%, #201806 100%); --dimmer-bg: rgba(32, 24, 6, 0.7); --theme-accent-rgb: 251, 191, 36; }.theme-table-purple { --table-bg-base: #0f0514; --table-bg: radial-gradient(circle at center, #2e103c 0%, #0f0514 100%); --dimmer-bg: rgba(15, 5, 20, 0.75); --theme-accent-rgb: 192, 132, 252; }.theme-table-lunar_midnight { --table-bg-base: #090f1a; --table-bg: radial-gradient(circle at center, #17253f 0%, #090f1a 100%); --dimmer-bg: rgba(9, 15, 26, 0.7); --theme-accent-rgb: 147, 197, 253; }.app { /* Shell paints the flat per-theme base; the centered felt radial lives on .main-content (see the base .app rule). */ background: var(--table-bg-base, #121212); transition: background 0.3s ease; }/* Phase 17 Turn Highlight */.active-turn { position: relative; }/* CSS Animation Hint Overhaul Framework */.hint-pulse-glow { /* Prevent interaction clipping over bounds */ position: relative; box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4); /* Tailwind Blue-600 baseline */ animation: hint-glow-loop 1.8s infinite ease-out; }/* Explicitly scale slider thumbs directly leveraging the wrapper pseudo class correctly if it's applied mathematically to input elements */input.hint-pulse-glow::-webkit-slider-thumb { animation: hint-glow-loop-thumb 1.8s infinite ease-out; }input.hint-pulse-glow::-moz-range-thumb { animation: hint-glow-loop-thumb 1.8s infinite ease-out; }@keyframes hint-glow-loop { 0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.5); transform: scale(1); } 50% { box-shadow: 0 0 16px 8px rgba(37, 99, 235, 0.8); transform: scale(1.03); filter: brightness(1.15); } 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); transform: scale(1); } }@keyframes hint-glow-loop-thumb { 0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.6); transform: scale(1); } 50% { box-shadow: 0 0 12px 6px rgba(37, 99, 235, 0.9); transform: scale(1.15); filter: brightness(1.2); } 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); transform: scale(1); } }/* Tablet Slide Drawer Architecture */.tablet-only { display: none; }@media (max-width: 1366px) { .tablet-only { display: flex; } .tablet-icon-strip { width: 60px; background: rgba(18, 20, 24, 0.95); border-right: 1px solid rgba(255,255,255,0.05); flex-direction: column; align-items: center; padding: 16px 0; gap: 16px; z-index: 1201; /* fixed; NOT the nav band — this media includes landscape and portrait must not re-base it */ } .tablet-icon-strip button { background: transparent; border: 1px solid transparent; color: rgba(255,255,255,0.6); cursor: pointer; padding: 12px; border-radius: 12px; transition: background var(--hover-duration), border-color var(--hover-duration), transform var(--active-duration); display: flex; align-items: center; justify-content: center; } @media (hover: hover) { .tablet-icon-strip button:not(:disabled):hover, .tablet-icon-strip button.active { background: var(--hover-lighten); border-color: rgba(255, 255, 255, 0.4); color: #ffffff; } } .tablet-icon-strip button.active { background: rgba(255,255,255,0.1); border-color: rgba(255, 255, 255, 0.4); color: #ffffff; } .tablet-icon-strip button:active:not(:disabled) { color: #ffffff; } .tablet-icon-strip .icon-strip-spacer { flex: 1; } .slide-drawer { position: absolute; /* Using absolute inside `.layout` or fixed on page */ top: 0; left: 60px; bottom: 0; width: 320px; background: rgba(18, 20, 24, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-right: 1px solid rgba(255,255,255,0.1); z-index: 1200; /* fixed; NOT the drawer band — do not re-base */ transform: translateX(-100%); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); flex-direction: column; box-shadow: 20px 0 40px rgba(0,0,0,0.5); } .slide-drawer.drawer-open { transform: translateX(0); } }.drawer-header { position: sticky; top: 0; z-index: 50; background: inherit; display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; border-bottom: 1px solid rgba(255,255,255,0.05); }.drawer-header h3 { margin: 0; font-family: var(--font-sans); color: inherit; }.drawer-close { background: transparent; border: none; color: inherit; font-size: var(--text-xl); cursor: pointer; opacity: 0.6; }/* FB3: pin/popout controls in the trick-history drawer header */.drawer-header-controls { display: flex; align-items: center; gap: 6px; }/* Normalize all header buttons (pin, popout, ×) to identical fixed boxes so they read as one uniform window-control group — the ×'s text-xl glyph box is otherwise wider than the SVG buttons, pushing them visually apart. */.drawer-header-controls .drawer-close, .drawer-control-btn { width: 26px; height: 26px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 4px; min-height: unset; min-width: unset; }.drawer-header-controls .drawer-close { font-size: 18px; line-height: 1; }.drawer-control-btn { background: transparent; border: none; color: inherit; opacity: 0.6; cursor: pointer; transition: opacity 0.2s, background 0.2s; }.drawer-control-btn:hover { opacity: 1; background: rgba(255, 255, 255, 0.08); }/* Active pin state — gold highlight */.drawer-control-btn.pinned { opacity: 1; color: var(--color-gold); }.drawer-content { flex: 1; padding: 16px 24px 24px; box-sizing: border-box; /* Structurally contain padding offsets so they don't bloat the width outwards */ display: block; }.drawer-overlay { line-height: 0; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: var(--z-scrim); background: rgba(0,0,0,0.4); opacity: 0; pointer-events: none; transition: opacity 0.3s; }.drawer-overlay.active { opacity: 1; pointer-events: auto; }/* Unified Badge Strip (Mobile Phase 3) */.badge-strip { width: 100%; height: 28px; background: rgba(0, 0, 0, 0.25); display: flex; align-items: center; justify-content: center; gap: 8px; overflow: hidden; padding: 0 12px; box-sizing: border-box; }.strip-badge { font-family: var(--font-sans); font-size: 0.75rem; font-weight: var(--weight-bold); letter-spacing: 0.05em; padding: 4px 10px; border-radius: 6px; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,0.4); animation: badgeFadeIn var(--duration-fast) var(--ease-in)-out; }@keyframes badgeFadeIn { from { opacity: 0; } to { opacity: 1; } }.badge-trump { color: var(--badge-trump-color); background: var(--badge-trump-bg); border: 1px solid var(--badge-trump-border); }.badge-nello { color: var(--badge-nello-color); background: var(--badge-nello-bg); border: 1px solid var(--badge-nello-border); }.badge-led { color: var(--badge-led-color); background: var(--badge-led-bg); border: 1px solid var(--badge-led-border); }.badge-contract { color: var(--badge-contract-color); background: var(--badge-contract-bg); border: 1px solid var(--badge-contract-border); }.badge-turn { color: var(--badge-turn-color); background: var(--badge-turn-bg); border: 1px solid var(--badge-turn-border); }.badge-pass { color: var(--badge-pass-color); background: var(--badge-pass-bg); border: 1px solid var(--badge-pass-border); }@media (max-width: 767px) { /* Legacy badge offsets cleaned */ }@media (max-width: 767px) { :root { --mobile-nav-height: 52px; --hand-padding-bottom: 0px; } .desktop-hidden { display: none; } .mobile-hud-container { position: relative; /* Converts from disruptive screen overlay into robust top flex item logically stacking before play elements */ width: 100%; z-index: var(--z-panel); flex-shrink: 0; display: flex; flex-direction: column; pointer-events: auto; /* Fully solid HUD area blocks touches beneath */ padding-top: var(--safe-area-top); padding-bottom: 8px; /* Adds space for the appended badges below the score */ } .mobile-hud-container > * { pointer-events: auto; } .player-hand-area { position: fixed; /* Promoted to fixed to resolve iOS visual viewport/safe-area spacing collapses */ bottom: var(--mobile-nav-height); /* Securely lock directly above the global bottom toolbar floating natively */ margin-bottom: 0px; /* Reclaimed the 8px external gap constraint mathematically */ min-height: auto; /* Strip the 200px default that centered it playfully */ justify-content: flex-end; padding-bottom: var(--hand-padding-bottom); z-index: var(--z-hand-raised); /* Forces the active dominoes safely above the interactive modal layers seamlessly */ } /* With flex-end the overlay padding handles placement, so strip the panel's own offset */ .modal-overlay > div, .trump-modal-overlay > div { margin-bottom: 0; /* (0,1,1) outranks the module panel margin without !important */ } .table-brand-watermark { bottom: calc(var(--mobile-nav-height) + 75px); /* Locks natively immediately atop the mobile hand bounding box */ top: auto; left: 50%; right: auto; transform: translateX(-50%); font-size: 0.85rem; /* Minimized unobtrusive typography */ font-weight: var(--weight-bold); opacity: 0.4; /* Further dampens the 0.08 alpha styling */ text-align: center; } .table-logo-watermark, .table-star-watermark { width: 200px; height: 200px; } .opponent-top { top: 4px; } /* Un-override the top: 4px rule to properly dock flush under the scoreboard strip */ .opponent-left { left: 12px; } .opponent-right { right: 12px; } /* Scale DOWN the ephemeral bid toasts securely across mobile avoiding desktop overrides */ .mobile-bid { font-size: 0.72rem; padding: 2px 10px; bottom: -26px; left: 50%; right: auto; top: auto; transform: translateX(-50%); } /* Retain dedicated height boost exclusively for Human so it hops safely past active physical dominoes */ .opponent-bid-badge.badge-player { bottom: calc(var(--mobile-nav-height) + 75px); } }/* Slim phones: scope smaller tiles to play area only (hand keeps 52px) */@media (max-width: 767px) and (max-height: 930px) { .play-area { --tile-width: min(44px, calc((100vw - 32px) / 7)); --tile-height: calc(var(--tile-width) * 2); } }/* Tablet Portrait & Mobile Bottom Nav */@media (max-width: 1366px) and (orientation: portrait) { /* Bottom spacing: margin-bottom reserves room for the fixed 60px nav bar plus the fixed player hand (~tile-height + 20px padding), so the play area's visual center sits between the N badge and the hand top — not behind the hand. padding-bottom pushes flow content up within the main-content block. */ .main-content { padding-bottom: 0px; margin-top: 0px; margin-bottom: 0px; } .play-area { margin-bottom: calc(var(--mobile-nav-height) + var(--tile-height) * 0.5); } .tablet-icon-strip { width: 100%; height: var(--mobile-nav-height); flex-direction: row; position: fixed; bottom: 0; left: 0; right: 0; border-right: none; border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 0 16px; justify-content: space-around; background: rgba(18, 20, 24, 0.98); } .tablet-icon-strip button { flex: 1; max-width: var(--mobile-nav-height); padding: 8px; } .tablet-icon-strip .icon-strip-spacer { display: none; } .slide-drawer { width: 100%; left: 0; bottom: var(--mobile-nav-height); height: calc(100vh - var(--mobile-nav-height)); height: calc(100dvh - var(--mobile-nav-height)); transform: translateY(100%); border-right: none; } .slide-drawer.drawer-open { transform: translateY(0); } .layout { flex-direction: column; } }/* ========================================= UNIFIED PORTRAIT TABLET LAYOUT (768px - 1366px) ========================================= */@media (min-width: 768px) and (max-width: 1366px) and (orientation: portrait) { :root { --mobile-nav-height: 52px; --hand-padding-bottom: 8px; } .layout { flex-direction: column; } .sidebar, .desktop-only-tutorial { display: none; } .mobile-only { display: flex; } .badge-strip { display: none; /* Disabled globally inside portrait tablet to utilize native central trick badges securely */ } .mobile-hud-container { padding-top: var(--safe-area-top); padding-left: 16px; padding-right: 16px; padding-bottom: 8px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; position: relative; /* Embed securely into the column flex resolving dynamic scoreboard height tracking constraints universally */ top: auto; left: auto; right: auto; width: 100%; z-index: var(--z-panel); flex-shrink: 0; pointer-events: auto; /* Fully solid HUD area blocks touches beneath */ } .mobile-hud-container > * { pointer-events: auto; } .player-hand-area { position: fixed; /* Promoted to fixed to resolve iOS visual viewport/safe-area spacing collapses */ bottom: var(--mobile-nav-height); /* Securely lock directly above the global bottom toolbar floating natively */ margin-bottom: 0px; min-height: auto; justify-content: flex-end; padding-bottom: var(--hand-padding-bottom); /* Lifted slightly for portrait comfort natively against the deeper hardware bezel limits */ z-index: var(--z-hand-raised); /* Forces the active dominoes safely above the interactive modal layers seamlessly */ } .universal-bottom-nav, .sidebar-slide-drawer { width: 100vw; position: fixed; z-index: var(--z-drawer); /* portrait re-base */ } .universal-bottom-nav { z-index: var(--z-nav); } .sidebar-slide-drawer { bottom: var(--mobile-nav-height); max-height: calc(100% - var(--mobile-nav-height)); } .drawer-overlay { background: rgba(0,0,0,0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .sidebar-slide-drawer.panel-theme-dark { background: rgba(0, 0, 0, 0.92); } .sidebar-slide-drawer.panel-theme-light { background: rgba(245, 248, 255, 0.92); } /* Inherit logical table flow natively stacked sequentially: Scoreboard -> North Avatar -> Badges -> Play Area */ .opponent-top { top: 16px; margin-left: 0; } /* Compress table bounding box dynamically sliding the flex-calculated native center point securely upwards escaping the massive Hand tiles */ .play-area { margin-bottom: calc(var(--mobile-nav-height) + var(--tile-height) * 0.5); } .table-brand-watermark { bottom: calc(var(--mobile-nav-height) + 188px); /* Position elegantly center-aligned immediately atop the flexible bottom hand */ top: auto; left: 50%; right: auto; transform: translateX(-50%); font-size: 1.2rem; opacity: 0.15; } .opponent-badge-circle { width: 64px; height: 64px; } .badge-count { font-size: 1.5rem; } .badge-icon { font-size: 1.2rem; } }/* ========================================= MOBILE LANDSCAPE HARD LOCK ========================================= */.mobile-landscape-blocker { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg-dark, #0f1218); z-index: var(--z-blocker); justify-content: center; align-items: center; flex-direction: column; color: white; text-align: center; padding: 24px; }.mobile-landscape-blocker .rotate-icon { font-size: 64px; margin-bottom: 24px; animation: rotatePhone 2s infinite ease-in-out; }@keyframes rotatePhone { 0% { transform: rotate(-90deg); } 50% { transform: rotate(0deg); } 100% { transform: rotate(-90deg); } }.mobile-landscape-blocker h2 { font-family: var(--font-sans); font-size: 28px; margin-bottom: 12px; margin-top: 0; }.mobile-landscape-blocker p { color: rgba(255,255,255,0.7); font-size: 18px; max-width: 340px; line-height: 1.4; margin: 0; }/* Trap exclusively smartphones in landscape (max height ~500px, width < 1000px) preventing Tablet overlaps */@media (max-width: 1000px) and (max-height: 500px) and (orientation: landscape) { .mobile-landscape-blocker { display: flex; } }/* Universal Top-HUD Flush Propagations */.mobile-hud-container { border-top: none; border-left: none; border-right: none; border-bottom: none; box-shadow: 0 4px 12px rgba(0,0,0,0.5); }/* Responsive Light Ice Mode Glass Propagations *//* sidebar-slide-drawer now inherits panel surface from var(--panel-*) *//* ========================================= UNIVERSAL MODAL ANCHORING (Phase 18 Core Fix) Forces absolute viewport coordinate mapping for all selector modals, escaping relative parent content containers mapping beneath the HUDs! ========================================= */.modal-overlay.top-level-modal-overlay { /* Above the gameplay-modal band; centering/padding come from the shared BidSlider module base these overlays all import. */ z-index: var(--z-system); }@media (min-width: 768px) and (orientation: landscape) { /* This sidebar offset re-centers GAMEPLAY modals over the play area (which excludes the left sidebar) — trump/nello selectors and the bid slider. It must NOT touch .top-level-modal-overlay: that class is the "universal modal anchoring" band (see above) for app/system modals — auth "Sign in to Play", profile, TOS, report, player-card — which are viewport-anchored and have no gameplay sidebar on screen. Coupling them to the play-area offset shoved the sign-in modal ~sidebar-width/2 right of centre. */ .modal-overlay:not(.top-level-modal-overlay), .trump-modal-overlay { /* !important: module stylesheets inject after App.css, so at equal specificity these landscape offsets need it to beat the module base padding — resolves at the @layer phase. */ padding-left: var(--sidebar-width) !important; padding-top: 0 !important; } }/* ── Shake Bones Dealer Interaction Button ──────────────── */.shake-bones-btn { position: absolute; z-index: var(--z-popover); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; width: 180px; height: 180px; border-radius: 50%; background: rgba(25, 25, 35, 0.45); border: 2px solid rgba(212, 175, 55, 0.7); box-shadow: 0 0 24px rgba(212, 175, 55, 0.25), inset 0 0 20px rgba(255, 255, 255, 0.05); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: #fff; cursor: pointer; outline: none; font-family: 'Cinzel', var(--font-serif), Georgia, serif; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); pointer-events: auto; }/* Pulsing effect using pseudo-element scale/opacity to prevent browser paint loops */.shake-bones-btn::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.45); opacity: 1; animation: shakeBonesGlowPulse 2.5s infinite ease-in-out; z-index: -1; pointer-events: none; }.shake-bones-btn:hover { transform: scale(1.08); border-color: #ffd700; background: rgba(25, 25, 35, 0.65); box-shadow: 0 0 35px rgba(212, 175, 55, 0.55), inset 0 0 30px rgba(212, 175, 55, 0.15); }.shake-bones-btn:active { transform: scale(0.95); transition-duration: 0.1s; }.shake-bones-icon { font-size: 2.8rem; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4)); animation: bonesWiggle 1.5s infinite ease-in-out; }.shake-bones-text { font-size: 0.95rem; font-weight: 900; letter-spacing: 0.12em; color: #ffd700; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8); text-transform: uppercase; }.shake-bones-sub { font-size: 0.65rem; font-weight: bold; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.7); text-transform: uppercase; font-family: var(--font-sans); }@keyframes shakeBonesGlowPulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.08); opacity: 0; } }@keyframes bonesWiggle { 0%, 100% { transform: rotate(0deg) scale(1); } 25% { transform: rotate(-8deg) scale(1.05); } 75% { transform: rotate(8deg) scale(1.05); } }.shake-bones-btn.shaking { cursor: default; animation: buttonRattle 0.15s infinite linear; border-color: #ffd700; box-shadow: 0 0 35px rgba(212, 175, 55, 0.6), inset 0 0 20px rgba(212, 175, 55, 0.2); transform: scale(1.02); }.shake-bones-btn.shaking .shake-bones-icon { animation: iconRattle 0.1s infinite linear; }@keyframes buttonRattle { 0% { transform: translate(0, 0) scale(1.02); } 20% { transform: translate(-2px, 1px) scale(1.02); } 40% { transform: translate(1px, -1px) scale(1.02); } 60% { transform: translate(-1px, -2px) scale(1.02); } 80% { transform: translate(2px, 1px) scale(1.02); } 100% { transform: translate(0, 0) scale(1.02); } }@keyframes iconRattle { 0% { transform: rotate(0deg) scale(1.1); } 25% { transform: rotate(-12deg) scale(1.1); } 75% { transform: rotate(12deg) scale(1.1); } 100% { transform: rotate(0deg) scale(1.1); } }/* Subtle floating offline status toast */.offline-toast { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: var(--z-toast-global); display: flex; align-items: center; gap: 8px; padding: 10px 18px; background: rgba(18, 20, 24, 0.95); border: 1px solid rgba(240, 165, 0, 0.35); border-radius: 8px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); font-family: var(--font-sans); font-size: 0.85rem; font-weight: 500; color: #fff; pointer-events: none; animation: offlineToastFadeIn 0.3s ease-out; transition: opacity 0.3s ease; }.offline-toast.online-status { border-color: rgba(34, 197, 94, 0.35); /* Subtle green border for online transition */ }@keyframes offlineToastFadeIn { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }@keyframes float-count { 0% { translate: -50% -50%; scale: 0.8; opacity: 0; } 15% { translate: calc(-50% + var(--float-dx, 0px) * 0.15) calc(-50% + var(--float-dy, 0px) * 0.15); scale: 1.3; opacity: 1; } 100% { translate: calc(-50% + var(--float-dx, 0px)) calc(-50% + var(--float-dy, 0px)); scale: 0.9; opacity: 0; } }.floating-count { animation: float-count 1.2s ease-out forwards; font-weight: 800; font-size: 1.4rem; pointer-events: none; position: fixed; z-index: var(--z-toast-global); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7); }/* E/W score flyback on portrait: the side seats are compact badges and the default horizontal path crosses the played dominoes. Jump to the seat badge at frame 0 (reusing the JS-computed vector), then drift upward into clear space and fade faster. N/S and all landscape/desktop keep float-count. */@media (max-width: 1366px) and (orientation: portrait) { .floating-count[data-sweep="left"], .floating-count[data-sweep="right"] { animation: float-count-vertical 0.9s ease-out forwards; } }@keyframes float-count-vertical { 0% { translate: calc(-50% + var(--float-dx, 0px)) calc(-50% + var(--float-dy, 0px)); scale: 0.8; opacity: 0; } 15% { translate: calc(-50% + var(--float-dx, 0px)) calc(-50% + var(--float-dy, 0px)); scale: 1.3; opacity: 1; } 100% { translate: calc(-50% + var(--float-dx, 0px)) calc(-50% + var(--float-dy, 0px) - 60px); scale: 0.9; opacity: 0; } }/* Global Floating Chat Button (FAB) */.global-chat-fab { position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px; border-radius: 50%; background: rgba(var(--theme-accent-rgb), 0.85); backdrop-filter: blur(8px); border: 2px solid rgba(255, 255, 255, 0.25); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: var(--z-coach); transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; outline: none; }.global-chat-fab:hover { background: rgb(var(--theme-accent-rgb)); transform: scale(1.05); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); }.global-chat-fab:active { transform: scale(0.95); }.chat-badge-dot { position: absolute; top: 2px; right: 2px; width: 12px; height: 12px; background-color: var(--panel-danger, #e53e3e); border: 2px solid var(--panel-accent, #63b3ed); border-radius: 50%; }.chat-btn-dimmed { opacity: 0.45; filter: grayscale(0.8); }/* Game Over (multiplayer): drop the hand area and bottom nav beneath the Game Over overlay (.gameOverOverlay, position:fixed z-index:100 in MultiplayerGameView.module.css). Must be BELOW 100 — the overlay owns pointer events at game over; its own buttons handle navigation. */.player-hand-area.hand-under-overlay { z-index: 50; }.universal-bottom-nav.nav-under-overlay { z-index: 50; } } @layer modules {._offline-placeholder_1c95q_1 { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 80vh; color: var(--panel-text, #ffffff); padding: 24px; text-align: center; }._offline-icon_1c95q_12 { font-size: 48px; margin-bottom: 16px; }._offline-title_1c95q_17 { font-family: 'Cinzel', Georgia, serif; color: #ffffff; }._offline-text_1c95q_22 { max-width: 400px; opacity: 0.8; margin: 8px 0 24px; font-size: 16px; line-height: 1.5; }._offline-btn_1c95q_30 { padding: 10px 24px; background-color: var(--panel-accent, #F0A500); color: #000000; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 14px; } } @layer modules {._banner_11fds_1 { position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-system); display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: linear-gradient(135deg, rgba(13, 24, 56, 0.97), rgba(26, 48, 112, 0.97)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid rgba(201, 145, 13, 0.3); box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4); animation: _slideUp_11fds_1 0.4s ease-out; transform: translateY(0); transition: transform 0.3s ease-in, opacity 0.3s ease-in; }._banner_11fds_1._dismissing_11fds_21 { transform: translateY(100%); opacity: 0; }@keyframes _slideUp_11fds_1 { from { transform: translateY(100%); } to { transform: translateY(0); } }._icon_11fds_31 { width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }._text_11fds_39 { flex: 1; min-width: 0; }._title_11fds_44 { font-family: 'Cinzel', Georgia, serif; font-size: 14px; font-weight: 700; color: #fff; margin: 0; line-height: 1.2; }._subtitle_11fds_53 { font-size: 12px; color: rgba(255, 255, 255, 0.6); margin: 2px 0 0; line-height: 1.3; }._installBtn_11fds_60 { flex-shrink: 0; padding: 8px 20px; border: none; border-radius: 20px; background: linear-gradient(135deg, #c9910d, #e6a817); color: #0d1838; font-family: 'Inter', system-ui, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; box-shadow: 0 2px 8px rgba(201, 145, 13, 0.3); }._installBtn_11fds_60:active { transform: scale(0.95); /* modules layer outranks the base button:active rule */ }._closeBtn_11fds_81 { flex-shrink: 0; width: 28px; height: 28px; min-width: 28px; min-height: 28px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.5); font-size: 16px; cursor: pointer; padding: 0; line-height: 1; transition: background 0.15s, color 0.15s; }._closeBtn_11fds_81:active { background: rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.8); transform: none; /* modules layer outranks the base button:active rule */ }/* iOS-specific instructions variant */._iosInstructions_11fds_108 { flex: 1; display: flex; flex-direction: column; gap: 4px; }._iosStep_11fds_115 { font-size: 12px; color: rgba(255, 255, 255, 0.7); line-height: 1.3; }._iosStep_11fds_115 strong { color: #e6a817; }/* Hide on desktop — only show on mobile/tablet */@media (min-width: 1024px) { ._banner_11fds_1 { display: none; } }/* Safe area padding for phones with home indicators */@supports (padding-bottom: var(--safe-area-bottom)) { ._banner_11fds_1 { padding-bottom: calc(12px + var(--safe-area-bottom)); } } } @layer modules {/* src/components/BidSlider.css */._modal-overlay_bsz4v_3 { position: fixed; /* was absolute + a global !important forcing fixed — now owned here */ top: 0; left: 0; right: 0; bottom: 0; z-index: var(--z-game-modal); display: flex; align-items: center; justify-content: center; padding: 0 16px; pointer-events: none; }._modal-backdrop_bsz4v_17 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: transparent; z-index: var(--z-backdrop); }._modal-panel_bsz4v_27 { position: relative; z-index: var(--z-game-modal-panel); background: var(--panel-bg); backdrop-filter: blur(var(--panel-blur)); -webkit-backdrop-filter: blur(var(--panel-blur)); border: 1px solid var(--panel-border); border-top: 1px solid var(--panel-border-top); border-radius: 16px; padding: 16px; width: 100%; max-width: 480px; margin-bottom: clamp(60px, 15vh, 120px); /* Dynamically scales the mathematical flex bounding box upwards matching the native 768px breakpoint offset */ box-shadow: var(--panel-shadow); color: var(--panel-text); display: flex; flex-direction: column; gap: 12px; pointer-events: auto; }/* Animations */._slide-in-right_bsz4v_49 { animation: _popInModal_bsz4v_1 var(--duration-base) var(--ease-out) forwards; }._slide-out-left_bsz4v_53 { animation: _popOutModal_bsz4v_1 var(--duration-fast) var(--ease-in) forwards; }@keyframes _popInModal_bsz4v_1 { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }@keyframes _popOutModal_bsz4v_1 { from { transform: scale(1); opacity: 1; } to { transform: scale(0.95); opacity: 0; } }/* Typography & Display */._bids-primary_bsz4v_68 { display: flex; justify-content: space-between; align-items: center; }._your-bid-label_bsz4v_74 { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); color: var(--bid-label-color); text-transform: uppercase; }._highest-bid-label_bsz4v_83 { font-size: var(--text-sm); color: var(--bid-highest-color); font-family: var(--font-sans); }._bid-ai-hint-label_bsz4v_89 { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); color: var(--color-active, var(--color-us)); font-family: var(--font-sans); font-size: 10px; font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.05em; pointer-events: none; z-index: 10; }._bid-value-row_bsz4v_104 { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 16px; margin-top: 8px; }._bid-value-display_bsz4v_113 { font-family: var(--font-serif); font-size: var(--text-3xl); font-weight: 400; color: var(--panel-text-near-black); text-align: center; letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); transition: transform 120ms ease, color 0.2s ease; min-height: 56px; -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; justify-content: center; flex: 1; }._bid-value-marks-sub_bsz4v_130 { font-family: var(--font-sans); font-size: var(--text-xs); letter-spacing: 0.5px; opacity: 0.8; margin-top: -4px; }._bid-pass-shortcut_bsz4v_138, ._bid-confirm-btn_bsz4v_139 { font-family: var(--font-sans); font-size: var(--text-md); font-weight: 500; letter-spacing: var(--tracking-normal); line-height: var(--leading-tight); -webkit-font-smoothing: antialiased; flex: 0 0 80px; /* Fixed width small buttons hugging the number */ }/* Pass Shortcut Button */._bid-pass-shortcut_bsz4v_138 { height: 48px; border-radius: 8px; background: var(--bid-pass-bg); border: 1px solid var(--bid-pass-border); color: var(--bid-pass-text); cursor: pointer; transition: background var(--hover-duration), border-color var(--hover-duration), transform var(--active-duration); }@media (hover: hover) { ._bid-pass-shortcut_bsz4v_138:not(:disabled):hover { background: var(--bid-pass-hover-bg); border-color: var(--bid-pass-hover-border); color: var(--bid-pass-hover-text); } }._bid-pass-shortcut_bsz4v_138:active:not(:disabled) { color: var(--bid-pass-active-text); }/* Slider Track & Wrapping */._slider-wrapper_bsz4v_173 { position: relative; width: 100%; padding: 28px 0 12px 0; }._slider-track-container_bsz4v_179 { position: relative; width: 100%; height: 8px; border-radius: 4px; box-shadow: var(--panel-track-inset); }/* Custom Range Input */._bid-range-input_bsz4v_188 { -webkit-appearance: none; appearance: none; width: calc(100% + 36px); height: 8px; border-radius: 4px; outline: none; background: transparent; padding: 16px 0; /* Touch target inflation */ margin: -16px -18px 0 -18px; /* Offset padding + Thumb width overflow offset */ position: absolute; top: 0; left: 0; z-index: 5; }._bid-range-input_bsz4v_188::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 36px; height: 36px; border-radius: 50%; background-color: var(--bid-thumb-bg); background-image: radial-gradient(circle, var(--thumb-inner, #cbd5e1) 0%, var(--thumb-inner, #cbd5e1) 5px, transparent 6px); border: 4px solid var(--thumb-border, var(--panel-thumb-border)); box-shadow: var(--bid-thumb-shadow); cursor: pointer; transition: border-color 0.2s ease, transform 0.1s ease; position: relative; top: 0px; }._bid-range-input_bsz4v_188._marks-zone_bsz4v_220::-webkit-slider-thumb { background-image: radial-gradient(circle, var(--thumb-inner, var(--color-us)) 0%, var(--thumb-inner, var(--color-us)) 5px, transparent 6px); }._bid-range-input_bsz4v_188::-webkit-slider-thumb:active { transform: scale(1.15); }._bid-range-input_bsz4v_188:disabled { opacity: 0.25; }._bid-range-input_bsz4v_188::-moz-range-thumb { width: 36px; height: 36px; border-radius: 50%; background-color: var(--bid-thumb-bg); background-image: radial-gradient(circle, var(--thumb-inner, #cbd5e1) 0%, var(--thumb-inner, #cbd5e1) 5px, transparent 6px); border: 4px solid var(--thumb-border, var(--panel-thumb-border)); box-shadow: var(--bid-thumb-shadow); cursor: pointer; transition: border-color 0.2s ease, transform 0.1s ease; }._bid-range-input_bsz4v_188._marks-zone_bsz4v_220::-moz-range-thumb { background-image: radial-gradient(circle, var(--thumb-inner, var(--color-us)) 0%, var(--thumb-inner, var(--color-us)) 5px, transparent 6px); }._zone-divider_bsz4v_248 { position: absolute; top: -8px; width: 2px; height: 24px; background: var(--bid-zone-divider); transform: translateX(-50%); pointer-events: none; z-index: 10; }._zone-label-above_bsz4v_259 { position: absolute; top: -24px; left: 50%; transform: translateX(-50%); color: var(--color-active, var(--color-us)); font-size: 9px; font-weight: var(--weight-bold); font-family: var(--font-sans); z-index: 10; white-space: nowrap; }._slider-ticks_bsz4v_272 { position: relative; width: 100%; height: 12px; margin-top: 24px; }._slider-ticks_bsz4v_272 span { font-size: var(--text-xs); font-family: var(--font-sans); }._slider-ticks_bsz4v_272 ._tick-muted_bsz4v_284 { color: var(--bid-tick-muted); }._slider-ticks_bsz4v_272 ._tick-subdued_bsz4v_288 { color: var(--bid-tick-subdued); }._slider-ticks_bsz4v_272 ._tick-marks-active_bsz4v_292 { color: var(--color-active, var(--color-us)); font-weight: 600; }/* Confirm Bid Button — doubled selector for specificity over .panel-theme-light button */._bid-confirm-btn_bsz4v_139._bid-confirm-btn_bsz4v_139 { height: 48px; border-radius: 8px; background: var(--color-active, var(--color-us)); border: 1px solid var(--bid-confirm-border); color: var(--bid-confirm-text); cursor: pointer; box-shadow: 0 4px 16px var(--shadow-active, rgba(11, 80, 219, 0.3)); transition: background var(--hover-duration), transform var(--active-duration), box-shadow var(--hover-duration), opacity var(--hover-duration); }@media (hover: hover) { ._bid-confirm-btn_bsz4v_139:not(._disabled-look_bsz4v_310):not(:disabled):hover { filter: brightness(1.15); border-color: var(--bid-confirm-hover-border); } }._bid-confirm-btn_bsz4v_139:active:not(._disabled-look_bsz4v_310):not(:disabled) { transform: var(--active-scale); filter: brightness(1.25); }._bid-confirm-btn_bsz4v_139:disabled { background: transparent; border-color: var(--bid-confirm-disabled-border); color: var(--bid-confirm-disabled-text); cursor: not-allowed; pointer-events: none; }._bid-confirm-btn_bsz4v_139._disabled-look_bsz4v_310 { background: transparent; border-color: var(--bid-confirm-dim-border); color: var(--bid-confirm-dim-text); pointer-events: auto; }/* Special Contracts Row */._special-contracts-row_bsz4v_337 { display: flex; justify-content: space-between; gap: 8px; width: 100%; }._special-pill_bsz4v_344 { flex: 1; height: 48px; border-radius: 8px; background: var(--bid-special-bg); border: 1px solid var(--bid-special-border); color: var(--bid-special-text); font-family: var(--font-sans); font-size: var(--text-md); font-weight: 500; letter-spacing: var(--tracking-normal); line-height: var(--leading-tight); -webkit-font-smoothing: antialiased; cursor: pointer; transition: background var(--hover-duration), border-color var(--hover-duration), transform var(--active-duration); }@media (hover: hover) { ._special-pill_bsz4v_344:not(:disabled):hover { background: var(--bid-special-hover-bg); border-color: var(--bid-special-hover-border); color: var(--bid-special-hover-text); } }._special-pill_bsz4v_344:active:not(:disabled) { color: var(--bid-special-active-text); }/* Removed legacy mobile padding offset hacks due to universal CSS mathematical margins resolving flex bounds securely *//* CSS Animation Hint Overhaul Framework */._hint-pulse-glow_bsz4v_376 { position: relative; box-shadow: 0 0 0 0 rgba(96, 165, 250, 0.4); animation: _hint-glow-loop_bsz4v_1 1.8s infinite ease-out; }input._hint-pulse-glow_bsz4v_376::-webkit-slider-thumb { animation: _hint-glow-loop-thumb_bsz4v_1 1.8s infinite ease-out; }input._hint-pulse-glow_bsz4v_376::-moz-range-thumb { animation: _hint-glow-loop-thumb_bsz4v_1 1.8s infinite ease-out; }@keyframes _hint-glow-loop_bsz4v_1 { 0% { box-shadow: 0 0 0 0 rgba(96, 165, 250, 0.5); transform: scale(1); } 50% { box-shadow: 0 0 16px 8px rgba(96, 165, 250, 0.8); transform: scale(1.03); filter: brightness(1.15); } 100% { box-shadow: 0 0 0 0 rgba(96, 165, 250, 0); transform: scale(1); } }@keyframes _hint-glow-loop-thumb_bsz4v_1 { 0% { box-shadow: 0 0 0 0 rgba(96, 165, 250, 0.6); transform: scale(1); } 50% { box-shadow: 0 0 12px 6px rgba(96, 165, 250, 0.9); transform: scale(1.15); filter: brightness(1.2); } 100% { box-shadow: 0 0 0 0 rgba(96, 165, 250, 0); transform: scale(1); } }._forced-bid-banner_bsz4v_401 { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--bid-forced-banner-bg, linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(184, 134, 11, 0.1) 100%)); border: 1px solid var(--bid-forced-banner-border, rgba(212, 175, 55, 0.35)); border-radius: 8px; padding: 8px 12px; font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--bid-forced-banner-text, #ffd700); text-shadow: var(--bid-forced-banner-text-shadow, 0 1px 2px rgba(0, 0, 0, 0.5)); letter-spacing: 0.05em; text-transform: uppercase; z-index: 1; }/* Pulsing effect using pseudo-element scale/opacity to prevent browser paint loops */._forced-bid-banner_bsz4v_401::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 8px; box-shadow: 0 0 0 3px var(--bid-forced-banner-pulse, rgba(212, 175, 55, 0.45)); opacity: 1; animation: _forcedBidPulse_bsz4v_1 2s infinite ease-in-out; z-index: -1; pointer-events: none; }._forced-bid-icon_bsz4v_437 { animation: _iconShake_bsz4v_1 1.5s infinite ease-in-out; display: inline-block; }@keyframes _forcedBidPulse_bsz4v_1 { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.02, 1.12); opacity: 0; } }@keyframes _iconShake_bsz4v_1 { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }@media (max-width: 768px) { ._modal-overlay_bsz4v_3 { align-items: center; padding-top: 0; padding-bottom: 0; } ._modal-panel_bsz4v_27 { margin-bottom: 0; padding: 12px; gap: 8px; } ._bid-pass-shortcut_bsz4v_138, ._bid-confirm-btn_bsz4v_139 { height: 40px; font-size: var(--text-sm); flex: 0 0 70px; } ._bid-value-display_bsz4v_113 { min-height: 44px; font-size: var(--text-2xl); } ._bid-value-marks-sub_bsz4v_130 { font-size: 10px; margin-top: -2px; } ._slider-wrapper_bsz4v_173 { padding: 18px 0 8px 0; } ._zone-label-above_bsz4v_259 { top: -18px; font-size: 8px; } ._slider-ticks_bsz4v_272 { margin-top: 16px; } ._special-pill_bsz4v_344 { height: 40px; font-size: var(--text-sm); } ._forced-bid-banner_bsz4v_401 { padding: 6px 10px; font-size: 10px; } }._capped-explanation_bsz4v_498 { font-family: var(--font-sans); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--panel-text-secondary); text-align: center; margin: 12px 0; padding: 12px; background: var(--panel-card-bg); border: 1px solid var(--panel-card-border); border-radius: 8px; }@media (max-height: 520px) { ._modal-panel_bsz4v_27 { max-height: 95vh; overflow-y: auto; } } } @layer modules {._tos-modal-inner_u44ca_1 { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; padding: 24px 20px; max-height: 85vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }/* Title */._tos-title_u44ca_14 { font-family: 'Cinzel', Georgia, 'Times New Roman', serif; font-size: var(--text-2xl, 28px); letter-spacing: 2px; margin: 0 0 6px 0; color: #fff; }/* Subtitle: effective date + version */._tos-subtitle_u44ca_23 { font-family: var(--font-sans, system-ui, sans-serif); font-size: 0.85rem; color: rgba(255, 255, 255, 0.45); margin: 0 0 20px 0; letter-spacing: 0.5px; }/* Intro paragraph */._tos-intro_u44ca_32 { color: rgba(255, 255, 255, 0.8); font-size: var(--text-base, 1rem); line-height: 1.6; margin: 0 0 20px 0; text-align: left; width: 100%; }/* Links row */._tos-links_u44ca_42 { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-bottom: 24px; }._tos-link_u44ca_42 { display: inline-flex; align-items: center; gap: 6px; color: #F0A500; font-size: 0.95rem; font-weight: 500; text-decoration: none; transition: color 0.2s, opacity 0.2s; }._tos-link_u44ca_42:hover { color: #ffc847; text-decoration: underline; }._tos-link_u44ca_42 svg { flex-shrink: 0; opacity: 0.7; }/* Checkbox row */._tos-checkbox-row_u44ca_72 { display: flex; align-items: flex-start; gap: 12px; width: 100%; margin-bottom: 20px; text-align: left; cursor: pointer; user-select: none; }._tos-checkbox-input_u44ca_83 { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; min-width: 22px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 4px; background: rgba(0, 0, 0, 0.3); cursor: pointer; position: relative; margin-top: 1px; transition: border-color 0.2s, background 0.2s; }._tos-checkbox-input_u44ca_83:checked { background: #F0A500; border-color: #F0A500; }._tos-checkbox-input_u44ca_83:checked::after { content: ''; position: absolute; top: 3px; left: 6px; width: 6px; height: 10px; border: solid #0a1628; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }._tos-checkbox-input_u44ca_83:focus-visible { outline: 2px solid #F0A500; outline-offset: 2px; }._tos-checkbox-label_u44ca_120 { color: rgba(255, 255, 255, 0.85); font-size: 0.95rem; line-height: 1.5; }/* Primary button — amber */._tos-btn-primary_u44ca_127 { width: 100%; min-height: 52px; border-radius: 12px; font-family: var(--font-sans, system-ui, sans-serif); font-size: 1.05rem; font-weight: 700; letter-spacing: 0.5px; cursor: pointer; background: #F0A500; color: #0a1628; border: none; transition: background 0.2s, filter 0.2s, transform 0.1s, opacity 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 16px; }._tos-btn-primary_u44ca_127:not(:disabled):hover { background: #ffba2e; filter: brightness(1.05); }._tos-btn-primary_u44ca_127:active:not(:disabled) { transform: scale(0.97); }._tos-btn-primary_u44ca_127:disabled { background: rgba(240, 165, 0, 0.2); color: rgba(255, 255, 255, 0.3); cursor: not-allowed; }/* Inline spinner */._tos-spinner_u44ca_163 { width: 18px; height: 18px; border: 2.5px solid rgba(10, 22, 40, 0.3); border-top-color: #0a1628; border-radius: 50%; animation: _tos-spin_u44ca_163 0.7s linear infinite; }@keyframes _tos-spin_u44ca_163 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }/* Error text */._tos-error_u44ca_178 { color: #fca5a5; font-size: 0.88rem; margin: -8px 0 12px 0; text-align: center; width: 100%; }/* Sign out link */._tos-signout_u44ca_187 { color: rgba(255, 255, 255, 0.4); font-size: 0.88rem; background: none; border: none; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 4px 8px; transition: color 0.2s; }._tos-signout_u44ca_187:hover { color: rgba(255, 255, 255, 0.7); }._tos-signout_u44ca_187:focus-visible { outline: 2px solid #F0A500; outline-offset: 2px; border-radius: 4px; } } @layer modules {._birthdate-modal-inner_fxwlg_1 { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding: 16px; }._birthdate-modal-inner_fxwlg_1 h2 { font-family: 'Cinzel', Georgia, 'Times New Roman', serif; font-size: var(--text-2xl, 28px); letter-spacing: 2px; margin: 0; color: #fff; }._birthdate-prompt_fxwlg_18 { color: rgba(255, 255, 255, 0.8); font-size: var(--text-base, 1rem); margin: 0 0 16px 0; line-height: 1.5; display: block; }._select-row_fxwlg_26 { display: flex; gap: 16px; width: 100%; margin-bottom: 8px; }._birthdate-select_fxwlg_33 { box-sizing: border-box; flex: 1; height: 52px; background: rgba(0, 0, 0, 0.3); border: 1.5px solid rgba(255, 255, 255, 0.2); border-radius: 8px; color: #ffffff; font-family: var(--font-sans, system-ui, sans-serif); font-size: var(--text-md, 1.1rem); padding: 0 12px; outline: none; transition: border-color 0.2s; cursor: pointer; }._birthdate-select_fxwlg_33 option { background: #0d1b2e; color: #ffffff; }._birthdate-select_fxwlg_33:focus { border-color: var(--color-gold, #c9910d); background: rgba(0, 0, 0, 0.5); }._error-text_fxwlg_59 { color: #fca5a5; font-size: 0.9rem; margin-top: -8px; margin-bottom: 16px; }._btn-primary_fxwlg_66 { width: 100%; min-height: 52px; border-radius: 12px; font-family: var(--font-serif, Georgia, serif); font-size: 1.1rem; font-weight: bold; cursor: pointer; background: rgba(201, 145, 13, 0.12); color: #ffffff; border: 1px solid var(--color-gold, #c9910d); transition: background 0.2s, border-color 0.2s, filter 0.2s, transform 0.1s; }._btn-primary_fxwlg_66:not(:disabled):hover { background: rgba(201, 145, 13, 0.22); filter: brightness(1.15); }._btn-primary_fxwlg_66:active:not(:disabled) { transform: scale(0.96); }._btn-primary_fxwlg_66:disabled { background: transparent; border-color: rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.3); cursor: not-allowed; }._signout-button_fxwlg_96 { background: transparent; border: none; color: rgba(255, 255, 255, 0.5); font-size: 0.9rem; cursor: pointer; text-decoration: underline; margin-top: 8px; transition: color 0.2s; }._signout-button_fxwlg_96:hover { color: rgba(255, 255, 255, 0.8); } } @layer modules {._handle-modal-inner_ljwl3_1 { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding: 16px; }._handle-modal-inner_ljwl3_1 h2 { font-family: 'Cinzel', Georgia, 'Times New Roman', serif; font-size: var(--text-2xl, 28px); letter-spacing: 2px; margin: 0; color: #fff; }._handle-modal-inner_ljwl3_1 p, ._handle-prompt_ljwl3_19 { color: rgba(255, 255, 255, 0.8); font-size: var(--text-base, 1rem); margin: 0 0 16px 0; line-height: 1.5; display: block; }._input-row_ljwl3_27 { position: relative; width: 100%; margin-bottom: 8px; }._handle-input_ljwl3_33 { box-sizing: border-box; width: 100%; height: 52px; background: rgba(0, 0, 0, 0.3); border: 1.5px solid rgba(255, 255, 255, 0.2); border-radius: 8px; color: #ffffff; font-family: var(--font-sans, system-ui, sans-serif); font-size: var(--text-md, 1.2rem); padding: 0 48px 0 16px; outline: none; transition: border-color 0.2s; }._handle-input_ljwl3_33:focus { border-color: var(--color-gold, #c9910d); background: rgba(0, 0, 0, 0.5); }._status-icon_ljwl3_53 { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; }._status-valid_ljwl3_63 { color: #4ade80; }._status-invalid_ljwl3_67 { color: #f87171; }._status-loading_ljwl3_71 { color: var(--color-gold, #c9910d); animation: _spin_ljwl3_1 1s linear infinite; }@keyframes _spin_ljwl3_1 { from { transform: translateY(-50%) rotate(0deg); } to { transform: translateY(-50%) rotate(360deg); } }._char-counter_ljwl3_81 { text-align: right; width: 100%; font-size: 0.85rem; color: rgba(255, 255, 255, 0.5); margin-top: -12px; margin-bottom: 16px; }._error-text_ljwl3_90 { color: #fca5a5; font-size: 0.9rem; margin-top: -8px; margin-bottom: 16px; }._btn-primary_ljwl3_97 { width: 100%; min-height: 52px; border-radius: 12px; font-family: var(--font-serif, Georgia, serif); font-size: 1.1rem; font-weight: bold; cursor: pointer; background: rgba(201, 145, 13, 0.12); color: #ffffff; border: 1px solid var(--color-gold, #c9910d); transition: background 0.2s, border-color 0.2s, filter 0.2s, transform 0.1s; }._btn-primary_ljwl3_97:not(:disabled):hover { background: rgba(201, 145, 13, 0.22); filter: brightness(1.15); }._btn-primary_ljwl3_97:active:not(:disabled) { transform: scale(0.96); }._btn-primary_ljwl3_97:disabled { background: transparent; border-color: rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.3); cursor: not-allowed; } } @layer modules {._link-modal-inner_knop5_1 { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding: 16px; }._link-modal-inner_knop5_1 h2 { font-family: 'Cinzel', Georgia, 'Times New Roman', serif; font-size: var(--text-2xl, 28px); letter-spacing: 2px; margin: 0; color: #fff; }._link-modal-inner_knop5_1 p { color: rgba(255, 255, 255, 0.8); font-size: var(--text-base, 1rem); margin: 0 0 8px 0; line-height: 1.5; }._error-text_knop5_25 { color: #fca5a5; font-size: 0.9rem; margin-top: -8px; margin-bottom: 8px; }._btn-primary_knop5_32 { width: 100%; min-height: 52px; border-radius: 12px; font-family: var(--font-serif, Georgia, serif); font-size: 1.1rem; font-weight: bold; cursor: pointer; background: rgba(201, 145, 13, 0.12); color: #ffffff; border: 1px solid var(--color-gold, #c9910d); transition: background 0.2s, border-color 0.2s, filter 0.2s, transform 0.1s; }._btn-primary_knop5_32:not(:disabled):hover { background: rgba(201, 145, 13, 0.22); filter: brightness(1.15); }._btn-primary_knop5_32:active:not(:disabled) { transform: scale(0.96); }._btn-primary_knop5_32:disabled { background: transparent; border-color: rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.3); cursor: not-allowed; }._btn-secondary_knop5_62 { width: 100%; min-height: 44px; border-radius: 12px; font-family: var(--font-serif, Georgia, serif); font-size: 1rem; font-weight: 500; cursor: pointer; background: transparent; color: rgba(255, 255, 255, 0.6); border: 1px solid rgba(255, 255, 255, 0.15); transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.1s; }._btn-secondary_knop5_62:not(:disabled):hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.8); }._btn-secondary_knop5_62:active:not(:disabled) { transform: scale(0.96); }._btn-secondary_knop5_62:disabled { color: rgba(255, 255, 255, 0.2); cursor: not-allowed; }/* --- Inline Email/Password Link Form --- */._link-form_knop5_93 { display: flex; flex-direction: column; gap: 10px; width: 100%; }._link-input_knop5_100 { width: 100%; min-height: 44px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.06); color: #ffffff; font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, sans-serif); font-size: var(--text-base, 1rem); outline: none; transition: border-color 0.2s, background 0.2s; box-sizing: border-box; }._link-input_knop5_100::placeholder { color: rgba(255, 255, 255, 0.35); }._link-input_knop5_100:focus { border-color: var(--color-gold, #c9910d); background: rgba(255, 255, 255, 0.09); } } @layer modules {/* AnimatedEffect.module.css — Clean, rotating dashed/dotted ring animations. * * Each effect style is parameterized via inline CSS custom properties * injected by AnimatedEffect.tsx: * --effect-color: The primary color of the ring border * --effect-duration: Time for one full rotation (e.g. 5s, 8s, 12s) * --effect-border-width: Thickness of the ring border (e.g. 2px, 3px) * --effect-border-style: Pattern of the border (e.g. dashed, dotted) * --effect-direction: Direction of rotation (normal, reverse) */._effectWrapper_1wq1s_12 { position: relative; display: inline-flex; border-radius: 50%; isolation: isolate; /* keeps pseudo-elements within the local stacking context */ }/* * Render a clean, rotating dashed/dotted overlay ring around the avatar image. * Matches the style from the admin player card modal. */._effectWrapper_1wq1s_12::after { content: ''; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; border-radius: 50%; border-width: var(--effect-border-width, 2px); border-style: var(--effect-border-style, dashed); border-color: var(--effect-color, currentColor); animation: _rotateEffect_1wq1s_1 var(--effect-duration, 8s) linear infinite; animation-direction: var(--effect-direction, normal); pointer-events: none; z-index: 10; filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.85)); }@keyframes _rotateEffect_1wq1s_1 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }/* * Keep class exports for catalog compatibility. * The actual styling is unified under .effectWrapper::after. */._effectPulse_1wq1s_54 {}._effectSheen_1wq1s_55 {}._effectSonar_1wq1s_56 {}._effectSweep_1wq1s_57 {}._effectCascade_1wq1s_58 {}._effectStamp_1wq1s_59 {}._effectHorns_1wq1s_60 {}._effectRadiant_1wq1s_61 {} } @layer modules {/* Shared styling for achievement cosmetics and rarity rings */[class*="ring-"] { position: relative; }[class*="ring-"]::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--panel-ring-inset, rgba(10, 22, 40, 0.5)); pointer-events: none; z-index: 2; }._ring-base_dpxyd_17 { box-shadow: 0 0 0 2px var(--panel-ring-inset, rgba(10, 22, 40, 0.5)), 0 0 0 4px rgba(255, 255, 255, 0.1); }._ring-mesquite_dpxyd_21 { box-shadow: 0 0 0 2px var(--panel-ring-inset, rgba(10, 22, 40, 0.5)), 0 0 0 4px #C4A882; }._ring-pecan_dpxyd_25 { box-shadow: 0 0 0 2px var(--panel-ring-inset, rgba(10, 22, 40, 0.5)), 0 0 0 4px #F0A500; }._ring-bluebonnet_dpxyd_29 { box-shadow: 0 0 0 2px var(--panel-ring-inset, rgba(10, 22, 40, 0.5)), 0 0 0 4px #60a5fa; }._ring-longhorn_dpxyd_33 { box-shadow: 0 0 0 2px var(--panel-ring-inset, rgba(10, 22, 40, 0.5)), 0 0 0 4px #ea580c; }._ring-lone_star_dpxyd_37 { box-shadow: 0 0 0 2px var(--panel-ring-inset, rgba(10, 22, 40, 0.5)), 0 0 0 4px #FFD700; } } @layer modules {/* BadgeShowcaseDisplay — Shared badge showcase styles Private variant: 64px interactive slots with empty placeholders Public variant: 56px static slots, no placeholders *//* --------------------------------------------------------------------------- Row container --------------------------------------------------------------------------- */._badge-row_1lh2p_9 { display: flex; justify-content: center; gap: 16px; margin-bottom: 24px; }._badge-row-public_1lh2p_16 { display: flex; justify-content: center; gap: 16px; margin-bottom: 32px; }/* --------------------------------------------------------------------------- Slot — Private (64px, interactive) --------------------------------------------------------------------------- */._badge-slot_1lh2p_27 { width: 64px; height: 64px; border-radius: 50%; overflow: visible; cursor: pointer; transition: transform 150ms ease; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; will-change: transform; background: var(--panel-avatar-bg, rgba(255, 255, 255, 0.08)); }._badge-slot_1lh2p_27 img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; pointer-events: none; }@media (hover: hover) { ._badge-slot_1lh2p_27:hover { transform: scale(1.25); z-index: 5; } }._badge-slot_1lh2p_27:active { transform: scale(0.95); }/* --------------------------------------------------------------------------- Slot — Public (56px, static) --------------------------------------------------------------------------- */._badge-slot-public_1lh2p_66 { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--panel-avatar-bg, rgba(255, 255, 255, 0.08)); }._badge-slot-public_1lh2p_66 img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; pointer-events: none; }/* --------------------------------------------------------------------------- Empty placeholder (private only) --------------------------------------------------------------------------- */._badge-slot-empty_1lh2p_89 { border: 2px dashed rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.02); }._badge-empty-icon_1lh2p_94 { color: rgba(255, 255, 255, 0.12); font-size: 20px; line-height: 1; }/* --------------------------------------------------------------------------- Hint text (private only, shown when no badges unlocked) --------------------------------------------------------------------------- */._badge-hint_1lh2p_104 { font-family: 'Inter', sans-serif; font-size: 11px; color: rgba(255, 255, 255, 0.25); text-align: center; margin: 12px 0 0 0; }/* Badge showcase light overrides now resolved via var(--panel-*) */ } @layer modules {._player-card-panel_t7kik_1 { box-sizing: border-box; max-width: 420px; width: 95%; max-height: 90vh; padding: 24px 20px 20px; border-radius: 16px; box-shadow: var(--panel-shadow, 0 10px 40px rgba(0, 0, 0, 0.6)); position: relative; z-index: 10; overflow-y: auto; scrollbar-width: thin; background: var(--panel-bg); border: 1px solid var(--panel-border); backdrop-filter: blur(var(--panel-blur, 16px)); -webkit-backdrop-filter: blur(var(--panel-blur, 16px)); color: var(--panel-text); display: flex; flex-direction: column; }._player-card-panel_t7kik_1.panel-theme-dark { background: rgba(0, 0, 0, 0.92); }._modal-backdrop_t7kik_26 { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; }._close-btn_t7kik_35 { position: absolute; top: 16px; right: 16px; background: transparent; border: none; color: inherit; font-size: var(--text-xl, 1.5rem); font-family: var(--font-sans); font-weight: normal; cursor: pointer; padding: 4px; line-height: 1; opacity: 0.6; transition: opacity 0.2s; display: flex; align-items: center; justify-content: center; }._close-btn_t7kik_35:hover { opacity: 1; }/* Loading */._loading-container_t7kik_60 { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 0; text-align: center; }._spinner_t7kik_69 { width: 40px; height: 40px; border: 4px solid var(--panel-divider, rgba(255, 255, 255, 0.15)); border-left-color: var(--color-gold); border-radius: 50%; animation: _spin_t7kik_69 1s linear infinite; margin-bottom: 16px; }@keyframes _spin_t7kik_69 { to { transform: rotate(360deg); } }/* Content Layout */._card-content_t7kik_84 { display: flex; flex-direction: column; align-items: center; width: 100%; }._card-header_t7kik_91 { display: flex; flex-direction: row; align-items: center; width: 100%; gap: 16px; margin-bottom: 12px; }._avatar-wrap_t7kik_100 { width: 72px; height: 72px; position: relative; border-radius: 50%; background: var(--panel-avatar-bg, rgba(15, 23, 42, 0.4)); flex-shrink: 0; }._avatar-display_t7kik_109 { width: 100%; height: 100%; border-radius: 50%; }._header-meta_t7kik_115 { display: flex; flex-direction: column; flex: 1; min-width: 0; align-items: flex-start; text-align: left; }._handle-row_t7kik_124 { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px; }._player-handle_t7kik_132 { font-family: 'Cinzel', Georgia, serif; font-size: 22px; font-weight: 700; margin: 0; color: var(--panel-heading, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 1px; }._view-profile-link_t7kik_144 { font-size: 11px; font-weight: 600; color: var(--color-gold); background: transparent; border: none; cursor: pointer; padding: 2px 6px; border-radius: 4px; transition: opacity 0.2s, background-color 0.2s; white-space: nowrap; min-height: auto; min-width: auto; }._view-profile-link_t7kik_144:hover { background-color: var(--panel-btn-hover-bg); }._title-ladder-badge_t7kik_163 { font-size: 11px; font-weight: 600; color: var(--color-gold); background: var(--coaching-bg-start, rgba(234, 179, 8, 0.08)); border: 1px solid var(--panel-rating-card-border, rgba(201, 145, 13, 0.2)); padding: 1px 8px; border-radius: 12px; margin-top: 4px; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }._level-indicator_t7kik_177 { font-size: 12px; color: var(--panel-text-secondary, rgba(255, 255, 255, 0.7)); margin: 0; font-weight: 500; }._card-divider_t7kik_184 { width: 100%; height: 14px; margin: 8px 0 12px; display: block; }/* Badges Showcase */._badges-section_t7kik_192 { width: 100%; display: flex; justify-content: center; margin-bottom: 12px; padding: 4px 0; }/* Table CTAs */._table-ctas-row_t7kik_201 { display: flex; gap: 12px; width: 100%; margin-bottom: 14px; }._table-link-btn_t7kik_208 { flex: 1; display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; background: #F0A500; border: 1px solid #F0A500; color: #111827; border-radius: 20px; cursor: pointer; transition: all 0.2s ease; min-height: 40px; }._table-link-btn_t7kik_208:hover { filter: brightness(1.15); }/* ── Table theme colors for Join Table CTA ── */.theme-table-green ._table-link-btn_t7kik_208:not(._view-profile-btn_t7kik_228):not(._table-watch-btn_t7kik_228) { background: #15803d; border-color: #15803d; color: #ffffff; }.theme-table-navy ._table-link-btn_t7kik_208:not(._view-profile-btn_t7kik_228):not(._table-watch-btn_t7kik_228) { background: #1d4ed8; border-color: #1d4ed8; color: #ffffff; }.theme-table-red ._table-link-btn_t7kik_208:not(._view-profile-btn_t7kik_228):not(._table-watch-btn_t7kik_228) { background: #b91c1c; border-color: #b91c1c; color: #ffffff; }.theme-table-orange ._table-link-btn_t7kik_208:not(._view-profile-btn_t7kik_228):not(._table-watch-btn_t7kik_228) { background: #c2410c; border-color: #c2410c; color: #ffffff; }.theme-table-maroon ._table-link-btn_t7kik_208:not(._view-profile-btn_t7kik_228):not(._table-watch-btn_t7kik_228) { background: #be123c; border-color: #be123c; color: #ffffff; }.theme-table-black ._table-link-btn_t7kik_208:not(._view-profile-btn_t7kik_228):not(._table-watch-btn_t7kik_228) { background: #374151; border-color: #374151; color: #ffffff; }.theme-table-yellow ._table-link-btn_t7kik_208:not(._view-profile-btn_t7kik_228):not(._table-watch-btn_t7kik_228) { background: #a16207; border-color: #a16207; color: #ffffff; }.theme-table-purple ._table-link-btn_t7kik_208:not(._view-profile-btn_t7kik_228):not(._table-watch-btn_t7kik_228) { background: #7e22ce; border-color: #7e22ce; color: #ffffff; }.theme-table-lunar_midnight ._table-link-btn_t7kik_208:not(._view-profile-btn_t7kik_228):not(._table-watch-btn_t7kik_228) { background: #1e3a8a; border-color: #1e3a8a; color: #ffffff; }._table-watch-btn_t7kik_228, ._view-profile-btn_t7kik_228 { background: var(--panel-btn-bg, rgba(255, 255, 255, 0.05)); border: 1px solid var(--panel-btn-border, rgba(255, 255, 255, 0.12)); color: var(--panel-text); }._table-watch-btn_t7kik_228:hover, ._view-profile-btn_t7kik_228:hover { background: var(--panel-btn-hover-bg, rgba(255, 255, 255, 0.1)); border-color: var(--panel-btn-hover-border, rgba(255, 255, 255, 0.4)); color: var(--panel-text); filter: none; }._table-btn-label_t7kik_289 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: inherit; }._error-notice_t7kik_297 { background: rgba(229, 62, 62, 0.1); border: 1px solid rgba(229, 62, 62, 0.3); padding: 10px 14px; border-radius: 8px; width: 100%; box-sizing: border-box; margin-bottom: 12px; }._error-notice_t7kik_297 p { margin: 0; font-size: 13px; color: #fc8181; text-align: center; }/* Tabs */._modal-tabs_t7kik_315 { display: flex; width: 100%; border-bottom: 1px solid var(--panel-divider, rgba(255, 255, 255, 0.08)); margin-bottom: 16px; gap: 8px; }._tab-btn_t7kik_323 { flex: 1; background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--panel-text); opacity: 0.6; font-size: 13px; font-weight: 600; padding: 10px 0; cursor: pointer; transition: all 0.2s ease; outline: none; min-height: auto; }._tab-btn_t7kik_323:hover { opacity: 0.85; border-bottom-color: var(--panel-border); }._tab-btn_t7kik_323._active_t7kik_344 { color: var(--color-gold); border-bottom-color: var(--color-gold); opacity: 1; }._modal-body_t7kik_350 { width: 100%; min-height: 200px; display: flex; flex-direction: column; }@keyframes _fadeIn_t7kik_1 { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }._tab-pane-fade_t7kik_362 { animation: _fadeIn_t7kik_1 0.22s ease-out; display: flex; flex-direction: column; width: 100%; }/* Stats Cards */._stats-grid_t7kik_370 { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; gap: 10px; margin-bottom: 16px; box-sizing: border-box; }._stat-card_t7kik_379 { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--panel-card-bg, rgba(255, 255, 255, 0.06)); border: 1px solid var(--panel-card-border, rgba(255, 255, 255, 0.1)); border-radius: 8px; padding: 12px 6px; text-align: center; }._stat-label_t7kik_391 { font-size: 10px; font-weight: 600; color: var(--panel-text-muted, rgba(255, 255, 255, 0.4)); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }._stat-value_t7kik_400 { font-size: 18px; font-weight: 700; color: var(--panel-text, #fff); }/* XP Bar */._progress-section_t7kik_407 { width: 100%; margin-bottom: 20px; display: flex; flex-direction: column; gap: 6px; }._progress-header_t7kik_415 { display: flex; justify-content: space-between; align-items: center; }._level-text_t7kik_421 { font-size: 12px; font-weight: 700; color: var(--panel-text); }._xp-text_t7kik_427 { font-size: 11px; color: var(--panel-text-secondary); }._progress-bar-bg_t7kik_432 { width: 100%; height: 8px; background: var(--panel-track-bg, rgba(255, 255, 255, 0.12)); border-radius: 4px; overflow: hidden; }._progress-bar-fill_t7kik_440 { height: 100%; background: var(--color-gold); border-radius: 4px; transition: width 0.4s ease-out; }/* Sub-sections */._subsection-title_t7kik_448 { font-size: 11px; font-weight: 700; color: var(--panel-text-muted, rgba(255, 255, 255, 0.4)); text-transform: uppercase; letter-spacing: 1px; margin: 0 0 10px; text-align: left; }._tournament-section_t7kik_458 { width: 100%; margin-top: 8px; margin-bottom: 16px; }._achievements-section_t7kik_464 { display: flex; flex-direction: column; align-items: center; width: 100%; margin-top: 8px; margin-bottom: 16px; }._badge-showcase-summary_t7kik_473 { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; box-sizing: border-box; }._rarity-progress-pill_t7kik_482 { position: relative; display: flex; align-items: center; width: 138px; height: 28px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.1); background: var(--panel-card-bg, rgba(255, 255, 255, 0.03)); overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; cursor: default; }._rarity-progress-pill_t7kik_482:hover { transform: translateY(-1.5px); }._rarity-progress-fill_t7kik_500 { position: absolute; top: 0; left: 0; bottom: 0; opacity: 0.16; transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); }._rarity-progress-content_t7kik_509 { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0 10px; font-size: 10px; font-weight: 700; color: var(--panel-text); letter-spacing: 0.2px; }._rarity-label_t7kik_523 { text-transform: uppercase; font-size: 8.5px; opacity: 0.95; }._rarity-pct-val_t7kik_529 { font-variant-numeric: tabular-nums; opacity: 1; }/* Ratings Toggles */._ratings-controls_t7kik_535 { display: flex; justify-content: center; gap: 16px; margin-bottom: 16px; width: 100%; }._segment-control_t7kik_543 { display: flex; background: var(--panel-track-remainder, rgba(255, 255, 255, 0.1)); padding: 2px; border-radius: 14px; width: 140px; flex-shrink: 0; }._segment-btn_t7kik_552 { flex: 1; background: transparent; border: none; color: var(--panel-text-secondary); font-size: 10px; font-weight: 600; padding: 3px 0; cursor: pointer; border-radius: 12px; transition: all 0.15s ease; min-height: auto; min-width: auto; }._segment-btn_t7kik_552:hover { color: var(--panel-text); }._segment-btn_t7kik_552._active_t7kik_344 { background: var(--panel-segment-active-bg, var(--color-gold)); color: var(--panel-segment-active-text, #111827); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); }/* Overall Rating Box */._overall-rating-card_t7kik_578 { display: flex; align-items: center; justify-content: space-between; background: var(--panel-rating-card-bg); border: 1px solid var(--panel-rating-card-border); border-radius: 12px; padding: 16px 20px; margin-bottom: 16px; width: 100%; box-sizing: border-box; }._rating-big_t7kik_591 { font-size: 36px; font-weight: 700; color: var(--color-gold); line-height: 1.1; font-family: var(--font-serif); }._rating-big-label_t7kik_599 { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--panel-text-secondary); }._rating-details_t7kik_606 { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 4px; font-size: 12px; color: var(--panel-text-secondary); }._rating-prov-tag_t7kik_616 { background: rgba(245, 158, 11, 0.15); border: 1px solid rgba(245, 158, 11, 0.35); color: var(--color-them, #f59e0b); font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 2px 8px; border-radius: 10px; letter-spacing: 0.5px; }._no-data-msg_t7kik_628 { text-align: center; color: var(--panel-text-muted); font-size: 13px; padding: 32px 0; }/* Pillars grid */._pillars-grid_t7kik_636 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; width: 100%; box-sizing: border-box; }._pillar-card_t7kik_644 { background: var(--panel-card-bg, rgba(255, 255, 255, 0.04)); border: 1px solid var(--panel-card-border, rgba(255, 255, 255, 0.08)); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; box-sizing: border-box; }._pillar-card_t7kik_644._provisional_t7kik_654 { border-color: rgba(245, 158, 11, 0.2); }._pillar-name-row_t7kik_658 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; gap: 4px; }._pillar-name_t7kik_658 { font-size: 10px; font-weight: 700; color: var(--panel-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }._pillar-trend_t7kik_677 { font-size: 8px; font-weight: 800; padding: 1px 4px; border-radius: 4px; }._trend-up_t7kik_684 { color: #34d399; background: rgba(52, 211, 153, 0.1); }._trend-down_t7kik_689 { color: #f87171; background: rgba(248, 113, 113, 0.1); }._pillar-rating-val_t7kik_694 { font-size: 20px; font-weight: 700; color: var(--panel-text); margin-bottom: 6px; }._pillar-stats-row_t7kik_701 { display: flex; justify-content: space-between; font-size: 9px; color: var(--panel-text-muted); }/* Actions Roster Row */._actions-row-sleek_t7kik_709 { display: flex; gap: 12px; justify-content: center; margin-top: 20px; width: 100%; border-top: 1px solid var(--panel-divider, rgba(255, 255, 255, 0.08)); padding-top: 16px; }._btn-action-sleek_t7kik_719 { flex: 1; display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border-radius: 20px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; border: 1px solid var(--panel-border, rgba(255, 255, 255, 0.12)); outline: none; background: transparent; min-height: 38px; }._btn-mute-sleek_t7kik_736 { color: var(--panel-text-secondary); }._btn-mute-sleek_t7kik_736:hover { background: var(--panel-btn-hover-bg, rgba(255, 255, 255, 0.05)); color: var(--panel-text, #fff); border-color: var(--panel-btn-hover-border, rgba(255, 255, 255, 0.3)); }._btn-unmute-sleek_t7kik_746 { background: rgba(96, 165, 250, 0.1); border-color: var(--color-us, #60a5fa); color: var(--color-us, #60a5fa); }._btn-unmute-sleek_t7kik_746:hover { background: rgba(96, 165, 250, 0.2); color: #fff; }._btn-report-sleek_t7kik_757 { background: rgba(229, 62, 62, 0.1); border-color: rgba(229, 62, 62, 0.4); color: #fc8181; }._btn-report-sleek_t7kik_757:hover { background: rgba(229, 62, 62, 0.2); border-color: #f56565; color: #fff; } } @layer modules {/* ReportModal.module.css */._report-panel_1fdbj_3 { max-width: 400px; width: 90%; padding: 24px; border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.4); background: var(--panel-bg); border: 1px solid var(--panel-border); backdrop-filter: blur(var(--panel-blur)); -webkit-backdrop-filter: blur(var(--panel-blur)); color: var(--panel-text); z-index: 7001; }._report-panel_1fdbj_3 h2 { font-size: 18px; font-weight: 700; margin: 0 0 8px; color: var(--panel-heading); }._report-panel_1fdbj_3 p { font-size: 13px; color: var(--panel-text-secondary); margin: 0 0 16px; }._report-textarea_1fdbj_30 { width: 100%; height: 100px; background: var(--panel-input-bg); border: 1px solid var(--panel-input-border); border-radius: 6px; color: var(--panel-text); padding: 10px; font-size: 13px; resize: none; outline: none; margin-bottom: 12px; box-sizing: border-box; }._report-textarea_1fdbj_30:focus { border-color: var(--color-gold); }._report-error-text_1fdbj_49 { font-size: 11px; color: var(--panel-danger, #e53e3e); margin: 0 0 12px; }._report-actions_1fdbj_55 { display: flex; justify-content: flex-end; gap: 10px; }._btn-sec_1fdbj_61 { padding: 8px 16px; font-size: 13px; font-weight: 600; border-radius: 6px; cursor: pointer; background: transparent; border: 1px solid var(--panel-border); color: var(--panel-text); transition: background-color 0.2s, border-color 0.2s; }._btn-sec_1fdbj_61:hover { background: var(--panel-btn-hover-bg); border-color: var(--panel-btn-hover-border); }._btn-submit_1fdbj_78 { padding: 8px 16px; font-size: 13px; font-weight: 600; border-radius: 6px; cursor: pointer; background: var(--panel-btn-primary-bg, #fcd34d); border: var(--panel-btn-primary-border, none); color: var(--panel-btn-primary-text, #1a202c); transition: background-color 0.2s; }._btn-submit_1fdbj_78:hover:not(:disabled) { background: var(--panel-btn-primary-hover-bg); color: var(--panel-btn-primary-hover-text); }._btn-submit_1fdbj_78:disabled { opacity: 0.5; cursor: not-allowed; }._report-success_1fdbj_100 { display: flex; flex-direction: column; align-items: center; padding: 20px 0; text-align: center; }._success-icon_1fdbj_108 { font-size: 32px; color: var(--color-gold); margin-bottom: 12px; } }