/* ============================================================
   city.css · "מי מציל את העיר?" (אב-טיפוס, לא מקושר מהאתר)
   נבנה על הטוקנים של dy.css. כחול = אני (למטה), כתום = היריב (למעלה).
   תנועה: קפיצית (--spring), אף פעם לא לינארית. הכל נעצר ב-reduced motion.
   ============================================================ */
.city {
  --me: #4f9bff; --me-lo: #1d4fa8; --them: #ff9233; --them-lo: #b0510f;
  --go: #ff5a5a; --cream: #fff4dc; --sel: var(--gold);
  --skyline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cpath d='M0 120V70h18V44h14v26h10V58h16V30h8v-8h6v8h8v40h12V52h20v68h6V64h14V40h22v30h10V18h6V8h4v10h6v52h14V56h18v20h10V46h24v74h8V60h12V36h18v34h12V54h14V28h6v-6h6v6h6v42h16V62h22v58z' fill='%230a0b22'/%3E%3Cg fill='%23ffd25a' opacity='.55'%3E%3Crect x='70' y='40' width='3' height='4'/%3E%3Crect x='78' y='54' width='3' height='4'/%3E%3Crect x='170' y='26' width='3' height='4'/%3E%3Crect x='176' y='44' width='3' height='4'/%3E%3Crect x='252' y='66' width='3' height='4'/%3E%3Crect x='300' y='40' width='3' height='4'/%3E%3Crect x='330' y='34' width='3' height='4'/%3E%3C/g%3E%3C/svg%3E");
  --night-a: #2a1f5c; --night-b: #3b2a7a; --night-c: #17123a;
  min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr;
  background: var(--night-c); color: var(--text); overflow-x: clip;
}
.city .dic { display: inline-block; }
.dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--ink); flex: none; }
.dot--blue { background: var(--me); } .dot--orange { background: var(--them); }

/* ---------- רקע: לילה בעיר + השתלטות צבע של הגיבור הנבחר ---------- */
.cbg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: linear-gradient(180deg, var(--night-a) 0%, var(--night-b) 45%, var(--night-c) 100%); }
.cbg::before { content: ""; position: absolute; inset: 0; background: color-mix(in oklab, var(--sel) 55%, var(--night-c)); opacity: 0; transition: opacity .7s var(--ease), background-color .6s var(--ease); }
.cbg__art { position: absolute; inset: -10%; width: 120%; height: 120%; max-width: none; object-fit: cover; filter: blur(26px) saturate(1.5) brightness(.85); opacity: 0; transform: scale(1.12); transition: opacity .7s var(--ease), transform 1.2s var(--spring); }
.is-take .cbg::before { opacity: .55; }
.is-take .cbg__art { opacity: .45; transform: scale(1); }
.cbg__dots { position: absolute; inset: 0; background: radial-gradient(rgba(10, 11, 34, .35) 1.3px, transparent 1.8px) 0 0 / 9px 9px; }
.cbg__city { position: absolute; inset-inline: 0; bottom: 0; height: 30vh; opacity: .55;
  background: var(--skyline) no-repeat bottom / 100% 100%; }

/* ---------- סרגל עליון ---------- */
.ctop { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; padding: max(8px, env(safe-area-inset-top)) 12px 8px; background: linear-gradient(180deg, rgba(23, 18, 58, .92), rgba(23, 18, 58, .55) 80%, transparent); }
.ctop__brand { all: unset; cursor: pointer; display: grid; font: 900 .95rem/1 var(--f-brand); color: var(--gold); text-shadow: 2px 2px 0 var(--ink); transition: transform .4s var(--spring); }
.ctop__brand:hover { transform: rotate(-3deg) scale(1.05); }
.ctop__brand:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.ctop__hud { flex: 1; display: flex; justify-content: center; align-items: center; gap: 12px; min-width: 0; }
.ctop__hud .pill { font: 900 .9rem/1 var(--f-brand); background: var(--gold); color: var(--ink); padding: 6px 12px; border-radius: var(--r-pill); border: 2px solid var(--ink); box-shadow: 2px 3px 0 var(--ink); white-space: nowrap; }
.ctop__hud .who { display: none; align-items: center; gap: 6px; font: 700 .9rem var(--f-brand); white-space: nowrap; }
.ctop__how { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; border-radius: var(--r-pill); background: #fff; color: var(--ink); border: 2px solid var(--ink); box-shadow: 2px 3px 0 var(--ink); font: 900 .88rem/1 var(--f-brand); transition: transform .35s var(--spring); white-space: nowrap; min-height: 24px; }
.ctop__how:hover { transform: translate(-1px, -2px); }
.ctop__how:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.ctop__q { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); border: 2px solid var(--ink); font-size: .85rem; }
@media (min-width: 700px) {
  .ctop { padding-inline: 20px; }
  .ctop__brand { display: block; font-size: 1.25rem; }
  .ctop__hud .who { display: inline-flex; }
}
.cmain { min-height: 0; position: relative; }

/* כפתור ראשי */
.btn.go { --b-bg: var(--go); --b-fg: #fff; text-shadow: 1px 1px 0 var(--ink); min-height: 52px; font-size: 1.12rem; }
.btn.go:disabled { --b-bg: #5b5480; --b-fg: rgba(255, 255, 255, .75); text-shadow: none; box-shadow: 2px 2px 0 var(--ink); cursor: default; transform: none; }
.btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* ============================================================ פתיחה: ראו "מסך הפתיחה" בסוף הקובץ */
.home__guide { display: flex; align-items: center; gap: 10px; font-size: .98rem; cursor: pointer; min-height: 44px; }
.home__guide input { width: 22px; height: 22px; accent-color: var(--gold); }

/* ============================================================ בחירת צוות */
.squad { max-width: 1240px; margin: 0 auto; padding: 6px 16px 130px; }
.squad__head { text-align: center; margin: 4px auto 12px; max-width: 640px; }
.squad__head h2 { margin: 0; font: 900 clamp(1.6rem, 1.2rem + 2vw, 2.4rem)/1.1 var(--f-brand); }
.squad--blue .squad__head h2 { color: #9cc6ff; } .squad--orange .squad__head h2 { color: #ffc085; }
.squad__head p { margin: 6px 0 0; color: var(--muted); font-size: .98rem; text-wrap: balance; }
.slots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; max-width: 760px; margin: 0 auto; scroll-margin-top: 70px; }
.slot { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; gap: 4px; padding: 6px 4px 8px; text-align: center; border-radius: 12px; background: rgba(255, 255, 255, .07); border: 2px solid rgba(255, 255, 255, .18); animation: rise .6s var(--spring) both; animation-delay: calc(var(--n, 0) * .05s); }
.slot img { width: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: 7px; border: 2px solid var(--ink); box-shadow: 0 0 0 2px var(--a); animation: bob 4.8s ease-in-out infinite; animation-delay: calc(var(--n, 0) * -.9s); }
.slot--cap { border-color: var(--gold); background: rgba(245, 200, 66, .14); }
.slot__lbl { font: 900 .72rem/1 var(--f-brand); color: var(--gold); white-space: nowrap; }
.slot__name { font: 900 .78rem/1.15 var(--f-brand); overflow-wrap: anywhere; }
.slot__peak { font-size: .66rem; color: var(--muted); white-space: nowrap; }
.slot__swap { all: unset; box-sizing: border-box; max-width: 100%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 2px; font: 700 .66rem var(--f-brand); padding: 5px 5px; border-radius: var(--r-pill); background: #fff; color: var(--ink); border: 2px solid var(--ink); min-height: 22px; }
.slot__swap:focus-visible { outline: 3px solid var(--gold); }
.slot--ghost { grid-column: span 4; align-content: center; min-height: 120px; border-style: dashed; }
.slot--ghost small { color: var(--muted); }
@media (min-width: 700px) { .slot__name { font-size: .95rem; } .slot__peak { font-size: .8rem; } .slot__swap { font-size: .85rem; } }
.pool { margin-top: 22px; }
.pool__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.pool__head h3 { margin: 0; font: 900 1.3rem var(--f-brand); }
.pool__q { flex: 1 1 260px; max-width: 420px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: var(--r-pill); background: #fff; color: var(--ink); border: 2.5px solid var(--ink); box-shadow: 3px 4px 0 var(--ink); }
.pool__q input { all: unset; flex: 1; min-width: 0; min-height: 46px; font: 500 1rem var(--f-text); color: var(--ink); }
.pool__empty { text-align: center; color: var(--muted); }
.pool__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; }
.hc { all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 10px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 2px solid rgba(255, 255, 255, .14); text-align: start; transition: transform .4s var(--spring), border-color .2s, background .2s; }
.hc[hidden] { display: none; }
.hc:hover { transform: translateY(-3px); border-color: var(--a); background: rgba(255, 255, 255, .1); }
.hc:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.hc.is-in { border-color: rgba(79, 155, 255, .8); background: rgba(79, 155, 255, .13); }
.hc.is-cap { border-color: var(--gold); background: rgba(245, 200, 66, .15); box-shadow: 0 0 0 2px var(--gold); }
.hc.is-in::after { content: "בצוות"; position: absolute; top: 6px; inset-inline-start: 6px; font: 900 .72rem var(--f-brand); background: var(--me); color: #fff; padding: 2px 8px; border-radius: var(--r-pill); border: 2px solid var(--ink); }
.hc.is-cap::after { content: "קפטן"; background: var(--gold); color: var(--ink); }
.hc__art { position: relative; }
.hc__art img { width: 92px; aspect-ratio: 2/3; height: auto; object-fit: cover; border-radius: 9px; border: 2px solid var(--ink); box-shadow: 0 0 0 2px var(--a); }
.hc__win { position: absolute; bottom: -6px; inset-inline-end: -6px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--gold); border: 2px solid var(--ink); }
.hc__body { display: grid; gap: 5px; align-content: start; min-width: 0; }
.hc__name { font: 900 1.12rem/1.1 var(--f-brand); }
.hc__en { font-size: .72rem; color: var(--muted); letter-spacing: .04em; margin-top: -4px; text-align: end; }
.hc__trick { display: flex; gap: 6px; align-items: flex-start; font-size: .84rem; line-height: 1.4; color: var(--text); }
.hc__trick b { font-family: var(--f-brand); color: var(--gold); }
.tags { margin: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.tagc { display: inline-flex; align-items: center; gap: 4px; font: 700 .72rem/1 var(--f-brand); padding: 4px 8px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .12); }
.tagc--fam { background: var(--teal-lo); }
@media (max-width: 520px) {
  .hc { grid-template-columns: 74px minmax(0, 1fr); gap: 10px; padding: 8px; }
  .hc__art img { width: 74px; }
  .bars { gap: 1px; }
  .bar { font-size: .72rem; grid-template-columns: 18px 4.3em 1fr 1.2em; gap: 5px; }
  .bar__fill { height: 7px; }
  .hc__trick { font-size: .8rem; line-height: 1.35; }
  .hc__name { font-size: 1.02rem; }
  .hw-row--send { gap: 4px; }
  .hw-row--send .hw-card { width: 54px; }
  .hw-row--send .hw-cr { width: 80px; min-height: 90px; }
}
.squad__go { position: fixed; inset-inline: 0; bottom: 0; z-index: 25; display: grid; justify-items: center; gap: 4px; padding: 18px 16px max(14px, env(safe-area-inset-bottom)); background: linear-gradient(0deg, rgba(23, 18, 58, .97) 55%, transparent); }
.squad__go[data-swaps]::before { content: attr(data-swaps); font-size: .85rem; color: var(--muted); }
.squad__go .btn { width: min(100%, 420px); }

/* ---------- סרגלי מספרים (8-6-5-4-2) ---------- */
.bars { display: grid; gap: 3px; }
.bar { display: grid; grid-template-columns: 20px 4.6em 1fr 1.4em; align-items: center; gap: 6px; font-size: .78rem; }
.bar__ic .dic { width: 18px; height: 18px; }
.bar__lbl { color: var(--muted); white-space: nowrap; }
.bar__fill { display: block; height: 9px; border-radius: 6px; background: rgba(255, 255, 255, .12); overflow: hidden; border: 1.5px solid var(--ink); }
.bar__fill u { display: block; height: 100%; width: calc(var(--v) / 8 * 100%); background: linear-gradient(90deg, var(--teal-hi), #5fd3ff); border-radius: 5px; }
.bar.is-top .bar__fill u { background: linear-gradient(90deg, var(--gold-hi), var(--gold)); }
.bar__n { font: 900 .92rem/1 var(--f-brand); text-align: center; }
.bar.is-top .bar__n { color: var(--gold); }
.bars--mini { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.bars--mini .bar { grid-template-columns: auto auto; grid-template-rows: auto auto; justify-content: center; column-gap: 3px; row-gap: 3px; padding: 4px 2px; border-radius: 9px; background: rgba(255, 255, 255, .07); }
.bars--mini .bar__lbl { display: none; }
.bars--mini .bar__fill { grid-column: 1 / -1; height: 6px; width: 100%; }
.bars--mini .bar.is-hi { background: var(--gold); color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.bars--mini .bar.is-hi .bar__n { color: var(--ink); }

/* ============================================================ הלוח */
body[data-screen="board"] { height: 100vh; height: 100dvh; overflow: hidden; }
.game { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.legend { margin: 0 auto; display: flex; gap: 14px; justify-content: center; font: 700 .8rem var(--f-brand); color: var(--muted); padding: 0 12px 2px; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
@media (min-width: 700px) { .legend { display: none; } }
.board { width: 100%; max-width: 1180px; margin: 0 auto; padding: 6px 10px 10px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(auto, 1fr); gap: 8px; overflow-y: auto; overflow-x: hidden; align-content: stretch; overscroll-behavior: contain; }
.cr { position: relative; perspective: 1100px; border-radius: 16px; outline: 0; animation: bob 6s ease-in-out infinite; animation-delay: calc(var(--n) * -2s); }
.cr__flip { position: relative; height: 100%; transform-style: preserve-3d; transition: transform .9s var(--spring); }
.cr.is-down .cr__flip { transform: rotateY(180deg); }
.cr__front, .cr__back { backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 16px; border: 2.5px solid var(--ink); }
.cr__front { position: relative; height: 100%; display: flex; flex-direction: column; gap: 6px; padding: 0 0 8px; background: rgba(20, 16, 52, .78); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .16), 3px 4px 0 var(--ink); transition: box-shadow .35s var(--ease), transform .45s var(--spring); }
.cr__back { position: absolute; inset: 0; transform: rotateY(180deg); display: grid; place-content: center; justify-items: center; gap: 4px; text-align: center; padding: 8px;
  background: repeating-linear-gradient(45deg, #2f2470 0 10px, #3a2c86 10px 20px); box-shadow: 3px 4px 0 var(--ink); }
.cr__back b { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--gold); color: var(--ink); border: 3px solid var(--ink); font: 900 1.8rem var(--f-brand); }
.cr__back span { font: 900 .95rem var(--f-brand); } .cr__back small { color: var(--muted); font-size: .78rem; }
.cr__head { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 8px 6px 7px; background: var(--cream); color: var(--ink); border-radius: 13px 13px 0 0; border-bottom: 2.5px solid var(--ink); }
.cr__name { margin: 0; font: 900 .84rem/1.18 var(--f-brand); text-wrap: balance; min-height: 2.36em; display: grid; place-items: center; }
.cr__need { margin: 0; display: inline-flex; align-items: center; gap: 4px; font: 700 .76rem/1 var(--f-brand); background: #fff; border: 2px solid var(--ink); padding: 3px 7px; border-radius: var(--r-pill); white-space: nowrap; }
.cr__need b { font-weight: 900; }
.cr__tw { margin: 0; display: inline-flex; align-items: center; gap: 4px; font: 700 .7rem/1.15 var(--f-brand); background: var(--teal); color: var(--ink); padding: 3px 7px; border-radius: 9px; border: 2px solid var(--ink); text-align: start; }
.cr__tw--solo, .cr__tw--heist { background: #c9b4ff; } .cr__tw--closes { background: #ffd2a6; }
.cr__side { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; padding: 0 5px; }
.cr__side--me { justify-content: flex-start; }
.cr__head { flex: none; }
.cr__minis { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; min-height: 50px; align-content: center; }
.cr__tot { font: 900 1.7rem/1 var(--f-text); -webkit-text-stroke: .06em var(--ink); paint-order: stroke fill; text-shadow: 2px 2px 0 var(--ink); transition: color .3s; }
.cr__tot--me { color: var(--me); } .cr__tot--them { color: var(--them); }
.cr__tot.is-bump { animation: bump .6s var(--spring); }
.cr__vs { display: flex; align-items: center; gap: 6px; padding: 0 10px; font: 700 .7rem var(--f-brand); color: var(--muted); }
.cr__vs::before, .cr__vs::after { content: ""; flex: 1; height: 2px; background: rgba(255, 255, 255, .16); border-radius: 2px; }
.cr[data-lead="me"] .cr__front { box-shadow: inset 0 0 0 2px var(--me), 0 0 22px -4px var(--me), 3px 4px 0 var(--ink); }
.cr[data-lead="them"] .cr__front { box-shadow: inset 0 0 0 2px var(--them), 0 0 22px -4px var(--them), 3px 4px 0 var(--ink); }
.cr.is-pickable { cursor: pointer; }
.cr.is-pickable .cr__front { box-shadow: inset 0 0 0 2px rgba(245, 200, 66, .7), 3px 4px 0 var(--ink); }
.cr.is-pickable:hover .cr__front { transform: translateY(-3px); }
.cr.is-sel .cr__front { transform: translateY(-6px) rotate(-.6deg); box-shadow: 0 0 0 3px var(--gold), 0 0 30px -2px var(--gold), 5px 7px 0 var(--ink); }
.cr.is-target .cr__front { box-shadow: 0 0 0 3px var(--teal-hi), 0 0 26px -2px var(--teal-hi), 3px 4px 0 var(--ink); cursor: pointer; animation: glowp 1.6s ease-in-out infinite; }
.cr.is-closed .cr__front { filter: saturate(.45) brightness(.85); }
.cr__lock { position: absolute; top: 46%; left: 50%; translate: -50% -50%; display: none; align-items: center; gap: 4px; padding: 4px 10px; font: 900 .85rem var(--f-brand); background: var(--cream); color: var(--ink); border: 2.5px solid var(--ink); border-radius: 10px; transform: rotate(-8deg); box-shadow: 3px 3px 0 var(--ink); white-space: nowrap; }
.cr.is-closed .cr__lock { display: inline-flex; }
.cr.is-scored .cr__lock { display: none; }
.cr__prev { position: absolute; bottom: 64px; inset-inline-end: 6px; z-index: 3; font: 900 1.05rem/1 var(--f-brand); padding: 5px 9px; border-radius: var(--r-pill); background: var(--gold); color: var(--ink); border: 2.5px solid var(--ink); box-shadow: 2px 3px 0 var(--ink); transform: scale(0) rotate(-20deg); transition: transform .45s var(--spring); pointer-events: none; direction: ltr; }
.cr__prev.is-on { transform: scale(1) rotate(-6deg); }
.cr__prev.is-them { bottom: auto; top: 98px; }
.cr__stamp { position: absolute; z-index: 4; top: 50%; left: 50%; translate: -50% -50%; font: 900 clamp(1.15rem, .9rem + 1.2vw, 2rem)/1 var(--f-brand); padding: 8px 12px; border: 4px solid currentColor; border-radius: 10px; background: rgba(255, 255, 255, .92); opacity: 0; transform: scale(2.4) rotate(-24deg); white-space: nowrap; pointer-events: none; }
.cr__stamp.is-on { opacity: 1; transform: scale(1) rotate(-12deg); transition: transform .6s var(--spring), opacity .15s; }
.cr__stamp--blue { color: var(--me-lo); } .cr__stamp--orange { color: var(--them-lo); } .cr__stamp--none { color: #555; }
.cr.is-opening .cr__flip { animation: opening 1s var(--spring); }
@media (min-width: 700px) {
  .board { gap: 16px; padding: 8px 20px 14px; }
  .cr__name { font-size: 1.08rem; }
  .cr__need { font-size: .92rem; padding: 4px 10px; }
  .cr__tw { font-size: .84rem; }
  .cr__tot { font-size: 2.3rem; }
  .cr__minis { gap: 6px; min-height: 76px; }
  .cr__prev { font-size: 1.35rem; bottom: 86px; }
  .cr__prev.is-them { top: 118px; }
}

/* קלפים קטנים על הלוח (גב -> פנים בהיפוך) */
.mini { position: relative; width: clamp(34px, 10.4vw, 64px); aspect-ratio: 2/3; perspective: 500px; flex: none; }
.mini__in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .75s var(--spring); }
.mini__face, .mini__back { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 6px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.mini__face { object-fit: cover; border: 2px solid var(--me); box-shadow: 0 2px 0 var(--ink); }
.mini--orange .mini__face { border-color: var(--them); }
.mini__back { transform: rotateY(180deg); display: grid; place-items: center; font: 900 1rem var(--f-brand); font-style: normal; color: var(--ink); background: repeating-linear-gradient(45deg, var(--gold) 0 5px, #ffe9a0 5px 10px); border: 2px solid var(--ink); }
.mini.is-down .mini__in { transform: rotateY(180deg); }
.mini.is-glow { z-index: 2; }
.mini.is-glow .mini__face { box-shadow: 0 0 0 3px #fff, 0 0 18px 4px var(--a); animation: glow 1s ease-in-out infinite; }
.mini__v { position: absolute; bottom: -6px; left: 50%; translate: -50% 0; z-index: 2; font: 900 .72rem/1 var(--f-brand); background: #fff; color: var(--ink); border: 1.5px solid var(--ink); border-radius: var(--r-pill); padding: 2px 5px; }
.mini--ghost { display: grid; place-items: center; border: 2px dashed var(--them); border-radius: 6px; opacity: .85; }
.mini--ghost img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 5px; opacity: .4; }
.mini--ghost .dic { position: relative; z-index: 1; width: 22px; height: 22px; }

/* ---------- המגירה התחתונה: טיפ, מידע על הגיבור, היד, כפתור ---------- */
.dock { position: relative; z-index: 5; width: 100%; max-width: 920px; margin: 0 auto; display: grid; gap: 6px; padding: 8px 12px max(10px, env(safe-area-inset-bottom)); background: rgba(16, 12, 44, .9); border: 2.5px solid var(--ink); border-bottom: 0; border-radius: 22px 22px 0 0; box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, .7), inset 0 1.5px 0 rgba(255, 255, 255, .12); backdrop-filter: blur(8px); }
.tip { margin: 0; min-height: 2.9em; display: flex; align-items: center; justify-content: center; text-align: center; padding: 6px 12px; border-radius: 14px; background: #fff; color: var(--ink); border: 2px solid var(--ink); font: 700 .92rem/1.35 var(--f-text); text-wrap: balance; }
.tip:empty { visibility: hidden; }
.tip--say { background: var(--cream); font-family: var(--f-brand); font-weight: 900; }
.tip--guide { background: #e8f6ff; }
.tip.is-in > span { animation: tipin .5s var(--spring) both; }
.tip .dic { margin-inline-end: 4px; }
.tip__q { font-family: var(--f-brand); font-size: 1rem; }
.info { display: none; gap: 6px; }
.info.is-on { display: grid; animation: rise .45s var(--spring) both; }
.info__who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: .84rem; line-height: 1.35; }
.info__who > b { font: 900 1.05rem var(--f-brand); color: var(--gold); }
.info__trick { display: inline-flex; gap: 5px; align-items: flex-start; }
.info__trick b { font-family: var(--f-brand); }
.hand { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding-top: 14px; }
.hand.is-off { display: none; }
.hcard { all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: grid; justify-items: center; gap: 3px; animation: bob 4.6s ease-in-out infinite; animation-delay: calc(var(--n) * -.8s); transition: transform .45s var(--spring); }
.hcard__art { width: 100%; max-width: 74px; aspect-ratio: 2/3; border-radius: 8px; overflow: hidden; border: 2.5px solid var(--ink); box-shadow: 0 0 0 2px var(--me), 0 5px 10px rgba(0, 0, 0, .45); transition: box-shadow .3s; }
.hand--orange .hcard__art { box-shadow: 0 0 0 2px var(--them), 0 5px 10px rgba(0, 0, 0, .45); }
.hcard__art img { width: 100%; height: 100%; object-fit: cover; }
.hcard__name { font: 900 .7rem/1.1 var(--f-brand); text-align: center; overflow-wrap: anywhere; max-width: 100%; }
.hcard__n { position: absolute; top: -6px; inset-inline-start: -2px; display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px 2px 4px; border-radius: var(--r-pill); background: #fff; color: var(--ink); border: 2px solid var(--ink); font: 900 .78rem/1 var(--f-brand); }
.hcard__n .dic { width: 14px; height: 14px; }
.hcard:hover { transform: translateY(-4px); }
.hcard.is-on { transform: translateY(-12px) scale(1.07); animation: none; }
.hcard.is-on .hcard__art { box-shadow: 0 0 0 3px var(--gold), 0 0 22px 2px var(--a), 0 10px 16px rgba(0, 0, 0, .5); }
.hcard:focus-visible .hcard__art { outline: 3px solid var(--gold); outline-offset: 2px; }
.act { display: grid; gap: 6px; justify-items: center; }
.act:empty { display: none; }
.act .btn.go { width: 100%; max-width: 520px; }
.act__who { font: 900 .85rem var(--f-brand); }
.act__who--blue { color: var(--me); } .act__who--orange { color: var(--them); }
.choice { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; }
.choice__b { --b-bg: #fff; flex: 1 1 140px; max-width: 260px; flex-direction: column; gap: 2px; min-height: 48px; white-space: normal; text-align: center; line-height: 1.15; }
.choice__b small { font: 700 .7rem var(--f-text); color: var(--teal-lo); }
.choice__b.is-rec { --b-bg: var(--gold); }
@media (min-width: 700px) {
  .hcard__art { max-width: 96px; }
  .hcard__name { font-size: .85rem; }
  .tip { font-size: 1rem; }
  .info__who { font-size: .95rem; }
}
@media (max-height: 760px) and (max-width: 700px) { .hcard__art { max-width: 60px; } .cr__minis { min-height: 44px; } }

/* ---------- מסירת הטלפון ---------- */
.curtain { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: radial-gradient(70% 60% at 50% 40%, var(--me-lo), #0b1236); opacity: 0; transition: opacity .3s var(--ease); }
.curtain--orange { background: radial-gradient(70% 60% at 50% 40%, var(--them-lo), #2a1206); }
.curtain.is-in { opacity: 1; }
.curtain[hidden] { display: none; }
.curtain__box { max-width: 420px; text-align: center; display: grid; gap: 12px; justify-items: center; transform: scale(.8) rotate(-3deg); transition: transform .6s var(--spring); }
.curtain.is-in .curtain__box { transform: none; }
.curtain__kick { margin: 0; font: 900 1rem var(--f-brand); background: var(--ink); color: var(--gold); padding: 4px 12px; transform: rotate(-2deg); }
.curtain h2 { margin: 0; font: 900 clamp(2rem, 1.4rem + 3vw, 3rem)/1.1 var(--f-brand); -webkit-text-stroke: .05em var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--ink); }
.curtain p { margin: 0; font-size: 1.05rem; }

/* ---------- חדר מרחוק ---------- */
.lobby { max-width: 480px; margin: 0 auto; padding: 20px 16px 40px; display: grid; gap: 14px; justify-items: center; text-align: center; }
.lobby h2 { margin: 0; font: 900 2rem var(--f-brand); }
.lobby__code { margin: 0; font: 900 2.6rem/1 var(--f-brand); letter-spacing: .18em; background: var(--cream); color: var(--ink); padding: 10px 18px; border: 3px solid var(--ink); border-radius: 14px; box-shadow: 4px 5px 0 var(--ink); }
.lobby__msg { margin: 0; min-height: 1.4em; color: var(--teal-hi); }
.lobby__caps { display: flex; gap: 14px; }
.lobby__cap { display: grid; gap: 4px; justify-items: center; width: 120px; }
.lobby__cap img, .lobby__q { width: 100px; aspect-ratio: 2/3; object-fit: cover; border-radius: 10px; border: 3px solid var(--ink); box-shadow: 0 0 0 3px var(--me); }
.lobby__cap--orange img, .lobby__cap--orange .lobby__q { box-shadow: 0 0 0 3px var(--them); }
.lobby__q { display: grid; place-items: center; font: 900 2rem var(--f-brand); background: rgba(255, 255, 255, .08); }
.lobby__cap small { color: var(--muted); }
.dots::after { content: "..."; display: inline-block; animation: dots 1.4s steps(4, end) infinite; width: 1.2em; text-align: start; overflow: hidden; vertical-align: bottom; }

/* ============================================================ "איך משחקים" */
.how { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 12px; background: rgba(8, 6, 26, .78); opacity: 0; transition: opacity .3s var(--ease); }
.how[hidden] { display: none; }
.how.is-in { opacity: 1; }
.how__box { width: min(100%, 1180px); max-height: calc(100dvh - 24px); overflow: auto; background: var(--cream); color: var(--ink); border: 4px solid var(--ink); border-radius: 22px; box-shadow: 8px 10px 0 var(--ink); padding: 14px; display: grid; gap: 12px; transform: scale(.85) rotate(-2deg); transition: transform .6s var(--spring); }
.how.is-in .how__box { transform: none; }
.how__head { display: flex; align-items: center; justify-content: space-between; }
.how__head h2 { margin: 0; font: 900 1.6rem var(--f-brand); }
.how__skip { all: unset; cursor: pointer; font: 900 1rem var(--f-brand); padding: 8px 14px; border-radius: var(--r-pill); border: 2px solid var(--ink); min-height: 28px; }
.how__skip:focus-visible { outline: 3px solid var(--purple); }
.how__strip { list-style: none; margin: 0; padding: 0; display: grid; }
.hw { display: none; position: relative; background: #fffdf6; border: 3.5px solid var(--ink); box-shadow: 5px 6px 0 var(--ink); border-radius: 6px; padding: 12px; gap: 10px; }
.hw.is-on { display: grid; animation: panel .55s var(--spring) both; }
.hw__n { position: absolute; top: -12px; inset-inline-start: -10px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--gold); border: 3px solid var(--ink); font: 900 1.1rem var(--f-brand); }
.hw__cap { margin: 0; font: 900 1.2rem/1.3 var(--f-brand); padding-inline-start: 22px; text-wrap: balance; }
.hw__art { min-height: 170px; display: grid; place-items: center; border-radius: 4px; border: 2.5px solid var(--ink); padding: 14px 8px; background: radial-gradient(rgba(10, 11, 34, .3) 1.3px, transparent 1.8px) 0 0 / 9px 9px, linear-gradient(160deg, var(--night-b), var(--night-c)); color: var(--text); overflow: hidden; }
.hw__balloon { position: relative; margin: 6px 12px 4px; justify-self: center; text-align: center; padding: 12px 20px; border-radius: 50%; background: #fff; border: 3px solid var(--ink); box-shadow: 3px 4px 0 var(--ink); font: 900 1rem/1.35 var(--f-brand); text-wrap: balance; }
.hw__balloon::after { content: ""; position: absolute; bottom: calc(100% - 3px); inset-inline-end: 24%; width: 30px; height: 26px; transform: scaleY(-1) scaleX(-1); background: 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='%230e0b20' stroke-width='3.2' stroke-linejoin='round'/%3E%3Cpath d='M1 0h33v3H1z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center / contain; }
.hw-row { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.hw-cr { display: grid; gap: 3px; justify-items: center; align-content: center; width: 92px; min-height: 104px; padding: 6px; text-align: center; background: var(--cream); color: var(--ink); border: 2.5px solid var(--ink); border-radius: 10px; box-shadow: 3px 3px 0 var(--ink); font-size: .72rem; animation: bob 4.5s ease-in-out infinite; }
.hw-cr:nth-child(2) { animation-delay: -1.5s; } .hw-cr:nth-child(3) { animation-delay: -3s; }
.hw-cr b { font: 900 .78rem/1.15 var(--f-brand); }
.hw-cr em { font: 900 1.5rem/1 var(--f-brand); font-style: normal; color: var(--me-lo); }
.hw-cr:nth-child(2) em { color: var(--them-lo); }
.hw-cr.is-down { background: repeating-linear-gradient(45deg, #2f2470 0 8px, #3a2c86 8px 16px); color: var(--gold); }
.hw-cr.is-down b { font-size: 2rem; }
.hw-card { width: 70px; aspect-ratio: 2/3; border-radius: 8px; overflow: hidden; border: 2.5px solid var(--ink); display: grid; place-items: center; animation: bob 4s ease-in-out infinite; }
.hw-card img { width: 100%; height: 100%; object-fit: cover; }
.hw-card--blue { box-shadow: 0 0 0 3px var(--me); } .hw-card--orange { box-shadow: 0 0 0 3px var(--them); animation-delay: -2s; }
.hw-card.is-down { background: repeating-linear-gradient(45deg, var(--gold) 0 6px, #ffe9a0 6px 12px); font: 900 1.6rem var(--f-brand); color: var(--ink); }
.hw-arrow .dic { width: 34px; height: 34px; } .hw-arrow svg path { stroke: #fff; }
.hw .bars--mini { width: min(230px, 60vw); }
.hw-stamp { position: absolute; top: 50%; left: 50%; translate: -50% -50%; font: 900 1.4rem var(--f-brand); font-style: normal; color: var(--me-lo); background: rgba(255, 255, 255, .92); border: 4px solid currentColor; border-radius: 10px; padding: 4px 12px; transform: rotate(-12deg); }
.hw.is-on .hw-stamp { animation: stamp .7s var(--spring) .3s both; }
.how__foot { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.how__dots { display: flex; gap: 6px; width: 100%; justify-content: center; }
.how__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(10, 11, 34, .25); transition: transform .3s var(--spring), background .2s; }
.how__dots i.is-on { background: var(--ink); transform: scale(1.4); }
.how .btn--ghost { --b-fg: var(--ink); border-color: var(--ink); }
.how__next { min-width: 160px; }
@media (min-width: 900px) {
  .how__strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .hw { display: grid; grid-template-rows: auto 1fr auto; }
  .hw:nth-child(2) { transform: rotate(.6deg); } .hw:nth-child(3) { transform: rotate(-.5deg); }
  .how__dots, .how__prev { display: none; }
}

/* ============================================================ סיום */
.cend { position: fixed; inset: 0; z-index: 55; overflow-y: auto; overflow-x: hidden; background: radial-gradient(80% 60% at 50% 18%, color-mix(in oklab, var(--a, var(--gold)) 45%, var(--night-c)), var(--night-c) 75%); opacity: 0; transition: opacity .5s var(--ease); }
.cend[hidden] { display: none; }
.cend.is-in { opacity: 1; }
.cend__cv { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cend__sky { position: fixed; inset-inline: 0; bottom: 0; height: 24vh; opacity: .7; pointer-events: none; background: var(--skyline) no-repeat bottom / 100% 100%; }
.cend__in { position: relative; max-width: 1100px; margin: 0 auto; padding: 22px 16px max(30px, env(safe-area-inset-bottom)); display: grid; gap: 16px; justify-items: center; text-align: center; }
.cend__score { margin: 0; display: flex; align-items: center; gap: 12px; font: 900 1.05rem var(--f-brand); }
.sc { display: inline-flex; align-items: center; gap: 6px; } .sc b { font-size: 2rem; -webkit-text-stroke: .05em var(--ink); paint-order: stroke fill; }
.sc--blue b { color: var(--me); } .sc--orange b { color: var(--them); }
.sc__vs { color: var(--muted); font-size: .85rem; }
.cend__t { margin: 0; font: 900 clamp(2.4rem, 1.4rem + 5vw, 5rem)/1.02 var(--f-brand); color: #fff; -webkit-text-stroke: .06em var(--ink); paint-order: stroke fill; text-shadow: .06em .07em 0 #ef3e36; text-wrap: balance; animation: pop 1s var(--spring) .1s both; }
.cend--blue .cend__t { text-shadow: .06em .07em 0 var(--me-lo); } .cend--orange .cend__t { text-shadow: .06em .07em 0 var(--them-lo); }
.cend__sub { margin: -6px 0 0; font-size: 1.1rem; }
.cend__tie { margin: -8px 0 0; font: 700 .92rem var(--f-brand); background: rgba(255, 255, 255, .12); padding: 4px 12px; border-radius: var(--r-pill); }
.cend__mvp { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.cend__card { position: relative; width: min(46vw, 210px); aspect-ratio: 2/3; border-radius: 14px; border: 4px solid var(--ink); box-shadow: 0 0 0 4px var(--a), 0 0 50px 10px color-mix(in oklab, var(--a) 60%, transparent), 8px 10px 0 4px var(--ink); transform: rotate(-4deg); animation: hero 1.1s var(--spring) .25s both, bob 5s ease-in-out 1.4s infinite; }
.cend__card img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.cend__stamp { position: absolute; bottom: 10%; left: 50%; translate: -50% 0; display: inline-flex; align-items: center; gap: 6px; font: 900 1.2rem var(--f-brand); font-style: normal; color: var(--ink); background: var(--gold); border: 3px solid var(--ink); padding: 6px 12px; border-radius: 10px; transform: rotate(-10deg); box-shadow: 3px 3px 0 var(--ink); white-space: nowrap; animation: stamp .7s var(--spring) 1s both; }
.balloon-c { position: relative; max-width: 300px; margin: 0; padding: 16px 22px; border-radius: 50%; background: #fff; color: var(--ink); border: 3px solid var(--ink); box-shadow: 4px 5px 0 var(--ink); font: 900 1.05rem/1.35 var(--f-brand); text-wrap: balance; animation: pop .8s var(--spring) .7s both; }
.balloon-c b { display: block; color: var(--purple); }
.balloon-c::after { content: ""; position: absolute; top: calc(100% - 3px); inset-inline-end: 22%; width: 34px; height: 30px; transform: scaleX(-1); background: 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='%230e0b20' stroke-width='3.2' stroke-linejoin='round'/%3E%3Cpath d='M1 0h33v3H1z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center / contain; }
.cend__crises { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; text-align: start; }
.rc { background: var(--cream); color: var(--ink); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 5px 6px 0 var(--ink); padding: 12px; display: grid; gap: 8px; animation: rise .7s var(--spring) both; animation-delay: calc(.5s + var(--n) * .15s); }
.rc--blue { box-shadow: 5px 6px 0 var(--ink), inset 0 0 0 3px var(--me); } .rc--orange { box-shadow: 5px 6px 0 var(--ink), inset 0 0 0 3px var(--them); }
.rc header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rc h3 { margin: 0; font: 900 1.05rem/1.2 var(--f-brand); }
.rc__need { display: inline-flex; gap: 4px; align-items: center; font: 700 .8rem var(--f-brand); white-space: nowrap; }
.rs { display: grid; grid-template-columns: 3.4em 1fr auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: rgba(79, 155, 255, .15); }
.rs--orange { background: rgba(255, 146, 51, .17); }
.rs__who { font: 900 .85rem var(--f-brand); }
.rs__heroes { display: flex; flex-wrap: wrap; gap: 6px; font-size: .76rem; }
.rs__h { display: inline-grid; grid-template-columns: auto auto; align-items: center; gap: 2px 5px; }
.rs__h img { grid-row: span 2; width: 26px; aspect-ratio: 2/3; object-fit: cover; border-radius: 4px; border: 1.5px solid var(--ink); }
.rs__h b { font: 900 .9rem var(--f-brand); }
.rs__h small { grid-column: 2; color: #a03030; font-size: .68rem; }
.rs__team { display: inline-flex; align-items: center; gap: 3px; font: 700 .74rem var(--f-brand); color: var(--teal-lo); }
.rs__none { color: #6a6480; }
.rs__tot { font: 900 1.6rem/1 var(--f-brand); }
.rs--blue .rs__tot { color: var(--me-lo); } .rs--orange .rs__tot { color: var(--them-lo); }
.rc__res { margin: 0; font-size: .92rem; line-height: 1.4; }
.rc__stamp { display: inline-block; font: 900 .9rem var(--f-brand); padding: 2px 8px; border: 2.5px solid currentColor; border-radius: 6px; transform: rotate(-3deg); margin-inline-end: 4px; }
.rc--blue .rc__stamp { color: var(--me-lo); } .rc--orange .rc__stamp { color: var(--them-lo); }
.rc__why { margin: 0; font-size: .82rem; color: #4a4560; }
.cend__bench { margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; color: var(--muted); font-size: .92rem; }
.cend__cta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; width: 100%; }
.cend__cta .btn { flex: 1 1 200px; max-width: 320px; }
.cend--lost .cend__t { font-size: clamp(2rem, 1.2rem + 4vw, 4rem); }

/* כפתור הצלילים בסרגל העליון; בטלפון, בזמן משחק, "איך משחקים" מתקצר לסימן שאלה כדי שהכל ייכנס בשורה */
.gsfx--city { width: 34px; height: 34px; }
@media (max-width: 520px) {
  body[data-screen="board"] .ctop__howt { display: none; }
  body[data-screen="board"] .ctop__how { padding: 6px; }
  body[data-screen="board"] .ctop { gap: 8px; padding-inline: 10px; }
}
@media (min-width: 700px) { .gsfx--city { width: 38px; height: 38px; } }

/* ============================================================ מחשב: פריסה רחבה
   משברים גדולים במרכז, היריב (קלפים הפוכים) למעלה, היד שלי בשורה למטה, לוח צד עם סיבוב ומי מוביל.
   בטלפון ובמסכים צרים/נמוכים הכל נשאר כמו שהיה (.opp ו-.side מוסתרים). */
.opp, .side { display: none; }
@media (min-width: 1100px) and (min-height: 640px) {
  body[data-screen="board"] .ctop__hud .who { display: none; }
  .game { width: 100%; max-width: 1800px; margin: 0 auto; padding: 0 28px; column-gap: 24px;
    grid-template-columns: minmax(0, 1fr) clamp(260px, 19vw, 340px); grid-template-rows: auto minmax(0, 1fr) auto auto; }
  .legend { display: none; }
  .opp { grid-column: 1; grid-row: 1; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 2px 0 8px; }
  .opp__who { display: inline-flex; align-items: center; gap: 7px; font: 900 1rem var(--f-brand); color: #ffc085; white-space: nowrap; }
  .opp__who small { font: 700 .82rem var(--f-text); color: var(--muted); }
  .opp__cards { display: flex; gap: 8px; }
  .ocard { width: clamp(40px, 4.6vh, 58px); aspect-ratio: 2/3; display: grid; place-items: center; border-radius: 7px; border: 2.5px solid var(--ink);
    background: repeating-linear-gradient(45deg, var(--them) 0 6px, #ffc085 6px 12px); box-shadow: 0 0 0 2px var(--them-lo), 2px 4px 0 var(--ink);
    rotate: calc((var(--n) - 2) * 3deg); animation: bob 4.4s ease-in-out infinite; animation-delay: calc(var(--n) * -.7s); transition: transform .4s var(--spring); }
  .ocard b { font: 900 1.1rem var(--f-brand); color: var(--ink); }
  .ocard:hover { transform: translateY(6px) rotate(4deg); }
  .board { grid-column: 1; grid-row: 2; max-width: none; padding: 10px 10px 12px; gap: 20px; }
  .cr__name { font-size: 1.22rem; }
  .cr__need { font-size: 1rem; }
  .cr__head { padding: 10px 10px 9px; }
  .cr__tot { font-size: 2.6rem; }
  .cr__minis { gap: 8px; min-height: calc(clamp(52px, 7vh, 92px) * 1.5); }
  .mini { width: clamp(52px, 7vh, 92px); transition: transform .35s var(--spring); }
  .mini:hover { transform: scale(1.18) rotate(-3deg); z-index: 3; }
  .mini__face { border-width: 2.5px; border-radius: 8px; }
  .mini__back { border-radius: 8px; font-size: 1.4rem; }
  .mini__v { font-size: .85rem; }
  .cr.is-pickable:hover .cr__front { transform: translateY(-4px); box-shadow: inset 0 0 0 2px var(--gold), 0 0 24px -6px var(--gold), 4px 6px 0 var(--ink); }
  .cr__prev { font-size: 1.6rem; bottom: auto; top: calc(50% + 26px); }
  .cr__prev.is-them { top: 128px; }
  /* המגירה נפתחת לתוך הגריד: הטיפ והיד במרכז, המידע והכפתור בלוח הצד */
  .dock { display: contents; }
  .tip { grid-column: 1; grid-row: 3; justify-self: center; width: min(100%, 820px); margin-bottom: 6px; font-size: 1.05rem; }
  .hand { grid-column: 1; grid-row: 4; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px; padding: 22px 24px max(14px, env(safe-area-inset-bottom));
    background: rgba(16, 12, 44, .9); border: 2.5px solid var(--ink); border-bottom: 0; border-radius: 24px 24px 0 0; box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, .7), inset 0 1.5px 0 rgba(255, 255, 255, .12); backdrop-filter: blur(8px); }
  .hand.is-off { display: flex; }
  .hand.is-off:empty { min-height: calc(clamp(100px, 13vh, 150px) * 1.5 + 50px); }
  .hcard { width: clamp(100px, 13vh, 150px); }
  .hcard__art { max-width: none; border-radius: 10px; border-width: 3px; }
  .hcard__name { font-size: .95rem; }
  .hcard__n { font-size: .95rem; padding: 3px 8px 3px 6px; }
  .hcard__n .dic { width: 17px; height: 17px; }
  .hcard:hover { transform: translateY(-8px) rotate(-1.5deg) scale(1.04); }
  .hcard:hover .hcard__art { box-shadow: 0 0 0 3px var(--a), 0 0 18px 0 var(--a), 0 12px 18px rgba(0, 0, 0, .5); }
  .hcard.is-on { transform: translateY(-16px) scale(1.08); }
  .side { grid-column: 2; grid-row: 1 / 3; align-self: start; display: grid; gap: 10px; padding: 14px; margin-top: 4px; border-radius: 20px; background: rgba(16, 12, 44, .82); border: 2.5px solid var(--ink); box-shadow: 4px 5px 0 var(--ink), inset 0 1.5px 0 rgba(255, 255, 255, .12); }
  .side__round { display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: 4px 8px; padding: 8px 12px; border-radius: 14px; background: var(--gold); color: var(--ink); border: 2.5px solid var(--ink); box-shadow: 2px 3px 0 var(--ink); }
  .side__round > span { font: 900 1rem var(--f-brand); } .side__round > b { font: 900 2rem/1 var(--f-brand); } .side__round > small { font: 700 .9rem var(--f-brand); }
  .side__dots { grid-column: 1 / -1; display: flex; gap: 6px; }
  .side__dots i { flex: 1; height: 7px; border-radius: 4px; background: rgba(10, 11, 34, .2); }
  .side__dots i.is-done { background: var(--ink); } .side__dots i.is-now { background: #ef3e36; }
  .side__p { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2px 8px; padding: 9px 12px; border-radius: 14px; background: rgba(79, 155, 255, .14); border: 2px solid rgba(79, 155, 255, .5); }
  .side__p--orange { background: rgba(255, 146, 51, .14); border-color: rgba(255, 146, 51, .5); }
  .side__p > b { font: 900 1.1rem var(--f-brand); } .side__p > small { color: var(--muted); font-size: .8rem; }
  .side__n, .side__h { grid-column: 1 / -1; font-size: .9rem; } .side__n b { font: 900 1.25rem var(--f-brand); }
  .side__p--blue .side__n b { color: var(--me); } .side__p--orange .side__n b { color: var(--them); }
  .side__h { color: var(--muted); font-size: .82rem; }
  .side__goal { margin: 0; font-size: .85rem; line-height: 1.45; color: var(--muted); }
  .info { grid-column: 2; grid-row: 2; align-self: end; margin-bottom: 12px; padding: 12px; border-radius: 18px; background: rgba(16, 12, 44, .9); border: 2.5px solid var(--ink); box-shadow: 4px 5px 0 var(--ink); }
  .info__who { font-size: .92rem; }
  .bars--mini { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .act { grid-column: 2; grid-row: 3 / 5; align-self: end; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  .act .btn.go { min-height: 64px; font-size: 1.15rem; white-space: normal; line-height: 1.2; }
  .choice__b { flex: 1 1 100%; max-width: none; }
  /* בחירת צוות ומסך הסיום */
  .squad { max-width: 1600px; }
  .slots { max-width: 900px; gap: 14px; }
  .pool__grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
  .hc { grid-template-columns: 112px minmax(0, 1fr); }
  .hc__art img { width: 112px; }
  .cend__in { max-width: 1400px; }
  .cend__card { width: min(24vh, 230px); }
  .rs__h img { width: 38px; }
  .rs__h { font-size: .85rem; }
  .rc { padding: 14px 16px; }
}

/* ---------- תנועה ---------- */
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px) scale(.96); } }
@keyframes pop { from { opacity: 0; transform: scale(.4) rotate(-8deg); } }
@keyframes hero { from { opacity: 0; transform: scale(.3) rotate(-30deg); } }
@keyframes stamp { from { opacity: 0; transform: scale(2.6) rotate(-30deg); } }
@keyframes panel { from { opacity: 0; transform: translateX(-40px) rotate(2deg); } }
@keyframes tipin { from { opacity: 0; transform: translateY(8px) scale(.96); } }
@keyframes bump { 30% { transform: scale(1.45) rotate(-6deg); } }
@keyframes glow { 50% { box-shadow: 0 0 0 3px #fff, 0 0 28px 8px var(--a); } }
@keyframes glowp { 50% { box-shadow: 0 0 0 5px var(--teal-hi), 0 0 36px 2px var(--teal-hi), 3px 4px 0 var(--ink); } }
@keyframes opening { 0% { transform: rotateY(180deg) scale(.9); } 100% { transform: none; } }
@keyframes dots { from { width: 0; } }
@media (prefers-reduced-motion: reduce) {
  .city *, .city *::before, .city *::after { animation: none !important; transition-duration: .01ms !important; }
}
.cend__why { margin: 6px auto 0; max-width: 34ch; padding: 8px 14px; border-radius: 14px; background: rgba(255,255,255,.1); border: 2px solid rgba(255,255,255,.25); color: #fff; font: 700 .95rem/1.45 var(--f-brand); text-align: center; text-wrap: balance; }
.cend__why b { color: var(--gold); }

/* ============================================================
   מסך הפתיחה: לוגו קומיקס, תפריט, הדגמה מתנגנת מאחור, חותמות בפינה (כמו "קרב בפאנלים")
   ============================================================ */
body[data-screen="home"] .ctop { position: fixed; inset: 0 0 auto; background: none; pointer-events: none; }
body[data-screen="home"] .ctop > * { pointer-events: auto; }
body[data-screen="home"] .ctop__brand, body[data-screen="home"] .ctop__how { display: none; }
.ctt { position: relative; height: 100vh; height: 100dvh; min-height: 600px; overflow: hidden; }
.ctt__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)); }
.ctt__in { position: relative; z-index: 3; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(10px, 2.6vh, 28px); padding: max(56px, calc(env(safe-area-inset-top) + 44px)) 16px max(16px, env(safe-area-inset-bottom)); }
.ctt__stamps { position: absolute; z-index: 4; top: max(12px, env(safe-area-inset-top)); inset-inline-start: 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 .6s var(--spring) 1.1s both; }
.ctt__stamps b { color: var(--gold); }

/* הלוגו: פאנל לילה עם קו רקיע, כוכב פיצוץ, צופר חירום. נוחת בטריקה ומתנדנד קלות */
.ctl { position: relative; margin: 0; width: min(540px, 92vw); aspect-ratio: 400 / 270; flex: none; container-type: inline-size; animation: ctl-slam .95s var(--spring) .1s both; }
.ctl__wob { position: absolute; inset: 0; display: block; animation: ctl-wob 3.4s var(--ease-in-out) 1.4s infinite alternate; }
.ctl__art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(8px 10px 0 rgba(10, 11, 34, .55)); }
.ctl__panel { transform-box: fill-box; transform-origin: center; transform: rotate(-3deg); animation: ctl-panel .8s var(--spring) both; }
.ctl__burst { transform-box: fill-box; transform-origin: center; animation: ctl-burst .9s var(--spring) .3s both, ctl-pulse 2.6s var(--ease-in-out) 1.5s infinite alternate; }
.ctl__siren { transform-box: fill-box; transform-origin: 50% 100%; animation: ctl-siren .8s var(--spring) .5s both; }
.ctl__rays { transform-box: fill-box; transform-origin: center; animation: ctl-flash 1.1s var(--ease-in-out) 1.3s infinite alternate; }
.ctl__beams { transform-box: fill-box; transform-origin: 50% 100%; animation: ctl-beam 4s var(--ease-in-out) infinite alternate; }
.ctl__win { animation: ctl-win 2.6s var(--ease-in-out) infinite alternate; animation-delay: calc(var(--n) * -.37s); }
.ctl__a, .ctl__b { position: absolute; left: 50%; font-family: var(--f-brand); font-weight: 900; line-height: 1; white-space: nowrap; }
.ctl__a { top: 31%; translate: -50% 0; rotate: -5deg; padding: .08em .45em .16em; 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: 9cqw; animation: ctl-drop .75s var(--spring) .55s both; }
.ctl__b { top: 51%; translate: -50% 0; rotate: -3deg; color: #fff; font-size: 15.5cqw; -webkit-text-stroke: .075em var(--ink); paint-order: stroke fill; text-shadow: .045em .055em 0 var(--ink), .085em .1em 0 #ef3e36, 0 0 .5em rgba(255, 90, 90, .35); animation: ctl-m .85s var(--spring) .18s both; }
@keyframes ctl-slam { 0% { opacity: 0; transform: scale(2.6) rotate(-14deg); } 35% { opacity: 1; } 100% { transform: none; } }
@keyframes ctl-wob { 0% { transform: rotate(-1.4deg) scale(1); } 100% { transform: rotate(1.1deg) scale(1.022); } }
@keyframes ctl-panel { from { transform: rotate(-12deg) scale(.6); } }
@keyframes ctl-burst { from { transform: scale(0) rotate(-50deg); } }
@keyframes ctl-pulse { to { transform: scale(1.035) rotate(2.5deg); } }
@keyframes ctl-siren { from { opacity: 0; transform: translateY(-60px) scale(.4) rotate(-20deg); } }
@keyframes ctl-flash { 0% { opacity: .25; transform: scale(.88); } 100% { opacity: 1; transform: scale(1.06); } }
@keyframes ctl-beam { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes ctl-win { 0%, 40% { opacity: 1; } 100% { opacity: .35; } }
@keyframes ctl-drop { from { opacity: 0; transform: translateY(-70px) rotate(-24deg) scale(.6); } }
@keyframes ctl-m { from { opacity: 0; transform: scale(1.9); } 40% { opacity: 1; } }

/* תפריט: כפתורים גדולים לאגודל */
.cmenu { display: grid; gap: 10px; width: min(440px, 100%); flex: none; }
.cmenu__cpu { display: grid; gap: 6px; }
.clvl { display: flex; gap: 6px; align-items: center; justify-content: center; color: #fff; font: 800 .85rem var(--f-brand); animation: rise .7s var(--spring) .6s both; }
.clvl button { min-height: 36px; min-width: 64px; padding: 0 14px; border-radius: 999px; background: rgba(10, 11, 34, .55); color: #fff; border: 2px solid rgba(255, 255, 255, .4); font: 800 .9rem var(--f-brand); cursor: pointer; touch-action: manipulation; transition: transform .35s var(--spring); }
.clvl button:hover { transform: translateY(-2px); }
.clvl button[aria-pressed="true"] { background: var(--gold); color: var(--ink); border-color: var(--ink); }
.ctb { 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: rise .7s var(--spring) .55s both; touch-action: manipulation; }
.cmenu > :nth-child(2) { animation-delay: .63s; } .cmenu > :nth-child(3) { animation-delay: .71s; } .cmenu > :nth-child(4) { animation-delay: .79s; }
.ctb:hover { transform: translate(-3px, -3px) rotate(-1deg); box-shadow: 8px 9px 0 var(--ink); }
.ctb:active { transform: translate(2px, 2px); box-shadow: 2px 3px 0 var(--ink); transition-duration: .08s; }
.ctb:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.ctb__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); }
.ctb:hover .ctb__ic { transform: rotate(6deg) scale(1.08); }
.ctb__t { display: grid; gap: 1px; min-width: 0; }
.ctb b { font: 900 1.38rem/1.1 var(--f-brand); }
.ctb small { font: 600 .84rem/1.3 var(--f-text); color: #4a3f7a; }
.ctb--cpu { background: linear-gradient(180deg, #ff6b5b, #e2343e); color: #fff; }
.ctb--cpu b { text-shadow: 2px 2px 0 var(--ink); }
.ctb--cpu small { color: #fff1ea; }
.ctb--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; }
.ctb--howto:hover { box-shadow: none; border-color: #fff; }
.ctb--howto b { font-size: 1.15rem; }
.ctb__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); }
.ctlinks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; flex: none; }
.ctlink { display: inline-flex; align-items: 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; }
.ctlink:hover, .ctlink:focus-visible { border-color: #fff; background: rgba(255, 255, 255, .14); }
.squad__guide { justify-content: center; margin-top: 4px; color: var(--text); }

/* ההדגמה: לוח קטן עם 3 משברים, גיבורים עפים משני הצדדים, חשיפה ו"ניצל!" */
.catt { --cw: min(210px, 15vw); position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; pointer-events: none; filter: blur(1.6px) saturate(.95) brightness(.72); }
.catt__board { display: grid; grid-template-columns: repeat(3, var(--cw)); gap: clamp(calc(var(--cw) * .3), 21vw, 440px); }   /* desktop: the outer crises flank the menu */
.catt__col { display: grid; justify-items: center; gap: calc(var(--cw) * .07); }
.catt__h { position: relative; width: calc(var(--cw) * .62); aspect-ratio: 2 / 3; border-radius: 10px; border: 3.5px solid var(--ink); background: #0c1030; box-shadow: 0 0 0 3px color-mix(in oklab, var(--a, #f5c842) 80%, #fff), 6px 7px 0 2px var(--ink); opacity: 0;
  transition: transform .85s var(--spring), opacity .3s var(--ease), filter .4s var(--ease); transition-delay: calc(var(--n) * .16s); }
.catt__h img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; display: block; }
.catt__h--them { transform: translateX(-80vw) rotate(-30deg); }
.catt__h--me { transform: translateX(80vw) rotate(30deg); transition-delay: calc(var(--n) * .16s + .08s); }
.catt__q { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 7px; font: 900 calc(var(--cw) * .3)/1 var(--f-brand); font-style: normal; color: #fff; text-shadow: 2px 2px 0 var(--ink);
  background: radial-gradient(rgba(10, 11, 34, .35) 1.3px, transparent 1.8px) 0 0 / 7px 7px, var(--them-lo); transition: transform .5s var(--spring); }
.catt__h--me .catt__q { background: radial-gradient(rgba(10, 11, 34, .35) 1.3px, transparent 1.8px) 0 0 / 7px 7px, var(--me-lo); }
.catt__h b { position: absolute; bottom: -12px; inset-inline-start: -12px; display: grid; place-items: center; min-width: 1.8em; height: 1.8em; border-radius: 50%; background: var(--gold); color: var(--ink); border: 3px solid var(--ink); font: 900 calc(var(--cw) * .13)/1 var(--f-brand); transform: scale(0); transition: transform .5s var(--spring); }
.catt__cr { position: relative; width: var(--cw); padding: calc(var(--cw) * .06) 6px; border-radius: 12px; background: var(--paper); color: var(--ink); border: 4px solid var(--ink); box-shadow: 5px 6px 0 var(--ink); text-align: center; opacity: 0; transform: scale(.5) rotate(-8deg);
  transition: transform .6s var(--spring), opacity .25s var(--ease); transition-delay: calc(var(--n) * .1s); }
.catt__name { margin: 0; font: 900 calc(var(--cw) * .12)/1.1 var(--f-brand); }
.catt__need { margin: 3px 0 0; display: flex; justify-content: center; align-items: center; gap: 4px; font: 700 calc(var(--cw) * .085)/1.1 var(--f-text); color: #4a3f7a; }
.catt__stamp { position: absolute; top: 50%; left: 50%; translate: -50% -50%; rotate: -12deg; padding: .08em .4em .14em; border: 3px solid var(--ink); border-radius: 8px; background: var(--me); color: #fff; font: 900 calc(var(--cw) * .17)/1 var(--f-brand); font-style: normal; text-shadow: 2px 2px 0 var(--ink); white-space: nowrap; box-shadow: 3px 4px 0 var(--ink); opacity: 0; transform: scale(2.4);
  transition: transform .45s var(--spring), opacity .15s; transition-delay: calc(var(--n) * .18s); }
.catt__col[data-w="them"] .catt__stamp { background: var(--them); }
.catt__col[data-w="tie"] .catt__stamp { background: #8a84b8; }
.catt[data-ph=""] * { transition: none !important; }
.catt:is([data-ph="deal"], [data-ph="in"], [data-ph="reveal"], [data-ph="verdict"]) .catt__cr { opacity: 1; transform: none; }
.catt:is([data-ph="in"], [data-ph="reveal"], [data-ph="verdict"]) .catt__h { opacity: 1; }
.catt:is([data-ph="in"], [data-ph="reveal"], [data-ph="verdict"]) .catt__h--them { transform: rotate(-3deg); }
.catt:is([data-ph="in"], [data-ph="reveal"], [data-ph="verdict"]) .catt__h--me { transform: rotate(3deg); }
.catt:is([data-ph="reveal"], [data-ph="verdict"]) .catt__q { transform: scale(0) rotate(30deg); }
.catt:is([data-ph="reveal"], [data-ph="verdict"]) .catt__h b { transform: none; }
.catt[data-ph="verdict"] .catt__col[data-w="me"] .catt__h--me, .catt[data-ph="verdict"] .catt__col[data-w="them"] .catt__h--them { transform: scale(1.1) rotate(-2deg); filter: drop-shadow(0 0 18px color-mix(in oklab, var(--a, #f5c842) 80%, #fff)); }
.catt[data-ph="verdict"] .catt__col[data-w="me"] .catt__h--them { transform: translateX(-10px) rotate(-14deg) scale(.88); filter: grayscale(.75) brightness(.7); }
.catt[data-ph="verdict"] .catt__col[data-w="them"] .catt__h--me { transform: translateX(10px) rotate(14deg) scale(.88); filter: grayscale(.75) brightness(.7); }
.catt[data-ph="verdict"] .catt__stamp { opacity: 1; transform: none; }
.catt[data-ph="out"] .catt__h, .catt[data-ph="out"] .catt__cr { transition: transform .7s var(--ease), opacity .45s var(--ease) .15s; transition-delay: calc(var(--n) * .08s); }
.catt[data-ph="out"] .catt__h { opacity: 0; transform: translateY(-90vh) rotate(-24deg); }
.catt[data-ph="out"] .catt__h--me { transform: translateY(-90vh) rotate(24deg); }
.catt[data-ph="out"] .catt__cr { opacity: 0; transform: scale(.7) rotate(6deg); }

@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .ctt__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)); }
  .ctt__in { justify-content: space-between; gap: 8px; }
  .ctl { width: min(380px, 96vw); }
  .cmenu { gap: 9px; }
  .ctb { min-height: 62px; grid-template-columns: 48px minmax(0, 1fr); padding: 6px 12px; box-shadow: 4px 5px 0 var(--ink); }
  .ctb__ic { width: 48px; height: 48px; font-size: 1.5rem; }
  .ctb b { font-size: 1.22rem; }
  .ctb small { font-size: .76rem; }
  .ctb--howto { min-height: 46px; }
  .catt { --cw: min(27vw, 150px); place-items: start center; padding-top: 30vh; filter: blur(1px) saturate(.95) brightness(.8); }
  .catt__board { gap: 4vw; }
  .ctt__stamps { font-size: .78rem; padding: 5px 10px; }
}
@media (max-height: 700px) and (max-width: 760px) {
  .ctl { width: min(320px, 86vw); }
  .ctb { min-height: 56px; } .ctb small { display: none; }
  .catt { padding-top: 26vh; }
}
@media (min-width: 1700px) and (min-height: 950px) {
  .ctl { width: 620px; }
  .cmenu { width: 480px; }
}

/* ============================================================
   חוויה מלאה: שמיים שמשתנים לאורך היום, תיבת הודעות אחת, סירנות, הגדלת קלף, דף משבר,
   סימוני הדרכה, גרירה, פאנל פתיחה וסיום, ופריסה לטלפון בלי גלילה
   ============================================================ */
@property --sky-a { syntax: '<color>'; inherits: true; initial-value: #2a1f5c; }
@property --sky-b { syntax: '<color>'; inherits: true; initial-value: #3b2a7a; }
@property --sky-c { syntax: '<color>'; inherits: true; initial-value: #17123a; }
.city { --sky-a: var(--night-a); --sky-b: var(--night-b); --sky-c: var(--night-c); --sun-x: 70%; --sun-y: 34vh; --sun-o: 0; --sun: #ffd25a;
  transition: --sky-a 1.6s var(--ease), --sky-b 1.6s var(--ease), --sky-c 1.6s var(--ease); }
.city[data-sky="morning"] { --sky-a: #2d5f9e; --sky-b: #6b5fb0; --sky-c: #2a2160; --sun-x: 90%; --sun-y: 4vh; --sun-o: .7; }
.city[data-sky="noon"] { --sky-a: #2878b8; --sky-b: #4d6cc0; --sky-c: #1f2a6a; --sun-x: 50%; --sun-y: 52vh; --sun-o: .6; }
.city[data-sky="dusk"] { --sky-a: #5a2f86; --sky-b: #b04f6e; --sky-c: #2a1846; --sun-x: 10%; --sun-y: 3vh; --sun-o: .75; --sun: #ff8a5c; }
.city[data-sky="night"] { --sky-a: #141038; --sky-b: #251a55; --sky-c: #0b0920; --sun-x: 88%; --sun-y: 52vh; --sun-o: .55; --sun: #fff3c4; }
.cbg { background: linear-gradient(180deg, var(--sky-a) 0%, var(--sky-b) 45%, var(--sky-c) 100%); }
.cbg__city::before { content: ""; position: absolute; left: var(--sun-x); bottom: calc(100% + var(--sun-y)); width: 15vmin; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; opacity: var(--sun-o);
  background: radial-gradient(circle at 40% 38%, #fff 0 18%, var(--sun) 46%, transparent 70%); filter: blur(.5px); scale: .8; transition: left 1.8s var(--ease), bottom 1.8s var(--ease), opacity 1s, background 1.2s; }

/* ---------- תיבת ההודעות: מקום אחד קבוע, כל אירוע בתורו ---------- */
.tip { position: relative; min-height: 3.2em; border-radius: 6px; border-width: 3px; box-shadow: 3px 4px 0 var(--ink); background: #fff; }
.tip--say { background: #fff3c4; cursor: pointer; }
.tip--say::before { content: ""; position: absolute; top: -11px; left: 50%; width: 18px; height: 18px; translate: -50% 0; rotate: 45deg; background: inherit; border-top: 3px solid var(--ink); border-left: 3px solid var(--ink); border-radius: 3px 0 0 0; }
.tip.is-new { animation: tipflash .9s var(--spring); }
@keyframes tipflash { 0% { transform: scale(.94); box-shadow: 0 0 0 0 rgba(245, 200, 66, .9), 3px 4px 0 var(--ink); } 40% { transform: scale(1.03); box-shadow: 0 0 0 7px rgba(245, 200, 66, .55), 3px 4px 0 var(--ink); } 100% { transform: none; box-shadow: 0 0 0 0 rgba(245, 200, 66, 0), 3px 4px 0 var(--ink); } }
.cr.is-focus .cr__front { animation: focus 1.1s var(--ease-in-out) infinite; z-index: 2; }
@keyframes focus { 50% { box-shadow: 0 0 0 4px #fff, 0 0 30px 6px var(--gold), 3px 4px 0 var(--ink); transform: translateY(-3px); } }

/* ---------- סירנה כשהמשבר צמוד ---------- */
.cr.is-close .cr__front::after { content: ""; position: absolute; inset: -5px; border-radius: 19px; pointer-events: none; animation: siren 1.3s steps(1, end) infinite; }
@keyframes siren { 0% { box-shadow: 0 0 0 2px rgba(255, 74, 74, .85), 0 0 18px 2px rgba(255, 74, 74, .55); } 50% { box-shadow: 0 0 0 2px rgba(79, 155, 255, .85), 0 0 18px 2px rgba(79, 155, 255, .55); } }

/* ---------- ראש המשבר: סצנה קטנה וכפתור מידע ---------- */
.cr__head { position: relative; padding-inline: 20px 26px; }
.cr__scene { position: absolute; top: 5px; inset-inline-start: 5px; font-size: .95rem; opacity: .9; pointer-events: none; }
.cr__info { all: unset; box-sizing: border-box; position: absolute; top: -9px; inset-inline-end: -8px; z-index: 3; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 1.35rem; transition: transform .35s var(--spring); }
.cr__info:hover { transform: scale(1.12) rotate(-8deg); }
.cr__info:focus-visible { outline: 3px solid var(--gold); }
@media (min-width: 700px) { .cr__scene { font-size: 1.25rem; top: 7px; } .cr__head { padding-inline: 30px 32px; } }

/* ---------- שורת מצב עליונה בטלפון ---------- */
.legend { width: 100%; max-width: 560px; justify-content: space-between; align-items: center; padding: 0 12px 2px; color: #fff; }
.legend > span { gap: 6px; white-space: nowrap; }
.legend small { color: var(--muted); font-weight: 700; }
.legend__r { font: 900 .8rem var(--f-brand); background: var(--gold); color: var(--ink); padding: 2px 9px; border-radius: 999px; border: 2px solid var(--ink); }
.pips { display: inline-flex; gap: 3px; }
.pips i { width: 9px; height: 13px; border-radius: 2px; border: 1.5px solid var(--ink); background: repeating-linear-gradient(45deg, var(--them) 0 3px, #ffc085 3px 6px); }
body[data-screen="board"] .ctop__hud .pill { display: none; }
@media (min-width: 700px) { body[data-screen="board"] .ctop__hud .pill { display: inline-block; } }

/* ---------- כפתור הגדלה (זכוכית) ---------- */
.zbtn { position: absolute; z-index: 3; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); box-shadow: 1px 2px 0 var(--ink); cursor: pointer; font-size: .85rem; transition: transform .3s var(--spring); }
.zbtn:hover { transform: scale(1.15) rotate(-6deg); }
.zbtn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.hc__art .zbtn { bottom: -6px; inset-inline-start: -6px; }
.hcard .zbtn { top: -8px; inset-inline-end: -4px; width: 26px; height: 26px; }
.slot__art { position: relative; display: block; width: 100%; }
.slot__art img { display: block; }
.slot__art .zbtn { bottom: -6px; inset-inline-start: -6px; width: 24px; height: 24px; }
.info__who .zbtn, .csheet__h .zbtn { position: static; flex: none; }
[data-zi] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.hand .hcard { touch-action: none; }
.pool__f { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px; }
.pool__f button { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; min-height: 34px; padding: 4px 11px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 2px solid rgba(255, 255, 255, .35); font: 800 .85rem var(--f-brand); color: #fff; transition: transform .3s var(--spring), background .2s; touch-action: manipulation; }
.pool__f button:hover { transform: translateY(-2px); }
.pool__f button:focus-visible { outline: 3px solid var(--gold); }
.pool__f button[aria-pressed="true"] { background: var(--gold); color: var(--ink); border-color: var(--ink); box-shadow: 2px 3px 0 var(--ink); }
.hc__peak { display: inline-flex; align-items: center; gap: 4px; font: 800 .8rem var(--f-brand); color: var(--gold); }

/* ---------- הגדלת קלף ---------- */
.zoom { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); background: rgba(8, 6, 26, .88); opacity: 0; transition: opacity .25s var(--ease); }
.zoom[hidden] { display: none; }
.zoom.is-in { opacity: 1; }
.zoom__box { display: grid; justify-items: center; gap: 10px; }
.zoom__card { all: unset; cursor: pointer; position: relative; display: block; width: min(86vw, calc((100dvh - 120px) * 2 / 3), 520px); aspect-ratio: 2 / 3; perspective: 1600px; }
.zoom.is-in .zoom__card { animation: zoomin .65s var(--spring); }
@keyframes zoomin { from { transform: scale(.55) rotate(-8deg); opacity: 0; } }
.zoom__in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .8s var(--spring); }
.zoom__card.is-flip .zoom__in { transform: rotateY(180deg); }
.zoom__front, .zoom__back { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 18px; border: 4px solid var(--ink); backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 0 0 4px var(--a), 0 0 60px 6px color-mix(in oklab, var(--a) 50%, transparent), 10px 12px 0 2px var(--ink); }
.zoom__front { object-fit: cover; background: #0c1030; }
.zoom__back { transform: rotateY(180deg); box-sizing: border-box; overflow: auto; display: flex; flex-direction: column; gap: 9px; padding: 18px 16px; background: radial-gradient(rgba(10, 11, 34, .08) 1.2px, transparent 1.7px) 0 0 / 8px 8px, var(--cream); color: var(--ink); text-align: start; }
.zoom__name { font: 900 1.8rem/1.05 var(--f-brand); }
.zoom__back small { color: #6a6480; letter-spacing: .05em; margin-top: -6px; }
.zoom__pow { display: flex; gap: 6px; align-items: flex-start; font: 700 .95rem/1.35 var(--f-text); }
.zoom__back q { font: 900 1.05rem/1.3 var(--f-brand); color: var(--purple, #5b3fd0); }
.zoom__trick { display: flex; gap: 6px; align-items: flex-start; font-size: .92rem; line-height: 1.4; padding: 8px 10px; border-radius: 10px; background: #fff; border: 2px solid var(--ink); }
.zoom__trick b { font-family: var(--f-brand); }
.zoom__back .bar__lbl { color: #4a3f7a; }
.zoom__back .bar__fill { background: rgba(10, 11, 34, .1); }
.zoom__back .bar.is-top .bar__n { color: #b07800; }
.zoom__back .tagc { background: rgba(10, 11, 34, .1); }
.zoom__back .tagc--fam { background: var(--teal-hi); }
.zoom__story { font-size: .84rem; line-height: 1.5; color: #4a4560; }
.zoom__hint { margin: 0; color: var(--muted); font-size: .85rem; }
.zoom__x { all: unset; box-sizing: border-box; cursor: pointer; position: fixed; top: max(12px, env(safe-area-inset-top)); inset-inline-end: 14px; z-index: 2; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--ink); border: 3px solid var(--ink); box-shadow: 2px 3px 0 var(--ink); transition: transform .3s var(--spring); }
.zoom__x:hover { transform: rotate(90deg) scale(1.08); }
.zoom__x:focus-visible { outline: 3px solid var(--gold); }

/* ---------- דף משבר (מגירה מלמטה) ---------- */
.csheet { position: fixed; inset: 0; z-index: 75; display: flex; align-items: flex-end; justify-content: center; background: rgba(8, 6, 26, .62); opacity: 0; transition: opacity .25s var(--ease); }
.csheet[hidden] { display: none; }
.csheet.is-in { opacity: 1; }
.csheet__box { position: relative; box-sizing: border-box; width: min(100%, 560px); max-height: 84dvh; overflow: auto; display: grid; gap: 10px; padding: 8px 16px max(18px, env(safe-area-inset-bottom)); background: var(--cream); color: var(--ink); border: 4px solid var(--ink); border-bottom: 0; border-radius: 24px 24px 0 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, .5); transform: translateY(100%); transition: transform .55s var(--spring); }
.csheet.is-in .csheet__box { transform: none; }
.csheet__grab { justify-self: center; width: 46px; height: 5px; border-radius: 3px; background: rgba(10, 11, 34, .25); }
.csheet__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.csheet__head .zoom__x { position: static; width: 40px; height: 40px; }
.csheet__scene { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--gold); border: 3px solid var(--ink); font-size: 1.8rem; transform: rotate(-5deg); box-shadow: 2px 3px 0 var(--ink); }
.csheet__head h2 { margin: 0; font: 900 1.3rem/1.15 var(--f-brand); }
.csheet__story { margin: 4px 0 0; font-size: .95rem; line-height: 1.4; color: #3a3460; }
.csheet__rules { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 2.5px solid var(--ink); }
.csheet__rules p { margin: 0; display: flex; gap: 7px; align-items: flex-start; font-size: .9rem; line-height: 1.4; }
.csheet__side { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: rgba(79, 155, 255, .16); border: 2px solid rgba(29, 79, 168, .45); }
.csheet__side--orange { background: rgba(255, 146, 51, .16); border-color: rgba(176, 81, 15, .45); }
.csheet__who { margin: 0; display: flex; align-items: center; gap: 7px; font: 900 1rem var(--f-brand); }
.csheet__who b { margin-inline-start: auto; font-size: 1.5rem; }
.csheet__side--blue .csheet__who b { color: var(--me-lo); } .csheet__side--orange .csheet__who b { color: var(--them-lo); }
.csheet__heroes { display: grid; gap: 6px; }
.csheet__h { display: flex; align-items: center; gap: 10px; padding: 4px; border-radius: 10px; background: rgba(255, 255, 255, .6); }
.csheet__h img { width: 38px; aspect-ratio: 2/3; object-fit: cover; border-radius: 5px; border: 2px solid var(--ink); }
.csheet__h > span { flex: 1; display: grid; }
.csheet__h b { font: 900 .95rem var(--f-brand); }
.csheet__h small { display: inline-flex; align-items: center; gap: 4px; font: 800 .85rem var(--f-brand); color: #3a3460; }
.csheet__note, .csheet__none { margin: 0; font-size: .88rem; color: #4a4560; }
@media (min-width: 700px) {
  .csheet { align-items: center; }
  .csheet__box { border-bottom: 4px solid var(--ink); border-radius: 24px; transform: scale(.85) translateY(40px); padding-bottom: 20px; }
}

/* ---------- סימוני הדרכה ---------- */
.coach { position: fixed; inset: 0; z-index: 90; opacity: 0; transition: opacity .3s var(--ease); }
.coach[hidden] { display: none; }
.coach.is-in { opacity: 1; }
.coach__hole { position: fixed; border-radius: 18px; box-shadow: 0 0 0 200vmax rgba(8, 6, 26, .74); outline: 3px solid var(--gold); outline-offset: 2px; pointer-events: none; animation: coachp 1.6s var(--ease-in-out) infinite; }
@keyframes coachp { 50% { outline-offset: 7px; } }
.coach__bub { position: fixed; inset-inline: 16px; max-width: 440px; margin-inline: auto; display: grid; gap: 10px; justify-items: center; padding: 14px 16px; background: #fff; color: var(--ink); border: 3.5px solid var(--ink); border-radius: 16px; box-shadow: 5px 6px 0 var(--ink); text-align: center; animation: pop .6s var(--spring) .15s both; }
.coach__bub p { margin: 0; font: 900 1.08rem/1.4 var(--f-brand); text-wrap: balance; }
.coach__bub small { display: block; margin-top: 4px; font: 600 .86rem/1.4 var(--f-text); color: #4a4560; }
.coach__bub .btn { min-width: 140px; }

/* ---------- גרירה ---------- */
.dragghost { position: fixed; top: 0; left: 0; z-index: 95; width: 62px; aspect-ratio: 2/3; object-fit: cover; border-radius: 8px; border: 3px solid var(--ink); box-shadow: 0 0 0 3px var(--gold), 6px 10px 18px rgba(0, 0, 0, .55); pointer-events: none; }
body.is-dragging, body.is-dragging * { cursor: grabbing !important; }
.cr.is-drop .cr__front { transform: translateY(-6px) scale(1.03); box-shadow: 0 0 0 4px var(--gold), 0 0 34px 4px var(--gold), 5px 7px 0 var(--ink); }

/* ---------- פאנל פתיחה ---------- */
.cintro { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); overflow: auto;
  background: var(--skyline) no-repeat bottom / 100% 26vh, radial-gradient(90% 70% at 70% 10%, #ffd9a0 0%, #6b5fb0 45%, #2a2160 100%); opacity: 0; transition: opacity .35s var(--ease); cursor: pointer; }
.cintro[hidden] { display: none; }
.cintro.is-in { opacity: 1; }
.cintro__box { width: min(100%, 860px); display: grid; gap: 12px; justify-items: center; text-align: center; }
.cintro__kick { margin: 0; font: 900 1.05rem var(--f-brand); background: var(--ink); color: var(--gold); padding: 5px 14px; border: 2.5px solid #fff; transform: rotate(-2deg); animation: pop .6s var(--spring) both; }
.cintro h2 { margin: 0; font: 900 clamp(2rem, 1.3rem + 4vw, 3.6rem)/1.05 var(--f-brand); color: #fff; -webkit-text-stroke: .07em var(--ink); paint-order: stroke fill; text-shadow: .05em .06em 0 var(--ink), .09em .1em 0 #ef3e36; animation: ctl-m .8s var(--spring) .35s both; }
.cintro__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: 100%; }
.cintro__cr { position: relative; display: grid; gap: 6px; justify-items: center; align-content: start; padding: 14px 12px; background: var(--cream); color: var(--ink); border: 3.5px solid var(--ink); border-radius: 8px; box-shadow: 5px 6px 0 var(--ink); text-align: center; animation: rise .7s var(--spring) both; animation-delay: calc(.7s + var(--n) * .16s); rotate: calc((var(--n) - 1) * 1.5deg); }
.cintro__scene { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--gold); border: 3px solid var(--ink); font-size: 2rem; transform: rotate(-6deg); }
.cintro__cr b { font: 900 1.1rem/1.15 var(--f-brand); }
.cintro__cr span { font-size: .9rem; line-height: 1.35; color: #3a3460; }
.cintro__cr small { display: inline-flex; gap: 4px; align-items: center; font: 800 .8rem var(--f-brand); padding: 3px 9px; border-radius: 999px; border: 2px solid var(--ink); background: #fff; }
.cintro__cr.is-down { background: repeating-linear-gradient(45deg, #2f2470 0 10px, #3a2c86 10px 20px); color: #fff; align-content: center; }
.cintro__cr.is-down span { color: #fff; }
.cintro__cr.is-down small { background: none; border: 0; color: var(--gold); padding: 0; }
.cintro__q { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--gold); color: var(--ink); border: 3px solid var(--ink); font-size: 1.8rem; }
.cintro__goal { margin: 0; font: 900 1.05rem var(--f-brand); color: #fff; text-shadow: 2px 2px 0 var(--ink); }
.cintro .btn.go { min-width: 220px; animation: rise .6s var(--spring) 1.3s both; }

/* ---------- פאנל סיום: ככה ניצלה העיר ---------- */
.cend__story { width: 100%; display: grid; gap: 10px; justify-items: center; }
.cend__kick { margin: 0; font: 900 1rem var(--f-brand); background: var(--ink); color: var(--gold); padding: 4px 12px; border: 2px solid #fff; transform: rotate(-1.5deg); }
.cend__row { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cs { position: relative; display: grid; gap: 4px; justify-items: center; align-content: start; padding: 12px 8px 10px; background: var(--cream); color: var(--ink); border: 3px solid var(--ink); border-radius: 8px; box-shadow: 4px 5px 0 var(--ink); text-align: center; animation: rise .7s var(--spring) both; animation-delay: calc(.6s + var(--n) * .15s); }
.cs--blue { box-shadow: 4px 5px 0 var(--ink), inset 0 0 0 3px var(--me); } .cs--orange { box-shadow: 4px 5px 0 var(--ink), inset 0 0 0 3px var(--them); }
.cs__scene { font-size: 1.6rem; }
.cs__name { font: 900 1rem/1.1 var(--f-brand); }
.cs__score { font: 900 1.4rem/1 var(--f-brand); direction: ltr; }
.cs__score i { font-style: normal; } .cs__me { color: var(--me-lo); } .cs__th { color: var(--them-lo); }
.cs__stamp { font: 900 .9rem/1 var(--f-brand); font-style: normal; padding: 4px 8px; border: 2.5px solid currentColor; border-radius: 6px; transform: rotate(-5deg); background: #fff; }
.cs--blue .cs__stamp { color: var(--me-lo); } .cs--orange .cs__stamp { color: var(--them-lo); } .cs--none .cs__stamp { color: #6a6480; }
.cs__line { font-size: .8rem; line-height: 1.35; color: #3a3460; }
.cend__more { --b-fg: #fff; }
.cend__crises[hidden] { display: none; }
.cend__short { display: none; }
@media (min-width: 700px) { .cend__in { gap: 12px; padding-top: 16px; } .cend__card { width: min(20vh, 190px); } .cend__t { font-size: clamp(2.2rem, 1.2rem + 3.6vw, 4rem); } }

/* ---------- מילון ב"איך משחקים" ---------- */
.gloss { display: grid; gap: 12px; width: 100%; text-align: start; }
.gloss__col { display: grid; gap: 6px; }
.gloss h3 { margin: 0; font: 900 1.05rem var(--f-brand); color: var(--gold); }
.gloss p { margin: 0; display: grid; grid-template-columns: 22px auto 1fr; gap: 8px; align-items: center; font-size: .86rem; }
.gloss p b { font: 900 .92rem var(--f-brand); }
.gloss small { color: var(--muted); font-size: .78rem; }
@media (min-width: 900px) {
  .how__strip > .hw:nth-child(5) { grid-column: 1 / -1; }
  .gloss { grid-template-columns: 1fr 1fr; }
}

/* ============================================================ טלפון: הכל במסך אחד ============================================================ */
@media (max-width: 699px) {
  /* בחירת צוות: הרשימה נגללת בתוך עצמה, השאר קבוע */
  body[data-screen="squad"] { height: 100vh; height: 100dvh; overflow: hidden; }
  .squad { height: 100%; display: flex; flex-direction: column; padding: 2px 12px 0; }
  .squad__head { margin: 0 auto 6px; flex: none; }
  .squad__head h2 { font-size: 1.45rem; }
  .squad__head p { font-size: .84rem; margin-top: 3px; }
  .squad__guide { min-height: 34px; font-size: .84rem; margin-top: 2px; }
  .squad__guide input { width: 18px; height: 18px; }
  .slots { flex: none; gap: 5px; }
  .slot { padding: 4px 3px 6px; gap: 2px; border-radius: 10px; }
  .slot__art { max-width: 50px; }
  .slot__peak { display: none; }
  .slot__name { font-size: .66rem; }
  .slot__lbl { font-size: .62rem; }
  .slot--ghost { min-height: 0; }
  .pool { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: 8px; }
  .pool__head { flex: none; margin-bottom: 6px; gap: 6px; }
  .pool__head h3 { font-size: 1rem; }
  .pool__q { flex: 1 1 60%; box-shadow: 2px 3px 0 var(--ink); }
  .pool__q input { min-height: 40px; font-size: 16px; }
  .pool__grid { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 2px 2px 12px; align-content: start; }
  .hc { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 6px; }
  .hc__art img { width: 100%; }
  .hc .bars, .hc .tags, .hc__en { display: none; }
  .hc__name { font-size: .98rem; }
  .hc__trick { font-size: .74rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .hc.is-in::after { top: 10px; inset-inline-start: 10px; }
  .squad__go { position: static; flex: none; padding: 8px 0 max(10px, env(safe-area-inset-bottom)); background: none; }
  .squad__go .btn { min-height: 50px; }

  /* הלוח: היד כמניפה */
  .hand { gap: 0; padding-top: 16px; padding-inline: 4px; }
  .hcard { margin-inline: -2px; transform: rotate(calc(var(--k) * 4deg)) translateY(calc(var(--ka) * 5px)); }
  .hcard:hover { transform: rotate(calc(var(--k) * 4deg)) translateY(calc(var(--ka) * 5px - 4px)); }
  .hcard.is-on { transform: translateY(-14px) scale(1.1); z-index: 2; }
  .info__who { gap: 2px 8px; align-items: center; }
  .info__trick { margin: 0; display: flex; font-size: .8rem; line-height: 1.35; }
  .info__bonus { margin: 0; display: flex; flex-wrap: wrap; gap: 4px; }
  .dock { gap: 5px; padding-top: 10px; }
  .tip { font-size: .9rem; padding: 6px 10px; }

  /* סיום: מסך אחד */
  .cend__in { gap: 10px; padding: 14px 14px max(16px, env(safe-area-inset-bottom)); }
  .cend__t { font-size: clamp(1.8rem, 1.2rem + 4vw, 2.6rem); }
  .cend--lost .cend__t { font-size: clamp(1.6rem, 1.1rem + 3.4vw, 2.3rem); }
  .cend__sub { font-size: .95rem; }
  .cend__mvp { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; align-items: center; text-align: start; }
  .cend__card { grid-row: span 2; width: min(28vw, 118px); border-width: 3px; box-shadow: 0 0 0 3px var(--a), 0 0 30px 4px color-mix(in oklab, var(--a) 60%, transparent), 5px 6px 0 2px var(--ink); }
  .cend__stamp { font-size: .8rem; padding: 3px 7px; }
  .cend__why { margin: 0; font-size: .82rem; padding: 6px 10px; text-align: start; }
  .balloon-c { border-radius: 16px; padding: 8px 12px; font-size: .86rem; max-width: none; }
  .balloon-c::after { display: none; }
  .cend__row { gap: 7px; }
  .cs { padding: 8px 4px; }
  .cs__scene { font-size: 1.2rem; }
  .cs__name { font-size: .85rem; }
  .cs__score { font-size: 1.15rem; }
  .cs__stamp { font-size: .72rem; padding: 3px 5px; }
  .cs__line { font-size: .7rem; }
  .cend__bench { font-size: .8rem; }
  .cend__cta { flex-wrap: nowrap; gap: 6px; }
  .cend__cta .btn { flex: 1 1 0; min-width: 0; min-height: 48px; padding-inline: 8px; font-size: .95rem; }
  .cend__long { display: none; } .cend__short { display: inline; }

  /* פתיחה: כרטיסים בשורות */
  .cintro__row { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .cintro__cr { grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: start; gap: 2px 12px; padding: 10px 12px; rotate: 0deg; }
  .cintro__scene, .cintro__q { grid-row: span 3; width: 48px; height: 48px; font-size: 1.6rem; }
  .cintro__cr span { font-size: .84rem; }
  .cintro__cr.is-down { align-content: start; }
}
@media (max-width: 699px) and (max-height: 760px) {
  .squad__head p { display: none; }
  .cend__sub { display: none; }
  .cs__line { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .city { transition: none; }
  .hcard { transition: none; }
}
.cend__crises .cend__bench { grid-column: 1 / -1; }
@media (max-width: 400px) {
  .legend { padding-inline: 8px; gap: 6px; font-size: .74rem; }
  .legend__b small { display: none; }
  .pips i { width: 7px; height: 11px; }
  .pips { gap: 2px; }
}
/* מסכים צרים: הסמלים בפינות העליונות, השם מתחתיהם ברוחב מלא */
@media (max-width: 699px) {
  .cr__head { padding: 22px 5px 7px; }
  .cr__scene { top: 4px; }
  .cr__info { top: -10px; inset-inline-end: -8px; }
  .cr__need { white-space: normal; text-align: center; justify-content: center; max-width: 100%; box-sizing: border-box; }
  .cr__name { min-height: 0; }
}
/* מנוע city-3: מהפך, ויתור, המשברים במסך הקפטן */
.ls-badge { margin: 0; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: #ef3e36; color: #fff; border: 2.5px solid var(--ink); box-shadow: 2px 3px 0 var(--ink); font: 900 .9rem var(--f-brand); text-shadow: 1px 1px 0 var(--ink); animation: pop .6s var(--spring) both, bob 2.4s ease-in-out .6s infinite; }
.cs__conc { font: 800 .7rem var(--f-brand); padding: 1px 8px; border-radius: 999px; background: rgba(10, 11, 34, .1); color: #4a4560; }
.sq-crs { margin: 6px 0 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 5px; }
.sq-crs__k { flex: 1 1 100%; font: 800 .78rem var(--f-brand); color: var(--muted); }
.sq-cr { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 10px; background: var(--cream); color: var(--ink); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); font-size: .8rem; }
.sq-cr b { font: 900 .85rem var(--f-brand); }
.sq-cr small { display: inline-flex; align-items: center; gap: 2px; font: 700 .72rem var(--f-brand); color: #4a3f7a; }
.sq-cr--q { background: repeating-linear-gradient(45deg, #2f2470 0 6px, #3a2c86 6px 12px); color: #fff; }
.sq-cr--q b { color: var(--gold); }
@media (max-width: 699px) { .sq-crs__k { display: none; } .sq-cr { padding: 2px 7px; } }

/* 20.10.2026: המספרים בחלון המידע - ברור מה הכי חזק */
.bars--mini .bar.is-peak { background: linear-gradient(180deg, #ffe27a, var(--gold)); color: var(--ink); box-shadow: 0 0 0 2px var(--ink), 0 0 14px rgba(255, 210, 70, .6); }
.bars--mini .bar.is-peak .bar__n { color: var(--ink); }
.bars--mini .bar.is-peak .bar__fill u { background: var(--ink); }
@media (min-width: 1000px) {
  .info { padding: 16px 18px; gap: 10px; background: #15103a; position: relative; z-index: 3; }
  .info__who > b { font-size: 1.35rem; }
  .info__peak { padding: 3px 10px; border-radius: 999px; background: var(--gold); color: var(--ink); font: 900 .9rem var(--f-brand); display: inline-flex; gap: 4px; align-items: center; }
  .info__peak svg { width: 16px; height: 16px; }
  .info__trick { font-size: .98rem; line-height: 1.45; }
  .bars--info { grid-template-columns: 1fr; gap: 6px; }
  .bars--info .bar { grid-template-columns: 24px max-content minmax(40px, 1fr) 1.4em; grid-template-rows: auto; justify-content: stretch; column-gap: 10px; padding: 7px 12px; border-radius: 12px; font-size: 1rem; }
  .bars--info .bar__lbl { display: block; font: 800 1rem var(--f-brand); }
  .bars--info .bar__ic svg { width: 22px; height: 22px; }
  .bars--info .bar__fill { grid-column: auto; height: 12px; border-radius: 6px; }
  .bars--info .bar__n { font: 900 1.45rem/1 var(--f-brand); text-align: center; }
  .bars--info .bar.is-peak { transform: scale(1.03); }
  .bars--info .bar.is-peak .bar__lbl { white-space: nowrap; }
  .bars--info .bar.is-hi:not(.is-peak) { background: rgba(79, 155, 255, .22); color: #fff; box-shadow: 0 0 0 2px var(--me); }
  .bars--info .bar.is-hi:not(.is-peak) .bar__n { color: #fff; }
}
@media (min-width: 1000px) { .bars--info .bar.is-peak .bar__lbl { color: var(--ink); } .bars--info .bar { column-gap: 8px; padding: 7px 10px; } }