/* ドット文字メーカー。画面の枠は水文字メーカー(water-maker.css)と同じで、ここはドット文字だけの見た目 */

/* キャンバスは透明に描く(保存は透過PNG)。画面では、ドットが映える夜のゲーム画面のような地にする。方眼はドット1つと同じマスで、エンジンがキャンバスに描く。
   黒っぽい文字のときは、明るい地に替える(is-light-stage。pixelController が付け外しする) */
.pixel-maker .stage { background:#1d2238; touch-action:manipulation; }
.pixel-maker .stage.is-light-stage { background:#f3f1f6; }
.pixel-maker .stage .stage-label { box-shadow:0 1px 4px rgba(0,0,0,.25); }
.pixel-maker .stage .hint, .pixel-maker .stage .tap-hint { color:#e9ecff; text-shadow:0 1px 3px rgba(0,0,0,.6); }
.pixel-maker .stage.is-light-stage .hint, .pixel-maker .stage.is-light-stage .tap-hint { color:#4a3f4c; text-shadow:0 0 6px #fff; }
.pixel-maker .stage.tappable { cursor:pointer; }
.pixel-maker .stage canvas { image-rendering:auto; }

/* 色・仕上げのタブ(3D文字メーカーと同じ見た目。数に合わせて等分) */
.pixel-maker .pixel-tabs { display:grid; grid-template-columns:repeat(var(--n, 3), minmax(0, 1fr)); gap:6px; margin-bottom:12px; }
.pixel-maker .pixel-tabs .chip { width:100%; min-height:44px; padding-left:4px; padding-right:4px; }
.pixel-maker .pixel-note { margin:0 0 10px; color:var(--sub); font-size:12px; line-height:1.5; text-align:center; }

/* 見本の帯(区切り・立体)。自分の文字で描いたドットを等分に並べる */
.pixel-maker .pixel-choice { min-width:0; margin-bottom:10px; }
.pixel-maker .pixel-choice h2 { margin:0 0 6px; }
.pixel-maker .pixel-choice .thumb { min-width:0; height:108px; }
.pixel-maker .pixel-choice .thumb-name { font-size:12px; white-space:nowrap; }
.pixel-maker .thumb > .thumb-canvas img { object-fit:contain; }
/* 見本のタイルも、キャンバスと同じ暗い地にする(白い文字・消えた点が見えるように) */
.pixel-maker .thumb > .thumb-canvas { background:#1d2238; border-radius:8px; }
.pixel-maker.pixel-light-art .thumb > .thumb-canvas { background:#f3f1f6; }
@media (max-width:420px) { .pixel-maker .pixel-choice .thumb { height:96px; } .pixel-maker .pixel-choice .thumb-name { font-size:11px; } }

/* 文字なしの段階ボタン(細かさ・すきま・向き・変わり方・ふち・背景・光)。数に合わせて等分。図は上に */
.pixel-maker .pixel-options { display:grid; grid-template-columns:repeat(var(--n, 3), minmax(0, 1fr)); gap:6px; }
.pixel-maker .pixel-option { border-radius:14px; display:flex; align-items:center; justify-content:center; width:100%; height:auto; min-height:44px; padding:6px 2px; white-space:nowrap; }
.pixel-maker .pixel-option.has-icon { min-height:72px; flex-direction:column; gap:4px; padding:8px 2px 6px; }
.pixel-maker .pixel-option-icon { width:32px; height:32px; flex:0 0 auto; shape-rendering:crispEdges; }
.pixel-maker .pixel-option[aria-pressed="true"] .pixel-option-icon { color:var(--accent); }
@media (max-width:420px) { .pixel-maker .pixel-option { font-size:11px; } .pixel-maker .pixel-option-icon { width:28px; height:28px; } }
/* グラデの向きと変わり方は、横に並べる(どちらも短い) */
.pixel-maker .pixel-group { margin:14px 0 0; border-radius:16px; background:rgba(255,255,255,.06); }
.pixel-maker.theme-light .pixel-group { background:rgba(150,60,95,.07); }
.pixel-maker .pixel-group + .pixel-group { margin-top:10px; }
/* 枠の中は「見出し | ボタン」の横1行にして、縦にのびないようにする(色の手順はパネルの高さで画面の幅が決まる) */
.pixel-maker .pixel-group { padding:8px 8px 8px 12px; }
.pixel-maker .pixel-group .pixel-choice { display:grid; grid-template-columns:4.2em minmax(0, 1fr); align-items:center; gap:8px; margin:0; }
.pixel-maker .pixel-group .pixel-choice h2 { margin:0; text-align:left; }
.pixel-maker .pixel-group .pixel-option.has-icon { min-height:48px; flex-direction:row; gap:4px; padding:4px 4px; }
.pixel-maker .pixel-group .pixel-option-icon { width:24px; height:24px; flex:0 0 auto; }

/* 色の丸。1列に並べて横にスクロールする(ほかのメーカーの色選びと同じ)。名前は上に1つだけ */
.pixel-maker .pixel-color-name { display:flex; justify-content:center; margin:2px 0 8px; }
.pixel-maker .pixel-color-name b { font-size:17px; }
.pixel-maker .pixel-palette {
  display:flex; gap:10px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; scrollbar-color:rgba(82,75,79,.34) transparent;
  padding:6px 6px 10px; margin:0 -6px 12px;
}
.pixel-maker .pixel-palette.is-scrolling { scrollbar-width:thin; }
.pixel-maker .pixel-palette::-webkit-scrollbar { height:0; }
.pixel-maker .pixel-palette.is-scrolling::-webkit-scrollbar { height:6px; }
.pixel-maker .pixel-palette::-webkit-scrollbar-thumb { border-radius:999px; background:rgba(82,75,79,.34); }
/* 色見本はドットらしく、陰のない平らな四角(立体に見せない。2026-11-07 ユーザー指示) */
.pixel-maker .pixel-dot {
  flex:0 0 auto; width:44px; height:44px; padding:0; border-radius:2px; border:1px solid rgba(255,255,255,.22);
  background:var(--dot); box-shadow:none; cursor:pointer;
}
.pixel-maker .pixel-dot.is-lead { position:relative; }
/* 「なし」: 1色のまま(斜線で、2つ目の色がないことを示す) */
.pixel-maker .pixel-dot.is-none::after { content:""; position:absolute; inset:6px; background:linear-gradient(135deg, transparent 45%, rgba(0,0,0,.45) 45% 55%, transparent 55%); border-radius:0; }
.pixel-maker .pixel-dot[aria-pressed="true"] { border-color:#fff; box-shadow:0 0 0 3px var(--accent); }
.pixel-maker.theme-light .pixel-dot { border-color:rgba(0,0,0,.14); }
.pixel-maker.theme-light .pixel-dot[aria-pressed="true"] { border-color:#fff; }
.pixel-maker .pixel-dot:focus-visible { outline:3px solid #fff; outline-offset:3px; }
/* 手がきのぬる色: キャンバスにある色の下に「ほかの色を選ぶ」(カラーピッカー)。選ぶ前は虹色、選んだあとはその色の四角 */
.pixel-maker .pixel-canvas-colors { justify-content:safe center; }
.pixel-maker .pixel-ends { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 10px; }
.pixel-maker .pixel-end { display:flex; align-items:center; justify-content:flex-start; gap:8px; min-height:48px; padding:4px 10px; border-radius:14px; text-align:left; }
.pixel-maker .pixel-end-swatch { flex:0 0 auto; width:26px; height:26px; border-radius:2px; border:1px solid rgba(0,0,0,.18); background:var(--dot); }
.pixel-maker .pixel-end-text { display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.pixel-maker .pixel-end-text small { font-size:11px; opacity:.7; }
.pixel-maker .pixel-end-text b { font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pixel-maker .pixel-palette-label { margin:6px 0 4px; font-size:12px; font-weight:700; opacity:.7; text-align:center; }
.pixel-maker .pixel-other-row { display:flex; justify-content:center; margin:10px 0 4px; }
.pixel-maker .pixel-other-row.is-off, .pixel-maker .pixel-paint-effects.is-off { opacity:.35; }
.pixel-maker .pixel-other { position:relative; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px 0 8px; cursor:pointer; }
.pixel-maker .pixel-other-swatch { width:28px; height:28px; border-radius:2px; border:1px solid rgba(0,0,0,.18); background:conic-gradient(#ff4d4d, #ffd23a, #4ee06a, #3ac8ff, #6a5cff, #ff4dd8, #ff4d4d); }
.pixel-maker .pixel-other.is-on { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent); }
.pixel-maker .pixel-other.is-on .pixel-other-swatch { background:var(--dot); }
.pixel-maker .pixel-custom-input { position:absolute; inset:0; width:100%; height:100%; opacity:0; border:0; padding:0; cursor:pointer; }
.pixel-maker .pixel-other:focus-within { outline:3px solid var(--accent); outline-offset:2px; }

/* 手がき(効果の「手がき」タブ)。キャンバスをなぞってぬるので、スマホでページが動かないようにする */
.pixel-maker .stage.is-paint { touch-action:none; cursor:crosshair; user-select:none; }
.pixel-maker .pixel-tools { margin-bottom:12px; }
.pixel-maker .pixel-brush { margin-bottom:12px; }
.pixel-maker .pixel-tool { flex-direction:row; gap:6px; min-height:48px; font-size:14px; }
.pixel-maker .pixel-tool .ms { font-size:22px; }
.pixel-maker .pixel-tool[aria-pressed="true"] .ms { color:var(--accent); }
.pixel-maker .pixel-palette.is-off { opacity:.35; }
.pixel-maker .pixel-clear-row { display:flex; justify-content:center; margin:-2px 0 12px; }
.pixel-maker .pixel-clear { height:36px; padding:0 14px; font-size:13px; }
.pixel-maker .pixel-clear:disabled { opacity:.4; cursor:default; }
/* 手がきが消えることの確認 */
.pixel-confirm { border:1px solid var(--line); box-sizing:border-box; max-width:min(420px, calc(100vw - 32px)); }
.pixel-confirm::backdrop { background:rgba(0,0,0,.55); }
.pixel-confirm-text { margin:0 0 16px; color:var(--sub); font-size:14px; line-height:1.6; }
.pixel-confirm-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pixel-confirm-actions > button { box-sizing:border-box; width:100%; height:48px; padding:0; margin:0; }