/* Generated by game-rules.mjs. Edit game-rules-themes.mjs. */

:root{
  --bg:#0b1112; /* games/ninefold/style.css :root --bg: #0b1112 */
  --ink:#e8dfce; /* games/ninefold/style.css :root --paper: #e8dfce */
  --muted:#a5aaa2; /* games/ninefold/style.css :root --muted: #a5aaa2 */
  --accent:#df8068; /* games/ninefold/style.css :root --red: #df8068 */
  --line:#3d4845; /* games/ninefold/style.css :root --line: #3d4845 */
  --panel:#101718; /* games/ninefold/style.css :root --surface: #101718 */
  --display:'Source Serif 4',Georgia,'Times New Roman',serif; /* games/ninefold/style.css :root --serif: 'Source Serif 4',Georgia,'Times New Roman',serif */
  --reading:'Source Serif 4',Georgia,'Times New Roman',serif; /* games/ninefold/style.css :root --serif: 'Source Serif 4',Georgia,'Times New Roman',serif */
  --label:'JetBrains Mono',ui-monospace,monospace; /* games/ninefold/style.css :root --mono: 'JetBrains Mono',ui-monospace,monospace */
  --sheet:#0b1112; /* games/ninefold/style.css :root --bg: #0b1112 */
  --titleInk:#e8dfce; /* games/ninefold/style.css :root --paper: #e8dfce */
  --dot:#df8068; /* games/ninefold/style.css :root --red: #df8068 */
  --weight:400; /* games/ninefold/style.css h1: 400 */
  --tracking:.035em; /* games/ninefold/style.css h1: .035em */
  --casing:none; /* games/ninefold/style.css button: none */
  --italic:normal; /* games/ninefold/style.css .player-mark,.key-glyph,.mark-pair i: normal */
  --buttonBg:#e8dfce; /* games/ninefold/style.css :root --paper: #e8dfce */
  --buttonInk:#171d1b; /* games/ninefold/style.css .primary: #171d1b */
  --buttonBorder:#e8dfce; /* games/ninefold/style.css :root --paper: #e8dfce */
  --buttonRadius:2px; /* games/ninefold/style.css button: 2px */
  --buttonShadow:none; /* games/ninefold/style.css button: none */
  --panelInk:#e8dfce; /* games/ninefold/style.css :root --paper: #e8dfce */
  --panelMuted:#a5aaa2; /* games/ninefold/style.css :root --muted: #a5aaa2 */
  --panelBorder:#3d4845; /* games/ninefold/style.css :root --line: #3d4845 */
  --panelRadius:2px; /* games/ninefold/style.css button: 2px */
  --panelShadow:none; /* games/ninefold/style.css button: none */
  --cover-position:50% 35%;
  --motif:"○";
}
.title-lockup{display:flex;gap:32px;align-items:end}.calligraphy{font:104px/1.03 "Kaiti SC",STKaiti,KaiTi,"Noto Serif CJK SC",serif;writing-mode:vertical-rl;color:#ded6c3;letter-spacing:-.04em}.eyebrow{font-size:10px}#rules-content .rule-step{display:grid;grid-template-columns:3em 1fr;gap:16px}#rules-content .rule-step>b{font:400 13px/1.7 var(--label);color:var(--accent)}#rules-content strong,#rules-content b{font-weight:500}#rules-content .rule-step strong{display:block;color:var(--ink);margin-bottom:3px}@media(max-width:600px){.calligraphy{font-size:44px}.title-lockup{gap:16px}}
#rules-content ul>li::before{content:"○"}#rules-content ul>li:nth-child(even)::before{content:"×"}

[data-toy=sending-board]{position:relative;aspect-ratio:1;padding-bottom:82px;box-sizing:content-box;margin:28px 0 36px;width:min(100%,560px);margin-inline:auto}
[data-toy=sending-board]>figure{position:absolute;inset:0;margin:0;display:flex;align-items:center}
[data-toy=sending-board]>figure[hidden]{display:none}
[data-toy=sending-board]>figure img{width:100%;height:auto}
.nf-sheet{position:absolute;inset:0}
.nf-board{width:100%;gap:10px;padding:6px;background:#657262;border:1px solid #657262}
.nf-board,.nf-field{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));aspect-ratio:1}
.nf-field{position:relative;min-width:0;overflow:hidden;gap:0;background:#0d1516;border:1px solid #657063;opacity:1!important;transition:background .25s,border-color .25s}
.nf-field[data-open=false]{opacity:.45}
.nf-cell{position:relative;border:0;min-width:0;aspect-ratio:1;color:#e8dfce;cursor:pointer;padding:18%;background:transparent;border-right:1px solid #9ba08736;border-bottom:1px solid #9ba08736;opacity:1!important}
.nf-cell svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.nf-cell[data-mark=O]{color:#df8068}
.nf-under{stroke-width:6}
.nf-echo{stroke-width:.85}
.nf-last::after{content:"";position:absolute;inset:5%;border:1px solid #d9cfb7aa;border-radius:48% 52% 49% 46%}
.nf-cell[data-legal=true]:hover{background:#252e2b}
.nf-landscape{position:absolute;inset:0;background:url(assets/rules-landscape-x.svg) 0 0/300% 300%;opacity:0;pointer-events:none;transition:opacity 1.1s}
.nf-field[data-claim=O]>.nf-landscape{background-image:url(assets/rules-landscape-o.svg)}
.nf-field[data-claim]:not([data-claim=""]),.nf-field[data-claim]:not([data-claim=""])>.nf-landscape{opacity:1}
.nf-close .nf-return,.nf-close>.nf-landscape{animation:nf-dissolve 1.1s ease-out 1}
.nf-note{height:42px;padding-top:12px;text-align:center;font:14px Georgia;color:var(--ink)}
.nf-seal{display:block;margin:0 auto;width:38px;height:32px;border:1px solid #df8068;background:transparent;color:#df8068;font:22px Georgia;cursor:pointer}
.nf-route{position:absolute;inset:0;width:100%;height:calc(100% - 82px);pointer-events:none;overflow:visible}
.nf-route path{fill:none;stroke:#c7b99b;stroke-width:2;stroke-linecap:round;stroke-dasharray:100;opacity:0}
.nf-travel path{animation:nf-line .9s ease-out 1}
[data-toy=closing-field]{height:276px;margin:24px 0 32px;display:flex;justify-content:center}
.nf-single{width:260px;height:260px;max-width:100%}
.nf-return{position:absolute;inset:0;border:0;background:transparent;cursor:pointer}
.nf-return .nf-landscape{opacity:1}
.nf-return[hidden]{display:none}
[data-toy=moon-birds]{position:absolute;left:32%;top:9%;width:18%;height:24%;z-index:1}
.nf-moon{position:relative;width:100%;height:100%;border:0;background:transparent;cursor:pointer}
.nf-birds{position:absolute;left:-50%;top:20%;width:85px;height:32px;opacity:0;background:url(assets/rules-birds.webp) 50%/contain no-repeat}



/* Temporary wings until rules-birds.webp is painted, in the rules-cover.webp ink style. */.nf-birds::after,.nf-birds::before{content:"";position:absolute;width:18px;height:7px;border-top:2px solid #0b1e24;border-radius:50%}
.nf-birds::before{transform:rotate(16deg);left:15%;top:20%}
.nf-birds::after{left:50%;top:55%;transform:rotate(-14deg)}
.nf-flight{animation:nf-flight 1.8s ease-in-out 1}
.cover-copy{position:relative;pointer-events:none}
.cover-copy a,.nf-calligraphy{pointer-events:auto}
[data-toy=brushed-title]{position:absolute;width:1px;height:1px}
.nf-calligraphy{padding:0;border:0;background:transparent;color:inherit;font:inherit;writing-mode:inherit;cursor:pointer}



/* Temporary stepped ink mask; rules-calligraphy-strokes.webp will supply painted strokes. */.nf-brush{background-image:url(assets/rules-calligraphy-strokes.webp);background-size:contain;animation:nf-brush 1.6s steps(12) 1}
[data-toy=margin-ink]{height:64px;position:relative;margin-top:-40px;pointer-events:none}
.nf-margin{position:absolute;right:-12px;top:0;width:44px;height:64px;padding:0;border:0;background:transparent;cursor:crosshair;pointer-events:auto}
.nf-dot{position:absolute;left:19px;top:24px;width:5px;height:6px;border-radius:45% 50% 30% 55%;background:#928d7c;opacity:0}
.nf-margin[data-ink=true] .nf-dot{opacity:1}
.nf-blot{animation:nf-blot 3s ease-out 1 forwards}
.nf-calligraphy:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
[data-toy] button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@keyframes nf-line{0%{stroke-dashoffset:100;opacity:.8}
70%{stroke-dashoffset:0;opacity:.8}
to{stroke-dashoffset:0;opacity:0}}
@keyframes nf-dissolve{0%{opacity:0}}
@keyframes nf-flight{0%{opacity:0;transform:translateX(-20px)}
20%{opacity:1}
80%{opacity:1}
to{opacity:0;transform:translateX(120px)}}
@keyframes nf-brush{0%{clip-path:inset(0 0 100%)}
to{clip-path:inset(0)}}
@keyframes nf-blot{0%{opacity:1}
60%{opacity:1}
to{opacity:0}}
[data-toy]{overflow:clip;min-width:0;max-width:100%;overflow-wrap:anywhere;transition:height .26s ease}
[data-toy] [hidden]{display:none!important}
.nf-field[data-open=true]{background:#252e2b;border-color:#d9d4b4;outline:2px solid #d9d4b4;outline-offset:2px}
.nf-cell:nth-child(3n){border-right:0}
.nf-cell:nth-child(n+7){border-bottom:0}
.nf-stroke{stroke-width:5;opacity:1}
.nf-echo,.nf-under{opacity:0}
@media(prefers-reduced-motion:reduce){[data-toy],[data-toy] *{animation:none!important;transition:none!important}}