:root{
  --night:#0a0e24;
  --night2:#121a3e;
  --panel:#161f47cc;
  --joy:#f4b93f;
  --sad:#5c82d6;
  --anger:#e5533d;
  --tired:#9c8fbe;
  --love:#e85c86;
  --ink:#f3efe6;
  --muted:#8892b8;
  --line:#2a3568;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  background: radial-gradient(ellipse at 50% -10%, #1a2456 0%, var(--night) 55%);
  color:var(--ink);
  font-family:'Inter', sans-serif;
}
.app{min-height:100vh; display:flex; flex-direction:column;}

header{padding:28px 20px 10px; text-align:center;}
.brand-mark{
  font-family:'Inter', sans-serif;
  font-weight:600;
  font-size:12px;
  letter-spacing:3px;
  color:var(--joy);
  margin-bottom:10px;
}
h1{
  font-family:'Fraunces', serif; font-weight:500;
  font-size:clamp(22px, 5vw, 34px); line-height:1.2;
}
header p{color:var(--muted); font-size:14px; margin-top:6px; max-width:480px; margin-left:auto; margin-right:auto; line-height:1.5;}

.map-wrap{
  position:relative; flex:1; min-height:340px;
  margin:10px 12px; border-radius:20px; overflow:hidden;
  border:1px solid var(--line);
}
#map{position:absolute; inset:0; width:100%; height:100%; background:#e8e4da;}

.map-caption{position:absolute; top:12px; left:14px; font-size:12px; color:var(--muted); z-index:600; background:var(--panel); padding:4px 10px; border-radius:20px; backdrop-filter:blur(6px);}
.live-dot{display:inline-block; width:6px; height:6px; border-radius:50%; background:#4ade80; margin-right:6px; animation:blink 1.6s ease-in-out infinite;}
@keyframes blink{0%,100%{opacity:1;} 50%{opacity:0.25;}}

.stats{position:absolute; top:12px; right:14px; background:var(--panel); backdrop-filter:blur(6px); border:1px solid var(--line); border-radius:14px; padding:10px 12px; width:150px; z-index:600; font-size:12px;}
.stats-title{color:var(--muted); font-size:11px; margin-bottom:8px;}
.bar-row{display:flex; align-items:center; gap:6px; margin-bottom:6px;}
.bar-row .em{width:16px; text-align:center; font-size:13px;}
.bar-track{flex:1; height:6px; border-radius:4px; background:#232d5c; overflow:hidden;}
.bar-fill{height:100%; border-radius:4px; transition:width 0.6s ease;}
.bar-pct{width:30px; text-align:right; color:var(--muted); font-size:11px;}

.panel{padding:16px 14px 20px;}
.status-line{text-align:center; font-size:12.5px; color:var(--muted); margin-bottom:12px; min-height:16px;}
.buttons{display:grid; grid-template-columns:repeat(5, 1fr); gap:8px; max-width:520px; margin:0 auto;}
.ebtn{
  background:var(--night2); border:1px solid var(--line); border-radius:14px;
  padding:12px 4px 10px; display:flex; flex-direction:column; align-items:center; gap:5px;
  cursor:pointer; color:var(--ink); font-family:'Inter', sans-serif;
  transition:transform 0.15s ease, border-color 0.2s ease, background 0.2s ease;
}
.ebtn .emoji{font-size:22px;}
.ebtn .label{font-size:10.5px; color:var(--muted);}
.ebtn:active{transform:scale(0.94);}
.ebtn.selected{border-color:currentColor; background:#1b2452;}
.ebtn:disabled{opacity:0.45; cursor:default;}
.ebtn:disabled:active{transform:none;}

.joy{color:var(--joy);} .sad{color:var(--sad);} .anger{color:var(--anger);} .tired{color:var(--tired);} .love{color:var(--love);}

.history-toggle{display:block; margin:4px auto 0; background:none; border:none; color:var(--muted); font-size:12.5px; text-decoration:underline; text-underline-offset:3px; cursor:pointer; padding:8px;}
.history-panel{max-width:560px; margin:0 auto; padding:0 6px; display:none;}
.history-panel.open{display:block;}
.history-title{font-family:'Fraunces', serif; font-size:16px; margin:10px 0 4px;}
.history-sub{color:var(--muted); font-size:12px; margin-bottom:10px;}
.chart{display:flex; align-items:flex-end; gap:3px; height:90px; border-bottom:1px solid var(--line); padding-bottom:2px;}
.chart .col{flex:1; display:flex; flex-direction:column-reverse; min-width:4px; border-radius:2px 2px 0 0; overflow:hidden;}
.chart .seg{width:100%;}
.chart-empty{color:var(--muted); font-size:12.5px; padding:16px 0; text-align:center;}
.chart-dates{display:flex; justify-content:space-between; font-size:10px; color:var(--muted); margin-top:4px;}

footer{text-align:center; color:#54608f; font-size:11px; padding:14px 10px 24px;}
.brand-footer{display:inline-block; margin-top:6px; letter-spacing:2px; font-weight:600; color:#3a4482; font-size:10px;}

.lang-switcher{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:16px;}
.lang-switcher label{margin:0; font-size:11.5px; color:var(--muted);}
.lang-switcher select{width:auto; padding:6px 10px; font-size:12.5px; border-radius:8px; border:1px solid var(--line); background:var(--night2); color:var(--ink);}

/* Leaflet dark tweaks */
.leaflet-control-attribution{background:rgba(10,14,36,0.7) !important; color:var(--muted) !important; font-size:9px !important;}
.leaflet-control-attribution a{color:var(--muted) !important;}
.leaflet-attribution-flag{display:none !important;}
.leaflet-control-zoom a{background:var(--night2) !important; color:var(--ink) !important; border-color:var(--line) !important;}

/* ---------- Мобильная раскладка ---------- */
@media (max-width: 640px){
  header{padding:16px 16px 8px;}
  .brand-mark{margin-bottom:6px; font-size:11px;}
  header p{font-size:13px; margin-top:4px;}

  .map-wrap{
    display:flex;
    flex-direction:column;
    height:auto;
    min-height:auto;
    margin:8px 10px;
  }
  #map{
    position:static;
    width:100%;
    height:58vh;
    min-height:320px;
  }
  /* Панель настроения больше не перекрывает карту — уходит отдельным блоком под ней */
  .stats{
    position:static;
    width:auto;
    margin:0;
    border-radius:0 0 20px 20px;
    border-top:1px solid var(--line);
    backdrop-filter:none;
  }
  .map-caption{
    font-size:11px;
    padding:4px 8px;
  }

  /* Крупнее тап-зоны на мобильном */
  .leaflet-control-zoom a{
    width:38px !important;
    height:38px !important;
    line-height:36px !important;
    font-size:19px !important;
  }
  .ebtn{padding:11px 2px 9px;}
  .ebtn .emoji{font-size:20px;}
  .ebtn .label{font-size:9.5px;}

  .panel{padding:12px 12px 16px;}
}