*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
:root{--ink:#160B33;--red:#FF3A2E;--pink:#FF7EC4;--bg:#CBBF97;--lcd:#DCD5BC;--shell:#2A1E4A}
html,body{background:var(--bg);transition:background 1.2s}
body{font-family:Heebo,system-ui,sans-serif;color:var(--ink);min-height:100dvh;-webkit-tap-highlight-color:transparent;
  background-image:radial-gradient(rgba(22,11,51,.07) 1px,transparent 1.2px);background-size:6px 6px}
#app{max-width:440px;margin:0 auto;padding:calc(env(safe-area-inset-top) + 14px) 14px calc(env(safe-area-inset-bottom) + 18px)}
.num{font-family:VT323,monospace}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* the device: a dark shell around the LCD, like the body of the toy */
.device{position:relative;background:var(--shell);border-radius:34px 34px 46px 46px;padding:16px 14px 18px;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.12),inset 0 -6px 0 rgba(0,0,0,.35),0 18px 34px -16px rgba(22,11,51,.7)}
.screw{position:absolute;width:7px;height:7px;border-radius:50%;background:#140C2C;box-shadow:inset 1px 1px 0 rgba(255,255,255,.18)}
.s1{top:10px;right:12px}.s2{top:10px;left:12px}.s3{bottom:12px;right:16px}.s4{bottom:12px;left:16px}

.lcd{background:var(--lcd);border-radius:12px;padding:6px 8px 6px;box-shadow:inset 0 0 0 3px rgba(22,11,51,.85),inset 0 6px 14px rgba(0,0,0,.18);transition:background 1.2s}
.icons{display:flex;justify-content:space-between;align-items:center;height:34px;padding:0 4px}
.icons button,.icons i{width:30px;height:30px;display:block;opacity:.28;transition:opacity .2s}
.icons button.on,.icons i.on{opacity:1}
.icons canvas{width:100%;height:100%;image-rendering:pixelated;display:block}
.icons i.blink{animation:blink .8s steps(1) infinite;opacity:1}
@keyframes blink{50%{opacity:.15}}
.ticker{flex:1;text-align:center;font-weight:800;font-size:14px;line-height:1.2;padding:0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.strip{display:flex;justify-content:space-between;align-items:flex-end;padding:0 4px 4px}
.strip .day{display:flex;direction:rtl;unicode-bidi:isolate;align-items:baseline;gap:6px}
.strip .day b{font-weight:900;font-size:15px}
.strip .day .num{font-size:44px;line-height:.7}
.strip .day small{font-size:22px;opacity:.45}
.strip .clock{direction:ltr;font-size:28px;line-height:.7;opacity:.75}

.stage{position:relative;border:3px solid var(--ink);border-radius:4px;overflow:hidden;background:#000}
#scene{width:100%;aspect-ratio:88/108;image-rendering:pixelated;display:block}
#scene.shake{animation:shake .12s steps(2) infinite}
@keyframes shake{0%{transform:translate(-2px,0)}50%{transform:translate(2px,1px)}100%{transform:translate(0,-1px)}}
.glare{position:absolute;inset:0;pointer-events:none;background:linear-gradient(125deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.05) 28%,transparent 29%,transparent 100%)}
.bubble{position:absolute;top:43%;left:6%;max-width:60%;background:#fff;border:3px solid var(--ink);padding:5px 9px;font-weight:900;font-size:14px;line-height:1.25;box-shadow:3px 3px 0 var(--ink)}
.bubble::after{content:"";position:absolute;bottom:-10px;left:22px;width:11px;height:11px;background:#fff;border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:rotate(45deg)}
.timer{position:absolute;top:8px;left:8px;right:8px;background:var(--ink);color:#fff;padding:6px 10px;display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:13px}
.timer .num{font-size:30px;line-height:1;color:var(--pink)}

/* stats pages, drawn like the toy's status screens */
.page{position:absolute;inset:0;background:var(--lcd);display:flex;flex-direction:column;justify-content:center;gap:18px;padding:20px 22px;cursor:pointer;
  background-image:linear-gradient(rgba(22,11,51,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(22,11,51,.06) 1px,transparent 1px);background-size:4px 4px}
.page .row{display:flex;justify-content:space-between;align-items:center;border-bottom:3px dotted rgba(22,11,51,.35);padding-bottom:10px}
.page .row b{font-weight:900;font-size:20px}
.page .row .num{font-size:44px;line-height:.8}
.page .hearts{display:flex;gap:4px;direction:ltr}
.page .hearts canvas{width:30px;height:26px;image-rendering:pixelated}
.page .dots{display:flex;gap:6px;justify-content:center;margin-top:4px}
.page .dots i{width:8px;height:8px;background:rgba(22,11,51,.25)}
.page .dots i.on{background:var(--ink)}
.page .hint{text-align:center;font-size:12px;font-weight:500;opacity:.6}

/* three buttons, like the toy */
.buttons{display:flex;justify-content:center;align-items:flex-start;gap:26px;margin-top:16px}
.buttons > div{display:flex;flex-direction:column;align-items:center;gap:6px}
.buttons span{font-size:12px;font-weight:800;color:#C7B4FF;letter-spacing:.02em}
.round{border-radius:50%;display:block}
.round.small{width:34px;height:34px;margin-top:12px;background:#C7B4FF;box-shadow:inset 0 -4px 0 rgba(22,11,51,.35),0 3px 0 #0A0518}
.round.big{width:74px;height:74px;background:var(--red);box-shadow:inset 0 -7px 0 rgba(22,11,51,.3),inset 0 4px 0 rgba(255,255,255,.25),0 5px 0 #0A0518}
.round:active{transform:translateY(3px);box-shadow:inset 0 -2px 0 rgba(22,11,51,.35)}
.round.big.armed{background:#FFB13D}
.main span{color:#fff;font-size:14px}
.round[disabled]{opacity:.45}

.body{margin-top:14px;background:var(--lcd);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:10px 12px;transition:background 1.2s}
.body small{display:block;font-size:11px;font-weight:900;letter-spacing:.06em;color:#B0243A}
.body p{font-size:14px;line-height:1.4;font-weight:500;margin-top:2px}
.body a{font-size:11px;color:var(--ink);opacity:.6;text-decoration:none;display:inline-block;margin-top:4px}
.body.flash{animation:flash 1s steps(2) 2}
@keyframes flash{50%{background:#fff}}

dialog{border:4px solid var(--ink);padding:20px;max-width:340px;width:calc(100% - 32px);margin:auto;background:var(--lcd);color:var(--ink);box-shadow:8px 8px 0 var(--ink)}
dialog::backdrop{background:rgba(22,11,51,.6)}
dialog h2{font-size:22px;font-weight:900}
dialog p{font-size:14px;margin:6px 0 14px}
dialog input{width:100%;font:500 18px Heebo,sans-serif;padding:10px;border:3px solid var(--ink);background:#fff}
dialog .row{display:flex;gap:10px;margin-top:16px}
dialog .row button{flex:1;background:var(--ink);color:#fff;font:800 17px Heebo,sans-serif;padding:12px}
dialog .row .ghost{background:transparent;color:var(--ink);border:3px solid var(--ink)}
#logList{max-height:50vh;overflow:auto;padding-right:20px;font-size:15px;line-height:1.7;margin-top:10px}
#logList:empty::before{content:"עוד אין. כל חשק שתעבור יופיע כאן.";font-size:14px}