/* SPARK — design v2: a manga page at night.
   Panels with cut corners and black gutters, vertical Japanese in paper balloons, brush strokes, ink hatching,
   swords that forge. Meaning is carried by brightness and shape, never by colour alone — Ivan reads the
   phone in grayscale. Red and ember are decoration only. */
:root {
  --night: #0b0a09; --iron: #171614; --soot: #26241f; --bone: #ece5d3; --paper: #f4eedf; --ash: #c2bba9;
  --steel: #6e6a62; --blood: #b3121b; --ember: #f2a34b; --ink: #121009;
  --serif: "Cormorant", "Times New Roman", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --label: "Oswald", "Arial Narrow", system-ui, -apple-system, sans-serif;
  --sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Hiragino Sans", "Yu Gothic", sans-serif;
  --mincho: "Hiragino Mincho ProN", "Yu Mincho", serif;
  --jp-heavy: "Hiragino Sans", "Yu Gothic", sans-serif;
  --gap: 12px;
  --ease-cut: cubic-bezier(.7, 0, .2, 1);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box; }
html { background: var(--night); }
body {
  margin: 0 auto; max-width: 520px; min-height: 100vh; color: var(--bone); font-family: var(--sans); font-size: 17px; line-height: 1.4;
  font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  padding: env(safe-area-inset-top) 0 calc(84px + env(safe-area-inset-bottom));
  /* screentone: faint dots across the page, like the grey of a printed manga */
  background: var(--night) radial-gradient(rgba(236, 229, 211, .045) 1px, transparent 1.2px) 0 0 / 5px 5px;
}
button, input, textarea { font-family: inherit; font-size: 17px; color: inherit; }
button { cursor: pointer; }
.num { font-variant-numeric: lining-nums tabular-nums; }
[hidden] { display: none !important; }
.lbl { font-family: var(--label); font-weight: 600; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; }

/* ---------- header: brand, title, brush stroke, the weekday in vertical Japanese ---------- */
.head { position: relative; padding: 18px 18px 8px; overflow: hidden; }
.head::before { /* ink hatching, fading in from the right edge */
  content: ""; position: absolute; inset: 0 0 0 38%; pointer-events: none;
  background: repeating-linear-gradient(-58deg, rgba(236, 229, 211, .16) 0 1px, transparent 1px 6px),
              repeating-linear-gradient(32deg, rgba(236, 229, 211, .08) 0 1px, transparent 1px 10px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 75%); mask-image: linear-gradient(90deg, transparent, #000 75%);
}
.brand { position: relative; font-family: var(--label); font-weight: 600; font-size: 13px; letter-spacing: .5em; display: flex; align-items: center; gap: 10px; }
.brand::before { content: ""; width: 18px; height: 4px; background: var(--blood); transform: skewX(-35deg); }
.head h1 { position: relative; font-family: var(--serif); font-weight: 700; font-size: 56px; line-height: .92; margin: 12px 0 0; text-transform: uppercase; letter-spacing: .01em; max-width: calc(100% - 40px); }
.head .sub { position: relative; font-family: var(--label); font-weight: 500; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; margin-top: 10px; }
.head .jp-day { position: absolute; right: 14px; top: 16px; writing-mode: vertical-rl; font-family: var(--mincho); font-size: 19px; letter-spacing: .2em;
                background: var(--night); padding: 8px 3px; border: 1px solid var(--bone); }
.stroke { display: block; position: relative; width: 82%; height: 16px; margin: 10px 0 0 -4px; overflow: visible; }
.stroke .ink { fill: var(--bone); }
.stroke .tip { fill: var(--blood); }

/* ---------- page body: panels with black gutters ---------- */
.body { padding: 10px 14px 18px; display: flex; flex-direction: column; gap: var(--gap); }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }

/* A panel is two clipped layers: the bone frame and the iron fill, so corners can be cut like manga panels. */
.panel { --shape: polygon(0 0, 100% 0, 100% 100%, 0 100%); position: relative; isolation: isolate; padding: 16px 16px 14px; color: var(--bone); }
.panel::before, .panel::after { content: ""; position: absolute; z-index: -1; clip-path: var(--shape); }
.panel::before { inset: 0; background: var(--bone); }
.panel::after { inset: 3px; background: var(--iron); }
.cut-tr { --shape: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); }
.cut-bl { --shape: polygon(0 0, 100% 0, 100% 100%, 28px 100%, 0 calc(100% - 28px)); }
.cut-tl { --shape: polygon(28px 0, 100% 0, 100% 100%, 0 100%, 0 28px); }
.cut-br { --shape: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%); }
.slant { --shape: polygon(0 0, 100% 0, 100% calc(100% - 16px), 0 100%); padding-bottom: 26px; }
.panel.alarm { color: var(--ink); }
.panel.alarm::after { background: var(--bone); }
.panel h2 { font-family: var(--label); font-weight: 600; font-size: 15px; letter-spacing: .2em; text-transform: uppercase; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.panel h2::before { content: ""; width: 10px; height: 10px; background: currentColor; transform: rotate(45deg); flex: none; }
.row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; }
.row + .row { border-top: 1px solid var(--steel); }
.panel.alarm .row + .row { border-top-color: var(--ink); }
.note { font-size: 15px; color: var(--ash); margin-top: 6px; }
.panel.alarm .note { color: var(--ink); }

/* stat panels: one big number each, like a splash panel */
.stat { display: block; text-decoration: none; min-height: 132px; }
.stat .big { display: block; font-family: var(--serif); font-weight: 700; font-size: 64px; line-height: .9; margin-top: 4px; font-variant-numeric: lining-nums tabular-nums; }
.stat .small { display: block; font-family: var(--label); font-weight: 500; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; margin-top: 8px; }

/* ---------- buttons: forged, with slanted ends ---------- */
.btn { --shape: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); position: relative; isolation: isolate; display: block; width: 100%;
       text-align: center; padding: 15px 16px; border: 0; background: none; color: var(--bone); text-decoration: none;
       font-family: var(--label); font-weight: 600; font-size: 17px; letter-spacing: .18em; text-transform: uppercase; overflow: hidden; }
.btn::before, .btn::after { content: ""; position: absolute; z-index: -1; clip-path: var(--shape); }
.btn::before { inset: 0; background: var(--bone); }
.btn::after { inset: 2px 3px; background: var(--night); }
.btn.solid { color: var(--ink); }
.btn.solid::after { background: var(--bone); }
.btn:disabled { opacity: .55; }
.panel.alarm .btn::before { background: var(--ink); }
.panel.alarm .btn::after { background: var(--bone); }
.panel.alarm .btn { color: var(--ink); }
.panel.alarm .btn.solid { color: var(--bone); }
.panel.alarm .btn.solid::after { background: var(--ink); }
.btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.btn:active, .tile:active, .scale button:active, .chip:active { transform: translateY(2px); }

.chip { display: inline-block; border: 2px solid currentColor; padding: 1px 9px; font-family: var(--label); font-weight: 600; font-size: 13px;
        letter-spacing: .12em; text-transform: uppercase; line-height: 1.5; white-space: nowrap; background: transparent; color: inherit; text-decoration: none; }
.chip.solid { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.panel.alarm .chip.solid { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.choices .chip { font-size: 15px; padding: 6px 12px; }

/* ---------- pain scale: ink density shows intensity (0 = clean paper, 10 = dense cross-hatching) ---------- */
.pain-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 10px; }
.pain-head h2 { margin: 0; }
.pain-head .readout { font-family: var(--serif); font-weight: 700; font-size: 72px; line-height: .8; min-width: 1.2em; text-align: right; }
.scale { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.scale button { --sp: 0px; position: relative; height: 56px; padding: 0 0 10px; border: 2px solid var(--bone); background: var(--night); color: var(--bone);
                font-family: var(--serif); font-weight: 700; font-size: 26px; line-height: 1; overflow: hidden; }
.scale button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px;
  background: repeating-linear-gradient(135deg, currentColor 0 1.5px, transparent 1.5px var(--sp)),
              repeating-linear-gradient(45deg, currentColor 0 1px, transparent 1px calc(var(--sp) * 1.6)); opacity: var(--op, 1); }
.scale button.on { background: var(--bone); color: var(--ink); }

/* ---------- swords: streaks forged from the hilt ---------- */
.sword + .sword { margin-top: 14px; }
.sword-head { display: flex; justify-content: space-between; align-items: baseline; }
.sword-head b { font-family: var(--serif); font-weight: 700; font-size: 30px; line-height: 1; }
.sword-head b small { font-size: 18px; }
.sword-art { position: relative; height: 32px; margin-top: 4px; }
.sword-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sword-art .fill { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--w)) 0 0); overflow: hidden; }
.s-out .body-shape { fill: var(--night); stroke: var(--bone); stroke-width: 2; stroke-linejoin: round; }
.s-out .fuller { stroke: var(--steel); stroke-width: 2; }
.s-in .body-shape { fill: var(--bone); }
.s-in .fuller, .s-in .wrap { stroke: var(--ink); stroke-width: 2; }
.s-out .wrap { stroke: var(--bone); stroke-width: 1.5; }

/* ---------- timeline (today's plan) ---------- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 70px; top: 10px; bottom: 10px; width: 2px; background: var(--steel); }
.timeline li { display: grid; grid-template-columns: 62px 18px 1fr; gap: 6px; align-items: center; padding: 5px 0; }
.timeline .t { font-family: var(--serif); font-weight: 700; font-size: 24px; line-height: 1; }
.timeline .m { width: 12px; height: 12px; border: 2px solid var(--bone); background: var(--iron); transform: rotate(45deg); justify-self: center; position: relative; z-index: 1; }
.timeline li.past .m { background: var(--bone); }
.timeline li.next .t, .timeline li.next .w { font-weight: 700; }
.timeline li.next .m { background: var(--ember); border-color: var(--bone); box-shadow: 0 0 10px rgba(242, 140, 40, .6); }
.timeline .chip { margin-left: 6px; }

/* ---------- quotes: vertical Japanese in a paper balloon + a narration box ---------- */
/* The balloon sits right, its height set from the quote's length so columns wrap predictably;
   the narration box overlaps its lower-left corner, like a caption laid over a panel. */
.say { display: flex; flex-direction: column; align-items: flex-end; margin: 4px 0 0; }
.bubble { position: relative; height: var(--h, 300px); max-width: 100%; background: var(--paper); color: var(--ink); border-radius: 46% / 32%;
          padding: 40px 30px; writing-mode: vertical-rl; font-family: var(--mincho); font-size: 19px; line-height: 1.6; letter-spacing: .06em;
          box-shadow: 0 0 0 3px var(--night), 0 0 0 5px var(--paper); margin-right: 6px; }
.bubble::after { content: ""; position: absolute; left: -18px; bottom: 16%; width: 32px; height: 26px; background: var(--paper);
                 clip-path: polygon(100% 0, 0 100%, 100% 58%); }
.caption { align-self: stretch; position: relative; isolation: isolate; padding: 14px 16px 12px; color: var(--ink); margin: -22px 56px 0 0; }
.caption::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bone); clip-path: polygon(0 0, 100% 0, 100% 100%, 14px 100%, 0 calc(100% - 14px));
                   box-shadow: none; }
.caption::after { content: ""; position: absolute; inset: -3px; z-index: -2; background: var(--night); clip-path: polygon(0 0, 100% 0, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
.caption .ru { display: block; font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 21px; line-height: 1.22; }
.caption .src { display: block; margin-top: 10px; font-family: var(--label); font-weight: 500; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.caption .src b { font-weight: 600; }
.say .ch { animation: ink-in .4s ease-out var(--d) both; }
.say .caption { animation: fade-up .6s var(--ease-out) var(--after, .4s) both; }
.quote-group + .quote-group { margin-top: 10px; }
.quote-group .say + .say { margin-top: 22px; }
.quote-note { font-size: 15px; color: var(--ash); margin: 6px 0 0; }

/* ---------- forms ---------- */
input[type=text], input[type=password], input[type=time], input[type=number], textarea {
  width: 100%; background: var(--night); color: var(--bone); border: 2px solid var(--bone); padding: 11px 12px; border-radius: 0; }
textarea { min-height: 76px; resize: vertical; }
input:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 3px solid var(--ember); outline-offset: 2px; }
label.field { display: block; margin-top: 10px; font-family: var(--label); font-weight: 500; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }
label.field input { margin-top: 6px; font-family: var(--sans); letter-spacing: 0; text-transform: none; }
.est-head, .est-item { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.est-head { margin-top: 10px; font-family: var(--label); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.est-item { margin-top: 8px; }
.est-item input { padding: 7px 8px; font-size: 16px; text-align: right; }
.est-item .name { grid-column: 1 / -1; text-align: left; }

/* dish tiles */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tile { --shape: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); position: relative; isolation: isolate; text-align: left;
        padding: 10px 12px 9px; border: 0; background: none; color: var(--bone); }
.tile::before, .tile::after { content: ""; position: absolute; z-index: -1; clip-path: var(--shape); }
.tile::before { inset: 0; background: var(--bone); }
.tile::after { inset: 2px; background: var(--night); }
.tile b { display: block; font-family: var(--serif); font-size: 30px; line-height: 1; }
.tile span { display: block; font-family: var(--label); font-weight: 500; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; margin-top: 4px; }
.meal { display: grid; grid-template-columns: 48px 1fr auto auto; gap: 10px; align-items: baseline; padding: 9px 0; }
.meal + .meal { border-top: 1px solid var(--steel); }
.meal .t { font-family: var(--label); font-size: 14px; letter-spacing: .06em; }
.meal .k { font-family: var(--serif); font-weight: 700; font-size: 24px; line-height: 1; }
.del { background: var(--night); border: 2px solid var(--bone); color: var(--bone); width: 34px; height: 32px; font-weight: 800; line-height: 1; align-self: center; }
.total { display: flex; justify-content: space-between; align-items: baseline; border-top: 2px solid var(--bone); margin-top: 6px; padding-top: 10px; }
.total b { font-family: var(--serif); font-size: 34px; line-height: 1; }

/* stock items */
.stock-item { padding: 12px 0; }
.stock-item + .stock-item { border-top: 1px solid var(--steel); }
.stock-item button { all: unset; display: block; width: 100%; cursor: pointer; }
.si-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.si-top .name { font-weight: 700; }
.si-bar { height: 12px; margin: 9px 0 7px; border: 2px solid var(--bone); background: var(--night); }
.si-bar i { display: block; height: 100%; width: var(--f); background: var(--bone); animation: forge .9s var(--ease-out) .3s both; }
.si-bar.unknown { background: repeating-linear-gradient(135deg, var(--bone) 0 2px, var(--night) 2px 7px); }
.si-bottom { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--label); font-size: 14px; letter-spacing: .06em; }
.si-bottom b { font-family: var(--serif); font-size: 26px; letter-spacing: 0; }
.stock-item.hot .name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ---------- tab bar with ink icons ---------- */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; max-width: 520px; margin: 0 auto; background: var(--night);
          border-top: 3px solid var(--bone); display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
          padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); view-transition-name: tabbar; }
.tabbar a { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0 5px;
            color: var(--bone); text-decoration: none; font-family: var(--label); font-weight: 600; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; transition: color .25s; }
.tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }
.tabbar a.on { color: var(--ink); }
.tab-ink { position: absolute; z-index: 0; top: 8px; left: 8px; height: 52px; width: calc((100% - 32px) / 5); background: var(--bone);
           clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
           transform: translateX(calc(var(--k, 0) * (100% + 4px))); transition: transform .36s var(--ease-cut); }

/* ---------- toast, loading, login ---------- */
.toast { position: fixed; left: 14px; right: 14px; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 6; max-width: 492px; margin: 0 auto;
         background: var(--bone); color: var(--ink); padding: 12px 16px; font-weight: 700; pointer-events: none; view-transition-name: toast;
         clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); }
.toast.err { background: var(--ink); color: var(--bone); outline: 2px dashed var(--bone); outline-offset: -4px; }
.loading { min-height: 70vh; display: grid; place-items: center; }
.loading .kanji { font-family: var(--mincho); font-size: 140px; line-height: 1; animation: ember-glow 1.4s ease-in-out infinite; }
.login { position: relative; z-index: 1; min-height: 100vh; padding: 48px 24px; max-width: 440px; margin: 0 auto; }
.login .kanji { position: absolute; right: 4px; top: 24px; writing-mode: vertical-rl; font-family: var(--mincho); font-size: 150px; line-height: 1; color: var(--bone); opacity: .1; pointer-events: none; user-select: none; }
.login h1 { position: relative; font-family: var(--serif); font-weight: 700; font-size: 68px; line-height: .9; letter-spacing: .04em; margin: 14px 0 6px; }
.login .tag { position: relative; font-family: var(--label); letter-spacing: .14em; text-transform: uppercase; font-size: 14px; margin-bottom: 36px; }
.login form { position: relative; display: flex; flex-direction: column; gap: 14px; }

/* ============================== motion ============================== */
@keyframes panel-in { from { opacity: 0; transform: translateY(18px); clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
                      60% { opacity: 1; } to { opacity: 1; transform: none; clip-path: polygon(0 0, 140% 0, 100% 100%, 0 100%); } }
.body > * { animation: panel-in .5s var(--ease-cut) both; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }
.duo > * { animation: panel-in .5s var(--ease-cut) both; animation-delay: calc(var(--j, 0) * 90ms + 140ms); }
.body > .duo { animation: none; }
@keyframes nudge { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
.body > .panel.alarm { animation-name: panel-in, nudge; animation-duration: .5s, .45s;
  animation-delay: calc(var(--i, 0) * 70ms + 120ms), calc(var(--i, 0) * 70ms + 800ms);
  animation-timing-function: var(--ease-cut), ease-in-out; animation-fill-mode: both, none; }

/* title: a slanted sword-cut wipe; the brush stroke paints left to right */
@keyframes title-cut { from { clip-path: polygon(0 0, 0 0, -14% 100%, -14% 100%); transform: translateX(-10px); }
                       to { clip-path: polygon(0 0, 116% 0, 102% 100%, 0 100%); transform: none; } }
@keyframes paint { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -4% 0 0); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes slash { from { transform: skewX(-35deg) scaleX(0); } to { transform: skewX(-35deg) scaleX(1); } }
.head h1 { animation: title-cut .55s var(--ease-cut) both; }
.head .sub { animation: fade-up .45s .3s ease-out both; }
.stroke { animation: paint .7s .15s var(--ease-cut) both; }
.brand::before { transform-origin: left; animation: slash .35s .4s var(--ease-cut) both; }
.head .jp-day { animation: fade-up .6s .45s ease-out both; }

/* lettering: each character inked in, the narration box follows */
@keyframes ink-in { from { opacity: 0; text-shadow: 0 0 8px rgba(18, 16, 9, .9); } to { opacity: 1; text-shadow: none; } }
@keyframes balloon { from { transform: scale(.6) rotate(-6deg); opacity: 0; } 70% { transform: scale(1.04) rotate(1deg); opacity: 1; } to { transform: none; opacity: 1; } }
.bubble { animation: balloon .45s var(--ease-out) .35s both; }

/* swords forge from the hilt, then a glint runs along the edge */
@keyframes forge { from { width: 0; clip-path: inset(0 100% 0 0); } }
@keyframes forge-clip { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 calc(100% - var(--w)) 0 0); } }
@keyframes glint { from { transform: translateX(-60%) skewX(-20deg); } to { transform: translateX(260%) skewX(-20deg); } }
.sword-art .fill { animation: forge-clip 1.1s var(--ease-out) .45s both; }
.sword-art .glint { position: absolute; top: 0; bottom: 0; left: 0; width: 30%; pointer-events: none;
                    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .95), transparent); animation: glint 1s 1.4s ease-out both; }

/* stamps, impact, sparks, SFX */
@keyframes stamp { 0% { transform: scale(1.25) rotate(-5deg); } 55% { transform: scale(.9) rotate(1deg); } 100% { transform: none; } }
.scale button.on, .choices .chip.solid, .readout.stamp { animation: stamp .32s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes impact { 0% { filter: none; transform: none; } 6% { filter: invert(1); transform: translate(-4px, 1px) skewX(-2deg); }
                    22% { filter: invert(1); transform: translate(4px, -1px); } 30% { filter: none; transform: translate(-2px, 0); }
                    42% { transform: translate(1px, 0); } 55%, 100% { filter: none; transform: none; } }
.impact { animation: impact .5s steps(1, end) both !important; }
.spark { position: fixed; z-index: 20; width: 6px; height: 6px; margin: -3px 0 0 -3px; pointer-events: none; background: var(--bone); box-shadow: 0 0 10px 3px rgba(236, 229, 211, .6); }
.spark.ember { background: var(--ember); box-shadow: 0 0 12px 3px rgba(242, 140, 40, .7); }
.spark.streak { width: 16px; height: 3px; margin: -1px 0 0 -8px; }
.sfx { position: fixed; z-index: 21; pointer-events: none; font-family: var(--jp-heavy); font-weight: 900; font-size: 58px; line-height: 1; letter-spacing: -.04em;
       color: var(--paper); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--ink); white-space: nowrap; }
@keyframes sfx { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--r)) scale(2.4); } 14% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r)) scale(.92); }
                 24% { transform: translate(-50%, -50%) rotate(var(--r)) scale(1.06); } 34% { transform: translate(-50%, -50%) rotate(var(--r)) scale(1); }
                 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -70%) rotate(var(--r)) scale(1); } }

/* delete: a slash crosses the row, then it falls away */
.cut-row { position: relative; }
.cut-row::after { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 3px; background: var(--blood); box-shadow: 0 0 6px var(--bone);
                  transform-origin: left; animation: cut .2s ease-out both; }
@keyframes cut { from { transform: rotate(-4deg) scaleX(0); } to { transform: rotate(-4deg) scaleX(1); } }
.gone { animation: fall .32s .2s ease-in both; }
@keyframes fall { to { opacity: 0; transform: translate(26px, 8px) rotate(3deg); } }

/* waiting for Claude: a hatched strip runs under the button */
.btn.busy::after { background-image: repeating-linear-gradient(135deg, currentColor 0 3px, transparent 3px 9px); background-size: 24px 6px;
                   background-repeat: repeat-x; background-position: 0 100%; animation: hatch-run .45s linear infinite; }
.btn.solid.busy::after { background-color: var(--bone); }
@keyframes hatch-run { to { background-position: 24px 100%; } }
.btn.busy::after { animation: hatch-run .45s linear infinite; }

/* toast: cuts in on a slant, leaves downward */
@keyframes toast-in { from { clip-path: polygon(0 0, 0 0, -14% 100%, -14% 100%); } to { clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(12px); } }
.toast { animation: toast-in .32s var(--ease-cut) both; }
.toast.out { animation: toast-out .25s ease-in both; }

/* page turn: a diagonal sword-cut wipe, a bright blade-line rides the edge */
@keyframes wipe-in { from { clip-path: polygon(100% 0, 118% 0, 100% 100%, 82% 100%); } to { clip-path: polygon(-18% 0, 118% 0, 100% 100%, -36% 100%); } }
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: wipe-in .44s var(--ease-cut) both; }
/* The blade-line rests just off-screen left; the page-turn animation sweeps its snapshot in from the right. */
.cutline { position: fixed; z-index: 30; top: -15vh; height: 130vh; width: 4px; left: -60px; pointer-events: none; transform: rotate(10deg);
           view-transition-name: cutline; background: linear-gradient(var(--paper), var(--bone) 60%, var(--blood));
           box-shadow: 0 0 14px 2px rgba(244, 238, 223, .8); }
::view-transition-new(cutline) { animation: sweep .44s var(--ease-cut) both; }
::view-transition-old(cutline) { display: none; }
@keyframes sweep { from { transform: translateX(calc(100vw + 140px)); } to { transform: none; } }
.vt .body > *, .vt .duo > * { animation-duration: .35s; animation-delay: calc(var(--i, var(--j, 0)) * 40ms + 200ms); }

/* refresh after saving: the screen stays still; only toasts, sparks and SFX move */
.quiet .body > *, .quiet .duo > *, .quiet .body > .panel.alarm, .quiet .head h1, .quiet .head .sub, .quiet .stroke, .quiet .brand::before,
.quiet .head .jp-day, .quiet .sword-art .fill, .quiet .sword-art .glint, .quiet .bubble, .quiet .say .caption, .quiet .si-bar i { animation: none; }

@keyframes ember-glow { 0%, 100% { opacity: .35; text-shadow: none; } 50% { opacity: 1; text-shadow: 0 0 24px rgba(242, 140, 40, .5); } }
@keyframes shake { 0%, 100% { transform: none; } 20% { transform: translateX(-9px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
.shake { animation: shake .4s ease-in-out; }
.embers { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.embers i { position: absolute; bottom: -10px; width: 3px; height: 3px; background: var(--ember); box-shadow: 0 0 8px 2px rgba(242, 140, 40, .45);
            animation: ember-rise var(--t) linear var(--d) infinite; opacity: 0; }
@keyframes ember-rise { 0% { opacity: 0; transform: translate(0, 0); } 10% { opacity: .9; } 60% { opacity: .5; } 100% { opacity: 0; transform: translate(var(--x), -105vh); } }

/* Reduce Motion on the phone turns all of this off */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .embers, .cutline { display: none; }
  ::view-transition-new(root) { animation: none; }
}