/* Nilip i Fiko — reusable component classes
 * Built on tokens.css. Use these for new components instead of writing
 * one-off inline styles. Existing per-page CSS still wins for legacy
 * elements (cascade); migrate when convenient.
 *
 * Naming: BEM-lite. `.btn` is base; `.btn--danger` is a modifier.
 * Combine: <button class="btn btn--danger btn--sm">…</button>
 */

/* ─────────────────────────────────────────────────────────────────
 * BUTTON
 * ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--radius);
  font-family: var(--ff-brand);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--glow-accent-md);
  transition: all var(--t-fast);
  line-height: 1;
}
.btn:hover {
  background: var(--accent-bg);
  box-shadow: 0 0 14px rgba(56,189,248,0.6);
}
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ─── Size modifiers ─── */
.btn--sm  { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-base); }
.btn--xs  { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); line-height: 1.2; }
.btn--xxs { padding: var(--sp-1) var(--sp-2); font-size: 9px; line-height: 1.2; letter-spacing: 0.06em; }
.btn--lg  { padding: var(--sp-4) var(--sp-7); font-size: var(--fs-xl); }
.btn--block { display: flex; width: 100%; }
/* SVG icons inside .btn — gap before text label */
.btn > svg.icon, .btn > .icon { margin-right: var(--sp-2); flex-shrink: 0; }
.btn > svg.icon:last-child, .btn > .icon:last-child { margin-right: 0; margin-left: var(--sp-2); }
.btn > svg.icon:only-child, .btn > .icon:only-child { margin: 0; }

/* === Icon component (use with /assets/icons.js or inline SVG) === */
.icon {
  display: inline-block;
  vertical-align: -0.15em;     /* baseline alignment with text */
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
}
.icon--sm { width: 12px; height: 12px; }
.icon--md { width: 16px; height: 16px; }
.icon--lg { width: 20px; height: 20px; }
.icon--xl { width: 24px; height: 24px; }
.icon--2xl { width: 32px; height: 32px; }
.icon--3xl { width: 48px; height: 48px; }
.icon--4xl { width: 64px; height: 64px; }
/* Inline icon next to text (heading, chip) — small inline gap */
.icon-with-text { display: inline-flex; align-items: center; gap: var(--sp-2); }
/* On touch devices, all .btn--xxs/.btn--xs bump to 44px (WCAG 2.5.5).
   This replaces the legacy media query in game-style.css. */
@media (pointer: coarse) {
  .btn--xxs, .btn--xs { min-height: 44px; padding: var(--sp-2) var(--sp-3); font-size: 11px; }
}

/* ─── Color modifiers ─── */
.btn--danger {
  color: var(--bad);
  border-color: var(--bad);
  box-shadow: 0 0 8px rgba(248,113,113,0.3);
}
.btn--danger:hover {
  background: rgba(248,113,113,0.12);
  box-shadow: 0 0 14px rgba(248,113,113,0.55);
}

.btn--warn {
  color: var(--warn);
  border-color: var(--warn);
  box-shadow: 0 0 6px rgba(251,191,36,0.25);
}
.btn--warn:hover {
  background: rgba(251,191,36,0.14);
  box-shadow: 0 0 12px var(--warn-shadow-strong);
}

.btn--ok {
  color: var(--ok);
  border-color: var(--ok);
  box-shadow: 0 0 6px rgba(52,211,153,0.25);
}
.btn--ok:hover {
  background: rgba(52,211,153,0.14);
  box-shadow: 0 0 12px rgba(52,211,153,0.5);
}

.btn--purple {
  color: var(--purple);
  border-color: var(--purple);
  box-shadow: 0 0 6px rgba(168,85,247,0.25);
}
.btn--purple:hover {
  background: rgba(168,85,247,0.14);
  box-shadow: 0 0 12px rgba(168,85,247,0.5);
}

.btn--info {
  color: var(--info);
  border-color: var(--info);
  box-shadow: 0 0 5px rgba(96,165,250,0.3);
}
.btn--info:hover {
  background: rgba(96,165,250,0.15);
  box-shadow: 0 0 10px rgba(96,165,250,0.6);
}

.btn--ghost {
  color: var(--text-subtle);
  border-color: var(--text-subtle);
  box-shadow: var(--glow-neutral);
}
.btn--ghost:hover {
  color: var(--text-muted);
  border-color: var(--text-muted);
  background: rgba(107,112,128,0.1);
  box-shadow: 0 0 8px rgba(107,112,128,0.25);
}

.btn--secondary {
  color: var(--slate-fg);
  border-color: var(--slate-border);
  box-shadow: none;
}
.btn--secondary:hover {
  background: rgba(148,163,184,0.10);
  color: var(--slate-fg-hover);
  border-color: var(--slate-fg);
  box-shadow: none;
}

/* ─────────────────────────────────────────────────────────────────
 * INPUT (text / password / email / number)
 * ──────────────────────────────────────────────────────────────── */
.input {
  background: var(--bg-panel-strong);
  border: 1px solid var(--accent-border-soft);
  color: var(--text);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--fs-lg);
  outline: none;
  box-shadow: var(--inset-input);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 10px rgba(56,189,248,0.35),
              inset 0 0 6px rgba(56,189,248,0.10);
}
.input--block { display: block; width: 100%; }
.input--center { text-align: center; }
.input--sm { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-md); }

/* Helpers attached to inputs */
.input-label {
  display: block;
  font-size: var(--fs-base);
  color: var(--text-muted);
  margin: 0 0 var(--sp-2);
  text-transform: uppercase;
  letter-spacing: var(--ls-normal);
}
.input-hint {
  font-size: var(--fs-sm);
  color: var(--text-subtle);
  margin-top: var(--sp-1);
}

/* ─────────────────────────────────────────────────────────────────
 * CARD / PANEL — dark surface with cyan-tinted border and soft glow
 * ──────────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-panel-strong);
  border: 1px solid rgba(56,189,248,0.3);
  border-radius: var(--radius);
  padding: var(--sp-6);
  box-shadow: 0 0 10px rgba(56,189,248,0.08);
}
.card--strong {
  background: var(--bg-panel-solid);
  border-color: var(--accent-border);
  box-shadow: var(--glow-accent-xl);
}
.card--compact { padding: var(--sp-4); }

.card-title {
  font-size: var(--fs-sm);
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  margin-bottom: var(--sp-3);
}

/* ─────────────────────────────────────────────────────────────────
 * TIP / CALLOUT — colored left-border banner
 * ──────────────────────────────────────────────────────────────── */
.tip {
  background: var(--accent-bg-subtle);
  border-left: 3px solid var(--accent);
  padding: var(--sp-4) var(--sp-6);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--fs-md);
  color: var(--text-muted);
  line-height: var(--lh-normal);
}
.tip--warn { border-left-color: var(--warn); background: var(--warn-bg-soft); }
.tip--ok   { border-left-color: var(--ok);   background: var(--ok-bg-soft); }
.tip--bad  { border-left-color: var(--bad);  background: var(--bad-bg-soft); }
.tip-title { font-weight: var(--fw-medium); color: var(--text); margin-bottom: var(--sp-1); }

/* ─────────────────────────────────────────────────────────────────
 * BADGE / CHIP — small pill for status, count, tag
 * ──────────────────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 2px var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-bg);
  border: 1px solid var(--accent-bg-strong);
  border-radius: var(--radius-sm);
  line-height: var(--lh-snug);
}
.badge--warn { color: var(--warn); background: var(--warn-bg-soft); border-color: rgba(251,191,36,0.35); }
.badge--ok   { color: var(--ok);   background: var(--ok-bg-soft);   border-color: rgba(52,211,153,0.35); }
.badge--bad  { color: var(--bad);  background: var(--bad-bg-soft);  border-color: rgba(248,113,113,0.35); }

/* ─────────────────────────────────────────────────────────────────
 * MODAL — overlay + centered card. Scrolls cleanly on mobile when
 * content > viewport (the killer bug in old per-modal implementations
 * was align-items:center blocking outer scroll).
 *
 * Pattern: `align-items:flex-start` + `margin:auto` on card. When
 * card fits viewport, auto-margin centers it. When card overflows,
 * outer scrolls naturally.
 *
 * Show/hide: legacy JS keeps using `el.style.display='flex'/'none'`,
 * OR add/remove `.open` class (newer pattern).
 *
 * HTML contract:
 *   <div class="modal" id="x" role="dialog" aria-modal="true" aria-label="...">
 *     <div class="modal-card">
 *       <button class="modal-close" aria-label="Zamknij">×</button>
 *       ... content ...
 *     </div>
 *   </div>
 * ──────────────────────────────────────────────────────────────── */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow-y: auto;            /* outer scroll for tall cards on mobile */
  -webkit-overflow-scrolling: touch;
  padding: var(--sp-5);
  align-items: flex-start;     /* DO NOT center — breaks scroll */
  justify-content: center;
}
.modal.open { display: flex; }
.modal-card {
  margin: auto;                /* in flex: centers vertically when fits */
  max-width: 460px;
  width: 100%;
  background: var(--bg-panel-solid);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-9);
  box-shadow: var(--glow-accent-xl);
  position: relative;
  font-family: var(--ff-brand);
  color: var(--text);
}
.modal-card--wide   { max-width: 560px; }
.modal-card--narrow { max-width: 360px; }
.modal-card--warn {
  border-color: var(--warn);
  box-shadow: 0 0 32px rgba(251,191,36,0.35);
}
.modal-close {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  color: var(--text-subtle);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.modal-close:hover { color: var(--text); background: var(--accent-bg-subtle); }
.modal-title {
  font-size: var(--fs-base);
  color: var(--text-subtle);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  margin: 0 var(--sp-7) var(--sp-5) 0;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--accent-bg-strong);
}
@media (max-width: 480px) {
  .modal { padding: var(--sp-3); }
  .modal-card { padding: var(--sp-6); border-radius: var(--radius); }
}

/* ─────────────────────────────────────────────────────────────────
 * ALERT — inline status message bound to form/page state.
 * Always pair with role="alert" + aria-live in HTML for screen readers.
 * ──────────────────────────────────────────────────────────────── */
.alert {
  display: block;
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--border-strong);
  border-left-width: 3px;
  border-radius: var(--radius);
  font-family: var(--ff-body);
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--text-muted);
  background: var(--bg-panel);
  min-height: 24px;
}
.alert:empty { display: none; }                /* hide until populated by JS */
.alert--err  { border-left-color: var(--bad);  color: var(--bad);  background: var(--bad-bg-soft); }
.alert--warn { border-left-color: var(--warn); color: var(--warn); background: var(--warn-bg-soft); }
.alert--ok   { border-left-color: var(--ok);   color: var(--ok);   background: var(--ok-bg-soft); }
.alert--info { border-left-color: var(--accent); color: var(--accent); background: var(--accent-bg-subtle); }
.alert--inline {                                /* small, no padding — under input fields */
  padding: 0;
  border: none;
  background: transparent;
  font-size: var(--fs-sm);
  min-height: 16px;
}
.alert--inline.alert--err  { color: var(--bad); }
.alert--inline.alert--warn { color: var(--warn); }
.alert--inline.alert--ok   { color: var(--ok); }

/* ─────────────────────────────────────────────────────────────────
 * FORM GROUP — composable input + label + hint + error stack
 * ──────────────────────────────────────────────────────────────── */
.form-group {
  display: block;
  margin-bottom: var(--sp-5);
}
.form-group > .input,
.form-group > input,
.form-group > select,
.form-group > textarea {
  display: block;
  width: 100%;
  margin-top: var(--sp-2);
}
.form-group .input-hint { margin-top: var(--sp-1); }
.form-group .alert      { margin-top: var(--sp-2); }