/* ===== Paleta & baza ===== */
:root{
  --bg:#fff7ed;          /* morelowe tło */
  --bg-accent:#ffedd5;   /* jaśniejsze */
  --card:#fff;
  --border:#f4c7a1;
  --text:#231a12;
  --muted:#8b6a53;

  --primary:#f97316;     /* pomarańcz */
  --primary-2:#fb923c;   /* jaśniejszy */
  --ok:#10b981;          /* zielony */
  --err:#ef4444;         /* czerwony */

  --shadow:0 10px 24px rgba(249,115,22,.2);
  --round:20px;
}

*{box-sizing:border-box}
body{
  margin:0; color:var(--text);
  background:
    radial-gradient(1200px 600px at -5% -10%, #ffe4c7 0%, transparent 60%),
    radial-gradient(900px 600px at 120% 0%, #ffe1e1 0%, transparent 55%),
    var(--bg);
  font-family: 'Fredoka', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Nagłówek */
.header{
  position:sticky; top:0; z-index:30;
  background:linear-gradient(180deg,#fffaf5 0%, rgba(255,250,245,.75) 100%);
  backdrop-filter: blur(6px);
  border-bottom: 2px dashed rgba(249,115,22,.25);
}
.header-inner{
  max-width:1100px; margin:0 auto; padding:14px 16px;
  display:flex; gap:12px; align-items:center;
}
.h1{
  margin:0; font-weight:900; letter-spacing:.2px;
  font-size:26px; display:flex; align-items:center; gap:10px;
}

/* Kontener */
.container{ max-width:1100px; margin:0 auto; padding:18px 16px }

/* Karta */
.card{
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: calc(var(--round) + 6px);
  box-shadow: var(--shadow);
  padding: 18px;
  position:relative;
  overflow: hidden;
}

/* Delikatny deseń w karcie */
.card::before{
  content:""; position:absolute; inset:-40% -20% auto auto; width:60%; height:200%;
  background:
    radial-gradient(150px 100px at 20% 10%, rgba(249,115,22,.10) 0%, transparent 60%),
    radial-gradient(120px 100px at 70% 30%, rgba(253,186,116,.16) 0%, transparent 60%),
    radial-gradient(160px 110px at 40% 70%, rgba(16,185,129,.10) 0%, transparent 65%);
  transform: rotate(8deg);
  pointer-events:none;
}

/* Przyciski */
.btn{
  border:2px solid var(--border); background: #fff;
  border-radius: 999px; padding:10px 14px; font-weight:800; cursor:pointer;
  box-shadow: 0 6px 0 rgba(0,0,0,.06);
  transition: transform .06s ease, box-shadow .06s ease, background .2s ease;
}
.btn:active{ transform: translateY(2px); box-shadow: 0 4px 0 rgba(0,0,0,.06); }
.btn.primary{
  color:#fff; border-color:transparent;
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-2) 100%);
}

/* Siatki i drobiazgi */
.grid{ display:grid; gap:12px }

/* Pola gry – większe i milsze */
.slots,.pool{ display:flex; gap:14px; flex-wrap:wrap }
.slot,.tile{
  width:84px; height:92px; border-radius:26px;
  display:flex; align-items:center; justify-content:center;
  font-size:40px; font-weight:900; letter-spacing:.06em;
  -webkit-tap-highlight-color: transparent;
  user-select:none; -webkit-user-select:none; touch-action:manipulation;
}
.tile{
  background:#fff;
  border:3px solid #ffd7b2;
  box-shadow: 0 8px 0 #ffd7b2, 0 10px 24px rgba(255,135,64,.15);
  cursor: grab;
}
.tile:active{ cursor: grabbing }
.tile.selected{
  border-color:#ffd1a6;
  background: #fff1e6;
  box-shadow: 0 8px 0 #ffc897, inset 0 0 0 6px #ffe7d4;
}
.slot{
  background: repeating-linear-gradient(
    45deg, #fff 0 14px, #fff7f0 14px 28px
  );
  border:3px dashed #ffbf86;
  box-shadow: inset 0 0 0 6px rgba(255,191,134,.15);
}
.slot.ok{ border-color: #34d399; background: #ecfdf5; box-shadow: inset 0 0 0 6px rgba(16,185,129,.08) }
.slot.err{ border-color: #fda4af; background:#fff1f2; box-shadow: inset 0 0 0 6px rgba(244,63,94,.08) }

.assembled{ color:var(--muted); margin-top:10px; font-size:17px }

/* Komunikaty */
.msg{
  margin-top:14px; padding:12px 14px; border-radius:16px;
  display:inline-flex; gap:10px; font-weight:800; border:2px solid;
  align-items:center;
}
.msg.ok{ color:#065f46; background:#ecfdf5; border-color:#a7f3d0 }
.msg.err{ color:#7f1d1d; background:#fff1f2; border-color:#fecaca }

/* Stopka */
footer{ text-align:center; color:var(--muted); font-size:13px; padding:28px 0 46px }

/* Dodatkowy „no-select” dla dotyku */
.no-select { user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.tile, .slot { touch-action: manipulation; }

/* Mniejsze ekrany */
@media (max-width:520px){
  .slot,.tile{ width:76px; height:84px; font-size:36px }
  .h1{ font-size:24px }
}

/* Dekoracyjna fala pod nagłówkiem */
.wave{
  height:18px; width:100%; background:
    radial-gradient(18px 9px at 9px 9px, #fecba1 98%, transparent 102%) 0 0/18px 18px repeat-x;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,.04));
}
/* --- Mobile fix: nagłówek i przyciski nie zasłaniają ekranu --- */
@media (max-width: 520px){

  /* Nagłówek nie jest sticky, jest niższy */
  .header{ position: static; border-bottom-width: 1px; }
  .header-inner{ padding: 8px 10px; gap: 8px; }

  /* Pasek przycisków przewijany w bok (bez zawijania w kilka rzędów) */
  .controls-wrap{
    max-width: 60%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }
  .controls-wrap::-webkit-scrollbar{ display: none; }

  /* Mniejsze, ale wciąż wygodne przyciski */
  .btn{ padding: 8px 10px; font-size: 14px; }

  /* Obrazek wyższy (więcej widać od razu) */
  .hero-img{ aspect-ratio: 4 / 3; }

  /* Literki ciut mniejsze, żeby wszystko mieściło się komfortowo */
  .slot, .tile{ width: 76px; height: 84px; font-size: 36px; }
}

/* Opcjonalnie: bardzo małe ekrany (np. 360px szer.) */
@media (max-width: 380px){
  .btn{ padding: 7px 9px; font-size: 13px; }
  .slot, .tile{ width: 70px; height: 78px; font-size: 34px; }
}