/* Learn Tamil — Games hub, spin wheel, balloon pop, word builder, memory.
   Order matters: files load in number order (see tools/lib/assets.mjs). */
/* =====================================================================
   GAMES HUB
   ===================================================================== */
.gamepick{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px;margin-bottom:16px}
.gcard{border:1px solid var(--glass-line);background:var(--glass);box-shadow:var(--glass-shadow);border-radius:18px;padding:12px 8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;transition:transform .15s}
.gcard:hover{transform:translateY(-3px)}
.gcard .gi{font-size:32px;line-height:1.1;transition:transform .2s}
.gcard:hover .gi{transform:scale(1.15) rotate(-8deg)}
.gcard b{font-size:14px;font-family:var(--font-kid)}
.gcard small{font-size:12px;color:var(--text-muted)}
.gcard[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.gcard[aria-pressed="true"] small{color:inherit;opacity:.85}
.game{padding:20px 16px;text-align:center;max-width:820px;margin:0 auto}
.game .ask{font-family:var(--font-ta);font-size:20px;font-weight:700;margin-bottom:10px}
.game .ask small{display:block;font-family:var(--font-ui);font-weight:500;color:var(--text-muted);font-size:14px}

/* Spin wheel */
.wheel-wrap{position:relative;width:min(80vw,340px);aspect-ratio:1;margin:8px auto 14px}
.wheel{width:100%;height:100%;transition:transform 4.2s cubic-bezier(.15,.75,.2,1);filter:drop-shadow(0 14px 24px rgb(0 60 120 / .25))}
.wheel-t{font-family:var(--font-kid);font-weight:800;font-size:22px;fill:#fff}
.wheel-pointer{position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-top:28px solid #ff3d6e;z-index:2;filter:drop-shadow(0 3px 3px rgb(0 0 0 / .25))}
.wheel-hub{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:28%;aspect-ratio:1;border-radius:50%;border:5px solid #fff;background:linear-gradient(145deg,#ff8a3d,#ff3d6e);color:#fff;font-weight:800;font-size:clamp(14px,3.6vw,18px);letter-spacing:.06em;cursor:pointer;box-shadow:0 8px 18px -6px rgb(0 0 0 / .4);transition:transform .15s}
.wheel-hub:hover:not(:disabled){transform:translate(-50%,-50%) scale(1.08)}
.wheel-hub:disabled{opacity:.85;cursor:default}
.spin-letter{font-family:var(--font-kid);font-size:64px;font-weight:800;color:var(--c-uyir);line-height:1.2;animation:pop .45s ease}
.opts.pics{grid-template-columns:repeat(3,1fr);max-width:520px}
.picopt{padding:12px 6px}
.picopt .pe{font-size:44px;line-height:1.1}
.picopt .pw{font-family:var(--font-kid);font-weight:700;font-size:20px}
.picopt.right .pw,.picopt.right .r{color:#fff}

/* Balloon pop */
.bal-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.bal-target{font-size:18px;display:flex;align-items:center;gap:10px}
.bal-target b{font-family:var(--font-kid);font-size:44px;line-height:1;color:var(--c-um);display:inline-block;border-radius:12px;padding:2px 10px;background:var(--bg-subtle)}
.bal-target b.lit{animation:pop .45s ease}
.bal-stats{display:flex;gap:16px;font-size:18px}
.bal-sky{position:relative;height:440px;border-radius:18px;overflow:hidden;background:linear-gradient(180deg,#bfe3ff,#e9f6ff 60%,#fff7e0);touch-action:manipulation}
:root[data-theme="dark"] .bal-sky{background:linear-gradient(180deg,#0f2a4a,#132f52 60%,#1d2b45)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bal-sky{background:linear-gradient(180deg,#0f2a4a,#132f52 60%,#1d2b45)}}
.bal-start{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;z-index:3;font-size:20px;font-weight:700;padding:16px}
.bal-start p{margin:0;font-family:var(--font-kid)}
.bal-final{font-size:44px}
.balloon{position:absolute;bottom:-110px;width:76px;height:92px;border:0;border-radius:50% 50% 48% 48%;background:radial-gradient(circle at 32% 28%,rgb(255 255 255 / .55),transparent 30%),var(--c);color:#fff;font-family:var(--font-kid);font-weight:800;font-size:28px;cursor:pointer;box-shadow:inset -6px -8px 0 rgb(0 0 0 / .12);animation:rise var(--dur,6s) linear forwards;white-space:nowrap}
.balloon::after{content:"";position:absolute;left:50%;top:100%;width:2px;height:34px;background:rgb(0 0 0 / .25)}
@keyframes rise{from{transform:translate(0,0)}50%{transform:translate(var(--sway),-280px)}to{transform:translate(0,-600px)}}
.balloon.popped{animation:popB .3s ease forwards}
@keyframes popB{to{transform:scale(1.6);opacity:0}}
.balloon.nope{filter:grayscale(.6) brightness(.9)}
.timebar{height:8px;border-radius:8px;background:var(--bg-subtle);margin-top:10px;overflow:hidden}
.timebar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#2eb67d,#ffb020,#ff5e7e);transition:width 1s linear}

/* Word builder */
.wb-pic{display:flex;align-items:center;justify-content:center;gap:12px;margin:4px 0 14px}
.wb-pic #wbEmoji{font-size:72px;line-height:1;animation:bob 3s ease-in-out infinite}
.wb-slots{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.slot{min-width:64px;height:72px;border-radius:14px;border:3px dashed var(--border);display:grid;place-items:center;font-family:var(--font-kid);font-weight:800;font-size:36px;padding:0 6px}
.slot.filled{border-style:solid;border-color:var(--c-mei);background:color-mix(in srgb,var(--c-mei) 12%,transparent);color:var(--c-mei);animation:pop .35s ease}
.wb-tiles{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;min-height:76px}
.wtile{min-width:64px;height:68px;padding:0 8px;border:0;border-radius:16px;background:color-mix(in srgb,var(--c-um) 12%,var(--glass));color:var(--c-um);font-family:var(--font-kid);font-weight:800;font-size:34px;cursor:pointer;box-shadow:0 5px 0 color-mix(in srgb,var(--c-um) 30%,transparent);animation:popIn .45s cubic-bezier(.3,1.6,.5,1) var(--d,0ms) both;transition:transform .12s}
.wtile:active{transform:translateY(4px)}
.wtile.used{opacity:.2;cursor:default;box-shadow:none}
.wtile.nope,.balloon.nope{animation-name:shake}
.wtile.nope{animation:shake .35s}
#wbNext{margin-top:12px}

/* Memory */
.mem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:560px;margin:0 auto 12px;perspective:900px}
.mcard{position:relative;aspect-ratio:3/3.4;border:0;background:none;padding:0;cursor:pointer;transform-style:preserve-3d;transition:transform .45s;animation:popIn .45s cubic-bezier(.3,1.6,.5,1) var(--d,0ms) both}
.mcard.up{transform:rotateY(180deg)}
.mface{position:absolute;inset:0;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:var(--glass-shadow)}
.mback{background:linear-gradient(135deg,#3b82f6,#7c3aed);color:#fff;font-size:34px;font-weight:800;border:3px solid rgb(255 255 255 / .5)}
.mfront{transform:rotateY(180deg);background:var(--glass);border:1px solid var(--glass-line)}
.mfront.is-l{font-family:var(--font-kid);font-weight:800;font-size:44px;color:var(--c-uyir)}
.mfront .pe{font-size:34px;line-height:1.1}
.mfront .pw{font-family:var(--font-kid);font-weight:700;font-size:17px}
.mcard.match .mfront{background:color-mix(in srgb,var(--ok) 18%,var(--glass));border-color:var(--ok)}
.mcard.match{animation:boing .55s ease}
.mem-bar{display:flex;justify-content:center;align-items:center;gap:16px}

/* uyirmei table: keep the consonant column visible while scrolling sideways */
table.um tbody td:first-child{position:sticky;left:0;z-index:1;background:var(--bg)}
table.um tbody th{position:sticky;left:40px;z-index:1;background:var(--bg)}
.stat em{font-style:normal}