/* ============================================================
   Wonderflip — a matching game for ages 3–5
   ============================================================ */

:root{
  /* overridden per level by game.js */
  --theme-a:    #6C4CE0;
  --theme-b:    #B57BFF;

  --ink:        #2B2350;
  --ink-soft:   #6C6392;
  --paper:      #FFFDF8;

  --grape:      #6C4CE0;
  --grape-deep: #4B2FB8;
  --sun:        #FFC93C;
  --sun-deep:   #F2A81E;
  --bubble:     #FF7BA9;
  --mint:       #3FD9B4;
  --sky:        #57C3F5;

  --card-r:     clamp(18px, 2.4vmin, 28px);
  --shadow-sm:  0 2px 0 rgba(43,35,80,.10), 0 6px 18px -8px rgba(43,35,80,.35);
  --shadow-md:  0 4px 0 rgba(43,35,80,.12), 0 18px 36px -14px rgba(43,35,80,.42);
  --shadow-lg:  0 10px 0 rgba(43,35,80,.10), 0 40px 70px -26px rgba(43,35,80,.5);

  --ease-pop:   cubic-bezier(.2,1.5,.42,1);
  --ease-soft:  cubic-bezier(.22,.9,.28,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

/* `hidden` must win over any display rule below */
[hidden]{ display:none !important; }

html,body{ height:100%; }

body{
  font-family:"Nunito", ui-rounded, system-ui, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(120% 90% at 8% 0%,  #FFF2D0 0%, transparent 55%),
    radial-gradient(110% 90% at 100% 12%, #E4DBFF 0%, transparent 55%),
    linear-gradient(170deg, #FDF6FF 0%, #EDF3FF 48%, #F4FBFF 100%);
  min-height:100dvh;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.big-btn,.fact-name{ font-family:"Baloo 2", "Nunito", sans-serif; }

/* ---------- ambient background ---------- */
.sky{ position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }

.blob{
  position:absolute; border-radius:50%; filter:blur(46px); opacity:.42;
  animation:drift 26s ease-in-out infinite;
}
.b1{ width:44vmin; height:44vmin; background:#FFD98A; top:-10vmin; left:-8vmin; }
.b2{ width:38vmin; height:38vmin; background:#B9A6FF; bottom:-12vmin; left:26vmin; animation-delay:-9s; }
.b3{ width:40vmin; height:40vmin; background:#9BE8FF; top:34vmin; right:-12vmin; animation-delay:-16s; }

@keyframes drift{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  33%    { transform:translate3d(3vmin,-4vmin,0) scale(1.08); }
  66%    { transform:translate3d(-3vmin,3vmin,0) scale(.95); }
}

.twinkle{
  position:absolute; width:12px; height:12px; opacity:.55;
  background:
    conic-gradient(from 45deg, transparent 0 25%, #fff 25% 50%, transparent 50% 75%, #fff 75%);
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
  background:var(--sun);
  animation:twink 4.5s ease-in-out infinite;
}
.t1{ top:14%; left:22%; } .t2{ top:70%; left:12%; animation-delay:-1.4s; }
.t3{ top:26%; right:30%; animation-delay:-2.6s; } .t4{ bottom:16%; right:18%; animation-delay:-3.4s; }
.t5{ top:8%;  right:12%; animation-delay:-.8s; }  .t6{ bottom:30%; left:44%; animation-delay:-2s; }

@keyframes twink{
  0%,100%{ transform:scale(.5) rotate(0deg);   opacity:.25; }
  50%    { transform:scale(1.15) rotate(90deg); opacity:.8; }
}

/* ============================================================
   HOME SCREEN
   ============================================================ */
.home{
  position:relative; z-index:1; height:100dvh;
  display:flex; flex-direction:column; align-items:center;
  padding:clamp(20px,4vmin,52px) clamp(16px,3vw,40px) clamp(16px,3vmin,32px);
  gap:clamp(18px,3vmin,36px);
  overflow-y:auto;
}

.home-head,.level-grid,.home-foot{ flex:0 0 auto; }

.home-head{ text-align:center; animation:rise .55s var(--ease-soft); }

.home-mark{
  font-size:clamp(2.6rem,7vmin,4.4rem); line-height:1;
  filter:drop-shadow(0 8px 16px rgba(43,35,80,.25));
  animation:bob 3.6s var(--ease-soft) infinite;
}
.home-head h1{
  font-size:clamp(2rem,5.6vmin,3.6rem); font-weight:800; line-height:1.05; margin-top:.12em;
  letter-spacing:-.015em;
  background:linear-gradient(100deg,#6C4CE0 0%,#FF7BA9 48%,#F2A81E 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.home-head p{
  font-size:clamp(.95rem,2.1vmin,1.3rem); font-weight:700; color:var(--ink-soft); margin-top:.15em;
}

.level-grid{
  width:min(100%, 1180px);
  display:flex; flex-direction:column; gap:clamp(10px,1.6vmin,20px);
}

.shelf-row{
  display:grid; gap:clamp(12px,1.8vw,22px);
  grid-template-columns:repeat(auto-fill, minmax(clamp(150px,17vw,215px), 1fr));
}

/* the divider between the little levels and the big-kid ones */
.shelf-head{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:.1em .8em;
  padding:clamp(10px,1.8vmin,22px) 4px 0;
  animation:rise .5s var(--ease-soft) backwards;
}
.shelf-head h2{
  font-family:"Baloo 2",sans-serif; font-weight:800; color:var(--ink);
  font-size:clamp(1.1rem,2.4vmin,1.55rem); line-height:1.1;
}
.shelf-head p{
  font-weight:700; color:var(--ink-soft); font-size:clamp(.75rem,1.5vmin,.92rem);
}

.level-card{
  position:relative; border:0; cursor:pointer; text-align:left; font-family:inherit;
  border-radius:clamp(20px,2.6vmin,30px); overflow:hidden;
  padding:clamp(15px,2vmin,24px);
  display:flex; flex-direction:column; gap:.2em; isolation:isolate;
  color:#fff;
  background:linear-gradient(150deg, var(--a) 0%, var(--b) 100%);
  box-shadow:var(--shadow-md);
  transition:transform .2s var(--ease-pop), box-shadow .2s;
  animation:card-in .5s var(--ease-pop) backwards;
}
@keyframes card-in{ from{ opacity:0; transform:translateY(22px) scale(.9); } }

.level-card::before{                 /* soft dot texture */
  content:""; position:absolute; inset:0; z-index:-1; opacity:.4;
  background-image:radial-gradient(circle at 20% 24%, rgba(255,255,255,.55) 1.6px, transparent 1.7px);
  background-size:24px 24px;
}
.level-card::after{                  /* corner glow */
  content:""; position:absolute; z-index:-1; width:150%; aspect-ratio:1;
  right:-60%; top:-90%;
  background:radial-gradient(circle, rgba(255,255,255,.3) 0%, transparent 60%);
}

@media (hover:hover) and (pointer:fine){
  .level-card:hover{ transform:translateY(-6px) scale(1.03); box-shadow:var(--shadow-lg); }
}
.level-card:active{ transform:translateY(-1px) scale(.98); }

.level-emoji{
  font-size:clamp(2rem,4.4vmin,3rem); line-height:1;
  filter:drop-shadow(0 4px 8px rgba(20,10,50,.3));
  transition:transform .25s var(--ease-pop);
}
@media (hover:hover) and (pointer:fine){
  .level-card:hover .level-emoji{ transform:scale(1.15) rotate(-8deg); }
}

.level-name{ font-family:"Baloo 2",sans-serif; font-weight:800; font-size:clamp(1.05rem,2.3vmin,1.45rem); line-height:1.15; }
.level-blurb{ font-weight:700; font-size:clamp(.72rem,1.5vmin,.88rem); opacity:.9; line-height:1.35; }

.level-count{
  margin-top:.5em; align-self:flex-start;
  padding:3px 11px; border-radius:999px;
  background:rgba(255,255,255,.26); backdrop-filter:blur(4px);
  font-weight:800; font-size:clamp(.62rem,1.3vmin,.76rem); letter-spacing:.04em;
}

.home-foot{
  display:flex; flex-direction:column; align-items:center; gap:.9em;
  padding-bottom:clamp(8px,2vmin,20px);
}

.chip-btn{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  padding:10px 20px; border:0; border-radius:999px; font-family:inherit;
  background:#fff; color:var(--grape); font-weight:800;
  font-size:clamp(.8rem,1.6vmin,.95rem); box-shadow:var(--shadow-sm);
  transition:transform .18s var(--ease-pop), box-shadow .18s;
}
.chip-btn svg{ width:1.2em; height:1.2em; fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }
@media (hover:hover) and (pointer:fine){
  .chip-btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
}
.chip-btn .ic-off{ display:none; }
.chip-btn[aria-pressed="false"]{ color:var(--ink-soft); }
.chip-btn[aria-pressed="false"] .ic-on{ display:none; }
.chip-btn[aria-pressed="false"] .ic-off{ display:block; }

.grown-up{ font-size:clamp(.68rem,1.35vmin,.82rem); font-weight:700; color:var(--ink-soft); opacity:.8; text-align:center; }

/* ---------- layout ---------- */
.shell{
  position:relative; z-index:1;
  height:100dvh;
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(320px, 27vw, 420px);
  gap:clamp(14px, 2vw, 30px);
  padding:clamp(14px, 2.2vmin, 28px);
}

.stage{ display:flex; flex-direction:column; min-width:0; min-height:0; gap:clamp(10px,1.6vmin,18px); }

/* ---------- top bar ---------- */
.topbar{ display:flex; align-items:center; gap:clamp(10px,1.5vw,20px); flex:0 0 auto; }

.back-btn{
  display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; cursor:pointer;
  padding:9px 16px 9px 12px; border:0; border-radius:999px; font-family:inherit;
  background:#fff; color:var(--theme-a); font-weight:800;
  font-size:clamp(.72rem,1.45vmin,.88rem);
  box-shadow:var(--shadow-sm); transition:transform .18s var(--ease-pop), box-shadow .18s;
}
.back-btn svg{ width:1.15em; height:1.15em; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
@media (hover:hover) and (pointer:fine){
  .back-btn:hover{ transform:translateX(-3px); box-shadow:var(--shadow-md); }
}
.back-btn:active{ transform:scale(.95); }

.brand{ display:flex; align-items:center; gap:clamp(10px,1.2vw,16px); min-width:0; margin-right:auto; }

.brand-mark{
  width:clamp(40px,5vmin,58px); aspect-ratio:1; flex:0 0 auto;
  display:grid; place-items:center; border-radius:50%;
  font-size:clamp(1.3rem,2.9vmin,2rem);
  background:linear-gradient(150deg, var(--theme-a) 0%, var(--theme-b) 100%);
  box-shadow:0 6px 14px -4px rgba(43,35,80,.45);
  animation:bob 3.6s var(--ease-soft) infinite;
}

@keyframes bob{ 0%,100%{ transform:translateY(0) rotate(-3deg);} 50%{ transform:translateY(-6px) rotate(3deg);} }

.brand-text h1{
  font-size:clamp(1.35rem, 3.1vmin, 2.2rem); font-weight:800; line-height:1.05;
  letter-spacing:-.01em;
  background:linear-gradient(100deg, var(--theme-a) 0%, var(--theme-b) 55%, var(--sun-deep) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand-text p{ font-size:clamp(.72rem,1.5vmin,.92rem); font-weight:700; color:var(--ink-soft); }

.hud{ display:flex; align-items:center; gap:clamp(8px,1vw,14px); }

/* up to ten pips on the big-kid levels, so they wrap to a second row
   rather than pushing the sound and restart buttons off the bar */
.pips{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px 6px; max-width:clamp(120px,22vw,260px); }
.pip{
  width:clamp(12px,1.7vmin,18px); aspect-ratio:1; border-radius:50%;
  background:#fff; box-shadow:inset 0 0 0 3px rgba(108,99,146,.22);
  transition:transform .45s var(--ease-pop), background .3s, box-shadow .3s;
}
.pip.on{
  background:linear-gradient(160deg, var(--sun) 0%, var(--sun-deep) 100%);
  box-shadow:inset 0 0 0 3px rgba(242,168,30,.55), 0 3px 8px rgba(242,168,30,.5);
  transform:scale(1.22);
}

.icon-btn{
  width:clamp(38px,4.6vmin,50px); aspect-ratio:1; border:0; border-radius:50%;
  background:#fff; color:var(--theme-a); cursor:pointer; display:grid; place-items:center;
  box-shadow:var(--shadow-sm); transition:transform .18s var(--ease-pop), box-shadow .18s;
}
.icon-btn svg{ width:54%; height:54%; fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }
@media (hover:hover) and (pointer:fine){
  .icon-btn:hover{ transform:translateY(-2px) scale(1.06); box-shadow:var(--shadow-md); }
}
.icon-btn:active{ transform:translateY(1px) scale(.95); }
.icon-btn .ic-off{ display:none; }
.icon-btn[aria-pressed="false"] .ic-on{ display:none; }
.icon-btn[aria-pressed="false"] .ic-off{ display:block; }
.icon-btn[aria-pressed="false"]{ color:var(--ink-soft); }

/* ---------- board ---------- */
.board-wrap{ flex:1 1 auto; min-height:0; display:grid; place-items:center; }

.board{
  display:grid;
  grid-template-columns:repeat(var(--cols,4), 1fr);
  gap:clamp(8px, 1.5vmin, 20px);
  width:min(100%, calc((100dvh - 190px) * var(--cols,4) / var(--rows,2)));
  max-height:100%;
}

.tile{
  position:relative; aspect-ratio:1; border:0; padding:0; background:none;
  cursor:pointer; perspective:1000px; -webkit-tap-highlight-color:transparent;
  animation:deal .5s var(--ease-pop) backwards;

  /* Touch, on iPad especially. Without `manipulation` Safari holds every
     tap back ~300ms while it waits to see whether a second one is coming
     and the gesture should be a double-tap zoom instead — and a tap that
     rolls a few pixels, which is most taps from a three-year-old, gets
     handed to the scroller and never becomes a click at all. */
  touch-action:manipulation;

  /* A child rests a finger on a card rather than tapping it cleanly. Left
     alone, iOS answers that press with the image callout ("Copy", "Save
     to Photos") or starts dragging the picture out of the card, and the
     tap it interrupted never lands. Nothing here is selectable text or a
     picture worth saving, so refuse all three. */
  -webkit-touch-callout:none;
  -webkit-user-select:none; user-select:none;
}

/* The tap has to count wherever it lands. Every layer inside a card is
   decoration, so none of them may start its own drag or selection and
   quietly swallow the press meant for the button underneath. */
.tile *{ -webkit-user-drag:none; -webkit-touch-callout:none; }
@keyframes deal{
  from{ opacity:0; transform:translateY(26px) scale(.72) rotate(-6deg); }
  to  { opacity:1; transform:none; }
}

.tile-inner{
  position:absolute; inset:0; transform-style:preserve-3d;
  transition:transform .52s var(--ease-soft);
  border-radius:var(--card-r);
}
.tile.flipped .tile-inner,
.tile.matched .tile-inner{ transform:rotateY(180deg); }

.face{
  position:absolute; inset:0; border-radius:var(--card-r);
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  overflow:hidden; box-shadow:var(--shadow-md);
}

/* --- card back --- */
.face-back{
  background:linear-gradient(155deg, var(--theme-a) 0%, var(--theme-b) 100%);
  display:grid; place-items:center;
  border:clamp(3px,.55vmin,5px) solid #fff;
}
.face-back::before{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:
    radial-gradient(circle at 22% 26%, rgba(255,255,255,.5) 1.6px, transparent 1.7px),
    radial-gradient(circle at 72% 62%, rgba(255,255,255,.35) 1.4px, transparent 1.5px);
  background-size:26px 26px, 34px 34px;
}
.face-back::after{
  content:""; position:absolute; width:190%; aspect-ratio:1; left:-45%; top:-140%;
  background:radial-gradient(circle, rgba(255,255,255,.22) 0%, transparent 62%);
}
.back-icon{
  position:relative; width:52%; height:52%;
  filter:drop-shadow(0 4px 8px rgba(20,10,60,.4));
  animation:spin-slow 9s linear infinite;
}
@keyframes spin-slow{ to{ transform:rotate(360deg); } }

/* Hover belongs to mice. A touch screen has no hover, so iOS invents one:
   the first tap on a hoverable element only applies :hover, and the child
   has to tap a second time before anything actually happens. Asking for a
   real hovering pointer keeps the lift on desktop and gives the iPad a
   card that turns over on the first try. */
@media (hover:hover) and (pointer:fine){
  .tile:hover .tile-inner{ transform:translateY(-6px) scale(1.03); }
  .tile.flipped:hover .tile-inner,
  .tile.matched:hover .tile-inner{ transform:rotateY(180deg); }
}
.tile:active .tile-inner{ transform:scale(.96); }
.tile.flipped:active .tile-inner{ transform:rotateY(180deg) scale(.96); }

/* --- card front (portrait) --- */
.face-front{
  transform:rotateY(180deg);
  background:#fff;
  border:clamp(3px,.55vmin,5px) solid #fff;
  display:flex; flex-direction:column;
}
.face-front img{
  width:100%; flex:1 1 auto; min-height:0; object-fit:cover; object-position:center 22%;
  border-radius:calc(var(--card-r) - 6px) calc(var(--card-r) - 6px) 0 0;
  background:#EFEAFB;
  -webkit-user-drag:none;                 /* a card is for turning over, not dragging */
}
.face-front .tag{
  flex:0 0 auto; padding:clamp(3px,.7vmin,7px) 4px;
  font-size:clamp(.55rem, 1.32vmin, .88rem); font-weight:800; letter-spacing:.01em;
  text-align:center; color:#fff; line-height:1.15;
  background:linear-gradient(120deg, var(--theme-a) 0%, var(--theme-b) 100%);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* --- card front: flags (kind 'flag') ---
   Flags come in many shapes — Nepal is a double pennant, Switzerland is
   square, Ohio is a swallowtail. Each one is shown whole and centred on
   a soft mat rather than cropped to fill the card, because the cropped
   corner is often the only thing telling two flags apart. */
.flag-face{
  flex:1 1 auto; min-height:0; display:grid; place-items:center;
  padding:clamp(5px,1.1vmin,12px);
  border-radius:calc(var(--card-r) - 6px) calc(var(--card-r) - 6px) 0 0;
  background:
    radial-gradient(circle at 30% 20%, #fff 0%, transparent 60%),
    linear-gradient(160deg, #F4F1FB 0%, #E4DEF5 100%);
}
.flag-face img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; display:block;
  border-radius:3px;
  box-shadow:0 2px 7px rgba(43,35,80,.3);
  -webkit-user-drag:none;
}

/* Bundled illustrations keep their whole silhouette on a shared white mat. */
.illustration-face{
  flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:center;
  padding:clamp(8px,1.5vmin,18px);
}
.illustration-face img{
  width:100%; height:100%; object-fit:contain; background:none;
}
.fact-photo.is-illustration img{ object-fit:contain; padding:14%; }

/* --- card front: numbers & letters (kind 'glyph') --- */
.glyph-face{
  flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.12em;
  border-radius:calc(var(--card-r) - 6px);
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.55) 0%, transparent 55%),
    linear-gradient(155deg, var(--g) 0%, color-mix(in srgb, var(--g) 62%, #000) 100%);
  color:#fff;
}
.glyph-char{
  font-family:"Baloo 2", sans-serif; font-weight:800; line-height:.9;
  font-size:clamp(2rem, 8.5vmin, 4.6rem);
  text-shadow:0 3px 0 rgba(0,0,0,.16);
}
.glyph-lower{
  font-family:"Baloo 2", sans-serif; font-weight:700; line-height:1;
  font-size:clamp(1.3rem, 4.2vmin, 2.4rem); opacity:.95;
}
.glyph-emoji{ font-size:clamp(1.1rem,3.2vmin,1.9rem); line-height:1; margin-top:.1em; }
.glyph-dots{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:clamp(2px,.55vmin,5px); max-width:78%;
}
.glyph-dots i{
  width:clamp(6px,1.35vmin,11px); aspect-ratio:1; border-radius:50%;
  background:#fff; opacity:.92; box-shadow:0 1px 2px rgba(0,0,0,.2);
}

/* --- card front: colours (kind 'swatch') --- */
.swatch-face{
  flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.1em;
  border-radius:calc(var(--card-r) - 6px);
  box-shadow:inset 0 0 0 1px rgba(43,35,80,.14);   /* keeps white readable */
}
.swatch-emoji{ font-size:clamp(1.5rem,5.4vmin,3rem); line-height:1; }
.swatch-name{
  font-family:"Baloo 2", sans-serif; font-weight:800;
  font-size:clamp(.7rem,2vmin,1.15rem); line-height:1;
}

/* --- states --- */
.tile.matched{ cursor:default; }
.tile.matched .face-front{
  box-shadow:0 0 0 clamp(3px,.5vmin,5px) var(--mint), var(--shadow-md);
  animation:pop-match .55s var(--ease-pop);
}
@keyframes pop-match{
  0%{ transform:scale(1);} 40%{ transform:scale(1.13) rotate(2deg);} 100%{ transform:scale(1);}
}
.tile.matched::after{
  content:"✓"; position:absolute; z-index:3; right:-4px; top:-6px;
  width:clamp(22px,3.3vmin,34px); aspect-ratio:1; border-radius:50%;
  background:var(--mint); color:#fff; font-weight:800;
  font-size:clamp(.7rem,1.8vmin,1.1rem); display:grid; place-items:center;
  box-shadow:0 4px 10px rgba(63,217,180,.55);
  animation:stamp .45s var(--ease-pop) backwards;
}
@keyframes stamp{ from{ transform:scale(0) rotate(-40deg); opacity:0; } }

.tile.wrong .tile-inner{ animation:shake .45s ease-in-out; }
@keyframes shake{
  0%,100%{ transform:rotateY(180deg) translateX(0); }
  20%    { transform:rotateY(180deg) translateX(-8px) rotate(-2deg); }
  45%    { transform:rotateY(180deg) translateX(8px)  rotate(2deg); }
  70%    { transform:rotateY(180deg) translateX(-5px); }
}

.tile.gone{ animation:fade-out .4s var(--ease-soft) forwards; pointer-events:none; }
@keyframes fade-out{ to{ opacity:.35; transform:scale(.94); } }

.hint{
  flex:0 0 auto; text-align:center; font-weight:700; color:var(--ink-soft);
  font-size:clamp(.8rem,1.7vmin,1.05rem); min-height:1.4em;
  transition:opacity .3s;
}

/* ---------- fact panel ---------- */
.panel{
  position:relative; border-radius:clamp(22px,3vmin,34px);
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:var(--shadow-lg); border:2px solid rgba(255,255,255,.9);
  padding:clamp(16px,2.4vmin,30px);
  display:grid; place-items:center; min-height:0;
  overflow-y:auto; overflow-x:hidden; scrollbar-width:thin;
}
.panel::before{
  content:""; position:absolute; inset:0 0 auto 0; height:8px;
  background:linear-gradient(90deg, var(--bubble), var(--sun), var(--mint), var(--sky), var(--grape));
}

/* idle state */
.panel-idle{ text-align:center; max-width:34ch; animation:rise .5s var(--ease-soft); }
.idle-art{ position:relative; display:grid; place-items:center; margin-bottom:clamp(8px,1.6vmin,18px); }
.idle-ring{
  position:absolute; width:clamp(80px,13vmin,124px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, #FFF0C9 0%, #F2E9FF 70%, transparent 72%);
  animation:pulse 3.4s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ transform:scale(1); opacity:.9;} 50%{ transform:scale(1.12); opacity:.6;} }
.idle-emoji{ position:relative; font-size:clamp(2.4rem,6vmin,4rem); animation:bob 4s var(--ease-soft) infinite; }

.panel-idle h2{ font-size:clamp(1.15rem,2.5vmin,1.7rem); font-weight:800; margin-bottom:.35em; color:var(--theme-a); }
.panel-idle p{ font-size:clamp(.85rem,1.7vmin,1.05rem); font-weight:600; color:var(--ink-soft); line-height:1.55; }

.idle-list{ list-style:none; margin-top:clamp(12px,2vmin,22px); display:grid; gap:8px; text-align:left; }
.idle-list li{
  display:flex; align-items:center; gap:10px; padding:8px 14px; border-radius:999px;
  background:#fff; box-shadow:var(--shadow-sm);
  font-weight:700; font-size:clamp(.78rem,1.55vmin,.95rem); color:var(--ink);
}
.idle-list span{ font-size:1.15em; }

/* fact card */
.card-fact{ text-align:center; width:100%; max-width:38ch; animation:rise .5s var(--ease-pop); }
@keyframes rise{ from{ opacity:0; transform:translateY(22px) scale(.94); } }

.fact-photo{ position:relative; width:clamp(112px,19vmin,190px); margin:0 auto clamp(10px,1.8vmin,18px); }
.fact-photo img{
  width:100%; height:auto; aspect-ratio:1; object-fit:cover; object-position:center 20%;
  border-radius:50%; display:block;
  border:clamp(4px,.7vmin,7px) solid #fff;
  box-shadow:0 0 0 clamp(3px,.5vmin,5px) var(--sun), 0 18px 34px -12px rgba(43,35,80,.55);
  animation:swell .6s var(--ease-pop);
}
@keyframes swell{ from{ transform:scale(.5) rotate(-12deg); } }

/* flags keep their own proportions, so they get a rounded rectangle
   instead of the round portrait frame — a circle would crop them */
.fact-photo.is-flag{
  width:clamp(130px,22vmin,215px);
  aspect-ratio:auto; display:grid; place-items:center;
  padding:clamp(8px,1.4vmin,14px);
  border-radius:clamp(14px,2vmin,22px);
  background:linear-gradient(160deg, #F6F3FC 0%, #E6E0F6 100%);
  border:clamp(4px,.7vmin,7px) solid #fff;
  box-shadow:0 0 0 clamp(3px,.5vmin,5px) var(--sun), 0 18px 34px -12px rgba(43,35,80,.55);
  animation:swell .6s var(--ease-pop);
}
.fact-photo.is-flag img{
  width:100%; height:auto; aspect-ratio:auto; object-fit:contain;
  border-radius:5px; border:0; box-shadow:0 3px 10px rgba(43,35,80,.32);
  animation:none;
}

/* the glyph / swatch levels get the same round portrait, drawn instead of photographed */
.fact-photo.is-glyph,
.fact-photo.is-swatch{
  aspect-ratio:1; border-radius:50%; display:grid; place-items:center;
  border:clamp(4px,.7vmin,7px) solid #fff;
  box-shadow:0 0 0 clamp(3px,.5vmin,5px) var(--sun), 0 18px 34px -12px rgba(43,35,80,.55);
  animation:swell .6s var(--ease-pop);
}
.fact-glyph{
  font-family:"Baloo 2", sans-serif; font-weight:800; color:#fff; line-height:1;
  font-size:clamp(3rem,9vmin,5.4rem); text-shadow:0 3px 0 rgba(0,0,0,.15);
}
.fact-photo.is-swatch .fact-glyph{ text-shadow:none; }

.fact-sparkle{
  position:absolute; right:-4%; top:-6%; font-size:clamp(1.2rem,2.6vmin,1.8rem);
  animation:twink 2.4s ease-in-out infinite;
}

.fact-role{
  display:inline-block; padding:5px 14px; border-radius:999px;
  background:linear-gradient(120deg, var(--theme-a) 0%, var(--theme-b) 100%); color:#fff;
  font-weight:800; font-size:clamp(.66rem,1.35vmin,.82rem);
  letter-spacing:.06em; text-transform:uppercase; margin-bottom:.5em;
}
.fact-name{
  font-size:clamp(1.3rem,3vmin,2.1rem); font-weight:800; line-height:1.1; color:var(--ink);
}
.fact-years{ font-weight:700; color:var(--ink-soft); font-size:clamp(.72rem,1.45vmin,.9rem); margin-top:.15em; }

.fact-bubble{
  position:relative; margin-top:clamp(12px,2vmin,20px);
  background:linear-gradient(160deg, #FFFBEF 0%, #FFF4DA 100%);
  border:2.5px solid var(--sun); border-radius:clamp(16px,2.4vmin,24px);
  padding:clamp(12px,1.9vmin,20px);
  box-shadow:0 8px 20px -10px rgba(242,168,30,.7);
}
.fact-bubble::before{
  content:""; position:absolute; top:-11px; left:50%; translate:-50% 0;
  width:20px; height:20px; background:#FFFBEF; border-left:2.5px solid var(--sun);
  border-top:2.5px solid var(--sun); rotate:45deg; border-radius:4px 0 0 0;
}
.fact-bubble p{
  position:relative; font-size:clamp(.86rem,1.78vmin,1.1rem); font-weight:700;
  line-height:1.55; color:#6B4A05;
}

.say-btn{
  margin-top:clamp(10px,1.7vmin,18px);
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 20px; border:0; border-radius:999px; cursor:pointer;
  background:#fff; color:var(--theme-a); font-family:inherit; font-weight:800;
  font-size:clamp(.78rem,1.55vmin,.95rem);
  box-shadow:var(--shadow-sm); transition:transform .18s var(--ease-pop), box-shadow .18s;
}
.say-btn svg{ width:1.15em; height:1.15em; fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }
@media (hover:hover) and (pointer:fine){
  .say-btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
}
.say-btn:active{ transform:translateY(1px) scale(.97); }

/* ---------- curtain (round complete) ---------- */
.curtain{
  position:fixed; inset:0; z-index:40; display:grid; place-items:center;
  background:rgba(43,35,80,.42); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  animation:fade-in .3s ease;
  padding:24px;
}
@keyframes fade-in{ from{ opacity:0; } }

.curtain-card{
  background:var(--paper); border-radius:clamp(26px,4vmin,40px);
  padding:clamp(26px,4.4vmin,50px) clamp(24px,4vmin,56px);
  text-align:center; max-width:min(94vw, 480px); box-shadow:var(--shadow-lg);
  border:3px solid #fff;
  animation:bounce-in .6s var(--ease-pop);
}
@keyframes bounce-in{ from{ opacity:0; transform:scale(.6) translateY(40px); } }

.trophy{ position:relative; display:grid; place-items:center; margin-bottom:.4em; }
.trophy-glow{
  position:absolute; width:clamp(96px,15vmin,150px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, #FFE9A8 0%, transparent 68%); animation:pulse 2.4s ease-in-out infinite;
}
.trophy-emoji{ position:relative; font-size:clamp(3rem,8vmin,5rem); animation:bob 2.6s var(--ease-soft) infinite; }

.curtain-card h2{
  font-size:clamp(1.6rem,4vmin,2.6rem); font-weight:800; line-height:1.1;
  background:linear-gradient(100deg, var(--theme-a) 0%, var(--theme-b) 60%, var(--sun-deep) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.curtain-card > p{ margin-top:.4em; font-weight:700; color:var(--ink-soft); font-size:clamp(.9rem,1.9vmin,1.15rem); }

.stars{ display:flex; justify-content:center; gap:8px; margin:clamp(12px,2vmin,20px) 0; font-size:clamp(1.5rem,3.6vmin,2.4rem); }
.stars span{ animation:star-in .5s var(--ease-pop) backwards; }
@keyframes star-in{ from{ opacity:0; transform:scale(0) rotate(-90deg); } }

.curtain-btns{ display:flex; flex-direction:column; align-items:center; gap:clamp(8px,1.4vmin,14px); }

.big-btn{
  margin-top:clamp(6px,1.2vmin,12px);
  padding:clamp(13px,2vmin,20px) clamp(28px,4vmin,46px);
  border:0; border-radius:999px; cursor:pointer; font-family:"Baloo 2", sans-serif;
  font-weight:800; font-size:clamp(1rem,2.2vmin,1.4rem); color:#fff;
  --btn-deep:color-mix(in srgb, var(--theme-a) 72%, #000);
  background:linear-gradient(150deg, var(--theme-a) 0%, var(--btn-deep) 100%);
  box-shadow:0 6px 0 var(--btn-deep), 0 20px 34px -12px rgba(43,35,80,.6);
  transition:transform .16s var(--ease-pop), box-shadow .16s;
}
@media (hover:hover) and (pointer:fine){
  .big-btn:hover{ transform:translateY(-3px); box-shadow:0 9px 0 var(--btn-deep), 0 26px 40px -12px rgba(43,35,80,.65); }
}
.big-btn:active{ transform:translateY(4px); box-shadow:0 2px 0 var(--btn-deep), 0 12px 20px -10px rgba(43,35,80,.5); }

.ghost-btn{
  border:0; background:none; cursor:pointer; font-family:inherit;
  padding:6px 14px; border-radius:999px;
  color:var(--ink-soft); font-weight:800; font-size:clamp(.78rem,1.6vmin,.95rem);
  text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px;
  text-decoration-color:color-mix(in srgb, var(--theme-a) 45%, transparent);
  transition:color .16s, background .16s;
}
@media (hover:hover) and (pointer:fine){
  .ghost-btn:hover{ color:var(--theme-a); background:rgba(43,35,80,.05); }
}

#confetti{ position:fixed; inset:0; z-index:50; pointer-events:none; }

/* ---------- focus ---------- */
:focus-visible{ outline:4px solid var(--sky); outline-offset:4px; border-radius:8px; }

/* ---------- responsive ---------- */
@media (max-width:1000px){
  body{ overflow:auto; }
  .shell{
    grid-template-columns:1fr; height:auto; min-height:100dvh;
    grid-template-rows:auto auto;
  }
  .board{ width:min(100%, 74vh); }
  .panel{ min-height:clamp(300px, 46vh, 460px); }
  .idle-list{ max-width:320px; margin-inline:auto; }
}

@media (max-width:560px){
  .brand-text p{ display:none; }
  .board{ width:100%; }
  .fact-photo{ width:clamp(100px,30vw,150px); }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.08s !important;
  }
  .tile-inner{ transition-duration:.15s !important; }
}