/* Fit the playable area to Safari's visible viewport, including its toolbars. */
@supports (height: 100svh) {
  :root { --viewport-height: 100svh; }
}
@supports (height: 100dvh) {
  :root { --viewport-height: 100dvh; }
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.overlay { height: var(--viewport-height); bottom: auto; }
.game-stage, .controls, .controls .game-btn, .setting-copy { min-width: 0; }
.controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.modal .home-panel, .modal .info-card { -webkit-overflow-scrolling: touch; }
/* The panel clips overflowing content, so reserve space for raised action shadows. */
.modal:not(.title-modal) .modal-actions { padding: 0 4px 10px; }

@media (min-width: 801px) and (min-height: 781px) {
  :root { --stage-width: min(48vw, 620px, calc(var(--viewport-height) - 370px)); }
}

@media (max-width: 480px) and (orientation: portrait) {
  :root {
    --header-height: 56px;
    --footer-height: 30px;
    --stage-width: min(calc(100vw - 20px - var(--safe-left) - var(--safe-right)), calc(var(--viewport-height) - var(--header-height) - var(--footer-height) - 156px - var(--safe-top) - var(--safe-bottom)));
  }
  .site-header {
    height: calc(var(--header-height) + var(--safe-top));
    padding: calc(6px + var(--safe-top)) calc(10px + var(--safe-right)) 6px calc(10px + var(--safe-left));
  }
  .brand { font-size: 14px; }
  .brand strong { font-size: 12px; }
  .header-actions { gap: 6px; }
  .header-actions .icon-button { width: 44px; height: 44px; padding: 10px; }
  .wallet { height: 44px; min-width: 64px; font-size: 16px; padding-right: 8px; }
  .wallet img { width: 28px; height: 28px; }
  .app {
    height: calc(var(--viewport-height) - var(--header-height) - var(--footer-height) - var(--safe-top) - var(--safe-bottom));
    padding: 0 calc(10px + var(--safe-right)) 8px calc(10px + var(--safe-left));
  }
  .game-cabinet { padding: 8px; }
  .top-hud { height: 48px; padding: 0 3px 6px; }
  .hud-label { font-size: 8px; line-height: 1.2; letter-spacing: .7px; }
  .hud-value, .score-block .hud-value { font-size: 25px; line-height: 1.12; letter-spacing: -.7px; }
  .best-block .hud-value { font-size: 20px; line-height: 1.15; }
  .hud-value small { font-size: 10px; margin-left: 2px; }
  .time-shell { height: 5px; margin-top: 4px; }
  .fever-block { height: 24px; padding-top: 5px; gap: 6px; }
  .fever-block > b, .fever-title { font-size: 9px; }
  .fever-shell { height: 9px; }
  .fever-star .ui-icon { width: 20px; height: 20px; }
  .fever-slot { height: 22px; margin: 4px 3px; }
  .play-status { padding: 0 3px; font-size: 9px; letter-spacing: 0; }
  .play-status strong { font-size: 16px; margin-left: 3px; }
  .board-tip { font-size: 8px; }
  .controls { gap: 6px; padding: 0; }
  .controls .game-btn { min-height: 44px; font-size: 11px; padding: 7px 3px; gap: 3px; }
  .controls .ui-icon { width: 16px; height: 16px; }
  .special-callout { height: 22px; padding: 0 8px; }
  .callout-title { font-size: 11px; }
  .callout-subtitle { font-size: 8px; }
  .fever-banner { padding: 0 9px; font-size: 9px; letter-spacing: 0; }
  .fever-banner strong { font-size: 14px; }
  .fever-banner em { font-size: 8px; }
  .site-footer { bottom: calc(9px + var(--safe-bottom)); font-size: 8px; letter-spacing: .7px; }

  /* A title can scroll on unusually short screens without losing its menu. */
  .overlay[data-view="title"] {
    display: flex; flex-direction: column; justify-content: flex-start;
    padding: calc(var(--header-height) + var(--safe-top) + 6px) calc(12px + var(--safe-right)) calc(var(--footer-height) + var(--safe-bottom) + 6px) calc(12px + var(--safe-left));
    overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;
    pointer-events: auto;
  }
  .modal.title-modal { flex: none; width: min(100%, 380px); max-height: none; margin: auto 0; }
  .title-modal .hero {
    height: clamp(84px, calc(var(--viewport-height) - var(--footer-height) - 368px - var(--safe-top) - var(--safe-bottom)), 230px);
    max-width: 100%; width: auto;
  }
  .title-modal > p { margin: 4px 0 10px; font-size: 12px; line-height: 1.6; letter-spacing: .3px; }
  .title-modal .home-panel { flex: none; padding: 12px; }
  .title-modal .home-panel-heading { font-size: 13px; margin-bottom: 8px; }
  .title-modal .mode-row { gap: 7px; }
  .title-modal .mode-btn { min-height: 58px; padding: 6px 3px; }
  .title-modal .mode-name { font-size: 12px; }
  .title-modal .mode-spec { font-size: 9px; }
  .title-modal .mode-score { font-size: 7px; }
  .title-modal .modal-actions { margin-top: 10px; }
  .title-modal .modal-actions .primary { height: 48px; min-height: 48px; font-size: 23px; }
  .title-modal .title-record { margin-top: 8px; font-size: 9px; }
  .title-modal .title-record strong { font-size: 14px; }
  .title-modal .title-nav { gap: 6px; margin-top: 12px; }
  .title-modal .title-nav .game-btn { flex-direction: column; min-height: 48px; font-size: 10px; padding: 6px 3px; gap: 3px; }
  .title-modal .title-nav .ui-icon { width: 16px; height: 16px; }
}

@media (max-width: 480px) and (max-height: 560px) and (orientation: portrait) {
  :root { --footer-height: 0px; }
  .site-footer { display: none; }
  .board-tip { display: none; }
  .play-status { justify-content: center; }
}

/* Keep dialog actions outside the scrolling content, with room for a finger. */
@media (max-width: 480px), (max-width: 900px) and (max-height: 500px) {
  #fx-container .toast:not(.notice) {
    max-width: calc(100vw - 24px - var(--safe-left) - var(--safe-right));
    padding: 8px 16px; font-size: clamp(22px, 6vw, 32px); line-height: 1.15; white-space: normal;
  }
  .overlay:not([data-view="title"]) {
    padding: calc(8px + var(--safe-top)) calc(10px + var(--safe-right)) calc(12px + var(--safe-bottom)) calc(10px + var(--safe-left));
  }
  .modal:not(.title-modal) {
    max-height: calc(var(--viewport-height) - 20px - var(--safe-top) - var(--safe-bottom));
    padding: 16px 14px; border-radius: 22px;
  }
  .modal:not(.title-modal) > .modal-emblem { display: none; }
  .modal:not(.title-modal) > h1 { font-size: 20px; line-height: 1.4; letter-spacing: 0; padding: 0 34px; margin-bottom: 12px; }
  .modal:not(.title-modal) > p { font-size: 11px; margin-bottom: 12px; }
  .modal .modal-close { width: 44px; height: 44px; top: 7px; right: 7px; padding: 11px; }
  .modal:not(.title-modal) .modal-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
  .modal:not(.title-modal) .modal-actions .game-btn { min-width: 0; min-height: 44px; padding: 8px 5px; font-size: 12px; }
  .modal:not(.title-modal) .modal-actions .primary { min-height: 46px; font-size: 15px; }
  .setting-row { min-height: 64px; gap: 9px; padding: 12px 0; font-size: 13px; }
  .setting-copy small { font-size: 11px; line-height: 1.6; }
  .setting-footer { font-size: 10px; line-height: 1.7; margin: 10px 0 0; }
  .help-intro p { font-size: 12px; }
  .help-steps { gap: 6px; }
  .help-step { padding: 10px 3px; }
  .help-step b { font-size: 10px; }
  .help-step img, .help-step .line-example { width: 44px; height: 44px; }
  .help-content summary { min-height: 44px; padding: 8px 0; font-size: 12px; }
  .help-content details { padding: 4px 0; font-size: 12px; }
  .ranking-row { padding: 11px 8px; gap: 8px; }
  .ranking-score { font-size: 22px; }
  .ranking-row > strong { min-width: 24px; font-size: 17px; }
  .ranking-meta { font-size: 10px; }
  .result-stars { margin-bottom: 5px; }
  .result-stars .ui-icon { width: 23px; height: 23px; }
  .result-stars .ui-icon:nth-child(2) { width: 30px; height: 30px; }
  .result-message { margin: 3px 0 10px; font-size: 11px; }
  .gameover-main-score { padding: 10px; margin-bottom: 10px; }
  .gameover-main-score .result-value { font-size: 38px; }
  .result-card { padding: 8px 4px; }
  .coin-card { gap: 12px; margin: 10px 0; }
  .coin-card img { width: 32px; height: 32px; }
  .result-grid { gap: 8px; }
  .gameover-results > .result-grid:last-child .result-value { font-size: 16px; }
  .collection-panel .coin-line { padding: 8px; margin-bottom: 6px; }
  .collection-note { font-size: 10px; line-height: 1.6; margin-bottom: 8px; }
  .collection-filters { gap: 5px; margin-bottom: 10px; }
  .collection-filters button { min-height: 44px; font-size: 10px; padding: 6px 2px; }
  .modal.collection-modal .collection-limited { min-height: 0; max-height: none; }
}

@media (max-width: 480px) and (orientation: portrait) {
  .modal.collection-modal > h1 { font-size: 17px; padding: 0 30px; }
  .collection-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .collection-grid.new-arrivals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .collection-item, .new-arrivals .collection-item { --portrait-size: 60px; min-height: 116px; padding: 10px 4px 7px; }
  .collection-item b, .new-arrivals .collection-item b { font-size: 10px; line-height: 1.5; }
  .collection-item > span, .new-arrivals .collection-item > span { font-size: 9px; line-height: 1.5; }
  .new-animal-badge { font-size: 6px; }
}

/* Landscape uses the full height for the board; HUD and controls sit beside it. */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  :root {
    --header-height: 50px;
    --stage-width: min(calc(var(--viewport-height) - 66px - var(--safe-top) - var(--safe-bottom)), calc(100vw - 200px - var(--safe-left) - var(--safe-right)));
  }
  .site-header { height: calc(var(--header-height) + var(--safe-top)); padding: calc(3px + var(--safe-top)) calc(12px + var(--safe-right)) 3px calc(12px + var(--safe-left)); }
  .brand { font-size: 14px; }
  .brand strong { font-size: 12px; }
  .header-actions { gap: 7px; }
  .header-actions .icon-button { width: 44px; height: 44px; padding: 10px; }
  .wallet { height: 40px; font-size: 16px; }
  .site-footer, .run-sidebar, .tips-sidebar { display: none; }
  .app { height: calc(var(--viewport-height) - var(--header-height) - var(--safe-top) - var(--safe-bottom)); padding: 0 calc(12px + var(--safe-right)) 8px calc(12px + var(--safe-left)); display: flex; }
  .game-stage { display: grid; grid-template-columns: var(--stage-width) 160px; grid-template-rows: auto auto 1fr auto; gap: 6px 12px; width: max-content; max-width: 100%; }
  .game-cabinet { display: contents; }
  .game-cabinet::before { display: none; }
  .board-wrap { grid-column: 1; grid-row: 1 / 5; align-self: center; width: var(--stage-width); border: 4px solid #f5e8c5; border-radius: 18px; padding: 4px; box-shadow: 0 3px 0 #bdab7b, 0 8px 16px #315b4330; }
  .top-hud { grid-column: 2; grid-row: 1; grid-template-columns: 1fr 1.3fr; padding: 6px 5px; border: 1px solid #d6bc86; border-radius: 13px; background: #fff6df; }
  .best-block { display: none; }
  .hud-label { font-size: 8px; letter-spacing: .5px; }
  .hud-value, .score-block .hud-value { font-size: 24px; line-height: 1.1; }
  .hud-value small { font-size: 10px; }
  .time-shell { height: 5px; margin-top: 4px; }
  .fever-slot { grid-column: 2; grid-row: 2; margin: 0; height: 22px; }
  .play-status { justify-content: center; font-size: 10px; }
  .play-status strong { font-size: 16px; }
  .board-tip, .callout-subtitle { display: none; }
  .special-callout { height: 22px; display: flex; justify-content: center; padding: 0 4px; }
  .callout-title { font-size: 11px; }
  .controls { grid-column: 2; grid-row: 3; align-self: center; gap: 5px; padding: 0; }
  .controls .game-btn { flex-direction: column; min-height: 54px; padding: 6px 2px; font-size: 9px; gap: 4px; }
  .controls .ui-icon { width: 18px; height: 18px; }
  .fever-block { grid-column: 2; grid-row: 4; height: 26px; padding: 4px 6px; gap: 5px; background: #fff6df; border: 1px solid #d6bc86; border-radius: 12px; }
  .fever-block > b, .fever-title { font-size: 8px; }
  .fever-star, .fever-label { display: none; }
  .fever-shell { height: 9px; }
  .fever-banner { padding: 0 5px; font-size: 8px; letter-spacing: 0; }
  .fever-banner strong { font-size: 12px; }
  .fever-banner em { font-size: 7px; }
  .overlay[data-view="title"] { display: flex; align-items: flex-start; overflow: auto; padding: calc(var(--header-height) + var(--safe-top) + 4px) calc(12px + var(--safe-right)) calc(10px + var(--safe-bottom)) calc(12px + var(--safe-left)); pointer-events: auto; }
  .modal.title-modal { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: 16px; width: min(100%, 690px); max-height: none; margin: auto 0; flex: none; }
  .title-modal .hero { max-width: 100%; max-height: calc(var(--viewport-height) - 80px - var(--safe-top) - var(--safe-bottom)); align-self: center; }
  .title-modal .home-panel { padding: 10px; }
  .title-modal .home-panel-heading { font-size: 11px; margin-bottom: 6px; }
  .title-modal .mode-btn { min-height: 44px; padding: 4px 2px; }
  .title-modal .mode-name { font-size: 11px; }
  .title-modal .mode-spec { font-size: 9px; }
  .title-modal .modal-actions { margin-top: 8px; }
  .title-modal .modal-actions .primary { height: 44px; min-height: 44px; font-size: 20px; }
  .title-modal .title-nav { margin-top: 8px; gap: 6px; }
  .title-modal .title-nav .game-btn { min-height: 44px; flex-direction: column; font-size: 9px; padding: 4px 2px; gap: 3px; }
  .title-modal .title-nav .ui-icon { width: 14px; height: 14px; }
  .modal.collection-modal { width: min(640px, 100%); }
  .modal:not(.title-modal) > h1 { font-size: 18px; margin-bottom: 7px; }
  .modal:not(.title-modal) > p { margin-bottom: 7px; }
  .modal:not(.title-modal) .modal-actions { margin-top: 8px; }
  .collection-progress { display: none; }
  .collection-filters { margin-bottom: 8px; }
  .collection-grid.new-arrivals { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .collection-item, .new-arrivals .collection-item { --portrait-size: 48px; min-height: 103px; padding: 9px 3px 5px; }
}

@media (max-width: 900px) and (max-height: 350px) and (orientation: landscape) {
  .modal:not(.title-modal) { overflow-y: auto; }
  .modal:not(.title-modal) > .home-panel { overflow: visible; flex: none; }
  .modal:not(.title-modal) .info-card { overflow: visible; flex: none; }
  .modal.collection-modal .collection-limited { flex: none; max-height: 220px; }
  .collection-panel .coin-line { margin-bottom: 4px; }
  .collection-note { margin-bottom: 4px; }
  .modal:not(.title-modal) .modal-actions { position: sticky; bottom: -8px; padding: 8px 4px 12px; margin-top: 4px; background: #fbedcf; }
}

/* Keep the phone board wide while giving the HUD and controls breathing room.
   The board's height budget uses the same dimensions as the surrounding UI. */
@media (max-width: 600px) and (orientation: portrait) {
  body:not([data-state="title"]) {
    --header-height: 56px;
    --footer-height: 0px;
    --phone-header-padding: 6px;
    --phone-hud-height: 46px;
    --phone-status-height: 28px;
    --phone-controls-height: 48px;
    --phone-stage-gap: 8px;
    --phone-app-top: 12px;
    --phone-app-bottom: 12px;
    --phone-value-size: 26px;
    --phone-label-size: 9px;
    --phone-label-icon-size: 11px;
    --phone-best-size: 21px;
    --stage-width: min(calc(100vw - 12px - var(--safe-left) - var(--safe-right)), calc(var(--viewport-height) - var(--header-height) - var(--phone-hud-height) - var(--phone-status-height) - var(--phone-controls-height) - var(--phone-stage-gap) * 3 - var(--phone-app-top) - var(--phone-app-bottom) - var(--safe-top) - var(--safe-bottom)));
  }
  body:not([data-state="title"]) .site-header {
    height: calc(var(--header-height) + var(--safe-top));
    padding: calc(var(--phone-header-padding) + var(--safe-top)) calc(10px + var(--safe-right)) var(--phone-header-padding) calc(10px + var(--safe-left));
  }
  body:not([data-state="title"]) .brand { font-size: 14px; }
  body:not([data-state="title"]) .brand strong { font-size: 12px; }
  body:not([data-state="title"]) .header-actions { gap: 6px; }
  body:not([data-state="title"]) .header-actions .icon-button { width: 44px; height: 44px; padding: 10px; }
  body:not([data-state="title"]) .wallet { height: 44px; min-width: 64px; font-size: 16px; padding-right: 8px; gap: 5px; }
  body:not([data-state="title"]) .wallet img { width: 28px; height: 28px; }
  body:not([data-state="title"]) .site-footer { display: none; }
  body:not([data-state="title"]) .app {
    display: flex;
    height: calc(var(--viewport-height) - var(--header-height) - var(--safe-top) - var(--safe-bottom));
    padding: var(--phone-app-top) calc(6px + var(--safe-right)) var(--phone-app-bottom) calc(6px + var(--safe-left));
  }
  body:not([data-state="title"]) .game-stage {
    display: grid; grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--phone-hud-height) auto var(--phone-status-height) var(--phone-controls-height); gap: var(--phone-stage-gap);
    width: var(--stage-width); max-width: 100%;
  }
  body:not([data-state="title"]) .game-cabinet { display: contents; }
  body:not([data-state="title"]) .game-cabinet::before { display: none; }
  body:not([data-state="title"]) .top-hud {
    grid-column: 1; grid-row: 1; height: var(--phone-hud-height);
    grid-template-columns: 1fr 1.35fr 1fr; padding: 0 5px 5px;
    border: 1px solid #d6bc86; border-radius: 14px;
    background: linear-gradient(125deg, #fffbea, #f3e2bc);
  }
  body:not([data-state="title"]) .hud-label { font-size: var(--phone-label-size); line-height: 1.15; letter-spacing: .5px; gap: 3px; }
  body:not([data-state="title"]) .hud-label .ui-icon { width: var(--phone-label-icon-size); height: var(--phone-label-icon-size); }
  body:not([data-state="title"]) .hud-value,
  body:not([data-state="title"]) .score-block .hud-value { font-size: var(--phone-value-size); line-height: 1; letter-spacing: -.6px; }
  body:not([data-state="title"]) .best-block .hud-value { font-size: var(--phone-best-size); }
  body:not([data-state="title"]) .hud-value small { font-size: 10px; margin-left: 2px; }
  body:not([data-state="title"]) .time-shell { position: absolute; left: 10px; right: 10px; bottom: 2px; height: 3px; margin: 0; }
  body:not([data-state="title"]) .board-wrap {
    grid-column: 1; grid-row: 2; width: 100%;
    border-width: 3px; padding: 1px; border-radius: 18px;
  }
  body:not([data-state="title"]) .board-wrap:not(.danger-time) { border-color: #f5e8c5; }
  body:not([data-state="title"]) .board-wrap:not(.fever-active):not(.danger-time) { box-shadow: 0 2px 0 #bdab7b, 0 5px 12px #315b4330; }
  body:not([data-state="title"]) #board { border-radius: 14px; }
  body:not([data-state="title"]) .fever-block {
    grid-column: 1; grid-row: 3; width: calc(100% - 96px); height: var(--phone-status-height);
    padding: 3px 8px; gap: 6px; border: 1px solid #d6bc86; border-radius: 14px;
    background: #fff6df;
  }
  body:not([data-state="title"]) .fever-block > b,
  body:not([data-state="title"]) .fever-title { font-size: 10px; letter-spacing: .5px; }
  body:not([data-state="title"]) .fever-title { min-width: 28px; }
  body:not([data-state="title"]) .fever-shell { height: 10px; }
  body:not([data-state="title"]) .fever-star,
  body:not([data-state="title"]) .fever-label,
  body:not([data-state="title"]) .board-tip { display: none; }
  /* Full-width announcements overlay the status row without changing board size. */
  body:not([data-state="title"]) .fever-slot { grid-column: 1; grid-row: 3; height: var(--phone-status-height); margin: 0; min-width: 0; }
  body:not([data-state="title"]) .play-status {
    width: 88px; margin-left: auto; justify-content: center; padding: 0 6px;
    border: 1px solid #d6bc86; border-radius: 14px; background: #fff6df;
    font-size: 10px; letter-spacing: 0;
  }
  body:not([data-state="title"]) .play-status strong { font-size: 18px; margin-left: 4px; }
  body:not([data-state="title"]) .fever-banner { padding: 0 10px; font-size: 10px; letter-spacing: 0; }
  body:not([data-state="title"]) .fever-banner strong { font-size: 16px; }
  body:not([data-state="title"]) .fever-banner em { font-size: 8px; }
  body:not([data-state="title"]) .special-callout { height: var(--phone-status-height); padding: 0 8px; }
  body:not([data-state="title"]) .callout-title { font-size: 12px; }
  body:not([data-state="title"]) .callout-subtitle { font-size: 8px; }
  body:not([data-state="title"]) .callout-tag { display: none; }
  body:not([data-state="title"]) .controls { grid-column: 1; grid-row: 4; gap: 8px; padding: 0; }
  body:not([data-state="title"]) .controls .game-btn { min-height: var(--phone-controls-height); font-size: 12px; padding: 7px 3px; gap: 5px; border-radius: 14px; }
  body:not([data-state="title"]) .controls .ui-icon { width: 18px; height: 18px; }
}

/* Short viewports retain useful spacing and 44px controls before shrinking the board. */
@media (max-width: 600px) and (max-height: 580px) and (orientation: portrait) {
  body:not([data-state="title"]) {
    --header-height: 52px;
    --phone-header-padding: 4px;
    --phone-hud-height: 42px;
    --phone-status-height: 24px;
    --phone-controls-height: 44px;
    --phone-stage-gap: 6px;
    --phone-app-top: 4px;
    --phone-app-bottom: 8px;
    --phone-value-size: 24px;
    --phone-label-size: 8px;
    --phone-label-icon-size: 10px;
    --phone-best-size: 20px;
  }
}

@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  body:not([data-state="title"]) {
    --header-height: 44px;
    --stage-width: min(calc(var(--viewport-height) - 58px - var(--safe-top) - var(--safe-bottom)), calc(100vw - 200px - var(--safe-left) - var(--safe-right)));
  }
  body:not([data-state="title"]) .site-header { padding-top: var(--safe-top); padding-bottom: 0; }
  body:not([data-state="title"]) .board-wrap { border-width: 3px; padding: 1px; }
}