/* Qwordy: colors come from Bootstrap's light/dark variables where possible */
:root {
    --qw-accent: #2f6fde;
    --qw-tile: #eef1f6;
    --qw-tile-text: #1d2330;
    --qw-tile-hint: #cfe3ff;
    --qw-good: #1f9d55;
    --qw-bad: #d64545;
}

[data-bs-theme="dark"] {
    --qw-tile: #2b313d;
    --qw-tile-text: #eef1f6;
    --qw-tile-hint: #24456f;
}

.qw-container {
    max-width: 560px;
}

.qw-navlink {
    padding: .35rem .7rem;
    border-radius: 999px;
    color: var(--bs-secondary-color);
}

.qw-navlink.active,
.qw-navlink:hover {
    color: var(--qw-accent);
    background: var(--bs-secondary-bg);
}

/* ---- home ---- */
.qw-game {
    border-radius: 16px;
}

.qw-game h2 {
    font-size: 1.35rem;
    margin-bottom: .25rem;
}

/* ---- word builder ---- */
.qw-word {
    font-size: clamp(2rem, 10vw, 3rem);
    font-weight: 800;
    letter-spacing: .12em;
    text-align: center;
    min-height: 1.5em;
    line-height: 1.5em;
    text-transform: uppercase;
}

.qw-word.empty {
    color: var(--bs-tertiary-color);
    letter-spacing: normal;
    font-weight: 400;
    font-size: 1.1rem;
    text-transform: none;
}

.qw-word.good { color: var(--qw-good); }
.qw-word.bad { color: var(--qw-bad); animation: qw-shake .3s; }

@keyframes qw-shake {
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}

.qw-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    max-width: 340px;
    margin: 0 auto;
}

.qw-tile {
    aspect-ratio: 1;
    border: none;
    border-radius: 18px;
    background: var(--qw-tile);
    color: var(--qw-tile-text);
    font-size: clamp(1.8rem, 9vw, 2.4rem);
    font-weight: 800;
    touch-action: manipulation;
    user-select: none;
    transition: transform .06s, background-color .2s;
}

.qw-tile:active { transform: scale(.93); }
.qw-tile.hint { background: var(--qw-tile-hint); }

.qw-controls {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    max-width: 340px;
    margin: 14px auto 0;
}

.qw-control {
    border: none;
    border-radius: 14px;
    padding: .7rem 0;
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    touch-action: manipulation;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: .75rem;
}

.qw-control:active { transform: scale(.95); }
.qw-control.primary { background: var(--qw-accent); color: #fff; }
.qw-control svg { width: 22px; height: 22px; }

.qw-chip {
    display: inline-block;
    padding: .2rem .65rem;
    margin: .2rem .15rem;
    border-radius: 999px;
    background: var(--bs-secondary-bg);
    font-weight: 600;
}

.qw-stat {
    text-align: center;
}

.qw-stat .value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
}

.qw-stat .label {
    font-size: .75rem;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* ---- vocab ---- */
.qw-definition {
    font-size: 1.25rem;
    text-align: center;
    padding: 1.5rem 1rem;
    min-height: 6.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qw-choice {
    display: block;
    width: 100%;
    margin-bottom: .6rem;
    padding: .8rem 1rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 14px;
    border: 2px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    transition: background-color .15s, border-color .15s;
}

.qw-choice:hover { border-color: var(--qw-accent); }
.qw-choice.right { background: var(--qw-good); border-color: var(--qw-good); color: #fff; }
.qw-choice.wrong { background: var(--qw-bad); border-color: var(--qw-bad); color: #fff; }

/* ---- results ---- */
.qw-word-card {
    padding: .6rem 0;
    border-bottom: 1px solid var(--bs-border-color);
}

.qw-word-card:last-child { border-bottom: none; }
.qw-word-card .word { font-weight: 700; }
.qw-word-card .def { color: var(--bs-secondary-color); }

/* toast from help.js */
.qw-toast {
    position: fixed;
    left: 50%;
    bottom: 12%;
    transform: translateX(-50%);
    z-index: 1080;
    padding: .55rem 1rem;
    border-radius: 999px;
    background: var(--bs-emphasis-color);
    color: var(--bs-body-bg);
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
    pointer-events: none;
}

/* ---- nuance ---- */
.qw-sentence {
    font-size: 1.2rem;
    line-height: 1.6;
    padding: 1.4rem 1.1rem;
}

.qw-blank {
    display: inline-block;
    min-width: 5.5rem;
    padding: 0 .35rem;
    border-bottom: 3px solid var(--qw-accent);
    font-weight: 700;
    text-align: center;
}

.qw-blank.right { border-color: var(--qw-good); color: var(--qw-good); }
.qw-blank.wrong { border-color: var(--qw-bad); color: var(--qw-bad); }

.qw-option { margin-bottom: .6rem; }
.qw-choice.dim { opacity: .55; }
.qw-choice:disabled { cursor: default; }

.qw-note {
    font-size: .9rem;
    color: var(--bs-secondary-color);
    padding: .3rem .4rem 0;
}

/* ---- ballpark ---- */
.qw-step {
    padding: .7rem 0;
    border-bottom: 1px solid var(--bs-border-color);
}

.qw-step:last-child { border-bottom: none; }
.qw-step-label { font-weight: 600; }
.qw-step.fixed .qw-step-label { font-weight: 400; color: var(--bs-secondary-color); }
.qw-num { width: 8.5rem; text-align: right; }
.qw-ends { font-size: .7rem; color: var(--bs-tertiary-color); margin-top: -.3rem; }

.qw-sticky {
    position: sticky;
    bottom: .75rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
}

.qw-numberline svg { width: 100%; height: auto; display: block; margin: .25rem 0 .5rem; }
.nl-axis { stroke: var(--bs-secondary-color); stroke-width: 1; }
.nl-zone { fill: var(--viz-zone); }
.nl-tick { font-size: 10px; fill: var(--bs-secondary-color); }
.nl-label { font-size: 11px; font-weight: 600; fill: var(--bs-body-color); text-anchor: middle; }
.nl-answer { fill: var(--bs-body-color); stroke: var(--bs-body-bg); stroke-width: 2; }
.nl-you { fill: var(--viz-1); stroke: var(--bs-body-bg); stroke-width: 2; }

/* ---- stats & charts ---- */
.qw-hero {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
}

/* chart colors: blue series, a blue ramp for the calendar, blue/red for over/under.
   Light and dark steps are chosen separately (dark: more games = lighter). */
.qw-viz, .qw-numberline, .qw-legend {
    --viz-1: #2a78d6;
    --viz-over: #e34948;
    --viz-under: #2a78d6;
    --viz-zone: rgba(42, 120, 214, .12);
    --heat-0: #f0efec;
    --heat-1: #86b6ef;
    --heat-2: #3987e5;
    --heat-3: #1c5cab;
    --heat-4: #0d366b;
}

[data-bs-theme="dark"] .qw-viz,
[data-bs-theme="dark"] .qw-numberline,
[data-bs-theme="dark"] .qw-legend {
    --viz-1: #3987e5;
    --viz-over: #e66767;
    --viz-under: #3987e5;
    --viz-zone: rgba(57, 135, 229, .18);
    --heat-0: #383835;
    /* validated against Bootstrap's dark surface #212529 (2:1 floor on the faintest step) */
    --heat-1: #1c5cab;
    --heat-2: #3987e5;
    --heat-3: #86b6ef;
    --heat-4: #cde2fb;
}

.qw-viz svg { width: 100%; height: auto; display: block; }
.qw-heatmap .cell { stroke: var(--bs-body-bg); stroke-width: 0; }
.qw-heatmap .cell.l0 { fill: var(--heat-0); }
.qw-heatmap .cell.l1 { fill: var(--heat-1); }
.qw-heatmap .cell.l2 { fill: var(--heat-2); }
.qw-heatmap .cell.l3 { fill: var(--heat-3); }
.qw-heatmap .cell.l4 { fill: var(--heat-4); }
.qw-heatmap .cell.lfuture { fill: none; stroke: var(--bs-border-color); stroke-width: 1; }
.qw-heatmap .cell.hot, .qw-heatmap .cell:focus { stroke: var(--bs-body-color); stroke-width: 2; outline: none; }

.viz-grid { stroke: var(--bs-border-color); stroke-width: 1; }
.viz-baseline { stroke: var(--bs-secondary-color); stroke-width: 1; }
.viz-axis-text { font-size: 10px; fill: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }
.viz-value { font-size: 11px; font-weight: 600; fill: var(--bs-body-color); }
.viz-bar { fill: var(--viz-1); pointer-events: none; }
.viz-over { fill: var(--viz-over); pointer-events: none; }
.viz-under { fill: var(--viz-under); pointer-events: none; }
.viz-hit { fill: transparent; outline: none; }
.viz-hit.hot, .viz-hit:focus { fill: var(--bs-secondary-bg); fill-opacity: .6; }

.qw-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.viz-over-key { background: var(--viz-over); }
.viz-under-key { background: var(--viz-under); }

.qw-tip {
    position: absolute;
    z-index: 1090;
    padding: .4rem .6rem;
    border-radius: 8px;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
    pointer-events: none;
    font-size: .85rem;
}