/* Shared sketchbook styles for the player (index.html) and intake (start.html) */
:root {
  --pizarron:#344260; --night:#344260; --manteca:#FBF3E1; --lila:#E8CBE2; --tulipan:#E9793A; --hoja:#3F9A5C;
  --celeste:#B7D9EE; --cobalto:#3E5BD8; --rosa:#E571B5; --mostaza:#D8B43B;
  --mute:#6a7390;
  /* page background: cream by default; a course's meta.theme can override it and add a faint pattern */
  --page:var(--manteca); --pattern:none; --pattern-opacity:0; --pattern-size:64px;
  --script:"Caveat Brush", "Marker Felt", cursive;
  --body:Nunito, -apple-system, system-ui, sans-serif;
  /* hand-drawn borders: irregular radii so nothing looks machine-made */
  --w1:255px 18px 225px 16px / 16px 225px 18px 255px;
  --w2:18px 240px 20px 220px / 220px 20px 240px 18px;
  --w3:230px 22px 250px 14px / 20px 250px 14px 230px;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { margin:0; font:16px/1.5 var(--body); color:var(--pizarron); background:var(--page); }
/* faint regional pattern under everything (talavera, seigaiha…); sits below the grain */
html.patterned body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:-1; background-image:var(--pattern); background-size:var(--pattern-size); opacity:var(--pattern-opacity); }
/* chalky grain over everything */
body::after { content:""; position:fixed; inset:0; pointer-events:none; z-index:100; opacity:.1; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.2 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
button { font-family:inherit; color:inherit; cursor:pointer; }

/* Hero still life */
.hero { text-align:center; padding:22px 16px 6px; }
.hero .sub { font-size:13px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); }
.hero h1 { font-family:var(--script); font-weight:400; font-size:64px; line-height:1; margin:4px 0 0; transform:rotate(-2deg); display:inline-block; }
.hero h1 .sq { color:var(--tulipan); }
/* Non-Latin or long titles: the script font has no CJK glyphs, so go smaller and bold */
.hero h1.cjk { font-family:var(--body); font-weight:800; font-size:40px; }
.hero h1.long { font-size:46px; }
.still { width:100%; max-width:360px; display:block; margin:4px auto 0; }
.tlabel { font-family:var(--script); font-size:22px; transform:rotate(1deg); margin-top:2px; }
.timer { margin:8px auto 4px; display:flex; justify-content:center; gap:10px; }
.plate { background:#fff; border:2.5px solid var(--pizarron); min-width:62px; padding:6px 4px 3px; transform:rotate(var(--r)); }
.plate:nth-child(1) { border-radius:var(--w1); } .plate:nth-child(2) { border-radius:var(--w2); }
.plate:nth-child(3) { border-radius:var(--w3); } .plate:nth-child(4) { border-radius:var(--w1); }
.plate b { display:block; font-family:var(--script); font-weight:400; font-size:34px; line-height:1; color:var(--tulipan); }
.plate i { font-style:normal; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.count { font-family:var(--script); font-size:24px; }
.count b { color:var(--tulipan); font-weight:400; font-size:34px; }

.squiggle { display:block; width:100%; height:16px; margin:10px 0; }

/* Bar */
.bar { position:sticky; top:0; z-index:5; background:var(--page); padding:10px 16px; display:flex; justify-content:space-between; gap:8px; }
.seg { display:flex; gap:6px; }
.seg button { border:2px solid var(--pizarron); background:transparent; padding:5px 12px; font-size:14px; font-weight:800; border-radius:var(--w2); }
.seg button:nth-child(2) { border-radius:var(--w3); }
.seg button.on { background:var(--tulipan); border-color:var(--tulipan); color:#fff; }

main { max-width:560px; margin:0 auto; }
.pad { padding:0 16px; }
h2 { font-family:var(--script); font-weight:400; font-size:44px; line-height:1.05; margin:6px 0 10px; transform:rotate(-1.5deg); display:inline-block; }
.eyebrow { font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); font-weight:800; }
.back { background:none; border:0; color:var(--cobalto); font-weight:800; padding:4px 0 12px; font-size:15px; }

/* Sections: one soft background each, like separate prints */
.sec { padding:26px 16px 24px; text-align:center; }
.sec .art { width:100%; max-width:220px; display:block; margin:0 auto 4px; }
.sec .list { text-align:left; }
.sec.lila { background:var(--lila); } .sec.celeste { background:var(--celeste); padding:40px 16px 44px; }
.sec.pizarron { background:var(--night); color:var(--manteca); }
.sec.pizarron .day { background:var(--manteca); color:var(--pizarron); }
.day { display:flex; align-items:center; gap:14px; width:100%; text-align:left; background:var(--manteca); border:2.5px solid var(--pizarron); padding:12px 16px; margin:10px 0; border-radius:var(--w1); transition:transform .15s; }
.day:nth-child(3n+2) { border-radius:var(--w2); transform:rotate(.4deg); } .day:nth-child(3n) { border-radius:var(--w3); transform:rotate(-.4deg); }
.day:active { transform:scale(.97) rotate(-1deg); }
.day .n { font-family:var(--script); font-size:34px; width:34px; text-align:center; color:var(--tulipan); line-height:1; }
.day .t { font-weight:800; font-size:16px; } .day .p { font-size:13px; color:var(--mute); }
.day .ck { margin-left:auto; width:28px; height:28px; flex:none; }
.day.done .n { color:var(--hoja); }
.sec.celeste .day { margin:18px 0; padding:18px 16px; }

.intro { padding:4px 16px 14px; text-align:center; }
.note-box { background:var(--lila); padding:12px 16px; margin:10px 0 14px; font-size:15px; border-radius:var(--w3); }

/* Phrase cards: wobbly outline, no shadows */
.fcard { background:#fff; border:2.5px solid var(--pizarron); padding:14px 18px; margin:12px 0; border-radius:var(--w1); }
.fcard:nth-child(3n+2) { border-radius:var(--w2); } .fcard:nth-child(3n) { border-radius:var(--w3); }
.phrase { display:flex; justify-content:space-between; gap:10px; width:100%; text-align:left; border:0; background:none; padding:0; }
.es { font-weight:800; font-size:19px; line-height:1.3; }
.en { font-size:14px; color:var(--mute); margin-top:2px; }
.pr { font-size:13px; color:var(--cobalto); margin-top:2px; }
.spk { width:26px; flex:none; opacity:.8; }

.btn { display:block; width:100%; border:0; padding:14px; font-size:17px; font-weight:800; margin-top:10px; background:var(--tulipan); color:#fff; border-radius:var(--w2); }
.btn.alt { background:transparent; border:2.5px solid var(--pizarron); color:var(--pizarron); border-radius:var(--w3); }
.btn.ok { background:var(--hoja); border-radius:var(--w1); }
.btn.ghost { background:none; color:var(--mute); }

.steps { display:flex; gap:8px; margin-bottom:10px; }
.steps svg { flex:1; height:10px; }

/* Flip card with wobble */
.flip { perspective:900px; height:220px; margin:12px 0; }
.flip-in { position:relative; width:100%; height:100%; transition:transform .5s cubic-bezier(.5,1.6,.5,1); transform-style:preserve-3d; }
.flip.on .flip-in { transform:rotateY(180deg) rotate(-1.5deg); }
.face { position:absolute; inset:0; margin:0; backface-visibility:hidden; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:20px; }
.face.back { transform:rotateY(180deg); background:var(--celeste); }
.face .es { font-size:28px; } .face .en { font-size:19px; color:var(--pizarron); font-weight:600; }

/* Matching game */
.match { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.tile { width:100%; min-height:54px; margin-bottom:10px; border:2.5px solid var(--pizarron); background:#fff; padding:8px; font-size:15px; font-weight:600; border-radius:var(--w2); transition:transform .15s, opacity .3s, background .2s; }
.tile:nth-child(odd) { border-radius:var(--w3); transform:rotate(-.6deg); }
.tile.es-t { font-weight:800; font-size:16px; }
.tile.sel { background:var(--mostaza); }
.tile.gone { background:var(--hoja); border-color:var(--hoja); color:#fff; opacity:.4; pointer-events:none; animation:pop .35s; }
.tile.bad { animation:shake .3s; background:var(--rosa); color:#fff; }
@keyframes shake { 25%{transform:translateX(-5px) rotate(-2deg)} 75%{transform:translateX(5px) rotate(2deg)} }
@keyframes pop { 40%{transform:scale(1.12) rotate(2deg)} }

/* Conversation */
.opt { display:block; width:100%; text-align:left; border:2.5px solid var(--pizarron); background:#fff; padding:12px 14px; margin-top:10px; font-size:15px; font-weight:600; border-radius:var(--w3); }
.opt:nth-of-type(2) { border-radius:var(--w1); } .opt:nth-of-type(3) { border-radius:var(--w2); }
.opt.right { background:var(--hoja); border-color:var(--hoja); color:#fff; }
.opt.wrong { background:var(--rosa); border-color:var(--rosa); color:#fff; animation:shake .3s; }
.they { width:100%; text-align:left; border:0; background:none; padding:0; margin:4px 0; display:flex; gap:10px; align-items:center; }
.small { font-size:13px; color:var(--mute); margin-top:8px; }

input[type=search] { width:100%; padding:12px 16px; border:2.5px solid var(--pizarron); border-radius:var(--w2); font:16px var(--body); margin-bottom:6px; background:#fff; }
.done-hero { text-align:center; padding:20px 10px; }
.done-hero .big { font-family:var(--script); font-size:64px; transform:rotate(-3deg); display:inline-block; color:var(--tulipan); }

.confetti { position:fixed; top:-14px; width:10px; height:14px; z-index:50; pointer-events:none; animation:fall linear forwards; }
@keyframes fall { to { transform:translateY(105vh) rotate(720deg); } }
.wiggle { animation:wiggle .5s; }
@keyframes wiggle { 25%{transform:rotate(-5deg) scale(1.05)} 75%{transform:rotate(2deg) scale(1.05)} }

@media (max-width:380px) { .hero h1 { font-size:52px; } .plate { min-width:54px; } }
@media (prefers-reduced-motion:reduce) { *, *::before { animation:none !important; transition:none !important; } .confetti { display:none; } }