/* タイピングバトル(/typing・/en/typing・/history・/account)の刷新テーマ。style.css と site-theme.css の上に重ね、
 * body.site-v2 のページだけに効く。画面の配置・操作の流れは style.css のまま変えず、色・フォント・質感だけを変える。
 * ローマ字・ルームコードは各ページの head で読み込む JetBrains Mono(なければ Consolas などの等幅)。 */
:root {
  --f-mono: 'JetBrains Mono', 'Consolas', 'SFMono-Regular', Menlo, monospace;
  --c-hit: #6ff0a0;
  --c-miss: #ff6b7a;
  --c-next: #ffd166;
  --c-mode-casual: #4fb8ff;
  --c-mode-room: #4fe0c0;
  --c-mode-ranked: #ffcb6b;
}

/* ---- 見出し ---- */
body.site-v2 .screen .title {
  margin: 12px 0 6px;
  font-size: clamp(1.8rem, 5vw, 2.5rem);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: .02em;
  text-shadow: 0 0 24px rgba(108, 140, 255, .55);
}
body.site-v2 .room-row input { font-family: var(--f-mono); }
body.site-v2 .auth-bar .nickname { color: var(--c-hit); }

/* ---- 対戦モードのカード: モードごとの色の帯と矢印 ---- */
body.site-v2 .mode-grid { gap: 12px; }
body.site-v2 .mode-card {
  --mode: var(--c-brand);
  position: relative;
  gap: 4px;
  min-height: 72px;
  padding: 16px 48px 16px 22px;
  border: 1px solid var(--c-border);
  border-radius: 14px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--mode) 12%, transparent), transparent 60%), var(--c-surface);
  overflow: hidden;
  transition: transform .2s var(--ease), border-color .2s, box-shadow .2s, background .2s;
}
body.site-v2 .mode-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--mode);
}
body.site-v2 .mode-card::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--mode);
  border-right: 2px solid var(--mode);
  transform: translateY(-50%) rotate(45deg);
  transition: right .2s var(--ease);
}
body.site-v2 #mode-casual { --mode: var(--c-mode-casual); }
body.site-v2 #mode-room { --mode: var(--c-mode-room); }
body.site-v2 #mode-ranked { --mode: var(--c-mode-ranked); }
body.site-v2 .mode-card:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--mode) 55%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--mode) 20%, transparent), transparent 70%), var(--c-surface-2);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
}
body.site-v2 .mode-card:hover:not(:disabled)::after { right: 16px; }
body.site-v2 .mode-card:focus-visible { outline: 2px solid var(--mode); outline-offset: 3px; }
body.site-v2 .mode-card .mode-title { font-size: 1.1rem; font-weight: 700; color: var(--c-text); }
body.site-v2 .mode-card .mode-desc { font-size: .84rem; color: var(--c-text-sub); }
/* 相手探しの間の回る印(client.js が .searching を付ける)。矢印の左に出し、文字が重ならないよう右の余白を広げる */
.mode-card .mode-spin { display: none; }
body.site-v2 .mode-card.searching { padding-right: 92px; border-color: color-mix(in srgb, var(--mode) 55%, transparent); }
body.site-v2 .mode-card.searching .mode-spin {
  display: block;
  position: absolute;
  right: 54px;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border: 3px solid color-mix(in srgb, var(--mode) 25%, transparent);
  border-top-color: var(--mode);
  border-radius: 50%;
  animation: mode-spin .8s linear infinite;
}
@keyframes mode-spin { to { transform: rotate(360deg); } }

/* ---- ルームコード ---- */
body.site-v2 .room-code-display {
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 2rem;
  color: var(--c-next);
  padding: 10px 0;
  border: 1px dashed rgba(255, 209, 102, .4);
  border-radius: 12px;
  background: rgba(255, 209, 102, .06);
}

/* ---- ランク ---- */
body.site-v2 .rank-widget { border-color: var(--c-border-strong); background: rgba(108, 140, 255, .1); }
body.site-v2 .rank-tier-name { color: #c9d5ff; }
body.site-v2 .rank-points-text { color: var(--c-text-mute); font-family: var(--f-display); font-variant-numeric: tabular-nums; }

/* ---- 準備・カウントダウン ---- */
body.site-v2 .ready-panel { padding: 36px 24px; }
body.site-v2 .ready-timeout-num { font-family: var(--f-display); color: var(--c-hit); }
body.site-v2 .ready-timeout-num.urgent { color: var(--c-miss); }
body.site-v2 .countdown-number { font-family: var(--f-display); font-size: 7rem; color: var(--c-next); }

/* ---- 対戦画面 ---- */
body.site-v2 .hp-label {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 6px;
  font-weight: 700;
  color: var(--c-text);
}
body.site-v2 :is(#opp-hp-num, #my-hp-num) { margin-left: auto; font-family: var(--f-display); font-variant-numeric: tabular-nums; }
body.site-v2 .hp-bar-outer {
  height: 20px;
  border-radius: 10px;
  border: 1px solid var(--c-border-strong);
  background: rgba(9, 11, 24, .7);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5);
}
body.site-v2 .hp-bar-inner { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
body.site-v2 .hp-bar-inner.me { background: linear-gradient(90deg, #22c37a, #6ff0a0); }
body.site-v2 .hp-bar-inner.opp { background: linear-gradient(90deg, #ff4d6a, #ff8f9c); }
body.site-v2 .word-area {
  position: relative;
  padding: 44px 20px;
  border: 1px solid var(--c-border-strong);
  border-radius: 22px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(108, 140, 255, .18), transparent 70%),
    rgba(9, 11, 24, .55);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .06);
}
body.site-v2 .kana-display { font-weight: 700; font-size: clamp(1.7rem, 6vw, 2.4rem); }
body.site-v2 .romaji-display { font-family: var(--f-mono); font-weight: 700; font-size: clamp(1.6rem, 6vw, 2.4rem); letter-spacing: .08em; }
body.site-v2 .romaji-display .done { color: var(--c-hit); }
body.site-v2 .romaji-display .next { color: var(--c-next); text-underline-offset: 6px; text-decoration-thickness: 3px; }
body.site-v2 .romaji-display .pending { color: #6b71a3; }
body.site-v2 .feedback-area { font-family: var(--f-display); font-size: 1.4rem; letter-spacing: .08em; }
body.site-v2 .feedback-hit { color: var(--c-hit); text-shadow: 0 0 16px rgba(111, 240, 160, .5); }
body.site-v2 .feedback-miss { color: var(--c-miss); text-shadow: 0 0 16px rgba(255, 107, 122, .5); }

/* ---- 結果画面 ---- */
body.site-v2 .result-title { font-size: clamp(2.6rem, 9vw, 3.6rem); font-weight: 900; margin-top: 72px; }
body.site-v2 .result-title.win { color: var(--c-hit); text-shadow: 0 0 28px rgba(34, 195, 122, .7); }
body.site-v2 .result-title.lose { color: var(--c-miss); text-shadow: 0 0 28px rgba(255, 77, 106, .6); }
body.site-v2 .rank-change { font-family: var(--f-display); font-size: 1.05rem; }
body.site-v2 .rank-change.up { color: var(--c-hit); }
body.site-v2 .rank-change.down { color: var(--c-miss); }

/* ---- お知らせ・広告ブロックの案内 ---- */
body.site-v2 .notice-banner { background: rgba(45, 52, 112, .92); border-bottom-color: var(--c-border-strong); backdrop-filter: blur(8px); }
body.site-v2 .site-notice-card { border-color: var(--c-border-strong); border-radius: 20px; background: #12152b; }

/* ---- ページ下部の説明文 ---- */
body.site-v2 .seo-content h2 { color: var(--c-text); font-size: 1.08rem; padding-left: 10px; border-left: 3px solid var(--c-brand); }
body.site-v2 .seo-content :is(p, li) { color: var(--c-text-sub); font-size: .9rem; }
body.site-v2 .seo-content a { color: var(--c-link); }
body.site-v2 .seo-content .doc-toc { border: 1px solid var(--c-border); border-radius: 12px; }

@media (prefers-reduced-motion: reduce) {
  body.site-v2 :is(.mode-card, .btn-primary, .mode-card::after) { transition: none; }
  body.site-v2 .mode-card:hover:not(:disabled), body.site-v2 .btn-primary:hover:not(:disabled) { transform: none; }
  body.site-v2 .mode-card.searching .mode-spin { animation-duration: 1.6s; }   /* 待っている印なので止めずに、ゆっくり回す */
}

/* 勝利のときはトロフィーのアイコン(Lucide、ISCライセンス)を文字の前に出す。文字は client.js が入れる */
body.site-v2 .result-title.win::before {
  content: "";
  display: inline-block;
  width: .8em;
  height: .8em;
  margin-right: .25em;
  vertical-align: -.05em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9H4.5a2.5 2.5 0 0 1 0-5H6M18 9h1.5a2.5 2.5 0 0 0 0-5H18M4 22h16M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22'/%3E%3Cpath d='M18 2H6v7a6 6 0 0 0 12 0V2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9H4.5a2.5 2.5 0 0 1 0-5H6M18 9h1.5a2.5 2.5 0 0 0 0-5H18M4 22h16M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22'/%3E%3Cpath d='M18 2H6v7a6 6 0 0 0 12 0V2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ================= モンスター(バトルポイント・ガチャ・図鑑・対戦の画面のモンスター。docs/specs/typing-monsters.md) =================
 * 動きは transform / opacity だけ(キー入力の経路に重い処理を足さない)。「演出を減らす」のときは飛びかからず光るだけ(JS 側でも見る)。 */

/* ---- ロビー ---- */
.mon-lobby-row { display: flex; align-items: center; gap: 12px 18px; }
.mon-lobby-who { flex: none; width: 104px; margin: 0; padding: 4px; background: transparent; border: 0; box-shadow: none; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--c-text-sub); cursor: pointer; }
.mon-lobby-who:disabled { cursor: default; }
.mon-lobby .mon-fig { --mon: 90px; }
.mon-lobby-name { font-size: .85rem; font-weight: 700; color: var(--c-text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mon-lobby-using { font-size: .72rem; color: var(--c-next); }
.mon-lobby-main { flex: 1 1 auto; min-width: 0; }
.mon-lobby-bp { font-size: 1rem; color: var(--c-text-sub); margin-bottom: 8px; }
.mon-lobby-bp b { font-family: var(--f-display); font-size: 1.5rem; color: var(--c-next); font-variant-numeric: tabular-nums; margin: 0 2px; }
.mon-lobby-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.mon-lobby-btns > button { width: auto; max-width: 100%; margin: 0; white-space: nowrap; }   /* 「モンスターガチャ」を言葉の途中で折り返さない(狭い画面では下の @media で文字を小さくする) */
.mon-lobby-main > .hint { margin: 0; }
@media (max-width: 420px) { .mon-lobby-bp { font-size: .9rem; white-space: nowrap; } .mon-lobby-bp b { font-size: 1.3rem; } .mon-lobby-who { width: 92px; } .mon-lobby .mon-fig { --mon: 80px; } .mon-lobby-btns > button { padding-left: 12px; padding-right: 12px; font-size: clamp(.7rem, 3.7vw, 1rem); } }
.mon-lobby .hint { margin: 10px 0 0; }

/* ---- ガチャの画面 ---- */
.mon-balance { font-size: 1.05rem; color: var(--c-text-sub); margin: 0 0 14px; }
.mon-balance b { font-family: var(--f-display); font-size: 1.8rem; color: var(--c-next); font-variant-numeric: tabular-nums; margin: 0 2px; }
.mon-pull-row { display: flex; gap: 12px; flex-wrap: wrap; }
.mon-pull-row .btn-primary { flex: 1 1 130px; width: auto; margin: 0; }
.mon-pull-row .btn-primary:disabled { opacity: .45; cursor: not-allowed; }
.mon-msg { min-height: 1.4em; margin: 12px 0 4px; }
.mon-msg.error { color: var(--c-miss); }
.mon-odds { margin-top: 14px; }
.mon-odds-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 14px; }
.mon-odds-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: .9rem; border-bottom: 1px solid var(--c-border); }
.mon-odds-img { width: 40px; height: 40px; object-fit: contain; flex: none; }
.mon-odds-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-text); }
.mon-odds-pct { font-family: var(--f-mono); font-size: .78rem; color: var(--c-text-mute); white-space: nowrap; }

/* ---- ガチャの演出: 光る玉 -> 割れる -> モンスター ---- */
.mon-reveal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; background: radial-gradient(circle at 50% 45%, rgba(40, 46, 96, .92), rgba(5, 7, 18, .96)); }
.mon-reveal-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; max-width: 760px; margin: auto; }
.mon-orb { position: relative; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0%, var(--mon-color, #ffe9a8) 42%, rgba(0, 0, 0, 0) 74%); box-shadow: 0 0 36px var(--mon-color, #ffe9a8), 0 0 90px var(--mon-color, #ffe9a8); animation: monOrbPulse .5s ease-in-out infinite alternate; }
.mon-orb::before, .mon-orb::after { content: ""; position: absolute; left: 50%; top: -6%; width: 3px; height: 112%; background: linear-gradient(180deg, transparent, #fff 30%, #fff 70%, transparent); opacity: 0; box-shadow: 0 0 8px #fff; }
.mon-orb::before { transform: translateX(-50%) rotate(24deg); }
.mon-orb::after { transform: translateX(-50%) rotate(-38deg); }
.mon-orb.crack { animation: monOrbBurst .6s ease-out forwards; }
.mon-orb.crack::before, .mon-orb.crack::after { opacity: 1; }
@keyframes monOrbPulse { from { transform: scale(.9) rotate(-4deg); } to { transform: scale(1.1) rotate(4deg); } }
@keyframes monOrbBurst { 0% { transform: scale(1.1); filter: brightness(1); opacity: 1; } 45% { transform: scale(1.5); filter: brightness(2.6); opacity: 1; } 100% { transform: scale(2.8); filter: brightness(5); opacity: 0; } }
.mon-skip-hint { margin: 0; font-size: .85rem; color: var(--c-text-mute); }
.mon-single { display: flex; justify-content: center; }
.mon-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; width: 100%; }
.mon-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 10px; border: 1px solid var(--c-border-strong); border-radius: 14px; background: rgba(12, 15, 36, .85); box-shadow: 0 0 18px color-mix(in srgb, var(--mon-color, #fff) 35%, transparent); animation: monCardIn .45s cubic-bezier(.2, 1.2, .3, 1) both; animation-delay: calc(var(--i, 0) * 70ms); min-width: 0; }
.mon-card.is-new { border-color: var(--c-next); }
.mon-card-img { width: 100%; max-width: 110px; aspect-ratio: 1; object-fit: contain; }
.mon-card-name { font-size: .78rem; font-weight: 700; color: var(--c-text); text-align: center; line-height: 1.25; }
.mon-card-tag { font-family: var(--f-display); font-size: .78rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.mon-card-tag.new { background: var(--c-next); color: #2a2100; }
.mon-card-tag.dup { background: rgba(160, 180, 255, .18); color: var(--c-text-sub); }
.mon-card.big { padding: 18px 22px 20px; gap: 8px; border-radius: 20px; }
.mon-card.big .mon-card-img { max-width: min(260px, 60vw); }
.mon-card.big .mon-card-name { font-size: 1.25rem; }
.mon-card.big .mon-card-tag { font-size: 1rem; padding: 2px 14px; }
@keyframes monCardIn { from { opacity: 0; transform: scale(.6) translateY(16px); } to { opacity: 1; transform: none; } }
.mon-reveal-close { width: auto; min-width: 160px; }

/* ---- 図鑑 ---- */
.mon-tabs { display: flex; gap: 6px; margin-bottom: 12px; border-bottom: 1px solid var(--c-border); }
.mon-tab { flex: 1 1 auto; padding: 10px 8px; font-size: .9rem; white-space: nowrap; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--c-text-mute); font: inherit; font-weight: 700; cursor: pointer; }
.mon-tab.active { color: var(--c-text); border-bottom-color: var(--c-brand); }
.mon-count { margin: 0 0 4px; font-family: var(--f-display); color: var(--c-text-sub); }
.mon-col-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.mon-cell { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px 6px; border: 1px solid var(--c-border); border-radius: 12px; background: rgba(255, 255, 255, .03); color: var(--c-text); font: inherit; cursor: pointer; min-width: 0; }
.mon-cell.owned:hover { border-color: var(--c-border-strong); background: rgba(255, 255, 255, .07); }
.mon-cell.locked { cursor: default; }
.mon-cell.current { border-color: var(--c-next); box-shadow: 0 0 12px rgba(255, 209, 102, .35); }
.mon-cell-img { width: 100%; max-width: 76px; aspect-ratio: 1; object-fit: contain; }
.mon-cell-img.silhouette { filter: brightness(0) invert(.3); opacity: .85; }
.mon-cell-name { font-size: .7rem; line-height: 1.25; text-align: center; color: var(--c-text-sub); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mon-cell.locked .mon-cell-name { color: var(--c-text-mute); }
.mon-cell-flag { position: absolute; top: -7px; right: -2px; padding: 0 7px; border-radius: 999px; background: var(--c-next); color: #2a2100; font-size: .65rem; font-weight: 800; }
.mon-detail { position: fixed; inset: 0; z-index: 250; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(5, 7, 18, .82); }
.mon-detail-card { position: relative; width: min(100%, 420px); padding: 22px 20px 20px; border: 1px solid var(--c-border-strong); border-radius: 22px; background: #12152b; text-align: center; box-shadow: 0 0 60px color-mix(in srgb, var(--mon-color, #6c8cff) 35%, transparent); }
.mon-detail-art { display: flex; justify-content: center; }
.mon-detail-art img { max-width: 100%; max-height: min(46vh, 320px); object-fit: contain; }
.mon-detail-name { margin: 8px 0 2px; font-size: 1.3rem; }
.mon-detail-x { position: absolute; top: 8px; right: 10px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--c-text); font-size: 1.3rem; cursor: pointer; }
.mon-detail-card .btn-primary { margin-top: 10px; }
.mon-detail-card .btn-primary:disabled { opacity: .55; cursor: default; }

/* ---- 結果 ---- */
.mon-result-bp { font-family: var(--f-display); font-size: 1.15rem; font-weight: 700; color: var(--c-next); margin: 8px 0 0; text-align: center; }
#result-bp-balance, #result-bp-guest { text-align: center; margin: 4px 0 14px; }

/* ---- 対戦: 自分のモンスターは左下、相手は右上。HP バーはそれぞれのモンスターの下 ---- */
.mon-arena {
  --mon: clamp(56px, calc(var(--mvh, 1vh) * 20), 210px);   /* モンスターの大きさ = 見えている高さの 2 割(JS が --mvh = 見えている高さの 1% を入れる。キーボードで縮んでも追う) */
  position: relative;
  height: calc(var(--mon) * 1.45 + 58px);
  margin-bottom: 12px;
  overflow-x: clip;   /* 光・数字が横にはみ出してスクロールバーが出ないように */
}
.mon-slot { position: absolute; width: min(47%, calc(var(--mon) * 1.7 + 24px)); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mon-slot.opp { top: 0; right: 1%; }
.mon-slot.me { bottom: 0; left: 1%; }
.mon-slot .hp-block { flex: none; width: 100%; }
.mon-slot .hp-label { margin-bottom: 3px; font-size: .8rem; gap: 3px; }
body.site-v2 .mon-slot .hp-bar-outer { height: 14px; border-radius: 7px; }
.mon-fig { position: relative; width: var(--mon); height: var(--mon); flex: none; will-change: transform; }
.mon-fig .mon-img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; opacity: 0; transition: opacity .25s; pointer-events: none; -webkit-user-select: none; user-select: none; }
.mon-fig.ready .mon-img { opacity: 1; }
.mon-fig.sway .mon-img { transform-origin: 50% 100%; animation: monSway 3.6s ease-in-out infinite; }
@keyframes monSway { 0%, 100% { transform: rotate(-1.2deg) translateY(0); } 50% { transform: rotate(1.2deg) translateY(-2px); } }
@keyframes monSwayFlip { 0%, 100% { transform: scaleX(-1) rotate(-1.2deg) translateY(0); } 50% { transform: scaleX(-1) rotate(1.2deg) translateY(-2px); } }
.mon-slot.opp .mon-fig .mon-img { transform: scaleX(-1); }       /* 相手は左(下の自分の方)を向く */
.mon-slot.opp .mon-fig.sway .mon-img { animation-name: monSwayFlip; }
.mon-fx { position: absolute; pointer-events: none; }
.mon-flash { left: 50%; top: 50%; width: 110%; height: 110%; margin: -55% 0 0 -55%; border-radius: 50%; background: radial-gradient(circle, #fff 0%, var(--fx, #fff) 32%, rgba(0, 0, 0, 0) 68%); }
.mon-dmg { left: 50%; top: 24%; transform: translate(-50%, 0); font-family: var(--f-display); font-weight: 900; font-size: 1.35rem; white-space: nowrap; color: #fff; text-shadow: 0 0 8px var(--mon-color, #fff), 0 2px 0 rgba(0, 0, 0, .7); }
.mon-dmg.miss { color: var(--c-miss); text-shadow: 0 0 8px rgba(255, 77, 106, .8), 0 2px 0 rgba(0, 0, 0, .7); font-size: 1.1rem; }

/* 背の低い画面(スマホでキーボードが出ているとき): 単語の欄を詰めて、モンスターが単語にかからないようにする */
@media (max-height: 560px) {
  html.mon-battle body.site-v2 .word-area { padding: 14px 12px; border-radius: 16px; }
  html.mon-battle body.site-v2 .kana-display { margin-bottom: 6px; font-size: clamp(1.3rem, 5vw, 1.7rem); }
  html.mon-battle body.site-v2 .romaji-display { font-size: clamp(1.3rem, 5vw, 1.7rem); }
  html.mon-battle body.site-v2 .feedback-area { margin-top: 6px; min-height: 1.4rem; font-size: 1.1rem; }
}
@media (max-width: 560px) {
  .mon-grid { grid-template-columns: repeat(3, 1fr); }
  .mon-odds-list { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .mon-orb, .mon-card, .mon-fig.sway .mon-img { animation: none; }
  .mon-fig .mon-img { transition: none; }
}

/* ---- 仕上げ(2026-10-27): 当たりの光は小さく鋭く、ガチャの玉はひび・粒つき ---- */
.mon-flash {
  left: 50%; top: 50%; width: 58%; height: 58%; margin: -29% 0 0 -29%; border-radius: 50%;
  border: 3px solid var(--fx, #fff);
  box-shadow: 0 0 12px var(--fx, #fff), inset 0 0 10px var(--fx, #fff);
  background: radial-gradient(circle, #fff 0%, #fff 14%, rgba(255, 255, 255, 0) 46%);
}
.mon-orb { animation: monOrbGlow .9s ease-in-out infinite alternate; }
@keyframes monOrbGlow {
  from { transform: scale(.94); box-shadow: 0 0 26px var(--mon-color, #ffe9a8), 0 0 60px var(--mon-color, #ffe9a8); }
  to { transform: scale(1.06); box-shadow: 0 0 46px var(--mon-color, #ffe9a8), 0 0 120px var(--mon-color, #ffe9a8); }
}
.mon-orb.cracking { animation: monOrbShake .12s linear infinite, monOrbGlow .5s ease-in-out infinite alternate; }
.mon-orb.cracking::before, .mon-orb.cracking::after { opacity: .85; }
.mon-orb.crack { animation: monOrbBurst .6s ease-out forwards; }
@keyframes monOrbShake { 0% { translate: -2px 0; } 50% { translate: 2px 1px; } 100% { translate: -1px -1px; } }
.mon-spark { position: absolute; left: 50%; top: 60px; width: 8px; height: 8px; border-radius: 50%; background: var(--mon-color, #fff); box-shadow: 0 0 8px var(--mon-color, #fff); pointer-events: none; }
.mon-reveal-stage { min-height: 160px; }
@media (prefers-reduced-motion: reduce) { .mon-orb, .mon-orb.cracking { animation: none; } }

/* ---- 多言語(2026-11-02): ロビーの「お題の言語」の選択と、ラテン文字のお題の表示 ---- */
.prompt-lang { padding-top: 12px; padding-bottom: 12px; }
.prompt-lang-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.prompt-lang-label { font-weight: 700; color: var(--c-text); }
.prompt-lang-select {
  appearance: none; -webkit-appearance: none; flex: 0 1 15em; min-width: 0; min-height: 38px; padding: 4px 30px 4px 12px; border-radius: 10px;
  font: inherit; font-weight: 700; color: var(--c-text); text-overflow: ellipsis; cursor: pointer;
  background: rgba(255, 255, 255, .06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23d4daff' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 11px center;
  border: 1px solid var(--c-border-strong);
}
.prompt-lang-select option { color: #10153f; background: #eceeff; }
.prompt-lang-select:focus-visible { outline: 3px solid #ffd166; outline-offset: 2px; }
.prompt-lang-select:disabled { opacity: .55; cursor: not-allowed; }
.prompt-lang .hint { margin: 8px 0 0; }
/* ラテン文字のお題は行の途中で折り返さない。スペース(ベトナム語の 2 音節の語)は、下に線の付いた箱で見えるようにする */
.romaji-display.latin { white-space: nowrap; }
.romaji-display .sp { display: inline-block; width: .62em; height: .34em; margin: 0 .16em; border: 2px solid currentColor; border-top-width: 0; vertical-align: baseline; box-sizing: border-box; }