/* המפלצת 2, הבטא (v3). מפרט: 2026-10-24-prototype-v3-look.md.
   הקנבס מצייר רק פיקסלים. כל טקסט הוא HTML חד, Assistant בשני משקלים בלבד (400, 600). */
@font-face { font-family: 'Asst'; src: url(fonts/Assistant-Regular.ttf?v=5.4) format('truetype'); font-weight: 400; font-display: block; }
@font-face { font-family: 'Asst'; src: url(fonts/Assistant-SemiBold.ttf?v=5.4) format('truetype'); font-weight: 600; font-display: block; }

/* ================= הפלטה של הממשק: כל צבע של הממשק והשכבות כאן, ורק כאן =================
   פלטה 2, "נייר" (בחירה שלו, 24.10; המעצב: _process/2026-10-24-prototype-v3/palettes/palettes.md).
   החלפת פלטה = עריכה של הבלוק הזה. game.js קורא מכאן גם את צבעי הפסים שהוא מצייר (--hp*, --power*).
   לפי הביקורת של המעצב: מסגרת כהה עבה סביב גוש המשחק, והלוח היומי מעומעם מעט, כדי שהעין תלך קודם אליה. */
:root {
  --page: #9c8a6c;          /* רקע מאחורי המכשיר */
  --body-grad: linear-gradient(170deg, #f6eedd 0%, #efe4cc 45%, #e4d6b8 100%);   /* גוף המכשיר */
  --body-hi: #fffaf0;
  --body-lo: #cbbb98;
  --lcd-ink: #f3ead6;       /* "יום X מתוך 21" בצג העליון */
  --btn-hi: #fffaf0;
  --led-ready: #6cc36a;
  --led-wait: #e0a33a;
  --hp-trail: #f3c84a;      /* השובל הצהוב בפס החיים */
  --frame: #2b2118;         /* דיו: קווי מתאר, מסגרת גוש המשחק */
  --frame-w: 3px;           /* עובי המסגרת סביב גוש המשחק */
  --bezel: 10px;            /* המסגרת של המכשיר סביב המסך */
  --bezel-r: 14px;
  --bezel-bg: #3a2d22;
  --bezel-hi: #54432f;
  --shadow: #b3a183;        /* צל תחתון של מסגרות */
  --win-bg: #2b2118;        /* רקע חלון המשחק */
  --grade: sepia(.14) saturate(.92);   /* גוון חם קל על הקנבס */
  --tray: #e6d8ba;          /* המגש של חשק וההתעללויות */
  --panel: #ece2cb;         /* הלוח היומי (מעומעם מ-#f3ead6) */
  --text: #2b2118;          /* טקסט */
  --label: #6b5844;         /* תוויות */
  --accent: #a83c1a;        /* לבנה: חשק, מספר הסיגריות, ימים שעברו */
  --accent-ink: #fbf4e6;    /* טקסט על הלבנה */
  --money: #2f5f33;         /* הכסף שנחסך */
  --day-off: #d9ccb0;       /* ימים שלא הגיעו */
  --day-now: #2b2118;       /* היום */
  --btn: #f8f1e2;           /* כפתור התעללות */
  --btn-ink: #2b2118;
  --btn-edge: #b3a183;
  --locked: #d9ccb0;        /* כפתור נעול */
  --locked-ink: #6b5844;
  --gold: #d99a1e;          /* גרסה חזקה, מוכן, קריטי */
  --kill: #a83c1a;
  --bubble: #fffaf0;        /* הבועה שלה */
  --bubble-ink: #2b2118;
  --voice: #2b2118;         /* פס קול המשחק */
  --voice-ink: #fffaf0;
  --ink-soft: #6b5844;      /* טקסט משני בחלונות */
  --input-bg: #fffaf0;
  --dim: rgba(43, 33, 24, .55);   /* זמן טעינה על כפתור */
  --dmg: #fffaf0;           /* מספרי נזק */
  --hp: #a83c1a;            /* פס החיים שלה בקרב */
  --hp-low: #d99a1e;        /* מתחת לרבע */
  --hp-empty: #cdbf9f;
  --power: #a83c1a;         /* פס הכוח שלה בשגרה */
  --power-low: #d99a1e;
  --power-empty: #cdbf9f;
  --line: #2b2118;          /* קו המתאר של הפסים בקנבס */
  --scan: #000;             /* קווי סריקה */
  --px: 2px;
}
html, body { margin: 0; background: var(--page); overflow-x: hidden; overscroll-behavior-y: none; touch-action: manipulation; }
body { font-family: 'Asst', sans-serif; font-weight: 400; color: var(--text); -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
button, input, select { font-family: inherit; }

/* ================= המעטפת "המכשיר" (shell 1, _process/2026-10-24-prototype-v3/shell/shell.md) =================
   כל הטלפון הוא גוף של צעצוע. המסך שקוע במסגרת כהה עם זכוכית וברק, לאורך (3:4). מתחתיו יש לי חשק באמצע
   ויומן ומצב משני הצדדים, ומתחת המקשים בשתי שורות שנגללות לצד. הדף נגלל למידע */
body { background: var(--page); }
#app { position: relative; max-width: 460px; margin: max(6px, env(safe-area-inset-top)) auto 12px; padding: 0 0 22px; box-sizing: border-box;
  border-radius: 40px; background: var(--body-grad); box-shadow: inset 0 3px 0 var(--body-hi), inset 0 -8px 0 var(--body-lo), inset 0 0 0 2px var(--frame), 0 2px 0 var(--frame); width: calc(100% - 12px); }
#devtop { position: relative; height: 62px; }
#devtop .grille { position: absolute; top: 22px; right: 26px; width: 46px; height: 22px; background: radial-gradient(circle, var(--label) 1.6px, transparent 2px) 0 0 / 7px 7px; }
#devtop .screw { position: absolute; top: 26px; left: 28px; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff7e6, var(--shadow) 70%); box-shadow: inset 0 0 0 1px #7d6b52, 0 1px 0 var(--body-hi); }
#devtop .screw::after { content: ''; position: absolute; left: 2px; right: 2px; top: 5px; height: 2px; background: var(--label); transform: rotate(35deg); }
#lcdtop { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); height: 34px; padding: 0 18px; border-radius: 9px; background: var(--frame); white-space: nowrap;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, .6), 0 2px 0 var(--body-hi); display: flex; align-items: center; gap: 10px; }
#lcdtop .led { width: 8px; height: 8px; border-radius: 50%; background: #e2543a; box-shadow: 0 0 6px #e2543a; }
#dayLbl { font-weight: 600; font-size: 16px; color: var(--lcd-ink); }
#bezel { margin: 0 16px; padding: 12px; border-radius: 22px; background: var(--frame); box-shadow: inset 0 2px 0 #5a4734, 0 3px 0 var(--body-hi), inset 0 -3px 0 #120d09; }
/* המסך: גובה שמשאיר את המכות בתוך מסך הטלפון בלי גלילה. גרירה אנכית עליו גוללת את הדף, רק הקשה מכה */
#win { position: relative; width: 100%; height: min(calc((100vw - 56px) * 4 / 3), calc(100svh - 372px)); min-height: 230px; max-height: 560px; overflow: hidden; border-radius: 8px; background: var(--win-bg); touch-action: pan-y; }
#win::after { content: ''; position: absolute; inset: 0; border-radius: 8px; pointer-events: none; z-index: 5;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .5), inset 0 8px 16px rgba(0, 0, 0, .45); background: linear-gradient(125deg, rgba(255, 255, 255, .16) 0 18%, rgba(255, 255, 255, 0) 18.2%); }
/* מעבר בין חדרים: שני חצים בצדי המסך בסגנון כפתורי המכשיר, יעד לחיצה 44px. בחדר הראשון והאחרון החץ מאפיר */
.rarrow { position: absolute; top: 50%; z-index: 6; width: 44px; height: 52px; margin-top: -26px; border: 0; padding: 0; cursor: pointer; background: transparent; display: grid; place-items: center; }
.rarrow.l { left: 2px; } .rarrow.r { right: 2px; }
.rarrow i { width: 30px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: radial-gradient(circle at 38% 30%, var(--btn-hi), var(--tray) 75%);
  box-shadow: 0 0 0 2px var(--frame), 0 4px 0 2px var(--frame); opacity: .92; }
.rarrow i::before { content: ''; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.rarrow.l i::before { border-right: 10px solid var(--frame); margin-right: 3px; }
.rarrow.r i::before { border-left: 10px solid var(--frame); margin-left: 3px; }
.rarrow:active i { transform: translateY(3px); box-shadow: 0 0 0 2px var(--frame), 0 1px 0 2px var(--frame); }
.rarrow:disabled { cursor: default; } .rarrow:disabled i { opacity: .35; filter: grayscale(1); }
.rarrow[hidden] { display: none; }
#roomLbl { font-weight: 600; font-size: 14px; color: var(--lcd-ink); opacity: .7; }
#roomLbl:empty { display: none; }

/* השורה: יומן, כיפה אדומה באמצע, מצב */
#actions { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin: 12px 20px 0; }
.rb { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.rb small { font-size: 14px; font-weight: 600; color: var(--label); }
.round { width: 58px; height: 58px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: radial-gradient(circle at 38% 30%, var(--btn-hi), var(--tray) 70%);
  display: grid; place-items: center; box-shadow: 0 0 0 3px var(--frame), 0 6px 0 3px var(--btn-edge), 0 8px 0 3px var(--frame); transition: transform 120ms, box-shadow 120ms; }
.round canvas { width: 24px; height: 20px; image-rendering: pixelated; }
.round:active { transform: translateY(6px); box-shadow: 0 0 0 3px var(--frame), 0 0 0 3px var(--btn-edge), 0 2px 0 3px var(--frame); transition-duration: 60ms; }
.dome, #crave { flex: 1; height: 58px; border: 0; border-radius: 29px; cursor: pointer; color: var(--accent-ink); font-weight: 600; font-size: 20px; position: relative; z-index: 1;
  background: radial-gradient(ellipse at 40% 25%, #d9603a 0%, var(--accent) 55%, #8a2f12 100%);
  box-shadow: 0 0 0 3px var(--frame), 0 7px 0 3px #6e2610, 0 9px 0 3px var(--frame), 0 12px 10px 3px rgba(0, 0, 0, .18); transition: transform 120ms, box-shadow 120ms; }
#crave:active { transform: translateY(7px); box-shadow: 0 0 0 3px var(--frame), 0 0 0 3px #6e2610, 0 2px 0 3px var(--frame); transition-duration: 60ms; }
#crave.fighting { background: radial-gradient(ellipse at 40% 25%, #6b5844 0%, var(--frame) 70%); }

/* המקשים: שתי שורות, גלילה לצד עם הצמדה לעמודה */
#tray { margin: 12px 0 0; padding: 0 14px; }
#abuses { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, 58px); grid-auto-columns: calc((100% - 30px) / 4); gap: 16px 10px;
  overflow-x: auto; overflow-y: hidden; padding: 4px 4px 14px; scroll-snap-type: x mandatory; scrollbar-width: none; touch-action: pan-x; overscroll-behavior-x: contain; }
#abuses::-webkit-scrollbar { display: none; }
.ab { position: relative; scroll-snap-align: start; border: 0; padding: 0; border-radius: 12px; cursor: pointer; background: linear-gradient(var(--btn), var(--tray));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  box-shadow: 0 0 0 2px var(--frame), 0 6px 0 2px var(--btn-edge), 0 8px 0 2px var(--frame); transition: transform 120ms, box-shadow 120ms; }
.ab:active, .ab.down { transform: translateY(6px); box-shadow: 0 0 0 2px var(--frame), 0 1px 0 2px var(--btn-edge), 0 2px 0 2px var(--frame); transition-duration: 60ms; }
.ab canvas { width: 28px; height: 28px; image-rendering: pixelated; }
.ab span { font-weight: 600; font-size: 13px; color: var(--btn-ink); line-height: 1.1; white-space: nowrap; }
.ab::after { content: ''; position: absolute; top: 6px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--led-ready); box-shadow: 0 0 5px var(--led-ready); }
.ab.cooling::after { background: var(--led-wait); box-shadow: 0 0 5px var(--led-wait); }
.ab .cd { position: absolute; inset: 0; border-radius: 12px; background: conic-gradient(var(--dim) 0 var(--cd, 0deg), transparent var(--cd, 0deg)); pointer-events: none; }
.ab .cdn { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-size: 22px; font-weight: 600; color: var(--accent-ink); text-shadow: 0 2px 0 var(--frame); pointer-events: none; }
/* נעול: שקע בגוף עם צללית של הפריט, מנעול קטן וכמה ימים נשארו */
.ab.locked { background: var(--locked); box-shadow: inset 0 3px 4px rgba(43, 33, 24, .45), 0 1px 0 var(--body-hi); transform: none; }
.ab.locked::after { display: none; }
.ab.locked canvas { filter: brightness(0); opacity: .28; }
.ab.locked span { color: var(--locked-ink); font-weight: 600; font-size: 12px; }
.ab.locked::before { content: ''; position: absolute; top: 5px; right: 6px; width: 10px; height: 11px; background:
  linear-gradient(var(--locked-ink), var(--locked-ink)) 0 5px / 10px 6px no-repeat, linear-gradient(var(--locked-ink), var(--locked-ink)) 2px 0 / 2px 5px no-repeat,
  linear-gradient(var(--locked-ink), var(--locked-ink)) 6px 0 / 2px 5px no-repeat, linear-gradient(var(--locked-ink), var(--locked-ink)) 2px 0 / 6px 2px no-repeat; }
.ab.kill { background: radial-gradient(ellipse at 40% 25%, #d9603a, var(--accent) 60%); grid-row: span 2; }
.ab.kill span { color: var(--accent-ink); font-size: 16px; }
.ab.strong span::before { content: '★ '; color: var(--gold); }
.ab.used { filter: grayscale(1) brightness(.75); }
.ab.ready { animation: ready .5s steps(2) 2; }
.ab.pop { animation: pop .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes ready { 50% { background: var(--gold); } }
@keyframes pop { 0% { transform: scale(.6); } 70% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* המידע, בתחתית הגוף */
#panel { margin: 18px 16px 0; border-radius: 16px; background: var(--panel); color: var(--text); padding: 12px 16px 14px; display: grid; row-gap: 8px;
  box-shadow: inset 0 0 0 2px var(--frame), inset 0 4px 0 var(--btn-hi); }
#panel .r2 { display: flex; gap: 12px; }
#panel .r2 > div { flex: 1; display: flex; flex-direction: column; justify-content: center; }
#panel .r2 > div[hidden] { display: none; }
#panel .r2 b { font-weight: 600; font-size: 24px; line-height: 1.1; color: var(--accent); font-variant-numeric: tabular-nums; }
#panel .r2 > div:last-child b { color: var(--money); }
#panel .r2 span { font-size: 13px; color: var(--label); }
#panel .r3 { all: unset; display: flex; flex-direction: column; justify-content: center; cursor: pointer; min-width: 0; }
#panel .r3 .lb { font-size: 13px; font-weight: 600; color: var(--label); }
#bodyLine { font-size: 15px; color: var(--text); line-height: 1.4; }
#bodyLine::after { content: ' ›'; color: var(--accent); }
#panel .r4 { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); }
.lock { width: 10px; height: 11px; flex: none; background:
  linear-gradient(var(--label), var(--label)) 0 5px / 10px 6px no-repeat, linear-gradient(var(--label), var(--label)) 2px 0 / 2px 5px no-repeat,
  linear-gradient(var(--label), var(--label)) 6px 0 / 2px 5px no-repeat, linear-gradient(var(--label), var(--label)) 2px 0 / 6px 2px no-repeat; }
#devbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--frame); color: var(--accent-ink); font-weight: 600; font-size: 15px; }
#devbar[hidden] { display: none; }
#devbar button { border: 0; background: var(--btn); color: var(--btn-ink); font-size: 15px; width: 34px; height: 30px; font-weight: 600; }
#devbar input { flex: 1; accent-color: var(--accent); }
#devLbl { min-width: 54px; text-align: center; }

/* ---------- חלונות ---------- */
.win { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 10;
  background: repeating-conic-gradient(rgba(43, 33, 24, .7) 0 25%, transparent 0 50%) 0 0 / 4px 4px; }
.win[hidden] { display: none; }
.box { background: var(--panel); color: var(--text); width: min(88vw, 380px); max-height: 84vh; max-height: 84dvh; overflow: auto; padding: 14px 16px 16px; box-sizing: border-box;
  box-shadow: 0 -3px 0 var(--frame), 0 3px 0 var(--frame), -3px 0 0 var(--frame), 3px 0 0 var(--frame), 0 9px 0 var(--shadow); font-size: 15px; line-height: 1.45; }
.ttl { font-weight: 600; font-size: 18px; margin-bottom: 6px; }
.box h4 { font-weight: 600; font-size: 15px; margin: 10px 0 2px; }
.box p { margin: 0 0 4px; }
.src { font-size: 13px; color: var(--ink-soft); margin-top: 8px !important; }
.note { font-size: 14px; color: var(--ink-soft); }
.pxbtn { font-weight: 600; font-size: 17px; background: var(--accent); color: var(--accent-ink); border: 0; padding: 7px 16px; margin-top: 10px; cursor: pointer;
  box-shadow: 0 -2px 0 var(--line), 0 2px 0 var(--line), -2px 0 0 var(--line), 2px 0 0 var(--line), 0 6px 0 var(--shadow); }
.pxbtn:active { transform: translateY(4px); box-shadow: 0 -2px 0 var(--line), 0 2px 0 var(--line), -2px 0 0 var(--line), 2px 0 0 var(--line); }
.pxbtn.sm { font-size: 14px; padding: 4px 9px; margin: 5px 3px; background: var(--btn); color: var(--btn-ink); }
#cont { min-width: 60%; margin-top: 6px; }
.row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 8px 0; }
.days button { font-weight: 600; font-size: 15px; border: 0; padding: 6px 0; background: var(--btn); color: var(--btn-ink); box-shadow: 0 0 0 2px var(--line); }
.days button.cur { background: var(--accent); color: var(--accent-ink); }

/* פתיחה ראשונה */
#firstForm label { display: block; font-weight: 600; font-size: 15px; margin: 9px 0 0; }
#firstForm small { font-weight: 400; color: var(--ink-soft); }
#firstForm input, #firstForm select { display: block; width: 100%; box-sizing: border-box; font-size: 16px; padding: 6px 8px; margin-top: 3px; border: 0; background: var(--input-bg); color: var(--text);
  box-shadow: 0 0 0 2px var(--line); border-radius: 0; }
#firstForm .two { display: flex; gap: 8px; }
.seg { display: flex; gap: 6px; margin-top: 4px; }
.seg button { flex: 1; font-size: 15px; font-weight: 600; padding: 6px 0; border: 0; background: var(--btn); color: var(--btn-ink); box-shadow: 0 0 0 2px var(--line); }
.seg button.on { background: var(--accent); color: var(--accent-ink); }

/* חלון הטקסט של יום 21 */
#storyBody p { margin: 0 0 8px; animation: lineIn .3s steps(3); }
#storyBody .src { margin-top: -6px !important; }
@keyframes lineIn { from { opacity: 0 } }
#firstForm label[hidden] { display: none; }

/* ---------- מצב: ארבעה כרטיסים ---------- */
#statBox { padding-bottom: 12px; }
.cardsWrap { overflow: hidden; touch-action: pan-y; }
.cards { display: flex; flex-direction: row-reverse; direction: ltr; transition: transform .28s cubic-bezier(.2, .8, .3, 1); }
.card { flex: 0 0 100%; box-sizing: border-box; direction: rtl; padding: 2px 4px 4px; text-align: center; min-height: 360px; }
.card .ttl { text-align: center; }
canvas.pix { image-rendering: pixelated; display: block; }
.portrait { image-rendering: pixelated; display: block; margin: 4px auto 6px; max-width: 100%; }
.hearts { display: flex; justify-content: center; gap: 4px; direction: rtl; margin: 4px 0 12px; }
.hearts .blink { animation: hblink .9s steps(2) 2; }
@keyframes hblink { 50% { opacity: 0; } }
.track { display: grid; grid-template-columns: repeat(21, 1fr); gap: 2px; direction: rtl; margin: 4px 0 10px; }
.track .seg { grid-column: span 7; font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.track .cell { height: 16px; position: relative; box-shadow: 0 0 0 1px var(--frame); }
.track .s1 { background: #a83c1a; } .track .s2 { background: #d99a1e; } .track .s3 { background: #8d8576; }
.track .past::after { content: '×'; position: absolute; inset: 0; display: grid; place-items: center; font-weight: 600; font-size: 13px; line-height: 1; color: var(--accent-ink); }
.track .now::after { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: #e2543a; box-shadow: 0 0 0 2px var(--accent-ink); }
.big1 { font-weight: 600; font-size: 17px; }
.clean { font-size: 16px; font-weight: 600; margin-top: 6px; }
.clean .num { font-size: 34px; color: var(--accent); font-variant-numeric: tabular-nums; }
.sub { font-size: 14px; color: var(--ink-soft); }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.tile { background: var(--btn); box-shadow: 0 0 0 2px var(--frame); padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tile .num { font-size: 20px; color: var(--accent); font-variant-numeric: tabular-nums; }
.tile span { font-size: 14px; font-weight: 600; line-height: 1.2; }
.quit { display: block; font-weight: 600; font-size: 15px; margin-top: 6px; }
.quit input { display: block; width: 100%; box-sizing: border-box; font-size: 16px; padding: 6px 8px; margin-top: 3px; border: 0; background: var(--input-bg); color: var(--text); box-shadow: 0 0 0 2px var(--line); }
.dayNote { display: block; font-size: 14px; font-weight: 600; color: var(--accent); margin-top: 4px; }
.agrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 6px; }
.acell { position: relative; border: 0; padding: 6px 2px 4px; min-height: 64px; background: var(--btn); box-shadow: 0 0 0 2px var(--frame); display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; font: inherit; color: var(--text); }
.acell canvas { width: 32px; height: 32px; image-rendering: pixelated; }
.acell .nm, .acell .when { font-size: 14px; font-weight: 600; line-height: 1.15; }
.acell.locked { background: var(--locked); color: var(--locked-ink); cursor: default; }
.acell.locked canvas.pix { position: absolute; top: 4px; left: 4px; width: 10px; height: 10px; }
.acell.today { box-shadow: 0 0 0 3px var(--accent); }
.acell.today .nm { color: var(--accent); }
.brow { display: flex; gap: 10px; align-items: flex-start; text-align: right; margin: 8px 0; }
.brow canvas { flex: 0 0 auto; width: 20px; margin-top: 3px; }
.brow p { font-size: 15px; margin: 0; }
.prog { height: 14px; background: var(--hp-empty); box-shadow: 0 0 0 2px var(--frame); margin: 12px 4px 4px; direction: rtl; }
.prog i { display: block; height: 100%; background: var(--money); transition: width .4s steps(12); }
.cardNav { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.cnav { width: 44px; height: 44px; border: 0; font: inherit; font-size: 26px; font-weight: 600; background: var(--btn); color: var(--text); box-shadow: 0 0 0 2px var(--frame); cursor: pointer; }
.cnav:disabled { opacity: .35; cursor: default; }
.dots { display: flex; gap: 10px; direction: rtl; }
.dots i { width: 12px; height: 12px; background: var(--hp-empty); box-shadow: 0 0 0 2px var(--frame); cursor: pointer; }
.dots i.on { background: var(--accent); }
#statClose { display: block; margin: 10px auto 0; }

/* ---------- בתוך המסך: הקנבס, קווי סריקה, הבועה, מספרי נזק ---------- */
#game { position: absolute; left: 50%; top: 0; transform: translateX(-50%); image-rendering: pixelated; image-rendering: crisp-edges; display: block; filter: var(--grade); }
#scan { position: absolute; inset: 0; pointer-events: none; opacity: .07;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent var(--px), var(--scan) var(--px), var(--scan) calc(var(--px) * 2)); }
#scan.off { display: none; }
#bubble { position: absolute; z-index: 3; pointer-events: none; font-weight: 600; font-size: 15px; line-height: 1.35; padding: 5px 9px 6px; box-sizing: border-box; }
#bubble.her { background: var(--bubble); color: var(--bubble-ink); width: max-content; max-width: min(240px, 72%); border-radius: 10px; border: 2px solid var(--frame); box-shadow: 0 3px 0 rgba(0, 0, 0, .3); }
#bubble.game { top: 8px; left: 8px; right: 8px; background: var(--voice); color: var(--voice-ink); padding: 6px 10px 7px; border-radius: 6px; box-shadow: 0 0 0 2px var(--bubble); }
#bubble.game .tail { display: none; }
#bubble .tr { font-weight: 400; font-size: 14px; color: var(--ink-soft); margin-top: 2px; }
#bubble .tail { position: absolute; bottom: -9px; left: var(--tx, 50%); width: 14px; height: 14px; margin-left: -7px; background: var(--bubble);
  border-right: 2px solid var(--frame); border-bottom: 2px solid var(--frame); transform: rotate(45deg); }
#fx { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
#fx .dmg { position: absolute; font-weight: 600; font-size: 18px; color: var(--dmg); transform: translate(-50%, -100%); white-space: nowrap;
  text-shadow: -2px 0 var(--frame), 2px 0 var(--frame), 0 -2px var(--frame), 0 2px var(--frame), -2px -2px var(--frame), 2px 2px var(--frame), -2px 2px var(--frame), 2px -2px var(--frame);
  animation: dmg .9s steps(9) forwards; }
#fx .dmg.crit { color: var(--gold); font-size: 22px; }
#fx .dmg.weak { color: var(--hp-empty); font-size: 15px; }
#fx .dmg.big { font-size: 22px; color: var(--accent); }
/* הצעקות הקטנות שלה (אאאאא!, פפפפ): כהה על בהיר, מסגרת חדה, בלי צל */
#fx .dmg.sfx { font-size: 16px; color: var(--bubble-ink); background: var(--bubble); padding: 1px 7px 2px; border-radius: 4px; text-shadow: none; box-shadow: 0 0 0 2px var(--frame); }
/* יום 19, החברים: הודעות מהחברים בטקסט קריא, נוחתות עליה כמו לבנים */
#fx .msgb { position: absolute; transform: translate(-50%, -100%); font-weight: 600; font-size: 14px; line-height: 1.2; white-space: nowrap; direction: rtl;
  color: #201038; background: #dff3cf; border: 2px solid #201038; border-radius: 10px 10px 10px 2px; padding: 3px 10px; box-shadow: 0 2px 0 #201038; transition: opacity .35s; }
#fx .msgb.gone { opacity: 0; }
@keyframes dmg { 0% { margin-top: 4px; opacity: 1 } 15% { margin-top: -6px } 70% { opacity: 1 } 100% { margin-top: -26px; opacity: 0 } }
#fx .num { position: absolute; font-weight: 600; font-size: 20px; color: var(--bubble-ink); background: var(--bubble); padding: 2px 8px; border-radius: 4px;
  box-shadow: 0 0 0 2px var(--frame), 0 5px 0 var(--shadow); transition: top .35s cubic-bezier(.5, 0, 1, 1); }

/* ---------- יום 21 ---------- */
#stage21 { height: 70px; display: flex; align-items: flex-start; justify-content: center; padding-top: 16px; }
#stage21[hidden] { display: none; }
body.d21 #panel, body.d21 #actions { display: none; }
body.d21.nofight #tray { display: none; }

/* ---------- יומן ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.chips button { border: 0; font-weight: 600; font-size: 15px; padding: 6px 12px; background: var(--btn); color: var(--btn-ink); box-shadow: 0 0 0 2px var(--frame); cursor: pointer; border-radius: 8px; }
.pattern { font-weight: 600; color: var(--accent); }
#logList { list-style: none; padding: 0; margin: 6px 0; }
#logList > li { margin: 0 0 10px; }
#logList .dayHead { display: flex; justify-content: space-between; border-bottom: 2px solid var(--frame); padding-bottom: 2px; margin-bottom: 4px; }
#logList .dayHead span { color: var(--label); font-size: 14px; }
#logList ul { list-style: none; padding: 0; margin: 0; }
#logList ul li { display: flex; gap: 10px; font-size: 14px; padding: 2px 0; }
#logList .num, #statBox .num { font-variant-numeric: tabular-nums; font-weight: 600; }
/* כשנשאר רק "חיסול": כפתור אחד לכל הרוחב */
#abuses.single { display: block; padding: 4px 4px 14px; }
#abuses.single .ab { width: 100%; height: 64px; }

/* מסכים נמוכים (375x667): הכול קצת יותר צפוף, כדי שהמכות ייכנסו בלי גלילה */
@media (max-height: 720px) {
  #devtop { height: 52px; } #lcdtop { top: 10px; }
  #bezel { padding: 8px; }
  #win { height: min(calc((100vw - 48px) * 4 / 3), calc(100svh - 318px)); }
  .round { width: 48px; height: 48px; } .dome, #crave { height: 48px; font-size: 18px; } .rb { gap: 4px; }
  #abuses { grid-template-rows: repeat(2, 50px); gap: 10px 10px; }
  #actions { margin-top: 8px; } #tray { margin-top: 8px; }
}
/* מצב: שלושה כרטיסים, התוכן פרוש על כל הגובה */
.card { display: flex; flex-direction: column; justify-content: space-evenly; align-items: stretch; height: min(560px, calc(84dvh - 120px)); min-height: 0; cursor: pointer; }
.card > * { flex: 0 0 auto; }
.card .portrait { margin: 0 auto; }
.cardNav { justify-content: center; margin-top: 8px; }

/* גלגל השיניים להגדרות: בפינה של המכשיר, במקום הבורג, יעד לחיצה 44px */
#btnSet { position: absolute; top: 9px; left: 12px; width: 44px; height: 44px; border: 0; padding: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
#btnSet canvas { width: 22px; height: 22px; image-rendering: pixelated; }
#btnSet:active canvas { transform: translateY(2px); }
@media (max-height: 720px) { #btnSet { top: 4px; } }
#setForm label { display: block; font-weight: 600; font-size: 15px; margin: 9px 0 0; }
#setForm label[hidden] { display: none; }
#setForm small { font-weight: 400; color: var(--ink-soft); }
#setForm small.dayNote { color: var(--accent); font-weight: 600; }
#setForm small.note { display: block; font-size: 14px; }
#setForm input { display: block; width: 100%; box-sizing: border-box; font-size: 16px; padding: 6px 8px; margin-top: 3px; border: 0; background: var(--input-bg); color: var(--text); box-shadow: 0 0 0 2px var(--line); border-radius: 0; }
#setForm .two { display: flex; gap: 8px; }