/* ============================================================
   Ages Tycoon — css/v2a.css
   Slice v2-A — "Şafak Tepesi": Dawnworks Hane council.
   Scoped under .dwp. Local theme tokens here so main.css stays
   untouched. Only transform/opacity/box-shadow/color animate
   (compositor-safe for the 60fps tick + 10fps render loop).
   No SVG filters. Granary fill GEOMETRY is set by JS attributes;
   CSS handles only its colour + transition.
   ============================================================ */
.dwp {
  --cream:#fff1cf; --gold:#d4a574; --amber:#d97706; --red:#dc2626;
  --terra:#b86340; --earth:#7a3f24; --earth-dk:#5a2f1a;
  --ink:#2a2218; --dim:#8a7256; --parch:#fbf6e9;
  --inset:#f5ead3; --inset-lo:#e6d4ad; --frame:#e7d9b8; --leaf:#6f8f43;

  background:var(--parch);
  border:2px solid var(--frame);
  border-radius:14px;
  overflow:hidden;
  color:var(--ink);
  font-family:"Nunito","Avenir Next",system-ui,sans-serif;
}

/* ---------- (A) PANORAMA HERO ---------- */
.dwp-pan { position:relative; line-height:0; }
.dwp-scene { display:block; width:100%; height:auto; }
.dwp-title {
  position:absolute; top:7px; left:0; right:0; text-align:center;
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--earth); text-shadow:0 1px 2px rgba(255,241,207,.9);
  z-index:3; pointer-events:none;
}

/* the 12 villagers — the centerpiece: only transform changes on allocate,
   so figures WALK across the path (spring easing) instead of teleporting. */
.dwp-v {
  transition: transform .52s cubic-bezier(.34,1.32,.5,1), opacity .45s ease;
  will-change: transform;
  opacity: 1;
}
.dwp-v-hidden { opacity: 0; pointer-events: none; }
.dwp[data-migrated="1"] .dwp-villagers { opacity: .25; transition: opacity 1.2s ease; }

/* bottleneck reaction layers (driven by root [data-bottleneck]) */
.dwp-skydim { opacity:0; transition:opacity .5s ease; }
.dwp-warnframe { opacity:0; transition:opacity .3s ease; }
.dwp[data-bottleneck="empty"] .dwp-skydim { opacity:.42; }
.dwp[data-bottleneck="empty"] .dwp-warnframe {
  opacity:1; animation:dwp-pulse 1.15s ease-in-out infinite;
}
@keyframes dwp-pulse { 0%,100%{opacity:.45} 50%{opacity:1} }

/* zero-sum balance ribbon */
.dwp-ribbon {
  position:absolute; left:11px; right:11px; bottom:9px; z-index:3;
  height:7px; border-radius:99px; overflow:hidden; display:flex;
  box-shadow:inset 0 0 0 1px rgba(122,63,36,.28), 0 1px 2px rgba(0,0,0,.2);
}
.dwp-ribbon .seg { transition:flex-grow .42s cubic-bezier(.4,0,.2,1); min-width:0; }
.dwp-ribbon .seg-avci { background:var(--gold); }
.dwp-ribbon .seg-toplayici { background:var(--leaf); }

/* ---------- (B) STATIONS (recessed carved panels) ---------- */
.dwp-stations { display:grid; grid-template-columns:1fr 1fr; gap:9px; padding:11px 11px 0; }
.dwp-st {
  background:linear-gradient(180deg,var(--inset),var(--inset-lo));
  border-radius:12px; padding:8px 8px 9px;
  box-shadow:inset 0 2px 5px rgba(90,47,26,.30),
             inset 0 -1px 0 rgba(255,255,255,.55),
             0 1px 0 rgba(255,255,255,.25);
}
.dwp-st-head { display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.dwp-st-ico { width:36px; height:36px; flex:0 0 auto; display:inline-flex; line-height:0; }
.dwp-st-ico svg { width:100%; height:100%; display:block; }
.dwp-st-id { min-width:0; }
.dwp-st-nm { font-weight:800; font-size:15px; color:var(--earth-dk); line-height:1.05; }
.dwp-st-sub { font-size:11px; color:var(--dim); margin-top:2px; font-variant-numeric:tabular-nums; }
.dwp-st-ctl { display:flex; align-items:center; justify-content:space-between; gap:6px; }

/* 44x44 HIG tap targets */
.dwp-btn {
  width:44px; height:44px; flex:0 0 44px; padding:0;
  border:1.5px solid var(--gold); border-radius:11px;
  background:#fff8e8; color:var(--earth);
  font-size:23px; line-height:1; font-weight:600;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:transform .08s ease, background .12s ease, color .12s ease;
  -webkit-tap-highlight-color:transparent;
}
.dwp-btn:active { transform:scale(.9); background:var(--gold); color:#fff; }
.dwp-btn:disabled { opacity:.36; cursor:default; transform:none; }
.dwp-st-cnt {
  font-size:26px; font-weight:800; color:var(--ink);
  font-variant-numeric:tabular-nums; min-width:30px; text-align:center;
}

/* ---------- (C) STOCKPILE GAUGES ---------- */
.dwp-piles { display:grid; grid-template-columns:1fr 1fr; gap:9px; padding:11px; }
.dwp-pile {
  background:linear-gradient(180deg,var(--inset),var(--inset-lo));
  border:1.5px solid var(--inset-lo); border-radius:12px;
  padding:8px 9px 9px; display:flex; gap:9px; align-items:center;
  transition:border-color .25s ease, background .25s ease;
}
.dwp-pile-g { width:44px; height:54px; flex:0 0 auto; display:inline-flex; line-height:0; }
.dwp-pile-g svg { width:100%; height:100%; display:block; }
.dwp-pile-info { min-width:0; }
.dwp-pile-nm { font-size:11.5px; color:var(--dim); letter-spacing:.02em; }
.dwp-pile-num {
  font-size:23px; font-weight:800; color:var(--ink);
  font-variant-numeric:tabular-nums; line-height:1.1;
  transition:color .25s ease; display:inline-block;
}
.dwp-pile-rate { font-size:11px; color:var(--dim); font-variant-numeric:tabular-nums; }
.dwp-pile-warn { font-size:10.5px; font-weight:700; line-height:1.2; margin-top:2px; min-height:0; }

/* granary grain recolour (geometry/level set by JS attributes; colour here) */
.dwp-granary .glyph-fill { transition:fill .35s ease, y .45s ease, height .45s ease; }
.dwp-granary .glyph[data-fill="ok"]    .glyph-fill { fill:var(--gold); }
.dwp-granary .glyph[data-fill="low"]   .glyph-fill { fill:var(--amber); }
.dwp-granary .glyph[data-fill="empty"] .glyph-fill { fill:var(--red); }

/* food bottleneck card states (JS toggles .low / .empty) */
.dwp-pile--food.low { border-color:var(--amber); }
.dwp-pile--food.low .dwp-pile-num { color:var(--amber); }
.dwp-pile--food.low .dwp-pile-rate,
.dwp-pile--food.low .dwp-pile-warn { color:#b45309; }
.dwp-pile--food.empty { border-color:var(--red); background:linear-gradient(180deg,#fdecea,#f8ddd8); }
.dwp-pile--food.empty .dwp-pile-num { color:var(--red); }
.dwp-pile--food.empty .dwp-pile-rate,
.dwp-pile--food.empty .dwp-pile-warn { color:#b91c1c; }

/* number flash on a successful allocation change */
.flash { animation:dwp-flash .45s ease-out; }
@keyframes dwp-flash {
  0% { color:#e8a300; transform:scale(1.18); }
  100% { transform:scale(1); }
}

/* ---------- Goal ribbon + Hane readout ---------- */
.dwp-goal { padding: 8px 11px 4px; }
.dwp-goal.ready { cursor: pointer; }   /* the ribbon is tappable-to-build when ready (era_council.js) */
.dwp-goal-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dwp-goal-text {
  font-size: 12.5px; font-weight: 700; color: var(--earth-dk);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.dwp-goal.ready .dwp-goal-text { color: #b45309; }
.dwp-readout {
  font-size: 12px; font-weight: 800; color: var(--earth);
  white-space: nowrap; font-variant-numeric: tabular-nums; flex: 0 0 auto;
}
.dwp-goal-bar { height: 5px; border-radius: 99px; background: var(--inset-lo); overflow: hidden; margin-top: 5px; }
.dwp-goal-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), #e8a300); border-radius: 99px; transition: width .4s ease; }
.dwp-goal.ready .dwp-goal-bar i { background: #16a34a; }
.dwp-goal.warn .dwp-goal-text { color: #b91c1c; }
.dwp-goal.warn .dwp-goal-bar i { width: 100% !important; background: #dc2626; }

/* hide the v1 tabs that are broken/disconnected during the Dawnworks phase */
.tabbar-btn.phase-hidden { display: none !important; }

/* ---------- Build shelf (Hammadde sink) ---------- */
.dwp-builds {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 7px; padding: 6px 11px 0;
}
.dwp-builds::-webkit-scrollbar { display: none; }
.dwp-chip {
  flex: 0 0 auto; width: 84px; min-height: 76px; padding: 6px 5px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  border: 1.5px solid var(--inset-lo); border-radius: 11px;
  background: linear-gradient(180deg, var(--inset), var(--inset-lo));
  color: var(--earth-dk); cursor: pointer; -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.5);
  transition: transform .08s ease, border-color .15s ease, opacity .15s ease;
}
.dwp-chip:active { transform: scale(.94); }
.dwp-chip:disabled { cursor: default; }
.dwp-chip-ico { font-size: 18px; line-height: 1; }
.dwp-chip-nm { font-size: 10px; font-weight: 800; text-align: center; line-height: 1.05; }
.dwp-chip-tag { font-size: 8.5px; line-height: 1.12; text-align: center; color: var(--dim); margin-top: 1px; }
.dwp-chip-cost { font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: auto; padding-top: 2px; }
.dwp-chip.ready .dwp-chip-tag { color: #b45309; }
.dwp-chip.built .dwp-chip-tag { color: var(--leaf); }
.dwp-chip.locked .dwp-chip-tag { color: var(--text-mute); }
.dwp-chip--adv .dwp-chip-tag { color: #1d5a6e; }
.dwp-chip.locked { opacity: .5; }
.dwp-chip.built { opacity: .6; border-color: var(--leaf); }
.dwp-chip.built .dwp-chip-cost { color: var(--leaf); }
.dwp-chip.ready { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 2px 8px rgba(212,165,116,.5); animation: dwp-chip-pulse 1.2s ease-in-out infinite; }
.dwp-chip--adv { background: linear-gradient(180deg, #dff0f7, #bfe0ee); border-color: #7fc0dd; color: #1d5a6e; }
.dwp-chip--adv.ready { border-color: #2a9d8f; box-shadow: 0 0 0 1px #2a9d8f, 0 2px 8px rgba(42,157,143,.5); }
@keyframes dwp-chip-pulse { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

/* ---------- Köy Defteri (reward ledger + inline Hediye fork) ---------- */
.dwp-defter {
  margin: 8px 11px 0; padding: 8px 10px 9px; border-radius: 12px;
  background: linear-gradient(180deg, var(--inset), var(--inset-lo));
  border: 1.5px solid var(--inset-lo);
  box-shadow: inset 0 1px 3px rgba(90,47,26,.18);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.dwp-defter.has-gift { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 2px 10px rgba(212,165,116,.45); }
.dwp-defter-rows { display: flex; flex-direction: column; gap: 3px; }
.dwp-defter-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dwp-defter-k { font-size: 11px; font-weight: 700; color: var(--earth-dk); white-space: nowrap; }
.dwp-defter-v { font-size: 11px; font-weight: 800; color: var(--earth); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.dwp-defter-row[data-role="defTaxRow"] .dwp-defter-v { color: #b45309; }
.dwp-defter-foot { font-size: 10px; color: var(--dim); margin-top: 3px; text-align: center; }

/* inline Hediye choice — the strategy fork, one screen */
.dwp-gift { margin-bottom: 8px; }
.dwp-gift[hidden] { display: none; }
.dwp-gift-q { font-size: 11.5px; font-weight: 800; color: var(--earth-dk); text-align: center; margin-bottom: 6px; }
.dwp-gift-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dwp-gift-opt {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 8px 6px; border-radius: 11px; cursor: pointer;
  border: 1.5px solid var(--inset-lo); background: #fff8e8; color: var(--earth-dk);
  -webkit-tap-highlight-color: transparent; box-shadow: inset 0 -1px 0 rgba(255,255,255,.5);
  transition: transform .08s ease, border-color .15s ease;
}
.dwp-gift-opt:active { transform: scale(.95); }
.dwp-gift-opt--bolluk { border-color: var(--leaf); }
.dwp-gift-opt--elemegi { border-color: var(--gold); }
.dwp-gift-ico { font-size: 22px; line-height: 1; }
.dwp-gift-nm { font-size: 12px; font-weight: 800; }
.dwp-gift-sub { font-size: 9.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
.dwp-gift-opt--bolluk .dwp-gift-nm { color: #4f7020; }
.dwp-gift-opt--elemegi .dwp-gift-nm { color: #a86a2a; }

/* ---------- Growth meter on the food pile ---------- */
.dwp-grow { margin-top: 5px; }
.dwp-grow-bar { height: 4px; border-radius: 99px; background: var(--inset-lo); overflow: hidden; }
.dwp-grow-bar i { display: block; height: 100%; width: 0; background: var(--leaf); border-radius: 99px; transition: width .35s ease; }
.dwp-grow-cap { font-size: 9.5px; color: var(--dim); margin-top: 2px; font-variant-numeric: tabular-nums; }

/* 360px squeeze guard */
@media (max-width:360px) {
  .dwp-st-nm { font-size:14px; }
  .dwp-st-cnt { font-size:23px; }
  .dwp-pile-num { font-size:21px; }
  .dwp-stations, .dwp-piles { gap:7px; padding-left:8px; padding-right:8px; }
}

/* motion safety */
@media (prefers-reduced-motion: reduce) {
  .dwp-v, .dwp-skydim, .dwp-warnframe, .dwp-ribbon .seg,
  .dwp-granary .glyph-fill, .dwp-pile-num, .flash {
    transition:none !important; animation:none !important;
  }
}