/* masugami — ink marks (HOW_TO_PLAY_WORK_ORDER §5)
   ============================================================
   Every copy the game speaks says *ink*: "clear the ink", "how ink behaves", "ink onto ink
   disappears". So every material draws ink, and every material draws it as a mark — never as
   a raised white tile. Relief drawing survives in masugami-theme.css and web/index.html for
   exactly one thing: Smooth's bump/dent cells.

     washi   soft brush dab       a rounded square, bristle-feathered and soaked at the rim,
                                  sitting in the faint square the brush pressed; ±1.7° jitter
     ai      pooled ink           a round wet pool: fringed edge, sheen at 38%/34%, deep soak
     kasure  dry brush impression an opaque core with split-bristle tails, and no halo at all

   The silhouettes are SVG masks minted per cell by masugami-paper.js, which puts all three on
   the cell as --ink-mask-{washi,ai,kasure} (and --ink-outline-… for the hollow previews). The
   material is chosen *here*, by [data-material="…"] **on the cell itself** — an attribute
   decorateInkCell resolves from the nearest [data-theme] ancestor. Keying the cell rather than
   the document is what lets a washi how-to strip sit inside a kasure page (HOW_TO_PLAY §5,
   decision 1) while every other cell still follows the player's own theme; switching theme
   rewrites that one attribute, so it stays a repaint with no re-render and no new mask.

   Colour comes from the palette (--ms-tile-1/2/3, --ms-ink-soak, --ms-cell-line), never from
   a literal in this file, so the two-file token rule still holds: masugami-theme.css and
   XOPalette are the only places a colour is decided.

   This file is a component stylesheet: it is linked next to masugami-theme.css from
   web/index.html and site/static/index.html, and scripts/build-prototype.mjs inlines both so
   masugami.html stays a self-contained document that runs from file://.
   ============================================================ */

/* ---------- the mark slot ----------
   The cell is a hit/layout slot. The mark inside it is a *dab*, not a tile: no background, no
   border, no relief on any cell that carries ink. The slot is 72% of the cell and the washi
   silhouette fills ~69% of the slot, so the dab lands at ~50% of the cell — the proportion the
   reference render shows, and noticeably smaller than the 70% the old blot took. ai and kasure
   override the inset below; this base is washi's, because washi is the default and an unknown
   stored theme has to land on a material that draws ink. */
.ink-print{display:none;position:absolute;inset:14%;pointer-events:none}
.ink-mark{
  display:block;position:relative;width:100%;height:100%;
  mask-image:var(--ink-mask-washi);mask-size:100% 100%;mask-repeat:no-repeat;
  background:radial-gradient(circle at 46% 56%,
    var(--ms-tile-1) 0%,var(--ms-tile-2) 70%,var(--ms-tile-3) 100%);
}
/* An inked cell draws nothing of its own — no tile, no relief, no border. The rules that
   used to paint one live only on .bump/.dent now, so there is nothing here to undo. */
.sq.b{position:relative}
:is(.on,.bleed) > .ink-print{
  display:block;transform:translate(var(--ink-x),var(--ink-y)) rotate(var(--ink-rotation));
  filter:blur(.5px) drop-shadow(0 0 5px var(--ms-ink-soak));
}

/* ---------- washi and ai · crisp fibres over a narrow soak ---------- */
:is(.cell,.fc,.sq)[data-material="washi"] .ink-mark{mask-image:var(--ink-mask-washi)}
:is(.cell,.fc,.sq)[data-material="washi"]:is(.on,.bleed) > .ink-print{
  filter:drop-shadow(0 0 .5px var(--ms-ink-soak));
}
:is(.cell,.fc,.sq)[data-material="ai"] > .ink-print{inset:14%}
:is(.cell,.fc,.sq)[data-material="ai"] .ink-mark{mask-image:var(--ink-mask-ai)}
:is(.cell,.fc,.sq)[data-material="ai"]:is(.on,.bleed) > .ink-print{
  filter:drop-shadow(0 0 .7px var(--ms-ink-soak));
}

/* ---------- kasure · dry brush ----------
   The paper is smooth cream ruled with a fine pencil grid, three by three inside each cell —
   the grid in the reference render. Hairline cell lines come from the same ruling. */
.cell[data-material="kasure"]:not(.bump):not(.dent){
  background-image:
    linear-gradient(var(--ms-cell-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--ms-cell-line) 1px,transparent 1px);
  background-size:calc(100% / 3) calc(100% / 3);
  background-position:-1px -1px;
}
/* Fine, irregular hairs carry the dry edge; no evenly spaced stripe overlay. */
:is(.cell,.fc,.sq)[data-material="kasure"] > .ink-print{inset:14%}
:is(.cell,.fc,.sq)[data-material="kasure"] .ink-mark{
  mask-image:var(--ink-mask-kasure),linear-gradient(90deg,#000,#000);
  mask-size:100% 100%;mask-repeat:no-repeat;mask-composite:intersect;
}
/* no halo: a dry stroke soaks nothing (--ms-ink-soak is fully transparent for kasure) */
:is(.cell,.fc,.sq)[data-material="kasure"]:is(.on,.bleed) > .ink-print{filter:none}

/* ---------- bleed-through ----------
   Seen from the back of the sheet, ink is a soft flat shadow of itself, in every material. */
.bleed > .ink-print{opacity:.28;filter:blur(1.2px)}
.bleed .ink-mark{background:var(--ms-tile-2)}
:is(.cell,.fc,.sq)[data-material="ai"].bleed > .ink-print{opacity:.28;filter:blur(1.2px)}
:is(.cell,.fc,.sq)[data-material="ai"].bleed .ink-mark::before{display:none}
:is(.cell,.fc,.sq)[data-material="kasure"].bleed > .ink-print{opacity:.26;filter:blur(1px)}
:is(.cell,.fc,.sq)[data-material="kasure"].bleed .ink-mark{background-image:none;background:var(--ms-tile-2)}

/* ---------- fold preview ghosts ----------
   These marks describe the sheet that would remain after release. Like the iOS renderer they
   stay on the stationary half while the real ink rides the flap, and each material keeps its
   own outcome grammar (§5): washi fades and blurs the cancelling pair and outlines the
   arrival; ai keeps its gold pulse and a 38% ghost; kasure loses its bristles first and only
   then its core, and its arrival is a faint dry ghost of the stroke. */
.cell.will-poof::after,.cell.will-ink::after,.cell.will-worse::after,
.cell.will-ink::before{
  content:"";position:absolute;pointer-events:none;z-index:2;
  opacity:var(--preview-strength,1);
}
/* A worsening fold is neutral on purpose: the one accent is spent on the armed crease and
   the cancelling pair, and nowhere else. */
@keyframes mark-worse-preview{
  from{box-shadow:inset 0 0 0 1px var(--ms-crease-dark),inset 0 0 0 3px var(--ms-cell-line)}
  to{box-shadow:inset 0 0 0 2px var(--ms-crease-dark),inset 0 0 0 5px var(--ms-cell-line)}
}
.cell[data-material="washi"].will-worse::after,
.cell[data-material="kasure"].will-worse::after{
  inset:0;background:transparent;
  box-shadow:inset 0 0 0 1px var(--ms-crease-dark),inset 0 0 0 3px var(--ms-cell-line);
  animation:mark-worse-preview .55s ease-in-out infinite alternate;
}

/* washi: cancelling ink leaves the sheet; arriving ink is still hollow. */
.cell[data-material="washi"].will-poof{
  opacity:var(--preview-washi-opacity,1);filter:blur(var(--preview-washi-blur,0));
}
.cell[data-material="washi"].will-ink::before{
  inset:14%;border:0;background:var(--ms-tile-2);
  mask-image:var(--ink-outline-washi);mask-size:100% 100%;mask-repeat:no-repeat;
  transform:translate(var(--ink-x),var(--ink-y)) rotate(var(--ink-rotation));
}
.cell[data-material="washi"].will-ink::after{
  inset:14%;background:var(--ms-tile-2);opacity:var(--preview-washi-wash-opacity,.1);
  mask-image:var(--ink-mask-washi);mask-size:100% 100%;mask-repeat:no-repeat;
  transform:translate(var(--ink-x),var(--ink-y)) rotate(var(--ink-rotation));
}

/* ai: the original XORIGAMI gold/warn halos, and the pool arrives as a 38% ghost. */
.cell[data-material="ai"].will-poof::after,
.cell[data-material="ai"].will-worse::after{
  inset:0;border-radius:var(--ms-tile-radius);
  animation-duration:.55s;animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;animation-direction:alternate;
}
.cell[data-material="ai"].will-poof::after{
  box-shadow:0 0 0 2px var(--ms-gold-glow);animation-name:ai-poof-preview;
}
.cell[data-material="ai"].will-worse::after{
  box-shadow:0 0 0 2px var(--ms-warn-glow);animation-name:ai-worse-preview;
}
.cell[data-material="ai"].will-ink::after{
  inset:14%;background:var(--ms-tile-1);opacity:.38;
  mask-image:var(--ink-mask-ai);mask-size:100% 100%;mask-repeat:no-repeat;
  transform:translate(var(--ink-x),var(--ink-y)) rotate(var(--ink-rotation));
}
@keyframes ai-poof-preview{
  from{box-shadow:0 0 0 2px var(--ms-gold-glow)}
  to{box-shadow:0 0 0 6px var(--ms-gold-glow)}
}
@keyframes ai-worse-preview{
  from{box-shadow:0 0 0 2px var(--ms-warn-glow)}
  to{box-shadow:0 0 0 6px var(--ms-warn-glow)}
}

/* kasure: the trailing-edge fade sweeps back across the stroke, so the bristle tails go
   first and the core follows — the brush lifting off rather than the ink being erased. */
@keyframes kasure-cancel-preview{
  from{mask-size:100% 100%,100% 100%;opacity:1}
  to{mask-size:100% 100%,46% 100%;opacity:.42}
}
.cell[data-material="kasure"].will-poof .ink-mark{
  animation:kasure-cancel-preview .75s ease-in-out infinite alternate;
}
.cell[data-material="kasure"].will-ink::after{
  inset:14%;background:var(--ms-tile-2);opacity:.22;
  mask-image:var(--ink-mask-kasure),
             linear-gradient(90deg,#000 0 58%,rgba(0,0,0,.72) 78%,rgba(0,0,0,.24) 100%);
  mask-size:100% 100%;mask-repeat:no-repeat;mask-composite:intersect;
  transform:translate(var(--ink-x),var(--ink-y)) rotate(var(--ink-rotation));
}

@media (prefers-reduced-motion: reduce){
  .cell[data-material="kasure"].will-poof .ink-mark{animation:none;opacity:.42}
  .cell.will-poof::after,.cell.will-worse::after{animation:none}
}