.hli-shell{width:min(100% - 28px,1000px);margin:28px auto;color:#2f2a22;font-family:inherit}
.hli-hero,.hli-card{border:1px solid rgba(140,107,45,.16);border-radius:22px;background:#fff;padding:26px;box-shadow:0 14px 32px rgba(58,42,15,.08);margin-bottom:20px}
.hli-hero{background:linear-gradient(135deg,#f7ecd8,#f1e6d1 60%,#eaddc4)}
.hli-hero span{display:block;color:#8c6b2d;font-weight:900;letter-spacing:.12em;font-size:.78rem}
.hli-hero span em{color:#a68a52;font-style:normal;font-weight:700}
.hli-hero h1{margin:8px 0;font-size:clamp(1.7rem,4vw,2.6rem)}
.hli-hero p{margin:0;color:#5b503e;max-width:60ch}

.hli-wallet{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.hli-wallet small{display:block;color:#8a7d63;font-weight:700}
.hli-wallet strong{font-size:2.4rem;color:#8c6b2d}
.hli-skyline-card{padding:0;overflow:hidden}
.hli-skyline{display:flex;align-items:flex-end;gap:4px;min-height:190px;padding:20px 16px 0;background:linear-gradient(#eef4f2,#dfe9e3 78%,#c9b98c 78%,#c9b98c 100%)}
.hli-building{position:relative;flex:1 1 0;min-width:24px;height:70px;border-radius:6px 6px 0 0;background:#c7cdc4;opacity:.55;transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1.3),background .5s ease;transform:scaleY(.7);transform-origin:bottom}
.hli-building.is-locked::after{content:'🔒';position:absolute;top:6px;left:50%;transform:translateX(-50%);font-size:.7rem;opacity:.6}
.hli-building.is-built{opacity:1;transform:scaleY(1)}

/* Grundform je Gebäudetyp – bewusst nur mit CSS-Formen, keine Bilddateien nötig */
.hli-building--stall{height:34px;background:#b79a6b}
.hli-building--well{height:26px;width:26px;flex:0 0 30px;border-radius:50%;background:#9fb2c9}
.hli-building--tower{height:80px;width:26px;flex:0 0 30px;background:#a08a63}
.hli-building--wall{height:46px;background:linear-gradient(#8c9a86,#8c9a86) ;background-image:repeating-linear-gradient(90deg,#8c9a86 0 10px,transparent 10px 14px);border-top:8px solid #75836f}
.hli-building--temple{height:70px;background:#d7c9a3;border-top:26px solid transparent;border-image:linear-gradient(135deg,#c2a25b,#c2a25b) 1}
.hli-building--temple::before{content:'';position:absolute;top:-24px;left:0;right:0;height:0;border-left:50% solid transparent;border-right:50% solid transparent;border-bottom:24px solid #c2a25b}
.hli-building--aqueduct{height:56px;background:repeating-linear-gradient(90deg,#b7c4d6 0 10px,transparent 10px 16px);border-bottom:8px solid #94a6bc}
.hli-building--baths{height:50px;border-radius:50% 50% 6px 6px/30px 30px 6px 6px;background:#cdb98f}
.hli-building--arch{height:64px;width:34px;flex:0 0 38px;background:#b58f57;border-radius:20px 20px 0 0;box-shadow:inset 0 0 0 9px #eef4f2}
.hli-building--basilica{height:60px;background:#c4a877}
.hli-building--circus{height:34px;border-radius:50%/16px;background:#bfa87c}
.hli-building--senate{height:66px;background:#cbb488;border-top:20px solid transparent;position:relative}
.hli-building--senate::before{content:'';position:absolute;top:-18px;left:6px;right:6px;height:18px;border-radius:50% 50% 0 0/100% 100% 0 0;background:#a98c53}
.hli-building--colosseum{height:78px;width:64px;flex:0 0 68px;border-radius:50% 50% 8px 8px/38% 38% 8px 8px;background:repeating-linear-gradient(90deg,#c9a76a 0 8px,#b7955a 8px 14px)}
.hli-building--grand-temple{height:86px;background:#d9cba5;position:relative}
.hli-building--grand-temple::before{content:'';position:absolute;top:-28px;left:-4px;right:-4px;height:0;border-left:calc(50% + 4px) solid transparent;border-right:calc(50% + 4px) solid transparent;border-bottom:28px solid #b98f4e}
.hli-building--forum{height:64px;background:repeating-linear-gradient(90deg,#d3c199 0 9px,#c2ac7c 9px 15px)}
.hli-building--palace{height:96px;width:76px;flex:0 0 80px;background:#dfcd9e;border-radius:10px 10px 0 0;position:relative;box-shadow:0 0 0 6px rgba(215,169,58,.18) inset}
.hli-building--palace::before{content:'';position:absolute;top:-30px;left:50%;width:34px;height:34px;transform:translateX(-50%);border-radius:50%;background:#c9a548}

.hli-next{text-align:left}
.hli-next__row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:12px}
.hli-cost{font-weight:900;color:#8c6b2d;font-size:1.1rem}
.hli-buy{border:0;border-radius:14px;background:#496d53;padding:13px 22px;color:#fff;font-weight:900;cursor:pointer}
.hli-buy:disabled{background:#dcd6c6;color:#948a6e;cursor:not-allowed}

.hli-complete{text-align:center;background:linear-gradient(135deg,#fdf6e6,#f7ecd8)}

.hli-era{margin:18px 0 8px;color:#8c6b2d;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase}
.hli-era:first-child{margin-top:0}
.hli-list{display:grid;gap:8px}
.hli-list__row{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:10px;border:1px solid #ece2c8;border-radius:12px;padding:10px 14px;opacity:.65}
.hli-list__row.is-built{opacity:1;background:#f8f3e6;border-color:#e5d6ab}
.hli-list__cost{font-weight:800;color:#8a7d63;font-size:.85rem}

@keyframes hli-rise{from{opacity:0;transform:translateY(14px) scaleY(.6)}to{opacity:1;transform:translateY(0) scaleY(1)}}
.hli-building.is-built.is-new{animation:hli-rise .7s cubic-bezier(.2,.8,.2,1.2)}

/* Persönliche Stadt in Draufsicht */
.hli-village-card{padding:0;overflow:hidden;background:#efe4c9}
.hli-map{position:relative;aspect-ratio:3/2;overflow:hidden;background:#d9c999;isolation:isolate}
.hli-map__base,.hli-map__reveal img{display:block;width:100%;height:100%;object-fit:cover}
.hli-map__reveal{position:absolute;inset:0;z-index:2;pointer-events:none;animation:hli-map-build .65s cubic-bezier(.2,.8,.2,1.15) both}
.hli-map__reveal img{position:absolute;inset:0}
.hli-map__marker{position:absolute;z-index:3;display:grid;place-items:center;width:clamp(22px,3.2vw,38px);height:clamp(22px,3.2vw,38px);transform:translate(-50%,-50%);border-radius:50%;background:rgba(255,255,255,.84);box-shadow:0 4px 14px rgba(44,35,20,.24);font-size:clamp(.65rem,1.5vw,1rem);opacity:.78}
.hli-map__marker.is-next{background:#fff4cf;box-shadow:0 0 0 4px rgba(214,165,54,.3),0 6px 18px rgba(44,35,20,.28);opacity:1;animation:hli-marker-pulse 1.8s ease-in-out infinite}
.hli-map__caption{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 20px;background:#fff;color:#5b503e}
.hli-map__caption strong{color:#496d53}.hli-map__caption span{font-size:.88rem}
@keyframes hli-map-build{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes hli-marker-pulse{50%{transform:translate(-50%,-50%) scale(1.1)}}

@media(max-width:640px){.hli-hero,.hli-card{padding:18px;border-radius:16px}.hli-skyline{min-height:140px;gap:2px}.hli-wallet{flex-direction:column;align-items:flex-start}.hli-village-card{padding:0}.hli-map__caption{align-items:flex-start;flex-direction:column;padding:11px 14px}}
@media(prefers-reduced-motion:reduce){.hli-building,.hli-building.is-new{transition-duration:.01ms!important;animation-duration:.01ms!important}}