/* ============================================================
   duel-proto.css · אב-טיפוס "קרב בפאנלים": מסך מפוצל באלכסון, כל צד בצבעים של הגיבור שלו
   מסך רחב: היריב משמאל, אני מימין. טלפון לאורך: היריב למעלה, אני למטה (קרוב לאגודל)
   ============================================================ */
.dp-body { margin: 0; background: #0a0b22; overflow: hidden; }
.dp { --me: #2b2f66; --foe: #2b2f66; --cut: 36%; --ctaH: 84px; position: fixed; inset: 0; overflow: hidden; color: var(--text); background: var(--ink); font-family: var(--f-text); }
.dp[data-screen="title"] { --cut: 50%; }
.dp[data-screen="vs"], .dp[data-screen="battle"] { --cut: 50%; }
.dp :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.dp button { font-family: inherit; }
.dp kbd { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 5px; border: 1.5px solid currentColor; font: 800 .68rem var(--f-text); direction: ltr; opacity: .8; }
@media (hover: none) { .dp kbd { display: none; } }

/* ---------- שני החצאים ---------- */
.half { position: absolute; inset: 0; overflow: hidden; background: color-mix(in oklab, var(--c) 62%, #0c1030); transition: clip-path .95s var(--spring), background-color .6s var(--ease); }
.half--foe { --c: var(--foe); clip-path: polygon(0 0, calc(var(--cut) + 3%) 0, calc(var(--cut) - 3%) 100%, 0 100%); }
.half--me { --c: var(--me); clip-path: polygon(calc(var(--cut) + 3% + 10px) 0, 100% 0, 100% 100%, calc(var(--cut) - 3% + 10px) 100%); }
.half img { position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover; filter: blur(22px) saturate(1.45) brightness(.9); opacity: 0; transform: scale(1.15); transition: opacity .6s; }
.half.is-on img { opacity: .62; }
.half::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(rgba(10, 11, 34, .32) 1.3px, transparent 1.8px) 0 0 / 9px 9px; }
.half::after { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(80% 70% at 50% 45%, transparent 30%, rgba(8, 6, 26, .62)); }
.half--me::after { background: radial-gradient(80% 70% at 50% 45%, transparent 30%, rgba(8, 6, 26, .55)), repeating-conic-gradient(from 0deg at 70% 50%, rgba(255, 255, 255, .07) 0 6deg, transparent 6deg 14deg); }
.half.is-flood img { animation: flood 1.1s var(--ease) both; }
.half.is-flood { animation: flood-c .9s var(--ease); }
@keyframes flood { from { opacity: 0; transform: scale(1.9) rotate(-6deg); } }
@keyframes flood-c { from { filter: brightness(2.2) saturate(.4); } }
.seam { position: absolute; inset: 0; pointer-events: none; z-index: 2; background: linear-gradient(transparent, transparent); }

.layer { position: absolute; inset: 0; z-index: 3; }
.top { position: absolute; top: 0; inset-inline: 0; z-index: 6; display: flex; justify-content: space-between; align-items: center; padding: max(12px, env(safe-area-inset-top)) 18px 0; pointer-events: none; }
.top > * { pointer-events: auto; }
.logo { margin: 0; font: 900 clamp(1.3rem, 1rem + 1.2vw, 2rem)/1 var(--f-brand); color: #fff; -webkit-text-stroke: .05em var(--ink); paint-order: stroke fill; text-shadow: .06em .07em 0 var(--ink); transform: rotate(-2deg); }
.logo b { color: var(--gold); }
.howto { min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--paper); color: var(--ink); border: 2.5px solid var(--ink); box-shadow: 2px 3px 0 var(--ink); font: 900 .95rem var(--f-brand); cursor: pointer; transition: transform .4s var(--spring); }
.howto:hover { transform: translateY(-2px) rotate(-2deg); }

/* ---------- אזורי התוכן של כל צד ---------- */
.side { position: absolute; top: 70px; bottom: var(--ctaH); display: grid; place-items: center; padding: 10px 2vw; transition: inset .9s var(--spring), width .9s var(--spring); }
.side--foe { left: 0; width: calc(var(--cut) - 5%); }
.side--me { right: 0; width: calc(100% - var(--cut) - 5%); }
.cta { position: absolute; bottom: 0; inset-inline: 0; z-index: 6; height: var(--ctaH); display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; padding: 0 12px max(10px, env(safe-area-inset-bottom)); }
.dp-go { background: #ff5a5a; color: #fff; text-shadow: 1px 1px 0 var(--ink); font-size: 1.15rem; min-height: 52px; padding-inline: 26px; }
.cta .btn--ghost { background: rgba(10, 11, 34, .55); }

/* ---------- בלוק גיבור ---------- */
.hero { display: grid; grid-template-columns: auto minmax(0, 380px); gap: clamp(16px, 2.6vw, 40px); align-items: center; max-width: 100%; }
.hero__card { position: relative; height: min(64vh, 560px); aspect-ratio: 2 / 3; border-radius: 14px; border: 4px solid var(--ink); box-shadow: 0 0 0 4px color-mix(in oklab, var(--c, var(--me)) 80%, #fff), 10px 12px 0 4px var(--ink); transform: rotate(-2.5deg); background: #0c1030; }
.side--foe .hero__card { transform: rotate(2.5deg); }
.hero__card img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; display: block; }
.hero__info { display: grid; gap: 10px; justify-items: start; min-width: 0; }
.hero__kick { margin: 0; padding: 3px 10px; background: var(--ink); color: var(--gold); font: 900 .85rem var(--f-brand); transform: rotate(-2deg); }
.hero__name { margin: 0; font: 900 clamp(1.7rem, 1.2rem + 2vw, 3rem)/1 var(--f-brand); color: #fff; -webkit-text-stroke: .045em var(--ink); paint-order: stroke fill; text-shadow: .05em .06em 0 var(--ink); overflow-wrap: anywhere; }
.sig { display: grid; gap: 2px; padding: 10px 14px; border-radius: 14px; background: var(--paper); color: var(--paper-ink); border: 3px solid var(--ink); box-shadow: 4px 5px 0 var(--ink); max-width: 100%; }
.sig span { font: 800 .76rem var(--f-brand); color: #b07800; }
.sig b { font: 900 clamp(1.2rem, 1rem + .8vw, 1.6rem)/1.1 var(--f-brand); }
.sig q { font: 600 .92rem/1.4 var(--f-text); quotes: "״" "״"; color: #4a3f7a; }
.bars { display: grid; gap: 6px; width: min(340px, 100%); }
.bar { display: grid; grid-template-columns: 26px 74px 1fr; align-items: center; gap: 6px; font: 800 .86rem var(--f-brand); }
.bar .ic { width: 26px; height: 26px; }
.bar i { height: 14px; border-radius: 4px; border: 2px solid var(--ink); background: rgba(10, 11, 34, .45); position: relative; overflow: hidden; }
.bar i::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: calc(var(--v) * 100%); background: var(--bc); transform-origin: right; animation: grow .9s var(--spring) both; }
.bar i::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), rgba(10, 11, 34, .7) calc(10% - 2px) 10%); }
.bar--atk { --bc: #ff6b5b; } .bar--trk { --bc: #b48cf0; } .bar--sup { --bc: var(--gold); }
.bar:nth-child(2) i::before { animation-delay: .08s; } .bar:nth-child(3) i::before { animation-delay: .16s; }
@keyframes grow { from { transform: scaleX(0); } }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tg { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 10px; border-radius: 999px; background: rgba(10, 11, 34, .6); color: #fff; border: 2px solid rgba(255, 255, 255, .35); font: 800 .82rem var(--f-brand); cursor: pointer; transition: transform .35s var(--spring), background .2s; }
.tg .ic { width: 16px; height: 16px; }
.tg:hover { transform: translateY(-2px); background: rgba(10, 11, 34, .85); }
.tg--fam { background: var(--gold); color: var(--ink); border-color: var(--ink); }
.tg--hp { cursor: default; }
.tg::after { content: "?"; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: rgba(255, 255, 255, .2); font-size: .66rem; }
.tg--hp::after { display: none; }
.hero--compact .hero__card { height: min(46vh, 420px); }
.hero--compact .hero__info { gap: 8px; }
.hero--compact .hero__name { font-size: clamp(1.4rem, 1rem + 1.5vw, 2.3rem); }
.hero.is-land .hero__card { animation: land 1s var(--spring) both; }
.hero.is-land .hero__info > * { animation: slide-in .7s var(--spring) both; }
.hero.is-land .hero__info > :nth-child(2) { animation-delay: .08s; } .hero.is-land .hero__info > :nth-child(3) { animation-delay: .14s; } .hero.is-land .hero__info > :nth-child(4) { animation-delay: .2s; } .hero.is-land .hero__info > :nth-child(5) { animation-delay: .26s; }
@keyframes land { 0% { transform: translateY(-70vh) rotate(-24deg) scale(1.3); } 55% { transform: translateY(14px) rotate(3deg) scale(.96); } 100% { transform: rotate(-2.5deg); } }
@keyframes slide-in { from { opacity: 0; transform: translateX(-40px); } }
.empty { display: grid; justify-items: center; gap: 10px; padding: 18px; background: none; border: 0; color: #fff; cursor: pointer; }
.empty__card { display: grid; place-items: center; height: min(46vh, 380px); aspect-ratio: 2 / 3; border-radius: 16px; border: 4px dashed rgba(255, 255, 255, .55); font: 900 6rem var(--f-brand); color: rgba(255, 255, 255, .7); background: rgba(10, 11, 34, .35); transition: transform .5s var(--spring), border-color .2s; animation: bob 3s var(--ease-in-out) infinite; }
.empty:hover .empty__card { transform: rotate(-3deg) scale(1.03); border-color: var(--gold); }
.empty b { font: 900 clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem) var(--f-brand); -webkit-text-stroke: .04em var(--ink); paint-order: stroke fill; text-shadow: .05em .06em 0 var(--ink); }
.empty small { font: 700 .9rem var(--f-text); color: var(--muted); }
@keyframes bob { 50% { transform: translateY(-8px) rotate(1deg); } }
.foe-wait { display: grid; justify-items: center; gap: 6px; opacity: .8; }
.foe-wait span { font: 900 clamp(4rem, 3rem + 5vw, 9rem)/1 var(--f-brand); color: rgba(255, 255, 255, .3); -webkit-text-stroke: .03em var(--ink); }
.foe-wait p { margin: 0; font: 800 1rem var(--f-brand); color: var(--muted); }

/* ---------- סוג יריב ---------- */
.opp { display: grid; gap: 12px; width: min(460px, 100%); }
.opp__title { margin: 0 0 4px; font: 900 clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem)/1 var(--f-brand); color: #fff; -webkit-text-stroke: .045em var(--ink); paint-order: stroke fill; text-shadow: .05em .06em 0 var(--ink); text-align: center; }
.opp__tile { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: start; padding: 14px 16px; border-radius: 18px; background: var(--paper); color: var(--paper-ink); border: 4px solid var(--ink); box-shadow: 6px 7px 0 var(--ink); cursor: pointer; transition: transform .45s var(--spring), box-shadow .2s; animation: tile-in .7s var(--spring) both; }
.opp__tile:nth-of-type(2) { animation-delay: .08s; } .opp__tile:nth-of-type(3) { animation-delay: .16s; }
.opp__tile:hover { transform: translate(-3px, -3px) rotate(-1deg); box-shadow: 9px 10px 0 var(--ink); }
.opp__ic { grid-row: span 2; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: var(--gold); border: 3px solid var(--ink); font-size: 1.7rem; }
.opp__tile b { font: 900 1.35rem/1.1 var(--f-brand); }
.opp__tile small { font: 600 .86rem/1.35 var(--f-text); color: #4a3f7a; }
@keyframes tile-in { from { opacity: 0; transform: translateX(-60px) rotate(-6deg); } }
.lvl { display: flex; gap: 6px; align-items: center; justify-content: center; margin-top: -4px; font: 800 .85rem var(--f-brand); }
.lvl button { min-height: 34px; padding: 0 14px; border-radius: 999px; background: rgba(10, 11, 34, .55); color: #fff; border: 2px solid rgba(255, 255, 255, .4); font: 800 .85rem var(--f-brand); cursor: pointer; }
.lvl button[aria-pressed="true"] { background: var(--gold); color: var(--ink); border-color: var(--ink); }
.vs-badge { position: absolute; z-index: 5; left: var(--cut); top: 46%; translate: -50% -50%; font: 900 clamp(3rem, 2rem + 4vw, 6rem)/1 var(--f-brand); color: var(--gold); -webkit-text-stroke: .05em var(--ink); paint-order: stroke fill; text-shadow: .06em .07em 0 var(--ink); direction: ltr; animation: vs-in .8s var(--spring) .2s both; pointer-events: none; }
@keyframes vs-in { from { transform: scale(0) rotate(-40deg); } }
.link-note { position: absolute; z-index: 6; bottom: calc(var(--ctaH) + 4px); inset-inline: 0; margin: 0 auto; width: fit-content; max-width: 92vw; padding: 6px 14px; border-radius: 999px; background: var(--ink); color: var(--gold); font: 800 .9rem var(--f-brand); text-align: center; }

/* ---------- מגירת הקלפים ---------- */
.psheet { position: fixed; inset: 0; z-index: 40; }
.psheet__scrim { position: absolute; inset: 0; background: rgba(6, 5, 20, .6); opacity: 0; transition: opacity .3s; }
.psheet__panel { position: absolute; bottom: 0; left: 50%; width: min(1120px, 100%); height: min(80vh, 760px); translate: -50% 0; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); border-radius: 26px 26px 0 0; background: #141a50; border: 4px solid var(--ink); border-bottom: 0; box-shadow: 0 -10px 0 rgba(10, 11, 34, .4); transform: translateY(105%); transition: transform .6s var(--spring); }
.psheet.is-open .psheet__panel { transform: none; }
.psheet.is-open .psheet__scrim { opacity: 1; }
.psheet__grab { width: 56px; height: 6px; margin: 10px auto 0; border-radius: 3px; background: rgba(255, 255, 255, .3); }
.psheet__head { display: flex; justify-content: space-between; align-items: center; padding: 6px 18px 0; }
.psheet__head b { font: 900 1.5rem var(--f-brand); color: var(--gold); }
.psheet__x { width: 44px; height: 44px; border-radius: 50%; background: var(--paper); color: var(--ink); border: 2.5px solid var(--ink); font: 900 1.5rem/1 var(--f-text); cursor: pointer; }
.psheet__tools { display: flex; gap: 8px; padding: 10px 18px; }
.psheet__q { flex: 1; }
.psheet__q input { width: 100%; min-height: 46px; padding: 0 16px; border-radius: 999px; border: 2.5px solid var(--ink); background: var(--paper); color: var(--paper-ink); font: 700 1rem var(--f-brand); }
.psheet__grid { list-style: none; margin: 0; padding: 4px 18px max(18px, env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 12px; align-content: start; }
.psheet__grid button { display: grid; gap: 3px; width: 100%; padding: 5px; border-radius: 14px; background: color-mix(in oklab, var(--a) 30%, #141a50); color: #fff; border: 2.5px solid transparent; cursor: pointer; text-align: center; transition: transform .4s var(--spring), border-color .2s; }
.psheet__grid button:hover:not([disabled]) { transform: translateY(-4px) rotate(-1.5deg); border-color: var(--a); }
.psheet__grid button[aria-pressed="true"] { border-color: var(--gold); }
.psheet__grid button[disabled] { opacity: .35; cursor: not-allowed; }
.psheet__grid img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 10px; border: 2.5px solid var(--ink); }
.psheet__grid span { font: 900 .8rem/1.1 var(--f-brand); overflow-wrap: break-word; }
.psheet__grid span.is-long { font-size: .64rem; letter-spacing: -.01em; }
.psheet__grid small { font: 700 .68rem/1.15 var(--f-text); color: var(--gold); }
.psheet__none { grid-column: 1 / -1; text-align: center; padding: 30px; color: var(--muted); }

/* ---------- הסבר בלחיצה ---------- */
.pop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(6, 5, 20, .5); }
.pop[hidden] { display: none; }
.pop__card { position: relative; width: min(420px, 100%); display: grid; gap: 10px; padding: 22px 20px 18px; border-radius: 18px; background: var(--paper); color: var(--paper-ink); border: 4px solid var(--ink); box-shadow: var(--hard-lg); animation: pop-in .5s var(--spring) both; }
.pop__card h3 { margin: 0; font: 900 1.4rem var(--f-brand); }
.pop__card p, .pop__card li { margin: 0; font: 500 1rem/1.55 var(--f-text); }
.pop__card ul { margin: 0; padding-inline-start: 20px; display: grid; gap: 4px; }
.pop__x { position: absolute; top: 8px; inset-inline-end: 8px; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--ink); background: #fff; font: 900 1.2rem/1 var(--f-text); cursor: pointer; }
.mini-tri { justify-self: center; width: 130px; color: var(--ink); }
@keyframes pop-in { from { opacity: 0; transform: scale(.7) rotate(-3deg); } }

/* ============================================================
   הקרב
   ============================================================ */
.bt { position: absolute; inset: 0; --movesH: 150px; }
.hud { position: absolute; top: 12px; z-index: 6; width: calc(var(--cut) - 9%); display: grid; gap: 5px; padding: 8px 12px; border-radius: 16px; background: rgba(10, 11, 34, .72); border: 3px solid var(--ink); box-shadow: 4px 5px 0 var(--ink); backdrop-filter: blur(4px); }
.hud--foe { left: 2%; } .hud--me { right: 2%; width: calc(100% - var(--cut) - 9%); }
.hud__row { display: flex; gap: 8px; align-items: center; justify-content: space-between; min-width: 0; flex-wrap: wrap; }
.hud__name { font: 900 clamp(1rem, .85rem + .8vw, 1.5rem)/1.05 var(--f-brand); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.hud__who { font: 800 .76rem var(--f-brand); color: var(--gold); }
.hp { position: relative; height: 22px; border-radius: 999px; background: rgba(0, 0, 0, .5); border: 2.5px solid var(--ink); overflow: hidden; }
.hp i { position: absolute; inset-block: 0; inset-inline-start: 0; width: calc(var(--p, 1) * 100%); background: linear-gradient(180deg, #8af0a8, #36b864); transition: width .7s var(--spring); }
.hp.is-low i { background: linear-gradient(180deg, #ff9b8a, #e0402c); }
.hp span { position: relative; display: block; text-align: center; font: 800 .76rem/17px var(--f-text); color: #fff; text-shadow: 1px 1px 0 var(--ink); }
.en { display: flex; gap: 4px; }
.en i { width: 14px; height: 14px; border-radius: 3px; transform: rotate(45deg); background: rgba(255, 255, 255, .14); border: 2px solid var(--ink); transition: background .3s, transform .5s var(--spring); }
.en i.on { background: var(--gold); transform: rotate(45deg) scale(1.1); }
.en i.hf { background: linear-gradient(135deg, var(--gold) 50%, rgba(255, 255, 255, .14) 50%); }
.abil { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.ab { min-height: 26px; padding: 0 9px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; border: 1.5px solid rgba(255, 255, 255, .3); font: 800 .72rem var(--f-brand); cursor: pointer; white-space: nowrap; }
.ab:first-child { background: var(--gold); color: var(--ink); border-color: var(--ink); }
.ab.is-used { opacity: .45; text-decoration: line-through; }
.ab.is-armed { background: #6df09a; color: var(--ink); border-color: var(--ink); animation: pulse .7s var(--ease) infinite alternate; }
.fc { position: absolute; z-index: 4; top: 130px; height: min(calc(100% - 130px - var(--movesH) - 40px), 520px); aspect-ratio: 2 / 3; translate: -50% 0; border-radius: 12px; border: 4px solid var(--ink); box-shadow: 0 0 0 4px color-mix(in oklab, var(--c) 80%, #fff), 9px 11px 0 4px var(--ink); background: #0c1030; transition: box-shadow .3s; }
.fc img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; display: block; }
.fc--foe { --c: var(--foe); left: calc(var(--cut) / 2); rotate: 2.5deg; animation: in-foe .9s var(--spring) both; }
.fc--me { --c: var(--me); left: calc(var(--cut) + (100% - var(--cut)) / 2); rotate: -2.5deg; animation: in-me .9s var(--spring) .08s both; }
@keyframes in-foe { from { transform: translateX(-70vw) rotate(-20deg); } }
@keyframes in-me { from { transform: translateX(70vw) rotate(20deg); } }
.fc.is-lunge { animation: lunge-me .62s var(--spring); }
.fc--foe.is-lunge { animation-name: lunge-foe; }
.fc.is-hit { animation: hit .55s var(--ease) .15s; }
@keyframes lunge-me { 20% { transform: translateX(6%) scale(.96); } 45% { transform: translateX(-30%) scale(1.08) rotate(-5deg); } }
@keyframes lunge-foe { 20% { transform: translateX(-6%) scale(.96); } 45% { transform: translateX(30%) scale(1.08) rotate(5deg); } }
@keyframes hit { 15% { transform: translateX(10px) rotate(4deg); filter: brightness(2.2) saturate(0); } 35% { transform: translateX(-8px) rotate(-3deg); filter: none; } 60% { transform: translateX(5px); } 85% { transform: translateX(-2px); } }
.fc[data-fx="fire"] { box-shadow: 0 0 0 6px #ff7a2c, 0 0 50px 10px #ff7a2c; } .fc[data-fx="water"], .fc[data-fx="time"] { box-shadow: 0 0 0 6px #4fd1ff, 0 0 50px 10px #4fd1ff; }
.fc[data-fx="sound"], .fc[data-fx="mind"] { box-shadow: 0 0 0 6px #c58cff, 0 0 50px 10px #c58cff; } .fc[data-fx="nature"] { box-shadow: 0 0 0 6px #5fd38d, 0 0 50px 10px #5fd38d; }
.fc[data-fx="shadow"] { box-shadow: 0 0 0 6px #2a1846, 0 0 60px 14px #000; } .fc[data-fx] { box-shadow: 0 0 0 6px #fff3a0, 0 0 50px 10px #fff3a0; }
.fc__float { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; pointer-events: none; }
.num { grid-area: 1 / 1; font: 900 clamp(2.4rem, 1.6rem + 3vw, 4.4rem)/1 'Rubik', system-ui, sans-serif; color: #ff5a5a; -webkit-text-stroke: .06em var(--ink); paint-order: stroke fill; text-shadow: .05em .06em 0 var(--ink); animation: float 1.3s var(--ease) forwards; }
.num--big { color: var(--gold); font-size: clamp(3rem, 2rem + 4vw, 5.6rem); }
.num--heal { color: #6df09a; } .num--burn { color: #ff9b4a; }
.num--info { font-size: clamp(1.1rem, .9rem + 1vw, 1.7rem); color: #fff; margin-top: 40%; }
@keyframes float { 0% { opacity: 0; transform: translateY(24px) scale(.4); } 20% { opacity: 1; transform: translateY(0) scale(1.2); } 35% { transform: scale(1); } 100% { opacity: 0; transform: translateY(-80px) scale(.9); } }
.fc__balloon { position: absolute; z-index: 6; top: 4%; left: 50%; translate: -50% 0; width: max-content; max-width: min(340px, 72vw); padding: 12px 16px; border-radius: 18px; background: #fff; color: var(--ink); border: 3px solid var(--ink); box-shadow: 4px 5px 0 var(--ink); font: 800 clamp(.82rem, .72rem + .4vw, 1.05rem)/1.4 var(--f-brand); text-align: center; text-wrap: balance; overflow: visible; transform: scale(.3); opacity: 0; }
.fc__balloon::after { content: ""; position: absolute; bottom: -15px; left: 50%; width: 20px; height: 16px; background: #fff; border-inline-end: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: translateX(-50%) skewX(-22deg) rotate(28deg); border-radius: 0 0 3px 0; }
.fc__balloon.is-in { transform: none; opacity: 1; transition: transform .5s var(--spring), opacity .15s; }

/* מרכז הזירה: האייקונים נטרקים, פסק הדין */
.stage { position: absolute; z-index: 7; left: 50%; top: 40%; translate: -50% -50%; width: min(620px, 92vw); display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "foe arrow me" "v v v"; align-items: center; justify-items: center; gap: 6px 4px; pointer-events: none; direction: ltr; }
.chip { display: grid; justify-items: center; gap: 2px; padding: 10px 14px; border-radius: 16px; background: var(--paper); color: var(--ink); border: 4px solid var(--ink); box-shadow: 5px 6px 0 var(--ink); opacity: 0; direction: rtl; min-width: 120px; max-width: 220px; text-align: center; }
.chip .ic { width: 64px; height: 64px; }
.chip b { font: 900 clamp(1rem, .85rem + .8vw, 1.45rem)/1.1 var(--f-brand); }
.chip--me { grid-area: me; } .chip--foe { grid-area: foe; }
.stage.is-slam .chip--me { animation: slam-me .6s var(--spring) forwards; }
.stage.is-slam .chip--foe { animation: slam-foe .6s var(--spring) forwards; }
@keyframes slam-me { 0% { opacity: 0; transform: translateX(60vw) rotate(30deg) scale(.5); } 60% { opacity: 1; transform: translateX(-10px) rotate(-6deg) scale(1.12); } 100% { opacity: 1; transform: rotate(-4deg); } }
@keyframes slam-foe { 0% { opacity: 0; transform: translateX(-60vw) rotate(-30deg) scale(.5); } 60% { opacity: 1; transform: translateX(10px) rotate(6deg) scale(1.12); } 100% { opacity: 1; transform: rotate(4deg); } }
.chip.is-changed { animation: none !important; opacity: 1; transform: rotate(-4deg); outline: 4px dashed #ff5a5a; }
.arrow { grid-area: arrow; width: 90px; height: 34px; opacity: 0; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.arrow path { stroke: var(--gold); stroke-width: 9; filter: drop-shadow(2px 2px 0 var(--ink)); }
.stage.win-a .arrow { opacity: 1; transform: scaleX(-1); animation: arrow-l .5s var(--spring); }
.stage.win-b .arrow { opacity: 1; animation: arrow-r .5s var(--spring); }
@keyframes arrow-l { from { transform: scaleX(-.2); opacity: 0; } }
@keyframes arrow-r { from { transform: scaleX(.2); opacity: 0; } }
.stage.win-a .chip--me, .stage.win-b .chip--foe { animation: none; opacity: 1; transform: scale(1.14) rotate(-3deg); background: var(--gold); transition: transform .5s var(--spring); }
.stage.win-a .chip--foe, .stage.win-b .chip--me { animation: none; opacity: 1; transform: scale(.84) rotate(12deg) translateY(12px); filter: grayscale(.7) brightness(.85); transition: transform .5s var(--spring), filter .3s; }
.stage.tie .chip { animation: none; opacity: 1; transform: scale(1.02); }
.verdict { grid-area: v; direction: rtl; display: grid; gap: 2px; justify-items: center; max-width: 100%; padding: 12px 20px; background: #fff; color: var(--ink); border: 4px solid var(--ink); box-shadow: 6px 7px 0 var(--ink); text-align: center; transform: rotate(-1.5deg); animation: verdict-in .6s var(--spring) both; }
.verdict b { font: 900 clamp(1.2rem, .9rem + 1.6vw, 2.2rem)/1.15 var(--f-brand); }
.verdict small { font: 800 .9rem var(--f-brand); color: #d8402c; }
.stage.win-a .verdict, .stage.win-b .verdict { background: var(--gold); }
@keyframes verdict-in { 0% { opacity: 0; transform: scale(.3) rotate(-12deg); } 60% { opacity: 1; transform: scale(1.08) rotate(1deg); } 100% { transform: rotate(-1.5deg); } }
.stage.is-out { opacity: 0; transform: scale(.9); transition: opacity .25s, transform .25s var(--ease); }
.boom { position: absolute; z-index: 8; top: 45%; translate: -50% -50%; padding: 16px 24px; background: var(--gold); color: var(--ink); font: 900 clamp(1.5rem, 1rem + 2.6vw, 3.2rem)/1 var(--f-brand); white-space: nowrap; clip-path: polygon(0% 18%, 9% 0%, 20% 14%, 32% 0%, 45% 12%, 58% 0%, 70% 13%, 83% 0%, 92% 16%, 100% 8%, 96% 38%, 100% 62%, 94% 84%, 100% 100%, 80% 90%, 66% 100%, 52% 88%, 38% 100%, 26% 88%, 12% 100%, 6% 82%, 0% 66%, 4% 42%); pointer-events: none; opacity: 0; }
.boom:empty { display: none; }
.boom--me { left: 75%; } .boom--foe { left: 25%; }
.boom.is-in { animation: boom 1s var(--spring) forwards; }
.boom.is-big { background: #ff5a5a; color: #fff; text-shadow: 2px 2px 0 var(--ink); }
@keyframes boom { 0% { opacity: 0; transform: scale(0) rotate(-24deg); } 30% { opacity: 1; transform: scale(1.2) rotate(-6deg); } 50% { transform: scale(1) rotate(-8deg); } 82% { opacity: 1; } 100% { opacity: 0; transform: scale(.8) rotate(-4deg); } }
.bt.is-shake { animation: shake .45s var(--ease); }
.bt.is-shake-big { animation: shake-big .6s var(--ease); }
@keyframes shake { 20% { transform: translate(6px, -3px); } 40% { transform: translate(-5px, 3px); } 60% { transform: translate(3px, 2px); } 80% { transform: translate(-2px, -1px); } }
@keyframes shake-big { 10% { transform: translate(12px, -6px) rotate(.6deg); } 25% { transform: translate(-11px, 5px) rotate(-.6deg); } 45% { transform: translate(7px, 4px); } 65% { transform: translate(-4px, -3px); } 85% { transform: translate(2px, 1px); } }

/* משולש בפינה */
.tri-wrap { position: absolute; z-index: 6; left: 14px; bottom: calc(var(--movesH) + 18px); width: 104px; padding: 6px; border-radius: 18px; background: rgba(246, 238, 221, .92); border: 3px solid var(--ink); box-shadow: 3px 4px 0 var(--ink); color: var(--ink); cursor: pointer; }
.tri { display: block; width: 100%; height: auto; overflow: visible; }
.tri__e { stroke: currentColor; stroke-width: 4; fill: none; color: var(--ink); }
.tri__n circle { fill: #fff; stroke: var(--ink); stroke-width: 3; }
.tri__e.is-hot { stroke: #ff5a5a; stroke-width: 6; }
.tri__n.is-hot circle { fill: var(--gold); }
.tri-wrap.is-pulse { animation: tri-pulse .7s var(--spring); }
@keyframes tri-pulse { 40% { transform: scale(1.18) rotate(-4deg); } }
.bt__quit { position: absolute; z-index: 6; top: 14px; left: 50%; translate: -50% 0; min-height: 34px; padding: 0 12px; border-radius: 999px; background: rgba(10, 11, 34, .6); color: #fff; border: 2px solid rgba(255, 255, 255, .3); font: 800 .8rem var(--f-brand); cursor: pointer; }

/* כפתורי המהלכים */
.moves { position: absolute; z-index: 8; bottom: 0; left: 50%; translate: -50% 0; width: min(900px, 100%); padding: 8px 12px max(12px, env(safe-area-inset-bottom)); display: grid; gap: 6px; }
.mv__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mv { position: relative; display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 118px; padding: 10px 8px 8px; border-radius: 18px; border: 4px solid var(--ink); box-shadow: 5px 6px 0 var(--ink); color: #fff; cursor: pointer; text-align: center; transition: transform .45s var(--spring), box-shadow .2s, filter .2s; }
.mv--atk { background: #e0402c; } .mv--trk { background: #7a3fc4; } .mv--sup { background: var(--gold); color: var(--ink); }
.mv .mv__ic { width: 42px; height: 42px; margin-bottom: 2px; filter: drop-shadow(2px 2px 0 rgba(10, 11, 34, .4)); }
.mv b { font: 900 clamp(1.1rem, .95rem + .8vw, 1.55rem)/1.05 var(--f-brand); text-shadow: 1px 1px 0 var(--ink); overflow-wrap: anywhere; }
.mv--sup b { text-shadow: none; }
.mv__lbl { font: 900 .72rem var(--f-brand); padding: 1px 8px; border-radius: 999px; background: var(--ink); color: var(--gold); }
.mv__hint { font: 700 .74rem/1.3 var(--f-text); opacity: .95; }
.mv__cost { font: 800 .72rem var(--f-brand); padding: 1px 8px; border-radius: 999px; background: rgba(10, 11, 34, .2); }
.mv kbd { position: absolute; top: 7px; inset-inline-start: 8px; }
.mv:hover:not([disabled]) { transform: translateY(-5px) rotate(-1deg); box-shadow: 7px 10px 0 var(--ink); }
.mv:active:not([disabled]) { transform: translateY(2px); box-shadow: 1px 2px 0 var(--ink); }
.mv[disabled] { filter: grayscale(.9) brightness(.65); cursor: not-allowed; }
.mv.is-suggest { animation: suggest 1s var(--ease-in-out) infinite; }
@keyframes suggest { 50% { transform: translateY(-6px) scale(1.04); box-shadow: 0 0 0 6px #6df09a, 7px 10px 0 var(--ink); } }
.moves.is-live .mv { animation: mv-in .55s var(--spring) both; }
.moves.is-live .mv:nth-child(2) { animation-delay: .06s; } .moves.is-live .mv:nth-child(3) { animation-delay: .12s; }
.moves.is-live .mv.is-suggest { animation: mv-in .55s var(--spring) both, suggest 1s var(--ease-in-out) .6s infinite; }
@keyframes mv-in { from { opacity: 0; transform: translateY(60px) scale(.8); } }
.peek { margin: 0; text-align: center; font: 800 .95rem var(--f-brand); color: #fff; text-shadow: 1px 1px 0 var(--ink); }
.coach { position: absolute; z-index: 9; text-wrap: pretty; bottom: calc(var(--movesH) + 20px); left: 50%; translate: -50% 0; width: min(520px, 92vw); display: grid; gap: 6px; padding: 12px 16px; border-radius: 18px; background: #6df09a; color: var(--ink); border: 3.5px solid var(--ink); box-shadow: 5px 6px 0 var(--ink); font: 700 .98rem/1.45 var(--f-text); }
.coach[hidden] { display: none; }
.coach::after { content: ""; position: absolute; bottom: -15px; left: 50%; width: 22px; height: 18px; background: #6df09a; border-inline-end: 3.5px solid var(--ink); border-bottom: 3.5px solid var(--ink); transform: skewX(-25deg) rotate(25deg); }
.coach p { margin: 0; }
.coach__k { font: 900 .82rem var(--f-brand); }
.coach__x { justify-self: start; background: none; border: 0; padding: 0; font: 800 .8rem var(--f-brand); color: var(--ink); text-decoration: underline; cursor: pointer; }
.coach.is-in { animation: pop-in .5s var(--spring) both; }

/* שכבות: מסך פרטיות, חסימה, בינתיים, תוצאה */
.over { position: fixed; inset: 0; z-index: 30; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 16px; background: rgba(8, 6, 26, .62); overflow-y: auto; }
.over[hidden] { display: none; }
.cap { display: inline-block; margin: 0; padding: 6px 14px; background: var(--gold); color: var(--ink); border: 3px solid var(--ink); box-shadow: 3px 4px 0 var(--ink); font: 900 1.2rem var(--f-brand); transform: rotate(-2deg); }
.cap.is-ok { background: #6df09a; } .cap.is-miss { background: #ff6b5b; color: #fff; }
.hand, .event { width: min(520px, 100%); display: grid; gap: 14px; justify-items: center; text-align: center; padding: 26px 20px; border-radius: 20px; background: var(--paper); color: var(--paper-ink); border: 4px solid var(--ink); box-shadow: var(--hard-lg); animation: pop-in .55s var(--spring) both; }
.hand h3 { margin: 0; font: 900 clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem)/1.15 var(--f-brand); }
.hand h3 span { color: #d8402c; }
.hand p { margin: 0; }
.sw { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; width: 100%; }
.sw .mv { min-height: 90px; }
.event { background: #fff6b8; transform: rotate(-1.2deg); }
.event.is-big { background: #ffd25a; }
.event__cap { margin: 0; font: 900 1.4rem var(--f-brand); padding: 4px 14px; background: var(--ink); color: var(--gold); transform: rotate(-2deg); }
.event__t { margin: 0; font: 800 clamp(1.2rem, 1rem + 1vw, 1.7rem)/1.35 var(--f-brand); }
.qte { display: grid; gap: 34px; justify-items: center; }
.qte__btn { position: relative; display: grid; place-content: center; gap: 2px; width: min(62vw, 230px); aspect-ratio: 1; border-radius: 50%; background: #ff5a5a; color: #fff; border: 5px solid var(--ink); box-shadow: 6px 7px 0 var(--ink); text-shadow: 2px 2px 0 var(--ink); cursor: pointer; animation: pulse .5s var(--ease) infinite alternate; touch-action: manipulation; }
.qte__btn b { font: 900 clamp(1.8rem, 1.4rem + 2vw, 2.6rem)/1 var(--f-brand); }
.qte__btn small { font: 700 .8rem var(--f-text); }
.qte__ring { position: absolute; inset: -14px; border-radius: 50%; border: 6px solid var(--gold); animation: ring var(--win, 1.4s) cubic-bezier(.4, 0, .9, .6) forwards; }
@keyframes pulse { to { transform: scale(1.05); } }
@keyframes ring { from { transform: scale(1.35); opacity: 1; } to { transform: scale(.88); opacity: .3; } }
.over:has(> .res) { padding: 0; background: none; }
.res { position: relative; width: 100%; min-height: 100%; display: grid; grid-template-columns: auto minmax(0, 460px); gap: clamp(20px, 4vw, 60px); align-items: center; justify-content: center; padding: 30px 20px; background: color-mix(in oklab, var(--a) 60%, #0c1030); overflow: hidden; animation: res-in .8s var(--ease) both; }
.res__bg { position: absolute; inset: 0; z-index: 0; }
.res__bg img { position: absolute; inset: -10%; width: 120%; height: 120%; object-fit: cover; filter: blur(26px) saturate(1.5); opacity: .55; }
.res__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(10, 11, 34, .3) 1.3px, transparent 1.8px) 0 0 / 9px 9px, repeating-conic-gradient(from 0deg at 35% 50%, rgba(255, 255, 255, .1) 0 6deg, transparent 6deg 14deg); }
.res > * { position: relative; z-index: 1; }
.res__card { height: min(66vh, 600px); aspect-ratio: 2 / 3; border-radius: 14px; border: 5px solid var(--ink); box-shadow: 0 0 0 5px #fff, 12px 14px 0 5px var(--ink); animation: land 1s var(--spring) both; }
.res__card img { width: 100%; height: 100%; object-fit: cover; border-radius: 9px; display: block; }
.res__ko { position: absolute; top: 44%; left: 50%; translate: -50% 0; padding: 10px 18px; background: #ff5a5a; color: #fff; font: 900 2.2rem/1 var(--f-brand); text-shadow: 2px 2px 0 var(--ink); border: 3px solid var(--ink); transform: rotate(-8deg); direction: ltr; animation: pop-in .6s var(--spring) .5s both; }
.res__txt { display: grid; gap: 12px; justify-items: start; min-width: 0; }
.res__head { margin: 0; padding: 4px 14px; background: var(--ink); color: var(--gold); font: 900 1.3rem var(--f-brand); transform: rotate(-2deg); }
.res h2 { margin: 0; font: 900 clamp(2rem, 1.4rem + 3vw, 4rem)/1 var(--f-brand); color: #fff; -webkit-text-stroke: .045em var(--ink); paint-order: stroke fill; text-shadow: .05em .06em 0 var(--ink); overflow-wrap: anywhere; max-width: 100%; }
.res__quip { position: relative; margin: 0 0 6px; max-width: min(460px, 100%); padding: 12px 18px; border-radius: 18px; background: #fff; color: var(--ink); border: 3px solid var(--ink); box-shadow: 3px 4px 0 var(--ink); font: 800 1.05rem/1.45 var(--f-brand); text-wrap: balance; overflow: visible; }
.res__quip::after { content: ""; position: absolute; bottom: -14px; inset-inline-start: 26px; width: 20px; height: 16px; background: #fff; border-inline-end: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: skewX(-22deg) rotate(28deg); }
.res__stats, .res__lose { margin: 0; font: 700 .95rem/1.5 var(--f-text); color: #fff; text-shadow: 1px 1px 0 var(--ink); }
.res__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.res__acts .btn { white-space: normal; }
.res__share { width: 100%; display: grid; gap: 4px; }
.res__share input { width: 100%; min-height: 40px; padding: 0 10px; border-radius: 10px; border: 2px solid var(--ink); background: var(--paper); color: var(--paper-ink); font: 600 .85rem var(--f-text); }
.res__share p { margin: 0; font: 800 .9rem var(--f-brand); color: #6df09a; }
@keyframes res-in { from { clip-path: circle(0 at 50% 50%); } to { clip-path: circle(150% at 50% 50%); } }

/* ============================================================
   טלפון לאורך: היריב למעלה, אני למטה
   ============================================================ */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .dp { --cut: 30%; --ctaH: 78px; }
  .dp[data-screen="title"] { --cut: 50%; }
  .dp[data-screen="vs"] { --cut: 48%; }
  .dp[data-screen="battle"] { --cut: 41%; }
  .half--foe { clip-path: polygon(0 0, 100% 0, 100% calc(var(--cut) - 3%), 0 calc(var(--cut) + 3%)); }
  .half--me { clip-path: polygon(0 calc(var(--cut) + 3% + 8px), 100% calc(var(--cut) - 3% + 8px), 100% 100%, 0 100%); }
  .half--me::after { background: radial-gradient(90% 60% at 50% 70%, transparent 30%, rgba(8, 6, 26, .55)), repeating-conic-gradient(from 0deg at 50% 75%, rgba(255, 255, 255, .07) 0 6deg, transparent 6deg 14deg); }
  .top { padding-inline: 12px; }
  .side { left: 0; right: 0; width: auto; padding: 6px 12px; }
  .side--foe { top: 56px; bottom: auto; height: calc(var(--cut) - 56px - 3%); }
  .side--me { top: calc(var(--cut) + 3%); bottom: var(--ctaH); }
  .hero { grid-template-columns: 42% minmax(0, 1fr); gap: 12px; align-items: center; width: 100%; }
  .hero__card { height: auto; width: 100%; box-shadow: 0 0 0 3px color-mix(in oklab, var(--c, var(--me)) 80%, #fff), 6px 7px 0 3px var(--ink); }
  .hero__info { gap: 7px; }
  .hero__name { font-size: clamp(1.3rem, 1rem + 2vw, 1.8rem); }
  .sig { padding: 7px 10px; box-shadow: 3px 4px 0 var(--ink); }
  .sig b { font-size: 1.1rem; }
  .sig q { font-size: .8rem; }
  .bar { grid-template-columns: 20px 62px 1fr; font-size: .76rem; gap: 4px; }
  .bar .ic { width: 20px; height: 20px; }
  .bar i { height: 11px; }
  .tg { min-height: 28px; padding: 0 8px; font-size: .74rem; }
  .hero--compact { grid-template-columns: 34% minmax(0, 1fr); }
  .hero--compact .hero__card { height: auto; }
  .hero--compact .tags, .hero--compact .hero__kick { display: none; }
  .hero--compact .bars { gap: 3px; }
  .side--foe .hero { direction: ltr; } .side--foe .hero__info { direction: rtl; }
  .empty__card { height: min(30vh, 250px); font-size: 4rem; }
  .foe-wait span { font-size: 3.4rem; }
  .foe-wait p { font-size: .85rem; }
  .vs-badge { left: 50%; top: var(--cut); font-size: 3rem; }
  .opp { gap: 9px; }
  .opp__tile { padding: 10px 12px; grid-template-columns: 46px 1fr; box-shadow: 4px 5px 0 var(--ink); }
  .opp__ic { width: 46px; height: 46px; font-size: 1.4rem; }
  .opp__tile b { font-size: 1.15rem; }
  .opp__tile small { font-size: .78rem; }
  .cta .btn { padding-inline: 16px; }
  .dp-go { font-size: 1.05rem; }
  .psheet__panel { height: 84vh; }
  .psheet__grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; padding-inline: 12px; }
  .psheet__tools { padding-inline: 12px; }

  /* קרב בטלפון */
  .bt { --movesH: 124px; }
  .hud { top: 8px; left: 8px !important; right: 8px !important; width: auto !important; padding: 6px 10px; gap: 3px; box-shadow: 3px 4px 0 var(--ink); }
  .hud--me { top: calc(var(--cut) + 3% + 6px); }
  .hud__name { font-size: 1rem; }
  .hp { height: 18px; } .hp span { line-height: 13px; font-size: .7rem; }
  .en i { width: 11px; height: 11px; }
  .ab { min-height: 22px; font-size: .66rem; padding: 0 7px; }
  .fc { translate: none; rotate: 0deg; box-shadow: 0 0 0 3px color-mix(in oklab, var(--c) 80%, #fff), 6px 7px 0 3px var(--ink); }
  .fc--foe { left: 14px; top: 96px; height: calc(var(--cut) - 96px - 4%); rotate: 2deg; }
  .fc--me { left: auto; right: 14px; top: calc(var(--cut) + 3% + 92px); height: calc(100% - var(--cut) - 3% - 92px - var(--movesH) - 12px); rotate: -2deg; }
  .stage { top: calc(var(--cut) - 9%); width: 96vw; gap: 4px 2px; }
  .chip { min-width: 0; max-width: 150px; padding: 6px 8px; box-shadow: 3px 4px 0 var(--ink); }
  .chip .ic { width: 42px; height: 42px; }
  .chip b { font-size: .95rem; }
  .arrow { width: 56px; height: 26px; }
  .verdict { padding: 8px 12px; } .verdict b { font-size: 1.1rem; }
  .boom--foe { left: 32%; top: 24%; } .boom--me { left: 66%; top: 70%; }
  .tri-wrap { left: auto; right: 10px; bottom: auto; top: calc(var(--cut) - 52px); width: 74px; padding: 4px; z-index: 5; }
  .moves { padding: 6px 8px max(8px, env(safe-area-inset-bottom)); }
  .mv__row { gap: 6px; }
  .mv { min-height: 106px; padding: 6px 4px; border-width: 3px; box-shadow: 3px 4px 0 var(--ink); border-radius: 14px; }
  .mv .mv__ic { width: 30px; height: 30px; }
  .mv b { font-size: .98rem; }
  .mv__hint { font-size: .64rem; }
  .mv__lbl, .mv__cost { font-size: .62rem; }
  .coach { font-size: .84rem; padding: 9px 12px; bottom: auto; top: 88px; }
  .coach::after { display: none; }
  .bt__quit { top: auto; bottom: calc(var(--movesH) + 6px); left: 12px; translate: none; min-height: 28px; font-size: .72rem; }
  .res { grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; padding: 24px 16px; gap: 14px; }
  .res__card { height: auto; width: min(52vw, 230px); }
  .res__txt { justify-items: center; text-align: center; }
  .res__acts { justify-content: center; }
}


/* ---------- אתגר נכנס, חותמות, טבלת יריבות ---------- */
.chal { display: grid; gap: 8px; justify-items: center; width: min(460px, 100%); }
.chal__kick { margin: 0; padding: 4px 16px; background: #ff5a5a; color: #fff; border: 3px solid var(--ink); box-shadow: 3px 4px 0 var(--ink); font: 900 1.5rem var(--f-brand); transform: rotate(-3deg); animation: pop-in .6s var(--spring) both; }
.chal__row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; border-radius: 16px; background: rgba(10, 11, 34, .7); border: 3px solid var(--ink); }
.chal__row img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 8px; border: 3px solid var(--ink); }
.chal__row h2 { margin: 0; font: 900 1.5rem/1.05 var(--f-brand); color: #fff; overflow-wrap: anywhere; }
.chal__row p { margin: 4px 0 0; font: 600 .92rem/1.4 var(--f-text); }
.chal__score { font-size: 1.05rem !important; }
.tally { display: inline-flex; gap: 6px; align-items: baseline; padding: 3px 12px; border-radius: 999px; background: var(--ink); color: #fff; font: 900 1rem var(--f-brand); white-space: nowrap; }
.tally b { color: var(--gold); font-size: 1.25em; }
.res__tally { margin: 0; } .res__tally .tally { font-size: 1.3rem; padding: 6px 16px; box-shadow: 3px 4px 0 rgba(0, 0, 0, .4); }
.res__nick { display: grid; gap: 4px; font: 800 .85rem var(--f-brand); color: #fff; text-shadow: 1px 1px 0 var(--ink); }
.res__nick input { min-height: 40px; width: min(240px, 70vw); padding: 0 12px; border-radius: 10px; border: 2.5px solid var(--ink); background: var(--paper); color: var(--paper-ink); font: 800 1rem var(--f-brand); }
.stamp { position: absolute; z-index: 2; top: 8%; inset-inline-start: -8%; display: grid; place-items: center; width: 34%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe89a, #e0a400 60%, #a36f00); border: 4px solid var(--ink); box-shadow: 3px 4px 0 var(--ink), inset 0 0 0 4px rgba(255, 255, 255, .45); transform: rotate(-14deg); color: var(--ink); text-align: center; }
.stamp b { font: 900 clamp(.7rem, .5rem + .6vw, 1.05rem)/1 var(--f-brand); }
.stamp small { position: absolute; bottom: 14%; font: 900 .7rem var(--f-text); }
.stamp--new { animation: stamp-in .8s var(--spring) 1.1s both; }
@keyframes stamp-in { 0% { opacity: 0; transform: scale(3) rotate(-40deg); } 60% { opacity: 1; transform: scale(.9) rotate(-10deg); } 100% { transform: rotate(-14deg); } }
.psheet__grid button { position: relative; }
.gstamp { position: absolute; top: 2px; inset-inline-start: 2px; font-size: 1.5rem; font-style: normal; filter: drop-shadow(1px 2px 0 var(--ink)); }
.psheet__wins { margin: 2px 0 0; font: 800 .9rem var(--f-brand); color: #fff; }
.psheet__wins b { color: var(--gold); }

/* ---------- מתח לפני חשיפה, התנגשות, נוקאאוט ---------- */
.bt.is-tense .fc { animation: tense .16s var(--ease-in-out) infinite alternate; }
@keyframes tense { from { transform: translate(-2px, 1px) rotate(-.6deg); } to { transform: translate(2px, -1px) rotate(.6deg); } }
.tick { position: absolute; z-index: 7; left: 50%; top: 40%; translate: -50% -50%; display: flex; gap: 14px; opacity: 0; pointer-events: none; }
.tick i { width: 22px; height: 22px; border-radius: 50%; background: var(--gold); border: 3px solid var(--ink); }
.tick.is-on { opacity: 1; }
.tick.is-on i { animation: tick .26s var(--ease) infinite alternate; }
.tick.is-on i:nth-child(2) { animation-delay: .087s; } .tick.is-on i:nth-child(3) { animation-delay: .174s; }
@keyframes tick { from { transform: scale(.6); } to { transform: scale(1.25); background: #ff5a5a; } }
.stage.is-slam.is-collide .chip--me { animation: collide-me .7s var(--spring) forwards; }
.stage.is-slam.is-collide .chip--foe { animation: collide-foe .7s var(--spring) forwards; }
@keyframes collide-me { 0% { opacity: 0; transform: translateX(60vw) rotate(30deg) scale(.5); } 45% { opacity: 1; transform: translateX(-46%) rotate(-10deg) scale(1.2); } 62% { transform: translateX(14%) rotate(8deg) scale(.92); } 100% { opacity: 1; transform: rotate(-4deg); } }
@keyframes collide-foe { 0% { opacity: 0; transform: translateX(-60vw) rotate(-30deg) scale(.5); } 45% { opacity: 1; transform: translateX(46%) rotate(10deg) scale(1.2); } 62% { transform: translateX(-14%) rotate(-8deg) scale(.92); } 100% { opacity: 1; transform: rotate(4deg); } }
.boom--mid { left: 50%; top: 38%; }
.bt.is-ko .stage, .bt.is-ko .tri-wrap, .bt.is-ko .bt__quit, .bt.is-ko .coach { opacity: 0; transition: opacity .3s; }
.bt.ko-me .fc--foe, .bt.ko-foe .fc--me { animation: ko-fall 1.9s cubic-bezier(.55, 0, .75, .2) .2s forwards; z-index: 3; }
.bt.ko-me .fc--me, .bt.ko-foe .fc--foe { animation: ko-jump 1.2s var(--spring) .35s forwards; z-index: 5; }
@keyframes ko-fall { 0% { transform: none; } 18% { transform: translateY(-6%) rotate(-8deg) scale(1.04); } 100% { transform: translateY(130vh) rotate(540deg) scale(.7); } }
@keyframes ko-jump { 0% { transform: none; } 30% { transform: translateY(6%) scale(.94); } 100% { transform: translateY(-4%) scale(1.14); } }
.ko { position: absolute; z-index: 12; left: 50%; top: 42%; translate: -50% -50%; pointer-events: none; }
.ko b { display: block; padding: 18px 34px; background: #ff5a5a; color: #fff; font: 900 clamp(3.4rem, 2rem + 7vw, 8.5rem)/1 var(--f-brand); text-shadow: .05em .06em 0 var(--ink); -webkit-text-stroke: .03em var(--ink); border: 6px solid var(--ink); box-shadow: 10px 12px 0 var(--ink); direction: ltr; animation: ko-in .9s var(--spring) .7s both; }
@keyframes ko-in { 0% { opacity: 0; transform: scale(4) rotate(-30deg); } 55% { opacity: 1; transform: scale(.9) rotate(-6deg); } 100% { transform: rotate(-8deg); } }
@media (max-width: 760px), (max-aspect-ratio: 4/5) { .tick { top: calc(var(--cut) - 9%); } .boom--mid { top: calc(var(--cut) - 6%); } .chal__row { grid-template-columns: 80px minmax(0, 1fr); } .chal__row h2 { font-size: 1.2rem; } .chal__kick { font-size: 1.2rem; } }


/* ============================================================
   סבב 3: הסברים פשוטים, זנבות בלונים מצוירים, מסך ניצחון חגיגי
   ============================================================ */
/* זנב בלון מצויר (כמו בבלוני הסיפור בעמוד הקלפים): לבן, קו דיו בשני הצדדים בלבד, נכנס לקו התחתון של הבלון */
.dp { --tail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 34'%3E%3Cpath d='M4 0 C10 10 9 22 2 32 C16 26 26 16 30 0' fill='%23fff' stroke='%230a0b22' stroke-width='3.2' stroke-linejoin='round'/%3E%3Cpath d='M1 0h33v3H1z' fill='%23fff'/%3E%3C/svg%3E"); }
.fc__balloon::after, .hand__balloon::after, .res2__quip::after {
  content: ""; position: absolute; top: calc(100% - 3px); bottom: auto; inset-inline-end: 22%; inset-inline-start: auto; width: 34px; height: 30px;
  background: var(--tail) no-repeat center / contain; border: 0; border-radius: 0; transform: scaleX(-1); filter: drop-shadow(3px 3px 0 var(--ink));
}
.fc__balloon::after { inset-inline-end: calc(50% - 17px); }
.res2__quip::after { inset-inline-end: auto; inset-inline-start: 34px; transform: none; }
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .fc--foe .fc__balloon::after { inset-inline-start: auto; inset-inline-end: auto; left: 22px; right: auto; transform: scaleX(-1); }
  .fc--me .fc__balloon::after { inset-inline-start: auto; inset-inline-end: auto; left: auto; right: 22px; transform: none; }
}

/* כפתורי מהלך: אייקון גדול, שם, "מנצח את [אייקון]" */
.mv .mv__ic { width: 50px; height: 50px; }
.mv__beats { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px 2px 6px; border-radius: 999px; background: rgba(10, 11, 34, .28); font: 800 .8rem var(--f-brand); }
.mv--sup .mv__beats { background: rgba(10, 11, 34, .14); }
.mv__mini { width: 24px; height: 24px; }
.mv__cost.is-need { background: var(--ink); color: #fff; }
.mv__hint { display: none; }
/* פסק הדין: משפט קצר + משוואת אייקונים */
.verdict { gap: 4px; }
.verdict b, .coach p, .res2__quip, .rp p { text-wrap: balance; }
.eq { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; }
.eq__ic { width: 34px; height: 34px; }
.eq i { font: 900 1.5rem/1 'Rubik', system-ui, sans-serif; font-style: normal; }
/* טיפ של שורה אחת מעל כפתורי המהלכים */
.coach { top: auto; bottom: calc(var(--movesH) + 12px); width: min(640px, 94vw); display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 14px; font: 700 .95rem/1.35 var(--f-text); }
.coach::after { display: none !important; }
.coach p { margin: 0; flex: 1; }
.tip__k { display: inline-block; margin-inline-end: 4px; padding: 1px 8px; border-radius: 999px; background: var(--ink); color: #6df09a; font: 900 .78rem var(--f-brand); }
.tip__x { flex: none; min-height: 32px; padding: 0 4px; background: none; border: 0; color: var(--ink); font: 800 .78rem var(--f-brand); text-decoration: underline; cursor: pointer; }
.tri-wrap__q { position: absolute; top: -10px; inset-inline-start: -10px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--gold); color: var(--ink); border: 2.5px solid var(--ink); font: 900 1rem var(--f-brand); }
.howto { display: inline-flex; align-items: center; gap: 6px; }
.howto__q { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--gold); border: 2px solid var(--ink); font: 900 .9rem var(--f-brand); }
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .bt { --coachH: 64px; }
  .coach { bottom: calc(var(--movesH) + 6px) !important; font-size: .8rem; padding: 6px 10px; gap: 6px; }
  .mv .mv__ic { width: 34px; height: 34px; }
  .mv__beats { font-size: .66rem; padding: 1px 7px 1px 4px; gap: 3px; }
  .mv__mini { width: 18px; height: 18px; }
  .eq__ic { width: 26px; height: 26px; }
}

/* ---------- "איך מנצחים": קומיקס של 3 פאנלים ---------- */
.rules { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; }
.rules__scrim { position: absolute; inset: 0; background: rgba(6, 5, 20, .72); opacity: 0; transition: opacity .3s; }
.rules.is-in .rules__scrim { opacity: 1; }
.rules__box { position: relative; width: min(1080px, 100%); max-height: 100%; overflow-y: auto; display: grid; gap: 14px; justify-items: center; padding: 22px 18px 18px; border-radius: 22px; background: #141a50; border: 4px solid var(--ink); box-shadow: var(--hard-lg); transform: scale(.85) rotate(-2deg); opacity: 0; transition: transform .6s var(--spring), opacity .2s; }
.rules.is-in .rules__box { transform: none; opacity: 1; }
.rules.is-out .rules__box { transform: scale(.9); opacity: 0; transition-duration: .2s; }
.rules__title { margin: 0; font: 900 clamp(1.8rem, 1.3rem + 2vw, 2.8rem)/1 var(--f-brand); color: var(--gold); -webkit-text-stroke: .045em var(--ink); paint-order: stroke fill; text-shadow: .05em .06em 0 var(--ink); transform: rotate(-2deg); }
.rules__strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: 100%; padding: 8px 6px; }
.rp { position: relative; display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center; gap: 10px; padding: 20px 14px 16px; border-radius: 14px; background: radial-gradient(rgba(10, 11, 34, .12) 1.2px, transparent 1.6px) 0 0 / 8px 8px, var(--paper); color: var(--paper-ink); border: 4px solid var(--ink); box-shadow: 6px 7px 0 var(--ink); text-align: center; }
.rp--3 { grid-template-rows: auto auto auto; }
.rp:nth-child(1) { rotate: -1.2deg; } .rp:nth-child(3) { rotate: 1.2deg; }
.rules.is-in .rp { animation: rp-in .6s var(--spring) both; } .rules.is-in .rp:nth-child(2) { animation-delay: .1s; } .rules.is-in .rp:nth-child(3) { animation-delay: .2s; }
@keyframes rp-in { from { opacity: 0; transform: translateY(40px) rotate(-6deg) scale(.9); } }
.rp__n { position: absolute; top: -14px; inset-inline-start: -10px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--gold); border: 3px solid var(--ink); font: 900 1.3rem 'Rubik', sans-serif; }
.rp p { margin: 0; font: 900 clamp(1.2rem, 1rem + .8vw, 1.6rem)/1.2 var(--f-brand); }
.rp__art { display: grid; place-items: center; min-height: 150px; position: relative; }
.rp__fan { display: flex; gap: 2px; } .rp__fan .ic { width: 62px; height: 62px; }
.rp__fan .ic:nth-child(1) { transform: rotate(-12deg) translateY(8px); } .rp__fan .ic:nth-child(2) { transform: translateY(-10px) scale(1.15); } .rp__fan .ic:nth-child(3) { transform: rotate(12deg) translateY(8px); }
.rp__shh { position: absolute; top: 0; inset-inline-end: -4px; padding: 3px 10px; border-radius: 12px; background: var(--ink); color: #fff; font: 900 .85rem var(--f-brand); transform: rotate(6deg); }
.rp__clash { display: flex; align-items: center; } .rp__clash .ic { width: 70px; height: 70px; }
.rp__clash .ic:first-child { transform: rotate(10deg); } .rp__clash .ic:last-child { transform: rotate(-10deg); }
.rp__burst { width: 54px; height: 54px; margin-inline: -10px; background: #ff5a5a; clip-path: polygon(50% 0%, 61% 30%, 95% 18%, 72% 45%, 100% 62%, 66% 66%, 72% 100%, 50% 74%, 28% 100%, 34% 66%, 0% 62%, 28% 45%, 5% 18%, 39% 30%); }
.rp__art--tri { min-height: 0; }
.rp__art--tri .tri { width: 140px; }
.rp__rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; justify-items: start; text-align: start; }
.rp__rules li { display: flex; align-items: center; gap: 8px; font: 800 1rem/1.2 var(--f-brand); }
.rp__ic { width: 30px; height: 30px; flex: none; }
.rules__dots { display: none; gap: 8px; } .rules__dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .3); }
.rules__acts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; }
.rules__prev, .rules__next { display: none; }
.rules__tips { display: inline-flex; align-items: center; gap: 8px; color: #fff; font: 700 .9rem var(--f-text); }
.rules__tips input { width: 20px; height: 20px; accent-color: var(--gold); }
@media (max-width: 760px) {
  .rules { padding: 10px; }
  .rules__strip { grid-template-columns: minmax(0, 1fr); }
  .rules[data-step="1"] .rp:not([data-rp="1"]), .rules[data-step="2"] .rp:not([data-rp="2"]), .rules[data-step="3"] .rp:not([data-rp="3"]) { display: none; }
  .rules__dots { display: flex; }
  .rules[data-step="1"] .rules__dots i:nth-child(1), .rules[data-step="2"] .rules__dots i:nth-child(2), .rules[data-step="3"] .rules__dots i:nth-child(3) { background: var(--gold); }
  .rules__next { display: inline-flex; } .rules__go { display: none; }
  .rules[data-step="2"] .rules__prev, .rules[data-step="3"] .rules__prev { display: inline-flex; }
  .rules[data-step="3"] .rules__next { display: none; } .rules[data-step="3"] .rules__go { display: inline-flex; }
  .rp__art { min-height: 170px; }
}

/* ---------- מסך הניצחון ---------- */
.over:has(> .res2) { padding: 0; background: none; place-items: stretch; }
.res2 { position: relative; isolation: isolate; min-height: 100%; min-height: 100dvh; width: 100%; display: grid; place-items: center; padding: clamp(22px, 4vw, 48px) 16px; overflow: hidden; background: #0c1030; }
.res2__bg { position: absolute; inset: 0; z-index: -3; overflow: hidden; background: radial-gradient(75% 70% at 50% 42%, color-mix(in oklab, var(--a) 85%, #fff) 0%, color-mix(in oklab, var(--a) 55%, #0c1030) 55%, color-mix(in oklab, var(--a) 25%, #05040f) 100%); }
.res2__bg img { position: absolute; inset: -10%; width: 120%; height: 120%; object-fit: cover; filter: blur(30px) saturate(1.5); opacity: .5; transform: scale(1.1); }
.res2__rays { position: absolute; inset: -60%; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, .16) 0 6deg, transparent 6deg 15deg); animation: rays 50s linear infinite; }
.res2__dots { position: absolute; inset: 0; background: radial-gradient(rgba(10, 11, 34, .28) 1.3px, transparent 1.8px) 0 0 / 9px 9px, radial-gradient(80% 70% at 50% 45%, transparent 40%, rgba(5, 4, 15, .55)); }
@keyframes rays { to { transform: rotate(360deg); } }
.res2.is-loss .res2__bg { filter: saturate(.75) brightness(.9); }
.res2.is-loss .res2__rays { opacity: .55; }
.res2__fx { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.res2__wipe { position: absolute; inset: 0; z-index: 5; background: var(--a); pointer-events: none; animation: wipe .9s var(--ease) forwards; }
@keyframes wipe { 0% { clip-path: circle(0 at 50% 50%); opacity: 1; } 55% { clip-path: circle(150% at 50% 50%); opacity: 1; } 100% { clip-path: circle(150% at 50% 50%); opacity: 0; } }
.res2__in { position: relative; display: grid; grid-template-columns: auto minmax(0, 540px); gap: clamp(26px, 5vw, 80px); align-items: center; justify-content: center; width: min(1200px, 100%); }
.res2__card { position: relative; height: min(70vh, 640px); aspect-ratio: 2 / 3; }
.res2__spin { width: 100%; height: 100%; border-radius: 16px; border: 5px solid var(--ink); box-shadow: 0 0 0 5px #fff, 0 0 70px 22px color-mix(in oklab, var(--a) 70%, transparent), 14px 16px 0 5px var(--ink); animation: drop-spin 1.1s var(--spring) .55s both; background: #0c1030; }
.res2__spin img { width: 100%; height: 100%; object-fit: cover; border-radius: 11px; display: block; }
@keyframes drop-spin { 0% { transform: translateY(-115vh) rotate(-540deg) scale(.6); } 70% { transform: translateY(18px) rotate(5deg) scale(1.02); } 85% { transform: translateY(-6px) rotate(-4deg); } 100% { transform: rotate(-3deg); } }
.res2__stamp { top: 6%; inset-inline-start: -10%; width: 32%; animation: stamp-in .8s var(--spring) 2.6s both; }
.res2__txt { display: grid; gap: 14px; justify-items: start; min-width: 0; }
.res2__title { margin: 0; padding: .06em .35em .12em; background: var(--gold); color: #fff; border: 5px solid var(--ink); box-shadow: 8px 9px 0 var(--ink); font: 900 clamp(3rem, 2rem + 5vw, 6.4rem)/1 var(--f-brand); -webkit-text-stroke: .05em var(--ink); paint-order: stroke fill; text-shadow: .05em .06em 0 var(--ink); transform: rotate(-4deg); animation: title-slam .75s var(--spring) 1.25s both; }
.res2.is-loss .res2__title { background: #cfd3ff; font-size: clamp(2.2rem, 1.6rem + 3vw, 4.2rem); }
@keyframes title-slam { 0% { opacity: 0; transform: scale(3.2) rotate(-24deg); } 55% { opacity: 1; transform: scale(.92) rotate(-2deg); } 100% { transform: rotate(-4deg); } }
.res2__sub { margin: -4px 0 0; padding: 3px 12px; border-radius: 999px; background: var(--ink); color: var(--gold); font: 900 .95rem var(--f-brand); animation: pop-in .5s var(--spring) 1.5s both; }
.res2__id { display: grid; gap: 8px; justify-items: start; animation: slide-in .6s var(--spring) 1.6s both; }
.res2__id > b { font: 900 clamp(2rem, 1.4rem + 2.6vw, 3.6rem)/1 var(--f-brand); color: #fff; -webkit-text-stroke: .045em var(--ink); paint-order: stroke fill; text-shadow: .05em .06em 0 var(--ink); overflow-wrap: anywhere; max-width: 100%; }
.res2__move { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; background: var(--ink); color: var(--gold); border: 3px solid #fff; box-shadow: 4px 5px 0 var(--ink); font: 900 clamp(1.05rem, .9rem + .7vw, 1.45rem) var(--f-brand); transform: rotate(-2deg); animation: stamp-in .55s var(--spring) 1.75s both; }
.res2__mic { width: 26px; height: 26px; }
.res2__fam { padding: 2px 10px; border-radius: 999px; background: rgba(255, 255, 255, .85); color: var(--ink); font: 800 .8rem var(--f-brand); }
.res2__quip { position: relative; margin: 4px 0 12px; max-width: min(480px, 100%); padding: 14px 20px; border-radius: 20px; background: #fff; color: var(--ink); border: 3px solid var(--ink); box-shadow: 4px 5px 0 var(--ink); font: 800 clamp(1.1rem, .95rem + .6vw, 1.45rem)/1.4 var(--f-brand); text-wrap: balance; overflow: visible; animation: pop-in .55s var(--spring) 1.95s both; }
.res2__tally { margin: 0; animation: pop-in .5s var(--spring) 2s both; }
.res2__stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: min(480px, 100%); }
.res2__stat { display: grid; justify-items: center; gap: 2px; padding: 10px 6px 8px; border-radius: 16px; background: var(--paper); color: var(--paper-ink); border: 3px solid var(--ink); box-shadow: 4px 5px 0 var(--ink); animation: pop-in .5s var(--spring) both; }
.res2__stat:nth-child(1) { animation-delay: 2.05s; rotate: -2deg; } .res2__stat:nth-child(2) { animation-delay: 2.15s; } .res2__stat:nth-child(3) { animation-delay: 2.25s; rotate: 2deg; }
.res2__sic { width: 34px; height: 34px; }
.res2__stat b { font: 900 clamp(1.6rem, 1.3rem + 1vw, 2.2rem)/1 'Rubik', system-ui, sans-serif; }
.res2__stat span { font: 800 .8rem/1.2 var(--f-brand); text-align: center; }
.res2__new { margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; background: var(--gold); color: var(--ink); border: 3px solid var(--ink); box-shadow: 4px 5px 0 var(--ink); font: 900 1.1rem var(--f-brand); transform: rotate(-3deg); animation: stamp-in .7s var(--spring) 2.6s both; }
.res2__lose { margin: 0; font: 700 .9rem/1.5 var(--f-text); color: #fff; text-shadow: 1px 1px 0 var(--ink); opacity: .9; animation: pop-in .5s var(--spring) 2.4s both; }
.res2__acts { display: flex; flex-wrap: wrap; gap: 10px; }
.res2__acts .btn { white-space: normal; animation: pop-in .5s var(--spring) both; }
.res2__acts .btn:nth-child(1) { animation-delay: 2.9s; } .res2__acts .btn:nth-child(2) { animation-delay: 3s; } .res2__acts .btn:nth-child(3) { animation-delay: 3.1s; }
.res2__panel { display: grid; gap: 10px; width: min(480px, 100%); padding: 14px; border-radius: 16px; background: rgba(10, 11, 34, .82); border: 3px solid var(--ink); box-shadow: 4px 5px 0 var(--ink); }
.res2__panel[hidden] { display: none; }
.res2__panel.is-in { animation: pop-in .45s var(--spring) both; }
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .res2 { place-items: start center; padding: 26px 16px 30px; }
  .res2__in { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 18px; }
  .res2__card { height: auto; width: min(56vw, 250px); }
  .res2__txt { justify-items: center; text-align: center; gap: 12px; }
  .res2__id { justify-items: center; }
  .res2__quip::after { inset-inline-start: calc(50% - 17px); }
  .res2__acts { justify-content: center; }
  .res2__stat span { font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) { .res2__wipe { display: none; } .res2__rays { animation: none !important; } }
html.reduce-motion .res2__wipe { display: none; }

/* מסך רחב: כשיש טיפ, הקלפים מתקצרים כדי שהטיפ לא יכסה אותם */
@media (min-width: 761px) and (min-aspect-ratio: 4/5) {
  .bt { --coachH: 58px; }
  .bt.has-coach .fc { height: min(calc(100% - 130px - var(--movesH) - 40px - var(--coachH)), 520px); }
}
@media (prefers-reduced-motion: reduce) {
  .dp *, .dp *::before, .dp *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .stage.is-slam .chip { opacity: 1; }
  .boom.is-in { opacity: 1; animation: none !important; }
}

/* ---------- תכונות במגירה (טלפון), מסך העברה כפאנל קומיקס ---------- */
.hud__more { display: none; min-height: 28px; padding: 0 10px; border-radius: 999px; background: var(--gold); color: var(--ink); border: 2px solid var(--ink); font: 900 .74rem var(--f-brand); cursor: pointer; }
.drawer { position: fixed; inset: 0; z-index: 45; }
.drawer[hidden] { display: none; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(6, 5, 20, .55); opacity: 0; transition: opacity .3s; }
.drawer__panel { position: absolute; bottom: 0; inset-inline: 0; max-height: 78vh; overflow-y: auto; display: grid; gap: 12px; padding: 8px 16px max(16px, env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; background: #141a50; border: 4px solid var(--ink); border-bottom: 0; transform: translateY(105%); transition: transform .55s var(--spring); }
.drawer.is-open .drawer__panel { transform: none; } .drawer.is-open .drawer__scrim { opacity: 1; }
.drawer__grab { width: 56px; height: 6px; margin: 4px auto 0; border-radius: 3px; background: rgba(255, 255, 255, .3); }
.drawer__side { display: grid; gap: 8px; padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, .06); }
.drawer__side.is-focus { outline: 3px solid var(--gold); }
.drawer__side h3 { margin: 0; font: 900 1.1rem var(--f-brand); color: #fff; } .drawer__side h3 small { color: var(--gold); font-size: .75rem; }
.abil--list { justify-content: flex-start; } .abil--list .ab { min-height: 34px; font-size: .85rem; padding: 0 12px; }
.drawer__acts { display: flex; gap: 8px; justify-content: space-between; }
.hand--panel { position: relative; overflow: hidden; background: radial-gradient(rgba(10, 11, 34, .25) 1.3px, transparent 1.8px) 0 0 / 9px 9px, color-mix(in oklab, var(--a) 70%, #fff6dd); transform: rotate(-1deg); }
.hand--panel::before { content: ""; position: absolute; inset: 8px; border: 3px solid var(--ink); border-radius: 12px; pointer-events: none; }
.hand__row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; align-items: center; width: 100%; text-align: start; }
.hand__card img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 10px; border: 4px solid var(--ink); box-shadow: 4px 5px 0 var(--ink); transform: rotate(-4deg); animation: land .9s var(--spring) both; }
.hand__txt { display: grid; gap: 8px; justify-items: start; }
.hand__txt h3 { margin: 0; }
.hand__balloon { position: relative; margin: 0; padding: 8px 14px; border-radius: 16px; background: #fff; border: 3px solid var(--ink); box-shadow: 3px 4px 0 var(--ink); font: 900 1.05rem var(--f-brand); }
.hand__balloon::after { content: ""; position: absolute; bottom: -13px; inset-inline-start: 18px; width: 18px; height: 14px; background: #fff; border-inline-end: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: skewX(-22deg) rotate(28deg); }
.hand__name { margin: 0; font: 900 1.25rem/1.1 var(--f-brand); color: var(--ink); }
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .hud .abil { display: none; }
  .hud__more { display: inline-flex; align-items: center; }
  .bt__quit { display: none; }
  .bt { --coachH: 64px; --movesH: 134px; }
  .coach { top: auto !important; bottom: calc(var(--movesH) + 8px) !important; overflow: visible; font-size: .8rem; gap: 3px; }
  .fc__balloon { max-width: min(250px, 66vw); translate: none; }
  .fc--foe .fc__balloon { left: 0; right: auto; }
  .fc--me .fc__balloon { left: auto; right: 0; }
  .fc--foe .fc__balloon::after { left: 24px; transform: skewX(-22deg) rotate(28deg); }
  .fc--me .fc__balloon::after { left: auto; right: 24px; transform: skewX(22deg) rotate(-28deg); }
  .coach::after { display: block !important; }
  .bt.has-coach .fc--me { height: calc(100% - var(--cut) - 3% - 92px - var(--movesH) - var(--coachH) - 18px); }
  .hand__row { grid-template-columns: 86px minmax(0, 1fr); }
}

/* ============================================================
   סבב 4: זמן קריאה, "המשך", כפתור הדרכה עם שם, קלפים מרחפים, מסך סיום קומפקטי בטלפון
   ============================================================ */
.moves .cont { justify-self: center; width: min(420px, 92%); min-height: 66px; font-size: 1.4rem; }
.tri-wrap__l { display: block; margin-top: 3px; font: 900 .74rem/1 var(--f-brand); color: var(--ink); white-space: nowrap; text-align: center; }
.rules__opts { display: grid; gap: 8px; justify-items: center; }
.rules__speed { display: flex; gap: 6px; align-items: center; color: #fff; font: 800 .9rem var(--f-brand); }
.rules__speed button { min-height: 38px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; border: 2px solid rgba(255, 255, 255, .4); font: 800 .9rem var(--f-brand); cursor: pointer; }
.rules__speed button[aria-pressed="true"] { background: var(--gold); color: var(--ink); border-color: var(--ink); }

/* קלפים מרחפים: נשימה איטית, הטיה בתלת ממד, צל שגדל ומתכווץ. נעצר בזמן חשיפה, מכה וקולנוע */
.fc { border: 0; background: none; box-shadow: none; perspective: 900px; }
.fc__body { position: relative; width: 100%; height: 100%; border-radius: 12px; border: 4px solid var(--ink); background: #0c1030; box-shadow: 0 0 0 4px color-mix(in oklab, var(--c) 80%, #fff), 9px 11px 0 4px var(--ink); transform-style: preserve-3d; animation: idle-a 5.4s var(--ease-in-out) infinite alternate; }
.fc--foe .fc__body { animation: idle-b 6.3s var(--ease-in-out) -2.1s infinite alternate; }
.fc::after { content: ""; position: absolute; z-index: -1; left: 12%; right: 12%; bottom: -8%; height: 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .6), transparent); animation: idle-sh 5.4s var(--ease-in-out) infinite alternate; }
.fc--foe::after { animation: idle-sh 6.3s var(--ease-in-out) -2.1s infinite alternate; }
.bt.is-busy .fc__body, .bt.is-busy .fc::after, .bt.is-ko .fc__body, .bt.is-ko .fc::after { animation-play-state: paused; }
@keyframes idle-a { 0% { transform: translateY(0) rotateY(-7deg) rotateZ(-1.2deg); } 50% { transform: translateY(-12px) rotateY(3deg) rotateZ(.8deg); } 100% { transform: translateY(-5px) rotateY(8deg) rotateZ(-.4deg); } }
@keyframes idle-b { 0% { transform: translateY(-4px) rotateY(7deg) rotateZ(1deg); } 50% { transform: translateY(-14px) rotateY(-3deg) rotateZ(-.9deg); } 100% { transform: translateY(0) rotateY(-8deg) rotateZ(.5deg); } }
@keyframes idle-sh { 0% { transform: scaleX(1); opacity: .65; } 50% { transform: scaleX(.78); opacity: .38; } 100% { transform: scaleX(.92); opacity: .52; } }
.res2__card { perspective: 1000px; animation: idle-a 6.2s var(--ease-in-out) 1.8s infinite alternate; }
@media (prefers-reduced-motion: reduce) { .fc__body, .fc::after, .res2__card { animation: none !important; } }
html.reduce-motion .fc__body, html.reduce-motion .fc::after, html.reduce-motion .res2__card { animation: none !important; }

@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .fc__body { border-width: 3px; box-shadow: 0 0 0 3px color-mix(in oklab, var(--c) 80%, #fff), 6px 7px 0 3px var(--ink); }
  .tri-wrap__l { font-size: .6rem; }
  /* הטיפ עוגן משמאל לקלף שלי, והקלף לא מתכווץ */
  .coach { left: 8px !important; right: auto !important; translate: none !important; width: calc(100% - var(--meW, 150px) - 36px) !important; bottom: calc(var(--movesH) + 8px) !important; flex-wrap: wrap; }
  .bt.has-coach .fc--me { height: calc(100% - var(--cut) - 3% - 92px - var(--movesH) - 12px); }
  /* מסך הסיום בטלפון: הכול נכנס בלי גלילה */
  .res2 { padding: 14px 12px 16px; place-items: center; }
  .res2__in { grid-template-columns: 112px minmax(0, 1fr); gap: 8px 14px; align-items: center; justify-items: stretch; }
  .res2__txt { display: contents; }
  .res2__card { grid-column: 1; grid-row: 1 / span 3; width: 112px; height: auto; }
  .res2__title, .res2__sub, .res2__id { grid-column: 2; justify-self: start; }
  .res2__title { font-size: 2.1rem; padding: .04em .3em .08em; border-width: 4px; box-shadow: 5px 6px 0 var(--ink); }
  .res2.is-loss .res2__title { font-size: 1.45rem; }
  .res2__sub { margin: 0; font-size: .76rem; }
  .res2__id { justify-items: start; gap: 4px; }
  .res2__id > b { font-size: 1.4rem; }
  .res2__move { font-size: .88rem; padding: 4px 10px; border-width: 2px; }
  .res2__mic { width: 20px; height: 20px; }
  .res2__fam, .res2__lose { display: none; }
  .res2__quip, .res2__tally, .res2__stats, .res2__new, .res2__acts, .res2__panel { grid-column: 1 / -1; justify-self: center; }
  .res2__quip { margin: 2px 0 10px; padding: 10px 14px; font-size: .98rem; }
  .res2__stats { gap: 6px; width: 100%; }
  .res2__stat { padding: 6px 4px; border-width: 2.5px; box-shadow: 3px 4px 0 var(--ink); }
  .res2__sic { width: 24px; height: 24px; }
  .res2__stat b { font-size: 1.3rem; }
  .res2__stat span { font-size: .66rem; }
  .res2__new { font-size: .88rem; padding: 4px 12px; }
  .res2__acts { gap: 8px; justify-content: center; }
  .res2__acts .btn { min-height: 46px; padding-inline: 14px; font-size: .95rem; }
  .res2__stamp { width: 42%; inset-inline-start: -14%; }
}

/* ============================================================
   מרחוק: חדר עם קוד, מחכים לחבר, סטטוס חיבור (js/duel-net.js)
   ============================================================ */
.dp[data-screen="room"] { --cut: 50%; }
.opp__tile:nth-of-type(4) { animation-delay: .24s; }
.opp__tile--live .opp__ic { position: relative; background: #ff5a5a; }
.opp__tile--live .opp__ic::after { content: ""; position: absolute; top: -5px; inset-inline-end: -5px; width: 14px; height: 14px; border-radius: 50%; background: #6df09a; border: 2.5px solid var(--ink); animation: live-dot 1.6s ease-in-out infinite; }
@keyframes live-dot { 50% { transform: scale(1.35); } }

.inv { display: grid; gap: 10px; justify-items: center; text-align: center; width: min(420px, 100%); padding: 16px 16px 14px; border-radius: 20px; background: var(--paper); color: var(--paper-ink); border: 4px solid var(--ink); box-shadow: var(--hard-lg); animation: pop-in .55s var(--spring) both; }
.inv__kick { margin: 0; padding: 3px 14px; background: var(--ink); color: var(--gold); font: 900 1.15rem var(--f-brand); transform: rotate(-2deg); }
.inv__sub { margin: 0; font: 700 .95rem/1.45 var(--f-text); color: #4a3f7a; }
.inv__code { display: flex; gap: 6px; margin: 2px 0 0; direction: ltr; }
.inv__code b { display: grid; place-items: center; width: 44px; height: 54px; border-radius: 10px; background: #fff; border: 3px solid var(--ink); box-shadow: 3px 4px 0 var(--ink); font: 900 1.9rem/1 var(--f-brand); color: var(--ink); animation: code-in .6s var(--spring) calc(.15s + var(--i) * .07s) both; }
.inv__code b:nth-child(odd) { rotate: -3deg; } .inv__code b:nth-child(even) { rotate: 2deg; }
@keyframes code-in { from { transform: translateY(-40px) scale(.4); opacity: 0; } }
.inv__msg { margin: 0; min-height: 1.2em; font: 800 .88rem var(--f-brand); color: #1f8a4c; overflow-wrap: anywhere; }
.inv__msg:empty { display: none; }
.inv__wait { display: flex; align-items: center; gap: 12px; }
.inv__wait p { margin: 0; font: 900 1.15rem var(--f-brand); }
.inv__card { display: grid; place-items: center; width: 40px; height: 60px; border-radius: 8px; border: 3px dashed var(--ink); background: #dfe3ff; font: 900 1.6rem/1 var(--f-brand); color: var(--ink); transform-origin: 50% -30%; animation: card-swing 2.2s ease-in-out infinite; }
@keyframes card-swing { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg) translateY(-4px); } }
.inv--err .inv__kick { background: #ff5a5a; color: #fff; }
.dots { display: inline-flex; gap: 3px; margin-inline-start: 3px; vertical-align: middle; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: dot-hop 1.1s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot-hop { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }

.room-bar { position: absolute; z-index: 6; bottom: calc(var(--ctaH) + 4px); inset-inline: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; justify-content: center; align-items: center; padding: 0 12px; pointer-events: none; }
.room-bar > * { pointer-events: auto; }
.room-bar__note { margin: 0; padding: 6px 14px; border-radius: 999px; background: var(--ink); color: var(--gold); font: 800 .9rem var(--f-brand); text-align: center; }
.room-bar__nick { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border-radius: 999px; background: rgba(10, 11, 34, .7); color: #fff; font: 800 .8rem var(--f-brand); }
.room-bar__nick input { width: 118px; min-height: 32px; padding: 0 10px; border-radius: 999px; border: 2px solid var(--ink); background: var(--paper); color: var(--paper-ink); font: 700 .88rem var(--f-brand); }

.netp { position: absolute; z-index: 7; top: calc(max(12px, env(safe-area-inset-top)) + 48px); left: 50%; translate: -50% 0; display: inline-flex; align-items: center; gap: 7px; max-width: calc(100% - 32px); padding: 5px 12px; border-radius: 999px; background: rgba(10, 11, 34, .82); color: #fff; border: 2px solid rgba(255, 255, 255, .25); font: 800 .8rem var(--f-brand); white-space: nowrap; pointer-events: none; animation: pop-in .4s var(--spring) both; }
.netp span { overflow: hidden; text-overflow: ellipsis; }
.netp__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #6df09a; box-shadow: 0 0 0 2px var(--ink); }
.netp.is-warn .netp__dot { background: var(--gold); }
.netp.is-bad .netp__dot { background: #ff5a5a; animation: live-dot 1s ease-in-out infinite; }
.netp.is-bad, .netp.is-warn { border-color: var(--gold); color: var(--gold); }
.netp--bt { top: max(10px, env(safe-area-inset-top)); z-index: 30; }
.hud.is-off { filter: saturate(.4); }
.hud.is-off .hud__who::after { content: " · לא מחובר"; color: var(--gold); }
.peek--net:empty { display: none; }
.res2__net { margin: 0; font: 900 1.05rem var(--f-brand); color: var(--gold); text-shadow: 1px 1px 0 var(--ink); }
.res2__net:empty { display: none; }
.res2__acts .btn[disabled] { opacity: .8; cursor: default; }

@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .dp[data-screen="room"] { --cut: 48%; }
  .inv { padding: 12px 12px 10px; gap: 7px; box-shadow: 5px 6px 0 var(--ink); }
  .inv__kick { font-size: 1rem; }
  .inv__code b { width: 38px; height: 46px; font-size: 1.6rem; box-shadow: 2px 3px 0 var(--ink); }
  .inv__wait p { font-size: 1rem; }
  .inv__card { width: 32px; height: 48px; font-size: 1.3rem; }
  .netp { top: calc(max(12px, env(safe-area-inset-top)) + 40px); font-size: .74rem; padding: 4px 10px; }
  .netp--bt { top: 84px; }
  .room-bar__note { font-size: .8rem; padding: 5px 12px; }
  .room-bar__nick input { width: 104px; min-height: 30px; }
  .res2__net { grid-column: 1 / -1; justify-self: center; font-size: .95rem; }
}


/* ============================================================
   מסך הפתיחה: לוגו, תפריט, הדגמה מתנגנת מאחור, חותמות בפינה
   ============================================================ */
.top__l { display: flex; align-items: center; gap: 10px; }
.back { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px 0 14px; border-radius: 999px; background: rgba(10, 11, 34, .72); color: #fff; border: 2.5px solid rgba(255, 255, 255, .6); font: 900 .95rem var(--f-brand); cursor: pointer; transition: transform .4s var(--spring), border-color .2s; }
.back:hover { transform: translateX(3px); border-color: #fff; }
.back__ic { width: 18px; height: 18px; flex: none; }
.pass { position: absolute; inset: 56px 0 0; z-index: 4; display: grid; place-items: center; padding: 16px; }

.tt { position: absolute; inset: 0; overflow: hidden; }
.tt__scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(42% 80% at 50% 50%, rgba(8, 6, 26, .78), rgba(8, 6, 26, .35) 70%, rgba(8, 6, 26, .5)); }
.tt__in { position: relative; z-index: 3; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(10px, 2.6vh, 30px); padding: max(52px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); }
.tt__stamps { position: absolute; z-index: 4; top: max(12px, env(safe-area-inset-top)); inset-inline-end: 14px; margin: 0; display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: 999px; background: rgba(10, 11, 34, .8); border: 2px solid rgba(245, 200, 66, .65); color: #fff; font: 800 .86rem/1.2 var(--f-brand); animation: pop-in .6s var(--spring) 1.1s both; }
.tt__stamps b { color: var(--gold); }

/* הלוגו: כוכב פיצוץ על פאנל, נוחת בטריקה ומתנדנד קלות */
.tl { position: relative; margin: 0; width: min(560px, 92vw); aspect-ratio: 400 / 250; flex: none; animation: tl-slam .95s var(--spring) .1s both; }
.tl__wob { position: absolute; inset: 0; display: block; animation: tl-wob 3.4s var(--ease-in-out) 1.4s infinite alternate; }
.tl__art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(8px 10px 0 rgba(10, 11, 34, .55)); }
.tl__panel { transform-box: fill-box; transform-origin: center; transform: rotate(-3deg); animation: tl-panel .8s var(--spring) both; }
.tl__burst { transform-box: fill-box; transform-origin: center; animation: tl-burst .9s var(--spring) .3s both, tl-pulse 2.6s var(--ease-in-out) 1.5s infinite alternate; }
.tl__k, .tl__m { position: absolute; left: 50%; font-family: var(--f-brand); font-weight: 900; line-height: 1; white-space: nowrap; }
.tl__k { top: 17%; translate: -50% 0; rotate: -6deg; padding: .08em .45em .14em; background: var(--ink); color: var(--gold); border: 3px solid #fff; border-radius: 6px; box-shadow: 4px 5px 0 rgba(10, 11, 34, .6); font-size: clamp(1.4rem, .9rem + 2.6vw, 2.5rem); animation: tl-drop .75s var(--spring) .55s both; }
.tl__m { top: 39%; translate: -50% 0; rotate: -3deg; color: #fff; font-size: clamp(3rem, 1.6rem + 7vw, 6.1rem); -webkit-text-stroke: .075em var(--ink); paint-order: stroke fill; text-shadow: .045em .055em 0 var(--ink), .085em .1em 0 var(--ink), 0 0 .5em rgba(255, 210, 90, .35); animation: tl-m .85s var(--spring) .18s both; }
@keyframes tl-slam { 0% { opacity: 0; transform: scale(2.6) rotate(-14deg); } 35% { opacity: 1; } 100% { transform: none; } }
@keyframes tl-wob { 0% { transform: rotate(-1.4deg) scale(1); } 100% { transform: rotate(1.1deg) scale(1.022); } }
@keyframes tl-panel { from { transform: rotate(-12deg) scale(.6); } }
@keyframes tl-burst { from { transform: scale(0) rotate(-50deg); } }
@keyframes tl-pulse { to { transform: scale(1.035) rotate(2.5deg); } }
@keyframes tl-drop { from { opacity: 0; transform: translateY(-70px) rotate(-24deg) scale(.6); } }
@keyframes tl-m { from { opacity: 0; transform: scale(1.9); } 40% { opacity: 1; } }

/* תפריט: כפתורים גדולים לאגודל */
.tmenu { display: grid; gap: 10px; width: min(440px, 100%); flex: none; }
.tmenu__cpu { display: grid; gap: 6px; }
.tmenu .lvl { margin: 0; color: #fff; animation: tbtn-in .7s var(--spring) .6s both; }
.tbtn { display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; column-gap: 12px; min-height: 68px; padding: 7px 14px; border-radius: 18px; background: var(--paper); color: var(--paper-ink); border: 4px solid var(--ink); box-shadow: 5px 6px 0 var(--ink); text-align: start; cursor: pointer; font-family: inherit; transition: transform .45s var(--spring), box-shadow .2s; animation: tbtn-in .7s var(--spring) .55s both; touch-action: manipulation; }
.tmenu > :nth-child(2) { animation-delay: .63s; } .tmenu > :nth-child(3) { animation-delay: .71s; } .tmenu > :nth-child(4) { animation-delay: .79s; }
.tbtn:hover { transform: translate(-3px, -3px) rotate(-1deg); box-shadow: 8px 9px 0 var(--ink); }
.tbtn:active { transform: translate(2px, 2px); box-shadow: 2px 3px 0 var(--ink); transition-duration: .08s; }
.tbtn__ic { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; background: var(--gold); border: 3px solid var(--ink); font-size: 1.75rem; transform: rotate(-4deg); transition: transform .45s var(--spring); }
.tbtn:hover .tbtn__ic { transform: rotate(6deg) scale(1.08); }
.tbtn__t { display: grid; gap: 1px; min-width: 0; }
.tbtn b { font: 900 1.38rem/1.1 var(--f-brand); }
.tbtn small { font: 600 .84rem/1.3 var(--f-text); color: #4a3f7a; }
.tbtn--cpu { background: linear-gradient(180deg, #ff6b5b, #e2343e); color: #fff; }
.tbtn--cpu b { text-shadow: 2px 2px 0 var(--ink); }
.tbtn--cpu small { color: #fff1ea; }
.tbtn--howto { grid-template-columns: auto auto; justify-content: center; column-gap: 10px; min-height: 52px; background: rgba(10, 11, 34, .74); color: #fff; border: 3px solid rgba(255, 255, 255, .6); box-shadow: none; }
.tbtn--howto:hover { box-shadow: none; border-color: #fff; }
.tbtn--howto b { font-size: 1.15rem; }
.tbtn__q { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--gold); color: var(--ink); border: 2.5px solid var(--ink); font: 900 1.1rem/1 var(--f-brand); }
@keyframes tbtn-in { from { opacity: 0; transform: translateY(40px) scale(.9) rotate(-3deg); } }

/* הדגמה מאחור: מעומעמת ומטושטשת כדי שהתפריט יהיה ברור */
.att { --h: min(64vh, 580px); --w: calc(var(--h) * 2 / 3); position: absolute; inset: 0; z-index: 1; pointer-events: none; filter: blur(1.6px) saturate(.95) brightness(.74); }
.att__fx { position: absolute; inset: 0; width: 100%; height: 100%; }
.att__c { position: absolute; top: 50%; height: var(--h); margin-top: calc(var(--h) / -2); aspect-ratio: 2 / 3; border-radius: 14px; border: 4px solid var(--ink); background: #0c1030; box-shadow: 0 0 0 4px color-mix(in oklab, var(--a, #3a63c9) 80%, #fff), 10px 12px 0 4px var(--ink); opacity: 0; transition: transform .9s var(--spring), opacity .35s var(--ease), filter .4s var(--ease); }
.att__c img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; display: block; }
.att__c--a { left: 5vw; transform: translateX(-70vw) rotate(-30deg); }
.att__c--b { right: 5vw; transform: translateX(70vw) rotate(30deg); }
.att[data-ph="in"] .att__c, .att[data-ph="clash"] .att__c, .att[data-ph="verdict"] .att__c { opacity: 1; animation: att-float 2.4s var(--ease-in-out) infinite alternate; }
.att[data-ph="in"] .att__c--b, .att[data-ph="clash"] .att__c--b, .att[data-ph="verdict"] .att__c--b { animation-delay: -1.2s; }
.att[data-ph="in"] .att__c--a { transform: rotate(-4deg); }
.att[data-ph="in"] .att__c--b { transform: rotate(4deg); }
.att[data-ph="clash"] .att__c--a { transform: translateX(2vw) rotate(-1deg) scale(1.03); }
.att[data-ph="clash"] .att__c--b { transform: translateX(-2vw) rotate(1deg) scale(1.03); }
.att[data-ph="verdict"][data-win="a"] .att__c--a, .att[data-ph="verdict"][data-win="b"] .att__c--b { transform: scale(1.08) rotate(-2deg); filter: drop-shadow(0 0 26px color-mix(in oklab, var(--a, #f5c842) 80%, #fff)); }
.att[data-ph="verdict"][data-win="a"] .att__c--b { transform: translateX(4vw) translateY(28px) rotate(16deg) scale(.9); filter: grayscale(.75) brightness(.7); }
.att[data-ph="verdict"][data-win="b"] .att__c--a { transform: translateX(-4vw) translateY(28px) rotate(-16deg) scale(.9); filter: grayscale(.75) brightness(.7); }
.att[data-ph="out"] .att__c--a { transform: translateY(-80vh) rotate(-26deg); }
.att[data-ph="out"] .att__c--b { transform: translateY(-80vh) rotate(26deg); }
.att[data-ph="out"] .att__c { transition: transform .7s var(--ease), opacity .5s var(--ease) .15s; }
@keyframes att-float { from { translate: 0 -10px; } to { translate: 0 12px; } }
/* מסך רחב: כל מהלך נוחת על הקלף שלו, ופסק הדין מעל המנצח (התפריט באמצע לא מסתיר) */
.att__mid { display: contents; }
.att__chip { position: absolute; z-index: 2; top: calc(50% + var(--h) / 2 - 64px); justify-content: center; display: inline-flex; align-items: center; gap: 6px; max-width: calc(var(--w) - 20px); padding: 8px 14px; border-radius: 14px; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); box-shadow: 4px 5px 0 var(--ink); font: 900 1.15rem/1.05 var(--f-brand); direction: rtl; opacity: 0; transition: transform .5s var(--spring), opacity .2s, filter .3s; }
.att__chip .ic { width: 40px; height: 40px; flex: none; }
.att__chip b { overflow-wrap: anywhere; }
.att__chip--a { left: calc(5vw + var(--w) / 2); translate: -50% 0; transform: translateY(60vh) rotate(-24deg); }
.att__chip--b { left: calc(100% - 5vw - var(--w) / 2); translate: -50% 0; transform: translateY(60vh) rotate(24deg); }
.att[data-ph="clash"] .att__chip, .att[data-ph="verdict"] .att__chip { opacity: 1; transform: none; }
.att[data-ph="verdict"][data-win="a"] .att__chip--a, .att[data-ph="verdict"][data-win="b"] .att__chip--b { transform: scale(1.16) rotate(-3deg); background: var(--gold); }
.att[data-ph="verdict"][data-win="a"] .att__chip--b, .att[data-ph="verdict"][data-win="b"] .att__chip--a { transform: scale(.82) rotate(12deg) translateY(10px); filter: grayscale(.7) brightness(.85); }
.att__v { position: absolute; left: calc(5vw + var(--w) / 2); top: calc(50% - var(--h) / 2 + 22px); z-index: 2; margin: 0; width: max-content; max-width: calc(var(--w) + 30px); display: grid; justify-items: center; gap: 2px; padding: 10px 18px; background: #fff; color: var(--ink); border: 4px solid var(--ink); box-shadow: 6px 7px 0 var(--ink); font: 900 1.3rem/1.15 var(--f-brand); text-align: center; translate: -50% 0; transform: scale(0) rotate(-10deg); transition: transform .55s var(--spring); }
.att__v small { font: 800 .8rem/1.1 var(--f-brand); color: #b07800; }
.att[data-win="b"] .att__v { left: calc(100% - 5vw - var(--w) / 2); }
.att[data-ph="verdict"] .att__v { transform: rotate(-2deg); }

@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .back { width: 40px; padding: 0; justify-content: center; }
  .back span { display: none; }
  .tt__scrim { background: linear-gradient(rgba(8, 6, 26, .5), rgba(8, 6, 26, .12) 34%, rgba(8, 6, 26, .12) 50%, rgba(8, 6, 26, .78) 64%, rgba(8, 6, 26, .86)); }
  .tt__in { justify-content: space-between; gap: 8px; padding-top: max(46px, calc(env(safe-area-inset-top) + 34px)); }
  .tl { width: min(380px, 96vw); }
  .tmenu { gap: 9px; }
  .tbtn { min-height: 62px; grid-template-columns: 48px minmax(0, 1fr); padding: 6px 12px; box-shadow: 4px 5px 0 var(--ink); }
  .tbtn__ic { width: 48px; height: 48px; font-size: 1.5rem; }
  .tbtn b { font-size: 1.22rem; }
  .tbtn small { font-size: .76rem; }
  .tbtn--howto { min-height: 46px; }
  .att { filter: blur(1px) saturate(.95) brightness(.8); }
  .att { --h: min(25vh, 230px); }
  .att__c { top: 45%; }
  .att__c--a { left: 4vw; } .att__c--b { right: 4vw; }
  .att__mid { position: absolute; left: 50%; top: 45%; translate: -50% -50%; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 6px; }
  .att__chip { position: static; translate: none; max-width: 34vw; padding: 5px 8px; font-size: .8rem; gap: 4px; box-shadow: 3px 4px 0 var(--ink); }
  .att__chip .ic { width: 26px; height: 26px; }
  .att__chip--a { transform: translateY(-30vh) rotate(-24deg); }
  .att__chip--b { transform: translateY(30vh) rotate(24deg); }
  .att__v, .att[data-win="b"] .att__v { left: 50%; top: calc(45% + 6vh); max-width: 80vw; font-size: 1rem; padding: 7px 12px; border-width: 3px; box-shadow: 4px 5px 0 var(--ink); }
}
@media (max-height: 700px) and (max-width: 760px) {
  .tl { width: min(320px, 86vw); }
  .tbtn { min-height: 56px; } .tbtn small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tl, .tl__wob, .tl__panel, .tl__burst, .tl__k, .tl__m, .tbtn, .tmenu .lvl, .tt__stamps, .att__c { animation: none !important; }
  .att__c, .att__chip, .att__v { transition: none !important; }
}
html.reduce-motion .tl, html.reduce-motion .tl__wob, html.reduce-motion .tl__panel, html.reduce-motion .tl__burst, html.reduce-motion .tl__k, html.reduce-motion .tl__m, html.reduce-motion .tbtn, html.reduce-motion .tmenu .lvl, html.reduce-motion .tt__stamps, html.reduce-motion .att__c { animation: none !important; }
html.reduce-motion .att__c, html.reduce-motion .att__chip, html.reduce-motion .att__v { transition: none !important; }
/* חדר בטלפון: הקלף הריק קטן יותר ומעל שורת הכינוי, כדי שהכותרת שלו לא תיחתך */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .dp[data-screen="room"] .side--me { bottom: calc(var(--ctaH) + 50px); }
  .dp[data-screen="room"] .empty { gap: 6px; padding: 8px; }
  .dp[data-screen="room"] .empty__card { height: min(24vh, 200px); font-size: 3.4rem; }
  .dp[data-screen="room"] .empty b { font-size: 1.4rem; }
}

/* ============================================================
   v2: אבן, נייר, מספריים + כוח העל (rps-engine.js)
   ============================================================ */
.mv--rock { background: #e0402c; } .mv--paper { background: #2f7fe0; } .mv--scissors { background: #7a3fc4; }
.moves .mv__row .mv { min-height: 104px; }
.mv--wide { grid-template-columns: auto minmax(0, 1fr) auto; justify-items: start; align-items: center; gap: 4px 12px; min-height: 64px; padding: 8px 14px; text-align: start; }
.mv--wide .mv__ic { width: 40px; height: 40px; margin: 0; }
.mv__sw { display: grid; gap: 2px; justify-items: start; min-width: 0; }
.mv__sw b { font-size: clamp(1rem, .9rem + .6vw, 1.35rem); overflow-wrap: anywhere; }
.mv__st { display: grid; gap: 3px; justify-items: end; }
.mv__st small { font: 800 .72rem/1.2 var(--f-brand); }
.mv--sup[disabled] { filter: grayscale(.6) brightness(.8); }
.mv--sup.is-charged { animation: sup-glow 1.1s var(--ease-in-out, ease-in-out) infinite alternate; }
.moves.is-live .mv--sup.is-charged { animation: mv-in .55s var(--spring) both, sup-glow 1.1s ease-in-out .6s infinite alternate; }
@keyframes sup-glow { from { box-shadow: 5px 6px 0 var(--ink), 0 0 0 0 rgba(245, 200, 66, .0); } to { box-shadow: 5px 6px 0 var(--ink), 0 0 26px 8px rgba(255, 220, 90, .85); } }
.readb { justify-self: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: #6df09a; color: var(--ink); border: 3px solid var(--ink); box-shadow: 3px 4px 0 var(--ink); font: 900 .9rem var(--f-brand); cursor: pointer; }
.peek--read { padding: 6px 12px; border-radius: 12px; background: rgba(10, 11, 34, .7); justify-self: center; }

/* לבבות + מד כוח העל, תמיד גלויים לשני הצדדים */
.hearts { display: flex; gap: 3px; flex-wrap: wrap; direction: rtl; }
.hearts .hrt { width: 22px; height: 22px; transition: transform .4s var(--spring), opacity .3s, filter .3s; }
.hearts .hrt.is-gone { opacity: .28; filter: grayscale(1); transform: scale(.78); }
.hearts .hrt.is-pop { animation: heart-pop .6s var(--spring); }
@keyframes heart-pop { 0% { transform: scale(1); } 35% { transform: scale(1.6) rotate(-14deg); opacity: 1; filter: none; } 100% { transform: scale(.78); } }
.hearts.is-low .hrt:not(.is-gone) { animation: heart-beat .8s ease-in-out infinite; }
@keyframes heart-beat { 50% { transform: scale(1.18); } }
.meter { display: inline-flex; align-items: center; gap: 4px; direction: rtl; }
.meter i { width: 16px; height: 16px; border-radius: 4px; transform: rotate(45deg); background: rgba(255, 255, 255, .16); border: 2px solid var(--ink); transition: background .3s, transform .5s var(--spring); }
.meter i.on { background: var(--gold); transform: rotate(45deg) scale(1.08); }
.meter__t { font: 900 .74rem var(--f-brand); color: #fff; margin-inline-start: 4px; }
.mv .meter__t { color: inherit; }
.meter.is-full i { background: var(--gold); animation: pip-flash .9s ease-in-out infinite alternate; }
.meter.is-full .meter__t { color: var(--gold); }
@keyframes pip-flash { to { background: #fff6c2; box-shadow: 0 0 10px 3px rgba(255, 220, 90, .9); } }
.meter--big i { width: 26px; height: 26px; border-width: 3px; }
.ab--streak { background: #ff5a5a !important; color: #fff !important; border-color: var(--ink) !important; }

/* באנר רצף */
.streak { position: absolute; z-index: 12; top: 34%; left: 50%; translate: -50% -50%; display: grid; justify-items: center; gap: 4px; padding: 14px 30px; background: #ff5a5a; color: #fff; border: 5px solid var(--ink); box-shadow: 8px 9px 0 var(--ink); transform: rotate(-5deg); animation: pop-in .5s var(--spring) both; text-align: center; pointer-events: none; }
.streak b { font: 900 clamp(2.4rem, 1.6rem + 4vw, 4.6rem)/1 var(--f-brand); -webkit-text-stroke: .05em var(--ink); paint-order: stroke fill; text-shadow: .05em .06em 0 var(--ink); }
.streak small { font: 900 clamp(.9rem, .8rem + .5vw, 1.2rem) var(--f-brand); }
.streak.is-out { opacity: 0; transition: opacity .25s; }

/* גיבור: תכונה במשפט אחד */
.pasl { margin: 6px 0 4px; font: 700 .92rem/1.35 var(--f-text); text-wrap: pretty; }
.tg--hp .ic { width: 1.1em; height: 1.1em; vertical-align: -.2em; }

/* קומיקס החוקים */
.rp__sm { font: 800 .95rem/1.3 var(--f-text) !important; }
.rp__sup { display: grid; justify-items: center; gap: 12px; } .rp__sup > .ic { width: 84px; height: 84px; }

@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .hearts .hrt { width: 16px; height: 16px; }
  .meter i { width: 11px; height: 11px; }
  .meter__t { font-size: .64rem; }
  .moves .mv__row .mv { min-height: 84px; }
  .mv--wide { min-height: 54px; padding: 6px 10px; gap: 2px 8px; }
  .mv--wide .mv__ic { width: 30px; height: 30px; }
  .mv__st small { font-size: .62rem; }
  .readb { min-height: 34px; font-size: .78rem; }
}
/* האיורים של דניאל: הילה בהירה דקה + צל דיו, כדי שיבלטו על הרקעים הכהים */
.dp svg.ic { overflow: visible; filter: drop-shadow(0 0 1.2px rgba(255, 255, 255, .9)) drop-shadow(2px 3px 0 rgba(10, 11, 34, .55)); }
.chip .ic, .att__chip .ic { width: 72px; height: 72px; }
.mv .mv__ic { width: 56px; height: 56px; }
.mv--wide .mv__ic { width: 50px; height: 50px; }
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .mv .mv__ic { width: 44px; height: 44px; } .mv--wide .mv__ic { width: 38px; height: 38px; }
  .chip .ic { width: 48px; height: 48px; } .att__chip .ic { width: 34px; height: 34px; }
}
.meter .meter__ic { width: 24px; height: 24px; filter: grayscale(.85) brightness(.7); opacity: .75; transition: filter .3s, opacity .3s, transform .5s var(--spring); }
.meter.is-full .meter__ic { filter: drop-shadow(0 0 6px rgba(255, 220, 90, .95)); opacity: 1; transform: scale(1.15) rotate(-6deg); }
@media (max-width: 760px), (max-aspect-ratio: 4/5) { .meter .meter__ic { width: 18px; height: 18px; } }
.mv--wide kbd { top: auto; bottom: 6px; }

/* ---------- מחשב: הלוחמים ממורכזים אנכית בפס שבין ה-HUD לכפתורים (גם בזמן הריחוף) ---------- */
@media (min-width: 761px) and (min-aspect-ratio: 4/5) {
  .bt { --bandT: 150px; --bandB: calc(var(--movesH) + 34px); }
  .bt.has-coach { --bandB: calc(var(--movesH) + 34px + var(--coachH)); }
  .fc, .bt.has-coach .fc { --fcH: max(160px, min(calc(100% - var(--bandT) - var(--bandB)), 620px)); height: var(--fcH); top: calc(var(--bandT) + (100% - var(--bandT) - var(--bandB) - var(--fcH)) / 2); }
}

/* ---------- כפתור הצלילים (js/game-sfx.js) ---------- */
.top__r { display: flex; align-items: center; gap: 8px; }
.gsfx--duel { position: fixed; z-index: 40; top: max(12px, env(safe-area-inset-top)); right: 12px; display: none; }
.dp[data-screen="title"] .gsfx--duel { display: inline-grid; }
.dp[data-screen="battle"] .gsfx--duel { display: inline-grid; position: absolute; top: 58px; right: auto; left: 50%; translate: -50% 0; width: 34px; height: 34px; }
.dp[data-screen="battle"] .gsfx--duel:hover { transform: translate(-1px, -2px) rotate(-6deg); }
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .gsfx--top { width: 34px; height: 34px; }
  .top__r { gap: 6px; }
  .top .logo, .top .howto { white-space: nowrap; }
  .top .howto { padding: 0 10px; font-size: .85rem; gap: 4px; }
  .dp[data-screen="battle"] .gsfx--duel { top: calc(var(--cut) - 30px); left: 14px; translate: none; }
}
/* מסך הניצחון: שם המהלך ו"חותמת חדשה" מיושרים לאותו קו (צד ימין) ובאותה זווית */
.res2__move, .res2__new { transform: none; rotate: -2deg; transform-origin: 100% 50%; justify-self: start; margin-inline-start: 0; }
@media (max-width: 760px) { .res2__new { justify-self: start; } }
@keyframes badge-in { 0% { opacity: 0; transform: scale(2.4) rotate(-18deg); } 60% { opacity: 1; transform: scale(.94) rotate(2deg); } 100% { opacity: 1; transform: none; } }
.res2__move { animation: badge-in .55s var(--spring) 1.75s both; }
.res2__new { animation: badge-in .7s var(--spring) 2.6s both; }
.res2__badges { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; }
.res2__badges .res2__move, .res2__badges .res2__new { rotate: none; transform: none; margin: 0; font-size: clamp(1rem, .9rem + .5vw, 1.3rem); padding: 6px 14px; border-width: 3px; }
@media (max-width: 760px) { .res2__badges { justify-content: center; } .res2__badges .res2__move, .res2__badges .res2__new { font-size: .9rem; padding: 4px 10px; } }
/* קישורים משניים במסך הפתיחה: לאתר של דניאל ולכל המשחקים. שקטים, לא מתחרים בכפתורי המשחק */
.tlinks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: min(440px, 100%); margin: 0; flex: none; animation: tbtn-in .7s var(--spring) .87s both; }
.tlink { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 6px 14px; border-radius: 999px; background: rgba(10, 11, 34, .55); color: #fff; border: 2px solid rgba(255, 255, 255, .45); font-size: .95rem; font-weight: 700; text-decoration: none; touch-action: manipulation; transition: border-color .2s, background .2s; }
.tlink:hover, .tlink:focus-visible { border-color: #fff; background: rgba(10, 11, 34, .8); }
.tlink__ic { width: 1.15em; height: 1.15em; flex: none; }
@media (max-width: 760px), (max-aspect-ratio: 4/5) { .tlinks { gap: 6px; } .tlink { min-height: 44px; padding: 4px 12px; font-size: .88rem; } }
@media (prefers-reduced-motion: reduce) { .tlinks { animation: none !important; } }
html.reduce-motion .tlinks { animation: none !important; }

/* ===== 20.10.2026: לבבות ומד כוח העל גדולים וברורים ===== */
.hud__row .hud__more { margin-inline-start: auto; }
.vit { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; }
.vit__hp, .vit__sp { position: relative; display: flex; align-items: center; gap: 8px; }
.vit__n { font: 900 1rem/1 var(--f-brand); color: #fff; min-width: 2.4em; }
.hud.is-low-hp .vit__n { color: #ff6b7d; }
.hearts { gap: 4px; flex-wrap: nowrap; }
.hearts .hrt { width: 32px; height: 32px; filter: drop-shadow(2px 2px 0 var(--ink)); }
.hearts .hrt.is-gone { opacity: .5; filter: grayscale(1) brightness(.35) drop-shadow(0 0 0 transparent); transform: scale(.82); }
.hearts .hrt.is-pop { animation: heart-break .7s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes heart-break { 0% { transform: scale(1); filter: none; opacity: 1; } 20% { transform: scale(1.75) rotate(-12deg); filter: brightness(2.2) drop-shadow(0 0 10px #fff); opacity: 1; } 45% { transform: scale(1.3) rotate(10deg); filter: brightness(1.2); } 100% { transform: scale(.82); } }
.hearts .hrt.is-gain { animation: heart-gain .8s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes heart-gain { 0% { transform: scale(0); filter: brightness(2) drop-shadow(0 0 14px #6df09a); } 60% { transform: scale(1.45); filter: drop-shadow(0 0 12px #6df09a); } 100% { transform: scale(1); } }
.hearts.is-low .hrt:not(.is-gone) { animation: heart-beat .75s ease-in-out infinite; }
@keyframes heart-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.22); } 30% { transform: scale(1); } 45% { transform: scale(1.14); } }
.vit__hp .hearts { position: relative; }
.hrt-half { position: absolute; width: 32px; height: 32px; pointer-events: none; z-index: 2; animation: shard-l .85s cubic-bezier(.3, .2, .5, 1) both; clip-path: inset(0 50% 0 0); }
.hrt-half--r { clip-path: inset(0 0 0 50%); animation-name: shard-r; }
@keyframes shard-l { 0% { transform: none; opacity: 1; } 100% { transform: translate(-26px, 34px) rotate(-55deg); opacity: 0; } }
@keyframes shard-r { 0% { transform: none; opacity: 1; } 100% { transform: translate(26px, 34px) rotate(55deg); opacity: 0; } }
.hud.is-hit { animation: hud-hit .55s ease-out; }
@keyframes hud-hit { 0% { border-color: #ff4d6a; box-shadow: 4px 5px 0 var(--ink), 0 0 0 4px rgba(255, 77, 106, .8), 0 0 40px rgba(255, 77, 106, .7); } 15% { transform: translateX(-7px); } 30% { transform: translateX(6px); } 45% { transform: translateX(-4px); } 60% { transform: translateX(2px); } 100% { transform: none; } }

/* מד כוח העל: מגן + שלושה מקטעים */
.meter { gap: 6px; }
.meter__bar { display: inline-flex; gap: 3px; padding: 3px; border-radius: 10px; background: rgba(0, 0, 0, .45); border: 2px solid var(--ink); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .6); }
.meter i, .meter--big i { position: relative; width: 30px; height: 16px; border-radius: 0; transform: skewX(-14deg); background: rgba(255, 255, 255, .12); border: 0; overflow: hidden; transition: background .3s; }
.meter i:first-child { border-start-start-radius: 6px; border-end-start-radius: 6px; } .meter i:last-child { border-start-end-radius: 6px; border-end-end-radius: 6px; }
.meter i.on { transform: skewX(-14deg); background: linear-gradient(180deg, #fff3a8, #f5c842 45%, #e08a12); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25); }
.meter i.is-new { animation: seg-fill .7s cubic-bezier(.2, 1.3, .4, 1) calc(var(--i) * 0s) both; }
@keyframes seg-fill { 0% { clip-path: inset(0 0 0 100%); filter: brightness(2.4); } 55% { clip-path: inset(0 0 0 0); filter: brightness(2.4); } 100% { clip-path: inset(0 0 0 0); filter: none; } }
.meter.is-up .meter__bar { animation: bar-bump .6s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes bar-bump { 30% { transform: scale(1.18); box-shadow: 0 0 22px 4px rgba(255, 220, 90, .85); } }
.meter.is-drain .meter__bar { animation: bar-drain .7s ease-out; }
@keyframes bar-drain { 0% { background: #fff6c2; box-shadow: 0 0 30px 8px rgba(255, 240, 160, .95); } 100% { background: rgba(0, 0, 0, .45); } }
.meter.is-full i.on { animation: none; }
.meter.is-full .meter__bar { border-color: #fff3a8; box-shadow: 0 0 14px 3px rgba(255, 210, 70, .75); position: relative; overflow: hidden; }
.meter.is-full .meter__bar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .85) 50%, transparent 70%); background-size: 250% 100%; animation: bar-shine 1.4s linear infinite; pointer-events: none; }
@keyframes bar-shine { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.meter__t { font: 900 1rem/1 var(--f-brand); margin: 0; min-width: 2.4em; }
.meter.is-full .meter__t { color: var(--gold); animation: full-txt .9s ease-in-out infinite alternate; }
@keyframes full-txt { to { transform: scale(1.12); text-shadow: 0 0 10px rgba(255, 220, 90, .9); } }
.meter .meter__ic { width: 34px; height: 34px; }
.meter--big i { width: 46px; height: 26px; }

/* תוויות קופצות */
.hpop { position: absolute; inset-inline-start: 50%; top: -6px; z-index: 5; pointer-events: none; font: 900 1.6rem/1 var(--f-brand); -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; animation: hpop 1.4s cubic-bezier(.2, 1.4, .4, 1) both; white-space: nowrap; }
.hpop--hp { color: #ff4d6a; } .hpop--heal { color: #6df09a; } .hpop--sp { color: #ffd84a; }
@keyframes hpop { 0% { transform: translate(-50%, 10px) scale(.4); opacity: 0; } 18% { transform: translate(-50%, -14px) scale(1.35); opacity: 1; } 70% { transform: translate(-50%, -26px) scale(1); opacity: 1; } 100% { transform: translate(-50%, -44px) scale(.9); opacity: 0; } }
[dir="rtl"] .hpop { inset-inline-start: auto; left: 50%; }

/* כפתור כוח העל: המספר לא עולה על הטקסט */
.mv--wide kbd { top: 6px; bottom: auto; }
.mv--sup .meter i { width: 22px; height: 12px; } .mv--sup .meter .meter__ic { display: none; } .mv--sup .meter__t { font-size: .9rem; }

@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .vit { gap: 6px 10px; }
  .hearts .hrt, .hrt-half { width: 26px; height: 26px; }
  .vit__n, .meter__t { font-size: .85rem; }
  .meter i { width: 22px; height: 13px; }
  .meter .meter__ic { width: 26px; height: 26px; }
  .hud__row--ab { display: none; }
  .hpop { font-size: 1.3rem; }
  .mv--sup .meter i { width: 16px; height: 10px; }
}
@media (prefers-reduced-motion: reduce) { .hud.is-hit, .hearts .hrt, .meter i, .meter__bar, .meter__t, .meter__bar::after { animation: none !important; } }
.mv--sup kbd { display: none; }
.hpop { direction: ltr; unicode-bidi: isolate; }
@media (hover: none), (max-width: 760px) { .moves kbd { display: none; } }

/* ============================================================
   20.10.2026 m3: קרב בטלפון בשני טורים. היריב משמאל, אני מימין (כמו במחשב).
   בכל טור: פס HUD דק ומתחתיו הקלף. שום דבר לא יושב על הקלפים.
   מתחת לקלפים: פס הבמה (צ'יפים, פסק דין, בלונים), ומתחתיו כפתורי המהלכים.
   ============================================================ */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .dp[data-screen="battle"] {
    --cut: 50%; --vh: 100vh; --pad: 7px; --gap: 8px; --colW: calc((100vw - 2 * var(--pad) - var(--gap)) / 2);
    --hudT: max(14px, calc(env(safe-area-inset-top) + 12px)); --hudH: 96px; --mvR: 180px; --stageMin: 196px;
    --cardT: calc(var(--hudT) + var(--hudH) + 14px);
    --cardH: max(150px, min(calc((var(--colW) - 10px) * 1.5), calc(var(--vh) - var(--cardT) - var(--mvR) - var(--stageMin))));
    --bandT: calc(var(--cardT) + var(--cardH) + 12px);
    --hrt: clamp(20px, calc((var(--colW) - 50px) / 5.5), 26px);
  }
  @supports (height: 100dvh) { .dp[data-screen="battle"] { --vh: 100dvh; } }
  /* רקע: חיתוך אלכסוני אנכי כמו במחשב, כל צד בצבע של הגיבור שלו */
  .dp[data-screen="battle"] .half--foe { clip-path: polygon(0 0, calc(var(--cut) + 3%) 0, calc(var(--cut) - 3%) 100%, 0 100%); }
  .dp[data-screen="battle"] .half--me { clip-path: polygon(calc(var(--cut) + 3% + 6px) 0, 100% 0, 100% 100%, calc(var(--cut) - 3% + 6px) 100%); }
  .dp[data-screen="battle"] .half--me::after { background: radial-gradient(80% 70% at 50% 45%, transparent 30%, rgba(8, 6, 26, .55)), repeating-conic-gradient(from 0deg at 75% 62%, rgba(255, 255, 255, .07) 0 6deg, transparent 6deg 14deg); }

  /* פס HUD: שם + תכונות, לבבות + 3/5, מד כוח העל. גובה קבוע כדי שהקלף יתחיל מיד מתחתיו */
  .bt .hud { top: var(--hudT); width: var(--colW) !important; height: var(--hudH); padding: 5px 7px 6px; gap: 3px; grid-template-rows: 28px auto; align-content: start; border-width: 2.5px; border-radius: 14px; box-shadow: 3px 4px 0 var(--ink); }
  .bt .hud--foe { left: var(--pad) !important; right: auto !important; }
  .bt .hud--me { top: var(--hudT); left: auto !important; right: var(--pad) !important; }
  .bt .hud__row { flex-wrap: nowrap; gap: 6px; }
  .bt .hud__name { font-size: clamp(.92rem, .8rem + .6vw, 1.12rem); line-height: 1.1; }
  .bt .hud__who { position: absolute; top: -11px; inset-inline-start: 10px; padding: 1px 8px; border-radius: 999px; background: var(--ink); color: var(--gold); border: 2px solid color-mix(in oklab, var(--gold) 55%, var(--ink)); font: 900 .64rem/1.25 var(--f-brand); white-space: nowrap; }
  .bt .hud__more { flex: none; min-height: 26px; padding: 0 8px; font-size: .66rem; box-shadow: 2px 2px 0 var(--ink); }
  .bt .vit { display: grid; gap: 4px; justify-items: start; }
  .bt .vit__hp, .bt .vit__sp { gap: 5px; }
  .bt .hearts { gap: 2px; }
  .bt .hearts .hrt, .bt .hrt-half { width: var(--hrt); height: var(--hrt); }
  .bt .vit__n, .bt .hud .meter__t { font-size: .8rem; min-width: 2.2em; }
  .bt .hud .meter { gap: 4px; }
  .bt .hud .meter .meter__ic { width: 20px; height: 20px; }
  .bt .hud .meter__bar { padding: 2px; gap: 2px; }
  .bt .hud .meter i { width: clamp(16px, calc((var(--colW) - 100px) / 3.4), 26px); height: 12px; }
  .bt .hpop { font-size: 1.15rem; }

  /* הקלפים: אחד בכל טור, ממורכז, מתחת ל-HUD */
  .bt .fc, .bt.has-coach .fc, .bt .fc--me, .bt.has-coach .fc--me { top: var(--cardT); height: var(--cardH); right: auto; translate: -50% 0; }
  .bt .fc--foe { left: calc(var(--pad) + var(--colW) / 2); rotate: 1.5deg; }
  .bt .fc--me { left: calc(100vw - var(--pad) - var(--colW) / 2); rotate: -1.5deg; }
  .bt .fc__body { animation-name: idle-a-m; }
  .bt .fc--foe .fc__body { animation-name: idle-b-m; }
  .bt .fc::after { bottom: -6%; }

  /* בלון דיבור: מתחת לקלף, הזנב מצביע למעלה אל הגיבור. לא מסתיר את הפנים ולא את ה-HUD */
  .bt .fc__balloon, .bt .fc--foe .fc__balloon, .bt .fc--me .fc__balloon { top: calc(100% + 16px); bottom: auto; left: 50%; right: auto; translate: -50% 0; max-width: calc(var(--colW) + 2px); width: max-content; padding: 8px 11px; border-radius: 16px; font-size: clamp(.8rem, .74rem + .3vw, .92rem); line-height: 1.35; transform-origin: 50% 0; }
  .bt .fc__balloon::after, .bt .fc--foe .fc__balloon::after, .bt .fc--me .fc__balloon::after { top: auto; bottom: calc(100% - 3px); left: calc(50% - 17px); right: auto; inset-inline: auto; width: 30px; height: 26px; transform: scaleY(-1); }
  .bt .fc--me .fc__balloon::after { left: calc(50% - 13px); transform: scale(-1, -1); }

  /* פס הבמה: בין תחתית הקלפים לכפתורים */
  .bt .stage { top: calc((var(--bandT) + var(--vh) - 92px) / 2); translate: -50% -50%; width: calc(100vw - 16px); }
  .bt .tick, .bt .boom--mid { top: calc((var(--bandT) + var(--vh) - 92px) / 2); }
  .bt .boom--foe { left: 25%; top: calc(var(--cardT) + var(--cardH) * .45); }
  .bt .boom--me { left: 75%; top: calc(var(--cardT) + var(--cardH) * .45); }
  .bt .verdict { max-width: 100%; }

  /* "איך משחקים?": המשולש גדול במרכז פס הבמה בזמן הבחירה (מנצל את המקום הריק), נעלם כשהצ'יפים נוחתים */
  .bt .tri-wrap { --tw: clamp(64px, calc((var(--vh) - var(--mvR) - var(--bandT)) * .44), 128px); top: calc(var(--bandT) + (var(--vh) - var(--mvR) - var(--bandT)) * .42); bottom: auto; right: auto; left: 50%; translate: -50% -50%; width: var(--tw); padding: 5px 5px 6px; border-radius: 16px; transition: opacity .25s; }
  .bt .tri-wrap { z-index: 3; }
  .bt .tri-wrap__q { width: 24px; height: 24px; top: -10px; font-size: .9rem; }
  .bt .tri-wrap__l { font-size: clamp(.56rem, calc(var(--tw) / 11), .8rem); }
  .dp[data-screen="battle"] .gsfx--duel { top: auto; left: auto; right: 10px; bottom: calc(var(--mvR) + 12px); translate: none; transition: opacity .25s; }
  .bt.is-busy .tri-wrap, .bt:has(.stage.is-slam) .tri-wrap, .dp:has(.stage.is-slam) .gsfx--duel { opacity: 0; pointer-events: none; }
  .bt .coach { left: 8px !important; right: 54px !important; width: auto !important; bottom: calc(var(--movesH) + 8px) !important; }
  .netp--bt { top: calc(var(--bandT) - 4px); }
  .dp:has(.drawer:not([hidden])) .gsfx--duel { opacity: 0; pointer-events: none; }
  .dp[data-screen="battle"]:has([data-result]) .gsfx--duel { top: max(12px, env(safe-area-inset-top)); bottom: auto; left: 12px; right: auto; opacity: 1; pointer-events: auto; }
}
@keyframes idle-a-m { 0% { transform: translateY(0) rotateY(-6deg) rotateZ(-.8deg); } 50% { transform: translateY(-4px) rotateY(3deg) rotateZ(.6deg); } 100% { transform: translateY(-2px) rotateY(6deg) rotateZ(-.3deg); } }
@keyframes idle-b-m { 0% { transform: translateY(-2px) rotateY(6deg) rotateZ(.8deg); } 50% { transform: translateY(-5px) rotateY(-3deg) rotateZ(-.6deg); } 100% { transform: translateY(0) rotateY(-6deg) rotateZ(.4deg); } }