* { margin:0; padding:0; box-sizing:border-box; }
body { min-height:100vh; background:#0f1620; color:#e8eef5; font-family:"Segoe UI",system-ui,sans-serif; direction:rtl; }

/* ---------- STORE ---------- */
.site-head { display:flex; align-items:center; padding:16px 28px; background:linear-gradient(90deg,#172230,#1e2c3d); border-bottom:2px solid #2a3b4f; position:sticky; top:0; z-index:40; }
.logo { font-size:24px; font-weight:800; letter-spacing:1px; }
.logo span { color:#4fd1c5; }
.hero { margin:24px 28px 8px; padding:40px; border-radius:14px; background:radial-gradient(circle at 80% 20%,rgba(79,209,197,.25),transparent 60%),linear-gradient(135deg,#1b2a3d,#12324a); border:1px solid #2a3b4f; }
.hero h1 { font-size:34px; margin-bottom:10px; }
.hero p { color:#8ba0b5; max-width:480px; line-height:1.6; }
.hero .tag { display:inline-block; background:#ffd166; color:#0f1620; font-weight:700; font-size:12px; padding:4px 12px; border-radius:20px; margin-bottom:14px; }
.section-title { margin:28px 28px 14px; font-size:20px; font-weight:700; display:flex; align-items:center; gap:10px; }
.section-title::before { content:""; width:4px; height:20px; background:#4fd1c5; border-radius:2px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:18px; padding:0 28px 40px; }
.gcard { background:#172230; border:1px solid #2a3b4f; border-radius:12px; overflow:hidden; cursor:pointer; transition:transform .15s,border-color .15s; display:flex; flex-direction:column; }
.gcard:hover { transform:translateY(-4px); border-color:#4fd1c5; }
.gcard:focus-visible { outline:3px solid #4fd1c5; outline-offset:2px; }
.gthumb { height:130px; display:flex; align-items:center; justify-content:center; position:relative; }
.gicon { font-size:52px; }
.gbadge { position:absolute; top:10px; right:10px; background:rgba(0,0,0,.5); color:#4fd1c5; font-size:11px; font-weight:700; padding:3px 8px; border-radius:12px; }
.gbody { padding:14px; flex:1; display:flex; flex-direction:column; }
.gbody h3 { font-size:17px; margin-bottom:4px; }
.gbody p { font-size:13px; color:#8ba0b5; line-height:1.5; flex:1; }
.gplay { margin-top:12px; background:#4fd1c5; color:#0f1620; border:none; font-family:inherit; font-weight:700; font-size:14px; padding:9px; border-radius:6px; cursor:pointer; }
.gplay.soon { background:#2a3b4f; color:#8ba0b5; cursor:default; }
.site-foot { text-align:center; color:#8ba0b5; font-size:13px; padding:24px; border-top:1px solid #2a3b4f; }

/* ---------- GAME HOST ---------- */
#gameHost { display:none; flex-direction:column; position:fixed; inset:0; width:100vw; height:100vh; background:#0d1620; z-index:50; }
.host-bar { display:flex; align-items:center; gap:14px; padding:12px 24px; background:#172230; border-bottom:1px solid #2a3b4f; flex-shrink:0; }
.host-bar span { font-size:18px; font-weight:700; margin-right:auto; }
#backBtn { background:#d9856b; color:#0f1620; border:none; font-family:inherit; font-weight:700; padding:8px 18px; border-radius:6px; cursor:pointer; }
#gameMount { flex:1; display:flex; align-items:center; justify-content:center; padding:16px; overflow:auto; }

/* ---------- DINO GAME ---------- */
.dinoWrap { display:flex; flex-direction:column; align-items:center; gap:10px; font-family:"Courier New",monospace; width:100%; height:100%; justify-content:center; }
.dinoStage { position:relative; border-radius:12px; overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,.5); width:100%; max-width:820px; margin:0 auto; }
.dinoStage canvas { display:block; width:100%; height:auto; max-height:300px; }
.dinoTop { display:flex; align-items:center; gap:16px; }
.dinoTitle { font-size:22px; letter-spacing:3px; color:#ffd166; font-weight:800; }
#shopBtn { font-family:inherit; font-size:14px; font-weight:700; padding:8px 16px; border:none; border-radius:8px; background:#ffd166; color:#0d1620; cursor:pointer; }
#shopBtn:hover { filter:brightness(1.08); }
.dinoHint { font-size:12px; color:#8ba0b5; letter-spacing:1px; text-align:center; }
#nameScreen { position:absolute; inset:0; background:rgba(8,12,18,.95); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; z-index:10; }
#nameScreen h2 { color:#ffd166; font-size:22px; }
#nameInput { font-family:inherit; font-size:18px; padding:10px 16px; border-radius:8px; border:2px solid #2a3b4f; background:#172230; color:#e8eef5; text-align:center; width:220px; }
#nameInput:focus { outline:none; border-color:#4fd1c5; }
#nameErr { color:#d9856b; font-size:13px; min-height:16px; text-align:center; }
.dbtn { font-family:inherit; font-size:16px; font-weight:700; padding:10px 24px; border:none; border-radius:8px; background:#4fd1c5; color:#0d1620; cursor:pointer; }
.dbtn:hover { filter:brightness(1.1); }
#shopScreen { position:absolute; inset:0; background:rgba(8,12,18,.97); display:none; flex-direction:column; z-index:20; padding:16px; }
.shopHead { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.shopHead h2 { color:#ffd166; font-size:18px; }
.shopCoins { color:#ffd166; font-weight:700; font-size:18px; }
#shopClose { font-family:inherit; font-size:14px; font-weight:700; padding:8px 16px; border:none; border-radius:8px; background:#d9856b; color:#0d1620; cursor:pointer; }
#shopGrid { flex:1; overflow-y:auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:10px; align-content:start; }
.shopCard { background:#172230; border:2px solid #2a3b4f; border-radius:10px; padding:8px; display:flex; flex-direction:column; align-items:center; gap:5px; }
.shopCard.current { border-color:#4fd1c5; }
.shopCard.premium { border-color:#c9932f; background:#20242e; }
.shopCard .thumb { height:80px; display:flex; align-items:center; justify-content:center; }
.shopCard .thumb img { max-height:80px; max-width:70px; }
.cname { font-size:13px; font-weight:700; text-align:center; }
.sbtn { font-family:inherit; font-size:12px; font-weight:700; padding:6px 10px; border:none; border-radius:6px; cursor:pointer; width:100%; }
.sbtn.buy { background:#ffd166; color:#0d1620; }
.sbtn.use { background:#4fd1c5; color:#0d1620; }
.sbtn.nope { background:#d9856b; color:#0d1620; }
.tag.sel { font-size:12px; font-weight:700; color:#4fd1c5; padding:6px; }
#board { width:100%; max-width:340px; max-height:200px; overflow-y:auto; margin:12px auto 0; background:#141d28; border:1px solid #2a3b4f; border-radius:12px; padding:8px 12px; }
#board h3 { position:sticky; top:0; background:#141d28; color:#ffd166; font-size:13px; margin-bottom:6px; padding:3px 0; letter-spacing:1px; text-align:center; }
.brow { display:flex; justify-content:space-between; padding:2px 5px; border-radius:4px; font-size:12px; }
#board::-webkit-scrollbar { width:4px; }
#board::-webkit-scrollbar-track { background:transparent; }
#board::-webkit-scrollbar-thumb { background:rgba(255,255,255,.2); border-radius:2px; }
.brow.me { background:rgba(79,209,197,.15); }
.brow .rank { color:#8ba0b5; width:36px; }
.brow .nm { flex:1; }
.brow .sc { color:#ffd166; font-weight:700; }
.brow.head { color:#8ba0b5; font-size:12px; border-bottom:1px solid #2a3b4f; margin-bottom:4px; }
#empty { color:#8ba0b5; text-align:center; padding:10px; font-size:14px; }


/* ================================================
   Memory Adjustment — להוסיף לסוף style.css
   ================================================ */

.mem-wrap {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  font-family: 'Rubik', system-ui, sans-serif;
}

/* רקע צבעוני מטושטש */
.mem-bg {
  position: absolute;
  inset: 0;
  background-image: url('memory-bg.jpg');
  background-size: cover;
  background-position: center;
  filter: saturate(1.1);
  z-index: 0;
}
.mem-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 14, 30, 0.55);
  backdrop-filter: blur(2px);
}

.mem-inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 16px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---- לוגו ---- */
.mem-top { margin: 4px 0 14px; }
.mem-logo {
  height: 110px;
  width: auto;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,0.45));
}

/* ---- HUD ---- */
.mem-hud {
  display: flex;
  gap: 10px;
  align-items: stretch;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 10px;
}
.mem-stat {
  background: rgba(15, 22, 45, 0.72);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  padding: 7px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 74px;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  backdrop-filter: blur(8px);
}
.mem-stat-l {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8fa3c8;
  margin-bottom: 1px;
}
.mem-stat.mem-time span:last-child { color: #4ee1c1; }

.mem-btn-icon {
  background: rgba(15, 22, 45, 0.72);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  padding: 0 14px;
  transition: all 0.18s;
  backdrop-filter: blur(8px);
}
.mem-btn-icon:hover { border-color: #4ee1c1; transform: translateY(-2px); }
.mem-btn-icon.on { border-color: #4ee1c1; box-shadow: 0 0 14px rgba(78,225,193,0.3); }

/* ---- בר זמן ---- */
.mem-barwrap {
  width: 100%;
  max-width: 640px;
  height: 7px;
  background: rgba(255,255,255,0.14);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 18px;
}
.mem-bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #4ee1c1, #6ee7ff);
  border-radius: 99px;
  transition: width 1s linear, background 0.4s;
}
.mem-bar.low {
  background: linear-gradient(90deg, #ff6b6b, #ffa94d);
  animation: memPulse 0.9s infinite;
}
@keyframes memPulse { 50% { opacity: 0.55; } }

/* ---- לוח ---- */
.mem-board {
  display: grid;
  gap: 10px;
  width: 100%;
  max-width: 780px;
  perspective: 1200px;
}
.mem-board.size-28, .mem-board.size-32 { gap: 7px; max-width: 900px; }
.mem-board.size-24 { gap: 8px; max-width: 840px; }

/* ---- קלף ---- */
.mem-card {
  aspect-ratio: 3 / 4;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  perspective: 800px;
}
.mem-card-in {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.42s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.mem-card.flip .mem-card-in { transform: rotateY(180deg); }

.mem-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* גב הקלף */
.mem-back {
  background: linear-gradient(145deg, #2a3f6f 0%, #16244a 100%);
  border: 2px solid rgba(120, 160, 255, 0.35);
  color: rgba(140, 180, 255, 0.5);
  font-size: 30px;
  font-weight: 900;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.1);
}
.mem-card:hover .mem-back {
  border-color: rgba(120, 200, 255, 0.75);
  box-shadow: 0 6px 20px rgba(60,140,255,0.35), inset 0 1px 0 rgba(255,255,255,0.15);
}

/* פנים הקלף */
.mem-front {
  background: linear-gradient(145deg, #ffffff 0%, #e8eefc 100%);
  border: 2px solid rgba(255,255,255,0.9);
  transform: rotateY(180deg);
  font-size: 40px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}

/* גדלי אימוג'י לפי כמות קלפים */
.size-20 .mem-front, .size-24 .mem-front { font-size: 34px; }
.size-28 .mem-front, .size-32 .mem-front { font-size: 27px; }
.size-28 .mem-back,  .size-32 .mem-back  { font-size: 22px; }

/* קלף שהותאם */
.mem-card.done { cursor: default; }
.mem-card.done .mem-front {
  background: linear-gradient(145deg, #d4fff2 0%, #a8f5e0 100%);
  border-color: #4ee1c1;
  box-shadow: 0 0 18px rgba(78,225,193,0.55);
}
.mem-card.done .mem-card-in { animation: memPop 0.42s ease; }
@keyframes memPop {
  0%   { transform: rotateY(180deg) scale(1); }
  45%  { transform: rotateY(180deg) scale(1.13); }
  100% { transform: rotateY(180deg) scale(1); }
}

/* ---- אוברליי ---- */
.mem-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 10, 24, 0.82);
  backdrop-filter: blur(10px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
.mem-overlay.show { display: flex; animation: memFade 0.3s ease; }
@keyframes memFade { from { opacity: 0; } }

.mem-card-panel {
  background: linear-gradient(160deg, #182a55 0%, #0e1730 100%);
  border: 1px solid rgba(120, 170, 255, 0.3);
  border-radius: 20px;
  padding: 36px 44px;
  text-align: center;
  max-width: 420px;
  box-shadow: 0 22px 60px rgba(0,0,0,0.6);
}
.mem-card-panel h2 {
  color: #fff;
  font-size: 27px;
  margin: 0 0 12px;
  font-weight: 800;
}
.mem-card-panel p {
  color: #a8bcdd;
  font-size: 15px;
  line-height: 1.65;
  margin: 0 0 24px;
}
.mem-card-panel b { color: #4ee1c1; }

.mem-btn {
  background: linear-gradient(135deg, #4ee1c1, #35c9e8);
  color: #062033;
  border: none;
  border-radius: 12px;
  padding: 13px 40px;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.16s, box-shadow 0.16s;
}
.mem-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(78,225,193,0.45);
}

/* ---- מובייל ---- */
@media (max-width: 640px) {
  .mem-logo { height: 72px; }
  .mem-stat { min-width: 60px; padding: 5px 11px; font-size: 15px; }
  .mem-board { gap: 6px; }
  .mem-front { font-size: 27px; }
  .size-28 .mem-front, .size-32 .mem-front { font-size: 18px; }
  .mem-card-panel { padding: 28px 24px; margin: 16px; }
}


/* ============================================================
   CHESS PRESTIGE — עיצוב מאת רובין שמואלי
   להוסיף לסוף style.css
   ============================================================ */

.chessRoot { --ch-ink:#f4f0e8; --ch-muted:#9da199; --ch-bg:#171917; --ch-cream:#f1d9ad; --ch-green:#a96536; --ch-accent:#f3a84b;
  width:100%; min-height:100%; background:var(--ch-bg); color:var(--ch-ink); font-family:"Assistant","Rubik",system-ui,sans-serif; position:relative; direction:rtl; }
.chessRoot * { box-sizing:border-box; }
.chessRoot button { font:600 15px "Assistant","Rubik",system-ui; border:0; cursor:pointer; transition:.2s ease; }
.ch-hidden { display:none !important; }

/* ---------- לובי ---------- */
.ch-lobby { min-height:100%; display:grid; place-items:center; padding:32px; }
.ch-lobby-shell { width:min(100%,980px); display:grid; grid-template-columns:.85fr 1.15fr; gap:70px; position:relative; }
.ch-lobby-brand { grid-column:1/-1; direction:ltr; justify-self:start; letter-spacing:.22em; font-size:14px; font-weight:700; display:flex; align-items:center; gap:11px; }
.ch-brand-mark { color:var(--ch-accent); font-size:30px; }
.ch-lobby-copy h2 { font:400 clamp(40px,6vw,85px)/.85 "DM Serif Display",Georgia,serif; margin:28px 0 35px; letter-spacing:-.04em; }
.ch-lobby-copy h2 em { color:var(--ch-accent); font-weight:400; }
.ch-lobby-copy>p:last-child { color:var(--ch-muted); }
.ch-eyebrow { color:var(--ch-accent); font-size:12px; font-weight:700; letter-spacing:.14em; }
.ch-mode-cards { display:grid; gap:14px; align-content:center; }
.ch-mode-card { text-align:right; width:100%; padding:25px; background:#222521; border:1px solid #343832; color:var(--ch-ink); display:grid; grid-template-columns:58px 1fr auto; align-items:center; gap:18px; }
.ch-mode-card:hover { border-color:var(--ch-accent); transform:translateX(-5px); }
.ch-mode-card strong, .ch-mode-card small { display:block; }
.ch-mode-card strong { font-size:19px; }
.ch-mode-card small { color:var(--ch-muted); margin-top:5px; font-weight:400; }
.ch-mode-card b { color:var(--ch-accent); font-size:22px; }
.ch-mode-icon { font-size:35px; color:var(--ch-accent); }
.ch-continue-card { border-color:var(--ch-accent) !important; }
.ch-learn-card .ch-mode-icon { width:36px; height:36px; border:2px solid var(--ch-accent); border-radius:50%; display:grid; place-items:center; font:bold 20px serif; }
.ch-lobby-settings { position:absolute; top:0; left:0; background:transparent; color:var(--ch-muted); border:1px solid #3c403b; padding:10px 15px; }
.ch-lobby-settings:hover { color:var(--ch-accent); border-color:var(--ch-accent); }

.ch-setup-panel { align-self:center; background:#222521; border:1px solid #343832; padding:28px; }
.ch-setup-panel h3 { font-size:25px; margin:22px 0; }
.ch-back { background:transparent; color:var(--ch-muted); padding:0; }
.ch-back:hover { color:var(--ch-ink); }
.ch-levels { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.ch-levels button { background:#30342f; color:var(--ch-ink); padding:20px 8px; border:1px solid transparent; }
.ch-levels button:hover { border-color:var(--ch-accent); color:var(--ch-accent); }

/* ---------- שיעורים ---------- */
.ch-tutorial-panel { grid-column:2; min-width:0; }
.ch-tutorial-panel h3 { margin-bottom:7px; }
.ch-tutorial-panel>p { color:var(--ch-muted); margin-top:0; min-height:42px; }
.ch-lesson-count { color:var(--ch-accent); font-size:12px; margin-top:18px; }
.ch-tutorial-board { direction:ltr; width:min(100%,430px); aspect-ratio:1; display:grid; grid-template-columns:repeat(8,1fr); grid-template-rows:repeat(8,1fr); margin:18px auto; box-shadow:0 14px 30px #0007; }
.ch-tutorial-square { display:grid; place-items:center; background:#ead8b8; position:relative; border:0; padding:0; }
.ch-tutorial-square.ch-dark { background:#96613d; }
.ch-tutorial-square.ch-hint::after { content:""; position:absolute; width:25%; aspect-ratio:1; border-radius:50%; background:var(--ch-accent); box-shadow:0 0 12px #f3a84b; }
.ch-tutorial-square.ch-focus { box-shadow:inset 0 0 0 4px var(--ch-accent); }
.ch-tutorial-piece { font:clamp(22px,4vw,42px)/1 "Arial Unicode MS","Segoe UI Symbol"; color:#f8f1df; text-shadow:0 2px 2px #0008; }
.ch-tutorial-piece.ch-black { color:#171717; }
.ch-tutorial-flying { position:fixed; z-index:120; display:grid; place-items:center; pointer-events:none; transition:transform 260ms cubic-bezier(.22,.75,.25,1); }
.ch-lesson-controls { display:flex; justify-content:space-between; gap:12px; }
.ch-lesson-controls button { min-width:100px; justify-content:center; }
.ch-lesson-controls button:disabled { opacity:.3; }
.ch-mate-demo .ch-tutorial-square:nth-child(7)::after, .ch-mate-demo .ch-tutorial-square:nth-child(16)::after { position:absolute; z-index:8; color:#ff3b32; font:bold clamp(16px,2.5vw,26px)/1 sans-serif; text-shadow:0 0 7px #ff3322; animation:ch-mate-alert .65s ease-in-out infinite alternate; }
.ch-mate-demo .ch-tutorial-square:nth-child(7)::after { content:"✕  ⬅"; right:-14%; white-space:nowrap; }
.ch-mate-demo .ch-tutorial-square:nth-child(16)::after { content:"⬇\A✕"; top:-22%; right:28%; white-space:pre; line-height:1.05; text-align:center; }
@keyframes ch-mate-alert { from{opacity:.55;scale:.9} to{opacity:1;scale:1.12} }

/* ---------- מסך המשחק ---------- */
.ch-app { min-height:100%; display:grid; grid-template-columns:minmax(220px,.5fr) minmax(500px,1.5fr); }
.ch-hero { padding:clamp(20px,3vw,50px); display:flex; flex-direction:column; border-left:1px solid #4b3025; }
.ch-brand { direction:ltr; letter-spacing:.22em; font-size:14px; font-weight:700; display:flex; align-items:center; gap:10px; }
.ch-hero-copy { margin:auto 0; }
.ch-hero-copy h1 { font-family:"DM Serif Display",Georgia,serif; font-weight:400; font-size:clamp(48px,6vw,100px); line-height:.72; margin:35px 0 45px; letter-spacing:-.04em; }
.ch-hero-copy h1 em { color:var(--ch-accent); font-weight:400; }
.ch-intro { color:var(--ch-muted); line-height:1.8; font-size:16px; }
.ch-controls { display:flex; gap:10px; flex-wrap:wrap; }
.ch-primary { background:var(--ch-accent); color:#171917; padding:14px 20px; min-width:120px; display:flex; justify-content:space-between; }
.ch-primary:hover { background:#ffc06e; transform:translateY(-2px); }
.ch-secondary { background:transparent; color:var(--ch-muted); border:1px solid #3c403b; padding:13px 18px; }
.ch-secondary:hover { color:var(--ch-ink); border-color:#777; }
.ch-secondary:disabled { opacity:.35; cursor:not-allowed; }

.ch-game-area { display:flex; flex-direction:column; justify-content:center; padding:clamp(10px,2vw,32px); max-width:1000px; width:100%; margin:auto; }
.ch-player { display:flex; align-items:center; gap:13px; padding:10px 0; color:var(--ch-muted); }
.ch-player strong { color:var(--ch-ink); display:block; font-size:16px; }
.ch-avatar { width:38px; height:38px; display:grid; place-items:center; background:#30332f; font-size:23px; }
.ch-avatar.ch-light { background:var(--ch-cream); color:#222; }
.ch-captures { font-size:13px; min-height:16px; display:block; direction:ltr; }
.ch-turn-dot { width:8px; height:8px; border-radius:50%; margin-right:auto; background:#4a4e48; }
.ch-turn-dot.ch-on { background:var(--ch-accent); box-shadow:0 0 12px #f3a84b66; }

.ch-board-wrap { width:min(100%,calc(100vh - 230px)); aspect-ratio:1; padding:14px; background:repeating-linear-gradient(7deg,#8d4525 0 5px,#a85b32 6px 12px,#7f3d22 13px 18px,#b7683b 19px 27px); border:3px solid #562b1c; outline:2px solid #c7824c; outline-offset:-7px; box-shadow:inset 0 0 0 5px #2b211c,inset 0 0 0 9px #e5bd7b,0 30px 70px #000b; margin-inline:auto; }
.ch-board { width:100%; height:100%; display:grid; direction:ltr; grid-template-columns:repeat(8,minmax(0,1fr)); grid-template-rows:repeat(8,minmax(0,1fr)); user-select:none; }
.ch-square { position:relative; display:grid; place-items:center; background-color:var(--ch-cream); background-image:linear-gradient(#fff1,#6e3d1110); cursor:pointer; border:0; padding:0; box-shadow:inset 0 0 8px #74451620; }
.ch-square.ch-dark { background-color:var(--ch-green); background-image:linear-gradient(#fff1,#35100018); box-shadow:inset 0 0 10px #2b0d0040; }
.ch-piece { font-family:"Arial Unicode MS","Segoe UI Symbol",sans-serif; font-size:clamp(26px,4.6vw,58px); line-height:1; color:#f2e7cf; -webkit-text-stroke:1px #60462f; text-shadow:0 1px 0 #fff,0 2px 0 #b9a78e,0 4px 1px #614a35,0 7px 7px #0008; filter:drop-shadow(2px 5px 3px #0007); transform:translateY(-4px); }
.ch-piece.ch-black { color:#24211e; -webkit-text-stroke:1px #080706; text-shadow:0 1px 0 #77716b,0 2px 0 #4c4742,0 4px 1px #050505,0 7px 7px #000b; }
.ch-piece-hidden { opacity:0; }
.ch-flying-piece { position:fixed; z-index:100; display:grid; place-items:center; pointer-events:none; transition:transform 240ms cubic-bezier(.22,.75,.25,1); }
.ch-square.ch-selected::after { content:""; position:absolute; inset:5%; border:4px solid var(--ch-accent); z-index:4; pointer-events:none; animation:ch-sel-pulse .85s ease-in-out infinite alternate; }
@keyframes ch-sel-pulse { from{opacity:.55;box-shadow:inset 0 0 0 0 #f3a84b00,0 0 4px #f3a84b44} to{opacity:1;box-shadow:inset 0 0 14px #f3a84b66,0 0 16px #f3a84baa} }
.ch-square.ch-last { box-shadow:inset 0 0 0 999px #f3a84b26; }
.ch-square.ch-check { box-shadow:inset 0 0 0 999px #df4c4466; }
.ch-square.ch-legal::before { content:""; width:21%; aspect-ratio:1; border-radius:50%; background:var(--ch-accent); position:absolute; z-index:3; box-shadow:0 0 0 4px #17191755,0 0 14px #f3a84b88; }
.ch-square.ch-legal.ch-capture::before { width:76%; background:transparent; border:6px solid var(--ch-accent); box-shadow:none; }
.ch-coord { position:absolute; font-size:9px; font-weight:700; opacity:.62; }
.ch-rank { top:3px; left:4px; }
.ch-file { bottom:2px; right:4px; }
.ch-status-row { display:flex; justify-content:space-between; color:var(--ch-muted); border-top:1px solid #30332f; margin-top:10px; padding-top:12px; font-size:14px; }

/* ---------- חלונות ---------- */
.ch-modal { position:fixed; inset:0; background:#000a; display:grid; place-items:center; z-index:60; }
.ch-modal-card { background:#292c28; padding:25px; text-align:center; box-shadow:0 25px 70px #0008; }
.ch-modal-card p { margin-top:0; }
.ch-settings-card { position:relative; width:min(94vw,760px); max-height:88vh; overflow:auto; text-align:right; padding:30px; background:#242622; border:1px solid #444840; }
.ch-settings-card h3 { font-size:26px; margin:8px 0 24px; }
.ch-settings-card>label { display:block; color:var(--ch-muted); font-size:13px; margin:20px 0 9px; }
.ch-modal-close { position:absolute; left:18px; top:14px; background:transparent; color:var(--ch-muted); font-size:28px; }
.ch-modal-close:hover { color:var(--ch-ink); }
.ch-style-options { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.ch-style-options button { background:#30332f; border:2px solid transparent; color:var(--ch-ink); padding:14px 8px; }
.ch-style-options button:hover, .ch-style-options button.ch-active { border-color:var(--ch-accent); }
.ch-style-options button span { display:block; font-size:29px; direction:ltr; margin-bottom:7px; }
.ch-style-options strong { font-size:13px; }
.ch-swatch { display:block; height:42px; margin-bottom:9px; border:1px solid #ffffff22; }
.ch-w-wood { background:linear-gradient(135deg,#f1d9ad 50%,#a96536 50%); }
.ch-w-green { background:linear-gradient(135deg,#e7dfcc 50%,#55705e 50%); }
.ch-w-slate { background:linear-gradient(135deg,#b9bdc4 50%,#354052 50%); }
.ch-w-marble { background:linear-gradient(135deg,#f6f3ea 50%,#5b6b72 50%); }
.ch-w-ocean { background:linear-gradient(135deg,#bde9ed 50%,#197d91 50%); }
.ch-w-candy { background:linear-gradient(135deg,#ffe1ee 50%,#db6fa8 50%); }
.ch-w-desert { background:linear-gradient(135deg,#f5d68c 50%,#b76a35 50%); }
.ch-w-mono { background:linear-gradient(135deg,#ddd 50%,#333 50%); }
.ch-language-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ch-language-options button { background:#30332f; border:2px solid transparent; color:var(--ch-ink); padding:12px; }
.ch-language-options button.ch-active { border-color:var(--ch-accent); color:var(--ch-accent); }
#ch-promotion-options { display:flex; direction:ltr; }
#ch-promotion-options button { width:68px; height:68px; background:var(--ch-cream); font-size:42px; }
#ch-promotion-options button:hover { background:var(--ch-accent); }

/* ---------- תצוגות מקדימות ---------- */
.ch-pixel-preview { font-family:monospace !important; filter:contrast(5); text-shadow:none !important; }
.ch-neon-preview { color:#7defff; text-shadow:0 0 7px #38cfff !important; }
#ch-piece-styles button[data-style=gold] span { color:#ffd66b; text-shadow:0 2px 0 #8b5411,0 0 8px #ffc84a; }
#ch-piece-styles button[data-style=ice] span { color:#dffcff; text-shadow:0 0 8px #5de8ff; }
#ch-piece-styles button[data-style=candy] span { color:#ff72bd; text-shadow:2px 2px 0 #67e6ff; }
#ch-piece-styles button[data-style=paper] span { color:#fff; text-shadow:2px 2px 0 #777; }
#ch-piece-styles button[data-style=shadow] span { color:#111; text-shadow:0 0 8px #9b55ff; }

/* ---------- ערכות כלים ---------- */
.ch-pieces-pixel .ch-piece { font-family:monospace; color:#fff; -webkit-text-stroke:1px #111; text-shadow:none; filter:contrast(5); transform:scale(1.18); }
.ch-pieces-pixel .ch-piece.ch-black { color:#161616; -webkit-text-stroke:1px #777; text-shadow:none; }
.ch-pieces-neon .ch-piece { color:#dffbff; -webkit-text-stroke:1px #167b8c; text-shadow:0 0 3px #fff,0 0 9px #3de3ff,0 0 18px #3de3ff; filter:drop-shadow(0 4px 3px #000); transform:none; }
.ch-pieces-neon .ch-piece.ch-black { color:#24192e; -webkit-text-stroke:1px #ff55dc; text-shadow:0 0 3px #fff,0 0 9px #ff3bd4,0 0 18px #ff3bd4; }
.ch-pieces-gold .ch-piece { color:#ffe08a; -webkit-text-stroke:1px #6d4200; text-shadow:0 1px #fff6b9,0 3px #b77916,0 6px 8px #0009; filter:none; }
.ch-pieces-gold .ch-piece.ch-black { color:#9e691d; -webkit-text-stroke:1px #352000; }
.ch-pieces-ice .ch-piece { color:#e8fdff; -webkit-text-stroke:1px #4bbed0; text-shadow:0 0 4px #fff,0 0 13px #57e5ff,0 5px 6px #003a4d88; filter:none; }
.ch-pieces-ice .ch-piece.ch-black { color:#16778e; -webkit-text-stroke:1px #063d4d; }
.ch-pieces-candy .ch-piece { color:#ff93c9; -webkit-text-stroke:1px #8c2458; text-shadow:2px 2px 0 #7be9ff,0 5px 7px #0007; filter:none; }
.ch-pieces-candy .ch-piece.ch-black { color:#6edcf2; -webkit-text-stroke:1px #175c73; text-shadow:2px 2px 0 #ff7fbd; }
.ch-pieces-paper .ch-piece { color:#fffdf2; -webkit-text-stroke:1px #777; text-shadow:3px 4px 0 #0005; filter:none; transform:rotate(-2deg); }
.ch-pieces-paper .ch-piece.ch-black { color:#333; -webkit-text-stroke:1px #111; }
.ch-pieces-shadow .ch-piece { color:#160d20; -webkit-text-stroke:1px #b15cff; text-shadow:0 0 5px #a84cff,0 0 18px #6e24b9; filter:drop-shadow(0 6px 5px #000); }
.ch-pieces-shadow .ch-piece.ch-black { color:#050407; -webkit-text-stroke:1px #674080; }

/* ---------- ערכות לוח ---------- */
.ch-board-green .ch-board-wrap { padding:8px; background:#343a35; border-color:#555; outline:none; }
.ch-board-green .ch-square { background:#e7dfcc; background-image:none; }
.ch-board-green .ch-square.ch-dark { background:#55705e; background-image:none; }
.ch-board-slate .ch-board-wrap { padding:8px; background:#1e2530; border-color:#657086; outline:none; }
.ch-board-slate .ch-square { background:#b9bdc4; background-image:none; }
.ch-board-slate .ch-square.ch-dark { background:#354052; background-image:none; }
.ch-board-marble .ch-board-wrap { padding:9px; background:#ddd; border-color:#888; outline:none; }
.ch-board-marble .ch-square { background:#eeeae0; background-image:linear-gradient(25deg,transparent 45%,#abb3b533 47%,transparent 50%); }
.ch-board-marble .ch-square.ch-dark { background:#5b6b72; background-image:linear-gradient(25deg,transparent 45%,#ffffff22 47%,transparent 50%); }
.ch-board-ocean .ch-board-wrap { padding:9px; background:#0c5365; border-color:#64c9d7; outline:none; }
.ch-board-ocean .ch-square { background:#bde9ed; background-image:none; }
.ch-board-ocean .ch-square.ch-dark { background:#197d91; background-image:linear-gradient(135deg,#fff0,#fff1); }
.ch-board-candy .ch-board-wrap { padding:9px; background:#8b3764; border-color:#ffabd4; outline:none; }
.ch-board-candy .ch-square { background:#ffe1ee; background-image:none; }
.ch-board-candy .ch-square.ch-dark { background:#db6fa8; background-image:none; }
.ch-board-desert .ch-board-wrap { padding:9px; background:#70401e; border-color:#d99b4d; outline:none; }
.ch-board-desert .ch-square { background:#f5d68c; background-image:none; }
.ch-board-desert .ch-square.ch-dark { background:#b76a35; background-image:none; }
.ch-board-mono .ch-board-wrap { padding:9px; background:#111; border-color:#aaa; outline:none; }
.ch-board-mono .ch-square { background:#ddd; background-image:none; }
.ch-board-mono .ch-square.ch-dark { background:#333; background-image:none; }

/* ---------- ערכות בלוח השיעורים ---------- */
.ch-pieces-pixel .ch-tutorial-piece { font-family:monospace; color:#fff; -webkit-text-stroke:1px #111; text-shadow:none; filter:contrast(5); transform:scale(1.18); }
.ch-pieces-pixel .ch-tutorial-piece.ch-black { color:#161616; -webkit-text-stroke:1px #777; }
.ch-pieces-neon .ch-tutorial-piece { color:#dffbff; -webkit-text-stroke:1px #167b8c; text-shadow:0 0 3px #fff,0 0 9px #3de3ff,0 0 18px #3de3ff; }
.ch-pieces-neon .ch-tutorial-piece.ch-black { color:#24192e; -webkit-text-stroke:1px #ff55dc; text-shadow:0 0 3px #fff,0 0 9px #ff3bd4; }
.ch-pieces-gold .ch-tutorial-piece { color:#ffe08a; -webkit-text-stroke:1px #6d4200; text-shadow:0 1px #fff6b9,0 3px #b77916,0 6px 8px #0009; }
.ch-pieces-gold .ch-tutorial-piece.ch-black { color:#9e691d; }
.ch-pieces-ice .ch-tutorial-piece { color:#e8fdff; -webkit-text-stroke:1px #4bbed0; text-shadow:0 0 4px #fff,0 0 13px #57e5ff; }
.ch-pieces-ice .ch-tutorial-piece.ch-black { color:#16778e; }
.ch-pieces-candy .ch-tutorial-piece { color:#ff93c9; -webkit-text-stroke:1px #8c2458; text-shadow:2px 2px 0 #7be9ff; }
.ch-pieces-candy .ch-tutorial-piece.ch-black { color:#6edcf2; }
.ch-pieces-paper .ch-tutorial-piece { color:#fffdf2; -webkit-text-stroke:1px #777; text-shadow:3px 4px 0 #0005; transform:rotate(-2deg); }
.ch-pieces-paper .ch-tutorial-piece.ch-black { color:#333; }
.ch-pieces-shadow .ch-tutorial-piece { color:#160d20; -webkit-text-stroke:1px #b15cff; text-shadow:0 0 5px #a84cff,0 0 18px #6e24b9; }
.ch-pieces-shadow .ch-tutorial-piece.ch-black { color:#050407; }
.ch-board-green .ch-tutorial-square { background:#e7dfcc; }
.ch-board-green .ch-tutorial-square.ch-dark { background:#55705e; }
.ch-board-slate .ch-tutorial-square { background:#b9bdc4; }
.ch-board-slate .ch-tutorial-square.ch-dark { background:#354052; }
.ch-board-marble .ch-tutorial-square { background:#eeeae0; }
.ch-board-marble .ch-tutorial-square.ch-dark { background:#5b6b72; }
.ch-board-ocean .ch-tutorial-square { background:#bde9ed; }
.ch-board-ocean .ch-tutorial-square.ch-dark { background:#197d91; }
.ch-board-candy .ch-tutorial-square { background:#ffe1ee; }
.ch-board-candy .ch-tutorial-square.ch-dark { background:#db6fa8; }
.ch-board-desert .ch-tutorial-square { background:#f5d68c; }
.ch-board-desert .ch-tutorial-square.ch-dark { background:#b76a35; }
.ch-board-mono .ch-tutorial-square { background:#ddd; }
.ch-board-mono .ch-tutorial-square.ch-dark { background:#333; }

/* ---------- מסכים בינוניים ---------- */
@media (max-width:1050px) {
  .ch-app { grid-template-columns:1fr; }
  .ch-hero { padding:16px 18px; border:0; flex-direction:row; align-items:center; gap:18px; }
  .ch-hero-copy { margin:0; margin-right:auto; }
  .ch-hero-copy h1, .ch-intro { display:none; }
  .ch-hero-copy .ch-eyebrow { margin:0; }
  .ch-game-area { padding:4px 10px 18px; max-width:min(96vw,780px); }
  .ch-board-wrap { margin:auto; width:min(100%,calc(100vh - 210px)); }
  .ch-lobby-shell { grid-template-columns:1fr; gap:30px; }
  .ch-tutorial-panel { grid-column:auto; }
}

/* ---------- מובייל ---------- */
@media (max-width:600px) {
  .ch-lobby { padding:18px; }
  .ch-lobby-brand { grid-column:auto; }
  .ch-lobby-copy h2 { font-size:44px; margin:18px 0 24px; }
  .ch-lobby-settings { position:static; margin-bottom:12px; justify-self:start; }
  .ch-mode-card { padding:18px; grid-template-columns:44px 1fr auto; gap:12px; }
  .ch-mode-card strong { font-size:17px; }
  .ch-mode-icon { font-size:28px; }
  .ch-hero { padding:10px 8px; }
  .ch-hero-copy { display:none; }
  .ch-controls { margin-right:auto; }
  .ch-primary, .ch-secondary { padding:10px 12px; min-width:auto; font-size:13px; }
  .ch-game-area { padding:0 4px 12px; max-width:100vw; }
  .ch-board-wrap { width:min(100%,calc(100vh - 190px)); padding:8px; }
  .ch-player { padding:6px 4px; }
  .ch-avatar { width:30px; height:30px; font-size:19px; }
  .ch-status-row { margin:3px 4px 0; padding-top:8px; font-size:12px; }
  .ch-piece { font-size:clamp(24px,8.5vw,44px); }
  .ch-settings-card { padding:20px; }
  .ch-settings-card .ch-style-options { grid-template-columns:repeat(2,1fr); }
  .ch-setup-panel { padding:20px; }
  .ch-tutorial-board { width:min(100%,340px); }
  #ch-promotion-options button { width:56px; height:56px; font-size:34px; }
}


/* ================================================
   אזור ההורדות
   ================================================ */
.dcard { cursor:default; }
.dcard:hover { transform:translateY(-4px); border-color:#ffd166; }
.dl-actions { display:flex; gap:8px; margin-top:12px; }
.dl-get { flex:1; margin-top:0; text-align:center; text-decoration:none; background:#ffd166; color:#0f1620; display:block; }
.dl-get:hover { filter:brightness(1.08); }
.dl-how { background:#2a3b4f; color:#e8eef5; border:none; font-family:inherit; font-weight:700; font-size:13px; padding:9px 12px; border-radius:6px; cursor:pointer; white-space:nowrap; }
.dl-how:hover { background:#354961; }
.gbadge.dl-badge { color:#ffd166; }

#dl-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:100; align-items:flex-start; justify-content:center; padding:24px; overflow-y:auto; }
#dl-overlay.open { display:flex; }
.dl-card { background:#141d28; border:1px solid #2a3b4f; border-radius:16px; max-width:640px; width:100%; padding:22px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.dl-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.dl-head h2 { font-size:21px; }
.dl-x { background:#d9856b; color:#0d1620; border:none; width:34px; height:34px; border-radius:8px; font-size:18px; font-weight:800; cursor:pointer; flex-shrink:0; }
.dl-sec { margin-bottom:18px; }
.dl-sec h3 { font-size:15px; margin-bottom:10px; color:#ffd166; }
.dl-steps { padding-inline-start:22px; display:flex; flex-direction:column; gap:8px; }
.dl-steps li { font-size:14px; line-height:1.6; color:#c3d1de; }
.dl-note { background:rgba(217,133,107,.12); border:1px solid rgba(217,133,107,.35); border-radius:10px; padding:12px 14px; font-size:13px; line-height:1.6; color:#c3d1de; }
.dl-note strong { color:#d9856b; }
.dl-done { margin-top:16px; width:100%; background:#4fd1c5; color:#0f1620; border:none; font-family:inherit; font-weight:700; font-size:14px; padding:10px; border-radius:8px; cursor:pointer; }

/* קישור ה-bookmarklet — נועד לגרירה, לא ללחיצה */
.bm-link { background:#4fd1c5; cursor:grab; user-select:none; }
.bm-link:active { cursor:grabbing; }

/* ================================================
   הדגמה מונפשת — דפדפן מדומה
   ================================================ */
.dmo { margin-bottom:18px; }
.dmo-cap { display:flex; align-items:baseline; gap:8px; margin-bottom:9px; min-height:20px; }
.dmo-num { background:#4fd1c5; color:#0d1620; font-size:11px; font-weight:800; padding:2px 7px; border-radius:20px; flex-shrink:0; }
.dmo-txt { font-size:13.5px; color:#e8eef5; font-weight:600; }
.dmo-win { position:relative; direction:ltr; background:#0d1620; border:1px solid #2a3b4f;
           border-radius:10px; overflow:hidden; height:250px; user-select:none; }
.dmo-win.loading { opacity:.55; }
.dmo-bar { display:flex; align-items:center; gap:9px; padding:7px 10px; background:#1b2836; border-bottom:1px solid #22303f; }
.dmo-dots { display:flex; gap:4px; }
.dmo-dots i { width:8px; height:8px; border-radius:50%; background:#3a4c61; }
.dmo-url { flex:1; background:#0f1a26; border:1px solid #2a3b4f; border-radius:20px;
           font-size:11px; color:#8ba0b5; padding:3px 10px; }
.dmo-marks { display:flex; align-items:center; gap:7px; padding:5px 10px; background:#16222f; border-bottom:1px solid #22303f; min-height:27px; }
.dmo-marks-lbl { color:#3a4c61; font-size:11px; }
.dmo-chip { font-size:11px; font-weight:700; background:#4fd1c5; color:#0d1620; padding:2px 9px;
            border-radius:5px; opacity:0; transform:scale(.4); transition:opacity .25s, transform .25s; }
.dmo-chip.in { opacity:1; transform:scale(1); }
.dmo-chip.hit { filter:brightness(.75); transform:scale(.92); }
.dmo-page { position:relative; height:calc(100% - 62px); padding:12px 14px; }
.dmo-dragbtn { position:absolute; left:50%; top:56%; transform:translate(-50%,-50%);
               background:#4fd1c5; color:#0f1620; font-size:12px; font-weight:700;
               padding:8px 14px; border-radius:6px; opacity:0; transition:opacity .3s; white-space:nowrap; }
.dmo-dragbtn.show { opacity:1; }
.dmo-dragbtn.grabbed { opacity:.28; }
.dmo-lines { display:flex; flex-direction:column; gap:7px; }
.dmo-line { font-size:12px; color:#8ba0b5; background:#141d28; border-radius:5px; padding:6px 9px;
            transition:opacity .16s, transform .16s; }
.dmo-line.head { font-size:14px; font-weight:700; color:#e8eef5; }
.dmo-line.flip { opacity:0; transform:translateY(-4px); }
.dmo-line.done { color:#c3d1de; background:#16283a; }
.dmo-line.head.done { color:#4fd1c5; }
.dmo-panel { position:absolute; right:10px; bottom:10px; width:118px; background:#141d28;
             border:1px solid #2a3b4f; border-radius:8px; padding:7px; display:flex;
             flex-direction:column; gap:5px; opacity:0; transform:translateY(8px);
             transition:opacity .3s, transform .3s; }
.dmo-panel.in { opacity:1; transform:none; }
.dmo-p-head { font-size:9px; font-weight:800; color:#4fd1c5; }
.dmo-p-sel { display:flex; justify-content:space-between; align-items:center; font-size:9.5px;
             background:#172230; border:1px solid #2a3b4f; border-radius:4px; padding:3px 5px; color:#e8eef5; }
.dmo-p-bar { height:3px; background:#22303f; border-radius:2px; overflow:hidden; }
.dmo-p-fill { height:100%; width:0; background:#4fd1c5; transition:width .35s; }
.dmo-p-btn { font-size:9.5px; font-weight:800; text-align:center; padding:4px; border-radius:4px;
             background:#4fd1c5; color:#0d1620; }
.dmo-p-btn.busy { background:#d9856b; }
.dmo-p-btn.rest { background:#2a3b4f; color:#e8eef5; }
.dmo-p-btn.hit { filter:brightness(.75); }
.dmo-ghost { position:absolute; font-size:11px; font-weight:700; background:#4fd1c5; color:#0d1620;
             padding:2px 9px; border-radius:5px; opacity:0; pointer-events:none;
             transform:translate(-50%,-50%) rotate(-4deg); box-shadow:0 6px 18px rgba(0,0,0,.5);
             transition:left .9s ease-in-out, top .9s ease-in-out, opacity .2s; }
.dmo-ghost.on { opacity:.95; }
.dmo-cursor { position:absolute; left:50%; top:96%; pointer-events:none;
              transition:left .85s ease-in-out, top .85s ease-in-out;
              filter:drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.dmo-pips { display:flex; gap:5px; justify-content:center; margin-top:10px; }
.dmo-pips i { width:6px; height:6px; border-radius:50%; background:#2a3b4f; transition:background .2s, transform .2s; }
.dmo-pips i.on { background:#4fd1c5; transform:scale(1.35); }
.dmo-replay { display:block; margin:9px auto 0; background:#2a3b4f; color:#e8eef5; border:0;
              font-family:inherit; font-size:12px; font-weight:700; padding:6px 14px;
              border-radius:6px; cursor:pointer; }
.dmo-replay:hover { background:#354961; }
.dl-what { background:rgba(79,209,197,.09); border:1px solid rgba(79,209,197,.3);
           border-radius:10px; padding:12px 14px; font-size:13.5px; line-height:1.65;
           color:#c3d1de; margin-bottom:18px; }
.dl-what b { color:#4fd1c5; }

/* שורת הסימניות מתחילה מוסתרת בהדגמה, ונדלקת בשלב 1 */
.dmo-marks { overflow:hidden; transition:height .35s, opacity .35s, padding .35s; }
.dmo-marks.off { height:0; min-height:0; padding-top:0; padding-bottom:0; opacity:0; border-bottom-color:transparent; }
.dmo-kbd { position:absolute; left:50%; top:38%; transform:translate(-50%,-50%); display:flex;
           align-items:center; gap:4px; background:rgba(13,22,32,.94); border:1px solid #4fd1c5;
           border-radius:9px; padding:8px 12px; opacity:0; transition:opacity .25s, transform .25s;
           pointer-events:none; box-shadow:0 8px 26px rgba(0,0,0,.55); }
.dmo-kbd.on { opacity:1; transform:translate(-50%,-50%) scale(1.04); }
.dmo-kbd kbd { background:#22303f; border:1px solid #3a4c61; border-bottom-width:2px; border-radius:5px;
               font:600 11px/1 "Segoe UI",system-ui,sans-serif; color:#e8eef5; padding:5px 7px; }
.dmo-kbd span { color:#8ba0b5; font-size:11px; }
/* מסלול חלופי בלי גרירה */
.dl-alt { background:#141d28; border:1px dashed #4fd1c5; border-radius:10px; padding:13px 14px; margin-bottom:18px; }
.dl-alt h4 { font-size:13px; color:#4fd1c5; margin-bottom:6px; }
.dl-alt p { font-size:12.5px; color:#8ba0b5; line-height:1.6; margin-bottom:10px; }
.dl-copy { background:#ffd166; color:#0f1620; border:0; font-family:inherit; font-weight:800;
           font-size:13px; padding:9px 14px; border-radius:7px; cursor:pointer; width:100%; }
.dl-copy:hover { filter:brightness(1.07); }
.dl-copy.ok { background:#4fd1c5; }
.dl-code { display:none; width:100%; margin-top:10px; background:#0f1a26; color:#8ba0b5;
           border:1px solid #2a3b4f; border-radius:7px; padding:8px; font:11px/1.4 monospace;
           resize:vertical; word-break:break-all; }

/* ================================================
   עמוד המדריך
   ================================================ */
.guide-body { background:#0f1620; }
.g-lang { margin-inline-start:auto; background:#172230; color:#e8eef5; border:1px solid #2a3b4f;
          border-radius:8px; padding:7px 10px; font-family:inherit; font-size:13px; }
.g-back { margin-inline-start:14px; color:#4fd1c5; text-decoration:none; font-weight:700; font-size:14px; }
.g-back:hover { text-decoration:underline; }
.g-wrap { max-width:1180px; margin:0 auto; padding:24px 20px 40px; }
.g-head { margin-bottom:20px; }
.g-head h1 { font-size:30px; margin-bottom:6px; }
.g-head p { color:#8ba0b5; font-size:15px; }
.g-main { display:grid; grid-template-columns:1fr 310px; gap:22px; align-items:start; }
@media (max-width:900px) { .g-main { grid-template-columns:1fr; } }

.g-narr-box { background:linear-gradient(135deg,#12324a,#1b2a3d); border:1px solid #2a3b4f;
              border-radius:12px; padding:16px 18px; margin-bottom:14px; min-height:86px;
              display:flex; align-items:center; }
.g-narr-box p { font-size:16px; line-height:1.65; color:#e8eef5; }

.g-stage { position:relative; direction:ltr; background:#0d1620; border:1px solid #2a3b4f;
           border-radius:12px; overflow:hidden; height:360px; user-select:none; }
.g-bar { display:flex; align-items:center; gap:10px; padding:9px 12px; background:#1b2836; border-bottom:1px solid #22303f; }
.g-dots { display:flex; gap:5px; }
.g-dots i { width:10px; height:10px; border-radius:50%; background:#3a4c61; }
.g-url { flex:1; background:#0f1a26; border:1px solid #2a3b4f; border-radius:20px; font-size:12px;
         color:#8ba0b5; padding:4px 12px; }
.g-marks { display:flex; align-items:center; gap:8px; padding:6px 12px; background:#16222f;
           border-bottom:1px solid #22303f; min-height:31px; overflow:hidden;
           transition:height .35s, opacity .35s, padding .35s; }
.g-marks.off { height:0; min-height:0; padding-top:0; padding-bottom:0; opacity:0; border-bottom-color:transparent; }
.g-marks-lbl { color:#3a4c61; font-size:12px; }
.g-chip { font-size:12px; font-weight:700; background:#4fd1c5; color:#0d1620; padding:3px 11px;
          border-radius:6px; opacity:0; transform:scale(.4); transition:opacity .3s, transform .3s; }
.g-chip.in { opacity:1; transform:scale(1); }
.g-chip.hit { filter:brightness(.72); transform:scale(.93); }
.g-page { position:relative; height:calc(100% - 74px); padding:14px 16px; }
.g-drag { position:absolute; left:50%; top:52%; transform:translate(-50%,-50%); background:#4fd1c5;
          color:#0f1620; font-size:13px; font-weight:700; padding:9px 16px; border-radius:7px;
          opacity:0; transition:opacity .3s; white-space:nowrap; }
.g-drag.show { opacity:1; }
.g-drag.grabbed { opacity:.25; }
.g-lines { display:flex; flex-direction:column; gap:8px; }
.g-line { font-size:13px; color:#8ba0b5; background:#141d28; border-radius:6px; padding:8px 11px; }
.g-line.head { font-size:15px; font-weight:700; color:#e8eef5; }
.g-line.done { color:#c3d1de; background:#16283a; }
.g-line.head.done { color:#4fd1c5; }
.g-panel { position:absolute; right:12px; bottom:12px; width:136px; background:#141d28;
           border:1px solid #2a3b4f; border-radius:9px; padding:9px; display:flex; flex-direction:column;
           gap:6px; opacity:0; transform:translateY(10px); transition:opacity .3s, transform .3s; }
.g-panel.in { opacity:1; transform:none; }
.gp-head { font-size:10px; font-weight:800; color:#4fd1c5; }
.gp-sel { display:flex; justify-content:space-between; align-items:center; font-size:11px;
          background:#172230; border:1px solid #2a3b4f; border-radius:5px; padding:4px 6px; color:#e8eef5; }
.gp-bar { height:4px; background:#22303f; border-radius:2px; overflow:hidden; }
.gp-fill { height:100%; width:0; background:#4fd1c5; transition:width .5s; }
.gp-btn { font-size:11px; font-weight:800; text-align:center; padding:5px; border-radius:5px;
          background:#4fd1c5; color:#0d1620; }
.g-ghost { position:absolute; font-size:12px; font-weight:700; background:#4fd1c5; color:#0d1620;
           padding:3px 11px; border-radius:6px; opacity:0; pointer-events:none;
           transform:translate(-50%,-50%) rotate(-4deg); box-shadow:0 8px 22px rgba(0,0,0,.55);
           transition:left .7s ease-in-out, top .7s ease-in-out, opacity .25s; }
.g-ghost.on { opacity:.95; }
.g-cursor { position:absolute; pointer-events:none; transition:left .7s ease-in-out, top .7s ease-in-out;
            filter:drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.g-kbd { position:absolute; left:50%; top:44%; transform:translate(-50%,-50%); display:flex;
         align-items:center; gap:5px; background:rgba(13,22,32,.95); border:1px solid #4fd1c5;
         border-radius:10px; padding:10px 14px; opacity:0; transition:opacity .28s;
         pointer-events:none; box-shadow:0 10px 30px rgba(0,0,0,.6); }
.g-kbd.on { opacity:1; }
.g-kbd kbd, .gm-head kbd { background:#22303f; border:1px solid #3a4c61; border-bottom-width:2px;
         border-radius:5px; font:600 12px/1 "Segoe UI",system-ui,sans-serif; color:#e8eef5; padding:6px 8px; }
.g-kbd span { color:#8ba0b5; font-size:12px; }
.g-arrow { position:absolute; left:50%; top:78px; transform:translateX(-50%); color:#ffd166;
           font-size:34px; font-weight:800; opacity:0; transition:opacity .3s; animation:gbob 1.1s infinite; }
.g-arrow.on { opacity:1; }
@keyframes gbob { 0%,100%{ transform:translateX(-50%) translateY(0);} 50%{ transform:translateX(-50%) translateY(-7px);} }
.g-mgr { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.94); width:250px;
         background:#141d28; border:1px solid #4fd1c5; border-radius:10px; padding:12px;
         opacity:0; transition:opacity .3s, transform .3s; box-shadow:0 14px 40px rgba(0,0,0,.6); }
.g-mgr.on { opacity:1; transform:translate(-50%,-50%) scale(1); }
.gm-head { display:flex; align-items:center; gap:4px; justify-content:center; margin-bottom:10px; color:#8ba0b5; font-size:12px; }
.gm-row { background:#0f1a26; border:1px solid #2a3b4f; border-radius:5px; padding:6px 8px;
          font-size:11px; color:#8ba0b5; margin-bottom:6px; direction:ltr; overflow:hidden;
          text-overflow:ellipsis; white-space:nowrap; }
.gm-url { color:#4fd1c5; }

.g-controls { display:flex; align-items:center; gap:9px; margin-top:14px; }
.g-controls button { background:#2a3b4f; color:#e8eef5; border:0; font-family:inherit; font-size:15px;
                     font-weight:700; padding:9px 15px; border-radius:8px; cursor:pointer; }
.g-controls button:hover { background:#354961; }
.g-controls .g-play { background:#4fd1c5; color:#0f1620; min-width:104px; }
.g-counter { margin-inline-start:auto; color:#8ba0b5; font-size:13px; }

.g-side h2 { font-size:15px; color:#4fd1c5; margin-bottom:10px; }
.g-chapters { display:flex; flex-direction:column; gap:5px; margin-bottom:20px;
              max-height:330px; overflow-y:auto; }
.g-chapters button { text-align:start; background:#141d28; color:#8ba0b5; border:1px solid #22303f;
                     font-family:inherit; font-size:12.5px; padding:8px 10px; border-radius:7px;
                     cursor:pointer; line-height:1.4; }
.g-chapters button:hover { border-color:#4fd1c5; color:#e8eef5; }
.g-chapters button.on { background:#16283a; border-color:#4fd1c5; color:#e8eef5; font-weight:700; }
.g-do { background:#141d28; border:1px dashed #4fd1c5; border-radius:11px; padding:14px; }
.g-do h3 { font-size:13px; color:#e8eef5; margin-bottom:10px; line-height:1.5; }
.g-bm { display:block; text-align:center; text-decoration:none; background:#4fd1c5; color:#0f1620;
        font-weight:800; font-size:13.5px; padding:11px; border-radius:8px; cursor:grab; user-select:none; }
.g-bm:active { cursor:grabbing; }
.g-copy { width:100%; margin-top:9px; background:#ffd166; color:#0f1620; border:0; font-family:inherit;
          font-weight:800; font-size:13px; padding:10px; border-radius:8px; cursor:pointer; }
.g-copy.ok { background:#4fd1c5; }

.dl-guide { display:block; text-align:center; text-decoration:none; background:#4fd1c5; color:#0f1620;
            font-weight:800; font-size:14px; padding:11px; border-radius:9px; margin-bottom:16px; }
.dl-guide:hover { filter:brightness(1.08); }