/*!
 * © 2025 パソコンサロンゆうらく (Pasokon Salon Yuuraku). All rights reserved.
 * Project: ゆうらく学習トレーニングポータルYuuraku Leaning station
 * File: sweets
 * BUILD_ID: YR-2025-0826-K6                 // ← 公開用の可視ビルド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 — タイピングスイーツ「あ～ん」 用スタイル（最終版）
==================================================================*/
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "M PLUS Rounded 1c", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Meiryo", sans-serif;
  color: #3a2d2d;
  background: radial-gradient(50% 50% at 50% 0%, #fff6f8 0%, #ffeaf2 60%, #ffe0ff 100%);
}
/* ===== Playfield Background (差し替え用) ===== */
:root{
  --playfield-bg: url("img/vacation_lounge_bg_960x720.jpg");  /* 通常 */
  --bonus-bg:     url("img/bonus_bg_960x720.jpg");           /* ボーナス */
}


.app-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  background: linear-gradient(90deg, #ffb3d1, #ffd3a3);
  color: #633; box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.app-header h1 { margin: 0; font-size: 20px; letter-spacing: .12em; }
.toolbar { display: flex; gap: 8px; align-items: center; }
.toolbar button, .toolbar a {
  appearance: none; border: 0; text-decoration: none;
  padding: 8px 12px; border-radius: 12px; font-weight: 700;
  background: #fff; color: #574;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.layout {
  max-width: 1280px; margin: 0 auto; padding: 12px;
  display: grid; grid-template-columns: 3fr 2fr; gap: 12px;
}
.game-pane, .rank-pane {
  background: #ffffffaa; border-radius: 18px; padding: 12px;
  box-shadow: 0 4px 16px rgba(255, 105, 180, 0.15);
}

.canvas-wrap{
  position: relative; /* ← 追加：overlay(絶対配置)の基準をキャンバス枠にする */

  background-image:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,240,248,.10)),
    var(--playfield-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 18px; overflow: hidden; border: 3px solid #ffdef1;
}

#game { width: 100%; height: 100%; display: block; }
.overlay {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,240,248,.92));
}
.diff-buttons{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;         /* 追加：4ボタンでも折り返す */
  justify-content: center; /* 追加：見た目を中央寄せに */
}
.diff-buttons button {
  padding: 10px 14px; border-radius: 14px;
  background: #fff; border: 2px solid #ffa9cf; font-weight: 800;
}
.diff-buttons button{
  padding: 10px 14px;
  border-radius: 14px;
  background: #fff;                 /* ←常に白 */
  border: 2px solid #ffa9cf;
  font-weight: 800;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}

/* ←追加：ホバー時だけピンク */
.diff-buttons button:hover,
.diff-buttons button:focus-visible{
  background: #ffedf6;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(255,105,180,.18);
}

/* 難易度ボタン：2行目（説明文） */
.diff-buttons button .diff-sub{
  display: block;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.1;
  margin-top: 4px;
}

.overlay .note { font-size: 12px; color: #775; }
.hud {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: 8px;
}
.hud > div { background: #fff; border-radius: 12px; padding: 8px; text-align: center; font-weight: 800; }
.rank-controls { display: grid; gap: 8px; }
.rank-controls input { padding: 6px 8px; border-radius: 10px; border: 2px solid #ffd1ea; width: 100%; }
.rank-controls .row { display: flex; gap: 8px; }
.rank-controls button, .modal-actions button {
  padding: 8px 12px; border-radius: 12px; border: 0; font-weight: 800; background: #ffeaf5;
}
.rank-controls .danger { background: #ffe1e1; }
.rank-list { margin: 12px 0 0; padding: 0 0 0 20px; max-height: 420px; overflow: auto; }
.rank-list li { margin: 6px 0; padding: 6px 8px; background: #fff; border-radius: 10px; list-style: decimal; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
@media (max-width: 980px) { .layout { grid-template-columns: 1fr; } .rank-list { max-height: 240px; } }

/* --- sprinkle choco overlay (add-on) --- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .32; /* 全体の濃さ。もっと濃くしたい時は .45 などへ */
  /* 細い棒（3x12px）をいろんな色と角度で散らす */
  background-image:
    /* 既存20本（文法を 色 0, 色 100% に修正） */
    linear-gradient(25deg,  #ff7eb6 0, #ff7eb6 100%),
    linear-gradient(-30deg, #8be9fd 0, #8be9fd 100%),
    linear-gradient(45deg,  #ffd166 0, #ffd166 100%),
    linear-gradient(-45deg, #caffbf 0, #caffbf 100%),
    linear-gradient(70deg,  #b28dff 0, #b28dff 100%),
    linear-gradient(-70deg, #ffa7c4 0, #ffa7c4 100%),
    linear-gradient(15deg,  #7db0ff 0, #7db0ff 100%),
    linear-gradient(-20deg, #ffec99 0, #ffec99 100%),
    linear-gradient(35deg,  #a3f7bf 0, #a3f7bf 100%),
    linear-gradient(-35deg, #c7a0ff 0, #c7a0ff 100%),
    linear-gradient(55deg,  #ff7eb6 0, #ff7eb6 100%),
    linear-gradient(-60deg, #8be9fd 0, #8be9fd 100%),
    linear-gradient(25deg,  #ffd166 0, #ffd166 100%),
    linear-gradient(-10deg, #caffbf 0, #caffbf 100%),
    linear-gradient(80deg,  #b28dff 0, #b28dff 100%),
    linear-gradient(-80deg, #ffa7c4 0, #ffa7c4 100%),
    linear-gradient(5deg,   #7db0ff 0, #7db0ff 100%),
    linear-gradient(-25deg, #ffec99 0, #ffec99 100%),
    linear-gradient(40deg,  #a3f7bf 0, #a3f7bf 100%),
    linear-gradient(-40deg, #c7a0ff 0, #c7a0ff 100%),
    /* 追加20本（密度アップ） */
    linear-gradient(18deg,  #ff7eb6 0, #ff7eb6 100%),
    linear-gradient(-22deg, #8be9fd 0, #8be9fd 100%),
    linear-gradient(52deg,  #ffd166 0, #ffd166 100%),
    linear-gradient(-52deg, #caffbf 0, #caffbf 100%),
    linear-gradient(65deg,  #b28dff 0, #b28dff 100%),
    linear-gradient(-65deg, #ffa7c4 0, #ffa7c4 100%),
    linear-gradient(8deg,   #7db0ff 0, #7db0ff 100%),
    linear-gradient(-28deg, #ffec99 0, #ffec99 100%),
    linear-gradient(30deg,  #a3f7bf 0, #a3f7bf 100%),
    linear-gradient(-30deg, #c7a0ff 0, #c7a0ff 100%),
    linear-gradient(12deg,  #ff7eb6 0, #ff7eb6 100%),
    linear-gradient(-12deg, #8be9fd 0, #8be9fd 100%),
    linear-gradient(38deg,  #ffd166 0, #ffd166 100%),
    linear-gradient(-38deg, #caffbf 0, #caffbf 100%),
    linear-gradient(72deg,  #b28dff 0, #b28dff 100%),
    linear-gradient(-72deg, #ffa7c4 0, #ffa7c4 100%),
    linear-gradient(2deg,   #7db0ff 0, #7db0ff 100%),
    linear-gradient(-18deg, #ffec99 0, #ffec99 100%),
    linear-gradient(48deg,  #a3f7bf 0, #a3f7bf 100%),
    linear-gradient(-48deg, #c7a0ff 0, #c7a0ff 100%);
  background-size:
    /* 2x10px を40回 */
    2px 10px, 2px 10px, 2px 10px, 2px 10px, 2px 10px,
    2px 10px, 2px 10px, 2px 10px, 2px 10px, 2px 10px,
    2px 10px, 2px 10px, 2px 10px, 2px 10px, 2px 10px,
    2px 10px, 2px 10px, 2px 10px, 2px 10px, 2px 10px,
    2px 10px, 2px 10px, 2px 10px, 2px 10px, 2px 10px,
    2px 10px, 2px 10px, 2px 10px, 2px 10px, 2px 10px,
    2px 10px, 2px 10px, 2px 10px, 2px 10px, 2px 10px,
    2px 10px, 2px 10px, 2px 10px, 2px 10px;
  background-repeat: no-repeat;
  /* ランダム風に配置（％指定でレスポンシブに） */
  background-position:
    /* 既存20点 */
    5% 10%, 15% 35%, 25% 18%, 35% 8%, 45% 28%,
    55% 12%, 65% 22%, 75% 6%,  85% 26%, 95% 14%,
    12% 60%, 22% 72%, 32% 54%, 42% 66%, 52% 58%,
    62% 74%, 72% 62%, 82% 70%, 92% 56%, 50% 44%,
    /* 追加20点（密度アップ） */
    2% 8%, 8% 18%, 18% 10%, 28% 22%, 38% 12%,
    48% 20%, 58% 8%, 68% 18%, 78% 10%, 88% 22%,
    7% 68%, 17% 78%, 27% 62%, 37% 74%, 47% 66%,
    57% 76%, 67% 64%, 77% 72%, 87% 60%, 97% 68%;
  /* ほんのり立体感（なくてもOK） */
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.06));
  z-index: 0; /* UIより奥に置く。前面に置きたい時は 1 に */
}

/* ====== Card Collection ====== */
.card-collection { margin-top: 14px; }
.card-collection h2 { margin: 0 0 8px; font-size: 18px; }

/* ====== Card Collection : 16 cards (4 x 4) ====== */
#cardGrid.card-grid{
  display: grid;
  width: min(400px, 100%);
  height: 340px;            /* ★ 4行分見える高さに（目安） */
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);  /* ★ 3 → 4 */
  gap: 8px;
}

/* 重要：既存の aspect-ratio: 3/4 を無効化して、枠内に収める */
#cardGrid.card-grid .slot{
  aspect-ratio: auto;       /* これで「3段目が見えない」を防げます */
  width: 100%;
  height: 100%;
  border-radius: 12px;
  border: 2px dashed #ffd1ea;
  background: #fff;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.06) inset;
}

/* 「？」を少し小さく */
#cardGrid.card-grid .slot::after{
  content: "？";
  font-weight: 900;
  font-size: 22px;
  color: #d8b0c9;
}

/* 右上の個数バッジを小さめ（任意） */
#cardGrid .slot .card-badge{
  top: 4px; right: 4px;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  font-size: 12px;
  line-height: 22px;
}




/* ====== Bonus Overlay ====== */
.bonus-overlay{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.2);
  z-index: 9999;
}
.bonus-box {
  background: #fff;
  border: 4px solid #ffa9cf;
  border-radius: 16px;
  padding: 18px 22px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(255,105,180,.25);
}
.bonus-title {
  font-weight: 900; font-size: 22px; letter-spacing: .1em;
  margin-bottom: 8px;
}
.bonus-count {
  font-weight: 900; font-size: 64px; line-height: 1; margin: 4px 0;
  text-shadow: 0 4px 12px rgba(0,0,0,.12);
}
.bonus-note { margin: 0; font-size: 14px; color: #775; }

/* fix: ensure hidden attribute wins for bonus overlay */
.bonus-overlay[hidden]{display:none !important;}

/* ====== Bonus Mode Background ====== */
.canvas-wrap.bonus-mode {
/* 画像は残したまま、ボーナス色をオーバーレイ */
  background-image:
    linear-gradient(180deg, rgba(230,180,34,.40), rgba(230,180,34,.40)),
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,240,248,.72)),
    var(--playfield-bg) !important;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ==== Bonus Mode: 背景画像をボーナス専用に差し替え ==== */
body.bonus-mode .canvas-wrap{
  background-image:
    /* ボーナス感の色味（薄く重ねる） */
    linear-gradient(180deg, rgba(255, 215, 0, .22), rgba(255, 105, 180, .14)),
    /* 全体の白い膜（読みやすさ確保。濃さは好みで） */
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,240,248,.10)),
    /* ボーナス背景画像 */
    var(--bonus-bg);

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image .25s ease, filter .25s ease;
}


/* --- Card count badge --- */
#cardGrid .slot { position: relative; }
#cardGrid .slot .card-badge {
  position: absolute;
  top: 4px; right: 4px;
  min-width: 26px; height: 26px;
  padding: 0 6px;
  border-radius: 13px;
  font-weight: 700; font-size: 12px; line-height: 26px;
  text-align: center;
  background: rgba(0,0,0,0.75);
  color: #fff;
  backdrop-filter: blur(2px);
  user-select: none; pointer-events: none;
}
#cardGrid .slot .card-badge.is-zero { opacity: .35; }


/* --- Collection header & reset button --- */
.card-collection .collection-header { display:flex; align-items:center; gap:12px; }
.card-collection #resetCardsBtn {
  appearance:none; border:0; padding:6px 10px; border-radius:10px;
  font-weight:700; font-size:12px; cursor:pointer;
  background:#fff; color:#444; box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.card-collection #resetCardsBtn:hover { transform: translateY(-1px); box-shadow:0 3px 10px rgba(0,0,0,.12); }

/* ==== Card Roulette Overlay ==== */
.roulette-overlay{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.35);
  z-index: 10000;
}
.roulette-overlay[hidden]{ display:none !important; }
.roulette-box{
  background:#fff;
  border:4px solid #ffa9cf;
  border-radius:16px;
  padding:18px 22px;
  text-align:center;
  box-shadow:0 10px 30px rgba(255,105,180,.25);
}
.roulette-image{
  width:min(42vmin, 340px);
  aspect-ratio:3/4;
  object-fit:cover;
  display:block;
  border-radius:12px;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
}
.roulette-label{
  margin-top:8px;
  font-weight:900;
  font-size:18px;
  letter-spacing:.1em;
  color:#755;
}

.bg-pick{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border-radius:12px;
  background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
  font-weight:700;
  color:#574;
}
.bg-pick input{ width: 140px; }

.overlay  {
  position:absolute; inset:0; display:grid; place-items:center;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,240,248,.10)); /* 画面上に薄いグラデを重ねる */
}

/* 難易度オーバーレイ：canvas-wrap を基準に全面表示＆中央揃えを強制 */
.canvas-wrap > .overlay{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ボタン群（箱）の幅を内容に合わせ、中央で崩れないようにする */
.overlay .diff-box{
  width: max-content;
  margin: 0 auto;
}

/* ====== Card click -> Detail Modal ====== */
#cardGrid .slot.filled{
  cursor: pointer;
  border-style: solid;
  border-color: #ffa9cf;
}
#cardGrid .slot.filled:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}

/* dialog */
.card-detail{
  border: 0;
  padding: 0;
  border-radius: 18px;
  background: transparent;
}
.card-detail::backdrop{
  background: rgba(0,0,0,.35);
}
.card-detail-box{
  background: #fff;
  border: 4px solid #ffa9cf;
  border-radius: 16px;
  padding: 14px 14px 12px;
  width: min(520px, 92vw);

  /* ▼追加：縦を必ず収める */
  max-height: min(88vh, 720px);
  display: flex;
  flex-direction: column;

  box-shadow: 0 16px 40px rgba(0,0,0,.25);
}

.card-detail-img{
  width: 100%;
  /* ▼ここが重要：画像の最大高さを画面に合わせる */
  max-height: 52vh;

  /* ▼切り抜かずに全体表示（縦が長い画像でもOK） */
  object-fit: contain;

  display: block;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}

.card-detail-meta{
  overflow: auto;
}

.card-detail-title{
  margin: 10px 2px 4px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .08em;
  color: #633;
}
.card-detail-desc{
  margin: 0 2px 10px;
  font-size: 13px;
  line-height: 1.5;
  color: #664;
}
.card-detail-actions{
  display: flex;
  justify-content: flex-end;
}
.card-detail-actions button{
  padding: 8px 12px;
  border-radius: 12px;
  border: 0;
  font-weight: 800;
  background: #ffeaf5;
}

#cardLangToggle{
  margin-right: 10px;
  background: #eef6ff;
}
#cardLangToggle:hover{
  filter: brightness(0.98);
}

/* ===== Seasonal FX layer (snow / sakura) ===== */
#game {
  position: relative;
  z-index: 2;   /* ← ボンボンを前面へ */
}

.fx-canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;   /* ← 雪/桜を背面へ（背景よりは手前） */
}

/* 既存 overlay は前面に */
.canvas-wrap > .overlay{ z-index: 10; }

/* ツールバーの見た目（bg-pickと雰囲気を揃える） */
.fx-pick{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border-radius:12px;
  background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
  font-weight:700;
  color:#574;
}
.fx-pick select{
  border: 0;
  background: transparent;
  font-weight: 800;
}
.fx-color{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border-radius:12px;
  background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
  font-weight:700;
  color:#574;
}
.fx-color input[type="color"]{
  width: 34px;
  height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
}

/* =========================================================
   Difficulty Overlay Centering (チャレンジ3つでも中央維持)
   - Row1: やさしい / ふつう / むずかしい
   - Row2: チャレンジ スイーツ / チャレンジ くだもの / チャレンジ みもの
========================================================= */
#difficulty.overlay{
  display: flex;              /* grid → flex */
  flex-direction: column;
  justify-content: center;    /* 縦方向の中央 */
  align-items: center;        /* 横方向の中央 */
  gap: 14px;                  /* まとまり感 */
  padding: 18px 16px;         /* 端末差の吸収 */
}

/* 見出しの余白を固定（ブラウザ既定marginの影響を除去） */
#difficulty.overlay > h2{
  margin: 0;
  line-height: 1.1;
}

/* ボタン群は2段構成のまま、中央に */
#difficulty .diff-buttons{
  display: grid;
  gap: 10px;
  justify-items: center;
  margin: 0;                 /* 余計なズレ防止 */
}

#difficulty .diff-buttons .diff-row{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  margin: 0;
}

/* 注釈もmarginを固定（下に押し下げられるのを抑制） */
#difficulty .note{
  margin: 0;
  text-align: center;
}

/* =========================================================
   Result Modal (score breakdown)
========================================================= */
#modal{
  border: 0;
  border-radius: 18px;
  padding: 14px 16px 12px;
  width: min(520px, 92vw);
  background: #fff;
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
}
#modal::backdrop{
  background: rgba(0,0,0,.35);
}
#modal h3{
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .08em;
  color: #633;
}

#modalBody .result-kpi{ display: grid; gap: 8px; }
#modalBody .result-total{
  font-size: 18px;
  font-weight: 900;
  color: #633;
}
#modalBody .result-sub,
#modalBody .result-sub2{
  font-size: 13px;
  font-weight: 800;
  color: #665;
}
#modalBody .num{
  font-variant-numeric: tabular-nums;
}

#modalBody .score-breakdown{
  border: 2px solid #ffd1ea;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
#modalBody .score-breakdown .row{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  font-weight: 900;
}
#modalBody .score-breakdown .row + .row{
  border-top: 1px dashed #ffd1ea;
}
#modalBody .score-breakdown .label{ color:#664; }
#modalBody .score-breakdown .val{ color:#633; }
#modalBody .score-breakdown .row.total{
  background: #ffedf6;
}