:root {
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  --sky: #7fd3ff;
  --ink: #2b1d4a;
  --panel: #ffffff;
  --pop: #ff4fa3;
  --sun: #ffd23f;
}
:root:not([data-theme="light"]) { }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --sky: #243b7a; --ink: #f4efff; --panel: #1c1433; }
}
:root[data-theme="dark"] { --sky: #243b7a; --ink: #f4efff; --panel: #1c1433; }
*, *::before, *::after { box-sizing: inherit; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--sky);
  color: var(--ink);
  font-family: "Varela Round", "Arial Hebrew", Arial, sans-serif;
  display: flex; flex-direction: column; align-items: center;
  overflow: hidden;
}
header {
  width: 100%; max-width: 1100px;
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px; gap: 12px;
}
h1 { font-size: 1.3rem; margin: 0; }
.timer {
  background: var(--panel); border-radius: 999px;
  padding: 6px 16px; font-size: 1.2rem; min-width: 90px; text-align: center;
  border: 3px solid var(--ink);
}
.wrap { position: relative; width: 100%; max-width: 1100px; flex: 1; min-height: 0; padding: 0 12px 12px; }
canvas {
  width: 100%; height: 100%; display: block;
  border-radius: 18px; border: 4px solid var(--ink);
  touch-action: manipulation; background: #9be15d;
}
.overlay {
  position: absolute; inset: 0 12px 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 14px;
  background: rgba(43, 29, 74, 0.55); border-radius: 18px; color: #fff; text-align: center; padding: 20px;
}
.overlay.hidden { display: none; }
/* כשמסך ארוך מדי (למשל 12 מפות) — מתחילים מלמעלה וגוללים, במקום שהחלק העליון ייחתך */
.overlay > :first-child { margin-top: auto; }
.overlay > :last-child { margin-bottom: auto; }
.overlay p { margin: 0; font-size: 1.05rem; max-width: 34ch; line-height: 1.6; }
.big { font-size: 2rem; }
button {
  font-family: inherit; font-size: 1.3rem;
  background: var(--sun); color: #2b1d4a;
  border: 4px solid #2b1d4a; border-radius: 16px;
  padding: 10px 28px; cursor: pointer;
  box-shadow: 0 5px 0 #2b1d4a;
}
button:active { transform: translateY(4px); box-shadow: 0 1px 0 #2b1d4a; }
button:focus-visible { outline: 4px solid var(--pop); outline-offset: 3px; }

/* ---------- תפריט ומסך דמויות ---------- */
.overlay { overflow-y: auto; }
.overlay .hint { font-size: 0.9rem; opacity: 0.85; }
.row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
button.secondary { background: #fff; font-size: 1.1rem; padding: 8px 20px; }
button.play { font-size: 1.8rem; padding: 12px 48px; background: #6be36b; margin-top: 8px; }
button:disabled { opacity: 0.55; cursor: default; }
.menu-pet { width: 180px; height: 130px; border: none; background: none; border-radius: 0; }
.char-big { width: min(320px, 80%); height: 220px; border: none; background: rgba(255,255,255,0.15); border-radius: 18px; }
.cards {
  display: grid; gap: 12px; width: 100%; max-width: 760px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.card {
  background: var(--panel); color: var(--ink);
  border: 4px solid #2b1d4a; border-radius: 16px; box-shadow: 0 5px 0 #2b1d4a;
  padding: 8px; font-size: 1.1rem; display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.card canvas { width: 100%; height: 90px; border: none; background: none; border-radius: 0; }
.card small { font-size: 0.8rem; opacity: 0.75; }
.card.selected { background: var(--sun); color: #2b1d4a; }
.overlay.solid { background: rgba(43, 29, 74, 0.88); }

/* ---------- דמויות נעולות ונדירות ---------- */
.card { position: relative; }
.card.locked canvas { opacity: 0.8; }   /* נעולה: שומרת על הצבעים (כמו פינקס הזהובה), רק קצת חיוורת */
.card .lock {
  background: #2b1d4a; color: #fff; border-radius: 999px;
  padding: 2px 10px; font-size: 0.9rem; margin-top: 4px;
}
.rare-tag { color: #b8860b; font-weight: bold; font-size: 0.85rem; }
#charRare { color: var(--sun); font-size: 1.2rem; }
.card.rare {
  border-color: #d4a017; box-shadow: 0 5px 0 #8a6a00, 0 0 18px #ffd23f;
  background: linear-gradient(160deg, #fff8d6, #ffe27a 55%, #fff3b0);
  animation: shine 1.6s ease-in-out infinite alternate;
}
.char-big.rare { border: 4px solid #ffd23f; box-shadow: 0 0 24px #ffd23f; }
.price { font-size: 1.1rem; }
@keyframes shine { from { box-shadow: 0 5px 0 #8a6a00, 0 0 8px #ffd23f; } to { box-shadow: 0 5px 0 #8a6a00, 0 0 26px #ffd23f; } }
@media (prefers-reduced-motion: reduce) { .card.rare { animation: none; } }

/* ---------- לחצני משחק ---------- */
.controls {
  position: absolute; inset: auto 12px 12px; padding: 12px 16px;
  display: flex; justify-content: space-between; align-items: flex-end;
  pointer-events: none;   /* רק הלחצנים עצמם לוחצים */
}
.controls.hidden { display: none; }
.ctl-col { display: flex; flex-direction: column; gap: 10px; }
.ctl {
  pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none;
  font-size: 1.6rem; padding: 8px 18px; min-width: 76px; min-height: 60px;
  display: flex; flex-direction: column; align-items: center; line-height: 1.1;
  background: rgba(255, 255, 255, 0.9);
}
.ctl small { font-size: 0.75rem; }
.ctl.forward { font-size: 1.5rem; min-width: 130px; min-height: 90px; background: #6be36b; justify-content: center; }

/* ---------- עיגול הסופר ---------- */
.ctl.super {
  --p: 0%;
  width: 84px; height: 84px; min-width: 0; min-height: 0; padding: 0; border-radius: 50%;
  justify-content: center; font-size: 1.5rem; font-weight: bold;
  /* הטבעת מתמלאת לפי כמה הסופר נטען */
  background:
    radial-gradient(circle, #fff 58%, transparent 60%),
    conic-gradient(#ffb800 var(--p), #d9d3e8 0);
  box-shadow: 0 5px 0 #2b1d4a;
}
.ctl.super.ready {
  background: radial-gradient(circle, #ffe45c 58%, transparent 60%), conic-gradient(#ffb800 100%, #ffb800 0);
  animation: superPulse 0.9s ease-in-out infinite alternate;
}
.ctl.super.aiming { background: #ff4fa3; color: #fff; animation: none; }
@keyframes superPulse { from { transform: scale(1); } to { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .ctl.super.ready { animation: none; } }

.toast {
  position: absolute; top: 60px; left: 50%; transform: translateX(-50%);
  background: #2b1d4a; color: #fff; border-radius: 12px; padding: 8px 16px;
  font-size: 1rem; opacity: 0; transition: opacity 0.3s; pointer-events: none; z-index: 5; max-width: 90%; text-align: center;
}
.toast.show { opacity: 1; }

/* ---------- מסך סיום: המקומות ---------- */
.places {
  list-style: none; margin: 0; padding: 0; width: 100%; max-width: 360px;
  display: flex; flex-direction: column; gap: 6px;
}
.places li {
  display: grid; grid-template-columns: 2.2em 1fr auto; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, 0.14); border-radius: 12px; padding: 6px 12px; text-align: start;
  font-variant-numeric: tabular-nums;
}
.places li.me { background: var(--sun); color: #2b1d4a; }
.places .pl { font-size: 1.3rem; text-align: center; }
.places .tm { font-size: 0.9rem; opacity: 0.85; }
/* 🎟️ בראול פאס */
.pass-bar { flex-shrink: 0; width: 100%; max-width: 560px; height: 16px; background: rgba(255,255,255,0.2); border-radius: 8px; overflow: hidden; }
#passBarFill { height: 100%; width: 0; background: linear-gradient(90deg, #ffd23f, #ff9f1c); transition: width 0.4s; }
.pass-list { flex-shrink: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; width: 100%; max-width: 560px; }
.pass-tier { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 12px;
  background: rgba(255,255,255,0.12); border: 3px solid transparent; }
.pass-tier .pass-num { font-weight: bold; font-size: 0.9rem; opacity: 0.8; }
.pass-tier .pass-prize { font-size: 1.05rem; font-weight: bold; text-align: center; }
.pass-tier button { font-size: 0.85rem; padding: 4px 10px; }
.pass-tier.locked { opacity: 0.5; }
.pass-tier.ready { border-color: #ffd23f; background: rgba(255, 210, 63, 0.25); }
.pass-tier.claimed { background: rgba(107, 227, 107, 0.25); }
.pass-tier.mega { grid-column: 1 / -1; border-color: #ff9f1c; }
#passNewBtn.hidden { display: none; }
/* ❓ מדריך */
.guide { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 560px; text-align: start; }
.guide-sec { background: rgba(255, 255, 255, 0.14); border-radius: 12px; padding: 8px 14px; }
.guide-sec summary { cursor: pointer; font-size: 1.2rem; font-weight: bold; padding: 4px 0; }
.guide-sec p { max-width: none; margin: 8px 0; font-size: 1rem; line-height: 1.6; }
/* ⚙️ הגדרות */
.settings { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 360px; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: rgba(255, 255, 255, 0.14); border-radius: 12px; padding: 10px 14px; font-size: 1.1rem; }
.setting-row .tab { min-width: 110px; }
.lang-btns { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.lang-btns .tab { min-width: 0; }
.chars-count { font-size: 1.15rem; font-weight: bold; background: rgba(255,255,255,0.15); border-radius: 999px; padding: 4px 16px; }
/* 📖 היומן */
.places.journal { max-width: 460px; }
.places li.won { background: rgba(107, 227, 107, 0.28); }
.places li.lost { background: rgba(255, 255, 255, 0.1); }
.places.journal small { font-weight: normal; font-size: 0.8rem; opacity: 0.9; }

/* ---------- ארנק, פרסים ושדרוגים ---------- */
.wallet {
  background: var(--panel); border: 3px solid var(--ink); border-radius: 999px;
  padding: 4px 14px; font-size: 1.05rem; white-space: pre; font-variant-numeric: tabular-nums;
}
.prize { font-size: 1.3rem; font-weight: bold; color: var(--sun); }
.stars { font-size: 1.4rem; letter-spacing: 2px; color: var(--sun); }
.toast { z-index: 20; }

/* ---------- החנות ---------- */
.shop-title { margin: 4px 0 0; font-size: 1.2rem; }
.card .buy { font-size: 1rem; padding: 4px 14px; margin-top: 4px; box-shadow: 0 3px 0 #2b1d4a; border-width: 3px; }

/* ---------- תיבות וסקינים ---------- */
.chest { font-size: 7rem; line-height: 1; }
.chest.shake { animation: chestShake 0.15s linear infinite; }
.chest.open { animation: chestPop 0.4s ease-out forwards; }
@keyframes chestShake { 0% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } 100% { transform: rotate(-8deg); } }
@keyframes chestPop { from { transform: scale(1); opacity: 1; } to { transform: scale(1.6); opacity: 0.25; } }
.chest-prize { font-size: 1.6rem; font-weight: bold; min-height: 2em; opacity: 0; transform: scale(0.3); transition: transform 0.4s cubic-bezier(.2,1.6,.4,1), opacity 0.3s; }
.chest-prize.show { opacity: 1; transform: scale(1); }
.chest-prize .icon { font-size: 4.5rem; }
.chest-prize.rare { color: var(--sun); text-shadow: 0 0 18px #ffd23f; }
.hidden-btn { visibility: hidden; }
.skin-btn { font-size: 1.6rem; padding: 4px 12px; }
.skin-btn.on { background: var(--sun); }
@media (prefers-reduced-motion: reduce) { .chest.shake, .chest.open { animation: none; } }
.skin-shop { display: flex; flex-direction: column; align-items: center; padding: 6px 12px; min-width: 84px; gap: 2px; }
.skin-shop .skin-emoji { font-size: 2rem; line-height: 1.1; }
.skin-shop small { font-size: 0.8rem; }
.skin-shop.cant { opacity: 0.5; }                 /* אין מספיק מטבעות */
.skin-shop.wearing { background: var(--sun); }    /* זה מה שהדמות לובשת עכשיו */

/* ---------- לוח תוצאות ---------- */
.name-form { align-items: center; }
.name-form input {
  font-family: inherit; font-size: 1.1rem; padding: 6px 12px; width: 11em; max-width: 60vw;
  border: 3px solid #2b1d4a; border-radius: 12px; background: #fff; color: #2b1d4a;
}
.name-form input:focus-visible { outline: 4px solid var(--pop); outline-offset: 2px; }

/* ---------- מפות ---------- */
.maps { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; width: 100%; max-width: 520px; }
.map-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--panel); color: var(--ink); font-size: 1.15rem; padding: 12px;
}
.map-card small { font-size: 0.85rem; opacity: 0.8; line-height: 1.4; }
.map-emoji { font-size: 2.6rem; }
.map-check { visibility: hidden; font-size: 0.95rem; font-weight: bold; }
.map-card.on { background: var(--sun); color: #2b1d4a; outline: 4px solid var(--pop); outline-offset: 2px; }
.map-card.on .map-check { visibility: visible; }

.ctl.spy { min-width: 84px; min-height: 84px; border-radius: 50%; padding: 0; justify-content: center; }
.ctl.spy.on { background: var(--sun); }
.ctl.hidden { display: none; }

/* ---------- חברים ---------- */
.friends { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; width: 100%; max-width: 820px; }
.friends[hidden] { display: none; }
.friend-box { background: rgba(255,255,255,0.1); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.qr { width: 180px; height: 180px; max-width: 100%; border: none; border-radius: 12px; background: #fff; image-rendering: pixelated; }
.code { font-family: monospace; font-size: 1.2rem; letter-spacing: 2px; color: var(--sun); }
.scan-btn {
  font-size: 1.15rem; background: var(--sun); color: #2b1d4a; border: 4px solid #2b1d4a; border-radius: 16px;
  padding: 8px 18px; cursor: pointer; box-shadow: 0 5px 0 #2b1d4a;
}
.search { font-family: inherit; font-size: 1.1rem; padding: 6px 12px; width: 100%; border: 3px solid #2b1d4a; border-radius: 12px; }
.small-btn { font-size: 0.9rem; padding: 2px 10px; border-width: 3px; box-shadow: 0 3px 0 #2b1d4a; }
.friend-box .places li { grid-template-columns: 1fr auto auto; }

/* ---------- קטגוריות בלוח התוצאות ---------- */
.tabs { gap: 8px; }
.tab { font-size: 1rem; padding: 6px 16px; background: rgba(255,255,255,0.85); border-width: 3px; box-shadow: 0 3px 0 #2b1d4a; }
.tab.on { background: var(--sun); }