/* ============================================================================
 * panel.css — 操作パネル、個体カード、モーダル、設計室
 * ----------------------------------------------------------------------------
 * ■ アコーディオンの考え方
 *   閉じているときは「見出し＋いまの状況」だけを見せ、開くと中身が出る。
 *   同時に開けるのは1つ（制御は ui.js の toggleAcc）。
 *   見出しは高さ64px以上を確保している。指で押せる大きさを下回らせないこと。
 *   注意が必要なときは .is-alert が付き、左端に色の帯が出る。
 * ========================================================================== */

/* ── いま何をすべきか ──────────────────────────────────────────────── */
.advice{
  display:flex;align-items:center;gap:10px;width:100%;
  min-height:48px;padding:9px 12px;margin-bottom:12px;
  background:rgba(233,166,60,.10);
  border:1px solid rgba(233,166,60,.45);
  border-radius:var(--r-sm);
  text-align:left;font-size:13.5px;color:#F6D9A6;
}
.advice-body{flex:1}
.advice-go{
  flex:none;font-size:11px;font-family:var(--f-mono);
  border:1px solid rgba(233,166,60,.5);border-radius:999px;padding:2px 10px;
}
/* 助言の強さは4段階。sim.js の advice() が返す tone で切り替わる。
 *   act  … いま操作してほしい（既定の琥珀色）
 *   warn … 危険。赤で強く出す
 *   hold … 「何もしないでほしい」。押しても開かないので、押せそうに見せない
 *   calm … 平常。ほぼ主張しない
 * hold と calm を act と同じ見た目にすると、
 * 「餌を控えて」と書いてあるのに押せてしまい、操作を誘ってしまう。 */
.advice.is-warn{
  background:rgba(203,87,64,.14);border-color:rgba(203,87,64,.6);color:#F3B4A4;
}
.advice.is-warn .advice-go{border-color:rgba(203,87,64,.6)}
.advice.is-hold{
  background:rgba(143,168,174,.07);border-color:var(--line);color:#BCCFD4;
  cursor:default;
}
.advice.is-calm{
  background:transparent;border-color:var(--line);color:var(--chalk-dim);
  cursor:default;
}

/* ── アコーディオン ────────────────────────────────────────────────── */
.acc{
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--hull-raise);
  margin-bottom:10px;overflow:hidden;
  transition:background .18s, border-color .18s;
}
.acc.is-open{background:var(--hull-high);border-color:var(--water-mid)}

.acc-head{
  position:relative;
  display:flex;align-items:center;gap:12px;width:100%;
  min-height:64px;padding:10px 14px 10px 16px;text-align:left;
}
/* 注意が必要な項目にだけ左の帯を出す。常時出すと意味が消えるので注意 */
.acc.is-alert .acc-head::before{
  content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;
  border-radius:0 3px 3px 0;background:var(--amber);
}
.acc-icon{
  flex:none;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--water-deep);border:1px solid var(--water-mid);
}
.acc-icon svg{width:21px;height:21px;fill:var(--algae);stroke:var(--algae)}
.acc.is-open .acc-icon{background:var(--water-mid)}
.acc-text{flex:1;min-width:0;display:flex;flex-direction:column}
.acc-title{font-size:15.5px;font-weight:500;letter-spacing:.02em}
.acc-sub{
  font-size:11.5px;color:var(--chalk-dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.acc-chev{
  flex:none;width:10px;height:10px;margin-right:2px;
  border-right:2px solid var(--chalk-dim);border-bottom:2px solid var(--chalk-dim);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .2s;
}
.acc.is-open .acc-chev{transform:rotate(-135deg) translate(-2px,-2px)}

/* 高さは JS が px で入れてアニメーションさせる（ui.js の setAccOpen）。
   display:none にすると高さを測れずアニメーションできないので使わない。
   padding は内側の .acc-inner に持たせること。外側に付けると閉じても隙間が残る */
.acc-body{
  height:0;overflow:hidden;
  transition:height .3s cubic-bezier(.32,.72,.28,1);
}
.acc-inner{padding:0 14px 16px}
.acc.is-open > .acc-body > .acc-inner{animation:acc-fade .34s ease both}
@keyframes acc-fade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ── 餌を注ぐボタン ────────────────────────────────────────────────
 * 「押しっぱなしにする」操作は見ただけでは伝わらないので、
 *   1. 指のアイコン  2. 脈打つ輪  3. 押している間に落ちる粒
 *   4. たまっていく餌の山
 * の4つで示している。どれかを外すと途端に分かりにくくなる。 */
.pour{
  position:relative;display:block;width:100%;
  margin-top:12px;padding:16px 14px 18px;overflow:hidden;
  border:1px solid rgba(233,166,60,.55);border-radius:var(--r);
  background:rgba(233,166,60,.09);color:#F6D9A6;
  touch-action:none;user-select:none;-webkit-user-select:none;
  transition:background .15s, border-color .15s, transform .1s;
}
.pour:active,.pour.is-on{background:rgba(233,166,60,.24);border-color:var(--amber);transform:scale(.995)}

/* 押せることを伝える脈。押している間は止める（役目が終わるため） */
.pour::after{
  content:"";position:absolute;inset:0;border-radius:var(--r);
  border:1px solid rgba(233,166,60,.85);
  opacity:0;animation:pour-pulse 2.6s ease-out infinite;pointer-events:none;
}
.pour.is-on::after{animation:none;opacity:0}
@keyframes pour-pulse{
  0%{opacity:.75;transform:scale(1)}
  55%{opacity:0;transform:scale(1.035)}
  100%{opacity:0;transform:scale(1.035)}
}

.pour-face{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;position:relative;z-index:2}
.pour-icon{flex:none;width:24px;height:24px}
.pour-icon svg{width:100%;height:100%;stroke:#F6D9A6;fill:none}
.pour.is-on .pour-icon{animation:pour-press .5s ease-in-out infinite alternate}
@keyframes pour-press{from{transform:translateY(0)}to{transform:translateY(3px)}}
.pour-label{font-size:15px;font-weight:500}
.pour-sub{width:100%;text-align:center;font-size:11px;color:rgba(246,217,166,.72)}

/* 落ちる粒と、下にたまっていく山 */
.pour-stage{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:var(--r)}
.pour-drop{
  position:absolute;top:-8px;width:5px;height:5px;border-radius:2px;
  background:#E9A63C;opacity:0;
}
.pour.is-on .pour-drop{animation:pour-fall .62s linear infinite}
.pour-drop:nth-child(1){left:30%;animation-delay:0s}
.pour-drop:nth-child(2){left:50%;animation-delay:.2s}
.pour-drop:nth-child(3){left:70%;animation-delay:.4s}
@keyframes pour-fall{
  0%{opacity:0;transform:translateY(0)}
  12%{opacity:1}
  88%{opacity:1}
  100%{opacity:0;transform:translateY(72px)}
}
.pour-pile{
  position:absolute;left:50%;bottom:0;height:5px;width:0;
  transform:translateX(-50%);
  border-radius:6px 6px 0 0;background:rgba(233,166,60,.85);
  transition:width .25s ease, height .25s ease;
}

/* ── ショップ行 ────────────────────────────────────────────────────── */
.shop{margin-top:10px}
.shop-row{
  display:flex;align-items:center;gap:12px;
  padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06);
}
.shop-row:last-child{border-bottom:0}
.shop-name{flex:1;font-size:13px;line-height:1.5}
.shop-name em{display:block;font-style:normal;font-size:11px;color:var(--chalk-dim);margin-top:1px}

/* ── あなたの魚 ────────────────────────────────────────────────────── */
.panel{
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--hull-raise);padding:var(--pad);margin-top:16px;
}
.panel h2{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.22em;
  color:var(--chalk-dim);font-weight:500;margin-bottom:12px;
  display:flex;align-items:center;gap:8px;
}
.panel h2::after{content:"";flex:1;height:1px;background:var(--line)}
.empty-note{font-size:12.5px;color:var(--chalk-dim);margin-bottom:12px}
.mine-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.mine-name{font-family:var(--f-display);font-size:18px}
.mine-meta{font-size:11px;color:var(--chalk-dim)}
.mine-stats{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;margin-top:12px;font-size:12.5px}
.mine-stats dt{color:var(--chalk-dim)}
.mine-stats dd{font-family:var(--f-mono);text-align:right}

/* 体力・栄養・ストレスの横棒 */
.fbar{display:grid;grid-template-columns:64px 1fr 34px;align-items:center;gap:9px;margin-bottom:8px}
.fbar span{font-size:12px;color:var(--chalk-dim)}
.fbar i{display:block;height:6px;border-radius:99px;background:#08191F;overflow:hidden;
  border:1px solid rgba(255,255,255,.05)}
.fbar i b{display:block;height:100%;border-radius:99px;transition:width .4s ease}
.fbar em{font-style:normal;font-family:var(--f-mono);font-size:12px;text-align:right}

/* ── モーダル共通 ──────────────────────────────────────────────────── */
.modal{
  position:fixed;inset:0;z-index:60;
  background:rgba(3,12,16,.84);
  display:flex;align-items:center;justify-content:center;
  padding:12px;
}
/* [hidden] がクラス指定に負けないよう明示 */
.modal[hidden]{display:none}
.sheet{
  width:min(480px,100%);max-height:92dvh;overflow:auto;
  background:var(--hull-raise);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:18px;
  -webkit-overflow-scrolling:touch;
}
.sheet-wide{width:min(880px,100%)}
.sheet h3{font-family:var(--f-display);font-size:19px;letter-spacing:.03em;margin-bottom:4px}
.sheet-sub{font-size:12px;color:var(--chalk-dim);margin-bottom:14px}
.sheet-actions{display:flex;gap:10px;margin-top:16px}

/* ── 観察ログ ──────────────────────────────────────────────────────── */
.loglist{max-height:52dvh;overflow:auto;margin-top:12px;font-size:12.5px}
.loglist p{padding-left:52px;text-indent:-52px;margin-bottom:6px;color:#B9CDD2}
.loglist p.bad{color:#F0A08C}
.loglist p.good{color:#A6E6C6}
.loglist time{font-family:var(--f-mono);font-size:11px;color:var(--chalk-dim);margin-right:9px}

/* ── 個体カルテ ────────────────────────────────────────────────────── */
.karte-top{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.karte-fig{width:124px;flex:none}
.karte-fig svg{width:100%;height:auto;display:block}
.karte-dl{flex:1;display:grid;grid-template-columns:auto 1fr;gap:2px 12px;font-size:12.5px}
.karte-dl dt{color:var(--chalk-dim)}
.karte-dl dd{font-family:var(--f-mono);text-align:right}
.karte-rel{border-top:1px solid var(--line);margin-top:14px;padding-top:10px;font-size:12px}
.karte-rel h4{font-size:10px;font-family:var(--f-mono);letter-spacing:.18em;
  color:var(--chalk-dim);font-weight:500;margin-bottom:6px}
.karte-rel p{margin-bottom:3px}

/* ── 設計室 ────────────────────────────────────────────────────────── */
.editor{display:block}
/* 縦画面では、色やパーツを選んでいるあいだも魚が見えている必要がある。
   ここを sticky から外すと、スマホで魚を見ずに色を選ぶことになる */
.editor-preview{
  position:sticky;top:-18px;z-index:2;
  background:var(--hull-raise);
  padding:0 0 10px;margin:-4px 0 12px;
}
.stage{
  position:relative;border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(180deg,#0F4050,#06222C);
  aspect-ratio:16/9;overflow:hidden;touch-action:none;
}
.stage svg{width:100%;height:100%;display:block}
.grabbable{cursor:grab}
.stage-hint{font-size:10.5px;color:var(--chalk-dim);text-align:center;margin-top:5px}

.trait{
  margin-top:8px;padding:10px 12px;
  background:#0A1E25;border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:12px;line-height:1.6;
}
.trait-head{display:flex;gap:16px;margin-bottom:4px}
.trait-head b{color:var(--amber);font-weight:500}
.trait-note{color:var(--chalk-dim);font-size:11px;margin-top:4px}

.field{margin-bottom:14px}
.field > label{
  display:flex;align-items:baseline;gap:8px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;
  color:var(--chalk-dim);margin-bottom:6px;
}
.field > label em{font-style:normal;font-family:var(--f-body);letter-spacing:0;font-size:11px}
.field input[type=text]{
  width:100%;min-height:46px;
  background:#0A1E25;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:10px 12px;color:var(--chalk);font-family:var(--f-body);font-size:15px;
}
.colorset{display:flex;gap:18px;flex-wrap:wrap}
.colorset-label{display:block;font-size:11px;color:var(--chalk-dim);margin-bottom:5px}
.swatches{display:flex;gap:6px;flex-wrap:wrap;align-items:center;max-width:230px}
.sw{width:26px;height:26px;border-radius:7px;border:1px solid rgba(255,255,255,.2)}
.sw[aria-pressed="true"]{outline:2px solid var(--chalk);outline-offset:1px}
input[type=color]{
  width:34px;height:28px;padding:0;border:1px solid var(--line);
  background:none;border-radius:7px;cursor:pointer;
}

/* PCでは2カラムにして、プレビューを左に置く */
@media (min-width:760px){
  .editor{display:grid;grid-template-columns:320px 1fr;gap:22px;align-items:start}
  .editor-preview{position:sticky;top:0;margin:0}
  .editor-form h3{margin-bottom:14px}
}
@media (max-width:759px){
  .editor-form h3{margin-bottom:12px}
}


/* ── 魚図鑑 ──────────────────────────────────────────────────────────
 * 一覧は「小さな魚の絵＋いつからいつまで＋関係」の3点に絞っている。
 * 項目を足すときは、スマホ1画面に1件がぎりぎり収まる高さを超えないこと。 */
.btn-dex{margin-top:12px;justify-content:space-between}

.dex-tabs{display:flex;gap:6px;margin:14px 0 10px}
.dex-tab{
  flex:1;min-height:40px;padding:6px 4px;
  background:#0A1E25;border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:12px;color:var(--chalk-dim);transition:.15s;
}
.dex-tab[aria-selected="true"]{border-color:var(--amber);background:#16323C;color:var(--chalk)}

.dex-list{max-height:56dvh;overflow:auto;-webkit-overflow-scrolling:touch}
.dex-empty{font-size:12.5px;color:var(--chalk-dim);padding:18px 2px}

.dex-card{
  display:grid;grid-template-columns:76px 1fr;gap:12px;align-items:start;
  padding:12px 0;border-bottom:1px solid rgba(255,255,255,.07);
}
.dex-card:last-child{border-bottom:0}
.dex-fig{width:76px}
.dex-fig svg{width:100%;height:auto;display:block}
.dex-card.is-gone .dex-fig{filter:grayscale(.75) brightness(.7)}

.dex-name{font-family:var(--f-display);font-size:15.5px;line-height:1.4}
.dex-badge{
  display:inline-block;margin-left:7px;padding:0 7px;border-radius:999px;
  font-family:var(--f-body);font-size:10px;letter-spacing:.04em;
  border:1px solid var(--line);color:var(--chalk-dim);vertical-align:middle;
}
.dex-badge.is-mine{border-color:var(--amber);color:#FFDCA3}
.dex-badge.is-alive{border-color:var(--algae);color:var(--algae)}
.dex-meta{font-size:11px;color:var(--chalk-dim);margin-top:2px;line-height:1.6}
.dex-rel{font-size:11.5px;line-height:1.65;margin-top:5px}
.dex-rel span{display:block}
.dex-rel .is-bad{color:#F0A08C}
.dex-rel .is-good{color:#A6E6C6}