* { margin:0; padding:0; box-sizing:border-box; }
html,body{height:100%;}
body { font-family:"Microsoft YaHei","PingFang SC",sans-serif; background:#e8f5e9; color:#263238; display:flex; flex-direction:column; overflow:hidden; user-select:none; }

/* ===== 顶栏 ===== */
#topbar { height:56px; display:flex; align-items:center; gap:14px; padding:0 16px; background:#fff; border-bottom:3px solid #c8e6c9; flex-shrink:0; }
.brand { font-size:19px; font-weight:800; color:#2e7d32; }
.brand .logo { display:inline-block; width:26px; height:24px; background:radial-gradient(circle at 35% 30%,#a5d6a7,#66bb6a 60%,#43a047); border-radius:50% 50% 45% 45%; margin-right:6px; vertical-align:-4px; }
#hud { margin-left:auto; display:flex; gap:18px; align-items:center; font-weight:700; }
#coinHud { color:#c67c00; }
#levelHud { color:#2e7d32; }

.btn { cursor:pointer; border:none; border-radius:10px; padding:9px 18px; font-size:15px; font-weight:700; background:linear-gradient(#66bb6a,#43a047); color:#fff; box-shadow:0 3px 0 #2e7d32; transition:transform .08s; font-family:inherit; }
.btn:active { transform:translateY(2px); box-shadow:0 1px 0 #2e7d32; }
.btn.warn { background:linear-gradient(#ffb74d,#fb8c00); box-shadow:0 3px 0 #e65100; }
.btn.ghosty { background:#fff; color:#2e7d32; border:2px solid #81c784; box-shadow:none; }
.btn.ghosty:active { box-shadow:none; }

/* ===== 三栏布局 ===== */
#layout { flex:1; display:flex; min-height:0; }
.pane-title { padding:10px; font-weight:800; color:#2e7d32; text-align:center; border-bottom:2px dashed #e0f2e0; flex-shrink:0; }

#levelPane { width:175px; background:#fff; border-right:3px solid #c8e6c9; display:flex; flex-direction:column; flex-shrink:0; }
#levelCard { display:flex; flex-direction:column; align-items:center; padding:14px 8px; gap:8px; }
#levelBig { font-size:30px; font-weight:900; color:#2e7d32; }
.type-badge { display:inline-block; padding:4px 14px; border-radius:11px; font-size:13px; font-weight:800; color:#fff; }
.type-badge.view  { background:linear-gradient(#81c784,#43a047); }
.type-badge.boss  { background:linear-gradient(#ef5350,#c62828); }
.type-badge.arith { background:linear-gradient(#7986cb,#3f51b5); }
#levelDesc { font-size:12px; color:#78909c; line-height:1.8; text-align:center; }
#levelNext { margin-top:6px; font-size:12px; font-weight:800; color:#f9a825; text-align:center; }
/* ===== 高塔楼层（选关） ===== */
.tower-floor { position:relative; height:28px; border-radius:9px; display:flex; align-items:center; justify-content:center; gap:5px; font-size:12.5px; font-weight:800; }
.floor-done { background:linear-gradient(#c8e6c9,#a5d6a7); color:#1b5e20; box-shadow:inset 0 0 8px rgba(255,255,255,.5); }
.floor-current { background:linear-gradient(#66bb6a,#2e7d32); color:#fff; box-shadow:0 0 0 3px #fff59d; }
.floor-locked { background:#eceff1; color:#b0bec5; }
.tower-floor .boss-ico { font-size:13px; }
.tower-floor .f-tag { position:absolute; right:9px; font-size:10px; font-weight:800; padding:1px 7px; border-radius:8px; background:rgba(255,255,255,.4); }
.floor-locked .f-tag { background:transparent; color:#b0bec5; }
/* BOSS 楼层：呼吸红光（未解锁灰底也带红晕） */
.floor-boss { animation:bossBreathe 1.6s ease-in-out infinite; }
@keyframes bossBreathe { 0%,100% { box-shadow:0 0 3px rgba(229,57,53,.35); } 50% { box-shadow:0 0 16px rgba(229,57,53,.95); } }
.floor-boss:not(.floor-locked) { background:linear-gradient(#ef5350,#c62828); color:#fff; }
.floor-boss.floor-done:not(.floor-locked) { background:linear-gradient(#ff8a80,#e53935); }
.floor-boss .f-tag { background:rgba(255,255,255,.28); }
.floor-boss.floor-locked .f-tag { color:#ef9a9a; }
/* 选中楼层：金色点亮（不占用 animation，保留 BOSS 呼吸） */
.tower-floor.selected { transform:scale(1.09); z-index:2; box-shadow:0 0 0 3px #ffc107, 0 0 22px rgba(255,193,7,.95); transition:transform .12s; }
.tower-floor.clickable { cursor:pointer; transition:transform .1s; }
.tower-floor.clickable:hover { transform:scale(1.06); box-shadow:0 0 0 2px #66bb6a; }
.tower-floor.clickable.selected:hover { box-shadow:0 0 0 3px #ffc107, 0 0 22px rgba(255,193,7,.95); }
/* 未解锁点击的抖动反馈 */
.shake { animation:shakeX .35s; }
@keyframes shakeX { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-6px);} 50%{transform:translateX(6px);} 75%{transform:translateX(-4px);} }

#gamePane { flex:1; display:flex; flex-direction:column; min-width:0; position:relative; }
#stage { flex:1; position:relative; overflow:hidden; background:linear-gradient(#dcefdc 0%,#f1f8f1 60%,#fffde7 100%); cursor:grab; }
#stage.dragging { cursor:grabbing; }

/* ===== 3D 场景（--cs=方块边长 --gs=虚影边长，由 JS 按网格阶数设定） ===== */
.scene { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; perspective:1000px; }
.world { position:relative; width:0; height:0; transform-style:preserve-3d; will-change:transform; --cs:56px; --gs:17px; }
.floor-plane { position:absolute; background:rgba(129,199,132,.14); border:2px dashed #a5d6a7; border-radius:10px; transform:rotateX(90deg) translateZ(calc(var(--cs) / -2 - 2px)); }

.cube { position:absolute; width:var(--cs); height:var(--cs); left:calc(var(--cs) / -2); top:calc(var(--cs) / -2); transform-style:preserve-3d; }
.cube .inner { position:absolute; inset:0; transform-style:preserve-3d; }
.cube .face { position:absolute; inset:0; background:var(--cubeBg, linear-gradient(135deg,rgba(129,199,132,.95),rgba(67,160,71,.95))); border:calc(var(--cs) * 0.045) solid var(--cubeBorder, #2e7d32); border-radius:calc(var(--cs) * 0.21); box-shadow:inset 0 0 10px rgba(255,255,255,.45); }
.f0{transform:translateZ(calc(var(--cs) / 2));}
.f1{transform:rotateY(180deg) translateZ(calc(var(--cs) / 2));}
.f2{transform:rotateY(90deg) translateZ(calc(var(--cs) / 2));}
.f3{transform:rotateY(-90deg) translateZ(calc(var(--cs) / 2));}
.f4{transform:rotateX(90deg) translateZ(calc(var(--cs) / 2));}
.f5{transform:rotateX(-90deg) translateZ(calc(var(--cs) / 2));}
.cube.pop .inner { animation:pop .3s cubic-bezier(.34,1.56,.64,1); }
@keyframes pop { 0%{transform:scale(.1);} 100%{transform:scale(1);} }
.cube.excess { cursor:pointer; }
.cube.excess .face { background:linear-gradient(135deg,rgba(239,108,107,.95),rgba(211,47,47,.95)); border-color:#8e0000; animation:excessPulse 1s infinite alternate; }
@keyframes excessPulse { to { box-shadow:0 0 18px #ff5252; } }
.cube.wobble .inner { animation:wob .4s; }
@keyframes wob { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-6px);} 75%{transform:translateX(6px);} }
/* 拖拽删除：抓起高亮 + 飞出场外 */
.cube { cursor:grab; }
.cube.grabbed { cursor:grabbing; }
.cube.grabbed .face { border-color:#ffca28; box-shadow:0 0 16px rgba(255,193,40,.85), inset 0 0 10px rgba(255,255,255,.65); }
.cube.flyOut { pointer-events:none; }
.cube.flyOut .inner { animation:flyOut .3s ease-in forwards; }
@keyframes flyOut { to { transform:translate(var(--fx,140px),var(--fy,140px)) scale(.05) rotate(30deg); opacity:0; } }
/* 键盘光标落在方块上：金边发光 */
.cube.cur .face { border-color:#ffca28; box-shadow:0 0 16px rgba(255,193,40,.9), inset 0 0 10px rgba(255,255,255,.5); }
/* 方块史莱姆的萌脸：两个眼睛 + 微笑（颜色随皮肤，位置按百分比自适应方块大小） */
.cube .f0::before, .cube .f0::after { content:""; position:absolute; top:29%; width:12.5%; height:15%; background:var(--cubeEye, #1b5e20); border-radius:50%; }
.cube .f0::before { left:24%; }
.cube .f0::after { right:24%; }
.cube .f0 { box-shadow:inset 0 0 10px rgba(255,255,255,.45); }
.cube .f0 .smile { position:absolute; left:50%; bottom:20%; transform:translateX(-50%); width:21%; height:11%; border-bottom:calc(var(--cs) * 0.045) solid var(--cubeEye, #1b5e20); border-radius:0 0 8px 8px; }

.ghost { position:absolute; width:var(--gs); height:var(--gs); left:calc(var(--gs) / -2); top:calc(var(--gs) / -2); transform-style:preserve-3d; cursor:pointer; }
.ghost .gf { position:absolute; inset:0; background:rgba(129,199,132,.16); border:1.5px dashed #9ccc9c; border-radius:4px; }
.gf0{transform:translateZ(calc(var(--gs) / 2));}
.gf1{transform:rotateY(180deg) translateZ(calc(var(--gs) / 2));}
.gf2{transform:rotateY(90deg) translateZ(calc(var(--gs) / 2));}
.gf3{transform:rotateY(-90deg) translateZ(calc(var(--gs) / 2));}
.gf4{transform:rotateX(90deg) translateZ(calc(var(--gs) / 2));}
.gf5{transform:rotateX(-90deg) translateZ(calc(var(--gs) / 2));}
.ghost:hover .gf { background:rgba(255,213,79,.6); border-color:#fbc02d; border-style:solid; box-shadow:0 0 12px rgba(251,192,45,.65); }
/* 键盘光标到达的虚影位置：金色高亮 + 呼吸光晕 */
.ghost.cur .gf { background:rgba(255,213,79,.55); border-color:#ffca28; border-style:solid; box-shadow:0 0 12px rgba(251,192,45,.9); animation:curPulse .9s infinite alternate; }
@keyframes curPulse { to { box-shadow:0 0 24px #ffd54f; } }

/* ===== 发射炮台、角色与视角指示器 ===== */
#cannonZone { position:absolute; left:18px; bottom:14px; display:flex; align-items:flex-end; gap:14px; pointer-events:none; z-index:5; }
#avatar { width:64px; height:58px; position:relative; animation:breathe 2.8s ease-in-out infinite; }
#avatar .body { position:absolute; inset:0; }
#avatar .eye { position:absolute; top:28%; width:14px; height:16px; background:#fff; border-radius:50%; box-shadow:inset 0 -2px 3px rgba(0,60,0,.15); animation:blinkEye 4.2s infinite; }
#avatar .eye::after { content:""; position:absolute; left:3px; top:5px; width:8px; height:9px; background:#2b2b2b; border-radius:50%; }
#avatar .eye::before { content:""; position:absolute; left:7px; top:3px; width:3.5px; height:3.5px; background:#fff; border-radius:50%; z-index:2; }
#avatar .eye.l{left:12px;} #avatar .eye.r{right:12px;}
#avatar .cheek { position:absolute; top:56%; width:11px; height:7px; background:rgba(255,128,140,.5); border-radius:50%; }
#avatar .cheek.l{left:5px;} #avatar .cheek.r{right:5px;}
#avatar .mouth { position:absolute; left:50%; top:52%; transform:translateX(-50%); width:16px; height:11px; background:#33691e; border-radius:4px 4px 14px 14px; overflow:hidden; }
#avatar .mouth::after { content:""; position:absolute; left:50%; bottom:-4px; transform:translateX(-50%); width:12px; height:9px; background:#ff8a96; border-radius:50%; }
#avatar.squash { animation:squash .25s; }
@keyframes breathe { 50% { transform:translateY(-3px) scale(1.04,.96); } }
@keyframes blinkEye { 0%,93%,100% { transform:scaleY(1); } 95.5% { transform:scaleY(.08); } }
@keyframes squash { 40%{transform:scale(1.15,.8) translateY(8px);} }

/* 视角指示小方块：六面标注 前/后/左/右/上/下，与主画面同步旋转；位于 3D 立方体正下方（避开底部提示文字） */
#compass { position:absolute; left:50%; bottom:160px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:6px; z-index:6; pointer-events:none; }
#miniWorld { width:0; height:0; position:relative; transform-style:preserve-3d; }
.mcFace { position:absolute; width:34px; height:34px; left:-17px; top:-17px; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:900; color:#fff; border-radius:6px; border:1.5px solid rgba(255,255,255,.75); box-shadow:inset 0 0 6px rgba(255,255,255,.35); }
.mcFront  { transform:translateZ(17px); background:#66bb6a; }
.mcBack   { transform:rotateY(180deg) translateZ(17px); background:#8d6e63; }
.mcLeft   { transform:rotateY(-90deg) translateZ(17px); background:#ffb74d; }
.mcRight  { transform:rotateY(90deg) translateZ(17px); background:#ba68c8; }
.mcTop    { transform:rotateX(90deg) translateZ(17px); background:#4fc3f7; }
.mcBottom { transform:rotateX(-90deg) translateZ(17px); background:#fff176; color:#8d6e63; }
#compassLabel { font-size:11px; font-weight:800; color:#546e7a; background:#fff; padding:2px 9px; border-radius:9px; border:1.5px solid #c8e6c9; white-space:nowrap; }
#compassLabel.match { color:#1b5e20; background:#e8f5e9; border-color:#66bb6a; }
/* 泡泡玩具枪：枪身 + 泡泡液瓶 + 枪口圆环 + 飘着的泡泡 */
#bubbleGun { width:96px; height:66px; position:relative; }
#bubbleGun.squash { animation:squash .25s; }
.gunBody { position:absolute; left:4px; bottom:8px; width:46px; height:26px; background:linear-gradient(#ffe082,#ffb300); border-radius:12px 14px 8px 8px; border:2px solid #f57f17; box-shadow:inset 0 3px 4px rgba(255,255,255,.65); }
.gunBarrel { position:absolute; left:46px; bottom:16px; width:28px; height:14px; background:linear-gradient(#81d4fa,#0288d1); border-radius:5px 10px 10px 5px; border:2px solid #01579b; }
.gunRing { position:absolute; left:72px; bottom:12px; width:18px; height:18px; border:3.5px solid #4dd0e1; border-radius:50%; box-shadow:0 0 8px rgba(77,208,225,.8); }
.gunBottle { position:absolute; left:10px; bottom:32px; width:19px; height:16px; background:linear-gradient(#b3e5fc,#4fc3f7); border-radius:5px; border:2px solid #0288d1; }
.gunBottle::after { content:""; position:absolute; left:50%; top:-6px; transform:translateX(-50%); width:7px; height:6px; background:#0288d1; border-radius:3px 3px 0 0; }
.gunBubble { position:absolute; border-radius:50%; background:radial-gradient(circle at 32% 30%, rgba(255,255,255,.95), rgba(129,212,250,.35) 45%, rgba(129,212,250,.12)); border:1.5px solid rgba(77,208,225,.6); animation:bubbleFloat 2.6s ease-in-out infinite; }
.gb1 { width:14px; height:14px; left:66px; bottom:36px; }
.gb2 { width:10px; height:10px; left:54px; bottom:46px; animation-delay:.7s; }
.gb3 { width:8px; height:8px; left:76px; bottom:50px; animation-delay:1.3s; }
@keyframes bubbleFloat { 50% { transform:translateY(-8px); opacity:.55; } }

/* 颜料飞溅粒子 */
.splash { position:fixed; width:10px; height:10px; border-radius:50%; z-index:45; pointer-events:none; animation:splashFly .55s ease-out forwards; box-shadow:0 0 4px rgba(0,0,0,.15); }
@keyframes splashFly { to { transform:translate(var(--dx), var(--dy)) scale(.15); opacity:0; } }
.bullet { position:fixed; width:20px; height:20px; z-index:40; pointer-events:none; background:radial-gradient(circle at 35% 30%,#b9e7bb,#66bb6a 60%,#43a047); border-radius:50%; box-shadow:0 2px 6px rgba(0,0,0,.25); transition:left .22s ease-in, top .22s ease-in; }

/* ===== 左栏键位说明 ===== */
#keyGuide { margin:12px 10px; border:2px dashed #c8e6c9; border-radius:12px; padding:10px 8px 6px; }
.kg-title { text-align:center; font-size:12px; font-weight:800; color:#2e7d32; margin-bottom:8px; }
.kg-row { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:4px; font-size:11px; color:#546e7a; font-weight:700; margin-bottom:6px; }
.kg-row span { margin-left:6px; }
kbd { display:inline-block; min-width:20px; padding:2px 5px; border-radius:5px; background:#e8f5e9; border:1.5px solid #a5d6a7; border-bottom-width:3px; font-size:10.5px; font-weight:800; color:#1b5e20; text-align:center; font-family:inherit; }

/* ===== 底部控制与提示 ===== */
#controls { padding:10px; display:flex; gap:12px; justify-content:center; background:#fff; border-top:2px solid #d6e9d6; flex-shrink:0; }
#hint { min-height:36px; padding:8px 14px; text-align:center; font-size:13px; color:#546e7a; background:#fff; border-top:2px dashed #e0f2e0; flex-shrink:0; line-height:1.6; }
#hint b { color:#c62828; }

/* ===== 右侧视图面板 ===== */
#viewsPane { width:190px; background:#fff; border-left:3px solid #c8e6c9; padding:0 10px 10px; flex-shrink:0; overflow-y:auto; display:flex; flex-direction:column; }
.viewBox { margin-bottom:10px; text-align:center; }
.viewBox label { font-weight:800; color:#37474f; font-size:13px; }
.vgrid { display:grid; grid-template-columns:repeat(3,30px); grid-auto-rows:30px; gap:4px; justify-content:center; margin:6px 0; }
.vcell { background:#f4f6f4; border:1.5px solid #dfe6df; border-radius:6px; }
.vcell.t { background:linear-gradient(#81c784,#4caf50); border-color:#2e7d32; }
.vcell.miss { background:#ef5350; border-color:#b71c1c; animation:blink .6s infinite alternate; }
.vcell.over { background:#ffb74d; border-color:#e65100; }
@keyframes blink { to{opacity:.35;} }
#viewLegend { font-size:11px; color:#78909c; line-height:1.8; margin-top:auto; }

/* ===== 弹窗 ===== */
.modal { position:fixed; inset:0; background:rgba(38,50,56,.45); display:flex; align-items:center; justify-content:center; z-index:50; }
.modal.hidden { display:none; }
.modal .card { background:#fff; border-radius:18px; padding:26px 30px; width:min(430px,90vw); text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.25); animation:rise .25s; }
@keyframes rise { from{transform:translateY(24px);opacity:0;} }
.modal h2 { color:#2e7d32; margin-bottom:10px; }
.modal p { color:#546e7a; margin-bottom:14px; line-height:1.7; }
.modal .row { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.shop-coins { font-size:13px; color:#c67c00; font-weight:700; margin-top:4px; }

/* ===== 商店 ===== */
#shopGrid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:14px 0; }
.shop-item { border:2px solid #e0f2e0; border-radius:14px; padding:12px 8px; text-align:center; }
.shop-item.equipped { border-color:#ffc107; background:#fffde7; }
.shop-item .preview { width:52px; height:48px; margin:0 auto 6px; position:relative; }
.shop-item .preview::before, .shop-item .preview::after { content:""; position:absolute; top:42%; width:8px; height:9px; background:#fff; border-radius:50%; z-index:2; }
.shop-item .preview::before { left:22%; } .shop-item .preview::after { right:22%; }
.shop-item .preview::before { box-shadow:inset 0 -1px 2px rgba(0,0,0,.2); }
.shop-item .preview.skin-triangle::before, .shop-item .preview.skin-triangle::after { top:64%; }
.shop-item .nm { font-weight:700; font-size:13px; margin-bottom:2px; }
.shop-item .pr { font-size:12px; color:#c67c00; margin-bottom:8px; }
.mini-btn { cursor:pointer; border:none; border-radius:8px; padding:5px 14px; font-size:12px; font-weight:700; background:#66bb6a; color:#fff; font-family:inherit; }
.mini-btn.own { background:#fff; color:#2e7d32; border:1.5px solid #81c784; }
.mini-btn[disabled] { background:#cfd8dc; color:#90a4ae; cursor:not-allowed; border:none; }

/* ===== 皮肤形状 ===== */
.skin-circle { border-radius:48% 48% 42% 42%/55% 55% 40% 40%; background:radial-gradient(circle at 35% 28%,#b9e7bb,#66bb6a 55%,#3f9142); }
.skin-square { border-radius:8px; background:linear-gradient(135deg,#9ccc65,#558b2f); }
.skin-triangle { clip-path:polygon(50% 4%,96% 96%,4% 96%); background:radial-gradient(circle at 50% 80%,#4dd0e1,#00838f); }
.skin-hexagon { clip-path:polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%); background:radial-gradient(circle at 40% 30%,#ce93d8,#8e24aa); }
.skin-star { clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); background:radial-gradient(circle at 50% 40%,#fff176,#fbc02d); }
.skin-heart { clip-path:polygon(50% 100%,14% 60%,0 34%,8% 12%,30% 4%,50% 18%,70% 4%,92% 12%,100% 34%,86% 60%); background:radial-gradient(circle at 40% 30%,#f48fb1,#d81b60); }
.skin-gold { border-radius:48% 48% 42% 42%/55% 55% 40% 40%; background:radial-gradient(circle at 35% 28%,#fff8e1,#ffd54f 45%,#ff8f00); box-shadow:0 0 18px #ffd54f; }
.skin-rainbow { border-radius:48% 48% 42% 42%/55% 55% 40% 40%; background:conic-gradient(from 0deg,#ff5250,#ffb300,#66bb6a,#42a5f5,#ab47bc,#ff5250); animation:rainbowHue 3s linear infinite, rainbowGlow 1.5s ease-in-out infinite alternate; }
@keyframes rainbowHue { to { filter:hue-rotate(360deg); } }
@keyframes rainbowGlow { 0%{box-shadow:0 0 10px #ff5250;} 50%{box-shadow:0 0 20px #42a5f5;} 100%{box-shadow:0 0 10px #ab47bc;} }
.shop-item.locked .preview { filter:grayscale(.9) opacity(.55); }

/* ===== 速算关卡 ===== */
.arith { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; }
.arith .qq { font-size:52px; font-weight:900; color:#37474f; background:#fff; padding:22px 46px; border-radius:20px; border:3px solid #c8e6c9; box-shadow:0 10px 26px rgba(46,125,50,.12); }
.arith input { font-size:32px; width:160px; text-align:center; border:3px solid #a5d6a7; border-radius:14px; padding:8px; outline:none; font-family:inherit; }
.arith input:focus { border-color:#66bb6a; }
.arith .prog { font-size:14px; color:#78909c; font-weight:700; }
.arith .feedback { min-height:26px; font-weight:800; font-size:16px; }
.feedback.ok{color:#2e7d32;} .feedback.bad{color:#c62828;}

/* ===== 提示气泡 ===== */
#toast { position:fixed; top:70px; left:50%; transform:translateX(-50%) translateY(-16px); background:#37474f; color:#fff; padding:10px 22px; border-radius:12px; font-weight:700; opacity:0; pointer-events:none; transition:.25s; z-index:99; }
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ===== 主页封面：双高塔选关 ===== */
#homeScreen { position:fixed; inset:0; z-index:30; background:linear-gradient(160deg,#e8f5e9 0%,#fffde7 55%,#e1f5fe 100%); display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:40px; padding:24px; overflow:auto; }
#homeScreen.hidden { display:none; }
#towerOverview.hidden, #towerDetail.hidden { display:none; }
#homeMain { display:flex; flex-direction:column; align-items:center; flex:1 1 520px; min-width:0; }
.home-title { font-size:44px; font-weight:900; color:#2e7d32; text-shadow:0 3px 0 #c8e6c9; letter-spacing:2px; }
.home-sub { margin:4px 0 10px; color:#78909c; font-weight:700; letter-spacing:4px; }
.btn.big { font-size:20px; padding:13px 46px; }
.home-stats { margin-top:14px; color:#78909c; font-weight:700; font-size:13px; }

/* -- 总览：两座高塔 -- */
#towerOverview { display:flex; gap:76px; align-items:flex-end; justify-content:center; margin-top:20px; }
.tower-wrap { cursor:pointer; text-align:center; transition:transform .18s; }
.tower-wrap:not(.locked):hover { transform:translateY(-8px) scale(1.04); }
.tower-wrap.locked { cursor:not-allowed; }
.tower-wrap.locked .tower-art { filter:grayscale(.85); opacity:.8; }
/* 塔身外观（纯 CSS 绘制，后期可将 .tower-art 内部整体替换为 <img> 素材） */
.tower-art { position:relative; width:150px; height:290px; margin:0 auto; display:flex; flex-direction:column; align-items:center; }
.ta-flag { position:absolute; top:-6px; left:50%; margin-left:4px; font-size:20px; z-index:2; }
.ta-roof { width:98px; height:46px; background:linear-gradient(#ef5350,#c62828); clip-path:polygon(50% 0,100% 100%,0 100%); }
.ta-floor { height:32px; margin-top:3px; background:linear-gradient(#ffe0b2,#ffcc80); border:2.5px solid #ef6c00; border-radius:8px;
  background-image:repeating-linear-gradient(90deg, transparent 0 9px, rgba(255,255,255,.75) 9px 17px, transparent 17px 26px); box-shadow:inset 0 2px 3px rgba(255,255,255,.55); }
.ta-base { width:126px; height:16px; margin-top:4px; background:linear-gradient(#a1887f,#8d6e63); border-radius:8px 8px 4px 4px; }
.ta-coming { position:absolute; left:50%; top:54%; transform:translate(-50%,-50%); background:#37474f; color:#fff; font-size:13px; font-weight:800; padding:6px 13px; border-radius:10px; white-space:nowrap; z-index:3; box-shadow:0 4px 12px rgba(0,0,0,.28); }
.tower-name { margin-top:13px; font-size:20px; font-weight:900; color:#2e7d32; }
.tower-wrap.locked .tower-name { color:#90a4ae; }
.tower-sub { margin-top:3px; font-size:13px; font-weight:700; color:#78909c; }

/* -- 详情：观察物体塔放大选关 -- */
#towerDetail { display:flex; flex-direction:column; align-items:center; width:100%; }
.detail-top { display:flex; align-items:center; gap:14px; margin-bottom:6px; }
.detail-title { font-size:19px; font-weight:900; color:#2e7d32; }
.detail-cap { font-size:24px; line-height:1; margin-bottom:4px; }
#detailTower { display:flex; flex-direction:column-reverse; gap:4px; width:240px; max-height:min(56vh,620px); overflow-y:auto; padding:6px 6px; }
#detailLabel { min-height:22px; margin:12px 0 14px; font-size:14px; font-weight:700; color:#546e7a; text-align:center; }
#detailLabel b { color:#e65100; font-size:16px; }
/* 总览 ⇄ 详情 切换的缩放过渡 */
.zoomIn { animation:zoomInAnim .34s cubic-bezier(.34,1.3,.64,1); }
@keyframes zoomInAnim { from { transform:scale(.22) translateY(130px); opacity:0; } }

/* ===== 每日签到面板 ===== */
#checkinPanel { background:#fff; border-radius:20px; padding:22px 24px; width:300px; flex-shrink:0; box-shadow:0 16px 44px rgba(46,125,50,.16); border:3px solid #c8e6c9; text-align:center; }
#checkinPanel h3 { color:#2e7d32; margin-bottom:6px; }
.ci-sub { font-size:12px; color:#90a4ae; line-height:1.7; }
#ciGrid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin:14px 0; }
.ci-day { aspect-ratio:1/1; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:9.5px; font-weight:800; background:#f4f9f4; border:2px solid #e0f2e0; color:#90a4ae; line-height:1.3; }
.ci-day .d { font-size:13px; }
.ci-day.done { background:linear-gradient(#c8e6c9,#a5d6a7); border-color:#66bb6a; color:#1b5e20; }
.ci-day.today { border-color:#ffb300; background:#fff8e1; box-shadow:0 0 0 3px #ffe082; color:#e65100; }
.ci-day.rainbow .d { font-size:17px; }
#ciBtn { width:100%; }
#ciBtn[disabled] { background:#cfd8dc; box-shadow:none; color:#78909c; cursor:default; }
#ciInfo { font-size:12px; color:#78909c; margin-top:10px; min-height:18px; font-weight:700; }