/* v8: mobile same as v6; desktop circles smaller; played turns red */
* { box-sizing: border-box; }
:root { --accent:#c0002a; --accent-contrast:#fff; }
html, body { margin:0; padding:0; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, 'Noto Sans Hebrew', 'Rubik', 'Assistant'; background:#0b0b0b; color:#f5f5f5; }

.hero { position: relative; height: 40vh; min-height: 240px; overflow: hidden; }
.hero img#hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter: brightness(0.6); }
.hero .overlay { position:absolute; inset:0; background: linear-gradient(to bottom, rgba(192,0,42,0.20), rgba(0,0,0,0.70)); backdrop-filter: blur(1px); }
.hero .hero-text { position:absolute; inset:auto 0 8%; text-align:center; padding: 0 16px; }
.hero h1 { margin:0 0 6px; font-size: clamp(1.4rem, 5vw, 2.6rem); color: var(--accent); }
.hero p { margin:0; opacity:.95; }

.container { max-width: 980px; margin: 0 auto; padding: 16px; }
.hint { margin-top: 6px; opacity: 0.9; text-align:center; font-size: .95rem; }

.landing .grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:12px; padding-top:16px; }

.circle-btn {
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:1 / 1; border-radius:50%; border:2px solid #888;
  background:#161616; color:#f5f5f5; text-decoration:none;
  font-size: clamp(1rem, 5vw, 1.5rem); /* MOBILE-SIZED (v6) */
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .05s ease;
}
.circle-btn:active { transform: scale(0.97); }
.circle-btn:focus { outline: 3px solid var(--accent); outline-offset: 2px; }
.circle-btn.played { background: var(--accent); border-color: var(--accent); color:#fff; }
.circle-btn.placeholder { background:#111; border-style: dashed; border-color:#777; color:#bbb; }
.circle-btn:hover { filter: brightness(1.06); }

/* Larger screens — smaller circles so they don't look huge */
@media (min-width: 880px) {
  .landing .grid { grid-template-columns: repeat(6, 1fr); gap: 12px; }
  .circle-btn { font-size: 1rem; }
}

.hidden { display:none; }
.back-btn { display:inline-block; margin:10px 0 14px; padding:10px 14px; border-radius:10px; background:#1e1e1e; color:#fff; border:1px solid #553; font-size:1rem; }
.painting-view figure { margin:0; }
.painting-view img { width:100%; height:auto; border-radius:12px; border:1px solid #333; background:#111; }
.painting-view h2 { margin:10px 0 8px; font-size: clamp(1.1rem, 4.5vw, 1.8rem); color: var(--accent); }
.audio-controls { margin-top:10px; }
.transcript { margin-top:12px; line-height:1.7; background:#121212; padding:12px; border-radius:10px; border:1px solid #2a2a2a; }