/* Puffbone. Dusk-violet crypt with warm lantern amber, bubble-white UI. Icons are drawn in CSS (no emoji art). */
:root{--ink:#f6efe0;--ink2:#cdbfe6;--bg:#120d24;--card:#241a45;--amber:#ffb85c;--mint:#8cf0b4;--bad:#ff6a5a;--acc:#b49cff;--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px)}
#app[data-world="2"]{--acc:#7fe0b0;--card:#16342b}#app[data-world="3"]{--acc:#7cc4ff;--card:#14304f}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:"Segoe UI","Helvetica Neue",system-ui,sans-serif;touch-action:manipulation;overscroll-behavior:none}
button{font:inherit;color:inherit;cursor:pointer;border:0}
.hidden{display:none!important}
#app{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;background:radial-gradient(120% 80% at 50% 0,#2b1f55,#0e0a1e)}
#app>*:not(.overlay):not(#toast){position:relative;width:100%;max-width:640px}
#top{display:flex;align-items:center;gap:8px;padding:calc(var(--safe-t) + 6px) 10px 4px;flex:none}
#hearts,#hearts2{display:flex;gap:3px;min-width:56px}#hearts2 .heart{fill:#5aa8ff}#hearts2 .heart.off{fill:#2a3a66}
.heart{fill:#ff5a78;filter:drop-shadow(0 1px 0 #0006)}.heart.off{fill:#4a3a66}
#mid{flex:1;text-align:center;line-height:1.1}#mid small{display:block;font-size:10px;letter-spacing:.16em;color:var(--acc)}#mid b{font-size:15px}
#scorebox{text-align:right;line-height:1.1;min-width:64px}#scorebox small{display:block;font-size:9px;letter-spacing:.14em;color:var(--ink2)}#scorebox b{font-size:15px;font-variant-numeric:tabular-nums}
.pill{width:38px;height:34px;border-radius:12px;background:#ffffff1c;display:grid;place-items:center}
.ico{display:inline-block;width:16px;height:16px;position:relative}.ico-pause::before,.ico-pause::after{content:"";position:absolute;top:1px;width:4px;height:14px;background:var(--ink);border-radius:1px}.ico-pause::before{left:2px}.ico-pause::after{left:10px}
.ico-left::before,.ico-right::before{content:"";position:absolute;top:2px;border:6px solid transparent}.ico-left::before{left:-2px;border-right:10px solid currentColor}.ico-right::before{left:5px;border-left:10px solid currentColor}
.ico-card{width:14px;height:18px;border:2px solid currentColor;border-radius:3px;vertical-align:-3px}
#hurry{height:7px;margin:0 10px 4px;border-radius:4px;background:#ffffff18;overflow:hidden;flex:none;position:relative;width:calc(100% - 20px)!important}
#hurryFill{display:block;height:100%;width:100%;background:linear-gradient(90deg,#8cf0b4,#ffd166);transition:width .3s linear}
#hurry.hot #hurryFill{background:linear-gradient(90deg,#ff7a5a,#ff4a6a);animation:pulse .5s infinite alternate}
#hurryTxt{position:absolute;right:6px;top:-3px;font-size:8px;color:#fff;opacity:.8}
@keyframes pulse{to{opacity:.55}}
#stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;position:relative}
#cv{border-radius:10px;box-shadow:0 8px 30px #000a;background:#000;touch-action:none}
#coach{position:absolute;left:8px;right:8px;top:8px;background:#000b;border:1px solid var(--acc);border-radius:12px;padding:8px 10px;font-size:13px;line-height:1.35;z-index:3}
#coach p{margin:0 0 6px}
#elemHud{position:absolute;left:12px;top:10px;font-size:11px;background:#000a;border-radius:10px;padding:3px 8px}
#touch{flex:none;display:flex;justify-content:space-between;align-items:center;padding:6px 12px calc(var(--safe-b) + 12px);gap:10px;height:clamp(150px,26vh,230px)}
.tp{display:flex;flex:1;justify-content:space-between;align-items:center;gap:10px;height:100%;position:relative}
.who{position:absolute;top:-2px;left:4px;font-size:10px;font-weight:800;letter-spacing:.12em;color:#ff8a8a}.who.p2{color:#7cc4ff}
#pad,#pad2{flex:1;max-width:300px;height:100%;display:flex;gap:10px;touch-action:none}
#padL,#padR,#padL2,#padR2{flex:1;border-radius:26px;background:#ffffff1a;display:grid;place-items:center;color:#ffffffcc;border:2px solid #ffffff22;transition:background .05s}
#padL.on,#padR.on,#padL2.on,#padR2.on{background:#b49cff77}#padL .ico,#padR .ico,#padL2 .ico,#padR2 .ico{transform:scale(2.2)}
#btns,#btns2{display:flex;gap:12px;align-items:flex-end;height:100%;touch-action:none}
#btnJ,#btnB,#btnJ2,#btnB2{border-radius:50%;font-weight:800;letter-spacing:.08em;font-size:12px;color:#fff;border:3px solid #ffffff44;touch-action:none;display:grid;place-items:center}
#btnJ{width:clamp(96px,26vw,128px);height:clamp(96px,26vw,128px);background:radial-gradient(circle at 35% 30%,#ffd98a,#f08a3c);margin-bottom:4px}
#btnB{width:clamp(80px,22vw,108px);height:clamp(80px,22vw,108px);background:radial-gradient(circle at 35% 30%,#bfeaff,#4a8be0);margin-bottom:34px}
#btnJ2{width:clamp(96px,26vw,128px);height:clamp(96px,26vw,128px);background:radial-gradient(circle at 35% 30%,#ffd98a,#f08a3c);margin-bottom:4px}
#btnB2{width:clamp(80px,22vw,108px);height:clamp(80px,22vw,108px);background:radial-gradient(circle at 35% 30%,#bfeaff,#4a8be0);margin-bottom:34px}
#btnJ.on,#btnB.on,#btnJ2.on,#btnB2.on{filter:brightness(1.25);transform:scale(.95)}
#btnB.charge{box-shadow:0 0 0 4px #fff7,0 0 24px #7fd0ff}
/* co-op: two panels side by side, each with its own pad and buttons */
#app.coop #touch{gap:8px;padding-left:6px;padding-right:6px}
#app.coop .tp{flex-direction:column;gap:6px;justify-content:center;min-width:0}
#app.coop #pad,#app.coop #pad2{flex:none;width:100%;max-width:none;height:46%}
#app.coop #btns,#app.coop #btns2{flex:none;height:50%;width:100%;flex-direction:row;gap:8px;align-items:center;justify-content:center}
#app.coop #btnJ,#app.coop #btnJ2,#app.coop #btnB,#app.coop #btnB2{width:min(42%,92px);height:auto;aspect-ratio:1;margin:0}
#app.coop #padL .ico,#app.coop #padR .ico,#app.coop #padL2 .ico,#app.coop #padR2 .ico{transform:scale(1.6)}
.left-hand #touch{flex-direction:row-reverse}.left-hand #btns{flex-direction:row-reverse}
@media (orientation:landscape) and (max-height:520px){
  #app>#top{position:absolute!important;top:0;left:0;right:0;z-index:3;max-width:none!important;padding-top:4px}
  #app>#hurry{position:absolute!important;top:40px;left:10px;right:10px;z-index:3;max-width:none!important;width:auto!important}
  #app>#stage{position:absolute!important;inset:0;max-width:none!important;width:100%!important;padding-top:48px}
  #app>#touch{position:absolute!important;left:0;right:0;bottom:0;top:auto;height:auto;max-width:none!important;pointer-events:none;padding:0 14px calc(var(--safe-b) + 8px);z-index:2}
  #pad,#btns{pointer-events:auto}#pad{height:90px;max-width:230px}#btns{height:140px}#btnJ{width:96px;height:96px}#btnB{width:80px;height:80px;margin-bottom:22px}
}
/* overlays */
.overlay{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:12px;background:#0a0618cc;overflow:auto}
.card{width:100%;max-width:440px;max-height:96vh;overflow:auto;background:var(--card);border:1px solid #ffffff2a;border-radius:20px;padding:18px 16px;text-align:center;box-shadow:0 14px 50px #000a}
.card h1,.card h2{margin:0 0 6px;letter-spacing:.04em}.card p{margin:6px 0;line-height:1.4}.small{font-size:12.5px;color:var(--ink2)}.tag{letter-spacing:.2em;font-size:11px;color:var(--acc)}
.big{display:block;width:100%;min-height:46px;margin:8px 0;border-radius:14px;background:linear-gradient(#ffc66e,#f08a3c);color:#2a1408;font-weight:800;letter-spacing:.06em;font-size:15px}
.big.alt{background:#ffffff1f;color:var(--ink)}.big.small{min-height:36px;font-size:13px}.big:disabled{opacity:.5}
.mini{border-radius:10px;background:var(--acc);color:#14102a;font-weight:700;padding:4px 12px}
.logo{font-size:44px;font-weight:900;letter-spacing:.06em;line-height:1;margin:2px 0 0;background:linear-gradient(#fff,#bfeaff 50%,#8cc4ff);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #2b4d9a)}
.sub{letter-spacing:.3em;font-size:11px;color:var(--amber);margin-bottom:6px}
.hero{width:150px;height:200px;object-fit:cover;border-radius:18px;margin:0 auto;display:block;filter:drop-shadow(0 8px 12px #000a);animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px)}}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}.row2 .big{margin:4px 0}
.mylink{display:inline-flex;gap:8px;align-items:center;justify-content:center}
.stars{font-size:34px;letter-spacing:6px;color:#4a3a66}.stars b{color:#ffd24a;text-shadow:0 0 12px #ffb02e}
.crit{display:flex;justify-content:space-between;font-size:13px;padding:3px 8px;border-radius:8px;background:#ffffff0f;margin:3px 0}.crit.ok{color:var(--mint)}
.world{margin:10px 0}.world h3{margin:0 0 6px;text-align:left;font-size:13px;letter-spacing:.14em;color:var(--acc)}
.lv{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.lvb{aspect-ratio:1;border-radius:12px;background:#ffffff1c;font-weight:800;font-size:16px;position:relative;display:grid;place-items:center;padding-bottom:8px}
.lvb small{position:absolute;bottom:3px;left:0;right:0;font-size:9px;color:#ffd24a;letter-spacing:1px}.lvb.lock{opacity:.4}.lvb.boss{background:#ff6a5a33;border:1px solid #ff6a5a88}.lvb.next{outline:2px solid var(--amber)}
.cardwin{display:flex;gap:10px;align-items:center;text-align:left;background:#ffffff14;border:1px solid var(--amber);border-radius:12px;padding:8px;margin:8px 0}.cardwin img{width:64px;border-radius:8px}.cardwin span{display:block;font-size:10px;letter-spacing:.14em;color:var(--amber)}
.hatrow{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.hatb{border-radius:12px;background:#ffffff1c;padding:8px 2px;font-size:11px}.hatb.sel{outline:2px solid var(--amber)}.hatb.lock{opacity:.4}
.tog{display:flex;justify-content:space-between;align-items:center;padding:8px 4px;border-bottom:1px solid #ffffff14;text-align:left;font-size:14px}.tog small{display:block;color:var(--ink2);font-size:11.5px}
.sw{width:46px;height:26px;border-radius:14px;background:#ffffff2a;position:relative;flex:none}.sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .12s}.sw.on{background:var(--mint)}.sw.on::after{left:23px}
#toast{position:fixed;left:50%;bottom:calc(var(--safe-b) + 170px);transform:translateX(-50%);background:#000d;padding:8px 14px;border-radius:12px;font-size:14px;z-index:40;opacity:0;pointer-events:none;transition:opacity .2s;max-width:90vw;text-align:center}#toast.on{opacity:1}
.lbrow{font-size:13px;text-align:left;padding:2px 6px}.lbrow.me{color:#ffd96a;font-weight:700}