/* «Red flag or not?» — Ivy's swipe game (uses test.css for the hero, buttons and «Keep going») */
.fg { --fg-flag: #9C2B2B; --fg-ok: #4E7F5E; --fg-ask: #A5803A; }
.fg-c--flag { --c: var(--fg-flag); }
.fg-c--ok { --c: var(--fg-ok); }
.fg-c--ask { --c: var(--fg-ask); }
.fg-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }

/* how to play */
.fg-how { background: var(--tt-paper); color: var(--tt-text); padding: 70px 20px 60px; text-align: center; }
.fg-how h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(28px, 3.6vw, 42px); margin: 0 0 26px; }
.fg-how__grid { max-width: 860px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.fg-how__it { background: #fff; border-radius: 14px; padding: 22px 18px; border-top: 3px solid var(--c); box-shadow: 0 6px 22px rgba(60,40,30,.07); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.fg-how__it .fg-ico { color: var(--c); }
.fg-how__it b { font-family: var(--serif); font-weight: 500; font-size: 22px; }
.fg-how__it small { font-size: 13px; color: #6b605c; }
.fg-how__note { max-width: 620px; margin: 22px auto 0; font-family: var(--serif); font-style: italic; font-size: 18px; color: #5a4f4b; }

/* play screen */
.fg-play { display: none; }
.fg-play.is-on {
  display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 500; overflow-y: auto; color: var(--tt-paper);
  padding: 22px 16px max(22px, env(safe-area-inset-bottom));
  background: radial-gradient(ellipse at 50% 25%, rgba(156,43,43,.22), transparent 60%), #0B0909;
}
.fg-close { font-size: 20px; line-height: 1; padding: 0 16px; }
.fg-stage { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; min-height: 340px; perspective: 1200px; }
.fg-card {
  position: relative; width: 100%; max-width: 460px; min-height: 360px; border-radius: 22px; background: var(--tt-paper); color: var(--tt-text);
  padding: 30px 28px 26px; box-shadow: 0 30px 70px rgba(0,0,0,.55); display: flex; flex-direction: column; touch-action: none; user-select: none;
  cursor: grab; transition: transform .28s ease, opacity .28s ease;
}
.fg-card.is-drag { transition: none; cursor: grabbing; }
.fg-card::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(139,14,14,.18); border-radius: 14px; pointer-events: none; }
.fg-card__n { font-family: var(--display); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: #9a8f88; margin-bottom: 18px; }
.fg-card__s { font-family: var(--serif); font-size: clamp(22px, 3.2vw, 27px); line-height: 1.35; flex: 1; display: flex; align-items: center; }
.fg-card__hint { font-family: var(--display); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #b0a59e; margin-top: 18px; text-align: center; }
.fg-stamp {
  position: absolute; top: 26px; padding: 8px 14px; border: 3px solid var(--c); color: var(--c); border-radius: 10px; font-family: var(--display);
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase; opacity: 0; transform: rotate(-10deg); pointer-events: none; background: rgba(248,246,241,.9);
}
.fg-stamp--flag { right: 22px; }
.fg-stamp--ok { left: 22px; transform: rotate(10deg); }
.fg-stamp--ask { left: 50%; top: auto; bottom: 70px; transform: translateX(-50%); }
.fg-card.is-answered { cursor: default; border-top: 6px solid var(--c); }
.fg-verdict { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.fg-verdict .fg-ico { color: var(--c); }
.fg-verdict b { font-family: var(--display); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--c); }
.fg-verdict em { margin-left: auto; font-family: var(--serif); font-size: 18px; font-style: italic; color: #6b605c; }
.fg-card__q { font-family: var(--serif); font-size: 17px; line-height: 1.45; color: #6b605c; margin: 0 0 12px; }
.fg-card__e { font-size: 15px; line-height: 1.6; margin: 0 0 14px; }
.fg-card__read { font-size: 13px; color: var(--fg-flag); margin-bottom: 14px; }
.fg-next { align-self: stretch; margin-top: auto; }
.fg-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 460px; margin: 22px auto 0; }
.fg-btns[hidden] { display: none; }
.fg-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; min-height: 76px; border-radius: 16px; cursor: pointer;
  background: rgba(248,246,241,.05); border: 1px solid color-mix(in srgb, var(--c) 70%, transparent); color: #F8F6F1;
  font-family: var(--display); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; transition: background .2s, transform .15s;
}
.fg-btn .fg-ico { color: color-mix(in srgb, var(--c) 55%, #fff); }
.fg-btn:hover, .fg-btn:focus-visible { background: color-mix(in srgb, var(--c) 30%, transparent); }
.fg-btn:active { transform: scale(.97); }

/* result */
.fg-result { background: var(--tt-paper); }
.fg-res { max-width: 760px; margin: 0 auto; text-align: center; }
.fg-res__tag { font-family: var(--display); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: #9a8f88; }
.fg-res__score { font-family: var(--serif); font-weight: 300; font-size: clamp(64px, 11vw, 120px); line-height: 1; color: var(--fg-flag); margin: 10px 0 6px; }
.fg-res__title { font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 4vw, 44px); margin: 0 0 8px; }
.fg-res__line { font-family: var(--serif); font-style: italic; font-size: 20px; color: #5a4f4b; margin: 0 auto 26px; max-width: 560px; }
.fg-res__bars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 30px; }
.fg-res__bar { background: #fff; border-radius: 14px; padding: 16px; border-top: 3px solid var(--c); box-shadow: 0 6px 22px rgba(60,40,30,.07); }
.fg-res__bar b { display: block; font-family: var(--serif); font-size: 30px; color: var(--c); }
.fg-res__bar small { font-size: 13px; color: #6b605c; }
.fg-res__btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 34px; }
.fg-res__btns .tt-btn { color: var(--tt-text); }
.fg-res__btns .tt-btn--main { color: #fff; }
.fg-miss { text-align: left; }
.fg-miss h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; text-align: center; margin: 0 0 14px; }
.fg-miss details { background: #fff; border-radius: 12px; margin-bottom: 8px; border-left: 3px solid var(--c); box-shadow: 0 4px 16px rgba(60,40,30,.05); }
.fg-miss summary { cursor: pointer; padding: 14px 16px; font-size: 15px; line-height: 1.45; }
.fg-miss details p { margin: 0; padding: 0 16px 14px; font-size: 14px; line-height: 1.6; color: #4a403c; }
.fg-miss details p b { color: var(--c); font-weight: 600; }

/* the guide */
.fg-shop { background: #EFE9DF; color: var(--tt-text); padding: 70px 20px; }
.fg-shop__in { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: center; }
.fg-shop img { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 18px 44px rgba(60,40,30,.18); }
.fg-shop__tag { font-family: var(--display); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-flag); }
.fg-shop h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.6vw, 42px); margin: 10px 0 12px; }
.fg-shop p { font-family: var(--serif); font-size: 19px; line-height: 1.55; color: #4a403c; margin: 0 0 22px; }
.fg-shop__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.fg-shop .tt-btn { color: var(--tt-text); }
.fg-shop .tt-btn--main { color: #fff; }

@media (max-width: 760px) {
  .fg-how__grid, .fg-res__bars { grid-template-columns: 1fr; }
  .fg-shop__in { grid-template-columns: 1fr; gap: 26px; }
  .fg-card { min-height: 330px; padding: 26px 22px 22px; }
  .fg-verdict { flex-wrap: wrap; row-gap: 2px; }
  .fg-verdict em { margin-left: 0; width: 100%; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .fg-card { transition: none; } }