/* masugami — the player page (web/index.html)
   Layout and component rules for /play and the /d/… share links. Every colour, size,
   duration and shadow is a token from masugami-theme.css (L2w): a value the system lacks is
   added there first. The @font-face rules stay here because they are the player's: the URLs
   are root-absolute on purpose, since /d/{mode}/{number} share links are served from a
   subdirectory and a relative "assets/…" would resolve against /d/{mode}/ and 404.
   scripts/build-prototype.mjs inlines this file into masugami.html in the link's place, so
   the cascade order is unchanged from the days it was an inline <style>. */
/* ============================================================
   Type — self-hosted, so opening a shared link phones nobody.
   Shippori Mincho and Zen Kaku Gothic New are both OFL and already ship inside
   the app; assets/fonts/ holds byte-identical copies of the same Latin subsets
   from Packages/XODesign/Sources/XODesign/Resources/Fonts (~125KB together),
   with the licences beside them as OFL-*.txt.
   These used to come from the Google Fonts CDN, which
   handed Google the IP address of everyone who opened a share link — at odds
   with the App Store "Data Not Collected" declaration, and unnecessary.
   Only weights 300 and 400 are ever asked for by the CSS below; Shippori 500 is
   declared because it is bundled and costs nothing until it is matched.
   The URLs are root-absolute on purpose: /d/{mode}/{number} share links are
   served from a subdirectory, and a relative "assets/…" would resolve against
   /d/{mode}/ and 404.
   ============================================================ */
@font-face{
  font-family:"Shippori Mincho";font-style:normal;font-weight:400;font-display:swap;
  src:url("/releases/6a657ff1f9b234073b4a9aee/assets/fonts/ShipporiMincho-Regular.ttf") format("truetype");
}
@font-face{
  font-family:"Shippori Mincho";font-style:normal;font-weight:500;font-display:swap;
  src:url("/releases/6a657ff1f9b234073b4a9aee/assets/fonts/ShipporiMincho-Medium.ttf") format("truetype");
}
@font-face{
  font-family:"Zen Kaku Gothic New";font-style:normal;font-weight:300;font-display:swap;
  src:url("/releases/6a657ff1f9b234073b4a9aee/assets/fonts/ZenKakuGothicNew-Light.ttf") format("truetype");
}
@font-face{
  font-family:"Zen Kaku Gothic New";font-style:normal;font-weight:400;font-display:swap;
  src:url("/releases/6a657ff1f9b234073b4a9aee/assets/fonts/ZenKakuGothicNew-Regular.ttf") format("truetype");
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* An in-page jump (the skip link, a fragment) lands below the sticky navigation. */
html{scroll-padding-top:calc(var(--ms-space-8) + var(--ms-space-4))}
body{
  background-color:var(--ms-bg);
  background-image:var(--ms-bg-glow);
  background-repeat:no-repeat;
  background-attachment:fixed;
  color:var(--ms-text);
  font-family:var(--ms-font-ui);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
.wrap{
  max-width:430px;
  margin:0 auto;
  padding:22px var(--ms-gutter) 60px;
}

/* ---------- skip link ----------
   The first stop for a keyboard, clipped out of sight until it has focus; then a small ink
   plate in the corner of the page. */
.skip-link{
  position:absolute;left:var(--ms-gutter);top:var(--ms-space-2);z-index:10;
  display:flex;align-items:center;min-height:var(--ms-hit-min);padding-inline:var(--ms-space-4);
  background:var(--ms-btn-primary-bg);color:var(--ms-btn-primary-text);
  font-family:var(--ms-font-display);font-weight:400;font-size:var(--ms-size-small);text-decoration:none;
}
.skip-link:not(:focus){clip-path:inset(50%)}
.skip-link:focus-visible{outline:var(--ms-focus-width) solid var(--ms-text);outline-offset:var(--ms-focus-offset)}

/* ---------- header ----------
   The wordmark with its mark is the page's one <h1> and the chrome's one memorable thing;
   the three controls beside it are glyphs, not boxes. */
header{display:flex;align-items:center;justify-content:space-between;gap:10px}
.brand{display:flex;align-items:center;gap:13px;min-width:0;margin:0;font:inherit}
/* Splash-inspired artwork follows the selected appearance, like the app icon. */
.mark{
  display:block;width:32px;height:32px;flex:none;
  background:url("/releases/6a657ff1f9b234073b4a9aee/assets/brand/masugami-logo.png") center/contain no-repeat;
}
html[data-appearance="dark"] .mark{
  background-image:url("/releases/6a657ff1f9b234073b4a9aee/assets/brand/masugami-logo-dark.png");
}
.wordmark{
  font:var(--ms-wordmark);
  letter-spacing:var(--ms-track-wordmark);
  color:var(--ms-text-bright);
  text-transform:lowercase;
  white-space:nowrap;
}
/* Each hit area is --ms-hit-min square with the glyph alone at its centre. The row overhangs
   the header by half a step above and below, and into the gutter at its ends, so the header
   keeps the height and width it had when these were 34px boxes. */
.account-header-actions{
  display:flex;gap:0;
  margin-block:calc(var(--ms-space-3) / -2);
  margin-inline:calc(var(--ms-space-2) * -1) calc(var(--ms-space-3) * -1);
}
.iconbtn{
  appearance:none;border:0;background:transparent;padding:0;
  color:var(--ms-text-3);border-radius:0;width:var(--ms-hit-min);height:var(--ms-hit-min);
  font-size:var(--ms-size-small);line-height:1;cursor:pointer;flex:none;
  transition:color var(--ms-dur-hover);
}
@media (hover:hover){
  .iconbtn:hover{color:var(--ms-text-bright)}
}
.iconbtn:focus-visible{
  color:var(--ms-text-bright);
  outline:var(--ms-focus-width) solid var(--ms-text);outline-offset:calc(var(--ms-focus-offset) * -1);
}
.iconbtn:active{transform:scale(.94)}
.tagline{
  margin:26px 0 0;color:var(--ms-text-3);
  font-family:var(--ms-font-display);font-weight:400;
  font-size:var(--ms-size-body);line-height:1.65;text-wrap:pretty;
}
.tagline b{color:var(--ms-text-bright);font-weight:400}

/* ---------- how to play ----------
   The demo itself is the shared component (masugami-howto.css + masugami-howto.js), the same
   one the landing mounts. What belongs to this page is the disclosure around it: open on a
   first visit, closed for good once the player has folded something. The instructions
   paragraph above stays as the no-script and Reduce Motion text. */
.howto{margin-top:var(--ms-space-6);border-top:var(--ms-rule);border-bottom:var(--ms-rule)}
.howto-summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--ms-space-3);
  list-style:none;cursor:pointer;padding:15px 0;
  font-family:var(--ms-font-ui);font-weight:400;font-size:var(--ms-size-micro);letter-spacing:var(--ms-track-micro);
  text-transform:uppercase;color:var(--ms-text-4);
}
.howto-summary::-webkit-details-marker{display:none}
.howto-summary::after{content:"+";font-size:14px;line-height:1}
.howto[open] .howto-summary::after{content:"–"}
.howto-summary:focus-visible{outline:2px solid var(--ms-text);outline-offset:3px}
/* One column at this width, and tighter than the landing's: the board has to stay within
   reach of the first screen even with the lesson open above it. */
.howto .ms-howto{padding-bottom:var(--ms-space-4)}
.howto .ms-howto-stage{min-height:172px;padding:28px 10px}
.howto .ms-steps{grid-template-columns:1fr;gap:0;margin-top:14px}
.howto .ms-step{border-top:var(--ms-rule);padding-bottom:var(--ms-space-3)}
.howto .ms-step .ms-step-label{padding-top:var(--ms-space-3)}
.howto .ms-step p{margin-top:var(--ms-space-1);line-height:1.6}

/* ---------- micro caps ---------- */
.modechip,.counter,.btn{
  font-family:var(--ms-font-ui);
  text-transform:uppercase;
}

/* ---------- mode selector ---------- */
.modes{display:flex;gap:var(--ms-space-2);margin-top:22px}
.modechip{
  flex:1;appearance:none;cursor:pointer;
  font-weight:300;font-size:var(--ms-size-chip);letter-spacing:var(--ms-track-chip);
  padding:12px 0;border-radius:0;
  border:var(--ms-btn-stroke);background:transparent;color:var(--ms-text-3);
  transition:border-color var(--ms-dur-hover), background var(--ms-dur-hover), color var(--ms-dur-hover);
}
@media (hover:hover){
  .modechip:hover{border-color:var(--ms-btn-stroke-hover);background:var(--ms-btn-fill-hover)}
}
.modechip.active{
  border-color:var(--ms-btn-primary-bg);
  background:var(--ms-btn-primary-bg);
  color:var(--ms-btn-primary-text);
  font-weight:400;
}
.modeblurb{
  margin:14px 0 0;color:var(--ms-text-3);
  font-family:var(--ms-font-display);font-size:var(--ms-size-body);line-height:1.65;
  min-height:24px;
}

/* ---------- tabs ---------- */
.tabs{
  display:flex;gap:26px;margin-top:22px;background:transparent;
  border:0;border-bottom:var(--ms-rule);border-radius:0;padding:0;
}
.tab{
  flex:0 0 auto;appearance:none;border:0;background:transparent;color:var(--ms-text-4);
  font-weight:300;font-size:var(--ms-size-chip);letter-spacing:var(--ms-track-micro);
  padding:0 0 12px;border-radius:0;cursor:pointer;
  border-bottom:1px solid transparent;margin-bottom:-1px;
  transition:color var(--ms-dur-hover), border-color var(--ms-dur-hover);
}
@media (hover:hover){ .tab:hover{color:var(--ms-text-2)} }
.tab.active{background:transparent;color:var(--ms-text-bright);border-bottom-color:var(--ms-text)}

/* ---------- status ----------
   A title and a quiet second line (D4), then the pip strip, which owns the fold count; its
   caption is the page's one micro-caps line (D2). One column, as the iOS header (I2). */
.status{
  display:flex;flex-direction:column;gap:var(--ms-space-3);
  margin:0;padding:var(--ms-space-5) 0 var(--ms-space-4);
  border-bottom:var(--ms-rule);
}
.status .where{min-width:0}
.status #whereMain{
  margin:0;
  font:400 var(--ms-size-title)/1.3 var(--ms-font-display);
  color:var(--ms-text-bright);text-wrap:balance;
}
.status #whereSub{
  margin:var(--ms-space-1) 0 0;
  font:400 var(--ms-size-small)/1.5 var(--ms-font-display);
  color:var(--ms-text-2);text-wrap:pretty;
}
.counters{display:flex;flex-direction:column;align-items:flex-start;gap:var(--ms-space-2)}
.counter{
  font-weight:400;font-size:var(--ms-size-micro);letter-spacing:var(--ms-track-micro);color:var(--ms-text-4);
  font-variant-numeric:tabular-nums;
}
.counter.over{color:var(--ms-text-bright)}
/* the fold economy as circles of paper: spent pips fill, the seam after the goal-th marks the
   perfect solve. circles are the design law's one exemption — progress reads as circles. */
.pipRow{display:flex;align-items:center;gap:6px}
.pip{width:11px;height:11px;border-radius:var(--ms-radius-pip);border:1.5px solid var(--ms-text-4)}
.pip.spent{background:var(--ms-text-2);border-color:transparent}
.pip.over{background:var(--ms-text-bright);border-color:transparent}
.pipSeam{width:1.5px;height:15px;background:var(--ms-text-4)}

/* ---------- stage ---------- */
.stage{
  position:relative;
  min-height:360px;
  display:flex;flex-direction:column;gap:var(--ms-space-6);align-items:center;justify-content:center;
  perspective:1100px;
  margin-top:var(--ms-space-4);
}
/* the live sheet */
#board,.result-paper{
  position:relative;
  display:grid;
  padding:var(--ms-space-3);
  border-radius:0;
  background:transparent;
  box-shadow:none;
  transform-style:preserve-3d;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  cursor:grab;
}
/* The sheet is its own clipped layer. Keeping paper off #board means the
   lifted half reveals the actual room instead of a paper-coloured rectangle. */
.sheet-shadow{position:absolute;inset:0;z-index:0;pointer-events:none}
.sheetbase{
  position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:0;
  background-color:var(--ms-paper);
  /* the texture is an optional multiply layer — if assets/cutpaper.png is
     absent the sheet is simply the flat paper colour, which is correct too */
  background-image:
    var(--ms-paper-light),
    var(--ms-paper-shade),
    url("/releases/6a657ff1f9b234073b4a9aee/assets/cutpaper.png");
  background-size:auto, auto, 240% 240%;
  background-position:0 0, 0 0, 26% 20%;
  background-repeat:no-repeat, no-repeat, no-repeat;
  background-blend-mode:normal, normal, multiply;
  box-shadow:var(--ms-paper-lift);
  will-change:clip-path,filter;
}
.sheetbase.cut{box-shadow:none}
/* Shadow the already-cut child: clipping the filter on that same element
   cuts off its shadow too, leaving the held paper floating without depth. */
.sheet-shadow:has(.sheetbase.cut){filter:var(--ms-paper-cut-shadow)}
#board.dragging{cursor:grabbing}
.cell{
  position:relative;z-index:1;
  border-radius:var(--ms-tile-radius);
  background:transparent;
  border:0;                       /* empty cells render as nothing */
  transition:background var(--ms-dur-cell);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ms-font-display);font-weight:400;font-size:var(--ms-size-cell);line-height:1;
  user-select:none;-webkit-user-select:none;
}

/* annihilation: ink is a MARK, in every material — see masugami-marks.css. No cell
   that carries ink draws a tile, a border or relief here. */
/* flatten: raised tiles and punched dents, numerals at |v| >= 2 */
.cell.bump,.fc.bump{
  border:0;color:var(--ms-relief-ink);
  background-color:var(--ms-relief-face);
  background-image:var(--ms-tile);
  box-shadow:var(--ms-tile-relief);
}
.cell.bump.b2,.fc.bump.b2{
  box-shadow:var(--ms-tile-relief-2);
}
.cell.dent,.fc.dent{
  border:0;color:var(--ms-dent-ink);
  background-color:var(--ms-dent);
  background-image:var(--ms-dent-wash);
  box-shadow:var(--ms-dent-shadow);
}
.cell.dent.d2,.fc.dent.d2{
  background-color:var(--ms-dent-2);
  box-shadow:var(--ms-dent-shadow-2);
}

/* ai keeps its scored grid quiet behind the pool. */
html[data-theme="ai"] .cell:not(.on):not(.bump):not(.dent){
  border:0;
}

.cell.hidden{visibility:hidden}

/* Fold preview ghosts — the marks that describe the sheet that would remain after
   release — live in masugami-marks.css with the material they belong to. */

/* ---------- commit flashes ---------- */
.cell.poof{animation:poof var(--ms-dur-flash) ease-out}
.cell.land{animation:land var(--ms-dur-land) ease-out}
.cell.worse{animation:worseflash var(--ms-dur-flash) ease-out}
@keyframes poof{
  0%{box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--ms-accent) 90%, transparent), 0 0 0 0 color-mix(in srgb, var(--ms-accent) 55%, transparent)}
  60%{box-shadow:inset 0 0 0 0 transparent, 0 0 0 11px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}
@keyframes land{
  0%{transform:scale(1.18)}
  100%{transform:scale(1)}
}
@keyframes worseflash{
  0%{box-shadow:0 0 0 0 rgba(var(--ms-worse-rgb),.65)}
  60%{box-shadow:0 0 0 9px rgba(var(--ms-worse-rgb),0)}
  100%{box-shadow:0 0 0 0 transparent}
}

/* ---------- creases ---------- */
.seam{
  position:absolute;z-index:5;appearance:none;border:0;padding:0;
  background:transparent;color:inherit;pointer-events:none;
}
.seam::before{
  content:"";position:absolute;border-radius:0;
  transition:background var(--ms-dur-crease), box-shadow var(--ms-dur-crease), opacity var(--ms-dur-crease);
}
.seam.v::before{
  left:50%;top:0;bottom:0;width:var(--ms-crease-width);transform:translateX(-50%);
  background:var(--ms-crease);
}
.seam.h::before{
  top:50%;left:0;right:0;height:var(--ms-crease-width);transform:translateY(-50%);
  background:var(--ms-crease-h);
}
/* active: an accent hairline down the middle of the hit strip */
@media (hover:hover){
  .seam.v:hover::before,.seam.h:hover::before{background:var(--ms-accent);opacity:1}
}
.seam.v:active::before,.seam.h:active::before{background:var(--ms-accent);opacity:1}
.seam.armed.v::before,.seam.armed.h::before{background:var(--ms-accent);opacity:1}
.seam:focus-visible{outline:0}
.seam:focus-visible::after{
  content:"";position:absolute;inset:2px;border:1px solid var(--ms-text-bright);
  box-shadow:0 0 0 2px var(--ms-bg);opacity:.9;
}
.seam.cue.v::before,.seam.cue.h::before{
  background:var(--ms-accent);opacity:1;
  animation:cuepulse var(--ms-dur-cue) ease-in-out infinite alternate;
}
@keyframes cuepulse{from{opacity:.45}to{opacity:1}}

/* ---------- fold flap: a real two-sided sheet of paper ---------- */
.cell.surviving-ink{z-index:21;pointer-events:none}
.foldclone{
  position:absolute;z-index:20;pointer-events:none;overflow:visible;
  contain:layout style;
}
.foldband{
  position:absolute;inset:0;transform-origin:0 0;will-change:transform;
  pointer-events:none;
}
.foldface{
  position:absolute;inset:0;border-radius:0;overflow:hidden;
  background-color:var(--ms-paper);
  background-image:
    var(--ms-paper-light),
    var(--ms-paper-shade),
    url("/releases/6a657ff1f9b234073b4a9aee/assets/cutpaper.png");
  background-size:auto, auto, 240% 240%;
  background-position:0 0, 0 0, 26% 20%;
  background-repeat:no-repeat, no-repeat, no-repeat;
  background-blend-mode:normal, normal, multiply;
  will-change:opacity;
}
.foldface.back{background-color:var(--ms-paper-flap)}
.foldface.back.axis-col .fc{transform:scaleX(-1)}
.foldface.back.axis-row .fc{transform:scaleY(-1)}
.foldclone .fc{
  position:absolute;border-radius:var(--ms-tile-radius);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ms-font-display);font-weight:400;font-size:var(--ms-size-cell);line-height:1;
}
/* flap relief tiles (Smooth): same gradient, lighter two-layer shadow */
.foldclone .fc.bump{box-shadow:var(--ms-tile-relief-flap)}
.foldclone .fc.off{border:0}
.foldclone .fc.ghosty{opacity:.5;filter:blur(.5px)}
.flap-crease{position:absolute;display:block;pointer-events:none;opacity:.72}
.flap-crease.v{top:0;bottom:0;width:1.5px;background:var(--ms-crease)}
.flap-crease.h{left:0;right:0;height:1.5px;background:var(--ms-crease-h)}
.foldface.back .flap-crease{opacity:.35}
.hinge-shade,.band-light{
  position:absolute;inset:0;pointer-events:none;will-change:opacity;
}
.paper-thickness{
  position:absolute;display:block;background:var(--ms-paper-edge);z-index:4;
  box-shadow:var(--ms-edge-shadow);
}
.paper-thickness.edge-l{left:0;top:0;bottom:0;width:3px}
.paper-thickness.edge-r{right:0;top:0;bottom:0;width:3px}
.paper-thickness.edge-t{top:0;left:0;right:0;height:3px}
.paper-thickness.edge-b{bottom:0;left:0;right:0;height:3px}

.foldshadow{
  position:absolute;z-index:12;pointer-events:none;border-radius:0;
  background:var(--ms-fold-shadow);
  transform:translateZ(0);will-change:left,top,width,height,filter,opacity;
}

/* ground revealed where the paper lifted away */
.exposed{
  position:absolute;z-index:8;border-radius:0;pointer-events:none;
  background:var(--ms-bg);
  box-shadow:none;
  opacity:0;transition:opacity var(--ms-dur-exposed);
}
.exposed.show{opacity:1}

/* Native artsy materials: the mark silhouettes and jitter are supplied by
   masugami-paper.js to BOTH faces, and drawn by masugami-marks.css. The paper,
   crease and weave rules below stay with the page, because they are the sheet
   rather than the ink; kasure keeps this block's scored groove and cut-paper
   texture instead. */
html:is([data-theme="washi"],[data-theme="ai"]) :is(.sheetbase,.foldface){
  background-image:var(--ms-paper-light),var(--ms-paper-shade),var(--paper-weave),url("/releases/6a657ff1f9b234073b4a9aee/assets/cutpaper.png");
  background-size:var(--paper-width) var(--paper-height);
  background-position:var(--paper-offset-x,0px) var(--paper-offset-y,0px);
  background-repeat:no-repeat;background-blend-mode:normal,normal,normal,multiply;
}
html:is([data-theme="washi"],[data-theme="ai"]) .seam::before{
  background:var(--ms-tile-2);opacity:.24;
  mask-image:var(--crease-mask);mask-size:100% 100%;mask-repeat:no-repeat;
}
html:is([data-theme="washi"],[data-theme="ai"]) .seam.v::before{width:6px}
html:is([data-theme="washi"],[data-theme="ai"]) .seam.h::before{height:6px}
html:is([data-theme="washi"],[data-theme="ai"]) .seam:is(.armed,.cue)::before{background:var(--ms-accent);opacity:1}
html:is([data-theme="washi"],[data-theme="ai"]) .flap-crease{
  background:var(--ms-tile-2);opacity:.24;mask-image:var(--crease-mask);mask-repeat:no-repeat;
}
html:is([data-theme="washi"],[data-theme="ai"]) .flap-crease.v{
  width:6px;margin-left:-2.25px;mask-size:6px var(--paper-height);mask-position:0 var(--paper-offset-y);
}
html:is([data-theme="washi"],[data-theme="ai"]) .flap-crease.h{
  height:6px;margin-top:-2.25px;mask-size:var(--paper-width) 6px;mask-position:var(--paper-offset-x) 0;
}
html:is([data-theme="washi"],[data-theme="ai"]) .foldface.back .flap-crease{opacity:.115}

@media (prefers-reduced-motion: reduce){
  html:not([data-fold-motion="full"]) :is(.foldclone,.foldshadow){display:none}
  .seam::before{transition:none}
  .cell.poof,.cell.land,.cell.worse{animation:none}
  .cell.will-poof::after,.cell.will-worse::after{animation:none}
  .seam.cue.v::before,.seam.cue.h::before{animation:none}
  .paperbit{display:none}
}

/* ---------- confetti ---------- */
.paperbit{
  position:absolute;width:9px;height:9px;border-radius:0;z-index:30;pointer-events:none;
  animation:fall var(--ms-dur-confetti) ease-in forwards;
}
/* cut from the sheet: its face, its flap side and its ink; the accent is the fold's alone */
.paperbit-0{background:var(--ms-paper)}
.paperbit-1{background:var(--ms-paper-flap)}
.paperbit-2{background:var(--ms-tile-1)}
@keyframes fall{
  0%{transform:translate(0,0) rotate(0);opacity:1}
  100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot));opacity:0}
}

/* ---------- the result, on the sheet (D6) ----------
   One modal presenter: the native dialog, opened with showModal() so the page behind is inert.
   It spans the viewport with no surface of its own; the player script measures the sheet and
   the column (--sheet-*, --column-*) as it opens. An inert copy of the terminal paper lives
   in this same scrolling dialog. The backdrop veils the room; paper, award and actions scroll
   together above it, including on browsers without backdrop-mask variable inheritance. */
#resultDialog{
  position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;
  border:0;padding:0;background:transparent;color:var(--ms-text);
  overflow-y:auto;overscroll-behavior:contain;
}
#resultDialog::backdrop{
  background:var(--ms-scrim);

}
/* While it stands the page is held still. What lies under the words below the sheet (the hint,
   the level dots, the laws) is put away rather than ghosted through the veil, and the page gains
   a viewport of room at its foot so a low sheet can be brought up for the actions to fit. */
html:has(#resultDialog[open]){overflow:hidden}
html:has(#resultDialog[open]) #board{visibility:hidden}
.result-paper{position:absolute;top:var(--sheet-top);left:var(--sheet-left);pointer-events:none}
html:has(#resultDialog[open]) :is(#hint,#dots,#lawsSection,#pitchSection){visibility:hidden}
html:has(#resultDialog[open]) .wrap::after{content:"";display:block;height:100dvh}
.result{display:none}
.result.show{display:block}
.result-award{
  position:absolute;top:var(--sheet-top);left:var(--sheet-left);
  width:var(--sheet-width);height:var(--sheet-height);
  display:flex;align-items:center;justify-content:center;pointer-events:none;
}
.result-award .rank{
  width:min(var(--ms-award-size),calc(var(--sheet-width) - var(--ms-space-6)),calc(var(--sheet-height) - var(--ms-space-6)));
  height:auto;aspect-ratio:1;
}
.result-body{
  position:absolute;top:calc(var(--sheet-top) + var(--sheet-height) + var(--ms-space-6));
  left:var(--column-left);width:var(--column-width);padding-bottom:var(--ms-space-6);
  text-align:center;
}
.result-body h2{margin:0;font:400 var(--ms-size-h2)/1.3 var(--ms-font-display);color:var(--ms-text-bright);text-wrap:balance}
/* The heading takes focus so a reader starts at the medal; it is not a control, so no ring. */
.result-body h2:focus{outline:0}
.result-body .sub{
  margin:var(--ms-space-1) 0 var(--ms-space-5);
  font:400 var(--ms-size-body)/1.6 var(--ms-font-display);color:var(--ms-text-2);
  font-variant-numeric:tabular-nums;text-wrap:pretty;
}
.btn:disabled{opacity:.45;cursor:default;transform:none}
/* One primary across the column, then two rows of quiet words (D3). */
.result-actions{display:flex;flex-direction:column;align-items:stretch}
.result-row{display:flex;flex-wrap:wrap;justify-content:center;column-gap:var(--ms-space-4)}
.result-actions .btn.primary + .result-row{margin-top:var(--ms-space-2)}
#resultDialog .btn:focus-visible{outline:var(--ms-focus-width) solid var(--ms-text);outline-offset:var(--ms-focus-offset)}
#dots{flex-wrap:wrap;gap:var(--ms-space-2)}
#dots .dot{width:44px;height:44px;border-radius:0;color:var(--ms-text-bright);font:inherit;transform:none;opacity:1;background:transparent;border:1px solid var(--ms-text-4)}
#dots .dot.done{background:var(--ms-card)}
#dots .dot:disabled{opacity:.4}
#dots .dot.cur{outline:1px solid var(--ms-text-bright);outline-offset:2px}
#dots .failed{text-decoration:line-through}
#playbackControls{width:100%;text-align:center;display:flex;flex-direction:column;gap:var(--ms-space-4)}
#playbackControls[hidden]{display:none}
#playbackControls{margin:0;font-family:var(--ms-font-display)}
#playbackTitle{margin:0 0 var(--ms-space-1);font-size:var(--ms-size-h2);font-weight:400;line-height:1.3}
#playbackTitle:focus-visible{outline:var(--ms-focus-width) solid var(--ms-text);outline-offset:var(--ms-focus-offset)}
#playbackPosition,#playbackGuidance{margin:0;line-height:1.4}
#playbackPosition{font-variant-numeric:tabular-nums}
#gameContent:has(#playbackControls:not([hidden])) .stage{min-height:0;gap:36px}
#gameContent:has(#playbackControls:not([hidden])) #gameBack{margin-bottom:var(--ms-space-2)}
#gameContent:has(#playbackControls:not([hidden])) .status{padding-top:var(--ms-space-3)}
#gameContent:has(#playbackControls:not([hidden])) #hint{display:none}
#playbackTransport{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ms-space-2);margin-top:var(--ms-space-3)}
#playbackTransport .btn{min-width:0;white-space:normal;padding-inline:var(--ms-space-1)}
.playback-guidance{font-size:var(--ms-size-small);color:var(--ms-text-2)}
.practice-label{text-align:center;font-size:var(--ms-size-small)}
#shareFallback{width:100%;min-height:120px}
.btnrow{display:flex;flex-wrap:wrap;gap:var(--ms-space-2);justify-content:center}
.btnrow .btn{flex:1 1 max-content}
.store-reward{display:block;margin-top:var(--ms-space-4);line-height:0}
.store-reward[hidden]{display:none}
.store-reward img{display:block;width:auto;height:40px;margin-inline:auto}

/* ---------- buttons ---------- */
.btn{
  appearance:none;font-family:var(--ms-font-ui);font-weight:300;
  white-space:nowrap;word-break:normal;overflow-wrap:normal;hyphens:none;
  font-size:var(--ms-size-chip);letter-spacing:var(--ms-track-chip);text-transform:uppercase;cursor:pointer;
  border-radius:0;min-height:var(--ms-hit-min);padding:13px 12px;border:var(--ms-btn-stroke);
  background:transparent;color:var(--ms-text-2);
  transition:border-color var(--ms-dur-hover), background var(--ms-dur-hover), color var(--ms-dur-hover);
}
@media (hover:hover){
  .btn:hover{border-color:var(--ms-btn-stroke-hover);background:var(--ms-btn-fill-hover)}
}
.btn.primary{
  background:var(--ms-btn-primary-bg);color:var(--ms-btn-primary-text);
  border-color:var(--ms-btn-primary-bg);font-weight:400;
}
@media (hover:hover){
  .btn.primary:hover{background:var(--ms-btn-primary-hover);border-color:var(--ms-btn-primary-hover)}
}
/* The primary (D3): one per screen, filled with ink, its label a sentence in Shippori Mincho at
   the small step; --ms-hit-min tall and square from .btn. */
.btn.primary{
  font-family:var(--ms-font-display);font-size:var(--ms-size-small);letter-spacing:0;text-transform:none;
}
/* The quiet action (D3): a word in ink with no box, underlined on hover and on keyboard focus,
   where it also draws the shared ring. A row of them is a row of words with a gap. */
.btn.quiet{
  border:0;background:transparent;color:var(--ms-text);
  font-family:var(--ms-font-display);font-weight:400;font-size:var(--ms-size-small);
  letter-spacing:0;text-transform:none;padding-inline:var(--ms-space-2);
  text-underline-offset:var(--ms-space-1);
}
@media (hover:hover){
  .btn.quiet:hover{background:transparent;text-decoration:underline}
}
.btn.quiet:disabled{text-decoration:none}
.btn.quiet:focus-visible{
  text-decoration:underline;
  outline:var(--ms-focus-width) solid var(--ms-text);outline-offset:var(--ms-focus-offset);
}
/* No double-tap zoom wait on a control, and no grey tap flash: the press scale is the feedback. */
.btn,.iconbtn,.tab,.modechip{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.97)}
.btn.is-invisible{visibility:hidden}

/* ---------- controls ---------- */
/* Undo and Start over, the quiet pair under the sheet (D3): two words at the column's edges,
   which is the sheet's widest, so they stay put while folding narrows the paper. The row
   overhangs by the buttons' own inline padding so each word, not its hit area, meets the edge. */
.controls{
  display:flex;justify-content:space-between;gap:var(--ms-space-3);
  margin:var(--ms-space-5) calc(var(--ms-space-2) * -1) 0;
}
.hint{
  color:var(--ms-text-3);font-family:var(--ms-font-display);font-weight:400;
  font-size:var(--ms-size-body);line-height:1.65;margin-top:18px;
  min-height:24px;text-wrap:pretty;
}
.dots{display:flex;flex-wrap:wrap;gap:var(--ms-space-2);justify-content:center;margin-top:var(--ms-space-5)}
.dot{width:8px;height:8px;border-radius:0;background:var(--ms-text-4);opacity:.28;transform:rotate(45deg)}
.dot.done{background:var(--ms-text-2);opacity:.8}
.dot.cur{background:var(--ms-text-bright);opacity:1;outline:1px solid var(--ms-text-4);outline-offset:3px}
.dots[hidden]{display:none}

/* ---------- sections ---------- */
section{margin-top:44px}
/* A section title is a sentence-case title on the hairline, as Home's (.home-title, W2): the
   running face at the title step, not micro caps (D2). */
section h3{
  font:400 var(--ms-size-title)/1.3 var(--ms-font-display);
  color:var(--ms-text-bright);margin:0;padding-bottom:var(--ms-space-3);
  border-bottom:var(--ms-rule);text-wrap:balance;
}
/* laws: rule-separated columns, no cards */
.rules{display:flex;gap:0}
.rule{
  flex:1;background:transparent;border:0;border-radius:0;
  padding:18px 9px 0;text-align:center;
}
.rule + .rule{border-left:var(--ms-rule)}
.rule .eq{display:flex;align-items:center;justify-content:center;gap:5px;margin-bottom:11px}
.sq{width:16px;height:16px;border-radius:0;display:inline-block;flex:none}
/* .sq.b — the inked swatch — is drawn as this material's mark (masugami-marks.css). Both the
   inked and the blank swatch stand on a square of paper: a mark alone on the page's ground is
   unreadable in a dark room, and the legend is a picture of paper either way. */
.sq.b,.sq.w{background-color:var(--ms-paper)}
.sq.w{box-shadow:inset 0 0 0 1px var(--ms-text-4)}
.sq.bp{background-image:var(--ms-tile);box-shadow:1px 2px 3px var(--ms-shadow)}
.sq.l2{background-image:var(--ms-tile);box-shadow:2px 4px 6px var(--ms-shadow)}
.sq.dt{background:var(--ms-dent);box-shadow:inset 1px 2px 3px rgba(var(--ms-worse-rgb),.55)}
.sq.w2{background:var(--ms-dent-2);box-shadow:inset 2px 3px 5px rgba(var(--ms-worse-rgb),.7)}
.sq.hl{
  border-radius:50%;
  background:var(--ms-legend-hole);
  box-shadow:var(--ms-legend-hole-shadow);
}
.rule .op{color:var(--ms-text-4);font-size:var(--ms-size-footnote);font-weight:300}
.rule p{
  margin:0;font-family:var(--ms-font-display);font-weight:400;
  font-size:var(--ms-size-caption);line-height:1.55;color:var(--ms-text-3);
}
.rule p b{color:var(--ms-text-bright);font-weight:400}
/* pitch: rule-separated rows, no cards */
.pitchcards{display:grid;gap:0}
.pitchcard{
  background:transparent;border:0;border-bottom:var(--ms-rule);border-radius:0;
  padding:17px 0 18px;
}
.pitchcard:last-child{border-bottom:0}
.pitchcard h4{
  margin:0 0 6px;font-family:var(--ms-font-display);font-weight:400;
  font-size:var(--ms-size-cell);line-height:1.3;color:var(--ms-text-bright);letter-spacing:.01em;
}
.pitchcard p{
  margin:0;font-family:var(--ms-font-display);font-weight:400;
  font-size:var(--ms-size-text);color:var(--ms-text-3);line-height:1.6;
}

/* ---------- optional account sync (P3 S0–S7) ---------- */
.account-settings-icon{font-family:var(--ms-font-ui);font-size:var(--ms-size-title)}
.account-scrim{
  border:0;margin:0;max-width:none;max-height:none;width:100%;height:100%;box-sizing:border-box;
  position:fixed;inset:0;z-index:100;display:none;align-items:flex-start;justify-content:center;
  overflow:auto;overscroll-behavior:contain;padding:58px 18px;background:var(--ms-bg);color:var(--ms-text);
  transition:opacity var(--ms-dur-hover) var(--ms-ease);
}
.account-scrim.open{display:flex}
.account-panel{width:min(100%,430px);padding:24px 26px;border:var(--ms-btn-stroke);background:var(--ms-bg);border-radius:0}
.account-panel-head{display:flex;align-items:center;justify-content:space-between;border-bottom:var(--ms-rule);padding-bottom:14px}
/* The panel's name is its title at the h2 step, as the Achievements dialog's; each part of it
   (Theme, Appearance, Sync, and the account states' own names) is a sentence-case title at the
   title step in the running face (D2). */
.account-panel h2{margin:0;font:400 var(--ms-size-h2)/1.3 var(--ms-font-display);color:var(--ms-text-bright);text-wrap:balance}
.account-label{margin:0;padding:0;border:0;font:400 var(--ms-size-title)/1.3 var(--ms-font-display);color:var(--ms-text-bright);text-wrap:balance}
.account-close{appearance:none;border:0;background:transparent;color:var(--ms-text);font:400 24px/1 var(--ms-font-ui);cursor:pointer;min-width:46px;min-height:46px}
.account-preferences{padding-top:22px}
.settings-section+.settings-section{margin-top:var(--ms-space-6)}
.settings-theme-list{margin-top:10px;border:var(--ms-btn-stroke)}
.theme-option{
  appearance:none;width:100%;min-height:62px;padding:10px 12px;border:0;border-bottom:var(--ms-rule);
  display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:var(--ms-space-3);
  background:transparent;color:var(--ms-text);text-align:left;cursor:pointer;
}
.theme-option:last-child{border-bottom:0}
.theme-option.is-selected{background:var(--ms-btn-fill-hover);box-shadow:inset 2px 0 0 var(--ms-accent)}
html[data-theme="ai"] .theme-option.is-selected{box-shadow:inset 2px 0 0 var(--ms-text)}
.theme-swatch{
  position:relative;display:block;width:34px;height:34px;background:var(--ms-paper);
  border:1px solid var(--ms-cell-line);
}
.theme-option-copy{display:block;min-width:0}
.theme-option-name{display:block;font:400 var(--ms-size-cell)/1.25 var(--ms-font-display);text-transform:lowercase;color:var(--ms-text-bright)}
.theme-option-caption{display:block;margin-top:3px;font:400 var(--ms-size-footnote)/1.35 var(--ms-font-display);color:var(--ms-text-4)}
.appearance-options{display:grid;grid-template-columns:repeat(3,1fr);margin-top:10px;border:var(--ms-btn-stroke)}
.appearance-option{
  appearance:none;min-height:var(--ms-hit-min);padding:var(--ms-space-2) var(--ms-space-1);border:0;border-right:var(--ms-rule);
  background:transparent;color:var(--ms-text-3);font:400 var(--ms-size-small)/1.2 var(--ms-font-display);cursor:pointer;
}
.appearance-option:last-child{border-right:0}
.appearance-option.is-selected{background:var(--ms-btn-primary-bg);color:var(--ms-btn-primary-text)}
.account-view{padding-top:22px;margin-top:var(--ms-space-6);border-top:var(--ms-rule)}
.account-copy{margin:var(--ms-space-2) 0 0;font:400 var(--ms-size-body)/1.65 var(--ms-font-display);color:var(--ms-text-2)}
.account-identity{margin:var(--ms-space-2) 0 0;overflow-wrap:anywhere;font:400 var(--ms-size-body)/1.5 var(--ms-font-display);color:var(--ms-text-bright)}
/* A state's one forward action is the full-width primary; every other action is a quiet word,
   flush with the column, in a row with a gap (D3). The provider choices stack as a list. */
.account-actions{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--ms-space-6);margin-top:var(--ms-space-5)}
.account-actions .btn.primary{flex:1 1 100%;margin-bottom:var(--ms-space-2)}
.account-actions.stack{flex-direction:column;align-items:flex-start}
.account-scrim .btn.quiet,.account-invite .btn.quiet{padding-inline:0}
.account-legal{margin:20px 0 0;font:400 var(--ms-size-footnote)/1.6 var(--ms-font-display);color:var(--ms-text-4)}
.account-legal a{color:var(--ms-text-2);text-underline-offset:var(--ms-space-1)}
/* The three legal links are a row of words with a gap, each a full hit tall; the terms box and
   its sentence are one target. */
nav.account-legal{display:flex;flex-wrap:wrap;column-gap:var(--ms-space-5)}
nav.account-legal a{display:inline-flex;align-items:center;min-height:var(--ms-hit-min)}
label.account-legal{display:flex;align-items:center;gap:var(--ms-space-2);min-height:var(--ms-hit-min);cursor:pointer}
.account-email-form{display:grid;gap:var(--ms-space-2);margin-top:var(--ms-space-4)}
.account-email-form label{font:400 var(--ms-size-small)/1.4 var(--ms-font-display);color:var(--ms-text-2)}
.account-email-form .btn.primary{margin-top:var(--ms-space-2)}
.account-email-form input{width:100%;min-height:46px;padding:var(--ms-space-3);border:var(--ms-btn-stroke);border-radius:0;background:transparent;color:var(--ms-text-bright);font:400 var(--ms-size-input)/1.3 var(--ms-font-display)}
.account-email-form input:focus-visible,.account-scrim button:focus-visible,.account-scrim a:focus-visible{outline:var(--ms-focus-width) solid var(--ms-text);outline-offset:var(--ms-focus-offset)}
.account-error{min-height:18px;margin:10px 0 0;font:400 var(--ms-size-footnote)/1.5 var(--ms-font-display);color:var(--ms-text-2)}
.account-invite{display:none;margin-top:var(--ms-space-5)}
.account-invite.show{display:block}
.account-invite p{margin:0;font:400 var(--ms-size-small)/1.6 var(--ms-font-display);color:var(--ms-text-2)}
.account-invite-actions{display:flex;align-items:center;justify-content:center;column-gap:var(--ms-space-6)}
.account-sync-line{margin-top:var(--ms-space-3);font:400 var(--ms-size-small)/1.6 var(--ms-font-display);color:var(--ms-text-2)}
.account-sync-line[hidden]{display:none}
@media(max-width:420px){.account-scrim{padding:0}.account-panel{min-height:100vh;border-inline:0;border-block:0}}