@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap');

/*
  カラーシステム
  --theme   : #5C5FE8  紫 — ブランド、プライマリボタン、アクティブ枠
  --surface : #FFFFFF  白 — カード・入力背景
  --bg      : #D6EEFA  水色 — ページ背景
  --surface2: #EAF5FF  薄水色 — 問題表示背景、入力欄
  --red     : #E03030  赤 — 花丸・正解強調のみ
  --text    : #1B2640  濃紺 — 本文
  --text2   : #566480  グレー — 補助テキスト
  --border  : #BDD4EA  — 区切り・デフォルト枠
*/
:root {
  --font:    'Kosugi Maru', sans-serif;
  --theme:   #5C5FE8;
  --theme-lt:#EEEEFF;
  --theme-dk:#4044C0;
  --bg:      #D6EEFA;
  --surface: #FFFFFF;
  --surface2:#EAF5FF;
  --red:     #E03030;
  --red-lt:  #FFECEC;
  --text:    #1B2640;
  --text2:   #566480;
  --border:  #BDD4EA;
  --r:       16px;
  --r-sm:    10px;
  --r-pill:  999px;
  --sh:      0 2px 10px rgba(27,38,64,.07);
  --sh-theme:0 3px 10px rgba(92,95,232,.28);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── フォーカスアウトライン除去（ブラウザデフォルトを消す） ── */
button:focus, button:focus-visible { outline: none; }
/* ── dan-btn 押し込みシャドウ変数 ── */
:root { --sh-press: 0 1px 0 rgba(0,0,0,.18); }

html, body {
  font-family: var(--font);
  background: var(--bg);
  min-height: 100dvh;
  overflow-x: hidden;
  color: var(--text);
}

#app {
  position: relative; z-index: 1;
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center;
  padding: 16px 16px 52px;
}

/* ── screens ── */
.screen {
  display: none; width: 100%; max-width: 430px;
  flex-direction: column; align-items: stretch; gap: 12px;
}
.screen.active { display: flex; animation: fadeUp .28s cubic-bezier(.22,1,.36,1); }
@keyframes fadeUp {
  from { opacity:0; transform:translateY(16px) scale(.98); }
  to   { opacity:1; transform:none; }
}

/* ── card ── */
.card {
  background: var(--surface);
  border-radius: var(--r);
  padding: 20px 18px;
  box-shadow: var(--sh);
}

/* ── labels ── */
.sec-lbl { font-size: 11px; color: var(--text2); letter-spacing: .07em; margin-bottom: 12px; }

/* ══════════════════
   KUKURUN CHARACTER
══════════════════ */
.kukurun-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  margin-top: 8px;
  margin-bottom: 4px;
  gap: 8px;
  padding: 0 16px;
}

.kukurun-wrap.full-width {
  justify-content: center;
}

.kukurun-balloon {
  margin-bottom: 0;
  animation: balloonFadeIn 0.3s ease-out;
  position: relative;
  display: inline-flex;   /* 吹き出しをnowrapテキストの自然幅で包む */
  flex-direction: column;
  align-items: center;
}

@keyframes balloonFadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

.balloon-text {
  background: white;
  border-radius: 16px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: bold;
  color: #333;
  white-space: nowrap;          /* 折り返し禁止 */
  display: inline-block;        /* 内容の幅で広がる */
  text-align: center;
  box-shadow: var(--sh);
  line-height: 1.4;
}

.balloon-tail {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 10px solid white;
  border-bottom: 0;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.06));
  left: 50%;
  top: calc(100% - 1px);
  transform: translateX(-50%);
}

.kukurun-character {
  animation: kukurunIdle 3.5s ease-in-out infinite;
  transform-origin: bottom center;
  transition: filter 0.2s;
  flex-shrink: 0;
}

.kukurun-character:hover {
  filter: brightness(1.05);
}

@keyframes kukurunIdle {
  0%, 100% { transform: scale(1, 1); }
  50%       { transform: scale(1.05, 0.95) translateY(2px); }
}

.kukurun-character.jumping {
  animation: kukurunJump 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.kukurun-character.squashing {
  animation: kukurunSquash 0.6s ease-in-out !important;
}

.kukurun-character.wiggling {
  animation: kukurunWiggle 0.6s ease-in-out !important;
}

.kukurun-character.bouncing {
  animation: kukurunBounce 0.6s ease-in-out !important;
}

@keyframes kukurunSquash {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(1.15, 0.85); }
}

@keyframes kukurunWiggle {
  0%, 100% { transform: skewX(0deg); }
  25% { transform: skewX(-3deg); }
  75% { transform: skewX(3deg); }
}

@keyframes kukurunBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes kukurunBlink {
  0%, 94%, 100% { transform: scaleY(1); }
  97%            { transform: scaleY(0.1); }
}

/* ══════════════════
   LOGO (removed)
══════════════════ */
.logo-wrap  { display: none !important; }
.logo-text  { display: none !important; }

/* ══════════════════
   INTRO MODAL
══════════════════ */
#intro-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
  cursor: pointer;
}

@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

.intro-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  background: white;
  border-radius: 24px;
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
  animation: balloonFadeIn 0.4s ease-out;
  max-width: 380px;
}

.intro-balloon {
  background: white;
  border-radius: 24px;
  padding: 20px 24px;
  box-shadow: none;
  animation: none;
  position: relative;
}

.intro-balloon::after {
  content: '';
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid white;
  border-right: 0 solid transparent;
}

.intro-balloon-text {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  line-height: 1.6;
  text-align: center;
}

/* ══════════════════
   GREETING BAR
══════════════════ */
.greeting-bar {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border-radius: var(--r-pill);
  padding: 9px 18px; box-shadow: var(--sh);
  font-size: 15px; align-self: center;
}

/* ══════════════════
   SELECTABLE ROW
══════════════════ */
.sel-row {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--r);
  padding: 15px 16px;
  cursor: pointer; box-shadow: var(--sh);
  transition: border-color .14s, transform .1s cubic-bezier(.34,1.56,.64,1);
  user-select: none;
}
.sel-row:hover  { border-color: var(--theme); }
.sel-row:active { transform: scale(.96); }
.sel-row.locked { opacity: .35; cursor: not-allowed; pointer-events: none; }

.sel-icon {
  width: 44px; height: 44px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; background: var(--theme-lt);
}
.sel-main { font-size: 17px; color: var(--text); }
.sel-sub  { font-size: 12px; color: var(--text2); margin-top: 2px; }

/* ══════════════════
   DAN GRID
══════════════════ */
.dan-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }

.dan-btn {
  border: 2px solid transparent;
  border-radius: var(--r);
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 16px 4px;
  font-family: var(--font);
  box-shadow: 0 5px 0 rgba(0,0,0,.22), var(--sh);
  transition: transform .1s cubic-bezier(.34,1.56,.64,1), box-shadow .08s, border-color .1s;
  position: relative;
}
.dan-btn:active {
  transform: translateY(4px) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.18) !important;
}
.dan-btn:hover  { transform: translateY(-2px) scale(1.03); border-color: rgba(255,255,255,.5); }
.dan-btn .dn { font-size: 26px; line-height: 1; color: #fff; }
.dan-btn .dl { font-size: 10px; color: rgba(255,255,255,.82); }

.dan-medals {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 30px; height: 60px;
  position: absolute; top: 6px; right: 4px;
  font-size: 18px; line-height: 1;
}

.d1 { background: #8B8EF8; }
.d2 { background: #7B7EEF; }
.d3 { background: #6B6EE6; }
.d4 { background: #5C5FE8; }
.d5 { background: #4E51D8; }
.d6 { background: #4043C8; }
.d7 { background: #3336B8; }
.d8 { background: #2629A8; }
.d9 { background: #191C98; }
.d-rnd {
  background: var(--text); color: #fff;
  grid-column: span 3; flex-direction: row;
  gap: 10px; padding: 13px 18px;
}

/* ══════════════════
   BUTTONS
══════════════════ */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px 20px;
  border: 2px solid transparent; border-radius: var(--r-pill);
  font-family: var(--font); font-size: 16px;
  cursor: pointer; position: relative; overflow: hidden;
  transition: transform .08s, box-shadow .08s, background .1s, border-color .1s;
  user-select: none;
}
.btn:active { transform: translateY(3px) !important; box-shadow: none !important; }

.btn-primary {
  background: var(--theme); color: #fff;
  border-color: var(--theme);
  box-shadow: 0 4px 0 var(--theme-dk), 0 2px 10px rgba(92,95,232,.28);
}
.btn-primary:hover { background: var(--theme-dk); border-color: var(--theme-dk); }

.btn-outline {
  background: var(--surface); color: var(--theme);
  border-color: var(--border); box-shadow: var(--sh);
}
.btn-outline:hover { border-color: var(--theme); }

.btn-fwd {
  background: #3EA0DC; color: #fff;
  border-color: #3EA0DC; box-shadow: 0 3px 10px rgba(62,160,220,.25);
}
.btn-fwd:hover { background: #2E90CC; border-color: #2E90CC; }

.btn-sm { padding: 10px 16px; font-size: 14px; }

.back-btn {
  display: flex; align-items: center; gap: 6px;
  align-self: flex-start;
  background: var(--surface); border: 2px solid var(--border);
  border-radius: var(--r-pill); padding: 7px 15px;
  font-family: var(--font); font-size: 13px; color: var(--text2);
  cursor: pointer; box-shadow: var(--sh);
  transition: border-color .12s, color .12s, transform .1s;
}
.back-btn:hover  { border-color: var(--theme); color: var(--theme); }
.back-btn:active { transform: scale(.93); }

/* ══════════════════
   DEBUG PANEL
══════════════════ */
#debug-panel              { display: none !important; }
#debug-panel.visible      { display: block !important; }

/* ══════════════════
   NAME SCREEN
══════════════════ */
.name-display {
  font-size: 26px; color: var(--text);
  min-height: 52px; background: var(--surface2);
  border-radius: var(--r-sm); padding: 10px 16px; margin-bottom: 14px;
  border: 2px dashed var(--border); letter-spacing: .1em;
  display: flex; align-items: center; justify-content: center;
}
.name-placeholder { opacity: .35; font-size: 14px; }

.kana-del-row { display: flex; gap: 4px; margin-bottom: 8px; align-items: stretch; }
.kana-del-spacer { flex: 2; } /* 9分割中の残り2ぶん */
.kana-del-btn {
  padding: 0 2px; font-size: 12px; height: 32px;
  font-family: var(--font); border-radius: var(--r-sm);
  cursor: pointer; border: 2px solid; white-space: nowrap;
  display: flex; align-items: center; justify-content: center;
  transition: background .1s, transform .1s cubic-bezier(.34,1.56,.64,1);
}
.kana-del-btn:active { transform: scale(.92); }
.kana-del-hoka {
  flex: 1; /* 9分割中の1ぶん */
  background: #eef4ff; border-color: #aac4f0; color: var(--theme);
  font-weight: 700;
}
.kana-del-hoka:active { background: var(--theme); color: #fff; border-color: var(--theme); }
.kana-del-all {
  flex: 3; /* 9分割中の3ぶん = かなボタン3個ぶん */
  background: var(--red-lt); border-color: #F4AAAA; color: var(--red);
}
.kana-del-all:active { background: var(--red); color: #fff; }
.kana-del-one {
  flex: 3; /* 9分割中の3ぶん = かなボタン3個ぶん */
  background: var(--surface2); border-color: var(--border); color: var(--text2);
}
.kana-del-one:active { background: var(--border); color: var(--text); }

/* ほかモーダル */
.hoka-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.35);
  z-index: 200; opacity: 0; transition: opacity .22s;
}
.hoka-overlay.visible { opacity: 1; }
.hoka-modal {
  position: fixed; left: 50%; bottom: 0;
  transform: translate(-50%, 100%);
  width: min(430px, 100vw);
  max-height: 75vh;
  background: var(--surface); border-radius: 20px 20px 0 0;
  box-shadow: 0 -4px 24px rgba(0,70,160,.15);
  z-index: 201;
  display: flex; flex-direction: column;
  padding: 0 0 env(safe-area-inset-bottom,0);
  transition: transform .22s cubic-bezier(.34,1.2,.64,1);
}
.hoka-modal.visible { transform: translate(-50%, 0); }
.hoka-modal-title {
  text-align: center; font-size: 15px; font-weight: 700;
  color: var(--text); padding: 14px 0 10px;
  border-bottom: 1.5px solid var(--border);
  font-family: var(--font);
}
.hoka-modal-body {
  flex: 1; overflow-y: auto; padding: 14px 14px 4px;
}
.hoka-grid {
  display: grid;
  gap: 4px;
  width: 100%;
  justify-items: stretch;
}
.hoka-kana-btn {
  background: var(--surface); border: 2px solid var(--border);
  border-radius: var(--r-sm); padding: 8px 2px; font-size: 14px;
  cursor: pointer; color: var(--text); font-family: var(--font); line-height: 1;
  box-shadow: 0 3px 0 #BDD4EA; text-align: center;
  transition: border-color .1s, background .1s, transform .08s, box-shadow .08s;
}
.hoka-kana-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #BDD4EA; background: var(--theme); color: #fff; border-color: var(--theme); }
.hoka-col-spacer { /* セクション間の空列セル */ visibility: hidden; }
.hoka-close-btn {
  margin: 8px 14px 14px; padding: 12px; font-size: 14px;
  font-family: var(--font); border-radius: var(--r-sm);
  background: var(--surface2); border: 2px solid var(--border);
  color: var(--text2); cursor: pointer; font-weight: 600;
  transition: background .1s;
  flex-shrink: 0;
}
.hoka-close-btn:active { background: var(--border); }

.kana-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  direction: rtl;
  gap: 4px; margin-bottom: 14px;
  width: 100%;
  justify-items: stretch;
}
.kana-btn {
  background: var(--surface); border: 2px solid var(--border);
  border-radius: var(--r-sm); padding: 8px 2px; font-size: 14px;
  cursor: pointer; color: var(--text); font-family: var(--font); line-height: 1;
  box-shadow: 0 3px 0 #BDD4EA;
  transition: border-color .1s, background .1s, transform .08s, box-shadow .08s;
}
.kana-btn:hover  { border-color: var(--theme); }
.kana-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #BDD4EA; background: var(--theme); color: #fff; border-color: var(--theme); }
.kana-delete {
  grid-column: span 2; direction: ltr;
  background: var(--red-lt); border-color: #F4AAAA; font-size: 12px;
}
.kana-delete:active { background: var(--red); color: #fff; }

/* ══════════════════
   SUFFIX
══════════════════ */
.suffix-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.suffix-btn {
  background: var(--surface); border: 2px solid var(--border);
  border-radius: var(--r-pill); padding: 14px 10px;
  font-family: var(--font); font-size: 18px;
  cursor: pointer; color: var(--text); text-align: center;
  box-shadow: 0 4px 0 #BDD4EA, 0 2px 8px rgba(27,38,64,.08);
  transition: border-color .12s, background .1s, transform .08s, box-shadow .08s;
}
.suffix-btn:hover  { border-color: var(--theme); }
.suffix-btn:active { transform: translateY(3px) !important; box-shadow: 0 1px 0 #BDD4EA !important; }
.suffix-btn.selected { background: var(--theme); color: #fff; border-color: var(--theme); box-shadow: 0 4px 0 var(--theme-dk), 0 2px 8px rgba(92,95,232,.25); }

/* ══════════════════
   OBOERU LIST
══════════════════ */
.kuku-row {
  display: grid;
  grid-template-columns: 30px auto auto 1fr auto;
  align-items: center; gap: 4px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 8px;
  box-shadow: var(--sh); cursor: pointer;
  transition: border-color .12s, transform .1s;
}
.kuku-row:hover   { border-color: var(--theme); transform: translateX(2px); }
.kuku-row.current  { border-color: var(--theme); background: var(--theme-lt); }
.kuku-row.selected { border-color: #22AA66; background: #e6f9f0; }
.kuku-row.selected .kuku-check::before { content: '☑'; font-size: 22px; color: #22AA66; }
.kuku-row:not(.selected) .kuku-select-mark { content: '☐'; font-size: 22px; color: #ccc; }
.kuku-row:active  { transform: scale(.97); }
.kuku-eq    { font-size: 17px; color: var(--text); white-space: nowrap; }
.kuku-ans   { font-size: 19px; color: var(--theme); white-space: nowrap; }
.kuku-read  { font-size: 11px; color: var(--text2); padding-left: 6px; }
.kuku-check { font-size: 28px; color: #22AA66; text-align: center; font-weight: bold; min-width: 28px; }
.speak-btn  {
  background: none; border: none; cursor: pointer;
  padding: 4px; border-radius: 6px; color: var(--theme);
  transition: background .1s;
}
.speak-btn:hover { background: var(--theme-lt); }

/* ══════════════════
   RENSHU
══════════════════ */
.prog-track { height: 10px; background: var(--surface2); border-radius: var(--r-pill); overflow: hidden; margin-bottom: 6px; }
.prog-fill  {
  height: 100%; background: var(--theme);
  border-radius: var(--r-pill);
  transition: width .4s cubic-bezier(.34,1.56,.64,1);
}

.prob-card {
  background: var(--surface2); border: 2px solid var(--border);
  border-radius: var(--r); padding: 20px 20px 24px; text-align: center; margin: 4px 0;
}
.prob-reading-top {
  font-size: 15px; color: var(--text2);
  min-height: 22px; margin-bottom: 6px;
  letter-spacing: .05em;
}
.prob-eq { font-size: 52px; color: var(--text); line-height: 1.1; white-space: nowrap; }
.q-mark  { color: var(--border); }
.ans-revealed { color: var(--red); animation: popIn .3s cubic-bezier(.34,1.56,.64,1); }
@keyframes popIn {
  from { transform: scale(0) rotate(-10deg); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.ans-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 12px 0; }
.ans-btn {
  background: var(--surface); border: 2px solid var(--border);
  border-radius: var(--r-pill);
  font-family: var(--font); font-size: 20px; color: var(--text);
  padding: 12px 6px; cursor: pointer;
  box-shadow: 0 4px 0 #BDD4EA, 0 2px 8px rgba(27,38,64,.10);
  transition: border-color .1s, background .1s, transform .08s, box-shadow .08s;
}
.ans-btn:hover  { border-color: var(--theme); color: var(--theme); }
.ans-btn:active {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 #BDD4EA, 0 1px 4px rgba(27,38,64,.08) !important;
}
.ans-btn.correct { background: var(--theme); border-color: var(--theme); color: #fff; transform: scale(1.06); box-shadow: 0 4px 0 #4044C0, 0 2px 8px rgba(92,95,232,.3); }
.ans-btn.wrong   { background: var(--red-lt); border-color: #F4AAAA; color: var(--red); animation: shake .25s; }
.ans-del {
  background: var(--surface2); color: var(--text2);
  font-size: 15px; border-color: var(--border);
  box-shadow: 0 4px 0 #C4DCF0, 0 2px 8px rgba(27,38,64,.08);
}
.ans-del:active {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 #C4DCF0 !important;
}
.q-typing { color: var(--theme); animation: popIn .15s cubic-bezier(.34,1.56,.64,1); }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  30%     { transform: translateX(-7px); }
  70%     { transform: translateX(7px); }
}

/* ══════════════════
   CLEAR
══════════════════ */
.trophy-anim { animation: trophyBob 2.2s ease-in-out infinite alternate; display: block; margin: 0 auto; }
@keyframes trophyBob { from { transform: translateY(0); } to { transform: translateY(-10px); } }

/* ══════════════════
   花丸オーバーレイ
══════════════════ */
#hanamaru-ov {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  opacity: 0;
}
#hanamaru-ov.show  { animation: hmFadeIn .15s ease forwards; }
@keyframes hmFadeIn  { to { opacity: 1; } }
#hanamaru-ov.hide  { animation: hmFadeOut .3s ease forwards; }
@keyframes hmFadeOut { to { opacity: 0; transform: scale(1.12); } }

.hm-ring {
  fill: none;
  stroke: var(--red);
  stroke-linecap: round;
  stroke-dasharray: 942;
  stroke-dashoffset: 942;
}
#hanamaru-ov.show .hm-ring {
  animation: hmDraw .45s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes hmDraw { to { stroke-dashoffset: 0; } }

/* confetti */
.confetti-piece {
  position: fixed; top: -12px; border-radius: 3px;
  pointer-events: none; z-index: 190;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall { to { transform: translateY(110vh) rotate(720deg); opacity: 0; } }

/* char pop */
.char { display: inline-block; animation: charPop .2s cubic-bezier(.34,1.56,.64,1) both; }
#dino-name, #dino-suffix { transition: src .4s; }
@keyframes charPop { from { transform: scale(0) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* ══════════════════
   EGG SELECT
══════════════════ */
.egg-select-grid {
  display: flex; gap: 16px; justify-content: center;
  flex-wrap: wrap; margin-bottom: 8px;
}
.egg-sel-btn {
  background: none; border: 3px solid var(--border);
  border-radius: var(--r); padding: 8px;
  cursor: pointer;
  transition: border-color .14s, transform .12s cubic-bezier(.34,1.56,.64,1);
  position: relative;
}
.egg-sel-btn img { height: 50px; width: auto; display: block; }
.egg-sel-btn:hover  { border-color: var(--theme); }
.egg-sel-btn:active { transform: scale(.93); }
.egg-sel-btn.selected { border-color: var(--theme); background: var(--theme-lt); }
.egg-sel-btn.selected::after {
  content: '✓'; position: absolute; top: -8px; right: -8px;
  background: var(--theme); color: #fff;
  border-radius: 50%; width: 22px; height: 22px;
  font-size: 13px; display: flex; align-items: center; justify-content: center;
  line-height: 22px;
}

/* ══════════════════
   EGG + CRACK OVERLAY
══════════════════ */
.egg-stage-wrap { position: relative; display: inline-block; }
.crack-overlay {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
@keyframes crackIn {
  from { opacity: 0; stroke-dashoffset: 100; }
  to   { opacity: 1; stroke-dashoffset: 0; }
}

/* テストモード正誤ボタン */
.test-btn-correct { background:#22AA66 !important; color:#fff !important; }
.test-btn-wrong   { background:var(--red) !important; color:#fff !important; }

/* home画面の卵表示 */
.home-egg-wrap { position: relative; display: inline-block; }
.home-egg-wrap img { height: 55px; width: auto; display: block; }

/* 卵の左右揺れ */
@keyframes eggWobble {
  0%   { transform: rotate(0deg); }
  18%  { transform: rotate(calc(-1 * var(--wobble-deg, 7deg))); }
  40%  { transform: rotate(calc(0.86 * var(--wobble-deg, 7deg))); }
  58%  { transform: rotate(calc(-0.5 * var(--wobble-deg, 7deg))); }
  76%  { transform: rotate(calc(0.25 * var(--wobble-deg, 7deg))); }
  100% { transform: rotate(0deg); }
}
.egg-wobble {
  animation: eggWobble 0.65s ease-in-out;
  transform-origin: center bottom;
}

/* ── 床の影（くくるん足元） ── */
.floor-shadow {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 14px;
  background: radial-gradient(ellipse at center,
    rgba(0,0,0,0.22) 0%,
    rgba(0,0,0,0.10) 45%,
    rgba(0,0,0,0) 100%
  );
  border-radius: 50%;
  pointer-events: none;
}
@keyframes shadowPyon {
  0%   { width: 90px;  opacity: 1; }
  15%  { width: 75px;  opacity: 0.85; }
  42%  { width: 44px;  opacity: 0.45; }
  65%  { width: 68px;  opacity: 0.75; }
  80%  { width: 85px;  opacity: 0.95; }
  100% { width: 90px;  opacity: 1; }
}

/* ── くくるんSVGラッパー（影を正確にSVG底辺中央へ） ── */
.kukurun-svg-wrap {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
}
.kukurun-svg-wrap .floor-shadow {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 14px;
}