/* ============================================================
   codes.css · גיבורי קוד (Hero Codenames) v1
   על הטוקנים של dy.css. אדום מול כחול, אזרחים בצבע נייר, הנבל סגול-שחור.
   תנועה קפיצית בלבד (--spring / --ease), הכל נעצר בלי js-motion.
   ============================================================ */
.codes {
  --red: #ff4a5c; --red-lo: #a3142a; --blue: #3f8cff; --blue-lo: #163f9a;
  --civ: #efe2c6; --trap: #1b0f2e; --trap-hi: #a678e8;
  --team: var(--gold);
  --bg-a: #2a1f5c; --bg-b: #17123a;
  min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr;
  background: var(--bg-b); color: var(--text); overflow-x: clip;
}
.codes.is-red { --team: var(--red); }
.codes.is-blue { --team: var(--blue); }
.codes .dic { display: inline-block; }
.c--red { color: #ff8a96; } .c--blue { color: #8fbcff; }
.tdot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink); vertical-align: -1px; flex: none; }
.tdot--red { background: var(--red); } .tdot--blue { background: var(--blue); }

/* רקע: לילה שמקבל את צבע הקבוצה שבתור */
.kbg { position: fixed; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--bg-a), var(--bg-b) 70%); }
.kbg::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 70% at 50% 0%, color-mix(in oklab, var(--team) 38%, transparent), transparent 70%); transition: background .8s var(--ease); }
.kbg__dots { position: absolute; inset: 0; background: radial-gradient(rgba(10, 11, 34, .4) 1.3px, transparent 1.8px) 0 0 / 9px 9px; }

/* ---------- סרגל עליון ---------- */
.ktop { 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, .94), rgba(23, 18, 58, .6) 80%, transparent); }
.ktop__back { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; font: 700 .9rem var(--f-brand); min-height: 40px; padding-inline: 4px; }
.ktop__back:hover { color: var(--text); }
.ktop__backt { display: none; }
.ktop__brand { all: unset; cursor: pointer; font: 900 1.15rem/1 var(--f-brand); color: var(--gold); text-shadow: 2px 2px 0 var(--ink); transition: transform .4s var(--spring); white-space: nowrap; }
.ktop__brand:hover { transform: rotate(-3deg) scale(1.05); }
.ktop__brand:focus-visible, .ktop__back:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.ktop__hud { flex: 1; display: flex; justify-content: center; min-width: 0; }
.ktop__hud .pill { font: 900 .95rem/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); letter-spacing: .08em; }
.ktop__how { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 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; }
.ktop__how:hover { transform: translate(-1px, -2px); }
.ktop__how:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.ktop__q { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); border: 2px solid var(--ink); font-size: .85rem; }
.ktop__howt { display: none; }
@media (min-width: 640px) {
  .ktop { padding-inline: 20px; }
  .ktop__backt, .ktop__howt { display: inline; }
  .ktop__how { padding-inline: 8px 12px; }
  .ktop__brand { font-size: 1.35rem; }
}
.kmain { min-width: 0; position: relative; }

.btn.go { --b-bg: var(--gold); --b-fg: var(--ink); min-height: 52px; font-size: 1.12rem; }
.btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.linkbtn { all: unset; cursor: pointer; color: var(--gold); font: 700 .95rem var(--f-brand); text-decoration: underline; text-underline-offset: 4px; padding: 6px; }
.linkbtn:focus-visible { outline: 2px solid var(--gold); border-radius: 4px; }
.kick { display: inline-block; margin: 0; background: var(--ink); color: var(--gold); font: 900 .9rem var(--f-brand); padding: 4px 12px; transform: rotate(1deg); }
.lead { margin: 0; color: var(--muted); font-size: var(--fs-lead); line-height: 1.55; max-width: 34ch; text-wrap: balance; }

/* ============================================================ פתיחה */
.home, .setup, .join, .spy { position: relative; max-width: 620px; margin: 0 auto; padding: 18px 16px 48px; display: grid; gap: 18px; justify-items: center; text-align: center; }
.home__float { position: absolute; inset: 0 0 auto; height: 320px; pointer-events: none; z-index: -1; }
.home__float img { position: absolute; width: 86px; aspect-ratio: 2/3; object-fit: cover; border-radius: 9px; border: 3px solid var(--ink); box-shadow: 4px 5px 0 var(--ink); opacity: .3; }
.home__float img:nth-child(1) { top: 10px; right: -4px; rotate: 9deg; }
.home__float img:nth-child(2) { top: 150px; left: -8px; rotate: -8deg; }
.home__float img:nth-child(3) { top: 250px; right: 10px; rotate: -4deg; opacity: .25; }
.js-motion .home__float img { animation: kbob 5.5s ease-in-out infinite; animation-delay: calc(var(--n) * -1.7s); }
@keyframes kbob { 50% { translate: 0 -10px; } }
.logo { margin: 0; display: grid; padding: 14px 30px 20px; background: var(--gold); color: var(--ink); border: 4px solid var(--ink); box-shadow: 7px 7px 0 var(--ink); transform: rotate(-2deg); font: 900 clamp(3rem, 2rem + 6vw, 5.4rem)/.92 var(--f-brand); }
.logo span:last-child { color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--red); }
.js-motion .logo { animation: kpop .8s var(--spring) both; }
@keyframes kpop { from { transform: rotate(-8deg) scale(.6); opacity: 0; } }
.home__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.home__how { width: 100%; display: grid; gap: 10px; margin-top: 8px; }
.home__howhead { display: flex; align-items: center; justify-content: space-between; }
.home__howhead h2 { margin: 0; font: 900 1.4rem var(--f-brand); color: var(--gold); text-shadow: 2px 2px 0 var(--ink); }
.home__how.is-skipped .how3 { display: none; }

/* קומיקס 3 פאנלים */
.how3 { display: grid; gap: 14px; text-align: start; }
.cp { margin: 0; display: grid; grid-template-columns: 96px 1fr; grid-template-areas: "art bal" "art cap"; align-items: center; gap: 6px 14px; padding: 12px; background: var(--paper); color: var(--paper-ink); border: 3px solid var(--ink); box-shadow: 5px 6px 0 var(--ink); border-radius: 6px; }
.cp:nth-child(2) { rotate: .6deg; } .cp:nth-child(3) { rotate: -.6deg; }
.cp__art { grid-area: art; position: relative; }
.cp__art img { width: 100%; aspect-ratio: 2/3; object-fit: cover; border: 2.5px solid var(--ink); border-radius: 6px; display: block; }
.cp .cp__bal { grid-area: bal; justify-self: start; padding: 8px 16px; font-size: 1.02rem; box-shadow: 3px 3px 0 var(--ink); }
.cp .cp__bal::after { display: none; }
.cp figcaption { grid-area: cap; font-size: .95rem; line-height: 1.45; }
.cp__phone { position: absolute; bottom: -8px; inset-inline-start: -8px; font-size: 1.9rem; filter: drop-shadow(2px 2px 0 var(--ink)); }
.cp__tap { position: absolute; top: 38%; left: 40%; width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--gold); box-shadow: 0 0 0 3px var(--ink); }
.js-motion .cp__tap { animation: ktap 1.6s var(--ease) infinite; }
@keyframes ktap { 0% { scale: .4; opacity: 1; } 70%, 100% { scale: 1.5; opacity: 0; } }
.cp__stamp { position: absolute; inset: 34% -6px auto; text-align: center; font: 900 1.05rem var(--f-brand); font-style: normal; color: #fff; background: var(--trap); border: 2.5px solid var(--ink); padding: 2px 4px; rotate: -12deg; }
@media (min-width: 620px) {
  .how3 { grid-template-columns: repeat(3, 1fr); }
  .cp { grid-template-columns: 1fr; grid-template-areas: "art" "bal" "cap"; justify-items: center; text-align: center; }
  .cp__art { width: 62%; }
  .cp .cp__bal { justify-self: center; margin-top: -26px; position: relative; }
}
.sheet-how { display: grid; gap: 18px; justify-items: center; }
.kdlg--how .kdlg__box { max-width: 900px; background: var(--bg-b); }

/* ============================================================ מסך קוד */
.setup { max-width: 760px; }
.setup__title { margin: 0; font: 900 var(--fs-h2)/1 var(--f-brand); text-shadow: 3px 3px 0 var(--ink); }
.setup__code { margin: 0; display: flex; gap: 8px; justify-content: center; }
.setup__code span { display: grid; place-items: center; width: clamp(48px, 13vw, 72px); aspect-ratio: .8; background: #fff; color: var(--ink); border: 3px solid var(--ink); box-shadow: 4px 5px 0 var(--ink); border-radius: 10px; font: 900 clamp(2rem, 1.4rem + 3vw, 3rem)/1 var(--f-brand); }
.js-motion .setup__code span { animation: kpop .7s var(--spring) both; }
.setup__code span:nth-child(2) { animation-delay: .06s; } .setup__code span:nth-child(3) { animation-delay: .12s; } .setup__code span:nth-child(4) { animation-delay: .18s; } .setup__code span:nth-child(5) { animation-delay: .24s; }
.setup__qrbox { display: grid; gap: 18px; justify-items: center; width: 100%; }
.setup__qr { width: min(240px, 70vw); padding: 8px; background: #fff; border: 4px solid var(--ink); box-shadow: 6px 7px 0 var(--ink); border-radius: 12px; }
.setup__qr .qr { display: block; width: 100%; height: auto; }
.setup__steps { display: grid; gap: 12px; justify-items: start; text-align: start; width: 100%; }
.setup__steps ol { margin: 0; padding-inline-start: 1.3em; display: grid; gap: 6px; line-height: 1.5; }
.setup__bal { margin: 0 0 6px; }
.setup__link { display: flex; gap: 8px; width: 100%; }
.setup__link input { flex: 1; min-width: 0; font: 500 .9rem var(--f-text); padding: 10px 12px; border-radius: 10px; border: 2px solid var(--line); background: rgba(255, 255, 255, .06); color: var(--text); }
.setup__start { margin: 0; font: 700 1.1rem var(--f-brand); }
.setup__alt { margin: 0; color: var(--muted); font-size: .95rem; }
@media (min-width: 700px) { .setup__qrbox { grid-template-columns: auto 1fr; align-items: center; } }

/* ============================================================ אני מנהיג */
.join__in { width: min(260px, 80vw); text-align: center; font: 900 2.4rem/1 var(--f-brand); letter-spacing: .25em; padding: 14px 10px 14px 16px; border-radius: 14px; border: 3px solid var(--ink); box-shadow: 4px 5px 0 var(--ink); background: #fff; color: var(--ink); }
.join__in:focus { outline: 3px solid var(--gold); outline-offset: 3px; }
.join__err { margin: 0; color: #ff9aa4; font-weight: 700; }

/* ============================================================ רשת המפתח */
.kgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; width: 100%; }
.kcell { all: unset; position: relative; aspect-ratio: .9; border-radius: 7px; overflow: hidden; border: 2.5px solid var(--ink); cursor: pointer; box-sizing: border-box; background: var(--ink); }
.kcell img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%; scale: 1.14; display: block; }
.kcell::after { content: ""; position: absolute; inset: 0; opacity: .5; mix-blend-mode: multiply; }
.k--red::after { background: var(--red); } .k--blue::after { background: var(--blue); } .k--civ::after { background: #c9b98f; opacity: .35; } .k--trap::after { background: #000; opacity: .65; mix-blend-mode: normal; }
.k--red { border-color: var(--red); box-shadow: inset 0 0 0 3px var(--red); } .k--blue { border-color: var(--blue); box-shadow: inset 0 0 0 3px var(--blue); }
.k--trap { border-color: var(--trap-hi); }
.kcell__tag { position: absolute; z-index: 1; inset: auto 0 0; padding: 2px 0 3px; font: 900 .72rem/1 var(--f-brand); font-style: normal; text-align: center; color: #fff; background: rgba(10, 11, 34, .72); }
.k--red .kcell__tag { background: var(--red-lo); } .k--blue .kcell__tag { background: var(--blue-lo); } .k--civ .kcell__tag { background: var(--civ); color: var(--ink); }
.k--trap .kcell__tag { inset: 0; display: grid; place-items: center; font-size: 1.8rem; background: transparent; }
.kcell.is-done img { filter: grayscale(1) brightness(.5); }
.kcell.is-done::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(45deg, transparent 46%, #fff 46%, #fff 54%, transparent 54%), linear-gradient(-45deg, transparent 46%, #fff 46%, #fff 54%, transparent 54%); opacity: .8; }
.kcell:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.klegend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; font: 700 .95rem var(--f-brand); }
.klegend li { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 16px; height: 16px; border: 2px solid var(--ink); border-radius: 4px; }
.sw--red { background: var(--red); } .sw--blue { background: var(--blue); } .sw--civ { background: var(--civ); } .sw--trap { background: var(--trap); border-color: var(--trap-hi); }

.spy { max-width: 720px; gap: 14px; }
.spy__head { display: grid; gap: 8px; justify-items: center; }
.spy__start { margin: 0; font: 900 1.2rem var(--f-brand); }
.spy__wrap { position: relative; width: 100%; }
.spy__wrap.is-veiled .kgrid { filter: blur(18px); }
.spy__veil { all: unset; cursor: pointer; position: absolute; inset: 0; display: grid; place-content: center; gap: 6px; text-align: center; background: rgba(23, 18, 58, .7); border-radius: 12px; font: 900 1.4rem var(--f-brand); }
.spy__veil span { font: 500 1rem var(--f-text); color: var(--muted); }
.spy__tip { margin: 0; color: var(--muted); font-size: .95rem; max-width: 40ch; }

/* ============================================================ השולחן */
.tbl { --ta: .9; padding: 4px 16px 32px; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); max-width: 1500px; margin: 0 auto; }
.score { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.score__t { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 6px; border-radius: var(--r-pill); border: 2.5px solid var(--ink); box-shadow: 2px 3px 0 var(--ink); font: 900 .95rem/1 var(--f-brand); color: #fff; transition: transform .5s var(--spring), box-shadow .3s var(--ease); }
.score__t b { display: grid; place-items: center; min-width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--ink); border: 2px solid var(--ink); font-size: 1.25rem; }
.score__t--red { background: var(--red-lo); } .score__t--blue { background: var(--blue-lo); }
.score__t.is-turn { transform: scale(1.08) rotate(-2deg); }
.score__t--red.is-turn { background: var(--red); box-shadow: 0 0 0 3px #fff, 3px 4px 0 3px var(--ink); }
.score__t--blue.is-turn { background: var(--blue); box-shadow: 0 0 0 3px #fff, 3px 4px 0 3px var(--ink); }
.score__turn { margin: 0; text-align: center; font: 900 clamp(1rem, .9rem + .6vw, 1.5rem)/1.15 var(--f-brand); text-shadow: 2px 2px 0 var(--ink); }
.score__turn b { font-size: 1.15em; }

.tbl__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; width: 100%; margin-inline: auto; }
.tile { all: unset; position: relative; cursor: pointer; aspect-ratio: var(--ta); box-sizing: border-box; border-radius: 8px; border: 2.5px solid var(--ink); box-shadow: 2px 3px 0 var(--ink); background: var(--ink); transition: transform .35s var(--spring), box-shadow .25s var(--ease); -webkit-tap-highlight-color: transparent; }
.tile__in { position: absolute; inset: 0; border-radius: 6px; overflow: hidden; }
.tile img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%; scale: 1.14; display: block; transition: filter .4s var(--ease); }
.tile:hover:not(.is-rev):not([aria-disabled]) { transform: translateY(-3px) rotate(-1deg); box-shadow: 3px 6px 0 var(--ink); z-index: 1; }
.tile:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; z-index: 2; }
.tile__in::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .3s var(--ease); }
.tile__stamp { position: absolute; z-index: 1; inset: 50% -4% auto; translate: 0 -50%; text-align: center; font: 900 clamp(.62rem, .3rem + 1.1vw, 1.6rem)/1.05 var(--f-brand); color: #fff; -webkit-text-stroke: .5px var(--ink); text-shadow: 1.5px 1.5px 0 var(--ink); rotate: -10deg; pointer-events: none; }
.tile__stamp:empty { display: none; }
.tile.is-rev { cursor: default; box-shadow: 1px 1px 0 var(--ink); }
.tile.is-rev .tile__in::after { opacity: .8; }
.tile.is-rev .tile__stamp { padding: .2em .3em; border: 2px solid var(--ink); background: var(--ink); }
.tile.t--red .tile__in::after { background: var(--red); } .tile.is-rev.t--red .tile__stamp { background: var(--red); }
.tile.t--blue .tile__in::after { background: var(--blue); } .tile.is-rev.t--blue .tile__stamp { background: var(--blue); }
.tile.t--civ .tile__in::after { background: var(--civ); } .tile.is-rev.t--civ .tile__stamp { background: var(--civ); color: var(--ink); text-shadow: none; -webkit-text-stroke: 0; }
.tile.t--trap .tile__in::after { background: radial-gradient(circle, #3b1d63, #0a0b22); } .tile.is-rev.t--trap .tile__stamp { background: var(--trap); color: #fff; }
.tile.t--trap { border-color: var(--trap-hi); }
.tile.is-rev img { filter: grayscale(.7); }
/* אחרי סיום: הקלפים שלא נחשפו מראים את הצבע שלהם בעדינות */
.tile.is-ghost { cursor: default; }
.tile.is-ghost .tile__in::after { opacity: .38; }
.tile.is-ghost .tile__stamp { opacity: .8; font-size: clamp(.5rem, .25rem + .8vw, 1.1rem); }
.tile.is-flip { animation: kflip .75s var(--ease) both; z-index: 3; }
.tile.is-flip .tile__stamp { animation: kstamp .6s var(--spring) .3s both; }
@keyframes kflip { 0% { transform: perspective(700px) rotateY(0) scale(1.06); } 45% { transform: perspective(700px) rotateY(88deg) scale(1.1); } 100% { transform: perspective(700px) rotateY(0) scale(1); } }
@keyframes kstamp { from { scale: 2.6; opacity: 0; } }

/* צד: רמז, ניחושים, יומן */
.side { display: grid; gap: 12px; align-content: start; }
.side__box { display: grid; gap: 12px; padding: 14px; border-radius: 14px; background: rgba(12, 16, 48, .78); border: 3px solid var(--ink); box-shadow: 0 0 0 2px color-mix(in oklab, var(--team) 70%, transparent), 4px 5px 0 2px var(--ink); }
.clue { display: grid; gap: 6px; }
.clue label { font: 900 1rem var(--f-brand); }
.clue small { font: 500 .85rem var(--f-text); color: var(--muted); }
.clue__row { display: flex; gap: 8px; }
.clue__row input { flex: 1; min-width: 0; font: 700 1.1rem var(--f-brand); padding: 10px 12px; border-radius: 10px; border: 2.5px solid var(--ink); background: #fff; color: var(--ink); }
.clue__row input:focus { outline: 3px solid var(--gold); outline-offset: 2px; }
.guess { margin: 0; font: 700 1.05rem var(--f-brand); }
.guess b { display: inline-grid; place-items: center; min-width: 30px; height: 30px; border-radius: 50%; background: var(--gold); color: var(--ink); border: 2px solid var(--ink); }
.side__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.side__btns .btn { flex: 1 1 140px; }
.log { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .05); border-inline-start: 4px solid var(--red); font: 700 1rem var(--f-brand); }
.lg--blue { border-inline-start-color: var(--blue); }
.lg__picks { display: flex; flex-wrap: wrap; gap: 4px; margin-inline-start: auto; }
.lg__p { width: 30px; height: 30px; object-fit: cover; object-position: 50% 40%; border-radius: 6px; border: 2.5px solid var(--ink); }
.lg__p.t--red { border-color: var(--red); } .lg__p.t--blue { border-color: var(--blue); } .lg__p.t--civ { border-color: var(--civ); } .lg__p.t--trap { border-color: var(--trap-hi); }
.log__empty { margin: 0; color: var(--muted); font-size: .95rem; text-align: center; }

/* מסך גדול: הרשת ממלאת את הגובה, הצד בצד */
@media (min-width: 900px) {
  .tbl { --ta: 1; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); grid-template-areas: "score score" "grid side"; padding-inline: 24px; column-gap: 24px; }
  .score { grid-area: score; max-width: 900px; width: 100%; justify-self: center; }
  .tbl__grid { grid-area: grid; gap: 8px; width: min(100%, calc((100dvh - 150px) * var(--ta))); }
  .side { grid-area: side; max-height: calc(100dvh - 140px); overflow: auto; padding: 4px; }
  .tile { border-width: 3px; border-radius: 10px; }
}
@media (min-width: 1700px) { .tbl { --ta: 1.15; } }

/* ============================================================ דיאלוג */
.kdlg { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 12px; }
.kdlg__back { position: absolute; inset: 0; background: rgba(8, 6, 26, .78); opacity: 0; transition: opacity .3s var(--ease); }
.kdlg__box { position: relative; width: min(520px, 100%); max-height: calc(100dvh - 24px); overflow: auto; padding: 16px; border-radius: 16px; background: var(--night-2); border: 3px solid var(--ink); box-shadow: 6px 7px 0 var(--ink), 0 0 0 2px rgba(255, 255, 255, .12); transform: translateY(24px) scale(.94); opacity: 0; transition: transform .5s var(--spring), opacity .25s var(--ease); }
.kdlg.is-in .kdlg__back { opacity: 1; }
.kdlg.is-in .kdlg__box { transform: none; opacity: 1; }
.pv { margin: 0; display: grid; gap: 10px; justify-items: center; text-align: center; }
.pv__art { position: relative; }
.pv__art img { display: block; max-width: 100%; max-height: calc(100dvh - 230px); width: auto; border-radius: 12px; border: 3px solid var(--ink); box-shadow: 4px 5px 0 var(--ink); touch-action: pinch-zoom; }
.pv figcaption { display: grid; gap: 2px; }
.pv__name { font: 900 1.3rem var(--f-brand); color: var(--gold); text-shadow: 2px 2px 0 var(--ink); }
.pv__pw { color: var(--muted); font-size: .95rem; }
.pv__key { position: absolute; top: 10px; inset-inline-end: 10px; font: 900 1.1rem var(--f-brand); padding: 4px 12px; border: 2.5px solid var(--ink); border-radius: var(--r-pill); color: #fff; background: var(--trap); box-shadow: 2px 3px 0 var(--ink); }
.pv__key.k--red { background: var(--red); } .pv__key.k--blue { background: var(--blue); } .pv__key.k--civ { background: var(--civ); color: var(--ink); }
.pv__key::after { display: none; }
.pv__btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 12px; }
.pv__btns .btn { flex: 1 1 150px; }

.curt { display: grid; gap: 10px; justify-items: center; text-align: center; }
.curt__icon { margin: 0; font-size: 3.4rem; line-height: 1; }
.curt__t { margin: 0; font: 900 clamp(1.6rem, 1.2rem + 2vw, 2.4rem)/1.1 var(--f-brand); color: var(--gold); text-shadow: 3px 3px 0 var(--ink); }
.curt p { margin: 0; }
.kdlg--curt .kdlg__box { width: min(640px, 100%); }

/* ניצחון */
.kdlg--win .kdlg__box { width: min(600px, 100%); overflow: hidden; }
.win { position: relative; display: grid; gap: 14px; justify-items: center; text-align: center; padding: 18px 6px 6px; }
.kdlg--win .kdlg__box:has(.win--red) { background: radial-gradient(circle at 50% 30%, #ff7484, var(--red-lo)); }
.kdlg--win .kdlg__box:has(.win--blue) { background: radial-gradient(circle at 50% 30%, #6fa8ff, var(--blue-lo)); }
.win__t { margin: 6px 0; font-size: clamp(1.7rem, 1.2rem + 2.6vw, 2.8rem); padding: 30px 40px; }
.win__sum { margin: 0; font-size: 1.05rem; line-height: 1.5; text-shadow: 1px 1px 0 var(--ink); }
.win .btn--ghost { --b-bg: rgba(10, 11, 34, .3); }
.win__conf { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.win__conf i { position: absolute; top: -20px; left: calc(var(--x) * 1%); width: 10px; height: 16px; border: 2px solid var(--ink); background: var(--gold); opacity: 0; }
.win__conf i:nth-child(4n+1) { background: #fff; } .win__conf i:nth-child(4n+2) { background: var(--teal-hi); } .win__conf i:nth-child(4n+3) { border-radius: 50%; width: 12px; height: 12px; }
.js-motion .win__conf i { animation: kconf 2.6s var(--ease) var(--d) both; }
@keyframes kconf { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(520px) rotate(var(--r)); } }
.js-motion .win__t { animation: kpop .9s var(--spring) .1s both; }

/* ============================================================ חשיפת הנבל */
.kfx { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: radial-gradient(circle at 50% 40%, #4a1f78, #0a0b22 70%); opacity: 0; transition: opacity .35s var(--ease); }
.kfx.is-in { opacity: 1; }
.vil { display: grid; gap: 14px; justify-items: center; text-align: center; max-width: 560px; }
.vil__art { position: relative; }
.vil__art img { display: block; max-height: 46dvh; width: auto; border-radius: 12px; border: 4px solid var(--trap-hi); box-shadow: 0 0 60px #a678e8, 6px 7px 0 var(--ink); filter: saturate(.6) contrast(1.15); }
.vil__mask { position: absolute; top: -18px; inset-inline-start: -18px; font-size: 4rem; filter: drop-shadow(3px 3px 0 var(--ink)); font-style: normal; }
.vil__t { font-size: clamp(1.5rem, 1.1rem + 2.4vw, 2.6rem); padding: 30px 40px; }
.vil__sub { margin: 0; font-size: 1.05rem; line-height: 1.5; }
.js-motion .kfx.is-in .vil__art { animation: kshake .7s var(--ease) both; }
.js-motion .kfx.is-in .vil__t { animation: kpop .8s var(--spring) .35s both; }
.js-motion .kfx.is-in .vil__mask { animation: kpop .7s var(--spring) .6s both; }
@keyframes kshake { 0% { transform: scale(.4) rotate(-20deg); opacity: 0; } 40% { transform: scale(1.08) rotate(4deg); opacity: 1; } 55% { transform: translateX(-10px) rotate(-3deg); } 70% { transform: translateX(8px) rotate(2deg); } 85% { transform: translateX(-4px); } 100% { transform: none; } }

/* ============================================================ בלון הודעה */
.ktoast { position: fixed; z-index: 50; top: calc(64px + env(safe-area-inset-top)); left: 50%; translate: -50% 0; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); text-align: center; transform: translateY(-16px) scale(.8); opacity: 0; transition: transform .5s var(--spring), opacity .25s var(--ease); }
.ktoast.is-in { transform: none; opacity: 1; }
.ktoast .balloon { font-size: clamp(1rem, .9rem + .5vw, 1.3rem); padding: 12px 24px; border-radius: 40px; }
.ktoast .balloon::after { display: none; }
.ktoast--good .balloon { background: var(--gold); }
.ktoast--oops .balloon, .ktoast--civ .balloon { background: #fff; }

/* בלון קומיקס עם זנב מצויר (כמו ב-cards.css) */
.balloon { position: relative; display: inline-block; max-width: 100%; padding: 14px 26px; border-radius: 50%; background: #fff; color: var(--ink); border: 3px solid var(--ink); font: 900 clamp(1.05rem, .95rem + .5vw, 1.35rem)/1.25 var(--f-brand); box-shadow: 4px 5px 0 var(--ink); text-wrap: balance; }
.balloon::after { content: ""; position: absolute; top: calc(100% - 3px); inset-inline-end: 22%; width: 30px; height: 26px; 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; transform: scaleX(-1); }
.balloon--shout { border: 0; border-radius: 0; box-shadow: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 120' preserveAspectRatio='none'%3E%3Cpath d='M8 30 L30 6 L52 24 L78 4 L100 22 L128 2 L150 20 L176 3 L198 21 L226 4 L246 24 L272 8 L284 34 L298 48 L284 62 L296 84 L272 92 L262 116 L236 100 L210 118 L188 100 L160 117 L138 99 L110 116 L88 98 L60 115 L44 96 L18 104 L22 80 L2 66 L18 52 L4 38 Z' fill='%23f5c842' stroke='%230e0b20' stroke-width='4' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat center / 100% 100%; filter: drop-shadow(4px 5px 0 var(--ink)); transform: rotate(-3deg); }
.balloon--shout::after { display: none; }

/* ============================================================ פחות תנועה */
html:not(.js-motion) .codes *, html:not(.js-motion) .codes *::before, html:not(.js-motion) .codes *::after { animation: none !important; transition-duration: .01s !important; }
@media (prefers-reduced-motion: reduce) {
  .codes *, .codes *::before, .codes *::after { animation: none !important; transition-duration: .01s !important; }
}
.kdlg[hidden], .kfx[hidden], .ktoast[hidden], .spy__veil[hidden], .join__err[hidden] { display: none !important; }