/* ═══ 19z-rule.css ═══ つくるーる（19z-rule.js と組） */
.rltop{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 10px}
.rltitle{flex:1 1 100%;text-align:left;background:none;border:0;padding:2px 0;font:inherit;font-size:16px;font-weight:800;color:var(--tx);cursor:pointer}
.rlfrom{background:var(--sur2);border:1px solid var(--irm);border-radius:10px;padding:9px 12px;font-size:13px;line-height:1.7;margin:0 0 10px}
.rlhud{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-size:13px;font-weight:800;min-height:26px;margin-bottom:6px}
.rlhud span{display:inline-flex;align-items:center;gap:3px}
.rlhud img{width:20px;height:20px;image-rendering:pixelated}
.rlgoal{color:var(--irm)}
.rltick{color:var(--dim);font-weight:700}
.rlcvw{position:relative;display:flex;justify-content:center}
#rlcv{display:block;max-width:100%;image-rendering:pixelated;touch-action:none;border-radius:6px;box-shadow:0 0 0 1px var(--line2);cursor:crosshair;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.rlclear{position:absolute;inset:auto 0 40% 0;margin:auto;width:max-content;display:flex;flex-direction:column;align-items:center;gap:2px;
 background:var(--tx);color:var(--bg);border-radius:14px;padding:12px 26px;box-shadow:0 10px 30px #0006;animation:rlpop .25s ease-out}
.rlclear[hidden]{display:none}
.rlclear b{font-size:22px}
@keyframes rlpop{from{transform:scale(.7);opacity:0}to{transform:none;opacity:1}}
.rlctl{margin-top:10px;align-items:center}
.rlspd{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--dim);margin-left:auto}
.rlspd input{width:110px}
/* 画面の やじるし（指で遊ぶとき） */
.rlpad{display:grid;grid-template-columns:repeat(3,58px) 20px 70px;grid-template-rows:52px 52px;gap:6px;justify-content:center;margin-top:12px;
 -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none}
.rlpad[hidden]{display:none}
.rlpad button{border-radius:12px;border:1px solid var(--line2);background:var(--sur2);color:var(--tx);font-size:22px;font-weight:800;cursor:pointer;touch-action:none}
.rlpad button.on{background:var(--irm);color:var(--bg)}
.rlpad [data-k="up"]{grid-column:2;grid-row:1}
.rlpad [data-k="left"]{grid-column:1;grid-row:2}
.rlpad [data-k="down"]{grid-column:2;grid-row:2}
.rlpad [data-k="right"]{grid-column:3;grid-row:2}
.rlpad .rla{grid-column:5;grid-row:1 / span 2;border-radius:50%;height:70px;align-self:center;font-size:26px}
.rlhd{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-bottom:8px}
.rlhd b{font-size:14px}
.rlhd span{font-size:11.5px;color:var(--dim)}
/* こま */
.rlpieces{display:flex;flex-wrap:wrap;gap:8px}
.rlpcw{position:relative;display:inline-flex}
.rlpc{display:flex;flex-direction:column;align-items:center;gap:3px;width:66px;padding:6px 2px;border-radius:10px;border:2px solid var(--line2);background:var(--sur2);color:var(--dim);font:inherit;font-size:11px;font-weight:700;cursor:pointer}
.rlpc.on{border-color:var(--irm);color:var(--tx)}
.rlpc i{width:36px;height:36px;display:grid;place-items:center;font-style:normal;font-size:20px}
.rlpc img{width:36px;height:36px;image-rendering:pixelated}
.rlpc span{max-width:62px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlpc.add{border-style:dashed}
.rlpced{position:absolute;top:-7px;right:-7px;width:26px;height:26px;border-radius:50%;border:1px solid var(--line2);background:var(--sur);color:var(--tx);font-size:13px;cursor:pointer;padding:0}
/* ルールの 並び */
.rlg{display:inline-grid;grid-template-columns:repeat(var(--w),22px);gap:1px;background:var(--line2);border:1px solid var(--line2);border-radius:4px;overflow:hidden;vertical-align:middle}
.rlg i{width:22px;height:22px;display:grid;place-items:center;background:var(--sur);font-style:normal;font-size:12px;color:var(--faint)}
.rlg i img{width:100%;height:100%;image-rendering:pixelated}
.rlg i.dim img{opacity:.35}
.rlg i.emp{background:var(--bg)}
.rlrow{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:10px;border:1px solid var(--line);margin-bottom:6px;cursor:pointer;background:var(--sur2)}
.rlrow.fire{animation:rlfire .35s ease-out}
@keyframes rlfire{from{background:var(--irm);border-color:var(--irm)}}
.rlon{font-size:18px;width:26px;text-align:center}
.rlarr{color:var(--dim);font-size:14px}
.rlopt{display:inline-flex;gap:4px;font-size:12.5px;margin-left:auto;align-items:center}
.rlopt b{font-size:11.5px;color:var(--dim)}
.rlup{border:1px solid var(--line2);background:var(--sur);color:var(--tx);border-radius:8px;width:30px;height:30px;cursor:pointer;flex:0 0 auto}
.rlopt+.rlup{margin-left:0}
#rladdrule{margin-top:4px}
/* 説明 */
.rlhelp{font-size:13px;line-height:1.8}
.rlhelp ul{margin:6px 0 0;padding-left:18px}
.rlhelp summary{cursor:pointer;font-weight:800}
.rlles p{margin:4px 0}
.rltry{color:var(--irm);font-weight:700}
/* 板（ルール・こま・ステージ・共有） */
.rlsheet{position:fixed;inset:0;z-index:80;background:#000a;display:flex;align-items:flex-end;justify-content:center}
.rlsheet[hidden]{display:none}
.rlsh-in{background:var(--sur);color:var(--tx);width:min(560px,100%);max-height:92vh;overflow:auto;border-radius:16px 16px 0 0;padding:14px 16px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -10px 40px #0007}   /* 下の帯（z 70）より上、確かめる板（z 88）より下 */
@media (min-width:700px){.rlsheet{align-items:center}.rlsh-in{border-radius:16px}}
.rlshhd{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.rlshhd b{font-size:16px}
.rlsec{font-size:12px;font-weight:800;color:var(--dim);margin:12px 0 6px}
.rlchips{display:flex;flex-wrap:wrap;gap:6px}
.rlchip{display:inline-flex;align-items:center;gap:5px;border-radius:999px;border:1px solid var(--line2);background:var(--sur2);color:var(--dim);padding:7px 12px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.rlchip.on{background:var(--irm);border-color:var(--irm);color:var(--bg)}
.rlchip i{width:20px;height:20px;display:inline-grid;place-items:center;font-style:normal;border-radius:4px;background:var(--bg)}
.rlchip i img{width:20px;height:20px;image-rendering:pixelated}
.rled{display:flex;align-items:center;justify-content:center;gap:12px;margin:14px 0 6px;flex-wrap:wrap}
.rled small{display:block;font-size:11.5px;font-weight:800;color:var(--dim);margin-bottom:4px;text-align:center}
.rled .rlg{grid-template-columns:repeat(var(--w),46px);border-width:2px}
.rled .rlg i{width:46px;height:46px;font-size:18px;cursor:pointer}
.rled .rlarr{font-size:24px}
.rlsay{text-align:center;font-size:12.5px;font-weight:700;color:var(--irm);margin:4px 0 8px}
.rlbtm{margin-top:14px}
.rlpxw{max-width:260px;margin:6px auto 10px}
.rlpxw canvas{display:block;width:100%;height:100%;image-rendering:pixelated;touch-action:none}
.rlpal .sw,.rlpal .sw[aria-pressed="false"]{box-shadow:inset 0 0 0 1px var(--line2)}
.rlpal{display:flex;flex-wrap:wrap;gap:6px}
.rllesg{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.rlles-b{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;border:1px solid var(--line2);background:var(--sur2);color:var(--tx);font:inherit;font-size:13px;font-weight:800;cursor:pointer;text-align:left}
.rlles-b i{font-style:normal;font-size:22px}
.rlmine{display:flex;align-items:center;gap:10px;padding:6px 2px;border-bottom:1px solid var(--line)}
.rlmine .lk:first-child{flex:1;text-align:left;font-weight:700}
.rlmine small{color:var(--faint)}
.rlnote{font-size:12px;color:var(--dim);line-height:1.7;margin:0 0 6px}
#rlcode,#rlpaste{width:100%;font-size:12px;font-family:ui-monospace,monospace;resize:vertical}
@media (max-width:420px){
 .rlpad{grid-template-columns:repeat(3,52px) 12px 64px;grid-template-rows:48px 48px}
 .rled .rlg{grid-template-columns:repeat(var(--w),40px)}
 .rled .rlg i{width:40px;height:40px}
 .rlspd{margin-left:0}
}
/* v2（2026-09-25）：かず・あいず・もし・ならび なし・文・もんだい・印刷 */
.rlrow{flex-wrap:wrap}
.rlrow.lk{background:var(--sur);border-style:dashed}
.rlsen{flex:1 1 100%;font-size:11.5px;color:var(--dim);line-height:1.6;padding-left:34px}
.rlif{font-size:11.5px;font-weight:800;color:var(--irm);white-space:nowrap}
.rlnone{color:var(--faint);font-weight:800;padding:0 6px}
.rlvar{background:var(--sur2);border:1px solid var(--line2);border-radius:999px;padding:1px 9px}
.rlsig{opacity:.35;transition:opacity .15s}
.rlsig.on{opacity:1;transform:scale(1.2)}
.rllab{font-size:12px;font-weight:800;color:var(--dim);align-self:center;margin-right:2px}
.rlstep{display:inline-flex;align-items:center;gap:4px}
.rlstep b,.rlvnum{min-width:34px;text-align:center;font-size:15px}
.rlclear.lose{background:#5a2330;color:#fff}
.rlclear span{font-size:13px}
.rlclear .btn{margin-top:6px}
.rlwhy{max-width:240px;text-align:center;font-weight:700;color:#ffd54f}
.rlteach{margin:10px 0 0;font-size:13px}
.rlteach a{color:var(--irm);font-weight:700}
/* もんだい */
.rlmis{border:2px solid var(--irm)}
.rlmhd{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.rlmhd b{font-size:15px}
.rlmidea{font-size:12px;color:var(--dim);font-weight:700}
.rlmok{background:#2e7d32;color:#fff;border-radius:999px;padding:1px 10px;font-size:12px;font-weight:800}
.rlmgoal{margin:6px 0 8px;font-size:14px;line-height:1.7;font-weight:700}
.rlmhint{margin:8px 0 0;font-size:13px;line-height:1.7;background:var(--sur2);border-radius:8px;padding:8px 10px}
.rlmcrit{list-style:none;padding:0;margin:0 0 8px;font-size:13px;line-height:1.9}
.rlmcrit li.ok{color:var(--dim)}
.rlles-b span{display:flex;flex-direction:column;line-height:1.35;flex:1}
.rlles-b small{font-size:11px;color:var(--dim);font-weight:700}
.rlles-b.done{border-color:#2e7d32}
.rlans{padding-left:20px;line-height:1.8;font-size:13.5px}
.rlans li{margin:6px 0}
.rlans li.mv{color:var(--irm);font-weight:700}
.rlans .rlp-pat{display:block;margin-bottom:2px}
/* 印刷（📄 いんさつ）：印刷のときだけ #rlprint を出し、ほかは隠す。画面の見た目は かわらない */
#rlprint{display:none}
@media print{
 body.rlprinting>*{display:none!important}
 body.rlprinting>#rlprint{display:block!important;color:#000;background:#fff;font-size:12pt;line-height:1.6;padding:0 6mm}
 #rlprint h1{font-size:18pt;margin:0 0 4px}#rlprint h2{font-size:13pt;margin:12px 0 4px;border-bottom:1px solid #999}
 #rlprint .rlp-stage{display:block;max-width:100%;max-height:90mm;image-rendering:pixelated;border:1px solid #999;margin:6px 0}
 #rlprint .rlp-pc{display:flex;flex-wrap:wrap;gap:10px}#rlprint .rlp-pc span{display:inline-flex;align-items:center;gap:4px}
 #rlprint .rlp-pc img{width:28px;height:28px;image-rendering:pixelated;border:1px solid #ccc}
 #rlprint .rlp-rules li{margin:5px 0;break-inside:avoid}#rlprint .rlp-pat{display:inline-block;margin-right:8px;vertical-align:middle}
 #rlprint .rlg{border:1px solid #666;background:#666}#rlprint .rlg i{background:#fff;color:#666}#rlprint .rlg i.emp{background:#eee}
 #rlprint .rlp-lines p{margin:8px 0 0;font-weight:700}#rlprint .rlp-lines i{display:block;border-bottom:1px solid #999;height:9mm}
 #rlprint *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ── 作り直し（19zl-rulegal.js、2026-09-26）── 広い画面はステージ（左）と駒・ルール（右）。ステージは見えたまま */
#v-rule{container-type:inline-size}
@container (min-width:660px){
 .rlgrid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:12px;align-items:start}
 .rlleft{position:sticky;top:8px}
 .rlleft .card,.rlright .card{margin-bottom:12px}
}
.rlgtabs{display:flex;gap:6px;margin-bottom:10px}
.rlgal{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;max-height:calc(var(--fitH) - 200px);overflow:auto}
.rlgc{display:flex;flex-direction:column;align-items:flex-start;gap:3px;background:var(--sur2);border:1px solid var(--line);border-radius:10px;padding:8px;color:var(--tx);font:inherit;cursor:pointer;text-align:left}
.rlgc:hover{border-color:var(--irm)}
.rlgc canvas{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;background:#0d0f14;border-radius:6px;image-rendering:pixelated}
.rlgc b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.rlgc span{font-size:11.5px;color:var(--dim)}
.rlgnote{font-size:12.5px;color:var(--dim);margin:8px 0 0}