/* Little Sparks: bright, chunky, finger-friendly. Everything is large. */
:root {
  --ls-bg: #fff8e1;
  --ls-ink: #3b2f2f;
  --ls-green: #51cf66;
  --ls-blue: #4dabf7;
  --ls-pink: #ff6b9d;
  --ls-yellow: #ffd43b;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }

body.ls {
  display: flex;
  flex-direction: column;
  background: radial-gradient(circle at 20% 10%, #fff3bf, var(--ls-bg) 55%, #ffe3ec);
  color: var(--ls-ink);
  font-family: 'Trebuchet MS', 'Comic Sans MS', system-ui, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
}

.ls-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  min-height: 76px;
}
.ls-title { margin: 0; font-size: clamp(1.4rem, 4vw, 2.2rem); flex: 1; text-align: center; }
.ls-top-right { display: flex; gap: 0.5rem; align-items: center; }

.ls-round, .ls-pill {
  min-width: 64px; height: 64px;
  border-radius: 999px;
  border: 4px solid var(--ls-ink);
  background: #fff;
  font-size: 1.8rem;
  cursor: pointer;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.18);
}
.ls-pill { padding: 0 1rem; font-weight: 800; font-size: 1.5rem; }
.ls-round:active, .ls-pill:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18); }
.ls-home { background: var(--ls-yellow); }
.ls-parent { opacity: 0.5; font-size: 1.3rem; min-width: 54px; height: 54px; }

.ls-main { flex: 1; min-height: 0; display: flex; }
.ls-screen { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.ls-screen[hidden] { display: none; }

/* ----- hub ----- */
.ls-tiles {
  list-style: none; margin: 0; padding: 0.75rem;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-auto-rows: minmax(190px, 30vh);
  align-content: center;
  overflow: auto;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}
.ls-tile {
  width: 100%; height: 100%;
  display: grid; justify-items: center; align-content: center; gap: 0.35rem;
  padding: 1rem 0.5rem;
  border: 5px solid var(--ls-ink);
  border-radius: 32px;
  background: var(--tile);
  font: inherit;
  cursor: pointer;
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.2);
  transition: transform 0.1s ease;
}
.ls-tile:active { transform: translateY(5px); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2); }
.ls-tile-art { font-size: clamp(4rem, 9vh, 6.5rem); line-height: 1; height: clamp(4.4rem, 10vh, 7rem); object-fit: contain; }
.ls-tile-name { font-size: clamp(1.3rem, 2.4vh, 1.8rem); font-weight: 800; }
.ls-tile-stars { color: #f08c00; letter-spacing: 0.15em; font-size: 1.1rem; }

/* ----- play ----- */
.ls-canvas-wrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0.25rem; }
#lsCanvas { background: #fff; border: 5px solid var(--ls-ink); border-radius: 24px; max-width: 100%; max-height: 100%; touch-action: none; }

.ls-overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255, 248, 225, 0.82); }
.ls-overlay[hidden] { display: none; }
.ls-card { background: #fff; border: 6px solid var(--ls-ink); border-radius: 36px; padding: 1.5rem 2rem; text-align: center; box-shadow: 0 10px 0 rgba(0, 0, 0, 0.2); max-width: 90vw; }
.ls-card-emoji { font-size: 6rem; line-height: 1; animation: ls-bounce 0.8s ease-in-out infinite alternate; }
.ls-card-art { height: 6rem; object-fit: contain; }
.ls-card h2 { font-size: clamp(1.4rem, 4vw, 2rem); margin: 0.5rem 0 1rem; }
.ls-card-buttons { display: flex; gap: 1.25rem; justify-content: center; }
.ls-big {
  width: 110px; height: 110px; border-radius: 50%;
  border: 5px solid var(--ls-ink);
  font-size: 3.4rem; cursor: pointer;
  box-shadow: 0 7px 0 rgba(0, 0, 0, 0.2);
}
.ls-big:active { transform: translateY(4px); }
.ls-green { background: var(--ls-green); color: #fff; }
.ls-blue { background: var(--ls-blue); }
.ls-pink { background: var(--ls-pink); }
@keyframes ls-bounce { to { transform: translateY(-12px) rotate(4deg); } }

/* ----- stickers ----- */
.ls-stickers {
  list-style: none; margin: 0 auto; padding: 0.75rem;
  display: grid; gap: 0.9rem; width: 100%; max-width: 1000px;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  align-content: start; overflow: auto;
}
.ls-sticker {
  display: grid; justify-items: center; gap: 0.2rem;
  padding: 0.7rem; border: 4px dashed #adb5bd; border-radius: 24px; background: rgba(255, 255, 255, 0.6);
}
.ls-sticker.got { border: 4px solid var(--ls-ink); background: #fff; transform: rotate(-2deg); }
.ls-sticker:nth-child(even).got { transform: rotate(2deg); }
.ls-sticker-art { font-size: 3.4rem; height: 4rem; object-fit: contain; }
.ls-sticker:not(.got) .ls-sticker-art { filter: grayscale(1); opacity: 0.5; }
.ls-sticker-name { font-weight: 800; text-align: center; font-size: 0.95rem; }

.ls-sticker-pop {
  position: fixed; left: 50%; top: 24%; transform: translateX(-50%);
  background: #fff; border: 6px solid var(--ls-ink); border-radius: 32px;
  padding: 1rem 2rem; text-align: center; z-index: 30;
  box-shadow: 0 10px 0 rgba(0, 0, 0, 0.25);
  font-size: 1.3rem; font-weight: 800;
}
.ls-sticker-pop[hidden] { display: none; }

/* ----- grown-ups ----- */
.ls-dialog { max-width: min(640px, 92vw); border: 5px solid var(--ls-ink); border-radius: 24px; padding: 1.25rem; font-family: inherit; color: var(--ls-ink); }
.ls-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
.ls-small { font-size: 0.9rem; color: #5f5555; }
.ls-check { display: block; font-size: 1.1rem; margin: 0.4rem 0; }
.ls-learns { padding-left: 1rem; }
.ls-learns li { margin: 0.5rem 0; }
.ls-dialog-buttons { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1rem; }
.ls-link { font: inherit; padding: 0.5rem 0.9rem; border: 2px solid var(--ls-ink); border-radius: 12px; background: #fff; color: var(--ls-ink); text-decoration: none; cursor: pointer; }
.ls-danger { border-color: #c92a2a; color: #c92a2a; }

button:focus-visible, a:focus-visible { outline: 4px solid #1971c2; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .ls-card-emoji { animation: none; }
}
/* Each game owns the screen; the small console controls float over its world. */
[hidden]{display:none!important}body.ls{height:100svh;overflow:hidden;background:#283d38;color:#fff8dc}body.ls[data-screen=play]{--ls-accent:#f6d776;background:#293d38}.ls-top{height:62px;min-height:62px;padding:7px 22px;z-index:5;background:linear-gradient(#19352be6,#19352b99);border-bottom:2px solid #ffffff20;box-shadow:0 4px 14px #14251633}.ls-title{font-size:24px;line-height:1;font-weight:1000;font-style:italic;letter-spacing:-.8px;text-shadow:2px 2px #1a2c32}.ls-round,.ls-pill{min-width:44px;height:44px;border:2px solid #fff5;border-radius:15px;background:#f4e8c9;color:#344c47;font-size:20px;box-shadow:0 3px 0 #152c3599}.ls-parent{min-width:42px;height:42px;opacity:.7;font-size:17px}.ls-pill{font-size:15px;padding:0 13px}.ls-top-right{gap:10px}.ls-main{height:calc(100svh - 62px)}.ls-canvas-wrap{padding:0;overflow:hidden}#lsCanvas{border:0;border-radius:0;background:#253e31;box-shadow:0 0 60px #0004}.ls-caption{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);margin:0;max-width:85%;background:#13282dcc;border:1px solid #fff3;color:#fff4cc;padding:6px 16px;border-radius:20px;font-size:12px;line-height:1.4;text-align:center;pointer-events:none;z-index:3}.ls-overlay{z-index:8;background:#142830aa;backdrop-filter:blur(5px)}.ls-card{border:4px solid #9d794f;border-radius:23px;background:#fff3d5;color:#4e4335;box-shadow:0 9px 0 #332d3399;padding:25px;max-width:92vw}.ls-card-buttons{gap:15px}.ls-big{height:84px;width:84px;font-size:38px;border-width:3px;border-color:#524c46}.ls-card-emoji{font-size:70px}.ls-card h2{font-size:25px}.ls-sticker-pop{pointer-events:none;left:auto;right:20px;top:80px;transform:none;border:3px solid #d3ad55;border-radius:18px;padding:12px 18px;font-size:13px;color:#4b4332;box-shadow:0 5px 0 #20382b44;max-width:210px}.ls-sticker-pop .ls-card-emoji{font-size:43px}.ls-sticker-pop .ls-card-art{height:50px}.ls-link{min-height:44px}.ls-dialog{color:#413a31;background:#fff4dc}.ls-tiles{max-width:1200px;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;grid-auto-rows:auto;align-content:center;padding:25px}.ls-tile{border:3px solid #f0d89d;border-radius:22px;background:linear-gradient(145deg,var(--tile),#fff4c8);color:#34463d;aspect-ratio:1;box-shadow:0 7px 0 #142c3666}.ls-tile-name{font-size:20px}.ls-tile-art{height:100px}.ls-stickers{padding:25px}.ls-sticker{color:#40534b;background:#fff4cf}.ls-sticker.got{border-color:#d5ae5d}
body[data-game=roly]{background:#547d49}body[data-game=roly] .ls-top{background:linear-gradient(#5a714e,#3e5d45);border-color:#ddf0a3}body[data-game=roly] .ls-title{color:#fff0a6;transform:rotate(-2deg)}body[data-game=bugs] .ls-top{background:linear-gradient(#326d62,#244b49);border-color:#d9e5ac}body[data-game=sorter] .ls-top{background:linear-gradient(#7046a4,#433276);border-color:#f3cf69}body[data-game=sorter]{background:#423276}body[data-game=diner] .ls-top{background:linear-gradient(#ad5450,#7d3739);border-color:#edc998}body[data-game=diner] .ls-title{color:#fff6dc;letter-spacing:1px}body[data-game=choo] .ls-top{background:linear-gradient(#3e7b8f,#315969);border-color:#a5dcd3}body[data-game=beats] .ls-top{background:linear-gradient(#6d4479,#493158);border-color:#f2b67f}body[data-game=beats] .ls-title{color:#ffe087;transform:rotate(-3deg)}body[data-game=garden] .ls-top{background:linear-gradient(#7f6745,#554832);border-color:#d7b77c}body[data-game=garden] .ls-title{color:#ffedb8}
@media(max-width:700px){.ls-top{padding:7px 10px;gap:8px;height:58px;min-height:58px}.ls-top-right{gap:5px}.ls-title{font-size:18px}.ls-round,.ls-pill{min-width:38px;height:40px;border-radius:12px;font-size:17px}.ls-pill{padding:0 7px;font-size:12px}.ls-parent{min-width:35px;height:38px;font-size:14px}.ls-main{height:calc(100svh - 58px)}.ls-caption{font-size:10px;bottom:10px;width:max-content;max-width:92%}.ls-tiles{grid-template-columns:repeat(2,minmax(0,1fr));padding:15px;gap:15px}.ls-tile-name{font-size:15px}.ls-tile-art{height:70px}.ls-sticker-pop{top:70px;right:10px;max-width:160px}.ls-card-buttons .ls-link{font-size:12px}.ls-big{height:65px;width:65px;font-size:30px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
/* Finished cover illustrations fill their square game-picker channels. */
.ls-tile:has(img.ls-tile-art){position:relative;padding:0;overflow:hidden;display:block}.ls-tile img.ls-tile-art{display:block;width:100%;height:100%;object-fit:cover}.ls-tile:has(img.ls-tile-art) .ls-tile-name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.ls-tile:has(img.ls-tile-art) .ls-tile-stars{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);padding:3px 12px;white-space:nowrap;background:#1d2b39c9;border:1px solid #fff6;border-radius:20px;color:#ffe6a3;font-size:13px}