/* The look of 封じ目: design tokens only (css/theme.css lists them) + the few game parts (all colours paired with their text colour, U30). */
[data-theme~="fuujime"] {
  --gf-accent: #9a3a28;
  --gf-accent-hover: #b4452f;
  --gf-accent-ink: #fff4e8;
  --gf-radius: 6px;
}

/* ward chip in the top-left stack */
.fj-chip { background: var(--gf-panel, #efe6d2); color: var(--gf-text, #241c12); border: 1px solid var(--gf-border, #b9a98a); border-radius: var(--gf-radius, 6px); padding: 6px 10px; font-size: var(--gf-text-sm, 13px); line-height: 1.35; max-width: var(--gf-hud-w, 320px); opacity: .92; backdrop-filter: blur(2px); }
.fj-chip .fj-l1 { font-weight: 700; }
.fj-chip[data-state="in"] { border-color: var(--gf-ok, #2a6a3a); box-shadow: inset 4px 0 0 var(--gf-ok, #2a6a3a); }
.fj-chip[data-state="out"] { box-shadow: inset 4px 0 0 var(--gf-border-strong, #8a7a5a); }

/* hold-to-paste ring near the crosshair */
.fj-hold { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #f4ead2; pointer-events: none; z-index: 30; }
.fj-hold[hidden] { display: none; }

/* the paste panel: bottom centre; the touch controls and the thought band step aside while pasting */
.fj-paste { position: fixed; left: 50%; transform: translateX(-50%); bottom: max(12px, env(safe-area-inset-bottom)); width: min(620px, calc(100vw - 24px)); z-index: 40; background: var(--gf-surface, #f4ecd8); color: var(--gf-text, #241c12); border: 1px solid var(--gf-border-strong, #8a7a5a); border-radius: var(--gf-radius-lg, 10px); padding: 10px 14px 12px; box-shadow: var(--gf-shadow, 0 6px 24px rgba(0,0,0,.45)); }
.fj-paste[hidden] { display: none; }
.fj-steps { display: flex; gap: 8px; list-style: none; margin: 0 0 6px; padding: 0; }
.fj-steps li { flex: 1; text-align: center; padding: 4px 6px; border-radius: 999px; background: var(--gf-surface-2, #e6dcc2); color: var(--gf-text-dim, #5a4c38); font-size: 13px; font-weight: 600; }
.fj-steps li b { display: inline-block; min-width: 1.4em; }
.fj-steps li.on { background: var(--gf-accent, #9a3a28); color: var(--gf-accent-ink, #fff4e8); }
.fj-steps li.done { background: var(--gf-accent-soft, #d9c1a0); color: var(--gf-text, #241c12); }
.fj-ps-text { margin: 4px 0 6px; font-size: 15px; line-height: 1.5; }
.fj-ps-meter { position: relative; height: 10px; background: var(--gf-surface-2, #e6dcc2); border: 1px solid var(--gf-border, #b9a98a); border-radius: 6px; overflow: hidden; margin-bottom: 8px;  color: var(--gf-text, #241c12); /* pair-ok: no text */ }
.fj-ps-meter[hidden] { display: none; }
.fj-ps-meter i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--v, 0%); background: var(--gf-accent, #9a3a28); transition: width .12s;  color: var(--gf-accent-ink, #fff); /* pair-ok */ }
.fj-ps-meter u { position: absolute; top: -2px; bottom: -2px; left: var(--need, 50%); width: 2px; background: var(--gf-text, #241c12); text-decoration: none;  color: var(--gf-text-dim, #222); /* pair-ok */ }
.fj-ps-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.fj-ps-btns .btn { min-height: var(--gf-hit, 44px); min-width: 96px; }
.fj-ps-btns [hidden] { display: none; }
body.fj-pasting #touch { display: none; }
body.fj-pasting #say, body.fj-pasting #crosshair, body.fj-pasting #prompt, body.fj-pasting #hud-left { visibility: hidden; }
body.fj-pasting #view { touch-action: none; cursor: crosshair; }
@media (max-height: 480px) { .fj-paste { padding: 6px 10px 8px; width: min(560px, calc(100vw - 24px)); } .fj-steps { margin-bottom: 2px; } .fj-ps-text { margin: 2px 0 4px; font-size: 13px; line-height: 1.35; } .fj-ps-meter { margin-bottom: 4px; } }

/* the trace window */
.fj-trace { display: flex; flex-direction: column; height: 100%; min-height: 0; gap: 8px; }
.fj-tsteps { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; flex: none; }
.fj-tsteps li { flex: 1; text-align: center; padding: 4px 6px; border-radius: 999px; background: var(--gf-surface-2, #e6dcc2); color: var(--gf-text-dim, #5a4c38); font-size: 13px; font-weight: 600; }
.fj-tsteps li.on { background: var(--gf-accent, #9a3a28); color: var(--gf-accent-ink, #fff4e8); }
.fj-tsteps li.done { background: var(--gf-accent-soft, #d9c1a0); color: var(--gf-text, #241c12); }
.fj-tmsg { margin: 0; flex: none; min-height: 2.8em; font-size: 15px; line-height: 1.5; color: var(--gf-text, #241c12); }
.fj-tbox { flex: 1 1 auto; min-height: 180px; position: relative; background: #17130f; border-radius: var(--gf-radius, 6px); overflow: hidden;  color: #f4ead2; /* pair-ok: canvas */ }
.fj-tcanvas { display: block; touch-action: none; cursor: crosshair; }

/* black veil of the fall (death): in-world, dark, no red */
.fj-veil { position: fixed; inset: 0; background: #000; opacity: 0; transition: opacity .6s; z-index: 80; pointer-events: none;  color: #fff; /* pair-ok: no text */ }
.fj-veil.on { opacity: 1; }

/* the map layers (19章) */
.fj-ring { fill: rgba(235,238,225,.28); stroke: var(--gf-text, #241c12); stroke-width: 1.4; stroke-dasharray: 5 4; }
.fj-ring--shufu { stroke: #9a3a28; stroke-dasharray: 2 3; fill: rgba(190,110,90,.22); }
.fj-ring--master { stroke-width: 2.2; }
.fj-paper { fill: var(--gf-text, #241c12); stroke: var(--gf-surface, #fff); stroke-width: 1; }
.fj-paper--broken { fill: none; stroke: var(--gf-danger, #a03020); }
.fj-core path { fill: var(--gf-text, #241c12); stroke: var(--gf-surface, #fff); stroke-width: 1.5; }
.fj-core--done path { fill: none; stroke: var(--gf-ok, #2a6a3a); stroke-width: 3; }
.fj-unc { fill: rgba(150,40,30,.10); stroke: #8a2a20; stroke-width: 1; stroke-dasharray: 2 3; }
.fj-ghost circle { fill: var(--gf-surface, #fff); stroke: #8a2a20; stroke-width: 2; }
.fj-ghost path { fill: none; stroke: #8a2a20; stroke-width: 1.6; }
.fj-maplegend { margin: 6px 4px 0; font-size: 12px; line-height: 1.4; color: var(--gf-text, #241c12); }

/* the end-of-beta card */
.fj-beta { margin: 14px 0; padding: 10px 14px; background: var(--gf-note-bg, #efe3c6); color: var(--gf-note-text, #241c12); border: 1px solid var(--gf-border-strong, #8a7a5a); border-radius: var(--gf-radius, 6px); }
.fj-beta h3 { margin: 0 0 4px; font-size: 18px; }
.fj-beta p { margin: 0; }

/* short landscape phones: the trace window keeps its room for the canvas */
@media (max-height: 480px) { .fj-trace { gap: 4px; } .fj-tsteps li { padding: 2px 6px; font-size: 12px; } .fj-tmsg { min-height: 0; font-size: 13px; line-height: 1.35; } .fj-tbox { min-height: 150px; } }

/* the title: dark, like the house (the windows stay paper) */
#title { background: radial-gradient(ellipse at 50% 40%, #2a1e14 0%, #0b0806 70%); color: #efe3c8; }
#title .gf-title-box { background: rgba(20, 14, 10, .72); color: #efe3c8; border: 1px solid rgba(190, 160, 110, .35); }
#title h1, #title .gf-sub, #title .gf-kicker, #title .gf-note, #title .gf-info { color: #efe3c8; }
#title .gf-note { display: inline-block; margin-top: 10px; padding: 6px 12px; background: #9a3a28; color: #fff4e8; border-radius: 999px; font-weight: 700; }
#title .rn-link { color: #d9c9a2; }

.fj-endtext { margin: 8px 0; line-height: 1.7; }
#title .gf-ver { color: #d9c9a2; }