/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@16.4.3_@babel+core@8.1.0_@types+node@20.11.20_react-dom@19.3.0_react@19.3.0__react@19.3.0/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.pnpm/next@16.4.3_@babel+core@8.1.0_@types+node@20.11.20_react-dom@19.3.0_react@19.3.0__react@19.3.0/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/components/game/city-view.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.city-shell{--ink:#11292c;--panel:#173035;--gold:#c8a872;--paper:#f3e9d2;--muted:#bbc7bd;position:relative;width:100%;height:100dvh;min-height:480px;overflow:hidden;background:#18363b;color:var(--paper);font-family:Inter,system-ui,sans-serif;isolation:isolate}
.city-shell button{cursor:pointer;font:inherit}.city-shell button:disabled{cursor:not-allowed}.city-header{position:absolute;z-index:10;inset:0 0 auto;display:flex;align-items:center;gap:24px;height:84px;padding:10px max(22px,env(safe-area-inset-left)) 10px max(22px,env(safe-area-inset-right));background:linear-gradient(180deg,#0f292ef8,#173238f2);border-bottom:1px solid #b99b66;box-shadow:0 8px 26px #081e22a8}.brand{display:flex;align-items:center;gap:11px;min-width:208px;white-space:nowrap}.brand-mark{display:grid;place-content:center;width:42px;height:50px;border:1px solid #d3b47c;background:linear-gradient(145deg,#a35f49,#532d2b);box-shadow:inset 0 0 0 3px #5a302b,0 3px 10px #0007;color:#f9e7bc;font:700 12px/1.1 Georgia,serif;text-align:center}.brand strong{display:block;font:800 19px/1.05 Georgia,serif;letter-spacing:.14em}.brand small{display:block;margin-top:5px;color:#d4c7ad;font:600 9px/1.2 Inter,system-ui,sans-serif;letter-spacing:.17em;text-transform:uppercase}.resources{display:flex;flex:1;min-width:0;justify-content:center;gap:7px}.resource{display:flex;align-items:center;gap:7px;min-width:91px;max-width:146px;flex:1;padding:7px 9px;background:#0d252be6;border:1px solid #53706b;border-radius:5px;box-shadow:inset 0 1px #ffffff16}.resource img{width:26px;height:26px;-o-object-fit:contain;object-fit:contain;filter:drop-shadow(0 2px 3px #0008)}.resource small{display:block;color:#b8c8bf;font-size:10px;line-height:1.1;letter-spacing:.05em}.resource b{display:block;margin-top:3px;font-variant-numeric:tabular-nums;font-size:14px;line-height:1}
.city-stage{position:absolute;inset:84px 0 78px 0;background:#142f38}.city-stage::after{position:absolute;inset:0;content:"";pointer-events:none;background:radial-gradient(ellipse at 50% 50%,transparent 48%,#10293083 100%)}.city-world{display:block;width:100%;height:100%;touch-action:none;cursor:grab;-webkit-user-select:none;-moz-user-select:none;user-select:none}.city-world:active{cursor:grabbing}.world-layer{pointer-events:auto}.city-plot.free,.city-plot.locked,.building{cursor:pointer;outline:none}.city-plot .plot-ground{fill:#9a8c67;stroke:#cdbb8b;stroke-width:2}.city-plot.free .plot-ground{fill:#77977d;stroke:#d8d19d}.city-plot.locked .plot-ground{fill:#4c5853;stroke:#7c8880}.city-plot.occupied .plot-ground{opacity:.45}.city-plot .plot-core{fill:#1c544b;stroke:#e2c98c;stroke-width:2}.city-plot.locked .plot-core{fill:#41484a;stroke:#91968b}.city-plot .plot-glyph{fill:#fff1c4;font:700 16px Inter,system-ui,sans-serif;pointer-events:none}.city-plot:hover .plot-ground,.city-plot:focus-visible .plot-ground{stroke:#fff3cc;stroke-width:3}.building.selected>polygon,.building:hover>polygon,.building:focus-visible>polygon{stroke:#fce7aa;stroke-width:3}.building-label-bg{fill:#142a2ddf;stroke:#c2a670;stroke-width:.7}.building-label{fill:#f7ead1;font:700 10px Inter,system-ui,sans-serif;letter-spacing:.01em}.construction-symbol{fill:#f8d89a;stroke:#6e392b;stroke-width:3;paint-order:stroke;font:900 20px Georgia,serif}

.city-nav{position:absolute;z-index:12;inset:auto 0 0;display:flex;align-items:center;gap:8px;height:78px;padding:9px max(22px,env(safe-area-inset-left)) calc(9px + env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-right));background:linear-gradient(180deg,#19343bf2,#10272def);border-top:1px solid #b99b66;box-shadow:0 -9px 28px #0c272c9c}.city-nav button{display:flex;align-items:center;justify-content:center;gap:11px;width:134px;height:52px;border:1px solid #71847a;border-radius:5px;background:#1a3940;color:#e9e4d0;font-size:13px;font-weight:700;min-height:44px}.city-nav button:hover,.city-nav button:focus-visible,.city-nav button.active{border-color:#dfbf80;background:#33504d;box-shadow:inset 0 0 0 1px #e4bd6a55}.nav-icon{color:#eac88f;font:600 24px/1 Georgia,serif}.nav-progress{display:flex;flex-direction:column;justify-content:center;gap:5px;min-width:190px;margin-left:auto;padding-left:18px;border-left:1px solid #607771}.nav-progress strong{font-size:13px;font-weight:650;color:#e9e7d9}
.building-panel,.research-overlay{position:absolute;z-index:20;background:linear-gradient(150deg,#254047f8,#142d33fa);border:1px solid #d2ae77;box-shadow:0 14px 38px #071d24dd,inset 0 1px #ffffff19;color:#f5ead2}.building-panel{top:110px;right:21px;width:min(336px,calc(100vw - 42px));max-height:calc(100dvh - 210px);overflow-y:auto;border-radius:7px;padding:18px}.panel-heading,.research-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.panel-heading small,.research-top small,.panel-cost small{color:#d1b77d;font-size:10px;font-weight:800;letter-spacing:.15em}.panel-heading h2,.research-top h2{margin:4px 0 10px;color:#fff0cd;font:700 23px Georgia,serif}.panel-heading button,.research-top button{display:grid;place-items:center;min-width:31px;height:31px;border:1px solid #87958a;border-radius:4px;background:#183239;color:#f9e9ce;font-size:20px}.panel-description{margin:0 0 14px;color:#cbd4c8;font-size:12px;line-height:1.5}.panel-stats{display:flex;justify-content:space-between;gap:6px;margin-bottom:15px;padding:11px;background:#102930;border:1px solid #587369;font-size:12px}.panel-stats b{font-size:15px}.panel-cost{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;color:#d6d8c9;font-size:11px}.upgrade-button{width:100%;min-height:42px;padding:10px 12px;border:1px solid #f0d29a;border-radius:4px;background:linear-gradient(180deg,#ddbd83,#bd9259);color:#182e30;font-size:13px;font-weight:800}.upgrade-button:hover{filter:brightness(1.08)}.upgrade-button:disabled{opacity:.5;filter:none}.panel-message{padding:8px 10px;border-left:2px solid #ddbf7e;background:#ffffff12;color:#f3ddae;font-size:12px;line-height:1.4}.building-options{display:grid;grid-template-columns:1fr 1fr;gap:7px}.building-options button{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-height:57px;padding:8px 9px;border:1px solid #657c70;border-radius:4px;background:#17383b;color:#f1e9cf;text-align:left;font-size:12px;font-weight:750}.building-options button small{color:#bbc9b8;font-size:10px;font-weight:500}.building-options button:hover:not(:disabled){border-color:#ddbb79;background:#31534e}.building-options button:disabled{opacity:.47}.research-overlay{top:100px;bottom:94px;right:18px;width:min(540px,calc(100vw - 36px));overflow:auto;padding:17px;border-radius:7px}
@media(max-width:1000px){.brand{min-width:168px}.brand strong{font-size:16px}.resource{min-width:70px;padding:6px}.resource img{width:23px;height:23px}.city-rank{display:none}.nav-progress{min-width:145px}}
@media(max-width:700px){.city-shell{min-height:420px}.city-header{display:grid;grid-template-columns:1fr auto;grid-template-rows:42px 36px;gap:4px 8px;height:101px;padding:6px 10px 5px}.brand{min-width:0;gap:7px}.brand-mark{width:30px;height:35px;font-size:9px}.brand strong{font-size:15px}.brand small{margin-top:2px;font-size:8px}.city-rank{display:flex;min-width:0;padding-left:8px}.city-rank span{font-size:8px}.city-rank b{font-size:11px}.resources{grid-column:1 / -1;justify-content:flex-start;gap:4px;overflow-x:auto;scrollbar-width:none}.resources::-webkit-scrollbar{display:none}.resource{flex:1 0 65px;min-width:65px;max-width:none;height:34px;padding:3px 5px;gap:3px}.resource img{width:20px;height:20px}.resource small{font-size:8px}.resource b{margin-top:1px;font-size:11px}.city-stage::after{inset:100px 0 68px}.stage-caption{top:111px;left:9px;gap:1px;padding:6px 9px}.stage-caption span{font-size:8px}.stage-caption strong{font-size:15px}.stage-caption small{font-size:9px}.camera-controls{right:9px;bottom:calc(82px + env(safe-area-inset-bottom));gap:5px}.camera-controls button{width:36px;height:36px;font-size:21px}.city-hint{display:none}.city-nav{height:calc(65px + env(safe-area-inset-bottom));padding:5px 7px calc(5px + env(safe-area-inset-bottom));gap:5px}.city-nav button{flex:1;flex-direction:column;gap:1px;width:auto;min-width:0;height:53px;font-size:10px}.nav-icon{font-size:19px}.nav-progress{display:none}.building-panel{top:auto;right:7px;bottom:calc(72px + env(safe-area-inset-bottom));left:7px;width:auto;max-height:min(47dvh,360px);padding:12px}.panel-heading h2{font-size:19px;margin-bottom:5px}.panel-description{margin-bottom:8px}.panel-stats{margin-bottom:9px;padding:8px}.building-options{grid-template-columns:1fr 1fr}.building-options button{min-height:49px;padding:6px 7px}.research-overlay{top:109px;right:7px;bottom:calc(72px + env(safe-area-inset-bottom));width:calc(100vw - 14px);padding:12px}}
@media(max-height:580px) and (min-width:701px){.city-header{height:66px}.city-nav{height:62px}.city-stage::after{inset:66px 0 62px}.stage-caption{top:77px}.camera-controls{bottom:75px}.building-panel{top:76px;max-height:calc(100dvh - 150px)}.research-overlay{top:72px;bottom:70px}}

.nav-panel{position:absolute;z-index:22;right:18px;bottom:94px;width:min(360px,calc(100vw - 36px));max-height:60dvh;overflow:auto;padding:16px;background:#173238f7;border:1px solid #d2ae77;border-radius:7px;box-shadow:0 14px 38px #071d24dd}.nav-panel .panel-heading h2{margin:0 0 14px;color:#fff0cd;font:700 22px Georgia,serif}.nav-panel-list{display:grid;gap:10px}.nav-panel-list>div{display:flex;align-items:center;gap:10px;padding:7px;background:#102930;border:1px solid #587369}.nav-panel-list img{width:25px;height:25px;-o-object-fit:contain;object-fit:contain}.nav-panel-list strong{margin-left:auto}.nav-panel-list p{margin:0;padding:10px;background:#102930;color:#f3e9d2;font-size:13px;line-height:1.4}.nav-panel-actions{display:grid;gap:8px}.nav-panel-actions button,.nav-panel-list button{padding:10px;border:1px solid #d2ae77;border-radius:4px;background:#25484a;color:#f3e9d2;text-align:left}.nav-panel-actions button:hover,.nav-panel-list button:hover{background:#3a625b}@media(max-width:700px){.nav-panel{right:7px;bottom:calc(72px + env(safe-area-inset-bottom));width:calc(100vw - 14px);max-height:47dvh;padding:12px}.city-nav .nav-progress{display:none}}
.city-inbox button{display:grid;gap:4px;min-width:0}.city-inbox button strong{margin:0;font-size:13px}.city-inbox button small{color:#c5bc9f}.city-event-detail{display:block!important;padding:10px!important}.city-event-detail h3{margin:0 0 8px;color:#fff0cd;font-size:15px}.city-event-detail p{padding:4px 0;background:none}

.nav-panel-actions select{padding:10px;border:1px solid #d2ae77;border-radius:4px;background:#25484a;color:#f3e9d2}

.nav-panel-actions .portal-link{display:block;min-height:42px;padding:10px;border:1px solid #d2ae77;border-radius:4px;background:#25484a;color:#f3e9d2;text-decoration:none;text-align:left}.nav-panel-actions .portal-link:hover,.nav-panel-actions .portal-link:focus-visible{background:#3a625b;outline:2px solid #f3d79f;outline-offset:2px}

/* Illustrated city: keep the artwork visible beneath real, save-stable plot targets. */
.illustrated-city .city-plot .plot-ground{fill:#102e2a22;stroke:#fff2c588;stroke-width:2}
.illustrated-city .city-plot.free .plot-ground{fill:#d8c58a22;stroke:#ffe3a1cc}
.illustrated-city .city-plot.locked .plot-ground{fill:#263b3b55;stroke:#c8c3a777}
.illustrated-city .city-plot .plot-core{fill:#173e3d99;stroke:#f4e2acaa}
.illustrated-city .building>polygon{fill:#9b957355}
.illustrated-city .building.selected>polygon,.illustrated-city .building:hover>polygon{fill:#d0ab6688}
.city-falling-water{fill:none;stroke:#dffaff85;stroke-width:6;stroke-linecap:round;stroke-dasharray:22 18;animation:city-water-flow 1.35s linear infinite}
.city-falling-water-fast{stroke:#ffffffb8;stroke-width:3;stroke-dasharray:12 24;animation:city-water-flow-fast .85s linear infinite}
.city-water-ripple{fill:none;stroke:#e6fcff78;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:28 36;animation:city-ripple 3.6s ease-in-out infinite alternate}
.city-petal{fill:#ffc8e0;stroke:#fff5fa88;stroke-width:.6;opacity:0;transform-box:fill-box;transform-origin:center;animation:city-petal-fall 6s ease-in-out infinite}
.city-torch{opacity:.72;mix-blend-mode:screen;transform-box:fill-box;transform-origin:center;animation:city-torch-light 1.6s ease-in-out infinite alternate}
.city-sun-glow{mix-blend-mode:screen;transform-box:fill-box;transform-origin:center;animation:city-sun-pulse 5s ease-in-out infinite alternate}
@keyframes city-water-flow{from{stroke-dashoffset:0;opacity:.75}50%{opacity:.95}to{stroke-dashoffset:-40;opacity:.75}}
@keyframes city-water-flow-fast{from{stroke-dashoffset:0}to{stroke-dashoffset:-36}}
@keyframes city-ripple{from{stroke-dashoffset:0;opacity:.35;transform:translateX(-4px)}to{stroke-dashoffset:-32;opacity:.75;transform:translateX(6px)}}
@keyframes city-petal-fall{0%{opacity:0;transform:translate(0,-8px) rotate(0deg) scale(.85)}20%{opacity:.92;transform:translate(14px,12px) rotate(35deg) scale(1)}55%{opacity:.88;transform:translate(-6px,36px) rotate(-20deg) scale(.95)}85%{opacity:.75;transform:translate(22px,58px) rotate(65deg) scale(.9)}100%{opacity:0;transform:translate(34px,76px) rotate(110deg) scale(.75)}}
@keyframes city-torch-light{0%{opacity:.48;transform:scale(.86)}45%{opacity:.82;transform:scale(1.06)}70%{opacity:.64;transform:scale(.95)}100%{opacity:.92;transform:scale(1.16)}}
@keyframes city-sun-pulse{from{opacity:.55;transform:scale(.94)}to{opacity:.9;transform:scale(1.08)}}
@media(prefers-reduced-motion:reduce){.city-falling-water,.city-falling-water-fast,.city-water-ripple,.city-petal,.city-torch,.city-sun-glow{animation:none}.city-petal{opacity:.45}}

/* Full-bleed illustrated terrain: flat platform-embedded plot targets without floating diamonds. */
.illustrated-city .city-plot .plot-ground,.illustrated-city .city-plot.free .plot-ground,.illustrated-city .city-plot.locked .plot-ground{fill:#14282418;stroke:#e6cf9944;stroke-width:1.5;stroke-dasharray:4 3}
.illustrated-city .city-plot:hover .plot-ground,.illustrated-city .city-plot:focus-visible .plot-ground{fill:#d9b86c28;stroke:#ffe7abcc;stroke-dasharray:none}
.illustrated-city .city-plot .plot-core{fill:#18332fcc;stroke:#e7cd92aa;stroke-width:1.2;opacity:.72;transition:opacity .18s ease}
.illustrated-city .city-plot .plot-glyph{opacity:.82;font-size:13px;transition:opacity .18s ease}
.illustrated-city .city-plot:hover .plot-core,.illustrated-city .city-plot:hover .plot-glyph,.illustrated-city .city-plot:focus-visible .plot-core,.illustrated-city .city-plot:focus-visible .plot-glyph{opacity:1}
.illustrated-city .building-label-bg,.illustrated-city .building-label{opacity:0;transition:opacity .18s ease}
.illustrated-city .building:hover .building-label-bg,.illustrated-city .building:hover .building-label,.illustrated-city .building.selected .building-label-bg,.illustrated-city .building.selected .building-label,.illustrated-city .building:focus-visible .building-label-bg,.illustrated-city .building:focus-visible .building-label{opacity:1}
.city-mist{fill:#e9f7ff;opacity:.22;filter:blur(9px);transform-box:fill-box;transform-origin:center;animation:city-mist-drift 5.5s ease-in-out infinite alternate}
@keyframes city-mist-drift{to{opacity:.26;transform:translate(16px,-10px)}}
@media(prefers-reduced-motion:reduce){.city-mist{animation:none}}

.panel-cost-breakdown{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;font-size:11px}.panel-cost-breakdown span{padding:4px 7px;border-radius:4px;background:#102930;border:1px solid #587369}.panel-cost-breakdown .cost-missing{border-color:#d26e5d;color:#ffb8a8}.panel-prerequisite{margin:0 0 10px;padding:6px 8px;border-radius:4px;background:#3a1f1ecc;border:1px solid #c96b5b;color:#ffd2c9;font-size:11px}

.military-status-banner{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:5px;background:#102930;border:1px solid #6b8478}.training-active-status{color:#ffe4a8;font-weight:700}.army-action-row{display:flex;gap:8px;margin:8px 0 12px}.army-action-row .army-primary-button{flex:1;background:linear-gradient(180deg,#ddbd83,#bd9259);color:#182e30;border-color:#f0d29a;font-weight:800}.city-event-detail.outcome-victory{border-left:3px solid #6ec88b}.city-event-detail.outcome-defeat{border-left:3px solid #d96b5b}.city-event-detail.outcome-draw{border-left:3px solid #d8b56c}

.illustrated-city image{image-rendering:-webkit-optimize-contrast;image-rendering:high-quality}

/* Vikings: War of Clans inspired HUD & Koban styling */
.city-header {
  background: linear-gradient(180deg, #18282e 0%, #0e1a1f 100%) !important;
  border-bottom: 2px solid #c89d54 !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,230,160,0.2) !important;
}
.resources {
  gap: 10px !important;
}
.resource {
  background: linear-gradient(180deg, #223c44 0%, #15272d 100%) !important;
  border: 1px solid #c89d54 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 2px 6px rgba(0,0,0,0.5) !important;
  border-radius: 6px !important;
  padding: 5px 10px !important;
  transition: transform 0.15s, border-color 0.15s;
}
.resource:hover {
  border-color: #ffd98a !important;
  transform: translateY(-1px);
}
.koban-display {
  display: flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(180deg, #3d2f16 0%, #241a08 100%) !important;
  border: 1px solid #f3cb69 !important;
  box-shadow: inset 0 1px 0 rgba(255,235,170,0.3), 0 2px 6px rgba(0,0,0,0.6) !important;
}
.koban-display b {
  color: #ffdf88 !important;
}
.city-nav {
  background: linear-gradient(180deg, #18282e 0%, #0e1a1f 100%) !important;
  border-top: 2px solid #c89d54 !important;
  box-shadow: 0 -4px 18px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,230,160,0.15) !important;
}
.city-nav button {
  background: linear-gradient(180deg, #233e46 0%, #14282f 100%) !important;
  border: 1px solid #7c6845 !important;
  color: #faecd3 !important;
  border-radius: 6px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1) !important;
}
.city-nav button.active, .city-nav button:hover {
  border-color: #ffd77d !important;
  background: linear-gradient(180deg, #315863 0%, #1e3a44 100%) !important;
  color: #fff4db !important;
}
.resource-pack-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 12px 0;
}
.rss-pack-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pack-title {
  font-size: 12px;
  font-weight: 700;
  color: #e5c382;
  letter-spacing: 0.05em;
}
.refill-action-btn {
  padding: 8px 12px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  border: 1px solid #b59556;
}
.pack-btn {
  background: linear-gradient(180deg, #294c56, #1b333a);
  color: #faebd2;
}
.koban-buy-btn {
  background: linear-gradient(180deg, #44351b, #2a200e);
  color: #ffe6a6;
  border-color: #d8aa4a;
}





/* --- Vikings War of Clans Multi-Channel Chat --- */
.city-chat-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 280px;
  max-height: 420px;
  background: linear-gradient(180deg, #102327 0%, #0d1b1f 100%);
  border: 1px solid #7c6239;
  border-radius: 6px;
  padding: 10px;
  box-shadow: inset 0 0 12px rgba(0,0,0,0.6);
}
.chat-channels {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid #b99b6644;
  padding-bottom: 8px;
}
.chat-channel-tab {
  flex: 1;
  padding: 6px 10px;
  background: #173238;
  border: 1px solid #635338;
  border-radius: 4px;
  color: #c9ab73;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.chat-channel-tab:hover, .chat-channel-tab.active {
  background: linear-gradient(180deg, #44321c 0%, #2a2012 100%);
  border-color: #f0c978;
  color: #fff4d4;
  box-shadow: 0 0 8px rgba(240, 201, 120, 0.25);
}
.chat-messages-container {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px;
  max-height: 240px;
}
.chat-message-row {
  background: rgba(22, 45, 50, 0.65);
  border: 1px solid #4e4028;
  border-radius: 4px;
  padding: 6px 10px;
}
.chat-message-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  margin-bottom: 3px;
}
.chat-badge {
  background: #7a541d;
  color: #fff1cf;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.05em;
  border: 1px solid #d4a753;
}
.chat-sender {
  color: #ffd88a;
  font-size: 12px;
}
.chat-time {
  margin-left: auto;
  color: #8c9fa3;
}
.chat-message-body {
  color: #f2e9db;
  font-size: 13px;
  line-height: 1.35;
  word-break: break-word;
}
.chat-input-bar {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid #b99b6644;
}
.chat-input-bar input {
  flex: 1;
  padding: 8px 12px;
  background: #091417;
  border: 1px solid #7c6239;
  border-radius: 4px;
  color: #fff;
  font-size: 13px;
}
.chat-input-bar input:focus {
  outline: none;
  border-color: #f0c978;
  box-shadow: 0 0 6px rgba(240, 201, 120, 0.35);
}
.chat-send-btn {
  padding: 8px 16px;
  background: linear-gradient(180deg, #8a6729 0%, #563d12 100%);
  border: 1px solid #f0c978;
  border-radius: 4px;
  color: #fff6de;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.chat-send-btn:hover {
  background: linear-gradient(180deg, #aa8134 0%, #6e4e17 100%);
  box-shadow: 0 0 8px rgba(240, 201, 120, 0.4);
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@16.4.3_@babel+core@8.1.0_@types+node@20.11.20_react-dom@19.3.0_react@19.3.0__react@19.3.0/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.pnpm/next@16.4.3_@babel+core@8.1.0_@types+node@20.11.20_react-dom@19.3.0_react@19.3.0__react@19.3.0/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/components/game/game-root.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.game-root {
  position: relative;
  min-height: 100dvh;
  background: #18363b;
}
.game-status {
  position: absolute;
  z-index: 30;
  top: 88px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 14px;
  border: 1px solid #d7b578;
  border-radius: 4px;
  background: #173239ed;
  color: #f5e8ce;
  font-size: 12px;
  pointer-events: none;
}

/* Keep the map readable when roofs and plot labels overlap at the opening zoom. */
.building-label-bg,
.building-label {
  opacity: 0;
  transition: opacity 120ms ease;
}
.building:hover .building-label-bg,
.building:hover .building-label,
.building:focus-visible .building-label-bg,
.building:focus-visible .building-label,
.building.selected .building-label-bg,
.building.selected .building-label {
  opacity: 1;
}

@media (max-width: 700px) {
  .resources {
    overflow-x: visible;
  }
  .resource {
    flex: 1 1 0;
    min-width: 0;
    padding: 3px 2px;
    gap: 2px;
  }
  .resource img {
    width: 16px;
    height: 16px;
    flex: none;
  }
  .resource b {
    font-size: 10px;
  }
}

.research-list {
  display: grid;
  gap: 10px;
}
.research-active,
.research-card {
  border: 1px solid #6b806f;
  border-radius: 5px;
  background: #172f33;
  padding: 12px;
}
.research-active {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-color: #d1aa68;
  color: #f4dfaf;
  font-size: 12px;
}
.research-card-head,
.research-card-head > div,
.research-meta,
.research-cost {
  display: flex;
  align-items: center;
  gap: 8px;
}
.research-card-head {
  justify-content: space-between;
}
.research-card-head h3 {
  margin: 0;
  color: #f4e8cd;
  font: 700 15px Georgia, serif;
}
.research-card-head > span,
.research-meta {
  color: #d0b47b;
  font-size: 11px;
}
.research-glyph {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border: 1px solid #d0ad72;
  border-radius: 50%;
  color: #f7dfaa;
  font-size: 12px;
}
.research-card p {
  margin: 7px 0;
  color: #bfcdc2;
  font-size: 11px;
  line-height: 1.4;
}
.research-requirement {
  color: #f0bd88;
}
.research-meta {
  justify-content: space-between;
  margin: 8px 0;
}
.research-cost {
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 9px 0;
}
.research-cost span {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 42px;
  color: #e9e2ce;
  font-size: 11px;
}
.research-cost img {
  width: 18px;
  height: 18px;
  -o-object-fit: contain;
     object-fit: contain;
}
.research-action {
  width: 100%;
  min-height: 35px;
  border: 1px solid #dfbf82;
  border-radius: 4px;
  background: #cba96e;
  color: #163036;
  font-weight: 800;
  font-size: 12px;
}
.research-action:disabled {
  opacity: .48;
}
.research-progress {
  overflow: hidden;
  height: 7px;
  border-radius: 7px;
  background: #0d2228;
}
.research-progress > div {
  height: 100%;
  background: #d2ac6b;
}
.city-shell .resources .resource{color:#eacb93;text-align:left;cursor:pointer;font:inherit}.city-shell .resources .resource span{color:#f3e9d2}.city-shell .resources .resource:hover,.city-shell .resources .resource[aria-expanded="true"]{border-color:#edcb8f;background:#24464a}.city-shell .resources .resource:focus-visible{outline:3px solid #ffe2a4;outline-offset:2px}
.resource-refill-panel{position:absolute;z-index:24;top:94px;right:max(18px,env(safe-area-inset-right));width:min(300px,calc(100vw - 20px));padding:15px;border:1px solid #dbbb82;border-radius:6px;background:#173238f7;box-shadow:0 14px 30px #05181bc7;color:#f5ead2}
.resource-refill-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.resource-refill-heading h2{margin:0;font:700 19px Georgia,serif}.resource-refill-heading button{min-width:32px;min-height:32px;border:1px solid #9caa9c;border-radius:4px;background:#24454a;color:#fff;font-size:22px}.resource-refill-panel p{margin:12px 0 0;font-size:13px;line-height:1.4}.resource-refill-panel p:last-child{color:#d8cdb8}
@media(max-width:700px){.resource-refill-panel{top:106px;right:7px;left:7px;width:auto}.city-shell .resources .resource svg{width:21px;height:21px;flex:none}}
/* The resource row owns the second mobile header row; the rank must not create a third row. */
@media(max-width:700px){.city-header .city-rank{display:none}}

/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@16.4.3_@babel+core@8.1.0_@types+node@20.11.20_react-dom@19.3.0_react@19.3.0__react@19.3.0/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.pnpm/next@16.4.3_@babel+core@8.1.0_@types+node@20.11.20_react-dom@19.3.0_react@19.3.0__react@19.3.0/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/components/game/world-map.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.world-map-open{position:absolute;z-index:14;top:96px;right:18px;padding:10px 15px;border:1px solid #ddb979;border-radius:5px;background:#173238;color:#f7e8ca;font-weight:800;box-shadow:0 5px 18px #081d22a8}
.world-map-overlay{position:absolute;z-index:25;top:84px;right:0;bottom:0;left:0;display:flex;flex-direction:column;background:#142d32;color:#f4e8cf;overflow:hidden}
.world-map-overlay[hidden]{display:none!important}
.world-map-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 18px;background:#10272d;border-bottom:1px solid #b99b66}
.world-map-top small{color:#c9ab73;font-size:10px;letter-spacing:.14em}.world-map-top h2{margin:2px 0;color:#fff0cd;font:700 23px Georgia,serif}
.world-map-top button,.world-map-controls button,.world-map-detail button{min-height:38px;padding:7px 12px;border:1px solid #d4b57e;border-radius:4px;background:#24474a;color:#fff0cd}
.world-map-viewport{position:relative;flex:1;min-height:0;overflow:hidden;touch-action:none;cursor:grab;background:radial-gradient(ellipse at center,#46695d,#254a4b 65%,#16343a)}
.world-map-viewport:active{cursor:grabbing}
.world-map-canvas{position:absolute;left:50%;top:50%;width:max(100%,760px);height:max(100%,570px);transform-origin:center;translate:-50% -50%;box-shadow:0 0 0 2px #d0af7380;-webkit-user-select:none;-moz-user-select:none;user-select:none}
.world-map-tiles{display:grid;grid-template-rows:repeat(15,1fr);width:100%;height:100%}
.world-terrain{box-shadow:inset 0 0 0 1px #102e3024}.world-terrain-plains{background:#668965}.world-terrain-forest{background:#3e654e}.world-terrain-hills{background:#718271}
.world-player-city,.world-target{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;translate:-50% -50%;min-width:38px;min-height:38px;padding:3px 5px;border-radius:6px;text-align:center;text-shadow:0 1px 3px #001a1a;font-size:22px}
.world-player-city{z-index:2;border:2px solid #ffe2a2;background:#693f35}.world-target{z-index:3;border:2px solid #c2d7a2;background:#1e4e47;color:#fff0d6;cursor:pointer}
.world-target-resource{border-color:#d8bb7d;background:#685939}.world-target.selected,.world-target:hover,.world-target:focus-visible{outline:3px solid #fff2cb;outline-offset:2px}
.world-player-city small,.world-target small{font-size:10px;font-weight:800;white-space:nowrap}
.world-map-controls{position:absolute;right:16px;bottom:16px;display:flex;gap:6px}.world-map-controls button{min-width:38px;font-size:20px}
.world-map-detail{position:absolute;left:16px;bottom:16px;width:min(310px,calc(100vw - 110px));max-height:45%;overflow:auto;padding:14px;border:1px solid #d9b775;border-radius:6px;background:#173238f5;box-shadow:0 8px 24px #071c1ccc}
.world-map-detail>button{float:right;min-width:32px;font-size:18px}.world-map-detail small{color:#d7b879;font-size:10px;letter-spacing:.12em}.world-map-detail h3{margin:4px 0 10px;font:700 20px Georgia,serif}.world-map-detail p{margin:6px 0;font-size:13px}
@media(max-width:700px){.world-map-open{top:111px;right:9px;padding:8px 10px}.world-map-overlay{top:101px}.world-map-top{padding:8px 10px}.world-map-top h2{font-size:19px}.world-map-canvas{width:760px;height:570px}.world-map-controls{right:8px;bottom:8px;flex-direction:column}.world-map-detail{left:8px;bottom:8px;width:min(240px,calc(100vw - 68px));max-height:38%;padding:9px}}

.world-march-status{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:7px 18px;background:#203e42;border-bottom:1px solid #8b7958;font-size:13px}
.world-march-status button{min-height:34px;padding:5px 10px;border:1px solid #d4b57e;border-radius:4px;background:#24474a;color:#fff0cd}
.world-march-message{color:#ffe09e}
.world-map-detail button:disabled{opacity:.5;cursor:not-allowed}
@media(max-width:700px){.world-march-status{padding:5px 10px;font-size:11px}}
.city-expedition-status{position:absolute;z-index:14;top:148px;right:18px;max-width:min(310px,calc(100vw - 36px));padding:7px 11px;border:1px solid #d4b57e;border-radius:4px;background:#173238;color:#fff0cd;font-size:12px;box-shadow:0 5px 18px #081d22a8}
@media(max-width:700px){.city-expedition-status{top:159px;right:9px;max-width:230px;font-size:11px}}