/* =========================================================
   OWLION QUEST — MINIMUM WINDOW SUBSTRING CHEAT SHEET
   Bright adventure / memory-board theme
   DESKTOP-FIRST — NO MOBILE RESPONSIVE RULES
   ========================================================= */


/* =========================================================
   SEMANTIC COLOR SYSTEM
   Purple = Owlion / primary action
   Blue   = pointer / process
   Green  = valid / successful result
   Gold   = best / winning result
   Red    = broken / danger
   Neutral = everything else
   ========================================================= */

:root {
    --oq-purple: #6654c8;
    --oq-purple-soft: #f2efff;
    --oq-purple-border: #ddd7f4;
    --oq-blue: #4774bd;
    --oq-blue-soft: #eef6ff;
    --oq-blue-border: #cfe2ff;
    --oq-green: #268050;
    --oq-green-soft: #ebfff4;
    --oq-green-border: #bde8d0;
    --oq-gold: #a87500;
    --oq-gold-soft: #fff8d9;
    --oq-gold-border: #f0d47b;
    --oq-red: #b74646;
    --oq-red-soft: #fff2f2;
    --oq-red-border: #edcccc;
    --oq-neutral: #f7f8fa;
    --oq-neutral-border: #e1e5ed;
    --oq-neutral-text: #596579;
    --oq-heading: #292f49;
    --oq-body: #667187;
}

.cheatsheet-page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px 28px 90px;
    color: #26324a;
    background: radial-gradient(circle at 8% 4%, rgba(255, 196, 92, 0.18), transparent 25%), radial-gradient(circle at 92% 8%, rgba(125, 103, 235, 0.14), transparent 28%);
}


/* =========================================================
   HERO
   Brand-focused, not rainbow
   ========================================================= */

.quest-hero {
    position: relative;
    overflow: visible;
    margin-bottom: 22px;
    padding: 17px 24px 26px;
    border-radius: 21px;
    background: #ffffff;
    border: 2px solid var(--oq-purple-border);
    box-shadow: 0 10px 25px rgba(74, 58, 135, 0.07), inset 0 1px 0 rgba(255,255,255,0.9);
}

    .quest-hero::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 5px;
        background: var(--oq-purple);
        border-radius: 21px 21px 0 0;
    }

.hero-star {
    position: absolute;
    pointer-events: none;
}

.hero-star-1 {
    right: 220px;
    top: 13px;
    color: #d6a82f;
    font-size: 17px;
    transform: rotate(15deg);
}

.hero-star-2 {
    right: 275px;
    bottom: 14px;
    color: #9b91d2;
    font-size: 11px;
}

.hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 7px;
}

.eyebrow {
    color: var(--oq-purple);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 1.6px;
}

.pattern-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--oq-purple);
    color: white;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .8px;
    box-shadow: 0 5px 14px rgba(102, 84, 200, 0.18);
}

    .pattern-badge span {
        font-size: 14px;
    }

.hero-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.hero-text {
    position: relative;
    z-index: 2;
    flex: 1;
    min-width: 0;
}

    .hero-text h1 {
        margin: 0 0 4px;
        color: #29264c;
        font-size: 32px;
        line-height: 1.08;
        font-weight: 950;
        letter-spacing: -0.8px;
    }

    .hero-text p {
        max-width: 800px;
        margin: 0;
        color: #68738a;
        font-size: 14px;
        line-height: 1.45;
    }

    .hero-text strong {
        color: var(--oq-purple);
    }


/* =========================================================
   HERO MASCOT
   ========================================================= */

.hero-mascot {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 132px;
    height: 132px;
    margin-right: 4px;
    overflow: hidden;
}

    .hero-mascot img {
        display: block;
        width: 132px;
        max-width: 132px;
        height: 132px;
        object-fit: contain;
    }


/* =========================================================
   MEMORY EQUATION
   Neutral by default; semantic states retain meaning
   ========================================================= */

.memory-equation {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 11px;
}

    .memory-equation span {
        padding: 6px 11px;
        border-radius: 9px;
        background: #ffffff;
        border: 2px solid var(--oq-neutral-border);
        color: var(--oq-neutral-text);
        font-size: 10px;
        font-weight: 950;
        letter-spacing: .6px;
        box-shadow: 0 3px 8px rgba(68, 55, 126, .06);
    }

    .memory-equation b {
        color: #929baa;
        font-size: 14px;
    }

    .memory-equation .valid-word {
        background: var(--oq-green-soft);
        border-color: var(--oq-green-border);
        color: var(--oq-green);
    }

    .memory-equation .best-word {
        background: var(--oq-gold-soft);
        border-color: var(--oq-gold-border);
        color: var(--oq-gold);
    }


/* =========================================================
   SHARED MEMORY CARD
   ========================================================= */

.memory-card {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    margin: 0 0 28px;
    padding: 28px;
    border-radius: 25px;
    background: #ffffff;
    border: 2px solid var(--oq-neutral-border);
    box-shadow: 0 10px 26px rgba(52, 46, 85, 0.07);
}

    .memory-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 5px;
        background: var(--oq-purple);
    }


/* =========================================================
   HEADINGS
   ========================================================= */

.card-heading {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 24px;
    text-align: left;
}

.heading-number {
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 19px;
    font-weight: 950;
    box-shadow: 0 5px 12px rgba(50,40,90,.10);
}

.card-heading h2 {
    margin: 0;
    color: var(--oq-heading);
    font-size: 28px;
    line-height: 1.15;
    font-weight: 900;
    text-align: left;
}

.card-heading p {
    margin: 6px 0 0;
    color: var(--oq-body);
    font-size: 16px;
    line-height: 1.5;
    text-align: left;
}


/* =========================================================
   SECTION NUMBERS
   No rainbow of unrelated colors.
   Purple = primary
   Green = success
   Blue = process
   Gold = result
   ========================================================= */

.story-number {
    background: var(--oq-neutral);
    color: var(--oq-neutral-text);
}

.core-number {
    background: var(--oq-purple-soft);
    color: var(--oq-purple);
}

.code-number {
    background: var(--oq-blue-soft);
    color: var(--oq-blue);
}

.example-number {
    background: var(--oq-neutral);
    color: var(--oq-neutral-text);
}

.remember-number {
    background: var(--oq-green-soft);
    color: var(--oq-green);
}

.complexity-number {
    background: var(--oq-neutral);
    color: var(--oq-neutral-text);
}


/* =========================================================
   STORY
   Neutral first, semantic colors only where they matter.
   ========================================================= */

.story-card {
    background: #ffffff;
}

.story-intro {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 26px;
    padding: 18px 20px;
    border-radius: 18px;
    background: var(--oq-neutral);
    border: 2px solid var(--oq-neutral-border);
}

.story-character {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 16px;
    background: #ffffff;
    font-size: 28px;
}

.story-intro strong {
    color: var(--oq-neutral-text);
}

.story-intro p {
    margin: 4px 0 0;
    color: #697387;
    font-size: 16px;
    line-height: 1.55;
}

.story-flow {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.story-step {
    display: flex;
    gap: 17px;
    padding: 20px;
    border-radius: 20px;
    border: 2px solid;
    transition: transform .2s ease, box-shadow .2s ease;
}

    .story-step:hover {
        transform: translateY(-2px);
        box-shadow: 0 9px 20px rgba(50,40,90,.08);
    }

.story-step-number {
    width: 39px;
    height: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: white;
    font-size: 16px;
    font-weight: 950;
    box-shadow: 0 4px 10px rgba(40,30,80,.09);
}

.story-step-content {
    flex: 1;
}

.story-title {
    color: #30384f;
    font-size: 18px;
    font-weight: 900;
}

.story-icon {
    margin-right: 6px;
    font-size: 20px;
}

.story-step p {
    margin: 8px 0 12px;
    color: var(--oq-body);
    font-size: 16px;
    line-height: 1.6;
}


/* Pointer / process = blue */

.pointer-step {
    background: var(--oq-blue-soft);
    border-color: var(--oq-blue-border);
}

    .pointer-step .story-step-number {
        color: var(--oq-blue);
    }


/* General setup = neutral */

.list-step {
    background: var(--oq-neutral);
    border-color: var(--oq-neutral-border);
}

    .list-step .story-step-number {
        color: var(--oq-neutral-text);
    }


/* Basket / working state = blue */

.basket-step {
    background: var(--oq-blue-soft);
    border-color: var(--oq-blue-border);
}

    .basket-step .story-step-number {
        color: var(--oq-blue);
    }


/* Valid = green */

.valid-step-card {
    background: var(--oq-green-soft);
    border-color: var(--oq-green-border);
}

    .valid-step-card .story-step-number {
        color: var(--oq-green);
    }


/* Shrinking / adjustment = neutral */

.shrink-step-card {
    background: var(--oq-neutral);
    border-color: var(--oq-neutral-border);
}

    .shrink-step-card .story-step-number {
        color: var(--oq-neutral-text);
    }


/* Broken = red */

.broken-step {
    background: var(--oq-red-soft);
    border-color: var(--oq-red-border);
}

    .broken-step .story-step-number {
        color: var(--oq-red);
    }


/* Best = gold */

.best-step-card {
    background: var(--oq-gold-soft);
    border-color: var(--oq-gold-border);
}

    .best-step-card .story-step-number {
        color: var(--oq-gold);
    }

.story-connector {
    align-self: center;
    width: 36px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9aa2b1;
    font-size: 23px;
    font-weight: 950;
}


/* Keep dark code blocks — they provide useful contrast. */

.code-memory {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 9px 12px;
    border-radius: 11px;
    background: #252a39;
    box-shadow: inset 0 1px rgba(255,255,255,.05);
}

    .code-memory span {
        padding: 4px 7px;
        border-radius: 6px;
        background: var(--oq-purple);
        color: white;
        font-size: 10px;
        font-weight: 950;
        letter-spacing: .8px;
    }

    .code-memory code {
        color: #f4f0ff;
        font-family: "Cascadia Code", "Consolas", monospace;
        font-size: 14px;
        font-weight: 600;
    }

.story-rule {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 12px 0 8px;
    padding: 11px 13px;
    border-radius: 11px;
    background: rgba(255,255,255,.72);
    border: 1px dashed rgba(60,70,80,.16);
    font-size: 14px;
}

    .story-rule strong {
        color: #394257;
    }

    .story-rule span {
        color: #637087;
    }

.danger-rule strong {
    color: var(--oq-red);
}

.win-rule {
    background: var(--oq-gold-soft);
    border-color: var(--oq-gold-border);
}


/* =========================================================
   CORE LOOP
   ========================================================= */

.core-card {
    background: #ffffff;
}

.algorithm-loop {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px 10px;
}

.loop-node {
    min-width: 135px;
    padding: 17px 13px;
    text-align: center;
    border-radius: 18px;
    border: 2px solid;
    box-shadow: 0 6px 15px rgba(50,40,90,.07);
}

    .loop-node .loop-icon {
        display: block;
        margin-bottom: 4px;
        font-size: 23px;
    }

    .loop-node strong {
        display: block;
        font-size: 14px;
        font-weight: 950;
    }

    .loop-node small {
        display: block;
        margin-top: 4px;
        color: #738097;
        font-size: 12px;
        font-weight: 700;
    }


/* Both pointers belong to the same semantic family. */

.right-node,
.left-node {
    background: var(--oq-blue-soft);
    border-color: var(--oq-blue-border);
    color: var(--oq-blue);
}

.valid-node {
    background: var(--oq-green-soft);
    border-color: var(--oq-green-border);
    color: var(--oq-green);
}

.best-node {
    background: var(--oq-gold-soft);
    border-color: var(--oq-gold-border);
    color: var(--oq-gold);
}

.loop-arrow {
    color: #9aa2b1;
    font-size: 23px;
    font-weight: 950;
}

.loop-return {
    margin-top: 5px;
    padding: 14px 18px;
    text-align: center;
    border-radius: 14px;
    background: var(--oq-purple-soft);
    color: var(--oq-purple);
    font-size: 15px;
}

    .loop-return strong {
        margin-left: 8px;
        color: var(--oq-purple);
    }


/* =========================================================
   PSEUDOCODE
   Mostly neutral. Semantic blocks get semantic color.
   ========================================================= */

.pseudocode-card {
    background: #ffffff;
}

.pseudocode-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.pseudo-block {
    padding: 18px;
    border-radius: 17px;
    border: 2px solid;
}

.setup-block {
    background: var(--oq-neutral);
    border-color: var(--oq-neutral-border);
}

.expand-block {
    background: var(--oq-blue-soft);
    border-color: var(--oq-blue-border);
}

.shrink-block {
    background: var(--oq-neutral);
    border-color: var(--oq-neutral-border);
}

.repeat-block {
    grid-column: 1 / -1;
    background: var(--oq-green-soft);
    border-color: var(--oq-green-border);
}

.pseudo-label {
    margin-bottom: 12px;
    color: var(--oq-neutral-text);
    font-size: 14px;
    font-weight: 950;
    letter-spacing: 1.2px;
}

.expand-block .pseudo-label {
    color: var(--oq-blue);
}

.shrink-block .pseudo-label {
    color: var(--oq-neutral-text);
}

.repeat-block .pseudo-label {
    color: var(--oq-green);
}

.pseudo-line {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    min-height: 31px;
    color: #48546a;
    font-size: 16px;
    line-height: 1.55;
}

.line-number {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 7px;
    background: white;
    color: #7b8394;
    font-family: monospace;
    font-size: 12px;
    font-weight: 900;
}

.pseudo-line strong {
    color: var(--oq-purple);
    font-family: "Cascadia Code", "Consolas", monospace;
}

.repeat-text {
    padding: 14px;
    border-radius: 11px;
    background: #263041;
    color: #f5f7ff;
    text-align: center;
    font-family: "Cascadia Code", "Consolas", monospace;
    font-size: 15px;
    letter-spacing: .2px;
}


/* =========================================================
   EXAMPLE
   ========================================================= */

.example-card {
    background: #ffffff;
}

.input-ribbon {
    display: flex;
    gap: 14px;
    margin-bottom: 20px;
}

.input-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 17px;
    border-radius: 14px;
    background: #282d3d;
    color: white;
    box-shadow: 0 7px 15px rgba(30,35,50,.12);
}

    .input-item span {
        width: 27px;
        height: 27px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: var(--oq-purple);
        font-family: monospace;
        font-weight: 950;
    }

    .input-item strong {
        font-family: "Cascadia Code", "Consolas", monospace;
        font-size: 16px;
        letter-spacing: 1px;
    }

.example-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.example-card-mini {
    padding: 18px;
    border-radius: 18px;
    border: 2px solid;
}

.expand-example {
    background: var(--oq-blue-soft);
    border-color: var(--oq-blue-border);
}

.shrink-example {
    background: var(--oq-neutral);
    border-color: var(--oq-neutral-border);
}

.best-example {
    background: var(--oq-gold-soft);
    border-color: var(--oq-gold-border);
}

.example-badge {
    display: inline-block;
    margin-bottom: 14px;
    padding: 6px 9px;
    border-radius: 8px;
    background: white;
    color: #58647a;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .7px;
}

.example-window {
    display: flex;
    gap: 4px;
    padding: 9px;
    margin-bottom: 12px;
    overflow-x: auto;
    border-radius: 11px;
    background: #252a38;
}

    .example-window span {
        width: 30px;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border-radius: 7px;
        background: #3a4152;
        color: #dfe4ef;
        font-family: monospace;
        font-weight: 900;
    }

    .example-window .wanted {
        background: var(--oq-blue);
        color: white;
    }

    .example-window .removed {
        background: #a95b5b;
        color: #ffe7e7;
        text-decoration: line-through;
    }

.example-card-mini p {
    min-height: 66px;
    margin: 0 0 10px;
    color: var(--oq-body);
    font-size: 15px;
    line-height: 1.55;
}

.mini-code {
    padding: 9px 10px;
    border-radius: 9px;
    background: #272c3a;
    color: #dfe4ff;
    font-family: monospace;
    font-size: 13px;
    font-weight: 700;
}


/* Final answer = green, as requested */

.answer-display {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 82px;
    margin-bottom: 12px;
    border-radius: 14px;
    background: var(--oq-green-soft);
    border: 2px solid #77c99a;
    color: var(--oq-green);
    font-family: monospace;
    font-size: 31px;
    font-weight: 950;
    letter-spacing: 4px;
}


/* =========================================================
   EMERGENCY MEMORY CARD
   Neutral + restrained gold emphasis
   ========================================================= */

.emergency-card {
    background: #ffffff;
    border: 2px solid var(--oq-neutral-border);
}

.emergency-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 23px;
}

.emergency-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: var(--oq-gold-soft);
    font-size: 26px;
}

.emergency-header h2 {
    margin: 0;
    color: #3a3459;
    font-size: 25px;
    font-weight: 900;
}

.emergency-header p {
    margin: 6px 0 0;
    color: #3d230d;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
}

.reconstruct-sequence {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.reconstruct-item {
    flex: 1;
    min-width: 0;
    padding: 15px 11px;
    text-align: center;
    border-radius: 15px;
    background: white;
    border: 2px solid var(--oq-neutral-border);
}

    .reconstruct-item > span {
        width: 27px;
        height: 27px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 8px;
        border-radius: 50%;
        background: var(--oq-purple);
        color: white;
        font-size: 12px;
        font-weight: 950;
    }

    .reconstruct-item strong {
        display: block;
        color: #454d63;
        font-size: 14px;
    }

    .reconstruct-item small {
        display: block;
        margin-top: 4px;
        color: #7d8799;
        font-family: monospace;
        font-size: 12px;
    }

.reconstruct-arrow {
    display: flex;
    align-items: center;
    color: #9aa2b1;
    font-weight: 950;
}

.blank-memory {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 18px;
}

    .blank-memory strong {
        padding: 10px 14px;
        border-radius: 10px;
        background: #302b45;
        color: white;
        font-size: 13px;
    }


/* =========================================================
   BOTTOM GRID
   ========================================================= */

.bottom-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 28px;
}

.remember-card,
.complexity-card {
    margin-bottom: 0;
}

.remember-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}


/* Four tiles no longer look like four unrelated colors. */

.remember-tile {
    padding: 16px;
    border-radius: 16px;
    background: var(--oq-neutral);
    border: 2px solid var(--oq-neutral-border);
}

    .remember-tile:nth-child(1) {
        background: var(--oq-neutral);
        border-color: var(--oq-neutral-border);
    }

    .remember-tile:nth-child(2) {
        background: var(--oq-blue-soft);
        border-color: var(--oq-blue-border);
    }

    .remember-tile:nth-child(3) {
        background: var(--oq-green-soft);
        border-color: var(--oq-green-border);
    }

    .remember-tile:nth-child(4) {
        background: var(--oq-gold-soft);
        border-color: var(--oq-gold-border);
    }

.remember-tile-icon {
    margin-bottom: 8px;
    font-size: 22px;
}

.remember-tile > strong {
    display: block;
    color: #3e475d;
    font-family: monospace;
    font-size: 16px;
}

.remember-tile p {
    margin: 5px 0 0;
    color: #6c778a;
    font-size: 14px;
    line-height: 1.5;
}


/* =========================================================
   COMPLEXITY
   Neutral instead of another purple card.
   ========================================================= */

.complexity-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.stat-box {
    padding: 18px;
    text-align: center;
    border-radius: 17px;
    background: var(--oq-neutral);
    border: 2px solid var(--oq-neutral-border);
}

    .stat-box span {
        display: block;
        margin-bottom: 8px;
        color: var(--oq-neutral-text);
        font-size: 12px;
        font-weight: 950;
        letter-spacing: 1px;
    }

    .stat-box strong {
        color: var(--oq-purple);
        font-family: monospace;
        font-size: 20px;
    }

.complexity-note {
    margin: 15px 0 0;
    padding: 14px;
    border-radius: 13px;
    background: #f8f8fb;
    color: #6d7789;
    font-size: 14px;
    line-height: 1.55;
}


/* =========================================================
   OWLION QUEST — CHEAT SHEET CARD DECK
   Desktop-first presentation
   ALL THREE SLIDES USE THE SAME PHYSICAL SCROLL HEIGHT
   ========================================================= */

.cheatsheet-deck {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}


/* =========================================================
   DECK VIEWPORT
   One fixed height for every slide.
   This prevents the navigation from jumping.
   ========================================================= */

.deck-viewport {
    position: relative;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 12px;
    border: 1px solid var(--oq-neutral-border);
    background: #fff;
    touch-action: pan-y;
    cursor: grab;
}

    .deck-viewport.dragging {
        cursor: grabbing;
    }

        .deck-viewport.dragging .deck-track {
            transition: none;
        }


/* =========================================================
   DECK TRACK
   Every slide occupies exactly the same height.
   ========================================================= */

.deck-track {
    display: flex;
    width: 100%;
    height: auto;
    transition: transform 0.35s ease;
}

    .deck-track > * {
        flex: 0 0 100%;
        width: 100%;
        height: 1450px;
        min-height: 1450px;
        max-height: none;
        box-sizing: border-box;
    }


/* =========================================================
   SLIDE
   Each slide is a fixed-size page.
   ========================================================= */

.deck-slide {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 1450px;
    max-height: none;
    box-sizing: border-box;
}


    /* =========================================================
   CONSISTENT CARD START POSITION
   ========================================================= */

    .deck-slide > .memory-card,
    .deck-slide > .bottom-grid,
    .deck-slide > .quest-hero {
        margin-left: 0;
        margin-right: 0;
    }

    .deck-slide > .memory-card {
        margin-top: 0;
    }

    .deck-slide > .bottom-grid {
        margin-top: 0;
    }

    .deck-slide > .quest-hero {
        margin-top: 0;
    }


/* =========================================================
   DECK NAVIGATION
   Purple remains the primary Owlion action color.
   ========================================================= */

.deck-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.deck-nav-button {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: none;
    background: linear-gradient(90deg, #6a3de8, #d84fd8);
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

    .deck-nav-button:hover:not(:disabled) {
        transform: translateY(-2px);
    }

    .deck-nav-button:disabled {
        opacity: 0.35;
        cursor: not-allowed;
    }


/* =========================================================
   PROGRESS
   ========================================================= */

.deck-progress {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 9px;
    min-width: 150px;
}

.deck-counter {
    color: #6d6886;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .8px;
}

.deck-dots {
    display: flex;
    gap: 0.5rem;
}

.deck-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: #dfe3ea;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
}

    .deck-dot:hover {
        transform: scale(1.3);
    }

    .deck-dot.active {
        background: var(--oq-purple);
        transform: scale(1.3);
    }


/* =========================================================
   CHEAT SHEET SCROLL
   ONE FIXED PHYSICAL SIZE FOR ALL THREE SLIDES
   ========================================================= */

.cheatsheet-scroll {
    position: relative;
    width: calc(100% + 56px);
    min-height: 1450px;
    max-height: none;
    max-width: none;
    margin: 30px -28px 0;
    /*
       The padding belongs to the parchment writing area.
       The large border contains the top and bottom rolls.
    */
    padding: 180px 70px 0;
    box-sizing: border-box;
    border-style: solid;
    border-width: 170px 70px 170px 70px;
    border-image-source: url("/images/ScrollCheatSheet.png");
    border-image-slice: 220 80 220 80 fill;
    border-image-repeat: stretch;
    background: transparent;
    /*
       Do NOT clip the hero here.
       The deck viewport performs the outer clipping.
    */
    overflow: visible;
}

/* =========================================================
   SCROLL CONTENT
   ========================================================= */

.cheatsheet-scroll-content {
    position: relative;
    z-index: 10;
}


/* =========================================================
   OLD BACKGROUND IMAGE
   The parchment is now supplied by border-image.
   ========================================================= */

.cheatsheet-scroll .cheatsheet-scroll-bg {
    display: none;
}


/* =========================================================
   HERO — TRANSLUCENT WHITE-WASHED HEADER
   ========================================================= */

.cheatsheet-scroll .quest-hero {
    position: relative;
    z-index: 20;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: 22px;
    box-shadow: 0 8px 22px rgba(70, 45, 20, 0.10);
    /*
       This is the single hero position.
       No second conflicting margin-top later.
    */
    margin: -215px 0 10px;
    padding: 17px 24px 22px;
    color: #2c1808;
    backdrop-filter: blur(2px);
}


    /* =========================================================
   HERO PURPLE ACCENT
   ========================================================= */

    .cheatsheet-scroll .quest-hero::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 5px;
        background: var(--oq-purple);
        border-radius: 22px 22px 0 0;
    }


    /* =========================================================
   HERO INNER AREAS
   ========================================================= */

    .cheatsheet-scroll .quest-hero .hero-top,
    .cheatsheet-scroll .quest-hero .hero-main {
        position: relative;
        z-index: 21;
        background: transparent;
        padding: 0;
        border-radius: 0;
        backdrop-filter: none;
    }


    /* =========================================================
   HERO TEXT
   Keep Owlion Quest + Sliding Window + title visible.
   ========================================================= */

    .cheatsheet-scroll .quest-hero .hero-text {
        position: relative;
        z-index: 22;
    }

    .cheatsheet-scroll .quest-hero h1 {
        position: relative;
        z-index: 22;
        color: #211104 !important;
        text-shadow: 0 1px 3px rgba(255,255,255,.95), 0 0 10px rgba(255,243,205,.6);
    }

    .cheatsheet-scroll .quest-hero p {
        position: relative;
        z-index: 22;
        color: #3d230d !important;
        font-weight: 700;
        text-shadow: 0 1px 2px rgba(255,255,255,.8);
    }


    /* =========================================================
   HERO MASCOT
   ========================================================= */

    .cheatsheet-scroll .quest-hero .hero-mascot {
        position: relative;
        z-index: 22;
    }


    /* =========================================================
   HERO STARS
   ========================================================= */

    .cheatsheet-scroll .quest-hero .hero-star {
        z-index: 23;
        opacity: .7;
    }


/* =========================================================
   CONTENT CARD APPEARANCE
   ========================================================= */

.cheatsheet-scroll .memory-card {
    background: rgba(255, 248, 225, 0.88);
    border-color: rgba(126, 78, 27, 0.25);
    box-shadow: 0 5px 15px rgba(80, 45, 15, 0.10);
}

.cheatsheet-scroll .quest-hero {
    margin-top: -218px;
}

/* =========================================================
   STORY CARD
   ========================================================= */

.cheatsheet-scroll .story-card {
    margin-top: 0;
}


/* =========================================================
   ALGORITHM LOOP
   ========================================================= */

.cheatsheet-scroll .core-card {
    margin-top: -218px;
}


/* =========================================================
   PSEUDOCODE
   ========================================================= */

.cheatsheet-scroll .pseudocode-card {
    margin-top: -20px;
}


/* =========================================================
   EXAMPLE
   ========================================================= */

.cheatsheet-scroll .example-card {
    margin-top: -218px;
}


/* =========================================================
   EMERGENCY MEMORY
   ========================================================= */

.cheatsheet-scroll .emergency-card {
    margin-top: -20px;
}


/* =========================================================
   REMEMBER + COMPLEXITY
   ========================================================= */

.cheatsheet-scroll .bottom-grid {
    margin-top: -20px;
}
/* =========================================================
   SCROLL — SUBTITLE READABILITY
   ========================================================= */

.cheatsheet-scroll .card-heading p {
    color: #4a321f;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85);
}
.cheatsheet-scroll .quest-hero .hero-text > p {
    color: #241507 !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.95) !important;
}
/* =========================================================
   PARCHMENT READABILITY — DARKEN SOFT TEXT COLORS
   Keep the original palette, but strengthen text on parchment.
   ========================================================= */

.cheatsheet-scroll {
    --oq-purple: #5541b3;
    --oq-blue: #3564a8;
    --oq-green: #17683f;
    --oq-gold: #8a6200;
    --oq-red: #9d3535;
    --oq-heading: #29213d;
    --oq-body: #4d3f34;
    --oq-neutral-text: #4b463f;
}

    /* Hero eyebrow */
    .cheatsheet-scroll .quest-hero .hero-top .eyebrow {
        display: inline-block;
        padding: 3px 8px;
        border-radius: 6px;
        color: #4b2a9b !important;
        -webkit-text-fill-color: #4b2a9b !important;
        background: rgba(255, 248, 225, 0.88);
        opacity: 1 !important;
        font-size: 13px !important;
        font-weight: 950 !important;
        letter-spacing: 1.6px;
        text-shadow: none !important;
    }

    /* Hero subtitle */
    .cheatsheet-scroll .hero-text > p {
        color: #3b2819 !important;
        font-weight: 750 !important;
    }

    /* All card subtitles */
    .cheatsheet-scroll .card-heading p {
        color: #493a2d !important;
        font-weight: 650 !important;
    }

    /* General body text */
    .cheatsheet-scroll .story-step p,
    .cheatsheet-scroll .story-intro p,
    .cheatsheet-scroll .example-card-mini p,
    .cheatsheet-scroll .remember-tile p,
    .cheatsheet-scroll .complexity-note {
        color: #514338 !important;
    }

    /* Small supporting labels */
    .cheatsheet-scroll .loop-node small,
    .cheatsheet-scroll .reconstruct-item small,
    .cheatsheet-scroll .deck-counter {
        color: #5a4b3d !important;
    }

    /* Neutral labels */
    .cheatsheet-scroll .story-rule span,
    .cheatsheet-scroll .pseudo-label,
    .cheatsheet-scroll .example-badge {
        color: #4d443c !important;
    }

    /* Neutral headings / labels */
    .cheatsheet-scroll .story-title,
    .cheatsheet-scroll .reconstruct-item strong,
    .cheatsheet-scroll .remember-tile > strong {
        color: #36302a !important;
    }

    /* Strong text inside normal content */
    .cheatsheet-scroll .story-rule strong {
        color: #30291f !important;
    }

    /* Purple semantic text */
    .cheatsheet-scroll .pseudo-line strong,
    .cheatsheet-scroll .loop-return,
    .cheatsheet-scroll .loop-return strong {
        color: #4f3ba5 !important;
    }

    /* Blue semantic text */
    .cheatsheet-scroll .expand-block .pseudo-label,
    .cheatsheet-scroll .right-node,
    .cheatsheet-scroll .left-node {
        color: #315f9e !important;
    }

    /* Green semantic text */
    .cheatsheet-scroll .repeat-block .pseudo-label,
    .cheatsheet-scroll .valid-node {
        color: #17683f !important;
    }

    /* Gold semantic text */
    .cheatsheet-scroll .best-node {
        color: #825d00 !important;
    }

    /* Complexity values */
    .cheatsheet-scroll .stat-box strong {
        color: #4f3ba5 !important;
    }

    /* Input / equation supporting text */
    .cheatsheet-scroll .memory-equation b,
    .cheatsheet-scroll .loop-arrow,
    .cheatsheet-scroll .story-connector,
    .cheatsheet-scroll .reconstruct-arrow {
        color: #665b50 !important;
    }
/* =========================================================
   THE ALGORITHM'S MEMORY LOOP
   Two-row continuous sequence
   ========================================================= */

.algorithm-loop--two-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
}

    .algorithm-loop--two-row .loop-row {
        display: flex;
        align-items: stretch;
        justify-content: center;
        gap: 10px;
        width: 100%;
    }

    .algorithm-loop--two-row .loop-node {
        flex: 1 1 0;
        min-width: 0;
    }

    .algorithm-loop--two-row .loop-arrow {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .algorithm-loop--two-row .loop-transition {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        line-height: 1;
    }