/* ---------- Class 1 : Word World + My Word Book ----------
   Separate file so the older screens' styles (app.css) stay untouched. */

/* Word World extra question types */
.speakbtn{width:120px;height:120px;border-radius:50%;font-size:64px;background:radial-gradient(circle at 35% 30%,#fff,#FFE08A);border:4px solid var(--ink);box-shadow:0 6px 0 var(--ink);animation:pulse 1.4s infinite}
.speakbtn:active{transform:translateY(4px);box-shadow:none}
.samew{align-self:center;font-size:clamp(40px,2rem + 4vw,60px);font-weight:800;background:var(--chip);border:4px dashed var(--turmeric);border-radius:20px;padding:4px 26px;line-height:1.2}

/* Word Book */
.wbhead{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap;background:var(--card);border:3px solid var(--ink);border-radius:18px;padding:6px 14px;box-shadow:var(--shadow)}
.wbhead b{font-size:clamp(20px,1.1rem + 1.4vw,26px);font-weight:800;line-height:1.2}
.wbhead small{font-size:var(--fs-note);font-weight:700;color:var(--ink-soft)}
.wbgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.wbw{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--card);border:3px solid var(--ink);border-radius:16px;box-shadow:0 4px 0 var(--ink);padding:8px 4px;min-height:96px;justify-content:center}
.wbw .p{font-size:38px;line-height:1.1}
.wbw .w{font-weight:800;font-size:clamp(17px,1rem + .6vw,20px);line-height:1.15;overflow-wrap:anywhere;text-align:center}
.wbw.nopic .p{font-size:22px;opacity:.5}
.wbw.pop{animation:pop .35s cubic-bezier(.3,1.8,.6,1);background:var(--chip)}
.unitnav button.on{background:var(--uc);color:#fff}