/* ============================================================================
 * RBC Quest — styles
 * Implements the "RBC Quest — Home" Claude Design.
 * Tokens below are the RBC Quest design-system tokens (colors, Fira Sans type,
 * spacing/radii/shadows). Light theme; blue is dominant, yellow is a scarce accent.
 * ==========================================================================*/

:root {
  color-scheme: light;

  /* ---- Core brand ---- */
  --rbc-blue:      #005DAA;
  --rbc-blue-dark: #003A75;
  --rbc-yellow:    #FFD200;
  --rbc-white:     #FFFFFF;

  /* ---- Blue tints — surfaces / panels ---- */
  --rbc-blue-300:  #73B0E3;
  --rbc-blue-200:  #C3E2FA;
  --rbc-blue-100:  #E3F4FF;

  /* ---- Accents ---- */
  --rbc-sun:       #FCA311;
  --rbc-red:       #F93F26;
  --rbc-green:     #2E9E5B;

  /* ---- Neutrals ---- */
  --ink:           #14213D;
  --ink-muted:     #5B6B82;
  --line:          #D7DEE8;
  --bg:            #F5F8FC;
  --text-muted:    var(--ink-muted);

  /* ---- Type ---- */
  --font-brand: "Fira Sans", "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ---- Radii ---- */
  --radius-sm:   6px;
  --radius:      10px;
  --radius-lg:   14px;
  --radius-pill: 999px;

  /* ---- Elevation — soft, blue-tinted ---- */
  --shadow-sm:    0 1px 2px rgba(20,33,61,.06), 0 1px 3px rgba(20,33,61,.08);
  --shadow-md:    0 2px 8px rgba(20,33,61,.08), 0 4px 16px rgba(20,33,61,.06);
  --shadow-lg:    0 8px 24px rgba(20,33,61,.10), 0 16px 40px rgba(20,33,61,.08);
  --shadow-brand: 0 6px 20px rgba(0,93,170,.28);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 340ms;

  --maxw: 1120px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-brand);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0; line-height: 1.15; }
p { margin: 0; }
img { max-width: 100%; }
a { color: var(--rbc-blue); text-decoration: none; }
a:hover { color: var(--rbc-blue-dark); }
a:focus-visible { outline: 2px solid var(--rbc-blue-300); outline-offset: 3px; border-radius: 4px; }
.hero__present a:focus-visible, .topbar__present a:focus-visible { outline-color: #fff; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--rbc-blue);
  color: #fff;
  padding: .6rem 1rem;
  border-radius: 0 0 var(--radius-sm) 0;
  z-index: 100;
}
.skip-link:focus { left: 0; }

/* -------------------------------------------------------------- top bar */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 0 clamp(16px, 4vw, 32px);
  min-height: 60px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.topbar__brand { display: flex; align-items: center; gap: 12px; padding: 11px 0; }
.topbar__rbc { height: 30px; width: auto; display: block; }
.topbar__divider { width: 1px; height: 24px; background: var(--line); display: block; }
.topbar__wordmark { font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.topbar__present { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-muted); }
.topbar__questor { height: 19px; width: auto; display: block; }

/* ----------------------------------------------------------------- hero */
.hero {
  position: relative;
  background:
    radial-gradient(125% 85% at 50% -20%, #0a6cc4 0%, transparent 60%),
    var(--rbc-blue);
  color: #fff;
  text-align: center;
  padding: clamp(44px, 7vw, 66px) clamp(20px, 5vw, 32px) clamp(40px, 6vw, 56px);
  overflow: hidden;
}
/* faint gold quest-sparkles drifting behind the hero content */
.hero__decor { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero__spark {
  position: absolute;
  width: var(--s, 12px);
  height: var(--s, 12px);
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%201%20L14.5%209.5%20L23%2012%20L14.5%2014.5%20L12%2023%20L9.5%2014.5%20L1%2012%20L9.5%209.5%20Z'%20fill='%23FFD200'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0;
  animation: twinkle 3.6s var(--ease-standard) var(--d, 0s) infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(.6); }
  50%      { opacity: .7; transform: scale(1); }
}
.hero__inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.hero__crest {
  display: inline-flex;
  background: #fff;
  border-radius: 16px;
  padding: 10px 14px;
  box-shadow: 0 12px 28px -14px rgba(0,0,0,.55);
  margin-bottom: 22px;
  animation: floaty 6s ease-in-out infinite;
}
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.hero__crest img { height: 60px; width: auto; display: block; }
.hero__title { font-size: clamp(34px, 6vw, 48px); font-weight: 800; letter-spacing: -.02em; line-height: 1.08; text-shadow: 0 2px 14px rgba(0,0,0,.14); }
.hero__tagline { margin-top: 12px; font-size: clamp(17px, 2.5vw, 20px); font-weight: 600; color: var(--rbc-blue-200); }
.hero__sub { margin: 14px auto 0; max-width: 47ch; font-size: 16px; line-height: 1.6; color: #E3F4FF; }
.hero__notes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}
.hero__note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.26);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 999px;
}
.hero__present { margin-top: 20px; font-size: 14px; color: var(--rbc-blue-200); }
.hero__present a {
  color: #fff;
  font-weight: 700;
  border-bottom: 2px solid var(--rbc-yellow);
  padding-bottom: 1px;
}
.hero__present a:hover { color: var(--rbc-yellow); }

/* --------------------------------------------------------------- catalog */
.catalog {
  flex: 1;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(34px, 5vw, 48px) clamp(16px, 4vw, 32px) 44px;
}
.catalog__head { text-align: center; margin-bottom: clamp(24px, 4vw, 32px); }
.catalog__heading { font-size: clamp(22px, 3.5vw, 26px); font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.catalog__hint { margin-top: 8px; font-size: 15px; color: var(--text-muted); }
.sections { display: flex; flex-direction: column; }

/* --------------------------------------------------------------- section */
.section { margin-bottom: 38px; }
.section:last-child { margin-bottom: 0; }
.section__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--line);
}
.section__titlerow { display: flex; align-items: center; gap: 12px; }
.section__bar { width: 8px; height: 22px; border-radius: 3px; background: var(--rbc-blue); display: block; flex: none; }
.section__title { font-size: 20px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.section__blurb { margin-left: 20px; font-size: 14px; color: var(--text-muted); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: 20px;
  margin-top: 22px;
}

/* ------------------------------------------------------------------ card */
.card {
  display: flex;
  flex-direction: column;
  background: var(--rbc-white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  animation: riseIn .5s var(--ease-out) backwards;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.card:hover, .card:focus-within {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: var(--rbc-blue-200);
}
@keyframes riseIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card__banner {
  position: relative;
  height: 152px;
  display: grid;
  place-items: center;
  background: var(--rbc-blue-100);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
/* glossy light sweep across the tile on hover */
.card__banner::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 55%;
  height: 100%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.5) 50%, transparent 100%);
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}
.card:hover .card__banner::after { animation: sheen .75s var(--ease-out); }
@keyframes sheen {
  0%   { left: -75%; opacity: 0; }
  18%  { opacity: 1; }
  100% { left: 130%; opacity: 0; }
}
.card__logo {
  height: 116px;
  width: auto;
  max-width: 84%;
  object-fit: contain;
  filter: drop-shadow(0 4px 9px rgba(20,33,61,.18));
  transition: transform var(--dur-slow) var(--ease-out);
}
.card:hover .card__logo { transform: scale(1.05); }
.card__emoji { font-size: 3rem; filter: drop-shadow(0 4px 10px rgba(20,33,61,.2)); }

.card__body { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 4px; flex: 1; }
.card__titlerow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.card__title { font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.card__blurb { font-size: 14.5px; line-height: 1.5; color: var(--text-muted); }
.card__skills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.card__foot { padding: 14px 18px 18px; margin-top: auto; }

/* ------------------------------------------------------- badge (tint tone) */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 13px;
  padding: 5px 12px;
  border-radius: 999px;
  line-height: 1.2;
  white-space: nowrap;
  background: var(--rbc-blue-100);
  color: var(--rbc-blue-dark);
}
.card__age { flex: none; }

/* ---------------------------------------------------------------- button */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 20px;
  border-radius: var(--radius);
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .01em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              filter var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.btn--play { background: var(--rbc-blue); color: #fff; box-shadow: var(--shadow-brand); }
.btn--play:hover { background: var(--rbc-blue-dark); color: #fff; box-shadow: 0 10px 26px rgba(0,58,117,.34); }
.btn--play:active { transform: scale(.98); }
.btn--play:focus-visible { outline: 3px solid var(--rbc-blue-300); outline-offset: 2px; }
.btn__arrow { font-size: 1.05em; transition: transform var(--dur-fast) var(--ease-standard); }
.btn--play:hover .btn__arrow { transform: translateX(3px); }
.btn--disabled {
  background: var(--rbc-blue-100);
  color: var(--text-muted);
  border-color: var(--rbc-blue-200);
  cursor: not-allowed;
  font-weight: 600;
}

/* ---------------------------------------------------------------- footer */
.site-footer { background: #fff; border-top: 1px solid var(--line); }
.site-footer__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 22px clamp(16px, 4vw, 32px);
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: center;
  justify-content: space-between;
}
.site-footer__brand { display: flex; align-items: center; gap: 14px; }
.site-footer__logo { height: 34px; width: auto; display: block; }
.site-footer__tag { font-size: 14px; font-weight: 800; color: var(--ink); }
.site-footer__studio { margin-top: 2px; font-size: 12px; color: var(--text-muted); }
.site-footer__meta { text-align: right; }
.site-footer__mark { font-size: 14px; font-weight: 800; color: var(--rbc-blue); }
.site-footer__note { margin-top: 2px; font-size: 12px; color: var(--text-muted); }

/* ------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .card:hover, .card:focus-within { transform: none; }
  .card:hover .card__logo { transform: none; }
}

/* ============================================================================
 * DoughJo — /finskool mockup only (scoped under body.finskool)
 * Additive; reuses every existing component above. No new @keyframes, so the
 * reduced-motion block already covers it.
 * ==========================================================================*/

/* small "concept" label where the homepage shows "Presented by" */
.finskool .topbar__concept { font-size: 13px; color: var(--text-muted); }

/* concept (emoji) cards ride a bold accent-gradient banner; real logo cards
   keep the light --rbc-blue-100 tile from .card__banner above */
.finskool .card__banner--accent { border-bottom-color: rgba(255, 255, 255, .25); }
.finskool .card__banner--accent .card__emoji {
  font-size: 3.4rem;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .28));
}

/* topic pill pinned to the banner corner */
.finskool .card__tag {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 12px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, .92);
  color: var(--rbc-blue-dark);
  border: 1px solid rgba(0, 93, 170, .15);
}

/* filter chip rows (Age / Topic) */
.finskool .filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
}
.finskool .filters:last-of-type { margin-bottom: 28px; }
.finskool .filters__label {
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  margin: 0 4px 0 2px;
}
.finskool .chip {
  font: 600 13px/1 var(--font-brand);
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.finskool .chip:hover { border-color: var(--rbc-blue-300); }
.finskool .chip[aria-pressed="true"] {
  background: var(--rbc-blue);
  color: #fff;
  border-color: var(--rbc-blue);
}
.finskool .chip:focus-visible { outline: 3px solid var(--rbc-blue-300); outline-offset: 2px; }

/* featured rail accent */
.finskool .section--featured {
  background: linear-gradient(180deg, #EAF2FB, transparent);
  border: 1px solid var(--rbc-blue-200);
  border-radius: var(--radius-lg);
  padding: 20px clamp(14px, 2vw, 22px);
  margin-bottom: 34px;
}
.finskool .section--featured .section__head { border-bottom-color: var(--rbc-blue-200); }

/* empty-state when a filter combination has no games */
.finskool .fs-empty {
  padding: 28px 4px;
  color: var(--text-muted);
  font-size: 15px;
  text-align: center;
}

/* ============================================================
 * DoughJo concept teaser — dark banner linking to /doughjo
 * ============================================================ */
.dj-promo {
  display: flex;
  align-items: center;
  gap: 16px;
  /* same gutters as .catalog so the banner lines up with the card grid */
  width: calc(100% - 2 * clamp(16px, 4vw, 32px));
  max-width: calc(var(--maxw) - 2 * clamp(16px, 4vw, 32px));
  margin: 26px auto 0;
  padding: 15px 22px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(closest-side at 85% 0%, rgba(30,86,200,.55), transparent),
    #030F23;
  border: 1px solid rgba(255,210,0,.35);
  box-shadow: var(--shadow-md);
  color: #EAF0FA;
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base);
}
.dj-promo::after {           /* passing sheen */
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -80px;
  width: 60px;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.14), transparent);
  transform: skewX(-18deg);
  animation: djPromoSheen 5.5s ease-in-out 1.5s infinite;
  pointer-events: none;
}
@keyframes djPromoSheen {
  0%   { transform: translateX(0) skewX(-18deg); }
  55%, 100% { transform: translateX(calc(100vw)) skewX(-18deg); }
}
.dj-promo:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(255,210,0,.75);
  color: #FFFFFF;
}
.dj-promo:focus-visible { outline: 3px solid var(--rbc-yellow); outline-offset: 3px; }
.dj-promo__badge {
  flex: none;
  background: var(--rbc-yellow);
  color: #08122B;
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  transform: rotate(-2deg);
}
.dj-promo__coin { flex: none; width: 36px; height: 36px; filter: drop-shadow(0 3px 8px rgba(0,0,0,.4)); }
.dj-promo__copy { flex: 1; min-width: 200px; font-size: 15.5px; }
.dj-promo__copy strong { color: var(--rbc-yellow); font-weight: 800; letter-spacing: .02em; }
.dj-promo__cta {
  flex: none;
  color: #08122B;
  background: linear-gradient(180deg, #FFE566, var(--rbc-yellow));
  font-weight: 800;
  font-size: 14px;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  box-shadow: 0 3px 10px rgba(255,210,0,.35);
  white-space: nowrap;
}
.dj-promo:hover .dj-promo__cta { filter: brightness(1.06); }
@media (max-width: 720px) {
  .dj-promo { flex-wrap: wrap; }
  .dj-promo__copy { flex-basis: 100%; order: 3; }
}
@media (prefers-reduced-motion: reduce) {
  .dj-promo::after { animation: none; }
}