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

/* ===== COLOUR SCHEME ===== */
:root {
    --primary-color:       #FDE12D;
    --primary-hover:       #E0C826;
    --primary-light:       rgba(253, 225, 45, 0.15);
    --primary-shadow:      rgba(253, 225, 45, 0.40);
    --btn-text-color:      #7a6200;
    --hero-gradient-start: rgba(253, 225, 45, 0.25);
    --hero-gradient-end:   rgba(253, 225, 45, 0.10);

    /* Division table sizing */
    --cell-size:    2.8rem;
    --cell-font:    2rem;
    --input-font:   1.6rem;
    --carry-size:   1.8rem;
    --carry-font:   1.1rem;
    --bracket-size: 6px;
}

/* ===== GAME-SPECIFIC: question text ===== */

.question-text {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 1rem;
    font-family: 'Courier New', monospace;
}

/* ===== GAME-SPECIFIC: instructions ===== */

.sd-instructions {
    text-align: center;
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 1rem;
    padding: 0.6rem 1rem;
    background: var(--primary-light);
    border-radius: 0.5rem;
}

/* ===== GAME-SPECIFIC: division table ===== */

.problem-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
}

.division-table {
    border-spacing: 0;
    border-collapse: collapse;
    margin: 20px 0;
}

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

.answercell {
    border-bottom: var(--bracket-size) solid #0066cc;
    height: 3.5rem;
    width: 100%;
}

.divisorcell {
    border-right: var(--bracket-size) solid #0066cc;
    font-size: var(--cell-font);
    text-align: right;
    padding-right: 10px;
}

.empty-cell {
    width: 0.6rem !important;
    border-bottom: var(--bracket-size) solid #0066cc;
}

.remaindercell {
    width: 0.6rem !important;
    padding: 0;
    text-align: center;
    position: relative;
}

.remainder {
    position: absolute;
    top: 5px;
    left: 65%;
    transform: translateX(-50%);
    border: 1px solid #ff9800;
    background-color: #fff8e1;
    font-size: var(--carry-font);
    line-height: var(--carry-size);
    height: var(--carry-size);
    width: var(--carry-size);
    border-radius: 0.2rem;
}

.answerbox {
    width: 100%;
    height: 2.5rem;
    font-size: var(--input-font);
    text-align: center;
    border-radius: 0.4rem;
    border: 3px solid var(--primary-color);
    margin: 0 auto 0.2rem auto;
    box-sizing: border-box;
    display: block;
    outline: none;
}

.remainder-input {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    font-size: var(--carry-font);
    text-align: center;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    outline: none;
}

.dividend-digit {
    font-size: var(--cell-font);
    vertical-align: bottom;
    padding-bottom: 5px;
}

.decimal-col {
    width: 20px;
    font-size: 2em;
}

.r-label-cell {
    font-size: var(--cell-font);
    font-weight: bold;
    padding: 5px;
    vertical-align: middle;
}

.remainder-section {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 15px;
}

.remainder-section label {
    font-weight: bold;
    font-size: 1.2em;
    color: #333;
}

.remainder-input-final {
    width: var(--cell-size);
    height: var(--cell-size);
    padding: 8px;
    font-size: var(--input-font);
    font-weight: bold;
    border: 3px solid var(--primary-color);
    border-radius: 10px;
    text-align: center;
}

.fraction-container {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.fraction-numerator,
.fraction-denominator {
    width: 50px;
    height: 30px;
    padding: 4px;
    font-size: var(--input-font);
    font-weight: bold;
    border: 3px solid var(--primary-color);
    border-radius: 8px;
    text-align: center;
}

.fraction-bar {
    width: 50px;
    height: 3px;
    background: #333;
}

.fraction-input {
    width: 80%;
    height: 2.5rem;
    font-size: var(--input-font);
    text-align: center;
    border-radius: 0.4rem;
    border: 3px solid var(--primary-color);
    margin: 0 auto;
    box-sizing: border-box;
    display: block;
    outline: none;
}

.fraction-cell-top  { border-bottom: var(--bracket-size) solid #0066cc; padding: 5px; vertical-align: middle; }
.fraction-cell-bottom { padding: 5px; vertical-align: middle; }
.remainder-cell-top   { padding: 5px; vertical-align: middle; }
.remainder-cell-bottom { padding: 5px; vertical-align: middle; }

.remainder-input-table {
    width: 80%;
    height: 2.5rem;
    font-size: var(--input-font);
    text-align: center;
    border-radius: 0.4rem;
    border: 3px solid var(--primary-color);
    margin: 0 auto;
    box-sizing: border-box;
    display: block;
    outline: none;
}

.btn-add-decimal {
    background: #ff9800;
    font-size: 1.5em;
    padding: 8px 20px;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-add-decimal:hover { background: #e68900; transform: translateY(-2px); }

/* ===== GAME-SPECIFIC: 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; }

/* ===== GAME-SPECIFIC: controls ===== */

.sd-controls { margin-top: 1.25rem; }

.sd-btn-row {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.sd-check-btn {
    flex: 3;
    max-width: 400px;
}

.sd-clear-btn {
    flex: 1;
    max-width: 140px;
    background: white !important;
    border: 2px solid #adb5bd !important;
    color: #374151 !important;
    box-shadow: none !important;
}

.sd-clear-btn:hover {
    background: #f8f9fa !important;
    border-color: #6c757d !important;
    color: #212529 !important;
    box-shadow: none !important;
    transform: none !important;
}

/* ===== GAME-SPECIFIC: flash ===== */

@keyframes flash-correct {
    0%, 100% { background-color: transparent; border-color: transparent; }
    50%       { background-color: rgba(76,175,80,0.2); border: 3px solid #4caf50; }
}

@keyframes flash-incorrect {
    0%, 100% { background-color: transparent; border-color: transparent; }
    50%       { background-color: rgba(244,67,54,0.2); border: 3px solid #f44336; }
}

.gs-game-card.flash-correct   { animation: flash-correct   0.6s ease; }
.gs-game-card.flash-incorrect { animation: flash-incorrect 0.6s ease; }

/* ===== 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; }