/* Toppurr kit: home chrome (top bar, chapter ribbon, dock) and the level path (rug, ribbon, nodes). 9 Oct 2026.
   Specs: art/kit/home_chrome/spec.md, art/kit/path/spec.md. Light from the top-left. Outline #2A1424. Fredoka is bundled by
   topple.css; the fallback is the same system-ui as everywhere else, so this still looks right if the font is missing. */
:root { --k-ink: #2A1424; --k-num: #4B2740; --k-f: Fredoka, system-ui, sans-serif; }

/* ---------- top bar: a compact plum panel, no taller than the old bar (the room starts under it) ---------- */
.topbar { align-items: center; padding: calc(var(--sat) + 9px) 14px 9px; border-radius: 0 0 24px 24px;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 14px, transparent 14px 28px), linear-gradient(rgba(128, 72, 106, .94), rgba(97, 50, 80, .94) 52%, rgba(75, 39, 64, .94));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25), inset 0 -3px 0 rgba(255, 205, 170, .22), 0 5px 0 var(--k-ink), 0 12px 18px rgba(20, 6, 12, .4); }
.wordmark { height: 40px; font: 700 30px/1 var(--k-f); letter-spacing: -.01em; color: #FFF0D4; text-shadow: none; }
.wordmark > span[data-t] { position: relative; display: inline-block; text-shadow: -2px -2px 0 var(--k-ink), 2px -2px 0 var(--k-ink), -2px 2px 0 var(--k-ink), 2px 2px 0 var(--k-ink),
  0 -2.5px 0 var(--k-ink), 0 2.5px 0 var(--k-ink), -2.5px 0 0 var(--k-ink), 2.5px 0 0 var(--k-ink), 0 5px 0 var(--k-ink), 0 7px 5px rgba(0, 0, 0, .4); }
.wordmark > span[data-t]::after { content: attr(data-t); position: absolute; left: 0; top: 0; text-shadow: none; color: transparent;
  background: linear-gradient(#fff, #FFEBC8 50%, #F5C58A); -webkit-background-clip: text; background-clip: text; }
/* Pip in the "o": the ring is two thin lines now (was a heavy 5px collar) */
.wordmark img { width: 27px; height: 27px; margin: 2px 3px 0; box-shadow: 0 0 0 2px #FFF3DF, 0 0 0 3.5px var(--k-ink), 0 3px 0 3.5px var(--k-ink), 0 6px 5px rgba(0, 0, 0, .35); }
.ptpill { left: 8px; top: calc(100% - 1px); transform: none; margin: 0; height: 20px; padding: 0 10px; border-radius: 10px; font: 700 10.5px/20px var(--k-f); letter-spacing: .07em; color: #fff;
  background: linear-gradient(#FF8A74, #EE5B47 55%, #D9452F); text-shadow: 0 1px 0 rgba(120, 20, 10, .6);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .55), 0 0 0 2px var(--k-ink), 0 4px 0 2px var(--k-ink), 0 7px 6px rgba(0, 0, 0, .35); }
.topbar .chips { gap: 4px; }
.topbar .chip { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 0; height: 36px; min-width: 52px; padding: 0 9px 0 22px; border-radius: 0; overflow: visible;
  font: 700 17px/1 var(--k-f); color: var(--k-num); text-shadow: none; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.topbar .chip::before { content: ''; position: absolute; left: 14px; right: 0; top: 5px; height: 26px; border-radius: 13px; background: linear-gradient(#F6E3C9, #FFF6E8 70%);
  box-shadow: inset 0 2.5px 3px rgba(110, 50, 40, .35), inset 0 0 0 1.5px rgba(80, 35, 50, .3), 0 1.5px 0 rgba(255, 225, 200, .3); }
.topbar .chip b { position: relative; font-weight: 700; }
.topbar .chip svg.ico { position: absolute; left: -2px; top: -2px; width: 36px; height: 40px; }
.topbar .chip.starc { min-width: 76px; padding: 0; } .topbar .chip.starc svg.ico { left: -3px; top: -3px; width: 40px; }
.topbar .chip.goldc { min-width: 62px; padding-right: 10px; } .topbar .chip.goldc svg.ico { left: -3px; width: 38px; }
.topbar .chip.starc b { position: absolute; left: 36px; top: 6px; width: 32px; text-align: center; font-size: 15px; line-height: 15px; }
.topbar .chip.starc .jar { position: absolute; left: 37px; top: 22px; bottom: auto; right: auto; width: 29px; height: 5px; border-radius: 3px; background: #5A3248; box-shadow: inset 0 1px 1.5px rgba(0, 0, 0, .5); }
.topbar .chip.starc .jar i { height: 5px; border-radius: 3px; background: linear-gradient(#FFE08A, #F2B33D 60%, #D98E12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); }
.topbar .chip:active { transform: translateY(3px); box-shadow: none; }
.topbar .chip:active::before { box-shadow: inset 0 3px 4px rgba(120, 60, 40, .4), inset 0 0 0 1.5px rgba(80, 35, 50, .3); }
/* states: no streak (grey flame), jar full (gold rim and halo; pulses once when it fills) */
.topbar .chip.fire.cold { color: #8B7A86; } .topbar .chip.fire.cold::before { background: linear-gradient(#E4D6C6, #EFE6DA 70%); } .chip.fire.cold svg.ico { filter: grayscale(1) brightness(1.15); }
.topbar .chip.starc.full::before { background: linear-gradient(#FFF0C4, #FFF8E2); box-shadow: inset 0 0 0 1.5px rgba(200, 140, 30, .7), 0 0 0 3px rgba(255, 214, 110, .45), 0 0 14px 4px rgba(255, 196, 90, .55); animation: kjar .6s ease-out 1; }
.topbar .chip.starc.full .jar i { background: linear-gradient(#FFF0A8, #FFC93C 55%, #E39A12); }
@keyframes kjar { 40% { transform: scale(1.12); } }
.topbar .chip.gear { width: 34px; height: 34px; min-width: 0; padding: 0; margin-left: 6px; justify-content: center; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #FFFBF2, #FFE8C6 55%, #EBC594); box-shadow: inset 0 -3px 0 rgba(150, 80, 50, .3), 0 0 0 2px var(--k-ink), 0 4px 0 2px var(--k-ink), 0 6px 6px rgba(0, 0, 0, .3); }
.topbar .chip.gear::before { display: none; } .topbar .chip.gear svg { position: static; width: 28px; height: 28px; }
.topbar .chip.gear:active { box-shadow: inset 0 -3px 0 rgba(150, 80, 50, .3), 0 0 0 2px var(--k-ink), 0 1px 0 2px var(--k-ink); }
@media (max-width: 374px) { .wordmark { font-size: 25px; } .wordmark img { width: 22px; height: 22px; } .topbar { padding-left: 10px; padding-right: 8px; } .topbar .chip { min-width: 46px; padding-left: 20px; font-size: 15px; } .topbar .chip.starc { min-width: 70px; } .topbar .chip.goldc { min-width: 56px; } .topbar .chips { gap: 2px; } .topbar .chip.gear { margin-left: 2px; width: 30px; height: 30px; } .topbar .chip.gear svg { width: 24px; height: 24px; } }

/* ---------- dock ---------- */
.dock { left: 0; right: 0; bottom: 0; height: calc(var(--sab) + 94px); padding: 0 0 var(--sab); align-items: start; border-radius: 26px 26px 0 0; -webkit-backdrop-filter: none; backdrop-filter: none;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 14px, transparent 14px 28px), linear-gradient(#7A4264, #5C2F4C 45%, #472439);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .28), 0 -4px 0 var(--k-ink), 0 -10px 20px rgba(20, 6, 12, .45); }
.dock .tab { height: 94px; justify-content: flex-start; gap: 0; padding: 4px 0 0; font: 600 14px/18px var(--k-f); color: #F4DFCC; text-shadow: 0 1.5px 0 var(--k-ink); }
.dock .tab > svg { position: relative; z-index: 1; width: 64px; height: 64px; flex: none; }
.dock .tab > span { position: relative; z-index: 1; }
.dock .tab::before { inset: 6px calc(50% - 37px) auto; height: 78px; border-radius: 22px; z-index: 0; }
.dock .tab:active { transform: scale(.94); }
#tabPath { color: #fff; text-shadow: 0 1.5px 0 var(--k-ink), 0 0 6px rgba(255, 200, 150, .5); }
#tabPath::after { content: ''; position: absolute; z-index: 0; left: 6px; right: 6px; top: 8px; height: 84px; border-radius: 22px; background: linear-gradient(rgba(255, 235, 215, .28), rgba(255, 235, 215, .08));
  box-shadow: inset 0 0 0 1.5px rgba(255, 235, 215, .3), inset 0 -2px 0 rgba(0, 0, 0, .18); }
#tabPath > svg { width: 66px; height: 72px; margin: -16px 0 8px; }
.dock .tab em { z-index: 2; left: calc(50% + 11px); right: auto; top: -2px; display: flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; box-sizing: border-box;
  font: 700 13px/1 var(--k-f); text-shadow: 0 1px 0 rgba(120, 20, 10, .6); background: linear-gradient(#FF8670, #E64A33);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .55), 0 0 0 2px #FFF3DE, 0 0 0 3.5px var(--k-ink), 0 3px 0 3.5px var(--k-ink); }
/* Today: the gold card shows "?" until it is done, then its picture sits in the card with a green check */
.dock #dailyMini { display: none; position: absolute; z-index: 1; left: calc(50% - 14px); top: 15px; width: 28px; height: 38px; border-radius: 3px; background: #DFF0E8; box-shadow: none; transform: rotate(-5deg); }
.dock .tab.done #dailyMini { display: block; } .dock .tab.done .q { display: none; }
.dock .seal { display: none; position: absolute; z-index: 2; right: calc(50% - 38px); top: 44px; width: 16px; height: 16px; border-radius: 50%; text-decoration: none;
  background: #3DBE5A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.7 2.7L12 5.4' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; box-shadow: 0 0 0 1.5px var(--k-ink), 0 2px 0 1.5px var(--k-ink); }
.dock .tab.done .seal { display: block; }
/* locked tabs stay on the bar (grey, with a padlock) so she can see what is coming */
.dock .tab.later { display: flex !important; color: #A99DAE; }
.dock .tab.later > svg { filter: grayscale(1) brightness(.78); opacity: .8; }
.dock .tab.later::after { content: ''; position: absolute; z-index: 2; right: calc(50% - 38px); top: 44px; width: 22px; height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 24'%3E%3Cpath d='M6 11V8a5 5 0 0 1 10 0v3' fill='none' stroke='%232A1424' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M6 11V8a5 5 0 0 1 10 0v3' fill='none' stroke='%23D8CDDC' stroke-width='2.4' stroke-linecap='round'/%3E%3Crect x='3' y='10.5' width='16' height='11.5' rx='3.5' fill='%23C9BDD0' stroke='%232A1424' stroke-width='2.2'/%3E%3Ccircle cx='11' cy='16' r='1.8' fill='%232A1424'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ---------- chapter ribbon ---------- */
.chapline { z-index: 3; display: flex; justify-content: center; width: max-content; max-width: calc(100% - 4px); height: 52px; margin: 0 auto -22px; padding: 3px 24px 0; border-radius: 0; background: none; box-shadow: none; }
.chapline .plaque { position: relative; display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 14px; white-space: nowrap; font: 600 14.5px/1 var(--k-f); color: #7A5039;
  background: linear-gradient(#FFF9EC, #FBE7C6 70%, #F3D4A6); box-shadow: inset 0 2px 0 #fff, inset 0 0 0 2px #E3B98C, 0 0 0 2.5px #4A1620, 0 5px 0 2.5px #4A1620, 0 9px 10px rgba(20, 6, 8, .4); }
.chapline b { font-weight: 700; color: #3A2420; } .chapline i { font-style: normal; color: #C9926B; }
.chapline .tl, .chapline .tr { position: absolute; top: 12px; width: 36px; height: 32px; } .chapline .tl { left: 0; } .chapline .tr { right: 0; }
.chapline.full .plaque { background: linear-gradient(#FFF6DA, #FFE6A6 70%, #F6CF72); box-shadow: inset 0 2px 0 #fff, inset 0 0 0 2px #F2B33D, 0 0 0 2.5px #4A1620, 0 5px 0 2.5px #4A1620, 0 0 16px 3px rgba(255, 196, 90, .5); }
.chapline.full #pathSub { color: #8A5A08; font-weight: 700; }
@media (max-width: 400px) { .chapline { padding: 3px 20px 0; } .chapline .plaque { font-size: 13.5px; gap: 5px; padding: 0 10px; } .chapline .tl, .chapline .tr { width: 30px; } }

/* ---------- rug ---------- */
.board .rug { border-radius: 32px; padding: 0 0 10px;
  background: repeating-linear-gradient(45deg, rgba(255, 214, 170, .2) 0 5px, transparent 5px 10px), repeating-linear-gradient(-45deg, rgba(40, 8, 20, .2) 0 5px, transparent 5px 10px), linear-gradient(#93475C, #6E3144);
  box-shadow: inset 0 0 0 3px rgba(255, 200, 160, .35), inset 0 3px 0 rgba(255, 255, 255, .2), 0 8px 0 #2E1019, 0 20px 30px rgba(15, 4, 8, .55); }
.rug::before { inset: 8px; border-radius: 25px; border: 4px solid #2AA5A2; z-index: 0; box-shadow: inset 0 0 0 2px #1B7A7A, 0 0 0 2px #EBD3AE; }
.rug::after { content: ''; position: absolute; inset: 20px; border-radius: 18px; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 4px), radial-gradient(90% 70% at 50% 40%, #74394B, #48202F);
  box-shadow: inset 0 5px 12px rgba(10, 2, 6, .55), 0 0 0 2.5px rgba(255, 214, 170, .3); }
.rug #nodes { z-index: 1; }
.rug .props { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.props .yarn { position: absolute; left: 34px; bottom: 22px; }
.props .ft { position: absolute; left: 44px; right: 44px; bottom: -24px; height: 16px; border-radius: 0 0 6px 6px; background: repeating-linear-gradient(90deg, #EBD3AE 0 3px, transparent 3px 8px); }
.props .fd { position: absolute; width: 34px; height: 20px; border-radius: 6px; background: linear-gradient(#FFF9EE, #E9D2B6); box-shadow: 0 3px 0 #A9805F, 0 5px 5px rgba(15, 3, 8, .4); }
.props .fd::before { content: ''; position: absolute; left: 16px; top: 3px; width: 2px; height: 14px; background: rgba(120, 80, 50, .45); }
.props .fd::after { content: ''; position: absolute; left: 7px; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: #5A3A30; box-shadow: 16px -3px #5A3A30, 16px 3px #5A3A30; }
.props .fd.a { right: 54px; bottom: 36px; transform: rotate(14deg); } .props .fd.b { right: 26px; bottom: 44px; transform: rotate(-16deg); }
.props .paw { position: absolute; width: 22px; height: 22px; opacity: .14;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cg fill='%23FFE2C4'%3E%3Cellipse cx='11' cy='14.5' rx='5.5' ry='4.5'/%3E%3Cellipse cx='4.5' cy='9' rx='2.3' ry='3'/%3E%3Cellipse cx='9' cy='4.5' rx='2.3' ry='3.1'/%3E%3Cellipse cx='13.5' cy='4.5' rx='2.3' ry='3.1'/%3E%3Cellipse cx='17.7' cy='9' rx='2.3' ry='3'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
.props .ros { position: absolute; width: 7px; height: 7px; border-radius: 50%; opacity: .16; background: #FFE2C4; box-shadow: 14px 0 #FFE2C4, 7px 7px #FFE2C4, 0 14px #FFE2C4, 14px 14px #FFE2C4; }

/* ---------- path: ribbon and nodes ---------- */
.chain path { stroke-linejoin: round; }
.node { --u: calc(var(--k, 1) * 1px); --nw: calc(58 * var(--u)); --nh: calc(70 * var(--u)); display: block; padding: 0; border-radius: calc(15 * var(--u)); font: 700 calc(24 * var(--u))/1 var(--k-f); }
/* locked: plum slab, embossed number, domino groove, padlock */
.node.lock { display: grid; align-content: start; justify-items: center; padding: 0; line-height: calc(35 * var(--u)); color: rgba(255, 238, 242, .5); background: linear-gradient(#85626F, #5F4252); text-shadow: 0 -1px 0 rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 255, 255, .12);
  box-shadow: 0 calc(6 * var(--u)) 0 #382030, inset 0 0 0 2px rgba(255, 230, 240, .1), inset 0 2px 0 rgba(255, 255, 255, .2), 0 calc(12 * var(--u)) 10px -4px rgba(14, 3, 8, .5); }
.node.lock::before { content: ''; position: absolute; left: calc(7 * var(--u)); right: calc(7 * var(--u)); top: calc(34 * var(--u)); width: auto; height: 3px; margin: 0; border-radius: 2px; background: rgba(30, 12, 22, .55); box-shadow: 0 1px 0 rgba(255, 255, 255, .14); }
.node.lock::after { content: ''; position: absolute; left: 50%; top: calc(43 * var(--u)); right: auto; width: calc(17 * var(--u)); height: calc(19 * var(--u)); margin-left: calc(-8.5 * var(--u)); border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 19' fill='none'%3E%3Crect x='2' y='8' width='13' height='10' rx='3' fill='%23FFEBF0' fill-opacity='.5'/%3E%3Cpath d='M5 8V6a3.5 3.5 0 0 1 7 0v2' stroke='%23FFEBF0' stroke-opacity='.5' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='8.5' cy='12.5' r='1.5' fill='%233C1E2D' fill-opacity='.6'/%3E%3C/svg%3E") center / contain no-repeat; }
.node.lock:active { transform: translateY(calc(5 * var(--u))); }
/* done: a gold frame (won in one try) or a cream one (replayable), the picture inset with a gloss over it */
.node.done { background: linear-gradient(155deg, #FFFDF6, #F3DFC6 65%, #E3C6A4);
  box-shadow: 0 calc(6 * var(--u)) 0 #A9805F, inset 0 0 0 1.5px #fff, inset 0 -4px 5px rgba(150, 95, 30, .25), 0 calc(12 * var(--u)) 10px -4px rgba(14, 3, 8, .5); }
.node.done.gold { background: linear-gradient(155deg, #FFF1B8, #F9CB58 45%, #E39B16);
  box-shadow: 0 calc(6 * var(--u)) 0 #A5650A, inset 0 0 0 2px #FFF4C8, inset 0 -4px 5px rgba(150, 95, 30, .25), 0 calc(12 * var(--u)) 10px -4px rgba(14, 3, 8, .5); }
.node.done canvas { position: absolute; left: calc(5 * var(--u)); top: calc(5 * var(--u)); width: calc(48 * var(--u)); height: calc(56 * var(--u)); border-radius: calc(10 * var(--u)); box-shadow: 0 0 0 1.5px rgba(120, 80, 40, .35); }
.node.done::before { content: ''; position: absolute; left: calc(5 * var(--u)); top: calc(5 * var(--u)); width: calc(48 * var(--u)); height: calc(56 * var(--u)); border-radius: calc(10 * var(--u)); z-index: 1; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .5), transparent 42%); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .25); }
.node.done::after { content: ''; position: absolute; z-index: 2; right: calc(-8 * var(--u)); top: calc(-8 * var(--u)); width: calc(24 * var(--u)); height: calc(24 * var(--u)); border-radius: 50%; }
.node.done.gold::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.5l2.5 5.4 5.9.7-4.4 4 1.2 5.8L10 14.5l-5.2 2.9 1.2-5.8-4.4-4 5.9-.7z' fill='%23fff' stroke='%23B87408' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") center / 58% no-repeat, radial-gradient(circle at 35% 30%, #FFE9A0, #F2B33D 60%, #C98A12);
  box-shadow: 0 2px 0 #9A5E06, inset 0 0 0 2px #FFF4C8; }
.node.done.rp::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12a7 7 0 1 1-2.3-5.2'/%3E%3Cpath d='M19.5 3.5v5h-5'/%3E%3C/svg%3E") center / 58% no-repeat, radial-gradient(circle at 35% 30%, #FF9C86, #EE6A55 60%, #C9452F);
  box-shadow: 0 2px 0 #9B2F1E, inset 0 0 0 2px rgba(255, 255, 255, .85); }
.node.done:active { transform: translateY(calc(5 * var(--u))); }
.node .nstars { left: 50%; top: calc(63 * var(--u)); bottom: auto; z-index: 3; display: flex; gap: 0; }
.node .nstars b { width: calc(21 * var(--u)); height: calc(21 * var(--u)); margin-left: calc(-4 * var(--u)); font-weight: 400; } .node .nstars b:first-child { margin-left: 0; } .node .nstars b:nth-child(2) { transform: translateY(calc(-4 * var(--u))); }
.node .nstars svg { display: block; width: 100%; height: 100%; overflow: visible; }
.node .nstars path { fill: #3E2230; stroke: #241019; stroke-width: 1.7; stroke-linejoin: round; } .node .nstars .on path { fill: url(#sg); stroke: #8F5606; }
/* current: the big coral Play domino (gold when the day is capped), Pip peeking over it */
#levelBtn.cur { --nw: calc(80 * var(--u)); --nh: calc(96 * var(--u)); border-radius: calc(24 * var(--u)); padding: 0; color: #fff; background: linear-gradient(170deg, #FF9A82, #F0644F 42%, #D7482F);
  box-shadow: 0 calc(8 * var(--u)) 0 #A93522, inset 0 0 0 2.5px rgba(255, 214, 200, .75), inset 0 -6px 8px rgba(130, 30, 15, .3), 0 0 34px 12px rgba(255, 150, 110, .3), 0 calc(14 * var(--u)) 12px -4px rgba(14, 3, 8, .5); }
#levelBtn::before { inset: -9px -9px -5px; border: 3.5px solid rgba(255, 255, 255, .55); border-radius: 32px; }
#levelBtn::after { content: ''; position: absolute; left: calc(8 * var(--u)); right: calc(8 * var(--u)); top: calc(5 * var(--u)); height: calc(30 * var(--u)); pointer-events: none;
  border-radius: 18px 18px 40px 40px / 16px 16px 22px 22px; background: linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, .04)); }
#levelBtn .num { position: absolute; z-index: 1; left: 0; right: 0; top: calc(20 * var(--u)); font: 700 calc(40 * var(--u))/calc(44 * var(--u)) var(--k-f); text-align: center;
  text-shadow: 0 3px 0 #A93522, 0 0 1px #A93522, 2px 3px 0 #A93522, -2px 3px 0 #A93522; }
#levelBtn .go { position: absolute; z-index: 1; left: calc(11 * var(--u)); right: calc(11 * var(--u)); bottom: calc(10 * var(--u)); height: calc(23 * var(--u)); padding: 0; border-radius: 12px; text-align: center;
  font: 700 13px/calc(23 * var(--u)) var(--k-f); letter-spacing: .12em; color: #D7482F; background: linear-gradient(#fff, #FFE3D6); box-shadow: 0 3px 0 #B5361F; }
#levelBtn:active { transform: translateY(calc(6 * var(--u))); box-shadow: 0 2px 0 #A93522, inset 0 0 0 2.5px rgba(255, 214, 200, .75), inset 0 -6px 8px rgba(130, 30, 15, .3); }
#levelBtn.capped { background: linear-gradient(170deg, #FFE585, #FFB52E 42%, #E8921A);
  box-shadow: 0 calc(8 * var(--u)) 0 #9A5E06, inset 0 0 0 2.5px rgba(255, 244, 200, .8), inset 0 -6px 8px rgba(150, 90, 10, .3), 0 0 34px 12px rgba(255, 196, 90, .3), 0 calc(14 * var(--u)) 12px -4px rgba(14, 3, 8, .5); }
#levelBtn.capped .num { text-shadow: 0 3px 0 #9A5E06, 0 0 1px #9A5E06, 2px 3px 0 #9A5E06, -2px 3px 0 #9A5E06; } #levelBtn.capped .go { color: #B5640C; box-shadow: 0 3px 0 #9A5E06; }
.peek { width: calc(70 * var(--k, 1) * 1px); margin: calc(-45 * var(--k, 1) * 1px) 0 0 calc(-35 * var(--k, 1) * 1px); }
.lsub { margin-top: 22px; }