/* page-flag-guess.css (26 Oct 2026): Flag guess, the Color Guesser demo. Night ground as the other games; the flag on a white
   card, the big color square beside it (under it on a phone); after Validate the card splits: your color on top, the real one below. */
body.page-flag-guess{background:#0e0f11}
body.page-flag-guess main{background:#0e0f11;color:#f5f5f7}
.fg-section{padding:clamp(40px,6vw,88px) var(--pg-gut,24px) clamp(48px,6vw,80px);background:#0e0f11;color:#f5f5f7}
.fg-head{max-width:760px;margin:0 auto clamp(28px,4vw,44px);text-align:center}
.fg-head .fg-k{margin:0 0 14px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#FBCB05}
.fg-head h1{margin:0;font-size:clamp(40px,6vw,80px);line-height:.98;letter-spacing:-.045em;font-weight:600;color:#fff;text-wrap:balance}
.fg-head h1 span{color:#19AAE3}
.fg-head p{margin:16px auto 0;max-width:36em;font-size:clamp(16px,1.4vw,19px);line-height:1.5;color:#a9abb1}
.fg{max-width:1040px;margin:0 auto;padding:clamp(16px,2.4vw,28px);border-radius:28px;background:#16171a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 40px 80px -50px #000}
.fg-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:clamp(14px,2vw,22px)}
.fg-round,.fg-total{margin:0;font-size:14px;color:#a9abb1;font-variant-numeric:tabular-nums}
.fg-round b,.fg-total b{color:#fff}
.fg-pips{display:flex;gap:6px;margin:0;padding:0;list-style:none}
.fg-pips li{width:26px;height:4px;border-radius:2px;background:rgba(255,255,255,.14)}
.fg-pips li.is-on{background:#fff}.fg-pips li.is-done{background:#64A932}
.fg-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,2.6vw,32px);align-items:stretch}
.fg-card{position:relative;overflow:hidden;border-radius:22px;background:#fff;min-height:320px}
.fg-paper{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:16px;padding:28px}
.fg-flag{width:min(78%,360px);filter:drop-shadow(0 10px 18px rgba(20,20,22,.18))}
.fg-flag svg{display:block;width:100%;height:auto;border-radius:6px}
.fg-name{margin:0;font-size:15px;font-weight:600;color:#141416;letter-spacing:-.01em}
/* the split: the card cuts open, your color on top, the real one below */
.fg-split{position:absolute;inset:0;display:grid;grid-template-rows:1fr 1fr;pointer-events:none}
.fg-half{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 26px;transform:scaleY(0);transition:transform .5s cubic-bezier(.23,1,.32,1)}
.fg-half span{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.fg-half b{font-size:clamp(22px,2.4vw,30px);font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fg-you{background:var(--top);color:var(--top-on);transform-origin:50% 0}
.fg-real{background:var(--bot);color:var(--bot-on);transform-origin:50% 100%;transition-delay:.12s}
.fg-split.is-open .fg-half{transform:none}
.fg-pick{display:grid;grid-template-rows:auto 1fr auto auto;gap:12px;min-width:0}
.fg-timer{height:4px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden}
.fg-timer i{display:block;height:100%;background:#fff;transform-origin:0 50%}
.fg-timer i.is-late{background:#F50C0C}
.fg-sq{position:relative;min-height:240px;border-radius:18px;overflow:hidden;cursor:crosshair;touch-action:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.fg-sq:focus-visible{outline:2px solid #FBCB05;outline-offset:3px}
.fg-sq canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.fg-handle{position:absolute;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:var(--c,#fff);
  box-shadow:0 0 0 3px #fff,0 4px 14px rgba(0,0,0,.45);pointer-events:none;transition:width .15s,height .15s,margin .15s}
.fg-handle.is-grabbed{width:44px;height:44px;margin:-22px 0 0 -22px}
.fg-hint{margin:0;font-size:13px;color:#7d8087;text-align:center}
.fg-act,.fg-res{display:grid;gap:10px}
.fg-act[hidden],.fg-res[hidden]{display:none}
.fg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 26px;border:0;border-radius:999px;background:#fff;color:#141416;
  font:inherit;font-size:16px;font-weight:600;text-decoration:none;cursor:pointer;transition:transform .16s cubic-bezier(.23,1,.32,1),background-color .2s}
.fg-btn:hover{background:#e8e8ed}.fg-btn:active{transform:scale(.97)}
.fg-res{grid-template-columns:auto 1fr auto;align-items:center}
.fg-pct{margin:0;font-size:44px;line-height:1;font-weight:600;letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums}
.fg-pct span{font-size:20px;color:#a9abb1;margin-left:2px}
.fg-verdict{margin:0;font-size:14px;color:#a9abb1}
.fg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.fg[data-state="end"] .fg-top,.fg[data-state="end"] .fg-stage{display:none}
/* the end */
.fg-end{display:grid;justify-items:center;gap:10px;text-align:center;padding:clamp(8px,2vw,20px) 0}
.fg-end-k{margin:0;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#FBCB05}
.fg-end-num{margin:0;font-size:clamp(72px,10vw,120px);line-height:.9;font-weight:600;letter-spacing:-.05em;color:#fff}
.fg-end-num span{font-size:.35em;color:#a9abb1}
.fg-end-line{margin:0;font-size:17px;color:#a9abb1;max-width:30em}
.fg-recap{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;width:100%;max-width:640px;margin:18px 0 0;padding:0;list-style:none}
.fg-recap li{display:grid;justify-items:center;gap:6px;font-size:13px;color:#a9abb1}
.fg-recap b{color:#fff;font-size:15px}
.fg-rc-sw{width:100%;max-width:96px;aspect-ratio:1;border-radius:14px;background:linear-gradient(var(--a) 50%,var(--b) 50%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.fg-promo{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;width:100%;max-width:720px;margin-top:22px;padding:18px 20px;border-radius:22px;
  background:linear-gradient(135deg,rgba(25,170,227,.16),rgba(250,161,219,.12) 50%,rgba(251,203,5,.12));box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);text-align:left}
.fg-promo img{display:block;width:56px;height:56px;border-radius:14px}
.fg-promo p{margin:0;font-size:14px;line-height:1.45;color:#c9cbd1}
.fg-promo .fg-promo-h{font-size:17px;font-weight:600;color:#fff;margin-bottom:2px}
.fg-link{margin-top:8px;padding:0;border:0;background:none;color:#fff;font:inherit;font-size:15px;text-decoration:underline;text-underline-offset:5px;cursor:pointer}
@media (max-width:820px){
  .fg-stage{grid-template-columns:1fr}
  .fg-card{min-height:260px}
  .fg-sq{min-height:0;aspect-ratio:4/3}
  .fg-pips{display:none}
  .fg-promo{grid-template-columns:auto 1fr}.fg-promo .fg-btn{grid-column:1/-1}
  .fg-recap{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
}
@media (prefers-reduced-motion:reduce){.fg-half{transition:none}.fg-btn{transition:none}}