/* 式神リーグ — 任天堂の画面のように。
 *
 * 前は「ムシキングの筐体」だった。焦げ茶の地に金の彫り枠、大人のアニメ調の絵。
 * 任天堂の画面を並べて見比べると、違いは 3 つ。**明るい**・**丸い**・**太い**。
 * 生成りの紙のような地に、白い板が乗り、太い墨の縁と丸い角で「押せる物」が
 * 一目で分かる。色は属性の 5 色と朱だけを鮮やかに使い、他は墨と紙。
 *
 * 絵は描かない (画像 file が無い)。式神は kami.js がコードで組む形代で、
 * 図も印も SVG。だから CSS の url() は 0 で、CSP は 'self' のまま。
 *
 * 動きは一番下の「手応え」の層にまとめてある。舞台 (tatakai.js) が出来事ごとに
 * class を付け替え、ここで定義した @keyframes が動く。prefers-reduced-motion で
 * 全部止まる。
 *
 * 色の床 (tests/test_shirushi.py): 地 (--kami) と字 (--sumi) の比 7:1 以上、
 * 属性の字色 (--*-koi) は地に対して 4.5:1 以上。
 */
:root {
  --kami:  #fff8e8;   /* 地。生成りの紙 */
  --shiro: #ffffff;   /* 板 */
  --sumi:  #2b2420;   /* 字と縁。墨 */
  --usu:   #6f645b;   /* 薄い字 */
  --waku:  #e6dcc8;   /* 細い罫 */
  --shu:   #e8452a;   /* 朱。決め手・警告・今いる所 */
  --shu-koi: #b8371a;
  --ai:    #1b63a8;   /* 理由・返事の字 */
  --kin:   #ffc531;   /* 目盛りの満ちた所 */
  --kin2:  #ffd86b;
  --midori: #5bc86b;
  /* 属性。iro は塗り、koi は字 (kami.js の IRO と同じ値) */
  --hi: #ff6a3d;     --hi-koi: #b8371a;
  --mizu: #3fa9f5;   --mizu-koi: #1b63a8;
  --tsuchi: #c98f52; --tsuchi-koi: #7a4f22;
  --kin-zoku: #ffc531; --kin-koi: #8f6600;
  /* 分かれ道の行の地。**金そのものだと、その上に乗る字 (kin-koi 3.3:1 / shu-koi 3.7:1)
     が読めなくなる。** 薄い金なら 4.5:1 を全部越える (tests/test_furikaeri.py が見る) */
  --kin-usu: #fff3d0;
  --ki: #5bc86b;     --ki-koi: #237a33;
  --kado: 16px;      /* 板の角 */
  --kado-ko: 10px;   /* 押す物の角 */
  --fuchi: 3px;      /* 縁の太さ */
  --kage: 0 4px 0 var(--sumi);
  --aka: var(--shu); --ao: var(--ai);
}
* { box-sizing: border-box; }
html { background: var(--kami); }
body {
  margin: 0; color: var(--sumi); background: var(--kami);
  /* 太くて丸いゴシック。無ければ普通のゴシックに落ちる (外の font は読まない) */
  font-family: "Hiragino Maru Gothic ProN", "Hiragino Sans", "BIZ UDPGothic",
               "Yu Gothic UI", "Meiryo", "Noto Sans JP", system-ui, sans-serif;
  font-size: 16px; line-height: 1.7;
}
h1, h2, h3, b, th, .butai-na, .shina-na, .haichi-nou-ne, .fuda-tsuyosa b { font-weight: 900; }
main { max-width: 56rem; margin: 0 auto; padding: 1rem 1rem 3rem; }
.men.kakusu, .kakusu { display: none; }
.sode { color: var(--usu); font-size: .9rem; margin: .2rem 0 1rem; }
code { background: var(--shiro); border: 2px solid var(--waku); border-radius: 6px;
       padding: .05rem .4rem; font-size: .9rem; word-break: break-all; }
ul { list-style: none; padding: 0; margin: 0; }

/* ---- 板と押す物 ------------------------------------------------------ */
/* 板は白く、太い墨の縁と丸い角、下に落ちる影。**平らな箱は物に見えない** */
.ita, #fuda, #saisei, #haichi, #mimoto, #tsukuru-kata, .seiseki, .jissoku,
#ichiba-ichiran > li, #shiai-ichiran > li, #hiroba-ichiran > li, .butai-gawa {
  background: var(--shiro); border: var(--fuchi) solid var(--sumi);
  border-radius: var(--kado); box-shadow: var(--kage);
}
/* 押す物は板より小さく、押すと沈む (影が消えて下へ動く) */
button, .haichi-fuda {
  font: inherit; font-weight: 800; color: var(--sumi); cursor: pointer;
  background: var(--shiro); border: var(--fuchi) solid var(--sumi);
  border-radius: var(--kado-ko); padding: .35rem 1rem; box-shadow: var(--kage);
  transition: transform .06s, box-shadow .06s;
}
button:active:not(:disabled), .haichi-fuda:active:not(:disabled) {
  transform: translateY(4px); box-shadow: none;
}
button:hover:not(:disabled), .haichi-fuda:hover:not(:disabled) { background: var(--kami); }
button:disabled, .haichi-fuda:disabled {
  cursor: not-allowed; opacity: .4; box-shadow: none; border-style: dashed;
}
/* 主役の押す物は朱 */
button.omo { background: var(--shu); color: var(--shiro); }
button.omo:hover:not(:disabled) { background: var(--shu-koi); }

/* ---- 見出し ---------------------------------------------------------- */
header {
  position: sticky; top: 0; z-index: 5; background: var(--shiro);
  border-bottom: var(--fuchi) solid var(--sumi); padding: .6rem 1rem .5rem;
}
.daimei { display: flex; align-items: center; gap: .6rem; max-width: 56rem; margin: 0 auto; }
h1 { margin: 0; font-size: 1.6rem; letter-spacing: .12em; flex: 1; }
/* 形代が並んで立っている。奥へ行くほど薄い */
#midashi-e { display: flex; align-items: flex-end; gap: .1rem; pointer-events: none; }
.midashi-hito { display: flex; line-height: 0; }
#oto-kirikae { padding: .2rem .55rem; font-size: 1.05rem; line-height: 1.2; }
#oto-kirikae.kieteru { opacity: .5; }
nav { display: flex; gap: .4rem; flex-wrap: wrap; max-width: 56rem; margin: .55rem auto 0; }
nav button { padding: .3rem 1.05rem; letter-spacing: .06em; }
nav button.ima { background: var(--sumi); color: var(--kami); }
nav button.ima:hover { background: var(--sumi); }

/* 面の名。銘板でなく、大きな丸い字 */
.men > h2.meiban { margin: .6rem 0 .3rem; font-size: 1.5rem; letter-spacing: .2em; }
/* 案内は吹き出し。**説明文でなく喋っている**ように見せる (1 行だけ) */
.men > .sode:first-of-type, #haichi > p.sode {
  position: relative; color: var(--sumi); font-size: .95rem;
  background: var(--shiro); border: var(--fuchi) solid var(--sumi);
  border-radius: var(--kado); padding: .55rem .9rem; margin: 0 0 1rem;
}
.men > .sode:first-of-type::after, #haichi > p.sode::after {
  content: ""; position: absolute; left: 1.6rem; bottom: -13px;
  border: 8px solid transparent; border-top: 8px solid var(--sumi); border-bottom: 0;
}
.men > .sode:first-of-type::before, #haichi > p.sode::before {
  content: ""; position: absolute; left: calc(1.6rem + 2px); bottom: -7px; z-index: 1;
  border: 6px solid transparent; border-top: 6px solid var(--shiro); border-bottom: 0;
}
/* 見本を見ている印 */
main > p.sode { text-align: center; font-size: .8rem; }

/* ---- 表 (順位) ------------------------------------------------------ */
.hyou-ita { overflow: hidden; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { padding: .5rem .55rem; border-bottom: 2px solid var(--waku); text-align: right; }
th:nth-child(-n+3), td:nth-child(-n+3) { text-align: left; }
th { background: var(--sumi); color: var(--kami); font-size: .8rem; letter-spacing: .06em;
     border-bottom: 0; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--kami); }
tbody tr:last-child td { border-bottom: 0; }
td.jun { color: var(--usu); font-variant-numeric: tabular-nums; }
td.sougou { font-weight: 900; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
/* 字に使う朱は --shu-koi (地と板の上で 4.5:1 以上)。--shu は塗り・枠・帯にだけ使う */
.tokui { color: var(--shu-koi); font-weight: 900; }
.nigate { color: var(--usu); }
th.shumoku-th { white-space: nowrap; }
th.shumoku-th .shirushi { vertical-align: -.15em; margin-right: .3em; }
.fui { display: flex; gap: 1rem; align-items: center; margin-bottom: .8rem;
       font-size: .9rem; color: var(--usu); }
select, input[type="number"], input[type="text"], textarea, #hajimeru-kata input, #tsukuru-kata textarea {
  font: inherit; color: var(--sumi); background: var(--shiro);
  border: var(--fuchi) solid var(--sumi); border-radius: var(--kado-ko); padding: .3rem .5rem;
}
input[type="checkbox"] { accent-color: var(--shu); width: 1.1rem; height: 1.1rem; }

/* しるし (紋) は属性の色で。字より先に目に入る */
.shirushi { vertical-align: -0.15em; flex: none; }
td.zoku, .shina-na, .fuda-shumoku, .midashi { display: flex; align-items: center; gap: .35em; }
.zoku-hi .shirushi { color: var(--hi-koi); }
.zoku-mizu .shirushi { color: var(--mizu-koi); }
.zoku-tsuchi .shirushi { color: var(--tsuchi-koi); }
.zoku-kin .shirushi { color: var(--kin-koi); }
.zoku-ki .shirushi { color: var(--ki-koi); }
.fuda-shumoku .shirushi { color: var(--shu-koi); }

/* ---- 一覧 (試合・広場・市場) ----------------------------------------- */
#shiai-ichiran > li, #hiroba-ichiran > li, #ichiba-ichiran > li {
  margin-bottom: .6rem; padding: .75rem .9rem;
}
#shiai-ichiran li { cursor: pointer; display: flex; gap: .8rem; align-items: baseline; flex-wrap: wrap; }
#shiai-ichiran li:hover, #ichiba-ichiran > li:hover { background: var(--kami); }
.fuda-shumoku { color: var(--usu); font-size: .85rem; min-width: 4.5em; }
.wake { color: var(--usu); font-size: .85rem; }
.kaita { font-size: .9rem; color: var(--ai); }

/* 広場 */
#hiroba-ichiran > li { position: relative; }
.moto { display: flex; gap: .6rem; align-items: baseline; }
.kaeshi { margin: .5rem 0 0 1.2rem; padding: .4rem .7rem; font-size: .92rem;
          background: var(--kami); border-radius: var(--kado-ko); }
.kaeshi .kaita { color: var(--usu); }
li.onedari { border-color: var(--shu); }
.fuda-kind { font-size: .72rem; color: var(--usu); border: 2px solid var(--waku);
             padding: 0 .4rem; border-radius: 999px; white-space: nowrap; font-weight: 800; }
li.onedari .fuda-kind { color: var(--shiro); background: var(--shu); border-color: var(--shu); }
.nashi { color: var(--usu); font-size: .9rem; padding: 1rem .2rem; }

/* 市場 */
#ichiba-ichiran li { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; }
.shina-na { font-size: 1.05rem; }
.shina-ne { font-size: 1.1rem; color: var(--shu-koi); font-weight: 900; text-align: right; }
.shina-uri { grid-column: 1 / -1; color: var(--usu); font-size: .9rem; }
.shina-sei { grid-column: 1 / -1; font-size: .88rem; display: flex; gap: .6rem;
             align-items: center; flex-wrap: wrap; }
.shina-sei button { font-size: .85rem; padding: .2rem .7rem; }
.shina-tokui { margin-left: .5rem; font-size: .78rem; color: var(--shu-koi); font-weight: 900; }
.au { color: var(--ki-koi); font-weight: 800; }
.awanai { color: var(--shu-koi); font-weight: 800; }
.furui { color: var(--usu); }

/* ---- 覆い (札・リプレイ) --------------------------------------------- */
#fuda-ooi, #saisei-ooi {
  position: fixed; inset: 0; background: rgba(43, 36, 32, .55);
  display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 10;
}
#fuda-ooi.kakusu, #saisei-ooi.kakusu { display: none; }
#fuda, #saisei { padding: 1.1rem; max-width: 42rem; width: 100%; max-height: 90vh; overflow: auto; }
#fuda h2, #saisei h2 { margin: 0 0 .2rem; font-size: 1.25rem; }
.nou { display: flex; gap: 1.2rem; font-size: .9rem; color: var(--usu); margin: .4rem 0 1rem; }
.kokoroe { font-size: .88rem; border-left: 3px solid var(--waku); padding-left: .7rem; }
.kokoroe li { padding: .15rem 0; display: flex; align-items: baseline; gap: .3em; flex-wrap: wrap; }
.itsu { color: var(--usu); }
.iu { color: var(--ai); }
.obi { height: .7rem; border: 2px solid var(--sumi); border-radius: 6px; overflow: hidden;
       margin: .2rem 0 .6rem; background: var(--kami); }
.obi > i { display: block; height: 100%; background: var(--mizu); transition: width .18s; }
.obi.aka > i { background: var(--shu); }
#te { font-size: .85rem; max-height: 40vh; overflow: auto; }
#te li { padding: .2rem 0; border-bottom: 2px dotted var(--waku); }
#te .riyuu { color: var(--ai); }
.sousa { display: flex; gap: .6rem; align-items: center; margin: .8rem 0; flex-wrap: wrap; }

/* 券面 (札の頭)。**まず絵があって、脇に数字が並ぶ** */
.fuda-atama { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: .8rem;
              background: var(--kami); border-radius: var(--kado); padding: .8rem; }
.fuda-na { min-width: 0; flex: 1; }
.fuda-na h2 { margin: 0 0 .2rem; display: flex; align-items: center; gap: .35rem; }
.fuda-na .sode { margin: 0; }
.fuda-kata { margin: 0 0 .1rem; font-size: .75rem; letter-spacing: .14em; color: var(--shu-koi); font-weight: 900; }
.fuda-tsuyosa { display: flex; align-items: baseline; gap: .5rem; margin: .1rem 0 .3rem; }
.fuda-tsuyosa-na { font-size: .7rem; letter-spacing: .12em; color: var(--usu); }
.fuda-tsuyosa b { font-size: 2.6rem; line-height: 1; font-variant-numeric: tabular-nums;
                  color: var(--shiro);
                  text-shadow: 2px 0 0 var(--sumi), -2px 0 0 var(--sumi), 0 2px 0 var(--sumi),
                               0 -2px 0 var(--sumi), 2px 2px 0 var(--sumi), -2px 2px 0 var(--sumi),
                               2px -2px 0 var(--sumi), -2px -2px 0 var(--sumi), 0 5px 0 var(--sumi); }
.fuda-seikaku { font-size: .78rem; font-weight: 900; padding: .1rem .6rem; border-radius: 999px;
                background: var(--sumi); color: var(--kami); letter-spacing: .06em; }
.fuda-zu { margin: .3rem 0 .6rem; }
.haichi-hitokoto { margin: .2rem 0 0; font-size: .8rem; color: var(--usu); }
.haichi-keikoku-fuda { margin: .3rem 0 0; padding: .25rem .6rem; font-size: .8rem;
                       border-left: 4px solid var(--kin); background: var(--kami); border-radius: 6px; }
.haichi-zu { display: block; max-width: 100%; height: auto; margin: .4rem 0; }
.kumo-hako { display: flex; gap: .5rem; flex-wrap: wrap; margin: .4rem 0 .8rem; }
.kumo-hito p { margin: 0 0 -.4rem; letter-spacing: .08em; }
.kumo { display: block; max-width: 100%; height: auto; }
.jissoku { margin-top: 1rem; padding: .7rem .9rem; box-shadow: none; }
.jissoku h3 { margin: 0 0 .3rem; font-size: .9rem; letter-spacing: .1em; }
.jissoku b { font-size: 1.5rem; color: var(--shu-koi); font-variant-numeric: tabular-nums; }
.jissoku p { margin: .1rem 0; }
.jissoku.tachiai { margin-top: .6rem; }

/* 成績表 */
.seiseki { margin-top: 1rem; padding: .8rem .9rem; box-shadow: none; }
.seiseki h3 { margin: 0 0 .5rem; font-size: .95rem; letter-spacing: .08em; }
.seiseki table { font-size: .9rem; }
.seiseki th { background: none; color: var(--usu); font-weight: 700; font-size: .8rem; }
.seiseki .kazu { text-align: right; font-variant-numeric: tabular-nums; }
.seiseki .ue { font-weight: 900; }
.seiseki td.kazu:not(.ue) { opacity: .55; }
.seiseki tr.kime td { background: var(--kami); }
.seiseki tr.kime .ue { color: var(--shu-koi); }
.shirushi-kime { margin-left: .5rem; padding: .05rem .45rem; font-size: .7rem; letter-spacing: .06em;
                 border-radius: 999px; background: var(--shu); color: var(--shiro); font-weight: 900; }

/* ---- 作る ------------------------------------------------------------ */
#haichi { padding: .9rem 1rem; margin: 1rem 0; position: relative; }
#haichi h3 { margin: 0 0 .7rem; font-size: 1rem; letter-spacing: .1em; }
/* 組んだ姿。右上に立つ。置くたびに変わる */
#haichi-sugata { float: right; width: 132px; margin: -.5rem -.3rem .5rem .8rem; text-align: center; }
#haichi-sugata .sode { margin: 0; font-size: .75rem; }
.haichi-dan { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; flex-wrap: wrap; }
.haichi-na { width: 3.6rem; flex: none; font-size: .8rem; color: var(--usu); letter-spacing: .05em; font-weight: 800; }
.haichi-tana, .haichi-za { display: flex; gap: .4rem; flex-wrap: wrap; }
.haichi-fuda { display: flex; flex-direction: column; align-items: center; gap: .05rem;
               padding: .35rem .7rem; line-height: 1.25; }
.haichi-fuda.erabu { background: var(--sumi); color: var(--kami); }
.haichi-fuda.erabu:hover:not(:disabled) { background: var(--sumi); }
.haichi-fuda-na { font-size: .95rem; }
.haichi-fuda-gb { font-size: .68rem; opacity: .75; font-weight: 700; }
.haichi-fuda[draggable="true"] { cursor: grab; }
.haichi-fuda.tsukanda { opacity: .4; }
.haichi-seki { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .3rem .2rem .6rem;
               border: var(--fuchi) solid var(--sumi); border-radius: 999px; font-size: .9rem;
               font-weight: 800; background: var(--shiro); }
.haichi-seki.tsutsumi { background: var(--kin2); }
.haichi-tsutsumi-ji { font-size: .68rem; opacity: .7; }
.haichi-hazusu { border: 0; background: transparent; box-shadow: none; padding: 0 .3rem; opacity: .6; }
.haichi-hazusu:hover { opacity: 1; background: transparent; }
.haichi-za { min-height: 2.6rem; align-items: center; padding: .3rem .5rem; border-radius: var(--kado-ko);
             border: 3px dashed var(--waku); flex: 1; }
.haichi-za.ukeru { border-color: var(--shu); background: var(--kami); }
.haichi-hari { flex: 1; min-width: 8rem; height: .8rem; border: 2px solid var(--sumi);
               border-radius: 6px; overflow: hidden; background: var(--kami); }
.haichi-hari i { display: block; height: 100%; background: var(--kin); transition: width .18s; }
.haichi-hari i.afureru { background: var(--shu); }
.haichi-nou { display: flex; gap: 1.2rem; margin: .7rem 0 .3rem; flex-wrap: wrap; }
.haichi-nou-hito { display: flex; flex-direction: column; }
.haichi-nou-na { font-size: .7rem; color: var(--usu); font-weight: 800; }
.haichi-nou-ne { font-size: 1.5rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
#haichi-keikoku { list-style: none; padding: 0; margin: .5rem 0 .3rem; font-size: .85rem; }
#haichi-keikoku li { padding: .3rem .6rem; margin-bottom: .25rem; border-radius: 6px;
                     border-left: 4px solid var(--waku); background: var(--kami); }
#haichi-keikoku .haichi-fubi { border-left-color: var(--shu); }
#haichi-keikoku .haichi-keikoku { border-left-color: var(--kin); }
#haichi-de .haichi-zu { margin-bottom: .2rem; }
#haichi-de .haichi-hitokoto { color: var(--sumi); font-weight: 800; font-size: .9rem; }
.tebiki { margin: .1rem 0 .7rem 3.6rem; }
.tebiki-zu { display: block; max-width: 100%; height: auto; color: var(--usu); overflow: visible; }

#mimoto { padding: .9rem; margin-bottom: 1rem; }
#hajimeru-kata { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; }
#hajimeru-kata label { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; }
#aikotoba-hako { border-left: 4px solid var(--shu); padding-left: .8rem; margin-top: .8rem; }
#tsukuru-kata { display: flex; flex-direction: column; gap: .8rem; padding: .9rem; }
#tsukuru-kata label { display: flex; flex-direction: column; gap: .2rem; font-size: .9rem; font-weight: 800; }
#tsukuru-kata button { align-self: start; padding: .45rem 1.5rem; }
#tsukuru-log { font-size: .8rem; color: var(--usu); white-space: pre-wrap;
               border-left: 3px solid var(--waku); padding-left: .7rem; margin-top: 1rem; }

/* 摘み。溝は紙、玉は白い丸に墨の縁 */
input[type="range"] { -webkit-appearance: none; appearance: none; flex: 1; min-width: 8rem;
                      height: 1.3rem; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: .6rem; border-radius: 6px;
  background: var(--kami); border: 2px solid var(--sumi); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 1.3rem; height: 1.3rem;
  margin-top: -.45rem; border-radius: 50%; border: var(--fuchi) solid var(--sumi);
  background: var(--shiro); box-shadow: 0 3px 0 var(--sumi); }
input[type="range"]::-moz-range-track { height: .6rem; border-radius: 6px;
  background: var(--kami); border: 2px solid var(--sumi); }
input[type="range"]::-moz-range-thumb { width: 1.3rem; height: 1.3rem; border-radius: 50%;
  border: var(--fuchi) solid var(--sumi); background: var(--shiro); box-shadow: 0 3px 0 var(--sumi); }

/* 「くわしく」欄。既定は畳む */
details.kuwashiku { margin: .8rem 0 0; border: 2px dashed var(--waku); border-radius: var(--kado-ko);
                    padding: .1rem .9rem; }
details.kuwashiku summary { cursor: pointer; padding: .5rem 0; font-size: .85rem; color: var(--usu);
                            list-style: none; font-weight: 800; }
details.kuwashiku summary::-webkit-details-marker { display: none; }
details.kuwashiku summary::before { content: "▸ "; }
details.kuwashiku[open] summary::before { content: "▾ "; }
details.kuwashiku[open] summary { color: var(--sumi); }
details.kuwashiku .sode { margin-top: 0; }

/* ---- 姿 (kami.js) ---------------------------------------------------- */
.kumi { position: relative; flex: none; line-height: 0; }
.kumi-e { display: block; width: 100%; height: auto; overflow: visible; }
.fuda-e { width: 208px; }
@media (max-width: 600px) {
  .fuda-atama { flex-direction: column; align-items: center; }
  .fuda-e { width: 160px; }
}

/* ---- 舞台 (tatakai.js) ---------------------------------------------- */
/* 左右の板は同じ高さに揃える。片方だけ手の文が出ると、揃えないと段違いになる */
.butai { display: grid; grid-template-columns: 1fr auto 1fr; gap: .8rem; align-items: stretch; margin: 0 0 .9rem; }
.butai-gawa { display: flex; flex-direction: column; align-items: center; gap: .2rem;
              padding: .7rem .5rem .6rem; position: relative; transition: border-color .12s; }
.butai-gawa.atari { border-color: var(--ki-koi); }
.butai-gawa.hazure { border-color: var(--waku); }
.butai-gawa.katta { border-color: var(--shu); }
.butai-gawa.maketa { opacity: .8; }
.butai-e.kumi { display: block; }
.butai-migi .kumi-e { transform: scaleX(-1); }    /* 向かい合わせる */
.butai-tokui { position: absolute; top: -.7rem; left: -.5rem; transform: rotate(-8deg);
               background: var(--shu); color: var(--shiro); font-weight: 900; font-size: .8rem;
               padding: .1rem .6rem; border-radius: 999px; border: var(--fuchi) solid var(--sumi);
               box-shadow: 0 3px 0 var(--sumi); animation: ugoki-pyon 1.4s ease-in-out infinite; }
.butai-na { margin: .2rem 0 0; font-size: 1.05rem; letter-spacing: .04em; }
.butai-seikai { display: flex; align-items: baseline; gap: .35rem; }
.butai-mei { font-size: .7rem; letter-spacing: .12em; color: var(--usu); font-weight: 800; }
.butai-seikai b { display: inline-block; font-size: 2.6rem; line-height: 1; font-variant-numeric: tabular-nums;
  color: var(--shiro);
  text-shadow: 2px 0 0 var(--sumi), -2px 0 0 var(--sumi), 0 2px 0 var(--sumi), 0 -2px 0 var(--sumi),
               2px 2px 0 var(--sumi), -2px 2px 0 var(--sumi), 2px -2px 0 var(--sumi), -2px -2px 0 var(--sumi),
               0 5px 0 var(--sumi); }
.butai-yosan { margin: .3rem 0 .1rem; font-size: .72rem; color: var(--usu); font-weight: 800;
               font-variant-numeric: tabular-nums; }
.butai-obi { width: 100%; height: .8rem; background: var(--kami); border: 2px solid var(--sumi);
             border-radius: 6px; overflow: hidden; }
.butai-obi > i { display: block; height: 100%; width: 100%; background: var(--midori); transition: width .25s; }
.butai-obi > i.naka { background: var(--kin); }
.butai-obi > i.hosoi { background: var(--shu); }
.butai-obi.kijun-nashi { opacity: .35; }
.butai-te { display: flex; flex-direction: column; align-items: center; gap: .1rem; margin-top: .45rem;
            font-size: .8rem; min-height: 4.4em; }
.butai-te-na { font-weight: 800; }
.butai-te-hi { color: var(--usu); font-variant-numeric: tabular-nums; }
.butai-de { font-weight: 900; letter-spacing: .04em; font-size: .95rem; }
.butai-de.atari { color: var(--ki-koi); }
.butai-de.hazure { color: var(--usu); }
.butai-mikomi { color: var(--usu); font-size: .7rem; }
.butai-riyuu { color: var(--ai); font-size: .74rem; text-align: center; }
.butai-tsugi { margin: .4rem 0 0; font-size: .78rem; color: var(--shu-koi); font-weight: 800;
               text-align: center; line-height: 1.5; }
.butai-tsugi:empty { display: none; }
/* 真ん中の問。札のように立つ */
.butai-naka { align-self: center; text-align: center; min-width: 8.5rem; padding: .6rem .6rem;
              background: var(--kin2); border: var(--fuchi) solid var(--sumi); border-radius: var(--kado);
              box-shadow: var(--kage); transform: rotate(-2deg); }
.butai-toi { margin: 0; font-size: 1.15rem; letter-spacing: .1em; font-weight: 900; }
.butai-nando { margin: .05rem 0 0; font-size: 1.05rem; color: var(--shu-koi); letter-spacing: .05em; }
.butai-shirase { margin: .3rem 0 0; font-size: .8rem; color: var(--usu); }
.butai-shirase.kime { color: var(--sumi); font-weight: 900; }
/* 最初の画面の舞台。覆いの外に置くので、板の中に立てる */
#shiai-butai { margin-bottom: 1rem; }
#shiai-butai:empty { display: none; }
#shiai-butai .butai-midashi { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
                              margin: 0 0 .6rem; font-weight: 900; }
@media (max-width: 600px) {
  /* 面の押す物は 1 行に収める。2 行に折れると、面の名が「見出し」でなく「一覧」に見える */
  nav { flex-wrap: nowrap; gap: .3rem; }
  /* 「ランキング」(5 字) が 1/5 幅に収まる大きさ。折れると面の名が 2 行になって読みにくい */
  nav button { flex: 1 1 0; min-width: 0; padding: .3rem .05rem; font-size: .74rem; letter-spacing: -.02em;
               white-space: nowrap; }
  h1 { font-size: 1.3rem; letter-spacing: .06em; }
  /* 見出しの形代は小さく。題と音の押す物を圧さない (360px でも 1 行に収まる) */
  #midashi-e svg { width: 22px; height: auto; }
  /* 置く棚は 2 列。1 列だと棚だけで画面が埋まり、座も繋ぎも見えない */
  #haichi-tana .haichi-fuda { flex: 1 1 calc(50% - .4rem); }
  .butai { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .butai-naka { grid-column: 1 / -1; grid-row: 1; min-width: 0; }
  .butai-e { width: 96px; }
  .butai-seikai b { font-size: 2rem; }
  .tebiki { margin-left: 0; }
  #haichi-sugata { float: none; width: 120px; margin: 0 auto .6rem; }
  .men > h2.meiban { font-size: 1.25rem; }
  /* 順位表は列が多い。種目ごとの数字を落とす (札の蜘蛛の巣で見える) */
  #junni-hyou th:nth-child(n+5):nth-child(-n+9),
  #junni-hyou td:nth-child(n+5):nth-child(-n+9) { display: none; }
}

/* ---- 手応え (動き) -------------------------------------------------- */
/* 出来事 → class の対応は tatakai.js の TEOTAE が正典。名前はそのまま使う */
@keyframes ugoki-hajime { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes ugoki-pokon {
  0% { transform: rotate(-2deg) scale(.4); opacity: 0; }
  60% { transform: rotate(-2deg) scale(1.12); opacity: 1; }
  100% { transform: rotate(-2deg) scale(1); } }
@keyframes ugoki-hane {
  0% { transform: translateY(0); } 35% { transform: translateY(-16px) scale(1.04); }
  70% { transform: translateY(0); } 85% { transform: translateY(-5px); } 100% { transform: translateY(0); } }
@keyframes ugoki-bururu {
  0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px) rotate(-1.5deg); }
  40% { transform: translateX(6px) rotate(1.5deg); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@keyframes ugoki-pon { 0% { transform: scale(1.7); color: var(--kin); } 100% { transform: scale(1); } }
@keyframes ugoki-odoru {
  0%, 100% { transform: translateY(0) rotate(0); } 20% { transform: translateY(-18px) rotate(-4deg); }
  40% { transform: translateY(0) rotate(0); } 60% { transform: translateY(-14px) rotate(4deg); } 80% { transform: translateY(0); } }
/* 負けた側はしおれる。6° では板が隣と下の押す物に被ったので 3° に留める */
@keyframes ugoki-shobon { to { transform: rotate(3deg) translateY(6px); } }
@keyframes ugoki-yure { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(2deg); } }
@keyframes ugoki-pyon { 0%, 100% { transform: rotate(-8deg) translateY(0); } 50% { transform: rotate(-8deg) translateY(-3px); } }
.ugoki-hajime { animation: ugoki-hajime .35s ease-out; }
.ugoki-pokon { animation: ugoki-pokon .38s cubic-bezier(.2, 1.4, .4, 1); }
.ugoki-hane { animation: ugoki-hane .45s ease-out; }
.ugoki-bururu { animation: ugoki-bururu .4s ease-out; }
.ugoki-pon { animation: ugoki-pon .35s cubic-bezier(.2, 1.4, .4, 1); }
.ugoki-odoru { animation: ugoki-odoru .9s ease-in-out 2; }
.ugoki-shobon { animation: ugoki-shobon .5s ease-out forwards; }
.ugoki-yure { animation: ugoki-yure .8s ease-in-out 2; }
/* 動きが辛い人には止める。**手応えは音と色で残る** */
@media (prefers-reduced-motion: reduce) {
  [class*="ugoki-"], .butai-tokui { animation: none !important; }
  button, .haichi-fuda, .obi > i, .butai-obi > i { transition: none; }
}

/* ==========================================================================
   第 2 段 — 作るをおもちゃに・広場を村に・手合わせ・おまかせ名
   ========================================================================== */

/* 系統の点。名前は出さず色だけ (llama=紫・qwen=橙・gemma=青緑。属性の 5 色とは別の色) */
.keitou-ten { display: inline-block; width: .7em; height: .7em; border-radius: 50%;
              border: 2px solid var(--sumi); vertical-align: -.05em; margin-right: .3em; }
.keitou-llama { background: #9b6bff; }
.keitou-qwen { background: #ff9a3d; }
.keitou-gemma { background: #2bb5a0; }
.haichi-fuda.erabu .keitou-ten { border-color: var(--kami); }

/* 束ねの印。効く時は朱の札、効かない時は薄い字 */
.haichi-tabane { margin: .3rem 0 0; font-size: .78rem; font-weight: 900; line-height: 1.4; }
.haichi-tabane:empty { display: none; }
.haichi-tabane.tabane-kiku { display: inline-block; background: var(--shu); color: var(--shiro);
  padding: .1rem .6rem; border-radius: 999px; border: var(--fuchi) solid var(--sumi);
  box-shadow: 0 3px 0 var(--sumi); transform: rotate(-4deg); }
.haichi-tabane.tabane-nai { color: var(--usu); }
#haichi-sugata .kami { display: inline-block; }
.haichi-teawase-dan { margin: .8rem 0 0; }
#haichi-teawase { padding: .5rem 1.4rem; font-size: 1.05rem; }

/* 村。住人が並び、投稿は紙の式神が吹き出しで喋る */
#hiroba-mura { display: flex; gap: .3rem; flex-wrap: wrap; align-items: flex-end; margin: 0 0 .8rem; }
#hiroba-mura:empty { display: none; }
.mura-juunin { padding: .2rem .25rem 0; line-height: 0; border-radius: var(--kado-ko);
               box-shadow: none; border-color: transparent; background: transparent; }
.mura-juunin:hover:not(:disabled) { background: var(--shiro); border-color: var(--sumi); }
.mura-juunin.erabu { background: var(--shiro); border-color: var(--shu); box-shadow: 0 3px 0 var(--shu); }
.mura-juunin .kami { display: block; }
.mura-juunin-na { display: block; font-size: .62rem; line-height: 1.2; text-align: center;
                  font-weight: 800; color: var(--usu); }
#hiroba-ichiran > li { display: grid; grid-template-columns: auto 1fr; gap: .2rem .7rem; align-items: start; }
#hiroba-ichiran > li .moto { grid-column: 2; }
#hiroba-ichiran > li .mura-hito { grid-row: 1 / span 2; align-self: end; line-height: 0; }
#hiroba-ichiran > li .fukidashi { grid-column: 2; position: relative; background: var(--kami);
  border-radius: var(--kado); padding: .5rem .8rem; }
#hiroba-ichiran > li .fukidashi::before { content: ""; position: absolute; left: -10px; top: 14px;
  border: 7px solid transparent; border-right: 8px solid var(--kami); border-left: 0; }
#hiroba-ichiran > li.onedari .fukidashi { background: var(--shu); color: var(--shiro); font-weight: 800; }
#hiroba-ichiran > li.onedari .fukidashi::before { border-right-color: var(--shu); }
/* 返しは相手が右から。吹き出しの尾も右 */
#hiroba-ichiran > li .kaeshi { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto;
  gap: .5rem; align-items: end; margin: .3rem 0 0 1.5rem; padding: 0; background: none; }
#hiroba-ichiran > li .kaeshi .fukidashi { grid-column: 1; }
#hiroba-ichiran > li .kaeshi .fukidashi::before { left: auto; right: -10px; border-right: 0;
  border-left: 8px solid var(--kami); }
#hiroba-ichiran > li .kaeshi .mura-hito { grid-row: auto; }
#hiroba-ichiran > li .kaeshi .mura-hito .kami { transform: scaleX(-1); }

/* 手合わせ */
.teawase-shumoku { display: flex; gap: .5rem; flex-wrap: wrap; margin: .5rem 0 1rem; }
.teawase-shumoku button { display: flex; flex-direction: column; align-items: center; gap: .1rem;
  padding: .5rem .9rem; min-width: 5.5rem; }
.teawase-shumoku button .shirushi { color: var(--shu-koi); }
.teawase-shumoku button small { font-size: .7rem; color: var(--usu); font-weight: 700; }
.teawase-aite { font-size: .9rem; margin: .2rem 0 .6rem; }
.teawase-te { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .5rem;
  margin: .6rem 0; }
.teawase-fuda { display: flex; flex-direction: column; align-items: center; gap: .05rem;
  padding: .55rem .5rem; line-height: 1.3; }
.teawase-fuda b { font-size: 1rem; }
.teawase-fuda .hi { font-size: .78rem; color: var(--shu-koi); font-weight: 900; }
.teawase-fuda .mi { font-size: .74rem; color: var(--usu); font-weight: 700; }
.teawase-toi { margin: .4rem 0 .1rem; font-weight: 900; }
.teawase-kekka { margin: .5rem 0; padding: .5rem .8rem; background: var(--kami); border-radius: var(--kado-ko);
  font-weight: 800; }
.teawase-kekka:empty { display: none; }
.teawase-te:empty { display: none; }
@media (max-width: 600px) {
  #hiroba-ichiran > li .mura-hito .kami { width: 44px; height: auto; }
}

/* 第 3 段 — 言葉の層 */
.butai-shurui { margin: .15rem 0 0; font-size: .74rem; color: var(--sumi); font-weight: 800; line-height: 1.4; }
.butai-shurui:empty { display: none; }
.teawase-fuda .setsu { font-size: .72rem; color: var(--usu); font-weight: 700; line-height: 1.35; margin-top: .15rem; }
.teawase-karada, .teawase-nai { margin: .3rem 0; font-size: .8rem; color: var(--usu); font-weight: 700; line-height: 1.5; }
.teawase-nai:empty { display: none; }
.teawase-rei { margin: 0 0 .5rem; font-size: .88rem; }
.teawase-rei q { font-weight: 800; color: var(--sumi); quotes: "「" "」"; }
.kokoroe .setsu { color: var(--usu); font-size: .8rem; }
.dasenai-te { font-size: .82rem; color: var(--usu); margin: .2rem 0 .8rem; }
.teawase-fuda .wake { font-size: .72rem; color: var(--shu-koi); font-weight: 900; margin-top: .1rem; }

/* ==========================================================================
   第 4 段 — ゲームの目的 (印を集めて殿堂入り)
   ========================================================================== */
#mokuteki { padding: .9rem 1rem; margin: 0 0 1rem; }
#mokuteki:empty { display: none; }
.mokuteki-dai { margin: 0 0 .4rem; font-size: 1.25rem; letter-spacing: .08em; }
.mokuteki-dai.dendou { color: var(--shu-koi); }
.mokuteki-michi { margin: 0 0 .6rem; padding-left: 1.4rem; font-size: .92rem; font-weight: 700; }
.mokuteki-michi li { margin: .1rem 0; }
.mokuteki-kazu { margin: .4rem 0; font-weight: 900; }
.mokuteki-shirase { margin: .3rem 0 .5rem; font-weight: 800; color: var(--shu-koi); }
/* 印のケース。取った印は色付き、まだの印は灰 */
.in-ke { display: flex; gap: .35rem; flex-wrap: wrap; align-items: flex-end; margin: .3rem 0 .5rem; }
.in-waku { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .3rem .25rem 0;
           border: 2px solid var(--waku); border-radius: var(--kado-ko); background: var(--kami); min-width: 3.6rem; }
.in-waku .kami { display: block; }
.in-waku.mada .kami { filter: grayscale(1); opacity: .35; }
.in-waku.totta { border-color: var(--shu); background: var(--shiro); box-shadow: 0 3px 0 var(--shu); }
.in-na { display: flex; align-items: center; gap: .15em; font-size: .62rem; font-weight: 800; color: var(--usu);
         line-height: 1.3; padding-bottom: .2rem; }
.in-waku.totta .in-na { color: var(--sumi); }
.in-na .shirushi { color: var(--shu-koi); }
/* 順位表と札の印 */
.in-shirushi { display: inline-block; margin-left: .35em; padding: 0 .4em; font-size: .68rem; font-weight: 900;
               color: var(--shiro); background: var(--shu); border-radius: 999px; vertical-align: .1em; }
/* 挑む相手 (作る) */
#idomu { margin: .8rem 0 0; }
#idomu:empty { display: none; }
.idomu-dai { margin: 0 0 .4rem; font-weight: 900; font-size: .95rem; }
.idomu-retsu { display: flex; gap: .4rem; flex-wrap: wrap; }
.idomu-hito { display: flex; flex-direction: column; align-items: center; gap: .05rem; padding: .35rem .5rem .3rem;
              min-width: 5.2rem; line-height: 1.25; }
.idomu-hito .kami { display: block; }
.idomu-hito.totta { border-color: var(--shu); box-shadow: 0 4px 0 var(--shu); }
.idomu-na { display: flex; align-items: center; gap: .15em; font-size: .78rem; font-weight: 900; }
.idomu-na .shirushi { color: var(--shu-koi); }
.idomu-shumoku { font-size: .66rem; color: var(--usu); font-weight: 700; }
.idomu-hito.totta .idomu-shumoku { color: var(--shu-koi); }
.idomu-shirase { margin: .4rem 0 0; font-size: .85rem; color: var(--shu-koi); font-weight: 800; }
.idomu-shirase:empty { display: none; }
.teawase-in { margin: .5rem 0; padding: .5rem .8rem; border-radius: var(--kado-ko); font-weight: 900;
              background: var(--shu); color: var(--shiro); border: var(--fuchi) solid var(--sumi); box-shadow: var(--kage); }
.teawase-in:empty { display: none; }
.teawase-haichi { margin: 0 0 .5rem; font-size: .82rem; color: var(--usu); font-weight: 700; }

/* ==========================================================================
   第 5 段 — なかま・流れ図・こんな問題（例）・相手を読む
   ========================================================================== */
.nakama { display: inline-block; vertical-align: middle; overflow: visible; }
.nakama-retsu { display: flex; gap: .25rem; align-items: flex-end; justify-content: center; flex-wrap: wrap; }
.nakama-hito { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; }
.nakama-na { font-size: .58rem; font-weight: 800; color: var(--usu); margin-top: .1rem; }
/* 作る: 棚とチームの札に玉 */
.haichi-fuda .nakama { margin-right: .25em; }
.haichi-seki .nakama { margin-right: .2em; }
/* 流れ図 */
.nagare { margin: .6rem 0 .3rem; padding: .6rem .8rem; background: var(--kami); border-radius: var(--kado); }
.nagare:empty { display: none; }
.nagare-hanashi { margin: 0 0 .5rem; font-weight: 900; font-size: .9rem; }
.nagare-gyou { display: grid; grid-template-columns: 5.4rem 1fr 2.2rem auto; gap: .5rem; align-items: center;
               margin: .25rem 0; }
.nagare-na { display: flex; align-items: center; gap: .3em; font-size: .82rem; font-weight: 800; }
.nagare-na .shirushi { color: var(--shu-koi); }
.nagare-bou { height: .7rem; border: 2px solid var(--sumi); border-radius: 6px; background: var(--shiro); overflow: hidden; }
.nagare-bou > i { display: block; height: 100%; background: var(--kin); transition: width .3s; }
.nagare-kazu { font-size: .9rem; font-variant-numeric: tabular-nums; text-align: right; }
.nagare-dare { display: flex; align-items: center; gap: .15rem; font-size: .68rem; font-weight: 800; color: var(--usu); }
.nagare-ya { margin: 0 .1rem; }
@media (max-width: 600px) { .nagare-gyou { grid-template-columns: 4.6rem 1fr 2rem auto; gap: .35rem; } }
/* 舞台: なかまの列と、こんな問題（例） */
.butai-nakama { margin: .1rem 0 0; min-height: 26px; }
.butai-rei { margin: .2rem 0 0; font-size: .72rem; color: var(--sumi); line-height: 1.4; }
.butai-rei:empty { display: none; }
.butai-rei small { color: var(--usu); font-weight: 800; margin-right: .3em; }
.butai-check { position: absolute; right: .5rem; top: .6rem; font-size: 1.4rem; font-weight: 900; color: var(--ki-koi);
               pointer-events: none; opacity: 0; }
.butai-check.ugoki-check { animation: ugoki-check .7s ease-out; }
.teawase-yomi { margin: .3rem 0; font-size: .85rem; font-weight: 800; color: var(--sumi); background: var(--kin2);
                border-radius: var(--kado-ko); padding: .35rem .7rem; }
.teawase-yomi:empty { display: none; }
/* なかまの動き (わざごと) */
@keyframes ugoki-nakama-pyon { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-9px) scale(1.12); } }
@keyframes ugoki-nakama-buru { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
@keyframes ugoki-check { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; transform: scale(1.3); } 100% { opacity: 0; transform: scale(1); } }
.nakama-hito.ugoki-nakama-pyon { animation: ugoki-nakama-pyon .5s ease-out; }
.nakama-hito.ugoki-nakama-buru { animation: ugoki-nakama-buru .5s ease-in-out 2; }

/* ==========================================================================
   第 6 段 — 戦いの深み (よゆう・ヤマ場・ふりかえり)
   ==========================================================================
   足したのは**見せ方だけ**で、engine の数は 1 つも変えていない。この試合の芯は
   「12 もんにエネルギーをどう配るか」で、それが画面に出ていなかった。 */

/* ヤマ場。4 もんごとに難しくなるのは engine が持っている規則で、知っていれば
   エネルギーを残す作戦が立つ。**印は控えめに**: 出す情報が増えるほど、地の
   「今どの問か」が読みにくくなる */
.butai-toi.yamaba, .teawase-toi.yamaba { color: var(--shu-koi); }

/* 手札の「出すと」。値段 (−10) は今の出費、こちらは**この先に残る回数**で、
   選ぶ前に比べられることが目的 */
.teawase-fuda .ato { font-size: .72rem; color: var(--kin-koi); font-weight: 900; }
.teawase-kata { margin: .3rem 0 .5rem; font-size: .8rem; color: var(--usu);
  font-weight: 700; line-height: 1.5; }

/* ふりかえり。分かれ道のあった問だけ地を変える (全部に色を付けると差が消える) */
.furikaeri-hon { margin: .4rem 0 .2rem; font-weight: 900; }
.furikaeri-hyou { list-style: none; padding: 0; margin: .2rem 0 0; }
.furikaeri-hyou > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .5rem;
  padding: .18rem .35rem; font-size: .82rem; border-radius: 6px; }
.furikaeri-hyou > li.wakare { background: var(--kin-usu); font-weight: 800;
  border-left: var(--fuchi) solid var(--kin-zoku); padding-left: .5rem; }
.furikaeri-hyou .ban { font-weight: 900; min-width: 3.2rem; }
.furikaeri-hyou .hoshi { color: var(--kin-koi); letter-spacing: -.05em; }
.furikaeri-hyou .te { color: var(--usu); font-weight: 700; }
.furikaeri-hyou .de.atari { color: var(--kin-koi); font-weight: 900; }
.furikaeri-hyou .de.hazure { color: var(--shu-koi); font-weight: 900; }
.furikaeri-hyou .kae { font-weight: 900; }

/* 見ている試合のふりかえり。決着してから埋まるので、空の間は場所を取らない。
   **表の行 (li.wakare) と別の名前にする**: 素の .wakare にすると表の行にも
   当たって、行の字の大きさと余白が黙って変わる (codex 指摘) */
.wakare-hon { margin: .3rem 0 .1rem; font-size: .85rem; font-weight: 800; }
.wakare-hon:empty { display: none; }