/* Bersedia untuk Tahun 1? : the look shared by every page */

:root {
  --paper: #fff8ee;
  --card: #ffffff;
  --ink: #1f2a44;
  --ink-soft: #55607a;
  --line: #eadfce;
  --mango: #f4a51c;
  --mango-soft: #fff0d3;
  --leaf: #2f9e6e;
  --leaf-soft: #ddf3e8;
  --coral: #e5534b;
  --coral-soft: #fde4e1;
  --sky: #3a8fd9;
  --sky-soft: #e0eefb;
  --plum: #8a5cc7;
  --plum-soft: #efe6fb;
  --radius: 22px;
  --shadow: 0 1px 0 rgba(31, 42, 68, .04), 0 8px 24px -12px rgba(31, 42, 68, .18);
  --head: "Fredoka", "Trebuchet MS", sans-serif;
  --body: "Lexend", "Segoe UI", sans-serif;
  --kid: "Andika", "Lexend", sans-serif;
  /* each subject page sets these two */
  --accent: var(--coral);
  --accent-soft: var(--coral-soft);
}
.subj-en { --accent: var(--coral); --accent-soft: var(--coral-soft); }
.subj-bm { --accent: var(--sky); --accent-soft: var(--sky-soft); }
.subj-ma { --accent: var(--leaf); --accent-soft: var(--leaf-soft); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.6 var(--body); }
img, svg { display: block; max-width: 100%; }
a { color: var(--sky); }
button { font: inherit; color: inherit; }
html[data-lang="en"] .ms, html[data-lang="ms"] .en { display: none !important; }

.wrap { max-width: 980px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 720px; margin: 0 auto; padding: 0 16px; }

h1, h2, h3 { font-family: var(--head); font-weight: 600; line-height: 1.15; margin: 0; letter-spacing: -.01em; }
h1 { font-size: clamp(32px, 7vw, 52px); }
h2 { font-size: clamp(23px, 4.6vw, 30px); }
h3 { font-size: 19px; }
p { margin: 0; }
.muted { color: var(--ink-soft); }

/* Header */
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top .bar { display: flex; align-items: center; gap: 12px; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font: 600 17px/1.1 var(--head); min-width: 0; }
.brand svg { width: 34px; height: 34px; flex: none; }
.brand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top .spacer { flex: 1; }
.lang { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); flex: none; }
.lang button { border: 0; background: none; cursor: pointer; padding: 6px 12px; border-radius: 999px; font: 600 13px/1 var(--body); color: var(--ink-soft); }
.lang button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.nav { display: flex; gap: 6px; overflow-x: auto; padding: 0 0 10px; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { flex: none; text-decoration: none; color: var(--ink-soft); font: 500 14px/1 var(--body); padding: 9px 14px; border-radius: 999px; border: 1px solid transparent; }
.nav a:hover { background: var(--card); border-color: var(--line); }
.nav a[aria-current="page"] { background: var(--ink); color: #fff; }
.nav a .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
@media (min-width: 860px) {
  .top .bar { height: 66px; }
  .nav { padding: 0; }
  .top .bar .nav { display: flex; }
}

/* Buttons and bits */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 20px; border-radius: 999px; border: 0; cursor: pointer; background: var(--ink); color: #fff; text-decoration: none; font: 600 16px/1.1 var(--body); box-shadow: 0 4px 0 #0e1527; transition: transform .12s, box-shadow .12s; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #0e1527; }
.btn.mango { background: var(--mango); color: var(--ink); box-shadow: 0 4px 0 #c47f05; }
.btn.ghost { background: var(--card); color: var(--ink); box-shadow: 0 4px 0 var(--line); border: 1px solid var(--line); }
.btn.small { padding: 10px 16px; font-size: 14px; }
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--line); }
.pill { display: inline-block; padding: 4px 10px; border-radius: 999px; font: 600 12px/1.4 var(--body); letter-spacing: .02em; background: var(--accent-soft); color: color-mix(in srgb, var(--accent) 70%, #000); }
.pill.mango { background: var(--mango-soft); color: #8a5a00; }

.hear { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer; background: #fff; color: var(--sky); flex: none; }
.hear svg { width: 18px; height: 18px; }
.hear.playing, .playing .hear { background: var(--sky); color: #fff; }
.no-voice .hear, .no-voice .tap { display: none !important; }

.calm { padding: 18px 20px; border-radius: var(--radius); background: var(--leaf-soft); color: #164d36; display: flex; gap: 14px; align-items: flex-start; }
.calm svg { flex: none; width: 34px; height: 34px; }
.calm b.t { font-family: var(--head); font-weight: 600; font-size: 18px; display: block; margin-bottom: 2px; }
.calm p { font-size: 15px; }

.tip { display: flex; gap: 12px; padding: 16px; border-radius: 18px; background: var(--mango-soft); color: #5e3d00; font-size: 15.5px; }
.tip svg { flex: none; width: 26px; height: 26px; }
.tip b { font-weight: 600; }

/* Footer */
.foot { padding: 40px 0 56px; color: var(--ink-soft); font-size: 13px; }
.foot .wrap { border-top: 1px solid var(--line); padding-top: 20px; display: grid; gap: 8px; }
.foot a { color: var(--ink-soft); }

/* ---------- Checklist (subject pages) ---------- */
.s-hero { padding: 30px 0 8px; }
.s-hero h1 { font-size: clamp(32px, 7vw, 48px); margin-top: 12px; }
.s-hero p.lead { font-size: 17px; color: var(--ink-soft); margin-top: 10px; max-width: 40em; }
.summary { margin: 24px 0 10px; padding: 20px; display: grid; gap: 18px; align-items: center; }
@media (min-width: 760px) { .summary { grid-template-columns: auto 1fr; padding: 24px 28px; } }
.ring { width: 128px; height: 128px; position: relative; margin: 0 auto; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring .num { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.ring .num b { font: 600 34px/1 var(--head); display: block; }
.ring .num small { font-size: 12px; color: var(--ink-soft); }
.ring circle { transition: stroke-dashoffset .6s cubic-bezier(.3,.7,.3,1); }
.bars { display: grid; gap: 10px; margin-top: 14px; }
.bar { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: 14px; }
.bar .track { grid-column: 1 / -1; height: 10px; border-radius: 99px; background: #f3ebde; overflow: hidden; display: flex; }
.bar .yes { background: var(--leaf); transition: width .5s; }
.bar .some { background: var(--mango); transition: width .5s; }
.bar span:nth-child(2) { color: var(--ink-soft); }
.summary .msg { font-size: 15px; color: var(--ink-soft); margin-top: 4px; }

.group { margin-top: 34px; }
.group-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.group-head .ic { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; flex: none; background: var(--accent-soft); color: var(--accent); }
.group-head .ic svg { width: 26px; height: 26px; }
.group-head h2 { font-size: 24px; }
.group-head p { font-size: 14px; color: var(--ink-soft); }
.items { display: grid; gap: 10px; }
.item { padding: 16px; }
.item .row { display: flex; gap: 12px; align-items: flex-start; }
.item .dot { flex: none; width: 30px; height: 30px; border-radius: 50%; margin-top: 1px; display: grid; place-items: center; font: 600 13px/1 var(--body); background: #f3ebde; color: var(--ink-soft); transition: background .2s, color .2s; }
.item[data-v="yes"] .dot { background: var(--leaf); color: #fff; }
.item[data-v="some"] .dot { background: var(--mango); color: var(--ink); }
.item[data-v="not"] .dot { background: var(--coral-soft); color: var(--coral); }
.item h3 { font: 600 17px/1.35 var(--body); }
.item .eg { font-size: 14px; color: var(--ink-soft); margin-top: 2px; }
.item .shared { display: inline-block; margin-top: 6px; font-size: 12px; color: var(--plum); background: var(--plum-soft); border-radius: 99px; padding: 2px 8px; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 14px; }
.seg button { border: 1.5px solid var(--line); background: var(--card); border-radius: 14px; cursor: pointer; padding: 10px 4px; font-size: 14px; font-weight: 500; color: var(--ink-soft); transition: background .15s, border-color .15s, color .15s, transform .1s; }
.seg button:active { transform: scale(.96); }
.seg button[aria-pressed="true"][data-v="not"] { background: var(--coral-soft); border-color: var(--coral); color: #9b2c25; }
.seg button[aria-pressed="true"][data-v="some"] { background: var(--mango-soft); border-color: var(--mango); color: #7a4f00; }
.seg button[aria-pressed="true"][data-v="yes"] { background: var(--leaf-soft); border-color: var(--leaf); color: #145c3d; }
.help-toggle { margin-top: 12px; border: 0; background: none; cursor: pointer; padding: 4px 0; color: var(--sky); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.help-toggle svg { width: 14px; height: 14px; transition: transform .2s; }
.item.open .help-toggle svg { transform: rotate(180deg); }
.help { display: none; margin-top: 10px; padding: 14px; border-radius: 16px; background: var(--paper); font-size: 15px; }
.item.open .help { display: block; }
.help .code { font-size: 12px; color: var(--ink-soft); margin-top: 10px; }
.help .more { margin-top: 12px; }

/* ---------- Guide pages ---------- */
.g-head { padding: 32px 0 6px; }
.g-head h1 { margin-top: 14px; font-size: clamp(30px, 7vw, 44px); }
.g-head .lead { font-size: 18px; color: var(--ink-soft); margin-top: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 14px; }
.chip svg { width: 16px; height: 16px; color: var(--accent); }
section.part { margin-top: 40px; }
section.part > h2 { font-size: 25px; display: flex; align-items: center; gap: 10px; }
section.part > h2 .no { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-size: 17px; flex: none; background: var(--ink); color: #fff; }
section.part > p { margin-top: 10px; font-size: 16.5px; }
.words { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.word { padding: 14px 8px 12px; text-align: center; cursor: pointer; border: 1px solid var(--line); background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); transition: transform .12s; }
.word:active { transform: scale(.96); }
.word svg.pic { width: 70%; margin: 0 auto; aspect-ratio: 1; }
.word .w { font: 700 24px/1.1 var(--kid); margin-top: 8px; }
.word .w b { color: var(--accent); }
.word .tap { font-size: 12px; color: var(--sky); margin-top: 4px; display: inline-flex; align-items: center; gap: 4px; }
.word .tap svg { width: 13px; height: 13px; }
.word.playing { outline: 3px solid var(--sky); }
.words-note { text-align: center; margin-top: 14px; font: 600 18px/1.4 var(--head); }
.dodont { margin-top: 16px; display: grid; gap: 10px; }
.dodont .r { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; }
.dodont .ok { background: var(--leaf-soft); }
.dodont .no { background: var(--coral-soft); }
.dodont .mark { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.dodont .ok .mark { background: var(--leaf); }
.dodont .no .mark { background: var(--coral); }
.dodont .mark svg { width: 16px; height: 16px; }
.dodont .big { font: 700 22px/1.1 var(--kid); min-width: 86px; }
.dodont small { display: block; font-size: 14px; color: var(--ink-soft); }
.boxed { margin-top: 14px; padding: 16px; border-radius: 18px; background: var(--card); border: 1px dashed #d9c9ae; }
.boxed .tiles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.boxed .tiles span { font: 700 21px/1 var(--kid); min-width: 46px; height: 46px; padding: 0 10px; display: grid; place-items: center; border-radius: 14px; background: var(--accent-soft); }
.game { margin-top: 18px; overflow: hidden; }
.game .gh { padding: 18px 18px 14px; display: flex; gap: 14px; align-items: center; }
.game .gh .gi { width: 56px; height: 56px; flex: none; border-radius: 16px; background: var(--accent-soft); display: grid; place-items: center; }
.game .gh .gi svg { width: 38px; height: 38px; }
.game .gh h3 { font-size: 21px; }
.game .gh p { font-size: 14px; color: var(--ink-soft); }
.game ol { margin: 0; padding: 4px 18px 18px; list-style: none; counter-reset: s; display: grid; gap: 12px; }
.game ol li { counter-increment: s; display: grid; grid-template-columns: 30px 1fr; gap: 10px; font-size: 16px; }
.game ol li::before { content: counter(s); width: 30px; height: 30px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--line); display: grid; place-items: center; font-weight: 600; font-size: 14px; }
.game .tip { margin: 0 18px 18px; }
.bubble { margin-top: 8px; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: var(--sky-soft); color: #174a7a; font-size: 15px; display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.bubble q { quotes: "“" "”"; font-style: italic; }
.signs { margin-top: 14px; display: grid; gap: 10px; }
.signs div { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; }
.signs svg { flex: none; width: 24px; height: 24px; color: var(--leaf); margin-top: 1px; }
.worry { margin-top: 16px; padding: 18px; border-left: 5px solid var(--sky); background: var(--card); border-radius: 0 18px 18px 0; }
.worry p + p { margin-top: 10px; }
.next { margin-top: 40px; padding: 22px; display: grid; gap: 16px; background: var(--plum-soft); border-color: #dccdf3; }
.next p { color: #4b3473; margin-top: 6px; }
.next .actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.pager a { padding: 14px 16px; text-decoration: none; color: var(--ink); font-size: 14px; }
.pager a small { display: block; color: var(--ink-soft); font-size: 12px; }
.pager a.nx { text-align: right; grid-column: 2; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.no-voice-ms [data-say-lang="ms"] .tap, .no-voice-ms .hear[data-say-lang="ms"] { display: none !important; }

/* ---------- Two ways into a checklist ---------- */
.ways { display: grid; gap: 10px; margin-top: 20px; }
@media (min-width: 700px) { .ways { grid-template-columns: 1fr 1fr; } }
.way { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); text-decoration: none; color: var(--ink); box-shadow: var(--shadow); }
.way .n { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; font: 600 18px/1 var(--head); flex: none; background: var(--sky-soft); color: var(--sky); }
.way b { display: block; font-size: 16px; }
.way small { display: block; color: var(--ink-soft); font-size: 14px; }
.way.go { background: var(--ink); color: #fff; border-color: var(--ink); }
.way.go .n { background: var(--mango); color: var(--ink); }
.way.go small { color: #c9d1e4; }

/* ---------- Tick bar at the bottom of a guide ---------- */
body.has-tickbar { padding-bottom: 150px; }
.tickbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: color-mix(in srgb, var(--card) 96%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--line); box-shadow: 0 -10px 24px -18px rgba(31,42,68,.45); padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.tickbar .in { max-width: 720px; margin: 0 auto; display: grid; gap: 8px; }
.tickbar .q { font: 600 15px/1.3 var(--body); }
.tickbar .seg { margin-top: 0; }
.tickbar .nav2 { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 600; }
.tickbar .nav2 a { color: var(--sky); text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tickbar .nav2 a.nx { text-align: right; }
.tickbar .saved { font-size: 12px; color: var(--leaf); font-weight: 500; }

/* ---------- Mr Reyy ---------- */
.reyy { position: fixed; z-index: 40; left: max(8px, env(safe-area-inset-left, 0px)); bottom: calc(var(--lift, 0px) + env(safe-area-inset-bottom, 0px)); display: flex; align-items: flex-end; gap: 4px; max-width: calc(100vw - 24px); animation: reyy-in .6s cubic-bezier(.2,.9,.3,1.2) both; pointer-events: none; }
.reyy > * { pointer-events: auto; }
.reyy.leaving { animation: reyy-out .3s ease-in both; }
.reyy-face { width: 92px; flex: none; }
.reyy-face svg { width: 92px; height: 84px; }
.reyy-face.wave svg { transform-origin: 50% 90%; animation: reyy-wave 1.8s ease-in-out .6s 2; }
.reyy-bub { background: var(--card); border: 2px solid var(--ink); border-radius: 18px 18px 18px 4px; padding: 10px 12px; margin-bottom: 56px; max-width: 280px; box-shadow: 0 10px 24px -12px rgba(31,42,68,.5); font-size: 14.5px; line-height: 1.45; }
.reyy-bub b { font-family: var(--head); font-weight: 600; }
.reyy-act { display: flex; gap: 12px; margin-top: 8px; }
.reyy-act button { border: 0; background: none; padding: 4px 0; cursor: pointer; font: 600 13px var(--body); color: var(--sky); }
.reyy-act .off { color: var(--ink-soft); font-weight: 500; }
@keyframes reyy-in { from { transform: translateY(110%); } }
@keyframes reyy-out { to { transform: translateY(110%); opacity: 0; } }
@keyframes reyy-wave { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
.reyy-hand { position: absolute; z-index: 35; width: 44px; height: 44px; pointer-events: none; animation: reyy-tap 1.4s ease-in-out infinite; filter: drop-shadow(0 4px 6px rgba(31,42,68,.3)); }
@keyframes reyy-tap { 50% { transform: translate(-6px, -8px); } }
.reyy-glow { outline: 3px solid var(--mango); outline-offset: 3px; animation: reyy-glow 1.6s ease-in-out infinite; }
@keyframes reyy-glow { 50% { outline-color: transparent; } }
.linkbtn { border: 0; background: none; padding: 0; cursor: pointer; color: var(--ink-soft); text-decoration: underline; font: inherit; }
@media (prefers-reduced-motion: reduce) { .reyy, .reyy-hand, .reyy-glow, .reyy-face.wave svg { animation: none !important; } }
@media print { .reyy, .reyy-hand, .tickbar { display: none !important; } }
.game .demo { margin: 0 18px 14px; padding: 0; }
.game .demo svg { width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--line); }
.game .demo figcaption { font-size: 12px; color: var(--ink-soft); margin-top: 6px; }
#reyy-guide { position: fixed; z-index: 39; left: max(10px, env(safe-area-inset-left, 0px)); bottom: calc(var(--lift, 0px) + 12px + env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px 4px 4px; border-radius: 999px; border: 2px solid var(--ink); background: var(--card); box-shadow: 0 8px 18px -10px rgba(31,42,68,.5); cursor: pointer; font: 600 13px var(--body); color: var(--ink); }
#reyy-guide .gf { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; background: var(--sky-soft); display: grid; place-items: center; }
#reyy-guide .gf svg { width: 46px; height: 42px; margin-top: 6px; }
@media print { #reyy-guide { display: none !important; } }
.foot-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 4px; }
.foot .mail { color: var(--ink); user-select: all; }
.install-btn { display: none !important; }
.can-install .install-btn { display: inline-flex !important; }
#reyy-guide[hidden] { display: none !important; }
/* Mr Reyy's entrance: pop in with a bounce (or jump with stars for "well done"), "..." first, then the words */
.reyy { animation: none; }
.reyy.pop .reyy-face { transform-origin: 30% 100%; animation: reyy-pop .7s cubic-bezier(.3,1.6,.5,1) both; }
.reyy.pop .reyy-bub, .reyy.jump .reyy-bub { transform-origin: 0 100%; animation: reyy-pop .5s cubic-bezier(.3,1.6,.5,1) .3s both; }
.reyy.jump .reyy-face { animation: reyy-jump .9s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes reyy-pop { from { transform: scale(0); } }
@keyframes reyy-jump { 0% { transform: translateY(120%); } 60% { transform: translateY(-16%); } }
.reyy-star { position: absolute; width: 20px; height: 20px; opacity: 0; animation: reyy-star 1s ease-out both; pointer-events: none; }
@keyframes reyy-star { 0% { opacity: 0; transform: scale(.2); } 40% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0; transform: scale(.8) translateY(-14px); } }
.reyy-bub .dots span { display: inline-block; width: 7px; height: 7px; margin: 4px 2px; border-radius: 50%; background: var(--ink-soft); animation: reyy-dot 1s infinite; }
.reyy-bub .dots span:nth-child(2) { animation-delay: .15s; } .reyy-bub .dots span:nth-child(3) { animation-delay: .3s; }
@keyframes reyy-dot { 50% { transform: translateY(-4px); opacity: .4; } }
.reyy-bub .w { animation: reyy-word .25s ease both; }
@keyframes reyy-word { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .reyy *, .reyy-star { animation: none !important; } .reyy-star { display: none; } }
.game .need { display: inline-block; margin-top: 6px; font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 99px; background: var(--mango-soft); color: #7a4f00; }
.game .need.free { background: var(--leaf-soft); color: #145c3d; }
/* Mr Reyy is Reyy's own picture: show his head, smile and waving hand (the top of the picture). */
.reyy-face { width: 150px; height: 88px; overflow: hidden; flex: none; }
.reyy-face img.reyy-img { width: 150px; height: 150px; display: block; }
.reyy-face.wave img.reyy-img { transform-origin: 40% 60%; animation: reyy-wave 1.8s ease-in-out .6s 2; }
.reyy-bub { margin-bottom: 48px; }
@media (max-width: 420px) { .reyy-face { width: 120px; height: 70px; } .reyy-face img.reyy-img { width: 120px; height: 120px; } .reyy-bub { margin-bottom: 38px; } }
.game .photo { margin: 0 18px 14px; }
.game .photo img { width: 100%; aspect-ratio: 10 / 7; object-fit: cover; border-radius: 16px; display: block; background: var(--line); }
.game .photo figcaption { font-size: 11px; color: var(--ink-soft); margin-top: 4px; text-align: right; }
/* More ways for Mr Reyy to arrive, and a gentle bob while he talks */
.reyy.slide .reyy-face { animation: reyy-up .6s cubic-bezier(.2,.9,.3,1.2) both; }
.reyy.slide .reyy-bub, .reyy.peek .reyy-bub, .reyy.hop .reyy-bub { transform-origin: 0 100%; animation: reyy-pop .5s cubic-bezier(.3,1.6,.5,1) .45s both; }
.reyy.peek .reyy-face { transform-origin: 50% 100%; animation: reyy-peek .9s ease-out both; }
.reyy.hop .reyy-face { animation: reyy-hop 1s ease-out both; }
@keyframes reyy-up { from { transform: translateY(110%); } }
@keyframes reyy-peek { 0% { transform: translateX(-130%) rotate(-28deg); } 60% { transform: translateX(6%) rotate(8deg); } 100% { transform: none; } }
@keyframes reyy-hop { 0% { transform: translateY(110%); } 35% { transform: translateY(-16%); } 55% { transform: translateY(0); } 72% { transform: translateY(-7%); } 88%, 100% { transform: translateY(0); } }
.reyy .reyy-face img.reyy-img { animation: reyy-bob 3.2s ease-in-out 1.2s infinite; }
.reyy .reyy-face.wave img.reyy-img { animation: reyy-wave 1.8s ease-in-out .7s 2, reyy-bob 3.2s ease-in-out 4.4s infinite; }
@keyframes reyy-bob { 50% { transform: translateY(-3px) rotate(-1.5deg); } }
@media (prefers-reduced-motion: reduce) { .reyy .reyy-face, .reyy .reyy-face img.reyy-img { animation: none !important; } }
/* Guide me: Mr Reyy's face fills the circle (head only, big enough to read) */
#reyy-guide .gf { width: 42px; height: 42px; overflow: hidden; display: block; position: relative; }
#reyy-guide .gf svg { position: absolute; width: 74px; height: 67px; max-width: none; left: -16px; top: -4px; margin: 0; }
/* The first Mr Reyy drawing: his whole body moves together, and his hands and face change with the message */
.reyy-face { width: 92px; height: auto; overflow: visible; }
.reyy-face svg { width: 92px; height: 84px; display: block; }
.reyy .reyy-face svg { animation: reyy-bob 3.2s ease-in-out 1.2s infinite; transform-origin: 50% 90%; }
.reyy .reyy-face.wave svg { animation: reyy-wave 1.8s ease-in-out .7s 2, reyy-bob 3.2s ease-in-out 4.4s infinite; }
.reyy-bub { margin-bottom: 56px; }
@media (max-width: 420px) { .reyy-face { width: 92px; height: auto; } .reyy-bub { margin-bottom: 56px; } }
@media (prefers-reduced-motion: reduce) { .reyy .reyy-face svg { animation: none !important; } }
/* Mr Reyy moves as in Email Room: the message pops in and he nods. Nothing else moves. */
.reyy.er .reyy-face { animation: er-in .35s cubic-bezier(.3, 1.5, .5, 1) both; }
.reyy.er .reyy-face svg { animation: er-nod .5s ease .15s; transform-origin: 50% 80%; }
.reyy.er .reyy-bub { transform-origin: 0 100%; animation: er-in .35s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes er-in { from { opacity: 0; transform: scale(.94) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes er-nod { 30% { transform: rotate(-9deg); } 65% { transform: rotate(6deg); } }
/* ---------- Play-together games (permainan.html) ---------- */
.play-link { display: flex; gap: 14px; align-items: center; margin-top: 18px; padding: 16px 18px; text-decoration: none; color: var(--ink); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.play-link .gi { width: 52px; height: 52px; flex: none; border-radius: 16px; background: var(--card); display: grid; place-items: center; }
.play-link .gi svg { width: 36px; height: 36px; }
.play-link small { display: block; font-size: 13px; color: var(--ink-soft); }
.play-link b { font: 600 19px/1.25 var(--head); }
.play-parent { margin-top: 20px; }
.play-start, .play-end, .play-stage { margin-top: 18px; padding: 22px 18px; text-align: center; }
.play-start h2 { font-size: 22px; }
.play-start .muted { font-size: 14.5px; margin-top: 6px; }
.play-start .small { font-size: 13px; margin-top: 10px; }
.play-sets { display: grid; gap: 8px; margin: 16px auto 18px; max-width: 360px; }
.play-sets button { border: 2px solid var(--line); background: var(--card); border-radius: 16px; padding: 12px; cursor: pointer; font: 600 16px/1.2 var(--body); color: var(--ink-soft); }
.play-sets button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.play-go { font-size: 18px; padding: 15px 26px; }
.play-back { margin-top: 18px; font-size: 14px; }
.play-dots { display: flex; justify-content: center; gap: 8px; }
.play-dots span { width: 12px; height: 12px; border-radius: 50%; background: #f3ebde; }
.play-dots span.now { background: var(--mango); }
.play-dots span.done { background: var(--leaf); }
.play-pic { display: grid; justify-items: center; gap: 4px; margin: 14px auto 0; padding: 12px 22px 10px; border: 1px solid var(--line); border-radius: 24px; background: var(--paper); cursor: pointer; }
.play-pic > svg { width: 150px; height: 150px; }
.play-pic .tap { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--sky); }
.play-pic .tap svg { width: 15px; height: 15px; }
.play-pic.playing { outline: 3px solid var(--sky); }
.play-noVoice { display: none; font-size: 14px; color: var(--ink-soft); margin-top: 8px; }
.no-voice .play-noVoice, .no-voice-ms .play-noVoice.ms { display: block; }
.play-word { font: 700 52px/1 var(--kid); margin-top: 16px; letter-spacing: .02em; }
.play-word .gap { display: inline-block; min-width: .62em; height: .95em; vertical-align: -.08em; margin-right: 2px; border-bottom: 4px solid var(--accent); }
.play-word .gap.in { border-bottom-color: transparent; color: var(--accent); animation: play-drop .4s cubic-bezier(.3,1.6,.5,1) both; }
.play-ask { margin-top: 14px; font-size: 16px; font-weight: 600; }
.play-choices { display: flex; justify-content: center; gap: 12px; margin-top: 12px; }
.play-choices button { width: 84px; height: 92px; border-radius: 22px; border: 2px solid var(--line); background: var(--card); cursor: pointer; font: 700 54px/1 var(--kid); color: var(--ink); box-shadow: 0 5px 0 var(--line); transition: transform .1s; }
.play-choices button:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--line); }
.play-choices button.right { background: var(--leaf-soft); border-color: var(--leaf); color: #145c3d; box-shadow: 0 5px 0 #a9dcc4; }
.play-choices button.wrong { opacity: .35; }
.play-choices button.shake { animation: play-shake .4s ease; }
.play-choices button:disabled { cursor: default; }
.play-fb { min-height: 48px; margin-top: 14px; font-size: 16px; }
.play-stars { display: flex; justify-content: center; gap: 6px; }
.play-stars span { width: 40px; height: 40px; animation: play-drop .5s cubic-bezier(.3,1.6,.5,1) both; }
.play-stars span:nth-child(2) { animation-delay: .1s; } .play-stars span:nth-child(3) { animation-delay: .2s; } .play-stars span:nth-child(4) { animation-delay: .3s; } .play-stars span:nth-child(5) { animation-delay: .4s; } .play-stars span:nth-child(6) { animation-delay: .5s; }
.play-end h2 { margin-top: 14px; font-size: 26px; }
.play-end p { margin-top: 8px; }
.play-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
@keyframes play-drop { from { opacity: 0; transform: scale(.3) translateY(-20px); } }
@keyframes play-shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
.play-word .gap.wide { min-width: 1.15em; }
.play-choices.n4 button, .play-choices.n5 button { width: 58px; height: 70px; font-size: 40px; border-radius: 18px; }
.play-choices.n4, .play-choices.n5 { gap: 8px; }
.play-choices.nums button { font-family: var(--head); font-weight: 600; }
.play-choices.wide button { width: 96px; font-size: 46px; }
.play-choices.pics button { width: 96px; height: 96px; padding: 10px; display: grid; place-items: center; }
.play-choices.pics button svg { width: 70px; height: 70px; }
.play-count { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 16px auto 0; max-width: 360px; }
.play-count .thing { position: relative; width: 74px; height: 74px; padding: 8px; border-radius: 20px; border: 2px dashed var(--line); background: var(--paper); cursor: pointer; }
.play-count.many .thing { width: 60px; height: 60px; padding: 6px; }
.play-count .thing svg { width: 100%; height: 100%; }
.play-count .thing.on { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
.play-count .badge { position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font: 600 14px/26px var(--head); text-align: center; animation: play-drop .3s cubic-bezier(.3,1.6,.5,1) both; }
.play-flash { position: relative; width: 190px; height: 190px; margin: 16px auto 0; border-radius: 24px; border: 2px solid var(--line); background: var(--paper); overflow: hidden; }
.play-flash svg { width: 100%; height: 100%; opacity: 0; transition: opacity .15s; }
.play-flash .cover { position: absolute; inset: 0; display: grid; place-items: center; font: 600 72px/1 var(--head); color: #d9c9ae; transition: opacity .15s; }
.play-flash.open svg { opacity: 1; }
.play-flash.open .cover { opacity: 0; }
.play-again-show { margin-top: 12px; }
.play-again-show[hidden] { display: none; }
.play-row { display: flex; justify-content: center; align-items: center; gap: 5px; margin-top: 18px; }
.play-row span { width: 46px; height: 46px; flex: none; display: grid; place-items: center; }
.play-row span svg { width: 100%; height: 100%; }
.play-row .play-next { border: 3px dashed var(--accent); border-radius: 14px; font: 600 28px/1 var(--head); color: var(--accent); }
.play-row .play-next.in { border-style: solid; background: var(--accent-soft); animation: play-drop .4s cubic-bezier(.3,1.6,.5,1) both; }
@media (max-width: 380px) { .play-row { gap: 3px; } .play-row span { width: 42px; height: 42px; } }