/* A shallow parchment tray keeps resource totals readable over city artwork. */
body.game-capital-view .resource-bar {
  --resource-edge:#9b673b;
  --resource-ornament:url('/assets/bulgarian-embroidery-line.svg');
  --resource-ornament-size:72px 14px;
  isolation:isolate;
  top:0;
  padding:12px 34px 23px;
  box-sizing:border-box;
  gap:16px;
}
body.game-capital-view .resource-bar::before,
body.game-capital-view .resource-bar::after {
  content:'';
  position:absolute;
  pointer-events:none;
  clip-path:polygon(0 0,100% 0,calc(100% - 24px) 100%,24px 100%);
}
body.game-capital-view .resource-bar::before {
  inset:0;
  z-index:-2;
  background:var(--resource-edge);
}
body.game-capital-view .resource-bar::after {
  inset:2px;
  z-index:-1;
  background-color:#f3dfbd;
  background-image:var(--resource-ornament),url('/assets/empire-parchment.webp');
  background-position:center bottom 4px,center;
  background-size:var(--resource-ornament-size),cover;
  background-repeat:repeat-x,no-repeat;
  box-shadow:inset 0 0 12px #aa713b38;
}
body.game-capital-view .resource-card strong {
  color:#21170f;
  -webkit-text-stroke:0;
  text-shadow:none;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
body.game-capital-view .resource-card img {
  filter:drop-shadow(0 1px 1px #65462b55);
}
body.game-capital-view[data-game-nation="Bulgarians"] .resource-bar {
  --resource-edge:#934329;
}
body.game-capital-view[data-game-nation="Russians"] .resource-bar {
  --resource-edge:#9a792c;
  --resource-ornament:url('/assets/russian-floral-line.svg');
}
body.game-capital-view[data-game-nation="Turks"] .resource-bar {
  --resource-edge:#27748a;
  --resource-ornament:url('/assets/turkish-tulip-line.svg');
}
body.game-capital-view[data-game-nation="Persians"] .resource-bar {
  --resource-edge:#92732c;
  --resource-ornament:url('/assets/persian-arabesque-line.svg');
}
body.game-capital-view[data-game-nation="Greeks"] .resource-bar {
  --resource-edge:#1763a4;
  --resource-ornament:url('/assets/greek-meander-clean.svg');
  --resource-ornament-size:26px 14px;
}
body.game-capital-view[data-game-nation="Romans"] .resource-bar {
  --resource-edge:#a87532;
  --resource-ornament:url('/assets/roman-laurel-line.svg');
}
@media(max-width:900px) {
  body.game-capital-view .resource-bar {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    width:max-content;
    max-width:calc(100vw - 130px);
    gap:6px 12px;
    padding:10px 28px 23px;
  }
  body.game-capital-view .resource-card {justify-content:center}
}
@media(max-width:700px) {
  body.game-capital-view .resource-bar {
    top:88px;
    width:calc(100vw - 16px);
    max-width:560px;
    padding:10px 20px 23px;
    gap:6px;
  }
  body.game-capital-view .resource-card {min-width:0;gap:3px}
  body.game-capital-view .resource-card img {width:19px;height:19px}
  body.game-capital-view .resource-card strong {font-size:clamp(11px,3.1vw,14px)}
  body.game-capital-view .population-card strong {font-size:clamp(10px,2.8vw,13px)}
}