/* ============================================
   Sailchalks: chalk talk on a green chalkboard.
   Self-contained: everything the page needs is in this file.
   White chalk lines and text on a green board, with colored chalk that
   always means the same thing: blue = good, yellow = careful or try this,
   pink = wrong or a mark. The canvas palette in src/render.ts matches
   these tokens; change both together.
   ============================================ */

/* ---------- tokens */
:root {
    --board: #4a7a63;          /* the chalkboard */
    --panel: #33594a;          /* a darker panel drawn on the board */
    --panel-hi: #3d6857;
    --chalk: #f5f2e8;          /* white chalk */
    --chalk-soft: rgba(245, 242, 232, 0.82);
    --chalk-dim: rgba(245, 242, 232, 0.6);
    --line: rgba(245, 242, 232, 0.3);
    --chalk-blue: #a6dcea;
    --chalk-pink: #ff9a85;
    --chalk-yellow: #f7d46a;
    --frame: #7a5634;          /* the wooden frame round the board (wide screens) */

    --font-display: "Cabin Sketch", "Cabin", sans-serif;   /* the wordmark: chalky capitals */
    --font-hand: "Patrick Hand", "Cabin", sans-serif;      /* the coach's handwriting: print, not cursive */
    --font-body: "Cabin", system-ui, sans-serif;            /* everything read at a glance */
    --font-label: "Cabin", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { height: 100%; }

body {
    height: 100%;
    margin: 0;
    background: var(--board);
    color: var(--chalk);
    font-family: var(--font-body);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible {
    outline: 3px solid var(--chalk-yellow);
    outline-offset: 3px;
}

#game {
    position: fixed;
    inset: 0;
    touch-action: none;
    overflow: hidden;
}

#game canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.hud-label {
    font-family: var(--font-label);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--chalk-soft);
}

.meter {
    width: 110px;
    height: 8px;
    border-radius: 4px;
    background: rgba(245, 242, 232, 0.16);
    overflow: hidden;
}

.meter i {
    display: block;
    height: 100%;
    width: 0;
}

/* ---------- overlays hold the cards */
.overlay {
    position: absolute;
    inset: 0;
    display: flex;
    overflow-y: auto;
    padding: max(24px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px))
             max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    background: rgba(51, 89, 74, 0.55);
    touch-action: manipulation;
}

.overlay[hidden] { display: none; }
.overlay > * { margin: auto; }

.over-stack {
    width: 100%;
    max-width: 380px;
    display: grid;
    gap: 16px;
}

/* ---------- the card: a panel chalked onto the board */
.card {
    position: relative;
    background: var(--panel);
    border: 2px solid var(--chalk-soft);
    /* slightly uneven corners, like a box drawn by hand */
    border-radius: 16px 10px 18px 12px / 12px 18px 10px 16px;
    box-shadow: 0 0 0 1px rgba(245, 242, 232, 0.12), 0 14px 30px -16px rgba(0, 0, 0, 0.55);
    text-align: left;
    opacity: 0;
    animation: cardIn 0.5s ease-out forwards;
}

.card--tilt-left { rotate: -1deg; animation-delay: 0.08s; }
.card--tilt-right { rotate: 1deg; animation-delay: 0.18s; }

.game-card {
    width: 100%;
    max-width: 380px;
    padding: 22px 20px 20px;
    display: grid;
    gap: 12px;
}

.eyebrow {
    margin: 0;
    font-family: var(--font-label);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--chalk-blue);
}

/* the brand: a chalk sail beside the name */
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.brand-mark {
    flex: none;
    width: 46px;
    height: 46px;
}

.game-wordmark {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2.7rem;
    line-height: 1;
    letter-spacing: 0.01em;
    color: var(--chalk);
}

.game-wordmark .brand-accent { color: var(--chalk-yellow); }

.board-name {
    margin: 0;
    font-family: var(--font-hand);
    font-weight: 400;
    font-size: 2rem;
    line-height: 1.05;
    color: var(--chalk);
}

.pick-stamp {
    display: block;
    width: fit-content;
    margin: 0;
    border: 2px solid var(--chalk-yellow);
    color: var(--chalk-yellow);
    font-family: var(--font-label);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 5px 12px;
    border-radius: 4px;
    transform: rotate(-2deg);
}

.label {
    display: block;
    font-family: var(--font-label);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--chalk-blue);
    margin-bottom: 3px;
}

.game-copy {
    margin: 0;
    font-size: 1rem;
    line-height: 1.45;
    color: var(--chalk-soft);
}

.how {
    margin: 0;
    padding: 10px 0;
    list-style: none;
    display: grid;
    gap: 8px;
    font-size: 0.95rem;
    border-top: 1.5px dashed var(--line);
    border-bottom: 1.5px dashed var(--line);
}

.how li {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 10px;
    align-items: baseline;
}

.how .label { margin: 0; color: var(--chalk-yellow); }

.stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 8px 0;
    border-top: 1.5px dashed var(--line);
    border-bottom: 1.5px dashed var(--line);
}

.stat-num {
    display: block;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.7rem;
    line-height: 1.1;
    color: var(--chalk);
    font-variant-numeric: tabular-nums;
}

/* something you press: a solid block of chalk */
button.go {
    min-height: 52px;
    margin-top: 4px;
    padding: 12px 22px;
    border: 2px solid var(--chalk);
    border-radius: 8px;
    background: var(--chalk);
    color: var(--panel);
    font-family: var(--font-label);
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    touch-action: manipulation;
    box-shadow: 0 4px 0 var(--chalk-yellow);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

button.go:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--chalk-yellow); }

button.go--quiet {
    margin-top: 0;
    background: transparent;
    color: var(--chalk);
    border-color: var(--chalk-soft);
    box-shadow: none;
}

button.go--quiet:active { transform: none; box-shadow: none; background: var(--panel-hi); }
button.go[hidden] { display: none; }

@keyframes cardIn {
    from { opacity: 0; translate: 0 14px; }
    to { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .card { animation: none; opacity: 1; }
}

/* ============================================
   The game
   ============================================ */

/* the HUD and controls only show while sailing */
#game:not([data-state="play"]) .sail-hud,
#game:not([data-state="play"]) .coach,
#game:not([data-state="play"]) .sail-controls,
#game:not([data-state="play"]) .data-btn,
#game:not([data-state="play"]) .telemetry { visibility: hidden; }

/* ---------- HUD */
.sail-hud {
    position: absolute;
    top: max(10px, env(safe-area-inset-top, 0px));
    left: max(12px, env(safe-area-inset-left, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    display: flex;
    align-items: flex-start;
    gap: 10px;
    pointer-events: none;
    text-shadow: 0 1px 3px rgba(20, 45, 35, 0.6);
}

.sail-hud .hud-label { margin: 0; }
.hud-left { flex: 1; min-width: 0; }
.hud-right { display: grid; justify-items: end; gap: 2px; }

.hud-clock {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1.1;
    color: var(--chalk);
    font-variant-numeric: tabular-nums;
}

.hud-clock #window {
    margin-left: 6px;
    font-family: var(--font-label);
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--chalk-dim);
}

.hud-clock.late #window { color: var(--chalk-pink); }

.hud-place {
    font-family: var(--font-label);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--chalk-blue);
}

.hud-speed {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 2.3rem;
    line-height: 1;
    color: var(--chalk);
    font-variant-numeric: tabular-nums;
}

.hud-speed small {
    margin-left: 3px;
    font-family: var(--font-label);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.trim-meter { display: grid; justify-items: end; gap: 3px; }
.trim-meter[hidden] { display: none; }
.trim-meter .meter { width: 96px; height: 9px; }
.trim-meter .meter i { background: var(--chalk-blue); transition: width 0.12s linear; }
.trim-meter[data-state="luff"] .meter i { background: var(--chalk-yellow); }
.trim-meter[data-state="stall"] .meter i,
.trim-meter[data-state="irons"] .meter i { background: var(--chalk-pink); }

.hud-btn {
    pointer-events: auto;
    width: 40px;
    height: 40px;
    flex: none;
    border: 2px solid var(--chalk-soft);
    border-radius: 8px;
    background: var(--panel);
    color: var(--chalk);
    font-family: var(--font-label);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    touch-action: manipulation;
}

/* ---------- Coach: one handwritten line at a time */
.coach {
    position: absolute;
    top: max(10px, env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    width: min(520px, calc(100% - 380px));
    margin: 0;
    padding: 7px 14px 8px;
    border: 2px solid var(--chalk-soft);
    border-radius: 14px 14px 14px 3px;
    background: rgba(51, 89, 74, 0.94);
    font-family: var(--font-hand);
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.2;
    color: var(--chalk);
    pointer-events: none;
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.5);
}

.coach:empty { display: none; }
.coach[data-tone="warn"] { border-color: var(--chalk-pink); }
.coach[data-tone="tip"] { border-color: var(--chalk-yellow); }
.coach[data-tone="good"] { border-color: var(--chalk-blue); }

/* the compass is drawn on the canvas; this box only places it */
.compass-slot {
    position: absolute;
    left: max(12px, env(safe-area-inset-left, 0px));
    top: var(--compass-top, 170px);
    width: 96px;
    height: 96px;
    pointer-events: none;
}

.data-btn {
    position: absolute;
    right: max(12px, env(safe-area-inset-right, 0px));
    top: var(--compass-top, 170px);
    min-height: 32px;
    padding: 4px 10px;
    border: 1.5px solid var(--chalk-soft);
    border-radius: 6px;
    background: var(--panel);
    font-family: var(--font-label);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--chalk);
    cursor: pointer;
    touch-action: manipulation;
}

.data-btn[aria-pressed="true"] { background: var(--chalk); color: var(--panel); }

.telemetry {
    position: absolute;
    right: max(12px, env(safe-area-inset-right, 0px));
    top: calc(var(--compass-top, 170px) + 40px);
    margin: 0;
    padding: 8px 10px;
    display: grid;
    grid-template-columns: auto auto;
    gap: 2px 10px;
    border: 1.5px dashed var(--chalk-dim);
    border-radius: 8px;
    background: rgba(51, 89, 74, 0.92);
    color: var(--chalk);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.telemetry[hidden] { display: none; }
.telemetry dt { font-family: var(--font-label); font-weight: 700; text-transform: uppercase; font-size: 0.66rem; letter-spacing: 0.06em; color: var(--chalk-dim); }
.telemetry dd { margin: 0; text-align: right; }

/* ---------- Controls */
.sail-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    pointer-events: none;
}

.sail-controls > * { pointer-events: auto; }
.sail-controls [hidden] { display: none !important; }

.tack-btn {
    flex: none;
    min-width: 84px;
    min-height: 56px;
    padding: 8px 16px;
    border: 2px solid var(--chalk);
    border-radius: 10px;
    background: var(--panel);
    color: var(--chalk);
    font-family: var(--font-label);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    touch-action: manipulation;
    box-shadow: 0 4px 0 rgba(245, 242, 232, 0.55);
}

.tack-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(245, 242, 232, 0.55); }
.tack-btn.suggest { background: var(--chalk-yellow); border-color: var(--chalk-yellow); color: var(--panel); animation: nudge 1s ease-in-out infinite; }

@keyframes nudge {
    50% { transform: translateY(-3px); }
}

.sheet {
    position: relative;
    flex: 1;
    max-width: 460px;
    min-height: 56px;
    padding: 14px 12px 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 2px solid var(--chalk-soft);
    border-radius: 10px;
    background: var(--panel);
    color: var(--chalk);
    touch-action: none;
}

.sheet-end {
    font-family: var(--font-label);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sheet-name {
    position: absolute;
    top: 3px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    font-size: 0.62rem !important;
}

/* the slider is the sheet: a rope with a knot you drag */
.sheet input {
    flex: 1;
    height: 32px;
    margin: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.sheet input::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: repeating-linear-gradient(90deg, var(--chalk) 0 6px, rgba(245, 242, 232, 0.45) 6px 9px);
}

.sheet input::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: repeating-linear-gradient(90deg, var(--chalk) 0 6px, rgba(245, 242, 232, 0.45) 6px 9px);
}

.sheet input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 28px;
    height: 28px;
    margin-top: -12px;
    border: 2px solid var(--chalk);
    border-radius: 50%;
    background: var(--chalk-yellow);
}

.sheet input::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border: 2px solid var(--chalk);
    border-radius: 50%;
    background: var(--chalk-yellow);
}

/* ---------- Mission list (title) */
.missions {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

.mission-btn {
    width: 100%;
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    min-height: 56px;
    border: 2px solid var(--chalk-soft);
    border-radius: 10px;
    background: transparent;
    color: var(--chalk);
    text-align: left;
    font: inherit;
    cursor: pointer;
    touch-action: manipulation;
}

.mission-btn:hover { background: var(--panel-hi); }
.mission-btn.next { border-color: var(--chalk-yellow); box-shadow: 0 4px 0 var(--chalk-yellow); }

.mission-num {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--chalk);
    font-family: var(--font-body);
    font-weight: 700;
}

.mission-btn.done .mission-num { background: var(--chalk-blue); color: var(--panel); border-color: var(--chalk-blue); }
.mission-name { display: grid; line-height: 1.2; }
.mission-name b { font-family: var(--font-hand); font-weight: 400; font-size: 1.35rem; line-height: 1.05; }
.mission-name span { font-size: 0.85rem; color: var(--chalk-dim); }

.mission-best {
    font-family: var(--font-label);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--chalk-blue);
    font-variant-numeric: tabular-nums;
}

.learned {
    margin: 0;
    padding: 10px 12px;
    border-left: 3px solid var(--chalk-blue);
    background: rgba(166, 220, 234, 0.1);
    border-radius: 0 6px 6px 0;
    font-family: var(--font-hand);
    font-weight: 400;
    font-size: 1.3rem;
    line-height: 1.2;
}

.learned:empty { display: none; }

/* portrait phones: the coach line sits low, just above the controls, like subtitles */
@media (max-width: 640px) and (min-height: 521px) {
    .coach { top: auto; bottom: var(--controls-h, 24px); width: calc(100% - 24px); }
}

/* short phones and landscape: tighter HUD */
@media (max-height: 520px) {
    .hud-speed { font-size: 1.7rem; }
    .coach { font-size: 1.2rem; top: calc(max(8px, env(safe-area-inset-top, 0px)) + 4px); width: min(420px, calc(100% - 320px)); }
    .tack-btn, .sheet { min-height: 48px; }
}

/* a wooden frame round the board when there is room for it */
@media (min-width: 900px) and (min-height: 600px) {
    #game::after {
        content: "";
        position: absolute;
        inset: 0;
        border: 10px solid var(--frame);
        box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.25), inset 0 0 40px rgba(0, 0, 0, 0.25);
        pointer-events: none;
    }
    /* keep the HUD and controls clear of the frame */
    .sail-hud, .coach { top: 22px; }
    .sail-hud { left: 24px; right: 24px; }
    .compass-slot { left: 24px; }
    .data-btn, .telemetry { right: 24px; }
    .sail-controls { padding-bottom: 22px; }
}