/* SLAI AI Lab "set C" pages (Oct 7 2026): daily, fortune, guess, mix, mascot. On top of /slai/style.css + /slai/lab/lab.css.
   Mobile-first; keeps the strawberry-red / lemon-yellow SLAI palette from style.css tokens. */
.back { display:inline-flex; align-items:center; gap:6px; color:var(--accent); font-weight:600; text-decoration:none; font-size:15px; margin-bottom:10px; }
.back:hover { color:var(--accent2); }
.lab { padding:18px 0 70px; }
.hero-prompt { font-family:Oswald,Impact,sans-serif; font-size:clamp(22px,5.4vw,32px); line-height:1.2; margin:0 0 6px; color:var(--ink); }
.hero-prompt:before { content:"\201C"; color:var(--accent); } .hero-prompt:after { content:"\201D"; color:var(--accent); }
.kpis { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.gal { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
@media (min-width:640px){ .gal { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:960px){ .gal { grid-template-columns:repeat(4,minmax(0,1fr)); } }
.tile { background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; }
.tile img { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; background:var(--bg3); }
.tile .cap { padding:8px 10px 0; font-size:13px; color:var(--muted); line-height:1.3; min-height:18px; overflow-wrap:anywhere; }
.tile .act { display:flex; align-items:center; justify-content:space-between; padding:8px 10px 10px; gap:6px; }
.heart { border:1px solid var(--line); background:var(--bg3); color:var(--ink); border-radius:999px; padding:6px 12px; font:600 14px "Source Sans 3",sans-serif; cursor:pointer; min-height:36px; }
.heart.on { background:var(--accent); border-color:var(--accent); color:#fff; cursor:default; }
.rankno { font-family:Oswald,Impact,sans-serif; color:var(--accent); font-size:20px; }
.tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.chip .dot { display:inline-block; width:12px; height:12px; border-radius:50%; margin-right:6px; vertical-align:-1px; border:1px solid rgba(0,0,0,.15); }
.chip { min-height:40px; }
.grid2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.stage { display:grid; gap:14px; }
@media (min-width:820px){ .stage.two { grid-template-columns:1fr 1fr; align-items:start; } }
.bigimg { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:16px; border:1px solid var(--line); background:var(--bg3); display:block; }
.dots { display:flex; gap:8px; justify-content:center; margin:10px 0 0; }
.dots button { width:34px; height:34px; border-radius:50%; border:2px solid var(--line); background:#fff; font:600 14px "Source Sans 3",sans-serif; cursor:pointer; color:var(--ink); }
.dots button.on { border-color:var(--accent); }
.dots button.done { background:var(--bg3); }
.score { font-family:Oswald,Impact,sans-serif; font-size:44px; color:var(--accent); line-height:1; }
.board { list-style:none; margin:0; padding:0; }
.board li { display:flex; justify-content:space-between; gap:10px; padding:9px 2px; border-bottom:1px dashed var(--line); font-size:15px; }
.board li b { color:var(--accent); min-width:26px; display:inline-block; }
.cardwrap canvas { width:100%; max-width:440px; height:auto; display:block; margin:0 auto; border-radius:18px; box-shadow:0 12px 36px rgba(215,38,61,.18); }
.lemonbtn { font-size:72px; line-height:1; background:none; border:0; cursor:pointer; display:block; margin:6px auto; transition:transform .2s; }
.lemonbtn:hover { transform:rotate(-8deg) scale(1.06); }
.lemonbtn.shake { animation:lmshake .6s ease-in-out 2; }
@keyframes lmshake { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-14deg)} 75%{transform:rotate(14deg)} }
.btnrow { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.btnrow .labbtn { flex:1 1 140px; padding:14px 16px; font-size:16px; }
.sticker { background:#fff; border:2px solid var(--line); border-radius:16px; padding:0; cursor:pointer; overflow:hidden; }
.sticker.on { border-color:var(--accent); box-shadow:0 0 0 3px rgba(215,38,61,.18); }
.sticker img { width:100%; aspect-ratio:1/1; object-fit:contain; display:block; background:#fff; }
.labinput { min-height:48px; }
textarea.labinput { min-height:84px; }
@media (max-width:420px){ .panel { padding:14px; } .labbtn { padding:14px 16px; } }