/* C · City miniature: warm stone, jade enamel and small brass bevels. */
:root {
  --v35-ink:#183f46; --v35-teal:#21676a; --v35-paper:#f5f1df; --v35-gold:#edc65b;
  --v33-display:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --v33-navy:#183f46; --v33-blue:#317c7e; --v33-cyan:#9ec9bd; --v33-gold:#edc65b;
  --v31-ink:#183f46; --v31-muted:#617370; --v31-border:#356b6b; --v31-deep:#183f46;
  --v31-sky:#a2cbc0; --v31-paper:#f8f5e9; --v31-soft:#e4ebe0; --v31-gold:#edc65b;
  --v31-frame:inset 0 0 0 1px #d7ead8,0 2px 0 #153e46,0 4px 9px #153e4633;
  --v31-small-frame:inset 0 1px #fffdf4,0 2px 0 #274e50,0 3px 6px #173e4633;
  --ink:#183f46; --muted:#617370; --line:#b6c6b7; --panel:#f8f5e9; --gold:#96691d;
}
body {color:var(--v35-ink);font-family:var(--v33-display);font-weight:500;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
body button,body input,body select {font-family:var(--v33-display);border-radius:4px}
body button {transition:filter .12s,transform .1s;letter-spacing:0}
body button:hover:not(:disabled) {filter:brightness(1.05)}
body button:active:not(:disabled) {transform:translateY(1px)}
body button:focus-visible,body input:focus-visible,body select:focus-visible {outline:2px solid #e8bd50;outline-offset:3px}
body button:disabled {opacity:.58}
body input,body select {color:#183f46;background:#fffdf3;border:1px solid #8baba0;box-shadow:inset 0 2px 3px #173e4610;min-height:36px;padding:8px 10px;font-size:14px}
body input::placeholder {color:#7b8880}
body input[type=range] {accent-color:#287478;box-shadow:none}
body a {color:#21676a}
body .gold-btn,body #turn-actions .gold-btn,body #modal-backdrop>.modal:not(.character-modal) .gold-btn {
  background:linear-gradient(135deg,#fff1a4 0 5px,transparent 5px),linear-gradient(315deg,#c49134 0 5px,transparent 5px),linear-gradient(#f9da76,#edc24e);
  color:#193e45;border:1px solid #957737;box-shadow:inset 0 0 0 2px #ffe9a0,inset 0 -4px #d5a640,0 2px 0 #6d6745,0 3px 5px #173e4626;border-radius:4px;font-weight:750;min-height:40px;padding:8px 13px;line-height:1.35;
}
body .quiet-btn,body #turn-actions .quiet-btn,body #modal-backdrop>.modal:not(.character-modal) .quiet-btn {
  background:linear-gradient(135deg,#fefdf6 0 5px,transparent 5px),linear-gradient(#fbf9ef,#e4e7da);
  color:#20494e;border:1px solid #829f94;box-shadow:inset 0 0 0 2px #fffdf1,inset 0 -3px #c9d3c4,0 2px 0 #526b63,0 3px 5px #173e461a;border-radius:4px;font-weight:650;min-height:38px;padding:8px 11px;line-height:1.35;
}
body .gold-btn:hover:not(:disabled),body #turn-actions .gold-btn:hover:not(:disabled),body #modal-backdrop>.modal:not(.character-modal) .gold-btn:hover:not(:disabled) {background-color:#f7d365}
body .quiet-btn:hover:not(:disabled),body #turn-actions .quiet-btn:hover:not(:disabled),body #modal-backdrop>.modal:not(.character-modal) .quiet-btn:hover:not(:disabled) {background-color:#f0f2e7}
body .text-btn {color:#396d6b;font-size:13px}
body .text-btn:hover:not(:disabled) {color:#193e45;background:#dde9dd}
body header {height:54px;padding:16px 22px;gap:10px;align-items:flex-start}
body header .brand {width:158px;max-width:158px;min-height:0;padding:0;gap:0;align-items:center;flex-direction:column}
body header .brand-mark,body header .brand-mark:has(.v31-pixel-icon) {display:block;width:152px;height:88px;margin:-6px 0 -28px;image-rendering:auto}
body header .brand h1 {font-family:var(--v33-display);font-size:29px;font-weight:850;line-height:1.2;letter-spacing:-1px;color:#ffdf67;text-shadow:1px 0 #244c4d,-1px 0 #244c4d,0 1px #244c4d,0 -1px #244c4d,0 3px #244c4d;filter:drop-shadow(0 1px #fff0b7)}
body header .brand>#city-name {font-family:var(--v33-display);font-size:13px;color:#204c53;line-height:1.3;max-width:146px;padding:4px 10px;margin-top:7px;background:linear-gradient(#fffaf0,#ecebdd);border:1px solid #34696b;border-radius:3px;box-shadow:inset 0 0 0 1px #fffef4,0 2px #1b484c}
body header .brand>#city-name::before {content:'◆';font-size:10px;color:#286c70;margin-right:5px}
body header nav {gap:8px}
body header .icon-btn,body header .compact-view-toggle {color:#204d53;width:38px;height:38px;min-height:38px;padding:0;background:linear-gradient(#fffdf2,#e3e8dc);border:1px solid #34696b;border-radius:4px;box-shadow:inset 0 0 0 2px #fffced,inset 0 -4px #b8cfc0,0 2px #1a4a4d,0 3px 6px #153e4633}
body header .icon-btn .v31-pixel-icon {width:22px;height:22px}
body header .balance-pill {font-family:var(--v33-display);font-size:18px;padding:4px 10px;gap:6px;min-width:108px;min-height:38px;height:38px;border:1px solid #214e53;border-radius:4px;background:linear-gradient(#367c7d,#20585e);box-shadow:inset 0 0 0 1px #86b5a9,inset 0 -3px #1c4d52,0 2px #163d43,0 3px 6px #163d4333;color:#fff8df}
body header #balance {font-family:var(--v33-display);font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}
body header .balance-pill .v31-pixel-icon {width:25px;height:25px}
body header #view-menu-btn::before {width:22px;height:22px;background:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M2 12Q12-1 22 12Q12 25 2 12Z" fill="%23f5f1df" stroke="%23214e53" stroke-width="2"/%3E%3Cellipse cx="12" cy="12" rx="4" ry="5" fill="%23214e53"/%3E%3Ccircle cx="13" cy="10" r="1.3" fill="%23f5f1df"/%3E%3C/svg%3E') center/contain no-repeat;image-rendering:auto}
body .compact-view-menu {padding:8px;background:linear-gradient(#f5f2e3,#e5e9db);border:2px solid #397474;border-radius:5px;box-shadow:inset 0 0 0 1px #fffbe9,0 4px 10px #163d4333;color:#204c53}
body .compact-view-menu button {border:1px solid #a1b6a4;background:#f6f6e9;color:#204c53;font-size:13px;font-weight:650;margin-bottom:4px;min-height:34px}
body .compact-view-menu button[aria-pressed=true] {background:#efcf79;color:#20434a;border-color:#ac914d}
body #loading {background:#e6edde;color:#204c53;font-family:var(--v33-display)}
body #loading>span {font-size:27px;color:#225b60;text-shadow:0 2px #faf3d7}
body .loading-line {height:10px;border:1px solid #306b6c;border-radius:2px;background:repeating-linear-gradient(90deg,#367d78 0 16px,#a6c9b7 16px 20px);box-shadow:0 2px #c1d2bf}
body .connection-banner {background:#f7efcf;border:1px solid #ac914d;box-shadow:0 3px 8px #163d4326;font-size:12px}
body .connection-dot {border-radius:50%;background:#b29543;box-shadow:none}
body .v31-pixel-icon {image-rendering:auto}
body .map-marker {--marker:#316d71;font-family:var(--v33-display);font-size:11px;height:27px;width:83px;gap:4px;border:1px solid #387576;border-radius:3px;background:linear-gradient(#fffcf0,#e8eddf);color:#22575d;box-shadow:inset 0 0 0 1px #fffaf1,0 2px 0 #2c5a5d,0 3px 4px #193e4526}
body .map-marker>span:last-child {font-size:11px}
body .map-marker--shop {--marker:#31776b;background:#e8efe0;color:#256254;border-color:#4e8974}
body .map-marker--event {--marker:#8464ac;background:#f0eaf4;color:#725099;border-color:#9d86b6}
body .map-marker:hover,body .map-marker:focus-visible,body .map-marker.is-located {background:#fff9e3;color:#245258;outline:2px solid #d3b65e;outline-offset:2px}
body .map-marker-icon {width:12px;font-size:12px}
body .map-marker--shop .map-marker-icon:after {background:#e8efe0}
body .map-marker-line {height:1px;background:#427a76;box-shadow:0 1px #e6efdb}
body .map-marker-line:before {border-radius:50%;background:#ead179;box-shadow:0 0 0 1px #3c6d6b}
body .map-marker-line--shop {background:#4e8974}body .map-marker-line--event {background:#9d86b6}
body .player-locator {background:#efce70;color:#22484b;border:1px solid #997e36;border-radius:3px;font:750 11px var(--v33-display);box-shadow:0 2px 3px #244c4d33}
body .player-locator:after {background:#efce70}
body ::-webkit-scrollbar-thumb {background:#91afa0;border-radius:4px}body ::-webkit-scrollbar-track {background:#e8eddf}
@media(min-width:1101px){body:not(:lang(zh)):not(:lang(ja)) header .brand h1 {font-size:20px;letter-spacing:-.5px}}
@media(max-width:1100px){
  body header {padding:12px 16px}
  body header .brand {width:178px;max-width:178px;flex-direction:row;gap:5px}
  body header .brand-mark,body header .brand-mark:has(.v31-pixel-icon) {width:48px;height:42px;margin:-4px 0 0}
  body header .brand h1 {font-size:24px}body header .brand>#city-name {display:none}
  body:not(:lang(zh)):not(:lang(ja)) header .brand h1 {font-size:17px}
}
@media(max-width:700px){
  body header {padding:8px 10px;height:48px;gap:6px}
  body header .brand {width:auto;max-width:none;min-width:0;flex:1;padding:5px 0;gap:0}
  body header .brand-mark,body header .brand-mark:has(.v31-pixel-icon) {display:none}
  body header .brand h1 {font-size:22px;letter-spacing:-.7px;text-shadow:1px 0 #244c4d,-1px 0 #244c4d,0 1px #244c4d,0 -1px #244c4d,0 2px #244c4d}
  body header nav {gap:6px}
  body header .icon-btn,body header .compact-view-toggle {width:32px;height:34px;min-height:34px}
  body header .icon-btn .v31-pixel-icon {width:20px;height:20px}
  body header .balance-pill {min-width:68px;height:34px;min-height:34px;padding:4px 5px;gap:4px}
  body header #balance {font-size:15px}body header .balance-pill .v31-pixel-icon {width:19px;height:19px}
  body:not(:lang(zh)):not(:lang(ja)) header .brand h1 {font-size:15px;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:19px}body header .balance-pill {min-width:55px}body header .balance-pill .v31-pixel-icon {display:none}}
@media(max-height:500px) and (orientation:landscape){body header {padding:6px 12px;height:44px}body header .brand-mark,body header .brand-mark:has(.v31-pixel-icon) {display:none}body header .brand h1 {font-size:22px}body header .icon-btn,body header .compact-view-toggle,body header .balance-pill {height:32px;min-height:32px}body header .icon-btn,body header .compact-view-toggle {width:32px}body header #balance {font-size:15px}}
@media(prefers-reduced-motion:reduce){body button {transition:none}}