/* =========================================================================
   GG chrome · iPad layout (1180×820 design size)
   ---------------------------------------------------------------------------
   Ported from mockup 73 (research/.../73_ingame_default_ipad_landscape.html).
   Token-only · no literal 6-digit hex.

   Every selector here is scoped under [data-layout="ipad"] so this stylesheet
   cannot affect desktop rendering. chrome/fit.js stamps the attribute on
   .viewport based on window width; the desktop branch leaves the attribute
   off so the existing desktop.css rules apply unchanged.

   One DOM, one board, two chrome subtrees: the desktop chrome (.opp-col +
   .right-col + .fs-toggle) hides on iPad; the iPad subtree (.bottom-strip
   with mirrored player-blocks + centered .pc-autoroll, and the floating
   .fab-menu) becomes visible. The board (#bw/#bg/#cv) is shared — sized
   here by height instead of width so it becomes the vertical hero.
   ========================================================================= */

/* ===== Stage · iPad design size ============================================
   The transform: scale(var(--fit)) on .stage still applies from viewport.css;
   fit.js feeds the iPad-specific --fit based on 1180×820. */
[data-layout="ipad"] .stage {
  width: 1180px;
  height: 820px;
}

/* ===== Composition · vertical column ====================================== */
[data-layout="ipad"] .vp-grid {
  flex-direction: column;
  height: 100%;
  padding: 8px 10px;
  gap: 6px;
}

/* Hide desktop chrome (.menu-bar lives inside .right-col so it goes with it). */
[data-layout="ipad"] .opp-col,
[data-layout="ipad"] .right-col,
[data-layout="ipad"] .fs-toggle {
  display: none;
}

/* ===== Board · vertical hero ==============================================
   Overrides the desktop .vp-grid > .board-area flex sizing (200px panels are
   gone) and the desktop #bw width: var(--board-w). Height-driven so the
   canvas absorbs all vertical space above the bottom strip. setupHiDPI +
   the #cv ResizeObserver (game/src/app.js) re-fit the backing store when
   the on-screen box changes, so it stays crisp across the layout switch. */
[data-layout="ipad"] .board-area {
  flex: 1;
  min-height: 0;
}
[data-layout="ipad"] #bw {
  width: auto;
  height: 100%;
  aspect-ratio: 674 / 498;
  max-width: 100%;
  margin: 0 auto;
}

/* ===== Bottom strip · both players mirrored + autoroll centered ============
   Single horizontal card. LEFT player block (opponent, normal direction) ·
   CENTER autoroll (visual divider, flex-shrink:0) · RIGHT player block (you,
   row-reverse so avatar lands at the outer edge). */
[data-layout="ipad"] .bottom-strip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  /* WEEK59 §4c — centre the row + content-width blocks so any L/R length
     difference splits as outer slack, not as asymmetric block sizes. Tighter
     padding + 6px gap keep the avatars from clipping at narrow iPad widths. */
  justify-content: center;
  background: var(--rd-surface);
  border: 1px solid var(--rd-line);
  border-radius: 6px;
  padding: 8px 8px;
  gap: 6px;
  min-height: 76px;
}
[data-layout="ipad"] .player-block {
  display: flex;
  align-items: center;
  /* WEEK59 §4c — content-width (no `flex: 1`) so identical L/R block widths
     produce exact symmetry around the centred .center unit. */
  gap: 6px;
  flex: 0 0 auto;
  min-width: 0;
}
[data-layout="ipad"] .player-block.right {
  flex-direction: row-reverse;
}

/* Identity · avatar + name + GG Rating */
[data-layout="ipad"] .ident {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  flex-shrink: 0;
  /* WEEK59 §4c — fixed identity box so a long opponent name ("Bobbie Blunder")
     cannot widen one side. Width + height locked to mockup 73. */
  width: 188px;
  height: 60px;
}
[data-layout="ipad"] .ident.right {
  flex-direction: row-reverse;
}
[data-layout="ipad"] .ident .pc-avatar {
  width: 56px;
  height: 56px;
  background: linear-gradient(180deg, var(--rd-avatar-grad-from), var(--rd-avatar-grad-to));
  border: 1px solid var(--rd-gold);
  border-radius: 5px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--rd-font-serif);
  font-size: 9px;
  color: var(--rd-cream-dim);
  text-align: center;
  line-height: 1.1;
  overflow: hidden;
  position: relative;
}
[data-layout="ipad"] .ident .pc-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
[data-layout="ipad"] .ident-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
[data-layout="ipad"] .ident.right .ident-text {
  align-items: flex-end;
}
[data-layout="ipad"] .ident .pc-name-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--rd-font-serif);
  font-style: italic;
  font-weight: 600;
  color: var(--rd-cream);
  font-size: 18px;
  line-height: 1;
}
[data-layout="ipad"] .ident .pc-flag {
  width: 20px;
  height: 14px;
  border: 1px solid var(--rd-overlay-light-edge);
  border-radius: 1px;
  flex-shrink: 0;
  display: inline-flex;
  overflow: hidden;
  line-height: 0;
}
[data-layout="ipad"] .ident .pc-flag svg {
  width: 100%;
  height: 100%;
  display: block;
}
[data-layout="ipad"] .ident .pc-rating {
  font-family: var(--rd-font-body);
  font-size: 10px;
  font-weight: 500;
  color: var(--rd-cream-dim);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
}
[data-layout="ipad"] .ident .pc-rating-value {
  font-family: var(--rd-font-serif);
  font-style: italic;
  font-weight: 600;
  color: var(--rd-cream);
  font-size: 13px;
  margin-left: 5px;
  font-variant-numeric: tabular-nums;
}

/* Stat row · clock / pip · inline (WEEK59 §4c: score moved into the fused
   .center unit beside .bs-mode, so the stat-row is just clock · pip now).
   DOM order is timer → pip; the right block mirrors via the rule below. */
[data-layout="ipad"] .stat-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
}
/* WEEK59 §4b · mirror the right block's stat-row so the same DOM order
   renders mirrored on the right — keeps both sides symmetric around the
   centred .center unit (mockup 73 line 179). */
[data-layout="ipad"] .player-block.right .stat-row {
  flex-direction: row-reverse;
}
[data-layout="ipad"] .stat-row .pc-pip {
  background: var(--rd-overlay-dark-soft);
  border: 1px solid var(--rd-line);
  border-radius: 5px;
  padding: 5px 10px;
  text-align: center;
  /* WEEK59 §4c — fixed pip box (uniform 60px height across the strip). */
  width: 62px;
  height: 60px;
}
[data-layout="ipad"] .stat-row .pc-pip .pp-value {
  font-family: var(--rd-font-body);
  color: var(--rd-cream);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
[data-layout="ipad"] .stat-row .pc-pip .pip-cap {
  font-family: var(--rd-font-body);
  font-size: 8px;
  font-weight: 600;
  color: var(--rd-cream-dim);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-top: 1px;
}

/* Clock · vertical stack (move on top, bank below) */
[data-layout="ipad"] .stat-row .pc-timer {
  background: var(--rd-overlay-dark-soft);
  border: 1px solid var(--rd-line);
  border-radius: 5px;
  padding: 4px 12px;
  text-align: center;
  /* WEEK59 §4c — fixed clock box (uniform 60px height across the strip). */
  width: 90px;
  height: 60px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
[data-layout="ipad"] .stat-row .pc-timer .pt-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  font-family: var(--rd-font-body);
  font-variant-numeric: tabular-nums;
}
[data-layout="ipad"] .stat-row .pc-timer .pt-move {
  color: var(--rd-cream);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.05;
}
[data-layout="ipad"] .stat-row .pc-timer .pt-bank {
  color: var(--rd-cream);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.05;
}
/* WEEK52 §4b T11 — number colour never changes; red is the block effect
   only (border + glow on .pc-timer.active.warning). .pt-move.idle moved
   to cream (was gold-dim) so the passive side's move matches the bank. */
[data-layout="ipad"] .stat-row .pc-timer .pt-move.idle {
  color: var(--rd-cream);
}
[data-layout="ipad"] .stat-row .pc-timer .pt-label {
  font-family: var(--rd-font-body);
  font-size: 8px;
  font-weight: 600;
  color: var(--rd-cream-dim);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-top: 1px;
}
[data-layout="ipad"] .stat-row .pc-timer.active {
  border-color: var(--rd-gold);
  box-shadow: 0 0 10px var(--rd-gold-glow), inset 0 0 0 1px var(--rd-line);
}
/* WEEK52 — bottom-strip last-5s warning accent. Matches desktop pattern. */
[data-layout="ipad"] .stat-row .pc-timer.active.warning {
  border-color: var(--rd-warn-red);
  box-shadow: 0 0 10px var(--rd-warn-red), inset 0 0 0 1px var(--rd-line);
  /* WEEK64 §4 T3 — subtle 1s opacity pulse during the bank≤20s window.
     Keyframe + reduced-motion override live in viewport.css (shared). */
  animation: ggClockPulse 1s ease-in-out infinite;
}
/* WEEK64 §4 T3 — iPad live colour cycle on the active side. Same state
   → class mapping as desktop, scoped to the iPad bottom-strip selector. */
[data-layout="ipad"] .stat-row .pc-timer .pt-move.move-active  { color: var(--rd-gold); }
[data-layout="ipad"] .stat-row .pc-timer .pt-move.move-spent   { color: var(--rd-cream); }
[data-layout="ipad"] .stat-row .pc-timer .pt-bank.bank-warning { color: var(--rd-warn-red-bright); }

/* ===== Fused centre · score · mode · score (WEEK59 §4c · mockup 73)
   One bordered box with internal hairline dividers and NO gaps — reads as a
   single unit. paintMode writes Match/to N (or Single/game · Match/to 1)
   and also paints the two .sc .ps-value scores bare from state.score. */
[data-layout="ipad"] .bottom-strip .center {
  flex-shrink: 0;
  align-self: stretch;
  display: flex;
  align-items: stretch;
  height: 60px;
  border: 1px solid var(--rd-line-strong);
  border-radius: 6px;
  overflow: hidden;
  background: var(--rd-overlay-dark-soft);
}
[data-layout="ipad"] .bottom-strip .center .sc {
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-layout="ipad"] .bottom-strip .center .sc .ps-value {
  font-family: var(--rd-font-body);
  font-weight: 700;
  color: var(--rd-cream);
  font-size: 32px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
[data-layout="ipad"] .bottom-strip .center .bs-mode {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-left: 1px solid var(--rd-line-strong);
  border-right: 1px solid var(--rd-line-strong);
}
[data-layout="ipad"] .bottom-strip .bs-mode-name {
  font-family: var(--rd-font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--rd-gold);
  line-height: 1;
  white-space: nowrap;
}
[data-layout="ipad"] .bottom-strip .bs-mode-sub {
  font-family: var(--rd-font-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--rd-cream-dim);
  margin-top: 4px;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* ===== Floating fab menu · top-right · vertical 5-icon stack ===============
   position:absolute inside .stage so it scales with --fit and anchors to the
   1180×820 design corner. The mb-sep is a thin hairline between fullscreen
   (system-level) and the four game icons. */
[data-layout="ipad"] .fab-menu {
  position: absolute;
  top: 8px;
  right: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--rd-dark-veil-strong);
  border: 1px solid var(--rd-line-strong);
  border-radius: 6px;
  padding: 3px;
  box-shadow: 0 6px 20px var(--rd-overlay-dark-shadow), inset 0 1px 0 var(--rd-overlay-light-inset);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 50;
}
[data-layout="ipad"] .fab-menu .mb-sep {
  height: 1px;
  background: var(--rd-line);
  margin: 1px 2px;
}
[data-layout="ipad"] .fab-menu .mb-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rd-cream-dim);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
/* WEEK75 · [hidden] guard for the iPad fab buttons. The scoped author
   `.fab-menu .mb-btn { display: flex }` rule above (specificity 0,3,1)
   beats desktop.css's global `.mb-btn[hidden] { display: none }` (0,2,0)
   and the UA `[hidden]{display:none}` (0,1,0). When controls.js sets
   `hidden = true` on the fab full-screen button in full-screen mode it
   would otherwise stay visible. Specificity 0,4,1 lands the hide. */
[data-layout="ipad"] .fab-menu .mb-btn[hidden] { display: none; }
[data-layout="ipad"] .fab-menu .mb-btn svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.75;
}
[data-layout="ipad"] .fab-menu .mb-btn:hover,
[data-layout="ipad"] .fab-menu .mb-btn:active {
  background: var(--rd-gold-hover-subtle);
  border-color: var(--rd-line-strong);
  color: var(--rd-cream);
}
[data-layout="ipad"] .fab-menu .mb-btn.danger:hover,
[data-layout="ipad"] .fab-menu .mb-btn.danger:active {
  background: var(--rd-red-tint);
  border-color: var(--rd-red-1);
  color: var(--rd-warn-red-bright);
}
/* WEEK59 T1 · fab toggle ON state (autoroll · gold). paintAutoroll adds .on
   on .mb-autoroll from state.autoroll. Selector is .fab-menu .mb-btn.on so
   future fab toggles (e.g. future settings sub-toggles) reuse the same look. */
[data-layout="ipad"] .fab-menu .mb-btn.on {
  background: var(--rd-gold-fill);
  border-color: var(--rd-gold);
  color: var(--rd-gold);
}

/* ===== WEEK59 T4 · bigger on-board action buttons on iPad ==================
   Desktop .board-btn (desktop.css ~363-394) scales via container queries on
   #bw (font-size: clamp(11px, 2.0cqw, 16px)). On iPad the board is
   height-driven and narrower → cqw is smaller → text reads tiny. Scoped
   bump (iPad-only): the unified dark+gold look from desktop.css is
   unchanged — only the type scale grows. */
[data-layout="ipad"] #bw .board-btn {
  font-size: clamp(13px, 2.8cqw, 22px);
  padding: clamp(9px, 2.6cqw, 18px) clamp(16px, 3.8cqw, 30px);
  min-height: clamp(42px, 9cqw, 60px);
}

/* WEEK66 §4b FIX-B3 — the WEEK65 [data-layout="ipad"] `.gc-modal-card.reactions`
   override block lived here and was DEAD for the same reason as the phone
   ones: fit.js stamps `data-layout` on `.viewport`, and the `#m-reactions`
   popup mounts as a sibling of `.viewport` so the descendant selector can
   never match it. iPad rendered the unscoped desktop 520px card all along.
   The responsive base rule + `@media (max-height: 480px)` block in
   desktop.css cover every tier without needing data-layout scoping. KEEPT
   below: all `.chat-balloon` / `.chat-balloons` rules — those nodes sit
   inside `.viewport` (inside `.board-area`), so the [data-layout] scope
   reaches them. */

/* ===== WEEK66 · over-board chat balloons (iPad) ===========================
   Mirrors the phone balloon layer: chrome/chat.js appends transient
   `.chat-balloon` (+ `.own`) into `.chat-balloons` over the board for
   inbound bot lines + the player's own sends. pointer-events:none so the
   layer never blocks moves on the canvas. CSS owns the fade transition —
   chat.js toggles `.fade-out`. Desktop never renders here (chat.js routes
   to the right-col panel when data-layout is not phone/ipad). */
[data-layout="ipad"] .chat-balloons {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px;
  z-index: 30;
  overflow: hidden;
}
[data-layout="ipad"] .chat-balloon {
  /* WEEK66 §4e FIX-E1 + 2026-06-21 iPad-only enlarge (Jay): the §4e iPad
     balloon (font 18 / pad 11-16 / max-width 72%) was still too small for
     the 1180-wide hero board. Bumped iPad ONLY (phone tiers untouched):
     font 18→34, padding 11/16→22/30, radius 14→16, max-width 72→82%.
     Img bumped below to 108×108. */
  pointer-events: none;
  max-width: 82%;
  padding: 22px 30px;
  border-radius: 16px;
  font-family: var(--rd-font-body);
  font-size: 34px;
  line-height: 1.35;
  color: var(--rd-cream);
  background: var(--rd-dark-veil-strong);
  border: 1px solid var(--rd-line-strong);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  word-wrap: break-word;
  align-self: flex-start;
  opacity: 1;
  transition: opacity 300ms ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
[data-layout="ipad"] .chat-balloon.own {
  align-self: flex-end;
  background: var(--rd-gold-fill);
  border-color: var(--rd-gold);
}
/* 2026-06-21 H2 — removed the orphaned `[data-layout="ipad"] .chat-balloon
   .from` + `.chat-balloon.own .from` rules. §4c stopped emitting the
   `.from` span on balloons (the avatar carries the sender identity) so
   these selectors were dead. Matches phone.css, which §4c already
   stripped. */
[data-layout="ipad"] .chat-balloon img {
  /* §4e FIX-E1 → 2026-06-21 iPad-only enlarge — emoticons 56→108 to match
     the 34px text font on the iPad balloon. Phone tiers untouched. */
  display: block;
  width: 108px;
  height: 108px;
  margin: 2px 0;
}
[data-layout="ipad"] .chat-balloon.fade-out {
  opacity: 0;
}

/* ===== WEEK66 §4e FIX-E4 · per-click chat-button BLOCK effect (iPad) ======
   Mirrors the phone.css block — chrome/chat.js signalBlocked(el) adds
   `.chat-blocked` to the clicked control for ~380ms when sending while a
   balloon is still up. Shared `@keyframes ggBlockShake` / `ggBlockGlyph`
   + reduced-motion overrides live in viewport.css; iPad just carries the
   scoped style rules. */
[data-layout="ipad"] .mb-btn,
[data-layout="ipad"] .emoticon-pick,
[data-layout="ipad"] .preset-pick {
  position: relative;
}
[data-layout="ipad"] .mb-btn.chat-blocked,
[data-layout="ipad"] .emoticon-pick.chat-blocked,
[data-layout="ipad"] .preset-pick.chat-blocked {
  animation: ggBlockShake 0.35s ease;
  border-color: var(--rd-warn-red) !important;
}
[data-layout="ipad"] .mb-btn.chat-blocked::after,
[data-layout="ipad"] .emoticon-pick.chat-blocked::after,
[data-layout="ipad"] .preset-pick.chat-blocked::after {
  content: "🚫";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 22px;
  line-height: 1;
  pointer-events: none;
  animation: ggBlockGlyph 0.35s ease forwards;
  z-index: 5;
}