/* "Find their happy place" — sticker playground */
.gn-playbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin:-6px 0 26px}
.gn-playbar p{margin:0;color:var(--muted);font-weight:600}
.gn-surprise{display:inline-flex;align-items:center;gap:10px;border:0;cursor:pointer;font:800 .95rem Sora,Inter,sans-serif;
  color:#fff;padding:14px 24px;border-radius:999px;background:linear-gradient(110deg,#e75d8e,#ff8a5c 55%,#e75d8e);background-size:200% 100%;
  box-shadow:0 14px 30px rgba(231,93,142,.38);transition:transform .25s cubic-bezier(.3,1.5,.5,1),box-shadow .25s;animation:gnSlide 4s linear infinite}
.gn-surprise:hover{transform:translateY(-3px) rotate(-2deg) scale(1.04)}
.gn-surprise:active{transform:scale(.96)}
.gn-surprise .dice{display:inline-block;font-size:1.3rem;transition:transform .6s}
.gn-surprise.rolling .dice{animation:gnSpin .5s linear infinite}
@keyframes gnSlide{to{background-position:200% 0}}
@keyframes gnSpin{to{transform:rotate(360deg)}}

.gn-play{gap:18px!important;padding:6px 4px 18px}
.gn-play .category-tile{--c1:#fff;--c2:#ffe6ef;--mx:50%;--my:50%;position:relative;min-height:138px!important;border:3px solid #fff!important;
  border-radius:26px!important;background:linear-gradient(145deg,var(--c1),var(--c2))!important;
  box-shadow:0 3px 0 rgba(255,255,255,.9) inset,0 16px 30px rgba(190,90,130,.18)!important;
  rotate:var(--r,0deg);transition:rotate .5s cubic-bezier(.3,1.6,.5,1),scale .4s cubic-bezier(.3,1.6,.5,1),box-shadow .35s,translate .4s!important;
  animation:gnBobTile 5s ease-in-out var(--d,0s) infinite}
@keyframes gnBobTile{50%{translate:0 -7px}}
.gn-play .category-tile::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(180px circle at var(--mx) var(--my),rgba(255,255,255,.85),transparent 65%)}
.gn-play .category-tile:hover::after{opacity:1}
.gn-play .category-tile:hover,.gn-play .category-tile.picked{rotate:0deg;scale:1.09;z-index:5;animation-play-state:paused;
  box-shadow:0 26px 50px rgba(190,70,120,.34)!important}
.gn-play .tile-emoji{font-size:2.7rem!important;filter:drop-shadow(0 8px 8px rgba(160,60,100,.25));position:relative;z-index:2}
.gn-play .category-tile:hover .tile-emoji,.gn-play .category-tile.picked .tile-emoji{animation:gnCrazy .8s ease both}
@keyframes gnCrazy{0%{transform:none}20%{transform:translateY(-8px) rotate(-16deg) scale(1.28)}
  45%{transform:translateY(-2px) rotate(14deg) scale(1.2)}70%{transform:rotate(-6deg) scale(1.24)}100%{transform:scale(1.2) translateY(-2px)}}
.gn-play .tile-emoji{transform-origin:30% 70%}
.gn-play .category-tile>span:nth-child(2){position:relative;z-index:2;font-weight:800;color:#4a1f38}
.gn-play .tile-arrow{z-index:2;font-weight:800}
/* sticker colours */
.gn-play .category-tile:nth-child(10n+1){--c1:#ffe3f0;--c2:#ffc2dc}
.gn-play .category-tile:nth-child(10n+2){--c1:#fff1c9;--c2:#ffd98a}
.gn-play .category-tile:nth-child(10n+3){--c1:#e2f7e6;--c2:#b6ecc3}
.gn-play .category-tile:nth-child(10n+4){--c1:#e4ecff;--c2:#bfd0ff}
.gn-play .category-tile:nth-child(10n+5){--c1:#ffe6d6;--c2:#ffbf9d}
.gn-play .category-tile:nth-child(10n+6){--c1:#f1e2ff;--c2:#d9b8ff}
.gn-play .category-tile:nth-child(10n+7){--c1:#dff6fb;--c2:#a9e6f3}
.gn-play .category-tile:nth-child(10n+8){--c1:#ffe0e0;--c2:#ffb3b8}
.gn-play .category-tile:nth-child(10n+9){--c1:#f3f9d4;--c2:#dcee94}
.gn-play .category-tile:nth-child(10n){--c1:#ffe8f6;--c2:#f9b9e3}
/* messy sticker-board tilts */
.gn-play .category-tile:nth-child(5n+1){--r:-2.4deg;--d:0s}
.gn-play .category-tile:nth-child(5n+2){--r:1.8deg;--d:.7s}
.gn-play .category-tile:nth-child(5n+3){--r:-1.2deg;--d:1.4s}
.gn-play .category-tile:nth-child(5n+4){--r:2.6deg;--d:2.1s}
.gn-play .category-tile:nth-child(5n){--r:-2deg;--d:2.8s}
/* flying emoji confetti */
.gn-conf{position:fixed;z-index:400;pointer-events:none;font-size:22px;animation:gnConf 1s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes gnConf{from{opacity:1;transform:translate(-50%,-50%) scale(.5)}
  to{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--r2)) scale(1.4)}}
.gn-pick-label{position:fixed;z-index:410;left:50%;bottom:90px;translate:-50% 20px;opacity:0;pointer-events:none;
  background:#4a1f38;color:#fff;font-weight:800;padding:12px 22px;border-radius:999px;box-shadow:0 18px 40px rgba(74,31,56,.4);
  transition:opacity .3s,translate .4s cubic-bezier(.3,1.5,.5,1)}
.gn-pick-label.show{opacity:1;translate:-50% 0}
@media(max-width:900px){.gn-play{gap:12px!important}.gn-play .category-tile{min-height:120px!important}}
@media(prefers-reduced-motion:reduce){
  .gn-play .category-tile,.gn-surprise,.gn-surprise.rolling .dice{animation:none!important}
  .gn-play .category-tile{rotate:0deg}
  .gn-play .category-tile:hover .tile-emoji{animation:none}}