@charset "UTF-8";
/* ==========================================================================
   DIRILIŞ ONLINE - FULL UI SHELL
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  --left-sidebar-offset: 90px;
  --right-sidebar-offset: 190px;
  --dirilis-bg-dark: #0d0a07;
  --dirilis-panel-bg: rgba(22, 17, 12, 0.94);
  --dirilis-panel-border: #4a3622;
  --dirilis-gold-accent: #e5b85c;
  --dirilis-gold-glow: rgba(229, 184, 92, 0.4);
  --dirilis-text-bright: #fffdf9;
  --dirilis-text-muted: #a39585;
  --dirilis-wood-gradient: linear-gradient(180deg, #3d2b1b 0%, #24170d 100%);
  --dirilis-gold-button: linear-gradient(180deg, #d4a748 0%, #8c671e 100%);
  --dirilis-red-button: linear-gradient(180deg, #992222 0%, #520f0f 100%);
  --dirilis-blue-button: linear-gradient(180deg, #1d5599 0%, #0d284d 100%);
  --dirilis-green-button: linear-gradient(180deg, #22c55e 0%, #15803d 100%);
  --dirilis-font-family: 'Cinzel', 'Trajan Pro', Georgia, serif;

  /* Backward-compatibility aliases */
  --targun-bg-dark: var(--dirilis-bg-dark);
  --targun-panel-bg: var(--dirilis-panel-bg);
  --targun-panel-border: var(--dirilis-panel-border);
  --targun-gold-accent: var(--dirilis-gold-accent);
  --targun-gold-glow: var(--dirilis-gold-glow);
  --targun-text-bright: var(--dirilis-text-bright);
  --targun-text-muted: var(--dirilis-text-muted);
  --targun-wood-gradient: var(--dirilis-wood-gradient);
  --targun-gold-button: var(--dirilis-gold-button);
  --targun-red-button: var(--dirilis-red-button);
  --targun-blue-button: var(--dirilis-blue-button);
  --targun-green-button: var(--dirilis-green-button);
  --targun-font-family: var(--dirilis-font-family);
}

body.left-sidebar-is-collapsed,
.app-layout.left-sidebar-is-collapsed {
  --left-sidebar-offset: 0px;
}

body.sidebar-is-collapsed,
.app-layout.sidebar-is-collapsed {
  --right-sidebar-offset: 0px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  user-select: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(229, 184, 92, 0.4) rgba(10, 16, 28, 0.35);
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: rgba(10, 16, 28, 0.35);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb {
  background: rgba(229, 184, 92, 0.4);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(229, 184, 92, 0.75);
}

html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--dirilis-bg-dark);
  color: var(--dirilis-text-bright);
  position: fixed;
  inset: 0;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
  min-height: 100dvh;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  display: block;
}

/* App Container Layout - Full Viewport Overlay Shell */
.app-layout {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
  overflow: hidden;
}

/* ==========================================================================
   LEFT SIDEBAR (NAVIGATION MENU & AVATAR XP BAR)
   ========================================================================== */
/* ==========================================================================
   LEFT SIDEBAR (COHESIVE TROOP-BAR DOCK THEME & COLLAPSIBLE OVERLAY)
   ========================================================================== */
.left-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 88px;
  min-width: 88px;
  max-width: 88px;
  height: 100%;
  background: linear-gradient(180deg, rgba(32, 24, 18, 0.94) 0%, rgba(18, 13, 9, 0.96) 100%);
  border-right: 1.5px solid rgba(229, 184, 92, 0.32);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 6px;
  z-index: 85;
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.7);
  user-select: none;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(229, 184, 92, 0.35) transparent !important;
  box-sizing: border-box;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, visibility 0.28s;
}

.left-sidebar::-webkit-scrollbar {
  width: 4px;
}

.left-sidebar::-webkit-scrollbar-thumb {
  background: rgba(229, 184, 92, 0.35);
  border-radius: 4px;
}

.left-sidebar.collapsed {
  transform: translateX(-100%) !important;
  border-right: none !important;
  box-shadow: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Left Sidebar Toggle Handle Button */
.left-sidebar-toggle-btn {
  position: fixed !important;
  left: 88px !important;
  top: calc(50% + 20px) !important;
  transform: translateY(-50%) !important;
  width: 26px;
  height: 44px;
  background: linear-gradient(90deg, rgba(18, 12, 8, 0.98) 0%, rgba(42, 30, 20, 0.96) 100%);
  border: 1.5px solid rgba(229, 184, 92, 0.35);
  border-left: none;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  color: #fbbf24;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 95 !important;
  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.7);
  transition: left 0.28s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease;
}

body.left-sidebar-is-collapsed .left-sidebar-toggle-btn,
.app-layout.left-sidebar-is-collapsed .left-sidebar-toggle-btn {
  left: 0px !important;
}

.left-sidebar-toggle-btn:hover {
  background: linear-gradient(90deg, rgba(28, 18, 11, 1) 0%, rgba(62, 44, 28, 0.98) 100%);
  border-color: #fbbf24;
  color: #ffffff;
}

/* Avatar / Player Score Badge */
.avatar-xp-badge {
  width: 100%;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 6px 8px;
  margin-bottom: 6px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
  transition: all 0.15s ease;
}

.avatar-xp-badge:hover {
  background: rgba(229, 184, 92, 0.08);
  border-color: rgba(229, 184, 92, 0.35);
}

.avatar-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 6px;
  border: 1.5px solid rgba(229, 184, 92, 0.45);
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.0rem;
  margin-bottom: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
}

.xp-info {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}

.xp-title {
  font-size: 11px;
  font-weight: 500;
  color: #94a3b8;
}

.xp-val {
  font-size: 12px;
  font-weight: 800;
  color: #ffffff;
  margin-top: 0;
}

.xp-bar-fill {
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #15803d, #22c55e);
  border-radius: 9999px;
  margin-top: 3px;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.4);
}

.menu-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.menu-item-btn {
  background: transparent !important;
  border: none !important;
  border-radius: 8px;
  padding: 3px 2px;
  min-height: 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #cbd5e1;
  font-size: 11.5px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: none !important;
  position: relative;
}

.menu-item-btn span {
  text-align: center;
  line-height: 1.15;
  word-break: break-word;
  max-width: 100%;
  display: block;
  font-size: 11.5px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

.menu-item-btn:hover {
  border: none !important;
  transform: translateY(-2px);
  background: transparent !important;
  box-shadow: none !important;
  color: #ffffff;
}

.menu-item-btn:hover span {
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.65), 0 1px 3px rgba(0, 0, 0, 0.9);
}

.menu-item-btn .item-icon {
  font-size: 0.95rem;
  margin-bottom: 1px;
}

.menu-item-btn .item-icon-3d {
  width: 40px;
  height: 40px;
  object-fit: contain;
  margin-bottom: 2px;
  border-radius: 0;
  flex-shrink: 0;
  display: block;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.75));
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), filter 0.2s ease;
}

.menu-item-btn:hover .item-icon-3d {
  transform: scale(1.16);
  filter: drop-shadow(0 4px 10px rgba(245, 197, 66, 0.65));
}


.quick-village-btn {
  margin-top: auto;
  width: 100%;
  background: linear-gradient(135deg, #d97706 0%, #b45309 50%, #78350f 100%);
  color: #ffffff;
  border: 1.5px solid #fde68a;
  padding: 8px 4px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  box-shadow: 0 6px 18px rgba(217, 119, 6, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.quick-village-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.65), inset 0 1px 2px #ffffff;
  border-color: #ffffff;
}

.btn-sidebar-logout {
  width: 100%;
  margin-top: 8px;
  font-size: 0.74rem;
  padding: 8px 4px;
  background: linear-gradient(180deg, rgba(220, 38, 38, 0.22) 0%, rgba(153, 27, 27, 0.32) 100%);
  border: 1px solid rgba(239, 68, 68, 0.45);
  border-radius: 10px;
  color: #fca5a5;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-sidebar-logout:hover {
  background: linear-gradient(180deg, #dc2626 0%, #991b1b 100%);
  color: #ffffff;
  border-color: #ef4444;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.5);
  transform: translateY(-1px);
}

/* ==========================================================================
   CENTER MAIN GAME AREA (CANVAS MAP OR VILLAGE VIEW)
   ========================================================================== */
.center-game-area {
  position: absolute;
  inset: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: #2d5a27;
  overflow: hidden;
}

#worldMapCanvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

/* ==========================================================================
   DIRILIŞ ONLINE IN-VILLAGE OVAL PALISADE & BUILDING PLOTS (İÇ KÖY UI)
   ========================================================================== */
.village-view-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 50%, #162410 0%, #0a1107 100%);
  display: block;
  padding: 0 !important;
  margin: 0 !important;
  z-index: auto !important;
  overflow: hidden;
  user-select: none;
}

.village-top-header {
  position: absolute;
  top: 38px;
  left: calc(var(--left-sidebar-offset, 88px) + 14px);
  right: calc(var(--right-sidebar-offset, 188px) + 34px);
  width: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  z-index: 75;
  pointer-events: none;
  gap: 12px;
  transition: left 0.28s cubic-bezier(0.16, 1, 0.3, 1), right 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.village-top-header > * {
  pointer-events: auto;
}

@media (min-width: 769px) {
  body:not(.in-village) .village-top-header {
    display: none !important;
  }
}

html[data-device-orientation="landscape"] body:not(.in-village) .village-top-header,
body[data-device-orientation="landscape"]:not(.in-village) .village-top-header,
html.mobile-landscape-mode body:not(.in-village) .village-top-header,
body.mobile-landscape-mode:not(.in-village) .village-top-header {
  display: none !important;
}

/* STRICTLY hide Village Construction Queue Bar when in Map View (Mobile portrait, landscape, desktop) */
body:not(.in-village) #villageConstructionQueueBar,
body:not(.in-village) .village-construction-queue-bar,
.center-game-area:not(.in-village) #villageConstructionQueueBar,
.center-game-area.in-map #villageConstructionQueueBar,
body.in-map #villageConstructionQueueBar,
body.in-map .village-construction-queue-bar {
  display: none !important;
}

.village-construction-queue-bar {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  pointer-events: auto;
}

.village-queue-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  font-size: 10px;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(245, 158, 11, 0.4);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fde047;
  white-space: nowrap;
  user-select: none;
}

.village-name-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(18, 13, 9, 0.9);
  border: 1px solid rgba(229, 184, 92, 0.3);
  padding: 4px 12px;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
}

.village-name-badge-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.village-title {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--dirilis-gold-accent);
}

.village-sub-badge {
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--dirilis-text-bright);
}

.village-workers-badge {
  color: var(--dirilis-gold-accent);
}

.village-header-right-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  z-index: 60;
  margin-left: auto !important;
  pointer-events: auto;
}

.village-back-to-map-btn {
  box-shadow: 0 4px 14px rgba(212, 167, 72, 0.4);
  align-self: flex-end;
  margin-left: auto !important;
  cursor: pointer;
  pointer-events: auto;
  width: 121px !important;
  min-width: 121px !important;
  max-width: 121px !important;
  height: 30px !important;
  min-height: 30px !important;
  font-size: 11px !important;
  padding: 4px 8px !important;
  border-radius: 7px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Dedicated Viewport (Fixed 100% Window, Seamless Full-Screen) */
.village-scroll-viewport {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  display: block;
  overflow: hidden;
  user-select: none;
  touch-action: none;
  z-index: 1;
}

/* FULL WINDOW VILLAGE BOARD (Fills 100% Screen Edge-to-Edge, Scales with Screen Size) */
.palisade-wall-wrapper {
  position: absolute;
  inset: auto;
  aspect-ratio: var(--mobile-village-aspect, 4000 / 2232);
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: url('assets/map/new-villagebg-compressed.webp') center center / cover no-repeat;
  display: block;
  box-shadow: none !important;
  overflow: hidden;
  container-type: inline-size;
  transition: background-image 0.4s ease-in-out;
  will-change: transform;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform-style: flat;
  contain: layout paint style;
}

/* Pan & Zoom Performance Isolation: Freeze animations & hover hits while panning */
.village-scroll-viewport.is-panning,
.village-scroll-viewport.is-panning * {
  pointer-events: none !important;
  cursor: grabbing !important;
}

.village-scroll-viewport.is-panning .construct-pulse-hammer {
  animation-play-state: paused !important;
}

#buildingLabelsCanvas,
#buildingLabelsCanvas *,
.building-label-only-node,
.building-label-only-node * {
  pointer-events: none !important;
}
.palisade-wall-wrapper.is-portrait {
  aspect-ratio: 1792 / 2400 !important;
  background-size: 100% 100% !important;
  background-position: center center !important;
}
.palisade-wall-wrapper:not(.is-portrait) {
  aspect-ratio: 4000 / 2232 !important;
  background-size: 100% 100% !important;
  background-position: center center !important;
}
.palisade-wall-wrapper.is-portrait,
html.mobile-portrait-mode .palisade-wall-wrapper {
  background-image: url('assets/map/new-villagebg-portrait-compressed.webp');
  background-size: 100% 100% !important;
}

/* Village Board Frame: Preserves exact 4000/2232 aspect ratio in portrait mode */
.village-board-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  container-type: inline-size;
}

.palisade-wall-wrapper.is-portrait .village-board-frame {
  position: absolute !important;
  inset: auto !important;
  width: var(--mobile-cluster-scale-pct, 95%) !important;
  aspect-ratio: 4000 / 2232 !important;
  height: auto !important;
  left: calc(50% + var(--mobile-cluster-ox, 0%)) !important;
  top: calc(50% + var(--mobile-cluster-oy, 0%)) !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none;
}
.palisade-wall-wrapper.is-portrait .village-board-frame > * {
  pointer-events: auto;
}
.palisade-wall-wrapper.is-portrait .village-board-frame > #villageTorchMarkersLayer,
.palisade-wall-wrapper.is-portrait .village-board-frame > #villageTorchMarkersBehindLayer,
.palisade-wall-wrapper.is-portrait .village-board-frame > #villageLivestockBehindCanvas,
.palisade-wall-wrapper.is-portrait .village-board-frame > #villageLivestockFrontCanvas,
.palisade-wall-wrapper.is-portrait .village-board-frame > #villageLivestockMarkersLayer,
.palisade-wall-wrapper.is-portrait .village-board-frame > #villageVillagersRoadCanvas,
.palisade-wall-wrapper.is-portrait .village-board-frame > #villageVillagersBehindCanvas,
.palisade-wall-wrapper.is-portrait .village-board-frame > #villageVillagersFrontCanvas,
.palisade-wall-wrapper.is-portrait .village-board-frame > #villageVillagersMarkersLayer,
.palisade-wall-wrapper.is-portrait .village-board-frame > #villageLightingBehindCanvas,
.palisade-wall-wrapper.is-portrait .village-board-frame > #buildingMapCanvas,
.palisade-wall-wrapper.is-portrait .village-board-frame > #buildingLabelsCanvas,
.palisade-wall-wrapper.is-portrait .village-board-frame > #villageWallLayer {
  pointer-events: none;
}

/* Dynamic Wall Overlay Layer */
.village-wall-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('assets/map/village_wall_overlay_XL.png') center center / 100% 100% no-repeat;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}

.village-wall-layer.active {
  opacity: 1;
}

.village-left-actions {
  position: absolute;
  left: calc(var(--left-sidebar-offset, 110px) + 32px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 120;
  pointer-events: auto;
  transition: left 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.village-right-actions,
.map-right-actions {
  position: absolute;
  right: calc(var(--right-sidebar-offset, 235px) + 32px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 120;
  pointer-events: auto;
  transition: right 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Strictly hide Map-only elements when in Village View (Global) */
.center-game-area.in-village #btnCenterOwnVillage,
.center-game-area.in-village #centerHudBar,
.center-game-area.in-village #hudTimeWeatherCapsule,
.center-game-area.in-village #mapCenterCoordsBar,
.center-game-area.in-village #mapRightActions,
.center-game-area.in-village #mapMovementHudRow,
.center-game-area.in-village #foundVillageTopBar {
  display: none !important;
}

/* Touch-action protection for smooth zooming and panning */
.palisade-wall-wrapper,
.palisade-wall-board,
#palisadeWallBoard,
#buildingMapCanvas,
.building-plots-grid,
.building-plot,
.village-scroll-viewport {
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

.action-circle-btn {
  width: 62px;
  height: 62px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(32, 24, 18, 0.86) 0%, rgba(18, 13, 9, 0.90) 100%);
  border: 1.5px solid rgba(229, 184, 92, 0.4);
  color: #cbd5e1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  font-weight: 400;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  position: relative;
}

/* Movement Buttons (Gelen, Giden, Destek): Faded & Grey Border when Inactive */
.action-circle-btn.action-btn-danger:not(.movement-active),
.action-circle-btn.action-btn-warning:not(.movement-active),
.action-circle-btn.action-btn-info:not(.movement-active) {
  border-color: rgba(148, 163, 184, 0.42) !important;
  color: #94a3b8 !important;
  opacity: 0.62;
}

.action-circle-btn.action-btn-danger:not(.movement-active) span,
.action-circle-btn.action-btn-warning:not(.movement-active) span,
.action-circle-btn.action-btn-info:not(.movement-active) span {
  color: #94a3b8 !important;
}

.action-circle-btn.action-btn-danger:not(.movement-active) .action-icon-3d,
.action-circle-btn.action-btn-warning:not(.movement-active) .action-icon-3d,
.action-circle-btn.action-btn-info:not(.movement-active) .action-icon-3d {
  filter: grayscale(0.55) brightness(0.82) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
}

/* Movement Buttons when Active (.movement-active): Full Vibrant Color & Colored Border */
.action-circle-btn.action-btn-danger.movement-active {
  border-color: rgba(239, 68, 68, 0.85) !important;
  color: #fca5a5 !important;
  opacity: 1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55), 0 0 12px rgba(239, 68, 68, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.action-circle-btn.action-btn-warning.movement-active {
  border-color: rgba(245, 158, 11, 0.85) !important;
  color: #fde68a !important;
  opacity: 1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55), 0 0 12px rgba(245, 158, 11, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.action-circle-btn.action-btn-info.movement-active {
  border-color: rgba(56, 189, 248, 0.85) !important;
  color: #bae6fd !important;
  opacity: 1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55), 0 0 12px rgba(56, 189, 248, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.action-circle-btn .action-icon-3d {
  width: 34px;
  height: 34px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.75));
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), filter 0.2s ease;
}

.action-circle-btn:hover {
  opacity: 1 !important;
}

.action-circle-btn:hover .action-icon-3d {
  transform: scale(1.12);
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.85)) brightness(1.12) !important;
}

.action-circle-btn span {
  font-size: 0.68rem;
  font-weight: 700;
  margin-top: 2px;
}

/* Map View Movement Action Badges Row (Desktop) */
.map-movement-hud-row {
  position: absolute;
  bottom: 42px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 85;
}

.map-hud-badge-btn {
  background: rgba(14, 10, 6, 0.92);
  border: 1.2px solid rgba(229, 184, 92, 0.3);
  color: #e2e8f0;
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 0.70rem;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: all 0.18s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

.map-hud-badge-btn:hover {
  transform: translateY(-1px);
  border-color: #fbbf24;
}

.map-hud-badge-btn.badge-btn-danger {
  border-color: rgba(239, 68, 68, 0.45);
  color: #fca5a5;
}

.map-hud-badge-btn.badge-btn-warning {
  border-color: rgba(245, 158, 11, 0.45);
  color: #fde68a;
}

.map-hud-badge-btn.badge-btn-info {
  border-color: rgba(56, 189, 248, 0.45);
  color: #bae6fd;
}

.hud-badge-count {
  font-size: 11px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 10px;
  line-height: 1.2;
}

.hud-badge-count.badge-danger {
  background: #ef4444;
  color: #ffffff;
}

.hud-badge-count.badge-warning {
  background: #f59e0b;
  color: #000000;
}

.hud-badge-count.badge-info {
  background: #38bdf8;
  color: #000000;
}

.action-circle-btn:hover {
  border-color: #fbbf24;
  color: #ffffff;
  background: linear-gradient(145deg, rgba(62, 44, 28, 0.96) 0%, rgba(28, 18, 11, 1) 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.8), 0 0 12px rgba(251, 191, 36, 0.3);
}

/* Explicit 100% Canvas Bounds for Building Plots */
.building-plots-grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.building-plots-grid > * {
  pointer-events: auto;
}

.building-card-node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  cursor: pointer;
  transition: box-shadow 0.2s ease;
  z-index: 30;
  width: 7.81cqw;
  height: 7.81cqw;
  user-select: none;
}

.building-card-node:hover {
  transform: translate(-50%, -50%);
  z-index: 45;
}

.building-card-node:hover .building-sprite-img {
  filter: drop-shadow(0 0 14px rgba(251, 191, 36, 0.85)) drop-shadow(0 0 6px rgba(253, 224, 71, 0.95)) brightness(1.08);
}

.building-card-node.center-main {
  width: 13.13cqw;
  height: 13.13cqw;
  z-index: 35;
}

/* ==========================================================================
   PERSPECTIVE SCALING: 3 SIRA DERİNLİK / PERSPEKTİF SİSTEMİ
   - En arkadaki 5 bina (Üst Sıra): Aynı kalsın (6.39cqw, z-index: 24)
   - Orta sıradaki binalar: %10 büyütülmüş (7.81cqw, z-index: 30)
   - Merkez bina: %30 büyütülmüş (13.13cqw, z-index: 35)
   - En alttaki 3 bina (Alt Sıra): %10 büyütülmüş (9.37cqw, z-index: 38)
   ========================================================================== */

/* 1. Arka Sıra / Üst Sıra: 5 Bina (Slot 34 Kervansaray, 35 Cephanelik, 36 Medrese, 19 Kışla, 25 Sığınak) - Orijinal Boyut */
.building-card-node.row-back,
.building-card-node[data-slot-id="34"],
.building-card-node[data-slot-id="35"],
.building-card-node[data-slot-id="36"],
.building-card-node[data-slot-id="19"],
.building-card-node[data-slot-id="25"] {
  width: 6.39cqw;
  height: 6.39cqw;
  z-index: 24;
}

.building-card-node.row-back.empty-slot,
.building-card-node.empty-slot[data-slot-id="34"],
.building-card-node.empty-slot[data-slot-id="35"],
.building-card-node.empty-slot[data-slot-id="36"],
.building-card-node.empty-slot[data-slot-id="19"],
.building-card-node.empty-slot[data-slot-id="25"] {
  width: 2.565cqw;
  height: 2.565cqw;
  min-width: 24px;
  min-height: 24px;
}

.building-card-node.row-back .building-card-name-pill,
.building-card-node[data-slot-id="34"] .building-card-name-pill,
.building-card-node[data-slot-id="35"] .building-card-name-pill,
.building-card-node[data-slot-id="36"] .building-card-name-pill,
.building-card-node[data-slot-id="19"] .building-card-name-pill,
.building-card-node[data-slot-id="25"] .building-card-name-pill {
  font-size: clamp(6.8px, 0.74cqw, 9.5px);
  padding: 1px 5px;
}

.building-card-node.row-back .building-card-lvl-pill,
.building-card-node[data-slot-id="34"] .building-card-lvl-pill,
.building-card-node[data-slot-id="35"] .building-card-lvl-pill,
.building-card-node[data-slot-id="36"] .building-card-lvl-pill,
.building-card-node[data-slot-id="19"] .building-card-lvl-pill,
.building-card-node[data-slot-id="25"] .building-card-lvl-pill {
  font-size: clamp(6.3px, 0.70cqw, 9px);
  padding: 1px 4px;
}

/* 2. Orta Sıra: 5 Bina (Slot 20 Ahır, 22 Demirhane, 15 Merkez Binası, 16 Marangoz, 28 Pazaryeri) - %10 Büyütme */
.building-card-node.row-middle,
.building-card-node[data-slot-id="20"],
.building-card-node[data-slot-id="22"],
.building-card-node[data-slot-id="16"],
.building-card-node[data-slot-id="28"] {
  width: 7.81cqw;
  height: 7.81cqw;
  z-index: 30;
}

.building-card-node.row-middle.center-main,
.building-card-node[data-slot-id="15"] {
  width: 13.13cqw;
  height: 13.13cqw;
  z-index: 35;
}

/* 3. Ön / Alt Sıra: 3 Bina (Slot 37 Tarla, 33 Taş Ocağı, 21 Fabrika) - %10 Büyütme */
.building-card-node.row-front,
.building-card-node[data-slot-id="37"],
.building-card-node[data-slot-id="33"],
.building-card-node[data-slot-id="21"] {
  width: 9.37cqw;
  height: 9.37cqw;
  z-index: 38;
}

.building-card-node.row-front.empty-slot,
.building-card-node.empty-slot[data-slot-id="37"],
.building-card-node.empty-slot[data-slot-id="33"],
.building-card-node.empty-slot[data-slot-id="21"] {
  width: 3.76cqw;
  height: 3.76cqw;
  min-width: 32px;
  min-height: 32px;
}

.building-card-node.row-front .building-card-name-pill,
.building-card-node[data-slot-id="37"] .building-card-name-pill,
.building-card-node[data-slot-id="33"] .building-card-name-pill,
.building-card-node[data-slot-id="21"] .building-card-name-pill {
  font-size: clamp(8.5px, 0.98cqw, 12px);
  padding: 1.5px 8px;
}

.building-card-node.row-front .building-card-lvl-pill,
.building-card-node[data-slot-id="37"] .building-card-lvl-pill,
.building-card-node[data-slot-id="33"] .building-card-lvl-pill,
.building-card-node[data-slot-id="21"] .building-card-lvl-pill {
  font-size: clamp(8px, 0.94cqw, 11.5px);
  padding: 1.5px 6px;
}

.building-sprite-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.2s ease;
  pointer-events: none;
}

@keyframes villageTorchTipFlamePulse {
  0% {
    transform: translate(-50%, -50%) scale(0.92);
    opacity: 0.72;
  }
  50% {
    transform: translate(-50%, -52%) scale(1.08);
    opacity: 1.0;
  }
  100% {
    transform: translate(-50%, -49%) scale(0.96);
    opacity: 0.82;
  }
}

/* ========================================================================= */
/* LIVING 3D TORCH BURNING FIRE ANIMATION SYSTEM (ISOLATED GPU LAYER)        */
/* ========================================================================= */
.torch-fire-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40%;
  pointer-events: none;
  overflow: visible;
}

.torch-flame-core {
  position: absolute;
  bottom: 8%;
  left: 27%;
  width: 46%;
  height: 84%;
  transform-origin: 50% 95%;
  border-radius: 50% 50% 35% 35% / 65% 65% 35% 35%;
  background: radial-gradient(ellipse at 50% 85%, #ffffff 0%, #fef08a 25%, #f97316 60%, rgba(220, 38, 38, 0.45) 85%, rgba(0,0,0,0) 100%);
  animation: torchFlameRoar 0.55s infinite alternate ease-in-out;
  will-change: transform, opacity;
}

.torch-flame-lick {
  position: absolute;
  bottom: 12%;
  left: 33%;
  width: 34%;
  height: 72%;
  transform-origin: 50% 95%;
  border-radius: 50% 50% 25% 25% / 75% 75% 25% 25%;
  background: radial-gradient(ellipse at 50% 80%, #fff7ed 0%, #fde047 35%, #ea580c 75%, rgba(0,0,0,0) 100%);
  animation: torchFlameLick 0.45s infinite alternate-reverse ease-in-out;
  will-change: transform, opacity;
}

.torch-ember {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fde047;
  opacity: 0;
  pointer-events: none;
}
.torch-ember-1 {
  bottom: 25%;
  left: 48%;
  animation: torchEmberRise1 1.4s infinite ease-out;
}

@keyframes torchFlameRoar {
  0% {
    transform: scale3d(0.92, 0.90, 1);
    opacity: 0.86;
  }
  50% {
    transform: scale3d(1.06, 1.09, 1);
    opacity: 1.0;
  }
  100% {
    transform: scale3d(0.98, 0.95, 1);
    opacity: 0.92;
  }
}

@keyframes torchFlameLick {
  0% {
    transform: scale3d(1.04, 0.94, 1);
    opacity: 0.84;
  }
  50% {
    transform: scale3d(0.92, 1.12, 1);
    opacity: 1.0;
  }
  100% {
    transform: scale3d(1.06, 0.98, 1);
    opacity: 0.88;
  }
}

@keyframes torchEmberRise1 {
  0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0; }
  20% { opacity: 0.95; }
  100% { transform: translate3d(-4px, -16px, 0) scale(0.3); opacity: 0; }
}

.building-card-info-plate {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: -0.3cqw;
  z-index: 2;
  pointer-events: none;
}

.building-card-title,
.building-card-name-pill {
  font-size: clamp(7.5px, 0.82cqw, 10.5px);
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
  text-align: center;
  white-space: nowrap;
  background: linear-gradient(180deg, rgba(22, 15, 10, 0.88) 0%, rgba(12, 8, 5, 0.92) 100%);
  border: 1.2px solid rgba(229, 184, 92, 0.65);
  border-radius: 6px;
  padding: 1px 7px 1px 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.50);
  line-height: 1.25;
  z-index: 1;
}

.building-card-lvl-inline,
.building-card-lvl-pill {
  background: linear-gradient(135deg, rgba(229, 184, 92, 0.75), rgba(217, 119, 6, 0.75));
  color: #120b04;
  font-size: clamp(7px, 0.78cqw, 10px);
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 6px;
  border: 1.2px solid rgba(255, 255, 255, 0.85);
  margin-left: -5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
  white-space: nowrap;
  line-height: 1.25;
  z-index: 2;
}

.building-card-lvl-inline.constructing,
.building-card-lvl-pill.constructing {
  background: #f59e0b;
  color: #0f172a;
}

.building-card-timer-badge {
  font-size: clamp(6.5px, 0.72cqw, 9.5px);
  font-weight: 800;
  color: #fde047;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid #f59e0b;
  border-radius: 5px;
  padding: 0.5px 5px;
  margin-top: 2px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  z-index: 3;
}

.building-card-node.empty-slot {
  width: 3.14cqw;
  height: 3.14cqw;
  min-width: 28px;
  min-height: 28px;
  border-radius: 7px;
  background: linear-gradient(135deg, rgba(38, 28, 18, 0.50) 0%, rgba(16, 12, 8, 0.50) 100%);
  border: 1.2px solid rgba(229, 184, 92, 0.50);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-sizing: border-box;
  overflow: hidden;
  padding: 1px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.building-card-node.wall-node {
  width: auto;
  height: auto;
  min-width: 60px;
  min-height: 28px;
  background: none;
  border: none;
  box-shadow: none;
  z-index: 40;
}

.building-card-node.wall-node .building-card-info-plate {
  margin-top: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.building-card-node.wall-node.empty-slot {
  width: 2.55cqw;
  height: 2.55cqw;
  min-width: 24px;
  min-height: 24px;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(38, 28, 18, 0.50) 0%, rgba(16, 12, 8, 0.50) 100%);
  border: 1.2px solid rgba(229, 184, 92, 0.55);
}

.building-card-node.empty-slot:hover {
  border-color: #fde047;
  background: linear-gradient(135deg, rgba(58, 42, 26, 0.98) 0%, rgba(26, 18, 11, 1) 100%);
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.8), inset 0 0 10px rgba(251, 191, 36, 0.45) !important;
  transform: translate(-50%, -50%) !important;
}

.building-card-node.slot-constructing .building-sprite-img {
  filter: var(--village-bldg-filter, none) brightness(0.92) drop-shadow(0 0 14px rgba(245, 158, 11, 0.75));
  opacity: 0.92;
}

.construct-pulse-hammer {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: hammerSwing 0.8s ease-in-out infinite alternate;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.75));
  z-index: 5;
  pointer-events: none;
}

.construct-pulse-hammer img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
}

@keyframes hammerSwing {
  0% { transform: translate(-50%, -50%) rotate(-25deg); }
  100% { transform: translate(-50%, -50%) rotate(25deg); }
}

/* FLOATING TOAST NOTIFICATION ANIMATION */
@keyframes toastFloatUpFade {
  0% {
    opacity: 0;
    transform: translate(-50%, -20px) scale(0.92);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
  75% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -35px) scale(0.95);
  }
}

.game-toast-box {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(22, 30, 44, 0.94);
  border: 1.5px solid rgba(229, 184, 92, 0.55);
  color: #ffffff;
  padding: 7px 16px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  display: none;
  align-items: center;
  gap: 8px;
  z-index: 9999999;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  pointer-events: none;
  max-width: 90vw;
  text-align: center;
}

.toast-animating {
  display: flex !important;
  animation: toastFloatUpFade 2.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Collapsible Bottom Troop Bar Dock & Toggle Handle (Floating Overlay) */
.bottom-troop-bar-dock {
  position: absolute;
  bottom: 6px;
  left: calc(var(--left-sidebar-offset, 110px) + 12px);
  right: calc(var(--right-sidebar-offset, 235px) + 12px);
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 75;
  pointer-events: none;
  transform: translateY(0);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), left 0.28s cubic-bezier(0.16, 1, 0.3, 1), right 0.28s cubic-bezier(0.16, 1, 0.3, 1), bottom 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.bottom-troop-bar-dock.collapsed {
  bottom: 0px;
  transform: translateY(100%);
}

.bottom-troop-bar-dock > * {
  pointer-events: auto;
}

.bottom-troop-bar-toggle-btn {
  position: absolute;
  top: -19px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 20px;
  background: linear-gradient(180deg, rgba(42, 30, 20, 0.96) 0%, rgba(18, 12, 8, 0.98) 100%);
  border: 1.5px solid rgba(229, 184, 92, 0.42);
  border-bottom: none;
  border-top-left-radius: 9px;
  border-top-right-radius: 9px;
  color: #fbbf24;
  font-size: 0.85rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 80;
  padding: 0;
  box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.65);
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, top 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.bottom-troop-bar-toggle-btn:hover {
  background: linear-gradient(180deg, rgba(62, 44, 28, 0.98) 0%, rgba(28, 18, 11, 1) 100%);
  border-color: #fbbf24;
  color: #ffffff;
}

.bottom-troop-bar {
  width: fit-content;
  max-width: 100%;
  height: 140px;
  min-height: 140px;
  background: linear-gradient(180deg, rgba(22, 16, 11, 0.94) 0%, rgba(10, 7, 4, 0.98) 100%);
  border: 1.5px solid rgba(229, 184, 92, 0.32);
  border-radius: 14px;
  padding: 6px 12px;
  display: flex;
  justify-content: safe center;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  z-index: 50;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.8), inset 0 1px 1px rgba(255, 255, 255, 0.08);
  scrollbar-width: thin;
  scrollbar-color: rgba(229, 184, 92, 0.35) transparent;
  transition: height 0.24s cubic-bezier(0.16, 1, 0.3, 1), min-height 0.24s cubic-bezier(0.16, 1, 0.3, 1), padding 0.24s ease, opacity 0.2s ease, border-width 0.2s ease;
}

.bottom-troop-bar.collapsed {
  pointer-events: none !important;
  box-shadow: none !important;
}

.bottom-troop-bar::-webkit-scrollbar {
  height: 5px;
}

.bottom-troop-bar::-webkit-scrollbar-thumb {
  background: rgba(229, 184, 92, 0.35);
  border-radius: 4px;
}

.troop-card-item {
  background: linear-gradient(145deg, rgba(42, 30, 20, 0.92) 0%, rgba(18, 12, 8, 0.96) 100%);
  border: 1.5px solid rgba(229, 184, 92, 0.25);
  border-radius: 12px;
  padding: 5px 4px 4px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  max-width: 82px;
  height: 118px;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
  box-sizing: border-box;
  overflow: visible;
}

.troop-card-item:hover {
  border-color: #fbbf24;
  transform: translateY(-3px);
  background: linear-gradient(145deg, rgba(62, 44, 28, 0.96) 0%, rgba(28, 18, 11, 1) 100%);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.8), 0 0 14px rgba(251, 191, 36, 0.35);
}

.troop-card-item.active-has-troops {
  border-color: rgba(251, 191, 36, 0.6);
  background: linear-gradient(145deg, rgba(52, 36, 22, 0.95) 0%, rgba(22, 15, 9, 0.98) 100%);
}

.troop-card-portrait {
  width: 54px;
  height: 54px;
  border-radius: 9px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 35%, rgba(60, 50, 42, 0.6) 0%, rgba(14, 10, 8, 0.95) 100%);
  border: 1.5px solid rgba(229, 184, 92, 0.35);
  margin-bottom: 2px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}

.troop-card-name {
  font-weight: 800;
  font-size: 11px !important;
  color: #e2e8f0;
  text-align: center;
  white-space: nowrap;
  overflow: visible !important;
  text-overflow: ellipsis;
  max-width: 80px;
  margin-top: 1px;
  margin-bottom: 1px;
  line-height: 1.35;
  padding: 0 2px 2px 2px !important;
}

.troop-card-count-badge {
  font-weight: 900;
  font-size: 11px !important;
  padding: 1px 6px !important;
  line-height: 1.2 !important;
  min-height: 16px !important;
  border-radius: 9999px;
  margin-top: 1px;
  margin-bottom: 1px;
  white-space: nowrap;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 98px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.troop-card-count-badge.has-count {
  background: linear-gradient(135deg, #15803d, #22c55e);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.45);
  border: 1px solid #4ade80;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.troop-card-count-badge.zero-count {
  background: rgba(255, 255, 255, 0.06);
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.troop-card-count-badge.locked-badge {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.35);
  font-size: 0.62rem;
  padding: 1px 5px;
}

/* Locked troops: 100% black & white */
.troop-card-item.locked {
  filter: grayscale(100%) contrast(85%) !important;
  opacity: 0.50 !important;
  border-color: rgba(148, 163, 184, 0.25) !important;
}

.troop-card-item.locked img {
  filter: grayscale(100%) contrast(80%) brightness(0.9) !important;
}

.troop-card-item.locked .troop-card-name {
  color: #94a3b8 !important;
}

.troop-card-item.locked .troop-card-portrait {
  border-color: rgba(148, 163, 184, 0.30) !important;
  filter: grayscale(100%) !important;
}

/* Strictly hide troop stats everywhere per UI redesign */
.troop-card-stats {
  display: none !important;
}

/* Responsive Scrollable Construct Modal */
#newBuildingConstructModal .modal-dark-card {
  max-height: 88vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

#constructBuildingsList {
  overflow-y: auto !important;
  max-height: calc(88vh - 120px) !important;
  padding-right: 6px !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(229, 184, 92, 0.35) transparent;
}

#constructBuildingsList::-webkit-scrollbar {
  width: 5px;
}

#constructBuildingsList::-webkit-scrollbar-thumb {
  background: rgba(229, 184, 92, 0.35);
  border-radius: 4px;
}

/* News & Patch Notes System */
.news-card {
  background: linear-gradient(145deg, rgba(35, 24, 16, 0.95) 0%, rgba(18, 12, 8, 0.98) 100%);
  border: 1.5px solid rgba(229, 184, 92, 0.3);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
}

.news-card:hover {
  border-color: rgba(229, 184, 92, 0.6);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.8), 0 0 12px rgba(229, 184, 92, 0.2);
}

.news-badge-version {
  background: linear-gradient(135deg, #0284c7, #0ea5e9);
  color: #fff;
  font-weight: 800;
  font-size: 0.65rem;
  padding: 1px 6px;
  border-radius: 5px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

.news-badge-category {
  background: rgba(229, 184, 92, 0.18);
  color: #fbbf24;
  font-weight: 700;
  font-size: 0.64rem;
  padding: 1px 6px;
  border-radius: 5px;
  border: 1px solid rgba(229, 184, 92, 0.35);
}

.news-content-body {
  font-size: 0.74rem;
  line-height: 1.45;
  color: #cbd5e1;
}

.news-content-body h2 {
  color: #fbbf24;
  margin: 10px 0 4px 0;
  font-size: 0.88rem;
  font-weight: 700;
}

.news-content-body h3 {
  color: #fbbf24;
  margin: 8px 0 4px 0;
  font-size: 0.80rem;
  font-weight: 700;
}

.news-content-body h4 {
  color: #fbbf24;
  margin: 6px 0 3px 0;
  font-size: 0.76rem;
  font-weight: 700;
}

.news-content-body ul {
  padding-left: 16px;
  margin: 4px 0;
}

.news-content-body li {
  margin-bottom: 2px;
  font-size: 0.74rem;
  line-height: 1.45;
}

/* Construct Modal */
.construct-row-item {
  background: rgba(26, 18, 12, 0.9);
  border: 1px solid var(--dirilis-panel-border);
  border-left: 4px solid #22c55e;
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.2s ease;
}

.construct-row-item:hover, .construct-row-item.selected {
  border-color: var(--dirilis-gold-accent);
  background: rgba(45, 30, 18, 0.95);
  box-shadow: 0 4px 14px var(--dirilis-gold-glow);
}

.construct-row-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.construct-row-icon {
  font-size: 1.8rem;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}

.construct-row-info {
  display: flex;
  flex-direction: column;
}

.construct-row-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #ffffff;
}

.construct-row-duration {
  font-size: 0.75rem;
  color: var(--dirilis-text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-construct-small {
  background: var(--dirilis-green-button);
  color: #ffffff;
  border: 1px solid #4ade80;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(34, 197, 94, 0.4);
}

.btn-construct-small:hover {
  filter: brightness(1.1);
  transform: scale(1.05);
}

.construct-details-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.construct-details-big-icon {
  font-size: 2.8rem;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: rgba(229, 184, 92, 0.1);
  border: 1px solid var(--dirilis-gold-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.construct-details-title-box {
  display: flex;
  flex-direction: column;
}

.construct-details-name {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--dirilis-gold-accent);
}

.construct-details-badges {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.badge-pill {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--dirilis-panel-border);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  color: var(--dirilis-text-bright);
}

.construct-description-text {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--dirilis-text-muted);
  margin-bottom: 16px;
  flex: 1;
}

.construct-cost-section-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--dirilis-gold-accent);
  margin-bottom: 8px;
  text-transform: uppercase;
}

.construct-costs-grid {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.cost-pill-badge {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--dirilis-panel-border);
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ==========================================================================
   RIGHT SIDEBAR (COHESIVE TROOP-BAR DOCK THEME & COLLAPSIBLE OVERLAY)
   ========================================================================== */
.right-sidebar {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: 188px;
  min-width: 188px;
  max-width: 188px;
  height: 100%;
  background: linear-gradient(180deg, rgba(32, 24, 18, 0.94) 0%, rgba(18, 13, 9, 0.96) 100%);
  border-left: 1.5px solid rgba(229, 184, 92, 0.32);
  display: flex;
  flex-direction: column;
  z-index: 85;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.7);
  padding: 8px 6px;
  overflow-y: auto;
  overflow-x: hidden;
  user-select: none;
  box-sizing: border-box;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, visibility 0.28s;
}

.right-sidebar.collapsed {
  transform: translateX(100%) !important;
  border-left: none !important;
  box-shadow: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Sidebar Toggle Handle Button */
.right-sidebar-toggle-btn {
  position: fixed;
  right: 188px;
  top: calc(max(50%, 380px) + 20px) !important;
  transform: translateY(-50%) !important;
  width: 26px;
  height: 44px;
  background: linear-gradient(90deg, rgba(42, 30, 20, 0.96) 0%, rgba(18, 12, 8, 0.98) 100%);
  border: 1.5px solid rgba(229, 184, 92, 0.35);
  border-right: none;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  color: #fbbf24;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 85;
  box-shadow: -4px 4px 12px rgba(0, 0, 0, 0.7);
  transition: right 0.28s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease;
}

body.sidebar-is-collapsed .right-sidebar-toggle-btn,
.app-layout.sidebar-is-collapsed .right-sidebar-toggle-btn {
  right: 0px !important;
}

body.sidebar-is-collapsed .right-chat-tabs,
.app-layout.sidebar-is-collapsed .right-chat-tabs {
  right: 0px !important;
}

.right-sidebar-toggle-btn:hover {
  background: linear-gradient(90deg, rgba(62, 44, 28, 0.98) 0%, rgba(28, 18, 11, 1) 100%);
  border-color: #fbbf24;
  color: #ffffff;
}

/* Floating Vertical Chat Tabs */
.right-chat-tabs {
  position: fixed;
  right: 188px;
  top: 64px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 85;
  transition: right 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-height: 550px) {
  .right-chat-tabs {
    top: 40px !important;
    gap: 4px !important;
  }
  .chat-tab-vertical {
    padding: 4px 2px !important;
    font-size: 10px !important;
  }
  .right-sidebar-toggle-btn {
    top: max(50%, 250px) !important;
  }
}

.chat-tab-vertical {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  background: linear-gradient(90deg, rgba(42, 30, 20, 0.96) 0%, rgba(18, 12, 8, 0.98) 100%);
  border: none !important;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  padding: 5px 2px;
  font-size: 10px !important;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #fbbf24;
  cursor: pointer;
  box-shadow: -3px 3px 10px rgba(0, 0, 0, 0.7);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.chat-tab-vertical:hover {
  border: none !important;
  color: #ffffff;
  background: linear-gradient(90deg, rgba(62, 44, 28, 0.98) 0%, rgba(28, 18, 11, 1) 100%);
  transform: rotate(180deg) translateX(3px);
  box-shadow: -6px 4px 16px rgba(251, 191, 36, 0.3);
}

.chat-tab-vertical.tab-assistant {
  background: linear-gradient(90deg, rgba(30, 58, 138, 0.96) 0%, rgba(15, 23, 42, 0.98) 100%);
  border: none !important;
  color: #93c5fd;
}

.chat-tab-vertical.tab-assistant:hover {
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.98) 0%, rgba(30, 58, 138, 1) 100%);
  border: none !important;
  color: #ffffff;
  box-shadow: -6px 4px 16px rgba(59, 130, 246, 0.4);
}

.logo-header {
  padding: 4px 4px 6px;
  text-align: center;
  border-bottom: 1px solid rgba(229, 184, 92, 0.25);
  margin-bottom: 6px;
}

.dirilis-logo-text,
.targun-logo-text {
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: #fbbf24;
  text-shadow: 0 0 6px rgba(251, 191, 36, 0.3);
}

.player-subtitle {
  font-size: 0.66rem;
  color: #94a3b8;
  margin-top: 1px;
  font-weight: 400;
}

.panel-section-title {
  padding: 3px 4px;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: #fbbf24;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
}

.shield-table-pill {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(229, 184, 92, 0.35);
  border-radius: 9999px;
  color: #fbbf24;
  font-size: 0.62rem;
  font-weight: 400;
  padding: 1px 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 3px;
  transition: all 0.15s ease;
}

.shield-table-pill:hover {
  border-color: #fbbf24;
  background: rgba(229, 184, 92, 0.2);
  transform: scale(1.04);
}

.resources-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 6px;
}

.resource-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.72rem;
  padding: 3px 6px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  transition: all 0.15s ease;
}

.resource-row:hover {
  background: rgba(229, 184, 92, 0.1);
  border-color: rgba(229, 184, 92, 0.35);
}

.resource-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  color: #cbd5e1;
  font-size: 0.72rem;
}

.res-icon-img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  vertical-align: middle;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

.resource-val {
  font-weight: 400;
  color: #f1f5f9;
  font-size: 0.72rem;
}

.cities-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 6px;
}

.city-btn {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 0.72rem;
  font-weight: 400;
  color: #f1f5f9;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
  transform: none !important;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.city-btn:hover,
.city-btn:active {
  background: rgba(229, 184, 92, 0.1);
  border-color: rgba(229, 184, 92, 0.35);
  transform: none !important;
}

.city-btn.active {
  border: 1.5px solid #22c55e;
  background: linear-gradient(145deg, rgba(21, 128, 61, 0.35), rgba(6, 78, 59, 0.45));
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.25);
  font-weight: 500;
}

.city-btn .city-name {
  color: #f1f5f9;
}

.city-btn.active .city-name {
  color: #ffffff;
}

.events-bar {
  margin-top: auto;
  padding: 6px 3px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1px solid rgba(229, 184, 92, 0.25);
}

.event-circle-btn {
  width: 52px;
  height: 56px;
  border-radius: 10px;
  border: none !important;
  background: transparent !important;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  cursor: pointer;
  position: relative;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: none !important;
}

.event-circle-btn:hover {
  transform: translateY(-2px);
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.event-circle-btn span {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

.event-circle-btn:hover span {
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.65), 0 1px 3px rgba(0, 0, 0, 0.9);
}

.event-circle-btn .event-icon-3d {
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.75));
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), filter 0.2s ease;
}

.event-circle-btn:hover .event-icon-3d {
  transform: scale(1.16);
  filter: drop-shadow(0 4px 10px rgba(245, 197, 66, 0.65));
}

/* Sleek Badge Indicator for Events and Navigation Items */
.event-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 800;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.45);
  line-height: 1;
  letter-spacing: -0.02em;
  z-index: 10;
  pointer-events: none;
  animation: pulse-badge 2.4s infinite ease-in-out;
}

.event-badge.report-badge {
  top: 3px;
  right: 5px;
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  border-color: rgba(254, 240, 138, 0.55);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), 0 0 4px rgba(245, 158, 11, 0.28);
}

.event-badge.badge-danger {
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
  border-color: rgba(252, 165, 165, 0.55);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), 0 0 4px rgba(239, 68, 68, 0.3);
}

.event-badge.badge-warning {
  background: linear-gradient(135deg, #d97706 0%, #92400e 100%);
  border-color: rgba(253, 230, 138, 0.55);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), 0 0 4px rgba(245, 158, 11, 0.3);
}

.event-badge.badge-info {
  background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
  border-color: rgba(147, 197, 253, 0.55);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), 0 0 4px rgba(59, 130, 246, 0.3);
}

@keyframes pulse-badge {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.04);
  }
}

/* ==========================================================================
   CHAT MODAL TABS (EK 3)
   ========================================================================== */
.chat-tab-switcher-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.chat-chamfer-tab-btn {
  flex: 1;
  height: 36px;
  background: linear-gradient(180deg, #322214 0%, #1e130a 60%, #140b05 100%);
  border: 1.5px solid #854d0e;
  outline: 1px solid #451a03;
  outline-offset: -3px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #fbbf24;
  cursor: pointer;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.1), 0 3px 6px rgba(0,0,0,0.7);
  transition: all 0.18s ease;
}

.chat-chamfer-tab-btn:hover, .chat-chamfer-tab-btn.active {
  border-color: #fde047;
  outline-color: #ca8a04;
  background: linear-gradient(180deg, #4a321d 0%, #2a190e 60%, #190e06 100%);
  color: #ffffff;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 4px 12px rgba(251, 191, 36, 0.4);
}

.chat-chamfer-tab-btn.tab-blue-assistant {
  background: linear-gradient(180deg, #1e3a8a 0%, #0f172a 100%);
  border-color: #3b82f6;
  outline-color: #1e3a8a;
  color: #bfdbfe;
}

.chat-chamfer-tab-btn.tab-blue-assistant:hover, .chat-chamfer-tab-btn.tab-blue-assistant.active {
  background: linear-gradient(180deg, #2563eb 0%, #1e3a8a 100%);
  border-color: #60a5fa;
  color: #ffffff;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 4px 14px rgba(59, 130, 246, 0.5);
}

/* ==========================================================================
   TOP / MOBILE HORIZONTAL RESOURCE BAR
   ========================================================================== */
.top-mobile-resource-bar {
  position: absolute;
  top: 8px;
  left: calc(50% + (var(--left-sidebar-offset, 110px) - var(--right-sidebar-offset, 235px)) / 2);
  transform: translateX(-50%);
  max-width: calc(100% - var(--left-sidebar-offset, 110px) - var(--right-sidebar-offset, 235px) - 24px);
  height: 32px;
  background: linear-gradient(180deg, rgba(22, 16, 11, 0.96) 0%, rgba(10, 7, 4, 0.98) 100%);
  border: 1.5px solid rgba(229, 184, 92, 0.32);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  gap: 16px;
  z-index: 80;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  user-select: none;
  overflow-x: auto;
  scrollbar-width: none;
  transition: left 0.28s cubic-bezier(0.16, 1, 0.3, 1), max-width 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 769px) {
  .top-mobile-resource-bar {
    min-width: 600px;
  }
}
.top-mobile-resource-bar::-webkit-scrollbar {
  display: none;
}

.tp-founding-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-right: 10px;
  border-right: 1px solid rgba(229, 184, 92, 0.3);
  cursor: pointer;
}

.tp-star-icon {
  font-size: 0.9rem;
  color: #fbbf24;
}

.tp-text {
  font-size: 0.72rem;
  font-weight: 500;
  color: #fbbf24;
  letter-spacing: 0.3px;
}

.top-inline-resources-list {
  display: flex;
  align-items: center;
  gap: 10px;
}

.inline-res-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px !important;
  font-weight: 500;
  color: #f1f5f9;
  font-variant-numeric: tabular-nums;
}

.inline-res-item span:not(.res-buff-indicator):not(.res-diamond-plus):not(.res-icon) {
  font-size: 12px !important;
}

.inline-res-item .res-icon {
  font-size: 0.9rem;
}

.inline-res-item.res-gold {
  color: #fbbf24;
  font-weight: 500;
}

.inline-res-item.res-worker {
  color: #4ade80;
  font-weight: 500;
}

.top-mobile-resource-bar .inline-res-item:not(.res-diamond) {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 4px !important;
}

.inline-res-item.res-diamond {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 6px 0 4px;
  background: rgba(6, 182, 212, 0.12);
  border: 1px solid rgba(34, 211, 238, 0.3);
  border-radius: 6px;
  cursor: pointer;
  color: #38bdf8;
  font-weight: 600;
  font-size: 0.72rem;
  transition: all 0.2s ease;
  flex-shrink: 0;
  box-sizing: border-box;
}

.inline-res-item.res-diamond:hover {
  background: rgba(6, 182, 212, 0.24);
  border-color: rgba(34, 211, 238, 0.65);
  box-shadow: 0 0 8px rgba(34, 211, 238, 0.35);
}

.inline-res-item.res-diamond .res-icon {
  font-size: 0.82rem;
  line-height: 1;
  filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.5));
}

.inline-res-item.res-diamond #topResDiamondVal {
  color: #a5f3fc;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.inline-res-item.res-diamond .res-diamond-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(34, 211, 238, 0.25);
  color: #e0f2fe;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  margin-left: 2px;
  transition: background 0.2s ease;
}

.inline-res-item.res-diamond:hover .res-diamond-plus {
  background: rgba(34, 211, 238, 0.5);
  color: #ffffff;
}

/* Green indicator badge for active diamond resource buffs (~30% smaller compact badge) */
.res-buff-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 7px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  padding: 1px 3px !important;
  border-radius: 3px !important;
  background: rgba(34, 197, 94, 0.22);
  color: #4ade80 !important;
  border: 1px solid #22c55e;
  box-shadow: 0 0 4px rgba(34, 197, 94, 0.35);
  letter-spacing: 0.1px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.res-buff-indicator:hover {
  background: rgba(34, 197, 94, 0.4);
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.65);
}

.res-buff-indicator.top-bar-buff {
  font-size: 6.5px !important;
  padding: 1px 2.5px !important;
  margin-left: 1px;
}

.res-buff-indicator.side-bar-buff {
  font-size: 7px !important;
  padding: 1px 3px !important;
  margin-left: 4px;
}

/* ==========================================================================
   IN-GAME NOTIFICATION / NEWS BANNER (EK 5)
   ========================================================================== */
.game-news-banner {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 460px;
  max-width: 90vw;
  background: linear-gradient(180deg, #24170d 0%, #150c06 100%);
  border: 2px solid #b45309;
  outline: 1px solid #78350f;
  outline-offset: -3px;
  border-radius: 6px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 999999;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.95), 0 0 20px rgba(180, 83, 9, 0.4);
  animation: newsBannerSlideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes newsBannerSlideDown {
  0% { transform: translate(-50%, -40px); opacity: 0; }
  100% { transform: translate(-50%, 0); opacity: 1; }
}

.news-banner-accent-strip {
  position: absolute;
  left: 3px;
  top: 4px;
  bottom: 4px;
  width: 4px;
  background: #dc2626;
  border-radius: 2px;
}

.news-banner-pennant {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.8));
}

.news-banner-body {
  flex: 1;
  cursor: pointer;
}

.news-banner-title {
  font-size: 0.86rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.3;
}

.news-banner-link {
  font-size: 0.76rem;
  font-weight: 700;
  color: #4ade80;
  margin-top: 3px;
  text-decoration: underline;
  cursor: pointer;
}

.news-banner-link:hover {
  color: #86efac;
}

.news-banner-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.news-banner-time {
  font-family: monospace;
  font-size: 0.8rem;
  font-weight: 700;
  color: #94a3b8;
}

.news-banner-close-btn {
  width: 24px;
  height: 24px;
  background: #991b1b;
  border: 1px solid #ca8a04;
  border-radius: 4px;
  color: #ffffff;
  font-weight: 900;
  font-size: 0.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.news-banner-close-btn:hover {
  background: #dc2626;
  border-color: #fde047;
  transform: scale(1.08);
}

.chat-modal-slide {
  position: fixed;
  right: calc(var(--right-sidebar-offset, 188px) + 28px);
  top: 50px;
  width: 340px;
  height: 520px;
  max-height: calc(100vh - 100px);
  background: linear-gradient(180deg, rgba(22, 16, 11, 0.98) 0%, rgba(10, 7, 4, 0.99) 100%);
  border: 1px solid rgba(229, 184, 92, 0.35);
  border-radius: 10px;
  box-shadow: -10px 10px 30px rgba(0, 0, 0, 0.85);
  display: flex;
  flex-direction: column;
  z-index: 80;
  padding: 10px;
  transition: right 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

body.sidebar-is-collapsed #chatSlideWindow,
.sidebar-is-collapsed #chatSlideWindow,
.app-layout.sidebar-is-collapsed ~ #chatSlideWindow,
.right-sidebar.collapsed ~ #chatSlideWindow {
  right: 28px !important;
  border-right: 1.5px solid rgba(229, 184, 92, 0.35);
  border-radius: 12px;
}

.map-action-popup {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transform: translate(-50%, -100%);
  z-index: 80;
  pointer-events: auto;
}

.action-btn-red {
  background: var(--dirilis-red-button);
  color: #fff;
  border: 1px solid #ff6b6b;
  padding: 6px 14px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.78rem;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(153, 34, 34, 0.6);
}

.action-btn-blue {
  background: var(--dirilis-blue-button);
  color: #fff;
  border: 1px solid #60a5fa;
  padding: 6px 14px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.78rem;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(29, 85, 153, 0.6);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.15) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-dark-card {
  width: 90%;
  max-width: 650px;
  max-height: 94vh;
  max-height: 94dvh;
  max-width: 96vw;
  box-sizing: border-box;
  overflow-y: auto;
  background: #140d08;
  border: 2px solid var(--dirilis-panel-border);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9);
  font-size: 11px;
}

/* ==========================================================================
/* ==========================================================================
   STANDARDIZED GAME TYPOGRAPHY HIERARCHY
   Headings: 11px max | Normal Text, Inputs, Tables, Buttons, Tabs: 10px
   ========================================================================== */
/* 1. Modal Headings: 11px (Maximum font size in modals) */
.modal-overlay h1, .modal-overlay h2, .modal-overlay h3,
.modal-backdrop h1, .modal-backdrop h2, .modal-backdrop h3,
.modal-dark-card h1, .modal-dark-card h2, .modal-dark-card h3,
.modal-window h1, .modal-window h2, .modal-window h3,
.ranking-modal-card h1, .ranking-modal-card h2, .ranking-modal-card h3,
.modal-dark-card > div:first-child h2,
.modal-dark-card > div:first-child h3,
.ranking-modal-card > div:first-child h3,
.modal-window .modal-header h3,
#modalTitle,
#clanModalHeaderTitle,
#clanProfileClanName,
#profileUsername,
#sendMovementModalTitle,
#constructDetailName,
#gameConfirmTitle,
.confirm-modal-card h3,
.modal-header-plaque,
.modal-overlay h4, .modal-backdrop h4,
.modal-dark-card h4, .modal-window h4,
.ranking-modal-card h4,
.modal-overlay h5, .modal-backdrop h5,
.modal-dark-card h5, .modal-window h5 {
  font-size: 11px !important;
  font-family: inherit !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.2px !important;
}

/* 2. Modal Subtitles, Section Headers, Stats, Badges, Metrics, Player & Clan Names & Tags: 10px */
.modal-header-subtitle,
#empireProdSubtitle,
#clanModalHeaderSubtitle,
#rankingsSubtitle,
#newsSubtitle,
#reportsSubtitle,
#farmListSubHeader,
#farmSettingsTitle,
#farmStaminaText,
#farmListCountDisplay,
.ranking-player-name,
.ranking-clan-name,
.ranking-clan-tag,
.alliance-pill-tag,
.movement-link-village,
.movement-link-player,
.quest-category-title,
.milestone-stage-title,
.troop-preview-name,
.shop-status-banner-val,
#shopSubTierText,
#shopShieldText,
#shopBuffsSummaryText,
#overviewTotalVillages,
#overviewTotalGrain,
#overviewNetGrainProd,
#overviewStarvationTimer,
#clanStatTag,
#clanStatPoints,
#clanStatAvgPoints,
#clanStatLeader,
#clanStatMyRole,
#shieldTimerDays,
#shieldTimerHours,
#shieldTimerMinutes,
#shieldTimerSeconds,
.modal-dark-card > div:first-child span,
.modal-dark-card > div:first-child div[style*="font-size"],
.ranking-modal-card > div:first-child div[style*="font-size"],
.confirm-modal-card > div:first-child > div {
  font-size: 10px !important;
  line-height: 1.35 !important;
}

/* 3. Normal Text, Tables, Descriptions, Inputs, Buttons, Badges, Toasts: 10px */
.modal-dark-card,
.modal-window,
.modal-body,
.ranking-modal-card,
.confirm-modal-card,
.modal-overlay p, .modal-backdrop p,
.modal-dark-card p, .modal-window p,
.modal-overlay li, .modal-backdrop li,
.modal-dark-card li, .modal-window li,
.modal-overlay ul, .modal-backdrop ul,
.modal-dark-card ul, .modal-window ul,
.modal-dark-card label, .modal-window label,
.modal-dark-card table, .modal-window table,
.modal-dark-card th, .modal-window th,
.modal-dark-card td, .modal-window td,
.modal-dark-card .btn, .modal-window .btn,
.modal-dark-card button,
.modal-window button,
.modal-overlay button,
.modal-backdrop button,
.modal-dark-card input, .modal-window input,
.modal-dark-card select, .modal-window select,
.modal-dark-card textarea, .modal-window textarea,
.ranking-modal-card table,
.ranking-modal-card th,
.ranking-modal-card td,
.ranking-modal-card .btn,
.farm-table-btn,
.farm-raid-btn,
.game-toast-box,
#gameToastNotification,
#gameConfirmMessage,
.confirm-modal-card p,
.confirm-modal-card .btn,
.imperial-table th,
.imperial-table td,
.res-prod-table th,
.res-prod-table td,
.shop-status-banner-label,
.chat-chamfer-tab-btn,
.quests-tab-btn,
#questsTabBtnDaily,
#questsTabBtnMilestones,
.ranking-tab-btn,
.clan-tab-btn,
.clan-noclan-tab-btn,
.profile-tab-btn,
.support-tab-btn,
.medrese-cat-btn,
.diamond-shop-tabs-bar .chat-chamfer-tab-btn,
#diamondShopModal .chat-chamfer-tab-btn,
.admin-tabs-nav button,
.admin-tabs-nav .btn,
.tab-btn {
  font-size: 10px !important;
}

/* Medrese Research Badge Overflow & Polish (Item 8) */
.medrese-status-badge,
.medrese-card .completed-badge,
.tech-card .completed-badge {
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  line-height: 1.2 !important;
}

/* ==============================================================================
   4. SIDEBARS TYPOGRAPHY STANDARD (10px STRICT LIMIT ACROSS WEB & MOBILE)
   ============================================================================== */
/* Left Sidebar Standards (10px) */
.left-sidebar .menu-item-btn,
.left-sidebar .menu-item-btn span:not(.item-icon):not(.event-badge) {
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

.left-sidebar .menu-item-btn .item-icon {
  font-size: 1rem !important;
}

.left-sidebar .quick-village-btn,
.left-sidebar .quick-village-btn #quickToggleLabel {
  font-size: 10px !important;
  line-height: 1.2 !important;
}

.left-sidebar .quick-village-btn #quickToggleIcon {
  font-size: 1.25rem !important;
}

.avatar-xp-badge .xp-title,
.right-sidebar .avatar-xp-badge .xp-title,
.left-sidebar .avatar-xp-badge .xp-title {
  font-size: 10px !important;
}

.avatar-xp-badge .xp-val,
.right-sidebar .avatar-xp-badge .xp-val,
.left-sidebar .avatar-xp-badge .xp-val {
  font-size: 10px !important;
}

.avatar-xp-badge #sidebarVillageTpLabel,
.avatar-xp-badge #sidebarVillageTpName,
.avatar-xp-badge #sidebarVillageTpRatio,
.right-sidebar .avatar-xp-badge #sidebarVillageTpLabel,
.right-sidebar .avatar-xp-badge #sidebarVillageTpName,
.right-sidebar .avatar-xp-badge #sidebarVillageTpRatio,
.left-sidebar .avatar-xp-badge #sidebarVillageTpLabel,
.left-sidebar .avatar-xp-badge #sidebarVillageTpName,
.left-sidebar .avatar-xp-badge #sidebarVillageTpRatio {
  font-size: 10px !important;
}

.left-sidebar .btn-sidebar-logout {
  font-size: 10px !important;
}

/* Right Sidebar Standards (10px) */
.right-sidebar .panel-section-title,
.right-sidebar .panel-section-title span {
  font-size: 10px !important;
}

.right-sidebar .shield-table-pill,
.right-sidebar .shield-table-pill span {
  font-size: 10px !important;
}

.right-sidebar .resource-row,
.right-sidebar .resource-row .resource-label,
.right-sidebar .resource-row .resource-label span:not(.res-buff-indicator),
.right-sidebar .resource-row .resource-val,
.right-sidebar .resource-row .resource-val span:not(.res-buff-indicator) {
  font-size: 10px !important;
}

.right-sidebar .cities-grid .city-btn {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.right-sidebar .cities-grid .city-btn,
.right-sidebar .cities-grid .city-btn div,
.right-sidebar .cities-grid .city-btn span,
.right-sidebar .cities-grid .city-btn .city-name {
  font-size: 10px !important;
}

.right-sidebar .event-circle-btn span:not(.event-badge) {
  font-size: 10px !important;
  font-weight: 500 !important;
}

/* Raporlar & Mesajlar Bildirim Var İken Turuncu Arka Plan */
.event-circle-btn.has-notification,
#sidebarReportsBtn.has-notification,
#sidebarMessagesBtn.has-notification {
  background: linear-gradient(180deg, #f97316 0%, #ea580c 100%) !important;
  border: 1.5px solid #fdba74 !important;
  border-radius: 8px !important;
  box-shadow: 0 0 14px rgba(249, 115, 22, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

.event-circle-btn.has-notification:hover,
#sidebarReportsBtn.has-notification:hover,
#sidebarMessagesBtn.has-notification:hover {
  background: linear-gradient(180deg, #fb923c 0%, #c2410c 100%) !important;
  border-color: #ffedd5 !important;
  box-shadow: 0 0 18px rgba(249, 115, 22, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

.right-sidebar .player-subtitle,
.right-sidebar .player-subtitle span,
.right-sidebar #sidebarPlayerName,
.right-sidebar #sidebarTribeName {
  font-size: 10px !important;
}

.btn {
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
}

.btn-primary {
  background: var(--dirilis-gold-button);
  color: #120a03;
  border: 1px solid #ffea9f;
}

.input-field {
  width: 100%;
  padding: 5px 10px;
  font-size: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--dirilis-panel-border);
  border-radius: 6px;
  color: #fff;
  margin-bottom: 8px;
}

/* ==========================================================================
   ULTRA-COMPACT CHAT WINDOW & BUBBLE TYPOGRAPHY (11PX FONT SIZE & CLICKABLE PROFILES)
   ========================================================================== */
.chat-window,
.chat-window *,
.chat-bubble,
.chat-bubble *,
.chat-bubble div,
.chat-bubble span,
.chat-bubble strong {
  font-size: 10px !important;
  line-height: 1.35 !important;
}

.chat-bubble {
  font-size: 10px !important;
  line-height: 1.35 !important;
  padding: 3px 6px !important;
  border-radius: 6px !important;
  margin-bottom: 4px !important;
  word-break: break-word !important;
  max-width: 100% !important;
}

.chat-bubble.user {
  background: rgba(229, 184, 92, 0.12) !important;
  border: 1px solid rgba(229, 184, 92, 0.25) !important;
  color: #fff !important;
}

.chat-bubble.ai {
  background: rgba(30, 27, 75, 0.6) !important;
  border: 1px solid rgba(129, 140, 248, 0.25) !important;
  color: #e0e7ff !important;
}

.chat-clickable-player {
  cursor: pointer !important;
  font-size: 10px !important;
  transition: color 0.15s ease, filter 0.15s ease;
}

.chat-clickable-player:hover {
  filter: brightness(1.25);
  text-decoration: underline !important;
}

.chat-clickable-clan {
  cursor: pointer !important;
  font-size: 10px !important;
  transition: color 0.15s ease, filter 0.15s ease;
}

.chat-clickable-clan:hover {
  filter: brightness(1.25);
  text-decoration: underline !important;
}

#chatInput {
  font-size: 10px !important;
  padding: 5px 8px !important;
}

.ai-chip-btn {
  background: rgba(49, 46, 129, 0.45);
  border: 1px solid #818cf8;
  color: #c7d2fe;
  font-size: 10px !important;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 9999px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  user-select: none;
}

.chat-chamfer-tab-btn {
  font-size: 10px !important;
}

#chatSlideWindow button[onclick*="sendChatMessage"],
.chat-modal-slide button[onclick*="sendChatMessage"] {
  font-size: 11px !important;
  font-weight: 700 !important;
}

.ai-chip-btn:hover {
  background: #4338ca;
  color: #fff;
  border-color: #a5b4fc;
  box-shadow: 0 0 10px rgba(129, 140, 248, 0.5);
  transform: translateY(-1px);
}

.right-chat-tabs .chat-tab-vertical,
.right-chat-tabs .chat-tab-vertical span {
  font-size: 10px !important;
  padding: 6px 3px !important;
  letter-spacing: 0.2px !important;
}

/* ==========================================================================
   TRIBAL WARS RADIAL VILLAGE ACTION MENU (KLANLAR REFERENCE STYLE)
   ========================================================================== */
.radial-village-menu {
  position: fixed;
  z-index: 999999;
  width: 220px;
  height: 220px;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  user-select: none;
  animation: radialPopIn 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes radialPopIn {
  0% {
    transform: translate(-50%, -50%) scale(0.2) rotate(-25deg);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* Center Target Ring & Nameplate */
.radial-center-target {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.15);
  width: 78px;
  height: 78px;
  border-radius: 50%;
  border: 2.5px solid rgba(229, 184, 92, 0.95);
  box-shadow: 0 0 28px rgba(229, 184, 92, 0.6), inset 0 0 16px rgba(255, 255, 255, 0.15), inset 0 0 14px rgba(0, 0, 0, 0.7);
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  backdrop-filter: brightness(1.2) contrast(1.1);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.radial-center-target:hover {
  transform: translate(-50%, -50%) scale(1.25);
}

.radial-target-glow {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px dashed rgba(229, 184, 92, 0.6);
  animation: spinSlow 20s linear infinite;
}

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.radial-target-nameplate {
  position: absolute;
  bottom: -50px;
  background: rgba(16, 24, 39, 0.85);
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  border: 1px solid rgba(229, 184, 92, 0.45);
  border-radius: 8px;
  padding: 4px 12px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  white-space: nowrap;
  min-width: 80px;
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.radial-target-nameplate:hover {
  border-color: rgba(229, 184, 92, 0.85);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.85), 0 0 12px rgba(229, 184, 92, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.radial-target-title {
  color: #f8fafc;
  font-weight: 700;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.35px;
  font-family: 'Marcellus', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  text-transform: none;
  font-variant: normal;
}

.radial-target-sub {
  color: #e5b85c;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  margin-top: 1px;
  letter-spacing: 0.25px;
  font-family: 'Marcellus', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  text-transform: none;
  font-variant: normal;
}

/* Radial Buttons Base */
.radial-btn {
  position: absolute;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  outline: none;
  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.16s ease;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.9));
  display: flex;
  align-items: center;
  justify-content: center;
}

.radial-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
  transition: transform 0.15s ease;
}

.radial-btn:hover {
  transform: scale(1.22);
  filter: brightness(1.2) drop-shadow(0 0 16px rgba(229, 184, 92, 0.95));
  z-index: 50;
}

.radial-btn:active {
  transform: scale(1.05);
}

/* Positions matching User Request & Tribal Wars Layout */
/* 1. Üst (Saat 12 Yönü): Saldır */
.radial-btn-top {
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
}
.radial-btn-top:hover {
  transform: translateX(-50%) scale(1.22);
}

/* 2. Sağ (Saat 2 Yönü): Casusluk & Bilgi */
.radial-btn-right {
  top: 44px;
  right: 8px;
}

/* 3. Sol (Saat 10 Yönü): Listeye Ekle */
.radial-btn-left {
  top: 44px;
  left: 8px;
}

/* 4. Alt (Saat 6 Yönü): Mesaj Gönder */
.radial-btn-bottom {
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
}
.radial-btn-bottom:hover {
  transform: translateX(-50%) scale(1.22);
}

/* Hover Tooltip (Always on top with high z-index) */
.radial-tooltip {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.98);
  border: 1.5px solid var(--dirilis-gold-accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.95);
  z-index: 99999;
}

.radial-tooltip-top {
  top: -28px;
  bottom: auto;
}

.radial-tooltip-bottom {
  bottom: -28px;
  top: auto;
}

.radial-btn:hover .radial-tooltip {
  opacity: 1;
}

/* ==========================================================================
   MODEL 1: SELÇUKLU ÇİNİLİ HİLAL ÇARKI (EXACT REPLICA OF USER IMAGE 1)
   ========================================================================== */
.radial-village-menu-exact {
  position: absolute;
  width: 320px;
  height: 320px;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  user-select: none;
  animation: radialPopIn 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  z-index: 9999;
}

.radial-seljuk-ring-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: url('assets/ui/gokturk_action_ring.png?v=8') no-repeat center center;
  background-size: contain;
  pointer-events: none;
  filter: drop-shadow(0 0 10px rgba(20, 184, 166, 0.45));
  transition: background-image 0.2s ease, filter 0.2s ease;
}

.radial-seljuk-ring-bg.ring-gokturk {
  background-image: url('assets/ui/gokturk_action_ring.png?v=8');
  filter: drop-shadow(0 0 10px rgba(20, 184, 166, 0.45));
}

.radial-seljuk-ring-bg.ring-seljuk {
  background-image: url('assets/ui/seljuk_action_ring.png?v=8');
  filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.55));
}

.radial-seljuk-ring-bg.ring-hun {
  background-image: url('assets/ui/hun_action_ring.png?v=8');
  filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.55));
}

.radial-center-target-exact {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  height: 140px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  cursor: pointer;
  z-index: 10;
}

.radial-target-nameplate-exact {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%);
  border: 1.5px solid #d4af37;
  border-radius: 8px;
  padding: 4px 10px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 12px rgba(212, 175, 55, 0.3);
  white-space: nowrap;
  min-width: 110px;
  pointer-events: auto;
}

.radial-slot {
  position: absolute;
  width: 54px;
  height: 54px;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  z-index: 20;
}

.slot-top {
  top: calc(50% - 128px);
  left: 50%;
}

.slot-bottom {
  top: calc(50% + 128px);
  left: 50%;
}

.slot-left {
  top: 50%;
  left: calc(50% - 128px);
}

.slot-right {
  top: 50%;
  left: calc(50% + 128px);
}

.radial-btn-medallion {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  outline: none;
  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.16s ease;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.95));
  display: flex;
  align-items: center;
  justify-content: center;
}

.radial-btn-medallion img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: contain;
}

.radial-btn-medallion:hover {
  transform: scale(1.16);
  filter: drop-shadow(0 0 18px rgba(234, 179, 8, 0.95)) brightness(1.2);
}

.radial-btn-medallion:active {
  transform: scale(1.03);
}

.radial-cartouche-plaque {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #1d4ed8 0%, #1e3a8a 100%);
  border: 1.5px solid #f59e0b;
  border-radius: 7px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 10px rgba(30, 58, 138, 0.8);
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.7px;
  padding: 2.5px 10px;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.14s ease, filter 0.14s ease;
}

.radial-cartouche-plaque:hover {
  transform: translateX(-50%) scale(1.08);
  filter: brightness(1.18);
  border-color: #fde047;
}

/* Tribe Theme Variations for Radial Menu */
.radial-village-menu-exact.tribe-gokturk .radial-cartouche-plaque {
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%);
  border-color: #38bdf8;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 10px rgba(2, 132, 199, 0.8);
}

.radial-village-menu-exact.tribe-seljuk .radial-cartouche-plaque {
  background: linear-gradient(180deg, #1d4ed8 0%, #1e3a8a 100%);
  border-color: #f59e0b;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 10px rgba(30, 58, 138, 0.8);
}

.radial-village-menu-exact.tribe-hun .radial-cartouche-plaque {
  background: linear-gradient(180deg, #991b1b 0%, #7f1d1d 100%);
  border-color: #d97706;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 10px rgba(153, 27, 27, 0.8);
}

/* ==========================================================================
   MODEL 2: RISE OF KINGDOMS MOBİL ALT ÇEKMECESİ (EXACT REPLICA OF USER IMAGE 2)
   ========================================================================== */
.rok-bottom-drawer {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  background: linear-gradient(180deg, #242c38 0%, #151b24 100%);
  border-top: 1.5px solid #64748b;
  border-left: 1.5px solid #475569;
  border-right: 1.5px solid #475569;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  padding: 14px 18px 26px 18px;
  z-index: 10000;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: slideUpBottomSheet 0.24s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  pointer-events: auto;
}

/* 4 Ornate Gold Filigree Corner Brackets */
.rok-filigree-bracket {
  position: absolute;
  width: 24px;
  height: 24px;
  pointer-events: none;
  background-size: contain;
  background-repeat: no-repeat;
}
.rok-bracket-tl {
  top: 6px;
  left: 6px;
  border-top: 2.5px solid #d4af37;
  border-left: 2.5px solid #d4af37;
  border-top-left-radius: 8px;
  box-shadow: -2px -2px 6px rgba(212, 175, 55, 0.3);
}
.rok-bracket-tr {
  top: 6px;
  right: 6px;
  border-top: 2.5px solid #d4af37;
  border-right: 2.5px solid #d4af37;
  border-top-right-radius: 8px;
  box-shadow: 2px -2px 6px rgba(212, 175, 55, 0.3);
}
.rok-bracket-bl {
  bottom: 6px;
  left: 6px;
  border-bottom: 2.5px solid #d4af37;
  border-left: 2.5px solid #d4af37;
  border-bottom-left-radius: 8px;
}
.rok-bracket-br {
  bottom: 6px;
  right: 6px;
  border-bottom: 2.5px solid #d4af37;
  border-right: 2.5px solid #d4af37;
  border-bottom-right-radius: 8px;
}

.rok-drawer-handle-bar {
  width: 50px;
  height: 5px;
  border-radius: 3px;
  background: #64748b;
  margin: 0 auto 12px auto;
  opacity: 0.8;
}

.rok-drawer-close-btn {
  position: absolute;
  top: 14px;
  right: 18px;
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 50%;
  transition: color 0.15s ease, transform 0.15s ease;
}
.rok-drawer-close-btn:hover {
  color: #f87171;
  transform: scale(1.15);
}

.rok-drawer-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.rok-sancak-flag-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}
.rok-sancak-pole {
  width: 38px;
  height: 4px;
  background: #b45309;
  border-radius: 2px;
  border: 1px solid #d97706;
}
.rok-sancak-cloth {
  width: 32px;
  height: 42px;
  background: linear-gradient(180deg, #f8fafc 0%, #cbd5e1 100%);
  border: 1.5px solid #94a3b8;
  border-radius: 0 0 6px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  margin-top: -1px;
}

.rok-village-metadata {
  flex: 1;
  min-width: 0;
}
.rok-village-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rok-tribe-name {
  color: #94a3b8;
  font-size: 0.82rem;
  font-weight: 600;
  margin: 2px 0 3px 0;
}
.rok-coords-distance-line {
  color: #cbd5e1;
  font-size: 0.76rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.rok-meta-sep {
  opacity: 0.4;
}
.rok-distance-text {
  color: #fde047;
  font-weight: 700;
}

.rok-protection-badge {
  background: rgba(185, 28, 28, 0.22);
  border: 1.5px solid #ef4444;
  border-radius: 10px;
  padding: 4px 10px;
  color: #fca5a5;
  font-size: 0.74rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.35);
}

.rok-action-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 16px;
}

.rok-card-btn {
  min-height: 100px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 6px;
  cursor: pointer;
  border: none;
  outline: none;
  position: relative;
  overflow: hidden;
  transition: transform 0.14s ease, filter 0.14s ease;
  user-select: none;
  touch-action: manipulation;
}

.rok-card-btn:hover {
  transform: translateY(-2px) scale(1.03);
  filter: brightness(1.18);
}

.rok-card-btn:active {
  transform: scale(0.95);
}

.rok-card-title {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
}

.rok-card-attack {
  background: linear-gradient(180deg, #7f1d1d 0%, #450a0a 100%);
  border: 2px solid #ef4444;
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  color: #fee2e2;
}
.rok-card-reinforce {
  background: linear-gradient(180deg, #065f46 0%, #022c22 100%);
  border: 2px solid #10b981;
  box-shadow: 0 0 18px rgba(16, 185, 129, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  color: #d1fae5;
}
.rok-card-spy {
  background: linear-gradient(180deg, #0369a1 0%, #082f49 100%);
  border: 2px solid #06b6d4;
  box-shadow: 0 0 18px rgba(6, 182, 212, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  color: #cffafe;
}
.rok-card-loot {
  background: linear-gradient(180deg, #b45309 0%, #451a03 100%);
  border: 2px solid #f59e0b;
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  color: #fef3c7;
}
.rok-card-message {
  background: linear-gradient(180deg, #334155 0%, #0f172a 100%);
  border: 2px solid #64748b;
  box-shadow: 0 0 14px rgba(100, 116, 139, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  color: #e2e8f0;
}

/* ==========================================================================
   MODEL 3: YÜZEN TAKTİK DOCKU (EXACT REPLICA OF USER IMAGE 3)
   ========================================================================== */
.tactical-dock-container {
  position: absolute;
  transform: translate(-50%, -100%);
  z-index: 10000;
  pointer-events: auto;
  user-select: none;
  animation: popInFloatingPill 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.tactical-dock-frame {
  background: linear-gradient(180deg, #2b1f13 0%, #151009 100%);
  border: 2.5px solid #d4af37;
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.95), 0 0 24px rgba(212, 175, 55, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  padding: 8px 12px 10px 12px;
  min-width: 320px;
}

.tactical-dock-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1.5px solid rgba(212, 175, 55, 0.4);
  font-size: 0.78rem;
  font-weight: 800;
  color: #fef08a;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  position: relative;
}

.dock-header-bullet {
  opacity: 0.5;
  color: #d4af37;
}

.tactical-dock-close {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  padding: 2px 4px;
  border-radius: 4px;
}
.tactical-dock-close:hover {
  color: #f87171;
}

.tactical-dock-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.dock-tile-btn {
  width: 70px;
  height: 70px;
  border-radius: 12px;
  border: 2px solid;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  user-select: none;
  touch-action: manipulation;
}

.dock-tile-btn:hover {
  transform: translateY(-2px) scale(1.05);
  filter: brightness(1.2);
}

.dock-tile-btn:active {
  transform: scale(0.96);
}

.tile-label {
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.tile-attack {
  background: linear-gradient(180deg, #991b1b 0%, #450a0a 100%);
  border-color: #f87171;
  color: #fff;
}
.tile-reinforce {
  background: linear-gradient(180deg, #065f46 0%, #022c22 100%);
  border-color: #34d399;
  color: #fff;
}
.tile-spy {
  background: linear-gradient(180deg, #0e7490 0%, #083344 100%);
  border-color: #22d3ee;
  color: #fff;
}
.tile-loot {
  background: linear-gradient(180deg, #b45309 0%, #451a03 100%);
  border-color: #fbbf24;
  color: #fff;
}
.tile-message {
  background: linear-gradient(180deg, #334155 0%, #0f172a 100%);
  border-color: #94a3b8;
  color: #fff;
}

.tactical-dock-arrow {
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 12px solid #d4af37;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.8));
}

/* ==========================================================================
   TRIBAL WARS CINEMATIC ZOOM DIVE TRANSITION OVERLAY & BLUR (60 FPS)
   ========================================================================== */
.cinematic-dive-overlay {
  position: absolute;
  inset: 0;
  z-index: 95;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.dive-blur-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(118, 156, 46, 0.05) 20%, rgba(18, 11, 6, 0.75) 85%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(0.12, 0.9, 0.2, 1);
  will-change: opacity, backdrop-filter;
}

/* Ultra Smooth Hardware-Accelerated Hyper-Zoom View Transitions */
#worldMapCanvas {
  transition: transform 0.45s cubic-bezier(0.12, 0.9, 0.2, 1), filter 0.45s ease;
  transform-origin: center center;
  will-change: transform, filter;
}

#villageViewOverlay {
  transition: opacity 0.45s cubic-bezier(0.12, 0.9, 0.2, 1), transform 0.45s cubic-bezier(0.12, 0.9, 0.2, 1), filter 0.45s ease;
  transform-origin: center center;
  will-change: opacity, transform, filter;
}

/* Disable expensive blur & canvas scaling transitions on mobile to protect mobile GPU */
@media (max-width: 768px), (pointer: coarse) {
  #worldMapCanvas {
    transition: none !important;
    filter: none !important;
    will-change: auto !important;
  }
  #villageViewOverlay {
    transition: opacity 0.15s ease !important;
    filter: none !important;
    will-change: auto !important;
  }
  .cinematic-dive-overlay,
  .dive-blur-vignette {
    display: none !important;
  }
}

/* ==========================================================================
   ELEGANT COMPACT IMPERIAL RANKINGS & LEADERBOARDS STYLING
   ========================================================================== */
.ranking-modal-card {
  width: 980px;
  max-width: 96vw;
  height: 88vh;
  max-height: 88vh;
  padding: 14px 20px;
  border-radius: 16px;
  border: 1.5px solid rgba(229, 184, 92, 0.4);
  background: radial-gradient(circle at 50% 0%, #1a1007 0%, #0e0805 85%);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.95), 0 0 35px rgba(229, 184, 92, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
}

.ranking-tab-capsule-bar {
  display: flex;
  gap: 5px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 4px;
  border-radius: 10px;
  margin-bottom: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.ranking-tab-capsule-bar::-webkit-scrollbar {
  height: 4px;
}

.ranking-tab-capsule-bar::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}

.ranking-tab-capsule-bar::-webkit-scrollbar-thumb {
  background: rgba(229, 184, 92, 0.4);
  border-radius: 4px;
}

.ranking-tab-btn {
  flex: 0 0 auto;
  min-width: max-content;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 12px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #94a3b8;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.2, 0.9, 0.3, 1);
  white-space: nowrap;
}

.ranking-tab-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

.ranking-tab-btn.active {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 50%, #b45309 100%);
  color: #120902;
  border-color: #fde68a;
  box-shadow: 0 3px 10px rgba(217, 119, 6, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.ranking-tab-btn.tab-red.active {
  background: linear-gradient(135deg, #b91c1c 0%, #ef4444 50%, #7f1d1d 100%);
  color: #fff;
  border-color: #fca5a5;
  box-shadow: 0 3px 10px rgba(239, 68, 68, 0.4);
}

.ranking-tab-btn.tab-blue.active {
  background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 50%, #1e3a8a 100%);
  color: #fff;
  border-color: #93c5fd;
  box-shadow: 0 3px 10px rgba(59, 130, 246, 0.4);
}

.ranking-tab-btn.tab-green.active,
.ranking-tab-btn.tab-purple.active {
  background: linear-gradient(135deg, #7e22ce 0%, #a855f7 50%, #581c87 100%);
  color: #fff;
  border-color: #d8b4fe;
  box-shadow: 0 3px 10px rgba(168, 85, 247, 0.4);
}

.rankings-table-wrapper {
  flex: 1;
  overflow-y: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(8, 5, 3, 0.75);
  border: 1px solid rgba(229, 184, 92, 0.18);
  border-radius: 10px;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.6);
}

.rankings-table-wrapper::-webkit-scrollbar {
  width: 6px;
}
.rankings-table-wrapper::-webkit-scrollbar-track {
  background: rgba(18, 11, 6, 0.6);
  border-radius: 4px;
}
.rankings-table-wrapper::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #d97706, #78350f);
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.imperial-table {
  width: 100%;
  min-width: 580px;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
  font-size: 0.71rem;
}

.imperial-table th {
  position: sticky;
  top: 0;
  background: #160d07;
  color: var(--dirilis-gold-accent);
  font-weight: 800;
  padding: 6px 8px;
  border-bottom: 1.5px solid rgba(229, 184, 92, 0.3);
  z-index: 10;
  font-size: 0.67rem;
  letter-spacing: 0.4px;
}

.imperial-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.035);
  transition: background 0.15s ease;
  height: 28px;
}

.imperial-row:hover {
  background: rgba(229, 184, 92, 0.09) !important;
}

.imperial-row.podium-1 {
  background: linear-gradient(90deg, rgba(234, 179, 8, 0.12) 0%, rgba(234, 179, 8, 0.02) 100%);
  border-left: 2.5px solid #eab308;
}

.imperial-row.podium-2 {
  background: linear-gradient(90deg, rgba(203, 213, 225, 0.09) 0%, rgba(203, 213, 225, 0.02) 100%);
  border-left: 2.5px solid #cbd5e1;
}

.imperial-row.podium-3 {
  background: linear-gradient(90deg, rgba(217, 119, 6, 0.09) 0%, rgba(217, 119, 6, 0.02) 100%);
  border-left: 2.5px solid #b45309;
}

.imperial-row.is-self {
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.14) 0%, rgba(234, 179, 8, 0.06) 100%) !important;
  border-left: 2.5px solid #22c55e;
}

.rank-badge-podium {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 0.74rem;
}

.alliance-pill-tag {
  display: inline-block;
  background: rgba(14, 165, 233, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.25);
  padding: 0px 5px;
  border-radius: 4px;
  font-weight: 800;
  font-size: 0.65rem;
  letter-spacing: 0.2px;
}

.profile-star-box {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 800;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.4);
}
.profile-star-box.red {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}
.profile-star-box.blue {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.4);
  color: #93c5fd;
}
.profile-star-box.purple {
  background: rgba(168, 85, 247, 0.15);
  border-color: rgba(168, 85, 247, 0.4);
  color: #d8b4fe;
}

.star-mini-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0px 4px;
  border-radius: 3px;
  font-weight: 800;
  font-size: 0.64rem;
  line-height: 1.3;
}
.star-mini-pill.red {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}
.star-mini-pill.blue {
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: #93c5fd;
}
.star-mini-pill.purple {
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.3);
  color: #d8b4fe;
}
.star-mini-pill.green {
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.3);
  color: #d8b4fe;
}

/* Rankings Pagination Buttons */
.rank-page-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
}

.rank-page-btn:hover:not(:disabled) {
  background: rgba(229, 184, 92, 0.2);
  border-color: var(--dirilis-gold-accent);
  color: #fff;
}

.rank-page-btn.active {
  background: linear-gradient(135deg, #d97706, #b45309);
  border-color: #fde68a;
  color: #120b04;
  font-weight: 900;
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.4);
}

.rank-page-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ==========================================================================
   LANDING PAGE & AUTH SCREEN (DIRILIS ONLINE)
   ========================================================================== */

.landing-page-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle at center 20%, rgba(30, 20, 10, 0.92) 0%, rgba(10, 6, 3, 0.98) 100%), url('assets/map/village_bg_walled.jpg') center center / cover no-repeat;
  z-index: 999999;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  color: #fff;
  font-family: var(--dirilis-font-family);
  backdrop-filter: blur(12px);
  animation: fadeIn 0.4s ease;
}

.landing-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 36px;
  background: rgba(15, 10, 6, 0.85);
  border-bottom: 1.5px solid var(--dirilis-gold-accent);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 100;
}

.landing-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--dirilis-gold-accent);
  letter-spacing: 2px;
  text-shadow: 0 0 16px rgba(229, 184, 92, 0.5);
}

.btn-center-own-village {
  position: absolute;
  bottom: 16px;
  left: calc(var(--left-sidebar-offset, 110px) + 20px);
  background: linear-gradient(135deg, rgba(20, 14, 9, 0.95), rgba(42, 30, 20, 0.98));
  border: 1.5px solid var(--dirilis-gold-accent);
  border-radius: 9999px;
  color: var(--dirilis-gold-accent);
  padding: 8px 18px;
  font-size: 0.85rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 90;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.75), inset 0 1px 1px rgba(255, 255, 255, 0.15);
  cursor: pointer;
  transition: left 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
}

.btn-center-own-village:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, rgba(42, 30, 20, 0.98), rgba(20, 14, 9, 0.95));
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.85), 0 0 16px rgba(229, 184, 92, 0.4);
}

.center-hud-bar {
  position: absolute;
  bottom: 16px;
  right: calc(var(--right-sidebar-offset, 235px) + 16px);
  background: linear-gradient(135deg, rgba(20, 14, 9, 0.95), rgba(10, 7, 4, 0.98));
  border: 1.5px solid rgba(229, 184, 92, 0.35);
  backdrop-filter: blur(12px);
  padding: 8px 18px;
  border-radius: 9999px;
  font-size: 0.85rem;
  color: #f1f5f9;
  font-weight: 700;
  z-index: 90;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.75), inset 0 1px 1px rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: right 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   BOTTOM CENTER COORDINATES BAR (GÖKTÜRK / TEMATİK BAKIR TASARIM)
   ========================================================================== */
.map-center-coords-bar {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 18px;
  border-radius: 9999px;
  background: linear-gradient(135deg, rgba(22, 18, 14, 0.95), rgba(12, 10, 8, 0.98));
  border: 1.5px solid rgba(180, 138, 82, 0.65);
  box-shadow: none !important;
  backdrop-filter: blur(12px);
  pointer-events: none;
  cursor: default;
  user-select: none;
}
.map-center-coords-bar .coords-text {
  color: #ffffff !important;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 12px !important;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 5px rgba(0, 0, 0, 0.9), 0 0 2px #000;
}

/* ==========================================================================
   BOTTOM RIGHT GÖKTÜRK TIME & DAY/NIGHT WEATHER CAPSULE (BAKIR BOZKIR KAPSÜLÜ)
   ========================================================================== */
.hud-time-weather-capsule {
  position: absolute;
  bottom: 12px;
  right: calc(var(--right-sidebar-offset, 235px) + 16px);
  width: 121px;
  height: 44px;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  box-shadow: none !important;
  cursor: default !important;
  pointer-events: none;
  user-select: none;
  transition: right 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.hud-time-weather-capsule .capsule-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  transition: background-image 0.8s ease-in-out, opacity 0.5s ease;
  filter: none !important;
}
/* Base Phase Fallbacks */
.hud-time-weather-capsule.phase-day .capsule-bg {
  background-image: url('assets/ui/hud_capsule_day.png?v=6');
}
.hud-time-weather-capsule.phase-night .capsule-bg {
  background-image: url('assets/ui/hud_capsule_night.png?v=6');
}
.hud-time-weather-capsule.phase-sunset .capsule-bg {
  background-image: url('assets/ui/hud_capsule_sunset.png?v=6');
}
.hud-time-weather-capsule.phase-dawn .capsule-bg {
  background-image: url('assets/ui/hud_capsule_dawn.png?v=6');
}

/* Day Weather Variations */
.hud-time-weather-capsule.phase-day.weather-clear .capsule-bg {
  background-image: url('assets/ui/hud_capsule_day_clear.png?v=6');
}
.hud-time-weather-capsule.phase-day.weather-rain .capsule-bg {
  background-image: url('assets/ui/hud_capsule_day_rain.png?v=6');
}
.hud-time-weather-capsule.phase-day.weather-snow .capsule-bg {
  background-image: url('assets/ui/hud_capsule_day_snow.png?v=6');
}

/* Sunset Weather Variations */
.hud-time-weather-capsule.phase-sunset.weather-clear .capsule-bg {
  background-image: url('assets/ui/hud_capsule_sunset_clear.png?v=6');
}
.hud-time-weather-capsule.phase-sunset.weather-rain .capsule-bg {
  background-image: url('assets/ui/hud_capsule_sunset_rain.png?v=6');
}
.hud-time-weather-capsule.phase-sunset.weather-snow .capsule-bg {
  background-image: url('assets/ui/hud_capsule_sunset_snow.png?v=6');
}

/* Night Weather Variations */
.hud-time-weather-capsule.phase-night.weather-clear .capsule-bg {
  background-image: url('assets/ui/hud_capsule_night_clear.png?v=6');
}
.hud-time-weather-capsule.phase-night.weather-rain .capsule-bg {
  background-image: url('assets/ui/hud_capsule_night_rain.png?v=6');
}
.hud-time-weather-capsule.phase-night.weather-snow .capsule-bg {
  background-image: url('assets/ui/hud_capsule_night_snow.png?v=6');
}

/* Dawn / Sunrise Weather Variations */
.hud-time-weather-capsule.phase-dawn.weather-clear .capsule-bg {
  background-image: url('assets/ui/hud_capsule_dawn_clear.png?v=6');
}
.hud-time-weather-capsule.phase-dawn.weather-rain .capsule-bg {
  background-image: url('assets/ui/hud_capsule_dawn_rain.png?v=6');
}
.hud-time-weather-capsule.phase-dawn.weather-snow .capsule-bg {
  background-image: url('assets/ui/hud_capsule_dawn_snow.png?v=6');
}
.hud-time-weather-capsule .capsule-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
  width: 100%;
  height: 100%;
  padding: 0 8px 0 8px;
  box-sizing: border-box;
}
.hud-time-weather-capsule .capsule-weather-icon-wrap {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
  pointer-events: none;
}
.hud-time-weather-capsule .capsule-weather-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  user-select: none;
}
.hud-time-weather-capsule .capsule-time-display {
  font-family: 'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
  color: #ffffff !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 2px 4px;
  line-height: 1.15;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 6px rgba(0, 0, 0, 0.75);
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  white-space: nowrap;
  text-align: center;
  margin: 0 0 0 auto;
}
.hud-time-weather-capsule.phase-night .capsule-time-display {
  color: #ffffff !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.98), 0 0 6px rgba(0, 0, 0, 0.8);
}

/* In-Village Capsule placed directly under "Haritaya Dön" button (Same exact dimensions) */
.hud-time-weather-capsule.village-inline-capsule {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 121px !important;
  height: 44px !important;
  margin-top: 4px !important;
  margin-left: auto !important;
  align-self: flex-end !important;
  pointer-events: none;
}
body:not(.in-village) #villageTimeWeatherCapsule,
.center-game-area:not(.in-village) #villageTimeWeatherCapsule,
.center-game-area.in-map #villageTimeWeatherCapsule {
  display: none !important;
}
.center-game-area.in-village #villageTimeWeatherCapsule {
  display: flex !important;
}

/* ==========================================================================
   DYNAMIC ATMOSPHERIC WEATHER PARTICLES OVERLAY CANVAS
   ========================================================================== */
.weather-overlay-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 55;
}

.landing-page-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle at center 15%, rgba(35, 24, 14, 0.94) 0%, rgba(10, 6, 3, 0.98) 100%), url('assets/map/village_bg_walled.jpg') center top / cover no-repeat fixed;
  z-index: 999999;
  overflow-y: auto;
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column;
  color: #fff;
  font-family: var(--dirilis-font-family);
  animation: fadeIn 0.4s ease;
}

/* NAVBAR */
.landing-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 40px;
  background: rgba(14, 9, 5, 0.88);
  border-bottom: 1.5px solid rgba(229, 184, 92, 0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.85);
}

.landing-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.landing-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  cursor: pointer;
}

.landing-logo-icon {
  font-size: 1.9rem;
  filter: drop-shadow(0 0 10px rgba(229, 184, 92, 0.7));
}

.landing-logo-text {
  display: flex;
  flex-direction: column;
}

.brand-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--dirilis-gold-accent);
  letter-spacing: 2px;
  text-shadow: 0 0 16px rgba(229, 184, 92, 0.5);
  line-height: 1.1;
}

.brand-subtitle {
  font-size: 0.68rem;
  color: #94a3b8;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
}

.landing-nav-menu {
  display: flex;
  align-items: center;
  gap: 22px;
}

.landing-nav-link {
  color: #e2e8f0;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 700;
  transition: all 0.2s ease;
  padding: 6px 10px;
  border-radius: 8px;
}

.landing-nav-link:hover {
  color: var(--dirilis-gold-accent);
  background: rgba(229, 184, 92, 0.1);
  transform: translateY(-1px);
}

.landing-nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.landing-server-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  font-weight: 700;
  color: #86efac;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.35);
  border-radius: 20px;
  padding: 5px 12px;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 8px #22c55e;
  animation: pulse 1.8s infinite;
}

.landing-nav-login-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(229, 184, 92, 0.4);
  color: #f1f5f9;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.landing-nav-login-btn:hover {
  background: rgba(229, 184, 92, 0.2);
  color: var(--dirilis-gold-accent);
}

.landing-nav-cta-btn {
  font-size: 0.82rem;
  font-weight: 800;
  padding: 7px 16px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(229, 184, 92, 0.35);
}

/* HERO SECTION */
.landing-hero {
  max-width: 1240px;
  margin: 0 auto;
  padding: 48px 28px 30px 28px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: center;
}

.landing-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2rem, 3.8vw, 3.3rem);
  font-weight: 900;
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 4px 22px rgba(0, 0, 0, 0.95);
  margin-bottom: 16px;
}

.landing-title span {
  background: linear-gradient(135deg, #fde68a, #e5b85c, #d97706);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.landing-desc {
  font-size: 1.02rem;
  color: #cbd5e1;
  line-height: 1.65;
  margin-bottom: 24px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.landing-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.landing-pill-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(229, 184, 92, 0.3);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #e2e8f0;
}

/* AUTH CARD */
.landing-auth-card {
  background: linear-gradient(180deg, rgba(24, 16, 9, 0.96) 0%, rgba(12, 8, 4, 0.98) 100%);
  border: 2px solid var(--dirilis-gold-accent);
  border-radius: 20px;
  padding: 28px 30px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.95), 0 0 35px rgba(229, 184, 92, 0.25);
  backdrop-filter: blur(14px);
}

.landing-auth-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--dirilis-panel-border);
  padding-bottom: 14px;
  margin-bottom: 20px;
}

.landing-auth-tab-btn {
  flex: 1;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--dirilis-panel-border);
  border-radius: 10px;
  color: #cbd5e1;
  font-weight: 800;
  font-size: 0.92rem;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.landing-auth-tab-btn.active {
  background: linear-gradient(135deg, #e5b85c, #d97706);
  border-color: #fde68a;
  color: #120b04;
  box-shadow: 0 4px 14px rgba(229, 184, 92, 0.4);
}

.tribe-picker-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}

.tribe-picker-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid var(--dirilis-panel-border);
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

.tribe-picker-card:hover {
  background: rgba(229, 184, 92, 0.12);
  border-color: var(--dirilis-gold-accent);
}

.tribe-picker-card.selected {
  background: rgba(229, 184, 92, 0.22);
  border-color: var(--dirilis-gold-accent);
  box-shadow: 0 0 14px rgba(229, 184, 92, 0.35);
}

/* STATS STRIP */
.landing-stats-bar {
  max-width: 1240px;
  margin: 10px auto 40px auto;
  padding: 0 28px;
  width: 100%;
}

.landing-stats-grid {
  background: linear-gradient(135deg, rgba(20, 14, 8, 0.85), rgba(12, 8, 4, 0.95));
  border: 1.5px solid rgba(229, 184, 92, 0.35);
  border-radius: 16px;
  padding: 18px 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 20px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
}

.landing-stat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 8px;
}

.stat-icon {
  font-size: 2.2rem;
  line-height: 1;
}

.stat-info {
  display: flex;
  flex-direction: column;
}

.stat-number {
  font-family: Georgia, serif;
  font-size: 1.55rem;
  font-weight: 900;
  color: var(--dirilis-gold-accent);
  line-height: 1.1;
  text-shadow: 0 0 12px rgba(229, 184, 92, 0.4);
}

.stat-label {
  font-size: 0.74rem;
  color: #94a3b8;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* SECTION HEADERS */
.landing-section {
  max-width: 1240px;
  margin: 50px auto;
  padding: 0 28px;
  width: 100%;
}

.landing-section-header {
  text-align: center;
  margin-bottom: 36px;
}

.landing-badge {
  display: inline-block;
  background: rgba(229, 184, 92, 0.15);
  border: 1px solid var(--dirilis-gold-accent);
  color: var(--dirilis-gold-accent);
  font-size: 0.78rem;
  font-weight: 800;
  padding: 4px 14px;
  border-radius: 30px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.landing-section-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  font-weight: 900;
  color: #fff;
  margin: 0 0 10px 0;
  letter-spacing: 0.5px;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.8);
}

.landing-section-subtitle {
  color: #94a3b8;
  font-size: 0.95rem;
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.5;
}

/* NATIONS SHOWCASE GRID */
.landing-nations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.landing-nation-card {
  background: linear-gradient(180deg, rgba(22, 15, 9, 0.9) 0%, rgba(12, 8, 4, 0.95) 100%);
  border: 2px solid rgba(229, 184, 92, 0.35);
  border-radius: 18px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.85);
  position: relative;
  overflow: hidden;
}

.landing-nation-card:hover {
  transform: translateY(-6px);
  border-color: var(--dirilis-gold-accent);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.95), 0 0 24px rgba(229, 184, 92, 0.3);
}

.nation-card-hun {
  border-top: 4px solid #ef4444;
}

.nation-card-gokturk {
  border-top: 4px solid #38bdf8;
}

.nation-card-seljuk {
  border-top: 4px solid #22c55e;
}

.nation-top-badge {
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 12px;
}

.badge-hun { background: rgba(239, 68, 68, 0.2); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.4); }
.badge-gokturk { background: rgba(56, 189, 248, 0.2); color: #7dd3fc; border: 1px solid rgba(56, 189, 248, 0.4); }
.badge-seljuk { background: rgba(34, 197, 94, 0.2); color: #86efac; border: 1px solid rgba(34, 197, 94, 0.4); }

.nation-hero-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.nation-flag-img {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.4);
  padding: 4px;
  border: 1.5px solid rgba(229, 184, 92, 0.4);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  object-fit: contain;
}

.nation-header-text h3 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 900;
  color: #fff;
  font-family: Georgia, serif;
}

.nation-tagline {
  font-size: 0.76rem;
  color: var(--dirilis-gold-accent);
  font-style: italic;
  margin-top: 2px;
}

.nation-perks-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.nation-perk-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.82rem;
  color: #cbd5e1;
  line-height: 1.4;
}

.nation-perk-icon {
  font-size: 1.05rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}

.nation-champion-preview {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.champion-avatar {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1.5px solid var(--dirilis-gold-accent);
  object-fit: cover;
}

.champion-meta {
  display: flex;
  flex-direction: column;
}

.champion-title {
  font-size: 0.72rem;
  color: #94a3b8;
  font-weight: 700;
  text-transform: uppercase;
}

.champion-name {
  font-size: 0.88rem;
  color: #fde047;
  font-weight: 800;
}

.nation-cta-btn {
  width: 100%;
  padding: 10px;
  font-weight: 800;
  font-size: 0.88rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

/* MECHANICS & GAMEPLAY GRID */
.landing-mechanics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}

.mechanic-card {
  background: linear-gradient(135deg, rgba(20, 14, 8, 0.88), rgba(12, 8, 4, 0.95));
  border: 1.5px solid rgba(229, 184, 92, 0.25);
  border-radius: 16px;
  padding: 22px;
  display: flex;
  gap: 16px;
  transition: transform 0.2s, border-color 0.2s;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.mechanic-card:hover {
  transform: translateY(-4px);
  border-color: var(--dirilis-gold-accent);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.8), 0 0 18px rgba(229, 184, 92, 0.2);
}

.mechanic-icon-box {
  width: 52px;
  height: 52px;
  background: rgba(229, 184, 92, 0.12);
  border: 1.5px solid var(--dirilis-gold-accent);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.mechanic-content h4 {
  margin: 0 0 6px 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--dirilis-gold-accent);
  font-family: Georgia, serif;
}

.mechanic-content p {
  margin: 0;
  font-size: 0.84rem;
  color: #cbd5e1;
  line-height: 1.55;
}

/* TROOPS SHOWCASE */
.landing-troops-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 14px;
}

.troop-card-mini {
  background: rgba(18, 12, 7, 0.85);
  border: 1.5px solid rgba(229, 184, 92, 0.25);
  border-radius: 12px;
  padding: 10px;
  text-align: center;
  transition: all 0.2s;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
}

.troop-card-mini:hover {
  transform: translateY(-4px);
  border-color: var(--dirilis-gold-accent);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.8), 0 0 14px rgba(229, 184, 92, 0.3);
}

.troop-img-mini {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid rgba(229, 184, 92, 0.35);
  margin-bottom: 8px;
}

.troop-name-mini {
  font-size: 0.80rem;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.troop-meta-mini {
  font-size: 0.68rem;
  color: var(--dirilis-gold-accent);
  margin-top: 2px;
}

/* FAQ SECTION */
.landing-faq-container {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.landing-faq-item {
  background: linear-gradient(135deg, rgba(20, 14, 8, 0.85), rgba(12, 8, 4, 0.95));
  border: 1px solid rgba(229, 184, 92, 0.3);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s;
}

.landing-faq-item:hover {
  border-color: var(--dirilis-gold-accent);
}

.faq-question-btn {
  width: 100%;
  padding: 16px 20px;
  background: none;
  border: none;
  color: #f1f5f9;
  font-size: 0.94rem;
  font-weight: 800;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.faq-question-btn:hover {
  color: var(--dirilis-gold-accent);
}

.faq-chevron {
  font-size: 0.85rem;
  color: var(--dirilis-gold-accent);
  transition: transform 0.25s ease;
}

.faq-answer-body {
  padding: 0 20px 16px 20px;
  font-size: 0.86rem;
  color: #cbd5e1;
  line-height: 1.6;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  margin-top: 4px;
  padding-top: 12px;
}

/* PRE-FOOTER CTA BANNER */
.landing-cta-banner {
  max-width: 1240px;
  margin: 60px auto 40px auto;
  padding: 0 28px;
  width: 100%;
}

.cta-banner-card {
  background: radial-gradient(circle at center, rgba(180, 83, 9, 0.3) 0%, rgba(20, 14, 8, 0.95) 100%), #120904;
  border: 2px solid var(--dirilis-gold-accent);
  border-radius: 20px;
  padding: 40px 30px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9), 0 0 35px rgba(229, 184, 92, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.cta-banner-title {
  font-family: Georgia, serif;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 900;
  color: #fff;
  margin: 0;
}

.cta-banner-desc {
  font-size: 1rem;
  color: #cbd5e1;
  max-width: 640px;
  margin: 0;
  line-height: 1.5;
}

.cta-big-btn {
  font-size: 1.1rem;
  font-weight: 900;
  padding: 14px 38px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(229, 184, 92, 0.5);
  cursor: pointer;
  margin-top: 8px;
}

/* RICH FOOTER */
.landing-footer {
  background: rgba(10, 6, 3, 0.98);
  border-top: 1.5px solid rgba(229, 184, 92, 0.4);
  padding: 48px 40px 24px 40px;
  margin-top: auto;
  width: 100%;
}

.landing-footer-grid {
  max-width: 1240px;
  margin: 0 auto 36px auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 36px;
}

.footer-col h4 {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--dirilis-gold-accent);
  margin: 0 0 16px 0;
  letter-spacing: 0.5px;
  font-family: Georgia, serif;
}

.footer-col p {
  font-size: 0.82rem;
  color: #94a3b8;
  line-height: 1.6;
  margin: 0 0 14px 0;
}

.footer-link-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-link-list a {
  color: #cbd5e1;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  transition: all 0.2s;
}

.footer-link-list a:hover {
  color: var(--dirilis-gold-accent);
  padding-left: 4px;
}

.footer-badge-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-badge-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 6px 12px;
  border-radius: 8px;
}

.landing-footer-bottom {
  max-width: 1240px;
  margin: 0 auto;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: #94a3b8;
  flex-wrap: wrap;
  gap: 12px;
}

/* RESPONSIVE BREAKPOINTS */
@media (max-width: 1024px) {
  .landing-nations-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .landing-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
}

@media (max-width: 900px) {
  .landing-nav {
    padding: 12px 20px;
  }
  .landing-nav-menu {
    display: none;
  }
  .landing-hero {
    grid-template-columns: 1fr;
    padding: 24px 20px;
    gap: 32px;
  }
  .landing-footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 600px) {
  .landing-nav-actions .landing-server-badge {
    display: none;
  }
  .landing-stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .mechanic-card {
    flex-direction: column;
    gap: 12px;
  }
}

/* ==========================================================================
   BATTLE REPORTS LAYOUT GRID & RESPONSIVE ADAPTATION
   ========================================================================== */
#battleReportsModal {
  padding: 0 !important;
}

#battleReportsModal .modal-dark-card {
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  min-height: 100dvh !important;
  border-radius: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.battle-reports-layout-grid {
  display: grid !important;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 10px !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

#clanReportsLayoutGrid {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  height: 100% !important;
  grid-template-columns: minmax(270px, 320px) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
}

.reports-list-side-panel {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.report-detail-panel {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.report-detail-scroll-area {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  overscroll-behavior-y: contain !important;
  padding: 10px 14px !important;
}

.report-detail-pinned-footer {
  flex-shrink: 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 10px !important;
  background: linear-gradient(180deg, rgba(20, 28, 42, 0.98), rgba(12, 18, 28, 0.99)) !important;
  border-top: 1.5px solid rgba(229, 184, 92, 0.3) !important;
  padding: 8px 14px !important;
  border-bottom-left-radius: 7px !important;
  border-bottom-right-radius: 7px !important;
  box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.5) !important;
  z-index: 10 !important;
}
.report-detail-pinned-footer .btn {
  padding: 5px 14px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
}

.reports-mobile-back-btn {
  display: none !important;
}

/* CLAN REPORTS FILTER TABS (EK-1 STYLE) */
.clan-r-filter-btn {
  background: linear-gradient(180deg, #1e3a5f, #0f2744) !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
  color: #e2e8f0 !important;
  transition: all 0.15s ease !important;
  cursor: pointer;
}
.clan-r-filter-btn:hover {
  background: linear-gradient(180deg, #254b7a, #133358) !important;
  color: #fff !important;
}
.clan-r-filter-btn.active, .clan-r-filter-btn.btn-primary {
  background: linear-gradient(180deg, #f59e0b, #d97706) !important;
  border: 1.5px solid #fef08a !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.4) !important;
}

/* NATIVE MOBILE BOTTOM NAVIGATION BAR */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(56px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: linear-gradient(180deg, rgba(22, 16, 11, 0.98) 0%, rgba(10, 7, 4, 0.99) 100%);
  border-top: 1.5px solid rgba(229, 184, 92, 0.4);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.85);
  z-index: 9999;
  justify-content: space-around;
  align-items: center;
  user-select: none;
  -webkit-user-select: none;
}

.mobile-nav-item {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: none;
  border: none;
  color: #a39585;
  cursor: pointer;
  position: relative;
  transition: all 0.18s ease;
  padding: 0 4px;
}

.mobile-nav-item:active, .mobile-nav-item.active {
  color: #fbbf24;
}

.mobile-nav-item.active .mobile-nav-icon {
  transform: translateY(-2px) scale(1.12);
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.5));
}

.mobile-nav-icon {
  font-size: 1.35rem;
  line-height: 1;
  transition: transform 0.18s ease;
}

.mobile-nav-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.mobile-nav-badge {
  position: absolute;
  top: 4px;
  right: calc(50% - 18px);
  background: #ef4444;
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 10px;
  border: 1px solid #ffffff;
  min-width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.75);
  z-index: 5;
  pointer-events: none;
}

/* MOBILE SLIDE-UP MENU DRAWER */
.mobile-menu-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  animation: fadeInDrawer 0.22s ease-out;
}

.mobile-menu-drawer-card {
  background: linear-gradient(180deg, #18110b 0%, #0d0905 100%);
  border-top: 2px solid var(--dirilis-gold-accent);
  border-radius: 20px 20px 0 0;
  padding: 12px 16px calc(24px + env(safe-area-inset-bottom, 0px)) 16px;
  max-height: 82vh;
  overflow-y: auto;
  box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.9);
  animation: slideUpDrawer 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-drawer-handle-bar {
  width: 44px;
  height: 4px;
  background: rgba(229, 184, 92, 0.4);
  border-radius: 4px;
  margin: 0 auto 12px auto;
}

.mobile-drawer-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  padding-right: 40px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(229, 184, 92, 0.2);
}

.mobile-menu-drawer-card .modal-close-btn,
.mobile-drawer-header .modal-close-btn {
  position: absolute !important;
  top: calc(50% - 6px) !important;
  right: 0 !important;
  left: auto !important;
  transform: translateY(-50%) !important;
}

.mobile-drawer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.mobile-drawer-item,
.mobile-drawer-item.highlight-diamond,
.mobile-drawer-item.highlight-gold,
.mobile-drawer-item.item-logout {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(229, 184, 92, 0.36) !important;
  border-radius: 12px;
  color: #e2e8f0 !important;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.mobile-drawer-item:active {
  background: rgba(229, 184, 92, 0.2);
  border-color: #fbbf24 !important;
  transform: scale(0.96);
}

.mobile-drawer-item .m-item-icon {
  font-size: 1.55rem;
  margin-bottom: 6px;
}

.mobile-drawer-item .m-item-icon-3d {
  width: 36px;
  height: 36px;
  object-fit: contain;
  margin-bottom: 4px;
  border-radius: 6px;
  flex-shrink: 0;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

@keyframes fadeInDrawer {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUpDrawer {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* ==========================================================================
   MOBILE SCREEN RULES (STRICTLY PORTRAIT PHONES & PORTRAIT TABLETS)
   ========================================================================== */
  html.mobile-portrait-mode,
  html.mobile-portrait-mode body,
  html.mobile-portrait-mode .app-layout {
    --left-sidebar-offset: 0px !important;
    --right-sidebar-offset: 0px !important;
  }

  /* 1. Hide Desktop Sidebars and Toggle Buttons on Mobile */
  html.mobile-portrait-mode .left-sidebar, html.mobile-portrait-mode .right-sidebar,
  html.mobile-portrait-mode .left-sidebar-toggle-btn, html.mobile-portrait-mode .right-sidebar-toggle-btn,
  html.mobile-portrait-mode .right-chat-tabs {
    display: none !important;
  }

  /* 2. Show Native Mobile Bottom Navigation */
  html.mobile-portrait-mode .mobile-bottom-nav {
    display: flex !important;
  }

  /* 3. Central Game Canvas Area strictly bound between top and bottom nav */
  html.mobile-portrait-mode .app-layout {
    width: var(--logical-vw, 100vw);
    height: var(--logical-vh, 100vh);
    height: var(--logical-vh, 100dvh);
    overflow: hidden;
    position: relative;
  }

  html.mobile-portrait-mode .center-game-area {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    width: var(--logical-vw, 100vw) !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* 4. Top Mobile Horizontal Resource Bar (2 Satır, Kaydırmasız & Sığdırılmış) */
  html.mobile-portrait-mode .top-mobile-resource-bar {
    top: env(safe-area-inset-top, 4px) !important;
    left: 4px !important;
    right: 4px !important;
    transform: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: calc(var(--logical-vw, 100vw) - 8px) !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 48px !important;
    max-height: none !important;
    padding: 3px 5px !important;
    background: rgba(14, 10, 6, 0.94) !important;
    border: 1px solid rgba(229, 184, 92, 0.4) !important;
    border-radius: 8px !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    scrollbar-width: none;
    z-index: 100;
  }

  html.mobile-portrait-mode .top-mobile-resource-bar::-webkit-scrollbar {
    display: none;
  }

  html.mobile-portrait-mode #foundVillageTopBar {
    position: absolute !important;
    top: max(98px, calc(env(safe-area-inset-top, 0px) + 98px)) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 95 !important;
    transition: top 0.25s ease, left 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  /* Gelen saldırı uyarısı açıksa yeni köy kurma butonunu bir kademe daha aşağı kaydır */
  html.mobile-portrait-mode body:has(#incomingAttackAlertTooltip:not([style*="display: none"])) #foundVillageTopBar,
  html.mobile-portrait-mode .center-game-area:has(#incomingAttackAlertTooltip:not([style*="display: none"])) #foundVillageTopBar {
    top: max(152px, calc(env(safe-area-inset-top, 0px) + 152px)) !important;
  }

  html.mobile-portrait-mode #foundVillageTopBtn {
    font-size: 0.72rem !important;
    padding: 4px 10px !important;
    white-space: nowrap !important;
  }

  html.mobile-portrait-mode #incomingAttackAlertTooltip {
    position: absolute !important;
    top: calc(106px + env(safe-area-inset-top, 0px)) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 95 !important;
    max-width: calc(var(--logical-vw, 100vw) * 0.94) !important;
    font-size: 0.75rem !important;
    padding: 5px 12px !important;
    white-space: nowrap !important;
  }

  html.mobile-portrait-mode .top-village-badge {
    display: none !important;
  }

  /* Village View: Compact & Scaled Down Building Plaques on Mobile (-40% size) */
  html.mobile-portrait-mode .building-card-title,
  html.mobile-portrait-mode .building-card-name-pill,
  html.mobile-portrait-mode .building-card-node.row-back .building-card-name-pill,
  html.mobile-portrait-mode .building-card-node.row-front .building-card-name-pill,
  html.mobile-portrait-mode .building-card-node[data-slot-id] .building-card-name-pill {
    font-size: clamp(3.6px, 1.08vw, 4.8px) !important;
    padding: 0px 2.5px !important;
    border-radius: 3px !important;
    border-width: 0.8px !important;
    line-height: 1.15 !important;
  }

  html.mobile-portrait-mode .building-card-lvl-inline,
  html.mobile-portrait-mode .building-card-lvl-pill,
  html.mobile-portrait-mode .building-card-node.row-back .building-card-lvl-pill,
  html.mobile-portrait-mode .building-card-node.row-front .building-card-lvl-pill,
  html.mobile-portrait-mode .building-card-node[data-slot-id] .building-card-lvl-pill {
    font-size: clamp(3.3px, 0.calc(var(--logical-vw, 100vw) * 0.96), 4.5px) !important;
    padding: 0px 2px !important;
    margin-left: -2px !important;
    border-radius: 3px !important;
    border-width: 0.8px !important;
    line-height: 1.15 !important;
  }

  html.mobile-portrait-mode .building-card-timer-badge {
    font-size: clamp(3.3px, 0.9vw, 4.2px) !important;
    padding: 0px 2px !important;
    border-radius: 2.5px !important;
  }

  html.mobile-portrait-mode .top-res-divider {
    height: 14px !important;
    margin: 0 3px !important;
  }

  html.mobile-portrait-mode .top-bar-res-group {
    gap: 4px !important;
    overflow-x: visible;
    flex-shrink: 0;
    display: flex !important;
    align-items: center !important;
  }

  html.mobile-portrait-mode .tp-founding-badge {
    display: none !important;
  }

  html.mobile-portrait-mode .top-inline-resources-list {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 2px 4px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    white-space: normal !important;
    align-items: center !important;
    justify-items: center !important;
    flex-shrink: 1 !important;
  }

  html.mobile-portrait-mode .inline-res-item {
    font-size: 0.68rem !important;
    gap: 2px !important;
    padding: 1px 2px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  html.mobile-portrait-mode .inline-res-item .res-icon-img {
    width: 13px !important;
    height: 13px !important;
    flex-shrink: 0 !important;
  }

  html.mobile-portrait-mode .inline-res-item .res-icon {
    font-size: 0.72rem !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
  }

  html.mobile-portrait-mode .inline-res-item.res-diamond {
    height: 20px !important;
    padding: 0 4px !important;
    font-size: 0.68rem !important;
    gap: 2px !important;
    border-radius: 4px !important;
  }

  html.mobile-portrait-mode .inline-res-item.res-diamond .res-icon {
    font-size: 0.72rem !important;
  }

  html.mobile-portrait-mode .inline-res-item.res-diamond .res-diamond-plus {
    width: 12px !important;
    height: 12px !important;
    font-size: 0.6rem !important;
  }

  /* 5. Map View Movement Badges Row (Horizontal directly above Coords HUD) */
  html.mobile-portrait-mode .map-movement-hud-row {
    position: absolute !important;
    bottom: 34px !important;
    right: 6px !important;
    left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    z-index: 85 !important;
  }

  html.mobile-portrait-mode .map-hud-badge-btn {
    padding: 2px 6px !important;
    font-size: 0.62rem !important;
    gap: 3px !important;
    border-radius: 6px !important;
  }

  html.mobile-portrait-mode .hud-badge-count {
    font-size: 0.55rem !important;
    padding: 1px 4px !important;
  }

  /* Center HUD Bar (Server Time & Coords) position adjusted right above bottom nav */
  html.mobile-portrait-mode .center-hud-bar {
    position: absolute !important;
    bottom: 6px !important;
    right: 6px !important;
    left: auto !important;
    padding: 2px 7px !important;
    font-size: 0.62rem !important;
    background: rgba(10, 7, 4, 0.92) !important;
    border: 1px solid rgba(229, 184, 92, 0.4) !important;
    border-radius: 6px !important;
    z-index: 85 !important;
    display: flex;
    align-items: center !important;
    gap: 6px !important;
    pointer-events: none;
  }

  /* Mobile Bottom Center Coordinates Bar */
  html.mobile-portrait-mode .map-center-coords-bar {
    bottom: 6px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    padding: 3px 12px !important;
    border-radius: 9999px !important;
    z-index: 85 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
  }
  html.mobile-portrait-mode .map-center-coords-bar .coords-text {
    font-size: 11px !important;
    color: #ffffff !important;
  }

  /* Mobile Bottom Right Göktürk Time & Weather Capsule */
  html.mobile-portrait-mode .hud-time-weather-capsule {
    bottom: 5px !important;
    right: 6px !important;
    width: 95px !important;
    height: 34px !important;
    z-index: 85 !important;
    box-shadow: none !important;
  }
  html.mobile-portrait-mode .hud-time-weather-capsule.village-inline-capsule {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    right: auto !important;
    left: auto !important;
    width: 95px !important;
    height: 34px !important;
    margin-top: 3px !important;
    margin-left: auto !important;
    align-self: flex-end !important;
  }
  html.mobile-portrait-mode .hud-time-weather-capsule .capsule-inner {
    padding: 0 6px 0 6px !important;
    justify-content: space-between !important;
    gap: 2px !important;
  }
  html.mobile-portrait-mode .hud-time-weather-capsule .capsule-weather-icon-wrap {
    width: 17px !important;
    height: 17px !important;
    flex: 0 0 17px !important;
  }
  html.mobile-portrait-mode .hud-time-weather-capsule .capsule-time-display {
    font-family: 'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0px !important;
    padding: 1.5px 4.5px !important;
    margin: 0 0 0 auto !important;
    text-align: center !important;
  }

  /* Floating Focus Own Village Button on Map */
  html.mobile-portrait-mode .btn-center-own-village {
    position: absolute !important;
    bottom: 6px !important;
    left: 6px !important;
    z-index: 85 !important;
    background: linear-gradient(135deg, rgba(20, 14, 9, 0.95), rgba(42, 30, 20, 0.95)) !important;
    border: 1.5px solid var(--dirilis-gold-accent) !important;
    color: var(--dirilis-gold-accent) !important;
    padding: 4px 8px !important;
    border-radius: 8px !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    display: flex;
    align-items: center !important;
    gap: 4px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7) !important;
    cursor: pointer !important;
  }

  html.mobile-portrait-mode .btn-center-own-village:active {
    transform: scale(0.95);
    background: rgba(229, 184, 92, 0.25) !important;
  }

  /* Hide Map-only HUD items when in Village View */
  html.mobile-portrait-mode .center-game-area.in-village #btnCenterOwnVillage,
  html.mobile-portrait-mode .center-game-area.in-village #centerHudBar,
  html.mobile-portrait-mode .center-game-area.in-village #hudTimeWeatherCapsule,
  html.mobile-portrait-mode .center-game-area.in-village #mapCenterCoordsBar,
  html.mobile-portrait-mode .center-game-area.in-village #mapRightActions,
  html.mobile-portrait-mode .center-game-area.in-village #mapMovementHudRow {
    display: none !important;
  }

  /* 6. Village View Palisade Wall & Troop Bar Overlay */
  html.mobile-portrait-mode .village-view-container {
    padding: 0 !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  html.mobile-portrait-mode .village-view-container[style*="display: none"],
  html.mobile-portrait-mode .village-view-container[style*="display:none"] {
    display: none !important;
    pointer-events: none !important;
  }

  html.mobile-portrait-mode .village-top-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 4px !important;
    padding-top: calc(52px + env(safe-area-inset-top, 0px)) !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    z-index: 75 !important;
    pointer-events: none !important;
  }

  html.mobile-portrait-mode .village-top-header > * {
    pointer-events: auto !important;
  }

  /* 1. Mobile Village TP Widget SOLDA (Order 1) */
  html.mobile-portrait-mode .mobile-village-tp-badge {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 2px 5px !important;
    background: rgba(15, 23, 42, 0.88) !important;
    border: 1px solid rgba(212, 175, 55, 0.5) !important;
    border-radius: 7px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
    cursor: pointer !important;
    order: 1 !important;
    flex: 0 0 auto !important;
    max-width: 135px !important;
    min-width: 100px !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  html.mobile-portrait-mode .mobile-village-tp-badge:active {
    transform: scale(0.97);
  }

  html.mobile-portrait-mode .mobile-tp-avatar {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    border-radius: 5px !important;
    background: rgba(14, 165, 233, 0.15) !important;
    border: 1px solid rgba(56, 189, 248, 0.4) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.70rem !important;
    flex-shrink: 0 !important;
  }

  html.mobile-portrait-mode .mobile-tp-info {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 1px !important;
  }

  html.mobile-portrait-mode .mobile-tp-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    font-size: 0.58rem !important;
    line-height: 1.1 !important;
  }

  html.mobile-portrait-mode .mobile-tp-label {
    color: #94a3b8 !important;
    white-space: nowrap !important;
  }

  html.mobile-portrait-mode .mobile-tp-points {
    color: #ffffff !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }

  html.mobile-portrait-mode .mobile-tp-target {
    color: #94a3b8 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  html.mobile-portrait-mode .mobile-tp-val {
    color: #fbbf24 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html.mobile-portrait-mode .mobile-tp-bar-bg {
    width: 100% !important;
    height: 3px !important;
    background: rgba(0, 0, 0, 0.6) !important;
    border-radius: 2px !important;
    overflow: hidden !important;
    border: 0.5px solid rgba(255, 255, 255, 0.15) !important;
    margin-top: 1px !important;
  }

  html.mobile-portrait-mode .mobile-tp-bar-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #16a34a, #22c55e) !important;
    transition: width 0.3s ease !important;
  }

  /* İnşaat Sırası HUD Strip */
  html.mobile-portrait-mode .village-construction-queue-bar {
    position: absolute !important;
    top: calc(108px + env(safe-area-inset-top, 0px)) !important;
    left: 6px !important;
    z-index: 60 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 3px !important;
    flex-shrink: 0 !important;
    min-width: 0 !important;
    max-width: 128px !important;
  }

  html.mobile-portrait-mode .village-queue-item {
    padding: 2px 6px !important;
    font-size: 10px !important;
    gap: 4px !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  /* 2. İsim Bölümü ORTADA (Order 2) */
  html.mobile-portrait-mode .village-name-badge {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 3px 6px !important;
    gap: 2px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 145px !important;
    text-align: center !important;
    order: 2 !important;
    margin: 0 auto !important;
  }

  html.mobile-portrait-mode .village-name-badge-title-row {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  html.mobile-portrait-mode .village-title {
    font-size: 0.75rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 135px !important;
  }

  html.mobile-portrait-mode #villageHeaderLevel {
    display: none !important;
  }

  html.mobile-portrait-mode .village-sub-badge {
    font-size: 0.58rem !important;
    padding: 1px 4px !important;
    white-space: nowrap !important;
  }

  html.mobile-portrait-mode .village-workers-badge {
    font-size: 0.58rem !important;
    white-space: nowrap !important;
  }

  /* 3. Haritaya Dön Butonu SAĞDA (Order 3) */
  html.mobile-portrait-mode .village-header-right-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 3px !important;
    order: 3 !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    width: 95px !important;
  }

  html.mobile-portrait-mode .village-back-to-map-btn {
    width: 95px !important;
    min-width: 95px !important;
    max-width: 95px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 4px 6px !important;
    font-size: 10.5px !important;
    border-radius: 7px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
  }

  html.mobile-portrait-mode .village-left-actions {
    left: 4px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    gap: 5px !important;
    z-index: 70 !important;
  }

  html.mobile-portrait-mode .village-right-actions,
  html.mobile-portrait-mode .map-right-actions {
    right: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    gap: 5px !important;
    z-index: 70 !important;
  }

  html.mobile-portrait-mode .action-circle-btn {
    width: 36px !important;
    height: 36px !important;
    font-size: 0.90rem !important;
    border-radius: 8px !important;
  }

  html.mobile-portrait-mode .action-circle-btn .action-icon-3d {
    width: 20px !important;
    height: 20px !important;
  }

  html.mobile-portrait-mode .village-scroll-viewport {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    touch-action: none !important;
    z-index: 1 !important;
  }

  html.mobile-portrait-mode .palisade-wall-wrapper {
    position: absolute !important;
    inset: auto !important;
    width: var(--mobile-village-w, calc(var(--logical-vh, 100dvh) * 4000 / 2232)) !important;
    height: var(--mobile-village-h, 100%) !important;
    left: calc(50% - (var(--mobile-village-w, calc(var(--logical-vh, 100dvh) * 4000 / 2232)) / 2)) !important;
    top: calc(50% - (var(--mobile-village-h, 100%) / 2)) !important;
    aspect-ratio: var(--mobile-village-aspect, 4000 / 2232) !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    touch-action: none !important;
  }

  html.mobile-portrait-mode .bottom-troop-bar-dock {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 75 !important;
    pointer-events: none !important;
    transform: translateY(0) !important;
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  html.mobile-portrait-mode .bottom-troop-bar-dock.collapsed {
    transform: translateY(100%) !important;
  }

  html.mobile-portrait-mode .bottom-troop-bar-dock > * {
    pointer-events: auto !important;
  }

  html.mobile-portrait-mode .bottom-troop-bar {
    position: relative !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
    transform: none !important;
    height: 122px !important;
    min-height: 122px !important;
    padding: 5px 10px !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x !important;
    overscroll-behavior-x: contain !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    z-index: 70 !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    background: linear-gradient(180deg, rgba(22, 16, 11, 0.98) 0%, rgba(10, 7, 4, 1) 100%) !important;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.85) !important;
    scrollbar-width: thin !important;
  }

  html.mobile-portrait-mode .bottom-troop-bar.collapsed {
    pointer-events: none !important;
    box-shadow: none !important;
  }

  html.mobile-portrait-mode .bottom-troop-bar .troop-card-item {
    min-width: 82px !important;
    max-width: 88px !important;
    height: 112px !important;
    padding: 5px 3px !important;
    border-radius: 9px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  html.mobile-portrait-mode .bottom-troop-bar .troop-card-portrait {
    width: 54px !important;
    height: 54px !important;
    margin-bottom: 3px !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
  }

  html.mobile-portrait-mode .bottom-troop-bar .troop-card-name {
    font-size: 11px !important;
    line-height: 1.15 !important;
    margin-bottom: 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  html.mobile-portrait-mode .bottom-troop-bar .troop-card-count-badge {
    font-size: 0.70rem !important;
    padding: 2px 6px !important;
    line-height: 1.15 !important;
    border-radius: 6px !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
    margin-top: 2px !important;
    margin-bottom: 1px !important;
  }

  /* Strictly hide troop stats everywhere per UI redesign */
  html.mobile-portrait-mode .bottom-troop-bar .troop-card-stats {
    display: none !important;
  }

  /* Construct Modal Responsive Layout */
  html.mobile-portrait-mode .construct-modal-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html.mobile-portrait-mode .construct-buildings-list {
    max-height: none !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding-right: 4px !important;
  }

  html.mobile-portrait-mode .construct-building-details-box {
    width: 100% !important;
    padding: 12px !important;
    border-radius: 12px !important;
  }

  /* 7. ALL MODALS TO MOBILE NATIVE BOTTOM SHEET / FULL-CARD */
  html.mobile-portrait-mode .modal-overlay, html.mobile-portrait-mode .modal-backdrop {
    align-items: flex-end !important;
    padding: 0 !important;
    justify-content: center !important;
  }

  html.mobile-portrait-mode .modal-dark-card {
    width: var(--logical-vw, 100vw) !important;
    max-width: var(--logical-vw, 100vw) !important;
    max-height: calc(calc(var(--logical-vh, 100vh) * 0.92) - env(safe-area-inset-top, 0px)) !important;
    max-height: calc(calc(var(--logical-vh, 100dvh) * 0.92) - env(safe-area-inset-top, 0px)) !important;
    border-radius: 20px 20px 0 0 !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    padding: 14px 14px calc(24px + env(safe-area-inset-bottom, 0px)) 14px !important;
    animation: slideUpModal 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    margin: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    box-sizing: border-box !important;
  }

  /* Pinned footer & scrollable content for building construct, upgrade and troop movement modals on mobile */
  html.mobile-portrait-mode #upgradeModal .modal-dark-card,
  html.mobile-portrait-mode #buildingDetailConstructModal .modal-dark-card,
  html.mobile-portrait-mode #newBuildingConstructModal .modal-dark-card,
  html.mobile-portrait-mode #troopMovementsListModal .modal-dark-card {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    height: calc(calc(var(--logical-vh, 100dvh) * 0.92) - env(safe-area-inset-top, 0px)) !important;
    max-height: calc(calc(var(--logical-vh, 100dvh) * 0.92) - env(safe-area-inset-top, 0px)) !important;
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px)) 14px !important;
  }

  html.mobile-portrait-mode #upgradeModal #modalBody,
  html.mobile-portrait-mode #buildingDetailConstructModal .construct-detail-scroll-body,
  html.mobile-portrait-mode #troopMovementsCardsContainer {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding-right: 4px !important;
    margin-bottom: 8px !important;
  }

  html.mobile-portrait-mode #upgradeModal .upgrade-modal-footer,
  html.mobile-portrait-mode #buildingDetailConstructModal .construct-detail-footer {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    margin-top: auto !important;
    background: inherit !important;
    width: 100% !important;
  }

  html.mobile-portrait-mode #upgradeModal .upgrade-modal-footer > button:not([style*="display: none"]):not([style*="display:none"]):not([hidden]),
  html.mobile-portrait-mode #buildingDetailConstructModal .construct-detail-footer > button:not([style*="display: none"]):not([style*="display:none"]):not([hidden]) {
    width: 100% !important;
    min-height: 40px !important;
    font-size: 0.88rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  html.mobile-portrait-mode #modalUpgradeFastBtn,
  html.mobile-portrait-mode #constructDetailFastBtn {
    width: 100% !important;
    min-height: 40px !important;
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    box-sizing: border-box !important;
  }

  html.mobile-portrait-mode #medreseResearchModal .modal-dark-card,
  html.mobile-portrait-mode #cephaneArmoryModal .modal-dark-card {
    width: calc(var(--logical-vw, 100vw) * 0.96) !important;
    max-width: calc(var(--logical-vw, 100vw) * 0.96) !important;
    height: calc(var(--logical-vh, 100vh) * 0.92) !important;
    max-height: calc(var(--logical-vh, 100dvh) * 0.92) !important;
    padding: 12px 10px !important;
  }

  html.mobile-portrait-mode #medreseResearchesGrid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding-right: 0 !important;
  }

  html.mobile-portrait-mode #cephaneTroopsGrid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding-right: 0 !important;
  }

  html.mobile-portrait-mode #buildingDetailConstructModal #constructDetailCostsGrid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }

  html.mobile-portrait-mode #troopUpgradeModal .modal-dark-card,
  html.mobile-portrait-mode #marketModal .modal-dark-card {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html.mobile-portrait-mode #troopUpgradeModal .modal-dark-card > div[style*="grid-template-columns"],
  html.mobile-portrait-mode #marketModal .modal-dark-card > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    min-height: 0 !important;
  }

  html.mobile-portrait-mode .modal-window {
    width: var(--logical-vw, 100vw) !important;
    max-width: var(--logical-vw, 100vw) !important;
    height: calc(var(--logical-vh, 100vh) * 0.92) !important;
    height: calc(var(--logical-vh, 100dvh) * 0.92) !important;
    max-height: calc(var(--logical-vh, 100dvh) * 0.92) !important;
    border-radius: 20px 20px 0 0 !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    animation: slideUpModal 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  html.mobile-portrait-mode .modal-window .modal-header {
    padding: 10px 14px !important;
    flex-shrink: 0 !important;
  }

  html.mobile-portrait-mode .modal-window .modal-body {
    padding: 12px 10px calc(24px + env(safe-area-inset-bottom, 0px)) 10px !important;
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html.mobile-portrait-mode .modal-header {
    padding: 4px 6px 10px 6px !important;
  }

  html.mobile-portrait-mode .modal-body {
    padding: 8px 4px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Battle Reports Mobile Layout */
  html.mobile-portrait-mode #battleReportsModal {
    padding: 0 !important;
    align-items: stretch !important;
  }

  html.mobile-portrait-mode #battleReportsModal .modal-dark-card {
    width: var(--logical-vw, 100vw) !important;
    max-width: var(--logical-vw, 100vw) !important;
    height: var(--logical-vh, 100vh) !important;
    height: var(--logical-vh, 100dvh) !important;
    max-height: var(--logical-vh, 100dvh) !important;
    min-height: var(--logical-vh, 100dvh) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) 10px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  html.mobile-portrait-mode .battle-reports-layout-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    flex: 1 1 0% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    position: relative !important;
  }

  html.mobile-portrait-mode .reports-list-side-panel {
    display: flex !important;
    flex: 1 1 0% !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html.mobile-portrait-mode .report-detail-panel,
  html.mobile-portrait-mode[data-theme] .battle-reports-layout-grid:not(.mobile-show-detail) .report-detail-panel {
    flex: 1 1 0% !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: none !important;
  }

  /* When a report is being viewed on mobile portrait */
  html.mobile-portrait-mode .battle-reports-layout-grid.mobile-show-detail .reports-list-side-panel,
  html.mobile-portrait-mode[data-theme] .battle-reports-layout-grid.mobile-show-detail .reports-list-side-panel {
    display: none !important;
  }

  html.mobile-portrait-mode .battle-reports-layout-grid.mobile-show-detail .report-detail-panel,
  html.mobile-portrait-mode[data-theme] .battle-reports-layout-grid.mobile-show-detail .report-detail-panel {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html.mobile-portrait-mode .battle-reports-layout-grid.mobile-show-detail .reports-mobile-back-btn {
    display: inline-block !important;
  }

  /* Chat Slide Window Mobile Full-Sheet Adaptation */
  html.mobile-portrait-mode .chat-modal-slide {
    width: var(--logical-vw, 100vw) !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    height: calc(var(--logical-vh, 100vh) * 0.75) !important;
    max-height: calc(var(--logical-vh, 100vh) * 0.80) !important;
    border-radius: 20px 20px 0 0 !important;
    border-left: none !important;
    border-right: none !important;
    padding: 12px 14px calc(65px + env(safe-area-inset-bottom, 0px)) 14px !important;
    z-index: 10001 !important;
  }

@keyframes slideUpModal {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* ==========================================================================
   MOBILE LANDSCAPE (HORIZONTAL GAMING & TABLET) OPTIMIZATIONS
   ========================================================================== */
  /* 1. Strictly disable mobile portrait bottom nav & portrait HUD in landscape */
  html:not(.mobile-portrait-mode) .mobile-bottom-nav {
    display: none !important;
  }
  html:not(.mobile-portrait-mode) .mobile-village-picker-btn {
    display: none !important;
  }
  html:not(.mobile-portrait-mode) #mobileVillageViewPickerBtn,
  html:not(.mobile-portrait-mode) #mobileMapVillagePickerBtn {
    display: none !important;
  }

  /* 2. Strictly guarantee desktop sidebars, handles and troop dock are active when not collapsed */
  html:not(.mobile-portrait-mode) .left-sidebar:not(.collapsed) {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }
  html:not(.mobile-portrait-mode) .left-sidebar.collapsed {
    transform: translateX(-100%) !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    border-right: none !important;
    box-shadow: none !important;
  }
  html:not(.mobile-portrait-mode) .right-sidebar:not(.collapsed) {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }
  html:not(.mobile-portrait-mode) .right-sidebar.collapsed {
    transform: translateX(100%) !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    border-left: none !important;
    box-shadow: none !important;
  }
  html:not(.mobile-portrait-mode) .left-sidebar-toggle-btn {
    display: flex !important;
  }
  html:not(.mobile-portrait-mode) .right-sidebar-toggle-btn {
    display: flex !important;
  }
  html:not(.mobile-portrait-mode) .right-chat-tabs {
    display: flex !important;
  }
  html:not(.mobile-portrait-mode) .bottom-troop-bar-dock {
    display: flex !important;
  }

  html.mobile-landscape-mode body {
    padding: 0 !important;
    margin: 0 !important;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }

  html.mobile-landscape-mode,
  html.mobile-landscape-mode body,
  html.mobile-landscape-mode .app-layout {
    --left-sidebar-offset: 62px !important;
    --right-sidebar-offset: 132px !important;
  }

  html.mobile-landscape-mode body.left-sidebar-is-collapsed,
  html.mobile-landscape-mode .app-layout.left-sidebar-is-collapsed {
    --left-sidebar-offset: 0px !important;
  }

  html.mobile-landscape-mode body.sidebar-is-collapsed,
  html.mobile-landscape-mode .app-layout.sidebar-is-collapsed {
    --right-sidebar-offset: 0px !important;
  }

  /* Village View: Mobile Landscape Building Name & Level Plaques (-40% size) */
  html.mobile-landscape-mode .building-card-title,
  html.mobile-landscape-mode .building-card-name-pill,
  html.mobile-landscape-mode .building-card-node.row-back .building-card-name-pill,
  html.mobile-landscape-mode .building-card-node.row-front .building-card-name-pill,
  html.mobile-landscape-mode .building-card-node[data-slot-id] .building-card-name-pill {
    font-size: clamp(4.5px, 0.49cqw, 6.3px) !important;
    padding: 0.5px 3.5px !important;
    border-radius: 3.5px !important;
    border-width: 0.8px !important;
    line-height: 1.15 !important;
  }

  html.mobile-landscape-mode .building-card-lvl-inline,
  html.mobile-landscape-mode .building-card-lvl-pill,
  html.mobile-landscape-mode .building-card-node.row-back .building-card-lvl-pill,
  html.mobile-landscape-mode .building-card-node.row-front .building-card-lvl-pill,
  html.mobile-landscape-mode .building-card-node[data-slot-id] .building-card-lvl-pill {
    font-size: clamp(4.2px, 0.47cqw, 6px) !important;
    padding: 0.5px 2.5px !important;
    margin-left: -3px !important;
    border-radius: 3.5px !important;
    border-width: 0.8px !important;
    line-height: 1.15 !important;
  }

  html.mobile-landscape-mode .building-card-timer-badge {
    font-size: clamp(3.9px, 0.43cqw, 5.7px) !important;
    padding: 0.5px 3px !important;
    border-radius: 3px !important;
  }

  /* 1. Center Game Area ALWAYS 100% Full Viewport (Never shrunk by sidebars or troop bar) */
  html.mobile-landscape-mode .center-game-area {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* 2. Left Sidebar: Reduced ~20% for compact landscape gaming, Collapsible Overlay */
  html.mobile-landscape-mode .left-sidebar {
    display: flex !important;
    width: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    padding: 4px 2px 20px 2px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    z-index: 85 !important;
  }

  html.mobile-landscape-mode .left-sidebar:not(.collapsed) {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  html.mobile-landscape-mode .left-sidebar.collapsed {
    transform: translateX(-100%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  html.mobile-landscape-mode .left-sidebar::-webkit-scrollbar {
    width: 3px !important;
  }

  html.mobile-landscape-mode .left-sidebar-toggle-btn {
    left: 62px !important;
    top: calc(50% + 20px) !important;
    transform: translateY(-50%) !important;
    width: 18px !important;
    height: 34px !important;
    font-size: 0.72rem !important;
    z-index: 86 !important;
  }

  html.mobile-landscape-mode body.left-sidebar-is-collapsed .left-sidebar-toggle-btn,
  html.mobile-landscape-mode .app-layout.left-sidebar-is-collapsed .left-sidebar-toggle-btn {
    left: 0px !important;
  }

  html.mobile-landscape-mode .left-sidebar .menu-item-btn {
    padding: 2px 1px !important;
    margin: 1.5px 0 !important;
    min-height: 32px !important;
    border-radius: 6px !important;
  }

  html.mobile-landscape-mode .left-sidebar .menu-item-btn .item-icon-3d {
    width: 22px !important;
    height: 22px !important;
  }

  html.mobile-landscape-mode .left-sidebar .menu-item-btn span {
    font-size: 10px !important;
    line-height: 1.1 !important;
    margin-top: 1px !important;
  }

  html.mobile-landscape-mode .left-sidebar .quick-village-btn {
    padding: 3px 2px !important;
    min-height: 34px !important;
    margin-top: 2px !important;
  }

  html.mobile-landscape-mode .left-sidebar .quick-village-btn #quickToggleIcon {
    font-size: 0.95rem !important;
  }

  html.mobile-landscape-mode .left-sidebar .quick-village-btn #quickToggleLabel {
    font-size: 10px !important;
  }

  /* 3. Right Sidebar: Reduced ~20%, Smooth Native Touch Scroll & Collapsible Overlay */
  html.mobile-landscape-mode .right-sidebar {
    display: flex !important;
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
    position: fixed !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    padding: 4px 3px 28px 3px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    max-height: var(--logical-vh, 100vh) !important;
    max-height: var(--logical-vh, 100dvh) !important;
    height: 100% !important;
    z-index: 85 !important;
    scrollbar-width: thin !important;
  }

  html.mobile-landscape-mode .right-sidebar:not(.collapsed) {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  html.mobile-landscape-mode .right-sidebar.collapsed {
    transform: translateX(100%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  html.mobile-landscape-mode .right-sidebar > * {
    touch-action: pan-y !important;
  }

  html.mobile-landscape-mode .right-sidebar::-webkit-scrollbar {
    width: 3.5px !important;
  }

  html.mobile-landscape-mode .right-sidebar::-webkit-scrollbar-thumb {
    background: rgba(229, 184, 92, 0.45) !important;
    border-radius: 3px !important;
  }

  html.mobile-landscape-mode .right-sidebar-toggle-btn {
    right: 132px !important;
    top: calc(50% + 20px) !important;
    transform: translateY(-50%) !important;
    width: 18px !important;
    height: 34px !important;
    font-size: 0.72rem !important;
    z-index: 86 !important;
  }

  html.mobile-landscape-mode body.sidebar-is-collapsed .right-sidebar-toggle-btn,
  html.mobile-landscape-mode .app-layout.sidebar-is-collapsed .right-sidebar-toggle-btn {
    right: 0px !important;
  }

  html.mobile-landscape-mode .right-chat-tabs {
    right: 132px !important;
    top: 30px !important;
    gap: 2.5px !important;
    z-index: 86 !important;
  }

  html.mobile-landscape-mode body.sidebar-is-collapsed .right-chat-tabs,
  html.mobile-landscape-mode .app-layout.sidebar-is-collapsed .right-chat-tabs {
    right: 0px !important;
  }

  html.mobile-landscape-mode .chat-tab-vertical {
    font-size: 10px !important;
    padding: 4px 2px !important;
    letter-spacing: 0.1px !important;
    border: none !important;
  }

  html.mobile-landscape-mode .right-sidebar .logo-header {
    padding: 3px 2px !important;
    margin-bottom: 2px !important;
  }

  html.mobile-landscape-mode .right-sidebar .dirilis-logo-text {
    font-size: 0.76rem !important;
    letter-spacing: 0.4px !important;
    margin-bottom: 1px !important;
  }

  html.mobile-landscape-mode .right-sidebar .player-subtitle {
    font-size: 10px !important;
    margin-bottom: 2px !important;
  }

  html.mobile-landscape-mode .right-sidebar #playerXpBadge {
    padding: 2.5px 3px !important;
    margin-bottom: 3px !important;
    border-radius: 6px !important;
  }

  html.mobile-landscape-mode .right-sidebar #sidebarAvatarIcon {
    font-size: 13px !important;
    width: 18px !important;
    height: 18px !important;
  }

  html.mobile-landscape-mode .right-sidebar .xp-title,
  html.mobile-landscape-mode .right-sidebar .xp-val,
  html.mobile-landscape-mode .right-sidebar #sidebarVillageTpLabel,
  html.mobile-landscape-mode .right-sidebar #sidebarVillageTpName,
  html.mobile-landscape-mode .right-sidebar #sidebarVillageTpRatio {
    font-size: 10px !important;
  }

  html.mobile-landscape-mode .right-sidebar .panel-section-title {
    font-size: 10px !important;
    padding: 1.5px 2px !important;
    margin-top: 2px !important;
    margin-bottom: 1.5px !important;
  }

  html.mobile-landscape-mode .right-sidebar .shield-table-pill {
    font-size: 10px !important;
    padding: 1px 3px !important;
  }

  html.mobile-landscape-mode .right-sidebar .resources-list {
    gap: 1.5px !important;
  }

  html.mobile-landscape-mode .right-sidebar .resource-row {
    padding: 1.5px 3px !important;
    min-height: 17px !important;
    font-size: 10px !important;
    border-radius: 4px !important;
  }

  html.mobile-landscape-mode .right-sidebar .resource-row .res-icon-img {
    width: 12px !important;
    height: 12px !important;
  }

  html.mobile-landscape-mode .right-sidebar .resource-row .resource-label {
    font-size: 10px !important;
    gap: 2px !important;
  }

  html.mobile-landscape-mode .right-sidebar .resource-row .resource-val {
    font-size: 10px !important;
  }

  html.mobile-landscape-mode .right-sidebar .resource-row .res-buff-indicator {
    font-size: 6.5px !important;
    padding: 0 2px !important;
  }

  html.mobile-landscape-mode .right-sidebar .cities-grid {
    gap: 1.5px !important;
    margin-bottom: 3px !important;
  }

  html.mobile-landscape-mode .right-sidebar .cities-grid .city-btn {
    font-size: 10px !important;
    padding: 1.5px 3px !important;
    border-radius: 4px !important;
  }

  html.mobile-landscape-mode .right-sidebar .events-bar {
    padding: 2px 1px !important;
    gap: 1.5px !important;
    margin-top: 3px !important;
    flex-wrap: nowrap !important;
  }

  html.mobile-landscape-mode .right-sidebar .event-circle-btn {
    min-width: 25px !important;
    max-width: 29px !important;
    height: 32px !important;
    padding: 1px !important;
  }

  html.mobile-landscape-mode .right-sidebar .event-icon-3d {
    width: 18px !important;
    height: 18px !important;
  }

  html.mobile-landscape-mode .right-sidebar .event-circle-btn span {
    font-size: 10px !important;
    margin-top: 0.5px !important;
  }

  /* 4. Top Resource Bar HUD: Reduced ~30%, Single Row, Centered between sidebars */
  html.mobile-landscape-mode .top-mobile-resource-bar {
    display: flex !important;
    flex-direction: row !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    padding: 0 4px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 2px !important;
    top: env(safe-area-inset-top, 2px) !important;
    left: calc(50% + (var(--left-sidebar-offset, 78px) - var(--right-sidebar-offset, 165px)) / 2) !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: calc(var(--logical-vw, 100vw) - var(--left-sidebar-offset, 78px) - var(--right-sidebar-offset, 165px) - 6px) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-radius: 12px !important;
    z-index: 80 !important;
    scrollbar-width: none !important;
  }

  html.mobile-landscape-mode .top-mobile-resource-bar::-webkit-scrollbar {
    display: none !important;
  }

  html.mobile-landscape-mode .top-mobile-resource-bar .top-mobile-resource-row,
  html.mobile-landscape-mode .top-mobile-resource-bar .top-inline-resources-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    gap: 3px !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html.mobile-landscape-mode .top-mobile-resource-bar .inline-res-item {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 2px !important;
    font-size: 0.58rem !important;
    padding: 1px 2.5px !important;
    white-space: nowrap !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex-shrink: 0 !important;
  }

  html.mobile-landscape-mode .top-mobile-resource-bar .res-icon-img {
    width: 11px !important;
    height: 11px !important;
    flex-shrink: 0 !important;
  }

  /* Hide +%20 buff indicators in landscape mode to guarantee single-row fit */
  html.mobile-landscape-mode .top-mobile-resource-bar .res-buff-indicator,
  html.mobile-landscape-mode .top-mobile-resource-bar .top-bar-buff {
    display: none !important;
  }

  html.mobile-landscape-mode .top-mobile-resource-bar .inline-res-item.res-diamond {
    height: 18px !important;
    padding: 0 3px !important;
    font-size: 0.58rem !important;
  }

  html.mobile-landscape-mode .top-mobile-resource-bar .inline-res-item.res-diamond .res-diamond-plus {
    font-size: 0.60rem !important;
    margin-left: 1px !important;
  }

  /* 5. Village Top Header: Köy Adı & Nüfus (Sol) and Haritaya Dön (Sağ) directly below resource bar */
  html.mobile-landscape-mode .village-top-header {
    position: absolute !important;
    top: calc(env(safe-area-inset-top, 2px) + 28px) !important;
    left: calc(var(--left-sidebar-offset, 78px) + 8px) !important;
    right: calc(var(--right-sidebar-offset, 165px) + 8px) !important;
    width: auto !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
    z-index: 80 !important;
    transition: left 0.28s cubic-bezier(0.16, 1, 0.3, 1), right 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  html.mobile-landscape-mode .village-construction-queue-bar {
    position: absolute !important;
    top: 30px !important;
    left: calc(var(--left-sidebar-offset, 78px) + 8px) !important;
    z-index: 78 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    pointer-events: auto !important;
    transition: left 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  html.mobile-landscape-mode .village-top-header > * {
    pointer-events: auto !important;
  }

  html.mobile-landscape-mode .mobile-village-tp-badge {
    display: none !important;
  }

  html.mobile-landscape-mode .village-top-header .village-name-badge {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 2px 7px !important;
    background: rgba(18, 13, 9, 0.92) !important;
    border: 1px solid rgba(229, 184, 92, 0.35) !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    pointer-events: auto !important;
  }

  html.mobile-landscape-mode .village-name-badge-title-row {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
  }

  html.mobile-landscape-mode .village-top-header .village-title {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: #fef08a !important;
    white-space: nowrap !important;
  }

  /* Seviye yazısı mobilde gizlenir */
  html.mobile-landscape-mode #villageHeaderLevel {
    display: none !important;
  }

  html.mobile-landscape-mode .village-top-header .village-workers-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
    font-size: 0.68rem !important;
    color: var(--dirilis-gold-accent, #e5b85c) !important;
    white-space: nowrap !important;
  }

  html.mobile-landscape-mode .village-top-header .village-workers-badge .res-icon-img {
    width: 12px !important;
    height: 12px !important;
    object-fit: contain !important;
  }

  html.mobile-landscape-mode .village-header-right-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 3px !important;
    margin: 0 !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    pointer-events: auto !important;
    width: 72px !important;
  }

  html.mobile-landscape-mode .village-back-to-map-btn {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    height: 22px !important;
    min-height: 22px !important;
    padding: 3px 4px !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 8px rgba(212, 167, 72, 0.4) !important;
    cursor: pointer !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
  }

  /* 6. Bottom Troop Bar: Mobil Yataya Özel Daha Kompakt (~52px) & Collapsible */
  html.mobile-landscape-mode .bottom-troop-bar-dock {
    display: flex !important;
    position: absolute !important;
    bottom: env(safe-area-inset-bottom, 2px) !important;
    left: calc(var(--left-sidebar-offset, 78px) + 8px) !important;
    right: calc(var(--right-sidebar-offset, 165px) + 8px) !important;
    width: auto !important;
    z-index: 75 !important;
    pointer-events: none !important;
    justify-content: center !important;
    transform: translateY(0) !important;
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), left 0.28s cubic-bezier(0.16, 1, 0.3, 1), right 0.28s cubic-bezier(0.16, 1, 0.3, 1), bottom 0.32s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  html.mobile-landscape-mode .bottom-troop-bar-dock.collapsed {
    bottom: 0px !important;
    transform: translateY(100%) !important;
  }

  html.mobile-landscape-mode .bottom-troop-bar-dock > * {
    pointer-events: auto !important;
  }

  html.mobile-landscape-mode .bottom-troop-bar {
    display: flex !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    padding: 2px 4px !important;
    gap: 3px !important;
    border-radius: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    width: fit-content !important;
    max-width: 100% !important;
  }

  html.mobile-landscape-mode .bottom-troop-bar.collapsed {
    pointer-events: none !important;
  }

  html.mobile-landscape-mode .bottom-troop-bar .troop-card-item {
    min-width: 48px !important;
    max-width: 58px !important;
    height: 52px !important;
    padding: 1px 2px !important;
    border-radius: 5px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  html.mobile-landscape-mode .bottom-troop-bar .troop-card-portrait {
    width: 22px !important;
    height: 22px !important;
    border-radius: 4px !important;
    margin-bottom: 0px !important;
    flex-shrink: 0 !important;
  }

  html.mobile-landscape-mode .bottom-troop-bar .troop-card-name {
    font-size: 11px !important;
    line-height: 1.05 !important;
    margin-bottom: 0.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  html.mobile-landscape-mode .bottom-troop-bar .troop-card-count-badge {
    font-size: 11px !important;
    padding: 0 3px !important;
    line-height: 1.05 !important;
    min-height: 13px !important;
    border-radius: 3px !important;
    max-width: 100% !important;
    white-space: nowrap !important;
  }

  html.mobile-landscape-mode .bottom-troop-bar .troop-card-stats {
    display: none !important;
  }

  html.mobile-landscape-mode .bottom-troop-bar-toggle-btn {
    width: 32px !important;
    height: 13px !important;
    top: -12px !important;
    font-size: 0.60rem !important;
    border-top-left-radius: 6px !important;
    border-top-right-radius: 6px !important;
  }

  /* 6. Found Village Bar Position */
  html.mobile-landscape-mode #foundVillageTopBar {
    left: calc(50% + (var(--left-sidebar-offset, 78px) - var(--right-sidebar-offset, 165px)) / 2) !important;
    transform: translateX(-50%) !important;
    top: max(28px, calc(env(safe-area-inset-top, 0px) + 26px)) !important;
  }

  html.mobile-landscape-mode #foundVillageTopBtn {
    font-size: 0.70rem !important;
    padding: 3px 8px !important;
    min-height: 28px !important;
  }

  /* 7. Sol Araştırma/Geliştirme ve Sağ Sefer Butonları (%50 Küçültme - Sidebar kapanınca boşluğa kayar) */
  html.mobile-landscape-mode .village-left-actions {
    position: absolute !important;
    left: calc(var(--left-sidebar-offset, 62px) + 30px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    z-index: 120 !important;
    pointer-events: auto !important;
    transition: left 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  html.mobile-landscape-mode .village-right-actions,
  html.mobile-landscape-mode .map-right-actions {
    position: absolute !important;
    right: calc(var(--right-sidebar-offset, 132px) + 30px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    z-index: 120 !important;
    pointer-events: auto !important;
    transition: right 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  html.mobile-landscape-mode .btn-center-own-village {
    left: calc(var(--left-sidebar-offset, 78px) + 8px) !important;
    bottom: 6px !important;
    transition: left 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  html.mobile-landscape-mode .village-left-actions .action-circle-btn,
  html.mobile-landscape-mode .village-right-actions .action-circle-btn,
  html.mobile-landscape-mode .map-right-actions .action-circle-btn,
  html.mobile-landscape-mode .center-game-area .action-circle-btn {
    width: 31px !important;
    height: 31px !important;
    min-width: 31px !important;
    min-height: 31px !important;
    max-width: 31px !important;
    max-height: 31px !important;
    border-radius: 7px !important;
    padding: 1px !important;
    font-size: 0.70rem !important;
  }

  html.mobile-landscape-mode .village-left-actions .action-circle-btn .action-icon-3d,
  html.mobile-landscape-mode .village-right-actions .action-circle-btn .action-icon-3d,
  html.mobile-landscape-mode .map-right-actions .action-circle-btn .action-icon-3d,
  html.mobile-landscape-mode .center-game-area .action-circle-btn .action-icon-3d {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    min-height: 17px !important;
  }

  html.mobile-landscape-mode .village-left-actions .action-circle-btn span,
  html.mobile-landscape-mode .village-right-actions .action-circle-btn span,
  html.mobile-landscape-mode .map-right-actions .action-circle-btn span,
  html.mobile-landscape-mode .center-game-area .action-circle-btn span {
    font-size: 5.5px !important;
    line-height: 1 !important;
    margin-top: 1px !important;
  }

  html.mobile-landscape-mode .village-left-actions .action-circle-btn .event-badge,
  html.mobile-landscape-mode .village-right-actions .action-circle-btn .event-badge,
  html.mobile-landscape-mode .map-right-actions .action-circle-btn .event-badge,
  html.mobile-landscape-mode .center-game-area .action-circle-btn .event-badge {
    font-size: 6px !important;
    min-width: 11px !important;
    height: 11px !important;
    line-height: 11px !important;
    padding: 0 2px !important;
    top: -3px !important;
    right: -3px !important;
  }

  html.mobile-landscape-mode .landing-page-overlay {
    overflow-y: auto;
  }

  html.mobile-landscape-mode .landing-nav {
    padding: 6px 20px;
  }

  html.mobile-landscape-mode .landing-logo {
    font-size: 1.2rem;
  }

  html.mobile-landscape-mode .landing-hero {
    grid-template-columns: 1fr 1.15fr;
    gap: 16px;
    padding: 10px 20px;
    align-items: center;
  }

  html.mobile-landscape-mode .landing-auth-card {
    padding: 12px 16px;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85);
  }

  html.mobile-landscape-mode .landing-auth-tab-btn {
    padding: 6px 10px;
    font-size: 0.76rem;
  }

  html.mobile-landscape-mode .tribe-picker-grid {
    gap: 6px;
    grid-template-columns: repeat(3, 1fr);
  }

  html.mobile-landscape-mode .tribe-picker-card {
    padding: 6px 4px;
  }

  html.mobile-landscape-mode .palisade-wall-wrapper {
    position: absolute !important;
    inset: auto !important;
    width: var(--mobile-village-w, calc(var(--logical-vh, 100dvh) * 4000 / 2232)) !important;
    height: var(--mobile-village-h, 100%) !important;
    left: calc(50% - (var(--mobile-village-w, calc(var(--logical-vh, 100dvh) * 4000 / 2232)) / 2)) !important;
    top: calc(50% - (var(--mobile-village-h, 100%) / 2)) !important;
    aspect-ratio: var(--mobile-village-aspect, 4000 / 2232) !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    touch-action: none !important;
  }

  /* Universal Landscape Modal Fix: Never truncate dialogs or buttons */
  html.mobile-landscape-mode .modal-window,
  html.mobile-landscape-mode .modal-dark-card,
  html.mobile-landscape-mode .ranking-modal-card,
  html.mobile-landscape-mode .building-detail-card,
  html.mobile-landscape-mode .custom-modal,
  html.mobile-landscape-mode .game-modal {
    max-height: calc(var(--logical-vh, 100vh) * 0.96) !important;
    max-height: calc(var(--logical-vh, 100dvh) * 0.96) !important;
    max-width: calc(var(--logical-vw, 100vw) * 0.94) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  html.mobile-landscape-mode .modal-header,
  html.mobile-landscape-mode .modal-dark-card-header,
  html.mobile-landscape-mode .building-detail-header {
    padding: 6px 36px 6px 14px !important;
    min-height: 34px !important;
    flex-shrink: 0 !important;
    font-size: 0.85rem !important;
  }

  html.mobile-landscape-mode .modal-close-btn,
  html.mobile-landscape-mode .modal-window .close-btn {
    top: 6px !important;
    right: 8px !important;
    width: 26px !important;
    height: 26px !important;
    font-size: 1rem !important;
    line-height: 24px !important;
  }

  /* Body must take remaining space and scroll independently */
  html.mobile-landscape-mode .modal-body,
  html.mobile-landscape-mode .modal-dark-card-body,
  html.mobile-landscape-mode .building-detail-body,
  html.mobile-landscape-mode .building-detail-content,
  html.mobile-landscape-mode .ranking-list-body,
  html.mobile-landscape-mode .farm-list-container,
  html.mobile-landscape-mode .report-detail-body,
  html.mobile-landscape-mode .clan-modal-body,
  html.mobile-landscape-mode .modal-scrollable-content {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-height: calc(calc(var(--logical-vh, 100vh) * 0.96) - 75px) !important;
    padding: 8px 14px !important;
    box-sizing: border-box !important;
  }

  /* Action Footers stay pinned and visible at bottom */
  html.mobile-landscape-mode .modal-footer,
  html.mobile-landscape-mode .building-actions,
  html.mobile-landscape-mode .action-btn-row,
  html.mobile-landscape-mode .modal-confirm-actions {
    flex-shrink: 0 !important;
    padding: 5px 12px !important;
    gap: 6px !important;
    background: rgba(16, 12, 8, 0.95) !important;
    border-top: 1px solid rgba(229, 184, 92, 0.25) !important;
  }

  html.mobile-landscape-mode .building-upgrade-cost-row,
  html.mobile-landscape-mode .unit-cost-row {
    flex-wrap: wrap !important;
    gap: 4px !important;
    font-size: 0.72rem !important;
  }

  html.mobile-landscape-mode .center-hud-bar {
    bottom: 4px !important;
    right: calc(var(--right-sidebar-offset, 0px) + 6px) !important;
    padding: 2px 8px !important;
    font-size: 0.65rem !important;
  }

  html.mobile-landscape-mode .map-center-coords-bar {
    bottom: 4px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  html.mobile-landscape-mode .hud-time-weather-capsule:not(.village-inline-capsule) {
    bottom: 4px !important;
    right: calc(var(--right-sidebar-offset, 0px) + 6px) !important;
    left: auto !important;
  }
  html.mobile-landscape-mode .hud-time-weather-capsule.village-inline-capsule {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    margin-top: 2px !important;
    margin-left: auto !important;
    align-self: flex-end !important;
  }

  html.mobile-landscape-mode .village-left-actions {
    gap: 4px !important;
    left: calc(var(--left-sidebar-offset, 0px) + 6px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 70 !important;
  }

  html.mobile-landscape-mode .action-circle-btn {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.85rem !important;
  }

  html.mobile-landscape-mode .action-circle-btn .action-icon-3d {
    width: 18px !important;
    height: 18px !important;
  }

  html.mobile-landscape-mode #foundVillageTopBar {
    top: 36px !important;
  }

  html.mobile-landscape-mode #foundVillageTopBtn {
    font-size: 0.68rem !important;
    padding: 3px 8px !important;
  }

/* ==========================================================================
   CLASS-BASED MOBILE PORTRAIT & LANDSCAPE OVERRIDES (FOR MOBILE BROWSERS & APK)
   ========================================================================== */
html[data-device-orientation="portrait"] .left-sidebar,
body[data-device-orientation="portrait"] .left-sidebar,
html.mobile-portrait-mode .left-sidebar,
body.mobile-portrait-mode .left-sidebar,
html.is-portrait:not(.is-landscape):not(.mobile-landscape-mode):not([data-device-orientation="landscape"]) .left-sidebar,
body.is-portrait:not(.is-landscape):not(.mobile-landscape-mode):not([data-device-orientation="landscape"]) .left-sidebar,
html[data-device-orientation="portrait"] .right-sidebar,
body[data-device-orientation="portrait"] .right-sidebar,
html.mobile-portrait-mode .right-sidebar,
body.mobile-portrait-mode .right-sidebar,
html.is-portrait:not(.is-landscape):not(.mobile-landscape-mode):not([data-device-orientation="landscape"]) .right-sidebar,
body.is-portrait:not(.is-landscape):not(.mobile-landscape-mode):not([data-device-orientation="landscape"]) .right-sidebar,
html[data-device-orientation="portrait"] .left-sidebar-toggle-btn,
body[data-device-orientation="portrait"] .left-sidebar-toggle-btn,
html.mobile-portrait-mode .left-sidebar-toggle-btn,
body.mobile-portrait-mode .left-sidebar-toggle-btn,
html[data-device-orientation="portrait"] .right-sidebar-toggle-btn,
body[data-device-orientation="portrait"] .right-sidebar-toggle-btn,
html.mobile-portrait-mode .right-sidebar-toggle-btn,
body.mobile-portrait-mode .right-sidebar-toggle-btn,
html[data-device-orientation="portrait"] .right-chat-tabs,
body[data-device-orientation="portrait"] .right-chat-tabs,
html.mobile-portrait-mode .right-chat-tabs,
body.mobile-portrait-mode .right-chat-tabs {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
}

html[data-device-orientation="portrait"] .mobile-bottom-nav,
body[data-device-orientation="portrait"] .mobile-bottom-nav,
html.mobile-portrait-mode .mobile-bottom-nav,
body.mobile-portrait-mode .mobile-bottom-nav {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html[data-device-orientation="portrait"] .center-game-area,
body[data-device-orientation="portrait"] .center-game-area,
html.mobile-portrait-mode .center-game-area,
body.mobile-portrait-mode .center-game-area {
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
}

html[data-device-orientation="portrait"] #foundVillageTopBar,
body[data-device-orientation="portrait"] #foundVillageTopBar,
html.mobile-portrait-mode #foundVillageTopBar,
body.mobile-portrait-mode #foundVillageTopBar {
  top: max(98px, calc(env(safe-area-inset-top, 0px) + 98px)) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* Explicit class & attribute based mobile hybrid landscape overrides */
html[data-device-orientation="landscape"],
body[data-device-orientation="landscape"],
html.mobile-landscape-mode,
body.mobile-landscape-mode,
html.mobile-landscape-mode .app-layout {
  --left-sidebar-offset: 62px !important;
  --right-sidebar-offset: 132px !important;
}

html[data-device-orientation="landscape"] body.left-sidebar-is-collapsed,
html[data-device-orientation="landscape"] .app-layout.left-sidebar-is-collapsed,
html.mobile-landscape-mode body.left-sidebar-is-collapsed,
html.mobile-landscape-mode .app-layout.left-sidebar-is-collapsed,
body.mobile-landscape-mode.left-sidebar-is-collapsed {
  --left-sidebar-offset: 0px !important;
}

html[data-device-orientation="landscape"] body.sidebar-is-collapsed,
html[data-device-orientation="landscape"] .app-layout.sidebar-is-collapsed,
html.mobile-landscape-mode body.sidebar-is-collapsed,
html.mobile-landscape-mode .app-layout.sidebar-is-collapsed,
body.mobile-landscape-mode.sidebar-is-collapsed {
  --right-sidebar-offset: 0px !important;
}

html[data-device-orientation="landscape"] .mobile-bottom-nav,
body[data-device-orientation="landscape"] .mobile-bottom-nav,
html.mobile-landscape-mode .mobile-bottom-nav,
body.mobile-landscape-mode .mobile-bottom-nav {
  display: none !important;
}

html[data-device-orientation="landscape"] .mobile-village-picker-btn,
html[data-device-orientation="landscape"] #mobileVillageViewPickerBtn,
html[data-device-orientation="landscape"] #mobileMapVillagePickerBtn,
html.mobile-landscape-mode .mobile-village-picker-btn,
html.mobile-landscape-mode #mobileVillageViewPickerBtn,
html.mobile-landscape-mode #mobileMapVillagePickerBtn {
  display: none !important;
}

/* 1. Left Sidebar in Mobile Hybrid Landscape (78px Collapsible Overlay) */
html[data-device-orientation="landscape"] .left-sidebar,
body[data-device-orientation="landscape"] .left-sidebar,
html.mobile-landscape-mode .left-sidebar,
body.mobile-landscape-mode .left-sidebar {
  display: flex !important;
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 62px !important;
  min-width: 62px !important;
  max-width: 62px !important;
  padding: 4px 2px 20px 2px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  z-index: 85 !important;
}

html[data-device-orientation="landscape"] .left-sidebar:not(.collapsed),
body[data-device-orientation="landscape"] .left-sidebar:not(.collapsed),
html.mobile-landscape-mode .left-sidebar:not(.collapsed),
body.mobile-landscape-mode .left-sidebar:not(.collapsed) {
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}

html[data-device-orientation="landscape"] .left-sidebar.collapsed,
body[data-device-orientation="landscape"] .left-sidebar.collapsed,
html.mobile-landscape-mode .left-sidebar.collapsed,
body.mobile-landscape-mode .left-sidebar.collapsed {
  transform: translateX(-100%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html[data-device-orientation="landscape"] .left-sidebar-toggle-btn,
body[data-device-orientation="landscape"] .left-sidebar-toggle-btn,
html.mobile-landscape-mode .left-sidebar-toggle-btn,
body.mobile-landscape-mode .left-sidebar-toggle-btn {
  display: flex !important;
  left: 62px !important;
  top: calc(50% + 20px) !important;
  transform: translateY(-50%) !important;
  width: 18px !important;
  height: 34px !important;
  z-index: 86 !important;
}

html[data-device-orientation="landscape"] body.left-sidebar-is-collapsed .left-sidebar-toggle-btn,
html[data-device-orientation="landscape"] .app-layout.left-sidebar-is-collapsed .left-sidebar-toggle-btn,
html.mobile-landscape-mode body.left-sidebar-is-collapsed .left-sidebar-toggle-btn,
html.mobile-landscape-mode .app-layout.left-sidebar-is-collapsed .left-sidebar-toggle-btn,
body.mobile-landscape-mode.left-sidebar-is-collapsed .left-sidebar-toggle-btn {
  left: 0px !important;
}

html[data-device-orientation="landscape"] .left-sidebar .menu-item-btn,
html.mobile-landscape-mode .left-sidebar .menu-item-btn {
  padding: 2px 1px !important;
  margin: 1.5px 0 !important;
  min-height: 32px !important;
  border-radius: 6px !important;
}

html[data-device-orientation="landscape"] .left-sidebar .menu-item-btn .item-icon-3d,
html.mobile-landscape-mode .left-sidebar .menu-item-btn .item-icon-3d {
  width: 22px !important;
  height: 22px !important;
}

html[data-device-orientation="landscape"] .left-sidebar .menu-item-btn span,
html.mobile-landscape-mode .left-sidebar .menu-item-btn span {
  font-size: 10px !important;
  line-height: 1.1 !important;
  margin-top: 1px !important;
}

/* 2. Right Sidebar in Mobile Hybrid Landscape (132px Collapsible & Scrollable Overlay) */
html[data-device-orientation="landscape"] .right-sidebar,
body[data-device-orientation="landscape"] .right-sidebar,
html.mobile-landscape-mode .right-sidebar,
body.mobile-landscape-mode .right-sidebar {
  display: flex !important;
  position: fixed !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 132px !important;
  min-width: 132px !important;
  max-width: 132px !important;
  padding: 4px 3px 28px 3px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  height: 100% !important;
  z-index: 85 !important;
  scrollbar-width: thin !important;
}

html[data-device-orientation="landscape"] .right-sidebar:not(.collapsed),
body[data-device-orientation="landscape"] .right-sidebar:not(.collapsed),
html.mobile-landscape-mode .right-sidebar:not(.collapsed),
body.mobile-landscape-mode .right-sidebar:not(.collapsed) {
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}

html[data-device-orientation="landscape"] .right-sidebar.collapsed,
body[data-device-orientation="landscape"] .right-sidebar.collapsed,
html.mobile-landscape-mode .right-sidebar.collapsed,
body.mobile-landscape-mode .right-sidebar.collapsed {
  transform: translateX(100%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html[data-device-orientation="landscape"] .right-sidebar-toggle-btn,
body[data-device-orientation="landscape"] .right-sidebar-toggle-btn,
html.mobile-landscape-mode .right-sidebar-toggle-btn,
body.mobile-landscape-mode .right-sidebar-toggle-btn {
  display: flex !important;
  right: 132px !important;
  top: calc(50% + 20px) !important;
  transform: translateY(-50%) !important;
  width: 18px !important;
  height: 34px !important;
  z-index: 86 !important;
}

html[data-device-orientation="landscape"] body.sidebar-is-collapsed .right-sidebar-toggle-btn,
html[data-device-orientation="landscape"] .app-layout.sidebar-is-collapsed .right-sidebar-toggle-btn,
html.mobile-landscape-mode body.sidebar-is-collapsed .right-sidebar-toggle-btn,
html.mobile-landscape-mode .app-layout.sidebar-is-collapsed .right-sidebar-toggle-btn,
body.mobile-landscape-mode.sidebar-is-collapsed .right-sidebar-toggle-btn {
  right: 0px !important;
}

html[data-device-orientation="landscape"] .right-chat-tabs,
body[data-device-orientation="landscape"] .right-chat-tabs,
html.mobile-landscape-mode .right-chat-tabs,
body.mobile-landscape-mode .right-chat-tabs {
  display: flex !important;
  right: 132px !important;
  z-index: 86 !important;
}

html[data-device-orientation="landscape"] body.sidebar-is-collapsed .right-chat-tabs,
html[data-device-orientation="landscape"] .app-layout.sidebar-is-collapsed .right-chat-tabs,
html.mobile-landscape-mode body.sidebar-is-collapsed .right-chat-tabs,
html.mobile-landscape-mode .app-layout.sidebar-is-collapsed .right-chat-tabs,
body.mobile-landscape-mode.sidebar-is-collapsed .right-chat-tabs {
  right: 0px !important;
}

/* 3. Center Game Area: ALWAYS 100% Full Viewport (Never shrunk by sidebars or troop bar) */
html[data-device-orientation="landscape"] .center-game-area,
body[data-device-orientation="landscape"] .center-game-area,
html.mobile-landscape-mode .center-game-area,
body.mobile-landscape-mode .center-game-area {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* 4. Top Mobile Resource Bar: Single Row, Centered between active sidebars, 24px */
html[data-device-orientation="landscape"] .top-mobile-resource-bar,
body[data-device-orientation="landscape"] .top-mobile-resource-bar,
html.mobile-landscape-mode .top-mobile-resource-bar,
body.mobile-landscape-mode .top-mobile-resource-bar {
  display: flex !important;
  flex-direction: row !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  padding: 0 4px !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 2px !important;
  top: env(safe-area-inset-top, 2px) !important;
  left: calc(50% + (var(--left-sidebar-offset, 78px) - var(--right-sidebar-offset, 165px)) / 2) !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: calc(100vw - var(--left-sidebar-offset, 78px) - var(--right-sidebar-offset, 165px) - 6px) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border-radius: 12px !important;
  z-index: 80 !important;
  scrollbar-width: none !important;
}

html[data-device-orientation="landscape"] .top-mobile-resource-bar .top-mobile-resource-row,
html[data-device-orientation="landscape"] .top-mobile-resource-bar .top-inline-resources-list,
body[data-device-orientation="landscape"] .top-mobile-resource-bar .top-mobile-resource-row,
body[data-device-orientation="landscape"] .top-mobile-resource-bar .top-inline-resources-list,
html.mobile-landscape-mode .top-mobile-resource-bar .top-mobile-resource-row,
html.mobile-landscape-mode .top-mobile-resource-bar .top-inline-resources-list,
body.mobile-landscape-mode .top-mobile-resource-bar .top-mobile-resource-row,
body.mobile-landscape-mode .top-mobile-resource-bar .top-inline-resources-list {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  gap: 3px !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

html[data-device-orientation="landscape"] .top-mobile-resource-bar .inline-res-item,
body[data-device-orientation="landscape"] .top-mobile-resource-bar .inline-res-item,
html.mobile-landscape-mode .top-mobile-resource-bar .inline-res-item,
body.mobile-landscape-mode .top-mobile-resource-bar .inline-res-item {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 2px !important;
  font-size: 0.58rem !important;
  padding: 1px 2.5px !important;
  white-space: nowrap !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  flex-shrink: 0 !important;
}

html[data-device-orientation="landscape"] .top-mobile-resource-bar .res-icon-img,
body[data-device-orientation="landscape"] .top-mobile-resource-bar .res-icon-img,
html.mobile-landscape-mode .top-mobile-resource-bar .res-icon-img,
body.mobile-landscape-mode .top-mobile-resource-bar .res-icon-img {
  width: 11px !important;
  height: 11px !important;
  flex-shrink: 0 !important;
}

html[data-device-orientation="landscape"] .top-mobile-resource-bar .res-buff-indicator,
html[data-device-orientation="landscape"] .top-mobile-resource-bar .top-bar-buff,
body[data-device-orientation="landscape"] .top-mobile-resource-bar .res-buff-indicator,
body[data-device-orientation="landscape"] .top-mobile-resource-bar .top-bar-buff,
html.mobile-landscape-mode .top-mobile-resource-bar .res-buff-indicator,
html.mobile-landscape-mode .top-mobile-resource-bar .top-bar-buff,
body.mobile-landscape-mode .top-mobile-resource-bar .res-buff-indicator,
body.mobile-landscape-mode .top-mobile-resource-bar .top-bar-buff {
  display: none !important;
}

/* 5. Village Top Header (directly under resource bar, shifts with sidebar offsets) */
html[data-device-orientation="landscape"] .village-top-header,
body[data-device-orientation="landscape"] .village-top-header,
html.mobile-landscape-mode .village-top-header,
body.mobile-landscape-mode .village-top-header {
  position: absolute !important;
  top: calc(env(safe-area-inset-top, 2px) + 28px) !important;
  left: calc(var(--left-sidebar-offset, 62px) + 8px) !important;
  right: calc(var(--right-sidebar-offset, 132px) + 30px) !important;
  width: auto !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
  z-index: 80 !important;
  transition: left 0.28s cubic-bezier(0.16, 1, 0.3, 1), right 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html[data-device-orientation="landscape"] .village-top-header > *,
html.mobile-landscape-mode .village-top-header > * {
  pointer-events: auto !important;
}

html[data-device-orientation="landscape"] #villageHeaderLevel,
html.mobile-landscape-mode #villageHeaderLevel {
  display: none !important;
}

html[data-device-orientation="landscape"] .village-construction-queue-bar,
body[data-device-orientation="landscape"] .village-construction-queue-bar,
html.mobile-landscape-mode .village-construction-queue-bar,
body.mobile-landscape-mode .village-construction-queue-bar {
  position: absolute !important;
  top: 30px !important;
  left: calc(var(--left-sidebar-offset, 78px) + 8px) !important;
  z-index: 78 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  pointer-events: auto !important;
  transition: left 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 6. Bottom Troop Bar: 52px Collapsible Overlay */
html[data-device-orientation="landscape"] .bottom-troop-bar-dock,
body[data-device-orientation="landscape"] .bottom-troop-bar-dock,
html.mobile-landscape-mode .bottom-troop-bar-dock,
body.mobile-landscape-mode .bottom-troop-bar-dock {
  display: flex !important;
  position: absolute !important;
  bottom: env(safe-area-inset-bottom, 2px) !important;
  left: calc(var(--left-sidebar-offset, 78px) + 8px) !important;
  right: calc(var(--right-sidebar-offset, 165px) + 8px) !important;
  width: auto !important;
  z-index: 75 !important;
  pointer-events: none !important;
  justify-content: center !important;
  transform: translateY(0) !important;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), left 0.28s cubic-bezier(0.16, 1, 0.3, 1), right 0.28s cubic-bezier(0.16, 1, 0.3, 1), bottom 0.32s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

html[data-device-orientation="landscape"] .bottom-troop-bar-dock.collapsed,
body[data-device-orientation="landscape"] .bottom-troop-bar-dock.collapsed,
html.mobile-landscape-mode .bottom-troop-bar-dock.collapsed,
body.mobile-landscape-mode .bottom-troop-bar-dock.collapsed {
  bottom: 0px !important;
  transform: translateY(100%) !important;
}

html[data-device-orientation="landscape"] .bottom-troop-bar,
body[data-device-orientation="landscape"] .bottom-troop-bar,
html.mobile-landscape-mode .bottom-troop-bar,
body.mobile-landscape-mode .bottom-troop-bar {
  display: flex !important;
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
  padding: 2px 4px !important;
  gap: 3px !important;
  border-radius: 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  width: fit-content !important;
  max-width: 100% !important;
  pointer-events: auto !important;
}

html[data-device-orientation="landscape"] .bottom-troop-bar.collapsed,
body[data-device-orientation="landscape"] .bottom-troop-bar.collapsed,
html.mobile-landscape-mode .bottom-troop-bar.collapsed,
body.mobile-landscape-mode .bottom-troop-bar.collapsed {
  pointer-events: none !important;
}

html[data-device-orientation="landscape"] .bottom-troop-bar .troop-card-item,
body[data-device-orientation="landscape"] .bottom-troop-bar .troop-card-item,
html.mobile-landscape-mode .bottom-troop-bar .troop-card-item,
body.mobile-landscape-mode .bottom-troop-bar .troop-card-item {
  min-width: 48px !important;
  max-width: 58px !important;
  height: 52px !important;
  padding: 1px 2px !important;
  border-radius: 5px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

html[data-device-orientation="landscape"] .bottom-troop-bar .troop-card-portrait,
body[data-device-orientation="landscape"] .bottom-troop-bar .troop-card-portrait,
html.mobile-landscape-mode .bottom-troop-bar .troop-card-portrait,
body.mobile-landscape-mode .bottom-troop-bar .troop-card-portrait {
  width: 22px !important;
  height: 22px !important;
}

html[data-device-orientation="landscape"] .bottom-troop-bar .troop-card-name,
body[data-device-orientation="landscape"] .bottom-troop-bar .troop-card-name,
html.mobile-landscape-mode .bottom-troop-bar .troop-card-name,
body.mobile-landscape-mode .bottom-troop-bar .troop-card-name {
  font-size: 11px !important;
  line-height: 1.05 !important;
  margin-bottom: 0.5px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

html[data-device-orientation="landscape"] .bottom-troop-bar .troop-card-count-badge,
body[data-device-orientation="landscape"] .bottom-troop-bar .troop-card-count-badge,
html.mobile-landscape-mode .bottom-troop-bar .troop-card-count-badge,
body.mobile-landscape-mode .bottom-troop-bar .troop-card-count-badge {
  font-size: 11px !important;
  padding: 0 3px !important;
  line-height: 1.05 !important;
  min-height: 13px !important;
  border-radius: 3px !important;
  max-width: 100% !important;
  white-space: nowrap !important;
}

/* 7. Quick Action Buttons: 31px (50% reduction) & Shift with Sidebar Offsets */
html[data-device-orientation="landscape"] .village-left-actions,
body[data-device-orientation="landscape"] .village-left-actions,
html.mobile-landscape-mode .village-left-actions,
body.mobile-landscape-mode .village-left-actions {
  position: absolute !important;
  left: calc(var(--left-sidebar-offset, 62px) + 30px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  z-index: 120 !important;
  pointer-events: auto !important;
  transition: left 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html[data-device-orientation="landscape"] .village-right-actions,
body[data-device-orientation="landscape"] .village-right-actions,
html.mobile-landscape-mode .village-right-actions,
body.mobile-landscape-mode .village-right-actions,
html[data-device-orientation="landscape"] .map-right-actions,
body[data-device-orientation="landscape"] .map-right-actions,
html.mobile-landscape-mode .map-right-actions,
body.mobile-landscape-mode .map-right-actions {
  position: absolute !important;
  right: calc(var(--right-sidebar-offset, 132px) + 30px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  z-index: 120 !important;
  pointer-events: auto !important;
  transition: right 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html[data-device-orientation="landscape"] .btn-center-own-village,
body[data-device-orientation="landscape"] .btn-center-own-village,
html.mobile-landscape-mode .btn-center-own-village,
body.mobile-landscape-mode .btn-center-own-village {
  left: calc(var(--left-sidebar-offset, 78px) + 8px) !important;
  bottom: 6px !important;
  transition: left 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html[data-device-orientation="landscape"] .hud-time-weather-capsule:not(.village-inline-capsule),
body[data-device-orientation="landscape"] .hud-time-weather-capsule:not(.village-inline-capsule),
html.mobile-landscape-mode .hud-time-weather-capsule:not(.village-inline-capsule),
body.mobile-landscape-mode .hud-time-weather-capsule:not(.village-inline-capsule),
html[data-device-orientation="landscape"] .center-hud-bar,
body[data-device-orientation="landscape"] .center-hud-bar,
html.mobile-landscape-mode .center-hud-bar,
body.mobile-landscape-mode .center-hud-bar {
  right: calc(var(--right-sidebar-offset, 132px) + 28px) !important;
  left: auto !important;
  bottom: 4px !important;
  transition: right 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Mobile Landscape 50% Scaled-Down Capsule (Both Map View & In-Village under "Haritaya Dön") */
html.mobile-landscape-mode .hud-time-weather-capsule,
body.mobile-landscape-mode .hud-time-weather-capsule,
html.mobile-landscape-mode .hud-time-weather-capsule.village-inline-capsule,
body.mobile-landscape-mode .hud-time-weather-capsule.village-inline-capsule {
  width: 72px !important;
  height: 23px !important;
}

html[data-device-orientation="landscape"] .hud-time-weather-capsule.village-inline-capsule,
body[data-device-orientation="landscape"] .hud-time-weather-capsule.village-inline-capsule,
html.mobile-landscape-mode .hud-time-weather-capsule.village-inline-capsule,
body.mobile-landscape-mode .hud-time-weather-capsule.village-inline-capsule {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  margin-top: 2px !important;
  margin-left: auto !important;
  align-self: flex-end !important;
}

html.mobile-landscape-mode .hud-time-weather-capsule .capsule-inner,
body.mobile-landscape-mode .hud-time-weather-capsule .capsule-inner {
  padding: 0 4.5px !important;
  gap: 1.5px !important;
  justify-content: space-between !important;
}

html.mobile-landscape-mode .hud-time-weather-capsule .capsule-weather-icon-wrap,
body.mobile-landscape-mode .hud-time-weather-capsule .capsule-weather-icon-wrap {
  width: 13px !important;
  height: 13px !important;
  flex: 0 0 13px !important;
}

html.mobile-landscape-mode .hud-time-weather-capsule .capsule-time-display,
body.mobile-landscape-mode .hud-time-weather-capsule .capsule-time-display {
  font-size: 7px !important;
  letter-spacing: 0px !important;
  padding: 1px 2px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  line-height: 1.1 !important;
  margin: 0 0 0 auto !important;
}

html[data-device-orientation="landscape"] .village-left-actions .action-circle-btn,
html[data-device-orientation="landscape"] .village-right-actions .action-circle-btn,
html[data-device-orientation="landscape"] .map-right-actions .action-circle-btn,
body[data-device-orientation="landscape"] .village-left-actions .action-circle-btn,
body[data-device-orientation="landscape"] .village-right-actions .action-circle-btn,
body[data-device-orientation="landscape"] .map-right-actions .action-circle-btn,
html.mobile-landscape-mode .village-left-actions .action-circle-btn,
html.mobile-landscape-mode .village-right-actions .action-circle-btn,
html.mobile-landscape-mode .map-right-actions .action-circle-btn,
html.mobile-landscape-mode .center-game-area .action-circle-btn,
body.mobile-landscape-mode .village-left-actions .action-circle-btn,
body.mobile-landscape-mode .village-right-actions .action-circle-btn,
body.mobile-landscape-mode .map-right-actions .action-circle-btn,
body.mobile-landscape-mode .center-game-area .action-circle-btn {
  width: 31px !important;
  height: 31px !important;
  min-width: 31px !important;
  min-height: 31px !important;
  max-width: 31px !important;
  max-height: 31px !important;
  border-radius: 7px !important;
  padding: 1px !important;
  font-size: 0.70rem !important;
}

html[data-device-orientation="landscape"] .action-icon-3d,
body[data-device-orientation="landscape"] .action-icon-3d,
html.mobile-landscape-mode .action-icon-3d,
body.mobile-landscape-mode .action-icon-3d {
  width: 17px !important;
  height: 17px !important;
  min-width: 17px !important;
  min-height: 17px !important;
}

/* ==========================================================================
   ELEGANT POPUP MODALS (Diamond Shop, Farm List, Empire Overview, Combat Sim)
   ========================================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
  animation: modalFadeIn 0.22s ease-out;
}

.modal-window {
  max-height: 94vh;
  max-height: 94dvh;
  max-width: 96vw;
  box-sizing: border-box;
  background: linear-gradient(165deg, #16120e 0%, #0d0a07 100%);
  border: 1.5px solid var(--dirilis-gold-accent);
  border-radius: 16px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.95), 0 0 35px rgba(229, 184, 92, 0.22);
  color: var(--dirilis-text-bright);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalPopIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-header {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 12px 52px;
  position: relative;
  flex-shrink: 0;
}

.modal-header > div:not(.modal-close-btn):not(.modal-info-btn) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0 auto;
}

.modal-close-btn {
  background: radial-gradient(circle at 35% 35%, #521818 0%, #220808 100%);
  border: 1.5px solid #d4af37;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7), inset 0 1px 1px rgba(255, 230, 160, 0.6);
  color: #ffe6a3;
  font-weight: 900;
  font-size: 0.88rem;
  width: 32px;
  height: 32px;
  min-width: 32px;
  max-width: 32px;
  max-height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
  padding: 0;
  line-height: 1;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
}

.modal-close-btn:hover {
  background: radial-gradient(circle at 35% 35%, #7f1d1d 0%, #3a0d0d 100%);
  border-color: #ef4444;
  color: #ffffff;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.8), 0 0 24px rgba(245, 197, 66, 0.4), inset 0 1px 2px #fff;
  transform: translateY(-50%);
}

.modal-close-btn:active {
  transform: translateY(-50%);
  background: radial-gradient(circle at 35% 35%, #450a0a 0%, #1a0505 100%);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 10px rgba(239, 68, 68, 0.5);
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalPopIn {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(14px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes pulseAttackAlert {
  0% { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); transform: translateX(-50%) scale(1); }
  50% { box-shadow: 0 3px 12px rgba(220, 38, 38, 0.35); transform: translateX(-50%) scale(1.015); }
  100% { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); transform: translateX(-50%) scale(1); }
}

@keyframes bounceAttackIcon {
  0% { transform: translateY(0); }
  100% { transform: translateY(-3px); }
}

/* ==========================================================================
   20-ITEM SYSTEM UPGRADES STYLING
   ========================================================================== */

/* Item 12: Diamond Shop Modal Sub Tabs & Responsive Layout */
.diamond-shop-tabs-bar {
  display: flex !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  background: rgba(10, 15, 28, 0.98) !important;
  border-bottom: 1.5px solid rgba(6, 182, 212, 0.3) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  flex-shrink: 0 !important;
  height: 52px !important;
  min-height: 52px !important;
  box-sizing: border-box !important;
  align-items: center !important;
  position: relative !important;
  z-index: 20 !important;
  scrollbar-width: none;
}
.diamond-shop-tabs-bar::-webkit-scrollbar {
  display: none;
}
.diamond-shop-tabs-bar .chat-chamfer-tab-btn,
#diamondShopModal .chat-chamfer-tab-btn {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  padding: 0 14px !important;
  height: 36px !important;
  line-height: 36px !important;
  min-width: max-content !important;
  font-size: 14px !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  box-sizing: border-box !important;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(56, 189, 248, 0.28);
  color: #94a3b8;
  transition: all 0.2s ease;
}
.diamond-shop-tabs-bar .chat-chamfer-tab-btn:hover,
#diamondShopModal .chat-chamfer-tab-btn:hover {
  background: rgba(8, 145, 178, 0.3);
  color: #e0f2fe;
  border-color: rgba(34, 211, 238, 0.5);
}
.diamond-shop-tabs-bar .chat-chamfer-tab-btn.active,
#diamondShopModal .chat-chamfer-tab-btn.active {
  border-color: #22d3ee !important;
  color: #ffffff !important;
  background: linear-gradient(180deg, #0891b2 0%, #0e7490 100%) !important;
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.5) !important;
}

.shop-status-banner {
  margin-bottom: 14px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(56, 189, 248, 0.3);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.shop-status-banner-item {
  display: flex;
  flex-direction: column;
}
.shop-status-banner-label {
  font-size: 0.72rem;
  color: #94a3b8;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.shop-status-banner-val {
  font-size: 12px !important;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shop-subs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.shop-shields-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.shop-buffs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.shop-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

@media (max-width: 600px) {
  .shop-header-subtitle {
    display: none !important;
  }
  .shop-status-banner {
    grid-template-columns: repeat(auto-fit, minmax(95px, 1fr));
    gap: 8px;
    padding: 8px 10px;
  }
  .shop-status-banner-label {
    font-size: 0.65rem;
  }
  .shop-status-banner-val {
    font-size: 0.82rem;
  }
  .shop-shields-grid, .shop-buffs-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .shop-shields-grid .shop-item-card, .shop-buffs-grid .shop-item-card {
    padding: 10px 8px !important;
  }
  .shop-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

/* Item 15: Chat Mentions System */
.chat-mention {
  color: #38bdf8;
  font-weight: 700;
  background: rgba(56, 189, 248, 0.15);
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid rgba(56, 189, 248, 0.3);
  display: inline-block;
  cursor: pointer;
}

.chat-mention.chat-mention-me {
  color: #fef08a;
  background: rgba(234, 179, 8, 0.28);
  border: 1px solid rgba(250, 204, 21, 0.6);
  box-shadow: 0 0 8px rgba(250, 204, 21, 0.4);
}

.chat-mention-badge {
  background: #ef4444;
  color: #ffffff;
  font-weight: 900;
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: 9999px;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.8);
  margin-left: 4px;
  animation: pulse 1.5s infinite;
}

.chat-tab-wrapper {
  position: relative;
  display: inline-flex;
}

.chat-vertical-badge {
  position: absolute;
  top: -6px;
  left: -8px;
  background: #ef4444;
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 900;
  min-width: 18px;
  height: 18px;
  line-height: 15px;
  text-align: center;
  border-radius: 999px;
  padding: 0 4px;
  border: 1.5px solid #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7), 0 0 8px rgba(239, 68, 68, 0.9);
  pointer-events: none;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse 1.5s infinite;
}

/* Item 16: Desktop Chat Window Switcher Row Hidden */
@media (min-width: 769px) {
  .chat-modal-slide .chat-tab-switcher-row {
    display: none !important;
  }
}

/* Item 17: Admin Modal Enlarged Size, Responsive Nav & Compact 10px Typography */
#adminModal .modal-dark-card,
.admin-modal-card {
  width: 98vw !important;
  max-width: 1750px !important;
  height: 96vh !important;
  max-height: 96vh !important;
  padding: 14px 18px !important;
  font-size: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 16px !important;
}

#adminModal h1, #adminModal h2, #adminModal h3, #adminModal h4, #adminModal h5, #adminModal h6 {
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
}

#adminModal p, 
#adminModal span:not(.header-title-emoji), 
#adminModal div, 
#adminModal label, 
#adminModal li, 
#adminModal table, 
#adminModal td, 
#adminModal .form-hint {
  font-size: 10px !important;
}

#adminModal table {
  font-size: 10px !important;
  width: 100% !important;
}

#adminModal th {
  padding: 5px 6px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
}

#adminModal td {
  padding: 5px 6px !important;
  font-size: 10px !important;
  border-right: 1px solid rgba(255, 255, 255, 0.04) !important;
}

#adminAllPlayersTable tbody tr:nth-child(odd) {
  background: rgba(15, 23, 42, 0.55) !important;
}

#adminAllPlayersTable tbody tr:nth-child(even) {
  background: rgba(168, 85, 247, 0.09) !important;
}

#adminAllPlayersTable tbody tr:hover {
  background: rgba(234, 179, 8, 0.16) !important;
}

#adminModal .input-field, #adminModal input, #adminModal select, #adminModal textarea {
  font-size: 10px !important;
  padding: 4px 7px !important;
}

#adminModal select option {
  font-size: 10px !important;
}

#adminModal .admin-tabs-nav {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  margin-bottom: 10px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid var(--dirilis-panel-border) !important;
}

#adminModal .admin-tabs-nav .btn,
#adminModal .admin-tabs-nav button {
  font-size: 10px !important;
  padding: 4px 8px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  border-radius: 6px !important;
  min-height: 24px !important;
  height: auto !important;
}

#adminModal .btn:not(.admin-tabs-nav .btn) {
  font-size: 10px !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
}

/* Item 20: Troop Movements Modal Enlargement & Elegance */
#troopMovementsListModal .modal-dark-card {
  width: 960px !important;
  max-width: 96vw !important;
  max-height: 85vh !important;
  font-size: 0.8rem;
}
.movement-link-player {
  color: #38bdf8;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  transition: color 0.15s ease;
}
.movement-link-player:hover {
  color: #7dd3fc;
}
.movement-link-village {
  color: var(--dirilis-gold-accent);
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  transition: color 0.15s ease;
}
.movement-link-village:hover {
  color: #fde047;
}

/* Item 7: Construct Buildings List Full Width & Compact Font */
#newBuildingConstructModal .construct-modal-grid {
  display: block !important;
}
#newBuildingConstructModal .construct-buildings-list {
  max-height: calc(85vh - 120px);
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  padding-right: 4px;
}
#newBuildingConstructModal .construct-row-item {
  font-size: 0.78rem;
  padding: 8px 10px;
}
#newBuildingConstructModal .construct-row-title {
  font-size: 0.85rem;
}
#newBuildingConstructModal .construct-row-duration {
  font-size: 0.72rem;
}
#newBuildingConstructModal .btn-construct-small {
  font-size: 0.75rem;
  padding: 5px 10px;
}

/* ==========================================================================
   16-ITEM SUITE: UI & THEME IMPROVEMENTS
   ========================================================================== */

/* Item 2: Top Village Switcher is removed from top resource bar per user request.
   Mobile players switch villages via bottom quick village picker buttons. */
#topVillageSelectBadge,
.top-village-badge {
  display: none !important;
}


/* Hide duplicate village-name-badge under top resource bar on large desktop monitors only */
@media (min-width: 769px) and (min-height: 651px) {
  .village-top-header .village-name-badge {
    display: none !important;
  }
}

/* Compact Top Resource Bar on Tablets and Small Viewports (769px - 1100px) */
@media (min-width: 769px) and (max-width: 1100px) {
  .top-mobile-resource-bar {
    gap: 6px !important;
    padding: 0 6px !important;
  }
  .top-inline-resources-list {
    gap: 6px !important;
  }
  .inline-res-item {
    gap: 3px !important;
    font-size: 0.68rem !important;
  }
  .inline-res-item .res-icon-img {
    width: 15px !important;
    height: 15px !important;
  }
  .res-buff-indicator.top-bar-buff {
    font-size: 0.48rem !important;
    padding: 0 3px !important;
  }
}

/* Item 1: Mobile Village Picker Floating Buttons - STRICTLY for Mobile Phones (<= 768px) */
.mobile-village-picker-btn {
  display: none !important;
  position: absolute !important;
  width: auto !important;
  max-width: max-content !important;
  height: auto !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}
  html.mobile-portrait-mode .mobile-village-picker-btn {
    display: flex !important;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, rgba(42, 30, 20, 0.95), rgba(18, 12, 8, 0.98));
    border: 1.5px solid var(--dirilis-gold-accent);
    color: #fbbf24;
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 0.74rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.75);
    z-index: 92;
    transition: transform 0.15s ease, border-color 0.15s ease;
    width: auto !important;
    max-width: max-content !important;
    height: auto !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }
  html.mobile-portrait-mode .mobile-village-picker-btn:active {
    transform: scale(0.96);
  }
  html.mobile-portrait-mode #mobileMapVillagePickerBtn {
    position: absolute !important;
    right: 14px !important;
    left: auto !important;
    top: auto !important;
    bottom: 46px !important; /* Positioned directly above HUD coords bar */
    width: auto !important;
    max-width: max-content !important;
    height: auto !important;
  }
  html.mobile-portrait-mode #mobileVillageViewPickerBtn {
    position: absolute !important;
    right: 14px !important;
    left: auto !important;
    top: auto !important;
    bottom: 144px !important; /* Positioned cleanly above bottom troop bar */
    width: auto !important;
    max-width: max-content !important;
    height: auto !important;
    transition: bottom 0.24s cubic-bezier(0.16, 1, 0.3, 1), transform 0.15s ease, border-color 0.15s ease !important;
  }
  html.mobile-portrait-mode #mobileVillageViewPickerBtn.troop-bar-collapsed,
  html.mobile-portrait-mode #mobileVillageViewPickerBtn:has(+ .bottom-troop-bar-dock.collapsed),
  html.mobile-portrait-mode #villageViewOverlay:has(.bottom-troop-bar-dock.collapsed) #mobileVillageViewPickerBtn,
  html.mobile-portrait-mode .village-view-container:has(.bottom-troop-bar-dock.collapsed) #mobileVillageViewPickerBtn,
  html.mobile-portrait-mode .village-view-overlay:has(.bottom-troop-bar-dock.collapsed) #mobileVillageViewPickerBtn {
    bottom: 10px !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  /* In Village View, STRICTLY hide map village picker */
  html.mobile-portrait-mode .center-game-area.in-village #mobileMapVillagePickerBtn {
    display: none !important;
  }
  /* In Map View, STRICTLY hide village view picker */
  html.mobile-portrait-mode .center-game-area:not(.in-village) #mobileVillageViewPickerBtn {
    display: none !important;
  }
.village-lighting-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
}

/* Item 14: Clan Modal Tab Styling & Typography */
.clan-tab-btn {
  font-size: 0.72rem !important;
  padding: 5px 12px !important;
  background: rgba(30, 41, 59, 0.5) !important;
  border: 1px solid rgba(229, 184, 92, 0.25) !important;
  color: #cbd5e1 !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}
.clan-tab-btn:hover {
  background: rgba(51, 65, 85, 0.7) !important;
  color: #ffffff !important;
  border-color: rgba(229, 184, 92, 0.5) !important;
}
.clan-tab-btn.active {
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.25), rgba(180, 83, 9, 0.2)) !important;
  border: 1.5px solid var(--dirilis-gold-accent) !important;
  color: #fbbf24 !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 10px rgba(234, 179, 8, 0.25) !important;
}

/* Items 15 & 16: Dropdown text on dark background (Fix white-on-white text) */
select, select.input-field, .input-field select, #adminModal select, #renameVillageModal select, #combatSimulatorModal select {
  background-color: #1a130e !important;
  color: #f8fafc !important;
  border: 1px solid rgba(229, 184, 92, 0.4) !important;
}
select option, .input-field option, #adminModal select option, #renameVillageModal select option, #combatSimulatorModal select option {
  background-color: #1a130e !important;
  color: #f8fafc !important;
  padding: 6px 10px;
}
select:focus, .input-field select:focus, #adminModal select:focus, #renameVillageModal select:focus {
  outline: none !important;
  border-color: #fbbf24 !important;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.4) !important;
}

/* Item 14: Chat Mentions Styling */
.chat-mention {
  color: #38bdf8 !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  cursor: pointer !important;
  padding: 1px 5px !important;
  background: rgba(56, 189, 248, 0.15) !important;
  border-radius: 4px !important;
  transition: all 0.2s ease !important;
  display: inline-block;
}
.chat-mention:hover {
  background: rgba(56, 189, 248, 0.35) !important;
  color: #7dd3fc !important;
  transform: scale(1.02);
}
.chat-mention.chat-mention-me {
  color: #fbbf24 !important;
  background: rgba(251, 191, 36, 0.2) !important;
  border: 1px solid rgba(251, 191, 36, 0.4) !important;
}

/* Clickable Coordinates & Report Share Cards */
.chat-coord-link {
  color: #38bdf8 !important;
  font-weight: 800 !important;
  text-decoration: underline !important;
  cursor: pointer !important;
  padding: 1px 5px !important;
  background: rgba(56, 189, 248, 0.15) !important;
  border-radius: 4px !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: all 0.2s ease !important;
}
.chat-coord-link:hover {
  background: rgba(56, 189, 248, 0.35) !important;
  color: #bae6fd !important;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.5);
  transform: translateY(-1px);
}

.chat-report-preview-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.95));
  border: 1px solid rgba(234, 179, 8, 0.6);
  border-radius: 8px;
  padding: 6px 10px;
  margin: 4px 0;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(254, 240, 138, 0.2);
  transition: all 0.2s ease;
  max-width: 100%;
}
.chat-report-preview-card:hover {
  border-color: #fde047;
  background: linear-gradient(135deg, rgba(51, 65, 85, 0.95), rgba(30, 41, 59, 0.95));
  box-shadow: 0 4px 12px rgba(234, 179, 8, 0.3);
  transform: translateY(-1px);
}
.chat-report-preview-card .report-icon {
  font-size: 16px;
  flex-shrink: 0;
}
.chat-report-preview-card .report-title {
  color: #fef08a;
  font-weight: 700;
  font-size: 12px;
  text-decoration: underline;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-report-preview-card .report-badge-pill {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 9999px;
  border: 1px solid rgba(254, 240, 138, 0.5);
  flex-shrink: 0;
}

/* Farm List Troop Badges & Compact Table Styles */
.farm-troop-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(14, 165, 233, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #7dd3fc;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 600;
  margin: 1px 2px;
  white-space: nowrap;
}
.farm-troop-badge strong {
  color: #f8fafc;
}
.farm-table-btn {
  padding: 3px 6px !important;
  font-size: 0.68rem !important;
  border-radius: 4px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}
.farm-table-btn.raid-btn,
.farm-raid-btn {
  font-weight: 800 !important;
  padding: 5px 9px !important;
  min-height: 26px !important;
  line-height: 1.25 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.farm-target-row td {
  white-space: nowrap !important;
}

/* ==========================================================================
   SEND MOVEMENT / TROOP TRANSFER MODAL (EXPANDED & RESPONSIVE LAYOUT)
   ========================================================================== */
.send-movement-modal-card {
  width: 860px !important;
  max-width: 96vw !important;
  height: auto !important;
  max-height: 90vh !important;
  min-height: unset !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 16px 20px !important;
  border-radius: 16px !important;
  border: 2px solid var(--dirilis-gold-accent) !important;
  background: #120b06 !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.95) !important;
  overflow-y: auto !important;
}

#sendMovementModal .modal-close-btn {
  top: 2px !important;
  transform: none !important;
}
#sendMovementModal .modal-close-btn:hover {
  transform: none !important;
}
#sendMovementModal .modal-info-btn {
  top: 4px !important;
  transform: none !important;
}
#sendMovementModal .modal-info-btn:hover {
  transform: none !important;
}
#sendMovementModal #movementEtaContainer {
  flex-wrap: nowrap !important;
  gap: 4px !important;
  justify-content: center !important;
}
#sendMovementModal #movementEtaContainer > span {
  font-size: 9.5px !important;
  padding: 2px 5px !important;
  white-space: nowrap !important;
  letter-spacing: -0.2px !important;
}
#btnMovementSpeedBoost {
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
}
#btnMovementSpeedBoost span {
  font-size: inherit !important;
  font-weight: inherit !important;
  white-space: nowrap !important;
  display: inline-block !important;
}

.send-movement-main-layout {
  display: flex !important;
  flex-direction: row !important;
  gap: 14px !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  margin-bottom: 12px !important;
}

.send-movement-source-panel {
  width: 310px !important;
  min-width: 260px !important;
  flex-shrink: 0 !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--dirilis-panel-border) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

.send-movement-villages-scroll {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding-right: 4px !important;
  min-height: 0 !important;
  -webkit-overflow-scrolling: touch !important;
}

.send-movement-content-panel {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

.send-movement-troops-grid {
  flex: unset !important;
  min-height: 0 !important;
  max-height: 280px !important;
  overflow-y: auto !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(96px, 108px)) !important;
  gap: 8px !important;
  align-items: start !important;
  align-content: start !important;
  justify-content: start !important;
  padding-right: 4px !important;
  -webkit-overflow-scrolling: touch !important;
}

.movement-village-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  font-size: 0.82rem !important;
  color: #fff !important;
  cursor: pointer !important;
  font-weight: 700 !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  transition: all 0.15s ease !important;
}

.movement-village-item:hover {
  background: rgba(229, 184, 92, 0.12) !important;
  border-color: rgba(229, 184, 92, 0.45) !important;
}

.movement-village-item.is-selected {
  background: rgba(229, 184, 92, 0.2) !important;
  border-color: var(--dirilis-gold-accent) !important;
  box-shadow: 0 0 10px rgba(229, 184, 92, 0.15) !important;
}

/* ==============================================================================
   ADMIN PANEL RESPONSIVE HORIZONTAL SWIPEABLE TABS & MOBILE LAYOUT
   ============================================================================== */
.admin-tabs-nav {
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin-bottom: 12px !important;
  border-bottom: 1px solid var(--dirilis-panel-border) !important;
  padding-bottom: 10px !important;
  overflow-x: visible !important;
}

.admin-tabs-nav::-webkit-scrollbar {
  height: 4px;
}
.admin-tabs-nav::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}
.admin-tabs-nav::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #a855f7, var(--dirilis-gold-accent));
  border-radius: 4px;
}

.admin-tabs-nav .btn {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  font-size: 0.72rem !important;
  padding: 6px 6px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 1150px) {
  #adminModal .modal-dark-card {
    width: 98vw !important;
    max-width: 98vw !important;
    padding: 12px 14px !important;
  }
}

@media (max-width: 768px) {
  #adminModal .modal-dark-card {
    width: 99vw !important;
    max-width: 99vw !important;
    height: 97vh !important;
    max-height: 97vh !important;
    padding: 8px 8px !important;
    border-radius: 12px !important;
  }
  
  #adminModal .admin-tabs-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 6px !important;
    gap: 4px !important;
  }

  #adminModal .admin-tabs-nav button,
  #adminModal .admin-tabs-nav .btn {
    flex-shrink: 0 !important;
    font-size: 10px !important;
    padding: 4px 7px !important;
  }

  #adminServerRoofSelectorBar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    padding: 6px 8px !important;
  }

  #adminServerRoofSelectorBar > div {
    width: 100% !important;
    justify-content: space-between !important;
  }

  #adminActiveServerSelect {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 10px !important;
  }
  
  #adminSectionServerConfig > div,
  #adminModal div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  
  #adminModal table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ==============================================================================
   SLEEK RESPONSIVE ASKER GÖNDER & TRANSFER MODAL (DROPDOWN BASED)
   ============================================================================== */
.send-movement-unified-layout {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: unset;
  min-height: 0;
}

.send-movement-village-selector-row {
  transition: all 0.2s ease;
}

.send-movement-villages-select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  padding-right: 32px !important;
}

.send-movement-troops-box {
  flex: unset;
  min-height: 0;
}

.send-movement-troop-card {
  align-self: start !important;
  height: auto !important;
  width: 100% !important;
  max-width: 108px !important;
  box-sizing: border-box !important;
}

/* Tablet & Mobile Responsiveness for Movement Modal */
@media (max-width: 860px) {
  .send-movement-modal-card {
    width: 96vw !important;
    max-width: 96vw !important;
    height: auto !important;
    max-height: 94vh !important;
    min-height: 0 !important;
    padding: 12px !important;
    border-radius: 14px !important;
    overflow-y: auto !important;
  }

  .send-movement-village-selector-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 8px 10px !important;
  }

  .send-movement-village-selector-row > div {
    min-width: 0 !important;
  }

  .send-movement-mission-radios {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }

  .send-movement-mission-radios label {
    min-width: 0 !important;
    font-size: 0.72rem !important;
    padding: 5px 6px !important;
  }

  .send-movement-troops-grid {
    grid-template-columns: repeat(auto-fill, minmax(92px, 104px)) !important;
    gap: 6px !important;
    align-items: start !important;
    align-content: start !important;
    justify-content: center !important;
  }

  .send-movement-footer-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .send-movement-footer-actions {
    display: flex !important;
    width: 100% !important;
    gap: 6px !important;
    align-items: center !important;
  }

  .send-movement-footer-actions button {
    flex: 1 1 auto !important;
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 7px 8px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
    min-width: 0 !important;
  }

  .send-movement-footer-actions button:first-child {
    flex: 0 0 auto !important;
    padding: 7px 12px !important;
  }
}

@media (max-width: 480px) {
  #sendMovementModal .modal-dark-card > div:first-child {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  #sendMovementModal #movementEtaContainer {
    gap: 3px !important;
    margin-top: 5px !important;
  }

  #sendMovementModal #movementEtaContainer > span {
    font-size: 8.5px !important;
    padding: 1.5px 4px !important;
  }

  .send-movement-footer-actions button {
    padding: 6px 5px !important;
    font-size: 9.5px !important;
  }

  .send-movement-footer-actions button:first-child {
    padding: 6px 9px !important;
  }

  .send-movement-troops-grid {
    grid-template-columns: repeat(auto-fill, minmax(88px, 100px)) !important;
    gap: 6px !important;
    align-items: start !important;
    align-content: start !important;
    justify-content: center !important;
  }

  .send-movement-mission-box {
    padding: 8px 10px !important;
  }

  .send-movement-troops-box {
    padding: 8px 10px !important;
  }
}

/* Mobile New Village Placement Reticle & Controls */
@keyframes pulseReticle {
  0% {
    transform: scale(0.92);
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.4);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 20px rgba(74, 222, 128, 0.8);
  }
  100% {
    transform: scale(0.92);
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.4);
  }
}

.center-game-area.in-village #foundVillageCenterCrosshair,
.center-game-area.in-village #foundVillageMobileBottomBar {
  display: none !important;
}

/* Floating Troop Hover Card & Tooltip */
#troopHoverTooltip {
  box-sizing: border-box !important;
  width: 330px !important;
  min-width: 280px !important;
  max-width: min(94vw, 360px) !important;
  overflow: visible !important;
  pointer-events: none !important;
  background: linear-gradient(145deg, rgba(34, 46, 66, 0.65), rgba(18, 26, 40, 0.58)) !important;
  backdrop-filter: blur(14px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(125%) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.45);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
#troopHoverTooltip .troop-mini-modal,
#troopHoverTooltip .troop-hover-card-inner {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.troop-hover-stat-pill {
  background: rgba(18, 26, 40, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 6px !important;
  padding: 4px 7px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  font-size: 11px !important;
}
.troop-hover-stat-pill span,
.troop-hover-stat-pill strong,
#troopHoverTooltip .troop-hover-stat-pill,
#troopHoverTooltip .troop-hover-stat-pill span,
#troopHoverTooltip .troop-hover-stat-pill strong {
  font-size: 11px !important;
}
.troop-hover-stat-pill strong {
  color: #f1f5f9 !important;
  font-weight: 800 !important;
  font-family: monospace !important;
}
#troopHoverTooltip,
#troopHoverTooltip * {
  font-size: 11px;
}
#troopHoverTooltip h4,
#troopHoverTooltip .troop-hover-title,
#troopHoverTooltip .troop-hover-cost-item,
#troopHoverTooltip .troop-hover-cost-item span,
#troopHoverTooltip .troop-hover-desc {
  font-size: 11px !important;
}
@media (max-width: 480px) {
  #troopHoverTooltip {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    min-width: 270px !important;
    padding: 9px !important;
    border-radius: 12px !important;
  }
  #troopHoverTooltip .troop-hover-portrait {
    width: 84px !important;
    min-width: 84px !important;
  }
  #troopHoverTooltip .troop-hover-name {
    font-size: 12px !important;
  }
  #troopHoverTooltip .troop-hover-stat-pill {
    padding: 3px 5px !important;
  }
  #troopHoverTooltip .troop-hover-cost-well {
    gap: 8px !important;
    padding: 5px 8px !important;
    font-size: 0.72rem !important;
  }
}

/* Quests & Milestones Modal Tab Buttons */
.quests-tab-bar {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 6px !important;
  padding: 6px 10px !important;
  background: rgba(10, 12, 16, 0.45) !important;
  border: none !important;
  border-bottom: 1.5px solid rgba(212, 175, 55, 0.3) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  height: auto !important;
  max-height: none !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

.quests-tab-btn,
#questsTabBtnDaily,
#questsTabBtnWeekly,
#questsTabBtnMilestones {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 36px !important;
  border-radius: 6px !important;
  padding: 6px 8px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 3px 4px !important;
  cursor: pointer !important;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
  outline: none !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  transform: none !important;
}

.quests-tab-btn:not(.active),
#questsTabBtnDaily:not(.active),
#questsTabBtnWeekly:not(.active),
#questsTabBtnMilestones:not(.active) {
  background: rgba(18, 26, 40, 0.65) !important;
  color: #94a3b8 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  opacity: 0.85 !important;
  transform: none !important;
}

.quests-tab-btn:not(.active):hover,
#questsTabBtnDaily:not(.active):hover,
#questsTabBtnWeekly:not(.active):hover,
#questsTabBtnMilestones:not(.active):hover {
  background: rgba(30, 44, 68, 0.85) !important;
  color: #ffffff !important;
  border-color: rgba(212, 175, 55, 0.4) !important;
  opacity: 1 !important;
}

.quests-tab-btn.active,
#questsTabBtnDaily.active,
#questsTabBtnWeekly.active,
#questsTabBtnMilestones.active {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 50%, #b45309 100%) !important;
  color: #ffffff !important;
  border: 1.5px solid #fef08a !important;
  font-weight: 900 !important;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  opacity: 1 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
  transform: none !important;
}

html.mobile-portrait-mode #questsAndMilestonesModal .modal-header,
html.mobile-landscape-mode #questsAndMilestonesModal .modal-header {
  padding: 8px 42px !important;
}
html.mobile-portrait-mode #questsAndMilestonesModal .modal-header h3,
html.mobile-landscape-mode #questsAndMilestonesModal .modal-header h3 {
  font-size: 12.5px !important;
}
html.mobile-portrait-mode #questsAndMilestonesModal .modal-header-subtitle,
html.mobile-landscape-mode #questsAndMilestonesModal .modal-header-subtitle {
  font-size: 10px !important;
  line-height: 1.25 !important;
}
html.mobile-portrait-mode .quests-tab-bar,
html.mobile-landscape-mode .quests-tab-bar {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  padding: 5px 6px !important;
  gap: 5px !important;
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  height: auto !important;
  max-height: none !important;
  border: none !important;
  border-bottom: 1.5px solid rgba(212, 175, 55, 0.3) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
html.mobile-portrait-mode .quests-tab-btn,
html.mobile-portrait-mode #questsTabBtnDaily,
html.mobile-portrait-mode #questsTabBtnWeekly,
html.mobile-portrait-mode #questsTabBtnMilestones,
html.mobile-landscape-mode .quests-tab-btn,
html.mobile-landscape-mode #questsTabBtnDaily,
html.mobile-landscape-mode #questsTabBtnWeekly,
html.mobile-landscape-mode #questsTabBtnMilestones {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 34px !important;
  padding: 4px 4px !important;
  font-size: 10px !important;
  line-height: 1.18 !important;
  border-radius: 6px !important;
  gap: 2px 3px !important;
  letter-spacing: -0.1px !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow: visible !important;
  text-overflow: clip !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  transform: none !important;
}
html.mobile-portrait-mode .quests-tab-btn span:not(.event-badge),
html.mobile-portrait-mode #questsTabBtnDaily span:not(.event-badge),
html.mobile-portrait-mode #questsTabBtnWeekly span:not(.event-badge),
html.mobile-portrait-mode #questsTabBtnMilestones span:not(.event-badge),
html.mobile-landscape-mode .quests-tab-btn span:not(.event-badge),
html.mobile-landscape-mode #questsTabBtnDaily span:not(.event-badge),
html.mobile-landscape-mode #questsTabBtnWeekly span:not(.event-badge),
html.mobile-landscape-mode #questsTabBtnMilestones span:not(.event-badge) {
  font-size: 10px !important;
  line-height: 1.18 !important;
  white-space: normal !important;
}
html.mobile-portrait-mode .quests-tab-btn .event-badge,
html.mobile-portrait-mode #questsTabBtnDaily .event-badge,
html.mobile-portrait-mode #questsTabBtnWeekly .event-badge,
html.mobile-portrait-mode #questsTabBtnMilestones .event-badge,
html.mobile-landscape-mode .quests-tab-btn .event-badge,
html.mobile-landscape-mode #questsTabBtnDaily .event-badge,
html.mobile-landscape-mode #questsTabBtnWeekly .event-badge,
html.mobile-landscape-mode #questsTabBtnMilestones .event-badge {
  font-size: 9px !important;
  padding: 1px 4px !important;
  border-radius: 8px !important;
}

@media (max-width: 768px) {
  .quests-tab-btn,
  #questsTabBtnDaily,
  #questsTabBtnWeekly,
  #questsTabBtnMilestones,
  .quests-tab-btn span:not(.event-badge),
  #questsTabBtnDaily span:not(.event-badge),
  #questsTabBtnWeekly span:not(.event-badge),
  #questsTabBtnMilestones span:not(.event-badge) {
    font-size: 10px !important;
    line-height: 1.18 !important;
    white-space: normal !important;
  }
}

html.mobile-portrait-mode .building-card-title,
html.mobile-portrait-mode .building-card-name-pill,
html.mobile-portrait-mode .building-card-node.row-back .building-card-name-pill,
html.mobile-portrait-mode .building-card-node.row-front .building-card-name-pill,
html.mobile-portrait-mode .building-card-node[data-slot-id] .building-card-name-pill {
  font-size: clamp(3.6px, 1.08vw, 4.8px) !important;
  padding: 0px 2.5px !important;
  border-radius: 3px !important;
  border-width: 0.8px !important;
  line-height: 1.15 !important;
}

html.mobile-portrait-mode .building-card-lvl-inline,
html.mobile-portrait-mode .building-card-lvl-pill,
html.mobile-portrait-mode .building-card-node.row-back .building-card-lvl-pill,
html.mobile-portrait-mode .building-card-node.row-front .building-card-lvl-pill,
html.mobile-portrait-mode .building-card-node[data-slot-id] .building-card-lvl-pill {
  font-size: clamp(3.3px, 0.96vw, 4.5px) !important;
  padding: 0px 2px !important;
  margin-left: -2px !important;
  border-radius: 3px !important;
  border-width: 0.8px !important;
  line-height: 1.15 !important;
}

html.mobile-landscape-mode .building-card-title,
html.mobile-landscape-mode .building-card-name-pill,
html.mobile-landscape-mode .building-card-node.row-back .building-card-name-pill,
html.mobile-landscape-mode .building-card-node.row-front .building-card-name-pill,
html.mobile-landscape-mode .building-card-node[data-slot-id] .building-card-name-pill {
  font-size: clamp(4.5px, 0.49cqw, 6.3px) !important;
  padding: 0.5px 3.5px !important;
  border-radius: 3.5px !important;
  border-width: 0.8px !important;
  line-height: 1.15 !important;
}

html.mobile-landscape-mode .building-card-lvl-inline,
html.mobile-landscape-mode .building-card-lvl-pill,
html.mobile-landscape-mode .building-card-node.row-back .building-card-lvl-pill,
html.mobile-landscape-mode .building-card-node.row-front .building-card-lvl-pill,
html.mobile-landscape-mode .building-card-node[data-slot-id] .building-card-lvl-pill {
  font-size: clamp(4.2px, 0.47cqw, 6px) !important;
  padding: 0.5px 2.5px !important;
  margin-left: -3px !important;
  border-radius: 3.5px !important;
  border-width: 0.8px !important;
  line-height: 1.15 !important;
}

/* ==========================================================================
   EMPIRE PRODUCTION MATRIX MODAL (MULTI-CITY HOURLY PRODUCTION OVERVIEW)
   ========================================================================== */
.res-prod-card {
  width: 960px;
  max-width: 98vw;
  padding: 14px 18px;
  border-radius: 16px;
  border: 1.5px solid var(--dirilis-gold-accent, #eab308);
  background: #120b06;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.95);
  max-height: 94vh;
  display: flex;
  flex-direction: column;
}

.res-prod-table-container {
  background: rgba(18, 14, 10, 0.98);
  border: 1px solid var(--dirilis-panel-border, rgba(234, 179, 8, 0.3));
  border-radius: 8px;
  padding: 0;
  overflow: auto;
  max-height: min(72vh, 520px);
  -webkit-overflow-scrolling: touch;
  position: relative;
}

.res-prod-table {
  width: 100%;
  min-width: 740px;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
  font-size: 11px;
  line-height: 1.25;
  font-family: inherit;
}

/* Sticky Header Row */
.res-prod-table thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #1a120b;
  border-bottom: 1.5px solid rgba(234, 179, 8, 0.4);
  padding: 5px 6px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--dirilis-gold-accent, #eab308);
}

/* Sticky First Column Header (Top-Left Cell) */
.res-prod-table thead th.res-prod-th-city {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 30; /* Highest priority: above sticky header and sticky body columns */
  background: #20160d;
  border-right: 1.5px solid rgba(234, 179, 8, 0.35);
  min-width: 140px;
  max-width: 180px;
  width: 160px;
  font-weight: 800;
  padding-left: 8px;
}

.res-prod-th-res {
  text-align: right;
}

.res-prod-th-content {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
}

.res-prod-th-content .res-icon-img {
  width: 14px;
  height: 14px;
}

/* Table Body Rows */
.res-prod-table tbody tr {
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.12s ease;
}

.res-prod-table tbody td {
  padding: 4px 6px;
  font-size: 11px;
  line-height: 1.25;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Sticky First Column Body Cell (Village Name) */
.res-prod-table tbody td.res-prod-col-city {
  position: sticky;
  left: 0;
  z-index: 6;
  background: #140d07;
  border-right: 1.5px solid rgba(234, 179, 8, 0.25);
  min-width: 140px;
  max-width: 180px;
  width: 160px;
  white-space: nowrap;
  padding-left: 8px;
}

.res-prod-table tbody tr:hover td.res-prod-col-city {
  background: #25180d !important;
}

.res-prod-table tbody tr.res-prod-current-row td.res-prod-col-city {
  background: #2b1d0e !important;
  border-left: 3px solid var(--dirilis-gold-accent, #eab308);
}

.res-prod-city-wrap {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.res-prod-city-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 105px;
  font-size: 11px;
}

.res-prod-active-badge {
  color: #4ade80;
  font-size: 9.5px;
  font-weight: 700;
  flex-shrink: 0;
}

/* Sticky Total Footer Row */
.res-prod-table tfoot tr {
  position: sticky;
  bottom: 0;
  z-index: 12;
  background: linear-gradient(90deg, #221609, #170f07);
  border-top: 1.5px solid var(--dirilis-gold-accent, #eab308);
  border-bottom: 1.5px solid var(--dirilis-gold-accent, #eab308);
  font-weight: 800;
}

.res-prod-table tfoot td {
  padding: 5px 6px;
  font-size: 11px;
  border-top: 1.5px solid var(--dirilis-gold-accent, #eab308);
  border-bottom: 1.5px solid var(--dirilis-gold-accent, #eab308);
  background: #191007;
}

.res-prod-table tfoot td.res-prod-total-city {
  position: sticky;
  left: 0;
  bottom: 0;
  z-index: 25;
  background: #23160a;
  border-right: 1.5px solid rgba(234, 179, 8, 0.4);
  color: var(--dirilis-gold-accent, #eab308);
  padding-left: 8px;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  #resourceProductionModal .res-prod-card {
    padding: 8px 10px;
    width: 98vw;
  }
  .res-prod-table-container {
    max-height: min(70vh, 460px);
  }
  .res-prod-table thead th.res-prod-th-city,
  .res-prod-table tbody td.res-prod-col-city,
  .res-prod-table tfoot td.res-prod-total-city {
    min-width: 120px;
    max-width: 140px;
    width: 130px;
  }
  .res-prod-city-title {
    max-width: 80px;
  }
}

/* Responsive vertical modal auto-hug (eliminating empty space) */
#clanModal .modal-dark-card {
  height: auto !important;
  max-height: 88vh !important;
  min-height: 0 !important;
}

/* Portrait class-based & attribute-based enforcement for Battle & Clan Reports (list-only until clicked) */
html.mobile-portrait-mode #battleReportsModal .battle-reports-layout-grid,
html.mobile-portrait-mode #clanReportsLayoutGrid.battle-reports-layout-grid,
html[data-device-orientation="portrait"] #battleReportsModal .battle-reports-layout-grid,
html[data-device-orientation="portrait"] #clanReportsLayoutGrid.battle-reports-layout-grid,
html.is-portrait:not(.is-landscape) #battleReportsModal .battle-reports-layout-grid,
html.is-portrait:not(.is-landscape) #clanReportsLayoutGrid.battle-reports-layout-grid {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0% !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
html.mobile-portrait-mode #battleReportsModal .battle-reports-layout-grid:not(.mobile-show-detail) .reports-list-side-panel,
html.mobile-portrait-mode #clanReportsLayoutGrid.battle-reports-layout-grid:not(.mobile-show-detail) .reports-list-side-panel,
html[data-device-orientation="portrait"] #battleReportsModal .battle-reports-layout-grid:not(.mobile-show-detail) .reports-list-side-panel,
html[data-device-orientation="portrait"] #clanReportsLayoutGrid.battle-reports-layout-grid:not(.mobile-show-detail) .reports-list-side-panel,
html.is-portrait:not(.is-landscape) #battleReportsModal .battle-reports-layout-grid:not(.mobile-show-detail) .reports-list-side-panel,
html.is-portrait:not(.is-landscape) #clanReportsLayoutGrid.battle-reports-layout-grid:not(.mobile-show-detail) .reports-list-side-panel {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0% !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
html.mobile-portrait-mode #battleReportsModal .battle-reports-layout-grid:not(.mobile-show-detail) .report-detail-panel,
html.mobile-portrait-mode #clanReportsLayoutGrid.battle-reports-layout-grid:not(.mobile-show-detail) .report-detail-panel,
html[data-device-orientation="portrait"] #battleReportsModal .battle-reports-layout-grid:not(.mobile-show-detail) .report-detail-panel,
html[data-device-orientation="portrait"] #clanReportsLayoutGrid.battle-reports-layout-grid:not(.mobile-show-detail) .report-detail-panel,
html.is-portrait:not(.is-landscape) #battleReportsModal .battle-reports-layout-grid:not(.mobile-show-detail) .report-detail-panel,
html.is-portrait:not(.is-landscape) #clanReportsLayoutGrid.battle-reports-layout-grid:not(.mobile-show-detail) .report-detail-panel {
  display: none !important;
}
html.mobile-portrait-mode #battleReportsModal .battle-reports-layout-grid.mobile-show-detail .reports-list-side-panel,
html.mobile-portrait-mode #clanReportsLayoutGrid.battle-reports-layout-grid.mobile-show-detail .reports-list-side-panel,
html[data-device-orientation="portrait"] #battleReportsModal .battle-reports-layout-grid.mobile-show-detail .reports-list-side-panel,
html[data-device-orientation="portrait"] #clanReportsLayoutGrid.battle-reports-layout-grid.mobile-show-detail .reports-list-side-panel,
html.is-portrait:not(.is-landscape) #battleReportsModal .battle-reports-layout-grid.mobile-show-detail .reports-list-side-panel,
html.is-portrait:not(.is-landscape) #clanReportsLayoutGrid.battle-reports-layout-grid.mobile-show-detail .reports-list-side-panel {
  display: none !important;
}
html.mobile-portrait-mode #battleReportsModal .battle-reports-layout-grid.mobile-show-detail .report-detail-panel,
html.mobile-portrait-mode #clanReportsLayoutGrid.battle-reports-layout-grid.mobile-show-detail .report-detail-panel,
html[data-device-orientation="portrait"] #battleReportsModal .battle-reports-layout-grid.mobile-show-detail .report-detail-panel,
html[data-device-orientation="portrait"] #clanReportsLayoutGrid.battle-reports-layout-grid.mobile-show-detail .report-detail-panel,
html.is-portrait:not(.is-landscape) #battleReportsModal .battle-reports-layout-grid.mobile-show-detail .report-detail-panel,
html.is-portrait:not(.is-landscape) #clanReportsLayoutGrid.battle-reports-layout-grid.mobile-show-detail .report-detail-panel {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0% !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
html.mobile-portrait-mode #battleReportsModal .battle-reports-layout-grid.mobile-show-detail .reports-mobile-back-btn,
html.mobile-portrait-mode #clanReportsLayoutGrid.battle-reports-layout-grid.mobile-show-detail .reports-mobile-back-btn,
html[data-device-orientation="portrait"] #battleReportsModal .battle-reports-layout-grid.mobile-show-detail .reports-mobile-back-btn,
html[data-device-orientation="portrait"] #clanReportsLayoutGrid.battle-reports-layout-grid.mobile-show-detail .reports-mobile-back-btn,
html.is-portrait:not(.is-landscape) #battleReportsModal .battle-reports-layout-grid.mobile-show-detail .reports-mobile-back-btn,
html.is-portrait:not(.is-landscape) #clanReportsLayoutGrid.battle-reports-layout-grid.mobile-show-detail .reports-mobile-back-btn {
  display: inline-block !important;
}

/* Desktop & Landscape Split View (Always Side-by-Side for Battle & Clan Reports) */
html:not(.mobile-portrait-mode):not([data-device-orientation="portrait"]):not(.is-portrait) #battleReportsModal .battle-reports-layout-grid,
html:not(.mobile-portrait-mode):not([data-device-orientation="portrait"]):not(.is-portrait) #battleReportsModal .battle-reports-layout-grid.mobile-show-detail,
html:not(.mobile-portrait-mode):not([data-device-orientation="portrait"]):not(.is-portrait) #clanReportsLayoutGrid.battle-reports-layout-grid,
html:not(.mobile-portrait-mode):not([data-device-orientation="portrait"]):not(.is-portrait) #clanReportsLayoutGrid.battle-reports-layout-grid.mobile-show-detail {
  display: grid !important;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  flex: 1 1 0% !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
html:not(.mobile-portrait-mode):not([data-device-orientation="portrait"]):not(.is-portrait) #battleReportsModal .battle-reports-layout-grid .reports-list-side-panel,
html:not(.mobile-portrait-mode):not([data-device-orientation="portrait"]):not(.is-portrait) #battleReportsModal .battle-reports-layout-grid.mobile-show-detail .reports-list-side-panel,
html:not(.mobile-portrait-mode):not([data-device-orientation="portrait"]):not(.is-portrait) #clanReportsLayoutGrid.battle-reports-layout-grid .reports-list-side-panel,
html:not(.mobile-portrait-mode):not([data-device-orientation="portrait"]):not(.is-portrait) #clanReportsLayoutGrid.battle-reports-layout-grid.mobile-show-detail .reports-list-side-panel,
html:not(.mobile-portrait-mode):not([data-device-orientation="portrait"]):not(.is-portrait) #battleReportsModal .battle-reports-layout-grid .report-detail-panel,
html:not(.mobile-portrait-mode):not([data-device-orientation="portrait"]):not(.is-portrait) #battleReportsModal .battle-reports-layout-grid.mobile-show-detail .report-detail-panel,
html:not(.mobile-portrait-mode):not([data-device-orientation="portrait"]):not(.is-portrait) #clanReportsLayoutGrid.battle-reports-layout-grid .report-detail-panel,
html:not(.mobile-portrait-mode):not([data-device-orientation="portrait"]):not(.is-portrait) #clanReportsLayoutGrid.battle-reports-layout-grid.mobile-show-detail .report-detail-panel {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
html:not(.mobile-portrait-mode):not([data-device-orientation="portrait"]):not(.is-portrait) #battleReportsModal .battle-reports-layout-grid .reports-mobile-back-btn,
html:not(.mobile-portrait-mode):not([data-device-orientation="portrait"]):not(.is-portrait) #battleReportsModal .battle-reports-layout-grid.mobile-show-detail .reports-mobile-back-btn,
html:not(.mobile-portrait-mode):not([data-device-orientation="portrait"]):not(.is-portrait) #clanReportsLayoutGrid.battle-reports-layout-grid .reports-mobile-back-btn,
html:not(.mobile-portrait-mode):not([data-device-orientation="portrait"]):not(.is-portrait) #clanReportsLayoutGrid.battle-reports-layout-grid.mobile-show-detail .reports-mobile-back-btn {
  display: none !important;
}

/* Mobile & Tablet Landscape Split View Optimization for Battle & Clan Reports (Always Side-by-Side & Scrollable) */
html.mobile-landscape-mode #battleReportsModal {
  padding: 0 !important;
}
html.mobile-landscape-mode #battleReportsModal .modal-dark-card {
  width: var(--logical-vw, 100vw) !important;
  max-width: var(--logical-vw, 100vw) !important;
  height: var(--logical-vh, 100vh) !important;
  height: var(--logical-vh, 100dvh) !important;
  max-height: var(--logical-vh, 100dvh) !important;
  min-height: var(--logical-vh, 100dvh) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
html.mobile-landscape-mode #battleReportsModal .battle-reports-layout-grid,
html.mobile-landscape-mode #battleReportsModal .battle-reports-layout-grid:not(.mobile-show-detail),
html.mobile-landscape-mode #battleReportsModal .battle-reports-layout-grid.mobile-show-detail,
html.mobile-landscape-mode #clanReportsLayoutGrid.battle-reports-layout-grid,
html.mobile-landscape-mode #clanReportsLayoutGrid.battle-reports-layout-grid:not(.mobile-show-detail),
html.mobile-landscape-mode #clanReportsLayoutGrid.battle-reports-layout-grid.mobile-show-detail {
  display: grid !important;
  grid-template-columns: minmax(210px, 31%) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 8px !important;
  flex: 1 1 0% !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
html.mobile-landscape-mode #battleReportsModal .battle-reports-layout-grid .reports-list-side-panel,
html.mobile-landscape-mode #battleReportsModal .battle-reports-layout-grid:not(.mobile-show-detail) .reports-list-side-panel,
html.mobile-landscape-mode #battleReportsModal .battle-reports-layout-grid.mobile-show-detail .reports-list-side-panel,
html.mobile-landscape-mode #clanReportsLayoutGrid.battle-reports-layout-grid .reports-list-side-panel,
html.mobile-landscape-mode #clanReportsLayoutGrid.battle-reports-layout-grid:not(.mobile-show-detail) .reports-list-side-panel,
html.mobile-landscape-mode #clanReportsLayoutGrid.battle-reports-layout-grid.mobile-show-detail .reports-list-side-panel {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 5px 6px !important;
}
html.mobile-landscape-mode #battleReportsModal .battle-reports-layout-grid .report-detail-panel,
html.mobile-landscape-mode #battleReportsModal .battle-reports-layout-grid:not(.mobile-show-detail) .report-detail-panel,
html.mobile-landscape-mode #battleReportsModal .battle-reports-layout-grid.mobile-show-detail .report-detail-panel,
html.mobile-landscape-mode #clanReportsLayoutGrid.battle-reports-layout-grid .report-detail-panel,
html.mobile-landscape-mode #clanReportsLayoutGrid.battle-reports-layout-grid:not(.mobile-show-detail) .report-detail-panel,
html.mobile-landscape-mode #clanReportsLayoutGrid.battle-reports-layout-grid.mobile-show-detail .report-detail-panel {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
html.mobile-landscape-mode #battleReportsModal .report-detail-scroll-area,
html.mobile-landscape-mode #clanReportsLayoutGrid .report-detail-scroll-area {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  overscroll-behavior-y: contain !important;
  padding: 6px 10px !important;
}
html.mobile-landscape-mode #battleReportsModal .report-detail-pinned-footer,
html.mobile-landscape-mode #clanReportsLayoutGrid .report-detail-pinned-footer {
  padding: 5px 10px !important;
  flex-shrink: 0 !important;
}
html.mobile-landscape-mode #battleReportsModal .battle-reports-layout-grid .reports-mobile-back-btn,
html.mobile-landscape-mode #battleReportsModal .battle-reports-layout-grid:not(.mobile-show-detail) .reports-mobile-back-btn,
html.mobile-landscape-mode #battleReportsModal .battle-reports-layout-grid.mobile-show-detail .reports-mobile-back-btn,
html.mobile-landscape-mode #clanReportsLayoutGrid.battle-reports-layout-grid .reports-mobile-back-btn,
html.mobile-landscape-mode #clanReportsLayoutGrid.battle-reports-layout-grid:not(.mobile-show-detail) .reports-mobile-back-btn,
html.mobile-landscape-mode #clanReportsLayoutGrid.battle-reports-layout-grid.mobile-show-detail .reports-mobile-back-btn {
  display: none !important;
}
html.mobile-landscape-mode #battleReportsModal #reportsListSidePanel table {
  font-size: 10px !important;
}
html.mobile-landscape-mode #battleReportsModal #reportsListSidePanel th,
html.mobile-landscape-mode #battleReportsModal #reportsListSidePanel td {
  padding: 4px 2px !important;
}

/* ==========================================================================
   FLOATING MAP RESOURCE NODE HOVER TOOLTIP
   ========================================================================== */
#mapHoverTooltip,
.map-hover-tooltip {
  position: fixed !important;
  z-index: 999999 !important;
  pointer-events: none !important;
  background: linear-gradient(145deg, rgba(20, 28, 42, 0.94), rgba(12, 18, 28, 0.96)) !important;
  backdrop-filter: blur(14px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(125%) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.7) !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
  font-family: inherit !important;
  font-size: 0.82rem !important;
  max-width: 280px !important;
  box-sizing: border-box !important;
  transition: opacity 0.1s ease !important;
}

/* Guard: Map hover tooltip MUST be completely hidden when in village view or when any modal/module is active */
body.in-village #mapHoverTooltip,
body.in-village .map-hover-tooltip,
body.has-modal #mapHoverTooltip,
body.has-modal .map-hover-tooltip,
#centerGameArea.in-village ~ #mapHoverTooltip,
.village-view-active #mapHoverTooltip,
body:has(.modal-backdrop:not([style*="display: none"]):not([style*="display:none"])) #mapHoverTooltip,
body:has(.modal-overlay:not([style*="display: none"]):not([style*="display:none"])) #mapHoverTooltip,
body:has(#villageRadialActionMenu:not([style*="display: none"]):not([style*="display:none"])) #mapHoverTooltip,
body:has(#upgradeModal:not([style*="display: none"]):not([style*="display:none"])) #mapHoverTooltip,
body:has(#gameConfirmModal:not([style*="display: none"]):not([style*="display:none"])) #mapHoverTooltip,
body:has(#battleReportsModal:not([style*="display: none"]):not([style*="display:none"])) #mapHoverTooltip,
body:has(#questsAndMilestonesModal:not([style*="display: none"]):not([style*="display:none"])) #mapHoverTooltip,
body:has(#gameWikiModal:not([style*="display: none"]):not([style*="display:none"])) #mapHoverTooltip,
body:has(div[id$="Modal"]:not([style*="display: none"]):not([style*="display:none"])) #mapHoverTooltip {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ==========================================================================
   GAME WIKI & ENCYCLOPEDIA (OYUN REHBERİ)
   ========================================================================== */
#gameWikiModal {
  z-index: 10000000 !important;
}

#gameWikiModal .modal-dark-card {
  background: radial-gradient(circle at 50% 10%, rgba(26, 36, 52, 0.96) 0%, rgba(12, 16, 24, 0.98) 100%) !important;
  backdrop-filter: blur(16px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(130%) !important;
  border: 1.5px solid rgba(234, 179, 8, 0.5) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

.wiki-tab-bar {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 6px;
}

.wiki-tab-bar::-webkit-scrollbar {
  height: 4px;
}
.wiki-tab-bar::-webkit-scrollbar-thumb {
  background: rgba(234, 179, 8, 0.3);
  border-radius: 4px;
}

.wiki-tab-btn {
  padding: 8px 14px !important;
  background: rgba(15, 23, 42, 0.75) !important;
  border: 1px solid rgba(234, 179, 8, 0.22) !important;
  color: #94a3b8 !important;
  border-radius: 8px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.wiki-tab-btn:hover {
  background: rgba(30, 41, 59, 0.95) !important;
  color: #f8fafc !important;
  border-color: rgba(234, 179, 8, 0.5) !important;
}

.wiki-tab-btn.active {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  color: #ffffff !important;
  border: 1.5px solid #fde047 !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 12px rgba(217, 119, 6, 0.45) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

.wiki-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.wiki-card {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(234, 179, 8, 0.18);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.wiki-card:hover {
  border-color: rgba(234, 179, 8, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.wiki-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 8px;
}

.wiki-card-icon {
  font-size: 1.6rem;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(234, 179, 8, 0.12);
  border: 1px solid rgba(234, 179, 8, 0.25);
  border-radius: 8px;
  flex-shrink: 0;
}

.wiki-card-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #fde047;
  margin: 0;
}

.wiki-card-subtitle {
  font-size: 0.72rem;
  color: #94a3b8;
}

.wiki-card-body {
  font-size: 0.80rem;
  line-height: 1.45;
  color: #cbd5e1;
}

.wiki-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(234, 179, 8, 0.15);
  border: 1px solid rgba(234, 179, 8, 0.3);
  color: #fef08a;
}

.wiki-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  padding: 3px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
}

.wiki-stat-label {
  color: #94a3b8;
}

.wiki-stat-val {
  color: #f8fafc;
  font-weight: 700;
}

/* ==============================================================================
   GOLDEN IMPERIAL SINGLE-BAR GAME LOADER OVERLAY
   ============================================================================== */
.imperial-loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #9ca3af;
  background-image: url('/assets/ui/loading_bg_landscape.webp?v=2');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
  overflow: hidden;
  transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (orientation: portrait) {
  .imperial-loader-overlay {
    background-image: url('/assets/ui/loading_bg_portrait.webp?v=2');
  }
}

.imperial-sleek-loader {
  position: absolute;
  top: 60.5%;
  left: 50%;
  transform: translateX(-50%);
  width: min(540px, 76vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 2;
  animation: loaderSleekFadeIn 0.4s ease-out;
}

@media (orientation: portrait) {
  .imperial-sleek-loader {
    top: 59%;
    width: min(320px, 80vw);
  }
}

@keyframes loaderSleekFadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.loader-bar-channel {
  width: 100%;
  height: 6px;
  background: rgba(24, 16, 8, 0.46);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(234, 179, 8, 0.52);
  border-radius: 9999px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.75),
              0 2px 14px rgba(0, 0, 0, 0.35),
              0 0 16px rgba(245, 158, 11, 0.22);
}

.loader-bar-fill {
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(90deg, #b45309 0%, #d97706 32%, #f59e0b 68%, #fef08a 100%);
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.85);
  transition: width 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.loader-bar-shimmer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.5) 50%, transparent 100%);
  animation: loaderBarShimmerSweep 1.8s infinite linear;
  transform: translateX(-100%);
}

@keyframes loaderBarShimmerSweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.loader-bar-flare {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 10px 3px rgba(254, 240, 138, 0.95);
}

.loader-centered-content {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  text-align: center;
}

.loader-centered-main-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  max-width: 100%;
  flex-wrap: nowrap;
}

.loader-status-text {
  font-family: 'Cinzel', 'Montserrat', serif;
  font-size: 0.84rem;
  font-weight: 700;
  color: #fef3c7;
  letter-spacing: 0.4px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95),
               0 2px 8px rgba(0, 0, 0, 0.85),
               0 0 14px rgba(180, 83, 9, 0.55);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
}

.loader-status-dot {
  color: #fbbf24;
  font-weight: 900;
  font-size: 0.9rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

.loader-percent-badge {
  font-family: 'Cinzel', monospace;
  font-size: 0.86rem;
  font-weight: 900;
  color: #fde047;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95),
               0 0 10px rgba(250, 204, 21, 0.75);
  flex-shrink: 0;
}

.loader-detail-text {
  display: none !important;
}

@media (max-width: 480px) {
  .loader-status-text {
    font-size: 0.76rem;
  }
  .loader-percent-badge {
    font-size: 0.78rem;
  }
  .loader-detail-text {
    font-size: 0.68rem;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .imperial-sleek-loader {
    top: 62%;
    width: min(460px, 72vw);
  }
  .loader-centered-content {
    margin-top: 7px;
    gap: 2px;
  }
  .loader-status-text {
    font-size: 0.76rem;
  }
  .loader-detail-text {
    font-size: 0.68rem;
  }
}

/* ==========================================================================
   SECURITY LAYERS & UNDER-REVIEW BANNER ANIMATIONS
   ========================================================================== */
@keyframes pulseReviewBanner {
  0% {
    box-shadow: 0 8px 30px rgba(220, 38, 38, 0.6), 0 0 20px rgba(0,0,0,0.8);
    border-color: rgba(254, 202, 202, 0.4);
  }
  50% {
    box-shadow: 0 10px 40px rgba(239, 68, 68, 0.9), 0 0 30px rgba(220, 38, 38, 0.5);
    border-color: rgba(254, 202, 202, 0.85);
  }
  100% {
    box-shadow: 0 8px 30px rgba(220, 38, 38, 0.6), 0 0 20px rgba(0,0,0,0.8);
    border-color: rgba(254, 202, 202, 0.4);
  }
}

/* ==========================================================================
   VILLAGE TP BAR & 10-VILLAGE MILESTONE MODAL
   ========================================================================== */
.mobile-village-tp-badge {
  display: none;
}

.village-tp-modal-card {
  width: 95vw;
  max-width: 480px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.97), rgba(8, 12, 22, 0.98));
  border: 1.5px solid rgba(212, 175, 55, 0.6);
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.85), 0 0 24px rgba(212, 175, 55, 0.15);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
  max-height: 92vh;
  overflow-y: auto;
  scrollbar-width: thin;
}

.village-tp-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
  padding-bottom: 6px;
}

.village-tp-summary-banner {
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 8px;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tp-banner-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.tp-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.tp-stat-label {
  font-size: 0.60rem;
  color: #94a3b8;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.tp-stat-val {
  font-size: 0.78rem;
  font-weight: 800;
  color: #ffffff;
}

.tp-stat-val.tp-gold {
  color: #fbbf24;
}

.tp-stat-val.tp-amber {
  color: #f59e0b;
}

.tp-stat-val.tp-ready {
  color: #22c55e;
}

.tp-stat-val.tp-green {
  color: #10b981;
}

.tp-banner-progress-wrap {
  width: 100%;
  height: 4px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  overflow: hidden;
  border: 0.5px solid rgba(255, 255, 255, 0.1);
}

.tp-banner-progress-bar {
  height: 100%;
  transition: width 0.3s ease;
}

/* 2-Column Responsive Matrix Grid (Villages 1-5 Left, 6-10 Right for zero mobile scroll) */
.village-tp-matrix-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.tp-matrix-card {
  background: rgba(20, 28, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 38px;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

/* 1. Kurulmuş köyler: Soluklaştırılmış */
.tp-card-founded {
  opacity: 0.42;
  filter: grayscale(35%);
  background: rgba(15, 23, 42, 0.4);
  border-color: rgba(34, 197, 94, 0.25);
}

/* 2. Sonraki köy: Öne çıkarılmış, altın vurgu */
.tp-card-next {
  opacity: 1 !important;
  border: 1.5px solid #f59e0b !important;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(45, 28, 12, 0.9)) !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.35);
}

/* 3. Kilitli köyler */
.tp-card-locked {
  opacity: 0.75;
  background: rgba(15, 23, 42, 0.65);
}

.tp-card-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tp-card-title {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.70rem;
  font-weight: 700;
  color: #f1f5f9;
}

.tp-card-next .tp-card-title {
  color: #fbbf24;
  font-weight: 800;
}

.tp-card-bottom-row {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.tp-badge {
  font-size: 0.58rem;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 4px;
  white-space: nowrap;
}

.tp-badge-founded {
  background: rgba(34, 197, 94, 0.2);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.4);
}

.tp-badge-next {
  background: rgba(245, 158, 11, 0.25);
  color: #fde047;
  border: 1px solid rgba(245, 158, 11, 0.6);
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.3);
}

.tp-badge-ready {
  background: rgba(34, 197, 94, 0.3);
  color: #4ade80;
  border: 1px solid #22c55e;
  animation: pulseReady 1.5s infinite;
}

.tp-badge-locked {
  background: rgba(255, 255, 255, 0.06);
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.tp-card-req-val {
  font-size: 0.60rem;
  color: #94a3b8;
  font-weight: 600;
}

.tp-card-req-val.tp-amber-text {
  color: #fcd34d;
}

.tp-card-ready-glow {
  font-size: 0.60rem;
  color: #86efac;
  font-weight: 700;
}

.tp-card-locked-text {
  font-size: 0.58rem;
  color: #64748b;
}

.tp-card-mini-bar {
  width: 100%;
  height: 2.5px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 1px;
}

.tp-card-mini-fill {
  height: 100%;
  background: linear-gradient(90deg, #eab308, #22c55e);
}

.village-tp-footer-tip {
  font-size: 0.58rem;
  color: #94a3b8;
  text-align: center;
  padding-top: 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  line-height: 1.2;
}

@keyframes pulseReady {
  0% { transform: scale(1); box-shadow: 0 0 4px rgba(34, 197, 94, 0.4); }
  50% { transform: scale(1.03); box-shadow: 0 0 10px rgba(34, 197, 94, 0.8); }
  100% { transform: scale(1); box-shadow: 0 0 4px rgba(34, 197, 94, 0.4); }
}

/* ==========================================================================
   PRO KİLİT HESAPLAYICI (PRO LOCK CALCULATOR)
   ========================================================================== */
.lock-calc-card input[type="number"]:focus,
.lock-calc-card input[type="text"]:focus,
.lock-calc-card select:focus {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.35) !important;
}

@keyframes lockLiveDotPulse {
  0% { transform: scale(1); opacity: 0.8; box-shadow: 0 0 4px #4ade80; }
  50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 12px #4ade80; }
  100% { transform: scale(1); opacity: 0.8; box-shadow: 0 0 4px #4ade80; }
}

#simTabContentLock select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  padding-right: 30px !important;
}

/* ==========================================================================
   MODAL INFO BUTTON & INTERACTIVE INFO DRAWER (REHBER & İPUCU ÇEKMECESİ)
   ========================================================================== */
.modal-info-btn {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 1.5px solid #facc15 !important;
  color: #facc15 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  padding: 0 !important;
  line-height: 1 !important;
  box-shadow: 0 0 10px rgba(250, 204, 21, 0.65), inset 0 0 5px rgba(250, 204, 21, 0.25) !important;
  z-index: 25 !important;
  flex-shrink: 0 !important;
}

.modal-info-btn:hover {
  background: rgba(250, 204, 21, 0.15) !important;
  border-color: #fde047 !important;
  color: #ffffff !important;
  transform: translateY(-50%) !important;
  box-shadow: 0 0 16px rgba(250, 204, 21, 0.95), inset 0 0 8px rgba(250, 204, 21, 0.4) !important;
}

.modal-info-btn.is-active,
.modal-info-btn.is-open {
  background: rgba(250, 204, 21, 0.25) !important;
  border-color: #fde047 !important;
  color: #ffffff !important;
  box-shadow: 0 0 20px rgba(250, 204, 21, 1), inset 0 0 10px rgba(250, 204, 21, 0.5) !important;
  transform: translateY(-50%) !important;
}

.modal-info-drawer {
  position: absolute !important;
  top: 54px !important;
  left: 14px !important;
  max-width: 520px !important;
  width: calc(100% - 28px) !important;
  max-height: calc(100% - 68px) !important;
  overflow-y: auto !important;
  background: linear-gradient(135deg, rgba(13, 19, 33, 0.98), rgba(20, 26, 40, 0.98)) !important;
  border: 1.5px solid #eab308 !important;
  border-left: 4px solid #facc15 !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.9), 0 0 25px rgba(234, 179, 8, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  animation: modalInfoSlideDown 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 999999 !important;
  flex-shrink: 0 !important;
}

@keyframes modalInfoSlideDown {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-info-drawer-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-bottom: 1px solid rgba(234, 179, 8, 0.2) !important;
  padding-bottom: 8px !important;
  margin-bottom: 10px !important;
}

.modal-info-drawer-title {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #fde047 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  letter-spacing: 0.3px !important;
}

.modal-info-drawer-badge {
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 2px 7px !important;
  border-radius: 9999px !important;
  background: rgba(234, 179, 8, 0.15) !important;
  color: #fef08a !important;
  border: 1px solid rgba(234, 179, 8, 0.4) !important;
}

.modal-info-drawer-close {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  transform: none !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 35%, #521818 0%, #220808 100%) !important;
  border: 1.5px solid #d4af37 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7), inset 0 1px 1px rgba(255, 230, 160, 0.5) !important;
  color: #ffe6a3 !important;
  font-size: 0.75rem !important;
  font-weight: 900 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  line-height: 1 !important;
  z-index: 30 !important;
  transition: all 0.15s ease !important;
}

.modal-info-drawer-close:hover {
  background: radial-gradient(circle at 35% 35%, #7f1d1d 0%, #3a0d0d 100%) !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.85) !important;
  transform: scale(1.1) !important;
}

.modal-info-drawer-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.modal-info-drawer-item {
  font-size: 11.5px !important;
  line-height: 1.45 !important;
  color: #cbd5e1 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

.modal-info-drawer-item strong {
  color: #fde047 !important;
}

.modal-info-drawer-item .info-item-icon {
  font-size: 13px !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
}

.send-movement-troop-card {
  align-self: start !important;
  height: auto !important;
  width: 100% !important;
  max-width: 108px !important;
  box-sizing: border-box !important;
}

/* Tablet & Mobile Responsiveness for Movement Modal */
@media (max-width: 860px) {
  .send-movement-modal-card {
    width: 96vw !important;
    max-width: 96vw !important;
    height: auto !important;
    max-height: 94vh !important;
    min-height: 0 !important;
    padding: 12px !important;
    border-radius: 14px !important;
    overflow-y: auto !important;
  }

  .send-movement-village-selector-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 8px 10px !important;
  }

  .send-movement-village-selector-row > div {
    min-width: 0 !important;
  }

  .send-movement-mission-radios {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }

  .send-movement-mission-radios label {
    min-width: 0 !important;
    font-size: 0.72rem !important;
    padding: 5px 6px !important;
  }

  .send-movement-troops-grid {
    grid-template-columns: repeat(auto-fill, minmax(92px, 104px)) !important;
    gap: 6px !important;
    align-items: start !important;
    align-content: start !important;
    justify-content: center !important;
  }

  .send-movement-footer-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .send-movement-footer-actions {
    display: flex !important;
    width: 100% !important;
    gap: 6px !important;
    align-items: center !important;
  }

  .send-movement-footer-actions button {
    flex: 1 1 auto !important;
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 7px 8px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
    min-width: 0 !important;
  }

  .send-movement-footer-actions button:first-child {
    flex: 0 0 auto !important;
    padding: 7px 12px !important;
  }
}

@media (max-width: 480px) {
  .send-movement-troops-grid {
    grid-template-columns: repeat(auto-fill, minmax(88px, 100px)) !important;
    gap: 6px !important;
    align-items: start !important;
    align-content: start !important;
    justify-content: center !important;
  }

  .send-movement-mission-box {
    padding: 8px 10px !important;
  }

  .send-movement-troops-box {
    padding: 8px 10px !important;
  }
}

/* Mobile New Village Placement Reticle & Controls */
@keyframes pulseReticle {
  0% {
    transform: scale(0.92);
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.4);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 20px rgba(74, 222, 128, 0.8);
  }
  100% {
    transform: scale(0.92);
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.4);
  }
}

.center-game-area.in-village #foundVillageCenterCrosshair,
.center-game-area.in-village #foundVillageMobileBottomBar {
  display: none !important;
}

/* ==========================================================================
   SEND MOVEMENT MODAL: HIGH-PRIORITY HEADER BUTTON PINNING (TOP CARTOUCHE ROW)
   ========================================================================== */
#sendMovementModal .modal-close-btn {
  top: 6px !important;
  right: 12px !important;
  left: auto !important;
  transform: none !important;
  z-index: 30 !important;
}

#sendMovementModal .modal-close-btn:hover {
  transform: none !important;
}

#sendMovementModal .modal-info-btn {
  top: 8px !important;
  left: 12px !important;
  right: auto !important;
  transform: none !important;
  z-index: 30 !important;
}

#sendMovementModal .modal-info-btn:hover {
  transform: none !important;
}

@media (max-width: 768px) {
  #sendMovementModal .modal-close-btn {
    top: 5px !important;
    right: 8px !important;
    transform: none !important;
  }

  #sendMovementModal .modal-info-btn {
    top: 7px !important;
    left: 8px !important;
    transform: none !important;
  }
}

/* ==========================================================================
   FARM LIST TABLE BUTTONS: ZERO TRANSFORM SHIFT FOR RAPID SEQUENTIAL CLICKS
   ========================================================================== */
html body #farmListModal .farm-table-btn,
html body #farmListModal .farm-table-btn:hover,
html body #farmListModal .farm-table-btn:active,
html body #farmListModal .farm-raid-btn,
html body #farmListModal .farm-raid-btn:hover,
html body #farmListModal .farm-raid-btn:active {
  transform: none !important;
  transition: background 0.1s ease, border-color 0.1s ease, opacity 0.1s ease !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}
html body #farmListModal .farm-raid-btn {
  padding: 5px 9px !important;
  min-height: 26px !important;
  line-height: 1.25 !important;
}

/* Single-line Sleek Header Energy Bar inside #farmListModal */
html body #farmListModal .modal-header {
  padding: 8px 46px !important;
}

html body #farmListModal #farmHeaderStaminaRow {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

@media (max-width: 768px) {
  html body #farmListModal .modal-header {
    padding: 6px 36px !important;
  }
  html body #farmListModal .modal-info-btn {
    left: 6px !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
  }
  html body #farmListModal .modal-close-btn {
    right: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
  html body #farmListModal #farmHeaderStaminaRow {
    gap: 5px !important;
    padding: 2px 5px 2px 8px !important;
    margin-top: 4px !important;
  }
  html body #farmListModal #farmStaminaText {
    font-size: 9.5px !important;
  }
  html body #farmListModal #btnBuyStaminaBoost {
    font-size: 9px !important;
    padding: 2px 6px !important;
  }
}

/* Floating Scroll-to-Top Button inside Farm List Modal */
#farmListModal .farm-scroll-top-btn {
  position: absolute;
  right: 22px;
  bottom: 18px;
  z-index: 45;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(30, 41, 59, 0.96));
  border: 1.5px solid rgba(251, 191, 36, 0.65);
  color: #fde68a;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.3px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.65), 0 0 12px rgba(245, 158, 11, 0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(0.95);
  transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

#farmListModal .farm-scroll-top-btn.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

#farmListModal .farm-scroll-top-btn:hover {
  border-color: #fbbf24;
  color: #fffbeb;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.75), 0 0 16px rgba(251, 191, 36, 0.4);
  transform: translateY(-2px) scale(1.02);
}

#farmListModal .farm-scroll-top-btn:active {
  transform: translateY(0) scale(0.97);
}

@media (max-width: 768px) {
  #farmListModal .farm-scroll-top-btn {
    right: 14px;
    bottom: 14px;
    padding: 7px 12px;
    font-size: 11px;
  }
}

/* ==========================================================================
   ADMIN AI ENGINE TOGGLE SWITCHES (.ai-switch-label / .ai-switch-slider)
   ========================================================================== */
.ai-switch-label {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 24px;
  cursor: pointer;
  user-select: none;
}

.ai-switch-label input[type="checkbox"] {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.ai-switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #334155;
  border: 1px solid #475569;
  transition: all 0.22s ease;
  border-radius: 24px;
}

.ai-switch-slider::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  top: 2px;
  background-color: #cbd5e1;
  transition: all 0.22s ease;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.ai-switch-label input[type="checkbox"]:checked + .ai-switch-slider {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  border-color: #4ade80;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.35);
}

.ai-switch-label input[type="checkbox"]:checked + .ai-switch-slider::before {
  transform: translateX(21px);
  background-color: #ffffff;
}

/* ==========================================================================
   INTERACTIVE TUTORIAL (KUTLU YÜKSELİŞ) & SPOTLIGHT STYLES
   ========================================================================== */

@keyframes tutorialNeonGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(254, 240, 138, 0.95), 0 0 20px rgba(234, 179, 8, 0.9), 0 0 35px rgba(250, 204, 21, 0.7);
    outline-color: #fef08a;
  }
  50% {
    box-shadow: 0 0 0 14px rgba(250, 204, 21, 0), 0 0 32px rgba(234, 179, 8, 1), 0 0 50px rgba(245, 158, 11, 0.9);
    outline-color: #facc15;
  }
  100% {
    box-shadow: 0 0 0 0 rgba(254, 240, 138, 0.95), 0 0 20px rgba(234, 179, 8, 0.9), 0 0 35px rgba(250, 204, 21, 0.7);
    outline-color: #fef08a;
  }
}

@keyframes tutorialFloatArrow {
  0%, 100% { transform: translateY(0px) scale(1); }
  50% { transform: translateY(-8px) scale(1.15); }
}

.tutorial-spotlight-active {
  position: relative !important;
  z-index: 999999 !important;
  animation: tutorialNeonGlow 1.4s ease-in-out infinite !important;
  outline: 3px solid #fef08a !important;
  outline-offset: 3px !important;
  border-radius: 10px !important;
  filter: drop-shadow(0 0 10px #facc15) !important;
}

.tutorial-spotlight-active::after {
  content: "👇";
  position: absolute;
  top: -38px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 26px;
  line-height: 1;
  pointer-events: none;
  animation: tutorialFloatArrow 1.2s ease-in-out infinite;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 12px #facc15);
  z-index: 1000000;
}

/* Top Screen Tutorial HUD Banner (Placed right beneath the Top Resource Bar) */
.tutorial-banner-hud {
  position: fixed;
  top: 46px;
  left: calc(50% + (var(--left-sidebar-offset, 110px) - var(--right-sidebar-offset, 235px)) / 2);
  transform: translateX(-50%);
  z-index: 999998;
  background: linear-gradient(135deg, rgba(20, 26, 38, 0.96), rgba(12, 16, 26, 0.98));
  border: 1.5px solid #fbbf24;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.65), 0 0 20px rgba(251, 191, 36, 0.25);
  border-radius: 12px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 320px;
  max-width: min(780px, calc(100vw - var(--left-sidebar-offset, 110px) - var(--right-sidebar-offset, 235px) - 24px));
  backdrop-filter: blur(8px);
  transition: left 0.28s cubic-bezier(0.16, 1, 0.3, 1), max-width 0.28s cubic-bezier(0.16, 1, 0.3, 1), top 0.2s ease;
  box-sizing: border-box;
}

.tutorial-banner-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.tutorial-banner-icon {
  font-size: 20px;
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 8px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tutorial-banner-text-group {
  min-width: 0;
  flex: 1;
}

.tutorial-step-pill {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  padding: 1px 7px;
  border-radius: 6px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.tutorial-step-name {
  color: #f8fafc;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tutorial-step-sub {
  color: #e2e8f0;
  font-size: 11px;
  line-height: 1.3;
  margin-top: 2px;
  word-break: break-word;
}

.tutorial-progress-bar-track {
  width: 90px;
  height: 5px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}

.tutorial-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #10b981);
  transition: width 0.35s ease;
}

.tutorial-reward-badge {
  font-size: 10px;
  font-weight: 800;
  color: #fde047;
  background: rgba(234, 179, 8, 0.12);
  border: 1px solid rgba(234, 179, 8, 0.25);
  padding: 0 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.tutorial-banner-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.tutorial-action-go-btn {
  background: linear-gradient(135deg, #0284c7, #0369a1);
  border: 1px solid #38bdf8;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 10px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35);
  transition: transform 0.15s ease;
}

.tutorial-action-go-btn:hover {
  transform: scale(1.04);
}

.tutorial-nav-step-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.4);
  color: #fbbf24;
  font-size: 11px;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  padding: 0;
  line-height: 1;
}

.tutorial-nav-step-btn:hover:not(:disabled) {
  background: rgba(251, 191, 36, 0.25);
  border-color: #fbbf24;
  color: #fff;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.5);
  transform: scale(1.08);
}

.tutorial-nav-step-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  border-color: rgba(255, 255, 255, 0.15);
  color: #64748b;
  transform: none;
  box-shadow: none;
}

.tutorial-icon-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
  font-size: 11px;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.tutorial-icon-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* Floating Bilge Ata Dialogue Card (Moved up and right of Köyüm button to avoid overlapping) */
.tutorial-bilge-card {
  position: fixed;
  bottom: 85px;
  left: 125px;
  z-index: 999997;
  max-width: 360px;
  background: linear-gradient(135deg, rgba(20, 26, 38, 0.98), rgba(12, 16, 26, 0.98));
  border: 1.5px solid #d97706;
  border-radius: 14px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.65), 0 0 24px rgba(217, 119, 6, 0.2);
  display: flex;
  padding: 12px;
  gap: 12px;
  animation: modalPopIn 0.3s ease-out;
  backdrop-filter: blur(8px);
  transition: left 0.28s ease, bottom 0.28s ease;
}

body.left-sidebar-is-collapsed .tutorial-bilge-card {
  left: 20px !important;
}

/* Mobile & Tablet Responsiveness for Tutorial HUD Banner */
@media (max-width: 768px) {
  .tutorial-banner-hud {
    top: calc(env(safe-area-inset-top, 4px) + 52px) !important;
    left: 8px !important;
    right: 8px !important;
    transform: none !important;
    min-width: auto !important;
    max-width: calc(100vw - 16px) !important;
    padding: 5px 8px !important;
    border-radius: 10px !important;
    gap: 8px !important;
  }

  .tutorial-banner-icon {
    display: none !important;
  }

  .tutorial-step-name {
    font-size: 11px !important;
  }

  .tutorial-step-sub {
    font-size: 10px !important;
    line-height: 1.25 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .tutorial-progress-bar-track {
    width: 60px !important;
  }

  .tutorial-action-go-btn {
    padding: 4px 8px !important;
    font-size: 10px !important;
  }

  .tutorial-bilge-card {
    left: 10px !important;
    right: 10px !important;
    bottom: 74px !important;
    max-width: calc(100vw - 20px) !important;
    padding: 10px !important;
  }
}

.tutorial-bilge-avatar-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tutorial-bilge-avatar-img {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.15) 0%, rgba(18, 12, 8, 0.6) 80%);
  border: 2px solid #fbbf24;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7), 0 0 12px rgba(251, 191, 36, 0.4);
  display: block;
}

.tutorial-bilge-content {
  flex: 1;
}

.tutorial-bilge-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.tutorial-bilge-name {
  color: #fbbf24;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
}

.tutorial-bilge-close {
  background: transparent;
  border: none;
  color: #64748b;
  font-size: 12px;
  cursor: pointer;
  padding: 0 4px;
}

.tutorial-bilge-close:hover {
  color: #fff;
}

.tutorial-bilge-text {
  font-size: 10.5px;
  color: #e2e8f0;
  line-height: 1.45;
}

/* Success Toast */
.tutorial-success-toast {
  position: fixed;
  top: 76px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999999;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.95), rgba(5, 150, 105, 0.95));
  border: 1.5px solid #34d399;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  border-radius: 12px;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  transition: all 0.35s ease;
  animation: modalPopIn 0.25s ease-out;
}

/* ==========================================================================
   ⚙️ OYUN AYARLARI (SETTINGS MODAL) RESPONSIVE TABS & ITEMS
   ========================================================================== */
.settings-nav-tabs-bar {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid rgba(229, 184, 92, 0.25);
  padding-bottom: 10px;
  width: 100%;
}

.settings-nav-tab-btn {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 8px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #94a3b8;
  white-space: nowrap;
  user-select: none;
}

.settings-nav-tab-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  border-color: rgba(229, 184, 92, 0.4);
}

.settings-nav-tab-btn.settings-nav-tab-active {
  background: linear-gradient(135deg, rgba(229, 184, 92, 0.28), rgba(217, 119, 6, 0.22)) !important;
  border-color: var(--dirilis-gold-accent) !important;
  color: #fde047 !important;
  box-shadow: 0 2px 10px rgba(234, 179, 8, 0.25) !important;
}

.settings-item-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 14px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.settings-item-card:hover {
  border-color: rgba(229, 184, 92, 0.25);
  background: rgba(255, 255, 255, 0.045);
}

.settings-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

@media (max-width: 520px) {
  .settings-nav-tabs-bar {
    gap: 4px;
    padding-bottom: 8px;
  }

  .settings-nav-tab-btn {
    font-size: 0.72rem;
    padding: 8px 4px;
    gap: 4px;
  }

  .settings-nav-tab-btn span:last-child {
    font-size: 0.70rem;
  }

  .settings-item-card {
    padding: 10px 12px;
  }

  .settings-item-row {
    flex-wrap: wrap;
    gap: 8px;
  }

  .settings-item-row > div:first-child {
    flex: 1 1 100%;
  }

  .settings-item-row > button,
  .settings-item-row > div:last-child:not(:first-child) {
    margin-left: auto;
  }
}

/* ==========================================================================
   ✉️ ÖZEL MESAJLAR (PRIVATE MESSAGES) STYLES
   ========================================================================== */
.pm-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: background 0.15s ease;
}
.pm-row:hover {
  background: rgba(229, 184, 92, 0.08) !important;
}
.pm-row.pm-unread {
  background: rgba(234, 179, 8, 0.08);
  font-weight: 700;
}
.pm-row.pm-unread td {
  color: #fff !important;
}
.pm-subject-link {
  color: #f8fafc;
  cursor: pointer;
  text-decoration: none;
}
.pm-subject-link:hover {
  color: var(--dirilis-gold-accent);
  text-decoration: underline;
}

/* ==========================================================================
   ⚙️ MOBILE LANDSCAPE SETTINGS MODAL (#settingsModal) SCROLL FIX
   ========================================================================== */
html.mobile-landscape-mode #settingsModal .modal-dark-card,
html[data-device-orientation="landscape"] #settingsModal .modal-dark-card {
  width: min(640px, 92vw) !important;
  max-width: calc(var(--logical-vw, 100vw) * 0.94) !important;
  max-height: calc(var(--logical-vh, 100dvh) * 0.94) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 10px 14px !important;
  gap: 8px !important;
  box-sizing: border-box !important;
}

html.mobile-landscape-mode #settingsModal .modal-dark-card > div:first-child,
html[data-device-orientation="landscape"] #settingsModal .modal-dark-card > div:first-child {
  flex-shrink: 0 !important;
  padding-bottom: 6px !important;
}

html.mobile-landscape-mode #settingsModal .settings-nav-tabs-bar,
html[data-device-orientation="landscape"] #settingsModal .settings-nav-tabs-bar {
  flex-shrink: 0 !important;
  padding-bottom: 6px !important;
  gap: 6px !important;
}

html.mobile-landscape-mode #settingsModal .settings-nav-tab-btn,
html[data-device-orientation="landscape"] #settingsModal .settings-nav-tab-btn {
  padding: 6px 8px !important;
  font-size: 0.76rem !important;
}

html.mobile-landscape-mode #settingsModal #settingsSectionAudio,
html.mobile-landscape-mode #settingsModal #settingsSectionDisplay,
html.mobile-landscape-mode #settingsModal #settingsSectionGame,
html[data-device-orientation="landscape"] #settingsModal #settingsSectionAudio,
html[data-device-orientation="landscape"] #settingsModal #settingsSectionDisplay,
html[data-device-orientation="landscape"] #settingsModal #settingsSectionGame {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: calc(calc(var(--logical-vh, 100dvh) * 0.94) - 135px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  overscroll-behavior: contain !important;
  padding-right: 4px !important;
  padding-bottom: 10px !important;
}

html.mobile-landscape-mode #settingsModal .modal-dark-card > div:last-child,
html[data-device-orientation="landscape"] #settingsModal .modal-dark-card > div:last-child {
  flex-shrink: 0 !important;
  padding-top: 6px !important;
  margin-top: 0 !important;
}

@media (orientation: landscape) and (max-height: 620px) {
  #settingsModal .modal-dark-card {
    max-height: 94dvh !important;
    padding: 10px 14px !important;
    gap: 8px !important;
    overflow: hidden !important;
  }
  #settingsModal #settingsSectionAudio,
  #settingsModal #settingsSectionDisplay,
  #settingsModal #settingsSectionGame {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overscroll-behavior: contain !important;
    padding-right: 4px !important;
  }
}

/* ==========================================================================
   🎬 APK CINEMATIC INTRO VIDEO OVERLAY (Plays intro.mp4 before Login Window)
   ========================================================================== */
.apk-intro-video-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10;
  background: #0c0e12 url('/assets/ui/loading_bg_portrait.webp?v=2') center center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.45s ease-out;
}

html[data-device-orientation="landscape"] .apk-intro-video-overlay,
html[data-device-orientation="desktop-landscape"] .apk-intro-video-overlay {
  background-image: url('/assets/ui/loading_bg_landscape.webp?v=2');
}

.apk-intro-video-overlay.intro-fading-out {
  opacity: 0;
  pointer-events: none;
}

.apk-intro-video-el {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  pointer-events: none;
}

.apk-intro-skip-btn {
  position: absolute;
  top: max(18px, env(safe-area-inset-top, 18px));
  right: max(18px, env(safe-area-inset-right, 18px));
  z-index: 12;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 15px;
  border-radius: 999px;
  background: rgba(15, 18, 24, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(212, 175, 55, 0.65);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.65);
  color: #fef08a;
  font-family: 'Cinzel', serif;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.apk-intro-skip-btn:hover,
.apk-intro-skip-btn:active {
  background: rgba(30, 35, 45, 0.9);
  border-color: #fef08a;
  box-shadow: 0 0 14px rgba(250, 204, 21, 0.45);
  transform: scale(0.98);
}

/* ==========================================================================
   👑 APK NATIVE LOGIN & REALM SELECTOR ("Bulutların Üzerinde Hükümdar Kapısı")
   Matches the exact smoked-glass & antique-gold filigree concept mockups (Ek-2 & Ek-3)
   ========================================================================== */
.apk-imperial-auth-wrapper {
  position: absolute;
  top: 59%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(392px, 88vw);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: apkAuthCardReveal 0.36s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto;
}

@keyframes apkAuthCardReveal {
  from {
    opacity: 0;
    transform: translate(-50%, -46%) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.apk-imperial-glass-card {
  position: relative;
  width: 100%;
  background: linear-gradient(180deg, rgba(36, 40, 48, 0.86) 0%, rgba(22, 25, 32, 0.92) 100%);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  border: 2px solid #c89d47;
  border-radius: 12px;
  padding: 26px 26px 20px 26px;
  box-sizing: border-box;
  box-shadow: 0 26px 64px rgba(0, 0, 0, 0.72),
              0 0 26px rgba(212, 175, 55, 0.22),
              inset 0 0 0 1px rgba(254, 240, 138, 0.22),
              inset 0 2px 22px rgba(0, 0, 0, 0.65);
  color: #f8fafc;
}

/* Inner fine gold filigree frame line (Matches Ek-2 & Ek-3 double-border) */
.apk-imperial-glass-card::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(229, 184, 105, 0.48);
  border-radius: 8px;
  pointer-events: none;
  z-index: 1;
}

/* Subtle diagonal glass sheen + top golden specular highlight */
.apk-imperial-glass-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 11px;
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 38%, transparent 45%);
  pointer-events: none;
  z-index: 1;
}

/* Glowing Corner Diamonds */
.apk-corner-gem {
  position: absolute;
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, #ffffff 0%, #fef08a 50%, #d97706 100%);
  transform: rotate(45deg);
  box-shadow: 0 0 12px 3px rgba(250, 204, 21, 0.95);
  pointer-events: none;
  z-index: 4;
}
.apk-corner-gem.tl { top: 4px; left: 4px; }
.apk-corner-gem.tr { top: 4px; right: 4px; }
.apk-corner-gem.bl { bottom: 4px; left: 4px; }
.apk-corner-gem.br { bottom: 4px; right: 4px; }

/* Ornate SVG Arabesque / Gokturk Gold Filigree Scrollwork in all 4 corners */
.apk-corner-filigree {
  position: absolute;
  width: 44px;
  height: 44px;
  pointer-events: none;
  z-index: 3;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.85));
}
.apk-corner-filigree.tl {
  top: 4px;
  left: 4px;
  transform: none;
}
.apk-corner-filigree.tr {
  top: 4px;
  right: 4px;
  transform: scaleX(-1);
}
.apk-corner-filigree.bl {
  bottom: 4px;
  left: 4px;
  transform: scaleY(-1);
}
.apk-corner-filigree.br {
  bottom: 4px;
  right: 4px;
  transform: scale(-1, -1);
}

/* Glowing Gokturk Runes in Corners (Shown in Landscape Mode matching Ek-3) */
.apk-corner-rune {
  display: none;
  position: absolute;
  font-family: 'Cinzel Decorative', 'Cinzel', serif;
  font-size: 0.75rem;
  font-weight: 900;
  color: #fde047;
  text-shadow: 0 0 8px rgba(250, 204, 21, 0.95), 0 0 14px rgba(245, 158, 11, 0.8);
  pointer-events: none;
  z-index: 4;
}
.apk-corner-rune.tl { top: 10px; left: 12px; }
.apk-corner-rune.tr { top: 10px; right: 12px; }
.apk-corner-rune.bl { bottom: 10px; left: 12px; }
.apk-corner-rune.br { bottom: 10px; right: 12px; }

/* Top Realm Selector Pill Badge (Matches Ek-2 single-line pill) */
.apk-realm-pill-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
  position: relative;
  z-index: 5;
}

.apk-realm-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7px 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(22, 26, 33, 0.94) 0%, rgba(14, 17, 23, 0.98) 100%);
  border: 1.3px solid rgba(212, 175, 55, 0.65);
  color: #f1f5f9;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.65),
              inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: all 0.2s ease;
}

.apk-realm-pill-btn:hover,
.apk-realm-pill-btn:active {
  border-color: #fde047;
  box-shadow: 0 4px 18px rgba(234, 179, 8, 0.35),
              inset 0 1px 0 rgba(254, 240, 138, 0.3);
  transform: translateY(-1px);
}

.apk-realm-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 9px #22c55e;
  flex-shrink: 0;
}

.apk-realm-chevron {
  color: #e5b869;
  font-size: 0.76rem;
  margin-left: 2px;
  transition: transform 0.2s ease;
}

/* Tabs: GİRİŞ YAP | YENİ HÜKÜMDAR */
.apk-auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  margin-bottom: 18px;
  position: relative;
  z-index: 3;
}

.apk-auth-tab {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 8px 6px 11px 6px;
  font-family: 'Cinzel', serif;
  font-size: 0.86rem;
  font-weight: 700;
  color: #9ca3af;
  letter-spacing: 0.6px;
  cursor: pointer;
  position: relative;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.apk-auth-tab .landscape-label {
  display: none;
}

.apk-auth-tab.active {
  color: #fef08a;
  font-weight: 800;
  text-shadow: 0 0 14px rgba(250, 204, 21, 0.7);
}

.apk-auth-tab.active::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -1.5px;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, #f59e0b 18%, #fffbeb 50%, #f59e0b 82%, transparent 100%);
  box-shadow: 0 0 14px 2px rgba(250, 204, 21, 0.95);
  border-radius: 2px;
}

/* Alert Box */
.apk-auth-alert {
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 12px;
  text-align: center;
  position: relative;
  z-index: 3;
}
.apk-auth-alert.error {
  background: rgba(185, 28, 28, 0.32);
  border: 1px solid rgba(248, 113, 113, 0.65);
  color: #fecaca;
}
.apk-auth-alert.success {
  background: rgba(21, 128, 61, 0.32);
  border: 1px solid rgba(74, 222, 128, 0.65);
  color: #bbf7d0;
}

/* Input Fields (Matches Ek-2 & Ek-3 single-box dark glass inputs with gold icon inside) */
.apk-auth-form,
.apk-login-form,
.apk-register-form {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 3;
}

.apk-login-fields-row,
.apk-register-fields-grid {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 13px;
  position: relative;
  z-index: 3;
}

.apk-input-box {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(18, 21, 27, 0.92) !important;
  border: 1.3px solid rgba(205, 164, 78, 0.62) !important;
  border-radius: 8px !important;
  padding: 0 14px !important;
  height: 50px !important;
  box-sizing: border-box !important;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.82),
              0 2px 6px rgba(0, 0, 0, 0.35) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.apk-input-box:focus-within {
  border-color: #fde047 !important;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.82),
              0 0 14px rgba(250, 204, 21, 0.38) !important;
}

.apk-input-icon {
  color: #deb866;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85));
}

/* CRITICAL OVERRIDE: Defeat theme-gokturk.css / theme-glassmorphism.css / theme-parchment.css
   global `html[data-theme] input[type="text"]` !important border & background rules so there is NEVER a double box! */
html #gameMiniLoader #apkAuthContainer input.apk-glass-input,
html[data-theme] #gameMiniLoader #apkAuthContainer input.apk-glass-input,
html[data-theme="gokturk"] #gameMiniLoader #apkAuthContainer input.apk-glass-input,
html[data-theme="glassmorphism"] #gameMiniLoader #apkAuthContainer input.apk-glass-input,
html[data-theme="parchment"] #gameMiniLoader #apkAuthContainer input.apk-glass-input,
html[data-theme="classic"] #gameMiniLoader #apkAuthContainer input.apk-glass-input,
html #gameMiniLoader #apkAuthContainer input.apk-glass-input:focus,
html[data-theme] #gameMiniLoader #apkAuthContainer input.apk-glass-input:focus {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-width: 0 !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  color: #f1f5f9 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.90rem !important;
  font-weight: 500 !important;
  padding: 0 !important;
  margin: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Prevent ugly browser autofill background inside the dark glass input */
html #gameMiniLoader #apkAuthContainer input.apk-glass-input:-webkit-autofill,
html #gameMiniLoader #apkAuthContainer input.apk-glass-input:-webkit-autofill:hover,
html #gameMiniLoader #apkAuthContainer input.apk-glass-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f1f5f9 !important;
  -webkit-box-shadow: 0 0 0px 1000px #12151b inset !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

.apk-glass-input::placeholder {
  color: #9ca3af !important;
  opacity: 0.9 !important;
}

.apk-pass-eye-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 4px;
  margin-left: 6px;
  line-height: 1;
  opacity: 0.72;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.apk-pass-eye-btn:hover {
  opacity: 1;
  color: #fde047;
}

/* Remember Me Checkbox Row */
.apk-remember-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: -2px 0 2px 2px;
  position: relative;
  z-index: 3;
}

.apk-remember-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  color: #cbd5e1;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  transition: color 0.15s ease;
}

.apk-remember-label:hover {
  color: #fef08a;
}

.apk-remember-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.apk-remember-custom-box {
  width: 17px;
  height: 17px;
  border-radius: 4px;
  background: rgba(18, 21, 27, 0.92);
  border: 1.4px solid rgba(205, 164, 78, 0.65);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.75);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: all 0.18s ease;
  flex-shrink: 0;
}

.apk-remember-checkbox:checked + .apk-remember-custom-box {
  background: linear-gradient(180deg, #fef08a 0%, #d4a034 100%);
  border-color: #fef08a;
  color: #1c1305;
  box-shadow: 0 0 8px rgba(250, 204, 21, 0.45);
}

/* Registration Hint */
.apk-reg-hint-banner {
  margin: 12px 0 14px 0;
  padding: 8px 11px;
  border-radius: 8px;
  background: rgba(212, 175, 55, 0.10);
  border: 1px solid rgba(212, 175, 55, 0.32);
  color: #fde68a;
  font-size: 0.72rem;
  line-height: 1.38;
  text-align: left;
  position: relative;
  z-index: 3;
}

/* Embossed Metallic Gold Plaque CTA Button (Matches Ek-2 & Ek-3 Mockup 1:1) */
.apk-gold-cta-btn {
  position: relative;
  margin-top: 6px;
  width: 100%;
  height: 52px;
  border-radius: 8px;
  border: 1.5px solid #fef08a;
  background: radial-gradient(ellipse at 50% 50%, #fef08a 0%, #e5b858 38%, #c58f2b 78%, #9b6a12 100%);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.65),
              0 0 22px rgba(245, 197, 66, 0.35),
              inset 0 1px 1px #ffffff,
              inset 0 -2px 5px rgba(78, 46, 4, 0.85);
  color: #1e1305 !important;
  font-family: 'Cinzel', serif;
  font-size: 0.96rem;
  font-weight: 900;
  letter-spacing: 0.6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
  z-index: 3;
}

/* Engraved inner border frame on the gold button (Matches Ek-2 & Ek-3) */
.apk-gold-cta-btn::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(92, 55, 6, 0.48);
  border-radius: 5px;
  pointer-events: none;
}

.apk-gold-cta-btn:hover,
.apk-gold-cta-btn:active {
  filter: brightness(1.06);
  box-shadow: 0 8px 26px rgba(250, 204, 21, 0.6),
              0 0 28px rgba(254, 240, 138, 0.55),
              inset 0 1px 2px #ffffff;
  transform: translateY(-1px);
}

.apk-gold-cta-btn:disabled {
  opacity: 0.65;
  cursor: wait;
  transform: none;
}

.apk-cta-swords {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1e1305;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.45));
}

/* Footer Links inside Login Card (Matches Ek-2 & Ek-3) */
.apk-auth-footer {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
  position: relative;
  z-index: 3;
}

.apk-auth-footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.apk-forgot-link {
  color: #cbd5e1;
  font-size: 0.78rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}

.apk-forgot-link:hover {
  color: #fef08a;
}

.apk-auth-version-line {
  font-size: 0.72rem;
  color: #9ca3af;
  letter-spacing: 0.3px;
}

/* ==========================================================================
   🌐 VIEW B: REALM SELECTION & STATS DRAWER INSIDE THE APK LOGIN CARD
   Shows Building/Prod/Unit Speeds, Map Size, Player Count, Opening Date &
   Ruler Info (Name, Capital, Points, Rank)
   ========================================================================== */
.apk-realm-selector-view {
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: apkRealmViewFade 0.22s ease-out;
}

@keyframes apkRealmViewFade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.apk-realm-selector-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.28);
  padding-bottom: 8px;
}

.apk-realm-selector-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
}

.apk-realm-selector-title {
  margin: 0;
  font-family: 'Cinzel', serif;
  font-size: 0.82rem;
  font-weight: 800;
  color: #fde047;
  letter-spacing: 0.4px;
}

.apk-realm-selector-sub {
  font-size: 0.66rem;
  color: #94a3b8;
}

.apk-realm-back-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(212, 175, 55, 0.45);
  color: #fde68a;
  font-size: 0.70rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.apk-realm-back-btn:hover {
  background: rgba(212, 175, 55, 0.18);
  border-color: #fde047;
  color: #fff;
}

.apk-realm-cards-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 52vh;
  overflow-y: auto;
  padding-right: 3px;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.apk-realm-item-card {
  background: rgba(11, 15, 22, 0.85);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 11px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  transition: all 0.2s ease;
}

.apk-realm-item-card.is-selected-realm {
  border-color: #d4af37;
  background: linear-gradient(135deg, rgba(28, 24, 14, 0.88), rgba(14, 18, 26, 0.92));
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.25);
}

.apk-realm-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.apk-realm-item-name {
  font-family: 'Cinzel', serif;
  font-size: 0.84rem;
  font-weight: 800;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 6px;
}

.apk-realm-code-tag {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(212, 175, 55, 0.18);
  border: 1px solid rgba(212, 175, 55, 0.45);
  color: #fde047;
}

.apk-realm-status-tag {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
}
.apk-realm-status-tag.online {
  background: rgba(34, 197, 94, 0.18);
  border: 1px solid rgba(34, 197, 94, 0.5);
  color: #86efac;
}
.apk-realm-status-tag.locked {
  background: rgba(234, 179, 8, 0.18);
  border: 1px solid rgba(234, 179, 8, 0.5);
  color: #fde047;
}

/* 6-Item Realm Specs Grid (Building Speed, Prod Speed, Unit Speed, Map Size, Player Count, Opening) */
.apk-realm-specs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 7px 8px;
}

.apk-realm-spec-cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 0.64rem;
  color: #94a3b8;
}

.apk-realm-spec-cell strong {
  color: #f8fafc;
  font-size: 0.70rem;
  font-weight: 800;
}

/* Ruler Info Box (Hükümdar Adı, Başkent, Puan, Sıralama) */
.apk-realm-ruler-box {
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: 8px;
  padding: 7px 9px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
  font-size: 0.68rem;
  color: #e2e8f0;
}

.apk-realm-ruler-box.no-ruler {
  grid-template-columns: 1fr;
  text-align: center;
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  padding: 6px 8px;
}

.apk-realm-select-action-btn {
  width: 100%;
  padding: 7px 12px;
  border-radius: 7px;
  font-family: 'Cinzel', serif;
  font-size: 0.74rem;
  font-weight: 800;
  cursor: pointer;
  border: 1px solid #d4af37;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.25), rgba(180, 83, 9, 0.25));
  color: #fef08a;
  transition: all 0.15s ease;
}

.apk-realm-select-action-btn.active-selected {
  background: linear-gradient(180deg, #f6d365 0%, #d4a034 50%, #9e6f14 100%);
  color: #1c1306;
  border-color: #fef08a;
}

/* ==========================================================================
   🔄 LANDSCAPE LAYOUT FOR APK IMPERIAL LOGIN CARD (Matches Landscape Mockup Ek-3 1:1)
   Uses html[data-device-orientation] instead of @media (orientation: landscape)
   so opening the Android virtual keyboard in portrait mode (which shrinks window.innerHeight
   below window.innerWidth) NEVER flips the login card layout or dismisses the IME!
   ========================================================================== */
html[data-device-orientation="landscape"] .apk-imperial-auth-wrapper,
html[data-device-orientation="desktop-landscape"] .apk-imperial-auth-wrapper {
  top: 67%;
  bottom: auto;
  transform: translate(-50%, -50%);
  width: min(680px, 88vw);
}

html[data-device-orientation="landscape"] .apk-imperial-glass-card,
html[data-device-orientation="desktop-landscape"] .apk-imperial-glass-card {
  padding: 24px 26px 14px 26px;
}

/* Show Glowing Gokturk Runes in Corners in Landscape Mode (Matches Ek-3) */
html[data-device-orientation="landscape"] .apk-corner-rune,
html[data-device-orientation="desktop-landscape"] .apk-corner-rune {
  display: block;
}

html[data-device-orientation="landscape"] .apk-corner-gem,
html[data-device-orientation="desktop-landscape"] .apk-corner-gem {
  display: none;
}

/* Overlapping Top Center Pill Badge in Landscape (Matches Ek-3 Mockup) */
html[data-device-orientation="landscape"] .apk-realm-pill-wrap,
html[data-device-orientation="desktop-landscape"] .apk-realm-pill-wrap {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 0;
}

html[data-device-orientation="landscape"] .apk-realm-pill-btn,
html[data-device-orientation="desktop-landscape"] .apk-realm-pill-btn {
  padding: 5px 20px;
  font-size: 0.78rem;
  background: linear-gradient(180deg, #1e232c 0%, #12161d 100%);
  border: 1.5px solid #d4af37;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

html[data-device-orientation="landscape"] .apk-auth-tabs,
html[data-device-orientation="desktop-landscape"] .apk-auth-tabs {
  max-width: 420px;
  margin: 2px auto 14px auto;
}

html[data-device-orientation="landscape"] .apk-auth-tab,
html[data-device-orientation="desktop-landscape"] .apk-auth-tab {
  padding: 6px 6px 8px 6px;
  font-size: 0.84rem;
}

html[data-device-orientation="landscape"] .apk-auth-tab .portrait-label,
html[data-device-orientation="desktop-landscape"] .apk-auth-tab .portrait-label {
  display: none;
}
html[data-device-orientation="landscape"] .apk-auth-tab .landscape-label,
html[data-device-orientation="desktop-landscape"] .apk-auth-tab .landscape-label {
  display: inline;
}

/* Side-by-side Inputs + Gold CTA Button in Landscape Login (Matches Ek-3 1:1) */
html[data-device-orientation="landscape"] .apk-login-fields-row,
html[data-device-orientation="desktop-landscape"] .apk-login-fields-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px 12px;
  align-items: center;
}

html[data-device-orientation="landscape"] .apk-login-fields-row .apk-remember-row,
html[data-device-orientation="desktop-landscape"] .apk-login-fields-row .apk-remember-row {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: -2px 0 0 2px;
}

html[data-device-orientation="landscape"] .apk-register-fields-grid,
html[data-device-orientation="desktop-landscape"] .apk-register-fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

html[data-device-orientation="landscape"] .apk-input-box,
html[data-device-orientation="desktop-landscape"] .apk-input-box {
  height: 44px !important;
  padding: 0 12px !important;
}

html[data-device-orientation="landscape"] #gameMiniLoader #apkAuthContainer input.apk-glass-input,
html[data-device-orientation="desktop-landscape"] #gameMiniLoader #apkAuthContainer input.apk-glass-input {
  font-size: 0.84rem !important;
}

html[data-device-orientation="landscape"] .apk-login-fields-row .apk-gold-cta-btn,
html[data-device-orientation="desktop-landscape"] .apk-login-fields-row .apk-gold-cta-btn {
  margin-top: 0;
  width: auto;
  min-width: 210px;
  height: 44px;
  padding: 0 18px;
  font-size: 0.84rem;
  white-space: nowrap;
}

html[data-device-orientation="landscape"] .apk-register-form .apk-gold-cta-btn,
html[data-device-orientation="desktop-landscape"] .apk-register-form .apk-gold-cta-btn {
  height: 42px;
  font-size: 0.84rem;
}

html[data-device-orientation="landscape"] .apk-reg-hint-banner,
html[data-device-orientation="desktop-landscape"] .apk-reg-hint-banner {
  margin: 8px 0 10px 0;
  padding: 6px 10px;
  font-size: 0.68rem;
}

html[data-device-orientation="landscape"] .apk-auth-footer,
html[data-device-orientation="desktop-landscape"] .apk-auth-footer {
  margin-top: 12px;
  flex-direction: row;
  justify-content: center;
  gap: 8px;
}

html[data-device-orientation="landscape"] .apk-auth-footer-links::after,
html[data-device-orientation="desktop-landscape"] .apk-auth-footer-links::after {
  content: "•";
  color: #64748b;
  margin-left: 2px;
}

html[data-device-orientation="landscape"] .apk-realm-cards-list,
html[data-device-orientation="desktop-landscape"] .apk-realm-cards-list {
  max-height: 44vh;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
}

@media (max-height: 450px) {
  html[data-device-orientation="landscape"] .apk-imperial-auth-wrapper,
  html[data-device-orientation="desktop-landscape"] .apk-imperial-auth-wrapper {
    top: 68%;
    width: min(650px, 92vw);
  }
  html[data-device-orientation="landscape"] .apk-imperial-glass-card,
  html[data-device-orientation="desktop-landscape"] .apk-imperial-glass-card {
    padding: 18px 18px 10px 18px;
  }
  html[data-device-orientation="landscape"] .apk-auth-tabs,
  html[data-device-orientation="desktop-landscape"] .apk-auth-tabs {
    margin-bottom: 10px;
  }
  html[data-device-orientation="landscape"] .apk-input-box,
  html[data-device-orientation="desktop-landscape"] .apk-input-box,
  html[data-device-orientation="landscape"] .apk-login-fields-row .apk-gold-cta-btn,
  html[data-device-orientation="desktop-landscape"] .apk-login-fields-row .apk-gold-cta-btn,
  html[data-device-orientation="landscape"] .apk-register-form .apk-gold-cta-btn,
  html[data-device-orientation="desktop-landscape"] .apk-register-form .apk-gold-cta-btn {
    height: 38px !important;
  }
  html[data-device-orientation="landscape"] .apk-realm-cards-list,
  html[data-device-orientation="desktop-landscape"] .apk-realm-cards-list {
    max-height: 46vh;
  }
}