/* ============================================================
   Algebra Pyramids — Per-Game Styles
   /maths/css/algebrapyramids.css
   Load AFTER brainbuzz.css and gamestyles.css.
   All classes are prefixed ap- to avoid collisions.
   ============================================================ */

:root {
    --primary-color:        #E0A800;
    --primary-hover:        #C79500;
    --primary-light:        rgba(224, 168, 0, 0.12);
    --primary-shadow:       rgba(224, 168, 0, 0.35);
    --btn-text-color:       #3D2A00;
    --hero-gradient-start:  rgba(224, 168, 0, 0.22);
    --hero-gradient-end:    rgba(255, 213, 79, 0.08);

    --ap-ink:               #343a40;
    --ap-open-bg:           #FFF6D6;
    --ap-open-hover:        #FFEDB3;
    --ap-selected-bg:       #FFD54F;
    --ap-selected-edge:     #7A5900;
    --ap-q-color:           #B8860B;
    --ap-right-bg:          rgba(40, 167, 69, 0.12);
    --ap-right-ink:         #1e7e34;
    --ap-wrong-bg:          rgba(220, 53, 69, 0.10);
    --ap-wrong-ink:         #dc3545;
}


/* ===== MATHS TYPE ===== */

.ap-math,
.ap-block,
.ap-hint-eq,
.ap-key-var {
    font-family: 'STIX Two Text', 'Cambria Math', 'Times New Roman', serif;
}

.ap-v { font-style: italic; }

.ap-math sup,
.ap-block sup,
.ap-hint-eq sup,
.ap-oc-line sup {
    font-size: 0.62em;
    line-height: 0;
    vertical-align: 0.75em;
}

.ap-op { margin: 0 0.18em; }
.ap-op.ap-lead { margin: 0 0.04em 0 0; }

.gs-option-pill-number .ap-math { font-size: 32px; }
.gs-option-pill-desc .ap-math { font-size: 15px; color: #212529; }
.gs-how-eq .ap-math { font-size: 22px; font-weight: 500; }


/* ===== SETTINGS ===== */

.ap-subsection { margin-top: 1.25rem; }
.ap-hidden { display: none; }

.ap-neg-note {
    font-size: 14px;
    color: #6c757d;
    padding: 0.75rem 1rem;
    background: var(--primary-light);
    border-radius: 10px;
}


/* ===== GAME LAYOUT ===== */

.ap-instruction {
    font-size: 15px;
    color: #6c757d;
    margin-bottom: 1.25rem;
}

.ap-play {
    display: flex;
    gap: 2.5rem;
    align-items: flex-start;
    justify-content: center;
}

.ap-board {
    flex: 1 1 auto;
    max-width: 760px;
    min-width: 0;
}

.ap-controls {
    flex: 0 0 320px;
}


/* ===== PYRAMID ===== */

.ap-pyr {
    --n: 3;
    width: 100%;
    margin: 0 auto;
}

.ap-row {
    display: flex;
    justify-content: center;
}

.ap-row + .ap-row { margin-top: -2px; }

.ap-block {
    width: calc(100% / var(--n));
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 2px solid var(--ap-ink);
    margin-left: -2px;
    padding: 0 8px;
    font-size: 26px;
    color: #212529;
    position: relative;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

.ap-row .ap-block:first-child { margin-left: 0; }

.ap-inner {
    display: inline-block;
    white-space: nowrap;
    text-align: center;
    line-height: 1.15;
}

.ap-block.ap-open {
    background: var(--ap-open-bg);
    cursor: pointer;
}

.ap-block.ap-open:hover { background: var(--ap-open-hover); }

.ap-block.ap-selected,
.ap-block.ap-selected:hover {
    background: var(--ap-selected-bg);
    box-shadow: inset 0 0 0 3px var(--ap-selected-edge);
    z-index: 2;
}

.ap-block:focus-visible {
    outline: 3px solid var(--primary-hover);
    outline-offset: -6px;
}

.ap-q {
    font-family: inherit;
    font-weight: 700;
    color: var(--ap-q-color);
}

/* Marked blocks (after Submit) */
.ap-block.ap-right {
    background: var(--ap-right-bg);
    color: var(--ap-right-ink);
}

.ap-block.ap-right::after {
    content: '\2713';
    position: absolute;
    top: 3px;
    right: 7px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
}

.ap-block.ap-wrong { background: var(--ap-wrong-bg); }

.ap-block.ap-wrong::after {
    content: '\2717';
    position: absolute;
    top: 3px;
    right: 7px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--ap-wrong-ink);
}

.ap-yours {
    display: block;
    color: var(--ap-wrong-ink);
    text-decoration: line-through;
    font-size: 0.72em;
}

.ap-fix {
    display: block;
    color: var(--ap-right-ink);
    font-weight: 600;
}

/* Hint pointer */
.ap-block.ap-pulse { animation: ap-pulse 0.9s ease 3; }

@keyframes ap-pulse {
    50% {
        background: #FFE082;
        box-shadow: inset 0 0 0 4px var(--primary-color);
    }
}

/* Typing caret and index slot */
.ap-caret {
    display: inline-block;
    width: 2px;
    height: 1.05em;
    background: #212529;
    margin-left: 2px;
    vertical-align: -0.15em;
    animation: ap-blink 1s steps(1) infinite;
}

.ap-slot {
    display: inline-block;
    width: 0.6em;
    height: 0.8em;
    border: 2px dashed #212529;
    margin-left: 1px;
    vertical-align: -0.05em;
    animation: ap-blink 1s steps(1) infinite;
}

@keyframes ap-blink { 50% { opacity: 0; } }

/* Status line under the pyramid */
.ap-status {
    min-height: 1.6em;
    margin-top: 1.25rem;
    font-size: 16px;
    font-weight: 600;
    color: #6c757d;
    text-align: center;
}

.ap-status.ap-status-good { color: #28a745; }
.ap-status.ap-status-bad  { color: #dc3545; }


/* ===== KEYPAD ===== */

.ap-keypad {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
}

.ap-key {
    height: 56px;
    border: 2px solid #e9ecef;
    background: #fff;
    border-radius: 12px;
    font-size: 22px;
    font-weight: 700;
    color: #212529;
    cursor: pointer;
    padding: 0;
    transition: all 0.15s ease;
}

.ap-key:not(:disabled):hover {
    border-color: var(--primary-color);
    background: var(--primary-light);
}

.ap-key:not(:disabled):active { transform: translateY(2px); }

.ap-key:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.ap-key.ap-key-var {
    font-style: italic;
    font-weight: 500;
    font-size: 26px;
}

.ap-key.ap-key-fn { font-size: 15px; }

.ap-key.ap-key-idx {
    font-family: 'STIX Two Text', 'Cambria Math', serif;
    font-weight: 500;
}

.ap-key.ap-key-idx.ap-on {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--btn-text-color);
}

.ap-key.ap-span2 { grid-column: span 2; }
.ap-key.ap-span3 { grid-column: span 3; }

.ap-idx-box {
    display: inline-block;
    width: 0.7em;
    height: 0.8em;
    border: 1.5px solid currentColor;
    border-radius: 2px;
    vertical-align: -0.1em;
}

.ap-key sup {
    font-size: 0.6em;
    line-height: 0;
    vertical-align: 0.8em;
    font-style: italic;
}

.ap-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

.ap-hint-btn {
    width: 100%;
    background: #fff;
    color: #8A6500;
    border: 2px solid var(--primary-color);
    border-radius: 12px;
    padding: 0.8rem 1.25rem;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
}

.ap-hint-btn:not(:disabled):hover { background: var(--primary-light); }

.ap-hint-btn:disabled {
    border-color: #e9ecef;
    color: #adb5bd;
    cursor: not-allowed;
}


/* ===== HINT MODAL ===== */

.ap-hint-eq {
    font-size: 22px;
    color: #212529;
}

.ap-hint-close {
    margin-top: 1.25rem;
}


/* ===== REVIEW OFFCANVAS ===== */

.ap-oc-detail {
    flex: 1;
    min-width: 0;
}

.ap-oc-meta {
    font-size: 12px;
    color: #6c757d;
    margin-top: 2px;
}

.ap-oc-pyr {
    max-width: 300px;
    margin: 0.6rem 0 0.4rem;
}

.ap-oc-pyr .ap-block {
    height: 44px;
    font-size: 16px;
    border-width: 1.5px;
    margin-left: -1.5px;
    padding: 0 4px;
}

.ap-oc-pyr .ap-row + .ap-row { margin-top: -1.5px; }

.ap-oc-pyr .ap-block.ap-right::after,
.ap-oc-pyr .ap-block.ap-wrong::after { display: none; }

.ap-oc-pair { margin-top: 0.4rem; }

.ap-oc-line { font-family: 'STIX Two Text', 'Cambria Math', serif; font-size: 14px; }


/* ===== RESPONSIVE ===== */

@media (max-width: 991px) {
    .ap-play {
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem;
    }
    .ap-controls {
        flex: none;
        width: 100%;
        max-width: 440px;
        margin: 0 auto;
    }
}

@media (max-width: 640px) {
    .ap-block { height: 58px; font-size: 20px; padding: 0 4px; }
    .ap-key   { height: 50px; }
}

@media (prefers-reduced-motion: reduce) {
    .ap-caret, .ap-slot, .ap-block.ap-pulse { animation: none; }
}