/* Learn Tamil — Game rewards: scoreboard, cheer pop-up, badges, rewards panel.
   Order matters: files load in number order (see tools/lib/assets.mjs). */
/* =====================================================================
   GAME REWARDS: scoreboard, cheer pop-up, flying points, badges, panel
   ===================================================================== */
button.stars{cursor:pointer;font:inherit;font-weight:800;color:var(--text)}
button.stars:hover{border-color:var(--accent)}
.scoreboard{display:flex;align-items:stretch;gap:10px;max-width:820px;margin:0 auto 14px}
.sb-item{flex:1;display:flex;flex-direction:column;align-items:center;padding:8px 6px;border-radius:18px;background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow)}
.sb-item b{font-family:var(--font-kid);font-size:28px;line-height:1.1}
.sb-item small{font-size:12px;color:var(--text-muted);font-weight:600}
.sb-ic{font-size:18px;line-height:1}
.sb-item:first-child{background:linear-gradient(135deg,#ffb020,#ff5e7e);color:#fff;border-color:transparent}
.sb-item:first-child small{color:#fff}
.sb-item.bump{animation:bump .5s ease}
.sb-sound{flex:none;width:56px;border-radius:18px;border:1px solid var(--glass-line);background:var(--glass);font-size:24px;cursor:pointer;box-shadow:var(--glass-shadow)}

.cheer{position:fixed;left:50%;top:40%;z-index:90;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:16px 26px 14px;border-radius:26px;background:var(--glass);border:3px solid #ffd166;box-shadow:0 24px 50px -16px rgb(0 0 0 / .35);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);pointer-events:none;animation:cheerIn 1.3s cubic-bezier(.3,1.6,.5,1) forwards}
.cheer.big{animation-duration:1.9s;border-color:#ff8a3d;padding:22px 34px 18px}
.cheer b{font-family:var(--font-kid);font-size:clamp(30px,7vw,44px);line-height:1.2;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.cheer small{font-weight:700;color:var(--text-muted)}
.ch-emo{font-size:44px;line-height:1}
.cheer.big .ch-emo{font-size:60px}
.ch-bird{position:absolute;left:-26px;top:-26px;font-size:46px;animation:hop .6s ease}
@keyframes cheerIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-8deg)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.08) rotate(2deg)}28%{transform:translate(-50%,-50%) scale(1) rotate(0)}80%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-62%) scale(.92)}}
.fly-pts{position:fixed;left:0;top:0;z-index:95;pointer-events:none;font-family:var(--font-kid);font-weight:800;font-size:26px;color:#ff8a00;text-shadow:0 2px 0 #fff,0 0 12px rgb(255 200 0 / .6);white-space:nowrap}

.badge-pop{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:rgb(10 20 40 / .35);animation:fadeIn .25s ease;cursor:pointer;padding:16px}
.badge-pop.out{animation:fadeOut .3s ease forwards}
@keyframes fadeIn{from{opacity:0}} @keyframes fadeOut{to{opacity:0}}
.bp-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;max-width:340px;padding:34px 26px 22px;border-radius:30px;
  background:radial-gradient(240px 160px at 50% 0%,rgb(255 214 102 / .45),transparent 70%),var(--bg);border:4px solid #ffd166;box-shadow:0 30px 70px -20px rgb(0 0 0 / .5);animation:cheerIn 3.2s cubic-bezier(.3,1.6,.5,1) forwards}
.badge-pop .bp-card{animation:popIn .55s cubic-bezier(.3,1.6,.5,1)}
.bp-ribbon{position:absolute;top:-16px;left:50%;transform:translateX(-50%);white-space:nowrap;background:linear-gradient(135deg,#ff8a3d,#ff5e7e);color:#fff;font-weight:800;font-size:14px;padding:6px 16px;border-radius:999px;box-shadow:0 6px 14px -6px rgb(255 94 126 / .7)}
.bp-ic{font-size:84px;line-height:1.1;animation:bob 2s ease-in-out infinite}
.bp-card b{font-family:var(--font-kid);font-size:26px}
.bp-card small{color:var(--text-muted);font-weight:600}
.bp-tok{margin-top:6px;font-weight:800;background:#fff3c4;color:#7a5600;border-radius:999px;padding:3px 12px}
.bp-wow{font-family:var(--font-kid);font-weight:800;font-size:20px;color:var(--c-um)}

.rewards-dlg{width:min(640px,calc(100vw - 24px));max-height:calc(100vh - 40px);border:0;border-radius:26px;padding:18px 18px 14px;background:var(--bg);color:var(--text);box-shadow:0 30px 80px -20px rgb(0 0 0 / .5)}
.rewards-dlg::backdrop{background:rgb(10 20 40 / .45)}
.rw-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rw-head h2{margin:0;font-family:var(--font-kid);font-size:22px}
.rw-x{border:0;background:var(--bg-subtle);width:36px;height:36px;border-radius:10px;cursor:pointer;font-size:16px;color:var(--text)}
.rw-tokens{display:flex;align-items:center;gap:14px;margin:14px 0;padding:14px 18px;border-radius:20px;background:linear-gradient(135deg,#ffdd00,#ffb020);color:#3a2a00}
.rw-coin{font-size:46px;animation:bob 2.4s ease-in-out infinite}
.rw-tokens b{display:block;font-family:var(--font-kid);font-size:36px;line-height:1}
.rw-tokens small{font-weight:700}
.rw-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.rw-stat{display:flex;flex-direction:column;align-items:center;padding:10px 4px;border-radius:16px;background:var(--bg-subtle)}
.rw-stat b{font-family:var(--font-kid);font-size:22px}
.rw-stat small{font-size:12px;color:var(--text-muted);text-align:center}
.rewards-dlg h3{font-family:var(--font-kid);margin:16px 0 8px;font-size:18px}
.rewards-dlg h3 small{color:var(--text-muted);font-size:14px}
.rw-badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.rw-badge{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;padding:10px 6px;border-radius:16px;background:var(--bg-subtle);opacity:.5;filter:grayscale(1)}
.rw-badge.on{opacity:1;filter:none;background:color-mix(in srgb,#ffd166 22%,var(--bg-subtle));box-shadow:0 4px 0 color-mix(in srgb,#ffb020 40%,transparent)}
.rw-badge span{font-size:30px;line-height:1.2}
.rw-badge b{font-size:13px}
.rw-badge small{font-size:11px;color:var(--text-muted)}
.rw-note{margin:14px 0 0;font-size:13px;color:var(--text-muted);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.rw-reset{border:1px solid var(--border);background:transparent;border-radius:10px;padding:6px 12px;cursor:pointer;color:var(--text-muted);font-size:13px}
@media (max-width:760px){
  .scoreboard{gap:6px}
  .sb-item b{font-size:22px}
  .sb-sound{width:46px}
  .rw-stats{grid-template-columns:repeat(2,1fr)}
  .rw-badges{grid-template-columns:repeat(2,1fr)}
}