/* נחלות בקליק — ממשק המשחק. מסגרות אבן ונחושת (GDD 22.3), עברית מימין לשמאל, טלפון קודם. */
:root {
  --ink: #f6ead2; --muted: #c9b893; --bronze: #c9a15a; --bronze-2: #8a5a1c; --gold: #f2c46b;
  --panel: rgba(28, 22, 14, .86); --panel-2: #2a2116; --stone: #e9dfcc; --good: #9fcd7c; --bad: #ff9c7a;
  --f-display: "Frank Ruhl Libre", "David", "Times New Roman", serif;
  --f-body: "Assistant", "Segoe UI", Arial, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: #1b1712; color: var(--ink); font-family: var(--f-body); overflow: hidden;
  -webkit-tap-highlight-color: transparent; user-select: none; }
button { font: inherit; color: inherit; cursor: pointer; }
#stage { position: fixed; inset: 0; }
#stage canvas { display: block; touch-action: none; }

/* ---------- HUD ---------- */
#hud { position: fixed; top: 0; inset-inline: 0; padding: calc(env(safe-area-inset-top, 0px) + 8px) 8px 0; display: grid; gap: 6px; pointer-events: none; z-index: 10; }
#hud > * { pointer-events: auto; }
.hud-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-width: 0; }
.hud-av { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--bronze); background: #000 center 15% / 170% no-repeat; flex: none; padding: 0; }
.hud-who { flex-shrink: 1; background: var(--panel); border: 1px solid var(--bronze); border-radius: 10px; padding: 2px 8px; font-size: .74rem; line-height: 1.25; min-width: 0; flex: 0 1 auto; white-space: nowrap; }
.hud-who b { display: block; font-size: 1rem; font-variant-numeric: tabular-nums; }
.hud-quest { order: 9; flex: 1 1 100%; max-width: none; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-block: 3px !important; background: var(--panel); border: 1px solid var(--bronze); border-radius: 12px; padding: 5px 10px; font-size: .74rem; text-align: start; line-height: 1.3; }
.hud-quest b { color: var(--gold); display: inline; margin-inline-end: 6px; }
.hud-quest.ready { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(242, 196, 107, .35); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(242, 196, 107, .1); } }
.hud-res { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.hud-res span { background: var(--panel); border: 1px solid rgba(201, 161, 90, .55); border-radius: 8px; padding: 2px 4px 2px 2px; display: flex; align-items: center; gap: 3px; font-size: .74rem; font-variant-numeric: tabular-nums; min-width: 0; }
.hud-res img { width: 22px; height: 22px; flex: none; }
.hud-res small { display: block; font-size: .58rem; color: var(--muted); }
.hud-res i { font-style: normal; display: block; }
.hud-queue { display: flex; flex-wrap: wrap; gap: 4px; }
.qchip { background: var(--panel); border: 1px solid var(--bronze); border-radius: 999px; padding: 3px 10px; font-size: .74rem; font-variant-numeric: tabular-nums; }
.qchip b { color: var(--gold); }

#decisive-bar { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 150px); inset-inline: 10px; z-index: 11; background: linear-gradient(#7a4e14, #3d2708); border: 2px solid var(--gold); border-radius: 12px; padding: 10px 12px; font-weight: 700; text-align: center; }
#decisive-bar button { margin-top: 6px; }

/* ---------- סרגל תחתון ---------- */
#bar { position: fixed; bottom: 0; inset-inline: 0; z-index: 10; display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; padding: 6px 5px calc(env(safe-area-inset-bottom, 0px) + 8px); background: linear-gradient(transparent, rgba(0, 0, 0, .6)); }
#bar button { background: linear-gradient(#5b4527, #2f2414); border: 1px solid var(--bronze); border-radius: 10px; padding: 10px 0 8px; font-size: .7rem; font-weight: 800; white-space: nowrap; }
#bar button.on { background: linear-gradient(#a0742c, #5b4122); }

/* ---------- גיליון ---------- */
#sheet { position: fixed; inset: 0; z-index: 20; background: rgba(0, 0, 0, .45); display: flex; align-items: flex-end; justify-content: center; }
.sheet-card { position: relative; width: min(560px, 100%); max-height: 82vh; overflow: auto; background: var(--panel-2); border: 2px solid var(--bronze); border-bottom: 0; border-radius: 18px 18px 0 0; padding: 18px 16px calc(env(safe-area-inset-bottom, 0px) + 18px); box-shadow: 0 -10px 30px rgba(0, 0, 0, .5); }
.sheet-x { position: absolute; top: 10px; inset-inline-end: 10px; background: none; border: 0; font-size: 1.2rem; color: var(--muted); }
.sheet-body h2 { font-family: var(--f-display); font-weight: 900; margin: 0 0 4px; font-size: 1.5rem; color: var(--gold); }
.sheet-body p { margin: 0 0 10px; color: var(--muted); }
.sheet-body .row { display: flex; gap: 10px; align-items: center; margin: 8px 0; }
.art { width: 110px; flex: none; }
.cost { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.cost span { display: inline-flex; align-items: center; gap: 3px; background: rgba(0, 0, 0, .3); border-radius: 8px; padding: 2px 8px 2px 4px; font-size: .85rem; font-variant-numeric: tabular-nums; }
.cost span.short { color: var(--bad); }
.cost img { width: 20px; height: 20px; }
.btn { display: inline-block; background: linear-gradient(#c9973f, #7a5420); border: 1px solid var(--gold); border-radius: 12px; padding: 10px 16px; font-weight: 800; color: #1b1205; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--bronze); }
.btn[disabled] { filter: grayscale(.8); opacity: .55; }
.btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.err { color: var(--bad); font-weight: 700; }
.units { display: grid; gap: 8px; margin: 10px 0; }
.unit { display: grid; grid-template-columns: 56px 1fr auto; gap: 8px; align-items: center; background: rgba(0, 0, 0, .25); border-radius: 10px; padding: 6px; }
.unit img { width: 56px; height: 56px; object-fit: contain; }
.unit input[type=range] { width: 100%; }
.unit b { font-variant-numeric: tabular-nums; }
.est { display: inline-block; border-radius: 999px; padding: 1px 10px; font-weight: 800; font-size: .85rem; }
.est.green { background: #2f5d1e; } .est.yellow { background: #7a6214; } .est.red { background: #7a2414; }
.q-opts { display: grid; gap: 8px; margin-top: 10px; }
.q-opts button { background: rgba(0, 0, 0, .3); border: 1px solid var(--bronze); border-radius: 10px; padding: 12px; text-align: start; font-size: 1rem; }
.q-opts button.right { background: #2f5d1e; border-color: var(--good); }
.q-opts button.wrong { background: #6b2312; border-color: var(--bad); }
.q-text { font-size: 1.15rem; color: var(--ink); margin: 6px 0; font-weight: 700; }
.src { font-size: .8rem; color: var(--muted); }
.log { display: grid; gap: 6px; }
.log div { background: rgba(0, 0, 0, .25); border-radius: 8px; padding: 6px 10px; font-size: .9rem; }
.log small { color: var(--muted); }
.cmds { display: flex; gap: 8px; flex-wrap: wrap; }
.cmd { width: 96px; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: #000; padding: 0; position: relative; }
.cmd img { width: 100%; display: block; }
.cmd span { position: absolute; bottom: 0; inset-inline: 0; background: rgba(0, 0, 0, .7); font-size: .75rem; padding: 2px; }
.cmd.on { border-color: var(--gold); }
.cmd[disabled] { opacity: .4; }

/* ---------- בחירת שבט ---------- */
#start { position: fixed; inset: 0; z-index: 30; overflow: auto; background: radial-gradient(ellipse at 50% 0%, #3a2a14, #120d07 70%); padding: calc(env(safe-area-inset-top, 0px) + 22px) 16px 30px; }
#start h1 { font-family: var(--f-display); font-weight: 900; text-align: center; font-size: 2.6rem; margin: 0; color: var(--gold); }
#start .lede { text-align: center; color: var(--muted); max-width: 520px; margin: 6px auto 16px; }
.tribes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 760px; margin: 0 auto; }
.tribe { background: rgba(0, 0, 0, .35); border: 2px solid var(--bronze-2); border-radius: 14px; padding: 8px; display: grid; gap: 4px; text-align: center; }
.tribe.on { border-color: var(--gold); background: rgba(242, 196, 107, .12); }
.tribe img.flag { width: 70%; margin: 0 auto; }
.tribe img.unit { width: 60%; margin: -10px auto 0; }
.tribe b { font-family: var(--f-display); font-size: 1.3rem; color: var(--gold); }
.tribe small { color: var(--muted); font-size: .78rem; }
.ages { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 16px 0; }
.ages button { background: rgba(0, 0, 0, .3); border: 1px solid var(--bronze); border-radius: 999px; padding: 6px 12px; }
.ages button.on { background: var(--bronze-2); border-color: var(--gold); }
.go { display: block; margin: 0 auto; font-size: 1.15rem; padding: 12px 34px; }

#toast { position: fixed; top: 40%; left: 50%; transform: translateX(-50%); z-index: 40; background: rgba(20, 14, 6, .95); border: 2px solid var(--gold); border-radius: 12px; padding: 10px 18px; font-weight: 800; text-align: center; max-width: 88vw; }
#boot { position: fixed; inset: 0; z-index: 50; display: grid; place-content: center; text-align: center; background: #120d07; }
#boot.gone { opacity: 0; pointer-events: none; transition: opacity .4s; }
.boot-title { font-family: var(--f-display); font-weight: 900; font-size: 2.6rem; color: var(--gold); }
.boot-sub { color: var(--muted); }
@media (min-width: 900px) { #hud { inset-inline: auto 0; width: 480px; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- יהושע מדריך (כניסה למשחק) ---------- */
#guide { position: fixed; inset: 0; z-index: 35; background: rgba(0, 0, 0, .55); display: flex; align-items: flex-end; justify-content: center; padding: 16px 12px calc(env(safe-area-inset-bottom, 0px) + 90px); }
.guide-card { width: min(520px, 100%); display: grid; grid-template-columns: 96px 1fr; gap: 12px; background: var(--panel-2); border: 2px solid var(--gold); border-radius: 16px; padding: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, .6); }
.guide-card img { width: 96px; height: 128px; object-fit: cover; object-position: 50% 15%; border-radius: 10px; }
.guide-card b { font-family: var(--f-display); font-size: 1.35rem; color: var(--gold); }
.guide-card p { margin: 4px 0 8px; line-height: 1.5; }
.guide-dots { display: flex; gap: 5px; }
.guide-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--bronze-2); }
.guide-dots i.on { background: var(--gold); }

/* ---------- 💬 משוב נסיינים ---------- */
#fb { position: fixed; z-index: 11; inset-inline-start: 8px; bottom: calc(env(safe-area-inset-bottom, 0px) + 70px); background: var(--panel); border: 1px solid var(--bronze); border-radius: 999px; padding: 6px 12px; font-size: .8rem; font-weight: 800; }
.fb-stars { display: flex; gap: 4px; justify-content: center; margin: 4px 0 10px; direction: ltr; }
.fb-stars button { background: none; border: 0; font-size: 1.9rem; color: rgba(255, 255, 255, .25); padding: 0 2px; }
.fb-stars button.on { color: var(--gold); }
#fb-text { width: 100%; background: rgba(0, 0, 0, .3); color: var(--ink); border: 1px solid var(--bronze); border-radius: 10px; padding: 10px; font: inherit; resize: vertical; user-select: text; }

/* ---------- תפריט הבנייה (מגרשים, 22.10) ---------- */
.bmenu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 8px 0 12px; }
.bcard { display: grid; gap: 3px; justify-items: center; text-align: center; background: rgba(0, 0, 0, .3); border: 2px solid var(--bronze-2); border-radius: 12px; padding: 6px 4px 8px; }
.bcard img { width: 86%; aspect-ratio: 1; object-fit: contain; }
.bcard b { font-size: .88rem; color: var(--gold); }
.bcard b small { color: var(--muted); font-weight: 700; }
.bcard span { font-size: .7rem; color: var(--muted); line-height: 1.25; }
.bcard.on { border-color: var(--gold); background: rgba(242, 196, 107, .14); }
.bcard.off { opacity: .45; filter: grayscale(.7); }
.bpick { border-top: 1px solid var(--bronze-2); padding-top: 8px; }
.bpick h3 { margin: 0; color: var(--gold); font-family: var(--f-display); }

/* ---------- לוגו (22.10) ---------- */
.boot-logo { display: block; width: 180px; height: 180px; margin: 0 auto 10px; border-radius: 28px; box-shadow: 0 10px 40px rgba(0, 0, 0, .6); }
.start-logo { display: block; width: min(150px, 38vw); aspect-ratio: 1; margin: 0 auto 6px; border-radius: 24px; box-shadow: 0 10px 34px rgba(0, 0, 0, .55); }

/* ---------- בטא + החנות (22.10) ---------- */
.beta { display: inline-block; vertical-align: middle; font-family: var(--f-body); font-size: .62rem; font-weight: 800; letter-spacing: .04em;
  background: #b5651d; color: #fff3df; border-radius: 999px; padding: 1px 8px; }
h1 .beta, .boot-title .beta { font-size: .9rem; padding: 2px 10px; }
.hud-who small { display: block; font-size: .7rem; color: var(--gold); font-variant-numeric: tabular-nums; }
.hud-shop, .hud-gift { flex: none; background: var(--panel); border: 1px solid var(--bronze); border-radius: 12px; padding: 6px 7px; font-size: 1.02rem; }
.hud-shop.deal { border-color: var(--gold); animation: pulse 1.4s ease-in-out infinite; }
.hud-gift { font-size: .85rem; font-weight: 800; }
.wallet { background: rgba(0, 0, 0, .3); border-radius: 10px; padding: 6px 10px; font-size: .85rem; margin-bottom: 8px; }
.stabs { display: flex; gap: 4px; overflow-x: auto; margin-bottom: 10px; }
.stabs button { flex: none; background: rgba(0, 0, 0, .3); border: 1px solid var(--bronze-2); border-radius: 999px; padding: 6px 12px; font-size: .85rem; font-weight: 700; }
.stabs button.on { background: var(--bronze-2); border-color: var(--gold); }
.sitems { display: grid; gap: 10px; }
.sitem { background: rgba(0, 0, 0, .28); border: 1px solid var(--bronze-2); border-radius: 12px; padding: 10px 12px; }
.sitem.flash { border-color: var(--gold); }
.sitem-h { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sitem-h b { font-family: var(--f-display); font-size: 1.15rem; color: var(--gold); }
.sitem p { margin: 4px 0; font-size: .88rem; }
.sbadge { background: #2f5d1e; color: #e6f5d6; border-radius: 999px; padding: 1px 8px; font-size: .72rem; font-weight: 800; }
.stimer { background: #6b2312; color: #ffe2d6; border-radius: 999px; padding: 1px 9px; font-size: .78rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.spass-on { color: var(--good); font-weight: 700; }
.svip { display: grid; gap: 4px; background: rgba(0, 0, 0, .3); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.svip b { font-family: var(--f-display); font-size: 1.4rem; color: var(--gold); }
.svip-bar { height: 8px; background: rgba(255, 255, 255, .12); border-radius: 999px; overflow: hidden; }
.svip-bar i { display: block; height: 100%; background: var(--gold); }
.craft { display: grid; gap: 6px; margin: 6px 0 10px; }
.craft > div { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.craft b { min-width: 52px; }
.craft .btn { padding: 6px 10px; font-size: .78rem; }
.species { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.species span { background: rgba(0, 0, 0, .3); border-radius: 999px; padding: 3px 10px; font-size: .82rem; color: var(--muted); }
.species span.on { color: var(--ink); border: 1px solid var(--gold); }
.species .btn { padding: 1px 6px; font-size: .7rem; }
select { background: rgba(0, 0, 0, .4); color: var(--ink); border: 1px solid var(--bronze); border-radius: 8px; padding: 4px; font: inherit; }

/* 📜 משימות יומיות ושבועיות */
.hud-shop { position: relative; }
#hud-qn { position: absolute; top: -6px; inset-inline-start: -6px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--gold); color: #2a1a08; font: 800 .7rem/18px inherit; font-style: normal; text-align: center; padding: 0 4px; }
.qreset { font-size: .82rem; opacity: .85; margin: 0 0 8px; }
.qlist { display: grid; gap: 8px; }
.qrow { background: rgba(0, 0, 0, .28); border: 1px solid var(--bronze-2); border-radius: 12px; padding: 9px 11px; }
.qrow.done { border-color: var(--gold); }
.qrow.claimed { opacity: .6; }
.qrow-h { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.qrow-f { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.qrow-f .cost { margin: 0; }
.qok { font-size: .8rem; font-weight: 700; color: var(--gold); }
.qchest { margin-top: 12px; padding: 11px 12px; border-radius: 14px; border: 1px dashed var(--bronze); background: rgba(0, 0, 0, .22); display: grid; gap: 4px; }
.qchest.ready { border-style: solid; border-color: var(--gold); animation: pulse 1.4s ease-in-out infinite; }

/* ---- 23.10: מחקר, מצביאים, מסעות, בית אב, הגבעה ---- */
#hud-hn { position: absolute; top: -6px; inset-inline-start: -6px; min-width: 18px; height: 18px; border-radius: 9px; background: #7fd36a; color: #10240a; font: 800 .7rem/18px inherit; font-style: normal; text-align: center; padding: 0 4px; }
.worth { font-size: .8rem; color: var(--gold); margin: 4px 0 0; }
.holiday { background: rgba(242, 214, 138, .12); border: 1px solid var(--gold); border-radius: 10px; padding: 6px 10px; font-weight: 700; }
.deps span { display: inline-block; margin-inline-end: 8px; font-weight: 700; }
.deps .ok { color: #9be38a; } .deps .no { color: #ff9a8a; }
.gearrow { grid-template-columns: 1fr auto auto !important; gap: 6px; }
.tier-iron { color: #c9d3dc; } .tier-silver { color: #e8eef5; } .tier-gold { color: var(--gold); }
.rbusy { background: rgba(0, 0, 0, .3); border: 1px solid var(--gold); border-radius: 12px; padding: 8px 10px; margin-bottom: 10px; }
.rnodes { display: grid; gap: 8px; }
.rnode { background: rgba(0, 0, 0, .28); border: 1px solid var(--bronze-2); border-radius: 12px; padding: 9px 11px; }
.rnode.off { opacity: .55; }
.rnode-h { display: flex; justify-content: space-between; align-items: baseline; }
.rnode p { margin: 4px 0; font-size: .85rem; }
.ccards { display: grid; gap: 10px; }
.ccard { display: grid; grid-template-columns: 76px 1fr; gap: 10px; background: rgba(0, 0, 0, .28); border: 1px solid var(--bronze-2); border-radius: 14px; padding: 10px; }
.ccard img { width: 76px; height: 100px; object-fit: cover; border-radius: 10px; }
.ccard.off img { filter: grayscale(1) brightness(.5); }
.ccard p { margin: 3px 0; font-size: .85rem; } .ccard h4 { margin: 8px 0 4px; font-size: .9rem; }
.cstars { color: var(--gold); letter-spacing: 1px; }
.ritems { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.ritem { font-size: .75rem; padding: 3px 7px; border-radius: 8px; border: 1px dashed var(--bronze-2); opacity: .6; }
.ritem.have { opacity: 1; border-style: solid; } .ritem.on { opacity: 1; border-color: #7fd36a; color: #9be38a; }
.ritem .btn { padding: 2px 6px; font-size: .75rem; }
.mstages { display: grid; gap: 6px; margin: 8px 0; }
.mstage { display: grid; grid-template-columns: 1fr auto; text-align: start; background: rgba(0, 0, 0, .28); border: 1px solid var(--bronze-2); border-radius: 12px; padding: 8px 11px; color: inherit; font: inherit; }
.mstage small { grid-column: 1 / -1; opacity: .75; } .mstage span { color: var(--gold); }
.mstage.boss { border-color: #b8563f; } .mstage.next { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.mlanes { display: grid; gap: 6px; margin: 8px 0; }
.mlane { display: grid; grid-template-columns: 74px 1fr auto auto; gap: 6px; align-items: center; background: rgba(0, 0, 0, .28); border-radius: 10px; padding: 7px 9px; border-inline-start: 4px solid #b8563f; font-size: .85rem; }
.mlane.win { border-inline-start-color: #7fd36a; }
.hlist { display: grid; gap: 6px; } .hrow { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; background: rgba(0, 0, 0, .28); border-radius: 10px; padding: 7px 10px; }
.hmembers { display: flex; flex-wrap: wrap; gap: 5px; } .hmembers span { font-size: .8rem; padding: 3px 8px; border-radius: 999px; background: rgba(0, 0, 0, .3); }
.hmembers .me { border: 1px solid var(--gold); }
/* הגנת הגבעה */
#td { position: fixed; inset: 0; z-index: 60; background: #1b1712; display: flex; flex-direction: column; align-items: center; }
.td-top { width: min(100%, 480px); display: flex; gap: 8px; align-items: center; padding: 8px 10px; font-weight: 800; color: var(--ink); }
.td-top b { flex: 1; } .td-top button { background: var(--panel); border: 1px solid var(--bronze); color: inherit; border-radius: 10px; padding: 4px 9px; font: inherit; }
#td-c { width: min(100%, calc((100dvh - 56px) * 0.5625)); height: auto; aspect-ratio: 9 / 16; border-radius: 12px; touch-action: manipulation; margin-block: auto; }
.td-menu { position: fixed; bottom: 18px; inset-inline: 0; margin: auto; width: min(94%, 420px); display: flex; gap: 6px; padding: 8px; background: var(--panel); border: 1px solid var(--gold); border-radius: 14px; z-index: 61; }
.td-menu button { flex: 1; display: grid; gap: 2px; padding: 8px 4px; border-radius: 10px; border: 1px solid var(--bronze-2); background: rgba(0, 0, 0, .3); color: inherit; font: 700 .9rem inherit; }
.td-menu button:disabled { opacity: .45; } .td-menu small { color: var(--gold); }
.td-msg { position: fixed; top: 64px; inset-inline: 0; margin: auto; width: fit-content; max-width: 90%; background: rgba(27, 23, 18, .88); border: 1px solid var(--gold); border-radius: 12px; padding: 8px 14px; font-weight: 800; z-index: 61; pointer-events: none; }
#start .btn.ghost { display: block; margin: 10px auto 0; }
.hub { display: grid; gap: 8px; }
.hub button { display: grid; grid-template-columns: 44px 1fr; gap: 2px 10px; align-items: center; text-align: start; background: rgba(0, 0, 0, .28); border: 1px solid var(--bronze-2); border-radius: 14px; padding: 10px 12px; color: inherit; font: inherit; }
.hub button i { grid-row: span 2; font-style: normal; font-size: 1.8rem; text-align: center; }
.hub button small { opacity: .8; }

/* ---- 23.10: סצנות קרב ושמע ---- */
#bt { position: fixed; inset: 0; z-index: 62; background: #120d07; display: flex; flex-direction: column; align-items: center; }
.bt-top { width: min(100%, 480px); display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-weight: 800; color: var(--ink); }
.bt-top b { flex: 1; } .bt-top button { background: var(--panel); border: 1px solid var(--bronze); color: inherit; border-radius: 10px; padding: 4px 10px; font: inherit; }
#bt-c { width: min(100%, calc((100dvh - 150px) * 0.5625)); height: auto; aspect-ratio: 9 / 16; border-radius: 12px; }
#bt-ui { width: min(100%, 480px); padding: 6px 10px; }
.bt-hint { margin: 0 0 6px; text-align: center; font-size: .8rem; opacity: .85; }
.bt-ults { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bt-ult { position: relative; display: grid; justify-items: center; gap: 2px; padding: 6px 4px 8px; border-radius: 14px; border: 1px solid var(--bronze-2); background: rgba(0, 0, 0, .35); color: inherit; font: 700 .75rem inherit; overflow: hidden; }
.bt-ult img { width: 46px; height: 46px; object-fit: cover; object-position: top; border-radius: 50%; border: 2px solid var(--bronze); }
.bt-ult span { height: 46px; display: grid; place-items: center; opacity: .6; }
.bt-ult i { position: absolute; inset-inline: 0; bottom: 0; height: 5px; background: linear-gradient(90deg, #6fc3ff, #c9ecff); transform-origin: right; transform: scaleX(var(--m)); }
.bt-ult.ready { border-color: #9fd8ff; box-shadow: 0 0 0 2px rgba(159, 216, 255, .55), 0 0 18px rgba(159, 216, 255, .6); animation: pulse 0.9s ease-in-out infinite; }
.bt-ult.ready img { border-color: #9fd8ff; }
.bt-ult.used { opacity: .55; } .bt-ult.used::after { content: '⚡'; position: absolute; top: 4px; inset-inline-end: 6px; }

/* ---- גל 1 (23.10): כניסה, מתנות, גיל, HUD ---- */
.hud-res button { background: var(--panel); border: 1px solid rgba(201, 161, 90, .55); border-radius: 8px; padding: 2px 4px 2px 2px; display: flex; align-items: center; gap: 3px; font-size: .74rem; font-variant-numeric: tabular-nums; min-width: 0; text-align: start; }
.hud-res button img { width: 22px; height: 22px; flex: none; }
.hud-res button:active { border-color: var(--gold); }
.hud-who { position: relative; }
.hud-who.founder { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset, 0 0 12px rgba(242, 196, 107, .35); }
.hud-who .frame { display: block; font-size: .62rem; font-weight: 800; color: var(--gold); letter-spacing: .02em; }
.pplus { position: absolute; inset-inline-end: 6px; top: 2px; color: #9be38a; font-weight: 900; font-size: .9rem; text-shadow: 0 1px 2px #000; pointer-events: none; animation: pplus 1.8s ease-out forwards; }
@keyframes pplus { 0% { opacity: 0; transform: translateY(6px); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-22px); } }
.hud-backup { flex: none; display: inline-flex; align-items: center; gap: 4px; background: #5a4508; color: #ffe27a; border: 1px solid #f5cf3d; border-radius: 12px; padding: 5px 9px; font-size: .78rem; font-weight: 800; }
#gift-side { position: fixed; z-index: 11; inset-inline-end: 8px; top: calc(env(safe-area-inset-top, 0px) + 38%); width: 52px; height: 52px; border-radius: 16px; font-size: 1.6rem; background: linear-gradient(#7a4e14, #3d2708); border: 2px solid var(--gold); box-shadow: 0 6px 18px rgba(0, 0, 0, .5); animation: giftwob 2.6s ease-in-out infinite; }
#gift-side i { position: absolute; top: -6px; inset-inline-end: -6px; min-width: 20px; height: 20px; border-radius: 10px; background: #e0352b; color: #fff; font: 800 .72rem/20px var(--f-body); font-style: normal; padding: 0 5px; box-shadow: 0 0 0 2px #1b1712; }
@keyframes giftwob { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-9deg); } 90% { transform: rotate(8deg); } 95% { transform: rotate(-4deg); } }
.letter { display: grid; grid-template-columns: 72px 1fr; gap: 12px; background: linear-gradient(#3a2c17, #261c10); border: 1px solid var(--gold); border-radius: 14px; padding: 12px; margin: 10px 0; }
.letter img { width: 72px; height: 96px; object-fit: cover; object-position: 50% 15%; border-radius: 10px; }
.letter b { font-family: var(--f-display); font-size: 1.2rem; color: var(--gold); }
.letter p { color: var(--ink) !important; line-height: 1.55; margin: 4px 0 !important; }
.letter .sig { color: var(--muted) !important; font-size: .82rem; font-style: italic; }
.letter .btns { align-items: center; }
.coin { position: fixed; z-index: 70; font-style: normal; font-size: 1.3rem; pointer-events: none; margin: -10px 0 0 -10px; }
.welcome { max-width: 460px; margin: 4vh auto 0; text-align: center; }
.g-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; background: #fff !important; color: #1f1f1f !important; border: 1px solid #dadce0 !important; }
.g-btn .g-logo { width: 22px; height: 22px; flex: none; }
.welcome .g-btn { width: min(320px, 100%); font-size: 1.15rem; padding: 14px 20px; }
.w-why { color: var(--ink); margin: 14px 0 6px; line-height: 1.5; }
.w-why small { color: var(--gold); }
.linkish { background: none; border: 0; color: var(--muted); text-decoration: underline; font-size: .92rem; margin-top: 18px; padding: 6px; }
.pick2 { display: grid; gap: 8px; margin: 10px 0; }
.pickc { display: grid; gap: 3px; text-align: start; background: rgba(0, 0, 0, .3); border: 2px solid var(--bronze-2); border-radius: 14px; padding: 12px; color: inherit; }
.pickc b { color: var(--gold); font-size: 1.05rem; } .pickc small { color: var(--muted); }
.pickc:hover, .pickc:focus-visible { border-color: var(--gold); }
.warn { color: #ffd38a !important; font-size: .88rem; }
.adult-ok { max-width: 460px; margin: 0 auto 14px; background: rgba(122, 78, 20, .35); border: 1px solid var(--gold); border-radius: 12px; padding: 10px 12px; text-align: center; }
.adult-ok p { margin: 0 0 4px; }
.go[disabled] { filter: grayscale(.9); opacity: .5; cursor: not-allowed; }
.yield { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.yield span { display: inline-flex; align-items: center; gap: 2px; font-variant-numeric: tabular-nums; color: var(--ink); }
.yield img { width: 16px; height: 16px; }
/* סליידר מימין לשמאל: ההיפוך עם scaleX(-1) עובד בכל הדפדפנים, והמילוי לפי --p */
input[type=range] { -webkit-appearance: none; appearance: none; direction: ltr; transform: scaleX(-1); height: 26px; background: transparent; width: 100%; }
input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(to right, var(--gold) var(--p, 50%), rgba(255, 255, 255, .15) var(--p, 50%)); }
input[type=range]::-moz-range-track { height: 8px; border-radius: 999px; background: linear-gradient(to right, var(--gold) var(--p, 50%), rgba(255, 255, 255, .15) var(--p, 50%)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -7px; border-radius: 50%; background: #fff3d6; border: 3px solid var(--bronze-2); }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff3d6; border: 3px solid var(--bronze-2); }

/* ---- גל 2 (23.10) ---- */
.td-go { position: fixed; bottom: calc(env(safe-area-inset-bottom, 0px) + 86px); inset-inline: 0; margin: auto; width: fit-content; z-index: 61; font-size: 1.05rem; padding: 10px 22px; box-shadow: 0 6px 20px rgba(0, 0, 0, .5); animation: pulse 1.4s ease-in-out infinite; }
/* המצפן: פרקים, תיבות, עלילה */
.chap-n { color: var(--gold); font-weight: 700; font-size: .8rem; }
.chap-dots { display: flex; gap: 5px; margin-top: 6px; }
.chap-dots i { width: 22px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .15); }
.chap-dots i.on { background: var(--gold); } .chap-dots i.cur { background: linear-gradient(90deg, var(--gold) 50%, rgba(255, 255, 255, .2) 50%); }
.chapter { text-align: center; }
.chapter > small { color: var(--gold); font-weight: 800; letter-spacing: .04em; }
.chapter h2 { font-size: 1.8rem !important; margin: 2px 0 8px !important; }
.chapter-story { color: var(--ink) !important; line-height: 1.65; font-size: 1.02rem; }
.chapter blockquote, .sheet-body blockquote { margin: 12px auto; max-width: 440px; padding: 12px 16px; border-radius: 12px; background: rgba(242, 196, 107, .1);
  border: 1px solid rgba(242, 196, 107, .5); font-family: var(--f-display); font-size: 1.12rem; color: #f6e2b0; line-height: 1.55; }
.sheet-body blockquote cite { display: block; margin-top: 4px; font: 700 .78rem var(--f-body); color: var(--muted); font-style: normal; }
.chapter .cost { justify-content: center; }
.chapter .btns { justify-content: center; }
.land { position: relative; margin: 8px auto; max-width: 460px; border-radius: 14px; overflow: hidden; border: 2px solid var(--bronze); }
.land img { display: block; width: 100%; }
.land-you { position: absolute; top: 46%; inset-inline-end: 38%; background: rgba(20, 14, 6, .85); border: 1px solid var(--gold); border-radius: 999px; padding: 2px 10px; font-size: .8rem; font-weight: 800; }
#map-land { position: fixed; z-index: 11; inset-inline-start: 8px; bottom: calc(env(safe-area-inset-bottom, 0px) + 112px); background: var(--panel); border: 1px solid var(--gold); border-radius: 999px; padding: 7px 14px; font-weight: 800; font-size: .85rem; }
/* 📅 לוח 7 ימים */
.hud-dot { position: absolute; top: -3px; inset-inline-start: -3px; width: 11px; height: 11px; border-radius: 50%; background: #e0352b; box-shadow: 0 0 0 2px #1b1712; }
.l7s { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; margin: 10px 0; }
.l7 { position: relative; background: rgba(0, 0, 0, .3); border: 1px solid var(--bronze-2); border-radius: 12px; padding: 7px; text-align: center; }
.l7 b { display: block; font-size: .82rem; color: var(--gold); }
.l7 .cost { justify-content: center; margin: 4px 0 0; } .l7 .cost span { font-size: .72rem; padding: 1px 5px; }
.l7.got { opacity: .5; } .l7.got i { position: absolute; top: 4px; inset-inline-end: 7px; font-style: normal; color: var(--good); }
.l7.now { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(242, 196, 107, .35); animation: pulse 1.4s ease-in-out infinite; }
.l7:last-child { grid-column: span 2; background: linear-gradient(rgba(242, 196, 107, .12), rgba(0, 0, 0, .3)); }
/* 🗺 מסעות: סיכוי, מכה בתזמון, ניצחון */
.mlane .chance { display: grid; gap: 2px; font-size: .78rem; text-align: center; min-width: 84px; }
.mlane .chance i { display: block; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--c, #f2c46b) var(--w), rgba(255, 255, 255, .12) var(--w)); }
.mlane .chance em { font-style: normal; font-weight: 800; color: var(--c); }
.mlane.ch-high { --c: #7fd36a; border-inline-start-color: #7fd36a; } .mlane.ch-even { --c: #f2c46b; border-inline-start-color: #f2c46b; } .mlane.ch-low { --c: #ff8f7a; }
.bt-zone { position: absolute; inset-inline: 0; bottom: 0; height: 5px; background: linear-gradient(90deg, transparent 86%, rgba(242, 196, 107, .9) 86%); pointer-events: none; }
.bt-ult.miss { opacity: .45; } .bt-ult.miss::after { content: '✖'; position: absolute; top: 4px; inset-inline-end: 6px; color: #ff9a8a; }
.victory { text-align: center; padding: 6px 0 2px; }
.victory small { color: var(--muted); font-weight: 700; }
.victory h2 { font-size: 2.2rem !important; margin: 0 !important; }
.victory.lost h2 { color: #ff9a8a !important; }
.vstars { display: flex; justify-content: center; gap: 6px; font-size: 2.4rem; }
.vstars i { font-style: normal; color: rgba(255, 255, 255, .15); }
.vstars i.on { color: var(--gold); text-shadow: 0 0 18px rgba(242, 196, 107, .7); animation: starpop .5s var(--d) both cubic-bezier(.2, 1.6, .5, 1); }
@keyframes starpop { from { transform: scale(0) rotate(-40deg); opacity: 0; } to { transform: scale(1); opacity: 1; } }
#bt-x2 { margin-inline-end: 4px; }
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  #bt { flex-direction: row; justify-content: center; gap: 24px; padding-top: 52px; }
  #bt .bt-top { position: absolute; top: 0; inset-inline: 0; margin: auto; }
  #bt-c { width: auto; height: calc(100dvh - 80px); }
  #bt-ui { width: 340px; align-self: center; }
  .bt-ults { grid-template-columns: 1fr; }
  .bt-ult { grid-template-columns: 52px 1fr; justify-items: start; padding: 10px; font-size: .9rem; }
}
.land-svg { display: block; width: 100%; height: auto; font-family: var(--f-body); }
.land-svg .lt { font-size: 10px; font-weight: 800; fill: #4a3518; }
.land-svg .lt.sea { fill: #e8f0f6; font-size: 13px; } .land-svg .lt.big { font-size: 13px; fill: #2f5d7a; }
.land-svg .lc circle { fill: #8a5a1c; stroke: #fff3d6; stroke-width: 1; } .land-svg .lc text { font-size: 9.5px; font-weight: 800; fill: #2a1a06; }
.land-svg .lc.on circle { fill: #f2c46b; stroke: #2a1a06; } .land-svg .lc.on text { fill: #7a4e14; }
.land-svg .lyou rect { fill: #2a1a06; } .land-svg .lyou text { fill: #f2c46b; font-size: 9px; font-weight: 800; }
.hub button { grid-template-columns: 58px 1fr; }
.hub button i img { width: 56px; height: 56px; object-fit: contain; display: block; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .5)); }

/* ---------- 📜 מסע התנ״ך (גל 3) ---------- */
.qchip.boost { border-color: var(--gold); background: linear-gradient(#5a4210, #2a1e08); }
#tk { position: fixed; inset: 0; z-index: 15; background: radial-gradient(ellipse at 50% 0%, #2c2312, #0f0b06 75%); display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px); }
.tk-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px 6px; }
.tk-top b { font-family: var(--f-display); font-size: 1.3rem; color: var(--gold); }
.tk-top span { font-size: .8rem; color: var(--muted); }
.tk-top .tk-boost { color: #1b1205; background: linear-gradient(#f2c46b, #c9973f); border-radius: 999px; padding: 2px 10px; font-weight: 800; }
.tk-top .tk-boost i { font-style: normal; font-variant-numeric: tabular-nums; }
#tk-x { margin-inline-start: auto; background: var(--panel); border: 1px solid var(--bronze); border-radius: 50%; width: 36px; height: 36px; }
.tk-books { display: flex; gap: 5px; overflow-x: auto; padding: 4px 10px 8px; scrollbar-width: none; flex: none; }
.tk-books::-webkit-scrollbar { display: none; }
.tk-sec { flex: none; align-self: center; font-size: .7rem; color: var(--bronze); font-weight: 800; padding-inline: 4px; }
.tk-book { flex: none; background: var(--panel); border: 1px solid rgba(201, 161, 90, .55); border-radius: 10px; padding: 4px 9px; font-size: .8rem; font-weight: 700; line-height: 1.2; }
.tk-book small { display: block; font-size: .64rem; color: var(--muted); font-weight: 600; }
.tk-book.on { background: linear-gradient(#a0742c, #5b4122); border-color: var(--gold); }
.tk-book.soon { opacity: .5; }
.tk-heroes { display: flex; gap: 6px; overflow-x: auto; padding: 2px 10px 8px; flex: none; scrollbar-width: none; border-bottom: 1px solid rgba(201, 161, 90, .3); }
.tk-hero { flex: none; width: 62px; background: none; border: 0; padding: 0; text-align: center; }
.tk-hero i { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto; border-radius: 50%; border: 2px solid #5b4527; background: #1b1712; font-style: normal; font-size: 1.5rem; overflow: hidden; filter: grayscale(1) brightness(.55); }
.tk-hero i img { width: 100%; height: 100%; object-fit: cover; }
.tk-hero.on i { filter: none; border-color: var(--gold); box-shadow: 0 0 10px rgba(242, 196, 107, .5); }
.tk-hero small { display: block; font-size: .62rem; line-height: 1.15; margin-top: 2px; color: var(--muted); }
.tk-hero.on small { color: var(--ink); font-weight: 700; }
.tk-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; align-items: center; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); }
.tk-scroll svg { flex: none; }
.tk-path { fill: none; stroke: rgba(201, 161, 90, .55); stroke-width: 7; stroke-dasharray: 2 12; stroke-linecap: round; }
.tk-band { fill: rgba(201, 161, 90, .85); font: 700 11px var(--f-body); paint-order: stroke; stroke: #15100a; stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.tk-band.on { fill: var(--gold); }
.tk-node { cursor: pointer; }
.tk-node circle { fill: #3a2f20; stroke: #6b5636; stroke-width: 3; }
.tk-node.open circle { fill: #5b4527; stroke: var(--bronze); }
.tk-node.next circle { fill: #8a5a1c; stroke: var(--gold); }
.tk-node.done circle { fill: #c9973f; stroke: #fff1c9; }
.tk-node .tk-pulse { fill: none; stroke: var(--gold); stroke-width: 2; animation: tkpulse 1.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes tkpulse { from { opacity: .9; transform: scale(.75); } to { opacity: 0; transform: scale(1.25); } }
.tk-num { fill: var(--ink); font: 800 17px var(--f-display); text-anchor: middle; pointer-events: none; }
.tk-node.done .tk-num { fill: #1b1205; }
.tk-node.lock .tk-num { fill: #8d7c5c; }
.tk-stars { fill: var(--gold); font-size: 13px; text-anchor: middle; letter-spacing: 1px; pointer-events: none; }
.tk-ico { font-size: 15px; text-anchor: middle; pointer-events: none; }
.tk-soon { width: min(92%, 440px); margin: 8px auto; background: var(--panel); border: 1px dashed var(--bronze); border-radius: 12px; padding: 10px 12px; font-size: .85rem; text-align: center; }
.tk-st { color: var(--gold); font-size: 1rem; letter-spacing: 2px; }
.tk-scrollbox { background: linear-gradient(#efe1bf, #d9c49a); color: #2a1d0c; border-radius: 12px; padding: 10px 14px; margin: 8px 0; box-shadow: inset 0 0 0 2px #b9975c; }
.tk-scrollbox b { font-family: var(--f-display); }
.sheet-body .tk-scrollbox p { margin: 6px 0; line-height: 1.5; color: #2a1d0c; }
.sheet-body .tk-scrollbox blockquote { margin: 8px 0 0; padding: 6px 10px; font-family: var(--f-display); font-weight: 700; color: #3a2508; background: rgba(120, 80, 20, .12); }
.sheet-body .tk-scrollbox cite { display: block; font: 600 .75rem var(--f-body); color: #6b5332; }
.tk-stage { background: rgba(242, 196, 107, .1); border: 1px solid var(--gold); border-radius: 10px; padding: 6px 10px; font-size: .88rem; }
.tk-rules { display: grid; gap: 4px; margin: 8px 0; }
.tk-rules div { display: grid; grid-template-columns: 48px 1fr auto; gap: 6px; align-items: center; background: rgba(0, 0, 0, .25); border-radius: 8px; padding: 5px 8px; font-size: .85rem; }
.tk-rules b { color: var(--gold); letter-spacing: 1px; }
.tk-rules small { color: var(--muted); }
.tk-rules .got { box-shadow: inset 0 0 0 1px var(--good); }
.tk-rules .got small { color: var(--good); }
.tk-herocard { text-align: center; }
.tk-herocard i { display: grid; place-items: center; width: 120px; height: 120px; margin: 0 auto 6px; border-radius: 50%; border: 3px solid #5b4527; overflow: hidden; font-style: normal; font-size: 3rem; background: #1b1712; filter: grayscale(1) brightness(.6); }
.tk-herocard i img { width: 100%; height: 100%; object-fit: cover; }
.tk-herocard.on i { filter: none; border-color: var(--gold); box-shadow: 0 0 22px rgba(242, 196, 107, .55); }
.tk-herocard.new { background: rgba(242, 196, 107, .08); border: 1px solid var(--gold); border-radius: 14px; padding: 10px; margin-top: 10px; animation: tkin .6s ease-out both .9s; }
.tk-herocard.new i { width: 88px; height: 88px; }
@keyframes tkin { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
#tkq { position: fixed; inset: 0; z-index: 25; background: #120d07; display: flex; flex-direction: column; align-items: center; overflow-y: auto; padding-top: env(safe-area-inset-top, 0px); }
.tkq-top { width: min(100%, 480px); display: flex; align-items: center; gap: 8px; padding: 8px 12px; }
.tkq-top b { font-family: var(--f-display); font-size: 1.15rem; color: var(--gold); }
.tkq-top button { margin-inline-start: auto; background: var(--panel); border: 1px solid var(--bronze); border-radius: 999px; padding: 4px 12px; font-size: .8rem; }
.tkq-dots { display: flex; gap: 5px; }
.tkq-dots i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--bronze); background: #2a2116; }
.tkq-dots i.now { border-color: var(--gold); }
.tkq-dots i.ok { background: var(--good); border-color: var(--good); }
.tkq-dots i.no { background: var(--bad); border-color: var(--bad); }
#tkq-c { width: min(100%, 480px); aspect-ratio: 12 / 5; height: auto; border-radius: 12px; flex: none; }
.tkq-body { width: min(100%, 480px); padding: 8px 14px calc(env(safe-area-inset-bottom, 0px) + 20px); }
.tkq-timer { height: 6px; background: rgba(255, 255, 255, .08); border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
.tkq-timer i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ff9c7a, var(--gold)); margin-inline-start: auto; }
.tkq-body blockquote { margin: 10px 0 0; padding: 8px 12px; background: rgba(242, 196, 107, .08); border-inline-start: 3px solid var(--gold); border-radius: 6px; font-family: var(--f-display); }
.tkq-body cite { display: block; font: 600 .75rem var(--f-body); color: var(--muted); margin-top: 3px; }
.tkq-combo { position: fixed; z-index: 26; top: calc(env(safe-area-inset-top, 0px) + 54px); inset-inline-start: 14px; text-align: center; pointer-events: none; transform: rotate(-8deg); }
.tkq-combo b { display: block; direction: ltr; font: 900 2.2rem var(--f-display); color: #fff1c9; -webkit-text-stroke: 2px #6b3d0a; text-shadow: 0 3px 0 #6b3d0a, 0 0 18px rgba(242, 196, 107, .6); line-height: 1; }
.tkq-combo small { font-weight: 900; color: var(--gold); letter-spacing: 2px; text-shadow: 0 2px 0 #000; }
.tkq-combo.gold b { color: #ffd84a; }
.tkq-combo.fire b { color: #ff8a3a; text-shadow: 0 3px 0 #6b1d0a, 0 0 26px rgba(255, 120, 40, .9); }
.tkq-combo.pop { animation: tkpop .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes tkpop { from { transform: rotate(-8deg) scale(1.9); opacity: .3; } to { transform: rotate(-8deg) scale(1); opacity: 1; } }
.tkq-float { position: fixed; z-index: 27; top: calc(env(safe-area-inset-top, 0px) + 150px); inset-inline-start: 18px; font: 900 1rem var(--f-body); font-style: normal; color: var(--gold); text-shadow: 0 2px 0 #000; pointer-events: none; animation: tkfloat 1.2s ease-out forwards; }
@keyframes tkfloat { to { transform: translateY(-40px); opacity: 0; } }
.tkq-result { text-align: center; }
.tkq-result h2 { font-family: var(--f-display); color: var(--gold); margin: 4px 0; }
.tkq-bigstars { font-size: 3rem; letter-spacing: 6px; }
.tkq-bigstars span { color: #3a2f20; display: inline-block; }
.tkq-bigstars span.on { color: var(--gold); text-shadow: 0 0 16px rgba(242, 196, 107, .8); animation: tkin .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.tkq-result .btns { justify-content: center; }
.tkq-result .cost { justify-content: center; }
/* גל 4: לוח הגיבורים והחושן */
.tk-acts { flex-basis: 100%; display: flex; gap: 6px; }
.tk-acts button { background: var(--panel); border: 1px solid var(--bronze); border-radius: 999px; padding: 4px 12px; font-size: .8rem; font-weight: 800; }
.tk-acts button.soon { opacity: .6; }
.tk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; margin-bottom: 8px; }
.tk-grid .tk-hero { width: auto; }
.sheet-body h3 small { color: var(--muted); font-weight: 600; }
.tk-total { background: rgba(242, 196, 107, .1); border: 1px solid var(--gold); border-radius: 10px; padding: 8px 10px; font-size: .88rem; margin-bottom: 8px; }
.tk-choshen { display: flex; justify-content: center; margin: 8px 0; }
.tk-gem { fill: var(--muted); font: 700 9px var(--f-body); text-anchor: middle; }
.tk-choshen .on .tk-gem { fill: var(--ink); }
.tk-fog { pointer-events: none; }
/* ---------- גל 5: שומרי העדרים, ספר החיות, הצילו את הנחלה, גלית ---------- */
.bst-list { display: grid; gap: 8px; }
.bst { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; background: rgba(0, 0, 0, .25); border: 1px solid rgba(201, 161, 90, .4); border-radius: 12px; padding: 8px; }
.bst.done { opacity: .6; }
.bst i, .bk i { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; font-style: normal; font-size: 2rem; background: #2a2116; }
.bst i img, .bk i img { width: 100%; height: 100%; object-fit: cover; }
.bst small.apex { color: var(--bad); font-weight: 800; }
.bst small.field { color: var(--good); font-weight: 800; }
.bsl { display: grid; grid-template-columns: 90px 1fr 40px; gap: 8px; align-items: center; margin: 6px 0; font-size: .9rem; }
.bk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-bottom: 10px; }
.bk { position: relative; background: rgba(0, 0, 0, .25); border: 1px solid #5b4527; border-radius: 12px; padding: 8px; text-align: center; }
.bk i { margin: 0 auto 4px; filter: grayscale(1) brightness(.5); }
.bk.on i { filter: none; }
.bk.on { border-color: var(--gold); }
.bk b { display: block; }
.bk small { color: var(--bronze); font-size: .7rem; }
.bk p { font-size: .75rem; margin: 4px 0 0; color: var(--muted); }
.bk span { position: absolute; top: 6px; inset-inline-start: 8px; font-size: .7rem; color: var(--gold); font-weight: 800; }
.bk.wonder.on { background: rgba(122, 63, 160, .18); }
.raid { background: linear-gradient(#3a1a10, #1e0d06); border: 1px solid #a8442c; border-radius: 14px; padding: 10px 12px; margin: 10px 0; }
.raid h3 { margin: 0 0 6px; }
.raid .me { color: var(--gold); font-weight: 800; }
.raid-bar { position: relative; height: 18px; background: #2a1410; border: 1px solid var(--gold); border-radius: 9px; overflow: hidden; margin: 6px 0; }
.raid-bar i { display: block; height: 100%; background: linear-gradient(90deg, #8a1a10, #d33a2a); margin-inline-start: auto; }
.raid-bar span { position: absolute; inset: 0; display: grid; place-items: center; font-size: .72rem; font-weight: 800; }
#sv { position: fixed; inset: 0; z-index: 62; background: #120d07; display: flex; flex-direction: column; align-items: center; }
.sv-top { width: min(100%, 480px); display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.sv-top b { font-family: var(--f-display); color: var(--gold); }
.sv-top span { font-variant-numeric: tabular-nums; font-weight: 800; }
.sv-top button { margin-inline-start: auto; background: var(--panel); border: 1px solid var(--bronze); border-radius: 999px; padding: 4px 12px; font-size: .8rem; }
#sv-c { width: min(100%, calc((100dvh - 56px) * 0.5625)); height: auto; aspect-ratio: 9 / 16; border-radius: 12px; touch-action: none; margin-block: auto; }
#sv-cards { position: fixed; inset: 0; z-index: 63; background: rgba(0, 0, 0, .7); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; }
#sv-cards h3 { color: var(--gold); font-family: var(--f-display); margin: 0; }
.sv-row { display: grid; grid-template-columns: repeat(3, minmax(0, 120px)); gap: 8px; }
.sv-card { background: linear-gradient(#3a2a14, #1e150a); border: 2px solid var(--bronze); border-radius: 14px; padding: 10px 6px; display: grid; gap: 4px; justify-items: center; text-align: center; }
.sv-card i { font-style: normal; font-size: 2rem; }
.sv-card span { color: var(--gold); letter-spacing: 1px; }
.sv-card small { font-size: .72rem; color: var(--muted); }
.sv-card.s2 { border-color: #7ad0ff; }
.sv-card.s3 { border-color: var(--gold); box-shadow: 0 0 16px rgba(242, 196, 107, .5); }
/* 24.10: אייקון הפשיטה — דוד והקלע, במקום 🗿 */
.raid-ic{width:34px;height:34px;border-radius:50%;vertical-align:middle;margin-inline-end:8px;border:2px solid var(--gold,#e9b44c);object-fit:cover}
/* 24.10: קישור לאתר המידע (/about/) ממסכי הכניסה */
.about-link { display: block; width: max-content; margin: 14px auto 0; color: var(--muted); font-size: .9rem; text-decoration: none; border-bottom: 1px dashed rgba(201, 184, 147, .5); padding: 4px 2px; }
.about-link:hover { color: var(--gold); }
a.btn { text-decoration: none; text-align: center; }
/* 24.10 (קצב): שערי ספרים וכוח צבא מול בוס */
.tk-book.gated { opacity: .75; border-style: dashed; }
.tk-gate { order: -1; text-align: right; line-height: 1.5; border-color: var(--gold); }
.tk-power { border-inline-start: 3px solid var(--bad); padding-inline-start: 8px; }
.tk-power.ok { border-color: var(--good); }
@media (min-width: 900px) { .tk-gate { width: min(92%, 720px); } }
.sv-tiers { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.sv-tiers button { background: var(--panel-2); border: 1px solid var(--bronze); color: var(--ink); border-radius: 10px; padding: 6px 10px; font-weight: 800; font-size: .85rem; }
.sv-tiers button small { display: block; font-weight: 600; font-size: .68rem; color: var(--muted); }
.sv-tiers button.on { background: linear-gradient(#a0742c, #5b4122); border-color: var(--gold); }
.sv-tiers button:disabled { opacity: .5; }
/* 24.10: פרק היום */
.tk-daily { fill: none; stroke: #ffd84a; stroke-width: 3; stroke-dasharray: 6 5; animation: tkspin 6s linear infinite; transform-origin: center; }
@keyframes tkspin { to { transform: rotate(360deg); } }
.tk-dailybox { border-color: #ffd84a; color: var(--ink); cursor: pointer; font: inherit; }
/* 🔍 24.10: כפתורי זום */
#zoom { position: fixed; z-index: 11; inset-inline-end: 10px; bottom: calc(env(safe-area-inset-bottom, 0px) + 112px); display: flex; flex-direction: column; gap: 6px; }
#zoom button { width: 46px; height: 46px; border-radius: 12px; background: var(--panel); border: 1px solid var(--gold); color: var(--gold); font: 900 1.5rem/1 var(--f-body); box-shadow: 0 4px 12px rgba(0,0,0,.4); }
#zoom button:active { transform: scale(.94); }
/* 🏛 24.10: הלובי — עד 3 נחלות לחשבון */
.lobby { max-width: 1040px; margin: 0 auto; }
.lb-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: rgba(28, 22, 14, .75); border: 1px solid rgba(242, 196, 107, .3); border-radius: 16px; padding: 8px 12px; margin-bottom: 14px; }
.lb-av { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--gold); object-fit: cover; display: grid; place-items: center; background: var(--panel-2); font-size: 1.3rem; flex: none; }
.lb-hi { flex: 1; min-width: 150px; }
.lb-hi b { display: block; font-family: var(--f-display); font-size: 1.15rem; color: var(--gold); }
.lb-hi small { color: var(--muted); font-size: .78rem; }
.lb-about { color: var(--ink); text-decoration: none; border: 1px solid var(--gold); border-radius: 999px; padding: 6px 12px; font-weight: 800; font-size: .85rem; }
.lb-out { background: none; border: 1px solid rgba(201, 184, 147, .5); color: var(--muted); border-radius: 999px; padding: 6px 12px; font-weight: 700; font-size: .85rem; }
.lb-logo { width: min(96px, 26vw); }
.lb-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: 8px; }
.lb-card { position: relative; background: linear-gradient(180deg, rgba(58, 42, 20, .92), rgba(28, 22, 14, .95)); border: 1px solid rgba(242, 196, 107, .45); border-radius: 18px; padding: 14px; text-align: start; color: var(--ink); box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .8); display: flex; flex-direction: column; gap: 8px; }
.lb-top { display: flex; gap: 12px; align-items: flex-start; }
.lb-top > div { flex: 1; }
.lb-flag { width: 54px; height: 96px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.lb-slot { font-size: .72rem; color: var(--bronze); font-weight: 800; letter-spacing: .04em; }
.lb-card h3 { margin: 0; font: 900 1.4rem/1.15 var(--f-display); color: var(--gold); }
.lb-nick { margin: 2px 0 0; color: var(--muted); font-size: .9rem; }
.lb-frame { color: var(--gold); font-size: .78rem; }
.lb-del, .lb-lock { background: none; border: 1px solid rgba(255, 156, 122, .4); color: var(--bad); border-radius: 10px; width: 36px; height: 36px; font-size: 1rem; flex: none; }
.lb-lock { border-color: rgba(201, 184, 147, .4); color: var(--muted); display: grid; place-items: center; }
.lb-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0; }
.lb-stats div { background: rgba(0, 0, 0, .25); border-radius: 10px; padding: 6px 4px; text-align: center; }
.lb-stats dt { font-size: .66rem; color: var(--muted); }
.lb-stats dd { margin: 0; font-weight: 900; color: var(--ink); font-size: 1rem; }
.lb-quest { margin: 0; font-size: .85rem; color: var(--ink); line-height: 1.4; }
.lb-ago { margin: 0; font-size: .74rem; color: var(--muted); }
.lb-enter { width: 100%; margin-top: auto; }
.lb-empty { border-style: dashed; border-width: 2px; align-items: center; justify-content: center; text-align: center; min-height: 220px; cursor: pointer; background: rgba(28, 22, 14, .55); }
.lb-empty b { font: 800 1.15rem var(--f-display); color: var(--gold); }
.lb-empty small { color: var(--muted); max-width: 220px; }
.lb-plus { width: 58px; height: 58px; border-radius: 50%; border: 2px solid var(--gold); color: var(--gold); display: grid; place-items: center; font: 900 2rem/1 var(--f-body); }
.lb-empty:hover, .lb-card:hover { border-color: var(--gold); }
#lb-modal { position: fixed; inset: 0; z-index: 40; background: rgba(8, 6, 3, .78); display: grid; place-items: center; padding: 16px; }
#lb-modal[hidden] { display: none; }
.lb-dlg { background: var(--panel-2); border: 1px solid var(--gold); border-radius: 18px; padding: 18px; max-width: 420px; width: 100%; }
.lb-dlg h2 { margin: 0 0 8px; font-family: var(--f-display); color: var(--gold); }
.lb-type { display: block; margin: 10px 0; font-weight: 700; }
.lb-type input { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--bronze); background: #1b1712; color: var(--ink); font: 700 1.05rem var(--f-body); }
.btn.danger { background: linear-gradient(#b8452c, #7a2414); border-color: #ff9c7a; color: #fff4ea; }
.btn.danger:disabled { opacity: .45; }

/* 🏰 25.10: העיר החיה — משאבים עפים לסרגל */
.fly-res { position: fixed; z-index: 70; width: 26px; height: 26px; margin: -13px 0 0 -13px; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.fly-plus { position: fixed; z-index: 71; transform: translateX(-50%); pointer-events: none; direction: ltr; unicode-bidi: isolate; font: 800 1.25rem Assistant, Arial, sans-serif; color: #b8ff8a;
  text-shadow: 0 0 3px #000, 0 2px 4px #000; animation: flyplus 1.2s ease-out forwards; }
@keyframes flyplus { 0% { opacity: 0; transform: translate(-50%, 8px) scale(.7); } 20% { opacity: 1; transform: translate(-50%, 0) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -44px) scale(1); } }
#hud-res button.got { animation: resgot .55s ease-out; }
@keyframes resgot { 0% { transform: scale(1); } 35% { transform: scale(1.22); box-shadow: 0 0 0 4px rgba(184,255,138,.55), 0 0 18px rgba(242,196,107,.9); } 100% { transform: scale(1); } }

/* ---------- 25.10 משוב השותף: לוח הפיקוד, יועץ הנחלה, רשימת המוכנות, חדר המלחמה ---------- */
.hud-cmd { display: grid; grid-template-columns: 1.5fr 1fr 1.15fr 1fr; gap: 4px; background: none; border: 0; padding: 0; text-align: start; }
.hud-cmd > span { background: var(--panel); border: 1px solid rgba(201, 161, 90, .55); border-radius: 8px; padding: 2px 6px; font-size: .72rem; line-height: 1.2; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.hud-cmd > span b { font-weight: 800; }
.hud-cmd > span small { display: block; font-size: .58rem; color: var(--muted); }
.hud-cmd .hc-tier { border-color: var(--gold); }
.hud-cmd .hc-tier b { color: var(--gold); display: block; overflow: hidden; text-overflow: ellipsis; }
.hc-bar { display: block; height: 5px; margin-top: 3px; border-radius: 3px; background: rgba(0, 0, 0, .45); overflow: hidden; }
.hc-bar > i { display: block; height: 100%; background: linear-gradient(90deg, #a0742c, var(--gold)); border-radius: 3px; }
.hud-cmd:active > span { border-color: var(--gold); }

#adv { position: fixed; z-index: 11; inset-inline: 6px; bottom: calc(env(safe-area-inset-bottom, 0px) + 60px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
#adv button { display: grid; grid-template-columns: 22px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 4px; align-items: center; text-align: start; background: var(--panel); border: 1px solid var(--bronze); border-radius: 10px; padding: 4px 6px; min-width: 0; }
#adv i { grid-row: span 2; font-style: normal; font-size: 1.05rem; text-align: center; }
#adv b { font-size: .7rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#adv small { font-size: .6rem; color: var(--good); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#adv button.best { border-color: var(--gold); background: linear-gradient(rgba(122, 78, 20, .95), rgba(40, 28, 12, .95)); animation: advglow 1.8s ease-in-out infinite; }
@keyframes advglow { 50% { box-shadow: 0 0 0 2px rgba(242, 196, 107, .55), 0 0 14px rgba(242, 196, 107, .45); } }
#fb { bottom: calc(env(safe-area-inset-bottom, 0px) + 112px); }
#zoom { bottom: calc(env(safe-area-inset-bottom, 0px) + 112px); }
#map-land { bottom: calc(env(safe-area-inset-bottom, 0px) + 154px); }
@media (min-width: 900px) { #adv { inset-inline: auto 8px; width: 480px; } }

#nudge { position: fixed; z-index: 30; inset-inline: 10px; bottom: calc(env(safe-area-inset-bottom, 0px) + 112px); max-width: 460px; margin-inline: auto; background: rgba(20, 14, 6, .96); border: 2px solid var(--gold); border-radius: 14px; padding: 10px 12px; display: grid; gap: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, .55); animation: nudgein .35s ease-out; }
#nudge b { color: var(--gold); font-family: var(--f-display); }
#nudge span { font-weight: 700; }
#nudge span small { display: block; color: var(--good); font-weight: 600; }
#nudge .ng-x { position: absolute; top: 4px; inset-inline-end: 6px; background: none; border: 0; color: var(--muted); font-size: 1rem; }
@keyframes nudgein { from { opacity: 0; transform: translateY(14px); } }

.ready { background: rgba(0, 0, 0, .25); border: 1px solid var(--bronze-2); border-radius: 12px; padding: 8px 10px; margin: 8px 0; display: grid; gap: 6px; }
.ready > b { color: var(--gold); }
.rq { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; }
.rq i { font-style: normal; font-weight: 900; text-align: center; }
.rq.ok i { color: var(--good); }
.rq.no i { color: var(--bad); }
.rq span small { display: block; color: var(--muted); font-size: .72rem; }
.rq .btn { padding: 4px 10px; font-size: .78rem; }

.tladder { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 6px 0; }
.tl { background: rgba(0, 0, 0, .25); border: 1px solid var(--bronze-2); border-radius: 10px; padding: 6px 3px; text-align: center; opacity: .6; }
.tl i { font-style: normal; font-size: 1.3rem; display: block; }
.tl b { font-size: .68rem; display: block; }
.tl small { font-size: .58rem; color: var(--muted); }
.tl.done { opacity: .85; }
.tl.cur { opacity: 1; border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.ptab, .rtab { width: 100%; border-collapse: collapse; font-size: .85rem; font-variant-numeric: tabular-nums; }
.ptab td, .rtab td, .rtab th { padding: 4px 6px; border-bottom: 1px solid rgba(201, 161, 90, .2); text-align: start; }
.ptab td:last-child { text-align: end; }
.ptab tr.sub td { font-size: .76rem; color: var(--muted); padding-inline-start: 22px; }
.rtab th { font-size: .72rem; color: var(--muted); font-weight: 600; }
.rtab img { width: 26px; height: 26px; object-fit: contain; vertical-align: middle; margin-inline-end: 4px; }
.rtab tr.tot td { border-top: 1px solid var(--bronze); }
.wr-left { font-style: normal; font-size: .68rem; background: var(--gold); color: #2a1a08; border-radius: 999px; padding: 1px 7px; margin-inline-start: 6px; font-weight: 800; }
.g-ok { color: var(--good); }
.g-no { color: var(--bad); }

#wr { position: fixed; inset: 0; z-index: 62; background: #120d07; display: flex; flex-direction: column; align-items: center; }
#wr-c { width: min(100%, calc((100dvh - 90px) * 0.5625)); height: auto; aspect-ratio: 9 / 16; border-radius: 12px; touch-action: none; margin-block: auto 0; }
.wr-help { margin: 6px 0 calc(env(safe-area-inset-bottom, 0px) + 10px); color: var(--muted); font-size: .8rem; }
#wr.tt { justify-content: flex-start; overflow-y: auto; }
.tt-field { width: min(100%, 460px); padding: 10px 12px; display: grid; gap: 8px; }
.tt-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tt-foe, .tt-slot { min-height: 118px; border-radius: 14px; display: grid; justify-items: center; align-content: center; gap: 2px; padding: 6px; text-align: center; }
.tt-foe { background: linear-gradient(#4a1e14, #24100a); border: 2px solid #b8563f; }
.tt-foe img, .tt-slot img, .tt-unit img { width: 64px; height: 64px; object-fit: contain; }
.tt-foe b, .tt-slot b { font-size: .85rem; }
.tt-foe i, .tt-slot i { font-style: normal; color: var(--gold); letter-spacing: 2px; }
.tt-foe.fog { background: repeating-linear-gradient(135deg, #3a3530, #3a3530 8px, #2c2824 8px, #2c2824 16px); border-color: #777; }
.tt-foe.fog b { font-size: 2rem; }
.tt-foe.flip { animation: ttflip .5s ease-out; }
@keyframes ttflip { from { transform: rotateY(90deg); } }
.tt-slot { background: rgba(0, 0, 0, .3); border: 2px dashed var(--bronze); color: var(--muted); font-size: .8rem; }
.tt-slot.on { border-style: solid; border-color: var(--gold); background: linear-gradient(#3a2a14, #1e150a); color: var(--ink); }
.tt-mid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: center; }
.tt-mid i { font-style: normal; font-size: 1.5rem; font-weight: 900; color: var(--muted); }
.tt-mid i.win { color: var(--good); animation: ttpop .4s ease-out; }
.tt-mid i.lose { color: var(--bad); animation: ttpop .4s ease-out; }
@keyframes ttpop { from { transform: scale(2.2); opacity: 0; } }
.tt-pool { width: min(100%, 460px); padding: 0 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tt-unit { background: linear-gradient(#3a2a14, #1e150a); border: 2px solid var(--bronze); border-radius: 14px; padding: 6px 4px; display: grid; justify-items: center; gap: 2px; }
.tt-unit small { font-size: .66rem; color: var(--good); }
.tt-go { width: min(100%, 460px); padding: 10px 12px; display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.tt-go span { font-weight: 800; font-variant-numeric: tabular-nums; }
.tt-msg { font-family: var(--f-display); font-size: 1.3rem; font-weight: 900; text-align: center; margin: 10px 0; }
.tt-msg.win { color: var(--good); }
.tt-msg.lose { color: var(--bad); }
.tt-rules { display: grid; gap: 4px; margin: 6px 0; }
.tt-rules span { background: rgba(0, 0, 0, .25); border-radius: 8px; padding: 4px 8px; font-weight: 700; font-size: .86rem; }

/* ---------- 🎯 שלב 1: יעדי בנייה והתקדמות (פאנל צד) ---------- */
#goals-tab { position: fixed; z-index: 12; inset-inline-start: 0; top: calc(env(safe-area-inset-top, 0px) + 46%); width: 44px; height: 48px; border-radius: 0 14px 14px 0; border: 2px solid var(--bronze); border-inline-start: 0; background: var(--panel); font-size: 1.35rem; padding: 0; box-shadow: 0 6px 16px rgba(0, 0, 0, .45); }
#goals-tab i { position: absolute; top: -6px; inset-inline-end: -6px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--gold); color: #2a1a08; font: 800 .72rem/20px var(--f-body); font-style: normal; padding: 0 5px; }
#goals-tab.deal { border-color: var(--gold); animation: advglow 1.8s ease-in-out infinite; }
#goals { position: fixed; z-index: 13; inset-inline-start: 6px; top: calc(env(safe-area-inset-top, 0px) + 150px); bottom: calc(env(safe-area-inset-bottom, 0px) + 116px); width: min(290px, calc(100vw - 60px)); overflow-y: auto; background: rgba(20, 14, 6, .95); border: 2px solid var(--bronze); border-radius: 14px; padding: 8px 10px; display: grid; align-content: start; gap: 8px; box-shadow: 0 10px 28px rgba(0, 0, 0, .55); }
#goals header { display: flex; align-items: center; justify-content: space-between; }
#goals header b { color: var(--gold); font-family: var(--f-display); font-size: 1.05rem; }
#goals .g-x { background: none; border: 0; color: var(--muted); font-size: 1rem; }
.g-card { background: rgba(0, 0, 0, .3); border: 1px solid var(--bronze-2); border-radius: 12px; padding: 7px 9px; display: grid; gap: 5px; }
.g-card b { font-size: .86rem; }
.g-card small { color: var(--muted); font-size: .7rem; font-variant-numeric: tabular-nums; }
.g-card .btn { padding: 5px 10px; font-size: .8rem; justify-self: start; }
.g-card.ready { border-color: var(--gold); background: linear-gradient(rgba(122, 78, 20, .55), rgba(40, 28, 12, .6)); }
.g-card.ready b { color: var(--good); }
.g-bar { height: 7px; border-radius: 4px; background: rgba(0, 0, 0, .5); overflow: hidden; }
.g-bar i { display: block; height: 100%; background: linear-gradient(90deg, #a0742c, var(--gold)); }
.g-rw { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: .74rem; font-weight: 700; }
.g-rw span { display: inline-flex; align-items: center; gap: 2px; }
.g-rw img { width: 16px; height: 16px; }

/* ---------- 🛡🪨📚 שלב 1ב: קריאה לפני תשובה, אבני הזיכרון, מה אני יודע ---------- */
.q-opts.reading button { opacity: .45; }
.q-opts.reading::before { content: "📖 קוראים…"; display: block; text-align: center; color: var(--muted); font-size: .8rem; margin-bottom: 4px; }
.mk { display: grid; gap: 4px; padding: 6px 0; border-bottom: 1px solid rgba(201, 161, 90, .2); }
.mk small { color: var(--muted); font-size: .76rem; }

/* ---------- 🧩 שלב 1ג: סוגי שאלות ---------- */
.q-text { white-space: pre-line; }
.q-type { display: inline-block; font-size: .72rem; font-weight: 800; color: #2a1a08; background: var(--gold); border-radius: 999px; padding: 1px 9px; margin-bottom: 4px; }
.q-map { max-width: 230px; margin: 4px auto; border-radius: 10px; overflow: hidden; }
.land-svg .lquiz circle:first-child { fill: rgba(224, 53, 43, .25); stroke: #e0352b; stroke-width: 2; animation: qpin 1.2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.land-svg .lquiz circle:last-child { fill: #e0352b; }
@keyframes qpin { 50% { transform: scale(1.35); } }
.tk-says { display: grid; gap: 4px; margin-bottom: 6px; }
.tk-say { background: #3a1610; border: 1px solid #b8563f; border-radius: 12px 12px 12px 2px; padding: 6px 10px; font-family: var(--f-display); }
.tk-say b { display: block; font-size: .95rem; }
.tk-say small { color: var(--muted); font-family: var(--f-body); font-size: .7rem; }
.tk-say.win { background: #20331a; border-color: var(--good); border-radius: 12px 12px 2px 12px; margin: 8px 0; }

/* ---------- ⚔🕵 שלב 1ד: מערכים, ברכות, מרגל ---------- */
.mtac { display: grid; gap: 6px; margin: 6px 0; }
.mtac-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mtac-row .btn { padding: 5px 10px; font-size: .8rem; }
.mtac-row .btn small { display: block; font-size: .64rem; opacity: .85; font-weight: 600; }
.spy { background: rgba(0, 0, 0, .3); border: 1px dashed var(--bronze); border-radius: 12px; padding: 6px 10px; margin: 6px 0; }

/* ---------- ⭐🏗🍇⚔🏠 שלב 2 ---------- */
.unit.elite { border-color: var(--gold) !important; background: linear-gradient(rgba(122, 78, 20, .45), rgba(40, 28, 12, .5)); }
.unit.elite img { filter: sepia(.5) saturate(1.6) brightness(1.1) drop-shadow(0 0 6px rgba(242, 196, 107, .7)); }
.elite-line { background: rgba(242, 196, 107, .1); border: 1px solid var(--gold); border-radius: 10px; padding: 6px 10px; }
.spec { display: grid; gap: 4px; padding: 6px 0; border-bottom: 1px solid rgba(201, 161, 90, .2); }
.spec .ok { color: var(--good); font-weight: 700; }
.calls { display: grid; gap: 4px; margin: 6px 0; }
.calls div { background: rgba(0, 0, 0, .25); border-radius: 8px; padding: 4px 8px; font-size: .85rem; }
.calls small { color: var(--muted); }
.hmembers2 { display: grid; gap: 4px; }
.hmembers2 div { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; background: rgba(0, 0, 0, .22); border-radius: 8px; padding: 4px 8px; }
.hmembers2 div.me { border: 1px solid var(--gold); }
.hmembers2 em { grid-column: 1; font-style: normal; color: var(--gold); font-size: .76rem; }
.hmembers2 small { grid-row: 1; grid-column: 2; color: var(--muted); }
.hillbox { background: rgba(60, 90, 40, .25); border: 1px solid #8ab06a; border-radius: 12px; padding: 6px 10px; margin: 6px 0; }

/* ---------- 🏫 שלב 3: כיתה ---------- */
.cl-in { background: rgba(0, 0, 0, .35); color: var(--ink); border: 1px solid var(--bronze); border-radius: 10px; padding: 7px 10px; font: inherit; }
.cl-code { font-size: 1.05rem; background: rgba(242, 196, 107, .1); border: 1px solid var(--gold); border-radius: 12px; padding: 8px 12px; }
.cl-code b { font-size: 1.6rem; letter-spacing: .15em; color: var(--gold); }
.hq { display: grid; gap: 2px; background: rgba(0, 0, 0, .25); border-radius: 10px; padding: 6px 10px; margin: 4px 0; }
.hq span { color: var(--good); }
.hq small { color: var(--muted); }

/* ---------- 👑 שלב 4: כתר הנחלה ---------- */
.cr-stat { display: flex; flex-wrap: wrap; gap: 6px 14px; background: rgba(242, 196, 107, .1); border: 1px solid var(--gold); border-radius: 12px; padding: 8px 12px; }
.cr-why { color: var(--gold); }
.cr-forts { display: grid; gap: 8px; margin-top: 8px; }
.cr-fort { background: rgba(0, 0, 0, .28); border: 1px solid var(--bronze); border-radius: 12px; padding: 8px 12px; }
.cr-fort.mine { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.cr-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cr-h small, .cr-top small { color: var(--muted); }
.cr-holder { font-size: .92rem; margin: 2px 0 4px; }
.cr-top { margin: 0; padding-inline-start: 20px; }
.cr-top li { display: flex; gap: 6px; }
.cr-top li span { margin-inline-start: auto; font-weight: 700; }
.cr-top li.me { color: var(--gold); }
.cr-f { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
/* ---------- ⛰ גבעות מרוחקות ---------- */
.rh-box { border-color: var(--bronze); }
.rh-box.raid { border-color: #e0715c; background: rgba(224, 113, 92, .12); }
.rh-box.raid > b { color: #ffb0a0; }
.rh-box.linked { border-color: var(--gold); }
.rh-cry { font-weight: 800; font-size: 1.05rem; }
.rh-box span img { width: 16px; height: 16px; vertical-align: -3px; }
/* ---------- ✨ שלב 5: טקסט גדול והקראה ---------- */
html.bigtext .sheet-card, html.bigtext #tkq .tkq-body, html.bigtext #ms-panel { zoom: 1.18; }
.tts { margin-top: 8px; background: rgba(120, 80, 20, .16); border: 1px solid #8a5a1c; border-radius: 999px; padding: 4px 12px; color: #3a2508; font-weight: 700; }
.tts.on { background: #f2c46b; }
/* ---------- 🎨 אצווה 10: תמונות לגבעות ולכתר ---------- */
.rh-art { float: inline-start; width: 84px; height: 84px; object-fit: contain; margin: 0 0 4px 10px; }
.rh-box::after { content: ""; display: block; clear: both; }
.rh-caravan { display: block; width: 100%; max-width: 420px; height: 150px; object-fit: cover; margin: 6px auto; border-radius: 12px; border: 1px solid var(--bronze); }
.cr-title { display: flex; align-items: center; gap: 8px; }
.cr-title img { width: 46px; height: 46px; object-fit: contain; }
.cr-fort { display: grid; grid-template-columns: 76px 1fr; column-gap: 10px; }
.cr-fort > .cr-art { grid-row: span 4; width: 76px; height: 76px; object-fit: contain; align-self: start; }
.cr-fort > :not(.cr-art) { grid-column: 2; }
/* ---------- 🎖 n38: רמת מנהיג, הזמנות, המרה ---------- */
.hud-row { position: relative; }
.hud-lv { position: absolute; top: 30px; inset-inline-start: 30px; width: 26px; height: 26px; border-radius: 50%; padding: 0; border: 0; z-index: 2;
  background: conic-gradient(var(--gold) var(--p, 0%), rgba(0, 0, 0, .55) 0); display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.hud-lv b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #2a2116; color: var(--gold); font: 900 .72rem var(--f-body); }
.ld-bar { position: relative; height: 22px; border-radius: 11px; background: rgba(0, 0, 0, .35); border: 1px solid var(--bronze); overflow: hidden; margin: 6px 0 10px; }
.ld-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #b8862e, var(--gold)); }
.ld-bar span { position: relative; display: block; text-align: center; font: 800 .82rem/22px var(--f-body); color: #fff; text-shadow: 0 1px 2px #000; }
.ld-src { margin: 0 0 8px; padding-inline-start: 18px; color: var(--muted); }
.rf-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.rf-steps span { background: rgba(0, 0, 0, .3); border: 1px solid var(--bronze); border-radius: 999px; padding: 3px 10px; font-size: .85rem; }
.rf-code { font-size: 1.05rem; margin: 8px 0; } .rf-code b { letter-spacing: 2px; color: var(--gold); font-size: 1.25rem; }
.rf-table { width: 100%; border-collapse: collapse; font-size: .85rem; } .rf-table th, .rf-table td { padding: 4px; border-bottom: 1px solid rgba(201, 161, 90, .25); text-align: center; }
.rf-table td:first-child, .rf-table th:first-child { text-align: start; }
.ex-box { background: rgba(0, 0, 0, .25); border: 1px solid var(--bronze); border-radius: 12px; padding: 10px 12px; }

/* ---------------- 🃏 n39: אלבום קלפי התנ״ך — הכול בקוד (0 תמונות) ---------------- */
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.sheet-card.wide { width: min(780px, 100%); }
#hud-cn { position: absolute; top: -6px; inset-inline-start: -6px; min-width: 18px; height: 18px; border-radius: 9px; background: #c79cff; color: #1d0b33; font: 800 .7rem/18px inherit; font-style: normal; text-align: center; padding: 0 4px; animation: cd-pulse 1.6s ease-in-out infinite; }
@keyframes cd-pulse { 50% { transform: scale(1.18); } }
.nc { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 30%; position: relative; width: 156px; aspect-ratio: 5 / 7.4; border-radius: 13px; padding: 5px; color: var(--ink);
  transform: perspective(800px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .18s ease-out; box-shadow: 0 6px 18px rgba(0, 0, 0, .55); }
.nc.big { width: min(290px, 80vw); padding: 7px; }
.nc-R { background: linear-gradient(135deg, #eef2f6, #8f99a4 28%, #fbfcfd 48%, #7f8993 70%, #dfe5ea); }
.nc-E { background: linear-gradient(135deg, #e3c8ff, #7434c4 32%, #f3e2ff 50%, #4e2290 72%, #c79cff); box-shadow: 0 0 16px rgba(164, 92, 255, .55), 0 6px 18px rgba(0, 0, 0, .55); }
.nc-U { background: linear-gradient(135deg, #b9e0ff, #1c4ea6 30%, #e2f2ff 50%, #12357a 72%, #7fbaf5); box-shadow: 0 0 16px rgba(60, 130, 255, .5), 0 6px 18px rgba(0, 0, 0, .55); }
.nc-L { background: linear-gradient(135deg, #fff3c2, #c48f22 28%, #fff8d8 48%, #94640f 70%, #f2c46b); box-shadow: 0 0 20px rgba(242, 196, 107, .65), 0 6px 18px rgba(0, 0, 0, .55); }
.nc-M { background: conic-gradient(from var(--a), #ff6b6b, #ffd36b, #b8ff6b, #6bffd8, #6bb5ff, #b56bff, #ff6bd8, #ff6b6b); animation: nc-spin 4s linear infinite;
  box-shadow: 0 0 26px rgba(255, 255, 255, .55), 0 0 44px rgba(190, 120, 255, .45), 0 6px 18px rgba(0, 0, 0, .55); }
@keyframes nc-spin { to { --a: 360deg; } }
.nc-in { position: relative; height: 100%; border-radius: 9px; overflow: hidden; display: flex; flex-direction: column; gap: 3px; padding: 6px 7px;
  background: radial-gradient(120% 70% at 50% 18%, hsl(var(--h) 38% 26%), #1b140c 72%); }
.nc-M .nc-in::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .22; mix-blend-mode: screen;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .5) 0 2px, transparent 2px 14px), repeating-linear-gradient(-45deg, rgba(160, 220, 255, .5) 0 2px, transparent 2px 14px); }
.nc-top { display: flex; gap: 4px; align-items: center; font-size: .62rem; font-weight: 800; }
.nc-tier { padding: 1px 7px; border-radius: 999px; background: rgba(0, 0, 0, .45); letter-spacing: .5px; }
.nc-M .nc-tier { background: linear-gradient(90deg, #ff8bd8, #8bd8ff); color: #1a0b22; } .nc-L .nc-tier { background: var(--gold); color: #2a1a08; }
.nc-U .nc-tier { background: #3d7fe0; } .nc-E .nc-tier { background: #8a4ad8; } .nc-R .nc-tier { background: #8b949e; color: #111; }
.nc-role { opacity: .85; } .nc-n { margin-inline-start: auto; color: var(--gold); }
.nc-art { position: relative; flex: 1 1 auto; min-height: 58px; display: grid; place-items: center; border-radius: 7px; border: 1px solid rgba(255, 255, 255, .14);
  background: radial-gradient(circle at 50% 40%, hsl(var(--h) 55% 42% / .9), hsl(var(--h) 45% 16%)); }
.nc-art svg { width: 64%; max-height: 92px; fill: hsl(var(--h) 60% 80% / .9); stroke: hsl(var(--h) 60% 92%); stroke-width: 1.5; stroke-linecap: round; opacity: .9; }
.nc-art b { position: absolute; inset-inline-end: 7px; bottom: 2px; font: 900 1.9rem/1 var(--f-display); color: rgba(255, 255, 255, .22); }
.nc.big .nc-art { min-height: 120px; }
.nc-art.pic { overflow: hidden; }
/* n42: המדליונים עגולים — מציגים עיגול חתוך (clip-path), כך שפינות הרקע של הציור לא נראות. טבעת זהב סביב */
.nc-art.pic img { position: absolute; top: 50%; left: 50%; height: 104%; aspect-ratio: 1; width: auto; max-width: none; transform: translate(-50%, -50%);
  object-fit: cover; clip-path: circle(46% at 50% 50%); }
.nc-art.pic::after { content: ""; position: absolute; top: 50%; left: 50%; height: 96%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  box-shadow: 0 0 0 2px var(--gold), 0 0 12px rgba(242, 196, 107, .55); pointer-events: none; }
.nc-buff { font-size: .6rem; font-weight: 800; text-align: center; color: #c7f08a; background: rgba(0, 0, 0, .45); border-radius: 5px; padding: 2px 4px; }
.nc.big .nc-buff { font-size: .74rem; } .nc-buff.sp { color: #ffd36b; }
.cd-buffs { background: rgba(0, 0, 0, .3); border: 1px solid var(--bronze); border-radius: 10px; padding: 6px 10px; margin-bottom: 8px; font-size: .85rem; }
.cd-buffs summary { cursor: pointer; } .cd-buffs.empty { color: var(--muted); }
.cd-bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 10px; margin-top: 6px; }
.cd-bgrid span { display: grid; grid-template-columns: 1fr auto; gap: 2px 6px; font-size: .78rem; }
.cd-bgrid i { font-style: normal; color: var(--muted); } .cd-bgrid b { color: #c7f08a; }
.cd-bgrid em { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: linear-gradient(90deg, #7fd36a var(--v), rgba(255, 255, 255, .12) var(--v)); }
.nc-art.pic b { z-index: 1; text-shadow: 0 2px 6px #000; color: rgba(255, 255, 255, .35); } .nc.big .nc-art b { font-size: 3.4rem; }
.nc-name { font: 900 1.02rem/1.1 var(--f-display); text-align: center; text-shadow: 0 2px 4px #000; }
.nc-name small { display: block; font: 700 .68rem var(--f-body); color: var(--muted); }
.nc.big .nc-name { font-size: 1.45rem; }
.nc-stats { display: grid; gap: 2px; background: rgba(0, 0, 0, .35); border-radius: 6px; padding: 3px 5px; }
.nc-stats div { display: grid; grid-template-columns: 46px 1fr 22px; gap: 4px; align-items: center; font-size: .62rem; }
.nc-stats i { font-style: normal; color: var(--muted); } .nc-stats b { text-align: end; color: var(--gold); }
.nc-stats em { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--gold) var(--v), rgba(255, 255, 255, .13) var(--v)); }
.nc.big .nc-stats div { font-size: .78rem; grid-template-columns: 62px 1fr 28px; }
.nc-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: center; font-size: .6rem; color: var(--muted); }
.nc.big .nc-meta { font-size: .72rem; }
.nc blockquote { margin: 0; padding: 4px 6px; border-inline-start: 3px solid var(--gold); background: rgba(0, 0, 0, .3); border-radius: 4px; font: 600 .74rem/1.35 var(--f-display); }
.nc blockquote cite { display: block; font: 700 .64rem var(--f-body); color: var(--gold); font-style: normal; margin-top: 2px; }
.nc-seal { position: absolute; top: 24px; inset-inline-start: 5px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-content: center; text-align: center;
  transform: rotate(-14deg); color: #3b2504; font: 900 .5rem/1.05 var(--f-display); z-index: 2;
  background: radial-gradient(circle at 34% 28%, #fff6cf, #e3b44c 42%, #9a6612 88%);
  box-shadow: inset 0 0 0 2px rgba(255, 244, 200, .8), inset 0 0 0 4px #a8781e, inset 0 0 0 5px rgba(255, 244, 200, .55), 0 2px 6px rgba(0, 0, 0, .6); }
.nc-seal small { font: 800 .42rem var(--f-body); }
.nc.big .nc-seal { width: 66px; height: 66px; font-size: .68rem; top: 34px; } .nc.big .nc-seal small { font-size: .56rem; }
.nc-glare { position: absolute; inset: 0; border-radius: 13px; pointer-events: none; mix-blend-mode: color-dodge; opacity: .0; transition: opacity .2s;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .42), transparent 46%),
    linear-gradient(115deg, transparent 28%, rgba(255, 255, 255, .18) 44%, rgba(255, 120, 220, .16) 50%, rgba(120, 220, 255, .16) 56%, transparent 72%);
  background-size: 100% 100%, 260% 260%; background-position: center, var(--mx) var(--my); }
.nc.big .nc-glare, .nc-M .nc-glare, .nc-L .nc-glare { opacity: 1; }
.cd-tabs, .cd-sub { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.cd-tabs button, .cd-sub button { background: var(--panel); border: 1px solid var(--bronze); border-radius: 999px; padding: 5px 12px; font-weight: 800; font-size: .85rem; color: var(--ink); }
.cd-tabs button.on, .cd-sub button.on { background: var(--gold); color: #2a1a08; }
.cd-sub.small button { font-size: .75rem; padding: 3px 9px; }
.cd-bar { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.cd-tier { flex: 0 0 auto; border-radius: 10px; padding: 4px 9px; border: 2px solid transparent; color: #1a1208; font-size: .75rem; line-height: 1.15; }
.cd-tier small { display: block; font-weight: 700; } .cd-tier.on { outline: 3px solid var(--ink); }
.cd-tier:not([class*="nc-"]) { background: var(--panel); color: var(--ink); border-color: var(--bronze); }
.cd-q { width: 100%; margin: 8px 0; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--bronze); background: rgba(0, 0, 0, .3); color: var(--ink); font-size: 1rem; }
.cd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; max-height: 46vh; overflow: auto; padding: 2px; }
.cd-tile { display: block; border-radius: 9px; padding: 3px; color: #fff; text-align: center; min-height: 54px; border: 0; }
.cd-tile b, .cd-tile small { display: block; background: rgba(20, 14, 8, .82); }
.cd-tile b { font: 800 .82rem/1.2 var(--f-display); padding: 6px 3px 2px; border-radius: 6px 6px 0 0; }
.cd-tile small { font-size: .62rem; color: var(--muted); padding: 0 3px 4px; border-radius: 0 0 6px 6px; }
.cd-tile.off { filter: saturate(.45) brightness(.6); } .cd-tile.off b { font-size: 1.2rem; }
.cd-tile[disabled] { opacity: .35; }
/* 🃏 n47: מיני-קלפים באלבום (3–4 בשורה בטלפון, 6–8 במחשב) + צלליות בסגנון פוקימון GO לקלפים שעוד לא הושגו */
.cd-grid:has(.mc) { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; max-height: 62vh; }
@media (min-width: 760px) { .cd-grid:has(.mc) { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); } }
.cd-grid .cd-more { grid-column: 1 / -1; }
.mc { --h: 30; position: relative; display: flex; flex-direction: column; aspect-ratio: 5 / 7; padding: 3px; border: 0; border-radius: 10px; color: #fff;
  cursor: pointer; content-visibility: auto; contain-intrinsic-size: 86px 120px; transition: transform .12s ease-out; }
.mc:hover, .mc:focus-visible { transform: translateY(-2px) scale(1.03); }
.mc.nc-M { animation: none; }                                     /* ⚠ מאות קונוסים מסתובבים = קרטועים בטלפון */
.mc-art { position: relative; flex: 1 1 82%; min-height: 0; display: grid; place-items: center; overflow: hidden; border-radius: 7px 7px 3px 3px;
  background: radial-gradient(120% 80% at 50% 25%, hsl(var(--h) 38% 30%), #1b140c 75%); }
.mc-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.mc-art.tall img { object-position: 50% 8%; }
.mc-art svg { width: 70%; fill: hsl(var(--h) 60% 80% / .9); stroke: hsl(var(--h) 60% 92%); stroke-width: 1.5; stroke-linecap: round; }
.mc-name { flex: 0 0 auto; margin-top: 2px; padding: 3px 2px; border-radius: 3px 3px 7px 7px; background: rgba(20, 14, 8, .88);
  font: 800 .72rem/1.15 var(--f-display); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc i { position: absolute; font-style: normal; font-weight: 900; line-height: 1; pointer-events: none; }
.mc-gem { top: 6px; inset-inline-start: 6px; width: 11px; height: 11px; transform: rotate(45deg); border: 1.5px solid rgba(255, 255, 255, .85); border-radius: 2px; box-shadow: 0 0 6px rgba(0, 0, 0, .7); }
.nc-M .mc-gem { background: linear-gradient(135deg, #ff8bd8, #8bd8ff); } .nc-L .mc-gem { background: var(--gold); } .nc-U .mc-gem { background: #3d7fe0; }
.nc-E .mc-gem { background: #8a4ad8; } .nc-R .mc-gem { background: #8b949e; }
.mc-n { top: 5px; inset-inline-end: 5px; padding: 2px 5px; border-radius: 999px; background: rgba(0, 0, 0, .75); color: var(--gold); font-size: .68rem; }
.mc-sig { bottom: 24px; inset-inline-end: 5px; font-size: .9rem; filter: drop-shadow(0 1px 2px #000); }
.mc.signed { outline: 2px solid #ffd36b; outline-offset: 1px; }
/* 🌑 צללית: הציור נצבע שחור-אינדיגו עם קו זוהר בצבע הדרגה. אין שם ואין ציור צבעוני עד שמשיגים */
.mc-off { --glow: #b8c2cc; background: #0d0b1a; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .06); }
.mc-off.nc-E { --glow: #b07aff; } .mc-off.nc-U { --glow: #5aa0ff; } .mc-off.nc-L { --glow: #ffd36b; } .mc-off.nc-M { --glow: #ff9be6; }
.mc-off .mc-art { background: radial-gradient(90% 70% at 50% 40%, #1d1a3a, #08070f 80%); }
.mc-off .mc-art svg { filter: brightness(0) drop-shadow(0 0 1px var(--glow)) drop-shadow(0 0 4px var(--glow)); opacity: .92; }
/* דיוקן (מדליון עגול): צל כהה ומסתורי של הדמות בתוך טבעת זוהרת — לא ריבוע שחור */
.mc-off .mc-art.pic img { width: 84%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; filter: grayscale(1) sepia(1) hue-rotate(205deg) saturate(1.6) brightness(.3) contrast(1.5); box-shadow: 0 0 0 2px var(--glow), 0 0 14px var(--glow); }
.mc-off .mc-art svg { fill: #000; stroke: #000; }
.mc-q { top: 50%; left: 50%; transform: translate(-50%, -60%); font: 900 1.9rem var(--f-display); color: var(--glow); opacity: .55; text-shadow: 0 0 10px var(--glow); }
.mc-no { flex: 0 0 auto; margin-top: 2px; text-align: center; font: 800 .7rem/1.6 var(--f-body); color: var(--glow); letter-spacing: 1px; }
.cd-show.mc-big .mc { width: min(210px, 62vw); cursor: default; } .cd-show.mc-big .mc-q { font-size: 4rem; }
.cd-hint { text-align: center; } .cd-have { margin: 8px 0 0; }
/* 📲 n47: קיצור דרך למסך הבית (js/install.js) */
.sc-steps { margin: 8px 0; padding-inline-start: 22px; line-height: 1.7; } .sc-steps li { margin: 4px 0; }
.sc-ico { display: inline-block; padding: 0 6px; border: 1px solid var(--bronze); border-radius: 6px; font-weight: 900; }
.cd-code { display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; margin: 12px 0 4px; }
.cd-code input { width: 9em; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--bronze); background: rgba(0, 0, 0, .3); color: var(--ink); font: 800 1rem var(--f-body); letter-spacing: 1px; text-transform: uppercase; }
.cd-findbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .cd-findbar .btn { padding: 3px 10px; font-size: .8rem; }
@media (prefers-reduced-motion: reduce) { .mc { transition: none; } }
.cd-show { display: grid; place-items: center; padding: 6px 0 10px; } .cd-show.small .nc { width: 140px; }
.nc-lock { width: 150px; aspect-ratio: 5 / 7.4; margin: 6px auto; border-radius: 12px; display: grid; place-items: center; filter: grayscale(.7) brightness(.6); }
.nc-lock b { font: 900 4rem var(--f-display); color: rgba(255, 255, 255, .7); }
.cd-packs { text-align: center; }
.cd-pack { width: 150px; margin: 6px auto; display: block; } .cd-pack.off { filter: grayscale(.8) brightness(.6); }
.cd-pack.glow { animation: cd-float 2.4s ease-in-out infinite; filter: drop-shadow(0 0 14px rgba(242, 196, 107, .8)); }
@keyframes cd-float { 50% { transform: translateY(-6px) rotate(-2deg); } }
.cd-odds { margin: 8px auto; border-collapse: separate; border-spacing: 0 3px; font-size: .8rem; }
.cd-odds td { padding: 2px 12px; color: #1a1208; } .cd-odds td:first-child { border-radius: 6px 0 0 6px; } .cd-odds td:last-child { border-radius: 0 6px 6px 0; }
.cd-reveal { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.cd-flip { position: relative; width: min(230px, 80vw); aspect-ratio: 5 / 7.4; perspective: 900px; }
.cd-flip > div { position: absolute; inset: 0; backface-visibility: hidden; transition: transform .7s; display: grid; place-items: center; }
.cd-flip .cd-back { animation: cd-out .7s var(--d) forwards; } .cd-flip .cd-back img { width: 82%; }
.cd-flip .cd-front { animation: cd-in .7s var(--d) backwards; } .cd-flip .nc.big { width: 100%; transform: none; }
.cd-reveal.done .cd-back { display: none; } .cd-reveal.done .cd-front { animation: none; transform: none; }
@keyframes cd-out { to { transform: rotateY(-180deg); } }
@keyframes cd-in { from { transform: rotateY(180deg); } to { transform: rotateY(0deg); } }
.cd-new { position: absolute; top: -6px; inset-inline-end: -6px; background: #7fd36a; color: #10240a; font-weight: 900; font-size: .75rem; border-radius: 999px; padding: 2px 8px; z-index: 3; }
.cd-wow { text-align: center; font: 900 1.4rem var(--f-display); background: linear-gradient(90deg, #ff8bd8, #ffd36b, #8bd8ff); -webkit-background-clip: text; background-clip: text; color: transparent; animation: cd-pulse 1s ease-in-out infinite; }
.cd-picks { display: flex; gap: 8px; justify-content: center; margin: 8px 0; }
.cd-picks > * { width: 96px; } .cd-slot { display: grid; place-items: center; height: 58px; border: 2px dashed var(--bronze); border-radius: 9px; font-size: 1.4rem; color: var(--muted); }
.cd-list { display: grid; gap: 6px; max-height: 44vh; overflow: auto; }
.cd-row { display: grid; grid-template-columns: 104px 1fr auto; gap: 8px; align-items: center; background: rgba(0, 0, 0, .28) !important; border-radius: 10px; padding: 5px; }
.cd-row small { display: block; color: var(--muted); font-size: .72rem; } .cd-ver { color: #7fd36a; font-weight: 800; }
.cd-wal { font-size: .85rem; } .cd-price { display: block; margin: 8px 0; font-weight: 800; }
.cd-price input { width: 110px; font-size: 1.1rem; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--bronze); background: rgba(0, 0, 0, .3); color: var(--ink); }
.cd-fee { background: rgba(0, 0, 0, .3); border: 1px dashed var(--bronze); border-radius: 8px; padding: 6px 10px; font-size: .85rem; }
.tk-acts .tk-psalm.due { background: linear-gradient(90deg, #8a5a1c, #c9a15a); color: #fff; animation: cd-pulse 2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .nc-M, .cd-pack.glow, #hud-cn, .tk-psalm.due { animation: none; } .nc { transition: none; } }

/* ---------------- 🎤 n39: מזמור היום בקול ---------------- */
.ps-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; } .ps-head h2 { margin: 0; } .ps-head span { color: var(--muted); font-size: .85rem; }
.ps-note { background: rgba(0, 0, 0, .3); border-radius: 8px; padding: 6px 10px; font-size: .85rem; }
.ps-text { direction: rtl; max-height: 46vh; overflow: auto; margin: 8px 0; padding: 12px 16px; border-radius: 12px; color: #2b1d0c;
  background: linear-gradient(180deg, #f7ecd2, #ecdcb6); box-shadow: inset 0 0 0 2px #c9a15a, inset 0 0 24px rgba(120, 80, 20, .25);
  font: 500 1.55rem/2.15 var(--f-display); }
.ps-text .ps-v { margin: 0 0 4px; color: #2b1d0c; } .ps-v i { font-style: normal; color: #8a5a1c; }
.ps-w { border-radius: 5px; padding: 0 2px; transition: background .25s, color .25s; }
.ps-w.ps-sub { color: #7a2f0a; font-weight: 700; }
.ps-w.on { color: #155c25; background: linear-gradient(transparent 55%, rgba(242, 196, 107, .7) 0); }
.ps-w.cur { outline: 2px dashed #8a5a1c; }
.ps-meter { position: relative; height: 14px; border-radius: 7px; background: rgba(0, 0, 0, .35); overflow: hidden; }
.ps-meter i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #f2c46b, #7fd36a); transition: width .3s; }
.ps-meter span { position: relative; display: block; text-align: center; font: 800 .7rem/14px var(--f-body); }
.ps-live { font-weight: 800; align-self: center; }
.ps-score { position: relative; width: 120px; margin: 6px auto; } .ps-score svg { display: block; transform: rotate(-90deg); }
.ps-score path { fill: none; stroke-width: 3.2; } .ps-score .bg { stroke: rgba(255, 255, 255, .12); } .ps-score .fg { stroke: var(--gold); stroke-linecap: round; }
.ps-score b { position: absolute; inset: 0; display: grid; place-items: center; font: 900 1.6rem var(--f-display); }
.ps-pack { font: 900 1.2rem var(--f-display); color: #c79cff; text-align: center; }
@media (max-width: 480px) { .ps-text { font-size: 1.3rem; padding: 10px; } .cd-row { grid-template-columns: 90px 1fr; } .cd-row .btn { grid-column: 1 / -1; } }

/* ---------------- 🎮 n40: משחקוני חדר המלחמה ---------------- */
.arc-ov { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; background: radial-gradient(120% 80% at 50% 0%, #3a2c18, #120d07 70%); color: var(--ink); }
.arc-top { display: flex; align-items: center; gap: 10px; padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 8px; border-bottom: 1px solid rgba(201, 161, 90, .35); }
.arc-top b { font: 900 1.05rem var(--f-display); } .arc-sub { color: var(--muted); font-size: .8rem; flex: 1; }
.arc-x { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--bronze); background: var(--panel); color: var(--ink); }
.arc-body { flex: 1; overflow: auto; padding: 10px 12px calc(env(safe-area-inset-bottom, 0px) + 12px); display: flex; flex-direction: column; align-items: center; }
.arc-hero img { width: 100%; max-height: 150px; object-fit: cover; border-radius: 12px; border: 1px solid var(--bronze); }
.arc-q { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; background: rgba(0, 0, 0, .6); padding: 16px; }
.arc-qc { width: min(440px, 100%); background: var(--panel-2); border: 2px solid var(--gold); border-radius: 16px; padding: 14px; text-align: center; }
.arc-qc p { font: 700 1.1rem var(--f-display); margin: 0 0 4px; } .arc-qc small { color: var(--muted); }
.arc-qt { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .12); margin: 10px 0; overflow: hidden; }
.arc-qt i { display: block; height: 100%; background: linear-gradient(90deg, #ff9c7a, var(--gold)); animation: arc-timer var(--s) linear forwards; }
@keyframes arc-timer { from { width: 100%; } to { width: 0; } }
.bar { height: 10px; border-radius: 5px; background: rgba(0, 0, 0, .45); overflow: hidden; border: 1px solid rgba(255, 255, 255, .15); }
.bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #7fd36a, #c7f08a); transition: width .35s; }
.bar.foe i, .sq-boss .bar i { background: linear-gradient(90deg, #ff9c7a, #f2c46b); }
/* 🎺 יריחו */
.jr { width: min(460px, 100%); text-align: center; }
.jr-city { position: relative; height: 150px; border-radius: 12px; overflow: hidden; border: 1px solid var(--bronze); }
.jr-city img { width: 100%; height: 100%; object-fit: cover; }
.jr-city.fall img { animation: jr-fall 1.6s ease-in forwards; }
@keyframes jr-fall { 20% { transform: translateX(-4px) rotate(-1deg); } 40% { transform: translateX(4px) rotate(1deg); } 100% { transform: translateY(30px) scale(1.05); filter: sepia(.6) brightness(.8); } }
.jr-round { margin: 8px 0; font-weight: 800; }
.jr-pads { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.jr-pad { height: 96px; border-radius: 18px; border: 3px solid rgba(255, 255, 255, .2); color: #fff; font-weight: 900; display: grid; place-items: center; transition: transform .1s, filter .1s; filter: brightness(.65); }
.jr-pad b { font-size: 1.8rem; } .jr-pad span { font-size: .95rem; }
.jr-pad.p0 { background: #b57a1e; } .jr-pad.p1 { background: #2f6fb2; } .jr-pad.p2 { background: #8a3b8f; } .jr-pad.p3 { background: #3c8a4a; }
.jr-pad.on { filter: brightness(1.35); transform: scale(1.05); box-shadow: 0 0 22px rgba(255, 230, 160, .8); }
.jr-msg { font-weight: 800; color: var(--gold); min-height: 1.4em; }
/* 🪨 קלע הפסוק */
.vs { width: min(560px, 100%); }
.vs-line { font: 800 1.35rem/2 var(--f-display); text-align: center; background: rgba(0, 0, 0, .3); border-radius: 12px; padding: 8px; }
.vs-slot { padding: 0 4px; border-radius: 6px; transition: .3s; } .vs-slot.hide { color: transparent; background: rgba(255, 255, 255, .08); }
.vs-slot.got { color: #c7f08a; }
.vs-msg { text-align: center; font-weight: 800; color: var(--gold); }
.vs-field { position: relative; height: min(46vh, 380px); border-radius: 14px; background: linear-gradient(#6a8fb8, #a6c27a 70%); overflow: hidden; }
.vs-stone { position: absolute; left: var(--x); top: var(--y); padding: 7px 12px; border-radius: 40% 46% 42% 50%; border: 2px solid #5b5650;
  background: radial-gradient(circle at 35% 30%, #d8d2c4, #8e887c); color: #1a1208; font: 800 1rem var(--f-display); animation: vs-float var(--d) ease-in-out infinite alternate; }
@keyframes vs-float { from { transform: translate(-12px, -8px) rotate(-4deg); } to { transform: translate(14px, 10px) rotate(5deg); } }
.vs-stone.flew { transition: .3s; transform: translateY(-300px) scale(.4); opacity: 0; }
.vs-stone.miss { animation: vs-shake .35s; border-color: #ff9c7a; }
@keyframes vs-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.vs-misses { text-align: center; font-size: .85rem; color: var(--muted); margin-top: 6px; }
/* ⛺ מחנות */
.cp { text-align: center; } .cp canvas { border-radius: 10px; border: 2px solid var(--bronze); touch-action: none; }
.cp-hud { font-weight: 800; margin: 6px 0; } .cp-tip, .bl-tip { font-size: .78rem; color: var(--muted); }
/* 🏹 בליסטרה */
.bl { text-align: center; width: 100%; } .bl canvas { border-radius: 10px; border: 2px solid var(--bronze); touch-action: none; max-width: 100%; }
.bl-hud { font-weight: 800; margin: 6px 0; } .bl-btns { margin: 6px 0; }
/* 🗼 מגדל */
.tw { width: min(460px, 100%); display: flex; flex-direction: column; gap: 6px; }
.tw-boss { display: flex; align-items: center; gap: 10px; justify-content: center; padding: 6px; border-radius: 12px; background: rgba(120, 30, 20, .35); border: 1px solid #a8451c; }
.tw-boss img { height: 54px; } .tw-boss b { font: 900 1.3rem var(--f-display); } .tw-boss.near { box-shadow: 0 0 18px rgba(255, 120, 60, .6); }
.tw-floor { display: flex; gap: 6px; justify-content: center; padding: 6px; border-radius: 10px; background: rgba(0, 0, 0, .25); opacity: .55; }
.tw-floor.cur { opacity: 1; outline: 2px solid var(--gold); background: rgba(242, 196, 107, .12); } .tw-floor.done { opacity: .35; }
.tw-room { flex: 1; max-width: 120px; padding: 8px 4px; border-radius: 10px; border: 1px solid var(--bronze); background: var(--panel); color: var(--ink); }
.tw-room i { display: block; font-style: normal; font-size: 1.2rem; } .tw-room b { font: 900 1.2rem var(--f-display); }
.tw-room.gate { background: linear-gradient(#5d4416, #2f240f); border-color: var(--gold); } .tw-room.foe b { color: #ffb08f; }
.tw-room.took { outline: 3px solid #7fd36a; }
.tw-hero { display: flex; align-items: center; justify-content: center; gap: 8px; } .tw-hero img { height: 70px; } .tw-hero b { font: 900 1.6rem var(--f-display); color: #c7f08a; }
.tw-msg { text-align: center; font-size: .85rem; }
/* 💠 חוליית החושן */
.sq { width: min(560px, 100%); }
.sq-boss { text-align: center; padding: 8px; border-radius: 12px; background: rgba(120, 30, 20, .35); border: 1px solid #a8451c; }
.sq-boss img { height: 64px; display: block; margin: 0 auto 2px; } .sq-boss b { font: 900 1.3rem var(--f-display); } .sq-boss span { font-size: .75rem; color: var(--muted); }
.sq-log { min-height: 2.4em; text-align: center; font-weight: 800; color: var(--gold); margin: 8px 0; }
.sq-heroes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sq-h { border-radius: 10px; padding: 4px; color: #fff; border: 0; text-align: center; transition: transform .15s; }
.sq-h b { display: block; font: 800 .82rem var(--f-display); background: rgba(20, 14, 8, .8); border-radius: 6px; padding: 3px 2px; }
.sq-h small { display: block; font-size: .62rem; background: rgba(20, 14, 8, .8); margin: 2px 0; border-radius: 4px; }
.sq-h .bar { height: 7px; } .pips { display: flex; gap: 3px; justify-content: center; margin-top: 3px; }
.pips i { width: 9px; height: 9px; border-radius: 50%; background: rgba(0, 0, 0, .5); } .pips i.on { background: #8bd8ff; box-shadow: 0 0 6px #8bd8ff; }
.sq-h.ready { animation: cd-pulse 1s ease-in-out infinite; box-shadow: 0 0 16px #8bd8ff; } .sq-h.queued { outline: 3px solid var(--gold); }
.sq-h.down { filter: grayscale(1) brightness(.5); } .sq-h.hit { transform: translateY(4px); }
.cd-tile.sel { outline: 3px solid var(--gold); }
/* 💧 נקבת האוצר */
.pn { width: min(480px, 100%); } .pn-msg { text-align: center; font-weight: 800; }
.pn-shaft { display: flex; flex-direction: column; gap: 14px; padding: 12px; border-radius: 16px; background: linear-gradient(#4a3f33, #2a221a); border: 3px solid #6b5a45; }
.pn-row { display: flex; gap: 12px; justify-content: center; }
.pn-cell { position: relative; flex: 1; max-width: 150px; min-height: 74px; border-radius: 10px; background: #1c160f; border: 2px solid #7a6a55; }
.pn-cell.water { background: linear-gradient(#1c160f 30%, #2c6fa8); } .pn-cell.scout { border-color: var(--gold); background: #2f2617; }
.pn-in { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: center; min-height: 70px; font-size: 1.7rem; }
.pn-in img { height: 46px; } .pn-S img { height: 52px; }
.pn-pin { position: absolute; bottom: -13px; left: 50%; transform: translateX(-50%); width: 76%; height: 18px; border-radius: 9px; border: 1px solid #5b3410;
  background: linear-gradient(#e7a35b, #9a5a1c); color: #2a1404; font-weight: 900; font-size: .8rem; z-index: 2; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.pn-pin.out { transform: translateX(80%); opacity: .25; transition: .4s; }
/* ⚔ דו-קרב */
.du { width: min(640px, 100%); border-radius: 14px; background-size: cover; background-position: center; padding: 10px; border: 2px solid var(--bronze); }
.du-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .du-bars b { font-size: .8rem; text-shadow: 0 1px 3px #000; }
.du-ring { position: relative; height: min(36vh, 260px); }
.du-f { position: absolute; bottom: 4px; height: 66%; max-width: 44%; object-fit: contain; transition: transform .25s; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .5)); }
.du-f.me { inset-inline-end: 1%; transform: scaleX(-1); } .du-f.foe { inset-inline-start: 1%; }
.du-f.me.strike { transform: scaleX(-1) translateX(-40px); } .du-f.foe.strike { transform: translateX(40px); }
.du-f.me.block, .du-f.foe.block { filter: drop-shadow(0 0 10px #8bd8ff); } .du-f.me.sling, .du-f.foe.sling { filter: drop-shadow(0 0 10px #f2c46b); }
.du-f.kneel { transform: translateY(18%) rotate(-8deg); filter: grayscale(.4) brightness(.8); } .du-f.me.kneel { transform: scaleX(-1) translateY(18%) rotate(-8deg); }
.du-fx { position: absolute; left: 50%; top: 45%; width: 30px; height: 30px; border-radius: 50%; transform: translate(-50%, -50%) scale(0); }
.du-fx.go { animation: du-fx .6s ease-out; } .du-fx.win { background: radial-gradient(#fff6cf, transparent 70%); } .du-fx.lose { background: radial-gradient(#ffd0c0, transparent 70%); }
.du-fx.tie { background: radial-gradient(#cfd8e8, transparent 70%); } .du-fx.spirit { background: radial-gradient(#ffe9a0, rgba(242, 196, 107, .4) 50%, transparent 72%); }
@keyframes du-fx { from { transform: translate(-50%, -50%) scale(.2); opacity: 1; } to { transform: translate(-50%, -50%) scale(9); opacity: 0; } }
.du-msg { text-align: center; font-weight: 800; background: rgba(0, 0, 0, .45); border-radius: 8px; padding: 4px 8px; }
.du-moves { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
#du-sp.armed { background: linear-gradient(90deg, #f2c46b, #fff1b8); color: #2a1a08; animation: cd-pulse 1s infinite; }
.du-code { font-size: 1.6rem; letter-spacing: 3px; color: var(--gold); }
.du-friends { background: rgba(0, 0, 0, .25); border-radius: 10px; padding: 6px 10px; margin: 6px 0; }
.du-friends input { width: 110px; font-size: 1rem; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--bronze); background: rgba(0, 0, 0, .3); color: var(--ink); text-transform: uppercase; }
/* 🔥 מדורת הגבעה */
.ht-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ht-tile { background: rgba(0, 0, 0, .3); border: 1px solid rgba(201, 161, 90, .35); border-radius: 10px; padding: 6px; text-align: center; font-size: .75rem; display: grid; gap: 3px; }
.ht-tile.on { border-color: var(--gold); } .ht-tile i { font-style: normal; font-size: 1.4rem; } .ht-tile b { font-size: .8rem; }
.ht-lv { color: var(--gold); letter-spacing: 2px; } .ht-tile .cost { justify-content: center; } .btn.sm { padding: 4px 8px; font-size: .78rem; }
.ht-fire { grid-column: 1 / -1; text-align: center; font-size: 2.2rem; animation: ht-fire 1.2s ease-in-out infinite alternate; }
.ht-fire small { display: block; font-size: .7rem; color: var(--muted); }
@keyframes ht-fire { to { transform: scale(1.12); filter: drop-shadow(0 0 10px #ffb24a); } }
@media (prefers-reduced-motion: reduce) { .vs-stone, .ht-fire, .sq-h.ready, #du-sp.armed { animation: none; } }

/* ---------------- 📈 n43: מדרגות קושי ---------------- */
.dinfo { margin: 6px 0; padding: 6px 10px; border-radius: 10px; font-size: .85rem; background: rgba(0, 0, 0, .3); border-inline-start: 4px solid #7fd36a; }
.dinfo.l1 { border-color: #f2d24a; } .dinfo.l2 { border-color: #f29a3a; } .dinfo.l3 { border-color: #ff5c4a; }
.dinfo small { color: var(--muted); }
.dbadge { font-style: normal; font-size: .75em; }
.jr-pad.ghost { filter: brightness(.95); box-shadow: 0 0 6px rgba(255, 230, 160, .35); }

/* ✍️ n44: קלף חתום ע״י המייסד — סרט זהב זוהר */
.nc.signed { box-shadow: 0 0 0 2px #f4d27a, 0 0 18px 4px rgba(244, 196, 80, .55); }
.nc-sig { position: absolute; inset-inline: -6px; bottom: 30%; transform: rotate(-6deg); z-index: 4; pointer-events: none;
  background: linear-gradient(90deg, #8a5a12, #f6d77c 30%, #fff3c4 50%, #f6d77c 70%, #8a5a12); color: #3b2405;
  font: 800 .62rem var(--f-body); text-align: center; padding: 3px 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, .35), 0 0 14px rgba(255, 214, 110, .8);
  animation: nc-sig-glow 2.4s ease-in-out infinite; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nc.big .nc-sig { font-size: .82rem; padding: 5px 10px; white-space: normal; }
@keyframes nc-sig-glow { 50% { box-shadow: 0 2px 8px rgba(0, 0, 0, .35), 0 0 26px rgba(255, 224, 140, 1); filter: brightness(1.12); } }
@media (prefers-reduced-motion: reduce) { .nc-sig { animation: none; } }
.cd-tile.signed { box-shadow: 0 0 0 2px #f4d27a, 0 0 10px rgba(244, 196, 80, .6); }
.cd-signote { text-align: center; font-weight: 700; color: #8a5a12; margin: 6px 0; }

/* ===== 👑 n45: חידון התנ״ך העולמי · זירת חתני התנ״ך · הטורניר ===== */
.wq-meta { display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 0 8px; }
.wq-meta span { background: rgba(0, 0, 0, .3); border: 1px solid var(--bronze); border-radius: 99px; padding: 2px 10px; font-size: .8rem; color: var(--muted); }
.wq-timer { height: 6px; border-radius: 3px; background: rgba(0, 0, 0, .35); overflow: hidden; margin-bottom: 10px; }
.wq-timer i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #e8b94a, #f6dc8a); }
.wq-timer i.go { transition: width var(--sec) linear; width: 0; }
.wq-timer i.stop { transition: none; }
.wq.gold { border: 2px solid #e8b94a; border-radius: 14px; padding: 10px; background: radial-gradient(ellipse at top, rgba(232, 185, 74, .22), transparent 70%); box-shadow: 0 0 22px rgba(232, 185, 74, .35); }
.wq #wq-res p.ok { color: var(--good); font-weight: 800; }
.wq-win { margin: 10px 0; padding: 10px 12px; border-radius: 12px; background: rgba(232, 185, 74, .14); border: 1px solid #e8b94a; text-align: center; line-height: 1.7; }
.wq-score { display: flex; align-items: baseline; gap: 10px; justify-content: center; margin: 8px 0; }
.wq-score b { font: 900 2.2rem var(--f-display); color: var(--gold); }
.wq-score em { font-style: normal; background: #e8b94a; color: #2b1c05; border-radius: 99px; padding: 2px 10px; font-weight: 800; }
.wq-tq, .tk-crown { display: block; width: 100%; margin: 10px 0; padding: 12px; border-radius: 14px; border: 2px solid #f0c85a; color: #2b1c05; font-weight: 800; text-align: center;
  background: linear-gradient(135deg, #b8862b, #f6dc8a 45%, #e8b94a 60%, #b8862b); box-shadow: 0 0 18px rgba(240, 200, 90, .55); animation: wq-shine 2.4s ease-in-out infinite; }
.tk-crown small { display: block; font-weight: 600; font-size: .8rem; margin-top: 3px; }
@keyframes wq-shine { 50% { box-shadow: 0 0 30px rgba(255, 220, 120, .95); filter: brightness(1.08); } }
.wq-gold-btn { background: linear-gradient(135deg, #b8862b, #f0c85a) !important; color: #2b1c05 !important; }
.wq-board { padding: 0; margin: 8px 0; list-style: none; counter-reset: wq; }
.wq-board li { counter-increment: wq; display: flex; gap: 8px; align-items: center; padding: 7px 8px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.wq-board li::before { content: counter(wq); min-width: 26px; font-weight: 900; color: var(--gold); }
.wq-board li span { flex: 1; color: var(--muted); font-size: .85rem; }
.wq-board li em { font-style: normal; font-weight: 900; }
.wq-board li.me { background: rgba(232, 185, 74, .15); border-radius: 8px; }
.tq-stage { font-weight: 700; }
.tq-round { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 8px 10px; margin: 6px 0; border: 1px solid var(--bronze); border-radius: 12px; }
.tq-round small { grid-column: 1; color: var(--muted); }
.tq-round em { grid-column: 1; font-style: normal; color: var(--good); font-weight: 800; }
.tq-round .tq-b { grid-row: 1 / span 3; grid-column: 2; align-self: center; }
.tq-round.now { border-color: #f0c85a; box-shadow: 0 0 12px rgba(240, 200, 90, .4); }
.tq-prizes { padding-inline-start: 18px; }
.tq-prizes li { margin: 4px 0; }
#hud-tq.live { animation: wq-shine 1.8s ease-in-out infinite; border-radius: 10px; }
#hud-gifts.pulse { animation: env-pulse .5s ease-in-out 2; }
@keyframes env-pulse { 50% { transform: scale(1.35); } }

/* ===== 🕊 n45: שליח הממלכה — הסצנה ===== */
#env-cut { position: fixed; inset: 0; z-index: 60; overflow: hidden; opacity: 0; transition: opacity .45s; }
#env-cut.in { opacity: 1; }
#env-cut.out { opacity: 0; transition: opacity .8s .1s; }
.env-sky { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 20%, rgba(255, 226, 140, .95), rgba(214, 156, 44, .75) 35%, rgba(40, 24, 6, .82) 80%); }
.env-sea .env-sky { background: radial-gradient(ellipse at 50% 18%, rgba(255, 230, 150, .95), rgba(64, 140, 190, .8) 40%, rgba(6, 30, 52, .9) 85%); }
.env-fire .env-sky { background: radial-gradient(ellipse at 50% 22%, rgba(255, 240, 180, .95), rgba(232, 96, 40, .78) 40%, rgba(46, 12, 4, .9) 85%); }
.env-light .env-sky { background: radial-gradient(ellipse at 50% 22%, #fffbe8, rgba(240, 214, 140, .8) 40%, rgba(40, 30, 10, .85) 85%); }
.env-dust .env-sky { background: radial-gradient(ellipse at 50% 22%, rgba(255, 226, 160, .95), rgba(150, 110, 60, .8) 40%, rgba(30, 20, 8, .9) 85%); }
.env-waves { position: absolute; inset: auto 0 0 0; height: 28%; display: none; }
.env-sea .env-waves { display: block; }
.env-waves i { position: absolute; inset-inline: -20%; bottom: 0; height: 100%; border-radius: 45% 55% 0 0; background: rgba(40, 120, 180, .55); animation: env-wave 3.2s ease-in-out infinite; }
.env-waves i:nth-child(2) { bottom: -18%; background: rgba(30, 90, 150, .6); animation-delay: -1s; }
.env-waves i:nth-child(3) { bottom: -36%; background: rgba(16, 60, 110, .75); animation-delay: -2s; }
@keyframes env-wave { 50% { transform: translateX(6%) translateY(-6%); } }
.env-rider { position: absolute; top: 12%; left: 50%; width: min(58vw, 320px); aspect-ratio: 1; transform: translate(120vw, 0) rotate(8deg); }
#env-cut.in .env-rider { animation: env-fly 1.6s cubic-bezier(.2, .8, .25, 1) forwards, env-bob 3s ease-in-out 1.6s infinite; }
@keyframes env-fly { to { transform: translate(-50%, 0) rotate(-3deg); } }
@keyframes env-bob { 0%, 100% { transform: translate(-50%, 0) rotate(-3deg); } 50% { transform: translate(-50%, -12px) rotate(2deg); } }
.env-mount { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 4px solid #f6dc8a; box-shadow: 0 0 60px rgba(255, 220, 120, .9), 0 20px 50px rgba(0, 0, 0, .5); }
.env-face { position: absolute; top: -8%; left: 50%; transform: translateX(-50%); width: 34%; aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center;
  background: #3b2405; border: 3px solid #f6dc8a; overflow: hidden; font-size: 2.4rem; box-shadow: 0 0 24px rgba(255, 220, 120, .9); }
.env-face img { width: 100%; height: 100%; object-fit: cover; }
.env-rain { position: absolute; inset: 0; pointer-events: none; }
.env-drop { position: absolute; top: -10%; left: var(--x); font-size: 1.7rem; font-style: normal; filter: drop-shadow(0 0 6px rgba(255, 220, 120, .9));
  animation: env-fall var(--d) ease-in 1.2s infinite; transform: rotate(var(--r)); }
@keyframes env-fall { from { transform: translateY(0) rotate(var(--r)); } to { transform: translateY(120vh) rotate(calc(var(--r) + 220deg)); } }
.env-banner { position: absolute; inset-inline: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); margin-inline: auto; max-width: 520px; text-align: center; padding: 14px 16px;
  background: rgba(30, 18, 4, .88); border: 2px solid #f6dc8a; border-radius: 18px; box-shadow: 0 0 30px rgba(255, 210, 110, .55); transform: translateY(130%); transition: transform .6s 1.1s; }
#env-cut.in .env-banner { transform: none; }
.env-banner small { color: #f6dc8a; font-weight: 800; letter-spacing: .04em; }
.env-banner h2 { margin: 4px 0; font: 900 1.5rem var(--f-display); color: #fff3c4; }
.env-banner h2 em { font-style: normal; font-size: 1rem; color: #f0c85a; }
.env-banner p { color: #f3e6c4; margin: 4px 0; }
.env-msg { font-style: italic; }
body.env-shake { animation: env-shake .6s; }
@keyframes env-shake { 20% { transform: translate(-6px, 3px); } 40% { transform: translate(5px, -4px); } 60% { transform: translate(-4px, 2px); } 80% { transform: translate(3px, -2px); } }
@media (prefers-reduced-motion: reduce) { .env-drop, .env-waves i, #env-cut.in .env-rider { animation: none !important; } .env-rider { transform: translate(-50%, 0) !important; } .env-banner { transition: none; } }
.gi-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px; border-bottom: 1px solid rgba(255, 255, 255, .07); width: 100%; text-align: start; background: none; color: inherit; font: inherit; }
.env-send label { display: block; font-weight: 700; margin-top: 8px; }
.env-send input, .env-send select, .env-send textarea { width: 100%; box-sizing: border-box; padding: 8px; border-radius: 10px; border: 1px solid var(--bronze); background: rgba(0, 0, 0, .3); color: inherit; font: inherit; }
#es-tg { display: grid; grid-template-columns: 1fr auto; gap: 6px; margin-top: 6px; }
#es-tg[hidden] { display: none; }
#es-rows { grid-column: 1 / -1; }
.es-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
.es-grid label { font-weight: 600; font-size: .85rem; margin: 0; }

/* n46: שורת החיזוק נחתכה בתחתית הקלף (מסך פתיחת החפיסה) — הציור מתכווץ, השורות בתחתית לא */
.nc-art { flex: 1 1 0; min-height: 40px; }
.nc-name, .nc-stats, .nc-meta, .nc-buff, .nc-top { flex-shrink: 0; }
.nc-buff { line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nc-in { padding-bottom: 8px; }
/* n46: גוליית — ציור גוף מלא בתוך המדליון: הקסדה והחזה */
.nc-art.pic.tall img { height: 200%; top: 0; transform: translate(-50%, 0); clip-path: circle(23% at 50% 23%); }

/* ===== 💥 n46: מנוע ההרגשה (js/fx.js) ===== */
#fx-layer { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }
.fx-p { position: absolute; display: block; width: 10px; height: 10px; border-radius: 50%; font-style: normal; transform: translate(-50%, -50%); }
.fx-p.dust { width: 18px; height: 18px; background: radial-gradient(rgba(214, 196, 160, .85), rgba(214, 196, 160, 0) 70%); }
.fx-p.spark { width: 6px; height: 6px; background: #fff3c4; box-shadow: 0 0 8px 3px rgba(255, 200, 80, .9); }
.fx-p.stone { width: 9px; height: 8px; border-radius: 2px; background: #8d877c; box-shadow: inset -2px -2px 0 rgba(0, 0, 0, .3); }
.fx-p.gold { width: auto; height: auto; font-size: 1.3rem; background: none; }
.fx-p.ember { width: 5px; height: 5px; background: #ffb347; box-shadow: 0 0 6px 2px rgba(255, 120, 40, .8); }
.fx-num { position: absolute; font: 900 1.25rem var(--f-display, sans-serif); text-shadow: 0 2px 0 #000, 0 0 8px rgba(0, 0, 0, .8); white-space: nowrap; }
.fx-num.big { font-size: 2rem; }
.fx-flash { position: absolute; inset: 0; }
.fx-vs { position: fixed; inset: 0; z-index: 75; display: grid; place-content: center; text-align: center; gap: 10px; cursor: pointer;
  background: radial-gradient(ellipse at center, rgba(70, 30, 6, .92), rgba(10, 6, 2, .97)); animation: fx-in .25s ease-out; }
.fx-vs.out { opacity: 0; transition: opacity .25s; }
.fx-vs-in { display: flex; align-items: center; gap: 14px; font: 900 1.2rem var(--f-display, sans-serif); }
.fx-vs-in .me { color: #8bd8ff; animation: fx-slide-r .45s ease-out; } .fx-vs-in .foe { color: #ff9a7a; animation: fx-slide-l .45s ease-out; }
.fx-vs-in b { font-size: 2.2rem; color: #f6dc8a; text-shadow: 0 0 18px rgba(255, 200, 90, .9); }
.fx-vs h2 { margin: 0; color: #fff3c4; font: 900 1.3rem var(--f-display, sans-serif); }
.fx-vs-n { font: 900 3.6rem var(--f-display, sans-serif); color: #f6dc8a; font-style: normal; animation: fx-pop .5s ease-out infinite; }
.fx-vs-n.go { color: #ffcf5a; font-size: 2.6rem; animation: fx-pop .6s ease-out; }
@keyframes fx-in { from { opacity: 0; } } @keyframes fx-pop { from { transform: scale(1.8); opacity: .3; } }
@keyframes fx-slide-r { from { transform: translateX(80px); opacity: 0; } } @keyframes fx-slide-l { from { transform: translateX(-80px); opacity: 0; } }
.fx-win { position: fixed; inset: 0; z-index: 74; display: grid; place-content: center; pointer-events: none; animation: fx-in .3s; }
.fx-win b { font: 900 2.4rem var(--f-display, sans-serif); color: #fff3c4; text-shadow: 0 0 24px rgba(255, 200, 90, .9), 0 3px 0 #000; animation: fx-pop .6s ease-out; }
.fx-win.lost b { color: #d9d2c4; font-size: 1.6rem; text-shadow: 0 2px 0 #000; }
.fx-win .fl { position: absolute; top: 30%; font-size: 3rem; font-style: normal; animation: fx-wave 1s ease-in-out infinite; }
.fx-win .fl.l { left: 12%; } .fx-win .fl.r { right: 12%; animation-delay: -.5s; }
@keyframes fx-wave { 50% { transform: rotate(-12deg) translateY(-6px); } }
.fx-win.out { opacity: 0; transition: opacity .4s; }
@media (prefers-reduced-motion: reduce) { .fx-vs-n, .fx-win b, .fx-win .fl { animation: none; } }

/* ===== ⚔ n46: הדו-קרב — הסתערות, התנגשות נשקים, באנר בצבע ===== */
.du-f.me.lunge { transform: scaleX(-1) translateX(-34%); } .du-f.foe.lunge { transform: translateX(34%); }
.du-f.me.knock { transform: scaleX(-1) translateX(18%) rotate(6deg); filter: brightness(1.6) drop-shadow(0 0 10px #ff6b5a); }
.du-f.foe.knock { transform: translateX(-18%) rotate(-6deg); filter: brightness(1.6) drop-shadow(0 0 10px #ff6b5a); }
.du-f { transition: transform .22s cubic-bezier(.3, 1.4, .6, 1), filter .2s; }
.du-clash { position: absolute; left: 50%; top: 42%; width: 0; height: 0; pointer-events: none; }
.du-clash i { position: absolute; top: -32px; font-size: 3.2rem; font-style: normal; filter: drop-shadow(0 0 10px rgba(255, 220, 120, .9)); }
.du-clash .a { animation: du-in-r .28s ease-in forwards; } .du-clash .b { animation: du-in-l .28s ease-in forwards; }
@keyframes du-in-r { from { transform: translateX(120px) scale(.6); } to { transform: translateX(4px) scale(1.15); } }
@keyframes du-in-l { from { transform: translateX(-180px) scale(.6); } to { transform: translateX(-60px) scale(1.15); } }
.du-banner { min-height: 0; margin: 6px auto 0; padding: 0; border-radius: 10px; font-weight: 900; text-align: center; opacity: 0; }
.du-banner.go { animation: du-ban 1.6s ease-out forwards; padding: 6px 10px; }
.du-banner.win, .du-banner.spirit { background: rgba(40, 120, 50, .9); color: #e8ffe0; } .du-banner.lose { background: rgba(160, 36, 28, .92); color: #fff0ec; }
.du-banner.tie { background: rgba(60, 60, 70, .9); color: #eee; }
@keyframes du-ban { 0% { opacity: 0; transform: scale(.8); } 15% { opacity: 1; transform: scale(1.06); } 25%, 80% { opacity: 1; transform: scale(1); } 100% { opacity: .85; } }

/* ===== 🎬 n46 שלב ב: קומיקס בתנועה, דגלי ״נגד״, הספרייטים החדשים (b13) ===== */
.fx-comic { position: fixed; inset: 0; z-index: 76; background: #0a0602; cursor: pointer; overflow: hidden; }
.fx-comic.out { opacity: 0; transition: opacity .4s; }
.fx-cl { position: absolute; inset: -4%; background: center / cover no-repeat; opacity: 0; transform: scale(1.12); transition: opacity .55s ease, transform 2.4s ease-out; }
.fx-cl.on { opacity: 1; transform: scale(1); }
.fx-cap { position: absolute; inset-inline: 0; bottom: 12%; margin: 0; text-align: center; font: 900 1.8rem 'Frank Ruhl Libre', serif; color: #fff3c4;
  text-shadow: 0 3px 0 #000, 0 0 20px rgba(0, 0, 0, .9); padding: 0 16px; }
.fx-vs { background-size: cover; background-position: center; }
.fx-flag { position: absolute; top: 14%; height: 46vh; max-height: 360px; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .6)); animation: fx-wave 1.6s ease-in-out infinite; pointer-events: none; }
.fx-flag.us { inset-inline-start: 2%; } .fx-flag.foe { inset-inline-end: 2%; animation-delay: -.8s; }
.fx-win { background-size: cover; background-position: center; }
.du-f.b13 { height: 92%; max-width: 48%; bottom: 0; }
.vs { position: relative; }
.vs-slinger { position: absolute; inset-inline-start: -6px; bottom: 0; height: 120px; pointer-events: none; opacity: .95; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); }
.tw, .pn { background-size: cover; background-position: center; border-radius: 12px; padding: 8px; }
.tw-boss img, .sq-boss img { object-fit: contain; }
@media (max-width: 520px) { .fx-flag { height: 30vh; top: 6%; } .fx-cap { font-size: 1.35rem; } .vs-slinger { height: 84px; } }
@media (prefers-reduced-motion: reduce) { .fx-cl { transition: opacity .2s; transform: none; } .fx-flag { animation: none; } }
/* n46: הלוחמים המצוירים — שלכם משמאל ופונה ימינה, האלוף מימין ופונה שמאלה; הפסים באותם צדדים; הסתערות אל המרכז */
.du-bars { direction: ltr; } .du-bars > div { direction: rtl; }
.du-f.me.b13 { inset-inline-end: 1%; transform: none; } .du-f.foe.b13 { inset-inline-start: 1%; transform: none; }
.du-f.me.b13.lunge { transform: translateX(30%); } .du-f.foe.b13.lunge { transform: translateX(-30%); }
.du-f.me.b13.knock { transform: translateX(-16%) rotate(-6deg); } .du-f.foe.b13.knock { transform: translateX(16%) rotate(6deg); }
.du-f.me.b13.kneel { transform: translateY(16%) rotate(-8deg); } .du-f.foe.b13.kneel { transform: translateY(16%) rotate(8deg); }
/* 🏷🚩 28.10: שם ודגל לבסיס (js/base.js) */
.hud-flag { width: 27px; height: 18px; object-fit: cover; border-radius: 2px; vertical-align: middle; margin-inline-end: 4px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 1px 3px rgba(0, 0, 0, .6); cursor: pointer; }
#hud-tribe { cursor: pointer; }
.bs-sec { border: 1px solid var(--bronze); border-radius: 12px; padding: 10px 12px; margin: 10px 0; background: rgba(0, 0, 0, .18); }
.bs-sec h3 { margin: 0 0 6px; } .bs-sec h3 small { color: var(--muted); font-weight: 600; }
.bs-row { display: flex; gap: 6px; } .bs-row input, #bs-line { flex: 1; width: 100%; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--bronze); background: rgba(0, 0, 0, .3); color: var(--ink); font-size: 1rem; }
.bs-flag { display: grid; place-items: center; min-height: 80px; margin: 6px 0; }
.bs-flag img { width: min(240px, 70vw); aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; box-shadow: 0 4px 14px rgba(0, 0, 0, .6); }
.bs-req { color: var(--gold); font-weight: 700; }
.bs-canvas { display: grid; place-items: center; margin: 6px 0; }
.bs-canvas canvas { width: min(100%, 420px); aspect-ratio: 3 / 2; touch-action: none; border-radius: 6px; box-shadow: 0 0 0 2px var(--bronze), 0 4px 14px rgba(0, 0, 0, .6); cursor: crosshair; background: #f5e6c8; }
.bs-pal { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; max-width: 420px; margin: 8px auto; }
.bs-col { aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(0, 0, 0, .5); } .bs-col.on { outline: 3px solid var(--gold); outline-offset: 1px; }
.bs-tools { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin: 6px 0; align-items: center; }
.bs-tools button { background: var(--panel); border: 1px solid var(--bronze); border-radius: 999px; padding: 4px 10px; font-weight: 700; font-size: .8rem; color: var(--ink); }
.bs-tools button.on { background: var(--gold); color: #2a1a08; }