/* ניצוצות — מצב משחק (ארקייד) וכפתור הכניסה אליו */

/* ---------- הכפתור בדף ---------- */
.game-cta {
  display: grid; grid-template-columns: 118px 1fr auto; align-items: center; gap: 16px;
  width: 100%; margin-top: 28px; padding: 12px 12px 12px 16px; text-align: right; color: var(--ink);
  border: 1px solid var(--line); border-radius: 22px; background: var(--paper); cursor: pointer;
  box-shadow: 0 16px 34px -24px rgba(80, 45, 20, .55);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .25s;
}
.game-cta:hover { transform: translateY(-3px); border-color: rgba(139, 47, 44, .3); box-shadow: 0 22px 40px -22px rgba(80, 45, 20, .6); }
.game-cta:focus-visible { outline: 2px solid var(--spark); outline-offset: 3px; }
.gc-screen {
  position: relative; height: 86px; display: grid; place-items: center; align-content: center; gap: 6px; overflow: hidden;
  border-radius: 14px; background: linear-gradient(#F8F1E4, #EFD9B2); box-shadow: 0 0 0 5px #2A1610, 0 0 0 6px rgba(0, 0, 0, .3), inset 0 0 18px rgba(90, 50, 25, .3);
  margin: 6px;
}
.gc-screen::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, rgba(46, 28, 20, .07) 0 1px, transparent 1px 3px); pointer-events: none; }
.gc-title .px { --s: 2; }
.gc-blink { font: 700 10px/1 var(--sans); letter-spacing: .04em; color: var(--ink); animation: arcBlink 1.1s steps(2) infinite; }
.gc-text strong { display: block; font: 400 21px/1.2 var(--serif); margin-bottom: 4px; }
.gc-text span { display: block; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.gc-go { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 99px; background: var(--ink); color: var(--bg); font-size: 14px; font-weight: 600; white-space: nowrap; }
.gc-go svg { width: 16px; height: 16px; }
@media (max-width: 560px) {
  .game-cta { grid-template-columns: 100px 1fr; gap: 12px; }
  .gc-go { display: none; }
  .gc-text strong { font-size: 19px; }
  .gc-text span { font-size: 13.5px; }
}

/* ---------- "אחר" ברשימת החלומות ---------- */
.chip-other { border-style: dashed; border-color: rgba(168, 115, 58, .55); }
.chip-plus { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--wash); color: var(--ochre); font-weight: 700; font-size: 16px; line-height: 1; }
.chip-other[aria-pressed="true"] .chip-plus { background: rgba(255, 255, 255, .14); color: var(--gold); }
.field-other { margin-top: -6px; animation: stepIn .45s var(--ease); }

/* ---------- המכונה ---------- */
html.arcade-open, html.arcade-open body { overflow: hidden; }
.arcade {
  --px: 2; --px-title: 4; --ink: #2E1C14; --line-px: #2E1C14;
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center;
  grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);
  padding: clamp(10px, 2.6vw, 34px); font-family: Heebo, system-ui, sans-serif; color: #2E1C14;
}
.arc-room { position: absolute; inset: 0; background: radial-gradient(110% 90% at 50% 26%, #4C2C1E 0%, #2A1610 52%, #140A06 100%); }
.arc-room::after { content: ""; position: absolute; inset: 0; background: radial-gradient(40% 30% at 50% 100%, rgba(201, 161, 91, .14), transparent 70%); }
.arc-cab { position: relative; width: min(1140px, 100%); height: min(780px, 100%); display: flex; flex-direction: column; animation: arcCabIn .7s cubic-bezier(.2, .8, .2, 1) both; }
.arc-bezel {
  position: relative; flex: 1; min-height: 0; padding: clamp(10px, 1.5vw, 18px);
  border-radius: clamp(24px, 3.2vw, 44px);
  background: linear-gradient(165deg, #55331F 0%, #34200F 45%, #241309 100%);
  box-shadow: inset 0 2px 0 rgba(255, 228, 190, .16), inset 0 -4px 0 rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 220, 170, .06),
    0 50px 90px -30px rgba(0, 0, 0, .85), 0 0 0 1px rgba(0, 0, 0, .55);
}
.arc-screen {
  position: relative; height: 100%; overflow: hidden; isolation: isolate;
  border-radius: clamp(16px, 2.3vw, 32px); background: #F2E2BE;
  box-shadow: inset 0 0 0 3px rgba(30, 14, 8, .6), inset 0 0 70px rgba(90, 50, 25, .38);
}
.arc-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; image-rendering: crisp-edges; image-rendering: pixelated; }
.arc-scan { position: absolute; inset: 0; z-index: 6; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(46, 28, 20, .055) 0 1px, transparent 1px 3px); }
.arc-glare { position: absolute; inset: 0; z-index: 7; pointer-events: none; background: radial-gradient(90% 60% at 28% 0%, rgba(255, 255, 255, .22), transparent 60%), radial-gradient(130% 110% at 50% 50%, transparent 62%, rgba(60, 28, 12, .34)); }
.arcade.is-boot .arc-screen::before {
  content: ""; position: absolute; inset: 0; z-index: 9; pointer-events: none; background: #FFF8EA;
  animation: arcCrt .65s ease-out forwards;
}
.arc-ui { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; }

/* טקסט וציורים בפיקסלים */
.px { display: inline-block; line-height: 0; vertical-align: middle; }
.px canvas { display: block; width: calc(var(--w) * var(--s, var(--px)) * 1px); height: calc(var(--h) * var(--s, var(--px)) * 1px); image-rendering: crisp-edges; image-rendering: pixelated; }
.px--t { --s: var(--px-title); }

/* פס עליון */
.arc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px 0; }
.arc-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 0; cursor: pointer;
  font: 700 13px/1 Heebo, sans-serif; color: #2E1C14; background: rgba(251, 246, 238, .9);
  box-shadow: 0 -2px 0 0 #2E1C14, 0 2px 0 0 #2E1C14, -2px 0 0 0 #2E1C14, 2px 0 0 0 #2E1C14, 3px 3px 0 0 rgba(46, 28, 20, .2);
}
.arc-chip:hover { background: #fff; }
.arc-chip[aria-pressed="true"] { background: #8B2F2C; color: #F2E2BE; }
.arc-chip:focus-visible, .arc-btn:focus-visible, .arc-tab:focus-visible, .arc-start:focus-visible { outline: 3px solid #8B2F2C; outline-offset: 4px; }
.arc-credit { opacity: .85; }

.arc-view { flex: 1; min-height: 0; }

/* ---------- מסך הפתיחה ---------- */
.arc-title-v { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 16px 40px; }
.arc-tbox { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.arc-logo { margin: 4px 0 2px; animation: arcBob 2.6s steps(4) infinite; }
.arc-start {
  margin-top: 18px; padding: 12px 22px; border: 0; cursor: pointer; background: rgba(251, 246, 238, .85);
  box-shadow: 0 -3px 0 0 #2E1C14, 0 3px 0 0 #2E1C14, -3px 0 0 0 #2E1C14, 3px 0 0 0 #2E1C14, 5px 5px 0 0 rgba(46, 28, 20, .2);
  animation: arcBlink 1.15s steps(2) infinite;
}
.arc-start:hover { animation: none; background: #fff; }
.arc-tfoot { position: absolute; bottom: 22px; inset-inline: 26px; display: flex; justify-content: space-between; opacity: .8; }

/* ---------- מסך המשחק ---------- */
.arc-play-v { display: grid; grid-template-columns: minmax(230px, 290px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 20px; padding: 14px 20px 34px; }
.pxp {
  position: relative; min-height: 0; background: rgba(251, 246, 238, .94);
  box-shadow: 0 -3px 0 0 #2E1C14, 0 3px 0 0 #2E1C14, -3px 0 0 0 #2E1C14, 3px 0 0 0 #2E1C14, 7px 7px 0 0 rgba(46, 28, 20, .16);
}

/* כרטיס הדמות */
.arc-card { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 22px 18px; text-align: center; align-self: start; }
.arc-ava {
  width: 144px; height: 144px; flex: none; display: grid; place-items: center;
  background: repeating-linear-gradient(to bottom, #E9C79A 0 12px, #F2DDB8 12px 24px);
  box-shadow: 0 -3px 0 0 #2E1C14, 0 3px 0 0 #2E1C14, -3px 0 0 0 #2E1C14, 3px 0 0 0 #2E1C14;
}
.arc-ava canvas { width: 96px; height: 96px; image-rendering: crisp-edges; image-rendering: pixelated; }
.arc-ava.is-photo canvas { width: 144px; height: 144px; }
.arc-info { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.arc-name { min-height: 30px; display: flex; align-items: center; }
.arc-lvl { font: 700 13px/1 Heebo, sans-serif; color: #8B2F2C; letter-spacing: .02em; }
.arc-xprow { display: flex; align-items: center; gap: 8px; width: 100%; }
.arc-xp { flex: 1; display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; padding: 3px; background: #2E1C14; }
.arc-xp i { height: 9px; background: #5A4032; }
.arc-xp i.on { background: linear-gradient(#EBC77A 0 45%, #C9A15B 45%); }
.arc-xpn { font: 700 12px/1 Heebo, sans-serif; color: #6E5544; white-space: nowrap; direction: ltr; }
.arc-hearts { display: flex; gap: 8px; }
.arc-heart { --s: 3; }

/* לוח המשימה */
.arc-quest { display: flex; flex-direction: column; overflow: hidden; }
.arc-tabs { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 16px 18px 12px; border-bottom: 3px solid #2E1C14; background: rgba(242, 226, 190, .55); }
.arc-tab {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px 6px 12px; border: 0; cursor: pointer;
  font: 700 13px/1 Heebo, sans-serif; color: #2E1C14; background: #FBF6EE;
  box-shadow: 0 -2px 0 0 #2E1C14, 0 2px 0 0 #2E1C14, -2px 0 0 0 #2E1C14, 2px 0 0 0 #2E1C14;
}
.arc-tab b { display: grid; place-items: center; min-width: 18px; height: 18px; font-size: 11px; background: #2E1C14; color: #F2E2BE; }
.arc-tab.is-on { background: #8B2F2C; color: #F2E2BE; }
.arc-tab.is-on b { background: #F2E2BE; color: #8B2F2C; }
.arc-tab.is-done b { background: #C9A15B; color: #2E1C14; font-size: 0; }
.arc-tab.is-done b::before { content: "✓"; font-size: 12px; }
.arc-scroll { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 18px 20px 6px; overscroll-behavior: contain; }
.arc-quest.is-in .arc-scroll > * { animation: arcIn .4s steps(5) both; }
.arc-quest.is-in .arc-scroll > :nth-child(2) { animation-delay: .04s; }
.arc-quest.is-in .arc-scroll > :nth-child(3) { animation-delay: .08s; }
.arc-quest.is-shake { animation: arcShake .32s steps(6); }
.arc-qhead { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 2px dashed rgba(46, 28, 20, .25); }
.arc-qic { --s: 3; }
.arc-dialog { display: flex; align-items: flex-start; gap: 12px; margin: 16px 0 18px; }
.arc-mascot { flex: none; padding-top: 2px; animation: arcBob 1.8s steps(3) infinite; }
.arc-mascot-spr { --s: 4; }
.arc-say {
  position: relative; flex: 1; margin: 0; padding: 12px 16px; min-height: 52px;
  font: 700 16.5px/1.55 Heebo, sans-serif; color: #2E1C14; background: #FFFDF8;
  box-shadow: 0 -3px 0 0 #2E1C14, 0 3px 0 0 #2E1C14, -3px 0 0 0 #2E1C14, 3px 0 0 0 #2E1C14;
}
.arc-say::before { content: ""; position: absolute; top: 16px; right: -12px; width: 9px; height: 9px; background: #FFFDF8; box-shadow: 3px 0 0 0 #2E1C14, 0 -3px 0 0 #2E1C14, 0 3px 0 0 #2E1C14; }
.arc-say-v::after { content: "▌"; margin-inline-start: 2px; color: #B5573F; animation: arcBlink .8s steps(2) infinite; }

/* שדות */
.arc-fields { display: grid; gap: 16px; }
.arc-fields.is-two { grid-template-columns: 1fr 1fr; }
.arc-field { display: flex; flex-direction: column; gap: 7px; }
.arc-fl { font: 700 13.5px/1.2 Heebo, sans-serif; color: #6E5544; letter-spacing: .01em; }
.arc-in {
  width: 100%; min-height: 48px; padding: 10px 13px; border: 0; border-radius: 0; -webkit-appearance: none; appearance: none;
  font: 700 17px/1.45 Heebo, sans-serif; color: #2E1C14; background: #FFFDF8; caret-color: #8B2F2C;
  box-shadow: 0 -3px 0 0 #2E1C14, 0 3px 0 0 #2E1C14, -3px 0 0 0 #2E1C14, 3px 0 0 0 #2E1C14, inset 3px 3px 0 0 rgba(201, 170, 136, .35);
}
textarea.arc-in { resize: vertical; min-height: 96px; }
.arc-in::placeholder { color: #BDA88F; font-weight: 500; }
.arc-in:focus { outline: none; background: #fff; box-shadow: 0 -3px 0 0 #8B2F2C, 0 3px 0 0 #8B2F2C, -3px 0 0 0 #8B2F2C, 3px 0 0 0 #8B2F2C, 6px 6px 0 0 rgba(139, 47, 44, .2); }
.arc-field.is-bad .arc-in { box-shadow: 0 -3px 0 0 #B3261E, 0 3px 0 0 #B3261E, -3px 0 0 0 #B3261E, 3px 0 0 0 #B3261E; }
.arc-ferr { font: 700 13px/1.3 Heebo, sans-serif; font-style: normal; color: #B3261E; }
.arc-ferr:empty { display: none; }
.arc-err { margin: 12px 0 0; font: 700 14px/1.4 Heebo, sans-serif; color: #B3261E; }
.arc-err:empty { display: none; }
.arc-err::before { content: "! "; }

/* בחירה */
.arc-choice-w { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.arc-choice { display: flex; flex-wrap: wrap; gap: 10px; }
.arc-opt {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 0; cursor: pointer;
  font: 700 15px/1 Heebo, sans-serif; color: #2E1C14; background: #FFFDF8;
  box-shadow: 0 -3px 0 0 #2E1C14, 0 3px 0 0 #2E1C14, -3px 0 0 0 #2E1C14, 3px 0 0 0 #2E1C14, 4px 4px 0 0 rgba(46, 28, 20, .18);
  transition: transform .08s steps(2);
}
.arc-opt:hover { background: #fff; transform: translate(-1px, -1px); }
.arc-opt:active { transform: translate(2px, 2px); }
.arc-opt:focus-visible { outline: 3px dashed #8B2F2C; outline-offset: 5px; }
.arc-opt[aria-checked="true"] { background: #8B2F2C; color: #F2E2BE; }
.arc-choice.is-big { gap: 18px; justify-content: center; padding: 6px 0 4px; }
.arc-choice.is-big .arc-opt { flex-direction: column; gap: 12px; padding: 18px 26px 16px; font-size: 17px; }
.arc-choice.is-big .arc-opt[aria-checked="true"] { background: #F2E2BE; color: #2E1C14; box-shadow: 0 -3px 0 0 #8B2F2C, 0 3px 0 0 #8B2F2C, -3px 0 0 0 #8B2F2C, 3px 0 0 0 #8B2F2C, 0 0 0 9px rgba(139, 47, 44, .16); }
.arc-opt-spr { --s: 6; }

/* חלומות */
.arc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px; }
.arc-dream {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 8px 6px 9px; border: 0; cursor: pointer;
  font: 700 12.5px/1.2 Heebo, sans-serif; color: #2E1C14; background: #FFFDF8;
  box-shadow: 0 -3px 0 0 #2E1C14, 0 3px 0 0 #2E1C14, -3px 0 0 0 #2E1C14, 3px 0 0 0 #2E1C14, 4px 4px 0 0 rgba(46, 28, 20, .16);
  transition: transform .08s steps(2);
}
.arc-dream:hover { transform: translate(-1px, -1px); background: #fff; }
.arc-dream:focus-visible { outline: 3px dashed #8B2F2C; outline-offset: 5px; }
.arc-dpic { display: grid; place-items: center; width: 96px; height: 72px; background: #EAD7B5; }
.arc-dpic canvas { width: 96px; height: 72px; image-rendering: crisp-edges; image-rendering: pixelated; }
.arc-dream.is-other .arc-dpic { background: repeating-linear-gradient(45deg, #F2E2BE 0 6px, #EBD6AE 6px 12px); }
.arc-plus { --s: 5; }
.arc-dream[aria-pressed="true"] { background: #8B2F2C; color: #F2E2BE; box-shadow: 0 -3px 0 0 #2E1C14, 0 3px 0 0 #2E1C14, -3px 0 0 0 #2E1C14, 3px 0 0 0 #2E1C14, 0 0 0 7px rgba(201, 161, 91, .45); }
.arc-dream[aria-pressed="true"]::after {
  content: "♥"; position: absolute; top: -10px; left: -10px; display: grid; place-items: center; width: 24px; height: 24px;
  font-size: 14px; color: #F2E2BE; background: #B5573F; box-shadow: 0 0 0 3px #2E1C14;
  animation: arcPopIn .3s steps(3);
}
.arc-other { margin-top: 18px; }

/* תמונה */
.arc-photo { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "up prev" "note note"; align-items: center; gap: 16px 22px; }
.arc-up {
  grid-area: up; display: inline-flex; align-items: center; gap: 10px; padding: 14px 18px; cursor: pointer;
  font: 700 16px/1 Heebo, sans-serif; color: #F2E2BE; background: #8B2F2C;
  box-shadow: 0 -3px 0 0 #2E1C14, 0 3px 0 0 #2E1C14, -3px 0 0 0 #2E1C14, 3px 0 0 0 #2E1C14, 5px 5px 0 0 rgba(46, 28, 20, .22);
}
.arc-up:focus-within { outline: 3px solid #8B2F2C; outline-offset: 5px; }
.arc-up-ic { --s: 3; }
.arc-photo-prev { grid-area: prev; justify-self: start; width: 128px; height: 128px; display: grid; place-items: center; background: repeating-linear-gradient(to bottom, #E9C79A 0 8px, #F2DDB8 8px 16px); box-shadow: 0 -3px 0 0 #2E1C14, 0 3px 0 0 #2E1C14, -3px 0 0 0 #2E1C14, 3px 0 0 0 #2E1C14; }
.arc-photo-prev::before { content: "?"; font: 700 40px/1 Heebo, sans-serif; color: rgba(46, 28, 20, .3); }
.arc-photo-prev.is-on::before { display: none; }
.arc-photo-prev canvas { width: 128px; height: 128px; image-rendering: crisp-edges; image-rendering: pixelated; }
.arc-note { grid-area: note; margin: 0; font: 600 14px/1.6 Heebo, sans-serif; color: #6E5544; }

/* אישור ושליחה */
.arc-sum { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0 0 20px; padding: 14px 18px; background: rgba(242, 226, 190, .6); box-shadow: inset 0 0 0 2px rgba(46, 28, 20, .25); }
.arc-sum dt { font: 700 13px/1.5 Heebo, sans-serif; color: #6E5544; }
.arc-sum dd { margin: 0; font: 700 15px/1.5 Heebo, sans-serif; }
.arc-check { position: relative; display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font: 600 15px/1.6 Heebo, sans-serif; }
.arc-check input { position: absolute; opacity: 0; width: 26px; height: 26px; margin: 0; cursor: pointer; }
.arc-box { flex: none; width: 26px; height: 26px; margin-top: 1px; background: #FFFDF8; box-shadow: 0 -3px 0 0 #2E1C14, 0 3px 0 0 #2E1C14, -3px 0 0 0 #2E1C14, 3px 0 0 0 #2E1C14; display: grid; place-items: center; }
.arc-check input:checked + .arc-box { background: #8B2F2C; }
.arc-check input:checked + .arc-box::before { content: "✓"; font: 700 17px/1 Heebo, sans-serif; color: #F2E2BE; }
.arc-check input:focus-visible + .arc-box { outline: 3px dashed #8B2F2C; outline-offset: 5px; }
.arc-check a { color: #8B2F2C; }
.arc-load { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.arc-load > span:first-child { display: block; width: 100%; height: 18px; padding: 3px; background: #2E1C14; }
.arc-load > span:first-child::before { content: ""; display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, #C9A15B 0 10px, #EBC77A 10px 14px); animation: arcLoad 1.1s steps(11) forwards; }

/* כפתורים */
.arc-nav { display: flex; justify-content: space-between; gap: 12px; padding: 12px 20px 10px; border-top: 2px dashed rgba(46, 28, 20, .2); }
.arc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 104px; padding: 12px 20px; border: 0; cursor: pointer;
  font: 800 15.5px/1 Heebo, sans-serif; color: #2E1C14; background: #FFFDF8;
  box-shadow: 0 -3px 0 0 #2E1C14, 0 3px 0 0 #2E1C14, -3px 0 0 0 #2E1C14, 3px 0 0 0 #2E1C14, 5px 5px 0 0 rgba(46, 28, 20, .2);
  transition: transform .08s steps(2), box-shadow .08s steps(2);
}
.arc-btn:hover { transform: translate(-1px, -1px); }
.arc-btn:active { transform: translate(3px, 3px); box-shadow: 0 -3px 0 0 #2E1C14, 0 3px 0 0 #2E1C14, -3px 0 0 0 #2E1C14, 3px 0 0 0 #2E1C14; }
.arc-btn:disabled { opacity: .55; cursor: default; transform: none; }
.arc-btn--go { background: #8B2F2C; color: #F2E2BE; box-shadow: 0 -3px 0 0 #2E1C14, 0 3px 0 0 #2E1C14, -3px 0 0 0 #2E1C14, 3px 0 0 0 #2E1C14, inset 0 -4px 0 0 rgba(0, 0, 0, .25), 5px 5px 0 0 rgba(46, 28, 20, .22); }
.arc-next::after { content: "◀"; font-size: 11px; }
.arc-back::before { content: "▶"; font-size: 11px; }
.arc-next.is-send::after { content: "✦"; color: #EBC77A; }
.arc-keys { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; padding: 0 16px 12px; font: 700 11.5px/1 Heebo, sans-serif; color: #6E5544; }
.arc-keys span { display: inline-flex; align-items: center; gap: 6px; }
.arc-keys kbd { padding: 4px 6px; font: 700 10px/1 ui-monospace, Menlo, monospace; color: #2E1C14; background: #F2E2BE; box-shadow: 0 -2px 0 0 #2E1C14, 0 2px 0 0 #2E1C14, -2px 0 0 0 #2E1C14, 2px 0 0 0 #2E1C14, 0 4px 0 0 #2E1C14; }

/* נקודות וכרזות */
.arc-pop { position: absolute; bottom: 96px; left: 14%; z-index: 4; pointer-events: none; opacity: 0; }
.arc-pop.is-on { animation: arcPop 1s steps(10) forwards; }
.arc-banner { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; pointer-events: none; opacity: 0; }
.arc-banner.is-on { animation: arcBanner 1.7s steps(17) forwards; }
.arc-banner-in { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 34px; background: #2E1C14; box-shadow: 0 0 0 4px #C9A15B, 0 0 0 8px #2E1C14, 12px 12px 0 8px rgba(0, 0, 0, .25); }

/* ---------- מסך הסיום ---------- */
.arc-win-v { display: flex; align-items: center; justify-content: center; padding: 10px 18px 40px; overflow: auto; }
.arc-wbox { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 560px; text-align: center; }
.arc-wt { animation: arcBob 2.6s steps(4) infinite; }
.arc-stats { display: flex; gap: 14px; margin-top: 6px; }
.arc-stat { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 104px; padding: 12px 14px; background: rgba(251, 246, 238, .92); box-shadow: 0 -3px 0 0 #2E1C14, 0 3px 0 0 #2E1C14, -3px 0 0 0 #2E1C14, 3px 0 0 0 #2E1C14; }
.arc-stat span { font: 700 12.5px/1 Heebo, sans-serif; color: #6E5544; }
.arc-wtext { margin: 4px 0 0; padding: 14px 18px; font: 700 15.5px/1.65 Heebo, sans-serif; background: rgba(255, 253, 248, .9); box-shadow: 0 -3px 0 0 #2E1C14, 0 3px 0 0 #2E1C14, -3px 0 0 0 #2E1C14, 3px 0 0 0 #2E1C14; }
.arc-demo { margin: 0; font: 600 13px/1.5 Heebo, sans-serif; color: #6E5544; }

/* ---------- מוטות ההיגוי ---------- */
.arc-deck { position: relative; z-index: 3; height: 98px; margin-top: -34px; display: flex; align-items: flex-start; justify-content: space-between; padding: 0 13%; pointer-events: none; }
.arc-stick { position: relative; width: 84px; height: 98px; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
.st-base { position: absolute; left: 50%; top: 70px; width: 58px; height: 16px; margin-left: -29px; border-radius: 50%; background: radial-gradient(ellipse at 50% 35%, #4A3328, #120A06 70%); box-shadow: 0 4px 8px rgba(0, 0, 0, .5); }
.st-lever { position: absolute; inset: 0; transform-origin: 50% 78px; transition: transform .12s ease-out; }
.st-rod { position: absolute; left: 50%; top: 40px; width: 8px; height: 38px; margin-left: -4px; border-radius: 3px; background: linear-gradient(90deg, #7D7570, #F2EEEA 42%, #9C948E); }
.st-ball {
  position: absolute; left: 50%; top: 0; width: 52px; height: 52px; margin-left: -26px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #F7B9A2 0 7%, #D2654B 28%, #9A3530 64%, #5E1E1B 100%);
  box-shadow: inset -5px -7px 12px rgba(0, 0, 0, .35), 0 10px 16px -6px rgba(0, 0, 0, .6);
}
.arc-stick em { position: absolute; top: 88px; left: 50%; transform: translateX(-50%); font: 700 11.5px/1 Heebo, sans-serif; font-style: normal; color: #C9AA88; white-space: nowrap; letter-spacing: .06em; }
.arc-stick:hover .st-ball { filter: brightness(1.08); }
.arc-stick:focus-visible { outline: none; }
.arc-stick:focus-visible .st-ball { box-shadow: 0 0 0 3px #EBC77A, inset -5px -7px 12px rgba(0, 0, 0, .35); }
.arc-stick[data-act="next"].is-push .st-lever { animation: arcTiltL .32s ease-out; }
.arc-stick[data-act="back"].is-push .st-lever { animation: arcTiltR .32s ease-out; }
.arc-plate { align-self: center; margin-top: 40px; padding: 8px 14px; background: #1E0F08; box-shadow: inset 0 0 0 2px rgba(201, 161, 91, .35); opacity: .9; }

/* ---------- אנימציות ---------- */
@keyframes arcCabIn { from { opacity: 0; transform: translateY(26px) scale(.95); } }
@keyframes arcCrt { 0% { transform: scale(.7, .006); opacity: 1; } 35% { transform: scale(1, .006); opacity: 1; } 70% { transform: scale(1, 1); opacity: .9; } 100% { transform: scale(1, 1); opacity: 0; } }
@keyframes arcBlink { 50% { opacity: .25; } }
@keyframes arcBob { 50% { transform: translateY(-6px); } }
@keyframes arcIn { from { opacity: 0; transform: translateX(-24px); } }
@keyframes arcShake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
@keyframes arcPop { 0% { opacity: 0; transform: translateY(10px); } 15% { opacity: 1; transform: translateY(0); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-34px); } }
@keyframes arcBanner { 0% { opacity: 0; transform: scale(.6); } 12% { opacity: 1; transform: scale(1.06); } 20% { transform: scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: scale(1); } }
@keyframes arcPopIn { from { transform: scale(0); } }
@keyframes arcLoad { to { width: 100%; } }
@keyframes arcTiltL { 40% { transform: rotate(-16deg); } }
@keyframes arcTiltR { 40% { transform: rotate(16deg); } }

/* ---------- מסכים קטנים ---------- */
@media (max-width: 860px) {
  .arc-play-v { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 14px; padding: 10px 12px 22px; }
  .arc-card { flex-direction: row; align-items: center; gap: 14px; padding: 12px 14px; text-align: right; align-self: stretch; }
  .arc-ava { width: 64px; height: 64px; }
  .arc-ava canvas { width: 64px; height: 64px; }
  .arc-ava.is-photo canvas { width: 64px; height: 64px; }
  .arc-info { align-items: flex-start; gap: 7px; }
  .arc-name { min-height: 0; }
  .arc-hearts { position: absolute; top: 12px; left: 14px; gap: 5px; }
  .arc-heart { --s: 2; }
  .arc-keys { display: none; }
}
@media (max-width: 640px) {
  .arcade { --px-title: 3; padding: 0; }
  .arc-cab { height: 100%; }
  .arc-bezel { border-radius: 0; padding: 8px 8px 30px; }
  .arc-screen { border-radius: 18px; }
  .arc-top { padding: 10px 10px 0; }
  .arc-chip { font-size: 12px; padding: 6px 9px; }
  .arc-credit { display: none; }
  .arc-tabs { padding: 10px 12px 9px; gap: 6px; }
  .arc-tab { font-size: 12px; padding: 5px 7px 5px 9px; gap: 5px; }
  .arc-tab:not(.is-on) { font-size: 0; gap: 0; padding: 5px; }
  .arc-tabs { flex-wrap: nowrap; }
  .arc-scroll { padding: 14px 14px 6px; }
  .arc-qic { --s: 2; }
  .arc-mascot-spr { --s: 3; }
  .arc-say { font-size: 15.5px; padding: 10px 12px; }
  .arc-fields.is-two { grid-template-columns: 1fr; }
  .arc-in { font-size: 16px; }
  .arc-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .arc-dream { padding: 6px 4px 7px; font-size: 11.5px; }
  .arc-dpic, .arc-dpic canvas { width: 72px; height: 54px; }
  .arc-opt-spr { --s: 5; }
  .arc-choice.is-big .arc-opt { padding: 14px 18px 12px; }
  .arc-photo { grid-template-columns: 1fr; grid-template-areas: "prev" "up" "note"; justify-items: center; }
  .arc-photo-prev { justify-self: center; }
  .arc-nav { padding: 10px 12px; }
  .arc-btn { min-width: 0; padding: 12px 16px; font-size: 15px; }
  .arc-tfoot { bottom: 14px; inset-inline: 14px; flex-direction: column; align-items: center; gap: 6px; }
  .arc-stats { gap: 8px; }
  .arc-stat { min-width: 84px; padding: 10px; }
  .arc-deck { height: 50px; margin-top: -26px; padding: 0 9%; }
  .arc-stick { width: 60px; height: 76px; }
  .st-ball { width: 40px; height: 40px; margin-left: -20px; }
  .st-rod { top: 30px; height: 32px; width: 6px; margin-left: -3px; }
  .st-base { top: 56px; width: 46px; height: 13px; margin-left: -23px; }
  .st-lever { transform-origin: 50% 62px; }
  .arc-stick em { display: none; }
  .arc-plate { display: none; }
  .arc-pop { bottom: 80px; }
}
@media (max-height: 640px) and (min-width: 641px) {
  .arc-card { padding: 14px; gap: 10px; }
  .arc-ava { width: 104px; height: 104px; }
  .arc-ava canvas { width: 96px; height: 96px; }
  .arc-ava.is-photo canvas { width: 96px; height: 96px; }
  .arc-keys { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .arcade *, .arcade *::before, .arcade *::after { animation: none !important; transition: none !important; }
  .arc-pop.is-on, .arc-banner.is-on { opacity: 1; }
  .gc-blink { animation: none; }
}