:root{--blue: #2b83c7;--blue-dark: #1c5d96;--blue-deep: #143f6b;--gold: #ffca3a;--gold-dark: #d8911a;--green: #5ec44f;--ink: #23405c;--white: #ffffff;--shadow: 0 4px 0 rgba(14, 58, 96, .35), 0 8px 18px rgba(14, 58, 96, .25)}*{box-sizing:border-box}html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#cfeaf7;font-family:Microsoft YaHei,PingFang SC,Hiragino Sans GB,Segoe UI,sans-serif;color:var(--white);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none}#game{position:fixed;inset:0}#game canvas{display:block}svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}#topbar{position:fixed;top:12px;left:12px;right:12px;display:flex;align-items:center;gap:9px;z-index:20;pointer-events:none}#topbar>*{pointer-events:auto}.spacer{flex:1;pointer-events:none}.avatar{width:54px;height:54px;flex:0 0 54px;border-radius:16px;padding:5px;background:linear-gradient(160deg,#fff8d8,#ffd76a);border:2px solid #fff;box-shadow:var(--shadow);color:#3d8fd0}.avatar svg{width:100%;height:100%;padding:3px;border-radius:11px;background:linear-gradient(160deg,#a9e2ff,#4fa9e6);stroke:#fff;stroke-width:2.2}.stat{display:flex;align-items:center;gap:7px;height:42px;min-width:86px;padding:0 14px 0 8px;border-radius:999px;background:linear-gradient(180deg,#3f97da,#2268ac 55%,#1a548f);border:2px solid rgba(255,255,255,.9);box-shadow:var(--shadow);font-weight:800;font-size:17px;text-shadow:0 2px 0 rgba(9,48,84,.55)}.stat .num{letter-spacing:.3px}.stat-level{min-width:104px;padding-left:4px;position:relative}.lv{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:50%;font-size:17px;color:#1d5f9b;background:radial-gradient(circle at 35% 30%,#fff,#ffe27a 60%,#f5b731);border:2px solid #fff;text-shadow:none;box-shadow:0 2px #b8791a}.xpbar{flex:1;height:9px;border-radius:6px;overflow:hidden;background:#092d4f8c;border:1px solid rgba(255,255,255,.35)}.xpbar i{display:block;height:100%;width:0%;border-radius:6px;background:linear-gradient(90deg,#a6f36b,#4fc94a);transition:width .3s}.ico{width:27px;height:27px;flex:0 0 27px;display:inline-block;border-radius:50%;border:2px solid #fff;box-shadow:0 2px #00000038;position:relative}.ico:after{content:"";position:absolute;inset:3px;border-radius:50%}.ico-coin{background:radial-gradient(circle at 35% 28%,#fff5b8,#ffc42e 55%,#d8890f)}.ico-coin:after{border:2px solid rgba(255,255,255,.75)}.ico-cash{border-radius:7px;background:linear-gradient(150deg,#b9f56f,#41b33f)}.ico-cash:after{border-radius:4px;border:2px solid rgba(255,255,255,.8)}.ico-pop{background:radial-gradient(circle at 35% 28%,#ffd7a8,#f28c4b 60%,#c45d24)}.ico-pop:after{inset:5px auto auto 7px;width:9px;height:9px;background:#fff2dd;border-radius:50%;box-shadow:0 11px 0 2px #fff2dd}.brand{display:flex;flex-direction:column;align-items:center;line-height:1.05;padding:5px 18px;border-radius:14px;background:linear-gradient(180deg,#18588eeb,#103e69eb);border:2px solid rgba(255,255,255,.8);box-shadow:var(--shadow)}.brand strong{font-size:19px;letter-spacing:3px;color:#fff6cf;text-shadow:0 2px 0 #0f406e,0 0 10px rgba(255,220,120,.6)}.brand small{font-size:10px;letter-spacing:4px;opacity:.8;margin-top:3px}.icon-btn{width:46px;height:46px;flex:0 0 46px;padding:10px;border-radius:14px;color:#fff;cursor:pointer;background:linear-gradient(180deg,#3f97da,#1a548f);border:2px solid #fff;box-shadow:var(--shadow)}.icon-btn:active{transform:translateY(2px);box-shadow:0 2px #0e3a6059}#toolbar{position:fixed;left:50%;bottom:16px;transform:translate(-50%);display:flex;gap:10px;z-index:20}.tool{width:62px;height:66px;padding:6px 4px 4px;display:flex;flex-direction:column;align-items:center;gap:3px;border-radius:18px;cursor:pointer;color:#fff;background:linear-gradient(180deg,#4aa2e2,#2472b8 55%,#1a568f);border:2px solid rgba(255,255,255,.92);box-shadow:var(--shadow);font-size:12px;font-weight:800;letter-spacing:1px;text-shadow:0 2px 0 rgba(9,48,84,.55);transition:transform .12s,filter .12s}.tool svg{width:30px;height:30px;stroke-width:2.1}.tool:hover{filter:brightness(1.12);transform:translateY(-2px)}.tool:active{transform:translateY(2px)}.tool.active{background:linear-gradient(180deg,#ffd96b,#f0a025 60%,#d67c12);color:#5a3500;text-shadow:0 1px 0 rgba(255,255,255,.5)}#panel{position:fixed;right:14px;top:82px;bottom:100px;width:330px;z-index:25;display:flex;flex-direction:column;border-radius:22px;overflow:hidden;background:linear-gradient(180deg,#fffdf0fa,#eef6fafa);border:3px solid #fff;box-shadow:0 10px #0e3a6040,0 18px 40px #0e3a604d;color:var(--ink);transition:transform .22s ease,opacity .22s ease}#panel.hidden{transform:translate(120%);opacity:0;pointer-events:none}.panel-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;color:#fff;background:linear-gradient(180deg,#3f97da,#1d639f);border-bottom:3px solid rgba(255,255,255,.65)}.panel-head h2{margin:0;font-size:18px;letter-spacing:2px;text-shadow:0 2px 0 rgba(9,48,84,.5)}#panel-close{width:30px;height:30px;border-radius:50%;cursor:pointer;border:2px solid #fff;background:#ffffff2e;color:#fff;font-size:20px;line-height:1;font-weight:700}#panel-body{flex:1;overflow-y:auto;padding:12px}#panel-body::-webkit-scrollbar{width:8px}#panel-body::-webkit-scrollbar-thumb{background:#a9cfe6;border-radius:6px}.tabs{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}.tab{padding:6px 12px;border-radius:999px;cursor:pointer;font-size:13px;font-weight:700;border:2px solid #bcd9ea;background:#fff;color:#3b7bab}.tab.active{background:#2b83c7;color:#fff;border-color:#2b83c7}.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.card{position:relative;padding:8px;border-radius:14px;cursor:pointer;text-align:center;background:#fff;border:2px solid #d9e9f2;box-shadow:0 3px #d9e9f2;transition:transform .12s}.card:hover{transform:translateY(-2px);border-color:#6fb6e6}.card.locked{opacity:.55;filter:grayscale(.7);cursor:not-allowed}.card.sel{border-color:#f5a623;box-shadow:0 0 0 3px #f5a62359}.card img{width:72px;height:72px;object-fit:contain;image-rendering:auto;display:block;margin:0 auto}.card-name{font-size:14px;font-weight:800;margin-top:2px}.card-cost{font-size:12px;color:#b47a12;font-weight:800;margin-top:3px}.card-meta{font-size:11px;color:#7b93a5;margin-top:3px;line-height:1.35}.lock-tag{position:absolute;top:5px;right:5px;font-size:10px;background:#e4634f;color:#fff;padding:2px 5px;border-radius:8px}.order{display:flex;align-items:center;gap:10px;padding:10px;margin-bottom:9px;border-radius:14px;background:#fff;border:2px solid #d9e9f2;box-shadow:0 3px #d9e9f2}.order img{width:52px;height:52px;object-fit:contain}.order-info{flex:1;min-width:0}.order-info b{font-size:14px}.order-info div{font-size:12px;color:#6f8ba0;margin-top:3px}.order-btn{padding:7px 12px;border-radius:999px;border:2px solid #fff;cursor:pointer;background:linear-gradient(180deg,#7ed35c,#3ea63a);color:#fff;font-weight:800;font-size:13px;box-shadow:0 3px #2c7c2b}.order-btn:disabled{background:#b9c6cf;box-shadow:0 3px #93a3ae;cursor:not-allowed}.barn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.barn-item{text-align:center;padding:8px 4px;border-radius:14px;background:#fff;border:2px solid #d9e9f2}.barn-item img{width:54px;height:54px;object-fit:contain}.barn-item b{display:block;font-size:14px}.barn-item span{font-size:12px;color:#b47a12;font-weight:800}.barn-cap{font-size:13px;color:#4d7897;margin-bottom:10px;font-weight:700}.menu-line{font-size:13px;line-height:1.9;color:#41627e}.menu-line b{color:#1d639f}.menu-btn{display:block;width:100%;margin-top:10px;padding:10px;border-radius:12px;cursor:pointer;border:2px solid #fff;font-weight:800;color:#fff;background:linear-gradient(180deg,#4aa2e2,#1a568f);box-shadow:0 3px #0e3a6059}.menu-btn.danger{background:linear-gradient(180deg,#f38a72,#cf4d38)}#bubbles{position:fixed;inset:0;z-index:8;pointer-events:none}.bubble{position:absolute;transform:translate(-50%,-100%);display:flex;align-items:center;gap:5px;white-space:nowrap;padding:4px 10px 4px 6px;border-radius:999px;background:linear-gradient(180deg,#fffffff7,#e8f4fcf7);border:2px solid #fff;color:#23405c;font-size:12px;font-weight:800;box-shadow:0 3px #0e3a604d,0 6px 12px #0e3a6033}.bubble:after{content:"";position:absolute;left:50%;bottom:-8px;transform:translate(-50%);border:5px solid transparent;border-top-color:#fff}.bubble .clock{width:18px;height:18px;border-radius:50%;background:#ffc42e;border:2px solid #fff;box-shadow:0 1px #c98a10}.bubble.ready{background:linear-gradient(180deg,#fff6c9,#ffe27a);color:#7a4c00}.bubble.ready .clock{background:#67d34e}#hint{position:fixed;left:50%;bottom:96px;transform:translate(-50%);z-index:18;padding:8px 18px;border-radius:999px;font-size:13px;font-weight:700;background:#143f6be6;border:2px solid #fff;box-shadow:var(--shadow)}#hint.hidden{display:none}#toast{position:fixed;left:50%;top:84px;transform:translate(-50%,-14px);z-index:40;padding:10px 22px;border-radius:14px;font-size:15px;font-weight:800;background:#143f6bf0;border:2px solid #fff;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .22s,transform .22s}#toast.show{opacity:1;transform:translate(-50%)}#start-mask{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#7ec4ebb8,#0c3a62db);transition:opacity .35s;backdrop-filter:blur(3px)}#start-mask.hidden{opacity:0;pointer-events:none}.start-card{width:min(400px,88vw);padding:26px 26px 22px;border-radius:28px;text-align:center;background:linear-gradient(180deg,#fffdf3,#e3f3fb);border:4px solid #fff;box-shadow:0 10px #0e3a604d,0 24px 60px #08284a80;color:var(--ink)}.start-crest{width:68px;height:68px;margin:-60px auto 8px;display:grid;place-items:center;border-radius:20px;border:4px solid #fff;transform:rotate(-6deg);background:linear-gradient(160deg,#ffd96b,#ef9a24);box-shadow:0 5px #b87516}.start-crest span{font-size:34px;font-weight:900;color:#fff;text-shadow:0 3px 0 #b87516;transform:rotate(6deg)}.start-card h1{margin:6px 0 2px;font-size:32px;letter-spacing:6px;color:#1d639f;text-shadow:0 2px 0 #fff}.start-card .sub{margin:0 0 16px;font-size:13px;letter-spacing:3px;color:#6d93ab}.start-tips{text-align:left;font-size:13px;line-height:2;background:#fff;border:2px dashed #b9d9ea;border-radius:14px;padding:10px 14px;color:#41627e}.start-tips b{color:#1d639f}.primary-btn{width:100%;margin:16px 0 8px;padding:13px;border-radius:16px;cursor:pointer;border:3px solid #fff;font-size:18px;font-weight:900;letter-spacing:4px;color:#fff;background:linear-gradient(180deg,#7ed35c,#39a337);box-shadow:0 5px #267c27;text-shadow:0 2px 0 rgba(0,0,0,.2)}.primary-btn:active{transform:translateY(3px);box-shadow:0 2px #267c27}.start-card small{color:#8aa4b5;font-size:11px}.hidden{display:none}@media (max-width: 760px){#topbar{top:8px;left:8px;right:8px;gap:5px}.avatar{width:42px;height:42px;flex-basis:42px;border-radius:12px}.stat{height:36px;min-width:64px;padding:0 8px 0 5px;font-size:13px;gap:4px}.stat-level{min-width:62px}.lv{width:26px;height:26px;flex-basis:26px;font-size:13px}.ico{width:20px;height:20px;flex-basis:20px}.ico-pop:after{left:5px;top:3px;width:6px;height:6px;box-shadow:0 8px 0 2px #fff2dd}.brand{display:none}.icon-btn{width:38px;height:38px;flex-basis:38px;padding:8px}#toolbar{gap:5px;bottom:10px}.tool{width:50px;height:56px;font-size:10px;border-radius:14px}.tool svg{width:24px;height:24px}#panel{inset:auto 8px 76px;width:auto;height:min(56vh,430px);border-radius:18px}#hint{bottom:76px;font-size:11px;padding:6px 12px}.bubble{font-size:10px;padding:3px 7px 3px 4px}.bubble .clock{width:13px;height:13px}}