/* Navigation only: retain the cabinet, palette, fonts and existing panels. */
.view-nav{display:flex;align-items:center;gap:6px}
.view-nav a{display:block;padding:13px 17px;min-height:44px;text-decoration:none;border:1px solid transparent;border-radius:7px;font-size:13px;font-weight:700;text-align:center}
.view-nav a[aria-current="page"]{background:var(--banana);border-color:var(--ink)}
.app-view{padding-block:24px}
.compact-welcome{margin-bottom:20px}
.compact-welcome h1,.view-title{font-size:clamp(28px,3vw,38px);letter-spacing:-1px;line-height:1.15;margin:0 0 10px}
/* The compact welcome is prose, not the original decorative single-line title. */
.compact-welcome h1>span{white-space:normal}
.compact-welcome p{color:var(--muted);font-size:14px;margin:0}
.view-title{margin-bottom:24px}
#view-play .arcade-layout{display:block;max-width:960px;margin-inline:auto}
.reward-indicator,.round-reward-cta{font-size:12px;line-height:1.6;margin:12px 0;padding:10px 12px;border:1px solid var(--line);border-radius:7px;background:var(--white);overflow-wrap:anywhere}
.reward-indicator a,.round-reward-cta a{font-weight:700;display:inline-block;padding:5px 0}
.rankings-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}
.rankings-layout .grove-sidebar{display:block;padding:0;min-width:0}
.rankings-layout .friends-panel{grid-column:auto}
#view-grove .growth-layout{margin-top:0}
#view-grove>.community{max-width:600px}
#view-rewards .payout-panel{margin-top:0}
.game-help{margin-block:14px;font-size:13px;line-height:1.6}
.game-help>summary,.utility-panels summary,.privacy-details>summary,.reward-details>summary{cursor:pointer;padding:12px 0;font-size:13px;font-weight:700;min-height:44px}
.game-help .controls{justify-content:flex-start}
.utility-panels{border-top:1px solid var(--line);padding-block:8px;display:flex;align-items:start;gap:28px;flex-wrap:wrap}
.utility-panels>details{flex:1 1 240px;min-width:0;margin:0;max-width:100%}
.utility-panels .pwa-install{margin:0}
.privacy-details .privacy-note{width:100%;margin:0 0 12px}
footer.shell{padding-block:18px;font-size:11px}
.app-view [id]{scroll-margin-block:20px}
summary:focus-visible,[tabindex="-1"]:focus-visible{outline:3px solid var(--rust);outline-offset:4px}
@media(max-width:820px){
  html{scroll-padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .view-nav{position:fixed;inset:auto 0 0;z-index:30;justify-content:space-around;gap:4px;padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));background:var(--paper);border-top:1px solid var(--line)}
  .view-nav a{flex:1;min-width:0;padding:14px 4px;font-size:12px}
  .rankings-layout{grid-template-columns:minmax(0,1fr);gap:24px}
}
@media(max-width:480px){
  .app-view{padding-block:18px}
  .compact-welcome{margin-bottom:16px}
  .compact-welcome p{font-size:12px}
  .reward-indicator,.round-reward-cta{font-size:11px;padding:8px 10px}
  .utility-panels{gap:0}
}

/* A live mobile round keeps the whole, undistorted grove and its controls visible.
   120px reserves HUD, bottom controls, borders and the cabinet shadow. */
@media(max-width:820px){
  #cabinet[data-round-active="true"]{width:min(100%,calc((var(--round-height, calc(100dvh - 92px)) - 120px) * 1.5384615));margin-inline:auto;scroll-margin-block-start:8px}
  #cabinet[data-round-active="true"] .game-hud{height:56px;padding:6px 12px}
  #cabinet[data-round-active="true"] .game-hud strong{font-size:26px}
  #cabinet[data-round-active="true"] .hud-center{display:none}
  #cabinet[data-round-active="true"] canvas{display:block;width:100%;height:auto;aspect-ratio:1000/650;object-fit:contain}
  #cabinet[data-round-active="true"] .game-bottom{height:52px;padding:3px 8px;gap:4px}
  .mode-toggle button,#play,#resume,#retry-submit{min-height:44px}
  #pause{min-width:64px;min-height:44px}
  #cabinet[data-round-active="true"] .legend{gap:6px}
  #cabinet[data-round-active="true"] .legend>span{font-size:8px;gap:2px}
  #cabinet[data-round-active="true"] .legend svg{width:16px;height:16px}
  #cabinet[data-round-active="true"] .legend b{font-size:10px}
  #cabinet[data-round-active="true"] .start-card{transform:none}
  /* Only pause needs a compact card inside the fitted landscape/phone field. */
  #overlay[data-state="paused"]{padding:6px}
  #overlay[data-state="paused"] .start-card{width:300px;padding:10px 12px;box-shadow:3px 3px 0 #193f3229}
  #overlay[data-state="paused"] #overlay-kicker{display:none}
  #overlay[data-state="paused"] #overlay-title{font-size:24px;line-height:1.05;letter-spacing:-.6px}
  #overlay[data-state="paused"] #overlay-copy{font-size:11px;line-height:1.35;margin:6px 0 8px}
  #overlay[data-state="paused"] #resume{width:100%;min-height:44px;padding:8px 6px;font-size:10px;letter-spacing:.5px}
  #overlay[data-state="paused"] .card-note{display:none}
}

@media(max-width:820px) and (max-height:400px){
  #overlay[data-state="paused"] .start-card{padding:6px 10px}
  #overlay[data-state="paused"] #overlay-title{font-size:20px}
  #overlay[data-state="paused"] #overlay-copy{margin:4px 0 6px}
  #overlay[data-state="paused"] #resume{margin-top:0}
}

.movement-hint{position:absolute;top:10px;left:10px;right:10px;display:flex;align-items:center;justify-content:space-between;gap:8px;max-height:calc(100% - 20px);overflow:auto;padding:8px 10px;border:1px solid var(--ink);border-radius:8px;background:var(--paper);box-shadow:0 3px 0 #193f3229;font-size:12px;line-height:1.4;pointer-events:none}
.movement-hint p{margin:0;min-width:0}.movement-hint strong,.movement-hint span{display:block}
.movement-hint button{flex-shrink:0;min-width:60px;min-height:44px;padding:8px;border:1px solid var(--ink);border-radius:6px;background:var(--banana);font-weight:700;pointer-events:auto}