/*
  Logic Notebook Recommendation Game — style.css v4
  =================================================
  Uses the exact same CSS as 2048/style.css for:
  - body / html background grid
  - .game-page wrapper
  - .breadcrumbs (including ::after marker-yellow)
  - .gamestat-module / .gamestat-row / .gamestat-card / .gamestat-label / .gamestat-value
  - .controls-key / .controls-key-underlay / .controls-key-face / .controls-key-label
  - .message-sticker / .message-sticker-underlay / .message-sticker-face

  Draft-specific gameplay layer:
  - .recommendation-game-page / .quiz-page shell
  - .recommendation-game-board / .quiz-chat-section playfield
  - .recommendation-game-stage / #chat-window state surface
  - .recommendation-game-controls / #chat-input-area answer controls
  - .recommendation-game-page-content / .quiz-seo-notes page content
*/

/* ===== COPIED FROM 2048/style.css — TOKENS ===== */
:root {
    --paper: #f5eedc;
    --paper-line: rgba(87, 127, 157, 0.22);
    --paper-line-strong: rgba(87, 127, 157, 0.32);
    --ink: #263241;
    --ink-soft: #4f6275;
    --page-blue: #1f6fae;
    --marker-yellow: rgba(255, 238, 0, 0.82);
    --notebook-grid: 28px;
    --notebook-half: calc(var(--notebook-grid) / 2);
    --page-content-grid-offset: var(--notebook-grid);
    --page-text-baseline-shift: 5px;
    --gamestat-row-height: 32px;
    --marker-lift: 5px;
    --pen-blue: #253f8f;
    --game-tile-inset: 5px;
    --answer-pile-width: calc(var(--notebook-grid) * 3);
    --pasted-sticker-size: calc(var(--notebook-grid) * 3);
    --font-main: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-hand: "Comic Sans MS", "Trebuchet MS", cursive;
}

/* ===== COPIED FROM 2048/style.css — RESET ===== */
* { box-sizing: border-box; }

html {
    min-height: 100%;
    background: var(--paper);
}

body {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-main);
    background:
        linear-gradient(var(--paper-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--paper-line) 1px, transparent 1px),
        var(--paper);
    background-size: var(--notebook-grid) var(--notebook-grid), var(--notebook-grid) var(--notebook-grid), auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

button { font: inherit; }

a {
    color: var(--page-blue);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
a:hover, a:focus-visible { color: var(--page-blue); }

/* ===== COPIED FROM 2048/style.css — .game-page ===== */
.game-page {
    width: 100%;
    max-width: 620px;
    padding: 0 16px var(--notebook-half);
}

/* ===== RECOMMENDATION GAME SHELL ===== */
.quiz-page {
    position: relative;
    min-height: 100dvh;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.recommendation-game-page {
    /* Semantic alias for the game-like recommendation page shell. */
}

/* ===== COPIED FROM 2048/style.css — .breadcrumbs ===== */
.breadcrumbs {
    position: relative;
    top: var(--page-text-baseline-shift);
    margin: 0;
    color: var(--ink-soft);
    font-size: 13px;
    line-height: var(--notebook-grid);
    flex-shrink: 0;
}

.breadcrumbs a {
    color: var(--page-blue);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.breadcrumbs span { margin: 0 4px; }

.breadcrumbs span[aria-current="page"] {
    position: relative;
    display: inline-block;
    color: var(--page-blue);
    z-index: 0;
}

.breadcrumbs span[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: -3px;
    right: -5px;
    bottom: var(--marker-lift);
    height: 1.35em;
    background: var(--marker-yellow);
    border-radius: 3px 6px 4px 5px;
    transform: rotate(-1.2deg);
    z-index: -1;
    clip-path: polygon(1% 20%, 6% 8%, 14% 14%, 24% 5%, 36% 12%, 48% 6%, 60% 14%, 73% 7%, 84% 15%, 94% 10%, 99% 22%, 98% 88%, 92% 96%, 80% 90%, 68% 97%, 56% 91%, 43% 98%, 29% 90%, 18% 95%, 7% 88%, 1% 80%);
}

/* ===== RECOMMENDATION GAME HERO ===== */
.quiz-hero {
    flex-shrink: 0;
    padding: 0 0 3px;
}

.recommendation-game-hero {
    /* Semantic alias; visual rules intentionally stay on .quiz-hero. */
}

.quiz-hero h1,
.quiz-hero p {
    position: relative;
    top: var(--page-text-baseline-shift);
    margin: 0;
    color: var(--ink);
}

.quiz-hero h1 {
    font-size: 22px;
    font-weight: 750;
    line-height: var(--notebook-grid);
}

.quiz-hero p {
    margin-top: 0;
    color: var(--ink-soft);
    font-size: 14px;
    line-height: var(--notebook-grid);
}

/* ===== COPIED FROM 2048/style.css — .gamestat-* ===== */
.gamestat-module {
    flex-shrink: 0;
    /* one full grid row of breathing room above the cardboard strip */
    margin: var(--notebook-half) 0 10px;
}

.gamestat-row {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, var(--gamestat-row-height));
    gap: 0;
    border: 0;
    background: transparent;
    transform: rotate(-0.45deg);
    transform-origin: 52% 48%;
}

/* Quiz override — 9 equal columns instead of 3 */
.quiz-stat-row {
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: var(--gamestat-row-height);
    min-height: var(--gamestat-row-height);
}

.gamestat-card {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.gamestat-card-layer {
    vector-effect: non-scaling-stroke;
}

.gamestat-card-face {
    fill: #d2b48c;
    filter: url(#cardboard-grain);
    stroke: rgba(108, 82, 51, 0.38);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.gamestat-label,
.gamestat-value {
    display: block;
    background: transparent;
    color: rgba(64, 43, 24, 0.78);
    font-family: "Comic Sans MS", "Trebuchet MS", cursive;
    position: relative;
    z-index: 1;
    font-size: 15px;
    font-weight: 500;
    height: var(--gamestat-row-height);
    letter-spacing: 0.04em;
    line-height: var(--gamestat-row-height);
    overflow: hidden;
    padding: 0 5px;
    text-align: center;
    text-overflow: ellipsis;
    text-shadow:
        0 1px 0 rgba(255, 239, 203, 0.34),
        0 -1px 0 rgba(64, 43, 24, 0.24);
    white-space: nowrap;
}

.gamestat-label {
    grid-row: 1;
    text-transform: uppercase;
    transform: translateY(4px);
}

.gamestat-value {
    grid-row: 2;
    color: rgba(46, 30, 15, 0.84);
    text-shadow:
        0 1px 0 rgba(255, 239, 203, 0.18),
        0 -1px 0 rgba(39, 24, 11, 0.46),
        1px 0 0 rgba(255, 239, 203, 0.1),
        -1px 0 0 rgba(39, 24, 11, 0.22);
    transform: translateY(-4px);
}

/* Quiz progress number cells inside the cardboard strip */
.q-num {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--gamestat-row-height);
    font-family: "Comic Sans MS", "Trebuchet MS", cursive;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: var(--gamestat-row-height);
    color: rgba(64, 43, 24, 0.38);
    text-align: center;
    text-shadow:
        0 1px 0 rgba(255, 239, 203, 0.34),
        0 -1px 0 rgba(64, 43, 24, 0.24);
    transition: color 0.15s ease;
    user-select: none;
}

/* current question: ink circle drawn with SVG overlay from JS */
.q-num.q-current {
    color: rgba(46, 30, 15, 0.88);
}

/* done: pen strikethrough */
.q-num.q-done {
    color: rgba(64, 43, 24, 0.3);
    text-decoration: line-through;
    text-decoration-color: rgba(37, 63, 143, 0.55);
    text-decoration-thickness: 1.5px;
}

/* ===== COPIED FROM 2048/style.css — .controls-key ===== */
.controls-key {
    --control-fill: #79cbd9;
    --control-stroke: #5fb5c4;
    --control-underlay: rgba(25, 23, 19, 0.54);
    --sticker-offset-y: 0px;
    --sticker-rotation: -1.05deg;
    position: relative;
    z-index: 0;
    isolation: isolate;
    display: grid;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #2c3033;
    cursor: pointer;
    font-size: 13px;
    place-items: center;
    text-transform: uppercase;
    transform: translateY(var(--sticker-offset-y)) rotate(var(--sticker-rotation));
    transform-origin: 50% 18%;
    -webkit-tap-highlight-color: transparent;
}

.controls-key-underlay,
.controls-key-face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.controls-key-underlay { z-index: 0; transition: opacity 0.08s ease; }
.controls-key-underlay path { fill: var(--control-underlay); }

.controls-key-face { z-index: 1; }
.controls-key-face path {
    fill: var(--control-fill);
    filter: url(#control-paper-grain);
    stroke: var(--control-stroke);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.controls-key:hover, .controls-key:focus-visible { filter: saturate(1.04); outline: none; }
.controls-key:active, .controls-key.is-pressing {
    transform: translateY(calc(var(--sticker-offset-y) + 1px)) rotate(var(--sticker-rotation));
}
.controls-key:active .controls-key-underlay,
.controls-key.is-pressing .controls-key-underlay { opacity: 0.12; }
.controls-key:disabled { cursor: default; opacity: 1; }
.controls-key.is-moving-out { visibility: hidden; }

.controls-key-label {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    align-items: center;
    align-content: center;
    gap: 1px;
    font-family: "Comic Sans MS", "Trebuchet MS", cursive;
    font-size: 11px;
    font-weight: 500;
    justify-items: center;
    line-height: 1.05;
    overflow: hidden;
    padding: 5px 6px;
    white-space: normal;
    word-break: break-word;
    text-transform: none;
}

/* Quiz sticker buttons — square, fill their answer columns */
.quiz-sticker-btn {
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: unset;
    transform-origin: 50% 18%;
}

.quiz-sticker-btn:nth-child(1) {
    --control-fill: #79cbd9;
    --control-stroke: #5fb5c4;
    --control-underlay: rgba(25, 23, 19, 0.54);
    --sticker-rotation: -1.05deg;
    --sticker-offset-y: 0px;
}
.quiz-sticker-btn:nth-child(2) {
    --control-fill: #f3dc76;
    --control-stroke: #d9bd4f;
    --control-underlay: rgba(29, 25, 18, 0.5);
    --sticker-rotation: 1.35deg;
    --sticker-offset-y: 2px;
}
.quiz-sticker-btn:nth-child(3) {
    --control-fill: #91d389;
    --control-stroke: #5fa75b;
    --control-underlay: rgba(25, 35, 22, 0.5);
    --sticker-rotation: -0.7deg;
    --sticker-offset-y: -1px;
}
.quiz-sticker-btn:nth-child(4) {
    --control-fill: #d87066;
    --control-stroke: #bd5149;
    --control-underlay: rgba(30, 18, 15, 0.54);
    --sticker-rotation: 1.1deg;
    --sticker-offset-y: 1px;
}

/* ===== COPIED FROM 2048/style.css — .message-sticker (answer sticker) ===== */
.message-sticker {
    --sticker-fill: #91d389;
    --sticker-stroke: #5fa75b;
    --sticker-underlay: rgba(40, 48, 34, 0.28);
    position: relative;
    isolation: isolate;
    padding: 10px 14px;
    place-items: center;
    transform: rotate(-1.2deg);
    display: inline-grid;
    max-width: min(240px, 65%);
    min-height: 48px;
    margin-top: 4px;
}

.message-sticker-underlay,
.message-sticker-face {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.message-sticker-underlay path { fill: var(--sticker-underlay); }

.message-sticker-face {
    z-index: -1;
    filter: url(#message-sticker-grain);
}

.message-sticker-face path {
    fill: var(--sticker-fill);
    stroke: var(--sticker-stroke);
    stroke-width: 1.2;
}

.msg-content {
    position: relative;
    z-index: 1;
    font-family: "Comic Sans MS", "Trebuchet MS", cursive;
    font-size: 13px;
    font-weight: 500;
    color: rgba(28, 33, 34, 0.88);
    line-height: 1.3;
    text-align: center;
}

/*
  Pasted answer sticker — same colours + tilts as the button that was pressed.
  Uses .controls-key CSS vars so the SVG face/underlay match exactly.
  JS adds one of these classes to the wrapper div.
*/
.answer-sticker-0 {
    --control-fill: #79cbd9; --control-stroke: #5fb5c4; --control-underlay: rgba(25,23,19,0.54);
    --sticker-rotation: -2.4deg; --sticker-offset-y: 0px;
}
.answer-sticker-1 {
    --control-fill: #f3dc76; --control-stroke: #d9bd4f; --control-underlay: rgba(29,25,18,0.5);
    --sticker-rotation: 1.9deg; --sticker-offset-y: 2px;
}
.answer-sticker-2 {
    --control-fill: #91d389; --control-stroke: #5fa75b; --control-underlay: rgba(25,35,22,0.5);
    --sticker-rotation: -1.8deg; --sticker-offset-y: -1px;
}
.answer-sticker-3 {
    --control-fill: #d87066; --control-stroke: #bd5149; --control-underlay: rgba(30,18,15,0.54);
    --sticker-rotation: 2.2deg; --sticker-offset-y: 1px;
}

/* The pasted sticker is a square — same shape as the pressed button */
.pasted-sticker {
    position: absolute;
    z-index: 0;
    isolation: isolate;
    display: inline-grid;
    place-items: center;
    width: var(--pasted-sticker-size);
    height: var(--pasted-sticker-size);
    left: 50%;
    top: calc(var(--quiz-question-top-offset, 0px) + 2px);
    margin: 0;
    font-family: "Comic Sans MS", "Trebuchet MS", cursive;
    font-size: 11px;
    font-weight: 500;
    color: #2c3033;
    line-height: 1.15;
    text-align: center;
    transform:
        translateX(calc(-50% + var(--pile-x, 0px)))
        translateY(calc(var(--sticker-offset-y, 0px) + var(--pile-y, 0px)))
        rotate(var(--sticker-rotation, -0.6deg));
    transform-origin: 50% 18%;
    will-change: transform;
    z-index: var(--pile-z, 1);
}

.pasted-sticker .controls-key-underlay,
.pasted-sticker .controls-key-face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.pasted-sticker .controls-key-underlay { z-index: 0; }
.pasted-sticker .controls-key-underlay path { fill: var(--control-underlay); }

.pasted-sticker .controls-key-face { z-index: 1; }
.pasted-sticker .controls-key-face path {
    fill: var(--control-fill);
    filter: url(#control-paper-grain);
    stroke: var(--control-stroke);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.pasted-sticker-label {
    position: relative;
    z-index: 2;
    padding: 5px;
}

/* ===== RECOMMENDATION GAME PLAYFIELD ===== */
.quiz-chat-section {
    flex: 0 0 calc(var(--notebook-grid) * 8);
    min-height: calc(var(--notebook-grid) * 8);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.quiz-chat-section.is-result-mode {
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
}

.recommendation-game-board,
.recommendation-game-stage {
    /* Semantic aliases for the gameplay module; existing selectors own the layout. */
}

#chat-window {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 4px 4px 8px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--answer-pile-width);
    gap: 8px;
    transition:
        grid-template-columns 0.24s cubic-bezier(0.22, 1, 0.36, 1),
        gap 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

#chat-window.is-answered {
    grid-template-columns: minmax(0, 1fr) var(--answer-pile-width);
    gap: 8px;
}

#chat-window.is-result-mode {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
}

.question-slot {
    grid-column: 1;
    min-width: 0;
    min-height: calc(var(--notebook-grid) * 6);
    overflow: visible;
}

#chat-window.is-answered .question-slot {
    grid-column: 1;
}

#chat-window.is-result-mode .question-slot {
    grid-column: 1 / -1;
    min-height: 0;
}

.answer-pile {
    grid-column: 2;
    position: relative;
    min-width: 0;
    min-height: calc(var(--notebook-grid) * 4);
    overflow: visible;
    opacity: 1;
    pointer-events: none;
    transition: opacity 0.16s ease;
}

#chat-window.is-answered .answer-pile {
    min-width: var(--answer-pile-width);
    opacity: 1;
    pointer-events: auto;
}

#chat-window.is-result-mode .answer-pile {
    display: none;
}

.answer-pile::before {
    content: "stick your answer here";
    position: absolute;
    left: 50%;
    top: calc(var(--quiz-question-top-offset, 0px) + 2px);
    width: var(--pasted-sticker-size);
    height: var(--pasted-sticker-size);
    display: grid;
    place-items: center;
    padding: 9px;
    color: rgba(37, 63, 143, 0.23);
    border: 1px dashed rgba(37, 63, 143, 0.22);
    font-family: "Comic Sans MS", "Trebuchet MS", cursive;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
    text-transform: uppercase;
    transform: translateX(-50%) rotate(-1.5deg);
    pointer-events: none;
}

.answer-pile.has-answers::before,
.answer-pile.is-result-mode::before,
.answer-pile:has(.pasted-sticker)::before {
    opacity: 0;
}

/*
  .q-row / .q-text — text directly on notebook lines.
  EXACTLY the same as .game-hero p / .content-block p in 2048/style.css:

    position: relative;
    top: var(--page-text-baseline-shift);   ← 5px shift
    line-height: var(--notebook-grid);      ← 28px = one grid cell

  The container (#chat-window) gets its padding-top adjusted by
  alignChatToGrid() so the first line lands on a blue grid line.
*/
.q-row {
    width: 100%;
    padding: 0 0 0;
    /* no extra padding — text aligns via top shift + line-height */
}

.question-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 5px;
    align-content: flex-start;
    padding: 2px 0 0 8px;
}

.question-word-tile {
    position: relative;
    isolation: isolate;
    display: inline-grid;
    min-width: 44px;
    max-width: 100%;
    height: 36px;
    place-items: center;
    padding: 0 9px 2px;
    color: var(--question-tile-number-color, var(--pen-blue));
    font-family: "Comic Sans MS", "Trebuchet MS", cursive;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    text-shadow:
        -1px -1px 0 rgba(255, 255, 255, 0.36),
        0.7px 0.7px 0 rgba(16, 27, 84, 0.28),
        1.2px 1.2px 0 rgba(92, 73, 47, 0.12);
    transform: rotate(var(--tile-rotation, 0deg));
    animation: question-tile-pop-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.question-word-tile.is-mischief-clicked {
    animation: question-tile-wrong-click 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.question-tile-svg {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.question-tile-layer,
.question-tile-top {
    vector-effect: non-scaling-stroke;
}

.question-tile-top {
    filter: url(#control-paper-grain);
}

.question-word-label {
    position: relative;
    z-index: 1;
    max-width: 100%;
    padding-bottom: 2px;
    overflow: visible;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@keyframes question-tile-pop-in {
    0% {
        opacity: 0;
        transform:
            translate(var(--tile-enter-x, 0), var(--tile-enter-y, 0))
            rotate(calc(var(--tile-rotation, 0deg) - 4deg))
            scale(0.78);
    }
    100% {
        opacity: 1;
        transform:
            translate(0, 0)
            rotate(var(--tile-rotation, 0deg))
            scale(1);
    }
}

@keyframes question-tile-wrong-click {
    0% {
        transform: rotate(var(--tile-rotation, 0deg)) scale(1);
    }
    45% {
        transform: rotate(calc(var(--tile-rotation, 0deg) - 2deg)) scale(0.96);
    }
    100% {
        transform: rotate(var(--tile-rotation, 0deg)) scale(1);
    }
}

.q-text {
    position: relative;
    top: var(--page-text-baseline-shift);
    margin: 0;
    color: var(--ink);
    font-family: "Comic Sans MS", "Trebuchet MS", cursive;
    font-size: 16px;
    font-weight: 500;
    line-height: var(--notebook-grid);
    min-height: var(--notebook-grid);
}

.q-text.q-status {
    color: var(--ink-soft);
    font-style: italic;
}

.q-text.q-match {
    font-weight: 700;
}

/* ===== RECOMMENDATION GAME CONTROLS ===== */
#chat-input-area {
    flex-shrink: 0;
    padding: 0;
    /* 4 stickers in one row */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.recommendation-game-controls {
    /* Semantic alias for the answer controls module. */
}

/* ===== PAGE CONTENT ===== */
.quiz-notebook-preview {
    width: 100%;
    margin-top: var(--quiz-notebook-grid-offset, var(--notebook-grid));
    overflow: visible;
}

.quiz-notebook-sheet {
    padding-right: 0;
    padding-left: 0;
}

.quiz-tree-scroll {
    position: relative;
    overflow: visible;
    z-index: 1;
}

.quiz-seo-notes {
    width: 100%;
    margin-top: var(--quiz-seo-grid-offset, var(--notebook-grid));
    padding-bottom: var(--notebook-grid);
    color: var(--ink);
}

.recommendation-game-page-content {
    /* Semantic alias for content below the gameplay module. */
}

.quiz-intro-seo,
.quiz-notebook-heading,
.quiz-next-goal,
.quiz-seo-panel .content-block,
.quiz-seo-panel .faq-block {
    width: 100%;
    margin: 0 0 var(--notebook-grid);
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.quiz-next-goal {
    margin-top: var(--quiz-next-goal-grid-offset, 0px);
}

.quiz-seo-panel {
    padding: 0;
}

.quiz-intro-seo h2,
.quiz-notebook-heading h2,
.quiz-next-goal h2,
.quiz-seo-panel h2,
.quiz-intro-seo h3,
.quiz-notebook-heading h3,
.quiz-next-goal h3,
.quiz-seo-panel h3,
.quiz-intro-seo p,
.quiz-notebook-heading p,
.quiz-next-goal p,
.quiz-seo-panel p {
    position: relative;
    top: var(--page-text-baseline-shift);
    margin: 0;
    line-height: var(--notebook-grid);
}

.quiz-intro-seo h2,
.quiz-notebook-heading h2,
.quiz-next-goal h2,
.quiz-seo-panel h2 {
    display: inline;
    padding: 0 4px;
    color: var(--ink);
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
    background:
        linear-gradient(177deg, transparent 0 15%, rgba(255, 238, 0, 0.7) 15% 86%, transparent 86% 100%),
        linear-gradient(2deg, transparent 0 24%, rgba(255, 238, 0, 0.5) 24% 94%, transparent 94% 100%),
        linear-gradient(90deg, rgba(255, 238, 0, 0.72), rgba(255, 238, 0, 0.82) 42%, rgba(255, 238, 0, 0.64));
    background-position: 0 4px, 0 5px, 0 4px;
    background-repeat: no-repeat;
    background-size: 100% 1.35em;
    border-radius: 3px 6px 4px 5px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.quiz-intro-seo h3,
.quiz-notebook-heading h3,
.quiz-next-goal h3,
.quiz-seo-panel h3 {
    margin-top: var(--notebook-grid);
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
}

.quiz-intro-seo p,
.quiz-notebook-heading p,
.quiz-next-goal p,
.quiz-seo-panel p {
    color: var(--ink);
    font-size: 15px;
    font-weight: 400;
}

.quiz-seo-panel .faq-item {
    margin-bottom: var(--notebook-grid);
}

.quiz-seo-panel .faq-item:last-child {
    margin-bottom: 0;
}

.quiz-seo-panel a {
    color: var(--page-blue);
}

@media (min-width: 560px) {
    .quiz-hero h1 {
        font-size: 28px;
        line-height: var(--notebook-grid);
    }
}

/* ===== RESULT GAME CARD — copied from minigames index card contract ===== */
.game-card {
    position: relative;
    isolation: isolate;
    display: grid;
    min-height: 84px;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 0 12px 10px 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-decoration: none;
    overflow: visible;
    transform: translateX(var(--game-card-x, 0)) rotate(var(--game-card-tilt, 0deg));
}

.game-card::before {
    position: absolute;
    inset: 0;
    z-index: 1;
    border: 1px solid rgba(82, 69, 49, 0.32);
    border-radius: 2px;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.16) 1px, transparent 1px),
        linear-gradient(0deg, rgba(82,69,49,0.06) 1px, transparent 1px),
        #fbf4df;
    background-size: 17px 19px, 23px 29px, auto;
    clip-path: polygon(
        0 0,
        24px 0,
        24px 1px,
        27px 1px,
        27px 0,
        66px 0,
        66px 1px,
        69px 1px,
        69px 0,
        100% 0,
        100% 42px,
        calc(100% - 1px) 42px,
        calc(100% - 1px) 58px,
        100% 58px,
        100% 100%,
        calc(100% - 31px) 100%,
        calc(100% - 31px) calc(100% - 1px),
        calc(100% - 34px) calc(100% - 1px),
        calc(100% - 34px) 100%,
        0 100%,
        0 28px,
        1px 28px,
        1px 25px,
        0 25px
    );
    content: "";
    filter: url("#game-card-paper-grain");
    pointer-events: none;
}

.game-card::after {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 2px;
    background: #d9cebd;
    box-shadow:
        -1px 1px 0 rgba(82,69,49,0.28),
        -3px 3px 0 #3a342d,
        -4px 4px 0 #8c806e,
        -5px 5px 0 #c8bca8,
        -6px 6px 0 #f0e8dc;
    content: "";
    pointer-events: none;
}

.game-card:hover,
.game-card:focus-visible {
    outline: none;
    transform: translateX(var(--game-card-x, 0)) rotate(calc(var(--game-card-tilt, 0deg) - 0.08deg)) translateY(-1px);
}

.game-card-copy,
.game-card > .game-preview {
    position: relative;
    z-index: 2;
}

.game-card-copy {
    align-self: center;
}

.game-preview {
    display: grid;
    width: calc(var(--notebook-grid) * 3);
    height: calc(var(--notebook-grid) * 3);
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    align-self: center;
    border: 2px solid rgba(37, 63, 143, 0.72);
    background: rgba(245, 238, 220, 0.88);
    box-shadow: -1px 1px 0 rgba(34, 45, 57, 0.2);
    overflow: hidden;
}

.game-preview-image {
    display: block;
    object-fit: cover;
}

.result-card > .result-info { position: relative; z-index: 2; align-self: center; }

.game-card h2,
.game-card h3 {
    margin: 0;
    color: var(--page-blue);
    font-family: var(--font-hand);
    font-size: 18px; font-weight: 500;
    line-height: 20px;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    text-transform: uppercase;
}

.game-card p {
    margin: 3px 0 0;
    color: var(--ink);
    font-family: var(--font-hand);
    font-size: 13px; line-height: 16px;
}

.result-card {
    --game-card-x: -1px;
    --game-card-tilt: -0.16deg;
    align-items: start;
    grid-template-columns: minmax(0, 1fr);
    min-height: auto;
    padding: 10px 14px 12px;
}

.result-card > .result-info {
    align-self: start;
    padding-top: 0;
}

.result-card .game-preview {
    display: none;
}

.result-game-note {
    color: var(--ink-soft) !important;
    font-weight: 700;
    text-transform: none;
}

.result-og-banner {
    position: relative;
    isolation: isolate;
    display: block;
    width: 100%;
    margin: var(--notebook-grid) 0 0;
    border: 1px solid rgba(82, 69, 49, 0.34);
    background: #fbf4df;
    box-shadow:
        -1px 1px 0 rgba(82, 69, 49, 0.22),
        -4px 4px 0 #8c806e,
        -5px 5px 0 #c8bca8;
    color: inherit;
    overflow: hidden;
    text-decoration: none;
    transform: rotate(0.12deg);
}

.result-og-banner:hover,
.result-og-banner:focus-visible {
    outline: none;
    transform: rotate(0.04deg) translateY(-1px);
}

.result-og-banner:focus-visible {
    box-shadow:
        0 0 0 2px rgba(37, 63, 143, 0.28),
        -1px 1px 0 rgba(82, 69, 49, 0.22),
        -4px 4px 0 #8c806e,
        -5px 5px 0 #c8bca8;
}

.result-og-banner img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 630;
    object-fit: cover;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 400px) {
    .game-page { padding: 0 10px var(--notebook-half); }
}

@media (max-width: 560px) {
    .result-og-banner {
        width: 100vw;
        margin-right: calc(50% - 50vw);
        margin-left: calc(50% - 50vw);
    }
}

/* ===== ANALYSIS ANIMATION ===== */
.analysis-block {
    position: relative;
    top: var(--page-text-baseline-shift);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
}

.analysis-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    height: var(--notebook-grid);
    gap: 8px;
    color: var(--ink);
    font-family: "Comic Sans MS", "Trebuchet MS", cursive;
}

.analysis-title-tile,
.analysis-name-tile {
    position: relative;
    isolation: isolate;
    display: inline-grid;
    place-items: center;
    min-width: 0;
    height: 24px;
    padding: 0 7px 1px;
    transform: rotate(-0.7deg);
}

.analysis-title-tile {
    width: min(168px, 100%);
}

.analysis-name-tile {
    width: 88px;
    transform: rotate(0.55deg);
}

.analysis-title-tile .question-tile-svg,
.analysis-name-tile .question-tile-svg {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
}

.analysis-title,
.analysis-name {
    position: relative;
    z-index: 1;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1;
}

.analysis-title {
    color: var(--pen-blue);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

.analysis-code {
    color: rgba(38, 50, 65, 0.62);
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    transform: rotate(0.8deg);
}

/* each row is exactly one notebook line tall */
.analysis-row {
    display: grid;
    grid-template-columns: 92px 1fr;
    align-items: center;
    height: var(--notebook-grid);
    gap: 10px;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.analysis-row.is-visible {
    opacity: 1;
    transform: none;
}

.analysis-name {
    font-family: "Comic Sans MS", "Trebuchet MS", cursive;
    font-size: 9.5px;
    color: var(--ink-soft);
    text-align: right;
    transition: color 0.3s ease;
}

.analysis-row.is-winner .analysis-name {
    color: var(--ink);
    font-weight: 700;
}

.analysis-track {
    position: relative;
    height: 22px;
    border-radius: 1px;
    background: transparent;
    overflow: visible;
}

.analysis-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0%;
    background: transparent;
    border-radius: 1px;
    transition: width 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.analysis-row.is-winner .analysis-fill {
    background: transparent;
}

.analysis-ticks {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 3px;
    align-items: center;
    height: 100%;
}

.analysis-tick {
    display: block;
    height: 16px;
    border: 1px solid var(--control-stroke, rgba(37, 63, 143, 0.24));
    border-radius: 2px;
    background: var(--control-fill, rgba(37, 63, 143, 0.16));
    box-shadow: -1px 1px 0 var(--control-underlay, rgba(25, 23, 19, 0.18));
    opacity: 0.18;
    transform: translateY(3px) rotate(-1deg) scale(0.82);
    transition:
        opacity 0.18s ease,
        transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.analysis-tick:nth-child(2n) {
    transform: translateY(3px) rotate(1.1deg) scale(0.82);
}

.analysis-tick.is-active {
    opacity: 1;
    transform: translateY(0) rotate(-1deg) scale(1);
}

.analysis-tick:nth-child(2n).is-active {
    transform: translateY(0) rotate(1.1deg) scale(1);
}

/* marker-yellow sweep on winner when resolved */
.analysis-row.is-winner.is-final .analysis-track {
    background: rgba(255, 238, 0, 0.28);
    transition: background 0.3s ease;
}

.analysis-row.is-winner.is-final .analysis-track::after {
    content: "";
    position: absolute;
    inset: -4px -3px;
    background: rgba(255, 238, 0, 0.52);
    border-radius: 3px;
    transform-origin: left center;
    animation: marker-sweep 0.4s ease 0.1s both;
    pointer-events: none;
}

@keyframes marker-sweep {
    from { transform: scaleX(0); opacity: 0; }
    to   { transform: scaleX(1); opacity: 1; }
}

/* ===== GAME SCAN ROWS (phase 2) ===== */

/* scanning state — ID flickers, shown in monospace dim */
.game-scan-id {
    font-family: "Courier New", Courier, monospace;
    font-size: 10px;
    letter-spacing: 0.03em;
    transition: color 0.15s ease, font-family 0.15s ease;
}

.game-scan-id.is-scanning {
    color: rgba(37, 63, 143, 0.5);
    animation: id-flicker 0.18s ease infinite alternate;
}

@keyframes id-flicker {
    from { opacity: 0.55; }
    to   { opacity: 1;    }
}

/* resolved state — switches to handwritten font, becomes readable */
.game-scan-id.is-resolved {
    font-family: "Comic Sans MS", "Trebuchet MS", cursive;
    font-size: 11px;
    color: var(--ink-soft);
    animation: none;
}

.analysis-row.is-winner .game-scan-id.is-resolved {
    color: var(--ink);
    font-weight: 700;
}