/* ישראל על המפה: עיצוב משחקי. שמיים ים־תיכוניים, לוח בצבעים עזים, כפתורים "לחיצים", חלונות קופצים. */
:root {
  --bg-1: #ffe9b8;
  --bg-2: #7fd6e8;
  --bg-3: #3a86ff;
  --paper: #ffffff;
  --paper-2: #fff7e6;
  --ink: #1b2340;
  --muted: #5d6385;
  --line: #e6dcc6;
  --sea: #1479ff;
  --sea-2: #0050c8;
  --sun: #ffb703;
  --sun-2: #e08600;
  --coral: #ff4d6d;
  --coral-2: #c9183c;
  --mint: #22c58b;
  --mint-2: #11865c;
  --grape: #8b5cf6;
  --warn: #d6203f;
  --good: #11935f;
  --board-edge: #1b2340;
  --board-center-1: #fff4d6;
  --board-center-2: #c9f1f7;
  --overlay: rgba(14, 20, 48, 0.62);
  --shadow: 0 10px 30px rgba(20, 30, 80, 0.18);
  --font-display: "Secular One", "Assistant", "Arial Hebrew", system-ui, sans-serif;
  --font-body: "Assistant", "Arial Hebrew", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-1: #0d1330; --bg-2: #142a5c; --bg-3: #1d4d8f;
    --paper: #1b2347; --paper-2: #232d5a; --ink: #f2f4ff; --muted: #a9b0d6; --line: #34407a;
    --sea: #4d9bff; --sea-2: #1e5fd0; --sun: #ffc233; --sun-2: #c98400; --coral: #ff6b85; --coral-2: #c22a4b;
    --mint: #34d39a; --mint-2: #138a5f; --grape: #a78bfa; --warn: #ff7a90; --good: #4ade9b;
    --board-edge: #070b1f; --board-center-1: #1f2a5c; --board-center-2: #123a55;
    --overlay: rgba(3, 6, 20, 0.72); --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg-1: #0d1330; --bg-2: #142a5c; --bg-3: #1d4d8f;
  --paper: #1b2347; --paper-2: #232d5a; --ink: #f2f4ff; --muted: #a9b0d6; --line: #34407a;
  --sea: #4d9bff; --sea-2: #1e5fd0; --sun: #ffc233; --sun-2: #c98400; --coral: #ff6b85; --coral-2: #c22a4b;
  --mint: #34d39a; --mint-2: #138a5f; --grape: #a78bfa; --warn: #ff7a90; --good: #4ade9b;
  --board-edge: #070b1f; --board-center-1: #1f2a5c; --board-center-2: #123a55;
  --overlay: rgba(3, 6, 20, 0.72); --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0; color: var(--ink); font: 16px/1.5 var(--font-body);
  background-color: #071230;
  background-image:
    radial-gradient(900px 500px at 50% -5%, rgba(233, 185, 73, .14), transparent 70%),
    radial-gradient(1200px 700px at 50% 110%, rgba(30, 90, 200, .30), transparent 70%),
    linear-gradient(180deg, #0a1a40, #050c22);
  background-attachment: fixed;
  overflow-x: hidden;
}
button, input, select { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; text-wrap: balance; margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.warn { color: var(--warn); }
.hint { color: var(--sun-2); font-weight: 700; margin: 0; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }

/* ---------- מסכים ---------- */
.screen { min-height: 100vh; padding: 28px 16px 48px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.logo { text-align: center; display: grid; justify-items: center; gap: 6px; }
.logo-mark {
  width: 68px; height: 68px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: linear-gradient(135deg, var(--coral), var(--sun)); display: grid; place-items: center;
  box-shadow: 0 8px 0 var(--coral-2), var(--shadow); animation: bob 2.6s ease-in-out infinite;
}
.logo-mark span { transform: rotate(45deg); font-size: 2rem; filter: drop-shadow(0 2px 0 rgba(0,0,0,.2)); }
.logo:not(.big) .logo-mark { width: 48px; height: 48px; box-shadow: 0 5px 0 var(--coral-2); }
.logo:not(.big) .logo-mark span { font-size: 1.4rem; }
.logo h1 {
  font-size: clamp(2.4rem, 9vw, 4.2rem); line-height: 1.05; color: #fff;
  text-shadow: 0 4px 0 var(--sea-2), 0 8px 18px rgba(0, 30, 90, .35);
  -webkit-text-stroke: 1px color-mix(in srgb, var(--sea-2) 60%, transparent);
}
.logo:not(.big) h1 { font-size: clamp(1.8rem, 6vw, 2.6rem); }
.logo h1 em { font-style: normal; color: var(--sun); }
.logo p { margin: 0; color: var(--ink); font-weight: 700; letter-spacing: .04em; background: color-mix(in srgb, var(--paper) 75%, transparent); padding: 2px 14px; border-radius: 99px; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

.cat-cloud { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 560px; }
.cat-chip {
  padding: 6px 12px; border-radius: 99px; font-weight: 700; font-size: .9rem; color: #fff;
  background: var(--cat); box-shadow: 0 3px 0 color-mix(in srgb, var(--cat) 60%, #000);
  text-shadow: 0 1px 1px rgba(0,0,0,.25); animation: pop-in .5s backwards;
}
.cat-chip:nth-child(2n) { rotate: -2deg; } .cat-chip:nth-child(3n) { rotate: 2deg; }
.cat-chip:nth-child(1) { animation-delay: .05s } .cat-chip:nth-child(2) { animation-delay: .1s } .cat-chip:nth-child(3) { animation-delay: .15s }
.cat-chip:nth-child(4) { animation-delay: .2s } .cat-chip:nth-child(5) { animation-delay: .25s } .cat-chip:nth-child(6) { animation-delay: .3s }
.cat-chip:nth-child(7) { animation-delay: .35s } .cat-chip:nth-child(8) { animation-delay: .4s }

.card {
  background: var(--paper); border-radius: 22px; padding: 22px; width: min(100%, 460px);
  box-shadow: 0 6px 0 color-mix(in srgb, var(--paper) 70%, #000 30%), var(--shadow);
  border: 3px solid color-mix(in srgb, var(--sea) 25%, var(--paper));
}
.stack { display: flex; flex-direction: column; gap: 14px; }
label, .label { display: grid; gap: 6px; font-weight: 700; font-size: .95rem; }
input, select {
  background: var(--paper-2); border: 2px solid var(--line); border-radius: 12px; padding: 10px 12px; min-width: 0;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus { outline: none; border-color: var(--sea); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sea) 25%, transparent); }
.code-input { text-transform: uppercase; letter-spacing: .3em; text-align: center; font-weight: 800; font-size: 1.3rem; }
.or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .9rem; font-weight: 700; }
.or::before, .or::after { content: ""; flex: 1; height: 2px; background: var(--line); border-radius: 2px; }

/* ---------- כפתורים ---------- */
.btn {
  --b: var(--paper-2); --b2: var(--line); --t: var(--ink);
  border: 0; background: var(--b); color: var(--t); border-radius: 14px; padding: 11px 18px; cursor: pointer;
  font-weight: 800; box-shadow: 0 4px 0 var(--b2); transform: translateY(0);
  transition: transform .08s, box-shadow .08s, filter .15s;
}
.btn:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 5px 0 var(--b2); }
.btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 0 0 var(--b2); }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: saturate(.4); }
.btn.primary { --b: linear-gradient(180deg, color-mix(in srgb, var(--mint) 85%, #fff), var(--mint)); --b2: var(--mint-2); --t: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.25); }
.btn.secondary { --b: linear-gradient(180deg, color-mix(in srgb, var(--sea) 85%, #fff), var(--sea)); --b2: var(--sea-2); --t: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.2); }
.btn.danger { --b: linear-gradient(180deg, color-mix(in srgb, var(--coral) 85%, #fff), var(--coral)); --b2: var(--coral-2); --t: #fff; }
.btn.big { padding: 15px 22px; font-size: 1.15rem; border-radius: 16px; }
.btn.small { padding: 6px 12px; font-size: .85rem; border-radius: 10px; box-shadow: 0 3px 0 var(--b2); }
.btn.ghost { --b: transparent; --b2: transparent; --t: var(--muted); box-shadow: none; }
.btn.ghost:hover:not(:disabled) { box-shadow: none; --t: var(--ink); }
.btn.on { --b: linear-gradient(180deg, color-mix(in srgb, var(--sun) 80%, #fff), var(--sun)); --b2: var(--sun-2); --t: #3a2400; }
.btn.pulse:not(:disabled) { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { scale: 1; } 50% { scale: 1.07; } }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }

.mute {
  position: fixed; top: 12px; inset-inline-start: 12px; z-index: 60; width: 46px; height: 46px; border-radius: 50%;
  border: 3px solid #fff; background: var(--sun); font-size: 1.3rem; cursor: pointer;
  box-shadow: 0 4px 0 var(--sun-2), var(--shadow); transition: transform .1s;
}
.mute.in-game { top: auto; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); inset-inline-start: auto; inset-inline-end: 14px; }
.mute:hover { transform: scale(1.08) rotate(-6deg); }
.mute:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--sun-2); }

.avatars { display: flex; flex-wrap: wrap; gap: 8px; }
.avatar {
  width: 50px; height: 50px; font-size: 1.6rem; border-radius: 50%; border: 3px solid var(--line); background: var(--paper-2);
  cursor: pointer; transition: transform .12s, border-color .12s;
}
.avatar:hover:not(:disabled) { transform: scale(1.1) rotate(-8deg); }
.avatar.on { border-color: var(--sun); background: color-mix(in srgb, var(--sun) 30%, var(--paper)); transform: scale(1.12); box-shadow: 0 4px 0 var(--sun-2); }
.avatar:disabled { opacity: .3; cursor: not-allowed; }
.room-code { display: grid; justify-items: center; gap: 6px; padding: 12px; border-radius: 16px; background: repeating-linear-gradient(-45deg, var(--paper-2) 0 12px, var(--paper) 12px 24px); }
.room-code strong {
  font-size: 2.6rem; letter-spacing: .25em; font-family: ui-monospace, "SFMono-Regular", monospace; font-weight: 900;
  color: var(--coral); text-shadow: 0 3px 0 color-mix(in srgb, var(--coral) 30%, transparent);
}
.members { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.members li {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 12px; font-weight: 700;
  background: color-mix(in srgb, var(--pc) 14%, var(--paper)); border-inline-start: 6px solid var(--pc);
}
.av { font-size: 1.3rem; }
.tag {
  display: inline-block; font-size: .72rem; font-weight: 800; padding: 1px 8px; border-radius: 99px;
  background: var(--paper-2); border: 2px solid var(--line); color: var(--muted); vertical-align: middle;
}
.tag.on { background: var(--sea); color: #fff; border-color: var(--sea); }
.tag.warn { color: var(--warn); border-color: currentColor; background: transparent; }
.tag.diff-easy { background: var(--mint); border-color: var(--mint); color: #fff; }
.tag.diff-medium { background: var(--sun); border-color: var(--sun); color: #3a2400; }
.tag.diff-hard { background: var(--coral); border-color: var(--coral); color: #fff; }
.local-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; align-items: center; }
.local-row { grid-template-columns: auto minmax(0, 1.4fr) auto minmax(0, 1fr) auto; }
.local-row select { min-width: 0; width: 100%; }
@media (max-width: 520px) { .local-row { gap: 6px; } }
.local-row .dot { width: 16px; height: 16px; border-radius: 50%; background: var(--pc); box-shadow: 0 2px 0 color-mix(in srgb, var(--pc) 60%, #000); }
.toggle { display: flex; align-items: center; gap: 10px; font-weight: 700; cursor: pointer; padding: 10px 12px; border-radius: 12px; background: var(--paper-2); }
.toggle input { width: 22px; height: 22px; accent-color: var(--mint); flex: none; }
.toggle + p { margin: -8px 0 0; }

.toast {
  position: fixed; inset-inline: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); margin: auto; max-width: 420px; z-index: 70;
  background: var(--coral); color: #fff; font-weight: 700; padding: 12px 16px; border-radius: 14px; text-align: center;
  box-shadow: 0 5px 0 var(--coral-2), var(--shadow); animation: pop-in .3s;
}

/* ---------- משחק ---------- */
.game { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; padding: 16px; max-width: 1320px; margin: 0 auto; align-items: start; }
.board-wrap { min-width: 0; }
.board {
  direction: ltr; display: grid; grid-template-columns: 1.55fr repeat(11, 1fr) 1.55fr; grid-template-rows: 1.55fr repeat(11, 1fr) 1.55fr;
  aspect-ratio: 1; width: 100%; max-width: min(100%, calc(100vh - 32px)); margin-inline: auto; gap: 3px; padding: 6px;
  background: var(--board-edge); border-radius: 20px;
  box-shadow: 0 10px 0 color-mix(in srgb, var(--board-edge) 70%, #000), 0 24px 50px rgba(10, 20, 60, .35);
}
.sq {
  direction: rtl; position: relative; border: 0; padding: 2px; background: var(--paper); cursor: pointer; min-width: 0; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; overflow: hidden; border-radius: 5px;
  font-size: clamp(6px, 0.78vw, 10.5px); line-height: 1.15; text-align: center; color: var(--ink);
  transition: transform .12s, box-shadow .12s;
}
.sq:hover { transform: scale(1.08); z-index: 3; box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.sq.sel { box-shadow: 0 0 0 3px var(--sun), 0 0 18px var(--sun); z-index: 4; transform: scale(1.06); }
.sq .band {
  position: absolute; background: var(--cat); display: grid; place-items: center;
  background-image: linear-gradient(180deg, rgba(255,255,255,.28), transparent);
}
.sq.side-b .band { inset: 0 0 auto 0; height: 26%; }
.sq.side-t .band { inset: auto 0 0 0; height: 26%; }
.sq.side-l .band { inset: 0 auto 0 0; width: 26%; }
.sq.side-r .band { inset: 0 0 0 auto; width: 26%; }
.sq .band .ic { font-size: 1.2em; filter: drop-shadow(0 1px 0 rgba(0,0,0,.25)); }
.sq.k-property.side-b { padding-top: 28%; } .sq.k-property.side-t { padding-bottom: 28%; }
.sq.k-property.side-l { padding-left: 28%; } .sq.k-property.side-r { padding-right: 28%; }
.sq.owned { background: color-mix(in srgb, var(--own) 22%, var(--paper)); box-shadow: inset 0 0 0 2px var(--own); }
.sq .nm { font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sq .pr { color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.sq .lv { color: var(--sun-2); letter-spacing: -1px; text-shadow: 0 0 4px color-mix(in srgb, var(--sun) 60%, transparent); }
.sq .ow { position: absolute; top: 1px; inset-inline-start: 2px; font-size: 1.15em; z-index: 1; }
.sq.side-b .ow { top: auto; bottom: 1px; }
.sq .ic.big { font-size: 1.9em; line-height: 1; }
.sq.k-surprise { background: linear-gradient(160deg, #ffd6e0, #ffe9a8); }
.sq.k-blitz { background: linear-gradient(160deg, #fff3a8, #ffd166); }
.sq.k-duel { background: linear-gradient(160deg, #ffc2c2, #ff8fa3); }
.sq.k-info { background: linear-gradient(160deg, #d6f5ff, #a8e6ff); }
.sq.k-choice { background: linear-gradient(160deg, #e1d9ff, #c4b5fd); }
.sq.k-grant { background: linear-gradient(160deg, #d3ffe6, #8ff0bd); }
.sq.k-costOfLiving { background: linear-gradient(160deg, #ffe0cc, #ffb38a); }
.sq.k-fastTrack { background: linear-gradient(160deg, #d9f2ff, #9fd8ff); }
.sq.k-start { background: linear-gradient(135deg, var(--mint), #b8f5d8); }
.sq.k-delay { background: linear-gradient(135deg, #c0c6dd, #eef0f7); }
.sq:not(.k-property) .nm, .sq:not(.k-property) .pr { color: #1b2340; }
.sq.corner .ic.big { font-size: 2.6em; animation: bob 3s ease-in-out infinite; }
.sq.corner .nm { font-family: var(--font-display); font-weight: 400; font-size: 1.2em; }
.tokens { position: absolute; inset-inline: 0; bottom: 1px; display: flex; justify-content: center; flex-wrap: wrap; pointer-events: none; z-index: 2; }
.token {
  font-size: clamp(12px, 1.7vw, 22px); line-height: 1; border-radius: 50%; background: #fff; margin: 1px; padding: 0;
  width: 1.3em; height: 1.3em; display: grid; place-items: center; overflow: hidden;
  box-shadow: 0 0 0 2px var(--pc), 0 3px 4px rgba(0,0,0,.35);
}
.token.active { animation: token-glow 1.2s ease-in-out infinite; z-index: 3; }
.token.hop { animation: hop .15s ease-out; }
@keyframes token-glow { 0%, 100% { scale: 1.15; box-shadow: 0 0 0 2px var(--pc), 0 0 6px var(--pc); } 50% { scale: 1.3; box-shadow: 0 0 0 3px var(--pc), 0 0 14px var(--pc); } }
@keyframes hop { 0% { translate: 0 0; } 50% { translate: 0 -40%; scale: 1.35; } 100% { translate: 0 0; } }

.center-area {
  direction: rtl; grid-row: 2 / 13; grid-column: 2 / 13; border-radius: 10px; padding: clamp(8px, 2vw, 24px);
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--paper) 80%, transparent), transparent 65%),
    repeating-linear-gradient(45deg, transparent 0 22px, color-mix(in srgb, var(--sea) 6%, transparent) 22px 24px),
    linear-gradient(160deg, var(--board-center-1), var(--board-center-2));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; min-width: 0; min-height: 0; overflow: auto;
}
.brand {
  font-family: var(--font-display); font-size: clamp(1.1rem, 3vw, 2.4rem); color: #fff; line-height: 1;
  text-shadow: 0 3px 0 var(--sea-2), 0 6px 12px rgba(0, 30, 90, .3); rotate: -3deg;
}
.brand em { font-style: normal; color: var(--sun); }
.round { display: grid; gap: 3px; justify-items: center; font-size: .82rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.round .bar { width: 140px; height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 12%, transparent); overflow: hidden; }
.round .bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mint), var(--sun), var(--coral)); }
.turn {
  display: flex; align-items: center; gap: 8px; padding: 5px 16px 5px 8px; border-radius: 99px; font-weight: 700;
  background: var(--paper); box-shadow: 0 0 0 3px var(--pc), 0 4px 0 color-mix(in srgb, var(--pc) 60%, #000);
}
.turn .av { font-size: 1.5rem; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--pc) 25%, #fff); }
.dice { display: flex; gap: 12px; }
.dice.idle { opacity: .55; }
.die {
  width: clamp(38px, 5.5vw, 58px); aspect-ratio: 1; border-radius: 22%; padding: 14%;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 6%;
  background: linear-gradient(145deg, #fff, #e8ecf7); box-shadow: inset 0 -4px 0 #c5cbe0, 0 5px 0 #9aa3c2, 0 8px 14px rgba(0,0,0,.25);
}
.die:nth-child(2) { rotate: 8deg; } .die:first-child { rotate: -6deg; }
.die i { border-radius: 50%; }
.die i.on { background: radial-gradient(circle at 35% 35%, #ff6b85, var(--coral-2)); }
.die.rolling { animation: roll .25s linear infinite; }
.die.rolling:nth-child(2) { animation-duration: .21s; animation-direction: reverse; }
@keyframes roll { 0% { transform: rotate(0) translateY(0); } 25% { transform: rotate(90deg) translateY(-8px); } 50% { transform: rotate(180deg) translateY(0); } 75% { transform: rotate(270deg) translateY(-6px); } 100% { transform: rotate(360deg) translateY(0); } }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 460px; }
.actions p { flex-basis: 100%; margin: 0; font-weight: 600; }
.actions select { max-width: 100%; flex-basis: 100%; }
.waiting { animation: breathe 1.8s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }

.side { display: grid; gap: 12px; min-width: 0; }
.panel {
  background: var(--paper); border-radius: 18px; padding: 12px; min-width: 0; position: relative;
  box-shadow: 0 5px 0 color-mix(in srgb, var(--paper) 70%, #000 30%), var(--shadow);
}
.panel h3 { font-size: 1.1rem; margin-bottom: 6px; }
.players { display: grid; gap: 6px; padding: 8px; }
.pl {
  display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 14px;
  background: color-mix(in srgb, var(--pc) 10%, var(--paper)); border-inline-start: 6px solid var(--pc); transition: transform .2s, box-shadow .2s;
}
.pl.turn { background: color-mix(in srgb, var(--pc) 24%, var(--paper)); box-shadow: 0 0 0 2px var(--pc), 0 4px 14px color-mix(in srgb, var(--pc) 40%, transparent); transform: scale(1.02); }
.pl.out { opacity: .45; filter: grayscale(1); }
.pl .av { font-size: 1.6rem; width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--pc); }
.pl.turn .av { animation: bob 1.6s ease-in-out infinite; }
.pl-main { min-width: 0; }
.pl-name { font-weight: 800; }
.pl-stats { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.pl-stats strong { color: var(--good); font-size: 1rem; }
.info { border-top: 8px solid var(--cat, var(--sea)); }
.info p { margin: 4px 0; }
.info-band { display: inline-block; padding: 2px 12px; border-radius: 99px; background: var(--cat); color: #fff; font-weight: 800; font-size: .85rem; margin-bottom: 4px; text-shadow: 0 1px 1px rgba(0,0,0,.25); }
.close { position: absolute; top: 6px; inset-inline-end: 6px; }
.table-wrap { overflow-x: auto; }
.rent { width: 100%; border-collapse: collapse; font-size: .8rem; font-variant-numeric: tabular-nums; margin-block: 6px; }
.rent th, .rent td { text-align: start; padding: 4px; border-bottom: 1px solid var(--line); }
.rent tr.cur td { background: color-mix(in srgb, var(--sun) 25%, var(--paper)); font-weight: 800; }
.row { display: flex; flex-wrap: wrap; gap: 6px; }
.log summary { cursor: pointer; list-style: none; display: flex; align-items: center; }
.log summary::-webkit-details-marker { display: none; }
.log summary h3 { display: inline; }
.log ol { list-style: none; margin: 6px 0 0; padding: 0; max-height: 260px; overflow: auto; font-size: .85rem; display: grid; gap: 3px; }
.log li { padding: 4px 8px; border-radius: 8px; background: var(--paper-2); }
.log li:first-child { background: color-mix(in srgb, var(--sun) 25%, var(--paper)); font-weight: 700; }

/* ---------- חלונות ---------- */
.overlay { position: fixed; inset: 0; background: var(--overlay); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 16px; z-index: 20; }
.modal {
  --cat: var(--sea);
  background: var(--paper); border-radius: 26px; padding: 22px; width: min(100%, 540px); max-height: 100%; overflow: auto;
  display: grid; gap: 12px; text-align: center; position: relative;
  border: 4px solid color-mix(in srgb, var(--cat) 70%, #fff);
  box-shadow: 0 8px 0 color-mix(in srgb, var(--cat) 60%, #000), 0 30px 60px rgba(0,0,0,.4);
}
.modal.enter { animation: modal-in .45s cubic-bezier(.2, 1.4, .4, 1); }
.modal.enter .opt { animation: pop-in .35s backwards; animation-delay: calc(.15s + var(--i, 0) * .07s); }
.modal.surprise { --cat: var(--coral); background: linear-gradient(170deg, color-mix(in srgb, var(--coral) 12%, var(--paper)), var(--paper) 50%); }
.modal.quiz, .modal.auction { --cat: var(--grape); }
.modal.result.ok { --cat: var(--mint); background: linear-gradient(180deg, color-mix(in srgb, var(--mint) 18%, var(--paper)), var(--paper) 45%); }
.modal.result.bad { --cat: var(--coral); background: linear-gradient(180deg, color-mix(in srgb, var(--coral) 14%, var(--paper)), var(--paper) 45%); }
.modal.end { --cat: var(--sun); background: radial-gradient(circle at 50% 0, color-mix(in srgb, var(--sun) 35%, var(--paper)), var(--paper) 60%); }
.modal h2 { font-size: 1.55rem; }
.q-band {
  margin: -22px -22px 0; padding: 12px 16px; border-radius: 22px 22px 0 0; font-family: var(--font-display); font-size: 1.2rem; color: #fff;
  background: var(--cat); background-image: linear-gradient(180deg, rgba(255,255,255,.25), transparent); text-shadow: 0 2px 0 rgba(0,0,0,.2);
}
.big-icon { font-size: 3.2rem; line-height: 1; filter: drop-shadow(0 4px 0 rgba(0,0,0,.12)); }
.modal.enter .big-icon { animation: icon-pop .6s cubic-bezier(.2, 1.6, .4, 1) .1s backwards; }
.trophy { font-size: 4.4rem; animation: bob 2s ease-in-out infinite; }
.flip-card { display: grid; gap: 10px; padding: 18px; border-radius: 18px; background: linear-gradient(135deg, var(--coral), var(--sun)); color: #fff; box-shadow: inset 0 0 0 4px rgba(255,255,255,.35); }
.flip-card .card-text { font-size: 1.2rem; font-weight: 700; margin: 0; text-shadow: 0 1px 2px rgba(0,0,0,.2); }
.modal.enter .flip-card { animation: flip .6s cubic-bezier(.2, 1.2, .4, 1); }
.q-head { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; }
.q-text { font-size: 1.2rem; font-weight: 800; margin: 0; }
.options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: start; }
.opt {
  --o: var(--sea); --o2: var(--sea-2);
  display: flex; gap: 10px; align-items: center; padding: 12px; border-radius: 14px; border: 0; min-width: 0;
  background: color-mix(in srgb, var(--o) 14%, var(--paper)); box-shadow: 0 4px 0 color-mix(in srgb, var(--o) 45%, var(--paper));
  cursor: pointer; font-weight: 700; transition: transform .08s, box-shadow .08s, background .15s;
}
/* צבעי האפשרויות בלי ירוק ובלי אדום: ירוק שמור לתשובה נכונה ואדום לשגויה */
.opt:nth-child(1) { --o: #3b6fd8; } .opt:nth-child(2) { --o: #8b5cf6; } .opt:nth-child(3) { --o: #e8890c; } .opt:nth-child(4) { --o: #4f6d8f; }
.modal.result .opt:not(.right):not(.wrong) { --o: #9aa3b5; opacity: .7; }
button.opt:hover:not(:disabled) { background: color-mix(in srgb, var(--o) 26%, var(--paper)); transform: translateY(-2px); }
button.opt:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 0 0 transparent; }
.opt:disabled { cursor: default; }
button.opt:disabled:not([data-removed]) { opacity: .75; }
.opt[data-removed] { opacity: .25; text-decoration: line-through; filter: grayscale(1); }
.opt .ol {
  display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%;
  background: var(--o); color: #fff; font-weight: 900; font-size: .95rem; box-shadow: 0 2px 0 rgba(0,0,0,.2);
}
.opt.right { --o: var(--good); background: color-mix(in srgb, var(--good) 30%, var(--paper)); box-shadow: 0 0 0 3px var(--good), 0 4px 0 var(--good); animation: glow-good 1s ease-in-out 2; }
.opt.wrong { --o: var(--warn); background: color-mix(in srgb, var(--warn) 22%, var(--paper)); box-shadow: 0 0 0 3px var(--warn); }
@keyframes glow-good { 50% { box-shadow: 0 0 0 3px var(--good), 0 0 20px var(--good); } }
.explain { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--paper-2); text-align: start; }
.vs { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; font-weight: 800; margin: 0; }
.vs span { padding: 4px 12px; border-radius: 99px; background: color-mix(in srgb, var(--pc) 20%, var(--paper)); box-shadow: 0 0 0 2px var(--pc); }
.vs b { font-family: var(--font-display); font-weight: 400; color: var(--coral); font-size: 1.4rem; animation: pulse 1s infinite; }
.handoff { font-size: 1.3rem; margin: 0; }
.answered { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.answered span { padding: 3px 10px; border-radius: 99px; background: var(--paper-2); font-weight: 700; }
.answered span.done { background: color-mix(in srgb, var(--mint) 25%, var(--paper)); }

/* טבעת ספירה לאחור */
.ring { position: relative; width: 74px; height: 74px; margin-inline: auto; flex: none; }
.ring svg { width: 100%; height: 100%; rotate: -90deg; }
.ring circle { fill: none; stroke-width: 5; }
.ring .track { stroke: color-mix(in srgb, var(--ink) 12%, transparent); }
.ring .arc {
  stroke: var(--mint); stroke-linecap: round; stroke-dasharray: 119.4; stroke-dashoffset: 0;
  animation: ring-drain var(--dur) linear var(--delay) forwards, ring-color var(--dur) linear var(--delay) forwards;
}
.ring span { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 1.7rem; font-variant-numeric: tabular-nums; }
@keyframes ring-drain { to { stroke-dashoffset: 119.4; } }
@keyframes ring-color { 0%, 55% { stroke: var(--mint); } 75% { stroke: var(--sun); } 100% { stroke: var(--coral); } }

/* מכירה פומבית */
.auction-top { display: flex; align-items: center; justify-content: center; gap: 16px; }
.high {
  display: grid; gap: 2px; padding: 10px 18px; border-radius: 16px; min-width: 170px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--sun) 35%, var(--paper)), var(--paper)); box-shadow: 0 0 0 3px var(--sun);
}
.high strong { font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; color: var(--sun-2); font-variant-numeric: tabular-nums; }
.bidders { display: grid; gap: 8px; text-align: start; }
.bidder {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 14px;
  background: color-mix(in srgb, var(--pc) 10%, var(--paper)); border-inline-start: 6px solid var(--pc); transition: transform .2s;
}
.bidder .who { font-weight: 800; }
.bidder .who small { color: var(--good); font-weight: 700; margin-inline-start: 4px; }
.bidder .ctrl { display: flex; flex-wrap: wrap; gap: 6px; }
.bidder .ctrl .btn { padding: 7px 12px; font-size: .9rem; }
.bidder.lead { background: color-mix(in srgb, var(--sun) 30%, var(--paper)); box-shadow: 0 0 0 3px var(--sun); transform: scale(1.02); }
.bidder.out { opacity: .45; filter: grayscale(1); }

.winner { font-family: var(--font-display); font-size: 1.4rem; margin: 0; color: var(--sun-2); }
.ranking { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; text-align: start; }
.ranking li {
  display: flex; justify-content: space-between; gap: 8px; padding: 10px 14px; border-radius: 14px; font-weight: 700;
  background: color-mix(in srgb, var(--pc) 14%, var(--paper)); border-inline-start: 6px solid var(--pc); font-variant-numeric: tabular-nums;
  animation: slide-in .4s backwards;
}
.ranking li:nth-child(1) { background: color-mix(in srgb, var(--sun) 35%, var(--paper)); font-size: 1.1rem; animation-delay: .2s; }
.ranking li:nth-child(2) { animation-delay: .35s; } .ranking li:nth-child(3) { animation-delay: .5s; } .ranking li:nth-child(n+4) { animation-delay: .65s; }

/* ---------- אפקטים ---------- */
.fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 80; overflow: hidden; }
.fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx-float {
  position: absolute; translate: -50% -50%; font-family: var(--font-display); font-size: 1.6rem; white-space: nowrap;
  padding: 2px 12px; border-radius: 99px; color: #fff; animation: float-up 1.6s ease-out forwards; direction: ltr;
}
.fx-float.gain { background: var(--good); box-shadow: 0 3px 0 var(--mint-2); }
.fx-float.loss { background: var(--warn); box-shadow: 0 3px 0 var(--coral-2); }
.fx-float.info { background: var(--sea); box-shadow: 0 3px 0 var(--sea-2); }
@keyframes float-up { 0% { opacity: 0; scale: .5; } 15% { opacity: 1; scale: 1.15; } 30% { scale: 1; } 100% { opacity: 0; translate: -50% -180%; } }
.shake { animation: shake .45s; }
@keyframes shake { 10%, 90% { translate: -2px 0; } 20%, 80% { translate: 4px 0; } 30%, 50%, 70% { translate: -7px 0; } 40%, 60% { translate: 7px 0; } }
@keyframes modal-in { 0% { opacity: 0; scale: .6; translate: 0 40px; } 100% { opacity: 1; scale: 1; translate: 0 0; } }
@keyframes pop-in { 0% { opacity: 0; scale: .5; } 100% { opacity: 1; scale: 1; } }
@keyframes icon-pop { 0% { scale: 0; rotate: -30deg; } 100% { scale: 1; rotate: 0deg; } }
@keyframes flip { 0% { transform: perspective(600px) rotateY(90deg); } 100% { transform: perspective(600px) rotateY(0); } }
@keyframes slide-in { 0% { opacity: 0; translate: 30px 0; } 100% { opacity: 1; translate: 0 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
  .ring .arc { animation-duration: var(--dur) !important; }
}

/* ---------- מסכים קטנים ---------- */
@media (max-width: 960px) {
  .game { grid-template-columns: minmax(0, 1fr); padding-inline: 8px; padding-bottom: 76px; }
  .board { max-width: 100%; }
}
@media (max-width: 520px) {
  .options { grid-template-columns: 1fr; }
  .board { padding: 3px; gap: 2px; border-radius: 12px; }
  .center-area { gap: 4px; padding: 4px; }
  .center-area .round { display: none; }
  .die { width: 32px; }
  .turn { padding: 2px 10px 2px 4px; font-size: .8rem; }
  .turn .av { width: 24px; height: 24px; font-size: 1rem; }
  .actions .btn { padding: 6px 10px; font-size: .8rem; }
  .actions .btn.big { padding: 8px 12px; font-size: .9rem; }
  .actions p { font-size: .78rem; }
  .modal { padding: 16px; border-radius: 20px; }
  .q-band { margin: -16px -16px 0; border-radius: 16px 16px 0 0; }
  .auction-top { flex-wrap: wrap; }
  .sq:hover { transform: none; }
}

/* ---------- מרכז הלוח: נוף, שלט ושושנת רוחות ---------- */
.center-area { position: relative; isolation: isolate; overflow: hidden; padding: clamp(6px, 1.4vw, 18px); justify-content: space-between; }
.center-area > :not(.center-scene) { position: relative; z-index: 1; }
.center-scene {
  position: absolute !important; inset: 0; z-index: 0 !important; background-size: cover; background-position: center;
  box-shadow: inset 0 0 0 4px #e9c97c, inset 0 0 0 7px #8a5a22, inset 0 0 40px rgba(90, 50, 10, .45);
  border-radius: 10px;
}
.compass { position: absolute !important; top: 8px; left: 8px; width: clamp(28px, 5vw, 58px); filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); animation: spin-slow 40s linear infinite; }
@keyframes spin-slow { to { rotate: 360deg; } }
.plaque {
  display: flex; align-items: center; gap: clamp(2px, .6vw, 8px); margin-top: clamp(2px, 1vw, 10px);
  padding: clamp(4px, .9vw, 10px) clamp(8px, 1.6vw, 20px); border-radius: 14px;
  background: linear-gradient(180deg, #fffaf0, #f3e3bf); border: 3px solid #8a5a22;
  box-shadow: 0 0 0 3px #e9c97c, 0 8px 18px rgba(60, 30, 0, .35);
}
.plaque .brand { rotate: 0deg; color: #1d4fa3; text-shadow: 0 2px 0 #c9daf5; font-size: clamp(1rem, 3.2vw, 2.5rem); white-space: nowrap; -webkit-text-stroke: 0; }
.plaque .brand em { color: #d9480f; }
.branch { width: clamp(22px, 4vw, 52px); flex: none; }
.plaque .branch:last-child { transform: scaleX(-1); }
.center-panel {
  display: flex; flex-direction: column; align-items: center; gap: clamp(4px, 1vw, 10px);
  padding: clamp(6px, 1.4vw, 16px) clamp(8px, 2vw, 22px); border-radius: 20px; max-width: 94%;
  background: color-mix(in srgb, var(--paper) 80%, transparent); backdrop-filter: blur(6px);
  box-shadow: 0 10px 26px rgba(30, 20, 0, .3), inset 0 0 0 2px color-mix(in srgb, #fff 60%, transparent);
  margin-bottom: clamp(2px, 1vw, 12px);
}

.double-badge {
  font-family: var(--font-display); font-size: 1.1rem; color: #fff; padding: 4px 16px; border-radius: 99px;
  background: linear-gradient(90deg, var(--grape), var(--coral)); box-shadow: 0 4px 0 color-mix(in srgb, var(--grape) 60%, #000);
  animation: pulse 1.2s ease-in-out infinite;
}

/* ---------- משבצות: טיפוגרפיה, מחיר, נחיתה ---------- */
.sq .nm { letter-spacing: -.01em; }
.sq.k-property .pr {
  color: #fff; background: color-mix(in srgb, var(--cat) 75%, #000 10%); padding: 0 5px; border-radius: 99px; font-size: .92em;
}
.sq.owned::after {
  content: ""; position: absolute; inset-inline-end: -10px; bottom: -10px; width: 22px; height: 22px; rotate: 45deg;
  background: var(--own); box-shadow: 0 0 0 1px rgba(255,255,255,.6);
}
.sq.side-b.owned::after { bottom: auto; top: 26%; }
.sq.landed { animation: landed 1s ease-out; z-index: 5; }
@keyframes landed { 0% { box-shadow: 0 0 0 0 var(--sun); scale: 1; } 30% { box-shadow: 0 0 0 6px var(--sun), 0 0 26px var(--sun); scale: 1.14; } 100% { box-shadow: 0 0 0 0 transparent; scale: 1; } }
.sq.k-start { background: linear-gradient(135deg, #22c58b, #b8f5d8 55%, #fff); }
.sq.k-start .ic.big { animation: wiggle 2.2s ease-in-out infinite; }
@keyframes wiggle { 0%, 100% { rotate: -8deg; } 50% { rotate: 8deg; } }

/* משא ומתן על הלוח */
.game.trading .sq.tr-off { filter: grayscale(.85) brightness(.7); opacity: .55; }
.game.trading .sq.tr-their { box-shadow: inset 0 0 0 3px var(--coral); }
.game.trading .sq.tr-mine { box-shadow: inset 0 0 0 3px var(--mint); }
.game.trading .sq.tr-pick { scale: 1.08; z-index: 4; animation: picked 1s ease-in-out infinite; }
.game.trading .sq.tr-their.tr-pick { box-shadow: 0 0 0 3px var(--coral), 0 0 16px var(--coral); }
.game.trading .sq.tr-mine.tr-pick { box-shadow: 0 0 0 3px var(--mint), 0 0 16px var(--mint); }
@keyframes picked { 50% { filter: brightness(1.12); } }

/* ---------- שחקנים ---------- */
.pl { flex-wrap: wrap; }
.pl-main { flex: 1; }
.pl-worth { font-size: .78rem; font-weight: 800; color: var(--sun-2); }
.trade-btn { --b: linear-gradient(180deg, color-mix(in srgb, var(--grape) 80%, #fff), var(--grape)); --b2: color-mix(in srgb, var(--grape) 60%, #000); --t: #fff; flex: none; }
.trade-btn.on { --b: var(--sun); --b2: var(--sun-2); --t: #3a2400; }

/* ---------- לוח המשא ומתן ---------- */
.trade-panel { border-top: 8px solid var(--grape); display: grid; gap: 10px; animation: pop-in .3s; }
.trade-panel h3 { padding-inline-end: 30px; }
.trade-panel p { margin: 0; }
.trade-side { display: grid; gap: 6px; padding: 10px; border-radius: 14px; background: color-mix(in srgb, var(--pc) 10%, var(--paper)); border-inline-start: 5px solid var(--pc); }
.trade-side .cash { font-size: .85rem; }
.trade-side input { width: 100%; }
.trade-swap { text-align: center; font-size: 1.4rem; line-height: 1; color: var(--grape); font-weight: 900; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.trade-chip {
  border: 2px solid var(--cat); background: color-mix(in srgb, var(--cat) 10%, var(--paper)); color: var(--ink); border-radius: 99px;
  padding: 3px 10px; font-size: .82rem; font-weight: 700; cursor: pointer; transition: transform .1s;
}
button.trade-chip:hover { transform: translateY(-1px); }
.trade-chip.on { background: var(--cat); color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.3); box-shadow: 0 3px 0 color-mix(in srgb, var(--cat) 60%, #000); }
.trade-chip small { opacity: .85; }
.trade-cash { padding: 3px 10px; border-radius: 99px; background: color-mix(in srgb, var(--sun) 35%, var(--paper)); font-weight: 800; font-size: .85rem; }
.modal.trade { --cat: var(--grape); }
.offer { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; text-align: start; }
.offer-side { display: grid; gap: 6px; padding: 10px; border-radius: 14px; background: color-mix(in srgb, var(--pc) 12%, var(--paper)); border-top: 5px solid var(--pc); min-height: 100%; }
.row.center { justify-content: center; }

/* ---------- כרטיס משבצת ---------- */
.info.prop { background: linear-gradient(180deg, color-mix(in srgb, var(--cat) 14%, var(--paper)), var(--paper) 40%); }
.info.prop h3 { font-size: 1.35rem; }

@media (max-width: 520px) {
  .center-area .compass { display: none; }
  .center-area .plaque { display: none; }
  .center-panel { padding: 4px 8px; border-radius: 12px; margin: auto 0; }
  .offer { grid-template-columns: 1fr; }
  .double-badge { font-size: .8rem; padding: 2px 10px; }
}

/* ---------- תמונות נכסים ---------- */
.sq.k-property .band { background-size: cover; background-position: center; background-image: var(--img), linear-gradient(var(--cat), var(--cat)); box-shadow: inset 0 0 0 2px var(--cat); }
.sq.side-b .band, .sq.side-t .band { height: 44%; }
.sq.side-l .band, .sq.side-r .band { width: 44%; }
.sq.k-property.side-b { padding-top: 46%; } .sq.k-property.side-t { padding-bottom: 46%; }
.sq.k-property.side-l { padding-left: 46%; } .sq.k-property.side-r { padding-right: 46%; }
.sq .band .ic { position: absolute; top: 1px; inset-inline-end: 1px; font-size: .95em; background: var(--cat); border-radius: 4px; padding: 0 1px; line-height: 1.2; }
.sq.side-b.owned::after { top: auto; bottom: -10px; }
.info-img { height: 150px; margin: -12px -12px 8px; border-radius: 18px 18px 0 0; background-size: cover; background-position: center; position: relative; box-shadow: inset 0 -40px 40px -20px rgba(0,0,0,.35); }
.info-img .info-band { position: absolute; bottom: 8px; inset-inline-start: 10px; }
.q-band.has-img { height: 120px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 10px; background-size: cover; background-position: center; text-shadow: 0 2px 6px rgba(0,0,0,.6); box-shadow: inset 0 -50px 40px -20px rgba(0,0,0,.45); }

/* ---------- הודעת נחיתה ---------- */
.landing { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; cursor: pointer; background: rgba(10, 18, 45, .25); animation: fade-in .2s; }
.ln-card {
  width: min(100%, 360px); background: var(--paper); border-radius: 24px; overflow: hidden; text-align: center; padding-bottom: 14px;
  border: 4px solid var(--cat); box-shadow: 0 8px 0 color-mix(in srgb, var(--cat) 60%, #000), 0 30px 60px rgba(0,0,0,.4);
  animation: landing-in .45s cubic-bezier(.2, 1.5, .4, 1);
}
.ln-img { height: 170px; background-size: cover; background-position: center; position: relative; }
.ln-cat { position: absolute; top: 10px; inset-inline-start: 10px; padding: 2px 12px; border-radius: 99px; background: var(--cat); color: #fff; font-weight: 800; font-size: .85rem; text-shadow: 0 1px 1px rgba(0,0,0,.3); }
.ln-icon { font-size: 4.4rem; padding: 18px 0 4px; background: linear-gradient(180deg, color-mix(in srgb, var(--cat) 18%, var(--paper)), var(--paper)); }
.ln-icon.k-surprise { background: linear-gradient(160deg, #ffd6e0, #ffe9a8); } .ln-icon.k-blitz { background: linear-gradient(160deg, #fff3a8, #ffd166); }
.ln-icon.k-duel { background: linear-gradient(160deg, #ffc2c2, #ff8fa3); } .ln-icon.k-grant { background: linear-gradient(160deg, #d3ffe6, #8ff0bd); }
.ln-icon.k-costOfLiving { background: linear-gradient(160deg, #ffe0cc, #ffb38a); } .ln-icon.k-start { background: linear-gradient(135deg, #22c58b, #b8f5d8); }
.ln-who { margin-top: 10px; font-weight: 700; color: var(--muted); }
.ln-who .av { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--pc); font-size: 1.1rem; }
.ln-card h2 { font-size: 1.7rem; margin: 2px 12px 0; color: var(--ink); }
.ln-sub { margin: 4px 14px 0; font-weight: 700; color: color-mix(in srgb, var(--cat) 70%, var(--ink)); }
.ln-lines { list-style: none; margin: 8px 14px 0; padding: 0; display: grid; gap: 4px; }
.ln-lines li { background: var(--paper-2); border-radius: 10px; padding: 4px 10px; font-weight: 600; font-size: .92rem; }
@keyframes landing-in { 0% { opacity: 0; scale: .5; translate: 0 60px; } 100% { opacity: 1; scale: 1; translate: 0 0; } }
@keyframes fade-in { from { opacity: 0; } }

/* שדה כסף עם פסיקים */
.money-input { position: relative; display: block; }
.money-input input { width: 100%; padding-inline-start: 30px; font-weight: 800; letter-spacing: .02em; text-align: left; }
.money-input b { position: absolute; left: 10px; top: 50%; translate: 0 -50%; color: var(--muted); }

/* ---------- לוגו ענק באלכסון במרכז הלוח (מימין־למטה לשמאל־למעלה) ---------- */
.center-area { container-type: size; }
.center-area > .logo {
  display: block; width: max-content; direction: rtl; position: absolute; left: 50%; top: 50%; z-index: 1; translate: -50% -50%; rotate: 45deg; pointer-events: none;
  white-space: nowrap; font-family: var(--font-display); font-size: 15.5cqmin; line-height: 1; letter-spacing: -.01em;
  color: #1d4fa3; -webkit-text-stroke: .045em #fff; paint-order: stroke fill;
  text-shadow: 0 .06em 0 #0b2d6b, 0 .12em .3em rgba(0, 0, 0, .35);
}
.logo .l2 { color: #e8590c; font-size: .72em; text-shadow: 0 .06em 0 #8a2f00, 0 .12em .3em rgba(0, 0, 0, .35); }
@keyframes logo-in { 0% { opacity: 0; scale: .6; } 100% { opacity: 1; scale: 1; } }
.center-area > .compass { left: auto; right: 8px; }
.center-area > .center-panel {
  position: absolute; left: 2.5%; bottom: 2.5%; z-index: 2; max-width: 44%; margin: 0;
  padding: clamp(6px, 1vw, 12px) clamp(8px, 1.4vw, 16px); gap: clamp(4px, .7vw, 8px);
}
.cp-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.center-panel .actions { max-width: 100%; }
.center-area > .center-panel .die { width: clamp(28px, 4.2vw, 46px); }
.center-area > .center-panel .btn.big { padding: 10px 18px; font-size: 1.05rem; }
.center-panel .actions p { margin: 0; }

/* בטלפון: הפאנל מתחת ללוח, צמוד לתחתית המסך */
.center-panel.dock {
  position: sticky; bottom: 8px; z-index: 6; margin: 8px auto 0; max-width: 100%; width: 100%;
  background: color-mix(in srgb, var(--paper) 94%, transparent); border: 2px solid color-mix(in srgb, var(--sun) 60%, transparent);
}
.center-panel.dock .round { display: flex; }

@media (max-width: 520px) {
  .center-area > .logo { font-size: 14.5cqmin; }
  /* משבצות בטלפון: תמונה ומחיר בלבד, בלי שמות שלא נכנסים */
  .sq:not(.k-property) .nm { display: none; }
  .sq { font-size: 7px; padding: 1px; }
  .sq.k-property { padding: 0 !important; }
  .sq.k-property .band { inset: 0 !important; width: auto !important; height: auto !important; }
  .sq.k-property .band .ic { display: none; }
  .sq.k-property .nm {
    position: absolute; z-index: 1; inset: auto 0 0 0; padding: 1px 0 1.5px; font-size: 5.2px; line-height: 1.08; font-weight: 800;
    color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .78) 30%); text-shadow: 0 1px 1px #000; letter-spacing: -.02em;
    -webkit-line-clamp: 2; word-break: keep-all; overflow-wrap: normal;
  }
  .sq.k-property .pr {
    position: absolute; z-index: 1; top: 1px; left: 50%; translate: -50% 0; padding: 0 2px; font-size: 6.5px; line-height: 1.25;
    letter-spacing: -.02em; box-shadow: 0 0 0 1px rgba(255,255,255,.7);
  }
  .sq .lv { position: absolute; z-index: 1; top: 9px; left: 50%; translate: -50% 0; font-size: 6px; background: rgba(0,0,0,.45); border-radius: 3px; padding: 0 1px; }
  .sq .ic.big { font-size: 1.6em; }
  .sq:not(.k-property) .pr { font-size: 6px; letter-spacing: -.03em; }
  .sq.corner .ic.big { font-size: 2.1em; }
  .sq .ow { font-size: 9px; }
  .sq.owned::after { width: 12px; height: 12px; inset-inline-end: -6px; bottom: -6px; }
}

/* מרכז הלוח: דגל ישראל קבוע במקום הנוף המאויר */
.center-scene.flag { background-color: #fff; background-size: cover; background-position: center; box-shadow: inset 0 0 0 4px #e9c97c, inset 0 0 0 7px #8a5a22, inset 0 0 30px rgba(0, 30, 90, .18); }
.sq.k-trafficJam { background: linear-gradient(160deg, #ffd0c2, #ff9a7a); }
.ln-icon.k-trafficJam { background: linear-gradient(160deg, #ffd0c2, #ff9a7a); }

/* טיימר בשאלה רגילה: קטן, בשורת התגיות */
.q-head { align-items: center; }
.q-head .ring { width: 46px; height: 46px; margin: 0 8px; }
.q-head .ring span { font-size: 1.15rem; }
.end-clock { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 6px; }
.end-clock .ring { width: 40px; height: 40px; margin: 0; }
.end-clock .ring span { font-size: 1rem; }

/* ---------- מסכי פתיחה: רקע לילי עם הדגל, זהב וזכוכית ---------- */
.screen.hero {
  position: relative; isolation: isolate; color: #eef2ff;
  background:
    radial-gradient(700px 380px at 50% 12%, rgba(233, 185, 73, .16), transparent 70%),
    linear-gradient(180deg, rgba(6, 16, 42, .84) 0%, rgba(5, 12, 34, .92) 55%, rgba(3, 8, 24, .97) 100%),
    var(--hero) center 30% / cover no-repeat, #06102a;
}
.screen.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.2px); background-size: 22px 22px;
  mask-image: linear-gradient(180deg, #000, transparent 75%);
}
.screen.hero .logo { gap: 10px; margin-top: 12px; }
.screen.hero .logo-mark {
  width: 54px; height: 72px; border-radius: 0; transform: none; background: none; box-shadow: none;
  filter: drop-shadow(0 10px 18px rgba(233, 185, 73, .35)); animation: bob 3.2s ease-in-out infinite;
}
.screen.hero .logo:not(.big) .logo-mark { width: 38px; height: 50px; }
.screen.hero .logo-mark svg { width: 100%; height: 100%; }
.screen.hero .logo h1 {
  color: #fff; -webkit-text-stroke: 0; letter-spacing: .01em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .25), 0 12px 40px rgba(20, 70, 180, .55);
  font-size: clamp(2.8rem, 10vw, 5.2rem);
}
.screen.hero .logo:not(.big) h1 { font-size: clamp(2rem, 7vw, 2.8rem); }
.screen.hero .logo h1 em {
  background: linear-gradient(180deg, #fff1c4, #e9b949 55%, #b8862b); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 2px 0 rgba(0,0,0,.25));
}
.screen.hero .logo p {
  background: none; padding: 0; color: rgba(238, 242, 255, .78); font-weight: 600; letter-spacing: .18em; font-size: .95rem;
  display: flex; align-items: center; gap: 12px;
}
.screen.hero .logo p::before, .screen.hero .logo p::after { content: ""; width: 38px; height: 1px; background: linear-gradient(90deg, transparent, #e9b949, transparent); }

.cat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: min(100%, 640px); }
.cat-tile {
  position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3;
  border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
  animation: pop-in .5s backwards;
}
.cat-tile:nth-child(2) { animation-delay: .05s } .cat-tile:nth-child(3) { animation-delay: .1s } .cat-tile:nth-child(4) { animation-delay: .15s }
.cat-tile:nth-child(5) { animation-delay: .2s } .cat-tile:nth-child(6) { animation-delay: .25s } .cat-tile:nth-child(7) { animation-delay: .3s } .cat-tile:nth-child(8) { animation-delay: .35s }
.ct-img { position: absolute; inset: 0; background: center / cover no-repeat; transition: transform .4s; }
.cat-tile:hover .ct-img { transform: scale(1.06); }
.ct-name {
  position: absolute; inset: auto 0 0 0; padding: 18px 8px 6px; text-align: center;
  font-weight: 800; font-size: .86rem; line-height: 1.15; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6);
  background: linear-gradient(180deg, transparent, rgba(4, 10, 30, .88) 55%);
  border-bottom: 3px solid var(--cat);
}
.card.glass, .screen.hero .card {
  background: rgba(14, 26, 62, .62); border: 1px solid rgba(255, 255, 255, .16); color: #eef2ff;
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
  --ink: #eef2ff; --muted: #b6bfe0; --paper-2: rgba(255,255,255,.08); --line: rgba(255,255,255,.18);
}
.screen.hero .btn.primary {
  --b: linear-gradient(180deg, #ffe39a, #e9b949 60%, #c99432); --b2: #8a6420; --t: #1a1405; text-shadow: none;
}
.home-note { margin: 0; text-align: center; color: #b6bfe0; }
.home-foot { margin: 0; color: rgba(238, 242, 255, .55); font-size: .85rem; letter-spacing: .08em; }
@media (max-width: 520px) {
  .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .ct-name { font-size: .66rem; padding: 14px 3px 4px; }
  .screen.hero .logo p { letter-spacing: .08em; font-size: .82rem; }
  .screen.hero .logo p::before, .screen.hero .logo p::after { width: 18px; }
}
@media (max-width: 520px) {
  .cat-tile { aspect-ratio: 1 / 1; }
  .ct-name { font-size: .62rem; padding: 12px 2px 4px; }
}
/* כפתור השתקה: בטלפון בתוך שורת הסיבוב, כדי שלא יסתיר את היומן */
.mute-inline { display: none; border: 0; background: color-mix(in srgb, var(--sun) 30%, transparent); border-radius: 50%; width: 26px; height: 26px; font-size: .85rem; cursor: pointer; flex: none; }
@media (max-width: 520px) {
  .mute.in-game { display: none; }
  .center-panel.dock .mute-inline { display: grid; place-items: center; }
}
.screen.hero ~ .mute, .mute:not(.in-game) {
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); box-shadow: 0 6px 18px rgba(0,0,0,.35);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.toast.host-lost { background: #3b2a06; color: #ffe7a3; border: 1px solid #e9b949; }

/* מרכז הלוח: נופי ישראל מסביב ושטח קלף ריק באמצע. הלוגו באלכסון בתוך השטח הריק, מימין־למטה לשמאל־למעלה. */
.center-scene.photo { background-color: #f3e6c8; background-size: cover; background-position: center; }
.center-area > .logo {
  left: 50.5%; top: 51.5%; font-size: 9.2cqmin; letter-spacing: 0;
  color: #fff; -webkit-text-stroke: .075em #0b2a5c; paint-order: stroke fill;
  text-shadow: 0 .05em 0 #0b2a5c, 0 .12em .28em rgba(11, 42, 92, .45);
}
.center-area > .logo .l2 { color: #f2c14e; font-size: 1em; -webkit-text-stroke: .075em #0b2a5c; text-shadow: 0 .05em 0 #0b2a5c, 0 .12em .28em rgba(11, 42, 92, .45); }
@media (max-width: 520px) { .center-area > .logo { font-size: 9.2cqmin; } }
/* רשימות בחירה במסכי הפתיחה: רשימה כהה עם טקסט בהיר, כדי שכל האפשרויות יהיו קריאות */
.screen.hero select { color-scheme: dark; }
.screen.hero select option { background: #0e1a3e; color: #eef2ff; }
.screen.hero select option:disabled { color: #7d86ad; }
.screen.hero select option:checked { background: #e9b949; color: #1a1405; }

/* פרישה */
.pl .resign-btn { font-size: 0.72rem; padding: 3px 8px; color: #b42318; border: 1px solid #f3b4ae; background: #fff5f4; }
.pl .resign-btn.armed { background: #d92d20; color: #fff; border-color: #d92d20; }

/* אורכי משחק: חינם ופרימיום */
.seg.modes { flex-wrap: wrap; }
.seg.modes .tag { font-size: 0.68rem; padding: 1px 6px; border-radius: 999px; margin-inline-start: 4px; }
.seg.modes .tag.free { background: #dcfae6; color: #067647; }
.seg.modes .tag.prem { background: #fef0c7; color: #93370d; }
.seg.modes .btn.locked { opacity: 0.55; cursor: not-allowed; }

/* חיווי לשחקן שממתין: מה היריב עושה עכשיו */
.live { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.live .waiting { display: flex; align-items: center; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 0; font-weight: 600; color: var(--ink, #1d2939); line-height: 1.35; }
.live .waiting .av { font-size: 1.15em; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #f04438; box-shadow: 0 0 0 0 rgba(240, 68, 56, .6); animation: livePulse 1.4s infinite; flex: none; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(240, 68, 56, .55); } 70% { box-shadow: 0 0 0 8px rgba(240, 68, 56, 0); } 100% { box-shadow: 0 0 0 0 rgba(240, 68, 56, 0); } }
.live-feed { list-style: none; margin: 0; padding: 6px 8px; border-radius: 10px; background: rgba(15, 30, 60, .06); font-size: .78rem; text-align: start; max-height: 6.2em; overflow: hidden; }
.live-feed li { color: #475467; padding: 1px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-feed li.new { color: #101828; font-weight: 600; animation: liveIn .5s ease-out; }
@keyframes liveIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .live-dot, .live-feed li.new { animation: none; } }

/* כלי משחק מאוירים */
img.avi { width: 1.35em; height: 1.35em; border-radius: 50%; vertical-align: middle; object-fit: cover; display: inline-block; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.25)); }
.turn .av img.avi, .pl .av img.avi, .ln-who .av img.avi, .local-av img.avi, .token img.avi { width: 100%; height: 100%; }
.members .av { display: inline-grid; width: 30px; height: 30px; flex: none; }
.members .av img.avi { width: 100%; height: 100%; }
.avatars .avatar { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.avatars .avatar img.avi { width: 44px; height: 44px; }
.avatars .avatar .av-name { font-size: .62rem; line-height: 1.1; color: inherit; opacity: .85; white-space: nowrap; }
.local-av { display: inline-flex; width: 34px; height: 34px; flex: none; }
.ow img.avi { width: 1.25em; height: 1.25em; }

/* טבלת אלופים */
.leaders-card { max-width: 640px; width: 100%; }
.leaders-card h2 { margin: 0; text-align: center; }
.seg.tabs { display: flex; gap: 6px; justify-content: center; }
table.leaders { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.leaders th { font-size: .75rem; opacity: .75; font-weight: 600; text-align: start; padding: 6px 4px; border-bottom: 1px solid rgba(255,255,255,.18); }
table.leaders td { padding: 7px 4px; border-bottom: 1px solid rgba(255,255,255,.08); }
table.leaders td.rank { width: 2.2em; text-align: center; }
table.leaders td.who { display: flex; align-items: center; gap: 6px; }
table.leaders tr.me { background: rgba(232, 185, 74, .16); }
.center-text { text-align: center; }

.screen.hero .members li { color: #1b2340; }
.live, .live-feed { flex: none; }
.actions .live p.waiting { flex-basis: auto; }

/* ---------- של מי הנכס: מסגרת עבה בצבע הבעלים מעל התמונה ---------- */
.sq.owned::before { content: ""; position: absolute; inset: 0; border: 3px solid var(--own); border-radius: inherit; z-index: 3; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); }
.sq .ow { z-index: 4; }
.sq .ow img.avi { box-shadow: 0 0 0 2px var(--own); background: #fff; }
@media (max-width: 520px) {
  .sq.owned::before { border-width: 2.5px; }
  .sq .ow { font-size: 11px; top: auto; bottom: 0; inset-inline-start: 0; }
  .sq.side-b .ow { bottom: 0; }
}

/* ---------- כלי המשחק: גדולים יותר, וסימון "אני" באונליין ---------- */
.tokens { z-index: 6; }
.token.me { order: 9; width: 1.55em; height: 1.55em; box-shadow: 0 0 0 3px var(--pc), 0 0 0 5px #ffd34d, 0 3px 6px rgba(0,0,0,.4); z-index: 4; overflow: visible; position: relative; }
.token.me img.avi { border-radius: 50%; }
.token.me::after { content: "אני"; position: absolute; bottom: 100%; left: 50%; translate: -50% -3px; background: #ffd34d; color: #1b2340; font: 800 9px/1 var(--font-body, sans-serif); padding: 2px 4px; border-radius: 4px; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
@media (max-width: 520px) {
  .token { font-size: 13px; margin: 0 -1px; }
  .token.me::after { font-size: 7.5px; padding: 1px 3px; }
}

/* ---------- כרטיס שחקן: לחיצה פותחת את הנכסים, ושורת מיקום ---------- */
.pl-open { display: flex; gap: 10px; align-items: center; flex: 1; min-width: 0; background: none; border: 0; padding: 0; margin: 0; color: inherit; font: inherit; text-align: start; cursor: pointer; border-radius: 10px; }
.pl-open:focus-visible { outline: 3px solid var(--pc); outline-offset: 2px; }
.pl-open:hover .pl-props { text-decoration: underline; }
.pl-where { font-size: .8rem; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl.is-me { box-shadow: inset 0 0 0 2px #ffd34d; }
.pl.is-me.turn { box-shadow: 0 0 0 2px var(--pc), inset 0 0 0 2px #ffd34d, 0 4px 14px color-mix(in srgb, var(--pc) 40%, transparent); }
@media (max-width: 520px) {
  .players { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 6px; }
  .pl { padding: 6px 7px; gap: 4px 6px; border-inline-start-width: 4px; align-items: flex-start; }
  .pl.turn { transform: none; }
  .pl-open { flex-basis: 100%; gap: 6px; align-items: flex-start; }
  .pl .av { width: 30px; height: 30px; box-shadow: 0 0 0 2px var(--pc); }
  .pl-name { font-size: .85rem; line-height: 1.25; }
  .pl-name .tag { font-size: .62rem; padding: 0 4px; }
  .pl-stats { font-size: .72rem; gap: 0 6px; }
  .pl-stats strong { font-size: .8rem; flex-basis: 100%; }
  .pl-hints { display: none; }
  .pl-where { font-size: .68rem; }
  .pl-worth { display: none; }
  .pl { position: relative; }
  .pl-open { padding-inline-end: 0; }
  .pl .trade-btn, .pl .resign-btn { position: absolute; top: 5px; inset-inline-end: 5px; font-size: 0; padding: 0; width: 30px; height: 26px; border-radius: 9px; }
  .pl .trade-btn::before { content: "🤝"; font-size: .95rem; }
  .pl .resign-btn::before { content: "🏳️"; font-size: .95rem; }
  .pl .resign-btn.armed { width: auto; font-size: .62rem; padding: 0 6px; inset-inline: 5px; }
  .pl .resign-btn.armed::before { content: none; }
  .pl-name { padding-inline-end: 30px; }
}

/* ---------- חלון הנכסים של שחקן ---------- */
.pf-overlay { z-index: 25; align-items: start; overflow: auto; }
.sheet.portfolio {
  background: var(--paper); border-radius: 22px; padding: 16px; width: min(100%, 720px); margin: auto; display: grid; gap: 14px; position: relative; text-align: start;
  border-top: 8px solid var(--pc); box-shadow: 0 30px 60px rgba(0,0,0,.4); animation: fade-in .2s;
}
.sheet.portfolio .close { position: absolute; top: 10px; inset-inline-end: 10px; }
.pf-head { display: flex; gap: 12px; align-items: center; padding-inline-end: 36px; }
.pf-head .av { width: 54px; height: 54px; flex: none; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--pc); display: grid; place-items: center; }
.pf-head .av img.avi { width: 100%; height: 100%; }
.pf-head h3 { margin: 0; font-size: 1.3rem; }
.pf-sum { margin: 2px 0 0; font-size: .85rem; color: var(--muted); }
.pf-sum strong { color: var(--good); }
.pf-cat { border-radius: 16px; padding: 10px; background: color-mix(in srgb, var(--cat) 10%, var(--paper)); border: 2px solid color-mix(in srgb, var(--cat) 45%, transparent); }
.pf-cat h4 { margin: 0 0 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 1rem; }
.pf-count { background: var(--cat); color: #fff; border-radius: 99px; padding: 0 8px; font-size: .8rem; font-variant-numeric: tabular-nums; }
.pf-full { font-size: .75rem; font-weight: 700; color: #067647; background: #dcfae6; border-radius: 99px; padding: 1px 8px; }
.pf-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.pf-card {
  display: grid; grid-template-rows: auto auto auto; text-align: start; padding: 0; border: 0; border-radius: 12px; overflow: hidden; cursor: pointer;
  background: var(--paper); color: inherit; font: inherit; box-shadow: 0 0 0 2px var(--cat), 0 3px 8px rgba(0,0,0,.15); min-width: 0;
}
.pf-card .pf-img { aspect-ratio: 16 / 10; background: var(--img) center / cover, var(--cat); }
.pf-card .pf-name { font-weight: 800; font-size: .85rem; padding: 5px 7px 0; line-height: 1.2; }
.pf-card .pf-meta { font-size: .72rem; color: var(--muted); padding: 2px 7px 6px; }
.pf-card .pf-lv { color: #e9a400; letter-spacing: -.05em; }
.pf-card.missing { opacity: .55; box-shadow: 0 0 0 2px color-mix(in srgb, var(--cat) 40%, transparent); filter: grayscale(.6); }
.pf-card.missing[style*="--own"] { box-shadow: 0 0 0 2px var(--own); }
.pf-card:focus-visible { outline: 3px solid var(--pc); outline-offset: 2px; }
.pf-empty { text-align: center; padding: 18px 8px; }
@media (max-width: 520px) {
  .sheet.portfolio { padding: 12px; gap: 10px; border-radius: 18px; }
  .pf-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-head .av { width: 44px; height: 44px; }
}

/* פרימיום פעיל */
.premium-on { margin: 0; padding: 6px 14px; border-radius: 99px; background: linear-gradient(180deg, #ffe39a, #e9b949); color: #3a2400; font-weight: 800; font-size: .85rem; text-align: center; box-shadow: 0 4px 14px rgba(233, 185, 73, .35); }

/* ---------- v17: סיכות אופקיות, בעלות ברורה ולוח רגוע יותר ---------- */
/* נכס פנוי: תמונה רגועה, כדי שהנכסים שנקנו יבלטו */
.sq.k-property.free .band { filter: saturate(.35) brightness(1.08); opacity: .8; }
/* נכס שנקנה: מסגרת עבה בצבע הבעלים ותגית שם בצבע מלא; בלי היהלום והאווטאר הקטן */
.sq.owned::after, .sq .ow { display: none; }
.sq.owned::before { border-width: 3.5px; box-shadow: inset 0 0 0 1.5px #fff; }
.sq.owned.mine::before { border-color: var(--own); box-shadow: inset 0 0 0 1.5px #fff, 0 0 0 2px #ffd34d; }
.own-tag {
  position: absolute; z-index: 4; top: 0; inset-inline: 0; margin: 0 auto; width: max-content; max-width: 100%;
  background: var(--own); color: #fff; font: 800 .95em/1.25 var(--font-body, sans-serif); padding: 0 .45em; border-radius: 0 0 6px 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 1px 3px rgba(0,0,0,.35); letter-spacing: -.01em;
}
.own-tag.mine { background: #ffd34d; color: #1b2340; box-shadow: 0 0 0 1.5px var(--own), 0 1px 3px rgba(0,0,0,.35); }
.sq.side-t .own-tag { top: auto; bottom: 0; border-radius: 6px 6px 0 0; }
/* סיכה אופקית: שכבה מעל הלוח, תמונה עגולה ושם, צבע השחקן כמסגרת, והחוד על מרכז המשבצת */
.board { position: relative; }
.pin-layer { position: absolute; inset: 0; pointer-events: none; z-index: 8; direction: rtl; }
.pin {
  position: absolute; display: inline-flex; align-items: center; gap: .3em; height: 1.75em; padding: 0 .55em 0 .15em;
  font-size: clamp(10px, 1.05vw, 14px); background: #fff; color: #1b2340; border-radius: 99px; white-space: nowrap;
  translate: -50% calc(-100% - .45em - var(--k, 0) * 1.95em); transition: left .14s linear, top .14s linear;
  box-shadow: 0 0 0 2.5px var(--pc), 0 4px 8px rgba(0,0,0,.45);
}
.pin::after { content: ""; position: absolute; top: 100%; left: calc(50% + var(--tip, 0px)); translate: -50% 1px; border: .42em solid transparent; border-top-color: var(--pc); border-bottom: 0; }
.pin.stacked::after { display: none; }
.pin-av { width: 1.45em; height: 1.45em; border-radius: 50%; overflow: hidden; flex: none; display: grid; place-items: center; background: color-mix(in srgb, var(--pc) 18%, #fff); box-shadow: 0 0 0 1.5px var(--pc); }
.pin-av img.avi { width: 100%; height: 100%; }
.pin-nm { font-weight: 800; line-height: 1; }
.pin.me { background: #ffd34d; box-shadow: 0 0 0 2.5px var(--pc), 0 0 0 4px #fff, 0 4px 10px rgba(0,0,0,.5); z-index: 2; }
.pin.active { z-index: 3; animation: pin-bob 1.1s ease-in-out infinite; }
@keyframes pin-bob { 0%, 100% { margin-top: 0; } 50% { margin-top: -.35em; } }
.pin-more { position: absolute; top: -.55em; inset-inline-start: -.7em; font: 800 .72em/1 var(--font-body, sans-serif); background: #1b2340; color: #fff; border-radius: 99px; padding: .2em .4em; box-shadow: 0 0 0 1.5px #fff; }
@media (max-width: 520px) {
  .own-tag { font-size: 6px; padding: 0 2px; border-radius: 0 0 3px 3px; }
  .sq.owned .pr { display: none; }
  .pin { font-size: 9px; gap: 2px; padding: 0 4px 0 1px; }
}
@media (prefers-reduced-motion: reduce) { .pin.active { animation: none; } }

/* ---------- מסך סיום: פירוט השווי ---------- */
.worth-rules { text-align: start; margin: 6px 0; padding-inline-start: 18px; line-height: 1.6; }
.worth-wrap { overflow-x: auto; max-width: 100%; }
table.worth { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .92rem; }
table.worth th, table.worth td { padding: 6px 5px; border-bottom: 1px solid rgba(0,0,0,.08); text-align: center; white-space: nowrap; }
table.worth thead th { font-size: .78rem; color: var(--muted); font-weight: 700; }
table.worth tbody th { text-align: start; border-inline-start: 4px solid var(--pc); font-weight: 800; }
table.worth .av img.avi, table.worth img.avi { width: 1.3em; height: 1.3em; vertical-align: middle; }
table.worth small { color: var(--muted); }
/* סיכום התור הקודם של יריב */
.turn-summary { display: flex; align-items: center; gap: 6px; margin: 4px auto 0; max-width: 100%; padding: 4px 10px; border-radius: 10px; font-size: .82rem; line-height: 1.3; background: color-mix(in srgb, var(--pc) 10%, #fff); border-inline-start: 4px solid var(--pc); color: #1b2340; text-align: start; }
.turn-summary .av { width: 1.5em; height: 1.5em; flex: none; display: inline-grid; }
.turn-summary .av img.avi { width: 100%; height: 100%; }
/* גרף השווי במסך הסיום */
.worth-chart { margin: 8px 0 4px; }
.worth-chart figcaption { font-weight: 800; font-size: .95rem; margin-bottom: 4px; text-align: center; display: flex; gap: 6px; justify-content: center; }
.worth-chart svg { width: 100%; height: auto; direction: ltr; overflow: visible; }
.worth-chart .wc-tick line { stroke: rgba(27,35,64,.12); stroke-width: 1; }
.worth-chart text { font: 600 9px var(--font-body, sans-serif); fill: #5b6280; }
.worth-chart .wc-name { fill: #1b2340; font-weight: 800; direction: ltr; unicode-bidi: isolate; }
.worth-chart .wc-line { fill: none; stroke: var(--pc); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.worth-chart .wc-key { fill: var(--pc); }
.worth-chart .wc-hit { fill: transparent; }
.worth-chart .wc-hit:hover { fill: var(--pc); stroke: #fff; stroke-width: 2; r: 4; }

/* ---------- הגדרות תצוגה ---------- */
.view-btn {
  position: fixed; top: 12px; inset-inline-start: 66px; z-index: 60; width: 46px; height: 46px; border-radius: 50%;
  border: 3px solid #fff; background: #fff; color: #1b2340; font: 800 1rem/1 var(--font-body, sans-serif); cursor: pointer; box-shadow: var(--shadow);
}
.view-btn.in-game { top: auto; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); inset-inline-start: auto; inset-inline-end: 68px; }
.view-inline { font: 800 .72rem/1 var(--font-body, sans-serif); color: #1b2340; }
@media (max-width: 520px) { .view-btn.in-game { display: none; } }
.view-pop {
  position: fixed; z-index: 70; inset-inline-start: 12px; top: 66px; width: min(300px, calc(100vw - 24px)); background: #fff; color: #1b2340;
  border-radius: 14px; padding: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.4); display: grid; gap: 10px;
}
.view-pop h3 { margin: 0; font-size: 1.05rem; }
.view-row { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.view-row input { width: 22px; height: 22px; margin-top: 2px; flex: none; accent-color: #1d4ed8; }
.view-row small { display: block; color: #5d6385; font-size: .8rem; }

/* טקסט גדול: כל מה שמבוסס rem גדל, ובלוח – שמות, סיכות ותגיות */
html.big-text { font-size: 18.5px; }
html.big-text .sq { font-size: clamp(7.5px, .95vw, 12.5px); }
html.big-text .pin { font-size: clamp(11px, 1.2vw, 16px); }
html.big-text .own-tag { font-size: 1.05em; }
@media (max-width: 520px) {
  html.big-text .sq.k-property .nm { font-size: 6.3px; }
  html.big-text .sq.k-property .pr { font-size: 7.5px; }
  html.big-text .pin { font-size: 10.5px; }
  html.big-text .own-tag { font-size: 7px; }
}

/* ניגודיות גבוהה: טקסט כהה, קווי מתאר ברורים, בלי דהייה של נכסים פנויים */
html.high-contrast { --muted: #2a3050; }
html.high-contrast .sq { box-shadow: 0 0 0 1.5px #000; }
html.high-contrast .sq.k-property.free .band { filter: none; opacity: 1; }
html.high-contrast .sq.k-property .nm { background: #000; text-shadow: none; }
html.high-contrast .btn { box-shadow: 0 0 0 2px #000; }
html.high-contrast .opt { box-shadow: 0 0 0 2px #000; }
html.high-contrast .pin { box-shadow: 0 0 0 3px var(--pc), 0 0 0 4.5px #000; }
html.high-contrast .own-tag { box-shadow: 0 0 0 1.5px #000; }
html.high-contrast .panel, html.high-contrast .card, html.high-contrast .modal { box-shadow: 0 0 0 2px #000; }
.screen.hero ~ .view-btn, .view-btn:not(.in-game) { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* הדרכה במשחק הראשון */
.tut-overlay { z-index: 65; }
.modal.tutorial { max-width: 420px; text-align: center; display: grid; gap: 8px; }
.modal.tutorial p { line-height: 1.55; margin: 0; }
.tut-step { font-size: .8rem; color: var(--muted); font-weight: 700; }
.tut-dots { display: flex; gap: 6px; justify-content: center; }
.tut-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(27,35,64,.2); }
.tut-dots i.on { background: #1d4ed8; width: 20px; border-radius: 4px; }
.tut-skip { justify-content: center; align-items: center; font-weight: 700; }
/* מצלמה בטלפון: הלוח מתקרב לשחקן שזז */
@media (max-width: 520px) {
  .board-wrap.cam { overflow: hidden; border-radius: 20px; }
  .board-wrap .board { transition: transform .35s ease, transform-origin .15s linear; }
}
@media (prefers-reduced-motion: reduce) { .board-wrap .board { transition: none; } }

/* תגובות מהירות באונליין */
.react-bar { position: fixed; z-index: 40; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); inset-inline-start: 50%; translate: -50% 0; display: flex; gap: 2px; padding: 3px 6px; background: rgba(255,255,255,.92); border-radius: 99px; box-shadow: 0 4px 14px rgba(0,0,0,.3); direction: ltr; }
.react-bar button { border: 0; background: none; font-size: 1.35rem; line-height: 1; padding: 5px 6px; border-radius: 50%; cursor: pointer; transition: transform .1s; }
.react-bar button:hover { transform: scale(1.25); }
.react-bar button:active { transform: scale(.9); }
.react-layer { position: fixed; inset: 0; pointer-events: none; z-index: 45; overflow: hidden; }
.react-pop { position: absolute; bottom: 70px; left: var(--x); display: grid; justify-items: center; animation: react-up 2.5s ease-out forwards; }
.react-pop b { font-size: 2.6rem; filter: drop-shadow(0 3px 4px rgba(0,0,0,.35)); }
.react-pop small { background: rgba(0,0,0,.65); color: #fff; font-weight: 700; padding: 1px 7px; border-radius: 99px; font-size: .72rem; }
@keyframes react-up { 0% { transform: translateY(0) scale(.5); opacity: 0; } 12% { opacity: 1; transform: translateY(-20px) scale(1.1); } 100% { transform: translateY(-38vh) scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .react-pop { animation: none; bottom: 40%; } }

/* טלפון: שורת התגובות מוגבהת כדי שלא תוסתר על ידי תגית האחסון בתחתית המסך */
@media (max-width: 520px) { .react-bar { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); } .react-pop { bottom: 120px; } }

/* תגובות מהירות: כפתור קטן שפותח שורה רק בלחיצה, כדי לא להסתיר את המשחק */
.react-fab { position: fixed; z-index: 41; inset-inline-start: 10px; bottom: 10px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); box-shadow: 0 3px 10px rgba(0,0,0,.3); font-size: 1.25rem; line-height: 1; cursor: pointer; opacity: .85; }
.react-bar { inset-inline-start: 58px; translate: 0 0; bottom: 10px; max-width: calc(100vw - 70px); }
[dir=rtl] .react-bar { translate: 0 0; }
.log summary { display: flex; flex-direction: column; gap: 2px; }
.log-last { display: none; font-size: .78rem; color: var(--muted); font-weight: 600; }

/* טלפון: מסך מותאם לנייד. שחקנים בשורה קומפקטית, יומן מקופל, בלי מקום מבוזבז */
@media (max-width: 520px) {
  .react-fab { bottom: calc(60px + env(safe-area-inset-bottom, 0px)); width: 36px; height: 36px; font-size: 1.1rem; }
  .react-bar { bottom: calc(60px + env(safe-area-inset-bottom, 0px)); inset-inline-start: 52px; }
  .log:not([open]) .log-last { display: block; }
  .log { padding: 8px 12px; }
  .log h3 { font-size: .9rem; margin: 0; }
  .players { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; }
  .pl { padding: 4px 5px 4px 38px; gap: 2px 4px; min-height: 46px; align-items: center; }
  .pl .av { width: 26px; height: 26px; }
  .pl-name { font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pl-name .tag { display: none; }
  .pl-stats { font-size: .66rem; }
  .pl-stats strong { font-size: .74rem; }
  .pl-where { display: none; }
}

/* ---------- טלפון: מצלמה תלת־ממדית (גרסה 18) ---------- */
@media (max-width: 520px) {
  .game.phone3d { position: fixed; inset: 0; padding: 0; display: block; overflow: hidden; background: #07102f; max-width: none; margin: 0; }
  .game.phone3d .board-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
  .game.phone3d .board-wrap.scene3d { perspective: 640px; perspective-origin: 50% 30%; align-items: flex-start; }
  .game.phone3d .board { width: min(calc(100vw - 16px), calc(100dvh - 300px)); max-width: none; flex: none; margin: 0; transition: transform .6s ease, transform-origin .6s ease; }
  .game.phone3d .board-wrap.scene3d::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5; background: linear-gradient(#07102f 0, rgba(7,16,47,0) 24%, rgba(7,16,47,0) 62%, #07102f 96%); }
  .game.phone3d .center-panel.dock { position: absolute; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); margin: 0; width: auto; z-index: 12; }
  .game.phone3d .hud { position: absolute; z-index: 12; top: 0; left: 0; right: 0; display: flex; justify-content: space-around; gap: 4px; padding: 10px 6px 24px; background: linear-gradient(#050a23 55%, rgba(5,10,35,0)); }
  .hud-p { display: grid; justify-items: center; gap: 1px; background: none; border: 0; color: #fff; font: inherit; padding: 0; min-width: 0; flex: 1; }
  .hud-p .av { width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 0 0 3px var(--pc); background: #fff; display: grid; place-items: center; overflow: hidden; }
  .hud-p.act .av { box-shadow: 0 0 0 3px var(--pc), 0 0 0 6px #ffd34d, 0 0 16px #ffd34d; }
  .hud-p b { font-size: .8rem; font-weight: 800; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hud-p > span:last-child { font-size: .72rem; color: #cdd6f6; font-weight: 700; }
  .hud-p.out { opacity: .4; }
  .game.phone3d .fab-col { position: absolute; z-index: 13; top: 112px; inset-inline-end: 10px; display: grid; gap: 8px; }
  .fab-col button { width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255,255,255,.93); font-size: 1.35rem; box-shadow: 0 3px 10px rgba(0,0,0,.4); cursor: pointer; }
  .fab-col button.on { background: #ffd34d; }
  .game.phone3d .side { display: none; }
  .game.phone3d .side.open { display: block; position: absolute; z-index: 30; left: 0; right: 0; bottom: 0; top: 12%; overflow: auto; background: #eef1f8; border-radius: 24px 24px 0 0; padding: 48px 10px 90px; box-shadow: 0 -10px 40px rgba(0,0,0,.55); }
  .game.phone3d .side.open.half { top: 46%; }
  .sheet-x { position: absolute; top: 8px; inset-inline-end: 10px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: #dfe4f1; font-size: 1.1rem; z-index: 2; cursor: pointer; }
  .game.phone3d ~ .view-btn, .game.phone3d ~ .mute.in-game { display: none; }
  .react-fab { bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
  .react-bar { bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
}