/* Giao diện chính thức: Grand Strategy miền Tây × Tĩnh Nhiên */
:root {
  --forest: #173d28;
  --forest-2: #245c3b;
  --jade: #3d7652;
  --gold: #c99a32;
  --gold-soft: #ecd88f;
  --paper: rgba(252, 244, 216, .96);
  --paper-soft: rgba(255, 250, 230, .91);
  --ink: #233426;
  --shadow: 0 14px 42px rgba(35, 47, 27, .28);
}

html, body { background: #d6c681; }
.app-shell { background: #e9ddb2; }

.top-header {
  min-height: 96px;
  padding: 12px 30px;
  border-bottom: 1px solid rgba(120, 86, 20, .35);
  background:
    radial-gradient(circle at 82% -20%, rgba(255, 248, 204, .92), transparent 38%),
    linear-gradient(110deg, rgba(255, 250, 226, .98), rgba(237, 220, 166, .96));
  box-shadow: 0 7px 20px rgba(66, 53, 21, .2);
}
.top-header::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .24;
  background-image: repeating-linear-gradient(3deg, transparent 0 7px, rgba(114, 84, 24, .05) 8px 9px);
}
.top-header::after { height: 3px; opacity: .85; }
.brand { position: relative; z-index: 1; }
.brand-mark {
  width: 76px;
  height: 76px;
  font-size: 34px;
  border: 3px solid #dcb650;
  background:
    radial-gradient(circle at 50% 45%, #3f8052 0 33%, #185036 34% 59%, #d5a430 60% 66%, #f7e5a7 67% 70%, #16452f 71%);
  box-shadow: inset 0 0 0 2px #f1d576, 0 7px 18px rgba(32, 55, 30, .28);
}
.brand-copy strong { font-size: clamp(25px, 2.25vw, 34px); color: #173e29; letter-spacing: .1px; }
.brand-copy small { color: #685d39; font-size: 14px; }
.clock-block, .weather-chip, .search-box, .action-button {
  border-color: rgba(155, 113, 27, .42);
  background: linear-gradient(180deg, rgba(255, 252, 232, .96), rgba(237, 220, 166, .9));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 4px 12px rgba(77,57,18,.12);
}
.assistant-link, .admin-link {
  color: #f7e7a8;
  background: linear-gradient(180deg, #2d6540, #153c28);
  border-color: #caa039;
}
.admin-link { white-space: nowrap; }

.main-navigation {
  height: 58px;
  padding: 5px 4.6%;
  border-top: 1px solid rgba(255,255,255,.7);
  border-bottom: 2px solid #ad8128;
  background:
    repeating-linear-gradient(0deg, transparent 0 9px, rgba(106,76,22,.035) 10px),
    linear-gradient(180deg, #fff6cf, #dfc98d);
}
.nav-item {
  border-right-color: rgba(122, 89, 28, .24);
  border-radius: 6px;
  color: #2d3d2e;
  font-size: 15px;
  font-weight: 600;
}
.nav-item:hover, .nav-item.active {
  color: #f8df7d;
  background: linear-gradient(180deg, #2e6a45, #173e29);
  box-shadow: inset 0 0 0 2px #d6ae45, 0 4px 13px rgba(40,52,30,.2);
}

.map-workspace {
  min-height: calc(100vh - 154px);
  background:
    linear-gradient(180deg, rgba(245, 217, 135, .08), rgba(32, 58, 36, .15)),
    url('/tph-grand-strategy-map.svg') center center / cover no-repeat,
    #789154;
}
.map-workspace::before {
  background:
    linear-gradient(90deg, rgba(33, 49, 28, .16), transparent 19%, transparent 81%, rgba(33,49,28,.16)),
    radial-gradient(circle at 50% 45%, transparent 25%, rgba(80, 61, 17, .08) 100%);
}
.map-workspace::after { box-shadow: inset 0 0 130px rgba(51, 42, 19, .27); }
.sun-glow { opacity: .35; }
.ambient-cloud { opacity: .42; }
.boat { display: none; }
.water-shimmer { opacity: .14; }

.side-panel, .news-panel, .contact-panel {
  border: 2px solid rgba(174, 126, 32, .64);
  border-radius: 10px;
  background:
    repeating-linear-gradient(1deg, transparent 0 12px, rgba(125,91,26,.026) 13px),
    var(--paper);
  box-shadow: 0 14px 34px rgba(35, 42, 22, .3);
}
.side-panel { width: 300px; top: 24px; max-height: calc(100% - 185px); }
.conversation-panel { left: 25px; }
.task-panel { right: 25px; }
.panel-heading, .dock-heading, .contact-summary {
  color: #fff0b6;
  background:
    linear-gradient(180deg, rgba(58,112,73,.96), rgba(20,59,39,.98));
  border-bottom: 1px solid #d6af48;
}
.panel-heading strong, .dock-heading strong, .contact-summary strong { letter-spacing: .4px; }
.panel-heading small { color: #f0e3ad; }
.chat-tabs, .task-tabs { background: rgba(237,222,174,.5); }
.chat-tabs button.active, .task-tabs button.active { background: #285f3d; color: #ffe7a0; }
.chat-message, .task-item { border-bottom-color: rgba(124, 92, 30, .18); }
.avatar, .task-item > span:first-child {
  border: 1px solid #d6ad43;
  background: linear-gradient(145deg, #6a8a50, #1e6040);
}
.panel-footer-button { border-color: #caa64b; background: linear-gradient(180deg, #fff1bc, #e1cc8b); }

.hotspot span {
  padding: 7px 13px 8px;
  border: 2px solid #d0a535;
  border-radius: 4px;
  color: #ffe59a;
  font-size: 12px;
  background: linear-gradient(180deg, rgba(45,92,57,.98), rgba(19,56,37,.98));
  box-shadow: 0 8px 18px rgba(16, 40, 24, .34), inset 0 0 0 1px rgba(255,255,255,.1);
}
.hotspot::after { background: linear-gradient(#d9b34c, transparent); }
.hotspot-headquarters { left: 49.5%; top: 15%; }
.hotspot-branch { left: 31%; top: 24%; }
.hotspot-leaders { left: 27.8%; top: 44%; }
.hotspot-market { left: 69.8%; top: 21%; }
.hotspot-weather { left: 71%; top: 40%; }
.hotspot-support { left: 61%; top: 59%; }
.hotspot-collective { left: 76%; top: 73%; }
.hotspot-data { left: 31%; top: 69%; }
.hotspot-honor { left: 50.5%; top: 80%; }

.bottom-dock { left: 25px; right: 25px; bottom: 17px; grid-template-columns: 1fr 395px; }
.news-rotator { min-height: 102px; }
.news-card { grid-template-columns: 62px 1fr; }
.news-card > span { width: 58px; height: 58px; border: 1px solid rgba(172,126,34,.3); background: rgba(222,198,121,.28); }
.contact-details button { color: #183f2a; }

.modal-window {
  border: 2px solid #bd9134;
  border-radius: 14px;
  background:
    repeating-linear-gradient(2deg, transparent 0 13px, rgba(120,87,26,.035) 14px),
    linear-gradient(145deg, #fff8d7, #e9d9a7);
}
.modal-option { border-color: rgba(139,98,23,.25); background: rgba(255,251,226,.76); }
.modal-option:hover { background: rgba(223,228,186,.72); }
.modal-option.is-entry { box-shadow: inset 4px 0 0 #2d704a; }

@media (max-width: 1250px) {
  .side-panel { width: 270px; }
  .bottom-dock { grid-template-columns: 1fr 330px; }
  .hotspot span { font-size: 10px; }
}