/* つながり4×4（WORD LINK 16） */
.ax-cn { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 14px calc(16px + env(safe-area-inset-bottom)); }
.ax-cn-head { width: min(100%, 600px); display: flex; align-items: baseline; gap: 10px; }
.ax-cn-head b { font-family: var(--f-pix); font-size: 13px; color: var(--c1); text-shadow: 0 0 10px color-mix(in srgb, var(--c1) 70%, transparent); white-space: nowrap; }
.ax-cn-head span { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 900; color: var(--a-dim); }
.ax-cn-head .ax-cn-time { flex: none; font-family: var(--f-pix); font-size: 11px; color: #fff; }
.ax-cn-board { position: relative; width: min(100%, 600px); display: grid; gap: 8px; }
.ax-cn-bands { display: grid; gap: 8px; }
.ax-cn-bands:empty { display: none; }
.ax-cn-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ax-cn-t { container-type: inline-size; position: relative; height: clamp(58px, 9.5vh, 76px); border-radius: 12px; border: 2px solid #3a4590; background: linear-gradient(180deg, #232b6b, #1a2058); color: #eef1ff; font-family: var(--f-en); font-weight: 800; padding: 0 3px; touch-action: manipulation; user-select: none; -webkit-user-select: none; transition: transform 0.12s, background 0.15s, border-color 0.15s; overflow: hidden; }
.ax-cn-t span { display: block; font-size: clamp(9px, calc((100cqi - 6px) / (var(--n) * 0.74)), 19px); letter-spacing: -0.01em; white-space: nowrap; pointer-events: none; }
@supports not (font-size: 1cqi) { .ax-cn-t span { font-size: 12px; white-space: normal; overflow-wrap: anywhere; } }
.ax-cn-t:hover { border-color: var(--c1); }
.ax-cn-t:active { transform: scale(0.95); }
.ax-cn-t.on { background: linear-gradient(180deg, #7b3fc4, #5b2a8f); border-color: #e2b5ff; color: #fff; box-shadow: 0 0 18px rgba(198, 92, 255, 0.55); transform: translateY(-2px); }
.ax-cn-t.hop { animation: ax-cn-hop 0.36s cubic-bezier(0.3, 1.6, 0.6, 1) both; }
@keyframes ax-cn-hop { 50% { transform: translateY(-12px); } }
.ax-cn-t.ng { animation: ax-cn-ng 0.4s; border-color: var(--a-red); }
@keyframes ax-cn-ng { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.ax-cn-t.gone { animation: ax-cn-gone 0.35s both; pointer-events: none; }
@keyframes ax-cn-gone { to { transform: scale(0.6); opacity: 0; } }
.ax-cn-band { border-radius: 12px; padding: 9px 12px 10px; background: var(--bc); color: #160b26; text-align: center; box-shadow: 0 0 22px color-mix(in srgb, var(--bc) 45%, transparent); }
.ax-cn-band.pop { animation: ax-cn-pop 0.45s cubic-bezier(0.22, 1.4, 0.36, 1) both; }
@keyframes ax-cn-pop { from { transform: scale(0.85); opacity: 0; } }
.ax-cn-band.lost { filter: saturate(0.55) brightness(0.85); }
.ax-cn-bl { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 8px; line-height: 1.25; }
.ax-cn-bl b { font-size: 14.5px; font-weight: 900; }
.ax-cn-bl small { font-family: var(--f-en); font-weight: 800; font-size: 10.5px; letter-spacing: 0.06em; opacity: 0.75; }
.ax-cn-bw { margin: 3px 0 0; font-family: var(--f-en); font-weight: 800; font-size: clamp(12.5px, 3.4vw, 16px); letter-spacing: 0.02em; }
.ax-cn-bx { list-style: none; margin: 7px 0 0; padding: 7px 0 0; border-top: 1px solid rgba(0, 0, 0, 0.18); display: grid; gap: 2px; font-size: 12.5px; font-weight: 800; text-align: left; }
@media (min-width: 560px) { .ax-cn-bx { grid-template-columns: 1fr 1fr; column-gap: 12px; } }
.ax-cn-toast { position: absolute; left: 50%; top: 0; z-index: 4; margin: 0; transform: translate(-50%, -70%) scale(0.9); padding: 9px 16px; border-radius: 999px; background: #fff; color: #120a2a; font-size: 13.5px; font-weight: 900; white-space: nowrap; max-width: 96%; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; transition: opacity 0.18s, transform 0.18s; }
.ax-cn-toast.on { opacity: 1; transform: translate(-50%, -85%) scale(1); }
.ax-cn-toast.near { background: var(--a-yel); }
.ax-cn-toast.ng { background: #ffd6de; }
.ax-cn-toast.ok { background: #c8ffe4; }
.ax-cn-miss { margin: 2px 0 0; display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 900; color: var(--a-dim); }
.ax-cn-miss i { width: 13px; height: 13px; border-radius: 50%; background: var(--c1); box-shadow: 0 0 8px var(--c1); transition: background 0.3s, box-shadow 0.3s; }
.ax-cn-miss i.off { background: #343a66; box-shadow: none; }
.ax-cn-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ax-cn-btns .ax-sub { padding: 10px 14px; }
.ax-cn-btns .ax-go { margin-top: 0; padding: 12px 30px; font-size: 14px; }
.ax-cn-btns button:disabled { opacity: 0.4; cursor: default; filter: none; }
.ax-cn-sum { width: min(100%, 600px); display: grid; gap: 8px; text-align: center; padding-bottom: 8px; }
.ax-cn-sum .ax-en { margin: 0; }
.ax-cn-sumt { margin: 0 0 4px; font-size: 13.5px; font-weight: 900; color: #dfe4ff; }
.ax-cn-sum .ax-go { justify-self: center; margin-top: 8px; }
.ax-cn-done { width: min(100%, 560px); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ax-cn-emo { display: grid; gap: 4px; }
.ax-cn-emo p { margin: 0; display: flex; gap: 4px; }
.ax-cn-emo i { width: 26px; height: 26px; border-radius: 6px; }
.ax-cn-next { margin: 0; font-size: 13px; font-weight: 900; color: var(--a-yel); }
.ax-cn-ans { width: 100%; display: grid; gap: 6px; margin-top: 4px; }
.ax-cn-ans > p { margin: 0; font-size: 12.5px; font-weight: 900; color: var(--a-dim); }
/* このゲームはレベル切りかえが無いので、共通の「CEFR-J の A1 から…」の文は出さない */
.ax-intro:has(#acn-bg-x) .ax-keys + .ax-keys { display: none; }
@media (prefers-reduced-motion: reduce) { .ax-cn-t, .ax-cn-band, .ax-cn-toast { animation: none !important; transition: none; } }