/* AIと英単語しりとり（WORD CHAIN vs AI） */
.ax-sr { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 12px 12px; overflow: hidden; }
.ax-sr.touch { padding-bottom: 0; }
.ax-sr-top { width: min(100%, 640px); display: flex; align-items: center; gap: 12px; }
.ax-sr-bot { flex: none; width: clamp(80px, 24vw, 120px); aspect-ratio: 1; filter: drop-shadow(0 0 14px rgba(255, 79, 216, 0.55)); }
.ax-sr-bot svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ax-sr-bot .ant { animation: ax-sr-ant 1.2s ease-in-out infinite; }
@keyframes ax-sr-ant { 50% { opacity: 0.35; } }
.ax-sr-bot .eyes { transform-origin: 60px 55px; animation: ax-sr-blink 3.6s infinite; }
@keyframes ax-sr-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
.ax-sr-bot .happy, .ax-sr-bot .xeyes, .ax-sr-bot .swirl, .ax-sr-bot .sweat, .ax-sr-bot .flag { display: none; }
.ax-sr-bot[data-mood='think'] .eyes { animation: ax-sr-look 0.9s ease-in-out infinite; }
@keyframes ax-sr-look { 0%, 100% { transform: translateX(-6px); } 50% { transform: translateX(6px); } }
.ax-sr-bot[data-mood='sweat'] .eyes { display: none; }
.ax-sr-bot[data-mood='sweat'] .swirl { display: inline; }
.ax-sr-bot[data-mood='sweat'] .sweat { display: inline; animation: ax-sr-drop 0.8s ease-in infinite; }
.ax-sr-bot[data-mood='sweat'] svg { animation: ax-sr-shiver 0.15s linear infinite; }
@keyframes ax-sr-drop { from { transform: translateY(-4px); opacity: 1; } to { transform: translateY(14px); opacity: 0; } }
@keyframes ax-sr-shiver { 50% { transform: translateX(1.5px); } }
.ax-sr-bot[data-mood='lose'] .eyes { display: none; }
.ax-sr-bot[data-mood='lose'] .xeyes, .ax-sr-bot[data-mood='lose'] .flag { display: inline; }
.ax-sr-bot[data-mood='lose'] .flag { transform-origin: 104px 112px; animation: ax-sr-wave 0.5s ease-in-out infinite alternate; }
@keyframes ax-sr-wave { to { transform: rotate(-12deg); } }
.ax-sr-bot[data-mood='win'] .eyes { display: none; }
.ax-sr-bot[data-mood='win'] .happy { display: inline; }
.ax-sr-bub { position: relative; flex: 1; min-width: 0; min-height: 84px; border-radius: 18px; padding: 10px 14px; background: rgba(255, 79, 216, 0.1); border: 2px solid rgba(255, 79, 216, 0.6); box-shadow: 0 0 22px rgba(255, 79, 216, 0.25); }
.ax-sr-bub::before { content: ''; position: absolute; left: -10px; top: 32px; border: 8px solid transparent; border-right-color: rgba(255, 79, 216, 0.6); border-left: 0; }
.ax-sr-say { margin: 0; font-size: 12.5px; font-weight: 900; color: #ffc6f2; }
.ax-sr-aw { margin: 4px 0 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; min-height: 36px; }
.ax-sr-aw b { font-family: var(--f-en); font-weight: 800; font-size: clamp(24px, 6.4vw, 34px); color: #fff; text-shadow: 0 0 14px var(--c1); line-height: 1.1; word-break: break-all; }
.ax-sr-aw small { font-size: 13px; font-weight: 900; color: var(--a-dim); }
.ax-sr-sp { border: 1.5px solid var(--a-line); background: rgba(255, 255, 255, 0.06); border-radius: 999px; padding: 2px 8px; font-size: 13px; color: #fff; }
.ax-sr-dots { font-size: 22px; color: var(--c1); letter-spacing: 0.2em; animation: ax-sr-ant 0.8s infinite; }
.ax-sr-gg { font-family: var(--f-pix); font-size: 15px; color: var(--a-yel); }
.ax-sr-chain { width: min(100%, 640px); flex: none; display: flex; align-items: center; overflow-x: auto; overflow-y: hidden; padding: 8px 4px 10px; scrollbar-width: thin; mask-image: linear-gradient(90deg, transparent, #000 28px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px); }
.ax-sr-chain:empty { min-height: 66px; }
.ax-sr-c { flex: none; display: flex; flex-direction: column; align-items: center; padding: 8px 14px; border-radius: 14px; background: #0b0730; border: 2px solid var(--cc); box-shadow: 0 0 12px color-mix(in srgb, var(--cc) 55%, transparent); animation: ax-sr-pop 0.35s both; max-width: 46vw; }
.ax-sr-c.ai { --cc: #ff4fd8; }
.ax-sr-c.me { --cc: #35e0ff; }
.ax-sr-c b { font-family: var(--f-en); font-weight: 800; font-size: 18px; color: #fff; }
.ax-sr-c b u { text-decoration: none; color: var(--a-yel); text-shadow: 0 0 8px var(--a-yel); }
.ax-sr-c small { font-size: 11.5px; font-weight: 800; color: var(--a-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ax-sr-link { flex: none; width: 22px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, #ff4fd8, #35e0ff); box-shadow: 0 0 8px #35e0ff; }
.ax-sr-link.ai { background: linear-gradient(90deg, #35e0ff, #ff4fd8); box-shadow: 0 0 8px #ff4fd8; }
.ax-sr-in { width: min(100%, 640px); flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; }
.ax-sr-hint { margin: 0; font-size: 13.5px; font-weight: 900; color: #dfe4ff; }
.ax-sr-word { display: flex; align-items: center; min-height: 58px; max-width: 100%; padding: 6px 18px; border-radius: 16px; border: 2px solid var(--a-line); background: rgba(0, 0, 0, 0.35); font-family: var(--f-en); font-weight: 800; font-size: clamp(28px, 8vw, 40px); letter-spacing: 0.04em; color: #fff; overflow: hidden; }
.ax-sr-word.on { border-color: #35e0ff; box-shadow: 0 0 24px rgba(53, 224, 255, 0.35); }
.ax-sr-f { color: var(--a-yel); text-shadow: 0 0 12px var(--a-yel); }
.ax-sr-ty { white-space: nowrap; }
.ax-sr-caret { width: 3px; height: 1em; margin-left: 3px; background: #35e0ff; animation: ax-sr-ant 1s steps(1) infinite; }
.ax-sr-word:not(.on) .ax-sr-caret { display: none; }
.ax-sr-msg { margin: 0; min-height: 1.4em; font-size: 13px; font-weight: 900; color: var(--a-dim); }
.ax-sr-msg.ng { color: #ff8fa3; }
.ax-sr-btns { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; padding-bottom: 6px; }
.ax-sr-btns .ax-go { margin-top: 0; padding: 12px 34px; font-size: 14px; }
.ax-sr-btns small { width: 100%; text-align: center; font-size: 11.5px; font-weight: 800; color: var(--a-dim); }
.ax-sr-kb { position: relative; flex: none; width: calc(100% + 24px); margin: 0 -12px; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); display: grid; gap: 5px; background: rgba(10, 4, 30, 0.9); border-top: 1px solid rgba(255, 79, 216, 0.35); user-select: none; -webkit-user-select: none; }
.ax-sr-kb .ti-k { border-color: rgba(53, 224, 255, 0.45); background: #0d1a3d; color: #d6f6ff; }
.ax-sr-kb .ti-k:active, .ax-sr-kb .ti-k.on { background: #35e0ff; color: #04122a; }
.ax-sr-kb .ti-k.wide { font-size: 17px; font-family: var(--f-en); }
.ax-sr-kgo { justify-self: center; width: min(100%, 360px); height: 46px; border: 0; border-radius: 12px; background: linear-gradient(90deg, var(--c1), var(--c2)); color: #070418; font-family: var(--f-pix); font-size: 14px; touch-action: manipulation; }
.ax-sr-kgo:active { filter: brightness(1.2); }
@media (max-height: 700px) { .ax-sr-bot { width: 70px; } .ax-sr-bub { min-height: 70px; } .ax-sr-chain:empty { min-height: 56px; } }
@media (prefers-reduced-motion: reduce) { .ax-sr-bot *, .ax-sr-bot svg, .ax-sr-c { animation: none !important; } }
@keyframes ax-sr-pop { from { transform: scale(0.8); opacity: 0; } }