/*!
 * © 2025 パソコンサロンゆうらく (Pasokon Salon Yuuraku). All rights reserved.
 * Project: ゆうらく学習トレーニングポータルYuuraku Leaning station
 * File: aiueoburger2
 * BUILD_ID: YR-2025-0918-K13                 // ← 公開用の可視ビルド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가 숨겨져 있습니다. 이를 삭제·변조하는 행위는 위반으로 간주되어 엄정 대응합니다.
 */



/* ========================================================
   AIUEO BURGER DELIVERY — Styles (formatted + commented)
   ※ もとの内容・宣言は変更していません（順序も極力維持）。
   ※ 後半にある重複・上書きルールはそのまま残し、
      コメントで「上書き/再宣言」である旨を明記しています。
   ======================================================== */

/* ------------------------------------
 * Theme Tokens / CSS Variables
 * 画面全体の配色やカラム幅などのトークン
 * ------------------------------------ */
:root {
  --bg: #f4c233;              /* 背景色（テーマ黄） */
  --ink: #173046;             /* 文字色（濃紺） */
  --brand: #e6772e;           /* ブランドカラー（ヘッダーなど） */
  /* ★ カラム幅（好みで調整可） */
  --order-col: 240px;         /* 左：オーダー欄 */
  --made-col: 120px;          /* 右：つくったバーガー欄（従来の約1/2） */
  --panel: #ffd24d;           /* パネル背景 */
  --panel-border: #c58a00;    /* パネル枠線 */
  --ok: #2f9e44;              /* OK/良い状態 */
  --bad: #f03e3e;             /* NG/警告色 */
  --beige: #f0c7a1;           /* 具材 i 用のベージュ */
  --brown: #8a4b0f;           /* 具材 u 用のブラウン */
  --pink: #ff62ff;            /* 具材 e 用のピンク */
  --green: #3a8a2f;           /* 具材 o 用のグリーン */
  --red: #f10000;             /* 具材 a 用のレッド */
  /* ORDER PREVIEW の調整用（追加） */
  --order-preview-h: 300px;  /* ← 100px相当→140pxに拡大。150〜160でもOK */
  --order-min-scale: .82;    /* ← これ以下に縮めない（文字つぶれ防止） */

}

/* ------------------------------------
 * Reset / Base
 * ------------------------------------ */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  color: var(--ink);
  background: #eab173; /* サイト全体の背景 */
  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; /* 日本語向け安全フォントセット */
}

/* ------------------------------------
 * App 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; /* 立体感を出す下罫線 */
}
.app-header .brand { display: flex; align-items: center; gap: 14px; }
.burger-emoji { font-size: 36px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.2)); }
#titleText {
  margin: 0;
  font-weight: 800;
  letter-spacing: .04em;
  text-wrap: balance; /* 長いタイトルの視認性を改善 */
  font-size: clamp(16px, 4.5vw, 44px);
}
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; }

/* Buttons */
.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.small { padding: 6px 10px; border-radius: 8px; font-size: 14px; }
.btn.primary { background: #0b7285; }
.btn.danger  { background: #c92a2a; }
.btn.link    { text-decoration: none; display: inline-flex; align-items: center; }

/* ------------------------------------
 * App Shell / 2カラムレイアウト
 * ------------------------------------ */
.app-shell {
  max-width: 1280px;
  margin: 0 auto;
  min-height: calc(100vh - 150px);
  padding: 12px;
  display: grid;
  grid-template-columns: 3fr 2fr; /* 3/5 と 2/5 */
  gap: 14px;
}
.panel {
  background: var(--panel);
  border: 4px solid var(--panel-border);
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 6px 0 rgba(0,0,0,.2);
}

/* ------------------------------------
 * Game HUD / 進行情報
 * ------------------------------------ */
.game-panel { display: flex; flex-direction: column; }
.game-hud {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 6px;
  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);
}
/* HUD肩書き */
.rank-title{
  margin-top: 2px;
  font-size: 14px;         /* 行2で控えめに */
  font-weight: 900;
  color: #0b7285;          /* 既存のプライマリ色を使用 */
}

.hearts { color: #f03e3e; letter-spacing: 4px; }

/* 縦オーダーの各段を少しだけ薄くする（基本サイズ自体を小さめに） */
.order-burger.order-vert .order-part { padding: 6px 8px; font-size: 14px; }

/* === プレイ中パーツ＆点線ガイドを“はみ出したら縦圧縮”できるように === */
.part { transform: scaleY(var(--scale, 1)); transform-origin: center bottom; }
.ghost-stack { transform: scaleY(var(--scale, 1)); transform-origin: center bottom; }

/* オーダー行（左/右） */
.order-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 6px; }
.order-card, .made-box { background: #fff; border-radius: 10px; border: 2px solid #9ab; padding: 10px; }
.order-head, .made-head { font-weight: 900; margin-bottom: 8px; }

/* オーダープレビュー：固定高 + オーバーフロー抑止 */
.order-preview { display: flex; justify-content: center; align-items: flex-start;
  min-height: var(--order-preview-h); height: var(--order-preview-h); }

/* オーダーバーガー（横積み） */
.order-burger { display: flex; align-items: center; gap: 6px; }
/* 縦バーガーをスケールする前提で原点を固定 */
.order-burger { transform-origin: top center; will-change: transform; }

/* 各段（具材/バンズ）の見た目 */
.order-part { display: grid; place-items: center; border-radius: 8px; color: #fff; font-weight: 900; padding: 6px 8px; }
.order-part.bun     { background: #d3752f; }
.order-part.ing-a   { background: var(--red); }
.order-part.ing-i   { background: var(--beige); color: #5b2c16; }
.order-part.ing-u   { background: var(--brown); }
.order-part.ing-e   { background: var(--pink); color: #17202a; }
.order-part.ing-o   { background: var(--green); }
.order-meta { display: flex; gap: 16px; margin-top: 6px; font-weight: 700; }

/* 右欄：横並びのミニ積層（旧タイプ） */
.made-list { display: flex; flex-wrap: wrap; gap: 8px; min-height: 42px; }
.made-mini { display: flex; gap: 2px; align-items: center; }
.mini-part { width: 12px; height: 12px; border-radius: 2px; }
.mini-part.bun   { background: #d3752f; }
.mini-part.ing-a { background: var(--red); }
.mini-part.ing-i { background: var(--beige); border: 1px solid #5b2c16; }
.mini-part.ing-u { background: var(--brown); }
.mini-part.ing-e { background: var(--pink); border: 1px solid #17202a; }
.mini-part.ing-o { background: var(--green); }

/* ------------------------------------
 * Playfield / プレイフィールド本体
 * ------------------------------------ */
.playfield {
  position: relative;
  flex: 1;
  background: #bfe6ff;
  border: 6px solid #2a526e;
  border-radius: 10px;
  overflow: visible; /* クリップしない */
  display: flex; flex-direction: column-reverse; justify-content: flex-start; align-items: stretch;
  /* 上下の逃げを増やす（下を広めに） */
  padding: 18px 12px 28px;
}

/* === Ghost guide (点線の置きガイド) === */
.ghost-stack {
  position: absolute;
  /* 上で増やした padding と同じだけ内側に寄せる */
  inset: 18px 12px 28px 12px;
  display: flex;
  flex-direction: column-reverse;    /* 下→具→上（実際の積み上げと同じ見え方） */
  align-items: stretch;
  justify-content: flex-start;
  pointer-events: none;              /* クリック等は素通り */
  z-index: 0;
}
/* 圧縮時の見た目安定化（任意） */
.part { will-change: transform; }

.ghost-part {
  height: 48px;
  margin: 3px 12px;                  /* .part と同じ余白に合わせる */
  border: 3px dashed rgba(0,0,0,.28);
  border-radius: 10px;
  opacity: .6;
}
/* バンズが枠の角丸で欠けないように上下だけ余裕を足す */
.part.bun.top    { margin-top: 12px !important; }
.part.bun.bottom { margin-bottom: 16px !important; }

.ghost-bun { border-color: #ab8d6f; } /* バンズ用の色味 */
.ghost-ing { border-color: #8aa; }    /* 具用の色味 */
.ghost-part.bun.top {
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
}
.ghost-part.bun.bottom {
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
}
/* 実パーツをガイドの上に表示 */
.part { position: relative; z-index: 1; }

/* パーツの共通見た目 */
.part {
  position: relative;
  display: grid; place-items: center;
  font-weight: 900; color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
  border-radius: 10px;
  margin: 3px 12px;
  box-shadow: 0 3px 0 rgba(0,0,0,.25);
  transition: transform .25s ease, opacity .25s ease;
  user-select: none;
  height: 48px;
}
.part .label { font-size: 20px; }
.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; }
:root{
   --sesame: rgb(248 236 192 / 0.12);
   }  /* 82% 不透明 = やや透過 */


/* 上バンズ：ゴマ（水平） */
.bun.top{ position: relative; overflow: hidden; }
.bun.top::after{
  content:"";
  position:absolute;
  inset: 12% 8% 16%;
  pointer-events:none;
  background: radial-gradient(8px 5px at 6px 6px, var(--sesame) 60%, #0000 62%) 0 0 / 22px 18px repeat;
  opacity:.95;
  /* ↓ 傾きを消す（必ず削除 or 上書き） */
  transform: none;
}

/* ミニカード用（水平） */
.mini-part.bun.top::after{
  content:"";
  position:absolute;
  inset: 18% 12% 18%;
  pointer-events:none;
  background: radial-gradient(5px 3px at 4px 4px, var(--sesame) 60%, #0000 62%) 0 0 / 14px 12px repeat;
  opacity:.95;
  transform: none;
}


.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); }
.part.shrink .label { font-size: 12px; }

/* Legend / 凡例チップ */
.legend { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.chip { background:#fff; padding:10px 16px; border-radius:18px;  font-weight:700; border:2px solid #9ab; }
.chip.space { background: #ffd8a8; }
.chip.key   { background: #d2f4ea; }

/* ------------------------------------
 * Ranking / ランキングパネル
 * ------------------------------------ */
.rank-panel { display: flex; }
.rank-card  { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.rank-head  { display: flex; justify-content: space-between; align-items: center; background: #1d5a7a; color: #fff; padding: 8px 10px; border-radius: 8px; }
.rank-head .title { font-size: 18px; font-weight: 900; letter-spacing: .2em; }
.rank-list {
  min-height: 280px;
  background: #1c5f83; color: #fff;
  padding: 12px 18px; border-radius: 8px;
  display: flex; flex-direction: column; gap: 2px;
  list-style-position: inside;
}
.rank-list li { font-size: 14px; }
.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; }

/* ------------------------------------
 * Result 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; }

/* ------------------------------------
 * Footer / フッター
 * ------------------------------------ */
.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 / レスポンシブ
 * （このブロックは後半にも play-grid 用のメディアクエリがあります）
 * ------------------------------------ */
@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 1fr; }
  .order-row { grid-template-columns: 1fr; }
}

/* アクセシビリティ：キーボードフォーカスの見やすさ */
:focus-visible { outline: 3px dashed #0b7285; outline-offset: 2px; }


/* ====================================================================
 * Vertical minis in 'つくったバーガー'（新しい縦積みミニ表示）
 * ここからは "上書き/レイアウト変更" を含むセクションです。
 * 右欄の見た目・並べ方を縦方向に最適化します。
 * ==================================================================== */
.made-list { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.made-mini { display: flex; align-items: flex-end; justify-content: center; width: auto; }
.mini-burger { display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 4px 6px; background: rgba(0,0,0,.03); border-radius: 6px; border: 1px solid rgba(0,0,0,.08); }
.mini-part { width: 26px; height: 8px; border-radius: 2px; }
.mini-part.bun.top    { background: #d3752f; height: 10px; border-top-left-radius: 14px; border-top-right-radius: 14px; }
.mini-part.bun.bottom { background: #d3752f; height: 10px; border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; }
.mini-part.ing-a { background: var(--red); }
.mini-part.ing-i { background: var(--beige); border: 1px solid #5b2c16; box-sizing: border-box; }
.mini-part.ing-u { background: var(--brown); }
.mini-part.ing-e { background: var(--pink); border: 1px solid #17202a; box-sizing: border-box; }
.mini-part.ing-o { background: var(--green); }

/* 縦積みオーダー表示 */
.order-burger.order-vert { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.order-burger.order-vert .order-part.bun { background: #d3752f; }
.order-burger.order-vert .order-part.bun.top    { border-top-left-radius: 16px; border-top-right-radius: 16px; }
.order-burger.order-vert .order-part.bun.bottom { border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; }

/* オーダーカードを行グリッド化（見出し / プレビュー / メタ情報）
   ※ 先頭側にも同名セレクタがありますが、ここは "再宣言" です。 */
.order-card { display: grid; grid-template-rows: auto 1fr auto; }

/* === FIX: オーダーが消えるのを防ぐ 最終上書き ===
   ※ 先頭側の .order-preview をもう一度明示（高さ・レイアウト固定） */
  .order-preview {
    position: relative;
    display: flex; justify-content: center; align-items: flex-start;
    min-height: var(--order-preview-h);
    height:     var(--order-preview-h);
    overflow: hidden;
  }

/* 再宣言：縦積みの崩れ防止用（flex-direction: column を強制） */
.order-burger.order-vert {
  display: flex;
  flex-direction: column;  /* ← これが無い/上書きされると横一列になって崩れます */
  align-items: center;
  gap: 6px;
}
.order-burger.order-vert .order-part{
  width: 156px;     /* ← 140 → 156（好みで） */
  font-size: 15px;  /* ← 14 → 15（上の共通指定が14pxのため再指定） */
  font-weight: 900;
  padding: 6px 8px;
}
.order-burger.order-vert .order-part.bun { background: #d3752f; }
.order-burger.order-vert .order-part.bun.top    { border-top-left-radius: 16px; border-top-right-radius: 16px; }
.order-burger.order-vert .order-part.bun.bottom { border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; }

/* 具の段数が多い時にだけ縦方向を少し詰める */
.order-burger.order-vert.tight  .order-part{ padding: 4px 6px; font-size: 14px; }
.order-burger.order-vert.xtight .order-part{ padding: 3px 6px; font-size: 13px; }

/* === 3カラムの高さをそろえる（プレイ画面：左/中/右） === */
.play-grid {
  /* 既にあるならそのままでOK、なければ追加 */
  display: grid;
  grid-template-columns: var(--order-col, 240px) minmax(0, 1fr) var(--made-col, 120px);
  gap: 12px;
  align-items: stretch;            /* ← 同じ行のセル高さをそろえる */
}

/* 各カラムを flex 縦積みにして、中身を100%に伸ばす */
.order-col, .play-col, .made-col { display: flex; flex-direction: column; }

/* 中央のプレイフィールドが全体高を決める基準 */
.playfield {
  flex: 1 1 auto;
  min-height: 420px;               /* 好みで 420〜640px などに調整 */
}

/* 左右の白カードをセルいっぱいに伸ばす */
.order-card, .made-box {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* オーダーカードの内側レイアウト（すでにあればOK） */
.order-card { display: grid; grid-template-rows: auto 1fr auto; }
.order-preview { /* 100px固定のままでOK。カード自体は全高になる */ }

/* 右欄は縦に伸ばしつつ中身をスクロール可能に */
.made-head { flex: 0 0 auto; }
/* つくったバーガー：上揃え・縦に積む */
.made-box { display: flex; flex-direction: column; }

.made-head { flex: 0 0 auto; }
.made-list {
  flex: 1 1 auto;          /* ボックスの残り高を使う */
  display: flex;
  flex-direction: column;  /* 縦方向に並べる */
  gap: 8px;
  align-items: flex-start;      /* 左揃え */
  justify-content: flex-start;  /* ★ 上揃え */
  overflow: auto;               /* 多いときはスクロール */
  min-height: 0;                /* はみ出し防止 */
}

/* アイテムは左寄せでOK */
.made-mini { align-self: flex-start; }

/* もし sticky 指定が残っていたら伸びないので外す（または上書き） */
.order-col, .made-col { position: static; }

/* モバイルは1カラムに戻す（play-grid 用） */
@media (max-width: 1100px) {
  .play-grid { grid-template-columns: 1fr; }
  .order-card, .made-box { height: auto; }
  .playfield { min-height: 420px; }
}

/* つくったバーガーの ^n バッジ */
.mini-burger { position: relative; }
.mini-count {
  line-height: 1.2;     /* ← ^ の頭が切れないよう余裕を持たせる */
  padding-top: 1px;     /* ← 足りなければ+1〜2pxで微調整 */
  height: auto;         /* ← 高さ固定しているなら外す */
  position: absolute; top: -6px; right: -6px;
  background: #0b7285; color: #fff; border: 2px solid #fff;
  border-radius: 999px; padding: 0 6px;
  font-size: 11px; font-weight: 800; line-height: 16px;
}

/* === 作ったBURGERのアイコンを小さく === */
:root{
  /* 好みで微調整できます */
  --mini-w: 18px;        /* 具の幅 */
  --mini-h: 5px;         /* 具の高さ */
  --mini-bun-h: 7px;     /* バンズの高さ */
  --mini-gap: 4px;       /* アイテム間の隙間 */
  --mini-pad-x: 4px;     /* ミニバーガーの左右パディング */
  --mini-pad-y: 3px;     /* ミニバーガーの上下パディング */
}

/* リストの密度を少し上げる */
.made-list{
  gap: var(--mini-gap) !important;
}

/* 1個分（縦積み）の余白を詰める */
.mini-burger{
  padding: var(--mini-pad-y) var(--mini-pad-x) !important;
}

/* 具とバンズのサイズを小さく */
.mini-part{
  width: var(--mini-w) !important;
  height: var(--mini-h) !important;
  border-radius: 2px !important;
}
.mini-part.bun.top,
.mini-part.bun.bottom{
  height: var(--mini-bun-h) !important;
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
  border-bottom-left-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
}

/* ^n バッジも少し小さく寄せる（使っている場合） */
.mini-burger{ position: relative; }
.mini-count{
  top: -4px !important; right: -4px !important;
  font-size: 10px !important; line-height: 14px !important;
  padding: 0 4px !important; border-width: 1px !important;
}

/* === つくったBURGER：自動で2～3列に折り返し === */
:root{
  --made-cell: 52px;            /* 1個の最小セル幅（右欄120pxなら52pxで2列入ります） */
  --made-gap: 8px;              /* セル間のすき間 */
}

.made-list{
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(var(--made-cell), 1fr));
  gap: var(--made-gap);
  align-content: start;
  justify-items: start;
  overflow: auto;
  min-height: 0;
}

/* アイテムをセル幅に合わせる */
.made-mini{ width: var(--made-cell); }
.mini-burger{ width: 100%; }     /* 中身（縦バーガー）をセルいっぱいに */

/* 完成バーガーが右欄へ飛ぶゴースト */
.fly-ghost{
  position: fixed; left: 0; top: 0;
  pointer-events: none; z-index: 9999;
  transform-origin: top left;
  filter: drop-shadow(0 6px 0 rgba(0,0,0,.25));
}
.fly-ghost .part{ transform: none !important; } /* 高さ圧縮のscaleYを無効化 */

.made-mini{ position: relative; } /* アンカー先 */
.made-mini .mini-burger{
  position: relative;
  overflow: visible;            /* ← ここ重要：バッジをはみ出せるように */
}

/* バッジの推奨スタイル（安定版） */
.mini-count{
  position: absolute;
  top: 4px;
  right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  min-height: 18px;             /* 高さを“固定”しない */
  border-radius: 999px;
  background: var(--brand, #0b8);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.2;             /* ← ここが caret 対策の要 */
  white-space: nowrap;
}

/* い（I）の可読性を上げる：縦オーダー用 */
.order-burger.order-vert .order-part.ing-i { color:#5b2c16; }

.btn:disabled{ opacity:.5; cursor:not-allowed; outline: none; }

/* ==== Startモーダル専用：サイズ拡大・中央寄せ・タイポ強化 ==== */
#startModal.result-modal{
  width: min(900px, 96vw);      /* 560px → 900px相当に拡大（画面が狭い時は96vw） */
  border-radius: 20px;          /* 角を少しシャープめに大きく */
}

#startModal::backdrop{
  background: rgba(0,0,0,.55);  /* 背景の暗さをほんの少し強めに */
}

/* 見出し（タイトル） */
#startModal h3{
  padding: 20px 24px;
  font-size: clamp(22px, 2.6vw, 28px); /* 端末に合わせて自動拡大 */
  text-align: center;                   /* 中央ぞろえ */
}

/* 本文部分 */
#startModal .modal-body{
  padding: 26px 32px;
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.9;
  text-align: center;                   /* 中央ぞろえ */
  font-weight: 700;
}

/* ボタン行を中央に */
#startModal form{
  padding: 0 0 24px;
  display: flex;
  justify-content: center;              /* 中央配置 */
}

/* 開始ボタンを大きく */
#startModal .btn{
  font-size: clamp(18px, 2.0vw, 22px);
  padding: 14px 28px;
  min-width: 260px;
  border-radius: 16px;
}

/* スマホ寄りの最終調整（狭い画面時） */
@media (max-width: 480px){
  #startModal .modal-body{ padding: 22px 20px; }
  #startModal .btn{ width: 100%; }
}

/* ===== GameOver Modal (Startとは別デザイン) ===== */
#gameOverModal.gameover-modal{
  width: min(980px, 96vw);
  border: none;
  border-radius: 22px;
  padding: 0;
}
#gameOverModal::backdrop{ background: rgba(10,22,30,.75); }

#gameOverModal h3{
  margin: 0;
  padding: 22px 26px;
  background: #0a5a6b;        /* ← Start(#0b7285) と明確に差別化 */
  color: #fff;
  font-weight: 900;
  letter-spacing: .08em;
  font-size: clamp(22px, 3vw, 30px);
  text-align: center;
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
}

#gameOverModal .modal-body{
  background: #fff;
  padding: 28px 32px;
  font-size: clamp(18px, 2.1vw, 22px);
  line-height: 1.9;
  font-weight: 700;
}

#gameOverModal .go-reason{
  font-size: 1.15em;
  margin: 0 0 8px;
}
#gameOverModal .go-kv{
  margin: 6px 0;
  font-size: 1.25em;
}
#gameOverModal .kv-label{ opacity: .85; }

#gameOverModal .go-note{
  margin-top: 18px;
  font-size: .95em;
  opacity: .8;
}

#gameOverModal form{
  background: #eef7fa;
  padding: 16px 18px 24px;
  display: flex;
  justify-content: center;
  border-bottom-left-radius: 22px;
  border-bottom-right-radius: 22px;
}

/* 破線スタイルのボタン（スクショの雰囲気寄せ） */
#gameOverModal .go-btn{
  background: #fff;
  color: #0a5a6b;
  border: 4px dashed #0a5a6b;
  box-shadow: none;
  padding: 14px 28px;
  min-width: 260px;
  border-radius: 16px;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 900;
}
#gameOverModal .go-btn:focus-visible{ outline: 4px solid #0a5a6b; outline-offset: 3px; }

/* 子音カードの色をプレビュー/ミニにも適用 */
.order-part.key-part,
.mini-part.key-part { background: var(--panel-dark); color: #fff; }

/* individual hues (same as .part.cons-*) */
.order-part.cons-k, .mini-part.cons-k { background:#364fc7; }
.order-part.cons-s, .mini-part.cons-s { background:#7950f2; }
.order-part.cons-t, .mini-part.cons-t { background:#15aabf; }
.order-part.cons-n, .mini-part.cons-n { background:#fd7e14; }
.order-part.cons-h, .mini-part.cons-h { background:#82c91e; color:#17202a; }
.order-part.cons-m, .mini-part.cons-m { background:#be4bdb; }
.order-part.cons-y, .mini-part.cons-y { background:#228be6; }
.order-part.cons-r, .mini-part.cons-r { background:#12b886; }
.order-part.cons-w, .mini-part.cons-w { background:#fab005; color:#17202a; }

/* 子音カード（プレイフィールド用） */
.part.key-part { color:#fff; }

.part.cons-k { background:#364fc7; }
.part.cons-s { background:#7950f2; }
.part.cons-t { background:#15aabf; }
.part.cons-n { background:#fd7e14; }
.part.cons-h { background:#82c91e; color:#17202a; text-shadow:none; }
.part.cons-m { background:#be4bdb; }
.part.cons-y { background:#228be6; }
.part.cons-r { background:#12b886; }
.part.cons-w { background:#fab005; color:#17202a; text-shadow:none; }

/* === Order preview: 消化済みパーツの視覚化（個別） === */
/* 半透明（おすすめ） */
.order-part.is-busy-dim{
  opacity:.42;
  filter: grayscale(.15) saturate(.85);
}
/* 点線アウトライン（塗りつぶしなし） */
.order-part.is-busy-outline{
  background: transparent !important;
  border: 3px dashed rgba(0,0,0,.45);
  box-shadow: none;
  text-shadow: none;
  color: var(--ink);
}