*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}
body{font-family:ui-rounded,"SF Pro Rounded",-apple-system,system-ui,"Segoe UI",Roboto,"Nunito",sans-serif;color:#3b3347;
 background:linear-gradient(180deg,#bfe8ff 0%,#dff5ff 38%,#c9f0b8 70%,#a9e08f 100%);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button{font:inherit;color:inherit;cursor:pointer}
#app{position:fixed;inset:0;display:flex;flex-direction:column;height:100vh;height:100dvh;max-width:720px;margin:0 auto}
.ico{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.22em}
.ico svg,.ti svg,#mutebtn svg{width:100%;height:100%;display:block}
/* top bar */
#topbar{display:flex;align-items:center;gap:6px;padding:calc(env(safe-area-inset-top) + 6px) 8px 6px;background:rgba(255,255,255,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 2px 10px rgba(60,40,90,.08);z-index:5}
#lvlbadge{background:#7b5cff;color:#fff;border-radius:12px;padding:3px 8px 5px;min-width:52px;text-align:center;box-shadow:0 2px 0 #5a3fd6}
#lvlbadge .lv{font-size:12px;line-height:1.2}#lvlbadge b{font-size:15px}
.xpbar{height:5px;background:rgba(255,255,255,.35);border-radius:4px;overflow:hidden;margin-top:2px}
.xpbar i{display:block;height:100%;background:#ffd84a;border-radius:4px;transition:width .5s}
#reschips{flex:1;display:flex;gap:4px;justify-content:space-between;min-width:0}
.chip{flex:1;display:flex;align-items:center;justify-content:center;gap:3px;background:#fff;border-radius:20px;padding:4px 6px;font-size:14px;box-shadow:0 1px 0 rgba(0,0,0,.08);min-width:0}
.chip .ico{width:18px;height:18px;flex:none}.chip b{font-variant-numeric:tabular-nums}
.chip.bump{animation:bump .4s}
@keyframes bump{40%{transform:scale(1.18)}}
.iconbtn{background:#fff;border:0;border-radius:50%;width:34px;height:34px;padding:6px;flex:none;box-shadow:0 1px 0 rgba(0,0,0,.08)}
/* main */
#main{flex:1;position:relative;overflow:hidden}
.screen{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:10px 10px 18px;display:none}
.screen.active{display:block;animation:fadein .25s}
#scr-play.active{display:flex;flex-direction:column;overflow:hidden;padding:6px 8px 8px}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}}
/* tabs */
#tabs{display:flex;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:4px 6px calc(env(safe-area-inset-bottom) + 4px);box-shadow:0 -2px 10px rgba(60,40,90,.08);z-index:5}
#tabs button{flex:1;border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:1px;font-size:12px;font-weight:600;color:#8a8298;padding:4px 0;border-radius:14px}
#tabs button.active{color:#5a3fd6;background:#efe9ff}
.ti{width:28px;height:28px;display:block;transition:transform .2s}
#tabs button.active .ti{transform:translateY(-2px) scale(1.08)}
/* buttons */
.btn{border:0;border-radius:14px;padding:10px 14px;font-weight:700;font-size:15px;background:#fff;color:#4a3f5c;box-shadow:0 3px 0 #d8d0e6;transition:transform .08s;display:inline-flex;align-items:center;justify-content:center;gap:5px}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 #d8d0e6}
.btn.primary{background:linear-gradient(180deg,#8f73ff,#6b4ff0);color:#fff;box-shadow:0 3px 0 #4b32c4}
.btn.gold{background:linear-gradient(180deg,#ffd75a,#f5b400);color:#5a3d00;box-shadow:0 3px 0 #c98f00}
.btn.danger{background:#ff6b7f;color:#fff;box-shadow:0 3px 0 #d64459}
.btn.small{padding:6px 10px;font-size:13px;border-radius:11px}
.btn.big{font-size:22px;padding:14px 40px;border-radius:18px}
.btn.wide{width:100%;margin-top:10px}
.btn:disabled{opacity:.45}
.btn.poor{opacity:.6}
.btn.ghostbtn{background:rgba(255,255,255,.6);box-shadow:none;color:#7a7088}
.link{border:0;background:none;color:#7b5cff;font-size:13px;text-decoration:underline;padding:0 4px}
.muted{color:#8a8298}.small{font-size:13px}.center{text-align:center}
/* ranch */
.ranch-head{display:flex;align-items:center;justify-content:space-between;margin:2px 4px 6px}
.h1{font-size:22px;font-weight:800;color:#3b2f5c}.sub{font-size:13px;color:#6f6680}
.bonusrow{display:flex;flex-wrap:wrap;gap:5px;margin:0 4px 8px;font-size:13px}
.bchip{background:rgba(255,255,255,.8);border-radius:20px;padding:3px 8px;font-weight:700;color:#4a3f5c}
.actions{display:flex;gap:8px;margin:0 2px 10px}.actions .btn{flex:1;padding:10px 6px;font-size:14px}
.pen-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.pen{background:linear-gradient(180deg,#fffdf6 0%,#fffdf6 55%,#d7f5c4 55%,#bfeaa6 100%);border-radius:20px;padding:8px 8px 10px;text-align:center;box-shadow:0 3px 0 rgba(90,140,70,.25),0 6px 16px rgba(60,40,90,.08);position:relative;border:2px solid #fff;cursor:pointer}
.pen.bounce .pen-art{animation:jump .5s}
@keyframes jump{30%{transform:translateY(-14px) scale(1.06)}60%{transform:translateY(0) scale(.96)}}
.pen-art{height:96px;display:flex;align-items:flex-end;justify-content:center}
.pen-art svg{height:100%;width:auto;animation:idle 2.6s ease-in-out infinite;transform-origin:50% 95%}
.pen:nth-child(2n) .pen-art svg{animation-delay:-1.1s}.pen:nth-child(3n) .pen-art svg{animation-delay:-.5s}
@keyframes idle{50%{transform:scale(1.03,.97) translateY(1px)}}
.pen-name{font-weight:800;font-size:16px;margin-top:2px}
.pen-meta{font-size:12px;color:#5b5368;margin:2px 0 4px}
.badge{display:inline-block;color:#fff;font-size:10px;font-weight:800;border-radius:8px;padding:1px 6px;vertical-align:1px;letter-spacing:.3px}
.grow{height:7px;background:rgba(255,255,255,.7);border-radius:6px;overflow:hidden;margin:4px 10px 6px}
.grow i{display:block;height:100%;background:linear-gradient(90deg,#ffb84d,#ff7a59);border-radius:6px;transition:width .4s}
.state{font-size:12px;font-weight:700;border-radius:10px;padding:5px 4px;margin-top:4px}
.state.ready{background:#fff;color:#3fa860}.state.rest{background:#fff;color:#8a8298}
.pen.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#8a8298;background:rgba(255,255,255,.45);border:2px dashed #fff;min-height:190px;box-shadow:none}
.pen.empty .plus{font-size:40px;font-weight:300;line-height:1}
.feedbtn{width:100%}
/* modals */
#modal-root{position:fixed;inset:0;pointer-events:none;z-index:20}
.modal-wrap{position:absolute;inset:0;background:rgba(40,25,70,.42);display:flex;align-items:center;justify-content:center;padding:16px;pointer-events:auto;animation:fadebg .2s}
.modal-wrap.out{opacity:0;transition:opacity .2s}
@keyframes fadebg{from{opacity:0}}
.modal{background:#fffdf8;border-radius:24px;width:100%;max-width:420px;max-height:calc(100dvh - 40px);overflow-y:auto;padding:18px 16px 16px;position:relative;box-shadow:0 20px 50px rgba(40,20,80,.3);animation:popin .28s cubic-bezier(.2,1.4,.5,1)}
@keyframes popin{from{transform:scale(.85);opacity:0}}
.mclose{position:absolute;right:10px;top:8px;border:0;background:#f1ecf8;border-radius:50%;width:32px;height:32px;font-size:22px;line-height:1;color:#7a7088}
.mbtns{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}.mbtns:empty{display:none}.mbtns .btn{flex:1}
.big-title{font-size:23px;font-weight:800;text-align:center;color:#3b2f5c;margin:2px 26px 10px}
.modal p{line-height:1.45;font-size:15px}
.legend{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:8px 0;font-size:13px;text-align:left}
.legend div{display:flex;align-items:center;gap:6px;background:#f6f1ff;border-radius:10px;padding:5px 7px}
.legend .ico{width:24px;height:24px;flex:none}
.tut-art{display:flex;justify-content:center;gap:4px}.tut-art svg{width:110px;height:110px}
.dots{display:flex;justify-content:center;gap:6px;margin-top:8px}.dots i{width:8px;height:8px;border-radius:50%;background:#ddd5ea}.dots i.on{background:#7b5cff}
.unlock-card{display:flex;align-items:center;gap:10px;background:#f2fbe9;border-radius:16px;padding:8px;margin-top:8px;font-size:14px}
.unlock-card svg{width:80px;height:80px;flex:none}
/* detail */
.detail-art{height:150px;display:flex;justify-content:center;background:radial-gradient(circle at 50% 85%,#c8efb2 0 40%,transparent 41%)}
.detail-art svg{height:100%;animation:idle 2.6s ease-in-out infinite;transform-origin:50% 95%}
.detail-name{text-align:center;font-size:24px;font-weight:800}
.traits{width:100%;border-collapse:collapse;margin-top:10px;font-size:14px}
.traits td{padding:6px 4px;border-bottom:1px solid #f0eaf6}.traits td:first-child{color:#8a8298;width:70px}
.sw{display:inline-block;width:14px;height:14px;border-radius:50%;vertical-align:-2px;margin-right:5px;border:1px solid rgba(0,0,0,.15)}
/* shop */
.shop-item{display:flex;align-items:center;gap:10px;padding:8px;border-radius:14px;background:#faf6ff;margin-bottom:7px}
.shop-item.locked{opacity:.65}
.shop-art{width:54px;height:54px;flex:none;display:flex;align-items:center;justify-content:center}
.shop-art svg{width:100%;height:100%}
.pen-ico{background:#efe9ff;border-radius:14px;font-weight:800;font-size:20px;color:#7b5cff}.pen-ico svg{width:32px;height:32px}
.shop-info{flex:1;display:flex;flex-direction:column;font-size:15px}.shop-info small{color:#8a8298;font-size:12px}
/* breeding */
.bslots{display:flex;align-items:center;justify-content:center;gap:8px}
.bslot{width:110px;height:120px;border-radius:18px;background:#f6f1ff;border:2px dashed #cfc3ea;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#a99cc4}
.bslot span{font-size:36px;font-weight:800}.bslot small{font-size:12px}
.bslot.full{border-style:solid;border-color:#b9a6ff;background:#fff;color:#3b3347}
.bslot svg{width:84px;height:84px}
.bheart{width:34px;height:34px;animation:beat 1s infinite}.bheart svg{width:100%;height:100%}
@keyframes beat{50%{transform:scale(1.18)}}
.odds{text-align:center;font-size:13px;color:#6f6680;margin:10px 0 6px;line-height:1.4}
.lucky{display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px;font-weight:700;background:#ecfbef;border-radius:12px;padding:7px}
.lucky.poor{opacity:.5}.lucky input{width:18px;height:18px}
.bpicks{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:6px;margin-top:10px;max-height:34vh;overflow-y:auto;padding:2px}
.bpick{border:2px solid transparent;background:#fff;border-radius:14px;padding:4px;display:flex;flex-direction:column;align-items:center;box-shadow:0 2px 0 #e6def2;position:relative}
.bpick svg{width:60px;height:60px}.bpick small{font-size:11px;font-weight:700}
.bpick em{position:absolute;top:3px;right:3px;font-size:9px;background:#eee;border-radius:6px;padding:1px 4px;font-style:normal}
.bpick.sel{border-color:#7b5cff;background:#f3efff}.bpick:disabled{opacity:.35}
/* hatch */
.hatch{text-align:center;min-height:240px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.egg{width:120px;height:140px;animation:wobble .5s ease-in-out infinite}.egg svg{width:100%;height:100%}
.egg.crack{animation:crack .38s forwards}
@keyframes wobble{25%{transform:rotate(-9deg)}75%{transform:rotate(9deg)}}
@keyframes crack{50%{transform:scale(1.2)}100%{transform:scale(1.6);opacity:0}}
.hatch-title{font-size:24px;font-weight:800;margin:6px 0}
.reveal{width:170px;height:170px;animation:popin .5s cubic-bezier(.2,1.6,.5,1)}.reveal svg{width:100%;height:100%}
.tags{margin-top:8px;display:flex;gap:6px;justify-content:center}
.tag{font-size:12px;font-weight:800;border-radius:10px;padding:4px 9px;color:#fff;animation:beat 1s infinite}
.tag.new{background:#3fb56a}.tag.mut{background:linear-gradient(90deg,#ff7aa8,#a259ff,#3d8bff)}
/* book */
.bk-sp{background:rgba(255,255,255,.82);border-radius:18px;padding:10px;margin-bottom:10px}
.bk-sp.locked{opacity:.7}
.bk-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:6px}.bk-head b{font-size:17px}.bk-head span{font-size:12px;color:#8a8298;text-align:right}
.bk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:5px}
.bk-cell{background:#fbf8ff;border-radius:12px;padding:3px;text-align:center;display:flex;flex-direction:column;align-items:center}
.bk-cell svg{width:46px;height:46px}.bk-cell small{font-size:10px;color:#6f6680;white-space:nowrap}
.bk-cell.unk{background:#efeaf5;color:#b5abc7;justify-content:center;min-height:62px}.bk-cell.unk span{font-size:22px;font-weight:800}
.bk-pats{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}
.pchip{font-size:11px;border-radius:8px;padding:2px 7px;background:#efeaf5;color:#b5abc7;font-weight:700}.pchip.on{background:#e3dbff;color:#5a3fd6}
.bk-locked svg{width:70px;height:70px;display:block;margin:0 auto}
/* play intro */
.play-intro{flex:1;display:flex;align-items:center;justify-content:center;overflow-y:auto}
.lvl-card{background:rgba(255,255,255,.9);border-radius:26px;padding:20px 18px;text-align:center;width:100%;max-width:400px;box-shadow:0 10px 30px rgba(60,40,90,.12);display:flex;flex-direction:column;align-items:center;gap:10px}
.lvl-num{font-size:34px;font-weight:900;color:#5a3fd6}
.lvl-stars{display:flex;gap:4px;justify-content:center}.lvl-stars svg{width:30px;height:30px}
.lvl-stars.big svg{width:54px;height:54px}.lvl-stars.big span{display:block;animation:popin .4s backwards}
.lvl-stars.big span.got{animation:starpop .5s backwards}
@keyframes starpop{from{transform:scale(0) rotate(-90deg)}70%{transform:scale(1.3)}}
.lvl-goal{font-size:16px}
.lvl-card .legend{width:100%}
.tip{font-size:13px;color:#6f6680;background:#fff8e1;border-radius:12px;padding:8px 10px}
/* HUD */
.hud{background:rgba(255,255,255,.85);border-radius:18px;padding:6px 8px 7px;box-shadow:0 4px 14px rgba(60,40,90,.08);flex:none}
.hud-top{display:flex;align-items:center;justify-content:space-between}
.hud-lv{font-weight:800;font-size:17px;color:#5a3fd6}
.moves{display:flex;flex-direction:column;align-items:center;background:#7b5cff;color:#fff;border-radius:12px;padding:1px 10px;line-height:1.05}
.moves b{font-size:20px}.moves small{font-size:10px}.moves.low{background:#ff6b7f;animation:beat 1s infinite}
.scorebar{position:relative;height:18px;background:#eee8f6;border-radius:10px;margin:6px 0 5px;overflow:hidden}
.scorebar i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#ffcf4a,#ff8a5c,#ff5c9a);border-radius:10px;transition:width .4s}
.scorebar .mark{position:absolute;top:2px;bottom:2px;width:3px;background:rgba(255,255,255,.95);border-radius:2px}
.scoretxt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#3b2f5c}
.collect{display:flex;justify-content:space-between;gap:3px}
.cc{flex:1;display:flex;align-items:center;justify-content:center;gap:3px;font-size:14px;background:#faf7ff;border-radius:10px;padding:2px 0}
.cc .ico{width:20px;height:20px}
#boardwrap{flex:1;display:flex;align-items:center;justify-content:center;position:relative;min-height:0;margin-top:6px}
#board{position:relative;touch-action:none;background:rgba(255,255,255,.55);border-radius:18px;box-shadow:inset 0 0 0 3px rgba(255,255,255,.8),0 8px 24px rgba(60,40,90,.12);overflow:hidden}
#boardfx{position:absolute;pointer-events:none;overflow:visible}
.tile{position:absolute;left:0;top:0;width:var(--ts);height:var(--ts);padding:3px;transition-property:transform;transition-timing-function:cubic-bezier(.3,.1,.4,1.15);will-change:transform}
.tin{width:100%;height:100%;border-radius:28%;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 -3px 0 rgba(0,0,0,.08);position:relative;overflow:hidden;transition:transform .15s}
.tin svg{width:78%;height:78%;filter:drop-shadow(0 1.5px 0 rgba(0,0,0,.12));position:relative;z-index:1}
.k0 .tin{background:#ffe3e3}.k1 .tin{background:#ffe2f1}.k2 .tin{background:#fff1c7}.k3 .tin{background:#ece3ff}.k4 .tin{background:#dcf7e3}
.tile.sel .tin{transform:scale(.9);box-shadow:0 0 0 3px #7b5cff}
.tile.hint .tin{animation:hint 1s infinite}
@keyframes hint{25%{transform:rotate(-10deg) scale(1.06)}75%{transform:rotate(10deg) scale(1.06)}}
.tile.pop .tin{animation:pop .26s forwards}
@keyframes pop{40%{transform:scale(1.25)}100%{transform:scale(0);opacity:0}}
.tile.spawn .tin{animation:spawn .35s}
@keyframes spawn{from{transform:scale(0) rotate(-120deg)}70%{transform:scale(1.2)}}
.sp-h .tin::after,.sp-v .tin::after{content:"";position:absolute;inset:0;opacity:.55}
.sp-h .tin::after{background:repeating-linear-gradient(0deg,transparent 0 5px,#fff 5px 9px)}
.sp-v .tin::after{background:repeating-linear-gradient(90deg,transparent 0 5px,#fff 5px 9px)}
.sp-h .tin,.sp-v .tin{box-shadow:0 0 0 2px #fff,0 0 10px 2px rgba(123,92,255,.6)}
.sp-bomb .tin{box-shadow:0 0 0 3px #ff8a5c,0 0 14px 3px rgba(255,120,60,.7);animation:pulse 1s infinite}
@keyframes pulse{50%{transform:scale(.92)}}
.sp-rainbow .tin{background:conic-gradient(#ff8a8a,#ffd36b,#8bea8b,#7cc8ff,#c59bff,#ff8a8a)!important;animation:spin 3s linear infinite}
.sp-rainbow .tin svg{width:86%;height:86%;filter:drop-shadow(0 0 2px #fff)}
@keyframes spin{50%{transform:scale(1.06)}}
.beam{position:absolute;pointer-events:none;background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,230,120,.6),transparent);animation:beam .45s forwards;border-radius:12px}
.beam.h{left:0;width:100%}.beam.v{top:0;height:100%}
@keyframes beam{from{opacity:1}to{opacity:0;transform:scale(1.1)}}
.flash{position:absolute;inset:0;width:100%;height:100%;background:rgba(255,255,255,.7);animation:beam .45s forwards}
#boardfx{left:50%;top:50%;transform:translate(-50%,-50%)}
.combo{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);font-size:32px;font-weight:900;color:#fff;-webkit-text-stroke:2px #7b5cff;text-shadow:0 3px 0 #5a3fd6;white-space:nowrap;animation:combo 1s forwards;z-index:3}
@keyframes combo{0%{transform:translate(-50%,-50%) scale(.3)}25%{transform:translate(-50%,-50%) scale(1.15)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-90%) scale(1)}}
.scorepop{position:absolute;transform:translate(-50%,-50%);font-weight:900;font-size:18px;color:#fff;text-shadow:0 2px 0 #ff5c9a,0 0 6px #ff5c9a;animation:rise .9s forwards;z-index:2}
@keyframes rise{to{transform:translate(-50%,-160%);opacity:0}}
/* fx */
#fx{position:fixed;inset:0;pointer-events:none;z-index:30}
.fly{position:fixed;width:26px;height:26px;margin:-13px 0 0 -13px;transition:transform .55s cubic-bezier(.5,0,.8,.6),opacity .55s}
.fly svg{width:100%;height:100%}
.floaty{position:fixed;width:28px;height:28px;margin-left:-14px;display:flex;align-items:center;animation:floaty 1.1s forwards}
.floaty svg{width:28px;height:28px;flex:none}.floaty b{font-size:16px;color:#3b2f5c;text-shadow:0 1px 0 #fff;margin-left:2px}
@keyframes floaty{to{transform:translateY(-60px);opacity:0}}
.confetti{position:fixed;width:9px;height:12px;border-radius:2px;transition:transform 1.2s cubic-bezier(.2,.6,.4,1),opacity 1.2s}
#toasts{position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 84px);display:flex;flex-direction:column;align-items:center;gap:6px;z-index:40;pointer-events:none;padding:0 12px}
.toast{background:rgba(59,47,92,.94);color:#fff;border-radius:16px;padding:9px 14px;font-size:14px;max-width:420px;text-align:center;box-shadow:0 6px 18px rgba(0,0,0,.2);animation:popin .25s;transition:opacity .4s,transform .4s}
.toast.out{opacity:0;transform:translateY(10px)}
.rewards{background:#faf6ff;border-radius:16px;padding:6px 10px;margin:10px 0}
.rrow{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:15px}.rrow .ico{width:24px;height:24px;flex:0 0 24px}.rrow>span:not(.ico){flex:1;text-align:left}.rrow b{text-align:right}.rrow small{color:#8a8298;font-weight:500;font-size:11px}
@media (min-width:600px){.pen-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}}
@media (max-height:640px){.lvl-card{padding:12px;gap:6px}.lvl-num{font-size:26px}.btn.big{padding:10px 30px}}