/*
 * mobile.css — 全画面共通のスマホ表示対応
 *  ・固定幅（700px など）のコンテナを、画面幅に合わせて縮める
 *  ・余白、文字サイズ（入力欄は16px以上でiOSの自動ズームを防ぐ）、ボタンの押しやすさ、はみ出しの防止
 *  画面ごとの細かい調整は、各画面の CSS 側で行う
 */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, video, canvas, svg { max-width: 100%; }
button, a, select, input[type="checkbox"], input[type="radio"] { touch-action: manipulation; }
input, select, textarea { max-width: 100%; }
pre, code { white-space: pre-wrap; word-break: break-word; }

@media (max-width: 720px) {
  body { padding: 8px !important; }
  .container, .page { width: auto !important; max-width: 100% !important; box-sizing: border-box !important; }
  .container { padding: 14px 12px !important; }
  h2 { font-size: 20px; }

  /* iOSは、16px未満の入力欄をタップすると画面が勝手に拡大されるため */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea { font-size: 16px !important; }

  /* ダイアログ */
  .modal-overlay { padding: 10px !important; box-sizing: border-box; }
  .modal-box { width: 100% !important; max-width: 440px !important; box-sizing: border-box !important; max-height: 92vh; overflow-y: auto; }

  /* 横に並んだ「情報 + ボタン」の行は、狭い画面では折り返す */
  .item-card { flex-wrap: wrap; gap: 8px; }
  .item-card > .item-info { flex: 1 1 100%; min-width: 0; }
  .item-actions { flex-wrap: wrap; }
  .price-section { min-width: 0 !important; width: 100%; text-align: left !important; }

  /* 表が画面からはみ出す場合は、表の中だけ横にスクロールする */
  .table-scroll, .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* 長い文字列（アイテム名・ユーザー名など）で、レイアウトが崩れないように */
  .item-name, .p-name, .member-name, .msg-name, .char-name { word-break: break-word; overflow-wrap: anywhere; }
}

@media (max-width: 420px) {
  body { padding: 4px !important; }
  .container { padding: 12px 10px !important; }
  button { min-height: 36px; }
}

/* 管理人（test_pt）の名前: 赤黒く光るグラデーション文字。文字の大きさは変えない */
.admin-name { font-weight: bold; background: linear-gradient(90deg, #8a0000, #ff2a2a, #4a0000, #ff2a2a, #8a0000); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: #c00000; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 3px rgba(255, 30, 30, 0.75)); animation: adminGlow 3s linear infinite; }
@keyframes adminGlow { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
.admin-badge { color: #e53935; font-weight: bold; }

/* ガチャのSSR・URの装備名: お知らせと同じく、SSRは金色に、URは虹色に光る文字 */
.rar-ssr { font-weight: bold; color: #d99a00; background: linear-gradient(90deg, #d08a00 0%, #f5a800 45%, #ff8a00 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 3px rgba(255,170,0,0.55)); }   /* 左端が明るすぎて、明るい背景で読めなくなるのを避けるため、全体を濃い金色にしている */
.rar-ur { font-weight: bold; color: #ff8ad8; background: linear-gradient(90deg, #ff6b6b, #ffd166, #6bffb0, #5bc8ff, #b18cff, #ff8ad8, #ff6b6b); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 5px rgba(255,255,255,0.45)); animation: rarRainbow 4s linear infinite; }
@keyframes rarRainbow { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }

/* SUR（シークレットウルトラレア）の装備名: 禍々しく、血のような赤と紫が脈打つように光る */
.rar-sur { font-weight: bold; color: #c2003a; background: linear-gradient(90deg, #ff1744, #b1005f, #7a00d6, #b1005f, #ff1744); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 3px rgba(255,0,60,0.95)) drop-shadow(0 0 7px rgba(130,0,210,0.75)); animation: rarRainbow 3s linear infinite, surPulse 1.8s ease-in-out infinite; }
@keyframes surPulse { 0%, 100% { filter: drop-shadow(0 0 3px rgba(255,0,60,0.95)) drop-shadow(0 0 6px rgba(130,0,210,0.6)) brightness(0.95); } 50% { filter: drop-shadow(0 0 6px rgba(255,0,60,1)) drop-shadow(0 0 12px rgba(150,0,255,0.9)) brightness(1.25); } }
/* 引換券で授かった勲章のうち、光る色を指定されたもの: 指定の色（style の color）で、やわらかく脈打つように光る */
/*   文字そのものがにじんで読めなくならないよう、輪郭をくっきり（暗い縁取り）にして、まわりの光は、うすく広げるだけにする */
.rar-glow { font-weight: 900; letter-spacing: 0.4px; -webkit-text-stroke: 0.7px rgba(30,15,0,0.6); paint-order: stroke fill;
  text-shadow: 0 1px 1px rgba(0,0,0,0.35), 0 0 8px currentColor; animation: rarGlowPulse 2.4s ease-in-out infinite; }
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .rar-glow { text-shadow: 0 1px 1px rgba(0,0,0,0.35), 0 0 7px color-mix(in srgb, currentColor 80%, transparent), 0 0 16px color-mix(in srgb, currentColor 45%, transparent); }
}
/* 暗い色（紺など）を指定した勲章: 色のまま、明るい縁取りと白っぽい光で、背景に潰れないようにする */
.rar-glow.rar-glow-dark { -webkit-text-stroke: 0; font-weight: bold; letter-spacing: 0.3px; animation: none;
  text-shadow: 0 0 3px rgba(210,225,255,0.95), 0 0 6px rgba(190,210,255,0.9), 0 0 12px rgba(150,180,255,0.6); }
/* 申請で授かった勲章の「(超難易度イベントクリアの報酬)」: マウスを合わせる／スマホは長押しで、勲章の上に吹き出しで出す（勲章の文字を隠さない） */
.medal-item.has-tip { position: relative; cursor: help; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.medal-item.has-tip::after { content: attr(data-tip); display: none; position: absolute; left: 8px; bottom: calc(100% + 4px); z-index: 30; padding: 6px 10px; border-radius: 6px; white-space: nowrap;
  background: rgba(20,30,50,0.96); color: #fff; font-size: 12px; font-weight: normal; line-height: 1.5; box-shadow: 0 2px 8px rgba(0,0,0,0.35); pointer-events: none; }
.medal-item.has-tip.tip-on::after { display: block; }
@media (hover: hover) { .medal-item.has-tip:hover::after { display: block; } }
@keyframes rarGlowPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.2); } }
/* 勲章「溟王」: 深い海のような、青い光。控えめに、ゆっくり明るさが変わる */
.rar-meiou { font-weight: bold; color: #3a86c8; text-shadow: 0 0 3px rgba(64,150,230,0.35); animation: meiouGlow 3.8s ease-in-out infinite; }
@keyframes meiouGlow { 0%, 100% { color: #3a86c8; text-shadow: 0 0 3px rgba(64,150,230,0.3); } 50% { color: #58a3e6; text-shadow: 0 0 6px rgba(90,170,240,0.55); } }
/* 管理人シリーズの装備名: ダーク緑に脈打つように光る */
.rar-kanrinin { font-weight: bold; color: #0b3d1a; background: linear-gradient(90deg, #003d13, #00ff66, #003d13); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 3px rgba(0,255,102,0.85)) drop-shadow(0 0 7px rgba(0,80,30,0.75)); animation: rarRainbow 3s linear infinite, kanrininPulse 1.8s ease-in-out infinite; }
@keyframes kanrininPulse { 0%, 100% { filter: drop-shadow(0 0 3px rgba(0,255,102,0.7)) drop-shadow(0 0 6px rgba(0,60,20,0.6)) brightness(0.9); } 50% { filter: drop-shadow(0 0 7px rgba(0,255,102,1)) drop-shadow(0 0 12px rgba(0,100,40,0.9)) brightness(1.2); } }
/* 星晶の神域限定の装備名: 虹色（UR）ではなく、夜空の星をイメージした紺・紫・銀白のグラデーションで光る */
.rar-seisho { font-weight: bold; color: #b8c6ff; background: linear-gradient(90deg, #0d1b4c, #3949ab, #b39dff, #ffffff, #3949ab, #0d1b4c); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 3px rgba(120,140,255,0.8)) drop-shadow(0 0 7px rgba(20,20,60,0.7)); animation: rarRainbow 5s linear infinite, seishoTwinkle 2.2s ease-in-out infinite; }
@keyframes seishoTwinkle { 0%, 100% { filter: drop-shadow(0 0 3px rgba(120,140,255,0.6)) drop-shadow(0 0 6px rgba(20,20,60,0.6)) brightness(0.9); } 50% { filter: drop-shadow(0 0 7px rgba(200,210,255,1)) drop-shadow(0 0 14px rgba(80,60,200,0.9)) brightness(1.3); } }
/* 光輝セットの装備名: 文字集めで完成する限定装備。名前の通り、黄金色にまばゆく輝く */
.rar-kouki { font-weight: bold; color: #b8860b; background: linear-gradient(90deg, #fff8dc, #ffd700, #ff8c00, #ffd700, #fff8dc); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 3px rgba(255,215,0,0.85)) drop-shadow(0 0 7px rgba(255,180,0,0.6)); animation: rarRainbow 3s linear infinite, koukiTwinkle 1.6s ease-in-out infinite; }
@keyframes koukiTwinkle { 0%, 100% { filter: drop-shadow(0 0 3px rgba(255,215,0,0.7)) drop-shadow(0 0 6px rgba(255,160,0,0.5)) brightness(0.95); } 50% { filter: drop-shadow(0 0 8px rgba(255,215,0,1)) drop-shadow(0 0 14px rgba(255,180,0,0.9)) brightness(1.3); } }
/* 赫奕たるシリーズ・琥珀: レイドボスっぽい、深紅に燃えるように脈打つ光り方 */
.rar-kakuyaku { font-weight: bold; color: #c62828; background: linear-gradient(90deg, #5a0000, #e53935, #ff8a65, #ffd180, #e53935, #5a0000); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 3px rgba(255,60,40,0.9)) drop-shadow(0 0 7px rgba(150,0,0,0.7)); animation: rarRainbow 3.5s linear infinite, kakuyakuPulse 1.5s ease-in-out infinite; }
@keyframes kakuyakuPulse { 0%, 100% { filter: drop-shadow(0 0 3px rgba(255,60,40,0.7)) drop-shadow(0 0 6px rgba(120,0,0,0.6)) brightness(0.95); } 50% { filter: drop-shadow(0 0 8px rgba(255,90,60,1)) drop-shadow(0 0 15px rgba(200,0,0,0.9)) brightness(1.3); } }
/* ベータ・テスター（アクセサリー）・勲章「くにくにの国統一！ベータ版クリア」: 緑 → 青 → 赤 → 紫 → 金 の順に、文字の色が変わりながら光る */
.rar-mahou { font-weight: bold; color: #ff69b4; text-shadow: 0 0 6px rgba(255,105,180,0.85), 0 0 12px rgba(255,255,255,0.7); }
.rar-beta { font-weight: bold; color: #00e676; text-shadow: 0 0 6px rgba(0,230,118,0.8); animation: betaCycle 7.5s linear infinite; }
@keyframes betaCycle {
  0%, 100% { color: #00e676; text-shadow: 0 0 4px rgba(0,230,118,0.9), 0 0 9px rgba(0,120,60,0.7); }
  16% { color: #00e676; text-shadow: 0 0 4px rgba(0,230,118,0.9), 0 0 9px rgba(0,120,60,0.7); }
  22% { color: #2979ff; text-shadow: 0 0 4px rgba(41,121,255,0.95), 0 0 9px rgba(10,50,150,0.7); }
  38% { color: #2979ff; text-shadow: 0 0 4px rgba(41,121,255,0.95), 0 0 9px rgba(10,50,150,0.7); }
  44% { color: #ff1744; text-shadow: 0 0 4px rgba(255,23,68,0.95), 0 0 9px rgba(140,0,20,0.7); }
  58% { color: #ff1744; text-shadow: 0 0 4px rgba(255,23,68,0.95), 0 0 9px rgba(140,0,20,0.7); }
  64% { color: #d500f9; text-shadow: 0 0 4px rgba(213,0,249,0.95), 0 0 9px rgba(90,0,120,0.7); }
  78% { color: #d500f9; text-shadow: 0 0 4px rgba(213,0,249,0.95), 0 0 9px rgba(90,0,120,0.7); }
  84% { color: #ffd600; text-shadow: 0 0 5px rgba(255,214,0,1), 0 0 11px rgba(200,140,0,0.8); }
  94% { color: #ffd600; text-shadow: 0 0 5px rgba(255,214,0,1), 0 0 11px rgba(200,140,0,0.8); }
}
/* 勲章「限界ソシャゲ民」: 名前が虹色に輝く（チャット欄・プロフィール・トップ画面など） */
.rainbow-name { font-weight: bold; color: #ff8ad8; background: linear-gradient(90deg, #ff6b6b, #ffd166, #6bffb0, #5bc8ff, #b18cff, #ff8ad8, #ff6b6b); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 3px rgba(255,255,255,0.5)) drop-shadow(0 0 1.5px rgba(0,0,0,0.5)); animation: rarRainbow 3s linear infinite; }
/* 勲章「愛を知らない殺戮者」: 名前が青黒くリッチに光る（明るい背景でも光って見えるよう、青紫のハイライトを強めに入れる） */
.nagumo-name { font-weight: bold; color: #1a237e; background: linear-gradient(90deg, #000000, #1a237e, #5c6bc0, #1a237e, #000000); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 4px rgba(26,35,126,0.95)) drop-shadow(0 0 8px rgba(92,107,192,0.7)); animation: rarRainbow 4s linear infinite, nagumoPulse 2s ease-in-out infinite; }
@keyframes nagumoPulse { 0%, 100% { filter: drop-shadow(0 0 3px rgba(26,35,126,0.8)) drop-shadow(0 0 5px rgba(92,107,192,0.5)) brightness(0.9); } 50% { filter: drop-shadow(0 0 6px rgba(26,35,126,1)) drop-shadow(0 0 12px rgba(92,107,192,0.9)) brightness(1.2); } }
/* 勲章「限界ソシャゲ民」: チャット欄のその人の発言枠全体が虹色に光る（枠線だけでなく内側も虹色に） */
.rainbow-frame { border: 2px solid transparent !important; border-radius: 10px; padding: 6px 8px !important; margin-bottom: 2px;
  background: linear-gradient(90deg, rgba(255,107,107,0.16), rgba(255,209,102,0.16), rgba(107,255,176,0.16), rgba(91,200,255,0.16), rgba(177,140,255,0.16), rgba(255,138,216,0.16), rgba(255,107,107,0.16)) padding-box,
              linear-gradient(90deg, #ff6b6b, #ffd166, #6bffb0, #5bc8ff, #b18cff, #ff8ad8, #ff6b6b) border-box;
  background-size: 300% 100%, 300% 100%; animation: rainbowFrameShift 3s linear infinite, rainbowFramePulse 1.8s ease-in-out infinite; }
@keyframes rainbowFrameShift { 0% { background-position: 0% 50%, 0% 50%; } 100% { background-position: 300% 50%, 300% 50%; } }
@keyframes rainbowFramePulse { 0%, 100% { filter: drop-shadow(0 0 2px rgba(255,255,255,0.5)); } 50% { filter: drop-shadow(0 0 6px rgba(255,255,255,0.9)); } }

/* 魔法少女セット: トップ画面と戦闘画面が、ピンクと白のグラデーションで輝く */
body.mahou { background: linear-gradient(135deg, #ff9ccf, #ff69b4, #ffb6d9, #ff69b4, #ff9ccf) !important; background-size: 400% 400% !important; animation: mahouBg 8s ease-in-out infinite; }
body.mahou .container, body.mahou .battle-wrap, body.mahou .wrap { background: linear-gradient(135deg, rgba(255,214,235,0.94), rgba(255,160,208,0.94), rgba(255,214,235,0.94)) !important; background-size: 300% 300% !important; animation: mahouBg 7s ease-in-out infinite, mahouGlow 2.6s ease-in-out infinite; border-color: #ff69b4 !important; color: #5a1f3d; }
body.mahou .char-card { background: rgba(255,228,242,0.88) !important; border-color: #ff69b4 !important; color: #5a1f3d; box-shadow: 0 0 12px rgba(255,105,180,0.7); }
body.mahou .char-name, body.mahou .stat-label { color: #c2185b !important; }
body.mahou .battle-log-container { background: rgba(255,236,246,0.93) !important; border-color: #ff69b4 !important; color: #5a1f3d; }
@keyframes mahouBg { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes mahouGlow { 0%, 100% { box-shadow: 0 0 12px rgba(255,105,180,0.6), 0 0 28px rgba(255,182,217,0.7); } 50% { box-shadow: 0 0 26px rgba(255,105,180,1), 0 0 52px rgba(255,150,205,0.95); } }
/* 魔法少女セット: 光る桃色（#ff69b4）。文字は読みやすいよう濃いめの色 */
.log-line.set-mahou { color: #e0197d; font-weight: bold; text-shadow: 0 0 8px rgba(255,105,180,0.9); }