/* The game's own identity, framed in Nolia's paper cards and playful collage.
   Source palettes: app/app_theme.dart, pulma_theme.dart and trazo_theme.dart.
   Only brand names use the small Roboto subset; Nolia keeps Fredoka. */
@font-face {
  font-family: GameWordmarks;
  src: url('/nolia-assets/brands/wordmarks.ttf') format('truetype');
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: TrazoDraw;
  src: url('/nolia-assets/brands/trazo-draw.otf') format('opentype');
  font-weight: 400;
  font-display: block;
}
:root {
  --hilo-purple: #9262fb;
  --hilo-green: #5cea8b;
  --pulma-pink: #ff4f91;
  --pulma-grape: #6f3dff;
  --pulma-lime: #c9f45d;
  --trazo-yellow: #ffd84d;
  --trazo-turquoise: #23c7b7;
  --trazo-ink: #20233b;
}
.card-art .game-wordmark,
.art-tile .game-wordmark {
  font-family: GameWordmarks, 'Arial Black', sans-serif;
  font-weight: 900;
  font-size: 43px;
  line-height: .98;
  letter-spacing: -2px;
  z-index: 1;
}
.card-art .hilo-wordmark,
.art-tile .hilo-wordmark {
  display: flex;
  align-items: baseline;
  gap: 9px;
  color: #242332;
  font-size: 37px;
}
.card-art .hilo-wordmark > span,
.art-tile .hilo-wordmark > span {
  color: #7448cc;
  font: inherit;
  letter-spacing: inherit;
  vertical-align: baseline;
}
.card-art .pulma-wordmark,
.art-tile .pulma-wordmark {
  font-family: Fredoka, sans-serif;
  font-weight: 700;
  letter-spacing: -.8px;
  color: #351c42;
}
.brand-scene {
  width: 190px;
  height: 112px;
  margin-top: 15px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.game-mark {
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
  position: relative;
  z-index: 1;
}
.hilo-art,
.hero-hilo {
  background: #e0d5f4;
  color: #423556;
}
.hilo-art::before {
  border-color: #a48ac030;
  background: radial-gradient(circle at 75% 25%, #f8fff340, transparent 65%);
}
.hilo-scene .hilo-mark { width: 106px; height: 106px; }
.comparison-chip {
  position: absolute;
  width: 41px;
  height: 45px;
  display: grid;
  place-items: center;
  border: 1px solid #30263e17;
  border-radius: 9px;
  font: 500 29px Fredoka, sans-serif;
  box-shadow: 0 4px 0 #4b315313;
}
.chip-high { background: #d3f5d5; color: #34694a; top: 15px; left: 6px; transform: rotate(-15deg); }
.chip-low { background: #bca0ee; color: #422b69; bottom: 12px; right: 3px; transform: rotate(12deg); }
.hilo-art .art-scribble { color: #7448cc; }
.pulma-art,
.hero-pulma { background: #f5ccdf; color: #603451; }
.pulma-art::before { border-color: #d086b02b; }
.pulma-scene .pulma-mark { width: 92px; height: 92px; transform: rotate(-6deg); }
.answer-chip {
  position: absolute;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  font: 600 25px Fredoka, sans-serif;
  border-radius: 11px 11px 2px 11px;
  box-shadow: 0 4px 0 #5631530e;
}
.answer-a { top: 3px; left: 2px; background: var(--pulma-lime); color: #425216; transform: rotate(-14deg); }
.answer-b { bottom: 6px; right: 1px; background: var(--pulma-grape); color: #fff6e8; transform: rotate(12deg); border-radius: 11px 11px 11px 2px; }
.pulma-art .art-scribble { color: #a53376; }
.trazo-art,
.hero-trazo { background: #f6df88; color: var(--trazo-ink); }
.trazo-art svg.trazo-sketch { stroke: var(--trazo-ink); }
.card-art .trazo-wordmark,
.art-tile .trazo-wordmark {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--trazo-ink);
  font-size: 36px;
}
.trazo-emblem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  background: var(--trazo-yellow);
  border: 1px solid #ddba2d55;
  border-radius: 12px;
  transform: rotate(-6.875deg);
}
.card-art .trazo-wordmark .trazo-emblem,
.art-tile .trazo-wordmark .trazo-emblem {
  padding: 0;
  font: inherit;
}
.card-art .trazo-wordmark .draw-icon,
.art-tile .trazo-wordmark .draw-icon {
  font: 400 26px/1 TrazoDraw;
  color: var(--trazo-ink);
  letter-spacing: normal;
  padding: 0;
}
.timer-chip {
  position: absolute;
  right: 22px;
  top: 54px;
  background: #a6e8d5;
  color: #20514a;
  border: 1px solid #239b8840;
  border-radius: 100%;
  padding: 9px 7px;
  font: 500 13px Fredoka, sans-serif;
  transform: rotate(12deg);
}
.trazo-art .art-scribble { color: #168575; font-size: 35px; right: 13px; bottom: 70px; opacity: .9; }
.kiken-art {
  background: radial-gradient(ellipse at 0 0, #72334e99, transparent 70%), linear-gradient(135deg, #32123c, #24112d 65%, #252638);
  color: #f6dfe9;
}
.kiken-art::before { border-color: #fff6e817; }
.card-art .kiken-wordmark { color: #fff6e8; font-size: 43px; }
.kiken-art .age-badge { background: #fff6e8; color: #32123c; }
.kiken-art .truth-cards span { background: #fff1dd; color: #492744; border-color: #fff6e880; }
.kiken-art .truth-cards span + span { background: #c9547a; color: #fff6e8; border-color: #f093ab; }
.kiken-art .art-scribble { color: #ffb6ce; }
.kiken-art .art-label { color: #f3cada; }

/* Main collage: the original logos live inside the same tilted paper cards. */
.hero-hilo > .hilo-mark { width: 108px; height: 108px; margin-top: 37px; }
.hero-hilo .hilo-wordmark { font-size: 33px; margin-top: 5px; gap: 7px; }
.hero-hilo .tile-bottom { margin-top: 14px; }
.hero-trazo .doodle { stroke: var(--trazo-ink); }
.hero-trazo .trazo-wordmark { font-size: 32px; margin-top: -4px; gap: 8px; }
.hero-trazo .trazo-emblem { width: 35px; height: 35px; border-radius: 10px; }
.hero-trazo .trazo-wordmark .draw-icon { font-size: 23px; }
.hero-pulma > .pulma-mark { width: 71px; height: 71px; margin: 18px 0 5px; }
.hero-pulma .pulma-wordmark { font-size: 34px; }
.hero-pulma > span { margin-top: 7px; }
.friend-one { background: #c5b0e8; }
.friend-two { background: #f6d778; }
.friend-three { background: #efbad0; }

/* Bring the same accents into each game's HTML guide. */
.game-hilo { --game-accent: #7448cc; --game-soft: #eee7f8; }
.game-pulma { --game-accent: #ad2e62; --game-soft: #fae7ef; }
.game-trazo { --game-accent: #176f65; --game-soft: #e2f2eb; }
.game-kiken { --game-accent: #68324e; --game-soft: #f3e6ec; }
.game-page .detail-hero .eyebrow { color: var(--game-accent); }
.game-page .detail-hero h1 { color: var(--game-accent); }
.game-hilo .detail-hero h1,
.game-trazo .detail-hero h1,
.game-kiken .detail-hero h1 { font-family: GameWordmarks, 'Arial Black', sans-serif; font-weight: 900; }
.game-trazo .detail-hero h1,
.game-kiken .detail-hero h1 { text-transform: uppercase; }
.game-pulma .detail-hero h1 { text-transform: uppercase; font-weight: 700; }
.game-page .detail-hero .button.dark,
.game-page .guide .button.dark { background: var(--game-accent); }
.game-page .detail-hero .button.dark:hover,
.game-page .guide .button.dark:hover { filter: brightness(1.1); }
.game-page .notice,
.game-page .game-facts span { background: var(--game-soft); border-color: transparent; }
.detail-hero .brand-scene { width: 230px; height: 155px; margin-top: 21px; }
.detail-hero .hilo-scene .hilo-mark { width: 148px; height: 148px; }
.detail-hero .pulma-scene .pulma-mark { width: 128px; height: 128px; }
.detail-hero .card-art .game-wordmark { font-size: 58px; bottom: 30px; }
.detail-hero .card-art .hilo-wordmark { font-size: 51px; gap: 12px; }
.detail-hero .card-art .trazo-wordmark { font-size: 48px; gap: 13px; }
.detail-hero .trazo-emblem { width: 52px; height: 52px; border-radius: 16px; }
.detail-hero .trazo-wordmark .draw-icon { font-size: 31px; }
.detail-hero .timer-chip { top: 76px; right: 45px; padding: 14px 11px; font-size: 17px; }
.detail-hero .trazo-art .art-scribble { bottom: 93px; right: 35px; }
@media (max-width: 1150px) and (min-width: 901px) {
  .card-art .game-wordmark { font-size: 38px; }
  .card-art .hilo-wordmark { font-size: 29px; gap: 6px; }
  .card-art .trazo-wordmark { font-size: 30px; gap: 5px; }
  .trazo-emblem { width: 34px; height: 34px; }
  .timer-chip { right: 10px; }
}
@media (max-width: 650px) {
  .hero-hilo > .hilo-mark { width: 88px; height: 88px; margin-top: 27px; }
  .hero-hilo .hilo-wordmark { font-size: 26px; margin-top: 0; gap: 5px; }
  .hero-hilo .tile-bottom { margin-top: 11px; }
  .hero-pulma > .pulma-mark { width: 54px; height: 54px; margin-top: 14px; margin-bottom: 5px; }
  .hero-pulma .pulma-wordmark { font-size: 27px; }
  .hero-trazo .trazo-wordmark { font-size: 23px; gap: 5px; }
  .hero-trazo .trazo-emblem { width: 27px; height: 27px; border-radius: 8px; }
  .hero-trazo .trazo-wordmark .draw-icon { font-size: 18px; }
  .card-art .game-wordmark { font-size: 46px; }
  .card-art .hilo-wordmark { font-size: 39px; }
  .card-art .trazo-wordmark { font-size: 39px; }
  .card-art .brand-scene { margin-top: 21px; }
  .detail-hero .brand-scene { height: 127px; margin-top: 12px; }
  .detail-hero .hilo-scene .hilo-mark { width: 123px; height: 123px; }
  .detail-hero .pulma-scene .pulma-mark { width: 103px; height: 103px; }
  .detail-hero .card-art .game-wordmark { font-size: 45px; bottom: 24px; }
  .detail-hero .card-art .hilo-wordmark { font-size: 39px; gap: 9px; }
  .detail-hero .card-art .trazo-wordmark { font-size: 38px; gap: 9px; }
  .detail-hero .trazo-emblem { width: 41px; height: 41px; border-radius: 12px; }
  .detail-hero .trazo-wordmark .draw-icon { font-size: 26px; }
  .detail-hero .trazo-art > svg { height: 128px; }
  .detail-hero .timer-chip { top: 62px; right: 24px; font-size: 14px; padding: 10px 8px; }
}