/* Grouplet page - "Aurora" theme from the game (game_theme.dart), group colours from game_board.dart */
@font-face { font-family: "Nunito"; src: url("/assets/fonts/nunito-variable.woff2?v=6811baae4e") format("woff2"); font-weight: 400 900; font-display: swap; }

.theme-grouplet {
  --gp-top: #0b1026; --gp-bottom: #13234a; --gp-fx: #3be8b0; --gp-select: #aeead3;
  --gp-amber: #ffb300; --gp-gold: #ffc24b;
  --gp-g1: #eab308; --gp-g2: #16a34a; --gp-g3: #2563eb; --gp-g4: #7c3aed;
  --gp-tile: #f7f8ff; --gp-tile-ink: #1b2140;
  background: linear-gradient(180deg, var(--gp-top) 0%, var(--gp-bottom) 55%, #0b1026 100%);
}
.theme-grouplet h1, .theme-grouplet h2, .theme-grouplet h3, .theme-grouplet .gp-display { font-family: "Nunito", var(--font-display); letter-spacing: -0.01em; font-weight: 800; }
.theme-grouplet .eyebrow { color: var(--gp-fx); }
.theme-grouplet .gradient-text { background: linear-gradient(100deg, #fff 0%, var(--gp-fx) 45%, var(--gp-gold) 100%); -webkit-background-clip: text; background-clip: text; }
.theme-grouplet .btn--primary { background: var(--gp-amber); color: #2a1a00; }
.theme-grouplet .card { background: rgba(255, 255, 255, .05); border-color: rgba(174, 234, 211, .16); }
.theme-grouplet .card__icon { background: rgba(59, 232, 176, .12); color: var(--gp-fx); }

/* Aurora ribbons (CSS only, behind the hero) */
.gp-hero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(3.5rem, 9vw, 6.5rem) 0 clamp(3rem, 7vw, 5rem); }
.gp-aurora { position: absolute; inset: -20% -10% auto; height: 90%; z-index: -1; pointer-events: none; filter: blur(48px); opacity: .55; }
.gp-aurora span { position: absolute; border-radius: 50%; mix-blend-mode: screen; animation: gp-sway 18s ease-in-out infinite alternate; }
.gp-aurora span:nth-child(1) { width: 60%; height: 45%; left: 5%; top: 10%; background: #3be8b0; }
.gp-aurora span:nth-child(2) { width: 50%; height: 40%; left: 40%; top: 0; background: #5b7cff; animation-duration: 22s; }
.gp-aurora span:nth-child(3) { width: 40%; height: 35%; left: 65%; top: 25%; background: #b06bff; animation-duration: 26s; }
@keyframes gp-sway { from { transform: translate(0, 0) scale(1); } to { transform: translate(6%, 8%) scale(1.15); } }

.gp-hero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.gp-hero h1 { font-size: clamp(2.6rem, 7vw, 4.6rem); margin-bottom: .3em; }
.gp-hero__tag { font-size: clamp(1.3rem, 3vw, 1.7rem); font-weight: 700; color: #fff; margin-bottom: .8rem; font-family: "Nunito", var(--font-display); }
.gp-research { display: flex; gap: .7rem; align-items: flex-start; margin: 1.4rem 0 1.8rem; padding: .9rem 1.1rem; border-radius: 14px; background: rgba(59, 232, 176, .08); border: 1px solid rgba(59, 232, 176, .25); color: #d9f7ec; font-size: .98rem; }
.gp-research svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--gp-fx); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
@media (max-width: 860px) { .gp-hero__grid { grid-template-columns: 1fr; } }

/* Floating emoji cloud in the hero */
.gp-cloud { position: relative; aspect-ratio: 1; max-width: 460px; width: 100%; margin-inline: auto; }
.gp-cloud img { position: absolute; width: 22%; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .35)); animation: gp-float 6s ease-in-out infinite; }
.gp-cloud img:nth-child(1) { left: 6%; top: 8%; animation-delay: -1s; }
.gp-cloud img:nth-child(2) { left: 39%; top: 0; width: 26%; animation-delay: -3s; }
.gp-cloud img:nth-child(3) { left: 72%; top: 10%; animation-delay: -2s; }
.gp-cloud img:nth-child(4) { left: 0; top: 42%; width: 25%; animation-delay: -4s; }
.gp-cloud img:nth-child(5) { left: 37%; top: 36%; width: 30%; animation-delay: -.5s; }
.gp-cloud img:nth-child(6) { left: 75%; top: 46%; animation-delay: -2.5s; }
.gp-cloud img:nth-child(7) { left: 14%; top: 76%; animation-delay: -1.5s; }
.gp-cloud img:nth-child(8) { left: 55%; top: 74%; width: 24%; animation-delay: -3.5s; }
@keyframes gp-float { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-14px) rotate(4deg); } }

/* ---------- Playable demo ---------- */
.gp-demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 900px) { .gp-demo { grid-template-columns: 1fr; } }
.gp-play { position: relative; padding: clamp(1rem, 3vw, 1.5rem); border-radius: 26px; background: linear-gradient(180deg, rgba(19, 35, 74, .9), rgba(11, 16, 38, .95)); border: 1px solid rgba(174, 234, 211, .2); box-shadow: 0 30px 70px rgba(0, 0, 0, .45); max-width: 520px; width: 100%; margin-inline: auto; }
.gp-play__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: .9rem; font-family: "Nunito", var(--font-display); font-weight: 800; }
.gp-hearts { display: flex; gap: .3rem; }
.gp-hearts svg { width: 22px; height: 22px; fill: #ff5d7a; transition: opacity .3s, transform .3s; }
.gp-hearts svg.is-lost { opacity: .18; transform: scale(.8); }
.gp-solved { display: grid; gap: 8px; margin-bottom: 8px; }
.gp-bar { border-radius: 14px; padding: .55rem .8rem; color: #fff; text-align: center; animation: gp-pop .45s var(--ease); }
.gp-bar strong { display: block; font-family: "Nunito", var(--font-display); font-size: 1.02rem; letter-spacing: .02em; text-transform: uppercase; }
.gp-bar__emoji { display: flex; justify-content: center; gap: .5rem; margin-top: .25rem; }
.gp-bar__emoji img { width: 30px; height: 30px; }
.gp-bar--1 { background: var(--gp-g1); color: #2a1f00; } .gp-bar--2 { background: var(--gp-g2); } .gp-bar--3 { background: var(--gp-g3); } .gp-bar--4 { background: var(--gp-g4); }
.gp-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.gp-tile { aspect-ratio: 1; display: grid; place-items: center; border: 0; border-radius: 16px; background: var(--gp-tile); cursor: pointer; padding: 12%; box-shadow: 0 4px 0 rgba(0, 0, 0, .18); transition: transform .18s var(--ease), background-color .18s, box-shadow .18s; -webkit-tap-highlight-color: transparent; }
.gp-tile img { width: 100%; height: 100%; pointer-events: none; }
.gp-tile:hover { transform: translateY(-2px); }
.gp-tile[aria-pressed="true"] { background: var(--gp-select); transform: scale(1.06); box-shadow: 0 0 0 3px #fff inset, 0 6px 0 rgba(0, 0, 0, .22); }
.gp-board.is-shake { animation: gp-shake .42s; }
.gp-controls { display: flex; gap: .6rem; margin-top: 1rem; }
.gp-controls .btn { flex: 1; min-height: 46px; padding: .6rem 1rem; }
.gp-controls .btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.gp-msg { min-height: 1.6em; margin: .8rem 0 0; text-align: center; font-family: "Nunito", var(--font-display); font-weight: 800; color: var(--gp-gold); }
.gp-end { display: none; text-align: center; padding-top: .4rem; }
.gp-play.is-over .gp-end { display: block; }
.gp-play.is-over .gp-controls { display: none; }
.gp-confetti { position: absolute; inset: 0; pointer-events: none; border-radius: 26px; }
@keyframes gp-pop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes gp-shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); } }

.gp-how { counter-reset: step; list-style: none; padding: 0; display: grid; gap: 1rem; }
.gp-how li { position: relative; padding: 1rem 1.1rem 1rem 3.6rem; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(174, 234, 211, .14); color: var(--text-dim); }
.gp-how li strong { color: #fff; }
.gp-how li::before { counter-increment: step; content: counter(step); position: absolute; left: 1rem; top: 1rem; width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center; font-family: "Nunito", var(--font-display); font-weight: 900; color: #2a1a00; background: var(--gp-amber); }
.gp-colours { display: flex; gap: .4rem; margin-top: .6rem; }
.gp-colours i { width: 22px; height: 22px; border-radius: 6px; }
.gp-colours i:nth-child(1) { background: var(--gp-g1); } .gp-colours i:nth-child(2) { background: var(--gp-g2); } .gp-colours i:nth-child(3) { background: var(--gp-g3); } .gp-colours i:nth-child(4) { background: var(--gp-g4); }