/* 布布岛 —— 纯前端 3D 互动养成
   无构建、无外部请求，直接丢到任意静态托管即可（GitHub Pages / Vercel / Netlify / OSS）。 */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --pink:#ff8fc0;--pink-2:#ffc2dd;--lilac:#b9a4ff;--mint:#7fe3c0;--sky:#8fd3ff;
  --sun:#ffd166;--ink:#4a3557;--ink-2:#7d6b8c;--paper:rgba(255,255,255,.78);
  --line:rgba(124,92,150,.14);--shadow:0 10px 30px rgba(120,70,120,.18);
  --r-l:26px;--r-m:18px;--r-s:12px;
}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;
  color:var(--ink);background:linear-gradient(170deg,#fff3f9 0%,#eaf3ff 46%,#f7ecff 100%);
  user-select:none;-webkit-user-select:none;touch-action:manipulation;
}
#app{position:fixed;inset:0;display:flex;flex-direction:column;padding-bottom:150px}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
b{font-weight:700}

/* ---------- 顶栏 ---------- */
.topbar{
  position:relative;z-index:6;display:flex;align-items:center;justify-content:space-between;
  padding:calc(8px + env(safe-area-inset-top)) 12px 8px;gap:8px;
}
.tb-left{display:flex;align-items:center;gap:10px;min-width:0}
.logo{font-size:17px;font-weight:800;letter-spacing:1px;color:#a05b86;text-shadow:0 1px 0 #fff}
.chips{display:flex;gap:6px}
.chip{
  position:relative;display:flex;align-items:center;gap:4px;padding:5px 10px;border-radius:999px;
  background:var(--paper);box-shadow:0 4px 14px rgba(140,90,140,.12);font-size:13px;backdrop-filter:blur(6px);
}
.chip .k{font-size:11px;color:var(--ink-2)}
.chip .ring{position:absolute;right:6px;bottom:2px;width:calc(100% - 12px);height:3px;border-radius:2px;background:rgba(124,92,150,.16);overflow:hidden}
.chip .ring i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--pink),var(--lilac));transition:width .4s}
.chip.coin .ic{color:#e9a83c}
.tb-right{display:flex;gap:6px}
.ibtn{width:34px;height:34px;border-radius:12px;background:var(--paper);box-shadow:0 4px 14px rgba(140,90,140,.12);font-size:15px}
.ibtn.off{opacity:.45}

/* ---------- 舞台 ---------- */
.stage{position:relative;flex:1;min-height:0;overflow:hidden}
.sheet .tabs{cursor:grab}
.canvas-holder{position:absolute;inset:0}
.canvas-holder canvas{display:block;width:100%;height:100%;touch-action:none}
.skyfx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(28px);opacity:.55}
.b1{width:52vw;height:52vw;left:-14vw;top:6vh;background:radial-gradient(circle at 30% 30%,#ffd7ea,#ffeef8 70%)}
.b2{width:46vw;height:46vw;right:-10vw;top:26vh;background:radial-gradient(circle at 60% 40%,#cfe6ff,#eaf6ff 70%)}
.b3{width:40vw;height:40vw;left:26vw;bottom:-14vh;background:radial-gradient(circle at 50% 50%,#e2d8ff,#f4efff 70%)}
.dust{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.9) 1.5px,transparent 1.6px);background-size:44px 44px;opacity:.35;animation:drift 26s linear infinite}
@keyframes drift{to{background-position:44px 440px}}
.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 78% at 50% 44%,transparent 52%,rgba(150,110,160,.16))}
.hint-swipe{
  position:absolute;left:50%;bottom:118px;transform:translateX(-50%);font-size:11px;color:#a392b0;white-space:nowrap;
  background:rgba(255,255,255,.6);padding:4px 10px;border-radius:999px;transition:opacity .5s;pointer-events:none;z-index:4
}
.hint-swipe.hide{opacity:0}

/* 状态条：横向 HUD，贴舞台顶部，给对话气泡让出中间区域 */
.stats-rail{position:absolute;left:10px;right:10px;top:8px;display:flex;flex-direction:row;gap:5px;z-index:4}
.stat{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 3px 6px;border-radius:14px;background:var(--paper);box-shadow:0 4px 12px rgba(140,90,140,.1);backdrop-filter:blur(6px)}
.stat .em{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:10px;color:#fff}
.stat .bar{width:100%;height:5px;border-radius:4px;background:rgba(124,92,150,.14);overflow:hidden}
.stat .bar i{display:block;height:100%;border-radius:4px;transition:width .5s}
.stat.low{animation:wob .6s ease 3}
@keyframes wob{25%{transform:translateX(-3px) rotate(-1deg)}75%{transform:translateX(3px) rotate(1deg)}}

/* 摸头按钮：放在状态行下方，避免与 HUD 重叠 */
.bubble-btn{position:absolute;left:12px;top:62px;z-index:4;padding:9px 14px;border-radius:999px;
  background:linear-gradient(135deg,#fff,#ffeede);box-shadow:var(--shadow);font-size:13px;font-weight:700;color:#c06a8e;transition:transform .12s}
.bubble-btn:active{transform:scale(.92)}
.bb-inner{pointer-events:none}

/* 每日任务 */
.quest-strip{position:absolute;left:10px;right:10px;bottom:76px;z-index:4;display:flex;gap:6px;overflow-x:auto;
  padding:2px 0 4px;scrollbar-width:none;transition:opacity .4s}
.quest-strip::-webkit-scrollbar{display:none}
.qz{flex:0 0 auto;display:flex;align-items:center;gap:5px;padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.72);font-size:11px;color:var(--ink-2);box-shadow:0 3px 10px rgba(140,90,140,.1)}
.qz.done{color:#3aa77f;text-decoration:line-through;opacity:.8}

/* 快捷互动 */
.actions{position:absolute;left:0;right:0;bottom:calc(8px + env(safe-area-inset-bottom));z-index:5;
  display:flex;gap:8px;padding:0 10px;overflow-x:auto;scrollbar-width:none}
.actions::-webkit-scrollbar{display:none}
.qa{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;width:62px;padding:8px 0 6px;border-radius:18px;
  background:var(--paper);box-shadow:0 6px 16px rgba(140,90,140,.14);font-size:11px;color:var(--ink-2);transition:transform .14s}
.qa:active{transform:translateY(3px) scale(.96)}
.qa .g{font-size:20px;line-height:1.1}
.qa.disabled{opacity:.42}

/* ---------- 底部抽屉 ---------- */
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:7;background:linear-gradient(180deg,rgba(255,255,255,.94),#fff 40%);
  border-radius:26px 26px 0 0;box-shadow:0 -12px 34px rgba(120,70,120,.16);
  transform:translateY(calc(100% - 150px));transition:transform .34s cubic-bezier(.22,1,.36,1);
  padding-bottom:env(safe-area-inset-bottom);max-height:78vh;display:flex;flex-direction:column
}
.sheet.open{transform:translateY(0)}
.grabber{width:44px;height:5px;border-radius:3px;background:rgba(124,92,150,.24);margin:9px auto 0;flex:0 0 auto}
.tabs{display:flex;gap:4px;padding:8px 10px 6px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line);flex:0 0 auto}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto;padding:7px 13px;border-radius:999px;font-size:13px;line-height:1.4;color:var(--ink-2)}
.tab.on{background:linear-gradient(135deg,var(--pink),#ff9ec7);color:#fff;font-weight:700;box-shadow:0 4px 12px rgba(255,143,192,.35)}
.panel-wrap{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 12px 18px;flex:1}
.panel{display:none;animation:fade .3s}
.panel.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}}

h3.sec{font-size:13px;margin:2px 0 8px;color:#a05b86;letter-spacing:.5px}
h3.sec.mt{margin-top:16px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.card{
  position:relative;border-radius:var(--r-m);padding:10px;background:#fff;border:1px solid var(--line);
  box-shadow:0 4px 14px rgba(140,90,140,.07);text-align:left
}
.card .g{font-size:24px}
.card .n{font-size:12px;font-weight:700;margin-top:4px}
.card .d{font-size:10px;color:var(--ink-2);margin-top:2px;min-height:14px;line-height:1.3}
.card .p{font-size:11px;color:#e9a83c;font-weight:700;margin-top:4px}
.card:active{transform:scale(.97)}
.card.locked{opacity:.5}
.card.on2{border-color:var(--pink);background:linear-gradient(180deg,#fff,#fff2f8)}
.card .cnt{position:absolute;right:8px;top:8px;font-size:10px;background:#f4ecff;color:#8c5fb0;border-radius:999px;padding:2px 6px;font-weight:700}
.badge{position:absolute;right:8px;top:8px;font-size:10px;background:#e8fbf2;color:#2f9e73;border-radius:999px;padding:2px 6px}
.big{display:block;width:100%;margin-top:12px;padding:13px;border-radius:16px;font-size:15px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--pink),var(--lilac));box-shadow:0 8px 20px rgba(180,110,190,.32)}
.big:active{transform:scale(.98)}
.big[disabled]{opacity:.5}
.ghost{display:block;width:100%;margin-top:10px;padding:11px;border-radius:14px;font-size:13px;background:#f6f2fa;color:var(--ink-2)}
.ghost.danger{color:#d3566e;background:#fff0f3}
.note{font-size:11px;color:var(--ink-2);line-height:1.6}
.kv{display:flex;justify-content:space-between;font-size:12px;padding:6px 0;border-bottom:1px dashed var(--line)}
.kv span{color:var(--ink-2)}

/* 拍照 */
.snap-box{display:flex;flex-direction:column;gap:10px}
.snap-preview{position:relative;border-radius:20px;overflow:hidden;background:linear-gradient(160deg,#ffe4f0,#dfeaff);aspect-ratio:3/4;max-height:44vh;margin:0 auto;width:100%;max-width:320px;display:grid;place-items:center}
.snap-preview img{width:100%;height:100%;object-fit:contain}
.snap-preview .ph{font-size:13px;color:#a392b0}
.chips-row{display:flex;gap:6px;flex-wrap:wrap}
.fchip{padding:6px 11px;border-radius:999px;background:#f6f2fa;font-size:12px;color:var(--ink-2)}
.fchip.on{background:var(--ink);color:#fff}

/* 图鉴 */
.ach{display:flex;gap:9px;align-items:center;padding:9px;border-radius:14px;background:#fff;border:1px solid var(--line);margin-bottom:6px}
.ach .g{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-size:16px;background:linear-gradient(135deg,#fff0f7,#eee7ff)}
.ach .t{font-size:12px;font-weight:700}
.ach .s{font-size:10px;color:var(--ink-2)}
.ach.no{opacity:.5;filter:grayscale(.6)}
.ach .ck{margin-left:auto;font-size:12px;color:#2f9e73;font-weight:700}

/* ---------- 弹层 ---------- */
.scrim{position:fixed;inset:0;z-index:8;background:rgba(80,50,90,.28);opacity:0;pointer-events:none;transition:opacity .3s;backdrop-filter:blur(2px)}
.scrim.on{opacity:1;pointer-events:auto}
.modal{position:fixed;inset:0;z-index:10;display:none;align-items:center;justify-content:center;padding:18px}
.modal.on{display:flex;animation:pop .28s cubic-bezier(.22,1.2,.36,1)}
@keyframes pop{from{opacity:0;transform:scale(.9)}}
.mcard,.gcard{width:100%;max-width:340px;background:#fff;border-radius:26px;padding:20px;box-shadow:0 24px 60px rgba(90,50,90,.28);text-align:center}
.mcard h1,.mcard h2{margin:6px 0;font-size:20px}
.mcard p{margin:6px 0 14px;font-size:13px;color:var(--ink-2);line-height:1.6}
.mascot{font-size:34px;color:var(--pink);letter-spacing:-2px}
.minput{width:100%;padding:12px;border-radius:14px;border:1px solid var(--line);background:#faf7fc;font-size:15px;text-align:center;color:var(--ink)}
.minput:focus{outline:2px solid var(--pink-2)}
.tip{margin-top:10px;font-size:10px;color:#b0a3bb}
.fine{font-size:10px;color:#b0a3bb;text-align:left;margin:4px 0 10px}
.row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;font-size:13px;border-bottom:1px dashed var(--line)}
.row input{width:20px;height:20px;accent-color:var(--pink)}
.mcard.lvl .burst{width:64px;height:64px;margin:0 auto;border-radius:50%;display:grid;place-items:center;font-size:30px;color:#fff;
  background:linear-gradient(135deg,var(--sun),var(--pink));box-shadow:0 0 0 10px rgba(255,209,102,.22);animation:pulse 1.2s infinite}
@keyframes pulse{50%{transform:scale(1.08)}}

/* 游戏 */
.modal.game .gcard{max-width:400px}
.ghead{display:flex;align-items:center;gap:8px;font-size:14px;margin-bottom:8px}
.ghead span{margin-left:auto;font-size:12px;color:var(--ink-2)}
.ghead .x{width:28px;height:28px;border-radius:9px;background:#f6f2fa}
#rhCanvas{width:100%;height:280px;border-radius:16px;background:linear-gradient(180deg,#fff6fb,#f1eaff);display:block;touch-action:manipulation}
.mm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.mm{aspect-ratio:3/4;border-radius:12px;background:linear-gradient(135deg,var(--lilac),var(--pink));display:grid;place-items:center;font-size:22px;color:#fff;transition:transform .25s,background .25s;transform-style:preserve-3d}
.mm.up{background:#fff;border:1px solid var(--line);color:var(--ink);transform:rotateY(0)}
.mm.done{background:#e9fbf2;border:1px solid #c7f0dc;color:#2f9e73}

/* toast */
.toast-wrap{position:fixed;left:0;right:0;top:calc(112px + env(safe-area-inset-top));z-index:12;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.toast{padding:8px 14px;border-radius:999px;background:rgba(74,53,87,.86);color:#fff;font-size:12px;box-shadow:0 8px 20px rgba(0,0,0,.2);animation:tin .3s, tout .3s 1.7s forwards}
.toast.good{background:rgba(47,158,115,.9)}
.toast.warn{background:rgba(224,131,60,.92)}
@keyframes tin{from{opacity:0;transform:translateY(-8px)}}
@keyframes tout{to{opacity:0;transform:translateY(-8px)}}

@media (min-width:760px){
  .stats-rail{left:50%;right:auto;transform:translateX(-50%);top:22px;width:520px}
  .bubble-btn{left:22px}
  .stage{padding-bottom:0}
  .sheet{width:520px;left:50%;right:auto;transform:translate(-50%,calc(100% - 150px));border-radius:26px 26px 0 0}
  .sheet.open{transform:translate(-50%,0)}
  .panel-wrap{padding:16px 20px 22px}
  .actions{padding-left:calc(50vw - 250px)}
}
@media (max-height:640px){
  .quest-strip{display:none}
  .stat{padding:3px 3px 4px}
  .stat .em{width:15px;height:15px;font-size:9px}
}

/* ---------- 夜晚主题 ---------- */
body{transition:background .8s ease}
body.night{
  --ink:#ece6ff;--ink-2:#b3a8d6;--paper:rgba(58,46,92,.62);--line:rgba(190,170,255,.18);
  --shadow:0 10px 30px rgba(10,6,30,.5);
  background:linear-gradient(170deg,#241d43 0%,#1b1a36 46%,#2a2050 100%);
}
body.night .logo{color:#e6dcff;text-shadow:0 1px 0 rgba(120,90,200,.5)}
body.night .b1{background:radial-gradient(circle at 30% 30%,#4a3a7e,#2b2352 70%)}
body.night .b2{background:radial-gradient(circle at 60% 40%,#2f3f6d,#232a4d 70%)}
body.night .b3{background:radial-gradient(circle at 50% 50%,#443468,#2a2350 70%)}
body.night .dust{background-image:radial-gradient(rgba(255,255,255,.75) 1.2px,transparent 1.3px);opacity:.5}
body.night .vignette{background:radial-gradient(120% 78% at 50% 44%,transparent 42%,rgba(8,4,24,.46))}
body.night .sheet{background:linear-gradient(180deg,rgba(40,32,70,.96),#251d45 40%)}
body.night .card,body.night .ach{background:#312a55;border-color:rgba(190,170,255,.2)}
body.night .card .n,body.night .ach .t{color:var(--ink)}
body.night .ghost{background:#2b2450;color:var(--ink-2)}
body.night .ghost.danger{background:#4a2340;color:#ff9fb5}
body.night .fchip{background:#2f2854;color:var(--ink-2)}
body.night .fchip.on{background:var(--ink);color:#241d43}
body.night .qz{background:rgba(58,46,92,.72);color:var(--ink-2)}
body.night .bubble-btn{background:linear-gradient(135deg,#4a3f7d,#3a2f63);color:#ffd9ea}
body.night .grabber{background:rgba(200,180,255,.28)}
body.night .stat .bar{background:rgba(200,180,255,.2)}
body.night .chip .ring{background:rgba(200,180,255,.22)}
body.night .mm-grid .mm.up{background:#312a55;color:var(--ink)}
body.night #rhCanvas{background:linear-gradient(180deg,#332a5c,#251f47)}
body.night .hint-swipe{color:#b3a8d6;background:rgba(58,46,92,.6)}
body.night .mascot{color:#ff9ec7}
body.night .mcard,body.night .gcard{background:#2e2752;color:var(--ink);box-shadow:0 24px 60px rgba(0,0,0,.55)}
body.night .minput{background:#241d43;color:var(--ink);border-color:rgba(190,170,255,.22)}
body.night .row{border-bottom-color:rgba(190,170,255,.18)}
body.night .kv{border-bottom-color:rgba(190,170,255,.18)}
body.night .kv span,body.night .note,body.night .tip,body.night .fine,body.night .ghead span{color:var(--ink-2)}
body.night h3.sec{color:#f0b8d8}
body.night .ghead .x{background:#3a3163;color:var(--ink)}
body.night .snap-preview{background:linear-gradient(160deg,#3a2f63,#2a2450)}
body.night .card.on2{border-color:var(--pink);background:linear-gradient(180deg,#3a2f63,#46284a)}
body.night .card .cnt{background:#443a72;color:#d9c9ff}
body.night .badge{background:#245040;color:#7fe3c0}
body.night .ach .g{background:linear-gradient(135deg,#3d3470,#4a3a7e)}
body.night .ach.no{opacity:.42}
body.night .toast{background:rgba(20,14,40,.9)}

/* ---------- 无 WebGL 兜底 ---------- */
body.no3d .canvas-holder::after{
  content:'这台设备暂时不支持 3D（WebGL）\A 已切换到简化模式：下方按钮依然可以照顾它';
  position:absolute;inset:0;display:grid;place-content:center;text-align:center;white-space:pre;
  font-size:13px;color:#a392b0;line-height:1.9;padding:24px
}
body.no3d .bubble-btn{display:none}
body.no3d .stats-rail{top:8px}