/* ==========================================================================
   El Basra Online — LANDSCAPE-FIRST responsive game UI
   --------------------------------------------------------------------------
   Loaded LAST so it wins over game styles, Tailwind utilities and pwa.css.

   Philosophy: a responsive game HUD, not a responsive website.
   - Fluid sizing via clamp() + vmin between hard min/max guards.
   - Only 3 meaningful breakpoints: landscape / short-landscape / large.
   - Portrait stays fully usable (stacked) — nothing is ever hidden.
   - Reuses existing IDs/classes/hooks; no duplicate components.
   ========================================================================== */

/* --- 0. Fluid scale tokens (vmin = 1% of the SMALLER viewport side) --- */
:root {
  --ls-gap: clamp(8px, 2vmin, 20px);            /* gaps, margins rhythm */
  --ls-pad: clamp(10px, 2.6vmin, 28px);          /* panel padding */
  --ls-btn-fs: clamp(0.95rem, 1.6vmin + 0.55rem, 1.35rem);
  --ls-btn-py: clamp(8px, 1.9vmin, 15px);
  --ls-btn-px: clamp(14px, 3vmin, 28px);
  --ls-icon: clamp(22px, 5vmin, 40px);           /* rail / action icons */
  --ls-rail: clamp(44px, 9.5vmin, 62px);         /* icon touch buttons */
  --ls-title: clamp(1.9rem, 8vmin, 4rem);        /* hero / login titles */
  --ls-touch: 44px;                             /* minimum touch target */
  --ls-wide: min(920px, 94vw);                  /* desktop content cap */
}

/* --- 1. Old portrait system: hard kill-switch (HTML nodes also removed) --- */
#orientation-warning,
#portrait-warning {
  display: none !important;
}

/* --- 2. Viewport containment: never scroll/clip/overflow the shell --- */
#screens-wrapper,
#login-screen,
#lobby-screen,
#game-screen {
  min-width: 0;
  max-width: 100%;
}
#login-screen,
#lobby-screen {
  overflow-x: hidden;
}
.lobby-actions .btn-bubble,
#pwa-install-btn,
.lobby-topbar button,
.login-panel button,
.login-panel input {
  min-width: 0;
  max-width: 100%;
}
.login-panel input,
.lobby-topbar span {
  overflow-wrap: anywhere;
}

/* ==========================================================================
   3. LOGIN — landscape composition: brand LEFT, panel RIGHT
   Portrait keeps the original stacked layout (no rules = no change).
   ========================================================================== */
@media (orientation: landscape) {
  #login-screen {
    align-items: center;
    justify-content: center;
    padding: var(--ls-gap);
  }
  #login-screen .login-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(12px, 4vmin, 44px);
    width: var(--ls-wide);
    max-width: var(--ls-wide);
    margin-inline: auto;
    padding-block: var(--ls-gap);
    max-height: calc(100vh - 8px);
    max-height: calc(100dvh - 8px);
  }
  #login-screen .login-brand {
    margin-bottom: 0;
    min-width: 0;
    text-align: center;
  }
  #login-screen .login-title {
    font-size: var(--ls-title);
    line-height: 1.25;
    text-wrap: balance;
  }
  #login-screen .login-sub {
    font-size: clamp(0.62rem, 1.9vmin + 0.3rem, 0.8rem);
    margin-top: var(--ls-gap);
  }
  #login-screen .login-panel {
    width: 100%;
    min-width: 0;
    padding: var(--ls-pad);
    margin: 0;
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  #login-screen .login-welcome {
    font-size: clamp(0.85rem, 2.4vmin + 0.4rem, 1.05rem);
    margin-bottom: var(--ls-gap);
  }
  #login-screen .login-or {
    margin: var(--ls-gap) 0;
  }
  #login-screen .input-dark {
    min-height: var(--ls-touch);
    font-size: clamp(0.95rem, 2.4vmin + 0.45rem, 1.15rem);
  }
  #login-screen #login-button,
  #login-screen #google-login-button {
    min-height: var(--ls-touch);
    font-size: clamp(0.95rem, 2.4vmin + 0.45rem, 1.2rem);
    padding-block: clamp(8px, 1.8vmin, 14px);
  }
  #login-screen .login-fan {
    height: clamp(3.4rem, 12vmin, 5.6rem);
    width: min(11rem, 40vmin);
  }
}

/* Short landscape phones (e.g. 854x480, 800x480): compact vertically,
   shrink padding/gaps first — never shrink text below readable size. */
@media (orientation: landscape) and (max-height: 560px) {
  #login-screen .login-fan {
    display: none;
  }
  #login-screen .login-title {
    font-size: clamp(1.5rem, 7.5vmin, 2.4rem);
  }
  #login-screen .login-sub {
    display: none;
  }
  #login-screen .login-welcome {
    font-size: clamp(0.8rem, 3vmin, 0.95rem);
  }
  #login-screen .login-panel {
    border-radius: 18px;
  }
  #login-screen .login-or {
    margin: 6px 0;
  }
}

/* ==========================================================================
   4. LOBBY — landscape game menu: top bar / center stage / side rail
   ========================================================================== */
@media (orientation: landscape) {
  #lobby-screen .lobby-topbar {
    top: calc(var(--sat) + clamp(6px, 1.8vmin, 18px));
    left: calc(var(--sal) + clamp(8px, 2vmin, 20px));
    right: calc(var(--sar) + clamp(8px, 2vmin, 20px));
  }
  #lobby-screen .lobby-center {
    padding:
      calc(var(--sat) + clamp(52px, 13vmin, 92px))
      calc(var(--sal) + clamp(70px, 17vmin, 130px))
      calc(var(--sab) + var(--ls-gap))
      calc(var(--sar) + clamp(70px, 17vmin, 130px));
    gap: var(--ls-gap);
  }
  #lobby-screen .lobby-hero h1 {
    font-size: var(--ls-title);
    margin-bottom: var(--ls-gap);
    line-height: 1.3;
    text-wrap: balance;
  }
  /* NOTE: the lobby card-fan keeps its desktop transform here (v8-style
     scale(1.5) + lfa/lfb/lfc keyframes untouched). The short-landscape
     breakpoint below only rescales it with a plain valid scale(). */
  #lobby-screen .lobby-actions {
    width: min(44vmin, 15rem);
    max-width: 88vw;
    gap: var(--ls-gap);
  }
  #lobby-screen .btn-bubble {
    font-size: var(--ls-btn-fs);
    padding: var(--ls-btn-py) var(--ls-btn-px);
    min-height: var(--ls-touch);
    min-width: 0;
    border-radius: clamp(14px, 2.6vmin, 22px);
  }
  #lobby-screen .btn-bubble .bi {
    width: 1.25em;
    height: 1.25em;
  }
  #lobby-screen .lobby-side {
    gap: var(--ls-gap);
  }
  #lobby-screen .side-btn-orange,
  #lobby-screen .side-btn {
    width: var(--ls-rail);
    height: var(--ls-rail);
    border-radius: clamp(12px, 2.6vmin, 18px);
    font-size: clamp(1.1rem, 4.5vmin, 1.5rem);
  }
  #lobby-screen #open-settings-button {
    width: var(--ls-rail);
    height: var(--ls-rail);
  }
  #lobby-screen #open-settings-button span {
    width: 55%;
    height: 55%;
  }
  #lobby-screen #open-profile-button,
  #lobby-screen #open-coins-shop-btn {
    min-height: var(--ls-touch);
    font-size: clamp(0.78rem, 2.4vmin + 0.35rem, 0.95rem);
  }
  #lobby-screen #pwa-install-btn {
    min-height: 40px;
    font-size: clamp(0.75rem, 2.2vmin + 0.35rem, 0.9rem);
  }
}

/* Short landscape: hero compacts (fan stays visible, rescaled), primary
   actions stack VERTICALLY with comfortable touch targets. */
@media (orientation: landscape) and (max-height: 560px) {
  /* SAME desktop fan elements/keyframes — only a smaller static scale so it
     sits behind the title without clipping or touching the buttons. */
  #lobby-screen .login-fan.lobby-fan {
    transform: translate(-50%, -60%) scale(0.85);
    opacity: 0.55;
  }
  #lobby-screen .lobby-hero h1 {
    font-size: clamp(1.4rem, 7vmin, 2.2rem);
    margin-bottom: 4px;
  }
  #lobby-screen .lobby-center {
    padding-top: calc(var(--sat) + clamp(46px, 12vmin, 70px));
    justify-content: center;
    /* Rail clearance matched to the actual rail (~62px max): the base
       70-130px gutters wasted ~20px per side on phones. Backgrounds stay
       full-bleed; only content insets shrink. Desktop base rule untouched. */
    padding-inline: calc(var(--sal) + clamp(56px, 13.5vmin, 84px)) calc(var(--sar) + clamp(56px, 13.5vmin, 84px));
  }
  #lobby-screen .lobby-actions {
    flex-direction: column;
    align-items: stretch;
    width: min(56vmin, 13rem);
    max-width: 80vw;
    gap: clamp(10px, 2.6vmin, 16px);
  }
  #lobby-screen .lobby-actions .btn-bubble {
    width: 100%;
    white-space: nowrap;
  }
  #lobby-screen .lobby-side {
    /* stays docked on the physical left, vertically centered (see base
       .lobby-side rule); only the rail buttons shrink via --ls-rail so the
       centered action column can never collide with it. */
    gap: clamp(6px, 1.8vmin, 12px);
  }

  /* Small landscape ONLY: compact floating inner panels (all BELOW original
     sizes; the backdrop itself still covers the full viewport). Originals
     undercut here: max-w-sm 384 / md 448 / lg 512 / 2xl 672, .pf-card 384px,
     .gd-card 336px, inline 88-90vh heights. */
  /* (ID-scoped so it beats Tailwind's runtime-injected p-2/p-4 utilities.) */
  #screens-wrapper .modal-backdrop {
    padding: 8px;
  }
  /* Shared compact shell: background visible on all sides + internal scroll.
     !important on max-height ONLY — several cards carry inline 88-90vh. */
  #ai-setup-modal > div,
  #online-menu-modal > div,
  #coins-shop-modal > div,
  #friends-modal > div,
  #friend-chat-modal > div,
  #leaderboard-modal > div,
  #create-room-modal > div,
  #about-modal > div,
  #contact-modal > div,
  #game-over-modal > div,
  #settings-modal > div,
  #settings-panel-modal .set-card,
  #rooms-list-modal > div,
  #profile-modal .pf-card,
  #rules-modal > div,
  #privacy-modal > div,
  #game-dialog .gd-card {
    max-height: 84vh !important;
    max-height: calc(84dvh - var(--sat) - var(--sab)) !important;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* Tier 1 — small dialogs (orig 336-448px) */
  #ai-setup-modal > div,
  #online-menu-modal > div,
  #coins-shop-modal > div,
  #friends-modal > div,
  #friend-chat-modal > div,
  #leaderboard-modal > div,
  #create-room-modal > div,
  #about-modal > div,
  #contact-modal > div,
  #game-over-modal > div {
    width: min(60vw, 380px);
    padding: 1rem;
  }
  /* Tier 2 — medium panels (orig 512px): shop, settings, rooms list */
  #settings-modal > div,
  #settings-panel-modal .set-card,
  #rooms-list-modal > div {
    width: min(66vw, 480px);
  }
  /* Tier 3 — profile card (orig 384px incl. hero + avatar stack) */
  #profile-modal .pf-card {
    width: min(60vw, 360px);
  }
  /* Tier 4 — wide reading panels (orig 672px): rules, privacy */
  #rules-modal > div,
  #privacy-modal > div {
    width: min(68vw, 560px);
  }
  /* Tier 5 — confirmation dialog (orig 336px) */
  #game-dialog .gd-card {
    width: min(70vw, 320px);
  }
  /* Trim decorative rhythm inside other tall cards (settings has its own
     compactness pass below). */
  #profile-modal .pf-sec {
    padding: 0.6rem;
  }
  #profile-modal .pf-hero {
    padding: 0.9rem 0.8rem 3rem;
  }
  #profile-modal .pf-body {
    gap: 0.65rem;
    padding: 5.6rem 0.8rem 0.9rem;
  }

  /* --- Settings compactness pass (short only): compress vertical rhythm so
     all three sections + save fit ~88dvh. Touch floors: opts/rows/save stay
     >=40px tall; only padding, gaps and decorative type shrink. --- */
  #settings-panel-modal .set-card {
    max-height: 90vh !important;
    max-height: calc(90dvh - var(--sat) - var(--sab)) !important;
  }
  #settings-panel-modal .set-head {
    padding: 0.5rem 0.8rem;
  }
  #settings-panel-modal .set-ico {
    width: 2rem;
    height: 2rem;
    font-size: 1.05rem;
  }
  #settings-panel-modal .set-title-wrap h2 {
    font-size: 1rem;
  }
  #settings-panel-modal .set-title-wrap p {
    font-size: 0.62rem;
  }
  #settings-panel-modal .set-body {
    gap: 0.4rem;
    padding: 0.55rem;
  }
  #settings-panel-modal .set-sec {
    padding: 0.45rem;
  }
  #settings-panel-modal .set-sec-t {
    font-size: 0.78rem;
    margin-bottom: 0.3rem;
  }
  #settings-panel-modal .set-seg {
    gap: 0.4rem;
  }
  #settings-panel-modal .set-opt {
    padding: 0.45rem 0.25rem;
    gap: 0.2rem;
    font-size: 0.72rem;
    min-height: 52px;
    justify-content: center;
  }
  #settings-panel-modal .set-opt .e svg {
    width: 1.15rem;
    height: 1.15rem;
  }
  #settings-panel-modal .set-row {
    padding: 0.5rem 0.7rem;
  }
  #settings-panel-modal .set-row + .set-row {
    margin-top: 0.35rem;
  }
  #settings-panel-modal .set-row-l {
    font-size: 0.76rem;
  }
  #settings-panel-modal .set-select {
    padding: 0.4rem 0.5rem;
    font-size: 0.7rem;
  }
  #settings-panel-modal .set-save {
    padding: 0.6rem;
    font-size: 0.92rem;
    min-height: 42px;
  }

  /* --- Online Play menu: compact + fits without scrolling (short only).
     Budget at 800x480 (403px avail): ~36 header + ~100 buttons + ~48 quick
     row + ~36 back + ~64 card padding = ~284px. No typography below readable,
     no button below 40px touch height. --- */
  #online-menu-modal > div {
    padding: 0.9rem 1rem;
  }
  #online-menu-modal .text-4xl {
    font-size: 1.6rem;
    line-height: 1.1;
    margin-bottom: 0;
  }
  #online-menu-modal h2 {
    font-size: 1.35rem;
    line-height: 1.25;
  }
  #online-menu-modal h2 + p {
    margin-bottom: 0.65rem;
  }
  #online-menu-modal .space-y-3 {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
  }
  #online-menu-modal .space-y-3 > * {
    margin-top: 0;
    margin-bottom: 0;
  }
  #online-menu-modal #btn-create-room,
  #online-menu-modal #btn-browse-rooms {
    min-height: 46px;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    font-size: 0.98rem;
  }
  #online-menu-modal .space-y-3 .flex.gap-2 {
    margin-top: 0;
    gap: 0.5rem;
  }
  #online-menu-modal #quick-room-code {
    min-height: 40px;
    font-size: 0.9rem;
  }
  #online-menu-modal #btn-join-quick-room {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    font-size: 0.9rem;
  }
  #online-menu-modal > div > button:last-child {
    margin-top: 0.7rem;
    font-size: 0.9rem;
    min-height: 32px;
  }

  /* --- Coins/currency shop: compress content, not just the frame --- */
  #coins-shop-modal > div {
    padding: 0.9rem 1rem;
  }
  #coins-shop-modal .flex.justify-between {
    margin-bottom: 0.5rem;
  }
  #coins-shop-modal h2 {
    font-size: 1.2rem;
  }
  #coins-shop-modal .coins-shop-close {
    font-size: 1.6rem;
    line-height: 1;
    min-width: 32px;
    min-height: 32px;
  }
  #coins-shop-modal .space-y-3 {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  #coins-shop-modal .space-y-3 > * {
    margin-top: 0;
    margin-bottom: 0;
  }
  #coins-shop-modal .coins-pack {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    min-height: 46px;
    font-size: 0.92rem;
  }
  #coins-shop-modal .gap-2.mb-5 {
    margin-bottom: 0.6rem;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
  }
  #coins-shop-modal .mb-4 {
    margin-bottom: 0.55rem;
  }
  /* Normal shop (#settings-modal): already good — left unchanged. */
}

/* Large landscape (tablets / desktop): cap growth, keep hierarchy */
@media (orientation: landscape) and (min-width: 1024px) {
  #login-screen .login-grid {
    width: min(920px, 92vw);
  }
  #lobby-screen .lobby-center {
    max-width: 1100px;
    margin-inline: auto;
    left: 0;
    right: 0;
  }
}

/* ==========================================================================
   5. MODALS / PANELS / DIALOGS
   --------------------------------------------------------------------------
   DESKTOP / LARGE SCREENS: intentionally NO rules here — every modal keeps
   its original size (Tailwind max-w-*, .pf-card 24rem, .gd-card 21rem,
   inline 88-90vh heights). A previous generic landscape cap enlarged some
   desktop modals, so it was removed. Small-screen sizing lives ONLY in the
   short-landscape block above.
   ========================================================================== */

/* ========================================================================== 
   6. GAMEPLAY — already vmin-fluid; only tame ultrawide stretch
   ========================================================================== */
/* The game is a landscape table, not a centred desktop card.  Tailwind's
   max-w-7xl on the markup capped it at 1280px, leaving large black rails on
   modern phones/tablets (and in Chrome's installed app). */
#game-screen,
#game-screen > div,
#game-screen #game-board-wrapper {
  width: 100%;
  max-width: none;
}

@media (min-aspect-ratio: 21 / 10) {
  #game-screen #game-board-wrapper {
    max-width: none;
  }
}

/* ==========================================================================
   7. Small portrait phones — keep the stacked layout inside the viewport
   (landscape-first does not mean portrait is broken).
   ========================================================================== */
@media (orientation: portrait) and (max-width: 640px) {
  #login-screen .login-grid {
    width: min(24rem, 94vw);
  }
  #lobby-screen .lobby-actions {
    width: min(15rem, 84vw);
  }
  #lobby-screen .lobby-hero h1 {
    font-size: clamp(1.8rem, 11vw, 2.8rem);
  }
}

/* ==========================================================================
   8. PHONE LANDSCAPE — compact "Game Setup" (Start) + Settings, no scrolling
   --------------------------------------------------------------------------
   Short landscape only (<=560px tall). Every selector is prefixed with "html " so it
   out-ranks the game's inline <style> blocks (which are parsed AFTER this file). Desktop / portrait are untouched.
   Strategy: use the free WIDTH instead of height — two columns side by side,
   so each dialog fits inside ~85-90% of a 360-480px tall viewport.
   Touch targets stay >=44px; only padding, gaps and decorative type shrink.
   ========================================================================== */
@media (orientation: landscape) and (max-height: 560px) {

  /* ---------- 8a. AI setup modal (opens from START) ---------- */
  html #ai-setup-modal > div {
    width: min(90vw, 640px);
    padding: 0.6rem 1rem 0.8rem;
    border-radius: 1.4rem;
    border-width: 3px;
  }
  html #ai-setup-modal h2 {
    font-size: 1.25rem;
    line-height: 1.2;
    margin-bottom: 0.45rem;
  }
  /* count + difficulty side by side */
  html #ai-setup-modal .space-y-5 {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 0.8rem;
    align-items: start;
  }
  html #ai-setup-modal .space-y-5 > * {
    margin: 0 !important;
    min-width: 0;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 1rem;
    padding: 0.5rem 0.6rem 0.6rem;
  }
  html #ai-setup-modal label {
    margin-bottom: 0.35rem;
    font-size: 0.82rem;
    text-align: center;
  }
  html #ai-setup-count-selector {
    gap: 0.5rem;
  }
  html #ai-setup-count-selector button {
    width: 2.9rem;
    height: 2.9rem;
    font-size: 1.3rem;
    border-radius: 0.9rem;
  }
  html #ai-setup-difficulty-selector {
    gap: 0.45rem;
  }
  html #ai-setup-difficulty-selector button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    min-height: 2.9rem;
    padding: 0.3rem 0.2rem;
    font-size: 0.8rem;
    line-height: 1.1;
    border-radius: 0.9rem;
  }
  html #ai-setup-difficulty-selector .dif-ico svg {
    width: 1.05rem;
    height: 1.05rem;
  }
  html #ai-setup-modal .mt-6 {
    margin-top: 0.65rem;
    gap: 0.7rem;
  }
  html #ai-setup-start-btn,
  html #ai-setup-cancel-btn {
    min-height: 44px;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    font-size: 1rem;
  }

  /* ---------- 8b. Settings panel: 2-column grid ---------- */
  html #settings-panel-modal .set-card {
    width: min(90vw, 720px);
  }
  html #settings-panel-modal .set-head {
    padding: 0.4rem 0.8rem;
  }
  html #settings-panel-modal .set-title-wrap p {
    display: none; /* subtitle is decorative — saves a line */
  }
  html #settings-panel-modal .set-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.45rem 0.6rem;
    padding: 0.5rem 0.65rem 0.6rem;
    align-content: start;
  }
  /* AI level + AI speed sit side by side */
  html #settings-panel-modal .set-sec {
    min-width: 0;
    padding: 0.4rem 0.5rem 0.5rem;
    border-radius: 14px;
  }
  html #settings-panel-modal .set-sec-t {
    font-size: 0.74rem;
    margin-bottom: 0.3rem;
  }
  html #settings-panel-modal .set-opt {
    min-height: 46px;
    padding: 0.3rem 0.2rem;
    gap: 0.1rem;
    font-size: 0.7rem;
  }
  html #settings-panel-modal .set-opt .e svg {
    width: 1.05rem;
    height: 1.05rem;
  }
  /* Sound section spans the full width; its two rows sit next to each other */
  html #settings-panel-modal .set-sec:nth-of-type(3) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.4rem 0.6rem;
    align-items: center;
  }
  html #settings-panel-modal .set-sec:nth-of-type(3) .set-sec-t {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }
  html #settings-panel-modal .set-sec:nth-of-type(3) .set-row + .set-row {
    margin-top: 0;
  }
  html #settings-panel-modal .set-row {
    min-width: 0;
    padding: 0.35rem 0.6rem;
    min-height: 44px;
  }
  html #settings-panel-modal .set-select {
    max-width: 55%;
    min-height: 34px;
  }
  html #settings-panel-modal .set-save {
    grid-column: 1 / -1;
    padding: 0.45rem;
    min-height: 44px;
    font-size: 0.9rem;
  }
}

/* ==========================================================================
   8c. Online-play menu — a SMALL dialog (asked for "smaller", not wider).
   Keeps the tricks that actually shrink it: no decorative icon or subtitle,
   the two room buttons side by side, tight paddings — but stays a narrow
   ~400px card instead of stretching across the screen.
   ========================================================================== */
@media (orientation: landscape) and (max-height: 560px) {
  html #online-menu-modal > div {
    width: min(86vw, 400px);
    max-width: none; /* Tailwind's max-w-sm (384px) would clamp it anyway */
    padding: 0.6rem 1rem 0.8rem;
    border-radius: 1.4rem;
    border-width: 3px;
  }
  html #online-menu-modal .text-4xl {
    display: none; /* decorative 🌐 — the bot menu has no icon either */
  }
  html #online-menu-modal h2 {
    font-size: 1.25rem;
    line-height: 1.2;
    margin-bottom: 0.15rem;
  }
  html #online-menu-modal h2 + p {
    display: none; /* decorative subtitle — same trick as Settings */
    margin-bottom: 0;
  }
  html #online-menu-modal .space-y-3 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.55rem;
  }
  html #online-menu-modal .space-y-3 > * {
    margin: 0;
    min-width: 0;
  }
  html #online-menu-modal .space-y-3 .flex.gap-2 {
    grid-column: 1 / -1;
    margin-top: 0;
    gap: 0.5rem;
  }
  html #online-menu-modal #btn-create-room,
  html #online-menu-modal #btn-browse-rooms {
    min-height: 46px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.95rem;
  }
  html #online-menu-modal #quick-room-code {
    min-height: 44px;
    font-size: 0.9rem;
  }
  html #online-menu-modal #btn-join-quick-room {
    width: 2.75rem;
    height: 2.75rem;
    min-width: 2.75rem;
    font-size: 0.95rem;
  }
  html #online-menu-modal > div > button:last-child {
    margin-top: 0.55rem;
    font-size: 0.88rem;
    min-height: 34px;
  }

  /* ---------- Profile editor: wide two-column layout ----------
     Base card was clamped to 360px on a 700-900px wide phone — a tall thin
     strip in the middle of the screen. Use the free width and lay the seven
     blocks out as a 2-column grid so the whole editor fits in ~2 screens
     instead of 4. Avatar / stats share row 1, pickers share rows 2-3, and
     the logout button spans both columns. */
  html #profile-modal .pf-card {
    width: min(86vw, 420px);
    max-width: none; /* base rule clamps at 24rem (384px) */
  }
  html #profile-modal .pf-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.55rem 0.65rem;
    align-content: start;
    padding: 5.6rem 0.9rem 0.9rem;
  }
  html #profile-modal .pf-body > * {
    min-width: 0;
    margin: 0;
  }
  html #profile-modal .pf-body > *:nth-child(1) { grid-column: 1; grid-row: 1; }
  html #profile-modal .pf-body > *:nth-child(2) { grid-column: 2; grid-row: 1; }
  html #profile-modal .pf-body > *:nth-child(3) { grid-column: 1; grid-row: 2; }
  html #profile-modal .pf-body > *:nth-child(4) { grid-column: 2; grid-row: 2; }
  html #profile-modal .pf-body > *:nth-child(5) { grid-column: 1; grid-row: 3; }
  html #profile-modal .pf-body > *:nth-child(6) { grid-column: 2; grid-row: 3; }
  html #profile-modal .pf-body > *:nth-child(7) { grid-column: 1 / -1; grid-row: 4; }
  html #profile-modal .pf-sec {
    padding: 0.55rem;
  }
  html #profile-modal .pf-title {
    font-size: 0.82rem;
    margin-bottom: 0.45rem;
  }
  html #profile-modal .pf-stats {
    gap: 0.45rem;
  }
  html #profile-modal #avatar-picker {
    gap: 0.45rem;
  }
  html #profile-modal .pf-chips {
    gap: 0.4rem;
  }
}

/* Very short phones (<=400px tall, e.g. 360-390px landscape) — squeeze a bit
   more, still no scroll. */
@media (orientation: landscape) and (max-height: 400px) {
  html #ai-setup-modal > div {
    padding: 0.4rem 0.8rem 0.55rem;
  }
  html #ai-setup-modal h2 {
    font-size: 1.05rem;
    margin-bottom: 0.3rem;
  }
  html #ai-setup-count-selector button {
    width: 2.6rem;
    height: 2.6rem;
  }
  html #ai-setup-difficulty-selector button {
    min-height: 2.6rem;
  }
  html #ai-setup-modal .mt-6 {
    margin-top: 0.45rem;
  }
  html #settings-panel-modal .set-head {
    padding: 0.3rem 0.7rem;
  }
  html #settings-panel-modal .set-ico {
    width: 1.7rem;
    height: 1.7rem;
    font-size: 0.9rem;
  }
  html #settings-panel-modal .set-body {
    gap: 0.35rem 0.5rem;
    padding: 0.4rem 0.55rem 0.5rem;
  }
  html #settings-panel-modal .set-sec-t {
    margin-bottom: 0.2rem;
  }
  html #settings-panel-modal .set-opt {
    min-height: 42px;
  }
}


/* ==========================================================================
   9. LOGIN — phone landscape: brand (animated cards + title) LEFT, compact
   panel RIGHT. Fits 360-560px tall screens without scrolling.
   ========================================================================== */
@media (orientation: landscape) and (max-height: 560px) {
  html #login-screen {
    overflow-y: auto !important;
    padding: 6px calc(var(--sar) + 10px) 6px calc(var(--sal) + 10px);
    align-items: center;
    justify-content: center;
  }
  html #login-screen .login-wrap.login-grid {
    zoom: 1 !important;            /* disable the portrait auto-fit zoom */
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: center;
    gap: clamp(10px, 3vw, 32px);
    width: min(860px, 96vw);
    max-width: min(860px, 96vw);
    margin: auto;
    padding: 0;
    max-height: none;
  }
  /* ---- brand column: cards back in, scaled to fit ---- */
  html #login-screen .login-brand {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
  }
  html #login-screen .login-fan {
    display: block;
    height: 3.9rem;
    width: 9rem;
    margin: 0 auto 0.5rem;
    transform: scale(0.78);
    transform-origin: 50% 100%;
  }
  html #login-screen .login-title {
    font-size: clamp(1.6rem, 9vmin, 2.7rem);
    line-height: 1.25;
    -webkit-text-stroke-width: 1.5px;
  }
  html #login-screen .login-sub {
    display: flex;
    margin-top: 0.45rem;
    font-size: 0.62rem;
    letter-spacing: 0.16em;
  }
  html #login-screen .login-sub::before,
  html #login-screen .login-sub::after {
    width: 1.4rem;
  }
  /* ---- panel column: compact ---- */
  html #login-screen .login-panel {
    padding: 0.95rem 1.1rem 1.05rem;
    border-radius: 20px;
    max-height: none;
    overflow: visible;
    min-width: 0;
    width: 100%;
    max-width: 19.5rem;       /* narrower, so the frame reads taller */
    justify-self: center;
  }
  html #login-screen .login-panel .corner {
    font-size: 0.9rem;
  }
  html #login-screen .login-panel .corner.tl { top: 0.4rem; left: 0.6rem; }
  html #login-screen .login-panel .corner.tr { top: 0.4rem; right: 0.6rem; }
  html #login-screen .login-panel .corner.bl { bottom: 0.4rem; left: 0.6rem; }
  html #login-screen .login-panel .corner.br { bottom: 0.4rem; right: 0.6rem; }
  html #login-screen .login-welcome {
    font-size: 0.88rem;
    margin-bottom: 0.65rem;
    padding: 0 1rem;
  }
  html #login-screen #player-name-input {
    min-height: 46px;
    padding: 0.4rem 0.6rem;
    font-size: 0.95rem;
    margin-bottom: 0.6rem;
  }
  html #login-screen #login-button {
    min-height: 48px;
    padding: 0.4rem;
    font-size: 1.1rem;
  }
  html #login-screen .login-or {
    margin: 0.65rem 0;
  }
  html #login-screen .login-or span.m {
    font-size: 0.7rem;
  }
  /* Google full-width; Facebook + Discord side by side */
  html #login-screen .login-panel .space-y-2\.5 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  html #login-screen .login-panel .space-y-2\.5 > * {
    margin: 0 !important;
  }
  html #login-screen .login-panel .space-y-2\.5 > button {
    min-height: 44px;
    padding: 0.3rem 0.5rem;
    font-size: 0.85rem;
    gap: 0.4rem;
  }
  html #login-screen .login-panel .space-y-2\.5 > button:first-child {
    grid-column: 1 / -1;
  }
  html #login-screen .login-panel .space-y-2\.5 svg {
    width: 1.1rem;
    height: 1.1rem;
  }
}

/* Very short landscape (<=400px tall): a touch tighter */
@media (orientation: landscape) and (max-height: 400px) {
  html #login-screen .login-fan {
    height: 3.1rem;
    transform: scale(0.62);
    margin-bottom: 0.3rem;
  }
  html #login-screen .login-sub { display: none; }
  html #login-screen .login-panel { padding: 0.8rem 1rem 0.9rem; }
  html #login-screen .login-welcome { margin-bottom: 0.5rem; }
  html #login-screen #player-name-input { margin-bottom: 0.5rem; min-height: 44px; }
  html #login-screen .login-or { margin: 0.5rem 0; }
}

/* ==========================================================================
   10. Phones in PORTRAIT: slightly tighter Settings + Game Setup dialogs
   ========================================================================== */
@media (orientation: portrait) and (max-width: 640px) {
  html #settings-panel-modal .set-card {
    max-height: calc(94dvh - var(--sat) - var(--sab)) !important;
  }
  html #settings-panel-modal .set-head { padding: 0.55rem 0.8rem; }
  html #settings-panel-modal .set-body { gap: 0.55rem; padding: 0.7rem; }
  html #settings-panel-modal .set-sec { padding: 0.6rem; }
  html #settings-panel-modal .set-sec-t { margin-bottom: 0.45rem; }
  html #settings-panel-modal .set-opt { padding: 0.5rem 0.25rem; min-height: 56px; }
  html #settings-panel-modal .set-row { padding: 0.5rem 0.7rem; }
  html #ai-setup-modal > div { padding: 1rem; }
  html #ai-setup-modal h2 { font-size: 1.6rem; margin-bottom: 0.8rem; }
  html #ai-setup-modal .space-y-5 > * + * { margin-top: 0.9rem; }
  html #ai-setup-modal .mt-6 { margin-top: 1rem; }
}


/* ==========================================================================
   11. GAME SCREEN — phone landscape: smaller opponent profile + table cards
   never leave their zone
   ========================================================================== */
@media (orientation: landscape) and (max-height: 560px) {
  /* opponent (top) + side players: smaller avatar and name */
  html #player-area-1 .player-info > div:first-child {
    width: 1.55rem;
    height: 1.55rem;
    margin-bottom: 0.1rem;
  }
  html #player-area-1 .player-info h2 {
    font-size: 0.6rem;
    line-height: 1.1;
  }
  html #player-area-2 > div > div:first-child > div:first-child,
  html #player-area-3 > div > div:first-child > div:first-child {
    width: 1.4rem;
    height: 1.4rem;
  }
  html #player-area-2 h2,
  html #player-area-3 h2 {
    font-size: 0.55rem;
  }
}

/* ==========================================================================
   11b. ONLINE WAITING ROOM (STAGE 3A) — decouple from card-table constraints
   --------------------------------------------------------------------------
   Root cause: the waiting room renders INSIDE the middle table cell
   (#table-cards = grid row 2 of 3) of #game-board-wrapper, which is
   overflow:hidden with 3 equal rows, and the cell itself is overflow:hidden
   + flex-centered. On short landscape screens the ~300px waiting content
   (status / count / pills / code / host Start button) is clipped into a
   ~150px cell with top AND bottom cut off (flex centering), so the Start
   button is unreachable.

   Fix (state class .waiting set by renderWaitingRoom(), removed by render()):
   - collapse the EMPTY top/bottom player rows so the middle cell takes the
     freed height (gameplay rows untouched — class never present in game);
   - let the waiting cell scroll internally + top-align (fixes flex-center
     clipping) instead of clipping;
   - compact vertical rhythm only (same colors/borders/animations).
   Desktop / portrait / gameplay table: zero changes (all row/rhythm rules
   below are scoped to short landscape + .waiting). */
@media (orientation: landscape) and (max-height: 560px) {
  /* empty side rows collapse; waiting cell takes the freed space */
  html #game-board-wrapper.waiting {
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  /* waiting content scrolls inside its cell instead of being clipped */
  html #game-board-wrapper.waiting #table-cards {
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    justify-content: flex-start;
    align-items: stretch;
    overscroll-behavior: contain;
  }
  html #game-board-wrapper.waiting #table-cards > div {
    width: 100%;
    margin: auto 0;
    padding-block: 6px;
  }
  /* compact rhythm (same style, smaller gaps/type) */
  html #game-board-wrapper.waiting #table-cards h2 {
    font-size: 1.35rem;
    line-height: 1.2;
    margin-bottom: 0.35rem;
  }
  html #game-board-wrapper.waiting #table-cards .mt-4 {
    margin-top: 0.5rem;
  }
  html #game-board-wrapper.waiting #table-cards .mt-6 {
    margin-top: 0.7rem;
  }
  html #game-board-wrapper.waiting #start-online-game-button {
    min-height: 46px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 1.05rem;
  }
}
/* Any size (STAGE 3A + 4B): waiting room decoupled from the card-table cell.
   The empty top/bottom player rows collapse so the middle cell takes the
   freed height; the cell scrolls internally with top alignment (this also
   fixes flex-centering top-clip on desktop, where the short-landscape compact
   rules above do not apply). Gameplay never carries .waiting, so the table
   clipping/measuring underneath is intact. Desktop keeps its original type
   sizes — only fit and scrollability change. */
html #game-board-wrapper.waiting {
  grid-template-rows: auto minmax(0, 1fr) auto;
}
html #game-board-wrapper.waiting #table-cards {
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
html #game-board-wrapper.waiting #table-cards > div {
  width: 100%;
  margin: auto 0;
}
/* Table zone: strictly clipped to its own box (all screen sizes) */
html #table-cards {
  min-height: 0;
  overflow: hidden;
  align-content: center;
  box-sizing: border-box;
}
html #table-cards .card:hover {
  transform: none;
}

/* ==========================================================================
   12. TOUCH PERFORMANCE (phones / tablets)
   --------------------------------------------------------------------------
   Two things make the shop and gameplay feel laggy on mobile GPUs:
   1) backdrop-filter blur over full-screen or scrolling layers — the single
      most expensive composite op on mid-range Android;
   2) :hover choreography — a tap fires :hover first, so every press plays a
      lift/transition before the click lands, which reads as input lag.
   Desktop (hover: hover) keeps every effect untouched.
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {
  /* --- 1. No blur: keep the translucent backgrounds, drop the filter --- */
  #game-dialog,
  #round-result-overlay,
  #capture-animation-overlay,
  #capture-animation-content,
  #status-message,
  #game-menu-dropdown,
  #quick-emoji-menu,
  #quick-chat-menu,
  #quick-emoji-button,
  #quick-chat-button,
  #game-settings-button,
  #game-menu-btn,
  .shop-shelf,
  .modal-backdrop,
  .backdrop-blur,
  .backdrop-blur-sm,
  .backdrop-blur-xl {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* These two carried inline/opaque-dark backgrounds tuned for a blurred
     layer — solidify them so they stay readable without the blur. */
  #status-message {
    background: rgba(0, 0, 0, 0.85) !important;
  }
  #capture-animation-overlay {
    background: rgba(0, 0, 0, 0.78) !important;
  }

  /* --- 2. No hover lifts on touch: instant :active feedback only --- */
  .card:hover,
  .shop-item-card:hover,
  .lobby-button:hover:not(:disabled),
  .btn-bubble:hover,
  .btn-gold:hover,
  .btn-green:hover,
  .btn-purple:hover,
  .btn-indigo:hover,
  .btn-ghost:hover,
  .lobby-btn-play:hover,
  .lobby-btn-online:hover,
  .lobby-card:hover,
  .panel-hover:hover,
  .profile-stat-card:hover,
  .profile-avatar-option:hover,
  .profile-btn-gold:hover,
  .profile-btn-logout:hover,
  .stat-box:hover,
  .pf-chip:hover,
  [class*="hover:scale"]:hover {
    transform: none !important;
  }

  /* --- 3. Shop: filters repaint on every scrolled frame --- */
  .shop-item-card.locked {
    filter: none !important;
    opacity: 0.66;
  }
  .shop-item-icon,
  .shop-canopy::after {
    filter: none !important;
  }
}