/* Material-ish reset + typografie */
:root{
  --md-yellow: #FFEB3B;   /* Yellow 500 */
  --md-yellow-100:#FFF9C4;/* Yellow 100 (jemnější plochy) */
  --md-blue:   #1A73E8;   /* Google Blue */
  --md-blue-d: #1765ca;
  --md-text:   #212121;
  --md-shadow: 0 2px 4px rgba(0,0,0,.2);
  --md-shadow-lg: 0 6px 18px rgba(0,0,0,.18);
  --cell-size: min(24vw, 110px);
  --radius: 14px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color: var(--md-text);
  background: radial-gradient(circle, #FBC02D 0%, #FFF59D 60%, #FFFFFF 100%);
  display: grid;
  place-items: center;
  padding: 24px;
}

h1 {
  margin: 0 0 20px;
  font-weight: 600;
  letter-spacing: .2px;
}

/* DESKA */
.board {
  display: grid;
  grid-template-columns: repeat(4, var(--cell-size));
  grid-template-rows: repeat(4, var(--cell-size));
  gap: 10px;
  margin-inline: auto;
  user-select: none;
}

/* BUŇKY */
.cell {
  background: #fff;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  font-size: calc(var(--cell-size) * 0.55);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--md-shadow);
  transition: transform .06s ease, box-shadow .2s ease, background-color .2s ease;
  will-change: transform;
}

.cell:hover { box-shadow: var(--md-shadow-lg); transform: translateY(-1px); }
.cell:active { transform: translateY(0); }
.cell:focus-visible { outline: 3px solid var(--md-blue); }

/* zvýraznění výherní řady (pokud JS přidá .win) */
.cell.win { background: var(--md-yellow-100); box-shadow: 0 0 0 3px var(--md-blue) inset, var(--md-shadow-lg); }

/* TLAČÍTKO */
button {
  margin-top: 18px;
  padding: 12px 22px;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: var(--md-blue);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: var(--md-shadow);
  transition: background-color .2s ease, box-shadow .2s ease, transform .06s ease;
}
button:hover { background: var(--md-blue-d); box-shadow: var(--md-shadow-lg); }
button:active { transform: translateY(1px); }
button:focus-visible { outline: 3px solid #ffffffaa; }

/* Stavová hláška */
.status {
  margin-top: 12px;
  font-weight: 500;
  opacity: .9;
  text-align: center;
}

/* Lepší layout na malých displejích */
@media (max-width: 380px){
  :root { --cell-size: 26vw; }
}