/* === components.css === sheet / tabs / btn / slider / fab / sound module === */

/* --- bottom sheet --- */
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  transform:translateY(calc(100% - var(--sheet-peek)));
  transition:transform var(--dur-sheet) var(--ease-sheet);
  padding-bottom:env(safe-area-inset-bottom);
  max-width:560px;margin:0 auto;
  pointer-events:none;
}
.sheet.open{transform:translateY(0)}
.sheet>*{pointer-events:auto}

/* --- tabs (glassy) --- */
.tabs{
  display:flex;gap:3px;padding:0;margin:0;
  align-items:flex-end;background:transparent;
}
.tab{
  flex:1 1 0;padding:11px 0 10px;
  background:rgba(250,245,228,.35);
  -webkit-backdrop-filter:blur(10px) saturate(120%);
  backdrop-filter:blur(10px) saturate(120%);
  color:var(--sepia);
  border:1px solid rgba(255,255,255,.55);
  border-bottom:none;
  border-top-left-radius:10px;border-top-right-radius:10px;
  font-family:'Crimson Pro',serif;font-size:15px;letter-spacing:.08em;
  font-weight:400;
  cursor:pointer;min-height:38px;position:relative;top:1px;
  opacity:.75;
}
.tab.on{
  background:var(--ivory);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  color:var(--ink);opacity:1;
  z-index:2;
}

/* --- sheet body --- */
.sheet-body{background:var(--ivory)}
.content{padding:14px 20px 16px;height:var(--sheet-h);overflow:hidden;color:var(--ink)}
.panel{display:none;padding-top:8px}
.panel.on{display:block}

/* --- FAB --- */
.fab{
  position:fixed;left:50%;
  /* 閉じた状態: タブ peek のすぐ上 */
  bottom:calc(var(--sheet-peek) + var(--fab-gap) + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:30;
  width:64px;height:22px;
  background:none;border:none;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;line-height:1;letter-spacing:.3em;
  color:var(--ink);opacity:.6;
  cursor:pointer;
  transition:opacity .15s, bottom var(--dur-sheet) var(--ease-sheet);
  -webkit-user-select:none;user-select:none;
}
.fab:hover{opacity:.85}
.fab:active{opacity:1}
body.sheet-open .fab{
  /* 開いた状態: sheet-h + タブ(~42px) + fab-gap */
  bottom:calc(var(--sheet-h) + 42px + var(--fab-gap) + env(safe-area-inset-bottom));
}

/* --- vlabel + section-title --- */
.vlabel{display:flex;justify-content:space-between;align-items:baseline;margin:12px 0 0}
.vlabel .name{font-size:11px;letter-spacing:.14em;color:var(--sepia);opacity:.9}
.vlabel .desc{font-family:'Crimson Pro',serif;font-style:italic;font-size:12px;color:var(--sepia);opacity:.65;margin-left:10px;flex:1}
.vlabel .val{opacity:.65;font-variant-numeric:tabular-nums;font-size:11px;color:var(--sepia)}
.section-title{
  font-family:'Crimson Pro',serif;font-size:12px;
  color:var(--sepia);margin:12px 0 6px;
  letter-spacing:.18em;
  display:flex;align-items:center;gap:8px;
}
.section-title::before{
  content:"";width:6px;height:6px;background:var(--ink);
  flex:0 0 6px;
}
/* 各パネルの先頭要素は上マージンを統一 */
.panel>.section-title:first-child,
.panel>.vlabel:first-child{margin-top:0}
.row{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}

/* --- flat hard-step button + 筋彫り (engraved text/icon) --- */
.btn{
  background:var(--btn-face);
  color:var(--sepia);
  border:none;
  border-radius:4px;padding:14px 12px;font-size:12px;
  font-family:inherit;cursor:pointer;min-height:52px;
  letter-spacing:.14em;
  box-shadow:0 3px 0 var(--khaki);
  transition:transform var(--dur-press) ease-out, box-shadow var(--dur-press) ease-out;
  -webkit-user-select:none;user-select:none;
  /* 筋彫り: text engraved into surface */
  text-shadow:
    0 -1px 0 rgba(42,36,27,.12),
    0  1px 0 rgba(255,255,255,.7);
}
.btn:active{transform:translateY(3px);box-shadow:0 0 0 var(--khaki)}
.btn.on{
  background:var(--sepia);
  color:var(--ivory);
  box-shadow:0 3px 0 var(--shadow-sepia);
  text-shadow:
    0 -1px 0 rgba(0,0,0,.35),
    0  1px 0 rgba(255,255,255,.1);
}
/* 筋彫り for SVG icons inside buttons */
.btn svg{
  filter:
    drop-shadow(0 -1px 0 rgba(42,36,27,.1))
    drop-shadow(0  1px 0 rgba(255,255,255,.6));
}
.btn.on svg{
  filter:
    drop-shadow(0 -1px 0 rgba(0,0,0,.3))
    drop-shadow(0  1px 0 rgba(255,255,255,.08));
}
.btn.block{flex:1 1 0;min-width:80px}
.btn.icon{padding:8px 6px;min-height:54px;display:flex;align-items:center;justify-content:center}
.btn.icon svg{color:var(--ink);display:block}

/* --- form タブの edit grid --- */
.edit-grid{
  display:grid;
  grid-template-columns:81px 81px 1fr 81px;
  gap:10px;
  margin:8px 0 6px;
  align-items:start;
}
.btn.square{
  width:81px;height:81px;min-height:81px;
  padding:0;
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:4px;
  font-size:10px;letter-spacing:.16em;
}
.btn.square .glyph{font-size:16px;line-height:1;opacity:.75}
.btn.square.reset{
  background:var(--rust);
  color:var(--ivory);
  box-shadow:0 3px 0 var(--shadow-rust);
  text-shadow:
    0 -1px 0 rgba(0,0,0,.3),
    0  1px 0 rgba(255,255,255,.1);
}
.btn.square.del{
  justify-self:end;
  background:var(--mustard);
  color:var(--ivory);
  box-shadow:0 3px 0 var(--shadow-mustard);
  text-shadow:
    0 -1px 0 rgba(0,0,0,.3),
    0  1px 0 rgba(255,255,255,.1);
}
.btn.square.del.on{
  background:var(--mustard-on);
  box-shadow:0 3px 0 var(--shadow-mustard-on);
}

/* --- retro slider --- */
.dial{margin:-2px 0 6px;padding:0 4px}
input[type=range].retro{
  -webkit-appearance:none;appearance:none;
  width:100%;height:30px;background:transparent;margin:0;
  --p:50%; --tick:5%;
}
input[type=range].retro::-webkit-slider-runnable-track{
  height:10px;border:none;border-radius:5px;
  background:
    linear-gradient(var(--sage),var(--sage)) 0 0/var(--p) 100% no-repeat,
    repeating-linear-gradient(90deg,
      rgba(74,63,48,.22) 0 1px,
      transparent 1px var(--tick)),
    var(--ivory-2);
  box-shadow:
    inset 0 2px 3px rgba(74,63,48,.45),
    inset 0 -1px 0 rgba(255,255,255,.55);
}
input[type=range].retro::-moz-range-track{
  height:10px;border:none;border-radius:5px;
  background:
    linear-gradient(var(--sage),var(--sage)) 0 0/var(--p) 100% no-repeat,
    repeating-linear-gradient(90deg,
      rgba(74,63,48,.22) 0 1px,
      transparent 1px var(--tick)),
    var(--ivory-2);
  box-shadow:
    inset 0 2px 3px rgba(74,63,48,.45),
    inset 0 -1px 0 rgba(255,255,255,.55);
}
/* 横長ノブ: 非対称グラデ + 上部ノッチ (critters-proto 最終承認版) */
input[type=range].retro::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:34px;height:20px;margin-top:-5px;
  border:none;border-radius:2px;
  background:
    linear-gradient(rgba(74,63,48,.35),rgba(74,63,48,.35)) 16px 2px/2px 3px no-repeat,
    linear-gradient(90deg,
      #e8dfbe 0,
      #f0e7c6 12px,
      #f6eecf 15px,
      #f8f0d2 18px,
      #c0b389 19px,
      #ebe2c0 21px,
      #e4dab6 34px);
}
input[type=range].retro::-moz-range-thumb{
  width:34px;height:20px;
  border:none;border-radius:2px;
  background:
    linear-gradient(rgba(74,63,48,.35),rgba(74,63,48,.35)) 16px 2px/2px 3px no-repeat,
    linear-gradient(90deg,
      #e8dfbe 0,
      #f0e7c6 12px,
      #f6eecf 15px,
      #f8f0d2 18px,
      #c0b389 19px,
      #ebe2c0 21px,
      #e4dab6 34px);
}

/* --- sound module + mute --- */
.sound-module{padding:0;margin:0 0 4px}
.vol-row{display:flex;align-items:center;gap:14px}
.vol-col{flex:1 1 auto;display:flex;flex-direction:column}
.vol-col .vlabel{margin:-4px 0 0}
.vol-dial{flex:1 1 auto;margin:0;padding:0}
.vol-row.muted .vol-dial{opacity:.4}
.mute-btn{
  appearance:none;-webkit-appearance:none;
  width:46px;height:42px;flex:0 0 46px;
  border-radius:3px;
  border:none;
  background:var(--btn-face);
  color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  box-shadow:0 3px 0 var(--khaki);
  transition:transform var(--dur-press) ease-out, box-shadow var(--dur-press) ease-out, color .2s, background .2s;
  padding:0;
}
.mute-btn svg{
  filter:
    drop-shadow(0 -1px 0 rgba(42,36,27,.1))
    drop-shadow(0  1px 0 rgba(255,255,255,.6));
}
.mute-btn:active{transform:translateY(3px);box-shadow:0 0 0 var(--khaki)}
.mute-btn .ic-off{display:none}
.mute-btn.muted{
  background:var(--rust);
  color:var(--ivory);
}
.mute-btn.muted svg{
  filter:
    drop-shadow(0 -1px 0 rgba(0,0,0,.3))
    drop-shadow(0  1px 0 rgba(255,255,255,.08));
}
.mute-btn.muted .ic-on{display:none}
.mute-btn.muted .ic-off{display:block}



/* --- delete mode overlay --- */
/* delete mode: 背景を暗く、クリーチャー(canvas)は明るいまま */
body.delete-mode::before{
  content:"";
  position:fixed;inset:0;
  z-index:14;
  background:rgba(42,36,27,.22);
  pointer-events:none;
}
/* canvas はオーバーレイより上に出して暗くしない */
body.delete-mode canvas{z-index:15}
body.delete-mode::after{
  content:"delete mode";
  position:fixed;
  top:max(16px, env(safe-area-inset-top));
  left:50%;transform:translateX(-50%);
  z-index:16;
  padding:6px 18px;
  font-family:'Crimson Pro',serif;font-size:12px;letter-spacing:.25em;
  color:var(--ivory);
  background:var(--mustard);
  border-radius:999px;
  pointer-events:none;
}

/* --- confirm modal --- */
.modal-overlay{
  position:fixed;inset:0;z-index:100;
  background:rgba(42,36,27,.25);
  display:none;align-items:center;justify-content:center;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.modal-overlay.open{display:flex}
.modal{
  background:var(--ivory);
  padding:28px 32px 20px;
  max-width:320px;width:90%;
  text-align:center;
}
.modal-msg{
  font-family:'Crimson Pro',serif;font-size:15px;
  color:var(--ink);margin:0 0 20px;line-height:1.6;
  letter-spacing:.04em;
}
.modal-actions{display:flex;gap:10px}
.modal-ok{background:var(--rust);color:var(--ivory);box-shadow:0 3px 0 #7e3a22}