/* Desktop hover layer and large-screen sizing (roadmap 3.9, agent:ui-desktop).
   Everything in this file is desktop-only: it must not change touch layout.
   Board camera / board tooltip / board sizing live in styles/board.css (agent:ui-board). */

/* ------------------------------------------------------------------ */
/* 1. Hover states (fine pointers only). Lift with transform, border to */
/*    --accent. Tokens only, no theme colors. Animations: transform and */
/*    opacity only.                                                     */
/* ------------------------------------------------------------------ */
@media (hover: hover) and (pointer: fine) {
  .btn, .card-face, .topbar-chip, .topbar-btn, .choice-row, .seg,
  .rivals-sheet .rivals-tab, .me-sheet .me-tab, .primary-action,
  .sheet-close, .mini-card-chip, .faction-pick {
    transition: transform .15s var(--ease), border-color .15s var(--ease), opacity .15s var(--ease);
  }

  button:disabled { cursor: not-allowed; }

  .btn:not(:disabled):hover {
    border-color: var(--accent);
    transform: translateY(-1px);
  }
  .primary-action:not(:disabled):hover {
    border-color: var(--ink);
    transform: translateY(-1px);
  }
  /* Generic card lift. The selected transform is restored by the rule below. */
  .card-face:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
  }
  .card-face.is-selected:hover {
    border-color: var(--ink);
    transform: translateY(-10px);
  }
  .topbar-chip:hover { border-color: var(--accent); transform: translateY(-1px); }
  .topbar-round-phase:hover { border-color: var(--line); transform: none; }
  .topbar-btn:not(:disabled):hover { border-color: var(--accent); transform: translateY(-1px); }
  .rivals-sheet .rivals-tab:hover,
  .me-sheet .me-tab:hover { border-color: var(--accent); transform: translateY(-1px); }
  .choice-row:not(:disabled):hover { border-color: var(--accent); transform: translateX(2px); }
  .seg:not(:disabled):hover { border-color: var(--accent); }
  .faction-pick:hover { border-color: var(--accent); }
  .sheet-close:hover { color: var(--ink); transform: scale(1.1); }
  .screens-carousel-card:hover { border-color: var(--accent); transform: translateY(-2px); }
  .screens-skin-card:hover, .screens-setting-row:hover { border-color: var(--accent); }
  .screens-continue-card:hover { border-color: var(--ink); }

  /* Hand dock buttons: accent border on hover (dock cards lift via hand.css). */
  .hand-dock .dock-piles-btn:hover,
  .hand-dock .dock-schemes-btn:hover,
  .hand-dock .collapsed-stat-btn:hover,
  .hand-dock .mini-card-chip:hover { border-color: var(--accent); transform: translateY(-1px); }
  .hand-dock .mini-card-chip.is-selected:hover { border-color: var(--accent); transform: none; }
  .hand-dock .hand-card-slot:hover { z-index: 25; }

  /* Market rows, tabs, sheet rows. */
  .market-sheet .market-schemes-toggle:hover { color: var(--ink); }
  .market-sheet .market-detail-art-wrap:hover { border-color: var(--accent); }
  .log-sheet .log-entry:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }

  /* -------------------------------------------------------------- */
  /* 4. Scrolling: thin scrollbars; horizontal strips must not trap */
  /*    the vertical wheel (it chains to the sheet body).           */
  /* -------------------------------------------------------------- */
  .sheet-body { scrollbar-width: thin; }
  .sheet-body::-webkit-scrollbar { width: 10px; }
  .sheet-body::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--ink) 22%, transparent);
    border-radius: 99px;
    border: 2px solid transparent;
    background-clip: content-box;
  }
  .market-sheet .market-cards { overscroll-behavior: auto; }
  .hand-dock .schemes-tray-body,
  .hand-dock .collapsed-cards-strip,
  .market-sheet .market-reserves-track,
  .rivals-sheet .rival-cards-row,
  .me-sheet .me-tabs,
  .rivals-sheet .rivals-tabs,
  .screens-leader-carousel { overscroll-behavior-y: auto; overscroll-behavior-x: contain; }
}

/* ------------------------------------------------------------------ */
/* 2. Card hover preview (rendered by src/ui/HoverPreview.js).         */
/*    Fixed, next to the cursor target, never interactive.             */
/* ------------------------------------------------------------------ */
.hover-preview {
  position: fixed;
  width: 264px;
  max-height: calc(100vh - 16px);
  overflow: hidden;
  z-index: 300;
  pointer-events: none;
  background: var(--surface);
  border: 1.5px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: 0 12px 36px rgb(0 0 0 / .6);
  animation: hover-preview-in .14s var(--ease);
}
@keyframes hover-preview-in { from { opacity: 0; } }
.hover-preview-card { display: flex; flex-direction: column; }
.hover-preview-art {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--surface-2);
  border-radius: var(--radius) var(--radius) 0 0;
}
.hover-preview-art > img { width: 100%; height: 100%; object-fit: cover; }
.hover-preview-cost {
  position: absolute; top: 6px; right: 6px;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px 2px 4px; border-radius: 99px;
  background: rgb(0 0 0 / .7); font-weight: 800; font-size: 13px;
}
.hover-preview-access {
  position: absolute; top: 6px; left: 6px; display: flex; gap: 3px;
  padding: 2px 5px; border-radius: 99px; background: rgb(0 0 0 / .55);
}
.hover-preview-head {
  display: flex; flex-direction: column; gap: 1px;
  padding: 8px 12px 4px;
}
.hover-preview-name {
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hover-preview-type {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted);
}
.hover-preview-rules {
  display: flex; flex-direction: column; gap: 5px;
  padding: 4px 12px 10px; font-size: 12.5px; line-height: 1.4;
}
.hover-preview-rules p { margin: 0; }
.hover-preview-row {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  padding: 4px 7px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}

/* ------------------------------------------------------------------ */
/* 3. Large screens (>= 1200x760): md dock cards (CSS scale, no JS      */
/*    change), larger top bar + sheet type, sheets leave board visible, */
/*    market uses the width.                                           */
/* ------------------------------------------------------------------ */
@media (min-width: 1200px) and (min-height: 760px) {
  :root { --topbar-h: 52px; }

  .topbar { font-size: 15px; }
  .topbar-chip { min-height: 40px; font-size: 14px; }
  .topbar-btn { min-height: 40px; min-width: 40px; }
  .topbar-phase { font-size: 13px; }

  .sheet { width: 460px; }
  .sheet-wide { width: min(880px, 62vw); }
  .sheet-host .sheet-head h2 { font-size: 19px; }
  .sheet-host .sheet-body { font-size: 15px; }

  .hand-dock .card-sm { width: 120px; }
  .hand-dock .card-name { font-size: 12px; padding: 4px 8px 5px; }
  .hand-dock .hand-cards { min-height: 128px; }
  .hand-dock.is-open { min-height: 158px; }

  /* Market shop layout lives in styles/market.css (same breakpoint); the
     floating hover preview is suppressed inside the market by
     src/ui/HoverPreview.js because the detail column replaces it. */

  .primary-action { min-height: 56px; font-size: 16px; }
  .btn { min-height: 46px; }
  .choice-row { font-size: 15px; }
  .screens-brand-title { font-size: 40px; }
}