/* つぶデコのメーカー(ロゴメーカー)の作りに合わせる: 1画面に収まる・1行の横スクロール・保存の帯は常に下 */
:root { --bg:#161214; --surface:#221c1f; --surface2:#2d2529; --line:#3a3035; --text:#f6eef2; --sub:#b7aab0; --stage:#1f191c; --stage-dot:rgba(255,255,255,.07); --accent:#bd4a78; --accent-deep:#8f2e56; --accent-hi:#ff7aa8; --step-done-text:#2a1420; --praise-stroke:#1c1719; --bounce:cubic-bezier(.34,1.56,.64,1); --guide:30px; --head-extra:calc(40px + var(--guide)); }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; margin:0; }
body { background:var(--bg); color:var(--text); font-family:"Noto Sans JP",system-ui,sans-serif; }
.ms { font-family:"Material Symbols Rounded"; font-weight:normal; font-style:normal; font-size:24px; line-height:1; display:inline-block; white-space:nowrap; direction:ltr; -webkit-font-smoothing:antialiased; font-feature-settings:"liga"; }
.lm { position:fixed; inset:0; display:flex; flex-direction:column; overflow:hidden; background:var(--bg); color:var(--text); }
.step-guide { flex:none; padding:0 16px 8px; text-align:center; }
.step-guide-title { display:block; font-size:18px; font-weight:800; line-height:22px; }
.step-guide-sub { display:none; margin-top:2px; font-size:12px; line-height:16px; color:var(--sub); }
@media (min-height:760px) { .step-guide-sub { display:block; } :root { --guide:48px; } }
.workspace { position:relative; flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.stage { --sh:calc(min(50vh, 520px) - var(--head-extra)); position:relative; width:min(calc(100% - 16px), calc(var(--sh) * 5 / 3)); aspect-ratio:5 / 3; height:auto; margin:0 auto; border-radius:20px; overflow:hidden; display:grid; place-items:center; background-color:var(--stage); background-image:radial-gradient(var(--stage-dot) 1px, transparent 1px); background-size:16px 16px; touch-action:none; }

.stage.stage-done { --sh:min(54vh, 520px); }
.stage-art { width:100%; height:100%; min-height:0; display:grid; place-items:center; }
.stage canvas { display:block; width:100%; height:100%; touch-action:none; }
.stage-label { position:absolute; z-index:2; top:12px; left:12px; padding:3px 10px; border-radius:999px; background:var(--accent); color:#fff; font-size:11px; font-weight:700; line-height:1.4; pointer-events:none; }
/* 読み込み中は文字が入る前の空のラベルが細い線に見えるので、文字が入るまで出さない */
.stage-label:empty { display:none; }
.tap-hint { position:absolute; right:12px; bottom:12px; display:flex; align-items:center; gap:4px; color:var(--sub); font-size:11px; pointer-events:none; } .tap-hint .ms { font-size:16px; }
.hint { position:absolute; left:0; right:0; bottom:10px; text-align:center; font-size:13px; font-weight:700; color:#e6f4ff; pointer-events:none; text-shadow:0 0 8px #000, 0 0 3px #000; }
.stage.tappable { cursor:pointer; user-select:none; }

.panel { width:min(100%, 560px); margin:10px auto 0; padding:0 12px 12px; text-align:center; }
.text-field textarea { display:block; width:100%; height:auto; min-height:82px; padding:12px 14px; border:2px solid var(--line); border-radius:14px; background:var(--surface); color:var(--text); font:700 20px/1.4 "Noto Sans JP",sans-serif; resize:none; } .text-field textarea:focus { outline:none; border-color:var(--accent); }
.text-meta { display:flex; justify-content:space-between; margin-top:6px; color:var(--sub); font-size:11px; }
.btn-main { display:flex; width:100%; height:52px; margin-top:12px; align-items:center; justify-content:center; gap:6px; border:0; border-radius:999px; background:var(--accent); color:#fff; font:900 16px "Noto Sans JP",sans-serif; cursor:pointer; box-shadow:0 4px 0 var(--accent-deep); transition:transform .1s, box-shadow .1s, background .15s; }
.btn-main .ms { font-size:20px; } .btn-main:active { transform:translateY(2px); box-shadow:0 2px 0 var(--accent-deep); } .btn-main:disabled { background:var(--surface2); color:var(--sub); box-shadow:none; cursor:not-allowed; }
.flip-row { display:grid; grid-template-columns:minmax(0, 1fr); align-items:center; gap:8px; margin-top:12px; }
.flip-name { text-align:center; } .flip-name b { display:block; font-size:20px; font-weight:900; } .flip-name small { display:block; margin-top:2px; color:var(--sub); font-size:12px; }
.round { width:48px; height:48px; padding:0; border:0; border-radius:999px; display:grid; place-items:center; background:var(--surface2); color:var(--text); cursor:pointer; }
.strip-wrap { position:relative; min-width:0; margin-top:10px; }
.strip { display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; cursor:grab; scroll-padding-inline:52px; justify-content:safe center; } .strip::-webkit-scrollbar { display:none; } .strip.dragging { cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto; user-select:none; }
.thumb { flex:none; width:92px; height:72px; padding:4px; border:2px solid transparent; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--stage); color:var(--text); cursor:pointer; scroll-snap-align:center; }
.thumb[aria-pressed="true"] { border-color:var(--accent-hi); }
.strip-big .thumb { width:128px; height:106px; }
.thumb-canvas { flex:1 1 auto; min-height:0; width:100%; display:grid; place-items:center; } .thumb-canvas img, .thumb-canvas canvas { display:block; width:100%; height:100%; min-height:0; object-fit:contain; } .thumb-wait { color:var(--sub); font-size:16px; }
.thumb-name { flex:none; max-width:100%; overflow:hidden; font-size:10px; line-height:12px; white-space:nowrap; text-overflow:ellipsis; } .strip-big .thumb-name { font-size:11px; }
.strip-arrow.round { position:absolute; z-index:2; top:50%; transform:translateY(-50%); width:44px; height:44px; background:rgba(28,23,25,.96); border:2px solid rgba(255,255,255,.75); box-shadow:0 2px 10px rgba(0,0,0,.65); color:#fff; } .strip-arrow[hidden] { display:none; }
.strip-prev { left:4px; } .strip-next { right:4px; }
.decide { margin-top:12px; }
.actions { display:grid; grid-template-columns:1fr 1.4fr; gap:8px; margin-top:14px; } .actions .btn-main { margin-top:0; } .actions > button { height:52px; }
.ghost-btn { display:flex; align-items:center; justify-content:center; gap:6px; border:2px solid var(--line); border-radius:999px; background:transparent; color:var(--text); font:800 15px "Noto Sans JP",sans-serif; cursor:pointer; white-space:nowrap; } .ghost-btn .ms { font-size:20px; }
.decor-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin-top:8px; }
.tool.decor-card { position:relative; min-width:0; padding:6px; border:2px solid var(--line); border-radius:14px; display:flex; flex-direction:column; align-items:center; gap:2px; background:var(--surface); color:var(--text); cursor:pointer; transition:border-color .12s, transform .12s; }
.decor-card-art { width:100%; aspect-ratio:4 / 3; display:grid; place-items:center; overflow:hidden; border-radius:8px; background:var(--stage); } .decor-card-art .thumb-canvas { width:100%; height:100%; } .decor-card-art img { width:100%; height:100%; object-fit:cover; display:block; }
.decor-card b { font-size:13px; } .decor-card small { font-size:10px; color:var(--sub); line-height:12px; min-height:12px; }
.decor-card[aria-pressed="true"] { border-color:var(--accent-hi); } .decor-card:active { background:var(--surface2); }
.tools { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:6px; margin-top:12px; }
.tool { min-width:0; height:76px; padding:6px 2px; border:2px solid var(--line); border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; background:var(--surface); color:var(--text); cursor:pointer; } .tool .ms { font-size:24px; } .tool-name { max-width:100%; overflow:hidden; font-size:11px; font-weight:700; line-height:14px; white-space:nowrap; text-overflow:ellipsis; } .tool[aria-pressed="true"] { border-color:var(--accent); background:var(--surface2); }
.recipe { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:10px; } .recipe-chip { padding:4px 10px; border-radius:999px; background:var(--surface); font-size:11px; }
.done-actions { display:grid; gap:8px; margin-top:14px; } .done-edit { width:100%; height:48px; border:1.5px solid var(--line); border-radius:999px; background:transparent; color:var(--text); font:700 14px "Noto Sans JP",sans-serif; cursor:pointer; }
.done-links { display:flex; justify-content:center; gap:8px; margin-top:8px; } .done-link { min-height:36px; padding:0 8px; border:0; background:transparent; color:var(--sub); font-size:13px; cursor:pointer; }
.lm-bottom { flex:none; min-height:calc(64px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); padding:8px 12px env(safe-area-inset-bottom); background:var(--surface); }
.lm-bottom-inner { width:min(100%, 560px); min-height:44px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:8px; }
.praise { position:fixed; z-index:300; top:38%; left:50%; transform:translate(-50%,-50%); color:var(--accent-hi); font-size:40px; font-weight:900; white-space:nowrap; pointer-events:none; -webkit-text-stroke:6px var(--praise-stroke); paint-order:stroke fill; animation:praise .95s var(--bounce) forwards; }
@keyframes praise { 0%{transform:translate(-50%,-50%) scale(.4);opacity:0} 25%{transform:translate(-50%,-50%) scale(1.15);opacity:1} 45%{transform:translate(-50%,-50%) scale(1)} 80%{opacity:1} 100%{transform:translate(-50%,-62%) scale(1);opacity:0} }
.flip-next { animation:flipNext .26s var(--bounce); } @keyframes flipNext { 0%{transform:translateX(28px) scale(.96);opacity:.3} 100%{transform:none;opacity:1} }
.sample-toast { position:fixed; z-index:140; bottom:84px; left:50%; width:max-content; max-width:calc(100% - 24px); padding:10px 16px; transform:translateX(-50%); border-radius:999px; background:var(--text); color:var(--bg); font-size:13px; font-weight:700; text-align:center; pointer-events:none; }
@media (min-width:720px) { .panel { width:100%; max-width:min(720px, calc(100% - 24px)); padding-left:0; padding-right:0; } .strip-big .thumb, .thumb { width:128px; height:96px; } .btn-main { height:60px; font-size:18px; } }
@media (prefers-reduced-motion: reduce) { .praise { display:none !important; } .flip-next { animation:none; } }
[hidden] { display:none !important; }
.tool.decor-card { height:auto; }

/* かざり: キャンバスは「置く場所」、下の帯は「ちから」の設定 */
.stage.stage-paint { outline:3px dashed var(--accent-hi); outline-offset:-3px; cursor:crosshair; }
.stage.stage-paint .stage-label { background:var(--accent-hi); color:var(--step-done-text); }
.stage.stage-paint::after { content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 28px rgba(255,122,168,.35); border-radius:20px; animation:paintGlow 1.6s ease-in-out infinite; }
@keyframes paintGlow { 50% { box-shadow:inset 0 0 40px rgba(255,122,168,.6); } }
.gauge { --p:0; position:absolute; z-index:5; width:76px; height:76px; margin:-38px 0 0 -38px; border-radius:50%; display:grid; place-items:center; pointer-events:none; background:conic-gradient(var(--accent-hi) calc(var(--p) * 360deg), rgba(255,255,255,.16) 0); -webkit-mask:radial-gradient(circle, transparent 28px, #000 29px); mask:radial-gradient(circle, transparent 28px, #000 29px); transform:scale(calc(.8 + var(--p) * .45)); }
.gauge.full { background:conic-gradient(#ffe27a 0 360deg); animation:gaugeFull .3s ease-in-out infinite alternate; } @keyframes gaugeFull { to { transform:scale(1.35); } }
.gauge .ms { display:none; }
.actions3 { grid-template-columns:1fr 1fr 1.5fr; } .actions3 .ghost-btn { font-size:13px; gap:2px; padding:0 4px; } .actions3 .ghost-btn .ms { font-size:18px; }
.decor-grid { margin-top:4px; } .tool.decor-card .decor-card-art { aspect-ratio:16 / 10; }
.tool.decor-next { justify-content:center; background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 4px 0 var(--accent-deep); } .tool.decor-next .ms { font-size:30px; } .tool.decor-next b { font-size:15px; }
.others { display:grid; gap:12px; margin-top:6px; }
.other-row { display:grid; gap:6px; justify-items:center; } .other-label { font-size:13px; font-weight:800; color:var(--sub); }
.chip-row { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; }
.chip { min-width:92px; height:44px; padding:0 16px; border:2px solid var(--line); border-radius:999px; background:var(--surface); color:var(--text); font:800 15px "Noto Sans JP",sans-serif; cursor:pointer; } .chip[aria-pressed="true"] { border-color:var(--accent-hi); background:var(--surface2); color:var(--accent-hi); }

.strip-fit .thumb { width:calc((100% - 16px) / 3); height:106px; } .strip-fit { scroll-padding-inline:0; }

.decor-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } .tool.decor-card .decor-card-art { aspect-ratio:16 / 9; }
.tools3 { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.rand-row { display:grid; gap:4px; justify-items:center; margin-top:8px; } .chip-s { min-width:0; height:36px; padding:0 12px; font-size:13px; border-width:1.5px; }
.strip-fit .thumb { height:92px; }

.decor-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); } .tool.decor-card .decor-card-art { aspect-ratio:4 / 3; }
.shake-btn { width:100%; height:44px; margin-top:8px; }
.viewtools { position:absolute; z-index:4; top:10px; right:10px; display:flex; gap:6px; } .viewtools[hidden] { display:none; }
.vt-btn { width:40px; height:40px; padding:0; border:2px solid rgba(255,255,255,.35); border-radius:50%; display:grid; place-items:center; background:rgba(28,23,25,.8); color:#fff; cursor:pointer; } .vt-btn .ms { font-size:22px; } .vt-btn[aria-pressed="true"] { border-color:var(--accent-hi); color:var(--accent-hi); }

.stage-msg { position:absolute; z-index:6; top:48px; left:50%; transform:translateX(-50%); max-width:92%; padding:8px 14px; border-radius:999px; background:var(--text); color:var(--bg); font-size:13px; font-weight:700; line-height:1.3; text-align:center; opacity:0; pointer-events:none; transition:opacity .15s; } .stage-msg.show { opacity:1; }

.step-guide { position:relative; }
.sound-tip { position:absolute; top:42px; right:0; z-index:10; width:184px; padding:8px 10px; border-radius:8px; background:#332d2f; color:#fff; font-size:12px; font-weight:700; line-height:1.4; text-align:left; pointer-events:none; } .sound-tip::before { content:""; position:absolute; top:-6px; right:14px; border:6px solid transparent; border-top:0; border-bottom-color:#332d2f; }

.strip-fit .thumb { width:calc((100% - 8px * (var(--n, 3) - 1)) / var(--n, 3)); }

.mode-row { display:grid; gap:4px; justify-items:center; margin:0 0 6px; }

/* ヘッダーの段組みと右側の操作ボタンは logo-maker.css と共通にする */
.step-guide { position:static; }
.sound-tip { top:44px; right:6px; }

/* かざり一覧: 既存のメーカーと同じ、2列のカード+「ここで完成！」 */
.decor-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; margin-top:6px; }
.tool.decor-card { padding:8px 8px 10px; border-radius:16px; gap:4px; }
.tool.decor-card .decor-card-art { aspect-ratio:16 / 10; }
.decor-card b { font-size:15px; } .decor-card small { font-size:12px; min-height:14px; line-height:14px; }
.hub-finish { margin-top:14px; }
.stage.stage-hub { --sh:calc(min(34vh, 300px) - var(--head-extra)); }

/* かざり一覧: 候補を小さくして、キャンバスとのバランスをとる。キャンバスの上でも、画面を縦にスクロールできる */
.panel.panel-hub { width:min(100%, 440px); }
.panel-hub .decor-grid { gap:8px; }
.panel-hub .tool.decor-card { padding:6px 6px 8px; border-radius:14px; gap:2px; }
.panel-hub .tool.decor-card .decor-card-art { aspect-ratio:16 / 9; }
.panel-hub .decor-card b { font-size:13px; } .panel-hub .decor-card small { font-size:11px; min-height:12px; line-height:12px; }
.panel-hub .hub-finish { height:48px; margin-top:12px; }
.stage.stage-hub, .stage.stage-hub canvas { touch-action:pan-y; }
.viewtools { top:auto; bottom:10px; }

/* かざり: 1画面。種類(4つ) → その設定 → 試す → 仕上げへ。キャンバスはいつも見えている */
.panel-deco, .panel-done { text-align:left; }
.sect-label { margin:14px 0 6px; font-size:13px; font-weight:800; color:var(--text); } .panel-deco > .sect-label:first-child { margin-top:2px; }
.panel-deco .decor-grid { grid-template-columns:repeat(4, minmax(0, 1fr)); gap:6px; margin-top:0; }
.panel-deco .tool.decor-card { padding:4px 4px 6px; border-radius:12px; gap:2px; }
.panel-deco .tool.decor-card .decor-card-art { position:relative; aspect-ratio:4 / 3; }
.panel-deco .decor-card b { font-size:12px; } .panel-deco .decor-card small { font-size:10.5px; line-height:12px; min-height:12px; color:var(--accent-hi); }
.panel-deco .decor-card[aria-pressed="true"] { border-color:var(--accent-hi); background:var(--surface2); box-shadow:0 0 0 2px rgba(255,122,168,.25); }
.decor-card-ico { position:absolute; left:3px; top:3px; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; background:rgba(22,18,20,.78); color:var(--accent-hi); pointer-events:none; } .decor-card-ico .ms { font-size:14px; }
.decor-card[aria-pressed="true"][data-id="shake"] .decor-card-art img, .decor-card[aria-pressed="true"][data-id="shake"] .decor-card-art canvas { animation:cardShake .5s ease-in-out infinite; } @keyframes cardShake { 25% { transform:translateX(-2px) rotate(-1.5deg); } 75% { transform:translateX(2px) rotate(1.5deg); } }
.deco-sep { height:1px; margin:12px 0 2px; background:var(--line); }
.panel-deco .mode-row, .panel-deco .rand-row { justify-items:stretch; margin:0; }
.panel-deco .chip-row { justify-content:flex-start; gap:6px; }
.panel-deco .strip { justify-content:flex-start; }
.deco-tools { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; } .deco-tools .ghost-btn { height:44px; font-size:14px; }
.panel-deco .hub-finish { height:52px; margin-top:12px; }

/* 仕上げ */
.panel-done .done-actions { margin-top:32px; padding-top:28px; border-top:1px solid var(--line); gap:16px; }
.panel-done .done-actions .btn-main { margin-top:0; }
.panel-done .done-edit { display:flex; align-items:center; justify-content:center; gap:6px; font-size:16px; font-weight:800; }
.panel-done .done-edit .ms { margin-right:0; }
.panel-done .done-links { flex-wrap:wrap; margin-top:16px; }

/* スマホ: プレビューと設定の領域を分け、設定だけをスクロールする */
@media (max-width:899px) {
  .lm-side .workspace { display:grid; grid-template-rows:auto minmax(0, 1fr); gap:10px; overflow:hidden; }
  .lm-side .panel { min-height:0; height:100%; margin-top:0; padding-bottom:20px; overflow-y:auto; overscroll-behavior:contain; }
}

/* PC: かざり・仕上げ(キャンバスを触って整える段階)だけ、左にキャンバス・右に設定。文字・書体・色は縦のまま */
@media (min-width:900px) and (min-height:520px) {
  .lm-side .workspace { display:grid; grid-template-columns:minmax(0, 1fr) 400px; grid-template-rows:minmax(0, 1fr); gap:0 28px; padding:6px 24px 0; overflow:hidden; align-items:start; }
  .lm-side .stage, .lm-side .stage.stage-done { --sh:auto; width:min(100%, calc((100vh - 214px) * 5 / 3)); margin:0 auto; }
  .lm-side .panel { width:auto; max-width:none; height:100%; margin:0; padding:0 0 16px 28px; border-left:1px solid var(--line); overflow-y:auto; overscroll-behavior:contain; }
  .lm-side .btn-main { height:56px; font-size:17px; }
  .lm-side .strip-wrap { margin-top:0; }
}


/* ロゴメーカーのCSS(logo-maker.css)と重なる指定は、.water-maker で上書きする */
/* キャンバスは枠なしで、ステージいっぱいに(縦横比 5:3 を保つ。ひしゃげない) */
.water-maker .stage { background:none; overflow:hidden; border-radius:20px; }
.water-maker .stage-art { padding:0; }
.water-maker .stage canvas { width:100%; height:100%; max-width:none; max-height:none; border-radius:20px; }
.water-maker .tap-hint { right:14px; bottom:12px; color:#dfe8ff; text-shadow:0 0 6px rgba(0,0,0,.85); }
/* logo-maker.css の .stage / .stage.stage-done は高さを決めてしまう。水メーカーは縦横比 5:3 で決める */
.lm.water-maker .stage, .lm.water-maker .stage.stage-done { height:auto; aspect-ratio:5 / 3; }

/* 途中は保存の帯、仕上げはパネル内の大きなボタン。再編集時は反映ボタンを残す */
.lm.water-maker .lm-bottom { display:block; }
.lm.water-maker.is-done .lm-bottom { display:none; }
/* アイコンと文字の縦位置: 文字の見た目の中心は、アイコンより 0.5〜1px 下にある。アイコンを 1px 下げて、そろえる */
.water-maker .btn-main .ms, .water-maker .ghost-btn .ms { transform:translateY(1px); }

/* 文字〜色: キャンバスと操作欄は同じ幅。実測した操作欄を除いた高さに収める。 */
.water-step-fit .stage, .water-step-fit .panel { width:var(--water-step-width, min(720px, calc(100% - 24px))); max-width:none; margin-left:auto; margin-right:auto; }
.water-step-fit .panel { padding:0 0 12px; }
.water-step-compact .panel { padding-bottom:8px; }
.water-step-compact .flip-row { margin-top:0; }
.water-step-compact .flip-name b { font-size:18px; }
.water-step-compact .strip-wrap { margin-top:8px; }
.water-step-compact .thumb { width:96px; height:72px; }
.water-step-compact .actions { margin-top:10px; grid-template-columns:minmax(0, 1fr) minmax(0, 1.4fr); }
.water-step-compact .actions > button { height:44px; padding:0 4px; gap:4px; font-size:13px; }
.water-step-compact #next0 { height:44px; font-size:14px; }
.water-step-compact .actions .ghost-btn { font-size:12px; gap:4px; }
.water-step-compact .actions .ms { font-size:16px; }
.water-step-compact .lm-reedit-notice { margin-bottom:8px; }

.water-step-compact .maker-sound-setting { margin-top:8px; }
.water-step-compact .text-field textarea { min-height:64px; padding:8px 12px; font-size:18px; }
.water-step-compact .text-meta { margin-top:4px; font-size:10px; }
.water-step-compact .text-empty { margin:6px 0 0; font-size:11px; line-height:16px; }
.water-step-compact .maker-sound-setting { min-height:36px; }