/* ==========================================================================
   Midnight Airmail — style.css   (ART)
   Torn construction paper + marker grain. Everything below hangs off the tokens in :root.
   Layout skeleton = index.html §5.12.  See layout-preview.html for the canonical markup.
   GENERATED from a template: torn polygons / texture data-URIs are baked in below.
   ========================================================================== */

/* ---------- 1. tokens ---------- */
:root {
  color-scheme: dark;
  --sky-1: #1B1E5B; --sky-2: #222A70; --sky-3: #2A3584; --sky-4: #33409A;
  --wall: #3E2F74; --wall-line: #57489E; --roof: #1A1F4F;
  --paper: #F3EAD3; --paper-rim: #FFFDF6; --paper-2: #EADFC0;
  --window: #F6C445; --curtain: #EE9294;
  --sun: #E8795A; --sun-dark: #B93D22;
  --ink: #2F5BD3; --ink-dark: #2247A8;
  --sweater: #1F9C8C; --vine: #3E8E4E; --leaf: #6CBF5E;
  --sill: #D8A76B; --star: #F5CD55; --text-dark: #2A2250; --text-soft: #5A4E7A;
  --navy-paper: #232B74;
  --suit-star: #E0A91F; --suit-moon: #3A47A8; --suit-bloom: #E0604B; --suit-leaf: #2F8F5E;
  --tape-teal: #48C2AF; --tape-pink: #F29AA8; --tape-gold: #F2C64B;
  --shade: rgba(10, 8, 40, .5);

  --font-display: "Gaegu", "Mali", "Comic Sans MS", cursive;
  --font-body: "Mali", "Gaegu", "Comic Sans MS", cursive;

  --card-w: 96px;                       /* every card scales from this; height = 1.4x */
  --sidebar-w: clamp(236px, 21vw, 320px);
  --hand-overlap: -.05;                 /* hand cards overlap by this many card-widths */
  --controls-h: 52px;

  /* textures (data URIs) */
  --grain: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27180%27%20height%3D%27180%27%3E%3Cfilter%20id%3D%27n%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.9%27%20numOctaves%3D%272%27%20seed%3D%273%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20values%3D%270%200%200%200%20.1%20%200%200%200%200%20.07%20%200%200%200%200%20.22%20%200%200%200%20-1.4%20.78%27%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D%27s%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.02%20.8%27%20numOctaves%3D%272%27%20seed%3D%278%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20values%3D%270%200%200%200%20.1%20%200%200%200%200%20.07%20%200%200%200%200%20.22%20%200%200%200%20-1.2%20.6%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%20opacity%3D%27.3%27%2F%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23s%29%27%20opacity%3D%27.42%27%2F%3E%3C%2Fsvg%3E");
  --grain-l: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27180%27%20height%3D%27180%27%3E%3Cfilter%20id%3D%27n%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.85%27%20numOctaves%3D%272%27%20seed%3D%275%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20values%3D%270%200%200%200%201%20%200%200%200%200%20.97%20%200%200%200%200%20.9%20%200%200%200%20-1.3%20.68%27%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D%27s%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.01%20.5%27%20numOctaves%3D%272%27%20seed%3D%272%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20values%3D%270%200%200%200%201%20%200%200%200%200%20.97%20%200%200%200%200%20.9%20%200%200%200%20-1.1%20.55%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%20opacity%3D%27.45%27%2F%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23s%29%27%20opacity%3D%27.5%27%2F%3E%3C%2Fsvg%3E");
  --scribble: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27260%27%20height%3D%27150%27%20viewBox%3D%270%200%20260%20150%27%3E%3Cpath%20d%3D%27M16.4%20137c0.6%20-6%205.1%20-6%205.6%200.2c0.5%20-6.4%204.5%20-6.4%205%200.2M35.2%20109.8c0.5%20-3.5%204.9%20-3.5%205.5%200c0.6%20-3.5%205.5%20-3.5%206.1%200c0.8%20-3.3%207.1%20-3.3%207.9%200M32.7%2031.8c0.7%20-4.1%206.3%20-4.1%207%20-0.2c0.8%20-6.6%206.9%20-6.6%207.7%20-0.2M197.2%2091.9c0.4%20-5.9%203.7%20-5.9%204.2%200.3c0.5%20-7.5%204.9%20-7.5%205.4%200.3c0.4%20-5.3%203.7%20-5.3%204.1%200.3c0.7%20-7.1%206.4%20-7.1%207.1%200.3M193.2%20102c0.5%20-3.5%204.9%20-3.5%205.4%200.2c0.5%20-6.6%204.1%20-6.6%204.5%200.2c0.5%20-3.7%204.8%20-3.7%205.3%200.2M12.7%2099.6c0.7%20-7.1%206.6%20-7.1%207.3%200.3c0.8%20-4.4%206.9%20-4.4%207.7%200.3c0.6%20-7%205.5%20-7%206.1%200.3M171.6%2088.1c0.6%20-11%205.6%20-11%206.2%200.4c0.4%20-8.9%203.6%20-8.9%204%200.4c0.5%20-10.4%204.8%20-10.4%205.3%200.4c0.6%20-10.6%205.6%20-10.6%206.2%200.4c0.8%20-9.2%207.1%20-9.2%207.9%200.4M132.5%20106.5c0.5%20-3%204.5%20-3%204.9%200c0.4%20-6.6%203.7%20-6.6%204.1%200c0.7%20-5.4%206.6%20-5.4%207.3%200m6.5%200v-7.6M203%2047.6c0.7%20-7.6%206.5%20-7.6%207.2%200.4c0.7%20-4.9%206.6%20-4.9%207.3%200.4c0.8%20-6.9%207.2%20-6.9%208%200.4c0.6%20-5%205.6%20-5%206.3%200.4M166.7%20122.3c0.8%20-7.6%207.2%20-7.6%208%200.2c0.7%20-9.5%206.3%20-9.5%206.9%200.2M120.8%20113.8c0.6%20-4.1%205.6%20-4.1%206.2%200.3c0.6%20-3.1%205.5%20-3.1%206.1%200.3m5.8%200v-6.9M4.6%2034.2c0.8%20-5.1%206.8%20-5.1%207.5%20-0.4c0.4%20-2.7%203.8%20-2.7%204.2%20-0.4M150.5%2059.1c0.7%20-9.6%206.2%20-9.6%206.8%20-0.1c0.6%20-9.6%205.5%20-9.6%206.1%20-0.1c0.6%20-8.1%205.1%20-8.1%205.6%20-0.1m6.1%200v-8.7M54.4%20117.8c0.6%20-6.8%205.1%20-6.8%205.7%200.3c0.8%20-6.1%206.9%20-6.1%207.7%200.3M170.1%2063.7c0.6%20-5.5%205.2%20-5.5%205.7%200.4c0.6%20-5.3%205.5%20-5.3%206.1%200.4c0.8%20-6.7%206.8%20-6.7%207.5%200.4M103.1%2067.9c0.6%20-9.7%205.6%20-9.7%206.2%200.2c0.5%20-9.9%204.2%20-9.9%204.6%200.2c0.6%20-9.3%205%20-9.3%205.6%200.2c0.7%20-7.8%206.7%20-7.8%207.4%200.2c0.5%20-5.8%204.7%20-5.8%205.2%200.2M196.9%2052.6c0.7%20-4.6%206.2%20-4.6%206.9%20-0.2c0.7%20-4.3%206.4%20-4.3%207.1%20-0.2c0.8%20-2.7%207.1%20-2.7%207.9%20-0.2c0.8%20-2.8%207.1%20-2.8%207.9%20-0.2M146.7%20109.3c0.6%20-7.9%205.8%20-7.9%206.5%200.1c0.5%20-9.3%204.6%20-9.3%205.1%200.1c0.6%20-5.2%205.3%20-5.2%205.9%200.1M115.9%2082.6c0.5%20-5.9%204.2%20-5.9%204.6%200.3c0.5%20-8.9%204.6%20-8.9%205.1%200.3c0.6%20-11.6%205%20-11.6%205.6%200.3M185.6%2047.7c0.7%20-10.6%206%20-10.6%206.7%200c0.5%20-11.4%204.8%20-11.4%205.3%200c0.8%20-10.9%207.1%20-10.9%207.9%200c0.4%20-6.3%203.6%20-6.3%204%200M20.5%20128.7c0.5%20-8.1%204.5%20-8.1%205%20-0.2c0.7%20-4.2%206.2%20-4.2%206.9%20-0.2M20.5%2022.9c0.7%20-6.3%206.1%20-6.3%206.8%20-0.1c0.6%20-5.3%205.4%20-5.3%206%20-0.1c0.6%20-7.3%205.3%20-7.3%205.9%20-0.1c0.6%20-5.7%205.6%20-5.7%206.2%20-0.1c0.7%20-6.5%206.4%20-6.5%207.1%20-0.1M11.4%2035.3c0.5%20-10.6%204.6%20-10.6%205.1%200.2c0.7%20-7.2%205.9%20-7.2%206.6%200.2c0.4%20-5.7%203.9%20-5.7%204.4%200.2c0.8%20-9.7%207.2%20-9.7%208%200.2c0.5%20-8.5%204.5%20-8.5%205%200.2m6.1%200v-6.6M36.5%20106.9c0.5%20-5.8%204.3%20-5.8%204.8%20-0.3c0.4%20-2.8%203.7%20-2.8%204.1%20-0.3c0.8%20-5.9%207%20-5.9%207.8%20-0.3c0.6%20-4.7%205.3%20-4.7%205.9%20-0.3c0.7%20-3.3%206.1%20-3.3%206.8%20-0.3M123.1%20104.4c0.6%20-3.1%205.7%20-3.1%206.3%200.3c0.4%20-4.6%203.8%20-4.6%204.2%200.3m4.6%200v-5.7M162.7%20117.4c0.7%20-9.9%206.1%20-9.9%206.8%200.3c0.7%20-8.9%205.9%20-8.9%206.6%200.3c0.7%20-6.5%206.1%20-6.5%206.8%200.3M69.5%2042.9c0.7%20-6.2%206%20-6.2%206.7%200c0.7%20-5.2%206.2%20-5.2%206.8%200c0.7%20-6.7%206.3%20-6.7%207%200c0.6%20-6%205.2%20-6%205.8%200M114.8%2081.1c0.4%20-6.3%203.9%20-6.3%204.3%200.1c0.8%20-7.9%207%20-7.9%207.8%200.1M67.3%20136.9c0.6%20-5.9%205.2%20-5.9%205.8%20-0.3c0.6%20-5.9%205.4%20-5.9%206%20-0.3c0.7%20-10.6%206.7%20-10.6%207.4%20-0.3c0.6%20-10.3%205.5%20-10.3%206.1%20-0.3m5.9%200v-5M144.3%20109.6c0.6%20-3.4%205.3%20-3.4%205.9%20-0.2c0.5%20-3.1%204.7%20-3.1%205.2%20-0.2M114.2%20101c0.7%20-2.5%205.9%20-2.5%206.5%20-0.2c0.6%20-3.5%205.6%20-3.5%206.2%20-0.2c0.7%20-4.5%206%20-4.5%206.7%20-0.2M159.4%2079.5c0.6%20-7.2%205.8%20-7.2%206.5%200.2c0.7%20-8.1%206%20-8.1%206.7%200.2c0.7%20-8.7%206.2%20-8.7%206.9%200.2c0.7%20-7.6%206.7%20-7.6%207.4%200.2M55%20139.3c0.4%20-10.1%203.7%20-10.1%204.2%20-0.2c0.6%20-10.6%205.5%20-10.6%206.1%20-0.2m4.7%200v-6M133.2%2054c0.8%20-3.3%207%20-3.3%207.8%20-0.3c0.5%20-3.9%204.1%20-3.9%204.6%20-0.3c0.7%20-2.9%206.2%20-2.9%206.9%20-0.3c0.7%20-2.9%206.2%20-2.9%206.9%20-0.3M198.3%2089.9c0.5%20-6.8%204.6%20-6.8%205.1%20-0.1c0.7%20-9.2%206%20-9.2%206.6%20-0.1c0.6%20-9.1%205.5%20-9.1%206.2%20-0.1c0.6%20-8.3%205%20-8.3%205.5%20-0.1m4.3%200v-6.4M156.5%2032.9c0.5%20-4.8%204.8%20-4.8%205.3%20-0.1c0.8%20-3.8%206.8%20-3.8%207.6%20-0.1M7.1%2037.2c0.6%20-4%205.3%20-4%205.8%20-0.2c0.6%20-4.9%205.2%20-4.9%205.8%20-0.2c0.4%20-3.3%203.6%20-3.3%204%20-0.2c0.7%20-5.2%205.9%20-5.2%206.5%20-0.2c0.5%20-3.5%204.7%20-3.5%205.2%20-0.2M177%2081.3c0.8%20-7.7%207.1%20-7.7%207.8%200.2c0.7%20-11.2%206.7%20-11.2%207.5%200.2c0.7%20-12%206.5%20-12%207.2%200.2c0.7%20-10.4%206.1%20-10.4%206.8%200.2c0.5%20-7.5%204.8%20-7.5%205.3%200.2M156.4%2019.9c0.5%20-6.3%204.5%20-6.3%205%200.1c0.7%20-8.6%206%20-8.6%206.7%200.1c0.5%20-4%204.7%20-4%205.2%200.1M12.8%2018.4c0.7%20-4.9%206%20-4.9%206.7%20-0.1c0.7%20-5%206.5%20-5%207.2%20-0.1c0.7%20-4.1%206.4%20-4.1%207.1%20-0.1M109.6%20133c0.8%20-6.2%206.9%20-6.2%207.6%200.3c0.6%20-4.6%205.4%20-4.6%206%200.3c0.5%20-5%204.6%20-5%205.1%200.3c0.8%20-6%207.1%20-6%207.8%200.3c0.5%20-6.1%204.8%20-6.1%205.4%200.3M148.3%2091.4c0.7%20-4.7%206.4%20-4.7%207.2%200.3c0.5%20-3.2%204.2%20-3.2%204.7%200.3c0.7%20-4.3%206.3%20-4.3%207%200.3c0.6%20-3.3%205.4%20-3.3%206%200.3M34.1%2096.2c0.6%20-6.6%205.3%20-6.6%205.9%20-0.2c0.6%20-7.3%205.1%20-7.3%205.6%20-0.2c0.6%20-8.2%205.8%20-8.2%206.4%20-0.2c0.4%20-4.8%204%20-4.8%204.4%20-0.2c0.7%20-4.2%206.7%20-4.2%207.4%20-0.2M132.4%2056.3c0.5%20-4.2%204.1%20-4.2%204.6%200.2c0.6%20-2.9%205.8%20-2.9%206.4%200.2c0.8%20-2.8%207.1%20-2.8%207.9%200.2M38.5%20114.8c0.4%20-5.3%203.7%20-5.3%204.1%200.3c0.6%20-5.5%205.7%20-5.5%206.4%200.3c0.5%20-6.7%204.7%20-6.7%205.2%200.3c0.5%20-4.8%204.2%20-4.8%204.7%200.3M193.4%2095.7c0.5%20-3.9%204.9%20-3.9%205.4%200.1c0.5%20-6.2%204.8%20-6.2%205.3%200.1c0.6%20-7.7%205.8%20-7.7%206.5%200.1c0.4%20-4.7%203.9%20-4.7%204.3%200.1m6%200v-8.3M20.5%20110.5c0.8%20-7.2%206.8%20-7.2%207.5%200.4c0.6%20-3.7%205.3%20-3.7%205.9%200.4c0.5%20-7.1%204.5%20-7.1%205%200.4c0.5%20-5.1%204.1%20-5.1%204.6%200.4c0.7%20-6.5%206.4%20-6.5%207.2%200.4M160%20101.4c0.5%20-6.4%204.3%20-6.4%204.7%200.1c0.7%20-4.2%206.6%20-4.2%207.3%200.1c0.6%20-5.2%205.4%20-5.2%206%200.1c0.7%20-3.2%206.6%20-3.2%207.3%200.1m5%200v-9.3M197.5%20113c0.5%20-3.3%204.9%20-3.3%205.5%200c0.6%20-3.8%205.3%20-3.8%205.9%200c0.4%20-4.3%204%20-4.3%204.5%200c0.6%20-4%205.5%20-4%206.1%200c0.7%20-6.7%205.9%20-6.7%206.5%200M189.2%20119c0.6%20-10.1%205.2%20-10.1%205.8%200.2c0.8%20-10.4%206.9%20-10.4%207.7%200.2m4.5%200v-6.4M8.7%20111.9c0.6%20-3.4%205.1%20-3.4%205.7%20-0.3c0.8%20-5%207%20-5%207.7%20-0.3M68.1%2044.3c0.8%20-7.5%207%20-7.5%207.8%200.1c0.4%20-7.8%203.8%20-7.8%204.2%200.1c0.8%20-7.4%207%20-7.4%207.8%200.1c0.4%20-5.8%203.6%20-5.8%204%200.1c0.5%20-6.1%204.4%20-6.1%204.9%200.1m4.6%200v-9M33.1%2083.4c0.8%20-7.6%206.8%20-7.6%207.5%200.3c0.5%20-3.4%204.8%20-3.4%205.4%200.3m5.9%200v-9.7M99.1%2077.6c0.6%20-5%205%20-5%205.6%200.2c0.7%20-5.6%206%20-5.6%206.7%200.2c0.5%20-7.5%204.1%20-7.5%204.6%200.2c0.6%20-4.6%205.6%20-4.6%206.2%200.2c0.5%20-10.6%204.5%20-10.6%205%200.2M180.3%2098.4c0.6%20-9.8%205.3%20-9.8%205.8%20-0.1c0.6%20-5.4%205%20-5.4%205.6%20-0.1c0.7%20-5.8%206.6%20-5.8%207.3%20-0.1c0.5%20-6.2%204.1%20-6.2%204.5%20-0.1c0.5%20-10.1%204.4%20-10.1%204.9%20-0.1m6.2%200v-6.1M26.3%2022.5c0.5%20-6.1%204.6%20-6.1%205.1%20-0.4c0.7%20-7.9%206%20-7.9%206.7%20-0.4c0.5%20-7.2%204.6%20-7.2%205.1%20-0.4c0.6%20-5.5%205%20-5.5%205.6%20-0.4M157.8%2072.2c0.7%20-7%206.7%20-7%207.5%200.1c0.7%20-8.7%206.3%20-8.7%207%200.1c0.7%20-11.5%206%20-11.5%206.7%200.1M78.7%2012.1c0.7%20-6.8%206.5%20-6.8%207.3%200.3c0.6%20-8.3%205.7%20-8.3%206.4%200.3c0.5%20-7.4%204.5%20-7.4%205%200.3c0.6%20-11.3%205.1%20-11.3%205.7%200.3%27%20fill%3D%27none%27%20stroke%3D%27%237565C2%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20opacity%3D%271%27%2F%3E%3C%2Fsvg%3E");
  --scribble-cream: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27120%27%20height%3D%2760%27%20viewBox%3D%270%200%20120%2060%27%3E%3Cpath%20d%3D%27M24%2020.4c0.6%20-2.9%205.4%20-2.9%206%20-0.3c0.8%20-4.8%207.1%20-4.8%207.9%20-0.3c0.7%20-5.3%206.1%20-5.3%206.8%20-0.3c0.5%20-5.2%204.9%20-5.2%205.5%20-0.3c0.8%20-4.5%206.8%20-4.5%207.5%20-0.3M33.4%2040c0.6%20-7.8%205.3%20-7.8%205.9%200.3c0.7%20-7.2%206.4%20-7.2%207.2%200.3c0.7%20-9.1%206.3%20-9.1%207%200.3m5.8%200v-4.1M36.4%2041c0.6%20-6.8%205.1%20-6.8%205.6%20-0.3c0.6%20-5.1%205.6%20-5.1%206.2%20-0.3c0.6%20-6.5%205.8%20-6.5%206.5%20-0.3M61.2%2044.4c0.5%20-5.7%204.3%20-5.7%204.7%200.3c0.6%20-3.3%205.4%20-3.3%206%200.3M4.2%2030.3c0.6%20-9.9%205.6%20-9.9%206.2%200.3c0.5%20-8.7%204.6%20-8.7%205.2%200.3c0.5%20-6.9%204.9%20-6.9%205.4%200.3c0.7%20-4.3%206.1%20-4.3%206.8%200.3c0.5%20-7.2%204.5%20-7.2%205%200.3M8.3%2029.5c0.6%20-7.3%205.8%20-7.3%206.5%200.1c0.7%20-10.8%206.2%20-10.8%206.8%200.1c0.5%20-12.1%204.7%20-12.1%205.2%200.1c0.7%20-6.6%206.4%20-6.6%207.1%200.1c0.8%20-8%207.1%20-8%207.9%200.1M31.5%2016.6c0.4%20-3.5%204%20-3.5%204.5%20-0.3c0.4%20-4%204%20-4%204.5%20-0.3c0.8%20-3.5%207%20-3.5%207.7%20-0.3c0.5%20-2.8%204.9%20-2.8%205.4%20-0.3c0.7%20-4.1%206%20-4.1%206.7%20-0.3m6.5%200v-8.4M55.8%2047.6c0.7%20-4.7%206%20-4.7%206.7%200.2c0.5%20-3%204.1%20-3%204.6%200.2c0.7%20-3.3%206.3%20-3.3%206.9%200.2c0.8%20-4.9%207.2%20-4.9%208%200.2m7.1%200v-6.4M34.6%2013.9c0.8%20-3.6%206.8%20-3.6%207.6%200.2c0.6%20-3.1%205.6%20-3.1%206.3%200.2c0.7%20-3%206.4%20-3%207.1%200.2c0.5%20-4.5%204.6%20-4.5%205.1%200.2c0.8%20-2.8%207.2%20-2.8%208%200.2m7%200v-4.4%27%20fill%3D%27none%27%20stroke%3D%27%23B9A47A%27%20stroke-width%3D%271%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20opacity%3D%270.8%27%2F%3E%3C%2Fsvg%3E");
  --vine-tile: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2734%27%20height%3D%27190%27%20viewBox%3D%270%200%2034%20190%27%3E%3Cpath%20d%3D%27M15%20-2C18%2030%2012%2062%2015%2095S18%20158%2015%20192%27%20fill%3D%27none%27%20stroke%3D%27%232C6B3A%27%20stroke-width%3D%272.6%27%20stroke-linecap%3D%27round%27%2F%3E%3Cg%20transform%3D%27translate%2816.7%2022%29%20rotate%2845.8%29%20translate%287%200%29%27%3E%3Cellipse%20rx%3D%277%27%20ry%3D%273.9%27%20fill%3D%27%236CBF5E%27%20stroke%3D%27%23FFFDF6%27%20stroke-width%3D%27.9%27%2F%3E%3Cpath%20d%3D%27M-5%200H5%27%20stroke%3D%27%232F7A3C%27%20stroke-width%3D%27.7%27%20opacity%3D%27.6%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%2817.2%2062%29%20rotate%28-41.5%29%20translate%28-7%200%29%27%3E%3Cellipse%20rx%3D%277%27%20ry%3D%273.9%27%20fill%3D%27%234FAE55%27%20stroke%3D%27%23FFFDF6%27%20stroke-width%3D%27.9%27%2F%3E%3Cpath%20d%3D%27M-5%200H5%27%20stroke%3D%27%232F7A3C%27%20stroke-width%3D%27.7%27%20opacity%3D%27.6%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%2814.8%2098%29%20rotate%2851.6%29%20translate%287%200%29%27%3E%3Cellipse%20rx%3D%277%27%20ry%3D%273.9%27%20fill%3D%27%236CBF5E%27%20stroke%3D%27%23FFFDF6%27%20stroke-width%3D%27.9%27%2F%3E%3Cpath%20d%3D%27M-5%200H5%27%20stroke%3D%27%232F7A3C%27%20stroke-width%3D%27.7%27%20opacity%3D%27.6%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%2812.5%20142%29%20rotate%28-58.8%29%20translate%28-7%200%29%27%3E%3Cellipse%20rx%3D%277%27%20ry%3D%273.9%27%20fill%3D%27%234FAE55%27%20stroke%3D%27%23FFFDF6%27%20stroke-width%3D%27.9%27%2F%3E%3Cpath%20d%3D%27M-5%200H5%27%20stroke%3D%27%232F7A3C%27%20stroke-width%3D%27.7%27%20opacity%3D%27.6%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%2813.9%20176%29%20rotate%2843.1%29%20translate%287%200%29%27%3E%3Cellipse%20rx%3D%277%27%20ry%3D%273.9%27%20fill%3D%27%236CBF5E%27%20stroke%3D%27%23FFFDF6%27%20stroke-width%3D%27.9%27%2F%3E%3Cpath%20d%3D%27M-5%200H5%27%20stroke%3D%27%232F7A3C%27%20stroke-width%3D%27.7%27%20opacity%3D%27.6%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --roof-tile: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27320%27%20height%3D%2746%27%20viewBox%3D%270%200%20320%2046%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%200H320V22L320%2024.7L315%2025.4L310%2025.3L305%2023.4L300%2024.7L295%2024.7L290%2024.1L285%2026.8L280%2026.6L275%2026.4L270%2025.5L265%2027L260%2026.7L255%2026.4L250%2027.5L245%2025.7L240%2027.8L235%2028.2L230%2028.6L225%2027.1L220%2029.1L215%2029.1L210%2029.1L205%2029.4L200%2030.1L195%2029.4L190%2029.5L185%2027.9L180%2028.5L175%2028.7L170%2030.4L165%2029.3L160%2029.5L155%2030.9L150%2031L145%2032.2L140%2031.9L135%2032.1L130%2032.5L125%2031L120%2031.4L115%2031.5L110%2030.8L105%2033.3L100%2031L95%2032.4L90%2031.5L85%2032.9L80%2034.4L75%2034.8L70%2034L65%2034.7L60%2034.1L55%2033.8L50%2033.3L45%2035.9L40%2035.4L35%2036.3L30%2036L25%2034.6L20%2036.3L15%2035.4L10%2036.9L5%2036.9L0%2037.5Z%27%20fill%3D%27%23FFFDF6%27%2F%3E%3Cpath%20d%3D%27M0%200H320V24L320%2022.5L314%2023.6L308%2024.3L302%2025.5L296%2026.6L290%2024.5L284%2025.9L278%2025.7L272%2025.9L266%2027.1L260%2024.9L254%2026.4L248%2027L242%2026.6L236%2027.4L230%2026L224%2026.2L218%2027.8L212%2028.8L206%2029.4L200%2028.4L194%2027.7L188%2027.5L182%2028L176%2029.8L170%2028.9L164%2028.7L158%2031.4L152%2029.5L146%2032.1L140%2032.3L134%2030.9L128%2030L122%2030.6L116%2033.1L110%2033.1L104%2030.4L98%2031.7L92%2034L86%2034.3L80%2033L74%2032.9L68%2032.4L62%2033L56%2035.1L50%2032.6L44%2033.9L38%2034.6L32%2034.9L26%2036.5L20%2035.3L14%2034.5L8%2034.3L2%2036.6Z%27%20fill%3D%27%231A1F4F%27%2F%3E%3Cpath%20d%3D%27M0%200H320V24L320%2022.5L314%2023.6L308%2024.3L302%2025.5L296%2026.6L290%2024.5L284%2025.9L278%2025.7L272%2025.9L266%2027.1L260%2024.9L254%2026.4L248%2027L242%2026.6L236%2027.4L230%2026L224%2026.2L218%2027.8L212%2028.8L206%2029.4L200%2028.4L194%2027.7L188%2027.5L182%2028L176%2029.8L170%2028.9L164%2028.7L158%2031.4L152%2029.5L146%2032.1L140%2032.3L134%2030.9L128%2030L122%2030.6L116%2033.1L110%2033.1L104%2030.4L98%2031.7L92%2034L86%2034.3L80%2033L74%2032.9L68%2032.4L62%2033L56%2035.1L50%2032.6L44%2033.9L38%2034.6L32%2034.9L26%2036.5L20%2035.3L14%2034.5L8%2034.3L2%2036.6Z%27%20fill%3D%27%23000%27%20opacity%3D%27.08%27%2F%3E%3C%2Fsvg%3E");
  --cross: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%3E%3Cpath%20d%3D%27M18%2020Q50%2044%2084%2082M82%2016Q52%2046%2016%2084%27%20fill%3D%27none%27%20stroke%3D%27%23FFFDF6%27%20stroke-width%3D%2713%27%20stroke-linecap%3D%27round%27%20opacity%3D%27.9%27%2F%3E%3Cpath%20d%3D%27M18%2020Q50%2044%2084%2082M82%2016Q52%2046%2016%2084%27%20fill%3D%27none%27%20stroke%3D%27%23B8323A%27%20stroke-width%3D%278%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E");
  --dots: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2714%27%20height%3D%2718%27%3E%3Ccircle%20cx%3D%274%27%20cy%3D%279%27%20r%3D%271.6%27%20fill%3D%27%23fff%27%20opacity%3D%27.7%27%2F%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%274%27%20r%3D%271.1%27%20fill%3D%27%23fff%27%20opacity%3D%27.5%27%2F%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%2714%27%20r%3D%271.1%27%20fill%3D%27%23fff%27%20opacity%3D%27.5%27%2F%3E%3C%2Fsvg%3E");
  --twine: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%278%27%20viewBox%3D%270%200%2024%208%27%3E%3Cpath%20d%3D%27M0%204Q6%201%2012%204T24%204%27%20fill%3D%27none%27%20stroke%3D%27%23E9DFC3%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E");
  --girl: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%2731%2051%2038%2051%27%3E%3Cpath%20d%3D%27M33%20101Q34%2089%2043%2086L57%2086Q66%2089%2067%20101Z%27%20fill%3D%27%231F9C8C%27%20stroke%3D%27%23FFFDF6%27%20stroke-width%3D%27.8%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpath%20d%3D%27M43.5%2086L50%2093L56.5%2086L52%2084.5Q50%2086%2048%2084.5Z%27%20fill%3D%27%23FFFDF6%27%2F%3E%3Crect%20x%3D%2746.5%27%20y%3D%2778%27%20width%3D%277%27%20height%3D%278%27%20fill%3D%27%23E2A583%27%2F%3E%3Cpath%20d%3D%27M35%2074Q33%2054%2050%2053Q67%2054%2065%2074Q65%2082%2062%2085L38%2085Q35%2082%2035%2074Z%27%20fill%3D%27%2315122C%27%20stroke%3D%27%23FFFDF6%27%20stroke-width%3D%27.8%27%20stroke-linejoin%3D%27round%27%2F%3E%3Ccircle%20cx%3D%2750%27%20cy%3D%2770%27%20r%3D%2712.6%27%20fill%3D%27%23E2A583%27%20stroke%3D%27%23FFFDF6%27%20stroke-width%3D%27.7%27%2F%3E%3Cpath%20d%3D%27M36.5%2068Q37%2055%2050%2055Q63%2055%2063.5%2068Q58%2060%2050%2061Q42%2060%2036.5%2068Z%27%20fill%3D%27%2315122C%27%2F%3E%3Cpath%20d%3D%27M55%2056.5L62%2059L60.6%2062.6L53.6%2060.2Z%27%20fill%3D%27%23F6C445%27%20stroke%3D%27%23FFF3B0%27%20stroke-width%3D%27.5%27%2F%3E%3Ccircle%20cx%3D%2745.2%27%20cy%3D%2769.6%27%20r%3D%272.3%27%20fill%3D%27%23fff%27%2F%3E%3Ccircle%20cx%3D%2754.8%27%20cy%3D%2769.6%27%20r%3D%272.3%27%20fill%3D%27%23fff%27%2F%3E%3Ccircle%20cx%3D%2745.4%27%20cy%3D%2768.60000000000001%27%20r%3D%271.25%27%20fill%3D%27%2315122C%27%2F%3E%3Ccircle%20cx%3D%2755%27%20cy%3D%2768.60000000000001%27%20r%3D%271.25%27%20fill%3D%27%2315122C%27%2F%3E%3Ccircle%20cx%3D%2745.8%27%20cy%3D%2768.10000000000001%27%20r%3D%27.4%27%20fill%3D%27%23fff%27%2F%3E%3Ccircle%20cx%3D%2755.4%27%20cy%3D%2768.10000000000001%27%20r%3D%27.4%27%20fill%3D%27%23fff%27%2F%3E%3Ccircle%20cx%3D%2742%27%20cy%3D%2773.6%27%20r%3D%272.6%27%20fill%3D%27%23F29AA8%27%20opacity%3D%27.85%27%2F%3E%3Ccircle%20cx%3D%2758%27%20cy%3D%2773.6%27%20r%3D%272.6%27%20fill%3D%27%23F29AA8%27%20opacity%3D%27.85%27%2F%3E%3Cpath%20d%3D%27M47.4%2075.8Q50%2078.2%2052.6%2075.8%27%20fill%3D%27none%27%20stroke%3D%27%2315122C%27%20stroke-width%3D%27.8%27%20stroke-linecap%3D%27round%27%2F%3E%3Ccircle%20cx%3D%2755%27%20cy%3D%2798%27%20r%3D%272.8%27%20fill%3D%27%23E2A583%27%20stroke%3D%27%23FFFDF6%27%20stroke-width%3D%27.5%27%2F%3E%3Cpath%20d%3D%27M61.5%2088.5L52.5%20100.2%27%20stroke%3D%27%233A6FE0%27%20stroke-width%3D%272.6%27%20stroke-linecap%3D%27round%27%2F%3E%3Cpath%20d%3D%27M52.9%2099.6L51.6%20101.6%27%20stroke%3D%27%2315122C%27%20stroke-width%3D%271.4%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E");
  --girl-idle: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%2731%2051%2038%2051%27%3E%3Cpath%20d%3D%27M33%20101Q34%2089%2043%2086L57%2086Q66%2089%2067%20101Z%27%20fill%3D%27%231F9C8C%27%20stroke%3D%27%23FFFDF6%27%20stroke-width%3D%27.8%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpath%20d%3D%27M43.5%2086L50%2093L56.5%2086L52%2084.5Q50%2086%2048%2084.5Z%27%20fill%3D%27%23FFFDF6%27%2F%3E%3Crect%20x%3D%2746.5%27%20y%3D%2778%27%20width%3D%277%27%20height%3D%278%27%20fill%3D%27%23E2A583%27%2F%3E%3Cpath%20d%3D%27M35%2074Q33%2054%2050%2053Q67%2054%2065%2074Q65%2082%2062%2085L38%2085Q35%2082%2035%2074Z%27%20fill%3D%27%2315122C%27%20stroke%3D%27%23FFFDF6%27%20stroke-width%3D%27.8%27%20stroke-linejoin%3D%27round%27%2F%3E%3Ccircle%20cx%3D%2750%27%20cy%3D%2770%27%20r%3D%2712.6%27%20fill%3D%27%23E2A583%27%20stroke%3D%27%23FFFDF6%27%20stroke-width%3D%27.7%27%2F%3E%3Cpath%20d%3D%27M36.5%2068Q37%2055%2050%2055Q63%2055%2063.5%2068Q58%2060%2050%2061Q42%2060%2036.5%2068Z%27%20fill%3D%27%2315122C%27%2F%3E%3Cpath%20d%3D%27M55%2056.5L62%2059L60.6%2062.6L53.6%2060.2Z%27%20fill%3D%27%23F6C445%27%20stroke%3D%27%23FFF3B0%27%20stroke-width%3D%27.5%27%2F%3E%3Ccircle%20cx%3D%2745.2%27%20cy%3D%2769.6%27%20r%3D%272.3%27%20fill%3D%27%23fff%27%2F%3E%3Ccircle%20cx%3D%2754.8%27%20cy%3D%2769.6%27%20r%3D%272.3%27%20fill%3D%27%23fff%27%2F%3E%3Ccircle%20cx%3D%2745.4%27%20cy%3D%2768.60000000000001%27%20r%3D%271.25%27%20fill%3D%27%2315122C%27%2F%3E%3Ccircle%20cx%3D%2755%27%20cy%3D%2768.60000000000001%27%20r%3D%271.25%27%20fill%3D%27%2315122C%27%2F%3E%3Ccircle%20cx%3D%2745.8%27%20cy%3D%2768.10000000000001%27%20r%3D%27.4%27%20fill%3D%27%23fff%27%2F%3E%3Ccircle%20cx%3D%2755.4%27%20cy%3D%2768.10000000000001%27%20r%3D%27.4%27%20fill%3D%27%23fff%27%2F%3E%3Ccircle%20cx%3D%2742%27%20cy%3D%2773.6%27%20r%3D%272.6%27%20fill%3D%27%23F29AA8%27%20opacity%3D%27.85%27%2F%3E%3Ccircle%20cx%3D%2758%27%20cy%3D%2773.6%27%20r%3D%272.6%27%20fill%3D%27%23F29AA8%27%20opacity%3D%27.85%27%2F%3E%3Cpath%20d%3D%27M47.4%2075.8Q50%2078.2%2052.6%2075.8%27%20fill%3D%27none%27%20stroke%3D%27%2315122C%27%20stroke-width%3D%27.8%27%20stroke-linecap%3D%27round%27%2F%3E%3Ccircle%20cx%3D%2755%27%20cy%3D%2798%27%20r%3D%272.8%27%20fill%3D%27%23E2A583%27%20stroke%3D%27%23FFFDF6%27%20stroke-width%3D%27.5%27%2F%3E%3Cpath%20d%3D%27M61.5%2088.5L52.5%20100.2%27%20stroke%3D%27%233A6FE0%27%20stroke-width%3D%272.6%27%20stroke-linecap%3D%27round%27%2F%3E%3Cpath%20d%3D%27M52.9%2099.6L51.6%20101.6%27%20stroke%3D%27%2315122C%27%20stroke-width%3D%271.4%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E");
  --girl-happy: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%2731%2051%2038%2051%27%3E%3Cpath%20d%3D%27M33%20101Q34%2089%2043%2086L57%2086Q66%2089%2067%20101Z%27%20fill%3D%27%231F9C8C%27%20stroke%3D%27%23FFFDF6%27%20stroke-width%3D%27.8%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpath%20d%3D%27M43.5%2086L50%2093L56.5%2086L52%2084.5Q50%2086%2048%2084.5Z%27%20fill%3D%27%23FFFDF6%27%2F%3E%3Crect%20x%3D%2746.5%27%20y%3D%2778%27%20width%3D%277%27%20height%3D%278%27%20fill%3D%27%23E2A583%27%2F%3E%3Cpath%20d%3D%27M35%2074Q33%2054%2050%2053Q67%2054%2065%2074Q65%2082%2062%2085L38%2085Q35%2082%2035%2074Z%27%20fill%3D%27%2315122C%27%20stroke%3D%27%23FFFDF6%27%20stroke-width%3D%27.8%27%20stroke-linejoin%3D%27round%27%2F%3E%3Ccircle%20cx%3D%2750%27%20cy%3D%2770%27%20r%3D%2712.6%27%20fill%3D%27%23E2A583%27%20stroke%3D%27%23FFFDF6%27%20stroke-width%3D%27.7%27%2F%3E%3Cpath%20d%3D%27M36.5%2068Q37%2055%2050%2055Q63%2055%2063.5%2068Q58%2060%2050%2061Q42%2060%2036.5%2068Z%27%20fill%3D%27%2315122C%27%2F%3E%3Cpath%20d%3D%27M55%2056.5L62%2059L60.6%2062.6L53.6%2060.2Z%27%20fill%3D%27%23F6C445%27%20stroke%3D%27%23FFF3B0%27%20stroke-width%3D%27.5%27%2F%3E%3Cpath%20d%3D%27M42.8%2070.2Q45.2%2066.4%2047.6%2070.2M52.4%2070.2Q54.8%2066.4%2057.2%2070.2%27%20fill%3D%27none%27%20stroke%3D%27%2315122C%27%20stroke-width%3D%271%27%20stroke-linecap%3D%27round%27%2F%3E%3Ccircle%20cx%3D%2742%27%20cy%3D%2773.6%27%20r%3D%272.6%27%20fill%3D%27%23F29AA8%27%20opacity%3D%27.85%27%2F%3E%3Ccircle%20cx%3D%2758%27%20cy%3D%2773.6%27%20r%3D%272.6%27%20fill%3D%27%23F29AA8%27%20opacity%3D%27.85%27%2F%3E%3Cpath%20d%3D%27M46.4%2074.6Q50%2080.6%2053.6%2074.6Z%27%20fill%3D%27%2315122C%27%2F%3E%3Ccircle%20cx%3D%2755%27%20cy%3D%2798%27%20r%3D%272.8%27%20fill%3D%27%23E2A583%27%20stroke%3D%27%23FFFDF6%27%20stroke-width%3D%27.5%27%2F%3E%3Cpath%20d%3D%27M61.5%2088.5L52.5%20100.2%27%20stroke%3D%27%233A6FE0%27%20stroke-width%3D%272.6%27%20stroke-linecap%3D%27round%27%2F%3E%3Cpath%20d%3D%27M52.9%2099.6L51.6%20101.6%27%20stroke%3D%27%2315122C%27%20stroke-width%3D%271.4%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E");
  --girl-wow: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%2731%2051%2038%2051%27%3E%3Cpath%20d%3D%27M33%20101Q34%2089%2043%2086L57%2086Q66%2089%2067%20101Z%27%20fill%3D%27%231F9C8C%27%20stroke%3D%27%23FFFDF6%27%20stroke-width%3D%27.8%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpath%20d%3D%27M43.5%2086L50%2093L56.5%2086L52%2084.5Q50%2086%2048%2084.5Z%27%20fill%3D%27%23FFFDF6%27%2F%3E%3Crect%20x%3D%2746.5%27%20y%3D%2778%27%20width%3D%277%27%20height%3D%278%27%20fill%3D%27%23E2A583%27%2F%3E%3Cpath%20d%3D%27M35%2074Q33%2054%2050%2053Q67%2054%2065%2074Q65%2082%2062%2085L38%2085Q35%2082%2035%2074Z%27%20fill%3D%27%2315122C%27%20stroke%3D%27%23FFFDF6%27%20stroke-width%3D%27.8%27%20stroke-linejoin%3D%27round%27%2F%3E%3Ccircle%20cx%3D%2750%27%20cy%3D%2770%27%20r%3D%2712.6%27%20fill%3D%27%23E2A583%27%20stroke%3D%27%23FFFDF6%27%20stroke-width%3D%27.7%27%2F%3E%3Cpath%20d%3D%27M36.5%2068Q37%2055%2050%2055Q63%2055%2063.5%2068Q58%2060%2050%2061Q42%2060%2036.5%2068Z%27%20fill%3D%27%2315122C%27%2F%3E%3Cpath%20d%3D%27M55%2056.5L62%2059L60.6%2062.6L53.6%2060.2Z%27%20fill%3D%27%23F6C445%27%20stroke%3D%27%23FFF3B0%27%20stroke-width%3D%27.5%27%2F%3E%3Ccircle%20cx%3D%2745.2%27%20cy%3D%2769.8%27%20r%3D%272.7%27%20fill%3D%27%23fff%27%2F%3E%3Ccircle%20cx%3D%2754.8%27%20cy%3D%2769.8%27%20r%3D%272.7%27%20fill%3D%27%23fff%27%2F%3E%3Ccircle%20cx%3D%2745.2%27%20cy%3D%2769.8%27%20r%3D%271.6%27%20fill%3D%27%2315122C%27%2F%3E%3Ccircle%20cx%3D%2754.8%27%20cy%3D%2769.8%27%20r%3D%271.6%27%20fill%3D%27%2315122C%27%2F%3E%3Ccircle%20cx%3D%2745.8%27%20cy%3D%2769.2%27%20r%3D%27.5%27%20fill%3D%27%23fff%27%2F%3E%3Ccircle%20cx%3D%2755.4%27%20cy%3D%2769.2%27%20r%3D%27.5%27%20fill%3D%27%23fff%27%2F%3E%3Cpath%20d%3D%27M42.6%2064.6Q45.2%2062.2%2047.8%2064M52.2%2064Q54.8%2062.2%2057.4%2064.6%27%20fill%3D%27none%27%20stroke%3D%27%2315122C%27%20stroke-width%3D%27.9%27%20stroke-linecap%3D%27round%27%2F%3E%3Ccircle%20cx%3D%2742%27%20cy%3D%2773.6%27%20r%3D%272.6%27%20fill%3D%27%23F29AA8%27%20opacity%3D%27.85%27%2F%3E%3Ccircle%20cx%3D%2758%27%20cy%3D%2773.6%27%20r%3D%272.6%27%20fill%3D%27%23F29AA8%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%2750%27%20cy%3D%2777%27%20rx%3D%271.5%27%20ry%3D%271.9%27%20fill%3D%27%2315122C%27%2F%3E%3Ccircle%20cx%3D%2755%27%20cy%3D%2798%27%20r%3D%272.8%27%20fill%3D%27%23E2A583%27%20stroke%3D%27%23FFFDF6%27%20stroke-width%3D%27.5%27%2F%3E%3Cpath%20d%3D%27M61.5%2088.5L52.5%20100.2%27%20stroke%3D%27%233A6FE0%27%20stroke-width%3D%272.6%27%20stroke-linecap%3D%27round%27%2F%3E%3Cpath%20d%3D%27M52.9%2099.6L51.6%20101.6%27%20stroke%3D%27%2315122C%27%20stroke-width%3D%271.4%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E");
  --girl-sleepy: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%2731%2051%2038%2051%27%3E%3Cpath%20d%3D%27M33%20101Q34%2089%2043%2086L57%2086Q66%2089%2067%20101Z%27%20fill%3D%27%231F9C8C%27%20stroke%3D%27%23FFFDF6%27%20stroke-width%3D%27.8%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpath%20d%3D%27M43.5%2086L50%2093L56.5%2086L52%2084.5Q50%2086%2048%2084.5Z%27%20fill%3D%27%23FFFDF6%27%2F%3E%3Crect%20x%3D%2746.5%27%20y%3D%2778%27%20width%3D%277%27%20height%3D%278%27%20fill%3D%27%23E2A583%27%2F%3E%3Cpath%20d%3D%27M35%2074Q33%2054%2050%2053Q67%2054%2065%2074Q65%2082%2062%2085L38%2085Q35%2082%2035%2074Z%27%20fill%3D%27%2315122C%27%20stroke%3D%27%23FFFDF6%27%20stroke-width%3D%27.8%27%20stroke-linejoin%3D%27round%27%2F%3E%3Ccircle%20cx%3D%2750%27%20cy%3D%2770%27%20r%3D%2712.6%27%20fill%3D%27%23E2A583%27%20stroke%3D%27%23FFFDF6%27%20stroke-width%3D%27.7%27%2F%3E%3Cpath%20d%3D%27M36.5%2068Q37%2055%2050%2055Q63%2055%2063.5%2068Q58%2060%2050%2061Q42%2060%2036.5%2068Z%27%20fill%3D%27%2315122C%27%2F%3E%3Cpath%20d%3D%27M55%2056.5L62%2059L60.6%2062.6L53.6%2060.2Z%27%20fill%3D%27%23F6C445%27%20stroke%3D%27%23FFF3B0%27%20stroke-width%3D%27.5%27%2F%3E%3Cpath%20d%3D%27M42.8%2069.4Q45.2%2072%2047.6%2069.4M52.4%2069.4Q54.8%2072%2057.2%2069.4%27%20fill%3D%27none%27%20stroke%3D%27%2315122C%27%20stroke-width%3D%271%27%20stroke-linecap%3D%27round%27%2F%3E%3Cpath%20d%3D%27M62.4%2056.4h4.2l-4.2%205h4.2M67%2051.4h2.8l-2.8%203.4h2.8%27%20fill%3D%27none%27%20stroke%3D%27%236B4A05%27%20stroke-width%3D%27.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3Ccircle%20cx%3D%2742%27%20cy%3D%2773.6%27%20r%3D%272.6%27%20fill%3D%27%23F29AA8%27%20opacity%3D%27.85%27%2F%3E%3Ccircle%20cx%3D%2758%27%20cy%3D%2773.6%27%20r%3D%272.6%27%20fill%3D%27%23F29AA8%27%20opacity%3D%27.85%27%2F%3E%3Cpath%20d%3D%27M47.8%2076Q50%2077.2%2052.2%2076%27%20fill%3D%27none%27%20stroke%3D%27%2315122C%27%20stroke-width%3D%27.8%27%20stroke-linecap%3D%27round%27%2F%3E%3Ccircle%20cx%3D%2755%27%20cy%3D%2798%27%20r%3D%272.8%27%20fill%3D%27%23E2A583%27%20stroke%3D%27%23FFFDF6%27%20stroke-width%3D%27.5%27%2F%3E%3Cpath%20d%3D%27M61.5%2088.5L52.5%20100.2%27%20stroke%3D%27%233A6FE0%27%20stroke-width%3D%272.6%27%20stroke-linecap%3D%27round%27%2F%3E%3Cpath%20d%3D%27M52.9%2099.6L51.6%20101.6%27%20stroke%3D%27%2315122C%27%20stroke-width%3D%271.4%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E");
  --girl-look: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%2731%2051%2038%2051%27%3E%3Cpath%20d%3D%27M33%20101Q34%2089%2043%2086L57%2086Q66%2089%2067%20101Z%27%20fill%3D%27%231F9C8C%27%20stroke%3D%27%23FFFDF6%27%20stroke-width%3D%27.8%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpath%20d%3D%27M43.5%2086L50%2093L56.5%2086L52%2084.5Q50%2086%2048%2084.5Z%27%20fill%3D%27%23FFFDF6%27%2F%3E%3Crect%20x%3D%2746.5%27%20y%3D%2778%27%20width%3D%277%27%20height%3D%278%27%20fill%3D%27%23E2A583%27%2F%3E%3Cpath%20d%3D%27M35%2074Q33%2054%2050%2053Q67%2054%2065%2074Q65%2082%2062%2085L38%2085Q35%2082%2035%2074Z%27%20fill%3D%27%2315122C%27%20stroke%3D%27%23FFFDF6%27%20stroke-width%3D%27.8%27%20stroke-linejoin%3D%27round%27%2F%3E%3Ccircle%20cx%3D%2750%27%20cy%3D%2770%27%20r%3D%2712.6%27%20fill%3D%27%23E2A583%27%20stroke%3D%27%23FFFDF6%27%20stroke-width%3D%27.7%27%2F%3E%3Cpath%20d%3D%27M36.5%2068Q37%2055%2050%2055Q63%2055%2063.5%2068Q58%2060%2050%2061Q42%2060%2036.5%2068Z%27%20fill%3D%27%2315122C%27%2F%3E%3Cpath%20d%3D%27M55%2056.5L62%2059L60.6%2062.6L53.6%2060.2Z%27%20fill%3D%27%23F6C445%27%20stroke%3D%27%23FFF3B0%27%20stroke-width%3D%27.5%27%2F%3E%3Ccircle%20cx%3D%2745.7%27%20cy%3D%2769.6%27%20r%3D%272.3%27%20fill%3D%27%23fff%27%2F%3E%3Ccircle%20cx%3D%2755.3%27%20cy%3D%2769.6%27%20r%3D%272.3%27%20fill%3D%27%23fff%27%2F%3E%3Ccircle%20cx%3D%2746.05%27%20cy%3D%2768.15%27%20r%3D%271.25%27%20fill%3D%27%2315122C%27%2F%3E%3Ccircle%20cx%3D%2755.65%27%20cy%3D%2768.15%27%20r%3D%271.25%27%20fill%3D%27%2315122C%27%2F%3E%3Ccircle%20cx%3D%2746.449999999999996%27%20cy%3D%2767.65%27%20r%3D%27.4%27%20fill%3D%27%23fff%27%2F%3E%3Ccircle%20cx%3D%2756.05%27%20cy%3D%2767.65%27%20r%3D%27.4%27%20fill%3D%27%23fff%27%2F%3E%3Ccircle%20cx%3D%2742%27%20cy%3D%2773.6%27%20r%3D%272.6%27%20fill%3D%27%23F29AA8%27%20opacity%3D%27.85%27%2F%3E%3Ccircle%20cx%3D%2758%27%20cy%3D%2773.6%27%20r%3D%272.6%27%20fill%3D%27%23F29AA8%27%20opacity%3D%27.85%27%2F%3E%3Cpath%20d%3D%27M47.4%2075.8Q50%2078.2%2052.6%2075.8%27%20fill%3D%27none%27%20stroke%3D%27%2315122C%27%20stroke-width%3D%27.8%27%20stroke-linecap%3D%27round%27%2F%3E%3Ccircle%20cx%3D%2755%27%20cy%3D%2798%27%20r%3D%272.8%27%20fill%3D%27%23E2A583%27%20stroke%3D%27%23FFFDF6%27%20stroke-width%3D%27.5%27%2F%3E%3Cpath%20d%3D%27M61.5%2088.5L52.5%20100.2%27%20stroke%3D%27%233A6FE0%27%20stroke-width%3D%272.6%27%20stroke-linecap%3D%27round%27%2F%3E%3Cpath%20d%3D%27M52.9%2099.6L51.6%20101.6%27%20stroke%3D%27%2315122C%27%20stroke-width%3D%271.4%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E");
  --box-max: 2.35rem;                    /* number-fit: .box-num / .score-value shrink by [data-len] using the width they actually get */
  --box-inner: calc(var(--sidebar-w) / 2 - 76px);
  --score-max: 2.6rem;
  --score-inner: calc(var(--sidebar-w) - 124px);

  /* torn-edge clip polygons (a = paper, b = the white rim underneath: different jitter so the rim looks fibrous) */
  --torn-a: polygon(0 2.7px,2.2% 3.5px,4.3% 0,6.5% 1.4px,8.7% 0.7px,10.9% 0.6px,13% 2.5px,15.2% 0.3px,17.4% 2.1px,19.6% 3.7px,21.7% 4.2px,23.9% 3.3px,26.1% 5.3px,28.3% 2.2px,30.4% 6.1px,32.6% 4.7px,34.8% 0,37% 0.2px,39.1% 1.2px,41.3% 0,43.5% 2.8px,45.7% 4px,47.8% 2.1px,50% 1.5px,52.2% 4.6px,54.3% 8.3px,56.5% 4.5px,58.7% 3.2px,60.9% 7.1px,63% 2.2px,65.2% 0.9px,67.4% 0.6px,69.6% 0,71.7% 1.5px,73.9% 0,76.1% 0.4px,78.3% 3.5px,80.4% 1.7px,82.6% 3.3px,84.8% 2.3px,87% 1px,89.1% 2.7px,91.3% 6.2px,93.5% 3.4px,95.7% 0.4px,97.8% 2.6px,calc(100% - 2.5px) 0,calc(100% - 3px) 3.8%,calc(100% - 4.5px) 7.7%,calc(100% - 6.2px) 11.5%,calc(100% - 0.5px) 15.4%,calc(100% - 2.2px) 19.2%,100% 23.1%,calc(100% - 0.3px) 26.9%,calc(100% - 6.2px) 30.8%,calc(100% - 4px) 34.6%,calc(100% - 4.4px) 38.5%,calc(100% - 4.6px) 42.3%,calc(100% - 0.2px) 46.2%,calc(100% - 0.7px) 50%,calc(100% - 2.5px) 53.8%,calc(100% - 6.3px) 57.7%,calc(100% - 4.1px) 61.5%,calc(100% - 4.3px) 65.4%,calc(100% - 1px) 69.2%,calc(100% - 3.3px) 73.1%,calc(100% - 6.8px) 76.9%,calc(100% - 4px) 80.8%,calc(100% - 1.9px) 84.6%,calc(100% - 3.5px) 88.5%,100% 92.3%,calc(100% - 3.9px) 96.2%,100% calc(100% - 4.4px),97.8% calc(100% - 1.1px),95.7% calc(100% - 3px),93.5% calc(100% - 0.3px),91.3% calc(100% - 0.2px),89.1% 100%,87% 100%,84.8% calc(100% - 0.3px),82.6% calc(100% - 5.5px),80.4% calc(100% - 0.6px),78.3% calc(100% - 1.1px),76.1% calc(100% - 1.8px),73.9% calc(100% - 5.5px),71.7% calc(100% - 5.4px),69.6% calc(100% - 1.1px),67.4% calc(100% - 1.4px),65.2% calc(100% - 1.4px),63% calc(100% - 3.8px),60.9% calc(100% - 2.4px),58.7% calc(100% - 2.2px),56.5% calc(100% - 0.1px),54.3% 100%,52.2% 100%,50% 100%,47.8% calc(100% - 5.1px),45.7% calc(100% - 3.2px),43.5% calc(100% - 1.1px),41.3% calc(100% - 5.2px),39.1% calc(100% - 6.3px),37% calc(100% - 5.4px),34.8% calc(100% - 5.2px),32.6% calc(100% - 1.6px),30.4% calc(100% - 1.2px),28.3% 100%,26.1% 100%,23.9% calc(100% - 1px),21.7% 100%,19.6% 100%,17.4% calc(100% - 4.6px),15.2% calc(100% - 2px),13% calc(100% - 2.5px),10.9% calc(100% - 5.8px),8.7% calc(100% - 3.5px),6.5% calc(100% - 2.8px),4.3% calc(100% - 3.5px),2.2% calc(100% - 2.8px),3.2px 100%,1.6px 96.2%,0 92.3%,2.4px 88.5%,0 84.6%,2.7px 80.8%,2.6px 76.9%,2.4px 73.1%,6px 69.2%,4.8px 65.4%,0.9px 61.5%,2.9px 57.7%,3.3px 53.8%,0 50%,0.5px 46.2%,2.5px 42.3%,5.7px 38.5%,2.2px 34.6%,4.8px 30.8%,0.3px 26.9%,0 23.1%,2.4px 19.2%,3.2px 15.4%,0 11.5%,5.7px 7.7%,1.9px 3.8%);
  --torn-b: polygon(0 2.4px,2.2% 2.8px,4.3% 2.6px,6.5% 5.9px,8.7% 0.5px,10.9% 3.8px,13% 2.2px,15.2% 0,17.4% 3.3px,19.6% 0.2px,21.7% 0,23.9% 2.7px,26.1% 0,28.3% 0,30.4% 1.4px,32.6% 2.8px,34.8% 1.7px,37% 3.1px,39.1% 3.4px,41.3% 0.1px,43.5% 5.7px,45.7% 2.5px,47.8% 1.4px,50% 1.9px,52.2% 4px,54.3% 1.5px,56.5% 3.5px,58.7% 2.9px,60.9% 4.7px,63% 4.5px,65.2% 4px,67.4% 3.2px,69.6% 0.9px,71.7% 0.9px,73.9% 0,76.1% 0,78.3% 2.6px,80.4% 0.7px,82.6% 0,84.8% 0.6px,87% 1px,89.1% 0.2px,91.3% 4.4px,93.5% 0.7px,95.7% 2.2px,97.8% 3.8px,calc(100% - 1.2px) 0,calc(100% - 2.5px) 3.8%,100% 7.7%,calc(100% - 3.5px) 11.5%,calc(100% - 5px) 15.4%,calc(100% - 4.8px) 19.2%,calc(100% - 0.2px) 23.1%,calc(100% - 1.4px) 26.9%,calc(100% - 1.3px) 30.8%,calc(100% - 1.6px) 34.6%,calc(100% - 1.8px) 38.5%,calc(100% - 2px) 42.3%,calc(100% - 3px) 46.2%,calc(100% - 4.9px) 50%,calc(100% - 1.4px) 53.8%,calc(100% - 4px) 57.7%,calc(100% - 0.8px) 61.5%,calc(100% - 1.9px) 65.4%,calc(100% - 3.7px) 69.2%,100% 73.1%,calc(100% - 1.6px) 76.9%,calc(100% - 2.2px) 80.8%,calc(100% - 5.6px) 84.6%,calc(100% - 3.9px) 88.5%,calc(100% - 0.4px) 92.3%,100% 96.2%,100% calc(100% - 1.6px),97.8% calc(100% - 3px),95.7% calc(100% - 1px),93.5% calc(100% - 3.1px),91.3% calc(100% - 3.4px),89.1% calc(100% - 2.4px),87% calc(100% - 2.8px),84.8% calc(100% - 2.8px),82.6% calc(100% - 8.5px),80.4% calc(100% - 3.4px),78.3% 100%,76.1% calc(100% - 3px),73.9% calc(100% - 2.2px),71.7% calc(100% - 0.8px),69.6% calc(100% - 2.6px),67.4% calc(100% - 2.3px),65.2% calc(100% - 2.6px),63% calc(100% - 5.7px),60.9% calc(100% - 5.1px),58.7% calc(100% - 6.4px),56.5% calc(100% - 0.3px),54.3% calc(100% - 1.2px),52.2% 100%,50% 100%,47.8% calc(100% - 3.3px),45.7% calc(100% - 0.7px),43.5% calc(100% - 2.8px),41.3% calc(100% - 5.2px),39.1% calc(100% - 6.1px),37% calc(100% - 1.6px),34.8% calc(100% - 4.8px),32.6% calc(100% - 0.2px),30.4% calc(100% - 3.4px),28.3% calc(100% - 0.7px),26.1% calc(100% - 0.1px),23.9% calc(100% - 1.4px),21.7% calc(100% - 1.8px),19.6% calc(100% - 3.9px),17.4% calc(100% - 2.1px),15.2% calc(100% - 3px),13% calc(100% - 2px),10.9% calc(100% - 2.7px),8.7% 100%,6.5% 100%,4.3% 100%,2.2% calc(100% - 2.2px),2.1px 100%,4.3px 96.2%,4.4px 92.3%,1.3px 88.5%,1.4px 84.6%,0 80.8%,4.5px 76.9%,3.2px 73.1%,4.7px 69.2%,2.8px 65.4%,1.6px 61.5%,1.5px 57.7%,4.9px 53.8%,3.2px 50%,3.5px 46.2%,0 42.3%,0 38.5%,3.3px 34.6%,9px 30.8%,4.9px 26.9%,2.1px 23.1%,0 19.2%,0 15.4%,1.2px 11.5%,2.2px 7.7%,5px 3.8%);
  --torn-s-a: polygon(0 0,5.6% 0,11.1% 2.3px,16.7% 3px,22.2% 1.8px,27.8% 2.9px,33.3% 0.4px,38.9% 1.3px,44.4% 2.3px,50% 0,55.6% 0,61.1% 0.2px,66.7% 3.4px,72.2% 0.2px,77.8% 0,83.3% 2px,88.9% 1.2px,94.4% 3px,calc(100% - 1.5px) 0,calc(100% - 0.7px) 16.7%,calc(100% - 0.9px) 33.3%,calc(100% - 2.4px) 50%,100% 66.7%,calc(100% - 1.2px) 83.3%,100% 100%,94.4% calc(100% - 0.5px),88.9% calc(100% - 0.3px),83.3% calc(100% - 2.7px),77.8% calc(100% - 3.6px),72.2% calc(100% - 1.9px),66.7% 100%,61.1% 100%,55.6% calc(100% - 1.9px),50% calc(100% - 1.3px),44.4% calc(100% - 2.7px),38.9% calc(100% - 3.3px),33.3% calc(100% - 1.8px),27.8% calc(100% - 0.6px),22.2% 100%,16.7% calc(100% - 1.2px),11.1% 100%,5.6% calc(100% - 2px),1px 100%,0 83.3%,1.9px 66.7%,2.7px 50%,1px 33.3%,0.3px 16.7%);
  --torn-s-b: polygon(0 0.5px,5.6% 0,11.1% 0.1px,16.7% 0.5px,22.2% 2.2px,27.8% 1px,33.3% 1.8px,38.9% 0.6px,44.4% 1.1px,50% 0.5px,55.6% 0.6px,61.1% 2px,66.7% 0.8px,72.2% 1.9px,77.8% 0.5px,83.3% 2.1px,88.9% 2px,94.4% 0,calc(100% - 2.2px) 0,calc(100% - 1.1px) 16.7%,calc(100% - 2.1px) 33.3%,calc(100% - 0.5px) 50%,calc(100% - 0.2px) 66.7%,calc(100% - 1.4px) 83.3%,100% calc(100% - 2.5px),94.4% calc(100% - 2.4px),88.9% calc(100% - 1.9px),83.3% calc(100% - 2px),77.8% 100%,72.2% calc(100% - 1.4px),66.7% calc(100% - 1.5px),61.1% calc(100% - 2.4px),55.6% calc(100% - 3.1px),50% calc(100% - 0.7px),44.4% 100%,38.9% 100%,33.3% calc(100% - 0.4px),27.8% calc(100% - 1.6px),22.2% calc(100% - 0.5px),16.7% calc(100% - 3.5px),11.1% calc(100% - 1.4px),5.6% calc(100% - 1.6px),1.2px 100%,0.6px 83.3%,1.2px 66.7%,0.7px 50%,0.8px 33.3%,0.5px 16.7%);
  --torn-s-c: polygon(0 0.9px,7.1% 2.3px,14.3% 2.9px,21.4% 0,28.6% 1.3px,35.7% 0.4px,42.9% 1.4px,50% 1px,57.1% 1.6px,64.3% 0,71.4% 0.4px,78.6% 0.9px,85.7% 3.2px,92.9% 1.8px,calc(100% - 1.9px) 0,calc(100% - 2px) 20%,calc(100% - 0.6px) 40%,calc(100% - 1px) 60%,calc(100% - 0.7px) 80%,100% calc(100% - 1.4px),92.9% calc(100% - 0.3px),85.7% calc(100% - 0.7px),78.6% 100%,71.4% calc(100% - 1.7px),64.3% calc(100% - 1.4px),57.1% calc(100% - 0.3px),50% calc(100% - 0.6px),42.9% calc(100% - 2px),35.7% calc(100% - 3px),28.6% calc(100% - 1.5px),21.4% calc(100% - 0.6px),14.3% calc(100% - 0.4px),7.1% calc(100% - 2.1px),1.4px 100%,0.5px 80%,1.2px 60%,1.3px 40%,0.7px 20%);
  --torn-wall-a: polygon(0 0,50% 0,calc(100% - 6.4px) 0,calc(100% - 0.8px) 1.4%,100% 2.9%,calc(100% - 1.3px) 4.3%,100% 5.7%,calc(100% - 1px) 7.1%,calc(100% - 3.8px) 8.6%,calc(100% - 2.7px) 10%,calc(100% - 2.8px) 11.4%,calc(100% - 4.1px) 12.9%,100% 14.3%,calc(100% - 1.2px) 15.7%,calc(100% - 4.4px) 17.1%,calc(100% - 4.3px) 18.6%,calc(100% - 2.3px) 20%,calc(100% - 4.9px) 21.4%,calc(100% - 6.1px) 22.9%,calc(100% - 5.1px) 24.3%,calc(100% - 4.6px) 25.7%,calc(100% - 1.4px) 27.1%,calc(100% - 4.5px) 28.6%,calc(100% - 3.9px) 30%,calc(100% - 4.5px) 31.4%,calc(100% - 6.3px) 32.9%,calc(100% - 5.6px) 34.3%,calc(100% - 5.7px) 35.7%,calc(100% - 4.1px) 37.1%,calc(100% - 6.7px) 38.6%,calc(100% - 5.2px) 40%,calc(100% - 8.8px) 41.4%,calc(100% - 3.9px) 42.9%,calc(100% - 2.4px) 44.3%,calc(100% - 1.8px) 45.7%,calc(100% - 3.3px) 47.1%,calc(100% - 1.9px) 48.6%,calc(100% - 0.2px) 50%,calc(100% - 3.1px) 51.4%,calc(100% - 8.2px) 52.9%,100% 54.3%,calc(100% - 3.3px) 55.7%,calc(100% - 4.5px) 57.1%,calc(100% - 4.3px) 58.6%,calc(100% - 3.6px) 60%,calc(100% - 3px) 61.4%,calc(100% - 1.7px) 62.9%,calc(100% - 0.2px) 64.3%,100% 65.7%,calc(100% - 1.3px) 67.1%,calc(100% - 9.7px) 68.6%,100% 70%,calc(100% - 9.4px) 71.4%,100% 72.9%,calc(100% - 5.1px) 74.3%,calc(100% - 3.5px) 75.7%,calc(100% - 3.3px) 77.1%,calc(100% - 4.7px) 78.6%,calc(100% - 4.9px) 80%,calc(100% - 1.1px) 81.4%,calc(100% - 4.1px) 82.9%,calc(100% - 4.1px) 84.3%,calc(100% - 2.6px) 85.7%,calc(100% - 1.3px) 87.1%,calc(100% - 2.1px) 88.6%,calc(100% - 4.3px) 90%,calc(100% - 4.7px) 91.4%,calc(100% - 10.3px) 92.9%,calc(100% - 6.3px) 94.3%,calc(100% - 4.2px) 95.7%,calc(100% - 11px) 97.1%,calc(100% - 2.3px) 98.6%,100% 100%,50% 100%,0 100%,0 98.6%,0 97.1%,0 95.7%,0 94.3%,0 92.9%,0 91.4%,0 90%,0 88.6%,0 87.1%,0 85.7%,0 84.3%,0 82.9%,0 81.4%,0 80%,0 78.6%,0 77.1%,0 75.7%,0 74.3%,0 72.9%,0 71.4%,0 70%,0 68.6%,0 67.1%,0 65.7%,0 64.3%,0 62.9%,0 61.4%,0 60%,0 58.6%,0 57.1%,0 55.7%,0 54.3%,0 52.9%,0 51.4%,0 50%,0 48.6%,0 47.1%,0 45.7%,0 44.3%,0 42.9%,0 41.4%,0 40%,0 38.6%,0 37.1%,0 35.7%,0 34.3%,0 32.9%,0 31.4%,0 30%,0 28.6%,0 27.1%,0 25.7%,0 24.3%,0 22.9%,0 21.4%,0 20%,0 18.6%,0 17.1%,0 15.7%,0 14.3%,0 12.9%,0 11.4%,0 10%,0 8.6%,0 7.1%,0 5.7%,0 4.3%,0 2.9%,0 1.4%);
  --torn-wall-b: polygon(0 0,50% 0,calc(100% - 1.6px) 0,calc(100% - 2.8px) 1.4%,calc(100% - 3.7px) 2.9%,calc(100% - 5.3px) 4.3%,calc(100% - 0.8px) 5.7%,calc(100% - 1.1px) 7.1%,calc(100% - 3.6px) 8.6%,100% 10%,100% 11.4%,calc(100% - 0.8px) 12.9%,calc(100% - 4.4px) 14.3%,calc(100% - 0.1px) 15.7%,100% 17.1%,100% 18.6%,100% 20%,calc(100% - 2.3px) 21.4%,calc(100% - 1.8px) 22.9%,calc(100% - 1.9px) 24.3%,calc(100% - 0.8px) 25.7%,calc(100% - 1.3px) 27.1%,calc(100% - 2.5px) 28.6%,calc(100% - 0.7px) 30%,calc(100% - 3.6px) 31.4%,calc(100% - 1.6px) 32.9%,calc(100% - 0.9px) 34.3%,calc(100% - 2.4px) 35.7%,calc(100% - 1.7px) 37.1%,calc(100% - 0.3px) 38.6%,calc(100% - 2.8px) 40%,100% 41.4%,calc(100% - 1.3px) 42.9%,calc(100% - 0.3px) 44.3%,100% 45.7%,100% 47.1%,100% 48.6%,calc(100% - 0.2px) 50%,calc(100% - 2.7px) 51.4%,calc(100% - 2.4px) 52.9%,calc(100% - 2.1px) 54.3%,calc(100% - 1px) 55.7%,calc(100% - 2.4px) 57.1%,calc(100% - 1.7px) 58.6%,calc(100% - 1.8px) 60%,calc(100% - 1.7px) 61.4%,calc(100% - 2.7px) 62.9%,calc(100% - 3.3px) 64.3%,calc(100% - 3.1px) 65.7%,calc(100% - 1.5px) 67.1%,calc(100% - 5.4px) 68.6%,calc(100% - 2.1px) 70%,calc(100% - 5.6px) 71.4%,calc(100% - 0.3px) 72.9%,100% 74.3%,100% 75.7%,calc(100% - 1.5px) 77.1%,calc(100% - 0.7px) 78.6%,calc(100% - 1.2px) 80%,calc(100% - 0.1px) 81.4%,calc(100% - 0.3px) 82.9%,calc(100% - 1.4px) 84.3%,calc(100% - 1.9px) 85.7%,calc(100% - 0.3px) 87.1%,calc(100% - 0.7px) 88.6%,calc(100% - 3.9px) 90%,calc(100% - 2.3px) 91.4%,calc(100% - 1.6px) 92.9%,calc(100% - 3.1px) 94.3%,calc(100% - 3.8px) 95.7%,calc(100% - 1.2px) 97.1%,calc(100% - 3.1px) 98.6%,100% 100%,50% 100%,0 100%,0 98.6%,0 97.1%,0 95.7%,0 94.3%,0 92.9%,0 91.4%,0 90%,0 88.6%,0 87.1%,0 85.7%,0 84.3%,0 82.9%,0 81.4%,0 80%,0 78.6%,0 77.1%,0 75.7%,0 74.3%,0 72.9%,0 71.4%,0 70%,0 68.6%,0 67.1%,0 65.7%,0 64.3%,0 62.9%,0 61.4%,0 60%,0 58.6%,0 57.1%,0 55.7%,0 54.3%,0 52.9%,0 51.4%,0 50%,0 48.6%,0 47.1%,0 45.7%,0 44.3%,0 42.9%,0 41.4%,0 40%,0 38.6%,0 37.1%,0 35.7%,0 34.3%,0 32.9%,0 31.4%,0 30%,0 28.6%,0 27.1%,0 25.7%,0 24.3%,0 22.9%,0 21.4%,0 20%,0 18.6%,0 17.1%,0 15.7%,0 14.3%,0 12.9%,0 11.4%,0 10%,0 8.6%,0 7.1%,0 5.7%,0 4.3%,0 2.9%,0 1.4%);
  --torn-strip-a: polygon(0 0,1.3% 0,2.5% 0,3.8% 0,5% 0,6.3% 0,7.5% 0,8.8% 0,10% 0,11.3% 0,12.5% 0,13.8% 0,15% 0,16.3% 0,17.5% 0,18.8% 0,20% 0,21.3% 0,22.5% 0,23.8% 0,25% 0,26.3% 0,27.5% 0,28.7% 0,30% 0,31.3% 0,32.5% 0,33.8% 0,35% 0,36.3% 0,37.5% 0,38.8% 0,40% 0,41.3% 0,42.5% 0,43.8% 0,45% 0,46.3% 0,47.5% 0,48.8% 0,50% 0,51.2% 0,52.5% 0,53.8% 0,55% 0,56.3% 0,57.5% 0,58.8% 0,60% 0,61.3% 0,62.5% 0,63.7% 0,65% 0,66.3% 0,67.5% 0,68.8% 0,70% 0,71.3% 0,72.5% 0,73.8% 0,75% 0,76.3% 0,77.5% 0,78.8% 0,80% 0,81.3% 0,82.5% 0,83.8% 0,85% 0,86.3% 0,87.5% 0,88.8% 0,90% 0,91.3% 0,92.5% 0,93.8% 0,95% 0,96.3% 0,97.5% 0,98.8% 0,100% 0,100% 50%,100% calc(100% - 3.6px),98.8% calc(100% - 2.7px),97.5% calc(100% - 4.2px),96.3% calc(100% - 7.2px),95% calc(100% - 3.3px),93.8% calc(100% - 5.5px),92.5% calc(100% - 1.7px),91.3% calc(100% - 6.8px),90% calc(100% - 1.7px),88.8% calc(100% - 5.1px),87.5% calc(100% - 3.3px),86.3% calc(100% - 4.6px),85% calc(100% - 3.3px),83.8% calc(100% - 1.3px),82.5% calc(100% - 6.1px),81.3% calc(100% - 0.4px),80% calc(100% - 3.2px),78.8% calc(100% - 4.7px),77.5% calc(100% - 2.7px),76.3% calc(100% - 0.9px),75% calc(100% - 0.9px),73.8% calc(100% - 4.2px),72.5% calc(100% - 1.6px),71.3% 100%,70% calc(100% - 0.9px),68.8% 100%,67.5% 100%,66.3% calc(100% - 1.7px),65% calc(100% - 2.7px),63.8% calc(100% - 1.2px),62.5% calc(100% - 1px),61.3% calc(100% - 6.1px),60% calc(100% - 1.2px),58.8% calc(100% - 2.4px),57.5% 100%,56.3% calc(100% - 0.6px),55% 100%,53.8% 100%,52.5% calc(100% - 2.8px),51.3% calc(100% - 2.2px),50% calc(100% - 1.6px),48.8% calc(100% - 5.5px),47.5% calc(100% - 2.4px),46.3% calc(100% - 4.8px),45% calc(100% - 2.4px),43.8% calc(100% - 9.2px),42.5% calc(100% - 0.8px),41.3% calc(100% - 6.7px),40% calc(100% - 4.3px),38.7% calc(100% - 5.8px),37.5% calc(100% - 6px),36.3% calc(100% - 1.8px),35% calc(100% - 7px),33.8% calc(100% - 3.6px),32.5% calc(100% - 4.5px),31.3% calc(100% - 1.9px),30% calc(100% - 3px),28.8% calc(100% - 6px),27.5% calc(100% - 5.8px),26.3% calc(100% - 10.1px),25% calc(100% - 1.3px),23.8% calc(100% - 3.9px),22.5% calc(100% - 2.8px),21.3% calc(100% - 4.7px),20% calc(100% - 3.4px),18.8% calc(100% - 1.9px),17.5% calc(100% - 2.2px),16.3% calc(100% - 2.4px),15% calc(100% - 3.7px),13.8% calc(100% - 1.9px),12.5% calc(100% - 8.4px),11.3% calc(100% - 1.8px),10% 100%,8.8% 100%,7.5% 100%,6.3% 100%,5% 100%,3.8% calc(100% - 3.7px),2.5% 100%,1.3% calc(100% - 1.2px),0 100%,0 50%);
  --torn-strip-b: polygon(0 0,1.3% 0,2.5% 0,3.8% 0,5% 0,6.3% 0,7.5% 0,8.8% 0,10% 0,11.3% 0,12.5% 0,13.8% 0,15% 0,16.3% 0,17.5% 0,18.8% 0,20% 0,21.3% 0,22.5% 0,23.8% 0,25% 0,26.3% 0,27.5% 0,28.7% 0,30% 0,31.3% 0,32.5% 0,33.8% 0,35% 0,36.3% 0,37.5% 0,38.8% 0,40% 0,41.3% 0,42.5% 0,43.8% 0,45% 0,46.3% 0,47.5% 0,48.8% 0,50% 0,51.2% 0,52.5% 0,53.8% 0,55% 0,56.3% 0,57.5% 0,58.8% 0,60% 0,61.3% 0,62.5% 0,63.7% 0,65% 0,66.3% 0,67.5% 0,68.8% 0,70% 0,71.3% 0,72.5% 0,73.8% 0,75% 0,76.3% 0,77.5% 0,78.8% 0,80% 0,81.3% 0,82.5% 0,83.8% 0,85% 0,86.3% 0,87.5% 0,88.8% 0,90% 0,91.3% 0,92.5% 0,93.8% 0,95% 0,96.3% 0,97.5% 0,98.8% 0,100% 0,100% 50%,100% calc(100% - 4.2px),98.8% calc(100% - 3.8px),97.5% calc(100% - 3.1px),96.3% calc(100% - 3.1px),95% calc(100% - 0.8px),93.8% calc(100% - 2.2px),92.5% calc(100% - 2.6px),91.3% calc(100% - 4.4px),90% calc(100% - 2.2px),88.8% calc(100% - 0.4px),87.5% calc(100% - 0.1px),86.3% calc(100% - 3.3px),85% calc(100% - 3.3px),83.8% calc(100% - 1.2px),82.5% calc(100% - 2.8px),81.3% 100%,80% calc(100% - 2.2px),78.8% calc(100% - 2.1px),77.5% calc(100% - 2.2px),76.3% calc(100% - 0.8px),75% calc(100% - 0.3px),73.8% 100%,72.5% 100%,71.3% calc(100% - 3.6px),70% calc(100% - 2.3px),68.8% calc(100% - 2.2px),67.5% calc(100% - 0.4px),66.3% 100%,65% 100%,63.8% 100%,62.5% calc(100% - 1.2px),61.3% calc(100% - 1.5px),60% calc(100% - 2.8px),58.8% 100%,57.5% calc(100% - 3px),56.3% calc(100% - 1.1px),55% calc(100% - 5.2px),53.8% calc(100% - 3.3px),52.5% calc(100% - 1.7px),51.3% calc(100% - 1.7px),50% calc(100% - 4.1px),48.8% calc(100% - 3.5px),47.5% calc(100% - 1.3px),46.3% calc(100% - 2.6px),45% calc(100% - 3.5px),43.8% calc(100% - 2.7px),42.5% calc(100% - 4.1px),41.3% calc(100% - 1.4px),40% calc(100% - 2.2px),38.7% calc(100% - 3.2px),37.5% calc(100% - 1.9px),36.3% calc(100% - 0.5px),35% calc(100% - 3.7px),33.8% calc(100% - 2.6px),32.5% calc(100% - 0.5px),31.3% calc(100% - 3.1px),30% calc(100% - 0.2px),28.8% calc(100% - 2px),27.5% calc(100% - 2.8px),26.3% calc(100% - 0.9px),25% calc(100% - 4.3px),23.8% calc(100% - 2.9px),22.5% 100%,21.3% calc(100% - 2.7px),20% calc(100% - 2.6px),18.8% 100%,17.5% calc(100% - 0.4px),16.3% calc(100% - 0.5px),15% 100%,13.8% 100%,12.5% calc(100% - 0.5px),11.3% calc(100% - 1.6px),10% calc(100% - 0.6px),8.8% calc(100% - 0.4px),7.5% 100%,6.3% calc(100% - 0.1px),5% calc(100% - 1.2px),3.8% calc(100% - 2.1px),2.5% calc(100% - 0.4px),1.3% calc(100% - 1.4px),0 100%,0 50%);
  --torn-sill-a: polygon(0 3px,1.4% 4.3px,2.9% 7.5px,4.3% 2.6px,5.7% 0,7.1% 3.1px,8.6% 0,10% 0,11.4% 11.7px,12.9% 0,14.3% 1.4px,15.7% 3.9px,17.1% 6.7px,18.6% 4.3px,20% 2.4px,21.4% 2.9px,22.9% 4.6px,24.3% 10.1px,25.7% 8.9px,27.1% 10.2px,28.6% 9.7px,30% 3px,31.4% 2.1px,32.9% 8.3px,34.3% 8.4px,35.7% 2.1px,37.1% 12.3px,38.6% 0,40% 3.9px,41.4% 0.1px,42.9% 0,44.3% 6.2px,45.7% 3.8px,47.1% 3.9px,48.6% 3.7px,50% 0.1px,51.4% 2.1px,52.9% 0.5px,54.3% 0.3px,55.7% 10.8px,57.1% 9px,58.6% 4.7px,60% 4.5px,61.4% 8.4px,62.9% 7.5px,64.3% 14.6px,65.7% 1.7px,67.1% 1.7px,68.6% 7.4px,70% 5.5px,71.4% 2px,72.9% 3.5px,74.3% 4.6px,75.7% 0,77.1% 1.3px,78.6% 2.8px,80% 2.3px,81.4% 4.6px,82.9% 4.9px,84.3% 0,85.7% 0,87.1% 0,88.6% 2.3px,90% 1.8px,91.4% 3.8px,92.9% 3.5px,94.3% 3px,95.7% 2px,97.1% 10.2px,98.6% 7.9px,100% 0,100% 50%,100% 100%,98.6% 100%,97.1% 100%,95.7% 100%,94.3% 100%,92.9% 100%,91.4% 100%,90% 100%,88.6% 100%,87.1% 100%,85.7% 100%,84.3% 100%,82.9% 100%,81.4% 100%,80% 100%,78.6% 100%,77.1% 100%,75.7% 100%,74.3% 100%,72.9% 100%,71.4% 100%,70% 100%,68.6% 100%,67.1% 100%,65.7% 100%,64.3% 100%,62.9% 100%,61.4% 100%,60% 100%,58.6% 100%,57.1% 100%,55.7% 100%,54.3% 100%,52.9% 100%,51.4% 100%,50% 100%,48.6% 100%,47.1% 100%,45.7% 100%,44.3% 100%,42.9% 100%,41.4% 100%,40% 100%,38.6% 100%,37.1% 100%,35.7% 100%,34.3% 100%,32.9% 100%,31.4% 100%,30% 100%,28.6% 100%,27.1% 100%,25.7% 100%,24.3% 100%,22.9% 100%,21.4% 100%,20% 100%,18.6% 100%,17.1% 100%,15.7% 100%,14.3% 100%,12.9% 100%,11.4% 100%,10% 100%,8.6% 100%,7.1% 100%,5.7% 100%,4.3% 100%,2.9% 100%,1.4% 100%,0 100%,0 50%);
  --torn-sill-b: polygon(0 8px,1.4% 4px,2.9% 1.9px,4.3% 4.3px,5.7% 3.1px,7.1% 3.4px,8.6% 2.4px,10% 0,11.4% 1px,12.9% 1.3px,14.3% 4.3px,15.7% 5.2px,17.1% 5.9px,18.6% 6.1px,20% 6.1px,21.4% 7.3px,22.9% 4.3px,24.3% 0.8px,25.7% 0.9px,27.1% 4.6px,28.6% 4.5px,30% 4.1px,31.4% 3.7px,32.9% 0,34.3% 5.9px,35.7% 1.5px,37.1% 1.5px,38.6% 4.4px,40% 5.1px,41.4% 6.2px,42.9% 1.3px,44.3% 6.3px,45.7% 10.9px,47.1% 1.3px,48.6% 6.8px,50% 5.6px,51.4% 6.6px,52.9% 6.1px,54.3% 7.1px,55.7% 1.4px,57.1% 0.3px,58.6% 8.4px,60% 6.4px,61.4% 3.1px,62.9% 4.8px,64.3% 0.4px,65.7% 5.2px,67.1% 6.6px,68.6% 4.9px,70% 1.4px,71.4% 9.4px,72.9% 8px,74.3% 2.2px,75.7% 3.2px,77.1% 2.8px,78.6% 2.9px,80% 5.2px,81.4% 5.3px,82.9% 2.8px,84.3% 0.3px,85.7% 0.2px,87.1% 0,88.6% 2.8px,90% 0,91.4% 1.7px,92.9% 7px,94.3% 1.8px,95.7% 6.5px,97.1% 1.2px,98.6% 4.8px,100% 0,100% 50%,100% 100%,98.6% 100%,97.1% 100%,95.7% 100%,94.3% 100%,92.9% 100%,91.4% 100%,90% 100%,88.6% 100%,87.1% 100%,85.7% 100%,84.3% 100%,82.9% 100%,81.4% 100%,80% 100%,78.6% 100%,77.1% 100%,75.7% 100%,74.3% 100%,72.9% 100%,71.4% 100%,70% 100%,68.6% 100%,67.1% 100%,65.7% 100%,64.3% 100%,62.9% 100%,61.4% 100%,60% 100%,58.6% 100%,57.1% 100%,55.7% 100%,54.3% 100%,52.9% 100%,51.4% 100%,50% 100%,48.6% 100%,47.1% 100%,45.7% 100%,44.3% 100%,42.9% 100%,41.4% 100%,40% 100%,38.6% 100%,37.1% 100%,35.7% 100%,34.3% 100%,32.9% 100%,31.4% 100%,30% 100%,28.6% 100%,27.1% 100%,25.7% 100%,24.3% 100%,22.9% 100%,21.4% 100%,20% 100%,18.6% 100%,17.1% 100%,15.7% 100%,14.3% 100%,12.9% 100%,11.4% 100%,10% 100%,8.6% 100%,7.1% 100%,5.7% 100%,4.3% 100%,2.9% 100%,1.4% 100%,0 100%,0 50%);
  --tape-shape: polygon(0 0, 100% 0, 96% 25%, 100% 50%, 96% 75%, 100% 100%, 0 100%, 4% 75%, 0 50%, 4% 25%);
}

/* ---------- 2. base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100%;
  background: var(--sky-1); color: var(--paper);
  font-family: var(--font-body); font-size: 16px; line-height: 1.35;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
::selection { background: var(--star); color: var(--text-dark); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px dashed var(--star); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; margin: 0; line-height: 1.05; }
p { margin: 0; }
.display { font-family: var(--font-display); font-weight: 700; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

#app { position: relative; height: 100vh; height: 100dvh; min-height: 480px; overflow: hidden; }

/* ---------- 3. the backdrop (#scene is filled by MA.scene) ---------- */
#scene, .ma-scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: var(--sky-1); }
#scene > svg.ma-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
#scene .ma-sun { position: absolute; pointer-events: none; will-change: transform; }
#scene .ma-sun svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
#scene .ma-sun-rays { transform-origin: 50% 50%; will-change: transform; animation: ma-breathe 6.5s ease-in-out infinite; }
#scene .ma-sun-shine { will-change: opacity; animation: ma-shine 3.2s ease-in-out infinite; }
#scene svg.ma-cat { position: absolute; overflow: visible; }
#scene svg.ma-plane-deco { position: absolute; overflow: visible; will-change: transform; animation: ma-plane-bob 11s ease-in-out infinite alternate; }
#scene.ma-paused, #scene.ma-paused * { animation-play-state: paused !important; }
#scene::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .55; }

.ma-tw { transform-box: fill-box; transform-origin: center; animation: ma-twinkle 3.6s ease-in-out infinite; }
.ma-tail { animation: ma-sway 3.8s ease-in-out infinite; }
.ma-win .ma-pane { fill: #3A4590; stroke: #0F1140; stroke-width: 1px; transition: fill .7s ease; }
.ma-win .ma-mull { stroke: #0F1140; opacity: .6; transition: stroke .7s, opacity .7s; }
.ma-win .ma-wglow { opacity: 0; transition: opacity .9s; }
.ma-win.lit .ma-pane { fill: #F6C445; }
.ma-win.lit .ma-mull { stroke: #7A4E12; opacity: .8; }
.ma-win.lit .ma-wglow { opacity: .6; }
.ma-burst .ma-tw { animation: ma-tw-burst 1.5s ease-out 1; }
.ma-shimmer { animation: ma-shimmer 2.6s ease-in-out infinite; }
.ma-gl { transform-box: fill-box; transform-origin: center; animation: ma-glitter 2.2s ease-in-out infinite; }
.ma-tail { transform-box: view-box; }

/* ---------- 4. keyframes ---------- */
@keyframes ma-twinkle { 0%, 100% { opacity: .72; transform: scale(.88); } 50% { opacity: 1; transform: scale(1.16); } }
@keyframes ma-tw-burst { 0% { transform: scale(1); opacity: 1; } 35% { transform: scale(2.4) rotate(20deg); opacity: 1; } 100% { transform: scale(1); } }
@keyframes ma-breathe { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.05) rotate(2.5deg); } }
@keyframes ma-shine { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes ma-plane-bob { 0% { transform: translate(0, 0) rotate(0deg); } 100% { transform: translate(10px, -8px) rotate(1.8deg); } }
@keyframes ma-sway { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(11deg); } }
@keyframes ma-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(9px, -7px); } }
@keyframes ma-shimmer { 0% { transform: translateX(-10px); opacity: 0; } 12% { opacity: 1; } 70% { transform: translateX(150px); opacity: 1; } 100% { transform: translateX(150px); opacity: 0; } }
@keyframes ma-glitter { 0%, 100% { opacity: .45; transform: scale(.55) rotate(0deg); } 50% { opacity: 1; transform: scale(1.35) rotate(25deg); } }
@keyframes jiggle { 0%, 100% { rotate: 0deg; } 20% { rotate: -4deg; } 45% { rotate: 3.5deg; } 70% { rotate: -2deg; } 88% { rotate: 1deg; } }
@keyframes pop-float {
  0% { opacity: 0; transform: translate(-50%, -20%) scale(.4) rotate(-6deg); }
  14% { opacity: 1; transform: translate(-50%, -60%) scale(1.22) rotate(3deg); }
  28% { transform: translate(-50%, -70%) scale(1) rotate(-1deg); }
  76% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -200%) scale(1) rotate(0deg); }
}
@keyframes deal-in {
  0% { opacity: 0; translate: var(--deal-dx, 320px) var(--deal-dy, 140px); rotate: 14deg; scale: .6; }
  70% { opacity: 1; }
  100% { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; }
}
@keyframes card-score { 0% { translate: 0 0; scale: 1; } 30% { translate: 0 -16px; scale: 1.1; } 100% { translate: 0 0; scale: 1; } }
@keyframes pulse { 0%, 100% { scale: 1; } 50% { scale: 1.07; } }
@keyframes plane {
  0% { translate: -6vw 8vh; rotate: 8deg; opacity: 0; }
  10% { opacity: 1; }
  100% { translate: 62vw -30vh; rotate: -18deg; opacity: 0; }
}
@keyframes modal-in { 0% { opacity: 0; translate: 0 24px; rotate: -1.5deg; scale: .96; } 100% { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes tooltip-in { from { opacity: 0; translate: 0 4px; } to { opacity: 1; translate: 0 0; } }
@keyframes banner-in { 0% { opacity: 0; scale: .7; rotate: -6deg; } 60% { scale: 1.06; rotate: -1deg; } 100% { opacity: 1; scale: 1; rotate: -1.5deg; } }
.jiggle { animation: jiggle .55s ease-in-out; }
.pulse { animation: pulse 1.5s ease-in-out infinite; }
.plane-fly { animation: plane 2.4s ease-in-out forwards; }

/* ---------- 5. layout skeleton ---------- */
#game.layout {
  position: relative; z-index: 1; height: 100%;
  display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
}

/* --- the house: sidebar = purple scribbled wall, roof ledge on top, vine up its left edge --- */
#sidebar {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; gap: clamp(9px, 1.9vh, 20px);
  padding: 58px 22px 14px 24px; min-height: 0;
  color: var(--paper);
  overflow-x: hidden; overflow-y: auto; background-color: var(--wall); scrollbar-width: thin; scrollbar-color: #6A5BB5 transparent;
}
#sidebar::before {                                   /* white paper rim on the torn right edge */
  content: ""; position: absolute; z-index: -2; top: 0; bottom: 0; left: 0; right: 0;
  background: var(--paper-rim); clip-path: var(--torn-wall-b);
}
#sidebar::after {                                    /* the wall itself */
  content: ""; position: absolute; z-index: -1; inset: 0;
  background-image: var(--roof-tile), var(--vine-tile), var(--scribble), var(--grain-l);
  background-size: 100% 46px, 34px 190px, 260px 150px, 180px 180px;
  background-position: 0 0, 2px 46px, 0 0, 0 0;
  background-repeat: no-repeat, repeat-y, repeat, repeat;
  background-color: var(--wall);
  clip-path: var(--torn-wall-a);
}
#sidebar > * { flex: none; }
#sidebar-buttons { display: flex; gap: 8px; justify-content: center; margin-top: auto; padding-top: 4px; }
#sidebar-buttons .btn { font-size: 1.15rem; padding: .32em .8em; }

/* --- the table --- */
#table {
  position: relative; min-width: 0; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 8px 16px 0 16px;
}
#top-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; padding: 0 2px; min-height: calc(var(--card-w) * 1.4 + 34px); }
.slots {
  position: relative; display: flex; align-items: flex-start; gap: calc(var(--card-w) * .11);
  padding-top: 18px; min-height: calc(var(--card-w) * 1.4 + 18px);
}
.slots::before {                                     /* the string the keepsakes hang from */
  content: ""; position: absolute; left: -8px; right: -8px; top: 7px; height: 8px;
  background: var(--twine) repeat-x center / 24px 8px; opacity: .9; pointer-events: none;
}
.slots > * { flex: none; width: var(--card-w); height: calc(var(--card-w) * 1.4); }
#stage {
  position: relative; min-height: 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 6px 0 calc(var(--card-w) * .55 + 34px);
}
.played { --pw: min(calc(var(--card-w) * 1.25), calc((100vw - var(--sidebar-w) - 110px) / 5.7)); display: flex; justify-content: center; align-items: flex-end; gap: calc(var(--pw) * .1); }
.played .card { width: var(--pw); height: calc(var(--pw) * 1.4); }

/* --- the windowsill: tan torn paper, hand of cards standing on it --- */
#hand-area {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; align-items: center;
  margin: 0 calc(var(--card-w) + 64px) 0 -16px;
  padding: 10px 14px 12px;
}
#hand-area::before { content: ""; position: absolute; z-index: -2; left: 0; right: 0; top: -3px; bottom: 0; background: var(--paper-rim); clip-path: var(--torn-sill-b); }
#hand-area::after { content: ""; position: absolute; z-index: -1; inset: 0; background-image: var(--grain); background-color: var(--sill); clip-path: var(--torn-sill-a); }
#hand {
  position: relative; z-index: 2; width: 100%;
  display: flex; justify-content: center; align-items: flex-end;
  margin-top: calc(var(--card-w) * -.72);
  min-height: calc(var(--card-w) * 1.4); padding: 0 4px;
}
#hand > .card + .card { margin-left: calc(var(--card-w) * var(--hand-overlap)); }
#hand > .card:nth-child(odd) { --fan-rot: -.7deg; }
#hand > .card:nth-child(even) { --fan-rot: .7deg; --fan-y: 2px; }
#hand-controls { position: relative; z-index: 3; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 12px; min-height: var(--controls-h); margin-top: 8px; }

/* --- deck pile: stack of airmail-envelope backs, bottom-right (over the town) --- */
#deck-pile {
  position: absolute; z-index: 4; right: clamp(12px, 1.8vw, 26px); bottom: clamp(12px, 2.4vh, 26px);
  width: var(--card-w); height: calc(var(--card-w) * 1.4); cursor: pointer;
}
#deck-pile > .card, #deck-pile .deck-cards > .card { position: absolute; left: 0; top: 0; }
#deck-pile .deck-cards { position: absolute; inset: 0; }
#deck-pile .card:nth-child(1) { --fan-rot: -3deg; --fan-y: 0px; translate: -5px 5px; }
#deck-pile .card:nth-child(2) { --fan-rot: 1.6deg; translate: -2px 2px; }
#deck-pile .card:nth-child(3) { --fan-rot: -.6deg; }
#deck-pile .card:hover { transform: rotate(var(--fan-rot, 0deg)); }
#deck-pile .deck-count { position: absolute; left: 50%; bottom: -10px; translate: -50% 0; rotate: -2deg; z-index: 5; white-space: nowrap; }

/* --- overlay (modals) / tooltip --- */
#overlay { position: fixed; inset: 0; z-index: 50; display: none; }
#overlay:not(:empty) { display: grid; place-items: center; padding: 18px; background: rgba(12, 12, 50, .66); animation: fade-in .25s ease-out; overflow: auto; }
#tooltip[hidden] { display: none !important; }

/* ---------- 6. paper (panels) ---------- */
:is(.paper, .paper-dark, #blind-panel, #hand-panel, #counters-panel) {
  position: relative; isolation: isolate; --fill: var(--paper);
  color: var(--text-dark); padding: 12px 14px;
  filter: drop-shadow(2px 3px 0 var(--shade));
}
:is(.paper, .paper-dark, #blind-panel, #hand-panel, #counters-panel)::before {
  content: ""; position: absolute; z-index: -2; inset: -1.5px; background: var(--paper-rim); clip-path: var(--torn-b);
}
:is(.paper, .paper-dark, #blind-panel, #hand-panel, #counters-panel)::after {
  content: ""; position: absolute; z-index: -1; inset: 0; background-image: var(--grain); background-color: var(--fill); clip-path: var(--torn-a);
}
:is(.paper-dark, #hand-panel) { --fill: var(--navy-paper); color: var(--paper); }
:is(.paper-dark, #hand-panel)::after { background-image: var(--grain-l); }
.paper-plain { background: var(--paper); color: var(--text-dark); }

/* tape strip (washi). place it as the first child of a panel; it hangs over the top edge. */
.tape {
  position: absolute; z-index: 3; top: -9px; left: 50%; width: 64px; height: 18px; margin-left: -32px;
  background-color: var(--tape-teal); background-image: var(--dots), var(--grain);
  opacity: .93; rotate: -3deg; clip-path: var(--tape-shape); pointer-events: none;
}
.tape-teal { background-color: var(--tape-teal); }
.tape-pink { background-color: var(--tape-pink); }
.tape-gold { background-color: var(--tape-gold); }
.tape-l { left: 14px; margin-left: 0; rotate: -28deg; top: -6px; }
.tape-r { left: auto; right: 14px; margin-left: 0; rotate: 26deg; top: -6px; }

/* small taped label: tape strip with text on it */
.label {
  position: relative; display: inline-block; padding: 1px 14px; rotate: -1.5deg;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.5; color: var(--text-dark);
  background-color: var(--tape-teal); background-image: var(--dots), var(--grain);
  clip-path: var(--tape-shape); white-space: nowrap;
}
.label.tape-pink { background-color: var(--tape-pink); }
.label.tape-gold { background-color: var(--tape-gold); }
.label.tape-paper { background-color: var(--paper); }

/* ---------- 7. buttons and paper chips (shared torn-chip mechanism) ---------- */
:is(.btn, .ink-box, .glow-box, .counter, .banner, .pop, .price-tag-torn) {
  position: relative; isolation: isolate; --fill: var(--paper);
}
:is(.btn, .ink-box, .glow-box, .counter, .banner, .pop)::before {
  content: ""; position: absolute; z-index: -2; inset: -1.6px; background: var(--paper-rim); clip-path: var(--torn-s-a);
}
:is(.btn, .ink-box, .glow-box, .counter, .banner, .pop)::after {
  content: ""; position: absolute; z-index: -1; inset: 0; background-image: var(--grain); background-color: var(--fill); clip-path: var(--torn-s-b);
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  padding: .45em 1.15em; border: 0; background: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1; letter-spacing: .01em;
  color: var(--text-dark);
  filter: drop-shadow(0 3px 0 var(--shade));
  transition: translate .08s ease-out, filter .08s ease-out, scale .12s;
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.btn:hover:not(:disabled) { scale: 1.03; rotate: -.6deg; }
.btn:active:not(:disabled) { translate: 0 3px; filter: drop-shadow(0 0 0 var(--shade)); scale: .98; }
.btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; filter: saturate(.35) brightness(.78) drop-shadow(0 2px 0 var(--shade)); opacity: .82; }
.btn .btn-icon { display: inline-flex; width: 1.5em; }
.btn .btn-icon svg { width: 100%; height: auto; display: block; }
.btn-send { --fill: #17877A; color: #FFFDF6; font-size: 1.75rem; padding: .45em 1.4em; }
.btn-crumple { --fill: var(--sun); color: var(--text-dark); }
.btn-plain { --fill: var(--paper); color: var(--text-dark); }
.btn-gold { --fill: var(--window); color: var(--text-dark); }
.btn-small { font-size: 1.15rem; padding: .3em .85em; }
.btn .btn-count { font-size: .8em; opacity: .9; }
.btn-send:not(:disabled) .btn-icon { animation: none; }
.btn-send:hover:not(:disabled) .btn-icon { translate: 3px -2px; transition: translate .2s; }

/* ink and glow boxes (the two halves of the score) */
.ink-box, .glow-box { display: inline-flex; flex-direction: column; align-items: stretch; min-width: 74px; padding: 5px 12px 3px; text-align: right; color: #fff; filter: drop-shadow(1px 2px 0 rgba(6, 5, 30, .5)); }
.ink-box { --fill: var(--ink); }
.glow-box { --fill: var(--sun); color: #2A1420; }
.ink-box .box-label, .glow-box .box-label { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; text-align: left; opacity: .92; font-weight: 700; }
.ink-box .box-num, .glow-box .box-num { display: block; white-space: nowrap; font-family: var(--font-display); font-weight: 700; line-height: .95; font-variant-numeric: tabular-nums; font-size: clamp(.62rem, calc(var(--box-inner) / (var(--len, 3) * .5)), var(--box-max)); }
.box-x { font-family: var(--font-display); font-weight: 700; font-size: 1.8rem; color: var(--paper); align-self: center; }

/* counters (sends, crumples, stamps, night, blind) */
.counter { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; padding: 3px 8px 2px; --fill: #FFFDF6; color: var(--text-dark); }
.counter-label { font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; color: var(--text-soft); font-weight: 700; white-space: nowrap; }
.counter-value { font-family: var(--font-display); font-weight: 700; font-size: 1.55rem; line-height: 1; display: inline-flex; align-items: center; gap: 3px; font-variant-numeric: tabular-nums; }
.counter-sends { --fill: #17877A; }
.counter-sends .counter-label { color: #DDF7F2; }
.counter-sends .counter-value { color: #fff; font-size: 2rem; }
.counter-crumples { --fill: var(--sun); }
.counter-crumples .counter-label { color: #5A2618; }
.counter-crumples .counter-value { color: #2A1420; font-size: 2rem; }
.counter-stamps .counter-value { color: #8A5A00; }
.counter-night .counter-value, .counter-blind .counter-value { color: var(--ink-dark); }
.counter .ma-stamp-icon { width: 15px; height: auto; }

/* ---------- 8. sidebar panels ---------- */
#blind-panel { text-align: center; padding-top: 16px; }
.blind-name { font-size: 2rem; letter-spacing: .01em; text-wrap: balance; }
#blind-panel:has(.blind-emblem) .blind-name { padding-right: 46px; }
.blind-sub { font-size: .75rem; color: var(--text-soft); margin-top: 1px; }
.blind-target { margin-top: 6px; }
.blind-target .k, .blind-reward .k { display: block; font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; color: var(--text-soft); font-weight: 700; }
.blind-target .v { font-family: var(--font-display); font-weight: 700; font-size: 2rem; line-height: 1; color: var(--sun-dark); }
.blind-reward { margin-top: 4px; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; display: flex; justify-content: center; align-items: center; gap: 5px; }
.blind-reward .k { display: inline; }
.blind-curse { margin-top: 7px; font-size: .74rem; line-height: 1.3; color: var(--text-dark); padding-top: 5px; border-top: 1.5px dashed rgba(42, 34, 80, .35); }
.blind-emblem { position: absolute; z-index: 3; right: -12px; top: -14px; width: 60px; rotate: 8deg; }
.blind-emblem svg { width: 100%; height: auto; display: block; }

/* the lit window: cream handwritten frame, warm yellow glow, pink curtains */
#score-panel {
  position: relative; isolation: isolate; padding: 9px; text-align: center; color: var(--text-dark);
  filter: drop-shadow(2px 3px 0 var(--shade));
}
#score-panel::before { content: ""; position: absolute; z-index: -2; inset: -1.5px; background: var(--paper-rim); clip-path: var(--torn-b); }
#score-panel::after { content: ""; position: absolute; z-index: -1; inset: 0; background-image: var(--scribble-cream), var(--grain); background-size: 120px 60px, 180px 180px; background-color: #EFE3C4; clip-path: var(--torn-a); }
.window-pane { position: relative; overflow: hidden; padding: 9px 30px 8px; background: radial-gradient(ellipse at 50% 46%, #FFE07A 0%, var(--window) 62%, #F0B93A 100%); }
.window-pane .curtain { position: absolute; top: 0; bottom: 0; width: 26%; background-color: var(--curtain); background-image: var(--grain); }
.window-pane .curtain-l { left: 0; clip-path: polygon(0 0, 100% 0, 58% 30%, 70% 58%, 52% 100%, 0 100%); }
.window-pane .curtain-r { right: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 48% 100%, 30% 58%, 42% 30%); }
.window-pane > :not(.curtain) { position: relative; z-index: 1; }
/* the girl at her lit window. Mood = #score-panel[data-girl="idle|happy|wow|sleepy|look"] (image swap, no extra markup) */
#score-panel .window-pane { padding-bottom: 76px; }
#score-panel .window-pane::after {
  content: ""; position: absolute; z-index: 2; left: 50%; bottom: 0; width: 54px; height: 72px; margin-left: -27px; pointer-events: none;
  background: var(--girl-idle) center bottom / contain no-repeat;
}
#score-panel[data-girl="happy"] .window-pane::after { background-image: var(--girl-happy); }
#score-panel[data-girl="wow"] .window-pane::after { background-image: var(--girl-wow); }
#score-panel[data-girl="sleepy"] .window-pane::after { background-image: var(--girl-sleepy); }
#score-panel[data-girl="look"] .window-pane::after { background-image: var(--girl-look); }
.score-label { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: #6B4A05; }
.score-value { white-space: nowrap; font-family: var(--font-display); font-weight: 700; line-height: 1; color: var(--text-dark); font-variant-numeric: tabular-nums; font-size: clamp(.7rem, calc(var(--score-inner) / (var(--len, 5) * .5)), var(--score-max)); }
[data-len="1"] { --len: 1; }
[data-len="2"] { --len: 2; }
[data-len="3"] { --len: 3; }
[data-len="4"] { --len: 4; }
[data-len="5"] { --len: 5; }
[data-len="6"] { --len: 6; }
[data-len="7"] { --len: 7; }
[data-len="8"] { --len: 8; }
[data-len="9"] { --len: 9; }
[data-len="10"] { --len: 10; }
[data-len="11"] { --len: 11; }
[data-len="12"] { --len: 12; }
[data-len="13"] { --len: 13; }
[data-len="14"] { --len: 14; }
[data-len="15"] { --len: 15; }
[data-len="16"] { --len: 16; }
.score-goal { font-size: .72rem; color: #6B4A05; font-weight: 600; }

#hand-panel { text-align: center; padding: 10px 12px 12px; }
.hand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.55rem; line-height: 1.05; }
.hand-lvl { font-size: 1rem; color: var(--star); margin-left: .25em; font-weight: 700; }
.hand-poker { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; opacity: .72; margin-bottom: 6px; }
.mult-row { display: flex; align-items: center; justify-content: center; gap: 7px; }
.mult-row .ink-box, .mult-row .glow-box { flex: 1 1 0; min-width: 0; }

#counters-panel { padding: 10px 10px 9px; }
.counters { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 8px; }
.counters .counter-wide { grid-column: 1 / -1; }
#sidebar .t-ink, #sidebar .t-glow { font-weight: 700; }

/* ---------- 9. cards, keepsakes, consumables ---------- */
.card, .keepsake, .consumable {
  position: relative; flex: none; width: var(--card-w); height: calc(var(--card-w) * 1.4);
  transform: translateY(var(--fan-y, 0px)) rotate(var(--fan-rot, 0deg)); transform-origin: 50% 100%;
  transition: transform .17s cubic-bezier(.3, 1.5, .5, 1), filter .17s;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
}
.card > svg, .keepsake > svg, .consumable > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.card:hover, .keepsake:hover, .consumable:hover { transform: translateY(calc(var(--fan-y, 0px) - 7px)) rotate(var(--fan-rot, 0deg)); z-index: 5; }
.card.selected { transform: translateY(calc(var(--fan-y, 0px) - 36px)) rotate(var(--fan-rot, 0deg)) scale(1.06); z-index: 6; }
.card.selected > svg { filter: drop-shadow(0 0 6px rgba(245, 205, 85, .95)); }
.card.selected::after {                              /* hand-drawn dashed "picked" outline */
  content: ""; position: absolute; inset: -5px; border: 3px dashed var(--star); border-radius: 10px; pointer-events: none;
  box-shadow: 0 0 0 1.5px #2A2250, inset 0 0 0 1.5px #2A2250;
  filter: drop-shadow(0 0 7px rgba(245, 205, 85, 1));
}
.card.scoring { animation: card-score .5s ease-out; z-index: 6; }
.card.scoring > svg { filter: drop-shadow(0 0 7px rgba(245, 205, 85, .95)); }
.card.debuffed > svg { filter: grayscale(.9) brightness(.72) contrast(.9); }
.card.debuffed::before { content: ""; position: absolute; z-index: 3; inset: 24% 18%; opacity: .8; background: var(--cross) center / contain no-repeat; pointer-events: none; }
.card.facedown > svg { filter: none; }
.card.dealing { animation: deal-in .45s cubic-bezier(.2, .9, .3, 1) both; animation-delay: calc(var(--i, 0) * 55ms); }
.card.jiggle, .keepsake.jiggle, .consumable.jiggle { animation: jiggle .55s ease-in-out; }
.card.disabled, .card.unplayable { opacity: .55; }
.keepsake, .consumable { cursor: grab; }
.keepsake.dragging { cursor: grabbing; z-index: 30; scale: 1.06; rotate: 3deg; filter: drop-shadow(6px 10px 0 rgba(8, 6, 36, .45)); transition: none; opacity: .95; }
.keepsake::before, .consumable::before {              /* wooden clothes-peg on the string */
  content: ""; position: absolute; z-index: 4; top: -17px; left: 50%; width: 11px; height: 22px; margin-left: -5.5px;
  background: #C98B4E; border-radius: 2px 2px 4px 4px; box-shadow: inset 0 0 0 1px rgba(70, 36, 12, .4), 1px 2px 0 rgba(8, 6, 36, .35);
  pointer-events: none;
}
.keepsake::after, .consumable::after { content: ""; position: absolute; z-index: 5; top: -8px; left: 50%; width: 11px; height: 2px; margin-left: -5.5px; background: rgba(70, 36, 12, .5); pointer-events: none; }
.keepsake .price-tag, .consumable .price-tag, .card .price-tag { position: absolute; left: 50%; bottom: -13px; translate: -50% 0; z-index: 8; }
.slot-empty {
  position: relative; border: 2.5px dashed rgba(243, 234, 211, .55); border-radius: 11px 8px 12px 9px / 9px 12px 8px 11px; background: rgba(243, 234, 211, .07);
  display: grid; place-items: center; text-align: center; padding: 6px;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: rgba(243, 234, 211, .7); line-height: 1.1;
}
.slot-empty::before {                                  /* empty clothes-peg waiting on the string */
  content: ""; position: absolute; z-index: 4; top: -17px; left: 50%; width: 11px; height: 22px; margin-left: -5.5px;
  background: #A9723F; border-radius: 2px 2px 4px 4px; box-shadow: inset 0 0 0 1px rgba(70, 36, 12, .4), 1px 2px 0 rgba(8, 6, 36, .35); pointer-events: none; opacity: .85;
}
.slots > .slot-empty { height: calc(var(--card-w) * 1.4); }
.card .sticker-badge { display: none; }

/* price tag tied on with string */
.price-tag {
  position: relative; display: inline-block; padding: 1px 9px 1px 17px; color: var(--text-dark);
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.35; white-space: nowrap;
  background-color: var(--paper); background-image: radial-gradient(circle at 8px 50%, transparent 2.4px, transparent 2.6px, rgba(0,0,0,0) 3px), var(--grain);
  clip-path: polygon(0 50%, 11px 0, 100% 0, 100% 100%, 11px 100%);
}
.price-tag::before { content: ""; position: absolute; left: 4px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--sky-2); box-shadow: 0 0 0 1px #D9C79A; }
.price-tag .ma-stamp-icon { width: 11px; height: auto; vertical-align: -1px; margin-right: 2px; }
.price-tag.sell { background-color: var(--tape-gold); }
.price-tag.cant { background-color: #E5C0BC; opacity: .9; }
.price-tag { max-width: 100%; overflow: hidden; text-overflow: clip; }

/* ---------- 10. floating score pops ---------- */
.pop {
  position: fixed; z-index: 90; pointer-events: none; white-space: nowrap;
  padding: 1px 14px 0; --fill: #F3EAD3; color: var(--text-dark);
  font-family: var(--font-display); font-weight: 700; font-size: 2rem; line-height: 1.15;
  transform: translate(-50%, -50%); animation: pop-float 1.1s ease-out forwards;
  filter: drop-shadow(1px 3px 0 rgba(6, 5, 30, .55));
}
.pop-ink { --fill: var(--ink); color: #fff; }
.pop-glow { --fill: var(--sun); color: #2A1420; }
.pop-xglow { --fill: #C9422C; color: #fff; font-size: 2.5rem; padding: 2px 18px 0; }
.pop-stamp { --fill: var(--window); color: var(--text-dark); }
.pop-say { --fill: #FFFDF6; color: var(--text-dark); font-family: var(--font-body); font-size: 1rem; font-weight: 600; padding: 4px 12px; white-space: normal; max-width: 240px; text-align: center; }

/* ---------- 11. markup spans ({kind|text}) ---------- */
.t-ink { color: var(--ink); font-weight: 700; }
.t-glow { color: var(--sun-dark); font-weight: 700; }
.t-xglow { background: #C9422C; color: #fff; font-weight: 700; padding: 0 .38em; border-radius: .35em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.t-stamp { color: #8A5A00; font-weight: 700; }
.t-star { color: #9A6A00; font-weight: 700; }
.t-moon { color: var(--suit-moon); font-weight: 700; }
.t-bloom { color: #C0402A; font-weight: 700; }
.t-leaf { color: #23744B; font-weight: 700; }
.t-hand { color: var(--text-dark); font-weight: 700; text-decoration: underline wavy rgba(47, 91, 211, .55) 1.5px; text-underline-offset: 3px; }
:is(.paper-dark, #hand-panel, .tooltip-dark, #overlay .dark) .t-ink { color: #9DB8FF; }
:is(.paper-dark, #hand-panel, .tooltip-dark, #overlay .dark) .t-glow { color: #FF9C7E; }
:is(.paper-dark, #hand-panel, .tooltip-dark, #overlay .dark) .t-stamp, :is(.paper-dark, #hand-panel, .tooltip-dark) .t-star { color: var(--star); }
:is(.paper-dark, #hand-panel, .tooltip-dark) .t-moon { color: #A9B0FF; }
:is(.paper-dark, #hand-panel, .tooltip-dark) .t-bloom { color: #FF8F7C; }
:is(.paper-dark, #hand-panel, .tooltip-dark) .t-leaf { color: #7EDFA6; }
:is(.paper-dark, #hand-panel, .tooltip-dark) .t-hand { color: var(--paper); }

/* ---------- 12. tooltip (a cream note stuck on with tape) ---------- */
.tooltip {
  position: fixed; z-index: 100; left: 0; top: 0; max-width: 268px; min-width: 130px; pointer-events: none;
  isolation: isolate; padding: 15px 15px 12px; color: var(--text-dark); font-size: .84rem; line-height: 1.38;
  filter: drop-shadow(3px 5px 0 rgba(6, 5, 30, .5)); animation: tooltip-in .14s ease-out;
}
.tooltip::before { content: ""; position: absolute; z-index: -2; inset: -1.6px; background: var(--paper-rim); clip-path: var(--torn-b); }
.tooltip::after { content: ""; position: absolute; z-index: -1; inset: 0; background-image: var(--grain); background-color: var(--paper); clip-path: var(--torn-a); }
.tooltip .tape { top: -8px; }
.tooltip .tip-title, .tooltip h4 { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; line-height: 1.05; margin-bottom: 3px; }
.tooltip .tip-sub { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); font-weight: 700; margin-bottom: 4px; }
.tooltip .tip-line { margin-top: 3px; }
.tooltip .tip-status { margin-top: 6px; padding-top: 5px; border-top: 1.5px dashed rgba(42, 34, 80, .3); color: var(--text-soft); font-size: .78rem; }
.tooltip .tip-rarity { display: inline-block; }
.tooltip-dark::after { background-image: var(--grain-l); background-color: var(--navy-paper); }
.tooltip-dark { color: var(--paper); }

/* ---------- 13. modals and banners ---------- */
.modal {
  position: relative; width: min(680px, 94vw); max-height: min(88vh, 900px); overflow: auto; padding: 30px 34px 26px;
  color: var(--text-dark); background-color: var(--paper); background-image: var(--grain);
  border: 3px solid var(--paper-rim); clip-path: var(--torn-a);
  animation: modal-in .32s cubic-bezier(.2, .9, .3, 1.15) both;
  scrollbar-width: thin; scrollbar-color: #C9B98F transparent;
}
.modal h1, .modal h2 { font-size: 2.3rem; margin-bottom: 6px; }
.modal h3 { font-size: 1.5rem; }
.modal p { margin-top: 6px; }
.modal-dark, .modal.dark { background-color: var(--navy-paper); background-image: var(--grain-l); color: var(--paper); }
.modal-wide { width: min(980px, 96vw); }
.modal .modal-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 18px; padding-bottom: 4px; }

.banner {
  display: inline-block; padding: 8px 46px 4px; --fill: var(--window); color: var(--text-dark);
  font-family: var(--font-display); font-weight: 700; font-size: 2.6rem; line-height: 1.1; text-align: center; letter-spacing: .01em;
  rotate: -1.5deg; animation: banner-in .5s cubic-bezier(.2, .9, .3, 1.2) both;
  filter: drop-shadow(3px 5px 0 rgba(6, 5, 30, .5));
}
.banner-teal { --fill: var(--sweater); color: #FFFDF6; }
.banner-coral { --fill: var(--sun); color: var(--text-dark); }
.banner-paper { --fill: var(--paper); }

/* ---------- 14. responsive ---------- */
@media (max-width: 1099px) and (min-width: 901px) {
  :root { --card-w: 82px; --sidebar-w: 236px; --hand-overlap: -.24; }
  #hand-area { margin-right: calc(var(--card-w) + 24px); }
  .blind-name { font-size: 1.7rem; }
  :root { --box-max: 2rem; }
}
@media (min-width: 901px) and (max-height: 760px) {
  .blind-sub, .hand-poker { display: none; }
  .counters { grid-template-columns: repeat(3, 1fr); gap: 5px; }
  .counters .counter-wide { grid-column: auto; }
  .counters .counter { padding: 2px 3px 1px; }
  .counter-label { font-size: .58rem; letter-spacing: 0; }
  .counter-value, .counter-sends .counter-value, .counter-crumples .counter-value { font-size: 1.35rem; }
}
@media (min-width: 901px) and (max-height: 820px) {
  :root { --card-w: 80px; --controls-h: 46px; }
  #sidebar { gap: 8px; padding-top: 52px; }
  .blind-name { font-size: 1.6rem; }
  .blind-target .v { font-size: 1.6rem; }
  :root { --score-max: 2.1rem; }
  .hand-name { font-size: 1.3rem; }
  :root { --box-max: 1.9rem; }
  .btn-send { font-size: 1.5rem; }
  .btn { font-size: 1.3rem; }
  :is(.paper, .paper-dark, #blind-panel, #hand-panel, #counters-panel) { padding: 9px 12px; }
}
@media (max-width: 900px) {
  :root { --card-w: 68px; --hand-overlap: -.14; --controls-h: 46px; --sidebar-w: 100%; }
  #game.layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  #sidebar {
    display: grid; grid-template-columns: 1fr 1.05fr 1.15fr; grid-template-areas: "blind score hand" "counters counters buttons";
    gap: 7px 8px; padding: 28px 10px 12px; align-items: stretch;
  }
  #sidebar::before { top: 0; bottom: -3px; left: 0; right: 0; clip-path: var(--torn-strip-b); }
  #sidebar::after { background-size: 100% 26px, 34px 190px, 260px 150px, 180px 180px; background-position: 0 0, 0 26px, 0 0, 0 0; clip-path: var(--torn-strip-a); }
  #blind-panel { grid-area: blind; padding: 8px 8px 7px; }
  #blind-panel:has(.blind-emblem) .blind-name { padding-right: 26px; font-size: 1.1rem; }
  #score-panel { grid-area: score; padding: 6px; }
  #hand-panel { grid-area: hand; padding: 7px 8px 8px; }
  #counters-panel { grid-area: counters; padding: 6px 8px 6px; }
  #sidebar-buttons { grid-area: buttons; margin: 0; flex-direction: column; gap: 5px; align-items: stretch; justify-content: center; }
  #sidebar-buttons .btn { font-size: .95rem; padding: .28em .5em; }
  .blind-name { font-size: 1.35rem; }
  .blind-sub, .blind-reward .k { display: none; }
  .blind-target { margin-top: 2px; }
  .blind-target .v { font-size: 1.45rem; }
  .blind-target .k { font-size: .66rem; }
  .blind-reward { font-size: .95rem; margin-top: 1px; }
  .blind-curse { display: none; }
  .blind-emblem { width: 44px; right: -8px; top: -10px; }
  .window-pane { padding: 5px 20px 4px; }
  :root { --score-max: 1.7rem; --score-inner: calc((100vw - 32px) * .33 - 52px); --box-max: 1.45rem; --box-inner: calc((100vw - 32px) * .36 / 2 - 28px); }
  .score-label { font-size: .66rem; }
  #score-panel .window-pane { padding-bottom: 56px; }
  #score-panel .window-pane::after { width: 35px; height: 46px; margin-left: -17.5px; }
  .score-goal { font-size: .6rem; }
  .hand-name { font-size: 1.05rem; }
  .hand-lvl { font-size: .8rem; }
  .hand-poker { display: none; }
  .mult-row { gap: 3px; }
  .ink-box, .glow-box { min-width: 0; padding: 3px 6px 2px; }
  .ink-box .box-label, .glow-box .box-label { font-size: .66rem; }
  .box-x { font-size: 1.15rem; }
  .counters { display: flex; flex-wrap: nowrap; gap: 5px; }
  .counters .counter { flex: 1 1 0; padding: 2px 3px 1px; }
  .counter-label { font-size: .66rem; letter-spacing: .03em; }
  .counter-value { font-size: 1.15rem; }
  #table { padding: 6px 8px 0; }
  #top-row { min-height: calc(var(--card-w) * 1.4 + 26px); gap: 8px; }
  #top-row { --card-w: 52px; }
  .slots { gap: 5px; padding-top: 14px; }
  #hand-area { margin: 0 -8px 0 -8px; padding: 8px 8px 10px; }
  #deck-pile { position: relative; grid-row: 2; grid-column: 1; align-self: end; justify-self: end; right: auto; bottom: auto; margin: 0 6px calc(var(--card-w) * .55 + 40px) 0; width: 46px; height: 64px; }
  #deck-pile .card { width: 46px; height: 64px; }
  #deck-pile .deck-count { left: auto; right: 0; translate: 0 0; font-size: .8rem; }
  .played { --pw: min(calc(var(--card-w) * 1.2), calc((100vw - 40px) / 5.7)); }
  .counter-sends .counter-value, .counter-crumples .counter-value { font-size: 1.3rem; }
  .modal { padding: 22px 18px 20px; }
  .modal h1, .modal h2 { font-size: 1.9rem; }
  .banner { font-size: 1.8rem; padding: 6px 28px 3px; }
}
@media (max-width: 600px) {
  :root { --card-w: 58px; }
  #top-row { --card-w: 50px; }
  .btn { font-size: 1.15rem; }
  #hand-controls { gap: 6px 8px; }
  #hand-controls .btn-send { flex: 1 1 42%; order: -1; min-height: 48px; font-size: 1.5rem; padding: .35em 1em; }
  .btn-crumple { min-height: 44px; }
  #sidebar-buttons .btn, .btn-small { min-height: 44px; }
  .slot-empty { font-size: 0; color: transparent; }
  .keepsake .label { display: none; }
  .pop { font-size: 1.25rem; padding: 0 8px; }
  .pop-xglow { font-size: 1.5rem; padding: 0 10px; }
}
@media (max-width: 430px) {
  :root { --card-w: 51px; --hand-overlap: -.11; }
  #top-row { --card-w: 46px; }
  .slots { gap: 3px; }
  #hand { padding: 0; }
  #sidebar { grid-template-columns: .95fr 1.05fr 1.2fr; gap: 6px; padding-left: 8px; padding-right: 8px; }
  .blind-name { font-size: 1.15rem; }
  .blind-target .v { font-size: 1.25rem; }
  .btn-small { font-size: 1rem; }
  #sidebar { grid-template-areas: "blind score hand" "counters counters counters" "buttons buttons buttons"; }
  #sidebar-buttons { flex-direction: row; gap: 8px; }
  #sidebar-buttons .btn { flex: 1 1 0; }
  .counter-label, .ink-box .box-label, .glow-box .box-label, .score-label, .blind-target .k { font-size: .66rem; letter-spacing: 0; }
  #blind-panel:has(.blind-emblem) .blind-name { font-size: 1rem; padding-right: 24px; }
  .price-tag.sell { padding: 0 5px 0 12px; font-size: .85rem; max-width: 100%; }
  .price-tag .pt-word { display: none; }
  .counters .counter { padding: 2px 4px 1px; }
  .counter-sends .counter-value, .counter-crumples .counter-value { font-size: 1.45rem; }
}

/* ---------- 15. reduced motion: no ambient loops, no big movement ---------- */
@media (prefers-reduced-motion: reduce) {
  .ma-tw, .ma-tail, .ma-shimmer, .ma-gl, .pulse, .plane-fly, .ma-burst .ma-tw, #scene .ma-sun-rays, #scene .ma-sun-shine, #scene svg.ma-plane-deco { animation: none !important; }
  .ma-win .ma-pane, .ma-win .ma-mull, .ma-win .ma-wglow { transition-duration: .01s; }
  .card, .keepsake, .consumable, .btn { transition: none; }
  .card.dealing, .card.scoring, .jiggle, .modal, #overlay:not(:empty), .banner, .tooltip { animation: none !important; }
  .pop { animation: pop-fade 1.4s linear forwards; }
  @keyframes pop-fade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
}