/* Oddly True — iPad layer (v011). Additive and iPad-only.
   Layout rules are scoped under html[data-device="ipad"] (set by the inline head flag only for an iPad UA, or for iPadOS
   desktop-mode Safari: Macintosh UA + navigator.maxTouchPoints > 1) AND a tablet-width media query with a coarse pointer.
   The orientation panel is separately iPad-flagged and does not alter the page layout.
   Phones (no iPad flag) and desktop browsers (no flag, maxTouchPoints 0) never match, so their rendering is unchanged.
   Nothing here edits an existing rule's source; it only adds higher-specificity overrides on iPad. */
@media (min-width:600px) and (max-width:1600px) and (any-pointer:coarse) {
  /* ---------- Shared scale: a touch larger type and gutters so phone-first layouts read at tablet distance ---------- */
  html[data-device="ipad"] { font-size:clamp(17px, calc(.9vw + .9vh), 21px); --ipcol:clamp(640px, 78vw, 860px); --gutter:32px; --top-h:64px; --tab-h:60px; --btn-h:60px; --btn-h-sm:50px; }
  html[data-device="ipad"] input, html[data-device="ipad"] select, html[data-device="ipad"] textarea { font-size:max(16px,1rem); } /* no focus zoom */

  /* ---------- Regular app: use the whole iPad screen instead of the 430px desktop phone frame ---------- */
  html[data-device="ipad"] body:not(.bs-body), html[data-device="ipad"]:has(body:not(.bs-body)) { background:var(--bg); }
  html[data-device="ipad"] body:not(.bs-body) .app { left:0; right:0; width:100%; transform:none; border-inline:0; }
  /* Content column: centred, wide enough to feel native on a tablet, never stretched edge to edge. */
  html[data-device="ipad"] body:not(.bs-body) .view { max-width:var(--ipcol); }
  html[data-device="ipad"] body:not(.bs-body) .btn { max-width:var(--ipcol); }
  html[data-device="ipad"] body:not(.bs-body) .main { padding-left:calc(var(--gutter) + var(--sal)); padding-right:calc(var(--gutter) + var(--sar)); }
  /* Bars span the screen (their blur/background), while their controls stay aligned with the content column. */
  html[data-device="ipad"] body:not(.bs-body) .topbar { --edge:max(24px, calc((100% - var(--ipcol) - 80px) / 2)); }
  html[data-device="ipad"] body:not(.bs-body) .tb-title { max-width:min(58vw,420px); }
  html[data-device="ipad"] body:not(.bs-body) .progress { padding-left:max(calc(var(--gutter) + var(--sal)), calc((100% - var(--ipcol)) / 2)); padding-right:max(calc(var(--gutter) + var(--sar)), calc((100% - var(--ipcol)) / 2)); }
  html[data-device="ipad"] body:not(.bs-body) .tabbar { padding-left:max(var(--sal), calc((100% - var(--ipcol)) / 2)); padding-right:max(var(--sar), calc((100% - var(--ipcol)) / 2)); }
  html[data-device="ipad"] body:not(.bs-body) .cta { padding-left:max(calc(var(--gutter) + var(--sal)), calc((100% - var(--ipcol)) / 2)); padding-right:max(calc(var(--gutter) + var(--sar)), calc((100% - var(--ipcol)) / 2)); }
  html[data-device="ipad"] body:not(.bs-body) .brand .mark { width:34px; height:34px; }
  html[data-device="ipad"] body:not(.bs-body) .wordmark { font-size:1.375rem; }
  html[data-device="ipad"] body:not(.bs-body) .icon-btn .ic { width:22px; height:22px; }
  html[data-device="ipad"] body:not(.bs-body) .tab .ic { width:26px; height:26px; }
  /* Home art and titles scale with the larger canvas. */
  html[data-device="ipad"] body:not(.bs-body) .home-title { font-size:2.25rem; }
  html[data-device="ipad"] body:not(.bs-body) .hero-name { font-size:1.75rem; }
  /* Game: roomier claim cards and prompt, same shape/colours/states as the phone. */
  html[data-device="ipad"] body:not(.bs-body) .play-prompt { font-size:2.75rem; }
  html[data-device="ipad"] body:not(.bs-body) .claims { gap:var(--s-4); margin-top:var(--s-8); }
  html[data-device="ipad"] body:not(.bs-body) .claim { min-height:clamp(88px, 11vh, 150px); padding:var(--s-5) var(--s-6); font-size:1.125rem; border-radius:var(--r-xl); }
  html[data-device="ipad"] body:not(.bs-body) .claim-badge { width:28px; height:28px; }
  html[data-device="ipad"] body:not(.bs-body) .fb-claim { padding:var(--s-5) var(--s-6); }
  html[data-device="ipad"] body:not(.bs-body) .fb-claim-text { font-size:1.0625rem; }
  html[data-device="ipad"] body:not(.bs-body) .play-hint { font-size:var(--fs-sm); }
  html[data-device="ipad"] body:not(.bs-body) .ring { --size:184px; }
  /* Sheets and dialogs: centred tablet-width cards, scrollable above the keyboard. */
  html[data-device="ipad"] body:not(.bs-body) .sheet-card { max-width:600px; margin-inline:auto; max-height:min(92%, calc(100dvh - 32px)); }
  html[data-device="ipad"] body:not(.bs-body) .join-card, html[data-device="ipad"] body:not(.bs-body) .rounds-card { max-width:560px; }
  html[data-device="ipad"] body:not(.bs-body) .lb-profile-dialog { max-width:560px; max-height:min(90dvh, calc(100dvh - 32px)); }
  html[data-device="ipad"] body:not(.bs-body) .bs-mode-dialog { max-width:560px; }
  html[data-device="ipad"] body:not(.bs-body) .lb-profile-dialog input { scroll-margin-bottom:40vh; }
  /* Splash: larger icon / button on the tablet canvas (layout and timing unchanged). */
  html[data-device="ipad"] body:not(.bs-body) .splash-hero { --hero:clamp(150px,19vh,220px); }
  html[data-device="ipad"] body:not(.bs-body) .splash-go-wrap { max-width:420px; }

  /* ---------- Big Screen on an iPad (as the display, or as a controller) ---------- */
  html[data-device="ipad"] .bs-body .controller-shell { width:min(var(--ipcol),100%); }
  html[data-device="ipad"] .bs-body .controller-title { font-size:40px; }
  html[data-device="ipad"] .bs-body .controller-shell .play-prompt { font-size:40px; }
  html[data-device="ipad"] .bs-body .answer-choice { min-height:clamp(84px, 9.5vh, 124px); padding:var(--s-5); }
  html[data-device="ipad"] .bs-body .answer-excerpt { font-size:18px; }
  html[data-device="ipad"] .bs-body .fb-claim-text { font-size:17px; }
  html[data-device="ipad"] .bs-body .join-shell .field input { min-height:56px; }
  html[data-device="ipad"] .bs-body .join-shell { justify-content:center; }
  /* v009 (t23u): iPad as a controller: larger lobby/standings/results type and rows so the tall screen is filled, not stretched. */
  html[data-device="ipad"] .bs-body .controller-shell.phase-lobby .controller-title { font-size:56px; }
  html[data-device="ipad"] .bs-body .controller-shell.phase-lobby .lobby-status-sub { font-size:20px; }
  html[data-device="ipad"] .bs-body .controller-shell.phase-lobby .identity-row { font-size:18px; }
  html[data-device="ipad"] .bs-body .mini-person { min-height:clamp(72px,8vh,96px); gap:var(--s-4); }
  html[data-device="ipad"] .bs-body .mini-person .avatar { width:44px; height:44px; font-size:20px; }
  html[data-device="ipad"] .bs-body .mini-person .person-name { font-size:21px; }
  html[data-device="ipad"] .bs-body .mini-person .slot-state { font-size:17px; }
  html[data-device="ipad"] .bs-body .controller-shell .meta-line { font-size:17px; }
  html[data-device="ipad"] .bs-body .controller-shell.phase-standings > .standing-title { font-size:80px; }
  html[data-device="ipad"] .bs-body .controller-shell.phase-standings .lead { font-size:20px; }
  html[data-device="ipad"] .bs-body .controller-shell .standings-table td { font-size:20px; padding:14px 8px; }
  html[data-device="ipad"] .bs-body .controller-shell .standings-table .player { min-height:clamp(64px,7.4vh,92px); gap:14px; }
  html[data-device="ipad"] .bs-body .controller-shell .standings-table .avatar { width:44px; height:44px; font-size:20px; }
  html[data-device="ipad"] .bs-body .controller-shell .standings-table .score b { font-size:30px; }
  html[data-device="ipad"] .bs-body .controller-shell .standings-table .person-name { font-size:21px; }
  html[data-device="ipad"] .bs-body .controller-shell .standings-table .rank { font-size:22px; }
  html[data-device="ipad"] .bs-body .controller-shell .standings-table th:first-child { width:56px; }
  html[data-device="ipad"] .bs-body .controller-shell .standings-table th:last-child { width:120px; }
  html[data-device="ipad"] .bs-body .results-shell .res-title { font-size:44px; }
  html[data-device="ipad"] .bs-body .results-shell .res-line, html[data-device="ipad"] .bs-body .results-shell .standing-line { font-size:19px; }
  html[data-device="ipad"] .bs-body .controller-shell .locked-title { font-size:28px; }
  html[data-device="ipad"] .bs-body .controller-shell.is-centered .lead, html[data-device="ipad"] .bs-body .controller-shell .watch-copy { font-size:18px; }
  /* v010 (t25u on iPad as a controller): the compact v008-style cards, scaled up for the tablet (bigger type and padding, never stretched to fill). */
  html[data-device="ipad"] .bs-body .controller-shell .play-prompt { font-size:46px; }
  html[data-device="ipad"] .bs-body .controller-shell > .phone-choices { margin-top:clamp(28px,4.4vh,56px); gap:18px; }
  html[data-device="ipad"] .bs-body .controller-shell .answer-choice { min-height:clamp(104px,10.5vh,140px); padding:22px 26px; gap:var(--s-4); }
  html[data-device="ipad"] .bs-body .controller-shell .answer-letter { width:38px; height:38px; font-size:16px; }
  html[data-device="ipad"] .bs-body .controller-shell .answer-excerpt { font-size:21px; }
  html[data-device="ipad"] .bs-body .controller-shell.phase-reveal > .fb-claims { margin-top:clamp(28px,4.4vh,56px); gap:18px; }
  html[data-device="ipad"] .bs-body .controller-shell.phase-reveal .fb-claim { padding:24px 26px; }
  html[data-device="ipad"] .bs-body .controller-shell.phase-reveal .fb-claim-text { font-size:21px; }
  html[data-device="ipad"] .bs-body .controller-shell.phase-reveal .fb-claim-explain { font-size:17px; margin-top:var(--s-2); }
  html[data-device="ipad"] .bs-body .controller-shell.phase-reveal .fb-tags, html[data-device="ipad"] .bs-body .controller-shell.phase-reveal .fb-tag { font-size:14px; }
  html[data-device="ipad"] .bs-body .controller-shell .fb-status { font-size:44px; }
  html[data-device="ipad"] .bs-body .controller-shell .fb-sub { font-size:18px; }
}
/* Portrait iPads: slightly narrower column so lines stay comfortable. Landscape keeps the wider column with more air. */
@media (min-width:600px) and (max-width:1600px) and (any-pointer:coarse) and (orientation:landscape) {
  html[data-device="ipad"] { --ipcol:clamp(680px, 62vw, 900px); }
  html[data-device="ipad"] body:not(.bs-body) .claims { margin-top:var(--s-6); }
  /* v009 (t23u): landscape question/feedback sit as one centred group too, instead of leaving the lower half empty. */
  html[data-device="ipad"] body:not(.bs-body) #view-play.active,
  html[data-device="ipad"] body:not(.bs-body) #view-feedback.active { justify-content:safe center; padding-bottom:4vh; }
}
/* Tall portrait iPads (t21u): the question and feedback stacks sit as one centred group instead of leaving the lower half empty. */
@media (min-width:600px) and (max-width:1600px) and (any-pointer:coarse) and (orientation:portrait) {
  html[data-device="ipad"] body:not(.bs-body) #view-play.active,
  html[data-device="ipad"] body:not(.bs-body) #view-feedback.active { justify-content:safe center; padding-bottom:var(--s-6); }
}

/* iPad-only advisory dismissal stays available in both directions. */
html[data-device="ipad"] .ipad-orientation-close { display:grid; place-items:center; flex:none; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--text-2); cursor:pointer; }
html[data-device="ipad"] .ipad-orientation-close svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
html[data-device="ipad"] .ipad-orientation-close:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; }

/* v015: both existing iPad orientation requirements use the v014 full-screen
   top-layer presentation. Only the icon, title and copy vary by direction. */
html.ipad-display-orientation-open,html.ipad-display-orientation-open body { overflow:hidden!important; }
html[data-device="ipad"] .ipad-display-orientation:not([open]) { display:none; }
html[data-device="ipad"] .ipad-display-orientation[open] { position:fixed; inset:0; display:grid; place-items:center; width:100%; height:100dvh; max-width:none; max-height:none; margin:0; padding:calc(88px + var(--sat)) max(32px,var(--sar)) calc(88px + var(--sab)) max(32px,var(--sal)); border:0; border-radius:0; background:var(--bg,#0c0b29); color:var(--text,#f6f6fc); overflow:auto; overscroll-behavior:contain; text-align:center; box-shadow:none; }
html[data-device="ipad"] .ipad-display-orientation::backdrop { background:var(--bg,#0c0b29); }
html[data-device="ipad"] .ipad-display-orientation-brand { position:absolute; top:calc(28px + var(--sat)); left:50%; transform:translateX(-50%); margin:0; font:600 24px/1.15 var(--font-display); letter-spacing:-.02em; white-space:nowrap; }
html[data-device="ipad"] .ipad-display-orientation-brand>span { text-decoration:underline; text-decoration-color:var(--fake); text-underline-offset:5px; text-decoration-thickness:2px; }
html[data-device="ipad"] .ipad-display-orientation-brand small { display:block; margin-top:10px; color:var(--text-3); font:700 10px/1.2 var(--font-ui); letter-spacing:.15em; text-transform:uppercase; }
html[data-device="ipad"] .ipad-display-orientation>.ipad-orientation-close { position:absolute; top:calc(20px + var(--sat)); right:max(20px,var(--sar)); }
html[data-device="ipad"] .ipad-display-orientation-content { display:flex; flex-direction:column; align-items:center; width:min(680px,100%); gap:24px; }
html[data-device="ipad"] .ipad-display-orientation-device { display:block; flex:none; width:clamp(132px,22vw,190px); height:auto; overflow:visible; fill:none; stroke:var(--accent-hi,#7df0de); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
html[data-device="ipad"] .ipad-display-orientation[data-orientation="landscape"] { --rotation-from:90deg; --rotation-to:-7deg; }
html[data-device="ipad"] .ipad-display-orientation[data-orientation="portrait"] { --rotation-from:0deg; --rotation-to:83deg; }
html[data-device="ipad"] .ipad-orientation-tablet { transform-box:view-box; transform-origin:64px 56px; transform:rotate(var(--rotation-to)); }
html[data-device="ipad"] .ipad-display-orientation[open] .ipad-orientation-tablet { animation:ipad-orientation-turn 4s ease-in-out infinite; }
/* A calm quarter-turn, a target hold, then a soft reset out of sight. */
@keyframes ipad-orientation-turn { 0%,10%{transform:rotate(var(--rotation-from));opacity:1}45%,72%{transform:rotate(var(--rotation-to));opacity:1}85%{transform:rotate(var(--rotation-to));opacity:0}86%{transform:rotate(var(--rotation-from));opacity:0}100%{transform:rotate(var(--rotation-from));opacity:1} }
@media(prefers-reduced-motion:reduce){html[data-device="ipad"] .ipad-display-orientation[open] .ipad-orientation-tablet{animation:none;transform:rotate(var(--rotation-to));opacity:1}}
html[data-device="ipad"] .ipad-display-orientation h1 { margin:0; font:600 clamp(36px,5.9vw,58px)/1.12 var(--font-display); letter-spacing:-.035em; text-wrap:balance; }
html[data-device="ipad"] .ipad-display-orientation-content>p { margin:0; color:var(--text-2); font:400 clamp(17px,2.5vw,24px)/1.65 var(--font-ui); text-wrap:balance; }
@media(max-height:600px){html[data-device="ipad"] .ipad-display-orientation[open]{padding-block:88px 32px}html[data-device="ipad"] .ipad-display-orientation-content{gap:18px}html[data-device="ipad"] .ipad-display-orientation-device{width:120px}html[data-device="ipad"] .ipad-display-orientation h1{font-size:36px}html[data-device="ipad"] .ipad-display-orientation-content>p{font-size:17px}}

/* Viewport-fit: keep regular portrait pages inside one full-width iPad canvas,
   with an aligned reading column and naturally sized content above the CTA. */
@media (min-width:600px) and (max-width:1600px) and (any-pointer:coarse) and (orientation:portrait) {
  html[data-device="ipad"] body:not(.bs-body) .app { max-width:none; height:var(--app-h,100dvh); }
  html[data-device="ipad"] body:not(.bs-body) .main { min-height:0; }
  html[data-device="ipad"] body:not(.bs-body) #view-play.active,
  html[data-device="ipad"] body:not(.bs-body) #view-feedback.active { gap:0; }
  html[data-device="ipad"] body:not(.bs-body) .claims { margin-top:clamp(24px,3vh,40px); }
  html[data-device="ipad"] body:not(.bs-body) .claim { min-height:clamp(88px,9.5vh,132px); }
  html[data-device="ipad"] body:not(.bs-body) .sheet-card { width:min(600px,calc(100% - 48px)); border-radius:var(--r-xl) var(--r-xl) 0 0; }
}

/* Home has space for one row of six metrics on a portrait iPad. Keep the
   pack cards at their normal size and leave clearance above the tab bar. */
@media (min-width:600px) and (max-width:1600px) and (any-pointer:coarse) {
  html[data-device="ipad"] #home-tiles {
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:8px;
  }
  html[data-device="ipad"] #home-tiles .tile { padding:12px 8px; }
  html[data-device="ipad"] #home-tiles .tile-l { font-size:12px; letter-spacing:.035em; }
  html[data-device="ipad"] #view-start .sec-head { margin-top:20px; margin-bottom:8px; }
  html[data-device="ipad"] #home-rail {
    flex:none;
    padding-block:4px 10px;
    scroll-padding-block:4px;
  }
  html[data-device="ipad"] #main:has(> #view-start.active) {
    bottom:calc(var(--tab-h) + var(--sab));
    padding-bottom:16px;
  }
  /* The pack picker opens from a card in the middle of the tablet canvas. */
  html[data-device="ipad"] .bs-mode-dialog {
    inset:0; margin:auto; height:fit-content; width:min(560px,calc(100% - 48px));
    padding:22px 26px 26px; border:1px solid var(--line-2); border-radius:24px;
  }
  html[data-device="ipad"] .bs-mode-grip { display:none; }
  html[data-device="ipad"] .bs-mode-options b { font-size:17px; }
  html[data-device="ipad"] .bs-mode-options small { font-size:14px; }
}
@media (min-width:600px) and (max-width:1600px) and (min-height:1160px) and (any-pointer:coarse) {
  html[data-device="ipad"] #home-tiles { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
  html[data-device="ipad"] #home-tiles .tile { padding:10px 14px; }
  html[data-device="ipad"] #home-tiles .tile-v { margin-top:6px; }
}

/* Align the first and last visible packs with Home's content column. */
@media (min-width:600px) and (max-width:1600px) and (any-pointer:coarse) {
  html[data-device="ipad"] #home-rail {
    --packs-visible:4;
    --pack-gap:var(--s-3);
    gap:var(--pack-gap);
    margin-inline:0;
    padding-inline:0;
    scroll-padding-inline:0;
    scroll-snap-type:x mandatory;
  }
  html[data-device="ipad"] #home-rail > .set-card {
    flex:0 0 calc((100% + var(--pack-gap)) / var(--packs-visible) - var(--pack-gap));
    min-width:0;
    scroll-snap-align:start;
  }
  html[data-device="ipad"] #view-start .sec-head:has(+ #home-rail) h2::after {
    content:"Swipe to browse";
    margin-left:10px;
    font-size:12px;
    font-weight:500;
    letter-spacing:normal;
    text-transform:none;
    color:var(--text-3);
  }
}
@media (min-width:600px) and (max-width:719px) and (any-pointer:coarse) {
  html[data-device="ipad"] #home-rail { --packs-visible:3; }
}
@media (min-width:1120px) and (max-width:1600px) and (any-pointer:coarse) {
  html[data-device="ipad"] #home-rail { --packs-visible:5; }
}

/* Share spare Home height between sections instead of leaving it below Practice.
   Natural card sizes and normal scrolling are retained when content is taller. */
@media (min-width:600px) and (max-width:1600px) and (any-pointer:coarse) {
  html[data-device="ipad"] body:not(.bs-body) #view-start.active {
    justify-content:space-between;
  }
}