:root {
    --bg: #eef3f4;
    --ink: #172033;
    --line: #c9d6de;
    --blue: #3199d8;
    --blue-dark: #2174a7;
    --green: #2fa866;
    --red: #df4b43;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: Arial, sans-serif;
    color: var(--ink);
    background: var(--bg);
}

button,
input {
    font: inherit;
}

.player-page {
    min-height: 100vh;
    display: grid;
    place-items: start center;
    padding: 28px;
    overflow-x: hidden;
}

.player-shell {
    width: fit-content;
    max-width: 100%;
    position: relative;
}

.worksheet {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--line);
    overflow: hidden;
}

.element {
    position: absolute;
    box-sizing: border-box;
}

.conditional-hidden {
    display: none !important;
}

@media (max-width: 640px) {
    .player-page {
        padding: 16px;
    }

    .result-panel,
    .message-panel {
        width: calc(100vw - 32px);
        padding: 20px;
    }
}

.decor-text {
    white-space: pre-wrap;
    pointer-events: none;
}

.decor-image,
.decor-shape {
    pointer-events: none;
}

.decor-image,
.decor-shape img,
.quiz-button img,
.choice-option img,
.drop-zone img,
.drag-item img {
    display: block;
    max-width: none;
}

.quiz-button,
.choice-option,
.drag-item,
.drop-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
}

.quiz-button {
    border-radius: 10px;
    cursor: pointer;
    user-select: none;
}

.choice-option {
    cursor: pointer;
    user-select: none;
    white-space: pre-line;
}

.choice-option.locked {
    cursor: default;
}

.choice-option.selected-correct,
.choice-option.selected-wrong {
    border-width: 4px !important;
    font-weight: 700;
}

.choice-option.selected-correct {
    border-color: var(--green) !important;
    box-shadow: 0 0 0 2px rgba(47, 168, 102, 0.22);
}

.choice-option.selected-wrong {
    border-color: var(--red) !important;
    box-shadow: 0 0 0 2px rgba(223, 75, 67, 0.22);
}

.input-field {
    border-radius: 10px;
    padding: 8px 12px;
}

.drag-item {
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.drag-item.dragging {
    cursor: grabbing;
    opacity: 0.9;
}

.drop-zone.active-zone {
    outline: 3px solid rgba(49, 153, 216, 0.35);
}

.result-panel,
.message-panel {
    width: min(520px, calc(100vw - 56px));
    background: #ffffff;
    border: 1px solid var(--line);
    padding: 28px;
    margin: 0 auto;
}

.result-panel h1 {
    margin: 0 0 12px;
}

.result-panel button {
    min-height: 46px;
    border: none;
    border-radius: 7px;
    background: var(--blue);
    color: #ffffff;
    font-weight: 800;
    padding: 0 18px;
    cursor: pointer;
}

.result-panel button:hover {
    background: var(--blue-dark);
}

.debug-panel {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 9999;
    max-height: 42vh;
    overflow: auto;
    margin: 0;
    padding: 10px;
    border-radius: 8px;
    background: rgba(10, 18, 30, 0.9);
    color: #d6f5ff;
    font: 12px/1.35 Consolas, monospace;
    white-space: pre-wrap;
}

@keyframes wiggleX {
    0%, 100% { transform: var(--base-transform) translateX(0); }
    25% { transform: var(--base-transform) translateX(-6px); }
    75% { transform: var(--base-transform) translateX(6px); }
}

@keyframes wiggleY {
    0%, 100% { transform: var(--base-transform) translateY(0); }
    25% { transform: var(--base-transform) translateY(-6px); }
    75% { transform: var(--base-transform) translateY(6px); }
}

@keyframes springAnim {
    0% { transform: var(--base-transform) scale(1); }
    40% { transform: var(--base-transform) scale(1.12); }
    70% { transform: var(--base-transform) scale(0.94); }
    100% { transform: var(--base-transform) scale(1); }
}

@keyframes tiltAnim {
    0%, 100% { transform: var(--base-transform) rotate(0deg); }
    25% { transform: var(--base-transform) rotate(-8deg); }
    75% { transform: var(--base-transform) rotate(8deg); }
}

@keyframes spinAnim {
    from { transform: var(--base-transform) rotate(0deg); }
    to { transform: var(--base-transform) rotate(360deg); }
}

@keyframes fadeOutAnim {
    0% { opacity: 1; }
    100% { opacity: 0.15; }
}

@keyframes moveXAnim {
    0%, 100% { transform: var(--base-transform) translateX(0); }
    50% { transform: var(--base-transform) translateX(14px); }
}

@keyframes shakeAnim {
    0%, 100% { transform: var(--base-transform) translateX(0); }
    20% { transform: var(--base-transform) translateX(-4px); }
    40% { transform: var(--base-transform) translateX(4px); }
    60% { transform: var(--base-transform) translateX(-4px); }
    80% { transform: var(--base-transform) translateX(4px); }
}