/* Uncle Polar Spanish: shared look for the home and Words pages.
   The Pronunciation page keeps its own copy of these rules inline. */
:root{
  --bg:#0f3d2e; --bg2:#0c3325; --surface:#15523c; --frost:#2c6b50; --ink:#f4ecd6; --muted:#9fc4b3;
  --cobalt:#6ec6e8; --saffron:#ffd23e; --saffron-soft:rgba(255,210,62,.22);
  --poppy:#ff5d8f; --ok:#7bd88f; --mango:#ff8e3c; --lilac:#b89cff; --mind:#3bbf9e;
  color-scheme:dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Fredoka',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:16px; line-height:1.5; -webkit-text-size-adjust:100%;
}
.wrap{max-width:720px; margin:0 auto; padding:24px max(18px, env(safe-area-inset-right,0px)) 96px max(18px, env(safe-area-inset-left,0px))}
h1,h2,h3{font-family:'Baloo 2','Segoe UI',system-ui,sans-serif; font-weight:800; margin:0}
p{margin:0}
a{color:var(--cobalt)}
.muted{color:var(--muted)}
.small{font-size:.9rem}
[hidden]{display:none !important}
:focus-visible{outline:3px solid var(--saffron); outline-offset:2px}

/* Header and navigation */
.top{display:flex; gap:11px; align-items:center; flex-wrap:wrap}
.home-link{display:flex; gap:11px; align-items:center; color:inherit; text-decoration:none; border-radius:14px; min-height:44px}
.home-link svg{flex:none}
.brand{font-family:'Baloo 2',system-ui,sans-serif; font-weight:800; font-size:1.25rem; line-height:1.1; color:var(--lilac); white-space:nowrap}
.site-nav{margin-left:auto; display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end}
.site-nav a{display:inline-flex; align-items:center; min-height:44px; padding:0 14px; white-space:nowrap; border-radius:999px; font-family:'Baloo 2',sans-serif; font-weight:800; color:var(--muted); text-decoration:none; border:1.5px solid transparent}
.site-nav a:hover{color:var(--ink); border-color:var(--frost)}
.site-nav a[aria-current=page]{color:var(--bg2); background:var(--saffron)}
@media (max-width:480px){ .site-nav{order:3; width:100%; margin-left:0; justify-content:flex-start; background:var(--bg2); border-radius:999px; padding:4px} .site-nav a{flex:1 1 auto; justify-content:center; padding:0 10px} }
@media (max-width:380px){ .site-nav a{padding:0 7px; font-size:.9rem} }
h1{font-size:clamp(2rem,6vw,2.8rem); line-height:1.1}
h1 .hi{color:var(--saffron)}
/* "Spanish" in the title: letters alternate Spanish-flag red and sun yellow */
h1 .flag span:nth-child(odd){color:#ff4b3e} h1 .flag span:nth-child(even){color:var(--saffron)}
h2{font-size:1.45rem}
.eyebrow{display:block; font-family:'Baloo 2',sans-serif; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--mind); font-size:12px; margin:26px 0 8px}
.intro{margin-top:12px; max-width:52ch}

/* Panels */
.panel{background:var(--surface); border:1px solid var(--frost); border-radius:18px; padding:16px 18px}

/* Controls */
button,input,select{font:inherit; color:inherit}
button{
  min-height:44px; padding:0 18px; border-radius:999px; cursor:pointer;
  border:1.5px solid var(--frost); background:none; color:var(--ink); font-family:'Baloo 2',sans-serif; font-weight:800; transition:transform .1s, filter .1s;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
button:hover:not(:disabled){filter:brightness(1.06); border-color:var(--muted)}
button:active:not(:disabled){transform:scale(.98)}
button:disabled{opacity:.45; cursor:not-allowed}
button.primary{background:var(--mango); color:var(--bg2); border-color:transparent}
button.sky{background:var(--cobalt); color:var(--bg2); border-color:transparent}
button.quiet{border-color:transparent; background:transparent; color:var(--muted)}
input[type=search],input[type=text],select{
  min-height:48px; padding:0 14px; border-radius:12px; border:1.5px solid var(--frost);
  background:var(--bg2); width:100%;
}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.check{display:inline-flex; align-items:center; gap:8px; min-height:44px; cursor:pointer}
.check input{width:20px; height:20px; accent-color:var(--mango)}
.seg{display:inline-flex; flex-wrap:wrap; border:1.5px solid var(--frost); border-radius:24px; padding:3px; background:var(--bg2)}
.seg label{position:relative}
.seg input{position:absolute; opacity:0; inset:0; cursor:pointer}
.seg span{display:inline-block; min-width:52px; text-align:center; padding:8px 12px; border-radius:999px; font-family:'Baloo 2',sans-serif; font-weight:800; cursor:pointer}
.seg input:checked + span{background:var(--cobalt); color:var(--bg2)}
.seg input:focus-visible + span{outline:3px solid var(--saffron)}

/* Toast */
.toast{
  position:fixed; left:50%; bottom:calc(18px + env(safe-area-inset-bottom,0px)); transform:translate(-50%,20px);
  max-width:min(92vw,520px); background:var(--ink); color:var(--bg2); padding:12px 18px; border-radius:14px;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:10; font-weight:700;
}
.toast.show{opacity:1; transform:translate(-50%,0)}

/* Footer */
.foot{margin-top:56px; padding-top:16px; border-top:1px solid var(--frost)}

/* Scrollbars: sun to mango to flamingo pill on a deep green track */
::-webkit-scrollbar{width:14px; height:14px}
::-webkit-scrollbar-track{background:var(--bg2); border-radius:999px}
::-webkit-scrollbar-thumb{border-radius:999px; border:3px solid var(--bg2); background-clip:padding-box;
  background-color:var(--mango); background-image:linear-gradient(180deg, var(--saffron), var(--mango) 55%, var(--poppy))}
::-webkit-scrollbar-thumb:horizontal{background-image:linear-gradient(90deg, var(--saffron), var(--mango) 55%, var(--poppy))}
::-webkit-scrollbar-thumb:hover{background-image:linear-gradient(180deg, var(--cobalt), var(--lilac) 55%, var(--poppy))}
::-webkit-scrollbar-thumb:horizontal:hover{background-image:linear-gradient(90deg, var(--cobalt), var(--lilac) 55%, var(--poppy))}
::-webkit-scrollbar-button{display:none}
::-webkit-scrollbar-corner{background:transparent}
@supports not selector(::-webkit-scrollbar){ *{scrollbar-color:var(--mango) var(--bg2)} }

@media (prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important} }