/* ============================================================
   コトバ探し2 Vtuber杯 — かわいいテーマ（見た目だけの上書き）
   配色・角丸・影と、ステージセレクトのレイアウトや動きを整える。
   index.html の <style> と online.css の後に読み込む。
============================================================ */
:root{
  --ck-ink:#563f5c; --ck-sub:#8a7391; --ck-line:#f1e0e5;
  --ck-pink:#ff8fb1; --ck-pink2:#e2537e; --ck-mint:#7ddfc9; --ck-mint2:#22a88d;
  --ck-sky:#8fcbff; --ck-sky2:#3b8ce0; --ck-lemon:#ffe38a; --ck-lemon2:#d99a00;
  --ck-lav:#e9bcff; --ck-lav2:#b862e0; --ck-cream:#fffaf4;
  --ck-panel-line:#caa7cb; --ck-section-line:#d6b7d4; --ck-popup-line:#dab0bd;
  --ck-shadow:0 8px 18px rgba(140,90,139,.16);
  --puyo:cubic-bezier(.34,1.56,.64,1);
}

/* ---------- 見出し（左上） ---------- */
#gameHeader{ background:#fff; border:3px solid #ffd6e4; border-radius:22px; box-shadow:var(--ck-shadow); color:var(--ck-ink); }
.gameBrand{ color:var(--ck-ink); }
.brandNumber{ background:linear-gradient(135deg,#ffb3c9,#ff8fb1); color:#fff; border-radius:12px; box-shadow:0 3px 0 #d9587f; }
.cupBadge{ background:linear-gradient(90deg,#e9bcff,#8fcbff); color:#582f6e; }
#gameModeLabel{ color:var(--ck-sub); border-left-color:var(--ck-line); }

/* ---------- 読み込み中 ---------- */
.ld-card{ border-color:var(--ck-popup-line); border-radius:32px; box-shadow:var(--ck-shadow); }
#loadOv .ld-card{ box-shadow:0 0 0 3px #efb4c9,0 12px 0 #e6a5bd40,0 18px 32px #97665526; }
#loadTxt{ color:var(--ck-lav2); }
#loadSub{ color:var(--ck-sub); }
.ld-retry{ background:var(--ck-pink2); box-shadow:0 5px 0 #b33a5e, 0 8px 14px rgba(0,0,0,.15); }
.ld-retry:active{ box-shadow:0 2px 0 #b33a5e; }

/* ---------- マス（色はデザイン設定を尊重し、形だけ丸く） ---------- */
.cell{ border-radius:24%; box-shadow:inset 0 -5px 0 rgba(120,60,0,.16), 0 4px 8px rgba(140,90,139,.16); }
body.lightMode .cell{ box-shadow:inset 0 -4px 0 rgba(120,60,0,.16), 0 2px 0 rgba(140,90,139,.16); }

/* ---------- 盤面の上のカード（開始前・結果・遊び方） ---------- */
.ovl-card{ background:var(--ck-cream); border:5px solid var(--ck-popup-line); border-radius:34px; box-shadow:0 0 0 6px rgba(255,255,255,.9), 0 12px 24px rgba(140,90,139,.28); }
.dataDeleteCard{ box-shadow:0 14px 42px #26172855; }
.onlineCard{ box-shadow:0 9px 26px rgba(36,59,83,.1); }
.ovl-card h2{ color:var(--ck-pink2); }
.ovl-set{ color:var(--ck-ink); }
.ovl-set b{ color:var(--ck-sky2); }
.ovl-rec{ background:#fff3d6; color:#8a5a12; border-radius:18px; }
.ovl-hint{ color:var(--ck-sub); }
.resBtn{ background:linear-gradient(180deg,#9fd3ff,#3b8ce0); box-shadow:0 5px 0 #2a6cb3, 0 8px 14px rgba(59,140,224,.28); }
.resBtn:active{ box-shadow:0 2px 0 #2a6cb3, 0 4px 8px rgba(59,140,224,.2); }
.resBtn.resAdvanceBtn{ background:linear-gradient(180deg,#ffb1c8,#e2537e); box-shadow:0 5px 0 #b33a5e, 0 8px 14px rgba(226,83,126,.28); }
.resBtn.resAdvanceBtn:active{ box-shadow:0 2px 0 #b33a5e, 0 4px 8px rgba(226,83,126,.2); }
.helpClose{ border-color:var(--ck-pink2); color:var(--ck-pink2); }
.helpList{ color:var(--ck-ink); }
#resTitle.win-s{ color:var(--ck-pink2); }
#resTitle.win-l{ color:var(--ck-sky2); }
#resTitle.win-d{ color:var(--ck-sub); }
#resScore{ color:var(--ck-ink); }
.resultPlayerName{ color:var(--ck-pink2); }
.resultScoreRow.listener .resultPlayerName{ color:var(--ck-sky2); }
.resultPlayerScore{ color:var(--ck-ink); }
#resultCard::after{ color:rgba(184,98,224,.28); }

/* ---------- ステージセレクト ---------- */
.stageClearBox,.stageRuleBox{ background:#fffaf4; border-color:var(--ck-popup-line); border-radius:20px; color:var(--ck-ink); }
.stageClearLabel{ background:var(--ck-pink); color:#fff; }
.stageRuleBox h3{ color:var(--ck-lav2); }.stageRuleList{ color:var(--ck-ink); }
.stageRuleCard .stageModeNote{ color:var(--ck-sub); }
.stageSelectCard{
  --journey-accent:#b9638b;
  --journey-dark:#85465f;
  --journey-soft:#fff0f6;
  width:980px;
  max-height:100%;
  padding: 22px 30px 25px;
  border:4px solid #d7adbf;
  border-radius:32px;
  overflow-x:hidden;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:#d7adbf transparent;
  overscroll-behavior:contain;
  background:radial-gradient(ellipse at 2% 0%,#ffe6ef 0%,transparent 48%),radial-gradient(ellipse at 100% 100%,#efe3fb 0%,transparent 42%),#fffaf8;
  box-shadow: 0 0 0 5px #ffffff, 0 1px 0 11px #b784a533, 0 6px 14px 13px #9a407b33;
  text-align:left;
  isolation:isolate;
}
.stageSelectCard[data-difficulty="hard"]{ --journey-accent:#ca647e; --journey-dark:#944158; --journey-soft:#fff0f1; }
.stageSelectCard[data-difficulty="extreme"]{ --journey-accent:#9a6bbc; --journey-dark:#715094; --journey-soft:#f5efff; }
#stageSelectOv.show .stageSelectCard{ animation:stageMenuArrive .48s cubic-bezier(.18,.85,.3,1.12) both; }
.stageSelectHeader{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 5px 16px; border-bottom:2px dashed #e7cedd; }
.stageEyebrow{ display:block; margin-bottom:7px; color:var(--journey-accent); font-size:18px; font-weight:900; letter-spacing:.13em; }
.stageEyebrow > span{ display:inline-block; margin-right:5px; color:#c79342; }
.stageSelectTitle{margin:0;color:#684568;font-size: 44px;line-height:1.3;letter-spacing: 4px;text-shadow: 1px 4px 0 #fff;}
.stageSelectLead{margin: 4px 0 0;color:#9c7891;font-size: 21px;font-weight: 700;}
.stageProgress{ flex:none; min-width:166px; padding:10px 18px 11px; border:2px solid #ead5e0; border-radius:20px; background:#ffffffc9; text-align:center; box-shadow:0 4px 0 #e6cfdd55; }
.stageProgressLabel{ display:block; color:#997589; font-size:18px; font-weight:900; }
.stageProgressValue{display:flex;align-items:baseline;justify-content:center;gap:8px;margin: 1px 0 6px;color:#a18a9b;font-size: 19px;font-weight:900;}
.stageProgressValue b{ color:var(--journey-accent); font-family:'Mochiy Pop One',sans-serif; font-size:32px; line-height:1.1; }
.stageClearPips{ display:flex; gap:5px; justify-content:center; }.stageClearPips span{ width:20px; height:6px; border-radius:4px; background:#eadde5; }.stageClearPips .done{ background:#68bbac; box-shadow:0 1px 0 #408c7d; }
.stageTrack{gap:12px;align-items:stretch;margin: 18px 0 18px;}
.stageTrack::before{ left:6%; right:6%; top:103px; height:5px; background:repeating-linear-gradient(90deg,#dcb8cc 0 8px,transparent 8px 14px); box-shadow:none; }
.stageNode,.stageNode.selected{ min-width:0; animation:none; will-change:auto; }
#stageSelectOv.show .stageNode{ animation:stageCardArrive .38s cubic-bezier(.2,.7,.3,1.15) both; animation-delay:calc(var(--stage-order) * 35ms); }
/* 表示中の選び直し（同じ難易度）では登場アニメをやり直さない。index.html の renderStageTrack が付ける。 */
#stageSelectOv.show .stageTrack.stageTrackSettled .stageNode{ animation:none; }
.stageStepBtn{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:3px;
  width:100%;
  height: 222px;
  padding:12px 10px 11px;
  border:3px solid #dec9d7;
  border-radius:20px;
  background:linear-gradient(165deg,#fff,#f9f0f6);
  color:var(--ck-ink);
  box-shadow:0 5px 0 #d6c1cf,0 8px 14px #80617c12;
  text-shadow:none;
  font-family:'M PLUS Rounded 1c',sans-serif;
  transition:transform .2s var(--puyo),box-shadow .2s,border-color .2s,background .2s;
}
.stageNode.unlocked .stageStepBtn{ background:linear-gradient(155deg,#fff,#eef7fe); border-color:#adcde8; box-shadow:0 5px 0 #88b4d7,0 8px 14px #507da317; }
.stageNode.cleared .stageStepBtn{ background:linear-gradient(155deg,#fff,#f0faf6); border-color:#b7d9cb; box-shadow:0 5px 0 #99c2b2,0 8px 14px #60847517; }
.stageNode.selected .stageStepBtn{ transform:translateY(-3px); border-color:var(--journey-accent); background:linear-gradient(160deg,#fff,var(--journey-soft)); box-shadow:0 0 0 4px #fff,0 0 0 6px #e8bdcf,0 7px 0 #bc7e9e,0 12px 20px #9e58792b; }
.stageStepBtn:hover:not(:disabled){ transform:translateY(-7px); box-shadow:0 10px 0 #b990ab,0 16px 24px #9e587927; }
.stageStepBtn:active:not(:disabled){ transform:translateY(2px) scale(.985); box-shadow:0 2px 0 #b990ab; }
.stageStepBtn:focus-visible{ outline:3px solid #835382; outline-offset:7px; }
.stageNodeTop{ display:flex; justify-content:space-between; align-items:center; min-height:23px; }
.stageNodeNumber{ display:flex; align-items:baseline; gap:5px; color:#9b8699; font-size:18px; letter-spacing:.07em; }
.stageNodeNumber b{ color:#795b76; font-family:'Mochiy Pop One',sans-serif; font-size:19px; line-height:1; }
.stageNodeSeal{ color:#b68a5a; font-size:18px; line-height:1; }.stageNode.cleared .stageNodeSeal{ color:#329d80; }
.stageNodeArt{display:grid;place-items:center;height:87px;flex:none;background: radial-gradient(ellipse at 50% 55%, #b6b5cb61 0 25%, transparent 57%);}
.stageNodeEnemy{ position:static; width:100px; height:85px; object-fit:contain; object-position:center bottom; transform-origin:center bottom; filter:drop-shadow(0 5px 2px #80627d22); }
.stageNode.selected .stageNodeEnemy{ transform:none; animation:stageEnemyFloat 2.8s ease-in-out infinite; }
.stageStepBtn:hover:not(:disabled) .stageNodeEnemy{ scale:1.06; }
.stageNodeName{display:grid;place-items:center;width:100%;min-height: 37px;margin:3px 0 1px;color:#76546f;font-size: 21px;line-height:1.3;font-weight: 800;}
.stageNodeStatus{align-self:center;min-width:98px;margin-top:auto;padding:5px 9px;border-radius:999px;background:#e0f0fc;color:#3979ab;font-size:18px;font-weight:900;line-height:1.25;}
.stageNode.cleared .stageNodeStatus{ background:#def1e8; color:#5f9683; }
.stageNode.selected .stageNodeStatus{ background:var(--journey-accent); color:#fff; box-shadow:0 2px 0 #8f527126; }
.stageNode.selected .stageNodeStatus::before{ content:''; display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; background:currentColor; vertical-align:3px; }
.stageNode.locked .stageStepBtn{ background:linear-gradient(155deg,#f7f1f5,#eee7ef); border-color:#dacddb; box-shadow:0 5px 0 #c5b7ca; }
.stageNode.locked .stageNodeEnemy{ opacity:.55; filter:grayscale(.3); }
.stageNode.locked .stageNodeNumber b,.stageNode.locked .stageNodeName{ color:#9b879f; }.stageNode.locked .stageNodeSeal{ font-size:18px; opacity:.55; }
.stageNode.locked .stageNodeStatus{ background:#e4dbe7; color:#9d88a1; }
.stageNode.cleared .stageStepBtn::after{ content:none; }
.stageDifficultySwitch{ width:390px; margin:5px auto 18px; padding:5px; border:2px solid #e8d5e1; background:#f0e6ee; box-shadow:inset 0 2px 4px #8c5a8b0d; }
.stageDifficultySwitch.hasExtreme{ width:625px; }.stageDifficultyBtn{ min-height:40px; color:#9b7e95; font-size:19px; }
.stageDifficultyBtn:hover:not(.act){ color:var(--ck-ink); }.stageDifficultyBtn.normal.act{ background:linear-gradient(#8ed4b5,#53a48f); box-shadow:0 2px 0 #377f6d,0 4px 8px #45957d30; }
.stageDifficultyBtn.hard.act{ background:linear-gradient(#ed9bb4,#c56284); box-shadow:0 2px 0 #94445d,0 4px 8px #b2627b30; }
.stageDifficultyBtn.extreme.act{ background:linear-gradient(#c6a1e3,#976bb8); box-shadow:0 2px 0 #6f4c8a,0 4px 8px #9468b030; }
#stageSelectOv .stageDetail{ width:100%; }
.stageBrief{display:grid;grid-template-columns:96px minmax(175px,.8fr) minmax(0,1.35fr);align-items:center;gap:14px;padding: 12px 17px 10px 10px;border:2px solid #e5cddb;border-radius:22px;background:linear-gradient(110deg,#fff,var(--journey-soft));box-shadow:0 4px 0 #e9d5e047;}
.stagePreviewPortrait{ display:grid; place-items:center; width:96px; height:96px; border-radius:20px; background:radial-gradient(ellipse at 50% 85%,#dbbad048 0 20%,transparent 65%); }
.stagePreviewPortrait img{ width:96px; height:96px; object-fit:contain; }
.stageSelectedLabel{display:inline-block;margin-bottom: 4px;padding:4px 9px;border:1px solid #e3c1d3;border-radius:7px;background:#fff;color:var(--journey-accent);font-size:18px;font-weight:900;letter-spacing:.09em;}
.stageBriefTitle h3{ margin:0; color:#79536e; font-family:'Mochiy Pop One',sans-serif; font-size:22px; line-height:1.45; overflow-wrap:anywhere; }
.stageBriefTitle p{margin: 3px 0 0;color:#ab899f;font-size: 19px;font-weight:800;}
#stageSelectOv .stageClearBox{display:flex;flex-direction:column;align-items:flex-start;gap:9px;margin:0;padding:5px 0 5px 18px;border:0;border-left:2px dashed #dfc3d4;border-radius:0;background:transparent;color:#8c6176;font-size: 24px;line-height:1.55;}
#stageSelectOv .stageClearLabel{padding:3px 8px;border-radius:6px;background:#ecdeac;color:#9a7b35;font-size: 19px;line-height:1.4;letter-spacing:.08em;}
#stageSelectOv .stageRuleBox{min-height:0;margin-top:13px;padding: 14px 19px;border:2px solid #ece0e7;border-radius:17px;background:#fffefd;box-shadow:none;}
#stageSelectOv .stageRuleBox h3{margin: 0 0 2px;color:#a3889a;font-size: 22px;letter-spacing:.08em;}
#stageSelectOv .stageRuleList{padding-left:1.15em;color: #8d3c77;font-size: 24px;line-height:1.55;letter-spacing: 1px;}
#stageSelectOv .stageRuleList li{ padding:2px 0; }#stageSelectOv .stageRuleList li::marker{ color:#c796b1; }
#stageSelectOv .stageChallengeBtn{display:block;width:100%;min-width:0;margin-top:18px;padding: 14px 60px 14px;overflow:hidden;border:3px solid #fff;border-radius:18px;background: linear-gradient(120deg, #e173a0, #c2349c);color:#fff;box-shadow:0 0 0 1px #c48aa6,0 6px 0 #91526f,0 11px 19px #9a5c792b;font-size: 29px;letter-spacing: 3px;text-shadow: 3px 3px 0 #935472a0;}
#stageSelectOv .stageChallengeBtn::before{ content:''; position:absolute; inset:-30% auto -30% -50%; width:28%; background:linear-gradient(90deg,transparent,#ffffff52,transparent); transform:skewX(-22deg); pointer-events:none; animation:stageButtonShine 3.5s ease-in-out infinite; }
#stageSelectOv .stageChallengeBtn:hover:not(:disabled){ transform:translateY(-3px); background:linear-gradient(120deg,#df9bb6,#c26c94); }
#stageSelectOv .stageChallengeBtn:active:not(:disabled){ transform:translateY(3px); box-shadow:0 0 0 1px #c48aa6,0 2px 0 #91526f; }
#stageSelectOv .stageChallengeBtn:disabled{ background:#c9bbc4; box-shadow:0 4px 0 #aa98a4; opacity:.65; }#stageSelectOv .stageChallengeBtn:disabled::before{ animation:none; }
#stageSelectOv .stageGarden{ position:absolute; inset:0; z-index:0; display:block; overflow:hidden; pointer-events:none; }
#stageSelectOv .stageGarden span{ position:absolute; color:#d9aec580; font-size:23px; animation:stageSparkle 4s ease-in-out infinite; }
#stageSelectOv .stageGarden span:nth-child(1){ left:13px; top:164px; }#stageSelectOv .stageGarden span:nth-child(2){ right:9px; top:24px; font-size:33px; animation-delay:-1.2s; }
#stageSelectOv .stageGarden span:nth-child(3){ left:12px; bottom:89px; animation-delay:-2.4s; }#stageSelectOv .stageGarden span:nth-child(4){ right:9px; bottom:179px; color:#c4b1df99; animation-delay:-.8s; }
@keyframes stageMenuArrive{ from{ opacity:0; transform:translateY(24px) scale(.96); }to{ opacity:1; transform:none; } }
@keyframes stageCardArrive{ from{ opacity:0; transform:translateY(13px); }to{ opacity:1; transform:none; } }
@keyframes stageEnemyFloat{ 0%,100%{ transform:translateY(1px) rotate(-2deg); }50%{ transform:translateY(-4px) rotate(2deg); } }
/* left を動かすと表示中ずっとレイアウト計算が走るため transform で動かす（移動量は同じ。642.86% ＝ ボタン幅の180% ÷ 光の帯の幅28%）。 */
@keyframes stageButtonShine{ 0%,28%{ transform:translateX(0) skewX(-22deg); opacity:0; }51%{ opacity:1; }91%,100%{ transform:translateX(642.86%) skewX(-22deg); opacity:0; } }
@keyframes stageSparkle{ 0%,100%{ opacity:.35; transform:scale(.85) rotate(-8deg); }50%{ opacity:.9; transform:scale(1.1) rotate(8deg); } }
body.lightMode #stageSelectOv .stageSelectCard,body.lightMode #stageSelectOv .stageNode,body.lightMode #stageSelectOv .stageNodeEnemy,body.lightMode #stageSelectOv .stageGarden span,body.lightMode #stageSelectOv .stageChallengeBtn::before{ animation:none !important; }
@media(prefers-reduced-motion:reduce){
  #stageSelectOv .stageSelectCard,#stageSelectOv .stageNode,#stageSelectOv .stageNodeEnemy,#stageSelectOv .stageGarden span,#stageSelectOv .stageChallengeBtn::before{ animation:none !important; }
  #stageSelectOv .stageStepBtn,#stageSelectOv .stageNodeEnemy,#stageSelectOv .stageChallengeBtn{ transition:none; }
}

/* ---------- 発見リスト ---------- */
#foundPanel{ background:rgba(255,250,244,.96); border:4px solid #ffd6e4; border-radius:24px; box-shadow:0 6px 14px rgba(140,90,139,.16); }
#foundPanel h3{ color:var(--ck-lav2); border-bottom:3px dotted #ffb3c9; }
#foundList li{ border-bottom-color:#f6e6ea; }
#foundList .fl-word{ color:var(--ck-ink); }
#foundList li.by-s .fl-word{ color:var(--ck-pink2); }
#foundList li.by-l .fl-word{ color:var(--ck-sky2); }
#foundList .fl-name{ color:#b39fb8; }
#foundList li.clickable:hover{ background:rgba(255,143,177,.14); }
#foundList li.rank-row.by-s{ background:rgba(255,227,238,.7); }
#foundList li.rank-row.by-l{ background:rgba(227,240,255,.7); }
#foundList .rank-no{ color:var(--ck-lav2); }
#foundList li.by-s .rank-count{ color:var(--ck-pink2); }
#foundList li.by-l .rank-count{ color:var(--ck-sky2); }

/* ---------- 得点・タイマー・リボン ---------- */
.scCard{ border-radius:26px; box-shadow:0 6px 14px rgba(140,90,139,.18); }
#cardS{ border-color:#ffb3c9; }
#cardS .sc-label, #cardS .sc-num{ color:var(--ck-pink2); }
#cardL{ border-color:#a9d4ff; }
#cardL .sc-label, #cardL .sc-num{ color:var(--ck-sky2); }
.scCard .sc-num small{ color:var(--ck-sub); }
#timerDisp{ background:linear-gradient(180deg,#b862e0,#9042b8); box-shadow:0 4px 0 #713390, 0 5px 9px rgba(140,90,139,.3); }
#timerDisp.warn{ background:linear-gradient(180deg,#ff7b9f,#e2537e); }
#vsText{ background:linear-gradient(180deg,#ffb3c9,#ff6f9f); -webkit-background-clip:text; background-clip:text; text-shadow:2px 2px 5px #f7c7d6; }
#ribbon{ background:repeating-linear-gradient(135deg,#ffe38a 0 14px,#fff1bd 14px 28px); color:#8a5a12; border-color:#fff; box-shadow:0 3px 7px rgba(140,90,139,.2); }
.meanPop{background:#fffdf7;border:3px solid #79c4af;border-radius:20px;box-shadow: 0 6px 4px 2px rgba(0,0,0,.35);}
#toastBox{ background:rgba(86,63,92,.92); }
#cdNum, #cdStart{
  text-shadow:
    6px 0 0 #ff6f9f, -6px 0 0 #ff6f9f, 0 6px 0 #ff6f9f, 0 -6px 0 #ff6f9f,
    6px 6px 0 #ff6f9f, -6px 6px 0 #ff6f9f, 6px -6px 0 #ff6f9f, -6px -6px 0 #ff6f9f,
    0 14px 10px rgba(0,0,0,.25);
}
body.lightMode #cdNum, body.lightMode #cdStart{ -webkit-text-stroke-color:#ff6f9f; }

/* ---------- 操作パネル（配信には映らない右側） ---------- */
#ctrlPanel{ background:linear-gradient(180deg,#fef6ff 0%,#faf0fc 100%); border:2px solid var(--ck-panel-line); border-radius:26px; box-shadow:0 9px 24px rgba(140,90,139,.2); color:var(--ck-ink); }
#cpTabs{ background:transparent; }
#cpTabs button{ color:var(--ck-sub); border-radius:14px; }
#cpTabs button:hover{ background:#f8e7f8; }
#cpTabs button.act{ background:#fff; color:#b164ae; border-radius:14px; box-shadow:0 2px 7px rgba(166,98,180,.14); }
#cpTabs button::after{ background:#cb8ac4; }
#dictStatus{ border-radius:999px; border:1px solid #f1d9e0; background:#fff3d6; color:#8a5a12; }
#dictStatus.ok{background:#e3f8f2;color:#1a8a72;border-color:#bdeadf;padding: 4px 0;font-weight: 500;}
#dictStatus.err{ background:#ffe3ea; color:#c43a63; border-color:#ffc4d3; }
.cpSec{ background:#fff; border:2px solid var(--ck-section-line); border-radius:20px; box-shadow:0 3px 8px rgba(140,90,139,.08); }
.cpSec h4, .cpFoldHead{ color:#9964a4; border-left:0; padding-left:0; }
.cpSec h4::before, .cpFoldHead::before{ content:''; display:inline-block; width:5px; height:17px; margin-right:9px; border-radius:3px; background:#b68abd; vertical-align:-2px; flex:none; }
.cpFoldHead{ display:flex; align-items:center; }
.cpFoldHead::before{ order:0; }
.cpFoldHead::after{ margin-left:auto; color:var(--ck-lav); }
.cpFoldHead:hover::after{ color:#b164ae; }
.modeEyebrow{ color:#b771b1; }
.cpBtn{ border-radius:14px; border-width:2px; }
.cpBtn.b-blue{ border-color:var(--ck-sky2); color:var(--ck-sky2); background:#f3f9ff; }
.cpBtn.b-red{ border-color:var(--ck-pink2); color:var(--ck-pink2); background:#fff3f7; }
.cpBtn.b-green{ border-color:var(--ck-mint2); color:var(--ck-mint2); background:#effbf8; }
.cpBtn.b-gray{ border-color:#d8c6dc; color:var(--ck-sub); background:#fcf8fd; }
.cpBtn.b-orange{ border-color:var(--ck-lemon2); color:#b07d00; background:#fff8e3; }
.cpBtn.b-purple{ border-color:var(--ck-lav2); color:var(--ck-lav2); background:#fcf1ff; }
.cpBtn.on{ background:var(--ck-sky2); border-color:var(--ck-sky2); color:#fff; }
.cpBtn:hover:not(:disabled){ box-shadow:0 4px 10px rgba(140,90,139,.16); }
.cpBtn.primaryAction{ background:linear-gradient(135deg,#d8a5bd,#ad6b8e); border-color:transparent; color:#fff; box-shadow:0 4px 0 #8d5278, 0 6px 12px rgba(164,83,149,.22); border-radius:16px; }
.cpBtn.primaryAction:disabled{ background:#e8dfe4; box-shadow:none; color:#fff; }
.stageModeBtn{border-color: #ddbfd8;color:var(--ck-sub);border-radius:16px;}
.stageModeBtn.act{border-color: #ac177c;background: #b173ac;color: #ffffff;box-shadow: 0 0 8px rgb(163 63 186);}
.stageCurrentState{ background:#fbf1ff; color:var(--ck-lav2); border:1px solid #f3dcfb; }
.stageCurrentState.coop{ background:#e6f8f3; color:#1a8a72; border-color:#bdeadf; }
.commentRuleNote{ border-top-color:var(--ck-line); color:var(--ck-sub); }
.commentRuleNote b{ color:#b164ae; }
.stageRuleDetail{ border:2px solid #e8c38d; background:#fff9ec; color:var(--ck-ink); border-radius:14px; }
.stageRuleDetail strong{ color:#d97a06; }
.cpToggle{ border-color:#e3cfe6; color:var(--ck-sub); background:#fff; }
.cpToggle.on{ border-color:var(--ck-mint2); background:var(--ck-mint2); color:#fff; }
.cpChk, .cpRow{ color:var(--ck-ink); }
.cpChk input{ accent-color:#bd73b9; }
.cpRow input[type=range]{ accent-color:#bd73b9; }
.cpFontRow{ flex-wrap:wrap; }
.cpFontRow select{ min-width:0; flex:1; padding:8px 10px; border:2px solid #d7b5d8; border-radius:10px; background:#fff; color:var(--ck-ink); font:800 18px 'M PLUS Rounded 1c',sans-serif; }
.cpFontRow select:focus-visible{ outline:3px solid #e1b5e6; outline-offset:2px; }
.volVal, #designMsg{ color:var(--ck-lav2); }
.swBtn{ border-radius:10px; border-color:#ead9e7; }
.swBtn:hover{ outline-color:var(--ck-pink); }
.cpNote{ color:var(--ck-sub); }
#answerList{ background:#fdf8fd; border-color:#f3dcfb; border-radius:12px; }
#answerList span{ color:var(--ck-sky2); }
#ansCount{ color:var(--ck-sub); }
.cpHelpBtn{ border-color:var(--ck-pink); color:var(--ck-pink2); }
.olPanelPass{ background:#fbf1ff; color:var(--ck-lav2); }
.olPanelStatus{ color:var(--ck-sub); }

/* ---------- カラーピッカー ---------- */
#cpk{ border-color:var(--ck-panel-line); border-radius:18px; box-shadow:0 9px 24px rgba(140,90,139,.3); }
#cpkHead{ background:#fde9f2; color:var(--ck-pink2); border-radius:16px 16px 0 0; }
#cpkHex{ border-color:#ead9e7; color:var(--ck-ink); }
.olOvCard{ border-color:#e3b13a; }

/* 発見したコトバ／コメント投稿者ごとの発見数 */
#foundTitle.foundSwitcher{ display:flex; align-items:baseline; justify-content:center; text-align:center; flex-wrap:wrap; gap:4px 10px; }
.foundMode{ border:0; padding:2px 0; background:none; color:#ab87ad; font:800 18px 'M PLUS Rounded 1c',sans-serif; line-height:1.4; cursor:pointer; white-space:nowrap; }
.foundMode.act{ color:#a962ba; font-size:21px; }
.foundMode:not(.act):hover{ color:#8f5094; text-decoration:underline; text-underline-offset:4px; }
.foundMode:focus-visible{ outline:2px solid #bb8bbb; outline-offset:3px; border-radius:3px; }

/* 全タブ共通の設定保存 */
#settingsFooter{ flex:none; margin:0 12px 12px; padding:10px 12px 5px; }
#settingsFooter .designSaveBtns{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:7px; }
#settingsFooter .cpBtn{ min-height:38px; font-size:18px; white-space:nowrap; }
#settingsFooter #designMsg{ margin-top:5px; min-height:25px; padding:3px 0; font-size:18px; color:#835a7d; }
.onlineWaitingBanner{ margin:0 0 10px; padding:11px 14px; border:2px solid #c895b4; border-radius:13px; background:#f5deeb; color:#915277; text-align:center; font-size:22px; font-weight:900; }
.onlineWaitingBanner[hidden]{ display:none; }
/* 小さな補助文字も18px以上。共通HTMLのサイズ指定はここで揃える。 */
button,input,select,textarea{ font-size:inherit; }
small{ font-size:max(18px,.833333em); }
.cupBadge,#gameModeLabel,.modeEyebrow,.comingSoon,.onlineIntro p,
.dataDeleteChoice span,#foundList .fl-icon-e,#foundList .fl-name,.meanPop .mp-comment,
.cpHelpBtn,.cpFoldHead::after,.cpToggle,#ansCount,#designMsg,
.stageModeBtn small,.stageSelectPlayMode > span,.commentRuleNote,
.stageRuleDetail,.stageRuleDetail strong,.cpNote,.cpChk,.cpRow,
.dataManagement .cpBtn,#cpk,#cpkHex,#cpkBtns button{font-size: 20px;}
#cpTabs button,.cpBtn,#dictStatus{ font-size:18px; }
#stageSelectOv .stageSelectPlayMode .stageModeBtn small{font-size: 20px;line-height:1.35;}
.stageModeBtn{ min-height:82px; }
.stageModeBtn small{ line-height:1.35; }
.cpBtn{ white-space:normal; overflow-wrap:anywhere; line-height:1.35; }
.cpNote{ font-weight:700; line-height:1.55; }
.stageRuleDetail{ line-height:1.6; overflow-wrap:anywhere; }
#dictStatus{ line-height:1.4; border-radius:14px; overflow-wrap:anywhere; }
#foundList .fl-name{ flex-shrink:0; }
/* 見出しと重複する小さな飾り文を省き、ルールと操作に余白を残す。 */
.stageEyebrow,.modeEyebrow{ display:none; }

/* 発見リストの中央に重ねる。得点欄・スクロール・クリックの配置は変えない。 */
#foundPanel{ position:relative; min-height:250px; }
#foundList{ flex:1 1 auto; }
.comboDisplay{ position:absolute; top:50%; left:50%; z-index:6; display:flex; flex-direction:column; align-items:center; width:calc(100% - 24px); transform:translate(-50%,-50%) rotate(-7deg); pointer-events:none; user-select:none; text-align:center; }
.comboDisplay[hidden]{ display:none; }
.comboNumber{ display:block; padding:0 14px 4px 0; font-family:Arial,sans-serif; font-size:108px; font-weight:900; font-style:italic; line-height:.95; letter-spacing:-.07em; color:#ffd82c; -webkit-text-stroke:2px #a44312; paint-order:stroke fill; text-shadow:0 3px 0 #ff8b27,0 6px 0 #a72919,2px 9px 6px rgba(55,19,20,.65); }
.comboLabel{ display:block; margin-top:8px; font-family:'Mochiy Pop One',sans-serif; font-size:28px; line-height:1.3; color:#fff0a6; -webkit-text-stroke:4px #bd292d; paint-order:stroke fill; text-shadow:1px 4px 3px rgba(55,19,20,.65); white-space:nowrap; }
.comboMany .comboNumber{ font-size:72px; }
.comboPulse{ animation:comboPop .26s cubic-bezier(.18,.8,.32,1.25); }
@keyframes comboPop{ 0%{ transform:translate(-50%,-50%) rotate(-7deg) scale(.75); } 55%{ transform:translate(-50%,-50%) rotate(-7deg) scale(1.12); } 100%{ transform:translate(-50%,-50%) rotate(-7deg) scale(1); } }
body.lightMode .comboDisplay{ animation:none; }
@media(prefers-reduced-motion:reduce){ .comboDisplay{ animation:none; } }

/* デモの補足は操作パネルの内側に小さく表示する。 */
.demoModeRow{ position:relative; }
.demoModeLabelWrap{ display:inline-flex; align-items:center; gap:6px; min-width:0; }
.demoModeHelp{ display:inline-grid; place-items:center; width:20px; height:20px; padding:0; border:2px solid #9b7094; border-radius:50%; background:#fff9fd; color:#7b4d77; font:900 14px/1 'M PLUS Rounded 1c',sans-serif; cursor:pointer; }
.demoModeHelp:hover{ background:#f5dff0; }
.demoModeHelp:focus-visible,button.volVal:focus-visible{ outline:3px solid #e1b5e6; outline-offset:2px; }
.demoModeHelpPopup{ position:absolute; z-index:25; top:calc(100% + 7px); left:0; right:0; padding:8px 10px; border:2px solid #bb86ad; border-radius:10px; background:#fffdf9; color:#6c435f; box-shadow:0 7px 16px #70406130; font-weight:800; font-size:18px; line-height:1.35; text-align:left; }
.demoModeHelpPopup[hidden]{ display:none; }
button.volVal{ padding:0; border:0; background:transparent; appearance:none; font:inherit; line-height:inherit; cursor:pointer; }
button.volVal:hover{ color:#b34e83; text-decoration:underline; }
button.volVal.muted{ color:#a04464; }