/* V33: illustrated classic pixel surfaces. The artwork is local; labels stay live. */
@font-face{font-family:'Ark Pixel';src:url('/assets/ui-v33/ark-pixel-12px-proportional-zh_cn.otf.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
:root{--v33-navy:#082b72;--v33-blue:#158de9;--v33-cyan:#73ddff;--v33-gold:#ffda22;--v33-display:'Ark Pixel',Tahoma,'PingFang SC','Microsoft YaHei',sans-serif;--v31-ink:#082b72;--v31-deep:#062666;--v31-border:#093f92;--v31-soft:#d9f2ff;--v31-gold:#ffda22;--v31-frame:0 0 0 3px #75ddff,0 0 0 6px #0861bd,0 0 0 9px #082b72,5px 8px 0 7px #082b72;--ink:#082b72}
body{font-weight:600;color:#082b72}
body button{border-radius:0;transition:filter .12s,transform .1s}
body button:focus-visible{outline:3px solid #fff8b2;outline-offset:5px}
body button:disabled{opacity:.65}
body .gold-btn,body #turn-actions .gold-btn,body #modal-backdrop>.modal:not(.character-modal) .gold-btn{background:linear-gradient(#ffe657 0 8%,#ffda22 8% 88%,#f1af12 88%);border:3px solid #082b72;box-shadow:inset 3px 3px #fff7b0,inset -3px -3px #d69604,0 4px #082b72;border-radius:0;color:#082b72;font-weight:900}
body .quiet-btn,body #turn-actions .quiet-btn,body #modal-backdrop>.modal:not(.character-modal) .quiet-btn{background:linear-gradient(#eafaff,#c1eaff);border:3px solid #104f9c;box-shadow:inset 3px 3px white,inset -3px -3px #75c8f4,0 3px #082b72;border-radius:0;color:#082b72}
body header{padding:18px 24px;height:66px;background:none;align-items:flex-start;gap:12px;z-index:6}
body header .brand{display:flex;flex-direction:column;gap:0;position:relative;padding:0;width:226px;min-height:0;max-width:226px;background:none;border:0;box-shadow:none;overflow:visible;flex:none;align-items:center;isolation:isolate}
body header .brand-mark,body header .brand-mark:has(.v31-pixel-icon){display:block;position:relative;width:222px;height:120px;background:url('/assets/ui-v33/brand-skyline.png') center bottom/contain no-repeat;image-rendering:pixelated;margin:-7px 0 -37px;z-index:-1}
body header .brand-mark::before,body header .brand-mark .v31-pixel-icon{display:none}
body header .brand h1{font-family:var(--v33-display);font-size:40px;font-weight:900;color:#ffe247;line-height:1.25;letter-spacing:0;overflow:visible;white-space:nowrap;text-overflow:clip;max-width:none;text-shadow:3px 0 #073174,-3px 0 #073174,0 3px #073174,0 -3px #073174,3px 3px #073174,-3px -3px #073174,0 6px #073174;filter:drop-shadow(0 2px #fff9cd)}
body header .brand>#city-name{display:block;background:linear-gradient(#fffdf2,#c3ebff);font-family:var(--v33-display);font-size:18px;color:#082b72;border:3px solid #082b72;box-shadow:inset 3px 3px white,inset -3px -3px #59c4f6,0 4px #1166b4;line-height:1.3;margin-top:8px;padding:6px 12px;max-width:210px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body header .brand>#city-name::before{content:'◆';font-size:15px;color:#145ab0;margin-right:7px}
body header nav{gap:12px;align-items:flex-start}
body header .icon-btn,body header .compact-view-toggle{border:3px solid #073478;box-shadow:inset 3px 3px white,inset -3px -3px #88d7ff,0 4px #1585da,3px 6px #082b72;background:linear-gradient(#fffef2,#dcf3ff);width:48px;height:48px;min-height:48px;padding:0;border-radius:0}
body header .icon-btn .v31-pixel-icon{width:28px;height:28px}
body header .balance-pill{font-family:var(--v33-display);font-size:24px;padding:5px 12px;gap:8px;min-width:130px;min-height:48px;height:48px;color:white;background:linear-gradient(#236abb,#08428d);border:3px solid #082b72;box-shadow:inset 3px 3px #72d4ff,inset -3px -3px #198bea,0 4px #147bcc,3px 6px #082b72}
body header #balance{font-family:var(--v33-display);font-size:24px}
body header #balance-label{display:none}
body header .balance-pill .v31-pixel-icon{width:30px;height:30px}
body header #view-menu-btn{display:flex;align-items:center;justify-content:center}
body header #view-menu-btn>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
body header #view-menu-btn>i{display:none}
body header #view-menu-btn::before{content:'';width:28px;height:24px;background:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 24"%3E%3Cpath fill="%23082b72" d="M8 4h12v4h4v3h4v3h-4v3h-4v3H8v-3H4v-3H0v-3h4V8h4z"/%3E%3Cpath fill="%23effaff" d="M8 9h3v7H8zm10 0h3v7h-3z"/%3E%3Cpath fill="%234db9f6" d="M12 7h4v10h-4z"/%3E%3C/svg%3E') center/contain no-repeat;image-rendering:pixelated}
body .compact-view-menu{background:#d0efff;border:4px solid #082b72;box-shadow:inset 0 0 0 3px #5ccaff,4px 5px #082b72;padding:10px}
body .compact-view-menu button{font-weight:800;border:2px solid #328fc9;background:#eafaFF;margin-bottom:4px}
body .compact-view-menu button[aria-pressed=true]{background:#ffda22;color:#082b72}
body #loading{background:#d3efff;color:#082b72;font-family:var(--v33-display)}
body #loading>span{font-size:36px;color:#ffda22;text-shadow:3px 3px #082b72,-2px -2px #082b72}
body .loading-line{border:3px solid #082b72;height:18px;background:repeating-linear-gradient(90deg,#168ceb 0 16px,#8edaff 16px 20px)}
body .map-marker{font-family:var(--v33-display)}
body .map-marker>span:last-child{font-size:14px}
@media(min-width:1101px){body:not(:lang(zh)):not(:lang(ja)) header .brand h1{font-size:26px;letter-spacing:-1px}}
@media(max-width:1100px){body header{padding:14px 18px}body header .brand{width:210px;max-width:210px;flex-direction:row;align-items:center;gap:6px}body header .brand-mark,body header .brand-mark:has(.v31-pixel-icon){width:65px;height:52px;margin:-7px 0 0}body header .brand h1{font-size:27px}body header .brand>#city-name{display:none}body header nav{gap:9px}body:not(:lang(zh)):not(:lang(ja)) header .brand h1{font-size:18px}}
@media(max-width:700px){body header{height:58px;padding:8px 10px;gap:7px;align-items:flex-start}body header .brand{min-width:0;width:auto;max-width:none;flex:1;gap:0;padding:4px 0}body header .brand-mark,body header .brand-mark:has(.v31-pixel-icon){display:none}body header .brand h1{font-size:24px;text-shadow:2px 0 #073174,-2px 0 #073174,0 2px #073174,0 -2px #073174,2px 3px #073174}body header nav{gap:7px}body header .icon-btn,body header .compact-view-toggle{width:34px;height:38px;min-height:38px;border-width:2px}body header .icon-btn .v31-pixel-icon{width:23px;height:23px}body header .balance-pill{min-width:70px;min-height:38px;height:38px;border-width:2px;padding:4px 5px;gap:4px;font-size:18px}body header #balance{font-size:18px}body header .balance-pill .v31-pixel-icon{width:20px;height:20px}body header #view-menu-btn::before{width:24px;height:20px}body:not(:lang(zh)):not(:lang(ja)) header .brand h1{font-size:15px;white-space:normal;line-height:1.1}}
@media(max-width:380px){body header{padding:8px;gap:4px}body header nav{gap:5px}body header .brand h1{font-size:20px}body header .icon-btn,body header .compact-view-toggle{width:29px}body header .balance-pill{min-width:57px}body header .balance-pill .v31-pixel-icon{display:none}body[data-game-state=playing] header .brand{display:none}}
@media(max-height:500px) and (orientation:landscape){body header{padding:7px 12px;height:50px}body header .brand-mark,body header .brand-mark:has(.v31-pixel-icon){display:none}body header .brand h1{font-size:24px}body header .icon-btn,body header .compact-view-toggle,body header .balance-pill{height:36px;min-height:36px}body header .icon-btn,body header .compact-view-toggle{width:34px}body header .balance-pill{font-size:18px}body header #balance{font-size:18px}}