/* Village interface: charcoal green, warm ivory and restrained brass. */
:root {
  --panel: rgba(22, 33, 32, .94);
  --panel-2: rgba(34, 47, 44, .97);
  --panel-deep: rgba(15, 25, 25, .98);
  --line: rgba(190, 177, 135, .22);
  --line-strong: rgba(219, 191, 127, .58);
  --gold: #d0b477;
  --gold-bright: #efce8e;
  --parch: #f0ebdb;
  --parch-dim: #c0c7b8;
  --parch-faint: #9fae9f;
  --ok: #a2cb99;
  --bad: #eb927e;
  --radius: .8rem;
  --shadow: 0 10px 30px #08141440, 0 2px 5px #0003;
}
.panel {
  background: linear-gradient(145deg, #b1cba508, transparent 60%), var(--panel);
  box-shadow: var(--shadow), inset 0 1px #f6e9c00c;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
button:focus-visible, a:focus-visible, [tabindex]:focus-visible, input:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}
.btn { border-radius: .45rem; background: #d5dfc509; min-height: 2rem; }
.btn:hover:not(:disabled) { background: #d5dfc514; }
.btn-gold { background: linear-gradient(#eed39a, #c2a066); color: #202b27; }
.btn-gold:hover:not(:disabled) { background: linear-gradient(#f5dfad, #d0ae74); color: #202b27; }
.btn-ghost { background: transparent; }
.btn-danger:hover:not(:disabled) { background: #d1553f24; }
.topbar { top: .8rem; left: 1rem; right: 1rem; height: 4.3rem; padding: .55rem .8rem; gap: 1rem; }
.tb-crest { display: flex; align-items: center; gap: .65rem; text-shadow: none; letter-spacing: .15em; }
.crest-mark {
  display: grid; place-items: center; width: 2.6rem; height: 2.9rem;
  border: 1px solid var(--gold); border-radius: .25rem .25rem 1.2rem 1.2rem;
  font-size: 1.6rem; font-style: italic; background: #bda46d0c; padding-left: .15em;
}
.crest-text { font-size: 1rem; }
.crest-sub { display: block; margin-top: .3rem; color: var(--parch-faint); font: 500 .55rem var(--font-body); letter-spacing: .05em; }
.tb-res { gap: .3rem; overflow-x: auto; scrollbar-width: none; }
.tb-res::-webkit-scrollbar { display: none; }
.chip { border-radius: .45rem; background: #07181538; border-color: transparent; }
.chip.res { display: grid; grid-template-columns: 1.3rem auto auto; column-gap: .35rem; row-gap: .08rem; padding: .4rem .6rem; min-width: 5.35rem; flex-shrink: 0; }
.chip.res .chip-icon { grid-column: 1; grid-row: 1 / 3; font-size: 1.15rem; }
.chip-name { grid-column: 2 / 4; grid-row: 1; text-transform: uppercase; letter-spacing: .09em; font-size: .52rem; color: var(--parch-faint); }
.chip.res .chip-amt { grid-column: 2; grid-row: 2; font-size: .93rem; font-weight: 650; }
.chip.res .chip-delta { grid-column: 3; grid-row: 2; font-size: .6rem; }
.chip.res:hover, .chip.res:focus-visible { background: #e0d4a60c; border-color: var(--line); }
.tb-right { gap: .3rem; }
.btn-top { width: 2rem; height: 2.1rem; border-color: transparent; background: transparent; }
.alpha-tag { top: 5.6rem; left: 1.1rem; border: 0; color: #ded1a2; background: #182520b8; }
.chronicle { top: 5.8rem; right: 1rem; }
.toasts { top: 8.6rem; right: 1rem; }
.lb-panel { top: 5.8rem; }
.chat { top: 7.6rem; bottom: auto; left: 1rem; }
.buildbar { bottom: 1rem; padding: .7rem; gap: .5rem; border-color: var(--line-strong); }
.dock-head { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 0 .2rem .15rem; }
.dock-title { font: 1rem var(--font-display); color: var(--parch); }
.dock-hint { font-size: .57rem; color: var(--parch-faint); white-space: pre; }
.bld-tabs { gap: .15rem; padding-bottom: .35rem; border-bottom: 1px solid var(--line); }
.bld-tab { flex: 1; padding: .35rem .5rem; border: 0; border-radius: .35rem; font-size: .68rem; color: var(--parch-dim); }
.bld-tab.open { background: #d0b47724; color: var(--gold-bright); box-shadow: inset 0 -2px var(--gold); }
.bld-row { gap: .4rem; }
.bld-btn { width: 5.5rem; min-height: 7rem; padding: .3rem .25rem .45rem; gap: .15rem; border-color: #afc7b21a; background: linear-gradient(#b7cdb30c, #07191420); border-radius: .55rem; }
.bld-btn:hover:not(:disabled) { background: #d2dfb714; transform: translateY(-2px); }
.bld-btn.active { background: #cfb77c1f; box-shadow: inset 0 0 0 1px var(--gold); }
.bld-preview { width: 5rem; height: 3.75rem; object-fit: contain; pointer-events: none; filter: drop-shadow(0 5px 3px #0003); }
.bld-icon { height: 3.75rem; display: grid; place-items: center; font-size: 1.8rem; }
.bld-name { display: block; color: var(--parch); font-size: .67rem; letter-spacing: 0; }
.bld-cost { display: block; font-size: .6rem; color: var(--parch-faint); }
.bld-key { top: .3rem; left: .35rem; width: 1rem; height: 1rem; display: grid; place-items: center; border: 1px solid var(--line); border-radius: .2rem; color: var(--parch-dim); background: #142522; }
.bl-stack { left: 1rem; bottom: 1rem; max-height: calc(100dvh - 11rem); }
.sel-panel, .tile-panel { width: 18rem; padding: .9rem; }
.sel-head { padding-bottom: .65rem; margin-bottom: .7rem; border-bottom: 1px solid var(--line); gap: .7rem; }
.sel-name { font-size: 1.2rem; }
.sel-sub { font-size: .72rem; line-height: 1.5; }
.sel-icon { background: #d0b47712; border-radius: .5rem; padding: .45rem; }
.sel-val, .ug-stats { font-size: .74rem; }
.hall-upgrade-card {
  margin: 0 0 .7rem; padding: .7rem; border: 1px solid var(--line-strong); border-radius: .6rem;
  background: linear-gradient(145deg, #d0b47712, #07181538); color: var(--parch-dim);
}
.hall-phase-heading { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem; }
.hall-phase-heading strong { font: 1rem var(--font-display); color: var(--gold-bright); }
.hall-phase-heading > span { flex-shrink: 0; font-size: .6rem; color: var(--parch-faint); }
.hall-phase-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .2rem; list-style: none; margin: .65rem 0 .7rem; padding: 0; }
.hall-phase-steps li { display: flex; flex-direction: column; align-items: center; gap: .25rem; min-width: 0; color: var(--parch-faint); }
.hall-phase-number { display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border: 1px solid var(--line); border-radius: 50%; font-size: .66rem; background: var(--panel-deep); }
.hall-phase-name { font-size: .51rem; }
.hall-phase-steps .reached .hall-phase-number { color: var(--gold-bright); border-color: var(--gold); background: #d0b47720; }
.hall-phase-steps [aria-current="step"] .hall-phase-number { background: var(--gold); color: var(--panel-deep); font-weight: 750; }
.hall-phase-steps [aria-current="step"] .hall-phase-name { color: var(--gold-bright); }
.hall-phase-steps .upgrading .hall-phase-number { border-style: dashed; border-color: var(--gold-bright); color: var(--gold-bright); }
.hall-next-name { font-size: .78rem; line-height: 1.4; font-weight: 650; color: var(--parch); }
.hall-upgrade-benefits { display: flex; flex-wrap: wrap; column-gap: .6rem; row-gap: .2rem; margin: .35rem 0 .65rem; color: var(--ok); font-size: .62rem; line-height: 1.4; }
.hall-upgrade-pop, .hall-upgrade-cost, .hall-upgrade-timer { display: flex; align-items: baseline; justify-content: space-between; gap: .35rem; font-size: .65rem; line-height: 1.5; }
.hall-upgrade-pop { padding: .4rem 0; border-top: 1px solid var(--line); }
.hall-upgrade-pop strong, .hall-upgrade-cost strong { color: var(--ok); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hall-upgrade-costs { display: grid; grid-template-columns: 1fr; gap: .2rem; }
.hall-upgrade-cost { padding: .2rem .35rem; border-radius: .25rem; background: #06141038; }
.hall-upgrade-cost > span { text-transform: capitalize; }
.hall-upgrade-card .missing, .hall-upgrade-card .missing strong { color: var(--bad); }
.hall-upgrade-button { width: 100%; margin-top: .6rem; font-size: .76rem; }
.hall-upgrade-button:disabled { opacity: .65; cursor: default; }
.hall-upgrade-note { margin-top: .4rem; font-size: .61rem; line-height: 1.45; color: var(--parch-faint); }
.hall-upgrade-timer { margin-top: .5rem; color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.hall-upgrade-progress { display: block; width: 100%; height: .4rem; margin-top: .4rem; border: 0; border-radius: 1rem; overflow: hidden; background: #071513; accent-color: var(--gold); }
.hall-upgrade-progress::-webkit-progress-bar { background: #071513; }
.hall-upgrade-progress::-webkit-progress-value { background: var(--gold); }
.hall-upgrade-progress::-moz-progress-bar { background: var(--gold); }
.hall-upgrade-complete { padding-top: .45rem; border-top: 1px solid var(--line); color: var(--ok); font-size: .72rem; }
.bar { height: .4rem; border: 0; background: #071513; }
.bar-fill.ok { background: #94b98a; }
.minimap-wrap { right: 1rem; bottom: 1rem; padding: .65rem; }
.mm-head { text-align: left; letter-spacing: .18em; padding: .15rem .2rem .4rem; font-size: .66rem; }
#minimap { width: 11rem; height: 11rem; border-radius: .45rem; }
.restip { border-radius: .6rem; padding: .9rem; }
.bld-btn:focus-visible .tip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.hintbar { top: auto; bottom: 13.5rem; }
.relocate-warn { bottom: 13.5rem; }
.pier-rotate-chip { bottom: 13.5rem; }
@media (max-width: 1450px) {
  .crest-text { display: none; }
  .topbar { gap: .65rem; }
  .chip.res { padding-inline: .45rem; min-width: 4.8rem; }
}
@media (max-width: 1150px) {
  .tb-crest { display: none; }
  .chip.res .chip-delta { display: none; }
  .bl-stack, .minimap-wrap { bottom: 13.3rem; }
  .sel-panel, .tile-panel { width: 16rem; }
  .sel-panel { max-height: calc(100dvh - 22rem); }
  .tile-panel { display: none; }
  #minimap { width: 8rem; height: 8rem; }
}
@media (max-width: 900px) {
  .topbar { top: .4rem; left: .4rem; right: .4rem; height: 3.6rem; padding: .3rem; gap: .25rem; }
  .chip.res { min-width: 4.2rem; padding: .25rem .35rem; column-gap: .2rem; }
  .chip.res .chip-amt { font-size: .82rem; }
  .chip-name { font-size: .48rem; }
  .chip.res .chip-icon { font-size: 1rem; }
  .tb-right > .btn-top, .tb-right > .discord-top { display: none; }
  .settings-menu .mobile-only-item { display: flex; }
  .alpha-tag { top: 4.4rem; left: .5rem; font-size: .56rem; }
  .chronicle, .lb-panel { top: 6rem; right: .4rem; }
  .toasts { top: 8.8rem; right: .4rem; }
  .chat { top: 6.2rem; left: .4rem; }
  .buildbar { left: .4rem; right: .4rem; bottom: .4rem; padding: .4rem; gap: .3rem; transform: none; }
  .buildbar.emphasized { transform: none; }
  .dock-head { display: none; }
  .bld-tab { min-height: 2rem; padding: .35rem .55rem; }
  .bld-btn { width: 5rem; min-height: 5.3rem; }
  .bld-preview { width: 4.5rem; height: 3rem; }
  .bld-icon { height: 3rem; }
  .bld-name { display: block; font-size: .6rem; }
  .bld-cost { display: none; }
  .bl-stack { left: .4rem; bottom: 9.9rem; max-height: calc(100dvh - 15rem); }
  .sel-panel { position: static; width: min(20rem, calc(100vw - .8rem)); max-height: calc(100dvh - 15rem); padding: .7rem; }
  .minimap-wrap { right: .4rem; bottom: 9.9rem; padding: .3rem; }
  body:has(.chop-mode:not(.hidden)) .bl-stack,
  body:has(.chop-mode:not(.hidden)) .minimap-wrap { bottom: 12.3rem; }
  #minimap { width: 6rem; height: 6rem; }
  .hintbar { top: 6rem; bottom: auto; }
  .relocate-warn, .pier-rotate-chip { bottom: 9.6rem; }
}
@media (max-width: 420px) {
  .online-chip { display: none; }
  .bld-btn { width: 4.5rem; }
  .bld-preview { width: 4rem; }
}
@media (prefers-reduced-motion: reduce) {
  #ui *, #ui *::before, #ui *::after { animation: none !important; transition: none !important; }
}

/* The collection is an offline view of the real models, available at ?gallery. */
.gallery-heading { position: absolute; top: 3.5rem; left: 3.5rem; color: #243c35; }
.gallery-eyebrow { font-size: .7rem; letter-spacing: .22em; font-weight: 700; }
.gallery-heading h1 { font: 3.6rem/1.05 var(--font-display); margin: 1.2rem 0; font-weight: 400; }
.gallery-heading p { font-size: .9rem; color: #566756; }
.gallery-controls { position: absolute; left: 3.5rem; bottom: 3.5rem; width: 20rem; padding: 1.3rem; }
.gallery-controls label { display: block; font-size: .6rem; letter-spacing: .16em; color: var(--parch-faint); margin-bottom: .6rem; }
.gallery-controls select { width: 100%; padding: .75rem; color: var(--parch); background: #152523; border: 1px solid var(--line-strong); border-radius: .4rem; font: .9rem var(--font-body); }
.gallery-name { font: 1.65rem var(--font-display); margin: 1.3rem 0 .4rem; }
.gallery-meta { font-size: .7rem; color: var(--parch-dim); margin: 0 0 1.5rem; }
.gallery-description { font-size: .85rem; line-height: 1.5; color: var(--parch-dim); margin: .5rem 0 .8rem; min-height: 3.8em; }
.gallery-description:empty { display: none; }
.gallery-phases { display: flex; gap: .55rem; margin-top: 1rem; }
.gallery-phases[hidden] { display: none; }
.gallery-phases button { flex: 1; padding: .6rem .3rem; border-radius: .5rem; color: var(--parch-dim); border: 1px solid var(--line-strong); background: #152523; font: 1rem var(--font-display); cursor: pointer; }
.gallery-phases button[aria-pressed="true"] { background: #d7b678; border-color: #edd09c; color: #1e3029; }
.gallery-phases button:focus-visible { outline: 2px solid #edd09c; outline-offset: 3px; }
.gallery-ui .gallery-controls { max-height: calc(100dvh - 16rem); overflow-y: auto; }
.gallery-controls input { width: 100%; accent-color: var(--gold); margin: .2rem 0 1.4rem; }
.gallery-controls a { display: block; text-decoration: none; text-align: center; padding: .65rem; }
@media (max-width: 900px) {
  .gallery-heading { top: 1.5rem; left: 1.5rem; }
  .gallery-heading h1 { font-size: 2.2rem; margin: .7rem 0; }
  .gallery-heading p { display: none; }
  .gallery-controls { left: 1rem; right: 1rem; bottom: 1rem; width: auto; padding: .8rem; }
  .gallery-name { font-size: 1.2rem; margin: .7rem 0 .3rem; }
  .gallery-meta { margin-bottom: .7rem; }
  .gallery-controls input { margin-bottom: .6rem; }
  .gallery-ui .gallery-controls { max-height: 44dvh; }
  .gallery-description { font-size: .78rem; min-height: 0; }
  .gallery-phases { margin-top: .7rem; }
  .gallery-phases button { padding: .4rem; }
}
.forestry-build-hint { margin:.4rem .25rem .1rem; text-align:center; font-size:.65rem; line-height:1.4; color:#bfd19d; }
.forestry-card { border:1px solid #a7bc8744; border-radius:.55rem; padding:.8rem; background:#7e9f5d12; }
.forestry-stages { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.4rem; margin-bottom:.75rem; }
.forestry-stage { display:flex; flex-direction:column; align-items:center; gap:.3rem; padding:.55rem .2rem; border-radius:.4rem; background:#ffffff04; color:var(--parch-faint); font-size:.62rem; opacity:.48; }
.forestry-stage > span:first-child { font-size:1.7rem; }
.forestry-stage.reached { color:#dae4bd; background:#a2c47816; opacity:1; }
.forestry-status { display:block; font-size:.8rem; color:#d3dfb2; }
.forestry-meter { display:block; width:100%; height:.45rem; margin:.65rem 0; border:0; border-radius:1rem; overflow:hidden; accent-color:#aeca7d; background:#0003; }
.forestry-meter::-webkit-progress-bar { background:#0003; }
.forestry-meter::-webkit-progress-value { background:#aeca7d; }
.forestry-card .sel-hint { font-style:normal; font-size:.7rem; line-height:1.5; }
.forestry-remove { margin-top:.7rem; width:100%; }

@media (min-width: 901px) and (max-height: 800px) {
  .gallery-heading { top: 1.5rem; left: 2rem; }
  .gallery-heading h1 { font-size: 2.4rem; margin: .7rem 0; }
  .gallery-heading p { display: none; }
  .gallery-controls { left: 2rem; bottom: 1.5rem; }
  .gallery-ui .gallery-controls { max-height: calc(100dvh - 12rem); }
}