/* The app shell around the Nutcracker scene: a full-screen stage, the hanging picture card, the star row,
   the grown-up corner (press and hold the gear) and the "turn your phone" notice. */
:root{
  --night:#060a14; --ink:#eef0f7; --muted:#b9bfd3;
  --gold:#e2b45e; --gold-hi:#f7dea0; --line:rgba(226,180,94,.3);
  --f-display:"Cinzel",Georgia,serif; --f-body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#070102;overscroll-behavior:none;touch-action:none}
body{color:var(--ink);font-family:var(--f-body);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
button{font:inherit;color:inherit}
.stage{position:fixed;inset:0;overflow:hidden;isolation:isolate;touch-action:none}
.stage canvas.fx{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:15;pointer-events:none}
.board{position:absolute;left:50%;top:50%;width:400px;height:700px;transform:translate(-50%,-50%);transform-origin:50% 50%;z-index:2}
[data-scene="nutcracker"] .nc-card .t{font-size:18px;letter-spacing:.05em}

/* ---- the picture of what to find, hung on gilt cords in front of the right-hand curtain ---- */
.pz-card{position:absolute;left:254px;top:146px;width:104px;height:104px;z-index:13;border:0;padding:0;cursor:pointer;opacity:0;pointer-events:none;
  border-radius:16px;background:linear-gradient(160deg,#fdf6e3,#efe0bd);transform-origin:50% -66px;
  box-shadow:0 14px 26px rgba(0,0,0,.55),inset 0 0 0 2px #c49a45,inset 0 0 0 5px #fdf6e3,inset 0 0 0 6px rgba(196,154,69,.6),inset 0 0 26px rgba(160,110,40,.18)}
.pz-card.on{pointer-events:auto}
.pz-card .pz-cord{position:absolute;top:-66px;width:2px;height:66px;background:linear-gradient(90deg,#8a6420,#f3d58e,#8a6420)}
.pz-card .pz-cord.a{left:22px}.pz-card .pz-cord.b{right:22px}
.pz-card .pz-pic{position:absolute;inset:0;display:grid;place-items:center}
.pz-card .pz-pic svg{width:80px;height:76px;overflow:visible;filter:drop-shadow(0 3px 3px rgba(60,30,0,.35))}
.pz-card .pz-emoji{font-size:68px;line-height:1;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;filter:drop-shadow(0 3px 3px rgba(60,30,0,.3))}
.pz-card.sway{animation:pz-sway 3.6s ease-in-out infinite alternate}
@keyframes pz-sway{from{transform:rotate(-2deg)}to{transform:rotate(2deg)}}

/* ---- walnuts ---- */
[data-scene="nutcracker"] .nc-nut.nope .in{filter:saturate(.7) brightness(.8)!important;opacity:.45}
[data-scene="nutcracker"] .nc-nuts.ready .nc-nut.sug:not(.drag) .in{animation:pz-wiggle 1.1s ease-in-out infinite}
@keyframes pz-wiggle{0%,100%{transform:scale(var(--s)) rotate(0deg)}20%{transform:scale(calc(var(--s)*1.12)) rotate(-9deg) translateY(-6px)}40%{transform:scale(calc(var(--s)*1.12)) rotate(9deg) translateY(-6px)}60%{transform:scale(var(--s)) rotate(0deg)}}
[data-scene="nutcracker"] .nc-nut.big .in{--s:1.55}
[data-scene="nutcracker"] .nc-nut.big .sh{transform:scale(1.5)}

/* ---- stars earned toward the golden nut ---- */
.pz-stars{position:absolute;left:0;right:0;top:650px;height:44px;z-index:16;display:flex;justify-content:center;gap:12px;pointer-events:none}
.pz-stars i{position:relative;width:42px;height:42px;display:block}
.pz-stars svg{width:100%;height:100%;overflow:visible}
.pz-stars path{fill:rgba(40,16,6,.55);stroke:#b8862c;stroke-width:1.6;stroke-linejoin:round;transition:fill .3s}
.pz-stars i.on path{fill:url(#pz-starfill);stroke:#fff3c4;filter:drop-shadow(0 0 6px rgba(255,210,120,.9))}

/* ---- the surprise that pops out of the nut ---- */
[data-scene="nutcracker"] .nc-spos{left:200px;top:300px}
.pz-surp{position:absolute;left:0;top:0;width:0;height:0}
.pz-surp span{position:absolute;left:0;top:0;transform:translate(-50%,-50%);font-size:132px;line-height:1;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;filter:drop-shadow(0 10px 18px rgba(0,0,0,.55))}
.pz-surp span b{display:block;font-weight:400;animation:pz-bob .9s ease-in-out infinite alternate}
@keyframes pz-bob{from{transform:translateY(-4px) rotate(-5deg)}to{transform:translateY(6px) rotate(5deg)}}

/* ---- grown-up corner: press and hold ---- */
.pz-gear{position:absolute;z-index:30;top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));width:44px;height:44px;border-radius:50%;border:1px solid rgba(226,180,94,.25);background:rgba(10,4,6,.35);color:rgba(247,222,160,.45);display:grid;place-items:center;cursor:pointer;padding:0;touch-action:none}
.pz-gear svg{width:22px;height:22px}
.pz-gear .ring{position:absolute;inset:-3px;width:50px;height:50px;transform:rotate(-90deg)}
.pz-gear .ring circle{fill:none;stroke:var(--gold-hi);stroke-width:3;stroke-dasharray:138;stroke-dashoffset:138}
.pz-gear.hold .ring circle{transition:stroke-dashoffset 1.4s linear;stroke-dashoffset:0}
.pz-gear.hold{color:var(--gold-hi)}

.pz-panel{position:fixed;inset:0;z-index:50;background:rgba(4,6,14,.86);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);overflow:auto;touch-action:pan-y;-webkit-user-select:text;user-select:text;padding:max(16px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom))}
.pz-panel[hidden]{display:none}
.pz-sheet{max-width:560px;margin:0 auto;background:linear-gradient(#141b36,#0c1126);border:1px solid var(--line);border-radius:20px;padding:20px 18px 22px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.pz-sheet header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.pz-sheet h2{font:600 20px/1.2 var(--f-display);letter-spacing:.04em;margin:0;color:var(--gold-hi)}
.pz-sheet h3{font:600 13px/1.2 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:22px 0 10px}
.pz-sheet p.note{color:var(--muted);font-size:14px;margin:6px 0 0;line-height:1.45}
.pz-x{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--gold-hi);font-size:20px;cursor:pointer;flex:none}
.pz-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid rgba(255,255,255,.06);font-size:16px}
.pz-row:first-of-type{border-top:0}
.pz-row small{display:block;color:var(--muted);font-size:13px}
.pz-row.soon{opacity:.5}
.pz-sheet input[type=text],.pz-sheet select{font:inherit;font-size:16px;color:var(--ink);background:#0a0f22;border:1px solid var(--line);border-radius:10px;padding:9px 12px;min-width:0;max-width:60%}
.pz-sheet input[type=checkbox]{width:24px;height:24px;accent-color:#e2b45e;flex:none}
.pz-seg{display:flex;flex-wrap:wrap;gap:6px}
.pz-seg button{border:1px solid var(--line);background:transparent;border-radius:999px;padding:8px 13px;font-size:14px;cursor:pointer;color:var(--ink)}
.pz-seg button[aria-pressed="true"]{background:linear-gradient(#f2cf82,#c9933c);color:#21170a;border-color:var(--gold)}
.pz-btn{border:1px solid var(--gold);background:linear-gradient(#f2cf82,#c9933c);color:#21170a;border-radius:999px;padding:11px 18px;font:600 13px/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.pz-btn.ghost{background:transparent;color:var(--gold-hi)}
.pz-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.pz-prog{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.pz-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);font-size:15px}
.pz-item svg{width:30px;height:28px;flex:none}
.pz-item b{font-weight:600;text-transform:capitalize}
.pz-item small{display:block;color:var(--muted);font-size:12.5px}
.pz-item .pz-ico{font-style:normal;font-size:24px;line-height:1;width:30px;text-align:center;flex:none;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.pz-item.later{opacity:.45}
.pz-item.knows{border-color:rgba(120,210,140,.45)}
.pz-item.knows small{color:#9fe0ae}
.pz-item.learning small{color:#f2cf82}

/* ---- phones held sideways: the stage is portrait, so ask for portrait ---- */
.pz-rotate{position:fixed;inset:0;z-index:60;display:none;place-items:center;text-align:center;background:#070102;color:var(--gold-hi);font:600 18px/1.4 var(--f-display);padding:24px}
.pz-rotate svg{width:84px;height:84px;margin:0 auto 12px;display:block;animation:pz-turn 2.4s ease-in-out infinite}
@keyframes pz-turn{0%,30%{transform:rotate(-90deg)}60%,100%{transform:rotate(0deg)}}
@media (orientation:landscape) and (max-height:520px){.pz-rotate{display:grid}}
@media (prefers-reduced-motion:reduce){.pz-card.sway,.pz-surp span b,.pz-rotate svg{animation:none}}