/*!
 * © 2025 パソコンサロンゆうらく (Pasokon Salon Yuuraku). All rights reserved.
 * Project: ゆうらく学習トレーニングポータルYuuraku Leaning station
 * File: aiueoburger
 * BUILD_ID: YR-2025-0826-K5                 // ← 公開用の可視ビルドID
 * CANARY_ZW
 * SPDX-License-Identifier: LicenseRef-Yuuraku-Proprietary
 * Contact: yuurakunomori@gmail.com  |  URL: https://yuurakus.jp/
 *
 * 重要
 * 
* [日本語 / Japanese]
 * 本スタイルシートおよび関連ファイルの著作権（著作権法上の権利）は、パソコンサロンゆうらくに専属します。
 * 法令で明示的に認められる場合を除き、当社の事前の書面許諾なく、複製・複写・転載・転用・編集・改変・翻案・
 * 逆コンパイル／リバースエンジニアリング・再配布・商用利用・公衆送信（Webへのアップロードを含む）・
 * 自動取得／スクレイピング等の二次利用を固く禁じます。侵害が判明した場合、警告なく直ちに
 * 差止請求・損害賠償請求等の法的措置を厳格に行います。
 * 【重要】本スタイルシートには検証用のBUILD IDおよび不可視の「カナリア文字（ウォーターマーク）」が埋め込まれ、
 * ソースには識別用IDが隠されています。これらの削除・改変は契約違反・不正競争・著作権侵害等として追及します。
 *
 * [English]
 * Copyright in this stylesheet and related files is owned exclusively by
 * Pasokon Salon Yuuraku unless otherwise stated. Except as expressly permitted by law,
 * any reproduction, modification, adaptation, reverse engineering, redistribution,
 * commercial use, public transmission (including posting on the web), or automated
 * collection/scraping without prior written permission is strictly prohibited.
 * Upon detection of infringement, we will immediately pursue legal remedies including
 * injunctive relief and damages. IMPORTANT: This stylesheet embeds a verifiable BUILD ID
 * and invisible “canary” watermark characters, and an identification ID is hidden in the source.
 * Removal or alteration will be treated as a violation and strictly enforced.
 *
 * [中文 / Chinese (Simplified)]
 * 本样式表及相关文件之著作权，除非另有说明，专属于「Pasokon Salon Yuuraku」。
 * 未经事先书面许可，严禁复制、转载、修改、改编、逆向工程、再分发、商业使用、
 * 公开传播（含上传至网络）及自动抓取/爬取等二次利用。一经发现侵权，将立即采取包括
 * 禁令与损害赔偿在内的法律措施。重要：本样式表内已嵌入可验证的BUILD ID与不可见
 * “金丝雀”水印字符，且源代码中隐藏有识别用ID。擅自删除或篡改将被视为违规并依法追究。
 *
 * [한국어 / Korean]
 * 본 스타일시트 및 관련 파일의 저작권은 별도 고지가 없는 한
 * ‘파소콘 살롱 유우라쿠(Pasokon Salon Yuuraku)’에 전속됩니다.
 * 사전 서면 허가 없이 복제, 전재, 전용, 수정, 각색, 리버스 엔지니어링,
 * 재배포, 상업적 이용, 공중송신(웹 게시 포함), 자동 수집·스크래핑 등의 2차 이용을 엄격히 금합니다.
 * 위반 시 예고 없이 즉시 금지청구 및 손해배상 청구 등 법적 조치를 취합니다.
 * 중요: 본 스타일시트에는 검증 가능한 BUILD ID와 보이지 않는 ‘카나리아(워터마크) 문자’가 포함되며,
 * 소스 내부에는 식별용 ID가 숨겨져 있습니다. 이를 삭제·변조하는 행위는 위반으로 간주되어 엄정 대응합니다.
 */

/*==================================================================
  style.css — あいうえおバーガー 用スタイル（最終版）
==================================================================*/

/* ================== base ================== */
:root {
  --bg: #f4c233;
  --ink: #173046;
  --brand: #e6772e;
  --accent: #106c8c;
  --panel: #ffd24d;
  --panel-dark: #1e6f8c;
  --ok: #2f9e44;
  --bad: #f03e3e;
  --beige: #f0c7a1;
  --brown: #8a4b0f;
  --pink: #ff62ff;
  --green: #3a8a2f;
  --red: #f10000;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  color: var(--ink);
  font-family: "Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Hiragino Kaku Gothic ProN", Meiryo, "Noto Sans CJK JP", sans-serif;
  background: #e38e5b;
}

/* ================== header ================== */
.app-header {
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 4px solid #b64d12;
}
/* ---- Language switch (toolbar) ---- */
.toolbar .divider{
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,.45);
  margin: 0 10px 0 14px;  /* 「開始」から少し離す */
  align-self: center;
}

.lang-switch{
  display: flex;
  gap: 8px;
  align-items: center;
}

/* 既存 .btn を活かした“ゴーストボタン” */
.btn.ghost{
  background: transparent;
  border: 2px solid rgba(255,255,255,.7);
  box-shadow: none;
}
.btn.ghost:hover{ transform: translateY(-1px); }
.btn.ghost[aria-pressed="true"]{
  background: #fff;
  color: var(--brand);
  border-color: #fff;
}

.app-header .brand { display: flex; align-items: center; gap: 14px; }
.app-header h1 { margin: 0; letter-spacing: .3em; font-weight: 700; }
/* ▼ 追加：タイトルのサイズを画面と長文に合わせて控えめに */
#titleText{
  font-weight: 800;
  line-height: 1.1;
  /* 既存の letter-spacing: .3em は横幅を食うので、このIDで上書き */
  letter-spacing: .04em;
  text-wrap: balance;                 /* 複数行の折返しを見栄え良く */
  font-size: clamp(16px, 4.5vw, 44px);/* 画面に応じて自動縮小/拡大 */
}

body.dark   #titleText{ font-size: clamp(16px, 4.2vw, 40px); }
body.heaven #titleText{ font-size: clamp(14px, 3.8vw, 36px); }

@media (max-width: 480px){
  #titleText{ font-size: clamp(14px, 6vw, 28px); }
}

.burger-emoji { font-size: 36px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.2)); }

.toolbar { display: flex; gap: 10px; }
.btn {
  background: #245578;
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
  box-shadow: 0 2px 0 rgba(0,0,0,.3);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.primary { background: #0b7285; }
.btn.danger { background: #c92a2a; }
.btn.link { text-decoration: none; display: inline-flex; align-items: center; }
.btn.small { padding: 6px 10px; border-radius: 8px; font-size: 14px; }

/* ================== layout ================== */
.app-shell {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 14px;
  padding: 12px;
  background: #eab173;
  min-height: calc(100vh - 150px);
}

.panel {
  background: var(--panel);
  border: 4px solid #c58a00;
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 6px 0 rgba(0,0,0,.2);
}

/* ----- left: game ----- */
.game-panel { display: flex; flex-direction: column; }
.game-hud {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 8px;
  font-weight: 800;
}
.hud-item {
  background: #fff;
  border-radius: 8px;
  padding: 6px 8px;
  text-align: center;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.1);
}
.hearts { color: #f03e3e; letter-spacing: 4px; }

.playfield {
  position: relative;
  flex: 1;
  background: #bfe6ff;
  border: 6px solid #2a526e;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  padding: 12px;
}

.stack {
  position: relative;
  width: min(400px, 100%);      /* ここを 400〜920 で好み調整OK */
  margin: 0 auto;               /* 中央寄せ維持 */
}

/* burger parts */
.part {
  display: grid;
  place-items: center;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
  border-radius: 10px;
  margin-left: 10px;
  margin-right: 10px;
  box-shadow: 0 3px 0 rgba(0,0,0,.25);
  transition: transform .25s ease, opacity .25s ease;
  user-select: none;
}
.part.shrinkLabel .label { display: none; }

.bun { background: #d3752f; }
.bun.top::before,
.bun.bottom::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  height: 8px;
  bottom: 6px;
  background: rgba(0,0,0,.15);
  border-radius: 999px;
}
.bun.top { border-top-left-radius: 40px; border-top-right-radius: 40px; }
.bun.bottom { border-bottom-left-radius: 40px; border-bottom-right-radius: 40px; }

.ing-a { background: var(--red); }
.ing-i { background: var(--beige); color: #5b2c16; text-shadow: none; }
.ing-u { background: var(--brown); }
.ing-e { background: var(--pink); color: #17202a; text-shadow: none; }
.ing-o { background: var(--green); }

.legend { display:flex; gap:10px; margin-top:8px; flex-wrap:wrap; }
.chip { background:#fff; padding:6px 10px; border-radius:999px; font-weight:700; border:2px solid #9ab; }
.chip.space { background:#ffd8a8; }
.chip.key { background:#d2f4ea; }

/* ----- right: ranks ----- */
.rank-panel { display: flex; }
.rank-card { display:flex; flex-direction: column; gap: 10px; width:100%; }
.now-playing { display:flex; gap:8px; justify-content: space-between; }
.key-sample { flex:1; height:42px; border-radius:8px; display:grid; place-items:center; color:#fff; font-weight:900; box-shadow: inset 0 -3px 0 rgba(0,0,0,.2); }
.key-sample.red { background: var(--red); }
.key-sample.beige { background: var(--beige); color:#5b2c16; }
.key-sample.brown { background: var(--brown); }
.key-sample.pink { background: var(--pink); color:#17202a; }
.key-sample.green { background: var(--green); }

/* ----- right: ranks (BURGER2準拠の見た目) ----- */
.rank-head { 
  display:flex; justify-content: space-between; align-items:center;
  background:#1d5a7a; color:#fff; padding:10px 14px; border-radius:12px;
}
.rank-head .title { font-size:20px; font-weight:900; letter-spacing:.16em; }

.rank-list{
  min-height: 280px;
  max-height: 50vh;          /* スクロールは2と同じく右欄内で */
  overflow: auto;
  background:#1c5f83;
  color:#fff;
  padding: 16px 20px;        /* 余白を広めに */
  border-radius: 12px;
  display:flex;
  flex-direction:column;
  gap: 8px;                  /* 行間隔 */
  list-style-position: inside;
}

/* 各行の文字サイズ・行間を2に合わせて拡大（clampでレスポンシブ） */
.rank-list li{
  font-size: clamp(16px, 1.8vw, 22px);
  line-height: 1.6;
  font-weight: 700;
  letter-spacing: .02em;
}

/* 先頭の番号（<ol>のマーカー）も少し大きく・太く */
.rank-list li::marker{
  font-size: 1.05em;
  font-weight: 800;
}

/* スコアはさらに強調（太く・少し大きく） */
.rank-list b{
  font-weight: 900;
  font-size: 1.12em;
}

/* ステージと日時は弱めに（括弧内） */
.rank-list small{
  opacity: .85;
  font-size: .9em;
}

.rank-head .title { font-size:18px; font-weight:900; letter-spacing:.2em; }

.rank-list {
  min-height: 280px;
  background:#1c5f83;
  color:#fff;
  padding: 12px 16px;
  border-radius: 6px;
  display:flex;
  flex-direction:column;
  gap:4px;
  list-style-position: inside;
  counter-reset: rank;
}
.rank-list li { font-size: 15px; line-height: 1.0; }  /* 包含行の行間を少し詰める */

.save-row { display:flex; gap:8px; }
.name-input { flex:1; padding:10px; border-radius:8px; border:2px solid #8aa; font-weight:700; }
.sns-row { display:flex; gap:8px; align-items:center; }
.caption-note { font-size:12px; opacity: .7; }

.hint-box { background:#ffd79c; padding:10px; border-radius:8px; box-shadow:inset 0 -2px 0 rgba(0,0,0,.1); font-weight:700; }

/* modal */
.result-modal { border:none; border-radius:12px; padding:0; width:min(560px, 90vw); }
.result-modal::backdrop { background: rgba(0,0,0,.5); }
.result-modal h3 { margin:0; padding:14px 16px; background:#0b7285; color:#fff; border-top-left-radius:12px; border-top-right-radius:12px; }
.modal-body { padding:16px; font-weight:700; }
.result-modal form { padding:0 16px 16px; display:flex; justify-content:flex-end; }

.app-footer {
  text-align: center;
  color: #fff;
  padding: 10px 0 24px;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(0,0,0,.3);
}

/* responsive note: make sure 1280px works; smaller screens scale down a bit */
@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 1fr; }
}

/* Accessibility focus */
:focus-visible { outline: 3px dashed #0b7285; outline-offset: 2px; }

.part.consumed{pointer-events:none;}

/* 子音カード（K など） */
.part.key-part {
  background: var(--panel-dark); /* 既存の濃い青 (#1e6f8c) を流用 */
  color: #fff;
}
.part.key-part .label {
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}


/* --- Consonants (distinct palette) --- */
.part.cons-k { background:#364fc7; }            /* INDIGO */
.part.cons-s { background:#7950f2; }            /* VIOLET */
.part.cons-t { background:#15aabf; }            /* CYAN */
.part.cons-n { background:#fd7e14; }            /* ORANGE */
.part.cons-h { background:#82c91e; color:#17202a; text-shadow:none; } /* LIME */
.part.cons-m { background:#be4bdb; }            /* GRAPE */
.part.cons-y { background:#228be6; }            /* BLUE */
.part.cons-r { background:#12b886; }            /* TEAL */
.part.cons-w { background:#fab005; color:#17202a; text-shadow:none; } /* YELLOW */

/* ==== Dark mode (score >= 1,000,000) ==== */
body.dark {
  background: #0c1118;
  color: #e5e7eb;
}
body.dark a { color: #93c5fd; }

body.dark .topbar {
  background: #0b5c72;
  color: #e5e7eb;
  border-bottom-color: #083a4a;
}

body.dark .ui,
body.dark .mini,
body.dark button {
  background: #1f2937;
  color: #e5e7eb;
  border-color: #374151;
}

body.dark .panel,
body.dark .hud,
body.dark .sidebar,
body.dark .sheet,
body.dark .box {
  background: #111827;
  color: #e5e7eb;
  border-color: #1f2937;
}

/* HUDの強調数値があれば */
body.dark #score,
body.dark #stage,
body.dark #time {
  color: #fef08a;
}

/* キャンバス背景を暗くしたい場合 */
body.dark canvas { background: #0c1118; }

/* === Dark mode: 黒フチ + 外側に白のハロー === */

/* WebKit系（Chrome/Edge/Safari など）は黒フチを stroke で、白は text-shadow で重ねる */
@supports (-webkit-text-stroke: 0.1px #4b2379) {
  body.dark .app-header h1,
  body.dark .hud-item,
  body.dark .hud-item span,
  body.dark .part,
  body.dark .part .label,
  body.dark .key-sample,
  body.dark .rank-head,
  body.dark .rank-list li,
  body.dark .btn,
  body.dark .chip,
  body.dark .hint-box {
    -webkit-text-stroke: 0.1px #4b2379;       /* 内側の黒フチ（細め） */
    /* 外側の白いハロー（うっすら）：半径を少しだけ広めに */
    text-shadow:
      0 0 1.2px #fff,
      0 0 3.4px #fff;
  }
}

/* Firefox 等のフォールバック：黒フチを 4方向シャドウで作り、その外側に白ハロー */
body.dark .app-header h1,
body.dark .hud-item,
body.dark .hud-item span,
body.dark .part,
body.dark .part .label,
body.dark .key-sample,
body.dark .rank-head,
body.dark .rank-list li,
body.dark .btn,
body.dark .chip,
body.dark .hint-box {
  color: #fff !important;
  text-shadow:
    0 2px 6px rgba(0,0,0,.65),
    0 1px 0 rgba(0,0,0,.35) !important;
}

/* 具パーツ全体をレイヤ化（GPU合成優先） */
.part {
  will-change: transform, opacity;
  contain: paint;
}

/* 具を消す瞬間は影を切って塗りを軽くする（再ペイントを激減） */
.part.removing {
  box-shadow: none !important;
  text-shadow: none !important;
  transform: translateY(-18px) scale(.92);
  opacity: 0;
  transition: transform .18s ease-out, opacity .14s linear;
}

/* 一時的に大量に更新する時の保険：クリック等を無効化してレイアウト負荷を安定化 */
.stack.busy {
  pointer-events: none;
}

/* 右カラムは視界外は描画しない（ブラウザに任せて省力化） */
.rank-panel, .rank-list {
  content-visibility: auto;
  contain: content;
  contain-intrinsic-size: 800px 600px; /* 推定サイズでレイアウト安定 */
}

/* 低スペック/低FPS時はシャドウを全体で抑制できるフラグ */
.lowpower .part,
.lowpower .hud-item,
.lowpower .btn {
  box-shadow: none !important;
  text-shadow: none !important;
}

/* ==== Heaven / Gold mode (score >= 10,000,000) ==== */
body.heaven {
  --gold1: #fff3b0;
  --gold2: #ffd166;
  --gold3: #f4a261;
  background:
    radial-gradient(1200px 800px at 50% -20%, rgba(255,255,255,.35), transparent 60%),
    linear-gradient(135deg, var(--gold1), var(--gold2), var(--gold3));
  background-attachment: fixed;
  color: #2d1f00;
}

body.heaven .panel,
body.heaven .hud-item,
body.heaven .rank-head,
body.heaven .chip,
body.heaven .part {
  background-image:
    linear-gradient(145deg, rgba(255,255,255,.45), rgba(255,255,255,0) 30%),
    linear-gradient(180deg, #f1c40f, #d4ac0d);
  border-color: #b7950b;
  color: #2d1f00;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}

body.heaven .btn {
  background-image:
    linear-gradient(145deg, rgba(255,255,255,.4), rgba(255,255,255,0) 40%),
    linear-gradient(180deg, #f1c40f, #d4ac0d);
  border: none;
  color: #2d1f00;
}

body.heaven .playfield {
  background: linear-gradient(180deg, #fff7cc, #ffeaa7);
  border-color: #b7950b;
}

/* sparkle overlay */
body.heaven::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(2px 2px at 12% 22%, rgba(255,255,255,.9), rgba(255,255,255,0)),
    radial-gradient(2px 2px at 78% 32%, rgba(255,255,255,.8), rgba(255,255,255,0)),
    radial-gradient(2px 2px at 28% 72%, rgba(255,255,255,.9), rgba(255,255,255,0)),
    radial-gradient(2px 2px at 60% 52%, rgba(255,255,255,.8), rgba(255,255,255,0));
  animation: heavenSparkle 4s linear infinite;
  mix-blend-mode: screen;
  opacity: .7;
}

@keyframes heavenSparkle {
  0%   { transform: translateY(0);     opacity: .6; }
  50%  { transform: translateY(-10px); opacity: .9; }
  100% { transform: translateY(0);     opacity: .6; }
}

/* ハート2段の行間を詰める（任意） */
#hearts, .hearts { line-height: 1.1; }

/* 右カラムの共有ボタンを常に見える位置に */
.rank-card { position: relative; }
.rank-list { max-height: 50vh; overflow: auto; }  /* リストをスクロール */
.sns-row {
  position: sticky;
  bottom: 8px;                /* 右カラム内の下辺に張り付け */
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(2px);
  padding: 8px;
  border-radius: 8px;
  z-index: 1;
}
/* --- How-to (collapsible) --- */
.howto-card {
  background: #ffe3a1;
  border-radius: 12px;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.1);
  padding: 0;
  overflow: hidden;
}

.howto-card > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  font-weight: 900;
  letter-spacing: .08em;
  padding: 10px 14px;
  background: #1d5a7a;  /* ランク見出しと合わせる */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* summary のデフォルトマーカー非表示 */
.howto-card > summary::-webkit-details-marker { display: none; }
.howto-card > summary::after { content: "＋"; font-weight: 900; }
.howto-card[open] > summary::after { content: "－"; }

.howto-card #howtoBody { padding: 12px 14px 14px; background: #ffefc2; }
.howto-list { margin: 0; padding-left: 1.2em; }
.howto-list li { font-weight: 700; line-height: 1.6; margin: .2em 0; }

/* =========================================================
   2.5D BURGER SKIN（CSSだけで質感アップ）
   - 既存のゲームシステム／HTML／JSは変更せず、見た目だけを上書きします
========================================================= */

/* 共通：パーツのベース（陰影・縁・ハイライト） */
.part{
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.22);
  box-shadow:
    0 12px 20px rgba(0,0,0,.24),
    inset 0 2px 0 rgba(255,255,255,.32),
    inset 0 -14px 18px rgba(0,0,0,.26);
}

/* ラベルは“プレート”にして読みやすく */
.part .label{
  padding: 1px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.15);
  border: 0px solid rgba(255,255,255,.12);
  box-shadow: 0 6px 12px rgba(0,0,0,.8);
  backdrop-filter: blur(1px);
}

/* =============== Bun（バンズ） =============== */
.bun{
  background:
    radial-gradient(120% 120% at 30% 10%, rgba(255,255,255,.50), rgba(255,255,255,0) 55%),
    radial-gradient(130% 140% at 50% 120%, rgba(0,0,0,.28), rgba(0,0,0,0) 58%),
    linear-gradient(180deg, #f6c98a 0%, #eaa24f 55%, #c9792e 100%);
  border-color: rgba(75,36,10,.35);
}

/* ===== 上バンズ（ゴマあり）===== */
.bun.top{
  border-radius: 999px 999px 140px 140px; /* TL TR BR BL */
  background-image:
    radial-gradient(120% 120% at 30% 10%, rgba(255,255,255,.50), rgba(255,255,255,0) 55%),
    radial-gradient(circle, rgba(255,245,220,.85) 0 1.2px, rgba(255,245,220,0) 1.9px),
    linear-gradient(180deg, #f6c98a 0%, #eaa24f 55%, #c9792e 100%);
  background-size: auto, 26px 18px, auto;
  background-position: center, 0 0, center;

  box-shadow:
    0 12px 20px rgba(0,0,0,.24),
    inset 0 2px 0 rgba(255,255,255,.32),
    inset 0 -12px 16px rgba(0,0,0,.22);
}


/* ===== 下バンズ（ゴマなし・重い底）===== */
.bun.bottom{
  border-radius: 140px 140px 999px 999px; /* TL TR BR BL */
  background:
    radial-gradient(120% 120% at 30% 10%, rgba(255,255,255,.40), rgba(255,255,255,0) 55%),
    radial-gradient(130% 140% at 50% 120%, rgba(0,0,0,.35), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, #f6c98a 0%, #eaa24f 55%, #c9792e 100%);

  box-shadow:
    0 16px 26px rgba(0,0,0,.32),
    inset 0 2px 0 rgba(255,255,255,.26),
    inset 0 -18px 22px rgba(0,0,0,.36);
}

/* =============== Ingredients（具材） =============== */
/* A=あかい とまと */
.ing-a{
  background:
    radial-gradient(80% 140% at 30% 35%, rgba(255,255,255,.32), rgba(255,255,255,0) 58%),
    radial-gradient(120% 180% at 60% 120%, rgba(0,0,0,.22), rgba(0,0,0,0) 62%),
    linear-gradient(180deg, #ff6b6b 0%, #e03131 55%, #a51111 100%);
}

/* I=いべりこぶた（肉：脂の筋） */
.ing-i{
  background:
    radial-gradient(100% 200% at 30% 30%, rgba(255,255,255,.26), rgba(255,255,255,0) 60%),
    repeating-linear-gradient(120deg, rgba(255,255,255,.16) 0 10px, rgba(0,0,0,.10) 10px 20px),
    linear-gradient(180deg, #c47a4b 0%, #8a4b0f 60%, #5b2c16 100%);
}
.ing-i .label{ background: rgba(0,0,0,.34); }

/* U=うなぎ（タレの艶） */
.ing-u{
  background:
    radial-gradient(120% 180% at 30% 20%, rgba(255,255,255,.24), rgba(255,255,255,0) 55%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 6px, rgba(0,0,0,0) 6px 14px),
    linear-gradient(180deg, #3a2416 0%, #2a160d 60%, #150a05 100%);
}

/* E=えび（コーラル→サーモン） */
.ing-e{
  background:
    radial-gradient(80% 160% at 30% 30%, rgba(255,255,255,.30), rgba(255,255,255,0) 58%),
    repeating-linear-gradient(105deg, rgba(255,255,255,.10) 0 8px, rgba(0,0,0,.08) 8px 16px),
    linear-gradient(180deg, #ffb3c7 0%, #ff62ff 55%, #c447d1 100%);
}
.ing-e .label{ background: rgba(0,0,0,.30); }

/* O=オニオン（見た目はレタス寄り：シャキッと） */
.ing-o{
  background:
    radial-gradient(90% 180% at 30% 25%, rgba(255,255,255,.30), rgba(255,255,255,0) 58%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 9px, rgba(0,0,0,.06) 9px 18px),
    linear-gradient(180deg, #6adf63 0%, #3a8a2f 60%, #1f5a19 100%);
}
.ing-o .label{ background: rgba(0,0,0,.30); }

/* =========================================================
   Label force fix（い/え も含めラベルを白＋影に強制）
========================================================= */

.label{
  color: #fff !important;
  text-shadow: 0 2px 6px rgba(0,0,0,.65), 0 1px 0 rgba(0,0,0,.35) !important;
}

/* 念のため：親(.ing-i/.ing-e)側の文字色の影響を遮断 */
.ing-i, .ing-e{
  color: inherit !important;
}