/* Farm Fury Arcade — webfonts.
   SUBSTITUTION NOTE: no original font binaries were supplied with the brand assets.
   The key art logotype is a heavy, slanted, sharp-cut cartoon display face; the nearest
   Google Fonts matches are used below. Swap the @font-face / @import when real files arrive. */
@import url("https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Baloo+2:wght@400;500;600;700;800&family=Bungee&display=swap");

:root {
  --font-display: "Luckiest Guy", "Baloo 2", system-ui, sans-serif;  /* logotype, headings, combo callouts */
  --font-ui: "Baloo 2", system-ui, sans-serif;                        /* body, buttons, labels */
  --font-numeric: "Bungee", "Luckiest Guy", system-ui, sans-serif;    /* scores, timers, counters */
}

/* Farm Fury Arcade — colour system. Warm, sun-baked, high-saturation cartoon palette
   sampled from the key art and character plaques. */
:root {
  /* Fury orange — the logotype gradient and the primary action colour */
  --fury-50:  #FFF1DF;
  --fury-100: #FFD9AE;
  --fury-200: #FFB661;
  --fury-300: #FB9128;
  --fury-400: #F2790F;
  --fury-500: #E2580E;
  --fury-600: #C24007;
  --fury-700: #8E2B04;

  /* Corn yellow — coins, crops, sparkles, highlights */
  --corn-100: #FFF0B8;
  --corn-200: #FFDE6B;
  --corn-300: #FFC72C;
  --corn-400: #F2A80A;
  --corn-500: #C97F05;

  /* Wood — plaques, panels, frames, rails */
  --wood-100: #E2A45C;
  --wood-200: #C97E2E;
  --wood-300: #A8601F;
  --wood-400: #8A4A16;
  --wood-500: #6B3410;
  --wood-600: #4A2209;

  /* Sky — backgrounds, cool counterweight to the warm ground */
  --sky-100: #CFEBFB;
  --sky-200: #7FC8F0;
  --sky-300: #2C9BE0;
  --sky-400: #1573B8;
  --sky-500: #0E4F85;
  --sky-600: #083159;

  /* Ground / hay */
  --hay-100: #FFF6E2;
  --hay-200: #F3DBA6;
  --hay-300: #E8C27A;
  --hay-400: #C99C50;

  /* Barn red — danger, robots hitting you, lives */
  --barn-300: #E4564A;
  --barn-400: #C8382E;
  --barn-500: #9B2318;

  /* Pasture green — success, crops collected */
  --pasture-300: #7CC24A;
  --pasture-400: #55A02B;
  --pasture-500: #3A7419;

  /* Percy pink — secondary playful accent (plaque nameplates, hearts) */
  --pink-300: #FF7FC0;
  --pink-400: #FF4FA3;
  --pink-500: #D01F78;

  /* Robot steel — the Harvest Robots, disabled states, machinery chrome */
  --steel-100: #E3E8ED;
  --steel-200: #B9C3CC;
  --steel-300: #8C97A3;
  --steel-400: #5E6874;
  --steel-500: #3A414B;

  /* Ink — every cartoon outline in the brand is this, never pure black */
  --ink-900: #1A1006;
  --ink-800: #2A1A0A;
  --ink-700: #46290E;
  --white: #FFFFFF;

  /* ---- Semantic aliases ---- */
  --bg-sky: var(--sky-300);
  --bg-ground: var(--hay-300);
  --surface-panel: var(--wood-300);
  --surface-panel-lit: var(--wood-200);
  --surface-card: var(--hay-100);
  --surface-nameplate: var(--fury-300);
  --surface-hud: rgba(42, 26, 10, 0.78);

  --text-body: var(--ink-800);
  --text-muted: var(--wood-500);
  --text-on-dark: var(--hay-100);
  --text-on-fury: var(--white);
  --text-display: var(--corn-300);
  --text-link: var(--fury-600);
  --text-link-hover: var(--fury-700);

  --outline-ink: var(--ink-900); /* @kind color */
  --border-plank: var(--wood-500); /* @kind color */

  --action-primary: var(--fury-500);
  --action-primary-hover: var(--fury-400);
  --action-primary-press: var(--fury-600);
  --action-secondary: var(--corn-300);
  --action-danger: var(--barn-400);
  --action-disabled: var(--steel-300);

  --state-success: var(--pasture-400);
  --state-warning: var(--corn-400);
  --state-danger: var(--barn-400);
  --state-info: var(--sky-300);

  /* Signature gradients — the logotype fill and the metal/gold rails */
  --grad-fury: linear-gradient(180deg, var(--corn-300) 0%, var(--fury-400) 48%, var(--fury-600) 100%); /* @kind other */
  --grad-gold: linear-gradient(180deg, #FFEFA8 0%, var(--corn-300) 45%, var(--corn-500) 100%); /* @kind other */
  --grad-plank: linear-gradient(180deg, var(--wood-200) 0%, var(--wood-300) 60%, var(--wood-500) 100%); /* @kind other */
  --grad-sky: linear-gradient(180deg, var(--sky-400) 0%, var(--sky-200) 55%, var(--hay-200) 100%); /* @kind other */
  --grad-sunburst: radial-gradient(circle at 50% 38%, rgba(255,255,255,.85) 0%, rgba(255,231,160,.45) 28%, rgba(255,231,160,0) 62%); /* @kind other */
}

/* Farm Fury Arcade — type scale. Big, bold, few sizes. Display is always uppercase
   with a hard ink outline; UI text is rounded and semi-bold or heavier. */
:root {
  --fs-display-xl: 88px;  /* hero logotype lockups */
  --fs-display-l:  64px;  /* screen titles, COMBO! callouts */
  --fs-display-m:  44px;  /* section headings, modal titles */
  --fs-display-s:  30px;  /* card titles, nameplates */
  --fs-title:      24px;  /* sub-headings */
  --fs-body-l:     20px;  /* lead paragraphs, kid-readable body */
  --fs-body:       17px;  /* default body */
  --fs-label:      15px;  /* buttons, stat labels */
  --fs-micro:      13px;  /* meta, legal */

  --lh-display: 0.92; /* @kind font */
  --lh-title: 1.15; /* @kind font */
  --lh-body: 1.45; /* @kind font */

  --ls-display: 0.02em; /* @kind font */
  --ls-label: 0.08em; /* @kind font */   /* labels and buttons are tracked out and uppercase */
  --ls-body: 0; /* @kind font */

  --fw-body: 500; /* @kind font */
  --fw-strong: 700; /* @kind font */
  --fw-heavy: 800; /* @kind font */

  /* Outline "stroke" recipes — the single most recognisable type treatment in the brand */
  --type-outline-1: 1px 0 0 var(--ink-900), -1px 0 0 var(--ink-900), 0 1px 0 var(--ink-900), 0 -1px 0 var(--ink-900); /* @kind other */
  --type-outline-2: 2px 0 0 var(--ink-900), -2px 0 0 var(--ink-900), 0 2px 0 var(--ink-900), 0 -2px 0 var(--ink-900),
                    2px 2px 0 var(--ink-900), -2px 2px 0 var(--ink-900), 2px -2px 0 var(--ink-900), -2px -2px 0 var(--ink-900);
  --type-outline-3: 3px 0 0 var(--ink-900), -3px 0 0 var(--ink-900), 0 3px 0 var(--ink-900), 0 -3px 0 var(--ink-900),
                    3px 3px 0 var(--ink-900), -3px 3px 0 var(--ink-900), 3px -3px 0 var(--ink-900), -3px -3px 0 var(--ink-900),
                    0 6px 0 rgba(26,16,6,.55);
}

/* Farm Fury Arcade — spacing & sizing. 4px base, generous at large sizes.
   Touch targets never below 48px: the audience is under 16 and often on tablets. */
:root {
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  --gutter-screen: var(--sp-6);
  --gap-tight: var(--sp-2);
  --gap-default: var(--sp-4);
  --gap-loose: var(--sp-6);

  --control-h-sm: 48px;
  --control-h-md: 60px;
  --control-h-lg: 76px;

  --maze-cell: 32px; /* @kind spacing */   /* one maze tile in the arcade grid */
  --hud-h: 88px; /* @kind spacing */

  --container-max: 1180px; /* @kind spacing */
}

/* Farm Fury Arcade — borders, radii, shadows, textures.
   Everything in this brand is a sticker: fat ink outline, soft round corners,
   a hard offset shadow underneath, and an inner top highlight. */
:root {
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;
  --r-plaque: 28px;   /* the wooden character plaque corner */

  --bw-hair: 2px; /* @kind other */
  --bw-ink: 3px; /* @kind other */      /* standard cartoon outline on controls */
  --bw-ink-thick: 5px; /* @kind other *//* outline on large panels and plaques */

  --border-ink: var(--bw-ink) solid var(--ink-900); /* @kind other */
  --border-ink-thick: var(--bw-ink-thick) solid var(--ink-900); /* @kind other */

  /* Hard "sticker drop" — no blur, sits directly under the element */
  --shadow-sticker: 0 5px 0 var(--ink-900);
  --shadow-sticker-lg: 0 8px 0 var(--ink-900);
  /* Pressed = shadow collapses, element moves down */
  --shadow-sticker-press: 0 2px 0 var(--ink-900);

  /* Soft ambient drop for floating panels over the maze */
  --shadow-panel: 0 10px 0 var(--ink-900), 0 22px 34px rgba(26, 16, 6, .38);
  --shadow-float: 0 14px 28px rgba(26, 16, 6, .32);

  /* Inner bevels: top highlight + bottom shade, gives painted-wood volume */
  --inset-bevel: inset 0 3px 0 rgba(255, 255, 255, .38), inset 0 -5px 0 rgba(26, 16, 6, .22); /* @kind shadow */
  --inset-bevel-gold: inset 0 3px 0 rgba(255, 255, 255, .6), inset 0 -6px 0 rgba(201, 127, 5, .55); /* @kind shadow */

  /* Glows for power-ups, active abilities and combo readiness */
  --glow-corn: 0 0 0 4px rgba(255, 199, 44, .55), 0 0 28px rgba(255, 199, 44, .7); /* @kind shadow */
  --glow-fury: 0 0 0 4px rgba(226, 88, 14, .5), 0 0 30px rgba(242, 121, 15, .65); /* @kind shadow */
  --glow-danger: 0 0 0 4px rgba(200, 56, 46, .5), 0 0 26px rgba(200, 56, 46, .6); /* @kind shadow */

  /* Protection scrim under HUD text laid over artwork */
  --scrim-top: linear-gradient(180deg, rgba(26,16,6,.72) 0%, rgba(26,16,6,0) 100%); /* @kind other */
  --scrim-bottom: linear-gradient(0deg, rgba(26,16,6,.78) 0%, rgba(26,16,6,0) 100%); /* @kind other */

  /* Plank texture: repeating warm stripes, used on rails and panel bodies */
  --texture-plank: repeating-linear-gradient(90deg, rgba(26,16,6,.10) 0 2px, rgba(255,255,255,0) 2px 46px); /* @kind other */
  --texture-field: repeating-linear-gradient(45deg, rgba(85,160,43,.14) 0 14px, rgba(124,194,74,.14) 14px 28px); /* @kind other */
  --blur-glass: blur(10px); /* @kind other */
}

/* Farm Fury Arcade — motion. Nothing eases out politely; everything overshoots,
   lands, and settles. Short durations, big amplitude. */
:root {
  --dur-instant: 80ms; /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-base: 220ms; /* @kind other */
  --dur-slow: 380ms; /* @kind other */
  --dur-celebrate: 900ms; /* @kind other */

  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1); /* @kind other */   /* default: pop-in with overshoot */
  --ease-squash: cubic-bezier(.36, 0, .66, -0.56); /* @kind other */  /* anticipation before a launch */
  --ease-out: cubic-bezier(.22, .61, .36, 1); /* @kind other */
  --ease-linear: linear; /* @kind other */                             /* looping idle/sparkle cycles */

  --press-scale: .94; /* @kind other */
  --hover-scale: 1.04; /* @kind other */
  --hover-lift: -2px; /* @kind other */
}

@keyframes ff-pop-in { 0% { transform: scale(.7); opacity: 0 } 100% { transform: scale(1); opacity: 1 } }
@keyframes ff-bob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }
@keyframes ff-wiggle { 0%, 100% { transform: rotate(-2.5deg) } 50% { transform: rotate(2.5deg) } }
@keyframes ff-sparkle { 0%, 100% { opacity: .35; transform: scale(.85) } 50% { opacity: 1; transform: scale(1.15) } }
@keyframes ff-pulse-glow { 0%, 100% { box-shadow: var(--glow-corn) } 50% { box-shadow: 0 0 0 8px rgba(255,199,44,.25), 0 0 40px rgba(255,199,44,.8) } }
@keyframes ff-shake { 0%,100% { transform: translateX(0) } 20% { transform: translateX(-6px) } 40% { transform: translateX(5px) } 60% { transform: translateX(-3px) } 80% { transform: translateX(2px) } }