/* 湖畔镇 · 现代动画感 / 休闲奇幻 */
:root { --gold:#e8c98a; --gold2:#dcb575; --gold-dark:#947646; --ink:#344642; --ink2:#61716a; --parch:#f5efdf; --ui-font:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; --title-font:"Songti SC","STSong",serif; --kai-font:var(--ui-font); --lake:#376c7c; --paper:#f7f1e4; --line:rgba(121,106,72,.26); }
html,body,#root { background:#d3ddd0; }
button { font:inherit; cursor:pointer; }
button:focus-visible,[tabindex]:focus-visible { outline:3px solid #75baca; outline-offset:3px; }
#stage { background:#c1dbdc; }
#view { background:#c1dbdc; }
.frame { background:rgba(34,57,61,.97); border:1px solid #9bafac; border-radius:18px; box-shadow:0 18px 50px #142e3540,inset 0 1px #ffffff20; }
.frame::before { border:0; }
.parchment { background:#f5efdf; color:var(--ink); box-shadow:none; border:1px solid var(--line); border-radius:12px; }
.btn,#title .menu .btn,#ending .btn { border-image:none; border:1px solid #7297a0; border-radius:10px; background:linear-gradient(#4a8190,#356775); box-shadow:0 3px 0 #274e5b, inset 0 1px #ffffff30; color:#fff9ed; text-shadow:none; font-weight:600; min-height:40px; transition:transform .16s,filter .16s; }
.btn:hover { filter:brightness(1.1); transform:translateY(-1px); }
.btn:active { border-image:none; transform:translateY(2px); box-shadow:inset 0 1px #ffffff20; }
.btn.grey { background:#e7e9df; border-color:#bcc6be; color:#3e605f; filter:none; box-shadow:0 2px 0 #b4c3bb; }
.btn.dis { opacity:.5; filter:grayscale(.6); }
.icon { border-radius:8px; box-shadow:0 0 0 1px #cab58b80; }
.xbtn { top:10px;right:10px;width:32px;height:32px;line-height:28px;background:#dce5dc;color:#395b60;border:1px solid #adc3bd;box-shadow:none;text-shadow:none; }
.bar { border:0; background:#24404733; border-radius:8px; }
.bar.hp>i { background:linear-gradient(90deg,#538b75,#86b893); }
.bar.mana>i { background:linear-gradient(90deg,#4c83a3,#8bbdc9); }
.bar.red>i { background:linear-gradient(90deg,#ae5c52,#db9477); }
.bar>span { text-shadow:0 1px 2px #203839; }
#player { left:18px;top:15px;width:242px;height:83px;background:rgba(250,246,233,.96);border:1px solid #fffbec;border-radius:18px;box-shadow:0 5px 18px #193c4324; }
#player .pf-frame { display:none; }
#player .pf-por { left:9px;top:8px;width:64px;height:64px;border-radius:50%;background-image:url(../assets/img/cozy/solomon.png);background-size:240% auto;background-position:49% 4%;border:2px solid #d2b97e;box-shadow:none; }
#player .pf-name { left:83px;top:9px;width:148px;text-align:left;color:#3b514c;font-size:16px;text-shadow:none; }
#player .bar { left:83px;width:145px;height:13px;background:#d3dccb; }
#player .b1 { top:36px; } #player .b2 { top:55px; }
#player .bar>span { line-height:13px;font-size:10px; }
#player .pf-lvl { left:48px;top:57px;width:25px;height:25px;line-height:23px;background:#456c70;color:#fff5dd;border:2px solid #f5ecd5;font-size:12px; }
#resbar { left:277px;top:17px;right:18px;gap:4px;height:45px; }
.rc { background:rgba(250,247,234,.95);border:1px solid #ffffef;border-radius:12px;box-shadow:0 3px 12px #28434415;height:42px;padding:2px 9px 2px 5px;gap:5px;min-width:0;flex:1; }
.rc .icon { width:28px;height:28px;border-radius:50%;box-shadow:none; }
.rc b { color:#36524d;text-shadow:none;font-size:16px; }
.rc small { color:#64766a;font-size:9px; }
#buffs { top:72px;left:279px; }
#crisis { top:72px;left:279px;right:auto;max-width:460px;padding:6px 14px;border-radius:10px;background:rgba(251,241,216,.96);color:#8e5b3f;font-size:13px;box-shadow:0 3px 12px #35443718;text-shadow:none; }
#side { top:115px;right:18px;bottom:95px;width:246px;border-radius:17px;padding:12px;background:rgba(33,60,65,.9);border:1px solid #b2c6bd70;box-shadow:0 8px 25px #16333c26;backdrop-filter:blur(12px);gap:9px; }
#side.hide { transform:translateX(285px); }
#sidetab { right:266px;top:128px;width:24px;height:42px;background:#f4eedb;color:#3c666c;border-radius:9px 0 0 9px;box-shadow:none;border:1px solid #c9d3c3; }
#sidetab.hide { right:0; }
#mm { height:147px; }
#mm .zone { background:none;box-shadow:none;color:#f0e4c6;top:0;font-size:13px; }
#mm .disk { width:102px;height:102px;top:25px;margin-left:-51px;border:3px solid #d9c48c;box-shadow:0 0 0 4px #ffffff15;background-size:1428px 934px;background-position:-314px -323px; }
#mm .ring,#mm .sun { display:none; }
#mm .clock { background:#183c44;border:1px solid #afc3b440;box-shadow:none;border-radius:7px;bottom:-1px;font-size:11px;padding:3px 10px; }
#mm .mail { left:8px;top:89px;width:30px;height:30px;box-shadow:0 0 0 2px #d3bd8c; }
#mm .def { transform:scale(.8);right:-4px;top:83px; }
#pausebtn { left:1px;top:29px;background:#dce6df;color:#365d66;box-shadow:none;border-radius:8px; }
#speed { right:0;top:25px;gap:5px; }
#speed b { background:#e7ecdf;color:#4a6464;box-shadow:none;border-radius:6px; }
#speed b.on { background:#d9bb7d;color:#304e55; }
.sec-t { color:#e4cd9d;border-color:#bbcfbb30;font-size:13px; }
.sec-t small { color:#b9c9bf; }
.thr { background:#ffffff05;border-bottom:1px solid #ffffff10; }
.thr .icon { box-shadow:none; }
#tracker { font-size:12px; }
#bottombar { left:18px;right:18px;bottom:12px;height:66px;border-radius:16px;background:rgba(249,246,233,.97);box-shadow:0 5px 25px #1a3a4026;border:1px solid #fff9eb;padding:6px 10px;gap:10px; }
.ab { width:54px;height:48px;border-radius:9px;box-shadow:0 0 0 1px #c2c9b8; background-size:29px 29px;background-position:center 2px;background-repeat:no-repeat;background-color:#e2e5d7; }
.ab:hover { transform:translateY(-3px);filter:brightness(1.06); }
.ab .nm { bottom:0;left:0;right:0;background:#eef0e3e8;color:#3c5a57;text-shadow:none;font-size:10px;border-radius:0 0 8px 8px;line-height:17px; }
.ab .hk { color:#6e7b6c;font-size:9px;text-shadow:none;right:3px;top:0; }
.ab .badge { background:#be7460;box-shadow:0 0 0 2px #fbf4df;height:18px;min-width:18px;line-height:18px;font-size:10px;right:-5px;top:-4px; }
.ab .badge.y { background:#638c7c; }
#viewbtn { width:114px;height:48px;border-radius:10px;background:#456f7e;box-shadow:none;border:1px solid #6c95a0;gap:7px; }
#viewbtn .icon { width:29px;height:29px;border:0;box-shadow:none;border-radius:6px; }
#viewbtn b { font-size:14px;color:#fff6e2;text-shadow:none; }
#buildbtn,#collectbtn { min-height:40px;min-width:103px;font-size:14px; }
#collectbtn { background:#c38b56;border-color:#d8ad75;box-shadow:0 3px 0 #9d714a;color:#fff8e9; }
#chat { left:19px;bottom:86px;width:325px;height:63px;background:rgba(32,56,58,.64);border:1px solid #c1cbbb30;border-radius:10px;padding:6px 9px;backdrop-filter:blur(6px); }
#chat .ln { font-size:11px;line-height:16px; }
#chat-tab { left:22px;bottom:151px;background:#eaeedee8;color:#436359;border-radius:6px;font-size:10px;padding:3px 10px; }
#chat.big { height:260px; } #chat.big+#chat-tab { bottom:348px; }
#camera-controls { position:absolute;left:19px;top:112px;display:flex;gap:3px;pointer-events:auto;background:rgba(249,246,233,.95);padding:4px;border-radius:10px;box-shadow:0 3px 12px #23424b20; }
#camera-controls button { border:0;border-radius:7px;padding:7px 12px;background:transparent;color:#4f6763;font-size:12px;min-height:33px; }
#camera-controls button.on { background:#527e87;color:#fff8e8; }
#camera-controls button:hover { background:#bdd3c9;color:#274d58; }
#camera-controls[hidden] { display:none; }
.tooltip { background:rgba(34,59,64,.97);border:1px solid #b9c8b6;border-radius:13px;box-shadow:0 8px 25px #1a343738;padding:14px; }
.wl { text-shadow:0 1px 3px #23483e,0 0 5px #23483e;font-family:var(--ui-font); }
.lottag { background:#fff4d8;color:#416b62;box-shadow:0 2px 8px #274d4933;border:1px solid #c8d4ba;padding:5px 11px;border-radius:10px; }
.lottag b { background:#6b9a7b; }
.np>span { text-shadow:0 1px 3px #123c40,0 0 4px #123c40; }
.tbub .bub { background:#fff5dd;box-shadow:0 2px 10px #24454130;border:1px solid #d1ba89; }
.win { border-radius:18px; }
.win .wh { background:none;border-bottom:1px solid #d2d8be30;text-shadow:none; }
.tab { border-radius:8px;box-shadow:none; }
.tab.on { background:#d4e3d2;color:#375c61; }
.pcol,.roster,.mlist,.aq { background:rgba(11,39,43,.3);box-shadow:none;border:1px solid #c0d1c51c;border-radius:12px; }
.rr.h { background:#294b50;color:#e4c994; }
.bc { border:1px solid #d8ceae;border-radius:12px; }
.letter { border-radius:12px; }
.choice { background:#e5eadb;box-shadow:none;border:1px solid #bdcbb8;border-radius:8px;color:#3d665d; }
.choice:hover { background:#d4e2ce; }
#dlg-layer { background:#15353d38;backdrop-filter:blur(2px); }
.dlg { width:790px;bottom:94px;min-height:200px;border-radius:20px;background:#faf4e4;border:1px solid #e8dcc0; }
.dlg .dp { width:110px;height:110px;left:22px;top:28px;border:3px solid #d4bb83;box-shadow:0 6px 15px #344d4520;background-color:#dbe6d7; }
.dlg .dp[style*="cozy/solomon"] { background-size:240% auto;background-position:49% 4%; }
.dlg .dbody { margin:0;border:0;padding:23px 28px 22px 159px;background:transparent; }
.dlg .dn { color:#986a3c;font-size:20px; }
.dlg .dt { font-size:18px;line-height:1.75;color:#3d5048; }
.dlg .dnext { color:#55766e;font-size:13px; }
#tut .tt { border-radius:12px;background:#f9f0d9;color:#435d54;border:1px solid #c3cfb8;box-shadow:0 6px 22px #23463c26;text-shadow:none; }
.toast { border-radius:12px;background:#2e5760ed;border:1px solid #abc5bc80;box-shadow:0 4px 14px #24454d33; }
.bt-top,.bc2,.bt-reinf,#siegehud { background:#274d58ed;box-shadow:0 6px 22px #16323d33;border:1px solid #b3c9bb80;border-radius:12px; }
.bc2.on { background:#5a8a8c; }
.bt-top .bs b,.bc2 b,#bt-result h2 { text-shadow:none; }
.bt-top .icon { box-shadow:0 0 0 2px #d3bb85; }
.bt-reinf .rf { background:#39616a;border:1px solid #789b91;border-radius:8px; }
#bt-result .br { border-radius:20px; }
.army-portrait { float:right;width:120px;height:142px;margin:-4px 0 8px 12px;border-radius:14px;background:#d9e6d6 url(../assets/img/cozy/guard.png) center 4% / 145% auto;border:1px solid #a9bdad; }
#title { align-items:flex-start;justify-content:center;padding:40px 7%;background:#bfd3c5; }
#title .bg { background:url(../assets/img/cozy/lakeshire.png) center / cover;filter:none;transform:none;animation:cozy-reveal 1.2s ease-out; }
#title .fog { background:linear-gradient(90deg,rgba(23,51,56,.89),rgba(27,56,58,.65) 29%,rgba(27,56,58,0) 65%);animation:none;inset:0;opacity:1; }
#title .logo { position:relative;text-align:left;margin:0;z-index:1; }
#title .wowlogo { display:none; }
#title .logo .ep { font:500 13px var(--ui-font);letter-spacing:5px;color:#e4c98c;margin-bottom:17px;text-shadow:none; }
#title .logo h1 { font:700 76px/1.2 var(--title-font);letter-spacing:7px;color:#fff5db;margin:0 0 18px;text-shadow:0 4px 22px #17373e40;background:none;-webkit-text-fill-color:initial; }
#title .logo .sub { max-width:350px;font:15px/1.9 var(--ui-font);color:#e1e8da;letter-spacing:1px;text-shadow:none; }
#title .menu { position:relative;margin:32px 0 0;gap:12px;z-index:2;width:250px; }
#title .menu .btn { width:250px;min-height:49px;background:#f2e4bf;color:#3e6266;border-color:#ffefc9;box-shadow:0 4px 0 #a89665;font-size:17px; }
#title .tap { position:relative;bottom:auto;margin-top:34px;left:auto;transform:none;color:#fff2cf;font-size:16px;text-shadow:none;z-index:2; }
#title .foot { font-size:10px;color:#e1e8dccc;left:7%;right:auto;bottom:18px;text-align:left; }
#loading { background:#b3cbbd;padding-bottom:54px; }
#loading .bg { background-image:url(../assets/img/cozy/lakeshire.png);filter:brightness(.72); }
#loading .lb { width:380px; }
#loading .bar { height:8px;background:#173e4590;box-shadow:none; }
#loading .bar>i { background:#eed29b; }
#loading .lt { color:#fff5db;font-size:18px; }
#loading .tipx { color:#fff8ea;text-shadow:0 1px 4px #17373c; }
#rotate { background:#dbe6d8;color:#426a70; }
#bottombar { right:18px!important; }
#title .logo h1 { filter:none; }
#win-layer { background:rgba(22,48,53,.42);backdrop-filter:blur(3px); }
.win-h .tab { background:#3d6168;box-shadow:none;color:#dce9df;border-radius:8px 8px 0 0;padding:9px 16px; }
.win-h .wp[style*="cozy/solomon"] { background-size:240% auto;background-position:49% 4%; }
.qlist { background:#1d41464d;border:1px solid #bed2c526;box-shadow:none;border-radius:12px; }
.qgrp { color:#dac391;border-bottom:1px solid #bccbbd30;padding-bottom:7px; }
.qi { border-radius:8px;min-height:49px; }
.qi.on { background:#799d874d;box-shadow:inset 3px 0 #d8ba7a; }
.qi .qt small { color:#b5c6bd; }
.seg { border-radius:8px;box-shadow:0 0 0 1px #b7c6b4; }
.seg b { background:#e5eadb;color:#49695e;border-color:#c5ceba; }
.seg b.on { background:#5d8272;color:#fff5da; }
.chk i { border-radius:6px;box-shadow:inset 0 0 0 1px #a8baa0;background:#dce5d2; }
.mi { border-radius:8px; }.mi.on { background:#6d958350; }
.mi.unread::after { background:#b77b5e;border-radius:5px; }
.tone { background:#e9eddf;box-shadow:none;border:1px solid #c7d0b9;border-radius:9px; }
.tone b { color:#3e6a65; }
.scroll::-webkit-scrollbar { width:6px; }.scroll::-webkit-scrollbar-thumb { background:#819d8e;border-radius:6px; }.scroll::-webkit-scrollbar-track { background:transparent; }
#tip .qty i { background:#557f82;box-shadow:none;border-radius:7px;color:#fff4d8; }
#siegehud .act { background:#416973;border:1px solid #91aca0;box-shadow:none;border-radius:9px; }
#siegehud.dragon { box-shadow:0 8px 30px #18364040;border-color:#c29b76; }
#bossframe .bn { background:#476570;border-radius:8px;color:#f3e1be;box-shadow:none; }
#bossframe .bp { box-shadow:0 0 0 3px #d0bb8b; }
#bossframe .bar { box-shadow:none; }
#ending { background:rgba(25,51,55,.8);backdrop-filter:blur(7px); }
#ending .card { border-radius:22px; }
#ending .el { border-radius:14px; }
#ending .el h1 { color:#416c67; }
#ending .ttl { color:#e5c692;text-shadow:none; }
#bt-banner { font-size:36px;letter-spacing:2px;text-shadow:0 3px 12px #23413e; }
.li { background:#294b5080;border:1px solid #8eaa9a60;border-radius:9px; }
.li img,.li .icon { width:34px;height:34px;border-radius:7px;border-color:#b8c7ae; }
.wl .icon { width:16px;height:16px;display:inline-block;vertical-align:middle; }
.tbub .icon { width:22px;height:22px;display:inline-block;vertical-align:middle; }
#mm-mail { background-image:url(../assets/img/cozy/icons.png)!important;background-size:400%!important;background-position:66.6667% 100%!important; }
#mm .def { background-image:url(../assets/img/cozy/icons.png)!important;background-size:400%!important;background-position:100% 33.3333%!important; }
.nphp { background:#294846;border:0;border-radius:4px;overflow:hidden; }
.nphp i { background:#8cb993; }
#tracker { min-height:0;overflow-y:auto;padding-right:3px; }
.rc small.p { color:#477c56; } .rc small.n { color:#a14f46; }
#mm .def { right:-1px;top:114px;width:28px;height:30px; }
.win-h .wp { width:48px;height:48px;left:16px;top:11px;box-shadow:0 0 0 2px #cdb982; }
.win-h { height:65px;padding-left:80px; }
.win-h h3 { text-shadow:none; }
.win-h .tab.on { background:#cbdccd;color:#365f65; }
@keyframes cozy-reveal { from { opacity:.4;transform:scale(1.035); } to { opacity:1;transform:scale(1); } }
@keyframes abglow { 50% { box-shadow:0 0 0 3px #dabd7e,0 0 16px #ead3a050; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important;transition:none!important; } }