@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Fraunces:opsz,wght,SOFT,WONK@9..144,500,30,1;9..144,600,30,1&display=swap');
:root{font-family:'DM Sans',system-ui,Arial,sans-serif;color:#f3f1de;background:#142017;font-synthesis:none}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #d8c17e;outline-offset:2px}.hidden{display:none!important}#app,#world-canvas{position:fixed;inset:0;width:100%;height:100%}#world-canvas{image-rendering:pixelated;background:#253c31}.ambient-vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 56% 43%,transparent 30%,rgba(10,21,17,.32) 94%)}.menu-screen{position:fixed;inset:0;display:flex;flex-direction:column;background:linear-gradient(90deg,rgba(12,27,21,.97) 0%,rgba(14,30,23,.91) 29%,rgba(15,32,24,.55) 52%,transparent 81%)}.menu-top{height:92px;display:flex;gap:9px;align-items:center;padding:0 max(48px,6.5vw);font-size:14px;font-weight:800;letter-spacing:.21em}.mark{font-size:34px;color:#e4ce89;line-height:1}.menu-edition{font-weight:600;letter-spacing:.1em;font-size:10px;padding:7px 10px;border:1px solid rgba(231,229,201,.24);border-radius:4px;color:#d9decb;margin-left:15px}.menu-body{margin:auto 0;padding:15px max(48px,6.5vw) 50px;max-width:790px}.menu-kicker{display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.24em;font-weight:800;color:#e5cb85}.kicker-line{display:inline-block;width:34px;height:1px;background:#e5cb85}.menu-body h1{font:500 clamp(48px,5.45vw,86px)/1.09 'Fraunces',Georgia,serif;letter-spacing:-.045em;margin:28px 0 20px;text-wrap:balance}.menu-body h1 em{font-style:italic;color:#e4cf94}.menu-body p{max-width:475px;font-size:15px;line-height:1.85;color:#d0dacc;margin-bottom:38px}.menu-actions{display:grid;gap:12px;width:min(363px,100%)}.btn{border:1px solid rgba(239,241,218,.13);display:flex;align-items:center;gap:13px;text-align:left;padding:17px 18px;color:#ecf0dd;border-radius:8px;font-weight:700;font-size:14px;background:rgba(24,47,35,.69);transition:transform .15s,background .15s,border .15s}.btn:hover{transform:translateY(-2px);background:rgba(45,81,56,.9);border-color:#b8c69f}.btn-primary{background:#e5ce91;color:#243327;border-color:#f3dd9e}.btn-primary:hover{background:#f0dfa8}.btn-icon{font-size:20px}.chevron{margin-left:auto;font-size:21px;font-weight:400}.btn-ghost{background:transparent;border-color:transparent;color:#d7dfd1}.menu-footer{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 max(48px,6.5vw);border-top:1px solid rgba(236,235,204,.11);font-size:10px;letter-spacing:.13em;color:rgba(236,235,204,.65)}.game-ui{position:fixed;inset:0;pointer-events:none}.game-ui button,.game-ui aside,.game-ui .bottom-bar,.game-ui .minimap{pointer-events:auto}.game-topbar{position:absolute;top:16px;left:17px;right:17px;height:58px;display:flex;gap:18px;align-items:center;padding:0 14px;background:#1a2d25ed;border:1px solid #6f836b6d;border-radius:11px;box-shadow:0 7px 25px #10221b9c;pointer-events:auto;backdrop-filter:blur(14px)}.brand-button{border:0;background:none;color:#eee8cd;display:flex;align-items:center;gap:8px;font-weight:800;letter-spacing:.09em;font-size:12px;white-space:nowrap}.brand-mark{font-size:28px;color:#e9cd89}.topbar-world{font-size:12px;color:#ecf1de;white-space:nowrap;border-left:1px solid #6b786361;padding-left:18px;overflow:hidden;text-overflow:ellipsis}.topbar-world .dot{margin:0 9px;color:#9eac96}.topbar-stats{margin-left:auto;display:flex;gap:20px;color:#e0e8cd;font-size:15px;white-space:nowrap}.topbar-stats b{margin-left:3px}.topbar-stats small{color:#b1c1ad;font-size:11px}.topbar-actions{display:flex;gap:7px}.small-button{height:36px;min-width:38px;padding:0 13px;border:1px solid #869a745b;border-radius:7px;color:#eaf0da;background:#395340ad;font-size:13px;font-weight:700}.small-button:hover{background:#50704d}.speed-button{min-width:45px}.left-panel,.details-panel{position:absolute;top:91px;background:#172d24ed;border:1px solid #79917564;border-radius:11px;box-shadow:0 10px 32px #0e221d91;backdrop-filter:blur(16px)}.left-panel{left:17px;width:219px;padding:17px 12px}.panel-heading{padding:2px 9px 13px;color:#e6cf94;font-size:10px;font-weight:800;letter-spacing:.15em;display:flex;justify-content:space-between}.panel-heading span{font-size:17px}.tool-list{display:grid;gap:5px}.tool-button{width:100%;display:flex;align-items:center;gap:11px;min-height:40px;padding:8px 11px;color:#e7edd9;background:transparent;border:1px solid transparent;border-radius:7px;text-align:left;font-size:12px;font-weight:650}.tool-button:hover{background:#3c5a46a8}.tool-button.active{color:#233e2d;background:#e1d09d;border-color:#f4e3b1}.tool-emoji{font-size:17px;display:inline-flex;width:25px;text-align:center;justify-content:center}.tool-hotkey{margin-left:auto;font-size:10px;color:#9eb39f}.tool-button.active .tool-hotkey{color:#587056}.panel-divider{height:1px;background:#7384694b;margin:15px 5px 12px}.tool-tip{font-size:11px;line-height:1.5;color:#bbcaaf;padding:0 8px;min-height:39px}.details-panel{right:17px;top:92px;width:254px;padding:16px}.details-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #8a9b7759;padding:2px 1px 12px;font:600 22px 'Fraunces',serif;color:#f7efca}.details-head button{border:0;background:transparent;color:#e4e8d6}.detail-sub{font-size:11px;letter-spacing:.12em;color:#b4c7af;margin:12px 0}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.detail-cell{padding:10px;border:1px solid #96a3863b;border-radius:7px;background:#ffffff08}.detail-cell small{display:block;font-size:10px;color:#b9c6ab}.detail-cell strong{font-size:20px;display:block;margin-top:4px}.detail-list{padding-top:14px;font-size:12px;color:#dfebd3;line-height:2}.details-action{width:100%;margin-top:13px;padding:10px;background:#e4d19a;color:#2b3927;border:0;border-radius:7px;font-size:12px;font-weight:800}.bottom-bar{position:absolute;bottom:17px;left:17px;right:228px;display:flex;align-items:center;gap:25px;min-height:41px;padding:0 12px;border-radius:8px;background:#172d24d9;border:1px solid #8c9e7760;color:#c4d6bc;font-size:11px;backdrop-filter:blur(9px)}.world-coords{white-space:nowrap;font-weight:800;color:#e0d29d}.game-hint{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bottom-actions{margin-left:auto;display:flex;align-items:center;gap:9px}.bottom-actions button{background:#3a5743;color:#fff;border:1px solid #768b71;border-radius:5px;width:23px;height:23px}.minimap{position:absolute;right:17px;bottom:17px;width:192px;height:136px;image-rendering:pixelated;border:4px solid #283e2e;border-radius:8px;box-shadow:0 0 0 1px #a4a77e,0 6px 19px #0d1d18;cursor:crosshair}.toast{position:absolute;bottom:79px;left:50%;transform:translateX(-50%);background:#1c3729f5;border:1px solid #b7ca9a;color:#f2edda;padding:11px 17px;border-radius:8px;font-size:12px;font-weight:700;box-shadow:0 8px 20px #14231d88;white-space:nowrap}.modal-root{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:20;padding:20px}.modal-backdrop{position:absolute;inset:0;background:#0a1813bf;backdrop-filter:blur(8px)}.modal-panel{position:relative;width:min(480px,100%);max-height:84vh;overflow:auto;background:linear-gradient(160deg,#243e2d,#182b23);border:1px solid #afbc90a1;border-radius:17px;padding:35px;box-shadow:0 28px 90px #0008}.modal-close{position:absolute;right:20px;top:19px;background:none;border:none;color:#dce7d5;font-size:19px}.modal-kicker{color:#e3cf97;font-size:11px;font-weight:800;letter-spacing:.2em;margin-bottom:14px}.modal-panel h2{font:600 38px/1.13 'Fraunces',Georgia,serif;letter-spacing:-.035em;margin:0 0 12px;color:#f8efcb}.modal-panel p{font-size:13px;line-height:1.7;color:#becdb7}.form-label{display:block;color:#e6e9d7;font-size:12px;font-weight:750;margin:21px 0 8px}.form-input{width:100%;padding:13px 14px;border-radius:8px;background:#0f261c;border:1px solid #69846b;color:#eff3dd;outline:none}.form-input:focus{border-color:#e8d094}.size-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.size-opt{padding:13px 6px;text-align:center;border:1px solid #708970;border-radius:8px;background:#1b3628;color:#e2e9d6;font-weight:800;font-size:12px}.size-opt small{display:block;color:#aabb9f;font-size:10px;font-weight:500;margin-top:5px}.size-opt.active{background:#e7d298;color:#203425;border-color:#e7d298}.size-opt.active small{color:#5b6449}.modal-actions{margin-top:26px;display:flex;gap:10px}.modal-actions button{flex:1;justify-content:center}.save-list{max-height:330px;overflow:auto;margin-top:17px;display:grid;gap:9px}.save-card{display:flex;gap:12px;align-items:center;background:#0c241b73;border:1px solid #8c9d755b;border-radius:8px;padding:12px}.save-main{flex:1;min-width:0}.save-main strong{display:block;color:#f6efda;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.save-main small{display:block;margin-top:5px;font-size:11px;color:#b8c8ae}.save-card button{border:1px solid #8b9d7f;background:#304f39;color:#f4f1dc;border-radius:6px;padding:8px 10px}.save-card button.danger{color:#e8bcae;border-color:#7d5d53}.help-keys{display:grid;grid-template-columns:1fr auto;gap:13px 14px;margin-top:20px;font-size:12px;color:#d8e3ca}.help-keys kbd{font:700 11px 'DM Sans',sans-serif;border:1px solid #81967d;border-radius:5px;padding:4px 8px;background:#122a1f}.help-foot{padding-top:16px;margin-top:20px;border-top:1px solid #87987951;font-size:11px;color:#b4c5aa;line-height:1.7}.menu-pause-options{display:grid;gap:10px;margin-top:25px}.menu-pause-options .btn{width:100%}@media(max-width:940px){.topbar-stats small,.topbar-world{display:none}.left-panel{width:176px}.tool-button{padding:6px;font-size:11px}.menu-body{padding-left:40px}.menu-screen{background:linear-gradient(90deg,#11251ef5 0%,#14291fe6 58%,#17291b74)}.bottom-bar{right:17px;bottom:165px}.menu-footer{padding:0 40px}}@media(max-width:600px){.menu-top{height:70px;padding:0 23px}.menu-edition{display:none}.menu-body{padding:30px 24px}.menu-body h1{font-size:46px}.menu-footer{padding:0 24px}.menu-footer span:last-child{display:none}.game-topbar{top:8px;left:8px;right:8px;height:51px;gap:8px;padding:0 8px}.brand-button span:last-child,.topbar-stats{display:none}.left-panel{left:7px;top:70px;width:61px;padding:9px 5px}.panel-heading,.tool-button span:not(.tool-emoji),.panel-divider,.tool-tip{display:none}.tool-button{justify-content:center;padding:6px}.details-panel{top:70px;right:7px;width:220px}.minimap{right:8px;bottom:8px;width:130px;height:92px}.bottom-bar{left:8px;right:8px;bottom:110px}.game-hint{display:none}.modal-panel{padding:26px}.modal-panel h2{font-size:30px}}

/* V0.2: extended world tools, settlement chronicle, live headlines */
.left-panel{max-height:calc(100vh - 173px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#7e956e #172d24}.tool-button{min-height:36px;padding:6px 9px}.tool-list{gap:2px}.details-panel{max-height:calc(100vh - 190px);overflow-y:auto;scrollbar-width:thin}.chronicle-title{margin-top:15px;font-size:10px;color:#e7cb8b;letter-spacing:.14em;font-weight:800}.chronicle{font-size:11px;line-height:1.6;color:#b7d0b1;margin:8px 0}.chronicle>div{border-bottom:1px solid #ffffff16;padding:5px 0}.topbar-stats{gap:12px}.topbar-stats span{white-space:nowrap}@media(max-width:1100px){.topbar-stats span:nth-child(n+3){display:none}}@media(max-width:600px){.left-panel{max-height:calc(100vh - 205px)}.tool-button{min-height:33px}}

.city-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:8px}.city-actions button{border:1px solid #8c9d755b;border-radius:6px;background:#294736;color:#f1e9cd;padding:8px 2px;font-size:10px;font-weight:750}.city-actions button:hover{background:#43644a}.details-panel select.form-input{margin-top:9px;font-size:12px;padding:9px}

/* Weltenwerk 0.3: small visible biome key and permanent job roster */
.biome-legend{position:absolute;right:22px;bottom:176px;z-index:8;display:flex;gap:9px;align-items:center;max-width:420px;flex-wrap:wrap;padding:8px 10px;border-radius:9px;background:rgba(20,38,32,.87);border:1px solid rgba(221,226,200,.15);font-size:10px;color:#e8ecd9;pointer-events:none;box-shadow:0 3px 14px rgba(0,0,0,.15)}
.biome-legend span{letter-spacing:1.6px;font-weight:800;color:#b9c9ab}.biome-legend em{font-style:normal;white-space:nowrap}
.citizen-list{max-height:170px;overflow:auto;display:flex;flex-direction:column;gap:6px;padding:4px 0}.citizen-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:11px;line-height:1.35}.citizen-row span:last-child{font-size:10px;opacity:.77;text-align:right}
@media(max-width:760px){.biome-legend{right:9px;bottom:152px;gap:5px;font-size:9px;max-width:240px;padding:6px}.citizen-row{font-size:10px}}

/* V0.4.1 – Stadtinformationen: breit, kompakt und vom übrigen HUD getrennt. */
.details-panel{
  right:17px;
  top:92px;
  bottom:214px;
  width:min(410px,calc(100vw - 275px));
  max-height:none;
  min-width:0;
  padding:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  z-index:7;
}
.details-panel.hidden{display:none!important}
.details-head{
  flex:0 0 auto;
  min-height:54px;
  padding:12px 15px;
  margin:0;
  gap:12px;
  font-size:20px;
}
#details-heading{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.details-head button{
  flex:0 0 31px;
  width:31px;height:31px;
  border-radius:6px;
  background:#3d5947;
  font-size:16px;
}
.details-head button:hover{background:#567559}
#details-content{
  flex:1;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:0 14px 15px;
  scrollbar-width:thin;
  scrollbar-color:#718d73 #172d24;
  overscroll-behavior:contain;
}
.detail-sub{margin:11px 0;letter-spacing:.07em;font-size:10px}
.detail-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.detail-cell{padding:8px 5px;text-align:center;min-width:0}
.detail-cell small{font-size:10px;white-space:nowrap}
.detail-cell strong{font-size:18px;margin-top:2px}
.city-sections{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:11px;align-items:start}
.city-section{border:1px solid #96a38633;border-radius:8px;padding:9px;min-width:0;background:#ffffff05}
.city-section h3{margin:0 0 9px;color:#e7cf95;font-size:10px;line-height:1.25;font-weight:800;letter-spacing:.035em}
.city-facts{display:grid;gap:8px}
.city-facts>div{display:flex;flex-direction:column;min-width:0;gap:2px;font-size:10px;line-height:1.3;color:#b8c7b4;overflow-wrap:anywhere}
.city-facts b{font-size:11px;font-weight:700;color:#f0eed7;overflow-wrap:anywhere}
.details-panel .chronicle-title{margin-top:12px;font-size:10px}
.details-panel .citizen-list{max-height:116px;gap:4px}
.details-panel .citizen-row{font-size:10px}
.details-panel .citizen-row span:last-child{font-size:10px;max-width:62%;overflow-wrap:anywhere}
.details-panel .chronicle{margin:5px 0;font-size:10px;line-height:1.45}
.details-panel .chronicle>div{padding:3px 0}
.details-action{margin-top:10px;padding:8px}
.city-actions{gap:6px}.city-actions button{padding:8px 4px}
.biome-legend{z-index:5}
@media(max-width:900px){
 .details-panel{right:10px;top:85px;bottom:210px;width:min(380px,calc(100vw - 202px))}
 .details-head{font-size:18px}
 .detail-cell small{font-size:9px}
}
@media(max-width:600px){
 .details-panel{right:7px;top:70px;bottom:205px;width:calc(100vw - 83px);max-width:360px}
 .details-head{padding:9px 11px;min-height:46px}
 #details-content{padding:0 9px 10px}
 .detail-grid{gap:4px}
 .detail-cell{padding:6px 2px}
 .detail-cell strong{font-size:16px}
 .city-sections{gap:5px}
 .city-section{padding:6px}
 .city-section h3{font-size:9px}
 .city-facts>div,.city-facts b{font-size:9px}
}
@media(max-height:590px){
 .details-panel{bottom:160px}
 .biome-legend{display:none}
}

/* V0.4.3: World overview and territory toggles */
.bottom-actions button{cursor:pointer;flex-shrink:0}
.bottom-actions button.active{background:#d4c488;color:#263c2c;border-color:#e7d795}
#btn-territory,#btn-fit-world{width:29px;height:25px;font-size:15px}
.bottom-actions{gap:6px}
@media(max-width:700px){.bottom-bar{gap:7px}.bottom-actions{gap:4px}#btn-territory,#btn-fit-world{width:26px}}

/* V0.5 cursor and focus behavior */
#world-canvas{cursor:default}
#details-content{overscroll-behavior:contain;overflow-anchor:auto}
#details-content:focus-within{scroll-behavior:auto}

/* Version 0.6: clickable residents and buildings */
button.citizen-row{font:inherit;color:inherit;background:transparent;border:0;width:100%;cursor:pointer;text-align:left;padding:5px 3px;}
button.citizen-row:hover{background:rgba(180,203,176,.13);border-radius:5px;}
.entity-info{padding:10px 2px;color:#d1dbc9;font-size:12px;line-height:1.55;}