*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;touch-action:none}
html,body{margin:0;height:100%;background:#3a2418;font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;overflow:hidden}
#app{position:relative;margin:0 auto;height:100%;height:100dvh;max-width:520px;display:flex;flex-direction:column;background:#fff3dc;overflow:hidden}
#stage{position:relative;flex:1;min-height:0}
#game{display:block}
.hudbtn{position:absolute;top:9px;right:12px;width:38px;height:30px;border:none;border-radius:10px;background:rgba(255,255,255,.25);color:#fff;font-size:16px;z-index:2}
#debug{position:absolute;left:4px;bottom:4px;display:none;flex-wrap:wrap;gap:4px;z-index:3}
#debug button{font-size:11px;padding:4px 6px;border-radius:6px;border:1px solid #333;background:#fff8;color:#000}
#controls{height:clamp(150px,25dvh,210px);display:flex;align-items:center;justify-content:space-between;padding:0 14px calc(env(safe-area-inset-bottom) + 6px);background:linear-gradient(#f3c98f,#e9a965);border-top:4px solid #8a6a4a;position:relative}
#stick{position:relative;width:140px;height:140px;display:flex;align-items:center;justify-content:center}
#stick .base{width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.45);border:4px solid #fff;box-shadow:inset 0 4px 10px rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center}
#knob{width:54px;height:54px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#ffb35c);border:3px solid #8a4b20;box-shadow:0 4px 0 #8a4b20}
#cardBar{position:absolute;left:50%;transform:translateX(-50%);top:6px;display:flex;flex-wrap:wrap;justify-content:center;gap:2px;max-width:34%}
#cardBar img{width:22px;height:22px}
#btns{display:flex;align-items:center;gap:10px}
#bombBtn{width:108px;height:108px;border-radius:50%;border:5px solid #fff;background:radial-gradient(circle at 35% 30%,#ff8a7a,#e8433a);box-shadow:0 6px 0 #9b2a22;display:flex;align-items:center;justify-content:center;padding:0}
#bombBtn img{width:78%;pointer-events:none}
#detBtn{display:none;width:62px;height:62px;border-radius:50%;border:4px solid #fff;background:radial-gradient(circle at 35% 30%,#8fd3ff,#2a7bd8);box-shadow:0 5px 0 #1b4f8f;color:#fff;font-weight:900;font-size:15px;align-items:center;justify-content:center;padding:0}
#bombBtn.pressed,#detBtn.pressed{transform:translateY(5px);box-shadow:0 1px 0 #9b2a22}
.screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:10}
.screen.hidden{display:none}
#overlay{background:rgba(58,36,24,.55)}
.card-panel{background:#fff8ec;border:4px solid #8a6a4a;border-radius:22px;padding:20px 22px;text-align:center;min-width:250px;max-width:88%;max-height:86%;overflow:auto;color:#5a3418;box-shadow:0 8px 0 rgba(0,0,0,.2)}
.card-panel h2{margin:4px 0 10px;font-size:24px}.card-panel p{margin:6px 0}.card-panel .big{font-size:22px;font-weight:bold;color:#e8433a}.card-panel .small{font-size:12px;opacity:.75}
.card-panel .tip{background:#fff1c9;border-radius:12px;padding:8px;font-size:14px}
.card-panel .stars{color:#f5a400;letter-spacing:4px;font-size:30px}
.card-panel .zone{display:inline-block;background:#ffb347;color:#fff;border-radius:10px;padding:2px 10px;font-size:13px}
.owned{text-align:left;font-size:13px;max-height:40vh;overflow:auto}.owned div{display:flex;align-items:center;gap:6px;margin:4px 0}.owned img{width:30px;height:30px}
.fusion img{width:110px;height:110px;animation:spin 1.2s ease-out}@keyframes spin{from{transform:scale(.2) rotate(-360deg)}to{transform:scale(1) rotate(0)}}
.btn{display:block;margin:12px auto 0;min-width:170px;padding:12px 22px;font-size:19px;font-weight:bold;color:#fff;border:none;border-radius:16px;background:linear-gradient(#ffb347,#ff7b2e);box-shadow:0 5px 0 #b4501a}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #b4501a}
.btn.ghost{background:#c9a882;box-shadow:0 5px 0 #8a6a4a;font-size:15px}
.mini{border:none;border-radius:10px;padding:6px 10px;background:rgba(90,52,24,.75);color:#fff;font-weight:bold}
.mini.ghost{background:rgba(255,255,255,.6);color:#5a3418;font-size:11px}
#title .titlebg{position:absolute;inset:0;background:url(assets/title_bg.jpg) center/cover}
#title .content{position:relative;text-align:center;margin-top:-28vh}
#title h1{margin:0;font-size:56px;line-height:1.08;font-weight:900;color:#fff;transform:rotate(-3deg);text-shadow:3px 0 0 #6b2f12,-3px 0 0 #6b2f12,0 3px 0 #6b2f12,0 -3px 0 #6b2f12,2px 2px 0 #6b2f12,-2px 2px 0 #6b2f12,2px -2px 0 #6b2f12,-2px -2px 0 #6b2f12,0 7px 0 #6b2f12,0 10px 16px rgba(0,0,0,.35)}
#title h1 span{display:block}#title h1 span:last-child{color:#ffd23f}
#title .sub{margin:12px 0 4px;font-weight:900;letter-spacing:4px;color:#ff6b3d;text-shadow:0 2px 0 #fff,0 -1px 0 #fff,1px 0 0 #fff,-1px 0 0 #fff}
#title .help{margin-top:16px;font-size:13px;color:#5a3418;background:rgba(255,255,255,.85);border-radius:12px;padding:8px 12px}
#title .mute{position:fixed;top:12px;right:12px;background:rgba(90,52,24,.6)}
#map{flex-direction:column;justify-content:flex-start;background:#3a2418}
#mapBg{position:absolute;inset:0;background:center/cover;filter:saturate(1.05)}
.maptop{position:relative;display:flex;gap:6px;align-items:center;width:100%;padding:10px 10px 0}
#mapTabs{display:flex;gap:4px;flex-wrap:wrap}
.tab{border:none;border-radius:12px;padding:7px 10px;font-weight:bold;background:rgba(255,255,255,.75);color:#5a3418;font-size:13px}
.tab.on{background:#ff7b2e;color:#fff}.tab.locked{opacity:.6}
#mapTitle{position:relative;margin:8px 10px 0;background:rgba(255,248,236,.92);border:3px solid #8a6a4a;border-radius:16px;padding:6px 12px;text-align:center;color:#5a3418}
#mapTitle b{display:block;font-size:22px}#mapTitle span{font-size:12px}
#mapNodes{position:relative;flex:1;width:100%}
.node{position:absolute;transform:translate(-50%,0);width:64px;height:64px;border-radius:50%;border:4px solid #fff;background:radial-gradient(circle at 35% 30%,#fff3c4,#ffb347);box-shadow:0 5px 0 #8a4b20;color:#5a3418;font-weight:900;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0}
.node .code{font-size:15px}.node .stars{font-size:11px;color:#e07a00;letter-spacing:-1px}
.node.boss{width:80px;height:80px;background:radial-gradient(circle at 35% 30%,#ffd0d0,#e8433a);color:#fff}
.node.boss img{width:40px;height:40px;margin:-4px 0}
.node.boss .stars{color:#fff3a0}
.node.locked{filter:grayscale(.9);opacity:.75}
.node.cur{animation:pulse 1s infinite}@keyframes pulse{50%{transform:translate(-50%,-4px) scale(1.08)}}
.mapbottom{position:relative;width:100%;padding:0 10px calc(env(safe-area-inset-bottom) + 10px);display:flex;flex-direction:column;align-items:center}
.mapbottom .mini{margin-top:6px}
#cards{background:rgba(40,20,10,.72)}
.cardwrap{width:94%;text-align:center}
.cardwrap h2{color:#fff;margin:0 0 12px;text-shadow:0 3px 0 #6b2f12}
#cardList{display:flex;gap:8px;justify-content:center}
.card{flex:1;max-width:160px;background:#fff8ec;border:4px solid #ffb347;border-radius:16px;padding:8px 6px 10px;color:#5a3418;box-shadow:0 6px 0 #8a4b20;display:flex;flex-direction:column;align-items:center;animation:pop .35s ease-out backwards}
.card:nth-child(2){animation-delay:.08s}.card:nth-child(3){animation-delay:.16s}@keyframes pop{from{transform:scale(.4) translateY(40px);opacity:0}}
.card img{width:74px;height:74px}.card .cat{font-size:11px;background:#ffb347;color:#fff;border-radius:8px;padding:0 6px;margin-top:2px}
.card .nm{font-weight:900;font-size:16px;margin:4px 0}.card .ds{font-size:12px;line-height:1.3}.card .fu{margin-top:6px;font-size:11px;color:#c0392b;font-weight:bold}
.card:active{transform:scale(.96)}
#loading{background:#fff3dc;color:#8a6a4a;font-size:20px;flex-direction:column}
#loading .bar{width:200px;height:10px;background:#f3d9b0;border-radius:5px;margin-top:10px;overflow:hidden}#loadBar{height:100%;width:0;background:#ff7b2e}