/* responsive.css — breakpoints, touch layouts and small-screen legibility. */

/* The game is designed for landscape play; no rotate overlay or
   orientation-lock logic ships with it. */

/* ---------------- touch ergonomics ---------------- */

@media (pointer: coarse) {
  /* Comfortable tap targets everywhere (44px+ per platform guidelines). */
  .btn { min-height: 46px; }
  .btn-small { min-height: 40px; }
  .card { min-height: 48px; padding: 0.7rem 1rem; }
  .tab { padding: 0.6rem 1.1rem; min-height: 40px; }
  .setting-row { min-height: 44px; }
  .setting-row input[type="range"] { height: 34px; flex: 1; max-width: 55%; }
  .setting-row input[type="checkbox"] { width: 26px; height: 26px; }
  .setting-row select { min-height: 40px; }

  /* No hover states on touch — keep selected/active feedback only. */
  .btn:hover:not(:disabled) { transform: none; box-shadow: none; }
  .card:hover:not(.locked) { transform: none; }

  /* Keep toasts and power-up chips clear of the thumb zones. */
  #toasts { bottom: 20vh; }
  .hud-powerups { bottom: max(24vh, 120px); }

  /* Powers stay a single top-left column on touch; the labels drop away
     so the circles and key badges keep their size for thumbs. */
  .hud-hint { display: none; }
  .hud-powerbar { top: 108px; gap: 0.35rem; }
  .hud-combatbar { top: 108px; gap: 0.35rem; }
  .power-chip { grid-template-columns: 42px auto; }
  .combat-chip { grid-template-columns: auto 42px; }
  .pc-ring { width: 42px; height: 42px; }
  .pc-name { display: none; }

  /* Rearrange the HUD around the touch controls:
     speed moves to bottom-centre (the stick owns bottom-left),
     the boost bar rises above the JUMP cluster,
     and the top buttons sit left of the centred score. */
  .hud-bottomleft {
    left: 50%;
    bottom: 6px;
    transform: translateX(-50%);
    text-align: center;
  }
  .hud-bottomleft .hud-speed { font-size: 2rem; }
  .hud-bottomleft .hud-alt { font-size: 0.7rem; margin-top: 0.1rem; }
  /* #hud id keeps this winning over the short-screen "bottom: 8px" rule. */
  #hud .hud-bottomright { bottom: calc(12vh + 104px); }
  .boost-bar { width: 130px; height: 10px; }
  /* Four buttons now — anchor them left of the minimap so the centred
     score and combo counter stay unobstructed. */
  .touch-top { left: auto; right: calc(2vw + 122px); transform: none; }
  #minimap { width: 108px; height: 108px; }
  .hud-timer { font-size: 1.5rem; }
  .hud-score { font-size: 1.3rem; }
  .hud-weather { font-size: 0.68rem; }
}

/* ---------------- compact layouts ---------------- */

/* The ride screen keeps its three columns at every size — it is a fixed
   grid that fits the viewport, never a scrolling list. */

@media (max-width: 640px), (max-height: 480px) {
  .rect-link { padding: 0.5rem 0.7rem; }
  .rect-link > span { font-size: 0.76rem; }
  .btn-big { font-size: 1rem; padding: 0.7rem 1.6rem; }
  .player-card { padding: 0.6rem 0.7rem; }

  .hud-speed { font-size: 2.1rem; }
  .hud-timer { font-size: 1.4rem; }
  .hud-score { font-size: 1.2rem; }
  .hud-countdown { font-size: 4rem; }
  #minimap { width: 104px; height: 104px; }
  .trick-toast { font-size: 1rem; }

  .pause-panel, .results-panel { padding: 1.1rem 1.2rem; }
  .results-row { font-size: 0.85rem; gap: 1rem; }
}

/* Short landscape phones: tighten vertical chrome, spread menus wide. */
@media (max-height: 420px) {
  .hud-topleft, .hud-topright, .hud-topcenter { top: 6px; }
  .hud-bottomleft, .hud-bottomright { bottom: 8px; }
  .hud-powerups { bottom: 96px; }
  .touch-stick { bottom: 8vh; width: 100px; height: 100px; }
  .touch-buttons { bottom: 7vh; }
  .touch-btn { width: 56px; height: 56px; }
  .touch-btn-big { width: 72px; height: 72px; }
  .screen { padding: 8px 12px; }
  .rect-brand .game-title { font-size: 1.4rem; }
  .game-subtitle { display: none; }

  /* A phone held sideways is a wide, short frame: keep the three columns
     (they fit widthwise) and buy the height back from the chrome. */
  .menu-rect { padding: 0.5rem 0.7rem 0.45rem; gap: 0.35rem; border-radius: 14px; }
  .rect-col { padding: 0.45rem; gap: 0.32rem; }
  .rect-col-head { font-size: 0.55rem; letter-spacing: 0.14em; }
  .rect-links { gap: 0.3rem; }
  .rect-link { padding: 0.34rem 0.5rem; }
  .rect-foot { padding-top: 0.2rem; }
  .pause-panel, .results-panel { max-height: 92vh; padding: 0.9rem 1.2rem; gap: 0.5rem; }
  .results-medal .medal-big { font-size: 2rem; }
  .settings-body { gap: 0.5rem; }

  /* Ride screen on a short phone: same three columns, tighter chrome. */
  .ride-layout { gap: 0.4rem; }
  .ride-col { padding: 0.45rem; gap: 0.35rem; }
  .tile-grid { gap: 0.18rem; }
  .ride-tile { padding: 0.12rem 0.35rem 0.12rem 0.5rem; gap: 0.35rem; border-radius: 8px; }
  .tile-icon { flex-basis: 1.05rem; font-size: 0.82rem; }
  .tile-swatch { width: 15px; height: 15px; margin: 0 calc((1.05rem - 15px) / 2); }
  .tile-name { font-size: 0.56rem; }
  .tile-check { font-size: 0.56rem; }
  .desc-square { padding: 0.5rem; }
  #ride-title { font-size: 0.72rem; }
  #ride-desc { font-size: 0.62rem; -webkit-line-clamp: 3; }
  .feat-line { font-size: 0.58rem; -webkit-line-clamp: 1; }
  .ride-setup { padding: 0.4rem 0.5rem; gap: 0.25rem; }
  .diff-chip { font-size: 0.52rem; padding: 0.2rem 0.32rem; }
  .weather-chip { width: 22px; font-size: 0.68rem; }
  .diff-desc { display: none; }
  .ride-header { margin-bottom: 0.4rem; }
}

/* ---------------- the main-menu rectangle ---------------- */

/*
 * The frame keeps its three columns at every landscape size and folds to
 * one stacked column on a phone. What is in each column never changes;
 * only how they wrap does.
 *
 * There is deliberately no two-column middle step. Folding to two columns
 * costs a second grid row, which halves the height each column gets — and
 * the rider column is the tall one. Three narrow columns that fit beat two
 * wide columns that do not.
 */

/* Two columns only where there is genuine height to spend on a second row
   — a tablet held portrait. Anywhere shorter keeps all three. */
@media (max-width: 1080px) and (min-width: 641px) and (min-height: 900px) {
  .rect-body { grid-template-columns: 1fr 1fr; }
  .rect-col-daily { grid-column: 1 / -1; }
}

/* One column, and now the frame is allowed to scroll internally: on a
   phone the alternative is clipping options off the bottom. */
@media (max-width: 640px) {
  .menu-rect-screen { overflow-y: auto; justify-content: flex-start; }
  .menu-rect {
    width: 100%;
    max-height: none;
    /* `flex: none` is the part that matters: as a shrinkable flex item the
       frame would be squeezed back to the viewport height and every column
       would scroll internally. Fixed to its content, the screen scrolls
       instead — which is the right behaviour on a phone. */
    flex: none;
    padding: 0.8rem 0.75rem 0.7rem;
    border-radius: 16px;
  }
  .rect-body { grid-template-columns: 1fr; }
  .rect-col { overflow: visible; }
  /* Stacked, PLAY has to be the thing above the fold — so the ride column
     leads and the profile drops beneath it. */
  .rect-col-play { order: 1; }
  .rect-col-you { order: 2; }
  .rect-col-daily { order: 3; }
  .rect-head { flex-direction: column; align-items: stretch; gap: 0.5rem; }
  .rect-links { margin-top: 0.4rem; }
  .rect-foot { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
}

/*
 * Short landscape screens. The frame is height-bound here, so every
 * destination has to fit without the rider column scrolling: the chrome
 * shrinks, and the next-unlock chip (which the Choose Ride ladder states
 * in full) gives up its row.
 */
@media (max-height: 520px) and (min-width: 641px) {
  .menu-rect { gap: 0.45rem; padding: 0.6rem 0.8rem 0.5rem; }
  .rect-head { padding-bottom: 0.35rem; }
  .rect-brand .game-subtitle { display: none; }
  .rect-col { padding: 0.5rem; gap: 0.35rem; }
  .rect-col-play .btn-big { font-size: 1.05rem; padding: 0.55rem 1rem; max-height: 110px; }
  .rect-link { padding: 0.3rem 0.5rem; }
  .rect-link > span { font-size: 0.7rem; }
  .rect-links { gap: 0.32rem; }
  .player-card { padding: 0.45rem 0.55rem; gap: 0.32rem; }
  .player-card-row { gap: 0.6rem; }
  .next-unlock { display: none; }
  .db-total { margin-top: 0.35rem; padding: 0.28rem 0.45rem; }
  .rect-foot { padding-top: 0.3rem; }
}

/* Narrower still and the two secondary buttons stop being a row — "How To
   Play" on three lines is not a button. */
@media (max-width: 900px) and (min-width: 641px) {
  .rect-links.two { flex-direction: column; }
}

/* The animated frame lighting is decoration; motion-sensitive players
   keep the layout and lose the movement. */
@media (prefers-reduced-motion: reduce) {
  .menu-rect, .rect-sheen, .rect-aura,
  .rect-col, .rect-head, .rect-foot,
  .rect-col-play .btn-big, .db-row { animation: none; }
}

/* Large desktop: give the frame more air. */
@media (min-width: 1600px) {
  .menu-rect { padding: 1.35rem 1.6rem 1.1rem; gap: 0.9rem; }
  .rect-body { gap: 1rem; }
  .rect-col { padding: 0.9rem; }
  .hud-speed { font-size: 3.6rem; }
}

/* ---------------- device safe areas ---------------- */

/* Notches, rounded corners and dynamic islands. Gameplay stays edge to
   edge; only the important UI is pulled inside the safe area. */
@supports (padding: max(0px)) {
  .hud-topleft { left: max(2vw, env(safe-area-inset-left, 10px)); }
  .hud-topright { right: max(2vw, env(safe-area-inset-right, 10px)); }
  .hud-topleft, .hud-topcenter, .hud-topright { top: max(10px, env(safe-area-inset-top, 10px)); }
  .hud-bottomleft { bottom: max(10px, env(safe-area-inset-bottom, 10px)); }
  .hud-bottomright { bottom: max(10px, env(safe-area-inset-bottom, 10px)); }
  .touch-stick { left: max(4vw, env(safe-area-inset-left, 12px)); }
  .touch-buttons { right: max(4vw, env(safe-area-inset-right, 12px)); }
  .touch-top { top: max(8px, env(safe-area-inset-top, 8px)); }
  .hud-powerbar { left: max(8px, env(safe-area-inset-left, 8px)); }
  .screen { padding-left: max(12px, env(safe-area-inset-left, 12px));
            padding-right: max(12px, env(safe-area-inset-right, 12px)); }
}

/* ---------------- small-screen legibility ---------------- */

/* The smallest HUD text is floored in px rather than left to shrink, so it
   stays readable on small screens at devicePixelRatio 1. */
@media (max-width: 960px), (max-height: 540px) {
  .hud-weather { font-size: 11px; }
  .hud-alt { font-size: 11px; }
  .hud-camname { font-size: 11px; }
  .hud-objective { font-size: 13px; }
  .hud-goal { font-size: 11px; }
  .boost-label { font-size: 10px; }
  .card-name { font-size: 13px; }
  .ride-best { font-size: 12px; }
  .feat-line { font-size: 12px; }
  .results-row { font-size: 13px; }
  .xp-label { font-size: 12px; }
  .setting-hint { font-size: 12px; }
  .menu-play-note { font-size: 12px; }
}

/* ---------------- daily challenge board ---------------- */

/*
 * The board is a column of the menu rectangle now, so it needs no
 * placement rules — only type that stays legible as the frame tightens.
 * It is never hidden: three objectives a player cannot see are three
 * objectives that do not exist.
 */
@media (max-width: 640px), (max-height: 620px) {
  .db-row { padding: 0.32rem 0.4rem; }
  .db-text b { font-size: 0.7rem; }
  .db-text small { font-size: 12px; }
  .db-pay { font-size: 11px; }
  .db-bar { width: 48px; }
}

@media (max-height: 420px) {
  .db-text small { display: none; }
  .db-row { padding: 0.24rem 0.35rem; }
  .btn-daily .daily-text small { display: none; }
}

/* Keep the new small type above the 10px legibility floor at
   devicePixelRatio 1. */
@media (max-width: 960px), (max-height: 540px) {
  .card-perk-desc { font-size: 11px; }
  .stat-bar { font-size: 11px; }
  .deck-name { font-size: 11px; }
  .deck-slot { font-size: 10px; }
  .shop-text small { font-size: 12px; }
  .mastery-text small { font-size: 11px; }
  .nu-chip { font-size: 11px; }
  .dna-row { font-size: 11px; }
  .code-note { font-size: 11px; }
  .wager-line { font-size: 11px; }
  .hud-chip { font-size: 11px; }
  .combo-bank { font-size: 11px; }
  .share-label { font-size: 10px; }
  .lu-kind { font-size: 11px; }
}