/* ===== Font Fredoka (zbliżony do Sims 2), bundlowany offline ===== */
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/fredoka-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/fredoka-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074,
    U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --panel-top: #838bcf;
  --panel-bottom: #5f6fbb;
  --track: #202a7d;
  --track-shadow: #171f5e;
  --text: #f2efe0;
  --text-shadow: #2b2f57;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100vh;
  height: 100dvh;
  font-family: "Fredoka", system-ui, sans-serif;
  background:
    radial-gradient(120% 120% at 50% 30%, #6d74a8 0%, #3c3f63 70%, #26283f 100%);
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

.stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 16px;
  width: 100%;
  max-width: 720px;
}

/* ===== Panel ===== */
.panel {
  position: relative;
  width: 100%;
  display: flex;
  gap: 10px;
  padding: 10px 16px 14px 10px;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--panel-top) 0%, var(--panel-bottom) 100%);
  border: 2px solid #2a2e52;
  box-shadow:
    inset 0 0 0 2px rgba(180, 190, 255, 0.35),
    inset 0 2px 6px rgba(210, 220, 255, 0.4),
    inset 0 -10px 24px rgba(20, 24, 60, 0.45),
    0 12px 30px rgba(0, 0, 0, 0.55);
}

/* ===== Sidebar (nieinteraktywny) ===== */
.sidebar {
  flex: 0 0 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-radius: 12px;
  background: linear-gradient(180deg, #5763a6 0%, #454f8c 100%);
  box-shadow: inset 0 0 0 1px rgba(150,165,230,.4), inset 0 -6px 14px rgba(15,20,55,.5);
}

.plumbob-wrap { padding: 4px 0 6px; }
.plumbob {
  width: 20px;
  height: 34px;
  margin: 0 auto;
  background: linear-gradient(180deg, #b6ff7a 0%, #3fd23f 45%, #12922a 100%);
  clip-path: polygon(50% 0, 100% 38%, 50% 100%, 0 38%);
  box-shadow: 0 0 8px rgba(70, 240, 90, .6);
  animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-3px);} }

.sidebar-icons { display: flex; flex-direction: column; gap: 7px; width: 100%; align-items: center; }
.side-icon {
  width: 38px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: linear-gradient(180deg, #6b76b8 0%, #4a5490 100%);
  box-shadow: inset 0 1px 0 rgba(190,200,255,.5), inset 0 -3px 6px rgba(20,25,60,.5);
}
.side-icon svg { width: 18px; height: 18px; fill: #d9def4; }
.side-icon svg .stroke { stroke: #3a4078; stroke-width: 1.6; fill: none; }
.side-icon svg .dark { fill: #3a4078; }

/* ===== Content ===== */
.content { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }

.title {
  margin: 2px 0 10px;
  text-align: center;
  font-size: clamp(16px, 4.4vw, 22px);
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--text);
  text-shadow: 0 1px 1px var(--text-shadow), 0 0 2px rgba(0,0,0,.4);
}

.needs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 22px;
}

/* ===== Pojedyncza potrzeba ===== */
.need { display: flex; flex-direction: column; gap: 3px; }
.need-label {
  text-align: center;
  font-size: clamp(12px, 3.4vw, 16px);
  font-weight: 500;
  color: var(--text);
  text-shadow: 0 1px 1px var(--text-shadow);
}

.bar {
  position: relative;
  height: 15px;
  padding: 2px;
  border-radius: 5px;
  background:
    radial-gradient(125% 180% at 50% 50%, rgba(0,0,0,0) 42%, rgba(0,0,0,.5) 100%),
    linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 14%, rgba(0,0,0,0) 86%, rgba(0,0,0,.45) 100%),
    linear-gradient(180deg, rgba(0,0,0,.32) 0%, rgba(255,255,255,.08) 55%, rgba(255,255,255,.14) 100%),
    var(--track-color, #202a7d);
  box-shadow: inset 0 0 6px rgba(0,0,0,.5), inset 0 0 0 1px rgba(120,135,210,.4);
  cursor: pointer;
  touch-action: none;
  transition: background-color .05s linear;
}

.bar-fill {
  height: 100%;
  width: 50%;
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.12) 45%, rgba(0,0,0,.2) 100%),
    var(--fill-color, #2fce46);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
  transition: background-color .05s linear;
}

/* ===== Przycisk zapisu ===== */
.shot-btn {
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  padding: 10px 20px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(180deg, #6b76b8 0%, #4a5490 100%);
  box-shadow: inset 0 1px 0 rgba(200,210,255,.5), inset 0 -4px 8px rgba(20,25,60,.5), 0 4px 10px rgba(0,0,0,.4);
  cursor: pointer;
}
.shot-btn:active { transform: translateY(1px); }

.share-btn {
  font-size: 13px;
  padding: 8px 16px;
  opacity: .85;
  background: linear-gradient(180deg, #59639c 0%, #3e477a 100%);
}

.credit {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  font-size: 12px;
  font-weight: 400;
  color: #cfd3ea;
  opacity: .8;
  text-align: center;
  text-shadow: 0 1px 1px rgba(0,0,0,.4);
}
.credit strong { font-weight: 600; color: #eef0fb; }

@media (max-width: 380px) {
  .needs { gap: 5px 12px; }
  .sidebar { flex-basis: 44px; }
}