/* 並べかえチャレンジ（WORD ORDER） */
/* カードの絵：単語のチップがすべって並ぶ */
.ax-order-slide { animation: ax-order-slide 3.6s cubic-bezier(0.22, 1, 0.36, 1) infinite; animation-delay: var(--d, 0s); }
@keyframes ax-order-slide { 0%, 6% { transform: translate(var(--x), var(--y)) rotate(var(--r)); } 30%, 88% { transform: none; } 100% { transform: translate(var(--x), var(--y)) rotate(var(--r)); } }
.ax-order-ok { transform-box: fill-box; transform-origin: center; animation: ax-order-ok 3.6s ease-out infinite; }
@keyframes ax-order-ok { 0%, 44% { transform: scale(0); opacity: 0; } 52% { transform: scale(1.25); opacity: 1; } 58%, 86% { transform: scale(1); opacity: 1; } 94%, 100% { transform: scale(0); opacity: 0; } }

/* プレイ画面 */
.ax-order { gap: 10px; }
.ax-order > * { flex-shrink: 0; }
.ax-order-card { padding: 14px 16px; }
.ax-order-card.ok { border-color: var(--a-grn); box-shadow: 0 0 30px rgba(61, 255, 154, 0.4); }
.ax-order-card.ng { border-color: var(--a-red); box-shadow: 0 0 30px rgba(255, 79, 109, 0.4); }
.ax-order-ja { margin: 0; font-weight: 900; font-size: clamp(15px, 4.2vw, 19px); line-height: 1.55; color: #fff; }

.ax-order-ans { width: min(100%, 620px); min-height: 64px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 7px; padding: 10px; border-radius: 16px; border: 2px dashed color-mix(in srgb, var(--c1) 55%, transparent); background: rgba(0, 0, 0, 0.25); transition: border-color 0.2s, background 0.2s; }
.ax-order-ans.ok { border-style: solid; border-color: var(--a-grn); background: rgba(61, 255, 154, 0.1); }
.ax-order-ans.ng { border-style: solid; border-color: var(--a-red); background: rgba(255, 79, 109, 0.1); animation: qz-ng 0.35s; }
.ax-order-blank { display: inline-block; width: 30px; height: 40px; border-radius: 10px; border-bottom: 3px solid rgba(255, 255, 255, 0.25); }

.ax-order-pool { width: min(100%, 620px); display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ax-order-chip { position: relative; min-height: 44px; border: 2px solid var(--c1); background: linear-gradient(180deg, #2a2408, #16130a); color: #fff; border-radius: 12px; padding: 8px 13px; font-family: var(--f-en); font-weight: 700; font-size: clamp(16px, 4.3vw, 19px); line-height: 1.1; box-shadow: 0 3px 0 color-mix(in srgb, var(--c1) 45%, #000), 0 0 14px color-mix(in srgb, var(--c1) 22%, transparent); touch-action: manipulation; transition: opacity 0.15s, transform 0.1s; }
.ax-order-chip:hover:not(.used) { transform: translateY(-2px); }
.ax-order-chip:active:not(.used) { transform: translateY(2px); box-shadow: 0 1px 0 color-mix(in srgb, var(--c1) 45%, #000); }
.ax-order-chip.used { opacity: 0.16; pointer-events: none; border-style: dashed; box-shadow: none; }
.ax-order-chip.kh { border-color: #fff; box-shadow: 0 0 0 3px var(--a-pink), 0 0 18px var(--a-pink); }
.ax-order-chip.in { border-color: var(--c2); background: linear-gradient(180deg, #0c2a1a, #08170f); box-shadow: 0 3px 0 color-mix(in srgb, var(--c2) 40%, #000); }
.ax-order-ans.ok .ax-order-chip.in { border-color: var(--a-grn); background: rgba(61, 255, 154, 0.22); }
.ax-order-ans.ng .ax-order-chip.in { border-color: var(--a-red); background: rgba(255, 79, 109, 0.18); }

.ax-order.done .ax-order-pool { opacity: 0.35; pointer-events: none; }
.ax-order-ctl { display: flex; gap: 8px; justify-content: center; }
.ax-order-sm { padding: 7px 14px; font-size: 13px; border-radius: 12px; }
.ax-order-sm:disabled { opacity: 0.35; }

.ax-order-msg { width: min(100%, 620px); display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.ax-order-msg:empty { margin-top: -10px; }
.ax-order-msg p { margin: 0; }
.ax-order-good { font-weight: 900; color: var(--a-grn); font-size: 15px; }
.ax-order-good span { font-family: var(--f-en); color: #fff; font-weight: 700; }
.ax-order-bad { font-weight: 900; color: var(--a-red); font-size: 14px; }
.ax-order-right { font-family: var(--f-en); font-weight: 700; font-size: clamp(17px, 4.6vw, 21px); line-height: 1.5; color: #fff; padding: 8px 14px; border-radius: 14px; background: rgba(61, 255, 154, 0.1); border: 2px solid var(--a-grn); }
.ax-order-right b { font-weight: 700; }
.ax-order-right b.fix { color: var(--a-yel); text-decoration: underline 2px; text-underline-offset: 4px; }
.ax-order-src { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: center; font-size: 12px; color: var(--a-dim); font-weight: 700; }
.ax-order-src a { color: var(--a-cyan); font-weight: 900; white-space: nowrap; }
.ax-order-next { padding: 12px 36px; font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
  .ax-order-slide, .ax-order-ok { animation: none !important; }
  .ax-order-ans.ng { animation: none; }
}