*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overscroll-behavior:none;background:#fff6fb;font-family:"Arial Rounded MT Bold","Nunito",system-ui,-apple-system,sans-serif;color:#3a2b4a;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body{position:fixed;inset:0;overflow:hidden}
button{font:inherit;color:inherit;border:0;cursor:pointer;background:none}
#app{height:100%}
.screen{display:none;height:100%;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.screen.active{display:flex;flex-direction:column}
#home{overflow-y:auto;-webkit-overflow-scrolling:touch;display:none}
#home.active{display:block}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px}
.logo{margin:0;font-size:clamp(26px,6vw,44px);letter-spacing:.5px}
.logo span:nth-child(1){color:#ff4f8b}.logo span:nth-child(2){color:#27b4ff}.logo span:nth-child(3){color:#ffae00}
.iconbtn{font-size:30px;width:56px;height:56px;border-radius:18px;background:#fff;box-shadow:0 3px 0 #e8cfe0;flex:none}
.iconbtn:active,.tool:active,.mode:active{transform:translateY(2px) scale(.97)}
.modeswitch{display:flex;gap:10px;margin:4px 16px 8px}
.mode{flex:1;font-size:22px;padding:14px;border-radius:20px;background:#fff;box-shadow:0 4px 0 #e8cfe0}
.mode.on{background:#ff7eb6;color:#fff;box-shadow:0 4px 0 #d9558f}
.stats{margin:6px 16px;font-size:16px;background:#fff;border-radius:16px;padding:10px 14px}
.theme{margin:14px 0 4px}
.theme h2{margin:0 16px 8px;font-size:22px}
.theme.special{background:linear-gradient(135deg,#ffe0f0,#e6e0ff);border-radius:26px;margin:12px;padding:12px 0;border:4px dashed #ff9cc8}
.theme.special h2{font-size:28px;color:#d6337a}
.row{display:flex;gap:12px;overflow-x:auto;padding:4px 16px 10px;scroll-snap-type:x proximity}
.card{flex:none;width:150px;background:#fff;border-radius:20px;padding:8px;box-shadow:0 4px 0 #ecd5e4;scroll-snap-align:start;position:relative;animation:pop .35s ease both}
.special .card{width:min(44vw,240px)}
.card img{width:100%;aspect-ratio:1;display:block;border-radius:12px;background:#fff}
.card b{display:block;text-align:center;font-size:15px;margin-top:6px}
.card .badge{position:absolute;top:6px;right:6px;font-size:22px}
@keyframes pop{from{transform:scale(.85);opacity:0}}
.footnote{font-size:13px;opacity:.7;margin:16px;text-align:center}
/* editor */
#editor{background:#fdf0f7}
.edbar{display:flex;align-items:center;gap:10px;padding:8px 10px}
.edtitle{flex:1;min-width:0}.edtitle b{display:block;font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.edtitle small{display:block;font-size:13px;opacity:.75;line-height:1.2}
.diff{display:flex;background:#fff;border-radius:16px;padding:3px;box-shadow:0 3px 0 #e8cfe0}
.diff button{padding:10px 10px;border-radius:13px;font-size:15px}
.diff button.on{background:#27b4ff;color:#fff}
#viewport{flex:1;position:relative;overflow:hidden;touch-action:none;min-height:0}
#stage{position:absolute;left:0;top:0;transform-origin:0 0;background:#fff;border-radius:14px;box-shadow:0 6px 20px rgba(120,60,100,.18);touch-action:none}
#stage canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:14px;touch-action:none}
#lineCv{pointer-events:none}
#toast{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);background:#3a2b4a;color:#fff;padding:10px 16px;border-radius:20px;font-size:16px;opacity:0;transition:opacity .3s;pointer-events:none;text-align:center;max-width:90%}
#toast.show{opacity:.92}
.tools{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:6px 8px;align-items:center}
.tool{flex:none;min-width:62px;height:62px;border-radius:18px;background:#fff;box-shadow:0 3px 0 #e8cfe0;font-size:26px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.tool span{font-size:12px;margin-top:3px}
.tool.on{background:#ffd84d;box-shadow:0 3px 0 #d4a900}
.tool.done{background:#cfcfcf;min-width:86px}
.tool.done.ready{background:#3ccf6e;color:#fff;box-shadow:0 3px 0 #1f9a49;animation:wiggle 1.2s infinite}
@keyframes wiggle{0%,100%{transform:rotate(0)}10%{transform:rotate(-6deg)}20%{transform:rotate(6deg)}30%{transform:rotate(0)}}
.sizes{display:flex;gap:4px;background:#fff;border-radius:18px;padding:4px;box-shadow:0 3px 0 #e8cfe0}
.sizes.hide{display:none}
.sz{width:46px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center}
.sz i{display:block;border-radius:50%;background:#3a2b4a}.sz.on{background:#ffe9a0}
.palette-wrap{padding:0 6px calc(6px + env(safe-area-inset-bottom))}
#unlockInfo{font-size:14px;padding:2px 8px 4px}
#unlockInfo .bar{display:inline-block;width:90px;height:10px;background:#eedbe8;border-radius:5px;vertical-align:middle;overflow:hidden;margin:0 6px}
#unlockInfo .bar i{display:block;height:100%;background:#ff7eb6}
#palette{display:flex;gap:8px;overflow-x:auto;padding:4px 4px 8px;-webkit-overflow-scrolling:touch}
.sw{flex:none;width:64px;display:flex;flex-direction:column;align-items:center;font-size:11px;gap:3px}
.sw i{display:block;width:58px;height:58px;border-radius:50%;border:4px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .15s}
.sw.on i{transform:scale(1.12);border-color:#3a2b4a}
.sw.locked i{filter:grayscale(1) opacity(.35);position:relative}
.sw.locked i::after{content:"🔒";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:22px;font-style:normal}
.sw.locked{opacity:.8}
@media (min-width:900px){.sw{width:72px}.sw i{width:64px;height:64px}}
/* party */
#party{position:fixed;inset:0;z-index:50;background:radial-gradient(circle,#fff8c9,#ffb3d9 70%);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;animation:fadein .3s}
#party[hidden]{display:none}
@keyframes fadein{from{opacity:0}}
.dancers{display:flex;gap:2vw;align-items:flex-end}
.dancer{width:min(28vw,200px);height:auto}
.d1{animation:shuffle .5s infinite alternate ease-in-out}
.d2{animation:hop .4s infinite alternate ease-in-out}
.d3{animation:shuffle .45s infinite alternate-reverse ease-in-out}
@keyframes shuffle{from{transform:translateX(-14px) rotate(-12deg)}to{transform:translateX(14px) rotate(12deg)}}
@keyframes hop{from{transform:translateY(0) scaleY(1)}to{transform:translateY(-40px) scaleY(1.06)}}
.arm{transform-box:fill-box;animation:wave .25s infinite alternate}.arm.l{transform-origin:100% 100%}.arm.r{transform-origin:0 100%;animation-delay:.12s}
.leg{transform-box:fill-box;transform-origin:50% 0;animation:kick .3s infinite alternate}.leg.r{animation-delay:.15s}
@keyframes wave{from{transform:rotate(-35deg)}to{transform:rotate(35deg)}}
@keyframes kick{from{transform:rotate(-20deg)}to{transform:rotate(20deg)}}
.partytext{text-align:center;margin-top:16px}
.yay{font-size:clamp(36px,9vw,72px);color:#ff3b7f;text-shadow:3px 3px 0 #fff;animation:bounce .6s infinite alternate}
@keyframes bounce{to{transform:scale(1.08) rotate(-2deg)}}
#unlockMsg{font-size:22px;margin:10px;display:flex;align-items:center;gap:10px;justify-content:center}
#unlockMsg i{width:44px;height:44px;border-radius:50%;display:inline-block;border:4px solid #fff;animation:spin 1s infinite linear}
@keyframes spin{to{transform:rotate(360deg) scale(1.1)}}
.cf{position:absolute;top:-20px;width:12px;height:18px;border-radius:3px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}

.xpbar{display:flex;align-items:center;gap:8px;font-size:15px}
.home-xp{margin:6px 16px;background:#fff;border-radius:16px;padding:8px 12px}
.ed-xp{flex:none}
.xpbar .lv{background:#8e44d9;color:#fff;border-radius:12px;padding:4px 9px;font-weight:900;white-space:nowrap}
.xpbar .track{flex:1;min-width:60px;height:14px;background:#eedbe8;border-radius:7px;overflow:hidden}
.ed-xp .track{width:70px;flex:none}
.xpbar .track i{display:block;height:100%;background:linear-gradient(90deg,#ffae00,#ff4f8b);transition:width .4s}
.xpbar.bump .lv{animation:bounce .3s 2 alternate}
.xpfloat{position:fixed;font-size:20px;font-weight:900;color:#8e44d9;pointer-events:none;z-index:40;animation:floatup 1s forwards;text-shadow:0 0 4px #fff}
@keyframes floatup{to{transform:translateY(-60px);opacity:0}}
.shopbar{margin:8px 16px}.shopbar .mode{width:100%}
.shop .card.locked img{filter:grayscale(.6) opacity(.55)}
.card .price{position:absolute;left:8px;right:8px;top:45%;background:#fff;border-radius:14px;padding:6px;font-size:15px;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.card.soon{display:flex;align-items:center;justify-content:center;flex-direction:column;height:186px;color:#a88}
.stk{width:76px;height:76px;border-radius:50%;border:5px solid #fff;box-shadow:0 3px 8px rgba(0,0,0,.3);object-fit:cover;background:#fff;display:block}
.stk.shiny{border-color:#ffe14d;box-shadow:0 0 0 3px #ff7eb6,0 0 14px #ffd84d}
#levelup,#book{position:fixed;inset:0;z-index:60;background:rgba(60,30,80,.45);display:flex;align-items:center;justify-content:center;padding:16px}
#levelup[hidden],#book[hidden]{display:none}
.lvcard{background:#fff;border-radius:30px;padding:24px 30px;text-align:center;animation:popin .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes popin{from{transform:scale(.2) rotate(-20deg)}}
.burst{font-size:80px;animation:spin 1.5s infinite linear}
.lvt{font-size:40px;color:#8e44d9;margin:8px}
#lvGift{display:flex;align-items:center;gap:10px;justify-content:center;margin:10px 0 16px;font-size:18px}
.bookcard{background:#fff;border-radius:26px;width:min(720px,100%);max-height:90%;overflow:auto;padding:14px}
.bookcard header{display:flex;justify-content:space-between;align-items:center}.bookcard h2{margin:0}
.bookhelp{font-size:14px;opacity:.8}
#bookGrid{display:flex;flex-wrap:wrap;gap:12px}
.bk{position:relative;text-align:center;font-size:11px;width:84px}
.bk.used .stk{filter:grayscale(1) opacity(.45)}
.bk.used::after{content:"spent ✓";position:absolute;left:8px;right:8px;top:30px;background:#3a2b4a;color:#fff;border-radius:8px;font-size:12px}
#unlockMsg{flex-direction:column}.gotstk{display:flex;align-items:center;gap:10px;font-size:18px}
@media (max-width:600px){.ed-xp small{display:none}.edbar{flex-wrap:wrap}}
.adwrap{margin:10px 16px calc(10px + env(safe-area-inset-bottom));min-height:0}.adslot{text-align:center}.adslot small{font-size:10px;opacity:.5}.addemo{background:#ddd;color:#777;height:60px;display:flex;align-items:center;justify-content:center;border-radius:10px;font-size:12px}

/* options, continue, my art, recent colors, hold-to-confirm */
.optbody{padding:12px 16px;display:grid;gap:14px;max-width:640px;margin:0 auto}
.optcard{background:#fff;border-radius:20px;padding:14px 16px;box-shadow:0 4px 0 #ecd5e4}
.optcard h3{margin:0 0 8px}.optcard p{margin:6px 0}.muted{color:#867;font-size:14px}
.optrow{display:flex;align-items:center;gap:10px;margin:10px 0;font-size:17px}.optrow input[type=range]{flex:1}
.optrow input[type=checkbox]{width:24px;height:24px}
.optcard .mode{display:inline-block;margin:6px 6px 0 0;cursor:pointer}
#options{overflow-y:auto}
.nag{margin:6px 16px;padding:10px 14px;background:#fff6d6;border-radius:16px;font-size:15px}.nag button{margin-left:8px}
.contcard{display:flex;align-items:center;gap:14px;margin:6px 16px 10px;padding:10px;background:#fff;border-radius:20px;box-shadow:0 4px 0 #ecd5e4;width:calc(100% - 32px);text-align:left}
.contcard img{width:84px;height:84px;border-radius:12px;border:2px solid #f3dbe9}.contcard b{font-size:20px;display:block}
.myart .card .del{position:absolute;top:4px;left:4px;font-size:16px;background:#fff;border-radius:12px;padding:4px 6px;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.hold{position:relative;overflow:hidden}.hold::before{content:"";position:absolute;left:0;bottom:0;height:5px;width:var(--p,0%);background:#ff4f8b}
#recent{display:flex;gap:6px;align-items:center;padding:2px 6px;min-height:0;font-size:12px}#recent:empty{display:none}
#recent button{width:34px;height:34px;border-radius:50%;border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3)}
/* landscape: picture on the left, tools + colors in a side column */
@media (orientation:landscape) and (min-width:600px){
  #editor.active{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,36%);grid-template-rows:auto auto minmax(0,1fr);grid-template-areas:"bar bar" "vp tools" "vp pal";height:100%;overflow:hidden}
  #editor .edbar{grid-area:bar}
  #editor #viewport{grid-area:vp;min-height:0}
  #editor .tools{grid-area:tools;align-content:flex-start;padding-top:4px}
  #editor .palette-wrap{grid-area:pal;overflow-y:auto;min-height:0;padding-left:env(safe-area-inset-right);padding-right:calc(6px + env(safe-area-inset-right))}
  #editor #palette{flex-wrap:wrap;overflow-x:visible;justify-content:center}
}
@media (orientation:landscape) and (min-width:600px) and (max-height:500px){
  #editor .edbar{padding:4px 10px}
  #editor .edtitle small,#editor .ed-xp{display:none}
  #editor .edtitle b{font-size:17px}
  #editor .diff button{padding:6px 8px;font-size:13px}
  #editor .tool{min-width:50px;height:50px;font-size:21px;border-radius:14px}
  #editor .tool span{font-size:10px}
  #editor .sw{width:52px}#editor .sw i{width:46px;height:46px}
}