/* Plum Roll — UI system
   Type: Fredoka (display) + Nunito (body). Scale 12/14/16/20/26/34/clamp logo.
   Spacing grid: 4px (4/8/12/16/24/32/48). */
:root{
  --ink:#2b1640; --ink-2:#4a2c63; --ink-3:#7a6190;
  --plum:#7b3fa0; --plum-hi:#9a5cc6; --plum-lo:#5a2a7a; --plum-deep:#3d1a57;
  --gold:#ffc531; --gold-hi:#ffd866; --gold-lo:#d99400;
  --leaf:#4fae5a; --leaf-lo:#2f7d3d;
  --cream:#fff8ee; --paper:#ffffff; --mist:#f3ebf8; --line:#e6d9ef;
  --danger:#e8505b;
  --r-sm:12px; --r-md:18px; --r-lg:26px;
  --sh-card:0 2px 0 rgba(43,22,64,.06),0 18px 40px -12px rgba(43,22,64,.45);
  --f-display:"Fredoka",ui-rounded,system-ui,sans-serif;
  --f-body:"Nunito",ui-rounded,system-ui,sans-serif;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
  --ease-out:cubic-bezier(.2,.9,.25,1.15);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
html,body{margin:0;height:100%;overflow:hidden;background:#bfe6ff;touch-action:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;font-family:var(--f-body);color:var(--ink)}
canvas#cv{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer;touch-action:manipulation}
button:focus{outline:none}
button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* ---------- Buttons ---------- */
.btn{--bg:var(--paper);--bg-lo:#d9cbe4;--fg:var(--ink);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 24px;border-radius:var(--r-md);
  font-family:var(--f-display);font-weight:600;font-size:18px;letter-spacing:.01em;
  background:var(--bg);color:var(--fg);box-shadow:0 5px 0 var(--bg-lo),0 8px 16px -6px rgba(43,22,64,.35);
  transform:translateY(0);transition:transform .08s ease,box-shadow .08s ease,filter .15s ease}
.btn:hover{filter:brightness(1.06)}
.btn:active,.btn.is-down{transform:translateY(4px);box-shadow:0 1px 0 var(--bg-lo),0 3px 8px -4px rgba(43,22,64,.35)}
.btn-primary{--bg:var(--gold);--bg-lo:var(--gold-lo);--fg:#4a2400}
.btn-secondary{--bg:var(--plum);--bg-lo:var(--plum-lo);--fg:#fff}
.btn-ghost{--bg:rgba(255,255,255,.18);--bg-lo:rgba(43,22,64,.35);--fg:#fff;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.55),0 4px 0 rgba(43,22,64,.25)}
.btn-ghost:active{box-shadow:inset 0 0 0 2px rgba(255,255,255,.55),0 0 0 rgba(0,0,0,0)}
.btn-ghost-dark{--bg:var(--mist);--bg-lo:var(--line);--fg:var(--ink-2)}
.btn-xl{min-height:60px;font-size:24px;padding:0 40px;border-radius:20px}
.btn-sm{min-height:44px;font-size:16px;padding:0 18px}
.btn-col{display:flex;flex-direction:column;gap:14px;align-items:stretch}
.btn-row{display:flex;gap:12px}
.btn-row .btn{flex:1}

.icon-btn{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;
  background:rgba(255,255,255,.88);box-shadow:0 4px 0 rgba(43,22,64,.22),0 6px 14px -6px rgba(43,22,64,.4);
  transition:transform .08s ease,box-shadow .08s ease}
.icon-btn svg{width:24px;height:24px;fill:var(--ink)}
.icon-btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(43,22,64,.22)}
.icon-btn-dark{background:var(--mist);box-shadow:0 4px 0 var(--line)}
.icon-btn-dark svg,.icon-btn svg path{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.icon-btn svg rect{fill:var(--ink)}

/* ---------- Stars ---------- */
.st{display:inline-block;width:26px;height:26px;
  background:rgba(43,22,64,.22);
  -webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat;
  --star:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1.8l3.1 6.5 7.1.9-5.2 4.9 1.3 7.1L12 17.8l-6.3 3.4 1.3-7.1L1.8 9.2l7.1-.9z'/></svg>");
  transition:transform .3s var(--ease-out),background .2s}
.st.on{background:var(--gold)}
.st.pop{animation:starpop .5s var(--ease-out)}
@keyframes starpop{0%{transform:scale(.4)}60%{transform:scale(1.45)}100%{transform:scale(1)}}

/* ---------- Screens ---------- */
.screen{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  padding:calc(16px + var(--sat)) calc(16px + var(--sar)) calc(16px + var(--sab)) calc(16px + var(--sal));
  overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;
  animation:scrIn .32s ease both}
.screen.leaving{animation:scrOut .2s ease both;pointer-events:none}
@keyframes scrIn{from{opacity:0}to{opacity:1}}
@keyframes scrOut{from{opacity:1}to{opacity:0}}

/* Title */
.screen-title{background:linear-gradient(180deg,rgba(43,22,64,.10),rgba(43,22,64,.55) 70%,rgba(43,22,64,.72))}
.title-wrap{width:100%;max-width:980px;margin:auto;display:grid;gap:24px;
  grid-template-columns:1fr;justify-items:center;padding-top:56px}
.title-main{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;width:100%;max-width:400px;
  animation:rise .55s .05s var(--ease-out) both}
.badge-early{font-family:var(--f-display);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);background:var(--paper);padding:6px 12px 6px 26px;border-radius:999px;position:relative;
  box-shadow:0 3px 0 rgba(43,22,64,.2)}
.badge-early::before{content:"";position:absolute;left:11px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;
  background:var(--leaf);box-shadow:0 0 0 3px rgba(79,174,90,.25)}
.logo{margin:0;font-family:var(--f-display);font-weight:700;line-height:.9;letter-spacing:-.01em;
  font-size:clamp(56px,15vw,104px);display:flex;gap:.18em;
  color:#fff;text-shadow:0 4px 0 var(--plum-lo),0 7px 0 var(--plum-deep),0 14px 24px rgba(43,22,64,.45)}
.logo-a{color:#f3e6ff}
.logo-b{color:var(--gold-hi);text-shadow:0 4px 0 #b06d00,0 7px 0 #7a4600,0 14px 24px rgba(43,22,64,.45)}
.tagline{margin:4px 0 8px;font-size:16px;font-weight:700;color:#fff;opacity:.95;text-shadow:0 1px 2px rgba(43,22,64,.6)}
.title-main .btn-col{width:min(100%,300px)}
.early-line{margin:4px 0 0;font-size:13px;font-weight:700;color:rgba(255,255,255,.88);line-height:1.4;
  text-shadow:0 1px 2px rgba(43,22,64,.6)}
.early-line-dark{color:var(--ink-3);text-shadow:none;text-align:center}

.panel{background:rgba(255,248,238,.96);border-radius:var(--r-lg);box-shadow:var(--sh-card);padding:20px 20px 16px}
.panel-full{width:100%;max-width:400px;animation:rise .55s .15s var(--ease-out) both}
.panel-h{margin:0 0 10px;font-family:var(--f-display);font-weight:600;font-size:20px;color:var(--ink)}
.full-list{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.full-list li{position:relative;padding-left:22px;font-size:14px;line-height:1.35;color:var(--ink-2);font-weight:700}
.full-list li::before{content:"";position:absolute;left:2px;top:4px;width:11px;height:11px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,var(--plum-hi),var(--plum) 60%,var(--plum-lo))}
.panel-note{margin:12px 0 0;padding-top:10px;border-top:2px dashed var(--line);font-size:13px;font-weight:800;color:var(--ink-3)}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

@media (min-width:720px) and (orientation:landscape), (min-width:900px){
  .title-wrap{grid-template-columns:1.1fr 1fr;align-items:center;padding-top:0}
  .title-main{max-width:440px}
}
/* short landscape phones */
@media (orientation:landscape) and (max-height:500px){
  .screen-title{align-items:flex-start}
  .title-wrap{grid-template-columns:1fr 1fr;gap:16px;padding-top:8px;align-items:start}
  .title-main{gap:8px;padding-top:40px}
  .logo{font-size:64px}
  .tagline{font-size:14px;margin:0 0 4px}
  .btn-xl{min-height:52px;font-size:21px}
  .btn-col{gap:12px}
  .panel{padding:14px 16px 12px}
  .panel-h{font-size:17px;margin-bottom:8px}
  .full-list{gap:5px}
  .full-list li{font-size:13px;line-height:1.3}
  .panel-note{margin-top:8px;padding-top:8px}
}
@media (max-height:680px) and (orientation:portrait){
  .title-wrap{padding-top:52px;gap:16px}
  .logo{font-size:60px}
  .tagline{font-size:14px;margin:0}
  .title-main{gap:8px}
  .full-list li{font-size:13px}
}

/* Level select */
.screen-levels{background:rgba(43,22,64,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.sheet{width:100%;max-width:640px;margin:auto;background:var(--cream);border-radius:var(--r-lg);box-shadow:var(--sh-card);
  padding:20px;animation:pop .4s var(--ease-out) both}
.sheet-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.sheet-head>div:first-child{flex:1}
.eyebrow{font-family:var(--f-display);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--plum)}
.sheet-title{margin:0;font-family:var(--f-display);font-weight:700;font-size:28px;line-height:1.05;color:var(--ink)}
.total-stars{display:flex;align-items:center;gap:6px;background:var(--paper);border-radius:999px;padding:6px 14px 6px 8px;
  font-family:var(--f-display);font-weight:600;font-size:18px;box-shadow:0 3px 0 var(--line)}
.level-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.lvl{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-height:104px;padding:10px 6px 10px;border-radius:var(--r-md);background:var(--paper);
  box-shadow:0 5px 0 var(--line),0 8px 14px -8px rgba(43,22,64,.35);transition:transform .08s,box-shadow .08s}
.lvl:hover{box-shadow:0 5px 0 #d6c3e3,0 10px 18px -8px rgba(43,22,64,.4)}
.lvl:active{transform:translateY(4px);box-shadow:0 1px 0 var(--line)}
.lvl-n{font-family:var(--f-display);font-weight:700;font-size:30px;line-height:1;color:var(--plum)}
.lvl-name{font-size:12px;font-weight:800;color:var(--ink-2);text-align:center;line-height:1.15;min-height:28px;display:flex;align-items:center}
.lvl-stars{display:flex;gap:2px}
.lvl-stars .st{width:16px;height:16px}
.lvl.done{background:linear-gradient(180deg,#fff,#fff6dc)}
.lvl.boss .lvl-n{color:var(--danger)}
.lvl.boss::after{content:"BOSS";position:absolute;top:-8px;right:-4px;font-family:var(--f-display);font-weight:600;font-size:12px;
  letter-spacing:.08em;background:var(--danger);color:#fff;padding:2px 8px;border-radius:999px;box-shadow:0 2px 0 #a8303a}
.sheet-note{margin:16px 0 0;text-align:center;font-size:13px;font-weight:700;color:var(--ink-3)}
@media (max-width:520px){
  .level-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .lvl{min-height:84px;flex-direction:row;justify-content:flex-start;gap:10px;padding:10px 12px}
  .lvl-n{font-size:28px;min-width:30px}
  .lvl-meta{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
  .lvl-name{min-height:0;text-align:left}
  .sheet{padding:16px;margin-top:48px}
}
@media (min-width:521px){.lvl-meta{display:contents}}
@media (orientation:landscape) and (max-height:500px){
  .screen-levels{align-items:flex-start}
  .sheet{padding:14px 18px;max-width:720px}
  .sheet-head{margin-bottom:10px}
  .sheet-title{font-size:24px}
  .level-grid{grid-template-columns:repeat(4,1fr);gap:10px}
  .lvl{min-height:96px;flex-direction:column;justify-content:center;gap:4px;padding:8px 6px}
  .lvl-meta{display:contents}
  .lvl-name{text-align:center;min-height:28px}
  .sheet-note{margin-top:10px}
}

/* Modal cards */
.screen-modal{background:rgba(43,22,64,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.card{width:100%;max-width:360px;margin:auto;background:var(--cream);border-radius:var(--r-lg);box-shadow:var(--sh-card);
  padding:24px 22px 20px;display:flex;flex-direction:column;align-items:stretch;gap:14px;text-align:center;
  animation:pop .42s var(--ease-out) both}
@keyframes pop{from{opacity:0;transform:translateY(20px) scale(.94)}to{opacity:1;transform:none}}
.card-title{margin:-6px 0 4px;font-family:var(--f-display);font-weight:700;font-size:34px;line-height:1.05;color:var(--ink)}
.card-clear{max-width:400px}
.big-stars{display:flex;justify-content:center;align-items:flex-end;gap:10px;margin:2px 0 4px}
.bst{width:62px;height:62px;display:block;background:rgba(43,22,64,.14);
  -webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat;
  --star:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1.8l3.1 6.5 7.1.9-5.2 4.9 1.3 7.1L12 17.8l-6.3 3.4 1.3-7.1L1.8 9.2l7.1-.9z'/></svg>")}
.bst:nth-child(2){width:76px;height:76px}
.bst.on{background:linear-gradient(180deg,var(--gold-hi),var(--gold) 55%,var(--gold-lo));animation:bigpop .55s var(--ease-out) both}
@keyframes bigpop{0%{transform:scale(0) rotate(-40deg)}70%{transform:scale(1.25) rotate(6deg)}100%{transform:none}}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;background:var(--paper);border-radius:var(--r-md);padding:12px 6px;
  box-shadow:inset 0 0 0 2px var(--line)}
.stat-v{font-family:var(--f-display);font-weight:600;font-size:24px;color:var(--ink);font-variant-numeric:tabular-nums}
.stat-k{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.card .early-line{margin:0;font-size:12px}
@media (orientation:landscape) and (max-height:500px){
  .card{padding:16px 20px 14px;gap:10px}
  .card-title{font-size:28px}
  .card-clear{max-width:560px;display:grid;grid-template-columns:1fr 1fr;column-gap:20px;text-align:center}
  .card-clear>.eyebrow,.card-clear>.card-title,.card-clear>.big-stars{grid-column:1}
  .card-clear>.stats,.card-clear>.btn-row,.card-clear>.btn-sm,.card-clear>.early-line{grid-column:2}
  .card-clear>.eyebrow{grid-row:1;align-self:end}
  .card-clear>.card-title{grid-row:2}
  .card-clear>.big-stars{grid-row:3 / span 2;align-self:center}
  .card-clear>.stats{grid-row:1 / span 2;align-self:center}
  .card-clear>.btn-row{grid-row:3}
  .card-clear>.btn-sm{grid-row:4}
  .card-clear>.early-line{grid-column:1 / span 2;grid-row:5}
  #scrPause .card{max-width:520px;display:grid;grid-template-columns:1fr 1fr;column-gap:12px}
  #scrPause .card>.eyebrow,#scrPause .card>.card-title{grid-column:1 / span 2}
  #scrPause .btn-col{grid-column:1 / span 2;display:grid;grid-template-columns:1fr 1fr;gap:12px}
}

/* ---------- HUD ---------- */
.hud{position:fixed;inset:0;z-index:10;pointer-events:none}
.hud-level{position:absolute;top:calc(12px + var(--sat));left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.88);border-radius:999px;padding:6px 14px 6px 6px;
  box-shadow:0 3px 0 rgba(43,22,64,.18);white-space:nowrap;max-width:calc(100vw - 2*140px)}
.hud-num{font-family:var(--f-display);font-weight:600;font-size:14px;color:#fff;background:var(--plum);border-radius:999px;padding:3px 9px}
.hud-name{font-family:var(--f-display);font-weight:600;font-size:16px;color:var(--ink);overflow:hidden;text-overflow:ellipsis}
.hud-right{position:absolute;top:calc(12px + var(--sat));right:calc(12px + var(--sar));display:flex;align-items:center;gap:10px;pointer-events:auto}
.hud-stars{display:flex;gap:3px;background:rgba(255,255,255,.88);border-radius:999px;padding:8px 12px;box-shadow:0 3px 0 rgba(43,22,64,.18)}
.hud-stars .st{width:24px;height:24px}
@media (max-width:520px){
  .hud-level{top:calc(70px + var(--sat));padding:4px 12px 4px 4px;max-width:calc(100vw - 32px)}
  .hud-name{font-size:14px}
  .hud-stars{padding:7px 10px}
  .hud-stars .st{width:22px;height:22px}
}
.banner{position:absolute;left:50%;top:calc(116px + var(--sat));transform:translate(-50%,-50%);text-align:center;
  font-family:var(--f-display);font-weight:700;font-size:clamp(26px,6vw,44px);color:#fff;white-space:nowrap;
  text-shadow:0 3px 0 var(--plum-lo),0 6px 0 var(--plum-deep),0 10px 20px rgba(43,22,64,.4);
  animation:banner 1.4s ease both}
.banner small{display:block;font-size:.42em;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-hi);
  text-shadow:0 2px 0 var(--plum-deep)}
@keyframes banner{0%{opacity:0;transform:translate(-50%,-30%) scale(.8)}12%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}
  20%{transform:translate(-50%,-50%) scale(1)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-60%)}}

/* ---------- Touch pad ---------- */
.pad{position:fixed;left:0;right:0;bottom:0;z-index:11;pointer-events:none;
  padding:0 calc(16px + var(--sar)) calc(18px + var(--sab)) calc(16px + var(--sal));
  display:flex;justify-content:space-between;align-items:flex-end}
.pad-l{display:flex;gap:14px}
.pad-btn{pointer-events:auto;width:80px;height:80px;border-radius:26px;display:grid;place-items:center;
  background:rgba(255,255,255,.62);box-shadow:inset 0 0 0 2px rgba(255,255,255,.85),0 5px 0 rgba(43,22,64,.22);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  transition:transform .06s ease,background .1s,box-shadow .06s}
.pad-btn svg{width:38px;height:38px;fill:none;stroke:var(--ink);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.pad-btn.on{transform:translateY(4px) scale(.96);background:rgba(255,255,255,.9);box-shadow:inset 0 0 0 2px #fff,0 1px 0 rgba(43,22,64,.22)}
.pad-jump{width:104px;height:104px;border-radius:50%;background:rgba(255,197,49,.88);
  box-shadow:inset 0 0 0 3px rgba(255,236,170,.9),0 6px 0 var(--gold-lo);display:flex;flex-direction:column;gap:0}
.pad-jump svg{stroke:#4a2400;width:40px;height:40px;margin-bottom:-4px}
.pad-jump span{font-family:var(--f-display);font-weight:600;font-size:14px;letter-spacing:.1em;color:#4a2400}
.pad-jump.on{background:var(--gold-hi);box-shadow:inset 0 0 0 3px #fff3c4,0 1px 0 var(--gold-lo)}
@media (orientation:landscape) and (max-height:500px){
  .pad-btn{width:72px;height:72px;border-radius:22px}
  .pad-jump{width:92px;height:92px;border-radius:50%}
  .pad{padding-bottom:calc(12px + var(--sab))}
}

.fatal{position:fixed;inset:auto 16px 16px;z-index:99;background:var(--danger);color:#fff;font-weight:800;padding:14px 16px;border-radius:14px;text-align:center}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* polish pass after UI contact sheet review */
.tagline,.early-line,.panel-note,.sheet-note{text-wrap:balance}
.btn-row .btn{white-space:nowrap;padding:0 14px}
@media (max-width:520px){ .sheet-title{font-size:24px} .total-stars{font-size:16px;padding:5px 12px 5px 7px} }
@media (max-height:680px) and (orientation:portrait){
  .title-wrap{padding-top:48px;gap:10px}
  .logo{font-size:50px}
  .title-main{gap:6px}
  .btn-xl{min-height:52px;font-size:21px}
  .btn-col{gap:10px}
  .panel{padding:14px 16px 12px}
  .panel-h{font-size:17px;margin-bottom:8px}
  .full-list{gap:5px}
  .full-list li{font-size:13px;line-height:1.28}
  .panel-note{margin-top:8px;padding-top:8px}
}
@media (max-width:520px){.banner{top:calc(150px + var(--sat))}}
@media (orientation:landscape) and (max-height:500px){.banner{top:calc(96px + var(--sat));font-size:32px}}