:root{--plum:#4a2a3a;--cream:#fde9d9;--blue:#6d8fb2;--yellow:#f7e26b;--pink:#f59ab5;--red:#e2574c}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--blue);font-family:"ZCOOL KuaiLe","PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;color:var(--plum);user-select:none;-webkit-user-select:none;touch-action:none}
#app canvas{display:block}
.hidden{display:none!important}
.btn{font-family:inherit;font-size:18px;color:var(--plum);background:var(--yellow);border:4px solid var(--plum);border-radius:16px;padding:8px 18px;cursor:pointer;box-shadow:0 5px 0 var(--plum);transition:transform .08s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--plum)}
.btn.big{font-size:24px;padding:12px 30px}.btn.sm{font-size:15px;padding:5px 10px;border-width:3px;box-shadow:0 3px 0 var(--plum)}
.btn.ghost{background:var(--cream)}
#loading{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--blue);z-index:50;color:var(--cream)}
.ld-cat{width:90px;animation:bob .5s infinite alternate}.ld-bar{width:240px;height:18px;border:4px solid var(--plum);border-radius:10px;background:var(--cream);margin:14px;overflow:hidden}.ld-bar i{display:block;height:100%;width:0;background:var(--yellow);transition:width .2s}
@keyframes bob{to{transform:translateY(-8px) scaleY(1.05)}}
@keyframes pop{from{transform:scale(.6);opacity:0}}
#title{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:20;background:radial-gradient(circle,rgba(253,233,217,.1),rgba(74,42,58,.35))}
.title-card{background:var(--cream);border:6px solid var(--plum);border-radius:34px;padding:18px 30px 22px;max-width:640px;width:92%;text-align:center;box-shadow:0 10px 0 var(--plum);position:relative;animation:pop .5s cubic-bezier(.3,1.6,.5,1);overflow:hidden}
.banner{width:100%;height:auto;max-height:44px;object-fit:contain;animation:slide 12s linear infinite alternate}
@keyframes slide{from{transform:translateX(-4%)}to{transform:translateX(4%)}}
.logo{font-size:80px;margin:0;line-height:1;color:var(--yellow);-webkit-text-stroke:5px var(--plum);paint-order:stroke fill;text-shadow:0 7px 0 var(--plum)}
.logo span{color:#8fd3e8}.logo em{font-style:normal;color:var(--pink);font-size:.7em;margin-left:6px;display:inline-block;transform:rotate(12deg)}
.logo-sub{font-size:20px;letter-spacing:6px;color:var(--red);margin-top:6px}
.logo-cn{font-size:24px;margin:6px 0}
.intro{font-size:16px;line-height:1.7;margin:6px 0}.intro.small{font-size:15px;opacity:.9}.intro b{color:var(--red)}
.tbtns{display:flex;gap:10px;justify-content:center;align-items:center;margin-top:8px}
.keys{font-size:12px;margin-top:12px;opacity:.75}
#startBtn{animation:bob .7s infinite alternate}
.pill{background:var(--cream);border:4px solid var(--plum);border-radius:999px;padding:4px 14px;font-size:18px;box-shadow:0 4px 0 var(--plum);width:max-content}
.pill.small{font-size:14px;padding:3px 12px}
.tl{position:fixed;top:12px;left:12px;z-index:10;display:flex;flex-direction:column;gap:8px}
.digits{display:flex;gap:2px;align-items:center}.digits img{height:22px;width:auto}.digits img.off{filter:brightness(0) opacity(.18)}
.tr{position:fixed;right:12px;top:12px;z-index:10;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:60vw}
#quest{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:9;font-size:15px;max-width:44vw;white-space:normal;text-align:center;width:auto}
#minimap{position:fixed;right:12px;top:62px;width:150px;height:150px;border:4px solid var(--plum);border-radius:50%;background:#6a8db2;z-index:10;box-shadow:0 4px 0 var(--plum)}
#followers{position:fixed;left:12px;bottom:14px;z-index:10;display:flex;gap:4px}
#followers img{height:42px;background:var(--cream);border:3px solid var(--plum);border-radius:12px;padding:2px}
#bubble{position:fixed;z-index:12;transform:translate(-50%,-100%);background:#fff;border:4px solid var(--plum);border-radius:18px;padding:8px 12px 10px;min-width:160px;max-width:280px;text-align:center;box-shadow:0 5px 0 var(--plum)}
#bubble::after{content:"";position:absolute;left:50%;bottom:-17px;margin-left:-12px;border:12px solid transparent;border-top:14px solid var(--plum)}
.b-name{font-size:18px;color:var(--red)}.b-text{font-size:14px;line-height:1.45;margin:3px 0 7px}
#bubble .btn.act{font-size:15px;padding:4px 12px;border-width:3px;box-shadow:0 3px 0 var(--plum)}
#floats{position:fixed;inset:0;pointer-events:none;z-index:11}
.ft{position:absolute;transform:translate(-50%,-100%);font-size:19px;background:#fff;border:3px solid var(--plum);border-radius:14px;padding:1px 9px;white-space:nowrap}
.ft.note{background:none;border:none;font-size:28px;color:#fff;-webkit-text-stroke:2px var(--plum);paint-order:stroke fill}
.ft.big{font-size:22px;background:var(--yellow)}.ft.heart{background:var(--pink)}
#photo{position:fixed;inset:0;z-index:13;pointer-events:none}
.vf{position:absolute;inset:9% 8%;}
.vf i{position:absolute;width:60px;height:60px;border:6px solid #fff;filter:drop-shadow(0 0 2px var(--plum))}
.vf .c1{left:0;top:0;border-right:none;border-bottom:none;border-radius:18px 0 0 0}.vf .c2{right:0;top:0;border-left:none;border-bottom:none;border-radius:0 18px 0 0}
.vf .c3{left:0;bottom:0;border-right:none;border-top:none;border-radius:0 0 0 18px}.vf .c4{right:0;bottom:0;border-left:none;border-top:none;border-radius:0 0 18px 0}
.vf-mid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#fff;font-size:40px;-webkit-text-stroke:2px var(--plum)}
.ph-top{position:absolute;top:14px;left:50%;transform:translateX(-50%);background:var(--cream);border:4px solid var(--plum);border-radius:999px;padding:4px 16px;font-size:14px;white-space:nowrap}
#shutter{pointer-events:auto;position:absolute;left:50%;bottom:26px;transform:translateX(-50%);width:84px;height:84px;border-radius:50%;border:6px solid var(--plum);background:#fff;box-shadow:0 0 0 6px #fff inset,0 0 0 12px var(--red) inset,0 5px 0 var(--plum);cursor:pointer}
#phExit{pointer-events:auto;position:absolute;right:16px;bottom:40px}
#flash{position:absolute;inset:0;background:#fff;opacity:0;transition:opacity .4s}
#mini{position:fixed;left:50%;bottom:16%;transform:translateX(-50%);z-index:14;background:var(--cream);border:5px solid var(--plum);border-radius:22px;padding:14px 22px;text-align:center;min-width:300px;box-shadow:0 6px 0 var(--plum)}
.m-title{font-size:22px;color:var(--red)}.m-text{font-size:17px;margin:6px 0}.m-hint{font-size:13px;opacity:.7;margin-top:6px}
.m-bar{position:relative;height:22px;border:4px solid var(--plum);border-radius:12px;background:#fff;overflow:hidden}
.m-bar i{position:absolute;top:0;bottom:0}.m-bar .zone{background:#9be07a}.m-bar .fill{left:0;width:6px;background:var(--plum);border-radius:4px}
.modal{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;background:rgba(74,42,58,.45)}
#dialog{background:transparent;align-items:flex-end;padding-bottom:4vh;pointer-events:none}
.dlg{pointer-events:auto;display:flex;gap:14px;align-items:center;background:var(--cream);border:5px solid var(--plum);border-radius:24px;padding:14px 18px;width:min(640px,94vw);box-shadow:0 7px 0 var(--plum);animation:pop .3s cubic-bezier(.3,1.6,.5,1)}
.d-face{width:96px;height:96px;object-fit:contain;flex:none;animation:bob .6s infinite alternate}
.d-body{flex:1}.d-name{font-size:19px;color:var(--red)}.d-text{font-size:17px;line-height:1.6;margin:4px 0 10px;min-height:2.4em}
.d-btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.panel{background:var(--cream);border:6px solid var(--plum);border-radius:28px;width:min(980px,96vw);height:min(86vh,800px);display:flex;flex-direction:column;box-shadow:0 10px 0 var(--plum);animation:pop .35s cubic-bezier(.3,1.6,.5,1);overflow:hidden}
.p-head{display:flex;align-items:center;gap:12px;padding:12px 16px 6px}.p-title{font-size:26px}.p-head .close{margin-left:auto}.p-sub,#dexProg{font-size:14px;opacity:.85}
.tabs{display:flex;gap:6px;padding:4px 14px 8px;flex-wrap:wrap}
.tab{font-family:inherit;font-size:14px;border:3px solid var(--plum);border-radius:999px;background:#fff;padding:3px 10px;cursor:pointer;color:var(--plum)}.tab.on{background:var(--yellow)}
#dexGrid,#albumGrid{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px;padding:6px 14px 16px;align-content:start;touch-action:pan-y}
#albumGrid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.dc{background:#fff;border:3px solid var(--plum);border-radius:14px;padding:4px;text-align:center;cursor:pointer;font-size:11px;position:relative}
.dc img{width:100%;height:62px;object-fit:contain}.dc.lock{background:#dfe4ea}.dc.lock img{filter:brightness(0) opacity(.2)}
.dc .no{opacity:.7}.dc .r{position:absolute;top:2px;right:4px;color:#e0a800;font-size:10px}.dc.lock .r{display:none}
.dc .nm{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph{border:4px solid var(--plum);border-radius:12px;overflow:hidden;background:#fff}.ph img{width:100%;display:block}.ph div{font-size:12px;padding:4px 8px}
.card-in{background:var(--cream);border:6px solid var(--plum);border-radius:28px;padding:20px 26px;width:min(420px,92vw);text-align:center;box-shadow:0 10px 0 var(--plum);animation:pop .4s cubic-bezier(.3,1.6,.5,1);max-height:92vh;overflow:auto}
.c-no{font-size:15px;letter-spacing:3px;color:var(--red)}.c-title{font-size:28px;margin:4px 0 6px}.c-meta{font-size:14px;opacity:.85}
.c-img{max-width:70%;max-height:200px;margin:8px 0;filter:drop-shadow(0 6px 0 rgba(74,42,58,.2))}
.c-text{font-size:16px;line-height:1.7;text-align:left}
#touch .tbtn{position:fixed;z-index:15;width:82px;height:82px;border-radius:50%;border:5px solid var(--plum);background:var(--yellow);font-family:inherit;font-size:20px;color:var(--plum);box-shadow:0 5px 0 var(--plum)}
#tAct{right:20px;bottom:30px}.tbtn.sm2{width:62px!important;height:62px!important;right:112px;bottom:22px;background:#8fd3e8!important}
.tbtn.sm3{width:56px!important;height:56px!important;right:40px;bottom:126px;font-size:16px!important;background:var(--pink)!important}
.tbtn.sm4{width:56px!important;height:56px!important;right:112px;bottom:100px;font-size:16px!important;background:var(--cream)!important}
.tbtn.on{background:#9be07a!important}
#joy{position:fixed;left:24px;bottom:28px;width:136px;height:136px;border-radius:50%;border:5px solid var(--plum);background:rgba(253,233,217,.55);z-index:15}
#knob{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px;border-radius:50%;background:var(--cream);border:5px solid var(--plum)}
#toast{position:fixed;left:50%;top:24%;transform:translate(-50%,-50%) scale(0);z-index:40;background:var(--yellow);border:5px solid var(--plum);border-radius:20px;padding:8px 22px;font-size:22px;box-shadow:0 6px 0 var(--plum);transition:transform .25s cubic-bezier(.3,1.6,.5,1);pointer-events:none;text-align:center;max-width:90vw}
#toast.show{transform:translate(-50%,-50%) scale(1)}
@media (max-width:760px){.logo{font-size:56px}.intro{font-size:14px}.title-card{padding:14px 16px}.keys{display:none}
 #quest{top:auto;bottom:178px;max-width:90vw;font-size:13px}#minimap{width:104px;height:104px;top:auto;bottom:auto;top:96px}
 .tr .btn.sm{font-size:13px;padding:4px 7px}.pill{font-size:15px}#followers{bottom:180px}#followers img{height:32px}
 .dlg{flex-direction:column;text-align:center}.d-face{width:70px;height:70px}.d-btns{justify-content:center}.ph-top{font-size:11px;white-space:normal;width:90%}}

a.ph{color:inherit;text-decoration:none}
@media (max-width:760px){#minimap{top:160px;left:auto;right:12px}.p-title{font-size:20px}.digits img{height:16px}}
.langs{display:flex;gap:6px;justify-content:center;margin-top:12px;flex-wrap:wrap}.langs .tab.on{background:var(--yellow)}
#langMenu{position:fixed;right:12px;top:56px;z-index:31;display:flex;flex-direction:column;gap:6px;background:var(--cream);border:4px solid var(--plum);border-radius:16px;padding:8px;box-shadow:0 4px 0 var(--plum)}
#followers img{cursor:pointer}

.dpanel{height:auto;max-height:94vh;overflow:auto}
.dbody{display:flex;gap:16px;padding:6px 16px 16px;flex-wrap:wrap;justify-content:center}
#dcv{width:min(340px,80vw);height:min(340px,80vw);background:#fff;border:4px solid var(--plum);border-radius:16px;touch-action:none;cursor:crosshair;
 background-image:linear-gradient(45deg,#f3eee8 25%,transparent 25%,transparent 75%,#f3eee8 75%),linear-gradient(45deg,#f3eee8 25%,transparent 25%,transparent 75%,#f3eee8 75%);background-size:24px 24px;background-position:0 0,12px 12px}
.drow{display:flex;gap:5px;align-items:center;flex-wrap:wrap;margin:8px 0;font-size:14px}
.sw{width:28px;height:28px;border-radius:50%;border:3px solid var(--plum);cursor:pointer}.sw.on{outline:3px solid var(--yellow);outline-offset:1px}
.dright{min-width:240px;max-width:340px;flex:1}
.dlist-t{margin-top:12px;font-size:15px}
#dList{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.acc{position:relative;width:64px;height:64px;background:#fff;border:3px solid var(--plum);border-radius:12px;cursor:pointer}.acc.on{background:var(--yellow)}
.acc img{width:100%;height:100%;object-fit:contain}.acc small{position:absolute;left:2px;bottom:0;font-size:10px}
.acc b{position:absolute;right:-8px;top:-8px;width:22px;height:22px;border-radius:50%;background:var(--red);color:#fff;font-size:13px;line-height:20px;text-align:center;border:2px solid var(--plum)}
#dAdj label{display:flex;align-items:center;gap:8px;font-size:14px;margin:4px 0}#dAdj input{flex:1}

.digits{cursor:pointer;flex-direction:column;align-items:flex-start;gap:3px}
.dbar{display:block;width:150px;height:10px;border:2px solid var(--plum);border-radius:6px;background:#fff;overflow:hidden}.dbar b{display:block;height:100%;width:0;background:linear-gradient(90deg,#e8503f,#f7e26b,#7fcf5f,#6fd3df,#a58ad8);transition:width .4s}
.dgpanel{height:auto;max-height:90vh}
#dgGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;padding:6px 14px 16px;overflow:auto}
.dgc{display:flex;gap:8px;align-items:center;background:#fff;border:3px solid var(--plum);border-radius:14px;padding:6px;font-size:13px;line-height:1.35}
.dgc img{width:44px;height:44px;object-fit:contain;flex:none}.dgc.off{background:#dfe4ea}.dgc.off img{filter:brightness(0) opacity(.25)}.dgc b{color:var(--red)}
#compBar{position:fixed;left:12px;bottom:14px;z-index:10;background:rgba(253,233,217,.92);border:3px solid var(--plum);border-radius:14px;padding:5px 7px;box-shadow:0 3px 0 var(--plum)}
.cb-head{display:flex;align-items:center;gap:8px;font-size:14px;margin-bottom:4px}.cb-head .btn.sm{font-size:12px;padding:2px 7px}
#followers{position:static;display:flex;gap:6px;flex-wrap:wrap;max-width:min(440px,70vw)}
.fw{position:relative}.fw img{height:40px;background:#fff;border:3px solid var(--plum);border-radius:10px;padding:2px;display:block}
.fw i{position:absolute;right:-7px;top:-7px;width:20px;height:20px;border-radius:50%;background:var(--red);color:#fff;font-style:normal;font-size:12px;line-height:17px;text-align:center;border:2px solid var(--plum);cursor:pointer}
#compTip{position:absolute;left:0;bottom:calc(100% + 10px);background:var(--yellow);border:3px solid var(--plum);border-radius:12px;padding:5px 10px;font-size:13px;white-space:nowrap;animation:bob .6s infinite alternate}
@media (max-width:760px){#compBar{bottom:182px}.fw img{height:30px}.dbar{width:110px}
 #draw.modal{align-items:flex-start}
 .dpanel{height:auto;max-height:calc(100dvh - 16px);margin-top:8px;overflow:hidden}
 .dpanel .p-head{flex:none;padding:8px 12px 4px}.dpanel .p-sub{display:none}
 .dbody{overflow:auto;flex:1;padding:4px 10px 12px;gap:6px}
 #dcv{width:min(230px,62vw,34dvh);height:min(230px,62vw,34dvh)}
 .drow{margin:4px 0}.sw{width:24px;height:24px}.acc{width:50px;height:50px}.dright{min-width:0}}

#minimap{border:none!important;box-shadow:none!important;background:transparent!important;cursor:pointer;filter:drop-shadow(0 4px 0 #4a2a3a)}
#bigmap{background:rgba(74,42,58,.6)}
.bm-wrap{position:fixed;inset:10px;border:6px solid var(--plum);border-radius:26px;overflow:hidden;background:#6a8db2;box-shadow:0 8px 0 var(--plum)}
#bmc{width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.bm-head{position:absolute;left:12px;right:12px;top:10px;display:flex;align-items:center;gap:10px;pointer-events:none}.bm-head .p-title{background:var(--cream);border:4px solid var(--plum);border-radius:999px;padding:2px 14px;font-size:20px}
.bm-head .close{margin-left:auto;pointer-events:auto}
.bm-legend{position:absolute;left:12px;bottom:12px;background:var(--cream);border:4px solid var(--plum);border-radius:16px;padding:6px 10px;font-size:13px;line-height:1.6;max-width:60vw}
.bm-legend span{display:inline-block;margin-right:10px;white-space:nowrap}
.bm-hint{position:absolute;right:12px;bottom:12px;background:var(--cream);border:3px solid var(--plum);border-radius:999px;padding:2px 10px;font-size:12px}
@media (max-width:760px){.bm-hint{display:none}.bm-legend{max-width:none;right:12px;font-size:11px}}
@media (max-width:760px){#compBar{bottom:232px}}

.dwrap{position:relative;height:min(384px,46dvh);aspect-ratio:339/384;border:4px solid var(--plum);border-radius:16px;overflow:hidden;
 background-color:#fff;background-image:linear-gradient(45deg,#f3eee8 25%,transparent 25%,transparent 75%,#f3eee8 75%),linear-gradient(45deg,#f3eee8 25%,transparent 25%,transparent 75%,#f3eee8 75%);background-size:24px 24px;background-position:0 0,12px 12px}
.dunder{position:absolute;inset:0;width:100%;height:100%;opacity:.4;pointer-events:none}
.dwrap #dcv{position:absolute;inset:0;width:100%!important;height:100%!important;border:none;border-radius:0;background:none}
.acc{width:58px;height:66px}
@media (max-width:760px){.dwrap{height:min(300px,40dvh)}}
@media (max-width:760px){.dbody{flex-direction:column;align-items:center;flex-wrap:nowrap}.dright{width:100%;max-width:none}.dwrap{height:min(260px,34dvh)}}