@keyframes kirarinGlow {
  0% {
    text-shadow:
      0 0 0 rgba(39,174,96,0);
    filter: brightness(1);
  }
  45% {
    text-shadow:
      0 0 4px rgba(39,174,96,.7),
      0 0 10px rgba(39,174,96,.4);
    filter: brightness(1.08);
  }
  100% {
    text-shadow:
      0 0 0 rgba(39,174,96,0);
    filter: brightness(1);
  }
}

@keyframes streakPulse {
      0%   { transform: scale(1.00); box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.35); }
      50%  { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(46, 204, 113, 0.00); }
      100% { transform: scale(1.00); box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.00); }
    }

@keyframes vs-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }

@keyframes vs-shake-strong { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-12px)} 40%{transform:translateX(12px)} 60%{transform:translateX(-12px)} 80%{transform:translateX(12px)} }

@keyframes vs-screen-shake { 0%,100%{transform:translate(0,0)} 20%{transform:translate(-4px,2px)} 40%{transform:translate(4px,-2px)} 60%{transform:translate(-4px,-2px)} 80%{transform:translate(4px,2px)} }

@keyframes vs-screen-shake-strong { 0%,100%{transform:translate(0,0)} 15%{transform:translate(-8px,4px)} 30%{transform:translate(8px,-4px)} 45%{transform:translate(-8px,-4px)} 60%{transform:translate(8px,4px)} 75%{transform:translate(-8px,0)} }

@keyframes damage-screen-shake {
  0%, 100% { transform: translate(0, 0) scale(1); filter: brightness(1); }
  5% { transform: translate(-20px, -15px) rotate(-1.5deg) scale(1.05); filter: brightness(2); }
  10% { transform: translate(20px, 15px) rotate(1.5deg) scale(1.05); filter: brightness(2); }
  15% { transform: translate(-18px, 12px) rotate(-1deg) scale(1.03); filter: brightness(1.8); }
  20% { transform: translate(18px, -12px) rotate(1deg) scale(1.03); filter: brightness(1.8); }
  30% { transform: translate(-12px, 8px) rotate(-0.5deg) scale(1.02); filter: brightness(1.5); }
  40% { transform: translate(12px, -8px) rotate(0.5deg) scale(1.02); filter: brightness(1.5); }
  60% { transform: translate(-6px, 4px) scale(1.01); filter: brightness(1.2); }
  80% { transform: translate(6px, -4px) scale(1.01); filter: brightness(1.1); }
}

@keyframes enemy-image-shake {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); filter: brightness(1) drop-shadow(0 0 0 rgba(255,0,0,0)); }
  8% { transform: translate(-50px, -35px) rotate(-14deg) scale(1.25); filter: brightness(3) contrast(1.5) drop-shadow(0 0 25px rgba(255,0,0,1)); }
  16% { transform: translate(50px, 35px) rotate(14deg) scale(1.25); filter: brightness(3) contrast(1.5) drop-shadow(0 0 25px rgba(255,0,0,1)); }
  24% { transform: translate(-42px, 28px) rotate(-10deg) scale(1.2); filter: brightness(2.5) drop-shadow(0 0 20px rgba(255,100,0,0.8)); }
  32% { transform: translate(42px, -28px) rotate(10deg) scale(1.2); filter: brightness(2.5) drop-shadow(0 0 20px rgba(255,100,0,0.8)); }
  45% { transform: translate(-25px, 18px) rotate(-6deg) scale(1.12); filter: brightness(2) drop-shadow(0 0 12px rgba(255,200,0,0.6)); }
  60% { transform: translate(18px, -12px) rotate(4deg) scale(1.06); filter: brightness(1.5); }
}

/* RPG風：ヒット時の閃光 */
.fx-hit-spark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150%; /* 少し拡大 */
  height: 150%;
  background: radial-gradient(circle, #fff 0%, rgba(255,255,255,0.9) 20%, rgba(255,200,0,0.7) 50%, rgba(255,100,0,0.3) 70%, transparent 90%);
  opacity: 0;
  pointer-events: none;
  z-index: 100;
}

.fx-hit-spark.active {
  animation: fxHitSparkEnhanced 0.5s ease-out forwards;
}

@keyframes fxHitSparkEnhanced {
  0% { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; filter: brightness(10); }
  10% { opacity: 1; filter: brightness(5); }
  100% { transform: translate(-50%, -50%) scale(2.5) rotate(90deg); opacity: 0; filter: brightness(1); }
}

/* 斬撃エフェクト */
.fx-slash {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%; /* より長く */
  height: 40px; /* より太く */
  background: linear-gradient(90deg, transparent, #fff 50%, transparent);
  box-shadow: 0 0 30px #fff, 0 0 60px #0ff, 0 0 100px #00f;
  transform: translate(-50%, -50%) rotate(-45deg) scaleX(0);
  opacity: 0;
  pointer-events: none;
  z-index: 101;
}

.fx-slash.active {
  animation: fxSlashAnimEnhanced 0.5s cubic-bezier(0.15, 1, 0.3, 1) forwards;
}

@keyframes fxSlashAnimEnhanced {
  0% { transform: translate(-50%, -50%) rotate(-45deg) scaleX(0) skewX(45deg); opacity: 0; filter: brightness(5); }
  20% { transform: translate(-50%, -50%) rotate(-45deg) scaleX(1.2) skewX(0deg); opacity: 1; filter: brightness(2); }
  100% { transform: translate(-50%, -50%) rotate(-45deg) scaleX(2) translateY(100px); opacity: 0; filter: brightness(1); }
}

@keyframes defeat-fade-out {
  0% { opacity: 1; transform: scale(1); filter: brightness(1); }
  10% { opacity: 1; transform: scale(1.2); filter: brightness(5) white-space; }
  100% { opacity: 0; transform: scale(0.5); filter: brightness(10) blur(20px); }
}

@keyframes vs-flash { 0%{opacity:1} 100%{opacity:0} }

@keyframes menuScan{
  0%   { transform: translateX(-140%) rotate(8deg); opacity:0; }
  20%  { opacity:.95; }
  100% { transform: translateX(140%) rotate(8deg); opacity:0; }
}

@keyframes fxResultPop{
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.55); filter: blur(2px); }
  30%  { opacity: 1; transform: translate(-50%,-58%) scale(1.18); filter: blur(0); }
  70%  { opacity: 1; transform: translate(-50%,-52%) scale(1.03); }
  100% { opacity: 0; transform: translate(-50%,-48%) scale(1.00); }
}

@keyframes fxResultOut{
  from{ opacity: 1; transform: translate(-50%,-50%) scale(1); }
  to  { opacity: 0; transform: translate(-50%,-50%) scale(.96); }
}

@keyframes fxFlash{
  0%{ opacity: 0; }
  25%{ opacity: 1; }
  100%{ opacity: 0; }
}

@keyframes fxPop{
  0%   { transform: translate(-50%, -50%) scale(8); opacity: 0; filter: blur(30px) brightness(5); }
  15%  { transform: translate(-50%, -50%) scale(0.8);  opacity: 1; filter: blur(0) brightness(1.5); }
  25%  { transform: translate(-50%, -50%) scale(1.1);  opacity: 1; filter: blur(0) brightness(1); }
  80%  { transform: translate(-50%, -50%) scale(1.2) rotate(10deg);  opacity: 1; filter: blur(0); }
  100% { transform: translate(-50%, -50%) scale(2); opacity: 0; filter: blur(20px); }
}

/* 格ゲー風：KOテキスト */
.fx-ko-text {
  position: fixed;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%) scale(15);
  font-size: min(25vw, 200px);
  font-weight: 1000;
  color: #fff;
  text-shadow: 
    0 0 20px #ff0000,
    0 0 40px #ff0000,
    0 0 80px #ff0000,
    0 0 120px #000;
  opacity: 0;
  z-index: 10000;
  pointer-events: none;
  font-style: italic;
  will-change: transform, opacity;
}

.fx-ko-text.active {
  animation: koImpactExtreme 1.2s cubic-bezier(0.15, 1, 0.3, 1) forwards;
}

@keyframes koImpactExtreme {
  0% { transform: translate(-50%, -50%) scale(15); opacity: 0; filter: blur(40px) brightness(10); }
  20% { transform: translate(-50%, -50%) scale(0.7); opacity: 1; filter: blur(0) brightness(2); }
  35% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; filter: blur(0) brightness(1.2); }
  75% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; filter: blur(30px); }
}


@keyframes fxFlashUltra{
  0%{opacity:0}
  20%{opacity:1}
  60%{opacity:.9}
  100%{opacity:0}
}

@keyframes fxFlashMAX{
  0%{opacity:0}
  15%{opacity:1}
  50%{opacity:.95}
  100%{opacity:0}
}

@keyframes maruPop3D{
  0%{transform:translate(-50%,-50%) scale(.1) translateZ(-800px);opacity:0;}
  35%{transform:translate(-50%,-60%) scale(1.25) translateZ(120px);opacity:1;}
  65%{transform:translate(-50%,-52%) scale(1.05) translateZ(0);opacity:1;}
  100%{transform:translate(-50%,-46%) scale(.9) translateZ(0);opacity:0;}
}

@keyframes correctFlash{
  0%{opacity:0;}
  20%{opacity:1;}
  60%{opacity:.9;}
  100%{opacity:0;}
}

@keyframes maruPopUltra{
  0%{
    transform:translate(-50%,-50%) scale(.05) translateZ(-1200px);
    opacity:0;
  }
  35%{
    transform:translate(-50%,-60%) scale(1.4) translateZ(180px);
    opacity:1;
  }
  70%{
    transform:translate(-50%,-52%) scale(1.15) translateZ(0);
    opacity:1;
  }
  100%{
    transform:translate(-50%,-48%) scale(1.6) translateZ(0);
    opacity:0;
  }
}

@keyframes batuPop3D{
  0%{
    transform: translate(-50%,-50%) scale(.08) translateZ(-900px) rotate(-15deg);
    opacity: 0;
  }
  30%{
    transform: translate(-50%,-58%) scale(1.25) translateZ(140px) rotate(0deg);
    opacity: 1;
  }
  60%{
    transform: translate(-50%,-52%) scale(1.05) translateZ(0) rotate(0deg);
    opacity: 1;
  }
  100%{
    transform: translate(-50%,-48%) scale(1.35) translateZ(0) rotate(8deg);
    opacity: 0;
  }
}

@keyframes batuPop3D_visible{
  0%{
    transform: translate(-50%,-50%) scale(.08) translateZ(-900px) rotate(-15deg);
    opacity: 0;
  }
  25%{
    transform: translate(-50%,-58%) scale(1.2) translateZ(140px) rotate(0deg);
    opacity: 1;
  }
  55%{
    transform: translate(-50%,-52%) scale(1.05) translateZ(0);
    opacity: 1;
  }
  80%{
    transform: translate(-50%,-50%) scale(1.15) translateZ(0);
    opacity: 1;
  }
  100%{
    transform: translate(-50%,-46%) scale(1.3) translateZ(0);
    opacity: 0;
  }
}

@keyframes batuPopStable{
  0%{
    transform: translate(-50%,-50%) scale(.2) translateZ(-600px);
    opacity: 0;
  }
  35%{
    transform: translate(-50%,-55%) scale(1.1) translateZ(0);
    opacity: 1;
  }
  70%{
    transform: translate(-50%,-50%) scale(1.0) translateZ(0);
    opacity: 1;
  }
  100%{
    transform: translate(-50%,-48%) scale(1.15);
    opacity: 0;
  }
}

@keyframes fxShakeNO_TILT{
  0%   { transform: translate3d(0,0,0); }
  10%  { transform: translate3d(-38px, 22px, 0); }
  20%  { transform: translate3d(36px, -20px, 0); }
  30%  { transform: translate3d(-34px, -18px, 0); }
  40%  { transform: translate3d(32px, 16px, 0); }
  50%  { transform: translate3d(-28px, 14px, 0); }
  60%  { transform: translate3d(26px, -12px, 0); }
  70%  { transform: translate3d(-18px, -10px, 0); }
  80%  { transform: translate3d(16px, 8px, 0); }
  90%  { transform: translate3d(-10px, -6px, 0); }
  100% { transform: translate3d(0,0,0); }
}

@keyframes batuPopStableFade{
  0%{
    transform: translate(-50%,-50%) scale(.2) translateZ(-600px);
    opacity: 0;
  }
  30%{
    transform: translate(-50%,-55%) scale(1.1) translateZ(0);
    opacity: 1;
  }
  65%{
    transform: translate(-50%,-50%) scale(1.0);
    opacity: 1;
  }
  100%{
    transform: translate(-50%,-48%) scale(1.15);
    opacity: 0;
  }
}

@keyframes fxFlashStrobe{
  0%{   opacity:0; transform:scale(1); }
  7%{   opacity:1; transform:scale(1.01); }
  14%{  opacity:0; transform:scale(1); }
  22%{  opacity:1; transform:scale(1.015); }
  30%{  opacity:0; transform:scale(1); }
  40%{  opacity:1; transform:scale(1.02); }
  52%{  opacity:0; transform:scale(1); }
  62%{  opacity:.85; transform:scale(1.01); }
  72%{  opacity:0; transform:scale(1); }
  100%{ opacity:0; transform:scale(1); }
}

@keyframes judge-pop {
    0%   { transform: scale(0.2); opacity: 0; }
    60%  { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); }
  }


body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  background: radial-gradient(900px 520px at 50% 0%, rgba(255,255,255,.22), rgba(255,255,255,0) 62%), radial-gradient(1200px 700px at 20% 10%, rgba(255,255,255,.10), rgba(255,255,255,0) 55%), linear-gradient(180deg, #18457a, #1b5aa3) !important;
  font-size: var(--fs-base);
  line-height: 1.35;
  color: var(--ui-text) !important;
}

header {
  background: linear-gradient(90deg, rgba(40,182,255,.55), rgba(255,211,77,.35), rgba(255,77,109,.45));
  color: #fff;
  padding: 8px 12px;
  font-size: 1.1rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.container {
  display: flex;
  flex-direction: column; /* mobile-first */
  flex-wrap: nowrap;
  min-height: calc(100vh - 40px);
}


.status-panel .box {
  margin-top: 12px;
}

.status-panel, .battle-panel {
  box-sizing: border-box;
  padding: 14px;
}

.box {
  background: #fff;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

h2 {
  font-size: var(--fs-h2);
  margin-top: 0;
  margin: 0 0 10px 0;
  letter-spacing: .02em;
}

.small {
  font-size: var(--fs-small);
  color: var(--muted);
}

button {
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: var(--radius2);
  font-size: 16px;
  cursor: pointer;
  border: 1px solid rgba(40,182,255,.30) !important;
  background: linear-gradient(180deg, rgba(40,182,255,.16), rgba(255,255,255,.06)) !important;
  color: var(--text) !important;
  min-height: var(--btn-h);
  height: var(--btn-h);
  line-height: 1;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 12px 26px rgba(0,0,0,.32) !important;
  transition: transform .08s ease, filter .12s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

button.danger {
  background: linear-gradient(180deg, rgba(255,77,109,.20), rgba(255,255,255,.06)) !important;
  color: #fff;
  border-color: rgba(255,77,109,.45) !important;
}

button.primary {
  background: linear-gradient(180deg, rgba(46,242,165,.20), rgba(40,182,255,.10)) !important;
  color: #fff;
  border-color: rgba(46,242,165,.40) !important;
}

button.secondary {
  background: rgba(255,255,255,.08) !important;
  color: #e8eefc;
  border: 1px solid rgba(255,255,255,.2) !important;
}

/* 都道府県セレクト：画面の背景に合わせた暗いスタイル */
.profile-pref-select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(18,26,43,.98), rgba(12,18,35,.98)) !important;
  color: #e8eefc !important;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}
.profile-pref-select:hover {
  border-color: rgba(74,163,255,.45);
}
.profile-pref-select:focus {
  outline: none;
  border-color: rgba(74,163,255,.65);
  box-shadow: 0 0 0 3px rgba(74,163,255,.2);
}
.profile-pref-select option {
  background: rgba(15,22,38,.98) !important;
  color: #e8eefc !important;
  padding: 8px 12px;
}
.profile-pref-select optgroup {
  background: rgba(10,15,28,.98) !important;
  color: #94a3b8 !important;
  font-weight: 700;
  padding: 10px 12px 6px;
  border-top: 1px solid rgba(255,255,255,.15);
  margin-top: 4px;
}
.profile-pref-select optgroup:first-of-type {
  border-top: none;
  margin-top: 0;
}

.battle-area {
  background: #fff;
  border-radius: 8px;
  padding: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  min-height: 320px;
  position: relative;
}

/* ガチバトル、マスターモード、フリー対戦のトップ画面の背景をメニューボタンが並んでいる枠と同じ暗めの青に */
#gachi-area,
#single-battle-area,
#versus-area {
  background: linear-gradient(180deg, rgba(12,20,51,.92), rgba(8,16,42,.92)) !important;
}

#practice-battle-ui {
  min-height: 600px;
  position: relative;
}

#battle-question {
  min-height: 400px;
}

#battle-header, #vs-battle-header, #gr-battle-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}

/* バトル画面の背景画像 */
.battle-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background-size: auto 100%;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
}

/* マスターモード/練習モードの背景画像 */
#practice-battle-ui .battle-background {
  bottom: 0;
}

/* フリー対戦の背景画像 */
#vs-battle-area .battle-background {
  bottom: 0;
}

/* ガチバトルの背景画像 */
#gr-battle-area .battle-background {
  bottom: 0;
}

/* バトル画面のコンテンツは背景画像の上に表示 */
#battle-question,
#vs-battle-question,
#gr-battle-question {
  position: relative;
  z-index: 1;
}

.player-side {
  text-align: center;
  width: 40%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
}

.enemy-side {
  text-align: center;
  width: 40%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.player-image-container, .enemy-image-container {
  margin-top: 4px;
  display: flex;
  align-items: flex-end;
  position: relative;
  min-width: 120px;
  min-height: 80px;
}

.player-image-container {
  justify-content: flex-end;
}

.enemy-image-container {
  justify-content: flex-start;
}

/* 自プレイヤー・敵キャラ画像：下端基準で1.3倍に拡大（transformでレイアウトに影響させず、背景画像は変更なし） */
.player-image-container .icon,
.enemy-image-container .icon {
  transform-origin: bottom center;
}
.player-image-container #player-image,
.player-image-container #vs-player-image,
.player-image-container #gr-player-image {
  transform: scaleX(-1) scale(1.3) !important;
}
/* 敵キャラ：コンテナにscaleを適用（画像のtransformは揺れエフェクト用に空けておく） */
#practice-battle-ui .enemy-image-container,
#vs-battle-area .enemy-image-container,
#gr-battle-area .enemy-image-container {
  transform: scale(1.3);
  transform-origin: bottom center;
}

.center-info {
  text-align: center;
  width: 20%;
  min-width: 120px;
  font-size: 0.9rem;
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.icon {
  width: 120px;
  height: auto;
  max-width: 100%;
}

/* 体力バーを中央に配置 */
.health-bars-center {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin: -30px 0 8px 0;
  position: relative;
  z-index: 1;
  pointer-events: none;
  height: 30px;
  gap: 4px;
}

/* 自体力バーと敵体力バーはJavaScriptで位置を設定 */
.health-bars-center .health-bar-container {
  position: absolute;
}

.health-bar-vs-icon {
  font-size: 2rem;
  line-height: 1;
  margin: 0;
  display: flex;
  align-items: flex-end;
  height: 30px;
  flex-shrink: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* プレイヤー画像を左右反転（左向きのキャラを右向きに） */
#charImg,
#player-image,
#vs-player-image,
#fx-vs-player-image,
#gr-player-image,
#profile-current-char-img {
  transform: scaleX(-1) !important;
}

/* プロフィール設定画面の画像選択リスト内の画像も反転 */
#profile-char-list img {
  transform: scaleX(-1) !important;
}

.health-bar-container {
  width: 180px;
  height: 30px;
  background: rgba(0,0,0,.4) !important;
  border: 2px solid #000000 !important;
  border-radius: 10px;
  overflow: hidden;
  margin: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
  flex-shrink: 0;
  opacity: 0.7;
  position: relative;
}

.health-bar {
  height: 100%;
  width: 0%; /* 初期値は0%（JavaScriptで設定される） */
  background: linear-gradient(90deg, rgba(46,242,165,.95), rgba(40,182,255,.90)) !important;
  transition: width 0.3s;
  box-shadow: 0 0 18px rgba(40,182,255,.22);
  position: relative;
}

/* プレイヤーの体力バーは右から左に減る */
#player-health-bar,
#vs-player-health-bar,
#gr-player-health-bar {
  margin-left: auto;
}

.health-bar::after {
  content: attr(data-hp);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  font-weight: bold;
  color: #000000;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
}

/* 体力が0の時は数字を非表示 */
.health-bar[data-hp="0"]::after {
  display: none;
}

#question-text, #vs-question-text, #gr-question-text {
  font-size: 1.35rem !important;
  margin: 10px 0 14px;
  display: block;
  padding: 14px 16px;
  border-radius: 14px;
  border: 2px solid #c9a24d !important;
  background: linear-gradient(180deg,#f7f1e3,#ede3cf) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28),
    0 0 36px rgba(180,140,255,.45),
    0 22px 44px rgba(0,0,0,.62) !important;
  color: #3b2f1f !important;
  text-shadow: none !important;
  line-height: 1.35;
  font-weight: 800;
  outline: 1px solid rgba(180,140,255,.70) !important;
  outline-offset: -7px;
  letter-spacing: .03em;
}

.options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative; /* ロックオーバーレイ用 */
}

.options button {
  width: 100%;
  padding: 16px 14px;
  font-size: 1.35rem;
  font-weight: 800;
  border: 2px solid rgba(255,255,255,.28) !important;
  background: linear-gradient(180deg,
      rgba(30,40,70,.95),
      rgba(15,20,45,.95)
    ) !important;
  color: #ffffff !important;
  cursor: pointer;
  height: var(--btn-h-lg);
  min-height: var(--btn-h-lg);
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  border-color: rgba(255,211,77,.45) !important;
  letter-spacing: .02em;
  text-shadow: 0 2px 0 rgba(0,0,0,.45),
    0 0 6px rgba(0,0,0,.35);
  border-left: 6px solid rgba(255,215,120,.85) !important;
  border-right: 6px solid rgba(255,215,120,.85) !important;
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset,
    0 10px 22px rgba(0,0,0,.42);
  transition: transform .08s ease, filter .12s ease, box-shadow .15s ease;
}

/* iPadなどで:hover状態が残る問題を避けるため、:hoverスタイルを削除 */
/* .options button:hover は削除 */

/* 選択肢ロック時：クリックを完全にブロック（マスター/vs/gr共通） */
#options-wrapper.options-locked,
#vs-options-wrapper.options-locked,
#gr-options-wrapper.options-locked {
  pointer-events: none !important;
}

.result-message {
  margin-top: 10px;
  min-height: 2em;
  font-size: 16px;
  text-align: center;
  color: var(--muted);
}

.result-message button {
  margin: 4px 6px;
}

/* 次の問題ボタン：派手な光の点滅 */
@keyframes next-btn-glow {
  0%, 100% {
    box-shadow: 0 0 0 rgba(46, 242, 165, 0);
    filter: brightness(0.75);
  }
  50% {
    box-shadow: 0 0 20px rgba(46, 242, 165, 1),
                0 0 40px rgba(46, 242, 165, 0.8),
                0 0 60px rgba(100, 255, 200, 0.5);
    filter: brightness(1.6);
  }
}

#next-q-btn {
  animation: next-btn-glow 0.9s ease-in-out infinite !important;
  border-color: rgba(46, 242, 165, 0.8) !important;
  background: linear-gradient(180deg, rgba(46, 242, 165, 0.35), rgba(40, 182, 255, 0.2)) !important;
}

#next-q-btn:hover {
  animation: none !important;
  box-shadow: 0 0 25px rgba(46, 242, 165, 0.7);
  filter: brightness(1.2);
}

.practice-actions {
  margin-top: 10px;
  text-align: center;
}

.practice-actions button {
  margin: 4px;
}

/* body.battle-finished .result-message は空ルールのため削除（lint対策） */

body.battle-finished .result-message:empty {
  display: none !important;
}

body.battle-finished .result-message button {
  display: inline-block !important;
  margin: 4px 6px !important;
}

.hidden {
  display: none !important;
}

.menu-vertical {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.status-top {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.status-top .char-frame {
  flex: 0 0 auto;
  width: 120px;
  height: auto;
  margin-top: 0;
  position: relative;
  border-radius: 14px;
  border: 1px solid rgba(255, 211, 77, .55);
  background:
    radial-gradient(120px 90px at 50% 0%, rgba(255, 211, 77, .18), rgba(0,0,0,0) 70%),
    linear-gradient(180deg, rgba(12, 20, 51, .92), rgba(8, 16, 42, .82));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 0 0 1px rgba(0,0,0,.28),
    0 10px 18px rgba(0,0,0,.35);
  overflow: hidden;
  box-sizing: border-box;
}

.status-top .char-frame::before {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  pointer-events: none;
}

.status-top .char-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0));
  pointer-events: none;
}

.status-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}

/* プレイヤー名 */
.status-name {
  font-weight: 700;
  font-size: 1.15rem;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-align: center;
  color: #f5f0d8;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
  letter-spacing: .05em;
  margin: 8px 0;
}

/* status-info 内のボタン */
.status-action-btn {
  width: 100% !important;
  font-size: 0.82em !important;
  padding: 7px 6px !important;
  margin-top: 0 !important;
}

/* プロフィールはガチバトルのキャンセルと同系色（青） */
#profileBtn {
  background: linear-gradient(180deg, rgba(40,182,255,.16), rgba(255,255,255,.06)) !important;
  border-color: rgba(40,182,255,.30) !important;
  color: var(--text) !important;
  font-size: 0.95em !important;
  font-weight: 900 !important;
}

#logoutBtn {
  font-size: 0.95em !important;
}

#achievement-table tbody tr {
  height: 24px !important;
}

#achievement-table td:first-child {
  font-weight: 800;
  padding: 2px 4px !important;
  border: none !important;
  background: transparent !important;
}

#achievement-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  overflow: visible;
  table-layout: fixed;
}

#achievement-table th, #achievement-table td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#achievement-table th {
  background: rgba(255,255,255,.04);
  color: var(--muted);
}

.achv-genre-col {
  width: 30%;
}

.achv-star-col {
  width: 23%;
  text-align: center;
}

.streak-icons {
  display: flex;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
}

.streak-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  border: 1px solid #ccc;
  font-size: 0.72rem;
  line-height: 1;
  background: #fff;
}

.streak-badge-10 {
  border-color: #cd7f32;
}

.streak-badge-20 {
  border-color: #999;
}

.streak-badge-30 {
  border-color: #d4af37;
}

.streak-best {
  display: block;
  margin-top: 2px;
  font-size: 0.72rem;
  color: #666;
}

.streak-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 2px;
  padding: 0 8px;
  font-size: 0.72rem;
  color: #555;
  background: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  height: 26px;
  min-height: 26px;
  line-height: 1;
  overflow: visible;
  z-index: 0;
}

.streak-btn.current {
  color: #777;
  background: #fafafa;
}

.streak-btn:hover {
  background: #eaeaea;
}

.streak-icon {
  display: inline-block;
  line-height: 1;
  position: relative;
  transform-origin: 50% 70%;
  z-index: 2;
}

.streak-icon.tier-coin {
  font-size: 0.6rem;
  transform: translateY(0px) scale(1.2);
}

.streak-icon.tier-medal {
  font-size: 1.2rem;
  transform: translateY(0px) scale(1.2);
}

.streak-icon.tier-trophy {
  font-size: 2.0rem;
  transform: translateY(-4px) scale(1.2);
}

.streak-icon.unplayed {
  filter: grayscale(1);
  opacity: 0.28;
}

.streak-best-num {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: .01em;
  color: #cfd7e6;
  z-index: 1;
}

.streak-best-num.achieved {
  color: #ffe7a8 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.65);
}

.streak-best-num.tier-coin {
  font-size: 0.8rem;
}

.streak-best-num.tier-medal {
  font-size: 1.2rem;
}

.streak-best-num.tier-trophy {
  font-size: 1.8rem;
}

.streak-best-num.tier-coin.low-streak {
  font-size: 0.6rem;
}

.streak-current-num {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 0;
  border: none;
  background: transparent;
  color: #27ae60;
  font-weight: 400;
  font-size: 0.6rem;
  line-height: 1;
  overflow: visible;
  animation: kirarinGlow 1.2s ease-in-out infinite;
}

.streak-current-num::before {
  content: "/";
  display: inline-block;
  margin-right: 3px;
  font-size: 0.5rem;
  font-weight: 400;
}

.streak-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2ecc71;
  box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.35);
  flex: 0 0 auto;
}

.streak-btn.current .streak-live-dot {
  animation: streakPulse 1.8s ease-in-out infinite;
}

#achievement-table tbody td {
  overflow: visible !important;
}

.streak-best-num.tier-coin,
.streak-best-num.tier-medal,
.streak-best-num.tier-trophy {
  transform: translateY(-1px);
  text-shadow: 0 1px 2px rgba(0,0,0,.65);
}

#vs-area {
  margin-top: 1rem;
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}

#vs-settings, #vs-join-room {
  flex: 1 1 320px;
}

.vs-block {
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 8px;
  background: linear-gradient(180deg, rgba(18,26,43,.92), rgba(15,22,38,.92));
  border: 1px solid var(--line);
  box-shadow: var(--shadow2);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.vs-block-settings {
  background: linear-gradient(180deg, rgba(40,182,255,.35), rgba(0,110,220,.20)) !important;
}

.vs-block-create {
  background: linear-gradient(180deg, rgba(40,182,255,.35), rgba(0,110,220,.20)) !important;
}

.vs-block-join {
  background: linear-gradient(180deg, rgba(40,182,255,.35), rgba(0,110,220,.20)) !important;
}

.vs-block-wait {
  background: #f9f9f9;
}

#vs-genre-select {
  width: 100%;
  margin-top: 4px;
  padding: 6px 12px !important;
  font-size: 1.05rem !important;
  font-weight: 700;
  height: 40px;
  line-height: 40px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(27,42,68,.95), rgba(14,22,38,.95)) !important;
  color: #e8eefc !important;
  border: 1px solid rgba(74,163,255,.40) !important;
}

#vs-hp-setting {
  margin-top: 8px;
}

#vs-hp-setting label {
  font-size: 0.9rem;
}

#vs-hp-range, #vs-guest-hp-range {
  width: 100%;
  margin-top: 8px;
  height: 30px;
  touch-action: pan-y;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

#vs-hp-range::-webkit-slider-runnable-track,
    #vs-guest-hp-range::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 999px;
  background: #d0d0d0;
}

#vs-hp-range::-webkit-slider-thumb,
    #vs-guest-hp-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #333;
  margin-top: -9px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

#vs-hp-range::-moz-range-track,
    #vs-guest-hp-range::-moz-range-track {
  height: 10px;
  border-radius: 999px;
  background: #d0d0d0;
}

#vs-hp-range::-moz-range-thumb,
    #vs-guest-hp-range::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #333;
  border: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

.vs-hp-scale {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  margin-top: 2px;
}

#vs-room-display {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
  justify-content: center;
}

.vs-room-digit {
  width: 40px;
  height: 44px;
  border: 2px solid #c9b26a !important;
  text-align: center;
  line-height: 44px;
  font-weight: 900;
  background: #ffffff !important;
  font-size: 1.4rem;
  color: #111 !important;
}

#vs-keypad {
  display: grid;
  grid-template-columns: repeat(3, 52px);
  column-gap: 3px;
  row-gap: 1px;
  margin-bottom: 6px;
  justify-content: center;
}

#vs-keypad button {
  padding: 4px 8px;
  font-size: 1.15rem;
  border-radius: 8px !important;
  border: 1px solid rgba(201,178,106,0.8) !important;
  background: linear-gradient(180deg, rgba(255,211,77,.14), rgba(12,20,51,.35)) !important;
  cursor: pointer;
  height: 40px;
  min-height: 36px;
  font-weight: 600 !important;
  color: var(--text) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), 0 4px 10px rgba(0,0,0,0.35) !important;
  border-color: rgba(255,211,77,.40) !important;
  width: 100%;
}

#vs-keypad button:active {
  box-shadow: inset 0 0 3px rgba(0,0,0,0.2);
  transform: translateY(1px);
}

/* C（全消去）・←（1文字削除）は数字キーと区別できる赤系デザイン */
/* #vs-keypad button の !important (specificity 1,0,1) より高くするため #vs-keypad プレフィックスを付与 */
#vs-keypad #vs-key-clear,
#vs-keypad #vs-key-del {
  background: linear-gradient(180deg, rgba(80,80,100,.40), rgba(20,20,40,.65)) !important;
  border-color: rgba(120,120,160,.50) !important;
  color: rgba(200,200,220,.75) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07), 0 4px 10px rgba(0,0,0,0.40) !important;
  font-size: 1rem !important;
}

#vs-keypad #vs-key-clear:active,
#vs-keypad #vs-key-del:active {
  background: linear-gradient(180deg, rgba(50,50,75,.60), rgba(10,10,30,.75)) !important;
}

.vs-wait-msg {
  margin-top: 8px;
  font-size: 0.85rem;
}

.vs-player-info {
  background: #f0f0f0;
  padding: 8px;
  margin: 6px 0;
  border-radius: 4px;
  border: 1px solid #ccc;
}

.vs-player-info strong {
  color: #333;
}

#vs-room-container {
  display: flex;
  flex-direction: row;
  gap: 12px;
  margin-top: 10px;
}

#vs-room-container .vs-block {
  flex: 1;
}

.vs-shake {
  animation: vs-shake 0.4s;
}

.vs-shake-strong {
  animation: vs-shake-strong 0.5s;
}

.vs-screen-shake {
  animation: vs-screen-shake 0.5s;
}

.vs-screen-shake-strong {
  animation: vs-screen-shake-strong 0.6s;
}

.damage-screen-shake {
  animation: damage-screen-shake 0.8s;
}

.enemy-image-shake {
  animation: enemy-image-shake 0.5s;
}

.defeat-fade-out,
.icon.defeat-fade-out,
#player-image.defeat-fade-out,
#enemy-image.defeat-fade-out,
#vs-player-image.defeat-fade-out,
#vs-enemy-image.defeat-fade-out,
#gr-player-image.defeat-fade-out,
#gr-enemy-image.defeat-fade-out {
  animation: defeat-fade-out 1.2s ease-out forwards !important;
}

#vs-battle-area.damage-screen-shake,
#gr-battle-area.damage-screen-shake {
  animation: damage-screen-shake 0.8s;
}

#enemy-image.enemy-image-shake,
#vs-enemy-image.enemy-image-shake,
#gr-enemy-image.enemy-image-shake {
  animation: enemy-image-shake 0.5s;
}

/*
  .vs-flash::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.8);
  animation: vs-flash 0.2s;
  pointer-events: none;
}
*/

#vs-player-health-bar, #vs-enemy-health-bar {
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  color: #ffffff;
  line-height: 1.4;
}

#gr-player-health-bar, #gr-enemy-health-bar {
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  color: #ffffff;
  line-height: 1.4;
}

#versus-area, #vs-battle-area, #vs-root,
    #gachi-area, #gachi-battle-area,
    #battleArea, #battle-area {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
}

.fullscreen, .is-fullscreen, .vs-fullscreen, .gachi-fullscreen {
  position: relative !important;
  width: auto !important;
  height: auto !important;
  inset: auto !important;
}

html, body {
  overflow: auto !important;
  max-width: 100%;
  overflow-x: hidden;
  background: radial-gradient(900px 700px at 18% 15%, rgba(40,182,255,.22), transparent 60%),
    radial-gradient(900px 700px at 80% 25%, rgba(255,77,109,.18), transparent 60%),
    radial-gradient(900px 700px at 60% 85%, rgba(46,242,165,.14), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  color: var(--text);
}

.battle-panel {
  overflow-x: hidden;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  position: relative !important;
}

#versus-area, #vs-battle-area, #vs-root,
    #gachi-area, #gachi-battle-area,
    #battleArea, #battle-area,
    .vs-container, .vs-battle, .gachi-container {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

#versus-area *, #vs-battle-area *, #gachi-area *, #gachi-battle-area * {
  box-sizing: border-box;
  max-width: 100%;
}

#versus-area img, #vs-battle-area img, #gachi-area img, #gachi-battle-area img {
  height: auto;
  max-width: 100%;
}

#versus-area #vs-area {
  display: flex !important;
  flex-direction: row !important;
  gap: 16px;
  align-items: flex-start;
}

#versus-area #vs-settings, #versus-area #vs-join-room {
  flex: 1 1 0;
  margin-bottom: 0 !important;
}

.vs-level-btn {
  pointer-events: auto;
  position: relative;
  z-index: 3;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
}

.vs-level-btn.selected {
  outline: none !important;
  background: linear-gradient(180deg, rgba(0,123,255,0.95), rgba(0,70,160,0.95)) !important;
  color: #ffffff !important;
  border: 2px solid rgba(255,255,255,0.45) !important;
  box-shadow: 0 0 0 2px rgba(0,123,255,0.35), 0 6px 14px rgba(0,0,0,0.35) !important;
}

.vs-hp-buttons {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  width: 100%;
  max-width: 100%;
  flex-wrap: nowrap;
  justify-content: flex-start;
  box-sizing: border-box;
}

.vs-hp-btn {
  pointer-events: auto;
  position: relative;
  z-index: 5;
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 2px;
  font-size: 1.2rem;
  font-weight: bold;
  border-radius: 8px;
  border: 2px solid #333;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.75),
    rgba(210,210,210,0.65)
  ) !important;
  cursor: pointer;
  color: #333 !important;
  opacity: 0.45;
  border-color: rgba(0,0,0,0.35) !important;
  text-align: center;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vs-hp-btn.selected {
  background: #333;
  color: #fff !important;
  opacity: 1;
  border: 2px solid rgba(255,255,255,.35) !important;
  box-shadow: 0 0 0 2px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.35),
    0 10px 18px rgba(0,0,0,.30);
}

.vs-hp-btn:active {
  transform: scale(0.97);
}

.char-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 130px;
  border: 1px dashed rgba(214,179,93,.40);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(214,179,93,.08), rgba(0,0,0,0));
  color: var(--muted);
  margin-top: 8px;
  text-align: center;
  font-size: 0.9rem;
}

:root {
  --bg0: #050514;
  --bg1: #0b1030;
  --panel: #0c1433;
  --panel2: #08102a;
  --line: rgba(255,255,255,.12);
  --line2: rgba(255,255,255,.18);
  --text: #eff4ff;
  --muted: rgba(239,244,255,.72);
  --gold: #ffd34d;
  --gold2: #ff9f1a;
  --red: #ff4d6d;
  --blue: #28b6ff;
  --green: #2ef2a5;
  --radius: 14px;
  --radius2: 12px;
  --shadow: 0 18px 40px rgba(0,0,0,.45);
  --shadow2: 0 8px 18px rgba(0,0,0,.35);
  --fs-base: 18px;
  --fs-small: 14px;
  --fs-h2: 18px;
  --fs-h3: 16px;
  --btn-h: 44px;
  --btn-h-lg: 56px;
  --ui-bg: #18457a;
  --ui-bg2: #1b5aa3;
  --ui-panel: rgba(255,255,255,.12);
  --ui-panel2: rgba(0,0,0,.05);
  --ui-accent: #7dfcff;
  --ui-accent2: #ffe39c;
  --ui-gold: #ffe39c;
  --ui-text: #ffffff;
  --ui-muted: rgba(255,255,255,.86);
  --practice-judge-size: min(46vw, 320px);
  --practice-judge-stroke: 60px;
  --practice-judge-stroke-maru: var(--practice-judge-stroke);
  --practice-judge-stroke-batu: var(--practice-judge-stroke);
  --fx-size: min(70vw, 550px);
  --fx-stroke: 35px;
  --fx-dur: 0.6s;
  --fx-linecap: round;
  --fx-ok: rgba(255,30,120,.85);
  --fx-ng: rgba(70,50,255,.85);
  --fx-draw: rgba(255,95,162,.98);
}

* {
  box-sizing: border-box;
}

.box,
.battle-area {
  background: linear-gradient(180deg, rgba(18,26,43,.95), rgba(15,22,38,.95));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
}

h3 {
  font-size: var(--fs-h3);
  margin: 12px 0 8px 0;
  letter-spacing: .02em;
}

button:active {
  transform: translateY(1px);
}

button:hover {
  filter: brightness(1.12) saturate(1.06) !important;
}

.menu-vertical button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  position: relative;
  overflow: hidden;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: .04em;
  will-change: transform, filter;
  box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset,
    0 10px 22px rgba(0,0,0,.42);
}

/* ミュート：丸いピル型・固定幅（色・光彩は現行のまま） */
.menu-vertical button#menuMuteBtn.menu-mute-control {
  box-sizing: border-box;
  width: min(100%, 14rem);
  min-width: 0;
  align-self: center;
  margin-top: 0.45rem;
  padding: 0.5rem 1.15rem;
  gap: 0.35em;
  justify-content: center;
  font-size: 1.02rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  white-space: nowrap;
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(
    168deg,
    rgba(42, 58, 92, 0.88) 0%,
    rgba(18, 26, 44, 0.94) 48%,
    rgba(10, 14, 26, 0.97) 100%
  ) !important;
  border: 1px solid rgba(100, 170, 255, 0.28) !important;
  border-bottom-color: rgba(0, 0, 0, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    inset 0 -2px 6px rgba(0, 0, 0, 0.28),
    0 4px 14px rgba(0, 0, 0, 0.42),
    0 0 28px rgba(74, 163, 255, 0.12) !important;
  color: rgba(236, 242, 255, 0.96);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  will-change: auto;
}

.menu-vertical button#menuMuteBtn.menu-mute-control::before {
  display: none;
}

.menu-vertical button#menuMuteBtn.menu-mute-control::after {
  display: none;
}

.menu-vertical button#menuMuteBtn.menu-mute-control:hover {
  filter: brightness(1.07) saturate(1.05) !important;
  border-color: rgba(130, 200, 255, 0.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -2px 6px rgba(0, 0, 0, 0.26),
    0 5px 18px rgba(0, 0, 0, 0.45),
    0 0 32px rgba(74, 163, 255, 0.18) !important;
}

.menu-vertical button#menuMuteBtn.menu-mute-control.menu-mute-active {
  filter: brightness(1) saturate(1.06) !important;
  background: linear-gradient(
    168deg,
    rgba(88, 42, 52, 0.92) 0%,
    rgba(52, 22, 30, 0.95) 50%,
    rgba(28, 12, 18, 0.98) 100%
  ) !important;
  border-style: solid !important;
  border-color: rgba(255, 140, 118, 0.5) !important;
  border-bottom-color: rgba(0, 0, 0, 0.5) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 210, 0.15),
    inset 0 -2px 8px rgba(0, 0, 0, 0.35),
    0 4px 16px rgba(0, 0, 0, 0.5),
    0 0 26px rgba(255, 100, 80, 0.14) !important;
  color: #fff;
}

.menu-vertical button#menuMuteBtn.menu-mute-control.menu-mute-active:hover {
  filter: brightness(1.06) saturate(1.08) !important;
  border-color: rgba(255, 165, 140, 0.62) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 220, 0.18),
    inset 0 -2px 8px rgba(0, 0, 0, 0.32),
    0 5px 18px rgba(0, 0, 0, 0.52),
    0 0 30px rgba(255, 110, 90, 0.2) !important;
}

/* .status-info div ルールは .status-name に統合 */

#player-name,#enemy-name,#vs-player-name,#vs-enemy-name,#gr-player-name,#gr-enemy-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  font-weight: 900;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
  text-shadow: 
    0 0 8px rgba(0, 0, 0, 0.9),
    0 0 12px rgba(0, 0, 0, 0.8),
    0 0 16px rgba(0, 0, 0, 0.7),
    2px 2px 4px rgba(0, 0, 0, 0.9),
    -1px -1px 2px rgba(0, 0, 0, 0.8),
    1px -1px 2px rgba(0, 0, 0, 0.8),
    -1px 1px 2px rgba(0, 0, 0, 0.8),
    0 2px 8px rgba(0, 0, 0, 0.6);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}

.health-bar.hp-green {
  background: linear-gradient(
    90deg,
    rgba(120,255,170,.98),
    rgba(20,120,60,.98)
  );
}

.health-bar.hp-yellow {
  background: linear-gradient(
    90deg,
    rgba(255,235,120,.98),
    rgba(190,140,0,.98)
  );
}

.health-bar.hp-red {
  background: linear-gradient(
    90deg,
    rgba(255,120,120,.98),
    rgba(150,20,20,.98)
  );
}

.streak-btn, .streak-badge, .streak-best {
  font-size: 13px;
}

select, input[type="text"], input[type="number"] {
  background: rgba(0,0,0,.25);
  color: var(--text);
  border: 1px solid var(--line2);
  border-radius: 10px;
  padding: 10px 10px;
  font-size: 16px;
  outline: none;
}

select:focus, input:focus {
  border-color: rgba(74,163,255,.55);
  box-shadow: 0 0 0 3px rgba(74,163,255,.15);
}

#vs-room-digit {
  border: 1px solid rgba(214,179,93,.55);
  background: rgba(0,0,0,.22);
  color: var(--text);
}

.status-badge {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 6px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #f5f0d8;
  background: linear-gradient(180deg, #2b3550, #1a2136);
  border: 1px solid #c9b26a;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15),
        0 2px 4px rgba(0,0,0,0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

#vs-settings h2,
#vs-join-room h2 {
  display: block;
  width: fit-content;
  padding: 5px 10px;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: .02em;
  margin: 0 auto 8px;
  border: 1px solid rgba(74,163,255,.40);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.10));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 4px 10px rgba(0,0,0,.28);
  white-space: nowrap;
}

.vs-setting-label,
#vs-settings label[for="vs-genre-select"] {
  display: block;
  margin: 10px 0 6px 0;
  font-size: 1.05rem !important;
  font-weight: 800;
  color: #e8eefc;
  letter-spacing: .02em;
}

#vs-settings .vs-setting-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
}

#vs-settings .vs-setting-row .vs-setting-label {
  margin: 0;
  flex: 0 0 74px;
  white-space: nowrap;
}

#vs-settings .vs-setting-row #vs-genre-select {
  margin-top: 0;
  flex: 1 1 auto;
  width: auto;
}

#vs-level-list {
  display: flex;
  gap: 6px;
  flex: 1 1 auto;
}

#vs-level-list .vs-level-btn {
  margin-top: 0;
  min-height: 46px !important;
  height: 46px !important;
  padding: 8px 10px !important;
  font-size: 1rem !important;
}

#vs-hp-setting {
  margin-top: 0;
}

#vs-hp-setting #vs-hp-buttons {
  margin-top: 0;
  flex: 1 1 auto;
}

#vs-settings #vs-hp-buttons .vs-hp-btn {
  height: 46px !important;
  min-height: 46px !important;
  padding: 6px 2px !important;
  font-size: 1.05rem !important;
}

.vs-hp-btn.selected[data-hp="1"] {
  background: linear-gradient(180deg, rgba(255,120,120,.98), rgba(150,20,20,.98)) !important;
}

.vs-hp-btn.selected[data-hp="2"] {
  background: linear-gradient(180deg, rgba(255,235,120,.98), rgba(190,140,0,.98)) !important;
  color: #1b1b1b !important;
}

.vs-hp-btn.selected[data-hp="3"],
.vs-hp-btn.selected[data-hp="4"],
.vs-hp-btn.selected[data-hp="5"] {
  background: linear-gradient(180deg, rgba(120,255,170,.98), rgba(20,120,60,.98)) !important;
}

#vs-genre-select option {
  background: #0e1626;
  color: #f5f0d8;
  font-size: 1.05rem;
}

#vs-genre-select option:checked,
    #vs-genre-select option:hover {
  background: #1f6fd1;
  color: #ffffff;
}

.box, .battle-area, .vs-block {
  background: linear-gradient(180deg, rgba(12,20,51,.92), rgba(8,16,42,.92)) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow2) !important;
}

/* 「対戦設定」「ルームに入室」だけは明るめの青（後勝ちで確実に反映） */
#vs-settings.vs-block,
#vs-join-room.vs-block {
  /* 暗めの透明感（下地を活かしつつ、うっすら青み） */
  background:
    radial-gradient(900px 420px at 25% 15%, rgba(40,182,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(12,20,51,.55), rgba(8,16,42,.40)) !important;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.32) !important;
}

#vs-wait-area h2, #gachi-area h2 {
  text-shadow: 0 0 12px rgba(40,182,255,.25);
}

#vs-wait-area .vs-wait-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 6px 0 12px;
  padding: 12px 16px;
  border: 1px solid rgba(74,163,255,.38);
  background: linear-gradient(180deg, rgba(40,182,255,.20), rgba(0,0,0,.18));
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.10);
}

#vs-wait-area .vs-wait-room {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

#vs-wait-area .vs-wait-room .label {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: .02em;
  opacity: .98;
  color: #e8eefc;
}

#vs-wait-area .vs-wait-room .value {
  font-size: 2.75rem;
  font-weight: 900;
  letter-spacing: .08em;
  color: #ffffff;
  text-shadow: 0 0 18px rgba(40,182,255,.35), 0 3px 8px rgba(0,0,0,.40);
}

#vs-wait-area .vs-wait-badges {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

#vs-wait-area .vs-wait-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(74,163,255,.34);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.18));
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset;
}

#vs-wait-area .vs-wait-badge .k {
  font-size: .9rem;
  font-weight: 700;
  opacity: .95;
}

#vs-wait-area .vs-wait-badge .v {
  font-size: 1.08rem;
  font-weight: 800;
}

#vs-wait-area {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

#vs-wait-area .vs-wait-players {
  display: flex;
  gap: 14px;
  align-items: stretch;
  justify-content: space-between;
  margin-top: 10px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

#vs-wait-area .vs-wait-player {
  flex: 1 1 0;
  min-width: 0;
  min-height: 200px;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.20);
  box-shadow: 0 12px 26px rgba(0,0,0,.22);
  overflow: visible;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 124px 1fr;
  grid-template-areas:
    "image title"
    "image info";
  align-items: start;
  column-gap: 12px;
  row-gap: 8px;
}

#vs-wait-area .vs-wait-player.self {
  background: linear-gradient(180deg, rgba(46,242,165,.14), rgba(0,0,0,.20));
  border-color: rgba(46,242,165,.24);
}

#vs-wait-area .vs-wait-player.enemy {
  background: linear-gradient(180deg, rgba(255,211,77,.10), rgba(0,0,0,.20));
  border-color: rgba(255,211,77,.22);
  transition: all 0.3s ease;
}

#vs-wait-area .vs-wait-player.enemy.ready-glow {
  background: linear-gradient(180deg, rgba(255,211,77,.25), rgba(0,0,0,.20));
  border-color: rgba(255,211,77,.50);
  box-shadow: 0 0 20px rgba(255,211,77,.40), 0 12px 26px rgba(0,0,0,.22);
  animation: enemyReadyGlow 1.5s ease-in-out infinite;
}

@keyframes enemyReadyGlow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(255,211,77,.40), 0 12px 26px rgba(0,0,0,.22);
  }
  50% {
    box-shadow: 0 0 30px rgba(255,211,77,.60), 0 12px 26px rgba(0,0,0,.22);
  }
}

#vs-wait-area .vs-wait-player .title {
  grid-area: title;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 0;
  min-width: 0;
}

#vs-wait-area .vs-wait-player .title .who {
  font-weight: 800;
  letter-spacing: .02em;
}

#vs-wait-area .vs-wait-player .meta {
  font-size: .9rem;
  opacity: .9;
}

#vs-wait-area .vs-wait-kv {
  grid-area: info;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  margin-top: 0;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

#vs-wait-area .vs-wait-kv .v {
  overflow: hidden;
  word-break: break-word;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  font-size: 1.05rem;
  font-weight: 800;
  color: rgba(255,255,255,.98);
  text-shadow: 0 0 14px rgba(0,0,0,.35);
}

.vs-wait-player-image {
  grid-area: image;
  width: 124px;
  height: 124px;
  object-fit: contain;
  margin: 0;
  display: block;
  border-radius: 8px;
  background: rgba(0,0,0,.20);
  padding: 6px;
  border: 1px solid rgba(255,255,255,.14);
}

/* ★自分の画像は左右反転して右向きにする */
#vs-wait-host-image,
#vs-wait-guest-self-image {
  transform: scaleX(-1);
}

/* ★ホスト側の待機画面では、自分の体力ボタンをクリック不可（表示のみ） */
#vs-wait-host-hp-buttons .vs-hp-btn {
  pointer-events: none;
  opacity: 0.7;
  cursor: default;
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 2px;
}

/* ★ホスト側の待機画面では、相手（ゲスト）の体力ボタンをクリック不可（表示のみ） */
#vs-wait-guest-hp-buttons .vs-hp-btn {
  pointer-events: none;
  opacity: 0.7;
  cursor: default;
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 2px;
}

/* ★ゲスト側の待機画面では、相手（ホスト）の体力ボタンをクリック不可（表示のみ） */
#vs-wait-host-hp-buttons-guest .vs-hp-btn {
  pointer-events: none;
  opacity: 0.7;
  cursor: default;
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 2px;
}

#vs-wait-area .vs-wait-kv .k {
  font-size: .85rem;
  opacity: .85;
}

#vs-wait-area .vs-wait-kv .v {
  font-size: 1.05rem;
  font-weight: 800;
  color: rgba(255,255,255,.98);
  text-shadow: 0 0 14px rgba(0,0,0,.35);
}

#vs-wait-area .vs-wait-kv .vs-hp-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin-top: 2px;
}

#vs-wait-area .vs-wait-kv .vs-hp-label {
  font-size: .9rem;
  font-weight: 700;
  opacity: .92;
}

#vs-wait-area .vs-wait-kv .vs-hp-value {
  font-size: 1.5rem;
  line-height: 1.1;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 0 12px rgba(40,182,255,.35), 0 2px 6px rgba(0,0,0,.45);
}

#vs-wait-area .hp-buttons-hidden {
  display: none !important;
}

#vs-wait-area .vs-wait-actions {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

#vs-wait-area .vs-wait-msg {
  text-align: center;
  margin-top: 10px;
  opacity: .92;
}

#vs-host-start-btn {
  display: block;
  margin: 14px auto 0;
  width: 100%;
  max-width: 300px;
}

.panel, .card, .vs-area, #right-panel, .content-panel, .main-panel {
  background: linear-gradient(180deg, var(--ui-panel), var(--ui-panel2)) !important;
  border-color: rgba(255,255,255,.18) !important;
}

h1, h2, h3, .section-title {
  color: var(--ui-text) !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}

button, .btn, .primary, .menu-btn {
  border-color: rgba(255,255,255,.20) !important;
}

button:hover, .btn:hover, .primary:hover, .menu-btn:hover {
  box-shadow: 0 0 0 2px rgba(255,255,255,.10), 0 10px 25px rgba(0,0,0,.25);
  filter: brightness(1.06);
}

.primary, .menu-btn.active, .streak-btn.current {
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.10)) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.20), 0 0 18px rgba(74,163,255,.22);
}

.primary {
  border-color: rgba(74,163,255,.40) !important;
}

.small, .muted, .hint, .help-text {
  color: var(--ui-muted) !important;
}

.vs-wait-roomcard {
  border: 1px solid rgba(255,255,255,.20);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.10));
}

.vs-wait-roomno-value {
  color: var(--ui-text);
  text-shadow: 0 2px 14px rgba(0,0,0,.40);
}

.vs-wait-pill {
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.16);
}

.vs-wait-player.vs-self {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.22), 0 0 18px rgba(74,163,255,.18);
}

.vs-wait-player.vs-opp {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.22), 0 0 18px rgba(255,180,74,.15);
}

.menu-vertical button::before {
  content: "";
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  line-height: 1.25em;
  text-align: center;
  transition: transform .18s ease, filter .18s ease;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.45));
}

#menuHomeBtn::before {
  content: "🏠";
}

#menuGachiBtn::before {
  content: "👑";
}

#menuPracticeBtn::before {
  content: "📜";
}

#menuFreeBtn::before {
  content: "⚔️";
}

.menu-vertical button::after {
  content: "";
  position: absolute;
  inset: -60% -70%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(105deg,
      transparent 40%,
      rgba(255,255,255,.32) 46%,
      rgba(255,255,255,.06) 52%,
      transparent 58%),
    
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.07) 0px,
      rgba(255,255,255,.07) 1px,
      transparent 1px,
      transparent 6px);
  transform: translateX(-120%) rotate(8deg);
  filter: blur(.2px);
}

.menu-vertical button.is-active {
  outline: none !important;
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.22) inset,
    0 0 0 3px rgba(255,255,255,.14),
    0 0 20px rgba(255,255,255,.14),
    0 16px 36px rgba(0,0,0,.55) !important;
}

#single-battle-area,
#vs-battle-area,
#gr-battle-area {
  position: relative;
}

#fx-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}

#fx-flash {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
  filter: saturate(1.25) contrast(1.05);
  z-index: 2147483647; /* 最大 */
  background: radial-gradient(1200px 600px at 50% 45%, rgba(255,255,255,1), transparent 60%),
    linear-gradient(180deg, rgba(255,60,60,.70), rgba(120,0,0,.45));
}

#fx-symbol, #fx-result {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

#fx-flash.correct-flash {
  background: linear-gradient(to bottom,
      rgba(255,255,255,1) 0%,
      rgba(255,200,230,.95) 15%,
      rgba(255,180,220,.90) 30%,
      rgba(255,160,210,.85) 50%,
      rgba(255,140,200,.80) 70%,
      rgba(255,120,190,.75) 85%,
      rgba(255,100,180,.70) 100%) !important;
  animation: correctFlash .35s ease-out 1;
}

#fx-flash.wrong-flash {
  background: linear-gradient(to bottom,
      rgba(255,255,255,1) 0%,
      rgba(170,220,255,.95) 15%,
      rgba(140,200,255,.90) 30%,
      rgba(120,180,255,.85) 50%,
      rgba(100,160,255,.80) 70%,
      rgba(80,140,255,.75) 85%,
      rgba(60,120,255,.70) 100%) !important;
}

#menuGachiBtn {
  background: linear-gradient(180deg, rgba(210,60,60,.98), rgba(130,20,20,.98)) !important;
  border-color: rgba(255,255,255,.40) !important;
  color: #fff !important;
}

#menuFreeBtn {
  background: linear-gradient(180deg, rgba(0,110,220,.98), rgba(0,60,140,.98)) !important;
  border-color: rgba(255,255,255,.38) !important;
  color: #fff !important;
}

#menuPracticeBtn {
  background: linear-gradient(180deg, rgba(40,170,110,.98), rgba(20,110,70,.98)) !important;
  border-color: rgba(255,255,255,.38) !important;
  color: #fff !important;
}

.menu-vertical button:active {
  transform: translateY(2px);
}

#home-area .menu-vertical.home-actions button.primary {
  width: auto;
  min-width: 200px;
}

#home-area .menu-vertical.home-actions button.primary.home-action {
  font-size: 1.28rem;
  padding: 14px 18px;
}

#homeOpenGachiBtn::before {
  content: "👑";
}

#homeOpenMasterBtn::before {
  content: "📜";
}

#homeOpenFreeBtn::before {
  content: "⚔️";
}

#home-area .menu-vertical .gachi-btn {
  background: linear-gradient(180deg, #c43a3a, #7e1f1f) !important;
}

#home-area .menu-vertical .master-btn {
  background: linear-gradient(180deg, #2fa36b, #1b6b45) !important;
}

#home-area .menu-vertical .free-btn {
  background: linear-gradient(180deg, #1f6fd1, #143e7a) !important;
}

#home-area .rank-num {
  font-size: 4em;
  white-space: nowrap;
  line-height: 1;
}

/* ガチバトル画面の「総合順位」もホームと同じ見た目（枠の幅は現状のまま） */
#gachi-rank-box .rank-num {
  font-size: 4em;
  white-space: nowrap;
  line-height: 1;
}

#gachi-rank-box .rank-sub {
  font-size: 14px;
  opacity: .85;
  font-weight: 800;
}

/* ガチバトル：ボタン下のステータス文言は非表示 */
#gachiStatus {
  display: none !important;
}

/* ガチバトル：マッチング開始/キャンセルボタン */
#gachiJoinBtn {
  height: auto !important;
  min-height: 64px !important;
  padding: 18px 18px !important;
  font-size: 1.15rem !important;
  border-radius: 14px !important;
}

#gachiCancelBtn {
  height: auto !important;
  min-height: 48px !important;
  padding: 10px 18px !important;
  font-size: 1.15rem !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(40,182,255,.16), rgba(255,255,255,.06)) !important;
  border-color: rgba(40,182,255,.30) !important;
  color: var(--text) !important;
}

/* ガチバトル：マッチング中人数（ボタン直上・かっこ良く目立つ） */
.gachi-matching-count {
  text-align: center;
  margin: 14px 0 8px 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(46, 242, 165, 0.98);
  text-shadow: 0 0 14px rgba(46, 242, 165, 0.5),
    0 0 28px rgba(46, 242, 165, 0.25),
    0 2px 4px rgba(0, 0, 0, 0.4);
}
.gachi-matching-count #gachi-matching-count-num {
  font-size: 1.4em;
  font-weight: 900;
  margin: 0 2px;
  color: #fff;
  text-shadow: 0 0 16px rgba(46, 242, 165, 0.8),
    0 0 32px rgba(40, 182, 255, 0.4);
}

/* ガチバトル：マッチング開始/キャンセルボタンをセンタリング */
#gachi-matching-count + div {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 10px 0 6px 0 !important;
}

/* ガチバトル終了後：「もう一度マッチング」ボタンをセンタリング */
.gachi-result-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  text-align: center;
}

#gachiResultPanel #gachiRematchBtn,
#gachiResultPanel #gachiBackBtn {
  display: inline-block !important;
  margin: 0 !important;
}

/* バトル画面に動的挿入される再マッチングボタンも中央寄せ */
#vs-rematch-btn {
  display: block !important;
  margin: 12px auto 0 auto !important;
}

/* バトル開始系ボタン専用の点滅エフェクト */
@keyframes battleStartPulse {
  0%, 100% { opacity: 0; transform: scale(1); }
  15% { opacity: 0.55; transform: scale(1.015); }
  30% { opacity: 0; transform: scale(1); }
  55% { opacity: 0.55; transform: scale(1.015); }
  70% { opacity: 0; transform: scale(1); }
}

#gachiJoinBtn,
#homeGachiMatchBtn,
#homeMasterRoadBtn,
#btn-denkok-master,
#vs-create-room-btn,
#vs-join-room-btn,
#vs-host-start-btn,
#vs-guest-ready-btn {
  position: relative !important;
  overflow: visible !important;
  background: linear-gradient(180deg, rgba(255,92,118,.30), rgba(255,255,255,.08)) !important;
  border-color: rgba(255,92,118,.52) !important;
  color: #fff !important;
  box-shadow: 0 0 16px rgba(255,88,110,.26), 0 12px 26px rgba(0,0,0,.32) !important;
}

#gachiJoinBtn {
  font-size: 1.28rem !important;
  letter-spacing: .04em !important;
  transition: none !important;
}

#gachiJoinBtn::after,
#homeGachiMatchBtn::after,
#homeMasterRoadBtn::after,
#btn-denkok-master::after,
#vs-create-room-btn::after,
#vs-join-room-btn::after,
#vs-host-start-btn::after,
#vs-guest-ready-btn::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 14px;
  border: 2px solid rgba(255,120,135,.38);
  box-shadow: 0 0 12px rgba(255,88,110,.36), 0 0 22px rgba(255,88,110,.20);
  opacity: 0;
  pointer-events: none;
  animation: battleStartPulse 2.4s ease-in-out infinite;
}

/* マッチング中は点滅を止めて「点灯」させる */
#gachiJoinBtn.is-matching::after,
#gachiJoinBtn:disabled::after {
  animation: none;
  opacity: 0.35;
}

#gachiJoinBtn.is-matching,
#gachiJoinBtn:disabled {
  box-shadow: 0 0 14px rgba(255,88,110,.24), 0 12px 26px rgba(0,0,0,.32) !important;
  filter: brightness(1.05) !important;
  opacity: 1 !important;
}

#gachiJoinBtn[data-matching="1"] {
  box-shadow: 0 0 14px rgba(255,88,110,.24), 0 12px 26px rgba(0,0,0,.32) !important;
  filter: brightness(1.05) !important;
  outline: 2px solid rgba(255,120,135,.34) !important;
  outline-offset: 2px !important;
}

/* マスターモード現在のステージ表示は少し小さく */
#home-master-current-stage-display {
  font-size: 2em !important;
  line-height: 1.2;
  white-space: normal;
}

/* ホーム画面：伝国マスター○人目＋トロフィー（右側） */
#home-master-current-stage-display .home-stage-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
}
#home-master-current-stage-display .home-stage-lines {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#home-master-current-stage-display .home-stage-line {
  display: block;
  white-space: nowrap;
}
#home-master-current-stage-display .home-stage-icon {
  font-size: 2em;
  line-height: 1;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

/* マスターモード画面の現在のステージ表示（ホーム画面と同じスタイル） */
.master-current-stage.home-rank-box {
  width: 100%;
  min-height: 110px;
  padding: 12px 10px;
  flex: none !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.master-current-stage .rank-center {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto;
  text-align: center;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.master-current-stage .home-master-title {
  flex-shrink: 0;
  margin-top: 2px;
  margin-bottom: 6px;
}

.master-current-stage #master-current-stage-display {
  flex: none !important;
  flex-shrink: 0;
  font-size: 2em !important;
  line-height: 1.2;
  white-space: nowrap;
  display: block !important;
  margin: 0;
}

/* マスターモードのタイトル行の高さを固定 */
.home-master-title {
  min-height: 1.2em;
  line-height: 1.2;
}

#theme-override ~ .container .status-panel .menu-vertical #menuGachiBtn,
#theme-override ~ .container .status-panel .menu-vertical #menuFreeBtn,
#theme-override ~ .container .status-panel .menu-vertical #menuPracticeBtn {
  background-clip: padding-box !important;
}

.status-panel h2 {
  font-size: 0.95rem !important;
  letter-spacing: .08em;
  opacity: .85;
  margin-bottom: 8px;
}

.options button.choice-picked {
  /* ボタン全体の背景色は変更せず、枠だけを光らせる */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14),
    0 0 0 4px rgba(125,252,255,.65),
    0 0 12px rgba(125,252,255,.45),
    0 14px 30px rgba(0,0,0,.38) !important;
  border-color: rgba(160,210,255,.95) !important;
  border-left-color: rgba(255,240,170,.95) !important;
  border-right-color: rgba(255,240,170,.95) !important;
  /* backgroundは変更しない（枠だけ光る） */
}

.options button.correct-answer {
  /* 正解ボタンに透明感のある深い赤の背景色を付ける（背景の暗い青が透けて見える） */
  background: linear-gradient(180deg,
      rgba(185, 34, 79, 0.729),
      rgba(133, 23, 56, 0.729)
    ) !important;
}

.options button:focus {
  outline: none !important;
}

.options button:focus:not(:focus-visible) {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 12px 26px rgba(0,0,0,.32) !important;
}

.options button:focus-visible {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12),
    0 0 0 3px rgba(125,252,255,.18),
    0 14px 30px rgba(0,0,0,.38) !important;
}

#mode-display, #vs-mode-display, #gr-mode-display, #genre-display,
#level-display, #vs-level-display, #gr-level-display {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35em;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.75));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35),
    0 10px 22px rgba(0,0,0,.35);
  line-height: 1;
  white-space: nowrap;
}

#mode-display, #vs-mode-display, #gr-mode-display, #genre-display {
  font-weight: 900;
  font-size: 0.95rem;
  letter-spacing: .05em;
  color: rgba(255,255,255,.96);
  text-shadow: 0 2px 12px rgba(0,0,0,.40);
}

#level-display, #vs-level-display, #gr-level-display {
  margin-top: 6px;
  font-weight: 900;
  font-size: 0.9rem;
  letter-spacing: .05em;
  color: rgba(255,255,255,.96);
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
  border-color: rgba(255,255,255,.22);
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.75));
}

.fx-symbol {
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  opacity: 0;
  font-size: min(26vw, 220px) !important;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 20px 50px rgba(0,0,0,.75),
    0 0 60px currentColor !important;
  filter: drop-shadow(0 12px 26px rgba(0,0,0,.50));
  pointer-events: none !important;
}

.fx-symbol.maru {
  color: #ff1f8f !important;
  text-shadow: none !important;
  font-size: initial !important;
  font-weight: 900;
  transform-style: preserve-3d;
  position: absolute;
}

.fx-symbol.batu {
  color: #2e8cff !important;
  text-shadow: none !important;
  transform-style: preserve-3d;
  font-size: initial !important;
}

.fx-pop {
  animation: fxPop .42s cubic-bezier(.2,.9,.2,1) 1;
}


/* ============================================================
   FX画面共通：物理的に画面全体を支配する（最小限の設定）
   ============================================================ */
.fx-vs-screen,
.fx-result {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  z-index: 2147483647 !important;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  overflow: hidden !important;
  /* ★重要：親要素の transform/filter を無効化（但し内部要素には影響させない） */
  transform: none !important;
  filter: none !important;
}

.fx-vs-screen.show,
.fx-result.show {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ============================================================
   VS画面：個別スタイル（レイアウトを復元）
   ============================================================ */
.fx-vs-screen {
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fx-vs-screen.show {
  /* 衝撃の瞬間に画面全体を揺らす */
  animation: vsGlobalShake 0.4s ease-in-out 0.3s 1;
}

@keyframes vsGlobalShake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-10px, 8px); }
  30% { transform: translate(10px, -8px); }
  50% { transform: translate(-5px, 4px); }
  70% { transform: translate(5px, -4px); }
}

.fx-vs-letterbox {
  position: absolute;
  left: 0;
  width: 100%;
  height: 0;
  background: #000;
  z-index: 200;
  transition: height 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
.fx-vs-letterbox-top { top: 0; border-bottom: 2px solid #ff3c00; box-shadow: 0 0 20px rgba(255,60,0,0.5); }
.fx-vs-letterbox-bottom { bottom: 0; border-top: 2px solid #ff3c00; box-shadow: 0 0 20px rgba(255,60,0,0.5); }
.fx-vs-screen.show .fx-vs-letterbox { height: 12vh; }

.fx-vs-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 10vw;
  width: 100%;
  height: 100%;
  z-index: 150;
  overflow: hidden;
  will-change: transform;
}

.fx-vs-screen.show .fx-vs-content {
  animation: vsContentZoomOut 4s cubic-bezier(0.1, 1, 0.2, 1) forwards;
}

@keyframes vsContentZoomOut {
  0% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.fx-vs-player-section,
.fx-vs-enemy-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 42%;
  opacity: 0;
  will-change: transform, opacity;
}

/* 「バシューン！」登場アニメーション（自キャラ：左から） */
.fx-vs-screen.show .fx-vs-player-section {
  animation: vsEntryPlayerBashuunEnhanced 0.3s cubic-bezier(0.1, 1.2, 0.2, 1) 0.1s forwards;
}

@keyframes vsEntryPlayerBashuunEnhanced {
  0% { 
    opacity: 0; 
    transform: translateX(-120vw) scale(2) skewX(-20deg) rotate(-5deg); 
    filter: brightness(20) blur(20px); 
  }
  60% {
    opacity: 1;
    transform: translateX(5vw) scale(1.1) skewX(5deg) rotate(2deg);
    filter: brightness(5) blur(5px);
  }
  100% { 
    opacity: 1; 
    transform: translateX(0) scale(1) skewX(0) rotate(0); 
    filter: brightness(1) blur(0); 
  }
}

/* 「バシューン！」登場アニメーション（敵キャラ：右から） */
.fx-vs-screen.show .fx-vs-enemy-section {
  animation: vsEntryEnemyBashuunEnhanced 0.3s cubic-bezier(0.1, 1.2, 0.2, 1) 0.1s forwards;
}

@keyframes vsEntryEnemyBashuunEnhanced {
  0% { 
    opacity: 0; 
    transform: translateX(120vw) scale(2) skewX(20deg) rotate(5deg); 
    filter: brightness(20) blur(20px); 
  }
  60% {
    opacity: 1;
    transform: translateX(-5vw) scale(1.1) skewX(-5deg) rotate(-2deg);
    filter: brightness(5) blur(5px);
  }
  100% { 
    opacity: 1; 
    transform: translateX(0) scale(1) skewX(0) rotate(0); 
    filter: brightness(1) blur(0); 
  }
}

.fx-vs-image {
  width: min(40vw, 380px);
  height: auto;
  max-height: 65vh;
  object-fit: contain;
  filter: drop-shadow(0 0 40px rgba(0,0,0,0.9));
  transition: transform 0.3s ease-out;
}

/* 登場後に少しだけ呼吸するように動かす */
.fx-vs-screen.show .fx-vs-image {
  animation: vsImageBreath 3s ease-in-out 0.4s infinite alternate;
}

@keyframes vsImageBreath {
  from { transform: scale(1); }
  to { transform: scale(1.05); }
}

/* プレイヤー名：共通スタイル */
.fx-vs-player-name,
.fx-vs-enemy-name {
  font-size: min(5vw, 44px) !important;
  font-weight: 1000 !important;
  color: #ffdd00 !important;
  margin-top: 20px !important;
  text-align: center !important;
  white-space: normal !important;
  font-style: italic !important;
  letter-spacing: 0.1em !important;
  opacity: 0;
  text-transform: uppercase !important;
  max-width: 90% !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  line-height: 1.2 !important;
}

/* プレイヤー（自分）：青い縁取りと光彩 */
.fx-vs-player-name {
  text-shadow: 
    /* 太い青い縁取り */
    -3px -3px 0 #0066ff,
    3px -3px 0 #0066ff,
    -3px 3px 0 #0066ff,
    3px 3px 0 #0066ff,
    -5px -5px 0 #0044cc,
    5px -5px 0 #0044cc,
    -5px 5px 0 #0044cc,
    5px 5px 0 #0044cc,
    /* 青い光彩 */
    0 0 40px rgba(0, 150, 255, 1),
    0 0 80px rgba(0, 200, 255, 0.8),
    0 0 120px rgba(100, 220, 255, 0.6),
    /* 深い影 */
    0 10px 30px rgba(0, 0, 0, 1) !important;
  filter: drop-shadow(0 0 30px rgba(0, 150, 255, 1)) !important;
  -webkit-text-stroke: 2px rgba(100, 200, 255, 0.5) !important;
}

/* 敵：赤い縁取りと光彩 */
.fx-vs-enemy-name {
  text-shadow: 
    /* 太い赤い縁取り */
    -3px -3px 0 #ff0066,
    3px -3px 0 #ff0066,
    -3px 3px 0 #ff0066,
    3px 3px 0 #ff0066,
    -5px -5px 0 #cc0044,
    5px -5px 0 #cc0044,
    -5px 5px 0 #cc0044,
    5px 5px 0 #cc0044,
    /* 赤い光彩 */
    0 0 40px rgba(255, 0, 100, 1),
    0 0 80px rgba(255, 60, 0, 0.8),
    0 0 120px rgba(255, 100, 0, 0.6),
    /* 深い影 */
    0 10px 30px rgba(0, 0, 0, 1) !important;
  filter: drop-shadow(0 0 30px rgba(255, 60, 0, 1)) !important;
  -webkit-text-stroke: 2px rgba(255, 150, 100, 0.5) !important;
}

.fx-vs-screen.show .fx-vs-player-name,
.fx-vs-screen.show .fx-vs-enemy-name {
  animation: vsNameReveal 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.4s forwards;
}

@keyframes vsNameReveal {
  0% { opacity: 0; transform: translateY(30px) scale(0.8); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* VSテキスト：中央に強烈なインパクトで出現 */
.fx-vs-vs-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(10);
  font-size: min(22vw, 180px);
  font-weight: 1000;
  color: #fff;
  font-style: italic;
  text-shadow: 
    0 0 30px #ff3c00, 
    0 0 60px #ff3c00,
    0 0 100px #000;
  opacity: 0;
  z-index: 300;
  pointer-events: none;
  filter: brightness(10) blur(10px);
}

.fx-vs-screen.show .fx-vs-vs-text {
  /* キャラが衝突する瞬間に合わせて出現 */
  animation: vsVsImpactEnhanced 0.4s cubic-bezier(0.1, 1.5, 0.2, 1) 0.3s forwards,
             vsVsGlowPulse 1.5s ease-in-out 0.7s infinite alternate;
}

@keyframes vsVsImpactEnhanced {
  0% { transform: translate(-50%, -50%) scale(12); opacity: 0; filter: brightness(20) blur(20px); }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; filter: brightness(1) blur(0); }
}

@keyframes vsVsGlowPulse {
  from { text-shadow: 0 0 30px #ff3c00, 0 0 60px #ff3c00; }
  to { text-shadow: 0 0 50px #ff0000, 0 0 100px #ff3c00, 0 0 150px #ff3c00; }
}

/* ============================================================
   リザルト画面：個別スタイル
   ============================================================ */
.fx-result {
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.fx-result-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 100;
}

/* 勝敗に応じた微かな色味 */
.fx-result.win { background: linear-gradient(to bottom, rgba(30, 15, 0, 0.95), rgba(0, 0, 0, 0.95)) !important; }
.fx-result.lose { background: linear-gradient(to bottom, rgba(0, 15, 30, 0.95), rgba(0, 0, 0, 0.95)) !important; }

/* 勝敗に応じたテキストの色と光彩 */
.fx-result.win .fx-result-text {
  color: #ff2a2a !important;
  text-shadow: 
    -3px -3px 0 #b10000,
    3px -3px 0 #b10000,
    -3px 3px 0 #b10000,
    3px 3px 0 #b10000,
    0 0 30px rgba(255, 42, 42, 1),
    0 0 60px rgba(255, 42, 42, 0.8),
    0 0 100px rgba(255, 42, 42, 0.6),
    0 10px 40px #000 !important;
}

.fx-result.lose .fx-result-text {
  color: #88ccff !important;
  text-shadow: 
    -3px -3px 0 #0066ff,
    3px -3px 0 #0066ff,
    -3px 3px 0 #0066ff,
    3px 3px 0 #0066ff,
    0 0 30px rgba(0,150,255,1),
    0 0 60px rgba(0,200,255,0.8),
    0 0 100px rgba(100,220,255,0.6),
    0 10px 40px #000 !important;
}

.fx-result-image {
  display: block !important;
  max-width: 85vw !important;
  max-height: 60vh !important;
  object-fit: contain !important;
  margin-bottom: 20px !important;
  opacity: 0;
  filter: drop-shadow(0 0 20px rgba(255,255,255,0.4)) drop-shadow(0 0 50px rgba(0,0,0,1)) !important;
}

.fx-result.show .fx-result-image {
  animation: resultHeroicImageFinal 0.7s cubic-bezier(0.15, 1.25, 0.3, 1) forwards !important;
}

@keyframes resultHeroicImageFinal {
  0% { transform: scale(0.4) translateY(50px); opacity: 0; filter: brightness(0) blur(10px); }
  100% { transform: scale(1) translateY(0); opacity: 1; filter: brightness(1.2) blur(0); }
}

.fx-result-text {
  display: block !important;
  font-size: min(14vw, 100px) !important;
  font-weight: 1000 !important;
  color: #fff !important;
  text-align: center !important;
  text-shadow: 
    0 0 20px #000, 
    0 0 40px #000, 
    0 0 100px rgba(255,255,255,0.5) !important;
  opacity: 0;
  z-index: 1000 !important;
  font-style: italic !important;
  letter-spacing: 0.05em !important;
  margin-top: 10px !important;
  transform: rotate(-8deg) !important;
}

.fx-result.show .fx-result-text {
  animation: 
    resultTextSlamFinal 0.8s cubic-bezier(0.1, 1.4, 0.2, 1) 0.4s forwards,
    resultTextFloat 2.5s ease-in-out 1.2s infinite alternate !important;
}

@keyframes resultTextFloat {
  0% { 
    transform: scale(1) rotate(-8deg) translateY(0); 
    text-shadow: 
      0 0 20px #000, 
      0 0 40px #000, 
      0 0 100px rgba(255,255,255,0.5);
  }
  50% {
    transform: scale(1.05) rotate(-7deg) translateY(-10px);
    text-shadow: 
      0 0 30px #000, 
      0 0 60px #000, 
      0 0 120px rgba(255,255,255,0.8);
  }
  100% { 
    transform: scale(1) rotate(-9deg) translateY(0); 
    text-shadow: 
      0 0 20px #000, 
      0 0 40px #000, 
      0 0 100px rgba(255,255,255,0.5);
  }
}

@keyframes resultTextSlamFinal {
  0% { 
    transform: scale(8) rotate(-45deg); 
    opacity: 0; 
    filter: blur(30px) brightness(20); 
  }
  20% {
    transform: scale(0.7) rotate(-12deg);
    opacity: 1;
    filter: blur(0) brightness(3);
  }
  40% { 
    transform: scale(1.3) rotate(-6deg); 
    opacity: 1; 
    filter: blur(0) brightness(1.5); 
  }
  60% {
    transform: scale(0.95) rotate(-9deg);
    opacity: 1;
    filter: blur(0) brightness(1.2);
  }
  80% {
    transform: scale(1.1) rotate(-7deg);
    opacity: 1;
    filter: blur(0) brightness(1);
  }
  100% { 
    transform: scale(1) rotate(-8deg); 
    opacity: 1; 
    filter: blur(0) brightness(1); 
  }
}

.fx-result-bg-text {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) rotate(-10deg) !important;
  font-size: 30vw !important;
  color: rgba(255,255,255,0.01) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* VS画面：背景とデコレーションの強化 */
.fx-vs-cinematic-bg {
  position: absolute;
  inset: -10%;
  background: 
    radial-gradient(circle at 30% 50%, rgba(255,60,0,0.1) 0%, transparent 60%),
    radial-gradient(circle at 70% 50%, rgba(0,150,255,0.1) 0%, transparent 60%),
    #050505;
  z-index: -5;
  transition: transform 3s ease-out;
}

.fx-vs-screen.show .fx-vs-cinematic-bg {
  transform: scale(1.1) rotate(2deg);
}

.fx-vs-energy-aura {
  position: absolute;
  inset: -50%;
  background: 
    conic-gradient(from 0deg, transparent, rgba(255,60,0,0.1), transparent 50%),
    conic-gradient(from 180deg, transparent, rgba(0,150,255,0.1), transparent 50%);
  z-index: -4;
  opacity: 0.5;
  filter: blur(60px);
}

.fx-vs-screen.show .fx-vs-energy-aura {
  animation: vsAuraSpin 10s linear infinite;
}

@keyframes vsAuraSpin {
  from { transform: rotate(0deg) scale(1); }
  to { transform: rotate(360deg) scale(1.2); }
}

.fx-vs-decorations {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 100;
}

/* 衝撃波：リング状に広がる */
.fx-vs-shockwave {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 100px;
  height: 100px;
  border: 4px solid #fff;
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 30px #fff;
}

.fx-vs-screen.show .fx-vs-shockwave {
  animation: vsShockwaveExpand 0.6s cubic-bezier(0.1, 1, 0.2, 1) 0.3s forwards;
}

@keyframes vsShockwaveExpand {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 1; border-width: 20px; }
  100% { transform: translate(-50%, -50%) scale(15); opacity: 0; border-width: 0; }
}

/* レンズフレア：中央を横切る鋭い光 */
.fx-vs-lens-flare {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, transparent, #fff, #ff3c00, #fff, transparent);
  box-shadow: 0 0 40px #ff3c00, 0 0 80px #fff;
  opacity: 0;
  transform: scaleX(0);
  z-index: 400;
}

.fx-vs-screen.show .fx-vs-lens-flare {
  animation: vsLensFlareFlash 0.6s cubic-bezier(0.1, 1, 0.2, 1) 0.3s forwards;
}

@keyframes vsLensFlareFlash {
  0% { transform: scaleX(0); opacity: 1; }
  50% { transform: scaleX(1.5); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

/* インパクトフレア：画面全体が一瞬明るくなる */
.fx-vs-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  z-index: 1000;
  mix-blend-mode: overlay;
}

.fx-vs-screen.show .fx-vs-flash {
  animation: vsImpactFlash 0.5s ease-out 0.3s forwards;
}

@keyframes vsImpactFlash {
  0% { opacity: 0; }
  20% { opacity: 1; }
  100% { opacity: 0; }
}


#fx-layer #fx-symbol,
#fx-layer #fx-result {
  z-index: 2;
}

#fx-flash.fx-flash {
  animation: fxFlashStrobe .3s linear 1 !important;
}

#fx-symbol {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(.2);
  width: var(--fx-size);
  height: var(--fx-size);
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  filter: drop-shadow(0 16px 38px rgba(0,0,0,.55));
}

#fx-symbol .fx-symbol-svg {
  width: 1em;
  height: 1em;
  display: block;
}

#fx-symbol .fx-symbol-svg .fx-maru,
#fx-symbol .fx-symbol-svg .fx-batu {
  display: none;
}

#fx-symbol.maru .fx-symbol-svg .fx-maru {
  display: block;
}

#fx-symbol.batu .fx-symbol-svg .fx-batu {
  display: block;
}

#fx-symbol .fx-symbol-svg circle,
#fx-symbol .fx-symbol-svg line {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#fx-symbol.maru .fx-symbol-svg circle {
  stroke-width: 26;
}

#fx-symbol.batu .fx-symbol-svg line {
  stroke-width: 16;
}

.fx-symbol.maru.fx-pop {
  animation: maruPopUltra .7s cubic-bezier(.12,.9,.18,1) 1;
}

.fx-symbol.batu.fx-pop {
  animation: batuPopStableFade 0.85s ease-out 1 !important;
}

.fx-symbol.maru svg {
  width: min(36vw, 320px);
  height: min(36vw, 320px);
  filter: drop-shadow(0 30px 80px rgba(0,0,0,.9))
    drop-shadow(0 0 60px rgba(255,40,150,.95))
    drop-shadow(0 0 120px rgba(255,90,190,.9));
  position: relative;
  z-index: 1;
}

.fx-symbol.maru circle {
  fill: none;
  stroke: #ff1f8f;
  stroke-width: 26;
}

.fx-symbol.maru svg .ring-gold {
  stroke: linear-gradient(90deg, #ffd36a, #fff2b0, #d4a017);
}

.fx-symbol.maru circle.main {
  stroke: #ff1f8f;
  stroke-width: 28;
}

.fx-symbol.maru circle.gold {
  stroke: #f5c86a;
  stroke-width: 36;
  opacity: .95;
}

.fx-symbol.maru.victory circle.main {
  stroke: url(#rainbowStroke);
}

.fx-symbol.maru.victory circle.gold {
  opacity: 0;
}

.fx-symbol.batu svg {
  width: min(36vw, 320px);
  height: min(36vw, 320px);
  filter: drop-shadow(0 30px 80px rgba(0,0,0,.9))
    drop-shadow(0 0 55px rgba(60,140,255,.95))
    drop-shadow(0 0 120px rgba(120,190,255,.9));
}

.fx-symbol.batu line {
  stroke: #2e8cff;
  stroke-width: 26;
  stroke-linecap: butt !important;
}

.battle-panel.fx-damage {
  transform-origin: center center;
  animation: fxShakeNO_TILT .1s linear 1 !important;
}

#fx-symbol,
#fx-symbol * {
  pointer-events: none !important;
}

.fx-symbol.maru .draw-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: min(10vw, 64px);
  font-weight: 1000;
  color: #ff1f8f !important;
  text-shadow: 0 4px 10px rgba(0,0,0,.85),
    0 0 18px rgba(255,80,180,.85);
  pointer-events: none;
  z-index: 2;
  letter-spacing: .15em;
}

.fx-symbol.maru.fx-pop.draw {
  animation-duration: 2.0s !important;
}

#vs-room-display .vs-room-digit {
  width: 46px;
  height: 48px;
  line-height: 44px;
  font-size: 1.8rem;
  border-width: 2px;
}

#vs-join-room-btn {
  display: block;
  margin: 10px auto 0;
  width: 150px;
}

#vs-create-room-btn {
  display: block;
  margin: 10px auto 0;
  width: 150px;
}

#vs-hp-buttons .vs-hp-btn,
#vs-guest-hp-buttons .vs-hp-btn {
  opacity: 1 !important;
  filter: none !important;
  transition: opacity .12s ease, filter .12s ease, transform .06s ease;
  flex: 1 1 auto;
  min-width: 0;
  height: 52px;
  padding: 8px 2px;
  font-size: 1.2rem;
  font-weight: 600;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#vs-hp-buttons .vs-hp-btn[data-hp="1"]:not(.selected),
#vs-guest-hp-buttons .vs-hp-btn[data-hp="1"]:not(.selected) {
  background: linear-gradient(180deg, rgba(255,170,170,.55), rgba(160,55,55,.35)) !important;
  color: rgba(255,255,255,.92) !important;
  border-color: rgba(255,170,170,.55) !important;
  opacity: .55 !important;
  filter: saturate(.85) brightness(1.05) !important;
}

#vs-hp-buttons .vs-hp-btn[data-hp="2"]:not(.selected),
#vs-guest-hp-buttons .vs-hp-btn[data-hp="2"]:not(.selected) {
  background: linear-gradient(180deg, rgba(255,240,170,.60), rgba(170,120,0,.30)) !important;
  color: rgba(25,25,25,.92) !important;
  border-color: rgba(255,240,170,.60) !important;
  opacity: .60 !important;
  filter: saturate(.80) brightness(1.05) !important;
}

#vs-hp-buttons .vs-hp-btn[data-hp="3"]:not(.selected),
#vs-hp-buttons .vs-hp-btn[data-hp="4"]:not(.selected),
#vs-hp-buttons .vs-hp-btn[data-hp="5"]:not(.selected),
#vs-guest-hp-buttons .vs-hp-btn[data-hp="3"]:not(.selected),
#vs-guest-hp-buttons .vs-hp-btn[data-hp="4"]:not(.selected),
#vs-guest-hp-buttons .vs-hp-btn[data-hp="5"]:not(.selected) {
  background: linear-gradient(180deg, rgba(170,255,210,.50), rgba(20,120,60,.30)) !important;
  color: rgba(255,255,255,.92) !important;
  border-color: rgba(170,255,210,.55) !important;
  opacity: .55 !important;
  filter: saturate(.85) brightness(1.03) !important;
}

#vs-hp-buttons .vs-hp-btn.selected[data-hp="1"],
#vs-guest-hp-buttons .vs-hp-btn.selected[data-hp="1"] {
  background: linear-gradient(180deg, rgba(255,120,120,.98), rgba(150,20,20,.98)) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,.35) !important;
  opacity: 1 !important;
  filter: none !important;
  box-shadow: 0 0 0 2px rgba(255,120,120,.28), 0 6px 14px rgba(0,0,0,.35) !important;
}

#vs-hp-buttons .vs-hp-btn.selected[data-hp="2"],
#vs-guest-hp-buttons .vs-hp-btn.selected[data-hp="2"] {
  background: linear-gradient(180deg, rgba(255,235,120,.98), rgba(190,140,0,.98)) !important;
  color: #1b1b1b !important;
  border-color: rgba(255,255,255,.30) !important;
  opacity: 1 !important;
  filter: none !important;
  box-shadow: 0 0 0 2px rgba(255,235,120,.24), 0 6px 14px rgba(0,0,0,.35) !important;
}

#vs-hp-buttons .vs-hp-btn.selected[data-hp="3"],
#vs-hp-buttons .vs-hp-btn.selected[data-hp="4"],
#vs-hp-buttons .vs-hp-btn.selected[data-hp="5"],
#vs-guest-hp-buttons .vs-hp-btn.selected[data-hp="3"],
#vs-guest-hp-buttons .vs-hp-btn.selected[data-hp="4"],
#vs-guest-hp-buttons .vs-hp-btn.selected[data-hp="5"] {
  background: linear-gradient(180deg, rgba(120,255,170,.98), rgba(20,120,60,.98)) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,.30) !important;
  opacity: 1 !important;
  filter: none !important;
  box-shadow: 0 0 0 2px rgba(120,255,170,.22), 0 6px 14px rgba(0,0,0,.35) !important;
}

#fx-symbol.fx-symbol {
  font-size: min(52vw, 360px) !important;
}

.home-cover {
  margin: 6px 0 14px 0;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: radial-gradient(1200px 300px at 30% 20%, rgba(255,255,255,.12), rgba(0,0,0,0)) ,
              linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.14));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 10px 25px rgba(0,0,0,.18);
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.home-cover-inner {
  padding: 10px;
}

.home-cover-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  vertical-align: middle;
}

.home-cover-title {
  font-weight: 900;
  letter-spacing: .02em;
  font-size: 20px;
}

.home-cover-sub {
  margin-top: 6px;
  opacity: .9;
  font-weight: 700;
}

.home-section {
  margin: 12px 0;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.10));
}

.home-rank-grid {
  display: flex;
  gap: 12px;
  align-items: stretch;
  margin: 12px 0;
}

.home-rank-grid .home-section {
  margin: 0;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.home-action-row {
  display: flex;
}

#home-area .home-action-row button {
  font-size: 1.1rem !important;
}

.home-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.home-section-title {
  font-weight: 900;
  letter-spacing: .02em;
}

.home-rank-box {
  padding: 10px 10px;
  border-radius: 8px;
  border: 1px solid rgba(201,162,88,.72);
  background:
    radial-gradient(130% 160% at 18% 12%, rgba(255,236,190,.34), transparent 60%),
    linear-gradient(180deg, rgba(170,130,74,.45), rgba(82,56,28,.52));
  font-weight: 800;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  box-shadow: inset 0 0 0 1px rgba(255,234,191,.22), 0 10px 20px rgba(0,0,0,.26);
  cursor: default;
  user-select: none;
  color: #f7ebcf;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* マスターモードの rank-center は flexbox でタイトルとステージを配置 */
#homeMasterRank .rank-center {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-align: center;
}

/* タイトル部分は上部に固定 */
#homeMasterRank .rank-center .home-master-title {
  flex-shrink: 0;
}

/* ステージ表示部分は残りのスペースで中央配置 */
#homeMasterRank .rank-center #home-master-current-stage-display {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* rank-centerコンテナ全体も上寄せで高さいっぱい使う */
.home-rank-box .rank-center {
  display: block;
  text-align: center;
  height: 100%;
}

/* rank-num と rank-sub を同じ行に表示 */
.home-rank-box .rank-center .rank-num,
.home-rank-box .rank-center .rank-sub {
  display: inline;
  white-space: nowrap;
}

/* タイトル行とステージ表示の間にスペース */
.home-rank-box .rank-center > div:first-child {
  margin-bottom: 8px;
}

/* br の後の rank-sub（＜トータル＞表示）の上マージンを増やす */
.home-rank-box .rank-center br + .rank-sub {
  display: block;
  margin-top: 8px;
}

/* ガチバトル総合順位の枠は通常トーン */
#homeGachiRank,
#homeMasterRank,
#gachi-rank-box {
  background:
    radial-gradient(130% 160% at 14% 8%, rgba(255,236,190,.34), transparent 58%),
    linear-gradient(180deg, rgba(170,130,74,.45), rgba(82,56,28,.54)) !important;
  border-color: rgba(201,162,88,.72) !important;
  box-shadow: inset 0 0 0 1px rgba(255,234,191,.22), 0 10px 20px rgba(0,0,0,.26) !important;
}

/* マスターモード現在ステージ枠：巻物寄りで少しだけ緑味を残す */
.master-current-stage {
  background:
    radial-gradient(130% 160% at 20% 10%, rgba(255,236,190,.30), transparent 60%),
    linear-gradient(180deg, rgba(148,128,76,.46), rgba(66,78,50,.46)) !important;
  border-color: rgba(180,160,106,.68) !important;
  box-shadow: inset 0 0 0 1px rgba(246,230,188,.18), 0 10px 20px rgba(0,0,0,.26) !important;
}

/* ガチバトルの開始・キャンセルボタンは縦並び */
#gachi-area .top-row-layout .top-row-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-width: 180px;
}

#gachi-area .top-row-layout .top-row-actions button {
  width: 100%;
  margin-top: 0;
}

/* マスターモードトップは表示枠＋ボタンを横並び維持 */
#single-battle-area #practice-top-ui .top-row-layout {
  flex-wrap: nowrap !important;
}

#single-battle-area #practice-top-ui #master-current-stage-box {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

#single-battle-area #practice-top-ui .top-row-actions {
  flex: 0 0 auto;
}

#single-battle-area #practice-top-ui #btn-denkok-master {
  min-height: 68px !important;
  padding-top: 18px !important;
  padding-bottom: 18px !important;
  padding-bottom: 16px !important;
}

/* マスターモードトップ：体力表示（ステータス表示・ボタンと区別） */
.master-hp-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 10px;
  padding: 14px 18px;
  background: rgba(0,0,0,.45);
  border: 1px dashed rgba(255,255,255,.25);
  border-radius: 4px;
  cursor: default;
  user-select: none;
}
.master-hp-current {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: .06em;
}
.master-hp-label {
  font-size: 1.15rem;
  color: rgba(255,255,255,.95);
}
.master-hp-value {
  font-size: 2rem;
  color: #2ef2a5;
  text-shadow: 0 0 12px rgba(46,242,165,.6),
    0 2px 6px rgba(0,0,0,.5);
  min-width: 1.5em;
  text-align: center;
}
.master-hp-next {
  font-size: 1.1rem;
  color: rgba(255,255,255,.95);
  font-weight: 700;
  letter-spacing: .04em;
}
.master-hp-next.master-hp-max {
  color: rgba(46,242,165,.98);
  font-weight: 800;
}
.master-hp-count {
  font-size: 1.4rem;
  font-weight: 800;
  color: #ffd700;
  text-shadow: 0 0 10px rgba(255,215,0,.5),
    0 2px 4px rgba(0,0,0,.5);
  margin-left: 2px;
}

.home-rank-inner {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.home-rank-sub {
  font-size: 12px;
  opacity: .85;
  margin-bottom: 6px;
  font-weight: 800;
}

.home-rank-body {
  font-weight: 800;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.rank-center {
  text-align: center;
}

.master-rank-box .master-rank-note {
  margin: 6px 0 2px;
  opacity: .85;
}

.master-rank-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-weight: 800;
}

.master-rank-table th, .master-rank-table td {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  text-align: left;
  font-size: 13px;
  white-space: nowrap;
}

.master-rank-table th {
  opacity: .9;
}

.master-rank-table td.rank {
  width: 56px;
  text-align: center;
}

.master-rank-table td.score {
  width: 84px;
  text-align: right;
}

.status-panel {
  flex: 0 0 clamp(260px, 35%, 380px) !important;
  max-width: clamp(260px, 35%, 380px) !important;
}

.battle-panel .battle-area {
  width: 100% !important;
}

.practice-rank-box {
  margin: 10px 0 12px 0;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(201,162,88,.72);
  background:
    radial-gradient(130% 160% at 18% 12%, rgba(255,236,190,.34), transparent 60%),
    linear-gradient(180deg, rgba(170,130,74,.45), rgba(82,56,28,.52));
  box-shadow: inset 0 0 0 1px rgba(255,234,191,.22), 0 10px 20px rgba(0,0,0,.26);
  cursor: default;
  user-select: none;
  color: #f7ebcf;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

.practice-rank-title {
  font-weight: 900;
  letter-spacing: .02em;
  margin-bottom: 4px;
}

.practice-rank-body {
  font-weight: 800;
}

.practice-rank-body .rank-num {
  font-size: 1.25em;
  letter-spacing: .02em;
}

.practice-rank-body .rank-sub {
  font-size: .92em;
  opacity: .9;
}

#achievement-table th,
#achievement-table td {
  padding: 2px 4px !important;
  line-height: 1.0 !important;
  vertical-align: middle;
}

#achievement-table button {
  height: 22px !important;
  min-height: 22px !important;
  padding: 0 6px !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

#achievement-table .achv-genre-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: 32px !important;
  min-height: 22px !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #544823 0%, #6c5b2b 55%, #463a1b 100%) !important;
  border: 1px solid rgba(190,165,95,.55) !important;
  color: #f7f1df !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.55);
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.2;
  letter-spacing: .02em !important;
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: anywhere;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.30),
    0 2px 5px rgba(0,0,0,.24);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#achievement-table .achv-genre-btn:active {
  transform: translateY(1px);
  filter: brightness(1.05);
}

#achievement-table .streak-btn {
  height: 24px !important;
  min-height: 30px !important;
  padding: 0 6px !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

.achv-genre-btn:active {
  transform: translateY(1px);
  filter: brightness(1.04);
}

.achv-genre-btn::after {
  content: "▾";
  font-size: .9em;
  opacity: .55;
  margin-left: 2px;
}

#practice-judge-mark {
  width: var(--practice-judge-size) !important;
  height: var(--practice-judge-size) !important;
  min-width: var(--practice-judge-size) !important;
  min-height: var(--practice-judge-size) !important;
  display: grid !important;
  place-items: center !important;
  animation: judge-pop 0.45s ease-out;
  font-size: min(40vw, 240px);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 20px rgba(255,255,255,0.6),
      0 0 40px rgba(255,255,255,0.4);
}

#practice-judge-mark.pop {
  animation: judge-pop 0.45s ease-out !important;
}

#practice-judge-mark .practice-judge-svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  overflow: visible !important;
}

#practice-judge-mark .mark-shape {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--practice-judge-stroke, 60px);
  vector-effect: non-scaling-stroke;
}

#practice-judge-mark.correct .mark-shape {
  stroke-width: var(--practice-judge-stroke-maru, var(--practice-judge-stroke, 60px));
  stroke-linecap: round;
  stroke-linejoin: round;
}

#practice-judge-mark.wrong .mark-shape {
  stroke-width: var(--practice-judge-stroke-batu, var(--practice-judge-stroke, 26px));
  stroke-linecap: butt;
  stroke-linejoin: miter;
}

#practice-judge-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  pointer-events: none;
  background: rgba(0,0,0,0.15);
}

#practice-judge-mark.correct {
  color: #ff5fa2;
}

#practice-judge-mark.wrong {
  color: #5fb3ff;
}

#fx-symbol.fx-absolute {
  position: absolute;
}

#fx-symbol .fx-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 20px currentColor);
}

#fx-symbol .fx-stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 30px !important;
  stroke-linecap: round;
}

#fx-symbol .fx-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: calc(var(--fx-size) * .22);
  letter-spacing: .06em;
  color: currentColor;
  text-shadow: 0 10px 28px rgba(0,0,0,.55), 0 0 18px rgba(255,255,255,.25);
}

#fx-symbol.fx-pop {
  animation: fxPop var(--fx-dur) cubic-bezier(.2,.9,.2,1) 1;
}

#fx-symbol.maru svg circle {
  stroke: #ff5fa2 !important;
}

#fx-symbol.batu svg line {
  stroke: #4da6ff !important;
}

@media (min-width: 769px) {
.status-panel {
  width: 32% !important;
  border-right: 1px solid var(--line);
  order: 1;
  flex: 0 0 clamp(260px, 35%, 380px) !important;
  max-width: 32% !important;
  min-width: 240px !important;
  display: block !important;
  visibility: visible !important;
}

.battle-panel {
  width: 68% !important;
  order: 2;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: block !important;
}

.container {
  display: flex !important;
  align-items: stretch !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
}

.battle-panel [style*="100vw"],
      .battle-panel [class*="vw"] {
  width: 100% !important;
  max-width: 100% !important;
}
}

@media (max-width: 768px) {
  .battle-panel {
    width: 100% !important;
    order: 1 !important;
    min-width: 0 !important;
  }

  .status-panel {
    width: 100% !important;
    order: 2 !important;
    border-top: 1px solid var(--line);
    max-width: none !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
  }

  .home-rank-grid {
    flex-direction: column;
  }

  /* マスターモードトップはスマホ時に縦並び（はみ出し対策） */
  #single-battle-area #practice-top-ui .top-row-layout {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }

  #single-battle-area #practice-top-ui #master-current-stage-box {
    width: 100%;
  }

  #single-battle-area #practice-top-ui .top-row-actions {
    width: 100%;
  }

  #single-battle-area #practice-top-ui #btn-denkok-master {
    width: 100%;
  }

  #gachi-area .top-row-layout .top-row-actions {
    width: 100%;
  }

  #gachi-area .top-row-layout .top-row-actions button {
    flex: 1 1 0;
  }
}

@media (prefers-reduced-motion: reduce) {
.streak-current-num {
  animation: none;
}

.streak-btn.current .streak-live-dot {
  animation: none !important;
}

.menu-vertical button:hover::after {
  animation: none !important;
}

.fx-pop, .battle-panel.fx-damage, #fx-flash.fx-flash {
  animation: none !important;
}

#fx-symbol.fx-pop {
  animation: none !important;
  opacity: 1;
  transform: translate(-50%,-50%) scale(1);
}
}

@media (max-width: 900px) {
  #versus-area #vs-area {
    flex-direction: column !important;
  }
  
  /* ルーム情報バーの調整 */
  #vs-wait-area .vs-wait-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  #vs-wait-area .vs-wait-badges {
    justify-content: flex-start;
    width: 100%;
  }
  
  /* ルーム番号のフォントサイズを調整 */
  #vs-wait-area .vs-wait-room .value {
    font-size: 2rem;
  }
}

/* プレイヤーフレームが縦並びになるブレークポイントを調整 */
/* ボタンが収まらなくなる前に縦並びにする（約800px以下） */
@media (max-width: 800px) {
  #vs-wait-area .vs-wait-players {
    flex-direction: column;
    gap: 12px;
  }
  
  #vs-wait-area .vs-wait-player {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    padding: 12px;
    min-height: 180px;
    height: auto;
    flex: 0 0 auto;
    grid-template-columns: 86px 1fr;
    grid-template-areas:
      "image title"
      "image info";
    column-gap: 10px;
  }
  
  /* プレイヤー画像のサイズを調整 */
  #vs-wait-area .vs-wait-player-image {
    width: 86px;
    height: 86px;
    margin: 0;
  }
  
  /* KVグリッドの調整 */
  #vs-wait-area .vs-wait-kv {
    grid-template-columns: 70px 1fr;
    column-gap: 8px;
    row-gap: 6px;
  }
  
  /* 体力ボタンの幅を調整（1列5個横並びを維持） */
  .vs-hp-buttons {
    gap: 3px;
    width: 100%;
    max-width: 100%;
    margin-top: 4px;
  }
  
  .vs-hp-btn {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 1px;
    font-size: 1.2rem;
  }
  
  #vs-wait-host-hp-buttons .vs-hp-btn,
  #vs-wait-guest-hp-buttons .vs-hp-btn,
  #vs-wait-host-hp-buttons-guest .vs-hp-btn {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 1px;
    font-size: 1.2rem;
  }
  
  #vs-hp-buttons .vs-hp-btn,
  #vs-guest-hp-buttons .vs-hp-btn {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 1px;
    font-size: 1.2rem;
    height: auto;
    width: 0;
  }
  
  /* タイトル部分の調整 */
  #vs-wait-area .vs-wait-player .title {
    margin-bottom: 8px;
    flex-wrap: wrap;
  }
  
  #vs-wait-area .vs-wait-player .title .who {
    font-size: 1rem;
  }
  
  #vs-wait-area .vs-wait-player .meta {
    font-size: 0.85rem;
  }
  
  /* KVのフォントサイズ調整 */
  #vs-wait-area .vs-wait-kv .k {
    font-size: 0.8rem;
  }
  
  #vs-wait-area .vs-wait-kv .v {
    font-size: 0.95rem;
  }
}

@media (max-width: 480px) {
  /* マスターモード：スマホサイズでの文字あふれ対策 */
  .home-master-title {
    font-size: 0.72rem !important;
    line-height: 1.3;
    white-space: normal !important;
    word-break: break-word;
  }
  
  #master-current-stage-display,
  #home-master-current-stage-display {
    font-size: 1.5em !important;
    white-space: normal !important;
    word-break: keep-all;
    overflow-wrap: break-word;
  }
  
  /* ジャンルボタンを2列に */
  #master-genre-button-list {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  /* ジャンルボタンのスマホサイズ対応 */
  #master-genre-button-list button {
    padding: 8px 6px !important;
    font-size: 0.95rem !important;
    min-height: 52px !important;
    gap: 6px !important;
    overflow: hidden !important;
  }
  
  #master-genre-button-list button span:first-child {
    font-size: 0.95rem !important;
    line-height: 1.3 !important;
    max-width: 100%;
    word-break: keep-all;
    overflow-wrap: break-word;
  }
  
  /* ジャンルボタンのアイコンサイズを段階的に */
  #master-genre-button-list .genre-master-icon {
    flex-shrink: 0;
  }
  
  /* マスターモード体力表示のスマホサイズ */
  .master-hp-info {
    padding: 12px 14px;
  }
  .master-hp-label {
    font-size: 1rem;
  }
  .master-hp-value {
    font-size: 1.65rem;
  }
  .master-hp-next {
    font-size: 0.95rem;
  }
  .master-hp-count {
    font-size: 1.2rem;
  }
  
  /* マスターモードの遷移ボタン調整 */
  #btn-denkok-master {
    min-height: 56px !important;
  }
  
  /* 現在のステージ表示のアイコンサイズ縮小 */
  .denkok-master-icon {
    font-size: 1.8rem !important;
  }

  /* さらに狭い画面での調整（1列5個横並びを維持） */
  #vs-wait-area .vs-wait-room .value {
    font-size: 1.6rem;
  }
  
  /* バトル画面のレスポンシブ対応 */
  .icon {
    width: 80px !important;
  }
  
  .health-bar-container {
    width: 120px !important;
    height: 25px !important;
  }
  
  .health-bar::after {
    font-size: 1.2rem !important;
  }
  
  .health-bar-vs-icon {
    font-size: 1.5rem !important;
  }
  
  .player-side,
  .enemy-side {
    width: 40% !important;
  }
  
  .center-info {
    width: 20% !important;
    min-width: 80px !important;
  }
  
  #mode-display,
  #level-display {
    font-size: 0.75rem !important;
  }
  
  #vs-wait-area .vs-wait-player {
    padding: 10px;
    min-height: 160px;
    flex: 0 0 auto;
    grid-template-columns: 70px 1fr;
    column-gap: 8px;
  }
  
  #vs-wait-area .vs-wait-player-image {
    width: 70px;
    height: 70px;
    margin: 0;
  }
  
  #vs-wait-area .vs-wait-kv {
    grid-template-columns: 60px 1fr;
    column-gap: 6px;
    row-gap: 4px;
  }
  
  #vs-wait-area .vs-wait-kv .k {
    font-size: 0.75rem;
  }
  
  #vs-wait-area .vs-wait-kv .v {
    font-size: 0.85rem;
  }
  
  #vs-wait-area .vs-wait-player .title {
    margin-bottom: 6px;
  }
  
  #vs-wait-area .vs-wait-player .title .who {
    font-size: 0.9rem;
  }
  
  #vs-wait-area .vs-wait-player .meta {
    font-size: 0.8rem;
  }
  
  .vs-hp-buttons {
    gap: 2px;
    margin-top: 4px;
  }
  
  .vs-hp-btn {
    flex: 1 1 auto;
    min-width: 0;
    padding: 5px 0;
    font-size: 1.2rem;
  }
  
  #vs-wait-host-hp-buttons .vs-hp-btn,
  #vs-wait-guest-hp-buttons .vs-hp-btn,
  #vs-wait-host-hp-buttons-guest .vs-hp-btn {
    flex: 1 1 auto;
    min-width: 0;
    padding: 5px 0;
    font-size: 1.2rem;
  }
  
  #vs-hp-buttons .vs-hp-btn,
  #vs-guest-hp-buttons .vs-hp-btn {
    flex: 1 1 auto;
    min-width: 0;
    padding: 5px 0;
    font-size: 1.2rem;
    width: 0;
  }
}

@media (hover:hover) {
.menu-vertical button {
  transition: transform .12s ease, filter .12s ease, box-shadow .18s ease;
}

.menu-vertical button:hover {
  transform: translateY(-2px);
  filter: brightness(1.10) saturate(1.08);
  box-shadow: 0 0 0 1px rgba(255,255,255,.22) inset,
      0 0 0 3px rgba(255,255,255,.10),
      0 0 26px rgba(255,255,255,.16),
      0 18px 40px rgba(0,0,0,.55);
}

.menu-vertical button:hover::before {
  transform: translateY(-2px) scale(1.07);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.55));
}

.menu-vertical button:hover::after {
  opacity: .95;
  animation: menuScan 0.45s ease-out 1;
}

.options button:hover {
  filter: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.22) inset,
      0 14px 30px rgba(0,0,0,.48);
  transform: translateY(-1px);
  background: linear-gradient(180deg,
        rgba(45,65,120,.95),
        rgba(25,35,75,.95)
      ) !important;
  color: #ffffff !important;
  text-shadow: 0 2px 0 rgba(0,0,0,.45),
      0 0 6px rgba(0,0,0,.35);
}
}

/* ===== ザ・伝国マスター2.5：オンライン専用機能のグレーアウト ===== */
.online-only,
.online-only:hover,
.online-only:active {
  filter: grayscale(1) !important;
  opacity: .42 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

.profile-unset-row .profile-unset-value {
  font-weight: bold;
  color: rgba(232,238,252,.55);
}

.profile-unset-note {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(232,238,252,.65);
}

/* 案内ダイアログ */
.online-only-notice {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(3,8,20,.72);
}

.online-only-notice-card {
  width: 100%;
  max-width: 420px;
  padding: 22px 20px 18px;
  border-radius: 16px;
  border: 1px solid rgba(40,182,255,.45);
  background: linear-gradient(165deg, rgba(20,40,80,.96), rgba(10,18,36,.98));
  box-shadow: 0 20px 50px rgba(0,0,0,.55);
  color: #e8eefc;
  text-align: center;
}

.online-only-notice-title {
  margin: 0 0 10px;
  font-size: 1.05rem;
}

.online-only-notice-body {
  margin: 0 0 16px;
  font-size: .92rem;
  line-height: 1.6;
}

.online-only-notice-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.online-only-notice-link {
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  min-height: 40px;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
  border: 1px solid rgba(46,242,165,.45);
  background: linear-gradient(180deg, rgba(46,242,165,.28), rgba(40,182,255,.14));
}

.online-only-notice-close {
  min-width: 100px;
}