:root{--ink:#3b2a1a;--ink2:#6d5640;--paper:#f6ead0;--paper2:#ecdcb6;--edge:#8a5a2e;--wood:#6b4423;--wood2:#8b5e34;--red:#c0432b;--gold:#e8b44c;--green:#5f8a4a;--blue:#4f7cac;--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);
 --serif:"Kaiti SC","STKaiti","Songti SC","Noto Serif CJK SC","Source Han Serif SC",serif;--sans:-apple-system,"PingFang SC","Noto Sans CJK SC","Microsoft YaHei",sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
html,body{margin:0;height:100%;overflow:hidden;background:#1e2a4a;color:var(--ink);font-family:var(--sans);-webkit-user-select:none;user-select:none;overscroll-behavior:none}
canvas#cv{position:fixed;inset:0;width:100%;height:100%;touch-action:none;display:block}
.hidden{display:none!important}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}
.sp{flex:1}
/* HUD */
#hud{position:fixed;left:0;right:0;top:0;padding:calc(var(--sat) + 8px) 10px 0;pointer-events:none;z-index:5}
#hud>*{pointer-events:none}#hud button{pointer-events:auto}
#top1,#top2{display:flex;align-items:center;gap:7px}
#top2{margin-top:8px}
.ribbon{position:relative;pointer-events:auto;display:flex;flex-direction:column;align-items:flex-start;padding:5px 22px 5px 14px;min-width:150px;color:#fff3d6;text-align:left;
 background:linear-gradient(#a8442f,#8c3322);border-radius:6px 0 0 6px;box-shadow:0 2px 0 #5c1f14,0 5px 10px rgba(0,0,0,.35);clip-path:polygon(0 0,100% 0,calc(100% - 12px) 50%,100% 100%,0 100%)}
.ribbon::before{content:"";position:absolute;inset:3px 14px 3px 3px;border:1px solid rgba(255,225,160,.55);border-radius:4px;pointer-events:none}
.ribbon b{font:700 19px/1.15 var(--serif);letter-spacing:2px;text-shadow:0 1px 0 #5c1f14}
.ribbon span{font-size:11px;opacity:.92;margin-top:1px;letter-spacing:.5px}
.rbtn{width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#9a6a3a,#6b4423);color:#fbe9bf;font-size:16px;box-shadow:0 2px 0 #3e2612,0 4px 8px rgba(0,0,0,.35);border:2px solid #d9b370;display:flex;align-items:center;justify-content:center}
.rbtn:active{transform:translateY(1px)}
.rbtn.off{opacity:.55}
.pill{display:flex;align-items:center;gap:5px;padding:4px 10px 4px 5px;border-radius:16px;background:rgba(246,234,208,.94);border:2px solid var(--edge);box-shadow:0 2px 6px rgba(0,0,0,.3);font-size:13px}
.pill i{font:700 11px var(--serif);font-style:normal;width:20px;height:20px;border-radius:50%;background:var(--wood2);color:#fff3d6;display:flex;align-items:center;justify-content:center}
.pill b{font-variant-numeric:tabular-nums}
#rci{pointer-events:auto;display:flex;gap:4px;padding:3px 6px 2px;background:rgba(246,234,208,.94);border:2px solid var(--edge);border-radius:10px;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.rb{position:relative;display:flex;flex-direction:column;align-items:center;width:20px}
.rb u{display:block;position:relative;width:12px;height:32px;background:#d8c8a0;border-radius:3px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(90,60,30,.4)}
.rb u::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(90,60,30,.55);z-index:2}
.rb u::after{content:"";position:absolute;left:0;right:0;bottom:50%;height:var(--p,0%);background:var(--c)}
.rb.neg u::after{bottom:auto;top:50%}
.rb[data-k=R]{--c:#6dbb55}.rb[data-k=C]{--c:#4f8fd6}.rb[data-k=I]{--c:#e1b730}.rb[data-k=L]{--c:#e07a98}
.rb em{font:700 10px var(--serif);font-style:normal;margin-top:1px;color:var(--ink2)}
#hint{position:fixed;left:50%;transform:translateX(-50%);top:calc(var(--sat) + 104px);max-width:86%;padding:8px 14px;background:rgba(60,36,16,.9);color:#ffeec7;border-radius:14px;border:1.5px solid var(--gold);font:600 14px/1.45 var(--serif);text-align:center;box-shadow:0 4px 12px rgba(0,0,0,.4);animation:pulse 2.4s infinite;pointer-events:none}
@keyframes pulse{50%{transform:translateX(-50%) translateY(-3px)}}
#legend{position:fixed;left:10px;right:10px;top:calc(var(--sat) + 100px);pointer-events:auto;background:rgba(246,234,208,.95);border:2px solid var(--edge);border-radius:12px;padding:6px 10px;display:flex;align-items:center;gap:8px;font-size:12px}
#legend .gr{flex:1;height:8px;border-radius:4px}
#legend button{padding:3px 12px;background:var(--wood2);color:#fff3d6;border-radius:10px;font-size:12px}
#vipchip{position:fixed;right:10px;bottom:calc(var(--sab,0px) + 118px);pointer-events:auto!important;background:rgba(228,178,60,.96);color:#4a2d10;padding:3px 10px;border:2px solid #7a4f2b;border-radius:14px;font:700 12px var(--serif)}
/* bottom toolbar */
#tools{position:fixed;left:6px;right:6px;bottom:calc(var(--sab) + 6px);display:flex;align-items:flex-end;justify-content:space-between;gap:3px;padding:6px 6px 4px;background:linear-gradient(#8b5e34,#5f3c1e);border:2px solid #d9b370;border-radius:18px;box-shadow:0 3px 0 #2e1b0b,0 8px 18px rgba(0,0,0,.45);z-index:6}
.tool{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;padding:2px 0;border-radius:12px;position:relative;min-width:0}
.tool .ti{width:44px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:11px;background:radial-gradient(#f6ead0,#e0cb9c);box-shadow:inset 0 0 0 1.5px rgba(90,60,30,.5);overflow:hidden}
.tool .ti img{max-width:42px;max-height:36px;object-fit:contain;filter:drop-shadow(0 1px 0 rgba(0,0,0,.25))}
.tool .ti svg{width:34px;height:34px}
.tool em{font:700 11px var(--serif);font-style:normal;color:#fbe9bf;letter-spacing:1px}
.tool.big .ti{background:radial-gradient(#ffe9a8,#e8b44c);box-shadow:inset 0 0 0 2px #8a5a2e,0 0 10px rgba(255,214,120,.6)}
.tool.on .ti{background:radial-gradient(#fff6d0,#f4d36a);box-shadow:inset 0 0 0 2.5px var(--red),0 0 12px rgba(255,220,120,.9);transform:translateY(-3px)}
.tool.on em{color:#ffe08a}
.tool.pulse .ti{animation:tp 1.2s infinite}
@keyframes tp{50%{box-shadow:inset 0 0 0 2.5px var(--red),0 0 18px 4px rgba(255,220,120,.95)}}
#brush{position:fixed;left:8px;right:8px;bottom:calc(var(--sab) + 78px);display:flex;align-items:center;gap:6px;padding:5px 8px;background:rgba(246,234,208,.96);border:2px solid var(--edge);border-radius:14px;box-shadow:0 3px 10px rgba(0,0,0,.4);z-index:6;font-size:12px}
#brush .t{flex:1;font:600 12px/1.3 var(--serif);min-width:0}
#brush .t small{display:block;font:11px var(--sans);color:var(--ink2)}
#brush button{padding:5px 10px;border-radius:10px;background:var(--paper2);border:1.5px solid var(--edge);font:700 12px var(--serif)}
#brush button.on{background:var(--gold);box-shadow:inset 0 0 0 1px #fff7}
#place{position:fixed;left:8px;right:8px;bottom:calc(var(--sab) + 8px);padding:9px 12px;background:rgba(246,234,208,.97);border:2px solid var(--edge);border-radius:18px;box-shadow:0 4px 14px rgba(0,0,0,.5);z-index:8;display:flex;align-items:center;gap:10px}
#place .t{flex:1;font:700 15px/1.3 var(--serif)}#place .t small{display:block;font:12px var(--sans);color:var(--ink2);font-weight:400}#place .t small.bad{color:var(--red)}
.btn{padding:9px 18px;border-radius:14px;background:linear-gradient(#e8b44c,#d19a34);border:2px solid #8a5a2e;font:700 15px var(--serif);color:#3b2410;box-shadow:0 2px 0 #6b4423}
.btn:active{transform:translateY(1px)}.btn.ghost{background:var(--paper2)}.btn.red{background:linear-gradient(#d65a3f,#b23a24);color:#fff3d6}.btn[disabled]{opacity:.45}
.btn.sm{padding:5px 12px;font-size:13px;border-radius:10px}
/* toasts */
#toasts{position:fixed;left:0;right:0;top:calc(var(--sat) + 140px);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;z-index:20}
.toast{max-width:88%;padding:7px 14px;border-radius:14px;background:rgba(60,36,16,.92);color:#ffeec7;font:600 13px/1.4 var(--serif);border:1.5px solid #d9b370;animation:tin .3s,tout .4s 3.2s forwards;box-shadow:0 3px 8px rgba(0,0,0,.4)}
.toast.good{border-color:#8fd07a}.toast.bad{border-color:#ee8a74}.toast.event{border-color:#8cc4ee}
@keyframes tin{from{opacity:0;transform:translateY(-8px)}}@keyframes tout{to{opacity:0;transform:translateY(-8px)}}
/* sheets */
#scrim{position:fixed;inset:0;background:rgba(15,10,30,.45);z-index:9}
#sheet{position:fixed;left:0;right:0;bottom:0;max-height:78vh;display:flex;flex-direction:column;background:var(--paper);border:3px solid var(--edge);border-bottom:0;border-radius:22px 22px 0 0;z-index:10;box-shadow:0 -6px 24px rgba(0,0,0,.5);animation:up .25s;padding-bottom:var(--sab);-webkit-user-select:none}
#sheet.tall{height:78vh}
@keyframes up{from{transform:translateY(40px);opacity:0}}
.shead{display:flex;align-items:center;gap:8px;padding:10px 14px 6px;background:linear-gradient(#e6cf9c,var(--paper));border-radius:19px 19px 0 0}
.shead h2{margin:0;flex:1;font:700 20px var(--serif);letter-spacing:2px}
.shead .x{width:30px;height:30px;border-radius:50%;background:var(--wood2);color:#fff3d6;font-size:16px}
.tabs{display:flex;gap:6px;padding:4px 12px 8px;overflow-x:auto;flex-shrink:0}
.tabs button{flex:1;white-space:nowrap;padding:6px 8px;border-radius:12px;background:var(--paper2);border:1.5px solid rgba(138,90,46,.6);font:700 13px var(--serif)}
.tabs button.on{background:var(--wood2);color:#fff3d6;border-color:var(--wood)}
.sbody{overflow-y:auto;padding:4px 14px 18px;flex:1;-webkit-overflow-scrolling:touch;-webkit-user-select:none}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.card{position:relative;background:linear-gradient(#fbf3de,#f1e2bd);border:2px solid var(--edge);border-radius:14px;padding:6px 8px 8px;text-align:center;box-shadow:0 2px 0 rgba(90,60,30,.35)}
.card .th{height:92px;display:flex;align-items:flex-end;justify-content:center;background:radial-gradient(ellipse at 50% 85%,#d6e4b0,#f1e2bd 70%);border-radius:10px;overflow:hidden}
.card .th img{max-width:100%;max-height:92px;object-fit:contain}
.card h4{margin:5px 0 1px;font:700 15px var(--serif)}
.card .c{font-size:12px;color:var(--red);font-weight:700}
.card .d{font-size:11px;color:var(--ink2);line-height:1.35;margin-top:2px;min-height:44px;text-align:left}
.card.lock{filter:saturate(.35)}.card.lock .th img{filter:brightness(.35) sepia(.4)}
.card .lk{position:absolute;left:6px;right:6px;top:34px;padding:3px 6px;background:rgba(40,24,10,.88);color:#ffe08a;border-radius:8px;font-size:11px}
.card.legend{grid-column:1/3;background:linear-gradient(#2b3560,#171d3c);color:#ffe9b8;border-color:#d9b370}
.card.legend .th{background:radial-gradient(ellipse at 50% 85%,#6a4a7a,#171d3c 75%);height:132px}.card.legend .th img{max-height:128px}
.card.legend .d{color:#cfc4e8}.card.legend .c{color:#ffd37a}
.row{display:flex;align-items:center;gap:8px;margin:6px 0}
.kv{display:flex;justify-content:space-between;font-size:13px;padding:5px 0;border-bottom:1px dashed rgba(138,90,46,.35)}
.kv b{font-variant-numeric:tabular-nums}
h3{font:700 15px var(--serif);margin:12px 0 4px;color:var(--wood);letter-spacing:1px}
.meter{height:9px;border-radius:5px;background:#d8c8a0;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(90,60,30,.35);flex:1}.meter i{display:block;height:100%;background:var(--green)}
.meter.warn i{background:#e0a030}.meter.bad i{background:var(--red)}
.chips{display:flex;flex-wrap:wrap;gap:6px}.chips button{padding:6px 11px;border-radius:12px;background:var(--paper2);border:1.5px solid var(--edge);font:700 13px var(--serif)}.chips button.on{background:var(--gold)}
.sub{font-size:12px;color:var(--ink2)}
.setting{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed rgba(138,90,46,.35);font-size:14px}
.setting.col{flex-direction:column;align-items:stretch}.setting .sub{display:block}
.switch{width:46px;height:26px;border-radius:13px;background:#b9a78a;position:relative;flex-shrink:0;border:1.5px solid var(--edge)}
.switch::after{content:"";position:absolute;left:2px;top:2px;width:19px;height:19px;border-radius:50%;background:#fff3d6;transition:.2s}
.switch.on{background:var(--green)}.switch.on::after{left:22px}
input[type=text],input[type=password],select{font:inherit;padding:8px 10px;border-radius:10px;border:2px solid var(--edge);background:#fffaf0;color:var(--ink);width:100%;-webkit-user-select:text;user-select:text}
input[type=range]{width:100%;accent-color:var(--wood2)}
.taxrow{display:flex;align-items:center;gap:8px;font-size:13px;margin:5px 0}.taxrow span{width:42px;flex:none;white-space:nowrap;font:700 14px var(--serif)}.taxrow input{flex:1;min-width:0}.taxrow b{width:34px;text-align:right}
.list .item{padding:7px 10px;margin:5px 0;background:#fbf3de;border-left:4px solid var(--gold);border-radius:6px;font-size:13px;line-height:1.5}
.item.good{border-color:#6dbb55}.item.bad{border-color:var(--red)}.item.event{border-color:var(--blue)}
.chart{width:100%;height:84px;background:#fbf3de;border:1.5px solid rgba(138,90,46,.5);border-radius:8px}
.polcard{display:flex;gap:8px;align-items:center;padding:8px 10px;margin:6px 0;border:2px solid var(--edge);border-radius:12px;background:#fbf3de}
.polcard .t{flex:1;font-size:12px;color:var(--ink2)}.polcard .t b{display:block;font:700 15px var(--serif);color:var(--ink)}
.cx{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.cx .cc{aspect-ratio:1;border-radius:12px;border:2px solid var(--edge);background:#fbf3de;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;padding:3px;text-align:center;overflow:hidden}
.cx .cc img{max-width:90%;max-height:60%;object-fit:contain}.cx .cc.no img{filter:brightness(0) opacity(.35)}.cx .cc.no span{color:#a89478}
.pc{width:100%;border-radius:8px;border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.35);margin:6px 0}
/* modal */
#modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(15,10,30,.55);z-index:30}
.mcard{width:100%;max-width:400px;max-height:88vh;overflow-y:auto;background:var(--paper);border:3px solid var(--edge);border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.6);animation:pop .25s}
@keyframes pop{from{transform:scale(.9);opacity:0}}
.mhead{padding:10px 16px;background:linear-gradient(#a8442f,#8c3322);color:#fff3d6;font:700 14px var(--serif);letter-spacing:2px;border-radius:17px 17px 0 0}
.mbody{padding:14px 16px 16px}.mbody h2{margin:0 0 8px;font:700 21px/1.3 var(--serif)}.mbody p{margin:6px 0 12px;font:15px/1.6 var(--serif)}
.mbody .btn{display:block;width:100%;margin:8px 0;text-align:center}
.news{background:#efe6cf;background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.03) 0 2px,transparent 2px 4px)}
.news .mast{text-align:center;font:700 30px var(--serif);letter-spacing:8px;border-bottom:3px double var(--ink);padding:10px 0 4px}
.news .dl{display:flex;justify-content:space-between;font-size:11px;color:var(--ink2);padding:3px 2px;border-bottom:1px solid var(--ink2)}
.news .big{font:700 19px/1.4 var(--serif);margin:10px 0 6px}
.news .nums{display:flex;gap:6px;margin:8px 0}.news .nums div{flex:1;background:#fbf3de;border:1.5px solid var(--edge);border-radius:8px;text-align:center;padding:5px 2px;font-size:11px}.news .nums b{display:block;font:700 17px var(--sans)}
.news .item{font:13px/1.55 var(--serif);padding:5px 0;border-bottom:1px dotted var(--ink2)}
/* loading + start */
#loading{position:fixed;inset:0;z-index:50;background:#141a36 url(assets/img/wuyou_night.webp) center 20%/cover no-repeat;display:flex;align-items:flex-end;justify-content:center;transition:opacity .6s}
#loading::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(10,14,40,.1),rgba(10,14,40,.85) 78%)}
.ld{position:relative;text-align:center;padding-bottom:calc(60px + var(--sab));color:#ffe9b8;width:100%}
.ld h1{margin:0;font:700 44px var(--serif);letter-spacing:10px;text-shadow:0 2px 12px #000}.ld p{margin:4px 0 22px;font:16px var(--serif);letter-spacing:4px;opacity:.9}
.bar{width:60%;max-width:240px;height:8px;margin:0 auto 8px;border-radius:5px;background:rgba(255,255,255,.2);overflow:hidden}.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#e8b44c,#ffdf94)}
.ld small{opacity:.75}
#start{position:fixed;inset:0;z-index:40;background:#141a36 url(assets/img/wuyou_night.webp) center top/cover no-repeat;overflow-y:auto}
#start::before{content:"";position:fixed;inset:0;background:linear-gradient(rgba(10,14,40,.2),rgba(10,14,40,.92) 46%)}
.sw{position:relative;padding:calc(var(--sat) + 30px) 16px calc(var(--sab) + 24px);min-height:100%;display:flex;flex-direction:column}
.sw h1{margin:0;text-align:center;font:700 42px var(--serif);letter-spacing:10px;color:#ffe9b8;text-shadow:0 2px 12px #000}.sw .tag{text-align:center;color:#ffe9b8;font:15px var(--serif);letter-spacing:4px;margin:2px 0 220px}
.sw .panel{background:rgba(246,234,208,.97);border:3px solid var(--edge);border-radius:20px;padding:12px 14px 14px;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.maps{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}.mp{border:2.5px solid transparent;background:#fbf3de;border-radius:12px;padding:4px;text-align:center}.mp.on{border-color:var(--red);box-shadow:0 0 0 2px #f3c36a}
.mp img{width:100%;height:64px;object-fit:contain}.mp b{display:block;font:700 14px var(--serif)}.mp small{display:block;font-size:10.5px;line-height:1.3;color:var(--ink2);text-align:left}
.foot{text-align:center;font-size:11px;color:#ffe9b8;opacity:.7;margin-top:14px}
.about p{font:14px/1.7 var(--serif);margin:6px 0}.about table{font-size:11.5px;border-collapse:collapse;width:100%}.about td,.about th{border:1px solid rgba(138,90,46,.4);padding:3px 4px;text-align:left;vertical-align:top}
.hq{display:flex;align-items:center;gap:8px;padding:8px;margin:6px 0;background:#fbf3de;border:2px solid var(--edge);border-radius:12px}
.hq img{width:64px;height:54px;object-fit:contain}.hq .t{flex:1;font-size:12px;color:var(--ink2)}.hq b{display:block;font:700 15px var(--serif);color:var(--ink)}
.chatlog{max-height:150px;overflow-y:auto;margin:6px 0}.chatlog div{padding:5px 9px;margin:3px 0;border-radius:10px;font-size:13px;line-height:1.5}.chatlog .u{background:#d9ecc7;margin-left:30px}.chatlog .a{background:#fbf3de;border:1px solid rgba(138,90,46,.4);margin-right:30px}