/* 時事英語ジュニア — ゲームセンター（/games/）。夜のゲームセンターのネオン。ゲームは全画面のゲーム画面（.ax）で遊ぶ */
.p-arcade {
  --a-bg: #070b24;
  --a-bg2: #10164a;
  --a-panel: rgba(22, 28, 86, 0.62);
  --a-line: rgba(130, 160, 255, 0.28);
  --a-cyan: #35e0ff;
  --a-pink: #ff4fd8;
  --a-yel: #ffe14d;
  --a-grn: #3dff9a;
  --a-red: #ff4f6d;
  --a-org: #ffa53d;
  --a-txt: #eef1ff;
  --a-dim: #a6b0e0;
  --f-pix: 'Press Start 2P', 'Zen Kaku Gothic New', 'Lexend', monospace;
}
.p-arcade main { background: var(--a-bg); color: var(--a-txt); }
.arc { position: relative; overflow: hidden; isolation: isolate; padding-bottom: 40px; }
.arc-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(1200px 520px at 75% -10%, rgba(139, 92, 255, 0.45), transparent 60%), radial-gradient(900px 500px at 0% 10%, rgba(53, 224, 255, 0.22), transparent 60%), linear-gradient(180deg, #0a0f33 0%, #070b24 55%, #05071a 100%); }
.arc-stars { position: absolute; left: 0; top: 0; width: 100%; height: min(100%, 900px); }
.arc-floor { position: absolute; left: -50%; right: -50%; top: 330px; height: 520px; background-image: linear-gradient(rgba(255, 79, 216, 0.55) 2px, transparent 2px), linear-gradient(90deg, rgba(255, 79, 216, 0.55) 2px, transparent 2px); background-size: 64px 64px; transform: perspective(380px) rotateX(62deg); transform-origin: 50% 0; mask-image: linear-gradient(transparent 0%, #000 22%, #000 40%, transparent 85%); -webkit-mask-image: linear-gradient(transparent 0%, #000 22%, #000 40%, transparent 85%); opacity: 0.45; animation: arc-floor 2.4s linear infinite; }
@keyframes arc-floor { to { background-position: 0 64px; } }
.arc-in { position: relative; }
.arc .bc { color: var(--a-dim); padding-top: 12px; }
.arc .bc a { color: var(--a-cyan); }
.arc .bc b { color: var(--a-dim); }

/* ---------- ヒーロー ---------- */
.arc-hero { display: grid; gap: 22px; align-items: center; padding: 18px 0 26px; }
@media (min-width: 900px) { .arc-hero { grid-template-columns: minmax(0, 1fr) 340px; gap: 36px; padding: 30px 0 40px; } }
.arc-k { font-family: var(--f-pix); font-size: 11px; letter-spacing: 0.12em; color: var(--a-yel); margin: 0 0 10px; text-shadow: 0 0 10px rgba(255, 225, 77, 0.7); animation: arc-blink 2.6s steps(1) infinite; }
@keyframes arc-blink { 0%, 86% { opacity: 1; } 88%, 92% { opacity: 0.25; } 90%, 94% { opacity: 1; } }
.arc-h1 { margin: 0; font-family: var(--f-display); font-weight: 400; line-height: 1.08; letter-spacing: 0.02em; }
.arc-h1 span { display: block; font-size: clamp(26px, 5.2vw, 46px); color: #fff; text-shadow: 0 0 18px rgba(53, 224, 255, 0.55); }
.arc-h1 .arc-h1-b { font-size: clamp(40px, 9vw, 78px); background: linear-gradient(92deg, var(--a-cyan) 0%, #a98bff 45%, var(--a-pink) 75%, var(--a-yel) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 14px rgba(255, 79, 216, 0.45)); animation: arc-grad 6s ease-in-out infinite alternate; text-shadow: none; }
@keyframes arc-grad { to { background-position: 100% 0; } }
.arc-lead { margin: 14px 0 18px; color: #d4daff; font-weight: 700; font-size: 15px; max-width: 36em; }
.arc-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.arc-btn { display: inline-flex; align-items: center; gap: 6px; border: 2px solid var(--a-cyan); background: rgba(53, 224, 255, 0.08); color: #fff; border-radius: 12px; padding: 11px 18px; font-weight: 900; font-size: 15px; text-decoration: none; box-shadow: 0 0 0 0 rgba(53, 224, 255, 0.5), inset 0 0 14px rgba(53, 224, 255, 0.18); transition: transform 0.12s, box-shadow 0.2s, background 0.2s; }
.arc-btn:hover { background: rgba(53, 224, 255, 0.2); box-shadow: 0 0 22px rgba(53, 224, 255, 0.55), inset 0 0 14px rgba(53, 224, 255, 0.3); transform: translateY(-2px); }
.arc-btn:active { transform: translateY(1px) scale(0.98); }
.arc-btn-p { border-color: transparent; background: linear-gradient(135deg, var(--a-pink), #8b5cff 60%, var(--a-cyan)); box-shadow: 0 6px 24px rgba(255, 79, 216, 0.45); animation: arc-pulse 2.2s ease-in-out infinite; }
.arc-btn-p:hover { background: linear-gradient(135deg, #ff6fe0, #9d74ff 60%, #5fe8ff); }
@keyframes arc-pulse { 50% { box-shadow: 0 6px 34px rgba(255, 79, 216, 0.8), 0 0 0 6px rgba(255, 79, 216, 0.12); } }
.arc-btn-s { font-size: 13px; padding: 7px 14px; }
.arc-ticker { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; }
.arc-ticker li { font-family: var(--f-en); font-weight: 700; font-size: 12.5px; border: 1px solid var(--a-line); color: var(--a-dim); border-radius: 999px; padding: 3px 10px; background: rgba(255, 255, 255, 0.03); animation: arc-tk 0.5s both; }
.arc-ticker li b { color: var(--a-cyan); margin-right: 5px; }
@keyframes arc-tk { from { opacity: 0; transform: translateY(8px); } }

/* プレイヤーカード */
.arc-player { position: relative; border-radius: 20px; padding: 18px 18px 16px; background: linear-gradient(160deg, rgba(53, 224, 255, 0.14), rgba(139, 92, 255, 0.14) 50%, rgba(255, 79, 216, 0.12)); border: 1.5px solid rgba(160, 190, 255, 0.35); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.15); backdrop-filter: blur(8px); }
.arc-player::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; background: linear-gradient(130deg, var(--a-cyan), transparent 35%, transparent 65%, var(--a-pink)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.arc-pk { margin: 0; font-family: var(--f-pix); font-size: 10px; color: var(--a-grn); letter-spacing: 0.1em; }
.arc-rank { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; }
.arc-rank-ic { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(135deg, var(--a-yel), var(--a-org)); color: #3a1d00; font-size: 22px; box-shadow: 0 0 18px rgba(255, 196, 61, 0.6); }
.arc-rank b { font-family: var(--f-display); font-weight: 400; font-size: 21px; line-height: 1.2; }
.arc-xp { margin: 4px 0 6px; font-family: var(--f-pix); font-size: 22px; color: var(--a-yel); text-shadow: 0 0 12px rgba(255, 225, 77, 0.6); }
.arc-xp small { font-size: 11px; margin-left: 6px; color: var(--a-dim); }
.arc-xpbar { height: 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.arc-xpbar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--a-cyan), var(--a-pink)); box-shadow: 0 0 12px var(--a-cyan); transition: width 1s cubic-bezier(0.22, 1, 0.36, 1); }
.arc-next { margin: 6px 0 12px; font-size: 12px; color: var(--a-dim); font-weight: 700; }
.arc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 12px; }
.arc-stats div { background: rgba(0, 0, 0, 0.25); border-radius: 12px; padding: 8px 6px; text-align: center; border: 1px solid var(--a-line); }
.arc-stats dt { font-size: 11px; color: var(--a-dim); font-weight: 700; }
.arc-stats dd { margin: 2px 0 0; font-family: var(--f-pix); font-size: 15px; color: #fff; }
.arc-lv, .arc-snd { display: flex; gap: 6px; align-items: center; margin-top: 8px; font-size: 12.5px; font-weight: 900; color: var(--a-dim); }
.arc-lv span { margin-right: 4px; }
.arc-lv button, .arc-snd button { flex: 1; border: 1.5px solid var(--a-line); background: rgba(0, 0, 0, 0.25); color: var(--a-dim); border-radius: 999px; padding: 6px 10px; font-weight: 900; font-size: 13px; }
.arc-lv button.on, .arc-snd button[aria-pressed='true'] { border-color: var(--a-cyan); color: #fff; background: rgba(53, 224, 255, 0.18); box-shadow: 0 0 12px rgba(53, 224, 255, 0.35); }

/* ---------- きょうのイチオシ・ミッション ---------- */
.arc-daily { display: grid; gap: 16px; margin-bottom: 34px; }
@media (min-width: 900px) { .arc-daily { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
.arc-pick { position: relative; border-radius: 22px; overflow: hidden; min-height: 220px; border: 2px solid var(--c1, var(--a-cyan)); box-shadow: 0 0 34px color-mix(in srgb, var(--c1, #35e0ff) 40%, transparent); background: #000; }
.arc-pick:empty { display: none; }
.arc-pick .cab-art { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.arc-pick .cab-art svg { width: 100%; height: 100%; }
.arc-pick-in { position: relative; z-index: 1; height: 100%; min-height: 220px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 18px 20px; background: linear-gradient(0deg, rgba(4, 6, 24, 0.96) 0%, rgba(4, 6, 24, 0.7) 60%, rgba(4, 6, 24, 0.25) 100%); }
.arc-pick-k { display: flex; gap: 8px; align-items: center; font-family: var(--f-pix); font-size: 10px; color: var(--a-yel); letter-spacing: 0.08em; }
.arc-pick-k i { font-style: normal; background: var(--a-red); color: #fff; padding: 4px 6px; border-radius: 6px; animation: arc-pulse2 1.4s ease-in-out infinite; }
@keyframes arc-pulse2 { 50% { transform: scale(1.08); } }
.arc-pick-t { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(24px, 4vw, 34px); line-height: 1.2; color: #fff; }
.arc-pick-t small { display: block; font-family: var(--f-en); font-weight: 800; font-size: 13px; letter-spacing: 0.18em; color: var(--c1, var(--a-cyan)); }
.arc-pick-d { margin: 0 0 8px; font-size: 13.5px; font-weight: 700; color: #dbe0ff; max-width: 34em; }
.arc-pick .arc-btn { align-self: flex-start; }
.arc-mis { border-radius: 22px; padding: 16px 18px; background: var(--a-panel); border: 1.5px solid var(--a-line); }
.arc-sk { margin: 0 0 10px; font-family: var(--f-display); font-weight: 400; font-size: 20px; color: #fff; display: flex; flex-direction: column; line-height: 1.25; }
.arc-sk span { font-family: var(--f-pix); font-size: 10px; letter-spacing: 0.12em; color: var(--a-pink); margin-bottom: 6px; text-shadow: 0 0 10px rgba(255, 79, 216, 0.6); }
.arc-mlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.arc-mlist li { display: flex; gap: 10px; align-items: center; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--a-line); border-radius: 14px; padding: 10px 12px; font-weight: 900; font-size: 14px; }
.arc-mlist li::before { content: ''; flex: none; width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--a-dim); }
.arc-mlist li.done { border-color: var(--a-grn); background: rgba(61, 255, 154, 0.1); color: #c9ffe3; }
.arc-mlist li.done::before { border-color: var(--a-grn); background: var(--a-grn) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l5 5 9-10' fill='none' stroke='%23062' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; box-shadow: 0 0 10px var(--a-grn); }
.arc-mlist li small { margin-left: auto; font-family: var(--f-pix); font-size: 9px; color: var(--a-yel); white-space: nowrap; }
.arc-mlist li button { margin-left: auto; border: 1px solid var(--a-cyan); color: var(--a-cyan); background: none; border-radius: 999px; font-size: 11.5px; padding: 2px 9px; font-weight: 900; white-space: nowrap; }
.arc-mnote { margin: 10px 0 0; font-size: 12px; color: var(--a-dim); font-weight: 700; }

/* ---------- ゲームの一覧（筐体カード） ---------- */
.arc-sec { margin: 0 0 34px; }
.arc-sh { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; justify-content: space-between; margin-bottom: 14px; }
.arc-sh .arc-sk { margin: 0; }
.arc-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.arc-filter button { border: 1.5px solid var(--a-line); background: rgba(255, 255, 255, 0.04); color: var(--a-dim); border-radius: 999px; padding: 6px 14px; font-weight: 900; font-size: 13px; transition: 0.15s; }
.arc-filter button[aria-selected='true'] { background: #fff; color: var(--a-bg); border-color: #fff; box-shadow: 0 0 16px rgba(255, 255, 255, 0.4); }
.arc-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 262px), 1fr)); }
.cab { display: flex; animation: cab-in 0.5s both; }
.cab[hidden] { display: none !important; }
@keyframes cab-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } }
.cab-b { position: relative; display: flex; flex-direction: column; width: 100%; text-align: left; padding: 0; border: 0; border-radius: 20px; background: linear-gradient(180deg, #151b52, #0c1036); color: var(--a-txt); overflow: hidden; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--c1) 55%, transparent), 0 14px 34px rgba(0, 0, 0, 0.45); transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s; }
.cab-b:hover, .cab-b:focus-visible { transform: translateY(-6px); box-shadow: 0 0 0 2px var(--c1), 0 0 34px color-mix(in srgb, var(--c1) 55%, transparent), 0 22px 44px rgba(0, 0, 0, 0.5); outline: none; }
.cab-b:active { transform: translateY(-2px) scale(0.99); }
.cab-art { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.cab-art svg { display: block; width: 100%; height: 100%; }
.cab-art::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 3px); pointer-events: none; mix-blend-mode: multiply; }
.cab-tag { position: absolute; z-index: 1; top: 10px; left: 10px; font-style: normal; font-family: var(--f-pix); font-size: 9px; padding: 5px 7px; border-radius: 6px; color: #fff; background: var(--a-red); box-shadow: 0 0 12px rgba(255, 79, 109, 0.8); }
.cab-tag.t-daily { background: var(--a-grn); color: #032; box-shadow: 0 0 12px rgba(61, 255, 154, 0.8); }
.cab-gr { position: absolute; z-index: 1; top: 8px; right: 10px; font-style: normal; font-family: var(--f-pix); font-size: 16px; }
.cab-gr:empty { display: none; }
.cab-body { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px 12px; flex: 1; }
.cab-en { font-family: var(--f-pix); font-size: 10px; letter-spacing: 0.06em; color: var(--c1); text-shadow: 0 0 10px color-mix(in srgb, var(--c1) 70%, transparent); }
.cab-ja { font-family: var(--f-display); font-weight: 400; font-size: 21px; line-height: 1.3; color: #fff; }
.cab-d { font-size: 13px; line-height: 1.6; color: #c7cdf2; font-weight: 700; flex: 1; }
.cab-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 8px; font-size: 12px; color: var(--a-dim); font-weight: 900; }
.cab-g { border: 1px solid color-mix(in srgb, var(--c2) 70%, transparent); color: var(--c2); border-radius: 999px; padding: 1px 8px; }
.cab-best { margin-left: auto; font-family: var(--f-pix); font-size: 9px; color: var(--a-yel); }
.cab-play { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 16px 16px; padding: 10px; border-radius: 12px; font-family: var(--f-pix); font-size: 12px; color: #0a0d2c; background: linear-gradient(90deg, var(--c1), var(--c2)); box-shadow: 0 4px 18px color-mix(in srgb, var(--c1) 45%, transparent); }
.cab-play i { font-style: normal; transition: transform 0.2s; }
.cab-b:hover .cab-play i { transform: translateX(4px); }

/* ---------- 自己ベスト・トロフィー・にがて単語・ほかへ ---------- */
.arc-two { display: grid; gap: 16px; }
@media (min-width: 900px) { .arc-two { grid-template-columns: 1fr 1fr; } }
.arc-panel { border-radius: 22px; padding: 16px 18px; background: var(--a-panel); border: 1.5px solid var(--a-line); }
.arc-hs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.arc-hs li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 12px; background: rgba(0, 0, 0, 0.22); font-weight: 900; font-size: 13.5px; }
.arc-hs .n { font-family: var(--f-pix); font-size: 10px; color: var(--a-dim); }
.arc-hs .v { font-family: var(--f-pix); font-size: 11px; color: var(--a-yel); }
.arc-hs .gr { font-family: var(--f-pix); font-size: 13px; width: 22px; text-align: center; }
.arc-hs li.none .v { color: var(--a-dim); }
.arc-hs button { border: 0; background: none; color: inherit; text-align: left; padding: 0; font-weight: 900; }
.arc-hs button:hover { color: var(--a-cyan); }
.arc-tro { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); }
.arc-tro li { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 12px; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--a-line); font-size: 12px; font-weight: 900; line-height: 1.35; color: #67709c; }
.arc-tro li i { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 17px; background: #1b2150; filter: grayscale(1); opacity: 0.45; }
.arc-tro li small { display: block; font-weight: 700; font-size: 10.5px; color: #59628f; }
.arc-tro li.on { color: #fff; border-color: rgba(255, 225, 77, 0.5); background: linear-gradient(135deg, rgba(255, 225, 77, 0.14), rgba(255, 165, 61, 0.06)); }
.arc-tro li.on i { filter: none; opacity: 1; background: radial-gradient(circle at 35% 30%, #fff6b0, var(--a-yel) 45%, var(--a-org)); box-shadow: 0 0 14px rgba(255, 225, 77, 0.6); }
.arc-tro li.on small { color: #ffe9a8; }
.arc-weak { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.arc-weak li { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 12px; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--a-line); font-size: 13px; font-weight: 700; color: #cdd3f5; min-width: 0; }
.arc-weak li b { font-family: var(--f-en); color: #fff; font-weight: 800; font-size: 15px; }
.arc-weak li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arc-weak li em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--a-red); font-weight: 900; white-space: nowrap; }
.arc-weak .empty { grid-column: 1 / -1; color: var(--a-dim); }
.ax-say { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--a-cyan); background: rgba(53, 224, 255, 0.12); color: var(--a-cyan); display: grid; place-items: center; padding: 0; }
.ax-say svg { width: 16px; height: 16px; }
.ax-say:hover { background: var(--a-cyan); color: #04122a; }
.arc-more { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.arc-mo { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 18px; text-decoration: none; color: #fff; background: linear-gradient(135deg, rgba(53, 224, 255, 0.12), rgba(255, 79, 216, 0.1)); border: 1.5px solid var(--a-line); transition: 0.2s; }
.arc-mo:hover { border-color: var(--a-cyan); transform: translateY(-3px); box-shadow: 0 0 22px rgba(53, 224, 255, 0.3); }
.arc-mo span { font-family: var(--f-pix); font-size: 9px; color: var(--a-cyan); }
.arc-mo b { font-family: var(--f-display); font-weight: 400; font-size: 18px; }
.arc-mo small { color: var(--a-dim); font-weight: 700; font-size: 12.5px; }
.arc-foot { font-size: 12px; color: #7c86b8; font-weight: 700; }

/* ---------- 絵の動き ---------- */
.cab-art svg *, .ax-art svg * { transform-box: fill-box; }
.a-tw { animation: a-tw 2.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes a-tw { 50% { opacity: 0.2; } }
.a-fall { animation: a-fall 3.2s linear infinite; animation-delay: var(--d, 0s); }
@keyframes a-fall { 0% { transform: translate(-12px, 10px); } 100% { transform: translate(18px, 96px); } }
.a-beam { animation: a-beam 1.6s steps(1) infinite; }
@keyframes a-beam { 0%, 60% { opacity: 0; } 62%, 74% { opacity: 1; } 76% { opacity: 0; } }
.a-boom { transform-origin: center; animation: a-boom 1.6s ease-out infinite; }
@keyframes a-boom { 0%, 70% { opacity: 0; transform: scale(0.2); } 74% { opacity: 1; } 100% { opacity: 0; transform: scale(2.4); } }
.a-step { animation: a-step 2.4s steps(4) infinite; animation-delay: var(--d, 0s); }
@keyframes a-step { 0% { transform: translate(0, 0); } 100% { transform: translate(0, 28px); } }
.a-shot { animation: a-shot 0.6s linear infinite; }
@keyframes a-shot { to { stroke-dashoffset: -28; } }
.a-key { animation: a-key 1.25s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes a-key { 0%, 30%, 100% { transform: translateY(0); } 15% { transform: translateY(3px); filter: brightness(1.8); } }
.a-float { animation: a-float 3.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes a-float { 0%, 100% { transform: translateY(14px) rotate(-3deg); } 50% { transform: translateY(-14px) rotate(3deg); } }
.a-pulse { animation: a-pulse 1.2s ease-in-out infinite; transform-origin: center; }
@keyframes a-pulse { 50% { transform: scale(1.12); opacity: 0.8; } }
.a-sweep { transform-origin: left center; animation: a-sweep 2.4s cubic-bezier(0.6, 0, 0.3, 1) infinite; }
@keyframes a-sweep { 0% { transform: scaleX(0.05); opacity: 0; } 15% { opacity: 1; } 60%, 100% { transform: scaleX(1); } }
.a-mag { animation: a-mag 4s ease-in-out infinite; }
@keyframes a-mag { 0% { transform: translate(70px, 60px); } 33% { transform: translate(210px, 40px); } 66% { transform: translate(240px, 130px); } 100% { transform: translate(70px, 60px); } }
.a-flip { transform-origin: center; animation: a-flip 3s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes a-flip { 0%, 8% { transform: scaleY(1); } 4% { transform: scaleY(0.05); } }
.a-speed { animation: a-speed 0.5s linear infinite; }
@keyframes a-speed { from { transform: translateX(30px); } to { transform: translateX(-30px); } }
.a-bar { transform-origin: left center; animation: a-bar 2.2s linear infinite; }
@keyframes a-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.a-card { animation: a-card 2.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes a-card { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.a-zap { animation: a-shot 0.5s linear infinite, a-tw 1s ease-in-out infinite; }
.a-bounce { transform-origin: center; animation: a-bounce 1s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
@keyframes a-bounce { from { transform: scale(0.85); } to { transform: scale(1.06); } }
.a-spot { animation: a-mag 4.5s ease-in-out infinite; }
.a-opt { animation: a-opt 1.4s steps(1) infinite; animation-delay: var(--d, 0s); }
@keyframes a-opt { 0%, 24% { filter: brightness(1.9) drop-shadow(0 0 6px #7ce0ff); } 25% { filter: none; } }

/* ===================== ゲーム画面（全画面） ===================== */
body.ax-lock { overflow: hidden; }
body.ax-lock .toast { z-index: 150; }
.ax { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(2, 3, 14, 0.82); backdrop-filter: blur(6px); animation: ax-in 0.25s both; color: var(--a-txt); }
@keyframes ax-in { from { opacity: 0; } }
.ax-box { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; height: 100dvh; background: radial-gradient(800px 400px at 50% -10%, color-mix(in srgb, var(--c1) 22%, transparent), transparent 70%), #070a22; overflow: hidden; }
@media (min-width: 760px) and (min-height: 600px) {
  .ax-box { width: min(940px, 96vw); height: min(760px, 94vh); border-radius: 26px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--c1) 60%, transparent), 0 0 60px color-mix(in srgb, var(--c1) 35%, transparent), 0 30px 80px rgba(0, 0, 0, 0.6); animation: ax-pop 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; }
}
@keyframes ax-pop { from { transform: scale(0.92) translateY(20px); opacity: 0; } }
.ax-top { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 10px; padding-top: max(8px, env(safe-area-inset-top)); border-bottom: 1px solid var(--a-line); background: rgba(0, 0, 0, 0.3); }
.ax-ib { flex: none; width: 38px; height: 38px; border-radius: 12px; border: 1.5px solid var(--a-line); background: rgba(255, 255, 255, 0.05); color: #fff; display: grid; place-items: center; font-weight: 900; font-size: 15px; padding: 0; }
.ax-ib:hover { border-color: var(--c1); }
.ax-ib[aria-pressed='false'] { opacity: 0.45; }
.ax-ib svg { width: 18px; height: 18px; }
.ax-ti { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.15; }
.ax-ti small { font-family: var(--f-pix); font-size: 8.5px; color: var(--c1); letter-spacing: 0.06em; }
.ax-ti b { font-family: var(--f-display); font-weight: 400; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-main { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ax-hud { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 6px 14px 4px; }
.ax-hud[hidden] { display: none; }
.ax-sc small, .ax-rt small { display: block; font-family: var(--f-pix); font-size: 8px; color: var(--a-dim); letter-spacing: 0.08em; }
.ax-sc b { font-family: var(--f-pix); font-size: clamp(14px, 3.6vw, 20px); color: #fff; text-shadow: 0 0 10px color-mix(in srgb, var(--c1) 80%, transparent); }
.ax-sc b.bump { animation: ax-bump 0.25s; }
@keyframes ax-bump { 40% { transform: scale(1.25); color: var(--a-yel); } }
.ax-cb { text-align: center; font-family: var(--f-pix); font-size: 11px; color: var(--a-yel); min-width: 90px; }
.ax-cb b { display: block; font-size: clamp(16px, 4vw, 22px); line-height: 1.1; text-shadow: 0 0 12px rgba(255, 225, 77, 0.8); }
.ax-cb.hot b { color: var(--a-pink); text-shadow: 0 0 14px var(--a-pink); animation: ax-bump 0.3s; }
.ax-cb i { font-style: normal; font-size: 8px; color: var(--a-dim); }
.ax-cb.fever { animation: ax-rainbow 0.6s linear infinite; }
@keyframes ax-rainbow { to { filter: hue-rotate(360deg); } }
.ax-rt { text-align: right; }
.ax-rt b { font-family: var(--f-pix); font-size: clamp(13px, 3.4vw, 18px); color: #fff; }
.ax-life { letter-spacing: 2px; font-size: 18px; line-height: 1; }
.ax-life i { font-style: normal; color: var(--a-red); text-shadow: 0 0 10px var(--a-red); display: inline-block; }
.ax-life i.off { color: #3a3f66; text-shadow: none; }
.ax-life i.lost { animation: ax-lost 0.6s; }
@keyframes ax-lost { 30% { transform: scale(1.8); color: #fff; } }
.ax-tb { flex: none; height: 5px; background: rgba(255, 255, 255, 0.08); }
.ax-tb[hidden] { display: none; }
.ax-tb i { display: block; height: 100%; width: 100%; transform-origin: left; background: linear-gradient(90deg, var(--c1), var(--c2)); box-shadow: 0 0 10px var(--c1); }
.ax-tb.low i { background: var(--a-red); box-shadow: 0 0 10px var(--a-red); }
.ax-pf { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.ax-pf.shake { animation: ax-shake 0.4s; }
@keyframes ax-shake { 15% { transform: translate(-8px, 4px); } 30% { transform: translate(7px, -5px); } 45% { transform: translate(-5px, -3px); } 60% { transform: translate(4px, 4px); } 80% { transform: translate(-2px, 1px); } }
.ax-flash { position: absolute; inset: 0; pointer-events: none; z-index: 5; animation: ax-flash 0.45s both; }
@keyframes ax-flash { from { opacity: 0.55; } to { opacity: 0; } }
.ax-cv { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* 画面の上に重ねるもの（説明・カウントダウン・一時停止・結果） */
.ax-ly { position: absolute; inset: 0; z-index: 10; overflow-y: auto; overscroll-behavior: contain; background: rgba(5, 7, 26, 0.9); animation: ax-in 0.2s both; }
.ax-ly-c { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 18px 16px 24px; gap: 10px; }
.ax-art { width: min(100%, 420px, 36vh * 16 / 9); aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 2px color-mix(in srgb, var(--c1) 60%, transparent), 0 0 40px color-mix(in srgb, var(--c1) 30%, transparent); flex: none; }
.ax-art svg { width: 100%; height: 100%; display: block; }
.ax-en { margin: 6px 0 0; font-family: var(--f-pix); font-size: clamp(14px, 3.6vw, 20px); color: var(--c1); text-shadow: 0 0 14px color-mix(in srgb, var(--c1) 80%, transparent); letter-spacing: 0.04em; }
.ax-ja { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(22px, 5vw, 30px); line-height: 1.25; }
.ax-d { margin: 0; max-width: 32em; font-size: 14px; font-weight: 700; color: #cfd5f7; }
.ax-how { list-style: none; counter-reset: s; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; width: min(100%, 460px); text-align: left; }
@media (min-width: 700px) { .ax-how { grid-template-columns: repeat(3, 1fr); width: min(100%, 760px); } .ax-how li { font-size: 12.5px; } }
@media (max-height: 720px) { .ax-intro .ax-d { display: none; } }
.ax-how li { counter-increment: s; display: flex; gap: 10px; align-items: flex-start; padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--a-line); font-size: 13.5px; font-weight: 700; }
.ax-how li::before { content: counter(s); flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--c1); color: #04122a; font-family: var(--f-pix); font-size: 10px; }
.ax-keys { margin: 0; font-size: 12px; color: var(--a-dim); font-weight: 700; }
.ax-best { margin: 0; font-family: var(--f-pix); font-size: 11px; color: var(--a-yel); }
.ax-lvs { display: flex; gap: 6px; }
.ax-lvs button { border: 1.5px solid var(--a-line); background: rgba(0, 0, 0, 0.3); color: var(--a-dim); border-radius: 999px; padding: 6px 16px; font-weight: 900; font-size: 13.5px; }
.ax-lvs button.on { border-color: var(--c1); color: #fff; background: color-mix(in srgb, var(--c1) 22%, transparent); }
.ax-go { margin-top: 6px; border: 0; border-radius: 16px; padding: 14px 44px; font-family: var(--f-pix); font-size: 16px; color: #050816; background: linear-gradient(90deg, var(--c1), var(--c2)); box-shadow: 0 0 30px color-mix(in srgb, var(--c1) 60%, transparent); animation: arc-pulse2 1.2s ease-in-out infinite; }
.ax-go:hover { filter: brightness(1.1); }
.ax-intro .ax-go { position: sticky; bottom: 14px; z-index: 2; }
.ax-sub { border: 1.5px solid var(--a-line); background: rgba(255, 255, 255, 0.05); color: #fff; border-radius: 14px; padding: 10px 18px; font-weight: 900; font-size: 14px; }
.ax-sub:hover { border-color: var(--c1); }
.ax-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ax-cd { position: absolute; inset: 0; z-index: 12; display: grid; place-items: center; pointer-events: none; }
.ax-cd b { font-family: var(--f-pix); font-size: clamp(60px, 18vw, 120px); color: #fff; text-shadow: 0 0 30px var(--c1), 0 0 60px var(--c2); animation: ax-cd 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
.ax-cd b.go { color: var(--a-yel); }
@keyframes ax-cd { from { transform: scale(2.4); opacity: 0; } 40% { opacity: 1; } to { transform: scale(1); opacity: 1; } }
.ax-ps { font-family: var(--f-pix); font-size: 26px; color: #fff; margin: 0 0 14px; text-shadow: 0 0 16px var(--c1); }
.ax-banner { position: absolute; left: 0; right: 0; top: 38%; z-index: 8; text-align: center; pointer-events: none; animation: ax-banner 1.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
.ax-banner b { display: inline-block; font-family: var(--f-pix); font-size: clamp(18px, 5vw, 30px); color: #fff; padding: 12px 26px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c1) 50%, transparent) 20%, color-mix(in srgb, var(--c2) 50%, transparent) 80%, transparent); text-shadow: 0 0 12px var(--c1); }
.ax-banner small { display: block; margin-top: 6px; font-weight: 900; font-size: 14px; color: #fff; text-shadow: 0 1px 6px #000; }
@keyframes ax-banner { 0% { opacity: 0; transform: scaleX(0.2); } 15% { opacity: 1; transform: scaleX(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-16px); } }
.ax-pop { position: absolute; z-index: 6; pointer-events: none; font-family: var(--f-pix); font-size: 14px; color: var(--a-yel); text-shadow: 0 0 8px #000, 0 0 12px var(--a-yel); transform: translate(-50%, -50%); animation: ax-popup 0.9s ease-out both; white-space: nowrap; }
.ax-pop.ng { color: var(--a-red); text-shadow: 0 0 8px #000, 0 0 12px var(--a-red); }
.ax-pop small { display: block; font-family: var(--f-ja); font-weight: 900; font-size: 13px; color: #fff; text-shadow: 0 1px 4px #000; }
@keyframes ax-popup { 0% { opacity: 0; transform: translate(-50%, -30%) scale(0.6); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -140%) scale(1); } }

/* 結果 */
.ax-res { width: min(100%, 520px); }
.ax-rk { position: relative; width: 132px; height: 132px; margin: 0 auto; display: grid; place-items: center; border-radius: 50%; font-family: var(--f-pix); font-size: 60px; color: #fff; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.35), transparent 50%), var(--rk, #888); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.12), 0 0 50px var(--rk, #888); animation: ax-stamp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both; }
.ax-rk::after { content: 'RANK'; position: absolute; bottom: 16px; font-size: 9px; letter-spacing: 0.1em; opacity: 0.85; }
@keyframes ax-stamp { from { transform: scale(3) rotate(-25deg); opacity: 0; } to { transform: scale(1) rotate(-6deg); opacity: 1; } }
.ax-rk.r-S { --rk: linear-gradient(135deg, #ffe14d, #ff8a3d 50%, #ff4fd8); background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.5), transparent 50%), linear-gradient(135deg, #ffe14d, #ff8a3d 50%, #ff4fd8); box-shadow: 0 0 0 6px rgba(255, 225, 77, 0.25), 0 0 60px #ff8a3d; }
.ax-rk.r-A { --rk: #ff4f6d; }
.ax-rk.r-B { --rk: #35a0ff; }
.ax-rk.r-C { --rk: #2fbf71; }
.ax-rk.r-D { --rk: #6b7299; }
.ax-rl { margin: 10px 0 0; font-weight: 900; font-size: 16px; }
.ax-fs { margin: 2px 0 0; font-family: var(--f-pix); font-size: clamp(30px, 8vw, 46px); color: #fff; text-shadow: 0 0 20px var(--c1); line-height: 1.2; }
.ax-fs small { font-size: 0.4em; margin-left: 6px; color: var(--a-dim); }
.ax-nr { display: inline-block; margin: 6px 0 0; font-family: var(--f-pix); font-size: 13px; color: #1a0b00; background: linear-gradient(90deg, var(--a-yel), var(--a-org)); padding: 7px 14px; border-radius: 8px; box-shadow: 0 0 24px rgba(255, 196, 61, 0.8); animation: ax-nr 0.8s ease-in-out infinite alternate; }
@keyframes ax-nr { to { transform: scale(1.08) rotate(-2deg); } }
.ax-pb { margin: 4px 0 0; font-size: 12.5px; color: var(--a-dim); font-weight: 900; }
.ax-st { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.ax-st li { border: 1px solid var(--a-line); border-radius: 12px; padding: 6px 12px; background: rgba(255, 255, 255, 0.04); font-size: 12px; font-weight: 900; color: var(--a-dim); }
.ax-st li b { display: block; font-family: var(--f-pix); font-size: 13px; color: #fff; margin-top: 2px; }
.ax-gain { margin: 10px 0 0; font-weight: 900; font-size: 14px; color: var(--a-grn); }
.ax-gain span { display: block; color: var(--a-yel); font-size: 13px; }
.ax-miss { width: 100%; margin: 12px 0 0; text-align: left; border-top: 1px dashed var(--a-line); padding-top: 10px; }
.ax-miss p { margin: 0 0 6px; font-size: 12.5px; font-weight: 900; color: var(--a-pink); }
.ax-miss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.ax-miss li { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); font-size: 13px; font-weight: 700; }
.ax-miss li b { font-family: var(--f-en); font-size: 15px; color: #fff; }
.ax-miss li.tf { display: block; }
.ax-miss li.tf span { display: block; font-size: 12px; color: var(--a-dim); }
.ax-miss li a { color: var(--a-cyan); font-size: 12px; margin-left: auto; white-space: nowrap; }

/* ---------- メテオ・インベーダー（canvas の上の文字） ---------- */
.mt-tg { position: absolute; left: 50%; top: 8px; z-index: 3; transform: translateX(-50%); max-width: calc(100% - 24px); padding: 6px 18px 8px; border-radius: 16px; text-align: center; background: rgba(5, 8, 32, 0.72); border: 2px solid var(--c1); box-shadow: 0 0 24px color-mix(in srgb, var(--c1) 50%, transparent); pointer-events: none; }
.mt-tg small { display: block; font-family: var(--f-pix); font-size: 8px; color: var(--c1); letter-spacing: 0.08em; }
.mt-tg b { font-size: clamp(17px, 4.6vw, 24px); font-weight: 900; color: #fff; line-height: 1.3; }
.mt-tg.gold { border-color: var(--a-yel); box-shadow: 0 0 30px rgba(255, 225, 77, 0.8); }
.mt-tg.gold small { color: var(--a-yel); }
.mt-tg.new { animation: ax-bump 0.3s; }
.ti-kb { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); display: grid; gap: 5px; background: rgba(3, 10, 20, 0.85); border-top: 1px solid rgba(61, 255, 154, 0.3); user-select: none; -webkit-user-select: none; }
.ti-kr { display: flex; gap: 4px; justify-content: center; }
.ti-k { flex: 1; max-width: 42px; height: 46px; border-radius: 9px; border: 1.5px solid rgba(61, 255, 154, 0.45); background: #0b2a22; color: #c8ffe4; font-family: var(--f-en); font-weight: 800; font-size: 17px; padding: 0; touch-action: manipulation; text-transform: uppercase; }
.ti-k:active, .ti-k.on { background: var(--a-grn); color: #032; }
.ti-k.wide { flex: 1.6; max-width: 70px; font-size: 11px; font-family: var(--f-ja); }
.ti-tog { position: absolute; bottom: 10px; right: 8px; z-index: 4; border: 1px solid rgba(61, 255, 154, 0.5); background: rgba(3, 10, 20, 0.7); color: #c8ffe4; border-radius: 999px; font-size: 11.5px; font-weight: 900; padding: 3px 10px; }

/* ---------- 聞き取りバルーン ---------- */
.bl { position: absolute; inset: 0; background: linear-gradient(180deg, #2b1055 0%, #7a2a8a 45%, #e0568c 78%, #ffb84d 100%); }
.bl-cl { position: absolute; height: 34px; border-radius: 40px; background: rgba(255, 255, 255, 0.2); filter: blur(1px); animation: bl-cl linear infinite; }
@keyframes bl-cl { from { transform: translateX(-30vw); } to { transform: translateX(130vw); } }
.bl-b { position: absolute; left: 0; top: 0; width: 96px; height: 150px; border: 0; padding: 0; background: none; touch-action: manipulation; will-change: transform; }
.bl-b .bb { position: absolute; left: 0; top: 0; width: 96px; height: 112px; border-radius: 50% 50% 48% 48% / 55% 55% 45% 45%; background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.75) 0 8%, transparent 22%), radial-gradient(circle at 50% 60%, var(--bc), color-mix(in srgb, var(--bc) 70%, #000)); box-shadow: inset -8px -10px 18px rgba(0, 0, 0, 0.18); display: grid; place-items: center; transition: transform 0.15s; }
.bl-b .bb::after { content: ''; position: absolute; left: 50%; bottom: -8px; width: 14px; height: 10px; transform: translateX(-50%); background: var(--bc); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.bl-b .bs { position: absolute; left: 47px; top: 118px; width: 2px; height: 34px; background: rgba(255, 255, 255, 0.65); transform-origin: top; animation: bl-sw 1.2s ease-in-out infinite alternate; }
@keyframes bl-sw { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
.bl-b b { position: relative; z-index: 1; font-family: var(--f-en); font-weight: 800; font-size: 16px; color: #1a0b2e; padding: 0 4px; line-height: 1.1; word-break: break-word; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); }
.bl-b:hover .bb { transform: scale(1.06); }
.bl-b.pop .bb { animation: bl-pop 0.25s ease-out forwards; }
.bl-b.pop .bs { animation: bl-fall 0.6s ease-in forwards; }
@keyframes bl-pop { 50% { transform: scale(1.35); opacity: 0.7; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes bl-fall { to { transform: translateY(80px) rotate(30deg); opacity: 0; } }
.bl-b.dud .bb { filter: grayscale(1) brightness(0.6); animation: bl-dud 0.7s ease-in forwards; }
@keyframes bl-dud { 30% { transform: scale(0.9, 1.1); } 100% { transform: translateY(240px) rotate(40deg) scale(0.5); opacity: 0; } }
.bl-b.right .bb { box-shadow: 0 0 0 4px #fff, 0 0 30px #fff; }
.bl-ctl { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; gap: 10px; justify-content: center; padding: 10px 10px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(0deg, rgba(43, 16, 85, 0.85), transparent); }
.bl-say { display: inline-flex; gap: 8px; align-items: center; border: 2px solid #fff; background: rgba(26, 11, 46, 0.7); color: #fff; border-radius: 999px; padding: 10px 22px; font-weight: 900; font-size: 15px; }
.bl-say svg { width: 22px; height: 22px; }
.bl-say.on { animation: arc-pulse2 0.5s ease-in-out infinite; border-color: var(--a-yel); color: var(--a-yel); }
.bl-q { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 3; font-family: var(--f-pix); font-size: 10px; color: #fff; background: rgba(26, 11, 46, 0.6); padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.bl-ans { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 5; text-align: center; pointer-events: none; animation: ax-popup 1.4s ease-out both; }
.bl-ans b { display: block; font-family: var(--f-en); font-size: 32px; font-weight: 800; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); }
.bl-ans span { font-weight: 900; font-size: 15px; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); }
.bl-sh { position: absolute; z-index: 3; width: 8px; height: 8px; border-radius: 2px; pointer-events: none; animation: bl-sh 0.7s ease-out forwards; }
@keyframes bl-sh { to { transform: translate(var(--x), var(--y)) rotate(200deg); opacity: 0; } }

/* ---------- ワードサーチ ---------- */
.ws { position: absolute; inset: 0; overflow-y: auto; padding: 12px 12px 20px; display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; align-content: flex-start; justify-content: center; background: radial-gradient(600px 300px at 50% 0%, rgba(255, 225, 77, 0.12), transparent 70%); }
.ws-board { position: relative; flex: none; width: min(100%, 470px, calc(100vh - 230px)); aspect-ratio: 1; touch-action: none; user-select: none; -webkit-user-select: none; border-radius: 16px; background: #1e1607; border: 2px solid rgba(255, 225, 77, 0.45); box-shadow: 0 0 30px rgba(255, 225, 77, 0.15); }
.ws-grid { position: absolute; inset: 6px; display: grid; }
.ws-c { display: grid; place-items: center; font-family: var(--f-en); font-weight: 800; font-size: clamp(14px, 4.2vw, 22px); color: #fff3c4; text-transform: uppercase; position: relative; z-index: 2; transition: color 0.2s; }
.ws-c.hl { color: #fff; }
.ws-c.hint { animation: ws-hint 0.6s ease-in-out 4; color: var(--a-yel); }
@keyframes ws-hint { 50% { transform: scale(1.5); text-shadow: 0 0 12px var(--a-yel); } }
.ws-svg { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); z-index: 1; pointer-events: none; }
.ws-svg line { stroke-linecap: round; opacity: 0.55; }
.ws-svg line.cur { opacity: 0.4; stroke: #fff; }
.ws-svg line.found { animation: ws-found 0.4s ease-out; }
@keyframes ws-found { from { opacity: 1; stroke-width: 999; } }
.ws-side { flex: 1 1 220px; max-width: 470px; }
.ws-clues { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (min-width: 760px) { .ws-clues { grid-template-columns: 1fr; } }
.ws-clues li { padding: 7px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--a-line); font-size: 13px; font-weight: 900; line-height: 1.35; }
.ws-clues li small { display: block; font-family: var(--f-en); letter-spacing: 0.18em; color: var(--a-dim); font-size: 12px; margin-top: 2px; }
.ws-clues li.ok { border-color: var(--lc); background: color-mix(in srgb, var(--lc) 18%, transparent); }
.ws-clues li.ok small { color: #fff; letter-spacing: 0.04em; font-size: 15px; }
.ws-hintb { margin-top: 10px; width: 100%; }

/* ---------- ラッシュ・クイズ系（カードと4つのボタン） ---------- */
.qz { position: absolute; inset: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; padding: 14px 14px 20px; gap: 12px; }
.qz > :first-child { margin-top: auto; }
.qz > :last-child { margin-bottom: auto; }
@media (min-width: 760px) { .qz { gap: 16px; } .qz-b { min-height: 64px; font-size: 17px; } .qz-card { padding: 30px 24px; } }
.qz-card { position: relative; width: min(100%, 620px); border-radius: 22px; padding: 22px 18px; text-align: center; background: linear-gradient(160deg, #161d5c, #0b0f36); border: 2px solid color-mix(in srgb, var(--c1) 70%, transparent); box-shadow: 0 0 30px color-mix(in srgb, var(--c1) 30%, transparent); animation: qz-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes qz-in { from { opacity: 0; transform: translateY(18px) scale(0.97); } }
.qz-card.fever { border-color: transparent; background: linear-gradient(#10154a, #10154a) padding-box, linear-gradient(90deg, #ff4f6d, #ffe14d, #3dff9a, #35e0ff, #ff4fd8) border-box; animation: qz-in 0.35s both, ax-rainbow 1.2s linear infinite; }
.qz-k { margin: 0 0 6px; font-size: 12px; font-weight: 900; color: var(--a-dim); display: flex; gap: 6px; justify-content: center; align-items: center; flex-wrap: wrap; }
.qz-k .qz-lv { font-family: var(--f-pix); font-size: 9px; padding: 3px 6px; border-radius: 5px; background: var(--c1); color: #04122a; }
.qz-w { margin: 0; font-family: var(--f-en); font-weight: 800; font-size: clamp(30px, 9vw, 52px); line-height: 1.15; color: #fff; text-shadow: 0 0 22px color-mix(in srgb, var(--c1) 70%, transparent); word-break: break-word; }
.qz-s { margin: 0; font-family: var(--f-en); font-weight: 700; font-size: clamp(17px, 4.4vw, 22px); line-height: 1.5; color: #fff; }
.qz-hd { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: clamp(20px, 5vw, 30px); line-height: 1.3; color: #fff; }
.qz-ja { margin: 8px 0 0; font-size: 12.5px; color: var(--a-dim); font-weight: 700; }
.qz-ch { width: min(100%, 620px); display: grid; gap: 10px; }
@media (min-width: 560px) { .qz-ch.g2 { grid-template-columns: 1fr 1fr; } }
.qz-b { position: relative; display: flex; align-items: center; gap: 10px; text-align: left; width: 100%; border: 2px solid var(--a-line); background: rgba(255, 255, 255, 0.05); color: #fff; border-radius: 16px; padding: 12px 14px; font-weight: 900; font-size: 15.5px; line-height: 1.4; min-height: 56px; transition: transform 0.1s, border-color 0.15s, background 0.15s; animation: qz-in 0.35s both; touch-action: manipulation; }
.qz-b:nth-child(2) { animation-delay: 0.04s; }
.qz-b:nth-child(3) { animation-delay: 0.08s; }
.qz-b:nth-child(4) { animation-delay: 0.12s; }
.qz-b:hover:not(:disabled) { border-color: var(--c1); background: color-mix(in srgb, var(--c1) 14%, transparent); transform: translateY(-2px); }
.qz-b:disabled { cursor: default; }
.qz-b .kn { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-family: var(--f-pix); font-size: 10px; background: rgba(255, 255, 255, 0.1); color: var(--a-dim); }
.qz-b.en { font-family: var(--f-en); font-weight: 700; }
.qz-b.ok { border-color: var(--a-grn); background: rgba(61, 255, 154, 0.18); box-shadow: 0 0 20px rgba(61, 255, 154, 0.35); }
.qz-b.ok .kn { background: var(--a-grn); color: #032; }
.qz-b.ng { border-color: var(--a-red); background: rgba(255, 79, 109, 0.18); animation: qz-ng 0.35s; }
@keyframes qz-ng { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
.qz-b.dim { opacity: 0.4; }
.qz-b img { flex: none; width: 72px; height: 48px; object-fit: cover; border-radius: 8px; background: #222; }
.qz-why { width: min(100%, 620px); padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--a-line); font-size: 13.5px; font-weight: 700; animation: qz-in 0.3s both; }
.qz-why b { margin-right: 6px; }
.qz-why b.ok { color: var(--a-grn); }
.qz-why b.ng { color: var(--a-red); }
.qz-why a { color: var(--a-cyan); }
.qz-tf { width: min(100%, 620px); display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qz-tf button { height: clamp(90px, 22vh, 140px); border-radius: 22px; border: 3px solid; background: rgba(255, 255, 255, 0.04); display: grid; place-items: center; touch-action: manipulation; transition: transform 0.1s; }
.qz-tf button:active { transform: scale(0.96); }
.qz-tf button svg { width: 56%; height: 56%; }
.qz-tf .t { border-color: #3dd6ff; color: #3dd6ff; box-shadow: 0 0 22px rgba(61, 214, 255, 0.3); }
.qz-tf .f { border-color: #ff5ca8; color: #ff5ca8; box-shadow: 0 0 22px rgba(255, 92, 168, 0.3); }
.qz-tf button.ok { background: rgba(61, 255, 154, 0.25); }
.qz-tf button.ng { background: rgba(255, 79, 109, 0.3); animation: qz-ng 0.35s; }
.qz-tf small { grid-column: 1 / -1; text-align: center; font-size: 11.5px; color: var(--a-dim); font-weight: 700; }
.qz-next { margin-top: 2px; }
.qz-img { width: min(100%, 620px); max-height: 30vh; object-fit: cover; border-radius: 16px; display: block; }

/* ---------- ペアさがし ---------- */
.pr { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px; gap: 10px; }
.pr-r { font-family: var(--f-pix); font-size: 11px; color: var(--a-dim); }
.pr-g { width: min(100%, 640px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (min-width: 640px) { .pr-g { grid-template-columns: repeat(4, 1fr); } }
.pr-c { min-height: clamp(64px, 12vh, 92px); border-radius: 16px; border: 2px solid; padding: 8px; font-weight: 900; font-size: clamp(13px, 3.6vw, 16px); line-height: 1.3; color: #fff; touch-action: manipulation; animation: pr-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: var(--d); word-break: break-word; transition: transform 0.12s, box-shadow 0.15s; }
@keyframes pr-in { from { opacity: 0; transform: rotateY(90deg) scale(0.8); } }
.pr-c.en { font-family: var(--f-en); font-weight: 700; font-size: clamp(14px, 3.8vw, 17px); border-color: #35e0ff; background: linear-gradient(160deg, #0d2d55, #081a36); }
.pr-c.ja { border-color: #b05cff; background: linear-gradient(160deg, #2c1150, #1a0a33); }
.pr-c.sel { transform: scale(1.06); box-shadow: 0 0 0 3px var(--a-yel), 0 0 24px var(--a-yel); }
.pr-c.ok { animation: pr-ok 0.45s ease-in forwards; }
@keyframes pr-ok { 30% { transform: scale(1.12); box-shadow: 0 0 30px var(--a-grn); border-color: var(--a-grn); } 100% { transform: scale(0); opacity: 0; } }
.pr-c.ng { animation: qz-ng 0.35s; border-color: var(--a-red); }
.pr-c.gone { visibility: hidden; }

/* ---------- きょうのワード（ゲーム画面の中では暗い色に） ---------- */
.ax-wd { position: absolute; inset: 0; overflow-y: auto; padding: 10px 12px 24px; }
.ax-wd .wd { max-width: 440px; }
.ax-wd .box-k { font-family: var(--f-pix); font-size: 10px; color: var(--c1); text-align: center; margin: 4px 0; }
.ax-wd .blk-h { display: none; }
.ax-wd .g-qja { color: var(--a-dim); font-size: 12.5px; text-align: center; }
.ax-wd .wd-c { background: rgba(255, 255, 255, 0.04); border-color: #3b4579; color: #fff; }
.ax-wd .wd-c.f { border-color: #a9b8ff; }
.ax-wd .wd-c.hit { background: #0b7cc1; border-color: #35a8ff; box-shadow: 0 0 14px rgba(53, 168, 255, 0.5); }
.ax-wd .wd-c.near { background: #ff922b; border-color: #ffb066; color: #fff; box-shadow: 0 0 14px rgba(255, 146, 43, 0.5); }
.ax-wd .wd-grid { max-width: max(230px, calc((100dvh - 420px) * 0.83)); margin-left: auto; margin-right: auto; }
.ax-wd .wd-c { font-size: clamp(18px, 5vw, 26px); }
@media (max-height: 700px) { .ax-wd .wd > .g-qja { display: none; } }
.ax-wd .wd > .g-qja { font-size: 11.5px; line-height: 1.5; margin: 2px 0 4px; }
.ax-wd .wd-c.miss { background: #2a2f4d; border-color: #2a2f4d; }
.ax-wd .wd-k { background: #1b2150; border-color: #3b4579; color: #fff; }
.ax-wd .wd-k.miss { background: #0c0f26; color: #4a5180; border-color: #20264d; }
.ax-wd .wd-modes button { background: rgba(255, 255, 255, 0.05); border-color: var(--a-line); color: var(--a-dim); }
.ax-wd .wd-modes button.on { background: #fff; color: var(--a-bg); }
.ax-wd .btn { background: rgba(255, 255, 255, 0.06); color: #fff; border: 1.5px solid var(--a-line); box-shadow: none; }
.ax-wd .btn-sky { background: linear-gradient(90deg, var(--c1), var(--c2)); color: #04122a; border: 0; }
.ax-wd .wd-res .w { color: var(--a-cyan); text-shadow: 0 0 16px var(--a-cyan); }
.ax-wd a { color: var(--a-cyan); }
.ax-wd .sheet-def { color: var(--a-dim); }

@media (prefers-reduced-motion: reduce) {
  .arc-floor, .a-tw, .a-fall, .a-beam, .a-boom, .a-step, .a-shot, .a-key, .a-float, .a-pulse, .a-sweep, .a-mag, .a-flip, .a-speed, .a-bar, .a-card, .a-zap, .a-bounce, .a-spot, .a-opt, .arc-btn-p, .arc-k, .arc-h1-b, .ax-go, .ax-nr { animation: none !important; }
  .ax-pf.shake { animation: none; }
}

/* スマホ：20本が縦に長くならないよう、2列のコンパクトなカードに（説明文と PLAY の帯は省く。タップで説明画面が開く） */
@media (max-width: 599px) {
  .arc-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cab-b { border-radius: 14px; }
  .cab-tag { top: 6px; left: 6px; font-size: 7px; padding: 4px 5px; }
  .cab-gr { top: 4px; right: 6px; font-size: 12px; }
  .cab-body { padding: 8px 10px 10px; gap: 1px; }
  .cab-en { font-size: 7px; }
  .cab-ja { font-size: 15px; line-height: 1.25; text-wrap: balance; word-break: auto-phrase; }
  .cab-d, .cab-play, .cab-meta > span:nth-child(2) { display: none; }
  .cab-meta { margin-top: 4px; font-size: 10px; gap: 4px; }
  .cab-g { padding: 0 6px; }
  .cab-best { font-size: 7px; }
}