/* Look "paper": design concept A "Vystrihovačka" (cut paper). Every rule is scoped to
   html[data-style="paper"]; keyframes are prefixed pp- so they never clash with another look. */
/* Vibe Story UI shell, design concept A "Vystrihovačka" (cut paper).
   Everything looks cut out of coloured paper and glued on: slightly irregular edges (clip-path),
   a soft paper shadow under every piece, one page-wide paper grain, thin ink doodles.
   Mobile-first (390 px portrait), tap targets >= 64 px. Cheap on purpose: no SVG filters on elements,
   the paper pieces are two clipped pseudo-elements (shadow + fill), the grain is one static layer. */
html[data-style="paper"]{
  --paper:#f3ebdd; --cream:#fbf6ec; --red:#e4432d; --red-d:#b8321f; --yellow:#f6c343; --cobalt:#2b4fa3;
  --green:#3e9c5a; --deep:#2c6e41; --pink:#f1a3b8; --sky:#86c5e6; --ochre:#d8932a; --ink:#1f1d2b;
  --ink-soft:#5d5566; --line:#e3d6bf; --note:#fbe7a6; --shadow:rgba(74,42,18,.24);
  --tap:64px;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px);
  --disp:"Bagel Fat One","Arial Rounded MT Bold","Trebuchet MS",ui-rounded,system-ui,sans-serif;
  --text:Andika,"Andika New Basic","Trebuchet MS",ui-rounded,system-ui,sans-serif;
  /* cut edges: a few px of wobble whatever the size of the piece */
  --cut1:polygon(1px 3px,24% 0,51% 2px,77% 0,calc(100% - 1px) 2px,100% 38%,calc(100% - 2px) 71%,100% calc(100% - 2px),74% 100%,47% calc(100% - 3px),21% 100%,2px calc(100% - 1px),0 62%,2px 30%);
  --cut2:polygon(0 1px,31% 3px,60% 0,86% 2px,100% 0,calc(100% - 2px) 47%,100% calc(100% - 3px),68% 100%,39% calc(100% - 2px),11% 100%,0 calc(100% - 3px),3px 52%);
  --cut3:polygon(3px 0,41% 2px,72% 0,calc(100% - 2px) 3px,100% 56%,calc(100% - 1px) 100%,57% calc(100% - 2px),26% 100%,0 calc(100% - 1px),1px 41%);
  --cut-round:polygon(99.4% 50%,97% 62.6%,92.6% 74.6%,84.7% 84.7%,74.5% 92.4%,62.5% 96.8%,50% 99.8%,37% 98.3%,25.4% 92.7%,15.3% 84.7%,6.6% 75.1%,1.6% 63%,.7% 50%,2.8% 37.4%,6.6% 25%,14.7% 14.7%,25.6% 7.7%,37.1% 2%,50% 1.5%,62.8% 2.1%,74.9% 6.9%,84.2% 15.8%,92.8% 25.3%,98.4% 37%);
  --cut-burst:polygon(50% 0,60.1% 12.3%,75% 6.7%,77.6% 22.4%,93.3% 25%,87.7% 39.9%,100% 50%,87.7% 60.1%,93.3% 75%,77.6% 77.6%,75% 93.3%,60.1% 87.7%,50% 100%,39.9% 87.7%,25% 93.3%,22.4% 77.6%,6.7% 75%,12.3% 60.1%,0 50%,12.3% 39.9%,6.7% 25%,22.4% 22.4%,25% 6.7%,39.9% 12.3%);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .22 0 0 0 0 .12 0 0 0 .9 -.28'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --doodle-tr:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 90'%3E%3Cg fill='none' stroke='%231f1d2b' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M14 20 l7 7 m0 -7 l-7 7'/%3E%3Cpath d='M52 8 l7 -7 l7 7 l7 -7 l7 7 l7 -7'/%3E%3Cpath d='M100 50 l6 6 m0 -6 l-6 6'/%3E%3Cpath d='M40 70 q8 -7 16 0 t16 0'/%3E%3C/g%3E%3C/svg%3E");
  --doodle-bl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 110'%3E%3Cg fill='none' stroke='%231f1d2b' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M22 108 C24 84 18 64 22 40'/%3E%3Cpath d='M21 76 C10 70 6 62 8 54 C16 56 21 64 21 76Z'/%3E%3Cpath d='M22 92 C33 86 38 78 37 70 C29 72 23 80 22 92Z'/%3E%3Cpath d='M70 30 l6 6 m0 -6 l-6 6'/%3E%3Cpath d='M60 96 q8 -7 16 0 t16 0'/%3E%3C/g%3E%3Cg fill='%23e4432d'%3E%3Ccircle cx='22' cy='24' r='7'/%3E%3Ccircle cx='30.7' cy='29' r='7'/%3E%3Ccircle cx='30.7' cy='39' r='7'/%3E%3Ccircle cx='22' cy='44' r='7'/%3E%3Ccircle cx='13.3' cy='39' r='7'/%3E%3Ccircle cx='13.3' cy='29' r='7'/%3E%3C/g%3E%3Ccircle cx='22' cy='34' r='6' fill='%23f6c343'/%3E%3Ccircle cx='22' cy='34' r='2.2' fill='%231f1d2b'/%3E%3C/svg%3E");
  --hills:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cpath d='M0 34 C80 14 170 28 250 24 C320 20 360 8 400 16 V120 H0Z' fill='%234a2a12' opacity='.2' transform='translate(2 3)'/%3E%3Cpath d='M0 34 C80 14 170 28 250 24 C320 20 360 8 400 16 V120 H0Z' fill='%23f6c343'/%3E%3Cpath d='M0 64 C90 44 200 60 290 52 C340 48 370 44 400 46 V120 H0Z' fill='%234a2a12' opacity='.2' transform='translate(2 3)'/%3E%3Cpath d='M0 64 C90 44 200 60 290 52 C340 48 370 44 400 46 V120 H0Z' fill='%233e9c5a'/%3E%3C/svg%3E");
  --flower:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-22 -22 44 44'%3E%3Cg fill='%23e4432d'%3E%3Ccircle cx='0' cy='-12' r='8.5'/%3E%3Ccircle cx='10.4' cy='-6' r='8.5'/%3E%3Ccircle cx='10.4' cy='6' r='8.5'/%3E%3Ccircle cx='0' cy='12' r='8.5'/%3E%3Ccircle cx='-10.4' cy='6' r='8.5'/%3E%3Ccircle cx='-10.4' cy='-6' r='8.5'/%3E%3C/g%3E%3Ccircle r='7.5' fill='%23f6c343'/%3E%3Ccircle r='2.6' fill='%231f1d2b'/%3E%3C/svg%3E");
  --sun:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'%3E%3Cpolygon points='0.0,-47.0 9.3,-34.8 23.5,-40.7 25.5,-25.5 40.7,-23.5 34.8,-9.3 47.0,0.0 34.8,9.3 40.7,23.5 25.5,25.5 23.5,40.7 9.3,34.8 0.0,47.0 -9.3,34.8 -23.5,40.7 -25.5,25.5 -40.7,23.5 -34.8,9.3 -47.0,0.0 -34.8,-9.3 -40.7,-23.5 -25.5,-25.5 -23.5,-40.7 -9.3,-34.8' fill='%234a2a12' opacity='.2' transform='translate(2 3)'/%3E%3Cpolygon points='0.0,-47.0 9.3,-34.8 23.5,-40.7 25.5,-25.5 40.7,-23.5 34.8,-9.3 47.0,0.0 34.8,9.3 40.7,23.5 25.5,25.5 23.5,40.7 9.3,34.8 0.0,47.0 -9.3,34.8 -23.5,40.7 -25.5,25.5 -40.7,23.5 -34.8,9.3 -47.0,0.0 -34.8,-9.3 -40.7,-23.5 -25.5,-25.5 -23.5,-40.7 -9.3,-34.8' fill='%23f6c343'/%3E%3Ccircle r='30' fill='%23f6c343'/%3E%3C/svg%3E");
  color-scheme:light;
}
html[data-style="paper"] *{box-sizing:border-box}
html[data-style="paper"],html[data-style="paper"] body{margin:0;height:100%;overflow:hidden}
html[data-style="paper"] body{
  background:var(--paper);color:var(--ink);font-family:var(--text);font-size:18px;line-height:1.38;
  -webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;
  overflow-wrap:normal;word-break:normal;hyphens:manual;
}
/* one paper grain over everything (a tiled 240 px noise tile, rendered once); off while a game runs */
html[data-style="paper"] body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;background-image:var(--grain);opacity:.42}
html[data-style="paper"] body[data-current="game"]::after,html[data-style="paper"] body[data-current="custom"]::after{display:none}
html[data-style="paper"] button,html[data-style="paper"] input,html[data-style="paper"] textarea{font:inherit;color:inherit}
html[data-style="paper"] h1,html[data-style="paper"] h2,html[data-style="paper"] h3{text-wrap:balance}
html[data-style="paper"] p,html[data-style="paper"] small,html[data-style="paper"] li{text-wrap:pretty}
html[data-style="paper"] [hidden]{display:none !important}
/* this look shows the cut-paper drawings (.v-art) and ornaments (.deco), not the emoji pictures */
html[data-style="paper"] .v-emoji{display:none !important}
html[data-style="paper"] .ic{width:1.05em;height:1.05em;flex:none;display:block}
html[data-style="paper"] .ic--star{width:1.15em;height:1.15em}

html[data-style="paper"] #game-canvas{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}

/* ---------- screens ---------- */
html[data-style="paper"] .screen{
  position:fixed;inset:0;height:100vh;height:100dvh;overflow-x:hidden;overflow-y:auto;
  display:flex;flex-direction:column;align-items:center;
  padding:calc(var(--safe-t) + 14px) calc(var(--safe-r) + 16px) calc(var(--safe-b) + 16px) calc(var(--safe-l) + 16px);
  background:var(--doodle-tr) right 6px top 76px / 118px auto no-repeat, var(--paper);
}
/* screens with room at the bottom also get a flower on a stem */
html[data-style="paper"] .screen--pick,html[data-style="paper"] .screen--making:not(.screen--inventing){background:var(--doodle-tr) right 6px top 76px / 118px auto no-repeat, var(--doodle-bl) left 4px bottom 84px / 104px auto no-repeat, var(--paper)}
html[data-style="paper"] .screen--overlay{justify-content:flex-start;background:linear-gradient(to top, rgba(31,29,43,.26), transparent 60%)}
html[data-style="paper"] .screen--overlay > .card{margin-top:auto;flex:none}          /* a bottom sheet that still scrolls when taller than the screen */
@media (min-aspect-ratio: 4/3){ html[data-style="paper"] .screen--overlay{align-items:flex-end;padding-right:calc(var(--safe-r) + 5vw)} html[data-style="paper"] .screen--overlay > .card{margin-bottom:auto} }
html[data-style="paper"] .stack{display:flex;flex-direction:column;gap:14px;width:100%}
html[data-style="paper"] .row{display:flex;gap:12px;align-items:center;width:100%}
html[data-style="paper"] .grow{flex:1}

/* ================= paper pieces =================
   Every piece: transparent box + ::before (shadow, offset) + ::after (fill), both cut with --cut.
   The content (and the focus outline) is never clipped. */
html[data-style="paper"] :is(.btn,.card,.tile,.swatch,.chip,.theme,.choice,.lab-card,.model,.music-toggle,.look,.look-opt,.hearts,.count,.toast,
    .note-paper,.grownup--label,.eyebrow,.score,.preview--scene,.custom-exit,.call,.timebar,.note,.story-msg,.edit-msg,
    .stub-note,.code-msg--wrong,.lab-sub){
  position:relative;isolation:isolate;border:0;background:none;--pc:var(--cream);
}
html[data-style="paper"] :is(.btn,.card,.tile,.swatch,.chip,.theme,.choice,.lab-card,.model,.music-toggle,.look,.look-opt,.hearts,.count,.toast,
    .note-paper,.grownup--label,.eyebrow,.score,.preview--scene,.custom-exit,.call,.timebar,.note,.story-msg,.edit-msg,
    .stub-note,.code-msg--wrong,.lab-sub)::before,html[data-style="paper"] :is(.btn,.card,.tile,.swatch,.chip,.theme,.choice,.lab-card,.model,.music-toggle,.look,.look-opt,.hearts,.count,.toast,
    .note-paper,.grownup--label,.eyebrow,.score,.preview--scene,.custom-exit,.call,.timebar,.note,.story-msg,.edit-msg,
    .stub-note,.code-msg--wrong,.lab-sub)::after{
  content:"";position:absolute;inset:var(--in,0);pointer-events:none;clip-path:var(--cut,var(--cut1));
}
html[data-style="paper"] :is(.btn,.card,.tile,.swatch,.chip,.theme,.choice,.lab-card,.model,.music-toggle,.look,.look-opt,.hearts,.count,.toast,
    .note-paper,.grownup--label,.eyebrow,.score,.preview--scene,.custom-exit,.call,.timebar,.note,.story-msg,.edit-msg,
    .stub-note,.code-msg--wrong,.lab-sub)::before{
  z-index:-2;background:var(--shadow);transform:translate(var(--sx,2px),var(--sy,3px));
}
html[data-style="paper"] :is(.btn,.card,.tile,.swatch,.chip,.theme,.choice,.lab-card,.model,.music-toggle,.look,.look-opt,.hearts,.count,.toast,
    .note-paper,.grownup--label,.eyebrow,.score,.preview--scene,.custom-exit,.call,.timebar,.note,.story-msg,.edit-msg,
    .stub-note,.code-msg--wrong,.lab-sub)::after{
  z-index:-1;background:var(--pc);
}
/* the little red star with a tick on the chosen piece */
html[data-style="paper"] .art-tick{position:absolute;top:-10px;right:-8px;width:30px;height:30px;z-index:2;display:none;pointer-events:none}
html[data-style="paper"] [aria-checked="true"] > .art-tick,html[data-style="paper"] [aria-pressed="true"] > .art-tick{display:block}
html[data-style="paper"] :focus-visible{outline:4px solid var(--cobalt);outline-offset:4px}

/* ---------- paper-label buttons ---------- */
html[data-style="paper"] .btn{
  --pc:var(--red);--tilt:0deg;color:var(--cream);
  min-height:var(--tap);padding:12px 24px 10px;border-radius:10px;cursor:pointer;
  font-family:var(--disp);font-weight:400;font-size:24px;line-height:1.08;letter-spacing:.005em;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;text-align:center;
  transform:rotate(var(--tilt));transition:transform .08s;touch-action:manipulation;margin-top:4px;
}
html[data-style="paper"] .btn:active{transform:translate(1px,2px) rotate(var(--tilt))}
html[data-style="paper"] .btn:active::before{transform:translate(1px,1px)}
@media (hover:hover){ html[data-style="paper"] .btn:hover{transform:translateY(-1px) rotate(var(--tilt))} }
html[data-style="paper"] .btn--xl{min-height:78px;font-size:30px;--tilt:-1deg}
html[data-style="paper"] .btn--red{--pc:var(--red);--tilt:-1.2deg}
html[data-style="paper"] .btn--green{--pc:var(--green);--tilt:-.6deg}
html[data-style="paper"] .btn--blue{--pc:var(--cobalt);--tilt:.6deg}
html[data-style="paper"] .btn--yellow{--pc:var(--yellow);color:var(--ink);--tilt:-.5deg;--cut:var(--cut2)}
html[data-style="paper"] .btn--ghost{--pc:var(--cream);color:var(--ink);--tilt:.7deg;--cut:var(--cut3)}
html[data-style="paper"] .btn--star .ic--star{width:30px;height:30px}
html[data-style="paper"] .btn--icon{--cut:var(--cut-round);--tilt:0deg;width:var(--tap);min-width:var(--tap);height:var(--tap);padding:0;border-radius:50%;flex:none}
html[data-style="paper"] .btn--icon .ic{width:28px;height:28px}
html[data-style="paper"] .btn[disabled]{opacity:.5;pointer-events:none}

/* ---------- start ---------- */
html[data-style="paper"] .screen--start{background:var(--paper);padding-top:calc(var(--safe-t) + 12px)}
html[data-style="paper"] .start-scene{position:absolute;inset:0;pointer-events:none;overflow:hidden;min-height:100%}
html[data-style="paper"] .start-scene svg{position:absolute;overflow:visible}
html[data-style="paper"] .sc-blob{left:0;top:0;width:min(66vw,300px);height:auto}
html[data-style="paper"] .sc-sun{right:max(-5vw,-40px);top:0;width:min(40vw,190px);height:auto}
html[data-style="paper"] .sc-doodles{left:50%;top:0;width:min(100%,520px);transform:translateX(-50%);height:auto}
html[data-style="paper"] .sc-hills{left:0;right:0;bottom:0;width:100%;height:40%}
html[data-style="paper"] .start-top{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;width:min(640px,100%);flex:none}
html[data-style="paper"] .start-body{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;gap:12px;width:min(560px,100%);min-height:0;padding-top:clamp(0px,2.4dvh,24px)}
html[data-style="paper"] .start-body .stack{width:min(420px,100%);flex:none}
html[data-style="paper"] .screen--start .grownup--label{position:relative;z-index:1;flex:none;margin-top:12px}
html[data-style="paper"] .logo{margin:0;font-family:var(--disp);font-weight:400;line-height:.9;font-size:clamp(56px,min(23vw,11.5dvh),104px)}
html[data-style="paper"] .logo-paper{display:flex;flex-direction:column;align-items:center}
html[data-style="paper"] .logo-paper span span{display:inline-block;transform:translateY(var(--y,0)) rotate(var(--r,0deg))}
html[data-style="paper"] .logo-top{display:flex;white-space:nowrap}
html[data-style="paper"] .logo-top span{text-shadow:2px 4px 0 rgba(74,42,18,.22)}
html[data-style="paper"] .logo-strip{position:relative;isolation:isolate;display:flex;white-space:nowrap;margin-top:.02em;padding:.08em .34em .16em;font-size:.76em;transform:rotate(-3deg)}
html[data-style="paper"] .logo-strip::before,html[data-style="paper"] .logo-strip::after{content:"";position:absolute;inset:0;clip-path:var(--cut2)}
html[data-style="paper"] .logo-strip::before{z-index:-2;background:var(--shadow);transform:translate(2px,4px)}
html[data-style="paper"] .logo-strip::after{z-index:-1;background:var(--cobalt)}
html[data-style="paper"] .tagline{margin:0;text-align:center;font-size:20px;line-height:1.35;font-weight:700;max-width:22ch}
html[data-style="paper"] .start-heroes{flex:1 1 0;min-height:0;width:min(420px,100%);display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none}
html[data-style="paper"] .start-hero{height:min(100%,290px);width:auto;max-width:54%;overflow:visible}
html[data-style="paper"] .start-hero--a{margin-left:-12px}
html[data-style="paper"] .start-hero--b{transform:scaleX(-1);height:min(90%,262px);margin-right:-8px}
html[data-style="paper"] .grownup{margin:12px 0 0;font-size:15px;color:var(--ink-soft);text-align:center;max-width:36ch}
html[data-style="paper"] .grownup--label{margin:2px 0 0;padding:12px 22px;font-size:14.5px;font-weight:700;color:var(--ink);max-width:min(420px,100%);--cut:var(--cut3);transform:rotate(.6deg)}
html[data-style="paper"] .music-toggle{min-height:var(--tap);padding:8px 16px;border-radius:10px;cursor:pointer;font-weight:700;font-size:16px;display:inline-flex;align-items:center;gap:8px;--cut:var(--cut2);transform:rotate(1.2deg)}
html[data-style="paper"] .music-toggle .ic{width:22px;height:22px}
html[data-style="paper"] .btn .ic{width:1em;height:1em}
@media (max-height:700px) and (max-aspect-ratio: 4/3){ html[data-style="paper"] .start-body{gap:8px;padding-top:0} html[data-style="paper"] .logo{font-size:clamp(48px,10dvh,80px)} html[data-style="paper"] .tagline{font-size:18px} }

/* ---------- game look switch (Paper / Blocks) ---------- */
html[data-style="paper"] .look{display:inline-flex;align-items:stretch;gap:0;padding:0;--cut:var(--cut1);transform:rotate(-1deg)}
html[data-style="paper"] .look-label{align-self:center;padding:0 2px 0 12px;font-family:var(--disp);font-size:15px;color:var(--ink)}
html[data-style="paper"] .look-opt{--in:5px;--pc:transparent;--sx:0;--sy:0;min-width:var(--tap);min-height:var(--tap);padding:6px 7px 5px;border-radius:10px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-weight:700;font-size:13px;line-height:1.1;color:var(--ink);touch-action:manipulation}
html[data-style="paper"] .look-opt .ic{width:26px;height:26px}
html[data-style="paper"] .look-opt::before{display:none}
html[data-style="paper"] .look-opt[aria-pressed="true"]{--pc:var(--yellow);--cut:var(--cut2)}
html[data-style="paper"] .look-opt[aria-pressed="true"]::before{display:block;transform:translate(1px,2px)}
html[data-style="paper"] .look-opt:active{transform:translate(1px,1px)}
html[data-style="paper"] .look--mini{position:absolute;z-index:2;top:8px;right:8px;transform:rotate(1.5deg)}
html[data-style="paper"] .look .ic{display:block}
html[data-style="paper"] .look--mini .look-label{font-size:13px;padding-left:10px}
html[data-style="paper"] .look--mini .look-opt{min-width:64px}
html[data-style="paper"] .card--pause .look{align-self:center;margin:2px 0}

/* ---------- cards ---------- */
html[data-style="paper"] .card{
  --pc:var(--cream);--cut:var(--cut2);--sx:3px;--sy:5px;--tilt:-.4deg;
  width:min(520px,100%);padding:24px 22px 22px;display:flex;flex-direction:column;gap:10px;
  transform:rotate(var(--tilt));animation:pp-rise .38s cubic-bezier(.2,1.4,.4,1) both;
}
html[data-style="paper"] .card::before{background:rgba(58,36,16,.3)}
@keyframes pp-rise{from{transform:translateY(34px) rotate(2deg);opacity:0}to{transform:rotate(var(--tilt));opacity:1}}
html[data-style="paper"] .card h2{margin:0;font-family:var(--disp);font-weight:400;font-size:clamp(30px,8.4vw,40px);line-height:1.04}
html[data-style="paper"] .eyebrow{align-self:flex-start;--pc:var(--red);--cut:var(--cut3);--sx:1px;--sy:2px;color:var(--cream);padding:6px 12px 5px;
  font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;transform:rotate(-2deg);margin-bottom:2px}
html[data-style="paper"] .story-text{margin:0;font-size:20px;line-height:1.45}
html[data-style="paper"] .goal{margin:0;padding-left:32px;font-size:18px;font-weight:700;color:var(--cobalt);background:var(--flower) left 0 top .08em / 24px 24px no-repeat}
html[data-style="paper"] .keys{margin:0;font-size:15px;color:var(--ink-soft)}
html[data-style="paper"] .score{align-self:flex-start;margin:2px 0;--pc:var(--yellow);--cut:var(--cut3);--sx:1.5px;--sy:2.5px;padding:8px 14px 7px;font-size:18px;font-weight:700;transform:rotate(-1.2deg)}
html[data-style="paper"] .note{--pc:var(--note);--cut:var(--cut1);--sx:1.5px;--sy:2.5px;display:flex;flex-direction:column;gap:3px;margin-top:6px;padding:12px 14px;font-size:15px;transform:rotate(.8deg)}
html[data-style="paper"] .story-msg{--pc:#cfe8d3;--cut:var(--cut3);--sx:1px;--sy:2px;margin:0;padding:10px 14px;color:var(--deep);font-size:17px;font-weight:700}
html[data-style="paper"] .card .row .btn{margin-top:0}
/* end card: "Yay!" burst behind a win, a pink strip behind a good try */
html[data-style="paper"] .card--end h2{align-self:center;text-align:center;position:relative;isolation:isolate;padding:28px 40px;color:var(--red);transform:rotate(-4deg);margin:-6px 0 2px}
html[data-style="paper"] .card--end h2::before,html[data-style="paper"] .card--end h2::after{content:"";position:absolute;inset:0;clip-path:var(--cut-burst)}
html[data-style="paper"] .card--end h2::before{z-index:-2;background:var(--shadow);transform:translate(2px,3px)}
html[data-style="paper"] .card--end h2::after{z-index:-1;background:var(--yellow)}
html[data-style="paper"] [data-result="retry"] .card--end h2{padding:10px 22px 12px;color:var(--ink);transform:rotate(-2deg);margin:0}
html[data-style="paper"] [data-result="retry"] .card--end h2::before,html[data-style="paper"] [data-result="retry"] .card--end h2::after{clip-path:var(--cut3)}
html[data-style="paper"] [data-result="retry"] .card--end h2::after{background:var(--pink)}
/* the friendly stat line is just a little handwritten note on the card, never a paper label (kids would tap it) */
html[data-style="paper"] .card--end .score{align-self:center;text-align:center;transform:rotate(-1deg);padding:0 6px 4px;margin:0;
  font-size:16px;font-weight:400;font-style:italic;color:var(--ink-soft);cursor:default;
  background:linear-gradient(currentColor,currentColor) center bottom / 60% 1px no-repeat}
html[data-style="paper"] .card--end .score::before,html[data-style="paper"] .card--end .score::after{content:none}

/* ---------- game HUD (element ids stay the same: the engine fills them) ---------- */
html[data-style="paper"] .screen--game{padding:0;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;background:none}
html[data-style="paper"] .hud{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:12px;
  padding:calc(var(--safe-t) + 12px) calc(var(--safe-r) + 14px) 0 calc(var(--safe-l) + 14px);z-index:3;pointer-events:none}
html[data-style="paper"] .hud .btn{pointer-events:auto;margin-top:0}
html[data-style="paper"] .timebar{flex:1;height:26px;--cut:var(--cut1);--sx:1.5px;--sy:2.5px;transform:rotate(-.8deg)}
html[data-style="paper"] .timebar i{position:absolute;inset:4px 5px;display:block;background:var(--red);transform-origin:left center;clip-path:var(--cut2)}
html[data-style="paper"] .hud-right{display:flex;align-items:center;gap:8px}
html[data-style="paper"] .hearts{display:flex;gap:1px;font-size:22px;line-height:1;padding:10px 12px 9px;--cut:var(--cut3);transform:rotate(1.2deg)}
html[data-style="paper"] .hearts .lost{opacity:.5}
html[data-style="paper"] .count{display:flex;align-items:center;gap:6px;min-height:56px;padding:6px 16px 4px 12px;font-family:var(--disp);font-size:28px;--cut:var(--cut2);transform:rotate(2deg)}
html[data-style="paper"] .count b{font-weight:400;font-variant-numeric:tabular-nums}
@media (max-width:420px){ html[data-style="paper"] .hearts{font-size:18px;padding:9px 9px 8px} html[data-style="paper"] .count{font-size:24px;min-height:52px} }

html[data-style="paper"] .zone{position:absolute;top:0;bottom:0;width:50%;display:flex;align-items:flex-end;justify-content:center;padding-bottom:calc(var(--safe-b) + 40px);pointer-events:none;opacity:0;transition:opacity .4s}
html[data-style="paper"] .zone span{font-size:40px;color:var(--ink);background:rgba(251,246,236,.82);width:92px;height:92px;border-radius:50%;display:grid;place-items:center;box-shadow:2px 4px 0 var(--shadow)}
html[data-style="paper"] .zone--left{left:0}html[data-style="paper"] .zone--right{right:0}
html[data-style="paper"] .zone.hint{opacity:1}
html[data-style="paper"] .zone.on{opacity:1;background:linear-gradient(to top, rgba(251,246,236,.2), transparent 50%)}
html[data-style="paper"] .zone.on span{background:var(--yellow)}

/* callouts: the concept's "Yay!" paper burst */
html[data-style="paper"] .call{position:absolute;left:50%;top:calc(var(--safe-t) + 92px);transform:translateX(-50%) rotate(-5deg);max-width:calc(100% - 24px);
  --cut:var(--cut-burst);padding:30px 42px;color:var(--red);font-family:var(--disp);font-size:28px;line-height:1;white-space:nowrap;pointer-events:none;z-index:2}
html[data-style="paper"] .call.show{animation:pp-pop-in .38s cubic-bezier(.2,1.6,.4,1)}
html[data-style="paper"] .oops{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);font-family:var(--disp);font-size:clamp(52px,15vw,88px);color:var(--red);
  -webkit-text-stroke:9px var(--cream);paint-order:stroke fill;text-shadow:3px 6px 0 rgba(74,42,18,.28);pointer-events:none;z-index:2;white-space:nowrap}
html[data-style="paper"] .oops.show{animation:pp-oops .9s ease-out both}
@keyframes pp-pop-in{from{transform:translateX(-50%) rotate(-14deg) scale(.5)}to{transform:translateX(-50%) rotate(-5deg) scale(1)}}
@keyframes pp-oops{0%{transform:translate(-50%,-50%) scale(.5) rotate(-8deg);opacity:0}20%{transform:translate(-50%,-50%) scale(1.1) rotate(4deg);opacity:1}100%{transform:translate(-50%,-80%) scale(1);opacity:0}}
html[data-style="paper"] .pops span{position:absolute;transform:translate(-50%,-50%);font-family:var(--disp);font-size:34px;color:var(--yellow);-webkit-text-stroke:7px var(--ink);paint-order:stroke fill;opacity:0;pointer-events:none;white-space:nowrap}
html[data-style="paper"] .pops span.show{animation:pp-float-up .9s ease-out both}
@keyframes pp-float-up{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}20%{opacity:1;transform:translate(-50%,-60%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-180%) scale(1)}}

html[data-style="paper"] .pause{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:16px;overflow-y:auto;background:rgba(31,29,43,.45)}
html[data-style="paper"] .card--pause{align-items:stretch;text-align:center;max-width:380px}
html[data-style="paper"] .card--pause h2{text-align:center}
html[data-style="paper"] .noscript{padding:24px;font-size:20px}

/* ---------- short landscape phones: compact cards on the right, hero stays visible on the left ---------- */
@media (max-height:520px) and (min-aspect-ratio: 4/3){
  html[data-style="paper"] .screen--overlay{padding-top:calc(var(--safe-t) + 10px);padding-bottom:calc(var(--safe-b) + 10px)}
  html[data-style="paper"] .card{width:min(440px,56%);padding:16px 18px 16px;gap:6px}
  html[data-style="paper"] .card h2{font-size:26px}
  html[data-style="paper"] .card--end h2{padding:18px 30px}
  html[data-style="paper"] .story-text{font-size:16.5px;line-height:1.35}
  html[data-style="paper"] .goal{font-size:16px;background-size:20px 20px;padding-left:28px}html[data-style="paper"] .keys{font-size:13px}
  html[data-style="paper"] .btn{font-size:20px;min-height:var(--tap)}
  html[data-style="paper"] .btn--xl{min-height:var(--tap);font-size:24px}
  html[data-style="paper"] .card .stack{gap:10px}
  html[data-style="paper"] .call{top:calc(var(--safe-t) + 76px);font-size:22px;padding:22px 32px}
  html[data-style="paper"] .card--pause{max-width:420px}
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce){
  html[data-style="paper"] *,html[data-style="paper"] *::before,html[data-style="paper"] *::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html[data-style="paper"] .call.show,html[data-style="paper"] .oops.show,html[data-style="paper"] .pops span.show{animation:none}
  html[data-style="paper"] .oops.show{opacity:1}
  html[data-style="paper"] .pops span.show{opacity:1}
}

/* ================= hero choice, builder, photo, parent, making ================= */
html[data-style="paper"] .topbar{display:flex;align-items:center;gap:14px;width:min(640px,100%);flex:none;position:relative;z-index:1}
html[data-style="paper"] .topbar .btn{margin-top:0}
html[data-style="paper"] .topbar-title{margin:0;font-family:var(--disp);font-weight:400;font-size:clamp(26px,7.4vw,34px);line-height:1.05}
html[data-style="paper"] .lead{margin:0;font-size:20px;line-height:1.4;text-align:center;max-width:30ch}

/* who is the hero: three big paper cards over a strip of hills */
html[data-style="paper"] .screen--pick{padding-bottom:0}
html[data-style="paper"] .choices{flex:1;display:flex;flex-direction:column;justify-content:center;gap:24px;width:min(520px,100%);padding:18px 4px 28px;position:relative;z-index:1}
html[data-style="paper"] .choice{--cut:var(--cut1);--sx:3px;--sy:4px;display:flex;align-items:center;gap:14px;min-height:118px;padding:12px 18px 12px 10px;
  cursor:pointer;text-align:left;transform:rotate(var(--tilt,0deg));transition:transform .08s;touch-action:manipulation;border-radius:12px}
html[data-style="paper"] .choice:active{transform:translate(1px,2px) rotate(var(--tilt,0deg))}
html[data-style="paper"] .choice--build{--pc:var(--yellow);--tilt:-1.2deg}
html[data-style="paper"] .choice--photo{--pc:var(--sky);--tilt:.9deg;--cut:var(--cut2)}
html[data-style="paper"] .choice--surprise{--pc:var(--pink);--tilt:-.6deg;--cut:var(--cut3)}
html[data-style="paper"] .choice-art{flex:none;width:104px;height:88px;display:block}
html[data-style="paper"] .choice-art svg{width:100%;height:100%;overflow:visible}
html[data-style="paper"] .choice-text{display:flex;flex-direction:column;gap:3px}
html[data-style="paper"] .choice-text b{font-family:var(--disp);font-weight:400;font-size:28px;line-height:1.05}
html[data-style="paper"] .choice-text small{font-size:17px;font-weight:700;color:rgba(31,29,43,.72)}
html[data-style="paper"] .ground{flex:none;width:calc(100% + 32px + var(--safe-l) + var(--safe-r));height:calc(84px + var(--safe-b));margin-top:auto;background:var(--hills) center top / 100% 110px no-repeat}
@media (min-aspect-ratio: 4/3) and (min-width:700px){
  html[data-style="paper"] .choices{flex-direction:row;align-items:center;width:min(940px,100%);gap:20px}
  html[data-style="paper"] .choice{flex:1;flex-direction:column;text-align:center;justify-content:center;min-height:min(250px,58dvh);padding:16px 12px}
  html[data-style="paper"] .choice-art{width:132px;height:110px}
}
@media (min-aspect-ratio: 4/3) and (max-height:520px){ html[data-style="paper"] .ground{height:calc(46px + var(--safe-b));background-size:100% 70px} html[data-style="paper"] .choices{padding:10px 4px 12px} html[data-style="paper"] .choice-art{width:112px;height:86px} }

/* builder */
html[data-style="paper"] .screen--builder{gap:8px;padding-bottom:0}
html[data-style="paper"] .progress{flex:1;display:flex;flex-direction:column;gap:6px}
html[data-style="paper"] .step-label{font-size:15px;color:#4b3f36;font-weight:700}
html[data-style="paper"] .dots{display:flex;gap:5px}
html[data-style="paper"] .dots i{flex:1;height:12px;background:var(--line);display:block;clip-path:polygon(2% 12%,98% 0,100% 88%,0 100%)}
html[data-style="paper"] .dots i.done,html[data-style="paper"] .dots i.now{background:var(--red)}
html[data-style="paper"] .progress .step-label{order:-1}
html[data-style="paper"] .preview{position:relative;flex:none;width:min(420px,100%);height:clamp(150px,27dvh,280px)}
html[data-style="paper"] .preview--scene{--pc:var(--sky);--cut:var(--cut2)}
html[data-style="paper"] .preview .scene{position:absolute;inset:0;width:100%;height:100%;clip-path:var(--cut2);pointer-events:none}
html[data-style="paper"] .preview-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
html[data-style="paper"] .b-title{margin:6px 0 2px;font-family:var(--disp);font-weight:400;font-size:clamp(26px,7.6vw,34px);line-height:1.05;text-align:center}
html[data-style="paper"] .options{flex:1;min-height:0;width:min(560px,100%);display:grid;gap:10px;align-content:start;overflow-y:auto;padding:12px 8px 16px}
html[data-style="paper"] .grid--4{grid-template-columns:repeat(4,1fr)}
html[data-style="paper"] .grid--2{grid-template-columns:repeat(2,1fr)}
html[data-style="paper"] .grid--colors{grid-template-columns:repeat(4,1fr);justify-items:center;gap:14px 12px}
html[data-style="paper"] .tile{--tilt:0deg;min-height:96px;padding:4px 2px 7px;border-radius:10px;cursor:pointer;touch-action:manipulation;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:0;transform:rotate(var(--tilt));transition:transform .08s}
html[data-style="paper"] .tile:nth-child(6n+1){--tilt:-1.6deg}html[data-style="paper"] .tile:nth-child(6n+2){--tilt:1.2deg;--cut:var(--cut2)}html[data-style="paper"] .tile:nth-child(6n+3){--tilt:-.6deg;--cut:var(--cut3)}
html[data-style="paper"] .tile:nth-child(6n+4){--tilt:1.8deg}html[data-style="paper"] .tile:nth-child(6n+5){--tilt:.8deg;--cut:var(--cut3)}html[data-style="paper"] .tile:nth-child(6n){--tilt:-1.4deg;--cut:var(--cut2)}
html[data-style="paper"] .tile:active{transform:translate(1px,2px) rotate(var(--tilt))}
html[data-style="paper"] .tile-icon{display:block;width:100%;height:66px}
html[data-style="paper"] .tile-art{width:100%;height:100%;overflow:visible}
html[data-style="paper"] .tile-label{font-size:14px;font-weight:700;line-height:1.1;text-align:center;padding:0 2px}
html[data-style="paper"] .grid--2 .tile{min-height:140px}html[data-style="paper"] .grid--2 .tile-icon{height:104px}html[data-style="paper"] .grid--2 .tile-label{font-size:19px}
html[data-style="paper"] .tile[aria-checked="true"]{--pc:var(--yellow);--tilt:-2.5deg}
html[data-style="paper"] .swatch{--pc:var(--sw);--tilt:0deg;width:100%;max-width:84px;aspect-ratio:1;min-height:64px;border-radius:10px;cursor:pointer;touch-action:manipulation;transform:rotate(var(--tilt));transition:transform .08s}
html[data-style="paper"] .swatch:nth-child(4n+1){--tilt:-2deg}html[data-style="paper"] .swatch:nth-child(4n+2){--tilt:1.5deg;--cut:var(--cut2)}html[data-style="paper"] .swatch:nth-child(4n+3){--tilt:-1deg;--cut:var(--cut3)}html[data-style="paper"] .swatch:nth-child(4n){--tilt:2.2deg;--cut:var(--cut2)}
html[data-style="paper"] .swatch--light::after{box-shadow:inset 0 0 0 2px var(--line)}
html[data-style="paper"] .swatch[aria-checked="true"]{transform:rotate(calc(var(--tilt) - 4deg)) scale(1.08)}
html[data-style="paper"] .bottombar{position:sticky;bottom:0;z-index:3;display:flex;gap:14px;width:min(560px,100%);padding:12px 2px calc(var(--safe-b) + 14px);background:linear-gradient(to top, var(--paper) 72%, rgba(243,235,221,0))}
html[data-style="paper"] .bottombar .btn{margin-top:0}
html[data-style="paper"] .b-next{font-size:28px}
@media (min-aspect-ratio: 4/3) and (max-height:600px){
  html[data-style="paper"] .screen--builder{display:grid;grid-template-columns:minmax(220px,38%) 1fr;grid-template-rows:auto auto 1fr auto;column-gap:20px;align-items:start;justify-items:center}
  html[data-style="paper"] .screen--builder .topbar{grid-column:1/-1}
  html[data-style="paper"] .screen--builder .preview{grid-column:1;grid-row:2/5;height:calc(100% - 14px);min-height:160px;margin-top:4px}
  html[data-style="paper"] .screen--builder .b-title{grid-column:2;margin:0;font-size:26px}
  html[data-style="paper"] .screen--builder .options{grid-column:2;grid-row:3;padding-top:12px;height:100%}
  html[data-style="paper"] .screen--builder .bottombar{grid-column:2;grid-row:4}
  html[data-style="paper"] .grid--4,html[data-style="paper"] .grid--colors{grid-template-columns:repeat(6,1fr)}
  html[data-style="paper"] .grid--2{grid-template-columns:repeat(4,1fr)}
  html[data-style="paper"] .grid--2 .tile{min-height:120px}html[data-style="paper"] .grid--2 .tile-icon{height:84px}
  html[data-style="paper"] .tile{min-height:78px}html[data-style="paper"] .tile-icon{height:50px}html[data-style="paper"] .tile-label{font-size:13px}
  html[data-style="paper"] .screen--builder .options{gap:8px;padding:8px 8px 6px}
}
/* short landscape: no room for doodles next to the content, and a smaller hero on the forms */
@media (max-height:520px) and (min-aspect-ratio: 4/3){
  html[data-style="paper"] .screen--lab,html[data-style="paper"] .screen--builder,html[data-style="paper"] .screen--photo,html[data-style="paper"] .screen--form,html[data-style="paper"] .screen--making{background:var(--paper)}
  html[data-style="paper"] .preview--mini{width:118px;height:118px}
}

/* photo */
html[data-style="paper"] .screen--photo{justify-content:space-between}
html[data-style="paper"] .photo-body{flex:1;display:flex;align-items:center;justify-content:center;width:min(480px,100%);padding:10px 0}
html[data-style="paper"] .photo-state{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%}
html[data-style="paper"] .photo-state .btn{width:100%}
html[data-style="paper"] .photo-art{position:relative;width:170px;height:190px}
html[data-style="paper"] .photo-art > svg{width:100%;height:100%;overflow:visible}
html[data-style="paper"] .photo-cam{position:absolute;right:-58px;bottom:6px;width:92px;height:78px;transform:rotate(8deg)}
html[data-style="paper"] .photo-cam svg{width:100%;height:100%;overflow:visible}
html[data-style="paper"] .preview--photo{height:clamp(170px,32dvh,300px)}
html[data-style="paper"] .stub-note{--pc:var(--note);--cut:var(--cut3);--sx:1px;--sy:2px;margin:0;font-size:14px;text-align:center;padding:8px 12px}
html[data-style="paper"] .blocks{display:flex;gap:14px;height:100px;align-items:flex-end;filter:drop-shadow(2px 3px 0 rgba(74,42,18,.24))}
html[data-style="paper"] .blocks i{width:46px;height:46px;background:var(--red);clip-path:var(--cut-round);animation:pp-hop .9s ease-in-out infinite}
html[data-style="paper"] .blocks i:nth-child(2){background:var(--yellow);clip-path:polygon(50% 0,100% 96%,0 100%);animation-delay:.15s}
html[data-style="paper"] .blocks i:nth-child(3){background:var(--cobalt);clip-path:var(--cut2);animation-delay:.3s}
@keyframes pp-hop{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-36px) rotate(-14deg)}}

/* parent form */
html[data-style="paper"] .screen--form{gap:10px}
html[data-style="paper"] .form{display:flex;flex-direction:column;gap:18px;width:min(560px,100%);padding:6px 0 calc(var(--safe-b) + 12px)}
html[data-style="paper"] .hero-row{display:flex;align-items:center;justify-content:center;gap:16px}
html[data-style="paper"] .preview--mini{width:156px;height:156px;flex:none;transform:rotate(-1.5deg)}
html[data-style="paper"] .form .lead{align-self:center}
html[data-style="paper"] .field{display:flex;flex-direction:column;gap:6px;border:0;margin:0;padding:0;min-width:0}
html[data-style="paper"] .field > span:first-child,html[data-style="paper"] .field legend{font-size:18px;font-weight:700;padding:0;margin-bottom:6px}
html[data-style="paper"] .field small{font-size:14px;color:var(--ink-soft)}
/* text fields = a note stuck on the page */
html[data-style="paper"] .note-paper{display:block;--cut:var(--cut1);border-radius:6px;transform:rotate(-.4deg)}
html[data-style="paper"] .note-paper--lined{--cut:var(--cut3);transform:rotate(.5deg)}
html[data-style="paper"] .note-paper--lined::after{background:
  linear-gradient(90deg, transparent 40px, rgba(228,67,45,.4) 40px 41.5px, transparent 41.5px),
  repeating-linear-gradient(to bottom, transparent 0 33px, rgba(43,79,163,.2) 33px 34px) 0 8px,
  var(--pc)}
html[data-style="paper"] .note-paper:focus-within{outline:4px solid var(--cobalt);outline-offset:3px}
html[data-style="paper"] .note-paper input,html[data-style="paper"] .note-paper textarea{display:block;width:100%;min-height:var(--tap);padding:15px 16px 13px;border:0;background:transparent;font-size:20px;outline:none;border-radius:6px}
html[data-style="paper"] .note-paper textarea{min-height:112px;padding:9px 14px 8px 52px;line-height:34px;resize:none}
html[data-style="paper"] .note-paper input::placeholder,html[data-style="paper"] .note-paper textarea::placeholder{color:#8f8676;opacity:1}
html[data-style="paper"] .card .note-paper{--pc:var(--note)}
html[data-style="paper"] .chips{display:flex;flex-wrap:wrap;gap:12px}
html[data-style="paper"] .chip{--tilt:-1.2deg;min-height:var(--tap);padding:10px 20px 9px;border-radius:10px;font-size:18px;font-weight:700;cursor:pointer;transform:rotate(var(--tilt));touch-action:manipulation}
html[data-style="paper"] .chip:nth-child(2n){--tilt:1deg;--cut:var(--cut2)}
html[data-style="paper"] .chip:nth-child(3n){--cut:var(--cut3);--tilt:-.4deg}
html[data-style="paper"] .chip:active{transform:translate(1px,2px) rotate(var(--tilt))}
html[data-style="paper"] .chip[aria-pressed="true"]{--pc:var(--yellow)}
html[data-style="paper"] .themes{display:grid;grid-template-columns:repeat(5,1fr);gap:10px 8px}
html[data-style="paper"] .theme{--tilt:0deg;min-height:78px;padding:6px 2px 6px;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;
  font-size:12.5px;font-weight:700;line-height:1.1;text-align:center;transform:rotate(var(--tilt));touch-action:manipulation}
html[data-style="paper"] .theme:nth-child(3n+1){--tilt:-1.2deg}html[data-style="paper"] .theme:nth-child(3n+2){--tilt:1deg;--cut:var(--cut2)}html[data-style="paper"] .theme:nth-child(3n){--tilt:-.4deg;--cut:var(--cut3)}
html[data-style="paper"] .theme b{display:block;width:36px;height:36px}
html[data-style="paper"] .theme b svg{width:100%;height:100%;overflow:visible}
html[data-style="paper"] .theme[aria-checked="true"]{--pc:var(--yellow);--tilt:-2.5deg}
@media (max-width:360px){ html[data-style="paper"] .themes{grid-template-columns:repeat(4,1fr)} }

/* making: paper bits snipped and glued while the hero bounces */
html[data-style="paper"] .screen--making{justify-content:center;gap:14px;text-align:center}
html[data-style="paper"] .screen--making h2{margin:0;font-family:var(--disp);font-weight:400;font-size:clamp(30px,8.6vw,44px);line-height:1.05}
html[data-style="paper"] .making-stage{position:relative;width:min(320px,80vw);height:min(320px,40dvh);flex:none}
html[data-style="paper"] .making-sun{position:absolute;right:4%;top:2%;width:34%;aspect-ratio:1;background:var(--sun) center / contain no-repeat;animation:pp-turn 16s linear infinite}
html[data-style="paper"] .preview--making{position:absolute;inset:0;width:auto;height:auto}
html[data-style="paper"] .snips{position:absolute;left:0;right:0;bottom:-6px;display:flex;justify-content:center;gap:12px;filter:drop-shadow(2px 3px 0 rgba(74,42,18,.24))}
html[data-style="paper"] .snips i{width:30px;height:30px;display:block;animation:pp-snip 2.2s ease-in-out infinite}
html[data-style="paper"] .snips i:nth-child(1){background:var(--red);clip-path:var(--cut-round)}
html[data-style="paper"] .snips i:nth-child(2){background:var(--yellow);clip-path:polygon(50% 0,100% 96%,0 100%);animation-delay:.18s}
html[data-style="paper"] .snips i:nth-child(3){background:var(--cobalt);clip-path:var(--cut2);animation-delay:.36s}
html[data-style="paper"] .snips i:nth-child(4){background:var(--green);clip-path:var(--cut-burst);animation-delay:.54s}
html[data-style="paper"] .snips i:nth-child(5){background:var(--pink);clip-path:polygon(50% 0,62% 36%,100% 38%,70% 60%,80% 100%,50% 76%,20% 100%,30% 60%,0 38%,38% 36%);animation-delay:.72s}
html[data-style="paper"] .cutline{position:relative;width:min(320px,80vw);height:26px;flex:none;border-bottom:2px dashed var(--ink);margin-top:-4px}
html[data-style="paper"] .cutline .ic{position:absolute;left:0;bottom:-12px;width:26px;height:26px;color:var(--ink);animation:pp-cut 3.6s ease-in-out infinite alternate}
@keyframes pp-snip{0%,55%,100%{transform:translateY(0) rotate(0)}20%{transform:translateY(-30px) rotate(-18deg)}38%{transform:translateY(0) rotate(8deg)}}
@keyframes pp-turn{to{transform:rotate(360deg)}}
@keyframes pp-cut{from{transform:translateX(0)}to{transform:translateX(calc(min(320px,80vw) - 26px)) scaleX(-1)}}
html[data-style="paper"] #parent-go{position:sticky;bottom:calc(var(--safe-b) + 12px);z-index:2}
@media (max-height:520px){
  html[data-style="paper"] .screen--making{gap:6px}
  html[data-style="paper"] .making-stage{height:44dvh;width:min(260px,60vw)}
  html[data-style="paper"] .cutline{display:none}
}

/* ================= modes: hand hint, key cursor, lab ================= */
html[data-style="paper"] .hand{position:absolute;left:50%;top:60%;z-index:4;pointer-events:none;width:0;height:0;animation:pp-hand-in .3s ease-out both}
html[data-style="paper"] .hand-finger{position:absolute;left:-14px;top:-6px;font-size:64px;line-height:1;filter:drop-shadow(2px 4px 0 rgba(74,42,18,.28));transform-origin:30% 10%}
html[data-style="paper"] .hand-ring{position:absolute;left:-34px;top:-34px;width:68px;height:68px;border-radius:50%;border:5px solid var(--cream);box-shadow:0 0 0 3px var(--ink);opacity:0}
html[data-style="paper"] .hand--tap .hand-finger{animation:pp-hand-tap 1s ease-in-out infinite}
html[data-style="paper"] .hand--tap .hand-ring{animation:pp-ring-pop 1s ease-out infinite}
html[data-style="paper"] .hand--hold .hand-finger{animation:pp-hand-hold 2s ease-in-out infinite}
html[data-style="paper"] .hand--hold .hand-ring{animation:pp-ring-hold 2s ease-in-out infinite}
html[data-style="paper"] .hand--drag .hand-finger,html[data-style="paper"] .hand--drag .hand-ring{animation:pp-hand-drag 1.8s ease-in-out infinite}
html[data-style="paper"] .hand--drag .hand-ring{opacity:.8;transform:scale(.6)}
html[data-style="paper"] .hand--steer .hand-finger,html[data-style="paper"] .hand--steer .hand-ring{animation:pp-hand-steer 2.4s steps(1,end) infinite}
html[data-style="paper"] .hand--steer .hand-ring{opacity:.8}
html[data-style="paper"] .hand.still .hand-finger,html[data-style="paper"] .hand.still .hand-ring{animation:none}
html[data-style="paper"] .hand.still .hand-ring{opacity:.8}
@keyframes pp-hand-in{from{opacity:0}to{opacity:1}}
@keyframes pp-hand-tap{0%,100%{transform:translateY(-14px) rotate(-8deg)}45%,60%{transform:translateY(8px) rotate(0)}}
@keyframes pp-ring-pop{0%,40%{opacity:0;transform:scale(.4)}55%{opacity:1;transform:scale(.8)}100%{opacity:0;transform:scale(1.5)}}
@keyframes pp-hand-hold{0%{transform:translateY(-14px)}15%,80%{transform:translateY(8px)}100%{transform:translateY(-14px)}}
@keyframes pp-ring-hold{0%,15%{opacity:0;transform:scale(.4)}20%{opacity:1;transform:scale(.6)}80%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1.5)}}
@keyframes pp-hand-drag{0%,12%{transform:translate(0,8px)}70%,85%{transform:translate(var(--dx),calc(var(--dy) + 8px))}100%{transform:translate(0,8px)}}
@keyframes pp-hand-steer{0%{transform:translate(0,8px)}50%{transform:translate(var(--dx),8px)}}

/* keyboard cursor: ring around the highlighted tap target */
html[data-style="paper"] .kcursor{position:absolute;left:0;top:0;z-index:3;pointer-events:none;border-radius:50%;border:5px solid var(--cream);box-shadow:0 0 0 4px var(--cobalt), 0 0 16px rgba(43,79,163,.55)}
@media (prefers-reduced-motion: no-preference){ html[data-style="paper"] .kcursor{animation:pp-kpulse 1.2s ease-in-out infinite} }
@keyframes pp-kpulse{50%{box-shadow:0 0 0 7px var(--cobalt), 0 0 22px rgba(43,79,163,.65)}}

/* dashed "cut here" coupons: lab link on the start screen, the grown-up invent link */
html[data-style="paper"] .lab-link,html[data-style="paper"] .invent-link{border:2.5px dashed rgba(31,29,43,.55);border-radius:6px;background:rgba(251,246,236,.55);cursor:pointer;color:var(--ink)}
html[data-style="paper"] .lab-link{min-height:52px;padding:6px 18px;font-size:16px;font-weight:700;display:inline-flex;align-items:center;gap:8px;transform:rotate(-1deg)}
html[data-style="paper"] .lab-link .ic{width:20px;height:20px}

/* lab screen */
html[data-style="paper"] .screen--lab{gap:12px}
html[data-style="paper"] .lab-head{display:flex;flex-direction:column;gap:2px;min-width:0}
html[data-style="paper"] .lab-count{font-size:14px;color:var(--ink-soft);font-weight:700}
html[data-style="paper"] .lab-sub{margin:0;width:min(900px,100%);font-size:15px;font-weight:700;padding:8px 12px;--pc:var(--note);--cut:var(--cut3);--sx:1px;--sy:2px}
html[data-style="paper"] .lab-hero{display:flex;gap:12px;width:min(900px,100%)}
html[data-style="paper"] .lab-hero .chip[aria-checked="true"]{--pc:var(--yellow)}
html[data-style="paper"] .lab-grid{width:min(900px,100%);display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;padding:8px 4px calc(var(--safe-b) + 18px)}
html[data-style="paper"] .lab-card{--tilt:0deg;min-height:118px;padding:10px 8px 10px;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  cursor:pointer;text-align:center;touch-action:manipulation;transform:rotate(var(--tilt));transition:transform .08s}
html[data-style="paper"] .lab-card:nth-child(5n+1){--tilt:-1.2deg}html[data-style="paper"] .lab-card:nth-child(5n+2){--tilt:.9deg;--cut:var(--cut2)}html[data-style="paper"] .lab-card:nth-child(5n+3){--tilt:-.5deg;--cut:var(--cut3)}
html[data-style="paper"] .lab-card:nth-child(5n+4){--tilt:1.4deg}html[data-style="paper"] .lab-card:nth-child(5n){--tilt:-.8deg;--cut:var(--cut2)}
html[data-style="paper"] .lab-card:active{transform:translate(1px,2px) rotate(var(--tilt))}
html[data-style="paper"] .lab-card b{font-family:var(--disp);font-weight:400;font-size:19px;line-height:1.05}
html[data-style="paper"] .lab-card small{font-size:13px;color:var(--ink-soft);font-weight:700}
html[data-style="paper"] .lab-icon{display:block;width:44px;height:44px}
html[data-style="paper"] .lab-icon svg{width:100%;height:100%;overflow:visible}
html[data-style="paper"] .lab-card--soon,html[data-style="paper"] .lab-card--unknown{opacity:.55;cursor:default;--pc:#ece3d3}
html[data-style="paper"] .lab-card--broken{opacity:.8;cursor:default;--pc:var(--pink)}
html[data-style="paper"] .lab-card[disabled]{pointer-events:none}
@media (max-width:420px){ html[data-style="paper"] .lab-grid{grid-template-columns:repeat(2,1fr);gap:12px} html[data-style="paper"] .lab-card{min-height:110px} }

/* ================= AI: access code, toast, edit, invent, debug ================= */
html[data-style="paper"] .making-msg{min-height:2.8em}

/* access code modal (for grown-ups) */
html[data-style="paper"] .modal{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;overflow-y:auto;
  padding:calc(var(--safe-t) + 16px) calc(var(--safe-r) + 16px) calc(var(--safe-b) + 16px) calc(var(--safe-l) + 16px);background:rgba(31,29,43,.55)}
html[data-style="paper"] .card--code{max-width:440px;margin:auto 0;flex:none}   /* margin:auto centers but still scrolls when taller than the screen */
@media (max-height:520px){ html[data-style="paper"] .card--code{gap:6px} html[data-style="paper"] .code-msg{font-size:15px} html[data-style="paper"] .card--code .btn--xl{min-height:var(--tap)} }
html[data-style="paper"] .card--code .btn{margin-top:4px}
html[data-style="paper"] .code-msg{margin:0;font-size:18px;line-height:1.4}
html[data-style="paper"] .code-msg--wrong{--pc:#f8d3dc;--cut:var(--cut3);--sx:1px;--sy:2px;padding:8px 12px;color:#9e2a19;font-weight:700}

/* toast: "Using our own idea" = a strip of dark paper */
html[data-style="paper"] .toast{position:fixed;left:50%;top:calc(var(--safe-t) + 14px);z-index:55;transform:translateX(-50%) rotate(-1.5deg);max-width:calc(100% - 32px);
  --pc:var(--ink);--cut:var(--cut3);padding:13px 22px 12px;color:var(--cream);font-size:18px;font-weight:700;text-align:center;pointer-events:none}
html[data-style="paper"] .toast.show{animation:pp-toast-in .35s cubic-bezier(.2,1.4,.4,1) both}
@keyframes pp-toast-in{from{transform:translate(-50%,-24px) rotate(-6deg);opacity:0}to{transform:translateX(-50%) rotate(-1.5deg);opacity:1}}

/* change something */
html[data-style="paper"] .chips--small{gap:10px}
html[data-style="paper"] .chips--small .chip{min-height:52px;padding:8px 14px;font-size:16px}
html[data-style="paper"] .edit-msg{--pc:var(--note);--cut:var(--cut3);--sx:1px;--sy:2px;margin:0;padding:10px 14px;font-size:16px}
html[data-style="paper"] .card--edit .row{margin-top:4px}
html[data-style="paper"] .card--edit .row .btn{margin-top:0}

/* parent screen: the second, separate way (a dashed coupon to cut out) */
html[data-style="paper"] .invent-link{display:flex;flex-direction:column;align-items:center;gap:3px;width:100%;min-height:var(--tap);padding:12px 16px;text-align:center;transform:rotate(.4deg)}
html[data-style="paper"] .invent-link b{font-family:var(--disp);font-weight:400;font-size:20px;display:inline-flex;align-items:center;gap:8px}
html[data-style="paper"] .invent-link b .ic{width:22px;height:22px}
html[data-style="paper"] .invent-link small{font-size:14px;color:var(--ink-soft);font-weight:700}

/* invent: idea + quick/best */
html[data-style="paper"] .models{display:grid;grid-template-columns:1fr 1fr;gap:14px}
html[data-style="paper"] .model{--tilt:-.8deg;min-height:96px;padding:10px 8px;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;text-align:center;transform:rotate(var(--tilt));touch-action:manipulation}
html[data-style="paper"] .model + .model{--tilt:.9deg;--cut:var(--cut2)}
html[data-style="paper"] .model b{font-family:var(--disp);font-weight:400;font-size:22px;display:inline-flex;align-items:center;gap:6px}
html[data-style="paper"] .model b .ic{width:24px;height:24px}
html[data-style="paper"] .model small{font-size:14px;color:var(--ink-soft);line-height:1.2;font-weight:700}
html[data-style="paper"] .model[aria-checked="true"]{--pc:var(--yellow)}
html[data-style="paper"] .model[aria-checked="true"] small{color:var(--ink)}
html[data-style="paper"] .screen--invent .grownup{align-self:center}

/* inventing: 2-5 minutes */
html[data-style="paper"] .screen--inventing{justify-content:flex-start}
html[data-style="paper"] .inv-state{display:flex;flex-direction:column;align-items:center;gap:12px;width:min(480px,100%);margin:auto 0;flex:none}
html[data-style="paper"] .inv-state h2{margin:0;font-family:var(--disp);font-weight:400;font-size:clamp(28px,7.6vw,40px);line-height:1.05;text-align:center}
html[data-style="paper"] .inv-state .stack{width:100%}
html[data-style="paper"] .inv-state .photo-art{width:150px;height:170px}
html[data-style="paper"] .inv-bar{position:relative;width:100%;height:30px;filter:drop-shadow(2px 3px 0 rgba(74,42,18,.22))}
html[data-style="paper"] .inv-bar::before{content:"";position:absolute;inset:0;background:var(--cream);clip-path:var(--cut1)}
html[data-style="paper"] .inv-bar i{position:absolute;left:5px;top:5px;bottom:5px;display:block;width:0;max-width:calc(100% - 10px);clip-path:var(--cut2);transition:width .5s linear;
  background:repeating-linear-gradient(-45deg,var(--red) 0 14px,var(--yellow) 14px 28px);background-size:40px 40px;animation:pp-stripes 1.2s linear infinite}
@keyframes pp-stripes{to{background-position:40px 0}}
html[data-style="paper"] .inv-time{margin:0;font-size:16px;font-weight:700;color:var(--ink-soft);font-variant-numeric:tabular-nums}
html[data-style="paper"] .screen--inventing .making-stage{height:min(250px,28dvh)}
@media (max-height:520px){ html[data-style="paper"] .screen--inventing .making-stage{height:24dvh} html[data-style="paper"] .inv-state{gap:6px} }

/* the invented game: sandboxed iframe, fullscreen */
html[data-style="paper"] .screen--custom{padding:0;background:#000;overflow:hidden}
html[data-style="paper"] .custom-frame,html[data-style="paper"] .custom-iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#fff}
html[data-style="paper"] .custom-exit{position:absolute;z-index:3;top:calc(var(--safe-t) + 8px);right:calc(var(--safe-r) + 8px);width:var(--tap);height:var(--tap);border-radius:50%;
  --cut:var(--cut-round);color:var(--ink);cursor:pointer;display:grid;place-items:center}
html[data-style="paper"] .custom-exit .ic{width:24px;height:24px}
html[data-style="paper"] .custom-end{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;overflow-y:auto;
  padding:16px calc(var(--safe-r) + 16px) calc(var(--safe-b) + 16px) calc(var(--safe-l) + 16px);background:rgba(31,29,43,.4)}
@media (min-aspect-ratio: 4/3){ html[data-style="paper"] .custom-end{justify-content:center} }

/* lab: AI toggles */
html[data-style="paper"] .lab-ai{display:flex;flex-wrap:wrap;gap:12px;width:min(900px,100%)}
html[data-style="paper"] .lab-ai .chip[aria-pressed="true"]{--pc:var(--cobalt);color:var(--cream)}
html[data-style="paper"] .chip--invent{--pc:var(--pink)}

/* ---------- start screen: short landscape phones: title + heroes left, buttons right ---------- */
@media (max-height:520px) and (min-aspect-ratio: 4/3){
  html[data-style="paper"] .screen--start{padding-top:calc(var(--safe-t) + 8px);padding-bottom:calc(var(--safe-b) + 10px)}
  html[data-style="paper"] .start-top{width:100%}
  html[data-style="paper"] .start-body{width:min(820px,100%);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto 1fr auto;column-gap:28px;row-gap:6px;align-items:start;padding-top:0}
  html[data-style="paper"] .logo{grid-column:1;grid-row:1;justify-self:center;font-size:clamp(38px,12dvh,60px)}
  html[data-style="paper"] .tagline{grid-column:1;grid-row:2;justify-self:center;font-size:16px}
  html[data-style="paper"] .start-heroes{grid-column:1;grid-row:3/5;align-self:stretch;width:100%;justify-content:center;gap:4px}
  html[data-style="paper"] .start-hero{height:min(100%,140px)}
  html[data-style="paper"] .start-hero--b{height:min(92%,128px)}
  html[data-style="paper"] .start-body .stack{grid-column:2;grid-row:1/4;align-self:center;width:100%}
  html[data-style="paper"] .lab-link{grid-column:2;grid-row:4;justify-self:center}
  html[data-style="paper"] .screen--start .grownup--label{position:absolute;right:calc(var(--safe-r) + 16px);bottom:calc(var(--safe-b) + 10px);width:min(380px,44%);margin:0;font-size:13px;padding:9px 16px}
  html[data-style="paper"] .sc-hills{height:34%}
  html[data-style="paper"] .sc-blob{width:150px}
  html[data-style="paper"] .sc-doodles{display:none}
}

/* ?debug=1 cost panel (stays plain) */
html[data-style="paper"] .debug-panel{position:fixed;left:50%;transform:translateX(-50%);bottom:var(--safe-b);z-index:70;width:max-content;max-width:min(560px,100%);max-height:45dvh;overflow:auto;
  background:rgba(20,22,36,.85);color:#e8e8f0;border-radius:10px 10px 0 0;font:11px/1.35 ui-monospace,Menlo,monospace}
html[data-style="paper"] .debug-panel summary{padding:3px 10px;cursor:pointer;font-weight:700}
html[data-style="paper"] .debug-panel ol{margin:0;padding:0 10px 8px 28px}
html[data-style="paper"] .debug-panel li{margin-top:4px}
html[data-style="paper"] .debug-panel li b{display:block;color:#fcbf49}

/* ================= game proposal (story card): "Kind of game" chips + the "More..." picker ================= */
html[data-style="paper"] .proposal{display:flex;flex-direction:column;gap:8px;margin:2px 0 4px}
html[data-style="paper"] .proposal .chips{gap:8px}
html[data-style="paper"] .proposal .chip{min-height:44px;padding:6px 12px 5px;font-size:15px}
html[data-style="paper"] .chip--mode{display:inline-flex;align-items:center;gap:6px}
html[data-style="paper"] .chip--more{--pc:var(--note)}
html[data-style="paper"] .chip[aria-busy="true"]{cursor:progress;animation:pp-busy .9s ease-in-out infinite alternate}
@keyframes pp-busy{from{opacity:.55}to{opacity:1}}
html[data-style="paper"] .proposal-status{margin:0;font-size:15px;font-weight:700;color:var(--ink-soft)}
html[data-style="paper"] .card--modes .lab-grid{width:100%;padding:6px 2px 4px}
html[data-style="paper"] .card--modes .lab-card{min-height:92px}
@media (prefers-reduced-motion:reduce){ html[data-style="paper"] .chip[aria-busy="true"]{animation:none;opacity:.6} }

/* ---- polish: quiet "Kind of game" label, text-only chips, home | Change | Play row, compact picker, shorter card on phones ---- */
html[data-style="paper"] .kind-label{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
html[data-style="paper"] .proposal{gap:6px;margin:0}
html[data-style="paper"] .proposal .chips{gap:6px 8px}
html[data-style="paper"] .proposal .chip{min-height:40px;padding:5px 12px 4px;font-size:15px}
html[data-style="paper"] .card .row .btn--small{flex:0 1 auto;min-height:var(--tap);padding:6px 12px;font-size:15px;line-height:1.1}
html[data-style="paper"] .card--modes{gap:8px;padding-top:18px}
html[data-style="paper"] .card--modes h2{font-size:26px}
html[data-style="paper"] .card--modes .lab-grid{grid-template-columns:repeat(3,1fr);gap:8px;padding:2px}
html[data-style="paper"] .card--modes .lab-card{min-height:52px;padding:6px 4px}
html[data-style="paper"] .card--modes .lab-card b{font-size:15px;line-height:1.1}
@media (max-width:430px){
  html[data-style="paper"] .card--story{padding:16px 16px 14px;gap:8px}
  html[data-style="paper"] .card--story h2{font-size:27px}
  html[data-style="paper"] .card--story .story-text{font-size:18px;line-height:1.35}
  html[data-style="paper"] .card--story .goal{font-size:16px}
}
@media (max-width:430px) and (max-height:720px){ html[data-style="paper"] .card--story .eyebrow{display:none} }

/* ---------- free first game: "Want to make another game?" + the small "I have a tester code" link ---------- */
html[data-style="paper"] .screen--more .eyebrow{align-self:center;transform:rotate(-1.5deg)}
html[data-style="paper"] .screen--more .lead{max-width:32ch}
html[data-style="paper"] .code-link{align-self:center;min-height:44px;padding:6px 12px;border:0;background:none;font:inherit;font-size:16px;font-weight:700;
  color:var(--ink);text-decoration:underline dashed;text-decoration-thickness:2px;text-underline-offset:5px;cursor:pointer}
html[data-style="paper"] .code-link:focus-visible{outline:3px solid var(--cobalt);outline-offset:2px;border-radius:4px}
@media (max-height:720px){ html[data-style="paper"] .screen--more .photo-art{width:120px;height:132px} }
html[data-style="paper"] .screen--more{background:var(--paper)}
html[data-style="paper"] .screen--pick{background:var(--paper)}
html[data-style="paper"] .hero-continue{align-self:center;margin-top:14px;position:relative;z-index:1}