/* Native CSS pixels preserve text sharpness; the canvas gets the remaining space. */
#app { position:relative; }
#app .app-shell { height:100%; min-height:0; }
#app .modal-backdrop { position:absolute; }
#app .modal-card[data-modal="pause"] {
  width:min(440px,100%); padding:20px 24px; overflow:hidden;
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
#app .modal-card[data-modal="pause"] > :is(.modal-emblem,.eyebrow,h2,p,.primary-button) { grid-column:1 / -1; margin:0; }
#app .modal-card[data-modal="pause"] .modal-emblem { justify-self:center; width:44px; height:44px; }
#app .modal-card[data-modal="pause"] h2 { font-size:28px; line-height:1.15; }
#app .modal-card[data-modal="pause"] p { font-size:14px; line-height:1.4; }
#app .modal-card[data-modal="pause"] > :is(.primary-button,.secondary-button,.text-button) { margin:0; min-height:44px; padding:10px 12px; font-size:14px; }
@media(max-height:420px) {
  #app .modal-card[data-modal="pause"] { padding:16px 20px; gap:10px; }
  #app .modal-card[data-modal="pause"] .modal-emblem,
  #app .modal-card[data-modal="pause"] .eyebrow { display:none; }
  #app .modal-card[data-modal="pause"] h2 { font-size:25px; }
}
/* Quick results are a single-screen bridge into the next round, even at 640x360. */
#app .modal-card[data-modal="results"]:has(.quick-result) {
  width:min(420px,100%); padding:18px 24px; overflow:hidden;
}
#app .quick-result { display:grid; gap:9px; text-align:center; }
#app .quick-result > * { margin:0; }
#app .quick-result h2 { font-size:30px; line-height:1; }
#app .quick-result-score { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:14px; }
#app .quick-result-score > div { min-width:0; }
#app .quick-result-score span { display:block; overflow:hidden; color:var(--blue); font-size:9px; font-weight:800; letter-spacing:1px; text-overflow:ellipsis; white-space:nowrap; }
#app .quick-result-score div:last-child span,#app .quick-result-score div:last-child strong { color:var(--coral); }
#app .quick-result-score strong { display:block; color:var(--blue); font-family:var(--display); font-size:44px; line-height:1; }
#app .quick-result-score b { color:var(--muted); font-size:22px; }
#app .run-progress { display:flex; justify-content:center; gap:7px; }
#app .run-progress i { width:46px; height:5px; border-radius:9px; background:#ffffff18; }
#app .run-progress i.done { background:var(--gold); box-shadow:0 0 10px #f3cd6655; }
#app .quick-result > .next-rival-button { display:grid; grid-template-columns:38px minmax(0,1fr) 18px; min-height:54px; margin:2px 0 0; padding:7px 12px; text-align:left; }
#app .next-rival-button .rival-initial { width:36px; height:36px; color:#173d38; font-size:17px; }
#app .next-rival-button small,#app .next-rival-button strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#app .next-rival-button small { font-size:9px; letter-spacing:1px; }
#app .next-rival-button strong { font-size:14px; }
#app .next-rival-button .icon { width:18px; }
#app .quick-earned { color:var(--gold); font-size:12px; font-weight:750; }
#app .run-complete { display:grid; grid-template-columns:1fr auto; align-items:center; padding:9px 12px; border:1px solid #f4cd6630; border-radius:9px; background:#f4cd660b; text-align:left; }
#app .run-complete span,#app .run-complete small { color:var(--muted); font-size:9px; letter-spacing:1px; }
#app .run-complete strong { grid-row:1 / 3; grid-column:2; color:var(--gold); font-size:24px; }
#app .quick-result > :is(.primary-button,.secondary-button) { width:100%; min-height:43px; margin:0; padding:9px 14px; }
#app .quick-result > .text-button { min-height:25px; margin:0; padding:4px 12px; }
@media(max-height:420px) {
  #app .modal-backdrop:has(.quick-result) { padding:8px; }
  #app .modal-card[data-modal="results"]:has(.quick-result) { padding:10px 18px; }
  #app .quick-result { gap:5px; }
  #app .quick-result > .eyebrow { display:none; }
  #app .quick-result h2 { font-size:23px; }
  #app .quick-result-score strong { font-size:34px; }
  #app .quick-result > .next-rival-button { min-height:48px; }
  #app .run-complete { padding:6px 10px; }
  #app .quick-result > :is(.primary-button,.secondary-button) { min-height:38px; padding:7px 12px; }
  #app .quick-result > .text-button { font-size:11px; }
}
.turn-clock { display:inline-block; margin-top:4px; min-width:48px; border-radius:12px; padding:2px 9px; background:#082d29; color:#f7f2df; font-size:13px; font-weight:800; font-variant-numeric:tabular-nums; }
.turn-clock.urgent { background:#704131; color:#ffe0bf; }
#app.landscape-fit .app-shell { padding:0; }
#app.landscape-fit .topbar { height:56px; min-height:56px; flex-wrap:nowrap; padding:0 20px; gap:16px; }
#app.landscape-fit .brand-mark { width:34px; height:34px; }
#app.landscape-fit .brand-type { font-size:16px; }
#app.landscape-fit .nav { display:flex; order:0; width:auto; height:auto; margin:auto; gap:4px; }
#app.landscape-fit .nav-button { font-size:14px; padding:0 12px; height:36px; }
#app.landscape-fit .nav-button .icon { display:block; width:18px; height:18px; }
#app.landscape-fit .header-actions { margin-left:0; gap:8px; }
#app.landscape-fit .header-actions .icon-button { display:grid; width:36px; min-width:36px; height:36px; }
#app.landscape-fit .wallet { padding:7px 12px; font-size:14px; }
#app.landscape-fit .bottom-bar { height:40px; min-height:40px; padding:0 20px; font-size:12px; }
#app.landscape-fit .bottom-meta { width:auto; gap:14px; }
#app.landscape-fit .bottom-bar > span { display:block; }
#app.landscape-fit .desktop-only { display:none; }
#app.landscape-fit .home-panel { left:55px; right:auto; top:20px; bottom:16px; width:420px; max-width:none; transform:none; padding:0 10px 8px 0; background:none; text-align:left; overflow-y:auto; }
#app.landscape-fit .home-panel .eyebrow { justify-content:flex-start; font-size:12px; }
#app.landscape-fit .home-title { font-size:64px; line-height:.94; margin:14px 0; letter-spacing:-3px; }
#app.landscape-fit .home-title br { display:block; }
#app.landscape-fit .home-title span { display:inline; }
#app.landscape-fit .home-description { display:block; font-size:15px; margin:12px 0; line-height:1.45; max-width:360px; }
#app.landscape-fit .home-description br { display:block; }
#app.landscape-fit .home-difficulty { justify-content:flex-start; font-size:12px; margin:10px 0 12px; }
#app.landscape-fit .home-panel .primary-button { min-height:48px; font-size:17px; padding:10px 16px; width:360px; }
#app.landscape-fit .mode-caption { font-size:13px; margin-top:8px; }
#app.landscape-fit .home-secondary { width:360px; margin-top:12px; gap:10px; }
#app.landscape-fit .home-secondary button { min-height:58px; font-size:14px; padding:9px 8px; }
#app.landscape-fit .home-note { display:none; }
#app.landscape-fit .table-tag { display:block; left:auto; right:100px; top:20px; font-size:11px; }
#app.landscape-fit .table-tag strong { font-size:13px; }
#app.landscape-fit .floor-stamp { display:none; }
#app.landscape-fit .game-ui .score-card { top:42px; width:164px; display:block; }
#app.landscape-fit .game-ui .score-card.player,#app.landscape-fit .game-ui .instruction { left:20px; }
#app.landscape-fit .game-ui .score-card.cpu,#app.landscape-fit .game-ui .play-controls { right:20px; }
#app.landscape-fit .game-ui .player-name { font-size:22px; margin:8px 0 4px; max-width:none; }
#app.landscape-fit .game-ui .player-subtitle { display:block; font-size:12px; white-space:normal; max-width:none; }
#app.landscape-fit .game-ui .score-line { position:static; margin-top:10px; flex-direction:column; align-items:flex-start; gap:0; }
#app.landscape-fit .game-ui .score-number { font-size:48px; }
#app.landscape-fit .game-ui .score-unit { display:inline; margin-top:2px; font-size:10px; line-height:1; letter-spacing:1.2px; }
#app.landscape-fit .game-ui .puck-rack { margin:12px 0 8px; }
#app.landscape-fit .game-ui .remaining { display:block; font-size:12px; }
#app.landscape-fit .game-ui .turn-badge { position:static; margin-top:10px; font-size:12px; }
#app.landscape-fit .game-ui .instruction { bottom:14px; width:164px; padding:10px; }
#app.landscape-fit .game-ui .instruction strong { font-size:13px; }
#app.landscape-fit .game-ui .instruction small { display:block; font-size:12px; }
#app.landscape-fit .game-ui .play-controls { bottom:14px; width:164px; }
#app.landscape-fit .game-ui .pause-button { min-height:44px; font-size:14px; }
#app.landscape-fit .content-view { padding:24px 30px; }
#app.landscape-fit .page-heading { margin-bottom:18px; }
#app.landscape-fit .page-heading h1 { font-size:36px; }
#app.landscape-fit .page-heading p { max-width:600px; font-size:14px; line-height:1.5; }
#app.landscape-fit .destination-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
#app.landscape-fit .destination { min-width:0; }
#app.landscape-fit .opponent-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
#app.landscape-fit .shop-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
#app.landscape-fit .table-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
#app.landscape-fit .modal-backdrop { padding:16px; }
#app.landscape-fit .modal-card { width:min(460px,100%); max-height:100%; padding:24px; }
#app.landscape-fit .modal-card h2 { font-size:28px; margin:10px 0; }
#app.landscape-fit .modal-card p { font-size:14px; margin:10px 0; }
#app.landscape-fit .modal-card .primary-button { min-height:44px; margin-top:16px; }
#app.landscape-fit .matchup-sides { margin-top:16px; }
/* Match introduction fits the smallest host without a scrolling dialog. */
#app .modal-card:has(.matchup-sides) {
  width:min(460px,100%); padding:18px 24px; overflow:hidden;
  display:grid; grid-template-columns:1fr; gap:8px;
}
#app .modal-card:has(.matchup-sides) > :is(.eyebrow,h2,p,.matchup-sides) { grid-column:1 / -1; margin:0; }
#app .modal-card:has(.matchup-sides) h2 { font-size:26px; line-height:1.15; }
#app .modal-card:has(.matchup-sides) p { font-size:13px; line-height:1.4; }
#app .modal-card:has(.matchup-sides) .matchup-sides { margin:4px 0; }
#app .modal-card:has(.matchup-sides) > .text-button { justify-self:center; min-height:36px; margin:0; padding:7px 18px; font-size:13px; }
@media(max-height:420px) {
  #app .modal-backdrop:has(.matchup-sides) { padding:10px; }
  #app .modal-card:has(.matchup-sides) { padding:12px 20px; gap:6px 10px; }
  #app .modal-card:has(.matchup-sides) > .eyebrow { display:none; }
  #app .modal-card:has(.matchup-sides) h2 { font-size:23px; }
  #app .modal-card:has(.matchup-sides) .matchup-sides { margin:0; }
  #app .modal-card:has(.matchup-sides) .matchup-you { gap:6px; }
}
#app.landscape-fit .app-shell[data-view="play"] .topbar { height:40px; min-height:40px; padding:0 12px; }
#app.landscape-fit .app-shell[data-view="play"] .nav { display:none; }
#app.landscape-fit .app-shell[data-view="play"] .header-actions { margin-left:auto; }
#app.landscape-fit .app-shell[data-view="play"] .brand-mark { width:27px; height:27px; }
#app.landscape-fit .app-shell[data-view="play"] .brand-type { font-size:13px; }
#app.landscape-fit .app-shell[data-view="play"] .bottom-bar { display:none; }
#app.landscape-fit .game-ui .match-top { left:12px; right:auto; top:8px; width:164px; text-align:left; }
#app.landscape-fit .game-ui .match-label { font-size:12px; letter-spacing:0; }
#app.landscape-fit .game-ui .score-card { top:72px; width:164px; }
#app.landscape-fit .game-ui .score-card.player,#app.landscape-fit .game-ui .instruction { left:12px; }
#app.landscape-fit .game-ui .score-card.cpu,#app.landscape-fit .game-ui .play-controls { right:12px; }
#app.landscape-fit .game-ui .instruction strong { font-size:15px; letter-spacing:0; }
#app.landscape-fit .game-ui .instruction small { font-size:13px; }
#app.landscape-fit .game-ui .power-head { font-size:13px; }
#app.landscape-fit .game-ui .instruction,#app.landscape-fit .game-ui .play-controls { bottom:12px; }
@media(max-width:850px) and (min-aspect-ratio:7/5) {
  #app.landscape-fit .topbar { padding:0 12px; gap:8px; height:44px; min-height:44px; }
  #app.landscape-fit .brand-type { font-size:13px; }
  #app.landscape-fit .brand-mark { width:28px; height:28px; }
  #app.landscape-fit .nav-button { padding:0 8px; font-size:13px; }
  #app.landscape-fit .nav-button .icon { display:none; }
  #app.landscape-fit .header-actions .sound-toggle { display:none; }
  #app.landscape-fit .header-actions .icon-button { width:32px; min-width:32px; height:32px; }
  #app.landscape-fit .bottom-bar { height:30px; min-height:30px; }
  #app.landscape-fit .home-panel { left:24px; top:12px; bottom:8px; width:53%; }
  #app.landscape-fit .home-title { font-size:40px; margin:8px 0; }
  #app.landscape-fit .home-title br { display:none; }
  #app.landscape-fit .home-title span { display:block; }
  #app.landscape-fit .home-description { font-size:14px; margin:8px 0; }
  #app.landscape-fit .home-description br { display:none; }
  #app.landscape-fit .home-panel .eyebrow { display:none; }
  #app.landscape-fit .home-panel .primary-button,#app.landscape-fit .home-secondary { width:100%; }
  #app.landscape-fit .home-panel .primary-button { min-height:40px; font-size:15px; }
  #app.landscape-fit .home-secondary { margin-top:8px; }
  #app.landscape-fit .home-secondary button { min-height:48px; font-size:13px; }
  #app.landscape-fit .home-difficulty { margin:8px 0; }
  #app.landscape-fit .mode-caption { font-size:12px; }
  #app.landscape-fit .table-tag { right:24px; max-width:35%; }
  #app.landscape-fit .opponent-grid,#app.landscape-fit .shop-grid,#app.landscape-fit .table-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #app.landscape-fit .page-heading p { font-size:14px; }
}
@media(max-height:420px) and (min-aspect-ratio:7/5) {
  #app.landscape-fit .home-panel { top:10px; bottom:8px; width:55%; padding-right:0; }
  #app.landscape-fit .home-title { font-size:30px; line-height:1.1; letter-spacing:-1px; margin:4px 0 6px; white-space:nowrap; }
  #app.landscape-fit .home-title span { display:inline; }
  #app.landscape-fit .home-description { font-size:13px; line-height:1.4; margin:6px 0; }
  #app.landscape-fit .home-difficulty { margin:8px 0; }
  #app.landscape-fit .home-panel .primary-button { min-height:40px; padding:8px 14px; }
  #app.landscape-fit .home-secondary button { min-height:48px; padding:7px 6px; gap:4px; }
  #app.landscape-fit .home-secondary .icon { width:16px; height:16px; }
  #app.landscape-fit .mode-caption { margin-top:7px; line-height:1.4; }
  #app.landscape-fit .table-tag { top:10px; right:16px; font-size:10px; }
  #app.landscape-fit .table-tag strong { font-size:11px; letter-spacing:1px; }
  #app.landscape-fit .game-ui .score-card { top:64px; }
  #app.landscape-fit .game-ui .player-subtitle { display:none; }
  #app.landscape-fit .game-ui .player-name { font-size:18px; margin:5px 0; }
  #app.landscape-fit .game-ui .score-number { font-size:36px; }
  #app.landscape-fit .game-ui .puck-rack { margin:8px 0; }
  #app.landscape-fit .game-ui .turn-badge { margin-top:6px; }
  #app.landscape-fit .game-ui .instruction { padding:8px; }
}