:root{
  --bg:#f6f1ff;--paper:#fff;--ink:#2e2545;--muted:#665d7e;--line:#e8e0f4;
  --pri:#7655df;--pri-d:#5536c2;--pri-soft:#efe8ff;--pink:#ff6fa5;--pink-soft:#ffe6ef;
  --yel:#ffcc4d;--yel-soft:#fff4d6;--grn:#2f9e63;--grn-soft:#e2f6ea;--blu:#3b88c3;--blu-soft:#e3f0fb;
  --r:18px;--sh:0 6px 20px #4a2f8a14;--tap:56px;
  --fh:'Baloo 2',ui-rounded,'Nunito',system-ui,sans-serif;--fb:'Nunito',ui-rounded,system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--fb);font-weight:700;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
body{overflow:hidden;-webkit-user-select:none;user-select:none}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;touch-action:manipulation}
button:disabled{opacity:.35;cursor:default}
:focus-visible{outline:3px solid #b79cff;outline-offset:2px}
[hidden]{display:none!important}
h1,h2,h3{font-family:var(--fh);margin:0;line-height:1.15}
#app{height:100dvh}
.screen{height:100dvh;display:flex;flex-direction:column;overflow:hidden;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}

/* ---------- topbar ---------- */
.topbar{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:max(8px,env(safe-area-inset-top)) 12px 8px;background:var(--paper);border-bottom:1px solid var(--line);min-height:66px}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto;min-width:0}
.brand b{font-family:var(--fh);font-size:22px;display:block;line-height:1;color:var(--pri-d)}
.brand small{display:block;color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-title{font-size:22px;margin-right:auto;color:var(--pri-d)}
.ibtn{width:var(--tap);height:var(--tap);min-width:var(--tap);border-radius:16px;display:grid;place-items:center;font-size:24px;background:var(--paper);border:2px solid var(--line)}
.ibtn:active{transform:scale(.94);background:var(--pri-soft)}
.ibtn.on{background:var(--pri-soft);border-color:#b9a3f5}
.btn{min-height:52px;padding:10px 16px;border-radius:16px;border:2px solid var(--line);background:var(--paper);font-weight:800;font-size:16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--pri);border-color:var(--pri);color:#fff}
.btn.pink{background:var(--pink);border-color:var(--pink);color:#fff}
.btn.danger{background:#fff0f0;border-color:#f3c3c3;color:#b3261e}
.link{color:var(--pri-d);font-weight:800;padding:8px;min-height:44px}

/* ---------- home ---------- */
.home{flex:1;overflow:auto;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;padding:16px;align-content:start}
.home-main{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-content:start}
.big-tile{display:flex;align-items:center;gap:14px;text-align:left;padding:18px;border-radius:24px;min-height:120px;background:var(--paper);border:2px solid var(--line);box-shadow:var(--sh)}
.big-tile:active{transform:scale(.98)}
.big-tile b{font-family:var(--fh);font-size:24px;display:block;line-height:1.1}
.big-tile small{color:var(--muted);font-size:14px;display:block;margin-top:2px}
.bt-ico{font-size:46px;width:72px;height:72px;min-width:72px;display:grid;place-items:center;border-radius:20px}
.t-pola{grid-column:span 2;min-height:150px;background:linear-gradient(120deg,#5f3fd0,#7a4fe0);border-color:transparent;color:#fff}
.t-pola small{color:#fff}.t-pola .bt-ico{background:#ffffff2e;font-size:56px;width:96px;height:96px}
.t-pola b{font-size:32px}
.t-bebas .bt-ico{background:var(--yel-soft)}.t-foto .bt-ico{background:var(--blu-soft)}.t-karya .bt-ico{background:var(--pink-soft)}.t-bintang .bt-ico{background:var(--grn-soft)}
.home-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.card{background:var(--paper);border:2px solid var(--line);border-radius:22px;padding:14px;box-shadow:var(--sh)}
.card-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.card-h b{font-family:var(--fh);font-size:20px}
.today{display:flex;align-items:center;gap:14px;cursor:pointer;background:linear-gradient(135deg,#fff8e1,#ffeef5)}
.today canvas{width:96px;height:96px;image-rendering:pixelated;border-radius:14px;background:#fff;flex:0 0 auto}
.today b{font-family:var(--fh);font-size:20px;display:block}
.today small{color:var(--muted);display:block;font-size:13px}
.today .tag{display:inline-block;background:var(--yel);color:#5b3b00;border-radius:999px;padding:3px 10px;font-size:12px;margin-bottom:4px}
.recent{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.recent::-webkit-scrollbar{display:none}
.rc{flex:0 0 auto;width:104px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;color:var(--muted)}
.rc canvas{width:96px;height:96px;border-radius:14px;border:2px solid var(--line);image-rendering:pixelated;background:#fff}
.rc span{max-width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.empty-note{color:var(--muted);font-size:14px;padding:6px 2px}
.level-chip,.install-chip{min-height:56px;border-radius:18px;border:2px dashed #cdbdf3;background:#fbf8ff;color:var(--pri-d);font-weight:800;font-size:16px;padding:10px 14px}
.install-chip{border-style:solid;background:var(--grn-soft);border-color:#b6e5c9;color:#1d6b41}

/* ---------- galeri ---------- */
.seg{display:flex;background:var(--pri-soft);border-radius:16px;padding:4px;gap:4px}
.seg button{min-height:48px;padding:6px 12px;border-radius:12px;font-weight:800;font-size:15px;color:var(--pri-d);white-space:nowrap}
.seg button.on{background:var(--paper);box-shadow:0 2px 8px #5536c222}
.cats{flex:0 0 auto;display:flex;gap:8px;overflow-x:auto;padding:12px 12px 4px;scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
.cat{flex:0 0 auto;min-height:52px;padding:8px 16px;border-radius:999px;background:var(--paper);border:2px solid var(--line);font-weight:800;font-size:16px;display:flex;align-items:center;gap:6px}
.cat.on{background:var(--pri);border-color:var(--pri);color:#fff}
.search-row{padding:8px 12px 0}
.search-row input{width:100%;min-height:52px;border:2px solid var(--line);border-radius:16px;padding:10px 14px;background:var(--paper);font-size:16px}
.pgrid{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px;padding:12px 12px max(16px,env(safe-area-inset-bottom));align-content:start}
.pcard{position:relative;background:var(--paper);border:2px solid var(--line);border-radius:20px;padding:10px 8px 8px;display:flex;flex-direction:column;align-items:center;gap:6px;min-height:170px}
.pcard:active{transform:scale(.97)}
.pcard canvas{width:100%;max-width:112px;aspect-ratio:1;image-rendering:pixelated}
.pcard .nm{font-size:14px;text-align:center;line-height:1.2}
.pcard .meta{font-size:12px;color:var(--muted)}
.pcard .done{position:absolute;top:6px;right:6px;background:var(--yel);border-radius:999px;font-size:13px;padding:2px 7px;color:#5b3b00}
.pcard .wip{position:absolute;top:6px;left:6px;background:var(--pri-soft);border-radius:999px;font-size:12px;padding:2px 7px;color:var(--pri-d)}

/* ---------- karya ---------- */
.wgrid{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;padding:14px;align-content:start}
.wcard{background:var(--paper);border:2px solid var(--line);border-radius:20px;padding:10px;display:flex;flex-direction:column;gap:8px}
.wcard canvas{width:100%;aspect-ratio:1;border-radius:12px;image-rendering:pixelated;background:#fff;cursor:pointer}
.wcard b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wcard small{color:var(--muted);font-size:12px}
.wbar{height:8px;border-radius:8px;background:#efe9f8;overflow:hidden}.wbar>i{display:block;height:100%;background:linear-gradient(90deg,#8c66ed,#ff82af)}
.wact{display:flex;gap:6px}.wact .btn{flex:1;min-height:48px;padding:6px;font-size:15px}
.hold{position:relative;overflow:hidden}
.hold::after{content:'';position:absolute;inset:0;background:#ffb4b466;transform:scaleX(0);transform-origin:left}
.hold.holding::after{transition:transform 1.4s linear;transform:scaleX(1)}

/* ---------- koleksi ---------- */
.koleksi{flex:1;overflow:auto;padding:14px 14px 30px}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.stat{background:var(--paper);border:2px solid var(--line);border-radius:20px;padding:14px;text-align:center}
.stat b{font-family:var(--fh);font-size:34px;display:block;color:var(--pri-d);line-height:1}
.stat small{color:var(--muted)}
.sec-h{font-size:22px;margin:22px 2px 10px;color:var(--pri-d)}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.badge{background:var(--paper);border:2px solid var(--line);border-radius:20px;padding:12px;text-align:center}
.badge .bi{font-size:40px;display:block}
.badge b{display:block;font-size:15px}.badge small{color:var(--muted);font-size:12px;display:block}
.badge.off{filter:grayscale(1);opacity:.5}
.stickers{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px}
.sticker{background:var(--paper);border:2px solid var(--line);border-radius:18px;padding:8px;text-align:center;font-size:12px}
.sticker canvas{width:72px;height:72px;image-rendering:pixelated;display:block;margin:0 auto 4px}

/* ---------- editor ---------- */
.ed-top{gap:6px;padding-left:8px;padding-right:8px}
.ed-title{display:flex;align-items:center;gap:6px;min-width:0;margin-right:auto;font-family:var(--fh);font-size:20px}
.ed-title b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ed-title span{font-size:26px}
.ring{position:relative;width:56px;height:56px;min-width:56px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.r-bg{fill:none;stroke:#efe8fb;stroke-width:4}
.r-fg{fill:none;stroke:var(--pri);stroke-width:4;stroke-linecap:round;stroke-dasharray:94.25;stroke-dashoffset:94.25;transition:stroke-dashoffset .3s}
.ring span{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;font-weight:800;color:var(--pri-d)}
.ed-body{flex:1;display:flex;min-height:0}
.tools{flex:0 0 auto;width:92px;background:var(--paper);border-right:1px solid var(--line);overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:6px;scrollbar-width:none}
.tools::-webkit-scrollbar{display:none}
.tool{min-height:66px;border-radius:16px;border:2px solid var(--line);background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:12px;font-weight:800;line-height:1.1;padding:4px 2px;flex:0 0 auto}
.tool i{font-style:normal;font-size:26px;line-height:1.1}
.tool.on{background:var(--pri-soft);border-color:var(--pri);color:var(--pri-d)}
.tool.mod.on{background:var(--yel-soft);border-color:#f2c14e;color:#6b4a00}
.stage{position:relative;flex:1;min-width:0;background:#ebe4f6;overflow:hidden;touch-action:none}
.stage canvas{display:block;width:100%;height:100%;touch-action:none}
.zoombox{position:absolute;right:10px;bottom:10px;display:flex;flex-direction:column;gap:6px}
.zb{width:52px;height:52px;border-radius:16px;background:#fffffff0;border:2px solid var(--line);font-size:24px;font-weight:800;box-shadow:var(--sh)}
.mirror-chip{position:absolute;left:10px;top:10px;min-height:44px;padding:6px 14px;border-radius:999px;background:var(--yel);color:#5b3b00;font-weight:800;box-shadow:var(--sh)}
.bubble{position:absolute;left:50%;top:14px;transform:translate(-50%,-10px);background:#fff;border:2px solid var(--line);border-radius:999px;padding:8px 18px;font-family:var(--fh);font-size:22px;box-shadow:var(--sh);opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;white-space:nowrap;display:flex;align-items:center;gap:8px}
.bubble.show{opacity:1;transform:translate(-50%,0)}
.bubble i{width:22px;height:22px;border-radius:50%;display:inline-block;border:2px solid #0002}
.palette{flex:0 0 auto;width:236px;background:var(--paper);border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.pal-h{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);font-family:var(--fh);font-size:19px}
.cur-sw{width:40px;height:40px;border-radius:12px;border:2px solid #0002;flex:0 0 auto;background-size:cover}
.pal-scroll{flex:1;overflow-y:auto;padding:8px 10px 16px}
.pal-sec{font-size:13px;color:var(--muted);margin:10px 2px 6px;display:flex;justify-content:space-between;align-items:center}
.pal-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.sw{position:relative;aspect-ratio:1;border-radius:14px;border:2px solid #00000018;min-height:44px;background-size:cover;box-shadow:inset 0 -4px 0 #0000001a}
.sw.on{outline:4px solid var(--pri);outline-offset:2px;z-index:1}
.sw .num{position:absolute;left:3px;top:2px;font-size:12px;font-weight:800;text-shadow:0 0 3px #fff,0 0 3px #fff;color:#2e2545}
.sw .cnt{position:absolute;right:-4px;bottom:-6px;background:#fff;border:2px solid var(--line);border-radius:999px;font-size:11px;padding:0 5px;color:var(--ink)}
.sw .ok{position:absolute;inset:0;display:grid;place-items:center;font-size:20px;text-shadow:0 1px 3px #0006;color:#fff}
.pal-more{width:100%;margin-top:8px;min-height:48px;border-radius:14px;border:2px dashed #cdbdf3;color:var(--pri-d);font-weight:800}
.custom-row{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:14px}
.custom-row input{width:56px;height:44px;border:0;padding:0;background:none}

/* ---------- modal ---------- */
.modal-bg{position:fixed;inset:0;background:#2b1d4d73;z-index:40;display:flex;align-items:center;justify-content:center;padding:14px}
.modal{background:var(--paper);border-radius:26px;width:min(760px,100%);max-height:min(92dvh,900px);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 80px #2b1d4d55}
.m-head{display:flex;align-items:center;gap:10px;padding:14px 14px 10px 20px;border-bottom:1px solid var(--line)}
.m-head h2{flex:1;font-size:24px;color:var(--pri-d)}
.m-body{overflow:auto;padding:16px 20px 22px;font-size:16px;line-height:1.5}
.m-body p{margin:0 0 12px;color:var(--muted)}
.opt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.opt{border:2px solid var(--line);border-radius:18px;padding:12px;background:var(--paper);display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-weight:800;min-height:96px;justify-content:center}
.opt.on{border-color:var(--pri);background:var(--pri-soft);color:var(--pri-d)}
.opt big{font-size:36px;line-height:1}
.opt small{color:var(--muted);font-weight:700;font-size:13px}
.opt canvas{width:84px;height:84px;border-radius:12px}
.m-sec{font-family:var(--fh);font-size:18px;margin:12px 0 8px;color:var(--ink)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}
.set-row select,.set-row input[type=text]{min-height:48px;border:2px solid var(--line);border-radius:14px;padding:6px 10px;background:#fff;max-width:60%}
.switch{width:64px;height:38px;border-radius:999px;background:#ddd5ea;position:relative;flex:0 0 auto}
.switch::after{content:'';position:absolute;left:4px;top:4px;width:30px;height:30px;border-radius:50%;background:#fff;box-shadow:0 2px 6px #0003;transition:left .15s}
.switch.on{background:var(--grn)}.switch.on::after{left:30px}
.note{background:var(--pri-soft);border-radius:14px;padding:12px;color:#4d3d7a;font-size:14px;line-height:1.5}
.stamp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px}
.stamp-grid button{border:2px solid var(--line);border-radius:14px;padding:6px;background:#fff}
.stamp-grid canvas{width:100%;aspect-ratio:1;image-rendering:pixelated}

/* ---------- perayaan ---------- */
.celebrate{position:fixed;inset:0;z-index:50;background:#2b1d4d80;display:flex;align-items:center;justify-content:center;padding:14px}
#confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cel-card{position:relative;background:#fff;border-radius:30px;padding:18px 20px 20px;text-align:center;width:min(560px,100%);max-height:94dvh;overflow:auto;box-shadow:0 30px 90px #0004;animation:pop .45s cubic-bezier(.16,1,.3,1)}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.cel-stars{font-size:44px;letter-spacing:6px}
.cel-card h2{font-size:34px;color:var(--pri-d)}
.cel-card p{color:var(--muted);margin:4px 0 10px}
#celArt{width:min(300px,70vw);height:auto;aspect-ratio:1}
.cel-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.rest{position:fixed;inset:0;z-index:60;background:linear-gradient(160deg,#e9fbe9,#e5f2ff);display:flex;align-items:center;justify-content:center;padding:20px}
.rest-card{text-align:center;max-width:460px}
.rest-emoji{font-size:80px}
.rest-card h2{font-size:34px;color:#1d6b41;margin:8px 0}
.rest-card p{font-size:18px;color:#3a5a48;line-height:1.5}
.toast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translateX(-50%);background:#2e2545;color:#fff;padding:12px 18px;border-radius:16px;font-size:15px;z-index:80;opacity:0;transition:opacity .2s;pointer-events:none;max-width:90vw;text-align:center}
.toast.show{opacity:1}

/* ---------- responsif ---------- */
@media (max-width:900px){
  .home{grid-template-columns:1fr}
  .palette{width:200px}
}
@media (max-width:760px), (orientation:portrait) and (max-width:1000px){
  .ed-body{flex-direction:column}
  .tools{order:2;width:auto;flex-direction:row;overflow-x:auto;overflow-y:hidden;border-right:0;border-top:1px solid var(--line);padding:6px 8px}
  .tool{min-width:72px;min-height:64px}
  .stage{order:1}
  .palette{order:3;width:auto;border-left:0;border-top:1px solid var(--line);max-height:none;flex:0 0 auto;padding-bottom:env(safe-area-inset-bottom)}
  .pal-h{display:none}
  .pal-scroll{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;padding:8px 10px;align-items:flex-start}
  .pal-scroll .pal-sec{display:none}
  .pal-scroll .pal-grid{display:flex;gap:8px}
  .pal-scroll .sw{width:54px;min-width:54px;height:54px}
  .pal-scroll .pal-more{width:auto;min-width:96px;margin:0;height:54px;flex:0 0 auto}
  .pal-scroll .custom-row{display:none}
}
@media (max-width:560px){
  .home-main{grid-template-columns:1fr}
  .t-pola{grid-column:auto}
  .big-tile{min-height:96px;padding:14px}
  .big-tile b{font-size:21px}
  .t-pola b{font-size:26px}
  .bt-ico{width:60px;height:60px;min-width:60px;font-size:38px}
  .topbar{min-height:60px;padding-left:8px;padding-right:8px}
  :root{--tap:50px}
  .ibtn{font-size:21px;border-radius:14px}
  .ed-title{font-size:16px}.ed-title span{font-size:20px}
  .ring{width:48px;height:48px;min-width:48px}
  #btnRedo{display:none}
  .seg button{padding:6px 8px;font-size:13px}
  .tb-title{font-size:19px}
  #scr-pola .tb-title{display:none}
  #scr-pola .seg{margin-left:auto}
  .pgrid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;padding:8px}
  .pcard{min-height:140px;border-radius:16px}
  .wgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:10px}
  .cel-actions{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}