/* ============================================================
   HONEYCHROMA — game stylesheet
   Deliberately self-contained: no dependency on orangeworker.com's
   theme variables or theme-switcher, since this game is meant to
   eventually live on its own, off the main site.
   ============================================================ */

:root {
    /* page background */
    --hc-bg: #f4edd8;

    /* neutral ink/status colors */
    --hc-ink:       #3a2f1a;
    --hc-muted:     #8a7a55;
    --hc-highlight: #2b2214;
    --hc-solved:    #a3730f;

    /* the game's palette: three shades of warm yellow */
    --hc-yellow-light: #f6d365;
    --hc-yellow-mid:   #d9a521;
    --hc-yellow-dark:  #a3730f;

    /* difficulty tab strip */
    --hc-tab-bg:     #e8dfc4;
    --hc-tab-bg-hov: #f0e8d0;
    --hc-tab-point:  16px; /* hex-point depth; must match the tab's negative overlap margin */
}

/* page shell — this used to come from orangeworker.com's shared header/
   footer include; now that the page stands on its own, it needs its own
   reset and base layout */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--hc-bg);
    color: var(--hc-ink);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5;
}

.hex-page {
    max-width: 560px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.hex-page h1 {
    text-align: center;
    font-size: 1.9rem;
    letter-spacing: 0.02em;
    margin: 0 0 1rem;
}

/* Difficulty picker — a row of flat-top-hexagon "pills" that interlock via
   shared pointed edges (same clip-path shape family as the game's own
   hexagons, just stretched horizontally). The active tab pops out with a
   different color, while the others stay in their neutral shade so the
   strip still reads as one connected chain of hexagon edges. */
.hex-difficulty-select {
    display: flex;
    justify-content: center;
    margin: 1.25rem 0;
}

/* Backing shape sized to the row's own outer hexagon silhouette (not the
   full centering width above) — fills the small diamond-shaped gaps that
   appear wherever two adjacent tabs both point outward instead of one
   nesting into the other's notch (e.g. the active tab meeting a neighbor),
   so those seams read as a thin divider instead of a hole in the strip. */
.hex-tab-row {
    display: inline-flex;
    background: var(--hc-tab-bg);
    clip-path: polygon(
        var(--hc-tab-point) 0,
        calc(100% - var(--hc-tab-point)) 0,
        100% 50%,
        calc(100% - var(--hc-tab-point)) 100%,
        var(--hc-tab-point) 100%,
        0 50%
    );
}

.hex-tab {
    appearance: none;
    border: none;
    font: inherit;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    padding: 0.6rem 1.6rem;
    background: var(--hc-tab-bg);
    color: var(--hc-ink);
    clip-path: polygon(
        var(--hc-tab-point) 0,
        100% 0,
        calc(100% - var(--hc-tab-point)) 50%,
        100% 100%,
        var(--hc-tab-point) 100%,
        0 50%
    );
    margin-left: calc(var(--hc-tab-point) * -1);
    position: relative;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.hex-tab:first-child {
    margin-left: 0;
}

.hex-tab:hover {
    background: var(--hc-tab-bg-hov);
}

/* The base shape points out on the left and notches in on the right (an
   arrow/chevron, so inner tabs read as a directional sequence). Two cases
   need a right-side point instead of a notch: the active tab (so it reads
   as its own complete elongated hexagon rather than a chevron in the
   chain) and the last tab (so the row's open end is a closed point rather
   than a notch with nothing behind it to fill it). */
.hex-tab.is-active,
.hex-tab:last-child {
    clip-path: polygon(
        var(--hc-tab-point) 0,
        calc(100% - var(--hc-tab-point)) 0,
        100% 50%,
        calc(100% - var(--hc-tab-point)) 100%,
        var(--hc-tab-point) 100%,
        0 50%
    );
}

.hex-tab.is-active {
    /* no transform: scale() here — it throws the clip-path point out of
       alignment with the (unscaled) neighboring tabs, breaking the
       interlocked hex edge between them. filter: drop-shadow follows the
       clipped shape itself (unlike box-shadow, which follows the box), so
       it pops the active tab forward without touching its geometry. */
    background: var(--hc-yellow-mid);
    color: var(--hc-ink);
    font-weight: bold;
    filter: drop-shadow(0 2px 3px rgba(43, 34, 20, 0.4));
    z-index: 1;
}

.hex-tab.is-active:hover {
    background: var(--hc-yellow-mid);
}

.hex-instructions {
    margin-bottom: 1rem;
    color: var(--hc-ink);
}

.hex-clamp-notice {
    text-align: center;
    color: var(--hc-solved);
    font-size: 0.85rem;
    font-style: italic;
    margin-bottom: 1rem;
}

.hex-toolbar {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.hex-reset-btn {
    appearance: none;
    border: 2px solid var(--hc-yellow-dark);
    border-radius: 999px;
    background: var(--hc-yellow-light);
    color: var(--hc-ink);
    font: inherit;
    font-size: 0.85rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.5rem 1.4rem;
    cursor: pointer;
    transition: transform 0.1s ease, background-color 0.15s ease;
}

.hex-reset-btn:hover {
    background: var(--hc-yellow-mid);
}

.hex-reset-btn:active {
    transform: scale(0.94);
}

.hex-stage {
    display: flex;
    justify-content: center;
    margin: 2rem 0;
}

.hex-board {
    max-width: 100%;
    height: auto;
}

.hex-face {
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.25s ease-out;
}

.hex-edge {
    /* hairline stroke in the wedge's own fill color hides the antialiasing
       seam that otherwise shows as a faint gap between adjacent wedges.
       stroke-linejoin: round softens each wedge's outer tip slightly —
       worth having since the margin between hexagons means 3 separate
       hexagons' corners, which used to meet at one exact shared point, now
       each shrink independently toward their own center and end up as 3
       distinct sharp points near each other instead of 1 clean point. */
    stroke-width: 3;
    stroke-linejoin: round;
}

.hex-edge.is-matched {
    stroke: var(--hc-highlight);
    stroke-width: 3;
}

.hex-status {
    text-align: center;
    color: var(--hc-muted);
    font-size: 0.95rem;
}

.hex-status.is-solved {
    color: var(--hc-solved);
    font-weight: bold;
    font-size: 1.2rem;
}

.hex-score-info {
    text-align: center;
    color: var(--hc-muted);
    font-size: 0.85rem;
    min-height: 1.2em; /* reserves its line even when empty, so the layout
                           doesn't jump the instant a score appears */
}

.hex-board-id {
    text-align: center;
    color: var(--hc-muted);
    font-size: 0.8rem;
    margin-top: 0.5rem;
}

.hex-version {
    margin-left: 0.35rem;
}

.hex-share-btn {
    appearance: none;
    border: 2px solid var(--hc-yellow-dark);
    border-radius: 999px;
    background: var(--hc-yellow-light);
    color: var(--hc-ink);
    font: inherit;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 0.25rem 0.75rem;
    cursor: pointer;
    margin-left: 0.5rem;
    transition: transform 0.1s ease, background-color 0.15s ease;
}

.hex-share-btn:hover {
    background: var(--hc-yellow-mid);
}

.hex-share-btn:active {
    transform: scale(0.94);
}

.hex-footer {
    text-align: center;
    color: var(--hc-muted);
    font-size: 0.75rem;
    margin-top: 2rem;
}

/* --- /visits/ (unlinked, private counter view) --- */
.hex-visits-total {
    text-align: center;
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--hc-ink);
}

.hex-visits-section {
    margin-top: 1.5rem;
}

.hex-visits-section h2 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hc-muted);
    margin: 0 0 0.5rem;
}

.hex-visits-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hex-visits-list li {
    display: flex;
    justify-content: space-between;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--hc-tab-bg);
}

.hex-visits-time,
.hex-visits-count {
    color: var(--hc-muted);
}

.hex-visits-empty {
    color: var(--hc-muted);
}