/* Province – עיצוב: לבן, מינימליסטי, אפור בהיר + שני צבעי שחקנים */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --ink: #1b1e24;
  --muted: #565c68;
  --faint: #a8aeb9;
  --cell: #a8aeb9;       /* עיגולי הלוח והנהרות */
  --river: #a8aeb9;
  --cell-deep: #3d424c;   /* העיגול האפור שמתחת לעיגול מרחף */
  --p0-tint: #baedd7;      /* רקע משבצת בפרובינציה שנשלטת */
  --p1-tint: #bcddfc;
  --p0-deep: #81deb6;     /* העיגול הצבוע שמתחת לבסיס מרחף */
  --p1-deep: #85c2f9;
  --die: #5a606c;
  --p0: #34c98a;
  --p1: #3a9cf5;
  --p0-soft: #d6f4e8;    /* עיגול ריק בפרובינציה שנשלטת – גוון דהוי של השחקן */
  --p1-soft: #d8ebfd;
  --font: "Heebo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--ink); height: 100%; overflow: hidden; }
body { font-family: var(--font); min-height: 100vh; min-height: 100dvh; -webkit-text-size-adjust: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
.btn, .link, .seg button, .modal h2 { text-transform: uppercase; letter-spacing: .06em; }
[hidden] { display: none !important; }

#app {
  position: relative; max-width: 520px; margin: 0 auto; height: 100dvh;
  padding: env(safe-area-inset-top) 5vw env(safe-area-inset-bottom);
  display: flex; flex-direction: column; justify-content: space-evenly; gap: 0;
  --pl-h: 102px; --board-gap: 16px; --dock-h: 58px;
}

/* ---------- שחקנים ---------- */
.pl { display: flex; flex-direction: column; gap: 8px; padding: 6px 2px; flex: none; height: var(--pl-h); border: 0 solid transparent; opacity: .66; transition: opacity .25s, border-color .25s; }
.pl.active { opacity: 1; }
.pl .head { display: flex; align-items: center; gap: 9px; }
.pl .swatch { width: 14px; height: 14px; border-radius: 50%; background: var(--c); flex: none; }
.pl .nm { font-weight: 600; font-size: 18px; letter-spacing: .01em; }
.pl .tag { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pl .line { display: grid; grid-template-columns: 18px 24px 1fr; align-items: center; gap: 6px; min-height: 22px; min-width: 0; }
.pl .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.pl .lab { font-size: 12px; color: var(--muted); }
.pl .ic { width: 18px; height: 18px; color: var(--muted); }
.pl .num { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: left; white-space: nowrap; }
.pl .num small { font-size: 11px; font-weight: 400; color: var(--muted); }
.pl .prov { display: flex; gap: 4px; }
.pl .prov i { width: 13px; height: 13px; border-radius: 4px; background: var(--cell); transition: background .25s; }
.pl .prov i.on { background: var(--c); }
.pl .prov.many { gap: 2px; }
.pl .prov.many i { width: 11px; height: 11px; border-radius: 3px; }
.pl .sbar { height: 10px; border-radius: 5px; overflow: hidden; display: flex; background: transparent; }
.pl .sbar i { display: block; height: 100%; transition: width .3s; }
.pl .sbar .r { background: var(--c); }
.pl .sbar .b { background: color-mix(in srgb, var(--c) 32%, #fff); }
.pl .sbar .d { background: #4a505b; }
.pl .ticks { display: flex; gap: var(--tick-gap, 4px); align-items: center; }
.pl .ticks i { width: var(--tick-w, 5px); height: var(--tick-h, 22px); border-radius: 999px; background: var(--cell); flex: none; transition: background .25s; }
.pl .ticks i.on { background: var(--c); }

/* ---------- לוח ---------- */
#boardWrap { flex: none; aspect-ratio: 1; margin: var(--board-gap) 0; width: min(100%, calc(100dvh - 15vw - 2 * var(--board-gap) - 2 * var(--pl-h) - var(--dock-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom))); align-self: center; }
#board { width: 100%; height: 100%; display: block; overflow: visible; direction: ltr; touch-action: none; user-select: none; -webkit-user-select: none; }
.cell { fill: #a8aeb9; transition: fill .3s; }
.cell.deep { fill: #3d424c; }
.cell.c0 { fill: var(--p0); }
.cell.c1 { fill: var(--p1); }
.cell.c0.deep { fill: var(--p0); }
.cell.c1.deep { fill: var(--p1); }
.ring-float { fill: none; stroke: #5a606c; stroke-width: 2.5; stroke-dasharray: 5 6; stroke-linecap: round; transform-box: fill-box; transform-origin: center; animation: spin 9s linear infinite; pointer-events: none; }
.base.p0 { fill: var(--p0); }
.base.p1 { fill: var(--p1); }
.base.float { stroke: #fff; stroke-width: 1.6; }
.base.p0.dest { fill: #299d6c; }
.base.p1.dest { fill: #2d7abf; }
.cnt { fill: #fff; font: 600 18px var(--font); text-anchor: middle; dominant-baseline: central; pointer-events: none; font-variant-numeric: tabular-nums; }
.river { stroke: var(--river); stroke-width: 12; stroke-linecap: round; }
.bridge { stroke-linecap: round; }
.ring-roll { fill: none; stroke-width: 2.5; stroke-dasharray: 5 6; stroke-linecap: round; transform-box: fill-box; transform-origin: center; animation: spin 9s linear infinite; pointer-events: none; }
.drag-line { stroke-width: 6; stroke-linecap: round; opacity: .35; pointer-events: none; }
.drag-dot { opacity: .5; pointer-events: none; }
.ring-dest { fill: none; stroke-width: 3; pointer-events: none; }
.hover-ring { fill: none; stroke-width: 3; pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- דוק ---------- */
#dock { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; flex: none; height: var(--dock-h); padding: 0; }
.pl .dice { display: inline-flex; gap: 5px; margin-left: 8px; direction: ltr; }
.die { width: 24px; height: 24px; border-radius: 7px; background: var(--die); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.die.roll { animation: tumble .5s cubic-bezier(.2, .8, .3, 1); }
@keyframes tumble { 0% { transform: rotate(-160deg) scale(.4); opacity: 0; } 100% { transform: none; opacity: 1; } }
.dice-empty { color: var(--faint); font-size: 13px; align-self: center; }

#msg { text-align: center; font-size: 15px; line-height: 1.3; color: var(--ink); }
#msg:empty { display: none; }
#msg .sub { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
#controls .btn { min-height: 40px; padding: 8px 22px; font-size: 14px; }
#controls { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
#controls .row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; width: 100%; }

.btn {
  border: 0; border-radius: 999px; padding: 12px 26px; min-height: 46px; font-weight: 600; font-size: 16px;
  background: var(--ink); color: #fff; transition: transform .1s, opacity .2s;
}
.btn:active { transform: scale(.97); }
.btn.soft { background: var(--cell); color: #fff; }
.btn.ghost { background: transparent; color: var(--muted); }
.btn.wide { min-width: 200px; }
.btn.sm { padding: 8px 18px; min-height: 38px; font-size: 14px; }
.btn[disabled] { opacity: .35; }
.link { border: 0; background: none; color: var(--muted); font-size: 13px; padding: 6px 12px; }
.link[disabled] { opacity: .35; }

/* חלון בחירת כמות */
.sheet { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sheet .cap { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sheet .title { font-weight: 600; }
.sheet .note { font-size: 12px; color: var(--muted); min-height: 16px; text-align: center; }
.srow { direction: ltr; display: flex; align-items: center; gap: 6px; width: 100%; }
.srow .num { font-size: 22px; font-weight: 600; min-width: 30px; text-align: center; font-variant-numeric: tabular-nums; line-height: 1; }
.srow .pm { width: 34px; height: 34px; flex: none; border-radius: 50%; border: 0; background: var(--cell); color: #fff; font-size: 20px; line-height: 1; padding: 0; }
.srow .pm:active { background: var(--faint); }
.srow .pm.x { background: transparent; color: var(--muted); }
.srow .pm.ok { background: var(--ink); color: #fff; }
.sheet.fixed .pm:not(.x):not(.ok), .sheet.fixed input[type=range] { display: none; }
.sheet.fixed .srow { justify-content: center; gap: 22px; }
.sheet .seg.mini { width: min(260px, 100%); }
.sheet input[type=range] { -webkit-appearance: none; appearance: none; background: transparent; height: 36px; margin: 0; touch-action: pan-y; cursor: pointer; --p: 100%; }
.sheet input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 8px; background: linear-gradient(to right, var(--ink) var(--p), var(--cell) var(--p)); }
.sheet input[type=range]::-moz-range-track { height: 8px; border-radius: 8px; background: var(--cell); }
.sheet input[type=range]::-moz-range-progress { height: 8px; border-radius: 8px; background: var(--ink); }
.sheet input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -11px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 1px 6px rgba(20,25,40,.4), 0 0 0 1px rgba(20,25,40,.08); }
.sheet input[type=range]::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 1px 6px rgba(20,25,40,.4); }
.sheet input[type=range] { flex: 1; min-width: 0; direction: ltr; }
.sheet .quick { display: flex; gap: 6px; }

#menuBtn { position: absolute; top: calc(max(5vw, env(safe-area-inset-top)) - 10px); right: calc(5vw - 10px); z-index: 6; width: 40px; height: 40px; border: 0; background: none; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0; }
#menuBtn i { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--ink); }
#menuBtn:active { background: var(--cell); }
#bar { position: absolute; top: calc(max(5vw, env(safe-area-inset-top)) + 32px); right: 5vw; z-index: 6; display: none; flex-direction: column; align-items: stretch; min-width: 150px; padding: 6px; background: #fff; border-radius: 16px; box-shadow: 0 8px 28px rgba(20,25,40,.18), 0 0 0 1px rgba(20,25,40,.06); }
#bar.open { display: flex; }
#bar .link { text-align: left; padding: 12px 14px; font-size: 14px; color: var(--ink); }
#logBox { position: fixed; left: 5vw; right: 5vw; bottom: 5vw; max-height: 40vh; overflow: auto; z-index: 5; background: #fff; border: 1px solid var(--cell); border-radius: 12px; box-shadow: 0 8px 28px rgba(20,25,40,.16); padding: 8px 12px; font-size: 13px; color: var(--muted); }
#logBox div { padding: 3px 0; }

/* חלונות */
.overlay { position: fixed; inset: 0; background: rgba(255,255,255,.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: grid; place-items: center; z-index: 10; padding: 16px; }
.modal { background: #fff; border-radius: 22px; padding: 24px; width: min(360px, 100%); display: flex; flex-direction: column; gap: 14px; box-shadow: 0 12px 40px rgba(20,25,40,.16); text-align: center; }
.modal h2 { margin: 0; font-size: 24px; font-weight: 600; }
.modal .lbl { font-size: 12px; color: var(--muted); margin-bottom: 6px; text-align: start; }
.modal-actions { display: flex; gap: 8px; justify-content: center; margin-top: 4px; }
.modal-actions .btn { flex: 1; padding-inline: 14px; }
.seg { display: flex; background: var(--cell); border-radius: 999px; padding: 3px; gap: 2px; }
.seg button { flex: 1; border: 0; background: transparent; border-radius: 999px; padding: 9px 6px; font-size: 14px; font-weight: 500; color: #fff; transition: background .2s, color .2s; }
.seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(20,25,40,.14); }
.rule-note { font-size: 12px; color: var(--muted); line-height: 1.4; margin-top: -4px; }
#grpBoardWrap, #grpWatchWrap, #grpSideWrap, #grpLevelWrap { display: flex; flex-direction: column; }
#grpWatchWrap > .seg { margin-bottom: 10px; }

/* ---------- טוטוריאל ---------- */
#coach { position: fixed; z-index: 5; background: #fff; border-radius: 16px; box-shadow: 0 6px 26px rgba(20,25,40,.18), 0 0 0 1px rgba(20,25,40,.07); padding: 9px 14px 10px; overflow: auto; display: flex; flex-direction: column; gap: 3px; }
#coach[hidden] { display: none; }
.coach-top { display: flex; align-items: center; justify-content: space-between; min-height: 26px; }
.coach-actions { display: flex; align-items: center; gap: 6px; }
#coachStep { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
#coachExit { padding: 2px 6px; font-size: 11px; }
#coach h3 { margin: 0; font-size: 16px; font-weight: 600; }
#coachBody { font-size: 13px; line-height: 1.36; color: var(--ink); }
#coachBody b { font-weight: 600; }
#coachNudge { font-size: 12.5px; font-weight: 600; color: var(--p0); min-height: 0; }
#coachNudge:empty { display: none; }
#coachFoot:empty { display: none; }
#coachFoot .btn { min-height: 28px; padding: 4px 14px; font-size: 12px; }
#coach.shake { animation: shake .35s; }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.guide-halo, .guide-ring { pointer-events: none; transform-box: fill-box; transform-origin: center; animation: gpulse 1.7s ease-in-out infinite; }
.guide-halo { fill: rgba(52,201,138,.16); stroke: rgba(52,201,138,.5); stroke-width: 1.5; }
.guide-ring { fill: none; stroke: rgba(52,201,138,.7); stroke-width: 2; }
@keyframes gpulse { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
.guide-n { fill: #34c98a; font: 700 11px var(--font); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.guide-line { stroke: rgba(52,201,138,.4); stroke-width: 2; stroke-dasharray: 1 7; stroke-linecap: round; pointer-events: none; }
.btn.guide, .pm.guide { animation: bpulse 1.3s ease-in-out infinite; }
@keyframes bpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(52,201,138,.4); } 50% { box-shadow: 0 0 0 8px rgba(52,201,138,0); } }
#winText { text-align: left; font-size: 13.5px; line-height: 1.4; color: var(--ink); }
#winText ul { margin: 6px 0 0; padding-left: 18px; }
#winText li { margin: 3px 0; }
#tutLink { align-self: center; }
#coach.tight { padding: 6px 13px 7px; gap: 2px; }
#coach.tight .coach-top { min-height: 22px; }
#coach.tight h3 { font-size: 15px; }
#coach.tight #coachBody { font-size: 12px; line-height: 1.3; }
.axis { fill: #a8aeb9; font: 700 12px var(--font); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.axis.a0 { fill: #34c98a; }
.axis.a1 { fill: #3a9cf5; }

/* ---------- לובי ---------- */
.screen { position: fixed; inset: 0; z-index: 8; background: linear-gradient(#f7f8fa, #fff 38%); overflow: hidden; display: flex; flex-direction: column; padding: max(5vw, env(safe-area-inset-top)) 5vw calc(5vw + env(safe-area-inset-bottom)); }
.screen[hidden] { display: none; }
.lb-online { flex: none; align-self: center; display: flex; align-items: center; gap: 8px; padding: 7px 15px 7px 13px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px #eceef2, 0 4px 14px -8px rgba(20,25,40,.2); color: var(--p0); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lb-online.hit { animation: lbhit .9s ease-out; }
@keyframes lbhit { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(52,201,138,.6), 0 0 0 1px #eceef2; } 30% { transform: scale(1.18); } 100% { transform: scale(1); box-shadow: 0 0 0 14px rgba(52,201,138,0), 0 0 0 1px #eceef2; } }
.lb-mid { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; align-self: center; width: min(588px, calc(100% + 28px)); padding: 22px 14px 46px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -ms-overflow-style: none; -webkit-mask-image: linear-gradient(transparent, #000 22px, #000 calc(100% - 46px), transparent); mask-image: linear-gradient(transparent, #000 22px, #000 calc(100% - 46px), transparent); }
.lb-mid::-webkit-scrollbar { display: none; width: 0; height: 0; }
.lb-mid > .lb-list { margin: auto 0; }   /* מרכוז אנכי כשהרשימה קצרה, גלילה כשהיא ארוכה */
.lb-more { align-self: center; margin-top: 6px; border: 0; background: none; color: var(--muted); font-size: 13px; font-weight: 500; padding: 10px 18px; }
.lb-list { display: flex; flex-direction: column; gap: 8px; }
.lb-row { display: flex; align-items: center; gap: 14px; padding: 0 12px 0 18px; min-height: 64px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px #eceef2, 0 8px 22px -14px rgba(20,25,40,.22); cursor: pointer; transition: transform .12s, box-shadow .2s; }
.lb-row:active { transform: scale(.985); }
.lb-row.sep { margin-top: 12px; }
.lb-txt { flex: 1; min-width: 0; font-size: 16px; overflow-wrap: anywhere; display: flex; align-items: center; flex-wrap: wrap; gap: 0 6px; }
.lb-txt b { font-weight: 600; letter-spacing: .005em; }
.lb-txt .dim { color: var(--faint); font-weight: 400; font-size: 14px; }
.lb-txt .sz { padding: 2px 9px; border-radius: 999px; background: #f1f2f5; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .04em; margin-left: 4px; }
.lb-win { font-size: 14px; font-weight: 600; margin-left: 38px; white-space: nowrap; }
.lb-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #d3d6dd; }
.lb-dot.open { background: var(--p0); animation: lbpulse 1.6s ease-out infinite; }
.lb-dot.live { background: var(--p1); }
@keyframes lbpulse { 0% { box-shadow: 0 0 0 0 rgba(52,201,138,.55); opacity: 1; } 50% { opacity: .55; } 100% { box-shadow: 0 0 0 9px rgba(52,201,138,0); opacity: 1; } }
.lb-go { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #f1f2f5; color: var(--ink); }
.lb-go:empty { display: none; }
.lb-go:has(.lb-tag) { width: auto; height: auto; background: none; border-radius: 0; padding-right: 6px; }
.lb-tag { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.lb-tag.open { color: var(--p0); }
.lb-tag.live { color: var(--p1); }
.lb-empty { text-align: center; font-size: 15px; color: var(--muted); padding: 8px 0; line-height: 1.6; }
.lb-empty span { font-size: 13px; color: var(--faint); }
#lbMsg { text-align: center; font-size: 13px; color: #c0392b; }
#lbMsg:empty { display: none; }
.lb-plus { flex: none; align-self: center; width: 56px; height: 56px; border: 0; border-radius: 50%; background: var(--ink); color: #fff; padding: 0; display: flex; align-items: center; justify-content: center; transition: transform .12s; }
.lb-plus svg { width: 24px; height: 24px; }
.lb-plus:active { transform: scale(.94); }

/* תפריט משחק חדש ושם */
#startModal .modal, #nameModal .modal { border-radius: 24px; padding: 14px; gap: 0; width: min(320px, 100%); box-shadow: 0 16px 40px -16px rgba(20,25,40,.25); }
.stack { display: flex; flex-direction: column; gap: 8px; }
.tiles2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tile { display: flex; align-items: center; justify-content: center; width: 100%; padding: 16px 14px; border: 0; border-radius: 16px; background: #f1f2f5; color: var(--ink); font-size: 15px; font-weight: 600; letter-spacing: .02em; transition: background .15s; }
.tile:active { background: #e6e8ed; }
.tile .ti, .tile svg { display: none; }
.tile.pri { background: var(--ink); color: #fff; }
.tile.pri:active { background: #2a2e36; }
#startSize .link { display: block; margin: 8px auto 2px; text-transform: none; letter-spacing: .02em; font-size: 14px; }
#nameModal .modal { padding: 22px 18px 16px; gap: 16px; }
#nameModal h2 { font-size: 13px; font-weight: 600; letter-spacing: .1em; color: var(--muted); }
#nameIn { width: 100%; border: 0; border-radius: 16px; background: #f3f4f7; padding: 15px 16px; font: inherit; font-size: 18px; font-weight: 600; text-align: center; color: var(--ink); outline: none; }
#nameIn:focus { box-shadow: 0 0 0 2px var(--ink); background: #fff; }
#nameModal .modal-actions { margin-top: 0; }

/* תפריט עליון */
#bar { border-radius: 20px; padding: 6px; min-width: 176px; box-shadow: 0 18px 44px -14px rgba(20,25,40,.3), 0 0 0 1px rgba(20,25,40,.05); }
#bar .link { text-transform: none; letter-spacing: .01em; font-size: 15px; font-weight: 500; padding: 12px 14px; border-radius: 12px; }
#bar .link:active { background: #f1f2f5; }
.modal { border-radius: 26px; }

/* לוח מסובב לשחקן הכחול: הפאנלים מתחלפים */
#app.flip #pl0 { order: 1; }
#app.flip #boardWrap { order: 2; }
#app.flip #pl1 { order: 3; }
#app.flip #dock { order: 4; }

/* ---------- מחשב: לוח גדול משמאל, שחקנים וכפתורים בעמודה מימין ---------- */
@media (min-width: 860px) and (min-height: 540px) {
  #app { max-width: none; display: grid; grid-template-columns: auto 360px; grid-template-rows: auto 1fr auto; column-gap: 56px; justify-content: center; align-content: stretch; padding: 4dvh 5vw; --pl-h: 108px; }
  #boardWrap { grid-column: 1; grid-row: 1 / span 3; align-self: center; margin: 0; width: min(88dvh, calc(100vw - 360px - 56px - 10vw)); }
  #pl1 { grid-column: 2; grid-row: 1; }
  #dock { grid-column: 2; grid-row: 2; align-self: center; width: 100%; }
  #pl0 { grid-column: 2; grid-row: 3; }
  #app.flip #pl0 { grid-row: 1; order: 0; }
  #app.flip #pl1 { grid-row: 3; order: 0; }
  #app.flip #boardWrap, #app.flip #dock { order: 0; }
  #menuBtn { right: 20px; top: 14px; }
  #bar { right: 20px; top: 56px; }
}


/* התקנה כאפליקציה */
.lb-install { flex: none; display: flex; align-items: center; gap: 10px; width: 100%; max-width: 560px; margin: 0 auto 18px; padding: 10px 8px 10px 16px; border-radius: 18px; background: #f1f2f5; font-size: 13px; color: var(--muted); }
.lb-install span { flex: 1; }
.lb-install .btn { min-height: 34px; padding: 6px 16px; font-size: 12px; }
.lb-x { flex: none; width: 30px; height: 30px; border: 0; background: none; color: var(--faint); font-size: 22px; line-height: 1; padding: 0; }

/* קהילת וואטסאפ */
.lb-community { flex: none; align-self: center; display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 18px; padding: 9px 16px; border-radius: 999px; background: #f1f2f5; color: var(--muted); font-size: 13px; font-weight: 500; text-decoration: none; transition: background .15s; }
.lb-community:active { background: #e6e8ed; }
.lb-community svg { color: #25a85a; }

#startSize #lbCont { margin-bottom: 8px; }

#winCommunity { align-self: center; margin: 2px 0 0; }
#winCommunity[hidden] { display: none; }