/* Quiet, flat macaron UI. Pencil illustration direction lives in design/v2. */
:root { --ink:#453a36; --muted:#8a8179; --sea:#8ca77f; --sea-deep:#6e8f61; --cream:#fffaf1; --coral:#89a97b; --shadow:0 8px 26px #665b4a0a; }
body { background:var(--cream); padding-bottom:80px; }
.eyebrow { color:#89977f; letter-spacing:.12em; }
.topbar { background:#fffaf1ed; border-bottom:1px solid #eee7dc; backdrop-filter:blur(8px); }
.brand-mark { background:#f5e9cc; }
.sound-pill,.teacher-link { background:#f5efe4; border:0; box-shadow:none; }
.teacher-link { background:transparent; color:var(--muted); }
.hero { min-height:0; align-items:center; padding:52px max(24px,calc((100vw - 1100px)/2)) 26px; background:var(--cream); }
.hero-art,.hero::after { display:none; }
.hero-copy { color:var(--ink); max-width:820px; }
.hero .eyebrow { color:#939d87; }
.hero h1 { font-size:clamp(2.4rem,5vw,4rem); line-height:1.15; text-shadow:none; letter-spacing:-.03em; }
.hero h1 span { display:inline; color:var(--ink); }
.hero-lead { color:var(--muted); text-shadow:none; font-size:.95rem; max-width:680px; margin:20px 0; font-weight:500; }
.identity-strip { background:#f6f0e5; border:1px solid #e8e0d2; border-radius:24px; box-shadow:none; }
.identity-strip label+label { border-color:#ded5c7; }
.identity-hint { color:var(--muted); }
.identity-hint.is-error { color:#b7594f; }
.profile-summary { color:#738969; font-size:.88rem; margin:20px 12px 0; }
.primary-button { box-shadow:none; background:#88a777; }
.secondary-button { background:#f0ecdf; }
.map-section { padding:24px max(18px,calc((100vw - 1140px)/2)) 56px; background:var(--cream); }
.section-heading h2 { font-size:1.5rem; }
.legend { background:transparent; font-weight:500; }
.route-shell { background:none; }
.route-line path { stroke:#bccbd0; stroke-width:3; filter:none; }
.island-grid { gap:30px 24px; }
.node-land { width:142px; height:136px; border:0; border-radius:47% 53% 48% 52% / 55% 49% 51% 45%; background:#dfeccf; box-shadow:none; }
.island-node:nth-child(6n+2) .node-land { background:#fbefc3; border-radius:53% 47% 46% 54% / 49% 55% 45% 51%; }
.island-node:nth-child(6n+3) .node-land { background:#f7dce1; }
.island-node:nth-child(6n+4) .node-land { background:#e9dff3; }
.island-node:nth-child(6n+5) .node-land { background:#f6dfc9; }
.island-node:nth-child(6n+6) .node-land { background:#d8edf4; }
.node-land::after { display:none; }
.node-land i { font-size:3.5rem; filter:none; }
.node-number { width:30px; height:30px; left:calc(50% - 78px); top:20px; font-size:.8rem; color:#8a8179; background:var(--cream); border:1px solid #e3dcd2; box-shadow:none; }
.node-land em { background:#86a37b; width:30px; height:30px; border:3px solid var(--cream); }
.island-node b { font-size:.9rem; font-weight:700; }
.overlay { background:#453a363b; backdrop-filter:blur(4px); }
.challenge { background:#d9ecf7; }
.challenge::before { display:none; }
.challenge,.teacher-panel,.teacher-login { box-shadow:var(--shadow); }
.challenge-heading p { color:#718797; }
.back-button,.result-close { background:transparent; }
.back-button:hover,.result-close:hover { background:#e8e5dd; }
.score-orb { background:#fbefc3; box-shadow:none; }
.progress-track { height:7px; }
.progress-track span { background:#8fa77b; }
.listen-button { background:#fffaf1; color:#7f9c71; border:3px solid #fff; box-shadow:none; }
.question-instruction { background:transparent; color:#5c6f7c; box-shadow:none; font-weight:500; }
.answer-button,.answer-button:nth-child(2),.answer-button:nth-child(3) { border:3px solid #fffaf1; background:#f9e0e4; box-shadow:none; }
.answer-button:nth-child(2) { background:#fbefcc; }
.answer-button:nth-child(3) { background:#e3edd7; }
.answer-button span { filter:none; }
.answer-button.is-correct { border-color:#8aa775; background:#eaf2df; box-shadow:none; }
.answer-button.is-wrong { border-color:#c18e88; background:#f5dedc; box-shadow:none; }
.feedback-message { background:#eaf2df; border:0; box-shadow:none; }
.feedback-message.wrong { background:#f9edda; }
.result-sheet { border:1px solid #ece2d3; border-radius:32px; background:var(--cream); box-shadow:var(--shadow); }
.result-burst { font-size:3.5rem; }
.result-sheet h2 { font-size:1.9rem; }
.draw-button { background:#f2dfae; box-shadow:none; }
.reward-card { --card-bg:#e2ecda; --card-edge:#9bae8b; color:#514534; width:280px; min-height:260px; padding:22px; background:var(--card-bg); border:2px solid var(--card-edge); outline:1px solid var(--card-edge); outline-offset:-9px; border-radius:23px 25px 22px 26px; box-shadow:none; transform:none; position:relative; gap:8px; }
.reward-card[data-rarity="SR"],.collectible[data-rarity="SR"] { --card-bg:#ebe1f2; --card-edge:#b3a0be; }
.reward-card[data-rarity="SSR"],.collectible[data-rarity="SSR"] { --card-bg:#f8e7b7; --card-edge:#c3a04e; background:linear-gradient(125deg,#f6e2aa,#fff4d6 46%,#f1d99d); }
.reward-card[data-rarity="UR"],.collectible[data-rarity="UR"] { --card-bg:#f8f0ee; --card-edge:#baa1b8; background:linear-gradient(145deg,#ecedf8,#fff4df 40%,#f6e0e9 70%,#e1f0ec); }
.rarity-badge { position:absolute; right:17px; top:14px; color:#8b7654; font-family:Fredoka,sans-serif !important; font-weight:700; font-size:.9rem !important; letter-spacing:.1em !important; }
.card-mascot { display:block; font-style:normal; font-size:3.8rem; margin-top:10px; }
.card-mascot img { display:block; width:126px; height:126px; object-fit:contain; margin:auto; }
.node-land img { display:block; width:104px; height:104px; object-fit:contain; }
.reward-card b { font-size:3.8rem; }
.reward-card span:not(.rarity-badge),.reward-card small { letter-spacing:.03em; }
.bottom-nav { position:fixed; z-index:25; bottom:0; left:0; right:0; display:flex; gap:56px; justify-content:center; padding:12px 16px max(12px,env(safe-area-inset-bottom)); background:#fffaf1f5; border-top:1px solid #eae3d7; }
.bottom-nav button { display:flex; align-items:center; gap:10px; border:0; background:transparent; color:#9a9489; font-size:1.35rem; }
.bottom-nav span { font-size:.85rem; }
.bottom-nav button.is-active { color:#708d5f; }
.collection-sheet { position:relative; background:var(--cream); width:min(740px,100%); max-height:calc(100dvh - 30px); overflow:auto; border-radius:30px; padding:38px 28px; }
.collection-sheet h2 { font-size:1.9rem; margin:0; }
.collection-note { color:var(--muted); font-size:.8rem; }
.collection-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:26px; }
.collectible { --card-bg:#e2ecda; --card-edge:#9bae8b; position:relative; padding:30px 12px 18px; border:1px solid var(--card-edge); outline:1px solid var(--card-edge); outline-offset:-6px; border-radius:20px; background:var(--card-bg); color:var(--ink); text-align:center; display:grid; align-content:start; gap:8px; }
.collectible .card-mascot { font-size:2.8rem; }
.collectible .card-mascot img { width:100%; max-width:130px; height:130px; }
.collectible b { font-family:Fredoka,sans-serif; font-size:1.7rem; }
.collectible strong { font-size:.8rem; font-weight:500; }
.collectible small { font-size:.68rem; color:#897c6d; }
.collection-empty { grid-column:1/-1; text-align:center; padding:45px 10px; color:var(--muted); line-height:1.8; }
button:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid #99b589; outline-offset:4px; }
@media(max-width:760px) {
  .brand>span:last-child { display:block; }
  .brand b { font-size:.88rem; }
  .brand small { font-size:.6rem; }
  .brand-mark { width:32px; height:32px; font-size:1.2rem; }
  .top-actions { gap:1px; }
  .teacher-link,.sound-pill { padding:8px; font-size:.63rem; }
  .hero { min-height:0; padding:34px 22px 12px; }
  .hero h1 { font-size:2.3rem; }
  .hero-lead { font-size:.82rem; }
  .map-section { padding:24px 14px 48px; }
  .section-heading { gap:4px; }
  .section-heading h2 { font-size:1.25rem; }
  .route-shell { padding:12px 6px; }
  .island-grid { gap:20px 8px; }
  .node-land { width:124px; height:120px; }
  .node-land i { font-size:3.3rem; }
  .island-node { min-height:180px; }
  .node-number { left:calc(50% - 70px); }
  .challenge { background:#d9ecf7; padding:20px 14px; }
  .answers { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:360px; margin:auto; gap:14px; }
  .answer-button { width:138px; }
  .answer-button:last-child { grid-column:1/-1; }
  .answer-button span { font-size:4.9rem; }
  .feedback-message small { font-size:.72rem; }
  .collection-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .collection-sheet { padding:40px 20px 26px; }
  .result-sheet { padding:38px 20px 24px; }
  .result-sheet h2 { font-size:1.5rem; }
  .reward-card { min-height:240px; }
}