/* Study My Style: shared look for every page.
   Loaded after each tool's own styles, so these rules win where they overlap. */

@font-face{font-family:"Andika";font-weight:400;font-display:swap;src:url(/assets/fonts/andika-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Andika";font-weight:700;font-display:swap;src:url(/assets/fonts/andika-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-weight:700;font-display:swap;src:url(/assets/fonts/bricolage-grotesque-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-weight:800;font-display:swap;src:url(/assets/fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"OpenDyslexic";font-weight:400;font-display:swap;src:url(/assets/fonts/opendyslexic-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"OpenDyslexic";font-weight:700;font-display:swap;src:url(/assets/fonts/opendyslexic-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Lexend";font-weight:400;font-display:swap;src:url(/assets/fonts/lexend-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Lexend";font-weight:700;font-display:swap;src:url(/assets/fonts/lexend-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:400;font-display:swap;src:url(/assets/fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:700;font-display:swap;src:url(/assets/fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2")}

:root{--top:#1F3A5F;--shadow:#1B2A40;--read:"Andika","Trebuchet MS",Verdana,sans-serif;--fun:"Bricolage Grotesque","Andika","Trebuchet MS",sans-serif}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--shadow:#0A121F} }
:root[data-theme="dark"]{--shadow:#0A121F}

/* Reading fonts kids can pick in "My look". Headings switch too, so a page reads in one font. */
html[data-font="dyslexic"]{--read:"OpenDyslexic","Andika",sans-serif;--fun:var(--read)}
html[data-font="lexend"]{--read:"Lexend","Andika",sans-serif;--fun:var(--read)}
html[data-font="atkinson"]{--read:"Atkinson Hyperlegible","Andika",sans-serif;--fun:var(--read)}
html[data-font="dyslexic"] body{line-height:1.6}
body{font-family:var(--read)}

/* Color themes kids can pick in "My look" */
html[data-color="grape"]{--top:#5A3E8E}
html[data-color="ocean"]{--top:#17657F}
html[data-color="forest"]{--top:#2E6645}
html[data-color="berry"]{--top:#9E3560}
html[data-color="sunset"]{--top:#B4522A}
@media (prefers-color-scheme: light){ html[data-color]{--btn:var(--top)} }
html[data-color][data-theme="light"]{--btn:var(--top)}

/* ---------- header ---------- */
.top{position:relative;background-color:var(--top);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='160' viewBox='0 0 320 160' fill='none' stroke='%23fff' stroke-opacity='.09' stroke-width='2'%3E%3Cpath d='M-10 30C40 5 90 60 160 30S270 5 330 30'/%3E%3Cpath d='M-10 48C40 23 90 78 160 48S270 23 330 48'/%3E%3Cpath d='M-10 118C60 96 120 146 190 120S280 96 330 118'/%3E%3Cpath d='M-10 136C60 114 120 164 190 138S280 114 330 136'/%3E%3Cpath d='M214 72c20-14 54-8 56 8s-32 24-50 16-20-16-6-24z'/%3E%3Cpath d='M228 78c10-6 26-3 27 4s-16 11-24 7-10-7-3-11z'/%3E%3Cpath d='M40 84c14-10 38-6 40 6s-22 16-34 10-14-10-6-16z'/%3E%3C/svg%3E");
  background-size:320px 160px}
.top h1{font-family:var(--fun);font-weight:800;letter-spacing:-.3px}
.stripe{height:6px}
.sms-nav{margin-left:auto;display:flex;gap:8px;flex:none;align-items:center}
.sms-nav a,.sms-nav button{display:inline-flex;align-items:center;gap:6px;font:inherit;font-family:var(--fun);font-weight:700;font-size:15px;color:#FFFFFF;text-decoration:none;cursor:pointer;
  background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.55);border-radius:14px;padding:7px 12px;line-height:1.1}
.sms-nav a:hover,.sms-nav button:hover{background:rgba(255,255,255,.22);border-color:#FFFFFF}
.sms-nav svg{width:20px;height:20px;flex:none}
.topin>div:not(.sms-nav){flex:1 1 0;min-width:0}
@media (max-width:620px){ .topin{flex-wrap:wrap} .sms-nav{margin-left:0;width:100%;justify-content:flex-end;order:3} .sms-nav a,.sms-nav button{font-size:14px;padding:6px 10px} }


/* ---------- Backgrounds kids can pick in "My look" (all drawn with CSS, no photos) ---------- */
:root{
  --veil:rgba(255,255,255,.12);
  --bg-aurora:radial-gradient(circle at 15% 12%,#C9BCEB 0,transparent 42%),radial-gradient(circle at 88% 22%,#9FCBE8 0,transparent 45%),radial-gradient(circle at 62% 88%,#A9DABB 0,transparent 50%),radial-gradient(circle at 8% 92%,#F4B6C2 0,transparent 40%),#F4F0FB;
  --bg-sunrise:linear-gradient(160deg,#FFDDB8 0%,#FBCDE0 48%,#D9CCFA 100%);
  --bg-lagoon:linear-gradient(200deg,#C4F0E8 0%,#C7E0FA 55%,#E2F5D0 100%);
  --bg-swirl:repeating-conic-gradient(from 0deg at 30% 35%,#F9D3DB 0deg,#FBE7B0 40deg,#CDEBD7 80deg,#CFE3F4 120deg,#E1D8F6 160deg,#F9D3DB 200deg,#FBE7B0 240deg,#CDEBD7 280deg,#CFE3F4 320deg,#F9D3DB 360deg);
  --bg-waves:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='none'%3E%3Crect width='1440' height='900' fill='%23EAF3FC'/%3E%3Cpath d='M0 170C240 90 420 260 720 200S1180 60 1440 150V900H0Z' fill='%23D6E8F8'/%3E%3Cpath d='M0 360C260 270 480 470 760 390S1200 250 1440 330V900H0Z' fill='%23C9DDF6'/%3E%3Cpath d='M0 560C300 470 520 660 800 590S1220 450 1440 530V900H0Z' fill='%23D9D0F4'/%3E%3Cpath d='M0 750C280 670 560 840 840 770S1240 650 1440 720V900H0Z' fill='%23CDEBE4'/%3E%3C/svg%3E") center/cover no-repeat,#EAF3FC;
  --bg-confetti:radial-gradient(#F4A7B9 3px,transparent 3.5px) 0 0/52px 52px,radial-gradient(#8FC3E6 3px,transparent 3.5px) 26px 26px/52px 52px,radial-gradient(#F2CB5E 2.5px,transparent 3px) 12px 34px/52px 52px,radial-gradient(#8ED1A5 2.5px,transparent 3px) 38px 9px/52px 52px,#FBF8F1;
  --bg-grid:linear-gradient(#D3E1EF 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,#D3E1EF 1px,transparent 1px) 0 0/28px 28px,#FAFCFF;
  --bg-lava:radial-gradient(ellipse at 18% 28%,#F7C29A 0,transparent 50%),radial-gradient(ellipse at 82% 72%,#F4B6C2 0,transparent 50%),radial-gradient(ellipse at 72% 8%,#F3D57E 0,transparent 42%),#FFF3EA;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--veil:rgba(22,35,58,.84)} }
:root[data-theme="dark"]{--veil:rgba(22,35,58,.84)}
html[data-bg="aurora"]{--bgx:var(--bg-aurora)} html[data-bg="sunrise"]{--bgx:var(--bg-sunrise)} html[data-bg="lagoon"]{--bgx:var(--bg-lagoon)}
html[data-bg="swirl"]{--bgx:var(--bg-swirl)} html[data-bg="waves"]{--bgx:var(--bg-waves)} html[data-bg="confetti"]{--bgx:var(--bg-confetti)}
html[data-bg="grid"]{--bgx:var(--bg-grid)} html[data-bg="lava"]{--bgx:var(--bg-lava)}
html[data-bg] body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(var(--veil),var(--veil)),var(--bgx)}
.sms-bgs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sms-bgs .sms-bg{display:block;font:inherit;font-size:14px;font-weight:700;color:var(--ink);background:var(--paper);border:2.5px solid var(--line);border-radius:14px;padding:5px 5px 6px;cursor:pointer;text-align:center}
.sms-bgs .sms-bg i{display:block;width:auto;height:46px;border-radius:9px;margin-bottom:4px;border:1.5px solid rgba(0,0,0,.12);background:var(--prev)}
.sms-bgs .sms-bg[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 3px 0 var(--ink)}

/* ---------- chunky, sticker-like controls ---------- */
.sms-sheet .btn{background:var(--btn);color:var(--btnText);padding:9px 16px;border-radius:12px;cursor:pointer;font-size:16px}
.sms-sheet .btn.ghost{background:var(--chip);color:var(--ink)}
.btn{border:2.5px solid var(--shadow);box-shadow:0 3px 0 var(--shadow);font-family:var(--fun);font-weight:700;letter-spacing:.2px;transition:transform .08s,box-shadow .08s}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--shadow)}
.btn.ghost{border-color:var(--line);box-shadow:0 3px 0 var(--line)}
.tabs{border:2.5px solid var(--line);padding:4px}
.tabs button{font-family:var(--fun)}
.tabs button[aria-selected="true"]{box-shadow:0 3px 0 var(--line);border:2px solid var(--line)}
.study,.card,.flash{box-shadow:0 4px 0 var(--line)}
.card h2,.welcome h2,.sheethead h2,.done .score,.qtext,.count,.flash .big{font-family:var(--fun)}
.word{box-shadow:0 3px 0 var(--ink)}
.word:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.dragghost{box-shadow:0 8px 18px rgba(0,0,0,.28)}

/* ---------- "My look" panel ---------- */
.sms-sheet{position:fixed;inset:0;z-index:60;background:rgba(15,25,40,.45);display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:max(16px,env(safe-area-inset-top)) 12px 24px}
.sms-panel{width:100%;max-width:480px;margin-top:40px;background:var(--card);color:var(--ink);border:3px solid var(--shadow);border-radius:24px;box-shadow:0 6px 0 var(--shadow);padding:18px 18px 20px}
.sms-panel h2{font-family:var(--fun);font-weight:900;font-size:26px;margin:0}
.sms-panel h3{font-family:var(--fun);font-size:18px;margin:16px 0 8px}
.sms-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.sms-swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sms-sw{display:flex;align-items:center;gap:8px;font:inherit;font-size:15px;font-weight:700;color:var(--ink);background:var(--paper);border:2.5px solid var(--line);border-radius:14px;padding:8px;cursor:pointer;text-align:left}
.sms-sw i{width:24px;height:24px;border-radius:8px;flex:none;border:2px solid rgba(0,0,0,.18)}
.sms-sw[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 3px 0 var(--ink)}
.sms-fonts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sms-fonts .sms-sw{flex-direction:column;align-items:flex-start;gap:0;font-weight:400}
.sms-fonts .sms-sw b{font-size:17px}
.sms-fonts .sms-sw small{color:var(--soft);font-size:13px;font-family:"Andika",sans-serif}
.sms-sizes{display:flex;gap:8px}
.sms-sizes .sms-sw{flex:1;justify-content:center;font-family:var(--fun)}
.sms-row{display:flex;gap:12px;align-items:flex-start;padding:12px;border:2.5px solid var(--line);border-radius:16px;margin-top:8px;cursor:pointer}
.sms-row input{width:24px;height:24px;flex:none;margin:2px 0 0;accent-color:var(--top)}
.sms-row b{display:block;font-family:var(--fun);font-size:17px}
.sms-row span{color:var(--soft);font-size:15px}
@media (max-width:420px){ .sms-swatches{grid-template-columns:repeat(2,1fr)} }

/* ---------- Bigger text: let crowded rows wrap instead of squeezing ---------- */
html[data-size] .studyrow{flex-wrap:wrap}
html[data-size] .studyrow .big{flex:1 1 auto}
html[data-size] .studytext{flex:1 1 240px}
html[data-size] .tabs{flex-wrap:wrap}
html[data-size] .tabs button{flex:1 1 40%}
html[data-size] .sms-nav{flex-wrap:wrap;justify-content:flex-end}
.top h1{overflow-wrap:anywhere}
@media (max-width:520px){ html[data-size] .top h1{font-size:34px!important} html[data-size] .top .tag{font-size:18px!important} }

/* ---------- Learners ---------- */
.sms-av{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;font-style:normal;font-family:var(--fun);font-weight:800;font-size:14px;color:#1F2A3D;border:2px solid rgba(0,0,0,.25);flex:none}
.sms-who{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.sms-learner{display:flex;align-items:center;gap:6px;border:2.5px solid var(--line);border-radius:16px;padding:6px}
.sms-learner.on{border-color:var(--ink);box-shadow:0 3px 0 var(--ink)}
.sms-pick{flex:1;display:flex;align-items:center;gap:10px;min-width:0;font:inherit;color:var(--ink);background:none;border:0;padding:6px;cursor:pointer;text-align:left}
.sms-pick .sms-av{width:40px;height:40px;font-size:20px}
.sms-pick b{font-family:var(--fun);font-size:19px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sms-pick small{color:var(--good);font-weight:700;font-size:13px;margin-left:auto;white-space:nowrap}
.sms-mini{font:inherit;font-size:13px;font-weight:700;color:var(--soft);background:var(--chip);border:0;border-radius:10px;padding:6px 9px;cursor:pointer}
.sms-add{display:flex;gap:8px}
.sms-add input{flex:1;min-width:0;font:inherit;font-size:17px;padding:9px 12px;border-radius:12px;border:2.5px solid var(--line);background:var(--card);color:var(--ink)}

/* ---------- Study sessions ---------- */
.sms-sesslist{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.sms-sess{display:flex;align-items:center;gap:6px;border:2.5px solid var(--line);border-radius:16px;padding:4px 6px 4px 4px;margin-top:10px}
.sms-sesslist .sms-sess{margin-top:0}
.sms-sess.on{border-color:var(--ink);box-shadow:0 3px 0 var(--ink)}
.sms-sess-go{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;font:inherit;color:var(--ink);background:none;border:0;padding:8px 10px;cursor:pointer;text-align:left}
.sms-sess-go b{font-family:var(--fun);font-size:19px}
.sms-sess-go em{font-style:normal;font-size:12px;font-weight:700;color:var(--good);margin-left:6px;vertical-align:2px}
.sms-sess-go small{color:var(--soft);font-size:14px}
.sms-sess{flex-wrap:wrap}
.sms-sess-act{display:flex;gap:6px;padding:0 6px 6px 10px}
@media (min-width:560px){ .sms-sess{flex-wrap:nowrap} .sms-sess-act{padding:0} }
.note{flex-wrap:wrap}
.studyrow{flex-wrap:wrap}
@media (min-width:521px){ .studyrow .studytext{flex:1 1 260px} }
@media (max-width:520px){ .studyrow{align-items:stretch} }
.sms-sessbtns{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;flex:0 1 auto;min-width:0}
.sms-sessbtns .big{flex:1 1 auto}

/* ---------- Map zoom buttons ---------- */
.map{position:relative}
.sms-zoom{position:absolute;right:8px;top:8px;display:flex;flex-direction:column;gap:6px;z-index:2}
.sms-zoom button{width:40px;height:40px;display:grid;place-items:center;padding:0;border-radius:12px;background:var(--card);color:var(--ink);border:2.5px solid var(--shadow);box-shadow:0 2px 0 var(--shadow);cursor:pointer}
.sms-zoom button svg{width:20px;height:20px}
.sms-zoom button:disabled{opacity:.4;cursor:default}
.sms-zoom button[hidden]{display:none}
.map.sms-zoomed{touch-action:none;cursor:grab}

/* ---------- Read aloud button ---------- */
.sms-say{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));z-index:45;display:inline-flex;align-items:center;gap:8px;
  font:inherit;font-family:var(--fun);font-weight:700;font-size:16px;color:var(--btnText);background:var(--btn);border:2.5px solid var(--shadow);border-radius:999px;padding:10px 16px 10px 12px;box-shadow:0 3px 0 var(--shadow);cursor:pointer}
.sms-say svg{width:24px;height:24px}
.sms-say:active{transform:translateY(2px);box-shadow:0 1px 0 var(--shadow)}
html[data-read] main{padding-bottom:90px}

/* ---------- Calm mode: no scores, no shaking, slow and steady ---------- */
html[data-calm] #qs{display:none}
html[data-calm] .word.shake{animation:none}
html[data-calm] *{transition:none!important}