/* ドットのおへや — 殻の見た目(設計: .claude/rules/dotto-no-oheya/design/hajimari.md・ookisa.md)
   森の中の木の部屋。殻は落ち着いた色に留め、作品(ドット絵)より派手にしない。 */
:root {
  --bg: #efe6d6;      --ink: #3b3127;
  --card: #fffaf0;    --shadow: #c9b89c;
  --wood: #a9774a;    --wood-dark: #6e4c30;
  --leaf: #5f8f5a;    --leaf-light: #cfe2c3;
  --kaku: #d9774b;
  --focus: #2d6cb5;
  --checker-a: #ffffff; --checker-b: #e3ddd2;
  --sub: #6b5e4f;
  --pad: 12px;
  --rail: 88px;      /* 殻の帯(縦)/ 列(横)の太さ */
  --gap: 16px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); overflow: hidden; }
body {
  font-family: system-ui, -apple-system, "Hiragino Maru Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; }
svg { display: block; width: 100%; height: 100%; }

/* ── 画面(#app の子)。**見えていない画面は hidden = display:none**(4.1 絶対ルール) ── */
#app { position: fixed; inset: 0; }
.screen {
  position: absolute; inset: 0;
  padding: calc(var(--pad) + env(safe-area-inset-top)) calc(var(--pad) + env(safe-area-inset-right))
           calc(var(--pad) + env(safe-area-inset-bottom)) calc(var(--pad) + env(safe-area-inset-left));
  display: flex; flex-direction: column; overflow: hidden;
}
.screen[hidden] { display: none; }
.screen.enter { animation: enter 180ms ease-out; }
@keyframes enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── カード(押せる物の文法: 角丸 20・下に 4px の影)。押せない物にこの形を使わない ── */
.card {
  appearance: none; border: 0; margin: 0; padding: 0; cursor: pointer;
  background: var(--card); border-radius: 20px;
  box-shadow: 0 4px 0 var(--shadow);
  transition: transform 80ms ease-out, box-shadow 80ms ease-out;
  display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0;
}
.card.pressed { transform: scale(0.94); box-shadow: 0 1px 0 var(--shadow); }
.card:focus { outline: none; }
.card:focus-visible, .back:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.art, canvas.mihon { pointer-events: none; }

/* ── はじまり ── */
.hj-main { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.hj-title {
  flex: 0 0 auto; height: 128px; display: flex; align-items: center; justify-content: center; gap: 10px;
  pointer-events: none;
}
/* ことば の口: 縦は入口の下の右端(題名の行に入れると題名が2行に折れる)。横は右上の角(下の 媒体クエリ) */
.hj-main > .o-lang-slot { flex: 0 0 auto; align-self: flex-end; margin: 24px 0 0; }   /* おへや を押し損ねた指が当たらない隙間 */
.hj-main[data-step="lang"] .hj-doors { display: none; }
/* 入口ページへ戻る口(site-home.md)。縦は ことば の口と同じ行の左端(負の margin で同じ帯へ上げる)、
   横は題名の行の左で、次の画面の もどる(x 16〜72・当たり ±4)から 12px 右(左上の角に置くと、もどるを続けて押した指が外へ出る)。
   面は .ed-act と同じ(角丸 16・下に 4px の影)。押下は中の絵だけを縮める(箱を縮めると当たりが縮む ← coding/input.md) */
.hj-main > #site-home {
  flex: 0 0 64px; width: 64px; height: 64px; align-self: flex-start; margin: -64px 0 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--card); border-radius: 16px; box-shadow: 0 4px 0 var(--shadow);
  -webkit-tap-highlight-color: transparent;
}
#site-home svg { width: 36px; height: 36px; fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linejoin: round; pointer-events: none; transition: transform 80ms ease-out; }
#site-home:active svg { transform: scale(0.94); }
#site-home:focus { outline: none; }
#site-home:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.hj-main[data-step="lang"] > #site-home, .hj-main[data-step="lang"] > #sound { display: none; }   /* 一覧の間は出さない(一覧の札と重ねない) */
/* おと の口(#1757。design/hajimari.md 3.1): ことば の口のすぐ左・隙間 12。縦は同じ行へ負の margin で上げる。
   押下は絵だけを縮める(箱を縮めると当たりが縮む ← coding/input.md)。オフのしるしは絵の差しかえ(明るさを振らない) */
.hj-main > #sound { align-self: flex-end; margin: -64px 76px 0 0; }
#sound.pressed { transform: none; box-shadow: 0 1px 0 var(--shadow); }
#sound svg { width: 36px; height: 36px; fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 80ms ease-out; }
#sound.pressed svg { transform: scale(0.94); }
#sound[aria-pressed="true"] .snd-on, #sound[aria-pressed="false"] .snd-off { display: none; }
#sound[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--ink), 0 4px 0 var(--shadow); }   /* 消えている = 縁(補いのしるし。明るさは変えない) */
#sound[aria-pressed="true"].pressed { box-shadow: inset 0 0 0 3px var(--ink), 0 1px 0 var(--shadow); }
.hj-main .o-lang { width: 100%; max-width: 420px; margin: 0 auto; }
.hj-title h1 { margin: 0; font-size: 32px; letter-spacing: 0.04em; }
.hj-ie { width: 44px; height: 44px; flex: 0 0 auto; }
.hj-doors {
  flex: 0 1 420px; min-height: 0; width: 100%; max-width: 420px; margin: 0 auto;
  display: grid; gap: var(--gap);
  grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1.45fr) minmax(0, 1fr);
  grid-template-areas: "kaku kaku" "tana heya";
}
/* 題名と入口をひとかたまりで縦の中央へ(下だけが空かないように) */
.screen[data-screen="hajimari"] { justify-content: center; }
.door { flex-direction: column; gap: 6px; padding: 12px; }
.door .art { flex: 1 1 auto; min-height: 0; width: 60%; max-width: 160px; }
.door .label { flex: 0 0 auto; font-size: 16px; font-weight: 700; white-space: nowrap; }
.door-kaku { grid-area: kaku; }
.door-kaku .label { font-size: 22px; color: var(--ink); }
.door-kaku { box-shadow: 0 4px 0 var(--kaku); }
.door-kaku.pressed { box-shadow: 0 1px 0 var(--kaku); }
.door-tana { grid-area: tana; }
.door-heya { grid-area: heya; }
@media (prefers-reduced-motion: no-preference) {
  .door-kaku .art { animation: yobu 2s ease-in-out infinite; }
}
@keyframes yobu { 50% { transform: scale(1.04); } }

/* ── 殻の共通(もどる + 本体)。縦: 上の帯 88 / 横: 左の列 88 ── */
.screen:not([data-screen="hajimari"]) { flex-direction: column; }
.back {
  position: relative; flex: 0 0 auto; appearance: none; border: 0; padding: 0; cursor: pointer;
  width: 56px; height: 56px; margin: 16px 0 16px 4px; border-radius: 50%;
  background: var(--card); box-shadow: 0 4px 0 var(--shadow);
  transition: transform 80ms ease-out, box-shadow 80ms ease-out;
}
.back::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; }  /* 当たり判定 64×64 */
.back.pressed { transform: scale(0.94); box-shadow: 0 1px 0 var(--shadow); }
.back:focus { outline: none; }
.back svg { width: 28px; height: 28px; margin: auto; fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.body { flex: 1 1 auto; min-height: 0; min-width: 0; }

.shell-body { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; }
.shell-body .shell-art { width: 160px; height: 160px; flex: 0 0 auto; }
.shell-body h1 { margin: 0; font-size: 24px; }

/* ── 大きさをえらぶ ── */
.oo-cards {
  display: flex; flex-direction: column; gap: var(--gap); justify-content: center;
  width: 100%; max-width: 420px; margin: 0 auto;
}
.size-card { flex: 0 1 200px; min-height: 96px; gap: 16px; padding: 14px 18px; justify-content: flex-start; }
.size-card canvas.mihon {
  height: 100%; aspect-ratio: 1; max-height: 168px; flex: 0 0 auto;
  border-radius: 6px; image-rendering: pixelated; object-fit: contain;
}
.size-card .txt { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; text-align: left; }
.size-card .name { font-size: 18px; font-weight: 700; }
.size-card .age { font-size: 14px; color: var(--sub); }
.size-card .grid { margin-left: 4px; white-space: nowrap; display: inline-block; }
/* おてほん の段(design/otehon.md 3.1): 縦は 2列×4行で まっしろ が1行目をぶち抜き。横は下の媒体クエリで 4列×2行 */
.oo-otehon {
  display: grid; gap: var(--gap); width: 100%; max-width: 480px; margin: 0 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr));
}
.ot-card { padding: 10px; }
.ot-card[data-otehon=""] { grid-column: 1 / -1; }
.ot-card canvas.mihon { height: 100%; max-height: 100%; max-width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 4px; image-rendering: pixelated; }

/* ── 横(landscape) ── */
@media (orientation: landscape) {
  .screen:not([data-screen="hajimari"]) { flex-direction: row; }
  .back { margin: 4px 16px 0 4px; align-self: flex-start; }
  .hj-title { height: 72px; }
  .hj-title h1 { font-size: 28px; }
  .hj-main .o-lang { max-width: 780px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hj-main > .o-lang-slot { position: absolute; top: 0; right: 0; margin: 0; }
  .hj-main > #site-home { position: absolute; top: 0; left: 76px; margin: 0; }
  .hj-main > #sound { position: absolute; top: 0; right: 76px; margin: 0; }
  .hj-doors {
    max-width: 780px; flex-basis: 260px;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr); grid-template-areas: "kaku tana heya";
  }
  .oo-cards { flex-direction: row; max-width: 760px; align-items: stretch; max-height: 300px; align-self: center; }
  .size-card { flex: 1 1 0; flex-direction: column; justify-content: center; padding: 12px; gap: 10px; }
  .size-card canvas.mihon { height: auto; width: 100%; max-width: 180px; flex: 0 1 auto; min-height: 0; }
  .size-card .txt { align-items: center; text-align: center; }
  /* 縦に並べたカードでは 大きさ を年齢の下の行に置く。1枚だけ折れて3枚の揃いが崩れた(568x320 の ほんかく ← #862 デザイナー 軽微8) */
  .size-card .grid { display: block; margin: 2px 0 0; }
  .oo-otehon { max-width: 880px; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .ot-card[data-otehon=""] { grid-column: auto; grid-row: 1 / -1; }
}
/* 低い横(568x320 など)。幅ではなく高さで切る */
@media (orientation: landscape) and (max-height: 360px) {
  :root { --gap: 12px; }
  /* 題名の行 64 = 口 56 + 入口との隙間 8。当たりを ::before で広げない(press.js は箱の中で離したときだけ発火するので、
     広げた帯は「縮むのに開かない」所になり、入口の上端まで奪った ← #デザイナー 重大) */
  .hj-title { height: 64px; }
  .hj-title h1 { font-size: 22px; }
  .hj-ie { width: 30px; height: 30px; }
  .hj-main > .o-lang-slot, .hj-main .lang-btn { width: 56px; height: 56px; flex-basis: 56px; }
  .hj-main > #site-home, .hj-main > #sound { width: 56px; height: 56px; flex-basis: 56px; }
  .hj-main > #sound { right: 68px; }
  #sound svg { width: 32px; height: 32px; }
  #site-home svg { width: 32px; height: 32px; }
  .hj-main .lang-btn svg { width: 32px; height: 32px; }
  .hj-main .f-btn { height: 44px; }
  .door .label { font-size: 14px; }
  .door-kaku .label { font-size: 18px; }
  .size-card { padding: 8px; gap: 6px; }
  .size-card canvas.mihon { max-width: 124px; }
  .size-card .name { font-size: 16px; }
  .shell-body .shell-art { width: 120px; height: 120px; }
}
/* 縦に低い画面(375x667 など): カードの高さを先に縮める */
@media (orientation: portrait) and (max-height: 700px) {
  .hj-title { height: 96px; }
  .size-card { flex-basis: 160px; }
}

/* ── えをかく 16×16(設計: .claude/rules/dotto-no-oheya/design/editor16.md) ──
   帯/列 = 時間と出入り(もどる・もどす・やりなおす・予約枠)。板の隣 = 描くこと(道具4つ + パレット 4×4)。
   板の一辺 `--board` と配置 `data-layout`(tall / short / short2 / wide)は editor16.js が実寸から決める。 */
.ed-rail { flex: 0 0 88px; display: flex; align-items: center; gap: 12px; min-width: 0; }
.ed-rail .back { margin: 0 0 0 4px; }
.ed-hist { flex: 1 1 auto; display: flex; justify-content: center; gap: 12px; }
.ed-slot { flex: 0 0 64px; width: 64px; height: 64px; }
.ed-act, .tool {
  position: relative; appearance: none; border: 0; margin: 0; padding: 0; cursor: pointer;
  background: var(--card); border-radius: 16px; box-shadow: 0 4px 0 var(--shadow);
  transition: transform 80ms ease-out, box-shadow 80ms ease-out;
  display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0;
  touch-action: none;   /* この画面は動かない。指が箱の中で 20px ずれてもブラウザに取り上げさせない(長押し・タップ ← coding/input.md #564) */
}
.ed-act { width: 64px; height: 64px; flex: 0 0 64px; }
.ed-act svg, .tool > svg:first-child { width: 72%; height: 72%; max-width: 52px; max-height: 52px; pointer-events: none; }
.ed-act.pressed, .tool.pressed { transform: scale(0.94); box-shadow: 0 1px 0 var(--shadow); }
.ed-act:focus, .tool:focus, .swatch:focus, .dot-board:focus { outline: none; }
.ed-act:focus-visible, .tool:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
/* 効かない もどす: 平ら + 矢印を影の色に(沈んで休んでいる。×や揺れは出さない) */
.ed-act[aria-disabled="true"] { --ink: var(--shadow); box-shadow: none; }
/* 選んでいる道具: 押し込まれた形 + 内側 3px の枠(色だけに頼らない) */
.tool[aria-pressed="true"] { transform: translateY(3px); box-shadow: inset 0 0 0 3px var(--ink); }
.tool[aria-pressed="true"].pressed { transform: translateY(3px) scale(0.94); }
.tool.clear { background: var(--leaf-light); margin-left: 10px; }   /* ぜんぶけす は 16px 離す(間 6 + 10) */
.tool.clear.pressed { box-shadow: 0 1px 0 var(--shadow); }
.hold-ring { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); pointer-events: none; overflow: visible; }
/* 進みは破線ではなく**扇形のマスク**で見せる(#877)。縮めて描く輪に non-scaling-stroke + pathLength の破線を使うと、
   破線の長さが画面上で伸び縮みし、輪が所要時間より早く閉じていた(16 の ぜんぶけす 800ms で約 630ms)。
   扇形なら輪の大きさ・縦横比に依らず、--p(0〜1)の進みがそのまま一周の割合になる */
@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }
.hold-ring { --p: 0; transition: --p 150ms ease-out;
  -webkit-mask: conic-gradient(#000 calc(var(--p) * 360deg), transparent 0); mask: conic-gradient(#000 calc(var(--p) * 360deg), transparent 0); }
.hold-ring rect { fill: none; stroke: var(--kaku); stroke-width: 5; vector-effect: non-scaling-stroke; }
.tool.clear[data-holding] .hold-ring { --p: 1; transition: --p 800ms linear; }
.tool.clear .broom { transform-box: fill-box; transform-origin: 50% 100%; }
.tool.clear.nudge .broom { animation: nudge 400ms ease-in-out; }
@keyframes nudge { 25% { transform: rotate(6deg); } 50% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }

.ed-main { flex: 1 1 auto; min-width: 0; min-height: 0; display: grid; gap: 12px; }
.dot-board {
  position: relative; width: var(--board, 256px); height: var(--board, 256px); align-self: center; justify-self: center;
  touch-action: none; cursor: crosshair;
  /* 透明 = 市松。1目 = マスの半分(透明マスは 2×2 の格子、白でぬったマスは無地) */
  background: repeating-conic-gradient(var(--checker-b) 0 25%, var(--checker-a) 0 50%) 0 0 / calc(var(--board, 256px) / 16) calc(var(--board, 256px) / 16);
  box-shadow: 0 0 0 2px rgba(59, 49, 39, 0.22);
}
.dot-board canvas.dot-art { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }
/* 下絵(design/otehon.md 3.2)。dot-art より前に置く = 塗ったマスが上から覆う。薄さは描く色で出す(opacity にしない) */
.dot-board canvas.dot-otehon { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.dot-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(to right, rgba(59, 49, 39, 0.18) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(59, 49, 39, 0.18) 1px, transparent 1px);
  background-size: calc(100% / 16) calc(100% / 16);
}
.dot-cursor { position: absolute; width: calc(100% / 16); height: calc(100% / 16); box-shadow: inset 0 0 0 3px var(--focus); display: none; pointer-events: none; }
.dot-board:focus-visible .dot-cursor { display: block; }
.dot-ping { position: absolute; width: calc(100% / 16); height: calc(100% / 16); border: 3px solid var(--ink); border-radius: 50%;
  pointer-events: none; animation: ping 160ms ease-out forwards; }
@keyframes ping { from { transform: scale(1); } to { transform: scale(1.4); } }
.dot-sweep { position: absolute; top: 30%; left: -40%; width: 40%; height: 40%; pointer-events: none; animation: sweep 400ms ease-in-out forwards; }
@keyframes sweep { to { transform: translateX(350%); } }

.ed-tools { display: flex; gap: 6px; min-width: 0; min-height: 0; justify-content: center; }
.ed-tools .tool { flex: 1 1 0; max-width: 120px; max-height: 96px; }   /* 大きい画面で道具が細長い柱・帯にならない */
.ed-palette { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); min-width: 0; min-height: 0;
  /* 大きい画面で色が細長い柱・帯にならない(1色 120×96 まで)。区画の上へ寄せ、横は真ん中 */
  width: 100%; height: 100%; max-width: 480px; max-height: 384px; justify-self: center; align-self: start; }
/* 当たりはマス全体(見た目の隙間 6px も当たりに含める)。見た目の色は ::after */
.swatch { position: relative; appearance: none; border: 0; margin: 0; padding: 0; background: none; cursor: pointer; min-width: 0; min-height: 0; touch-action: none; }
.swatch::after {
  content: ""; position: absolute; inset: 3px; border-radius: 12px; background: var(--sw);
  box-shadow: inset 0 0 0 1px rgba(59, 49, 39, 0.25); transition: transform 80ms ease-out;
}
.swatch[aria-checked="true"]::after { transform: scale(1.08); box-shadow: 0 0 0 2px var(--card), 0 0 0 6px var(--ink); z-index: 1; }
.swatch.pressed::after { transform: scale(0.94); }
/* 焦点の環は選んだ色の輪より上に描く(輪の下に隠れて四隅しか見えない、を避ける) */
.swatch:focus-visible::before { content: ""; position: absolute; inset: -5px; border-radius: 17px; box-shadow: 0 0 0 3px var(--focus); z-index: 2; pointer-events: none; }

/* 縦: 板 → 道具(横4)→ パレット */
.screen[data-layout="tall"] .ed-main { grid-template: "board" auto "tools" 64px "pal" minmax(0, 1fr) / minmax(0, 1fr); }
/* 縦に低い: 板の右に道具(縦4)、下にパレット */
.screen[data-layout="short"] .ed-main { grid-template: "board tools" auto "pal pal" minmax(0, 1fr) / auto minmax(0, 1fr); }
.screen[data-layout="short"] .ed-tools { flex-direction: column; height: var(--tools-h, var(--board)); }   /* max(板, 道具4つぶん)。editor16.js が決める */
.screen[data-layout="short"] .tool.clear { margin: 10px 0 0; }
.screen[data-layout="short"] .dot-board { justify-self: start; }
/* 縦がもっと低い(375x553 など): 板の右に道具を 2×2(64、間 16 = ぜんぶけす も 16 離れる)、下にパレット */
.screen[data-layout="short2"] .ed-main { grid-template: "board tools" auto "pal pal" minmax(0, 1fr) / auto minmax(0, 1fr); }
.screen[data-layout="short2"] .ed-tools { display: grid; grid-template-columns: repeat(2, 64px); grid-auto-rows: 64px; gap: 16px;
  align-content: center; height: var(--tools-h, var(--board)); }
.screen[data-layout="short2"] .tool.clear { margin: 0; }
.screen[data-layout="short2"] .dot-board { justify-self: start; }
/* 横: 左に板、右の区画に道具(横4)とパレット */
.screen[data-layout="wide"] .ed-main { grid-template: "board tools" 64px "board pal" minmax(0, 1fr) / auto minmax(0, 1fr); }
/* 568x320 より低い横(640x300 など。wide だとパレットが 56 を割る ← #862): 板・道具・パレットを横に並べ、パレットは高さいっぱい。
   道具は縦4(56 幅)、それも入らない高さは 2×2(56、間 16)。editor16.js の layoutFor が選ぶ */
.screen[data-layout="wideCol"] .ed-main { grid-template: "board tools pal" minmax(0, 1fr) / auto 56px minmax(0, 1fr); }
.screen[data-layout="wideCol"] .ed-tools { flex-direction: column; }
.screen[data-layout="wideCol"] .tool.clear { margin: 10px 0 0; }
.screen[data-layout="wide2"] .ed-main { grid-template: "board tools pal" minmax(0, 1fr) / auto 128px minmax(0, 1fr); }
.screen[data-layout="wide2"] .ed-tools { display: grid; grid-template-columns: repeat(2, 56px); grid-auto-rows: 56px; gap: 16px; align-content: center; }
.screen[data-layout="wide2"] .tool.clear { margin: 0; }
/* 殻の列が2列になる高さ(291 以下 ← #883)で幅が足りないとき: 板の下に道具 2×2 を積み、パレットは右に高さいっぱい */
.screen[data-layout="wideStack"] .ed-main { grid-template: "board pal" minmax(0, 1fr) "tools pal" 128px / auto minmax(0, 1fr); }
.screen[data-layout="wideStack"] .ed-tools { display: grid; grid-template-columns: repeat(2, 56px); grid-auto-rows: 56px; gap: 16px; justify-content: center; }
.screen[data-layout="wideStack"] .tool.clear { margin: 0; }
.screen:is([data-layout="wideCol"], [data-layout="wide2"], [data-layout="wideStack"]) .ed-palette { align-self: center; }
.dot-board { grid-area: board; }
.ed-tools { grid-area: tools; }
.ed-palette { grid-area: pal; }

@media (orientation: landscape) {
  .ed-rail { flex-direction: column; align-items: center; justify-content: space-between; width: 88px; padding: 0; }
  .ed-rail .back { margin: 4px 0 0; align-self: flex-start; margin-left: 4px; }
  .ed-hist { flex: 0 0 auto; flex-direction: column; }
}
@media (orientation: landscape) and (max-height: 360px) {
  .screen[data-layout="wide"] .ed-main { grid-template-rows: 60px minmax(0, 1fr); }
  .ed-hist { gap: 8px; }
}
/* 568x320 より低い横(#883): エディタの列は4つ(もどる・もどす/やりなおす・できた!)で、間 12 のままだと 284 要る。
   高さ 307 以下は間を詰めて残りを等分し、291 以下(1列では当たりどうしが触れる)は2列にする:
   左 = 出入り(もどる 上・できた! 下)、右 = 時間(もどす/やりなおす を縦の真ん中)。列の幅 88 → 148(64 + 8 + 64 + 板との間 12)。
   板・道具・パレットは残りの矩形から各エディタが実寸で決める(さくひんだな・おへや の列は3つなので入る = 変えない) */
@media (orientation: landscape) and (max-height: 307px) {
  .screen[data-screen="editor"] .ed-rail { gap: 0; }
}
@media (orientation: landscape) and (max-height: 291px) {
  .screen[data-screen="editor"] .ed-rail { flex: 0 0 148px; width: 148px; display: grid; column-gap: 8px; justify-content: start;
    grid-template: "back hist" minmax(0, 1fr) "slot hist" minmax(0, 1fr) / 64px 64px; }
  .screen[data-screen="editor"] .ed-rail .back { grid-area: back; align-self: start; margin: 4px 0 0 4px; }
  .screen[data-screen="editor"] .ed-hist { grid-area: hist; align-self: center; }
  .screen[data-screen="editor"] .ed-slot { grid-area: slot; align-self: end; }
}
@media (prefers-reduced-motion: reduce) {
  .dot-sweep { display: none; }
  .tool.clear.nudge .broom { animation: nudge-still 400ms steps(1, end); }   /* 止めた版も「長く押すもの」の合図は返す(傾いて止まる) */
  @keyframes nudge-still { from, to { transform: rotate(6deg); } }
  .dot-ping { animation: ping-still 160ms steps(1, end) forwards; }
  @keyframes ping-still { from, to { transform: scale(1.4); } }
}

/* ── えをかく 32×32(設計: .claude/rules/dotto-no-oheya/design/editor32.md) ──
   殻(帯/列・もどす系・ぜんぶけす・パレットの当たり)は 16 と同じ。板の隣は 道具の面 5×2 + パレット 8×4。
   配置 `data-layout`(tall32 / wide32)・板の一辺 `--board`・道具の行の高さ `--tool-h` は editor32.js が実寸から決める。 */
.screen[data-layout="tall32"] .ed-main { grid-template: "board" auto "tools" auto "pal" minmax(0, 1fr) / minmax(0, 1fr); gap: 8px; }
.screen[data-layout="wide32"] .ed-main { grid-template: "board tools" auto "board pal" minmax(0, 1fr) / auto minmax(0, 1fr); gap: 8px; }
/* 表示の低い縦(375x553 / 360x560 / 320x568 ← #862): 板の下の区画を 道具の面 と いろ の面(パレット 8×4)で差し替える(面B と同じ。覆いではない)。
   板の右に いろ の札(押すと差し替わる。いまの色が真ん中に出る)。editor32.js の layoutFor が選び、syncTool が hidden を切り替える */
.screen[data-layout="tall32i"] .ed-main { grid-template: "board iro" auto "tools tools" minmax(0, 1fr) / auto minmax(0, 1fr); gap: 8px; }
.screen[data-layout="tall32i"] .ed-palette { grid-area: tools; }
.screen[data-layout="tall32i"] .ed-kit { align-self: start; }
.ed-iro { grid-area: iro; display: none; }
.screen[data-layout="tall32i"] .ed-iro { display: flex; width: 100%; max-width: 96px; aspect-ratio: 1; align-self: end; justify-self: center; }
/* 低い横(高さ 309 以下 ← #883): 区画に 道具の面 2行 + パレット 4×40 が縦に入らない。区画の上に いろ の札(56×56。板の右上)、
   その下の面を 道具の面 と いろ の面(パレット)で差し替える(tall32i と同じ文法。覆いではない) */
.screen[data-layout="wide32i"] .ed-main { grid-template: "board iro" 56px "board tools" minmax(0, 1fr) / auto minmax(0, 1fr); gap: 12px 8px; }
.screen[data-layout="wide32i"] .ed-palette { grid-area: tools; align-self: stretch; max-height: none; }
.screen[data-layout="wide32i"] .ed-kit { align-self: start; }
.screen[data-layout="wide32i"] .ed-iro { display: flex; width: 56px; height: 56px; justify-self: start; }
.ed-kit[hidden], .ed-palette[hidden] { display: none !important; }
/* 板 = 入力の枠(動かない)。拡大は中の束 .dot-view に transform を1つ掛ける */
.dot-board.b32 { background: var(--card); overflow: hidden; }
.dot-view {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; pointer-events: none;
  /* 透明 = 市松。1目 = マスの半分(16 と同じ。拡大すると内容と一緒に拡大する) */
  background: repeating-conic-gradient(var(--checker-b) 0 25%, var(--checker-a) 0 50%) 0 0 / calc(100% / 32) calc(100% / 32);
}
.dot-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }
.b32 .dot-grid { background-size: calc(100% / 32) calc(100% / 32); }   /* 実際の寸法と位置は editor32.js が倍率から引き直す(拡大しても線は 1px) */
.screen[data-grid="off"] .b32 .dot-grid, .b32[data-fine] .dot-grid { display: none; }   /* 1マス 6px 未満は線を引かない(editor32.js の GRID_MIN) */
/* ミラーの軸(静止。点滅・流れる破線は使わない)。束の中なので太さは倍率で割る */
.dot-axis { position: absolute; top: 0; bottom: 0; left: 50%; width: calc(2px / var(--z, 1)); transform: translateX(-50%); background: var(--kaku); display: none; }
.screen[data-mirror="on"] .dot-axis { display: block; }
/* 直線の始点の印(3px --kaku のマス枠。静止) */
.dot-start { position: absolute; width: calc(100% / 32); height: calc(100% / 32); box-shadow: inset 0 0 0 calc(3px / var(--z, 1)) var(--kaku); display: none; }
.dot-board[data-line-start] .dot-start { display: block; }
.b32 .dot-cursor { width: calc(100% / 32); height: calc(100% / 32); box-shadow: inset 0 0 0 calc(3px / var(--z, 1)) var(--focus); }
.b32 .dot-ping { width: calc(100% / 32); height: calc(100% / 32); border-width: calc(3px / var(--z, 1)); }
/* 拡大中は「続きがある」を見せる: 見えていない側の縁に 6px の内側の影(静止) */
.dot-edge { position: absolute; pointer-events: none; display: none; --e: rgba(59, 49, 39, 0.45); }
.dot-edge[data-side="l"] { left: 0; top: 0; bottom: 0; width: 12px; background: linear-gradient(to right, var(--e), transparent); }
.dot-edge[data-side="r"] { right: 0; top: 0; bottom: 0; width: 12px; background: linear-gradient(to left, var(--e), transparent); }
.dot-edge[data-side="t"] { top: 0; left: 0; right: 0; height: 12px; background: linear-gradient(to bottom, var(--e), transparent); }
.dot-edge[data-side="b"] { bottom: 0; left: 0; right: 0; height: 12px; background: linear-gradient(to top, var(--e), transparent); }
.dot-board[data-more~="l"] .dot-edge[data-side="l"], .dot-board[data-more~="r"] .dot-edge[data-side="r"],
.dot-board[data-more~="t"] .dot-edge[data-side="t"], .dot-board[data-more~="b"] .dot-edge[data-side="b"] { display: block; }

/* 道具の面 5×2。5列目の前だけ間を 16(= 6 + 4 + 6。ぜんぶけす を うごかす から離す)。面の差し替えは hidden(覆いではない) */
.ed-kit {
  grid-area: tools; display: grid; gap: 6px; min-width: 0; min-height: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr)) 4px minmax(0, 1fr); grid-template-rows: repeat(2, var(--tool-h, 56px));
  width: 100%; max-width: 634px; justify-self: center;   /* 1つ 120 まで(細長い帯にしない) */
}
.ed-kit [hidden] { display: none !important; }
.ed-kit .tool.clear { margin: 0; }
.tool[data-toggle][aria-pressed="true"], .tool[data-act="move"][aria-pressed="true"] { transform: translateY(3px); box-shadow: inset 0 0 0 3px var(--ink); }
/* 切り替え(ミラー・マス目)の on は、描く道具の選択(--ink 3px)と別の見た目: --kaku の 5px(editor32.md 5章 ← デザイナー 軽微2) */
.tool[data-toggle][aria-pressed="true"] { box-shadow: inset 0 0 0 5px var(--kaku); }
.tool[data-toggle][aria-pressed="true"].pressed, .tool[data-act="move"][aria-pressed="true"].pressed { transform: translateY(3px) scale(0.94); }
.ed-palette.p32 { grid-template-columns: repeat(8, minmax(0, 1fr)); max-width: 960px; }
.ed-palette.p32 .swatch::after { inset: 2px; border-radius: 8px; }
/* 1マス 8px 未満の画面で最初のなぞりのあと、むしめがね を1回だけ揺らす(おへや の nudge と同じ 400ms。editor32.js の hintZoom ← #862) */
.tool[data-act="zoom"].nudge > svg { animation: nudge 400ms ease-in-out; }
@media (prefers-reduced-motion: reduce) { .tool[data-act="zoom"].nudge > svg { animation: none; } }
/* 32 の道具の絵: 絵そのものが状態を言う(ミラー・マス目・倍率) */
.screen[data-mirror="off"] .mir-r rect { fill: none; }
.screen[data-grid="off"] .grid-in { display: none; }
.screen:not([data-zlv="0"]) .zl0, .screen:not([data-zlv="1"]) .zl1, .screen:not([data-zlv="2"]) .zl2 { display: none; }
@media (orientation: landscape) and (max-height: 360px) {
  .screen[data-layout="wide32"] .ed-main { gap: 8px; }
}

/* ── えをかく 256×256 ほんかく(設計: .claude/rules/dotto-no-oheya/design/editor256.md) ──
   殻(帯/列・もどす系)は 16/32 と同じ。板の隣は 道具 2×5 + タブ + 面の中身1枚。
   配置 `data-layout`(tall256 / wide256)と寸法の変数(--win-w / --win-h / --sec-w / --tool-h / --tools-h / --body-h / --row-h)は editor256.js が実寸から決める。
   **絵は canvas.dot-view の1枚に窓の座標で描く**(DOM のマスを作らない)。 */
.ed-main.e256 { display: grid; gap: 8px; }
.screen[data-layout="tall256"] .ed-main { grid-template: "board" var(--win-h) "tools" var(--tools-h) "dock" minmax(0, 1fr) / minmax(0, 1fr); }
.screen[data-layout="wide256"] .ed-main { grid-template: "board tools" var(--tools-h) "board dock" minmax(0, 1fr) / var(--win-w) var(--sec-w); }
.dot-board.b256 { width: var(--win-w); height: var(--win-h); background: var(--shadow); box-shadow: none; overflow: hidden; cursor: crosshair; justify-self: center; align-self: center; }
.dot-board.b256 canvas.dot-view { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.dot-board.b256 canvas[hidden] { display: none; }
.screen[data-ctrl] .dot-board.b256 { cursor: cell; }

/* 道具 2×5(1行目は 32 と同じ並び)。アイコンの下に 11px のラベル(2行に折らない・省略しない) */
.e256-kit { grid-area: tools; display: grid; gap: 6px; min-width: 0; min-height: 0;
  grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(2, var(--tool-h, 44px)); }
.tool.t256 { flex-direction: column; gap: 1px; padding: 2px 2px 3px; border-radius: 12px; }
.t256 .t-ic { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; justify-content: center; }
.t256 .t-ic svg { width: auto; height: 100%; max-height: 30px; aspect-ratio: 1; pointer-events: none; }
.t256 .t-lb { flex: 0 0 auto; font-size: 11px; line-height: 12px; white-space: nowrap; pointer-events: none; }
.t256 .t-badge { position: absolute; right: 3px; bottom: 14px; min-width: 14px; height: 14px; padding: 0 2px; border-radius: 4px;
  background: var(--card); box-shadow: inset 0 0 0 1px var(--ink); font-size: 10px; line-height: 14px; font-weight: 700; pointer-events: none; }
.screen[data-shape="line"] .t256 .sh-in { fill: var(--card); }
.tool.t-cur { flex-direction: row; justify-content: flex-start; gap: 8px; padding: 4px 8px; }
.t-cur .cur-sw { flex: 0 0 auto; height: calc(100% - 4px); aspect-ratio: 1; border-radius: 6px; pointer-events: none;
  background: linear-gradient(var(--sw), var(--sw)), repeating-conic-gradient(var(--checker-b) 0 25%, var(--checker-a) 0 50%) 0 0 / 12px 12px;
  box-shadow: inset 0 0 0 1px rgba(59, 49, 39, 0.4); }
.t-cur .cur-txt { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; pointer-events: none; }
.t-cur .cur-lb { font-size: 11px; line-height: 13px; color: var(--sub); white-space: nowrap; }
.t-cur .cur-hex { font-size: 12px; line-height: 15px; font-family: ui-monospace, Menlo, Consolas, monospace; white-space: nowrap; }
.t-cur .cur-hex[data-tight] { font-size: 10px; letter-spacing: -0.2px; }
.t-cur .cur-no { position: absolute; left: 10px; top: 5px; font-size: 10px; font-weight: 700; line-height: 12px; padding: 0 2px; border-radius: 3px; background: var(--card); pointer-events: none; }
/* Ctrl / ⌘ を押している間: スポイトの一時の印(押し込み + 下辺 3px --kaku) */
.screen[data-ctrl] .t256[data-tool="spoit"] { transform: translateY(3px); box-shadow: inset 0 -3px 0 var(--kaku); }

/* タブ(面の切替)+ たたむ。タブの帯は面の中身と地続き(間なし) */
.e256-dock { grid-area: dock; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.e256-tabs { flex: 0 0 42px; display: flex; gap: 2px; border-bottom: 2px solid var(--shadow); }
.tab256 { appearance: none; border: 0; margin: 0; padding: 0 2px; cursor: pointer; flex: 1 1 0; min-width: 44px; height: 40px;
  background: transparent; border-radius: 10px 10px 0 0; font-size: 14px; font-weight: 700; color: var(--sub); white-space: nowrap; touch-action: none; }
.tab256[aria-selected="true"] { background: var(--card); color: var(--ink); box-shadow: inset 0 3px 0 var(--kaku); }
/* タブの字が1枚に入らなければ JS(fitTabs)が 11px → 10px へ下げる(実描画の幅で測る。折らない・省略しない ← 3.1) */
.screen[data-tab-fit] .tab256 { padding: 0; }
.screen[data-tab-fit="11"] .tab256 { font-size: 11px; }
.screen[data-tab-fit="10"] .tab256 { font-size: 10px; }
.tab256.pressed { transform: scale(0.94); }
.tab256:focus { outline: none; }
.tab256:focus-visible, .seg:focus-visible, .pg:focus-visible, .e256-pal:focus-visible, .c-track:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.e256-fold { flex: 0 0 44px; }
.e256-fold svg { width: 24px; height: 24px; margin: auto; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.e256-fold[aria-expanded="true"] svg { transform: rotate(180deg); }   /* 開いているとき v(閉じる)、閉じたとき ^(開く) */
.screen[data-layout="wide256"] .e256-fold { display: none; }
.e256-body { flex: 0 0 var(--body-h); height: var(--body-h); min-height: 0; overflow: hidden; background: var(--card); border-radius: 0 0 12px 12px; }
.screen[data-panel-open="off"] .e256-body { display: none; }
.screen[data-layout="wide256"] .e256-body { flex: 1 1 auto; height: auto; }

/* 面の中の押せる物(区切り 36×36。押し込み = 選んでいる) */
.seg, .pg { position: relative; appearance: none; border: 0; margin: 0; padding: 0 4px; cursor: pointer; min-width: 0; height: 36px;
  background: var(--bg); border-radius: 8px; box-shadow: 0 3px 0 var(--shadow); font-size: 13px; font-weight: 700; color: var(--ink);
  display: flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; touch-action: none;
  transition: transform 80ms ease-out, box-shadow 80ms ease-out; }
.seg.pressed, .pg.pressed { transform: scale(0.94); box-shadow: 0 1px 0 var(--shadow); }
.seg[aria-checked="true"], .seg[aria-pressed="true"] { transform: translateY(2px); box-shadow: inset 0 0 0 3px var(--ink); background: var(--card); }
.seg:focus, .pg:focus, .e256-pal:focus, .c-track:focus { outline: none; }
.e256-rows { display: grid; grid-template-rows: repeat(3, 36px); gap: 6px; padding: 6px 4px; }   /* 3行(どうぐ = 太さ / 形・バケツ・スポイト / 対称、みる = 拡大 / マス目 / 実寸・一覧) */
.e256-row[data-row="size"] { gap: 2px; }   /* 8つを1行に: 幅 324 の区画でも 1つ 36 以上 */
.e256-row { display: flex; gap: 4px; min-width: 0; align-items: center; margin: 0; }
.e256-row .seg { flex: 1 1 0; min-width: 0; }
.e256-row[data-row="size"] .seg { flex-direction: column; gap: 0; padding: 2px 0; }
.size-art { width: 16px; height: 16px; flex: 0 0 auto; fill: var(--ink); pointer-events: none; }
.seg-n { font-size: 11px; line-height: 12px; pointer-events: none; }
.seg-ic { width: 22px; height: 22px; flex: 0 0 auto; pointer-events: none; }
/* 対称の4つは絵の下に字(横に並べると Horizontal 等が 1/4 幅に入らない) */
.e256-row[data-row="sym"] .seg { flex-direction: column; gap: 0; padding: 1px 2px; font-size: 11px; line-height: 12px; }
.e256-row[data-row="sym"] .seg-ic { width: 20px; height: 20px; }
.e256-note { margin: 0; padding: 8px 10px; font-size: 13px; line-height: 1.4; color: var(--sub); }
/* どうぐ の面: 形の行と バケツの行と スポイトの文は同じ2行目に重ねる(どれか1つだけ見える。下を詰めない) */
.e256-rows[data-kind] { }
.e256-rows > [data-row="shape"], .e256-rows > [data-row="bucket"], .e256-rows > [data-row="spoit"] { grid-row: 2; grid-column: 1; }
.e256-rows > [data-row="sym"] { grid-row: 3; }
.e256-rows > [data-row="spoit"] { padding: 0 4px; font-size: 12px; }
.zoom-lv { flex: 1 1 0; min-width: 44px; text-align: center; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.e256-row[data-row="zoom"] .seg:not(.seg-wide) { flex: 0 0 44px; font-size: 22px; }
.seg-wide { flex: 1 1 0; }
.gc { display: flex; gap: 4px; flex: 2 1 0; min-width: 0; }
.gc .seg { flex: 1 1 0; min-width: 36px; padding: 0; }
.gc-art { width: 22px; height: 22px; pointer-events: none; border-radius: 3px;
  background: linear-gradient(to right, transparent 45%, var(--gc) 45% 55%, transparent 55%), linear-gradient(to bottom, transparent 45%, var(--gc) 45% 55%, transparent 55%),
              linear-gradient(to right, #fff 50%, #3b3127 50%); }

/* いろ: パレット 16×R(当たり = 枠の全体。見た目の 1px の隙間も当たり)+ ページ送りの列 */
.e256-iro { display: flex; gap: 4px; height: 100%; }
/* パレットの面は角を丸めない(面の角丸が 0 番・15 番・240 番・255 番の枠を切り欠いていた。丸みはタブの帯と面の外の余白側で持つ) */
.screen[data-panel="iro"] .e256-body { border-radius: 0; }
.e256-pal { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); grid-template-rows: repeat(var(--rows), minmax(0, 1fr)); touch-action: none; }
.sw256 { position: relative; appearance: none; border: 0; margin: 0; padding: 0; background: none; cursor: pointer; min-width: 0; min-height: 0; touch-action: none; }
.sw256::after { content: ""; position: absolute; inset: 1px 1px 0 0; border-radius: 2px;
  background: linear-gradient(var(--sw), var(--sw)), repeating-conic-gradient(var(--checker-b) 0 25%, var(--checker-a) 0 50%) 0 0 / 8px 8px; }
.sw256[data-light]::after { box-shadow: inset 0 0 0 1px rgba(59, 49, 39, 0.25); }
.sw256[aria-selected="true"]::after { box-shadow: 0 0 0 1px var(--card), 0 0 0 4px var(--ink); z-index: 1; }
@media (hover: hover) { .sw256:hover::before { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px var(--ink); z-index: 2; pointer-events: none; } }
.e256-pages { flex: 0 0 32px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 2px; }
.e256-pages .pg { width: 32px; height: auto; flex: 1 1 0; max-height: 56px; min-height: 0; padding: 0; }
.e256-pages .pg svg { width: 18px; height: 18px; fill: var(--ink); pointer-events: none; }
.pg-no { flex: 0 0 auto; font-size: 11px; font-weight: 700; }
.e256-loupe { position: fixed; width: 56px; height: 56px; border-radius: 10px; pointer-events: none; z-index: 20;
  background: linear-gradient(var(--sw), var(--sw)), repeating-conic-gradient(var(--checker-b) 0 25%, var(--checker-a) 0 50%) 0 0 / 14px 14px;
  box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--ink), 0 4px 8px rgba(0, 0, 0, 0.25); }
.e256-loupe .lp-no { position: absolute; left: 2px; top: 2px; font-size: 11px; font-weight: 700; padding: 0 3px; border-radius: 3px; background: var(--card); color: var(--ink); }

/* つくる: 上の行(見本・番号・マスの数・# 入力・RGB/HSV)+ スライダー4本(行全体が当たり) */
.e256-color { display: grid; grid-template-rows: 36px repeat(4, 26px); row-gap: 0; padding: 2px 6px; height: 100%; align-content: start; }
.c-top { display: flex; align-items: center; gap: 4px; min-width: 0; margin-bottom: 4px; }
.c-sw { position: relative; flex: 0 0 32px; height: 32px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(59, 49, 39, 0.4);
  background: linear-gradient(var(--sw), var(--sw)), repeating-conic-gradient(var(--checker-b) 0 25%, var(--checker-a) 0 50%) 0 0 / 10px 10px; }
/* 番号は見本の左上の小さな札。字の行(マスの数・入力の見本)は 2行まで折って、どの幅でも省略しない */
.c-no { position: absolute; left: 0; top: 0; padding: 0 2px; border-radius: 6px 0 4px 0; background: var(--card); font-size: 10px; line-height: 12px; font-weight: 700; color: var(--ink); }
.c-txt { flex: 1 1 auto; min-width: 0; max-height: 36px; display: flex; flex-direction: column; justify-content: center; font-size: 11px; line-height: 13px; overflow: hidden; }
.c-count, .c-hint { color: var(--sub); white-space: normal; overflow-wrap: anywhere; }
.c-hint[hidden], .c-count[hidden] { display: none; }
.c-hex { flex: 0 0 86px; width: 86px; height: 32px; box-sizing: border-box; border: 2px solid var(--shadow); border-radius: 6px; padding: 0 4px;
  font: 13px ui-monospace, Menlo, Consolas, monospace; color: var(--ink); background: #fff; -webkit-user-select: text; user-select: text; }
.c-hex:focus, .c-num:focus { outline: 3px solid var(--focus); outline-offset: 0; }
.c-mode { display: flex; gap: 3px; }
.c-mode .seg { width: 36px; padding: 0; font-size: 11px; }
.c-sl { position: relative; display: flex; align-items: center; gap: 6px; height: 26px; touch-action: none; cursor: pointer; }
.c-name { flex: 0 0 12px; font-size: 12px; font-weight: 700; text-align: center; pointer-events: none; }
.c-track { position: relative; flex: 1 1 auto; height: 14px; border-radius: 7px; background: var(--band), repeating-conic-gradient(var(--checker-b) 0 25%, var(--checker-a) 0 50%) 0 0 / 8px 8px;
  box-shadow: inset 0 0 0 1px rgba(59, 49, 39, 0.35); }
.c-thumb { position: absolute; top: -4px; left: calc(var(--p, 0) * 100% - 5px); width: 10px; height: 22px; border-radius: 4px;
  background: var(--card); box-shadow: 0 0 0 2px var(--ink); pointer-events: none; }
.c-num { flex: 0 0 48px; width: 48px; height: 24px; box-sizing: border-box; border: 2px solid var(--shadow); border-radius: 6px; padding: 0 4px;
  font: 12px ui-monospace, Menlo, Consolas, monospace; text-align: right; color: var(--ink); background: #fff; -webkit-user-select: text; user-select: text; }

/* え: ずらす 4 / 反転 2 +(16 空けて)ぜんぶけす */
.e256-e { display: grid; grid-template-rows: repeat(2, 44px); gap: 8px; padding: 8px; }
.e-row { display: flex; gap: 6px; }
.tool.t-e { flex: 1 1 0; max-width: 72px; height: 44px; border-radius: 12px; }
.tool.t-e > svg:first-child { width: 36px; height: 36px; }
.e-gap { flex: 0 0 10px; }
.tool.t-e.clear { margin: 0; }

/* ── 256 の後半(#856。設計: editor256.md 9章) ── */
/* 支援技術へ流す一言(見えない。指に透明) */
.sr-live, .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; pointer-events: none; }
/* タブが6つ: 320 幅だけ 1枚 42px を許す(9.3) */
@media (max-width: 340px) { .screen[data-layout="tall256"] .tab256 { min-width: 40px; } }

/* せいり の面: タブの帯が せいりの帯に差し替わる(同じ高さ。覆いではない ← 9.2) */
.e256-sortbar { display: none; flex: 0 0 42px; gap: 4px; align-items: center; border-bottom: 2px solid var(--shadow); padding: 0 2px; min-width: 0; }
.screen[data-sorting] .e256-tabs { display: none; }
.screen[data-sorting] .e256-sortbar { display: flex; }
.sb-mode { display: flex; gap: 4px; flex: 2 1 0; min-width: 0; }
.e256-sortbar .seg { height: 40px; flex: 1 1 0; min-width: 64px; font-size: 12px; padding: 0 4px; }
.e256-sortbar .sb-mode .seg { font-size: 11px; padding: 0 2px; gap: 2px; }
.e256-sortbar .sb-mode .seg-ic { width: 20px; height: 20px; }
.e256-sortbar .sb-purge { flex: 2 1 0; white-space: normal; line-height: 13px; font-size: 11px; text-align: left; }
.sb-purge-lb { pointer-events: none; word-break: keep-all; overflow-wrap: break-word; }
.seg .hold-ring { visibility: hidden; }
.seg[data-holding] .hold-ring { visibility: visible; }
.seg[data-holding] .hold-ring { --p: 1; transition: --p 800ms linear; }
@media (max-width: 340px) { .e256-sortbar .sb-mode .seg { font-size: 10px; padding: 0 2px; gap: 2px; } .e256-sortbar .sb-mode .seg-ic { width: 18px; height: 18px; } }
.seg.nudge .seg-ic { animation: nudge 400ms ease-in-out; }
@media (prefers-reduced-motion: reduce) { .seg.nudge .seg-ic { animation: nudge-still 400ms steps(1, end); } }
/* いろ の右の列は常設: 一番上に せいり、R<16 のときだけページ送り(32×40) */
.e256-pages { justify-content: flex-start; }
.e256-pages .pg { flex: 0 0 40px; height: 40px; max-height: 40px; }
.e256-pages .pg svg { width: 20px; height: 20px; }
.e256-pages .pg-sp { flex: 1 1 0; min-height: 0; }
/* 面の中身が 144 より低い横(パレット 4 行 ← #883): 右の列を 2×2(せいり ▲ / 番号 ▼)にして高さ 84 に収める。幅は view.js の PAGE_COL2 */
.screen[data-pages="2"] .e256-pages { flex: 0 0 68px; display: grid; grid-template: "sort up" 40px "no down" 40px / 32px 32px; gap: 4px; align-content: start; }
.screen[data-pages="2"] .e256-pages .pg-sp { display: none; }
.screen[data-pages="2"] .e256-pages .pg-sort { grid-area: sort; }
.screen[data-pages="2"] .e256-pages [data-act="page-up"] { grid-area: up; }
.screen[data-pages="2"] .e256-pages [data-act="page-down"] { grid-area: down; }
.screen[data-pages="2"] .e256-pages .pg-no { grid-area: no; align-self: center; justify-self: center; }
.pg-sort[aria-expanded="true"] { transform: translateY(2px); box-shadow: inset 0 0 0 3px var(--kaku); background: var(--card); }
/* 持ち上げた枠: 3px --kaku の輪(いまの色の輪 --ink と色で分ける) */
.sw256[data-lifted]::after { box-shadow: 0 0 0 1px var(--card), 0 0 0 4px var(--kaku); z-index: 2; }
/* 面の縁(左の列・上の行・下の行)の枠は、輪(外へ 4px)の分だけ色の地を内へ引き、輪を面の中に収める。
   面の箱(.e256-body の overflow: hidden)が輪を切っていた(#862 デザイナー 軽微6)。面に余白を足すとピッチが 18 を割るので、枠の側で譲る */
.sw256:is([aria-selected="true"], [data-lifted]):nth-child(16n+1)::after { left: 4px; }
.sw256:is([aria-selected="true"], [data-lifted]):nth-child(-n+16)::after { top: 4px; }
.sw256:is([aria-selected="true"], [data-lifted]):nth-last-child(-n+16)::after { bottom: 4px; }
.sw256.pressed::after { transform: scale(0.9); }

/* どうぐ(範囲選択): 3行。範囲が無いときは1行目の場所に案内の1行 */
.e256-rows.e256-sel { grid-template-rows: repeat(3, 36px); }
.e256-sel > [data-row="selmove"], .e256-sel > [data-row="selhint"] { grid-row: 1; grid-column: 1; }
.e256-sel > [data-row="seledit"] { grid-row: 2; }
.e256-sel > [data-row="selall"] { grid-row: 3; }
.e256-sel .seg-wide { font-size: 12px; }

/* かさね: 札 4つ(見本 36 + 目 36 を縦に)+ 手の行 36(9.3) */
.e256-kasane { display: flex; flex-direction: column; gap: 8px; padding: 8px 4px; }
.k-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.k-card { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.k-thumb { position: relative; appearance: none; border: 0; margin: 0; padding: 0; height: 36px; border-radius: 8px; cursor: pointer; touch-action: none;
  background: repeating-conic-gradient(var(--checker-b) 0 25%, var(--checker-a) 0 50%) 0 0 / 8px 8px; box-shadow: inset 0 0 0 1px rgba(59, 49, 39, 0.35);
  display: flex; align-items: center; justify-content: center; transition: transform 80ms ease-out; }
.k-thumb canvas { width: 36px; height: 36px; image-rendering: pixelated; pointer-events: none; }
.k-thumb .k-no { position: absolute; left: 2px; top: 2px; font-size: 10px; font-weight: 700; line-height: 12px; padding: 0 3px; border-radius: 3px; background: var(--card); pointer-events: none; }
.k-thumb[aria-checked="true"] { box-shadow: 0 0 0 1px var(--card), 0 0 0 4px var(--ink); }
.k-thumb.pressed { transform: scale(0.94); }
.k-thumb:focus { outline: none; }
.k-thumb:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* 見えていないレイヤー: 見本に斜線の地(静止。薄くしない)+ 目が閉じる */
.k-card[data-hidden] .k-thumb::after { content: ""; position: absolute; inset: 0; border-radius: 8px; pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(59, 49, 39, 0.55) 0 2px, transparent 2px 7px); }
.k-eye { height: 36px; }
.k-eye .seg-ic { width: 24px; height: 24px; }
.k-eye .eye-closed, .k-eye[aria-pressed="false"] .eye-open { display: none; }
.k-eye[aria-pressed="false"] .eye-closed { display: flex; }
.k-eye[aria-pressed="true"] { transform: none; box-shadow: 0 3px 0 var(--shadow); background: var(--bg); }   /* 目は切り替え: 開いているのが普段の姿 */
.k-eye .eye-open, .k-eye .eye-closed { width: 24px; height: 24px; pointer-events: none; }
.k-acts .seg { flex: 1 1 0; }

/* みる の一時の面(左 = 中身、右 = 32 幅の列 ← 9.4) */
.e256-face { display: flex; gap: 4px; height: 100%; padding: 2px 0 2px 4px; box-sizing: border-box; }
.f-main { flex: 1 1 auto; min-width: 0; min-height: 0; overflow: hidden; }
.f-col { flex: 0 0 32px; display: flex; flex-direction: column; gap: 2px; align-items: center; }
.f-col .pg-no { line-height: 13px; }
.f-back { position: relative; }
.f-col .f-back .f-back-arr { position: absolute; left: 2px; top: 2px; width: 11px; height: 11px; pointer-events: none; }   /* 線の端まで viewBox と角丸の内側に収める(上端で切れていた ← #862 デザイナー 軽微5) */
.f-col .f-back > svg:first-child { transform: translate(2px, 3px); }   /* 面の絵を右下へ寄せ、‹ と重ねない */
.f-col .pg { width: 32px; height: 40px; flex: 0 0 40px; padding: 0; }
.f-col .pg svg { width: 20px; height: 20px; fill: var(--ink); pointer-events: none; }
.f-col .f-back svg { fill: none; }
.f-radio { display: flex; flex-direction: column; gap: 4px; }
.f-radio .seg { width: 32px; height: 40px; padding: 0; font-size: 10px; white-space: normal; line-height: 11px; }
.pv-box { display: flex; align-items: center; justify-content: center; }
canvas.pv { image-rendering: pixelated; box-shadow: 0 0 0 1px rgba(59, 49, 39, 0.4); }
.ki-list { display: grid; grid-template-rows: repeat(var(--ki-rows), 22px); grid-template-columns: repeat(var(--ki-cols), minmax(0, 1fr)); grid-auto-flow: column; column-gap: 8px; }
.ki { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; line-height: 22px; white-space: nowrap; overflow: hidden; }
.ki-head { font-weight: 700; color: var(--sub); }
.ki-keys { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; }
.ki kbd { font: 700 11px/16px ui-monospace, Menlo, Consolas, monospace; padding: 0 4px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--ink); background: var(--bg); }
.ki-plus, .ki-or { font-size: 10px; color: var(--sub); }
.ki-lb { min-width: 0; overflow: hidden; }
.ki-list[data-small] .ki { font-size: 10px; }
.ki-list[data-small] .ki kbd { font-size: 10px; padding: 0 3px; }

/* ── 低い面(設計: editor256.md 3.4.1 ← #1214) ──
   面の中身がパレット 4 行の高さ(< 144)の横では、どの面も2行(区切り 36・行の間 4・上下の余白 4 = 84)に組み替える。
   **印 `data-dock="low"` は editor256.js の relayout だけが書く**(layoutFor が pages: 2 を返したとき)。高さのメディアクエリで別に切らない。
   いろ・え のファイルの面・せいりの帯は #883 のまま(ここで触らない)。焦点の順は DOM の順のまま(見た目の並べ替えだけ)。 */
/* どうぐ(描く道具): 1行目 太さ 8 / 2行目 左 = 線・ぬり か バケツの2つ(同じ場所に重ねる)、右 = 対称 4つ(絵だけ)。スポイトの文は2行目いっぱい */
.screen[data-dock="low"] .e256-rows[data-kind="dougu"] { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: repeat(2, 36px); gap: 4px 8px; padding: 4px; }
.screen[data-dock="low"] .e256-rows[data-kind="dougu"] > [data-row="size"] { grid-row: 1; grid-column: 1 / -1; }
.screen[data-dock="low"] .e256-rows[data-kind="dougu"] > [data-row="shape"],
.screen[data-dock="low"] .e256-rows[data-kind="dougu"] > [data-row="bucket"] { grid-row: 2; grid-column: 1; }
.screen[data-dock="low"] .e256-rows[data-kind="dougu"] > [data-row="spoit"] { grid-row: 2; grid-column: 1 / -1; line-height: 14px; }
.screen[data-dock="low"] .e256-rows[data-kind="dougu"] > [data-row="sym"] { grid-row: 2; grid-column: 2; gap: 2px; }
.screen[data-dock="low"] .e256-row[data-row="sym"] .seg { flex: 0 0 40px; padding: 0; }
.screen[data-dock="low"] .e256-row[data-row="sym"] .seg-lb { display: none; }   /* 名前は aria-label(と、ホバーできる端末の title ← tips) */
.screen[data-dock="low"] .e256-row[data-row="sym"] .seg-ic { width: 24px; height: 24px; }
/* 2行まで折ってよい字(線・ぬり / バケツ / マス目 / ぜんたい)。語の途中では折らない・省略しない */
.screen[data-dock="low"] :is([data-row="shape"], [data-row="bucket"]) .seg,
.screen[data-dock="low"] .e256-rows[data-kind="miru"] :is([data-act="fit"], [data-act="grid"]) {
  white-space: normal; word-break: keep-all; font-size: 12px; line-height: 13px; text-align: center; padding: 0 4px; }
/* どうぐ(範囲選択): 左 = 5×2(← ↑ ↓ → 回転 / 反転 2・コピー・はりつけ・けす。各 40)、8 空けて 右 = ぜんぶ えらぶ / やめる を縦に */
.screen[data-dock="low"] .e256-rows.e256-sel { grid-template-columns: 216px minmax(0, 1fr); grid-template-rows: repeat(2, 36px); gap: 4px 8px; padding: 4px; }
.screen[data-dock="low"] .e256-sel > [data-row="selmove"], .screen[data-dock="low"] .e256-sel > [data-row="selhint"] { grid-row: 1; grid-column: 1; }
.screen[data-dock="low"] .e256-sel > [data-row="seledit"] { grid-row: 2; grid-column: 1; }
.screen[data-dock="low"] .e256-sel > [data-row="selall"] { grid-row: 1 / span 2; grid-column: 2; flex-direction: column; align-items: stretch; gap: 4px; }
.screen[data-dock="low"] .e256-sel :is([data-row="selmove"], [data-row="seledit"]) .seg { flex: 0 0 40px; }
.screen[data-dock="low"] .e256-sel [data-row="selall"] .seg { flex: 0 0 36px; }
.screen[data-dock="low"] .e256-sel > [data-row="selhint"] { padding: 0 4px; font-size: 12px; line-height: 14px; }
/* みる: 1行目 − 倍率 + ぜんたい |(8)マス目 / 2行目 線の色 4 |(8)じっすん・いちらん。行の入れ物を外して1本の並びを折り返す(DOM の順 = 読む順) */
.screen[data-dock="low"] .e256-rows[data-kind="miru"] { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; padding: 4px; }
.screen[data-dock="low"] .e256-rows[data-kind="miru"] > .e256-row { display: contents; }
.screen[data-dock="low"] .e256-rows[data-kind="miru"] .zoom-lv { flex: 0 0 44px; height: 36px; line-height: 36px; font-size: 13px; text-align: center; }   /* ×0.23 が 15px では 49.6 で + に食い込む。13px で幅 44 に入れる */
.screen[data-dock="low"] .e256-rows[data-kind="miru"] :is([data-act="fit"], [data-act="grid"]) { flex: 1 1 96px; }
.screen[data-dock="low"] .e256-rows[data-kind="miru"] [data-act="grid"] { margin-left: 4px; }
.screen[data-dock="low"] .e256-rows[data-kind="miru"] .gc { flex: 0 0 156px; }
.screen[data-dock="low"] .e256-rows[data-kind="miru"] [data-row="faces"] .seg { flex: 1 1 88px; flex-direction: column; gap: 0; padding: 0 2px; font-size: 11px; line-height: 12px; }
.screen[data-dock="low"] .e256-rows[data-kind="miru"] [data-act="face-jissun"] { margin-left: 4px; }
.screen[data-dock="low"] .e256-rows[data-kind="miru"] [data-row="faces"] .seg-ic { width: 20px; height: 20px; }
/* みる の一時の面: 右の列を 2×2(68×84。いろ の右の列と同じ文法)。じっすん = もどる・1ばい / 空き・2ばい、いちらん = もどる・▲ / 番号・▼ */
.screen[data-dock="low"] .e256-face:is([data-face="jissun"], [data-face="ichiran"]) .f-col {
  flex: 0 0 68px; display: grid; grid-template: "back a" 40px "c d" 40px / 32px 32px; gap: 4px; align-content: start; }
.screen[data-dock="low"] .e256-face .f-col .f-back { grid-area: back; }
.screen[data-dock="low"] .e256-face .f-col .f-radio { grid-column: 2; grid-row: 1 / span 2; }
.screen[data-dock="low"] .e256-face .f-col [data-act="ki-up"] { grid-area: a; }
.screen[data-dock="low"] .e256-face .f-col .pg-no { grid-area: c; align-self: center; justify-self: center; }
.screen[data-dock="low"] .e256-face .f-col [data-act="ki-down"] { grid-area: d; }
/* え: ボタンの高さ 36(絵 28)・行の間 6 = 86 */
.screen[data-dock="low"] .e256-e { grid-template-rows: repeat(2, 36px); gap: 6px; padding: 4px 8px; }
.screen[data-dock="low"] .tool.t-e { height: 36px; }
.screen[data-dock="low"] .tool.t-e > svg:first-child { width: 28px; height: 28px; }
/* かさね: 札 = 見本(左、≥ 36)と目(右、36)を横に / 手の行 5つ = 84 */
.screen[data-dock="low"] .e256-kasane { gap: 4px; padding: 4px; }
.screen[data-dock="low"] .k-card { flex-direction: row; }
.screen[data-dock="low"] .k-thumb { flex: 1 1 auto; min-width: 36px; }
.screen[data-dock="low"] .k-eye { flex: 0 0 36px; width: 36px; padding: 0; }
/* つくる: 上の1行そのまま + スライダーを 2×2(R G / B A、H S / V A)。上 2・間 2・下 0 = 92(余白を足すと A が切れる) */
.screen[data-dock="low"] .e256-color { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 38px 26px 26px; column-gap: 12px; padding: 2px 6px 0; }
.screen[data-dock="low"] .c-top { grid-column: 1 / -1; align-self: start; height: 36px; margin: 0; }

/* ── さくひんだな(設計: .claude/rules/dotto-no-oheya/design/tana.md) ──
   帯/列 = もどる・もどす(しまう/ふくせい を戻す)・予約枠。格子の列×行と一辺は tana.js の gridFor が実寸から決める。
   縦: 格子の下に ◀ 点 ▶ / 横: 格子の両脇に ◀ ▶、下に点。**スクロールしない**(ページで送る) */
.tana-main { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; display: grid; gap: 12px;
  grid-template: "grid grid grid" minmax(0, 1fr) "prev dots next" 80px / 80px minmax(0, 1fr) 80px; }
.tana-grid { grid-area: grid; min-width: 0; min-height: 0; display: grid; gap: 12px;
  align-content: center; justify-content: center; touch-action: none; }
.tana-page { grid-area: prev; width: 80px; height: 80px; flex: none; align-self: center; }
.tana-page[data-act="page-next"] { grid-area: next; }
.tana-page svg { width: 64%; height: 64%; }
.tana-dots { grid-area: dots; display: flex; align-items: center; justify-content: center; gap: 10px; pointer-events: none; min-width: 0; overflow: hidden; }
/* ページが多いと間(--dg。tana.js が区画の幅から決める)を詰め、それでも入らなければほかの点が縮む。いまの点は縮めない(#857 デザイナー 重大1) */
.tana-dots { gap: var(--dg, 10px); }
.tana-dots i { flex: 0 1 10px; min-width: 3px; aspect-ratio: 1; border-radius: 50%; background: var(--shadow); }
.tana-dots i.on { flex: 0 0 16px; background: var(--ink); }
@media (orientation: landscape) {
  /* 点の行は低く詰める(低い横で格子に 3 行を残す) */
  .tana-main { grid-template: "prev grid next" minmax(0, 1fr) ". dots ." 16px / 80px minmax(0, 1fr) 80px; row-gap: 4px; }
}
/* 作品カード(押せる = カードの文法)。できた = 木の額縁 / かきかけ = 細い縁 + 鉛筆の印 */
.tana-grid .card { border-radius: 16px; position: relative; touch-action: none; }
.work { padding: 6px; }
.work canvas.thumb { display: block; pointer-events: none; image-rendering: pixelated; border-radius: 2px;
  background: repeating-conic-gradient(var(--checker-b) 0 25%, var(--checker-a) 0 50%) 0 0 / var(--ck, 12px) var(--ck, 12px);
  box-shadow: 0 0 0 2px rgba(59, 49, 39, 0.22); }
.work[data-size="256"] canvas.thumb { image-rendering: auto; }
.work[data-done] canvas.thumb { box-shadow: 0 0 0 1px var(--wood-dark), 0 0 0 5px var(--wood); }
.work .mark { position: absolute; right: -4px; bottom: -4px; width: 26px; height: 26px; pointer-events: none; }
.work .mark:empty { display: none; }
.work .hold-ring { visibility: hidden; }
.work[data-holding] .hold-ring { visibility: visible; }
.work[data-holding] .hold-ring { --p: 1; transition: --p 500ms linear; }
.work[data-open], .work[data-just] { box-shadow: 0 4px 0 var(--shadow), 0 0 0 4px var(--kaku); }
.work[data-open] { transform: scale(1.06); z-index: 2; }
.work[data-just] { animation: just 360ms ease-out; }
@keyframes just { from { transform: scale(0.6); } 70% { transform: scale(1.08); } to { transform: scale(1); } }
.tana-kaku { background: linear-gradient(rgba(217, 119, 75, 0.18), rgba(217, 119, 75, 0.18)), var(--card); box-shadow: 0 4px 0 var(--kaku); }
.tana-kaku.pressed { box-shadow: 0 1px 0 var(--kaku); }
.tana-kaku .art { width: 72%; height: 72%; }
.tana-kaku[data-just] { box-shadow: 0 4px 0 var(--kaku), 0 0 0 4px var(--kaku); animation: just 360ms ease-out; }
.tana-empty, .tana-wait { border: 2px dashed var(--shadow); border-radius: 16px; pointer-events: none; }
.tana-wait { display: flex; align-items: center; justify-content: center; padding: 10%; }
@media (prefers-reduced-motion: no-preference) {
  .screen[data-screen="tana"][data-empty] .tana-kaku .art,
  .tana-wait svg { animation: yobu 2s ease-in-out infinite; }
}
/* ページ送り: 送った向きから 200ms で入る(transform だけ)/ ▶ の「向こうに続く」は1回だけ */
.tana-grid.slide-l { animation: slide-l 200ms ease-out; }
.tana-grid.slide-r { animation: slide-r 200ms ease-out; }
@keyframes slide-l { from { transform: translateX(40px); } to { transform: none; } }
@keyframes slide-r { from { transform: translateX(-40px); } to { transform: none; } }
.tana-page.hint svg { animation: hint 400ms ease-in-out 2; }
@keyframes hint { 50% { transform: translateX(6px); } }
/* 手元の面(長押しで出る。覆いではない)。押したカードの下 / 上に、三角の口でつながる */
.tana-pop { position: absolute; z-index: 5; display: flex; gap: 12px; padding: 8px; background: var(--card); border-radius: 16px;
  box-shadow: 0 4px 0 var(--shadow), 0 0 0 2px rgba(59, 49, 39, 0.12); }
.tana-pop::before { content: ""; position: absolute; left: calc(var(--ax, 50%) - 9px); top: -9px; width: 18px; height: 18px;
  background: var(--card); transform: rotate(45deg); box-shadow: -2px -2px 0 0 rgba(59, 49, 39, 0.12); }
.tana-pop[data-side="above"]::before { top: auto; bottom: -9px; box-shadow: 2px 2px 0 0 rgba(59, 49, 39, 0.12); }
.tana-pop .pop-btn { width: 80px; height: 80px; flex: 0 0 80px; }
/* できた! のあと自動で出る かざる の面は、作品から出てくる動きで現れる(いきなり現れて驚かせない。transform だけ) */
@media (prefers-reduced-motion: no-preference) {
  .tana-pop[data-kazaru] { transform-origin: var(--ax, 50%) 0; animation: pop-in 150ms ease-out; }
  .tana-pop[data-kazaru][data-side="above"] { transform-origin: var(--ax, 50%) 100%; }
}
@keyframes pop-in { from { transform: scale(0.8); } }
.tana-pop .pop-btn svg { width: 72%; height: 72%; }
.pop-btn.shimau { background: var(--leaf-light); }
/* 棚の もどす は しまう / ふくせい を戻せるときだけ見せる(効かないのに常に置くと、意味の分からないボタンになる)。場所は空けたまま */
.screen[data-screen="tana"] .ed-hist [data-act="undo"][aria-disabled="true"] { visibility: hidden; }
.pop-btn.shimau .hold-ring { visibility: hidden; }
.pop-btn.shimau[data-holding] .hold-ring { visibility: visible; }
.pop-btn.shimau[data-holding] .hold-ring { --p: 1; transition: --p 800ms linear; }
.pop-btn.shimau .box { transform-box: fill-box; transform-origin: 50% 100%; }
.pop-btn.shimau.nudge .box { animation: nudge 400ms ease-in-out; }

/* できた!(3つのエディタの予約枠 64×64)。棚の できた カードと同じ額 + 星 */
.ed-slot .dekita { width: 64px; height: 64px; }
.dekita .dk-frame { display: block; width: 38px; height: 38px; pointer-events: none; }
.dekita canvas.dk-thumb { display: block; width: 38px; height: 38px; image-rendering: pixelated; border-radius: 1px;
  background: repeating-conic-gradient(var(--checker-b) 0 25%, var(--checker-a) 0 50%) 0 0 / 8px 8px;
  box-shadow: 0 0 0 1px var(--wood-dark), 0 0 0 5px var(--wood); }
.dekita[data-size="256"] canvas.dk-thumb { image-rendering: auto; }
.dekita .dk-star { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; pointer-events: none; }
.dekita[aria-disabled="true"] canvas.dk-thumb { box-shadow: 0 0 0 1px var(--shadow), 0 0 0 5px var(--shadow); }
.dekita[aria-disabled="true"] .dk-star path { fill: var(--shadow); stroke: var(--shadow); }

@media (prefers-reduced-motion: reduce) {
  .tana-kaku[data-just], .work[data-just], .tana-grid.slide-l, .tana-grid.slide-r { animation: none; }
  .tana-page.hint svg { animation: hint-still 400ms steps(1, end); }
  @keyframes hint-still { from, to { transform: translateX(6px); } }
  .pop-btn.shimau.nudge .box { animation: nudge-still 400ms steps(1, end); }
}

/* ── おとなのかた・ファイル(#858。設計: .claude/rules/dotto-no-oheya/design/fairu.md) ──
   入口 = 棚の予約枠の小さな丸(1500ms 長押し)。画面は覆いではなく1枚(スクロール 0)。音は鳴らさない。 */
.ed-slot:has(.otona-key) { position: relative; }
.otona-key { position: absolute; top: 0; right: 0; width: 40px; height: 40px; padding: 0; margin: 0; border: 0; appearance: none; cursor: pointer;
  border-radius: 50%; background: var(--card); box-shadow: 0 2px 0 var(--shadow); touch-action: none;
  display: flex; align-items: center; justify-content: center; transition: box-shadow 80ms ease-out; }
.otona-key::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; }   /* 当たり 48×48 */
.otona-key:focus { outline: none; }
.otona-key:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.otona-key .otona-ic { width: 26px; height: 26px; fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none; transition: transform 80ms ease-out; }
.otona-key.pressed { box-shadow: 0 0 0 var(--shadow); }
.otona-key.pressed .otona-ic { transform: scale(0.94); }   /* 箱は縮めない(当たりを保つ ← coding/input.md) */
.otona-key .hold-ring { visibility: hidden; }
.otona-key .hold-ring rect { stroke-width: 8.3; vector-effect: none; }   /* 縮めて描く輪(48 / viewBox 100)で non-scaling-stroke だと破線が約2倍に効き、1500ms の前に閉じる(#858 デザイナー 重大1)。線は 4 ÷ 0.48 */
.otona-key[data-holding] .hold-ring { visibility: visible; }
/* 輪は 500ms 待ってから回る(ぜんぶけす の 800ms の輪と同じ見え方で「押し続ければ何か起きる」を誘わない ← #858 保護者 軽微2) */
.otona-key[data-holding] .hold-ring rect { stroke-dashoffset: 0; transition: stroke-dashoffset 1000ms linear 500ms; }
.otona-key.nudge .otona-ic { animation: nudge 400ms ease-in-out; }
@media (orientation: landscape) { .otona-key { top: auto; right: auto; bottom: 0; left: 0; } }
.otona-hint { position: absolute; z-index: 5; margin: 0; max-width: 240px; padding: 8px 12px; border-radius: 12px;
  background: var(--card); box-shadow: 0 0 0 2px var(--ink); font-size: 14px; font-weight: 700; line-height: 1.35; pointer-events: none; }

.otona-body { flex: 1 1 auto; min-width: 0; min-height: 0; overflow: hidden; width: 100%; max-width: 480px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.otona-title { margin: 0; font-size: 20px; line-height: 28px; flex: 0 0 auto; text-align: center; }
.o-pick { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 108px; }
.o-work { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.o-work canvas.thumb { width: 72px; height: 72px; display: block; image-rendering: pixelated; border-radius: 2px;
  background: repeating-conic-gradient(var(--checker-a) 0 25%, var(--checker-b) 0 50%) 0 0 / 12px 12px; }
.o-work canvas.thumb[data-size="256"] { image-rendering: auto; }
.o-work[data-done] canvas.thumb { box-shadow: 0 0 0 1px var(--wood-dark), 0 0 0 5px var(--wood); }
.o-cap { font-size: 13px; line-height: 16px; color: var(--sub); white-space: nowrap; display: flex; flex-direction: column; align-items: center; }
.o-cap .o-size { color: var(--ink); font-weight: 700; }
.o-none { display: none; margin: 0; font-size: 15px; color: var(--sub); }
.screen[data-screen="otona"][data-empty] .o-arrow, .screen[data-screen="otona"][data-empty] .o-work { display: none; }
.screen[data-screen="otona"][data-empty] .o-none { display: block; }
.screen[data-screen="otona"][data-empty] .f-block[data-step="main"] [data-row="png"],
.screen[data-screen="otona"][data-empty] .f-block[data-step="main"] [data-row="save"],
.screen[data-screen="otona"][data-empty] .f-px { display: none; }   /* 押せないボタンを残さない(3.2) */
.o-files { flex: 0 0 auto; }
/* 知らせは 2行ぶんを常に取る(名前入りの「ダウンロードしました」は 375 幅で 2行になり、1行ぶんだと出た瞬間に本体が 10px 上下した ← #858 デザイナー 軽微) */
.o-files .f-status { height: 40px; overflow: hidden; }
.o-store { flex: 0 0 auto; margin: 0; font-size: 13px; line-height: 16px; color: var(--sub); text-align: center; }
.otona-body[data-step="choose"] .o-pick, .otona-body[data-step="choose"] .o-store { display: none; }

/* ファイルの中身(fairu.js。おとなのかた = full / 256 の一時の面 = compact) */
.f-block { display: flex; flex-direction: column; gap: 8px; }
.f-block[hidden] { display: none; }
.f-row { display: flex; gap: 8px; min-width: 0; }
.f-btn { position: relative; appearance: none; border: 0; margin: 0; padding: 0 8px; cursor: pointer; min-width: 0;
  flex: 1 1 0; height: 48px; border-radius: 12px; background: var(--card); box-shadow: 0 3px 0 var(--shadow);
  font: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; color: var(--ink); touch-action: none;
  display: flex; align-items: center; justify-content: center; text-align: center; word-break: keep-all; overflow-wrap: break-word;
  transition: transform 80ms ease-out, box-shadow 80ms ease-out; }
.f-btn.pressed { transform: scale(0.94); box-shadow: 0 1px 0 var(--shadow); }
.f-btn:focus { outline: none; }
.f-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.f-btn[aria-checked="true"] { transform: translateY(2px); box-shadow: inset 0 0 0 3px var(--ink); }
.f-btn[aria-disabled="true"] { box-shadow: none; background: var(--bg); color: var(--sub); outline: 2px dashed var(--shadow); outline-offset: -2px; }
.f-scale { display: flex; gap: 6px; flex: 1 1 auto; min-width: 0; }
.f-k { height: 40px; min-width: 44px; font-size: 14px; white-space: nowrap; padding: 0 2px; }
.f-px, .f-note, .f-q { margin: 0; font-size: 13px; line-height: 16px; color: var(--sub); text-align: center; }
.f-q { font-size: 15px; color: var(--ink); font-weight: 700; }
.f-status { margin: 0; min-height: 20px; font-size: 13px; line-height: 20px; font-weight: 700; text-align: center; overflow-wrap: anywhere; }
.f-prev { display: flex; justify-content: center; }
.f-mihon { width: 160px; height: 160px; image-rendering: pixelated; border-radius: 2px;
  background: repeating-conic-gradient(var(--checker-a) 0 25%, var(--checker-b) 0 50%) 0 0 / 16px 16px; }
.f-mihon[data-size="256"] { image-rendering: auto; }
.f-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.o-arrow { flex: 0 0 48px; width: 48px; height: 48px; padding: 0; border-radius: 50%; }
.o-arrow svg { width: 26px; height: 26px; fill: none; stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }

/* 縦に低い(360x560 など): 行の間と絵を詰める */
@media (orientation: portrait) and (max-height: 620px) {
  .otona-body { gap: 6px; }
  .f-block { gap: 6px; }
  .f-btn { height: 44px; }
  .f-mihon { width: 128px; height: 128px; }
}
/* 横・低い横: 列 88 の右を2段組み(左 = 見出し + R1、右 = R2〜R6) */
@media (orientation: landscape) {
  .otona-body { max-width: 760px; display: grid; gap: 6px 20px; align-content: center;
    grid-template: "title files" auto "pick files" auto "pick store" auto / minmax(0, 200px) minmax(0, 1fr); }
  .otona-title { grid-area: title; }
  .o-pick { grid-area: pick; align-self: start; gap: 12px; }   /* 48 + 12 + 72 + 12 + 48 = 192 ≤ 左の段 200(間 16 だと 200 ちょうど + 字の幅で ◀ の左端が段の外へ切れた ← #858 デザイナー 軽微) */
  .o-files { grid-area: files; }
  .o-store { grid-area: store; }
  .f-block, .otona-body { gap: 6px; }
  .f-btn { height: 44px; }
  .otona-body[data-step="choose"] { grid-template: "title title" auto "files files" auto / minmax(0, 1fr); }
  .o-files .f-block[data-step="choose"] { flex-direction: row; align-items: center; justify-content: center; gap: 20px; }
  .o-files .f-block[data-step="choose"] .f-side { flex: 0 1 320px; }
  .f-mihon { width: 160px; height: 160px; }
}
@media (orientation: landscape) and (max-height: 360px) {
  .otona-title { font-size: 18px; line-height: 24px; }
  .o-files .f-status { font-size: 12px; line-height: 13px; display: flex; align-items: center; justify-content: center; }   /* 幅 250 の右の段: 長い言語の「いっぱい」は3行になる(3 × 13 ≤ 40) */
  .f-mihon { width: 132px; height: 132px; }
}

/* ことば(#860。設計: fairu.md 3.4)。口 = 帯の右端 / 列の下端の予約枠 64×64。押すと中身が一覧に差し替わる(覆いではない) */
.o-lang-slot { margin-left: auto; }
.lang-btn { width: 64px; height: 64px; }
.lang-btn svg { width: 36px; height: 36px; fill: none; stroke: var(--ink); stroke-width: 8.5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.lang-btn[aria-expanded="true"] { transform: translateY(3px); box-shadow: inset 0 0 0 3px var(--ink); }
.otona-body[data-step="lang"] > :not(.otona-title):not(.o-lang) { display: none; }
.o-lang { flex: 0 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.o-lang[hidden] { display: none; }
.lang-item, .lang-close { gap: 6px; overflow-wrap: normal; word-break: normal; }
.lang-item .lang-name { min-width: 0; }   /* 2語の名前(Bahasa Indonesia)は語の間でだけ2行に折り返す(1語は割らない = overflow-wrap: normal)。
   nowrap だと 568x320 / 320x568 で札から 2〜5px はみ出した(2026-10-02 実測)。2行 = 36px は札の 44 に入る */
.lang-check, .lang-back { flex: 0 0 auto; width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.lang-item[aria-checked="false"] .lang-check { display: none; }   /* 選んでいる印 = 3px の枠 + チェックの形(色だけに頼らない) */
@media (orientation: landscape) {
  .o-lang-slot { margin-left: 0; }
  .otona-body[data-step="lang"] { grid-template: "title" auto "lang" auto / minmax(0, 1fr); }
  .o-lang { grid-area: lang; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 256 の「え」の一時の面(compact。36 の3行 ← 3.3) */
.f-files { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 28px; gap: 4px; padding: 4px 0; box-sizing: border-box; }
.f-files .f-block { gap: 4px; min-height: 0; min-width: 0; }   /* 列を中のボタン名の幅まで広げない(568x320 で面の外へ出た ← #858 デザイナー 重大2) */
.f-files .f-row { gap: 4px; }
.f-files .f-btn { height: 36px; font-size: 13px; padding: 0 4px; border-radius: 8px; white-space: nowrap; overflow-wrap: normal; overflow: hidden;
  background: var(--bg); }   /* 面の地は --card。表示 の面の .seg と同じ --bg の地にして、ボタンに見せる(#862 デザイナー 軽微3) */
.f-files .f-btn[aria-checked="true"] { background: var(--card); }   /* 選んだ倍率は .seg と同じ: カードの地 + 枠 */
.f-files .f-png { flex: 0 1 auto; padding: 0 8px 0 6px; gap: 3px; margin-right: 6px; }   /* 保存の絵 + 間 10 で、倍率の札の仲間に見せない(地の色は ドットファイルで ほぞん と同じまま = 色で意味を分けない) */
.f-png .f-ic { flex: 0 0 auto; width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.f-files .f-k { min-width: 0; font-size: 12px; }
.f-files .f-block[data-step="choose"] { flex-direction: row; gap: 8px; align-items: stretch; }
.f-files .f-prev { flex: 0 0 auto; }
.f-files .f-mihon { width: auto; height: 100%; max-height: 120px; aspect-ratio: 1; }
.f-files .f-side { flex: 1 1 auto; justify-content: center; gap: 4px; }
.f-files .f-q { display: none; }
.f-files [data-step="choose"] .f-btn, .f-files [data-row="open"] .f-btn { white-space: normal; word-break: keep-all; overflow-wrap: break-word; line-height: 1.1; font-size: 12px; }
.f-files .f-status { min-height: 0; height: 28px; line-height: 14px; font-size: 12px; text-align: left; overflow: hidden; overflow-wrap: anywhere; }   /* 2行まで(1行の省略記号だとファイル名の終わりが読めなかった ← #858 デザイナー 軽微) */

@media (prefers-reduced-motion: reduce) {
  .otona-key.nudge .otona-ic { animation: nudge-still 400ms steps(1, end); }
}

/* ── おへや(#859。設計: .claude/rules/dotto-no-oheya/design/oheya.md) ──
   帯/列 = もどる・もようがえ・予約枠。本体の中の部屋(24:20)とトレイの区画の位置・大きさは heya.js が layoutFor で決める。
   トレイの区画は差し替えの面(tray / motimono / moyougae)で、覆いではない。ゴーストはドラッグの間だけ作る。 */
.heya-main { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; }
.heya-room { position: absolute; touch-action: none; }
.heya-bg { position: absolute; inset: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 2px rgba(59, 49, 39, 0.22); pointer-events: none; }
.heya-bg svg { width: 100%; height: 100%; }
/* 置き場所(button)。見た目の額は当たりより小さくてよい(当たりは部屋ぜんぶ = cellAt) */
.spot { position: absolute; appearance: none; border: 0; margin: 0; padding: 0; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; overflow: visible; touch-action: none; }
.spot[data-align="bottom"] { align-items: flex-end; }
.spot:focus { outline: none; }
.spot:focus-visible::after { content: ""; position: absolute; inset: -6px; border-radius: 8px; box-shadow: 0 0 0 3px var(--focus); pointer-events: none; }
/* 空いた場所 = 点線の枠(押せる形のカードにはしない)。持っている間は「置ける」= 実線 --kaku(静止) */
.spot::before { content: ""; position: absolute; inset: 0; border-radius: 6px; border: 2px dashed rgba(59, 49, 39, 0.35);
  display: none; pointer-events: none; transition: transform 80ms ease-out; }
.spot:not([data-id])::before, .spot[data-lifted]::before { display: block; }
.heya-room[data-holding] .spot:not([data-id])::before { border: 3px solid var(--kaku); }
.spot.pressed:not([data-id])::before { transform: scale(1.06); }
.spot.poke::before { animation: poke 240ms ease-out; }
@keyframes poke { 50% { transform: scale(1.06); } }
.spot[data-target]:not([data-id])::before, .spot[data-target][data-lifted]::before { border: 4px solid var(--kaku); transform: scale(1.04); }
/* 飾った絵。額は絵の外側(box-shadow の外側の影は絵の中 = 透明のマスに描かれない → 壁が透ける) */
.heya-pic { position: relative; display: block; line-height: 0; pointer-events: none; }
.heya-pic canvas { display: block; image-rendering: pixelated; }
.heya-pic canvas[data-scale^="1/"] { image-rendering: auto; }
.spot:not([data-id]) .heya-pic, .spot[data-lifted] .heya-pic { display: none; }
.heya-pic[data-frame="moku"] { box-shadow: 0 0 0 1px var(--wood-dark), 0 0 0 5px var(--wood), 0 2px 0 5px rgba(59, 49, 39, 0.2); }
.heya-pic[data-frame="shiro"] { box-shadow: 0 0 0 4px var(--card), 0 0 0 5px rgba(59, 49, 39, 0.25), 0 2px 0 5px rgba(59, 49, 39, 0.2); }
.heya-pic[data-frame="dotto"] { box-shadow: 0 2px 0 5px rgba(59, 49, 39, 0.2); }
.heya-pic[data-frame="dotto"]::before { content: ""; position: absolute; inset: -5px; padding: 5px;
  background: conic-gradient(from 90deg at 2px 2px, transparent 25%, var(--card) 0) -1px -1px / 5px 5px, var(--leaf);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.heya-pic[data-frame="nashi"] canvas { filter: drop-shadow(0 2px 0 rgba(59, 49, 39, 0.2)); }
/* 持っている輪・押した輪・行き先の輪(額の外周に 4px --kaku。静止) */
.heya-pic::after { content: ""; position: absolute; inset: -5px; border-radius: 3px; box-shadow: 0 0 0 4px var(--kaku); display: none; }
.heya-pic[data-frame="nashi"]::after { inset: -1px; }
.spot[aria-pressed="true"] .heya-pic::after, .spot.pressed[data-id] .heya-pic::after, .spot[data-target][data-id]:not([data-lifted]) .heya-pic::after { display: block; }
.spot.pop .heya-pic { animation: pop 200ms ease-out; }
@keyframes pop { from { transform: scale(1.08); } to { transform: none; } }

/* トレイの区画(地は --card 40% の平らな面。影なし・押せない)。部屋の絵を運んでいる間、トレイの上は --leaf-light = 「ここで離すと はずれる」 */
.heya-tray { position: absolute; border-radius: 16px; background: rgba(255, 250, 240, 0.4); touch-action: none; }
.heya-tray[data-drop] { background: var(--leaf-light); }
.heya-grid { position: absolute; display: grid; gap: 12px; align-content: center; justify-content: center; touch-action: none; }
.heya-grid[hidden], .heya-send[hidden], .heya-mochi[hidden] { display: none; }
.heya-grid .card { border-radius: 16px; position: relative; touch-action: none; }
.heya-grid .tray-work { padding: 6px; }
.heya-grid .tray-work[data-just] { box-shadow: 0 4px 0 var(--shadow), 0 0 0 4px var(--kaku); animation: just 360ms ease-out; }
.heya-grid .heya-empty { border: 2px dashed var(--shadow); border-radius: 16px; pointer-events: none; }
.heya-grid .nudge { animation: hint 400ms ease-in-out 2; }
.heya-grid.slide-l { animation: slide-l 200ms ease-out; }
.heya-grid.slide-r { animation: slide-r 200ms ease-out; }
.heya-sw { padding: 6px; overflow: hidden; }
.heya-gap { pointer-events: none; }
.heya-sw svg { border-radius: 10px; pointer-events: none; }
.heya-sw[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--card), 0 0 0 6px var(--ink); }
.heya-send { position: absolute; left: 0; right: 0; bottom: 0; height: var(--send, 64px); display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.heya-send .heya-page { width: var(--send, 64px); height: var(--send, 64px); flex: 0 0 var(--send, 64px); }
.heya-send .heya-page svg { width: 64%; height: 64%; }
.heya-dots { flex: 1 1 auto; }
/* 手元の面(額 4 + はずす)。位置と一辺は heya.js の mochiFit */
.heya-mochi { position: absolute; inset: 0; }
.heya-mochi .card { position: absolute; border-radius: 16px; touch-action: none; }
.heya-fr .heya-pic::after { display: none; }
.heya-fr[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--card), 0 0 0 6px var(--ink); }
.heya-hazusu { background: var(--card); }
.heya-hazusu svg { width: 72%; height: 72%; pointer-events: none; }
/* 運ぶ絵(ドラッグの間だけ。指に透明) */
.heya-ghost { position: absolute; left: 0; top: 0; z-index: 10; pointer-events: none; will-change: transform; filter: drop-shadow(0 6px 0 rgba(59, 49, 39, 0.18)); }
.heya-ghost.back { transition: transform 160ms ease-out; }
@media (prefers-reduced-motion: reduce) {
  .heya-ghost.back { transition: none; }
  .spot.pop .heya-pic, .spot.poke::before, .heya-grid.slide-l, .heya-grid.slide-r, .heya-grid .tray-work[data-just] { animation: none; }
  .heya-grid .nudge { animation: hint-still 400ms steps(1, end); }
}

/* ── リンクで みせる(#1375。設計: .claude/rules/dotto-no-oheya/design/share.md) ── */
/* おとなのかた の R3b: 字の前に つながった2つの輪。R3 の行の中で折り返して全幅の2段目にする(DOM の順 = 焦点の順は PNG → ドットファイル → リンク) */
.f-row[data-row="save"] { flex-wrap: wrap; }
.f-row[data-row="save"] .f-share { flex: 1 0 100%; }
.f-share { gap: 6px; }
.f-share .f-ic { flex: 0 0 auto; width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 2.4; pointer-events: none; }
.f-share[aria-disabled="true"] .f-ic { stroke: var(--sub); }
/* 共有も コピーも できないとき、R6 の場所に出す読み取り専用の欄(高さ 32・13px)。行の高さは R6 の文のまま(otona.js が測って保つ = 行が跳ねない) */
.o-store[data-link] { display: flex; align-items: center; }
.o-link { width: 100%; height: 32px; margin: 0; padding: 0 8px; border: 2px solid var(--shadow); border-radius: 8px; background: var(--card);
  font: inherit; font-size: 13px; color: var(--ink); -webkit-user-select: text; user-select: text; }
.o-link:focus { outline: 3px solid var(--focus); outline-offset: 1px; }
/* 高さ 620 以下の縦: 2段目を置くとスクロールが出た(実測 360x560 で 16px あふれた)ので、R3 と R3b を1行3つに組む。字は2行まで(大人の面だけ) */
@media (orientation: portrait) and (max-height: 620px) {
  .f-row[data-row="save"] .f-share { flex: 1 1 0; }
  .f-row[data-row="save"] .f-btn { padding: 0 4px; font-size: 13px; line-height: 15px; }
  .f-share { gap: 3px; }
  .f-share .f-ic { width: 16px; height: 16px; }
}

/* とどいた え(miseru)。寸法 --mi-side(絵の一辺 = n の整数倍)/ --mi-ch(カードの高さ)/ --mi-cw(横の列の幅)/ --mi-art は miseru.js が実寸から決める */
.mi-body { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.mi-pic { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 12px; width: var(--mi-side, 256px); }
.mi-frame { width: var(--mi-side, 256px); height: var(--mi-side, 256px); flex: 0 0 auto; pointer-events: none;
  background: repeating-conic-gradient(var(--checker-b) 0 25%, var(--checker-a) 0 50%) 0 0 / calc(var(--mi-side, 256px) / 16) calc(var(--mi-side, 256px) / 16);
  box-shadow: 0 0 0 1px var(--wood-dark), 0 0 0 5px var(--wood); }   /* 棚の できた と同じ木の額(4px --wood + 内 1px --wood-dark) */
.mi-art { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.mi-empty { width: var(--mi-side, 256px); height: var(--mi-side, 256px); flex: 0 0 auto; border: 2px dashed var(--shadow); border-radius: 16px; pointer-events: none; }
.mi-broken { margin: 0; height: 40px; font-size: 13px; line-height: 20px; color: var(--sub); text-align: center; overflow: hidden; }
.mi-cards { flex: 0 0 auto; display: flex; gap: 12px; width: max(var(--mi-side, 256px), 204px); max-width: 100%; height: var(--mi-ch, 120px); }
.mi-card { flex: 1 1 0; flex-direction: column; gap: 4px; padding: 8px; min-width: 0; }
.mi-card .art { flex: 0 0 auto; width: var(--mi-art, 64px); height: var(--mi-art, 64px); }
.mi-card .label { flex: 0 0 auto; max-width: 100%; font-size: 15px; font-weight: 700; line-height: 18px; text-align: center; overflow-wrap: anywhere; word-break: keep-all; }
.mi-kaku { box-shadow: 0 4px 0 var(--kaku); }   /* はじまり の かく と同じ地(同じ絵に同じ意味) */
.mi-kaku.pressed { box-shadow: 0 1px 0 var(--kaku); }
.mi-ta { position: relative; display: block; }
.mi-mini { position: absolute; left: 0; bottom: 0; width: 62%; height: 62%; image-rendering: pixelated; border-radius: 2px;
  background: repeating-conic-gradient(var(--checker-b) 0 25%, var(--checker-a) 0 50%) 0 0 / 25% 25%; box-shadow: 0 0 0 2px var(--wood); }
.mi-pen { position: absolute; right: 0; top: 0; width: 58%; height: 58%; }
@media (orientation: landscape) {
  .mi-body { flex-direction: row; }
  .mi-cards { flex-direction: column; width: var(--mi-cw, 180px); height: auto; }
  .mi-card { flex: 0 0 var(--mi-ch, 140px); height: var(--mi-ch, 140px); }
}
/* 低い横(568x320): 2段目で右の段が 18px あふれた。1行3つは右の段 236 で1つ 73px になり「ドットファイルで ほぞん」が3行に割れたので、
   R6(保存の説明)を左の段(見出し + R1 の下。余りが 160px ある)へ移して右の段を空ける */
@media (orientation: landscape) and (max-height: 360px) {
  .otona-body { grid-template: "title files" auto "pick files" auto "store files" 1fr / minmax(0, 200px) minmax(0, 1fr); }
  .o-store { align-self: start; }
}