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

:root {
  --font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fs-display: 2rem; --fs-h1: 1.75rem; --fs-h2: 1.375rem; --fs-h3: 1.125rem;
  --fs-body-lg: 1.0625rem; --fs-body: 1rem; --fs-secondary: .9375rem; --fs-caption: .8125rem;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --radius-sm: 10px; --radius-md: 14px; --radius-lg: 22px; --radius-xl: 28px; --radius-pill: 999px;
  --touch-min: 48px; --control-md: 56px; --control-lg: 72px;
  --duration-fast: 120ms; --duration-normal: 220ms;
  --bg: #041020; --bg-elevated: #0A1A31; --surface: #102542; --surface-hover: #173252; --glass: rgba(13, 31, 57, .82);
  --border: #244266; --border-active: #47CBFF;
  --text: #F8FBFF; --text-secondary: #B3C1D6; --text-muted: #7487A4;
  --accent: #2F9BFF; --accent-cyan: #40D9FF; --accent-purple: #7867FF; --accent-pink: #F34BC8;
  --playing: #38D99F; --warning: #FFB85A; --error: #FF6577; --disabled: #52627A;
  --gradient-accent: linear-gradient(135deg, #27C8FF 0%, #676BFF 50%, #F34BC8 100%);
  --shadow-card: 0 18px 46px rgba(0,0,0,.28);
  --glow-active: 0 0 0 1px rgba(64,217,255,.55), 0 0 22px rgba(47,155,255,.28), 0 0 30px rgba(243,75,200,.10);
}

[data-theme="light"] {
  --bg: #F5F8FC; --bg-elevated: #FFFFFF; --surface: #FFFFFF; --surface-hover: #EDF3FA; --glass: rgba(255,255,255,.88);
  --border: #D7E0EC; --border-active: #238EFF;
  --text: #10213A; --text-secondary: #52657E; --text-muted: #8291A5;
  --accent: #167EF5; --accent-cyan: #00ADD8; --accent-purple: #6759E8; --accent-pink: #D936A8;
  --playing: #159D72; --warning: #C97A13; --error: #D74657; --disabled: #A5AFBD;
  --shadow-card: 0 10px 30px rgba(44,65,95,.10);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: var(--font-family); background: var(--bg); color: var(--text); }
button, input, select { font: inherit; } button { min-width: var(--touch-min); min-height: var(--touch-min); }

/* Radio Gizmo: wzmocniony wygląd. Tylko motyw ciemny (w jasnym obowiązują zwykłe zmienne); !important, bo plik jest ładowany przed style.css */
:root:not([data-theme="light"]) body {
  background:
    radial-gradient(circle at 52% -12%, rgba(47,155,255,.22), transparent 35%),
    radial-gradient(circle at 92% 18%, rgba(243,75,200,.10), transparent 25%),
    linear-gradient(180deg,#061225 0%,#041020 55%,#061225 100%) !important;
}
:root:not([data-theme="light"]) .karta { border-color: rgba(91,151,225,.34) !important; box-shadow: 0 18px 48px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.04) !important; }
:root:not([data-theme="light"]) .karta-gra {
  min-height: 286px !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 82% 14%, rgba(243,75,200,.32), transparent 25%),
    radial-gradient(circle at 63% 14%, rgba(54,102,255,.34), transparent 31%),
    linear-gradient(145deg,rgba(13,35,66,.98),rgba(6,20,42,.97)) !important;
}
:root:not([data-theme="light"]) .gra-gora { grid-template-columns: 96px 1fr 48px !important; gap: 16px !important; }
:root:not([data-theme="light"]) .gra-gora .logo-st { width: 96px !important; height: 96px !important; border-radius: 20px !important; box-shadow: 0 15px 30px rgba(0,0,0,.28) !important; }
:root:not([data-theme="light"]) .nazwa { font-size: 30px !important; letter-spacing: -.03em !important; }
:root:not([data-theme="light"]) .znaczek { border: 1px solid rgba(111,173,239,.28) !important; background: rgba(6,18,37,.42) !important; padding: 5px 11px !important; }
:root:not([data-theme="light"]) .karta-gra .przyciski { gap: 28px !important; }
:root:not([data-theme="light"]) .karta-gra .ikona.wielki { width: 78px !important; height: 78px !important; border-color: #62dcff !important; box-shadow: 0 0 0 2px rgba(64,217,255,.13), 0 0 25px rgba(47,155,255,.52), 0 0 34px rgba(243,75,200,.22) !important; }
:root:not([data-theme="light"]) .fala i { background: linear-gradient(to top,#794cff,#ff4fb8,#31cfff) !important; box-shadow: 0 0 8px rgba(64,217,255,.28); }
:root:not([data-theme="light"]) .chip { height: 50px !important; background: linear-gradient(180deg,#112743,#0B1D35) !important; border-color: rgba(99,145,210,.34) !important; }
:root:not([data-theme="light"]) .chip[aria-selected=true] { border-color: #55d8ff !important; box-shadow: 0 0 0 1px rgba(64,217,255,.25),0 0 20px rgba(47,155,255,.30) !important; }
:root:not([data-theme="light"]) .naglowek h2 { font-size: 25px !important; letter-spacing: -.03em; }
:root:not([data-theme="light"]) .rzad { grid-auto-columns: 154px !important; gap: 12px !important; }
:root:not([data-theme="light"]) .kafel .okladka { border-radius: 19px !important; box-shadow: 0 14px 30px rgba(0,0,0,.28) !important; }
:root:not([data-theme="light"]) .kafel .graj { width: 42px !important; height: 42px !important; right: 9px !important; bottom: 9px !important; background: rgba(5,14,29,.80) !important; border: 1px solid rgba(255,255,255,.22) !important; }
:root:not([data-theme="light"]) .odkrywaj { grid-auto-columns: 218px !important; }
:root:not([data-theme="light"]) .odk { min-height: 176px !important; border-radius: 22px !important; box-shadow: 0 14px 30px rgba(0,0,0,.24) !important; }
:root:not([data-theme="light"]) .dol { background: rgba(10,27,51,.91) !important; border-color: rgba(81,127,191,.35) !important; box-shadow: 0 12px 34px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.04) !important; }
:root:not([data-theme="light"]) .mini { background: rgba(9,25,48,.95) !important; border-color: rgba(64,217,255,.38) !important; box-shadow: 0 0 22px rgba(47,155,255,.16),0 16px 34px rgba(0,0,0,.32) !important; }

/* suwak głośności na głównym playerze */
.glosnosc-glowna {
  display: grid;
  grid-template-columns: 48px 1fr 46px;
  align-items: center;
  gap: 12px;
  margin-top: 2px;
  padding: 10px 12px;
  border: 1px solid var(--border, rgba(91,151,225,.26));
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg) 42%, transparent);
  backdrop-filter: blur(12px);
}
.glosnosc-glowna .ikona { width: 48px; height: 48px; border-radius: 15px; }
.glosnosc-glowna input[type="range"] {
  width: 100%;
  height: 28px;
  accent-color: var(--accent-cyan);
  cursor: pointer;
}
.glosnosc-glowna output { color: var(--text-secondary); font-size: 13px; font-weight: 600; text-align: right; min-width: 40px; }

@media (max-width: 430px) {
  :root:not([data-theme="light"]) .karta-gra { min-height: 300px !important; padding: 16px !important; }
  :root:not([data-theme="light"]) .gra-gora { grid-template-columns: 86px 1fr 48px !important; gap: 12px !important; }
  .gra-gora .logo-st { width: 86px !important; height: 86px !important; }
  .nazwa { font-size: 26px !important; }
  .rzad { grid-auto-columns: 148px !important; }
  .odkrywaj { grid-auto-columns: 205px !important; }
}

:root { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }

/* --- poprawki Claude: układ nie wychodzi poza ekran, jasny motyw --- */
.karta-gra > *, .gra-gora > *, .glosnosc-glowna > * { min-width: 0; }
.karta-gra, .glosnosc-glowna { max-width: 100%; }
.gra-gora { grid-template-columns: auto minmax(0,1fr) auto; }
.fala { overflow: hidden; width: 100%; }
.fala i { flex: 1 1 0; width: auto; max-width: 4px; min-width: 1px; }
.glosnosc-glowna input[type="range"] { min-width: 0; width: 100%; }
.przyciski { flex-wrap: nowrap; max-width: 100%; }

[data-theme="light"] body { background: radial-gradient(circle at 52% -12%, rgba(47,155,255,.16), transparent 38%), linear-gradient(180deg,#F5F8FC,#EAF1FA) !important; color: var(--text); }
[data-theme="light"] .karta { background: rgba(255,255,255,.92); border-color: var(--border); box-shadow: 0 10px 30px rgba(30,60,110,.10); }
[data-theme="light"] .karta-gra { background: linear-gradient(145deg,#ffffff,#eef3ff 55%,#f6ecff); border-color: rgba(70,120,220,.35); box-shadow: 0 12px 34px rgba(40,80,160,.14); }
[data-theme="light"] .karta-gra:after, [data-theme="light"] .hero-glow { opacity: .35; }
[data-theme="light"] .nazwa, [data-theme="light"] .brand-mini strong, [data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3 { color: var(--text); }
[data-theme="light"] .gra-opis p { color: var(--text-secondary); }
[data-theme="light"] .znaczek { background: rgba(255,255,255,.8); color: var(--text-secondary); border-color: var(--border); box-shadow: none; }
[data-theme="light"] .ikona { background: #fff; border-color: var(--border); color: var(--text); }
[data-theme="light"] .ikona.wielki, [data-theme="light"] .hero-play { background: #fff; color: #0b1a33; }
[data-theme="light"] .hero-serce { background: #fff; }
[data-theme="light"] .glosnosc-glowna { background: rgba(255,255,255,.7); border-color: var(--border); }
[data-theme="light"] .glosnosc-glowna output { color: var(--text-secondary); }
[data-theme="light"] .chip { background: #fff; color: var(--text); border-color: var(--border); }
[data-theme="light"] .top-search { background: #fff; border-color: var(--border); color: var(--text); }
[data-theme="light"] .dol, [data-theme="light"] .mini { background: rgba(255,255,255,.94); border-color: var(--border); }
[data-theme="light"] .dol button { color: var(--text-secondary); }
[data-theme="light"] .dol button.aktywny { color: #1479d6; background: rgba(40,140,255,.10); }
[data-theme="light"] .link { color: #1479d6; }
[data-theme="light"] .brand-mini em { color: #7a3df0; background: none; -webkit-text-fill-color: #7a3df0; }
[data-theme="light"] .chip[aria-selected=true] { background: #e6f2ff; color: #0b3a73; border-color: #38a7ff; }
/* wypełnienie suwaka głośności zgodne z wartością (zmienna --v ustawia app.js) */
.glosnosc-glowna input[type="range"], .glosnosc input[type="range"] {
  background: linear-gradient(90deg, #26d5ff 0%, #326cff calc(var(--v, 50%) * .55), #f443d0 var(--v, 50%), #425678 var(--v, 50%)) !important;
}

.karta-gra .ikona.wielki { padding: 24px !important; }