/* Fixed-height game area: the first recent ball cannot increase the page height. */
@media (min-width:700px), (display-mode:fullscreen) {
  html, body { height:100%; }
  body { overflow:hidden; }
  .app-shell { height:100dvh; min-height:0; padding:clamp(10px,2vh,26px); display:grid; grid-template-rows:auto minmax(0,1fr); gap:12px; }
  .app-shell > header { width:100%; margin:0 auto; }
  .game, body.is-fullscreen .game, body.is-fullscreen.hide-fullscreen-controls .game { width:100%; height:100%; min-height:0; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto minmax(0,1fr) auto; gap:12px; }
  .mode-bar { padding:8px 24px; }
  .caller, body.is-fullscreen .caller { min-height:0; padding:clamp(12px,2.5vh,30px); grid-template-rows:auto minmax(0,1fr) auto; gap:8px; }
  .number-stage, body.is-fullscreen .number-stage { min-height:0; container-type:size; }
  .current-wrap { top:10%; left:3%; }
  .current-ball { width:min(26vw,70cqh,280px); min-width:0; }
  #currentNumber { font-size:min(14vw,48cqh,200px); }
  .bear { width:min(92%,115cqh); bottom:-3vh; }
  .call-label { font-size:clamp(1rem,2.3vh,1.55rem); white-space:nowrap; }
  .eyebrow { font-size:clamp(.65rem,1.5vh,.8rem); }
  .board-card { min-height:0; padding:clamp(10px,2vh,24px); }
  .board-head { margin-bottom:10px; }
  .board { min-height:0; grid-template-rows:repeat(8,minmax(0,1fr)); }
  .board-number { min-height:0; font-size:clamp(.8rem,2.8vh,1.6rem); }
  .recent-card { height:100px; min-height:0; padding:12px 18px; gap:12px; grid-template-columns:auto 1fr auto; }
  .recent-list { height:72px; align-items:center; min-width:0; }
  .recent-ball, body.is-fullscreen.hide-fullscreen-controls .recent-ball { width:min(5vw,66px); flex-shrink:0; font-size:clamp(1.15rem,2.3vw,2rem); }
  .recent-empty { text-align:center; }
  .controls { flex-wrap:nowrap; }
  @media(max-width:1100px) { .board-note { display:none; } .recent-title { font-size:.9rem; } .btn { padding:0 10px; } .key { display:none; } .board-head h2 { font-size:1.4rem; } }
  .btn { min-height:44px; }
  body.pattern-mode .current-ball { min-width:0; width:min(19vw,60cqh,230px); }
  body.pattern-mode #currentNumber { font-size:min(10vw,42cqh,150px); }
  .pattern-panel { inset:0 0 0 43%; min-height:0; }
  .pattern-grid { min-height:0; grid-template-rows:20px repeat(5,minmax(0,1fr)); }
  .pattern-cell { min-height:0; }
  .pattern-panel p { margin:5px 0; }
}
/* Fullscreen also fits compact/portrait displays; no game content is clipped. */
body.is-fullscreen { height:100dvh; min-height:0; overflow:hidden; }
body.is-fullscreen .app-shell { height:100dvh; min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr); padding:10px; gap:8px; }
body.is-fullscreen .app-shell > header { width:100%; margin:0 auto; }
@media(max-width:980px) {
  body.is-fullscreen .game { width:100%; height:100%; min-height:0; grid-template-columns:1fr 1fr; grid-template-rows:auto minmax(0,1fr) auto; gap:8px; }
  body.is-fullscreen .caller { min-height:0; padding:12px; grid-template-rows:auto minmax(0,1fr) auto; }
  body.is-fullscreen .number-stage { min-height:0; container-type:size; }
  body.is-fullscreen .current-ball { width:min(32vw,65cqh); min-width:0; }
  body.is-fullscreen #currentNumber { font-size:min(20vw,42cqh); }
  body.is-fullscreen .board-card { min-height:0; padding:10px; }
  body.is-fullscreen .board { min-height:0; grid-template-columns:repeat(5,minmax(0,1fr)); grid-template-rows:repeat(15,minmax(0,1fr)); gap:3px; padding:3px; }
  body.is-fullscreen .board-number { min-height:0; font-size:clamp(.65rem,2vh,1.3rem); }
  body.is-fullscreen .board-number:nth-child(71) { grid-column:auto; }
  body.is-fullscreen .board-note { display:none; }
  body.is-fullscreen .board-head { margin-bottom:7px; }
  body.is-fullscreen .board-title-group { gap:4px; flex-wrap:wrap; }
  body.is-fullscreen h2 { font-size:1.1rem; }
  body.is-fullscreen .counter { min-height:22px; padding:0 6px; font-size:.65rem; }
  body.is-fullscreen .recent-card { height:88px; padding:8px; gap:5px; grid-template-columns:auto 1fr auto; text-align:center; }
  body.is-fullscreen .recent-list { height:50px; align-items:center; gap:6px; }
  body.is-fullscreen .recent-ball, body.is-fullscreen.hide-fullscreen-controls .recent-ball { width:min(10vw,48px); font-size:1.1rem; }
  body.is-fullscreen .recent-title { font-size:.85rem; }
  body.is-fullscreen .controls { flex-wrap:nowrap; }
  body.is-fullscreen .btn { min-height:36px; padding:0 9px; font-size:.8rem; }
  body.is-fullscreen .pattern-panel { padding:8px; min-height:0; }
  body.is-fullscreen .pattern-grid { min-height:0; grid-template-rows:18px repeat(5,minmax(0,1fr)); }
  body.is-fullscreen .pattern-cell { min-height:0; }
  body.is-fullscreen .pattern-panel p { font-size:.6rem; margin:4px 0; }
  body.is-fullscreen .bear { width:min(100%,120cqh); bottom:0; }
  body.is-fullscreen .call-label { font-size:.9rem; }
}
@media(max-width:600px) and (orientation:portrait) {
  body.is-fullscreen .game { grid-template-columns:1fr; grid-template-rows:auto minmax(0,.7fr) minmax(0,1fr) auto; }
  body.is-fullscreen .board { grid-template-columns:repeat(10,minmax(0,1fr)); grid-template-rows:repeat(8,minmax(0,1fr)); }
  body.is-fullscreen .board-number:nth-child(71) { grid-column:3; }
  body.is-fullscreen .recent-card { height:96px; grid-template-columns:1fr; gap:2px; }
  body.is-fullscreen .recent-list { height:40px; }
  body.is-fullscreen .recent-title { font-size:.7rem; }
  body.is-fullscreen .recent-ball, body.is-fullscreen.hide-fullscreen-controls .recent-ball { width:34px; font-size:1rem; }
  body.is-fullscreen .current-ball { width:min(38vw,75cqh); }
  body.is-fullscreen #currentNumber { font-size:min(25vw,50cqh); }
  body.is-fullscreen .eyebrow { font-size:.55rem; }
  body.is-fullscreen:not(.hide-fullscreen-controls) .recent-card { height:120px; }
}
@media(max-width:980px) and (orientation:landscape) {
  body.is-fullscreen .board { grid-template-columns:repeat(10,minmax(0,1fr)); grid-template-rows:repeat(8,minmax(0,1fr)); }
  body.is-fullscreen .board-number:nth-child(71) { grid-column:3; }
}
@media (min-width:981px) and (max-height:620px) {
  .brand-mark { height:32px; width:32px; font-size:22px; }
  h1 { font-size:1.4rem; }
  .status-pill { font-size:.75rem; padding:7px 10px; }
  .header-fullscreen { min-height:32px; width:32px; }
  .recent-card { height:76px; }
  .recent-list { height:48px; }
  .recent-ball, body.is-fullscreen.hide-fullscreen-controls .recent-ball { width:44px; }
  .board-head h2 { font-size:1.4rem; }
  .board-note { display:none; }
  .pattern-panel p { display:none; }
}