/* The look of the site (stage 3): a warm paper feel, soft painted hills and sky, outlined tiles, and Japanese-inspired details.
   This file is loaded after style.css and only restyles; it does not change how anything works. */
:root { --line-solid: #c2b7ad; --paper-grain: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22220%22 height=%22220%22%3E%3Cfilter id=%22g%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.85%22 numOctaves=%222%22 seed=%223%22/%3E%3CfeColorMatrix values=%220 0 0 0 .36  0 0 0 0 .28  0 0 0 0 .22  0 0 0 .26 0%22/%3E%3C/filter%3E%3Crect width=%22220%22 height=%22220%22 filter=%22url(%23g)%22/%3E%3C/svg%3E"); --radius: 24px; }

/* ---------- the painted page: sky, a faint Mount Fuji, hills and a little paper grain ---------- */
body { background: linear-gradient(180deg,#d7eaf0 0%,#f1f1de 52%,#fbf3df 100%) fixed !important; }
body.halloween { background: linear-gradient(180deg,#f0dcc2 0%,#e9d9f0 60%,#f6e9ef 100%) fixed !important; }
body.autumn { background: linear-gradient(180deg,#f9e3c0 0%,#fbeccd 60%,#fdf3dc 100%) fixed !important; }
body.rainy { background: linear-gradient(180deg,#cdd9df 0%,#e3ebee 60%,#f1f4f2 100%) fixed !important; }
body.christmas { background: linear-gradient(180deg,#cfe6f3 0%,#eef5fa 60%,#fbf6f6 100%) fixed !important; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: var(--paper-grain), url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1200 520%22 preserveAspectRatio=%22xMidYMax slice%22%3E%3Cg fill=%22%23fffdf6%22 opacity=%22.75%22%3E%3Cellipse cx=%22190%22 cy=%22120%22 rx=%2290%22 ry=%2226%22/%3E%3Cellipse cx=%22250%22 cy=%22106%22 rx=%2260%22 ry=%2224%22/%3E%3Cellipse cx=%22760%22 cy=%2280%22 rx=%22110%22 ry=%2228%22/%3E%3Cellipse cx=%22830%22 cy=%2266%22 rx=%2264%22 ry=%2224%22/%3E%3Cellipse cx=%221040%22 cy=%22210%22 rx=%2280%22 ry=%2222%22/%3E%3C/g%3E%3Ccircle cx=%22930%22 cy=%22150%22 r=%2248%22 fill=%22%23f6dca0%22 opacity=%22.55%22/%3E%3Cpath d=%22M360 360 L520 150 Q545 120 570 150 L730 360Z%22 fill=%22%23c9dbe6%22 opacity=%22.7%22/%3E%3Cpath d=%22M500 178 Q545 120 590 178 L568 190 L548 170 L526 192Z%22 fill=%22%23fffaf0%22 opacity=%22.9%22/%3E%3Cpath d=%22M0 380 Q150 300 320 350 Q470 400 640 340 Q820 280 1000 350 Q1120 390 1200 340 L1200 520 L0 520Z%22 fill=%22%23cfe3d2%22/%3E%3Cpath d=%22M0 430 Q200 360 400 420 Q600 480 800 410 Q1000 350 1200 420 L1200 520 L0 520Z%22 fill=%22%23b8d6bd%22/%3E%3Cpath d=%22M0 480 Q240 430 480 470 Q720 510 960 466 Q1100 444 1200 470 L1200 520 L0 520Z%22 fill=%22%23a2c8a8%22/%3E%3Cg fill=%22%23a2c8a8%22 opacity=%22.9%22%3E%3Ccircle cx=%2290%22 cy=%22452%22 r=%2222%22/%3E%3Ccircle cx=%22120%22 cy=%22446%22 r=%2218%22/%3E%3Ccircle cx=%221100%22 cy=%22450%22 r=%2224%22/%3E%3Ccircle cx=%221135%22 cy=%22454%22 r=%2218%22/%3E%3C/g%3E%3C/svg%3E"); background-size: 220px 220px, max(100%, 1000px) auto; background-position: 0 0, center bottom; background-repeat: repeat, no-repeat; opacity: 1; mix-blend-mode: normal; }
body.halloween::before { background-image: var(--paper-grain), url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1200 520%22 preserveAspectRatio=%22xMidYMax slice%22%3E%3Cg fill=%22%23f8e9ff%22 opacity=%22.75%22%3E%3Cellipse cx=%22190%22 cy=%22120%22 rx=%2290%22 ry=%2226%22/%3E%3Cellipse cx=%22250%22 cy=%22106%22 rx=%2260%22 ry=%2224%22/%3E%3Cellipse cx=%22760%22 cy=%2280%22 rx=%22110%22 ry=%2228%22/%3E%3Cellipse cx=%22830%22 cy=%2266%22 rx=%2264%22 ry=%2224%22/%3E%3Cellipse cx=%221040%22 cy=%22210%22 rx=%2280%22 ry=%2222%22/%3E%3C/g%3E%3Ccircle cx=%22930%22 cy=%22150%22 r=%2248%22 fill=%22%23f3b77b%22 opacity=%22.55%22/%3E%3Cpath d=%22M360 360 L520 150 Q545 120 570 150 L730 360Z%22 fill=%22%23d8c6e2%22 opacity=%22.7%22/%3E%3Cpath d=%22M500 178 Q545 120 590 178 L568 190 L548 170 L526 192Z%22 fill=%22%23fff3e8%22 opacity=%22.9%22/%3E%3Cpath d=%22M0 380 Q150 300 320 350 Q470 400 640 340 Q820 280 1000 350 Q1120 390 1200 340 L1200 520 L0 520Z%22 fill=%22%23cbb9d8%22/%3E%3Cpath d=%22M0 430 Q200 360 400 420 Q600 480 800 410 Q1000 350 1200 420 L1200 520 L0 520Z%22 fill=%22%23b39ac6%22/%3E%3Cpath d=%22M0 480 Q240 430 480 470 Q720 510 960 466 Q1100 444 1200 470 L1200 520 L0 520Z%22 fill=%22%238f78b0%22/%3E%3Cg fill=%22%238f78b0%22 opacity=%22.9%22%3E%3Ccircle cx=%2290%22 cy=%22452%22 r=%2222%22/%3E%3Ccircle cx=%22120%22 cy=%22446%22 r=%2218%22/%3E%3Ccircle cx=%221100%22 cy=%22450%22 r=%2224%22/%3E%3Ccircle cx=%221135%22 cy=%22454%22 r=%2218%22/%3E%3C/g%3E%3C/svg%3E"); }
body.autumn::before { background-image: var(--paper-grain), url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1200 520%22 preserveAspectRatio=%22xMidYMax slice%22%3E%3Cg fill=%22%23fff8ec%22 opacity=%22.75%22%3E%3Cellipse cx=%22190%22 cy=%22120%22 rx=%2290%22 ry=%2226%22/%3E%3Cellipse cx=%22250%22 cy=%22106%22 rx=%2260%22 ry=%2224%22/%3E%3Cellipse cx=%22760%22 cy=%2280%22 rx=%22110%22 ry=%2228%22/%3E%3Cellipse cx=%22830%22 cy=%2266%22 rx=%2264%22 ry=%2224%22/%3E%3Cellipse cx=%221040%22 cy=%22210%22 rx=%2280%22 ry=%2222%22/%3E%3C/g%3E%3Ccircle cx=%22930%22 cy=%22150%22 r=%2248%22 fill=%22%23f3c98a%22 opacity=%22.55%22/%3E%3Cpath d=%22M360 360 L520 150 Q545 120 570 150 L730 360Z%22 fill=%22%23e6d2bf%22 opacity=%22.7%22/%3E%3Cpath d=%22M500 178 Q545 120 590 178 L568 190 L548 170 L526 192Z%22 fill=%22%23fff6e8%22 opacity=%22.9%22/%3E%3Cpath d=%22M0 380 Q150 300 320 350 Q470 400 640 340 Q820 280 1000 350 Q1120 390 1200 340 L1200 520 L0 520Z%22 fill=%22%23e9cfa6%22/%3E%3Cpath d=%22M0 430 Q200 360 400 420 Q600 480 800 410 Q1000 350 1200 420 L1200 520 L0 520Z%22 fill=%22%23e2b88a%22/%3E%3Cpath d=%22M0 480 Q240 430 480 470 Q720 510 960 466 Q1100 444 1200 470 L1200 520 L0 520Z%22 fill=%22%23cf9a6b%22/%3E%3Cg fill=%22%23cf9a6b%22 opacity=%22.9%22%3E%3Ccircle cx=%2290%22 cy=%22452%22 r=%2222%22/%3E%3Ccircle cx=%22120%22 cy=%22446%22 r=%2218%22/%3E%3Ccircle cx=%221100%22 cy=%22450%22 r=%2224%22/%3E%3Ccircle cx=%221135%22 cy=%22454%22 r=%2218%22/%3E%3C/g%3E%3C/svg%3E"); }
body.rainy::before { background-image: var(--paper-grain), url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1200 520%22 preserveAspectRatio=%22xMidYMax slice%22%3E%3Cg fill=%22%23e4ecf0%22 opacity=%22.75%22%3E%3Cellipse cx=%22190%22 cy=%22120%22 rx=%2290%22 ry=%2226%22/%3E%3Cellipse cx=%22250%22 cy=%22106%22 rx=%2260%22 ry=%2224%22/%3E%3Cellipse cx=%22760%22 cy=%2280%22 rx=%22110%22 ry=%2228%22/%3E%3Cellipse cx=%22830%22 cy=%2266%22 rx=%2264%22 ry=%2224%22/%3E%3Cellipse cx=%221040%22 cy=%22210%22 rx=%2280%22 ry=%2222%22/%3E%3C/g%3E%3Cpath d=%22M360 360 L520 150 Q545 120 570 150 L730 360Z%22 fill=%22%23c3d0d8%22 opacity=%22.7%22/%3E%3Cpath d=%22M500 178 Q545 120 590 178 L568 190 L548 170 L526 192Z%22 fill=%22%23f2f6f8%22 opacity=%22.9%22/%3E%3Cpath d=%22M0 380 Q150 300 320 350 Q470 400 640 340 Q820 280 1000 350 Q1120 390 1200 340 L1200 520 L0 520Z%22 fill=%22%23bfcfd6%22/%3E%3Cpath d=%22M0 430 Q200 360 400 420 Q600 480 800 410 Q1000 350 1200 420 L1200 520 L0 520Z%22 fill=%22%23a9bec8%22/%3E%3Cpath d=%22M0 480 Q240 430 480 470 Q720 510 960 466 Q1100 444 1200 470 L1200 520 L0 520Z%22 fill=%22%238fa9b4%22/%3E%3Cg fill=%22%238fa9b4%22 opacity=%22.9%22%3E%3Ccircle cx=%2290%22 cy=%22452%22 r=%2222%22/%3E%3Ccircle cx=%22120%22 cy=%22446%22 r=%2218%22/%3E%3Ccircle cx=%221100%22 cy=%22450%22 r=%2224%22/%3E%3Ccircle cx=%221135%22 cy=%22454%22 r=%2218%22/%3E%3C/g%3E%3C/svg%3E"); }
body.christmas::before { background-image: var(--paper-grain), url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1200 520%22 preserveAspectRatio=%22xMidYMax slice%22%3E%3Cg fill=%22%23ffffff%22 opacity=%22.75%22%3E%3Cellipse cx=%22190%22 cy=%22120%22 rx=%2290%22 ry=%2226%22/%3E%3Cellipse cx=%22250%22 cy=%22106%22 rx=%2260%22 ry=%2224%22/%3E%3Cellipse cx=%22760%22 cy=%2280%22 rx=%22110%22 ry=%2228%22/%3E%3Cellipse cx=%22830%22 cy=%2266%22 rx=%2264%22 ry=%2224%22/%3E%3Cellipse cx=%221040%22 cy=%22210%22 rx=%2280%22 ry=%2222%22/%3E%3C/g%3E%3Ccircle cx=%22930%22 cy=%22150%22 r=%2248%22 fill=%22%23ffeab8%22 opacity=%22.55%22/%3E%3Cpath d=%22M360 360 L520 150 Q545 120 570 150 L730 360Z%22 fill=%22%23dbe7ee%22 opacity=%22.7%22/%3E%3Cpath d=%22M500 178 Q545 120 590 178 L568 190 L548 170 L526 192Z%22 fill=%22%23ffffff%22 opacity=%22.9%22/%3E%3Cpath d=%22M0 380 Q150 300 320 350 Q470 400 640 340 Q820 280 1000 350 Q1120 390 1200 340 L1200 520 L0 520Z%22 fill=%22%23e2eef2%22/%3E%3Cpath d=%22M0 430 Q200 360 400 420 Q600 480 800 410 Q1000 350 1200 420 L1200 520 L0 520Z%22 fill=%22%23d3e3ea%22/%3E%3Cpath d=%22M0 480 Q240 430 480 470 Q720 510 960 466 Q1100 444 1200 470 L1200 520 L0 520Z%22 fill=%22%23f4f8fa%22/%3E%3Cg fill=%22%23f4f8fa%22 opacity=%22.9%22%3E%3Ccircle cx=%2290%22 cy=%22452%22 r=%2222%22/%3E%3Ccircle cx=%22120%22 cy=%22446%22 r=%2218%22/%3E%3Ccircle cx=%221100%22 cy=%22450%22 r=%2224%22/%3E%3Ccircle cx=%221135%22 cy=%22454%22 r=%2218%22/%3E%3C/g%3E%3C/svg%3E"); }

/* ---------- paper-like controls: a thin warm outline and a soft shadow ---------- */
.pill, .icon, .areas button:not(.on), .ages button:not(.on), .chipbtn:not(.on), .restartbtn, .opt, .prompt, .herobubble, .bubble:not(.you), .fbform, .kikoask-bubble, .nm-card, .fbm-card, .gbtn.alt { border: 2px solid var(--line); }
.pill, .icon { background: var(--paper); box-shadow: 0 2px 0 rgba(91,70,60,.2); }
.prompt, .opt, .fbform { background: var(--paper); box-shadow: 0 4px 0 rgba(91,70,60,.16); }
.gbtn, .btn { border: 2px solid rgba(60,45,40,.55); box-shadow: 0 4px 0 rgba(60,45,40,.35); }
.profile { border: 2px solid rgba(60,45,40,.5); }

/* ---------- tiles: painted paper cards, outlined, with a soft sheen and grain ---------- */
.tile { position: relative; overflow: hidden; border: 2.5px solid rgba(91,70,60,.6); border-radius: var(--radius); box-shadow: 0 5px 0 rgba(91,70,60,.35);
  background-image: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 42%, rgba(60,40,30,.10) 100%); }
.tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background-image: var(--paper-grain); background-size: 160px 160px; opacity: .22; mix-blend-mode: multiply; }
.tile .big { border: 2px solid rgba(91,70,60,.4); background: var(--paper); }
.tile.locked { filter: saturate(.7); }
.tile .favbtn, .tile .lvlmark { border: 1.5px solid rgba(91,70,60,.35); }

/* ---------- selected states in matcha green and indigo ---------- */
.areas button.on, .ages button.on, .chipbtn.on { border: 2px solid rgba(60,45,40,.45); }
.ages button.on { background: var(--matcha); }

/* ---------- the speech bubbles: a little more like a hand-drawn balloon ---------- */
.bubble:not(.you), .herobubble, .kikoask-bubble { background: var(--paper); border-radius: 22px; }
/* the tail is two small triangles, an outline one and a paper-colored one on top, so the bubble's outline runs into the tail.
   The paper triangle is the outline triangle shrunk by a constant 1.6px, so the tail's outline stays thin and even all along. */
.bubble:not(.you)::before, .herobubble::before { content: ""; position: absolute; left: -11px; top: 50%; margin: -9px 0 0; width: 0; height: 0; border: 0; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-right: 11px solid var(--line-solid); background: none; transform: none; border-radius: 0; filter: none; }
.bubble:not(.you)::after, .herobubble::after { content: ""; position: absolute; left: -8.47px; top: 50%; margin: -8.57px 0 0; width: 0; height: 0; border: 0; border-top: 8.57px solid transparent; border-bottom: 8.57px solid transparent; border-right: 10.47px solid var(--paper); }
.msg.kiko .bubble::before { top: auto; bottom: 12px; margin: 0; }
.msg.kiko .bubble::after { top: auto; bottom: 12.43px; margin: 0; }
.herobubble::before { top: 30px; margin: 0; }
.herobubble::after { top: 30.43px; margin: 0; }
.nm-bubble::before, .nm-bubble::after { display: none; }

/* ---------- costumes and seasonal decorations get the same warm outline as Kiko (a crisp vector stroke under the fill) ---------- */
#theme-layer svg :is(path, circle, ellipse, rect, polygon):not([stroke]), [class$="-patch"] svg :is(path, circle, ellipse, rect, polygon):not([stroke]) {
  stroke: #5b463c; stroke-width: 2.6; stroke-linejoin: round; paint-order: stroke fill; }

/* flags and navigation icons */
#langBtn .art { width: 1.4em; height: 1.4em; vertical-align: middle; }
.langmenu button .art { width: 1.35em; height: 1.35em; vertical-align: -0.35em; margin-right: 4px; }
.flagbtn .art { width: 1.1em; height: 1.1em; }
.bubble.you.flagmsg .art { width: 1.3em; height: 1.3em; vertical-align: middle; }
.pill .ico, .icon .ico { width: 22px; height: 22px; }
.pill .ico { width: 26px; height: 26px; vertical-align: -7px; }
#favBtn, #stars { padding-left: 11px; padding-right: 14px; }
.tile .favbtn { width: 42px; height: 42px; top: 8px; left: 8px; }
.tile .favbtn .ico { width: 28px; height: 28px; }
.fbstar .ico { width: 100%; height: 100%; }

/* the round header buttons keep their icon exactly in the middle */
.icon { display: inline-grid; place-items: center; padding: 0; line-height: 1; }
.icon .ico, .icon .art { display: block; margin: 0; }

/* language and sound sit in the left corner of the top bar; the favorites, stars and profile stay on the right */
.bar { flex-wrap: wrap; row-gap: 6px; }
.bar .left { display: flex; align-items: center; gap: 6px; }
.langmenu { left: 0; right: auto; }
.bar .right { margin-left: auto; }

/* bigger icons on the Activities / Games buttons and the theme chips */
.chipbtn[style*="--c"] .ico, .kindbtn .ico { width: 34px; height: 34px; vertical-align: -11px; margin-right: 6px; }
.chipbtn[style*="--c"], .kindbtn { padding-top: 6px; padding-bottom: 6px; padding-left: 10px; }
.kindbtn { font-size: 20px; }
.chipbtn[style*="--c"].on .ico, .chipbtn[data-on] .ico, .areas .kindbtn.on .ico { width: 36px; height: 36px; padding: 3px; vertical-align: -12px; }
.guidechips .chipbtn.big .ico { width: 38px; height: 38px; vertical-align: -13px; }
.gbtn.kind .ico { width: 84px; height: 84px; padding: 12px; }
.themehead { font-size: 19px; gap: 10px; }
.themehead .ico, .lvlhead .ico { width: 30px; height: 30px; }
.lvlhead .lvl { width: 30px; height: 24px; }
@media (max-width: 480px) {
  .chipbtn[style*="--c"] .ico, .kindbtn .ico { width: 30px; height: 30px; vertical-align: -9px; }
  .chipbtn[style*="--c"].on .ico, .areas .kindbtn.on .ico { width: 32px; height: 32px; vertical-align: -10px; }
}

/* Kiko's speech: bubbles keep their final size, the next line rises into place, and the dots wait inside the bubble */
.bubble .tw-off { visibility: hidden; }
.msg.later { display: none; }
.msg.rise, .herobubble.rise { animation: msgrise .32s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes msgrise { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
.bubble.typing { position: relative; }
.bubble .dots { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); line-height: 1; letter-spacing: 3px; color: #b6b9cf; pointer-events: none; animation: dots 1s infinite; }
.herobubble { transform-origin: left center; }
@media (prefers-reduced-motion: reduce) { .msg.rise, .herobubble.rise { animation: none; } }

/* bubble outline and tail use the same solid color, so the tail is not darker than the bubble's own outline */
.bubble:not(.you), .herobubble { border-color: var(--line-solid); }

/* the beta reminder: pinned across the bottom of the screen on every page, in the same paper style, never in the way */
.betabar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, #fffaf0 0%, #fff1d3 100%); border-top: 2px solid var(--line-solid); box-shadow: 0 -4px 14px rgba(91,70,60,.12);
  font-size: 14px; font-weight: 800; line-height: 1.3; color: #5b4a12; text-align: left; pointer-events: none; }
.betabar .beta-tag { flex: none; font-size: 12px; padding: 2px 10px; border: 2px solid rgba(60,45,40,.35); }
body { padding-bottom: var(--betabar-h, 48px); }
@media (max-width: 480px) { .betabar { font-size: 12px; line-height: 1.25; padding-top: 5px; padding-bottom: calc(5px + env(safe-area-inset-bottom, 0px)); gap: 8px; } .betabar .beta-tag { font-size: 11px; padding: 1px 8px; } }
@media print { .betabar { display: none; } }

.betabar a { color: #3f6a9a; text-decoration: underline; text-underline-offset: 2px; pointer-events: auto; cursor: pointer; }
#profMenu.langmenu { left: auto; right: 0; }
/* level icon (the bars) always sits to the left of the name, never on a line of its own */
.ages button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.gbtn:not(.kind) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.gbtn .ico, .ages button .ico { flex: none; vertical-align: 0; }

/* the Flashcards / Activities / Games selectors: a bigger picture above a larger name */
.areas .kindbtn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px 6px 10px; font-size: 19px; line-height: 1.15; text-align: center; }
.areas .kindbtn .ico, .areas .kindbtn.on .ico { width: 52px; height: 52px; margin: 0; padding: 4px; vertical-align: 0; }
@media (max-width: 480px) {
  .areas { gap: 6px; }
  .areas .kindbtn { font-size: 16px; padding: 8px 4px 9px; }
  .areas .kindbtn .ico, .areas .kindbtn.on .ico { width: 44px; height: 44px; }
}

/* the stars live inside the profile bubble */
.pstars { flex: none; display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px 2px 6px; margin-left: 2px; border-radius: 99px; background: rgba(255,255,255,.92); color: #5b463c; font-size: 14px; font-weight: 900; line-height: 1.2; }
.pstars .ico { width: 16px; height: 16px; }
.profile.ghost .pstars { background: #eef0fd; color: var(--accent); }
.profile { max-width: 320px; }

/* phones: the top bar is always one row. Inside a game the Exit button shows only its arrow and the name is dropped, leaving the stars. */
@media (max-width: 560px) {
  .bar { flex-wrap: nowrap; }
  .bar .left, .bar .right { flex: none; }
  .bar .right { min-width: 0; }
  .profile { max-width: none; font-size: 14px; }
  .has-back #homeBtn span { display: none; }
  .has-back #homeBtn { padding-left: 11px; padding-right: 11px; }
  .has-back .profile { padding-right: 6px; }
}
@media (max-width: 380px) {
  .bar { gap: 4px; padding-left: 6px; padding-right: 6px; }
  .bar .left, .bar .right { gap: 4px; }
  .pill { padding: 7px 9px; }
  .profile { max-width: none; }
  .pstars { padding: 2px 6px 2px 4px; font-size: 13px; }
}
@media (max-width: 380px) {
  .has-back .pavatar { display: none; }
  .has-back .profile { padding-left: 6px; }
}

/* Kiko's speech bubble should never dwarf the page: smaller text beside Kiko, and a narrower Kiko scene so the bubble keeps its room */
.kikobox .bubble { font-size: clamp(16px, 4.2vw, 19px); padding: 10px 14px; }
.hello-box .bubble { font-size: clamp(16px, 4.2vw, 20px); min-height: 0; }
@media (max-width: 560px) {
  .kslot:has(.kiko.scene) { width: min(180px, 42vw); }
  .kikobox { gap: 10px; }
}

/* bigger stars in the profile bubble and bigger level icons (the signal bars) everywhere */
.pstars { font-size: 17px; padding: 3px 10px 3px 8px; gap: 4px; }
.pstars .ico { width: 22px; height: 22px; }
.ages button .ico { width: 30px; height: 24px; vertical-align: -6px; }
.ages button .ico.lvl, .ages button .ico.lvl:last-child { width: 30px; height: 24px; vertical-align: -6px; }
.ages .lk .ico { width: 14px; height: 14px; }
.gbtn:not(.kind) .ico { width: 34px; height: 26px; }
.lvlhead .lvl { width: 44px; height: 34px; }
.lvlmark { width: 56px; height: 42px; }
.lvlmark .ico { width: 40px; height: 30px; }
@media (max-width: 560px) { .profile { max-width: none; } }
@media (max-width: 480px) {
  .pstars { font-size: 15px; padding: 2px 8px 2px 6px; }
  .pstars .ico { width: 20px; height: 20px; }
  .ages button .ico.lvl, .ages button .ico.lvl:last-child { width: 26px; height: 21px; }
  .lvlmark { width: 50px; height: 38px; }
  .lvlmark .ico { width: 36px; height: 27px; }
}
@media (max-width: 380px) {
  .profile { max-width: none; }
  .pstars { font-size: 14px; padding: 2px 6px 2px 5px; }
  .pstars .ico { width: 18px; height: 18px; }
}
@media (max-width: 560px) {
  .bar .right { flex: 0 1 auto; min-width: 0; }
  .bar .right .langwrap { min-width: 0; }
  .profile { min-width: 0; }
}
@media (max-width: 340px) {
  .pavatar { display: none; }
  .profile { padding-left: 10px; }
}
@media (max-width: 560px) {
  .bar .right .langwrap { display: flex; }
  .bar .right .profile { flex: 0 1 auto; }
}

/* favorites: a round heart button the size of the language button, with a small count. It never grows beyond that; where there is no room
   it moves into the profile bubble, next to the stars. */
#favBtn.favicon { position: relative; width: 44px; height: 44px; padding: 0; flex: none; display: inline-grid; place-items: center; cursor: pointer; }
#favBtn.favicon:hover { background: #fde8f0; }
#favBtn.favicon .ico { width: 24px; height: 24px; }
.favcount { position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px; padding: 0 5px; box-sizing: border-box; border-radius: 99px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 900; line-height: 19px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
@media (max-width: 480px) {
  #favBtn.favicon { display: none; } /* the full name matters more: favorites move into the profile menu */
}
#profMenu .ico { width: 18px; height: 18px; vertical-align: -4px; }
#favBtn.favicon[hidden] { display: none; }

/* the level buttons let the icon do the talking: small text, with labels over the level row and the theme row */
.filterlabel { margin: 12px 0 4px; text-align: center; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8a8fb0; }
.ages button { font-size: 13px; font-weight: 800; padding: 6px 12px; }
@media (max-width: 480px) { .ages button { font-size: 12px; padding: 5px 10px; } }

/* the four level buttons: the icon above a small name, always on a single row, even on the smallest phones */
.ages { flex-wrap: nowrap; gap: 6px; justify-content: center; }
.ages button { position: relative; flex: 1 1 0; max-width: 130px; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; padding: 6px 4px 6px; font-size: 12px; line-height: 1.15; text-align: center; white-space: normal; overflow-wrap: anywhere; }
.ages button .ico.lvl, .ages button .ico.lvl:last-child { width: 32px; height: 26px; vertical-align: 0; flex: none; margin: 0; }
.ages .lk { position: absolute; top: 4px; right: 5px; line-height: 1; }
.ages .lk .ico { width: 13px; height: 13px; }
@media (max-width: 480px) {
  .ages { gap: 4px; }
  .ages button { font-size: 11px; padding: 5px 2px 5px; }
  .ages button .ico.lvl, .ages button .ico.lvl:last-child { width: 28px; height: 23px; }
}
@media (max-width: 360px) { .ages button { font-size: 10px; } }

/* the levels: a big round bubble with the level icon, and a small caption under it in the style of the "Difficulty level" and "Themes" labels */
.ages { gap: 8px; align-items: flex-start; }
.ages button { background: none; border: 0; box-shadow: none; padding: 0; max-width: 110px; flex: 1 1 0; gap: 4px; font-size: 11px; transform: none; }
.ages button.on { background: none; }
.ages .lvbub { position: relative; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--paper, #fffaf0); border: 2px solid var(--line, rgba(60,45,40,.35)); box-shadow: 0 3px 0 rgba(0,0,0,.12); }
.ages button:hover .lvbub { background: #fff; }
.ages button.on .lvbub { background: var(--matcha); border-color: rgba(60,45,40,.5); }
.ages .lvbub .ico.lvl { width: 36px; height: 29px; margin: 0; }
.ages .lvbub .lk { position: absolute; top: -2px; right: -2px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.ages .lvbub .lk .ico { width: 12px; height: 12px; }
.ages .lvlbl { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8a8fb0; line-height: 1.15; text-align: center; overflow-wrap: anywhere; }
.ages button.on .lvlbl { color: #1f7a5a; }
.ages button.locked { opacity: .65; }
@media (max-width: 480px) {
  .ages { gap: 4px; }
  .ages .lvbub { width: 54px; height: 54px; }
  .ages .lvbub .ico.lvl { width: 32px; height: 26px; }
  .ages .lvlbl { font-size: 10px; letter-spacing: .03em; }
}
@media (max-width: 360px) { .ages .lvlbl { font-size: 9px; letter-spacing: 0; } }
.ages button:not(.on), .ages button.on { border: 0; box-shadow: none; background: none; }
.ages .lvlbl { overflow-wrap: normal; word-break: normal; }
@media (max-width: 360px) { .ages .lvlbl { text-transform: none; font-size: 10px; letter-spacing: 0; } }

/* much bigger level bubbles: each one fills its share of the row, up to about 104px, with the icon scaled to match */
.ages { gap: 10px; }
.ages button { max-width: 112px; }
.ages .lvbub { width: 100%; max-width: 104px; height: auto; aspect-ratio: 1; border-width: 3px; }
.ages .lvbub .ico.lvl, .ages .lvbub .ico.lvl:last-child { width: 58%; height: auto; }
.ages .lvbub .lk { top: 0; right: 0; width: 26px; height: 26px; }
.ages .lvbub .lk .ico { width: 15px; height: 15px; }
.ages .lvlbl { font-size: 12px; margin-top: 2px; }
@media (max-width: 480px) { .ages { gap: 4px; } .ages .lvbub { border-width: 2px; } .ages .lvbub .lk { width: 22px; height: 22px; } .ages .lvlbl { font-size: 10px; } }
@media (max-width: 360px) { .ages .lvlbl { font-size: 10px; } .ages .lvbub .lk { width: 20px; height: 20px; } .ages .lvbub .lk .ico { width: 12px; height: 12px; } }