:root {
  --ink: #fff7f0;
  --deep: #1b0838;
  --pink: #ff3fa4;
  --yellow: #ffd23f;
  --teal: #35c6f4;
  --green: #7ed957;
  --orange: #ff8c1a;
  --purple: #b86bff;
  --font: "Avenir Next Condensed", "AvenirNextCondensed-Heavy", "Futura", "Arial Narrow", "Arial Black", system-ui, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: var(--deep); color: var(--ink);
  font-family: var(--font); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  overscroll-behavior: none;
}
button { font-family: inherit; color: inherit; border: 0; cursor: pointer; }
.hidden { display: none !important; }

#scene { position: fixed; inset: 0; width: 100vw; height: 100vh; touch-action: none; display: block; }

/* ── screens ─────────────────────────────────────────────────────────────────────────── */
.screen {
  position: fixed; inset: 0; display: flex; flex-direction: column;
  padding: calc(var(--safe-t) + 10px) 14px calc(var(--safe-b) + 86px);
  background: linear-gradient(180deg, rgba(27,8,56,0.25) 0%, rgba(27,8,56,0.55) 30%, rgba(20,6,40,0.92) 55%);
}
#home { background: linear-gradient(180deg, rgba(27,8,56,0) 0%, rgba(27,8,56,0.35) 22%, rgba(20,6,40,0.9) 42%); }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
.pill {
  display: flex; align-items: center; gap: 6px; min-width: 74px; justify-content: center;
  padding: 6px 12px; border-radius: 999px; font-weight: 800; font-size: 18px;
  background: rgba(10,4,24,0.55); border: 2px solid rgba(255,255,255,0.18); backdrop-filter: blur(6px);
}
.star-ico { color: var(--yellow); text-shadow: 0 0 8px rgba(255,210,63,0.7); }
.coin-ico {
  width: 18px; height: 18px; border-radius: 50%; display: inline-block;
  background: radial-gradient(circle at 35% 30%, #fff6c2, #ffc933 45%, #c47a00);
  box-shadow: inset 0 0 0 2px #a35f00, 0 0 8px rgba(255,201,51,0.6);
}
.logo {
  margin: 0; font-size: clamp(34px, 11vw, 54px); font-style: italic; font-weight: 900; letter-spacing: 1px;
  background: linear-gradient(180deg, #fff27a 0%, #ffb000 45%, #ff3fa4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #3a0b3e) drop-shadow(0 0 14px rgba(255,63,164,0.55));
  transform: rotate(-4deg);
}
.title { margin: 0; font-size: 30px; font-style: italic; font-weight: 900; text-shadow: 0 3px 0 #3a0b3e, 0 0 16px rgba(255,63,164,0.6); }
.tagline { text-align: center; margin: 2px 0 10px; font-size: 15px; font-weight: 700; opacity: 0.85; letter-spacing: 0.5px; }

/* papel picado row */
.papel {
  height: 34px; margin: 6px -14px 0;
  background:
    repeating-linear-gradient(90deg, var(--pink) 0 40px, var(--yellow) 40px 80px, var(--teal) 80px 120px, var(--green) 120px 160px, var(--orange) 160px 200px, var(--purple) 200px 240px);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='34'><path d='M2 2h36v24l-3 4-3-4-3 4-3-4-3 4-3-4-3 4-3-4-3 4-3-4-3 4-2-2z' fill='white'/><circle cx='20' cy='13' r='5' fill='black'/><circle cx='11' cy='8' r='2' fill='black'/><circle cx='29' cy='8' r='2' fill='black'/><circle cx='11' cy='19' r='2' fill='black'/><circle cx='29' cy='19' r='2' fill='black'/></svg>") repeat-x;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='34'><path d='M2 2h36v24l-3 4-3-4-3 4-3-4-3 4-3-4-3 4-3-4-3 4-3-4-3 4-2-2z' fill='white'/><circle cx='20' cy='13' r='5' fill='black'/><circle cx='11' cy='8' r='2' fill='black'/><circle cx='29' cy='8' r='2' fill='black'/><circle cx='11' cy='19' r='2' fill='black'/><circle cx='29' cy='19' r='2' fill='black'/></svg>") repeat-x;
  -webkit-mask-mode: luminance; mask-mode: luminance;
  animation: sway 3s ease-in-out infinite alternate; transform-origin: top;
}
@keyframes sway { from { transform: skewX(-2deg); } to { transform: skewX(2deg); } }

/* ── song cards ──────────────────────────────────────────────────────────────────────── */
.song-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 2px 20px; display: flex; flex-direction: column; gap: 10px; }
.card {
  position: relative; display: grid; grid-template-columns: 62px 1fr 64px; align-items: center; gap: 10px;
  padding: 10px 10px 10px 8px; border-radius: 18px; min-height: 78px;
  background: linear-gradient(100deg, var(--c1), var(--c2)); border: 2px solid rgba(255,255,255,0.22);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform 0.12s;
}
.card:active { transform: scale(0.98); }
.card.sel { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,210,63,0.7), 0 8px 22px rgba(0,0,0,0.45); }
.disc {
  width: 58px; height: 58px; border-radius: 50%; position: relative; display: grid; place-items: center; font-size: 24px;
  background: repeating-radial-gradient(circle, #1a1a1f 0 2px, #26262d 2px 4px);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.3), 0 4px 10px rgba(0,0,0,0.5);
}
.disc::after { content: ''; position: absolute; width: 22px; height: 22px; border-radius: 50%; background: var(--c1); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.6); }
.disc span { position: relative; z-index: 1; font-size: 15px; }
.disc.spin { animation: spin 1.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.meta { min-width: 0; }
.song-title { font-size: 20px; font-weight: 900; font-style: italic; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 0 rgba(0,0,0,0.35); }
.song-sub { font-size: 13px; font-weight: 700; opacity: 0.9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.song-row { display: flex; gap: 6px; align-items: center; margin-top: 5px; font-size: 13px; font-weight: 800; }
.chip { padding: 1px 8px; border-radius: 999px; background: rgba(0,0,0,0.35); letter-spacing: 0.5px; }
.chip.l1 { color: #b8ffb0; } .chip.l2 { color: #fff27a; } .chip.l3 { color: #ff9fbf; }
.mini-stars { color: rgba(255,255,255,0.3); letter-spacing: 1px; }
.mini-stars b { color: var(--yellow); font-weight: 900; text-shadow: 0 0 6px rgba(255,210,63,0.8); }
.play {
  width: 58px; height: 58px; font-size: 24px; display: grid; place-items: center; color: #3a0b3e;
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
  background: linear-gradient(180deg, #fff27a, #ffb000); filter: drop-shadow(0 3px 0 #a35f00);
}
.lock { position: absolute; inset: 0; border-radius: 16px; background: rgba(10,4,24,0.6); display: grid; place-items: center; font-size: 15px; font-weight: 800; text-align: center; padding: 0 20px; }

/* ── tabs ────────────────────────────────────────────────────────────────────────────── */
.tabs {
  position: fixed; left: 10px; right: 10px; bottom: calc(var(--safe-b) + 8px); height: 64px; z-index: 5;
  display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 6px; padding: 6px; border-radius: 22px;
  background: rgba(40,12,70,0.88); border: 2px solid rgba(255,255,255,0.15); backdrop-filter: blur(10px);
}
.tabs button { background: transparent; border-radius: 16px; font-size: 14px; font-weight: 800; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; opacity: 0.75; }
.tabs button.on { background: linear-gradient(180deg, #c04bff, #7a1fd1); opacity: 1; box-shadow: 0 0 14px rgba(192,75,255,0.6); }
.tab-ico { font-size: 20px; line-height: 1; }

/* ── balls ───────────────────────────────────────────────────────────────────────────── */
.ball-stage { display: flex; flex-direction: column; align-items: center; margin: 8px 0; }
#ballPreview { width: 120px; height: 120px; filter: drop-shadow(0 10px 18px rgba(0,0,0,0.5)); animation: bob 0.9s ease-in-out infinite alternate; }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-14px); } }
.ball-name { font-size: 22px; font-weight: 900; font-style: italic; margin-top: 4px; }
.ball-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; padding: 6px 2px 20px; }
.ball-cell {
  position: relative; border-radius: 16px; padding: 10px 4px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: rgba(255,255,255,0.08); border: 2px solid rgba(255,255,255,0.14); font-size: 13px; font-weight: 800;
}
.ball-cell.sel { border-color: var(--yellow); background: rgba(255,210,63,0.16); box-shadow: 0 0 12px rgba(255,210,63,0.4); }
.ball-cell canvas { width: 56px; height: 56px; }
.ball-cell.locked canvas { filter: grayscale(0.6) brightness(0.6); }
.price { display: flex; align-items: center; gap: 4px; }
.price .coin-ico { width: 13px; height: 13px; }

/* ── settings ────────────────────────────────────────────────────────────────────────── */
.settings { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; overflow-y: auto; padding: 0 4px 20px; }
.row { display: flex; flex-direction: column; gap: 6px; font-size: 18px; font-weight: 800; }
.row.check { flex-direction: row; justify-content: space-between; align-items: center; }
.row input[type=range] { width: 100%; accent-color: var(--pink); height: 28px; }
.row input[type=checkbox] { width: 28px; height: 28px; accent-color: var(--pink); }
.hint, .credits { font-size: 14px; opacity: 0.75; margin: -8px 0 0; line-height: 1.35; font-family: system-ui, sans-serif; font-weight: 500; }
.credits { margin-top: 10px; }

/* ── HUD ─────────────────────────────────────────────────────────────────────────────── */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 3; }
#hud .round-btn { pointer-events: auto; }
.round-btn {
  position: absolute; top: calc(var(--safe-t) + 10px); left: 12px; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(10,4,24,0.5); border: 2px solid rgba(255,255,255,0.3); font-size: 15px; font-weight: 900;
}
.progress { position: absolute; top: calc(var(--safe-t) + 18px); left: 66px; right: 88px; }
.bar { height: 10px; border-radius: 99px; background: rgba(0,0,0,0.45); border: 2px solid rgba(255,255,255,0.25); overflow: hidden; }
.fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--pink), var(--yellow)); box-shadow: 0 0 10px rgba(255,210,63,0.8); }
.stars { position: absolute; inset: -9px 0 auto 0; height: 24px; }
.st { position: absolute; top: 0; font-size: 22px; color: rgba(255,255,255,0.35); transform: translateX(-50%); text-shadow: 0 2px 0 rgba(0,0,0,0.5); transition: color 0.2s, transform 0.3s; }
#st1 { left: 33.3%; } #st2 { left: 66.6%; } #st3 { left: 97%; }
.st.on { color: var(--yellow); transform: translateX(-50%) scale(1.25); text-shadow: 0 0 10px rgba(255,210,63,0.9), 0 2px 0 #a35f00; }
.hud-coins { position: absolute; top: calc(var(--safe-t) + 14px); right: 12px; display: flex; align-items: center; gap: 5px; font-size: 18px; font-weight: 900; background: rgba(10,4,24,0.5); padding: 4px 10px; border-radius: 99px; }
#score {
  position: absolute; top: calc(var(--safe-t) + 44px); left: 0; right: 0; text-align: center;
  font-size: 58px; font-weight: 900; font-style: italic; text-shadow: 0 4px 0 rgba(58,11,62,0.8), 0 0 18px rgba(255,255,255,0.35);
}
#score.bump { animation: bump 0.18s ease-out; }
@keyframes bump { 50% { transform: scale(1.12); } }
#crowns { position: absolute; top: calc(var(--safe-t) + 110px); left: 0; right: 0; text-align: center; font-size: 22px; font-weight: 900; }

/* ── overlays ────────────────────────────────────────────────────────────────────────── */
.overlay { position: fixed; inset: 0; z-index: 6; display: grid; place-items: center; padding: 20px; }
.overlay.dim { background: rgba(12,4,26,0.62); backdrop-filter: blur(3px); }
.corner-btn { position: absolute; top: calc(var(--safe-t) + 10px); left: 12px; width: 44px; height: 44px; border-radius: 50%; background: rgba(10,4,24,0.5); border: 2px solid rgba(255,255,255,0.3); font-size: 18px; }
#ready { pointer-events: none; place-items: end center; padding-bottom: calc(var(--safe-b) + 43vh); }
#ready .corner-btn { pointer-events: auto; }
.ready-card { text-align: center; }
.ready-style { font-size: 18px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; opacity: 0.9; }
.ready-title { font-size: 34px; font-weight: 900; font-style: italic; text-shadow: 0 3px 0 #3a0b3e, 0 0 16px rgba(255,63,164,0.6); margin-bottom: 8px; }
.hand { font-size: 46px; animation: slide 1.4s ease-in-out infinite; }
@keyframes slide { 0%, 100% { transform: translateX(-40px); } 50% { transform: translateX(40px); } }
.ready-hint { font-size: 20px; font-weight: 800; margin-top: 4px; }
#countNum { font-size: 120px; font-weight: 900; font-style: italic; color: var(--yellow); text-shadow: 0 6px 0 #a35f00, 0 0 30px rgba(255,210,63,0.8); animation: pop 0.9s ease-out infinite; }
@keyframes pop { 0% { transform: scale(1.5); opacity: 0; } 20% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.9); opacity: 0.9; } }

.panel {
  width: min(360px, 92vw); padding: 22px 20px; border-radius: 26px; text-align: center;
  background: linear-gradient(170deg, rgba(88,24,140,0.95), rgba(40,10,70,0.97)); border: 2px solid rgba(255,255,255,0.22);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5); display: flex; flex-direction: column; gap: 10px;
}
.panel h2 { margin: 0; font-size: 40px; font-style: italic; font-weight: 900; text-shadow: 0 3px 0 #2a0b2e; }
.panel .sub { margin: -4px 0 6px; font-size: 16px; font-weight: 700; opacity: 0.85; }
.big-btn, .mid-btn, .ghost-btn { border-radius: 18px; font-weight: 900; font-size: 22px; padding: 14px; }
.big-btn { background: linear-gradient(180deg, #fff27a, #ffb000); color: #3a0b3e; box-shadow: 0 5px 0 #a35f00; font-style: italic; }
.big-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #a35f00; }
.mid-btn { background: linear-gradient(180deg, #ff6fbf, #d61f84); box-shadow: 0 5px 0 #7d0d4b; font-size: 20px; }
.ghost-btn { background: rgba(255,255,255,0.08); border: 2px solid rgba(255,255,255,0.2); font-size: 17px; }
.revive-btn { display: flex; align-items: center; justify-content: center; gap: 10px; }
.ring { width: 30px; height: 30px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke: #3a0b3e; stroke-width: 4; stroke-dasharray: 100.5; stroke-dashoffset: 0; }
.ring.run circle { animation: drain 5s linear forwards; }
@keyframes drain { to { stroke-dashoffset: 100.5; } }

.results .res-title { font-size: 26px; font-weight: 900; font-style: italic; }
.res-stars { font-size: 52px; letter-spacing: 6px; color: rgba(255,255,255,0.22); }
.res-stars span.on { color: var(--yellow); text-shadow: 0 0 14px rgba(255,210,63,0.9), 0 3px 0 #a35f00; animation: starIn 0.4s ease-out both; display: inline-block; }
@keyframes starIn { from { transform: scale(2.2) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }
.res-crowns { font-size: 24px; font-weight: 900; }
.res-score { font-size: 64px; font-weight: 900; font-style: italic; line-height: 1; text-shadow: 0 4px 0 #2a0b2e; }
.res-record { font-size: 20px; font-weight: 900; color: var(--yellow); animation: pop 1s ease-out; }
.res-stats { display: flex; justify-content: center; gap: 14px; font-size: 15px; font-weight: 800; opacity: 0.9; margin-bottom: 6px; flex-wrap: wrap; }

.toast { position: fixed; left: 50%; bottom: calc(var(--safe-b) + 96px); transform: translateX(-50%); z-index: 9; background: rgba(10,4,24,0.9); padding: 10px 16px; border-radius: 14px; font-weight: 800; border: 2px solid rgba(255,255,255,0.2); max-width: 90vw; text-align: center; }

.boot { position: fixed; inset: 0; display: grid; place-items: center; z-index: 20; background: var(--deep); font-size: 48px; font-weight: 900; font-style: italic; color: var(--yellow); transition: opacity 0.4s; }
.boot.gone { opacity: 0; pointer-events: none; }

@media (min-width: 700px) {
  .screen { padding-left: max(14px, calc(50vw - 320px)); padding-right: max(14px, calc(50vw - 320px)); }
  .tabs { left: max(10px, calc(50vw - 320px)); right: max(10px, calc(50vw - 320px)); }
}
.song-row .best { opacity: 0.8; }
.coin-ico.small { width: 14px; height: 14px; vertical-align: -2px; }
.res-unlock { font-size: 17px; font-weight: 900; color: #7ef3ff; text-shadow: 0 0 10px rgba(126,243,255,0.6); animation: pop 1s ease-out; }
/* no double-tap zoom on iOS: buttons and the list react immediately */
button, .card, .song-list, .ball-grid, .settings { touch-action: manipulation; }
.calib-dot { width: 90px; height: 90px; margin: 10px auto 4px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6c2, #ffc933 45%, #c47a00); box-shadow: 0 0 24px rgba(255,210,63,0.6); }
.calib.flash .calib-dot { animation: tapflash 0.25s ease-out; }
@keyframes tapflash { from { transform: scale(1.35); box-shadow: 0 0 50px rgba(255,255,255,0.9); } to { transform: none; } }
#settings .mid-btn { margin-top: -6px; }
.ready-card { padding: 16px 34px 18px; border-radius: 32px; background: radial-gradient(ellipse at center, rgba(12,4,26,0.72) 0%, rgba(12,4,26,0.45) 55%, rgba(12,4,26,0) 78%); }
/* the 3-2-1 never catches a finger: it's already on the canvas, steering */
#countdown { pointer-events: none; touch-action: none; }

/* ── song packs (Latin / Hebrew) and the language switch ─────────────────────────────── */
.packs, .langs { display: flex; gap: 8px; justify-content: center; margin: 0 0 10px; }
.pack, .lang {
  padding: 7px 16px; border-radius: 999px; font-size: 16px; font-weight: 900;
  background: rgba(10,4,24,0.5); border: 2px solid rgba(255,255,255,0.2); opacity: 0.8;
}
.pack.on, .lang.on { opacity: 1; background: linear-gradient(180deg, #c04bff, #7a1fd1); border-color: rgba(255,255,255,0.5); box-shadow: 0 0 12px rgba(192,75,255,0.55); }
.langs { justify-content: flex-start; margin: 0; }
.lang[data-lang="he"] { font-family: "Arial Hebrew", "SF Hebrew", "Noto Sans Hebrew", Arial, system-ui, sans-serif; }

/* ── Hebrew: right-to-left, upright Hebrew lettering ─────────────────────────────────── */
html[lang="he"] { --font: "Arial Hebrew", "SF Hebrew", "Noto Sans Hebrew", "Avenir Next Condensed", Arial, system-ui, sans-serif; }
html[lang="he"] body *:not(.logo):not(.boot) { font-style: normal; }
html[lang="he"] .round-btn, html[lang="he"] .corner-btn { left: auto; right: 12px; }
html[lang="he"] .hud-coins { right: auto; left: 12px; }
html[lang="he"] .progress { left: 88px; right: 66px; transform: scaleX(-1); }
html[lang="he"] .hint, html[lang="he"] .credits { font-family: var(--font); }
html[lang="he"] .song-sub { direction: rtl; }
html[lang="he"] input[type=range] { direction: ltr; } /* sliders keep "right = more" (the sync hint says so) */
html[lang="he"] .ready-style, html[lang="he"] .chip, html[lang="he"] .tagline { letter-spacing: 0; text-transform: none; }