/* DeNiro Card — native app styling. Applies ONLY when native-shell.js has
   confirmed a Capacitor build and set html.is-native. The public website is
   unaffected: the marketing home stays exactly as-is on the web. */

html.is-native, html.is-native body { height: 100%; }
html.is-native body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: radial-gradient(1200px 700px at 50% -12%, #1a2030, #0e0f13);
}

/* Hide every web-page tell (marketing header, hero, footer) — but NOT the native
   header we inject (also a <header>, distinguished by .dn-header). */
html.is-native > body > header:not(.dn-header),
html.is-native > body > .hero,
html.is-native > body > footer { display: none !important; }

/* ---------- native header ---------- */
.dn-header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(10px + var(--safe-area-inset-top, env(safe-area-inset-top))) 18px 10px;
  /* No panel behind the header — Jesse's audit: the tinted band read as a
     stray background rectangle behind the logo + Solo/Online pills. The
     header sits directly on the page background. */
  background: transparent;
}
/* Bigger "DeNiro Card" wordmark with a tighter space between the two words. */
.dn-brand { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 800; font-size: 24px; letter-spacing: .01em; word-spacing: -.14em; }
.dn-brand > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dn-brand b { color: var(--gold); }
.dn-seg { flex: 0 0 auto; }
/* Brand mark: current gold DC-rose (icons/dc-rose-gold.png, transparent) —
   replaces the old blue app-icon tile. */
.dn-mark { width: 46px; height: 46px; border-radius: 0;
  background: center/contain no-repeat url(icons/dc-rose-gold.png);
  box-shadow: none;
  flex: 0 0 auto; }

/* Large centered brand mark above the "18 classic games" label (kept tight so the
   catalog starts higher — less scroll to reach the games). */
.dn-hero-logo { display: block; width: min(150px, 38vw); height: auto;
  margin: 0 auto 10px; filter: drop-shadow(0 6px 20px rgba(0, 0, 0, .5)); }

/* mode segmented control (Solo / Online) */
.dn-seg { display: inline-flex; background: #191c25; border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.dn-seg-btn { min-height: 48px; border: 0; background: transparent; color: var(--muted); font-weight: 700; font-size: 16px;
  padding: 10px 18px; border-radius: 999px; cursor: pointer; letter-spacing: .01em; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; }
.dn-seg-btn.is-on { background: linear-gradient(180deg, var(--gold), var(--gold-deep)); color: #241c07;
  box-shadow: 0 1px 6px rgba(var(--dn-gold-rgb), .3); }
.dn-seg-btn.dn-seg-off { opacity: .55; }

/* ---------- scroll area + panes ---------- */
.dn-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.dn-scroll::-webkit-scrollbar { display: none; }
.dn-pane { padding: 14px 16px 18px; }   /* .dn-tabs owns the bottom safe-area inset */
.dn-pane[hidden] { display: none; }

/* the games grid becomes a tight native launcher: icon + name tiles only */
html.is-native .wrap { max-width: none; margin: 0; padding: 0; }
/* Bigger launcher tiles that fill the width (less dead space at the edges). */
html.is-native .grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; padding: 2px 0 0; }
html.is-native .game {
  min-height: 142px; padding: 18px 12px; gap: 8px;
  align-items: center; justify-content: center; text-align: center;
  border-radius: 18px;
  -webkit-tap-highlight-color: transparent;
}
html.is-native .game:hover { transform: none; border-color: var(--line); }  /* kill sticky web :hover after a tap */
html.is-native .game:active { transform: scale(.97); border-color: var(--gold-deep); }
/* These were flat pixels (48px / 16.5px), which is why the shipped iPad launcher measured
   a 56px icon and a 16.5px label at 507pt AND at 1366pt. They now use the same
   container-query clamps as the web tile, with the old phone numbers as the FLOOR so no
   phone shrinks — the value only moves once the tile is actually wider. (.suit's font-size
   is the emoji fallback for a missing .game-art; it must track the SVG.) */
html.is-native .game .suit { font-size: clamp(48px, 30cqw, 92px); line-height: 1; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
html.is-native .game h3 { font-size: clamp(16.5px, 10cqw, 30px); margin: 0; font-weight: 700; }
/* strip the marketing bits — description, "Play now →", the "Play" badge.
   Keep the "Soon" badge so a future non-live game still reads as unavailable. */
html.is-native .game p,
html.is-native .game .play,
html.is-native .game .badge.live { display: none !important; }
html.is-native .game .badge.soon { top: 10px; right: 10px; }

/* This label is not decoration — in Online mode it becomes "17 games · random real-player
   tables", which is the only statement of what the mode does. 14px reading floor. */
.dn-section-label { color: var(--gold); font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  font-size: 14px; margin: 2px 2px 12px; }

/* Compact phones must retain the physical viewport width. The former 46px
   mark + 24px wordmark + two large mode pills, and two fixed-minimum launcher
   columns, forced a 410px layout viewport on a 360px device. */
@media (max-width:400px) {
  .dn-header{
    gap:6px;
    padding:calc(7px + var(--safe-area-inset-top,env(safe-area-inset-top))) 10px 7px;
  }
  .dn-brand{gap:6px;font-size:18px}
  .dn-mark{width:36px;height:36px}
  .dn-seg{padding:2px}
  .dn-seg-btn{min-height:42px;padding:8px 11px;font-size:14px}
  .dn-pane{padding:10px 10px 14px}
  html.is-native .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  html.is-native .game{min-width:0;min-height:130px;padding:14px 8px}
  html.is-native .game h3{font-size:15px}
}
@media (max-width:340px) {
  .dn-brand>span:last-child{display:none}
}

/* ---------- TABLET TIER (native half) ----------
   Same three-part gate as the tablet block in styles.css, and the same reason: see the long
   note there. This file only has to undo the two things the shared layer cannot reach from
   outside — the native column count, and the native tile's height — because
   `html.is-native .grid`/`.game` are more specific than the shared `.grid`/`.game` AND this
   stylesheet loads second. Everything INSIDE the tile is already handled by the cqw clamps
   above; there are deliberately no tablet font sizes here. */
@media (min-width:700px) and (min-height:700px) and (pointer:coarse) {
  /* --dn-lobby-cols is declared on `.grid` by styles.css, so the step count has exactly one
     definition for both platforms; only the gap and the padding differ. */
  html.is-native .grid { grid-template-columns: repeat(var(--dn-lobby-cols, 4), minmax(0, 1fr)); gap: 16px; }
  /* The web home stretches its tiles with grid-auto-rows:1fr inside a flex column; the
     native pane just scrolls, so a native tile's height is content-driven and a 234px-wide
     tile came out 154px tall — a letterbox, not the square the design note claims. 5:4
     restores the proportion (and the tap area) without turning 18 games into 6 tall rows
     that a 1:1 ratio would produce on an iPad mini. */
  html.is-native .game { min-height: 0; aspect-ratio: 5 / 4; padding: 20px 14px; }
  .dn-pane { padding: 18px 20px 22px; }
  .dn-hero-logo { width: min(210px, 22vw); }
  .dn-section-label { font-size: 16px; margin: 4px 4px 16px; }
  /* The header and the tab bar were frozen at phone pixels for the same reason the tiles
     were: a 46px mark and 48px tabs read as a scaled-up phone on a 13-inch screen. */
  .dn-brand { font-size: 30px; gap: 12px; }
  .dn-mark { width: 58px; height: 58px; }
  .dn-seg-btn { min-height: 58px; font-size: 19px; padding: 12px 24px; }
  .dn-tab { min-height: 60px; font-size: 15px; }
  .dn-tab svg { width: 28px; height: 28px; }
  .dn-tab .dn-store-ico { font-size: 26px; line-height: 27px; }
  .dn-stats-grid { gap: 14px; }
  .dn-stat { padding: 22px 14px; }
  .dn-stat .num { font-size: 34px; }
  .dn-stat .lbl { font-size: 15px; }
  .dn-empty { font-size: 18px; }
  .dn-more-row { font-size: 18px; padding: 19px 6px; }
  .dn-more-row .r, .dn-more-action .r { font-size: 16px; }
  .dn-more-row a { margin: -19px -6px; padding: 19px 6px; }
  .dn-more-action { min-height: 60px; margin: -19px -6px; padding: 19px 6px; }
  .dn-more-soon { font-size: 15px; padding: 4px 12px; }
  .dn-copy { font-size: 14px; }
}

/* ---------- Stats pane ---------- */
.dn-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dn-stat { background: linear-gradient(180deg, var(--panel), #12141b); border: 1px solid var(--line);
  border-radius: 16px; padding: 16px 10px; text-align: center; }
.dn-stat .num { font-size: 26px; font-weight: 800; color: var(--gold); letter-spacing: -.02em; }
.dn-stat .lbl { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; }
.dn-empty { color: var(--muted); font-size: 15px; line-height: 1.6; text-align: center;
  padding: 40px 16px; }
.dn-empty .big { font-size: 34px; display: block; margin-bottom: 10px; }

/* ---------- More pane ---------- */
.dn-more-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 4px; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 15px; font-weight: 600; }
.dn-more-row .r { color: var(--muted); font-weight: 600; font-size: 13px; text-align: right; }
/* make link rows a full-height tap target, like a native list row */
.dn-more-row a { color: var(--gold); font-weight: 700; display: block; flex: 1; margin: -15px -4px; padding: 15px 4px; }
.dn-more-action { appearance: none; width: 100%; min-height: 52px; margin: -15px -4px; padding: 15px 4px;
  border: 0; background: transparent; color: var(--gold); font: inherit; font-weight: 700; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.dn-more-action:focus-visible { outline: 3px solid #7aa2ff; outline-offset: 3px; border-radius: 8px; }
.dn-more-action .r { color: var(--muted); font-weight: 600; font-size: 13px; text-align: right; }
.dn-more-soon { color: var(--muted); background: #191c25; border: 1px solid var(--line);
  border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 700; }
.dn-copy { color: var(--muted); opacity: .7; font-size: 12px; text-align: center; margin: 22px 0 4px; }

/* ---------- Online mode (html.dn-online) — owner spec 2026-07-23 ----------
   EXACT same layout as Solo, recolored: whole screen brand-red, black panels
   and buttons with gold accents (matches the website's online lobby). Extras:
   the tables row above the grid, Analytics/Privacy at the bottom, and NO
   bottom tab bar. Swipe left/right (or the header toggle) switches modes. */
html.is-native.dn-online body {
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(255, 255, 255, .05), transparent 55%),
    radial-gradient(1000px 640px at 50% 26%, #b3222d, #8c1a24 64%, #5f1017) #5f1017;
}
/* The bottom menu stays up in ONLINE mode too (owner revision 2026-07-23):
   Games / Store / Stats / More must remain reachable everywhere. */
html.is-native.dn-online .dn-tabs { background: rgba(40, 6, 12, .94); border-top-color: rgba(var(--dn-gold-rgb), .3); }
html.is-native.dn-online .game {
  background: linear-gradient(180deg, #17181d, #0a0b0e);
  border-color: rgba(var(--dn-gold-rgb), .45);
}
html.is-native.dn-online .dn-seg { background: rgba(10, 5, 7, .5); border-color: rgba(var(--dn-gold-rgb), .35); }
/* black buttons with gold accents (create-table etc.) */
html.is-native.dn-online .btn-gold {
  background: linear-gradient(180deg, #23242b, #0d0e12);
  color: var(--gold); border: 1px solid rgba(var(--dn-gold-rgb), .62);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}
/* …but the ACTIVE mode pill stays gold so the state reads instantly */
html.is-native.dn-online .dn-seg-btn.is-on {
  background: linear-gradient(180deg, var(--gold), var(--gold-deep)); color: #241c07;
}

/* A portrait WebView that cannot honor orientation.lock is rotated by the
   shared shell. This higher-specificity native rule must win over the base
   `html.is-native body{height:100dvh}` declaration above: the layout canvas is
   the pre-rotation landscape size (viewport height × viewport width), then the
   90° transform fills the physical screen exactly. */
html.is-native.dn-rot body {
  position:fixed;
  top:0;
  left:100vw;
  width:100vh;
  height:100vw;
  min-height:0;
}
html.is-native.dn-rot .table {
  width:100%;
  height:100%;
  min-height:0;
}

/* tables row (create/join) — sits above the grid, like the web online lobby */
.dn-online-friends { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; justify-content: center; margin: 0 0 14px; }
.dn-online-friends[hidden] { display: none; }
.dn-online-friends .shell-select { max-width: 46vw; }
.dn-online-friends input { width: 92px; min-height: 44px; text-transform: uppercase; text-align: center; font-weight: 800;
  letter-spacing: .14em; padding: 10px; border-radius: 10px; border: 1px solid rgba(var(--dn-gold-rgb), .4);
  background: #101216; color: var(--text); }

/* ---------- bottom tab bar ---------- */
.dn-tabs {
  flex: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 7px 18px calc(7px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom)));
  background: rgba(12, 13, 18, .94);
  border-top: 1px solid var(--line);
  -webkit-backdrop-filter: saturate(1.2) blur(14px);
  backdrop-filter: saturate(1.2) blur(14px);
}
.dn-tab { min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 6px 4px; border: 0; background: transparent; color: var(--muted); font-size: 12px; font-weight: 650;
  cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dn-tab .dn-store-ico { font-size: 21px; line-height: 22px; }
.dn-tab svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dn-tab.is-active { color: var(--gold); }
.dn-tab:active { transform: scale(.96); }

/* ---------------------------------------------------------------------------
   Native text-selection lockdown.

   In the packaged app a long-press on ordinary chrome — a balance, a button
   label, a heading — used to raise iOS's blue selection handles and the
   Copy/Look Up callout, which reads as a broken web page inside a game. Web
   visitors are unaffected: this is gated on html.is-native, so marketing copy
   on the site stays selectable and copyable.

   Real text entry is allowlisted below. Locking selection on an <input> also
   breaks caret placement and paste, so every field the customer actually types
   into — including the account/password sheet — is explicitly exempted.
   --------------------------------------------------------------------------- */
html.is-native, html.is-native body, html.is-native body * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
html.is-native input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
html.is-native textarea,
html.is-native select,
html.is-native [contenteditable="true"],
html.is-native [contenteditable="true"] *,
html.is-native .allow-select,
html.is-native .allow-select * {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}