.adjective-drag[data-v-adjective-insertion] { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 100%; min-height: 0;
}
.adjective-drag__speech[data-v-adjective-insertion] { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; border: 0; border-radius: 50%; width: 40px; height: 40px; color: inherit; background: transparent; cursor: pointer;
}
.adjective-drag__speech[data-v-adjective-insertion]:hover { background: #0000000d;
}
.adjective-drag__prompt[data-v-adjective-insertion] { margin: 0; padding: 0 44px; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.35; font-weight: 700; text-align: center;
}
.adjective-drag__sentence[data-v-adjective-insertion] { width: 95%; min-height: 90px; border: 2px solid #dbe1eb; border-radius: 18px; padding: 12px 8px; background: #fff9; box-sizing: border-box;
}
.adjective-drag__sentence.is-over[data-v-adjective-insertion] { border-color: #5374b8; background: #f1f5ff;
}
.adjective-drag__words[data-v-adjective-insertion] { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; min-height: 60px; font-size: clamp(19px, 2.5vw, 31px); font-weight: 700;
}
.adjective-drag__base[data-v-adjective-insertion] { padding: 4px 2px; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer;
}
.adjective-drag__base.is-punctuation[data-v-adjective-insertion] { margin-left: -.25em;
}
.adjective-drag__choices[data-v-adjective-insertion] { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}
.adjective-drag__word[data-v-adjective-insertion] { min-height: 46px; padding: 7px 14px; border: 2px solid #5264ac; border-radius: 13px; color: #33468f; background: #eaf0ff; font: inherit; font-size: clamp(18px, 1.8vw, 25px); font-weight: 700; cursor: grab; touch-action: none; user-select: none;
}
.adjective-drag__word.is-selected[data-v-adjective-insertion] { outline: 3px solid #5264ac; outline-offset: 3px;
}
.adjective-drag__word.is-source[data-v-adjective-insertion] { opacity: .25;
}
.adjective-drag__placed[data-v-adjective-insertion] { font-size: inherit;
}
.adjective-drag__placed.is-error[data-v-adjective-insertion] { border-color: #b44e2c; background: #fff0e5;
}
.adjective-drag__placed.is-correct[data-v-adjective-insertion] { border-color: #258049; background: #e7f6ec;
}
.adjective-drag__word.is-preview[data-v-adjective-insertion] { border-style: dashed; opacity: .5; pointer-events: none;
}
.adjective-drag__floating[data-v-adjective-insertion] { position: absolute; transform: translate(-50%, -50%); z-index: 20; pointer-events: none; box-shadow: 0 5px 18px #0003;
}
.adjective-drag__end[data-v-adjective-insertion] { padding: 4px 12px; border: 1px dashed #5264ac; color: #33468f; background: #f1f4ff; border-radius: 10px; font: inherit; cursor: pointer;
}
.adjective-drag__marker[data-v-adjective-insertion] { width: 20px; height: 38px; border-radius: 8px; background: #90b6ff; animation: adjective-pulse-adjective-insertion 1s infinite alternate;
}
.adjective-shift-move[data-v-adjective-insertion] { transition: transform .16s ease;
}
.adjective-drag button[data-v-adjective-insertion]:focus-visible { outline: 3px solid #e69500; outline-offset: 3px;
}
.adjective-drag button[data-v-adjective-insertion]:disabled { cursor: default;
}
.adjective-drag__help[data-v-adjective-insertion] { margin: 0; font-size: 12px; text-align: center;
}
.adjective-drag__explanation[data-v-adjective-insertion] { margin: 0; padding: 10px 14px; border-radius: 12px; background: #edf3ff; font-size: clamp(14px, 1.3vw, 18px); line-height: 1.4; text-align: center;
}
.adjective-drag__explanation.is-error[data-v-adjective-insertion] { color: #8e3b1a; background: #fff0e5;
}
.adjective-drag__explanation.is-correct[data-v-adjective-insertion] { color: #236c3d; background: #e7f6ec;
}
@keyframes adjective-pulse-adjective-insertion {
to { opacity: .4; transform: scaleX(.7);
}
}
@media (prefers-reduced-motion: reduce) {
.adjective-shift-move[data-v-adjective-insertion] { transition: none;
}
.adjective-drag__marker[data-v-adjective-insertion] { animation: none;
}
}