/* Web-only layout. No native project or game/timer state is changed on rotation. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: hidden; }
html.help-scroll-locked { overflow: hidden; overscroll-behavior: none; }
body.help-scroll-locked { position: fixed; top: var(--help-scroll-top); left: 0; width: 100%; overflow: hidden; }
#help-dialog { overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
#help-dialog::backdrop { touch-action: none; }
#avatar-dialog { overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
#avatar-dialog::backdrop { touch-action: none; }
.full-game { width: 100%; }
/* Count only players still in the match; preserve the requested grid in both orientations. */
#loss-players { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#loss-players[data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* A one-shot local burst, never a full-screen flash or an input-blocking overlay. */
#round-burst { position: fixed; inset: 0; z-index: 40; overflow: hidden; pointer-events: none; }
.burst-origin { position: absolute; left: var(--burst-x); top: var(--burst-y); --burst-radius: min(130px, 28vmin); }
.burst-ring { position: absolute; width: 160px; height: 160px; left: -80px; top: -80px; border: 6px solid #ffd579; border-radius: 50%; box-shadow: 0 0 25px #ff8a4470; animation: potato-burst-ring .6s ease-out both; }
.burst-label { position: absolute; left: 0; top: 0; color: #ffe29c; font-size: clamp(44px, 10vmin, 82px); font-weight: 1000; font-style: italic; text-shadow: 0 4px 0 #792615; animation: potato-burst-label .6s ease-out both; }
.burst-origin i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 3px; background: #ffad50; animation: potato-burst-spark .6s ease-out both; }
/* The round stays visible for one second; its own BUM is the only label. */
.burst-label { display: none; }
@keyframes potato-burst-ring { from { opacity: .85; transform: scale(.25); } to { opacity: 0; transform: scale(1.8); } }
@keyframes potato-burst-label { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.6) rotate(-9deg); } 20%, 55% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-9deg); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.12) rotate(-9deg); } }
@keyframes potato-burst-spark { from { opacity: 1; transform: translate(0, 0) scale(.5); } to { opacity: 0; transform: translate(calc(var(--dx) * var(--burst-radius)), calc(var(--dy) * var(--burst-radius))) rotate(100deg) scale(.3); } }
@media (prefers-reduced-motion: reduce) {
  #round-burst { display: none; }
}
:root { --primary-button-height: 76px; }
@media (max-height: 760px) {
  :root { --primary-button-height: 66px; }
}
.setup-start, #round-button { height: var(--primary-button-height); min-height: var(--primary-button-height); flex-shrink: 0; }
.topbar { min-height: 44px; flex-shrink: 0; }
.wordmark { font-size: 15px; }
.avatar-option { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1; }
.avatar-option:disabled { opacity: 1; background: #35191c; border-color: #a45a4128; }
.avatar-option:disabled .avatar-glyph { opacity: .28; }
body[data-view="setup"] .topbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; container-type: inline-size; container-name: game-header; }
.patronite-link { width: 140px; padding: 6px 10px; justify-self: start; margin-left: clamp(0px, calc((100vw - 440px) * .28), 220px); text-decoration: none; }
.patronite-link img { display: block; width: 100%; height: auto; pointer-events: none; }
.patronite-link .patronite-heart { display: none; color: var(--yellow); }
.patronite-link:hover { background: #80362640; border-color: #e6a27580; }
body:not([data-view="setup"]) .patronite-link { display: none; }
/* Keep the game wordmark unchanged; compact only the support button when
   the header cannot comfortably fit both full wordmarks and the controls. */
@container game-header (min-width: 331px) and (max-width: 370px) {
  .patronite-link { width: min(140px, calc(100cqw - 216px)); padding-inline: 8px; }
}
@container game-header (max-width: 330px) {
  .patronite-link { width: 44px; padding: 0; margin-left: 0; justify-self: center; }
  .patronite-link img { display: none; }
  .patronite-link .patronite-heart { display: block; }
}
.setup-panel, .setup-columns > *, .question-side, .timer-side { min-width: 0; }
.remove-player { width: 44px; min-height: 44px; }
.player-row { grid-template-columns: 48px minmax(0, 1fr) 44px; }
.install-panel { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px 16px; margin: 28px 0 4px; padding: 20px; border: 1px solid var(--line); border-radius: 22px; background: #30111580; }
.install-panel img { border-radius: 12px; }
.install-panel h2 { font-size: 18px; line-height: 1.3; }
.install-panel p { font-size: 14px; line-height: 1.5; color: var(--muted); margin: 4px 0 0; }
.install-panel .install-status { grid-column: 2 / -1; margin: 0; font-size: 12px; }
#install-dialog { overscroll-behavior: contain; }
.install-guide { border-top: 1px solid var(--line); padding-block: 6px; }
.install-guide summary { cursor: pointer; padding-block: 14px; font-size: 16px; font-weight: 700; color: var(--cream); }
.install-guide summary:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
body[data-view="match"] .install-panel { display: none; }
html:has(body[data-view="match"]) { height: 100%; overflow: hidden; }
body[data-view="match"] { height: 100%; overflow: hidden; overscroll-behavior-y: none; }
body[data-view="match"] .full-game { height: 100vh; height: 100dvh; min-height: 0; padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.scoreboard { flex-shrink: 0; min-width: 0; overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x; scrollbar-width: none; }
.scoreboard::-webkit-scrollbar { display: none; }
#match-error { position: fixed; bottom: max(12px, env(safe-area-inset-bottom)); left: 20px; right: 20px; z-index: 10; padding: 10px; border-radius: 12px; background: var(--background); }

/* Normal-height tablets and computers. The game itself never stretches the page. */
@media (min-height: 561px) {
  .match-view { min-height: 0; padding-top: 10px; }
  .match-bar { flex-shrink: 0; margin-bottom: 8px; }
  .round-view { min-height: 0; padding: 8px 0; }
  .question { font-size: clamp(28px, 3.4vw, 44px); }
  .timer-side .dial { width: min(32vw, 34dvh, 350px); height: min(32vw, 34dvh, 350px); margin-bottom: 18px; }
  .timer-side .potato { font-size: min(19vw, 21dvh, 210px); }
  .round-button { min-height: 56px; }
  .resolution-view { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 4px 12px; }
  .resolution-icon { font-size: 42px; margin-bottom: 6px; }
  .resolution-note { margin: 10px 0 14px; }
  .loss-players { margin: 12px 0 16px; gap: 8px; }
  .loss-player { padding: 8px; min-height: 64px; }
  .loss-player[aria-pressed="true"] { padding: 7px; }
  .loss-avatar { font-size: 28px; }
  .resolution-view .start-button { min-height: 52px; }
  .result-avatar { font-size: 70px; margin-bottom: 12px; }
  .result-hearts { margin-bottom: 16px; }
}

/* Wide screens keep each button attached to its own content. The question
   reserves three lines and its center aligns with the potato above Start. */
@media (orientation: landscape) and (min-width: 568px) and (min-height: 561px) {
  /* Let overflowing cards leave at the viewport edge, not at the inset
     content column. Inner padding preserves the first/last card alignment. */
  body[data-view="match"] .scoreboard {
    --score-gutter: 32px;
    --score-outer: max(0px, calc((100vw - 1060px) / 2));
    --score-left: calc(var(--score-outer) + max(var(--score-gutter), env(safe-area-inset-left)));
    --score-right: calc(var(--score-outer) + max(var(--score-gutter), env(safe-area-inset-right)));
    margin-left: calc(0px - var(--score-left));
    margin-right: calc(0px - var(--score-right));
    padding-left: calc(var(--score-left) + 2px);
    padding-right: calc(var(--score-right) + 2px);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  body[data-view="match"] .round-view {
    --round-art-size: min(calc((100cqw - 36px) / 2.2), calc(100cqh - 68px - var(--primary-button-height)), 390px);
    --wide-question-font: clamp(28px, 3.4vw, 44px);
    --wide-question-slot: calc(var(--wide-question-font) * 3.45);
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 10px 36px;
    padding: 0;
    align-content: start;
    align-items: start;
    container-type: size;
  }
  body[data-view="match"] :is(.question-side, .timer-side) { display: flex; flex-direction: column; align-items: center; position: static; }
  body[data-view="match"] .question-side { grid-area: 1 / 1; padding-top: max(0px, calc((var(--round-art-size) - var(--wide-question-slot)) / 2)); }
  body[data-view="match"] .timer-side { grid-area: 1 / 2; }
  body[data-view="match"] .question { position: static; width: 100%; min-height: var(--wide-question-slot); height: auto; font-size: var(--wide-question-font); line-height: 1.15; align-content: center; text-align: center; }
  body[data-view="match"] .draw-button { margin: 14px 0 0; }
  body[data-view="match"] .timer-side .dial { flex-shrink: 0; width: var(--round-art-size); height: auto; aspect-ratio: 1; margin: 0 0 16px; container-type: size; }
  body[data-view="match"] .timer-side .potato { font-size: 76cqw; }
  body[data-view="match"] .dial-label { display: none; }
  body[data-view="match"] .round-button { min-height: 56px; height: 56px; font-size: 19px; }
  body[data-view="match"] #round-note { margin: 12px 0 0; text-align: center; font-size: 12px; line-height: 16px; }
}

@media (orientation: landscape) and (min-width: 568px) and (max-width: 720px) and (min-height: 561px) {
  body[data-view="match"] .scoreboard { --score-gutter: 20px; }
}

/* Portrait: separate fixed grid tracks for question, draw, potato and Start.
   The question cannot push the potato or buttons down when it gains a line. */
@media (orientation: portrait), (max-width: 567px) {
  body[data-view="match"] .full-game { max-width: 800px; }
  .match-view { min-height: 0; padding-top: 6px; }
  .match-bar { flex-shrink: 0; margin-bottom: 6px; }
  .match-details .eyebrow { margin-bottom: 3px; }
  .scoreboard { padding-top: 2px; padding-bottom: 8px; }
  .score-chip { padding: 7px 10px; }
  .round-view { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(104px, 1fr) 44px minmax(74px, 1.6fr) var(--primary-button-height) 32px; min-height: 0; gap: 6px; padding: 0; align-content: stretch; container-type: size; }
  /* Center the question/button group in tracks 1–2, halving the unused space
     below the button. Keep the potato and Start tracks in their existing places. */
  .question-side { display: flex; flex-direction: column; align-items: center; gap: 8px; grid-area: 1 / 1 / 3 / 2; align-self: safe center; position: static; width: 100%; }
  .timer-side { display: contents; }
  .question { position: static; min-height: 3.45em; height: auto; width: min(100%, 550px); align-content: center; margin: 0; text-align: center; font-size: clamp(22px, 4dvh, 38px); line-height: 1.15; letter-spacing: -.8px; }
  .draw-button { grid-area: 2 / 1; justify-self: center; margin: 0; min-height: 44px; height: 44px; padding: 8px 18px; }
  .timer-side .dial { grid-area: 3 / 1; justify-self: center; align-self: center; margin: 0; width: min(68vw, 24dvh, 340px); height: auto; aspect-ratio: 1; max-height: 100%; }
  @supports (width: 1cqh) {
    .timer-side .dial { width: min(68vw, 340px, calc((100cqh - 156px) * .615)); }
  }
  .timer-side .potato { font-size: clamp(54px, 15dvh, 200px); }
  .timer-side .dial-face { inset: 12%; }
  .timer-side .orbit-inner { inset: 6%; }
  .timer-side .dial-label { display: none; }
  .round-button { grid-area: 4 / 1; justify-self: center; min-height: 56px; height: 56px; font-size: 20px; }
  .full-game .timer-side .audio-note { grid-area: 5 / 1; align-self: center; margin: 0; text-align: center; font-size: 12px; line-height: 16px; }
  .resolution-view { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 3px 12px; }
  .loss-players { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .loss-name { font-size: 14px; }
}
@media (orientation: portrait) {
  .timer-side .dial { top: var(--portrait-potato-offset, 0px); }
  .timer-side .potato { font-size: clamp(78px, 21.45dvh, 286px); }
}
@media (orientation: portrait) and (max-height: 650px) {
  .score-chip { padding: 4px 8px; }
  .score-avatar { font-size: 25px; }
  .score-lives { margin-top: 1px; }
  .question { font-size: 23px; }
  .round-view { grid-template-rows: minmax(104px, 1fr) 44px minmax(58px, 1.4fr) var(--primary-button-height) 28px; gap: 4px; }
  .round-button { min-height: 48px; height: 48px; font-size: 18px; }
  .timer-side .potato { font-size: 94.9px; }
  .timer-side .dial { width: min(36vw, 18dvh); }
}
@media (orientation: portrait) and (min-width: 721px) {
  .question { font-size: 40px; }
  .round-view { grid-template-rows: minmax(160px, 1fr) 48px minmax(150px, 1.6fr) var(--primary-button-height) 32px; gap: 12px; }
  .round-button { height: 64px; }
  .draw-button { height: 48px; }
}
/* Keep the compact phone-landscape composition from the iPhone version. */
@media (orientation: landscape) and (min-width: 568px) and (max-height: 560px) {
  body[data-view="match"] .full-game { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  body[data-view="match"] .round-view { grid-template-columns: min(46%, calc(100svh - var(--portrait-gutter))) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) var(--primary-button-height) 18px; }
  body[data-view="match"] .timer-side .dial { width: min(100%, calc(100cqh - var(--primary-button-height) - 30px)); }
  body[data-view="match"] .question { min-height: 0; font-size: clamp(22px, 6.2svh, 32px); }
  body[data-view="match"] .timer-side .potato { font-size: 76cqw; }
  body[data-view="match"] .score-name { font-size: 13px; }
  body[data-view="match"] .score-lives { font-size: 12px; }
  body[data-view="match"] .scoreboard { touch-action: pan-x; }
  body[data-view="match"] .loss-players { overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
  body[data-view="match"] .loss-player { min-height: 44px; }
  body[data-view="match"] .loss-name { font-size: 12px; }
}
@media (max-width: 600px) {
  .install-panel { grid-template-columns: 48px minmax(0, 1fr); padding: 16px; gap: 12px; }
  #install-button { grid-column: 1 / -1; }
  .install-panel .install-status { grid-column: 1 / -1; }
}
/* Wide layout keeps its responsive width; portrait uses the same maximum. */
#round-button { width: min(351px, calc(100vmin - 40px), 100%); max-width: 351px; }
/* Do not grow the portrait control as the browser window gets wider. */
@media (orientation: portrait) {
  #round-button { width: 351px; max-width: 100%; }
}
/* Center the whole composition on roomy tablets/desktops, including browser
   fullscreen and installed PWA windows. Viewport sizing also supports F11,
   which does not necessarily activate the CSS :fullscreen pseudo-class.
   Phones and short landscape windows keep their existing edge-to-edge layout. */
@media (min-width: 768px) and (min-height: 700px) {
  body[data-view="setup"] .full-game { justify-content: safe center; }
  body[data-view="match"] { display: flex; flex-direction: column; justify-content: center; }
  body[data-view="match"] .full-game { flex-shrink: 0; height: min(100dvh, 700px); margin-block: 0; }
}
@media (min-width: 768px) and (min-height: 700px) and (orientation: portrait) {
  body[data-view="match"] .full-game { height: min(100dvh, 1000px); }
}
/* Extremely small windows or enlarged text: allow a safe scroll fallback,
   never hide the only Start/Stop control outside a clipped viewport. */
@media (max-height: 460px) and (orientation: portrait), (max-height: 290px) {
  html:has(body[data-view="match"]), body[data-view="match"] { height: auto; overflow-y: auto; }
  body[data-view="match"] .full-game { height: auto; min-height: 480px; }
  body[data-view="match"] .round-view { min-height: 300px; }
}