/* 4D Frequency Selector game page.
   (Controllers/GamesController.cs, Views/Games/FrequencySelector.cshtml)

   Loads alongside predict.css purely for the shared top bar, which is keyed on
   body:has(.predict-shell). The recent-draws table reuses .history-result-table
   and the .pos-* prize badges from site.css. Nothing else reads this file.

   Bar shading is set inline by the script (one alpha per digit, scaled to that
   column's own range), so the heat map follows the data rather than a fixed
   palette. */

.freq-shell {
    max-width: 520px;
    margin: 0 auto;
    padding: 16px 16px calc(126px + env(safe-area-inset-bottom));
    font-family: Arial, Helvetica, sans-serif;
    color: var(--text);
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.freq-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.freq-back {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    font-size: 18px;
    text-decoration: none;
}

.freq-topbar h1 {
    margin: 0;
    font-size: 18px;
    font-weight: 900;
}

.freq-tagline {
    margin: 2px 0 0;
    color: var(--text-soft);
    font-size: 12px;
}

/* ── Panel ──────────────────────────────────────────────────────────────── */

.freq-panel {
    padding: 16px 14px;
    border: 1px solid rgba(216, 169, 63, .4);
    border-radius: 18px;
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(216, 169, 63, .1), transparent 60%),
        var(--surface);
    box-shadow: var(--shadow);
}

.freq-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.freq-controls label {
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 700;
}

.freq-select {
    flex: 1 1 auto;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-soft);
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
}

.freq-window {
    margin: 0 0 12px;
    color: var(--text-soft);
    font-size: 11px;
}

/* ── Digit grid ─────────────────────────────────────────────────────────── */

.freq-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.freq-col-head {
    margin-bottom: 6px;
    color: var(--text-soft);
    font-size: 10.5px;
    font-weight: 700;
    text-align: center;
}

.freq-col-bars {
    display: grid;
    gap: 4px;
}

/* One standard colour for every digit in every column - no per-frequency
   shading. Frequency is reported in words on tap and in the breakdown instead. */
.freq-bar {
    display: block;
    width: 100%;
    padding: 8px 4px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(55, 138, 221, .12);
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: center;
    cursor: pointer;
    transition: transform .12s ease, background .12s ease;
}

.freq-bar:hover {
    background: rgba(55, 138, 221, .2);
}

.freq-bar:active {
    transform: scale(.96);
}

/* Chosen digit: gold fill, so the picked number reads at a glance against the
   otherwise uniform column. */
.freq-bar.is-picked {
    border-color: #8b5c12;
    background: linear-gradient(180deg, #e8bd52, #c8952c);
    color: #40290a;
    font-weight: 900;
}

.freq-detail {
    margin: 12px 0 0;
    min-height: 30px;
    color: var(--text-soft);
    font-size: 11.5px;
    line-height: 1.5;
    text-align: center;
}

.freq-search {
    width: 100%;
    margin-top: 10px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(180deg, #8b5c12, #6d4710);
    cursor: pointer;
}

.freq-search span {
    display: block;
    padding: 13px 16px;
    border-radius: 12px;
    background: linear-gradient(180deg, #e8bd52, #c8952c);
    color: #40290a;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
    transform: translateY(-3px);
    transition: transform .09s ease;
}

.freq-search:active span {
    transform: translateY(0);
}

.freq-status {
    margin: 10px 0 0;
    min-height: 16px;
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.freq-status.is-error {
    color: #c0392b;
}

/* ── Result ─────────────────────────────────────────────────────────────── */

.freq-result {
    margin-top: 18px;
    padding: 16px 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
}

/* Two rows, three columns: labels share the first row and values the second, so
   the two values sit on one baseline even when a label wraps to two lines. That
   is what previously pushed the rating below the selected number. */
.freq-result-grid {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    grid-template-rows: auto auto;
    gap: 4px 12px;
    align-items: end;
    text-align: center;
}

/* Placed explicitly rather than left to auto-flow: the divider spans both rows,
   which otherwise pushes the second value onto a row of its own.
   Order is label, divider, label, number, rating. */
.freq-result-grid > :nth-child(1) { grid-column: 1; grid-row: 1; }
.freq-result-grid > :nth-child(2) { grid-column: 2; grid-row: 1 / span 2; }
.freq-result-grid > :nth-child(3) { grid-column: 3; grid-row: 1; }
.freq-result-number { grid-column: 1; grid-row: 2; }
.freq-result-rating { grid-column: 3; grid-row: 2; }

.freq-result-divider {
    width: 1px;
    height: 100%;
    background: var(--line);
}

.freq-result-label {
    display: block;
    align-self: end;
    color: var(--text-soft);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.freq-result-number,
.freq-result-rating {
    color: var(--gold);
    font-size: 26px;
    font-weight: 900;
    letter-spacing: .1em;
    font-variant-numeric: tabular-nums;
}

.freq-band {
    margin-top: 14px;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 900;
    text-align: center;
}

/* Band colours, shared by the result chip and the legend rows. */
.freq-shell .band-hot {
    background: rgba(226, 75, 74, .14);
    color: #c0392b;
}

.freq-shell .band-balanced {
    background: rgba(216, 169, 63, .18);
    color: #8b5c12;
}

.freq-shell .band-cold {
    background: rgba(55, 138, 221, .14);
    color: #185fa5;
}

/* Those inks are chosen for a white panel; on the dark theme the same colour
   sits on a near-black tint and falls below readable contrast. */
body.dark .freq-shell .band-hot {
    color: #f09595;
}

body.dark .freq-shell .band-balanced {
    color: #f0c65a;
}

body.dark .freq-shell .band-cold {
    color: #85b7eb;
}

.freq-band-note {
    margin: 8px 0 0;
    color: var(--text-soft);
    font-size: 11.5px;
    line-height: 1.55;
    text-align: center;
}

/* Per-position working, so the score is not a black box. */
.freq-breakdown {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin-top: 14px;
}

.freq-breakdown div {
    padding: 8px 4px;
    border: 1px solid var(--line);
    border-radius: 9px;
    text-align: center;
}

.freq-breakdown b {
    display: block;
    color: var(--text);
    font-size: 17px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.freq-breakdown span {
    display: block;
    color: var(--text-soft);
    font-size: 10px;
}

.freq-breakdown em {
    display: block;
    margin-top: 2px;
    color: var(--text-soft);
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ── Band legend ────────────────────────────────────────────────────────── */

.freq-legend-wrap {
    margin-top: 20px;
}

.freq-legend {
    display: grid;
    gap: 6px;
}

.freq-legend-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 800;
}

.freq-legend-row em {
    font-style: normal;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    opacity: .85;
}

/* ── Recent draws & footer ──────────────────────────────────────────────── */

.freq-recent,
.freq-about {
    margin-top: 20px;
}

.freq-section-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 10px;
}

.freq-section-head h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 900;
}

.freq-section-head span {
    color: var(--text-soft);
    font-size: 11.5px;
}

.freq-empty {
    margin: 0;
    padding: 16px 0;
    color: var(--text-soft);
    font-size: 13px;
    text-align: center;
}

.freq-about h2 {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 900;
}

.freq-about p {
    margin: 0;
    color: var(--text-soft);
    font-size: 13px;
    line-height: 1.6;
}

.freq-disclaimer {
    margin: 16px 0 0;
    color: var(--text-soft);
    font-size: 11px;
    line-height: 1.6;
}

@media (max-width: 360px) {
    .freq-bar {
        font-size: 12px;
        padding: 6px 2px;
    }

    .freq-result-number,
    .freq-result-rating {
        font-size: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .freq-bar {
        transition: none;
    }
}