/* r6: Hebrew first, graffiti tags, labelled wheel, replay. Loaded after pz.css. */
:root { --sc-font-display: "Anton", "Secular One", "Impact", system-ui, sans-serif; --sc-font-text: "Inter", "Heebo", system-ui, sans-serif; --ui: "Barlow Condensed", "Heebo", "Inter", system-ui, sans-serif; --spray: "Rubik Spray Paint", "Secular One", "Anton", system-ui, sans-serif; }
html[lang="he"] { --sc-font-text: "Heebo", "Inter", system-ui, sans-serif; }
html[lang="he"] .cut__tag, html[lang="he"] .bar__nav a, html[lang="he"] .player__name, html[lang="he"] .hero__live, html[lang="he"] .ign__snd, html[lang="he"] .ign__skip, html[lang="he"] .replay, html[lang="he"] .foot, html[lang="he"] .chips button { letter-spacing: .02em; }
html[lang="he"] .cut p, html[lang="he"] .hero__sub, html[lang="he"] .store__note, html[lang="he"] .rules__lead { font-family: "Heebo", system-ui, sans-serif; font-weight: 500; letter-spacing: 0; }

/* mixed-language text: every block takes its direction from its first letter, Latin runs are isolated */
.toast__t, .toast__s, .pkg__name, .lines span { unicode-bidi: plaintext; }
bdi { unicode-bidi: isolate; }

/* the top bar stays left-to-right in both languages */
.bar__ui { direction: ltr; }
html[lang="he"] .bar__nav a { direction: rtl; }
.lang { height: 34px; min-width: 42px; padding: 0 10px; border: 1px solid rgba(255,255,255,.22); border-radius: 4px; background: transparent; cursor: pointer; font: 700 .85rem/1 var(--ui); letter-spacing: .08em; transition: background-color .2s, border-color .2s, transform .2s var(--ease); }
.lang:hover { background: var(--red); border-color: var(--red); transform: translateY(-1px); }

/* hero: copy stays on the left (clear of the car), the shield next to the title */
html[dir="rtl"] .hero__in { justify-self: start; direction: rtl; }
html[dir="rtl"] .hero { direction: ltr; }
.hero__title { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); direction: ltr; }
.hero__logo { width: clamp(84px, 10vw, 156px); height: auto; flex: none; filter: drop-shadow(0 14px 22px rgba(0,0,0,.7)); animation: logoIn 1s cubic-bezier(.2,1.4,.3,1) .35s both; }
body.pre .hero__logo { animation: none; opacity: 0; }
@keyframes logoIn { from { opacity: 0; transform: translateY(-30px) rotate(-14deg) scale(.6); } }
.hero__logo:hover { animation: logoWob .6s ease; }
@keyframes logoWob { 30% { transform: rotate(-8deg) scale(1.06); } 60% { transform: rotate(5deg); } }

/* ---- graffiti tags (Join / Discord) ---- */
.tag { --c: var(--red); --m: url(../assets/ui/spray1.png); position: relative; display: inline-flex; align-items: center; gap: 14px; padding: 20px 42px 24px; border: 0; background: none; color: #fff; cursor: pointer; text-decoration: none; isolation: isolate;
  font-family: var(--ui); transform: rotate(-1.6deg); transition: transform .35s cubic-bezier(.2,1.4,.3,1); -webkit-tap-highlight-color: transparent; }
.tag--disc { --c: #5865F2; --m: url(../assets/ui/spray2.png); transform: rotate(1.3deg); }
.tag::before, .tag__paint { content: ""; position: absolute; inset: -12px -20px -6px; -webkit-mask: var(--m) center / 100% 100% no-repeat; mask: var(--m) center / 100% 100% no-repeat; }
.tag::before { z-index: -2; background: rgba(0,0,0,.6); transform: translate(6px, 8px); }
.tag__paint { z-index: -1; background: var(--c); transition: filter .3s, transform .45s cubic-bezier(.2,1.4,.3,1); }
.tag:hover { transform: rotate(0deg) scale(1.06); }
.tag:hover .tag__paint { filter: brightness(1.12) saturate(1.1); animation: respray .45s steps(3); }
@keyframes respray { 0% { transform: scaleX(.86); } 50% { transform: scaleX(1.04) scaleY(.94); } 100% { transform: none; } }
.tag:active { transform: scale(.96) rotate(-1deg); }
.tag__ico { flex: none; width: 50px; height: 50px; display: grid; place-items: center; border: 3px solid #fff; border-radius: 50%; transition: transform .45s cubic-bezier(.2,1.4,.3,1), opacity .2s; }
.tag__ico svg { width: 22px; height: 22px; }
.tag:hover .tag__ico { transform: rotate(-14deg) scale(1.1); }
.tag--disc:hover .tag__ico { transform: rotate(14deg) scale(1.1); }
.tag__txt { display: grid; gap: 6px; text-align: start; transition: opacity .2s; }
.tag__txt b { font: 400 clamp(1.5rem, 2.3vw, 2.05rem)/1 var(--spray); letter-spacing: .01em; text-shadow: 3px 3px 0 rgba(0,0,0,.45); }
.tag__txt small { display: block; font: 600 .82rem/1.15 var(--ui); letter-spacing: .06em; opacity: .92; }
.tag__ok { position: absolute; inset: 0; display: grid; place-items: center; font: 400 1.9rem/1 var(--spray); opacity: 0; transform: scale(.6); transition: opacity .2s, transform .35s cubic-bezier(.2,1.4,.3,1); pointer-events: none; }
.tag.copied { --c: #1C8A3A; }
.tag.copied .tag__ok { opacity: 1; transform: none; }
.tag.copied .tag__txt, .tag.copied .tag__ico { opacity: 0; }
.tag--join:not(.tag--sm) { animation: tagPulse 2.8s ease-in-out infinite; }
@keyframes tagPulse { 50% { transform: rotate(-1.6deg) scale(1.03); } }
.tag--join:hover { animation: none; }
.hero__ctas, .close__ctas { gap: 30px 36px; align-items: center; }
/* small tags in the bar */
.tag--sm { --m: url(../assets/ui/spray3.png); gap: 8px; padding: 8px 16px 10px; transform: rotate(-2deg); font: 600 .95rem/1 var(--ui); letter-spacing: .06em; text-transform: uppercase; }
.tag--sm.tag--disc { --m: url(../assets/ui/spray2.png); transform: rotate(1.6deg); }
.tag--sm::before, .tag--sm .tag__paint { inset: -6px -10px -3px; }
.tag--sm::before { transform: translate(3px, 4px); }
.tag--sm svg { width: 16px; height: 16px; flex: none; }
.tag--sm .n { background: rgba(0,0,0,.3); padding: 3px 6px; border-radius: 3px; font-variant-numeric: tabular-nums; }
.tag--sm .ip { font-variant-numeric: tabular-nums; }
.splat { position: fixed; z-index: 99; border-radius: 50%; pointer-events: none; animation: splat .7s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes splat { to { transform: translate(var(--x), var(--y)) scale(.3); opacity: 0; } }

/* ---- replay ---- */
.replay { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding: 6px 0; border: 0; background: none; cursor: pointer; color: var(--sc-ink-soft); font: 600 .85rem/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; transition: color .2s; }
.replay svg { width: 17px; height: 17px; transition: transform .6s var(--ease); }
.replay:hover { color: #fff; }
.replay:hover svg { transform: rotate(-360deg); }
.replay--foot { margin: 0; padding: 0; font-size: .82rem; }

/* ---- the store wheel: bigger, icon + name in each slice, spins open, descriptions in the hub ---- */
.store__body { grid-template-columns: minmax(0, 600px) 1fr; }
.wheel { width: min(600px, 100%); }
.wheel .seg { transform-box: view-box; transform-origin: 300px 300px; opacity: 0; transform: rotate(-70deg) scale(.35); transition: transform .9s cubic-bezier(.2,1.2,.3,1), opacity .45s ease; transition-delay: calc(var(--i) * 70ms); outline: none; }
.wheel.open .seg { opacity: 1; transform: none; }
.wheel .seg__in { transition: transform .35s cubic-bezier(.2,1.4,.3,1); }
.wheel .seg:hover .seg__in, .wheel .seg:focus-visible .seg__in, .wheel .seg.on .seg__in { transform: translate(var(--dx), var(--dy)); }
.wheel .seg .sl, .wheel .seg.on .sl { transform: none; }
.wheel .seg:focus-visible .sl { stroke: #fff; stroke-width: 2; }
.wheel .seg .tl { fill: #fff; font: 700 17px var(--ui); letter-spacing: .05em; text-transform: uppercase; text-anchor: middle; pointer-events: none; opacity: .88; }
html[lang="he"] .wheel .seg .tl { font-family: "Heebo", sans-serif; font-weight: 800; letter-spacing: 0; }
.wheel .seg.on .tl, .wheel .seg:hover .tl { opacity: 1; }
.wheel__hub { inset: 28.8%; padding: 0 5%; opacity: 0; transform: scale(.6); transition: opacity .5s ease .55s, transform .7s cubic-bezier(.2,1.4,.3,1) .55s; }
.wheel.open .wheel__hub { opacity: 1; transform: none; }
.wheel__hub b { font-size: 1.45rem; }
html[lang="he"] .wheel__hub b { font-family: "Secular One", sans-serif; }
.wheel__hub small { text-transform: none; letter-spacing: 0; color: inherit; }
.hub__d { display: block; margin-top: 8px; font: 500 .9rem/1.3 var(--ui); color: #e5ddd7; }
html[lang="he"] .hub__d { font-family: "Heebo", sans-serif; font-size: .86rem; }
.hub__n { display: block; margin-top: 8px; font: 600 .7rem/1 var(--ui); letter-spacing: .2em; text-transform: uppercase; color: var(--red-hot); }

@media (max-width: 760px) {
  .tag { padding: 16px 30px 20px; }
  .hero__ctas .tag, .close__ctas .tag { width: calc(100% - 30px); }
  .tag__txt b { font-size: 1.5rem; }
  .tag--sm .lbl, .tag--sm .ip { display: none; }
  .tag--sm.bar__join .lbl { display: inline; }
  .tag--sm { padding: 7px 12px 9px; }
  .hero__logo { width: 72px; }
  .lang { min-width: 36px; padding: 0 6px; }
}

/* intro controls above the film */
.ign__film { z-index: 0; }
.ign__snd, .ign__skip { z-index: 5; }