/* עיצוב לפי מסך ההדגמה המאושר (demo/index.html): דף קלף, פתקיות, חותמת שעווה,
   כותרות Frank Ruhl Libre, טקסט Assistant. לפני השקה: לארח את הפונטים אצלנו (סינון). */
:root {
  --parch: #f2e7cf; --parch-2: #e9dcbd; --ink: #2e2216; --ink-2: #5a4632;
  --leather: #6a4a2f; --leather-2: #4a3220; --olive: #4f5a2b; --olive-2: #3c4520;
  --bronze: #a77b3c; --line: #cdb88f; --right: #4f6b2b; --wrong: #8e3a24; --night: #1b140e;
  --title: "Suez One", "Frank Ruhl Libre", serif; /* בחירה שלה 8.11 (במקום Frank Ruhl Libre) */
  --body: "Rubik", Heebo, Arial, sans-serif;
  font-size: clamp(14px, min(1.75vw, 3.6vh), 26px);
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; overflow: hidden; background: var(--night); font-family: var(--body); color: var(--ink); -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
button:focus-visible { outline: 3px solid #f3d27a; outline-offset: 2px; }
#stage { position: fixed; inset: 0; overflow: hidden; overflow: clip; }

/* ---------- המחנה ---------- */
#camp { position: absolute; inset: 0; overflow: hidden; overflow: clip; }
#camp-bg { position: absolute; inset: 0; background: #6b5a44 center 60% / cover no-repeat; }
#camp-bg svg { width: 100%; height: 100%; display: block; }
#camp::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 55%, rgba(20,12,4,0) 30%, rgba(20,12,4,.35) 100%); pointer-events: none; }
.camp-item { position: absolute; pointer-events: none; opacity: 0; transform: translateY(1.5rem) scale(.85); transform-origin: 50% 100%; transition: opacity .5s, transform .7s cubic-bezier(.2,1.5,.4,1); z-index: 1; }
.camp-item.on { opacity: 1; transform: none; }
/* מסך הפתיחה: זום איטי + צללית מהבהבת של מה שחסר כשהקריינות מזכירה אותו */
#camp { transform-origin: 50% 60%; transition: transform 1.2s ease; }
#camp.push { transform: scale(1.07); transition: transform 22s cubic-bezier(.25,.1,.3,1); }
.camp-item.ghost { animation: ghost 1.6s ease-out; transform: none; }
.camp-item.ghost .it { filter: brightness(.15) sepia(1) saturate(3) drop-shadow(0 0 .6rem rgba(255,205,120,.95)); }
.camp-item.ghost .sh { opacity: 0; }
@keyframes ghost { 0% { opacity: 0; } 25% { opacity: .85; } 60% { opacity: .7; } 100% { opacity: 0; } }
.need.ping { animation: ping 1.1s ease-out; }
@keyframes ping { 0% { transform: none; box-shadow: 0 0 0 0 rgba(212,160,60,.7); } 30% { transform: scale(1.12); border-color: var(--gold, #c99a3c); box-shadow: 0 0 0 .35rem rgba(212,160,60,.25); } 100% { transform: none; box-shadow: 0 0 0 .6rem rgba(212,160,60,0); } }
.camp-item .it { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; }
.camp-item .sh { position: absolute; left: 50%; transform: translateX(-50%); opacity: .9; }
.bread-fly { position: absolute; width: 2.2rem; height: 2.2rem; border-radius: 50%; pointer-events: none; z-index: 5;
  background: radial-gradient(circle at 40% 35%, #f0c98a, #c98d46 60%, #9c6630); box-shadow: inset 0 -.2rem .3rem rgba(90,50,10,.45); }
.fire-glow { position: absolute; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255,170,70,.32), rgba(255,140,40,0) 70%); animation: flicker 2.6s ease-in-out infinite; mix-blend-mode: screen; }
@keyframes flicker { 0%,100% { opacity: .75; transform: scale(1); } 30% { opacity: 1; transform: scale(1.06); } 60% { opacity: .82; transform: scale(.97); } }

/* ---------- רכיבי קלף ---------- */
.chip { border-style: solid; border-width: .45rem .55rem; border-image: url(assets/img/parch.webp) 70 80 70 80 fill / .45rem .55rem stretch; filter: drop-shadow(0 .15rem .35rem rgba(25,15,5,.45)); }
.coin { display: inline-block; width: 1.6rem; height: 1.6rem; flex: none; background: url(assets/img/coin.webp) center / contain no-repeat; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); vertical-align: middle; }

/* ---------- פס עליון ---------- */
#hud { position: absolute; top: 0; inset-inline: 0; z-index: 10; display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem;
  padding: max(.5rem, env(safe-area-inset-top)) max(.9rem, env(safe-area-inset-right)) 0 max(.9rem, env(safe-area-inset-left)); pointer-events: none; }
#hud > * { pointer-events: auto; }
#supplies { display: flex; gap: .45rem; }
.sup { width: 3.6rem; padding: .15rem .2rem; display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.sup .ic { width: 100%; height: 2rem; display: grid; place-items: center; }
.sup img { max-width: 88%; max-height: 100%; object-fit: contain; }
.sup .st { font: 600 .62rem/1 var(--body); padding: .18rem .35rem; border-radius: .4rem; white-space: nowrap; }
.sup.got .st { background: var(--olive); color: #f4ecd6; }
.sup.miss img { filter: grayscale(.85) brightness(.9); opacity: .55; }
.sup.miss .st { color: var(--ink-2); border: 1px dashed #a48d66; }
.sup.pop { animation: bump .5s; }
.hud-mid { display: flex; flex-direction: column; align-items: center; gap: .3rem; margin-inline: auto; }
#progress { display: flex; align-items: center; gap: .28rem; padding: .3rem .6rem; }
.dot { width: .62rem; height: .62rem; border-radius: 50%; border: 1.5px solid var(--olive); background: transparent; }
.dot.bonus { border-color: var(--bronze); border-radius: 2px; transform: rotate(45deg) scale(.85); }
.dot.right { background: var(--olive); }
.dot.bonus.right { background: var(--bronze); }
.dot.wrong { background: var(--wrong); border-color: var(--wrong); }
.dot.now { box-shadow: 0 0 0 .2rem rgba(167,123,60,.45); }
.dot-sep { width: 1px; height: .8rem; background: rgba(90,60,30,.4); margin: 0 .2rem; }
.hud-left { display: flex; align-items: flex-start; gap: .4rem; }
#purse { display: flex; align-items: center; gap: .45rem; padding: .35rem .8rem .35rem .45rem; font: 700 1.15rem/1 var(--body); }
#purse b { min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; }
#purse small { font: 600 .7rem/1 var(--body); color: var(--ink-2); }
#purse.bump { animation: bump .45s; }
@keyframes bump { 40% { transform: scale(1.15); } }
.icon-btn { width: 2.7rem; height: 2.7rem; min-width: 44px; min-height: 44px; padding: 0; display: grid; place-items: center; background: none; color: var(--leather-2); }
.icon-btn svg { width: 1.25rem; height: 1.25rem; }
.icon-btn:disabled { opacity: .45; cursor: default; }

/* ---------- כרטיס ---------- */
#panel-wrap { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.card { pointer-events: auto; position: absolute; left: 50%; bottom: max(1.6rem, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(90vw, 44rem); max-height: calc(100% - 6.2rem); overflow-y: auto;
  border-style: solid; border-width: 1.5rem 1.9rem; border-image: url(assets/img/parch.webp) 70 80 70 80 fill / 1.5rem 1.9rem stretch;
  filter: drop-shadow(0 .9rem 1.4rem rgba(20,10,0,.5)) drop-shadow(0 .15rem .3rem rgba(20,10,0,.35));
  padding: 0 .4rem; font-size: 1rem; line-height: 1.35; transition: transform .45s cubic-bezier(.4,0,.2,1), opacity .35s; }
#panel-wrap.side .card { width: min(88vw, 30rem); }
#panel-wrap.mid .card { width: min(90vw, 38rem); }
.card.enter { animation: enter .4s cubic-bezier(.2,1.2,.4,1); }
@keyframes enter { from { opacity: 0; transform: translate(-50%, 1.2rem) scale(.97); } }
.card.away { transform: translate(-50%, 130%); opacity: 0; }

.head { text-align: center; }
.badge { display: inline-flex; align-items: center; gap: .4rem; font: 600 .78rem/1 var(--body); color: #7a5426; padding: .28rem .75rem;
  border: 1px solid rgba(122,84,38,.5); border-radius: 2rem; background: rgba(255,246,222,.45); }
.badge.must { color: var(--olive-2); border-color: rgba(79,90,43,.5); }
.badge .coin { width: .95rem; height: .95rem; }
.badge s { opacity: .6; }
.lv { display: inline-flex; gap: .14rem; margin-inline-end: .25rem; vertical-align: middle; }
.lv i { width: .42rem; height: .42rem; border-radius: 50%; border: 1px solid currentColor; opacity: .7; }
.lv i.on { background: currentColor; opacity: 1; }
.title { font-family: var(--title); font-weight: 400; font-size: 1.7rem; line-height: 1.15; margin-top: .35rem; color: var(--ink); text-wrap: balance; }
.title.sm { font-size: 1.4rem; }
.instr { font: 400 .92rem/1.3 var(--body); color: var(--ink-2); margin-top: .15rem; }
.rule { position: relative; height: 1px; margin: .65rem auto .7rem; width: 62%; background: linear-gradient(90deg, transparent, rgba(90,60,30,.55) 20%, rgba(90,60,30,.55) 80%, transparent); }
.rule::after { content: ""; position: absolute; left: 50%; top: 50%; width: .45rem; height: .45rem; transform: translate(-50%,-50%) rotate(45deg); background: #7b5a34; box-shadow: 0 0 0 .2rem rgba(240,226,195,.9); }
p { margin: .3em 0; }
.muted { color: var(--ink-2); }

/* תשובות = פתקיות קלף; בחירה = זית + חותמת */
.opts { display: grid; gap: .5rem; grid-template-columns: repeat(2, 1fr); }
.opts.n8 { grid-template-columns: repeat(2, 1fr); }
.opts.n10 { grid-template-columns: repeat(5, 1fr); }
.opts.pics { grid-template-columns: repeat(4, 1fr); }
.opt { position: relative; min-height: max(48px, 2.9rem); padding: .2rem .6rem; background: none; border-style: solid; border-width: .5rem .55rem;
  border-image: url(assets/img/tile.webp) 30 34 30 34 fill / .5rem .55rem stretch; filter: drop-shadow(0 .12rem .14rem rgba(70,45,15,.28));
  font: 400 1.2rem/1.15 var(--title); color: #2b1d10; transition: transform .08s ease, filter .15s; display: flex; align-items: center; justify-content: center; gap: .4rem; text-align: center; }
.opts.c4 .opt { font: 600 1.02rem/1.2 var(--body); }
.opts.n8 .opt { justify-content: flex-start; text-align: start; padding-inline: .7rem 1.8rem; font: 500 1rem/1.2 var(--body); }
.opts.pics .opt { flex-direction: column; gap: .1rem; min-height: 5.6rem; font: 600 1rem/1.1 var(--body); }
.opt .pic { height: 3.4rem; width: 100%; object-fit: contain; position: relative; z-index: 1; filter: drop-shadow(0 .15rem .15rem rgba(40,25,10,.3)); }
.opt > span:not(.tick) { position: relative; z-index: 1; }
.opt:hover:not(:disabled) { filter: drop-shadow(0 .16rem .22rem rgba(70,45,15,.38)) brightness(1.03); }
.opt:active:not(:disabled) { transform: scale(.97); }
.opt::after { content: ""; position: absolute; inset: -.28rem -.32rem; border-radius: .2rem; background: #6b7a35; opacity: 0; mix-blend-mode: multiply; transition: opacity .15s; }
.opt::before { content: ""; position: absolute; inset: -.08rem -.12rem; border: 1.5px solid rgba(240,230,198,.65); border-radius: .15rem; opacity: 0; z-index: 1; transition: opacity .15s; }
.opt.sel::after, .opt.sel::before { opacity: 1; }
.opt.sel { color: #f6eedb; }
.opt .tick { position: absolute; z-index: 2; top: -.75rem; inset-inline-start: -.6rem; width: 1.55rem; height: 1.55rem; background: url(assets/img/seal.png) center / contain no-repeat;
  opacity: 0; transform: scale(1.4) rotate(-12deg); transition: opacity .12s, transform .18s cubic-bezier(.3,1.6,.6,1); }
.opt.sel .tick { opacity: 1; transform: scale(1) rotate(-8deg); }
/* אחרי הגשה: נכונות מסומנת בצבע + סימן + מילה */
.opt.is-right::after { background: #5d8a3a; opacity: .85; }
.opt.is-right { color: #f6f2e2; }
.opt.is-wrong::after { background: #a4472c; opacity: .8; }
.opt.is-wrong { color: #fbeee6; }
.opt.dim { opacity: .55; }
.opt .mark { position: absolute; z-index: 2; top: -.6rem; inset-inline-start: -.5rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; display: grid; place-items: center; font: 800 .8rem/1 var(--body); color: #fff; }
.opt.is-right .mark { background: var(--right); box-shadow: 0 0 0 2px #f2e7cf; }
.opt.is-wrong .mark { background: var(--wrong); box-shadow: 0 0 0 2px #f2e7cf; }
.opt:disabled { cursor: default; }

.foot { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: .85rem; flex-wrap: wrap; }
.prog { display: flex; align-items: center; gap: .6rem; font: 500 .88rem/1 var(--body); color: var(--ink-2); }
.pips { display: flex; gap: .28rem; }
.pip { width: .7rem; height: .7rem; border-radius: 50%; border: 1.5px solid var(--olive); }
.pip.on { background: var(--olive); }
.acts { display: flex; align-items: center; gap: .6rem; margin-inline-start: auto; flex-wrap: wrap; }
.btn { min-height: max(48px, 2.9rem); border-radius: .5rem; padding: .3rem 1.5rem; border: 1.5px solid var(--leather-2); font: 700 1.05rem/1 var(--body); color: #f8efd8;
  background: linear-gradient(#7a5735, #5c3f24); box-shadow: inset 0 1px 0 rgba(255,230,190,.25), 0 .15rem .3rem rgba(30,15,0,.3); transition: transform .08s ease; }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn.olive { background: linear-gradient(#5f6b34, #434d22); border-color: var(--olive-2); }
.btn.ghost { background: rgba(255,248,230,.55); color: var(--leather-2); border-color: #8f7552; box-shadow: none; }
.btn:disabled { background: rgba(226,210,172,.9); border-color: #8f7552; color: #5a4329; box-shadow: none; cursor: default; }
.btn small { display: block; font: 500 .7rem/1.1 var(--body); margin-top: .15rem; opacity: .9; }
.btn:not(:disabled) small { display: none; }
.hint { display: flex; align-items: center; gap: .45rem; padding: .1rem .6rem; background: none; border-style: solid; border-width: .5rem .55rem; min-height: max(48px, 2.9rem);
  border-image: url(assets/img/tile.webp) 30 34 30 34 fill / .5rem .55rem stretch; filter: drop-shadow(0 .12rem .14rem rgba(70,45,15,.28)); color: var(--leather-2); text-align: start; }
.hint svg { width: 1.45rem; height: 1.45rem; flex: none; }
.hint b { display: block; font: 600 .95rem/1.1 var(--body); }
.hint span { display: block; font: 400 .72rem/1.15 var(--body); color: var(--ink-2); }
.hint-box { margin-top: .6rem; padding: .45rem .8rem; border-radius: .4rem; background: rgba(255,240,200,.6); border: 1px dashed #b89b62; font-size: .92rem; color: var(--ink-2); }

.result { font: 400 1.5rem/1.15 var(--title); text-align: center; }
.result.right { color: var(--right); }
.result.wrong { color: var(--wrong); }
.loss { color: var(--wrong); font-weight: 700; }
.explain { text-align: center; color: var(--ink-2); font-size: .95rem; }

/* ---------- המלווה ---------- */
.guide { display: flex; gap: .7rem; align-items: center; }
.guide-face { flex: none; width: 4.6rem; height: 4.6rem; border-radius: 50%; overflow: hidden; background: #b9a47e; border: .2rem solid #e9dcbd; box-shadow: 0 0 0 1px #8f7552, 0 .2rem .4rem rgba(40,20,0,.3); }
.guide-face img { width: 100%; height: 160%; object-fit: cover; object-position: 50% 0; }
.guide .say { font-size: 1rem; line-height: 1.35; }
.guide .who { font: 600 .72rem/1 var(--body); color: var(--bronze); margin-bottom: .2rem; letter-spacing: .02em; }

/* ---------- פרס וסביבון ---------- */
.prize-layout { display: grid; grid-template-columns: 1fr auto; gap: 1.2rem; align-items: center; }
.prize-box { text-align: center; padding: .5rem .8rem; border-radius: .5rem; background: rgba(255,246,222,.5); border: 1.5px dashed #b89b62; }
.prize-label { font: 600 .85rem/1 var(--body); color: var(--ink-2); }
.prize-amount { display: flex; align-items: center; justify-content: center; gap: .5rem; font: 400 2.1rem/1.1 var(--title); font-variant-numeric: tabular-nums; }
.prize-amount .coin { width: 2rem; height: 2rem; }
.prize-amount small { font: 600 1rem var(--body); color: var(--ink-2); }
.pile { position: relative; height: 1.9rem; margin-top: .2rem; }
.pile .coin { position: absolute; width: 1.3rem; height: 1.3rem; transition: transform .7s, opacity .7s; }
.offer { font-size: .9rem; line-height: 1.3; color: var(--ink-2); margin-top: .55rem; text-align: center; }
.offer b { color: var(--ink); }
.legend { display: flex; gap: .35rem; justify-content: center; flex-wrap: wrap; margin-top: .45rem; }
.lg { display: flex; align-items: center; gap: .3rem; padding: .15rem .5rem .15rem .4rem; border-radius: .4rem; background: rgba(255,246,222,.6); border: 1px solid var(--line); font: 600 .78rem/1.2 var(--body); color: var(--ink-2); }
.lg b { font: 400 1.15rem/1 var(--title); color: #7a4a1e; }
.lg.good b { color: var(--right); }
.lg.bad b { color: var(--wrong); }
.lg.on { border-color: var(--bronze); box-shadow: 0 0 0 2px rgba(167,123,60,.35); }
.spins-left { font-size: .8rem; color: var(--ink-2); }

.table { position: relative; width: 9.5rem; aspect-ratio: 1; max-width: 100%; border-radius: 50%; background: radial-gradient(ellipse at 50% 60%, #9a6a3d, #6b4423 70%, #4e3018);
  box-shadow: inset 0 -.5rem 1.2rem rgba(0,0,0,.4), 0 .5rem 1rem rgba(0,0,0,.3); display: grid; place-items: center; }
.table::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; background: repeating-radial-gradient(circle at 50% 70%, transparent 0 .55rem, rgba(0,0,0,.07) .55rem .62rem); }
/* סביבון תלת־ממד: 4 דפנות עם מרקם העץ מהתמונה (wood.webp), גג, ידית וחוד. הסיבוב והתאורה – ב־app.js */
.d3 { --s: 3.3rem; position: relative; width: var(--s); height: var(--s); margin-top: calc(var(--s) * -.45); perspective: 22rem; }
.d3-cam, .d3-tilt, .d3-rot { position: absolute; inset: 0; transform-style: preserve-3d; }
.d3-cam { transform: rotateX(-18deg); }
.d3-tilt { transform-origin: 50% 185%; }
.d3-tilt.settle { transition: transform .5s cubic-bezier(.3,1.5,.5,1); }
.d3-side, .d3-top, .d3-tip { position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); backface-visibility: hidden; background: #b98a55 url(assets/img/wood.webp) center / cover; }
.d3-side { transform: rotateY(calc(var(--n) * 90deg)) translateZ(calc(var(--s) / 2)); display: grid; place-items: center; border-radius: .2rem; box-shadow: inset 0 0 .45rem rgba(90,50,15,.4); }
.d3-side span { font: 400 calc(var(--s) * .62)/1 var(--title); color: #4a2a0e; text-shadow: 0 1px 0 rgba(255,230,190,.5), 0 -1px 0 rgba(60,30,5,.4); }
.d3-top { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); border-radius: .2rem; }
.d3-tip { top: var(--s); height: calc(var(--s) * .986); transform-origin: 50% 0; transform: rotateY(calc(var(--n) * 90deg)) translateZ(calc(var(--s) / 2)) rotateX(-30.5deg); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.d3-handle { position: absolute; left: 34%; width: 32%; top: calc(var(--s) * -.6); height: calc(var(--s) * .6); border-radius: .35rem .35rem 0 0; background: linear-gradient(90deg, #8f6233, #e2bd84 45%, #c08d52 70%, #835528); }
.d3-handle.h2 { transform: rotateY(90deg); }
.d3-shadow { position: absolute; left: 50%; top: 74%; width: 42%; height: 11%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(rgba(25,12,0,.5), transparent 70%); pointer-events: none; }
.letter-result { text-align: center; margin-top: .3rem; min-height: 3.6rem; }
.letter-result .big { font: 400 2rem/1 var(--title); color: #7a4a1e; }
.letter-result .t { font-weight: 700; }
.fly-coin { position: fixed; z-index: 50; width: 1.5rem; height: 1.5rem; pointer-events: none; }

/* ---------- חנות ---------- */
.shop { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.shop-card { position: relative; background: none; border-style: solid; border-width: .5rem .55rem; border-image: url(assets/img/tile.webp) 30 34 30 34 fill / .5rem .55rem stretch;
  filter: drop-shadow(0 .12rem .14rem rgba(70,45,15,.28)); padding: .3rem .3rem .2rem; display: flex; flex-direction: column; align-items: center; gap: .15rem; text-align: center; }
.shop-card img { height: 3.6rem; width: 100%; object-fit: contain; }
.shop-card .nm { font: 400 1.05rem/1.1 var(--title); }
.shop-card .pr { display: flex; align-items: center; gap: .3rem; font-weight: 700; }
.shop-card .pr .coin { width: 1.15rem; height: 1.15rem; }
.shop-card::after { content: ""; position: absolute; inset: -.28rem -.32rem; border-radius: .2rem; pointer-events: none; opacity: 0; transition: opacity .15s; box-shadow: inset 0 0 0 .2rem var(--bronze); }
.shop-card.picked::after { opacity: 1; }
.shop-card .stamp { font: 700 .8rem/1 var(--body); background: var(--olive); color: #f4ecd6; padding: .2rem .45rem; border-radius: .4rem; }
.shop-card.done img { filter: none; }
.shop-detail { margin-top: .6rem; min-height: 2.9rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.shop-detail .grow { flex: 1; min-width: 10rem; }
.short { color: var(--wrong); font-weight: 700; }
.row { display: flex; align-items: center; gap: .6rem; margin-top: .75rem; flex-wrap: wrap; }
.row .grow { flex: 1; }
.need-list { display: flex; gap: .5rem; justify-content: center; margin: .5rem 0; flex-wrap: wrap; }
.need { display: flex; align-items: center; gap: .3rem; font: 600 .85rem/1 var(--body); padding: .25rem .5rem; border-radius: .4rem; border: 1px dashed #a48d66; color: var(--ink-2); }
.need img { height: 1.5rem; }
.need.got { border: 0; background: var(--olive); color: #f4ecd6; }

/* ---------- סרטון ---------- */
#video-layer { position: absolute; inset: 0; background: #000; z-index: 30; display: flex; align-items: center; justify-content: center; }
#video-layer[hidden] { display: none; }
#video { max-width: 100%; max-height: 100%; }
#video-missing { color: var(--parch); font-size: 1.3rem; }
#video-close { position: absolute; bottom: max(1rem, env(safe-area-inset-bottom)); left: max(1rem, env(safe-area-inset-left)); }

#rotate { display: none; position: absolute; inset: 0; z-index: 60; background: var(--night); color: var(--parch); font-size: 1.3rem; align-items: center; justify-content: center; text-align: center; padding: 20px; }
@media (orientation: portrait) and (max-width: 600px) { #rotate { display: flex; } }

/* טלפון לרוחב: כרטיס צמוד לתחתית, 8 אפשרויות ב־4 עמודות */
@media (max-height: 520px) {
  .card { bottom: max(.3rem, env(safe-area-inset-bottom)); border-width: 1.1rem 1.5rem; border-image-width: 1.1rem 1.5rem; max-height: calc(100% - 5.4rem); }
  .title { font-size: 1.5rem; margin-top: .25rem; }
  .title.sm { font-size: 1.25rem; }
  .rule { margin: .45rem auto .5rem; }
  .foot { margin-top: .6rem; }
  .opts.n8 { grid-template-columns: repeat(4, 1fr); gap: .4rem; }
  .opts.n8 .opt { justify-content: center; text-align: center; padding: .3rem 1.3rem; font-size: .88rem; line-height: 1.15; min-height: max(48px, 3.3rem); }
  .opt .tick { width: 1.35rem; height: 1.35rem; top: -.65rem; }
  .opts.pics .opt { min-height: 4.8rem; }
  .opt .pic { height: 2.8rem; }
  .table { width: 8rem; }
  .d3 { --s: 2.8rem; }
  .prize-box .pile { display: none; }
  .prize-box { padding: .3rem .6rem; }
  .explain { font-size: .82rem; }
  .offer { font-size: .8rem; margin-top: .35rem; }
  .legend { margin-top: .3rem; }
}
@media (max-width: 700px) and (orientation: portrait) {
  .opts.n8, .opts.n10, .opts.pics { grid-template-columns: repeat(2, 1fr); }
  .shop { grid-template-columns: 1fr; }
  .prize-layout { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .card.enter, #purse.bump, .sup.pop { animation: none; }
  .fire-glow { animation: none; }
  #camp.push { transform: none; }
}

/* חנות: סימון כמה חבילות (סל) */
.shop-card .tick { position: absolute; z-index: 2; top: -.75rem; inset-inline-start: -.6rem; width: 1.55rem; height: 1.55rem; background: url(assets/img/seal.png) center / contain no-repeat;
  opacity: 0; transform: scale(1.4) rotate(-12deg); transition: opacity .12s, transform .18s cubic-bezier(.3,1.6,.6,1); }
.shop-card.picked .tick { opacity: 1; transform: scale(1) rotate(-8deg); }
.shop-card.picked { background-color: transparent; }
.shop-card.picked::after { box-shadow: inset 0 0 0 .22rem var(--olive); }
.shop-card:disabled { cursor: default; }
.carry { display: flex; align-items: center; justify-content: center; gap: .45rem; margin-top: .5rem; padding: .4rem .7rem; border-radius: .5rem; background: rgba(255,246,222,.6); border: 1px dashed #b89b62; font-size: .92rem; color: var(--ink-2); text-align: start; }
.carry b { color: var(--ink); }

/* שאלת סידור (b8): משבצות 1–5, מהבכור (ימין) לצעיר (שמאל) */
.slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; }
.slot { position: relative; min-height: max(48px, 2.9rem); display: flex; align-items: center; justify-content: center; padding: .2rem .4rem; background: rgba(255,246,222,.35);
  border: .2rem dashed #b89b62; border-radius: .4rem; font: 400 1.15rem/1 var(--title); color: #2b1d10; }
.slot.full { border-style: solid; border-color: transparent; border-width: .5rem .55rem; border-image: url(assets/img/tile.webp) 30 34 30 34 fill / .5rem .55rem stretch; background: none; filter: drop-shadow(0 .12rem .14rem rgba(70,45,15,.28)); }
.slot .num, .opt .ordn { position: absolute; z-index: 2; top: -.6rem; inset-inline-start: -.5rem; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--leather); color: #f8efd8;
  font: 700 .75rem/1.35rem var(--body); text-align: center; box-shadow: 0 0 0 2px #f2e7cf; }
.opt .ordn:empty { display: none; }
.slot.ok .num { background: var(--right); }
.slot.bad .num { background: var(--wrong); }
.slot.bad .nm { color: var(--wrong); }
.slot-ends { display: flex; justify-content: space-between; font: 600 .75rem/1 var(--body); color: var(--ink-2); margin: .3rem .2rem .55rem; }
.opts.n5 { grid-template-columns: repeat(5, 1fr); }
.opt.placed { opacity: .45; }
.order-rev .lbl { font: 600 .8rem/1 var(--body); color: var(--ink-2); margin: .35rem 0 .55rem; }
.order-rev .slots + .lbl { margin-top: .8rem; }
@media (max-height: 520px) { .slot-ends { margin: .2rem .2rem .4rem; } .order-rev .lbl { margin: .2rem 0 .45rem; } }

/* כפתור ▶ גדול כשהדפדפן חוסם סאונד אוטומטי */
#video-play { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 6.5rem; height: 6.5rem; border-radius: 50%;
  border: 0; padding: 0 0 0 .5rem; display: grid; place-items: center; background: rgba(20,12,4,.55); color: #f6ead0; cursor: pointer;
  box-shadow: 0 0 0 .2rem rgba(246,234,208,.75), 0 .5rem 2rem rgba(0,0,0,.5); backdrop-filter: blur(4px); }
#video-play svg { width: 3.2rem; height: 3.2rem; }
#video-play[hidden] { display: none; }