/* ==========================================
   BLUFFLAB — Core Styles
   Dark monochrome + blue accent
   ========================================== */

/* === RESET & BASE === */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --bg-dark: #000000;
    --bg-card: #0d0d0d;
    --bg-elevated: #111111;
    --bg-input: #080808;
    --text-primary: #f0f0f0;
    --text-secondary: #999999;
    --text-muted: #555555;
    --border: #1a1a1a;
    --border-light: #222222;
    --accent: #4a90d9;
    --accent-gold: #f5c518;
    --accent-green: #22c55e;
    --accent-red: #ef4444;
    --accent-blue: #3b82f6;
    --btn-primary-bg: #444444;
    --btn-primary-text: #f0f0f0;
    --btn-secondary-bg: #222222;
    --btn-secondary-text: #ccc;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --font-main: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-action: 'Space Grotesk', 'Inter', system-ui, sans-serif;
}

html, body {
    height: 100%;
    overflow: hidden;
    font-family: var(--font-main);
    background: var(--bg-dark);
    color: var(--text-primary);
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

body {
    padding-top: var(--safe-top);
    padding-bottom: var(--safe-bottom);
}

/* === SCREENS === */
.screen {
    display: none;
    position: fixed;
    inset: 0;
    flex-direction: column;
    z-index: 1;
}
.screen.active { display: flex; }

/* ==========================================================
   LOADING SCREEN
   ========================================================== */
#loading-screen {
    background: #000;
    align-items: center;
    justify-content: center;
    z-index: 10;
}
.intro { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.6rem; }
.intro-glow { position: absolute; left: 50%; top: 42%; width: 340px; height: 340px; transform: translate(-50%, -50%) scale(0.4); border-radius: 50%;
    background: radial-gradient(circle, rgba(61,139,253,0.35) 0%, rgba(61,139,253,0) 65%); opacity: 0; animation: introGlow 1.2s ease 1.1s forwards; pointer-events: none; }
.intro-fan { position: relative; width: 220px; height: 150px; }
.intro-card { position: absolute; left: 50%; bottom: 0; width: 76px; height: 106px; margin-left: -38px; transform: translateY(70vh); animation: introDeal 0.55s cubic-bezier(.2,.8,.25,1) calc(var(--i) * 0.08s) forwards; }
.intro-rot { width: 100%; height: 100%; transform-origin: 50% 130%; animation: introFan 0.55s cubic-bezier(.3,.8,.3,1.15) 0.62s forwards; }
.intro-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: introFlip 0.45s ease calc(0.95s + var(--i) * 0.11s) forwards; }
.intro-face { --w: 76px; position: absolute !important; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.intro-front { transform: rotateY(180deg); }
.intro-chip { position: absolute; left: 50%; top: 96px; margin-left: -32px; opacity: 0; animation: introChip 0.7s cubic-bezier(.3,1.4,.5,1) 1.35s forwards; perspective: 400px; }
.intro-chip img { display: block; filter: drop-shadow(0 8px 18px rgba(0,0,0,0.6)); animation: introSpin 2.4s ease-in-out 2.1s infinite; }
.loading-brand {
    font-size: 2.3rem;
    font-weight: 800;
    letter-spacing: -1px;
    opacity: 0;
    margin-top: 1.4rem;
    animation: brandFadeIn 0.6s ease-out 1.45s forwards;
}
.brand-bluff { color: #fff; }
.brand-lab { color: var(--accent); font-weight: 400; }
@keyframes introDeal { to { transform: translateY(0); } }
@keyframes introFan { from { transform: rotate(0deg); } to { transform: rotate(calc((var(--i) - 1.5) * 15deg)) translateY(-4px); } }
@keyframes introFlip { from { transform: rotateY(0); } to { transform: rotateY(180deg); } }
@keyframes introChip { 0% { opacity: 0; transform: translateY(-60vh) scale(0.7); } 60% { opacity: 1; transform: translateY(6px) scale(1.05); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes introSpin { 0%, 70% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } }
@keyframes introGlow { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes brandFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .intro-card, .intro-rot, .intro-inner, .intro-chip, .intro-chip img, .loading-brand, .intro-glow { animation-duration: 1ms !important; animation-delay: 0s !important; }
    .intro-chip img { animation: none !important; }
}
#loading-screen.fade-out {
    transition: opacity 0.4s ease;
    opacity: 0;
}

/* ==========================================================
   HOME SCREEN
   ========================================================== */
#home-screen {
    background: var(--bg-dark);
}
.home-header {
    padding: 2.5rem 1.5rem 1.5rem;
    padding-top: calc(2.5rem + var(--safe-top));
}
.home-logo {
    font-size: 1.8rem;
    font-weight: 900;
    letter-spacing: -0.5px;
}
.logo-bluff { color: #fff; }
.logo-lab { color: var(--accent); font-weight: 400; }
.home-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 1rem 2rem;
}
.game-cards-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 540px;
    margin: 0 auto;
}
.game-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.25rem;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    font-family: var(--font-main);
    color: var(--text-primary);
    width: 100%;
}
.game-card:active { transform: scale(0.98); }
.game-card.featured {
    border-color: var(--accent);
    background: linear-gradient(135deg, rgba(74,144,217,0.06), transparent);
}
.game-card-icon {
    flex-shrink: 0;
    width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.game-card-info { flex: 1; min-width: 0; }
.game-card-info h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.15rem;
}
.game-card-info p {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.3;
    margin: 0;
}
.game-card-arrow {
    font-size: 1.4rem;
    color: var(--text-muted);
    flex-shrink: 0;
    font-weight: 300;
}
.game-card.coming-soon {
    opacity: 0.3;
    pointer-events: none;
    cursor: default;
}
.game-card-resume {
    font-size: 0.74rem;
    color: var(--accent);
    font-weight: 600;
    margin: 0.25rem 0 0;
    line-height: 1.2;
}
.game-card-resume.hidden { display: none; }

/* Resume choice overlay panel */
.resume-choice-panel {
    text-align: center;
    padding: 2rem 1.5rem;
    max-width: 320px;
    width: 90%;
}
.resume-choice-panel h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
}
.resume-choice-panel .text-muted {
    margin-bottom: 1.25rem;
}
.resume-choice-panel .btn { margin-bottom: 0.5rem; }

/* ==========================================================
   BUTTONS
   ========================================================== */
.btn {
    border: none;
    border-radius: 12px;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-main);
}
.btn:active { transform: scale(0.97); }
.btn-primary {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}
.btn-primary:active { background: #555; }
.btn-secondary {
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border: 1px solid var(--border-light);
}
.btn-danger { background: var(--accent-red); color: white; }
.btn-large { padding: 1rem 2.5rem; font-size: 1.15rem; border-radius: 14px; }
.btn-block { width: 100%; }
.btn-icon { font-size: 1.2em; }
.btn-back {
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 2rem;
    cursor: pointer;
    padding: 0.25rem 0.75rem;
    line-height: 1;
    font-family: var(--font-main);
}
.btn-icon-only {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.25rem;
    font-family: var(--font-main);
}

/* ==========================================================
   SETUP SCREEN
   ========================================================== */
#setup-screen { background: var(--bg-dark); }

.screen-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    padding-top: calc(0.75rem + var(--safe-top));
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
}
.screen-header h2 { font-size: 1.2rem; color: var(--text-primary); font-weight: 700; }
.header-spacer { width: 44px; }
.screen-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    -webkit-overflow-scrolling: touch;
}
.setup-step { display: none; }
.setup-step.active { display: block; }
.setup-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}
.setup-section h3 { font-size: 1rem; color: var(--text-primary); font-weight: 700; margin-bottom: 0.5rem; }
.hint { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.75rem; }

.stepper { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin: 0.5rem 0; }
.btn-stepper {
    width: 48px; height: 48px; border-radius: 50%;
    border: 2px solid var(--text-secondary); background: transparent;
    color: var(--text-primary); font-size: 1.5rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-main);
}
.btn-stepper:active { background: rgba(255,255,255,0.1); }
.stepper-value { font-size: 2.5rem; font-weight: 900; min-width: 60px; text-align: center; }

.player-names-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.player-name-row {
    display: flex; align-items: center; gap: 0.75rem;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 12px; padding: 0.75rem 1rem;
}
.player-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.9rem; color: white; flex-shrink: 0;
}
.player-name-input {
    flex: 1; background: var(--bg-input); border: 1px solid var(--border);
    border-radius: 8px; padding: 0.6rem 0.75rem;
    color: var(--text-primary); font-size: 1rem; font-family: var(--font-main);
}
.player-name-input::placeholder { color: var(--text-muted); }

.input-group {
    display: flex; align-items: center; background: var(--bg-input);
    border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
}
.input-prefix { padding: 0.6rem 0.5rem 0.6rem 0.75rem; color: var(--accent-gold); font-weight: 700; }
.input-field {
    flex: 1; background: transparent; border: none;
    padding: 0.6rem 0.75rem 0.6rem 0; color: var(--text-primary);
    font-size: 1rem; font-family: var(--font-main); -moz-appearance: textfield;
}
.input-field::-webkit-inner-spin-button,
.input-field::-webkit-outer-spin-button { -webkit-appearance: none; }
.input-field:focus { outline: none; }

.blinds-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.blind-input label { display: block; font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.4rem; }
.blind-input .input-field { width: 100%; }

.toggle-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.toggle-row label { font-size: 0.9rem; color: var(--text-secondary); flex: 1; }
.toggle {
    -webkit-appearance: none; appearance: none; width: 50px; height: 28px;
    background: var(--bg-input); border: 2px solid var(--border-light);
    border-radius: 14px; position: relative; cursor: pointer; transition: all 0.3s; flex-shrink: 0;
}
.toggle::after {
    content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%;
    background: var(--text-muted); top: 2px; left: 2px; transition: all 0.3s;
}
.toggle:checked { background: var(--accent); border-color: var(--accent); }
.toggle:checked::after { background: #fff; left: 26px; }

.chip-config-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 0.5rem; }
.chip-config-item {
    display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
    padding: 0.5rem; background: var(--bg-input); border-radius: 10px; border: 1px solid var(--border);
}
.chip-config-item .mini-chip {
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 0.7rem; box-shadow: 0 2px 6px rgba(0,0,0,0.4); position: relative;
}
.mini-chip::before {
    content: ''; position: absolute; inset: 3px; border-radius: 50%;
    border: 2px dashed rgba(255,255,255,0.2);
}
.chip-config-item input {
    width: 60px; text-align: center; background: transparent;
    border: 1px solid var(--border); border-radius: 6px; padding: 0.25rem;
    color: var(--text-primary); font-size: 0.85rem; font-family: var(--font-main);
}

.setup-nav { display: flex; gap: 0.75rem; margin-top: 1rem; padding-bottom: 2rem; }
.setup-nav .btn { flex: 1; }

/* ==========================================================
   GAME SCREEN
   ========================================================== */
#game-screen { background: var(--bg-dark); flex-direction: column; }

.game-header {
    padding-top: var(--safe-top);
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.game-info-bar { display: flex; align-items: center; padding: 0.5rem 1rem; gap: 0.5rem; }
.game-info-item { display: flex; flex-direction: column; align-items: center; flex: 1; }
.info-label { font-size: 0.6rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 500; }
.info-value { font-size: 1.05rem; font-weight: 700; }
.pot-value { color: var(--accent-gold); }

.players-area {
    flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 0.5rem; display: flex; flex-direction: column;
}
.player-cards {
    display: flex; flex-direction: column; gap: 0.35rem;
    width: 100%; flex: 1 0 auto;
}
.player-card {
    display: flex; flex-direction: row; align-items: center; gap: 0.75rem;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
    padding: 0.55rem 0.75rem; transition: border-color 0.3s, box-shadow 0.3s, opacity 0.3s;
    flex: 1 1 0; min-height: 48px;
}
.player-card.active {
    border-color: var(--accent);
    background: var(--bg-elevated);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06);
}
.player-card.folded { opacity: 0.35; }
.player-card.eliminated { opacity: 0.18; }

.card-identity { display: flex; align-items: center; gap: 0.65rem; flex: 1; min-width: 0; }
.seat-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 0.7rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    border: 2px solid transparent; transition: border-color 0.3s;
    color: white; position: relative; flex-shrink: 0;
}
.player-card.active .seat-avatar { border-color: rgba(255,255,255,0.3); }
.seat-badge {
    position: absolute; top: -5px; right: -5px; font-size: 0.45rem;
    background: var(--text-primary); color: var(--bg-dark);
    padding: 1px 4px; border-radius: 4px; font-weight: 800; line-height: 1.4;
}
.card-info { display: flex; flex-direction: column; min-width: 0; }
.card-name {
    font-size: 0.85rem; font-weight: 600; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2;
}
.card-chips { font-size: 0.8rem; font-weight: 700; color: var(--accent-gold); line-height: 1.3; }
.card-bet { font-size: 0.7rem; color: var(--accent-green); font-weight: 600; margin-top: 1px; }

/* Isometric chip stacks */
.chip-stack-visual {
    flex-shrink: 0; display: flex; align-items: flex-end;
    justify-content: center; min-width: 48px; min-height: 40px;
}
.chip-stack-empty {
    color: var(--text-muted); font-size: 0.7rem;
    display: flex; align-items: center; justify-content: center; height: 100%;
}

/* Game status bar */
.game-status {
    display: flex; align-items: center; justify-content: center; gap: 0.75rem;
    padding: 0.55rem 1rem; background: var(--bg-card);
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    flex-shrink: 0; width: 100%;
}
.round-label {
    font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase;
    letter-spacing: 2px; background: var(--bg-input); padding: 0.2rem 0.7rem;
    border-radius: 6px; font-weight: 600;
}
.pot-display-area { display: flex; align-items: center; gap: 0.5rem; }
.pot-chips-container { display: flex; align-items: flex-end; }
.pot-inline { font-size: 1.1rem; font-weight: 800; color: var(--accent-gold); }

/* ==========================================================
   ACTION PANEL
   ========================================================== */
.action-panel {
    background: var(--bg-card); border-top: 1px solid var(--border);
    padding: 0.55rem 0.75rem; padding-bottom: calc(0.55rem + var(--safe-bottom));
    flex-shrink: 0; width: 100%;
}
.active-player-info { margin-bottom: 0.4rem; }
.active-player-chips-display { display: flex; justify-content: space-between; align-items: center; }
#active-player-name { font-weight: 700; font-size: 0.95rem; }
#active-player-chips { font-weight: 800; font-size: 0.95rem; color: var(--accent-gold); }

.action-buttons { display: flex; flex-direction: column; gap: 0.35rem; }
.btn-fold, .btn-call, .btn-raise {
    font-family: var(--font-action); font-weight: 700; font-size: 1rem;
    letter-spacing: 1px; text-transform: uppercase; padding: 0.75rem 1rem;
    border-radius: 10px; border: none; cursor: pointer; transition: all 0.15s;
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
}
.btn-fold:active, .btn-call:active, .btn-raise:active { transform: scale(0.97); }
.btn-fold { background: #1a1a1a; color: #666; border: 1px solid #222; }
.btn-call { background: #444; color: #f0f0f0; }
.btn-call .action-amount { font-size: 0.85rem; opacity: 0.7; font-weight: 500; }
.btn-raise { background: var(--accent); color: #fff; }
.btn-call.check-mode { background: #333; color: #f0f0f0; }

.raise-panel { margin-top: 0.5rem; }
.raise-slider-container { margin-bottom: 0.5rem; }
.raise-slider {
    -webkit-appearance: none; appearance: none; width: 100%; height: 6px;
    border-radius: 3px; background: var(--border-light); outline: none;
}
.raise-slider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%;
    background: var(--text-primary); cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.raise-amount-display { text-align: center; font-size: 1.1rem; font-weight: 700; color: var(--accent-gold); margin-top: 0.25rem; }
.raise-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; margin-bottom: 0.5rem; }
.btn-preset {
    padding: 0.5rem; font-size: 0.8rem; background: var(--bg-input);
    color: var(--text-secondary); border: 1px solid var(--border);
    border-radius: 8px; font-family: var(--font-main); cursor: pointer;
}
.btn-preset:active { background: var(--text-primary); color: var(--bg-dark); }
.raise-confirm-row { display: grid; grid-template-columns: 1fr 2fr; gap: 0.5rem; }
.btn-raise-confirm {
    background: var(--accent); color: #fff; padding: 0.75rem; border-radius: 10px;
    font-family: var(--font-action); font-weight: 700; letter-spacing: 0.5px;
    text-transform: uppercase; border: none; cursor: pointer;
}

/* ==========================================================
   CHIP ANIMATION
   ========================================================== */
.chip-fly {
    position: fixed; z-index: 200; pointer-events: none;
}
.chip-fly.animating {
    transition: transform 0.5s cubic-bezier(0.4,0,0.2,1), opacity 0.5s ease;
}

/* ==========================================================
   TURN TOAST
   ========================================================== */
.turn-toast {
    position: fixed; top: 0; left: 0; right: 0; z-index: 90;
    display: flex; justify-content: center;
    padding-top: calc(var(--safe-top) + 56px); pointer-events: none;
}
.turn-toast.hidden { display: none !important; }
.turn-toast.animating { animation: toastSlideIn 0.35s ease-out; }
.turn-toast.fading { animation: toastFadeOut 0.35s ease-in forwards; }
.toast-inner {
    background: var(--bg-elevated); border: 1px solid var(--border-light);
    color: var(--text-primary); padding: 0.6rem 2rem; border-radius: 30px;
    font-family: var(--font-action); font-size: 1rem; font-weight: 700;
    letter-spacing: 0.5px; box-shadow: 0 6px 24px rgba(0,0,0,0.6);
}
@keyframes toastSlideIn { from { transform: translateY(-18px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes toastFadeOut { from { opacity: 1; } to { opacity: 0; } }

/* ==========================================================
   OVERLAYS
   ========================================================== */
.overlay {
    position: fixed; inset: 0; z-index: 100;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.85); backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px); padding: 1rem;
}
.overlay.hidden { display: none; }
.overlay-content {
    background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 16px;
    padding: 2rem 1.5rem; max-width: 360px; width: 100%; text-align: center;
    max-height: 85vh; overflow-y: auto;
}
.overlay-content h2 { color: var(--text-primary); margin-bottom: 0.75rem; font-size: 1.4rem; }
.overlay-content p { color: var(--text-secondary); margin-bottom: 1rem; }

.winner-candidates { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.winner-candidate-btn {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem;
    background: var(--bg-input); border: 1px solid var(--border); border-radius: 10px;
    cursor: pointer; transition: all 0.2s; color: var(--text-primary);
    font-size: 1rem; font-family: var(--font-main); width: 100%;
}
.winner-candidate-btn:active, .winner-candidate-btn.selected {
    border-color: var(--accent); background: rgba(74,144,217,0.08);
}
.candidate-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.8rem; color: white; flex-shrink: 0;
}
.split-pot-option { margin-top: 0.5rem; }
.split-actions { display: flex; gap: 0.5rem; }
.split-actions .btn { flex: 1; }
.buyin-info { font-size: 1.1rem; font-weight: 600; color: var(--text-primary) !important; }
.buyin-actions { display: flex; gap: 0.75rem; }
.buyin-actions .btn { flex: 1; }
.round-summary-winner { font-size: 1.2rem; font-weight: 700; color: var(--accent-gold); margin-bottom: 0.5rem; }
.round-summary-pot { font-size: 1rem; color: var(--text-secondary); margin-bottom: 1rem; }
.standings-list { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.standing-row {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.75rem;
    background: var(--bg-input); border-radius: 8px; border: 1px solid var(--border);
}
.standing-rank { font-size: 1.1rem; font-weight: 900; color: var(--text-secondary); min-width: 30px; }
.standing-name { flex: 1; font-weight: 600; }
.standing-chips { font-weight: 700; color: var(--accent-gold); }
.standing-row.eliminated { opacity: 0.4; }
.game-menu .menu-options { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.game-menu .menu-options .btn { justify-content: flex-start; padding: 1rem 1.25rem; font-size: 1.05rem; }
.gameover-content .trophy { font-size: 4rem; margin-bottom: 0.5rem; animation: trophyBounce 1s ease-in-out infinite; }
@keyframes trophyBounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }

/* === UTILITY === */
.hidden { display: none !important; }
.players-area::-webkit-scrollbar, .screen-body::-webkit-scrollbar { width: 3px; }
.players-area::-webkit-scrollbar-track, .screen-body::-webkit-scrollbar-track { background: transparent; }
.players-area::-webkit-scrollbar-thumb, .screen-body::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 2px; }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 767px) and (orientation: landscape) {
    .player-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; }
    .player-card { padding: 0.4rem 0.55rem; }
    .seat-avatar { width: 32px; height: 32px; font-size: 0.6rem; }
    .card-name { font-size: 0.78rem; } .card-chips { font-size: 0.68rem; }
    .action-buttons { flex-direction: row; gap: 0.35rem; }
    .btn-fold, .btn-call, .btn-raise { flex: 1; padding: 0.55rem 0.5rem; font-size: 0.85rem; }
    .game-status { padding: 0.3rem 0.75rem; }
    .action-panel { padding: 0.4rem 0.6rem; padding-bottom: calc(0.4rem + var(--safe-bottom)); }
}

@media (min-width: 768px) {
    .screen-body { max-width: 720px; margin: 0 auto; }
    .player-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-auto-rows: 1fr; gap: 0.5rem; }
    .player-card { padding: 0.75rem 0.9rem; }
    .seat-avatar { width: 46px; height: 46px; font-size: 0.8rem; }
    .card-name { font-size: 0.95rem; } .card-chips { font-size: 0.85rem; }
    .action-buttons { flex-direction: row; gap: 0.5rem; }
    .btn-fold, .btn-call, .btn-raise { flex: 1; padding: 0.9rem; font-size: 1.05rem; }
    .action-panel { padding: 0.75rem 1.5rem; padding-bottom: calc(0.75rem + var(--safe-bottom)); }
    #active-player-name { font-size: 1.1rem; } #active-player-chips { font-size: 1.1rem; }
    .overlay-content { max-width: 440px; }
}

@media (min-width: 1200px) {
    .screen-body { max-width: 860px; }
    .player-cards { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-auto-rows: 1fr; gap: 0.65rem; }
    .player-card { padding: 0.9rem 1.1rem; }
    .seat-avatar { width: 52px; height: 52px; font-size: 0.85rem; }
    .card-name { font-size: 1.02rem; } .card-chips { font-size: 0.92rem; }
    .btn-fold, .btn-call, .btn-raise { padding: 1.1rem; font-size: 1.15rem; }
    .action-panel { padding: 0.9rem 2rem; }
    #active-player-name { font-size: 1.2rem; } #active-player-chips { font-size: 1.2rem; }
    .overlay-content { max-width: 480px; }
}

@media (max-height: 600px) and (max-width: 767px) and (orientation: portrait) {
    .player-card { padding: 0.35rem 0.55rem; gap: 0.5rem; }
    .seat-avatar { width: 32px; height: 32px; font-size: 0.58rem; }
    .btn-fold, .btn-call, .btn-raise { padding: 0.5rem 0.7rem; font-size: 0.85rem; }
    .card-name { font-size: 0.78rem; } .card-chips { font-size: 0.68rem; }
}

/* ==========================================================
   MODE SELECTION SCREEN
   ========================================================== */
#mode-screen { background: var(--bg-dark); }
.mode-cards {
    display: flex; flex-direction: column; gap: 0.75rem;
    max-width: 540px; margin: 1rem auto; padding: 0 0.5rem;
}
.mode-card {
    display: flex; flex-direction: column; gap: 0.35rem;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 16px; padding: 1.5rem; cursor: pointer;
    transition: all 0.2s; text-align: left;
    font-family: var(--font-main); color: var(--text-primary); width: 100%;
}
.mode-card:active { transform: scale(0.98); }
.mode-card.featured {
    border-color: var(--accent);
    background: linear-gradient(135deg, rgba(74,144,217,0.06), transparent);
}
.mode-card h3 { font-size: 1.1rem; font-weight: 700; }
.mode-card p { font-size: 0.85rem; color: var(--text-secondary); margin: 0; }
.mode-card.coming-soon { opacity: 0.3; pointer-events: none; }
.mode-icon { display: flex; gap: 0.5rem; margin-bottom: 0.25rem; align-items: center; }

/* ==========================================================
   COMMUNITY CARDS (full mode)
   ========================================================== */
.community-cards-area {
    flex-shrink: 0; padding: 0.75rem 1rem;
    display: flex; justify-content: center; background: var(--bg-dark);
}
.community-cards-row { display: flex; gap: 0.5rem; justify-content: center; }
.community-card-slot {
    width: 52px; height: 73px; border-radius: 6px;
    border: 1.5px dashed var(--border-light); background: transparent;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s ease;
}
.community-card-slot.dealt { border: none; background: none; animation: cardDeal 0.35s ease-out; }
.community-card-slot img { width: 100%; height: 100%; border-radius: 6px; display: block; }
@keyframes cardDeal { from { transform: scale(0.7) translateY(-10px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }

/* ==========================================================
   HOLE CARDS (full mode, tap-to-reveal)
   ========================================================== */
.hole-cards-area { padding: 0.5rem 0; text-align: center; }
.hole-cards-row { display: flex; gap: 0.75rem; justify-content: center; margin-bottom: 0.25rem; }
.hole-card {
    width: 65px; height: 91px; perspective: 800px; cursor: pointer;
}
.hole-card .card-inner {
    position: relative; width: 100%; height: 100%;
    transition: transform 0.5s ease; transform-style: preserve-3d;
}
.hole-card.revealed .card-inner { transform: rotateY(180deg); }
.card-face {
    position: absolute; inset: 0; width: 100%; height: 100%;
    backface-visibility: hidden; border-radius: 6px; display: block;
}
.card-front-face { transform: rotateY(180deg); }
.hole-hint { font-size: 0.7rem; color: var(--text-muted); margin: 0; }

/* ==========================================================
   PASS OVERLAY (full mode)
   ========================================================== */
.pass-content { text-align: center; }
.pass-subtitle { font-size: 1rem; color: var(--text-secondary); margin-bottom: 0.25rem !important; }
.pass-name { font-size: 2rem; font-weight: 900; color: var(--accent); margin-bottom: 1.5rem !important; }

/* ==========================================================
   CANDIDATE CARDS (winner overlay, full mode)
   ========================================================== */
.candidate-cards { display: flex; gap: 0.3rem; margin-left: auto; flex-shrink: 0; }
.candidate-card-img { width: 32px; height: 45px; border-radius: 4px; }

/* ==========================================================
   SHOWDOWN SCREEN (full mode)
   ========================================================== */
.showdown-content {
    max-width: 400px;
    padding: 1.5rem 1.25rem;
}
.showdown-content h2 {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}
.showdown-community-row {
    display: flex;
    gap: 0.4rem;
    justify-content: center;
    margin-bottom: 1.25rem;
}
.showdown-comm-card {
    width: 46px;
    height: 65px;
    border-radius: 5px;
}
.showdown-results {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}
.showdown-player {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.75rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 12px;
    animation: showdownSlideIn 0.4s ease-out both;
    position: relative;
}
.showdown-player.showdown-winner {
    border-color: var(--accent-gold);
    background: rgba(245,197,24,0.06);
    box-shadow: 0 0 12px rgba(245,197,24,0.1);
}
@keyframes showdownSlideIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
.showdown-player-info {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1;
    min-width: 0;
}
.showdown-name-hand {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.showdown-pname {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
.showdown-hand-label {
    font-size: 0.72rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.showdown-winner .showdown-hand-label {
    color: var(--accent-gold);
    font-weight: 600;
}
.showdown-cards {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}
.showdown-card-img {
    width: 38px;
    height: 53px;
    border-radius: 4px;
}
.showdown-winner-badge {
    position: absolute;
    top: -8px;
    right: 10px;
    background: var(--accent-gold);
    color: #000;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 2px 8px;
    border-radius: 6px;
}

/* ==========================================================
   FULL MODE LAYOUT OVERRIDES
   ========================================================== */
#game-screen.mode-full .players-area {
    flex: 0 0 auto; padding: 0.4rem 0.5rem;
    overflow-x: auto; overflow-y: hidden;
}
#game-screen.mode-full .player-cards {
    flex-direction: row; flex-wrap: nowrap; gap: 0.4rem;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
}
#game-screen.mode-full .player-card {
    flex: 0 0 auto; flex-direction: column;
    width: 68px; min-width: 68px; min-height: auto;
    text-align: center; padding: 0.35rem 0.25rem; gap: 0.15rem;
}
#game-screen.mode-full .card-identity {
    flex-direction: column; align-items: center; gap: 0.15rem;
}
#game-screen.mode-full .seat-avatar { width: 34px; height: 34px; font-size: 0.55rem; }
#game-screen.mode-full .card-name { font-size: 0.6rem; text-align: center; }
#game-screen.mode-full .card-chips { font-size: 0.55rem; }
#game-screen.mode-full .card-bet { font-size: 0.5rem; }
#game-screen.mode-full .chip-stack-visual { display: none; }

/* ==========================================================
   CARD BACKS SCREEN
   ========================================================== */
#card-backs-screen { background: var(--bg-dark); }
#nuts-mode-screen { background: var(--bg-dark); }
#nuts-versus-setup { background: var(--bg-dark); }
.cb-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}
.cb-section h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.65rem; }

/* Colour picker grid */
.cb-color-grid {
    display: flex; gap: 0.65rem; flex-wrap: wrap;
}
.cb-color-btn {
    width: 44px; height: 44px; border-radius: 50%;
    border: 3px solid transparent; cursor: pointer;
    transition: border-color 0.2s, transform 0.15s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.cb-color-btn:active { transform: scale(0.93); }
.cb-color-btn.active {
    border-color: #fff;
    box-shadow: 0 0 0 2px var(--accent), 0 2px 6px rgba(0,0,0,0.4);
}

/* Design grid */
.cb-design-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 0.65rem;
}
.cb-design-btn {
    display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
    background: var(--bg-input); border: 2px solid var(--border);
    border-radius: 10px; padding: 0.65rem 0.35rem; cursor: pointer;
    transition: border-color 0.2s; font-family: var(--font-main); color: var(--text-primary);
}
.cb-design-btn.active { border-color: var(--accent); background: rgba(74,144,217,0.06); }
.cb-design-btn.locked { opacity: 0.35; cursor: not-allowed; }
.cb-design-preview { width: 56px; height: 78px; border-radius: 5px; }
.cb-design-name { font-size: 0.72rem; color: var(--text-secondary); }
.cb-locked-icon { font-size: 1.6rem; width: 56px; height: 78px; display: flex; align-items: center; justify-content: center; }

/* Preview */
.cb-preview-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    text-align: center;
}
.cb-preview-section h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.75rem; }
.cb-preview-wrapper { display: flex; justify-content: center; }
.cb-preview-card { width: 100px; height: 140px; border-radius: 8px; }

/* ==========================================================
   NUTS QUIZ
   ========================================================== */
#nuts-game-screen { background: var(--bg-dark); flex-direction: column; }

/* Mode screen high-scores */
.nuts-highscores {
    margin-top: 1.5rem; padding: 0 0.5rem;
}
.nuts-hs-row {
    display: flex; gap: 0.75rem;
}
.nuts-hs-item {
    flex: 1; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 12px; padding: 0.9rem; text-align: center;
}
.nuts-hs-label { display: block; font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.25rem; }
.nuts-hs-val { font-size: 1.6rem; font-weight: 900; color: var(--accent-gold); }

/* Game body */
.nuts-game-body {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; padding: 1rem;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.nuts-prompt {
    font-size: 1rem; color: var(--text-secondary); margin-bottom: 0.75rem; text-align: center;
}
.nuts-prompt strong { color: var(--accent-gold); }

/* Community cards */
.nuts-community {
    display: flex; gap: 0.45rem; justify-content: center; margin-bottom: 1.25rem;
}
.nuts-comm-card {
    width: 56px; height: 78px; border-radius: 6px;
    animation: cardDeal 0.35s ease-out both;
}
.nuts-comm-card:nth-child(2) { animation-delay: 0.06s; }
.nuts-comm-card:nth-child(3) { animation-delay: 0.12s; }
.nuts-comm-card:nth-child(4) { animation-delay: 0.18s; }
.nuts-comm-card:nth-child(5) { animation-delay: 0.24s; }

/* Option buttons */
.nuts-options {
    display: flex; flex-direction: column; gap: 0.65rem;
    width: 100%; max-width: 360px;
}
.nuts-option-btn {
    display: flex; align-items: center; justify-content: center; gap: 0.65rem;
    padding: 0.85rem 1rem;
    background: var(--bg-card); border: 2px solid var(--border);
    border-radius: 14px; cursor: pointer;
    transition: border-color 0.2s, transform 0.15s, background 0.2s;
    font-family: var(--font-main);
}
.nuts-option-btn:active { transform: scale(0.97); }
.nuts-option-card {
    width: 56px; height: 78px; border-radius: 6px;
}
.nuts-option-btn.nuts-correct {
    border-color: var(--accent-green);
    background: rgba(34,197,94,0.08);
    animation: nutsPulse 0.5s ease;
}
.nuts-option-btn.nuts-wrong {
    border-color: var(--accent-red);
    background: rgba(239,68,68,0.08);
    animation: nutsShake 0.4s ease;
}
@keyframes nutsPulse {
    0%,100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}
@keyframes nutsShake {
    0%,100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

/* Result overlay */
.nuts-result-content { text-align: center; }
.nuts-result-icon { font-size: 3rem; margin-bottom: 0.5rem; }
.nuts-result-cards { display: flex; gap: 0.5rem; justify-content: center; margin: 0.75rem 0; }
.nuts-result-card-img { width: 60px; height: 84px; border-radius: 6px; }
.nuts-result-hand {
    font-size: 1rem; font-weight: 700; color: var(--accent-gold);
    margin-bottom: 1rem;
}

/* Game over stats */
.nuts-go-stats { margin-bottom: 1rem; }
.nuts-stat-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.55rem 0; border-bottom: 1px solid var(--border);
    color: var(--text-secondary); font-size: 0.95rem;
}
.nuts-stat-row strong { color: var(--accent-gold); font-size: 1.15rem; }

/* ==========================================================
   AUTH SCREEN
   ========================================================== */
#auth-screen {
    background: var(--bg-dark);
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.auth-content {
    max-width: 380px;
    width: 100%;
    padding: 2rem 1.5rem;
}
.auth-brand {
    text-align: center;
    margin-bottom: 2rem;
}
.auth-brand img { display: inline-block; }
.auth-brand h1 {
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -0.5px;
    margin-top: 0.75rem;
}
.auth-tabs {
    display: flex;
    margin-bottom: 1.5rem;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
}
.auth-tab {
    flex: 1;
    padding: 0.75rem;
    background: var(--bg-input);
    border: none;
    color: var(--text-muted);
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-main);
    font-size: 1rem;
    transition: all 0.2s;
}
.auth-tab.active {
    background: var(--accent);
    color: #fff;
}
.auth-field { margin-bottom: 0.75rem; }
.auth-field input {
    width: 100%;
    padding: 0.85rem 1rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 1rem;
    font-family: var(--font-main);
}
.auth-field input::placeholder { color: var(--text-muted); }
.auth-field input:focus { outline: none; border-color: var(--accent); }
.auth-field-hint {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

/* ─── POKER LOBBY ─── */
.poker-lobby-body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.lobby-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.lobby-section-title {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.6rem;
}
.lobby-friends-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.lobby-friend-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    background: var(--surface);
    border-radius: 10px;
}
.lobby-friend-name {
    flex: 1;
    font-weight: 500;
    font-size: 0.92rem;
}
.lobby-invite-btn {
    font-size: 0.78rem;
    padding: 0.3rem 0.75rem;
}
.lobby-footer {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.82rem;
}
.auth-remember-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    cursor: pointer;
}
.auth-remember-label input[type="checkbox"] {
    width: 18px; height: 18px;
    accent-color: var(--accent);
}
.auth-error {
    color: var(--accent-red);
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
    min-height: 1.2em;
}
.auth-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.25rem 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}
.btn-google {
    background: #fff;
    color: #333;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    font-size: 1rem;
}
.btn-google:active { background: #eee; }
.btn-google svg { flex-shrink: 0; }
.auth-guest-btn { margin-top: 0.75rem; }

/* ==========================================================
   HOME HEADER — actions row
   ========================================================== */
.home-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.home-header-actions {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}
.home-friends-btn {
    position: relative;
    font-size: 1.3rem;
}
.friends-badge {
    position: absolute;
    top: -4px; right: -6px;
    background: var(--accent-red);
    color: #fff;
    font-size: 0.55rem;
    font-weight: 700;
    min-width: 16px; height: 16px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 3px;
    line-height: 1;
}
.home-settings-btn {
    font-size: 1.6rem;
    color: var(--text-muted);
    transition: color 0.2s;
}
.home-settings-btn:active { color: var(--text-primary); }
.home-profile-btn { padding: 0 0.15rem; }
.profile-avatar-sm {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.72rem; color: #fff;
    letter-spacing: 0.5px;
}

/* ==========================================================
   FRIENDS SCREEN
   ========================================================== */
#friends-screen { background: var(--bg-dark); }
.friends-search-section { margin-bottom: 1.25rem; }
.friends-search-bar {
    display: flex; gap: 0.5rem; margin-bottom: 0.65rem;
}
.friends-search-bar input {
    flex: 1; padding: 0.75rem 1rem;
    background: var(--bg-input); border: 1px solid var(--border);
    border-radius: 12px; color: var(--text-primary);
    font-size: 1rem; font-family: var(--font-main);
}
.friends-search-bar input::placeholder { color: var(--text-muted); }
.friends-search-bar input:focus { outline: none; border-color: var(--accent); }
.friends-search-go { border-radius: 12px; padding: 0.75rem 1.15rem; white-space: nowrap; }
.friends-section { margin-bottom: 1.5rem; }
.friends-section h3 {
    font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1.5px;
    color: var(--text-muted); margin-bottom: 0.65rem;
    display: flex; align-items: center; gap: 0.5rem;
}
.friends-count-badge {
    background: var(--accent-red); color: #fff; font-size: 0.65rem;
    padding: 0.1rem 0.4rem; border-radius: 10px; font-weight: 700;
}
.friends-count-text {
    font-size: 0.75rem; color: var(--text-muted);
    font-weight: 400; text-transform: none; letter-spacing: 0;
}
.friends-list { display: flex; flex-direction: column; gap: 0.4rem; }
.friends-empty {
    color: var(--text-muted); font-size: 0.9rem;
    text-align: center; padding: 2rem 0;
}
.friend-row {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 12px;
}
.friend-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.8rem; color: #fff;
    flex-shrink: 0; position: relative;
}
.friend-status-dot {
    position: absolute; bottom: 0; right: 0;
    width: 12px; height: 12px; border-radius: 50%;
    border: 2px solid var(--bg-card);
}
.friend-status-dot.online  { background: var(--accent-green); }
.friend-status-dot.offline { background: var(--text-muted); }
.friend-info { flex: 1; min-width: 0; }
.friend-name {
    font-weight: 600; font-size: 0.95rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.friend-status-text { font-size: 0.72rem; color: var(--text-muted); }
.friend-actions { display: flex; gap: 0.35rem; flex-shrink: 0; }
.friend-action-btn {
    padding: 0.4rem 0.65rem; font-size: 0.8rem;
    border-radius: 8px; border: 1px solid var(--border);
    background: var(--bg-input); color: var(--text-secondary);
    cursor: pointer; font-family: var(--font-main); transition: all 0.2s;
}
.friend-action-btn:active { transform: scale(0.95); }
.friend-action-btn.accept  { background: var(--accent-green); color: #fff; border-color: var(--accent-green); }
.friend-action-btn.decline { background: transparent; color: var(--accent-red); border-color: var(--accent-red); }
.friend-action-btn.add     { background: var(--accent); color: #fff; border-color: var(--accent); }
.friend-action-btn.sent    { background: transparent; color: var(--text-muted); border-color: var(--border); cursor: default; }

/* ==========================================================
   PROFILE OVERLAY
   ========================================================== */
.profile-menu { text-align: center; }
.profile-header-sec { margin-bottom: 1.25rem; }
.profile-avatar-lg {
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.5rem; color: #fff;
    margin: 0 auto 0.75rem;
}
.profile-username { color: var(--text-muted); font-size: 0.85rem; margin: 0; }
.profile-stats { margin-bottom: 1rem; }
.profile-stat-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.5rem 0; border-bottom: 1px solid var(--border);
    color: var(--text-secondary); font-size: 0.9rem;
}
.profile-stat-row strong { color: var(--accent-gold); }
.profile-actions { display: flex; flex-direction: column; gap: 0.5rem; }

/* ==========================================================
   INVITE BANNERS (home screen)
   ========================================================== */
.invite-banners {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 540px;
    margin: 0 auto 0.75rem;
}
.invite-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, rgba(74,144,217,0.08), rgba(74,144,217,0.02));
    border: 1px solid var(--accent);
    border-radius: 14px;
    padding: 0.75rem 1rem;
    animation: bannerSlideIn 0.3s ease;
}
@keyframes bannerSlideIn { from { transform: translateY(-12px); opacity: 0; } }
.invite-banner-icon {
    width: 40px; height: 40px; border-radius: 10px;
    background: var(--bg-card); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 1.1rem;
}
.invite-banner-info { flex: 1; min-width: 0; }
.invite-banner-info strong { display: block; font-size: 0.9rem; color: var(--text-primary); }
.invite-banner-info small { color: var(--text-muted); font-size: 0.75rem; }
.invite-banner-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }
.invite-banner-btn {
    width: 36px; height: 36px; border-radius: 50%; border: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; cursor: pointer; transition: transform 0.15s;
}
.invite-banner-btn:active { transform: scale(0.9); }
.invite-banner-btn.accept { background: var(--accent-green); color: white; }
.invite-banner-btn.decline { background: var(--accent-red); color: white; }

/* ==========================================================
   TABLE LOBBY (waiting room)
   ========================================================== */
.table-lobby-settings {
    font-size: 0.82rem;
    color: var(--text-muted);
    text-align: center;
    padding: 1rem 0 0.75rem;
    margin-bottom: 0.25rem;
}
.table-lobby-players {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}
.table-lobby-player {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.table-lobby-player .avatar {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.7rem; color: white; flex-shrink: 0;
}
.table-lobby-player .name { flex: 1; font-weight: 500; font-size: 0.92rem; }
.table-lobby-player .host-badge {
    font-size: 0.68rem; background: var(--accent); color: white;
    padding: 0.15rem 0.5rem; border-radius: 6px; font-weight: 600;
}
.table-lobby-invite { margin-bottom: 1.25rem; }
.table-lobby-actions { margin-top: 0.5rem; }

/* ==========================================================
   POKER TABLE (in-game)
   ========================================================== */
#poker-table-screen {
    background: var(--bg-dark);
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
}
#poker-table-screen.active { display: flex; }

.pt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    padding-top: max(0.75rem, env(safe-area-inset-top));
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.pt-menu-btn { font-size: 1.3rem; color: var(--text-secondary); }
.pt-pot-display { text-align: center; }
.pt-pot-label { display: block; font-size: 0.6rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.pt-pot-amount { font-family: var(--font-action); font-size: 1.3rem; font-weight: 700; color: var(--accent-gold); }
.pt-phase {
    font-size: 0.72rem; font-weight: 600; color: var(--accent);
    text-transform: uppercase; letter-spacing: 0.06em;
}

/* Community cards */
.pt-community {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.75rem 0.5rem;
    min-height: 80px;
    flex-shrink: 0;
}
.pt-community-card {
    width: 52px; height: 72px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg-card);
    transition: all 0.3s;
}
.pt-community-card img { width: 100%; height: 100%; object-fit: contain; }
.pt-community-card.unrevealed {
    background: var(--bg-elevated);
    border-color: var(--border);
}

/* Player seats — scrollable area */
.pt-seats {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    gap: 0.5rem;
    padding: 0.5rem;
    overflow-y: auto;
}
.pt-seat {
    width: calc(50% - 0.5rem);
    max-width: 180px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.6rem;
    text-align: center;
    position: relative;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.pt-seat.active-turn {
    border-color: var(--accent-gold);
    box-shadow: 0 0 12px rgba(245,197,24,0.25);
}
.pt-seat.folded { opacity: 0.35; }
.pt-seat.eliminated { opacity: 0.15; }
.pt-seat-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.75rem; color: white;
    margin: 0 auto 0.3rem;
}
.pt-seat-name { font-size: 0.78rem; font-weight: 600; margin-bottom: 0.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-seat-chips { font-size: 0.72rem; color: var(--accent-gold); font-weight: 600; }
.pt-seat-bet { font-size: 0.68rem; color: var(--accent-green); margin-top: 0.2rem; }
.pt-seat-badge {
    position: absolute; top: 0.3rem; right: 0.3rem;
    font-size: 0.55rem; font-weight: 700; padding: 0.1rem 0.35rem;
    border-radius: 4px; text-transform: uppercase;
}
.pt-seat-badge.dealer { background: var(--accent); color: white; }
.pt-seat-badge.sb { background: var(--text-muted); color: black; }
.pt-seat-badge.bb { background: var(--text-secondary); color: black; }
.pt-seat-status { font-size: 0.65rem; color: var(--accent-red); font-weight: 600; margin-top: 0.15rem; }

/* Seat details: you, last action, winnings, turn timer */
.pt-seat.me { border-color: rgba(var(--play-rgb),0.55); }
.pt-seat.me.active-turn { border-color: var(--accent-gold); }
.pt-you { color: var(--text-muted); font-weight: 500; }
.pt-seat-act {
    display: inline-block; margin-top: 0.25rem; padding: 0.05rem 0.45rem;
    border-radius: 999px; background: var(--bg-elevated); color: var(--text-secondary);
    font-size: 0.64rem; font-weight: 600;
}
.pt-seat-won { font-size: 0.72rem; font-weight: 700; color: var(--good); margin-top: 0.2rem; }
.pt-seat-status.allin { color: var(--accent-gold); }
.pt-seat-timer {
    position: absolute; top: 0.3rem; left: 0.4rem;
    font-size: 0.62rem; font-weight: 700; color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.pt-seat-timer.urgent { color: var(--accent-red); }
.pt-notice {
    margin: 0 0.75rem 0.25rem; padding: 0.55rem 0.75rem;
    border-radius: 10px; background: var(--bg-card); border: 1px solid var(--border);
    font-size: 0.8rem; color: var(--text-secondary); text-align: center;
    display: flex; align-items: center; justify-content: center; gap: 0.6rem; flex-wrap: wrap;
    flex-shrink: 0;
}
.pt-hole-card.folded { opacity: 0.4; }

/* My hole cards */
.pt-hole-cards {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.4rem;
    flex-shrink: 0;
    min-height: 65px;
}
.pt-hole-card {
    width: 46px; height: 64px;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid var(--border);
}
.pt-hole-card img { width: 100%; height: 100%; object-fit: contain; }

/* Action bar */
.pt-actions {
    display: flex;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem;
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.pt-actions.hidden { display: none; }
.pt-action-btn {
    flex: 1;
    padding: 0.7rem 0.25rem;
    border-radius: 10px;
    border: none;
    font-family: var(--font-action);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
}
.pt-action-btn:active { transform: scale(0.95); }
.pt-action-btn:disabled { opacity: 0.3; pointer-events: none; }

/* Raise controls */
.pt-raise-controls {
    padding: 0.75rem;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.pt-raise-controls.hidden { display: none; }
.pt-raise-controls input[type="range"] {
    width: 100%;
    accent-color: var(--accent-gold);
    margin-bottom: 0.5rem;
}
.pt-raise-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.pt-raise-row span {
    font-family: var(--font-action);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--accent-gold);
    flex: 1;
}

/* Showdown overlay */
.pt-showdown-content { max-width: 380px; }
.pt-showdown-result {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem;
    background: var(--bg-input);
    border-radius: 10px;
    margin-bottom: 0.5rem;
    border: 1px solid var(--border);
}
.pt-showdown-result.winner {
    border-color: var(--accent-gold);
    background: rgba(245,197,24,0.06);
}
.pt-showdown-result .name { font-weight: 600; flex: 1; font-size: 0.92rem; }
.pt-showdown-result .hand-name { font-size: 0.78rem; color: var(--text-muted); }
.pt-showdown-result .amount { font-weight: 700; color: var(--accent-gold); font-size: 0.92rem; }
.pt-showdown-cards {
    display: flex;
    gap: 0.3rem;
    margin-top: 0.3rem;
}
.pt-showdown-cards img {
    width: 28px;
    height: 39px;
    border-radius: 3px;
    border: 1px solid var(--border);
}
.pt-showdown-main { flex: 1; min-width: 0; text-align: left; }
.pt-pot-lines {
    margin: 0.25rem 0 0.75rem; padding: 0.5rem 0.65rem;
    border-radius: 10px; background: var(--bg-input);
    font-size: 0.78rem; color: var(--text-secondary);
}
.pt-pot-lines > div { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.15rem 0; }

/* ==========================================
   PREFLOP TRAINER
   ========================================== */

/* Table size selector on mode screen */
.pf-table-size {
    margin-top: 1.5rem;
    text-align: center;
}
.pf-table-size h3 {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.75rem;
    font-weight: 600;
}
.pf-size-btns {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}
.pf-size-btn {
    flex: 1;
    max-width: 120px;
    padding: 0.65rem 1rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-family: var(--font-action);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.pf-size-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* Highscores on mode screen */
.pf-highscores {
    margin-top: 1.5rem;
    padding: 1rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 12px;
    text-align: center;
}
.pf-highscores h4 {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.5rem;
    font-weight: 600;
}
.pf-highscores .pf-hs-row {
    display: flex;
    justify-content: space-between;
    padding: 0.35rem 0.25rem;
    font-size: 0.88rem;
}
.pf-highscores .pf-hs-row .label { color: var(--text-secondary); }
.pf-highscores .pf-hs-row .value { color: var(--accent-gold); font-weight: 700; }

/* Header stats */
.pf-header-stats {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-action);
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 600;
}
.pf-stat-sep { color: var(--text-muted); }

/* Game body */
.pf-game-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    gap: 1rem;
    flex: 1;
    overflow-y: auto;
}

/* Player boxes row */
.pf-players-row {
    display: flex;
    gap: 0.4rem;
    width: 100%;
    max-width: 560px;
    justify-content: center;
    flex-wrap: wrap;
}
.pf-player-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.4rem 0.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    min-width: 54px;
    flex: 1;
    max-width: 80px;
    transition: all 0.2s;
}
.pf-player-box .pf-pb-pos {
    font-family: var(--font-action);
    font-weight: 700;
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.pf-player-box .pf-pb-action {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    min-height: 0.8rem;
}
.pf-player-box.folded { opacity: 0.35; }
.pf-player-box.folded .pf-pb-action { color: var(--text-muted); }
.pf-player-box.raised { border-color: var(--accent-gold); background: rgba(245,197,24,0.06); }
.pf-player-box.raised .pf-pb-action { color: var(--accent-gold); }
.pf-player-box.you { border-color: var(--accent); background: rgba(74,144,217,0.08); }
.pf-player-box.you .pf-pb-pos { color: var(--accent); }
.pf-player-box.you .pf-pb-action { color: var(--accent); }
.pf-player-box.waiting .pf-pb-action { color: var(--text-muted); }

/* Your hand area */
.pf-your-hand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}
.pf-position-badge {
    font-family: var(--font-action);
    font-weight: 800;
    font-size: 1.1rem;
    color: #fff;
    background: var(--accent);
    padding: 0.3rem 1rem;
    border-radius: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
}
.pf-cards {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}
.pf-cards img {
    width: 68px;
    height: 95px;
    border-radius: 6px;
    border: 2px solid var(--border);
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.pf-hand-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.pf-hand-label {
    font-family: var(--font-action);
    font-size: 0.95rem;
    color: var(--text-secondary);
    font-weight: 700;
    letter-spacing: 0.04em;
}
.pf-stack {
    font-family: var(--font-action);
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text-muted);
    background: var(--bg-input);
    border: 1px solid var(--border);
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
}

/* Action buttons — use the pass-and-play .btn-fold/.btn-call/.btn-raise styles */
.pf-actions {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    width: 100%;
    max-width: 400px;
    margin-top: 0.5rem;
}
.pf-action-btn.disabled {
    opacity: 0.3;
    pointer-events: none;
}

/* Responsive: horizontal on landscape + desktop */
@media (orientation: landscape), (min-width: 768px) {
    .pf-actions { flex-direction: row; }
    .pf-actions .btn { flex: 1; }
}

/* Feedback overlay */
.pf-feedback {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.88);
    transition: opacity 0.2s;
    overflow-y: auto;
}
.pf-feedback.hidden { display: none; }
.pf-feedback-inner {
    text-align: center;
    padding: 1.5rem 1.25rem;
    max-width: 380px;
    width: 92%;
}
.pf-feedback-icon {
    font-size: 2.8rem;
    margin-bottom: 0.3rem;
}
.pf-feedback-icon.correct { color: var(--accent-green); }
.pf-feedback-icon.wrong { color: var(--accent-red); }
.pf-feedback h2 {
    font-size: 1.3rem;
    margin-bottom: 0.4rem;
}
.pf-feedback h2.correct { color: var(--accent-green); }
.pf-feedback h2.wrong { color: var(--accent-red); }
.pf-feedback-text {
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

/* Range chart in feedback */
.pf-range-chart {
    margin: 0.75rem auto 1.25rem;
    max-width: 320px;
}
.pf-range-grid {
    display: grid;
    grid-template-columns: repeat(13, 1fr);
    gap: 1px;
    font-size: 0.42rem;
    font-family: var(--font-action);
    font-weight: 600;
    line-height: 1;
    border-radius: 6px;
    overflow: hidden;
}
.pf-range-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
    color: var(--text-muted);
    border: 0.5px solid rgba(255,255,255,0.04);
    font-size: clamp(0.38rem, 1.6vw, 0.52rem);
    letter-spacing: -0.02em;
}
.pf-range-cell.raise {
    background: rgba(34,197,94,0.35);
    color: var(--accent-green);
}
.pf-range-cell.call {
    background: rgba(59,130,246,0.3);
    color: var(--accent-blue);
}
.pf-range-cell.highlight {
    outline: 2px solid #fff;
    outline-offset: -1px;
    z-index: 1;
    font-weight: 900;
}
.pf-range-legend {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 0.4rem;
    font-size: 0.65rem;
    color: var(--text-muted);
}
.pf-range-legend span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.pf-legend-swatch {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    display: inline-block;
}
.pf-legend-swatch.raise-sw { background: rgba(34,197,94,0.5); }
.pf-legend-swatch.call-sw { background: rgba(59,130,246,0.45); }
.pf-legend-swatch.fold-sw { background: var(--bg-input); border: 1px solid var(--border); }

/* Game over stats */
.pf-go-stats {
    margin: 1rem 0 1.5rem;
    text-align: center;
}
.pf-go-stats .stat-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    border-bottom: 1px solid var(--border);
}
.pf-go-stats .stat-row:last-child { border-bottom: none; }
.pf-go-stats .stat-label { color: var(--text-secondary); }
.pf-go-stats .stat-value { color: var(--accent-gold); font-weight: 700; }

/* Home screen sections (same column as the cards, so titles line up on wide screens) */
.home-section {
    max-width: 540px;
    margin: 0 auto 1.5rem;
}
.home-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.6rem;
    padding-left: 0.15rem;
    font-family: var(--font-action);
}

/* ==========================================================
   SIDE POTS (showdown + round summary)
   ========================================================== */
.showdown-pots, .round-summary-pots {
    display: flex; flex-direction: column; gap: 0.3rem;
    margin: 0.25rem 0 0.75rem; padding: 0.6rem 0.75rem;
    background: var(--bg-input); border: 1px solid var(--border); border-radius: 10px;
}
.showdown-pot-row, .round-summary-pot-row {
    display: flex; justify-content: space-between; gap: 0.75rem;
    font-size: 0.8rem; color: var(--text-secondary);
}
.showdown-pot-row span:last-child, .round-summary-pot-row span:last-child {
    color: var(--text-primary); font-weight: 600; text-align: right;
}
.round-summary-note { font-size: 0.78rem; color: var(--text-muted); margin-top: -0.5rem; margin-bottom: 0.75rem; }
.standing-avatar { width: 32px; height: 32px; font-size: 0.7rem; }

/* ==========================================================
   SHARED: primary "Play" button, segmented control, toast
   ========================================================== */
:root {
    --play: #3d8bfd;
    --play-dark: #2a64c7;
    --play-rgb: 61,139,253;
    --good: #34c77b;
    --good-rgb: 52,199,123;
    --felt-1: #1d6a45;
    --felt-2: #134b31;
    --felt-3: #0d3522;
    --grade-best: #81b64c;
    --grade-inaccuracy: #f7c631;
    --grade-mistake: #e58f2a;
    --grade-blunder: #ca3431;
}
.btn-play {
    background: var(--play); color: #fff; font-weight: 800; letter-spacing: 0.2px;
    border-radius: 14px; box-shadow: 0 4px 0 var(--play-dark);
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.btn-play:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--play-dark); }
.btn-accent { background: var(--accent); color: #fff; }
.btn-small { padding: 0.4rem 0.8rem; font-size: 0.82rem; border-radius: 9px; }

.segmented {
    display: flex; background: #151515; border: 1px solid var(--border-light);
    border-radius: 11px; padding: 3px; gap: 3px;
}
.segmented button {
    flex: 1; background: transparent; border: none; color: var(--text-secondary);
    font: 600 0.88rem var(--font-main); padding: 0.55rem 0.5rem; border-radius: 8px;
    cursor: pointer; transition: background 0.2s ease, color 0.2s ease;
}
.segmented button.active { background: #2c2c2e; color: var(--text-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.5); }

.app-toast {
    position: fixed; left: 50%; bottom: calc(96px + var(--safe-bottom)); z-index: 300;
    transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
    background: rgba(40,40,42,0.96); color: #fff; font: 600 0.88rem var(--font-main);
    padding: 0.65rem 1.1rem; border-radius: 22px; box-shadow: 0 8px 30px rgba(0,0,0,0.5);
    transition: opacity 0.25s ease, transform 0.25s ease; max-width: 88vw; text-align: center;
}
.app-toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* Home: Play vs Computer */
.game-card.play-cpu-card { border-color: var(--play); background: linear-gradient(135deg, rgba(var(--play-rgb),0.10), transparent 70%); }
.cpu-icon-stack { position: relative; height: 40px; }
.cpu-icon-stack span {
    position: absolute; top: 4px; width: 30px; height: 30px; border-radius: 50%;
    background: #222; border: 2px solid #0d0d0d; display: flex; align-items: center; justify-content: center;
    font-size: 16px;
}
.cpu-icon-stack span:nth-child(1) { left: -2px; }
.cpu-icon-stack span:nth-child(2) { left: 12px; z-index: 1; }
.cpu-icon-stack span:nth-child(3) { left: 26px; z-index: 2; }

/* ==========================================================
   PLAY VS COMPUTER — SETUP
   ========================================================== */
#cpu-setup-screen, #cpu-review-screen { background: var(--bg-dark); }
.cpu-setup-body { padding-bottom: 1.5rem; }
.bot-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 0.9rem; }
.bot-card {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
    padding: 0.75rem 0.25rem 0.6rem; background: var(--bg-card); border: 2px solid var(--border);
    border-radius: 14px; cursor: pointer; font-family: var(--font-main); color: var(--text-primary);
    transition: border-color 0.2s ease, transform 0.1s ease;
}
.bot-card:active { transform: scale(0.97); }
.bot-card.selected { border-color: var(--play); background: rgba(var(--play-rgb),0.08); }
.bot-card.locked { opacity: 0.45; }
.bot-avatar {
    width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-size: 26px; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 55%, #fff 0%), var(--c));
    box-shadow: 0 2px 8px rgba(0,0,0,0.45), inset 0 -3px 0 rgba(0,0,0,0.18); flex-shrink: 0;
}
.bot-avatar.lg { width: 60px; height: 60px; font-size: 34px; }
.bot-card-name { font-size: 0.86rem; font-weight: 700; }
.bot-card-rating { font-size: 0.72rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.bot-beaten {
    position: absolute; top: 6px; right: 8px; width: 18px; height: 18px; border-radius: 50%;
    background: var(--play); color: #fff; font-size: 0.7rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.bot-detail { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 1rem; margin-bottom: 1.1rem; }
.bot-detail-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.6rem; }
.bot-detail-name { font-size: 1.15rem; font-weight: 800; }
.bot-detail-meta { font-size: 0.82rem; color: var(--text-secondary); }
.bot-detail-blurb { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.4; margin-bottom: 0.7rem; }
.bot-habits { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: -0.2rem 0 0.75rem; }
.bot-habits span { font-size: 0.72rem; font-weight: 700; color: var(--text-secondary); background: #1d1d1d; border: 1px solid #2c2c2c; border-radius: 999px; padding: 0.2rem 0.6rem; }
.bot-detail-tip { font-size: 0.85rem; line-height: 1.4; color: var(--text-primary); background: #101a2b; border: 1px solid #1c3050; border-radius: 12px; padding: 0.7rem 0.8rem; }
.bot-detail-tip strong { display: block; color: var(--play); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.2rem; }
.bot-detail-record { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.6rem; }
.setting-group { margin-bottom: 1rem; }
.setting-label { font-size: 0.72rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 0.4rem 0.2rem; }
.setting-hint { font-size: 0.8rem; color: var(--text-muted); margin: 0.45rem 0.2rem 0; line-height: 1.35; }
.cpu-setup-footer { padding: 0.75rem 1rem calc(0.9rem + var(--safe-bottom)); background: linear-gradient(transparent, #000 30%); }

/* ==========================================================
   PLAY VS COMPUTER — TABLE
   ========================================================== */
#cpu-table-screen { background: #0a0a0a; }
.ct-topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: calc(0.4rem + var(--safe-top)) 0.75rem 0.4rem;
}
.ct-menu-btn { font-size: 1.25rem; width: 40px; }
.ct-info { display: flex; flex-direction: column; align-items: center; font-size: 0.72rem; color: var(--text-muted); line-height: 1.3; }
.ct-info span:first-child { color: var(--text-secondary); font-weight: 600; font-size: 0.78rem; }
.ct-coach-pill {
    font: 700 0.74rem var(--font-main); color: var(--text-secondary); background: #1a1a1a;
    border: 1px solid var(--border-light); border-radius: 20px; padding: 0.35rem 0.75rem; cursor: pointer;
}
.ct-coach-pill.on { color: var(--play); border-color: rgba(var(--play-rgb),0.5); background: rgba(var(--play-rgb),0.08); }

.ct-table-wrap { flex: 1; min-height: 0; padding: 0 0.4rem; position: relative; }
.ct-table { position: relative; width: 100%; height: 100%; max-width: 560px; margin: 0 auto; }
.ct-felt {
    position: absolute; inset: 9% 13% 11%; border-radius: 50% / 38%;
    background: radial-gradient(ellipse at 50% 42%, var(--felt-1) 0%, var(--felt-2) 58%, var(--felt-3) 100%);
    box-shadow: 0 0 0 9px #191512, 0 0 0 10px #2a241f, 0 18px 40px rgba(0,0,0,0.6), inset 0 0 40px rgba(0,0,0,0.45);
}
.ct-center {
    position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%);
    display: flex; flex-direction: column; align-items: center; gap: 0.45rem; width: 74%; pointer-events: none;
}
.ct-pot { display: flex; align-items: center; gap: 0.35rem; min-height: 22px; font: 700 0.85rem var(--font-main); color: #fff; }
.ct-pot img { width: 18px; height: 18px; }
.ct-pot span { background: rgba(0,0,0,0.35); padding: 0.1rem 0.5rem; border-radius: 10px; font-variant-numeric: tabular-nums; }
.ct-board { display: flex; gap: 4px; justify-content: center; }
.ct-slot { width: 13.4vw; max-width: 56px; aspect-ratio: 5 / 7; border-radius: 5px; border: 1px dashed rgba(255,255,255,0.14); }
.ct-board-card { border: none; perspective: 600px; animation: boardIn 0.3s ease both; }
.ct-result {
    margin-top: 0.15rem; font: 700 0.84rem var(--font-main); color: #fff; background: rgba(0,0,0,0.55);
    padding: 0.35rem 0.8rem; border-radius: 14px; text-align: center; animation: resultIn 0.35s ease both;
}
.ct-result.win { background: rgba(var(--good-rgb),0.9); }
.ct-result.hidden { display: none; }
@keyframes resultIn { from { opacity: 0; transform: translateY(6px) scale(0.96); } to { opacity: 1; transform: none; } }

/* Card flip used for the board and your cards */
.flip { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.42s cubic-bezier(.2,.7,.2,1); }
.flip img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 5px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip .front { transform: rotateY(180deg); }
.up > .flip { transform: rotateY(180deg); }
@keyframes boardIn { from { opacity: 0; transform: translateY(-14px) scale(0.9); } to { opacity: 1; transform: none; } }

/* Seats */
.ct-seat {
    position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center;
    width: 76px; z-index: 2; transition: opacity 0.3s ease;
}
.ct-seat.out { opacity: 0.25; }
.ct-seat.folded .ct-avatar, .ct-seat.folded .ct-seat-plate { opacity: 0.45; }
.ct-avatar {
    width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 25px; font-weight: 800; color: #fff; position: relative; z-index: 1;
    background: radial-gradient(circle at 35% 30%, var(--c), color-mix(in srgb, var(--c) 70%, #000));
    box-shadow: 0 3px 10px rgba(0,0,0,0.55), 0 0 0 2px rgba(0,0,0,0.6);
    transition: box-shadow 0.25s ease;
}
.ct-seat.hero .ct-avatar { font-size: 18px; }
.ct-seat.thinking .ct-avatar, .ct-seat.to-act .ct-avatar { box-shadow: 0 0 0 3px #fff, 0 0 18px rgba(255,255,255,0.35); }
.ct-seat.thinking .ct-avatar::after {
    content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.55);
    border-top-color: transparent; animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.ct-seat.winner .ct-avatar { box-shadow: 0 0 0 3px #f5c518, 0 0 22px rgba(245,197,24,0.6); }
.ct-seat-plate {
    margin-top: -6px; background: rgba(12,12,12,0.92); border: 1px solid #2a2a2a; border-radius: 9px;
    padding: 0.2rem 0.45rem 0.18rem; display: flex; flex-direction: column; align-items: center; min-width: 70px;
}
.ct-seat-name { font: 700 0.68rem var(--font-main); color: var(--text-primary); white-space: nowrap; max-width: 76px; overflow: hidden; text-overflow: ellipsis; }
.ct-seat-stack { font: 700 0.7rem var(--font-main); color: var(--accent-gold); font-variant-numeric: tabular-nums; }
.ct-seat-cards { position: absolute; top: -20px; display: flex; gap: 2px; z-index: 0; }
.ct-seat.hero .ct-seat-cards { display: none; }
.ct-mini-card { width: 26px; height: 36px; border-radius: 3px; box-shadow: 0 2px 5px rgba(0,0,0,0.5); }
.ct-mini-card.face { width: 32px; height: 45px; animation: revealIn 0.35s ease both; }
.ct-seat-cards:has(.face) { top: -34px; }
.ct-seat.folded .ct-mini-card:not(.face) { opacity: 0; transform: translateY(-6px); transition: all 0.3s ease; }
@keyframes revealIn { from { transform: rotateY(90deg); } to { transform: none; } }
.ct-seat-tag {
    position: absolute; top: 100%; margin-top: 3px; font: 800 0.62rem var(--font-main); letter-spacing: 0.04em;
    text-transform: uppercase; color: #fff; background: rgba(255,255,255,0.14); padding: 0.1rem 0.45rem; border-radius: 6px;
    white-space: nowrap; opacity: 0; transform: translateY(-3px); transition: opacity 0.2s ease, transform 0.2s ease;
}
.ct-seat-tag.show { opacity: 1; transform: none; }
.ct-seat-tag.hot { background: #d8563a; }
.ct-seat-tag.muted { background: rgba(255,255,255,0.08); color: var(--text-muted); }
.ct-seat-tag.show-hand { background: rgba(245,197,24,0.9); color: #111; text-transform: none; letter-spacing: 0; }
.ct-seat.hero .ct-seat-tag { top: auto; bottom: 100%; margin: 0 0 22px; }
.ct-bubble {
    position: absolute; bottom: calc(100% + 22px); background: #fff; color: #111; font: 600 0.7rem var(--font-main);
    padding: 0.35rem 0.55rem; border-radius: 10px; width: max-content; max-width: 130px; text-align: center;
    box-shadow: 0 4px 14px rgba(0,0,0,0.4); z-index: 5; animation: resultIn 0.25s ease both;
}
.ct-bubble::after { content: ''; position: absolute; left: 50%; bottom: -5px; margin-left: -5px; border: 5px solid transparent; border-bottom: 0; border-top-color: #fff; }
.ct-bubble.hidden { display: none; }
.ct-seat.top .ct-bubble { bottom: auto; top: calc(100% + 26px); }
.ct-seat.top .ct-bubble::after { bottom: auto; top: -5px; border: 5px solid transparent; border-top: 0; border-bottom-color: #fff; }
.ct-bet {
    position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 3px; z-index: 1;
    font: 700 0.7rem var(--font-main); color: #fff; opacity: 0; transition: opacity 0.2s ease;
    font-variant-numeric: tabular-nums;
}
.ct-bet.show { opacity: 1; animation: betPop 0.22s ease; }
.ct-bet img { width: 18px; height: 18px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
.ct-bet span { background: rgba(0,0,0,0.45); padding: 0 0.35rem; border-radius: 8px; }
@keyframes betPop { from { transform: translate(-50%, -50%) scale(0.7); } to { transform: translate(-50%, -50%) scale(1); } }
.ct-dealer-btn {
    position: absolute; transform: translate(-50%, -50%); width: 20px; height: 20px; border-radius: 50%;
    background: #f4f1ea; color: #111; font: 900 0.62rem var(--font-main); display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5); transition: left 0.45s ease, top 0.45s ease; z-index: 1;
}
.ct-fly { position: absolute; transform: translate(-50%, -50%); z-index: 6; pointer-events: none; display: flex; }
.ct-fly img { width: 20px; height: 20px; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5)); }
.ct-fly.pile img + img { margin-left: -12px; }
.ct-win-float {
    position: absolute; transform: translate(-50%, -50%); z-index: 7; pointer-events: none;
    font: 800 0.95rem var(--font-main); color: #f5c518; text-shadow: 0 2px 6px rgba(0,0,0,0.7);
    animation: floatUp 1.3s ease forwards;
}
@keyframes floatUp { from { opacity: 0; transform: translate(-50%, -30%); } 20% { opacity: 1; } to { opacity: 0; transform: translate(-50%, -160%); } }

/* Deal animation: cards drop in from the dealer */
.deal { animation: dealIn 0.32s cubic-bezier(.2,.7,.2,1) both; }
@keyframes dealIn { from { opacity: 0; transform: translateY(-40px) scale(0.6) rotate(-8deg); } to { opacity: 1; transform: none; } }

/* Your cards */
.ct-hero { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0.2rem 0 0.35rem; }
.ct-hero-cards { display: flex; gap: 8px; height: 92px; }
.ct-hero-card { width: 64px; height: 90px; perspective: 700px; }
.ct-hero-card .flip img { border-radius: 7px; box-shadow: 0 4px 14px rgba(0,0,0,0.55); }
.ct-hero-card.mucked { opacity: 0.35; transform: translateY(6px); transition: all 0.3s ease; }
.ct-hero-meta { display: flex; gap: 0.6rem; align-items: center; margin-top: 0.3rem; font: 600 0.8rem var(--font-main); min-height: 1.1rem; }
#ct-hero-hand { color: var(--text-secondary); }
#ct-hero-stack { color: var(--accent-gold); font-weight: 700; font-variant-numeric: tabular-nums; }
.grade-pill {
    display: inline-flex; align-items: center; gap: 0.35rem; border: none; cursor: pointer;
    background: var(--g); color: #fff; font: 800 0.78rem var(--font-main); padding: 0.35rem 0.7rem 0.35rem 0.4rem;
    border-radius: 20px; box-shadow: 0 4px 14px rgba(0,0,0,0.5); animation: gradeIn 0.35s cubic-bezier(.3,1.5,.5,1) both;
}
@keyframes gradeIn { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
.grade-icon {
    display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; border-radius: 50%;
    background: rgba(0,0,0,0.22); font-size: 0.7rem; font-weight: 900; padding: 0 3px;
}

/* Coach HUD (hints) */
.ct-coach {
    margin: 0 0.75rem 0.4rem; padding: 0.55rem 0.7rem; background: #111; border: 1px solid #242424; border-radius: 14px;
    animation: resultIn 0.25s ease both;
}
.ct-coach.hidden { display: none; }
.hud-loading { font-size: 0.8rem; color: var(--text-muted); }
.hud-row { display: flex; align-items: center; gap: 0.75rem; }
.hud-eq { flex: 1; }
.hud-eq-bar { position: relative; height: 8px; border-radius: 4px; background: #2a2a2a; overflow: visible; }
.hud-eq-bar div { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--play), #8dbdff); transition: width 0.4s ease; }
.hud-eq-bar i { position: absolute; top: -4px; width: 2px; height: 16px; background: #fff; border-radius: 1px; }
.hud-eq-text { font-size: 0.74rem; color: var(--text-secondary); margin-top: 0.25rem; }
.hud-eq-text strong { color: #fff; font-size: 0.82rem; }
.hud-stat { display: flex; flex-direction: column; align-items: center; font-size: 0.62rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.hud-stat span { font: 800 0.95rem var(--font-main); color: #fff; letter-spacing: 0; }
.hud-advice { margin-top: 0.45rem; font-size: 0.78rem; color: var(--text-secondary); line-height: 1.35; }
.hud-advice strong { color: #fff; }
.hud-tag { display: inline-block; background: rgba(var(--play-rgb),0.16); color: var(--play); font-size: 0.64rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.05rem 0.4rem; border-radius: 6px; margin-right: 0.3rem; }

/* Coach explanation card */
.ct-explain {
    position: absolute; left: 0.75rem; right: 0.75rem; bottom: calc(76px + var(--safe-bottom)); z-index: 60;
    background: #161616; border: 1px solid #2b2b2b; border-radius: 16px; padding: 0.9rem 1rem;
    box-shadow: 0 16px 40px rgba(0,0,0,0.65); animation: resultIn 0.25s ease both;
}
.ct-explain.hidden { display: none; }
.explain-head { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.4rem; font: 700 0.8rem var(--font-main); color: var(--g); }
.explain-head .grade-icon { background: var(--g); color: #fff; }
.explain-head strong { color: #fff; font-size: 0.95rem; margin-left: 0.2rem; }
.ct-explain p { font-size: 0.86rem; line-height: 1.45; color: var(--text-secondary); margin-bottom: 0.5rem; }
.explain-best { font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 0.6rem; }
.explain-best strong { color: var(--play); }
.explain-cost { color: #e58f2a; font-weight: 700; margin-left: 0.35rem; font-size: 0.78rem; }
.hud-mix, .explain-mix { font-size: 0.74rem; color: var(--text-muted); margin: 0.35rem 0 0.55rem; line-height: 1.35; }

/* What the opponent's range is made of */
.rg { margin: 0.5rem 0 0.35rem; }
.rg-title { font-size: 0.64rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; margin-bottom: 0.25rem; }
.rg-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: #262626; }
.rg-bar i { display: block; height: 100%; }
.rg-legend { display: flex; flex-wrap: wrap; gap: 0.15rem 0.65rem; margin-top: 0.3rem; font-size: 0.7rem; color: var(--text-secondary); }
.rg-legend span { display: inline-flex; align-items: center; gap: 0.28rem; }
.rg-legend b { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.rg-monster { background: #ca3431; }
.rg-twopair { background: #e58f2a; }
.rg-toppair { background: #f7c631; }
.rg-pair { background: #95b776; }
.rg-draw { background: #4a90d9; }
.rg-air { background: #5c5c5c; }
.explain-lesson { display: block; width: 100%; text-align: left; background: #14213a; border: 1px solid #233f6b; color: var(--play); font: 700 0.82rem var(--font-main); padding: 0.55rem 0.7rem; border-radius: 10px; margin-bottom: 0.5rem; cursor: pointer; }
.explain-close { width: 100%; background: #262626; color: #fff; border: none; font: 700 0.9rem var(--font-main); padding: 0.65rem; border-radius: 10px; cursor: pointer; }

/* Action bar */
.ct-actions, .ct-next { display: flex; gap: 0.5rem; padding: 0.45rem 0.75rem calc(0.6rem + var(--safe-bottom)); }
.ct-next.hidden, .ct-actions.hidden { display: none; }
.ct-btn {
    flex: 1; min-height: 52px; border: none; border-radius: 13px; cursor: pointer; color: #fff;
    font: 800 0.98rem var(--font-action); letter-spacing: 0.4px; text-transform: uppercase;
    display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1;
    transition: transform 0.08s ease, opacity 0.2s ease, box-shadow 0.08s ease;
}
.ct-btn small { font: 600 0.72rem var(--font-main); opacity: 0.85; text-transform: none; letter-spacing: 0; }
.ct-btn:active { transform: translateY(2px); }
.ct-btn:disabled { opacity: 0.35; pointer-events: none; }
.ct-btn.fold { background: #2a2a2c; color: #cfcfcf; box-shadow: 0 3px 0 #161616; }
.ct-btn.fold.dim { opacity: 0.55; }
.ct-btn.call { background: #3d6fb5; box-shadow: 0 3px 0 #264a7c; }
.ct-btn.raise { background: var(--play); box-shadow: 0 3px 0 var(--play-dark); }
.ct-btn.review { background: #2a2a2c; box-shadow: 0 3px 0 #161616; text-transform: none; font-family: var(--font-main); font-size: 0.92rem; }
.ct-btn.next { background: var(--play); box-shadow: 0 3px 0 var(--play-dark); text-transform: none; font-family: var(--font-main); font-size: 0.95rem; }
.ct-actions.waiting .ct-btn { opacity: 0.35; }

/* Wide screens: keep the action bar and raise sheet a comfortable width */
@media (min-width: 768px) {
    .ct-actions, .ct-next { width: 100%; max-width: 680px; margin: 0 auto; }
    .ct-raise-sheet { max-width: 680px; margin: 0 auto; }
    .pt-actions, .pt-raise-controls { width: 100%; max-width: 680px; margin: 0 auto; border-radius: 14px 14px 0 0; }
}

/* Raise sheet */
.ct-raise-sheet {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 70; background: #141414; border-top: 1px solid #2a2a2a;
    border-radius: 20px 20px 0 0; padding: 0.9rem 1rem calc(0.9rem + var(--safe-bottom));
    box-shadow: 0 -12px 40px rgba(0,0,0,0.6); animation: sheetUp 0.25s cubic-bezier(.2,.8,.2,1) both;
}
.ct-raise-sheet.hidden { display: none; }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
.ct-raise-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.65rem; color: var(--text-secondary); font-size: 0.85rem; }
.ct-raise-top strong { font-size: 1.5rem; color: #fff; font-variant-numeric: tabular-nums; }
.ct-presets { display: flex; gap: 0.4rem; margin-bottom: 0.8rem; }
.ct-presets button { flex: 1; background: #232323; border: 1px solid #303030; color: var(--text-primary); font: 700 0.85rem var(--font-main); padding: 0.55rem 0; border-radius: 10px; cursor: pointer; }
.ct-presets button.active { background: var(--play); border-color: var(--play); }
.ct-raise-sheet .raise-slider { margin-bottom: 0.9rem; }
.ct-raise-row { display: grid; grid-template-columns: 1fr 2fr; gap: 0.5rem; }
.ct-raise-sheet .btn-raise-confirm { background: var(--play); box-shadow: 0 3px 0 var(--play-dark); }

/* Hand review */
.ct-review-content { max-width: 440px; text-align: left; }
.ct-review-content h2 { text-align: center; }
.rv-hand { background: var(--bg-input); border: 1px solid var(--border); border-radius: 12px; padding: 0.65rem 0.75rem; margin-bottom: 0.75rem; position: relative; }
.rv-row, .rv-show { display: flex; align-items: center; gap: 4px; margin-bottom: 0.35rem; flex-wrap: wrap; }
.rv-label, .rv-show > span { width: 52px; font-size: 0.72rem; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.rv-show em { font-size: 0.72rem; color: var(--text-secondary); font-style: normal; margin-left: 4px; }
.rv-card { width: 30px; height: 42px; border-radius: 3px; }
.rv-net { position: absolute; right: 0.75rem; top: 0.6rem; font: 800 0.95rem var(--font-main); }
.rv-net.up { color: var(--good); } .rv-net.down { color: var(--accent-red); }
.rv-decision { border-left: 3px solid var(--g); background: #121212; border-radius: 10px; padding: 0.6rem 0.75rem; margin-bottom: 0.55rem; }
.rv-dec-head { display: flex; align-items: center; gap: 0.45rem; font-size: 0.78rem; margin-bottom: 0.25rem; }
.rv-dec-head .grade-icon { background: var(--g); color: #fff; }
.rv-street { color: var(--text-muted); font-weight: 700; text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.06em; }
.rv-action { color: var(--text-primary); font-weight: 700; }
.rv-grade { margin-left: auto; color: var(--g); font-weight: 800; }
.rv-title { font-weight: 800; font-size: 0.9rem; margin-bottom: 0.15rem; }
.rv-decision p { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.4; margin: 0; text-align: left; }
.rv-best { font-size: 0.78rem; color: var(--play); font-weight: 700; margin-top: 0.3rem; }
.rv-empty { text-align: center; }

/* Game review */
.gr-hero { display: flex; align-items: center; gap: 1.2rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; padding: 1rem 1.1rem; margin-bottom: 0.9rem; }
.gr-ring {
    --p: 0; width: 112px; height: 112px; border-radius: 50%; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: radial-gradient(closest-side, #0d0d0d 79%, transparent 80% 100%), conic-gradient(var(--play) calc(var(--p) * 1%), #262626 0);
}
.gr-ring span { font: 900 2.1rem var(--font-main); line-height: 1; }
.gr-ring small { font-size: 0.66rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 0.2rem; }
.gr-hero-side { display: flex; flex-direction: column; gap: 0.5rem; }
.gr-hero-side small { display: block; font-size: 0.66rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.gr-rating strong, .gr-result strong { font: 800 1.35rem var(--font-main); }
.gr-result.up strong { color: var(--good); } .gr-result.down strong { color: var(--accent-red); }
.gr-hands { font-size: 0.8rem; color: var(--text-secondary); }
.gr-counts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; margin-bottom: 1rem; }
.gr-count { display: flex; align-items: center; gap: 0.5rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 0.5rem 0.65rem; font-size: 0.84rem; }
.gr-count .grade-icon { background: var(--g); color: #fff; }
.gr-count strong { margin-left: auto; color: var(--g); font-size: 1rem; }
.gr-h { font-size: 0.74rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; margin: 1.1rem 0 0.5rem 0.2rem; }
.gr-moment { display: flex; gap: 0.6rem; background: var(--bg-card); border-left: 3px solid var(--g); border-radius: 10px; padding: 0.6rem 0.75rem; margin-bottom: 0.45rem; }
.gr-moment .grade-icon { background: var(--g); color: #fff; flex-shrink: 0; }
.gr-moment strong { font-size: 0.88rem; }
.gr-moment p { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.4; margin: 0.15rem 0 0; }
.gr-leak { display: flex; gap: 0.6rem; align-items: center; background: #111827; border: 1px solid #1f3354; border-radius: 12px; padding: 0.65rem 0.75rem; margin-bottom: 0.45rem; }
.gr-leak strong { font-size: 0.9rem; }
.gr-leak p { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.4; margin: 0.15rem 0 0; }
.gr-leak .btn { flex-shrink: 0; }
.gr-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
.gr-stats div { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 0.55rem 0.4rem; text-align: center; }
.gr-stats strong { display: block; font: 800 1.05rem var(--font-main); }
.gr-stats span { font-size: 0.66rem; color: var(--text-muted); display: block; }
.gr-stats em { display: block; font-style: normal; font-size: 0.6rem; margin-top: 0.2rem; color: var(--text-muted); }
.gr-stat.ok em { color: var(--good); }
.gr-stat.low em, .gr-stat.high em { color: #e58f2a; }
.gr-stat.low, .gr-stat.high { border-color: rgba(229,143,42,0.35); }
.gr-tips { margin: 0.55rem 0 0.2rem 1.1rem; padding: 0; font-size: 0.8rem; color: var(--text-secondary); line-height: 1.45; }
.gr-tips li { margin-bottom: 0.25rem; }
.gr-luck { font-size: 0.8rem; color: var(--text-secondary); background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 0.55rem 0.7rem; margin: 0.25rem 0 0.6rem; line-height: 1.4; }
.gr-luck strong { color: #fff; }
.gr-sub { font-size: 0.78rem; color: var(--text-muted); margin: -0.2rem 0 0.5rem; }
.gr-retry { align-items: center; }
.gr-retry > div { flex: 1; }
.gr-retry .btn { flex-shrink: 0; }

/* Retry puzzles */
.gr-puzzle-card { max-width: 400px; text-align: left; }
.gr-puzzle-card h2 { margin-bottom: 0.6rem; }
.pz-kicker { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--play); margin-bottom: 0.2rem; }
.pz-table { background: #0f1829; border: 1px solid #1e3152; border-radius: 12px; padding: 0.65rem 0.7rem; margin-bottom: 0.7rem; }
.pz-facts { font-size: 0.8rem; color: var(--text-secondary); margin-top: 0.2rem; line-height: 1.4; }
.pz-options { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.7rem; }
.pz-opt { flex: 1 1 30%; min-width: 88px; background: #232323; color: #fff; border: 1px solid #333; border-radius: 10px; padding: 0.6rem 0.4rem; font: 700 0.82rem var(--font-main); cursor: pointer; }
.pz-opt:disabled { cursor: default; opacity: 0.55; }
.pz-opt.picked { opacity: 1; border-color: #aaa; }
.pz-opt.best { opacity: 1; border-color: var(--play); box-shadow: inset 0 0 0 1px var(--play); }
.pz-result { background: var(--bg-card); border-radius: 12px; padding: 0.65rem 0.7rem; margin-bottom: 0.7rem; }
.pz-result p { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.45; margin: 0.35rem 0 0; }
.pz-nav { display: flex; gap: 0.5rem; justify-content: flex-end; }
.gr-note { font-size: 0.74rem; color: var(--text-muted); line-height: 1.45; margin: 1rem 0.2rem 0.5rem; }

/* How the bots see you */
.bot-read { margin: -0.4rem 0 1.1rem; }
.gr-read { margin-top: 0.7rem; }
.read-row { display: flex; align-items: center; gap: 0.7rem; width: 100%; text-align: left; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 0.65rem 0.8rem; color: var(--text-primary); font-family: var(--font-main); cursor: pointer; transition: border-color 0.2s, transform 0.1s; }
.read-row:active { transform: scale(0.99); border-color: #333; }
.read-eye { font-size: 1.25rem; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; background: #1a1a1a; border-radius: 50%; flex-shrink: 0; }
.read-row-text { flex: 1; min-width: 0; }
.read-row-text strong { display: block; font-size: 0.9rem; }
.read-row-text small { display: block; font-size: 0.76rem; color: var(--text-secondary); margin-top: 0.1rem; }
.read-row-arrow { color: var(--text-muted); font-size: 1.3rem; }
.read-card { max-width: 400px; text-align: left; }
.read-card h2 { margin-bottom: 0.7rem; }
.read-type { background: #101a2b; border: 1px solid #1c3050; border-radius: 12px; padding: 0.7rem 0.8rem; margin-bottom: 0.7rem; }
.read-type strong { display: block; font-size: 1.05rem; color: var(--play); margin-bottom: 0.2rem; }
.read-type p, .overlay-content .read-type p { font-size: 0.84rem; color: var(--text-secondary); line-height: 1.45; margin: 0; }
.read-h { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; margin: 0.9rem 0 0.35rem; }
.read-list { margin: 0 0 0.2rem 1.1rem; padding: 0; font-size: 0.84rem; color: var(--text-primary); line-height: 1.45; }
.read-list li { margin-bottom: 0.25rem; }
.read-empty, .overlay-content .read-empty { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.45; }
.read-note, .overlay-content .read-note { font-size: 0.74rem; color: var(--text-muted); line-height: 1.45; margin: 0.9rem 0 0.8rem; }
.read-forget.confirm { background: var(--accent-red); color: #fff; }

/* Puzzle extras: the hand so far and what happens next */
.gr-puzzle-card .rv-label { width: auto; min-width: 52px; margin-right: 4px; }
.pz-story { list-style: none; margin: 0.35rem 0 0.2rem; padding: 0; font-size: 0.78rem; color: var(--text-secondary); line-height: 1.4; }
.pz-story li { margin-bottom: 0.15rem; }
.pz-story b { color: var(--text-primary); font-weight: 700; margin-right: 0.25rem; }
.pz-result .pz-best { color: var(--text-primary); }
.pz-result .pz-mix, .pz-result .pz-orig { font-size: 0.76rem; color: var(--text-muted); }
.pz-result .pz-when { font-size: 0.78rem; font-weight: 700; color: var(--play); }
.pz-result .pz-when.mastered { color: var(--accent-gold); }
.pz-result .rg { margin-top: 0.5rem; }
.btn-solved { background: #1c2a14; color: var(--good); border: 1px solid #2f4a22; }

/* My Mistakes */
.mk-icon { position: relative; font-size: 1.6rem; }
.mk-badge { position: absolute; top: -4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent-red); color: #fff; font: 800 0.62rem/18px var(--font-main); text-align: center; }
.mk-hero { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 1.1rem 1rem; text-align: center; margin-bottom: 0.8rem; }
.mk-hero h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }
.mk-hero p { font-size: 0.86rem; color: var(--text-secondary); line-height: 1.45; margin: 0 0 0.9rem; }
.mk-emoji { font-size: 2.2rem; margin-bottom: 0.4rem; }
.mk-count { margin-bottom: 0.9rem; }
.mk-count strong { display: block; font: 900 2.6rem var(--font-main); line-height: 1; color: var(--play); }
.mk-count span { display: block; font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 0.3rem; }
.mk-count.done { margin-bottom: 0.4rem; }
.mk-boxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
.mk-boxes div { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 0.6rem 0.4rem; text-align: center; }
.mk-boxes strong { display: block; font: 800 1.2rem var(--font-main); }
.mk-boxes span { font-size: 0.68rem; color: var(--text-muted); }
.mk-how { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5; margin: 0 0.2rem; }

@media (max-height: 700px) {
    .ct-hero-cards { height: 74px; }
    .ct-hero-card { width: 52px; height: 73px; }
    .ct-avatar { width: 38px; height: 38px; font-size: 20px; }
    .ct-btn { min-height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
    .deal, .ct-board-card, .ct-result, .grade-pill, .ct-bet.show, .ct-bubble, .ct-raise-sheet, .ct-coach, .ct-explain, .ct-mini-card.face { animation: none !important; }
    .flip, .ct-fly, .ct-dealer-btn { transition: none !important; }
    .ct-seat.thinking .ct-avatar::after { animation: none; }
}

/* ==========================================================
   LESSONS
   ========================================================== */
#learn-screen, #lesson-screen { background: var(--bg-dark); }
.ls-hub-top { display: flex; align-items: center; gap: 1rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; padding: 0.9rem 1rem; }
.ls-hub-top strong { display: block; font-size: 1rem; }
.ls-hub-top small { color: var(--text-muted); font-size: 0.8rem; }
.gr-ring.small { width: 64px; height: 64px; }
.gr-ring.small span { font-size: 0.95rem; }
.ls-lesson-card {
    display: flex; align-items: center; gap: 0.8rem; width: 100%; text-align: left; margin-bottom: 0.5rem;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 0.8rem 0.9rem;
    color: var(--text-primary); font-family: var(--font-main); cursor: pointer; transition: transform 0.1s ease;
}
.ls-lesson-card:active { transform: scale(0.98); }
.ls-lesson-card.done { border-color: #1f3354; }
.ls-lesson-icon { width: 42px; height: 42px; border-radius: 12px; background: #1b1b1b; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; flex-shrink: 0; }
.ls-lesson-info { flex: 1; min-width: 0; }
.ls-lesson-info strong { display: block; font-size: 0.95rem; }
.ls-lesson-info small { display: block; font-size: 0.78rem; color: var(--text-secondary); margin-top: 0.1rem; }
.ls-lesson-meta small { color: var(--text-muted); font-size: 0.72rem; }
.ls-mini-stars i { font-style: normal; color: #333; font-size: 0.9rem; }
.ls-mini-stars i.on { color: #f5c518; }

.ls-top { display: flex; align-items: center; gap: 0.75rem; padding: calc(0.6rem + var(--safe-top)) 1rem 0.6rem; }
.ls-close { font-size: 1.1rem; width: 32px; }
.ls-progress { flex: 1; height: 10px; background: #1f1f1f; border-radius: 6px; overflow: hidden; }
.ls-progress div { height: 100%; width: 0; background: linear-gradient(90deg, var(--play), #8dbdff); border-radius: 6px; transition: width 0.4s ease; }
.ls-lesson-title { display: none; }
.ls-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0.5rem 1.1rem 1rem; }
.ls-step { animation: resultIn 0.3s ease both; max-width: 520px; margin: 0 auto; }
.ls-title { font-size: 1.45rem; font-weight: 800; line-height: 1.2; margin: 0.4rem 0 0.6rem; }
.ls-prompt { font-size: 1.2rem; font-weight: 800; line-height: 1.3; margin: 0.4rem 0 1rem; }
.ls-text { font-size: 1rem; line-height: 1.55; color: var(--text-secondary); margin-bottom: 1.1rem; }
.ls-hint { font-size: 0.8rem; color: var(--text-muted); text-align: center; margin-top: 0.5rem; }
.ls-guide { display: inline-flex; align-items: center; gap: 0.5rem; background: #151515; border: 1px solid #262626; border-radius: 30px; padding: 0.2rem 0.8rem 0.2rem 0.2rem; font-size: 0.78rem; color: var(--text-secondary); margin-top: 0.3rem; }
.ls-guide .bot-avatar { width: 30px; height: 30px; font-size: 17px; }

.ls-cards { display: flex; gap: 4px; justify-content: center; }
.ls-card { width: 58px; height: 81px; border-radius: 6px; box-shadow: 0 3px 10px rgba(0,0,0,0.45); transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.ls-cards.sm .ls-card { width: 44px; height: 62px; border-radius: 5px; }
.ls-cards.xs .ls-card { width: 30px; height: 42px; border-radius: 3px; }
.ls-cards.lg .ls-card { width: 74px; height: 104px; border-radius: 8px; }
.ls-card.hl { box-shadow: 0 0 0 2px #f5c518, 0 0 14px rgba(245,197,24,0.55); transform: translateY(-3px); }
.ls-card.dim { opacity: 0.35; }

/* Ladder */
.ls-ladder { display: flex; flex-direction: column; gap: 0.4rem; }
.ls-rung { display: none; align-items: center; gap: 0.7rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 0.5rem 0.7rem; }
.ls-rung.shown { display: flex; animation: resultIn 0.3s ease both; }
.ls-rung-n { font: 900 1rem var(--font-main); color: var(--text-muted); width: 20px; text-align: center; }
.ls-rung-body { flex: 1; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.ls-rung-body strong { font-size: 0.9rem; }

/* Options & choices */
.ls-options { display: flex; flex-direction: column; gap: 0.6rem; }
.ls-options.row { flex-direction: row; justify-content: center; }
.ls-option, .ls-player {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
    background: var(--bg-card); border: 2px solid var(--border); border-radius: 16px; padding: 0.75rem 0.6rem 0.55rem;
    cursor: pointer; color: var(--text-primary); font-family: var(--font-main); transition: border-color 0.2s ease, transform 0.1s ease, background 0.2s ease;
}
.ls-option:active, .ls-player:active, .ls-choice:active { transform: scale(0.97); }
.ls-option-name, .ls-player-hand { font-size: 0.78rem; color: var(--text-secondary); min-height: 1em; }
.ls-option.right, .ls-player.right, .ls-choice.right, .ls-split.right { border-color: var(--good); background: rgba(var(--good-rgb),0.1); }
.ls-option.wrong, .ls-player.wrong, .ls-choice.wrong { border-color: var(--grade-blunder); background: rgba(202,52,49,0.1); animation: nutsShake 0.4s ease; }
.ls-option.picked { border-color: #3d6fb5; }
.ls-order { position: absolute; left: 10px; top: 10px; width: 22px; height: 22px; border-radius: 50%; background: #3d6fb5; color: #fff; font: 800 0.75rem var(--font-main); display: none; align-items: center; justify-content: center; }
.ls-option.picked .ls-order { display: flex; }
.ls-players { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 0.8rem; }
.ls-player { flex-direction: row; justify-content: flex-start; padding: 0.55rem 0.7rem; }
.ls-player .bot-avatar { width: 36px; height: 36px; font-size: 20px; }
.ls-player-name { font-weight: 700; font-size: 0.9rem; width: 56px; text-align: left; }
.ls-player .ls-cards { margin-left: auto; }
.ls-player-hand { position: absolute; left: 58px; bottom: 6px; font-size: 0.68rem; }
.ls-split { width: 100%; margin-top: 0.55rem; background: transparent; border: 2px dashed #333; border-radius: 14px; color: var(--text-secondary); font: 700 0.9rem var(--font-main); padding: 0.65rem; cursor: pointer; }
.ls-board-mini { display: flex; justify-content: center; padding: 0.7rem; background: radial-gradient(ellipse at center, var(--felt-1), var(--felt-3)); border-radius: 16px; margin-bottom: 0.8rem; }
.ls-choices { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 0.8rem; }
.ls-choices.two { flex-direction: row; }
.ls-choice {
    flex: 1; background: var(--bg-card); border: 2px solid var(--border); border-radius: 14px; padding: 0.9rem 1rem;
    color: var(--text-primary); font: 700 0.98rem var(--font-main); cursor: pointer; text-align: left;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.1s ease;
}
.ls-choices.two .ls-choice { text-align: center; font-family: var(--font-action); text-transform: uppercase; letter-spacing: 0.5px; }
.ls-choice.fold { background: #1f1f20; }
.ls-choice.raise { background: #1b2a14; border-color: #233f6b; }

/* Table diagram */
.ls-table { position: relative; width: 100%; max-width: 340px; aspect-ratio: 1.25; margin: 0.4rem auto 0.8rem; }
.ls-felt { position: absolute; inset: 14% 12%; border-radius: 50%; background: radial-gradient(ellipse at center, var(--felt-1), var(--felt-3)); box-shadow: 0 0 0 7px #191512, 0 10px 30px rgba(0,0,0,0.5); }
.ls-seat { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: none; cursor: default; color: #fff; font-family: var(--font-main); }
.ls-table.pickable .ls-seat { cursor: pointer; }
.ls-seat-dot { width: 40px; height: 40px; border-radius: 50%; background: #2a2a2c; border: 2px solid #3a3a3c; transition: all 0.2s ease; }
.ls-table.pickable .ls-seat:active .ls-seat-dot { transform: scale(0.92); }
.ls-seat.hl .ls-seat-dot { background: #3d6fb5; border-color: #6c9be0; }
.ls-seat.right .ls-seat-dot { background: var(--good); border-color: #9be3bd; }
.ls-seat.wrong .ls-seat-dot { background: var(--grade-blunder); border-color: #ff8c8a; }
.ls-seat-label { font: 800 0.7rem var(--font-main); min-height: 0.9em; letter-spacing: 0.04em; }
.ls-btn-chip { position: absolute; top: -6px; right: -8px; width: 20px; height: 20px; border-radius: 50%; background: #f4f1ea; color: #111; font: 900 0.62rem var(--font-main); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0,0,0,0.5); }

/* Other visuals */
.ls-versus { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 0.8rem; }
.ls-vs-side { text-align: center; }
.ls-vs-side.win .ls-card { box-shadow: 0 0 0 2px var(--good), 0 3px 10px rgba(0,0,0,0.45); }
.ls-vs-label { font-size: 0.74rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.35rem; text-align: center; }
.ls-vs-beats { font: 800 0.72rem var(--font-main); color: var(--good); text-transform: uppercase; letter-spacing: 0.1em; }
.ls-hole { display: flex; justify-content: center; gap: 10px; margin: 0.5rem 0 1rem; }
.ls-flip { width: 84px; height: 118px; perspective: 700px; animation: holeFlip 0.01s linear both; }
.ls-flip .flip img { border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,0.5); }
.ls-flip .flip { animation: flipOver 0.6s cubic-bezier(.2,.7,.2,1) both; animation-delay: inherit; }
@keyframes flipOver { from { transform: rotateY(0deg); } to { transform: rotateY(180deg); } }
@keyframes holeFlip { from { opacity: 1; } to { opacity: 1; } }
.ls-actions { display: flex; gap: 0.5rem; }
.ls-act { flex: 1; border-radius: 14px; padding: 0.75rem 0.5rem; text-align: center; }
.ls-act strong { display: block; font: 800 0.95rem var(--font-action); text-transform: uppercase; }
.ls-act span { font-size: 0.74rem; opacity: 0.8; }
.ls-act.fold { background: #2a2a2c; } .ls-act.call { background: #3d6fb5; } .ls-act.raise { background: var(--play); }
.ls-board { display: flex; justify-content: center; gap: 5px; padding: 0.9rem 0.6rem; background: radial-gradient(ellipse at center, var(--felt-1), var(--felt-3)); border-radius: 18px; }
.ls-board-slot { display: flex; flex-direction: column; align-items: center; gap: 4px; animation: boardIn 0.35s ease both; }
.ls-board-slot .ls-card { width: 50px; height: 70px; }
.ls-board-slot small { font-size: 0.64rem; color: rgba(255,255,255,0.75); font-weight: 700; min-height: 1em; white-space: nowrap; }
.ls-best5 { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 0.8rem; }
.ls-b5-row { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; }
.ls-b5-row > span { width: 44px; font-size: 0.7rem; color: var(--text-muted); font-weight: 700; text-transform: uppercase; }
.ls-b5-name { text-align: center; font-weight: 800; color: #f5c518; margin-top: 0.2rem; }
.ls-grid-wrap { display: flex; flex-direction: column; align-items: center; }
.ls-grid { display: grid; grid-template-columns: repeat(13, 1fr); gap: 1px; width: 100%; max-width: 360px; }
.ls-cell { aspect-ratio: 1; font-size: 7.5px; font-weight: 700; color: #777; background: #1b1b1b; display: flex; align-items: center; justify-content: center; border-radius: 2px; }
.ls-cell.on { background: #3e6e28; color: #e8f5dc; }
.ls-cell.me { outline: 2px solid #f5c518; z-index: 1; color: #fff; }
.ls-grid-key { display: flex; gap: 0.4rem; align-items: center; font-size: 0.75rem; color: var(--text-muted); margin-top: 0.5rem; }
.ls-grid-key span { width: 12px; height: 12px; border-radius: 3px; background: #1b1b1b; display: inline-block; margin-left: 0.6rem; }
.ls-grid-key span.on { background: #3e6e28; margin-left: 0; }
.ls-grid-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.ls-grid-compare .ls-cell { font-size: 0; }
.ls-types { display: flex; justify-content: space-around; gap: 0.5rem; }
.ls-type { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; font-size: 0.8rem; font-weight: 700; color: var(--text-secondary); }
.ls-bars { display: flex; flex-direction: column; gap: 0.6rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 0.9rem; }
.ls-bar-label { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 0.25rem; }
.ls-bar-label strong { color: #fff; }
.ls-bar { height: 10px; border-radius: 6px; background: #262626; overflow: hidden; flex: 1; }
.ls-bar div { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--play), #8dbdff); animation: barGrow 0.7s cubic-bezier(.2,.7,.2,1) both; transform-origin: left; }
@keyframes barGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ls-odds { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 0.9rem; display: flex; flex-direction: column; gap: 0.7rem; }
.ls-odds-row { display: flex; align-items: center; gap: 0.7rem; font-size: 0.82rem; color: var(--text-secondary); }
.ls-odds-row > span { width: 88px; }
.ls-odds-row strong { width: 40px; text-align: right; color: #fff; }
.ls-bar.price div { background: linear-gradient(90deg, #e58f2a, #f7c631); }
.ls-odds-verdict { text-align: center; font-weight: 800; font-size: 0.9rem; padding: 0.4rem; border-radius: 10px; }
.ls-odds-verdict.good { background: rgba(var(--good-rgb),0.14); color: var(--good); }
.ls-odds-verdict.bad { background: rgba(229,143,42,0.14); color: #f0a64a; }
.ls-pot { display: flex; justify-content: center; align-items: center; gap: 1.5rem; padding: 1.1rem; background: radial-gradient(ellipse at center, var(--felt-1), var(--felt-3)); border-radius: 18px; }
.ls-pot-stack, .ls-pot-bet { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; font: 800 0.95rem var(--font-main); }
.ls-pot-stack img, .ls-pot-bet img { width: 34px; height: 34px; }
.ls-pot-stack img + img { margin-top: -26px; }
.ls-reveal { margin-top: 0.9rem; }
.ls-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.ls-two-col { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 0.9rem 0.7rem; text-align: center; display: flex; flex-direction: column; gap: 0.2rem; }
.ls-two-icon { font-size: 1.8rem; }
.ls-two-col span { font-size: 0.8rem; color: var(--text-secondary); }
.ls-bots { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 0.6rem; }
.ls-bot { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; text-align: center; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 0.8rem 0.4rem; }
.ls-bot strong { font-size: 0.85rem; }
.ls-bot span { font-size: 0.72rem; color: var(--text-secondary); }
.ls-chart-spot { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1rem; background: radial-gradient(ellipse at center, var(--felt-1), var(--felt-3)); border-radius: 18px; }
.ls-pos { background: #111; color: #fff; font: 800 0.8rem var(--font-main); padding: 0.25rem 0.7rem; border-radius: 10px; letter-spacing: 0.06em; }
.ls-hand-label { font: 800 1rem var(--font-main); }
.ls-fo-top { display: flex; justify-content: center; gap: 1rem; margin-bottom: 0.7rem; }
.ls-fo-top small { display: block; text-align: center; font-size: 0.66rem; color: var(--text-muted); font-weight: 700; text-transform: uppercase; margin-bottom: 0.2rem; }
.ls-deck { display: flex; flex-direction: column; gap: 3px; }
.ls-deck-row { display: grid; grid-template-columns: repeat(13, 1fr); gap: 2px; }
.ls-deck-card { padding: 0; border: 2px solid transparent; border-radius: 4px; background: none; cursor: pointer; transition: transform 0.1s ease, border-color 0.15s ease; }
.ls-deck-card img { width: 100%; display: block; border-radius: 3px; }
.ls-deck-card.seen { opacity: 0.18; cursor: default; }
.ls-deck-card.sel { border-color: #3d6fb5; transform: translateY(-2px); }
.ls-deck-card.right { border-color: var(--good); }
.ls-deck-card.missed { border-color: var(--good); border-style: dashed; opacity: 0.8; }
.ls-deck-card.wrong { border-color: var(--grade-blunder); }
.ls-fo-count { text-align: center; font-size: 0.8rem; color: var(--text-muted); margin-top: 0.5rem; }

/* Bottom area: feedback + main button */
.ls-bottom { padding: 0.5rem 1rem calc(0.9rem + var(--safe-bottom)); display: flex; flex-direction: column; gap: 0.5rem; max-width: 560px; width: 100%; margin: 0 auto; }
.ls-feedback { border-radius: 14px; padding: 0.75rem 0.9rem; animation: sheetUp 0.25s cubic-bezier(.2,.8,.2,1) both; }
.ls-feedback.hidden { display: none; }
.ls-feedback.good { background: #16240f; border: 1px solid #2f4a22; }
.ls-feedback.bad { background: #2a1414; border: 1px solid #4d2323; }
.ls-feedback strong { display: block; font-size: 1rem; margin-bottom: 0.2rem; }
.ls-feedback.good strong { color: var(--good); }
.ls-feedback.bad strong { color: #f07a77; }
.ls-feedback p { font-size: 0.86rem; line-height: 1.45; color: var(--text-secondary); margin: 0; }
#ls-main.hidden { display: none; }

/* Completion */
.ls-done { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 12vh; }
.ls-done-icon { font-size: 3.4rem; animation: gradeIn 0.5s cubic-bezier(.3,1.5,.5,1) both; }
.ls-done h2 { font-size: 1.6rem; margin: 0.6rem 0; }
.ls-stars { display: flex; gap: 0.4rem; font-size: 2.6rem; }
.ls-stars span { color: #2a2a2a; }
.ls-stars span.on { color: #f5c518; animation: gradeIn 0.45s cubic-bezier(.3,1.6,.5,1) both; }
.ls-done-sub { color: var(--text-secondary); margin: 0.6rem 0 1rem; }
.ls-xp { font: 900 1.2rem var(--font-main); color: var(--good); background: rgba(var(--good-rgb),0.12); padding: 0.4rem 1rem; border-radius: 20px; }

@media (prefers-reduced-motion: reduce) {
    .ls-step, .ls-rung.shown, .ls-board-slot, .ls-bar div, .ls-feedback, .ls-done-icon, .ls-stars span.on, .ls-flip .flip { animation-duration: 0.01s !important; animation-delay: 0s !important; }
}
.ls-up-next { margin-top: 1.4rem; color: var(--text-secondary); font-size: 0.9rem; }
.ls-up-next strong { color: var(--text-primary); }

/* ==========================================================
   HOME: TODAY CARD · PROFILE PROGRESS
   ========================================================== */
.today-card {
    display: flex; align-items: center; gap: 0.9rem; max-width: 540px; margin: 0 auto 1.4rem;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; padding: 0.85rem 0.9rem;
}
.today-card:empty { display: none; }
.today-ring {
    --p: 0; width: 58px; height: 58px; border-radius: 50%; flex-shrink: 0; position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: radial-gradient(closest-side, #0d0d0d 80%, transparent 81% 100%), conic-gradient(#ff9d2e calc(var(--p) * 1%), #262626 0);
}
.today-flame { font-size: 1.1rem; line-height: 1; filter: grayscale(1) opacity(0.5); }
.today-ring.lit .today-flame { filter: none; }
.today-ring strong { font: 900 0.85rem var(--font-main); }
.today-info { flex: 1; min-width: 0; }
.today-info strong { display: block; font-size: 0.95rem; }
.today-info small { display: block; font-size: 0.76rem; color: var(--text-secondary); margin: 0.1rem 0 0.35rem; }
.today-xp { height: 6px; border-radius: 4px; background: #262626; overflow: hidden; }
.today-xp div { height: 100%; background: linear-gradient(90deg, var(--play), #8dbdff); border-radius: 4px; }
.today-cta {
    display: flex; flex-direction: column; align-items: center; gap: 0.05rem; flex-shrink: 0; max-width: 110px;
    background: var(--play); color: #fff; border: none; border-radius: 12px; padding: 0.5rem 0.75rem;
    box-shadow: 0 3px 0 var(--play-dark); cursor: pointer; font-family: var(--font-main);
}
.today-cta:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--play-dark); }
.today-cta span { font-weight: 800; font-size: 0.86rem; }
.today-cta small { font-size: 0.64rem; opacity: 0.9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 96px; }
.cb-design-hint { font-size: 0.62rem; color: var(--text-muted); text-align: center; }

.profile-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; margin-bottom: 0.75rem; }
.profile-tiles div { background: var(--bg-input); border: 1px solid var(--border); border-radius: 12px; padding: 0.55rem 0.3rem; }
.profile-tiles strong { display: block; font-size: 1.05rem; }
.profile-tiles span { font-size: 0.64rem; color: var(--text-muted); }
.profile-h { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; margin: 0.9rem 0 0.4rem; text-align: left; }
.profile-leak { display: flex; justify-content: space-between; align-items: center; width: 100%; background: #111827; border: 1px solid #1f3354; border-radius: 10px; padding: 0.55rem 0.7rem; margin-bottom: 0.35rem; color: var(--text-primary); font: 600 0.85rem var(--font-main); cursor: pointer; }
.profile-leak small { color: var(--play); font-weight: 700; }
.profile-badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.35rem; }
.badge { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0.45rem 0.2rem; border-radius: 10px; background: var(--bg-input); border: 1px solid var(--border); opacity: 0.35; filter: grayscale(1); }
.badge.earned { opacity: 1; filter: none; border-color: #3a3a2a; }
.badge span { font-size: 1.2rem; }
.badge small { font-size: 0.56rem; color: var(--text-secondary); line-height: 1.1; text-align: center; }

/* ==========================================================
   GAME TABLE (all modes): no felt, just players, cards and chips
   ========================================================== */
.game-surface, #cpu-table-screen {
    background:
        radial-gradient(120% 60% at 50% 38%, rgba(61,139,253,0.10) 0%, rgba(61,139,253,0) 55%),
        radial-gradient(90% 50% at 50% 100%, #161a22 0%, #0c0e12 70%);
}
.tv { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; width: 100%; max-width: 620px; margin: 0 auto; }
.tv-stage { position: relative; flex: 1; min-height: 0; }
.tv-fly-layer { position: absolute; inset: 0; pointer-events: none; z-index: 20; }

/* Cards: big index, flat, white */
.pc {
    --w: 56px; width: var(--w); height: calc(var(--w) * 1.4); border-radius: calc(var(--w) * 0.14);
    background: #fbfbfd; color: #1a1d24; position: relative; overflow: hidden; flex-shrink: 0;
    box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 6px 16px rgba(0,0,0,0.45);
    font-family: var(--font-action); user-select: none;
}
.pc.red { color: #e5484d; }
.pc-r { position: absolute; left: 12%; top: 5%; font-size: calc(var(--w) * 0.44); font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.pc-s { position: absolute; left: 13%; top: 38%; font-size: calc(var(--w) * 0.3); line-height: 1; }
.pc-big { position: absolute; right: 7%; bottom: 3%; font-size: calc(var(--w) * 0.62); line-height: 1; opacity: 0.95; }
.pc.back { background-color: #22324d; background-size: cover; background-position: center; border: 2px solid #fbfbfd; }
.pc.mini { --w: 30px; box-shadow: 0 3px 8px rgba(0,0,0,0.5); }
.pc.mini .pc-big, .pc.mini .pc-s { display: none; }
.pc.mini .pc-r { left: 0; right: 0; top: 7%; text-align: center; font-size: 15px; }
.pc.mini::after { content: attr(aria-label); display: none; }
.pc.mini.show, .pc.mini.peeked { --w: 34px; }
.pc.mini.show .pc-s, .pc.mini.peeked .pc-s { display: block; left: 0; right: 0; top: auto; bottom: 10%; text-align: center; font-size: 15px; }
.pc.mini.peeked { box-shadow: 0 0 0 2px #a970ff, 0 0 14px rgba(169,112,255,0.7); animation: tvReveal 0.4s ease both; }
.pc.mini.show { animation: tvReveal 0.35s ease both; }
.pc.mini.deal { animation: tvDealIn 0.3s cubic-bezier(.2,.8,.3,1) both; }
.pc.mucked { opacity: 0; transform: translateY(-8px) scale(0.9); transition: all 0.3s ease; animation: none !important; }
.pc.tossed { transition: all 0.28s ease; opacity: 0; transform: translate(10px, -26px) rotate(25deg); }
.pc.fresh { animation: tvFresh 0.5s ease both; }
.pc.ghost { --w: 100%; width: 100%; height: 100%; opacity: 0.55; box-shadow: 0 0 0 2px #4a90e2, 0 0 16px rgba(74,144,226,0.6); }

.pc-flip { perspective: 800px; flex-shrink: 0; }
.pc-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.45s cubic-bezier(.3,.7,.3,1); }
.pc-flip.up .pc-inner { transform: rotateY(180deg); }
.pc-face { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.pc-up { transform: rotateY(180deg); }
.pc-face .pc-r { font-size: calc(var(--fw, 56px) * 0.44); }
.pc-face .pc-s { font-size: calc(var(--fw, 56px) * 0.3); }
.pc-face .pc-big { font-size: calc(var(--fw, 56px) * 0.62); }
.pc-face { border-radius: calc(var(--fw, 56px) * 0.14); }

/* Board */
.tv-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 2; width: 100%; }
.tv-pot { min-height: 30px; display: flex; align-items: baseline; gap: 6px; padding: 4px 14px; border-radius: 999px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.07); opacity: 0; transition: opacity 0.25s ease; font-family: var(--font-main); }
.tv-pot.show { opacity: 1; }
.tv-pot span { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }
.tv-pot strong { font-size: 1.05rem; color: #fff; font-variant-numeric: tabular-nums; }
.tv-board { display: flex; gap: 6px; }
.tv-slot { --fw: min(15vw, 60px); width: var(--fw); height: calc(var(--fw) * 1.4); border-radius: calc(var(--fw) * 0.14); background: rgba(255,255,255,0.035); border: 1.5px dashed rgba(255,255,255,0.08); }
.tv-slot.filled { background: none; border: none; }
.tv-slot .pc-flip { width: 100%; height: 100%; animation: tvDealIn 0.3s cubic-bezier(.2,.8,.3,1) both; }
.tv-result { font: 700 0.9rem var(--font-main); color: #fff; background: rgba(20,24,32,0.92); border: 1px solid rgba(255,255,255,0.08); padding: 0.45rem 0.9rem; border-radius: 12px; animation: tvPop 0.3s ease both; max-width: 88%; text-align: center; }
.tv-result.hidden { display: none; }
.tv-result.win { background: rgba(var(--good-rgb),0.92); border-color: transparent; }
.tv-result.lose { background: rgba(40,44,54,0.95); }
.tv-result.perk { background: linear-gradient(135deg, #2b1f4d, #1a2340); border-color: rgba(169,112,255,0.4); }

/* Players */
.tv-pod { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; z-index: 3; width: 92px; }
.tv-pod.out { opacity: 0.25; }
.tv-avatar {
    position: relative; width: 54px; height: 54px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
    background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 70%, #fff) 0%, var(--c) 55%, color-mix(in srgb, var(--c) 70%, #000) 100%);
    box-shadow: 0 8px 20px rgba(0,0,0,0.45), 0 0 0 3px #11141a; display: grid; place-items: center; font-size: 27px;
    transition: transform 0.2s ease, filter 0.3s ease;
}
.tv-avatar span { filter: drop-shadow(0 2px 2px rgba(0,0,0,0.25)); }
.tv-ring { position: absolute; inset: -5px; width: calc(100% + 10px); height: calc(100% + 10px); transform: rotate(-90deg); pointer-events: none; }
.tv-ring circle { fill: none; stroke: var(--play); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 129; stroke-dashoffset: 129; opacity: 0; }
.tv-pod.thinking .tv-ring circle { opacity: 1; animation: tvRing 1.2s ease-in-out infinite; }
.tv-pod.thinking .tv-avatar { transform: scale(1.05); }
.tv-pod.timed .tv-ring circle { opacity: 1; animation: none; stroke-dashoffset: calc((1 - var(--t, 1)) * 129px); transition: stroke-dashoffset 0.5s linear, stroke 0.3s; }
.tv-pod.timed.urgent .tv-ring circle { stroke: #ff5c5c; }
.tv-hero-timer { height: 3px; width: 56%; max-width: 220px; margin: 6px auto 0; border-radius: 3px; background: rgba(255,255,255,0.08); overflow: hidden; opacity: 0; transition: opacity 0.2s; }
.tv-hero.timed .tv-hero-timer { opacity: 1; }
.tv-hero-timer i { display: block; height: 100%; width: calc(var(--t, 1) * 100%); background: var(--play); transition: width 0.5s linear; }
.tv-hero.timed.urgent .tv-hero-timer i { background: #ff5c5c; }
.tv-pod.folded .tv-avatar, .tv-pod.folded .tv-plate { filter: grayscale(0.8) brightness(0.55); }
.tv-pod.winner .tv-avatar { box-shadow: 0 0 0 3px var(--play), 0 0 26px rgba(var(--play-rgb),0.8); animation: tvWin 0.8s ease; }
.tv-pod.targetable .tv-avatar { box-shadow: 0 0 0 3px #a970ff, 0 0 22px rgba(169,112,255,0.8); animation: tvPulse 1s ease-in-out infinite; }
.tv-plate { margin-top: 6px; display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.tv-name { font: 700 0.72rem var(--font-main); color: var(--text-primary); max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-stack { font: 800 0.74rem var(--font-main); color: #fff; font-variant-numeric: tabular-nums; background: rgba(255,255,255,0.07); padding: 1px 8px; border-radius: 999px; margin-top: 2px; }
.tv-cards { position: absolute; top: -12px; right: -2px; display: flex; z-index: -1; }
.tv-cards .pc + .pc { margin-left: -16px; }
.tv-cards .pc:nth-child(1) { transform: rotate(-8deg); }
.tv-cards .pc:nth-child(2) { transform: rotate(4deg); }
.tv-cards .pc:nth-child(3) { transform: rotate(14deg); }
.tv-cards:has(.show), .tv-cards:has(.peeked) { top: auto; bottom: calc(100% - 6px); right: auto; z-index: 5; }
.tv-cards:has(.show) .pc, .tv-cards:has(.peeked) .pc { transform: none; margin-left: 2px; }
.tv-pod.left .tv-cards { right: auto; left: -2px; }
.tv-badges { position: absolute; top: -6px; left: -4px; display: flex; gap: 2px; font-size: 13px; z-index: 6; }
.tv-badges span { background: #1a1f2a; border-radius: 50%; width: 22px; height: 22px; display: grid; place-items: center; box-shadow: 0 0 0 1.5px rgba(169,112,255,0.7); animation: tvPop 0.3s ease both; }
.tv-tag { position: absolute; top: 100%; margin-top: 4px; font: 800 0.66rem var(--font-main); letter-spacing: 0.04em; text-transform: uppercase; color: #fff; background: #2a3140; padding: 2px 8px; border-radius: 999px; white-space: nowrap; opacity: 0; transform: translateY(-4px); transition: opacity 0.2s ease, transform 0.2s ease; }
.tv-tag.show { opacity: 1; transform: none; }
.tv-tag.hot { background: var(--play); }
.tv-tag.muted { background: rgba(255,255,255,0.07); color: var(--text-muted); text-transform: none; letter-spacing: 0; font-size: 0.7rem; }
.tv-tag.show-hand { background: #f5c542; color: #1a1d24; text-transform: none; letter-spacing: 0; }
.tv-tag.perk { background: #3b2a66; color: #e7dcff; text-transform: none; letter-spacing: 0; }
.tv-bubble { position: absolute; bottom: calc(100% + 16px); background: #fff; color: #111; font: 600 0.74rem var(--font-main); padding: 0.35rem 0.6rem; border-radius: 12px; max-width: 150px; width: max-content; text-align: center; z-index: 30; animation: tvPop 0.25s ease both; box-shadow: 0 8px 20px rgba(0,0,0,0.4); }
.tv-bubble::after { content: ''; position: absolute; left: 50%; bottom: -5px; margin-left: -5px; border: 5px solid transparent; border-bottom: 0; border-top-color: #fff; }
.tv-bubble.hidden { display: none; }
/* Edge players: keep speech on screen */
.tv-pod.left .tv-bubble { left: 6px; }
.tv-pod.left .tv-bubble::after { left: 22px; }
.tv-pod.right .tv-bubble { right: 6px; }
.tv-pod.right .tv-bubble::after { left: auto; right: 22px; }
/* Top-row players: speech goes to the side, clear of their bet */
.tv-pod.top .tv-bubble { bottom: auto; top: 0; left: calc(50% + 36px); }
.tv-pod.top.right .tv-bubble { left: auto; right: calc(50% + 36px); }
.tv-pod.top .tv-bubble::after { left: -4px; bottom: auto; top: 14px; border: 5px solid transparent; border-left: 0; border-right-color: #fff; margin-left: 0; }
.tv-pod.top.right .tv-bubble::after { left: auto; right: -4px; border: 5px solid transparent; border-right: 0; border-left-color: #fff; }
/* Crowded tables (pass & play up to 10): smaller players and board */
.tv[data-n="8"] .tv-avatar, .tv[data-n="9"] .tv-avatar, .tv[data-n="10"] .tv-avatar { width: 44px; height: 44px; font-size: 21px; }
.tv[data-n="9"] .tv-slot, .tv[data-n="10"] .tv-slot { --fw: min(11vw, 48px); }
.tv[data-n="9"] .tv-pod, .tv[data-n="10"] .tv-pod { width: 78px; }
.tv-dealer { position: absolute; left: -8px; bottom: 26px; width: 20px; height: 20px; border-radius: 50%; background: #fff; color: #111; font: 900 0.62rem var(--font-main); display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,0.5); z-index: 7; }
.tv-dealer.hidden { display: none; }
.tv-bet { position: absolute; transform: translate(-50%, -50%) scale(0.8); display: flex; align-items: center; gap: 4px; font: 800 0.74rem var(--font-main); color: #fff; opacity: 0; transition: opacity 0.2s, transform 0.2s; z-index: 4; font-variant-numeric: tabular-nums; background: rgba(12,14,18,0.75); padding: 2px 8px 2px 3px; border-radius: 999px; }
.tv-bet.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.chip { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 3px dashed rgba(255,255,255,0.85); box-sizing: border-box; box-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.chip.red { background: #e5484d; } .chip.blue { background: #3d8bfd; } .chip.green { background: #2fb872; } .chip.black { background: #2a2d35; border-color: #f5c542; }
.tv-fly { position: absolute; transform: translate(-50%, -50%); display: flex; }
.tv-fly .chip { width: 18px; height: 18px; }
.tv-fly.pile .chip + .chip { margin-left: -10px; }
.tv-float { position: absolute; transform: translate(-50%, -50%); font: 900 1rem var(--font-main); color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.6); animation: tvFloat 1.5s ease both; white-space: nowrap; }
.tv-float.win { color: #7df0b1; }
.tv-float.perk { color: #e7dcff; font-size: 0.82rem; background: rgba(43,31,77,0.9); padding: 3px 10px; border-radius: 999px; text-shadow: none; }
.tv-float.long { font-size: 0.72rem; }

/* You */
.tv-hero { position: relative; display: flex; flex-direction: column; align-items: center; padding: 2px 0 6px; z-index: 5; }
.tv-hero-top { position: relative; height: 22px; display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; }
.tv-hero-top .tv-tag { position: static; margin: 0; }
.tv-hero-top .tv-badges { position: static; }
.tv-hero-cards { --fw: min(22vw, 84px); display: flex; justify-content: center; height: calc(var(--fw) * 1.4 + 8px); align-items: flex-end; }
.tv-hero-cards .pc-flip { width: var(--fw); height: calc(var(--fw) * 1.4); transition: transform 0.25s ease, opacity 0.3s ease; }
.tv-hero-cards .pc-flip + .pc-flip { margin-left: calc(var(--fw) * -0.18); }
.tv-hero-cards.n2 .pc-flip:nth-child(1) { transform: rotate(-5deg) translateY(2px); }
.tv-hero-cards.n2 .pc-flip:nth-child(2) { transform: rotate(5deg) translateY(2px); }
.tv-hero-cards.n3 .pc-flip:nth-child(1) { transform: rotate(-9deg) translateY(6px); }
.tv-hero-cards.n3 .pc-flip:nth-child(3) { transform: rotate(9deg) translateY(6px); }
.tv-hero-cards .pc-flip.deal { animation: tvHeroDeal 0.4s cubic-bezier(.2,.8,.3,1) both; }
.tv-hero-cards .pc-flip.mucked { transform: translateY(14px) !important; animation: none !important; }
.tv-hero-cards .pc-flip.mucked .pc-up { filter: grayscale(1) brightness(0.4); transition: filter 0.3s ease; }
.tv-hero-cards .pc-flip.fresh .pc-inner { animation: tvFresh 0.6s ease both; }
/* A face-up card that's just changed (Swap, Wild Draw): it turns in and stays face up */
.tv-hero-cards .pc-flip.up.fresh .pc-inner { animation: tvFreshUp 0.6s ease both; }
.tv-hero-cards.choosing .pc-flip { cursor: pointer; animation: tvWiggle 1.6s ease-in-out infinite; }
.tv-hero-cards.choosing .pc-flip:hover, .tv-hero-cards.choosing .pc-flip:active { transform: translateY(-12px) !important; }
.tv-hero-cards .pc-flip.discarding { transform: translateY(-80px) rotate(20deg) !important; opacity: 0; transition: all 0.32s ease; }
.tv-hero-cards.fogged .pc-inner { filter: blur(7px) grayscale(0.6); transition: filter 0.6s ease; }
.tv-hero-cards.fogged { position: relative; }
.tv-hero-cards.fogged::after { content: '☁️ Clouded'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 800 0.8rem var(--font-main); color: #fff; background: rgba(40,48,66,0.85); padding: 4px 12px; border-radius: 999px; animation: tvPop 0.3s ease both; }
.tv-hero-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; font: 700 0.8rem var(--font-main); min-height: 24px; }
.tv-hero-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--c); display: grid; place-items: center; font-size: 14px; }
.tv-hero-hand { color: var(--text-secondary); }
.tv-hero-hand:empty { display: none; }
.tv-stack.hero { font-size: 0.82rem; }
.tv-dealer.hero { position: static; }
.tv-hero.to-act .tv-hero-cards .pc-flip.up .pc-up { box-shadow: 0 0 0 2px var(--play), 0 8px 22px rgba(var(--play-rgb),0.35); }
.tv-hero.winner .tv-hero-cards .pc-up { box-shadow: 0 0 0 3px var(--good), 0 0 26px rgba(var(--good-rgb),0.6); }
.tv-bubble.hero { bottom: auto; top: -34px; }

/* Party Poker perks */
.perk-card { --pc: #a970ff; position: relative; width: 120px; height: 168px; border-radius: 16px; padding: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
    background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--pc) 55%, #fff) 0%, var(--pc) 45%, color-mix(in srgb, var(--pc) 55%, #000) 100%);
    color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,0.85) inset, 0 18px 40px rgba(0,0,0,0.55), 0 0 40px color-mix(in srgb, var(--pc) 60%, transparent); }
.perk-card .perk-icon { font-size: 44px; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.35)); }
.perk-card strong { font: 900 0.95rem var(--font-main); line-height: 1.1; }
.perk-card small { font: 800 0.6rem var(--font-main); text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.85; }
.perk-card.small { width: 64px; height: 88px; border-radius: 10px; padding: 6px; gap: 2px; }
.perk-card.small .perk-icon { font-size: 24px; }
.perk-card.small strong { font-size: 0.56rem; }
.perk-card.small small { display: none; }
.perk-stage { position: absolute; left: var(--fx); top: var(--fy); transform: translate(-50%, -50%) scale(0.2); opacity: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; z-index: 40; transition: all 0.5s cubic-bezier(.2,.9,.3,1.2); pointer-events: none; }
.perk-stage.in { left: 50%; top: 46%; transform: translate(-50%, -50%) scale(1) rotateY(0); opacity: 1; }
.perk-stage.in .perk-card { animation: perkShine 1.2s ease both; }
.perk-stage.out { left: var(--tx); top: var(--ty); transform: translate(-50%, -50%) scale(0.15); opacity: 0; transition: all 0.42s cubic-bezier(.5,0,.8,.6); }
.perk-stage.blocked .perk-card { filter: grayscale(1) brightness(0.6); animation: perkShake 0.4s ease; }
.perk-stage.reflected .perk-card { animation: perkFlip 0.6s ease; }
.perk-caption { font: 700 0.86rem var(--font-main); color: #fff; background: rgba(12,14,20,0.9); padding: 6px 12px; border-radius: 999px; white-space: nowrap; box-shadow: 0 8px 20px rgba(0,0,0,0.4); }
.perk-caption b { color: #e7dcff; }
.perk-burst { position: absolute; width: 20px; height: 20px; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 3px var(--pc); animation: perkBurst 0.85s ease-out both; }

/* Your perk, above the action buttons */
.perk-dock { display: flex; align-items: center; gap: 10px; padding: 6px 12px; margin: 0 12px 4px; border-radius: 14px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); cursor: pointer; font-family: var(--font-main); color: var(--text-primary); text-align: left; width: calc(100% - 24px); max-width: 596px; align-self: center; }
.perk-dock.hidden { display: none; }
.perk-dock .perk-dock-icon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 22px; background: var(--pc); box-shadow: 0 0 16px color-mix(in srgb, var(--pc) 60%, transparent); }
.perk-dock strong { display: block; font-size: 0.86rem; }
.perk-dock small { display: block; font-size: 0.72rem; color: var(--text-muted); }
.perk-dock .perk-dock-go { margin-left: auto; font: 800 0.74rem var(--font-main); color: #fff; background: #6b4bd6; padding: 6px 12px; border-radius: 999px; }
.perk-dock.ready { border-color: rgba(169,112,255,0.55); box-shadow: 0 0 20px rgba(169,112,255,0.25); animation: tvPulseSoft 2s ease-in-out infinite; }
.perk-dock.used { opacity: 0.5; }
.perk-dock.used .perk-dock-go, .perk-dock.waiting .perk-dock-go { background: rgba(255,255,255,0.08); color: var(--text-muted); }
.perk-sheet { text-align: center; }
.perk-sheet .perk-card { margin: 0 auto 14px; }
.perk-sheet p { color: var(--text-secondary); }
.perk-sheet .perk-when { font-size: 0.78rem; color: var(--text-muted); margin-top: -0.5rem; }
.pick-hint { position: absolute; left: 50%; top: 36%; transform: translateX(-50%); z-index: 45; font: 700 0.8rem var(--font-main); background: #3b2a66; color: #fff; padding: 6px 12px; border-radius: 999px; box-shadow: 0 8px 20px rgba(0,0,0,0.4); display: flex; gap: 8px; align-items: center; }
.pick-hint button { background: rgba(255,255,255,0.15); border: none; color: #fff; border-radius: 999px; padding: 2px 8px; font: 700 0.72rem var(--font-main); cursor: pointer; }
.discard-hint { text-align: center; font: 700 0.82rem var(--font-main); color: #ffd98a; margin-bottom: 4px; animation: tvPop 0.3s ease both; }
.discard-hint.hidden { display: none; }

@keyframes tvDealIn { from { opacity: 0; transform: translateY(-30px) scale(0.6); } to { opacity: 1; } }
@keyframes tvHeroDeal { from { opacity: 0; transform: translateY(-120px) scale(0.5) rotate(-10deg); } }
@keyframes tvReveal { from { transform: rotateY(90deg); } to { transform: none; } }
@keyframes tvFresh { 0% { transform: rotateY(90deg) scale(0.9); filter: brightness(2); } 100% { transform: none; filter: none; } }
@keyframes tvFreshUp { 0% { transform: rotateY(90deg) scale(0.9); filter: brightness(2); } 100% { transform: rotateY(180deg); filter: none; } }
@keyframes tvPop { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; } }
@keyframes tvRing { 0% { stroke-dashoffset: 129; } 50% { stroke-dashoffset: 30; } 100% { stroke-dashoffset: -129; } }
@keyframes tvWin { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.15); } }
@keyframes tvPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes tvPulseSoft { 0%, 100% { box-shadow: 0 0 12px rgba(169,112,255,0.15); } 50% { box-shadow: 0 0 26px rgba(169,112,255,0.45); } }
@keyframes tvFloat { 0% { opacity: 0; transform: translate(-50%, -30%); } 15% { opacity: 1; transform: translate(-50%, -60%); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -140%); } }
@keyframes tvWiggle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes perkShine { 0% { transform: rotateY(90deg) scale(0.8); } 40% { transform: rotateY(0) scale(1.08); } 100% { transform: none; } }
@keyframes perkShake { 0%, 100% { transform: none; } 25% { transform: translateX(-8px) rotate(-3deg); } 75% { transform: translateX(8px) rotate(3deg); } }
@keyframes perkFlip { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }
@keyframes perkBurst { 0% { opacity: 1; width: 20px; height: 20px; } 100% { opacity: 0; width: 150px; height: 150px; box-shadow: 0 0 0 10px var(--pc); } }

@media (prefers-reduced-motion: reduce) {
    .pc, .pc-inner, .tv-slot .pc-flip, .tv-hero-cards .pc-flip, .perk-stage, .perk-card, .perk-burst, .tv-float, .tv-avatar, .tv-ring circle, .perk-dock { animation: none !important; transition: none !important; }
}
@media (max-height: 700px) {
    .tv-avatar { width: 46px; height: 46px; font-size: 22px; }
    .tv-hero-cards { --fw: min(19vw, 70px); }
    .tv-slot { --fw: min(13.5vw, 52px); }
}

/* Play vs Computer on the shared table */
.ct-view { position: relative; flex: 1; min-height: 0; display: flex; }
#cpu-table-screen .ct-topbar { position: relative; z-index: 30; }
.seg-sub { margin-top: 6px; }
.seg-sub button { font-size: 0.74rem; }
.seg-sub.hidden { display: none; }

/* Pass & play on the shared table */
#game-screen .ct-topbar, #poker-table-screen .ct-topbar { position: relative; z-index: 30; }
#game-screen .ct-info, #poker-table-screen .ct-info { flex: 1; }
#poker-table-screen .pt-notice { margin: 0 12px 4px; }
.table-lobby-game { margin-bottom: 1rem; }
.table-lobby-game .hint { margin-top: 0.5rem; }
.table-lobby-game .segmented button:disabled { opacity: 1; cursor: default; }
.table-lobby-game .segmented button:disabled:not(.active) { opacity: 0.45; }
.pp-turn { min-width: 40px; max-width: 34vw; text-align: right; font: 700 0.76rem var(--font-main); color: var(--play); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-look {
    align-self: center; margin-bottom: 6px; font: 700 0.82rem var(--font-main); color: #fff;
    background: rgba(var(--play-rgb),0.18); border: 1px solid rgba(var(--play-rgb),0.45);
    padding: 6px 14px; border-radius: 999px; animation: tvPop 0.3s ease both, ppLookPulse 2s ease-in-out 0.3s infinite;
}
.pp-look.hidden { display: none; }
@keyframes ppLookPulse { 0%, 100% { box-shadow: 0 0 10px rgba(var(--play-rgb),0.15); } 50% { box-shadow: 0 0 22px rgba(var(--play-rgb),0.5); } }
.pp-panel { flex-shrink: 0; }
.pp-panel.hidden { display: none; }
#game-screen .ct-raise-sheet { position: fixed; }
.pass-cover.overlay { background: radial-gradient(110% 70% at 50% 35%, #15223a 0%, #0a0c10 70%); backdrop-filter: none; -webkit-backdrop-filter: none; }
.pass-card { width: 100%; max-width: 340px; text-align: center; display: flex; flex-direction: column; align-items: center; animation: tvPop 0.35s ease both; }
.pass-avatar {
    width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 1.1rem;
    font: 800 1.9rem var(--font-main); color: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,0.08), 0 12px 32px rgba(0,0,0,0.5);
}
.pass-card .pass-subtitle { margin: 0 0 0.2rem; }
.pass-card .pass-name { color: #fff; margin: 0 0 0.4rem !important; }
.pass-why { min-height: 1.2em; margin: 0 0 1.4rem; font: 700 0.86rem var(--font-main); color: #ffd98a; }
.pass-why:empty { visibility: hidden; }
.pass-card .btn { max-width: 280px; }

.pick-hint.cards { top: auto; bottom: calc(min(22vw, 84px) * 1.4 + 52px); }
.tv.no-cards .tv-board { display: none; }
.tv.no-cards .tv-pot { padding: 8px 20px; }
.tv.no-cards .tv-pot strong { font-size: 1.6rem; }
.tv.no-cards .tv-hero-cards { display: none; }
.tv-hero-cards { cursor: default; }