/* ============================================================
   Long Division — Per-Game Styles
   ============================================================ */

/* ===== COLOUR SCHEME ===== */
:root {
    --primary-color:       #1e3a8a;
    --primary-hover:       #1e40af;
    --primary-light:       rgba(30, 58, 138, 0.12);
    --primary-shadow:      rgba(30, 58, 138, 0.35);
    --btn-text-color:      #ffffff;
    --hero-gradient-start: rgba(30, 58, 138, 0.25);
    --hero-gradient-end:   rgba(30, 58, 138, 0.10);

    /* Table sizing */
    --cell-size:    2.6rem;
    --cell-font:    2.6rem;
    --input-font:   1.4rem;
    --input-height: 2.2rem;
    --bracket-size: 5px;
}

/* ===== SMALL SCREEN BLOCK ===== */
.ld-small-screen-msg {
    display: none;
    position: fixed;
    inset: 0;
    background: #1e3a8a;
    color: #fff;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    z-index: 9999;
    gap: 1rem;
}
.ld-small-icon { font-size: 3.5rem; }
.ld-small-screen-msg h2 { font-size: 1.5rem; font-weight: 700; margin: 0; }
.ld-small-screen-msg p  { font-size: 1rem; opacity: 0.88; max-width: 300px; margin: 0; line-height: 1.5; }

@media (max-width: 767px) {
    .ld-small-screen-msg { display: flex; }
    .gs-hero, .gs-page, .gs-exit-fs-bar { display: none !important; }
}

/* ===== QUESTION TEXT ===== */
.question-text {
    text-align: center;
    font-size: 2.4rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.75rem;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.05em;
}

/* ===== INSTRUCTIONS ===== */
.ld-instructions {
    text-align: center;
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 1.25rem;
    padding: 0.55rem 1rem;
    background: var(--primary-light);
    border-radius: 0.5rem;
}

/* ===== PROBLEM CONTAINER ===== */
.problem-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow-x: auto;
    padding: 0.5rem 0 1rem;
}

/* ===== LONG DIVISION TABLE ===== */
.ld-table {
    border-spacing: 0;
    border-collapse: collapse;
    margin: 0 auto;
}

.ld-table td {
    width: var(--cell-size);
    height: var(--cell-size);
    text-align: center;
    vertical-align: middle;
    padding: 0;
}

/* Divisor — right border creates the bracket arm */
.ld-divisor-cell {
    text-align: right;
    padding-right: 0.5rem;
    border-right: var(--bracket-size) solid var(--primary-color);
    font-size: var(--cell-font);
    font-weight: 700;
    color: var(--primary-color);
    width: auto;
    min-width: 3rem;
    white-space: nowrap;
}

.ld-divisor-spacer {
    min-width: 3rem;
    width: auto;
}

/* Quotient row — border-bottom creates the top arm of the bracket */
.ld-quotient-row .ld-answer-cell,
.ld-quotient-row .ld-spacer-cell {
    border-bottom: var(--bracket-size) solid var(--primary-color);
}
.ld-quotient-row .ld-divisor-spacer {
    border-bottom: none;
}

/* Dividend row digits */
.ld-dividend-digit {
    font-size: var(--cell-font);
    font-weight: 600;
    color: #1f2937;
    cursor: grab;
    user-select: none;
    border-radius: 6px;
    transition: background 0.15s, transform 0.1s;
}
.ld-dividend-digit:hover        { background: var(--primary-light); }
.ld-dividend-digit.ld-dragging  { opacity: 0.3; cursor: grabbing; }
.ld-dividend-digit.ld-selected-digit {
    background: var(--primary-color);
    color: #fff;
    border-radius: 6px;
}
.ld-dividend-digit.ld-pulse {
    animation: ld-pulse 0.8s ease infinite alternate;
}
@keyframes ld-pulse {
    from { background: var(--primary-light); }
    to   { background: rgba(30,58,138,0.28); }
}

/* Subtraction rows — underline across the working columns */
.ld-sub-row .ld-in-range {
    border-bottom: 3px solid #374151;
}

/* All scaffold inputs */
.ld-input {
    width: 88%;
    height: var(--input-height, 2.8rem);
    font-size: var(--input-font);
    text-align: center;
    border: 2px solid #d1d5db;
    border-radius: 5px;
    background: #fff;
    outline: none;
    transition: border-color 0.18s, box-shadow 0.18s;
    display: block;
    margin: 0 auto;
    box-sizing: border-box;
}
.ld-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-light);
}
.ld-input:disabled {
    background: #f3f4f6;
    cursor: not-allowed;
    opacity: 0.65;
}

/* Bring-down inputs — dashed until filled */
.ld-bringdown-input {
    border-style: dashed;
    border-color: #9ca3af;
}
.ld-bringdown-input.ld-drop-filled {
    border-style: solid;
    border-color: var(--primary-color);
    background: var(--primary-light);
}

/* Drop zone hover */
.ld-dropzone-cell.ld-drag-over .ld-bringdown-input {
    border-color: var(--primary-color);
    border-style: solid;
    background: var(--primary-light);
}

/* Empty cells */
.ld-empty-cell { width: var(--cell-size); }

/* ===== PER-CELL CHECK FEEDBACK ===== */
.ld-input.ld-cell-correct {
    border-color: #00c04f !important;
    background: #e6ffed !important;
    color: #00702d !important;
}
.ld-input.ld-cell-wrong {
    border-color: #ff3333 !important;
    background: #ffe6e6 !important;
    color: #a30000 !important;
    font-weight: 700;
}

/* ===== FEEDBACK ===== */
.feedback {
    margin: 12px auto;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1rem;
    text-align: center;
    width: fit-content;
    max-width: 90%;
}
.feedback.success { background: #e6ffed; color: #00702d; border: 2px solid #00c04f; }
.feedback.error   { background: #ffe6e6; color: #a30000; border: 2px solid #ff3333; }

/* ===== CONTROLS ===== */
.ld-controls { margin-top: 1.25rem; }
.ld-btn-row  {
    display: flex; gap: 0.75rem; justify-content: center;
    align-items: center; flex-wrap: wrap; margin-bottom: 0.5rem;
}
.ld-check-btn { flex: 3; max-width: 400px; }
.ld-clear-btn {
    flex: 1; max-width: 140px;
    background: #fff !important;
    border: 2px solid #adb5bd !important;
    color: #374151 !important;
    box-shadow: none !important;
}
.ld-clear-btn:hover {
    background: #f8f9fa !important;
    border-color: #6c757d !important;
    color: #212529 !important;
    box-shadow: none !important;
    transform: none !important;
}

/* ===== FLASH ===== */
@keyframes flash-correct {
    0%, 100% { background-color: transparent; }
    50%       { background-color: rgba(76,175,80,0.15); }
}
@keyframes flash-incorrect {
    0%, 100% { background-color: transparent; }
    50%       { background-color: rgba(244,67,54,0.15); }
}
.gs-game-card.flash-correct   { animation: flash-correct   0.6s ease; }
.gs-game-card.flash-incorrect { animation: flash-incorrect 0.6s ease; }

/* ===== 5-COLUMN OPTION GRID (gamestyles only defines up to cols-4) ===== */
.gs-option-grid.cols-5 {
    grid-template-columns: repeat(5, 1fr) !important;
}

/* ===== REMAINDER LABEL IN QUOTIENT ROW ===== */
.ld-r-label-cell {
    text-align: center;
    vertical-align: middle;
    font-size: var(--cell-font);
    font-weight: 700;
    color: var(--primary-color);
    padding: 0 0.35rem;
    border-bottom: var(--bracket-size) solid var(--primary-color);
    white-space: nowrap;
    width: auto;
}

.ld-r-value-cell {
    border-bottom: var(--bracket-size) solid var(--primary-color);
    min-width: calc(var(--cell-size) * 1.4);
}

.ld-rem-answer-input {
    width: 92%;
    max-width: 5rem;
}

/* ===== UTILITIES ===== */
.hidden { display: none !important; }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }