/* ============================================================================================
   THEME: every size and colour for the start and high-score screens lives here.
   Change --ui-scale to grow or shrink everything at once; the other sizes are multiples of it.
   ============================================================================================ */
:root {
  /* ---- overall ---- */
  --ui-scale: 1;                          /* 1 = designed size; 0.8 smaller, 1.2 bigger */

  /* ---- panel (the hand-drawn comic frame) ---- */
  --panel-width: 640px;                   /* preferred width */
  --panel-max-width: 100%;                /* never wider than the page (minus --page-gutter) */
  --panel-min-height: 0px;                /* e.g. 80vh to make it tall */
  --panel-border: calc(30px * var(--ui-scale));   /* drawn thickness of the frame */
  --panel-padding-y: calc(34px * var(--ui-scale));
  --panel-padding-x: calc(30px * var(--ui-scale));
  --page-gutter: 16px;                    /* space around the panel */

  /* ---- type ---- */
  --font-arcade: 'Press Start 2P', ui-monospace, monospace;
  --text-xs: calc(11px * var(--ui-scale));   /* 11 px floor for anything readable (Apple HIG); was 9 */
  --text-sm: calc(12px * var(--ui-scale));   /* was 11 */
  --text-md: calc(14px * var(--ui-scale));
  --text-lg: calc(20px * var(--ui-scale));
  --text-title: calc(30px * var(--ui-scale));
  --line: 1.6;

  /* ---- spacing ---- */
  --gap-xs: calc(6px * var(--ui-scale));
  --gap-sm: calc(12px * var(--ui-scale));
  --gap-md: calc(20px * var(--ui-scale));
  --gap-lg: calc(32px * var(--ui-scale));

  /* ---- roster sprites on the start screen ---- */
  --sprite-size: calc(64px * var(--ui-scale));

  /* ---- world map (continent picker) ---- */
  --map-width: 100%;                      /* of the panel's inside width */
  --map-outline: 3px;                     /* white edge around the blinking continent */
  --map-glow: 1.12;                       /* how much brighter the picked continent gets */

  /* ---- Kev's flower standing on THATBUNNYBEAR.COM ---- */
  --flower-height: calc(42px * var(--ui-scale));   /* flavour, not a button: keep it small */
  --flower-x: 0px;                        /* nudge left (-) or right (+) of the text's centre */
  --flower-sink: 0.3em;                   /* how far the stem base dips into the text */

  /* ---- colour ---- */
  --paper: #FCFBF7;                       /* brand page colour */
  --panel-fill: rgb(223 255 17);          /* the panel's chartreuse, measured from the drawing */
  --ink: #1f1a12;
  --red: #d42a2a;                         /* GAME OVER, 1UP */
  --magenta: #b0169c;                     /* highlights (Kev's flower colour family) */
  --muted: #4a4a22;
  --matcha: #5B8930;                      /* moegi 萌黄: THATBUNNYBEAR.COM, the flower's grass */
  --blink-ms: 1000ms;                     /* PUSH START / your-row blink speed */
}