/* ============================================================
   POKER — MOBILE / SMALL-SCREEN STYLES
   Separate file, loaded AFTER style.css.
   Everything here lives inside media queries, so the DESKTOP
   layout is not touched at all.
   ============================================================ */

/* ------------------------------------------------------------------
   1) Phones + phone-in-landscape (short height)
------------------------------------------------------------------ */
@media (max-width: 820px), (orientation: landscape) and (max-height: 560px) {

  /* --- touch hygiene: no tap flash, no rubber-band, no text selection --- */
  html, body { overscroll-behavior: none; }
  body { -webkit-tap-highlight-color: transparent; }
  #table, #topbar, #controls, #sidepanel, #seats { -webkit-user-select: none; user-select: none; }
  #controls button, #topbar button, .sp-tab, .sp-row button, .rp-ctl button, .authbox button,
  .sitbtn, .avgimg, .emoji-cell { touch-action: manipulation; }

  /* dynamic viewport height: fills the area under the mobile URL bar */
  #table { height: 100dvh; }

  /* --- round table on phones (same ellipse as desktop): fills the
         available area (below the top bar, above the action bar) --- */
  #felt { inset: 42px 8px calc(112px + env(safe-area-inset-bottom, 0px)) 8px;
          border-radius: 50% / 46%; border-width: 6px; }
  #felt::after { inset: -6px; border-radius: 50% / 46%; border-width: 6px; }
  #felt::before { font-size: 20px; letter-spacing: 14px; top: 50%; }

  /* --- seats: small capsules pushed to the edge --- */
  .seat { width: 78px; padding: 2px 5px; font-size: 8px; }
  .seat.empty { width: 56px; padding: 4px; }
  .seat-body { gap: 4px; }
  .seat-avatar, .seat-avatar .av, .seat-avatar .avph { width: 22px; height: 22px; }
  /* phones: keep the avatar inside the tiny capsule (it stays a flex item) */
  .seat-avatar { position: relative; left: auto; top: auto; transform: none; }
  .seat-avatar .fl img { width: 11px; height: 8px; }
  /* the country flag is pinned to the bottom-right of the NAME row (style.css: bottom:-4px),
     which on a phone lands exactly on the chip count -> move it to the top-right corner of
     the capsule, where there is nothing to cover */
  .seat .who .fl { top: -5px; right: -5px; bottom: auto; }
  .seat .who .flc { font-size: 6px; padding: 1px 3px; border-radius: 2px; letter-spacing: 0; }   /* keep the "Other" badge inside the seat */
  .seat-avatar .fl { position: absolute; right: 2px; bottom: -4px; left: auto; top: auto; }
  .seat-info .name { font-size: 8px; }
  .seat-info .chips, .seat-info .chips .num { font-size: 8px; }
  .seat-info .chips::before { width: 7px; height: 7px; }
  /* only tournament seats that also show the BB label get the compact row */
  .seat-info .chips.has-bb, .seat-info .chips.has-bb .num { font-size: 7px; gap: 2px; }
  .seat-info .chips.has-bb .stack-bb { font-size: 6px; margin-left: 1px; opacity: .6; letter-spacing: -.2px; }
  .seat-info .chips.has-bb::before { width: 5px; height: 5px; }
  .seat .action { top: calc(100% + 2px); bottom: auto; font-size: 7px; padding: 1px 5px; }
  .sitbtn { padding: 5px; font-size: 10px; }
  /* table info badge (top-left): compact so it clears the top bar on a phone */
  #tableinfo { left: 8px; top: 8px; font-size: 9px; padding: 4px 8px; gap: 6px; }
  .marker { width: 15px; height: 15px; font-size: 7px; }   /* smaller: leaves room for the badges beside the board */
  .markerwrap { gap: 3px; }
  /* turn spotlight: the capsules are much smaller on a phone, so the whole rig (lamp +
     cone) is shorter, and it still points from behind the player (--spot-angle) */
  .seat-spot { --spot-w: 170px; --spot-len: 40px; --spot-gap: 12px; }
  .seat-spot::before { filter: blur(1.5px); }
  .seat-spot-lamp { width: 22px; height: 14px; border-radius: 5px 5px 7px 7px; }
  .seat-spot-lamp::before { width: 16px; height: 6px; box-shadow: 0 0 10px 3px rgba(255,226,150,.5); }
  .seat-spot-lamp::after { height: 9px; width: 4px; }
  .seat .awaytag, .seat .eqbadge { font-size: 7px; padding: 1px 4px; }
  .seat .awaycount { min-width: 22px; font-size: 7px; padding: 1px 4px; }
  .seat .chatbubble { font-size: 11px; max-width: 50vw; padding: 3px 7px; }
  .seat-timer .st-bg, .seat-timer .st-fg { stroke-width: 1.8; }

  /* --- hole cards (tiny) --- */
  .seat-cards .card.mini { width: 22px; height: 30px; font-size: 9px; border-radius: 3px; }
  .seat.me .seat-cards .card.mini { width: 32px; height: 44px; font-size: 11px; }
  .seat.cards-up .seat-cards { top: -22px; }
  .seat.me.cards-up .seat-cards { top: -32px; }
  .seat.cards-down .seat-cards { bottom: -12px; }
  .seat.cards-right .seat-cards { margin-left: -12px; }
  .seat.cards-left .seat-cards { margin-right: -12px; }

  /* force the cards to come out of the TOP of the capsule for ALL seats,
     regardless of the direction class applied. Safety net in case the browser
     loads an old cached script.js (with 'down'/'left'/'right'). */
  .seat .seat-cards {
    left: 50% !important;
    right: auto !important;
    top: -22px !important;
    bottom: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: translateX(-50%) !important;
  }
  .seat.me .seat-cards {
    top: -32px !important;
  }
  .seat.cards-up .eqbadge { top: -35px; }
  .seat.me.cards-up .eqbadge { top: -44px; }
  .flycard.fold { width: 22px; height: 30px; }

  /* --- centre: board + pot --- */
  #center { top: 42%; }   /* board/pot centred in the rectangular table */
  /* felt banner: never wider than the table, and long words break instead of running
     past the screen edge (the tournament banner used to overflow sideways) */
  #status { transform: translateY(-30px); font-size: 9px; letter-spacing: .3px; max-width: 96vw;
            margin-bottom: 2px; box-sizing: border-box; overflow-wrap: anywhere; }
  #status > span { display: block; }   /* split the banner onto two lines on phones */
  #status > span + span { opacity: .9; }
  #board { gap: 4px; min-height: 44px; }
  #board .flipcard { width: 28px; height: 38px; }   /* narrower board: frees the lateral space for the D/SB/BB badges */
  #board .flipcard .fc-front { font-size: 11px; }
  #pot { font-size: 11px; padding: 3px 9px; margin-bottom: 5px; }
  /* street words (FLOP / TURN / RIVER): #center is a centre-anchored flex column, so a
     bigger margin is half-eaten by the re-centring (~3px). position:relative + top moves
     the words themselves, with no layout shift and without fighting the .pulse animation
     (which drives transform). */
  #boardmsg { font-size: 10px; margin-top: 16px; position: relative; top: 9px; }
  #myhand { font-size: 9px; }
  #potchips { width: 56px; height: 36px; padding-bottom: 12px; margin: 3px auto; }
  #potchips i { width: 15px; height: 15px; font-size: 5px; }
  #potchips .potval { font-size: 8px; }
  /* split pots: narrow groups that wrap 2-per-row, shifted right so the MAIN stack
     never lands on the deck of cards (which sits at 36% from the left) */
  #potchips.multi {
    width: auto; height: auto; padding-bottom: 0;
    gap: 6px; row-gap: 2px; max-width: 78px; flex-wrap: wrap;
    transform: translateX(10px);
  }
  #potchips.multi .potgrp { min-width: 26px; gap: 1px; }
  #potchips.multi .potstack { width: 15px; }
  #potchips.multi .potval { font-size: 8px; }
  #potchips.multi .potlbl { font-size: 6px; letter-spacing: 0; }

  /* --- bets in front of the players: small pill + small chips --- */
  .betpile { gap: 3px; padding: 2px 7px 2px 4px; }
  .betpile .num { font-size: 9px; line-height: 1; }   /* compact: keeps the $ off the cards */
  .chipstack { width: 15px; margin-right: 3px; }
  .chipstack i { width: 15px; height: 15px; font-size: 5px; border-width: 1px; }

  /* the deck cards and the dealt card share ONE rule, so the deal is exactly the
     deck's TOP card leaving (no "extra card" offset/shadow/border difference) */
  #deck { width: 34px; height: 47px; transform: translate(-50%, -50%); }
  #deck i, .flycard {
    width: 34px; height: 47px; border-radius: 3.5px;
    background:
      radial-gradient(circle at 50% 50%, rgba(255,235,190,.60) 0 1.3px, rgba(255,235,190,.12) 1.7px 26%, transparent 27%),
      repeating-linear-gradient(45deg, rgba(255,235,190,.16) 0 1.7px, transparent 1.7px 5.2px),
      repeating-linear-gradient(-45deg, rgba(255,235,190,.16) 0 1.7px, transparent 1.7px 5.2px),
      linear-gradient(160deg, #c8353f 0%, #a01e29 46%, #6c0f18 100%);
    border: 1px solid #f0dcb0;
    box-shadow: 0 2px 5px rgba(0,0,0,.55), inset 0 0 0 1px #e6c88a, inset 0 0 0 2px #7d1019;
  }
  #deck i:nth-child(1) { transform: translate(-4px, -3px); }
  #deck i:nth-child(2) { transform: translate(-1px, -1px); }
  #deck i:nth-child(3) { transform: translate(1px, 1px); }
  #deck i:nth-child(4) { transform: translate(4px, 3px); }
  .flycard::after { display: none; }                          /* the deck cards have no inner ::after */
  .flycard.big { width: 28px; height: 38px; }                 /* board deal card (matches #board) */

  /* --- top bar: icon-only buttons, so they all stay on ONE row next to the info badge --- */
  #topbar { top: 3px; right: 3px; left: 140px; gap: 4px; row-gap: 3px; flex-wrap: wrap; }
  #topbar button { padding: 4px 7px; font-size: 0; justify-content: center; border-radius: 6px; white-space: nowrap; }
  /* Blinds keeps its label on phones too: chip + "$10 / $20" */
  #topbar #btnBlinds { font-size: 8px; }
  #topbar #botBtn::before       { content: '🤖'; font-size: 12px; }
  #topbar .chipicon { width: 13px; height: 13px; margin-right: 4px; vertical-align: middle; border-width: 1.5px; }
  #topbar #profBtn::before      { content: '👤'; font-size: 12px; }
  /* these three had no icon, and on phones the label is hidden (font-size: 0) -> they
     were invisible on mobile */
  #topbar #tourneyBtn::before   { content: '🏆'; font-size: 12px; }
  #topbar #loginBtn::before     { content: '🔑'; font-size: 12px; }
  #topbar #lateSitBtn::before   { content: '🪑'; font-size: 12px; }
  #topbar #soundBtn::before     { content: '🔊'; font-size: 12px; }
  #topbar #soundBtn.off::before { content: '🔇'; }
  #topbar #logoutBtn::before    { content: '⎋'; font-size: 12px; }
  #topbar select.guest-theme { padding: 4px 6px; font-size: 8px; border-radius: 6px; max-width: 34vw; }
  #topbar #logoutBtn { max-width: 30vw; overflow: hidden; text-overflow: ellipsis; }
  #toast { font-size: 14px; line-height: 1.35; padding: 10px 14px; max-width: 92vw; }

  /* --- action bar --- */
  #controls {
    left: 4px; right: 4px; bottom: calc(7px + env(safe-area-inset-bottom, 0px));
    transform: none; max-width: none; width: auto;
    padding: 8px; gap: 6px; border-radius: 12px;
  }
  #controls button { flex: 1 1 auto; min-width: 76px; padding: 11px 10px; font-size: 12px; border-radius: 11px;
                     min-height: 44px; letter-spacing: .2px; white-space: nowrap; }
  #controls .ctl-info { flex: 1 1 100%; text-align: center; font-size: 10px; }
  #controls .sliderwrap { flex: 1 1 55%; width: 100%; }
  #controls #raiseAmt, #controls #preRaiseAmt { width: 100%; }
  #controls #raiseVal, #controls #preRaiseVal { font-size: 11px; min-width: 38px; }
  #controls .tick { width: 11px; height: 11px; margin-right: 4px; }
  /* bet-size presets stay compact on mobile */
  #controls .sizing { flex: 1 1 100%; justify-content: center; gap: 5px; }
  #controls button.bsize { flex: 0 0 auto; min-width: 0; min-height: 30px; padding: 6px 9px; font-size: 11px; }

  /* --- side panel + blinds above the action bar, below the bottom seats --- */
  /* collapsible bar: the tab on the left (#panelToggle) opens it; 70% wide */
  #panelToggle {
    display: flex; align-items: center; justify-content: center;
    position: absolute; left: 5px; top: 40px; z-index: 35;
    width: 32px; height: 32px; padding: 0; border-radius: 9px;
    background: linear-gradient(180deg, #2b3a33, #1a2520); color: #ffe7a8;
    border: 1px solid rgba(255,255,255,.16); font-size: 15px; cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12);
  }
  #sidepanel {
    display: none;
    left: 4px; right: 4px; width: auto; max-width: none;   /* nearly full width */
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }
  body.panel-open #sidepanel { display: flex; }
  body.guest #sidepanel { display: none !important; }
  body.guest #panelToggle { display: none !important; }   /* guests have no chat bar */
  .sp-tabs { padding: 2px 3px; gap: 2px; }
  .sp-tab { font-size: 8px; padding: 2px 3px; border-radius: 5px; }   /* smaller headers */
  .sp-pane { height: 160px; padding: 4px 6px; }                       /* taller: ~4 chat messages fit */
  .sp-chat { height: 128px; font-size: 10px; }
  #tablelog { max-height: 128px; font-size: 9px; }
  .sp-row { gap: 4px; margin-top: 5px; }
  .sp-row input { padding: 6px 8px; font-size: 11px; border-radius: 6px; }
  .sp-row button { padding: 6px 9px; font-size: 11px; border-radius: 6px; }
  .sp-row #chatEmoji { padding: 6px 8px; font-size: 14px; }
  /* guests (not logged in): no chat panel on phones */
  body.guest #sidepanel { display: none; }
  #blinds { left: 4px; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }

  /* --- modals / overlays --- */
  #auth, #confirmBox, #emojiBox, #replay, #profile { padding: 6px; }
  #replay { padding: 44px 6px 10px; }   /* push the modal down so the X is easy to reach */
  .authbox { padding: 12px; }
  .emoji-grid { grid-template-columns: repeat(6, 1fr); }
  .rp-box { padding: 6px; gap: 6px; height: 86vh; }
  #replay .rp-x { width: 38px; height: 34px; font-size: 18px; }   /* visible close button on phones */
  .rp-log { height: 46px; }
  .pr-box { padding: 10px; }
  .avg { grid-template-columns: repeat(6, 1fr); }
}

/* ------------------------------------------------------------------
   2) Very small phones
------------------------------------------------------------------ */
@media (max-width: 420px) {
  .seat { width: 70px; padding: 2px 4px; }
  .seat.empty { width: 50px; }
  .marker { width: 16px; height: 16px; font-size: 7px; }
  .seat-avatar, .seat-avatar .av, .seat-avatar .avph { width: 20px; height: 20px; }
  .seat-info .name, .seat-info .chips, .seat-info .chips .num { font-size: 7px; }
  .seat-info .chips.has-bb, .seat-info .chips.has-bb .num { font-size: 6px; }
  .seat-info .chips.has-bb .stack-bb { font-size: 5px; margin-left: 0; letter-spacing: -.2px; }
  .seat-info .chips.has-bb::before { width: 4px; height: 4px; }
  .seat-cards .card.mini { width: 18px; height: 26px; font-size: 8px; border-radius: 3px; }
  .seat.me .seat-cards .card.mini { width: 26px; height: 36px; font-size: 10px; }
  .seat.cards-up .seat-cards { top: -18px; }
  .seat.me.cards-up .seat-cards { top: -26px; }
  .seat.cards-up .eqbadge { top: -30px; }
  .seat.me.cards-up .eqbadge { top: -38px; }
  .flycard.fold { width: 18px; height: 26px; }
  #deck { width: 30px; height: 41px; }
  #deck i, .flycard { width: 30px; height: 41px; }
  #board { gap: 4px; min-height: 44px; }
  #board .flipcard { width: 30px; height: 40px; }
  #deck { transform: translate(-50%, -50%); }
  #deck i:nth-child(1) { transform: translate(-3px, -2px); }
  #deck i:nth-child(2) { transform: translate(-1px, -1px); }
  #deck i:nth-child(3) { transform: translate(1px, 1px); }
  #deck i:nth-child(4) { transform: translate(3px, 2px); }
  .flycard.big { width: 30px; height: 40px; }
  #pot { font-size: 10px; }
  #topbar button { padding: 3px 6px; font-size: 0; }
  #topbar select.guest-theme { padding: 3px 5px; font-size: 7px; }
  #controls button { font-size: 10px; padding: 7px 6px; min-height: 34px; }
  #sidepanel { width: auto; max-width: none; }   /* full-width chat / Game info panel */
}

/* ------------------------------------------------------------------
   3) Phones in landscape: keep the action bar and panels compact
------------------------------------------------------------------ */
@media (orientation: landscape) and (max-height: 560px) {
  #table { height: 100dvh; }
  #status { font-size: 6px; }
  #controls { padding: 5px; gap: 4px; }
  #controls button { padding: 7px 7px; font-size: 11px; min-height: 34px; }
  #sidepanel { width: auto; max-width: none; bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
  .sp-pane { height: 54px; }
  .sp-chat { height: 38px; }
  #tablelog { max-height: 38px; }
  #blinds { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
}