/* ══════════════════════════════════════════════════════════════════════════
   Chaos Hold'em — Mobile Drawer System
   ══════════════════════════════════════════════════════════════════════════
   The drawer is ONLY visible in portrait orientation (mobile).
   Desktop/landscape keeps the existing floating UI layout unchanged.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Hide drawer on desktop / landscape ──────────────────────────────── */
#drawer {
  display: none;
}

/* ── Portrait-only: activate drawer ──────────────────────────────────── */
@media (orientation: portrait) {

  /* Grid layout: table area on top, drawer anchored at bottom */
  #game-container.drawer-enabled {
    display: grid !important;
    grid-template-rows: 1fr auto;
    grid-template-columns: 1fr;
    align-items: stretch;
    overflow: hidden;
  }

  /* Table fills the top area — drawer pushes it up */
  #game-container.drawer-enabled #table {
    max-height: none;
    height: 100%;
    width: 96%;
    margin: 0 auto;
    transition: transform 0.4s ease;
  }

  /* ── Drawer container ─────────────────────────────────────────────── */
  #drawer {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--felt-dark, #0a0a12);
    z-index: 100;
    overflow: hidden;
    transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
  }

  /* ── Collapsed state — handle only (notification is inside body) ───── */
  .drawer--collapsed {
    height: auto;
  }

  .drawer--collapsed .drawer__tabs,
  .drawer--collapsed .drawer__body {
    display: none;
  }

  .drawer--collapsed .drawer__chevron svg {
    transform: rotate(0deg);
    transition: transform 0.3s ease;
  }

  /* ── Expanded state — always same height so cards never resize ───── */
  .drawer--expanded {
    height: calc(50vh - 30px);
  }

  .drawer--expanded .drawer__tabs {
    display: flex;
  }

  .drawer--expanded .drawer__body {
    display: flex;
    flex: 1;
    overflow: hidden;
  }

  .drawer--expanded .drawer__chevron svg {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
  }

  /* ── Handle (always visible) ───────────────────────────────────────── */
  .drawer__handle {
    cursor: pointer;
    flex-shrink: 0;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* Theme-styled top border bar */
  .drawer__handle-border {
    height: 12px;
    background: linear-gradient(90deg, var(--rail-brown), var(--rail-light), var(--rail-brown));
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 -2px 8px rgba(0, 0, 0, 0.3);
  }

  .drawer__handle-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    min-height: 48px;
  }

  /* Phase badge */
  .drawer__phase-badge {
    font-family: var(--font-body, 'Rajdhani', sans-serif);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary, #a8b8a0);
    background: rgba(255, 255, 255, 0.06);
    padding: 3px 10px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.08);
  }

  /* Mini pot display */
  .drawer__pot-mini {
    font-family: var(--font-body, 'Rajdhani', sans-serif);
    font-size: 13px;
    font-weight: 700;
    color: var(--gold, #c9a84c);
    letter-spacing: 0.05em;
  }

  /* Chevron arrow */
  .drawer__chevron {
    color: var(--text-secondary, #a8b8a0);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
  }

  .drawer__chevron svg {
    width: 20px;
    height: 20px;
  }

  /* Turn indicator */
  .drawer__turn-indicator {
    font-family: var(--font-body, 'Rajdhani', sans-serif);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold, #c9a84c);
    min-width: 80px;
    text-align: right;
  }

  .drawer__turn-indicator.your-turn {
    animation: drawer-pulse 1.5s ease-in-out infinite;
  }

  .drawer-turn-countdown {
    margin-right: 6px;
    font-variant-numeric: tabular-nums;
    color: var(--gold, #c9a84c);
  }
  .drawer-turn-countdown.urgent {
    color: #ff4444;
  }

  @keyframes drawer-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
  }

  /* ── Notification bar — ALWAYS 32px, never changes size ──────────────── */
  /* Present from the start (even when empty) so adding/removing effects
     never causes the card area below to resize. */
  .drawer__notification {
    flex-shrink: 0;
    height: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }

  /* Override .effect-notification sizing for drawer context.
     Large base font (14px) — JS auto-shrinks when text overflows. */
  .drawer__notification .effect-notification {
    font-size: 14px;
    padding: 6px 10px;
    border: none;
    border-radius: 0;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    animation: notification-pulse 2.5s ease-in-out infinite;
  }

  .drawer__notification .effect-counter {
    position: absolute;
    right: 8px;
    font-size: 0.75em;
    opacity: 0.5;
    font-weight: 400;
  }

  .drawer__notification .effect-tap-hint {
    position: absolute;
    left: 8px;
    font-size: 0.65em;
    opacity: 0.4;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }

  /* Expanded: stays at 32px (content scrolls/clips within) */
  .drawer__notification.expanded {
    background: rgba(0, 0, 0, 0.85);
  }

  .drawer__notification.expanded .effect-tap-hint {
    display: none;
  }

  .drawer__notification.expanded .effect-notification {
    animation: none;
    padding: 5px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  }

  .drawer__notification.expanded .effect-notification:last-child {
    border-bottom: none;
  }

  /* Collapse hint inside drawer notification — override absolute positioning from main CSS */
  .drawer__notification .effect-collapse-hint {
    position: static;
    transform: none;
    font-size: 10px;
    text-align: center;
    opacity: 0.4;
    padding: 3px 0 1px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }


  /* ── Tab bar ───────────────────────────────────────────────────────── */
  .drawer__tabs {
    display: flex;
    gap: 0;
    padding: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.2);
  }

  .drawer__tab {
    flex: 1;
    padding: 10px 0;
    font-family: var(--font-body, 'Rajdhani', sans-serif);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted, #6d7d65);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .drawer__tab:hover {
    color: var(--text-secondary, #a8b8a0);
  }

  .drawer__tab--active {
    color: var(--gold, #c9a84c);
    border-bottom-color: var(--gold, #c9a84c);
  }
  .drawer__tab--disabled {
    opacity: 0.3;
    pointer-events: none;
  }

  /* ── Bottom navbar — themed border + audio/nav icons ───────────────── */
  .drawer__navbar {
    flex-shrink: 0;
  }

  .drawer--collapsed .drawer__navbar {
    display: none;
  }

  .drawer__navbar-border {
    height: 12px;
    background: linear-gradient(90deg, var(--rail-brown), var(--rail-light), var(--rail-brown));
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 2px 8px rgba(0, 0, 0, 0.3);
  }

  .drawer__navbar-content {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 6px 0;
    background: var(--felt-dark, #0a0a12);
  }

  .drawer__navbar-content .audio-ctrl-btn {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--text-secondary, #a8b8a0);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
  }

  .drawer__navbar-content .audio-ctrl-btn:active {
    background: rgba(255, 255, 255, 0.15);
  }

  .drawer__navbar-content .audio-ctrl-btn svg {
    width: 20px;
    height: 20px;
  }

  /* Navbar button order: match desktop (menu, volume, skip, quips, pause) */
  .drawer__navbar-content #btn-menu { order: 1; }
  .drawer__navbar-content #btn-volume { order: 2; }
  .drawer__navbar-content #btn-skip { order: 3; }
  .drawer__navbar-content #btn-quips { order: 4; }
  .drawer__navbar-content #btn-pause { order: 5; }

  /* ── Tab panels ────────────────────────────────────────────────────── */
  .drawer__body {
    flex: 1;
    overflow: hidden;
    position: relative;
  }

  .drawer__panel {
    display: none;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 16px;
  }

  .drawer__panel--active {
    display: flex;
  }

  /* ── Bet tab — betting buttons + hero wild/live hand ─────────────── */
  #drawer-panel-bet {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    padding: 6px 0;
    gap: 6px;
  }

  /* Wild card indicator in bet tab */
  .drawer-bet__wild-card {
    display: none;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-body, 'Rajdhani', sans-serif);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 6px 8px;
    flex-shrink: 0;
    animation: wildLabelPulse 2s ease-in-out infinite alternate;
  }

  .drawer-bet__wild-card:not(:empty) {
    display: flex;
  }

  .drawer-bet__wild-card .live-hand-hint {
    font-size: 11px;
    font-weight: 600;
    opacity: 0.7;
    letter-spacing: 0.05em;
  }

  /* Live hand display in bet tab */
  .drawer-bet__live-hand {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 6px 8px;
    flex-shrink: 0;
  }

  .drawer-bet__live-hand:not(:empty) {
    display: flex;
  }

  .drawer-bet__live-hand .live-hand-label {
    font-family: var(--font-body, 'Rajdhani', sans-serif);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    opacity: 0.6;
  }

  .drawer-bet__live-hand .live-hand-name {
    font-family: var(--font-body, 'Rajdhani', sans-serif);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.05em;
  }

  /* Hide table-level hero bet/live-hand/wild in drawer mode — shown in drawer instead */
  .drawer-enabled #seat-0 .player-bet,
  .drawer-enabled #seat-0 .live-hand,
  .drawer-enabled #seat-0 .wild-card-label {
    display: none !important;
  }

  /* ── Chaos Cards tab — cards fill panel, PASS button at bottom ──── */
  #drawer-panel-chaos-cards {
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    padding: 6px 0;
    gap: 6px;
    overflow: hidden;
  }

  /* Action buttons — fixed height so card area never changes */
  .drawer-action__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    align-items: center;
    padding: 0 8px;
    flex-shrink: 0;
    height: 48px;
    overflow: hidden;
  }

  /* Persistent chaos cards — CSS Grid, fills remaining space and scrolls */
  .drawer-action__persistent-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 0 4px;
    width: 100%;
    box-sizing: border-box;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* PASS button area — overlays navbar during chaos window */
  .drawer-chance-actions {
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    padding: 10px 12px env(safe-area-inset-bottom, 10px);
    background: linear-gradient(to top, rgba(0,0,0,0.95), rgba(0,0,0,0.85));
    flex-shrink: 0;
  }

  /*
   * html2canvas image approach: cards are captured as bitmaps from the
   * hold screen (#chance-slots context), then displayed as background
   * images. Guaranteed pixel-perfect match — same CSS, same rendering.
   *
   * Grid cells give each card exactly 1/3 width. background-size uses
   * 100% width so the card image always fills the cell edge-to-edge.
   * Height is auto-scaled by the image ratio; overflow clips if needed.
   */
  .drawer-card-img {
    width: 100%;
    aspect-ratio: 5 / 7;
    margin: 0 auto;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
  }

  /* Empty slot placeholder */
  .drawer-card-img--empty {
    border: 1.5px dashed rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .drawer-card-img__label {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.2);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  /* Persistent card states */
  .drawer-persistent-card {
    transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
  }

  /* Inactive/grayed state — default during non-chance phases */
  .drawer-persistent-card--inactive {
    opacity: 0.35;
    filter: grayscale(0.6);
    pointer-events: none;
  }

  /* ACTIVE label overlay for played cards (html2canvas clips the CSS one) */
  .drawer-persistent-active-label {
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-body, 'Rajdhani', sans-serif);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(0, 180, 80, 0.85);
    padding: 2px 8px;
    border-radius: 3px;
    z-index: 5;
    white-space: nowrap;
    animation: activeBob 1.2s ease-in-out infinite;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    pointer-events: none;
  }

  /* ── Action buttons — AAA-quality filled gradient style ────────────── */

  .drawer-action__buttons .action-btn {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.1em;
    padding: 10px 20px;
    min-width: 0;
    flex: 1;
    border: none;
    border-radius: 8px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.2),
      inset 0 -2px 0 rgba(0, 0, 0, 0.25),
      0 2px 6px rgba(0, 0, 0, 0.4);
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    touch-action: manipulation;
    user-select: none;
    outline: none;
    transition: none;
  }

  /* Prevent browser's native button press visual (opacity/dim on :active) */
  .drawer-action__buttons .action-btn:active,
  .drawer-action__buttons .action-btn:focus {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    outline: none !important;
  }

  /* Fold — deep red */
  .drawer-action__buttons .action-fold {
    background: linear-gradient(180deg, #d42a2a 0%, #8b1a1a 100%);
    border-bottom: 2px solid #5c0e0e;
  }

  /* Check — rich green */
  .drawer-action__buttons .action-check {
    background: linear-gradient(180deg, #1fa843 0%, #0e6e28 100%);
    border-bottom: 2px solid #074d1a;
  }

  /* Call — teal green */
  .drawer-action__buttons .action-call {
    background: linear-gradient(180deg, #1aad3e 0%, #0c7a2a 100%);
    border-bottom: 2px solid #065a1c;
  }

  /* Bet / Raise — gold */
  .drawer-action__buttons .action-bet,
  .drawer-action__buttons .action-raise {
    background: linear-gradient(180deg, #d4a822 0%, #8a6e12 100%);
    border-bottom: 2px solid #5c4a0a;
  }

  /* Skip / Pass — dark steel */
  .drawer-action__buttons .action-skip {
    background: linear-gradient(180deg, #555 0%, #333 100%);
    border-bottom: 2px solid #222;
  }

  /* Chance — cyan */
  .drawer-action__buttons .action-chance {
    background: linear-gradient(180deg, #0abfd4 0%, #077a8a 100%);
    border-bottom: 2px solid #045560;
  }

  /* PASS button in chance window — same style treatment */
  .drawer-action__buttons .drawer-chance-pass {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.1em;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    background: linear-gradient(180deg, #555 0%, #333 100%);
    border-bottom: 2px solid #222;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.2),
      inset 0 -2px 0 rgba(0, 0, 0, 0.25),
      0 2px 6px rgba(0, 0, 0, 0.4);
  }

  /* ── Social tab — Quips ───────────────────────────────────────────── */
  #drawer-panel-social {
    padding: 8px 10px;
    overflow-y: scroll;
  }

  .drawer-quips {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  /* Theme pack selector — matches Profile tab selector */
  .drawer-quips__theme-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    flex-shrink: 0;
  }

  .drawer-quips__theme-label {
    font-family: var(--font-body, 'Rajdhani', sans-serif);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-primary, #f0ead6);
  }

  .drawer-quips__theme-select {
    padding: 6px 28px 6px 10px;
    font-family: var(--font-body, 'Rajdhani', sans-serif);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(255,255,255,0.6)'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    cursor: pointer;
  }

  .drawer-quips__theme-select option {
    background: #1a1a2e;
    color: #fff;
  }

  /* Category jump-link nav */
  .drawer-quips__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
  }

  .drawer-quips__nav-break {
    flex-basis: 100%;
    height: 0;
  }

  .drawer-quips__nav-pill {
    padding: 7px 14px;
    font-family: var(--font-body, 'Rajdhani', sans-serif);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-primary, #f0ead6);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .drawer-quips__nav-pill:active {
    background: rgba(255, 255, 255, 0.15);
  }

  .drawer-quips__nav-pill--fav {
    color: var(--gold, #c9a84c);
    border-color: rgba(201, 168, 76, 0.3);
  }

  /* Section (category group) */
  .drawer-quips__section {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .drawer-quips__section--collapsed .drawer-quips__grid {
    display: none;
  }

  .drawer-quips__section--collapsed .drawer-quips__chevron {
    transform: rotate(-90deg);
  }

  /* Section header — "── GOOD GAME ──" with fading gold lines */
  .drawer-quips__section-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 2px;
    font-family: var(--font-title, 'Chakra Petch', sans-serif);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold, #c9a84c);
    user-select: none;
  }

  .drawer-quips__section-label--toggle {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .drawer-quips__chevron {
    font-size: 12px;
    transition: transform 0.2s ease;
  }

  .drawer-quips__section-label::before,
  .drawer-quips__section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.35), transparent);
  }

  /* Quip button grid — 2 columns */
  .drawer-quips__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  /* Individual quip button */
  .drawer-quips__btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 40px;
    padding: 8px 8px;
    font-family: var(--font-body, 'Rajdhani', sans-serif);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--text-primary, #f0ead6);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 2px solid rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      0 2px 4px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: none;
    overflow: hidden;
    user-select: none;
  }

  .drawer-quips__btn:active {
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.02) 0%,
      rgba(255, 255, 255, 0.06) 100%);
    border-top: 2px solid rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
      inset 0 2px 4px rgba(0, 0, 0, 0.3),
      0 0 0 rgba(0, 0, 0, 0);
    transform: translateY(1px);
  }

  /* Sent flash — plays once on tap */
  .drawer-quips__btn--sent {
    animation: quipSentFlash 0.6s ease-out;
    pointer-events: none;
  }

  @keyframes quipSentFlash {
    0% {
      background: linear-gradient(180deg,
        rgba(201, 168, 76, 0.35) 0%,
        rgba(201, 168, 76, 0.15) 100%);
      border-color: rgba(201, 168, 76, 0.5);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 12px rgba(201, 168, 76, 0.3);
    }
    100% {
      background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.02) 100%);
      border-color: rgba(255, 255, 255, 0.1);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 2px 4px rgba(0, 0, 0, 0.3);
    }
  }

  /* Cooldown state — dimmed, no interaction */
  .drawer-quips__btn--cooldown {
    opacity: 0.35;
    pointer-events: none;
  }

  /* Locked state — unowned theme quips */
  .drawer-quips__btn--locked {
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
  }

  /* Button + star wrapper */
  .drawer-quips__btn-wrap {
    position: relative;
  }

  .drawer-quips__btn-wrap .drawer-quips__btn {
    width: 100%;
    padding-right: 26px;
  }

  .drawer-quips__star {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.25);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
  }

  .drawer-quips__star--active {
    color: var(--gold, #c9a84c);
  }

  /* Favorites section label */
  .drawer-quips__section-label--fav {
    color: var(--gold, #c9a84c);
  }

  /* ── Camera cycle button (in handle bar) ──────────────────────────── */
  .drawer__camera-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: var(--text-secondary, #a8b8a0);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease;
  }

  .drawer__camera-btn:active {
    background: rgba(255, 255, 255, 0.15);
  }

  .drawer__camera-label {
    font-family: var(--font-body, 'Rajdhani', sans-serif);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  /* ── Profile tab — full width ──────────────────────────────────────── */
  #drawer-panel-profile {
    align-items: stretch;
  }

  .drawer-profile__mini-nameplate {
    padding: 8px 0;
    width: 100%;
  }

  .drawer-profile__sections {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  /* AI Difficulty selector row */
  .drawer-profile__difficulty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
  }

  .drawer-profile__difficulty-label {
    font-family: var(--font-body, 'Rajdhani', sans-serif);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-primary, #f0ead6);
  }

  .drawer-profile__difficulty-select {
    padding: 6px 28px 6px 10px;
    font-family: var(--font-body, 'Rajdhani', sans-serif);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(255,255,255,0.6)'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    cursor: pointer;
  }

  .drawer-profile__difficulty-select:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .drawer-profile__difficulty-select option {
    background: #1a1a2e;
    color: #fff;
  }

  .drawer-profile__btn {
    padding: 12px 16px;
    font-family: var(--font-body, 'Rajdhani', sans-serif);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-primary, #f0ead6);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .drawer-profile__btn:hover {
    background: rgba(255, 255, 255, 0.08);
  }

  .drawer-profile__btn--active {
    border-color: var(--gold, #c9a84c);
    background: rgba(201, 168, 76, 0.08);
  }

  .drawer-profile__log {
    max-height: 200px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 0;
  }

  /* Override var(--base)-relative sizes — too tiny in the drawer */
  .drawer-profile__log .action-log-entry {
    font-size: 14px;
    padding: 4px 0;
  }

  .drawer-profile__log .action-log-separator {
    font-size: 12px;
    padding: 6px 0;
    margin: 4px 0;
  }

  .drawer-profile__log .action-log-hand-start {
    font-size: 13px;
    padding: 8px 0;
  }

  /* ── Hand rankings reference card ────────────────────────────────── */
  .drawer-hand-rankings {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 0;
  }

  .drawer-hand-rankings__row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
  }

  .drawer-hand-rankings__row:nth-child(odd) {
    background: rgba(255, 255, 255, 0.06);
  }

  .drawer-hand-rankings__rank {
    font-family: var(--font-body, 'Rajdhani', sans-serif);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted, #6d7d65);
    width: 18px;
    text-align: right;
    flex-shrink: 0;
  }

  .drawer-hand-rankings__name {
    font-family: var(--font-body, 'Rajdhani', sans-serif);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary, #f0ead6);
    flex: 1;
    white-space: nowrap;
  }

  .drawer-hand-rankings__example {
    font-family: var(--font-body, 'Rajdhani', sans-serif);
    font-size: 11px;
    color: var(--text-secondary, #a8b8a0);
    flex-shrink: 0;
    letter-spacing: 0.02em;
  }

  /* ── Drawer Chance Cards (chance window interactive state) ────────── */

  /* Playable cards — tappable */
  .drawer-chance-card--playable {
    cursor: pointer;
  }

  .drawer-chance-card--playable:active {
    transform: scale(0.93);
  }

  /* Blocked cards — dimmed with reason overlay */
  .drawer-chance-card--blocked {
    opacity: 0.35;
    filter: grayscale(0.5);
  }

  .drawer-chance-card__reason {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 6px 4px;
    font-family: var(--font-body, 'Rajdhani', sans-serif);
    font-size: calc(var(--base) * 0.75);
    font-weight: 700;
    color: #ff6b6b;
    text-align: center;
    background: rgba(0, 0, 0, 0.75);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    z-index: 2;
  }

  /* PASS button — full width below the cards */
  .drawer-chance-pass {
    width: 100%;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
  }

  /* Confirm dialog for cards that need confirmation */
  .drawer-chance-confirm {
    width: 100%;
    padding: 8px 0;
    text-align: center;
  }

  .drawer-chance-confirm__msg {
    font-family: var(--font-body, 'Rajdhani', sans-serif);
    font-size: 13px;
    color: var(--text-primary, #f0ead6);
    padding: 6px 8px;
    margin-bottom: 8px;
  }

  .drawer-chance-confirm__btns {
    display: flex;
    gap: 8px;
    justify-content: center;
  }

  .drawer-chance-confirm__yes,
  .drawer-chance-confirm__no {
    flex: 1;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 700;
  }

  /* ── Overlays must stack above the drawer (z-index: 100) ─────────────── */
  .drawer-enabled #placement-overlay {
    z-index: 200;
  }

  .drawer-enabled #results-screen {
    z-index: 200;
  }

  .drawer-enabled #action-panel {
    z-index: 150;
  }

  .drawer-enabled #timeout-overlay {
    z-index: 150;
  }

  .drawer-enabled #effect-notifications {
    display: none !important;
  }

  /* "Jake Skipped" etc. — showMessage() overlay must render above drawer */
  .drawer-enabled #message-overlay {
    position: fixed;
    z-index: 200;
  }

  /* ── Hand Results — much larger on mobile ────────────────────────────── */
  .drawer-enabled #placement-overlay {
    position: fixed;
    inset: 0;
    align-items: center;
    justify-content: center;
  }

  .drawer-enabled .placement-panel {
    min-width: 90vw;
    max-width: 96vw;
    max-height: 90vh;
    padding: 24px 20px;
    border-radius: 12px;
  }

  .drawer-enabled .placement-title {
    font-size: 22px;
    letter-spacing: 0.15em;
    margin-bottom: 16px;
  }

  .drawer-enabled .placement-list {
    gap: 8px;
  }

  .drawer-enabled .placement-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    gap: 2px 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    align-items: baseline;
  }

  /* Row 1 left: place + name */
  .drawer-enabled .placement-place {
    font-size: 18px;
    grid-row: 1;
    grid-column: 1;
  }

  .drawer-enabled .placement-name {
    font-size: 17px;
    grid-row: 1;
    grid-column: 2;
  }

  /* Row 1 right: chips gained */
  .drawer-enabled .placement-amount {
    font-size: 17px;
    grid-row: 1;
    grid-column: 3;
    text-align: right;
  }

  /* Row 2 left: hand name */
  .drawer-enabled .placement-hand {
    font-size: 14px;
    grid-row: 2;
    grid-column: 1 / 3;
    text-align: left;
    padding-left: 30px;
  }

  /* Row 2 right: cards gained */
  .drawer-enabled .placement-draws {
    font-size: 13px;
    grid-row: 2;
    grid-column: 3;
    text-align: right;
  }

  .drawer-enabled .placement-buttons {
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
  }

  .drawer-enabled #placement-deal-btn,
  .drawer-enabled #placement-close-btn {
    font-size: 16px;
    padding: 14px 24px;
    border-radius: 8px;
    width: 100%;
  }

  .drawer-enabled #placement-quit-btn {
    font-size: 10px;
    padding: 3px 12px;
    border-radius: 4px;
    width: auto;
    align-self: flex-start;
    opacity: 0.4;
    background: transparent;
    border: 1px solid;
  }

  .drawer-enabled #next-hand-countdown {
    font-size: 14px;
    margin-bottom: 12px;
  }

  /* ── Post-hand panel: center on table, enlarge for mobile ────────────── */
  .drawer-enabled #post-hand-panel {
    bottom: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(var(--base) * 2));
    width: min(85%, calc(var(--base) * 24));
  }

  /* When drawer is expanded, move buttons just below community cards */
  .drawer-opponents-tiny #post-hand-panel {
    top: 32%;
    transform: translate(-50%, 0);
  }

  .drawer-enabled #new-hand-btn {
    font-size: calc(var(--base) * 1.2);
    padding: calc(var(--base) * 0.8) calc(var(--base) * 2);
    border-radius: calc(var(--base) * 0.6);
  }

  .drawer-enabled #show-results-btn {
    font-size: calc(var(--base) * 0.95);
    padding: calc(var(--base) * 0.6) calc(var(--base) * 2);
    border-radius: calc(var(--base) * 0.5);
  }

  .drawer-enabled #table-quit-btn {
    width: 60px !important;
    align-self: flex-start !important;
    font-size: 10px !important;
    padding: 3px 8px !important;
    border-radius: 3px !important;
    opacity: 0.4 !important;
    background: transparent !important;
    border: 1px solid !important;
  }

  #table-quit-btn {
    width: 60px !important;
    align-self: flex-start !important;
    font-size: 10px !important;
    padding: 3px 8px !important;
    border-radius: 3px !important;
    opacity: 0.4 !important;
    background: transparent !important;
    border: 1px solid !important;
  }

  /* ── Hide floating controls when drawer is active ────────────────────── */
  /* Action panel is replaced by drawer buttons */
  .drawer-enabled #action-panel {
    display: none !important;
  }

  /* Always hidden in portrait — drawer handles chance cards, never fall back to old on-screen layout.
     Scoped to #game-container so the temporary capture host on document.body isn't affected. */
  #game-container #chance-slots {
    display: none !important;
  }

  .drawer-enabled #difficulty-dropdown-wrapper {
    display: none !important;
  }

  /* #audio-controls is physically moved via JS appendChild, but hide if not moved yet */
  .drawer-enabled #action-log-panel {
    display: none !important;
  }

  /* Shrink seats so they don't bleed over neighboring elements. */
  .drawer-enabled .seat {
    transform: scale(0.82);
    transform-origin: center center;
  }

  /* ── Nav menu — fullscreen overlay with large text ─────────────────── */
  .drawer-enabled #nav-menu {
    background: rgba(0, 0, 0, 0.85);
  }

  .drawer-enabled .nav-menu-panel {
    position: fixed;
    inset: 0;
    min-width: unset;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    overflow-y: auto;
    transform: none;
    background: var(--felt-dark, #0a0a12);
  }

  .drawer-enabled #nav-menu.visible .nav-menu-panel {
    transform: none;
  }

  /* Close button — top-right of fullscreen nav */
  .drawer-enabled .nav-menu-close {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 36px;
    line-height: 1;
    background: none;
    border: none;
    color: var(--text-secondary, #a8b8a0);
    cursor: pointer;
    padding: 8px;
    z-index: 1;
  }

  .drawer-enabled .nav-menu-header {
    font-size: 16px;
    letter-spacing: 0.15em;
    padding: 8px 0;
    margin-bottom: 4px;
  }

  .drawer-enabled .nav-menu-item {
    font-size: 22px;
    padding: 14px 12px;
    letter-spacing: 0.04em;
  }

  .drawer-enabled .nav-menu-toggle-row {
    padding: 14px 12px;
  }

  .drawer-enabled .nav-menu-toggle-label {
    font-size: 20px;
  }

  .drawer-enabled .nav-menu-section {
    margin-bottom: 16px;
  }

  /* ── Drawer expanded: hide title/hand info to reclaim space ── */
  .drawer-opponents-tiny #game-title-block,
  .drawer-opponents-tiny #hand-info,
  .drawer-opponents-tiny #phase-label {
    display: none !important;
  }

  /* ── Pot closer to community cards ── */
  .drawer-opponents-tiny #pot-display {
    transform: translate(-50%, calc(var(--base) * 3));
  }

  /* Allow seats to extend beyond table/container bounds into screen corners */
  #game-container.drawer-opponents-tiny {
    overflow: visible;
  }

  .drawer-opponents-tiny #table {
    overflow: visible;
  }

  /* ── Drawer expanded: push opponents to screen corners ── */
  .drawer-opponents-tiny #seat-1 {
    bottom: calc(-6% + 15px);
    left: -4%;
  }

  .drawer-opponents-tiny #seat-5 {
    bottom: calc(-6% + 15px);
    right: -4%;
  }

  .drawer-opponents-tiny #seat-2 {
    top: calc(-8% + 15px);
    left: -4%;
  }

  .drawer-opponents-tiny #seat-3 {
    top: calc(-10% + 15px);
  }

  .drawer-opponents-tiny #seat-4 {
    top: calc(-8% + 15px);
    right: -4%;
  }

  /* ── Hero seat: push up so nameplate isn't overlayed by drawer ── */
  .drawer-opponents-tiny #seat-0 {
    bottom: calc(-6% + 33px);
  }

  /* ── Wider nameplates for all players when drawer expanded ── */
  .drawer-opponents-tiny .player-info {
    min-width: calc(var(--base) * 14 + 10px);
  }

  /* ── Opponent nameplates ~10% larger ── */
  .drawer-opponents-tiny .seat:not(#seat-0) .player-info {
    min-width: calc(var(--base) * 15.4);
    width: calc(var(--base) * 15.4);
  }

  .drawer-opponents-tiny .seat:not(#seat-0) .player-name {
    font-size: calc(var(--base) * 1.15);
  }

  .drawer-opponents-tiny .seat:not(#seat-0) .player-title:not(:empty) {
    font-size: calc(var(--base) * 1.2);
  }

  .drawer-opponents-tiny .seat:not(#seat-0) .player-level-badge {
    font-size: calc(var(--base) * 1.65);
  }

  .drawer-opponents-tiny .seat:not(#seat-0) .player-chips {
    font-size: calc(var(--base) * 1.65);
  }

  /* ── Dealer/blind badges: tuck closer to cards ── */
  .drawer-opponents-tiny .player-badge {
    left: calc(100% - 10px);
  }

  /* ── Compact nameplates: level + chips on same row ── */
  .drawer-opponents-tiny .player-name {
    width: 100%;
  }

  .drawer-opponents-tiny .player-title:not(:empty) {
    display: block !important;
    width: 100%;
    font-size: calc(var(--base) * 1.1);
    opacity: 0.85;
  }

  /* Hero title slightly larger */
  .drawer-opponents-tiny #seat-0 .player-title:not(:empty) {
    font-size: calc(var(--base) * 1.2);
  }

  .drawer-opponents-tiny .player-level-badge {
    display: inline;
    font-size: calc(var(--base) * 1.5);
    margin-right: calc(var(--base) * 0.5);
  }

  .drawer-opponents-tiny .player-chips {
    display: inline;
    font-size: calc(var(--base) * 1.5);
  }

  /* ── Hero hole cards 25% larger when drawer expanded ── */
  .drawer-opponents-tiny #seat-0 .player-cards {
    zoom: 1.25;
  }

} /* end @media (orientation: portrait) */


/* ══════════════════════════════════════════════════════════════════════════
   Theme-Specific Drawer Borders
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Standard: thick wood rail ───────────────────────────────────────── */
@media (orientation: portrait) {
  .drawer__handle-border {
    height: 12px;
    background: linear-gradient(90deg, var(--rail-brown), var(--rail-light), var(--rail-brown));
    box-shadow:
      inset 0 2px 0 rgba(255, 255, 255, 0.15),
      0 -2px 8px rgba(0, 0, 0, 0.3);
  }
}

/* ── Cyberpunk: thin neon glow ───────────────────────────────────────── */
@media (orientation: portrait) {
  [data-theme="cyberpunk"] .drawer__navbar-border {
    height: 4px;
    background: var(--neon-cyan, #00f0ff);
    box-shadow: 0 0 16px rgba(0, 240, 255, 0.5), 0 0 6px rgba(0, 240, 255, 0.7);
  }

  [data-theme="cyberpunk"] .drawer__handle-border {
    height: 4px;
    background: var(--neon-cyan, #00f0ff);
    box-shadow:
      0 0 16px rgba(0, 240, 255, 0.5),
      0 0 6px rgba(0, 240, 255, 0.7);
  }

  [data-theme="cyberpunk"] .drawer__tab--active {
    color: var(--neon-cyan, #00f0ff);
    border-bottom-color: var(--neon-cyan, #00f0ff);
  }
}

/* ── Tropical Rainforest: bamboo bar ─────────────────────────────────── */
@media (orientation: portrait) {
  [data-theme="tropicalrainforest"] .drawer__navbar-border {
    height: 16px;
    background:
      repeating-linear-gradient(90deg, transparent, transparent 30px, rgba(0, 0, 0, 0.15) 30px, rgba(0, 0, 0, 0.15) 32px),
      linear-gradient(180deg, #d4a855 0%, #a67525 40%, #7a5518 100%);
    box-shadow:
      inset 0 3px 4px rgba(255, 220, 150, 0.3),
      inset 0 -2px 4px rgba(0, 0, 0, 0.3);
  }

  [data-theme="tropicalrainforest"] .drawer__handle-border {
    height: 16px;
    background:
      /* Bamboo notch repeating pattern */
      repeating-linear-gradient(90deg, transparent, transparent 30px, rgba(0, 0, 0, 0.15) 30px, rgba(0, 0, 0, 0.15) 32px),
      linear-gradient(180deg, #d4a855 0%, #a67525 40%, #7a5518 100%);
    box-shadow:
      inset 0 3px 4px rgba(255, 220, 150, 0.3),
      inset 0 -2px 4px rgba(0, 0, 0, 0.3);
  }

  [data-theme="tropicalrainforest"] .drawer__tab--active {
    color: var(--gold, #7cb518);
    border-bottom-color: var(--gold, #7cb518);
  }
}

/* ── Warlord: chainmail strip ────────────────────────────────────────── */
@media (orientation: portrait) {
  [data-theme="warlord"] .drawer__navbar-border {
    height: 18px;
    background:
      linear-gradient(180deg, #6e6e72 0%, #4e4e52 50%, #3a3a3e 100%);
    background-image:
      radial-gradient(circle at 3px 3px, rgba(180, 180, 190, 0.3) 1px, transparent 2px);
    background-size: 6px 6px;
    box-shadow:
      inset 0 2px 4px rgba(200, 200, 210, 0.2),
      inset 0 -3px 5px rgba(0, 0, 0, 0.45);
  }

  [data-theme="warlord"] .drawer__handle-border {
    height: 18px;
    background:
      linear-gradient(180deg, #6e6e72 0%, #4e4e52 50%, #3a3a3e 100%);
    background-image:
      radial-gradient(circle at 3px 3px, rgba(180, 180, 190, 0.3) 1px, transparent 2px);
    background-size: 6px 6px;
    box-shadow:
      inset 0 2px 4px rgba(200, 200, 210, 0.2),
      inset 0 -3px 5px rgba(0, 0, 0, 0.45);
  }

  [data-theme="warlord"] .drawer__tab--active {
    color: var(--border-glow, #c9a84c);
    border-bottom-color: var(--border-glow, #c9a84c);
  }
}

/* ── Aquatic: teal bioluminescent glow bars ─────────────────────────── */
@media (orientation: portrait) {
  [data-theme="aquatic"] .drawer__navbar-border {
    height: 4px;
    background: var(--biolum-teal, #00bcd4);
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.4), 0 0 5px rgba(0, 229, 255, 0.6);
  }

  [data-theme="aquatic"] .drawer__handle-border {
    height: 4px;
    background: var(--biolum-teal, #00bcd4);
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.4), 0 0 5px rgba(0, 229, 255, 0.6);
  }

  [data-theme="aquatic"] .drawer__tab--active {
    color: var(--biolum-cyan, #00e5ff);
    border-bottom-color: var(--biolum-cyan, #00e5ff);
  }
}

/* Strategy Guide drawer tabs — hidden by default */
.drawer__tabs--strategy {
  display: none;
}