/* פריסה לנייד — SPEC.MD סעיף 9. לרוחב בלבד; אייפון 13/15 לרוחב: 844×390 / 852×393.
   כל המידות בתוך המשחק ביחידות של המכולה (cqw/cqh) — יחסיות ל-#game עצמו, ולכן נכונות גם כשהוא מסובב.
   החריגה היחידה: מינימום 44px ליעד מגע, כרצפה (max) ולא כמידה. */

:root {
  --bg: #1d1712;
  --panel: #2b2118;
  --panel-2: #3b2d1f;
  --line: #5a4630;
  --ink: #f3e9d2;
  --muted: #b9a888;
  --gold: #e0b44c;
  --player: #5aa0ff;
  --enemy: #ff6b5b;
  --life: #d9453a;
  --magic: #3f7fe0;
  --xp: #8bc34a;
  --touch: 44px; /* יעד מגע מינימלי */

  /* שוליים בטוחים — בלנדסקייפ החריץ בצד */
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; } /* גם על אלמנטים שיש להם display משלהם */

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Arial Hebrew", Arial, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: 100%;
}

button {
  font: inherit;
  color: var(--ink);
  background: var(--panel-2);
  border: 0.3cqh solid var(--line);
  border-radius: 1.6cqh;
  min-height: max(var(--touch), 11cqh);
  min-width: max(var(--touch), 11cqh);
  padding: 0 2.2cqh;
  touch-action: manipulation; /* בלי השהיית 300ms ובלי זום בהקשה כפולה */
  cursor: pointer;
}
button:disabled { opacity: .35; cursor: default; }
button.big { background: var(--gold); color: #2a1d0b; border-color: #a77f22; font-weight: 700; }
button.danger { background: #5a1f1a; border-color: #8a2f27; }
.muted { color: var(--muted); }
.small { font-size: .8em; }

/* ---------------------------------------------------------------- אוריינטציה */

#rotate {
  display: none;
  position: fixed;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2vmin;
  padding: 6vmin;
  text-align: center;
  background: var(--bg);
  font-size: 4.5vmin;
}
.rotate-icon { font-size: 22vmin; animation: tilt 2.4s ease-in-out infinite; }
.rotate-title { font-size: 6vmin; font-weight: 700; margin: 0; }
.rotate-sub { color: var(--muted); margin: 0 0 4vmin; }
#rotate button { font-size: 4vmin; min-height: max(var(--touch), 11vmin); border-width: .4vmin; border-radius: 2vmin; }
@keyframes tilt { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }

#game {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  container-type: size;
  overflow: hidden;
}
/* גודל הבסיס על הילדים ולא על #game: יחידות cq על המכולה עצמה נמדדות מול ה-viewport, לא מולה */
#game > * { font-size: 4.2cqh; }

@media (orientation: portrait) {
  /* שכבה א */
  #rotate { display: flex; }
  #game { display: none; }

  /* שכבה ב — סיבוב כפוי, רק כשהמתג דלוק */
  html.force-rotate #rotate { display: none; }
  html.force-rotate #game {
    display: block;
    transform: rotate(90deg);
    transform-origin: bottom left;
    position: absolute;
    inset: auto;
    top: -100vw;
    left: 0;
    width: 100vh;
    width: 100dvh;
    height: 100vw;
  }
  /* במסובב: החריץ (למעלה בפיזי) הוא הצד השמאלי של המשחק, פס הבית (למטה) — הימני */
  html.force-rotate {
    --safe-l: env(safe-area-inset-top, 0px);
    --safe-r: env(safe-area-inset-bottom, 0px);
    --safe-b: 0px;
  }
}

/* ---------------------------------------------------------------- מסכים */

.screen { position: absolute; inset: 0; }

.strip {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 15cqw;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.6cqh;
  padding: 2cqh 1.2cqw calc(2cqh + var(--safe-b));
  background: var(--panel);
  z-index: 2;
}
/* המשחק RTL, אבל הצדדים של הרצועות קבועים: מפלצת משמאל, שחקן מימין (סעיף 9) */
.side-player, .side-settings, .side-controls { right: 0; padding-right: calc(1.2cqw + var(--safe-r)); width: calc(15cqw + var(--safe-r)); }
.side-enemy { left: 0; padding-left: calc(1.2cqw + var(--safe-l)); width: calc(15cqw + var(--safe-l)); }
#screen-tower .side-settings, #screen-dungeon .side-controls, #screen-map .side-info { left: 0; right: auto; padding-right: 1.2cqw; padding-left: calc(1.2cqw + var(--safe-l)); width: calc(15cqw + var(--safe-l)); }

/* ---------------------------------------------------------------- פתיחה */

#screen-start {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3cqh;
  padding: 4cqh calc(4cqw + var(--safe-r)) 4cqh calc(4cqw + var(--safe-l));
}
.title { font-size: 9cqh; margin: 0 0 2cqh; color: var(--gold); text-align: center; }
.start-row { display: flex; gap: 2.5cqw; align-items: center; justify-content: center; flex-wrap: wrap; }
#orders button { min-width: 22cqw; min-height: max(var(--touch), 16cqh); font-size: 1.2em; }

/* ---------------------------------------------------------------- מגדל */

.tower-main {
  position: absolute;
  inset: 0 calc(15cqw + var(--safe-r)) var(--safe-b) calc(15cqw + var(--safe-l));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.4cqh;
  padding: 2cqh 2cqw;
  text-align: center;
}
.tower-title { margin: 0; font-size: 7cqh; color: var(--gold); }
/* החדר המקורי: הפנורמה ממלאת את האמצע, והשורות מעליה */
.pano { position: absolute; inset: 0; overflow-x: auto; overflow-y: hidden; direction: ltr; scrollbar-width: none; overscroll-behavior-x: contain; }
.pano::-webkit-scrollbar { display: none; }
.pano svg { height: 100%; width: auto; display: block; }
.t-obj { cursor: pointer; }
.t-obj .hit { fill: transparent; }
.t-obj .on { opacity: 0; transition: opacity .15s; pointer-events: none; }
.t-obj.pressed .on { opacity: 1; }
@media (hover: hover) { .t-obj:hover .on { opacity: 1; } }
/* הכוכב של הדלת (יש משימה) או של כדור הבדולח (אין) */
.t-star { display: none; pointer-events: none; }
.t-star.lit { display: inline; animation: star-pulse .9s ease-in-out infinite alternate; }
.has-art .tower-main { justify-content: space-between; }
.has-art .tower-main > :not(.pano) { position: relative; z-index: 1; }
.has-art .tower-title, .has-art .stations { display: none; }
.has-art .quest-line { background: rgba(20, 14, 8, .78); border-radius: 1.4cqh; padding: .8cqh 1.6cqw; }
/* הארנק והשורה העליונה רק מציגים — לא חוסמים לחיצות על החדר ועל כפתור הדמות, והארנק לא מגיע אליו */
.has-art #t-wallet { background: rgba(20, 14, 8, .6); border-radius: 1.4cqh; padding: .6cqh 1cqw; max-width: calc(100% - 40cqh); pointer-events: none; }
.has-art .quest-line { pointer-events: none; }
.pano-arrow { position: absolute !important; top: 38%; width: 8cqh; height: 8cqh; min-height: 0; padding: 0; background: center / contain no-repeat; border: 0; }
.pano-arrow.left { left: 1cqw; }
.pano-arrow.right { right: 1cqw; transform: scaleX(-1); }
.pano-char { position: absolute !important; bottom: 1cqh; right: 1cqw; width: 17cqh; height: 16cqh; min-height: 0; padding: 0; background: center / contain no-repeat; border: 0; }
.quest-line { font-size: .8em; max-width: 100%; }
.stations { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqh 1.6cqw; width: 100%; }
.stations button { min-height: max(var(--touch), 20cqh); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6cqh; font-size: .85em; }
.st-icon { font-size: 1.9em; line-height: 1; }
.wallet { display: flex; flex-wrap: wrap; gap: .8cqw; justify-content: center; font-size: .7em; }
.chip { background: var(--panel-2); border: .3cqh solid var(--line); border-radius: 3cqh; padding: .4cqh 1.2cqw; white-space: nowrap; }
.chip.money { border-color: var(--gold); color: var(--gold); }
.chip.ing1 { border-color: #e6c21f; }
.chip.ing2 { border-color: #8a5a2b; }
.chip.ing3 { border-color: #d94a3a; }
.chip.ing4 { border-color: #c9a36b; }

/* עמדה: כותרת, ושני חלונות — רשימה מימין ומידע משמאל (RTL: הראשון בגריד הוא הימני) */
.station {
  display: flex;
  flex-direction: column;
  gap: 1.2cqh;
  padding: 1.6cqh calc(1.6cqw + var(--safe-r)) calc(1.6cqh + var(--safe-b)) calc(1.6cqw + var(--safe-l));
}
.station-head { display: flex; align-items: center; gap: 1.6cqw; }
.station-head h2 { margin: 0; font-size: 1.1em; color: var(--gold); white-space: nowrap; }
.station-head .wallet { flex: 1; justify-content: flex-end; }
.tabs { display: flex; gap: 1cqw; }
.tabs button.on, .choices button.on { background: var(--gold); color: #2a1d0b; border-color: #a77f22; }
.station-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqw; }
.pane { background: var(--panel); border: .3cqh solid var(--line); border-radius: 2cqh; padding: 1.4cqh 1.2cqw; overflow-y: auto; touch-action: pan-y; min-height: 0; }
.pane h3 { margin: .4cqh 0 1cqh; font-size: 1em; color: var(--gold); }
.pane p { margin: .8cqh 0; }
.list { display: flex; flex-direction: column; gap: .8cqh; }
.list-row {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "title state" "sub state";
  text-align: right; align-items: center; padding: .8cqh 1.2cqw; min-height: max(var(--touch), 12cqh); flex: none;
}
.list-row .lr-title { grid-area: title; font-weight: 700; }
.list-row .lr-sub { grid-area: sub; font-size: .75em; color: var(--muted); }
.list-row .lr-state { grid-area: state; font-size: 1.1em; }
.list-row.sel { border-color: var(--gold); background: #4a3823; }
.list-row.has-icon { grid-template-columns: auto 1fr auto; grid-template-areas: "icon title state" "icon sub state"; column-gap: 1cqw; }
.list-row .item-icon { grid-area: icon; }
.item-icon { width: 9cqh; height: 9cqh; object-fit: contain; flex: none; }
.item-icon.big { width: 14cqh; height: 14cqh; align-self: center; }
.hero-view { width: 22cqh; height: 28cqh; flex: none; align-self: center; }
.hero-view svg { width: 100%; height: 100%; display: block; overflow: visible; }
.card.art.view { height: 26cqh; min-height: 0; width: auto; flex: none; align-self: center; pointer-events: none; }
.compare .card.art.view { height: 20cqh; margin: .4cqh auto; }
/* רקעים מהמסכים המקוריים של העמדות */
.station-body[data-back] { background: center / contain no-repeat; }
.station-body[data-back="magic"] { aspect-ratio: 768 / 524; width: auto; align-self: center; background-size: 100% 100%; padding: 4.5% 5.5% 5.5%; gap: 11%; }
.station-body[data-back="magic"] .pane { background: transparent; color: #2a1d0b; border: 0; scrollbar-width: thin; scrollbar-color: rgba(107, 63, 16, .45) transparent; }
.station-body[data-back="magic"] .pane h3 { color: #6b3f10; }
.station-body[data-back="magic"] .list-row { background: rgba(255, 250, 235, .35); color: #2a1d0b; border-color: rgba(120, 90, 50, .45); }
.station-body[data-back="magic"] .list-row.sel { background: #f2d58a; }
.station-body[data-back="magic"] .list-row .lr-sub, .station-body[data-back="magic"] .muted { color: #6b5533; }
.station-body[data-back="crystal"] { background-position: left center; background-size: auto 100%; }
.station-body[data-back="crystal"] .pane { background: rgba(20, 30, 40, .82); }
.list-row.owned .lr-state { color: var(--xp); }
.list-row.locked, .list-row.short { opacity: .6; }
.detail { display: flex; flex-direction: column; gap: .4cqh; }
.detail .action { margin-top: auto; align-self: stretch; }
.quote { color: var(--muted); font-size: .8em; font-style: italic; }
.msg { font-size: .8em; padding: .6cqh 1cqw; border-radius: 1.2cqh; background: var(--panel-2); }
.msg.ok { color: var(--xp); }
.msg.error { color: var(--enemy); }
.reqs, .stats { margin: 0; padding-inline-start: 2.2cqw; font-size: .8em; }
.reqs li.ok { color: var(--xp); }
.reqs li.bad { color: var(--enemy); }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1cqw; }
.offer { display: flex; flex-direction: column; gap: .4cqh; }
.offer.reveal { animation: offer-reveal 2s ease .5s both; } /* revealQuest: alpha 0 ← 1 בשתי שניות, אחרי חצי שנייה */
@keyframes offer-reveal { from { opacity: 0; } to { opacity: 1; } }
.offer .approved { color: var(--gold); font-size: 1.4em; margin: 0; }
.choices { display: flex; flex-wrap: wrap; gap: 1cqw; margin: .6cqh 0; }
.slots-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8cqh .8cqw; }
.bag { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8cqh .8cqw; }
.slot-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3cqh; padding: .6cqh .6cqw; font-size: .75em; min-height: max(var(--touch), 13cqh); }
.slot-item.filled { border-color: var(--gold); }
.pane .pattern { margin: .6cqh 0; }
.toggle { display: flex; gap: 1cqw; align-items: center; font-size: .8em; min-height: max(var(--touch), 11cqh); }
.toggle input { width: max(22px, 5cqh); height: max(22px, 5cqh); }

/* ---------------------------------------------------------------- פאנל דמות ופסים */

.who { text-align: center; font-weight: 700; line-height: 1.2; }
.who .face { font-size: 2.2em; display: block; }
.who .sub { font-size: .75em; color: var(--muted); font-weight: 400; }
.bars { flex: 1; display: flex; gap: 1.2cqw; justify-content: center; min-height: 0; }
.vbar { flex: 1; max-width: 5cqw; display: flex; flex-direction: column; align-items: center; gap: .8cqh; min-height: 0; }
.vbar .track { flex: 1; width: 100%; background: #120e0a; border: .3cqh solid var(--line); border-radius: 1.2cqh; position: relative; overflow: hidden; min-height: 0; }
.vbar .fill { position: absolute; left: 0; right: 0; bottom: 0; transition: height .4s ease; }
.vbar.life .fill { background: var(--life); }
.vbar.magic .fill { background: var(--magic); }
.vbar .num { font-size: .7em; font-variant-numeric: tabular-nums; }
.vbar .label { font-size: .6em; color: var(--muted); }
.hbar { height: 1.6cqh; background: #120e0a; border-radius: 1cqh; overflow: hidden; }
.hbar .fill { height: 100%; background: var(--xp); }
.xp { display: flex; flex-direction: column; gap: .5cqh; text-align: center; font-size: .75em; }
.stats-mini { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6cqh; font-size: .75em; }
.stats-mini li { display: flex; justify-content: space-between; gap: .6cqw; background: #120e0a; border-radius: .8cqh; padding: .5cqh .8cqw; }
.stats-mini b { color: var(--gold); }

/* ---------------------------------------------------------------- מבוך */

.viewport { position: absolute; inset: 0; touch-action: none; background: #2a2219; overflow: hidden; }
#screen-dungeon .viewport, #screen-map .viewport { left: calc(15cqw + var(--safe-l)); right: calc(15cqw + var(--safe-r)); } /* בין הרצועות */
#d-svg { width: 100%; height: 100%; display: block; direction: ltr; }
.d-bg { fill: #e6dfcf; }
.d-link { stroke: #9c8f72; stroke-width: 3; }
.d-jumpline { stroke: #7a4fb3; stroke-width: 2; stroke-dasharray: 6 5; fill: none; }
.d-tile.face { fill: #f7f3ea; stroke: #8a7f68; stroke-width: 1.5; }
.d-tile circle.hit { fill: transparent; }
.d-tile.face.start { fill: #cfe8c6; }
.d-tile.face.jump { stroke: #7a4fb3; stroke-width: 3; }
.d-tile.face.option { fill: #ffe27a; stroke: #c79a00; stroke-width: 3; animation: pulse 1s ease-in-out infinite alternate; }
/* על הרקע המקורי אין עיגולים — רק החץ המקורי (possibleMove) מעל יעד אפשרי, מעל כל השכבות */
.d-tile .arrow { display: none; pointer-events: none; }
.d-tile.option .arrow { display: inline; animation: bob .5s ease-in-out infinite alternate; }
.dice-art { width: 100%; height: 100%; display: block; pointer-events: none; }
#d-roll.has-dice { height: 22cqh; padding: 1cqh; background: transparent; border-color: transparent; }
#d-roll.has-dice:not(:disabled) { animation: dice-ready .8s ease-in-out infinite alternate; }
@keyframes dice-ready { from { filter: drop-shadow(0 0 0 #ffd23f); } to { filter: drop-shadow(0 0 1.2cqh #ffd23f); } }
#d-roll.has-dice:disabled .dice-art { opacity: .75; }
@keyframes pulse { to { fill: #ffc400; } }
.d-token { pointer-events: none; }
.d-token text { font-size: 20px; text-anchor: middle; dominant-baseline: central; }
.d-hero text { font-size: 24px; }
.d-star.off { display: none; }
.d-star:not(.off) { animation: star-pulse .9s ease-in-out infinite alternate; }
@keyframes star-pulse { to { opacity: .55; } }
/* היכולת נוצלה במבוך הזה (gotoAndStop(2)); היציאה אחרי שהמשימה הושלמה (exitSpecialMC) */
.side-controls .ability.used { text-decoration: line-through; opacity: .5; }
#d-exit.special { box-shadow: 0 0 0 .4cqh #ffd23f, 0 0 2cqh #ffd23f; animation: exit-glow .8s ease-in-out infinite alternate; }
@keyframes exit-glow { to { box-shadow: 0 0 0 .4cqh #ffd23f, 0 0 .4cqh #ffd23f; } }

.side-controls { align-items: center; }
.side-controls button { width: 100%; font-size: .75em; padding: 0 .8cqw; }
.dice { font-size: 1.6em !important; }
.dice-value { font-size: 2.2em; font-weight: 800; min-height: 1.2em; color: var(--gold); }
.top-line {
  position: absolute; top: 1.5cqh; left: 50%; transform: translateX(-50%);
  background: rgba(29, 23, 18, .85); border-radius: 1.4cqh; padding: .8cqh 2cqw;
  font-size: .75em; max-width: 64cqw; text-align: center; pointer-events: none; z-index: 3;
}
.toast {
  position: absolute; bottom: calc(3cqh + var(--safe-b)); left: 50%; transform: translateX(-50%);
  background: rgba(29, 23, 18, .92); border: .3cqh solid var(--gold); border-radius: 1.6cqh;
  padding: 1.4cqh 2.5cqw; font-size: .85em; max-width: 64cqw; text-align: center; pointer-events: none; z-index: 3;
}

/* ---------------------------------------------------------------- מפה */

#m-svg { width: 100%; height: 100%; display: block; direction: ltr; }
#screen-map .viewport { touch-action: manipulation; }
.m-bg { fill: #d9cfb4; }
.m-area { opacity: .4; }
.m-fog { fill: #2b2118; color: #2b2118; opacity: .92; }
.m-area-name { font-size: 16px; font-weight: 700; text-anchor: middle; fill: #2a1d0b; paint-order: stroke; stroke: #e8dfc6; stroke-width: 3px; pointer-events: none; }
.m-area-name.locked { fill: var(--muted); stroke: none; }
.m-lock { font-size: 18px; text-anchor: middle; fill: var(--muted); }
.m-road { stroke: #8a7552; stroke-width: 3; stroke-dasharray: 2 7; stroke-linecap: round; }
.m-trail { stroke: #5b4526; stroke-width: 4; stroke-dasharray: 10 6; }
.m-node { cursor: pointer; }
.m-node.hidden { display: none; } /* סמלי אזור שנחשף — עד showAllDungeons */
.m-node .m-hit { fill: transparent; }
.m-node .m-dot { fill: #f7f3ea; stroke: #6b553a; stroke-width: 2; }
.m-node.target .m-dot { stroke: var(--gold); stroke-width: 4; }
.m-node.sel .m-dot { fill: #ffe27a; }
.m-node.tower .m-dot { fill: #efe0b4; }
.m-icon { font-size: 20px; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.m-name { font-size: 13px; font-weight: 700; text-anchor: middle; fill: #2a1d0b; paint-order: stroke; stroke: #f3ead3; stroke-width: 3px; pointer-events: none; }
.m-target { font-size: 20px; text-anchor: middle; pointer-events: none; animation: bob 1s ease-in-out infinite alternate; }
@keyframes bob { to { transform: translateY(-5px); } }
.m-hero { pointer-events: none; }
.m-node.art .m-hit, .m-node.tower .m-hit { fill: transparent; }
.m-sel-ring { fill: none; stroke: #ffe27a; stroke-width: 3; stroke-dasharray: 8 5; pointer-events: none; }
.m-star { pointer-events: none; animation: bob 1s ease-in-out infinite alternate; }
.m-fog-art { pointer-events: none; transition: opacity 1.3s ease-in; }
.m-fog-art.reveal.gone { opacity: 0; }
.m-fog-art .m-area-name.locked { fill: #e8dfc6; }
.m-fog-art .m-lock { fill: #e8dfc6; }
.m-hero text { font-size: 30px; text-anchor: middle; dominant-baseline: central; }
.side-info { gap: 1cqh; font-size: .85em; }
.side-info h3 { margin: 0; color: var(--gold); font-size: 1em; }
.side-info p { margin: 0; }
.side-info button { margin-top: auto; font-size: .8em; padding: 0 .6cqw; }
#m-player .wallet { flex-direction: column; align-items: stretch; font-size: .6em; }

/* ---------------------------------------------------------------- קרב */

.battle-main {
  position: absolute;
  inset: 0 calc(15cqw + var(--safe-r)) var(--safe-b) calc(15cqw + var(--safe-l));
  display: flex;
  flex-direction: column;
  padding: 1.2cqh 1cqw 0;
  gap: 1cqh;
}
.battle-top { display: flex; align-items: center; gap: 2cqw; min-height: 0; }
.mini-map { height: 13cqh; width: auto; aspect-ratio: 118 / 90; flex: none; direction: ltr; }
.battle-status { flex: 1; font-size: .8em; text-align: center; min-height: 2.4em; display: flex; align-items: center; justify-content: center; }
.board { flex: 1; min-height: 0; width: 100%; pointer-events: none; }
.battle-main > * { position: relative; z-index: 1; }
.battle-main > .scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; direction: ltr; pointer-events: none; }
/* על הרקע המקורי הגדמים כבר מצוירים: המשבצות שקופות, ורק משבצות הפגיעה נצבעות */
.has-art .b-tile { fill: transparent; stroke: transparent; }
.has-art .b-tile.hit { fill: var(--hit, #c0392b); fill-opacity: .5; stroke: var(--hit, #c0392b); stroke-width: 3; }
.has-art .battle-status { text-shadow: 0 0 4px #000, 0 0 8px #000; font-weight: 700; }
.has-art .mini-map { background: rgba(20, 14, 8, .7); border-radius: 6px; }
.has-art .slots-row, .has-art .hand { background: linear-gradient(to bottom, rgba(20, 14, 8, 0), rgba(20, 14, 8, .85) 30%); }
.b-tile { fill: #3b2d1f; stroke: #6b553a; stroke-width: 2; transition: fill .2s; }
.b-tile.hit { fill: var(--hit, #c0392b); stroke: var(--gold); }
.b-char { transition: transform .35s ease; }
.b-char text { text-anchor: middle; dominant-baseline: auto; }
.floater { font-weight: 800; text-anchor: middle; paint-order: stroke; stroke: #000; stroke-width: 4px; animation: float 1.1s ease-out forwards; }
.floater.dmg { fill: #ff8a7a; }
.floater.good { fill: #9be07a; }
.floater.info { fill: var(--ink); }
@keyframes float { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-40px); } }

.mini-cell { fill: #3b2d1f; stroke: #6b553a; stroke-width: 1; }
.mini-dot.player { fill: var(--player); }
.mini-dot.enemy { fill: var(--enemy); }

.slots-row { display: flex; align-items: center; gap: 1cqw; justify-content: center; }
.slots { display: flex; gap: .6cqw; }
.slot {
  width: 7cqw; height: 9cqh; border-radius: 1.2cqh; border: .3cqh dashed var(--line);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: .6em; line-height: 1.1; padding: .4cqh; overflow: hidden; background: #140f0b;
}
.player-slots .slot.filled { border-style: solid; border-color: var(--player); }
.enemy-slots .slot.filled { border-style: solid; border-color: var(--enemy); }
.slot.current { outline: .5cqh solid var(--gold); }
button.go { min-width: 11cqw; padding: 0 1cqw; }

.hand {
  display: flex;
  gap: 1cqw;
  overflow-x: auto;
  overflow-y: hidden;
  padding: .8cqh .5cqw 1.4cqh;
  touch-action: pan-x;
  scrollbar-width: none;
  flex: none;
}
.hand::-webkit-scrollbar { display: none; }
.card {
  flex: none;
  width: 12.5cqw;
  height: 26cqh;
  min-height: max(var(--touch), 26cqh);
  padding: .8cqh .6cqw;
  border-radius: 1.6cqh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background: #efe4c8;
  color: #2a1d0b;
  border: .4cqh solid #b39a66;
  font-size: .62em;
  position: relative;
}
.card .c-name { font-weight: 800; font-size: 1.1em; line-height: 1.1; }
.card .c-meta { color: #6b5533; }
.card .c-kind { font-size: 1.5em; line-height: 1; }
.card.sel { background: #cfe0ff; border-color: var(--player); }
.card .badge {
  position: absolute; top: -.2cqh; right: -.2cqh; width: 6cqh; height: 6cqh; border-radius: 50%;
  background: var(--player); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
/* הקלף המקורי: התמונה ממלאת את הכפתור; השם על התמונה, והמידע ליד רשת הפגיעה */
.card.art { width: auto; aspect-ratio: 71 / 93.7; padding: 0; border: 0; border-radius: .6cqh; background: none; overflow: visible; }
.card.art .c-art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.card.art .c-level, .card.art .c-grid { position: absolute; pointer-events: none; }
.card.art .c-name { position: absolute; top: 6%; left: 8%; right: 8%; font-size: 2.3cqh; color: #fff; text-shadow: 0 0 .4cqh #000, 0 0 .8cqh #000; }
.card.art .c-info { position: absolute; left: 44%; right: 5%; top: 66%; bottom: 7%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .4cqh; font-size: 2.1cqh; font-weight: 800; color: #3a2a10; line-height: 1.1; }
.card.art .c-cost { color: #6b4a1a; font-weight: 700; }
.card.art .c-grid .pattern { width: 100%; height: 100%; grid-template-columns: repeat(3, 1fr); gap: 6%; }
.card.art .c-grid .pattern i { width: auto; height: auto; background: rgba(90, 64, 30, .18); border: .15cqh solid rgba(90, 64, 30, .55); font-size: 1.6cqh; line-height: 1; display: flex; align-items: center; justify-content: center; }
.card.art .c-grid .pattern i.on { background: #c0392b; border-color: #7a1f16; }
.card.art.sel { filter: drop-shadow(0 0 .5cqh #fff) drop-shadow(0 0 .9cqh var(--player)); }
.card.art:disabled { filter: grayscale(.85) brightness(.7); }
.slot .slot-art { height: 100%; width: auto; flex: none; margin-inline-end: .4cqw; }
.slot:has(.slot-art) { justify-content: flex-start; padding: .3cqh; gap: 0; }
.pattern { display: grid; grid-template-columns: repeat(3, 2.6cqh); gap: .3cqh; direction: ltr; }
.pattern i { width: 2.6cqh; height: 2.6cqh; background: #d9ccaa; font-style: normal; font-size: 2cqh; line-height: 2.6cqh; text-align: center; }
.pattern i.on { background: #d9822b; }

/* ---------------------------------------------------------------- עזרה וטוטוריאל */

.help { position: absolute; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .55); }
.help-box {
  width: min(86cqw, 150cqh); max-height: 92cqh; display: flex; flex-direction: column; gap: 1.2cqh;
  background: linear-gradient(#f3e6c4, #e2cf9f); color: #2a1d0b; border: .6cqh solid #8a6a38; border-radius: 2.4cqh;
  padding: 2cqh 2.4cqw; box-shadow: 0 1cqh 4cqh rgba(0, 0, 0, .6); overflow: hidden;
}
.help-box h2 { margin: 0; text-align: center; color: #6b3f10; font-size: 1.1em; }
.help-body { display: flex; gap: 2cqw; min-height: 0; overflow-y: auto; }
.help-text { flex: 1; font-size: .78em; line-height: 1.45; }
.help-text p { margin: 0 0 1cqh; }
.help-pics { display: flex; flex-direction: column; gap: 1cqh; flex: none; max-width: 40%; }
.help-pics img { max-width: 100%; max-height: 32cqh; object-fit: contain; border-radius: 1cqh; border: .3cqh solid #8a6a38; background: #fff; }
.help-links { display: flex; flex-wrap: wrap; gap: 1cqw; justify-content: center; }
.help-links button { font-size: .75em; min-height: max(var(--touch), 9cqh); background: #6b3f10; color: #f3e6c4; }
.help-dont { align-self: flex-start; font-size: .7em; display: flex; gap: .6cqw; align-items: center; }

/* ---------------------------------------------------------------- השתקה */

.mute {
  position: absolute;
  right: calc(1.2cqw + var(--safe-r));
  bottom: calc(1.4cqh + var(--safe-b));
  z-index: 5;
  width: max(var(--touch), 11cqh);
  min-width: 0;
  padding: 0;
  border-radius: 50%;
  font-size: 1em;
  background: rgba(59, 45, 31, .9);
}
/* מקום לכפתור בתחתית הרצועות הימניות ובתחתית רשימת העמדה */
.strip.side-player { padding-bottom: calc(2cqh + var(--safe-b) + max(var(--touch), 11cqh) + 1.4cqh); }
.station .list { padding-bottom: calc(max(var(--touch), 11cqh) + 2cqh); }

/* ---------------------------------------------------------------- חלון תוצאה */

.overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); display: flex; align-items: center; justify-content: center; z-index: 10; }
.overlay-box {
  background: var(--panel); border: .4cqh solid var(--gold); border-radius: 2.4cqh;
  padding: 4cqh 4cqw; max-width: 70cqw; max-height: 90cqh; overflow: auto; text-align: center;
  display: flex; flex-direction: column; gap: 2.5cqh; align-items: center;
}
.overlay-box h2 { margin: 0; color: var(--gold); font-size: 1.4em; }
.overlay-box .msg-text { max-width: 60cqw; line-height: 1.4; }
.overlay-box .msg-xp { font-weight: 700; color: var(--gold); }
.overlay-box .msg-level { font-size: 1.4em; color: var(--gold); }
.msg-prizes { display: flex; flex-wrap: wrap; gap: .8cqh 1cqw; justify-content: center; margin: 1cqh 0; }
.msg-prizes .chip.item { display: inline-flex; align-items: center; gap: .6cqw; }
.msg-prizes .item-icon { height: 6cqh; }
.msg-yesno { justify-content: center; }
.overlay-box p { margin: .5cqh 0; }