@import url("_assets/tokens.css");
@import url("_assets/rings.css");
* { box-sizing: border-box; }
body { --card: var(--sky-95); --text: var(--sky-05);
       min-height: 100vh; margin: 0; padding: 0; }
/* **頁は UI 幅、散文は 65ch。**Wiki の頁は散文だけではなく、表・レシピ図・
   infobox を持つ。design/system/spacing/layout.md §5.1 は散文を 65ch
   (「これを超えると目が次の行の頭へ戻れない」)、§5.2 は表やダッシュボードの
   ような非散文を 1280px と定めている。頁ぜんぶを 65ch に閉じ込めていたので、
   広い画面で表とレシピ図まで細く折り返していた(2026-08-19)。
   頁の器を `--ui-max-width` にして表とレシピ図に幅を渡し、**走る文章だけを
   `--prose-max-width` で止める**。Wikipedia・MDN と同じ構えである。 */
.wiki-page { width: 100%;
       max-width: calc(var(--ui-max-width) + 2 * var(--space-4));
       min-height: 100vh; margin-inline: auto; padding: var(--space-4); }
.wiki-content > p, .wiki-content > ul, .wiki-content > ol,
.wiki-content > dl, .wiki-content > blockquote { max-width: var(--prose-max-width); }
h1, h2, h3, h4, h5, h6 { color: var(--water-20); }
a { color: var(--water-35); text-underline-offset: 0.16em; }
.language-switch { display: flex; justify-content: flex-end; align-items: center;
         gap: var(--inline-hairline); margin-bottom: var(--stack-tight); }
.language-switch button { min-width: 0; min-height: var(--touch-target-min);
         padding: var(--inset-tight) var(--inset-base); border: 0;
         color: var(--water-35);
         background: transparent; font: inherit; cursor: pointer; }
.language-switch button[aria-pressed="true"] { color: var(--water-20);
         font-weight: var(--weight-medium); text-decoration: underline;
         text-underline-offset: var(--space-0); }
.wiki-header { display: grid; grid-template-columns: 112px minmax(0, 1fr);
         align-items: center; gap: var(--inline-relaxed);
         padding-bottom: var(--inset-relaxed);
         border-bottom: 1px solid var(--water-50); }
.wiki-header h1 { margin: 0; }
.wiki-content { padding-top: var(--stack-loose); }
.brand-home { display: block; color: var(--water-20); }
.brand-mark { display: block; width: 112px; aspect-ratio: 1;
         background: currentColor;
         -webkit-mask: url("_assets/marks/watermint-stacked-lockup-mask.svg") center / contain no-repeat;
         mask: url("_assets/marks/watermint-stacked-lockup-mask.svg") center / contain no-repeat;
         mask-mode: alpha; }
table { width: 100%; border-collapse: collapse; margin: var(--stack-relaxed) 0; }
td, th { padding: var(--inset-tight) var(--inset-base); text-align: left;
         vertical-align: top; }
th { color: var(--sky-05); background: var(--sky-95);
         border: 1px solid var(--water-50); }
td { border: 1px solid color-mix(in srgb, var(--water-50) 25%, transparent); }
.badge { display: inline-block; background: var(--kaki-35); color: var(--sky-95);
         padding: var(--space-0) var(--inset-tight); border-radius: 0.4em;
         font-size: var(--text-12); }
.crumbs { margin: 0 0 var(--stack-tight); color: var(--sky-35);
         font-size: var(--text-12); }
.infobox { float: right; margin: 0 0 var(--stack-relaxed) var(--inline-relaxed);
         width: auto; max-width: 22rem; font-size: var(--text-14); }
/* 頁を持たないもの(作物の種など)は、その名が出ている行へ飛ばす。
   infobox は頁の頭にあって画面が動かないので、**印を付けて分かるようにする**。 */
.infobox span[id] { scroll-margin-block: var(--space-6); }
.infobox span:target { outline: var(--space-0) solid var(--kaki-35);
         outline-offset: var(--space-0); font-weight: var(--weight-medium); }
.system-member .slot { flex: none; }
.system-member-name { overflow-wrap: anywhere; }
.system-member-summary { display: block; margin-top: var(--stack-tight);
  font-size: var(--text-14); }
.system-product { margin-block: var(--stack-relaxed); }
.system-product > h3 .dish-ref { display: inline-flex; align-items: center; }
.system-section-items { display: flex; flex-wrap: wrap;
  gap: var(--stack-relaxed); margin-block: var(--stack-base); }
.system-members { max-width: none !important; display: grid;
         grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
         gap: var(--stack-base) var(--inline-relaxed); padding: 0;
         list-style: none; }
.system-member { display: flex; align-items: center; gap: var(--inline-base);
         min-width: 0; padding: var(--inset-tight);
         border-bottom: 1px solid color-mix(in srgb, var(--water-50) 25%, transparent); }
code, pre, kbd { color: var(--mint-20); background: var(--sky-95); }
blockquote { margin-inline: 0; padding: var(--inset-base) var(--inset-relaxed);
         color: var(--water-20); background: var(--sky-95);
         border-left: var(--space-0) solid var(--water-50); }
footer { margin-top: var(--stack-section); padding-top: var(--inset-base);
         color: var(--sky-35); font-size: var(--text-12);
         border-top: 1px solid color-mix(in srgb, var(--water-50) 25%, transparent);
         display: flex; flex-wrap: wrap; justify-content: space-between;
         gap: var(--inline-base) var(--inline-relaxed); clear: both; }
footer p { margin: 0; }
@media (prefers-color-scheme: dark) {
  .brand-home { color: var(--sky-05); }
}
@media (min-width: 1024px) {
  .wiki-page { padding-inline: var(--space-6); }
}
@media (max-width: 639px) {
  .wiki-page { padding: var(--space-3); }
  .wiki-header { grid-template-columns: 80px minmax(0, 1fr); }
  .brand-mark { width: 80px; }
  .infobox { float: none; margin: var(--stack-base) 0; }
  .flow-step { grid-template-columns: var(--space-5) minmax(0, 1fr);
         gap: var(--inline-tight); }
  .flow-step::before { width: var(--space-5); height: var(--space-5); }
  .flow-step-body { padding: var(--inset-tight); }
  .system-members { grid-template-columns: 1fr; }
}

/* Graphical recipes (Minecraft-wiki style). Tinting works without any
   image processing: the texture layer is drawn once, then a color layer
   masked by the same texture multiplies over it. Animation strips show
   their first frame (background-size 100% auto clips the rest). */
.recipes { display: flex; flex-wrap: wrap; align-items: flex-start;
          gap: var(--stack-base) var(--inline-relaxed);
          margin: var(--stack-relaxed) 0; }
/* **レシピは中身の幅で置く。**頁を UI 幅へ広げたとき、一枚が横いっぱいに
   伸びて中がほとんど空になった(2026-08-19)。札として畳み、広い画面では
   横へ二枚三枚と並ぶようにする。Minecraft Wiki と同じ置き方である。 */
.recipe { flex: 0 1 auto; display: flex; align-items: center;
          gap: var(--inline-relaxed); flex-wrap: wrap;
          border: 1px solid color-mix(in srgb, var(--water-50) 25%, transparent);
          border-radius: 6px;
          background: color-mix(in srgb, var(--sky-95) 92%, var(--sky-80));
          padding: var(--inset-base); }
.recipes-uses { display: grid;
          grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr));
          align-items: stretch; }
.recipes-uses > .recipe { min-width: 0; box-sizing: border-box; }
.recipes-uses .rio { min-width: 0; }
.recipes-uses .rowslots { flex-wrap: wrap; }
.recipes-uses .rowslots > .slot { flex: none; }
.recipe .stn { min-width: 6.5em; font-size: 0.9em; color: var(--sky-20); }
.recipe .rio, .recipe .rout { display: flex; align-items: center;
          gap: var(--inline-relaxed); flex-wrap: wrap; }
.recipe .rout { gap: var(--inline-hairline); }
.grid { display: grid; grid-template-columns: repeat(3, 38px); }
.rowslots { display: flex; }
.slot { position: relative; width: 38px; height: 38px;
        box-sizing: border-box; display: inline-block; background: #8b8b8b;
        border: 2px solid; border-color: #373737 #fff #fff #373737;
        text-decoration: none; }
.slot .ly, .slot .alts, .slot .alt { position: absolute; inset: 0; }
.slot .ly { isolation: isolate; }
.slot .tx, .slot .tc { position: absolute; inset: 3px;
        background-repeat: no-repeat;
        background-size: 100% auto; image-rendering: pixelated; }
.slot .tc { -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
        -webkit-mask-size: 100% auto; mask-size: 100% auto;
        mix-blend-mode: multiply; }
.slot .lbl { position: absolute; inset: 2px; display: flex;
        align-items: center; justify-content: center; text-align: center;
        font-size: 0.56em; line-height: 1.15; color: #fff;
        text-shadow: 1px 1px 0 #3f3f3f; overflow: hidden;
        word-break: break-word; }
.slot .ct { position: absolute; right: 2px; bottom: -1px;
        font-size: 0.74em; font-weight: bold; color: #fff;
        text-shadow: 1px 1px 0 #3f3f3f; }
.slot .alt { opacity: 0; animation-timing-function: steps(1);
        animation-iteration-count: infinite; }
.alt.c2 { animation-name: cyc2; animation-duration: 3.2s; }
.alt.c3 { animation-name: cyc3; animation-duration: 4.8s; }
.alt.c4 { animation-name: cyc4; animation-duration: 6.4s; }
.alt.c5 { animation-name: cyc5; animation-duration: 8s; }
.alt.c6 { animation-name: cyc6; animation-duration: 9.6s; }
.alt.c7 { animation-name: cyc7; animation-duration: 11.2s; }
.alt.c8 { animation-name: cyc8; animation-duration: 12.8s; }
@keyframes cyc2 { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes cyc3 { 0% { opacity: 1; } 33.34% { opacity: 0; } }
@keyframes cyc4 { 0% { opacity: 1; } 25% { opacity: 0; } }
@keyframes cyc5 { 0% { opacity: 1; } 20% { opacity: 0; } }
@keyframes cyc6 { 0% { opacity: 1; } 16.67% { opacity: 0; } }
@keyframes cyc7 { 0% { opacity: 1; } 14.29% { opacity: 0; } }
@keyframes cyc8 { 0% { opacity: 1; } 12.5% { opacity: 0; } }
.recipe .arr { display: inline-flex; flex-direction: column;
        align-items: center; min-width: 3em; }
.recipe .arr .ar { font-size: 1.5em; color: var(--sky-35); line-height: 1; }
.recipe .arr em { font-style: normal; font-size: 0.78em; color: var(--sky-35); }
.recipe .plus { font-size: 1.2em; color: var(--sky-35);
        margin-inline: var(--inline-hairline); }

/* Advancements. The appendix nests them so the parent-child order of the
   in-game advancement screen is readable; entry pages reuse the same card. */
.advs { display: flex; flex-wrap: wrap; align-items: flex-start;
        gap: var(--stack-base) var(--inline-relaxed);
        margin: var(--stack-relaxed) 0; }
.adv { flex: 0 1 auto; display: flex; align-items: flex-start;
       gap: var(--inline-relaxed); max-width: 34em;
       border: 1px solid #ddd; border-radius: 6px; background: #f7f6f2;
       padding: var(--inset-base); }
.adv .slot { flex: none; }
.adv .advtext p { margin: 0; }
.adv .advframe { font-size: 0.78em; color: #555;
        margin-inline-start: var(--inline-base); }
.adv .advxp { font-size: 0.85em; color: #555; }
.adv .advtargets { font-size: 0.85em; margin-block-start: var(--stack-base); }
.adv .advtargets .advcount { color: #555; }
.adv .advtargets ul { list-style: none; display: flex; flex-wrap: wrap;
        gap: 0 var(--inline-base); padding-inline-start: 0;
        margin-block-start: var(--stack-base); }
.advtree, .advtree ul { list-style: none; padding-inline-start: 0;
        margin: 0; }
.advtree li { margin-block: var(--stack-base); }
.advtree ul { margin-inline-start: var(--inline-relaxed);
        padding-inline-start: var(--inline-relaxed);
        border-inline-start: 2px solid #ddd; }
.dish-group { margin-block: var(--stack-section); }
.dish-group h2 { display: flex; align-items: center;
        margin-block-end: var(--stack-base); }
.dish-group h2 .dish-ref-name { font-size: inherit; }
.dish-table td { vertical-align: middle; }
.dish-ref { display: inline-flex; align-items: center;
        gap: var(--inline-tight); min-width: 0; }
.dish-ref .slot { flex: none; }
.dish-ref-name { overflow-wrap: anywhere; }
.dish-materials { display: flex; flex-wrap: wrap;
        gap: var(--inline-tight) var(--inline-relaxed); }
@media (max-width: 639px) {
  .dish-table, .dish-table tbody { display: block; }
  .dish-table tr { display: block;
          margin-block: var(--stack-base); padding: var(--inset-tight);
          border: 1px solid color-mix(in srgb, var(--water-50) 35%, transparent); }
  .dish-table tr:first-child { display: none; }
  .dish-table td { display: block; min-width: 0;
          padding: var(--inset-tight); border: 0; }
  .dish-table td::before { content: attr(data-label); display: block;
          margin-block-end: var(--stack-tight); color: var(--sky-35);
          font-size: var(--text-12); font-weight: var(--weight-medium); }
}

.crafting-flow { margin-block: var(--stack-relaxed); }
.crafting-label { display: block; font-size: 0.8em; color: var(--sky-20);
  margin-bottom: var(--stack-tight); }
.crafting-flow .dish-ref { min-width: 0; }
.crafting-flow .dish-ref-name { overflow-wrap: anywhere; }
.crafting-flow .slot { flex: none; }

.crafting-chart-scroll { overflow-x: auto; margin-block: var(--stack-relaxed);
  border: 1px solid var(--sky-80); border-radius: 8px; padding: var(--inset-base); }
.crafting-chart { --crafting-arrow-size: 14px; position: relative;
  display: flex; align-items: center; gap: 112px; width: max-content;
  margin-inline: auto; padding: 24px; }
.crafting-chart-level { display: flex; flex-direction: column;
  justify-content: center; gap: 40px; width: 280px; position: relative; z-index: 1; }
.crafting-chart-branch { width: 280px; flex: none; box-sizing: border-box;
  border: 2px solid var(--water-50); border-radius: 8px; background: var(--sky-95); }
.crafting-chart-equipment { padding: var(--inset-base);
  border-bottom: 1px solid var(--water-50); }
.crafting-chart-step-title { display: block; font-weight: 600;
  margin-bottom: var(--stack-tight); }
.crafting-chart-materials { padding: var(--inset-base); }
.crafting-chart-inputs { list-style: none; padding: 0; margin: 8px 0 0;
  display: grid; gap: var(--stack-tight); }
.crafting-chart-inputs li { min-width: 0; }
.crafting-chart-products { display: grid; gap: var(--stack-tight);
  padding: var(--inset-base); border-top: 1px solid var(--water-50); }
.crafting-chart-product { min-width: 0; }
.crafting-chart-product .dish-ref { display: inline-flex; flex-wrap: wrap; }
.crafting-chart-edges { z-index: 2; position: absolute; inset: 0; pointer-events: none;
  overflow: visible; width: 100%; height: 100%; }
.crafting-chart-edges path { fill: none; stroke: var(--water-35); stroke-width: 2; }
.crafting-chart-edges marker path { fill: var(--water-35); stroke: none; }