@charset "utf-8";
/* 古明地姉妹の心めくり 0.5.0
   - 盤面の大きさは JavaScript で測らない。コンテナクエリだけで決める。
   - 高さは dvh ではなく svh（遊んでいる最中に変わらないため）。
   - calc の中に 0px のフォールバックを書かない（Cocoon の縮小化で 0 に潰れるため）。
   - @media / @container は、必ず基本の指定より後ろに書く。 */

:root{
  --kkm-bg:       #17111f;
  --kkm-bg2:      #241a30;
  --kkm-line:     #4a3a5c;
  --kkm-ink:      #f5f0f8;
  --kkm-ink-dim:  #c3b6d0;
  --kkm-face:     #fdfbf7;
  --kkm-face-ink: #221b2a;
  --kkm-eye:      #e0457b;   /* さとりの第三の目（飾り） */
  --kkm-eye-text: #ff9dbe;   /* 暗い地の上の文字（4.5:1を通す） */
  --kkm-eye-deep: #b81f55;   /* 明るい札の上の印 */
  --kkm-koishi:   #8fd9a8;   /* こいし */
  --kkm-warn:     #ffcf5a;
  --kkm-ok:       #7fe0b0;
}

*{ box-sizing: border-box; }

/* display:flex を持つ画面にも hidden を効かせる（これが無いと全画面が重なる） */
[hidden]{ display: none !important; }

html{ background: var(--kkm-bg); }

body{
  margin: 0;
  background: var(--kkm-bg);
  color: var(--kkm-ink);
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", system-ui, sans-serif;
  line-height: 1.7;
}

/* ===== 遊び場 ===== */

.kkm-stage{
  width: 100%;
  height: 100svh;
  container: kkmshell / size;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.kkm-frame{
  position: relative;
  width: min(100cqw, calc(100cqh * 16 / 9));
  height: 100cqh;
  container: kkmframe / size;
  background:
    radial-gradient(120% 80% at 50% 0%, #34254a 0%, rgba(52,37,74,0) 62%),
    linear-gradient(180deg, #1d1528 0%, #140f1c 100%);
  overflow: hidden;
  touch-action: manipulation;
  overscroll-behavior: contain;
}

/* 長押しで字が選ばれる・押すと青く光る・長押しメニューが出る、を止める */
.kkm-frame,
.kkm-frame *{
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.kkm-title,
.kkm-play,
.kkm-veil,
.kkm-credit{
  --u: 1cqmin;                       /* 短い辺の1% */
  font-size: max(11px, calc(3.2 * var(--u)));
}

/* ===== タイトル ===== */

.kkm-title{
  /* たての画面の物差しは、高さの .62% でも頭打ちにする（0.5.0）。
     正方形に近いたて（768x1024 など）で、題名の板が高くなりすぎて、下のさとりとこいしが 90px まで縮んだため。
     スマホのたて（390x844 など）は 1cqmin のまま（.62cqh のほうが大きい）。よこ長は下の @container で 1cqmin にもどす */
  --u: min(1cqmin, .62cqh);
  position: absolute;
  inset: 0;
  isolation: isolate;               /* 背景の絵と文字の重なりを、この画面の中だけで決める */
  display: flex;
  flex-direction: column;           /* 0.5.0: たては「上＝ステンドグラス・まん中＝題名・下＝さとりとこいし」 */
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  padding: calc(4 * var(--u));
  padding-bottom: calc(7 * var(--u));   /* 下の二次創作の表記に、2人の足がかからないように */
}

/* 0.5.0: 明るい地霊殿の上では、ぼかした暗がりが黒い雲に見えたので、HUD と同じ暗いガラスの板にした */
.kkm-title-in{
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 100%;
  max-width: calc(92 * var(--u));
  margin-top: max(calc(2 * var(--u)), calc(30cqh - 4 * var(--u)));   /* 上のステンドグラスの窓の下から */
  padding: calc(3 * var(--u)) calc(3 * var(--u)) calc(1.6 * var(--u));
  border-radius: calc(3 * var(--u));
  background: rgba(16,11,22,.8);
  border: 1px solid rgba(255,255,255,.16);
}

/* さとりと、うすいこいし（0.5.0）。題名とボタンには重ねない */
.kkm-title-cast{
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  pointer-events: none;
}
.kkm-title-fig{
  flex: 0 0 auto;
  height: 100%;
  max-height: 40cqh;
  background-position: center bottom;
  background-size: contain;
  background-repeat: no-repeat;
}
.kkm-title-fig.is-satori{ aspect-ratio: 435 / 900; }
/* こいしは見えない妹なので、うすく・少し奥に */
.kkm-title-fig.is-koishi{ aspect-ratio: 523 / 900; height: 92%; margin-left: -4cqw; opacity: .5; }

.kkm-title-sub{
  margin: 0 0 calc(2 * var(--u));
  color: var(--kkm-ink-dim);
  font-size: max(10px, calc(2.6 * var(--u)));
  letter-spacing: .08em;
}

.kkm-title-main{
  margin: 0;
  font-size: max(20px, calc(7.6 * var(--u)));
  font-weight: 700;
  letter-spacing: .04em;
  text-shadow: 0 0 calc(2 * var(--u)) rgba(224,69,123,.45);
}

/* 0.5.0: ガラスを .85 のぼかし → .8 の板にしたので、#e0457b（下が真っ白で 2.7）→ #ff7aa6（大きな太字の基準3を超える） */
.kkm-title-main b{ color: #ff7aa6; }

.kkm-title-lead{
  margin: calc(1.2 * var(--u)) 0 0;
  color: var(--kkm-ink-dim);
  font-size: max(11px, calc(3.4 * var(--u)));
}

.kkm-title-seed{
  margin: calc(2.4 * var(--u)) 0 0;
  color: var(--kkm-koishi);
  font-size: max(10px, calc(2.9 * var(--u)));
}

.kkm-title-btns{
  margin: calc(3.4 * var(--u)) 0 0;
  display: flex;
  justify-content: center;
  gap: calc(2 * var(--u));
  flex-wrap: wrap;
}

.kkm-title-opt{
  margin: calc(3.4 * var(--u)) 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(1.6 * var(--u));
  flex-wrap: wrap;
}

.kkm-title-optlabel{
  color: var(--kkm-ink-dim);
  font-size: max(10px, calc(2.8 * var(--u)));
}

.kkm-title-best{
  margin: calc(2.6 * var(--u)) 0 0;
  min-height: 1.4em;
  color: var(--kkm-warn);
  font-size: max(10px, calc(2.8 * var(--u)));
}

/* ===== ボタン ===== */

.kkm-btn{
  appearance: none;
  border: calc(.3 * var(--u)) solid var(--kkm-line);
  border-radius: 999px;
  padding: calc(1.6 * var(--u)) calc(4.4 * var(--u));
  min-height: 44px;
  background: #2e2340;
  color: var(--kkm-ink);
  font: inherit;
  font-size: max(12px, calc(3.4 * var(--u)));
  font-weight: 700;
  cursor: pointer;
}

.kkm-btn:hover{ background: #3a2c52; }
.kkm-btn:focus-visible{ outline: calc(.6 * var(--u)) solid var(--kkm-warn); outline-offset: calc(.4 * var(--u)); }

.kkm-btn-main{
  background: var(--kkm-eye);
  border-color: #ff7aa6;
  color: #2a0f1b;
}

.kkm-btn-main:hover{ background: #ee5f8c; }

.kkm-seg{ display: flex; border-radius: 999px; overflow: hidden; border: calc(.3 * var(--u)) solid var(--kkm-line); }

.kkm-segbtn{
  appearance: none;
  border: 0;
  padding: calc(1.2 * var(--u)) calc(2.6 * var(--u));
  min-height: 40px;
  background: #241a30;
  color: var(--kkm-ink-dim);
  font: inherit;
  font-size: max(10px, calc(2.8 * var(--u)));
  cursor: pointer;
}

.kkm-segbtn[aria-pressed="true"]{ background: var(--kkm-koishi); color: #10281c; font-weight: 700; }
.kkm-segbtn:focus-visible{ outline: calc(.5 * var(--u)) solid var(--kkm-warn); outline-offset: calc(-.8 * var(--u)); }

/* ===== プレイ画面（たて＝上下にHUD） ===== */

.kkm-play{
  position: absolute;
  inset: 0;
  isolation: isolate;               /* 同上。これが無いと z-index が かぶせ画面より上に出る */
  display: flex;
  flex-direction: column;
  padding: calc(2 * var(--u));
  gap: calc(1.4 * var(--u));

  /* 下限 48px: 「タイトルへ」のボタン（44px）が入る高さ（0.4.0）。
     320x568 だけ 39.8→48px になるが、そこの盤面は横幅で決まるので大きさは変わらない */
  --hud-h:  clamp(48px, 7cqh, 74px);
  /* たて長の端末で余る高さは、盤面ではなく足もと（さとりの立ち絵）へ渡す。
     盤面は正方形なので、これ以上は横幅で頭打ちになる。 */
  --foot-h: clamp(58px, 20cqh, 190px);
  --tip-h:  calc(4.6 * var(--u));
  --board:  min(
              calc(100cqw - 8 * var(--u)),
              calc(100cqh - var(--hud-h) - var(--foot-h) - var(--tip-h) - 9 * var(--u))
            );
}

.kkm-hud{
  position: relative;
  z-index: 1;
  height: var(--hud-h);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(1.4 * var(--u));
  padding: 0 calc(1.6 * var(--u));
  border-radius: calc(1.8 * var(--u));
  background: rgba(255,253,247,.07);
  border: 1px solid var(--kkm-line);
}

/* 遊んでいる最中の「タイトルへ」（0.4.0）。押す場所は 44px 以上 */
.kkm-hudbtn{
  appearance: none;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 calc(2.2 * var(--u));
  border: 1px solid var(--kkm-line);
  border-radius: 999px;
  background: #2e2340;
  color: var(--kkm-ink);
  font: inherit;
  font-size: max(11px, calc(2.8 * var(--u)));
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.kkm-hudbtn:hover{ background: #3a2c52; }
.kkm-hudbtn:focus-visible{ outline: calc(.6 * var(--u)) solid var(--kkm-warn); outline-offset: calc(.3 * var(--u)); }

.kkm-hud-cell{ display: flex; align-items: baseline; gap: calc(.9 * var(--u)); }
.kkm-hud-key{ color: var(--kkm-ink-dim); font-size: max(10px, calc(2.6 * var(--u))); }
.kkm-hud-val{ font-size: max(15px, calc(4.6 * var(--u))); font-weight: 700; font-variant-numeric: tabular-nums; }
.kkm-hud-small{ font-size: max(10px, calc(2.4 * var(--u))); color: var(--kkm-ink-dim); font-weight: 400; }
.kkm-hud-time.is-hurry .kkm-hud-val{ color: var(--kkm-warn); }

.kkm-boardwrap{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(1.2 * var(--u));
  position: relative;
  z-index: 1;
}

.kkm-board{
  position: relative;
  width: var(--board);
  height: var(--board);
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), 1fr);
  grid-template-rows: repeat(var(--rows, 3), 1fr);
  gap: calc(1.3 * var(--u));
  touch-action: none;             /* 長押し中にページが動かないようにする（盤面だけ） */
  --kehai-op: .5;
  --kehai-amp: calc(1.4 * var(--u));
}

.kkm-tip{
  margin: 0;
  height: var(--tip-h);
  max-width: 100%;
  display: flex;
  align-items: center;
  padding: 0 calc(2.4 * var(--u));
  border-radius: 999px;
  color: var(--kkm-ink-dim);
  font-size: max(10px, calc(2.7 * var(--u)));
  text-align: center;
  white-space: nowrap;              /* ★1行に入る長さで書く（game.js の tipFor の上） */
  overflow: hidden;
}
.kkm-tip:empty{ visibility: hidden; }
/* はじめての操作を教える案内（0.4.0）: 白い字、ふちをこいしの緑で光らせる */
.kkm-tip.is-teach{
  color: #fff;
  font-weight: 700;
  box-shadow: 0 0 0 calc(.35 * var(--u)) var(--kkm-koishi), 0 0 calc(2 * var(--u)) rgba(143,217,168,.6);
}

/* ===== 札 ===== */

.kkm-card{
  appearance: none;
  position: relative;
  padding: 0;
  border: 0;
  border-radius: calc(1.4 * var(--u));
  background: transparent;
  cursor: pointer;
  font: inherit;
  overflow: hidden;
}

.kkm-card:focus-visible{ outline: calc(.7 * var(--u)) solid var(--kkm-warn); outline-offset: calc(.3 * var(--u)); }

.kkm-cardface{
  position: absolute;
  inset: 0;
  border-radius: calc(1.4 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(.5 * var(--u));
  transition: opacity .18s ease;
}

.kkm-cardback{
  opacity: 1;
  background:
    radial-gradient(60% 60% at 50% 42%, #4b3566 0%, #2b1f3d 70%),
    #2b1f3d;
  border: calc(.35 * var(--u)) solid #54406f;
}

.kkm-cardfront{
  opacity: 0;
  background: var(--kkm-face);
  border: calc(.55 * var(--u)) solid var(--tone, #888);
  color: var(--kkm-face-ink);
}

.kkm-card.is-open .kkm-cardback{ opacity: 0; }
.kkm-card.is-open .kkm-cardfront{ opacity: 1; }

.kkm-card.is-peek .kkm-cardback{ opacity: .12; }
.kkm-card.is-peek .kkm-cardfront{ opacity: .92; }
.kkm-card.is-peek{ box-shadow: 0 0 0 calc(.5 * var(--u)) var(--kkm-eye), 0 0 calc(3 * var(--u)) rgba(224,69,123,.75); }

.kkm-card.is-done .kkm-cardback{ opacity: 0; }
.kkm-card.is-done .kkm-cardfront{ opacity: .42; }
.kkm-card.is-done{ cursor: default; }

.kkm-card.is-afraid .kkm-cardback{ background: #3a2030; border-color: #7a3a52; }
.kkm-card.is-afraid{ cursor: not-allowed; animation: kkm-shiver .34s linear infinite; }

.kkm-cardmark{
  width: 46%;
  height: 46%;
  display: block;
}

.kkm-cardword{
  font-size: max(10px, calc(2.6 * var(--u)));
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.1;
}

.kkm-cardeye{ width: 44%; height: 44%; opacity: .85; }

.kkm-carddone{
  position: absolute;
  right: calc(.8 * var(--u));
  top: calc(.5 * var(--u));
  font-size: max(10px, calc(2.6 * var(--u)));
  color: var(--kkm-eye-deep);
}

.kkm-cardread{
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: calc(1 * var(--u));
  height: calc(.8 * var(--u));
  min-height: 3px;
  border-radius: 999px;
  background: rgba(34,27,42,.22);
  overflow: hidden;
  opacity: 0;
  transition: opacity .15s ease;
}

.kkm-card.is-peek .kkm-cardread{ opacity: 1; }
.kkm-cardread i{ display: block; height: 100%; width: 0%; background: var(--kkm-eye); }

/* こいしの気配 */
.kkm-card.is-kehai{
  animation: kkm-kehai .42s ease-in-out infinite;
  box-shadow: 0 0 0 calc(.45 * var(--u)) rgba(143,217,168,var(--kehai-op)),
              0 0 calc(2.4 * var(--u)) rgba(143,217,168,calc(var(--kehai-op) * .7));
}

.kkm-kehai{
  position: absolute;
  width: calc(9 * var(--u));
  height: calc(9 * var(--u));
  margin: calc(-4.5 * var(--u)) 0 0 calc(-4.5 * var(--u));
  pointer-events: none;
  opacity: var(--kehai-op);
  color: var(--kkm-koishi);
  transition: transform .5s cubic-bezier(.4,0,.3,1);
  filter: drop-shadow(0 0 calc(1.2 * var(--u)) rgba(143,217,168,.85));
}

/* 0.5.0: ハートの影の代わりに、すけたこいし（いたずら中）が2枚のあいだを動く。濃さは合図の濃さ（--kehai-op）のまま。
   大きさは札の高さの1.25倍。札の高さ＝（盤面 − すき間×（行−1））÷ 行（盤面の大きさを JS で測らない） */
.kkm-kehai.is-photo,
.kkm-koipop{
  --kh: calc((var(--board) - (var(--rows, 3) - 1) * 1.3 * var(--u)) / var(--rows, 3) * 1.25);
  width: calc(var(--kh) * 523 / 900);
  height: var(--kh);
  margin: calc(var(--kh) * -.62) 0 0 calc(var(--kh) * 523 / 900 / -2);
}
.kkm-kehai.is-photo{ filter: drop-shadow(0 0 calc(1.4 * var(--u)) rgba(143,217,168,.9)); }
.kkm-kehai.is-photo > i,
.kkm-koipop > i{
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
}
/* 絵は右へ手をのばしている。左へ動くときは左右をひっくり返す */
.kkm-kehai.is-photo.is-left > i{ transform: scaleX(-1); }
/* はじめてのこいしは合図の濃さが1になるが、札がかくれないように少しすかす */
.kkm-board.is-teach .kkm-kehai.is-photo{ opacity: .85; }

/* 見つけた（その札の上でびっくり）／見のがした（近いほうの盤のはしへ走っていく。絵は左へ走る） */
.kkm-koipop{ position: absolute; pointer-events: none; }
.kkm-koipop.is-caught{
  animation: kkm-caught 1.2s ease-out forwards;
  filter: drop-shadow(0 0 calc(1.4 * var(--u)) rgba(143,217,168,.95));
}
.kkm-koipop.is-giggle{ --dir: -1; animation: kkm-giggle 1.2s ease-in forwards; }
.kkm-koipop.is-giggle.is-right{ --dir: 1; }
.kkm-koipop.is-giggle.is-right > i{ transform: scaleX(-1); }

@keyframes kkm-caught{
  0%   { opacity: 0; transform: scale(.6) translateY(12%); }
  18%  { opacity: 1; transform: scale(1.08) translateY(-4%); }
  32%  { opacity: 1; transform: scale(1) translateY(0); }
  72%  { opacity: 1; transform: scale(1) translateY(0); }
  100% { opacity: 0; transform: scale(1) translateY(-14%); }
}
@keyframes kkm-giggle{
  0%   { opacity: 0; transform: translateX(0); }
  14%  { opacity: .85; }
  100% { opacity: 0; transform: translateX(calc(var(--dir) * var(--kh) * 1.6)); }
}

.kkm-flash{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none;
  padding: calc(1.4 * var(--u)) calc(3 * var(--u));
  border-radius: 999px;
  background: rgba(20,14,28,.9);
  border: calc(.3 * var(--u)) solid var(--kkm-koishi);
  color: var(--kkm-koishi);
  font-weight: 700;
  font-size: max(12px, calc(3.6 * var(--u)));
  white-space: nowrap;
  animation: kkm-flash 1.1s ease-out forwards;
}
/* 見のがして入れかわったとき（0.4.0）。見つけたときの緑と取りちがえないよう、白い字と灰色のふち */
.kkm-flash.is-miss{ color: var(--kkm-ink); border-color: var(--kkm-ink-dim); }

/* はじめてのこいし（0.4.0）: ゆれる2枚をはっきり光らせ、ハートの影を明滅させる */
.kkm-board.is-teach .kkm-card.is-kehai{
  box-shadow: 0 0 0 calc(.7 * var(--u)) var(--kkm-koishi), 0 0 calc(3.4 * var(--u)) rgba(143,217,168,.95);
}
.kkm-board.is-teach .kkm-kehai{ animation: kkm-teach 1s ease-in-out infinite; }
@keyframes kkm-teach{
  0%,100%{ filter: drop-shadow(0 0 calc(1.2 * var(--u)) rgba(143,217,168,.85)); }
  50%    { filter: drop-shadow(0 0 calc(3.2 * var(--u)) rgba(143,217,168,1)); }
}

@keyframes kkm-flash{
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.8); }
  18%  { opacity: 1; transform: translate(-50%,-50%) scale(1.06); }
  70%  { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-60%) scale(1); }
}

@keyframes kkm-kehai{
  0%,100%{ transform: translate(0,0) rotate(0deg); }
  25%    { transform: translate(var(--kehai-amp),0) rotate(.8deg); }
  75%    { transform: translate(calc(-1 * var(--kehai-amp)),0) rotate(-.8deg); }
}

@keyframes kkm-shiver{
  0%,100%{ transform: translate(0,0); }
  25%    { transform: translate(-2%,0); }
  75%    { transform: translate(2%,0); }
}

/* ===== 足もと（第三の目・立ち絵） ===== */

.kkm-foot{
  position: relative;
  z-index: 1;
  height: var(--foot-h);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: calc(2 * var(--u));
  padding: calc(1.2 * var(--u)) calc(1.8 * var(--u));
  padding-bottom: max(calc(1.2 * var(--u)), env(safe-area-inset-bottom));
  border-radius: calc(1.8 * var(--u));
  background: rgba(255,253,247,.07);
  border: 1px solid var(--kkm-line);
}

.kkm-eye{ flex: 1 1 auto; min-width: 0; }

.kkm-eye-label{
  display: flex;
  align-items: baseline;
  gap: calc(1.4 * var(--u));
  margin-bottom: calc(.8 * var(--u));
}

.kkm-eye-name{ color: var(--kkm-eye-text); font-weight: 700; font-size: max(10px, calc(2.9 * var(--u))); white-space: nowrap; }
/* ゲージの下に「何をするものか」を出す（0.4.0。0.3.0 まではたてで隠していて、意味が伝わらなかった） */
.kkm-eye-hint{ display: block; margin-top: calc(.8 * var(--u)); color: var(--kkm-ink-dim); font-size: max(10px, calc(2.4 * var(--u))); white-space: nowrap; }

.kkm-eye-bar{
  height: calc(2.4 * var(--u));
  min-height: 8px;
  border-radius: 999px;
  background: rgba(20,14,28,.75);
  border: 1px solid var(--kkm-line);
  overflow: hidden;
}

.kkm-eye-bar i{
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #ff7aa6, var(--kkm-eye));
  transition: width .1s linear;
}

.kkm-eye.is-empty .kkm-eye-bar i{ background: #6c5a7c; }

.kkm-foot-side{ flex: 0 0 auto; display: flex; align-items: center; gap: calc(1.6 * var(--u)); }

.kkm-koicount{ text-align: right; }
.kkm-koicount-key{ display: block; color: var(--kkm-ink-dim); font-size: max(10px, calc(2.3 * var(--u))); }
.kkm-koicount-val{ display: block; color: var(--kkm-koishi); font-weight: 700; font-size: max(13px, calc(4 * var(--u))); font-variant-numeric: tabular-nums; }

/* 高さを起点にして幅は auto。親の 100% にすると入れ子の高さが決まらず暴れるので、
   足もとの高さ（--foot-h）から直に引く。 */
.kkm-satori{ height: calc(var(--foot-h) - 4 * var(--u)); width: auto; aspect-ratio: 1; max-width: calc(34 * var(--u)); flex: 0 0 auto; }
.kkm-satori svg{ width: 100%; height: 100%; display: block; }

/* ===== かぶせ画面 ===== */

.kkm-veil{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(3 * var(--u));
  background: rgba(12,8,18,.88);
}

/* 0.4.0: 題名とボタンはいつも見えるところに置き、中身（.kkm-panel-body）だけをスクロールさせる。
   遊び方を絵つきにしたら、よこ長（844x390・1280x720）で「はじめる」が下に隠れて押せなかった */
.kkm-panel{
  width: 100%;
  max-width: calc(88 * var(--u));
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: calc(3.4 * var(--u));
  border-radius: calc(2.4 * var(--u));
  background: linear-gradient(180deg, #2b2039, #1d1528);
  border: calc(.3 * var(--u)) solid var(--kkm-line);
  text-align: center;
}

.kkm-panel-title{
  flex: 0 0 auto;
  margin: 0 0 calc(1.8 * var(--u));
  font-size: max(15px, calc(5 * var(--u)));
  color: var(--kkm-warn);
}

.kkm-panel-body{
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  font-size: max(11px, calc(3 * var(--u)));
  color: var(--kkm-ink);
  text-align: left;
}
.kkm-panel-body p{ margin: 0 0 calc(1.4 * var(--u)); }
.kkm-panel-body ol,
.kkm-panel-body ul{ margin: 0 0 calc(1.4 * var(--u)); padding-left: 1.4em; }
.kkm-panel-body li{ margin-bottom: calc(.8 * var(--u)); }
.kkm-panel-body b{ color: var(--kkm-warn); }

.kkm-panel-btns{
  flex: 0 0 auto;
  margin-top: calc(2.6 * var(--u));
  display: flex;
  justify-content: center;
  gap: calc(1.6 * var(--u));
  flex-wrap: wrap;
}

/* 遊び方（0.4.0）: 1行ごとに絵と「何をするか」 */
.kkm-panel-body .kkm-howto{ list-style: none; margin: 0 0 calc(1.8 * var(--u)); padding: 0; }
.kkm-panel-body .kkm-howto li{ display: flex; align-items: center; gap: calc(2.2 * var(--u)); margin: 0 0 calc(1.8 * var(--u)); }
.kkm-howto-art{
  flex: 0 0 auto;
  width: calc(15 * var(--u));
  height: calc(15 * var(--u));
  border-radius: calc(1.6 * var(--u));
  background: #241a30 no-repeat center / contain;
}
.kkm-howto-art.is-card{ background-size: cover; border: calc(.3 * var(--u)) solid #54406f; }
.kkm-howto-art.is-satori{ background-position: center bottom; }
/* こいしは「見えない妹」なので、遊んでいる最中と同じ「すけた姿」で出す（0.5.0。0.4.0 は白い影）。
   ★filter は箱の地色にもかかる（地色があると灰色の四角になった）ので、地色は付けない */
.kkm-howto-art.is-koishi{ background-color: transparent; background-position: center bottom; filter: drop-shadow(0 0 calc(1 * var(--u)) rgba(143,217,168,.9)); opacity: .62; }
.kkm-howto-text b{ display: block; margin-bottom: calc(.4 * var(--u)); font-size: max(12px, calc(3.4 * var(--u))); }

.kkm-scoretable{ width: 100%; border-collapse: collapse; margin: 0 0 calc(1.6 * var(--u)); }
.kkm-scoretable th,
.kkm-scoretable td{ padding: calc(.7 * var(--u)) 0; border-bottom: 1px solid var(--kkm-line); font-size: max(10px, calc(2.9 * var(--u))); }
.kkm-scoretable th{ text-align: left; color: var(--kkm-ink-dim); font-weight: 400; }
.kkm-scoretable td{ text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* お祝い（0.5.0 で2まいに）。絵が無いときだけ、仮のシルエットを2つならべる（.kkm-ending-pair） */
.kkm-ending{ margin-bottom: calc(1 * var(--u)); }
.kkm-ending-pair{ display: flex; align-items: flex-end; justify-content: center; gap: calc(2 * var(--u)); margin-bottom: calc(2 * var(--u)); }
.kkm-ending-art{ width: calc(22 * var(--u)); height: calc(26 * var(--u)); }
.kkm-ending-art svg{ width: 100%; height: 100%; display: block; }
.kkm-ending-word{ margin: 0 0 calc(2 * var(--u)); color: var(--kkm-koishi); font-size: max(12px, calc(3.4 * var(--u))); text-align: center; }

/* かぶせ画面の絵（0.5.0）: 面クリア＝うれしいさとり／時間ぎれ＝つかれたさとり／お祝い＝姿を見せたこいし・姉妹の絵 */
.kkm-panel-fig{ flex: 0 0 auto; background-repeat: no-repeat; background-position: center bottom; background-size: contain; }
.kkm-result{ display: flex; align-items: center; gap: calc(3 * var(--u)); }
.kkm-result-table{ flex: 1 1 auto; min-width: 0; }
.kkm-panel-fig.is-satori{ height: calc(34 * var(--u)); aspect-ratio: 435 / 900; }
.kkm-panel-fig.is-reveal{
  height: min(44cqh, calc(66 * var(--u)));
  aspect-ratio: 523 / 900;
  margin: 0 auto calc(2 * var(--u));
  filter: drop-shadow(0 0 calc(3 * var(--u)) rgba(143,217,168,.6));
  animation: kkm-reveal 1.8s ease-out both;
}
.kkm-panel.is-reveal .kkm-ending-word{ font-size: max(13px, calc(3.8 * var(--u))); }
@keyframes kkm-reveal{
  0%   { opacity: 0; transform: translateY(2%) scale(.97); }
  100% { opacity: 1; transform: none; }
}
.kkm-panel.is-ending{ max-width: calc(94 * var(--u)); }
.kkm-panel-fig.is-sisters{
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: calc(2 * var(--u));
  border-radius: calc(2 * var(--u));
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 1px rgba(255,255,255,.18);
}

/* 二次創作の表記。背景を明るくしたので（0.4.0）、うすい字をやめて暗い板にのせる */
.kkm-credit{
  position: absolute;
  left: 50%;
  bottom: calc(.3 * var(--u));
  transform: translateX(-50%);
  width: max-content;
  max-width: 100%;
  margin: 0;
  padding: 0 calc(1.6 * var(--u));
  border-radius: 999px;
  background: rgba(16,11,22,.8);
  text-align: center;
  color: var(--kkm-ink-dim);
  font-size: max(10px, calc(2 * var(--u)));
  pointer-events: none;
}

/* ===== ゲームの外の説明（遊び場の高さには入れない） ===== */

.kkm-doc{
  max-width: 44rem;
  margin: 0 auto;
  padding: 2rem 1rem 4rem;
  color: #e9e3ef;
  font-size: 1rem;
}

.kkm-doc h2{
  margin: 2rem 0 .6rem;
  font-size: 1.25rem;
  color: #ffd489;
  border-bottom: 1px solid var(--kkm-line);
  padding-bottom: .3rem;
}

.kkm-doc p, .kkm-doc li, .kkm-doc dd{ color: #e9e3ef; }
.kkm-doc b{ color: #ffb4cd; }
.kkm-doc dt{ margin-top: .8rem; font-weight: 700; color: #ffd489; }
.kkm-doc dd{ margin: 0 0 .4rem; }
.kkm-doc-note{ margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--kkm-line); color: #bdb2c8; font-size: .9rem; }

/* ===== よこ長（PC・横持ち）は 16:9 へ組みかえる ===== */

@container kkmframe (min-aspect-ratio: 1/1){
  .kkm-play{
    flex-direction: row;
    align-items: stretch;
    padding: calc(2.4 * var(--u));
    gap: calc(2 * var(--u));

    --side-w: clamp(132px, 22cqw, 300px);
    --board:  min(
                calc(100cqw - 2 * var(--side-w) - 9 * var(--u)),
                calc(100cqh - 6 * var(--u) - var(--tip-h))
              );
  }

  .kkm-hud{
    width: var(--side-w);
    height: auto;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: calc(2.4 * var(--u));
    padding: calc(2.4 * var(--u));
  }

  .kkm-hud-cell{ flex-direction: column; align-items: flex-start; gap: 0; }
  .kkm-hud-val{ font-size: max(18px, calc(7 * var(--u))); }

  .kkm-foot{
    width: var(--side-w);
    height: auto;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: calc(2.4 * var(--u));
    padding: calc(2.4 * var(--u));
    padding-bottom: calc(2.4 * var(--u));
  }

  .kkm-eye{ flex: 0 0 auto; }
  .kkm-eye-label{ flex-direction: column; gap: 0; }
  .kkm-eye-hint{ display: block; }
  .kkm-foot-side{ flex-direction: column; align-items: center; gap: calc(2 * var(--u)); }
  .kkm-koicount{ text-align: center; }
  /* 0.5.0: 立ち絵がたて長（435x900）になったので、幅ではなく高さで決める */
  .kkm-satori{ width: auto; height: min(calc(50 * var(--u)), 40cqh); max-width: none; }
  .kkm-ending-pair{ gap: calc(4 * var(--u)); }

  /* タイトル（0.5.0）: 題名は まん中、さとりは左・うすいこいしは右。2人の高さは、題名の板に重ならない大きさまで
     （左右の余白＝（100cqw − 板の幅 88u）÷ 2 から、はしの 3cqw を引いて、こいしの幅の比 .6 で割る）。
     ★板を 80u にしたら、題名（7.6u×10字）が板に入らず「心めく／り」と折れた（1280x720） */
  /* 板は下寄せ。まん中に置くと、上の「目の形のステンドグラス」の下半分がかくれた */
  .kkm-title{ --u: 1cqmin; flex-direction: row; justify-content: center; align-items: flex-end; padding-bottom: calc(6 * var(--u)); }
  .kkm-title-in{ max-width: calc(88 * var(--u)); margin-top: 0; }
  .kkm-title-cast{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: min(76cqh, calc((50cqw - 44 * var(--u) - 3cqw) / .6));
    padding: 0 3cqw;
    justify-content: space-between;
  }
  .kkm-title-fig{ max-height: none; }
  .kkm-title-fig.is-koishi{ height: 100%; margin-left: 0; }

  /* お祝いの2まい目: よこ長は、姉妹の絵を左・ふり返りを右 */
  .kkm-panel.is-ending{ max-width: calc(170 * var(--u)); }
  .kkm-ending{ display: grid; grid-template-columns: 1.5fr 1fr; gap: calc(3 * var(--u)); align-items: center; }
  .kkm-ending .kkm-panel-fig.is-sisters{ margin-bottom: 0; }

  /* 遊び方（0.4.0）: よこ長は高さが足りないので、3つを横にならべる（絵が上、字が下） */
  .kkm-panel.is-howto{ max-width: calc(150 * var(--u)); }   /* :has() はアプリの古い WebView で効かないことがあるので、クラスで */
  .kkm-panel-body .kkm-howto{ display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(2.4 * var(--u)); }
  .kkm-panel-body .kkm-howto li{ flex-direction: column; align-items: center; margin: 0; text-align: center; }
  .kkm-howto-text{ font-size: max(11px, calc(2.8 * var(--u))); }
}

@media (prefers-reduced-motion: reduce){
  .kkm-card.is-kehai,
  .kkm-card.is-afraid{ animation-duration: 1.2s; }
  .kkm-kehai{ transition-duration: .01s; }
}

/* ===== 絵の枠（img/ に絵が入ったら差しかわる） ===== */

.kkm-art{
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
}
.kkm-art.is-photo > svg{ display: none; }

.kkm-art-titlebg,
.kkm-art-boardbg{
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  pointer-events: none;
}
/* ~~絵が入ったら、上に置く文字が読めるように少しだけ暗くする（幕 rgba(20,15,28,.46)）~~
   → 0.4.0 で幕をやめた。naoko さんの試遊で「背景画暗すぎる」。字は、字の下に敷いた暗いガラスで読ませる
   （HUD・足もと・一行案内・タイトル・二次創作の表記。どれも「ガラスの下が真っ白でも」4.5:1／大きな太字は3:1）。 */

/* 立ち絵は 435:900（0.5.0。第2版のさとり6枚を同じ枠で切った。0.4.0 までは使い回しの 1000x1200 で 5:6） */
.kkm-satori{ aspect-ratio: 435 / 900; }
.kkm-ending-art{ background-repeat: no-repeat; background-position: center bottom; background-size: contain; }

/* 札の表に絵が入ったときは、絵の上に言葉を置く */
.kkm-cardfront.is-photo{ background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; }

/* ===== 0.3.0: 札と背景の絵を入れたときの直し ===== */

/* 札の裏は札いっぱいに。.kkm-art の contain と下そろえは立ち絵のためのもの */
.kkm-cardback.is-photo{ background-size: cover; background-position: center; }

/* 怯えた札: 上の is-afraid の background 一括指定が、絵の大きさ・位置・くり返しまで初期値に戻す
   （絵は style 属性で入るので消えないが、原寸のまま左上から敷かれて、急に拡大したように見える）。 */
.kkm-card.is-afraid .kkm-cardback.is-photo{ background-size: cover; background-position: center; background-repeat: no-repeat; }
/* 暗い赤の地色は絵の下に隠れて見えない。残る合図がふちの色とゆれだけになるので、絵に赤みの幕をかぶせる */
.kkm-card.is-afraid .kkm-cardback.is-photo::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(150,24,64,.45);
}

/* 札の表: 絵に気持ちの形が描いてあるので、SVGの印は出さない。
   言葉は下4分の1の暗い帯へ。帯の濃さは「帯の下が真っ白でも」白字が 4.5:1 を超える値
   （.62 で 5.498。白字の背景の相対輝度 0.141＝上限 0.183 以下）。 */
.kkm-cardfront.is-photo .kkm-cardmark{ display: none; }
.kkm-cardfront.is-photo .kkm-cardword{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16,11,22,.62);
  color: #fff;
}
/* 読んでいる長さの棒は、帯のすぐ上に置く（字に重ねない）。暗い絵の上でも溝が見える色に。
   帯のふちにまたがらせると、札に比べて字が大きい画面（768x1024・1024x768）で字の頭に 5px かかった。
   帯の上のふちは 札の下から「25%＋.275u」（札の表のふち .55u のぶん）なので、それより上に出す。 */
.kkm-cardfront.is-photo ~ .kkm-cardread{ bottom: calc(25% + .6 * var(--u)); background: rgba(255,255,255,.3); }
/* そろった印: 暗い絵の上では濃いピンクが沈むので、暗い丸にのせる（下が真っ白でも 3:1 以上） */
.kkm-cardfront.is-photo ~ .kkm-carddone{
  top: calc(.6 * var(--u));
  right: calc(.6 * var(--u));
  padding: 0 .3em;
  border-radius: 999px;
  line-height: 1.5;
  background: rgba(16,11,22,.8);
  color: var(--kkm-eye-text);
}

/* 背景の絵が入ったら、HUD と足もとの板を暗いガラスにする。
   よこ長の画面では、絵の左右のはしのろうそく（ほぼ白い画素）が板の真下に来る。
   幕だけで字を読ませるには幕を .77 まで濃くする必要があり、絵が見えなくなる。
   板 .6 と幕 .46 で、板の下が真っ白でも いちばん暗い字（第三の目 #ff9dbe）が 5.178:1。 */
.kkm-art-boardbg.is-photo ~ .kkm-hud,
.kkm-art-boardbg.is-photo ~ .kkm-foot{ background: rgba(16,11,22,.8); }
/* 0.4.0: 幕をやめたので .6 → .8（幕 .46 が無いと、下が真っ白のとき「さとりの目」#ff9dbe が 4.5 を割る）。
   一行案内にも同じガラスを敷く（0.3.0 までは幕だけで読ませていた） */
.kkm-art-boardbg.is-photo ~ .kkm-boardwrap .kkm-tip{ background: rgba(16,11,22,.8); }

/* ~~タイトルの字の下にも暗いガラスを敷く（.kkm-title-in::before・.85・ぼかし 3u・字の箱より 8u 外まで）~~
   → 0.5.0 でやめた。第2版の背景は明るい玄関ホールで、ぼかした暗がりが黒い雲に見えたため。
   代わりに .kkm-title-in そのものを HUD と同じ暗いガラスの板（.8）にした（上の「タイトル」）。
   下が真っ白でも うすい字 #c3b6d0 が 5.6:1、題名の「心めくり」#ff7aa6（大きな太字・基準3）が 4.4:1。 */

/* ===== WordPress の埋めこみ（iframe の index.html?embed=1。0.5.0） =====
   遊び場を iframe いっぱいにして、下の説明文は出さない（同じ文を親ページのショートコードが出す）。
   iframe の中で縦スクロールが出ると、下のボタンがかくれて押せなくなるので、はみ出しは切る。 */
.is-embed,
.is-embed body{ height: 100%; overflow: hidden; }
.is-embed .kkm-stage{ height: 100%; }
.is-embed .kkm-doc{ display: none; }