/* מים רבים — עיצוב הממשק */
:root {
  --gold: #e2b33c; --gold-deep: #a9792b; --ink: #2b1d0e; --navy: #0b2147; --royal: #1f5fb0;
  --parch1: #fdf4dc; --parch2: #efdcae; --wine: #8c2332; --green: #1b7a3a;
  --title: "Suez One", "Frank Ruhl Libre", "David", serif;
  --serif: "Frank Ruhl Libre", "David", "Times New Roman", serif;
  --sans: "Rubik", "Segoe UI", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b1a33; font-family: var(--sans); color: var(--ink); user-select: none; -webkit-user-select: none; }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#scene:active { cursor: grabbing; }
#ui { position: fixed; inset: 0; pointer-events: none; }
#ui > * { pointer-events: auto; }
.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; }

/* ---------- סרגל עליון ---------- */
#hud { position: absolute; top: 0; right: 0; left: 0; display: flex; align-items: center; gap: 12px; padding: 10px 16px 22px; pointer-events: none !important; background: linear-gradient(#06142ccc, #06142c00); }
#hud .bsd { font: 500 14px var(--serif); color: #cfe0ff; align-self: flex-start; }
#hud .brand { font: 400 30px/1 var(--title); color: #ffe6a3; text-shadow: 0 2px 0 #5a3b08, 0 0 18px #ffcc5588; margin-inline-end: 6px; white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-inline-start: auto; justify-content: flex-end; }
.chip { pointer-events: auto; display: flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; background: #0b2147d9; border: 1.5px solid var(--gold); color: #fff; font-size: 14px; box-shadow: 0 3px 10px #0006; backdrop-filter: blur(4px); white-space: nowrap; }
.chip span { opacity: .85; }
.chip b { font-size: 17px; color: #ffe6a3; font-variant-numeric: tabular-nums; }
.chip.maaser { border-color: #7fe0c3; } .chip.maaser b { color: #aef5dd; }
.chip.light { border-color: #ffb347; } .chip.light b { color: #ffd27a; text-shadow: 0 0 10px #ffb347; }
.chip.day.erev { background: #5a2a6ed9; border-color: #ffd27a; }
.chip i { font-style: normal; }
.chip.bump { animation: bump .45s ease; }
@keyframes bump { 30% { transform: scale(1.18); box-shadow: 0 0 22px #ffd76acc; } }

/* ---------- כותרת נמל ---------- */
#port-title { position: absolute; top: 15%; left: 0; right: 0; text-align: center; pointer-events: none !important; animation: title 4.2s ease forwards; }
#port-title h1 { margin: 0; font: 400 clamp(46px, 8vw, 92px)/1 var(--title); color: #fff6d8; text-shadow: 0 4px 0 #7a4d0e, 0 0 40px #000a, 0 0 70px #ffcf6a66; }
#port-title p { margin: 8px 0 0; font: 500 clamp(18px, 2.4vw, 26px) var(--serif); color: #fff; text-shadow: 0 2px 10px #000c; }
@keyframes title { 0% { opacity: 0; transform: translateY(24px) scale(.94); } 14% { opacity: 1; transform: none; } 78% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }

/* ---------- פעולות בנמל ---------- */
#portbar { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; gap: 9px; padding: 10px; border-radius: 22px; background: #0b2147c4; border: 2px solid var(--gold); box-shadow: 0 8px 30px #0008; backdrop-filter: blur(6px); max-width: 96vw; animation: rise .5s ease; }
@keyframes rise { from { opacity: 0; transform: translate(-50%, 30px); } }
.act { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 96px; padding: 9px 10px 8px; border: 0; border-radius: 14px; font: 700 14.5px var(--sans); color: #3a2408; background: linear-gradient(#fff5d6, #f0cf7c); box-shadow: inset 0 -3px 0 #b88a2e, 0 2px 6px #0005; transition: transform .12s, filter .12s; white-space: nowrap; }
.act:hover { transform: translateY(-3px) scale(1.04); filter: brightness(1.06); }
.act:active { transform: translateY(1px); }
.act .ico { font-size: 28px; line-height: 1.1; }
.act.primary { background: linear-gradient(#63d0ff, #1f7fd1); color: #fff; box-shadow: inset 0 -3px 0 #0f4f8f, 0 2px 6px #0005; text-shadow: 0 1px 2px #0006; }
.act.shabbat { background: linear-gradient(#fff, #ffe39a); box-shadow: inset 0 -3px 0 #c9942e, 0 0 18px #ffd76acc; }
.act[disabled] { filter: grayscale(.7) brightness(.8); cursor: default; transform: none; }
.act .dot { position: absolute; }
#portbar.busy { opacity: .45; pointer-events: none; }

/* ---------- סרגל הפלגה ---------- */
#voyage { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-radius: 999px; background: #0b2147d0; border: 2px solid var(--gold); color: #fff; font: 700 16px var(--sans); box-shadow: 0 8px 30px #0008; backdrop-filter: blur(6px); max-width: 96vw; }
#voyage .track { position: relative; width: min(38vw, 420px); height: 10px; border-radius: 9px; background: #ffffff2a; }
#voyage .fill { position: absolute; inset-block: 0; inset-inline-start: 0; width: 0; border-radius: 9px; background: linear-gradient(90deg, #ffe6a3, #e2b33c); }
#voyage .boat { position: absolute; top: -17px; inset-inline-start: 0; font-size: 24px; transform: translateX(50%) scaleX(-1); filter: drop-shadow(0 2px 3px #0008); }
#voyage .vd { font: 500 14px var(--sans); color: #cfe0ff; min-width: 92px; text-align: center; }
#btn-fast { border: 0; border-radius: 50%; width: 38px; height: 38px; font-size: 17px; background: linear-gradient(#fff5d6, #f0cf7c); box-shadow: inset 0 -2px 0 #b88a2e; }
#btn-fast.on { background: linear-gradient(#63d0ff, #1f7fd1); box-shadow: inset 0 -2px 0 #0f4f8f, 0 0 14px #63d0ff; }

/* ---------- הודעות ---------- */
#toasts { position: absolute; top: 74px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none !important; width: min(680px, 94vw); z-index: 30; }
.toast { padding: 10px 20px; border-radius: 14px; background: #fdf4dcf2; border: 2px solid var(--gold-deep); font: 500 16.5px/1.45 var(--serif); color: var(--ink); box-shadow: 0 8px 24px #0007; text-align: center; animation: toast 5.2s ease forwards; }
.toast.good { background: #f1fbe6f5; border-color: #5a9a3a; }
@keyframes toast { 0% { opacity: 0; transform: translateY(-14px) scale(.96); } 7% { opacity: 1; transform: none; } 86% { opacity: 1; } 100% { opacity: 0; transform: translateY(-8px); } }
#banner { position: absolute; bottom: 96px; left: 0; right: 0; text-align: center; font: 700 clamp(22px, 3.4vw, 40px)/1.35 var(--serif); color: #fff8dc; text-shadow: 0 2px 0 #20406a, 0 0 26px #000c, 0 0 46px #7fd0ff88; pointer-events: none !important; padding: 0 20px; animation: fadein 1.2s ease; }
#hint { position: absolute; bottom: 124px; left: 50%; transform: translateX(-50%); padding: 6px 16px; border-radius: 999px; background: #0b2147aa; color: #dfeaff; font-size: 13.5px; pointer-events: none !important; animation: toast 9s ease forwards; white-space: nowrap; }
@keyframes fadein { from { opacity: 0; } }

/* ---------- חלונות ---------- */
#scrim { position: absolute; inset: 0; background: #050f2366; animation: fadein .25s; }
.panel { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(780px, 95vw); max-height: 86vh; display: flex; flex-direction: column; border-radius: 18px; background: linear-gradient(160deg, var(--parch1), #f3e2b6 70%, #e9d29c); border: 3px solid var(--gold-deep); box-shadow: 0 22px 64px #000b, inset 0 0 0 5px #fdf4dc, inset 0 0 0 6px #c9a25a, inset 0 0 70px #c9a25a44; animation: pop .3s cubic-bezier(.2, 1.3, .4, 1); z-index: 20; }
.panel.wide { width: min(1040px, 97vw); }
@keyframes pop { from { opacity: 0; transform: translate(-50%, -46%) scale(.93); } }
.panel header { display: flex; align-items: center; gap: 12px; padding: 16px 24px 10px; border-bottom: 2px solid #c9a25a; }
.panel .pico { font-size: 38px; line-height: 1; }
.panel h2 { margin: 0; font: 400 28px/1.1 var(--title); color: #5a2a0a; }
.panel .sub { font: 500 15px var(--serif); color: #7a5a2a; margin-top: 2px; }
.panel .x { margin-inline-start: auto; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--gold-deep); background: #fff7e0; color: #7a3a10; font-size: 16px; font-weight: 700; }
.panel .x:hover { background: var(--wine); color: #fff; }
.panel .body { padding: 14px 24px 20px; overflow: auto; }
.quote { font: 500 16px var(--serif); color: #7a4a1a; text-align: center; margin: 4px 0 12px; }
.btn { border: 0; border-radius: 9px; padding: 6px 11px; font: 700 13.5px var(--sans); color: #fff; background: linear-gradient(#3f8fe0, #1f5fb0); box-shadow: inset 0 -2px 0 #123f7a; transition: filter .1s, transform .1s; white-space: nowrap; }
.btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.btn.sell { background: linear-gradient(#e8a23c, #c4741c); box-shadow: inset 0 -2px 0 #8a4a0c; }
.btn.give { background: linear-gradient(#3fb48a, #1f8a63); box-shadow: inset 0 -2px 0 #0f5f43; }
.btn.own { background: linear-gradient(#b98ad8, #7a4aa8); box-shadow: inset 0 -2px 0 #4f2a78; }
.btn.big { padding: 11px 22px; font-size: 16.5px; border-radius: 12px; }
.btn[disabled] { filter: grayscale(.9) opacity(.45); cursor: default; transform: none; }

/* שוק */
.mk-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.seg { display: flex; align-items: center; gap: 0; font: 700 14px var(--sans); color: #6a4a1a; }
.seg span { margin-inline-end: 8px; }
.seg button { border: 2px solid var(--gold-deep); border-inline-start-width: 0; background: #fff8e4; color: #6a4a1a; font: 700 14px var(--sans); padding: 5px 14px; min-width: 44px; }
.seg button:first-of-type { border-inline-start-width: 2px; border-start-start-radius: 9px; border-end-start-radius: 9px; }
.seg button:last-of-type { border-start-end-radius: 9px; border-end-end-radius: 9px; }
.seg button.on { background: linear-gradient(#3f8fe0, #1f5fb0); color: #fff; }
.mk-legend { display: flex; align-items: center; gap: 6px; font: 500 13.5px var(--sans); color: #6a4a1a; }
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-inline-start: 10px; }
.dot.g { background: #2e9e4f; } .dot.r { background: #d9453a; }
.mk-row { display: grid; grid-template-columns: minmax(170px, 1.3fr) 132px 70px minmax(112px, .9fr) 172px; align-items: center; gap: 10px; padding: 7px 10px; margin-bottom: 5px; border-radius: 10px; background: #fffaf0; border: 1px solid #e4d2a4; border-inline-start: 7px solid #c9b98a; }
.mk-row.l0 { border-inline-start-color: #1f8f3f; background: #eefae6; } .mk-row.l1 { border-inline-start-color: #6dbb4a; background: #f6fbe9; }
.mk-row.l3 { border-inline-start-color: #e58a2a; background: #fff4e4; } .mk-row.l4 { border-inline-start-color: #d9453a; background: #ffeee8; }
.mk-row .g { display: flex; align-items: center; gap: 9px; font: 700 16.5px var(--serif); }
.mk-row .g small { display: block; font: 400 12px var(--sans); color: #8a6a3a; margin-top: 1px; }
.mk-row .gi { font-size: 27px; width: 34px; text-align: center; }
.lvl span { display: block; font: 700 13.5px var(--sans); margin-bottom: 4px; color: #6a5a3a; }
.l0 .lvl span { color: #14602a; } .l1 .lvl span { color: #3a7a1a; } .l3 .lvl span { color: #b0580a; } .l4 .lvl span { color: #b02818; }
.meter { position: relative; height: 9px; border-radius: 6px; background: linear-gradient(to left, #2e9e4f, #a8cf4a 30%, #e6c229 50%, #e58a2a 72%, #d9453a); box-shadow: inset 0 1px 2px #0004; }
.meter i { position: absolute; top: -4px; width: 7px; height: 17px; margin-inline-start: -3px; border-radius: 4px; background: #2b1d0e; border: 2px solid #fff; box-shadow: 0 1px 3px #0007; }
.mk-row .pr { font: 700 20px var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tr { display: inline-block; width: 16px; font-size: 12px; margin-inline-start: 3px; vertical-align: 2px; }
.tr.up { color: #c0392b; } .tr.down { color: #1f8f3f; }
.mk-row .mine { font: 500 13.5px var(--sans); color: #4a3a1a; }
.mk-row .mine b { display: block; font-weight: 700; }
.pl { display: inline-block; margin-top: 2px; padding: 1px 8px; border-radius: 99px; font: 700 12px var(--sans); background: #ece3cc; color: #6a5a3a; white-space: nowrap; }
.pl.plus { background: #cdeec2; color: #14602a; } .pl.minus { background: #ffd4cc; color: #a02818; }
.mk-row .btns { display: flex; gap: 5px; justify-content: flex-end; }
.mk-row .btns .btn { padding: 8px 13px; font-size: 14.5px; }
.mk-note { margin-top: 10px; padding: 9px 14px; border-radius: 10px; background: #d9f3ea; border: 1.5px solid #7fcfb0; font: 500 14.5px var(--serif); color: #14553d; text-align: center; }

/* צדקה */
.purse { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 12px; border-radius: 14px; background: linear-gradient(#e2f7ee, #c6ecdc); border: 2px solid #5fb894; font: 700 18px var(--serif); color: #14553d; }
.purse b { font: 700 30px var(--sans); }
.cause { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: #fff8e4; border: 1.5px solid #d6b878; }
.cause.goal { background: linear-gradient(#fff3c4, #ffe29a); border: 2px solid var(--gold-deep); }
.cause.done { background: #e9f7df; border-color: #7fbf5f; }
.cause .top { display: flex; align-items: baseline; gap: 10px; font: 700 18px var(--serif); }
.cause .top small { margin-inline-start: auto; font: 500 14px var(--sans); color: #7a5a2a; }
.bar { height: 12px; border-radius: 8px; background: #d9c9a0; margin: 8px 0; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, #3fb48a, #9fe07a); transition: width .5s; }
.cause.goal .bar i { background: linear-gradient(90deg, #e2b33c, #ffe07a); }
.cause .row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font: 500 13.5px var(--sans); color: #6a4a1a; }
.cause .row + .row { margin-top: 6px; }
.coin { position: fixed; z-index: 99; font-size: 22px; pointer-events: none; transition: transform .8s cubic-bezier(.4, 0, .2, 1), opacity .8s; }

/* בית הכנסת, מספנה */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.cardi { padding: 14px; border-radius: 12px; background: #fff8e4; border: 1.5px solid #d6b878; display: flex; flex-direction: column; gap: 8px; }
.cardi h4 { margin: 0; font: 700 19px var(--serif); color: #5a2a0a; }
.cardi p { margin: 0; font: 400 14.5px/1.5 var(--serif); color: #5a4420; flex: 1; }
.pinkas { margin-top: 14px; padding: 12px 16px; border-radius: 12px; background: #f6ecd0; border: 1.5px dashed #b99a5a; font: 500 15px/1.7 var(--serif); }
.pinkas h4 { margin: 0 0 4px; font: 700 17px var(--serif); color: #5a2a0a; }

/* מפה */
.mapwrap { display: grid; grid-template-columns: 1fr 268px; gap: 14px; align-items: start; }
.map { width: 100%; height: auto; border-radius: 12px; border: 3px solid #a9792b; box-shadow: inset 0 0 30px #7a5a1a66, 0 4px 14px #0004; display: block; background: #ecd9a6; }
.map .port { cursor: pointer; }
.map .port circle.o { fill: #fff6d8; stroke: #7a3a10; stroke-width: 3; transition: r .15s; }
.map .port circle.i { fill: #c0392b; }
.map .port:hover circle.o { r: 14; }
.map .port.here circle.i { fill: #1f5fb0; }
.map .port.sel circle.o { fill: #ffe07a; stroke: #c0392b; stroke-width: 4; }
.map .port text { font: 700 23px var(--serif); fill: #3a1a04; paint-order: stroke; stroke: #fff6d8; stroke-width: 5px; stroke-linejoin: round; text-anchor: middle; pointer-events: none; }
.map .land { font: 500 19px var(--serif); fill: #a98a52; text-anchor: middle; letter-spacing: 3px; }
.map .seaname { font: italic 500 22px var(--serif); fill: #ffffffcc; text-anchor: middle; letter-spacing: 4px; }
.map .route { fill: none; stroke: #c0392b; stroke-width: 4; stroke-dasharray: 3 11; stroke-linecap: round; animation: dash 1.2s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -28; } }
.map .pulse { fill: none; stroke: #1f5fb0; stroke-width: 3; animation: pulse 1.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.1); opacity: 0; } }
.mapinfo { padding: 14px; border-radius: 12px; background: #fff8e4; border: 1.5px solid #d6b878; font: 400 14.5px/1.55 var(--serif); min-height: 300px; display: flex; flex-direction: column; gap: 8px; }
.mapinfo h3 { margin: 0; font: 400 26px/1.1 var(--title); color: #5a2a0a; }
.mapinfo .s { font: 500 15px var(--serif); color: #8a5a2a; margin-top: -4px; }
.mapinfo .kv { font: 500 14.5px var(--sans); }
.mapinfo .kv b { color: #1f5fb0; }
.mapinfo .warn { padding: 7px 10px; border-radius: 8px; background: #f3e0f7; border: 1px solid #b98ad8; color: #5a2a6e; font: 500 14px var(--serif); }
.mapinfo .goodsl { font: 500 14px var(--sans); }
.mapinfo .btn { margin-top: auto; }

/* אירוע */
.panel.event { width: min(560px, 94vw); padding: 24px 28px 22px; text-align: center; align-items: center; z-index: 25; }
.panel.event.lightbg { top: auto; bottom: 28px; transform: translate(-50%, 0); }
.panel.event.lightbg { animation-name: pop2; }
@keyframes pop2 { from { opacity: 0; transform: translate(-50%, 30px) scale(.95); } }
.eico { font-size: 62px; line-height: 1; filter: drop-shadow(0 4px 6px #0003); }
.panel.event h2 { margin: 8px 0 6px; font-size: 30px; }
.etext { margin: 0 0 8px; font: 500 18px/1.6 var(--serif); }
.equote { margin: 0 0 14px; font: 700 16.5px/1.5 var(--serif); color: #7a4a1a; }
.choices { display: flex; flex-direction: column; gap: 9px; width: 100%; }
.choice { border: 0; border-radius: 12px; padding: 12px 18px; font: 700 17px var(--sans); color: #fff; background: linear-gradient(#3f8fe0, #1f5fb0); box-shadow: inset 0 -3px 0 #123f7a, 0 3px 8px #0003; transition: transform .1s, filter .1s; }
.choice:hover { transform: translateY(-2px); filter: brightness(1.1); }
.choice small { display: block; font: 400 13px var(--sans); opacity: .88; margin-top: 2px; }
.choice.alt { background: linear-gradient(#c9a66a, #9a7436); box-shadow: inset 0 -3px 0 #6a4a16, 0 3px 8px #0003; }

/* תפילה */
#prayer { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 30px; text-align: center; background: radial-gradient(ellipse at center, #0a1c3dd9 0%, #030a18f2 80%); animation: fadein .8s; z-index: 40; }
#prayer.clear { background: linear-gradient(#030a18b0, #030a1840 55%, #030a18a0); justify-content: flex-start; padding-top: 9vh; }
#prayer h3 { margin: 0; font: 400 clamp(26px, 4vw, 40px) var(--title); color: #ffe6a3; text-shadow: 0 0 26px #ffc94d, 0 2px 0 #5a3b08; }
#prayer .text { max-width: 880px; font: 500 clamp(20px, 2.7vw, 31px)/1.85 var(--serif); color: #fff8e0; text-shadow: 0 2px 8px #000c; }
#prayer .text span { opacity: 0; filter: blur(6px); transition: opacity .7s, filter .7s; }
#prayer .text span.on { opacity: 1; filter: none; text-shadow: 0 0 16px #ffd76a77, 0 2px 8px #000c; }
#prayer .text .verse { display: block; opacity: 0; transform: translateY(10px); transition: opacity .9s, transform .9s; }
#prayer .text .verse.on { opacity: 1; transform: none; text-shadow: 0 0 16px #ffd76a77, 0 2px 8px #000c; }
#prayer .amen, #shabbat button, #btn-start { border: 0; border-radius: 14px; padding: 13px 44px; font: 400 23px var(--title); color: #4a2a05; background: linear-gradient(#ffeeb8, #e2b33c); box-shadow: inset 0 -4px 0 #a9792b, 0 0 30px #ffd76a88; transition: transform .12s, opacity .4s; }
#prayer .amen:hover, #shabbat button:hover, #btn-start:hover { transform: translateY(-2px) scale(1.03); }
#prayer .amen[disabled] { opacity: .25; cursor: default; }

/* שבת */
#shabbat { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); width: min(620px, 94vw); padding: 20px 28px 22px; border-radius: 20px; text-align: center; background: linear-gradient(#2a1a4ee6, #14102ef0); border: 2px solid #ffd27a; box-shadow: 0 0 60px #ffcf6a55, 0 20px 50px #000a; color: #fff6dc; animation: pop2 .6s ease; z-index: 40; }
#shabbat .candles { font-size: 46px; filter: drop-shadow(0 0 18px #ffcf6a); animation: flicker 2.4s ease-in-out infinite; }
@keyframes flicker { 50% { filter: drop-shadow(0 0 30px #ffe08a); transform: scale(1.03); } }
#shabbat h3 { margin: 4px 0 6px; font: 400 32px var(--title); color: #ffe6a3; text-shadow: 0 0 22px #ffc94d; }
#shabbat p { margin: 0 0 14px; font: 500 18px/1.65 var(--serif); }
#shabbat button { font-size: 19px; padding: 10px 30px; }

/* פתיחה */
#intro { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; background: radial-gradient(ellipse at center, #06142c33 0%, #06142c99 100%); z-index: 50; overflow: auto; }
#intro .card { margin: auto; position: relative; width: min(600px, 96vw); padding: 26px 34px 28px; border-radius: 22px; text-align: center; background: linear-gradient(160deg, #fdf4dcf7, #f3e2b6f7 70%, #e9d29cf7); border: 3px solid var(--gold-deep); box-shadow: 0 24px 70px #000c, inset 0 0 0 5px #fdf4dc, inset 0 0 0 6px #c9a25a; animation: pop3 .7s cubic-bezier(.2, 1.2, .4, 1); }
@keyframes pop3 { from { opacity: 0; transform: translateY(26px) scale(.95); } }
.bsd2 { position: absolute; top: 14px; right: 22px; font: 500 15px var(--serif); color: #7a5a2a; }   /* בס"ד תמיד בפינה הימנית, גם באנגלית */
.lang-btn { position: absolute; top: 10px; left: 14px; padding: 4px 12px; border-radius: 999px; border: 1.5px solid var(--gold-deep); background: #fff8e4; color: #5a2a0a; font: 700 14px var(--sans); }
.lang-btn:hover { background: #fff; border-color: #7a3a10; }
#intro h1 { margin: 6px 0 0; font: 400 clamp(52px, 9vw, 78px)/1 var(--title); color: #1f4e8c; text-shadow: 0 3px 0 #e2b33c, 0 6px 16px #0003; }
.tagline { font: 700 20px var(--serif); color: #7a3a10; margin-top: 6px; }
.verse { font: 500 17px/1.6 var(--serif); color: #5a4420; margin: 12px 0 10px; }
.story { font: 400 16.5px/1.65 var(--serif); margin: 0 0 14px; }
.rules { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
.rules div { padding: 9px 4px; border-radius: 12px; background: #fff8e4; border: 1.5px solid #d6b878; font: 700 13.5px var(--sans); color: #5a2a0a; }
.rules span { display: block; font-size: 26px; }
#intro label { display: block; font: 700 16px var(--serif); margin-bottom: 16px; }
#intro input { font: 700 18px var(--serif); padding: 7px 12px; border-radius: 10px; border: 2px solid var(--gold-deep); background: #fffdf4; text-align: center; width: 200px; color: var(--ink); user-select: text; -webkit-user-select: text; }
#load-error { margin-top: 12px; color: var(--wine); font: 700 15px var(--sans); }
#btn-continue { display: block; margin: 0 auto 16px; border: 0; border-radius: 14px; padding: 13px 30px; font: 400 21px var(--title); color: #fff; background: linear-gradient(#3f8fe0, #1f5fb0); box-shadow: inset 0 -4px 0 #123f7a, 0 0 26px #63b0ff88; transition: transform .12s; }
#btn-continue:hover { transform: translateY(-2px) scale(1.03); }
#btn-start.secondary { font-size: 17px; padding: 9px 26px; box-shadow: inset 0 -3px 0 #a9792b; }
#btn-sound { font-size: 16px; padding: 6px 11px; cursor: pointer; }

@media (max-width: 860px) {
  .mapwrap { grid-template-columns: 1fr; }
  .mapinfo { min-height: 0; }
  .chip span { display: none; }
  #hud .brand { font-size: 22px; }
  .act { min-width: 0; padding: 8px 9px; font-size: 12.5px; }
  .act .ico { font-size: 23px; }
  .mk-row { grid-template-columns: 1fr 112px 62px; }
  .mk-row .mine { grid-column: 1 / 2; }
  .mk-row .btns { grid-column: 2 / -1; }
  .mk-row:not(.held) .mine { display: none; }
  .mk-row:not(.held) .btns { grid-column: 1 / -1; }
  .rules { grid-template-columns: repeat(2, 1fr); }
}

/* טלפון */
@media (max-width: 560px) {
  #hud { padding: 8px 8px 16px; gap: 6px; }
  #hud .brand, #hud .bsd { display: none; }
  .chips { gap: 4px; justify-content: center; margin-inline-start: 0; width: 100%; }
  .chip { padding: 4px 7px; font-size: 12.5px; gap: 3px; }
  .chip b { font-size: 14px; }
  .chip.day i { display: none; }
  #btn-sound { padding: 4px 7px; font-size: 13px; }
  #toasts { top: 86px; }
  #port-title { top: 20%; }
  #portbar { flex-wrap: wrap; justify-content: center; width: 96vw; gap: 6px; padding: 8px; bottom: 10px; }
  .act { flex: 1 1 30%; }
  #voyage { flex-wrap: wrap; justify-content: center; border-radius: 20px; gap: 8px; padding: 12px 14px 8px; width: 94vw; bottom: 12px; }
  #voyage .track { width: 46vw; }
  #hint { display: none; }
  .panel header { padding: 12px 14px 8px; }
  .panel h2 { font-size: 23px; }
  .panel .pico { font-size: 30px; }
  .panel .body { padding: 10px 12px 14px; }
  .mk-top { justify-content: center; }
  .mk-row { grid-template-columns: 1fr auto; gap: 7px 10px; }
  .mk-row .lvl { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: center; gap: 10px; }
  .mk-row .lvl span { margin: 0; min-width: 74px; }
  .mk-row .lvl .meter { flex: 1; }
  .mk-row .mine { grid-column: 1; grid-row: 3; }
  .mk-row .btns, .mk-row:not(.held) .btns { grid-column: 2; grid-row: 3; }
  .mk-row:not(.held) .btns { grid-column: 1 / -1; }
  #intro .card { padding: 22px 18px 22px; }
  #prayer { padding: 18px; }
}

/* ---------- אנגלית (dir="ltr") ----------
   רוב הממשק בנוי ממאפיינים לוגיים (inline-start/end) ומתהפך לבד. כאן רק מה שכתוב בכיוון קבוע. */
.i18n-wait #ui { visibility: hidden; }                      /* עד שהטקסטים מתורגמים, כדי שלא תהבהב עברית */
[dir="ltr"] .meter { background: linear-gradient(to right, #2e9e4f, #a8cf4a 30%, #e6c229 50%, #e58a2a 72%, #d9453a); }
[dir="ltr"] #voyage .boat { transform: translateX(-50%); }   /* הסירה שטה ימינה, אז בלי היפוך */
[dir="ltr"] .cardi .btn { white-space: normal; }             /* "Enlarge: 1100 gold coins" רחב מהכרטיס */
@media (max-width: 560px) {
  [dir="ltr"] .act { white-space: normal; text-align: center; line-height: 1.15; }   /* "Shipyard & Gemach" ארוך מדי לשורה אחת בטלפון */
  /* הטקסט האנגלי ארוך מהעברי: מסך הפתיחה מתכווץ מעט, כדי שייכנס בגובה של טלפון */
  [dir="ltr"] #intro h1 { font-size: clamp(38px, 11vw, 52px); }
  [dir="ltr"] .tagline { font-size: 17px; }
  [dir="ltr"] #intro .verse, [dir="ltr"] .story { font-size: 15px; line-height: 1.5; }
  [dir="ltr"] #btn-continue { font-size: 18px; padding: 11px 20px; }
}